jeo-code 0.1.0 → 0.4.5

package/src/tui/components/themes.ts

@@ -7,9 +7,13 @@
  * layout — only the look. `cosmic` is the default; `mono` is the colorless
  * fallback for plain terminals.
  */
+import chalk from "chalk";
 import { EVOLUTION_STAGE_GRADIENTS, EVOLUTION_STAGE_COUNT, type StageGradient } from "./evolution";
 import { clampStageIndex } from "./evolution";
-import type { EnvLike } from "./color";
+import { detectColorLevel, ColorLevel, detectAppearance, type EnvLike } from "./color";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as os from "node:os";
 
 export interface EvolutionTheme {
   name: string;
@@ -18,13 +22,35 @@ export interface EvolutionTheme {
   gradients: readonly StageGradient[];
   /** Whether the theme emits color at all (`mono` = false → plain output). */
   color: boolean;
+  /** Accent hex for UI chrome — borders, prompt mark, model status bar (gjc-style). */
+  accent: string;
+  /** Shadow hex for the "shaded" box edges (bottom/right). A REAL darker hue —
+   *  not ANSI dim — so the lit/shaded two-tone reads as depth even on terminals
+   *  that render `dim` poorly. Falls back to dim(accent) when unset. */
+  accentShadow?: string;
+  /** Diff palette: themed +/- contrast for /diff, edit cards, and code views.
+   *  `addBg`/`delBg` are full-row background tints that give added/removed
+   *  lines block-level separation, not just a colored sign. */
+  diff?: { add: string; del: string; addBg: string; delBg: string; hunk: string };
 }
 
+/** Default diff palette (used when a theme defines none): high-contrast
+ *  green/red foregrounds over deep complementary background tints. */
+export const DEFAULT_DIFF_PALETTE = {
+  add: "#9ece6a",
+  del: "#f7768e",
+  addBg: "#16261c",
+  delBg: "#2a1a20",
+  hunk: "#7dcfff",
+} as const;
+
 const COSMIC: EvolutionTheme = {
   name: "cosmic",
   description: "Default — deep-space arc from cyan tide to white-hot singularity.",
   gradients: EVOLUTION_STAGE_GRADIENTS,
   color: true,
+  accent: "#48dbfb",
+  accentShadow: "#1b6f8c",
 };
 
 const MATRIX: EvolutionTheme = {
@@ -38,6 +64,9 @@ const MATRIX: EvolutionTheme = {
     { from: "#00ff41", to: "#ccffcc" },
   ],
   color: true,
+  accent: "#39ff14",
+  accentShadow: "#0b6623",
+  diff: { add: "#7fff00", del: "#ff5f5f", addBg: "#0c2410", delBg: "#2a1212", hunk: "#00e5a0" },
 };
 
 const SOLAR: EvolutionTheme = {
@@ -51,6 +80,87 @@ const SOLAR: EvolutionTheme = {
     { from: "#ff8c00", to: "#fff5cc" },
   ],
   color: true,
+  accent: "#ff8c00",
+  accentShadow: "#8a4500",
+};
+
+const RED_CLAW: EvolutionTheme = {
+  name: "red-claw",
+  description: "Dark theme — crimson claw glowing from deep embers.",
+  gradients: [
+    { from: "#2b0000", to: "#4a0000" },
+    { from: "#4a0000", to: "#8b0000" },
+    { from: "#8b0000", to: "#b22222" },
+    { from: "#b22222", to: "#dc143c" },
+    { from: "#dc143c", to: "#ff0000" },
+  ],
+  color: true,
+  accent: "#e25656",
+  accentShadow: "#5c0f0f",
+};
+
+const BLUE_CRAB: EvolutionTheme = {
+  name: "blue-crab",
+  description: "Bioluminescent ocean — abyssal navy through reef teal to seafoam glow (light-background friendly).",
+  gradients: [
+    { from: "#03045e", to: "#0077b6" },
+    { from: "#0077b6", to: "#00b4d8" },
+    { from: "#00b4d8", to: "#06d6a0" },
+    { from: "#0096c7", to: "#48cae4" },
+    { from: "#48cae4", to: "#caf0f8" },
+  ],
+  color: true,
+  accent: "#0096c7",
+  accentShadow: "#023e8a",
+  diff: { add: "#06d6a0", del: "#ef476f", addBg: "#0a2922", delBg: "#2b1320", hunk: "#48cae4" },
+};
+
+const AURORA: EvolutionTheme = {
+  name: "aurora",
+  description: "Northern lights — arctic teal ribbons bending into violet sky.",
+  gradients: [
+    { from: "#0b1f3a", to: "#16c79a" },
+    { from: "#16c79a", to: "#3ddad7" },
+    { from: "#3ddad7", to: "#7c83fd" },
+    { from: "#7c83fd", to: "#b388eb" },
+    { from: "#b388eb", to: "#e7f9f3" },
+  ],
+  color: true,
+  accent: "#3ddad7",
+  accentShadow: "#1d5c8f",
+  diff: { add: "#16c79a", del: "#fd7c9b", addBg: "#0c2620", delBg: "#2a1626", hunk: "#7c83fd" },
+};
+
+const SYNTHWAVE: EvolutionTheme = {
+  name: "synthwave",
+  description: "Retro neon — sunset-grid magenta pulsing against electric cyan.",
+  gradients: [
+    { from: "#2b1055", to: "#7303c0" },
+    { from: "#7303c0", to: "#ec38bc" },
+    { from: "#ec38bc", to: "#ff5e99" },
+    { from: "#ff5e99", to: "#03e9f4" },
+    { from: "#03e9f4", to: "#fdeff9" },
+  ],
+  color: true,
+  accent: "#ec38bc",
+  accentShadow: "#5b1a8a",
+  diff: { add: "#03e9f4", del: "#ff5e99", addBg: "#0a2330", delBg: "#33122a", hunk: "#b388eb" },
+};
+
+const SAKURA: EvolutionTheme = {
+  name: "sakura",
+  description: "Cherry blossom — soft petal pink deepening to spring magenta (light-background friendly).",
+  gradients: [
+    { from: "#5c2a3d", to: "#b85c79" },
+    { from: "#b85c79", to: "#d6336c" },
+    { from: "#d6336c", to: "#f06595" },
+    { from: "#f06595", to: "#faa2c1" },
+    { from: "#faa2c1", to: "#fff0f6" },
+  ],
+  color: true,
+  accent: "#d6336c",
+  accentShadow: "#862e59",
+  diff: { add: "#37b24d", del: "#e03131", addBg: "#13260f", delBg: "#2b1212", hunk: "#cc5de8" },
 };
 
 const MONO: EvolutionTheme = {
@@ -58,9 +168,10 @@ const MONO: EvolutionTheme = {
   description: "Colorless — plain text for NO_COLOR / minimal terminals.",
   gradients: EVOLUTION_STAGE_GRADIENTS,
   color: false,
+  accent: "#ffffff",
 };
 
-export const THEMES: readonly EvolutionTheme[] = [COSMIC, MATRIX, SOLAR, MONO];
+export const THEMES: readonly EvolutionTheme[] = [COSMIC, MATRIX, SOLAR, RED_CLAW, BLUE_CRAB, AURORA, SYNTHWAVE, SAKURA, MONO];
 
 /** Look up a theme by name (case-insensitive); unknown names fall back to cosmic. */
 export function getTheme(name: string | undefined): EvolutionTheme {
@@ -69,14 +180,63 @@ export function getTheme(name: string | undefined): EvolutionTheme {
   return THEMES.find(t => t.name === lc) ?? COSMIC;
 }
 
-/** Theme names + descriptions for `joc evolve --list-themes`. */
+/** Theme names + descriptions for `jeo evolve --list-themes`. */
 export function listThemes(): { name: string; description: string }[] {
   return THEMES.map(t => ({ name: t.name, description: t.description }));
 }
 
-/** Resolve the active theme from the environment (`JOC_TUI_THEME`), default cosmic. */
-export function resolveTheme(env: EnvLike = process.env): EvolutionTheme {
-  return getTheme(env.JOC_TUI_THEME);
+/** Process-lifetime memo: this runs on the keystroke-hot path (theme resolution
+ *  inside the input-box repaint), and an UNCACHED call does a synchronous
+ *  existsSync + readFileSync + JSON.parse of ~/.jeo/config.json per keystroke.
+ *  Env (`JEO_TUI_THEME`) takes precedence over this value in `resolveTheme`, so
+ *  `/theme` switches stay live; external config edits apply on the next run. */
+let configThemeCache: { dir: string; value: string | undefined } | undefined;
+
+/** Test-only: clear the config-theme memo. */
+export function resetThemeConfigCache(): void {
+  configThemeCache = undefined;
+}
+
+function getExplicitThemeFromConfig(env: EnvLike): string | undefined {
+  const home = os.homedir ? os.homedir() : undefined;
+  const dir = env.JEO_CONFIG_DIR || env.JEO_CONFIG_DIR || (home ? path.join(home, ".jeo") : undefined);
+  if (!dir) return undefined;
+  if (configThemeCache && configThemeCache.dir === dir) return configThemeCache.value;
+  const filePath = path.join(dir, "config.json");
+  let value: string | undefined;
+  try {
+    if (fs.existsSync(filePath)) {
+      const data = fs.readFileSync(filePath, "utf-8");
+      const config = JSON.parse(data);
+      value = config.theme || config.tuiTheme || config.tui?.theme;
+    }
+  } catch {
+    // ignore — treated as "no configured theme"
+  }
+  configThemeCache = { dir, value };
+  return value;
+}
+
+/** Resolve the active theme from the environment (`JEO_TUI_THEME`) or config, default cosmic. */
+export function resolveTheme(
+  env: EnvLike = process.env,
+  config?: { theme?: string; tuiTheme?: string; tui?: { theme?: string } }
+): EvolutionTheme {
+  const explicit = env.JEO_TUI_THEME || config?.theme || config?.tuiTheme || config?.tui?.theme || getExplicitThemeFromConfig(env);
+  if (explicit) {
+    return getTheme(explicit);
+  }
+
+  if (detectColorLevel(env) === ColorLevel.None) {
+    return getTheme("mono");
+  }
+
+  const appearance = detectAppearance(env);
+  if (appearance === "light") {
+    return getTheme("blue-crab");
+  }
+
+  return getTheme("cosmic");
 }
 
 /** The gradient palette for a stage index under a theme (clamped). */
@@ -84,3 +244,49 @@ export function themeGradient(theme: EvolutionTheme, index: number): StageGradie
   const i = clampStageIndex(index);
   return theme.gradients[i] ?? theme.gradients[EVOLUTION_STAGE_COUNT - 1]!;
 }
+
+/** A chalk-style painter for the theme's accent color; identity when the theme is colorless. */
+export function accentPaint(theme: EvolutionTheme): (s: string) => string {
+  if (!theme.color) return (s: string) => s;
+  const hex = theme.accent;
+  return (s: string) => chalk.hex(hex)(s);
+}
+
+/** The shaded-edge painter for box bottoms/rights. Pairs with `accentPaint` on
+ *  the lit top/left edges — the two-tone contrast gives every bordered panel a
+ *  pseudo-3D depth cue. Themes with an explicit `accentShadow` get a REAL
+ *  darker hue (richer separation than ANSI dim); others fall back to
+ *  dim(accent). Identity when the theme is colorless. */
+export function accentShadowPaint(theme: EvolutionTheme): (s: string) => string {
+  if (!theme.color) return (s: string) => s;
+  if (theme.accentShadow) {
+    const hex = theme.accentShadow;
+    return (s: string) => chalk.hex(hex)(s);
+  }
+  const hex = theme.accent;
+  return (s: string) => chalk.dim(chalk.hex(hex)(s));
+}
+
+/** Themed diff painters: foreground + full-row background tints for added /
+ *  removed lines (block-level separation, not just a colored sign) and a
+ *  distinct hunk-header color. Identity painters when the theme is colorless. */
+export function diffPaint(theme: EvolutionTheme): {
+  add: (s: string) => string;
+  del: (s: string) => string;
+  hunk: (s: string) => string;
+  addHead: (s: string) => string;
+  delHead: (s: string) => string;
+} {
+  if (!theme.color) {
+    const id = (s: string) => s;
+    return { add: id, del: id, hunk: id, addHead: id, delHead: id };
+  }
+  const p = theme.diff ?? DEFAULT_DIFF_PALETTE;
+  return {
+    add: (s: string) => chalk.bgHex(p.addBg).hex(p.add)(s),
+    del: (s: string) => chalk.bgHex(p.delBg).hex(p.del)(s),
+    hunk: (s: string) => chalk.hex(p.hunk).bold(s),
+    addHead: (s: string) => chalk.hex(p.add).bold(s),
+    delHead: (s: string) => chalk.hex(p.del).bold(s),
+  };
+}

package/src/tui/components/todo-card.ts

@@ -0,0 +1,47 @@
+import chalk from "chalk";
+
+export interface TodoCardItem {
+  title: string;
+  status: "pending" | "in_progress" | "done";
+}
+
+export interface TodoCardOptions {
+  unicode?: boolean;
+  color?: boolean;
+}
+
+/**
+ * jeo-ref "Todo Write" scrollback card: a ✓-led header with a tree-connector
+ * checklist — done items get ☑ + strikethrough, the active item highlights,
+ * pending stays dim. Pure `string[]`; the caller flushes it into the ledger so
+ * the plan's evolution (items checking off turn by turn) reads as transcript
+ * history, exactly like the reference TUI.
+ */
+export function formatTodoWriteCard(items: TodoCardItem[], opts: TodoCardOptions = {}): string[] {
+  if (items.length === 0) return [];
+  const unicode = opts.unicode !== false;
+  const color = opts.color !== false;
+  const check = unicode ? "✓" : "v";
+  const boxDone = unicode ? "☑" : "[x]";
+  const boxOpen = unicode ? "☐" : "[ ]";
+  const tee = unicode ? "├─" : "|-";
+  const ell = unicode ? "└─" : "`-";
+  const count = `${items.length} task${items.length === 1 ? "" : "s"}`;
+  const head = color
+    ? `${chalk.green(check)} ${chalk.bold("Todo Write")} ${chalk.dim(count)}`
+    : `${check} Todo Write ${count}`;
+  const lines = [head];
+  items.forEach((item, i) => {
+    const conn = i === items.length - 1 ? ell : tee;
+    if (item.status === "done") {
+      const box = color ? chalk.green(boxDone) : boxDone;
+      const label = color ? chalk.dim.strikethrough(item.title) : item.title;
+      lines.push(`  ${conn} ${box} ${label}`);
+    } else if (item.status === "in_progress") {
+      lines.push(`  ${conn} ${boxOpen} ${color ? chalk.cyan.bold(item.title) : item.title}`);
+    } else {
+      lines.push(`  ${conn} ${boxOpen} ${color ? chalk.dim(item.title) : item.title}`);
+    }
+  });
+  return lines;
+}

package/src/tui/components/tool-list.ts

@@ -1,4 +1,5 @@
 import chalk from "chalk";
+import { categoryBadge, categoryForTool } from "./category-index";
 
 export type ToolStatus = "running" | "ok" | "fail";
 
@@ -16,52 +17,97 @@ export interface ToolStats {
 
 export class ToolList {
   private rows: ToolRow[] = [];
+  // Rows trimmed from the front to keep memory + per-frame cost flat on a
+  // pathologically long turn. `start()` returns an ABSOLUTE index so `finish()`
+  // stays valid across trims (a no-op in normal turns, which stay well under cap).
+  private dropped = 0;
+  private readonly cap: number;
+
+  constructor(cap = 500) {
+    this.cap = Math.max(1, cap);
+  }
 
   start(tool: string): number {
     this.rows.push({ tool, status: "running" });
-    return this.rows.length - 1;
+    const absIndex = this.dropped + this.rows.length - 1;
+    if (this.rows.length > this.cap) {
+      const drop = this.rows.length - this.cap;
+      this.rows.splice(0, drop);
+      this.dropped += drop;
+    }
+    return absIndex;
   }
 
   finish(index: number, ok: boolean): void {
-    if (this.rows[index]) {
-      this.rows[index].status = ok ? "ok" : "fail";
+    const i = index - this.dropped;
+    if (i >= 0 && this.rows[i]) {
+      this.rows[i].status = ok ? "ok" : "fail";
     }
   }
 
-  render(maxRows?: number): string[] {
+  render(maxRows?: number, optionsOrColor?: boolean | { color?: boolean; indexed?: boolean }): string[] {
+    let color = true;
+    let indexed = false;
+    if (typeof optionsOrColor === "boolean") {
+      color = optionsOrColor;
+    } else if (optionsOrColor && typeof optionsOrColor === "object") {
+      if (optionsOrColor.color !== undefined) {
+        color = optionsOrColor.color;
+      }
+      indexed = optionsOrColor.indexed === true;
+    }
+
     const rows =
       maxRows !== undefined && maxRows > 0 && this.rows.length > maxRows
         ? this.rows.slice(this.rows.length - (maxRows - 1)) // keep the most recent rows
         : this.rows;
-    const hidden = this.rows.length - rows.length;
-    const lines = rows.map(row => {
+    const hidden = this.dropped + (this.rows.length - rows.length);
+
+    const cyanBullet = color ? chalk.cyan("◓") : "◓";
+    const cyanRunning = color ? chalk.cyan.bold("running...") : "running...";
+    const greenCheck = color ? chalk.green("✔") : "✔";
+    const redCross = color ? chalk.red("✖") : "✖";
+    const redFailed = color ? chalk.red.bold("FAILED") : "FAILED";
+    const grayLine = (s: string) => color ? chalk.gray(s) : s;
+
+    const lines = rows.map((row, i) => {
+      const badge = indexed ? `${categoryBadge(categoryForTool(row.tool), { index: hidden + i + 1, color })} ` : "";
       if (row.status === "running") {
-        return `  ${chalk.yellow("·")} ${row.tool} ${chalk.yellow.bold("running...")}`;
+        return `  ${cyanBullet} ${badge}${row.tool} ${cyanRunning}`;
       } else if (row.status === "ok") {
         // Faded decay for completed successful tools
-        return chalk.gray(`  · ${row.tool} ok`);
+        return `  ${greenCheck} ${badge}${grayLine(row.tool + " ok")}`;
       } else {
         // Bright red for failures
-        return `  ${chalk.red("·")} ${row.tool} ${chalk.red.bold("FAILED")}`;
+        return `  ${redCross} ${badge}${row.tool} ${redFailed}`;
       }
     });
     if (hidden > 0) {
-      lines.unshift(chalk.gray(`  · (+${hidden} earlier)`));
+      lines.unshift(grayLine(`  · (+${hidden} earlier)`));
     }
     return lines;
   }
 
   currentTool(): string | undefined {
-    return [...this.rows].reverse().find(row => row.status === "running")?.tool;
+    for (let i = this.rows.length - 1; i >= 0; i--) {
+      if (this.rows[i]!.status === "running") return this.rows[i]!.tool;
+    }
+    return undefined;
   }
 
   stats(): ToolStats {
-    const stats: ToolStats = { running: 0, ok: 0, fail: 0, total: this.rows.length };
+    const stats: ToolStats = { running: 0, ok: 0, fail: 0, total: this.dropped + this.rows.length };
     for (const row of this.rows) stats[row.status]++;
     return stats;
   }
 
   reset(): void {
     this.rows = [];
+    this.dropped = 0;
+  }
+
+  /** Immutable snapshot of the tool rows (for the step timeline / summaries). */
+  snapshot(): { tool: string; status: ToolStatus }[] {
+    return this.rows.map(r => ({ tool: r.tool, status: r.status }));
   }
 }

package/src/tui/components/transcript.ts

@@ -0,0 +1,120 @@
+/**
+ * In-app turn-history viewer (`/history`) — re-prints the worked session as a
+ * readable transcript INTO normal scrollback, so past prompts, tool steps and
+ * replies can be reviewed by scrolling up even when the terminal's own history
+ * (tmux without mouse mode, cleared screens, resumed sessions) can't reach them.
+ *
+ * The engine history interleaves protocol traffic with the conversation:
+ *   user        → real prompts, but ALSO tool-result feedback
+ *                 (`Tool [name] result (ok|fail):\n…`) and parse-correction bounces
+ *   assistant   → raw JSON tool calls, or plain prose (final/legacy replies)
+ * This formatter folds that back into a gjc-style ledger: `user ▸` prompt blocks,
+ * one compact `✔/✗ title` line per tool step, and `jeo ◂` reply blocks.
+ */
+import chalk from "chalk";
+import type { Message } from "../../ai/types";
+import { summarizeForgeInvocation } from "./forge";
+
+export interface TranscriptOptions {
+  color?: boolean;
+  unicode?: boolean;
+  /** Keep only the LAST n prompt-anchored turns (Infinity/undefined = all). */
+  maxTurns?: number;
+  /** Cap body lines per prompt/reply block. */
+  bodyLines?: number;
+}
+
+const TOOL_RESULT_RE = /^Tool \[([^\]]+)\] result \((ok|fail)\):/;
+const BOUNCE_PREFIXES = ["Your last reply", "The budget for this turn is exhausted", "The step budget for this turn is exhausted", "You are cycling through the same"];
+
+function clipBody(text: string, cap: number): string[] {
+  const rows = text.replace(/\r/g, "").split("\n");
+  const trimmed = rows.length > cap ? rows.slice(0, cap) : rows;
+  const out = trimmed.map(r => `  ${r}`);
+  if (rows.length > cap) out.push(`  … (+${rows.length - cap} more lines)`);
+  return out;
+}
+
+function firstToolResultLine(text: string | undefined): string {
+  if (!text) return "";
+  return text
+    .replace(TOOL_RESULT_RE, "")
+    .split("\n")
+    .map(l => l.trim())
+    .find(Boolean)
+    ?.replace(/\s+/g, " ")
+    .slice(0, 96) ?? "";
+}
+
+/** Format engine history as a scrollback-friendly transcript. */
+export function formatTranscript(messages: readonly Message[], opts: TranscriptOptions = {}): string[] {
+  const color = opts.color !== false;
+  const unicode = opts.unicode !== false;
+  const bodyCap = Math.max(1, opts.bodyLines ?? 8);
+  const ok = unicode ? "✔" : "v";
+  const bad = unicode ? "✗" : "x";
+  const userMark = unicode ? "▸" : ">";
+  const jeoMark = unicode ? "◂" : "<";
+  const cyanBold = color ? chalk.cyan.bold : (s: string) => s;
+  const magentaBold = color ? chalk.magenta.bold : (s: string) => s;
+  const dim = color ? chalk.dim : (s: string) => s;
+  const green = color ? chalk.green : (s: string) => s;
+  const red = color ? chalk.red : (s: string) => s;
+
+  // Anchor turns on real user prompts so `maxTurns` slices whole exchanges.
+  const promptIdx: number[] = [];
+  messages.forEach((m, i) => {
+    if (m.role !== "user") return;
+    if (TOOL_RESULT_RE.test(m.content)) return;
+    if (BOUNCE_PREFIXES.some(p => m.content.startsWith(p))) return;
+    promptIdx.push(i);
+  });
+  const promptNumber = new Map(promptIdx.map((idx, i) => [idx, i + 1]));
+  const totalTurns = promptIdx.length;
+  if (totalTurns === 0) return [dim("(no worked history yet — ask something first)")];
+  const keep = Math.max(1, Math.min(totalTurns, opts.maxTurns ?? totalTurns));
+  const start = promptIdx[totalTurns - keep]!;
+
+  const lines: string[] = [];
+  if (keep < totalTurns) lines.push(dim(`… ${totalTurns - keep} earlier turn(s) hidden — /history all shows everything`));
+  for (let i = start; i < messages.length; i++) {
+    const m = messages[i]!;
+    if (m.role === "system") continue;
+    if (m.role === "user") {
+      const result = m.content.match(TOOL_RESULT_RE);
+      if (result) continue; // outcome is folded into the assistant tool line below
+      if (BOUNCE_PREFIXES.some(p => m.content.startsWith(p))) continue; // protocol noise
+      if (lines.length) lines.push("");
+      const turnNo = promptNumber.get(i) ?? 1;
+      lines.push(dim(`${unicode ? "─" : "-"} turn ${turnNo}/${totalTurns}`));
+      const imgs = m.images?.length ? dim(` ⧉ ${m.images.length} image(s)`) : "";
+      lines.push(`${cyanBold(`user ${userMark}`)}${imgs}`);
+      lines.push(...clipBody(m.content, bodyCap));
+      continue;
+    }
+    // assistant: a JSON tool call (one compact ledger line) or a prose reply.
+    let invocation: { tool?: unknown; arguments?: unknown } | null = null;
+    try {
+      const parsed = JSON.parse(m.content) as { tool?: unknown; arguments?: unknown };
+      if (parsed && typeof parsed === "object" && typeof parsed.tool === "string") invocation = parsed;
+    } catch { /* prose reply */ }
+    if (invocation && typeof invocation.tool === "string" && invocation.tool !== "done") {
+      // The matching `Tool [x] result (ok|fail)` user message tells success/failure.
+      const next = messages[i + 1];
+      const verdict = next?.role === "user" ? next.content.match(TOOL_RESULT_RE) : null;
+      const mark = verdict?.[2] === "fail" ? red(bad) : green(ok);
+      const title = summarizeForgeInvocation(invocation.tool, invocation.arguments).title;
+      const resultLine = firstToolResultLine(next?.content);
+      const suffix = resultLine ? dim(` — ${resultLine}`) : "";
+      lines.push(`  ${mark} ${title}${suffix}`);
+      continue;
+    }
+    const reason = invocation
+      ? String((invocation.arguments as { reason?: unknown } | undefined)?.reason ?? "")
+      : m.content;
+    if (!reason.trim()) continue;
+    lines.push(`${magentaBold(`jeo ${jeoMark}`)}`);
+    lines.push(...clipBody(reason.trim(), bodyCap));
+  }
+  return lines;
+}

package/src/tui/components/update-box.ts

@@ -0,0 +1,31 @@
+import chalk from "chalk";
+import { padLineTo } from "./layout";
+import { truncate } from "../terminal";
+
+export function renderUpdateBox(
+  current: string,
+  latest: string,
+  opts?: { cols?: number; unicode?: boolean; color?: boolean }
+): string[] {
+  void current;
+
+  const cols = opts?.cols ?? 80;
+  const useColor = opts?.color !== false;
+  const useUnicode = opts?.unicode !== false;
+  const width = Math.max(24, Math.min(120, cols));
+
+  const ruleChar = useUnicode ? "─" : "-";
+  const paintRule = useColor ? chalk.hex("#f2b84b") : (s: string) => s;
+  const paintTitle = useColor ? chalk.hex("#f2b84b").bold : (s: string) => s;
+  const paintCommand = useColor ? chalk.hex("#ff6b4a") : (s: string) => s;
+
+  const rule = paintRule(ruleChar.repeat(width));
+  const fit = (line: string) => padLineTo(truncate(line, width), width, "left");
+
+  return [
+    rule,
+    fit(paintTitle("Update Available")),
+    fit(`New version ${latest} is available. Run: ${paintCommand("jeo update")}`),
+    rule,
+  ];
+}