rovecode 0.4.0-beta.3 → 0.4.0

package/src/sextant/draw-code.ts

@@ -0,0 +1,388 @@
+/** Sextant surface (port #42) — the CODE panel: title per mode, the right-edge rail (▤ ± $ ∷ + the
+ *  minimap), file view with syntax coloring and the reading highlight, run output with PASS/FAIL
+ *  chips, search results, unified/split diff. Ported from the user's own sextant v0.4.0 prototype,
+ *  src/app.js:164-181 (tokStyle/putCode) and :333-558 (drawCode … drawSplitSide); the mock file
+ *  fixture, edit replay and click hit-boxes are gone — every field is read from SextantState and
+ *  the painter is pure (no clock, no timers, no state mutation; `now` is a parameter). The
+ *  prototype's scroll write-backs became `codeScrollTop` so the renderer can persist the view. */
+
+import type { DiffHunk, Rect, ScreenLike, Seg, SextantState, Style, Theme } from "./types.ts";
+import { ATTR } from "./types.ts";
+import { hardWrap, inner, panel, spinner, splitLines, splitLinesCached, st } from "./draw-util.ts";
+import { EMPTY } from "../core/voice.ts";
+import { moreMarker } from "../coding/diff.ts";
+import { scrollbar } from "./scrollbar.ts";
+
+/** a syntax token: text + either a prototype class name (kw str num dec cm ty fn key … plain,
+ *  colored by `tokStyle`) or a ready Style (undefined = plain) */
+export type Token = readonly [text: string, cls: string | Style | undefined];
+export type TokenizeFn = (line: string, lang: string) => readonly Token[];
+/** optional engine seams: the syntax tokenizer (#40's engine); default = uncolored lines */
+export interface CodeDeps { tokenize?: TokenizeFn }
+export type Painter = (scr: ScreenLike, rect: Rect, s: SextantState, theme: Theme, now: number) => void;
+
+export const RAIL_W = 3;
+const MODES: readonly (readonly [string, string])[] = [["code", "▤"], ["diff", "±"], ["run", "$"], ["agents", "∷"]];
+const plainTokens: TokenizeFn = (line) => [[line, "plain"]];
+
+let agentsPainter: Painter | null = null;
+/** #46 plugs the crew board in here; until then `∷` shows the crew summary from s.crew */
+export function setAgentsPainter(fn: Painter | null): void { agentsPainter = fn; }
+
+/** language tag from the path (drives the tokenizer); the prototype knew ts/json/md/text */
+export function langOf(path: string): string {
+  if (/\.(?:[cm]?[jt]sx?)$/.test(path)) return "ts";
+  if (path.endsWith(".json")) return "json";
+  if (path.endsWith(".md")) return "md";
+  return "text";
+}
+
+/** token class → style (app.js:164-173); `bg` rides along so tinted rows keep their background */
+export function tokStyle(cls: string, theme: Theme, bg = -1): Style {
+  switch (cls) {
+    case "kw": return st(theme.fg, bg, ATTR.BOLD);
+    case "str": case "num": case "dec": return st(theme.str, bg);
+    case "cm": return st(theme.muted, bg, ATTR.ITALIC);
+    case "ty": return st(theme.ty, bg);
+    case "fn": return st(theme.fg, bg);
+    default: return st(theme.fg2, bg);
+  }
+}
+
+/** write one code line colored token by token, clipped to maxW; returns the x after the last cell */
+function putCode(scr: ScreenLike, x: number, y: number, text: string, lang: string, bg: number, maxW: number, theme: Theme, tokenize: TokenizeFn, fgOverride?: number): number {
+  if (maxW <= 0) return x;
+  if (fgOverride !== undefined) return scr.put(x, y, text, st(fgOverride, bg), maxW);
+  let cx = x;
+  const end = x + maxW;
+  for (const [tok, cls] of tokenize(text, lang)) {
+    if (cx >= end) break;
+    const style = typeof cls === "string" ? tokStyle(cls, theme, bg) : cls ? { ...cls, bg: cls.bg >= 0 ? cls.bg : bg } : st(theme.fg2, bg);
+    cx = scr.put(cx, y, tok, style, end - cx);
+  }
+  return cx;
+}
+
+/** the activity is reading/editing the file on screen (the reducer switches the panel to it) */
+const readingThis = (s: SextantState): boolean => s.running && (s.activity.state === "READING" || s.activity.state === "EDITING");
+
+/** the file named in the title/body: the diff's file in diff mode, else the code file */
+const shownFile = (s: SextantState): string | null => (s.code.mode === "diff" && s.code.diff ? s.code.diff.file : s.code.file);
+
+/** panel title + right-aligned extras per mode (app.js:337-351) */
+export function codeTitle(s: SextantState, theme: Theme, now: number): { title: string; extra: Seg[] } {
+  const c = s.code;
+  if (c.mode === "run") {
+    if (!c.run) return { title: "run", extra: [] };
+    // the command lives in the body (drawRun's pinned `$ cmd` header), not here: the title clips it
+    // to one ellipsized segment while the body can budget it in rows, and one copy is enough
+    const tail: Seg = c.run.status === "running" ? [spinner(now), st(theme.accent)] : c.run.status === "ok" ? ["exit 0", st(theme.muted)] : ["failed", st(theme.err)];
+    return { title: "run", extra: [tail] };
+  }
+  if (c.mode === "search") {
+    if (!c.search) return { title: "search", extra: [] };
+    return { title: "search", extra: [[c.search.query, st(theme.str)], [`  ${c.search.lines.length} results`, st(theme.muted)]] };
+  }
+  if (c.mode === "agents") {
+    const live = s.crew.filter((t) => t.status === "queued" || t.status === "running").length;
+    const done = s.crew.filter((t) => t.status === "done").length;
+    const failed = s.crew.filter((t) => t.status === "failed").length;
+    if (!s.crew.length) return { title: "agents", extra: [["crew", st(theme.muted)]] };
+    const extra: Seg[] = [[`${live} running`, st(live ? theme.accent : theme.muted)], [`  ${done} done`, st(theme.muted)]];
+    if (failed) extra.push([`  ${failed} failed`, st(theme.err)]);
+    return { title: "agents", extra };
+  }
+  const file = shownFile(s);
+  const title = c.mode === "diff" ? "diff" : "code";
+  if (!file) return { title, extra: [] };
+  const extra: Seg[] = [[file, st(theme.fg2)]];
+  if (c.diff && c.diff.file === file) {
+    if (c.diff.add || c.diff.del) extra.push(["  ", st(-1)], [c.diff.add ? `+${c.diff.add}` : "", st(theme.ok)], [c.diff.del ? `${c.diff.add ? " " : ""}−${c.diff.del}` : "", st(theme.err)]);
+    if (c.diff.base === "head") extra.push(["  vs HEAD", st(theme.muted)]); // cumulative hunks, not the one edit that landed
+  }
+  if (readingThis(s) && c.mode === "code") extra.push([`   ${s.activity.state.toLowerCase()}`, st(theme.accent)]);
+  return { title, extra };
+}
+
+/** new-file line numbers touched by the hunks: "added" (pure insert) or "changed" (replaced lines) */
+export function hunkMarks(hunks: readonly DiffHunk[]): Map<number, "added" | "changed"> {
+  const marks = new Map<number, "added" | "changed">();
+  for (const h of hunks) {
+    let nl = h.newStart, i = 0;
+    while (i < h.rows.length) {
+      if (h.rows[i]!.op === " ") { nl++; i++; continue; }
+      const added: number[] = [];
+      let hasDel = false;
+      while (i < h.rows.length && h.rows[i]!.op !== " ") { if (h.rows[i]!.op === "-") hasDel = true; else added.push(nl++); i++; }
+      for (const n of added) marks.set(n, hasDel ? "changed" : "added");
+    }
+  }
+  return marks;
+}
+
+const marksFor = (s: SextantState): Map<number, "added" | "changed"> =>
+  s.code.diff && s.code.diff.file === s.code.file ? hunkMarks(s.code.diff.hunks) : new Map();
+
+/** the rows the current mode would draw (for scroll clamping); split diff depends on the body width */
+export function rowCount(s: SextantState, bodyW: number): number {
+  const c = s.code;
+  if (c.mode === "code") return c.content === null ? 0 : splitLinesCached(c.content).length;
+  if (c.mode === "diff") return c.diff ? diffRows(c.diff.hunks, bodyW > 110).length : 0;
+  if (c.mode === "search") return c.search ? c.search.lines.length : 0;
+  return 0;
+}
+
+/** Effective top row of the body for the panel at `rect` — s.code.scroll clamped to the content,
+ *  or the row that centers the highlight while the run is reading/editing the file (app.js:407-408).
+ *  The renderer writes this back into s.code.scroll after a frame so the view persists (the
+ *  prototype mutated S.code.scroll in place; a pure painter cannot). run/agents follow their tail. */
+export function codeScrollTop(rect: Rect, s: SextantState): number {
+  const B = inner(rect);
+  const h = B.h, bodyW = B.w - RAIL_W - 2;
+  const n = rowCount(s, bodyW);
+  const max = Math.max(0, n - h);
+  if (s.code.mode === "code" && s.code.hl && readingThis(s)) return Math.min(max, Math.max(0, s.code.hl[0] - 1 - Math.floor(h / 2)));
+  return Math.max(0, Math.min(s.code.scroll, max));
+}
+
+/** The rail: a 3-wide box with the four mode glyphs (active = accent + bold) and, for a file, the
+ *  minimap — file lines folded into rail rows, added = ok, changed = warn, the visible region as a
+ *  thick block ▌ and the rest as ▏ (app.js:367-397). */
+function drawRail(scr: ScreenLike, R: Rect, s: SextantState, theme: Theme, viewTop: number, viewH: number): void {
+  scr.box(R.x, R.y, R.w, R.h, st(theme.frameDim));
+  MODES.forEach(([m, g], i) => {
+    if (R.y + 1 + i >= R.y + R.h - 1) return; // a rail shorter than the glyph column shows what fits
+    const active = s.code.mode === m || (m === "code" && s.code.mode === "search");
+    scr.put(R.x + 1, R.y + 1 + i, g, st(active ? theme.accent : theme.dim, -1, active ? ATTR.BOLD : 0));
+  });
+  const top = R.y + 6, h = R.h - 7;
+  if (h < 3 || (s.code.mode !== "code" && s.code.mode !== "diff") || s.code.content === null || !s.code.file) return;
+  const n = Math.max(1, splitLinesCached(s.code.content).length);
+  const marks = marksFor(s);
+  const rows = Math.min(h, n);
+  for (let i = 0; i < rows; i++) {
+    const l0 = Math.floor((i / rows) * n), l1 = Math.max(l0 + 1, Math.floor(((i + 1) / rows) * n));
+    let col = theme.rule;
+    for (let k = l0; k < l1; k++) {
+      const m = marks.get(k + 1);
+      if (m === "added") col = theme.ok; else if (m === "changed" && col !== theme.ok) col = theme.warn;
+    }
+    const inView = l1 > viewTop && l0 < viewTop + viewH;
+    const marked = col !== theme.rule;
+    scr.put(R.x + 1, top + i, inView ? "▌" : "▏", st(marked ? col : inView ? theme.rule2 : theme.rule));
+  }
+}
+
+/** line numbers, change marks (▎), colored code, the highlight band with its "◂ reading" tag (app.js:398-427) */
+function drawFileView(scr: ScreenLike, B: Rect, s: SextantState, theme: Theme, top: number, tokenize: TokenizeFn): void {
+  const file = s.code.file;
+  if (!file) { scr.put(B.x, B.y, EMPTY.code, st(theme.muted), B.w); return; }
+  if (s.code.content === null) { scr.clip(B.x, B.y, `cannot read ${file}`, st(theme.muted), B.w); return; }
+  const lines = splitLinesCached(s.code.content);
+  if (!lines.length) { scr.put(B.x, B.y, "(empty)", st(theme.dim), B.w); return; }
+  const lang = langOf(file), marks = marksFor(s), hl = s.code.hl;
+  const tag = readingThis(s) ? `◂ ${s.activity.state.toLowerCase()}` : null;
+  const lw = Math.max(3, String(lines.length).length);
+  for (let i = 0; i < B.h; i++) {
+    const idx = top + i, ln = lines[idx];
+    if (ln === undefined) break;
+    const y = B.y + i;
+    const inHl = hl !== null && idx + 1 >= hl[0] && idx + 1 <= hl[1];
+    const mark = marks.get(idx + 1);
+    const bg = inHl ? theme.hlBg : -1;
+    if (inHl) scr.tint(B.x, y, B.w, 1, bg);
+    scr.put(B.x, y, String(idx + 1).padStart(lw), st(inHl ? theme.accent : theme.dim, bg));
+    scr.put(B.x + lw + 1, y, mark ? "▎" : " ", st(mark === "changed" ? theme.warn : theme.ok, bg));
+    putCode(scr, B.x + lw + 3, y, ln, lang, bg, B.w - lw - 3, theme, tokenize);
+    if (tag && inHl && hl !== null && idx + 1 === hl[0] && B.w > 24) scr.put(B.x + B.w - tag.length, y, tag, st(theme.accent, bg));
+  }
+}
+
+/** ` PASS ` / ` FAIL ` inverse chip; returns the x after it */
+function chip(scr: ScreenLike, x: number, y: number, pass: boolean, theme: Theme): number {
+  return scr.put(x, y, pass ? " PASS " : " FAIL ", st(theme.bg, pass ? theme.ok : theme.err, ATTR.BOLD));
+}
+
+/** Rows the `$ cmd` header may take: two of text and the marker. At the 100-column floor the body
+ *  is ~50 cells, so two rows show the program and its leading arguments — what identifies a run —
+ *  and a 900-char pipeline (the screenshot that motivated this) folds into `… +N more lines`
+ *  instead of a dozen bold rows that push the output under them. */
+const CMD_ROWS = 3;
+
+/** the header rows: the wrapped command, clipped to `max` the way the approval card clips its
+ *  detail (moreMarker on the last budgeted row — the one clip convention on the surface) */
+export function runCmdRows(cmd: string, w: number, max: number): string[] {
+  if (max <= 0) return [];
+  const all = hardWrap("$ " + cmd, w);
+  return all.length > max ? [...all.slice(0, max - 1), moreMarker(all.length - max + 1)] : all;
+}
+
+/** The run view is a terminal tail with a pinned prompt: the `$ cmd` header stays at the top (the
+ *  title no longer names the command, so the header must survive the output scrolling past it),
+ *  then the output verbatim (real newlines stay rows; long rows hard-wrap like a terminal — never
+ *  one-lined with ⏎) and the tail: the spinner while running or the PASS/FAIL chip from run.status.
+ *  Output and tail sit against the BOTTOM of the panel — the newest line and the verdict are what
+ *  the eye looks for, so short output leaves its slack above, not a dead zone below. Lines that
+ *  start with PASS/FAIL get the chip too (app.js:428-449). */
+function drawRun(scr: ScreenLike, B: Rect, s: SextantState, theme: Theme, now: number): void {
+  const run = s.code.run;
+  if (!run) { scr.put(B.x, B.y, "nothing has run yet", st(theme.muted), B.w); return; }
+  const cmd = runCmdRows(run.cmd, B.w, B.h >= 4 ? Math.min(CMD_ROWS, B.h - 2) : 0); // below 4 rows the output and the verdict win
+  cmd.forEach((t, i) => scr.put(B.x, B.y + i, t, t.startsWith("…") ? st(theme.dim) : st(theme.fg, -1, ATTR.BOLD), B.w));
+  type Row = { kind: "out" | "tail"; text: string; first: boolean };
+  const rows: Row[] = [];
+  for (const line of run.lines) for (const [i, t] of hardWrap(line, B.w).entries()) rows.push({ kind: "out", text: t, first: i === 0 });
+  rows.push({ kind: "tail", text: "", first: true });
+  const outH = B.h - cmd.length;
+  const start = Math.max(0, rows.length - outH);
+  const y0 = B.y + B.h - Math.min(rows.length, outH);
+  for (let i = 0; start + i < rows.length; i++) {
+    const r = rows[start + i]!;
+    const y = y0 + i;
+    if (r.kind === "tail") {
+      if (run.status === "running") scr.text(B.x, y, [[spinner(now), st(theme.accent)], ["  running", st(theme.muted)]], B.w);
+      else { const cx = chip(scr, B.x, y, run.status === "ok", theme); scr.put(cx, y, run.status === "ok" ? "  exit 0" : "  non-zero exit", st(theme.muted), B.x + B.w - cx); }
+      continue;
+    }
+    const m = r.first ? /^\s*(PASS|FAIL)\b\s?(.*)$/.exec(r.text) : null;
+    if (m) { const cx = chip(scr, B.x, y, m[1] === "PASS", theme); scr.put(cx + 1, y, m[2] ?? "", st(theme.fg), B.x + B.w - cx - 1); continue; }
+    scr.put(B.x, y, r.text, st(theme.fg2), B.w);
+  }
+}
+
+/** glob/grep result lines: `path:line:` locations muted + the match colored; plain rows get a `·` (app.js:450-464) */
+function drawSearch(scr: ScreenLike, B: Rect, s: SextantState, theme: Theme, top: number, tokenize: TokenizeFn): void {
+  const v = s.code.search;
+  if (!v) { scr.put(B.x, B.y, "no search yet", st(theme.muted), B.w); return; }
+  const locW = Math.min(26, Math.floor(B.w * 0.4));
+  let y = B.y;
+  for (let i = top; i < v.lines.length && y < B.y + B.h; i++, y++) {
+    const line = v.lines[i]!;
+    const m = /^(\S+?:\d+(?::\d+)?):\s?(.*)$/.exec(line);
+    if (m) { scr.clip(B.x, y, m[1]!, st(theme.muted), locW); putCode(scr, B.x + locW + 1, y, (m[2] ?? "").trimStart(), "ts", -1, B.w - locW - 1, theme, tokenize); }
+    else scr.text(B.x, y, [["· ", st(theme.dim)], [line, st(theme.fg2)]], B.w);
+  }
+  const summary = v.lines.length ? `${v.lines.length} result${v.lines.length === 1 ? "" : "s"}` : "no results";
+  if (y < B.y + B.h) scr.put(B.x, Math.min(y + (y > B.y ? 1 : 0), B.y + B.h - 1), summary, st(theme.muted), B.w);
+}
+
+// ------------------------------------------------------------------ diff
+
+interface DiffLine { op: " " | "+" | "-"; an: number | null; bn: number | null; text: string }
+type DiffRow = { t: "hunk"; text: string } | ({ t: "line" } & DiffLine) | { t: "pair"; l: DiffLine | null; r: DiffLine | null };
+
+/** unified rows, or side-by-side pairs when `split` (app.js:490-506): equal lines pair with
+ *  themselves, a run of deletes pairs index-wise with the run of inserts that follows it */
+export function diffRows(hunks: readonly DiffHunk[], split: boolean): DiffRow[] {
+  const rows: DiffRow[] = [];
+  for (const h of hunks) {
+    let a = h.oldStart, b = h.newStart;
+    const lines: DiffLine[] = h.rows.map((r) => ({ op: r.op, text: r.text, an: r.op === "+" ? null : a++, bn: r.op === "-" ? null : b++ }));
+    const ac = lines.filter((l) => l.op !== "+").length, bc = lines.filter((l) => l.op !== "-").length;
+    rows.push({ t: "hunk", text: `@@ -${h.oldStart},${ac} +${h.newStart},${bc} @@` });
+    if (!split) { for (const l of lines) rows.push({ t: "line", ...l }); continue; }
+    let i = 0;
+    while (i < lines.length) {
+      if (lines[i]!.op === " ") { rows.push({ t: "pair", l: lines[i]!, r: lines[i]! }); i++; continue; }
+      const dels: DiffLine[] = [], inss: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.op === "-") dels.push(lines[i++]!);
+      while (i < lines.length && lines[i]!.op === "+") inss.push(lines[i++]!);
+      for (let k = 0; k < Math.max(dels.length, inss.length); k++) rows.push({ t: "pair", l: dels[k] ?? null, r: inss[k] ?? null });
+    }
+  }
+  return rows;
+}
+
+function drawSplitSide(scr: ScreenLike, x: number, y: number, w: number, o: DiffLine | null, side: "del" | "add", lang: string, theme: Theme, tokenize: TokenizeFn): void {
+  if (!o || w < 8) return;
+  const change = o.op !== " ";
+  const bg = !change ? -1 : side === "add" ? theme.addBg : theme.delBg;
+  if (bg >= 0) scr.tint(x, y, w, 1, bg);
+  scr.put(x, y, String((side === "del" ? o.an : o.bn) ?? "").padStart(4), st(theme.dim, bg));
+  scr.put(x + 5, y, change ? (side === "add" ? "+" : "−") : " ", st(side === "add" ? theme.ok : theme.err, bg));
+  putCode(scr, x + 7, y, o.text, lang, bg, w - 7, theme, tokenize, side === "del" && change ? theme.muted : undefined);
+}
+
+function drawDiffRow(scr: ScreenLike, x: number, y: number, w: number, r: DiffRow, lang: string, theme: Theme, tokenize: TokenizeFn): void {
+  if (r.t === "hunk") { scr.put(x, y, r.text, st(theme.dim), w); return; }
+  if (r.t === "pair") {
+    const half = Math.floor((w - 1) / 2);
+    drawSplitSide(scr, x, y, half, r.l, "del", lang, theme, tokenize);
+    drawSplitSide(scr, x + half + 1, y, w - half - 1, r.r, "add", lang, theme, tokenize);
+    return;
+  }
+  const isIns = r.op === "+", isDel = r.op === "-";
+  const bg = isIns ? theme.addBg : isDel ? theme.delBg : -1;
+  if (bg >= 0) scr.tint(x, y, w, 1, bg);
+  scr.put(x, y, String(r.an ?? "").padStart(4) + " " + String(r.bn ?? "").padStart(4), st(theme.dim, bg), w);
+  scr.put(x + 10, y, isIns ? "+" : isDel ? "−" : " ", st(isIns ? theme.ok : theme.err, bg), Math.max(0, w - 10));
+  putCode(scr, x + 12, y, r.text, lang, bg, w - 12, theme, tokenize, isDel ? theme.muted : undefined);
+}
+
+/** hunks of s.code.diff, unified (± backgrounds) or split when the body is wider than 110 cells (app.js:531-539) */
+function drawDiff(scr: ScreenLike, B: Rect, s: SextantState, theme: Theme, top: number, tokenize: TokenizeFn): void {
+  const d = s.code.diff;
+  if (!d || !d.hunks.length) { scr.put(B.x, B.y, "no changes in this file", st(theme.muted), B.w); return; }
+  const rows = diffRows(d.hunks, B.w > 110), lang = langOf(d.file);
+  for (let i = 0; i < B.h; i++) { const r = rows[top + i]; if (!r) break; drawDiffRow(scr, B.x, B.y + i, B.w, r, lang, theme, tokenize); }
+}
+
+/** Parse unified-diff text (previewDiff output, `git diff`) into DiffHunks. File headers, the
+ *  `\ No newline` note and the `… +N more lines` clip marker are skipped; garbage yields []. */
+export function hunksFromUnified(text: string): DiffHunk[] {
+  const hunks: DiffHunk[] = [];
+  let cur: DiffHunk | null = null;
+  for (const line of text.split(/\r?\n/)) {
+    const m = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line);
+    if (m) { cur = { rows: [], oldStart: Number(m[1]), newStart: Number(m[2]) }; hunks.push(cur); continue; }
+    if (!cur) continue;
+    const op = line[0];
+    if (op === "+" || op === "-" || op === " ") cur.rows.push({ op, text: line.slice(1) });
+  }
+  return hunks;
+}
+
+// ------------------------------------------------------------------ agents (until #46 registers its painter)
+
+function drawCrewSummary(scr: ScreenLike, B: Rect, s: SextantState, theme: Theme, now: number): void {
+  const n = s.crew.length;
+  scr.put(B.x, B.y, `crew: ${n} task${n === 1 ? "" : "s"}`, st(n ? theme.fg2 : theme.muted), B.w);
+  s.crew.forEach((t, i) => {
+    const y = B.y + 2 + i;
+    if (y >= B.y + B.h) return;
+    const g = t.status === "running" ? spinner(now) : t.status === "queued" ? "◇" : t.status === "done" ? "◆" : t.status === "failed" ? "×" : "−";
+    const gc = t.status === "running" ? theme.accent : t.status === "done" ? theme.ok : t.status === "failed" ? theme.err : theme.dim;
+    const statusW = t.status.length;
+    scr.text(B.x, y, [[g + " ", st(gc)], [t.label, st(theme.fg2)]], Math.max(0, B.w - statusW - 2));
+    scr.put(B.x + B.w - statusW, y, t.status, st(t.status === "failed" ? theme.err : t.status === "done" ? theme.ok : theme.muted));
+  });
+}
+
+// ------------------------------------------------------------------ the panel
+
+/** Paint the code panel into `rect`: frame + title, the mode body, the rail. Pure over its inputs. */
+export function drawCode(scr: ScreenLike, rect: Rect, s: SextantState, theme: Theme, now: number, deps: CodeDeps = {}): void {
+  if (rect.w < 4 || rect.h < 3) return;
+  const { title, extra } = codeTitle(s, theme, now);
+  const B = panel(scr, rect, title, s.focus === "code", extra, theme);
+  const rail: Rect = { x: B.x + B.w - RAIL_W, y: B.y, w: RAIL_W, h: B.h };
+  const body: Rect = { x: B.x, y: B.y, w: B.w - RAIL_W - 2, h: B.h };
+  const top = codeScrollTop(rect, s);
+  if (body.w >= 6 && body.h >= 1) {
+    const tokenize = deps.tokenize ?? plainTokens;
+    switch (s.code.mode) {
+      case "run": drawRun(scr, body, s, theme, now); break;
+      case "search": drawSearch(scr, body, s, theme, top, tokenize); break;
+      case "agents": (agentsPainter ?? drawCrewSummary)(scr, body, s, theme, now); break;
+      case "diff": drawDiff(scr, body, s, theme, top, tokenize); break;
+      default: drawFileView(scr, body, s, theme, top, tokenize);
+    }
+  }
+  // scrollbar in the one-column gap between body and rail (code/diff/search only; run/agents tail)
+  if (B.w >= RAIL_W + 2 && body.h >= 2 &&
+      (s.code.mode === "code" || s.code.mode === "diff" || s.code.mode === "search")) {
+    const total = rowCount(s, body.w);
+    scrollbar(scr, theme, B.x + B.w - RAIL_W - 1, B.y, body.h, total, body.h, top); // scroll-hits.ts rebuilds this geometry for the drag zone
+  }
+  if (rail.h >= 2 && B.w >= RAIL_W) drawRail(scr, rail, s, theme, top, body.h);
+}

package/src/sextant/draw-context.ts

@@ -0,0 +1,222 @@
+/** The context overlay (/context, ⌃g): what is in the window right now, item by item, and how far our
+ *  arithmetic is from the provider's own count.
+ *
+ *  Same reading order as `rovecode context` on a shell (src/cli/context-cmd.ts) so the two surfaces teach
+ *  each other rather than competing: the meter, the slices largest first, drift, then what was billed. The
+ *  one thing this surface can do that the CLI cannot is count the SYSTEM PROMPT and the TOOL SCHEMAS from
+ *  the live runtime — headless has to leave them out, and in a fresh session they are most of the window.
+ *  When they are missing the panel says the total is a floor rather than quietly under-reporting.
+ *
+ *  Like draw-market.ts this file owns FLAT view types and never imports core/context-report.ts: the adapter
+ *  (context-source.ts) maps the report onto `ContextState`, so the drawer is a pure function of its own data
+ *  and a test builds a state by hand.
+ *
+ *  Drift is drawn, not hidden. Compaction fires on OUR estimate, so a model whose real prompt is a fifth
+ *  bigger than we think gets compacted late; past the tolerance the row is painted as a warning and says
+ *  which way the meter is wrong. No reported usage yet says exactly that instead of a confident zero. */
+
+import { st } from "./draw-util.ts";
+import { strWidth } from "./screen.ts";
+import { openOverlay } from "./overlays.ts";
+import { ATTR, type HitZone, type KeyEvent, type Layout, type ScreenLike, type SextantState, type Theme } from "./types.ts";
+
+export interface ContextSliceRow {
+  label: string;
+  tokens: number;
+  /** 0..1 of the estimated total */
+  share: number;
+  /** "not supplied" and the like — printed dim after the numbers */
+  note?: string;
+}
+
+export interface ContextDriftRow {
+  estimated: number;
+  reported: number;
+  /** reported − estimated; positive means the real prompt is bigger than we think */
+  delta: number;
+  /** |delta| / reported, 0..1 */
+  fraction: number;
+  beyondTolerance: boolean;
+}
+
+export interface ContextState {
+  model: string;
+  /** what o200k actually counted, BEFORE the per-model correction. Kept beside `estimated` rather than
+   *  replaced by it: a silently corrected number is not a measurement, and someone comparing this panel
+   *  with `rovecode context` or with a provider dashboard needs to know which of the two they are reading. */
+  raw: number;
+  /** the correction applied to `raw` to get `estimated`, and where its factor came from */
+  scale: { factor: number; measured: boolean; note: string };
+  /** the catalog's window; absent when the model is not in the catalog */
+  window?: number;
+  estimated: number;
+  remaining?: number;
+  /** estimated / window, 0..1 */
+  fraction?: number;
+  nearLimit?: boolean;
+  slices: ContextSliceRow[];
+  /** images cannot be estimated in tokens; counted so the meter's silence is explained */
+  images: number;
+  drift?: ContextDriftRow;
+  billed: { input: number; output: number; cacheRead: number; cacheWrite: number };
+  costUsd?: number;
+  unpricedTurns: number;
+  /** the runtime supplied the system prompt and the tool schemas, so the total is complete */
+  live: boolean;
+  /** the tolerance drift was compared against, as a fraction — printed, never assumed by the reader */
+  tolerance: number;
+  scroll: number;
+}
+
+/** Open it through the ONE transition (overlays.ts openOverlay), like every other overlay: whatever was
+ *  open closes first, so the help card can never paint over this and swallow its keys. */
+export function openContext(s: SextantState, state: Omit<ContextState, "scroll">): void {
+  openOverlay(s, "context");
+  s.context = { ...state, scroll: 0 };
+}
+export function closeContext(s: SextantState): void { s.context = null; }
+
+const n = (v: number): string => v.toLocaleString("en-US");
+const pct = (v: number): string => `${(v * 100).toFixed(1)}%`;
+
+/** the meter, with the CLI's glyphs so a screenshot of one reads as the other */
+export function meterBar(fraction: number, width: number): string {
+  const w = Math.max(1, width);
+  const filled = Math.max(0, Math.min(w, Math.round((Number.isFinite(fraction) ? Math.max(0, fraction) : 0) * w)));
+  return "█".repeat(filled) + "·".repeat(w - filled);
+}
+
+/** a slice's bar, scaled to the LARGEST slice rather than to the window: at 3% of a 1M window every bar
+ *  would be empty and the panel would say nothing about proportions */
+export function shareBar(share: number, largest: number, width: number): string {
+  if (width <= 0 || share <= 0) return "";
+  const rel = largest > 0 ? share / largest : 0;
+  return "▏".repeat(Math.max(1, Math.min(width, Math.round(rel * width))));
+}
+
+export type Tone = "normal" | "dim" | "warn" | "head";
+export interface ContextLine { text: string; tone: Tone }
+
+/** Every line of the overlay in order, tagged with how it is painted. Pure — a test reads these. */
+export function contextLines(s: ContextState, width: number): ContextLine[] {
+  const out: ContextLine[] = [];
+  const inner = Math.max(24, width);
+  out.push({ text: s.model, tone: "head" });
+
+  if (s.window !== undefined) {
+    const f = s.fraction ?? 0;
+    out.push({ text: `${meterBar(f, Math.max(8, Math.min(28, inner - 30)))}  ~${n(s.estimated)} of ${n(s.window)} (${pct(f)})`, tone: s.nearLimit ? "warn" : "normal" });
+    out.push({ text: `${n(s.remaining ?? 0)} left${s.nearLimit ? " — near the limit, compaction is due" : ""}`, tone: s.nearLimit ? "warn" : "dim" });
+  } else {
+    out.push({ text: `~${n(s.estimated)} tokens — this model's window is not in the catalog`, tone: "dim" });
+  }
+  // what the number IS, before anything else is said about it. o200k is our stand-in for every tokenizer
+  // that is not OpenAI's, and the factor is measured per model generation — so the panel names both the
+  // count and the correction rather than presenting one number as if nothing happened to it.
+  if (s.scale.factor !== 1) {
+    out.push({ text: `o200k counted ${n(s.raw)}, scaled ${s.scale.factor}× for this model — ${s.scale.note}`, tone: "dim" });
+  } else {
+    out.push({ text: `o200k counted ${n(s.raw)} — ${s.scale.note}`, tone: "dim" });
+  }
+  if (!s.live) out.push({ text: "system prompt and tool schemas are not counted — this total is a floor", tone: "warn" });
+  else out.push({ text: "MCP tools are not counted — their schemas exist only once a server is connected", tone: "dim" });
+  out.push({ text: "", tone: "dim" });
+
+  const rows = [...s.slices].sort((a, b) => b.tokens - a.tokens);
+  const labelW = Math.max(10, ...rows.map((r) => r.label.length));
+  const largest = rows[0]?.share ?? 0;
+  for (const r of rows) {
+    const head = `${r.label.padEnd(labelW)}  ${n(r.tokens).padStart(9)}  ${pct(r.share).padStart(6)}`;
+    const room = inner - strWidth(head) - (r.note ? r.note.length + 4 : 1);
+    out.push({ text: `${head} ${shareBar(r.share, largest, Math.min(12, room))}${r.note ? `  — ${r.note}` : ""}`, tone: r.note ? "dim" : "normal" });
+  }
+  if (rows.length === 0) out.push({ text: "nothing in the window yet", tone: "dim" });
+  if (s.images > 0) out.push({ text: `${"images".padEnd(labelW)}  ${String(s.images).padStart(9)}         — not estimated; image tokens are provider-specific`, tone: "dim" });
+
+  out.push({ text: "", tone: "dim" });
+  if (s.drift) {
+    const d = s.drift;
+    out.push({ text: `drift    provider counted ${n(d.reported)} for the last turn's prompt, we estimated ${n(d.estimated)}`, tone: d.beyondTolerance ? "warn" : "normal" });
+    out.push({
+      text: `         ${n(Math.abs(d.delta))} ${d.delta > 0 ? "more" : "less"} than we estimate (${pct(d.fraction)})${d.beyondTolerance ? ` — beyond the ${pct(s.tolerance)} tolerance; the meter reads ${d.delta > 0 ? "LOW" : "HIGH"} here` : ""}`,
+      tone: d.beyondTolerance ? "warn" : "dim",
+    });
+  } else {
+    out.push({ text: "drift    no turn reported usage yet — nothing to compare the estimate against", tone: "dim" });
+  }
+
+  out.push({ text: "", tone: "dim" });
+  const b = s.billed;
+  out.push({ text: `billed   ${n(b.input)} in · ${n(b.output)} out · ${n(b.cacheRead)} cache read · ${n(b.cacheWrite)} cache written`, tone: "normal" });
+  out.push({
+    text: s.costUsd !== undefined
+      ? `cost     $${s.costUsd.toFixed(4)}${s.unpricedTurns > 0 ? ` — lower bound, ${s.unpricedTurns} turn${s.unpricedTurns > 1 ? "s" : ""} unpriced` : ""}`
+      : `cost     unknown — no pricing for ${s.model}`,
+    tone: s.costUsd === undefined ? "dim" : "normal",
+  });
+  return out;
+}
+
+/** The one row the usage panel carries. Short, because the panel is narrow — and silent (undefined) when
+ *  there is nothing honest to say, rather than drawing a placeholder. */
+export function driftRow(d: ContextDriftRow | undefined, tolerance: number): { text: string; warn: boolean } | undefined {
+  if (!d) return undefined;
+  if (!d.beyondTolerance) return { text: `est ±${pct(d.fraction)} of provider`, warn: false };
+  return { text: `est reads ${d.delta > 0 ? "LOW" : "HIGH"} ${pct(d.fraction)}`, warn: true };
+}
+
+export function contextMaxScroll(s: ContextState, width: number, height: number): number {
+  return Math.max(0, contextLines(s, width).length - height);
+}
+
+/** Paint the overlay. Returns null when it is closed, so the frame loop can use it in the caret ternary
+ *  exactly like drawMarket. */
+export function drawContext(scr: ScreenLike, L: Layout, C: Theme, s: SextantState, hits?: HitZone[]): { x: number; y: number } | null {
+  const c = s.context;
+  if (!c) return null;
+  hits?.push({ rect: { x: 0, y: 0, w: L.w, h: L.h }, onClick: () => closeContext(s) });
+
+  const w = Math.min(L.w - 6, 92);
+  const bodyW = w - 6;
+  const lines = contextLines(c, bodyW);
+  const h = Math.max(10, Math.min(L.h - 4, lines.length + 4));
+  const x = Math.floor((L.w - w) / 2), y = Math.max(1, Math.floor((L.h - h) / 2));
+  scr.box(x, y, w, h, st(C.accent), C.bg2);
+  scr.text(x + 2, y, [[" context ", st(C.accent, -1, ATTR.BOLD)]]);
+  scr.put(x + w - 14, y, " esc closes ", st(C.dim));
+  hits?.push({ rect: { x, y, w, h }, onClick: () => {} });
+
+  const rows = h - 3;
+  const top = Math.max(0, Math.min(Math.max(0, lines.length - rows), c.scroll));
+  c.scroll = top;
+  lines.slice(top, top + rows).forEach((line, i) => {
+    const style = line.tone === "head" ? st(C.fg, C.bg2, ATTR.BOLD)
+      : line.tone === "warn" ? st(C.warn, C.bg2)
+      : line.tone === "dim" ? st(C.muted, C.bg2)
+      : st(C.fg2, C.bg2);
+    scr.clip(x + 3, y + 1 + i, line.text, style, bodyW);
+  });
+  if (lines.length > rows) {
+    scr.put(x + w - 22, y + h - 1, ` ${top + rows} of ${lines.length} lines `, st(C.dim, C.bg2));
+  }
+  return null; // no caret: the overlay takes no typed input
+}
+
+/** Keys, while the panel is up. It is a reader, not a chooser: there is nothing to select and nothing to
+ *  confirm, so the whole map is "move through it" and "leave". Anything else is swallowed rather than
+ *  falling through to the prompt — an overlay that lets keystrokes reach the composer behind it types
+ *  into a message the human cannot see. */
+export function onContextKey(s: SextantState, ev: KeyEvent, page: number): void {
+  const c = s.context;
+  if (!c) return;
+  const { name, ctrl } = ev;
+  if (name === "escape" || name === "enter" || (ctrl && name === "g")) { closeContext(s); return; }
+  const step = Math.max(1, page - 1);
+  if (name === "up" || name === "k") c.scroll -= 1;
+  else if (name === "down" || name === "j") c.scroll += 1;
+  else if (name === "pageup") c.scroll -= step;
+  else if (name === "pagedown" || name === "space") c.scroll += step;
+  else if (name === "home") c.scroll = 0;
+  else if (name === "end") c.scroll = Number.MAX_SAFE_INTEGER;
+  c.scroll = Math.max(0, c.scroll);
+}