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

package/dist/components/MultiLineInput.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Box, Text } from "ink";
+import { tone } from "../signal/index.js";
 function MultiLineInput({ value, placeholder, prompt = "> " }) {
   const lines = useMemo(() => {
     if (!value) return [];
@@ -9,14 +10,14 @@ function MultiLineInput({ value, placeholder, prompt = "> " }) {
   const lineCount = lines.length;
   if (!value && placeholder) {
     return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-      /* @__PURE__ */ jsx(Text, { color: "green", bold: true, children: prompt }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: placeholder })
+      /* @__PURE__ */ jsx(Text, { color: tone("add"), bold: true, children: prompt }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: placeholder })
     ] });
   }
   const visibleLines = lineCount > 10 ? lines.slice(-10) : lines;
   const startOffset = lineCount > 10 ? lineCount - 10 : 0;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    startOffset > 0 && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+    startOffset > 0 && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
       "... (",
       startOffset,
       " more lines above)"
@@ -24,8 +25,8 @@ function MultiLineInput({ value, placeholder, prompt = "> " }) {
     visibleLines.map((line, index) => {
       const actualIndex = startOffset + index;
       return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-        index === 0 && /* @__PURE__ */ jsx(Text, { color: "green", bold: true, children: prompt }),
-        index > 0 && /* @__PURE__ */ jsx(Text, { color: "green", children: " ".repeat(prompt.length) }),
+        index === 0 && /* @__PURE__ */ jsx(Text, { color: tone("add"), bold: true, children: prompt }),
+        index > 0 && /* @__PURE__ */ jsx(Text, { color: tone("add"), children: " ".repeat(prompt.length) }),
         /* @__PURE__ */ jsx(Text, { wrap: "wrap", children: line || " " })
       ] }, actualIndex);
     })

package/dist/components/ResourceAutocomplete.cjs

@@ -39,6 +39,7 @@ var import_messageFormatting = require("../utils/messageFormatting.js");
 var import_useTerminalSize = require("../hooks/useTerminalSize.js");
 var import_overlaySizing = require("../utils/overlaySizing.js");
 var import_agent_backend = require("../agent-backend.js");
+var import_signal = require("../signal/index.js");
 function getResourceMatchScore(resource, query) {
   if (!query) return 3;
   const lowerQuery = query.toLowerCase();
@@ -314,10 +315,10 @@ const ResourceAutocompleteInner = (0, import_react.forwardRef)(
     );
     if (!isVisible) return null;
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Loading resources..." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Loading resources..." }) });
     }
     if (displayItems.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: mentionQuery ? `No resources match "${mentionQuery}"` : "No resources available. Connect an MCP server or enable internal resources." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: mentionQuery ? `No resources match "${mentionQuery}"` : "No resources available. Connect an MCP server or enable internal resources." }) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", width: terminalWidth, paddingLeft: 2, children: visibleResources.map((item, visibleIndex) => {
       const actualIndex = scrollOffset + visibleIndex;
@@ -328,12 +329,12 @@ const ResourceAutocompleteInner = (0, import_react.forwardRef)(
       );
       const isImage = item.resource?.mimeType?.startsWith("image/");
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u276F " : "  " }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: isSelected ? "\u276F " : "  " }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_ink.Text,
           {
             wrap: "truncate-end",
-            color: isSelected ? "cyan" : "white",
+            color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("hi"),
             bold: isSelected,
             children: [
               isImage && "\u{1F5BC}\uFE0F  ",

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

@@ -1 +1 @@
-{"version":3,"file":"ResourceAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/ResourceAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,yBAAyB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAsFD;;GAEG;AACH,QAAA,MAAM,yBAAyB,8GAmY9B,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,oBAAoB,EAErB,OAAO,yBAAyB,CAAC;AAEtC,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ResourceAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/ResourceAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG9E,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,yBAAyB;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAsFD;;GAEG;AACH,QAAA,MAAM,yBAAyB,8GAmY9B,CAAC;AAEF;;;GAGG;AACH,QAAA,MAAM,oBAAoB,EAErB,OAAO,yBAAyB,CAAC;AAEtC,eAAe,oBAAoB,CAAC"}

package/dist/components/ResourceAutocomplete.js

@@ -14,6 +14,7 @@ import { centerTruncatePath } from "../utils/messageFormatting.js";
 import { useTerminalSize } from "../hooks/useTerminalSize.js";
 import { getMaxVisibleItemsForTerminalRows } from "../utils/overlaySizing.js";
 import { supportsResources } from "../agent-backend.js";
+import { tone } from "../signal/index.js";
 function getResourceMatchScore(resource, query) {
   if (!query) return 3;
   const lowerQuery = query.toLowerCase();
@@ -289,10 +290,10 @@ const ResourceAutocompleteInner = forwardRef(
     );
     if (!isVisible) return null;
     if (isLoading) {
-      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Loading resources..." }) });
+      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Loading resources..." }) });
     }
     if (displayItems.length === 0) {
-      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: mentionQuery ? `No resources match "${mentionQuery}"` : "No resources available. Connect an MCP server or enable internal resources." }) });
+      return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: mentionQuery ? `No resources match "${mentionQuery}"` : "No resources available. Connect an MCP server or enable internal resources." }) });
     }
     return /* @__PURE__ */ jsx(Box, { flexDirection: "column", width: terminalWidth, paddingLeft: 2, children: visibleResources.map((item, visibleIndex) => {
       const actualIndex = scrollOffset + visibleIndex;
@@ -303,12 +304,12 @@ const ResourceAutocompleteInner = forwardRef(
       );
       const isImage = item.resource?.mimeType?.startsWith("image/");
       return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", children: isSelected ? "\u276F " : "  " }),
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("teal") : tone("dim"), children: isSelected ? "\u276F " : "  " }),
         /* @__PURE__ */ jsxs(
           Text,
           {
             wrap: "truncate-end",
-            color: isSelected ? "cyan" : "white",
+            color: isSelected ? tone("teal") : tone("hi"),
             bold: isSelected,
             children: [
               isImage && "\u{1F5BC}\uFE0F  ",

package/dist/components/SignalGates.test.cjs

@@ -0,0 +1,215 @@
+"use strict";
+var import_react = require("react");
+var import_core = require("@dexto/core");
+var import_vitest = require("vitest");
+var import_signal = require("../signal/index.js");
+var import_harness = require("../signal/harness.js");
+var import_ink = require("ink");
+var import_node_stream = require("node:stream");
+var import_ApprovalPrompt = require("./ApprovalPrompt.js");
+const TEXT_ONLY = { columns: 100, terminal: "no-color" };
+function request(overrides) {
+  return {
+    approvalId: "a1",
+    type: import_core.ApprovalType.TOOL_APPROVAL,
+    sessionId: "s1",
+    timestamp: /* @__PURE__ */ new Date(0),
+    metadata: {},
+    ...overrides
+  };
+}
+const SHELL = request({
+  metadata: {
+    toolName: "bash_exec",
+    args: { command: "make migrate" },
+    description: "Applies the pending migration",
+    displayPreview: { type: "shell", command: "make migrate", exitCode: 0, duration: 0 }
+  }
+});
+function prompt(approval) {
+  return (0, import_react.createElement)(import_ApprovalPrompt.ApprovalPrompt, {
+    approval,
+    onApprove: () => {
+    },
+    onDeny: () => {
+    },
+    onCancel: () => {
+    }
+  });
+}
+const QUESTION = request({
+  type: "elicitation",
+  metadata: {
+    schema: {
+      type: "object",
+      properties: {
+        how_long: {
+          type: "string",
+          enum: ["One release", "Two releases"],
+          title: "How long?"
+        }
+      },
+      required: ["how_long"]
+    },
+    prompt: "Pick one"
+  }
+});
+(0, import_vitest.describe)("approvalGateTitle", () => {
+  import_vitest.it.each([
+    ["bash_exec", "NEEDS YOU \xB7 RUN A COMMAND"],
+    ["edit_file", "NEEDS YOU \xB7 EDIT A FILE"],
+    ["write_file", "NEEDS YOU \xB7 WRITE A FILE"],
+    ["plan_review", "NEEDS YOU \xB7 REVIEW THE PLAN"],
+    ["mcp--github--merge", "NEEDS YOU \xB7 USE A TOOL"]
+  ])("names %s", (toolName, title) => {
+    (0, import_vitest.expect)((0, import_ApprovalPrompt.approvalGateTitle)(import_core.ApprovalType.TOOL_APPROVAL, toolName)).toBe(title);
+  });
+  (0, import_vitest.it)("treats a command approval as a command, whatever the tool", () => {
+    (0, import_vitest.expect)((0, import_ApprovalPrompt.approvalGateTitle)(import_core.ApprovalType.COMMAND_APPROVAL, void 0)).toBe(
+      "NEEDS YOU \xB7 RUN A COMMAND"
+    );
+  });
+});
+(0, import_vitest.describe)("Signal approval gate", () => {
+  (0, import_vitest.it)("frames the command, why, and the keys to answer with", () => {
+    const frame = (0, import_harness.renderFrame)(prompt(SHELL), TEXT_ONLY);
+    (0, import_vitest.expect)(frame).toContain("NEEDS YOU \xB7 RUN A COMMAND");
+    (0, import_vitest.expect)(frame).toContain("$ make migrate");
+    (0, import_vitest.expect)(frame).toContain("Applies the pending migration");
+    (0, import_vitest.expect)(frame).toMatch(/› {2}y {2}Allow once/);
+    (0, import_vitest.expect)(frame).toMatch(/ a {2}Allow .* for this session/);
+    (0, import_vitest.expect)(frame).toMatch(/ n {2}Reject/);
+  });
+  (0, import_vitest.it)("answers on the option keys", () => {
+    const saved = (0, import_signal.getCaps)();
+    (0, import_signal.setCaps)({ ...saved, palette: "signal" });
+    const onApprove = import_vitest.vi.fn();
+    const onDeny = import_vitest.vi.fn();
+    const ref = (0, import_react.createRef)();
+    const stdout = Object.assign(new import_node_stream.PassThrough(), { columns: 100, rows: 40 });
+    const view = (0, import_ink.render)(
+      (0, import_react.createElement)(import_ApprovalPrompt.ApprovalPrompt, {
+        ref,
+        approval: SHELL,
+        onApprove,
+        onDeny,
+        onCancel: () => {
+        }
+      }),
+      { stdout, debug: true, patchConsole: false }
+    );
+    const noKey = {};
+    try {
+      (0, import_vitest.expect)(ref.current?.handleInput("y", noKey)).toBe(true);
+      (0, import_vitest.expect)(onApprove).toHaveBeenLastCalledWith({});
+      (0, import_vitest.expect)(ref.current?.handleInput("a", noKey)).toBe(true);
+      (0, import_vitest.expect)(onApprove).toHaveBeenLastCalledWith({ rememberChoice: true });
+      (0, import_vitest.expect)(ref.current?.handleInput("n", noKey)).toBe(true);
+      (0, import_vitest.expect)(onDeny).toHaveBeenCalledTimes(1);
+      (0, import_vitest.expect)(ref.current?.handleInput("x", noKey)).toBe(false);
+    } finally {
+      view.unmount();
+      (0, import_signal.setCaps)(saved);
+    }
+  });
+  (0, import_vitest.it)("asks a question inside the gate, with numbered options and no padding rows", () => {
+    const frame = (0, import_harness.renderFrame)(prompt(QUESTION), TEXT_ONLY);
+    (0, import_vitest.expect)(frame).toContain("QUESTION \xB7 ");
+    (0, import_vitest.expect)(frame).toMatch(/› 1 {2}One release/);
+    (0, import_vitest.expect)(frame).toMatch(/ {2}2 {2}Two releases/);
+    (0, import_vitest.expect)(frame).not.toMatch(/│ +│/);
+  });
+  (0, import_vitest.it)("marks the selected option without relying on colour", () => {
+    const frame = (0, import_harness.renderFrame)(prompt(SHELL), TEXT_ONLY);
+    (0, import_vitest.expect)(frame.match(/›/g)).toHaveLength(1);
+  });
+  (0, import_vitest.it)("keeps long question help to two rows", () => {
+    const help = "word ".repeat(200).trim();
+    const properties = {
+      how_long: { type: "string", enum: ["One"], title: "How long?", description: help }
+    };
+    const metadata = { ...QUESTION.metadata, schema: { type: "object", properties } };
+    const frame = (0, import_harness.renderFrame)(prompt({ ...QUESTION, metadata }), TEXT_ONLY);
+    (0, import_vitest.expect)(frame.split("\n").filter((line) => line.includes("word")).length).toBeLessThan(3);
+  });
+  (0, import_vitest.it)("fits an edit preview inside the frame", () => {
+    const unified = `@@ -1 +1 @@
++${"x ".repeat(200)}`;
+    const frame = (0, import_harness.renderFrame)(
+      prompt(
+        request({
+          metadata: {
+            toolName: "edit_file",
+            args: {},
+            displayPreview: {
+              type: "diff",
+              unified,
+              filename: "a.ts",
+              additions: 1,
+              deletions: 0
+            }
+          }
+        })
+      ),
+      TEXT_ONLY
+    );
+    for (const line of frame.split("\n")) {
+      if (line.includes("x x")) (0, import_vitest.expect)(line.trimEnd().endsWith("\u2502")).toBe(true);
+    }
+  });
+  (0, import_vitest.it)("says a command will run in the background", () => {
+    const preview = { type: "shell", command: "x", exitCode: 0, duration: 0 };
+    const metadata = {
+      toolName: "bash_exec",
+      args: {},
+      displayPreview: { ...preview, isBackground: true }
+    };
+    (0, import_vitest.expect)((0, import_harness.renderFrame)(prompt(request({ metadata })), TEXT_ONLY)).toContain("(background)");
+  });
+  (0, import_vitest.it)("wraps question help to the width inside the gate, losing nothing mid-text", () => {
+    const help = "word ".repeat(20).trim();
+    const properties = {
+      how_long: { type: "string", enum: ["One"], title: "How long?", description: help }
+    };
+    const metadata = { ...QUESTION.metadata, schema: { type: "object", properties } };
+    const frame = (0, import_harness.renderFrame)(prompt({ ...QUESTION, metadata }), {
+      columns: 80,
+      terminal: "no-color"
+    });
+    const rows = frame.split("\n").filter((line) => line.includes("word"));
+    (0, import_vitest.expect)(rows.join(" ").match(/word/g)).toHaveLength(20);
+  });
+  (0, import_vitest.it)("names the file an edit approval would change", () => {
+    const metadata = {
+      toolName: "edit_file",
+      args: {},
+      displayPreview: {
+        type: "diff",
+        unified: "@@ -1 +1 @@\n-a\n+b",
+        filename: `${process.cwd()}/src/token.ts`,
+        additions: 1,
+        deletions: 1
+      }
+    };
+    (0, import_vitest.expect)((0, import_harness.renderFrame)(prompt(request({ metadata })), TEXT_ONLY)).toContain(
+      "src/token.ts +1 \u22121"
+    );
+  });
+  (0, import_vitest.it)("words a directory approval and keeps a wrapped option under its label", () => {
+    const metadata = {
+      toolName: "edit_file",
+      args: {},
+      approvalKey: `directory:/tmp/${"long/".repeat(14)}outside:operation:edit`
+    };
+    const frame = (0, import_harness.renderFrame)(prompt(request({ metadata })), {
+      columns: 60,
+      terminal: "no-color"
+    });
+    (0, import_vitest.expect)(frame).not.toContain("directory:");
+    (0, import_vitest.expect)(frame).not.toContain(":operation:");
+    const label = frame.split("\n").findIndex((line) => line.includes("Allow edits in"));
+    (0, import_vitest.expect)(label).toBeGreaterThan(-1);
+    const start = (frame.split("\n")[label] ?? "").indexOf("Allow edits in");
+    (0, import_vitest.expect)((frame.split("\n")[label + 1] ?? "").slice(0, start).replace(/[│ ]/g, "")).toBe("");
+  });
+});

package/dist/components/SignalGates.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SignalGates.test.d.ts.map

package/dist/components/SignalGates.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignalGates.test.d.ts","sourceRoot":"","sources":["../../src/components/SignalGates.test.ts"],"names":[],"mappings":""}

package/dist/components/SignalGates.test.js

@@ -0,0 +1,217 @@
+import { createElement, createRef } from "react";
+import { ApprovalType } from "@dexto/core";
+import { describe, expect, it, vi } from "vitest";
+import { getCaps, setCaps } from "../signal/index.js";
+import { renderFrame } from "../signal/harness.js";
+import { render } from "ink";
+import { PassThrough } from "node:stream";
+import {
+  ApprovalPrompt,
+  approvalGateTitle
+} from "./ApprovalPrompt.js";
+const TEXT_ONLY = { columns: 100, terminal: "no-color" };
+function request(overrides) {
+  return {
+    approvalId: "a1",
+    type: ApprovalType.TOOL_APPROVAL,
+    sessionId: "s1",
+    timestamp: /* @__PURE__ */ new Date(0),
+    metadata: {},
+    ...overrides
+  };
+}
+const SHELL = request({
+  metadata: {
+    toolName: "bash_exec",
+    args: { command: "make migrate" },
+    description: "Applies the pending migration",
+    displayPreview: { type: "shell", command: "make migrate", exitCode: 0, duration: 0 }
+  }
+});
+function prompt(approval) {
+  return createElement(ApprovalPrompt, {
+    approval,
+    onApprove: () => {
+    },
+    onDeny: () => {
+    },
+    onCancel: () => {
+    }
+  });
+}
+const QUESTION = request({
+  type: "elicitation",
+  metadata: {
+    schema: {
+      type: "object",
+      properties: {
+        how_long: {
+          type: "string",
+          enum: ["One release", "Two releases"],
+          title: "How long?"
+        }
+      },
+      required: ["how_long"]
+    },
+    prompt: "Pick one"
+  }
+});
+describe("approvalGateTitle", () => {
+  it.each([
+    ["bash_exec", "NEEDS YOU \xB7 RUN A COMMAND"],
+    ["edit_file", "NEEDS YOU \xB7 EDIT A FILE"],
+    ["write_file", "NEEDS YOU \xB7 WRITE A FILE"],
+    ["plan_review", "NEEDS YOU \xB7 REVIEW THE PLAN"],
+    ["mcp--github--merge", "NEEDS YOU \xB7 USE A TOOL"]
+  ])("names %s", (toolName, title) => {
+    expect(approvalGateTitle(ApprovalType.TOOL_APPROVAL, toolName)).toBe(title);
+  });
+  it("treats a command approval as a command, whatever the tool", () => {
+    expect(approvalGateTitle(ApprovalType.COMMAND_APPROVAL, void 0)).toBe(
+      "NEEDS YOU \xB7 RUN A COMMAND"
+    );
+  });
+});
+describe("Signal approval gate", () => {
+  it("frames the command, why, and the keys to answer with", () => {
+    const frame = renderFrame(prompt(SHELL), TEXT_ONLY);
+    expect(frame).toContain("NEEDS YOU \xB7 RUN A COMMAND");
+    expect(frame).toContain("$ make migrate");
+    expect(frame).toContain("Applies the pending migration");
+    expect(frame).toMatch(/› {2}y {2}Allow once/);
+    expect(frame).toMatch(/ a {2}Allow .* for this session/);
+    expect(frame).toMatch(/ n {2}Reject/);
+  });
+  it("answers on the option keys", () => {
+    const saved = getCaps();
+    setCaps({ ...saved, palette: "signal" });
+    const onApprove = vi.fn();
+    const onDeny = vi.fn();
+    const ref = createRef();
+    const stdout = Object.assign(new PassThrough(), { columns: 100, rows: 40 });
+    const view = render(
+      createElement(ApprovalPrompt, {
+        ref,
+        approval: SHELL,
+        onApprove,
+        onDeny,
+        onCancel: () => {
+        }
+      }),
+      { stdout, debug: true, patchConsole: false }
+    );
+    const noKey = {};
+    try {
+      expect(ref.current?.handleInput("y", noKey)).toBe(true);
+      expect(onApprove).toHaveBeenLastCalledWith({});
+      expect(ref.current?.handleInput("a", noKey)).toBe(true);
+      expect(onApprove).toHaveBeenLastCalledWith({ rememberChoice: true });
+      expect(ref.current?.handleInput("n", noKey)).toBe(true);
+      expect(onDeny).toHaveBeenCalledTimes(1);
+      expect(ref.current?.handleInput("x", noKey)).toBe(false);
+    } finally {
+      view.unmount();
+      setCaps(saved);
+    }
+  });
+  it("asks a question inside the gate, with numbered options and no padding rows", () => {
+    const frame = renderFrame(prompt(QUESTION), TEXT_ONLY);
+    expect(frame).toContain("QUESTION \xB7 ");
+    expect(frame).toMatch(/› 1 {2}One release/);
+    expect(frame).toMatch(/ {2}2 {2}Two releases/);
+    expect(frame).not.toMatch(/│ +│/);
+  });
+  it("marks the selected option without relying on colour", () => {
+    const frame = renderFrame(prompt(SHELL), TEXT_ONLY);
+    expect(frame.match(/›/g)).toHaveLength(1);
+  });
+  it("keeps long question help to two rows", () => {
+    const help = "word ".repeat(200).trim();
+    const properties = {
+      how_long: { type: "string", enum: ["One"], title: "How long?", description: help }
+    };
+    const metadata = { ...QUESTION.metadata, schema: { type: "object", properties } };
+    const frame = renderFrame(prompt({ ...QUESTION, metadata }), TEXT_ONLY);
+    expect(frame.split("\n").filter((line) => line.includes("word")).length).toBeLessThan(3);
+  });
+  it("fits an edit preview inside the frame", () => {
+    const unified = `@@ -1 +1 @@
++${"x ".repeat(200)}`;
+    const frame = renderFrame(
+      prompt(
+        request({
+          metadata: {
+            toolName: "edit_file",
+            args: {},
+            displayPreview: {
+              type: "diff",
+              unified,
+              filename: "a.ts",
+              additions: 1,
+              deletions: 0
+            }
+          }
+        })
+      ),
+      TEXT_ONLY
+    );
+    for (const line of frame.split("\n")) {
+      if (line.includes("x x")) expect(line.trimEnd().endsWith("\u2502")).toBe(true);
+    }
+  });
+  it("says a command will run in the background", () => {
+    const preview = { type: "shell", command: "x", exitCode: 0, duration: 0 };
+    const metadata = {
+      toolName: "bash_exec",
+      args: {},
+      displayPreview: { ...preview, isBackground: true }
+    };
+    expect(renderFrame(prompt(request({ metadata })), TEXT_ONLY)).toContain("(background)");
+  });
+  it("wraps question help to the width inside the gate, losing nothing mid-text", () => {
+    const help = "word ".repeat(20).trim();
+    const properties = {
+      how_long: { type: "string", enum: ["One"], title: "How long?", description: help }
+    };
+    const metadata = { ...QUESTION.metadata, schema: { type: "object", properties } };
+    const frame = renderFrame(prompt({ ...QUESTION, metadata }), {
+      columns: 80,
+      terminal: "no-color"
+    });
+    const rows = frame.split("\n").filter((line) => line.includes("word"));
+    expect(rows.join(" ").match(/word/g)).toHaveLength(20);
+  });
+  it("names the file an edit approval would change", () => {
+    const metadata = {
+      toolName: "edit_file",
+      args: {},
+      displayPreview: {
+        type: "diff",
+        unified: "@@ -1 +1 @@\n-a\n+b",
+        filename: `${process.cwd()}/src/token.ts`,
+        additions: 1,
+        deletions: 1
+      }
+    };
+    expect(renderFrame(prompt(request({ metadata })), TEXT_ONLY)).toContain(
+      "src/token.ts +1 \u22121"
+    );
+  });
+  it("words a directory approval and keeps a wrapped option under its label", () => {
+    const metadata = {
+      toolName: "edit_file",
+      args: {},
+      approvalKey: `directory:/tmp/${"long/".repeat(14)}outside:operation:edit`
+    };
+    const frame = renderFrame(prompt(request({ metadata })), {
+      columns: 60,
+      terminal: "no-color"
+    });
+    expect(frame).not.toContain("directory:");
+    expect(frame).not.toContain(":operation:");
+    const label = frame.split("\n").findIndex((line) => line.includes("Allow edits in"));
+    expect(label).toBeGreaterThan(-1);
+    const start = (frame.split("\n")[label] ?? "").indexOf("Allow edits in");
+    expect((frame.split("\n")[label + 1] ?? "").slice(0, start).replace(/[│ ]/g, "")).toBe("");
+  });
+});

package/dist/components/SlashCommandAutocomplete.cjs

@@ -38,6 +38,7 @@ var import_commands = require("../interactive-commands/commands.js");
 var import_useTerminalSize = require("../hooks/useTerminalSize.js");
 var import_overlaySizing = require("../utils/overlaySizing.js");
 var import_agent_backend = require("../agent-backend.js");
+var import_signal = require("../signal/index.js");
 function getPromptMatchScore(prompt, query) {
   if (!query) return 3;
   const lowerQuery = query.toLowerCase();
@@ -325,14 +326,14 @@ const SlashCommandAutocompleteInner = (0, import_react.forwardRef)(function Slas
   );
   if (!isVisible) return null;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Loading commands..." }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Loading commands..." }) });
   }
   if (combinedItems.length === 0) {
     return null;
   }
   const nameColumnWidth = Math.max(16, Math.min(28, Math.floor(terminalWidth * 0.32)));
-  const descriptionColor = (isSelected) => isSelected ? "white" : "gray";
-  const commandColor = (isSelected) => isSelected ? "cyan" : "gray";
+  const descriptionColor = (isSelected) => isSelected ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim");
+  const commandColor = (isSelected) => isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", width: terminalWidth, children: visibleItems.map((item, visibleIndex) => {
     const actualIndex = scrollOffset + visibleIndex;
     const isSelected = actualIndex === selectedIndex;

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

@@ -1 +1 @@
-{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE5E,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAmGD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHA6bjC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}
+{"version":3,"file":"SlashCommandAutocomplete.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandAutocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK9C,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG5E,MAAM,WAAW,8BAA8B;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,6BAA6B;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAmGD;;GAEG;AACH,QAAA,MAAM,6BAA6B,sHA6bjC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAEhC,OAAO,6BAA6B,CAAC"}

package/dist/components/SlashCommandAutocomplete.js

@@ -13,6 +13,7 @@ import { getAvailableCommands } from "../interactive-commands/commands.js";
 import { useTerminalSize } from "../hooks/useTerminalSize.js";
 import { getMaxVisibleItemsForTerminalRows } from "../utils/overlaySizing.js";
 import { supportsPrompts } from "../agent-backend.js";
+import { tone } from "../signal/index.js";
 function getPromptMatchScore(prompt, query) {
   if (!query) return 3;
   const lowerQuery = query.toLowerCase();
@@ -300,14 +301,14 @@ const SlashCommandAutocompleteInner = forwardRef(function SlashCommandAutocomple
   );
   if (!isVisible) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Loading commands..." }) });
+    return /* @__PURE__ */ jsx(Box, { width: terminalWidth, paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Loading commands..." }) });
   }
   if (combinedItems.length === 0) {
     return null;
   }
   const nameColumnWidth = Math.max(16, Math.min(28, Math.floor(terminalWidth * 0.32)));
-  const descriptionColor = (isSelected) => isSelected ? "white" : "gray";
-  const commandColor = (isSelected) => isSelected ? "cyan" : "gray";
+  const descriptionColor = (isSelected) => isSelected ? tone("hi") : tone("dim");
+  const commandColor = (isSelected) => isSelected ? tone("teal") : tone("dim");
   return /* @__PURE__ */ jsx(Box, { flexDirection: "column", width: terminalWidth, children: visibleItems.map((item, visibleIndex) => {
     const actualIndex = scrollOffset + visibleIndex;
     const isSelected = actualIndex === selectedIndex;