jeo-code 0.1.0 → 0.4.4

package/src/tui/components/code-view.ts

@@ -7,6 +7,7 @@
  */
 import chalk from "chalk";
 import { truncate } from "../terminal";
+import { diffPaint, getTheme, type EvolutionTheme } from "./themes";
 
 const LANG_BY_EXT: Record<string, string> = {
   ts: "ts", tsx: "ts", mts: "ts", cts: "ts",
@@ -80,6 +81,30 @@ export function lightHighlightLine(line: string, lang: string): string {
   return out;
 }
 
+/**
+ * Make a line from arbitrary file/diff content safe to print in the REPL/TUI region.
+ * File bytes are untrusted display data: a raw `\x1b[2J`, OSC title set, lone `\r`
+ * progress-overwrite, or a stray C0 byte can clear the screen, move the cursor, or
+ * corrupt the gutter. Strip CR, expand tabs, and remove ANSI/C0 control sequences.
+ * jeo's own coloring is applied AFTER this, so no intended color is lost.
+ */
+export function sanitizeForTerminal(line: string): string {
+  return line
+    .replace(/\r/g, "")
+    .replace(/\t/g, "  ")
+    // OSC: ESC ] ... (BEL | ST)
+    .replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, "")
+    // CSI: ESC [ ... final-byte  (SGR, cursor moves, screen/line clears, etc.)
+    .replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "")
+    // other ESC-led two-byte sequences
+    .replace(/\x1b[@-Z\\-_]/g, "")
+    // 8-bit C1 CSI/OSC (U+009B / U+009D …) — neutralize the payload like the ESC forms
+    .replace(/\x9b[0-?]*[ -/]*[@-~]/g, "")
+    .replace(/\x9d[^\x07\x9c]*(?:\x07|\x9c)/g, "")
+    // any remaining C0 controls + DEL + C1 (U+0080–U+009F)
+    .replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f-\x9f]/g, "");
+}
+
 export interface CodeViewOptions {
   startLine?: number;
   lang?: string;
@@ -111,14 +136,23 @@ export function formatCodeBlock(content: string, opts: CodeViewOptions = {}): st
   const out: string[] = [];
   for (let i = 0; i < shown.length; i++) {
     const no = startLine + i;
+    const num = String(no).padStart(gutterW, " ");
+    const sepGlyph = color ? chalk.gray(sep) : "|";
+    // File-origin content can carry hostile escapes — neutralize, then expand tabs
+    // so the gutter alignment is column-stable.
+    const body = sanitizeForTerminal(allLines[i]!).replace(/\t/g, "  ");
+    const colored = color ? lightHighlightLine(body, lang) : body;
     const marked = highlight.has(no);
-    const numText = String(no).padStart(gutterW);
-    const num = color ? (marked ? chalk.yellow.bold(numText) : chalk.gray(numText)) : numText;
-    const body = color ? lightHighlightLine(shown[i], lang) : shown[i];
     const marker = marked ? (color ? chalk.yellow("▶") : ">") : " ";
-    const line = `${marker}${num} ${sep} ${body}`;
+    
+    let prefix = " ";
+    if (body.startsWith("+")) prefix = color ? chalk.green("+") : "+";
+    else if (body.startsWith("-")) prefix = color ? chalk.red("-") : "-";
+    
+    const line = `${marker}${prefix}${num} ${sepGlyph} ${colored}`;
     out.push(truncate(line, cols));
   }
+
   if (allLines.length > maxLines) {
     const more = allLines.length - maxLines;
     out.push(color ? chalk.gray(`  …(+${more} more line${more === 1 ? "" : "s"})`) : `  …(+${more} more lines)`);
@@ -126,19 +160,28 @@ export function formatCodeBlock(content: string, opts: CodeViewOptions = {}): st
   return out;
 }
 
-/** Render a unified diff with +/-/@@ coloring, clamped to `cols`. */
-export function formatDiff(diffText: string, opts: { cols?: number; maxLines?: number; color?: boolean } = {}): string[] {
+/** Render a unified diff with themed contrast: added/removed lines carry a
+ *  foreground + full-row background tint (block-level separation, not just a
+ *  colored sign), file heads are bold, and hunk headers get a distinct accent.
+ *  `theme` selects the palette; the default palette applies when omitted. */
+export function formatDiff(
+  diffText: string,
+  opts: { cols?: number; maxLines?: number; color?: boolean; theme?: EvolutionTheme } = {},
+): string[] {
   const cols = opts.cols ?? 100;
   const maxLines = opts.maxLines ?? 400;
   const color = opts.color !== false;
+  const dp = diffPaint(opts.theme ?? getTheme(undefined));
   const lines = diffText.split("\n");
   const shown = lines.slice(0, maxLines);
-  const out = shown.map(l => {
+  const out = shown.map(raw => {
+    const l = sanitizeForTerminal(raw);
     if (!color) return truncate(l, cols);
-    if (l.startsWith("+++") || l.startsWith("---")) return truncate(chalk.bold(l), cols);
-    if (l.startsWith("@@")) return truncate(chalk.cyan(l), cols);
-    if (l.startsWith("+")) return truncate(chalk.green(l), cols);
-    if (l.startsWith("-")) return truncate(chalk.red(l), cols);
+    if (l.startsWith("+++")) return truncate(dp.addHead(l), cols);
+    if (l.startsWith("---")) return truncate(dp.delHead(l), cols);
+    if (l.startsWith("@@")) return truncate(dp.hunk(l), cols);
+    if (l.startsWith("+")) return truncate(dp.add(l), cols);
+    if (l.startsWith("-")) return truncate(dp.del(l), cols);
     return truncate(l, cols);
   });
   if (lines.length > maxLines) out.push(color ? chalk.gray(`  …(+${lines.length - maxLines} more)`) : `  …(+${lines.length - maxLines} more)`);

package/src/tui/components/color.ts

@@ -11,6 +11,12 @@
  * and testable regardless of chalk's own TTY auto-detection.
  */
 
+import { execSync } from "node:child_process";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import * as os from "node:os";
+import { visibleWidth as widthOf } from "./width";
+
 /** Color capability tiers. */
 export enum ColorLevel {
   None = 0,
@@ -36,9 +42,13 @@ export function stripAnsi(s: string): string {
   return s.replace(ANSI_RE, "");
 }
 
-/** Visible (printable) width of a string, ignoring SGR escapes. */
+/** Visible DISPLAY width of a string, ignoring SGR escapes. Delegates to the
+ *  width-aware implementation (consensus-seed P2.B9) so CJK/emoji glyphs count 2
+ *  columns — every box/pad that calls this (input box, forge cards, welcome,
+ *  tables) now aligns correctly for wide-character content instead of overflowing
+ *  the right border (the "입력창 깨짐" corruption). */
 export function visibleWidth(s: string): number {
-  return stripAnsi(s).length;
+  return widthOf(s);
 }
 
 /**
@@ -144,6 +154,20 @@ export function fgEscape(c: RGB, level: ColorLevel): string {
   }
 }
 
+/** Open-background escape for one color at a given level (empty at None). */
+export function bgEscape(c: RGB, level: ColorLevel): string {
+  switch (level) {
+    case ColorLevel.TrueColor:
+      return `${ESC}48;2;${c.r};${c.g};${c.b}m`;
+    case ColorLevel.Ansi256:
+      return `${ESC}48;5;${rgbToAnsi256(c)}m`;
+    case ColorLevel.Basic:
+      return `${ESC}${rgbToAnsi16(c) + 10}m`;
+    default:
+      return "";
+  }
+}
+
 /** Reset escape (empty at None). */
 export function resetEscape(level: ColorLevel): string {
   return level === ColorLevel.None ? "" : `${ESC}0m`;
@@ -170,3 +194,148 @@ export function applyGradient(text: string, from: RGB, to: RGB, level: ColorLeve
   }
   return out + resetEscape(level);
 }
+
+/**
+ * Paint `text` on a left→right BACKGROUND gradient (`from`→`to`) with a fixed
+ * high-contrast foreground — the status-bar "highlight block" look. Unlike
+ * `applyGradient`, spaces ARE painted (the block must be continuous).
+ * At `ColorLevel.None` the plain text is returned unchanged.
+ */
+export function applyBgGradient(
+  text: string,
+  from: RGB,
+  to: RGB,
+  level: ColorLevel = ColorLevel.TrueColor,
+  fg: RGB = { r: 235, g: 235, b: 235 },
+): string {
+  const plain = stripAnsi(text);
+  if (level === ColorLevel.None || plain.length === 0) return plain;
+  const stops = gradientStops(from, to, plain.length);
+  let out = fgEscape(fg, level);
+  for (let i = 0; i < plain.length; i++) {
+    out += bgEscape(stops[i]!, level) + plain[i]!;
+  }
+  return out + resetEscape(level);
+}
+
+/**
+ * Apply a flowing color gradient across the visible characters of `text`,
+ * shifted by `phase` (0..1 wraps) around the palette.
+ * If colorLevel < 3 (or opts.colorLevel < 3), return the text unchanged.
+ */
+export function animatedGradientText(
+  text: string,
+  palette: readonly string[],
+  phase: number,
+  opts: { colorLevel: number }
+): string {
+  if (opts.colorLevel < 3) {
+    return text;
+  }
+  const plain = stripAnsi(text);
+  if (plain.length === 0) {
+    return plain;
+  }
+
+  const rgbPalette = palette.map(hex => hexToRgb(hex));
+  const M = rgbPalette.length;
+  if (M === 0) {
+    return plain;
+  }
+
+  let out = "";
+  const N = plain.length;
+
+  for (let i = 0; i < N; i++) {
+    const ch = plain[i]!;
+    if (ch === " ") {
+      out += ch;
+      continue;
+    }
+
+    const x = N > 1 ? i / (N - 1) : 0;
+    let t = (x + phase) % 1;
+    if (t < 0) t += 1;
+
+    let color: RGB;
+    if (M === 1) {
+      color = rgbPalette[0]!;
+    } else {
+      const rawSegment = t * M;
+      const index = Math.floor(rawSegment);
+      const fraction = rawSegment - index;
+      const colorA = rgbPalette[index % M]!;
+      const colorB = rgbPalette[(index + 1) % M]!;
+      color = lerpColor(colorA, colorB, fraction);
+    }
+
+    out += fgEscape(color, ColorLevel.TrueColor) + ch;
+  }
+
+  return out + resetEscape(ColorLevel.TrueColor);
+}
+/** Process-lifetime memo for `detectAppearance`: the darwin fallback shells out to
+ *  `defaults read` (execSync ≈ 12ms — measured), and theme resolution runs on the
+ *  keystroke-hot path. OS appearance changing mid-session is cosmetic; a fresh run
+ *  picks it up. Keyed by COLORFGBG so a terminal that DOES advertise its palette
+ *  is still honored per-env. */
+const appearanceCache = new Map<string, "light" | "dark" | undefined>();
+
+/** Test-only: clear the appearance memo. */
+export function resetAppearanceCache(): void {
+  appearanceCache.clear();
+}
+
+export function detectAppearance(env: EnvLike = process.env): "light" | "dark" | undefined {
+  const key = env.COLORFGBG ?? "";
+  if (appearanceCache.has(key)) return appearanceCache.get(key);
+  const result = detectAppearanceUncached(env);
+  appearanceCache.set(key, result);
+  return result;
+}
+
+function detectAppearanceUncached(env: EnvLike = process.env): "light" | "dark" | undefined {
+  const colorfgbg = env.COLORFGBG;
+  if (colorfgbg) {
+    const parts = colorfgbg.split(";");
+    if (parts.length > 1) {
+      const bgStr = parts[parts.length - 1]!.trim();
+      const bg = parseInt(bgStr, 10);
+      if (!isNaN(bg)) {
+        if (bg >= 0 && bg <= 6) return "dark";
+        if (bg === 8) return "dark";
+        if (bg === 7) return "light";
+        if (bg >= 9 && bg <= 15) return "light";
+        if (bg >= 232 && bg <= 243) return "dark";
+        if (bg >= 244 && bg <= 255) return "light";
+        if (bg >= 16 && bg <= 231) {
+          const code = bg - 16;
+          const b = code % 6;
+          const g = Math.floor((code % 36) / 6);
+          const r = Math.floor(code / 36);
+          const R = r * 51;
+          const G = g * 51;
+          const B = b * 51;
+          const Y = 0.299 * R + 0.587 * G + 0.114 * B;
+          return Y < 128 ? "dark" : "light";
+        }
+      }
+    }
+  }
+
+  if (process.platform === "darwin") {
+    try {
+      const style = execSync("defaults read -g AppleInterfaceStyle", { stdio: ["ignore", "pipe", "ignore"] })
+        .toString()
+        .trim();
+      if (style === "Dark") {
+        return "dark";
+      }
+      return "light";
+    } catch (e) {
+      return "light";
+    }
+  }
+
+  return undefined;
+}

package/src/tui/components/config-panel.ts

@@ -1,6 +1,6 @@
 /**
- * Pure formatters for the TUI configuration panels (`/model`, `/models`,
- * `/provider`, `/agents`, `/config`). Each returns plain string lines (color via
+ * Pure formatters for the TUI configuration panels (`/model`, `/provider`,
+ * `/agents`, `/config`). Each returns plain string lines (color via
  * chalk) so it can be unit-tested with an ANSI-stripping helper and reused by
  * both the interactive REPL and one-shot commands.
  */
@@ -11,7 +11,7 @@ import type { ProviderModelsResult } from "../../ai/model-discovery";
 import type { PickEntry } from "../../ai/model-picker";
 import type { CatalogModel } from "../../ai/model-catalog";
 import type { EnrichedModel } from "../../ai/model-enrich";
-import { formatTokens } from "../../ai/model-catalog";
+import { catalogMetadata, formatTokens, companyLabel } from "../../ai/model-catalog";
 
 /** A single "Model: alias → resolved (provider)" status line. */
 export function formatModelLine(d: {
@@ -22,7 +22,7 @@ export function formatModelLine(d: {
 }): string {
   const expansion = d.resolved !== d.label ? ` → ${d.resolved}` : "";
   const readyMark = d.ready === undefined ? "" : d.ready ? ` ${chalk.green("✓")}` : ` ${chalk.yellow("· no credential")}`;
-  return `${chalk.bold(d.label)}${expansion} ${chalk.gray(`(${d.provider})`)}${readyMark}`;
+  return `${chalk.bold(d.label)}${expansion} ${chalk.gray(`(${d.provider} · ${companyLabel(d.provider)})`)}${readyMark}`;
 }
 
 /** Aliases section: ` alias      → target` lines, sorted by alias. */
@@ -36,38 +36,41 @@ export function formatAliasLines(aliases: Record<string, string>): string[] {
 /** Provider credential table: ` name      ✓ label  [baseUrl]`. */
 export function formatProviderPanel(statuses: ProviderStatus[]): string[] {
   if (statuses.length === 0) return ["  (no providers)"];
-  const width = Math.max(...statuses.map(s => s.name.length), 6);
+  const nameWithCompany = (name: string) => `${name} (${companyLabel(name)})`;
+  const width = Math.max(...statuses.map(s => nameWithCompany(s.name).length), 6);
   return statuses.map(s => {
     const mark = s.ready ? chalk.green("✓") : chalk.gray("·");
     const base = s.baseUrl ? chalk.gray(`  [${s.baseUrl}]`) : "";
     const label = s.ready ? s.label : chalk.yellow(s.label);
-    return `  ${s.name.padEnd(width)} ${mark} ${label}${base}`;
+    return `  ${nameWithCompany(s.name).padEnd(width)} ${mark} ${label}${base}`;
   });
 }
 
-/** Subagent roster: ` id        title — model ≤N steps  (read-only)`. */
+/** Subagent roster: ` id        title — model · thinking ≤N steps  (read-only)`. */
 export function formatAgentsPanel(
   roles: readonly SubagentRole[],
-  resolve: (role: SubagentRole) => { model: string; maxSteps: number },
+  resolve: (role: SubagentRole) => { model: string; maxSteps: number; thinking?: string },
 ): string[] {
   if (roles.length === 0) return ["  (no subagent roles)"];
   const width = Math.max(...roles.map(r => r.id.length), 8);
   return roles.map(r => {
-    const { model, maxSteps } = resolve(r);
+    const { model, maxSteps, thinking } = resolve(r);
     const ro = r.readOnly ? chalk.gray("  (read-only)") : "";
-    return `  ${chalk.cyan(r.id.padEnd(width))} ${r.title} — ${model} ≤${maxSteps} steps${ro}`;
+    const think = chalk.dim(`(${thinking ?? "inherit"})`);
+    return `  ${chalk.cyan(r.id.padEnd(width))} ${r.title} — ${model} ${think} ≤${maxSteps} steps${ro}`;
   });
 }
 
 /** Detail block for a single subagent role. */
 export function formatAgentDetail(
   role: SubagentRole,
-  resolved: { model: string; maxSteps: number },
+  resolved: { model: string; maxSteps: number; thinking?: string },
 ): string[] {
   return [
     `${chalk.cyan(role.id)} — ${role.title}`,
     `  ${role.description}`,
     `  model:     ${resolved.model}`,
+    `  thinking:  ${resolved.thinking ?? "inherit (follows the default thinking level)"}`,
     `  maxSteps:  ${resolved.maxSteps}`,
     `  mutates:   ${role.readOnly ? "no (read-only: read/find/search only)" : "yes (full toolset)"}`,
   ];
@@ -111,14 +114,15 @@ export function formatLiveModels(
       lines.push(`${chalk.bold(r.provider)} ${chalk.gray(`(${r.source})`)}: ${chalk.yellow(r.error ?? "unavailable")}`);
       continue;
     }
-    lines.push(`${chalk.bold(r.provider)} ${chalk.gray(`(${r.source})`)}: ${r.models.length} model${r.models.length === 1 ? "" : "s"}`);
+    const tag = r.fallback ? chalk.gray(" · catalog (live list endpoint unavailable)") : "";
+    lines.push(`${chalk.bold(r.provider)} ${chalk.gray(`(${r.source})`)}: ${r.models.length} model${r.models.length === 1 ? "" : "s"}${tag}`);
     for (const m of r.models.slice(0, cap)) {
       const mark = opts.current && m === opts.current ? chalk.green(" ◀ current") : "";
       lines.push(`  ${m}${mark}`);
     }
     if (r.models.length > cap) lines.push(chalk.gray(`  …(+${r.models.length - cap} more)`));
   }
-  if (lines.length === 0) lines.push("  (no live models — log in with 'joc auth login' or start Ollama)");
+  if (lines.length === 0) lines.push("  (no live models — log in with 'jeo auth login' or start Ollama)");
   return lines;
 }
 
@@ -132,7 +136,7 @@ export function liveModelKnown(results: ProviderModelsResult[], model: string):
  * The active model (if any) is marked.
  */
 export function formatPickList(entries: PickEntry[], opts: { current?: string; cap?: number } = {}): string[] {
-  if (entries.length === 0) return ["  (no models — log in with 'joc auth login' or start Ollama)"];
+  if (entries.length === 0) return ["  (no models — log in with 'jeo auth login' or start Ollama)"];
   const cap = opts.cap ?? 60;
   const width = String(Math.min(entries.length, cap)).length + 1; // "#" + digits
   const lines = entries.slice(0, cap).map(e => {
@@ -144,6 +148,35 @@ export function formatPickList(entries: PickEntry[], opts: { current?: string; c
   return lines;
 }
 
+/**
+ * Numbered pick list with GJC-style capability columns. This is the setting-flow
+ * view: every row has a stable `#N` token and the live/OAuth model id is
+ * annotated with catalog metadata when known.
+ */
+export function formatPickListWithCapabilities(entries: PickEntry[], opts: { current?: string; cap?: number } = {}): string[] {
+  if (entries.length === 0) return ["  (no models — log in with 'jeo auth login' or start Ollama)"];
+  const cap = opts.cap ?? 50;
+  const shown = entries.slice(0, cap);
+  const iw = String(Math.min(entries.length, cap)).length + 1;
+  const pw = Math.max(...shown.map(e => e.provider.length), 8);
+  const mw = Math.min(Math.max(...shown.map(e => e.model.length), 6), 36);
+  const lines = [`  ${"#".padStart(iw)}  ${"provider".padEnd(pw)}  ${"model".padEnd(mw)}  ${"ctx".padStart(5)}  ${"out".padStart(5)}  thinking  img`];
+  for (const e of shown) {
+    const meta = catalogMetadata(e.model);
+    const ctx = meta ? formatTokens(meta.contextTokens) : "-";
+    const out = meta ? formatTokens(meta.maxOutputTokens) : "-";
+    const think = meta ? thinkCell(meta.thinking) : "?";
+    const img = meta ? (meta.images ? "yes" : "no") : "?";
+    const id = e.model.length > mw ? e.model.slice(0, mw - 1) + "…" : e.model.padEnd(mw);
+    const mark = opts.current && e.model === opts.current ? chalk.green(" ◀ current") : "";
+    lines.push(
+      `  ${chalk.yellow(`#${e.index}`.padStart(iw))}  ${chalk.gray(e.provider.padEnd(pw))}  ${id}  ${ctx.padStart(5)}  ${out.padStart(5)}  ${chalk.cyan(think)}  ${img}${mark}`,
+    );
+  }
+  if (entries.length > cap) lines.push(chalk.gray(`  …(+${entries.length - cap} more — narrow with /provider <name>)`));
+  return lines;
+}
+
 function thinkCell(levels: string[]): string {
   return levels.length ? levels.join(",") : "-";
 }
@@ -163,6 +196,40 @@ export function formatCatalogTable(models: CatalogModel[], opts: { current?: str
   return lines;
 }
 
+/**
+ * Canonical catalog table used by the `/model` and `/provider` pickers:
+ * canonical id, selected provider model, variant count, context, and max output.
+ */
+export function formatCanonicalCatalogTable(models: CatalogModel[], opts: { current?: string; cap?: number } = {}): string[] {
+  if (models.length === 0) return ["  (no catalog matches)"];
+  const grouped = new Map<string, CatalogModel[]>();
+  for (const m of models) grouped.set(m.canonical, [...(grouped.get(m.canonical) ?? []), m]);
+  const rows = [...grouped.entries()].map(([canonical, variants]) => {
+    const selected =
+      variants.find(m => opts.current && (m.canonical === opts.current || m.providerModel === opts.current || `${m.provider}/${m.providerModel}` === opts.current)) ??
+      variants[0]!;
+    const selectedId = selected.providerModel.startsWith(`${selected.provider}/`)
+      ? selected.providerModel
+      : `${selected.provider}/${selected.providerModel}`;
+    return { canonical, selected, selectedId, variants: variants.length };
+  });
+  const cap = opts.cap ?? 50;
+  const shown = rows.slice(0, cap);
+  const cw = Math.min(Math.max(...shown.map(r => r.canonical.length), 9), 36);
+  const sw = Math.min(Math.max(...shown.map(r => r.selectedId.length), 8), 42);
+  const lines = [`  ${"canonical".padEnd(cw)}  ${"selected".padEnd(sw)}  variants  ${"context".padStart(7)}  ${"max-out".padStart(7)}`];
+  for (const r of shown) {
+    const canonical = r.canonical.length > cw ? r.canonical.slice(0, cw - 1) + "…" : r.canonical.padEnd(cw);
+    const selectedId = r.selectedId.length > sw ? r.selectedId.slice(0, sw - 1) + "…" : r.selectedId.padEnd(sw);
+    const mark = opts.current && (r.selected.canonical === opts.current || r.selected.providerModel === opts.current || r.selectedId === opts.current) ? chalk.green(" ◀") : "";
+    lines.push(
+      `  ${canonical}  ${selectedId}  ${String(r.variants).padStart(8)}  ${formatTokens(r.selected.contextTokens).padStart(7)}  ${formatTokens(r.selected.maxOutputTokens).padStart(7)}${mark}`,
+    );
+  }
+  if (rows.length > cap) lines.push(chalk.gray(`  …(+${rows.length - cap} more)`));
+  return lines;
+}
+
 /** One-line capability summary for a single model, e.g. for `/model` output. */
 export function formatCapabilityLine(m: CatalogModel): string {
   return `${chalk.gray("caps:")} ctx ${formatTokens(m.contextTokens)} · out ${formatTokens(m.maxOutputTokens)} · thinking ${thinkCell(m.thinking)} · images ${m.images ? "yes" : "no"}`;
@@ -173,7 +240,7 @@ export function formatCapabilityLine(m: CatalogModel): string {
  * context/out/thinking/img when the catalog knows them, "-" otherwise.
  */
 export function formatEnrichedModels(models: EnrichedModel[], opts: { current?: string; cap?: number } = {}): string[] {
-  if (models.length === 0) return ["  (no live models — log in with 'joc auth login' or start Ollama)"];
+  if (models.length === 0) return ["  (no live models — log in with 'jeo auth login' or start Ollama)"];
   const cap = opts.cap ?? 50;
   const shown = models.slice(0, cap);
   const pw = Math.max(...shown.map(m => m.provider.length), 8);

package/src/tui/components/duration.ts

@@ -0,0 +1,38 @@
+/**
+ * Human-scale duration + token-usage formatting for status lines.
+ *
+ * gjc renders elapsed time at minute granularity once a turn crosses 60s
+ * ("took 3 steps in 1m 45s"), and surfaces live token usage per turn. These
+ * helpers are pure so both the TUI footer/summary and the plain stream sink
+ * share one formatting contract.
+ */
+
+/** Format milliseconds as "42s", "1m 45s", "12m", or "1h 2m" (minute-first past 60s). */
+export function formatDuration(ms: number): string {
+  const totalSecs = Math.max(0, Math.round(ms / 1000));
+  if (totalSecs < 60) return `${totalSecs}s`;
+  const totalMins = Math.floor(totalSecs / 60);
+  const secs = totalSecs % 60;
+  if (totalMins < 60) return secs ? `${totalMins}m ${secs}s` : `${totalMins}m`;
+  const hours = Math.floor(totalMins / 60);
+  const mins = totalMins % 60;
+  return mins ? `${hours}h ${mins}m` : `${hours}h`;
+}
+
+/** Compact token count: 950 → "950", 12_345 → "12.3k", 1_234_567 → "1.2M". */
+export function formatTokenCount(n: number): string {
+  if (!Number.isFinite(n) || n < 0) return "0";
+  if (n < 1000) return String(Math.round(n));
+  if (n < 1_000_000) {
+    const k = n / 1000;
+    return `${k >= 100 ? Math.round(k) : Math.round(k * 10) / 10}k`;
+  }
+  const m = n / 1_000_000;
+  return `${m >= 100 ? Math.round(m) : Math.round(m * 10) / 10}M`;
+}
+
+/** "12.3k in / 1.2k out tokens" — empty string when usage was never reported. */
+export function formatUsage(usage?: { inputTokens?: number; outputTokens?: number }): string {
+  if (!usage || (usage.inputTokens == null && usage.outputTokens == null)) return "";
+  return `${formatTokenCount(usage.inputTokens ?? 0)} in / ${formatTokenCount(usage.outputTokens ?? 0)} out tokens`;
+}

package/src/tui/components/evolution.ts

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 
 /**
- * Canonical "evolution" model for the joc TUI (single source of truth).
+ * Canonical "evolution" model for the jeo TUI (single source of truth).
  *
  * Every evolving surface — the ASCII art, the spinner, the progress meter, and
  * the footer track — derives its stage from the functions and tables here, so a
@@ -32,7 +32,7 @@ export const EVOLUTION_STAGE_COLORS: readonly ((s: string) => string)[] = [
 
 /** Spinner frame sets, one per evolution stage. */
 export const EVOLUTION_SPINNER_FRAMES: readonly string[][] = [
-  [".", "..", "...", "....", "...", ".."],
+  [".   ", "..  ", "... ", "....", "... ", "..  "],
   ["\u2801", "\u2802", "\u2804", "\u2808", "\u2810", "\u2820"],
   ["|", "/", "-", "\\"],
   ["\u280b", "\u2819", "\u2839", "\u2838", "\u283c", "\u2834", "\u2826", "\u2827", "\u2807", "\u280f"],
@@ -45,7 +45,7 @@ export const EVOLUTION_SPINNER_FRAMES: readonly string[][] = [
  * `EVOLUTION_SPINNER_FRAMES`.
  */
 export const EVOLUTION_SPINNER_FRAMES_ASCII: readonly string[][] = [
-  [".", "..", "...", "....", "...", ".."],
+  [".   ", "..  ", "... ", "....", "... ", "..  "],
   ["-", "=", "~", "="],
   ["|", "/", "-", "\\"],
   ["[.  ]", "[.. ]", "[...]", "[ ..]", "[  .]", "[   ]"],