@dexto/tui 1.15.0-beta.0 → 1.15.0-beta.1

package/dist/components/ApprovalPrompt.cjs

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ApprovalPrompt_exports = {};
 __export(ApprovalPrompt_exports, {
-  ApprovalPrompt: () => ApprovalPrompt
+  ApprovalPrompt: () => ApprovalPrompt,
+  approvalGateTitle: () => approvalGateTitle
 });
 module.exports = __toCommonJS(ApprovalPrompt_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -27,13 +28,36 @@ var import_ink = require("ink");
 var import_core = require("@dexto/core");
 var import_ElicitationForm = require("./ElicitationForm.js");
 var import_renderers = require("./renderers/index.js");
+var import_SignalDiff = require("./renderers/SignalDiff.js");
 var import_toolUtils = require("../utils/toolUtils.js");
 var import_approvalScope = require("../utils/approvalScope.js");
 var import_messageFormatting = require("../utils/messageFormatting.js");
+var import_diff_shared = require("./renderers/diff-shared.js");
+var import_signal = require("../signal/index.js");
+const OPTION_KEYS = {
+  yes: "y",
+  "yes-session": "a",
+  "yes-accept-edits": "e",
+  no: "n"
+};
+function approvalGateTitle(type, toolName) {
+  if (type === import_core.ApprovalType.COMMAND_APPROVAL || toolName === "bash_exec") {
+    return "NEEDS YOU \xB7 RUN A COMMAND";
+  }
+  if (toolName === "plan_review") return "NEEDS YOU \xB7 REVIEW THE PLAN";
+  if (toolName === "edit_file") return "NEEDS YOU \xB7 EDIT A FILE";
+  if (toolName === "write_file") return "NEEDS YOU \xB7 WRITE A FILE";
+  return "NEEDS YOU \xB7 USE A TOOL";
+}
+const GATE_INSET = 4;
 const ApprovalPrompt = (0, import_react.forwardRef)(
   ({ approval, onApprove, onDeny, onCancel }, ref) => {
     const isCommandApproval = approval.type === import_core.ApprovalType.COMMAND_APPROVAL;
     const isElicitation = approval.type === "elicitation";
+    const { palette, glyphs } = (0, import_signal.useCaps)();
+    const signal = palette === "signal";
+    const { stdout } = (0, import_ink.useStdout)();
+    const columns = stdout?.columns ?? 80;
     const toolName = approval.metadata.toolName;
     const toolArgs = approval.metadata.args || {};
     const approvalKey = typeof approval.metadata.approvalKey === "string" ? approval.metadata.approvalKey : void 0;
@@ -71,6 +95,13 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
     const elicitationFormRef = (0, import_react.useRef)(null);
     const selectedIndexRef = (0, import_react.useRef)(0);
     const options = [];
+    const chooseOption = (id) => {
+      if (id === "plan-approve" || id === "yes") onApprove({});
+      else if (id === "yes-session") onApprove({ rememberChoice: true });
+      else if (id === "plan-approve-accept-edits" || id === "yes-accept-edits") {
+        onApprove({ enableAcceptEditsMode: true });
+      } else if (id === "no") onDeny();
+    };
     if (isPlanReview) {
       options.push({ id: "plan-approve", label: "Approve" });
       options.push({ id: "plan-approve-accept-edits", label: "Approve + Accept All Edits" });
@@ -122,12 +153,12 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
             }
             return true;
           }
-          if (key.upArrow) {
+          if (key.upArrow || signal && !isPlanReview && key.leftArrow) {
             setSelectedIndex(
               (current) => current === 0 ? totalOptions - 1 : current - 1
             );
             return true;
-          } else if (key.downArrow) {
+          } else if (key.downArrow || signal && !isPlanReview && key.rightArrow) {
             setSelectedIndex(
               (current) => current === totalOptions - 1 ? 0 : current + 1
             );
@@ -135,19 +166,7 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
           } else if (key.return) {
             const option = getCurrentOption();
             if (!option) return false;
-            if (option.id === "plan-approve") {
-              onApprove({});
-            } else if (option.id === "plan-approve-accept-edits") {
-              onApprove({ enableAcceptEditsMode: true });
-            } else if (option.id === "yes") {
-              onApprove({});
-            } else if (option.id === "yes-session") {
-              onApprove({ rememberChoice: true });
-            } else if (option.id === "yes-accept-edits") {
-              onApprove({ enableAcceptEditsMode: true });
-            } else if (option.id === "no") {
-              onDeny();
-            }
+            chooseOption(option.id);
             return true;
           } else if (key.shift && key.tab && canAcceptEdits) {
             onApprove({ enableAcceptEditsMode: true });
@@ -156,10 +175,20 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
             onCancel();
             return true;
           }
+          if (signal && !isPlanReview && !key.ctrl && !key.meta) {
+            const shortcut = options.find(
+              (option) => OPTION_KEYS[option.id] === input.toLowerCase()
+            );
+            if (shortcut) {
+              chooseOption(shortcut.id);
+              return true;
+            }
+          }
           return false;
         }
       }),
       [
+        signal,
         isElicitation,
         canAcceptEdits,
         isPlanReview,
@@ -191,30 +220,30 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_renderers.DiffPreview, { data: displayPreview });
         case "shell":
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: displayPreview.title ?? "Bash" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: displayPreview.title ?? "Bash" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_ink.Box,
               {
                 flexDirection: "column",
                 borderStyle: "round",
-                borderColor: "gray",
+                borderColor: (0, import_signal.tone)("dim"),
                 paddingX: 1,
                 children: [
-                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", wrap: "wrap", children: [
+                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amber"), wrap: "wrap", children: [
                     i === 0 ? "$ " : "  ",
                     line
                   ] }, i)),
-                  displayPreview.isBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "(background)" })
+                  displayPreview.isBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "(background)" })
                 ]
               }
             ),
-            callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: callDescription }) })
+            callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: callDescription }) })
           ] });
         case "file":
           if (displayPreview.content) {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_renderers.CreateFilePreview, { data: displayPreview });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
             displayPreview.operation === "read" && `Read ${displayPreview.lineCount ?? "file"} lines`,
             displayPreview.operation === "write" && `Write to ${displayPreview.path}`,
             displayPreview.operation === "delete" && `Delete ${displayPreview.path}`
@@ -224,9 +253,66 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
       }
     };
     const showHeaderBlock = isCommandApproval || !displayPreview;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
+    if (signal && !isPlanReview) {
+      const shellCommand = displayPreview?.type === "shell" ? displayPreview.command : command ?? null;
+      const preview = displayPreview?.type === "shell" ? null : displayPreview?.type === "diff" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("hi"), children: [
+          (0, import_messageFormatting.makeRelativePath)(displayPreview.filename),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("add"), children: [
+            "+",
+            displayPreview.additions
+          ] }),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("del"), children: (0, import_signal.glyphText)(`\u2212${displayPreview.deletions}`, glyphs) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SignalDiff.SignalDiff, { data: displayPreview, width: columns - GATE_INSET })
+      ] }) : renderPreview();
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_diff_shared.DiffInsetContext.Provider, { value: GATE_INSET, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_signal.GateFrame,
+        {
+          title: approvalGateTitle(approval.type, toolName),
+          hint: "\u2190\u2192 choose \xB7 \u23CE confirm \xB7 esc cancel",
+          children: [
+            shellCommand !== null ? shellCommand.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("hi"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: i === 0 ? "$ " : "  " }),
+              line
+            ] }, i)) : preview === null && formattedTool ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: formattedTool.header }) : preview,
+            displayPreview?.type === "shell" && displayPreview.isBackground && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "(background)" }),
+            callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: callDescription }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexWrap: "wrap", columnGap: 3, children: options.map((option, index) => {
+              const selected = index === selectedIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("amber"), children: selected ? (0, import_signal.glyphText)("\u203A ", glyphs) : "  " }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_ink.Text,
+                    {
+                      bold: true,
+                      color: (0, import_signal.tone)("amber"),
+                      backgroundColor: (0, import_signal.tone)("s2"),
+                      children: ` ${OPTION_KEYS[option.id] ?? ""} `
+                    }
+                  ),
+                  " "
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexShrink: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ink.Text,
+                  {
+                    bold: selected,
+                    color: (0, import_signal.tone)(selected ? "hi" : "fg"),
+                    children: option.label
+                  }
+                ) })
+              ] }, option.id);
+            }) })
+          ]
+        }
+      ) });
+    }
+    const prompt = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
       showHeaderBlock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: 0, children: isCommandApproval ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", bold: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amber"), bold: true, children: [
           "Confirm command:",
           " "
         ] }) }),
@@ -235,22 +321,22 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
           {
             flexDirection: "column",
             borderStyle: "round",
-            borderColor: "gray",
+            borderColor: (0, import_signal.tone)("dim"),
             paddingX: 1,
-            children: command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", wrap: "wrap", children: line }, i))
+            children: command.split("\n").map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), wrap: "wrap", children: line }, i))
           }
         ) })
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", bold: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amber"), bold: true, children: [
             "Confirm:",
             " "
           ] }),
-          formattedTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: formattedTool.header })
+          formattedTool && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: formattedTool.header })
         ] }),
         callDescription && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", marginTop: 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "  " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: callDescription })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "  " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: callDescription })
         ] })
       ] }) }),
       renderPreview(),
@@ -258,10 +344,10 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
         options.map((option, index) => {
           const isSelected = index === selectedIndex;
           const isNo = option.id === "no";
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isNo ? "red" : "green", bold: true, children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isNo ? (0, import_signal.tone)("red") : (0, import_signal.tone)("add"), bold: true, children: [
             "  \u25B6 ",
             option.label
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
             "    ",
             option.label
           ] }) }, option.id);
@@ -269,32 +355,34 @@ const ApprovalPrompt = (0, import_react.forwardRef)(
         isPlanReview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: selectedIndex === options.length ? (
           // Selected - show editable input
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", bold: true, children: "  \u25B6 " }),
-            feedbackText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), bold: true, children: "  \u25B6 " }),
+            feedbackText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: [
               feedbackText,
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "\u258B" })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: "\u258B" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
               "What changes would you like?",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "\u258B" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: "\u258B" })
             ] })
           ] })
         ) : (
           // Not selected - show placeholder
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
             "    ",
             feedbackText || "What changes would you like?"
           ] })
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         "  ",
         "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"
       ] }) })
     ] });
+    return signal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_diff_shared.DiffInsetContext.Provider, { value: GATE_INSET, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_signal.GateFrame, { title: approvalGateTitle(approval.type, toolName), children: prompt }) }) : prompt;
   }
 );
 ApprovalPrompt.displayName = "ApprovalPrompt";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ApprovalPrompt
+  ApprovalPrompt,
+  approvalGateTitle
 });

package/dist/components/ApprovalPrompt.d.ts

@@ -31,6 +31,8 @@ interface ApprovalPromptProps {
     onDeny: (feedback?: string) => void;
     onCancel: () => void;
 }
+/** The gate's title: what the agent is waiting to do. */
+export declare function approvalGateTitle(type: string, toolName: string | undefined): string;
 /**
  * Compact approval prompt component that displays above the input area
  * Shows options based on approval type:

package/dist/components/ApprovalPrompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApprovalPrompt.d.ts","sourceRoot":"","sources":["../../src/components/ApprovalPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACR,kBAAkB,EAGlB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,0BAA0B,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,mBAAmB;IACzB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAYD;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kGAsY1B,CAAC"}
+{"version":3,"file":"ApprovalPrompt.d.ts","sourceRoot":"","sources":["../../src/components/ApprovalPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EACR,kBAAkB,EAGlB,0BAA0B,EAC7B,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAU5D,MAAM,WAAW,eAAe;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,0BAA0B,CAAC;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,IAAI,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,gFAAgF;IAChF,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,UAAU,mBAAmB;IACzB,QAAQ,EAAE,eAAe,CAAC;IAC1B,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC9C,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAUD,yDAAyD;AACzD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAQpF;AAeD;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,kGAke1B,CAAC"}

package/dist/components/ApprovalPrompt.js

@@ -7,17 +7,40 @@ import {
   useEffect,
   useMemo
 } from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { ApprovalType, isToolPresentationSnapshotV1 } from "@dexto/core";
 import { ElicitationForm } from "./ElicitationForm.js";
 import { DiffPreview, CreateFilePreview } from "./renderers/index.js";
+import { SignalDiff } from "./renderers/SignalDiff.js";
 import { isEditWriteTool } from "../utils/toolUtils.js";
 import { formatApprovalScope } from "../utils/approvalScope.js";
-import { formatToolHeader } from "../utils/messageFormatting.js";
+import { formatToolHeader, makeRelativePath } from "../utils/messageFormatting.js";
+import { DiffInsetContext } from "./renderers/diff-shared.js";
+import { GateFrame, glyphText, tone, useCaps } from "../signal/index.js";
+const OPTION_KEYS = {
+  yes: "y",
+  "yes-session": "a",
+  "yes-accept-edits": "e",
+  no: "n"
+};
+function approvalGateTitle(type, toolName) {
+  if (type === ApprovalType.COMMAND_APPROVAL || toolName === "bash_exec") {
+    return "NEEDS YOU \xB7 RUN A COMMAND";
+  }
+  if (toolName === "plan_review") return "NEEDS YOU \xB7 REVIEW THE PLAN";
+  if (toolName === "edit_file") return "NEEDS YOU \xB7 EDIT A FILE";
+  if (toolName === "write_file") return "NEEDS YOU \xB7 WRITE A FILE";
+  return "NEEDS YOU \xB7 USE A TOOL";
+}
+const GATE_INSET = 4;
 const ApprovalPrompt = forwardRef(
   ({ approval, onApprove, onDeny, onCancel }, ref) => {
     const isCommandApproval = approval.type === ApprovalType.COMMAND_APPROVAL;
     const isElicitation = approval.type === "elicitation";
+    const { palette, glyphs } = useCaps();
+    const signal = palette === "signal";
+    const { stdout } = useStdout();
+    const columns = stdout?.columns ?? 80;
     const toolName = approval.metadata.toolName;
     const toolArgs = approval.metadata.args || {};
     const approvalKey = typeof approval.metadata.approvalKey === "string" ? approval.metadata.approvalKey : void 0;
@@ -55,6 +78,13 @@ const ApprovalPrompt = forwardRef(
     const elicitationFormRef = useRef(null);
     const selectedIndexRef = useRef(0);
     const options = [];
+    const chooseOption = (id) => {
+      if (id === "plan-approve" || id === "yes") onApprove({});
+      else if (id === "yes-session") onApprove({ rememberChoice: true });
+      else if (id === "plan-approve-accept-edits" || id === "yes-accept-edits") {
+        onApprove({ enableAcceptEditsMode: true });
+      } else if (id === "no") onDeny();
+    };
     if (isPlanReview) {
       options.push({ id: "plan-approve", label: "Approve" });
       options.push({ id: "plan-approve-accept-edits", label: "Approve + Accept All Edits" });
@@ -106,12 +136,12 @@ const ApprovalPrompt = forwardRef(
             }
             return true;
           }
-          if (key.upArrow) {
+          if (key.upArrow || signal && !isPlanReview && key.leftArrow) {
             setSelectedIndex(
               (current) => current === 0 ? totalOptions - 1 : current - 1
             );
             return true;
-          } else if (key.downArrow) {
+          } else if (key.downArrow || signal && !isPlanReview && key.rightArrow) {
             setSelectedIndex(
               (current) => current === totalOptions - 1 ? 0 : current + 1
             );
@@ -119,19 +149,7 @@ const ApprovalPrompt = forwardRef(
           } else if (key.return) {
             const option = getCurrentOption();
             if (!option) return false;
-            if (option.id === "plan-approve") {
-              onApprove({});
-            } else if (option.id === "plan-approve-accept-edits") {
-              onApprove({ enableAcceptEditsMode: true });
-            } else if (option.id === "yes") {
-              onApprove({});
-            } else if (option.id === "yes-session") {
-              onApprove({ rememberChoice: true });
-            } else if (option.id === "yes-accept-edits") {
-              onApprove({ enableAcceptEditsMode: true });
-            } else if (option.id === "no") {
-              onDeny();
-            }
+            chooseOption(option.id);
             return true;
           } else if (key.shift && key.tab && canAcceptEdits) {
             onApprove({ enableAcceptEditsMode: true });
@@ -140,10 +158,20 @@ const ApprovalPrompt = forwardRef(
             onCancel();
             return true;
           }
+          if (signal && !isPlanReview && !key.ctrl && !key.meta) {
+            const shortcut = options.find(
+              (option) => OPTION_KEYS[option.id] === input.toLowerCase()
+            );
+            if (shortcut) {
+              chooseOption(shortcut.id);
+              return true;
+            }
+          }
           return false;
         }
       }),
       [
+        signal,
         isElicitation,
         canAcceptEdits,
         isPlanReview,
@@ -175,30 +203,30 @@ const ApprovalPrompt = forwardRef(
           return /* @__PURE__ */ jsx(DiffPreview, { data: displayPreview });
         case "shell":
           return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-            /* @__PURE__ */ jsx(Box, { marginBottom: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: displayPreview.title ?? "Bash" }) }),
+            /* @__PURE__ */ jsx(Box, { marginBottom: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: displayPreview.title ?? "Bash" }) }),
             /* @__PURE__ */ jsxs(
               Box,
               {
                 flexDirection: "column",
                 borderStyle: "round",
-                borderColor: "gray",
+                borderColor: tone("dim"),
                 paddingX: 1,
                 children: [
-                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ jsxs(Text, { color: "yellowBright", wrap: "wrap", children: [
+                  displayPreview.command.split("\n").map((line, i) => /* @__PURE__ */ jsxs(Text, { color: tone("amber"), wrap: "wrap", children: [
                     i === 0 ? "$ " : "  ",
                     line
                   ] }, i)),
-                  displayPreview.isBackground && /* @__PURE__ */ jsx(Text, { color: "gray", children: "(background)" })
+                  displayPreview.isBackground && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "(background)" })
                 ]
               }
             ),
-            callDescription && /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: callDescription }) })
+            callDescription && /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: callDescription }) })
           ] });
         case "file":
           if (displayPreview.content) {
             return /* @__PURE__ */ jsx(CreateFilePreview, { data: displayPreview });
           }
-          return /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          return /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
             displayPreview.operation === "read" && `Read ${displayPreview.lineCount ?? "file"} lines`,
             displayPreview.operation === "write" && `Write to ${displayPreview.path}`,
             displayPreview.operation === "delete" && `Delete ${displayPreview.path}`
@@ -208,9 +236,66 @@ const ApprovalPrompt = forwardRef(
       }
     };
     const showHeaderBlock = isCommandApproval || !displayPreview;
-    return /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
+    if (signal && !isPlanReview) {
+      const shellCommand = displayPreview?.type === "shell" ? displayPreview.command : command ?? null;
+      const preview = displayPreview?.type === "shell" ? null : displayPreview?.type === "diff" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("hi"), children: [
+          makeRelativePath(displayPreview.filename),
+          " ",
+          /* @__PURE__ */ jsxs(Text, { color: tone("add"), children: [
+            "+",
+            displayPreview.additions
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx(Text, { color: tone("del"), children: glyphText(`\u2212${displayPreview.deletions}`, glyphs) })
+        ] }),
+        /* @__PURE__ */ jsx(SignalDiff, { data: displayPreview, width: columns - GATE_INSET })
+      ] }) : renderPreview();
+      return /* @__PURE__ */ jsx(DiffInsetContext.Provider, { value: GATE_INSET, children: /* @__PURE__ */ jsxs(
+        GateFrame,
+        {
+          title: approvalGateTitle(approval.type, toolName),
+          hint: "\u2190\u2192 choose \xB7 \u23CE confirm \xB7 esc cancel",
+          children: [
+            shellCommand !== null ? shellCommand.split("\n").map((line, i) => /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("hi"), children: [
+              /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: i === 0 ? "$ " : "  " }),
+              line
+            ] }, i)) : preview === null && formattedTool ? /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: formattedTool.header }) : preview,
+            displayPreview?.type === "shell" && displayPreview.isBackground && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "(background)" }),
+            callDescription && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: callDescription }),
+            /* @__PURE__ */ jsx(Box, { flexWrap: "wrap", columnGap: 3, children: options.map((option, index) => {
+              const selected = index === selectedIndex;
+              return /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsxs(Text, { children: [
+                  /* @__PURE__ */ jsx(Text, { bold: true, color: tone("amber"), children: selected ? glyphText("\u203A ", glyphs) : "  " }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      bold: true,
+                      color: tone("amber"),
+                      backgroundColor: tone("s2"),
+                      children: ` ${OPTION_KEYS[option.id] ?? ""} `
+                    }
+                  ),
+                  " "
+                ] }) }),
+                /* @__PURE__ */ jsx(Box, { flexShrink: 1, children: /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    bold: selected,
+                    color: tone(selected ? "hi" : "fg"),
+                    children: option.label
+                  }
+                ) })
+              ] }, option.id);
+            }) })
+          ]
+        }
+      ) });
+    }
+    const prompt = /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [
       showHeaderBlock && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 0, children: isCommandApproval ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: "yellowBright", bold: true, children: [
+        /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: tone("amber"), bold: true, children: [
           "Confirm command:",
           " "
         ] }) }),
@@ -219,22 +304,22 @@ const ApprovalPrompt = forwardRef(
           {
             flexDirection: "column",
             borderStyle: "round",
-            borderColor: "gray",
+            borderColor: tone("dim"),
             paddingX: 1,
-            children: command.split("\n").map((line, i) => /* @__PURE__ */ jsx(Text, { color: "red", wrap: "wrap", children: line }, i))
+            children: command.split("\n").map((line, i) => /* @__PURE__ */ jsx(Text, { color: tone("red"), wrap: "wrap", children: line }, i))
           }
         ) })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ jsxs(Text, { color: "yellowBright", bold: true, children: [
+          /* @__PURE__ */ jsxs(Text, { color: tone("amber"), bold: true, children: [
             "Confirm:",
             " "
           ] }),
-          formattedTool && /* @__PURE__ */ jsx(Text, { color: "cyan", children: formattedTool.header })
+          formattedTool && /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: formattedTool.header })
         ] }),
         callDescription && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", marginTop: 0, children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: "  " }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: callDescription })
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "  " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: callDescription })
         ] })
       ] }) }),
       renderPreview(),
@@ -242,10 +327,10 @@ const ApprovalPrompt = forwardRef(
         options.map((option, index) => {
           const isSelected = index === selectedIndex;
           const isNo = option.id === "no";
-          return /* @__PURE__ */ jsx(Box, { children: isSelected ? /* @__PURE__ */ jsxs(Text, { color: isNo ? "red" : "green", bold: true, children: [
+          return /* @__PURE__ */ jsx(Box, { children: isSelected ? /* @__PURE__ */ jsxs(Text, { color: isNo ? tone("red") : tone("add"), bold: true, children: [
             "  \u25B6 ",
             option.label
-          ] }) : /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          ] }) : /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
             "    ",
             option.label
           ] }) }, option.id);
@@ -253,31 +338,33 @@ const ApprovalPrompt = forwardRef(
         isPlanReview && /* @__PURE__ */ jsx(Box, { children: selectedIndex === options.length ? (
           // Selected - show editable input
           /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-            /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "  \u25B6 " }),
-            feedbackText ? /* @__PURE__ */ jsxs(Text, { color: "white", children: [
+            /* @__PURE__ */ jsx(Text, { color: tone("red"), bold: true, children: "  \u25B6 " }),
+            feedbackText ? /* @__PURE__ */ jsxs(Text, { color: tone("hi"), children: [
               feedbackText,
-              /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u258B" })
-            ] }) : /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: "\u258B" })
+            ] }) : /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
               "What changes would you like?",
-              /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u258B" })
+              /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: "\u258B" })
             ] })
           ] })
         ) : (
           // Not selected - show placeholder
-          /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
             "    ",
             feedbackText || "What changes would you like?"
           ] })
         ) })
       ] }),
-      /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Box, { marginTop: 0, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         "  ",
         "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"
       ] }) })
     ] });
+    return signal ? /* @__PURE__ */ jsx(DiffInsetContext.Provider, { value: GATE_INSET, children: /* @__PURE__ */ jsx(GateFrame, { title: approvalGateTitle(approval.type, toolName), children: prompt }) }) : prompt;
   }
 );
 ApprovalPrompt.displayName = "ApprovalPrompt";
 export {
-  ApprovalPrompt
+  ApprovalPrompt,
+  approvalGateTitle
 };