@dexto/tui 1.14.6 → 1.15.0-beta.1

package/dist/components/overlays/ApiKeyInput.cjs

@@ -27,6 +27,7 @@ var import_ink = require("ink");
 var import_agent_management = require("@dexto/agent-management");
 var import_host = require("../../host/index.js");
 var import_host2 = require("../../host/index.js");
+var import_signal = require("../../signal/index.js");
 const ApiKeyInput = (0, import_react.forwardRef)(function ApiKeyInput2({ isVisible, provider, onSaved, onClose }, ref) {
   const [apiKey, setApiKey] = (0, import_react.useState)("");
   const [error, setError] = (0, import_react.useState)(null);
@@ -97,19 +98,19 @@ const ApiKeyInput = (0, import_react.forwardRef)(function ApiKeyInput2({ isVisib
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: (0, import_signal.tone)("teal"),
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: "cyan", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("teal"), children: [
           "API Key Required for ",
           providerName
         ] }) }),
-        instructions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: instructions.content }) }),
+        instructions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: instructions.content }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "This key will be saved to " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: envVar }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " in your .env file" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "This key will be saved to " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: envVar }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " in your .env file" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, children: [
           "Enter your ",
@@ -117,13 +118,13 @@ const ApiKeyInput = (0, import_react.forwardRef)(function ApiKeyInput2({ isVisib
           " API key:"
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "> " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: "> " }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: maskedKey }),
-          !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "_" })
+          !isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: "_" })
         ] }),
-        isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: "Saving API key..." }) }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: error }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Enter to save \u2022 Esc to cancel" }) })
+        isSaving && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: "Saving API key..." }) }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), children: error }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Enter to save \u2022 Esc to cancel" }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"ApiKeyInput.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ApiKeyInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAS9C,MAAM,WAAW,gBAAgB;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,4FA+Jf,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ApiKeyInput.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ApiKeyInput.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAU9C,MAAM,WAAW,gBAAgB;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,WAAW,CAAC;IACtB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,WAAW,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;;GAGG;AACH,QAAA,MAAM,WAAW,4FA+Jf,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/overlays/ApiKeyInput.js

@@ -8,6 +8,7 @@ import {
   isValidApiKeyFormat,
   getProviderInstructions
 } from "../../host/index.js";
+import { tone } from "../../signal/index.js";
 const ApiKeyInput = forwardRef(function ApiKeyInput2({ isVisible, provider, onSaved, onClose }, ref) {
   const [apiKey, setApiKey] = useState("");
   const [error, setError] = useState(null);
@@ -78,19 +79,19 @@ const ApiKeyInput = forwardRef(function ApiKeyInput2({ isVisible, provider, onSa
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "cyan",
+      borderColor: tone("teal"),
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("teal"), children: [
           "API Key Required for ",
           providerName
         ] }) }),
-        instructions && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: instructions.content }) }),
+        instructions && /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: instructions.content }) }),
         /* @__PURE__ */ jsxs(Box, { marginBottom: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: "This key will be saved to " }),
-          /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: envVar }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: " in your .env file" })
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "This key will be saved to " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: envVar }),
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " in your .env file" })
         ] }),
         /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(Text, { bold: true, children: [
           "Enter your ",
@@ -98,13 +99,13 @@ const ApiKeyInput = forwardRef(function ApiKeyInput2({ isVisible, provider, onSa
           " API key:"
         ] }) }),
         /* @__PURE__ */ jsxs(Box, { marginTop: 1, children: [
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "> " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: "> " }),
           /* @__PURE__ */ jsx(Text, { children: maskedKey }),
-          !isSaving && /* @__PURE__ */ jsx(Text, { color: "cyan", children: "_" })
+          !isSaving && /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: "_" })
         ] }),
-        isSaving && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: "Saving API key..." }) }),
-        error && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "red", children: error }) }),
-        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter to save \u2022 Esc to cancel" }) })
+        isSaving && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: "Saving API key..." }) }),
+        error && /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("red"), children: error }) }),
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Enter to save \u2022 Esc to cancel" }) })
       ]
     }
   );

package/dist/components/overlays/ChatGPTUsageCapOverlay.cjs

@@ -25,6 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ink = require("ink");
 var import_chatgpt_rate_limit = require("../../utils/chatgpt-rate-limit.js");
+var import_signal = require("../../signal/index.js");
 const ChatGPTUsageCapOverlay = (0, import_react.forwardRef)(function ChatGPTUsageCapOverlay2({
   isVisible,
   currentModelDisplayName,
@@ -64,25 +65,25 @@ const ChatGPTUsageCapOverlay = (0, import_react.forwardRef)(function ChatGPTUsag
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "yellow",
+      borderColor: (0, import_signal.tone)("amberDim"),
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "yellowBright", children: "ChatGPT usage cap reached" }) }),
-        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: (0, import_chatgpt_rate_limit.getChatGPTRateLimitHint)(status) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("amber"), children: "ChatGPT usage cap reached" }) }),
+        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: (0, import_chatgpt_rate_limit.getChatGPTRateLimitHint)(status) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginBottom: 1, 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: [
             currentModelDisplayName,
             " is currently running through ChatGPT Login."
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: actionLabel })
         ] }),
-        usedDefaultFallback && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        usedDefaultFallback && /* @__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: [
           "The current ChatGPT model is not available through the OpenAI API path, so Dexto will use ",
           fallbackModelDisplayName,
           " for this session."
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Enter to continue \u2022 Esc to dismiss" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Enter to continue \u2022 Esc to dismiss" }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"ChatGPTUsageCapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ChatGPTUsageCapOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,MAAM,WAAW,2BAA2B;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,4BAA4B;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,QAAA,MAAM,sBAAsB,kHAyF1B,CAAC;AAEH,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ChatGPTUsageCapOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ChatGPTUsageCapOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAI/D,MAAM,WAAW,2BAA2B;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,uBAAuB,EAAE,MAAM,CAAC;IAChC,wBAAwB,EAAE,MAAM,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,4BAA4B;IACzC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,QAAA,MAAM,sBAAsB,kHAyF1B,CAAC;AAEH,eAAe,sBAAsB,CAAC"}

package/dist/components/overlays/ChatGPTUsageCapOverlay.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle } from "react";
 import { Box, Text } from "ink";
 import { getChatGPTRateLimitHint } from "../../utils/chatgpt-rate-limit.js";
+import { tone } from "../../signal/index.js";
 const ChatGPTUsageCapOverlay = forwardRef(function ChatGPTUsageCapOverlay2({
   isVisible,
   currentModelDisplayName,
@@ -41,25 +42,25 @@ const ChatGPTUsageCapOverlay = forwardRef(function ChatGPTUsageCapOverlay2({
     {
       flexDirection: "column",
       borderStyle: "round",
-      borderColor: "yellow",
+      borderColor: tone("amberDim"),
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: "yellowBright", children: "ChatGPT usage cap reached" }) }),
-        status && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: getChatGPTRateLimitHint(status) }) }),
+        /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone("amber"), children: "ChatGPT usage cap reached" }) }),
+        status && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: getChatGPTRateLimitHint(status) }) }),
         /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-          /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
             currentModelDisplayName,
             " is currently running through ChatGPT Login."
           ] }),
           /* @__PURE__ */ jsx(Text, { children: actionLabel })
         ] }),
-        usedDefaultFallback && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        usedDefaultFallback && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "The current ChatGPT model is not available through the OpenAI API path, so Dexto will use ",
           fallbackModelDisplayName,
           " for this session."
         ] }) }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter to continue \u2022 Esc to dismiss" }) })
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Enter to continue \u2022 Esc to dismiss" }) })
       ]
     }
   );

package/dist/components/overlays/CommandOutputOverlay.cjs

@@ -38,6 +38,7 @@ var import_wrap_ansi = __toESM(require("wrap-ansi"), 1);
 var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
 var import_overlaySizing = require("../../utils/overlaySizing.js");
 var import_HintBar = require("../shared/HintBar.js");
+var import_signal = require("../../signal/index.js");
 const CommandOutputOverlay = (0, import_react.forwardRef)(function CommandOutputOverlay2({ isVisible, title, content, onClose }, ref) {
   const { columns, rows } = (0, import_useTerminalSize.useTerminalSize)();
   const viewportLines = (0, import_react.useMemo)(() => {
@@ -89,7 +90,7 @@ const CommandOutputOverlay = (0, import_react.forwardRef)(function CommandOutput
   const visible = wrappedLines.slice(scrollOffset, scrollOffset + viewportLines);
   const hint = wrappedLines.length > viewportLines ? ["\u2191\u2193 scroll", "Esc close"] : ["Esc close"];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: columns, 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: "cyan", bold: true, wrap: "truncate-end", children: title }) }),
+    /* @__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)("teal"), bold: true, wrap: "truncate-end", children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: viewportLines, marginTop: 1, children: Array.from({ length: viewportLines }, (_, rowIndex) => {
       const line = visible[rowIndex];
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: line ?? " " }) }, `line-${rowIndex}`);

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

@@ -1 +1 @@
-{"version":3,"file":"CommandOutputOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/CommandOutputOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAG7F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,eAAO,MAAM,oBAAoB,8GAuF/B,CAAC"}
+{"version":3,"file":"CommandOutputOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/CommandOutputOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAG7F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAM/D,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,eAAO,MAAM,oBAAoB,8GAuF/B,CAAC"}

package/dist/components/overlays/CommandOutputOverlay.js

@@ -5,6 +5,7 @@ import wrapAnsi from "wrap-ansi";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
 import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
 import { HintBar } from "../shared/HintBar.js";
+import { tone } from "../../signal/index.js";
 const CommandOutputOverlay = forwardRef(function CommandOutputOverlay2({ isVisible, title, content, onClose }, ref) {
   const { columns, rows } = useTerminalSize();
   const viewportLines = useMemo(() => {
@@ -56,7 +57,7 @@ const CommandOutputOverlay = forwardRef(function CommandOutputOverlay2({ isVisib
   const visible = wrappedLines.slice(scrollOffset, scrollOffset + viewportLines);
   const hint = wrappedLines.length > viewportLines ? ["\u2191\u2193 scroll", "Esc close"] : ["Esc close"];
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: columns, children: [
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, wrap: "truncate-end", children: title }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, wrap: "truncate-end", children: title }) }),
     /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: viewportLines, marginTop: 1, children: Array.from({ length: viewportLines }, (_, rowIndex) => {
       const line = visible[rowIndex];
       return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: line ?? " " }) }, `line-${rowIndex}`);

package/dist/components/overlays/ConnectOverlay.cjs

@@ -39,6 +39,7 @@ var import_BaseSelector = require("../base/BaseSelector.js");
 var import_agent_management = require("@dexto/agent-management");
 var import_llm = require("@dexto/llm");
 var import_host = require("../../host/index.js");
+var import_signal = require("../../signal/index.js");
 function methodHint(method, profile, defaultProfileId) {
   const parts = [
     profile ? profile.id === defaultProfileId ? "Connected (default)" : "Connected" : void 0,
@@ -387,16 +388,16 @@ const ConnectOverlay = (0, import_react.forwardRef)(
       ]
     );
     if (!isVisible) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: "cyan", children: "Connect Model Provider" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: error ? "red" : "gray", children: error ?? status }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", borderStyle: "round", borderColor: (0, import_signal.tone)("teal"), paddingX: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: (0, import_signal.tone)("teal"), children: "Connect Model Provider" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: error ? (0, import_signal.tone)("red") : (0, import_signal.tone)("dim"), children: error ?? status }),
       step === "api-key" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: maskSecret(apiKey) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Enter save \u2022 Esc cancel" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Enter save \u2022 Esc cancel" })
       ] }) : step === "delete-confirm" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: "This removes saved credentials for this method." }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Enter delete \u2022 Esc cancel" })
-      ] }) : step === "oauth-progress" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Esc cancel" }) }) : step === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Enter close \u2022 Esc close" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), children: "This removes saved credentials for this method." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Enter delete \u2022 Esc cancel" })
+      ] }) : step === "oauth-progress" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Esc cancel" }) }) : step === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Enter close \u2022 Esc close" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_BaseSelector.BaseSelector,
         {
           ref: selectorRef,
@@ -407,10 +408,10 @@ const ConnectOverlay = (0, import_react.forwardRef)(
           onSelect: (item) => void handleSelect(item).catch(handleActionError),
           onClose: () => close({ outcome: "cancelled" }),
           title: step === "provider" ? "Providers" : step === "method" ? `${provider?.label ?? "Provider"} methods` : "Existing profile",
-          formatItem: (item, selected) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { ...selected ? { color: "cyan" } : {}, children: [
+          formatItem: (item, selected) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { ...selected ? { color: (0, import_signal.tone)("teal") } : {}, children: [
             selected ? "\u203A " : "  ",
             item.label,
-            item.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+            item.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
               " \u2014 ",
               item.hint
             ] }) : null

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ConnectOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAmC/D,MAAM,MAAM,qBAAqB,GAC3B;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3D;IAAE,OAAO,EAAE,WAAW,CAAA;CAAE,GACxB;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE5B,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAiCD,QAAA,MAAM,cAAc,kGAsbnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ConnectOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ConnectOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAoC/D,MAAM,MAAM,qBAAqB,GAC3B;IAAE,OAAO,EAAE,SAAS,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3D;IAAE,OAAO,EAAE,WAAW,CAAA;CAAE,GACxB;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE5B,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACpD;AAED,MAAM,WAAW,oBAAoB;IACjC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAiCD,QAAA,MAAM,cAAc,kGA0bnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/overlays/ConnectOverlay.js

@@ -25,6 +25,7 @@ import {
 } from "@dexto/agent-management";
 import { LLM_PROVIDERS } from "@dexto/llm";
 import { applyLayeredEnvironmentLoading, isValidApiKeyFormat } from "../../host/index.js";
+import { tone } from "../../signal/index.js";
 function methodHint(method, profile, defaultProfileId) {
   const parts = [
     profile ? profile.id === defaultProfileId ? "Connected (default)" : "Connected" : void 0,
@@ -373,16 +374,16 @@ const ConnectOverlay = forwardRef(
       ]
     );
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
-      /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "Connect Model Provider" }) }),
-      /* @__PURE__ */ jsx(Text, { color: error ? "red" : "gray", children: error ?? status }),
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: tone("teal"), paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone("teal"), children: "Connect Model Provider" }) }),
+      /* @__PURE__ */ jsx(Text, { color: error ? tone("red") : tone("dim"), children: error ?? status }),
       step === "api-key" ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsx(Text, { children: maskSecret(apiKey) }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter save \u2022 Esc cancel" })
+        /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Enter save \u2022 Esc cancel" })
       ] }) : step === "delete-confirm" ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx(Text, { color: "red", children: "This removes saved credentials for this method." }),
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter delete \u2022 Esc cancel" })
-      ] }) : step === "oauth-progress" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Esc cancel" }) }) : step === "error" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Enter close \u2022 Esc close" }) }) : /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Text, { color: tone("red"), children: "This removes saved credentials for this method." }),
+        /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Enter delete \u2022 Esc cancel" })
+      ] }) : step === "oauth-progress" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Esc cancel" }) }) : step === "error" ? /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Enter close \u2022 Esc close" }) }) : /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
         BaseSelector,
         {
           ref: selectorRef,
@@ -393,10 +394,10 @@ const ConnectOverlay = forwardRef(
           onSelect: (item) => void handleSelect(item).catch(handleActionError),
           onClose: () => close({ outcome: "cancelled" }),
           title: step === "provider" ? "Providers" : step === "method" ? `${provider?.label ?? "Provider"} methods` : "Existing profile",
-          formatItem: (item, selected) => /* @__PURE__ */ jsxs(Text, { ...selected ? { color: "cyan" } : {}, children: [
+          formatItem: (item, selected) => /* @__PURE__ */ jsxs(Text, { ...selected ? { color: tone("teal") } : {}, children: [
             selected ? "\u203A " : "  ",
             item.label,
-            item.hint ? /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            item.hint ? /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
               " \u2014 ",
               item.hint
             ] }) : null

package/dist/components/overlays/ContextStatsOverlay.cjs

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(ContextStatsOverlay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ink = require("ink");
+var import_signal = require("../../signal/index.js");
 const BREAKDOWN_ITEMS = [
   "systemPrompt",
   "tools",
@@ -31,12 +32,12 @@ const BREAKDOWN_ITEMS = [
   "freeSpace",
   "autoCompactBuffer"
 ];
-const ITEM_COLORS = {
-  systemPrompt: "cyan",
-  tools: "yellow",
-  messages: "blue",
-  freeSpace: "gray",
-  autoCompactBuffer: "magenta"
+const ITEM_ROLES = {
+  systemPrompt: "teal",
+  tools: "amberDim",
+  messages: "fg",
+  freeSpace: "dim",
+  autoCompactBuffer: "faint"
 };
 function formatTokens(tokens) {
   if (tokens >= 1e3) {
@@ -66,29 +67,39 @@ function createStackedBar(breakdown, maxContextTokens, thresholdPercent, totalWi
   if (sysWidth > 0) {
     segments.push({
       char: "\u2588",
-      color: ITEM_COLORS.systemPrompt,
+      color: (0, import_signal.tone)(ITEM_ROLES.systemPrompt),
       width: sysWidth,
       item: "systemPrompt"
     });
   }
   if (toolsWidth > 0) {
-    segments.push({ char: "\u2588", color: ITEM_COLORS.tools, width: toolsWidth, item: "tools" });
+    segments.push({
+      char: "\u2588",
+      color: (0, import_signal.tone)(ITEM_ROLES.tools),
+      width: toolsWidth,
+      item: "tools"
+    });
   }
   if (msgsWidth > 0) {
     segments.push({
       char: "\u2588",
-      color: ITEM_COLORS.messages,
+      color: (0, import_signal.tone)(ITEM_ROLES.messages),
       width: msgsWidth,
       item: "messages"
     });
   }
   if (adjustedFreeWidth > 0) {
-    segments.push({ char: "\u2591", color: "gray", width: adjustedFreeWidth, item: "freeSpace" });
+    segments.push({
+      char: "\u2591",
+      color: (0, import_signal.tone)("dim"),
+      width: adjustedFreeWidth,
+      item: "freeSpace"
+    });
   }
   if (reservedWidth > 0) {
     segments.push({
       char: "\u2592",
-      color: ITEM_COLORS.autoCompactBuffer,
+      color: (0, import_signal.tone)(ITEM_ROLES.autoCompactBuffer),
       width: reservedWidth,
       item: "autoCompactBuffer"
     });
@@ -175,12 +186,12 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
         {
           flexDirection: "column",
           borderStyle: "round",
-          borderColor: "cyan",
+          borderColor: (0, import_signal.tone)("teal"),
           paddingX: 2,
           paddingY: 1,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "\u{1F4CA} Context Usage" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Loading..." })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: "\u{1F4CA} Context Usage" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Loading..." })
           ]
         }
       );
@@ -191,13 +202,13 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
         {
           flexDirection: "column",
           borderStyle: "round",
-          borderColor: "red",
+          borderColor: (0, import_signal.tone)("red"),
           paddingX: 2,
           paddingY: 1,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", bold: true, children: "Error" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: error }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "Press Esc to close" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), bold: true, children: "Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: error }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), dimColor: true, children: "Press Esc to close" }) })
           ]
         }
       );
@@ -223,15 +234,15 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
       const isSelected = selectedIndex === index;
       const prefix = isLast ? "\u2514\u2500" : "\u251C\u2500";
       const expandIcon = expandable ? isToolsExpanded ? "\u25BC" : "\u25B6" : " ";
-      const itemColor = ITEM_COLORS[item];
+      const itemColor = (0, import_signal.tone)(ITEM_ROLES[item]);
       const indicator = item === "freeSpace" ? "\u2591" : item === "autoCompactBuffer" ? "\u2592" : "\u2588";
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim"), children: [
           prefix,
           " "
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: itemColor, bold: isSelected, children: indicator }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", bold: isSelected, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim"), bold: isSelected, children: [
           " ",
           expandIcon,
           " ",
@@ -242,7 +253,7 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
           pct(tokens),
           ")"
         ] }),
-        isSelected && expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", dimColor: true, children: [
+        isSelected && expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), dimColor: true, children: [
           " ",
           "(Enter to ",
           isToolsExpanded ? "collapse" : "expand",
@@ -257,34 +268,34 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
       {
         flexDirection: "column",
         borderStyle: "round",
-        borderColor: "cyan",
+        borderColor: (0, import_signal.tone)("teal"),
         paddingX: 2,
         paddingY: 1,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "\u{1F4CA} Context Usage" }),
-            /* @__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: "\u{1F4CA} Context Usage" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
               " - ",
               stats.modelDisplayName
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: barSegments.map((segment, idx) => {
             const isHighlighted = BREAKDOWN_ITEMS[selectedIndex] === segment.item;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: isHighlighted ? "\u25BC".repeat(segment.width) : " ".repeat(segment.width) }, idx);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: isHighlighted ? "\u25BC".repeat(segment.width) : " ".repeat(segment.width) }, idx);
           }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: barSegments.map((segment, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: segment.color, children: segment.char.repeat(segment.width) }, idx)) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginBottom: 1, 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: [
               tokenDisplay,
               " / ",
               formatTokens(totalTokenSpace),
               " tokens"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \u2022 " }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_ink.Text,
               {
-                color: stats.usagePercent > 80 ? "red" : stats.usagePercent > 60 ? "yellow" : "green",
+                color: stats.usagePercent > 80 ? (0, import_signal.tone)("red") : stats.usagePercent > 60 ? (0, import_signal.tone)("amberDim") : (0, import_signal.tone)("add"),
                 children: [
                   stats.usagePercent,
                   "% used"
@@ -293,7 +304,7 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: "Breakdown:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: "Breakdown:" }),
             renderRow(
               0,
               "systemPrompt",
@@ -309,10 +320,10 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
               false,
               true
             ),
-            isToolsExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginLeft: 4, children: stats.breakdown.tools.perTool.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "No tools registered" }) : [...stats.breakdown.tools.perTool].sort((a, b) => b.tokens - a.tokens).map((tool, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", dimColor: true, children: [
+            isToolsExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginLeft: 4, children: stats.breakdown.tools.perTool.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), dimColor: true, children: "No tools registered" }) : [...stats.breakdown.tools.perTool].sort((a, b) => b.tokens - a.tokens).map((tool, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), dimColor: true, children: [
               idx === arr.length - 1 ? "\u2514\u2500" : "\u251C\u2500",
               " ",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", dimColor: true, children: tool.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), dimColor: true, children: tool.name }),
               ": ",
               formatTokens(tool.tokens),
               " (",
@@ -330,22 +341,22 @@ const ContextStatsOverlay = (0, import_react.forwardRef)(
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "column", 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: [
               "Messages: ",
               stats.filteredMessageCount,
               " visible (",
               stats.messageCount,
               " total)"
             ] }),
-            stats.prunedToolCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellow", children: [
+            stats.prunedToolCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), children: [
               "\u{1F5D1}\uFE0F ",
               stats.prunedToolCount,
               " tool output(s) pruned"
             ] }),
-            stats.hasSummary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "blue", children: "\u{1F4E6} Context has been compacted (summary present)" }),
-            stats.usagePercent > 100 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "\u{1F4A1} Use /compact to manually compact, or send a message to trigger auto-compaction" })
+            stats.hasSummary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("fg"), children: "\u{1F4E6} Context has been compacted (summary present)" }),
+            stats.usagePercent > 100 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), children: "\u{1F4A1} Use /compact to manually compact, or send a message to trigger auto-compaction" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", dimColor: true, children: "\u2191\u2193: navigate | Enter: expand/collapse | Esc: close" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), dimColor: true, children: "\u2191\u2193: navigate | Enter: expand/collapse | Esc: close" }) })
         ]
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"ContextStatsOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ContextStatsOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,wBAAwB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AA6JD;;GAEG;AACH,QAAA,MAAM,mBAAmB,4GAoWxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContextStatsOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ContextStatsOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAA+D,MAAM,OAAO,CAAC;AAEpF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,UAAU,wBAAwB;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAuKD;;GAEG;AACH,QAAA,MAAM,mBAAmB,4GAwWxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}