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

package/dist/signal/components.cjs

@@ -0,0 +1,257 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var components_exports = {};
+__export(components_exports, {
+  ActorRow: () => ActorRow,
+  CutText: () => CutText,
+  DECK_MODES: () => DECK_MODES,
+  Deck: () => Deck,
+  GateFrame: () => GateFrame,
+  StepRow: () => StepRow,
+  Wordmark: () => Wordmark,
+  actorMarginWidth: () => actorMarginWidth
+});
+module.exports = __toCommonJS(components_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ink = require("ink");
+var import_useAnimationTick = require("../hooks/useAnimationTick.js");
+var import_caps = require("./caps.js");
+var import_glyphs = require("./glyphs.js");
+var import_cut = require("./cut.js");
+var import_tone = require("./tone.js");
+var import_deck_layout = require("./deck-layout.js");
+var import_deck_parts = require("./deck-parts.js");
+var import_trace = require("./trace.js");
+var import_use_trace = require("./use-trace.js");
+var import_wordmark = require("./wordmark.js");
+const WORDMARK_INK = { m: "teal", f: "tealDim", w: "hi" };
+const PULSE_CYCLE_TICKS = 15;
+function inkRuns(text, ink) {
+  const glyphs = Array.from(text);
+  const runs = [];
+  glyphs.forEach((glyph, c) => {
+    const letter = ink[c] ?? " ";
+    const last = runs[runs.length - 1];
+    if (last !== void 0 && last.ink === letter) last.text += glyph;
+    else runs.push({ ink: letter, text: glyph });
+  });
+  return runs;
+}
+function Wordmark({ rows, pulse = false }) {
+  const tone = (0, import_tone.useTone)();
+  const caps = (0, import_caps.useCaps)();
+  const art = (0, import_wordmark.pickWordmark)((0, import_wordmark.wordmarkTier)(caps), Math.max(1, rows));
+  const animate = pulse && caps.motion === "full";
+  const tick = (0, import_useAnimationTick.useAnimationTick)({ enabled: animate, intervalMs: 80 });
+  const ink = animate ? (0, import_wordmark.pulseInk)(art, tick / PULSE_CYCLE_TICKS) : art.ink;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", flexShrink: 0, children: art.text.map((line, r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: inkRuns(line, ink[r] ?? "").map((run, i) => {
+    const role = WORDMARK_INK[run.ink];
+    return role === void 0 ? run.text : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone(role), children: run.text }, i);
+  }) }, r)) });
+}
+function CutText({ text, role = "hi" }) {
+  const tone = (0, import_tone.useTone)();
+  const caps = (0, import_caps.useCaps)();
+  if (caps.glyphs === "ascii") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { height: 3, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone(role), children: text.toUpperCase() }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", flexShrink: 0, children: (0, import_cut.cutLines)(text).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone(role), children: line }, i)) });
+}
+const DECK_MODES = {
+  idle: { label: "READY", role: "tealDim" },
+  think: { label: "THINKING", role: "teal" },
+  stream: { label: "STREAMING", role: "teal" },
+  tool: { label: "WORKING", role: "teal" },
+  cloud: { label: "CLOUD", role: "cloud" },
+  wait: { label: "NEEDS YOU", role: "amber" },
+  fault: { label: "FAULT", role: "red" },
+  stop: { label: "STOPPED", role: "dim" },
+  steer: { label: "STEERING", role: "amber" },
+  offline: { label: "LOCAL ONLY", role: "dim" },
+  handoff: { label: "HANDING OFF", role: "cloud" },
+  attached: { label: "ATTACHED", role: "cloud" },
+  done: { label: "DONE", role: "tealDim" }
+};
+function Deck({ state, gate, collapsed, paused, children }) {
+  const tone = (0, import_tone.useTone)();
+  const caps = (0, import_caps.useCaps)();
+  const { stdout } = (0, import_ink.useStdout)();
+  const [columns, setColumns] = (0, import_react.useState)(stdout.columns || 80);
+  (0, import_react.useEffect)(() => {
+    const onResize = () => setColumns(stdout.columns || 80);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  const wordmarkColumns = (0, import_wordmark.pickWordmark)((0, import_wordmark.wordmarkTier)(caps), 3).cols + 3;
+  const layout = (0, import_deck_layout.deckLayout)(columns, wordmarkColumns);
+  const bare = layout.band === "bare";
+  const mode = DECK_MODES[state.mode];
+  const kind = (0, import_trace.traceKind)(state.mode);
+  const traceRef = (0, import_react.useRef)(null);
+  const [measured, setMeasured] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (traceRef.current === null) return;
+    const { width } = (0, import_ink.measureElement)(traceRef.current);
+    if (width !== measured) setMeasured(width);
+  });
+  const estimate = columns - (bare ? 0 : wordmarkColumns) - (layout.blockWidth > 0 ? layout.blockWidth + 4 : 0);
+  const traceWidth = measured ?? Math.max(4, estimate);
+  const history = (0, import_use_trace.useTrace)(kind, traceWidth, paused);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", flexShrink: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { height: collapsed ? 0 : layout.bandRows, flexShrink: 0, overflow: "hidden", children: [
+      !bare && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginLeft: 1, marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wordmark, { rows: 3, pulse: state.mode === "think" && !paused }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ink.Box,
+        {
+          ref: traceRef,
+          flexDirection: "column",
+          flexGrow: 1,
+          flexShrink: 1,
+          overflow: "hidden",
+          children: [
+            layout.band === "mid" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { justifyContent: "flex-end", height: 1, 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: tone(mode.role), children: mode.label }),
+              state.readout !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_glyphs.glyphText)(` \xB7 ${state.readout}`, caps.glyphs) })
+            ] }) }),
+            layout.band === "wide" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { height: 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_deck_parts.TraceView, { history, width: traceWidth, height: 2 })
+          ]
+        }
+      ),
+      layout.band === "wide" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginLeft: 3, marginRight: 1, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_deck_parts.StatusBlock,
+        {
+          label: mode.label,
+          labelColor: tone(mode.role),
+          readout: state.readout,
+          status: state.status,
+          width: layout.blockWidth
+        }
+      ) })
+    ] }),
+    gate,
+    children,
+    layout.statusRow && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_deck_parts.StatusRow,
+      {
+        status: state.status,
+        width: columns,
+        notice: bare && state.readout !== null ? { text: state.readout, color: tone(mode.role) } : null
+      }
+    )
+  ] });
+}
+const ACTOR_ROLE = { you: "hi", agent: "teal", cloud: "cloud" };
+const ACTOR_LABEL = {
+  you: "YOU",
+  agent: "AGENT",
+  cloud: "CLOUD"
+};
+function actorMarginWidth(columns) {
+  return columns >= 64 ? 8 : 2;
+}
+function ActorRow({ actor, label, children }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  const { stdout } = (0, import_ink.useStdout)();
+  const margin = actorMarginWidth(stdout.columns || 80);
+  const role = ACTOR_ROLE[actor];
+  const head = margin >= 8 ? label ?? ACTOR_LABEL[actor] : actor === "you" ? "\u203A" : "\u25AA";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: margin, flexShrink: 0, paddingRight: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone(role), wrap: "truncate-end", children: (0, import_glyphs.glyphText)(margin >= 8 ? ` ${head}` : head, glyphs) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", flexGrow: 1, children })
+  ] });
+}
+const STEP_WORD = {
+  fail: "FAIL",
+  deny: "DENIED",
+  wait: "NEEDS YOU",
+  ask: "ASKING",
+  skip: "SKIPPED",
+  queue: "QUEUED",
+  stop: "STOPPED"
+};
+function stepRole(step) {
+  if (step.state === "fail") return "red";
+  if (step.state === "deny" || step.state === "wait" || step.state === "ask") return "amber";
+  if (step.cloud) return "cloud";
+  if (step.state === "queue" || step.state === "skip") return "faint";
+  return "teal";
+}
+function stepGlyph(step) {
+  if (step.cloud) return "\u25C6";
+  if (step.state === "run" || step.state === "wait" || step.state === "ask") return "\u25B8";
+  if (step.state === "skip" || step.state === "queue") return "\u25AB";
+  return "\u25AA";
+}
+function DetailText({ detail }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: detail.split(/(\+\d+|−\d+)/).map((part, i) => {
+    const role = /^\+\d/.test(part) ? "add" : /^−\d/.test(part) ? "del" : "dim";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone(role), children: (0, import_glyphs.glyphText)(part, glyphs) }, i);
+  }) });
+}
+function StepRow({ step }) {
+  const tone = (0, import_tone.useTone)();
+  const role = stepRole(step);
+  const quiet = step.state === "queue" || step.state === "skip";
+  const word = STEP_WORD[step.state];
+  const { glyphs } = (0, import_caps.useCaps)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: 2, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone(role), children: (0, import_glyphs.glyphText)(stepGlyph(step), glyphs) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { width: 8, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone(quiet ? "dim" : step.cloud ? "cloud" : "hi"), children: step.verb }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone(quiet ? "dim" : "fg"), wrap: "truncate-end", children: (0, import_glyphs.glyphText)(step.target, glyphs) }) }),
+    step.detail !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexShrink: 2, marginLeft: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { wrap: "truncate-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailText, { detail: step.detail }) }) }),
+    step.time !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexShrink: 0, marginLeft: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("faint"), children: (0, import_glyphs.glyphText)(step.time, glyphs) }) }),
+    word !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexShrink: 0, marginLeft: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone(role), children: word }) })
+  ] });
+}
+function GateFrame({ title, role = "amber", hint, children }) {
+  const tone = (0, import_tone.useTone)();
+  const { glyphs } = (0, import_caps.useCaps)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ink.Box,
+    {
+      flexDirection: "column",
+      borderStyle: glyphs === "ascii" ? "classic" : "round",
+      borderColor: tone(role),
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone(role), children: (0, import_glyphs.glyphText)(title, glyphs) }),
+        children,
+        hint !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_glyphs.glyphText)(hint, glyphs) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ActorRow,
+  CutText,
+  DECK_MODES,
+  Deck,
+  GateFrame,
+  StepRow,
+  Wordmark,
+  actorMarginWidth
+});

package/dist/signal/components.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Signal kit parts. The prop types here are the contract the deck, transcript and view owners
+ * build against; the bodies are first cuts that later work replaces in place.
+ */
+import { type ReactNode } from 'react';
+import { type Role } from './tone.js';
+export interface WordmarkProps {
+    /** Height in rows. The wordmark picks the largest drawing that fits. */
+    rows: number;
+    /** Light the mark in travelling rings (the agent is thinking). */
+    pulse?: boolean;
+}
+/** The Dexto logo: the mark in teal (thin arcs dimmer), the word in the reading colour. */
+export declare function Wordmark({ rows, pulse }: WordmarkProps): import("react/jsx-runtime").JSX.Element;
+export interface CutTextProps {
+    text: string;
+    role?: Role;
+}
+/** A title in cut type, 3 rows tall. ASCII terminals get the plain word. */
+export declare function CutText({ text, role }: CutTextProps): import("react/jsx-runtime").JSX.Element;
+export type DeckMode = 'idle' | 'think' | 'stream' | 'tool' | 'cloud' | 'wait' | 'fault' | 'stop' | 'steer' | 'offline' | 'handoff' | 'attached' | 'done';
+/** The word the deck shows for each mode, and its role. */
+export declare const DECK_MODES: Readonly<Record<DeckMode, {
+    label: string;
+    role: Role;
+}>>;
+/** Where the agent runs: this machine, or a named Dexto cloud computer. */
+export type DeckWhere = {
+    kind: 'local';
+} | {
+    kind: 'computer';
+    name: string;
+};
+/** Dexto credits as the status line shows them. */
+export type DeckCredits = {
+    kind: 'signed-out';
+}
+/** Signed in; balance not known yet (loading, or the request failed). */
+ | {
+    kind: 'signed-in';
+} | {
+    kind: 'balance';
+    balance: number;
+    spend: number | null;
+} | {
+    kind: 'out';
+};
+export interface DeckStatus {
+    /** Model id as the user picked it, e.g. "dexto/sonnet-5.5" or "anthropic/claude-…". */
+    model: string;
+    contextUsedTokens: number | null;
+    contextMaxTokens: number | null;
+    where: DeckWhere;
+    branch: string | null;
+    dirtyFiles: number;
+    credits: DeckCredits;
+}
+export interface DeckState {
+    mode: DeckMode;
+    /** Short live readout beside the mode, e.g. "paused 0:14" or "diff · 2 files". */
+    readout: string | null;
+    status: DeckStatus;
+}
+export interface DeckProps {
+    state: DeckState;
+    /** An approval or question, drawn between the band and the input. */
+    gate?: ReactNode;
+    /** Draw only the gate and input, for overlays that budget for the whole screen. */
+    collapsed: boolean;
+    /** Hold the animations still, so text in the live region can be selected. */
+    paused: boolean;
+    /** The input row. */
+    children: ReactNode;
+}
+/**
+ * The slim band under the transcript: wordmark, live trace, status; then gate and input.
+ * It steps down with width (see `deckLayout`): 4 rows wide, 5 in the middle, 4 when bare.
+ */
+export declare function Deck({ state, gate, collapsed, paused, children }: DeckProps): import("react/jsx-runtime").JSX.Element;
+export type ActorKind = 'you' | 'agent' | 'cloud';
+/** Margin width: an 8-column ship's-log margin at 64 columns and up, a glyph below that. */
+export declare function actorMarginWidth(columns: number): number;
+export interface ActorRowProps {
+    actor: ActorKind;
+    /** Overrides the actor's default label (a teammate's name, a cloud agent's name). Six cells show. */
+    label?: string;
+    children: ReactNode;
+}
+/** A transcript block with the actor in the left margin. */
+export declare function ActorRow({ actor, label, children }: ActorRowProps): import("react/jsx-runtime").JSX.Element;
+export type StepState = 'ok' | 'run' | 'fail' | 'deny' | 'skip' | 'queue' | 'stop' | 'wait' | 'ask';
+export interface Step {
+    state: StepState;
+    /** Upper-case verb, up to 7 cells: READ, EDIT, RUN, SEARCH… */
+    verb: string;
+    target: string;
+    /** "+12 −3", "staging database"; +N and −N are coloured. */
+    detail: string | null;
+    /** Elapsed time, already formatted ("0.4s"). */
+    time: string | null;
+    /** Ran on Dexto cloud. */
+    cloud: boolean;
+}
+export interface StepRowProps {
+    step: Step;
+}
+/** One tool call as one fixed-column row: glyph · VERB · target · detail · time · state word. */
+export declare function StepRow({ step }: StepRowProps): import("react/jsx-runtime").JSX.Element;
+export interface GateFrameProps {
+    /** e.g. "NEEDS YOU · RUN A COMMAND" or "QUESTION · How long…". */
+    title: string;
+    /** amber: waiting on you. red: a fault you must act on. */
+    role?: 'amber' | 'red';
+    /** Key hints for the bottom edge, "⏎ answer · esc let it decide". */
+    hint?: string;
+    children: ReactNode;
+}
+/** The frame around anything that waits on the user: approvals, questions, steer. */
+export declare function GateFrame({ title, role, hint, children }: GateFrameProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=components.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/signal/components.tsx"],"names":[],"mappings":"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"}

package/dist/signal/components.js

@@ -0,0 +1,226 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text, measureElement, useStdout } from "ink";
+import { useAnimationTick } from "../hooks/useAnimationTick.js";
+import { useCaps } from "./caps.js";
+import { glyphText } from "./glyphs.js";
+import { cutLines } from "./cut.js";
+import { useTone } from "./tone.js";
+import { deckLayout } from "./deck-layout.js";
+import { StatusBlock, StatusRow, TraceView } from "./deck-parts.js";
+import { traceKind } from "./trace.js";
+import { useTrace } from "./use-trace.js";
+import { pickWordmark, pulseInk, wordmarkTier } from "./wordmark.js";
+const WORDMARK_INK = { m: "teal", f: "tealDim", w: "hi" };
+const PULSE_CYCLE_TICKS = 15;
+function inkRuns(text, ink) {
+  const glyphs = Array.from(text);
+  const runs = [];
+  glyphs.forEach((glyph, c) => {
+    const letter = ink[c] ?? " ";
+    const last = runs[runs.length - 1];
+    if (last !== void 0 && last.ink === letter) last.text += glyph;
+    else runs.push({ ink: letter, text: glyph });
+  });
+  return runs;
+}
+function Wordmark({ rows, pulse = false }) {
+  const tone = useTone();
+  const caps = useCaps();
+  const art = pickWordmark(wordmarkTier(caps), Math.max(1, rows));
+  const animate = pulse && caps.motion === "full";
+  const tick = useAnimationTick({ enabled: animate, intervalMs: 80 });
+  const ink = animate ? pulseInk(art, tick / PULSE_CYCLE_TICKS) : art.ink;
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexShrink: 0, children: art.text.map((line, r) => /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: inkRuns(line, ink[r] ?? "").map((run, i) => {
+    const role = WORDMARK_INK[run.ink];
+    return role === void 0 ? run.text : /* @__PURE__ */ jsx(Text, { color: tone(role), children: run.text }, i);
+  }) }, r)) });
+}
+function CutText({ text, role = "hi" }) {
+  const tone = useTone();
+  const caps = useCaps();
+  if (caps.glyphs === "ascii") {
+    return /* @__PURE__ */ jsx(Box, { height: 3, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone(role), children: text.toUpperCase() }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexShrink: 0, children: cutLines(text).map((line, i) => /* @__PURE__ */ jsx(Text, { color: tone(role), children: line }, i)) });
+}
+const DECK_MODES = {
+  idle: { label: "READY", role: "tealDim" },
+  think: { label: "THINKING", role: "teal" },
+  stream: { label: "STREAMING", role: "teal" },
+  tool: { label: "WORKING", role: "teal" },
+  cloud: { label: "CLOUD", role: "cloud" },
+  wait: { label: "NEEDS YOU", role: "amber" },
+  fault: { label: "FAULT", role: "red" },
+  stop: { label: "STOPPED", role: "dim" },
+  steer: { label: "STEERING", role: "amber" },
+  offline: { label: "LOCAL ONLY", role: "dim" },
+  handoff: { label: "HANDING OFF", role: "cloud" },
+  attached: { label: "ATTACHED", role: "cloud" },
+  done: { label: "DONE", role: "tealDim" }
+};
+function Deck({ state, gate, collapsed, paused, children }) {
+  const tone = useTone();
+  const caps = useCaps();
+  const { stdout } = useStdout();
+  const [columns, setColumns] = useState(stdout.columns || 80);
+  useEffect(() => {
+    const onResize = () => setColumns(stdout.columns || 80);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  const wordmarkColumns = pickWordmark(wordmarkTier(caps), 3).cols + 3;
+  const layout = deckLayout(columns, wordmarkColumns);
+  const bare = layout.band === "bare";
+  const mode = DECK_MODES[state.mode];
+  const kind = traceKind(state.mode);
+  const traceRef = useRef(null);
+  const [measured, setMeasured] = useState(null);
+  useEffect(() => {
+    if (traceRef.current === null) return;
+    const { width } = measureElement(traceRef.current);
+    if (width !== measured) setMeasured(width);
+  });
+  const estimate = columns - (bare ? 0 : wordmarkColumns) - (layout.blockWidth > 0 ? layout.blockWidth + 4 : 0);
+  const traceWidth = measured ?? Math.max(4, estimate);
+  const history = useTrace(kind, traceWidth, paused);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs(Box, { height: collapsed ? 0 : layout.bandRows, flexShrink: 0, overflow: "hidden", children: [
+      !bare && /* @__PURE__ */ jsx(Box, { marginLeft: 1, marginRight: 2, flexShrink: 0, children: /* @__PURE__ */ jsx(Wordmark, { rows: 3, pulse: state.mode === "think" && !paused }) }),
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          ref: traceRef,
+          flexDirection: "column",
+          flexGrow: 1,
+          flexShrink: 1,
+          overflow: "hidden",
+          children: [
+            layout.band === "mid" && /* @__PURE__ */ jsx(Box, { justifyContent: "flex-end", height: 1, children: /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+              /* @__PURE__ */ jsx(Text, { bold: true, color: tone(mode.role), children: mode.label }),
+              state.readout !== null && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(` \xB7 ${state.readout}`, caps.glyphs) })
+            ] }) }),
+            layout.band === "wide" && /* @__PURE__ */ jsx(Box, { height: 1 }),
+            /* @__PURE__ */ jsx(TraceView, { history, width: traceWidth, height: 2 })
+          ]
+        }
+      ),
+      layout.band === "wide" && /* @__PURE__ */ jsx(Box, { marginLeft: 3, marginRight: 1, flexShrink: 0, children: /* @__PURE__ */ jsx(
+        StatusBlock,
+        {
+          label: mode.label,
+          labelColor: tone(mode.role),
+          readout: state.readout,
+          status: state.status,
+          width: layout.blockWidth
+        }
+      ) })
+    ] }),
+    gate,
+    children,
+    layout.statusRow && !collapsed && /* @__PURE__ */ jsx(
+      StatusRow,
+      {
+        status: state.status,
+        width: columns,
+        notice: bare && state.readout !== null ? { text: state.readout, color: tone(mode.role) } : null
+      }
+    )
+  ] });
+}
+const ACTOR_ROLE = { you: "hi", agent: "teal", cloud: "cloud" };
+const ACTOR_LABEL = {
+  you: "YOU",
+  agent: "AGENT",
+  cloud: "CLOUD"
+};
+function actorMarginWidth(columns) {
+  return columns >= 64 ? 8 : 2;
+}
+function ActorRow({ actor, label, children }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const { stdout } = useStdout();
+  const margin = actorMarginWidth(stdout.columns || 80);
+  const role = ACTOR_ROLE[actor];
+  const head = margin >= 8 ? label ?? ACTOR_LABEL[actor] : actor === "you" ? "\u203A" : "\u25AA";
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { width: margin, flexShrink: 0, paddingRight: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone(role), wrap: "truncate-end", children: glyphText(margin >= 8 ? ` ${head}` : head, glyphs) }) }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexGrow: 1, children })
+  ] });
+}
+const STEP_WORD = {
+  fail: "FAIL",
+  deny: "DENIED",
+  wait: "NEEDS YOU",
+  ask: "ASKING",
+  skip: "SKIPPED",
+  queue: "QUEUED",
+  stop: "STOPPED"
+};
+function stepRole(step) {
+  if (step.state === "fail") return "red";
+  if (step.state === "deny" || step.state === "wait" || step.state === "ask") return "amber";
+  if (step.cloud) return "cloud";
+  if (step.state === "queue" || step.state === "skip") return "faint";
+  return "teal";
+}
+function stepGlyph(step) {
+  if (step.cloud) return "\u25C6";
+  if (step.state === "run" || step.state === "wait" || step.state === "ask") return "\u25B8";
+  if (step.state === "skip" || step.state === "queue") return "\u25AB";
+  return "\u25AA";
+}
+function DetailText({ detail }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  return /* @__PURE__ */ jsx(Fragment, { children: detail.split(/(\+\d+|−\d+)/).map((part, i) => {
+    const role = /^\+\d/.test(part) ? "add" : /^−\d/.test(part) ? "del" : "dim";
+    return /* @__PURE__ */ jsx(Text, { color: tone(role), children: glyphText(part, glyphs) }, i);
+  }) });
+}
+function StepRow({ step }) {
+  const tone = useTone();
+  const role = stepRole(step);
+  const quiet = step.state === "queue" || step.state === "skip";
+  const word = STEP_WORD[step.state];
+  const { glyphs } = useCaps();
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { width: 2, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { color: tone(role), children: glyphText(stepGlyph(step), glyphs) }) }),
+    /* @__PURE__ */ jsx(Box, { width: 8, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone(quiet ? "dim" : step.cloud ? "cloud" : "hi"), children: step.verb }) }),
+    /* @__PURE__ */ jsx(Box, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx(Text, { color: tone(quiet ? "dim" : "fg"), wrap: "truncate-end", children: glyphText(step.target, glyphs) }) }),
+    step.detail !== null && /* @__PURE__ */ jsx(Box, { flexShrink: 2, marginLeft: 1, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: /* @__PURE__ */ jsx(DetailText, { detail: step.detail }) }) }),
+    step.time !== null && /* @__PURE__ */ jsx(Box, { flexShrink: 0, marginLeft: 1, children: /* @__PURE__ */ jsx(Text, { color: tone("faint"), children: glyphText(step.time, glyphs) }) }),
+    word !== void 0 && /* @__PURE__ */ jsx(Box, { flexShrink: 0, marginLeft: 2, children: /* @__PURE__ */ jsx(Text, { bold: true, color: tone(role), children: word }) })
+  ] });
+}
+function GateFrame({ title, role = "amber", hint, children }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      borderStyle: glyphs === "ascii" ? "classic" : "round",
+      borderColor: tone(role),
+      paddingX: 1,
+      children: [
+        /* @__PURE__ */ jsx(Text, { bold: true, color: tone(role), children: glyphText(title, glyphs) }),
+        children,
+        hint !== void 0 && /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(hint, glyphs) })
+      ]
+    }
+  );
+}
+export {
+  ActorRow,
+  CutText,
+  DECK_MODES,
+  Deck,
+  GateFrame,
+  StepRow,
+  Wordmark,
+  actorMarginWidth
+};