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

package/dist/signal/deck-layout.js

@@ -0,0 +1,30 @@
+const WIDE_COLUMNS = 100;
+const MID_READOUT_COLUMNS = 24;
+function deckLayout(columns, wordmarkColumns) {
+  if (columns >= WIDE_COLUMNS) {
+    return {
+      band: "wide",
+      bandRows: 3,
+      statusRow: false,
+      blockWidth: Math.min(36, Math.max(30, Math.floor(columns * 0.26)))
+    };
+  }
+  if (columns >= wordmarkColumns + MID_READOUT_COLUMNS) {
+    return { band: "mid", bandRows: 3, statusRow: true, blockWidth: 0 };
+  }
+  return { band: "bare", bandRows: 2, statusRow: true, blockWidth: 0 };
+}
+function formatTokens(tokens) {
+  if (tokens >= 1e6) return `${trimZero((tokens / 1e6).toFixed(1))}M`;
+  if (tokens >= 1e3) return `${Math.round(tokens / 1e3)}k`;
+  return String(tokens);
+}
+function trimZero(value) {
+  return value.endsWith(".0") ? value.slice(0, -2) : value;
+}
+export {
+  MID_READOUT_COLUMNS,
+  WIDE_COLUMNS,
+  deckLayout,
+  formatTokens
+};

package/dist/signal/deck-parts.cjs

@@ -0,0 +1,243 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var deck_parts_exports = {};
+__export(deck_parts_exports, {
+  StatusBlock: () => StatusBlock,
+  StatusRow: () => StatusRow,
+  TraceView: () => TraceView,
+  laneParts: () => laneParts,
+  statusRowFit: () => statusRowFit
+});
+module.exports = __toCommonJS(deck_parts_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+var import_string_width = __toESM(require("string-width"), 1);
+var import_caps = require("./caps.js");
+var import_glyphs = require("./glyphs.js");
+var import_tone = require("./tone.js");
+var import_trace = require("./trace.js");
+var import_deck_layout = require("./deck-layout.js");
+function runs(cells2, color) {
+  const out = [];
+  for (const cell of cells2) {
+    const c = color(cell);
+    const prev = out[out.length - 1];
+    if (prev && prev.color === c && prev.inverse === cell.inverse) prev.text += cell.ch;
+    else out.push({ text: cell.ch, color: c, inverse: cell.inverse });
+  }
+  return out;
+}
+function TraceView({ history, width, height }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  const background = tone("bg");
+  const rows = (0, import_trace.traceRows)(history, Math.max(0, width), height);
+  const color = (cell) => (0, import_trace.fadeColor)(tone(import_trace.TRACE_ROLE[cell.kind]), background, Math.round(cell.fade * 10) / 10);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", flexShrink: 0, width: Math.max(0, width), children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: runs(row, color).map(
+    (run, i) => glyphs === "ascii" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: run.color, children: (0, import_glyphs.glyphText)(run.inverse ? asciiLower(run.text) : run.text, glyphs) }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: run.color, inverse: run.inverse, children: run.text }, i)
+  ) }, r)) });
+}
+function asciiLower(text) {
+  return text.replace(/[▁▂▃▄]/g, "=").replace(/[▅▆▇]/g, "-");
+}
+function ModelName({ model }) {
+  const tone = (0, import_tone.useTone)();
+  const slash = model.indexOf("/");
+  if (slash < 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("fg"), children: model });
+  const provider = model.slice(0, slash);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: tone(provider === "dexto" ? "cloud" : "dim"), children: [
+      provider,
+      "/"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("fg"), children: model.slice(slash + 1) })
+  ] });
+}
+function Where({ where }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  if (where.kind === "computer") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("cloud"), children: (0, import_glyphs.glyphText)(`\u25C6 ${where.name}`, glyphs) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("teal"), children: (0, import_glyphs.glyphText)("\u25C7 local", glyphs) });
+}
+function formatUsd(value) {
+  return `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+function Credits({ credits, showSpend }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  const dot = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("faint"), children: (0, import_glyphs.glyphText)(" \xB7 ", glyphs) });
+  switch (credits.kind) {
+    case "signed-out":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        dot,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: "cloud off" })
+      ] });
+    case "signed-in":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        dot,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("cloud"), children: (0, import_glyphs.glyphText)("\u25C6", glyphs) })
+      ] });
+    case "out":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        dot,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("cloud"), children: (0, import_glyphs.glyphText)("\u25C6 ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("red"), children: "out of credits" })
+      ] });
+    case "balance":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        dot,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("cloud"), children: (0, import_glyphs.glyphText)("\u25C6 ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("fg"), children: formatUsd(credits.balance) }),
+        showSpend && credits.spend !== null && credits.spend > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("cloud"), children: (0, import_glyphs.glyphText)(` \u2212${formatUsd(credits.spend)}`, glyphs) })
+      ] });
+  }
+}
+function cells(text) {
+  return (0, import_string_width.default)(text);
+}
+function whereText(where) {
+  return where.kind === "computer" ? `\u25C6 ${where.name}` : "\u25C7 local";
+}
+function spendText(credits) {
+  return credits.kind === "balance" && credits.spend !== null && credits.spend > 0 ? ` \u2212${formatUsd(credits.spend)}` : "";
+}
+function creditsText(credits) {
+  switch (credits.kind) {
+    case "signed-out":
+      return " \xB7 cloud off";
+    case "signed-in":
+      return " \xB7 \u25C6";
+    case "out":
+      return " \xB7 \u25C6 out of credits";
+    case "balance":
+      return ` \xB7 \u25C6 ${formatUsd(credits.balance)}`;
+  }
+}
+function laneParts(status, width) {
+  const base = cells(whereText(status.where)) + cells(creditsText(status.credits));
+  const spend = cells(spendText(status.credits));
+  const branch = status.branch === null ? 0 : cells(` \u2387 ${status.branch}`);
+  const dirty = status.dirtyFiles > 0 ? cells(` \xB1${status.dirtyFiles}`) : 0;
+  if (base + spend + branch + dirty <= width) {
+    return { branch: branch > 0, dirty: dirty > 0, spend: spend > 0 };
+  }
+  if (base + spend + branch <= width)
+    return { branch: branch > 0, dirty: false, spend: spend > 0 };
+  if (base + spend <= width) return { branch: false, dirty: false, spend: spend > 0 };
+  return { branch: false, dirty: false, spend: false };
+}
+function Lane({ status, width }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  const show = laneParts(status, width);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Where, { where: status.where }),
+    show.branch && status.branch !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_glyphs.glyphText)(` \u2387 ${status.branch}`, glyphs) }),
+    show.dirty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("amberDim"), children: (0, import_glyphs.glyphText)(` \xB1${status.dirtyFiles}`, glyphs) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Credits, { credits: status.credits, showSpend: show.spend })
+  ] });
+}
+function ModelAndContext({
+  model,
+  context,
+  width
+}) {
+  const tone = (0, import_tone.useTone)();
+  const contextCells = context === null ? 0 : cells(context) + 2;
+  const modelWidth = Math.min(cells(model), width - contextCells);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { width, flexShrink: 0, children: [
+    modelWidth >= 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: modelWidth, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModelName, { model }) }) }),
+    context !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: modelWidth >= 4 ? `  ${context}` : context })
+  ] });
+}
+function contextText(status, withMax) {
+  if (status.contextUsedTokens === null) return null;
+  const used = (0, import_deck_layout.formatTokens)(status.contextUsedTokens);
+  if (!withMax || status.contextMaxTokens === null) return used;
+  return `${used}/${(0, import_deck_layout.formatTokens)(status.contextMaxTokens)}`;
+}
+function StatusBlock({
+  label,
+  labelColor,
+  readout,
+  status,
+  width
+}) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  const context = contextText(status, true);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: labelColor, children: label }),
+      readout !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_glyphs.glyphText)(` \xB7 ${readout}`, glyphs) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModelAndContext, { model: status.model, context, width }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lane, { status, width })
+  ] });
+}
+function statusRowFit(status, width, noticeWidth) {
+  const context = contextText(status, false);
+  const natural = cells(status.model) + (context === null ? 0 : cells(context) + 2);
+  const laneMin = cells(whereText(status.where)) + cells(creditsText(status.credits));
+  const noticeRoom = Math.min(noticeWidth, width - laneMin - 2);
+  const notice = noticeRoom >= 4 ? noticeRoom : 0;
+  const noticeCells = notice > 0 ? notice + 2 : 0;
+  const room = width - noticeCells - laneMin - 2;
+  const model = room >= 4 ? Math.min(natural, room) : 0;
+  return {
+    notice,
+    model,
+    lane: Math.max(0, width - noticeCells - (model > 0 ? model + 2 : 0))
+  };
+}
+function StatusRow({
+  status,
+  width,
+  notice
+}) {
+  const { glyphs } = (0, import_caps.useCaps)();
+  const context = contextText(status, false);
+  const noticeText = notice === null ? "" : (0, import_glyphs.glyphText)(notice.text, glyphs);
+  const fit = statusRowFit(status, width, cells(noticeText));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { width, children: [
+    notice !== null && fit.notice > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: fit.notice, marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: notice.color, wrap: "truncate-end", children: noticeText }) }),
+    fit.model > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModelAndContext, { model: status.model, context, width: fit.model }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: fit.lane, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lane, { status, width: fit.lane }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StatusBlock,
+  StatusRow,
+  TraceView,
+  laneParts,
+  statusRowFit
+});

package/dist/signal/deck-parts.d.ts

@@ -0,0 +1,55 @@
+import { type TraceSample } from './trace.js';
+import type { DeckStatus } from './components.js';
+interface TraceViewProps {
+    history: readonly TraceSample[];
+    width: number;
+    height: number;
+}
+export declare function TraceView({ history, width, height }: TraceViewProps): import("react/jsx-runtime").JSX.Element;
+export interface LaneParts {
+    branch: boolean;
+    dirty: boolean;
+    spend: boolean;
+}
+/**
+ * What fits beside where and credits in `width` columns. Dropped in order: the dirty count,
+ * the branch, then this turn's spend. Where the agent runs and the balance always stay.
+ */
+export declare function laneParts(status: DeckStatus, width: number): LaneParts;
+/** Mode · readout, model and context, lane: three rows beside the trace. */
+export declare function StatusBlock({ label, labelColor, readout, status, width, }: {
+    label: string;
+    labelColor: string;
+    readout: string | null;
+    status: DeckStatus;
+    width: number;
+}): import("react/jsx-runtime").JSX.Element;
+/** How the compact status row shares its width. */
+export interface StatusRowFit {
+    /** Columns for the notice, without its gap; 0 hides it. */
+    notice: number;
+    /** Columns for model and context; 0 hides them. */
+    model: number;
+    /** Columns for the lane. */
+    lane: number;
+}
+/**
+ * Where the agent runs and the balance always fit, then the notice, which truncates to what
+ * they leave; model and context take the rest and truncate first. Notice and model disappear
+ * below four columns. `noticeWidth` is the notice's natural width, without its gap.
+ */
+export declare function statusRowFit(status: DeckStatus, width: number, noticeWidth: number): StatusRowFit;
+/**
+ * Model, context and lane in one row under the input. `notice` leads the row when the band
+ * has no room for the readout, so the permission mode stays on screen.
+ */
+export declare function StatusRow({ status, width, notice, }: {
+    status: DeckStatus;
+    width: number;
+    notice: {
+        text: string;
+        color: string;
+    } | null;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=deck-parts.d.ts.map

package/dist/signal/deck-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck-parts.d.ts","sourceRoot":"","sources":["../../src/signal/deck-parts.tsx"],"names":[],"mappings":"AASA,OAAO,EAAoD,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAEhG,OAAO,KAAK,EAAe,UAAU,EAAa,MAAM,iBAAiB,CAAC;AAI1E,UAAU,cAAc;IACpB,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAoBD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,cAAc,2CA2BnE;AA4GD,MAAM,WAAW,SAAS;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAYtE;AA4DD,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,KAAK,GACR,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB,2CAkBA;AAED,mDAAmD;AACnD,MAAM,WAAW,YAAY;IACzB,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,YAAY,CAcjG;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACtB,MAAM,EACN,KAAK,EACL,MAAM,GACT,EAAE;IACC,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClD,2CAwBA"}

package/dist/signal/deck-parts.js

@@ -0,0 +1,205 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+import { useCaps } from "./caps.js";
+import { glyphText } from "./glyphs.js";
+import { useTone } from "./tone.js";
+import { TRACE_ROLE, fadeColor, traceRows } from "./trace.js";
+import { formatTokens } from "./deck-layout.js";
+function runs(cells2, color) {
+  const out = [];
+  for (const cell of cells2) {
+    const c = color(cell);
+    const prev = out[out.length - 1];
+    if (prev && prev.color === c && prev.inverse === cell.inverse) prev.text += cell.ch;
+    else out.push({ text: cell.ch, color: c, inverse: cell.inverse });
+  }
+  return out;
+}
+function TraceView({ history, width, height }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const background = tone("bg");
+  const rows = traceRows(history, Math.max(0, width), height);
+  const color = (cell) => fadeColor(tone(TRACE_ROLE[cell.kind]), background, Math.round(cell.fade * 10) / 10);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexShrink: 0, width: Math.max(0, width), children: rows.map((row, r) => /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: runs(row, color).map(
+    (run, i) => glyphs === "ascii" ? /* @__PURE__ */ jsx(Text, { color: run.color, children: glyphText(run.inverse ? asciiLower(run.text) : run.text, glyphs) }, i) : /* @__PURE__ */ jsx(Text, { color: run.color, inverse: run.inverse, children: run.text }, i)
+  ) }, r)) });
+}
+function asciiLower(text) {
+  return text.replace(/[▁▂▃▄]/g, "=").replace(/[▅▆▇]/g, "-");
+}
+function ModelName({ model }) {
+  const tone = useTone();
+  const slash = model.indexOf("/");
+  if (slash < 0) return /* @__PURE__ */ jsx(Text, { color: tone("fg"), children: model });
+  const provider = model.slice(0, slash);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsxs(Text, { color: tone(provider === "dexto" ? "cloud" : "dim"), children: [
+      provider,
+      "/"
+    ] }),
+    /* @__PURE__ */ jsx(Text, { color: tone("fg"), children: model.slice(slash + 1) })
+  ] });
+}
+function Where({ where }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  if (where.kind === "computer") {
+    return /* @__PURE__ */ jsx(Text, { color: tone("cloud"), children: glyphText(`\u25C6 ${where.name}`, glyphs) });
+  }
+  return /* @__PURE__ */ jsx(Text, { color: tone("teal"), children: glyphText("\u25C7 local", glyphs) });
+}
+function formatUsd(value) {
+  return `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+function Credits({ credits, showSpend }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const dot = /* @__PURE__ */ jsx(Text, { color: tone("faint"), children: glyphText(" \xB7 ", glyphs) });
+  switch (credits.kind) {
+    case "signed-out":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        dot,
+        /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "cloud off" })
+      ] });
+    case "signed-in":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        dot,
+        /* @__PURE__ */ jsx(Text, { color: tone("cloud"), children: glyphText("\u25C6", glyphs) })
+      ] });
+    case "out":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        dot,
+        /* @__PURE__ */ jsx(Text, { color: tone("cloud"), children: glyphText("\u25C6 ", glyphs) }),
+        /* @__PURE__ */ jsx(Text, { color: tone("red"), children: "out of credits" })
+      ] });
+    case "balance":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        dot,
+        /* @__PURE__ */ jsx(Text, { color: tone("cloud"), children: glyphText("\u25C6 ", glyphs) }),
+        /* @__PURE__ */ jsx(Text, { color: tone("fg"), children: formatUsd(credits.balance) }),
+        showSpend && credits.spend !== null && credits.spend > 0 && /* @__PURE__ */ jsx(Text, { color: tone("cloud"), children: glyphText(` \u2212${formatUsd(credits.spend)}`, glyphs) })
+      ] });
+  }
+}
+function cells(text) {
+  return stringWidth(text);
+}
+function whereText(where) {
+  return where.kind === "computer" ? `\u25C6 ${where.name}` : "\u25C7 local";
+}
+function spendText(credits) {
+  return credits.kind === "balance" && credits.spend !== null && credits.spend > 0 ? ` \u2212${formatUsd(credits.spend)}` : "";
+}
+function creditsText(credits) {
+  switch (credits.kind) {
+    case "signed-out":
+      return " \xB7 cloud off";
+    case "signed-in":
+      return " \xB7 \u25C6";
+    case "out":
+      return " \xB7 \u25C6 out of credits";
+    case "balance":
+      return ` \xB7 \u25C6 ${formatUsd(credits.balance)}`;
+  }
+}
+function laneParts(status, width) {
+  const base = cells(whereText(status.where)) + cells(creditsText(status.credits));
+  const spend = cells(spendText(status.credits));
+  const branch = status.branch === null ? 0 : cells(` \u2387 ${status.branch}`);
+  const dirty = status.dirtyFiles > 0 ? cells(` \xB1${status.dirtyFiles}`) : 0;
+  if (base + spend + branch + dirty <= width) {
+    return { branch: branch > 0, dirty: dirty > 0, spend: spend > 0 };
+  }
+  if (base + spend + branch <= width)
+    return { branch: branch > 0, dirty: false, spend: spend > 0 };
+  if (base + spend <= width) return { branch: false, dirty: false, spend: spend > 0 };
+  return { branch: false, dirty: false, spend: false };
+}
+function Lane({ status, width }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const show = laneParts(status, width);
+  return /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+    /* @__PURE__ */ jsx(Where, { where: status.where }),
+    show.branch && status.branch !== null && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(` \u2387 ${status.branch}`, glyphs) }),
+    show.dirty && /* @__PURE__ */ jsx(Text, { color: tone("amberDim"), children: glyphText(` \xB1${status.dirtyFiles}`, glyphs) }),
+    /* @__PURE__ */ jsx(Credits, { credits: status.credits, showSpend: show.spend })
+  ] });
+}
+function ModelAndContext({
+  model,
+  context,
+  width
+}) {
+  const tone = useTone();
+  const contextCells = context === null ? 0 : cells(context) + 2;
+  const modelWidth = Math.min(cells(model), width - contextCells);
+  return /* @__PURE__ */ jsxs(Box, { width, flexShrink: 0, children: [
+    modelWidth >= 4 && /* @__PURE__ */ jsx(Box, { width: modelWidth, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: /* @__PURE__ */ jsx(ModelName, { model }) }) }),
+    context !== null && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: modelWidth >= 4 ? `  ${context}` : context })
+  ] });
+}
+function contextText(status, withMax) {
+  if (status.contextUsedTokens === null) return null;
+  const used = formatTokens(status.contextUsedTokens);
+  if (!withMax || status.contextMaxTokens === null) return used;
+  return `${used}/${formatTokens(status.contextMaxTokens)}`;
+}
+function StatusBlock({
+  label,
+  labelColor,
+  readout,
+  status,
+  width
+}) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const context = contextText(status, true);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: labelColor, children: label }),
+      readout !== null && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(` \xB7 ${readout}`, glyphs) })
+    ] }),
+    /* @__PURE__ */ jsx(ModelAndContext, { model: status.model, context, width }),
+    /* @__PURE__ */ jsx(Lane, { status, width })
+  ] });
+}
+function statusRowFit(status, width, noticeWidth) {
+  const context = contextText(status, false);
+  const natural = cells(status.model) + (context === null ? 0 : cells(context) + 2);
+  const laneMin = cells(whereText(status.where)) + cells(creditsText(status.credits));
+  const noticeRoom = Math.min(noticeWidth, width - laneMin - 2);
+  const notice = noticeRoom >= 4 ? noticeRoom : 0;
+  const noticeCells = notice > 0 ? notice + 2 : 0;
+  const room = width - noticeCells - laneMin - 2;
+  const model = room >= 4 ? Math.min(natural, room) : 0;
+  return {
+    notice,
+    model,
+    lane: Math.max(0, width - noticeCells - (model > 0 ? model + 2 : 0))
+  };
+}
+function StatusRow({
+  status,
+  width,
+  notice
+}) {
+  const { glyphs } = useCaps();
+  const context = contextText(status, false);
+  const noticeText = notice === null ? "" : glyphText(notice.text, glyphs);
+  const fit = statusRowFit(status, width, cells(noticeText));
+  return /* @__PURE__ */ jsxs(Box, { width, children: [
+    notice !== null && fit.notice > 0 && /* @__PURE__ */ jsx(Box, { width: fit.notice, marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: notice.color, wrap: "truncate-end", children: noticeText }) }),
+    fit.model > 0 && /* @__PURE__ */ jsx(Box, { marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ jsx(ModelAndContext, { model: status.model, context, width: fit.model }) }),
+    /* @__PURE__ */ jsx(Box, { width: fit.lane, flexShrink: 0, children: /* @__PURE__ */ jsx(Lane, { status, width: fit.lane }) })
+  ] });
+}
+export {
+  StatusBlock,
+  StatusRow,
+  TraceView,
+  laneParts,
+  statusRowFit
+};