@dexto/tui 1.14.6 → 1.15.0-beta.1

package/dist/components/overlays/McpRemoveSelector.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_BaseSelector = require("../base/BaseSelector.js");
+var import_signal = require("../../signal/index.js");
 const McpRemoveSelector = (0, import_react.forwardRef)(
   function McpRemoveSelector2({ isVisible, onSelect, onClose, agent }, ref) {
     const baseSelectorRef = (0, import_react.useRef)(null);
@@ -81,11 +82,11 @@ const McpRemoveSelector = (0, import_react.forwardRef)(
         getStatusIcon(server.status),
         " "
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: server.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), bold: isSelected, children: server.name }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_ink.Text,
         {
-          color: server.status === "connected" ? "green" : server.status === "disconnected" ? "gray" : server.status === "auth-required" ? "yellow" : "red",
+          color: server.status === "connected" ? (0, import_signal.tone)("add") : server.status === "disconnected" ? (0, import_signal.tone)("dim") : server.status === "auth-required" ? (0, import_signal.tone)("amberDim") : (0, import_signal.tone)("red"),
           children: [
             " ",
             "- ",
@@ -93,7 +94,7 @@ const McpRemoveSelector = (0, import_react.forwardRef)(
           ]
         }
       ),
-      server.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+      server.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " ",
         "(",
         server.error.slice(0, 30),
@@ -117,7 +118,7 @@ const McpRemoveSelector = (0, import_react.forwardRef)(
         onClose,
         formatItem,
         title: "Remove MCP Server",
-        borderColor: "red",
+        borderColor: (0, import_signal.tone)("red"),
         loadingMessage: "Loading servers...",
         emptyMessage: "No MCP servers installed"
       }

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

@@ -1 +1 @@
-{"version":3,"file":"McpRemoveSelector.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpRemoveSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,UAAU,sBAAsB;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,wGAyHtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"McpRemoveSelector.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpRemoveSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,UAAU,sBAAsB;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,uBAAuB;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,wGAyHtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/overlays/McpRemoveSelector.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from "react";
 import { Text } from "ink";
 import { BaseSelector } from "../base/BaseSelector.js";
+import { tone } from "../../signal/index.js";
 const McpRemoveSelector = forwardRef(
   function McpRemoveSelector2({ isVisible, onSelect, onClose, agent }, ref) {
     const baseSelectorRef = useRef(null);
@@ -58,11 +59,11 @@ const McpRemoveSelector = forwardRef(
         getStatusIcon(server.status),
         " "
       ] }),
-      /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: server.name }),
+      /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("teal") : tone("dim"), bold: isSelected, children: server.name }),
       /* @__PURE__ */ jsxs(
         Text,
         {
-          color: server.status === "connected" ? "green" : server.status === "disconnected" ? "gray" : server.status === "auth-required" ? "yellow" : "red",
+          color: server.status === "connected" ? tone("add") : server.status === "disconnected" ? tone("dim") : server.status === "auth-required" ? tone("amberDim") : tone("red"),
           children: [
             " ",
             "- ",
@@ -70,7 +71,7 @@ const McpRemoveSelector = forwardRef(
           ]
         }
       ),
-      server.error && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      server.error && /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " ",
         "(",
         server.error.slice(0, 30),
@@ -94,7 +95,7 @@ const McpRemoveSelector = forwardRef(
         onClose,
         formatItem,
         title: "Remove MCP Server",
-        borderColor: "red",
+        borderColor: tone("red"),
         loadingMessage: "Loading servers...",
         emptyMessage: "No MCP servers installed"
       }

package/dist/components/overlays/McpSelector.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_BaseSelector = require("../base/BaseSelector.js");
+var import_signal = require("../../signal/index.js");
 const MCP_OPTIONS = [
   { action: "list", label: "list", description: "List connected servers", icon: "\u{1F4CB}" },
   {
@@ -64,8 +65,8 @@ const McpSelector = (0, import_react.forwardRef)(function McpSelector2({ isVisib
       option.icon,
       " "
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: option.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? "white" : "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"), bold: isSelected, children: option.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim"), children: [
       " - ",
       option.description
     ] })
@@ -86,7 +87,7 @@ const McpSelector = (0, import_react.forwardRef)(function McpSelector2({ isVisib
       onClose,
       formatItem,
       title: "MCP Servers",
-      borderColor: "magenta",
+      borderColor: (0, import_signal.tone)("faint"),
       emptyMessage: "No options available"
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"McpSelector.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,CAAC;AAExE,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,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;AA0BD;;GAEG;AACH,QAAA,MAAM,WAAW,4FA2Df,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"McpSelector.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpSelector.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAuE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAI/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,CAAC;AAExE,UAAU,gBAAgB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACtC,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;AA0BD;;GAEG;AACH,QAAA,MAAM,WAAW,4FA2Df,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/dist/components/overlays/McpSelector.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from "react";
 import { Text } from "ink";
 import { BaseSelector } from "../base/BaseSelector.js";
+import { tone } from "../../signal/index.js";
 const MCP_OPTIONS = [
   { action: "list", label: "list", description: "List connected servers", icon: "\u{1F4CB}" },
   {
@@ -41,8 +42,8 @@ const McpSelector = forwardRef(function McpSelector2({ isVisible, onSelect, onCl
       option.icon,
       " "
     ] }),
-    /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: option.label }),
-    /* @__PURE__ */ jsxs(Text, { color: isSelected ? "white" : "gray", children: [
+    /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("teal") : tone("dim"), bold: isSelected, children: option.label }),
+    /* @__PURE__ */ jsxs(Text, { color: isSelected ? tone("hi") : tone("dim"), children: [
       " - ",
       option.description
     ] })
@@ -63,7 +64,7 @@ const McpSelector = forwardRef(function McpSelector2({ isVisible, onSelect, onCl
       onClose,
       formatItem,
       title: "MCP Servers",
-      borderColor: "magenta",
+      borderColor: tone("faint"),
       emptyMessage: "No options available"
     }
   );

package/dist/components/overlays/McpServerActions.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_BaseSelector = require("../base/BaseSelector.js");
+var import_signal = require("../../signal/index.js");
 const McpServerActions = (0, import_react.forwardRef)(
   function McpServerActions2({ isVisible, server, onAction, onClose }, ref) {
     const baseSelectorRef = (0, import_react.useRef)(null);
@@ -60,7 +61,7 @@ const McpServerActions = (0, import_react.forwardRef)(
           type: "enable",
           label: "Enable server",
           icon: "\u25B6\uFE0F",
-          color: "green"
+          color: (0, import_signal.tone)("add")
         });
       }
       if (server.status === "auth-required") {
@@ -69,7 +70,7 @@ const McpServerActions = (0, import_react.forwardRef)(
           type: "authenticate",
           label: "Authenticate server",
           icon: "\u{1F510}",
-          color: "yellow"
+          color: (0, import_signal.tone)("amberDim")
         });
       }
       actions.push({
@@ -77,14 +78,14 @@ const McpServerActions = (0, import_react.forwardRef)(
         type: "delete",
         label: "Delete server",
         icon: "\u{1F5D1}\uFE0F",
-        color: "red"
+        color: (0, import_signal.tone)("red")
       });
       actions.push({
         id: "back",
         type: "back",
         label: "Back to server list",
         icon: "\u2190",
-        color: "gray"
+        color: (0, import_signal.tone)("dim")
       });
       return actions;
     }, [server]);
@@ -94,7 +95,7 @@ const McpServerActions = (0, import_react.forwardRef)(
           item.icon,
           " "
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? item.color : "gray", bold: isSelected, children: item.label })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? item.color : (0, import_signal.tone)("dim"), bold: isSelected, children: item.label })
       ] });
     };
     const handleSelect = (item) => {
@@ -115,7 +116,7 @@ const McpServerActions = (0, import_react.forwardRef)(
         onClose,
         formatItem,
         title: `Server: ${server.name}`,
-        borderColor: "magenta",
+        borderColor: (0, import_signal.tone)("faint"),
         emptyMessage: "No actions available"
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"McpServerActions.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpServerActions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5F,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;CAC3B;AAED,UAAU,qBAAqB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAUD;;GAEG;AACH,QAAA,MAAM,gBAAgB,sGAoHrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"McpServerActions.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpServerActions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5F,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,MAAM,EAAE,eAAe,CAAC;CAC3B;AAED,UAAU,qBAAqB;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACnC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAUD;;GAEG;AACH,QAAA,MAAM,gBAAgB,sGAoHrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/overlays/McpServerActions.js

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { Box, Text } from "ink";
 import { BaseSelector } from "../base/BaseSelector.js";
+import { tone } from "../../signal/index.js";
 const McpServerActions = forwardRef(
   function McpServerActions2({ isVisible, server, onAction, onClose }, ref) {
     const baseSelectorRef = useRef(null);
@@ -44,7 +45,7 @@ const McpServerActions = forwardRef(
           type: "enable",
           label: "Enable server",
           icon: "\u25B6\uFE0F",
-          color: "green"
+          color: tone("add")
         });
       }
       if (server.status === "auth-required") {
@@ -53,7 +54,7 @@ const McpServerActions = forwardRef(
           type: "authenticate",
           label: "Authenticate server",
           icon: "\u{1F510}",
-          color: "yellow"
+          color: tone("amberDim")
         });
       }
       actions.push({
@@ -61,14 +62,14 @@ const McpServerActions = forwardRef(
         type: "delete",
         label: "Delete server",
         icon: "\u{1F5D1}\uFE0F",
-        color: "red"
+        color: tone("red")
       });
       actions.push({
         id: "back",
         type: "back",
         label: "Back to server list",
         icon: "\u2190",
-        color: "gray"
+        color: tone("dim")
       });
       return actions;
     }, [server]);
@@ -78,7 +79,7 @@ const McpServerActions = forwardRef(
           item.icon,
           " "
         ] }),
-        /* @__PURE__ */ jsx(Text, { color: isSelected ? item.color : "gray", bold: isSelected, children: item.label })
+        /* @__PURE__ */ jsx(Text, { color: isSelected ? item.color : tone("dim"), bold: isSelected, children: item.label })
       ] });
     };
     const handleSelect = (item) => {
@@ -99,7 +100,7 @@ const McpServerActions = forwardRef(
         onClose,
         formatItem,
         title: `Server: ${server.name}`,
-        borderColor: "magenta",
+        borderColor: tone("faint"),
         emptyMessage: "No actions available"
       }
     );

package/dist/components/overlays/McpServerList.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_BaseSelector = require("../base/BaseSelector.js");
+var import_signal = require("../../signal/index.js");
 function getStatusIcon(status) {
   switch (status) {
     case "connected":
@@ -95,7 +96,7 @@ const McpServerList = (0, import_react.forwardRef)(function McpServerList2({ isV
   }, [servers]);
   const formatItem = (item, isSelected) => {
     if (item.isAddNew) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "green" : "gray", bold: isSelected, children: "+ Add new server" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? (0, import_signal.tone)("add") : (0, import_signal.tone)("dim"), bold: isSelected, children: "+ Add new server" }) });
     }
     const server = item.server;
     const statusIcon = getStatusIcon(server.status);
@@ -105,8 +106,8 @@ const McpServerList = (0, import_react.forwardRef)(function McpServerList2({ isV
         statusIcon,
         " "
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: server.name }),
-      /* @__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"), bold: isSelected, children: server.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         " (",
         server.type,
         ") "
@@ -114,7 +115,7 @@ const McpServerList = (0, import_react.forwardRef)(function McpServerList2({ isV
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_ink.Text,
         {
-          color: server.status === "connected" ? "green" : server.status === "disconnected" ? "gray" : server.status === "auth-required" ? "yellow" : "red",
+          color: server.status === "connected" ? (0, import_signal.tone)("add") : server.status === "disconnected" ? (0, import_signal.tone)("dim") : server.status === "auth-required" ? (0, import_signal.tone)("amberDim") : (0, import_signal.tone)("red"),
           children: [
             "[",
             statusText,
@@ -144,7 +145,7 @@ const McpServerList = (0, import_react.forwardRef)(function McpServerList2({ isV
       onClose,
       formatItem,
       title: "MCP Servers",
-      borderColor: "magenta",
+      borderColor: (0, import_signal.tone)("faint"),
       emptyMessage: "No servers configured"
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"McpServerList.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpServerList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAuB,MAAM,aAAa,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D,MAAM,MAAM,mBAAmB,GACzB;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAE1B,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAwCD;;GAEG;AACH,QAAA,MAAM,aAAa,gGA+HjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"McpServerList.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/McpServerList.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAuB,MAAM,aAAa,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,MAAM,mBAAmB,GACzB;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAE1B,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAwCD;;GAEG;AACH,QAAA,MAAM,aAAa,gGA+HjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/dist/components/overlays/McpServerList.js

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { Box, Text } from "ink";
 import { BaseSelector } from "../base/BaseSelector.js";
+import { tone } from "../../signal/index.js";
 function getStatusIcon(status) {
   switch (status) {
     case "connected":
@@ -79,7 +80,7 @@ const McpServerList = forwardRef(function McpServerList2({ isVisible, onAction,
   }, [servers]);
   const formatItem = (item, isSelected) => {
     if (item.isAddNew) {
-      return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : "gray", bold: isSelected, children: "+ Add new server" }) });
+      return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("add") : tone("dim"), bold: isSelected, children: "+ Add new server" }) });
     }
     const server = item.server;
     const statusIcon = getStatusIcon(server.status);
@@ -89,8 +90,8 @@ const McpServerList = forwardRef(function McpServerList2({ isVisible, onAction,
         statusIcon,
         " "
       ] }),
-      /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: server.name }),
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsx(Text, { color: isSelected ? tone("teal") : tone("hi"), bold: isSelected, children: server.name }),
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         " (",
         server.type,
         ") "
@@ -98,7 +99,7 @@ const McpServerList = forwardRef(function McpServerList2({ isVisible, onAction,
       /* @__PURE__ */ jsxs(
         Text,
         {
-          color: server.status === "connected" ? "green" : server.status === "disconnected" ? "gray" : server.status === "auth-required" ? "yellow" : "red",
+          color: server.status === "connected" ? tone("add") : server.status === "disconnected" ? tone("dim") : server.status === "auth-required" ? tone("amberDim") : tone("red"),
           children: [
             "[",
             statusText,
@@ -128,7 +129,7 @@ const McpServerList = forwardRef(function McpServerList2({ isVisible, onAction,
       onClose,
       formatItem,
       title: "MCP Servers",
-      borderColor: "magenta",
+      borderColor: tone("faint"),
       emptyMessage: "No servers configured"
     }
   );

package/dist/components/overlays/ModelSelectorRefactored.cjs

@@ -33,6 +33,7 @@ var import_overlaySizing = require("../../utils/overlaySizing.js");
 var import_modelOrdering = require("../../utils/modelOrdering.js");
 var import_textUtils = require("../../utils/textUtils.js");
 var import_HintBar = require("../shared/HintBar.js");
+var import_signal = require("../../signal/index.js");
 const FEATURED_SECTION_LIMIT = 8;
 const MODEL_SELECTOR_TABS = [
   { id: "all-models", label: "All" },
@@ -1245,11 +1246,11 @@ const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
     );
     const selectedReasoningOption = reasoningVariantOptions[reasoningVariantIndex] ?? reasoningVariantOptions[0];
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: overlayWidth, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "cyan", bold: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: [
         "Reasoning Variant",
-        isSettingDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (default)" }) : null
+        isSettingDefault ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " (default)" }) : null
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: formatLineToWidth(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: formatLineToWidth(
         pendingReasoningModel.displayName || pendingReasoningModel.name,
         overlayWidth
       ) }) }),
@@ -1276,14 +1277,21 @@ const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
             }
             const actualIndex = reasoningOffset + rowIndex;
             const isSelected = actualIndex === reasoningVariantIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
-              `${isSelected ? "\u203A" : " "} ${option.label}`,
-              overlayWidth
-            ) }) }, option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ink.Text,
+              {
+                color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"),
+                bold: isSelected,
+                children: formatLineToWidth(
+                  `${isSelected ? "\u203A" : " "} ${option.label}`,
+                  overlayWidth
+                )
+              }
+            ) }, option.value);
           })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: formatLineToWidth(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: formatLineToWidth(
         selectedReasoningOption?.description ?? "",
         overlayWidth
       ) }) }),
@@ -1311,18 +1319,18 @@ const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
     overlayWidth
   ) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width: overlayWidth, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", bold: true, children: "Models" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), bold: true, children: "Models" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, flexDirection: "row", children: MODEL_SELECTOR_TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ink.Box,
       {
         marginRight: 1,
         borderStyle: "round",
-        borderColor: activeTab === tab.id ? "cyan" : "gray",
+        borderColor: activeTab === tab.id ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"),
         paddingX: 1,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_ink.Text,
           {
-            color: activeTab === tab.id ? "cyan" : "gray",
+            color: activeTab === tab.id ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"),
             bold: activeTab === tab.id,
             children: tab.label
           }
@@ -1330,12 +1338,12 @@ const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
       },
       tab.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: searchQuery ? "white" : "gray", children: searchLine }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: searchQuery ? (0, import_signal.tone)("hi") : (0, import_signal.tone)("dim"), children: searchLine }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, width: overlayWidth, children: [
       hasAddCustomOption && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ink.Text,
         {
-          color: selectedIndex === 0 ? "green" : "gray",
+          color: selectedIndex === 0 ? (0, import_signal.tone)("add") : (0, import_signal.tone)("dim"),
           bold: selectedIndex === 0,
           children: addCustomLine
         }
@@ -1391,10 +1399,17 @@ const ModelSelector = (0, import_react.forwardRef)(function ModelSelector2({
             paddingX: 0,
             paddingY: 0,
             width: overlayWidth,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
-              `${prefix} ${name} (${providerDisplay})`,
-              overlayWidth
-            ) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ink.Text,
+              {
+                color: isSelected ? (0, import_signal.tone)("teal") : (0, import_signal.tone)("dim"),
+                bold: isSelected,
+                children: formatLineToWidth(
+                  `${prefix} ${name} (${providerDisplay})`,
+                  overlayWidth
+                )
+              }
+            )
           },
           `model-${activeTab}-${actualIndex}-${toModelIdentityKey(item)}`
         );

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

@@ -1 +1 @@
-{"version":3,"file":"ModelSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ModelSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAahE,OAAO,EASH,KAAK,WAAW,EAEnB,MAAM,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA2S9D,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CACX,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,gBAAgB,KAClC,IAAI,CAAC;IACV,iBAAiB,EAAE,CACf,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,gBAAgB,KAClC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAgJD;;GAEG;AACH,QAAA,MAAM,aAAa,oHAy2CjB,CAAC;AAEH,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ModelSelectorRefactored.d.ts","sourceRoot":"","sources":["../../../src/components/overlays/ModelSelectorRefactored.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAYH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAG/D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAahE,OAAO,EASH,KAAK,WAAW,EAEnB,MAAM,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA4S9D,UAAU,kBAAkB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CACX,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,gBAAgB,KAClC,IAAI,CAAC;IACV,iBAAiB,EAAE,CACf,QAAQ,EAAE,WAAW,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,MAAM,EAChB,gBAAgB,CAAC,EAAE,gBAAgB,KAClC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAgJD;;GAEG;AACH,QAAA,MAAM,aAAa,oHA+2CjB,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/dist/components/overlays/ModelSelectorRefactored.js

@@ -41,6 +41,7 @@ import {
   toCodePoints
 } from "../../utils/textUtils.js";
 import { HintBar } from "../shared/HintBar.js";
+import { tone } from "../../signal/index.js";
 const FEATURED_SECTION_LIMIT = 8;
 const MODEL_SELECTOR_TABS = [
   { id: "all-models", label: "All" },
@@ -1253,11 +1254,11 @@ const ModelSelector = forwardRef(function ModelSelector2({
     );
     const selectedReasoningOption = reasoningVariantOptions[reasoningVariantIndex] ?? reasoningVariantOptions[0];
     return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: overlayWidth, children: [
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsxs(Text, { color: tone("teal"), bold: true, children: [
         "Reasoning Variant",
-        isSettingDefault ? /* @__PURE__ */ jsx(Text, { color: "gray", children: " (default)" }) : null
+        isSettingDefault ? /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " (default)" }) : null
       ] }) }),
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: formatLineToWidth(
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: formatLineToWidth(
         pendingReasoningModel.displayName || pendingReasoningModel.name,
         overlayWidth
       ) }) }),
@@ -1284,14 +1285,21 @@ const ModelSelector = forwardRef(function ModelSelector2({
             }
             const actualIndex = reasoningOffset + rowIndex;
             const isSelected = actualIndex === reasoningVariantIndex;
-            return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
-              `${isSelected ? "\u203A" : " "} ${option.label}`,
-              overlayWidth
-            ) }) }, option.value);
+            return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                color: isSelected ? tone("teal") : tone("dim"),
+                bold: isSelected,
+                children: formatLineToWidth(
+                  `${isSelected ? "\u203A" : " "} ${option.label}`,
+                  overlayWidth
+                )
+              }
+            ) }, option.value);
           })
         }
       ),
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: formatLineToWidth(
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: formatLineToWidth(
         selectedReasoningOption?.description ?? "",
         overlayWidth
       ) }) }),
@@ -1319,18 +1327,18 @@ const ModelSelector = forwardRef(function ModelSelector2({
     overlayWidth
   ) : "";
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: overlayWidth, children: [
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "Models" }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: tone("teal"), bold: true, children: "Models" }) }),
     /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, flexDirection: "row", children: MODEL_SELECTOR_TABS.map((tab) => /* @__PURE__ */ jsx(
       Box,
       {
         marginRight: 1,
         borderStyle: "round",
-        borderColor: activeTab === tab.id ? "cyan" : "gray",
+        borderColor: activeTab === tab.id ? tone("teal") : tone("dim"),
         paddingX: 1,
         children: /* @__PURE__ */ jsx(
           Text,
           {
-            color: activeTab === tab.id ? "cyan" : "gray",
+            color: activeTab === tab.id ? tone("teal") : tone("dim"),
             bold: activeTab === tab.id,
             children: tab.label
           }
@@ -1338,12 +1346,12 @@ const ModelSelector = forwardRef(function ModelSelector2({
       },
       tab.id
     )) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: searchQuery ? "white" : "gray", children: searchLine }) }),
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(Text, { color: searchQuery ? tone("hi") : tone("dim"), children: searchLine }) }),
     /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, width: overlayWidth, children: [
       hasAddCustomOption && /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, width: overlayWidth, children: /* @__PURE__ */ jsx(
         Text,
         {
-          color: selectedIndex === 0 ? "green" : "gray",
+          color: selectedIndex === 0 ? tone("add") : tone("dim"),
           bold: selectedIndex === 0,
           children: addCustomLine
         }
@@ -1399,10 +1407,17 @@ const ModelSelector = forwardRef(function ModelSelector2({
             paddingX: 0,
             paddingY: 0,
             width: overlayWidth,
-            children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "gray", bold: isSelected, children: formatLineToWidth(
-              `${prefix} ${name} (${providerDisplay})`,
-              overlayWidth
-            ) })
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                color: isSelected ? tone("teal") : tone("dim"),
+                bold: isSelected,
+                children: formatLineToWidth(
+                  `${prefix} ${name} (${providerDisplay})`,
+                  overlayWidth
+                )
+              }
+            )
           },
           `model-${activeTab}-${actualIndex}-${toModelIdentityKey(item)}`
         );