@dexto/tui 1.14.6 → 1.15.0-beta.1

package/dist/signal/deck.test.cjs

@@ -0,0 +1,311 @@
+"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 __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 import_react = require("react");
+var import_node_stream = require("node:stream");
+var import_ink = require("ink");
+var import_strip_ansi = __toESM(require("strip-ansi"), 1);
+var import_vitest = require("vitest");
+var import_caps = require("./caps.js");
+var import_components = require("./components.js");
+var import_deck_layout = require("./deck-layout.js");
+var import_deck_parts = require("./deck-parts.js");
+function recordingStdout(columns) {
+  const writes = [];
+  const stdout = Object.assign(new import_node_stream.PassThrough(), { columns, rows: 40, isTTY: false });
+  stdout.write = ((chunk) => {
+    writes.push(String(chunk));
+    return true;
+  });
+  return { stdout, writes };
+}
+async function frame(element, columns) {
+  const { stdout, writes } = recordingStdout(columns);
+  const view = (0, import_ink.render)(element, { stdout, debug: true, patchConsole: false, exitOnCtrlC: false });
+  await new Promise((resolve) => setTimeout(resolve, 20));
+  view.unmount();
+  const last = writes.filter((w) => w.trim() !== "").at(-1) ?? "";
+  return (0, import_strip_ansi.default)(last).replace(/\n+$/, "");
+}
+const WORDMARK = 42;
+const state = {
+  mode: "stream",
+  readout: "84 tok/s \xB7 12.4s",
+  status: {
+    model: "dexto/sonnet-5.5",
+    contextUsedTokens: 46e3,
+    contextMaxTokens: 2e5,
+    where: { kind: "local" },
+    branch: "main",
+    dirtyFiles: 3,
+    credits: { kind: "balance", balance: 12.84, spend: null }
+  }
+};
+function deck(s = state, gate = null, paused = false) {
+  const children = (0, import_react.createElement)(import_ink.Text, null, "\u203A ask");
+  return (0, import_react.createElement)(
+    import_components.Deck,
+    gate === null ? { state: s, collapsed: false, paused, children } : { state: s, gate, collapsed: false, paused, children }
+  );
+}
+(0, import_vitest.describe)("deckLayout", () => {
+  (0, import_vitest.it)("steps down from a status block to a status row to a bare trace", () => {
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(120, WORDMARK)).toMatchObject({
+      band: "wide",
+      bandRows: 3,
+      statusRow: false
+    });
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(78, WORDMARK)).toMatchObject({
+      band: "mid",
+      bandRows: 3,
+      statusRow: true
+    });
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(42, WORDMARK)).toMatchObject({
+      band: "bare",
+      bandRows: 2,
+      statusRow: true
+    });
+  });
+  (0, import_vitest.it)("keeps the deck to four or five rows with a one-line input", () => {
+    const rows = (cols) => {
+      const l = (0, import_deck_layout.deckLayout)(cols, WORDMARK);
+      return l.bandRows + 1 + (l.statusRow ? 1 : 0);
+    };
+    (0, import_vitest.expect)(rows(120)).toBe(4);
+    (0, import_vitest.expect)(rows(78)).toBe(5);
+    (0, import_vitest.expect)(rows(42)).toBe(4);
+  });
+  (0, import_vitest.it)("goes bare when the wordmark would leave no room for the mode and readout", () => {
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(66, WORDMARK).band).toBe("mid");
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(65, WORDMARK).band).toBe("bare");
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(50, WORDMARK).band).toBe("bare");
+  });
+  (0, import_vitest.it)("sizes the status block between 30 and 36 columns", () => {
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(100, WORDMARK).blockWidth).toBe(30);
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(200, WORDMARK).blockWidth).toBe(36);
+    (0, import_vitest.expect)((0, import_deck_layout.deckLayout)(80, WORDMARK).blockWidth).toBe(0);
+  });
+});
+(0, import_vitest.describe)("laneParts", () => {
+  (0, import_vitest.it)("drops the dirty count first, then the branch", () => {
+    const status = state.status;
+    (0, import_vitest.expect)((0, import_deck_parts.laneParts)(status, 28)).toEqual({ branch: true, dirty: true, spend: false });
+    (0, import_vitest.expect)((0, import_deck_parts.laneParts)(status, 27)).toEqual({ branch: true, dirty: false, spend: false });
+    (0, import_vitest.expect)((0, import_deck_parts.laneParts)(status, 24)).toEqual({ branch: false, dirty: false, spend: false });
+  });
+  (0, import_vitest.it)("drops this turn's spend last", () => {
+    const status = {
+      ...state.status,
+      credits: { kind: "balance", balance: 12.84, spend: 0.31 }
+    };
+    (0, import_vitest.expect)((0, import_deck_parts.laneParts)(status, 25)).toEqual({ branch: false, dirty: false, spend: true });
+    (0, import_vitest.expect)((0, import_deck_parts.laneParts)(status, 24)).toEqual({ branch: false, dirty: false, spend: false });
+  });
+});
+(0, import_vitest.describe)("statusRowFit", () => {
+  const status = { ...state.status, model: "dexto/anthropic/claude-sonnet-4.5" };
+  (0, import_vitest.it)("reserves the lane and lets the model truncate", () => {
+    (0, import_vitest.expect)((0, import_deck_parts.statusRowFit)(status, 42, 0)).toEqual({ notice: 0, model: 22, lane: 18 });
+  });
+  (0, import_vitest.it)("hides the model rather than show a stub", () => {
+    (0, import_vitest.expect)((0, import_deck_parts.statusRowFit)(status, 42, 17)).toEqual({ notice: 17, model: 0, lane: 23 });
+  });
+  (0, import_vitest.it)("truncates a long notice rather than the lane", () => {
+    (0, import_vitest.expect)((0, import_deck_parts.statusRowFit)(status, 42, 23)).toEqual({ notice: 22, model: 0, lane: 18 });
+  });
+  (0, import_vitest.it)("hides the notice when a stub is all that fits", () => {
+    (0, import_vitest.expect)((0, import_deck_parts.statusRowFit)(status, 22, 12)).toEqual({ notice: 0, model: 0, lane: 22 });
+  });
+  (0, import_vitest.it)("gives the lane whatever the model leaves", () => {
+    (0, import_vitest.expect)((0, import_deck_parts.statusRowFit)(state.status, 120, 0)).toEqual({ notice: 0, model: 21, lane: 97 });
+  });
+});
+(0, import_vitest.describe)("formatTokens", () => {
+  (0, import_vitest.it)("reads like 46k, 1.2M and 850", () => {
+    (0, import_vitest.expect)((0, import_deck_layout.formatTokens)(46e3)).toBe("46k");
+    (0, import_vitest.expect)((0, import_deck_layout.formatTokens)(12e5)).toBe("1.2M");
+    (0, import_vitest.expect)((0, import_deck_layout.formatTokens)(850)).toBe("850");
+  });
+});
+(0, import_vitest.describe)("Deck", () => {
+  let saved;
+  (0, import_vitest.beforeEach)(() => {
+    saved = (0, import_caps.getCaps)();
+    (0, import_caps.setCaps)({ ...saved, color: "none", glyphs: "unicode", motion: "reduced" });
+  });
+  (0, import_vitest.afterEach)(() => (0, import_caps.setCaps)(saved));
+  (0, import_vitest.it)("is four rows at 120 columns, with the status block beside the trace", async () => {
+    const out = await frame(deck(), 120);
+    const lines = out.split("\n");
+    (0, import_vitest.expect)(lines).toHaveLength(4);
+    (0, import_vitest.expect)(lines[0]).toMatch(/STREAMING · 84 tok\/s · 12\.4s\s*$/);
+    (0, import_vitest.expect)(lines[1]).toMatch(/dexto\/sonnet-5\.5\s+46k\/200k\s*$/);
+    (0, import_vitest.expect)(lines[2]).toMatch(/◇ local ⎇ main ±3 · ◆ \$12\.84\s*$/);
+    (0, import_vitest.expect)(lines[3]).toBe("\u203A ask");
+  });
+  (0, import_vitest.it)("moves the status to a compact row under the input below 100 columns", async () => {
+    const out = await frame(deck(), 78);
+    const lines = out.split("\n");
+    (0, import_vitest.expect)(lines).toHaveLength(5);
+    (0, import_vitest.expect)(lines[0]).toMatch(/STREAMING · 84 tok\/s · 12\.4s\s*$/);
+    (0, import_vitest.expect)(lines[3]).toBe("\u203A ask");
+    (0, import_vitest.expect)(lines[4]).toMatch(/^dexto\/sonnet-5\.5\s+46k\s+◇ local ⎇ main ±3 · ◆ \$12\.84/);
+  });
+  (0, import_vitest.it)("drops the wordmark below 44 columns and keeps the trace", async () => {
+    const out = await frame(deck(), 42);
+    const lines = out.split("\n");
+    (0, import_vitest.expect)(lines).toHaveLength(4);
+    (0, import_vitest.expect)(out).not.toContain("dexto ");
+    (0, import_vitest.expect)(lines[0]).toMatch(/[▁-█]/);
+    (0, import_vitest.expect)(lines[2]).toBe("\u203A ask");
+    (0, import_vitest.expect)(lines[3]).toMatch(/^84 tok\/s · 12\.4s\s+46k\s+◇ local · ◆ \$12\.84$/);
+  });
+  (0, import_vitest.it)("keeps the readout, and so the permission mode, in the middle step", async () => {
+    const out = await frame(deck({ ...state, mode: "idle", readout: "plan mode" }), 78);
+    (0, import_vitest.expect)(out.split("\n")[0]).toMatch(/READY · plan mode\s*$/);
+  });
+  (0, import_vitest.it)("leads the bare status row with the readout and never cuts the lane", async () => {
+    const long = {
+      ...state,
+      mode: "idle",
+      readout: "auto-approve",
+      status: { ...state.status, model: "dexto/anthropic/claude-sonnet-4.5" }
+    };
+    const row = (await frame(deck(long), 42)).split("\n")[3] ?? "";
+    (0, import_vitest.expect)(row).toMatch(/^auto-approve\s+46k\s+◇ local · ◆ \$12\.84$/);
+    const plain = (await frame(deck({ ...long, readout: null }), 42)).split("\n")[3] ?? "";
+    (0, import_vitest.expect)(plain).toMatch(/^dexto\/anthropic.*…\s+46k\s+◇ local · ◆ \$12\.84$/);
+  });
+  (0, import_vitest.it)("keeps the lane whole beside a notice too long to fit", async () => {
+    const long = { ...state, mode: "idle", readout: "auto-approve \xB7 r:medium" };
+    const row = (await frame(deck(long), 42)).split("\n")[3] ?? "";
+    (0, import_vitest.expect)(row).toMatch(/^auto-approve · r:medi…\s+◇ local · ◆ \$12\.84$/);
+  });
+  (0, import_vitest.it)("draws only the input when collapsed, leaving it mounted", async () => {
+    const collapsed = (0, import_react.createElement)(import_components.Deck, {
+      state,
+      collapsed: true,
+      paused: false,
+      children: (0, import_react.createElement)(import_ink.Text, null, "INPUT")
+    });
+    (0, import_vitest.expect)(await frame(collapsed, 120)).toBe("INPUT");
+  });
+  (0, import_vitest.it)("keeps context use visible beside a long model id", async () => {
+    const long = {
+      ...state,
+      status: { ...state.status, model: "anthropic/claude-sonnet-4-5-20250929" }
+    };
+    const lines = (await frame(deck(long), 120)).split("\n");
+    (0, import_vitest.expect)(lines[1]).toMatch(/anthropic\/claude-\S*…\s+46k\/200k\s*$/);
+  });
+  (0, import_vitest.it)("slots a gate between the band and the input", async () => {
+    const out = await frame(deck(state, (0, import_react.createElement)(import_ink.Text, null, "GATE")), 120);
+    const lines = out.split("\n");
+    (0, import_vitest.expect)(lines[3]).toBe("GATE");
+    (0, import_vitest.expect)(lines[4]).toBe("\u203A ask");
+  });
+  (0, import_vitest.it)("says when you are signed out, out of credits, or on a cloud computer", async () => {
+    const signedOut = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "signed-out" } } }),
+      120
+    );
+    (0, import_vitest.expect)(signedOut).toContain("\xB7 cloud off");
+    const loading = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "signed-in" } } }),
+      120
+    );
+    (0, import_vitest.expect)(loading).toMatch(/◇ local ⎇ main ±3 · ◆\s*$/m);
+    const out = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "out" } } }),
+      120
+    );
+    (0, import_vitest.expect)(out).toContain("out of credits");
+    const cloud = await frame(
+      deck({
+        ...state,
+        status: { ...state.status, where: { kind: "computer", name: "dx-7f3a" } }
+      }),
+      120
+    );
+    (0, import_vitest.expect)(cloud).toContain("\u25C6 dx-7f3a");
+  });
+  (0, import_vitest.it)("leaves out what it does not know", async () => {
+    const out = await frame(
+      deck({
+        mode: "idle",
+        readout: null,
+        status: {
+          ...state.status,
+          model: "gpt-5",
+          contextUsedTokens: null,
+          contextMaxTokens: null,
+          branch: null,
+          dirtyFiles: 0
+        }
+      }),
+      120
+    );
+    const lines = out.split("\n");
+    (0, import_vitest.expect)(lines[0]).toMatch(/READY\s*$/);
+    (0, import_vitest.expect)(lines[1]).toMatch(/gpt-5\s*$/);
+    (0, import_vitest.expect)(lines[2]).toMatch(/◇ local · ◆ \$12\.84\s*$/);
+  });
+  (0, import_vitest.it)("falls back to ASCII glyphs", async () => {
+    (0, import_caps.setCaps)({ ...(0, import_caps.getCaps)(), glyphs: "ascii" });
+    const out = await frame(deck(), 120);
+    (0, import_vitest.expect)(out).toContain("o local @ main +3 . * $12.84");
+    (0, import_vitest.expect)(out).not.toMatch(/[▁-█◇◆⎇]/);
+  });
+});
+(0, import_vitest.describe)("Deck trace clock", () => {
+  let saved;
+  (0, import_vitest.beforeEach)(() => {
+    saved = (0, import_caps.getCaps)();
+    (0, import_caps.setCaps)({ ...saved, color: "none", glyphs: "unicode", motion: "full" });
+  });
+  (0, import_vitest.afterEach)(() => (0, import_caps.setCaps)(saved));
+  async function framesOver(s, ms, paused = false) {
+    const { stdout, writes } = recordingStdout(120);
+    const view = (0, import_ink.render)(deck(s, null, paused), {
+      stdout,
+      debug: true,
+      patchConsole: false,
+      exitOnCtrlC: false
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const settled = writes.length;
+    await new Promise((resolve) => setTimeout(resolve, ms));
+    const written = writes.length - settled;
+    view.unmount();
+    return written;
+  }
+  (0, import_vitest.it)("scrolls while the agent works", async () => {
+    (0, import_vitest.expect)(await framesOver(state, 350)).toBeGreaterThanOrEqual(2);
+  });
+  (0, import_vitest.it)("holds trace and wordmark still while paused for copy mode", async () => {
+    (0, import_vitest.expect)(await framesOver({ ...state, mode: "think" }, 350, true)).toBe(0);
+  });
+  (0, import_vitest.it)("writes nothing while the session sits idle", async () => {
+    (0, import_vitest.expect)(await framesOver({ ...state, mode: "idle", readout: null }, 350)).toBe(0);
+  });
+});

package/dist/signal/deck.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=deck.test.d.ts.map

package/dist/signal/deck.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deck.test.d.ts","sourceRoot":"","sources":["../../src/signal/deck.test.ts"],"names":[],"mappings":""}

package/dist/signal/deck.test.js

@@ -0,0 +1,288 @@
+import { createElement } from "react";
+import { PassThrough } from "node:stream";
+import { render, Text } from "ink";
+import stripAnsi from "strip-ansi";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { getCaps, setCaps } from "./caps.js";
+import { Deck } from "./components.js";
+import { deckLayout, formatTokens } from "./deck-layout.js";
+import { laneParts, statusRowFit } from "./deck-parts.js";
+function recordingStdout(columns) {
+  const writes = [];
+  const stdout = Object.assign(new PassThrough(), { columns, rows: 40, isTTY: false });
+  stdout.write = ((chunk) => {
+    writes.push(String(chunk));
+    return true;
+  });
+  return { stdout, writes };
+}
+async function frame(element, columns) {
+  const { stdout, writes } = recordingStdout(columns);
+  const view = render(element, { stdout, debug: true, patchConsole: false, exitOnCtrlC: false });
+  await new Promise((resolve) => setTimeout(resolve, 20));
+  view.unmount();
+  const last = writes.filter((w) => w.trim() !== "").at(-1) ?? "";
+  return stripAnsi(last).replace(/\n+$/, "");
+}
+const WORDMARK = 42;
+const state = {
+  mode: "stream",
+  readout: "84 tok/s \xB7 12.4s",
+  status: {
+    model: "dexto/sonnet-5.5",
+    contextUsedTokens: 46e3,
+    contextMaxTokens: 2e5,
+    where: { kind: "local" },
+    branch: "main",
+    dirtyFiles: 3,
+    credits: { kind: "balance", balance: 12.84, spend: null }
+  }
+};
+function deck(s = state, gate = null, paused = false) {
+  const children = createElement(Text, null, "\u203A ask");
+  return createElement(
+    Deck,
+    gate === null ? { state: s, collapsed: false, paused, children } : { state: s, gate, collapsed: false, paused, children }
+  );
+}
+describe("deckLayout", () => {
+  it("steps down from a status block to a status row to a bare trace", () => {
+    expect(deckLayout(120, WORDMARK)).toMatchObject({
+      band: "wide",
+      bandRows: 3,
+      statusRow: false
+    });
+    expect(deckLayout(78, WORDMARK)).toMatchObject({
+      band: "mid",
+      bandRows: 3,
+      statusRow: true
+    });
+    expect(deckLayout(42, WORDMARK)).toMatchObject({
+      band: "bare",
+      bandRows: 2,
+      statusRow: true
+    });
+  });
+  it("keeps the deck to four or five rows with a one-line input", () => {
+    const rows = (cols) => {
+      const l = deckLayout(cols, WORDMARK);
+      return l.bandRows + 1 + (l.statusRow ? 1 : 0);
+    };
+    expect(rows(120)).toBe(4);
+    expect(rows(78)).toBe(5);
+    expect(rows(42)).toBe(4);
+  });
+  it("goes bare when the wordmark would leave no room for the mode and readout", () => {
+    expect(deckLayout(66, WORDMARK).band).toBe("mid");
+    expect(deckLayout(65, WORDMARK).band).toBe("bare");
+    expect(deckLayout(50, WORDMARK).band).toBe("bare");
+  });
+  it("sizes the status block between 30 and 36 columns", () => {
+    expect(deckLayout(100, WORDMARK).blockWidth).toBe(30);
+    expect(deckLayout(200, WORDMARK).blockWidth).toBe(36);
+    expect(deckLayout(80, WORDMARK).blockWidth).toBe(0);
+  });
+});
+describe("laneParts", () => {
+  it("drops the dirty count first, then the branch", () => {
+    const status = state.status;
+    expect(laneParts(status, 28)).toEqual({ branch: true, dirty: true, spend: false });
+    expect(laneParts(status, 27)).toEqual({ branch: true, dirty: false, spend: false });
+    expect(laneParts(status, 24)).toEqual({ branch: false, dirty: false, spend: false });
+  });
+  it("drops this turn's spend last", () => {
+    const status = {
+      ...state.status,
+      credits: { kind: "balance", balance: 12.84, spend: 0.31 }
+    };
+    expect(laneParts(status, 25)).toEqual({ branch: false, dirty: false, spend: true });
+    expect(laneParts(status, 24)).toEqual({ branch: false, dirty: false, spend: false });
+  });
+});
+describe("statusRowFit", () => {
+  const status = { ...state.status, model: "dexto/anthropic/claude-sonnet-4.5" };
+  it("reserves the lane and lets the model truncate", () => {
+    expect(statusRowFit(status, 42, 0)).toEqual({ notice: 0, model: 22, lane: 18 });
+  });
+  it("hides the model rather than show a stub", () => {
+    expect(statusRowFit(status, 42, 17)).toEqual({ notice: 17, model: 0, lane: 23 });
+  });
+  it("truncates a long notice rather than the lane", () => {
+    expect(statusRowFit(status, 42, 23)).toEqual({ notice: 22, model: 0, lane: 18 });
+  });
+  it("hides the notice when a stub is all that fits", () => {
+    expect(statusRowFit(status, 22, 12)).toEqual({ notice: 0, model: 0, lane: 22 });
+  });
+  it("gives the lane whatever the model leaves", () => {
+    expect(statusRowFit(state.status, 120, 0)).toEqual({ notice: 0, model: 21, lane: 97 });
+  });
+});
+describe("formatTokens", () => {
+  it("reads like 46k, 1.2M and 850", () => {
+    expect(formatTokens(46e3)).toBe("46k");
+    expect(formatTokens(12e5)).toBe("1.2M");
+    expect(formatTokens(850)).toBe("850");
+  });
+});
+describe("Deck", () => {
+  let saved;
+  beforeEach(() => {
+    saved = getCaps();
+    setCaps({ ...saved, color: "none", glyphs: "unicode", motion: "reduced" });
+  });
+  afterEach(() => setCaps(saved));
+  it("is four rows at 120 columns, with the status block beside the trace", async () => {
+    const out = await frame(deck(), 120);
+    const lines = out.split("\n");
+    expect(lines).toHaveLength(4);
+    expect(lines[0]).toMatch(/STREAMING · 84 tok\/s · 12\.4s\s*$/);
+    expect(lines[1]).toMatch(/dexto\/sonnet-5\.5\s+46k\/200k\s*$/);
+    expect(lines[2]).toMatch(/◇ local ⎇ main ±3 · ◆ \$12\.84\s*$/);
+    expect(lines[3]).toBe("\u203A ask");
+  });
+  it("moves the status to a compact row under the input below 100 columns", async () => {
+    const out = await frame(deck(), 78);
+    const lines = out.split("\n");
+    expect(lines).toHaveLength(5);
+    expect(lines[0]).toMatch(/STREAMING · 84 tok\/s · 12\.4s\s*$/);
+    expect(lines[3]).toBe("\u203A ask");
+    expect(lines[4]).toMatch(/^dexto\/sonnet-5\.5\s+46k\s+◇ local ⎇ main ±3 · ◆ \$12\.84/);
+  });
+  it("drops the wordmark below 44 columns and keeps the trace", async () => {
+    const out = await frame(deck(), 42);
+    const lines = out.split("\n");
+    expect(lines).toHaveLength(4);
+    expect(out).not.toContain("dexto ");
+    expect(lines[0]).toMatch(/[▁-█]/);
+    expect(lines[2]).toBe("\u203A ask");
+    expect(lines[3]).toMatch(/^84 tok\/s · 12\.4s\s+46k\s+◇ local · ◆ \$12\.84$/);
+  });
+  it("keeps the readout, and so the permission mode, in the middle step", async () => {
+    const out = await frame(deck({ ...state, mode: "idle", readout: "plan mode" }), 78);
+    expect(out.split("\n")[0]).toMatch(/READY · plan mode\s*$/);
+  });
+  it("leads the bare status row with the readout and never cuts the lane", async () => {
+    const long = {
+      ...state,
+      mode: "idle",
+      readout: "auto-approve",
+      status: { ...state.status, model: "dexto/anthropic/claude-sonnet-4.5" }
+    };
+    const row = (await frame(deck(long), 42)).split("\n")[3] ?? "";
+    expect(row).toMatch(/^auto-approve\s+46k\s+◇ local · ◆ \$12\.84$/);
+    const plain = (await frame(deck({ ...long, readout: null }), 42)).split("\n")[3] ?? "";
+    expect(plain).toMatch(/^dexto\/anthropic.*…\s+46k\s+◇ local · ◆ \$12\.84$/);
+  });
+  it("keeps the lane whole beside a notice too long to fit", async () => {
+    const long = { ...state, mode: "idle", readout: "auto-approve \xB7 r:medium" };
+    const row = (await frame(deck(long), 42)).split("\n")[3] ?? "";
+    expect(row).toMatch(/^auto-approve · r:medi…\s+◇ local · ◆ \$12\.84$/);
+  });
+  it("draws only the input when collapsed, leaving it mounted", async () => {
+    const collapsed = createElement(Deck, {
+      state,
+      collapsed: true,
+      paused: false,
+      children: createElement(Text, null, "INPUT")
+    });
+    expect(await frame(collapsed, 120)).toBe("INPUT");
+  });
+  it("keeps context use visible beside a long model id", async () => {
+    const long = {
+      ...state,
+      status: { ...state.status, model: "anthropic/claude-sonnet-4-5-20250929" }
+    };
+    const lines = (await frame(deck(long), 120)).split("\n");
+    expect(lines[1]).toMatch(/anthropic\/claude-\S*…\s+46k\/200k\s*$/);
+  });
+  it("slots a gate between the band and the input", async () => {
+    const out = await frame(deck(state, createElement(Text, null, "GATE")), 120);
+    const lines = out.split("\n");
+    expect(lines[3]).toBe("GATE");
+    expect(lines[4]).toBe("\u203A ask");
+  });
+  it("says when you are signed out, out of credits, or on a cloud computer", async () => {
+    const signedOut = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "signed-out" } } }),
+      120
+    );
+    expect(signedOut).toContain("\xB7 cloud off");
+    const loading = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "signed-in" } } }),
+      120
+    );
+    expect(loading).toMatch(/◇ local ⎇ main ±3 · ◆\s*$/m);
+    const out = await frame(
+      deck({ ...state, status: { ...state.status, credits: { kind: "out" } } }),
+      120
+    );
+    expect(out).toContain("out of credits");
+    const cloud = await frame(
+      deck({
+        ...state,
+        status: { ...state.status, where: { kind: "computer", name: "dx-7f3a" } }
+      }),
+      120
+    );
+    expect(cloud).toContain("\u25C6 dx-7f3a");
+  });
+  it("leaves out what it does not know", async () => {
+    const out = await frame(
+      deck({
+        mode: "idle",
+        readout: null,
+        status: {
+          ...state.status,
+          model: "gpt-5",
+          contextUsedTokens: null,
+          contextMaxTokens: null,
+          branch: null,
+          dirtyFiles: 0
+        }
+      }),
+      120
+    );
+    const lines = out.split("\n");
+    expect(lines[0]).toMatch(/READY\s*$/);
+    expect(lines[1]).toMatch(/gpt-5\s*$/);
+    expect(lines[2]).toMatch(/◇ local · ◆ \$12\.84\s*$/);
+  });
+  it("falls back to ASCII glyphs", async () => {
+    setCaps({ ...getCaps(), glyphs: "ascii" });
+    const out = await frame(deck(), 120);
+    expect(out).toContain("o local @ main +3 . * $12.84");
+    expect(out).not.toMatch(/[▁-█◇◆⎇]/);
+  });
+});
+describe("Deck trace clock", () => {
+  let saved;
+  beforeEach(() => {
+    saved = getCaps();
+    setCaps({ ...saved, color: "none", glyphs: "unicode", motion: "full" });
+  });
+  afterEach(() => setCaps(saved));
+  async function framesOver(s, ms, paused = false) {
+    const { stdout, writes } = recordingStdout(120);
+    const view = render(deck(s, null, paused), {
+      stdout,
+      debug: true,
+      patchConsole: false,
+      exitOnCtrlC: false
+    });
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const settled = writes.length;
+    await new Promise((resolve) => setTimeout(resolve, ms));
+    const written = writes.length - settled;
+    view.unmount();
+    return written;
+  }
+  it("scrolls while the agent works", async () => {
+    expect(await framesOver(state, 350)).toBeGreaterThanOrEqual(2);
+  });
+  it("holds trace and wordmark still while paused for copy mode", async () => {
+    expect(await framesOver({ ...state, mode: "think" }, 350, true)).toBe(0);
+  });
+  it("writes nothing while the session sits idle", async () => {
+    expect(await framesOver({ ...state, mode: "idle", readout: null }, 350)).toBe(0);
+  });
+});