@cspeach/cli 1.1.18 → 1.1.19

package/dist/ui/key-burst.js

@@ -0,0 +1,117 @@
+/**
+ * Control-key bursts (fix round 3, item 6).
+ *
+ * Ink parses each stdin chunk as ONE key. When ConPTY coalesces several key
+ * repeats into a single read (held Backspace or arrows while the event loop is
+ * busy), the chunk matches no key and arrives as "text" — the DEL bytes were
+ * then inserted into the draft as invisible characters. This walks such a
+ * chunk key by key and applies each to (value, cursor). It never inserts a
+ * control character.
+ */
+const ESC = '\u001b';
+/** True when the chunk carries a control character (other than newline / tab). */
+// eslint-disable-next-line no-control-regex
+const HAS_CONTROL = /[\u0000-\u0008\u000b-\u001f\u007f]/;
+// CSI (ESC [ params final) or SS3 (ESC O final).
+// eslint-disable-next-line no-control-regex
+const ESCAPE_SEQ = /^\u001b(?:\[[0-9;?]*[@-~]|O[@-~])?/;
+const STRIPPED_LEAD = /^(?:\[[0-9;?]*[A-Za-z~]|O[A-Za-z])/;
+/**
+ * Remove every control character except newline and tab — the last guard
+ * before text lands in a draft (an ESC-bearing paste, a stray NUL).
+ */
+export function stripControlChars(s) {
+    // eslint-disable-next-line no-control-regex
+    // Whole CSI / SS3 sequences first (review M8): dropping only the ESC left
+    // a pasted ANSI log reading "[31mred".
+    return s
+        .replace(/\u001b(?:\[[0-9;?]*[@-~]|O[@-~])/g, '')
+        .replace(/[\u0000-\u0008\u000b-\u001f\u007f]/g, '');
+}
+/**
+ * Split a chunk made ONLY of control keys (escape sequences, DEL, BS, other
+ * C0 controls) into one string per key. Ink's parser reads a chunk as a
+ * single key — "\x1b[D\x1b[D\x1b[D" parses as ONE Left and the rest is lost
+ * before useInput sees it — so InkStdinPasteGuard hands Ink one key per
+ * read(). Returns [chunk] (no split) when the chunk holds any printable text
+ * (text-input's applyKeyBurst handles mixed chunks) or a CR / LF (Enter and
+ * non-bracketed pastes keep their existing handling).
+ */
+export function splitControlKeys(chunk) {
+    if (chunk.length < 2 || chunk.includes('\r') || chunk.includes('\n'))
+        return [chunk];
+    const keys = [];
+    let rest = chunk;
+    while (rest.length > 0) {
+        const ch = rest[0];
+        if (ch === ESC) {
+            // eslint-disable-next-line no-control-regex
+            const m = /^\u001b(?:\[[0-9;?]*[@-~]|O[@-~])/.exec(rest);
+            if (!m)
+                return [chunk]; // a lone ESC or Alt+key — leave the chunk alone
+            keys.push(m[0]);
+            rest = rest.slice(m[0].length);
+            continue;
+        }
+        if (!HAS_CONTROL.test(ch))
+            return [chunk]; // printable text — not a pure burst
+        keys.push(ch);
+        rest = rest.slice(1);
+    }
+    return keys.length > 1 ? keys : [chunk];
+}
+/**
+ * Apply a multi-key chunk. Returns null when the chunk holds no control
+ * characters — the caller then inserts it as ordinary text.
+ */
+export function applyKeyBurst(value, cursor, input) {
+    if (!HAS_CONTROL.test(input))
+        return null;
+    // Ink strips the chunk's first ESC; put it back when the chunk starts with
+    // what is clearly the rest of an escape sequence.
+    let rest = STRIPPED_LEAD.test(input) ? ESC + input : input;
+    let v = value;
+    let c = Math.max(0, Math.min(cursor, value.length));
+    while (rest.length > 0) {
+        const ch = rest[0];
+        if (ch === ESC) {
+            const m = ESCAPE_SEQ.exec(rest);
+            const seq = m[0];
+            const final = seq[seq.length - 1];
+            if (seq.length > 1) {
+                if (final === 'D')
+                    c = Math.max(0, c - 1);
+                else if (final === 'C')
+                    c = Math.min(v.length, c + 1);
+                else if (final === 'H')
+                    c = 0;
+                else if (final === 'F')
+                    c = v.length;
+                else if (seq === ESC + '[3~' && c > 0) {
+                    // Delete — same as the single-key path, which cannot tell the
+                    // Delete key from Backspace (both parse as key.delete).
+                    v = v.slice(0, c - 1) + v.slice(c);
+                    c--;
+                }
+            }
+            rest = rest.slice(seq.length || 1);
+            continue;
+        }
+        if (ch === '\u007f' || ch === '\b') {
+            if (c > 0) {
+                v = v.slice(0, c - 1) + v.slice(c);
+                c--;
+            }
+            rest = rest.slice(1);
+            continue;
+        }
+        if (HAS_CONTROL.test(ch)) {
+            rest = rest.slice(1); // any other control character is dropped
+            continue;
+        }
+        v = v.slice(0, c) + ch + v.slice(c);
+        c++;
+        rest = rest.slice(1);
+    }
+    return { value: v, cursor: c };
+}

package/dist/ui/line-resolution.js

@@ -21,6 +21,7 @@
 import { isExactSlashMatch, filterSlashEntries } from '../repl/slash-picker.js';
 import { pendingAtTokenPrefix } from '../repl/at-picker.js';
 import { SKILL_CATALOG, SKILL_ALIASES } from '../skill-catalog.js';
+import { getGlyphs } from '../renderer/glyphs.js';
 export function nextResolutionStep(line, files) {
     const trimmed = line.trim();
     if (trimmed.startsWith('/') && !isExactSlashMatch(trimmed)) {
@@ -65,7 +66,7 @@ export function applySlashPick(pickedName, rest, files, fillIn = false) {
         return {
             kind: 'prefill',
             text: `${name} `,
-            hint: `↪ ${name} — add arguments or press Enter to run`,
+            hint: `${getGlyphs().info} ${name} — add arguments or press Enter to run`,
         };
     }
     return nextResolutionStep(`${name}${rest}`, files);
@@ -92,7 +93,7 @@ function emptyBodyGuard(line) {
             return {
                 kind: 'prefill',
                 text: `/${aliasTarget} `,
-                hint: `↪ ${head.toLowerCase()} is now /${aliasTarget} — type your prompt and press Enter`,
+                hint: `${getGlyphs().info} ${head.toLowerCase()} is now /${aliasTarget} — type your prompt and press Enter`,
             };
         }
         const isSkill = SKILL_CATALOG.some((s) => `/${s.name}` === head.toLowerCase());
@@ -100,7 +101,7 @@ function emptyBodyGuard(line) {
             return {
                 kind: 'prefill',
                 text: `${head} `,
-                hint: `↪ ${head} — type your prompt and press Enter`,
+                hint: `${getGlyphs().info} ${head} — type your prompt and press Enter`,
             };
         }
     }

package/dist/ui/live-area.js

@@ -0,0 +1,71 @@
+// src/ui/live-area.ts
+//
+// Pure layout decisions for the Ink live area (CLI look piece 2, spec §2).
+// Order, top to bottom: Body (<Static>) → checklist → card slot → status
+// strip → input → footer → palettes. Ink 5 clears and redraws the WHOLE
+// screen once the live region reaches the terminal height (ink.js
+// `outputHeight >= stdout.rows`), so the live area is capped at rows − 2.
+/** Precedence: model-driven blocking cards first, then user-opened panels. */
+const PRECEDENCE = ['approval', 'confirm', 'ask', 'coaching', 'files', 'rewind', 'timeline', 'shortcuts'];
+/** The ONE card shown in the slot (spec §1.6: one card at a time), or null. */
+export function pickSlotOccupant(s) {
+    for (const k of PRECEDENCE)
+        if (s[k])
+            return k;
+    return null;
+}
+export const STATUS_ROWS = 1;
+export const INPUT_BORDER_ROWS = 2;
+export const FOOTER_ROWS = 1;
+export const INPUT_MAX_LINES = 6;
+/**
+ * Fixed height estimates (rows, margins and borders included) for each slot
+ * occupant, fed to liveBudget as `cardRows`. They cover the collapsed card.
+ * A task that owns a card with a variable height replaces its entry at the
+ * App call site with a real estimator (Q2: estimateAskCardRows, C1:
+ * estimateConfirmCardRows).
+ *   approval  margin 1 + border 2 + padding 2 + 3 fact rows + margin 1 + keys 1
+ *   rewind    margin 1 + border 2 + title 1 + margin 1 + more 2 + REWIND_VISIBLE_ROWS 9 + margin 1 + hint 1
+ *   timeline  margin 1 + border 2 + title 1 + margin 1 + more 2 + TIMELINE_VISIBLE_ROWS 9
+ *   (S4a: both cards pin their rendered height to these in their own tests.)
+ */
+export const SLOT_ROWS_ESTIMATE = {
+    approval: 10,
+    confirm: 10,
+    ask: 12,
+    coaching: 12,
+    files: 14,
+    rewind: 18,
+    timeline: 16,
+    shortcuts: 14,
+};
+/** An open `/` or `@` palette: margin 1 + query 1 + ↑ more 1 + 8 rows + ↓ more 1 + hint 1. */
+export const PALETTE_ROWS = 13;
+/**
+ * Rows each live element may use so the whole live area stays ≤ rows − 2.
+ *
+ * Inputs are WANTED heights: `cardRows` is the card's full height INCLUDING
+ * option descriptions, `inputLines` the wrapped input's full height. (Passing
+ * the already-shrunk height would make descriptions flicker on and off.)
+ *
+ * Fold order over the cap (spec §2):
+ *   1. the checklist folds to its one summary line while a card is open;
+ *      with no card it may use everything except one input line;
+ *   2. the input stops growing: min(inputLines, 6, what is left), never < 1;
+ *   3. card option descriptions drop (showDescriptions = false) when not
+ *      even one input line fits beside the full card.
+ * The status row is always counted (conservative: it is hidden while a card
+ * is open, so the real frame is one row shorter).
+ */
+export function liveBudget(args) {
+    const cap = Math.max(0, args.rows - 2);
+    const fixed = STATUS_ROWS + INPUT_BORDER_ROWS + FOOTER_ROWS + Math.max(0, args.paletteRows);
+    const wanted = Math.max(0, args.checklistRows);
+    const card = Math.max(0, args.cardRows);
+    const checklistRows = card > 0
+        ? Math.min(wanted, 1)
+        : Math.min(wanted, Math.max(Math.min(wanted, 1), cap - fixed - 1));
+    const remaining = cap - fixed - checklistRows - card;
+    const inputMaxLines = Math.max(1, Math.min(Math.max(1, args.inputLines), INPUT_MAX_LINES, remaining));
+    return { checklistRows, inputMaxLines, showDescriptions: remaining >= 1 };
+}

package/dist/ui/login-banner.js

@@ -1,66 +1,77 @@
 /**
- * Format the login banner shown at REPL startup. Decision 8: verbose
- * with budget + warning. Yellow warning fires when:
- *   - token usage ≥ 80% of input OR output cap (managed-capped trials only)
+ * Login banner (REPL startup). Decision 8: verbose with budget + warning.
+ * The warning fires when:
+ *   - token usage ≥ 80% of the input cap (managed-capped trials only)
  *   - trial expiry < 24 hours away
  *   - trial already expired
+ * Piece 2 §10: warning TEXT carries no glyph — callers print it through
+ * formatAttention ("!"). signInFragment() is the panels brand-line fold-in.
  */
+import { sanitizeControlChars } from '../renderer/sanitize.js';
 const MS_PER_HOUR = 3600 * 1000;
 const MS_PER_DAY = 24 * MS_PER_HOUR;
-export function formatLoginBanner(profile) {
-    // Non-trial path.
-    if (profile.trial_mode === null) {
-        return {
-            line: `Signed in as ${profile.email} (${profile.plan})`,
-            warningLine: null,
-        };
-    }
-    // Trial — figure out time left.
-    const now = Date.now();
+function trialTime(profile, now) {
     const ends = profile.trial_ends_at ? new Date(profile.trial_ends_at).getTime() : now;
     const msLeft = ends - now;
-    let timeFragment;
-    let isExpired = false;
-    if (msLeft <= 0) {
-        timeFragment = 'EXPIRED';
-        isExpired = true;
-    }
-    else if (msLeft < MS_PER_DAY) {
+    if (msLeft <= 0)
+        return { fragment: 'EXPIRED', msLeft, expired: true };
+    if (msLeft < MS_PER_DAY) {
         const hours = Math.max(1, Math.floor(msLeft / MS_PER_HOUR));
-        timeFragment = `${hours} hour${hours === 1 ? '' : 's'} left`;
+        return { fragment: `${hours} hour${hours === 1 ? '' : 's'} left`, msLeft, expired: false };
     }
-    else {
-        const days = Math.floor(msLeft / MS_PER_DAY);
-        timeFragment = `${days} day${days === 1 ? '' : 's'} left`;
+    const days = Math.floor(msLeft / MS_PER_DAY);
+    return { fragment: `${days} day${days === 1 ? '' : 's'} left`, msLeft, expired: false };
+}
+function inputPct(profile) {
+    const cap = profile.trial_token_cap_input ?? 0;
+    return { cap, pct: cap > 0 ? Math.round((profile.usage_input_tokens / cap) * 100) : 0 };
+}
+/** Server-supplied text (email, plan name) on one line with no control characters. */
+function serverText(s) {
+    return sanitizeControlChars(String(s)).replace(/\s*\r?\n\s*/g, ' ').trim();
+}
+export function formatLoginBanner(profile) {
+    const email = serverText(profile.email);
+    if (profile.trial_mode === null) {
+        return { line: `Signed in as ${email} (${serverText(profile.plan)})`, warningLine: null };
     }
+    const t = trialTime(profile, Date.now());
     if (profile.trial_mode === 'byok') {
         return {
-            line: `Signed in as ${profile.email} — BYOK trial — ${timeFragment}`,
-            warningLine: isExpired
-                ? `⚠  Your trial has expired. Visit cspeach.dev/upgrade.`
-                : (msLeft < MS_PER_DAY ? `⚠  Trial expires soon — ${timeFragment}.` : null),
+            line: `Signed in as ${email} — BYOK trial — ${t.fragment}`,
+            warningLine: t.expired
+                ? 'Your trial has expired. Visit cspeach.dev/upgrade.'
+                : (t.msLeft < MS_PER_DAY ? `Trial expires soon — ${t.fragment}.` : null),
         };
     }
     // managed-capped
-    const usedInput = profile.usage_input_tokens;
-    const capInput = profile.trial_token_cap_input ?? 0;
-    const inputPct = capInput > 0 ? Math.round((usedInput / capInput) * 100) : 0;
-    const tokenFragment = capInput > 0
-        ? ` — ${formatTokens(usedInput)}/${formatTokens(capInput)} tokens (${inputPct}%)`
+    const { cap, pct } = inputPct(profile);
+    const tokenFragment = cap > 0
+        ? ` — ${formatTokens(profile.usage_input_tokens)}/${formatTokens(cap)} tokens (${pct}%)`
         : '';
-    const line = `Signed in as ${profile.email} — trial (managed) — ${timeFragment}${tokenFragment}`;
+    const line = `Signed in as ${email} — trial (managed) — ${t.fragment}${tokenFragment}`;
     let warning = null;
-    if (isExpired) {
-        warning = `⚠  Your trial has expired. Visit cspeach.dev/upgrade.`;
-    }
-    else if (inputPct >= 80) {
-        warning = `⚠  Trial token budget at ${inputPct}% — upgrade or switch to BYOK before hitting the cap.`;
-    }
-    else if (msLeft < MS_PER_DAY) {
-        warning = `⚠  Trial expires in ${timeFragment} — upgrade at cspeach.dev/upgrade.`;
-    }
+    if (t.expired)
+        warning = 'Your trial has expired. Visit cspeach.dev/upgrade.';
+    else if (pct >= 80)
+        warning = `Trial token budget at ${pct}% — upgrade or switch to BYOK before hitting the cap.`;
+    else if (t.msLeft < MS_PER_DAY)
+        warning = `Trial expires in ${t.fragment} — upgrade at cspeach.dev/upgrade.`;
     return { line, warningLine: warning };
 }
+/** Panels brand-line fold-in (piece 2 §10): "signed in as <email> · <plan or trial facts>". */
+export function signInFragment(profile, now = Date.now()) {
+    const who = `signed in as ${serverText(profile.email)}`;
+    if (profile.trial_mode === null)
+        return `${who} · ${serverText(profile.plan)}`;
+    const t = trialTime(profile, now);
+    const time = t.expired ? 'trial expired' : t.fragment;
+    if (profile.trial_mode === 'byok')
+        return `${who} · BYOK trial · ${time}`;
+    const { cap, pct } = inputPct(profile);
+    const tokens = cap > 0 ? ` · ${formatTokens(profile.usage_input_tokens)} of ${formatTokens(cap)} tokens (${pct}%)` : '';
+    return `${who} · trial · ${time}${tokens}`;
+}
 // Always render with a `k` suffix so the banner column width stays stable.
 // Sub-1k values that aren't zero render as `<1k` rather than the raw number.
 function formatTokens(n) {

package/dist/ui/rewind-panel.js

@@ -1,35 +1,85 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import stringWidth from 'string-width';
 import { hhmm, rewindRowLabel, packageUnknown } from '../rewind/format.js';
+import { roleProps, selectedProps } from './role-props.js';
+import { getGlyphs } from '../renderer/glyphs.js';
+import { uiWidth, truncateToWidth } from '../renderer/ui-width.js';
+import { sanitizeControlChars } from '../renderer/sanitize.js';
 /**
- * RewindPanel — UX Wave 3 / Task 3. The Esc-Esc (and /rewind) overlay that
- * turns "undo for your SAP system" into a picker. House style follows
- * SessionTimeline / TodoPanel / CommandPalette: a bordered box mounted above
- * the Footer by <App>, closes on Esc / q, every row wrap="truncate-end"
- * (Wave-1 rule — no dynamic-frame row may soft-wrap), and lists longer than
- * REWIND_VISIBLE_ROWS scroll in a window (CommandPalette pattern).
+ * RewindPanel — UX Wave 3 / Task 3; a card-slot occupant since CLI look
+ * piece 2 (§10). The Esc-Esc (and /rewind) card that turns "undo for your
+ * SAP system" into a picker. <App> mounts it in the card slot; it closes on
+ * Esc / q, every row is pre-cut to the card width (string-width aware) and
+ * also wrap="truncate-end", and lists taller than REWIND_VISIBLE_ROWS scroll
+ * in a window (CommandPalette pattern).
  *
- * Row: `▸ ZMNT_NOTE (TABL) · set_source · 14:32 · snapshot 12:01`
- *   - restorable  → bold, cyan when the cursor is on it.
- *   - restorable delete with an unknown recreate package → a dim
- *     `(package unknown — restore may fail)` tail (rider c).
+ * Row: `❯ Wrote ZMNT_NOTE (TABL) · 14:32 · snapshot 12:01` (local times)
+ *   - restorable  → bold; the selected row is SAP blue + bold.
+ *   - restorable delete with an unknown recreate package → its own dim
+ *     `package unknown — restore may fail` line (rider c).
  *   - non-restorable → dim, with the candidate's reason.
  *
  * Enter on a restorable row swaps the footer hint for an inline confirm line
- * (`restore … to snapshot 12:01? runs the write gates — [y]/[n]`). `y` fires
+ * (`restore … to snapshot 12:01? runs write gates — [y]/[n]`). `y` fires
  * onRestore(candidate) and closes; `n` / Esc returns to the list. The panel
  * NEVER runs the write itself — onRestore bridges to the gated executor.
  *
- * Empty state: a single dim `no restorable writes this session` line that
+ * Empty state: a single dim `No restorable writes this session` line that
  * closes on any key.
+ *
+ * Height (spec §2 cap): border 2 + title 1 + margin 1 + ↑ more 1 +
+ * REWIND_VISIBLE_ROWS + ↓ more 1 + margin 1 + hint 1 = 17, plus the App's
+ * marginTop 1 = SLOT_ROWS_ESTIMATE.rewind (18). The window is measured in
+ * ROWS: a package-unknown candidate takes two.
  */
-export const REWIND_VISIBLE_ROWS = 10;
-export function RewindPanel({ candidates, onRestore, onClose }) {
+export const REWIND_VISIBLE_ROWS = 9;
+/** Border 1 + paddingX 2, on each side. */
+const CHROME_COLS = 6;
+const rowsOf = (c) => (packageUnknown(c) ? 2 : 1);
+/** First index past the window that starts at `start` (at least one row). */
+function windowEnd(candidates, start) {
+    let end = start;
+    let used = 0;
+    while (end < candidates.length && (end === start || used + rowsOf(candidates[end]) <= REWIND_VISIBLE_ROWS)) {
+        used += rowsOf(candidates[end]);
+        end++;
+    }
+    return end;
+}
+/** The scroll window for `cursor`: starts three above it where possible and
+ *  always contains it. */
+export function rewindWindow(candidates, cursor) {
+    let maxOffset = candidates.length;
+    while (maxOffset > 0 && windowEnd(candidates, maxOffset - 1) === candidates.length)
+        maxOffset--;
+    let start = Math.max(0, Math.min(cursor - 3, maxOffset));
+    let end = windowEnd(candidates, start);
+    while (cursor >= end && start < cursor) {
+        start++;
+        end = windowEnd(candidates, start);
+    }
+    return { start, end };
+}
+/** The inline confirm question. A long object name is cut first so the
+ *  `[y]/[n]` keys stay on screen. */
+function confirmLine(c, inner) {
+    const tail = ` to snapshot ${hhmm(c.snapshotAt)}? runs write gates — [y]/[n]`;
+    const head = 'restore ';
+    const objBudget = Math.max(1, inner - stringWidth(head) - stringWidth(tail));
+    return truncateToWidth(`${head}${truncateToWidth(sanitizeControlChars(c.object), objBudget)}${tail}`, inner);
+}
+export function RewindPanel({ candidates, onRestore, onClose, width = uiWidth() }) {
     const [cursor, setCursor] = useState(0);
     const [confirming, setConfirming] = useState(null);
     const empty = candidates.length === 0;
     useInput((input, key) => {
+        // Ctrl+C closes the panel outright, nothing written (fix round 3, item 4).
+        if (key.ctrl && input === 'c') {
+            onClose();
+            return;
+        }
         // Empty state: any key dismisses.
         if (empty) {
             onClose();
@@ -64,18 +114,20 @@ export function RewindPanel({ candidates, onRestore, onClose }) {
             return;
         }
     });
-    const maxOffset = Math.max(0, candidates.length - REWIND_VISIBLE_ROWS);
-    const windowStart = Math.max(0, Math.min(cursor - 3, maxOffset));
-    const visible = candidates.slice(windowStart, windowStart + REWIND_VISIBLE_ROWS);
-    const below = Math.max(0, candidates.length - (windowStart + REWIND_VISIBLE_ROWS));
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, width: 72, children: [_jsx(Text, { bold: true, color: "cyan", wrap: "truncate-end", children: "Rewind \u2014 undo a write this session \u00B7 times UTC" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [empty && _jsx(Text, { dimColor: true, children: "no restorable writes this session" }), !empty && windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), !empty && visible.map((c, i) => {
+    const inner = Math.max(1, width - CHROME_COLS);
+    const { start: windowStart, end: windowStop } = rewindWindow(candidates, cursor);
+    const visible = candidates.slice(windowStart, windowStop);
+    const below = Math.max(0, candidates.length - windowStop);
+    const scrolls = windowStart > 0 || below > 0;
+    const g = getGlyphs();
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('frame').color, paddingX: 2, width: width, children: [_jsx(Text, { bold: true, wrap: "truncate-end", children: truncateToWidth('Rewind · undo a write from this session', inner) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [empty && _jsx(Text, { ...roleProps('dim'), children: "No restorable writes this session" }), !empty && windowStart > 0 && _jsxs(Text, { ...roleProps('dim'), children: ["  \u2191 ", windowStart, " more"] }), !empty && visible.map((c, i) => {
                         const idx = windowStart + i;
                         const sel = idx === cursor;
-                        const glyph = sel ? '▸ ' : '  ';
+                        const row = truncateToWidth(`${sel ? `${g.cursor} ` : '  '}${rewindRowLabel(c)}`, inner);
                         return (_jsxs(React.Fragment, { children: [c.restorable
-                                    ? _jsxs(Text, { bold: true, color: sel ? 'cyan' : undefined, wrap: "truncate-end", children: [glyph, rewindRowLabel(c)] })
-                                    : _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: [glyph, rewindRowLabel(c)] }), packageUnknown(c) && (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: "     package unknown \u2014 restore may fail" }))] }, idx));
-                    }), !empty && below > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2193 ", below, " more"] })] }), _jsx(Box, { marginTop: 1, children: confirming ? (_jsxs(Text, { color: "yellow", wrap: "truncate-end", children: ["restore ", confirming.object, " to snapshot ", hhmm(confirming.snapshotAt), "? runs write gates \u2014 [y]/[n]"] })) : (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: empty
+                                    ? _jsx(Text, { ...(sel ? selectedProps() : { bold: true }), wrap: "truncate-end", children: row })
+                                    : _jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: row }), packageUnknown(c) && (_jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: truncateToWidth('     package unknown — restore may fail', inner) }))] }, idx));
+                    }), !empty && below > 0 && _jsxs(Text, { ...roleProps('dim'), children: ["  \u2193 ", below, " more"] })] }), _jsx(Box, { marginTop: 1, children: confirming ? (_jsx(Text, { ...roleProps('warn'), wrap: "truncate-end", children: confirmLine(confirming, inner) })) : (_jsx(Text, { ...roleProps('dim'), wrap: "truncate-end", children: empty
                         ? 'any key to close'
-                        : `${candidates.length > REWIND_VISIBLE_ROWS ? '↑↓ scroll · ' : ''}Enter restore · Esc/q close` })) })] }));
+                        : `${scrolls ? '↑↓ scroll · ' : ''}Enter restore · Esc/q close` })) })] }));
 }

package/dist/ui/role-props.js

@@ -0,0 +1,47 @@
+// src/ui/role-props.ts
+//
+// Ink colour props from theme roles (CLI look piece 2, spec §1.2). Every
+// migrated Ink component takes colour ONLY through this helper, so NO_COLOR
+// reaches Ink whatever chalk instance Ink bundles. Under NO_COLOR it returns
+// no colour props (bold survives); selection then shows through ❯ + bold.
+import chalk from 'chalk';
+import { PALETTE, CHIP_BG, CHIP_FG } from '../renderer/theme.js';
+import { getBackground } from '../renderer/look.js';
+import { isNoColor } from '../renderer/color-mode.js';
+/** 16-colour names matching theme.ts BASIC (paint at chalk level 1). */
+const BASIC_NAME = {
+    sap: 'blue', ok: 'green', warn: 'yellow', bad: 'red', frame: 'gray', dim: 'gray', brand: 'yellow',
+};
+export function roleProps(role, opts = {}) {
+    const bold = opts.bold ? { bold: true } : {};
+    if (colourOff())
+        return bold;
+    const color = chalk.level === 1 ? BASIC_NAME[role] : PALETTE[getBackground()][role];
+    return { color, ...bold };
+}
+/** The selected row: SAP blue + bold; NO_COLOR → bold only. */
+export function selectedProps() {
+    return roleProps('sap', { bold: true });
+}
+function colourOff() {
+    return isNoColor() || chalk.level === 0;
+}
+/**
+ * A filled tag chip (e.g. APPROVAL) as Ink text + props, matching theme.chip():
+ * SAP-blue fill with white text; 16 colours → blue/white; NO_COLOR → `[TAG]` bold.
+ */
+export function inkChip(label) {
+    if (colourOff())
+        return { text: `[${label}]`, props: { bold: true } };
+    if (chalk.level === 1)
+        return { text: ` ${label} `, props: { backgroundColor: 'blue', color: 'white', bold: true } };
+    return { text: ` ${label} `, props: { backgroundColor: CHIP_BG, color: CHIP_FG, bold: true } };
+}
+/**
+ * Legacy look only (inside a getLook() === 'legacy' branch): today's literal
+ * Ink colour, unchanged while colour is on, so the legacy bytes stay the same;
+ * none under NO_COLOR or chalk level 0.
+ */
+export function legacyInkColor(name) {
+    return colourOff() ? undefined : name;
+}

package/dist/ui/sap-state-store.js

@@ -19,6 +19,7 @@ const DEFAULT_STATE = {
     // the dollar rendering. Only an explicit managed+metered resolution flips it.
     creditsMode: false, creditsSessionTotal: 0, creditsBalance: null,
     creditsUnitLabel: 'credits', creditsPending: false,
+    standalone: false,
 };
 /**
  * Rate limiter: calls `fn` at most once every `minIntervalMs`. Trailing-only:

package/dist/ui/session-timeline.js

@@ -1,5 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Box, Text, useInput } from 'ink';
+import stringWidth from 'string-width';
+import { roleProps } from './role-props.js';
+import { getGlyphs } from '../renderer/glyphs.js';
+import { uiWidth, truncateToWidth } from '../renderer/ui-width.js';
+import { toolLabel } from '../renderer/tool-labels.js';
+import { sanitizeControlChars } from '../renderer/sanitize.js';
+import { hhmm } from '../rewind/format.js';
 // v1.1: add 'skipped' (approval rejection logs) and 'rolled_back' (snapshot restore).
 // Both need session-schema bump (schema_version 2) — deferred.
 const MUTATING_TOOLS = new Set([
@@ -22,11 +30,49 @@ export function toTimelineEntry(call) {
         isError: call.is_error,
     };
 }
-export function SessionTimeline({ entries, onClose }) {
+/**
+ * Write rows shown at once. Height (spec §2 cap): border 2 + title 1 +
+ * margin 1 + ↑ more 1 + TIMELINE_VISIBLE_ROWS + ↓ more 1 = 15, plus the
+ * App's marginTop 1 = SLOT_ROWS_ESTIMATE.timeline (16). Longer histories
+ * scroll with ↑↓ and open on the newest writes.
+ */
+export const TIMELINE_VISIBLE_ROWS = 9;
+/** Border 1 + paddingX 2, on each side. */
+const CHROME_COLS = 6;
+export function SessionTimeline({ entries, onClose, width = uiWidth() }) {
     const writes = entries.filter((e) => MUTATING_TOOLS.has(e.toolName));
+    const maxOffset = Math.max(0, writes.length - TIMELINE_VISIBLE_ROWS);
+    const [offset, setOffset] = useState(maxOffset);
+    const start = Math.min(offset, maxOffset);
+    const visible = writes.slice(start, start + TIMELINE_VISIBLE_ROWS);
+    const below = writes.length - (start + visible.length);
+    const g = getGlyphs();
+    const inner = Math.max(1, width - CHROME_COLS);
     useInput((input, key) => {
-        if (key.escape || input === 'q')
+        if (key.escape || input === 'q' || (key.ctrl && input === 'c')) {
             onClose();
+            return;
+        }
+        // Functional updaters: a burst of arrows before a re-render must not
+        // collapse into one step. Clamped to [0, maxOffset].
+        if (key.upArrow) {
+            setOffset((o) => Math.max(0, Math.min(o, maxOffset) - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setOffset((o) => Math.min(maxOffset, Math.max(0, o) + 1));
+            return;
+        }
     });
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 2, paddingY: 1, width: 72, children: [_jsx(Text, { bold: true, color: "cyan", children: "Write history \\u2014 Esc to close" }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [writes.length === 0 && _jsx(Text, { dimColor: true, children: "(no writes this session)" }), writes.map((e, i) => (_jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: [e.timestamp, "  "] }), _jsx(Text, { color: e.isError ? 'red' : 'green', children: e.isError ? '\u25CF failed ' : '\u25CF applied' }), _jsxs(Text, { children: ["  ", e.toolName.padEnd(20)] }), _jsxs(Text, { color: "yellow", children: ["  ", e.objectName] }), _jsxs(Text, { dimColor: true, children: [" (", e.objectType, ")  ", e.durationMs, "ms"] })] }, i)))] })] }));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: roleProps('frame').color, paddingX: 2, width: width, children: [_jsxs(Text, { bold: true, wrap: "truncate-end", children: ["Write history ", _jsx(Text, { ...roleProps('dim'), children: maxOffset > 0 ? '· ↑↓ scroll · Esc to close' : '· Esc to close' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [writes.length === 0 && _jsx(Text, { ...roleProps('dim'), children: "No writes this session" }), start > 0 && _jsxs(Text, { ...roleProps('dim'), children: ["  \u2191 ", start, " more"] }), visible.map((e, i) => {
+                        const time = `${hhmm(e.timestamp)}  `;
+                        const glyph = e.isError ? g.failed : g.done;
+                        const verb = toolLabel(e.toolName, {}).verb;
+                        const type = e.objectType !== '-' ? ` (${sanitizeControlChars(e.objectType)})` : '';
+                        const ms = ` · ${e.durationMs} ms`;
+                        // Pre-cut the object name so the verb, type and duration stay visible.
+                        const fixed = stringWidth(`${time}${glyph} ${verb} ${type}${ms}`);
+                        const name = truncateToWidth(sanitizeControlChars(e.objectName), Math.max(1, inner - fixed));
+                        return (_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { ...roleProps('dim'), children: time }), _jsx(Text, { ...roleProps(e.isError ? 'bad' : 'ok'), children: glyph }), _jsxs(Text, { children: [" ", verb, " ", name, type] }), _jsx(Text, { ...roleProps('dim'), children: ms })] }, start + i));
+                    }), below > 0 && _jsxs(Text, { ...roleProps('dim'), children: ["  \u2193 ", below, " more"] })] })] }));
 }