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

package/dist/components/overlays/ToolBrowser.cjs

@@ -38,6 +38,7 @@ var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
 var import_clipboardUtils = require("../../utils/clipboardUtils.js");
 var import_overlaySizing = require("../../utils/overlaySizing.js");
 var import_HintBar = require("../shared/HintBar.js");
+var import_signal = require("../../signal/index.js");
 const LIST_ACTIONS = ["view", "config", "back"];
 const ToolBrowser = (0, import_react.forwardRef)(function ToolBrowser2({ isVisible, onClose, agent, sessionId }, ref) {
   const { columns, rows } = (0, import_useTerminalSize.useTerminalSize)();
@@ -569,8 +570,8 @@ const ToolBrowser = (0, import_react.forwardRef)(function ToolBrowser2({ isVisib
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Tools" }),
-      /* @__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"), bold: true, children: "Tools" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " ",
         "(",
         filteredTools.length,
@@ -583,8 +584,8 @@ const ToolBrowser = (0, import_react.forwardRef)(function ToolBrowser2({ isVisib
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Search: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: searchQuery ? "white" : "gray", wrap: "truncate-end", children: searchQuery || "Type to filter tools\u2026" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Search: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: searchQuery ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim"), wrap: "truncate-end", children: searchQuery || "Type to filter tools\u2026" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: maxVisibleTools, marginTop: 1, children: isLoading || filteredTools.length === 0 ? Array.from({ length: maxVisibleTools }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, `tool-empty-${index}`)) : Array.from({ length: maxVisibleTools }, (_, rowIndex) => {
       const tool = visibleTools[rowIndex];
@@ -594,27 +595,40 @@ const ToolBrowser = (0, import_react.forwardRef)(function ToolBrowser2({ isVisib
       const actualIndex = scrollOffset + rowIndex;
       const isSelected = actualIndex === selectedIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "white", children: isSelected ? "\u25B6 " : "  " }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: truncateText(tool.name, 35) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: tool.source === "local" ? "magenta" : "blue", children: [
-          " ",
-          "[",
-          tool.source === "local" ? "Local" : "MCP",
-          "]"
-        ] }),
-        tool.serverName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("hi"), children: isSelected ? "\u25B6 " : "  " }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ink.Text,
+          {
+            color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("hi"),
+            bold: isSelected,
+            children: truncateText(tool.name, 35)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ink.Text,
+          {
+            color: tool.source === "local" ? (0, import_signal.tone)("faint") : (0, import_signal.tone)("fg"),
+            children: [
+              " ",
+              "[",
+              tool.source === "local" ? "Local" : "MCP",
+              "]"
+            ]
+          }
+        ),
+        tool.serverName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           " (",
           tool.serverName,
           ")"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: tool.isEnabled ? "green" : "red", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: tool.isEnabled ? (0, import_signal.tone)("add") : (0, import_signal.tone)("red"), children: [
           " ",
           tool.isEnabled ? "Enabled" : "Disabled"
         ] }),
-        tool.isAutoApproved && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: " [auto-approved]" })
+        tool.isAutoApproved && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), children: " [auto-approved]" })
       ] }, tool.name);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: loadError ? "red" : "gray", wrap: "truncate-end", children: detailLine }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: loadError ? (0, import_signal.tone)("red") : (0, import_signal.tone)("dim"), wrap: "truncate-end", children: detailLine }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HintBar.HintBar, { hints: ["\u2191\u2193 navigate", "Enter options", "Esc close"] }) })
   ] });
 });
@@ -662,16 +676,16 @@ function buildDetailLineData(tool, maxWidth) {
 function renderDetailLine(line, _index) {
   switch (line.type) {
     case "title":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: line.text });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: line.text });
     case "source":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: line.source === "local" ? "magenta" : "blue", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: line.source === "local" ? (0, import_signal.tone)("faint") : (0, import_signal.tone)("fg"), children: [
         line.source === "local" ? "Local Tool" : "MCP Tool",
         line.serverName ? ` (${line.serverName})` : ""
       ] });
     case "empty":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " });
     case "header":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: line.text });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: line.text });
     case "description":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
@@ -680,23 +694,23 @@ function renderDetailLine(line, _index) {
     case "param-name":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: line.name }),
-        /* @__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: line.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           " (",
           line.paramType,
           ")"
         ] }),
-        line.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: " *required" })
+        line.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), children: " *required" })
       ] });
     case "param-desc":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: line.text })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: line.text })
       ] });
     case "param-enum":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }),
-        /* @__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: [
           "Allowed: ",
           line.values.join(" | ")
         ] })
@@ -710,25 +724,25 @@ function ToolActionsMenu({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Tool Options" }),
-      /* @__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"), bold: true, children: "Tool Options" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 0 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 0 ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       listActionsIndex === 0 ? "\u25B6 " : "  ",
       "View details"
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 1 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 1 ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       listActionsIndex === 1 ? "\u25B6 " : "  ",
       "Edit tool settings"
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 2 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: listActionsIndex === 2 ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       listActionsIndex === 2 ? "\u25B6 " : "  ",
       "Back"
     ] }) }),
-    /* @__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: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+    /* @__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: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function ToolDetailView({
@@ -749,21 +763,24 @@ function ToolDetailView({
   const hasMoreBelow = clampedOffset + maxVisibleLines < totalLines;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Tool Details" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " - \u2191\u2193 scroll, c copy schema, Enter settings, Esc back" }),
-      copyFeedback && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "green", bold: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: "Tool Details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
+        " ",
+        "- \u2191\u2193 scroll, c copy schema, Enter settings, Esc back"
+      ] }),
+      copyFeedback && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("add"), bold: true, children: [
         " ",
         copyFeedback
       ] })
     ] }),
-    /* @__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: "\u2500".repeat(Math.min(60, columns - 2)) }) }),
-    /* @__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: hasMoreAbove ? `\u2191 ${clampedOffset} more above` : " " }) }),
+    /* @__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: "\u2500".repeat(Math.min(60, columns - 2)) }) }),
+    /* @__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: hasMoreAbove ? `\u2191 ${clampedOffset} more above` : " " }) }),
     Array.from({ length: maxVisibleLines }, (_, i) => {
       const absoluteIndex = clampedOffset + i;
       const line = lineData[absoluteIndex];
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: line ? renderDetailLine(line, absoluteIndex) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) }, i);
     }),
-    /* @__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: hasMoreBelow ? `\u2193 ${totalLines - clampedOffset - maxVisibleLines} more below` : " " }) })
+    /* @__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: hasMoreBelow ? `\u2193 ${totalLines - clampedOffset - maxVisibleLines} more below` : " " }) })
   ] });
 }
 function ToolSettingsView({
@@ -776,40 +793,40 @@ function ToolSettingsView({
   const autoApproveUnavailable = !sessionAvailable || autoApproveDisabled;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Tool Settings" }),
-      /* @__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"), bold: true, children: "Tool Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Status: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tool.isEnabled ? "green" : "red", children: tool.isEnabled ? "Enabled" : "Disabled" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \xB7 Auto-approve: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tool.isAutoApproved ? "green" : "red", children: tool.isAutoApproved ? "On" : "Off" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (session)" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Status: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tool.isEnabled ? (0, import_signal.tone)("add") : (0, import_signal.tone)("red"), children: tool.isEnabled ? "Enabled" : "Disabled" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \xB7 Auto-approve: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tool.isAutoApproved ? (0, import_signal.tone)("add") : (0, import_signal.tone)("red"), children: tool.isAutoApproved ? "On" : "Off" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " (session)" })
     ] }),
-    autoApproveDisabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "Enable the tool to allow auto-approve." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: configIndex === 0 ? "cyan" : "gray", children: [
+    autoApproveDisabled && /* @__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)("amberDim"), children: "Enable the tool to allow auto-approve." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: configIndex === 0 ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       configIndex === 0 ? "\u25B6 " : "  ",
       tool.isEnabled ? "Disable tool" : "Enable tool"
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_ink.Text,
       {
-        color: configIndex === 1 ? autoApproveUnavailable ? "yellow" : "cyan" : "gray",
+        color: configIndex === 1 ? autoApproveUnavailable ? (0, import_signal.tone)("amberDim") : (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"),
         children: [
           configIndex === 1 ? "\u25B6 " : "  ",
           tool.isAutoApproved ? "Disable auto-approve (session)" : "Enable auto-approve (session)"
         ]
       }
     ) }),
-    !sessionAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "Auto-approve requires an active session." }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: configIndex === 2 ? "cyan" : "gray", children: [
+    !sessionAvailable && /* @__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)("amberDim"), children: "Auto-approve requires an active session." }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: configIndex === 2 ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       configIndex === 2 ? "\u25B6 " : "  ",
       "Back"
     ] }) }),
-    /* @__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: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+    /* @__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: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function ToolScopeView({
@@ -821,23 +838,23 @@ function ToolScopeView({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: scopeNextEnabled ? "Enable Tool" : "Disable Tool" }),
-      /* @__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"), bold: true, children: scopeNextEnabled ? "Enable Tool" : "Disable Tool" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
-    /* @__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: "Apply to:" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: scopeTarget === "session" ? "cyan" : "gray", children: [
+    /* @__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: "Apply to:" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: scopeTarget === "session" ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       scopeTarget === "session" ? "\u25B6 " : "  ",
       "Session (default)"
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: scopeTarget === "global" ? "cyan" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: scopeTarget === "global" ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), children: [
       scopeTarget === "global" ? "\u25B6 " : "  ",
       "Global (persisted)"
     ] }) }),
-    !sessionAvailable && scopeTarget === "session" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "No active session; switching to global." }) }),
-    /* @__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: "\u2191\u2193 choose scope \xB7 Enter confirm \xB7 Esc back" }) })
+    !sessionAvailable && scopeTarget === "session" && /* @__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)("amberDim"), children: "No active session; switching to global." }) }),
+    /* @__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: "\u2191\u2193 choose scope \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function truncateText(text, maxLength) {

package/dist/components/overlays/ToolBrowser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolBrowser.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ToolBrowser.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAkBD;;GAEG;AACH,QAAA,MAAM,WAAW,4FAusBf,CAAC;AAyZH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToolBrowser.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ToolBrowser.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAkBD;;GAEG;AACH,QAAA,MAAM,WAAW,4FA4sBf,CAAC;AAkaH,eAAe,WAAW,CAAC"}

package/dist/components/overlays/ToolBrowser.js

@@ -12,6 +12,7 @@ import { useTerminalSize } from "../../hooks/useTerminalSize.js";
 import { writeToClipboard } from "../../utils/clipboardUtils.js";
 import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
 import { HintBar } from "../shared/HintBar.js";
+import { tone } from "../../signal/index.js";
 const LIST_ACTIONS = ["view", "config", "back"];
 const ToolBrowser = forwardRef(function ToolBrowser2({ isVisible, onClose, agent, sessionId }, ref) {
   const { columns, rows } = useTerminalSize();
@@ -543,8 +544,8 @@ const ToolBrowser = forwardRef(function ToolBrowser2({ isVisible, onClose, agent
   }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tools" }),
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: "Tools" }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " ",
         "(",
         filteredTools.length,
@@ -557,8 +558,8 @@ const ToolBrowser = forwardRef(function ToolBrowser2({ isVisible, onClose, agent
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Search: " }),
-      /* @__PURE__ */ jsx(Text, { color: searchQuery ? "white" : "gray", wrap: "truncate-end", children: searchQuery || "Type to filter tools\u2026" })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Search: " }),
+      /* @__PURE__ */ jsx(Text, { color: searchQuery ? tone("hi") : tone("dim"), wrap: "truncate-end", children: searchQuery || "Type to filter tools\u2026" })
     ] }),
     /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: maxVisibleTools, marginTop: 1, children: isLoading || filteredTools.length === 0 ? Array.from({ length: maxVisibleTools }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `tool-empty-${index}`)) : Array.from({ length: maxVisibleTools }, (_, rowIndex) => {
       const tool = visibleTools[rowIndex];
@@ -568,27 +569,40 @@ const ToolBrowser = forwardRef(function ToolBrowser2({ isVisible, onClose, agent
       const actualIndex = scrollOffset + rowIndex;
       const isSelected = actualIndex === selectedIndex;
       return /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", children: isSelected ? "\u25B6 " : "  " }),
-        /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: truncateText(tool.name, 35) }),
-        /* @__PURE__ */ jsxs(Text, { color: tool.source === "local" ? "magenta" : "blue", children: [
-          " ",
-          "[",
-          tool.source === "local" ? "Local" : "MCP",
-          "]"
-        ] }),
-        tool.serverName && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("teal") : tone("hi"), children: isSelected ? "\u25B6 " : "  " }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: isSelected ? tone("teal") : tone("hi"),
+            bold: isSelected,
+            children: truncateText(tool.name, 35)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            color: tool.source === "local" ? tone("faint") : tone("fg"),
+            children: [
+              " ",
+              "[",
+              tool.source === "local" ? "Local" : "MCP",
+              "]"
+            ]
+          }
+        ),
+        tool.serverName && /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           " (",
           tool.serverName,
           ")"
         ] }),
-        /* @__PURE__ */ jsxs(Text, { color: tool.isEnabled ? "green" : "red", children: [
+        /* @__PURE__ */ jsxs(Text, { color: tool.isEnabled ? tone("add") : tone("red"), children: [
           " ",
           tool.isEnabled ? "Enabled" : "Disabled"
         ] }),
-        tool.isAutoApproved && /* @__PURE__ */ jsx(Text, { color: "yellow", children: " [auto-approved]" })
+        tool.isAutoApproved && /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), children: " [auto-approved]" })
       ] }, tool.name);
     }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: loadError ? "red" : "gray", wrap: "truncate-end", children: detailLine }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: loadError ? tone("red") : tone("dim"), wrap: "truncate-end", children: detailLine }) }),
     /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(HintBar, { hints: ["\u2191\u2193 navigate", "Enter options", "Esc close"] }) })
   ] });
 });
@@ -636,16 +650,16 @@ function buildDetailLineData(tool, maxWidth) {
 function renderDetailLine(line, _index) {
   switch (line.type) {
     case "title":
-      return /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: line.text });
+      return /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: line.text });
     case "source":
-      return /* @__PURE__ */ jsxs(Text, { color: line.source === "local" ? "magenta" : "blue", children: [
+      return /* @__PURE__ */ jsxs(Text, { color: line.source === "local" ? tone("faint") : tone("fg"), children: [
         line.source === "local" ? "Local Tool" : "MCP Tool",
         line.serverName ? ` (${line.serverName})` : ""
       ] });
     case "empty":
       return /* @__PURE__ */ jsx(Text, { children: " " });
     case "header":
-      return /* @__PURE__ */ jsx(Text, { color: "gray", children: line.text });
+      return /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: line.text });
     case "description":
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { children: " " }),
@@ -654,23 +668,23 @@ function renderDetailLine(line, _index) {
     case "param-name":
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { children: " " }),
-        /* @__PURE__ */ jsx(Text, { color: "cyan", children: line.name }),
-        /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: line.name }),
+        /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           " (",
           line.paramType,
           ")"
         ] }),
-        line.required && /* @__PURE__ */ jsx(Text, { color: "red", children: " *required" })
+        line.required && /* @__PURE__ */ jsx(Text, { color: tone("red"), children: " *required" })
       ] });
     case "param-desc":
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { children: " " }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: line.text })
+        /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: line.text })
       ] });
     case "param-enum":
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { children: " " }),
-        /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "Allowed: ",
           line.values.join(" | ")
         ] })
@@ -684,25 +698,25 @@ function ToolActionsMenu({
 }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Options" }),
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: "Tool Options" }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 0 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 0 ? tone("teal") : tone("dim"), children: [
       listActionsIndex === 0 ? "\u25B6 " : "  ",
       "View details"
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 1 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 1 ? tone("teal") : tone("dim"), children: [
       listActionsIndex === 1 ? "\u25B6 " : "  ",
       "Edit tool settings"
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 2 ? "cyan" : "gray", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: listActionsIndex === 2 ? tone("teal") : tone("dim"), children: [
       listActionsIndex === 2 ? "\u25B6 " : "  ",
       "Back"
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function ToolDetailView({
@@ -723,21 +737,24 @@ function ToolDetailView({
   const hasMoreBelow = clampedOffset + maxVisibleLines < totalLines;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Details" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " - \u2191\u2193 scroll, c copy schema, Enter settings, Esc back" }),
-      copyFeedback && /* @__PURE__ */ jsxs(Text, { color: "green", bold: true, children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: "Tool Details" }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
+        " ",
+        "- \u2191\u2193 scroll, c copy schema, Enter settings, Esc back"
+      ] }),
+      copyFeedback && /* @__PURE__ */ jsxs(Text, { color: tone("add"), bold: true, children: [
         " ",
         copyFeedback
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2500".repeat(Math.min(60, columns - 2)) }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: hasMoreAbove ? `\u2191 ${clampedOffset} more above` : " " }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "\u2500".repeat(Math.min(60, columns - 2)) }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: hasMoreAbove ? `\u2191 ${clampedOffset} more above` : " " }) }),
     Array.from({ length: maxVisibleLines }, (_, i) => {
       const absoluteIndex = clampedOffset + i;
       const line = lineData[absoluteIndex];
       return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: line ? renderDetailLine(line, absoluteIndex) : /* @__PURE__ */ jsx(Text, { children: " " }) }, i);
     }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: hasMoreBelow ? `\u2193 ${totalLines - clampedOffset - maxVisibleLines} more below` : " " }) })
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: hasMoreBelow ? `\u2193 ${totalLines - clampedOffset - maxVisibleLines} more below` : " " }) })
   ] });
 }
 function ToolSettingsView({
@@ -750,40 +767,40 @@ function ToolSettingsView({
   const autoApproveUnavailable = !sessionAvailable || autoApproveDisabled;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Tool Settings" }),
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: "Tool Settings" }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Status: " }),
-      /* @__PURE__ */ jsx(Text, { color: tool.isEnabled ? "green" : "red", children: tool.isEnabled ? "Enabled" : "Disabled" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " \xB7 Auto-approve: " }),
-      /* @__PURE__ */ jsx(Text, { color: tool.isAutoApproved ? "green" : "red", children: tool.isAutoApproved ? "On" : "Off" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " (session)" })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Status: " }),
+      /* @__PURE__ */ jsx(Text, { color: tool.isEnabled ? tone("add") : tone("red"), children: tool.isEnabled ? "Enabled" : "Disabled" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \xB7 Auto-approve: " }),
+      /* @__PURE__ */ jsx(Text, { color: tool.isAutoApproved ? tone("add") : tone("red"), children: tool.isAutoApproved ? "On" : "Off" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " (session)" })
     ] }),
-    autoApproveDisabled && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Enable the tool to allow auto-approve." }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 0 ? "cyan" : "gray", children: [
+    autoApproveDisabled && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), children: "Enable the tool to allow auto-approve." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 0 ? tone("teal") : tone("dim"), children: [
       configIndex === 0 ? "\u25B6 " : "  ",
       tool.isEnabled ? "Disable tool" : "Enable tool"
     ] }) }),
     /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(
       Text,
       {
-        color: configIndex === 1 ? autoApproveUnavailable ? "yellow" : "cyan" : "gray",
+        color: configIndex === 1 ? autoApproveUnavailable ? tone("amberDim") : tone("teal") : tone("dim"),
         children: [
           configIndex === 1 ? "\u25B6 " : "  ",
           tool.isAutoApproved ? "Disable auto-approve (session)" : "Enable auto-approve (session)"
         ]
       }
     ) }),
-    !sessionAvailable && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Auto-approve requires an active session." }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 2 ? "cyan" : "gray", children: [
+    !sessionAvailable && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), children: "Auto-approve requires an active session." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: configIndex === 2 ? tone("teal") : tone("dim"), children: [
       configIndex === 2 ? "\u25B6 " : "  ",
       "Back"
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "\u2191\u2193 select \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function ToolScopeView({
@@ -795,23 +812,23 @@ function ToolScopeView({
 }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
     /* @__PURE__ */ jsxs(Box, { paddingX: 0, paddingY: 0, children: [
-      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: scopeNextEnabled ? "Enable Tool" : "Disable Tool" }),
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: scopeNextEnabled ? "Enable Tool" : "Disable Tool" }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " ",
         tool.name
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Apply to:" }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "session" ? "cyan" : "gray", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Apply to:" }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "session" ? tone("teal") : tone("dim"), children: [
       scopeTarget === "session" ? "\u25B6 " : "  ",
       "Session (default)"
     ] }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "global" ? "cyan" : "gray", children: [
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: scopeTarget === "global" ? tone("teal") : tone("dim"), children: [
       scopeTarget === "global" ? "\u25B6 " : "  ",
       "Global (persisted)"
     ] }) }),
-    !sessionAvailable && scopeTarget === "session" && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "yellow", children: "No active session; switching to global." }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u2191\u2193 choose scope \xB7 Enter confirm \xB7 Esc back" }) })
+    !sessionAvailable && scopeTarget === "session" && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), children: "No active session; switching to global." }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "\u2191\u2193 choose scope \xB7 Enter confirm \xB7 Esc back" }) })
   ] });
 }
 function truncateText(text, maxLength) {