@dexto/tui 1.14.6 → 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,10 +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_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,
@@ -54,125 +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 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: (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;AAEjF,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,2CAkLb"}
+{"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,15 +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 { 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,
@@ -24,125 +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 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: 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/Footer.test.cjs

@@ -4,6 +4,7 @@ var import_node_stream = require("node:stream");
 var import_ink = require("ink");
 var import_vitest = require("vitest");
 var import_Footer = require("./Footer.js");
+var import_host = require("../host/index.js");
 (0, import_vitest.describe)("configured approval policy in the TUI footer", () => {
   import_vitest.it.each(["manual", "auto-approve"])(
     "shows %s independently of session shortcuts",
@@ -45,3 +46,46 @@ var import_Footer = require("./Footer.js");
     }
   );
 });
+(0, import_vitest.describe)("Dexto credits in the TUI footer", () => {
+  async function renderFooter(provider, balance) {
+    (0, import_host.setTuiRuntimeServices)({ dextoCreditBalance: async () => balance });
+    const stdout = Object.assign(new import_node_stream.PassThrough(), { columns: 120, rows: 40, isTTY: false });
+    let output = "";
+    stdout.on("data", (chunk) => {
+      output += String(chunk);
+    });
+    const agent = {
+      capabilities: { contextStats: false },
+      getEffectiveConfig: () => ({ permissions: { mode: "manual" } }),
+      getCurrentLLMConfig: () => ({ provider, model: "openai/gpt-5" }),
+      on: () => void 0
+    };
+    const view = (0, import_ink.render)(
+      (0, import_react.createElement)(import_Footer.Footer, { agent, sessionId: "session-1", modelName: "openai/gpt-5" }),
+      {
+        stdout,
+        debug: true,
+        patchConsole: false,
+        exitOnCtrlC: false
+      }
+    );
+    try {
+      await import_vitest.vi.waitFor(() => (0, import_vitest.expect)(output).toContain("approvals: manual"));
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      return output;
+    } finally {
+      view.unmount();
+      stdout.destroy();
+      (0, import_host.setTuiRuntimeServices)({});
+    }
+  }
+  (0, import_vitest.it)("shows the balance while a Dexto model runs, under the name Dexto", async () => {
+    const output = await renderFooter("dexto-nova", 12.5);
+    (0, import_vitest.expect)(output).toContain("$12.50 credits");
+    (0, import_vitest.expect)(output).toContain("(Dexto)");
+  });
+  (0, import_vitest.it)("shows no balance for other providers", async () => {
+    const output = await renderFooter("openai", 12.5);
+    (0, import_vitest.expect)(output).not.toContain("credits");
+  });
+});

package/dist/components/Footer.test.js

@@ -3,6 +3,7 @@ import { PassThrough } from "node:stream";
 import { render } from "ink";
 import { describe, expect, it, vi } from "vitest";
 import { Footer } from "./Footer.js";
+import { setTuiRuntimeServices } from "../host/index.js";
 describe("configured approval policy in the TUI footer", () => {
   it.each(["manual", "auto-approve"])(
     "shows %s independently of session shortcuts",
@@ -44,3 +45,46 @@ describe("configured approval policy in the TUI footer", () => {
     }
   );
 });
+describe("Dexto credits in the TUI footer", () => {
+  async function renderFooter(provider, balance) {
+    setTuiRuntimeServices({ dextoCreditBalance: async () => balance });
+    const stdout = Object.assign(new PassThrough(), { columns: 120, rows: 40, isTTY: false });
+    let output = "";
+    stdout.on("data", (chunk) => {
+      output += String(chunk);
+    });
+    const agent = {
+      capabilities: { contextStats: false },
+      getEffectiveConfig: () => ({ permissions: { mode: "manual" } }),
+      getCurrentLLMConfig: () => ({ provider, model: "openai/gpt-5" }),
+      on: () => void 0
+    };
+    const view = render(
+      createElement(Footer, { agent, sessionId: "session-1", modelName: "openai/gpt-5" }),
+      {
+        stdout,
+        debug: true,
+        patchConsole: false,
+        exitOnCtrlC: false
+      }
+    );
+    try {
+      await vi.waitFor(() => expect(output).toContain("approvals: manual"));
+      await new Promise((resolve) => setTimeout(resolve, 20));
+      return output;
+    } finally {
+      view.unmount();
+      stdout.destroy();
+      setTuiRuntimeServices({});
+    }
+  }
+  it("shows the balance while a Dexto model runs, under the name Dexto", async () => {
+    const output = await renderFooter("dexto-nova", 12.5);
+    expect(output).toContain("$12.50 credits");
+    expect(output).toContain("(Dexto)");
+  });
+  it("shows no balance for other providers", async () => {
+    const output = await renderFooter("openai", 12.5);
+    expect(output).not.toContain("credits");
+  });
+});

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)" })
     ] })
   ] });
 }