feat(kernel-tui): provision editor with per-arg pattern tuning

Adds a '2' keybind on pending session-detail entries that opens an
interactive provision editor before granting a standing provision.

The editor flattens all invocation args into a navigable list.
Each arg cycles through its pattern interval (exact → prefix levels
→ wildcard) via ↑/↓; ←/→ moves between args. Enter submits the
shaped Provision; Esc cancels back to the normal view.

Falls back to a tool-level wildcard provision when invocations data
is unavailable (unparseable command or old daemon).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: grypez

packages/kernel-tui/src/components/session-detail-view.tsx

@@ -1,3 +1,13 @@
+import type {
+  ArgPattern,
+  ParsedInvocation,
+  Provision,
+} from '@metamask/kernel-utils/session';
+import {
+  argInterval,
+  argPatternDisplay,
+  invocationToProvision,
+} from '@metamask/kernel-utils/session';
 import { Box, Text, useInput, useStdout } from 'ink';
 import React, { useEffect, useMemo, useState } from 'react';
 
@@ -409,13 +419,206 @@ function clampScroll(
   return newOffset;
 }
 
+type FlatArg = {
+  invIdx: number;
+  argIdx: number;
+  value: string;
+  interval: ArgPattern[];
+};
+
+type ProvisionEditorProps = {
+  toolName: string;
+  invocations: ParsedInvocation[];
+  onSubmit: (provision: Provision) => void;
+  onCancel: () => void;
+};
+
+/**
+ * Interactive editor that lets the user tune each arg in a pending invocation
+ * to a wider pattern (prefix or wildcard) before granting a standing provision.
+ *
+ * Keybinds: ←/→ navigate args, ↑ widen, ↓ narrow, Enter submit, Esc cancel.
+ *
+ * @param props - Component props.
+ * @param props.toolName - The tool name (e.g. "Bash").
+ * @param props.invocations - The parsed invocations for the pending request.
+ * @param props.onSubmit - Called with the resulting Provision when Enter is pressed.
+ * @param props.onCancel - Called when Esc is pressed.
+ * @returns The ProvisionEditor component.
+ */
+function ProvisionEditor({
+  toolName,
+  invocations,
+  onSubmit,
+  onCancel,
+}: ProvisionEditorProps): React.ReactElement {
+  const flatArgs = useMemo<FlatArg[]>(() => {
+    const result: FlatArg[] = [];
+    for (let i = 0; i < invocations.length; i++) {
+      const inv = invocations[i];
+      if (inv === undefined) {
+        continue;
+      }
+      for (let j = 0; j < inv.argv.length; j++) {
+        const value = inv.argv[j];
+        if (value !== undefined) {
+          result.push({
+            invIdx: i,
+            argIdx: j,
+            value,
+            interval: argInterval(value),
+          });
+        }
+      }
+    }
+    return result;
+  }, [invocations]);
+
+  const [cursor, setCursor] = useState(0);
+  const [sels, setSels] = useState<number[]>(() => flatArgs.map(() => 0));
+
+  const currentFlatArg = flatArgs[cursor];
+  const currentSel = sels[cursor] ?? 0;
+  const currentPattern = currentFlatArg?.interval[currentSel];
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onCancel();
+    } else if (key.return) {
+      const provision =
+        flatArgs.length === 0
+          ? invocationToProvision(toolName, invocations)
+          : buildProvision(toolName, invocations, flatArgs, sels);
+      onSubmit(provision);
+    } else if (key.rightArrow) {
+      setCursor((idx) => Math.min(flatArgs.length - 1, idx + 1));
+    } else if (key.leftArrow) {
+      setCursor((idx) => Math.max(0, idx - 1));
+    } else if (key.upArrow && currentFlatArg !== undefined) {
+      setSels((prev) => {
+        const next = [...prev];
+        next[cursor] = Math.min(
+          currentFlatArg.interval.length - 1,
+          (next[cursor] ?? 0) + 1,
+        );
+        return next;
+      });
+    } else if (key.downArrow) {
+      setSels((prev) => {
+        const next = [...prev];
+        next[cursor] = Math.max(0, (next[cursor] ?? 0) - 1);
+        return next;
+      });
+    }
+  });
+
+  // Render invocations as a flat line with each arg colored by its pattern scope.
+  // Cursor arg is highlighted; widened args appear in a different color.
+  let flatIdx = 0;
+  const invocationLines = invocations.map((inv, invIdx) => {
+    const argNodes = inv.argv.map((val, argIdx) => {
+      const fi = flatIdx;
+      flatIdx += 1;
+      const sel = sels[fi] ?? 0;
+      const interval = flatArgs[fi]?.interval ?? argInterval(val);
+      const pat = interval[sel];
+      const display = pat === undefined ? val : argPatternDisplay(pat);
+      const isCursor = fi === cursor;
+      const isWidened = sel > 0;
+      let argColor: 'cyan' | 'yellow' | undefined;
+      if (isCursor) {
+        argColor = 'cyan';
+      } else if (isWidened) {
+        argColor = 'yellow';
+      }
+      return (
+        <Text
+          key={`${invIdx}-${argIdx}`}
+          {...(argColor === undefined ? {} : { color: argColor })}
+          bold={isCursor}
+        >
+          {' '}
+          {display}
+        </Text>
+      );
+    });
+    return (
+      <React.Fragment key={invIdx}>
+        {invIdx > 0 && <Text dimColor> |</Text>}
+        <Text bold>{inv.name}</Text>
+        {argNodes}
+      </React.Fragment>
+    );
+  });
+
+  return (
+    <Box flexDirection="column" paddingLeft={4} marginTop={1}>
+      <Box gap={1} flexWrap="wrap">
+        {invocationLines}
+      </Box>
+      {currentFlatArg !== undefined && currentPattern !== undefined && (
+        <Box paddingLeft={2} gap={1} marginTop={0}>
+          <Text dimColor>↕</Text>
+          <Text color="cyan">{argPatternDisplay(currentPattern)}</Text>
+          <Text dimColor>
+            ({currentFlatArg.interval.indexOf(currentPattern) + 1}/
+            {currentFlatArg.interval.length})
+          </Text>
+        </Box>
+      )}
+      {flatArgs.length === 0 && (
+        <Text dimColor>
+          {' '}
+          (no args — will match any invocation of {toolName})
+        </Text>
+      )}
+      <Box marginTop={1}>
+        <Text dimColor>
+          ←/→ navigate · ↑ widen · ↓ narrow · Enter grant · Esc cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Build a Provision from the editor's current selections.
+ *
+ * @param toolName - The tool name.
+ * @param invocations - The original parsed invocations.
+ * @param flatArgs - Flattened arg list with intervals.
+ * @param sels - Per-flat-arg selection indices into each interval.
+ * @returns The constructed Provision.
+ */
+function buildProvision(
+  toolName: string,
+  invocations: ParsedInvocation[],
+  flatArgs: FlatArg[],
+  sels: number[],
+): Provision {
+  let flatIdx = 0;
+  return {
+    tool: toolName,
+    patterns: invocations.map((inv) => ({
+      name: inv.name,
+      argPatterns: inv.argv.map((val) => {
+        const fi = flatIdx;
+        flatIdx += 1;
+        const sel = sels[fi] ?? 0;
+        const interval = flatArgs[fi]?.interval ?? argInterval(val);
+        return interval[sel] ?? ({ kind: 'wildcard' } as const);
+      }),
+    })),
+  };
+}
+
 /**
  * Detail view for a single session showing a reverse-chronological timeline of
  * authorization requests (most recent at top). Each entry can be expanded with
  * the right arrow key and collapsed with the left arrow key. Left arrow on a
  * collapsed entry navigates back to the session list.
  *
- * Keybindings: ↑/↓ navigate, → expand, ← collapse/back, 1 accept, 3 reject.
+ * Keybindings: ↑/↓ navigate, → expand, ← collapse/back, 1 accept, 2 grant with provision, 3 reject.
  *
  * @param props - Component props.
  * @param props.session - The session being viewed.
@@ -444,6 +647,7 @@ export function SessionDetailView({
   const [scrollOffset, setScrollOffset] = useState(0);
   const [deciding, setDeciding] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [editingProvision, setEditingProvision] = useState(false);
 
   const { stdout } = useStdout();
   const columns = stdout.columns ?? 80;
@@ -515,6 +719,9 @@ export function SessionDetailView({
   const countBelow = displayEntries.length - visEnd;
 
   useInput((input, key) => {
+    if (editingProvision) {
+      return; // ProvisionEditor handles its own input
+    }
     if (key.upArrow) {
       const nextIdx = Math.max(0, cursorIdx - 1);
       setFocusedToken(displayEntries[nextIdx]?.token ?? null);
@@ -544,6 +751,11 @@ export function SessionDetailView({
       } else {
         onBack();
       }
+    } else if (input === '2' && !deciding) {
+      if (focused === undefined || focused.status !== 'pending') {
+        return;
+      }
+      setEditingProvision(true);
     } else if ((input === '1' || input === '3') && !deciding) {
       if (focused === undefined || focused.status !== 'pending') {
         return;
@@ -565,6 +777,26 @@ export function SessionDetailView({
     }
   });
 
+  const handleProvisionSubmit = (provision: Provision): void => {
+    if (focused === undefined || focused.status !== 'pending') {
+      return;
+    }
+    setEditingProvision(false);
+    setDeciding(true);
+    kernelApi
+      .decide(session.sessionId, focused.token, 'accept', provision)
+      .then(() => {
+        onDecided();
+        return undefined;
+      })
+      .catch((caught: Error) => {
+        setError(caught.message);
+      })
+      .finally(() => {
+        setDeciding(false);
+      });
+  };
+
   return (
     <Box flexDirection="column" paddingX={1}>
       <Box gap={1}>
@@ -585,14 +817,22 @@ export function SessionDetailView({
           const idx = displayEntries.indexOf(entry);
           const isFocused = idx === cursorIdx;
           const isExpanded = expanded.has(entry.token);
+          const isEditingThis =
+            editingProvision && isFocused && entry.status === 'pending';
           const icon = STATUS_ICON[entry.status];
           const color = STATUS_COLOR[entry.status];
 
           const { label } = parseDescription(entry.description);
 
-          const expandedLines = isExpanded
-            ? formatExpandedContent(entry.description).split('\n')
-            : [];
+          const expandedLines =
+            isExpanded && !isEditingThis
+              ? formatExpandedContent(entry.description).split('\n')
+              : [];
+
+          // Extract the tool name from the description label, e.g. "Allow Bash" → "Bash"
+          const toolName = label.startsWith('Allow ')
+            ? label.slice('Allow '.length)
+            : label;
 
           return (
             <Box key={entry.token} flexDirection="column" marginTop={0}>
@@ -602,21 +842,36 @@ export function SessionDetailView({
                 <Text color="cyan" dimColor>
                   {formatTime(entry.queuedAt)}
                 </Text>
-                <Text bold={isFocused}>{label}</Text>
+                <Text bold={isFocused}>
+                  {label}
+                  {isEditingThis && (
+                    <Text color="yellow"> (grant with provision…)</Text>
+                  )}
+                </Text>
               </Box>
+              {isEditingThis && (
+                <ProvisionEditor
+                  toolName={toolName}
+                  invocations={entry.invocations ?? []}
+                  onSubmit={handleProvisionSubmit}
+                  onCancel={() => setEditingProvision(false)}
+                />
+              )}
               {expandedLines.map((line, lineIdx) => (
                 <Box key={`${entry.token}-${lineIdx}`} paddingLeft={4}>
                   <Text dimColor wrap="wrap">
                     {line}
                   </Text>
                 </Box>
               ))}
-              {isExpanded && entry.decidedAt !== undefined && (
-                <Box paddingLeft={4}>
-                  <Text dimColor>decided {formatTime(entry.decidedAt)}</Text>
-                </Box>
-              )}
-              {isExpanded && entry.guard.body !== '#{}' && (
+              {isExpanded &&
+                !isEditingThis &&
+                entry.decidedAt !== undefined && (
+                  <Box paddingLeft={4}>
+                    <Text dimColor>decided {formatTime(entry.decidedAt)}</Text>
+                  </Box>
+                )}
+              {isExpanded && !isEditingThis && entry.guard.body !== '#{}' && (
                 <Box paddingLeft={4}>
                   <Text dimColor>guard: {entry.guard.body}</Text>
                 </Box>

packages/kernel-tui/src/components/status-bar.tsx

@@ -9,7 +9,7 @@ type StatusBarProps = {
 };
 
 const VIEW_HINTS: Record<ViewMode, string> = {
-  sessions: '↑/↓: navigate | 1: accept | 3: reject | R: refresh',
+  sessions: '↑/↓: navigate | 1: accept | 2: provision | 3: reject | R: refresh',
   files: 'Select a bundle to launch',
   objects: 'r: refresh',
   invoke: 'Tab: next field | Enter on args: send',

packages/kernel-tui/src/hooks/use-kernel.ts

@@ -2,6 +2,7 @@ import {
   getSocketPath,
   sendCommand,
 } from '@metamask/kernel-node-runtime/daemon';
+import type { ParsedInvocation } from '@metamask/kernel-utils/session';
 import { useEffect, useRef, useState } from 'react';
 
 import type { KernelApi, KernelStatus } from '../types.ts';
@@ -94,6 +95,7 @@ export function makeDaemonKernelApi(
           queuedAt: string;
           status: 'pending' | 'accepted' | 'rejected';
           decidedAt?: string;
+          invocations?: ParsedInvocation[];
         }[]
       >('session.history', { sessionId });
     },