jaitus 0.3.2 → 0.3.4

package/src/tui-ink.js

@@ -1,1998 +1,2119 @@
-// ─── The Jaitus app view ────────────────────────────────────────────────────────
-//
-// One conversation, full bleed, with exactly four pieces of permanent chrome: a header
-// line, the transcript, the composer, and a status line. There is no dashboard, no
-// sidebar and no second column, because the thing being read is prose and code and
-// both of those want the full width of the window.
-//
-// Three decisions are worth knowing before changing anything here:
-//
-//   • **Entries keep their source, not their pixels.** `entries.js` renders rows on
-//     demand for the current width and caches them against it. Resizing re-lays every
-//     message correctly, and scrolling is exact because the row count is already known
-//     — the previous renderer estimated it and drifted.
-//   • **Colour survives.** Everything the rest of the CLI prints already carries ANSI.
-//     It is parsed back into styled spans rather than stripped, so a red ✗ printed by
-//     a command written two years ago is still red here.
-//   • **Motion is one timer.** Ink 7 consolidates every `useAnimation` into a single
-//     render cycle, which is the only reason a spinner, a shimmering label, a drifting
-//     hairline and a blinking caret can all run without the frame rate suffering.
-//
-// Reduced motion (`/animations off`, `JAITUS_NO_ANIMATION=1`) is a first-class mode:
-// every animated widget has a still frame that reads correctly on its own.
-
-import React from 'react';
-import { Box, Spacer, Text, render, useAnimation, useApp, useCursor, useInput, usePaste, useWindowSize } from 'ink';
-import { palette, resetPalette, mix, ramp } from './tui/theme.js';
-import { makeEntry, rowsFor, invalidate } from './tui/entries.js';
-import { plain, stringWidth, truncateRow, wrapRow, rowText, inverseRange } from './tui/ansi.js';
-import { Spinner, Shimmer, GradientText, FlowingRule, Meter, Elapsed, Caret, Rows, Row, Reveal, motionOn, publishSettings } from './tui/widgets.js';
-import { wordRows, wordSize } from './tui/wordmark.js';
-import { enableMouse, disableMouse, parseMouse, isMouse, isMouseFragment, createHitMap } from './tui/mouse.js';
-import { openUrl } from './open.js';
-import { MASCOT_ROWS, startupTip } from './brand.js';
-
-const h = React.createElement;
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-const ascii = () => process.env.JAITUS_ASCII === '1';
-const g = (uni, plainText) => (ascii() ? plainText : uni);
-
-// How many transcript rows the chrome costs. Kept as one table so a change to the
-// layout cannot silently desynchronise the scroll maths from what is on screen.
-// The header is one row plus its hairline. Kept here as one table so the layout and the
-// hit map cannot disagree about where anything is — the controls sit on row 1, which is
-// what registerHeaderHits assumes.
-const CHROME = { header: 2, status: 1, composerFrame: 3, gapAboveComposer: 1 };
-
-const MODE_LABEL = {
-  default: 'ask',
-  acceptEdits: 'auto-edit',
-  plan: 'plan',
-  bypassPermissions: 'bypass',
-};
-
-// ─── Fuzzy matching for the composer menu ───────────────────────────────────────
-//
-// Subsequence rather than prefix, so `/dr` finds `/deep-research` and `@idx` finds
-// `src/index.js`. Consecutive and word-boundary hits score higher, which is what stops
-// a long path from outranking the file you obviously meant.
-function fuzzy(needle, haystack) {
-  const n = needle.toLowerCase();
-  const stack = haystack.toLowerCase();
-  if (!n) return { score: 1, hits: [] };
-  const hits = [];
-  let score = 0;
-  let at = 0;
-  let streak = 0;
-  for (const ch of n) {
-    const found = stack.indexOf(ch, at);
-    if (found === -1) return null;
-    const boundary = found === 0 || /[^a-z0-9]/.test(stack[found - 1]);
-    streak = found === at ? streak + 1 : 0;
-    score += 1 + streak * 2 + (boundary ? 3 : 0);
-    hits.push(found);
-    at = found + 1;
-  }
-  // Shorter candidates win ties: `/ask` should beat `/architect` for `ask`.
-  return { score: score - haystack.length * 0.05, hits };
-}
-
-function highlightMatch(text, hits, base, accent) {
-  const set = new Set(hits);
-  const spans = [];
-  let run = '';
-  let runHit = false;
-  [...String(text)].forEach((ch, index) => {
-    const hit = set.has(index);
-    if (hit !== runHit && run) { spans.push({ t: run, color: runHit ? accent : base, bold: runHit }); run = ''; }
-    runHit = hit;
-    run += ch;
-  });
-  if (run) spans.push({ t: run, color: runHit ? accent : base, bold: runHit });
-  return spans;
-}
-
-/**
- * Rank one command against what has been typed.
- *
- * The name is matched first and scores highest, but the summary is searched too, because
- * the name of a command is only obvious once you already know it — typing `context`
- * finds `/compact`, and `diff` finds `/code-review`. A summary hit always scores below
- * every name hit, so typing a real command's letters never buries it under something
- * that merely mentions those letters in its description.
- */
-function scoreCommand(fragment, name, summary) {
-  const bare = name.replace(/^\//, '');
-  const byName = fuzzy(fragment, bare);
-  if (byName) return { score: byName.score + 100, hits: byName.hits.map((i) => i + 1), where: 'name' };
-  if (!summary || fragment.length < 2) return null;
-  // Word-prefix rather than subsequence on the summary: a loose subsequence over a
-  // sentence matches nearly everything, and a menu that matches everything is a menu
-  // that helps with nothing.
-  const words = summary.toLowerCase().split(/[^a-z0-9]+/).filter(Boolean);
-  const needle = fragment.toLowerCase();
-  const at = words.findIndex((w) => w.startsWith(needle));
-  if (at === -1) return null;
-  return { score: 20 - at - (words[at].length - needle.length) * 0.1, hits: [], where: 'summary' };
-}
-
-function menuItemsFor(input, commands, fileProvider, cursor) {
-  const upto = input.slice(0, cursor);
-  const slash = /(?:^|\s)\/([^\s]*)$/.exec(upto);
-  if (slash) {
-    const fragment = slash[1];
-    return commands
-      .map((command) => {
-        const name = typeof command === 'string' ? command : command.name;
-        const summary = typeof command === 'string' ? '' : command.summary || '';
-        const match = scoreCommand(fragment, name, summary);
-        return match ? { kind: 'command', value: name, label: name, summary, score: match.score, hits: match.hits, where: match.where } : null;
-      })
-      .filter(Boolean)
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 9);
-  }
-  const at = upto.lastIndexOf('@');
-  if (at >= 0 && !/\s/.test(upto.slice(at + 1))) {
-    const fragment = upto.slice(at + 1);
-    const files = fileProvider?.(fragment) || [];
-    return files
-      .map((file) => {
-        const match = fuzzy(fragment.split('/').pop() || '', String(file).split('/').pop() || String(file));
-        return { kind: 'file', value: file, label: String(file), summary: '', score: match ? match.score : 0, hits: [] };
-      })
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 9);
-  }
-  return [];
-}
-
-// ─── Chrome ─────────────────────────────────────────────────────────────────────
-
-function Header({ state, width }) {
-  const p = palette();
-  const m = state.meta;
-  const project = String(m.cwd || '.').split(/[\\/]/).filter(Boolean).pop() || '.';
-  const mode = MODE_LABEL[m.mode] || 'ask';
-  const modeColor = m.mode === 'bypassPermissions' ? p.red : m.mode === 'plan' ? p.yellow : m.mode === 'acceptEdits' ? p.teal : p.muted;
-  const narrow = width < 78;
-
-  // ── no mark in the header, and this is why ──
-  //
-  // The Jaitus J is a SQUARE mark. A half-block cell holds two square pixels, so a
-  // faithful square mark needs its height in pixel rows and half that in terminal rows:
-  // the real glyph, sampled from logo.png, degrades below about 6×6 and is properly
-  // itself at 8×8 — which is 8 cells by 4 rows, or 6 by 3 at a push. The header has one
-  // row for its title.
-  //
-  // Three marks were tried at one and two rows. Each was an abstraction of the logo
-  // rather than the logo, and each read as some other product's badge sitting next to
-  // this one's — correctly rejected. Half a square mark is not a small version of it.
-  //
-  // So the header carries the BRAND TOKEN instead: the coral chip with the J reversed
-  // out of it, which is the same mark the web header and the classic renderer use, and
-  // which is the one form of the logo that is honest at a single row — it is a colour
-  // field with a letter in it, not a squashed drawing of a square mark. Beside it the
-  // name in caps. Plain mixed-case `Jaitus` in the corner read as a window title; a
-  // coral field does not read as anything but a logo.
-  //
-  // The chip is also the only piece that survives every degradation — it is a space, a
-  // letter and a space, so it is not tofu on a raster console and not a box on a
-  // monochrome one. The real mark still lives where it has room: the welcome, and now
-  // the banner entry at the top of the transcript.
-  const ruleWidth = Math.max(4, width - 2);
-  // Below this the name is dropped and the chip carries it alone: the header's right
-  // side is controls, and squeezing six more characters in ahead of them is what makes
-  // Ink wrap the row and turn a two-row header into three.
-  const showName = width >= 62;
-
-  const left = h(Box, { flexDirection: 'row' },
-    h(Text, { color: '#ffffff', backgroundColor: p.brand, bold: true }, ' J '),
-    showName ? h(GradientText, { from: p.brandSoft, to: p.teal, bold: true }, ' JAITUS') : null,
-    h(Text, { color: p.faint }, `  ${g('▸', '/')} `),
-    h(Text, { color: p.muted }, project),
-    m.branch && width >= 78 ? h(Text, { color: p.faint }, `  ${g('⎇', 'b:')} ${m.branch}`) : null,
-  );
-
-  const right = h(Box, { flexDirection: 'row' },
-    h(Text, { color: modeColor, bold: true }, mode.toUpperCase()),
-    h(Text, { color: p.faint }, '  ·  '),
-    h(Text, { color: p.muted }, narrow ? shortModel(m.model) : String(m.model || 'auto')),
-    narrow ? null : h(Text, { color: p.faint }, '  ·  '),
-    narrow ? null : h(Meter, { value: m.ctxUsed || 0, max: m.ctxMax || 1, width: 8, danger: true }),
-    narrow ? null : h(Text, { color: p.dim }, ` ${m.ctx || '0 tok'}`),
-  );
-
-  return h(Box, { flexDirection: 'column', width },
-    h(Box, { flexDirection: 'row', paddingX: 1 }, left, h(Spacer), right),
-    // Idle, the hairline is not flat grey any more: it starts brand-tinted under the
-    // chip and fades into the line colour across the window. It is the cheapest way to
-    // make the header band belong to this product rather than to any terminal app —
-    // one row that was already being drawn, now carrying the identity.
-    h(Box, { paddingX: 1 },
-      h(FlowingRule, {
-        width: ruleWidth,
-        active: state.busy,
-        from: state.busy ? p.brand : mix(p.line, p.brand, 0.5),
-        to: state.busy ? p.teal : p.line,
-      })),
-  );
-}
-
-const shortModel = (id) => String(id || 'auto').split(/[/:]/).pop().slice(0, 18);
-
-/**
- * The fresh-session moment.
- *
- * Deliberately not a splash screen with a feature list: the wordmark, one line saying
- * what this is, and three things you can type. Everything else the user needs is one
- * `/` away and the menu will show it to them.
- */
-function Hero({ state, width, height }) {
-  const p = palette();
-
-  // ── the intro ──
-  //
-  // One pass, under a second, then it settles and stays settled. The pieces arrive in
-  // the order you should read them — the lockup, then what this is, then the three
-  // things you can type. Under reduced motion everything is simply already there.
-  const motion = motionOn();
-  const { time } = useAnimation({ interval: 40, isActive: motion && !state.introDone });
-  if (motion && time >= 900 && !state.introDone) state.introDone = true;
-  const elapsed = state.introDone ? 900 : time;
-  const phase = (from, to) => (motion && !state.introDone
-    ? Math.max(0, Math.min(1, (elapsed - from) / (to - from)))
-    : 1);
-
-  const markIn = phase(0, 420);
-  const lineIn = phase(280, 640);
-  const tipsIn = phase(420, 900);
-
-  // ── the lockup ──
-  //
-  // Mark and logotype on one baseline, left-aligned at exactly the indent transcript
-  // entries use, so the first answer appears directly beneath the branding with no
-  // jump. Both are four terminal rows: the mark is the DESIGNED mascot rather than the
-  // photographic badge downsampled, and the letterforms are drawn on a pixel grid and
-  // rendered with half-blocks — one cell per pixel is what made the old wordmark read
-  // as ASCII art, because a terminal cell is twice as tall as it is wide.
-  const mascot = MASCOT_ROWS();
-  const markInk = ramp(mix(p.bg, p.brandDeep, markIn), mix(p.bg, p.brand, markIn), mascot.length);
-  const mark = mascot.map((row, index) => [{ t: row, color: markInk[index] }]);
-  const markWidth = Math.max(...mascot.map((row) => row.length));
-
-  const word = wordRows('JAITUS', (column, total) =>
-    mix(p.bg, mix(p.brand, p.teal, total > 1 ? column / (total - 1) : 0), markIn));
-  const wordWidth = wordSize('JAITUS').width;
-
-  // Everything below is measured against what will fit, and dropped from the bottom up
-  // — the tips first, then the tagline — so a short window shows less rather than
-  // overflowing into the composer.
-  const showMark = width >= wordWidth + markWidth + 8;
-  const showWord = width >= wordWidth + 6;
-  const lockupRows = showWord ? word.length : 1;
-  const room = (rows) => height >= lockupRows + rows;
-
-  const tips = [
-    [`${g('›', '>')} `, 'describe a change', 'it reads the code before touching it'],
-    ['/ ', 'browse commands', 'research, review, commit, rewind'],
-    ['@ ', 'pull in a file', 'fuzzy-matched from this directory'],
-  ];
-
-  return h(Box, { flexDirection: 'column', width, height, paddingX: 1, justifyContent: 'flex-end' },
-    h(Box, { flexDirection: 'row' },
-      showMark ? h(Box, { marginRight: 2, flexDirection: 'column' }, h(Rows, { rows: mark })) : null,
-      showWord
-        ? h(Box, { flexDirection: 'column' }, h(Rows, { rows: word }))
-        : h(GradientText, { from: p.brand, to: p.teal, bold: true }, 'JAITUS'),
-    ),
-    room(3) ? h(Box, { marginTop: 1 },
-      h(Text, { color: mix(p.bg, p.dim, lineIn) },
-        `a coding agent in your terminal  ${g('·', '-')}  v${state.meta.version || ''}`)) : null,
-    room(8) ? h(Box, { marginTop: 1, flexDirection: 'column' },
-      tips.map(([marker, title, note], index) => {
-        const on = Math.max(0, Math.min(1, tipsIn * 3 - index));
-        return h(Box, { key: index, flexDirection: 'row' },
-          h(Text, { color: mix(p.bg, p.brand, on), bold: true }, marker),
-          h(Text, { color: mix(p.bg, p.text, on) }, title.padEnd(20)),
-          width >= 70 ? h(Text, { color: mix(p.bg, p.faint, on) }, note) : null,
-        );
-      })) : null,
-    room(10) ? h(Box, { marginTop: 1 },
-      h(Text, { color: mix(p.bg, p.faint, tipsIn), italic: true }, `tip: ${startupTip()}`)) : null,
-  );
-}
-
-/**
- * Lay the transcript out.
- *
- * Separate from the component that draws it, and called by `App` BEFORE any of its
- * children render. Everything derived from the layout — the scroll ceiling, the screen
- * map the drag handler reads, the click regions, the sticky prompt — has to be known
- * before the chrome that displays it is rendered. Computing them inside the transcript
- * component meant the header above it was drawn from the PREVIOUS frame's numbers, so
- * the pinned prompt was always one scroll behind.
- */
-function layoutTranscript(state, width, height, top) {
-  const inner = Math.max(24, width - 2);
-  const rows = [];
-  // Where each prompt starts, so the sticky header can name the one whose answer is
-  // currently on screen rather than always the newest.
-  const prompts = [];
-  for (const entry of state.transcript) {
-    const built = rowsFor(entry, inner);
-    if (!built.length) continue;
-    if (rows.length) rows.push([]);
-    if (entry.kind === 'user') prompts.push({ at: rows.length, text: String(entry.data.text || '') });
-    rows.push(...built);
-  }
-  if (state.live && state.live.text) {
-    const built = rowsFor(state.live.entry, inner);
-    if (built.length) {
-      if (rows.length) rows.push([]);
-      rows.push(...built);
-    }
-  }
-
-  // The scroll ceiling. It was previously applied only where the rows were drawn, while
-  // the controller let the offset grow without bound — so scrolling up past the top kept
-  // incrementing a number nothing could see, and scrolling back down did nothing at all
-  // until it had counted its way home. That is the "scroll gets stuck" report: it was
-  // not stuck, it was somewhere off the top of a list that had already ended.
-  const maxOffset = Math.max(0, rows.length - height);
-  state.maxScroll = maxOffset;
-  const offset = state.viewingTranscript ? clamp(state.transcriptOffset, 0, maxOffset) : 0;
-  // Snap the stored offset to what will actually be drawn: this is the only place that
-  // knows how many rows exist at this width, so it is the authority, and writing the
-  // clamped value back is what keeps the controller's bound self-correcting.
-  state.transcriptOffset = offset;
-  if (!offset) state.viewingTranscript = false;
-
-  const end = rows.length - offset;
-  const first = Math.max(0, end - height);
-  const visible = rows.slice(first, end);
-  // Bottom-anchored: a short conversation sits at the composer, not floating at the top
-  // of an empty screen with the input a dozen rows below it.
-  const pad = Math.max(0, height - visible.length);
-  const screenTop = top + pad + 1;
-
-  // The drag handler needs the text under the pointer, and it must be the text actually
-  // on screen rather than the transcript's idea of it.
-  state.screen = { top: screenTop, left: 2, rows: visible };
-
-  // The sticky header names the prompt whose answer you are looking at — the last one
-  // that has scrolled off the top. Scroll far enough that the prompt itself is back on
-  // screen and there is nothing to pin; scroll past it and it becomes the one before.
-  const owning = prompts.filter((entry) => entry.at < first).at(-1);
-  state.stickyPrompt = owning ? owning.text : '';
-
-  return { visible, pad, screenTop };
-}
-
-/**
- * How to select text, in words that are true for THIS terminal.
- *
- * Dragging selects inside the app everywhere and copies on release. What differs is the
- * way back to the terminal's own selection while the app has the mouse: Shift in most
- * terminals, Option in iTerm2 — and nothing at all in macOS Terminal, which has no
- * bypass key. "shift+drag selects" was shown to everyone, and on a Mac it is simply
- * wrong.
- */
-export function selectHint(env = process.env, platform = process.platform) {
-  const term = env.TERM_PROGRAM || '';
-  if (term === 'iTerm.app') return 'drag copies · ⌥ drag: native';
-  if (term === 'Apple_Terminal') return 'drag or double-click copies';
-  if (platform === 'darwin' && !term) return 'drag copies · ⌥ drag: native';
-  return 'drag copies · shift drag: native';
-}
-
-/** Register every URL on screen as a click target. */
-function registerLinkHits(visible, screenTop, hits) {
-  if (!hits) return;
-  visible.forEach((row, index) => {
-    const text = rowText(row);
-    for (const match of text.matchAll(URL_IN_TEXT)) {
-      const url = match[0].replace(/[.,;:)\]]+$/, '');
-      hits.add({
-        x1: 2 + match.index,
-        x2: 2 + match.index + url.length - 1,
-        y1: screenTop + index,
-        y2: screenTop + index,
-        action: { type: 'link', url },
-      });
-    }
-  });
-}
-
-function Transcript({ state, width, height, layout }) {
-  const painted = paintSelection(layout.visible, state.selection, layout.screenTop, 2);
-  return h(Box, { flexDirection: 'column', width, height, paddingX: 1, overflow: 'hidden' },
-    layout.pad ? h(Box, { height: layout.pad }) : null,
-    h(Rows, { rows: painted }),
-  );
-}
-
-// Trailing punctuation is stripped by the caller: "see https://x.com/a." ends a sentence
-// far more often than it names a path called `.`.
-const URL_IN_TEXT = /https?:\/\/[^\s<>"'`]+/g;
-
-/**
- * Draw the drag selection.
- *
- * Mouse reporting takes the terminal's own highlight away, so if the app does not draw
- * one there is no feedback at all while dragging — which is indistinguishable from
- * selection being broken, because from the user's side it is.
- */
-function paintSelection(rows, selection, screenTop, left) {
-  if (!selection || !selection.anchor || !selection.focus) return rows;
-  const a = selection.anchor;
-  const b = selection.focus;
-  const [from, to] = (a.y < b.y || (a.y === b.y && a.x <= b.x)) ? [a, b] : [b, a];
-  if (from.y === to.y && from.x === to.x) return rows;
-
-  return rows.map((row, index) => {
-    const y = screenTop + index;
-    if (y < from.y || y > to.y) return row;
-    const startCol = y === from.y ? Math.max(0, from.x - left) : 0;
-    const endCol = y === to.y ? Math.max(0, to.x - left + 1) : rowText(row).length;
-    return inverseRange(row, startCol, endCol);
-  });
-}
-
-/**
- * The line that proves the thing is alive.
- *
- * It carries four facts the user actually asks for while waiting: that work is
- * happening, what it is, how long it has been, and how to stop it. The previous
- * version carried only the first.
- */
-function WorkBar({ state, width }) {
-  const p = palette();
-  if (!state.busy && !state.status) return null;
-  const label = plain(state.status) || 'Working';
-  const narrow = width < 70;
-  return h(Box, { flexDirection: 'row', paddingX: 1 },
-    h(Spinner, { kind: ascii() ? 'ascii' : 'braille' }),
-    h(Text, null, ' '),
-    h(Shimmer, { from: p.brand, to: p.brandSoft }, truncatePlain(label, Math.max(12, width - (narrow ? 22 : 46)))),
-    h(Spacer),
-    state.turnStartedAt ? h(Elapsed, { since: state.turnStartedAt }) : null,
-    state.turnTokens ? h(Text, { color: p.faint }, `  ${state.turnTokens.toLocaleString()} tok`) : null,
-    narrow ? null : h(Text, { color: p.faint }, `  esc ${g('↩', '')}stop`),
-  );
-}
-
-const truncatePlain = (text, width) => (stringWidth(text) <= width ? text : `${String(text).slice(0, Math.max(1, width - 1))}…`);
-
-function Menu({ state, width }) {
-  const p = palette();
-  if (!state.menu.length) return null;
-  const labelWidth = Math.min(28, Math.max(...state.menu.map((item) => stringWidth(item.label))) + 2);
-  return h(Box, { flexDirection: 'column', marginBottom: 1 },
-    state.menu.map((item, index) => {
-      const selected = index === state.menuIndex;
-      const spans = [
-        { t: selected ? `${g('▸', '>')} ` : '  ', color: p.brand, bold: true },
-        ...highlightMatch(item.label, item.hits || [], selected ? p.text : p.muted, p.brand),
-      ];
-      const used = stringWidth(item.label) + 2;
-      if (item.summary && width > 60) {
-        spans.push({ t: ' '.repeat(Math.max(1, labelWidth - used + 2)) });
-        spans.push({ t: item.summary, color: p.faint });
-      }
-      return h(Box, {
-        key: `${item.value}-${index}`,
-        backgroundColor: selected ? p.raised : undefined,
-      }, h(Row, { spans: truncateRow(spans, width - 2) }));
-    }),
-  );
-}
-
-function Composer({ state, width }) {
-  const p = palette();
-  const inner = Math.max(16, width - 4);
-  const bang = state.input.startsWith('!');
-  const promptMark = bang ? '! ' : `${g('›', '>')} `;
-  const promptColor = bang ? p.yellow : p.brand;
-
-  // A paste placeholder is a chip, not prose: it stands for content that is really
-  // there and will be sent, so it reads as an object rather than as something you typed
-  // and might have to delete.
-  const composed = [];
-  let at = 0;
-  for (const match of state.input.matchAll(/\[#\d+ pasted [^\]]*\]/g)) {
-    if (match.index > at) composed.push({ t: state.input.slice(at, match.index), color: p.text });
-    composed.push({ t: match[0], color: p.purple, backgroundColor: p.raised });
-    at = match.index + match[0].length;
-  }
-  if (at < state.input.length) composed.push({ t: state.input.slice(at), color: p.text });
-
-  const lines = state.input ? wrapRow(composed, inner - 2) : [[]];
-  const placeholder = state.placeholder || 'Describe a change, ask a question, or / for commands';
-
-  // The caret is drawn as its own element on the line that owns the cursor, so it
-  // blinks without the text around it re-rendering.
-  const caretLine = state.input ? lineOfCursor(state.input, state.cursor, inner - 2) : 0;
-
-  const borderColor = state.busy ? p.brand : state.menu.length ? p.teal : p.line;
-
-  return h(Box, {
-    flexDirection: 'column',
-    borderStyle: ascii() ? 'classic' : 'round',
-    borderColor,
-    paddingX: 1,
-    width,
-  },
-    h(Menu, { state, width: inner }),
-    h(Box, { flexDirection: 'row' },
-      h(Text, { color: promptColor, bold: true }, promptMark),
-      h(Box, { flexDirection: 'column', width: inner - 2 },
-        lines.map((row, index) => h(Box, { key: index, flexDirection: 'row' },
-          h(Row, { spans: row, wrap: 'wrap' }),
-          // The caret is always present, including at an empty prompt. Hiding it there
-          // was meant to keep it off the placeholder, but the result is a prompt with
-          // no cursor at all — there is nothing on screen saying the app is waiting for
-          // typing, which is the one thing a prompt has to say. The placeholder sits
-          // AFTER the caret instead, so the caret is at the insertion point either way.
-          index === caretLine ? h(Caret, { color: p.brand, char: g('▏', '_') }) : null,
-          !state.input && index === 0
-            ? h(Text, { color: p.faint, italic: true, wrap: 'truncate-end' }, placeholder)
-            : null,
-        )),
-      ),
-    ),
-    state.queued.length
-      ? h(Box, { marginTop: 1 }, h(Text, { color: p.purple }, `${g('⏎', '>')} ${state.queued.length} message${state.queued.length === 1 ? '' : 's'} queued — they send when this turn finishes`))
-      : null,
-    state.attachments.length
-      ? h(Box, { marginTop: 1 }, h(Text, { color: p.purple }, state.attachments.map((a) => `${g('⧉', '[img]')} ${a.name || 'image'}`).join('   ')))
-      : null,
-  );
-}
-
-function lineOfCursor(input, cursor, width) {
-  const rows = wrapRow([{ t: input }], width);
-  let seen = 0;
-  for (let i = 0; i < rows.length; i++) {
-    const text = rows[i].map((s) => s.t).join('');
-    seen += text.length;
-    if (cursor <= seen) return i;
-    seen += 1; // the space the wrap consumed
-  }
-  return Math.max(0, rows.length - 1);
-}
-
-function StatusBar({ state, width }) {
-  const p = palette();
-  if (state.flash) {
-    const tone = { ok: p.teal, warn: p.yellow, info: p.muted }[state.flash.tone] || p.muted;
-    const mark = { ok: g('✓', '+'), warn: '!', info: g('›', '>') }[state.flash.tone] || g('›', '>');
-    return h(Box, { paddingX: 1 },
-      h(Text, { color: tone, bold: true }, `${mark} `),
-      h(Text, { color: tone, wrap: 'truncate-end' }, plain(state.flash.text)));
-  }
-  if (state.statusLine) {
-    return h(Box, { paddingX: 1 }, h(Text, { color: p.muted, wrap: 'truncate-end' }, plain(state.statusLine)));
-  }
-  const bits = state.viewingTranscript
-    ? [
-      [`${g('▲', '^')} history`, p.yellow],
-      [state.newMessages ? `${state.newMessages} new below` : 'scrolled back', p.muted],
-      ['ctrl+end to live', p.faint],
-    ]
-    : width < 70
-      ? [['ctrl+p palette', p.faint], ['shift+tab mode', p.faint]]
-      : [
-        ['ctrl+p palette', p.faint],
-        ['shift+tab mode', p.faint],
-        ['ctrl+l clear', p.faint],
-        ['esc esc rewind', p.faint],
-        // Mouse reporting takes the terminal's own text selection away, so the way to
-        // get it back has to be on screen — otherwise the first thing a new user
-        // notices is that they can no longer copy anything.
-        state.mouse ? [selectHint(), p.faint] : ['ctrl+d debug', p.faint],
-      ];
-  const spans = [];
-  bits.forEach(([text, color], index) => {
-    if (index) spans.push({ t: `  ${g('·', '|')}  `, color: p.faint });
-    spans.push({ t: text, color });
-  });
-  const right = [];
-  if (state.spent?.turns) {
-    right.push({ t: `${state.spent.turns} turn${state.spent.turns === 1 ? '' : 's'}`, color: p.faint });
-    right.push({ t: `  ${g('·', '|')}  `, color: p.faint });
-    right.push({ t: `${((state.spent.input || 0) + (state.spent.cached || 0) + (state.spent.output || 0)).toLocaleString()} tok`, color: p.faint });
-  }
-  return h(Box, { flexDirection: 'row', paddingX: 1, width },
-    h(Row, { spans }),
-    h(Spacer),
-    h(Row, { spans: right }),
-  );
-}
-
-// ─── Overlays ───────────────────────────────────────────────────────────────────
-
-/**
- * Exact height, so the box can be exactly centred.
- *
- * Ink will not tell you how tall a Box is until after it has laid it out, and an
- * absolutely-positioned element has to be given its `top` before that happens. So the
- * height is computed the same way Yoga will: borders, padding, and every row and margin
- * in order. Guessing it — which is what a constant like `6 + options` was — puts the
- * overlay a few rows off centre and the error grows with the content.
- */
-function dialogHeight(questionRows, previewRows, optionCount) {
-  return 2            // border top + bottom
-    + 2               // paddingY
-    + 1               // title
-    + 1 + questionRows
-    + (previewRows ? 1 + previewRows : 0)
-    + 1 + optionCount
-    + 1 + 1;          // gap + hint
-}
-
-function Dialog({ state, width, height, hits }) {
-  const p = palette();
-  const dialog = state.dialog;
-  if (!dialog) return null;
-  const boxWidth = Math.min(Math.max(48, Math.floor(width * 0.78)), width - 4);
-  const previewRows = (dialog.preview || []).slice(0, 12);
-  const questionRows = wrapRow([{ t: plain(dialog.question) }], boxWidth - 6).length;
-  const rows = dialogHeight(questionRows, previewRows.length, dialog.options.length);
-  const accent = dialog.tone === 'danger' ? p.red : p.brand;
-
-  const top = Math.max(0, Math.round((height - rows) / 2));
-  const left = Math.max(0, Math.round((width - boxWidth) / 2));
-
-  // The whole box swallows clicks first, so nothing lands on the header behind it; the
-  // option rows are registered after and therefore win inside their own row. The
-  // arithmetic mirrors dialogHeight() exactly — terminal rows are 1-based, hence the +1.
-  hits?.add({ x1: left + 1, x2: left + boxWidth, y1: top + 1, y2: top + rows, action: { type: 'swallow' } });
-  const optionsTop = top + 2 + 1 + 1 + questionRows + (previewRows.length ? 1 + previewRows.length : 0) + 1;
-  dialog.options.forEach((option, index) => {
-    hits?.add({
-      x1: left + 1, x2: left + boxWidth, y1: optionsTop + index + 1, y2: optionsTop + index + 1,
-      action: { type: 'dialogOption', index },
-    });
-  });
-
-  return h(Box, { position: 'absolute', top, left, width: boxWidth },
-    h(Reveal, { rows },
-      h(Box, {
-        flexDirection: 'column',
-        width: boxWidth,
-        borderStyle: ascii() ? 'classic' : 'round',
-        borderColor: accent,
-        backgroundColor: p.surface,
-        paddingX: 2,
-        paddingY: 1,
-      },
-        h(Box, { flexDirection: 'row' },
-          h(Text, { color: accent, bold: true }, `${g('◆', '#')} ${dialog.title || 'Permission required'}`),
-          h(Spacer),
-          h(Text, { color: p.faint }, `${dialog.options.length} option${dialog.options.length === 1 ? '' : 's'}`),
-        ),
-        h(Box, { marginTop: 1, flexDirection: 'column' },
-          wrapRow([{ t: plain(dialog.question), color: p.text }], boxWidth - 6)
-            .map((row, index) => h(Row, { key: index, spans: row }))),
-        previewRows.length
-          ? h(Box, { marginTop: 1, flexDirection: 'column' },
-            previewRows.map((line, index) => h(Row, {
-              key: index,
-              spans: truncateRow(previewSpans(line, p), boxWidth - 6),
-            })))
-          : null,
-        h(Box, { marginTop: 1, flexDirection: 'column' },
-          dialog.options.map((option, index) => {
-            const selected = index === dialog.index;
-            return h(Box, { key: `${option.value}-${index}`, backgroundColor: selected ? p.raised : undefined },
-              h(Text, { color: selected ? accent : p.muted, bold: selected },
-                `${selected ? g(' ▸ ', ' > ') : '   '}${index + 1}. ${plain(option.label)}`));
-          })),
-        h(Box, { marginTop: 1 },
-          h(Text, { color: p.faint }, `${g('↑↓', 'up/dn')} choose  ·  1-9 jump  ·  enter confirm  ·  esc ${dialog.hideComment ? 'cancel' : 'deny'}`)),
-      ),
-    ),
-  );
-}
-
-function previewSpans(line, p) {
-  const text = plain(line);
-  if (text.startsWith('+')) return [{ t: text, color: p.addFg, backgroundColor: p.addBg }];
-  if (text.startsWith('-')) return [{ t: text, color: p.delFg, backgroundColor: p.delBg }];
-  if (text.startsWith('@@')) return [{ t: text, color: p.hunkFg }];
-  return [{ t: text, color: p.muted }];
-}
-
-function Panel({ state, width, height, hits }) {
-  const p = palette();
-  const panel = state.panel;
-  if (!panel) return null;
-  const boxWidth = Math.min(Math.max(52, Math.floor(width * 0.84)), width - 4);
-  // Leave room for the box's own chrome (8 rows) plus a margin, and never grow past
-  // what the content needs — a palette with four matches should be four rows tall, not
-  // a half-screen box with an empty lower half.
-  const maxRows = Math.max(4, Math.min(height - 10, 18));
-
-  let body;
-  let bodyRows;
-  let firstVisible = 0;
-  if (panel.palette) {
-    // Keep the selection in view without letting the window run past either end.
-    const visible = Math.min(maxRows, panel.options.length);
-    firstVisible = Math.max(0, Math.min(panel.index - Math.floor(visible / 2), panel.options.length - visible));
-    const view = panel.options.slice(firstVisible, firstVisible + visible);
-    bodyRows = Math.max(1, view.length);
-    body = view.map((option, index) => {
-      const globalIndex = firstVisible + index;
-      const selected = globalIndex === panel.index;
-      const name = typeof option === 'string' ? option : option.name;
-      const summary = typeof option === 'string' ? '' : option.summary || '';
-      return h(Box, { key: `${name}-${index}`, backgroundColor: selected ? p.raised : undefined, flexDirection: 'row' },
-        h(Text, { color: selected ? p.brand : p.muted, bold: selected }, `${selected ? g(' ▸ ', ' > ') : '   '}${name.padEnd(Math.min(26, boxWidth - 10))}`),
-        summary ? h(Text, { color: p.faint, wrap: 'truncate-end' }, summary) : null,
-      );
-    });
-    if (!view.length) {
-      body = [h(Text, { key: 'none', color: p.faint, italic: true }, `nothing matches “${panel.filter || ''}”`)];
-      bodyRows = 1;
-    }
-  } else {
-    const rows = (panel.rows || []).slice(-maxRows);
-    const lines = (panel.lines || []).slice(-maxRows);
-    bodyRows = Math.max(1, rows.length || lines.length);
-    body = rows.length
-      ? [h(Rows, { key: 'rows', rows })]
-      : lines.map((line, index) => h(Text, { key: index, color: p.text, wrap: 'truncate-end' }, plain(line)));
-  }
-
-  // border 2 + padY 2 + title 1 + gap 1 + body + gap 1 + hint 1
-  const rows = 8 + bodyRows;
-  const top = Math.max(0, Math.round((height - rows) / 2));
-  const left = Math.max(0, Math.round((width - boxWidth) / 2));
-
-  hits?.add({ x1: left + 1, x2: left + boxWidth, y1: top + 1, y2: top + rows, action: { type: 'swallow' } });
-  if (panel.palette) {
-    const bodyTop = top + 2 + 1 + 1;
-    for (let i = 0; i < bodyRows; i++) {
-      hits?.add({
-        x1: left + 1, x2: left + boxWidth, y1: bodyTop + i + 1, y2: bodyTop + i + 1,
-        action: { type: 'paletteRow', index: firstVisible + i },
-      });
-    }
-  }
-
-  return h(Box, { position: 'absolute', top, left, width: boxWidth },
-    h(Reveal, { rows },
-      h(Box, {
-        flexDirection: 'column',
-        width: boxWidth,
-        borderStyle: ascii() ? 'classic' : 'round',
-        borderColor: p.teal,
-        backgroundColor: p.surface,
-        paddingX: 2,
-        paddingY: 1,
-      },
-        h(Box, { flexDirection: 'row' },
-          h(Text, { color: p.teal, bold: true }, plain(panel.title)),
-          h(Spacer),
-          panel.palette ? h(Text, { color: p.faint }, `${panel.options.length}`) : null,
-        ),
-        h(Box, { marginTop: 1, flexDirection: 'column' }, body),
-        h(Box, { marginTop: 1 }, h(Text, { color: p.faint }, panel.palette
-          ? `type to filter  ·  ${g('↑↓', 'up/dn')} choose  ·  enter run  ·  esc close`
-          : `${g('↑↓', 'up/dn')} scroll  ·  esc close`)),
-      ),
-    ),
-  );
-}
-
-// ─── The app ────────────────────────────────────────────────────────────────────
-
-function App({ controller }) {
-  // Ink's hook answers in `{columns, rows}`, not `{width, height}`. Destructuring the
-  // wrong names yields two `undefined`s that propagate into every wrap and clamp as
-  // NaN — comparisons against NaN are all false, so the layout does not throw, it just
-  // silently breaks one word per line. Worth naming, because nothing in the output
-  // points at the hook.
-  const size = useWindowSize();
-  const width = Math.max(30, size?.columns || process.stdout.columns || 80);
-  const height = Math.max(10, size?.rows || process.stdout.rows || 24);
-  const { exit } = useApp();
-  const [, setTick] = React.useState(0);
-  const p = palette();
-
-  React.useEffect(() => {
-    controller.attach(setTick);
-    return () => controller.attach(() => {});
-  }, [controller]);
-
-  useCursor({ visible: false });
-  useInput((input, key) => controller.handleKey(input, key, exit));
-  // Bracketed paste. Without it a pasted block arrives as ordinary input, and the first
-  // newline in it SUBMITS — so pasting a stack trace sent its first line and left the
-  // rest in the box. Ink keeps paste off the useInput channel entirely while this is
-  // mounted, so the two cannot race.
-  usePaste((text) => controller.handlePaste(text));
-
-  // A resize invalidates anything expressed in screen coordinates. The transcript
-  // re-wraps at the new width, so a selection made at the old one now highlights
-  // unrelated text, and the hit map is rebuilt from scratch on the next frame anyway.
-  React.useEffect(() => { controller.onResize(width, height); }, [controller, width, height]);
-
-  const state = controller.state;
-  const composerRows = CHROME.composerFrame
-    + (state.menu.length ? state.menu.length + 1 : 0)
-    + Math.max(0, composerTextRows(state, width) - 1)
-    + (state.queued.length ? 2 : 0)
-    + (state.attachments.length ? 2 : 0);
-  const workRows = state.busy || state.status ? 1 : 0;
-  // A single pinned line showing what was last asked, while the transcript is scrolled
-  // away from it. Scrolling back through a long answer and losing track of the question
-  // it was answering is the specific thing this fixes.
-  const stickyRows = state.viewingTranscript ? 1 : 0;
-  const transcriptHeight = Math.max(3, height - CHROME.header - CHROME.status - composerRows - workRows - CHROME.gapAboveComposer - stickyRows);
-
-  // The welcome stands until there is real conversation. Anything chrome-ish — a
-  // notice, a stray pre-formatted print from an older code path — must not suppress it:
-  // one such line was enough to make the whole welcome screen, logo included, invisible,
-  // and nothing about the result suggested why.
-  const CONVERSATION = new Set(['user', 'assistant', 'tool', 'diff', 'todo', 'error']);
-  const showHero = state.home && !state.live && !state.transcript.some((e) => CONVERSATION.has(e.kind));
-
-  // Immediate-mode hit testing: the regions are rebuilt from the same numbers that
-  // produce the layout, every frame. Anything measured after the fact would be a second
-  // source of truth for where things are, and the two would drift.
-  const hits = controller.hits;
-  hits.reset();
-  const transcriptTop = CHROME.header + stickyRows;                  // 0-based row above the transcript
-  // Laid out here, before anything renders, so the header above the transcript is drawn
-  // from THIS frame's numbers rather than the previous one's.
-  const layout = showHero
-    ? { visible: [], pad: 0, screenTop: transcriptTop + 1 }
-    : layoutTranscript(state, width, transcriptHeight, transcriptTop);
-  hits.add({ x1: 1, x2: width, y1: transcriptTop + 1, y2: transcriptTop + transcriptHeight, action: { type: 'transcript' } });
-  registerLinkHits(layout.visible, layout.screenTop, hits);
-  registerHeaderHits(state, width, hits);
-  hits.add({ x1: 1, x2: width, y1: height, y2: height, action: { type: 'status' } });
-  if (state.menu.length) {
-    const menuTop = height - CHROME.status - composerRows + 1;       // inside the composer border
-    state.menu.forEach((_item, index) => {
-      hits.add({ x1: 2, x2: width - 1, y1: menuTop + index + 1, y2: menuTop + index + 1, action: { type: 'menuRow', index } });
-    });
-  }
-
-  return h(Box, { flexDirection: 'column', width: '100%', height: '100%' },
-    h(Header, { state, width }),
-    stickyRows ? h(StickyPrompt, { state, width }) : null,
-    showHero
-      ? h(Hero, { state, width, height: transcriptHeight })
-      : h(Transcript, { state, width, height: transcriptHeight, layout }),
-    h(Box, { height: CHROME.gapAboveComposer }),
-    h(WorkBar, { state, width }),
-    h(Box, { paddingX: 1 }, h(Composer, { state, width: width - 2 })),
-    h(StatusBar, { state, width }),
-    h(Panel, { state, width, height, hits }),
-    h(Dialog, { state, width, height, hits }),
-  );
-}
-
-function composerTextRows(state, width) {
-  if (!state.input) return 1;
-  return Math.min(8, wrapRow([{ t: state.input }], Math.max(8, width - 8)).length);
-}
-
-/**
- * The prompt currently being answered on screen.
- *
- * Published by the transcript each frame rather than read from the end of the list: the
- * useful line while scrolling back through a long session is the question THIS part of
- * the conversation was answering, not whatever was asked most recently. Scroll far
- * enough up and it becomes the previous exchange's question; scroll to where the prompt
- * itself is visible and there is nothing to pin.
- */
-function StickyPrompt({ state, width }) {
-  const p = palette();
-  const text = String(state.stickyPrompt || '').replace(/\s+/g, ' ').trim();
-  return h(Box, { flexDirection: 'row', paddingX: 1, width, backgroundColor: p.raised },
-    h(Text, { color: p.brand, bold: true }, `${g('▌', '|')} `),
-    h(Text, { color: text ? p.muted : p.faint, wrap: 'truncate-end' },
-      text || 'the start of this conversation'),
-    h(Spacer),
-    h(Text, { color: p.faint }, ` ${g('↑', '^')} scrolled`),
-  );
-}
-
-/**
- * The header's right-hand side is a row of controls, not a readout — the mode, the
- * model and the context meter all do something when clicked.
- *
- * The columns are computed from the same strings the header renders, walking right to
- * left from the edge, so a click lands on the thing it looks like it is on. Anything
- * here that stops matching Header() shows up immediately as a click that misses — which
- * is why tests/tui-render.js slices the rendered row at these exact columns.
- */
-function registerHeaderHits(state, width, hits) {
-  const m = state.meta;
-  const narrow = width < 78;
-  const mode = MODE_LABEL[m.mode] || 'ask';
-  const model = narrow ? shortModel(m.model) : String(m.model || 'auto');
-
-  let right = width - 1;                       // 1-based column of the last cell (paddingX 1)
-  if (!narrow) {
-    const meter = 8 + 1 + stringWidth(m.ctx || '0 tok');
-    hits.add({ x1: right - meter + 1, x2: right, y1: 1, y2: 1, action: { type: 'context' } });
-    right -= meter + 5;                        // the '  ·  ' separator
-  }
-  hits.add({ x1: right - stringWidth(model) + 1, x2: right, y1: 1, y2: 1, action: { type: 'model' } });
-  right -= stringWidth(model) + 5;
-  hits.add({ x1: right - mode.length + 1, x2: right, y1: 1, y2: 1, action: { type: 'mode' } });
-}
-
-// ─── Controller ─────────────────────────────────────────────────────────────────
-
-export function createTui({ slashCommands = [], fileProvider = null, meta = {}, onModeCycle = null, settings = null } = {}) {
-  publishSettings(settings);
-
-  const commands = slashCommands.map((command) => (typeof command === 'string' ? { name: command, summary: '' } : command));
-
-  const state = {
-    active: false, busy: false, home: true,
-    input: '', cursor: 0, placeholder: '',
-    menu: [], menuIndex: -1,
-    history: [], historyIndex: -1, draft: null,
-    queued: [], attachments: [],
-    status: '', statusLine: '',
-    // A short notice — "Copied 40 characters", "Opened <link>" — shown on the status
-    // line for a moment. Deliberately NOT `status`: that is the live working status the
-    // work bar draws with a spinner, so a notice put there looked like a task running,
-    // and clearing it could wipe the real status of a turn in flight.
-    flash: null,
-    transcript: [], live: null, activity: [],
-    transcriptOffset: 0, newMessages: 0, viewingTranscript: false,
-    dialog: null, panel: null, mouse: false, selection: null, screen: null, maxScroll: 0, pastes: [],
-    onLine: null, onEscape: null, onRewind: null, onCommand: null, onCopy: null, onModeCycle,
-    debug: !!process.env.JAITUS_DEBUG, introDone: false,
-    turnStartedAt: null, turnTokens: 0,
-    spent: { turns: 0, input: 0, cached: 0, output: 0 },
-    meta: { model: 'loading…', mode: 'default', ctx: '0 tok', ctxUsed: 0, ctxMax: 1, intent: 'build', ...meta },
-  };
-
-  let inkInstance = null;
-  let update = () => {};
-  let pending = null;
-  let exited = false;
-  const hits = createHitMap();
-  const scrollStep = () => {
-    const n = Number(settings?.scrollSpeed);
-    return Math.max(1, Math.round((Number.isFinite(n) && n > 0 ? n : 1) * 3));
-  };
-
-  /**
-   * Coalesce notifications to one per animation frame.
-   *
-   * A streaming response calls print thousands of times a second. Re-rendering per
-   * chunk pins a core and makes typing lag behind the keyboard; batching at 16ms costs
-   * nothing visually and keeps input responsive under a full-speed stream.
-   */
-  function notify() {
-    if (pending) return;
-    pending = setTimeout(() => { pending = null; update((value) => value + 1); }, 16);
-    if (pending.unref) pending.unref();
-  }
-  function notifyNow() {
-    if (pending) { clearTimeout(pending); pending = null; }
-    update((value) => value + 1);
-  }
-
-  /**
-   * The brand lockup, as transcript row zero.
-   *
-   * Deliberately an ENTRY rather than chrome. It scrolls like anything else, so it is
-   * never sticky and never costs a row of the working area — and because it is the
-   * first thing in the scrollback it is still there at the top of a thousand-turn
-   * session. The welcome screen owns the same lockup for the fresh-session moment; this
-   * is what keeps it on screen once real conversation replaces that.
-   */
-  function seedBanner() {
-    if (process.env.JAITUS_NO_BANNER) return;
-    if (state.transcript[0]?.kind === 'banner') return;
-    state.transcript.unshift(makeEntry('banner', { version: state.meta.version }));
-  }
-
-  let flashTimer = null;
-  /** Show a notice on the status line for `ms`, then take it down — with a redraw. */
-  function flash(text, tone = 'ok', ms = 1600) {
-    if (flashTimer) clearTimeout(flashTimer);
-    state.flash = { text: String(text), tone };
-    notifyNow();
-    flashTimer = setTimeout(() => {
-      flashTimer = null;
-      state.flash = null;
-      // notifyNow, not a bare assignment: the old clear changed state without asking
-      // for a redraw, so the notice stayed on screen until something else repainted.
-      notifyNow();
-    }, ms);
-    if (flashTimer.unref) flashTimer.unref();
-  }
-
-  function push(kind, data) {
-    const entry = makeEntry(kind, data);
-    state.transcript.push(entry);
-    // A transcript is not a log: 600 entries is far more than anyone scrolls back
-    // through, and every one held is rows cached against the current width. The banner
-    // is exempt — trimming from the front would quietly delete the brand off the top of
-    // any long session, which is the exact failure this entry exists to fix.
-    if (state.transcript.length > 600) {
-      const keep = state.transcript[0]?.kind === 'banner' ? 1 : 0;
-      state.transcript.splice(keep, state.transcript.length - 600);
-    }
-    if (state.viewingTranscript) state.newMessages += 1;
-    notify();
-    return entry;
-  }
-
-  function refreshMenu() {
-    state.menu = state.dialog || state.panel ? [] : menuItemsFor(state.input, commands, fileProvider, state.cursor);
-    state.menuIndex = state.menu.length ? clamp(state.menuIndex < 0 ? 0 : state.menuIndex, 0, state.menu.length - 1) : -1;
-  }
-
-  function insert(text) {
-    state.input = state.input.slice(0, state.cursor) + text + state.input.slice(state.cursor);
-    state.cursor += text.length;
-    refreshMenu();
-    notifyNow();
-  }
-
-  function clearInput() {
-    state.input = '';
-    state.cursor = 0;
-    state.menu = [];
-    state.menuIndex = -1;
-    notifyNow();
-  }
-
-  /**
-   * Take the highlighted suggestion.
-   *
-   * `run` submits it instead of completing it, which is what Enter does on a command:
-   * typing `/re`, pressing Enter and having the composer fill in `/review ` so you can
-   * press Enter a second time is a completion, not a shortcut. Tab still completes, for
-   * when the command needs an argument. A file suggestion is never run — `@` is always
-   * building up a message.
-   */
-  function chooseMenu({ run = false } = {}) {
-    const item = state.menu[state.menuIndex];
-    if (!item) return false;
-    const trigger = item.kind === 'command' ? '/' : '@';
-    const at = state.input.lastIndexOf(trigger, Math.max(0, state.cursor - 1));
-    const prefix = at >= 0 ? state.input.slice(0, at) : '';
-    const suffix = state.input.slice(state.cursor);
-
-    if (run && item.kind === 'command' && !prefix.trim() && !suffix.trim()) {
-      state.input = String(item.value);
-      state.cursor = state.input.length;
-      state.menu = [];
-      state.menuIndex = -1;
-      submit();
-      return true;
-    }
-
-    state.input = `${prefix}${item.value} ${suffix}`;
-    state.cursor = prefix.length + String(item.value).length + 1;
-    refreshMenu();
-    notifyNow();
-    return true;
-  }
-
-  /**
-   * A paste.
-   *
-   * Short pastes go in as text — that is what you meant, and a chip for eleven
-   * characters is a chip in the way. Anything long becomes a placeholder holding its
-   * place in the sentence, with the real content kept aside and substituted back when
-   * the message is sent. The alternative is a composer that has grown to forty rows and
-   * hidden the conversation you were pasting INTO.
-   */
-  function handlePaste(text) {
-    const value = String(text ?? '').replace(/\r\n?/g, '\n');
-    if (!value) return;
-    const lines = value.split('\n').length;
-
-    if (lines <= 3 && value.length <= 240) {
-      insert(value);
-      return;
-    }
-
-    const id = state.pastes.length + 1;
-    state.pastes.push({ id, text: value });
-    // The token has to survive being typed around, so it is bracketed and carries its
-    // own index; expansion matches on that rather than on position.
-    insert(`[#${id} pasted ${lines} line${lines === 1 ? '' : 's'}, ${value.length} chars]`);
-  }
-
-  // ── a paste chip is one thing ──
-  //
-  // It looks like a single object, so it has to behave like one. Backspacing a character
-  // off the end leaves `[#1 pasted 120 lines, 969 char` — a token that no longer matches,
-  // so the content it stands for is silently orphaned and the literal text is what gets
-  // sent. Deleting it whole is both what you meant and the only way the placeholder and
-  // the thing it holds cannot come apart.
-  const CHIP = /\[#(\d+) pasted [^\]]*\]/;
-  const chipBefore = (text, cursor) => new RegExp(`${CHIP.source}$`).exec(text.slice(0, cursor));
-  const chipAfter = (text, cursor) => new RegExp(`^${CHIP.source}`).exec(text.slice(cursor));
-
-  /** Forget the content a chip stood for, once the chip is gone. */
-  function dropPaste(id) {
-    state.pastes = state.pastes.filter((entry) => entry.id !== Number(id));
-  }
-
-  /** Put the real content back in place of every placeholder. */
-  function expandPastes(line) {
-    if (!state.pastes.length) return line;
-    return line.replace(/\[#(\d+) pasted [^\]]*\]/g, (whole, id) => {
-      const blob = state.pastes.find((entry) => entry.id === Number(id));
-      return blob ? blob.text : whole;
-    });
-  }
-
-  function submit() {
-    const typed = state.input;
-    const line = expandPastes(typed);
-    state.pastes = [];
-    clearInput();
-    if (!line.trim()) return;
-    // History keeps the TOKEN form. Pressing Up after sending a thousand-line paste
-    // should bring back the sentence you wrote, not the thousand lines.
-    if (state.history.at(-1) !== typed) state.history.push(typed);
-    state.historyIndex = state.history.length;
-    state.viewingTranscript = false;
-    state.transcriptOffset = 0;
-    state.newMessages = 0;
-    if (state.busy) state.queued.push(line);
-    else state.onLine?.(line);
-    notifyNow();
-  }
-
-  function historyMove(direction) {
-    if (!state.history.length) return;
-    if (state.historyIndex === state.history.length) state.draft = state.input;
-    state.historyIndex = clamp(state.historyIndex + direction, 0, state.history.length);
-    state.input = state.historyIndex === state.history.length ? (state.draft || '') : state.history[state.historyIndex];
-    state.cursor = state.input.length;
-    refreshMenu();
-    notifyNow();
-  }
-
-  function wordLeft() {
-    const upto = state.input.slice(0, state.cursor);
-    const match = /\S+\s*$/.exec(upto);
-    return match ? state.cursor - match[0].length : 0;
-  }
-  function wordRight() {
-    const rest = state.input.slice(state.cursor);
-    const match = /^\s*\S+/.exec(rest);
-    return match ? state.cursor + match[0].length : state.input.length;
-  }
-
-  function resolveDialog(value) {
-    const dialog = state.dialog;
-    if (!dialog) return;
-    state.dialog = null;
-    refreshMenu();
-    dialog.resolve(value);
-    notifyNow();
-  }
-
-  function resolvePanel() {
-    const panel = state.panel;
-    if (!panel) return;
-    state.panel = null;
-    refreshMenu();
-    panel.resolve?.();
-    notifyNow();
-  }
-
-  let lastEscapeAt = 0;
-  // Drag state. A press is ambiguous until release: it may be a click on a control or
-  // the start of a text selection, and treating it as either one too early breaks the
-  // other.
-  let pressedAt = null;
-  let dragged = false;
-  // Counted so /debug can distinguish "mouse reporting was requested" from "the
-  // terminal is actually sending reports". Those are different facts and only the
-  // second one means the wheel works.
-  let mouseReports = 0;
-  let lastMouseAt = 0;
-  // Half a mouse report, waiting for the rest (see isMouseFragment).
-  let mouseFragment = null;
-  // Double- and triple-click: select a word, then a line — what every terminal does,
-  // and the first thing people try when they want one word out of the output.
-  let lastClick = null;
-  let clickCount = 0;
-
-  /**
-   * Scroll the transcript. Positive is back into history.
-   *
-   * Clamped at BOTH ends against the real row count, which the transcript publishes
-   * each frame. Previously only the renderer clamped it: the offset itself grew without
-   * limit, so scrolling up past the top kept counting into a void and scrolling back
-   * down did nothing visible until it had counted all the way back. It read as the
-   * wheel sticking, at random, for a random length of time.
-   */
-  function scroll(rows) {
-    // The ceiling comes from the last frame. On the very first scroll after new content
-    // there has not been one yet, so a stale 0 would swallow the gesture — allow the
-    // move and let the renderer snap it back. It is authoritative; this is a hint.
-    const known = Math.max(0, state.maxScroll || 0);
-    const ceiling = known || (state.transcript.length ? Number.MAX_SAFE_INTEGER : 0);
-    const next = clamp(state.transcriptOffset + rows, 0, ceiling);
-    if (next === state.transcriptOffset) {
-      if (!next && state.viewingTranscript) { state.viewingTranscript = false; state.newMessages = 0; notifyNow(); }
-      return;
-    }
-    state.transcriptOffset = next;
-    state.viewingTranscript = next > 0;
-    if (!next) state.newMessages = 0;
-    notifyNow();
-  }
-
-  /** Every screen cell between two points, as text. */
-  function selectedText() {
-    const sel = state.selection;
-    const screen = state.screen;
-    if (!sel?.anchor || !sel?.focus || !screen) return '';
-    const a = sel.anchor;
-    const b = sel.focus;
-    const [from, to] = (a.y < b.y || (a.y === b.y && a.x <= b.x)) ? [a, b] : [b, a];
-    const out = [];
-    screen.rows.forEach((row, index) => {
-      const y = screen.top + index;
-      if (y < from.y || y > to.y) return;
-      const text = rowText(row);
-      const start = y === from.y ? Math.max(0, from.x - screen.left) : 0;
-      const end = y === to.y ? Math.max(0, to.x - screen.left + 1) : text.length;
-      out.push(text.slice(start, end).replace(/\s+$/, ''));
-    });
-    return out.join('\n').replace(/\n+$/, '');
-  }
-
-  /**
-   * Select the word or the whole line under a point, the way a double- or triple-click
-   * does in a terminal. Returns false when there is no text there.
-   */
-  function selectAt(point, unit) {
-    const screen = state.screen;
-    if (!screen) return false;
-    const row = screen.rows[point.y - screen.top];
-    if (!row) return false;
-    const text = rowText(row);
-    const col = point.x - screen.left;
-    let start, end;
-    if (unit === 'line') {
-      // Past the gutter: the message bullet and quote bars are decoration, not text.
-      start = text.length - text.replace(/^[\s●○◆▎│┃⎿]+/, '').length;
-      end = text.replace(/\s+$/, '').length - 1;
-    } else {
-      if (col < 0 || col >= text.length || /\s/.test(text[col])) return false;
-      // A "word" is what you would want to paste: a path, a URL, an identifier.
-      const inWord = (ch) => ch && !/[\s"'`()[\]{}<>,;]/.test(ch);
-      start = col; end = col;
-      while (inWord(text[start - 1])) start -= 1;
-      while (inWord(text[end + 1])) end += 1;
-    }
-    if (end < start) return false;
-    state.selection = { anchor: { x: screen.left + start, y: point.y }, focus: { x: screen.left + end, y: point.y } };
-    notifyNow();
-    void finishSelection();
-    return true;
-  }
-
-  function clearSelection() {
-    if (!state.selection) return;
-    state.selection = null;
-    notifyNow();
-  }
-
-  /**
-   * Finish a drag: copy what was highlighted.
-   *
-   * Copy-on-select is the terminal behaviour people expect, and taking the mouse away
-   * from the terminal took it with it. Doing it on release rather than on a menu keeps
-   * the muscle memory intact; `copyOnSelect off` turns it back into a plain highlight.
-   */
-  async function finishSelection() {
-    const text = selectedText();
-    if (!text.trim()) { clearSelection(); return; }
-    if (settings?.copyOnSelect === false) {
-      // Not "Ctrl+Shift+C": that is the TERMINAL's copy shortcut and it acts on the
-      // terminal's own selection, which does not exist while the app owns the mouse.
-      // Naming a shortcut that cannot work is worse than naming none.
-      flash(`${text.length} characters selected · jaitus config copyOnSelect on — to copy these automatically`, 'info', 4000);
-      return;
-    }
-    const ok = await (state.onCopy ? state.onCopy(text) : Promise.resolve(false));
-    if (ok) flash(`Copied ${text.length} character${text.length === 1 ? '' : 's'}`, 'ok', 1400);
-    else flash('Nothing could copy it — no clipboard tool found', 'warn', 3000);
-    // The highlight stays a moment so it is clear WHAT was copied, then goes.
-    const copied = state.selection;
-    setTimeout(() => { if (state.selection === copied) clearSelection(); }, 700);
-  }
-
-  /**
-   * A click landed on something.
-   *
-   * Everything reachable on screen does what it looks like it does: the mode pill opens
-   * the mode picker, the model name opens the model picker, the context meter offers to
-   * compact. That is the whole point of drawing them as distinct objects — an indicator
-   * you cannot act on is a thing you have to go and find a command for.
-   */
-  function dispatchClick(region, event) {
-    if (!region) return;
-    switch (region.action.type) {
-      case 'swallow':
-        return;
-      case 'dialogOption': {
-        const d = state.dialog;
-        if (!d) return;
-        d.index = clamp(region.action.index, 0, d.options.length - 1);
-        return resolveDialog({ ...d.options[d.index], comment: d.comment || '' });
-      }
-      case 'paletteRow': {
-        const panel = state.panel;
-        if (!panel?.palette) return;
-        panel.index = clamp(region.action.index, 0, Math.max(0, panel.options.length - 1));
-        const chosen = panel.options[panel.index];
-        const name = typeof chosen === 'string' ? chosen : chosen?.name;
-        state.panel = null;
-        refreshMenu();
-        if (!name) return notifyNow();
-        state.input = name;
-        state.cursor = name.length;
-        return submit();
-      }
-      case 'menuRow': {
-        state.menuIndex = clamp(region.action.index, 0, state.menu.length - 1);
-        return chooseMenu({ run: true });
-      }
-      case 'mode':
-        return void state.onModeCycle?.();
-      case 'model':
-        return void state.onCommand?.('/model');
-      case 'context':
-        return void state.onCommand?.('/context');
-      case 'link':
-        // Only http(s) reaches here — see openUrl. A terminal will happily render
-        // `file:///` or `javascript:` in text that came from a model or a fetched page,
-        // and handing either to the shell runs something nobody agreed to.
-        if (openUrl(region.action.url)) {
-          flash(`Opened ${region.action.url.slice(0, 60)}`, 'info', 1600);
-        }
-        return;
-      case 'status':
-        return openPalette();
-      case 'transcript':
-        // A click in the body is how you get back to the live end after scrolling.
-        if (state.viewingTranscript && event.button === 'left') {
-          state.viewingTranscript = false;
-          state.transcriptOffset = 0;
-          state.newMessages = 0;
-          notifyNow();
-        }
-        return;
-      default:
-    }
-  }
-
-  function openPalette() {
-    state.panel = {
-      title: 'COMMAND PALETTE', palette: true, filter: '',
-      all: commands, options: commands, index: 0, lines: [], resolve: () => {},
-    };
-    notifyNow();
-  }
-
-  function handleKey(input, key, exit) {
-    if (!state.active) return;
-
-    // ── the mouse arrives here too ──
-    //
-    // Ink does not recognise the reports, so it hands them through as ordinary input
-    // with the escape stripped. Without this guard, scrolling the wheel types
-    // `[<64;10;5M` into the composer.
-    if (mouseFragment) {
-      const fresh = Date.now() - mouseFragment.at < 300;
-      const joined = mouseFragment.text + input;
-      mouseFragment = null;
-      if (fresh && (isMouse(joined) || isMouseFragment(joined))) input = joined;
-    }
-    if (isMouseFragment(input)) {
-      mouseFragment = { text: input, at: Date.now() };
-      return;
-    }
-    if (isMouse(input)) {
-      mouseReports += 1;
-      lastMouseAt = Date.now();
-      const event = parseMouse(input);
-      if (!event) return;
-      if (event.kind === 'wheelUp') return scroll(scrollStep());
-      if (event.kind === 'wheelDown') return scroll(-scrollStep());
-
-      if (event.kind === 'down' && event.button === 'left') {
-        // A press starts a possible drag AND a possible click. Which it was is only
-        // known on release, so nothing is dispatched yet — dispatching here made every
-        // attempt to select text also press whatever was under the cursor.
-        pressedAt = { x: event.x, y: event.y };
-        dragged = false;
-        clearSelection();
-        return;
-      }
-      if (event.kind === 'drag' && pressedAt) {
-        if (event.x !== pressedAt.x || event.y !== pressedAt.y) dragged = true;
-        state.selection = { anchor: pressedAt, focus: { x: event.x, y: event.y } };
-        return notifyNow();
-      }
-      if (event.kind === 'up') {
-        const start = pressedAt;
-        pressedAt = null;
-        if (!start) return;
-        if (dragged) { dragged = false; void finishSelection(); return; }
-        const now = Date.now();
-        const again = lastClick && now - lastClick.at < 450 && lastClick.y === start.y && Math.abs(lastClick.x - start.x) <= 1;
-        clickCount = again ? clickCount + 1 : 1;
-        lastClick = { x: start.x, y: start.y, at: now };
-        const region = hits.at(start.x, start.y);
-        const onText = !region || region.action.type === 'transcript' || region.action.type === 'swallow';
-        if (clickCount >= 2 && onText && selectAt(start, clickCount >= 3 ? 'line' : 'word')) return;
-        return dispatchClick(region, event);
-      }
-      return;
-    }
-
-    // ── dialog has the keyboard ──
-    if (state.dialog) {
-      const d = state.dialog;
-      if (key.escape) return resolveDialog(undefined);
-      if (key.upArrow || key.up) { d.index = clamp(d.index - 1, 0, d.options.length - 1); return notifyNow(); }
-      if (key.downArrow || key.down) { d.index = clamp(d.index + 1, 0, d.options.length - 1); return notifyNow(); }
-      if (key.return || key.enter) return resolveDialog({ ...d.options[d.index], comment: d.comment || '' });
-      if (/^[1-9]$/.test(input)) {
-        const index = clamp(Number(input) - 1, 0, d.options.length - 1);
-        d.index = index;
-        // A number is a decision, not a cursor move: waiting for Enter after it is the
-        // most common reason a permission prompt feels unresponsive.
-        return resolveDialog({ ...d.options[index], comment: d.comment || '' });
-      }
-      return;
-    }
-
-    // ── palette / panel has the keyboard ──
-    if (state.panel) {
-      const panel = state.panel;
-      if (panel.palette) {
-        if (key.upArrow || key.up) { panel.index = clamp(panel.index - 1, 0, panel.options.length - 1); return notifyNow(); }
-        if (key.downArrow || key.down) { panel.index = clamp(panel.index + 1, 0, panel.options.length - 1); return notifyNow(); }
-        if (key.return || key.enter) {
-          const chosen = panel.options[panel.index];
-          const name = typeof chosen === 'string' ? chosen : chosen?.name;
-          state.panel = null;
-          refreshMenu();
-          if (!name) return notifyNow();
-          // Run it. Picking a command out of a palette and then being handed it to
-          // press Enter on again is a step that exists for no reason. Shift+Enter is
-          // the escape hatch for a command you want to add an argument to.
-          state.input = name;
-          state.cursor = name.length;
-          if (key.shift) { state.input = `${name} `; state.cursor = state.input.length; return notifyNow(); }
-          submit();
-          return notifyNow();
-        }
-        if (key.escape) { state.panel = null; panel.resolve?.(); return notifyNow(); }
-        if (key.backspace || key.delete) {
-          panel.filter = String(panel.filter || '').slice(0, -1);
-          applyPaletteFilter(panel);
-          return notifyNow();
-        }
-        if (input && !key.ctrl && !key.meta) {
-          panel.filter = `${panel.filter || ''}${input}`;
-          applyPaletteFilter(panel);
-          return notifyNow();
-        }
-        return;
-      }
-      if (key.escape || key.return || key.enter) resolvePanel();
-      return;
-    }
-
-    // Fast PTYs on Windows deliver a typed line and its carriage return in one chunk.
-    // Split here or the return becomes a literal character in the composer.
-    const newlineAt = String(input || '').search(/[\r\n]/);
-    if (newlineAt >= 0) {
-      const typed = String(input).slice(0, newlineAt);
-      const rest = String(input).slice(newlineAt + 1);
-      if (typed) insert(typed);
-      if (key.shift) insert('\n');
-      // This path went straight to submit(), which is why `/re` + Enter sometimes ran
-      // `/re` instead of the highlighted `/review`. Whether Enter arrives on its own or
-      // glued to the typed text is a matter of how fast the keystrokes were batched by
-      // the PTY — so the two paths have to make the same decision, or the shortcut
-      // works or does not work depending on typing speed.
-      else if (state.menu.length) chooseMenu({ run: true });
-      else submit();
-      if (rest) insert(rest);
-      return;
-    }
-
-    // Ink reports Ctrl+<letter> as `key.ctrl` with the LETTER itself in `input`; its
-    // Key type has no `name` field at all. Every `key.name === 'l'` style check in the
-    // previous version of this file was therefore dead code — Ctrl+L, Ctrl+P, Ctrl+U,
-    // Ctrl+K, Ctrl+A and Ctrl+E all did nothing, silently, because a condition that is
-    // never true is indistinguishable from a shortcut nobody presses.
-    //
-    // `key.name` is still accepted so the controller tests (and the classic renderer's
-    // readline keypress objects) can drive the same handler.
-    const ctrlKey = key.ctrl ? String(key.name || input || '').toLowerCase() : '';
-
-    if (ctrlKey === 'c') {
-      if (state.busy) state.onEscape?.();
-      else if (state.input) clearInput();
-      else flash('Type /exit to leave', 'info', 1500);
-      return;
-    }
-    if (key.shift && key.tab) { void state.onModeCycle?.(); return; }
-    if (ctrlKey === 'l') { api.clearTranscript(); return; }
-    if (ctrlKey === 'd') { api.toggleDebug(); return; }
-    if (ctrlKey === 'p') return openPalette();
-    if (key.escape) {
-      if (state.busy) return state.onEscape?.();
-      if (state.viewingTranscript) { state.viewingTranscript = false; state.transcriptOffset = 0; state.newMessages = 0; return notifyNow(); }
-      const now = Date.now();
-      if (lastEscapeAt && now - lastEscapeAt < 1200) {
-        lastEscapeAt = 0;
-        if (flashTimer) { clearTimeout(flashTimer); flashTimer = null; }
-        state.flash = null;
-        state.onRewind?.();
-      } else {
-        lastEscapeAt = now;
-        flash('Press Esc again to rewind', 'info', 1200);
-      }
-      return;
-    }
-
-    // ── scrollback ──
-    if (key.pageUp || key.pageup) return scroll(10);
-    if (key.pageDown || key.pagedown) return scroll(-10);
-    if ((key.ctrl && (key.end || ctrlKey === 'g'))) {
-      state.viewingTranscript = false; state.transcriptOffset = 0; state.newMessages = 0;
-      return notifyNow();
-    }
-    if ((key.ctrl && key.home)) return scroll(100000);
-
-    // ── menu ──
-    if ((key.upArrow || key.up) && state.menu.length) { state.menuIndex = clamp(state.menuIndex - 1, 0, state.menu.length - 1); return notifyNow(); }
-    if ((key.downArrow || key.down) && state.menu.length) { state.menuIndex = clamp(state.menuIndex + 1, 0, state.menu.length - 1); return notifyNow(); }
-    if (key.tab && state.menu.length) return chooseMenu();
-    if (key.return || key.enter) {
-      if (!key.shift && state.menu.length) return chooseMenu({ run: true });
-      if (key.shift) return insert('\n');
-      return submit();
-    }
-
-    // ── line editing ──
-    if (key.leftArrow || key.left) {
-      if (key.ctrl || key.meta) state.cursor = wordLeft();
-      else {
-        // Step over a chip, not into it. A cursor sitting inside `[#1 pasted 120 …]`
-        // can only do damage: anything typed there breaks the token.
-        const chip = chipBefore(state.input, state.cursor);
-        state.cursor = Math.max(0, state.cursor - (chip ? chip[0].length : 1));
-      }
-      return notifyNow();
-    }
-    if (key.rightArrow || key.right) {
-      if (key.ctrl || key.meta) state.cursor = wordRight();
-      else {
-        const chip = chipAfter(state.input, state.cursor);
-        state.cursor = Math.min(state.input.length, state.cursor + (chip ? chip[0].length : 1));
-      }
-      return notifyNow();
-    }
-    if (key.home || (ctrlKey === 'a')) { state.cursor = 0; return notifyNow(); }
-    if (key.end || (ctrlKey === 'e')) { state.cursor = state.input.length; return notifyNow(); }
-    if (ctrlKey === 'w') {
-      // A chip is one word. Deleting "the last word" of `…, 969 chars]` would otherwise
-      // leave a broken token behind.
-      const chip = chipBefore(state.input, state.cursor);
-      const at = chip ? state.cursor - chip[0].length : wordLeft();
-      if (chip) dropPaste(chip[1]);
-      state.input = state.input.slice(0, at) + state.input.slice(state.cursor);
-      state.cursor = at;
-      refreshMenu();
-      return notifyNow();
-    }
-    if (key.backspace) {
-      if (state.cursor === 0) return;
-      const chip = chipBefore(state.input, state.cursor);
-      const eat = chip ? chip[0].length : 1;
-      if (chip) dropPaste(chip[1]);
-      state.input = state.input.slice(0, state.cursor - eat) + state.input.slice(state.cursor);
-      state.cursor -= eat;
-      refreshMenu();
-      return notifyNow();
-    }
-    if (key.delete) {
-      const chip = chipAfter(state.input, state.cursor);
-      const eat = chip ? chip[0].length : 1;
-      if (chip) dropPaste(chip[1]);
-      state.input = state.input.slice(0, state.cursor) + state.input.slice(state.cursor + eat);
-      refreshMenu();
-      return notifyNow();
-    }
-    if (ctrlKey === 'u') { state.input = state.input.slice(state.cursor); state.cursor = 0; refreshMenu(); return notifyNow(); }
-    if (ctrlKey === 'k') { state.input = state.input.slice(0, state.cursor); refreshMenu(); return notifyNow(); }
-    if (key.upArrow || key.up) return historyMove(-1);
-    if (key.downArrow || key.down) return historyMove(1);
-    if (input && !key.ctrl && !key.meta) insert(input);
-  }
-
-  function applyPaletteFilter(panel) {
-    const filter = String(panel.filter || '');
-    if (!filter) { panel.options = panel.all; panel.index = 0; return; }
-    panel.options = panel.all
-      .map((command) => {
-        const name = typeof command === 'string' ? command : command.name;
-        const match = fuzzy(filter, name.replace(/^\//, ''));
-        return match ? { command, score: match.score } : null;
-      })
-      .filter(Boolean)
-      .sort((a, b) => b.score - a.score)
-      .map((entry) => entry.command);
-    panel.index = 0;
-  }
-
-  const api = {
-    state,
-
-    attach(fn) { update = fn; },
-    onEscape(fn) { state.onEscape = fn; },
-    onRewind(fn) { state.onRewind = fn; },
-    setMeta(next) { Object.assign(state.meta, next); notify(); },
-    setSpent(next) { Object.assign(state.spent, next || {}); notify(); },
-
-    hits,
-    onCommand(fn) { state.onCommand = fn; },
-    onCopy(fn) { state.onCopy = fn; },
-    handlePaste,
-
-    /**
-     * A resize is the one moment the screen has to be thrown away and redrawn.
-     *
-     * Ink clears only when the terminal gets NARROWER, on the reasoning that a wider
-     * one cannot leave anything behind. That is true of output that flows, and false of
-     * an app that draws a fixed number of rows: make the window shorter and the taller
-     * frame's lower rows stay on screen underneath the new one. That is the duplicated
-     * composer and the layout "breaking" on resize.
-     *
-     * Clearing on every size change costs one repaint during a drag-resize and removes
-     * the whole class of problem.
-     */
-    onResize(width, height) {
-      const last = state.lastSize;
-      state.lastSize = { width, height };
-      if (last && last.width === width && last.height === height) return;
-      // Anything expressed in screen coordinates is now about the wrong cells.
-      state.selection = null;
-      try {
-        // Both: `clear()` resets Ink's own idea of what it last wrote, and the explicit
-        // erase wipes cells Ink is no longer tracking. Ink erases only the lines it
-        // remembers writing, so after the window SHRINKS the rows of the taller frame
-        // below the new one are not in that set and would stay on screen.
-        inkInstance?.clear();
-        if (process.stdout.isTTY) process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
-      } catch { /* mid-teardown */ }
-      notifyNow();
-    },
-
-    /**
-     * What the mouse is actually doing, for `/debug`.
-     *
-     * Enabling reporting and receiving reports are different facts, and only the second
-     * one means the mouse works. A terminal that ignores the request looks identical
-     * from this side to one that is simply not being used — so the count is kept, and
-     * "requested but nothing received" is a thing the diagnostics can say out loud
-     * instead of leaving someone to guess.
-     */
-    mouseReport() {
-      return {
-        requested: !!state.mouse,
-        reportsSeen: mouseReports,
-        lastAt: lastMouseAt ? new Date(lastMouseAt).toISOString() : null,
-      };
-    },
-
-    start({ onLine, history = [] }) {
-      state.onLine = onLine;
-      state.history = [...history];
-      state.historyIndex = state.history.length;
-      state.active = true;
-      seedBanner();
-      // `alternateScreen` is not a cosmetic preference — three separate defects came
-      // from not passing it.
-      //
-      // Rendering inline, Ink reflows its output in place against a window whose height
-      // it does not own. Resize the terminal and the previous frame is still on screen
-      // under the new one: that is the duplicated composer, the doubled prompt, and the
-      // "sometimes fullscreen, sometimes not" all at once.
-      //
-      // It also breaks the mouse. Every coordinate this file computes assumes row 1 is
-      // the top of the app, which is only true on a screen the app owns. Inline, the
-      // app sits below whatever scrollback happens to be there, so clicks and drag
-      // selection land on the wrong rows — by an amount that changes as the session
-      // grows, which is why it looked intermittent rather than broken.
-      inkInstance = render(h(App, { controller: api }), {
-        alternateScreen: true,
-        exitOnCtrlC: false,
-        patchConsole: false,
-      });
-      // Mouse reporting takes over the terminal's own selection, so it is opt-out and
-      // the status bar says how to get selection back. Enabled after render so Ink's
-      // own setup cannot overwrite the mode.
-      if (settings?.mouse !== false && !process.env.JAITUS_DISABLE_MOUSE) {
-        state.mouse = enableMouse(process.stdout);
-      }
-      notifyNow();
-    },
-
-    stop() {
-      state.active = false;
-      exited = true;
-      if (pending) { clearTimeout(pending); pending = null; }
-      // Before unmount: the terminal keeps reporting after the process is gone
-      // otherwise, and every click in the shell afterwards prints escape codes.
-      disableMouse(process.stdout);
-      inkInstance?.unmount();
-      inkInstance = null;
-    },
-
-    setMouse(on) {
-      if (on) state.mouse = enableMouse(process.stdout);
-      else { disableMouse(process.stdout); state.mouse = false; }
-      notifyNow();
-      return state.mouse;
-    },
-
-    // ── structured entries ──────────────────────────────────────────────────────
-    user(text, attachments) { return push('user', { text, attachments }); },
-    assistant(text) { return push('assistant', { text }); },
-    notice(text, tone = 'dim') { return push('notice', { text, tone }); },
-    todo(items) { return push('todo', { items }); },
-    diff(file, patch, max) { return push('diff', { file, patch, max }); },
-
-    /**
-     * A tool call. Returns a handle whose `update` mutates the same entry in place, so
-     * a row goes running → ok without a second line appearing under the first.
-     */
-    tool(data) {
-      const entry = push('tool', { status: 'running', ...data });
-      return {
-        id: entry.id,
-        update(next) {
-          Object.assign(entry.data, next);
-          entry._w = -1;
-          entry._rows = null;
-          notify();
-        },
-      };
-    },
-
-    /**
-     * A failure, with everything needed to act on it.
-     *
-     * Errors were previously one dim line that scrolled past, so a session where every
-     * request was being rejected looked like a session where the model had nothing to
-     * say. They now get a red-barred block, a hint where one applies, and a folded
-     * stack that `/debug` or Ctrl+D unfolds.
-     */
-    error(error, context = {}) {
-      const value = error instanceof Error ? error : new Error(String(error?.message ?? error ?? 'Unknown error'));
-      const message = messageForError(value);
-      let hint = context.hint || hintForError(value);
-      // Our server messages often already say what to do ("run `jaitus login`"); the
-      // hint would then say it a second time, one line lower.
-      const flat = (t) => String(t || '').replace(/[`.]/g, '').toLowerCase().trim();
-      if (hint && flat(message).includes(flat(hint))) hint = '';
-      return push('error', {
-        title: context.title || titleForError(value),
-        message,
-        hint,
-        detail: context.detail || (value.requestId ? `request id ${value.requestId}` : ''),
-        // A service error's stack is this CLI's own call path — nothing in it explains
-        // what happened. Only a fault in the CLI keeps one, for /debug.
-        stack: value.name === 'JaitusError' ? '' : (value.stack || ''),
-        expanded: state.debug,
-      });
-    },
-
-    toggleDebug() {
-      state.debug = !state.debug;
-      for (const entry of state.transcript) {
-        if (entry.kind === 'error') { entry.data.expanded = state.debug; entry._w = -1; entry._rows = null; }
-      }
-      flash(state.debug ? 'Debug on — stack traces expanded' : 'Debug off', 'info', 1600);
-    },
-
-    // ── the legacy string surface ───────────────────────────────────────────────
-    //
-    // Most of the CLI still prints pre-formatted ANSI strings. Those keep working and
-    // keep their colour: `raw` parses the escapes back into spans rather than dropping
-    // them, which is what the previous renderer did.
-    print(value, kind = 'assistant') {
-      const text = String(value ?? '');
-      if (!plain(text).trim() && !/\n/.test(text)) return;
-      state.live = null;
-      if (kind === 'user') return push('raw', { ansi: text });
-      if (kind === 'error') {
-        return push('error', { title: 'Error', message: plain(text).replace(/^[✗x]\s*/, ''), stack: '', expanded: false });
-      }
-      return push('raw', { ansi: text });
-    },
-
-    printStream(value) {
-      const text = String(value ?? '');
-      if (!text) return;
-      if (!state.live) {
-        state.live = { text: '', entry: makeEntry('assistant', { text: '', compact: true }) };
-      }
-      state.live.text += plain(text);
-      state.live.entry.data.text = state.live.text;
-      state.live.entry._w = -1;
-      state.live.entry._rows = null;
-      if (!state.turnStartedAt) state.turnStartedAt = Date.now();
-      notify();
-    },
-
-    flushStream() {
-      if (state.live?.text?.trim()) {
-        const entry = state.live.entry;
-        entry.data.compact = false;
-        entry._w = -1;
-        entry._rows = null;
-        state.transcript.push(entry);
-        if (state.viewingTranscript) state.newMessages += 1;
-      }
-      state.live = null;
-      notify();
-    },
-
-    clearTranscript() {
-      state.transcript = [];
-      seedBanner();
-      state.live = null;
-      state.transcriptOffset = 0;
-      state.viewingTranscript = false;
-      state.newMessages = 0;
-      state.home = true;
-      notifyNow();
-    },
-
-    setStatusLine(value) { state.statusLine = plain(value || ''); notify(); },
-    setBusy(value) {
-      state.busy = !!value;
-      if (value) { state.turnStartedAt = Date.now(); state.turnTokens = 0; }
-      else { state.status = ''; state.turnStartedAt = null; }
-      notifyNow();
-    },
-    setStatus(value) { state.status = plain(value); notify(); },
-    flash(text, tone, ms) { flash(plain(text), tone, ms); },
-    clearStatus() { state.status = ''; notify(); },
-    setTurnTokens(n) { state.turnTokens = n | 0; notify(); },
-    setPlaceholder(text) { state.placeholder = String(text || ''); notify(); },
-    setHome(value) { state.home = !!value; notify(); },
-
-    queue(line) { state.queued.push(line); notify(); },
-    takeQueued() { const queued = state.queued; state.queued = []; notify(); return queued; },
-    hasQueued() { return state.queued.length > 0; },
-
-    addAttachment(attachment) { state.attachments.push(attachment); notify(); },
-    drainAttachments() { const list = state.attachments; state.attachments = []; notify(); return list.map((a) => a.block).filter(Boolean); },
-
-    askDialog(question, options, preview = [], opts = {}) {
-      return new Promise((resolve) => {
-        state.dialog = {
-          question: plain(question),
-          options: options.map((option) => (option && typeof option === 'object'
-            ? { label: plain(option.label ?? option.value), value: option.value }
-            : { label: plain(option), value: option })),
-          preview: preview.map(plain),
-          index: 0,
-          resolve,
-          title: opts.title,
-          tone: opts.tone,
-          hideComment: opts.hideComment,
-          comment: '',
-        };
-        state.menu = [];
-        notifyNow();
-      });
-    },
-
-    showPanel(title, lines) {
-      return new Promise((resolve) => {
-        state.panel = {
-          title: plain(title),
-          lines: (Array.isArray(lines) ? lines : String(lines).split('\n')).map((line) => plain(line)),
-          rows: null,
-          resolve,
-        };
-        notifyNow();
-      });
-    },
-
-    updatePanel(lines) {
-      if (!state.panel) return;
-      state.panel.lines = (Array.isArray(lines) ? lines : String(lines).split('\n')).map((line) => plain(line));
-      notify();
-    },
-
-    /** A theme change recolours every cached row, so they all have to be rebuilt. */
-    reskin() {
-      resetPalette();
-      invalidate(state.transcript);
-      if (state.live?.entry) { state.live.entry._w = -1; state.live.entry._rows = null; }
-      notifyNow();
-    },
-
-    recordActivity(event) {
-      const existing = event.id ? state.activity.find((item) => item.id === event.id) : null;
-      if (existing) Object.assign(existing, event, { updatedAt: Date.now() });
-      else {
-        state.activity.push({
-          id: event.id || `${Date.now()}-${state.activity.length}`,
-          name: event.name,
-          label: String(event.label || event.name || ''),
-          status: event.status || 'running',
-          detail: event.detail || '',
-          updatedAt: Date.now(),
-        });
-      }
-      if (state.activity.length > 200) state.activity.shift();
-      notify();
-      return existing?.id || state.activity.at(-1)?.id;
-    },
-    activitySnapshot() { return state.activity.map((item) => ({ ...item })); },
-
-    bellIfAway() {
-      // A terminal bell is the only cross-platform "I need you" a CLI has. Suppressed
-      // under reduced motion, which is also where people who do not want surprises are.
-      if (!motionOn()) return;
-      try { process.stdout.write(''); } catch { /* a bell is never worth an error */ }
-    },
-    animationsOn() { return state.active && motionOn(); },
-    redraw() { notifyNow(); },
-
-    get exited() { return exited; },
-    handleKey,
-  };
-
-  return api;
-}
-
-// A JaitusError brings its own title and hint, written in errors.js. Anything else is a
-// fault inside this CLI: it gets a plain title rather than its class name ("TypeError"
-// means nothing to a user), and its real message and stack wait behind /debug.
-function titleForError(error) {
-  if (error.name === 'JaitusError' && error.title) return error.title;
-  if (error.name === 'AbortError') return 'Interrupted';
-  return 'Something went wrong in Jaitus';
-}
-
-function hintForError(error) {
-  if (error.name === 'JaitusError') return error.hint || '';
-  if (error.name === 'AbortError') return '';
-  return 'Try again. /debug shows the details if it keeps happening.';
-}
-
-function messageForError(error) {
-  if (error.name === 'JaitusError' || error.name === 'AbortError') return error.message || '';
-  return 'This is a fault in the Jaitus CLI, not in your project.';
-}
+// ─── The Jaitus app view ────────────────────────────────────────────────────────
+//
+// One conversation, full bleed, with exactly four pieces of permanent chrome: a header
+// line, the transcript, the composer, and a status line. There is no dashboard, no
+// sidebar and no second column, because the thing being read is prose and code and
+// both of those want the full width of the window.
+//
+// Three decisions are worth knowing before changing anything here:
+//
+//   • **Entries keep their source, not their pixels.** `entries.js` renders rows on
+//     demand for the current width and caches them against it. Resizing re-lays every
+//     message correctly, and scrolling is exact because the row count is already known
+//     — the previous renderer estimated it and drifted.
+//   • **Colour survives.** Everything the rest of the CLI prints already carries ANSI.
+//     It is parsed back into styled spans rather than stripped, so a red ✗ printed by
+//     a command written two years ago is still red here.
+//   • **Motion is one timer.** Ink 7 consolidates every `useAnimation` into a single
+//     render cycle, which is the only reason a spinner, a shimmering label, a drifting
+//     hairline and a blinking caret can all run without the frame rate suffering.
+//
+// Reduced motion (`/animations off`, `JAITUS_NO_ANIMATION=1`) is a first-class mode:
+// every animated widget has a still frame that reads correctly on its own.
+
+import React from 'react';
+import { Box, Spacer, Text, render, useAnimation, useApp, useCursor, useInput, usePaste, useWindowSize } from 'ink';
+import { palette, resetPalette, mix, ramp } from './tui/theme.js';
+import { makeEntry, rowsFor, invalidate } from './tui/entries.js';
+import { plain, stringWidth, truncateRow, wrapRow, rowText, inverseRange } from './tui/ansi.js';
+import { Spinner, Shimmer, GradientText, FlowingRule, Meter, Elapsed, Caret, Rows, Row, Reveal, motionOn, publishSettings } from './tui/widgets.js';
+import { wordRows, wordSize } from './tui/wordmark.js';
+import { enableMouse, disableMouse, parseMouse, isMouse, isMouseFragment, createHitMap } from './tui/mouse.js';
+import { openUrl } from './open.js';
+import { readClipboardText, readClipboardImage } from './tui/clipboard.js';
+import { MASCOT_ROWS, startupTip } from './brand.js';
+
+const h = React.createElement;
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const ascii = () => process.env.JAITUS_ASCII === '1';
+const g = (uni, plainText) => (ascii() ? plainText : uni);
+
+// How many transcript rows the chrome costs. Kept as one table so a change to the
+// layout cannot silently desynchronise the scroll maths from what is on screen.
+// The header is one row plus its hairline. Kept here as one table so the layout and the
+// hit map cannot disagree about where anything is — the controls sit on row 1, which is
+// what registerHeaderHits assumes.
+const CHROME = { header: 2, status: 1, composerFrame: 3, gapAboveComposer: 1 };
+
+const MODE_LABEL = {
+  default: 'ask',
+  acceptEdits: 'auto-edit',
+  plan: 'plan',
+  bypassPermissions: 'bypass',
+};
+
+// ─── Fuzzy matching for the composer menu ───────────────────────────────────────
+//
+// Subsequence rather than prefix, so `/dr` finds `/deep-research` and `@idx` finds
+// `src/index.js`. Consecutive and word-boundary hits score higher, which is what stops
+// a long path from outranking the file you obviously meant.
+function fuzzy(needle, haystack) {
+  const n = needle.toLowerCase();
+  const stack = haystack.toLowerCase();
+  if (!n) return { score: 1, hits: [] };
+  const hits = [];
+  let score = 0;
+  let at = 0;
+  let streak = 0;
+  for (const ch of n) {
+    const found = stack.indexOf(ch, at);
+    if (found === -1) return null;
+    const boundary = found === 0 || /[^a-z0-9]/.test(stack[found - 1]);
+    streak = found === at ? streak + 1 : 0;
+    score += 1 + streak * 2 + (boundary ? 3 : 0);
+    hits.push(found);
+    at = found + 1;
+  }
+  // Shorter candidates win ties: `/ask` should beat `/architect` for `ask`.
+  return { score: score - haystack.length * 0.05, hits };
+}
+
+function highlightMatch(text, hits, base, accent) {
+  const set = new Set(hits);
+  const spans = [];
+  let run = '';
+  let runHit = false;
+  [...String(text)].forEach((ch, index) => {
+    const hit = set.has(index);
+    if (hit !== runHit && run) { spans.push({ t: run, color: runHit ? accent : base, bold: runHit }); run = ''; }
+    runHit = hit;
+    run += ch;
+  });
+  if (run) spans.push({ t: run, color: runHit ? accent : base, bold: runHit });
+  return spans;
+}
+
+/**
+ * Rank one command against what has been typed.
+ *
+ * The name is matched first and scores highest, but the summary is searched too, because
+ * the name of a command is only obvious once you already know it — typing `context`
+ * finds `/compact`, and `diff` finds `/code-review`. A summary hit always scores below
+ * every name hit, so typing a real command's letters never buries it under something
+ * that merely mentions those letters in its description.
+ */
+function scoreCommand(fragment, name, summary) {
+  const bare = name.replace(/^\//, '');
+  const byName = fuzzy(fragment, bare);
+  if (byName) return { score: byName.score + 100, hits: byName.hits.map((i) => i + 1), where: 'name' };
+  if (!summary || fragment.length < 2) return null;
+  // Word-prefix rather than subsequence on the summary: a loose subsequence over a
+  // sentence matches nearly everything, and a menu that matches everything is a menu
+  // that helps with nothing.
+  const words = summary.toLowerCase().split(/[^a-z0-9]+/).filter(Boolean);
+  const needle = fragment.toLowerCase();
+  const at = words.findIndex((w) => w.startsWith(needle));
+  if (at === -1) return null;
+  return { score: 20 - at - (words[at].length - needle.length) * 0.1, hits: [], where: 'summary' };
+}
+
+function menuItemsFor(input, commands, fileProvider, cursor) {
+  const upto = input.slice(0, cursor);
+  const slash = /(?:^|\s)\/([^\s]*)$/.exec(upto);
+  if (slash) {
+    const fragment = slash[1];
+    return commands
+      .map((command) => {
+        const name = typeof command === 'string' ? command : command.name;
+        const summary = typeof command === 'string' ? '' : command.summary || '';
+        const match = scoreCommand(fragment, name, summary);
+        return match ? { kind: 'command', value: name, label: name, summary, score: match.score, hits: match.hits, where: match.where } : null;
+      })
+      .filter(Boolean)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 9);
+  }
+  const at = upto.lastIndexOf('@');
+  if (at >= 0 && !/\s/.test(upto.slice(at + 1))) {
+    const fragment = upto.slice(at + 1);
+    const files = fileProvider?.(fragment) || [];
+    return files
+      .map((file) => {
+        const match = fuzzy(fragment.split('/').pop() || '', String(file).split('/').pop() || String(file));
+        return { kind: 'file', value: file, label: String(file), summary: '', score: match ? match.score : 0, hits: [] };
+      })
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 9);
+  }
+  return [];
+}
+
+// ─── Chrome ─────────────────────────────────────────────────────────────────────
+
+function Header({ state, width }) {
+  const p = palette();
+  const m = state.meta;
+  const project = String(m.cwd || '.').split(/[\\/]/).filter(Boolean).pop() || '.';
+  const mode = MODE_LABEL[m.mode] || 'ask';
+  const modeColor = m.mode === 'bypassPermissions' ? p.red : m.mode === 'plan' ? p.yellow : m.mode === 'acceptEdits' ? p.teal : p.muted;
+  const narrow = width < 78;
+
+  // ── no mark in the header, and this is why ──
+  //
+  // The Jaitus J is a SQUARE mark. A half-block cell holds two square pixels, so a
+  // faithful square mark needs its height in pixel rows and half that in terminal rows:
+  // the real glyph, sampled from logo.png, degrades below about 6×6 and is properly
+  // itself at 8×8 — which is 8 cells by 4 rows, or 6 by 3 at a push. The header has one
+  // row for its title.
+  //
+  // Three marks were tried at one and two rows. Each was an abstraction of the logo
+  // rather than the logo, and each read as some other product's badge sitting next to
+  // this one's — correctly rejected. Half a square mark is not a small version of it.
+  //
+  // So the header carries the BRAND TOKEN instead: the coral chip with the J reversed
+  // out of it, which is the same mark the web header and the classic renderer use, and
+  // which is the one form of the logo that is honest at a single row — it is a colour
+  // field with a letter in it, not a squashed drawing of a square mark. Beside it the
+  // name in caps. Plain mixed-case `Jaitus` in the corner read as a window title; a
+  // coral field does not read as anything but a logo.
+  //
+  // The chip is also the only piece that survives every degradation — it is a space, a
+  // letter and a space, so it is not tofu on a raster console and not a box on a
+  // monochrome one. The real mark still lives where it has room: the welcome, and now
+  // the banner entry at the top of the transcript.
+  const ruleWidth = Math.max(4, width - 2);
+  // Below this the name is dropped and the chip carries it alone: the header's right
+  // side is controls, and squeezing six more characters in ahead of them is what makes
+  // Ink wrap the row and turn a two-row header into three.
+  const showName = width >= 62;
+
+  const left = h(Box, { flexDirection: 'row' },
+    h(Text, { color: '#ffffff', backgroundColor: p.brand, bold: true }, ' J '),
+    showName ? h(GradientText, { from: p.brandSoft, to: p.teal, bold: true }, ' JAITUS') : null,
+    h(Text, { color: p.faint }, `  ${g('▸', '/')} `),
+    h(Text, { color: p.muted }, project),
+    m.branch && width >= 78 ? h(Text, { color: p.faint }, `  ${g('⎇', 'b:')} ${m.branch}`) : null,
+  );
+
+  const right = h(Box, { flexDirection: 'row' },
+    h(Text, { color: modeColor, bold: true }, mode.toUpperCase()),
+    h(Text, { color: p.faint }, '  ·  '),
+    h(Text, { color: p.muted }, narrow ? shortModel(m.model) : String(m.model || 'auto')),
+    narrow ? null : h(Text, { color: p.faint }, '  ·  '),
+    narrow ? null : h(Meter, { value: m.ctxUsed || 0, max: m.ctxMax || 1, width: 8, danger: true }),
+    narrow ? null : h(Text, { color: p.dim }, ` ${m.ctx || '0 tok'}`),
+  );
+
+  return h(Box, { flexDirection: 'column', width },
+    h(Box, { flexDirection: 'row', paddingX: 1 }, left, h(Spacer), right),
+    // Idle, the hairline is not flat grey any more: it starts brand-tinted under the
+    // chip and fades into the line colour across the window. It is the cheapest way to
+    // make the header band belong to this product rather than to any terminal app —
+    // one row that was already being drawn, now carrying the identity.
+    h(Box, { paddingX: 1 },
+      h(FlowingRule, {
+        width: ruleWidth,
+        active: state.busy,
+        from: state.busy ? p.brand : mix(p.line, p.brand, 0.5),
+        to: state.busy ? p.teal : p.line,
+      })),
+  );
+}
+
+const shortModel = (id) => String(id || 'auto').split(/[/:]/).pop().slice(0, 18);
+
+/**
+ * The fresh-session moment.
+ *
+ * Deliberately not a splash screen with a feature list: the wordmark, one line saying
+ * what this is, and three things you can type. Everything else the user needs is one
+ * `/` away and the menu will show it to them.
+ */
+function Hero({ state, width, height }) {
+  const p = palette();
+
+  // ── the intro ──
+  //
+  // One pass, under a second, then it settles and stays settled. The pieces arrive in
+  // the order you should read them — the lockup, then what this is, then the three
+  // things you can type. Under reduced motion everything is simply already there.
+  const motion = motionOn();
+  const { time } = useAnimation({ interval: 40, isActive: motion && !state.introDone });
+  if (motion && time >= 900 && !state.introDone) state.introDone = true;
+  const elapsed = state.introDone ? 900 : time;
+  const phase = (from, to) => (motion && !state.introDone
+    ? Math.max(0, Math.min(1, (elapsed - from) / (to - from)))
+    : 1);
+
+  const markIn = phase(0, 420);
+  const lineIn = phase(280, 640);
+  const tipsIn = phase(420, 900);
+
+  // ── the lockup ──
+  //
+  // Mark and logotype on one baseline, left-aligned at exactly the indent transcript
+  // entries use, so the first answer appears directly beneath the branding with no
+  // jump. Both are four terminal rows: the mark is the DESIGNED mascot rather than the
+  // photographic badge downsampled, and the letterforms are drawn on a pixel grid and
+  // rendered with half-blocks — one cell per pixel is what made the old wordmark read
+  // as ASCII art, because a terminal cell is twice as tall as it is wide.
+  const mascot = MASCOT_ROWS();
+  const markInk = ramp(mix(p.bg, p.brandDeep, markIn), mix(p.bg, p.brand, markIn), mascot.length);
+  const mark = mascot.map((row, index) => [{ t: row, color: markInk[index] }]);
+  const markWidth = Math.max(...mascot.map((row) => row.length));
+
+  const word = wordRows('JAITUS', (column, total) =>
+    mix(p.bg, mix(p.brand, p.teal, total > 1 ? column / (total - 1) : 0), markIn));
+  const wordWidth = wordSize('JAITUS').width;
+
+  // Everything below is measured against what will fit, and dropped from the bottom up
+  // — the tips first, then the tagline — so a short window shows less rather than
+  // overflowing into the composer.
+  const showMark = width >= wordWidth + markWidth + 8;
+  const showWord = width >= wordWidth + 6;
+  const lockupRows = showWord ? word.length : 1;
+  const room = (rows) => height >= lockupRows + rows;
+
+  const tips = [
+    [`${g('›', '>')} `, 'describe a change', 'it reads the code before touching it'],
+    ['/ ', 'browse commands', 'research, review, commit, rewind'],
+    ['@ ', 'pull in a file', 'fuzzy-matched from this directory'],
+  ];
+
+  return h(Box, { flexDirection: 'column', width, height, paddingX: 1, justifyContent: 'flex-end' },
+    h(Box, { flexDirection: 'row' },
+      showMark ? h(Box, { marginRight: 2, flexDirection: 'column' }, h(Rows, { rows: mark })) : null,
+      showWord
+        ? h(Box, { flexDirection: 'column' }, h(Rows, { rows: word }))
+        : h(GradientText, { from: p.brand, to: p.teal, bold: true }, 'JAITUS'),
+    ),
+    room(3) ? h(Box, { marginTop: 1 },
+      h(Text, { color: mix(p.bg, p.dim, lineIn) },
+        `a coding agent in your terminal  ${g('·', '-')}  v${state.meta.version || ''}`)) : null,
+    room(8) ? h(Box, { marginTop: 1, flexDirection: 'column' },
+      tips.map(([marker, title, note], index) => {
+        const on = Math.max(0, Math.min(1, tipsIn * 3 - index));
+        return h(Box, { key: index, flexDirection: 'row' },
+          h(Text, { color: mix(p.bg, p.brand, on), bold: true }, marker),
+          h(Text, { color: mix(p.bg, p.text, on) }, title.padEnd(20)),
+          width >= 70 ? h(Text, { color: mix(p.bg, p.faint, on) }, note) : null,
+        );
+      })) : null,
+    room(10) ? h(Box, { marginTop: 1 },
+      h(Text, { color: mix(p.bg, p.faint, tipsIn), italic: true }, `tip: ${startupTip()}`)) : null,
+  );
+}
+
+/**
+ * Lay the transcript out.
+ *
+ * Separate from the component that draws it, and called by `App` BEFORE any of its
+ * children render. Everything derived from the layout — the scroll ceiling, the screen
+ * map the drag handler reads, the click regions, the sticky prompt — has to be known
+ * before the chrome that displays it is rendered. Computing them inside the transcript
+ * component meant the header above it was drawn from the PREVIOUS frame's numbers, so
+ * the pinned prompt was always one scroll behind.
+ */
+function layoutTranscript(state, width, height, top) {
+  const inner = Math.max(24, width - 2);
+  const rows = [];
+  // Where each prompt starts, so the sticky header can name the one whose answer is
+  // currently on screen rather than always the newest.
+  const prompts = [];
+  for (const entry of state.transcript) {
+    const built = rowsFor(entry, inner);
+    if (!built.length) continue;
+    if (rows.length) rows.push([]);
+    if (entry.kind === 'user') prompts.push({ at: rows.length, text: String(entry.data.text || '') });
+    rows.push(...built);
+  }
+  if (state.live && state.live.text) {
+    const built = rowsFor(state.live.entry, inner);
+    if (built.length) {
+      if (rows.length) rows.push([]);
+      rows.push(...built);
+    }
+  }
+
+  // The scroll ceiling. It was previously applied only where the rows were drawn, while
+  // the controller let the offset grow without bound — so scrolling up past the top kept
+  // incrementing a number nothing could see, and scrolling back down did nothing at all
+  // until it had counted its way home. That is the "scroll gets stuck" report: it was
+  // not stuck, it was somewhere off the top of a list that had already ended.
+  const maxOffset = Math.max(0, rows.length - height);
+  state.maxScroll = maxOffset;
+  const offset = state.viewingTranscript ? clamp(state.transcriptOffset, 0, maxOffset) : 0;
+  // Snap the stored offset to what will actually be drawn: this is the only place that
+  // knows how many rows exist at this width, so it is the authority, and writing the
+  // clamped value back is what keeps the controller's bound self-correcting.
+  state.transcriptOffset = offset;
+  if (!offset) state.viewingTranscript = false;
+
+  const end = rows.length - offset;
+  const first = Math.max(0, end - height);
+  const visible = rows.slice(first, end);
+  // Bottom-anchored: a short conversation sits at the composer, not floating at the top
+  // of an empty screen with the input a dozen rows below it.
+  const pad = Math.max(0, height - visible.length);
+  const screenTop = top + pad + 1;
+
+  // The drag handler needs the text under the pointer, and it must be the text actually
+  // on screen rather than the transcript's idea of it.
+  state.screen = { top: screenTop, left: 2, rows: visible };
+
+  // The sticky header names the prompt whose answer you are looking at — the last one
+  // that has scrolled off the top. Scroll far enough that the prompt itself is back on
+  // screen and there is nothing to pin; scroll past it and it becomes the one before.
+  const owning = prompts.filter((entry) => entry.at < first).at(-1);
+  state.stickyPrompt = owning ? owning.text : '';
+
+  return { visible, pad, screenTop };
+}
+
+/**
+ * How to select text, in words that are true for THIS terminal.
+ *
+ * Dragging selects inside the app everywhere and copies on release. What differs is the
+ * way back to the terminal's own selection while the app has the mouse: Shift in most
+ * terminals, Option in iTerm2 — and nothing at all in macOS Terminal, which has no
+ * bypass key. "shift+drag selects" was shown to everyone, and on a Mac it is simply
+ * wrong.
+ */
+export function selectHint(env = process.env, platform = process.platform) {
+  const term = env.TERM_PROGRAM || '';
+  if (term === 'iTerm.app') return 'drag copies · ⌥ drag: native';
+  if (term === 'Apple_Terminal') return 'drag or double-click copies';
+  if (platform === 'darwin' && !term) return 'drag copies · ⌥ drag: native';
+  return 'drag copies · shift drag: native';
+}
+
+/** Register every URL on screen as a click target. */
+function registerLinkHits(visible, screenTop, hits) {
+  if (!hits) return;
+  visible.forEach((row, index) => {
+    const text = rowText(row);
+    for (const match of text.matchAll(URL_IN_TEXT)) {
+      const url = match[0].replace(/[.,;:)\]]+$/, '');
+      hits.add({
+        x1: 2 + match.index,
+        x2: 2 + match.index + url.length - 1,
+        y1: screenTop + index,
+        y2: screenTop + index,
+        action: { type: 'link', url },
+      });
+    }
+  });
+}
+
+function Transcript({ state, width, height, layout }) {
+  const painted = paintSelection(layout.visible, state.selection, layout.screenTop, 2);
+  // Anchored to the bottom: if this box ever gets less room than it was laid out for,
+  // the OLDEST line is clipped off the top rather than the newest off the bottom.
+  return h(Box, { flexDirection: 'column', width, height, paddingX: 1, overflow: 'hidden', justifyContent: 'flex-end' },
+    layout.pad ? h(Box, { height: layout.pad, flexShrink: 0 }) : null,
+    h(Rows, { rows: painted }),
+  );
+}
+
+// Trailing punctuation is stripped by the caller: "see https://x.com/a." ends a sentence
+// far more often than it names a path called `.`.
+const URL_IN_TEXT = /https?:\/\/[^\s<>"'`]+/g;
+
+/**
+ * Draw the drag selection.
+ *
+ * Mouse reporting takes the terminal's own highlight away, so if the app does not draw
+ * one there is no feedback at all while dragging — which is indistinguishable from
+ * selection being broken, because from the user's side it is.
+ */
+function paintSelection(rows, selection, screenTop, left) {
+  if (!selection || !selection.anchor || !selection.focus) return rows;
+  const a = selection.anchor;
+  const b = selection.focus;
+  const [from, to] = (a.y < b.y || (a.y === b.y && a.x <= b.x)) ? [a, b] : [b, a];
+  if (from.y === to.y && from.x === to.x) return rows;
+
+  return rows.map((row, index) => {
+    const y = screenTop + index;
+    if (y < from.y || y > to.y) return row;
+    const startCol = y === from.y ? Math.max(0, from.x - left) : 0;
+    const endCol = y === to.y ? Math.max(0, to.x - left + 1) : rowText(row).length;
+    return inverseRange(row, startCol, endCol);
+  });
+}
+
+/**
+ * The line that proves the thing is alive.
+ *
+ * It carries four facts the user actually asks for while waiting: that work is
+ * happening, what it is, how long it has been, and how to stop it. The previous
+ * version carried only the first.
+ */
+function WorkBar({ state, width }) {
+  const p = palette();
+  if (!state.busy && !state.status) return null;
+  const label = plain(state.status) || 'Working';
+  const narrow = width < 70;
+  return h(Box, { flexDirection: 'row', paddingX: 1 },
+    h(Spinner, { kind: ascii() ? 'ascii' : 'braille' }),
+    h(Text, null, ' '),
+    h(Shimmer, { from: p.brand, to: p.brandSoft }, truncatePlain(label, Math.max(12, width - (narrow ? 22 : 46)))),
+    h(Spacer),
+    state.turnStartedAt ? h(Elapsed, { since: state.turnStartedAt }) : null,
+    state.turnTokens ? h(Text, { color: p.faint }, `  ${state.turnTokens.toLocaleString()} tok`) : null,
+    narrow ? null : h(Text, { color: p.faint }, `  esc ${g('↩', '')}stop`),
+  );
+}
+
+const truncatePlain = (text, width) => (stringWidth(text) <= width ? text : `${String(text).slice(0, Math.max(1, width - 1))}…`);
+
+function Menu({ state, width }) {
+  const p = palette();
+  if (!state.menu.length) return null;
+  const labelWidth = Math.min(28, Math.max(...state.menu.map((item) => stringWidth(item.label))) + 2);
+  return h(Box, { flexDirection: 'column', marginBottom: 1 },
+    state.menu.map((item, index) => {
+      const selected = index === state.menuIndex;
+      const spans = [
+        { t: selected ? `${g('▸', '>')} ` : '  ', color: p.brand, bold: true },
+        ...highlightMatch(item.label, item.hits || [], selected ? p.text : p.muted, p.brand),
+      ];
+      const used = stringWidth(item.label) + 2;
+      if (item.summary && width > 60) {
+        spans.push({ t: ' '.repeat(Math.max(1, labelWidth - used + 2)) });
+        spans.push({ t: item.summary, color: p.faint });
+      }
+      return h(Box, {
+        key: `${item.value}-${index}`,
+        backgroundColor: selected ? p.raised : undefined,
+      }, h(Row, { spans: truncateRow(spans, width - 2) }));
+    }),
+  );
+}
+
+function Composer({ state, width }) {
+  const p = palette();
+  const inner = Math.max(16, width - 4);
+  const bang = state.input.startsWith('!');
+  const promptMark = bang ? '! ' : `${g('›', '>')} `;
+  const promptColor = bang ? p.yellow : p.brand;
+
+  // A paste placeholder is a chip, not prose: it stands for content that is really
+  // there and will be sent, so it reads as an object rather than as something you typed
+  // and might have to delete.
+  const composed = [];
+  let at = 0;
+  for (const match of state.input.matchAll(/\[#\d+ pasted [^\]]*\]/g)) {
+    if (match.index > at) composed.push({ t: state.input.slice(at, match.index), color: p.text });
+    composed.push({ t: match[0], color: p.purple, backgroundColor: p.raised });
+    at = match.index + match[0].length;
+  }
+  if (at < state.input.length) composed.push({ t: state.input.slice(at), color: p.text });
+
+  // The same lines the App measured the composer's height from (composerLayout): the
+  // frame height is fixed, so a composer one row taller than it was counted as pushes
+  // the whole screen up — that was the header vanishing after a multi-line paste.
+  const { lines, caretLine } = composerLayout(state, inner - 2, composed);
+  const placeholder = state.placeholder || 'Describe a change, ask a question, or / for commands';
+
+  const borderColor = state.busy ? p.brand : state.menu.length ? p.teal : p.line;
+
+  return h(Box, {
+    flexDirection: 'column',
+    borderStyle: ascii() ? 'classic' : 'round',
+    borderColor,
+    paddingX: 1,
+    width,
+  },
+    h(Menu, { state, width: inner }),
+    h(Box, { flexDirection: 'row' },
+      h(Text, { color: promptColor, bold: true }, promptMark),
+      h(Box, { flexDirection: 'column', width: inner - 2 },
+        lines.map((row, index) => h(Box, { key: index, flexDirection: 'row' },
+          h(Row, { spans: row, wrap: 'wrap' }),
+          // The caret is always present, including at an empty prompt. Hiding it there
+          // was meant to keep it off the placeholder, but the result is a prompt with
+          // no cursor at all — there is nothing on screen saying the app is waiting for
+          // typing, which is the one thing a prompt has to say. The placeholder sits
+          // AFTER the caret instead, so the caret is at the insertion point either way.
+          index === caretLine ? h(Caret, { color: p.brand, char: g('▏', '_') }) : null,
+          !state.input && index === 0
+            ? h(Text, { color: p.faint, italic: true, wrap: 'truncate-end' }, placeholder)
+            : null,
+        )),
+      ),
+    ),
+    state.queued.length
+      ? h(Box, { marginTop: 1 }, h(Text, { color: p.purple }, `${g('⏎', '>')} ${state.queued.length} message${state.queued.length === 1 ? '' : 's'} queued — they send when this turn finishes`))
+      : null,
+    state.attachments.length
+      ? h(Box, { marginTop: 1 }, h(Text, { color: p.purple }, state.attachments.map((a) => `${g('⧉', '[img]')} ${a.name || 'image'}`).join('   ')))
+      : null,
+  );
+}
+
+const COMPOSER_MAX_LINES = 8;
+
+/** Spans split at every newline: one array of spans per line the user typed. */
+function splitSpansAtNewlines(spans) {
+  const out = [[]];
+  for (const span of spans) {
+    const parts = String(span.t).split('\n');
+    parts.forEach((part, i) => {
+      if (i > 0) out.push([]);
+      if (part) out[out.length - 1].push({ ...span, t: part });
+    });
+  }
+  return out;
+}
+
+/**
+ * The composer's lines as drawn: newlines are real line breaks (a pasted three-line
+ * snippet is three lines), each line wraps at `width`, and at most COMPOSER_MAX_LINES
+ * are shown — a window that follows the cursor. Returns the visible lines, the caret's
+ * line within them, and how many there are in total.
+ *
+ * Both the App (to size the frame) and the Composer (to draw) call this. They used to
+ * measure separately: the App's count treated a newline as a space and capped at 8, the
+ * Composer drew every line — so any newline or long input made the frame taller than
+ * the terminal, and the terminal scrolled.
+ */
+function composerLayout(state, width, spans = null) {
+  const input = state.input || '';
+  if (!input) return { lines: [[]], caretLine: 0, total: 1 };
+  const paragraphs = splitSpansAtNewlines(spans || [{ t: input }]);
+  const all = [];
+  let caret = 0;
+  let start = 0;                                   // offset of this paragraph in `input`
+  const cursor = Math.max(0, Math.min(input.length, state.cursor ?? input.length));
+  for (const para of paragraphs) {
+    const text = para.map((s) => s.t).join('');
+    const rows = para.length ? wrapRow(para, width) : [[]];
+    if (cursor >= start && cursor <= start + text.length) {
+      let seen = start;
+      let line = rows.length - 1;
+      for (let i = 0; i < rows.length; i++) {
+        seen += rows[i].map((s) => s.t).join('').length;
+        if (cursor <= seen) { line = i; break; }
+        seen += 1; // the space the wrap consumed
+      }
+      caret = all.length + line;
+    }
+    all.push(...rows);
+    start += text.length + 1;                      // + the newline
+  }
+  if (all.length <= COMPOSER_MAX_LINES) return { lines: all, caretLine: caret, total: all.length };
+  const first = Math.max(0, Math.min(caret - COMPOSER_MAX_LINES + 1, all.length - COMPOSER_MAX_LINES));
+  return { lines: all.slice(first, first + COMPOSER_MAX_LINES), caretLine: caret - first, total: all.length };
+}
+
+function StatusBar({ state, width }) {
+  const p = palette();
+  if (state.flash) {
+    const tone = { ok: p.teal, warn: p.yellow, info: p.muted }[state.flash.tone] || p.muted;
+    const mark = { ok: g('✓', '+'), warn: '!', info: g('›', '>') }[state.flash.tone] || g('›', '>');
+    return h(Box, { paddingX: 1 },
+      h(Text, { color: tone, bold: true }, `${mark} `),
+      h(Text, { color: tone, wrap: 'truncate-end' }, plain(state.flash.text)));
+  }
+  if (state.statusLine) {
+    return h(Box, { paddingX: 1 }, h(Text, { color: p.muted, wrap: 'truncate-end' }, plain(state.statusLine)));
+  }
+  const bits = state.viewingTranscript
+    ? [
+      [`${g('▲', '^')} history`, p.yellow],
+      [state.newMessages ? `${state.newMessages} new below` : 'scrolled back', p.muted],
+      ['ctrl+end to live', p.faint],
+    ]
+    : width < 70
+      ? [['ctrl+p palette', p.faint], ['shift+tab mode', p.faint]]
+      : [
+        ['ctrl+p palette', p.faint],
+        ['shift+tab mode', p.faint],
+        ['ctrl+l clear', p.faint],
+        ['esc esc rewind', p.faint],
+        // Mouse reporting takes the terminal's own text selection away, so the way to
+        // get it back has to be on screen — otherwise the first thing a new user
+        // notices is that they can no longer copy anything.
+        state.mouse ? [selectHint(), p.faint] : ['ctrl+d debug', p.faint],
+      ];
+  const spans = [];
+  bits.forEach(([text, color], index) => {
+    if (index) spans.push({ t: `  ${g('·', '|')}  `, color: p.faint });
+    spans.push({ t: text, color });
+  });
+  const right = [];
+  if (state.spent?.turns) {
+    right.push({ t: `${state.spent.turns} turn${state.spent.turns === 1 ? '' : 's'}`, color: p.faint });
+    right.push({ t: `  ${g('·', '|')}  `, color: p.faint });
+    right.push({ t: `${((state.spent.input || 0) + (state.spent.cached || 0) + (state.spent.output || 0)).toLocaleString()} tok`, color: p.faint });
+  }
+  // The counter on the right keeps its width; the hints get what is left, with a gap.
+  // Both used to shrink together, so the hints were cut off flush against the counter
+  // ("drag copi1 turn").
+  const rightWidth = right.reduce((n, s) => n + stringWidth(s.t), 0);
+  const leftRoom = Math.max(0, width - 2 - rightWidth - (rightWidth ? 3 : 0));
+  return h(Box, { flexDirection: 'row', paddingX: 1, width },
+    h(Row, { spans: truncateRow(spans, leftRoom) }),
+    h(Spacer),
+    rightWidth ? h(Box, { flexShrink: 0 }, h(Row, { spans: right })) : null,
+  );
+}
+
+// ─── Overlays ───────────────────────────────────────────────────────────────────
+
+/**
+ * Exact height, so the box can be exactly centred.
+ *
+ * Ink will not tell you how tall a Box is until after it has laid it out, and an
+ * absolutely-positioned element has to be given its `top` before that happens. So the
+ * height is computed the same way Yoga will: borders, padding, and every row and margin
+ * in order. Guessing it — which is what a constant like `6 + options` was — puts the
+ * overlay a few rows off centre and the error grows with the content.
+ */
+function dialogHeight(questionRows, previewRows, optionCount) {
+  return 2            // border top + bottom
+    + 2               // paddingY
+    + 1               // title
+    + 1 + questionRows
+    + (previewRows ? 1 + previewRows : 0)
+    + 1 + optionCount
+    + 1 + 1;          // gap + hint
+}
+
+function Dialog({ state, width, height, hits }) {
+  const p = palette();
+  const dialog = state.dialog;
+  if (!dialog) return null;
+  const boxWidth = Math.min(Math.max(48, Math.floor(width * 0.78)), width - 4);
+  const previewRows = (dialog.preview || []).slice(0, 12);
+  const questionRows = wrapRow([{ t: plain(dialog.question) }], boxWidth - 6).length;
+  const rows = dialogHeight(questionRows, previewRows.length, dialog.options.length);
+  const accent = dialog.tone === 'danger' ? p.red : p.brand;
+
+  const top = Math.max(0, Math.round((height - rows) / 2));
+  const left = Math.max(0, Math.round((width - boxWidth) / 2));
+
+  // The whole box swallows clicks first, so nothing lands on the header behind it; the
+  // option rows are registered after and therefore win inside their own row. The
+  // arithmetic mirrors dialogHeight() exactly — terminal rows are 1-based, hence the +1.
+  hits?.add({ x1: left + 1, x2: left + boxWidth, y1: top + 1, y2: top + rows, action: { type: 'swallow' } });
+  const optionsTop = top + 2 + 1 + 1 + questionRows + (previewRows.length ? 1 + previewRows.length : 0) + 1;
+  dialog.options.forEach((option, index) => {
+    hits?.add({
+      x1: left + 1, x2: left + boxWidth, y1: optionsTop + index + 1, y2: optionsTop + index + 1,
+      action: { type: 'dialogOption', index },
+    });
+  });
+
+  return h(Box, { position: 'absolute', top, left, width: boxWidth },
+    h(Reveal, { rows },
+      h(Box, {
+        flexDirection: 'column',
+        width: boxWidth,
+        borderStyle: ascii() ? 'classic' : 'round',
+        borderColor: accent,
+        backgroundColor: p.surface,
+        paddingX: 2,
+        paddingY: 1,
+      },
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: accent, bold: true }, `${g('◆', '#')} ${dialog.title || 'Permission required'}`),
+          h(Spacer),
+          h(Text, { color: p.faint }, `${dialog.options.length} option${dialog.options.length === 1 ? '' : 's'}`),
+        ),
+        h(Box, { marginTop: 1, flexDirection: 'column' },
+          wrapRow([{ t: plain(dialog.question), color: p.text }], boxWidth - 6)
+            .map((row, index) => h(Row, { key: index, spans: row }))),
+        previewRows.length
+          ? h(Box, { marginTop: 1, flexDirection: 'column' },
+            previewRows.map((line, index) => h(Row, {
+              key: index,
+              spans: truncateRow(previewSpans(line, p), boxWidth - 6),
+            })))
+          : null,
+        h(Box, { marginTop: 1, flexDirection: 'column' },
+          dialog.options.map((option, index) => {
+            const selected = index === dialog.index;
+            return h(Box, { key: `${option.value}-${index}`, backgroundColor: selected ? p.raised : undefined },
+              h(Text, { color: selected ? accent : p.muted, bold: selected },
+                `${selected ? g(' ▸ ', ' > ') : '   '}${index + 1}. ${plain(option.label)}`));
+          })),
+        h(Box, { marginTop: 1 },
+          h(Text, { color: p.faint }, `${g('↑↓', 'up/dn')} choose  ·  1-9 jump  ·  enter confirm  ·  esc ${dialog.hideComment ? 'cancel' : 'deny'}`)),
+      ),
+    ),
+  );
+}
+
+function previewSpans(line, p) {
+  const text = plain(line);
+  if (text.startsWith('+')) return [{ t: text, color: p.addFg, backgroundColor: p.addBg }];
+  if (text.startsWith('-')) return [{ t: text, color: p.delFg, backgroundColor: p.delBg }];
+  if (text.startsWith('@@')) return [{ t: text, color: p.hunkFg }];
+  return [{ t: text, color: p.muted }];
+}
+
+function Panel({ state, width, height, hits }) {
+  const p = palette();
+  const panel = state.panel;
+  if (!panel) return null;
+  const boxWidth = Math.min(Math.max(52, Math.floor(width * 0.84)), width - 4);
+  // Leave room for the box's own chrome (8 rows) plus a margin, and never grow past
+  // what the content needs — a palette with four matches should be four rows tall, not
+  // a half-screen box with an empty lower half.
+  const maxRows = Math.max(4, Math.min(height - 10, 18));
+
+  let body;
+  let bodyRows;
+  let firstVisible = 0;
+  if (panel.palette) {
+    // Keep the selection in view without letting the window run past either end.
+    const visible = Math.min(maxRows, panel.options.length);
+    firstVisible = Math.max(0, Math.min(panel.index - Math.floor(visible / 2), panel.options.length - visible));
+    const view = panel.options.slice(firstVisible, firstVisible + visible);
+    bodyRows = Math.max(1, view.length);
+    body = view.map((option, index) => {
+      const globalIndex = firstVisible + index;
+      const selected = globalIndex === panel.index;
+      const name = typeof option === 'string' ? option : option.name;
+      const summary = typeof option === 'string' ? '' : option.summary || '';
+      return h(Box, { key: `${name}-${index}`, backgroundColor: selected ? p.raised : undefined, flexDirection: 'row' },
+        h(Text, { color: selected ? p.brand : p.muted, bold: selected }, `${selected ? g(' ▸ ', ' > ') : '   '}${name.padEnd(Math.min(26, boxWidth - 10))}`),
+        summary ? h(Text, { color: p.faint, wrap: 'truncate-end' }, summary) : null,
+      );
+    });
+    if (!view.length) {
+      body = [h(Text, { key: 'none', color: p.faint, italic: true }, `nothing matches “${panel.filter || ''}”`)];
+      bodyRows = 1;
+    }
+  } else {
+    const rows = (panel.rows || []).slice(-maxRows);
+    const lines = (panel.lines || []).slice(-maxRows);
+    bodyRows = Math.max(1, rows.length || lines.length);
+    body = rows.length
+      ? [h(Rows, { key: 'rows', rows })]
+      : lines.map((line, index) => h(Text, { key: index, color: p.text, wrap: 'truncate-end' }, plain(line)));
+  }
+
+  // border 2 + padY 2 + title 1 + gap 1 + body + gap 1 + hint 1
+  const rows = 8 + bodyRows;
+  const top = Math.max(0, Math.round((height - rows) / 2));
+  const left = Math.max(0, Math.round((width - boxWidth) / 2));
+
+  hits?.add({ x1: left + 1, x2: left + boxWidth, y1: top + 1, y2: top + rows, action: { type: 'swallow' } });
+  if (panel.palette) {
+    const bodyTop = top + 2 + 1 + 1;
+    for (let i = 0; i < bodyRows; i++) {
+      hits?.add({
+        x1: left + 1, x2: left + boxWidth, y1: bodyTop + i + 1, y2: bodyTop + i + 1,
+        action: { type: 'paletteRow', index: firstVisible + i },
+      });
+    }
+  }
+
+  return h(Box, { position: 'absolute', top, left, width: boxWidth },
+    h(Reveal, { rows },
+      h(Box, {
+        flexDirection: 'column',
+        width: boxWidth,
+        borderStyle: ascii() ? 'classic' : 'round',
+        borderColor: p.teal,
+        backgroundColor: p.surface,
+        paddingX: 2,
+        paddingY: 1,
+      },
+        h(Box, { flexDirection: 'row' },
+          h(Text, { color: p.teal, bold: true }, plain(panel.title)),
+          h(Spacer),
+          panel.palette ? h(Text, { color: p.faint }, `${panel.options.length}`) : null,
+        ),
+        h(Box, { marginTop: 1, flexDirection: 'column' }, body),
+        h(Box, { marginTop: 1 }, h(Text, { color: p.faint }, panel.palette
+          ? `type to filter  ·  ${g('↑↓', 'up/dn')} choose  ·  enter run  ·  esc close`
+          : `${g('↑↓', 'up/dn')} scroll  ·  esc close`)),
+      ),
+    ),
+  );
+}
+
+// ─── The app ────────────────────────────────────────────────────────────────────
+
+function App({ controller }) {
+  // Ink's hook answers in `{columns, rows}`, not `{width, height}`. Destructuring the
+  // wrong names yields two `undefined`s that propagate into every wrap and clamp as
+  // NaN — comparisons against NaN are all false, so the layout does not throw, it just
+  // silently breaks one word per line. Worth naming, because nothing in the output
+  // points at the hook.
+  const size = useWindowSize();
+  const width = Math.max(30, size?.columns || process.stdout.columns || 80);
+  // One row short of the terminal, on purpose. A frame that fills the terminal exactly
+  // puts Ink on its Windows path of clearing the whole screen before EVERY frame (ink.js
+  // shouldClearTerminalForFrame), and ConPTY — which Windows Terminal also sits on —
+  // commits that clear as its own synchronized frame: measured in a real ConPTY, the
+  // screen went blank and was redrawn ~9 times a second while a reply streamed, and on
+  // every keystroke. One row shorter, Ink redraws in place and only what changed.
+  const height = Math.max(10, (size?.rows || process.stdout.rows || 24) - 1);
+  const { exit } = useApp();
+  const [, setTick] = React.useState(0);
+  const p = palette();
+
+  React.useEffect(() => {
+    controller.attach(setTick);
+    return () => controller.attach(() => {});
+  }, [controller]);
+
+  useCursor({ visible: false });
+  useInput((input, key) => controller.handleKey(input, key, exit));
+  // Bracketed paste. Without it a pasted block arrives as ordinary input, and the first
+  // newline in it SUBMITS — so pasting a stack trace sent its first line and left the
+  // rest in the box. Ink keeps paste off the useInput channel entirely while this is
+  // mounted, so the two cannot race.
+  usePaste((text) => controller.handlePaste(text));
+
+  // A resize invalidates anything expressed in screen coordinates. The transcript
+  // re-wraps at the new width, so a selection made at the old one now highlights
+  // unrelated text, and the hit map is rebuilt from scratch on the next frame anyway.
+  React.useEffect(() => { controller.onResize(width, height); }, [controller, width, height]);
+
+  const state = controller.state;
+  // One empty frame after a resize — see onResize.
+  if (state.blankFrame) return h(Box, { height: 1 });
+  const composerRows = CHROME.composerFrame
+    + (state.menu.length ? state.menu.length + 1 : 0)
+    + Math.max(0, composerTextRows(state, width) - 1)
+    + (state.queued.length ? 2 : 0)
+    + (state.attachments.length ? 2 : 0);
+  const workRows = state.busy || state.status ? 1 : 0;
+  // A single pinned line showing what was last asked, while the transcript is scrolled
+  // away from it. Scrolling back through a long answer and losing track of the question
+  // it was answering is the specific thing this fixes.
+  const stickyRows = state.viewingTranscript ? 1 : 0;
+  const transcriptHeight = Math.max(3, height - CHROME.header - CHROME.status - composerRows - workRows - CHROME.gapAboveComposer - stickyRows);
+
+  // The welcome stands until there is real conversation. Anything chrome-ish — a
+  // notice, a stray pre-formatted print from an older code path — must not suppress it:
+  // one such line was enough to make the whole welcome screen, logo included, invisible,
+  // and nothing about the result suggested why.
+  const CONVERSATION = new Set(['user', 'assistant', 'tool', 'diff', 'todo', 'error']);
+  const showHero = state.home && !state.live && !state.transcript.some((e) => CONVERSATION.has(e.kind));
+
+  // Immediate-mode hit testing: the regions are rebuilt from the same numbers that
+  // produce the layout, every frame. Anything measured after the fact would be a second
+  // source of truth for where things are, and the two would drift.
+  const hits = controller.hits;
+  hits.reset();
+  const transcriptTop = CHROME.header + stickyRows;                  // 0-based row above the transcript
+  // Laid out here, before anything renders, so the header above the transcript is drawn
+  // from THIS frame's numbers rather than the previous one's.
+  const layout = showHero
+    ? { visible: [], pad: 0, screenTop: transcriptTop + 1 }
+    : layoutTranscript(state, width, transcriptHeight, transcriptTop);
+  hits.add({ x1: 1, x2: width, y1: transcriptTop + 1, y2: transcriptTop + transcriptHeight, action: { type: 'transcript' } });
+  registerLinkHits(layout.visible, layout.screenTop, hits);
+  registerHeaderHits(state, width, hits);
+  hits.add({ x1: 1, x2: width, y1: height, y2: height, action: { type: 'status' } });
+  if (state.menu.length) {
+    const menuTop = height - CHROME.status - composerRows + 1;       // inside the composer border
+    state.menu.forEach((_item, index) => {
+      hits.add({ x1: 2, x2: width - 1, y1: menuTop + index + 1, y2: menuTop + index + 1, action: { type: 'menuRow', index } });
+    });
+  }
+
+  // Everything but the transcript keeps its size (flexShrink 0); the transcript is the
+  // one part allowed to give way if the chrome ever measures taller than counted.
+  const fixed = (child) => h(Box, { flexShrink: 0, flexDirection: 'column' }, child);
+  return h(Box, { flexDirection: 'column', width: '100%', height },
+    fixed(h(Header, { state, width })),
+    stickyRows ? fixed(h(StickyPrompt, { state, width })) : null,
+    showHero
+      ? h(Hero, { state, width, height: transcriptHeight })
+      : h(Transcript, { state, width, height: transcriptHeight, layout }),
+    h(Box, { height: CHROME.gapAboveComposer, flexShrink: 0 }),
+    fixed(h(WorkBar, { state, width })),
+    h(Box, { paddingX: 1, flexShrink: 0 }, h(Composer, { state, width: width - 2 })),
+    fixed(h(StatusBar, { state, width })),
+    h(Panel, { state, width, height, hits }),
+    h(Dialog, { state, width, height, hits }),
+  );
+}
+
+function composerTextRows(state, width) {
+  // The Composer is given width - 2 and draws text in (that - 4) - 2: width - 8.
+  return composerLayout(state, Math.max(16, width - 6) - 2).lines.length;
+}
+
+/**
+ * The prompt currently being answered on screen.
+ *
+ * Published by the transcript each frame rather than read from the end of the list: the
+ * useful line while scrolling back through a long session is the question THIS part of
+ * the conversation was answering, not whatever was asked most recently. Scroll far
+ * enough up and it becomes the previous exchange's question; scroll to where the prompt
+ * itself is visible and there is nothing to pin.
+ */
+function StickyPrompt({ state, width }) {
+  const p = palette();
+  const text = String(state.stickyPrompt || '').replace(/\s+/g, ' ').trim();
+  return h(Box, { flexDirection: 'row', paddingX: 1, width, backgroundColor: p.raised },
+    h(Text, { color: p.brand, bold: true }, `${g('▌', '|')} `),
+    h(Text, { color: text ? p.muted : p.faint, wrap: 'truncate-end' },
+      text || 'the start of this conversation'),
+    h(Spacer),
+    h(Text, { color: p.faint }, ` ${g('↑', '^')} scrolled`),
+  );
+}
+
+/**
+ * The header's right-hand side is a row of controls, not a readout — the mode, the
+ * model and the context meter all do something when clicked.
+ *
+ * The columns are computed from the same strings the header renders, walking right to
+ * left from the edge, so a click lands on the thing it looks like it is on. Anything
+ * here that stops matching Header() shows up immediately as a click that misses — which
+ * is why tests/tui-render.js slices the rendered row at these exact columns.
+ */
+function registerHeaderHits(state, width, hits) {
+  const m = state.meta;
+  const narrow = width < 78;
+  const mode = MODE_LABEL[m.mode] || 'ask';
+  const model = narrow ? shortModel(m.model) : String(m.model || 'auto');
+
+  let right = width - 1;                       // 1-based column of the last cell (paddingX 1)
+  if (!narrow) {
+    const meter = 8 + 1 + stringWidth(m.ctx || '0 tok');
+    hits.add({ x1: right - meter + 1, x2: right, y1: 1, y2: 1, action: { type: 'context' } });
+    right -= meter + 5;                        // the '  ·  ' separator
+  }
+  hits.add({ x1: right - stringWidth(model) + 1, x2: right, y1: 1, y2: 1, action: { type: 'model' } });
+  right -= stringWidth(model) + 5;
+  hits.add({ x1: right - mode.length + 1, x2: right, y1: 1, y2: 1, action: { type: 'mode' } });
+}
+
+// ─── Controller ─────────────────────────────────────────────────────────────────
+
+export function createTui({ slashCommands = [], fileProvider = null, meta = {}, onModeCycle = null, settings = null } = {}) {
+  publishSettings(settings);
+
+  const commands = slashCommands.map((command) => (typeof command === 'string' ? { name: command, summary: '' } : command));
+
+  const state = {
+    active: false, busy: false, home: true,
+    input: '', cursor: 0, placeholder: '',
+    menu: [], menuIndex: -1,
+    history: [], historyIndex: -1, draft: null,
+    queued: [], attachments: [],
+    status: '', statusLine: '',
+    // A short notice — "Copied 40 characters", "Opened <link>" — shown on the status
+    // line for a moment. Deliberately NOT `status`: that is the live working status the
+    // work bar draws with a spinner, so a notice put there looked like a task running,
+    // and clearing it could wipe the real status of a turn in flight.
+    flash: null,
+    transcript: [], live: null, activity: [],
+    transcriptOffset: 0, newMessages: 0, viewingTranscript: false,
+    dialog: null, panel: null, mouse: false, selection: null, screen: null, maxScroll: 0, pastes: [],
+    onLine: null, onEscape: null, onRewind: null, onCommand: null, onCopy: null, onModeCycle,
+    debug: !!process.env.JAITUS_DEBUG, introDone: false,
+    turnStartedAt: null, turnTokens: 0,
+    spent: { turns: 0, input: 0, cached: 0, output: 0 },
+    meta: { model: 'loading…', mode: 'default', ctx: '0 tok', ctxUsed: 0, ctxMax: 1, intent: 'build', ...meta },
+  };
+
+  let inkInstance = null;
+  let update = () => {};
+  let pending = null;
+  let exited = false;
+  const hits = createHitMap();
+  const scrollStep = () => {
+    const n = Number(settings?.scrollSpeed);
+    return Math.max(1, Math.round((Number.isFinite(n) && n > 0 ? n : 1) * 3));
+  };
+
+  /**
+   * Coalesce notifications to one per animation frame.
+   *
+   * A streaming response calls print thousands of times a second. Re-rendering per
+   * chunk pins a core and makes typing lag behind the keyboard; batching at 16ms costs
+   * nothing visually and keeps input responsive under a full-speed stream.
+   */
+  function notify() {
+    if (pending) return;
+    pending = setTimeout(() => { pending = null; update((value) => value + 1); }, 16);
+    if (pending.unref) pending.unref();
+  }
+  function notifyNow() {
+    if (pending) { clearTimeout(pending); pending = null; }
+    update((value) => value + 1);
+  }
+
+  /**
+   * The brand lockup, as transcript row zero.
+   *
+   * Deliberately an ENTRY rather than chrome. It scrolls like anything else, so it is
+   * never sticky and never costs a row of the working area — and because it is the
+   * first thing in the scrollback it is still there at the top of a thousand-turn
+   * session. The welcome screen owns the same lockup for the fresh-session moment; this
+   * is what keeps it on screen once real conversation replaces that.
+   */
+  function seedBanner() {
+    if (process.env.JAITUS_NO_BANNER) return;
+    if (state.transcript[0]?.kind === 'banner') return;
+    state.transcript.unshift(makeEntry('banner', { version: state.meta.version }));
+  }
+
+  let flashTimer = null;
+  /** Show a notice on the status line for `ms`, then take it down — with a redraw. */
+  function flash(text, tone = 'ok', ms = 1600) {
+    if (flashTimer) clearTimeout(flashTimer);
+    state.flash = { text: String(text), tone };
+    notifyNow();
+    flashTimer = setTimeout(() => {
+      flashTimer = null;
+      state.flash = null;
+      // notifyNow, not a bare assignment: the old clear changed state without asking
+      // for a redraw, so the notice stayed on screen until something else repainted.
+      notifyNow();
+    }, ms);
+    if (flashTimer.unref) flashTimer.unref();
+  }
+
+  function push(kind, data) {
+    const entry = makeEntry(kind, data);
+    state.transcript.push(entry);
+    // A transcript is not a log: 600 entries is far more than anyone scrolls back
+    // through, and every one held is rows cached against the current width. The banner
+    // is exempt — trimming from the front would quietly delete the brand off the top of
+    // any long session, which is the exact failure this entry exists to fix.
+    if (state.transcript.length > 600) {
+      const keep = state.transcript[0]?.kind === 'banner' ? 1 : 0;
+      state.transcript.splice(keep, state.transcript.length - 600);
+    }
+    if (state.viewingTranscript) state.newMessages += 1;
+    notify();
+    return entry;
+  }
+
+  function refreshMenu() {
+    state.menu = state.dialog || state.panel ? [] : menuItemsFor(state.input, commands, fileProvider, state.cursor);
+    state.menuIndex = state.menu.length ? clamp(state.menuIndex < 0 ? 0 : state.menuIndex, 0, state.menu.length - 1) : -1;
+  }
+
+  function insert(text) {
+    state.input = state.input.slice(0, state.cursor) + text + state.input.slice(state.cursor);
+    state.cursor += text.length;
+    refreshMenu();
+    notifyNow();
+  }
+
+  function clearInput() {
+    state.input = '';
+    state.cursor = 0;
+    state.menu = [];
+    state.menuIndex = -1;
+    notifyNow();
+  }
+
+  /**
+   * Take the highlighted suggestion.
+   *
+   * `run` submits it instead of completing it, which is what Enter does on a command:
+   * typing `/re`, pressing Enter and having the composer fill in `/review ` so you can
+   * press Enter a second time is a completion, not a shortcut. Tab still completes, for
+   * when the command needs an argument. A file suggestion is never run — `@` is always
+   * building up a message.
+   */
+  function chooseMenu({ run = false } = {}) {
+    const item = state.menu[state.menuIndex];
+    if (!item) return false;
+    const trigger = item.kind === 'command' ? '/' : '@';
+    const at = state.input.lastIndexOf(trigger, Math.max(0, state.cursor - 1));
+    const prefix = at >= 0 ? state.input.slice(0, at) : '';
+    const suffix = state.input.slice(state.cursor);
+
+    if (run && item.kind === 'command' && !prefix.trim() && !suffix.trim()) {
+      state.input = String(item.value);
+      state.cursor = state.input.length;
+      state.menu = [];
+      state.menuIndex = -1;
+      submit();
+      return true;
+    }
+
+    state.input = `${prefix}${item.value} ${suffix}`;
+    state.cursor = prefix.length + String(item.value).length + 1;
+    refreshMenu();
+    notifyNow();
+    return true;
+  }
+
+  /**
+   * A paste.
+   *
+   * Short pastes go in as text — that is what you meant, and a chip for eleven
+   * characters is a chip in the way. Anything long becomes a placeholder holding its
+   * place in the sentence, with the real content kept aside and substituted back when
+   * the message is sent. The alternative is a composer that has grown to forty rows and
+   * hidden the conversation you were pasting INTO.
+   */
+  function handlePaste(text) {
+    const value = String(text ?? '').replace(/\r\n?/g, '\n');
+    if (!value) return;
+    const lines = value.split('\n').length;
+
+    if (lines <= 3 && value.length <= 240) {
+      insert(value);
+      return;
+    }
+
+    const id = state.pastes.length + 1;
+    state.pastes.push({ id, text: value });
+    // The token has to survive being typed around, so it is bracketed and carries its
+    // own index; expansion matches on that rather than on position.
+    insert(`[#${id} pasted ${lines} line${lines === 1 ? '' : 's'}, ${value.length} chars]`);
+  }
+
+  /**
+   * Paste from the system clipboard — right-click and Ctrl+V. The app owns the mouse, so
+   * the terminal's own right-click paste never runs; without this, right-click did
+   * nothing at all. Text goes through handlePaste (so a long paste becomes a chip); with
+   * no text, an image on the clipboard becomes an attachment.
+   */
+  let pasting = false;
+  async function pasteFromClipboard({ imageOnly = false } = {}) {
+    if (pasting) return;
+    pasting = true;
+    try {
+      const text = imageOnly ? null : await (api._readClipboardText || readClipboardText)();
+      if (text) { handlePaste(text); notifyNow(); return; }
+      const png = await (api._readClipboardImage || readClipboardImage)();
+      if (png?.length) {
+        const fs = await import('node:fs');
+        const os = await import('node:os');
+        const path = await import('node:path');
+        const file = path.join(os.tmpdir(), `jaitus-clip-${Date.now()}.png`);
+        fs.writeFileSync(file, png);
+        const { imageBlock } = await import('./agent/tools.js');
+        const block = await imageBlock(file).catch(() => null);
+        if (block) {
+          state.attachments.push({ name: `image ${state.attachments.length + 1}`, block });
+          flash('Image attached — it is sent with your next message', 'info', 2000);
+        } else {
+          flash('That image could not be read (png, jpg, gif or webp, up to about 3 MB)', 'warn', 2500);
+        }
+        notifyNow();
+        return;
+      }
+      flash(imageOnly ? 'No image on the clipboard' : 'The clipboard is empty', 'info', 1600);
+    } catch {
+      flash('Could not read the clipboard', 'warn', 2000);
+    } finally {
+      pasting = false;
+    }
+  }
+
+  // ── a paste chip is one thing ──
+  //
+  // It looks like a single object, so it has to behave like one. Backspacing a character
+  // off the end leaves `[#1 pasted 120 lines, 969 char` — a token that no longer matches,
+  // so the content it stands for is silently orphaned and the literal text is what gets
+  // sent. Deleting it whole is both what you meant and the only way the placeholder and
+  // the thing it holds cannot come apart.
+  const CHIP = /\[#(\d+) pasted [^\]]*\]/;
+  const chipBefore = (text, cursor) => new RegExp(`${CHIP.source}$`).exec(text.slice(0, cursor));
+  const chipAfter = (text, cursor) => new RegExp(`^${CHIP.source}`).exec(text.slice(cursor));
+
+  /** Forget the content a chip stood for, once the chip is gone. */
+  function dropPaste(id) {
+    state.pastes = state.pastes.filter((entry) => entry.id !== Number(id));
+  }
+
+  /** Put the real content back in place of every placeholder. */
+  function expandPastes(line) {
+    if (!state.pastes.length) return line;
+    return line.replace(/\[#(\d+) pasted [^\]]*\]/g, (whole, id) => {
+      const blob = state.pastes.find((entry) => entry.id === Number(id));
+      return blob ? blob.text : whole;
+    });
+  }
+
+  function submit() {
+    const typed = state.input;
+    const line = expandPastes(typed);
+    state.pastes = [];
+    clearInput();
+    if (!line.trim()) return;
+    // History keeps the TOKEN form. Pressing Up after sending a thousand-line paste
+    // should bring back the sentence you wrote, not the thousand lines.
+    if (state.history.at(-1) !== typed) state.history.push(typed);
+    state.historyIndex = state.history.length;
+    state.viewingTranscript = false;
+    state.transcriptOffset = 0;
+    state.newMessages = 0;
+    if (state.busy) state.queued.push(line);
+    else state.onLine?.(line);
+    notifyNow();
+  }
+
+  function historyMove(direction) {
+    if (!state.history.length) return;
+    if (state.historyIndex === state.history.length) state.draft = state.input;
+    state.historyIndex = clamp(state.historyIndex + direction, 0, state.history.length);
+    state.input = state.historyIndex === state.history.length ? (state.draft || '') : state.history[state.historyIndex];
+    state.cursor = state.input.length;
+    refreshMenu();
+    notifyNow();
+  }
+
+  function wordLeft() {
+    const upto = state.input.slice(0, state.cursor);
+    const match = /\S+\s*$/.exec(upto);
+    return match ? state.cursor - match[0].length : 0;
+  }
+  function wordRight() {
+    const rest = state.input.slice(state.cursor);
+    const match = /^\s*\S+/.exec(rest);
+    return match ? state.cursor + match[0].length : state.input.length;
+  }
+
+  function resolveDialog(value) {
+    const dialog = state.dialog;
+    if (!dialog) return;
+    state.dialog = null;
+    refreshMenu();
+    dialog.resolve(value);
+    notifyNow();
+  }
+
+  function resolvePanel() {
+    const panel = state.panel;
+    if (!panel) return;
+    state.panel = null;
+    refreshMenu();
+    panel.resolve?.();
+    notifyNow();
+  }
+
+  let lastEscapeAt = 0;
+  // Drag state. A press is ambiguous until release: it may be a click on a control or
+  // the start of a text selection, and treating it as either one too early breaks the
+  // other.
+  let pressedAt = null;
+  let dragged = false;
+  // Counted so /debug can distinguish "mouse reporting was requested" from "the
+  // terminal is actually sending reports". Those are different facts and only the
+  // second one means the wheel works.
+  let mouseReports = 0;
+  let lastMouseAt = 0;
+  // Half a mouse report, waiting for the rest (see isMouseFragment).
+  let mouseFragment = null;
+  // Double- and triple-click: select a word, then a line — what every terminal does,
+  // and the first thing people try when they want one word out of the output.
+  let lastClick = null;
+  let clickCount = 0;
+
+  /**
+   * Scroll the transcript. Positive is back into history.
+   *
+   * Clamped at BOTH ends against the real row count, which the transcript publishes
+   * each frame. Previously only the renderer clamped it: the offset itself grew without
+   * limit, so scrolling up past the top kept counting into a void and scrolling back
+   * down did nothing visible until it had counted all the way back. It read as the
+   * wheel sticking, at random, for a random length of time.
+   */
+  function scroll(rows) {
+    // The ceiling comes from the last frame. On the very first scroll after new content
+    // there has not been one yet, so a stale 0 would swallow the gesture — allow the
+    // move and let the renderer snap it back. It is authoritative; this is a hint.
+    const known = Math.max(0, state.maxScroll || 0);
+    const ceiling = known || (state.transcript.length ? Number.MAX_SAFE_INTEGER : 0);
+    const next = clamp(state.transcriptOffset + rows, 0, ceiling);
+    if (next === state.transcriptOffset) {
+      if (!next && state.viewingTranscript) { state.viewingTranscript = false; state.newMessages = 0; notifyNow(); }
+      return;
+    }
+    state.transcriptOffset = next;
+    state.viewingTranscript = next > 0;
+    if (!next) state.newMessages = 0;
+    notifyNow();
+  }
+
+  /** Every screen cell between two points, as text. */
+  function selectedText() {
+    const sel = state.selection;
+    const screen = state.screen;
+    if (!sel?.anchor || !sel?.focus || !screen) return '';
+    const a = sel.anchor;
+    const b = sel.focus;
+    const [from, to] = (a.y < b.y || (a.y === b.y && a.x <= b.x)) ? [a, b] : [b, a];
+    const out = [];
+    screen.rows.forEach((row, index) => {
+      const y = screen.top + index;
+      if (y < from.y || y > to.y) return;
+      const text = rowText(row);
+      const start = y === from.y ? Math.max(0, from.x - screen.left) : 0;
+      const end = y === to.y ? Math.max(0, to.x - screen.left + 1) : text.length;
+      out.push(text.slice(start, end).replace(/\s+$/, ''));
+    });
+    return out.join('\n').replace(/\n+$/, '');
+  }
+
+  /**
+   * Select the word or the whole line under a point, the way a double- or triple-click
+   * does in a terminal. Returns false when there is no text there.
+   */
+  function selectAt(point, unit) {
+    const screen = state.screen;
+    if (!screen) return false;
+    const row = screen.rows[point.y - screen.top];
+    if (!row) return false;
+    const text = rowText(row);
+    const col = point.x - screen.left;
+    let start, end;
+    if (unit === 'line') {
+      // Past the gutter: the message bullet and quote bars are decoration, not text.
+      start = text.length - text.replace(/^[\s●○◆▎│┃⎿]+/, '').length;
+      end = text.replace(/\s+$/, '').length - 1;
+    } else {
+      if (col < 0 || col >= text.length || /\s/.test(text[col])) return false;
+      // A "word" is what you would want to paste: a path, a URL, an identifier.
+      const inWord = (ch) => ch && !/[\s"'`()[\]{}<>,;]/.test(ch);
+      start = col; end = col;
+      while (inWord(text[start - 1])) start -= 1;
+      while (inWord(text[end + 1])) end += 1;
+    }
+    if (end < start) return false;
+    state.selection = { anchor: { x: screen.left + start, y: point.y }, focus: { x: screen.left + end, y: point.y } };
+    notifyNow();
+    void finishSelection();
+    return true;
+  }
+
+  function clearSelection() {
+    if (!state.selection) return;
+    state.selection = null;
+    notifyNow();
+  }
+
+  /**
+   * Finish a drag: copy what was highlighted.
+   *
+   * Copy-on-select is the terminal behaviour people expect, and taking the mouse away
+   * from the terminal took it with it. Doing it on release rather than on a menu keeps
+   * the muscle memory intact; `copyOnSelect off` turns it back into a plain highlight.
+   */
+  async function finishSelection() {
+    const text = selectedText();
+    if (!text.trim()) { clearSelection(); return; }
+    if (settings?.copyOnSelect === false) {
+      // Not "Ctrl+Shift+C": that is the TERMINAL's copy shortcut and it acts on the
+      // terminal's own selection, which does not exist while the app owns the mouse.
+      // Naming a shortcut that cannot work is worse than naming none.
+      flash(`${text.length} characters selected · jaitus config copyOnSelect on — to copy these automatically`, 'info', 4000);
+      return;
+    }
+    const ok = await (state.onCopy ? state.onCopy(text) : Promise.resolve(false));
+    if (ok) flash(`Copied ${text.length} character${text.length === 1 ? '' : 's'}`, 'ok', 1400);
+    else flash('Nothing could copy it — no clipboard tool found', 'warn', 3000);
+    // The highlight stays a moment so it is clear WHAT was copied, then goes.
+    const copied = state.selection;
+    setTimeout(() => { if (state.selection === copied) clearSelection(); }, 700);
+  }
+
+  /**
+   * A click landed on something.
+   *
+   * Everything reachable on screen does what it looks like it does: the mode pill opens
+   * the mode picker, the model name opens the model picker, the context meter offers to
+   * compact. That is the whole point of drawing them as distinct objects — an indicator
+   * you cannot act on is a thing you have to go and find a command for.
+   */
+  function dispatchClick(region, event) {
+    if (!region) return;
+    switch (region.action.type) {
+      case 'swallow':
+        return;
+      case 'dialogOption': {
+        const d = state.dialog;
+        if (!d) return;
+        d.index = clamp(region.action.index, 0, d.options.length - 1);
+        return resolveDialog({ ...d.options[d.index], comment: d.comment || '' });
+      }
+      case 'paletteRow': {
+        const panel = state.panel;
+        if (!panel?.palette) return;
+        panel.index = clamp(region.action.index, 0, Math.max(0, panel.options.length - 1));
+        const chosen = panel.options[panel.index];
+        const name = typeof chosen === 'string' ? chosen : chosen?.name;
+        state.panel = null;
+        refreshMenu();
+        if (!name) return notifyNow();
+        state.input = name;
+        state.cursor = name.length;
+        return submit();
+      }
+      case 'menuRow': {
+        state.menuIndex = clamp(region.action.index, 0, state.menu.length - 1);
+        return chooseMenu({ run: true });
+      }
+      case 'mode':
+        return void state.onModeCycle?.();
+      case 'model':
+        return void state.onCommand?.('/model');
+      case 'context':
+        return void state.onCommand?.('/context');
+      case 'link':
+        // Only http(s) reaches here — see openUrl. A terminal will happily render
+        // `file:///` or `javascript:` in text that came from a model or a fetched page,
+        // and handing either to the shell runs something nobody agreed to.
+        if (openUrl(region.action.url)) {
+          flash(`Opened ${region.action.url.slice(0, 60)}`, 'info', 1600);
+        }
+        return;
+      case 'status':
+        return openPalette();
+      case 'transcript':
+        // A click in the body is how you get back to the live end after scrolling.
+        if (state.viewingTranscript && event.button === 'left') {
+          state.viewingTranscript = false;
+          state.transcriptOffset = 0;
+          state.newMessages = 0;
+          notifyNow();
+        }
+        return;
+      default:
+    }
+  }
+
+  function openPalette() {
+    state.panel = {
+      title: 'COMMAND PALETTE', palette: true, filter: '',
+      all: commands, options: commands, index: 0, lines: [], resolve: () => {},
+    };
+    notifyNow();
+  }
+
+  function handleKey(input, key, exit) {
+    if (!state.active) return;
+
+    // ── the mouse arrives here too ──
+    //
+    // Ink does not recognise the reports, so it hands them through as ordinary input
+    // with the escape stripped. Without this guard, scrolling the wheel types
+    // `[<64;10;5M` into the composer.
+    if (mouseFragment) {
+      const fresh = Date.now() - mouseFragment.at < 300;
+      const joined = mouseFragment.text + input;
+      mouseFragment = null;
+      if (fresh && (isMouse(joined) || isMouseFragment(joined))) input = joined;
+    }
+    if (isMouseFragment(input)) {
+      mouseFragment = { text: input, at: Date.now() };
+      return;
+    }
+    if (isMouse(input)) {
+      mouseReports += 1;
+      lastMouseAt = Date.now();
+      const event = parseMouse(input);
+      if (!event) return;
+      if (event.kind === 'wheelUp') return scroll(scrollStep());
+      if (event.kind === 'wheelDown') return scroll(-scrollStep());
+      // Right-click pastes, as it does in a Windows console — the terminal cannot do it
+      // itself while the app has the mouse.
+      if (event.kind === 'down' && event.button === 'right') {
+        if (!state.dialog && !state.panel) void pasteFromClipboard();
+        return;
+      }
+
+      if (event.kind === 'down' && event.button === 'left') {
+        // A press starts a possible drag AND a possible click. Which it was is only
+        // known on release, so nothing is dispatched yet — dispatching here made every
+        // attempt to select text also press whatever was under the cursor.
+        pressedAt = { x: event.x, y: event.y };
+        dragged = false;
+        clearSelection();
+        return;
+      }
+      if (event.kind === 'drag' && pressedAt) {
+        if (event.x !== pressedAt.x || event.y !== pressedAt.y) dragged = true;
+        state.selection = { anchor: pressedAt, focus: { x: event.x, y: event.y } };
+        return notifyNow();
+      }
+      if (event.kind === 'up') {
+        const start = pressedAt;
+        pressedAt = null;
+        if (!start) return;
+        if (dragged) { dragged = false; void finishSelection(); return; }
+        const now = Date.now();
+        const again = lastClick && now - lastClick.at < 450 && lastClick.y === start.y && Math.abs(lastClick.x - start.x) <= 1;
+        clickCount = again ? clickCount + 1 : 1;
+        lastClick = { x: start.x, y: start.y, at: now };
+        const region = hits.at(start.x, start.y);
+        const onText = !region || region.action.type === 'transcript' || region.action.type === 'swallow';
+        if (clickCount >= 2 && onText && selectAt(start, clickCount >= 3 ? 'line' : 'word')) return;
+        return dispatchClick(region, event);
+      }
+      return;
+    }
+
+    // ── dialog has the keyboard ──
+    if (state.dialog) {
+      const d = state.dialog;
+      if (key.escape) return resolveDialog(undefined);
+      if (key.upArrow || key.up) { d.index = clamp(d.index - 1, 0, d.options.length - 1); return notifyNow(); }
+      if (key.downArrow || key.down) { d.index = clamp(d.index + 1, 0, d.options.length - 1); return notifyNow(); }
+      if (key.return || key.enter) return resolveDialog({ ...d.options[d.index], comment: d.comment || '' });
+      if (/^[1-9]$/.test(input)) {
+        const index = clamp(Number(input) - 1, 0, d.options.length - 1);
+        d.index = index;
+        // A number is a decision, not a cursor move: waiting for Enter after it is the
+        // most common reason a permission prompt feels unresponsive.
+        return resolveDialog({ ...d.options[index], comment: d.comment || '' });
+      }
+      return;
+    }
+
+    // ── palette / panel has the keyboard ──
+    if (state.panel) {
+      const panel = state.panel;
+      if (panel.palette) {
+        if (key.upArrow || key.up) { panel.index = clamp(panel.index - 1, 0, panel.options.length - 1); return notifyNow(); }
+        if (key.downArrow || key.down) { panel.index = clamp(panel.index + 1, 0, panel.options.length - 1); return notifyNow(); }
+        if (key.return || key.enter) {
+          const chosen = panel.options[panel.index];
+          const name = typeof chosen === 'string' ? chosen : chosen?.name;
+          state.panel = null;
+          refreshMenu();
+          if (!name) return notifyNow();
+          // Run it. Picking a command out of a palette and then being handed it to
+          // press Enter on again is a step that exists for no reason. Shift+Enter is
+          // the escape hatch for a command you want to add an argument to.
+          state.input = name;
+          state.cursor = name.length;
+          if (key.shift) { state.input = `${name} `; state.cursor = state.input.length; return notifyNow(); }
+          submit();
+          return notifyNow();
+        }
+        if (key.escape) { state.panel = null; panel.resolve?.(); return notifyNow(); }
+        if (key.backspace || key.delete) {
+          panel.filter = String(panel.filter || '').slice(0, -1);
+          applyPaletteFilter(panel);
+          return notifyNow();
+        }
+        if (input && !key.ctrl && !key.meta) {
+          panel.filter = `${panel.filter || ''}${input}`;
+          applyPaletteFilter(panel);
+          return notifyNow();
+        }
+        return;
+      }
+      if (key.escape || key.return || key.enter) resolvePanel();
+      return;
+    }
+
+    // Fast PTYs on Windows deliver a typed line and its carriage return in one chunk.
+    // Split here or the return becomes a literal character in the composer.
+    const newlineAt = String(input || '').search(/[\r\n]/);
+    if (newlineAt >= 0) {
+      const typed = String(input).slice(0, newlineAt);
+      const rest = String(input).slice(newlineAt + 1);
+      if (typed) insert(typed);
+      if (key.shift) insert('\n');
+      // This path went straight to submit(), which is why `/re` + Enter sometimes ran
+      // `/re` instead of the highlighted `/review`. Whether Enter arrives on its own or
+      // glued to the typed text is a matter of how fast the keystrokes were batched by
+      // the PTY — so the two paths have to make the same decision, or the shortcut
+      // works or does not work depending on typing speed.
+      else if (state.menu.length) chooseMenu({ run: true });
+      else submit();
+      if (rest) insert(rest);
+      return;
+    }
+
+    // Ink reports Ctrl+<letter> as `key.ctrl` with the LETTER itself in `input`; its
+    // Key type has no `name` field at all. Every `key.name === 'l'` style check in the
+    // previous version of this file was therefore dead code — Ctrl+L, Ctrl+P, Ctrl+U,
+    // Ctrl+K, Ctrl+A and Ctrl+E all did nothing, silently, because a condition that is
+    // never true is indistinguishable from a shortcut nobody presses.
+    //
+    // `key.name` is still accepted so the controller tests (and the classic renderer's
+    // readline keypress objects) can drive the same handler.
+    const ctrlKey = key.ctrl ? String(key.name || input || '').toLowerCase() : '';
+
+    if (ctrlKey === 'c') {
+      if (state.busy) state.onEscape?.();
+      else if (state.input) clearInput();
+      else flash('Type /exit to leave', 'info', 1500);
+      return;
+    }
+    if (key.shift && key.tab) { void state.onModeCycle?.(); return; }
+    if (ctrlKey === 'l') { api.clearTranscript(); return; }
+    if (ctrlKey === 'd') { api.toggleDebug(); return; }
+    if (ctrlKey === 'p') return openPalette();
+    // Ctrl+V reaches the app only in terminals that do not paste on it themselves (those
+    // send the text as a bracketed paste instead). Alt+V is for an image — a screenshot
+    // cannot be typed in, so no terminal pastes one.
+    if (ctrlKey === 'v') { void pasteFromClipboard(); return; }
+    if (key.meta && String(input).toLowerCase() === 'v') { void pasteFromClipboard({ imageOnly: true }); return; }
+    if (key.escape) {
+      if (state.busy) return state.onEscape?.();
+      if (state.viewingTranscript) { state.viewingTranscript = false; state.transcriptOffset = 0; state.newMessages = 0; return notifyNow(); }
+      const now = Date.now();
+      if (lastEscapeAt && now - lastEscapeAt < 1200) {
+        lastEscapeAt = 0;
+        if (flashTimer) { clearTimeout(flashTimer); flashTimer = null; }
+        state.flash = null;
+        state.onRewind?.();
+      } else {
+        lastEscapeAt = now;
+        flash('Press Esc again to rewind', 'info', 1200);
+      }
+      return;
+    }
+
+    // ── scrollback ──
+    if (key.pageUp || key.pageup) return scroll(10);
+    if (key.pageDown || key.pagedown) return scroll(-10);
+    if ((key.ctrl && (key.end || ctrlKey === 'g'))) {
+      state.viewingTranscript = false; state.transcriptOffset = 0; state.newMessages = 0;
+      return notifyNow();
+    }
+    if ((key.ctrl && key.home)) return scroll(100000);
+
+    // ── menu ──
+    if ((key.upArrow || key.up) && state.menu.length) { state.menuIndex = clamp(state.menuIndex - 1, 0, state.menu.length - 1); return notifyNow(); }
+    if ((key.downArrow || key.down) && state.menu.length) { state.menuIndex = clamp(state.menuIndex + 1, 0, state.menu.length - 1); return notifyNow(); }
+    if (key.tab && state.menu.length) return chooseMenu();
+    if (key.return || key.enter) {
+      if (!key.shift && state.menu.length) return chooseMenu({ run: true });
+      if (key.shift) return insert('\n');
+      return submit();
+    }
+
+    // ── line editing ──
+    if (key.leftArrow || key.left) {
+      if (key.ctrl || key.meta) state.cursor = wordLeft();
+      else {
+        // Step over a chip, not into it. A cursor sitting inside `[#1 pasted 120 …]`
+        // can only do damage: anything typed there breaks the token.
+        const chip = chipBefore(state.input, state.cursor);
+        state.cursor = Math.max(0, state.cursor - (chip ? chip[0].length : 1));
+      }
+      return notifyNow();
+    }
+    if (key.rightArrow || key.right) {
+      if (key.ctrl || key.meta) state.cursor = wordRight();
+      else {
+        const chip = chipAfter(state.input, state.cursor);
+        state.cursor = Math.min(state.input.length, state.cursor + (chip ? chip[0].length : 1));
+      }
+      return notifyNow();
+    }
+    if (key.home || (ctrlKey === 'a')) { state.cursor = 0; return notifyNow(); }
+    if (key.end || (ctrlKey === 'e')) { state.cursor = state.input.length; return notifyNow(); }
+    if (ctrlKey === 'w') {
+      // A chip is one word. Deleting "the last word" of `…, 969 chars]` would otherwise
+      // leave a broken token behind.
+      const chip = chipBefore(state.input, state.cursor);
+      const at = chip ? state.cursor - chip[0].length : wordLeft();
+      if (chip) dropPaste(chip[1]);
+      state.input = state.input.slice(0, at) + state.input.slice(state.cursor);
+      state.cursor = at;
+      refreshMenu();
+      return notifyNow();
+    }
+    if (key.backspace) {
+      if (state.cursor === 0) return;
+      const chip = chipBefore(state.input, state.cursor);
+      const eat = chip ? chip[0].length : 1;
+      if (chip) dropPaste(chip[1]);
+      state.input = state.input.slice(0, state.cursor - eat) + state.input.slice(state.cursor);
+      state.cursor -= eat;
+      refreshMenu();
+      return notifyNow();
+    }
+    if (key.delete) {
+      const chip = chipAfter(state.input, state.cursor);
+      const eat = chip ? chip[0].length : 1;
+      if (chip) dropPaste(chip[1]);
+      state.input = state.input.slice(0, state.cursor) + state.input.slice(state.cursor + eat);
+      refreshMenu();
+      return notifyNow();
+    }
+    if (ctrlKey === 'u') { state.input = state.input.slice(state.cursor); state.cursor = 0; refreshMenu(); return notifyNow(); }
+    if (ctrlKey === 'k') { state.input = state.input.slice(0, state.cursor); refreshMenu(); return notifyNow(); }
+    if (key.upArrow || key.up) return historyMove(-1);
+    if (key.downArrow || key.down) return historyMove(1);
+    if (input && !key.ctrl && !key.meta) insert(input);
+  }
+
+  function applyPaletteFilter(panel) {
+    const filter = String(panel.filter || '');
+    if (!filter) { panel.options = panel.all; panel.index = 0; return; }
+    panel.options = panel.all
+      .map((command) => {
+        const name = typeof command === 'string' ? command : command.name;
+        const match = fuzzy(filter, name.replace(/^\//, ''));
+        return match ? { command, score: match.score } : null;
+      })
+      .filter(Boolean)
+      .sort((a, b) => b.score - a.score)
+      .map((entry) => entry.command);
+    panel.index = 0;
+  }
+
+  const api = {
+    state,
+
+    attach(fn) { update = fn; },
+    onEscape(fn) { state.onEscape = fn; },
+    onRewind(fn) { state.onRewind = fn; },
+    setMeta(next) { Object.assign(state.meta, next); notify(); },
+    setSpent(next) { Object.assign(state.spent, next || {}); notify(); },
+
+    hits,
+    onCommand(fn) { state.onCommand = fn; },
+    onCopy(fn) { state.onCopy = fn; },
+    handlePaste,
+
+    /**
+     * A resize is the one moment the screen has to be thrown away and redrawn.
+     *
+     * Ink clears only when the terminal gets NARROWER, on the reasoning that a wider
+     * one cannot leave anything behind. That is true of output that flows, and false of
+     * an app that draws a fixed number of rows: make the window shorter and the taller
+     * frame's lower rows stay on screen underneath the new one. That is the duplicated
+     * composer and the layout "breaking" on resize.
+     *
+     * Clearing on every size change costs one repaint during a drag-resize and removes
+     * the whole class of problem.
+     */
+    onResize(width, height) {
+      const last = state.lastSize;
+      state.lastSize = { width, height };
+      if (last && last.width === width && last.height === height) return;
+      // Anything expressed in screen coordinates is now about the wrong cells.
+      state.selection = null;
+      // The explicit erase wipes cells Ink is not tracking: after the window SHRINKS, the
+      // rows of the taller frame below the new one are not in Ink's set and would stay.
+      //
+      // Then one EMPTY frame, then the real one. Ink redraws line by line
+      // (incrementalRendering) against what it believes is on screen, and its clear()
+      // re-records the old frame as present — so after the erase above, the next frame
+      // rewrote only the lines that had changed, and the screen stayed almost blank
+      // (measured). An empty frame makes Ink forget every line; the frame after it is
+      // then written in full.
+      try {
+        if (process.stdout.isTTY) process.stdout.write('\x1b[2J\x1b[3J\x1b[H');
+      } catch { /* mid-teardown */ }
+      state.blankFrame = true;
+      notifyNow();
+      setTimeout(() => { state.blankFrame = false; notifyNow(); }, 120);
+    },
+
+    /**
+     * What the mouse is actually doing, for `/debug`.
+     *
+     * Enabling reporting and receiving reports are different facts, and only the second
+     * one means the mouse works. A terminal that ignores the request looks identical
+     * from this side to one that is simply not being used — so the count is kept, and
+     * "requested but nothing received" is a thing the diagnostics can say out loud
+     * instead of leaving someone to guess.
+     */
+    mouseReport() {
+      return {
+        requested: !!state.mouse,
+        reportsSeen: mouseReports,
+        lastAt: lastMouseAt ? new Date(lastMouseAt).toISOString() : null,
+      };
+    },
+
+    start({ onLine, history = [] }) {
+      state.onLine = onLine;
+      state.history = [...history];
+      state.historyIndex = state.history.length;
+      state.active = true;
+      seedBanner();
+      // `alternateScreen` is not a cosmetic preference — three separate defects came
+      // from not passing it.
+      //
+      // Rendering inline, Ink reflows its output in place against a window whose height
+      // it does not own. Resize the terminal and the previous frame is still on screen
+      // under the new one: that is the duplicated composer, the doubled prompt, and the
+      // "sometimes fullscreen, sometimes not" all at once.
+      //
+      // It also breaks the mouse. Every coordinate this file computes assumes row 1 is
+      // the top of the app, which is only true on a screen the app owns. Inline, the
+      // app sits below whatever scrollback happens to be there, so clicks and drag
+      // selection land on the wrong rows — by an amount that changes as the session
+      // grows, which is why it looked intermittent rather than broken.
+      inkInstance = render(h(App, { controller: api }), {
+        alternateScreen: true,
+        exitOnCtrlC: false,
+        patchConsole: false,
+        // Rewrite only the lines that changed. A streamed word changes one line; without
+        // this every token rewrote all ~30 lines (~45KB a second measured while
+        // streaming), which is its own source of tearing on slower terminals.
+        incrementalRendering: true,
+      });
+      // Mouse reporting takes over the terminal's own selection, so it is opt-out and
+      // the status bar says how to get selection back. Enabled after render so Ink's
+      // own setup cannot overwrite the mode.
+      if (settings?.mouse !== false && !process.env.JAITUS_DISABLE_MOUSE) {
+        state.mouse = enableMouse(process.stdout);
+      }
+      notifyNow();
+    },
+
+    stop() {
+      state.active = false;
+      exited = true;
+      if (pending) { clearTimeout(pending); pending = null; }
+      // Before unmount: the terminal keeps reporting after the process is gone
+      // otherwise, and every click in the shell afterwards prints escape codes.
+      disableMouse(process.stdout);
+      inkInstance?.unmount();
+      inkInstance = null;
+    },
+
+    setMouse(on) {
+      if (on) state.mouse = enableMouse(process.stdout);
+      else { disableMouse(process.stdout); state.mouse = false; }
+      notifyNow();
+      return state.mouse;
+    },
+
+    // ── structured entries ──────────────────────────────────────────────────────
+    user(text, attachments) { return push('user', { text, attachments }); },
+    assistant(text) { return push('assistant', { text }); },
+    notice(text, tone = 'dim') { return push('notice', { text, tone }); },
+    todo(items) { return push('todo', { items }); },
+    diff(file, patch, max) { return push('diff', { file, patch, max }); },
+
+    /**
+     * A tool call. Returns a handle whose `update` mutates the same entry in place, so
+     * a row goes running → ok without a second line appearing under the first.
+     */
+    tool(data) {
+      const entry = push('tool', { status: 'running', ...data });
+      return {
+        id: entry.id,
+        update(next) {
+          Object.assign(entry.data, next);
+          entry._w = -1;
+          entry._rows = null;
+          notify();
+        },
+      };
+    },
+
+    /**
+     * A failure, with everything needed to act on it.
+     *
+     * Errors were previously one dim line that scrolled past, so a session where every
+     * request was being rejected looked like a session where the model had nothing to
+     * say. They now get a red-barred block, a hint where one applies, and a folded
+     * stack that `/debug` or Ctrl+D unfolds.
+     */
+    error(error, context = {}) {
+      const value = error instanceof Error ? error : new Error(String(error?.message ?? error ?? 'Unknown error'));
+      const message = messageForError(value);
+      let hint = context.hint || hintForError(value);
+      // Our server messages often already say what to do ("run `jaitus login`"); the
+      // hint would then say it a second time, one line lower.
+      const flat = (t) => String(t || '').replace(/[`.]/g, '').toLowerCase().trim();
+      if (hint && flat(message).includes(flat(hint))) hint = '';
+      return push('error', {
+        title: context.title || titleForError(value),
+        message,
+        hint,
+        detail: context.detail || (value.requestId ? `request id ${value.requestId}` : ''),
+        // A service error's stack is this CLI's own call path — nothing in it explains
+        // what happened. Only a fault in the CLI keeps one, for /debug.
+        stack: value.name === 'JaitusError' ? '' : (value.stack || ''),
+        expanded: state.debug,
+      });
+    },
+
+    toggleDebug() {
+      state.debug = !state.debug;
+      for (const entry of state.transcript) {
+        if (entry.kind === 'error') { entry.data.expanded = state.debug; entry._w = -1; entry._rows = null; }
+      }
+      flash(state.debug ? 'Debug on — stack traces expanded' : 'Debug off', 'info', 1600);
+    },
+
+    // ── the legacy string surface ───────────────────────────────────────────────
+    //
+    // Most of the CLI still prints pre-formatted ANSI strings. Those keep working and
+    // keep their colour: `raw` parses the escapes back into spans rather than dropping
+    // them, which is what the previous renderer did.
+    print(value, kind = 'assistant') {
+      const text = String(value ?? '');
+      if (!plain(text).trim() && !/\n/.test(text)) return;
+      state.live = null;
+      if (kind === 'user') return push('raw', { ansi: text });
+      if (kind === 'error') {
+        return push('error', { title: 'Error', message: plain(text).replace(/^[✗x]\s*/, ''), stack: '', expanded: false });
+      }
+      return push('raw', { ansi: text });
+    },
+
+    printStream(value) {
+      const text = String(value ?? '');
+      if (!text) return;
+      if (!state.live) {
+        state.live = { text: '', entry: makeEntry('assistant', { text: '', compact: true }) };
+      }
+      state.live.text += plain(text);
+      state.live.entry.data.text = state.live.text;
+      state.live.entry._w = -1;
+      state.live.entry._rows = null;
+      if (!state.turnStartedAt) state.turnStartedAt = Date.now();
+      notify();
+    },
+
+    flushStream() {
+      if (state.live?.text?.trim()) {
+        const entry = state.live.entry;
+        entry.data.compact = false;
+        entry._w = -1;
+        entry._rows = null;
+        state.transcript.push(entry);
+        if (state.viewingTranscript) state.newMessages += 1;
+      }
+      state.live = null;
+      notify();
+    },
+
+    clearTranscript() {
+      state.transcript = [];
+      seedBanner();
+      state.live = null;
+      state.transcriptOffset = 0;
+      state.viewingTranscript = false;
+      state.newMessages = 0;
+      state.home = true;
+      notifyNow();
+    },
+
+    setStatusLine(value) { state.statusLine = plain(value || ''); notify(); },
+    setBusy(value) {
+      state.busy = !!value;
+      if (value) { state.turnStartedAt = Date.now(); state.turnTokens = 0; }
+      else { state.status = ''; state.turnStartedAt = null; }
+      notifyNow();
+    },
+    setStatus(value) { state.status = plain(value); notify(); },
+    flash(text, tone, ms) { flash(plain(text), tone, ms); },
+    clearStatus() { state.status = ''; notify(); },
+    setTurnTokens(n) { state.turnTokens = n | 0; notify(); },
+    setPlaceholder(text) { state.placeholder = String(text || ''); notify(); },
+    setHome(value) { state.home = !!value; notify(); },
+
+    queue(line) { state.queued.push(line); notify(); },
+    takeQueued() { const queued = state.queued; state.queued = []; notify(); return queued; },
+    hasQueued() { return state.queued.length > 0; },
+
+    addAttachment(attachment) { state.attachments.push(attachment); notify(); },
+    drainAttachments() { const list = state.attachments; state.attachments = []; notify(); return list.map((a) => a.block).filter(Boolean); },
+
+    askDialog(question, options, preview = [], opts = {}) {
+      return new Promise((resolve) => {
+        state.dialog = {
+          question: plain(question),
+          options: options.map((option) => (option && typeof option === 'object'
+            ? { label: plain(option.label ?? option.value), value: option.value }
+            : { label: plain(option), value: option })),
+          preview: preview.map(plain),
+          index: 0,
+          resolve,
+          title: opts.title,
+          tone: opts.tone,
+          hideComment: opts.hideComment,
+          comment: '',
+        };
+        state.menu = [];
+        notifyNow();
+      });
+    },
+
+    showPanel(title, lines) {
+      return new Promise((resolve) => {
+        state.panel = {
+          title: plain(title),
+          lines: (Array.isArray(lines) ? lines : String(lines).split('\n')).map((line) => plain(line)),
+          rows: null,
+          resolve,
+        };
+        notifyNow();
+      });
+    },
+
+    updatePanel(lines) {
+      if (!state.panel) return;
+      state.panel.lines = (Array.isArray(lines) ? lines : String(lines).split('\n')).map((line) => plain(line));
+      notify();
+    },
+
+    /** A theme change recolours every cached row, so they all have to be rebuilt. */
+    reskin() {
+      resetPalette();
+      invalidate(state.transcript);
+      if (state.live?.entry) { state.live.entry._w = -1; state.live.entry._rows = null; }
+      notifyNow();
+    },
+
+    recordActivity(event) {
+      const existing = event.id ? state.activity.find((item) => item.id === event.id) : null;
+      if (existing) Object.assign(existing, event, { updatedAt: Date.now() });
+      else {
+        state.activity.push({
+          id: event.id || `${Date.now()}-${state.activity.length}`,
+          name: event.name,
+          label: String(event.label || event.name || ''),
+          status: event.status || 'running',
+          detail: event.detail || '',
+          updatedAt: Date.now(),
+        });
+      }
+      if (state.activity.length > 200) state.activity.shift();
+      notify();
+      return existing?.id || state.activity.at(-1)?.id;
+    },
+    activitySnapshot() { return state.activity.map((item) => ({ ...item })); },
+
+    bellIfAway() {
+      // A terminal bell is the only cross-platform "I need you" a CLI has. Suppressed
+      // under reduced motion, which is also where people who do not want surprises are.
+      if (!motionOn()) return;
+      try { process.stdout.write(''); } catch { /* a bell is never worth an error */ }
+    },
+    animationsOn() { return state.active && motionOn(); },
+    redraw() { notifyNow(); },
+
+    get exited() { return exited; },
+    handleKey,
+  };
+
+  return api;
+}
+
+// A JaitusError brings its own title and hint, written in errors.js. Anything else is a
+// fault inside this CLI: it gets a plain title rather than its class name ("TypeError"
+// means nothing to a user), and its real message and stack wait behind /debug.
+function titleForError(error) {
+  if (error.name === 'JaitusError' && error.title) return error.title;
+  if (error.name === 'AbortError') return 'Interrupted';
+  return 'Something went wrong in Jaitus';
+}
+
+function hintForError(error) {
+  if (error.name === 'JaitusError') return error.hint || '';
+  if (error.name === 'AbortError') return '';
+  return 'Try again. /debug shows the details if it keeps happening.';
+}
+
+function messageForError(error) {
+  if (error.name === 'JaitusError' || error.name === 'AbortError') return error.message || '';
+  return 'This is a fault in the Jaitus CLI, not in your project.';
+}