rovecode 0.4.0-beta.2 → 0.4.0

package/src/sextant/draw-messages.ts

@@ -0,0 +1,386 @@
+/** Sextant surface (port #42) — the MESSAGES panel: user / assistant / tool / steer / compaction /
+ *  system rows, the ONE modal card (approval or ask_user question) pinned above the ╌ rule, and the
+ *  prompt line with its cursor cell. Ported from the user's own sextant v0.4.0 prototype,
+ *  src/app.js:561-672 (toolRow, buildRows, drawMessages); the mock welcome/"try" rows, permission
+ *  items and click hit-boxes are gone — rows come from SextantState.messages, the card from
+ *  SextantState.card, the agent label reads "rovecode". Pure painter: no clock, no timers, no state
+ *  mutation; the prototype's msgScroll write-back became the `messagesScroll` seam. */
+
+import type { CardState, Rect, ScreenLike, Seg, SextantState, Theme, ToolRow } from "./types.ts";
+import { ATTR } from "./types.ts";
+import { moreMarker } from "../coding/diff.ts";
+import { inner, panel, spinner, st, wrap } from "./draw-util.ts";
+import { clipText } from "./tool-rows.ts";
+import { segWidth } from "./layout.ts";
+import { fmtElapsed, fmtK } from "./model.ts";
+import { thinkingWord } from "./pet.ts";
+import { scrollbar } from "./scrollbar.ts";
+
+/** one painted line of the transcript; `path` marks a tool row that names a file (message-hits.ts opens it on click) */
+export interface Row { segs: Seg[]; indent?: number; path?: string }
+
+/** 1-slot cache: buildRows is called twice per frame (once in drawMessages, once in messagesScroll).
+ *  Within a single frame now/w/theme are constant and messages is the same array, so the second call
+ *  is always a cache hit. Keyed by array identity + length (cheap mutation guard) + w + theme.name + now. */
+let _rowsCache: { msgs: readonly unknown[]; len: number; w: number; name: string; now: number; rows: Row[] } | null = null;
+export function cachedBuildRows(s: SextantState, w: number, theme: Theme, now: number): Row[] {
+  if (_rowsCache && _rowsCache.msgs === s.messages && _rowsCache.len === s.messages.length
+      && _rowsCache.w === w && _rowsCache.name === theme.name && _rowsCache.now === now) {
+    return _rowsCache.rows;
+  }
+  const rows = buildRows(s, w, theme, now);
+  _rowsCache = { msgs: s.messages, len: s.messages.length, w, name: theme.name, now, rows };
+  return rows;
+}
+
+/** the attachment cap the chip row quotes (core/images.ts MAX_IMAGES_PER_MESSAGE; a literal here keeps this painter free of node:fs) */
+const MAX_STAGED_HINT = 8;
+/** prompt placeholder when the input is empty */
+export const PLACEHOLDER = "ask rovecode — e.g. fix the failing test";
+/** button label per verdict — `all edits` reads as the mode it turns on, not as a third yes */
+export const VERDICT_LABEL: Record<"once" | "always" | "all-edits" | "deny", string> =
+  { once: "allow", always: "always", "all-edits": "all edits", deny: "deny" };
+/** the default row, for a card that offers no extra door */
+export const VERDICTS: readonly string[] = ["allow", "always", "deny"];
+export const FREE_TEXT_HINT = "type an answer…";
+export const SKIP_LABEL = "skip this question";
+/** the longest question shown in the card (wrapped rows) before it is elided */
+const MAX_QUESTION_ROWS = 6;
+
+const VERB_GLYPH: Record<string, string> = { read: "·", edit: "~", write: "+", remove: "−", run: "$", search: "⌕", fetch: "↗", task: "»" };
+/** the label shrinks to this many cells before a detail that would still fit whole is touched (app.js) */
+const LABEL_MIN = 8;
+/** when the detail must be clipped instead, the label keeps up to this many cells (all of a shorter one) */
+const LABEL_KEEP = 24;
+/** a text detail that would keep fewer cells than this says nothing — dropped instead of clipped */
+const DETAIL_MIN = 6;
+
+/** cells a string takes: one per code point (types.ts) — `.length` would count an emoji twice */
+const cells = (s: string): number => [...s].length;
+const segCells = (segs: readonly Seg[]): number => segs.reduce((n, [s]) => n + cells(s), 0);
+
+/** `<glyph> <verb> <label>` with the detail right-aligned: `· read x … N lines`, `~ edit x +a −b`,
+ *  `$ run cmd … last line`; the spinner replaces the glyph while the call runs (app.js:561-571).
+ *  A failed edit shows its rejection detail, never the +a −b it did not apply. When label and detail
+ *  do not both fit, the label yields first (down to LABEL_MIN cells, the prototype's rule); when even
+ *  that leaves no room, a TEXT detail is clipped with `…` beside a label kept at up to LABEL_KEEP cells
+ *  — a rejection's reason stays on the row at the frame's 160×44 message width instead of vanishing;
+ *  the `+a −b` pair is dropped whole when it cannot fit. */
+export function toolRow(t: ToolRow, w: number, theme: Theme, now: number): Seg[] {
+  const failed = !t.running && t.ok === false;
+  const g = t.running ? spinner(now) : VERB_GLYPH[t.verb] ?? "·";
+  const gc = t.running ? theme.accent : failed ? theme.err : "~+−".includes(g) ? theme.fg2 : theme.dim;
+  const verb = ((t.verb === "other" ? t.tool : t.verb) + " ").padEnd(7); // always ≥1 space before the label (ask_user, todo_write, MCP names)
+  const detail: Seg[] = [];
+  if (t.verb === "edit" && !failed && (t.add || t.del)) {
+    if (t.add) detail.push([`+${t.add}`, st(theme.ok)]);
+    if (t.del) detail.push([`${t.add ? " " : ""}−${t.del}`, st(theme.err)]);
+  } else if (t.detail) detail.push([(t.verb === "edit" ? "" : "… ") + t.detail, st(failed ? theme.err : theme.muted)]);
+  let dw = segCells(detail);
+  let label = t.label;
+  const room = w - 2 - verb.length; // cells for label + gap + detail
+  let labelMax = room;
+  if (dw) {
+    const keep = Math.min(cells(label), LABEL_KEEP);
+    if (room - dw - 2 >= Math.min(cells(label), LABEL_MIN)) labelMax = room - dw - 2; // both fit once the label is clipped
+    else if (detail.length === 1 && room - keep - 2 >= DETAIL_MIN) { // clip the text detail beside the kept label
+      const [text, style] = detail[0]!;
+      detail[0] = [clipText(text, room - keep - 2), style];
+      labelMax = keep; dw = segCells(detail);
+    } else { detail.length = 0; dw = 0; }
+  }
+  if (cells(label) > labelMax) label = labelMax > 1 ? [...label].slice(0, labelMax - 1).join("") + "…" : "";
+  const segs: Seg[] = [[g + " ", st(gc)], [verb, st(t.running ? theme.fg2 : theme.muted)], [label, st(t.running ? theme.fg : failed ? theme.err : theme.fg2)]];
+  if (detail.length) segs.push([" ".repeat(Math.max(1, w - 2 - verb.length - cells(label) - dw)), st(-1)], ...detail);
+  return segs;
+}
+
+/** the status word after `◆ rovecode ·` for the current run: `needs you` while a card waits (the frame
+ *  header's word, draw-frame.ts), else the live activity while running, else the outcome */
+export function activityLabel(s: SextantState, now?: number): string {
+  if (s.card) return "needs you";
+  const a = s.activity;
+  // a provider turn with no text yet: the word rotates with the clock so the eye can tell live from frozen
+  if (s.running) return now !== undefined && a.turnAt !== undefined && a.state === "THINKING" ? thinkingWord(now - a.turnAt) : a.label || a.state.toLowerCase();
+  switch (a.state) {
+    case "SUCCESS": return "done";
+    case "ERROR": return "error";
+    case "WAITING": return "needs you";
+    case "IDLE": return "";
+    default: return a.label || a.state.toLowerCase();
+  }
+}
+
+/** `  14s · 1.2k tokens` for the provider turn in flight — proof the run is alive while the model
+ *  is silent (a reasoning phase runs 15 s and more at high effort). The clock starts at turn_start,
+ *  the count is reasoning plus answer tokens so far. Degrades in steps to fit `room`: the token count
+ *  goes first, then the clock, so a narrow panel never overflows. Empty when no turn is in flight. */
+export function liveTail(s: SextantState, now: number, room: number): string {
+  const a = s.activity;
+  if (a.turnAt === undefined) return "";
+  const clock = fmtElapsed(now - a.turnAt);
+  const full = a.tokens ? `  ${clock} · ${fmtK(a.tokens)} tokens` : `  ${clock}`;
+  if ([...full].length <= room) return full;
+  const short = `  ${clock}`;
+  return [...short].length <= room ? short : "";
+}
+
+/** `@path` mentions in a user line get the accent (app.js:596) */
+function mentionSegs(line: string, theme: Theme): Seg[] {
+  return line.split(/(@[\w./\\-]+)/).filter(Boolean).map((part): Seg => [part, part[0] === "@" ? st(theme.accent, -1, ATTR.BOLD) : st(theme.fg, -1, ATTR.BOLD)]);
+}
+
+/** Flatten s.messages into drawable rows for a panel `w` cells wide (app.js:572-637). Each run
+ *  (the rows after a user row) opens with a `◆ rovecode · <status>` header before its first row of any
+ *  kind — a permission refusal can be the first thing a run says; the current run carries the live
+ *  status, earlier ones just the diamond. System/compaction rows outside a run (idle notes before
+ *  any user row) get no header. */
+export function buildRows(s: SextantState, w: number, theme: Theme, now: number): Row[] {
+  const rows: Row[] = [];
+  const blank = (): void => { rows.push({ segs: [] }); };
+  const iw = Math.max(1, w - 2);
+  let lastUser = -1;
+  s.messages.forEach((m, i) => { if (m.kind === "user") lastUser = i; });
+  let prev: SextantState["messages"][number] | null = null;
+  let headerDue = true;
+  let inRun = s.running; // a live run, or the rows after a user row
+  const outcome = s.activity.state === "SUCCESS" ? theme.ok : s.activity.state === "ERROR" ? theme.err : theme.accentDim;
+  const header = (i: number): void => {
+    const current = i > lastUser;
+    const label = current ? activityLabel(s, now) : "";
+    const dc = !current ? theme.accentDim : s.running ? theme.accent : outcome;
+    const segs: Seg[] = [["◆ ", st(dc)], ["rovecode", st(theme.fg, -1, ATTR.BOLD)], [label ? "  · " + label : "", st(s.running ? theme.accent : theme.muted)]];
+    if (current && s.running && !s.card) { const tail = liveTail(s, now, w - segWidth(segs)); if (tail) segs.push([tail, st(theme.muted)]); }
+    rows.push({ segs });
+    headerDue = false;
+  };
+  s.messages.forEach((m, i) => {
+    switch (m.kind) {
+      case "user": {
+        if (prev) blank();
+        const last = i === lastUser;
+        rows.push({ segs: [["you", st(last ? theme.accent : theme.muted)], [last ? "  · sent" : "", st(theme.accentDim)]] });
+        for (const l of wrap(m.text, iw)) rows.push({ segs: mentionSegs(l, theme), indent: 2 });
+        if (m.images?.length) rows.push({ segs: m.images.flatMap((name): Seg[] => [[` ▣ ${name} `, st(theme.fg2, theme.selBg)], ["  ", st(-1)]]), indent: 2 });
+        // one chip per @file attached (mentions.ts): the read block itself is in the session, not on screen
+        if (m.files?.length) for (const f of m.files) rows.push({ segs: [[` ▤ ${f} `, st(theme.fg2, theme.selBg)]], indent: 2 });
+        headerDue = true; inRun = true;
+        break;
+      }
+      case "assistant": {
+        if (headerDue) { blank(); header(i); } else if (prev && prev.kind !== "assistant") blank();
+        const lines = m.text ? wrap(m.text, iw) : [];
+        lines.forEach((l, k) => {
+          const segs: Seg[] = [[l, st(theme.fg2)]];
+          if (m.streaming && k === lines.length - 1) segs.push(["▌", st(theme.accent)]);
+          rows.push({ segs, indent: 2 });
+        });
+        if (m.streaming && !lines.length) rows.push({ segs: [["▌", st(theme.accent)]], indent: 2 });
+        break;
+      }
+      case "tool":
+        if (headerDue) { blank(); header(i); } else if (prev && prev.kind === "assistant") blank();
+        rows.push({ segs: toolRow(m, iw, theme, now), indent: 2, ...(m.path ? { path: m.path } : {}) });
+        break;
+      case "steer":
+        if (headerDue) { blank(); header(i); } else blank();
+        wrap(m.text, iw).forEach((l, k) => rows.push({ segs: [[k === 0 ? "» " : "  ", st(theme.accent)], [l, st(theme.fg)]] }));
+        break;
+      case "compaction":
+        if (headerDue && inRun) { blank(); header(i); } else blank();
+        for (const l of wrap(m.text, iw)) rows.push({ segs: [["▸ ", st(theme.accentDim)], [l, st(theme.muted, -1, ATTR.ITALIC)]] });
+        break;
+      case "system": {
+        if (headerDue && inRun) { blank(); header(i); } else if (prev && prev.kind !== "system") blank();
+        const err = m.tone === "error";
+        const gc = err ? theme.err : m.tone === "warn" ? theme.warn : theme.accentDim;
+        for (const l of wrap(m.text, iw)) rows.push({ segs: [[err ? "× " : "▸ ", st(gc)], [l, st(err ? theme.err : theme.muted)]] });
+        break;
+      }
+    }
+    prev = m;
+  });
+  // a run that has not said anything yet still shows it is alive: the header with the live line
+  // is the ONLY thing between the sent prompt and a first token that may be 15 s away. Not under a
+  // card — the card is the status then, and the message rows above it are budgeted to the row.
+  if (headerDue && s.running && inRun && !s.card) { blank(); header(s.messages.length); }
+  return rows;
+}
+
+/** row skeleton of the card: total rows and the free-text row index (question card) — the shared
+ *  geometry behind `cardRows` and `promptCursor` */
+export function cardShape(card: CardState, w: number, maxDetail: number): { total: number; freeText: number | null } {
+  if (card.kind === "approval") {
+    const n = card.detail ? detailLines(card.detail).length : 0;
+    return { total: 3 + Math.min(n, Math.max(1, maxDetail)), freeText: null };
+  }
+  const { q, opts, freeRows } = questionRows(card, w);
+  return { total: 1 + q + opts + freeRows + 2, freeText: freeRows > 0 ? 1 + q + opts : null };
+}
+
+/** the longest free-text answer shown (wrapped rows) before the head scrolls off — the tail keeps
+ *  the caret and the last words in view, the way a chat box behaves */
+export const MAX_FREE_TEXT_ROWS = 6;
+
+/** Row arithmetic the question card shares between its shape, its rows, the caret and the click
+ *  zones (card-hits.ts): `q` question rows (capped), `opts` option rows, and `freeRows` — the typed
+ *  answer WRAPPED to the card width (Berkay: a long answer used to be clipped to one row with `…`,
+ *  so the text you were typing vanished; it belongs on the next line). 0 when free text is off. */
+export function questionRows(card: Extract<CardState, { kind: "question" }>, w: number): { q: number; opts: number; freeRows: number; freeLines: string[] } {
+  const q = Math.min(MAX_QUESTION_ROWS, wrap(card.prompt.question, Math.max(1, w - 2)).length);
+  const opts = card.prompt.options?.length ?? 0;
+  if (card.prompt.allowFreeText === false) return { q, opts, freeRows: 0, freeLines: [] };
+  // the hint occupies the single empty row; typed text wraps at the row width minus the `▌ ` marker
+  const all = card.freeText.length === 0 ? [""] : wrap(card.freeText, Math.max(1, w - 4));
+  const freeLines = all.length > MAX_FREE_TEXT_ROWS ? all.slice(all.length - MAX_FREE_TEXT_ROWS) : all;
+  return { q, opts, freeRows: freeLines.length, freeLines };
+}
+
+/** the previewDiff lines worth a card row: the leading `--- a/x` / `+++ b/x` pair is dropped (the
+ *  title's `<tool> <args>` already names the file); hunk headers, signed lines and markers stay */
+function detailLines(detail: string): string[] {
+  const all = detail.split("\n");
+  return all[0]?.startsWith("--- ") && all[1]?.startsWith("+++ ") ? all.slice(2) : all;
+}
+
+/** color of one previewDiff line inside the approval card */
+function diffLineStyle(l: string, theme: Theme): Seg {
+  if (l.startsWith("+++") || l.startsWith("---") || l.startsWith("@@") || l.startsWith("…") || l.startsWith("\\")) return [l, st(theme.dim)];
+  if (l[0] === "+") return [l, st(theme.ok)];
+  if (l[0] === "-") return [l, st(theme.err)];
+  return [l, st(theme.fg2)];
+}
+
+/** The modal card rows (app.js:607-616): approval = `◆ needs your permission  <tool> <args>`, the
+ *  previewDiff detail bounded to `maxDetail` rows (clip marker), the verdict buttons
+ *  `allow · always · deny` with the selected one inverted; question = the question, its options,
+ *  the free-text row (when allowed) and `skip this question`, selection inverted the same way. */
+export function cardRows(card: CardState, w: number, maxDetail: number, theme: Theme): Row[] {
+  const rows: Row[] = [{ segs: [] }];
+  const button = (label: string, sel: boolean): Seg => [` ${label} `, sel ? st(theme.bg, theme.accent, ATTR.BOLD) : st(theme.muted)];
+  if (card.kind === "approval") {
+    rows.push({ segs: [["◆ ", st(theme.warn)], ["needs your permission", st(theme.fg, -1, ATTR.BOLD)], [`   ${card.tool} ${card.argsPreview}`.trimEnd(), st(theme.fg2)]] });
+    if (card.detail) {
+      const all = detailLines(card.detail);
+      const max = Math.max(1, maxDetail);
+      const lines = all.length > max ? [...all.slice(0, max - 1), moreMarker(all.length - max + 1)] : all;
+      for (const l of lines) rows.push({ segs: [diffLineStyle(l, theme)], indent: 2 });
+    }
+    const segs: Seg[] = [];
+    card.verdicts.forEach((v, i) => { segs.push(button(VERDICT_LABEL[v], i === card.selected), ["  ", st(-1)]); });
+    segs.push([" ⏎ confirm  ←→ choose  esc deny", st(theme.dim)]);
+    rows.push({ segs, indent: 2 });
+    return rows;
+  }
+  const q = wrap(card.prompt.question, Math.max(1, w - 2));
+  const shown = q.length > MAX_QUESTION_ROWS ? [...q.slice(0, MAX_QUESTION_ROWS - 1), (q[MAX_QUESTION_ROWS - 1] ?? "").slice(0, Math.max(0, w - 4)) + "…"] : q;
+  shown.forEach((l, k) => rows.push({ segs: [[k === 0 ? "◆ " : "  ", st(theme.warn)], [l, st(theme.fg, -1, ATTR.BOLD)]] }));
+  const opts = card.prompt.options ?? [];
+  opts.forEach((o, i) => rows.push({ segs: [button(o, i === card.selected)], indent: 2 }));
+  const { freeRows, freeLines } = questionRows(card, w);
+  const free = freeRows > 0;
+  if (free) {
+    const sel = card.selected === opts.length;
+    // the answer wraps: `▌ ` marks the first row, continuation rows align under the text
+    freeLines.forEach((line, k) => {
+      const marker: Seg = [k === 0 ? "▌ " : "  ", st(sel ? theme.accent : theme.accentDim)];
+      const empty = card.freeText.length === 0;
+      rows.push({ segs: [marker, [empty ? FREE_TEXT_HINT : line, empty ? st(theme.dim) : st(theme.fg, -1, ATTR.BOLD)]], indent: 2 });
+    });
+  }
+  rows.push({ segs: [button(SKIP_LABEL, card.selected === opts.length + (free ? 1 : 0))], indent: 2 });
+  rows.push({ segs: [["⏎ confirm  ↑↓ choose", st(theme.dim)]], indent: 2 });
+  return rows;
+}
+
+/** detail rows an approval card may take inside a message area `h` rows tall: all but the card's
+ *  blank + title + buttons and two message rows (the 160×44 frame's h = 10 → 5: a small hunk whole) */
+const detailBudget = (h: number): number => Math.max(2, h - 5);
+
+/** message rows above the rule, card rows (bounded so ≥1 message row survives), rows per message area */
+export function areas(B: Rect, s: SextantState): { h: number; cardH: number; msgH: number; maxDetail: number } {
+  const h = Math.max(0, B.h - 2);
+  const maxDetail = detailBudget(h);
+  const cardH = s.card ? Math.min(cardShape(s.card, B.w, maxDetail).total, Math.max(0, h - 1)) : 0;
+  return { h, cardH, msgH: h - cardH, maxDetail };
+}
+
+/** Scroll geometry for the message rows: `max` = rows that do not fit, `offset` = the row drawn
+ *  first — the tail when `stick`, else s.msgScroll clamped. The renderer writes `offset` back into
+ *  s.msgScroll after a frame (the prototype mutated S.msgScroll in place; a pure painter cannot). */
+export function messagesScroll(rect: Rect, s: SextantState, theme: Theme, now: number): { offset: number; max: number } {
+  const B = inner(rect);
+  const { msgH } = areas(B, s);
+  const rows = cachedBuildRows(s, B.w, theme, now);
+  const max = Math.max(0, rows.length - msgH);
+  return { offset: s.stick ? max : Math.max(0, Math.min(s.msgScroll, max)), max };
+}
+
+/** Where the terminal cursor belongs for the prompt (or the question card's free-text row when it
+ *  is selected); null when the messages panel is not taking text (other focus, palette/help, approval). */
+export function promptCursor(rect: Rect, s: SextantState): { x: number; y: number } | null {
+  if (s.palette || s.help) return null;
+  const B = inner(rect);
+  if (B.w < 3 || B.h < 3) return null;
+  const { cardH, msgH, maxDetail } = areas(B, s);
+  if (s.card) {
+    if (s.card.kind !== "question") return null;
+    const shape = cardShape(s.card, B.w, maxDetail);
+    if (shape.freeText === null || s.card.selected !== (s.card.prompt.options?.length ?? 0)) return null; // selection index = options.length is the free-text row
+    // the caret sits at the end of the LAST wrapped row of the answer (questionRows keeps the tail)
+    const { freeRows, freeLines } = questionRows(s.card, B.w);
+    const row = shape.freeText + freeRows - 1 - (shape.total - cardH); // rows hidden when the card is clipped scroll off the top
+    if (row < 0) return null;
+    const last = freeLines[freeLines.length - 1] ?? "";
+    return { x: Math.min(B.x + 4 + [...last].length, B.x + B.w - 1), y: B.y + msgH + row };
+  }
+  if (s.focus !== "messages") return null;
+  const inW = B.w - 2;
+  const off = Math.max(0, s.input.cur - inW + 1);
+  return { x: B.x + 2 + s.input.cur - off, y: B.y + B.h - 1 };
+}
+
+/** Paint the messages panel into `rect`: frame + count, rows (scrolled), the pinned card, the ╌
+ *  rule, the prompt line `▌ <text>` (placeholder when empty). Pure over its inputs. */
+export function drawMessages(scr: ScreenLike, rect: Rect, s: SextantState, theme: Theme, now: number): void {
+  if (rect.w < 4 || rect.h < 3) return;
+  const count = s.messages.filter((m) => m.kind === "user").length;
+  const focused = s.focus === "messages";
+  const B = panel(scr, rect, "messages", focused, count ? [[String(count), st(theme.muted)]] : [], theme);
+  const { h, cardH, msgH, maxDetail } = areas(B, s);
+  if (h > 0) {
+    const rows = cachedBuildRows(s, B.w, theme, now);
+    const max = Math.max(0, rows.length - msgH);
+    const offset = s.stick ? max : Math.max(0, Math.min(s.msgScroll, max));
+    scrollbar(scr, theme, B.x + B.w - 1, B.y, msgH, rows.length, msgH, offset); // scroll-hits.ts rebuilds this geometry for the drag zone
+    for (let i = 0; i < msgH; i++) {
+      const r = rows[offset + i];
+      if (!r) break;
+      const cx = B.x + (r.indent ?? 0);
+      scr.text(cx, B.y + i, r.segs, B.x + B.w - cx);
+    }
+    if (s.card && cardH > 0) {
+      const all = cardRows(s.card, B.w, maxDetail, theme);
+      const shown = all.slice(all.length - cardH); // when clipped keep the tail: the buttons must stay reachable
+      shown.forEach((r, i) => { const cx = B.x + (r.indent ?? 0); scr.text(cx, B.y + msgH + i, r.segs, B.x + B.w - cx); });
+    }
+  }
+  const py = B.y + B.h - 1;
+  if (B.h >= 2) scr.hline(B.x, py - 1, B.w, st(theme.frameDim), "╌");
+  // staged images ride ON the rule row as chips — visible before the message is sent, and no row is
+  // taken from the transcript for them (Berkay: keep the surface simple). Clipped, oldest dropped first.
+  if (B.h >= 2 && s.staged.length > 0) {
+    const segs: Seg[] = [[" ", st(-1)]];
+    for (const name of s.staged) segs.push([` ▣ ${name} `, st(theme.fg2, theme.selBg)], [" ", st(-1)]);
+    segs.push([`${s.staged.length}/${MAX_STAGED_HINT} · enter sends · /attach clear`, st(theme.dim)]);
+    scr.text(B.x, py - 1, segs, B.w);
+  }
+  const hasText = s.input.text.length > 0;
+  scr.put(B.x, py, "▌", st(hasText || focused ? theme.accent : theme.accentDim));
+  const inW = B.w - 2;
+  if (inW <= 0) return;
+  if (hasText) {
+    const off = Math.max(0, s.input.cur - inW + 1);
+    scr.put(B.x + 2, py, s.input.text.slice(off), st(theme.fg, -1, ATTR.BOLD), inW);
+  } else scr.put(B.x + 2, py, PLACEHOLDER, st(theme.dim), inW);
+}

package/src/sextant/draw-pet.ts

@@ -0,0 +1,230 @@
+/** Port #45 — paints rovecode into its panel: a rounded frame titled `<name>  lv N  <mood>`, the cloud
+ *  sprite on the prototype's 1.8 s step sway (pet.js:196), weather (code drizzle while editing, lightning while running/testing,
+ *  sun on success, zzz when sleepy), the storm (dark filled body, furrowed brows, red eyes, rain + bolts,
+ *  panel flash, reddened border), sparkles/hearts, and a ≤2-line speech bubble — everything clipped to
+ *  the panel rect. Ported from the user's own sextant v0.4.0 prototype `src/pet.js` draw() + `app.js`
+ *  drawPet()/panel() (user-owned). PURE: `now` is a parameter; no timers, no unseeded randomness. */
+
+import { ATTR, type Rect, type ScreenLike, type Seg, type SextantState, type Style, type Theme } from "./types.ts";
+import { CODE_RAIN, FACE, INNER, SPRITE, moodCtxFrom, type Mood, type MoodCtx, type Pet } from "./pet.ts";
+import { mix, st } from "./theme.ts";
+
+/** term.js mix() lives in theme.ts (port #40); re-exported for the pet tests/fixtures that import it here */
+export { mix };
+
+/** the sprite shifts one row every SWAY_MS — pet.js:196 `Math.floor(t / 1800) % 2`, the README's "1.8 s salınım"
+ *  (full period 3.6 s); the prototype's ±1-column drift (pet.js:197) is deliberately not ported: "titreme yok" */
+export const SWAY_MS = 1800;
+/** a double-flicker strike every 2.6 s; the panel flashes for the first 260 ms */
+export const STORM_PERIOD_MS = 2600;
+export const STORM_FLASH_MS = 260;
+export const SPRITE_W = 18;
+
+/** the interior shading, per sprite row: light at the top, heaviest along the base (see the fill in
+ *  drawPet). Rows past the end fall back to ░, so a re-drawn sprite cannot crash the painter. */
+export const FILL_GLYPH: readonly string[] = ["░", "░", "░", "▒", "▓", "▓"];
+export const FILL_MIX: readonly number[] = [0.10, 0.12, 0.14, 0.18, 0.24, 0.26];
+
+/** the click zone the input layer registers (a click anywhere in the panel pokes); null when hidden */
+export function petHit(rect: Rect | null): Rect | null { return rect; }
+
+export function moodColor(m: Mood, theme: Theme): number {
+  if (m === "sunny") return theme.ok;
+  if (m === "furious") return theme.err;
+  if (m === "patient") return theme.warn;
+  if (m === "focused" || m === "zapping" || m === "conducting") return theme.accent;
+  return theme.muted;
+}
+
+/** vertical sway phase: a step that flips every SWAY_MS (frames within one step are identical — no per-frame jitter) */
+export function swayBob(now: number): 0 | 1 { return (Math.floor(now / SWAY_MS) % 2) as 0 | 1; }
+
+/** word wrap to w cells (code points); a word longer than a row — a host, a path — is hard-split, so a
+ *  bubble line is never wider than the row and the closing ” survives put()'s clip (it used to be left
+ *  whole and the quote fell off the edge) */
+export function wrapText(text: string, w: number): string[] {
+  const out: string[] = [];
+  const width = Math.max(1, w);
+  let line = "", len = 0;
+  for (const raw of text.split(" ")) {
+    const cps = [...raw];
+    while (cps.length > width) { if (line) { out.push(line); line = ""; len = 0; } out.push(cps.splice(0, width).join("")); }
+    if (!cps.length) continue;
+    const word = cps.join("");
+    if (!line) { line = word; len = cps.length; continue; }
+    if (len + 1 + cps.length <= width) { line += " " + word; len += 1 + cps.length; }
+    else { out.push(line); line = word; len = cps.length; }
+  }
+  if (line) out.push(line);
+  return out;
+}
+
+/** no-op when the layout hides the pet (rect null below 34 rows, or ROVECODE_PET=0) */
+export function drawPet(scr: ScreenLike, rect: Rect | null, pet: Pet, s: SextantState, theme: Theme, now: number): void {
+  if (!rect || rect.w < 8 || rect.h < 4) return;
+  const ctx = moodCtxFrom(s, now);
+  pet.tick(now, ctx);
+  const m = pet.mood(ctx, now);
+  const B = panel(scr, rect, pet.state.name, pet.level(ctx.tokens), m, theme);
+  drawCloud(scr, B, pet, ctx, m, theme, now);
+}
+
+/** app.js panel(): rounded box, bold title in the top border, right-aligned extras; returns the inner rect.
+ *  When the row is too narrow for `lv N  mood` the level is dropped first, then the mood. */
+function panel(scr: ScreenLike, R: Rect, name: string, lvl: number, m: Mood, theme: Theme): Rect {
+  const furious = m === "furious";
+  const col = furious ? mix(theme.bg, theme.err, 0.6) : theme.frame;
+  scr.box(R.x, R.y, R.w, R.h, st(col));
+  scr.text(R.x + 2, R.y, [[" ", st(-1)], [name, st(furious ? col : theme.fg2, -1, ATTR.BOLD)], [" ", st(-1)]], R.w - 3);
+  const moodSeg: Seg = [m, st(moodColor(m, theme), -1, furious ? ATTR.BOLD : 0)];
+  const variants: Seg[][] = [[[`lv ${lvl}`, st(theme.muted)], ["  ", st(-1)], moodSeg], [moodSeg]];
+  for (const extra of variants) {
+    const ew = extra.reduce((n, [t]) => n + t.length, 0);
+    const ex = R.x + R.w - 3 - ew;
+    if (ex > R.x + 4 + name.length) { scr.text(ex, R.y, [[" ", st(-1)], ...extra, [" ", st(-1)]]); break; }
+  }
+  return { x: R.x + 2, y: R.y + 1, w: R.w - 4, h: R.h - 2 };
+}
+
+function drawCloud(scr: ScreenLike, B: Rect, pet: Pet, ctx: MoodCtx, m: Mood, theme: Theme, t: number): void {
+  const P = pet.state;
+  const has = (k: string) => P.fx.find((f) => f.kind === k);
+  const inB = (x: number, y: number) => x >= B.x && x < B.x + B.w && y >= B.y && y < B.y + B.h;
+  const putSafe = (x: number, y: number, ch: string, s: Style) => { if (inB(x, y)) scr.put(x, y, ch, s); };
+  const sleeping = m === "sleepy", stormy = m === "furious", sunny = m === "sunny";
+  const zapping = ctx.state === "RUNNING" || ctx.state === "TESTING";
+  // storm timing: a double-flicker strike every 2.6 s; the panel lights up for the first 260 ms
+  let flash = false, boltCols: number[] = [];
+  if (stormy) {
+    const cyc = Math.floor(t / STORM_PERIOD_MS);
+    flash = t % STORM_PERIOD_MS < STORM_FLASH_MS;
+    boltCols = [3 + ((cyc * 7919) % 11), 3 + ((cyc * 104729 + 5) % 11)];
+    if (flash) scr.tint(B.x, B.y, B.w, B.h, mix(theme.bg, theme.warn, 0.07));
+  }
+  // body colour: dark red outline over a ░-filled body in a storm, dim while asleep, bright while busy
+  let body = theme.fg2;
+  if (sunny) body = theme.fg;
+  else if (stormy) body = flash ? theme.warn : mix(theme.bg, theme.err, 0.7);
+  else if (sleeping) body = theme.mixDim;
+  else if (ctx.state === "EDITING" || ctx.running) body = theme.fg;
+  // the interior is always painted now: ░ across the top rows, ▒ through the middle, ▓ along the base —
+  // two shading steps that read as volume without touching the outline. The tone is mixed from the body
+  // colour, so the cloud dims asleep and brightens while busy with the rest of the sprite. A storm keeps
+  // its own flat, brighter fill (and its flash), which is what makes it read as a different thing.
+  const stormFill = stormy ? mix(theme.bg, theme.fg, flash ? 0.35 : 0.22) : null;
+  const faceFg = stormy ? theme.err : sleeping ? theme.muted : theme.fg;
+  const mouthFg = stormy ? theme.fg2 : sleeping ? theme.muted : theme.fg;
+  // motion: bounce fx hops every 200 ms, shiver fx jitters sideways, a strike shakes the cloud,
+  // otherwise the calm 1.8 s sway (asleep: settled low)
+  const bob = has("bounce") ? Math.floor(t / 200) % 2 : sleeping ? 1 : swayBob(t);
+  const drift = has("shiver") ? Math.floor(t / 160) % 2 : flash ? 1 : 0;
+  const sx = B.x + Math.max(0, Math.floor((B.w - SPRITE_W) / 2)) + drift, sy = B.y + 2 - bob;
+  // face
+  let eyes = "••", mouth = "◡", eyeShift = 0;
+  const blink = !sleeping && t % 5200 < 170;
+  if (ctx.booting) eyes = "──";
+  else if (stormy) { eyes = flash ? "▪▪" : "••"; mouth = "∩"; }
+  else if (sleeping) eyes = "──";
+  else if (sunny) eyes = "◠◠";
+  else if (m === "patient") mouth = "○";
+  else if (zapping) mouth = "─";
+  else if (ctx.state === "READING") eyeShift = [-1, 0, 1, 0][Math.floor(t / 900) % 4] ?? 0;
+  else if (ctx.running) eyeShift = 1;
+  if (P.glance && P.glance.until > t && !sleeping && !stormy) eyeShift = P.glance.dir;
+  if (ctx.typing && !ctx.running) eyeShift = 1;
+  if (blink && !stormy) eyes = "──";
+  for (let r = 0; r < SPRITE.length; r++) {
+    const y = sy + r, row = SPRITE[r] ?? "", [a, b] = INNER[r] ?? [0, 0];
+    for (let i = 0; i < row.length; i++) {
+      const ch = row[i] ?? " ";
+      if (ch !== " ") putSafe(sx + i, y, ch, st(body));
+      else if (i > a && i < b) {
+        putSafe(sx + i, y, stormFill != null ? "░" : (FILL_GLYPH[r] ?? "░"),
+                st(stormFill ?? mix(theme.bg, body, FILL_MIX[r] ?? 0.14)));
+      }
+    }
+    if (r === FACE.EYE_ROW) {
+      putSafe(sx + FACE.EYE_L + eyeShift, y, eyes[0] ?? "•", st(faceFg, -1, ATTR.BOLD));
+      putSafe(sx + FACE.EYE_R + eyeShift, y, eyes[1] ?? "•", st(faceFg, -1, ATTR.BOLD));
+    }
+    if (r === FACE.EYE_ROW - 1 && stormy) { // furrowed brows
+      putSafe(sx + FACE.EYE_L + eyeShift, y, "╲", st(theme.err, -1, ATTR.BOLD));
+      putSafe(sx + FACE.EYE_R + eyeShift, y, "╱", st(theme.err, -1, ATTR.BOLD));
+    }
+    if (r === FACE.MOUTH_ROW) putSafe(sx + FACE.MOUTH + (eyeShift > 0 ? 1 : 0), y, mouth, st(mouthFg));
+  }
+  // weather + extras
+  const wy = sy + SPRITE.length; // first row under the cloud
+  if (sunny) {
+    putSafe(sx + 15, sy - 1, "☼", st(theme.warn, -1, ATTR.BOLD));
+    putSafe(sx + 17, sy - 2, "·", st(theme.warn));
+    putSafe(sx + 13, sy - 2, "·", st(theme.warn));
+    putSafe(sx + 18, sy, "·", st(theme.warn));
+  }
+  if (sleeping) {
+    const ph = Math.floor(t / 1200) % 3;
+    putSafe(sx + 13, sy - (ph >= 1 ? 1 : 0), "z", st(theme.muted));
+    if (ph >= 1) putSafe(sx + 15, sy - 1 - (ph === 2 ? 1 : 0), "Z", st(theme.muted));
+  }
+  if (ctx.running && !stormy && m !== "patient" && ctx.state !== "EDITING" && !zapping) { // thinking
+    const ph = Math.floor(t / 800) % 4;
+    putSafe(sx + 17, sy + 1, "◌", st(theme.muted));
+    if (ph >= 1) putSafe(sx + 18, sy, "○", st(theme.muted));
+    if (ph >= 2) putSafe(sx + 20, sy - 1, ["…", "·", "?", "…"][Math.floor(t / 3000) % 4] ?? "…", st(theme.fg2));
+  }
+  if (m === "patient") putSafe(sx + 17, sy + (Math.floor(t / 900) % 2 ? 0 : 1), "?", st(theme.warn, -1, ATTR.BOLD)); // slow blink
+  if (ctx.state === "EDITING") { // code drizzle
+    for (let row = 0; row < 2; row++) {
+      const phase = Math.floor(t / 420) + row * 2;
+      for (let x = sx + 3; x < sx + 16; x++) {
+        if ((x + phase) % 4 !== 0) continue;
+        const ch = CODE_RAIN[(x * 7 + Math.floor(t / 1400) + row) % CODE_RAIN.length] ?? ".";
+        putSafe(x, wy + row, ch, st(row ? theme.dim : theme.accentDim));
+      }
+    }
+  }
+  if (zapping && Math.floor(t / 700) % 2 === 0) { // lightning
+    const k = sx + 4 + (Math.floor(t / 2100) % 3) * 5;
+    putSafe(k, wy, "╲", st(theme.warn, -1, ATTR.BOLD));
+    putSafe(k, wy + 1, "╱", st(theme.warn, -1, ATTR.BOLD));
+  }
+  if (stormy) {
+    const rows = Math.max(1, Math.min(3, B.y + B.h - 2 - wy));
+    for (let row = 0; row < rows; row++) {
+      for (let x = sx + 1; x < sx + 17; x++) {
+        if ((x * 3 + Math.floor(t / 330) + row * 2) % 4 === 0) putSafe(x, wy + row, row % 2 ? "╷" : "│", st(flash ? theme.fg2 : theme.info));
+      }
+    }
+    if (flash) {
+      for (const k of boltCols) for (let r = 0; r < rows; r++) putSafe(sx + k, wy + r, r % 2 ? "╱" : "╲", st(theme.warn, -1, ATTR.BOLD));
+      putSafe(sx - 1, sy + 2, "╲", st(theme.warn, -1, ATTR.BOLD));
+      putSafe(sx + 18, sy + 1, "╱", st(theme.warn, -1, ATTR.BOLD));
+    }
+  }
+  const sp = has("sparkle");
+  if (sp) {
+    for (let i = 0; i < 7; i++) {
+      const h = (sp.seed * (i + 3) * 2654435761) >>> 0;
+      const x = B.x + (h % B.w), y = B.y + ((h >>> 8) % Math.max(1, wy + 1 - B.y));
+      const on = Math.floor((t + (h % 500)) / 520) % 2 === 0;
+      if (on && !(y >= sy && y < wy && x >= sx + 1 && x < sx + 18)) putSafe(x, y, ["*", "·", "+"][i % 3] ?? "*", st(i % 2 ? theme.warn : theme.ok));
+    }
+  }
+  const hearts = has("hearts");
+  if (hearts) {
+    const age = t - (hearts.until - 1800);
+    const rise = Math.min(2, Math.floor(Math.max(0, age) / 700));
+    putSafe(sx + 16, sy + 1 - rise, "♥", st(theme.err));
+    if (rise >= 1) putSafe(sx + 19, sy + 2 - rise, "♥", st(theme.err));
+  }
+  // speech bubble: at most two lines at the bottom of the panel, clipped to its width
+  const q = P.quip && P.quip.until > t ? P.quip.text : null;
+  if (q) {
+    const qy = B.y + B.h - 2;
+    // B.w - 3: the two quote marks share the line and put() clips at B.w - 1, so a full line keeps its closing ”
+    const lines = wrapText(q, B.w - 3).slice(0, 2);
+    lines.forEach((l, i) => {
+      if (qy + i < B.y + B.h) scr.put(B.x + 1, qy + i, (i === 0 ? "“" : " ") + l + (i === lines.length - 1 ? "”" : ""), st(theme.fg2, -1, ATTR.ITALIC), B.w - 1);
+    });
+  }
+}