@wrongstack/tui 0.3.4 → 0.3.8

package/dist/index.js

@@ -1,5 +1,5 @@
 import { render, useApp, Box, useStdout, Static, Text, useInput, useStdin } from 'ink';
-import React, { useState, useReducer, useRef, useEffect, useMemo } from 'react';
+import React4, { useState, useReducer, useRef, useEffect, useMemo } from 'react';
 import * as fs2 from 'fs/promises';
 import * as path2 from 'path';
 import { InputBuilder, formatTodosList } from '@wrongstack/core';
@@ -39,14 +39,19 @@ function ConfirmPrompt({
   suggestedPattern,
   onDecision
 }) {
-  useInput((_, key) => {
-    if (key.return) {
+  React4.useEffect(() => {
+    process.stdout.write("\x07");
+  }, []);
+  useInput((input2, key) => {
+    if (!input2 || input2 === "\r" || input2 === "\n") return;
+    const ch = input2.toLowerCase();
+    if (ch === "y") {
       onDecision("yes");
-    } else if (key.escape) {
+    } else if (ch === "n") {
       onDecision("no");
-    } else if (key.ctrl && _.toLowerCase() === "a") {
+    } else if (ch === "a") {
       onDecision("always");
-    } else if (key.ctrl && _.toLowerCase() === "d") {
+    } else if (ch === "d") {
       onDecision("deny");
     }
   });
@@ -58,34 +63,32 @@ function ConfirmPrompt({
     Box,
     {
       flexDirection: "column",
-      borderStyle: "single",
-      borderTop: false,
-      borderLeft: false,
-      borderRight: false,
-      borderBottom: false,
+      borderStyle: "round",
+      borderColor: "yellow",
       paddingX: 1,
+      marginY: 1,
       children: [
         /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Confirm" }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u26A0 APPROVAL REQUIRED" }),
           /* @__PURE__ */ jsx(Text, { children: " " }),
-          /* @__PURE__ */ jsx(Text, { bold: true, children: toolName })
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: toolName })
         ] }),
         inputSummary ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: inputSummary }) : null,
         showDiff && diff ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginY: 1, children: renderDiff(diff) }) : null,
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
         /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { children: [
-          /* @__PURE__ */ jsx(Text, { bold: true, color: "green", children: "[\u21B5]" }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " yes " }),
-          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Esc]" }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " no " }),
-          /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "[Ctrl+A]" }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "green", children: "[y]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "es " }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[n]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "o " }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "[a]" }),
           /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-            " always (",
+            "lways (",
             suggestedPattern,
             ") "
           ] }),
-          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Ctrl+D]" }),
-          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " deny" })
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[d]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "eny" })
         ] }) })
       ]
     }
@@ -611,41 +614,13 @@ function Entry({
     case "turn-summary":
       return /* @__PURE__ */ jsx(Text, { dimColor: true, children: entry.text });
     case "confirm":
-      return /* @__PURE__ */ jsxs(
-        Box,
-        {
-          flexDirection: "column",
-          borderStyle: "single",
-          borderTop: false,
-          borderLeft: false,
-          borderRight: false,
-          borderBottom: false,
-          paddingX: 1,
-          children: [
-            /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Confirm" }),
-              /* @__PURE__ */ jsx(Text, { children: " " }),
-              /* @__PURE__ */ jsx(Text, { bold: true, children: entry.toolName })
-            ] }),
-            entry.input && typeof entry.input === "object" ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: Object.entries(entry.input).filter(([k]) => k !== "content" && k !== "new_string").map(([k, v]) => `${k}: ${String(v).slice(0, 80)}`).join("  ") }) : null,
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
-            /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { children: [
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "green", children: "[\u21B5]" }),
-              /* @__PURE__ */ jsx(Text, { dimColor: true, children: " yes " }),
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Esc]" }),
-              /* @__PURE__ */ jsx(Text, { dimColor: true, children: " no " }),
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "[Ctrl+A]" }),
-              /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-                " always (",
-                entry.suggestedPattern,
-                ") "
-              ] }),
-              /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Ctrl+D]" }),
-              /* @__PURE__ */ jsx(Text, { dimColor: true, children: " deny" })
-            ] }) })
-          ]
-        }
-      );
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginY: 1, children: [
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: "yellow", children: [
+          "\u26A0 Confirm: ",
+          entry.toolName
+        ] }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Waiting for y / n / a / d..." })
+      ] });
     case "banner":
       return /* @__PURE__ */ jsx(Banner, { entry });
     case "subagent": {
@@ -2291,9 +2266,9 @@ function reducer(state, action) {
         modelPicker: { ...state.modelPicker, hint: action.text }
       };
     case "confirmOpen":
-      return { ...state, confirm: action.info };
+      return { ...state, confirmQueue: [...state.confirmQueue, action.info] };
     case "confirmClose":
-      return { ...state, confirm: null };
+      return { ...state, confirmQueue: state.confirmQueue.slice(1) };
     case "resetContextChip":
       return { ...state, contextChipVersion: state.contextChipVersion + 1 };
     // --- Fleet ---
@@ -2632,7 +2607,7 @@ function App({
       modelOptions: [],
       selected: 0
     },
-    confirm: null,
+    confirmQueue: [],
     contextChipVersion: 0,
     fleet: {},
     fleetCost: 0,
@@ -2646,7 +2621,7 @@ function App({
   const inputGateRef = useRef(false);
   const lastEnterAtRef = useRef(0);
   const projectRoot = agent.ctx.projectRoot;
-  const projectName = React.useMemo(() => {
+  const projectName = React4.useMemo(() => {
     const base = path2.basename(projectRoot);
     return base && base !== path2.sep ? base : void 0;
   }, [projectRoot]);
@@ -2666,13 +2641,13 @@ function App({
     dispatch({ type: "clearInput" });
   };
   const startedAtRef = useRef(Date.now());
-  const [nowTick, setNowTick] = React.useState(Date.now());
+  const [nowTick, setNowTick] = React4.useState(Date.now());
   useEffect(() => {
     const t = setInterval(() => setNowTick(Date.now()), 1e3);
     return () => clearInterval(t);
   }, []);
   const elapsedMs = nowTick - startedAtRef.current;
-  const [gitInfo, setGitInfo] = React.useState(null);
+  const [gitInfo, setGitInfo] = React4.useState(null);
   useEffect(() => {
     let cancelled = false;
     const refresh = () => {
@@ -2687,7 +2662,7 @@ function App({
       clearInterval(t);
     };
   }, [agent.ctx.cwd]);
-  const [lastInputTokens, setLastInputTokens] = React.useState(0);
+  const [lastInputTokens, setLastInputTokens] = React4.useState(0);
   useEffect(() => {
     const off = events.on("provider.response", (e) => {
       const total = (e.usage.input ?? 0) + (e.usage.cacheRead ?? 0) + (e.usage.cacheWrite ?? 0);
@@ -2798,7 +2773,7 @@ function App({
   const prevAnyOverlayOpen = useRef(false);
   const prevEntriesCount = useRef(0);
   useEffect(() => {
-    const anyOpenNow = state.picker.open || state.slashPicker.open || state.modelPicker.open || !!state.confirm;
+    const anyOpenNow = state.picker.open || state.slashPicker.open || state.modelPicker.open || state.confirmQueue.length > 0;
     const overlayClosed = prevAnyOverlayOpen.current && !anyOpenNow;
     const newEntryCommitted = state.entries.length > prevEntriesCount.current;
     prevAnyOverlayOpen.current = anyOpenNow;
@@ -2813,7 +2788,7 @@ function App({
     state.picker.open,
     state.slashPicker.open,
     state.modelPicker.open,
-    state.confirm,
+    state.confirmQueue.length,
     state.entries.length
   ]);
   useEffect(() => {
@@ -3193,15 +3168,6 @@ function App({
       }
     });
     const offConfirmNeeded = events.on("tool.confirm_needed", (e) => {
-      dispatch({
-        type: "addEntry",
-        entry: {
-          kind: "confirm",
-          toolName: e.tool.name,
-          input: e.input,
-          suggestedPattern: e.suggestedPattern
-        }
-      });
       dispatch({
         type: "confirmOpen",
         info: {
@@ -3213,6 +3179,17 @@ function App({
         }
       });
     });
+    const offTrustPersisted = events.on("trust.persisted", (e) => {
+      const icon = e.decision === "always" ? "\u2713" : "\u2717";
+      const label = e.decision === "always" ? "always allowed" : "denied";
+      dispatch({
+        type: "addEntry",
+        entry: {
+          kind: "info",
+          text: `${icon} ${label}: ${e.tool}(${e.pattern})`
+        }
+      });
+    });
     return () => {
       offDelta();
       offToolStart();
@@ -3222,6 +3199,7 @@ function App({
       offProvErr();
       offProvResp();
       offConfirmNeeded();
+      offTrustPersisted();
       if (flushTimerRef.current) clearTimeout(flushTimerRef.current);
     };
   }, [events, agent.ctx.todos]);
@@ -3480,16 +3458,9 @@ function App({
           process.exit(130);
         }
         try {
-          exit();
-          onExit(130);
+          process.exit(130);
         } catch {
         }
-        setTimeout(() => {
-          try {
-            process.exit(130);
-          } catch {
-          }
-        }, 500).unref?.();
         dispatch({ type: "interrupt" });
         return;
       }
@@ -3552,7 +3523,8 @@ function App({
     };
   }, [exit, onExit, director]);
   const handleKey = async (input, key) => {
-    if (state.status === "aborting") return;
+    if (state.status === "aborting" && state.interrupts === 0) return;
+    if (state.confirmQueue.length > 0) return;
     if (inputGateRef.current) return;
     const isEnter = key.return || input === "\r" || input === "\n";
     if (state.modelPicker.open) {
@@ -3666,7 +3638,7 @@ function App({
         return;
       }
     }
-    if (key.escape && state.status !== "idle" && !state.confirm) {
+    if (key.escape && state.status !== "idle" && state.confirmQueue.length === 0) {
       const runningTools = Array.from(state.runningTools.values()).map((t) => t.name);
       const subagents = Object.values(state.fleet).filter((e) => e.status === "running").map((e) => ({
         label: e.name,
@@ -4034,7 +4006,7 @@ function App({
         value: state.buffer,
         cursor: state.cursor,
         placeholders: state.placeholders,
-        disabled: state.status === "aborting",
+        disabled: state.status === "aborting" || state.confirmQueue.length > 0,
         hint: inputHint,
         onKey: handleKey
       }
@@ -4066,15 +4038,24 @@ function App({
         hint: state.modelPicker.hint
       }
     ) : null,
-    state.confirm ? /* @__PURE__ */ jsx(
-      ConfirmPrompt,
-      {
-        toolName: state.confirm.toolName,
-        input: state.confirm.input,
-        suggestedPattern: state.confirm.suggestedPattern,
-        onDecision: state.confirm.resolve
-      }
-    ) : null,
+    state.confirmQueue.length > 0 && (() => {
+      const head = state.confirmQueue[0];
+      let resolved = false;
+      return /* @__PURE__ */ jsx(
+        ConfirmPrompt,
+        {
+          toolName: head.toolName,
+          input: head.input,
+          suggestedPattern: head.suggestedPattern,
+          onDecision: (decision) => {
+            if (resolved) return;
+            resolved = true;
+            head.resolve(decision);
+            dispatch({ type: "confirmClose" });
+          }
+        }
+      );
+    })(),
     /* @__PURE__ */ jsx(
       StatusBar,
       {
@@ -4206,7 +4187,7 @@ async function runTui(opts) {
     let instance;
     try {
       instance = render(
-        React.createElement(App, {
+        React4.createElement(App, {
           agent: opts.agent,
           slashRegistry: opts.slashRegistry,
           attachments: opts.attachments,