@dexto/tui 1.14.6 → 1.15.0-beta.1

package/dist/components/TodoPanel.js

@@ -1,14 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { tone } from "../signal/index.js";
 function getStatusIndicator(status) {
   switch (status) {
     case "completed":
-      return { icon: "\u2713", color: "green" };
+      return { icon: "\u2713", color: tone("add") };
     case "in_progress":
-      return { icon: "\u25CF", color: "yellow" };
+      return { icon: "\u25CF", color: tone("amberDim") };
     case "pending":
     default:
-      return { icon: "\u25CB", color: "gray" };
+      return { icon: "\u25CB", color: tone("dim") };
   }
 }
 function TodoPanel({ todos, isExpanded, isProcessing = false }) {
@@ -30,24 +31,24 @@ function TodoPanel({ todos, isExpanded, isProcessing = false }) {
       {
         flexDirection: "column",
         borderStyle: "round",
-        borderColor: "gray",
+        borderColor: tone("dim"),
         paddingX: 1,
         marginX: 1,
         marginBottom: 1,
         children: [
           /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+            /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("teal"), children: [
               "\u{1F4CB} Todo",
               " "
             ] }),
-            /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
               "(",
               completedCount,
               "/",
               totalCount,
               ")"
             ] }),
-            /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+            /* @__PURE__ */ jsxs(Text, { color: tone("dim"), dimColor: true, children: [
               " ",
               "\xB7 ctrl+t to hide todo list"
             ] })
@@ -64,7 +65,7 @@ function TodoPanel({ todos, isExpanded, isProcessing = false }) {
               /* @__PURE__ */ jsx(
                 Text,
                 {
-                  color: isCompleted ? "gray" : isInProgress ? "white" : "gray",
+                  color: isCompleted ? tone("dim") : isInProgress ? tone("hi") : tone("dim"),
                   strikethrough: isCompleted,
                   dimColor: !isInProgress && !isCompleted,
                   children: isInProgress ? todo.activeForm : todo.content
@@ -81,8 +82,8 @@ function TodoPanel({ todos, isExpanded, isProcessing = false }) {
       return null;
     }
     return /* @__PURE__ */ jsx(Box, { paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "\u23BF " }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: currentTask.activeForm })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "\u23BF " }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: currentTask.activeForm })
     ] }) });
   }
   return /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 1, marginBottom: 1, children: sortedTodos.map((todo, index) => {
@@ -91,12 +92,18 @@ function TodoPanel({ todos, isExpanded, isProcessing = false }) {
     const isInProgress = todo.status === "in_progress";
     const checkbox = isCompleted ? "\u2611" : "\u2610";
     return /* @__PURE__ */ jsxs(Box, { marginLeft: 2, children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: isFirst ? "\u23BF  " : "   " }),
-      /* @__PURE__ */ jsxs(Text, { color: isCompleted ? "green" : isInProgress ? "yellow" : "white", children: [
-        checkbox,
-        " "
-      ] }),
-      /* @__PURE__ */ jsx(Text, { color: isCompleted ? "gray" : "white", dimColor: isCompleted, children: todo.content })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: isFirst ? "\u23BF  " : "   " }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          color: isCompleted ? tone("add") : isInProgress ? tone("amberDim") : tone("hi"),
+          children: [
+            checkbox,
+            " "
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { color: isCompleted ? tone("dim") : tone("hi"), dimColor: isCompleted, children: todo.content })
     ] }, todo.id);
   }) });
 }

package/dist/components/base/BaseAutocomplete.cjs

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(BaseAutocomplete_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");
 function BaseAutocomplete({
   items,
   query,
@@ -40,7 +41,7 @@ function BaseAutocomplete({
   maxVisibleItems = 10,
   loadingMessage = "Loading...",
   emptyMessage = "No matches found",
-  borderColor = "cyan"
+  borderColor = (0, import_signal.tone)("teal")
 }) {
   const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(0);
   const [scrollOffset, setScrollOffset] = (0, import_react.useState)(0);
@@ -102,10 +103,10 @@ function BaseAutocomplete({
   );
   if (!isVisible) return null;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: loadingMessage }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: (0, import_signal.tone)("dim"), paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: loadingMessage }) });
   }
   if (filteredItems.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: emptyMessage }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: (0, import_signal.tone)("dim"), paddingX: 1, paddingY: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: emptyMessage }) });
   }
   const hasMoreAbove = scrollOffset > 0;
   const hasMoreBelow = scrollOffset + maxVisibleItems < filteredItems.length;
@@ -118,7 +119,7 @@ function BaseAutocomplete({
       flexDirection: "column",
       height: Math.min(maxVisibleItems + 3, totalItems + 3),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           title,
           " (",
           selectedIndex + 1,
@@ -128,7 +129,7 @@ function BaseAutocomplete({
           onLoadIntoInput && ", Tab load",
           ", Enter select, Esc close"
         ] }) }),
-        hasMoreAbove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        hasMoreAbove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           "... \u2191 (",
           scrollOffset,
           " more above)"
@@ -138,7 +139,7 @@ function BaseAutocomplete({
           const isSelected = actualIndex === selectedIndex;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
         }),
-        hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        hasMoreBelow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           "... \u2193 (",
           totalItems - scrollOffset - maxVisibleItems,
           " more below)"

package/dist/components/base/BaseAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseAutocomplete.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAc,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpF,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,eAAe,EACf,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAU,EACV,cAAc,EACd,KAAK,EACL,eAAoB,EACpB,cAA6B,EAC7B,YAAiC,EACjC,WAAoB,GACvB,EAAE,qBAAqB,CAAC,CAAC,CAAC,kDA8I1B"}
+{"version":3,"file":"BaseAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseAutocomplete.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAc,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpF,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,eAAe,EACf,OAAO,EACP,QAAQ,EACR,OAAO,EACP,UAAU,EACV,cAAc,EACd,KAAK,EACL,eAAoB,EACpB,cAA6B,EAC7B,YAAiC,EACjC,WAA0B,GAC7B,EAAE,qBAAqB,CAAC,CAAC,CAAC,kDA8I1B"}

package/dist/components/base/BaseAutocomplete.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from "react";
 import { Box, Text, useInput } from "ink";
+import { tone } from "../../signal/index.js";
 function BaseAutocomplete({
   items,
   query,
@@ -17,7 +18,7 @@ function BaseAutocomplete({
   maxVisibleItems = 10,
   loadingMessage = "Loading...",
   emptyMessage = "No matches found",
-  borderColor = "cyan"
+  borderColor = tone("teal")
 }) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollOffset, setScrollOffset] = useState(0);
@@ -79,10 +80,10 @@ function BaseAutocomplete({
   );
   if (!isVisible) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: loadingMessage }) });
+    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: tone("dim"), paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: loadingMessage }) });
   }
   if (filteredItems.length === 0) {
-    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: emptyMessage }) });
+    return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: tone("dim"), paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: emptyMessage }) });
   }
   const hasMoreAbove = scrollOffset > 0;
   const hasMoreBelow = scrollOffset + maxVisibleItems < filteredItems.length;
@@ -95,7 +96,7 @@ function BaseAutocomplete({
       flexDirection: "column",
       height: Math.min(maxVisibleItems + 3, totalItems + 3),
       children: [
-        /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           title,
           " (",
           selectedIndex + 1,
@@ -105,7 +106,7 @@ function BaseAutocomplete({
           onLoadIntoInput && ", Tab load",
           ", Enter select, Esc close"
         ] }) }),
-        hasMoreAbove && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        hasMoreAbove && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "... \u2191 (",
           scrollOffset,
           " more above)"
@@ -115,7 +116,7 @@ function BaseAutocomplete({
           const isSelected = actualIndex === selectedIndex;
           return /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
         }),
-        hasMoreBelow && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        hasMoreBelow && /* @__PURE__ */ jsx(Box, { paddingX: 1, paddingY: 0, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "... \u2193 (",
           totalItems - scrollOffset - maxVisibleItems,
           " more below)"

package/dist/components/base/BaseSelector.cjs

@@ -27,6 +27,7 @@ var import_ink = require("ink");
 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");
 function BaseSelectorInner({
   items,
   isVisible,
@@ -40,7 +41,7 @@ function BaseSelectorInner({
   maxVisibleItems = 8,
   loadingMessage = "Loading...",
   emptyMessage = "No items found",
-  borderColor = "cyan",
+  borderColor = (0, import_signal.tone)("teal"),
   onTab,
   supportsTab = false,
   instructionsOverride
@@ -133,10 +134,10 @@ function BaseSelectorInner({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", 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: borderColor, bold: true, children: title }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", height: viewportItems, marginTop: 1, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { 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: "gray", children: loadingMessage }) }),
+      /* @__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: loadingMessage }) }),
       Array.from({ length: Math.max(0, viewportItems - 1) }, (_, 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: " " }) }, `loading-spacer-${index}`))
     ] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { 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: "gray", children: emptyMessage }) }),
+      /* @__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: emptyMessage }) }),
       Array.from({ length: Math.max(0, viewportItems - 1) }, (_, 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: " " }) }, `empty-spacer-${index}`))
     ] }) : Array.from({ length: viewportItems }, (_, rowIndex) => {
       const item = visibleItems[rowIndex];
@@ -147,7 +148,7 @@ function BaseSelectorInner({
       const isSelected = actualIndex === selectedIndex;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_HintBar.HintBar,
       {
         hints: [

package/dist/components/base/BaseSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAK/D,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,EACI,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAmB,EACnB,cAA6B,EAC7B,YAA+B,EAC/B,WAAoB,EACpB,KAAK,EACL,WAAmB,EACnB,oBAAoB,GACvB,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,kDA8LrC;AAGD,eAAO,MAAM,YAAY,EAAoC,CAAC,CAAC,EAC3D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"BaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseSelector.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAQH,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAM/D,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,kBAAkB;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,CAAC,EACxB,EACI,KAAK,EACL,SAAS,EACT,SAAiB,EACjB,aAAa,EACb,aAAa,EACb,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,eAAmB,EACnB,cAA6B,EAC7B,YAA+B,EAC/B,WAA0B,EAC1B,KAAK,EACL,WAAmB,EACnB,oBAAoB,GACvB,EAAE,iBAAiB,CAAC,CAAC,CAAC,EACvB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,kDA8LrC;AAGD,eAAO,MAAM,YAAY,EAAoC,CAAC,CAAC,EAC3D,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/base/BaseSelector.js

@@ -12,6 +12,7 @@ import { Box, Text } from "ink";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
 import { getMaxVisibleItemsForTerminalRows } from "../../utils/overlaySizing.js";
 import { HintBar } from "../shared/HintBar.js";
+import { tone } from "../../signal/index.js";
 function BaseSelectorInner({
   items,
   isVisible,
@@ -25,7 +26,7 @@ function BaseSelectorInner({
   maxVisibleItems = 8,
   loadingMessage = "Loading...",
   emptyMessage = "No items found",
-  borderColor = "cyan",
+  borderColor = tone("teal"),
   onTab,
   supportsTab = false,
   instructionsOverride
@@ -118,10 +119,10 @@ function BaseSelectorInner({
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: borderColor, bold: true, children: title }) }),
     /* @__PURE__ */ jsx(Box, { flexDirection: "column", height: viewportItems, marginTop: 1, children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: loadingMessage }) }),
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: loadingMessage }) }),
       Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `loading-spacer-${index}`))
     ] }) : items.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: emptyMessage }) }),
+      /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: emptyMessage }) }),
       Array.from({ length: Math.max(0, viewportItems - 1) }, (_, index) => /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: /* @__PURE__ */ jsx(Text, { children: " " }) }, `empty-spacer-${index}`))
     ] }) : Array.from({ length: viewportItems }, (_, rowIndex) => {
       const item = visibleItems[rowIndex];
@@ -132,7 +133,7 @@ function BaseSelectorInner({
       const isSelected = actualIndex === selectedIndex;
       return /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, children: formatItem(item, isSelected) }, actualIndex);
     }) }),
-    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ jsx(Text, { color: "gray", wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Box, { paddingX: 0, paddingY: 0, marginTop: 1, children: instructionsOverride ? /* @__PURE__ */ jsx(Text, { color: tone("dim"), wrap: "truncate-end", children: instructionsOverride }) : /* @__PURE__ */ jsx(
       HintBar,
       {
         hints: [

package/dist/components/chat/Footer.cjs

@@ -23,8 +23,9 @@ __export(Footer_exports, {
 module.exports = __toCommonJS(Footer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ink = require("ink");
+var import_signal = require("../../signal/index.js");
 function Footer() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { borderStyle: "single", borderColor: (0, import_signal.tone)("dim"), paddingX: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/chat/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Footer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH;;GAEG;AACH,wBAAgB,MAAM,4CAQrB"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Footer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH;;GAEG;AACH,wBAAgB,MAAM,4CAQrB"}

package/dist/components/chat/Footer.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { tone } from "../../signal/index.js";
 function Footer() {
-  return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
+  return /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: tone("dim"), paddingX: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Shift+Enter/Ctrl+J: newline \u2022 Ctrl+W: del word \u2022 Ctrl+U: del line \u2022 Ctrl+C: exit" }) });
 }
 export {
   Footer

package/dist/components/chat/Header.cjs

@@ -24,56 +24,60 @@ module.exports = __toCommonJS(Header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ink = require("ink");
 var import_useTerminalSize = require("../../hooks/useTerminalSize.js");
+var import_signal = require("../../signal/index.js");
 function Header({ modelName, sessionId, hasActiveSession, startupInfo }) {
   const { columns } = (0, import_useTerminalSize.useTerminalSize)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ink.Box,
     {
       borderStyle: "single",
-      borderColor: "gray",
+      borderColor: (0, import_signal.tone)("dim"),
       paddingX: 1,
       flexDirection: "column",
       flexShrink: 0,
       width: columns,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "greenBright", children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
+        /* @__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)("tealDim"), children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
 \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557
 \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
 \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D   \u2588\u2588\u2554\u2588\u2588\u2557    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
 \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2554\u255D \u2588\u2588\u2557   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D
 \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D` }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Model: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: modelName }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Model: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: modelName }),
           hasActiveSession && sessionId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Session: " }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: sessionId.slice(0, 8) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \u2022 Session: " }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: sessionId.slice(0, 8) })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Servers: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: startupInfo.connectedServers.count }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Tools: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "white", children: startupInfo.toolCount })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Servers: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: startupInfo.connectedServers.count }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \u2022 Tools: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("hi"), children: startupInfo.toolCount })
         ] }),
-        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellowBright", children: [
+        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: [
           "\u26A0\uFE0F Failed: ",
           startupInfo.failedConnections.join(", ")
         ] }) }),
         startupInfo.updateInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: 1, flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "yellow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), children: [
             "\u2B06\uFE0F Update available: ",
             startupInfo.updateInfo.current,
             " \u2192",
             " ",
             startupInfo.updateInfo.latest
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 Run: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \u2022 Run: " }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: startupInfo.updateInfo.updateCommand })
         ] }),
         startupInfo.needsAgentSync && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", children: "\u{1F504} Agent configs have updates available. Run: " }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: "dexto sync-agents" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), children: [
+            "\u{1F504} Agent configs have updates available. Run:",
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: "dexto sync-agents" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { children: " " }) })
       ]

package/dist/components/chat/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,WAAW;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,WAAW,2CA6E1F"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/chat/Header.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAIxD,UAAU,WAAW;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,WAAW,EAAE,EAAE,WAAW,2CA+E1F"}

package/dist/components/chat/Header.js

@@ -1,56 +1,60 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import { tone } from "../../signal/index.js";
 function Header({ modelName, sessionId, hasActiveSession, startupInfo }) {
   const { columns } = useTerminalSize();
   return /* @__PURE__ */ jsxs(
     Box,
     {
       borderStyle: "single",
-      borderColor: "gray",
+      borderColor: tone("dim"),
       paddingX: 1,
       flexDirection: "column",
       flexShrink: 0,
       width: columns,
       children: [
-        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: "greenBright", children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("tealDim"), children: `\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557  \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557
 \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2588\u2588\u2557\u2588\u2588\u2554\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557
 \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557   \u255A\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
 \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D   \u2588\u2588\u2554\u2588\u2588\u2557    \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551
 \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2554\u255D \u2588\u2588\u2557   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D
 \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u255D  \u255A\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D` }) }),
         /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "row", children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: "Model: " }),
-          /* @__PURE__ */ jsx(Text, { color: "white", children: modelName }),
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Model: " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: modelName }),
           hasActiveSession && sessionId && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Session: " }),
-            /* @__PURE__ */ jsx(Text, { color: "white", children: sessionId.slice(0, 8) })
+            /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \u2022 Session: " }),
+            /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: sessionId.slice(0, 8) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: "Servers: " }),
-          /* @__PURE__ */ jsx(Text, { color: "white", children: startupInfo.connectedServers.count }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Tools: " }),
-          /* @__PURE__ */ jsx(Text, { color: "white", children: startupInfo.toolCount })
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Servers: " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: startupInfo.connectedServers.count }),
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \u2022 Tools: " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: startupInfo.toolCount })
         ] }),
-        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: "yellowBright", children: [
+        startupInfo.failedConnections.length > 0 && /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { color: tone("amber"), children: [
           "\u26A0\uFE0F Failed: ",
           startupInfo.failedConnections.join(", ")
         ] }) }),
         startupInfo.updateInfo && /* @__PURE__ */ jsxs(Box, { marginTop: 1, flexDirection: "row", children: [
-          /* @__PURE__ */ jsxs(Text, { color: "yellow", children: [
+          /* @__PURE__ */ jsxs(Text, { color: tone("amberDim"), children: [
             "\u2B06\uFE0F Update available: ",
             startupInfo.updateInfo.current,
             " \u2192",
             " ",
             startupInfo.updateInfo.latest
           ] }),
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 Run: " }),
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: startupInfo.updateInfo.updateCommand })
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \u2022 Run: " }),
+          /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: startupInfo.updateInfo.updateCommand })
         ] }),
         startupInfo.needsAgentSync && /* @__PURE__ */ jsxs(Box, { marginTop: startupInfo.updateInfo ? 0 : 1, flexDirection: "row", children: [
-          /* @__PURE__ */ jsx(Text, { color: "yellow", children: "\u{1F504} Agent configs have updates available. Run: " }),
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "dexto sync-agents" })
+          /* @__PURE__ */ jsxs(Text, { color: tone("amberDim"), children: [
+            "\u{1F504} Agent configs have updates available. Run:",
+            " "
+          ] }),
+          /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: "dexto sync-agents" })
         ] }),
         /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { children: " " }) })
       ]