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

package/dist/components/ErrorBoundary.cjs

@@ -35,6 +35,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"), 1);
 var import_ink = require("ink");
 var import_core = require("@dexto/core");
+var import_signal = require("../signal/index.js");
 class ErrorBoundary extends import_react.default.Component {
   constructor(props) {
     super(props);
@@ -51,11 +52,20 @@ class ErrorBoundary extends import_react.default.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", bold: true, children: "CLI Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: this.state.error?.message || "Unknown error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: "Press Ctrl+C to exit" })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ink.Box,
+        {
+          flexDirection: "column",
+          padding: 1,
+          borderStyle: "round",
+          borderColor: (0, import_signal.tone)("red"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), bold: true, children: "CLI Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), children: this.state.error?.message || "Unknown error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: "Press Ctrl+C to exit" })
+          ]
+        }
+      );
     }
     return this.props.children;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAkB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC1E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIxD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAOjE,MAAM,IAAI,KAAK,CAAC,SAAS;CAerC"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,kBAAkB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,kBAAkB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC1E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIxD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAOjE,MAAM,IAAI,KAAK,CAAC,SAAS;CAoBrC"}

package/dist/components/ErrorBoundary.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
 import { logger } from "@dexto/core";
+import { tone } from "../signal/index.js";
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -18,11 +19,20 @@ class ErrorBoundary extends React.Component {
   }
   render() {
     if (this.state.hasError) {
-      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: [
-        /* @__PURE__ */ jsx(Text, { color: "red", bold: true, children: "CLI Error" }),
-        /* @__PURE__ */ jsx(Text, { color: "red", children: this.state.error?.message || "Unknown error" }),
-        /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: "Press Ctrl+C to exit" })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          flexDirection: "column",
+          padding: 1,
+          borderStyle: "round",
+          borderColor: tone("red"),
+          children: [
+            /* @__PURE__ */ jsx(Text, { color: tone("red"), bold: true, children: "CLI Error" }),
+            /* @__PURE__ */ jsx(Text, { color: tone("red"), children: this.state.error?.message || "Unknown error" }),
+            /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: "Press Ctrl+C to exit" })
+          ]
+        }
+      );
     }
     return this.props.children;
   }

package/dist/components/Footer.cjs

@@ -36,11 +36,12 @@ var import_react = require("react");
 var import_node_path = __toESM(require("node:path"), 1);
 var import_ink = require("ink");
 var import_llm = require("@dexto/llm");
-var import_core = require("@dexto/core");
 var import_llm_provider_display = require("../utils/llm-provider-display.js");
 var import_chatgpt_rate_limit = require("../utils/chatgpt-rate-limit.js");
-var import_agent_backend = require("../agent-backend.js");
-var import_host = require("../host/index.js");
+var import_reasoning_variant = require("../utils/reasoning-variant.js");
+var import_useContextStats = require("../hooks/useContextStats.js");
+var import_useDextoCredits = require("../hooks/useDextoCredits.js");
+var import_signal = require("../signal/index.js");
 function Footer({
   agent,
   sessionId,
@@ -55,155 +56,78 @@ function Footer({
 }) {
   const displayPath = cwd ? import_node_path.default.basename(cwd) || cwd : "";
   const displayModelName = (0, import_llm.getModelDisplayName)(modelName);
-  const [contextLeft, setContextLeft] = (0, import_react.useState)(null);
   const [, setLlmTick] = (0, import_react.useState)(0);
   const llmConfig = sessionId ? agent.getCurrentLLMConfig(sessionId) : null;
   const provider = llmConfig?.provider ?? null;
   const providerLabel = provider ? (0, import_llm_provider_display.getLLMProviderDisplayName)(provider, llmConfig?.baseURL) : null;
-  const reasoningProfile = provider && llmConfig ? (0, import_llm.getReasoningProfile)(provider, llmConfig.model) : null;
-  const reasoningVariant = llmConfig?.reasoning?.variant ?? reasoningProfile?.defaultVariant ?? void 0;
-  const showReasoningVariant = reasoningProfile?.capable === true && typeof reasoningVariant === "string";
-  const isChatGPTLogin = provider === "openai-compatible" && (0, import_core.parseCodexBaseURL)(llmConfig?.baseURL)?.authMode === "chatgpt";
-  const showChatGPTRateLimitHint = isChatGPTLogin && (0, import_chatgpt_rate_limit.shouldShowChatGPTRateLimitHint)(chatgptRateLimitStatus);
-  const chatGPTRateLimitHint = showChatGPTRateLimitHint && chatgptRateLimitStatus ? (0, import_chatgpt_rate_limit.getChatGPTRateLimitHint)(chatgptRateLimitStatus) : null;
-  const chatGPTRateLimitColor = chatgptRateLimitStatus?.exceeded ? "redBright" : (chatgptRateLimitStatus?.usedPercent ?? 0) >= 90 ? "yellowBright" : "yellow";
-  (0, import_react.useEffect)(() => {
-    if (!(0, import_agent_backend.supportsContextStats)(agent)) {
-      setContextLeft(null);
-      return;
-    }
-    if (!sessionId) {
-      setContextLeft(null);
-      return;
-    }
-    let cancelled = false;
-    let refreshId = 0;
-    const refreshContext = async () => {
-      const requestId = ++refreshId;
-      try {
-        const stats = await agent.getContextStats(sessionId);
-        if (cancelled || requestId !== refreshId) return;
-        const percentLeft = Math.max(0, Math.min(100, 100 - stats.usagePercent));
-        setContextLeft({
-          percentLeft
-        });
-      } catch {
-        if (!cancelled) {
-          setContextLeft(null);
-        }
-      }
-    };
-    refreshContext();
-    const controller = new AbortController();
-    const { signal } = controller;
-    const sessionEvents = [
-      "llm:response",
-      "llm:switched",
-      "context:compacted",
-      "context:pruned",
-      "context:cleared",
-      "message:dequeued",
-      "session:reset"
-    ];
-    const handleEvent = (payload) => {
-      if (payload.sessionId && payload.sessionId !== sessionId) return;
-      refreshContext();
-    };
-    const handleLlmSwitched = (payload) => {
-      if (payload.sessionIds && !payload.sessionIds.includes(sessionId)) return;
-      refreshContext();
-      setLlmTick((prev) => prev + 1);
-    };
-    for (const eventName of sessionEvents) {
-      if (eventName === "llm:switched") {
-        agent.on(eventName, handleLlmSwitched, { signal });
-      } else {
-        agent.on(eventName, handleEvent, { signal });
-      }
-    }
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [agent, sessionId]);
-  const [creditBalance, setCreditBalance] = (0, import_react.useState)(null);
-  const usesDextoCredits = provider === "dexto-nova";
-  (0, import_react.useEffect)(() => {
-    setCreditBalance(null);
-    if (!usesDextoCredits) return;
-    let cancelled = false;
-    const refresh = () => {
-      (0, import_host.dextoCreditBalance)().then((balance) => {
-        if (!cancelled) setCreditBalance(balance);
-      }).catch(() => void 0);
-    };
-    refresh();
-    const controller = new AbortController();
-    agent.on(
-      "llm:response",
-      (payload) => {
-        if (!payload.sessionId || payload.sessionId === sessionId) refresh();
-      },
-      { signal: controller.signal }
-    );
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [agent, sessionId, usesDextoCredits]);
-  const pathColor = isShellMode ? "yellow" : "blue";
+  const reasoningVariant = (0, import_reasoning_variant.displayedReasoningVariant)(llmConfig);
+  const chatGPTRateLimitHint = (0, import_chatgpt_rate_limit.resolveChatGPTRateLimitHint)(
+    llmConfig,
+    chatgptRateLimitStatus,
+    "full"
+  );
+  const chatGPTRateLimitColor = chatgptRateLimitStatus?.exceeded ? (0, import_signal.tone)("del") : (chatgptRateLimitStatus?.usedPercent ?? 0) >= 90 ? (0, import_signal.tone)("amber") : (0, import_signal.tone)("amberDim");
+  const contextUsage = (0, import_useContextStats.useContextStats)(agent, sessionId, () => setLlmTick((prev) => prev + 1));
+  const contextLeft = contextUsage ? { percentLeft: Math.max(0, Math.min(100, 100 - contextUsage.usagePercent)) } : null;
+  const creditBalance = (0, import_useDextoCredits.useDextoCreditBalance)(
+    agent,
+    sessionId,
+    provider === "dexto-nova" ? provider : null,
+    false
+  );
+  const pathColor = isShellMode ? (0, import_signal.tone)("amberDim") : (0, import_signal.tone)("fg");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", paddingX: 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: pathColor, children: displayPath }),
-        branchName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        branchName && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           " (",
           branchName,
           ")"
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: displayModelName }),
-        providerLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: displayModelName }),
+        providerLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
           " (",
           providerLabel,
           ")"
         ] }),
-        showReasoningVariant && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \xB7 r:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "magentaBright", children: reasoningVariant })
+        reasoningVariant !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \xB7 r:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("cloudDim"), children: reasoningVariant })
         ] })
       ] })
     ] }),
-    contextLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+    contextLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
       contextLeft.percentLeft,
       "% context left"
     ] }) }),
-    creditBalance !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+    creditBalance !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
       "$",
       creditBalance.toFixed(2),
       " credits"
     ] }) }),
     chatGPTRateLimitHint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: chatGPTRateLimitColor, children: chatGPTRateLimitHint }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
       "approvals: ",
       agent.getEffectiveConfig(sessionId ?? void 0).permissions.mode
     ] }) }),
     isShellMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellow", bold: true, children: "!" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " for shell mode" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amberDim"), bold: true, children: "!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " for shell mode" })
     ] }),
     planModeActive && !isShellMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "magentaBright", children: "plan mode" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("cloudDim"), children: "plan mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " (shift + tab to cycle)" })
     ] }),
     autoApproveEdits && !planModeActive && !isShellMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "yellowBright", children: "accept edits" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: "accept edits" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " (shift + tab to cycle)" })
     ] }),
     bypassPermissions && !planModeActive && !autoApproveEdits && !isShellMode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "auto-approve (session)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "auto-approve (session)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " (shift + tab to cycle)" })
     ] })
   ] });
 }

package/dist/components/Footer.d.ts

@@ -2,8 +2,8 @@
  * Footer Component
  * Status line at the bottom showing CWD, branch, and model info.
  */
-import { type CodexRateLimitSnapshot } from '@dexto/core';
-import { type TuiAgentBackend } from '../agent-backend.js';
+import type { CodexRateLimitSnapshot } from '@dexto/core';
+import type { TuiAgentBackend } from '../agent-backend.js';
 interface FooterProps {
     agent: TuiAgentBackend;
     sessionId: string | null;

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAM7E,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAGjF,UAAU,WAAW;IACjB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAC1D;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,EACH,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,sBAAsB,GACzB,EAAE,WAAW,2CAqNb"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAI1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK3D,UAAU,WAAW;IACjB,KAAK,EAAE,eAAe,CAAC;IACvB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAC1D;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,EACH,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,WAAW,EACX,sBAAsB,GACzB,EAAE,WAAW,2CAiHb"}

package/dist/components/Footer.js

@@ -1,16 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import path from "node:path";
 import { Box, Text } from "ink";
-import { getModelDisplayName, getReasoningProfile } from "@dexto/llm";
-import { parseCodexBaseURL } from "@dexto/core";
+import { getModelDisplayName } from "@dexto/llm";
 import { getLLMProviderDisplayName } from "../utils/llm-provider-display.js";
-import {
-  getChatGPTRateLimitHint,
-  shouldShowChatGPTRateLimitHint
-} from "../utils/chatgpt-rate-limit.js";
-import { supportsContextStats } from "../agent-backend.js";
-import { dextoCreditBalance } from "../host/index.js";
+import { resolveChatGPTRateLimitHint } from "../utils/chatgpt-rate-limit.js";
+import { displayedReasoningVariant } from "../utils/reasoning-variant.js";
+import { useContextStats } from "../hooks/useContextStats.js";
+import { useDextoCreditBalance } from "../hooks/useDextoCredits.js";
+import { tone } from "../signal/index.js";
 function Footer({
   agent,
   sessionId,
@@ -25,155 +23,78 @@ function Footer({
 }) {
   const displayPath = cwd ? path.basename(cwd) || cwd : "";
   const displayModelName = getModelDisplayName(modelName);
-  const [contextLeft, setContextLeft] = useState(null);
   const [, setLlmTick] = useState(0);
   const llmConfig = sessionId ? agent.getCurrentLLMConfig(sessionId) : null;
   const provider = llmConfig?.provider ?? null;
   const providerLabel = provider ? getLLMProviderDisplayName(provider, llmConfig?.baseURL) : null;
-  const reasoningProfile = provider && llmConfig ? getReasoningProfile(provider, llmConfig.model) : null;
-  const reasoningVariant = llmConfig?.reasoning?.variant ?? reasoningProfile?.defaultVariant ?? void 0;
-  const showReasoningVariant = reasoningProfile?.capable === true && typeof reasoningVariant === "string";
-  const isChatGPTLogin = provider === "openai-compatible" && parseCodexBaseURL(llmConfig?.baseURL)?.authMode === "chatgpt";
-  const showChatGPTRateLimitHint = isChatGPTLogin && shouldShowChatGPTRateLimitHint(chatgptRateLimitStatus);
-  const chatGPTRateLimitHint = showChatGPTRateLimitHint && chatgptRateLimitStatus ? getChatGPTRateLimitHint(chatgptRateLimitStatus) : null;
-  const chatGPTRateLimitColor = chatgptRateLimitStatus?.exceeded ? "redBright" : (chatgptRateLimitStatus?.usedPercent ?? 0) >= 90 ? "yellowBright" : "yellow";
-  useEffect(() => {
-    if (!supportsContextStats(agent)) {
-      setContextLeft(null);
-      return;
-    }
-    if (!sessionId) {
-      setContextLeft(null);
-      return;
-    }
-    let cancelled = false;
-    let refreshId = 0;
-    const refreshContext = async () => {
-      const requestId = ++refreshId;
-      try {
-        const stats = await agent.getContextStats(sessionId);
-        if (cancelled || requestId !== refreshId) return;
-        const percentLeft = Math.max(0, Math.min(100, 100 - stats.usagePercent));
-        setContextLeft({
-          percentLeft
-        });
-      } catch {
-        if (!cancelled) {
-          setContextLeft(null);
-        }
-      }
-    };
-    refreshContext();
-    const controller = new AbortController();
-    const { signal } = controller;
-    const sessionEvents = [
-      "llm:response",
-      "llm:switched",
-      "context:compacted",
-      "context:pruned",
-      "context:cleared",
-      "message:dequeued",
-      "session:reset"
-    ];
-    const handleEvent = (payload) => {
-      if (payload.sessionId && payload.sessionId !== sessionId) return;
-      refreshContext();
-    };
-    const handleLlmSwitched = (payload) => {
-      if (payload.sessionIds && !payload.sessionIds.includes(sessionId)) return;
-      refreshContext();
-      setLlmTick((prev) => prev + 1);
-    };
-    for (const eventName of sessionEvents) {
-      if (eventName === "llm:switched") {
-        agent.on(eventName, handleLlmSwitched, { signal });
-      } else {
-        agent.on(eventName, handleEvent, { signal });
-      }
-    }
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [agent, sessionId]);
-  const [creditBalance, setCreditBalance] = useState(null);
-  const usesDextoCredits = provider === "dexto-nova";
-  useEffect(() => {
-    setCreditBalance(null);
-    if (!usesDextoCredits) return;
-    let cancelled = false;
-    const refresh = () => {
-      dextoCreditBalance().then((balance) => {
-        if (!cancelled) setCreditBalance(balance);
-      }).catch(() => void 0);
-    };
-    refresh();
-    const controller = new AbortController();
-    agent.on(
-      "llm:response",
-      (payload) => {
-        if (!payload.sessionId || payload.sessionId === sessionId) refresh();
-      },
-      { signal: controller.signal }
-    );
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [agent, sessionId, usesDextoCredits]);
-  const pathColor = isShellMode ? "yellow" : "blue";
+  const reasoningVariant = displayedReasoningVariant(llmConfig);
+  const chatGPTRateLimitHint = resolveChatGPTRateLimitHint(
+    llmConfig,
+    chatgptRateLimitStatus,
+    "full"
+  );
+  const chatGPTRateLimitColor = chatgptRateLimitStatus?.exceeded ? tone("del") : (chatgptRateLimitStatus?.usedPercent ?? 0) >= 90 ? tone("amber") : tone("amberDim");
+  const contextUsage = useContextStats(agent, sessionId, () => setLlmTick((prev) => prev + 1));
+  const contextLeft = contextUsage ? { percentLeft: Math.max(0, Math.min(100, 100 - contextUsage.usagePercent)) } : null;
+  const creditBalance = useDextoCreditBalance(
+    agent,
+    sessionId,
+    provider === "dexto-nova" ? provider : null,
+    false
+  );
+  const pathColor = isShellMode ? tone("amberDim") : tone("fg");
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
     /* @__PURE__ */ jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Text, { color: pathColor, children: displayPath }),
-        branchName && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        branchName && /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           " (",
           branchName,
           ")"
         ] })
       ] }),
       /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Text, { color: "cyan", children: displayModelName }),
-        providerLabel && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: displayModelName }),
+        providerLabel && /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           " (",
           providerLabel,
           ")"
         ] }),
-        showReasoningVariant && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { color: "gray", children: " \xB7 r:" }),
-          /* @__PURE__ */ jsx(Text, { color: "magentaBright", children: reasoningVariant })
+        reasoningVariant !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \xB7 r:" }),
+          /* @__PURE__ */ jsx(Text, { color: tone("cloudDim"), children: reasoningVariant })
         ] })
       ] })
     ] }),
-    contextLeft && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+    contextLeft && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
       contextLeft.percentLeft,
       "% context left"
     ] }) }),
-    creditBalance !== null && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+    creditBalance !== null && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
       "$",
       creditBalance.toFixed(2),
       " credits"
     ] }) }),
     chatGPTRateLimitHint && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: chatGPTRateLimitColor, children: chatGPTRateLimitHint }) }),
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
       "approvals: ",
       agent.getEffectiveConfig(sessionId ?? void 0).permissions.mode
     ] }) }),
     isShellMode && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "yellow", bold: true, children: "!" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " for shell mode" })
+      /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), bold: true, children: "!" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " for shell mode" })
     ] }),
     planModeActive && !isShellMode && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "magentaBright", children: "plan mode" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ jsx(Text, { color: tone("cloudDim"), children: "plan mode" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " (shift + tab to cycle)" })
     ] }),
     autoApproveEdits && !planModeActive && !isShellMode && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: "accept edits" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: "accept edits" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " (shift + tab to cycle)" })
     ] }),
     bypassPermissions && !planModeActive && !autoApproveEdits && !isShellMode && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "auto-approve (session)" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " (shift + tab to cycle)" })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "auto-approve (session)" }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " (shift + tab to cycle)" })
     ] })
   ] });
 }

package/dist/components/HistorySearchBar.cjs

@@ -23,14 +23,15 @@ __export(HistorySearchBar_exports, {
 module.exports = __toCommonJS(HistorySearchBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ink = require("ink");
+var import_signal = require("../signal/index.js");
 function HistorySearchBar({ query, hasMatch }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "Ctrl+R: older, Ctrl+E: newer, Enter: accept, Esc: cancel" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "Ctrl+R: older, Ctrl+E: newer, Enter: accept, Esc: cancel" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "green", children: "search history: " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "cyan", children: query }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: "_" }),
-      query && !hasMatch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "red", children: " (no match)" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("add"), children: "search history: " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("teal"), children: query }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: "_" }),
+      query && !hasMatch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("red"), children: " (no match)" })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"HistorySearchBar.d.ts","sourceRoot":"","sources":["../../src/components/HistorySearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,UAAU,qBAAqB;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAc1E"}
+{"version":3,"file":"HistorySearchBar.d.ts","sourceRoot":"","sources":["../../src/components/HistorySearchBar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,UAAU,qBAAqB;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAgB1E"}

package/dist/components/HistorySearchBar.js

@@ -1,13 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
+import { tone } from "../signal/index.js";
 function HistorySearchBar({ query, hasMatch }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsx(Text, { color: "gray", children: "Ctrl+R: older, Ctrl+E: newer, Enter: accept, Esc: cancel" }),
+    /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "Ctrl+R: older, Ctrl+E: newer, Enter: accept, Esc: cancel" }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { color: "green", children: "search history: " }),
-      /* @__PURE__ */ jsx(Text, { color: "cyan", children: query }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "_" }),
-      query && !hasMatch && /* @__PURE__ */ jsx(Text, { color: "red", children: " (no match)" })
+      /* @__PURE__ */ jsx(Text, { color: tone("add"), children: "search history: " }),
+      /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: query }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "_" }),
+      query && !hasMatch && /* @__PURE__ */ jsx(Text, { color: tone("red"), children: " (no match)" })
     ] })
   ] });
 }

package/dist/components/MultiLineInput.cjs

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(MultiLineInput_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 MultiLineInput({ value, placeholder, prompt = "> " }) {
   const lines = (0, import_react.useMemo)(() => {
     if (!value) return [];
@@ -32,14 +33,14 @@ function MultiLineInput({ value, placeholder, prompt = "> " }) {
   const lineCount = lines.length;
   if (!value && placeholder) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "green", bold: true, children: prompt }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: placeholder })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("add"), bold: true, children: prompt }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: placeholder })
     ] });
   }
   const visibleLines = lineCount > 10 ? lines.slice(-10) : lines;
   const startOffset = lineCount > 10 ? lineCount - 10 : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", children: [
-    startOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+    startOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
       "... (",
       startOffset,
       " more lines above)"
@@ -47,8 +48,8 @@ function MultiLineInput({ value, placeholder, prompt = "> " }) {
     visibleLines.map((line, index) => {
       const actualIndex = startOffset + index;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-        index === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "green", bold: true, children: prompt }),
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "green", children: " ".repeat(prompt.length) }),
+        index === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("add"), bold: true, children: prompt }),
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("add"), children: " ".repeat(prompt.length) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "wrap", children: line || " " })
       ] }, actualIndex);
     })

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

@@ -1 +1 @@
-{"version":3,"file":"MultiLineInput.d.ts","sourceRoot":"","sources":["../../src/components/MultiLineInput.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAa,EAAE,EAAE,mBAAmB,2CAgDhG"}
+{"version":3,"file":"MultiLineInput.d.ts","sourceRoot":"","sources":["../../src/components/MultiLineInput.tsx"],"names":[],"mappings":"AAIA,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAa,EAAE,EAAE,mBAAmB,2CAgDhG"}