jeo-code 0.1.0 → 0.4.4

package/src/tui/components/AGENTS.md

@@ -0,0 +1,42 @@
+<!-- Parent: ../../AGENTS.md -->
+<!-- Generated: 2026-06-11 | Updated: 2026-06-11 -->
+
+# components
+
+## Purpose
+Reusable UI widgets and layout primitives for the terminal interface.
+
+## Key Files
+| File | Description |
+|------|-------------|
+| `forge.ts` | Formats the boxed tool execution outputs |
+| `status.ts` | The `[STEP]` / `[STATUS]` / `[TOOL]` HUD lines |
+| `section.ts` | Shadcn-inspired card layout and spacing tokens |
+| `layout.ts` | Low-level padding, boxing, and alignment math |
+| `ascii-art.ts` | Cellular evolution graphics |
+
+## Subdirectories
+*(None)*
+
+## For AI Agents
+
+### Working In This Directory
+- Prioritize deterministic width/height calculations.
+- Always strip ANSI codes (`\x1b[...m`) before measuring string lengths.
+- Components should return string arrays (`string[]`) representing lines, not perform direct stdout writes.
+
+### Testing Requirements
+- Snapshot or exact string matching in unit tests.
+
+### Common Patterns
+- Theming via `themes.ts` and `chalk`.
+
+## Dependencies
+
+### Internal
+- Consumed by `src/tui/app.ts`.
+
+### External
+*(None)*
+
+<!-- MANUAL: -->

package/src/tui/components/ascii-art.ts

@@ -1,6 +1,6 @@
 import chalk from "chalk";
 import { stageIndexForStep, clampStageIndex, type StageGradient } from "./evolution";
-import { applyGradient, hexToRgb, ColorLevel } from "./color";
+import { applyGradient, hexToRgb, ColorLevel, animatedGradientText } from "./color";
 
 export interface AsciiStage {
   name: string;
@@ -13,6 +13,14 @@ export interface AsciiStage {
    * the fallback when `frames` is absent. Frames should match `art`'s line count.
    */
   frames?: string[][];
+  /**
+   * Optional ASCII-only `art`/`frames` used when the caller passes `unicode: false`
+   * (terminals that cannot render box-drawing / geometric glyphs). When absent the
+   * stage's normal `art`/`frames` are used as-is (the other stages are already
+   * ASCII-clean). Row counts should match so per-line colors stay aligned.
+   */
+  asciiArt?: string[];
+  asciiFrames?: string[][];
 }
 
 export const EVOLUTION_STAGES: AsciiStage[] = [
@@ -20,33 +28,82 @@ export const EVOLUTION_STAGES: AsciiStage[] = [
     name: "Primordial Cell",
     color: s => chalk.cyan(s),
     art: [
-      "      .---.      ",
-      "     / o o \\     ",
-      "     \\  -  /     ",
-      "      '---'      ",
+      "   ○           ○   ",
+      "    ╲         ╱    ",
+      "     ╭───────╮     ",
+      "     │ ◕ § ◕ │     ",
+      "     │ · ‿ · │     ",
+      "     ╰───────╯     ",
+      "    ╱ ╲     ╱ ╲    ",
       " [Primordial Cell]"
     ],
     lineColors: [
       chalk.cyan,
       chalk.cyan,
       chalk.cyan,
+      s => chalk.bold.cyan(s),
+      chalk.cyan,
+      chalk.cyan,
       chalk.cyan,
       s => chalk.bold.cyan(s)
     ],
-    // Pulsing membrane + nucleus (a primordial cell "breathing").
+    // A glowing primordial cell after assets/character.png: antennae with pulsing
+    // tips, a round membrane, big kawaii eyes flanking an inner DNA helix (§/≋), a
+    // smile, and crab-like legs. Two frames "breathe": blink + helix pulse + leg swing.
+    // Every glyph is display-width 1 (box-drawing + ambiguous-width geometrics the
+    // rest of the TUI already uses) so renderAsciiArt's length-based padding and
+    // app.ts/welcome.ts's visibleWidth centering stay in lockstep.
     frames: [
       [
-        "      .---.      ",
-        "     / o o \\     ",
-        "     \\  -  /     ",
-        "      '---'      ",
+        "   ○           ○   ",
+        "    ╲         ╱    ",
+        "     ╭───────╮     ",
+        "     │ ◕ § ◕ │     ",
+        "     │ · ‿ · │     ",
+        "     ╰───────╯     ",
+        "    ╱ ╲     ╱ ╲    ",
+        " [Primordial Cell]"
+      ],
+      [
+        "   ◉           ◉   ",
+        "    ╲         ╱    ",
+        "     ╭───────╮     ",
+        "     │ ◔ ≋ ◔ │     ",
+        "     │ ° ‿ ° │     ",
+        "     ╰───────╯     ",
+        "     ╲ ╱   ╲ ╱     ",
+        " [Primordial Cell]"
+      ]
+    ],
+    asciiArt: [
+      "   o           o   ",
+      "    \\         /    ",
+      "     .-------.     ",
+      "     | o 8 o |     ",
+      "     |  \\_/  |     ",
+      "     '-------'     ",
+      "    / \\     / \\    ",
+      " [Primordial Cell]"
+    ],
+    asciiFrames: [
+      [
+        "   o           o   ",
+        "    \\         /    ",
+        "     .-------.     ",
+        "     | o 8 o |     ",
+        "     |  \\_/  |     ",
+        "     '-------'     ",
+        "    / \\     / \\    ",
         " [Primordial Cell]"
       ],
       [
-        "      .===.      ",
-        "     / O O \\     ",
-        "     \\  ~  /     ",
-        "      '==='      ",
+        "   O           O   ",
+        "    \\         /    ",
+        "     .-------.     ",
+        "     | - % - |     ",
+        "     |  \\_/  |     ",
+        "     '-------'     ",
+        "     \\ /   \\ /     ",
         " [Primordial Cell]"
       ]
     ]
@@ -242,6 +299,9 @@ export interface RenderAsciiOptions {
   gradient?: StageGradient;
   /** Color tier for gradient rendering (default TrueColor). */
   colorLevel?: ColorLevel;
+  /** Use the stage's ASCII-only `asciiArt`/`asciiFrames` fallback when false
+   *  (terminals without box-drawing/geometric glyph support). Default true. */
+  unicode?: boolean;
 }
 
 /**
@@ -252,7 +312,21 @@ export interface RenderAsciiOptions {
  */
 export function renderAsciiArt(stage: AsciiStage, opts: RenderAsciiOptions = {}): string[] {
   const useColor = opts.color !== false;
-  const source = opts.frame !== undefined ? stageFrame(stage, opts.frame) : stage.art;
+  const useUnicode = opts.unicode !== false;
+  // ASCII-fallback source set: a non-unicode terminal gets the stage's plain-ASCII
+  // art/frames (when defined) instead of box-drawing/geometric glyphs that would
+  // render as tofu boxes. stageBlocks/stageFrame keep using the unicode frames so
+  // stageWidth()/stageHeight() invariants are unaffected.
+  const frameSet =
+    !useUnicode && stage.asciiFrames && stage.asciiFrames.length > 0 ? stage.asciiFrames : stageBlocks(stage);
+  const baseArt = !useUnicode && stage.asciiArt ? stage.asciiArt : stage.art;
+  let source: string[];
+  if (opts.frame !== undefined) {
+    const t = Number.isFinite(opts.frame) ? Math.trunc(opts.frame) : 0;
+    source = frameSet[((t % frameSet.length) + frameSet.length) % frameSet.length]!;
+  } else {
+    source = baseArt;
+  }
   const width = opts.width ?? Math.max(0, ...source.map(l => l.length));
   if (opts.cols !== undefined && opts.cols < width) {
     return [];
@@ -338,3 +412,171 @@ export async function animateFrames(stage: AsciiStage, opts: AnimateFramesOption
   }
   return total;
 }
+export const DNA_CLAW_ART: string[] = [
+  "  ╭╯   ◆  ◆   ╰╮  ",
+  " ╭╯   ╱╲  ╱╲   ╰╮ ",
+  " ║    ╲ ╳ ╱     ║ ",
+  " ╰╮    ╳ ╳     ╭╯ ",
+  "  ╰╮  ╱ ╳ ╲   ╭╯  ",
+  "   ╚══○   ○══╝    ",
+  "      ║   ║       ",
+  "   [ DNA Claw ]   "
+];
+
+export const DNA_CLAW_ART_ASCII: string[] = [
+  "  /{   *  *   }\\  ",
+  " /{   / \\ / \\  }\\ ",
+  " |    \\  X  /   | ",
+  " \\{    X X     }/ ",
+  "  \\{  / X \\   }/  ",
+  "   \\==o   o==/    ",
+  "      |   |       ",
+  "   [ DNA Claw ]   "
+];
+
+/** Twist animation frames for the compact DNA Claw: the claw silhouette stays
+ *  fixed while the inner helix lattice rotates. Frame 0 === DNA_CLAW_ART, so a
+ *  frameless render is byte-identical to the static symbol. All lines are the
+ *  same width (18) and every glyph is display-width 1. */
+export const DNA_CLAW_FRAMES: string[][] = [
+  DNA_CLAW_ART,
+  [
+    "  ╭╯   ◆  ◆   ╰╮  ",
+    " ╭╯   ╲╱  ╲╱   ╰╮ ",
+    " ║     ╳ ╳      ║ ",
+    " ╰╮   ╱ ╳ ╲    ╭╯ ",
+    "  ╰╮   ╳ ╳    ╭╯  ",
+    "   ╚══○   ○══╝    ",
+    "      ║   ║       ",
+    "   [ DNA Claw ]   "
+  ],
+  [
+    "  ╭╯   ◆  ◆   ╰╮  ",
+    " ╭╯   ╱╲  ╱╲   ╰╮ ",
+    " ║     ╳ ╳      ║ ",
+    " ╰╮   ╲ ╳ ╱    ╭╯ ",
+    "  ╰╮    ╳ ╳   ╭╯  ",
+    "   ╚══○   ○══╝    ",
+    "      ║   ║       ",
+    "   [ DNA Claw ]   "
+  ]
+];
+
+export const DNA_CLAW_FRAMES_ASCII: string[][] = [
+  DNA_CLAW_ART_ASCII,
+  [
+    "  /{   *  *   }\\  ",
+    " /{   \\ / \\ /  }\\ ",
+    " |     X X      | ",
+    " \\{   / X \\    }/ ",
+    "  \\{   X X    }/  ",
+    "   \\==o   o==/    ",
+    "      |   |       ",
+    "   [ DNA Claw ]   "
+  ],
+  [
+    "  /{   *  *   }\\  ",
+    " /{   / \\ / \\  }\\ ",
+    " |     X X      | ",
+    " \\{   \\ X /    }/ ",
+    "  \\{    X X   }/  ",
+    "   \\==o   o==/    ",
+    "      |   |       ",
+    "   [ DNA Claw ]   "
+  ]
+];
+
+/** Number of twist frames in the compact DNA Claw animation cycle. */
+export function dnaClawFrameCount(): number {
+  return DNA_CLAW_FRAMES.length;
+}
+
+/** Grand hero variant for the welcome forge box (gjc-style spacious banner):
+ *  a wide claw whose pincers frame a twisting DNA helix. Width-1 glyphs only
+ *  (box drawing + diagonals + geometrics) so padding/centering math stays exact. */
+export const DNA_CLAW_ART_GRAND: string[] = [
+  "      ◆◆                    ◆◆      ",
+  "   ╭──╯╰──╮              ╭──╯╰──╮   ",
+  "  ╭╯      ╰╮   ╲╲  ╱╱   ╭╯      ╰╮  ",
+  " ╭╯        ║    ╲╳╳╱    ║        ╰╮ ",
+  " ║         ║     ╳╳     ║         ║ ",
+  " ║         ║    ╱╳╳╲    ║         ║ ",
+  " ╰╮        ║   ╱╱  ╲╲   ║        ╭╯ ",
+  "  ╰╮       ║   ╲╲  ╱╱   ║       ╭╯  ",
+  "   ╰──╮    ║    ╲╳╳╱    ║    ╭──╯   ",
+  "      ╰════○     ╳╳     ○════╯      ",
+  "           ║    ╱╳╳╲    ║           ",
+  "        [ D N A · C L A W ]         "
+];
+
+export const DNA_CLAW_ART_GRAND_ASCII: string[] = [
+  "      **                    **      ",
+  "   /--'`--\\              /--'`--\\   ",
+  "  /'      `\\   \\\\  //   /'      `\\  ",
+  " /'        |    \\XX/    |        `\\ ",
+  " |         |     XX     |         | ",
+  " |         |    /XX\\    |         | ",
+  " \\,        |   //  \\\\   |        ,/ ",
+  "  \\,       |   \\\\  //   |       ,/  ",
+  "   \\--,    |    \\XX/    |    ,--/   ",
+  "      \\====o     XX     o====/      ",
+  "           |    /XX\\    |           ",
+  "        [ D N A . C L A W ]         "
+];
+
+export function renderDnaClaw(opts: {
+  cols?: number;
+  phase?: number;
+  unicode?: boolean;
+  color?: boolean;
+  colorLevel?: ColorLevel;
+  /** Grand hero variant (welcome forge box); default is the compact in-turn symbol. */
+  grand?: boolean;
+  /** Twist-animation frame (compact symbol only; wraps). The helix lattice rotates
+   *  while the claw silhouette stays fixed — combined with the flowing gradient
+   *  `phase` this animates the forge identity without any frame-count growth. */
+  frame?: number;
+}): string[] {
+  const useUnicode = opts.unicode !== false;
+  let source: string[];
+  if (opts.grand) {
+    source = useUnicode ? DNA_CLAW_ART_GRAND : DNA_CLAW_ART_GRAND_ASCII;
+  } else {
+    const frames = useUnicode ? DNA_CLAW_FRAMES : DNA_CLAW_FRAMES_ASCII;
+    const f = Math.abs(Math.trunc(opts.frame ?? 0)) % frames.length;
+    source = frames[f]!;
+  }
+  const width = Math.max(0, ...source.map(l => l.length));
+
+  if (opts.cols !== undefined && opts.cols < width) {
+    return [];
+  }
+
+  const phase = opts.phase ?? 0;
+  const useColor = opts.color !== false;
+  const colorLevel = opts.colorLevel ?? ColorLevel.TrueColor;
+  const palette = DNA_FLOW_PALETTE;
+
+  return source.map((line, idx) => {
+    const padded = line.length < width ? line + " ".repeat(width - line.length) : line;
+    if (!useColor || colorLevel < ColorLevel.TrueColor) {
+      return padded;
+    }
+    return animatedGradientText(padded, palette, phase + idx * 0.07, { colorLevel });
+  });
+}
+
+/** The DNA Claw identity palette (emerald → cyan → violet helix flow). Shared by
+ *  the claw art and the forge-card border flow so the brand gradient is uniform. */
+export const DNA_FLOW_PALETTE: readonly string[] = ["#10ac84", "#48dbfb", "#8e44ad"];
+
+/** Width-1 "claw beat" glyph for an animation tick — the ◆/╳/○ motifs of the
+ *  claw art cycling in place. Used as the live forge-card title mark. */
+export function dnaClawBeat(frame: number, unicode = true): string {
+  const beats = unicode ? ["◆", "╳", "○"] : ["*", "X", "o"];
+  return beats[Math.abs(Math.trunc(frame)) % beats.length]!;
+}
+
+export function dnaClawHeight(): number {
+  return DNA_CLAW_ART.length;
+}

package/src/tui/components/autocomplete.ts

@@ -2,11 +2,11 @@
  * Interactive autocomplete engine for the REPL.
  *
  * Completes slash-command *names* and their *arguments*:
- *  - `/mod`            → `/model`, `/models`
+ *  - `/mod`            → `/model`
  *  - `/model gpt`      → live (logged-in) model ids + aliases + catalog ids
  *  - `/provider an`    → provider names; second arg → that provider's live models
  *  - `/agents exec`    → subagent role ids; second arg → live model ids
- *  - `/thinking h`     → low/medium/high
+ *  - `/thinking h`     → minimal/low/medium/high/xhigh
  *
  * Pure + synchronous: the dynamic data (live models from the OAuth-authenticated
  * accounts, alias snapshot) is passed in via `CompletionContext`, so the readline
@@ -17,6 +17,8 @@ import { SLASH_COMMANDS } from "./slash";
 import { catalogIds } from "../../ai/model-catalog-compat";
 import { PROVIDER_NAMES } from "../../ai/provider-status";
 import { SUBAGENT_ROLES } from "../../agent/subagents";
+import { skillNames } from "../../skills/catalog";
+import { listThemes } from "./themes";
 
 export interface CompletionContext {
   slashCommands: string[];
@@ -29,8 +31,12 @@ export interface CompletionContext {
   providers: string[];
   roleIds: string[];
   thinkingLevels: string[];
+  /** Resolved skill names (bundled + user/project). Falls back to bundled when omitted. */
+  skillNames?: string[];
   /** Live model ids for a given provider (for `/provider <p> <model>`). */
   modelsForProvider: (provider: string) => string[];
+  /** Sync path suggestions for free-text `@path` mentions (relative to cwd). */
+  mentionPaths?: (prefix: string) => string[];
 }
 
 export interface CompletionResult {
@@ -42,8 +48,17 @@ export interface CompletionResult {
   kind: string;
 }
 
+const PREVIEW_LABEL: Record<string, string> = {
+  command: "Commands",
+  model: "Models",
+  provider: "Providers",
+  role: "Subagent roles",
+  thinking: "Thinking levels",
+  subcommand: "Subcommands",
+  path: "Paths",
+};
 const MAX_COMPLETIONS = 50;
-const THINKING_LEVELS = ["low", "medium", "high"];
+const THINKING_LEVELS = ["minimal", "low", "medium", "high", "xhigh"];
 
 /** Static half of a completion context (no network/config needed). */
 export function staticCompletionContext(): Omit<CompletionContext, "liveModels" | "aliases" | "modelsForProvider"> {
@@ -88,16 +103,41 @@ function rankedModelPool(ctx: CompletionContext): string[] {
 }
 
 /**
- * Compute completions for the current input line. Returns an empty list for
- * non-slash input (free-text prompts are not completed).
+ * Compute completions for the current input line. Slash commands are completed as
+ * before; free-text input stays untouched except for `@path` mentions, which can
+ * surface local relative paths.
  */
 export function complete(line: string, ctx: CompletionContext): CompletionResult {
-  if (!line.startsWith("/")) return { completions: [], token: line, kind: "none" };
-
   const { tokens, trailingSpace } = tokenize(line);
+  if (!line.startsWith("/")) {
+    const token = trailingSpace ? "" : tokens[tokens.length - 1] ?? "";
+    if (token.startsWith("@")) {
+      const prefix = token.slice(1);
+      const pool = (ctx.mentionPaths?.(prefix) ?? []).map(p => (p.startsWith("@") ? p : `@${p}`));
+      return { completions: dedupeCap(prefixHits(pool, token)), token, kind: "path" };
+    }
+    // `$skill` mention completion at ANY position in the line (mention-style;
+    // a leading `$name` is additionally the direct-invocation entrypoint).
+    if (token.startsWith("$")) {
+      const names = ctx.skillNames ?? skillNames();
+      return { completions: dedupeCap(prefixHits(names.map(n => `$${n}`), token)), token, kind: "skill" };
+    }
+    // `/command` mention completion mid-line (the leading-token case is the
+    // dedicated command branch below, which also completes arguments).
+    if (token.startsWith("/")) {
+      return { completions: dedupeCap(prefixHits(ctx.slashCommands, token)), token, kind: "command" };
+    }
+    return { completions: [], token: line, kind: "none" };
+  }
+
   // Completing the command name itself (single token, still typing it).
   if (tokens.length <= 1 && !trailingSpace) {
     const token = tokens[0] ?? "/";
+    if (token.toLowerCase().startsWith("/skill:")) {
+      const prefix = token.slice("/skill:".length);
+      const names = ctx.skillNames ?? skillNames();
+      return { completions: dedupeCap(prefixHits(names.map(n => `/skill:${n}`), `/skill:${prefix}`)), token, kind: "command" };
+    }
     return { completions: dedupeCap(prefixHits(ctx.slashCommands, token)), token, kind: "command" };
   }
 
@@ -116,31 +156,73 @@ export function complete(line: string, ctx: CompletionContext): CompletionResult
   switch (cmd) {
     case "/model": {
       if (token.startsWith("#")) return { completions: [], token, kind: "none" }; // numbered pick
-      if (argIndex === 0) return finish(["save", ...rankedModelPool(ctx)], "model");
-      // `/model save <id>` second arg → models
-      if (argIndex === 1 && tokens[1]?.toLowerCase() === "save") return finish(rankedModelPool(ctx), "model");
+      if (argIndex === 0) return finish(["save", "subagent", "role", "thinking", ...rankedModelPool(ctx)], "model");
+      if (argIndex === 1 && (tokens[1]?.toLowerCase() === "save")) return finish(rankedModelPool(ctx), "model");
+      if (argIndex === 1 && (tokens[1]?.toLowerCase() === "thinking" || tokens[1]?.toLowerCase() === "think")) return finish(ctx.thinkingLevels, "thinking");
+      if (argIndex === 1 && (tokens[1]?.toLowerCase() === "subagent" || tokens[1]?.toLowerCase() === "role")) return finish(ctx.roleIds, "role");
+      if (argIndex === 2 && (tokens[1]?.toLowerCase() === "subagent" || tokens[1]?.toLowerCase() === "role")) return finish(["thinking", ...rankedModelPool(ctx)], "model");
+      if (argIndex === 3 && (tokens[1]?.toLowerCase() === "subagent" || tokens[1]?.toLowerCase() === "role") && (tokens[3]?.toLowerCase() === "thinking" || tokens[3]?.toLowerCase() === "think")) return finish(["inherit", ...ctx.thinkingLevels], "thinking");
       return { completions: [], token, kind: "none" };
     }
-    case "/models":
-      return argIndex === 0 ? finish(["refresh"], "subcommand") : { completions: [], token, kind: "none" };
+    case "/fast":
+      return argIndex === 0 ? finish(["on", "off", "status"], "subcommand") : { completions: [], token, kind: "none" };
     case "/provider": {
-      if (argIndex === 0) return finish(ctx.providers, "provider");
+      const cloud = ["anthropic", "openai", "gemini", "antigravity"];
+      if (argIndex === 0) return finish(["login", "auth", ...ctx.providers], "provider");
+      // `/provider login|auth <name>` → cloud provider names (OAuth-capable).
+      if (argIndex === 1 && (tokens[1]?.toLowerCase() === "login" || tokens[1]?.toLowerCase() === "auth")) return finish(cloud, "provider");
       if (argIndex === 1) return finish(ctx.modelsForProvider(tokens[1] ?? ""), "model");
       return { completions: [], token, kind: "none" };
     }
+    case "/logout":
+      return argIndex === 0 ? finish(["anthropic", "openai", "gemini", "antigravity"], "provider") : { completions: [], token, kind: "none" };
     case "/agents": {
-      if (argIndex === 0) return finish(ctx.roleIds, "role");
-      if (argIndex === 1) return finish(["maxSteps", ...rankedModelPool(ctx)], "model");
-      if (argIndex === 2 && tokens[2]?.toLowerCase() === "maxsteps") return { completions: [], token, kind: "none" };
+      if (argIndex === 0) return finish(["edit", ...ctx.roleIds], "role");
+      if (argIndex === 1) return finish(["reset", "thinking", "maxSteps", ...rankedModelPool(ctx)], "model");
+      if (argIndex === 2 && (tokens[2]?.toLowerCase() === "thinking" || tokens[2]?.toLowerCase() === "think")) return finish(["inherit", ...ctx.thinkingLevels], "thinking");
+      if (argIndex === 2 && (tokens[2]?.toLowerCase() === "maxsteps" || tokens[2]?.toLowerCase() === "steps")) return { completions: [], token, kind: "none" };
+      return { completions: [], token, kind: "none" };
+    }
+    case "/skill":
+      return argIndex === 0 ? finish(ctx.skillNames ?? skillNames(), "subcommand") : { completions: [], token, kind: "none" };
+    case "/roles": {
+      const tiers = ["smol", "slow", "plan"];
+      if (argIndex === 0) return finish(tiers, "role");
+      if (argIndex === 1 && tiers.includes(tokens[1]?.toLowerCase() ?? "")) return finish(rankedModelPool(ctx), "model");
       return { completions: [], token, kind: "none" };
     }
     case "/thinking":
       return argIndex === 0 ? finish(ctx.thinkingLevels, "thinking") : { completions: [], token, kind: "none" };
+    case "/session":
+      return argIndex === 0 ? finish(["info", "delete"], "subcommand") : { completions: [], token, kind: "none" };
+    case "/theme":
+      return argIndex === 0 ? finish(listThemes().map(t => t.name), "subcommand") : { completions: [], token, kind: "none" };
+    case "/login":
+      return argIndex === 0 ? finish(["anthropic", "openai", "gemini", "antigravity"], "provider") : { completions: [], token, kind: "none" };
+    case "/export":
+      return argIndex <= 1 ? finish(["json", "markdown"], "subcommand") : { completions: [], token, kind: "none" };
     default:
       return { completions: [], token, kind: "none" };
   }
 }
 
+/** Compact live preview for slash-command arguments (`/subagent `, `/provider login `, ...). */
+export function formatCompletionPreview(line: string, ctx: CompletionContext, max = 6): string[] {
+  if (max <= 0) return [];
+  const result = complete(line, ctx);
+  if (result.kind === "none" || result.kind === "command" || result.completions.length === 0) return [];
+  const label = PREVIEW_LABEL[result.kind] ?? "Matches";
+  const budget = Math.max(1, max - 1);
+  const shown = result.completions.slice(0, budget);
+  const lines = [`${label}:`, ...shown.map(c => `  ${c}`)];
+  const hidden = result.completions.length - shown.length;
+  if (hidden > 0) {
+    if (lines.length >= max) lines[lines.length - 1] = `  …(+${hidden + 1} more)`;
+    else lines.push(`  …(+${hidden} more)`);
+  }
+  return lines;
+}
+
 /** Longest common prefix of a list (for tab "fill to ambiguity"). */
 export function commonPrefix(items: string[]): string {
   if (items.length === 0) return "";

package/src/tui/components/autopilot-status.ts

@@ -0,0 +1,65 @@
+import chalk from "chalk";
+import { padLineTo } from "./layout";
+import { truncate } from "../terminal";
+
+export interface AutopilotStatusPanelData {
+  task: string;
+  goal: string;
+  eval: string;
+  baseline: string;
+  best: string;
+  attempts: number;
+  kept: number;
+  reverted: number;
+  sinceImprove: number;
+  converged: boolean;
+  recommendation: string;
+}
+
+export function renderAutopilotStatusPanel(
+  data: AutopilotStatusPanelData,
+  opts: { cols?: number; unicode?: boolean; color?: boolean } = {},
+): string[] {
+  const width = Math.max(40, Math.min(120, opts.cols ?? 88));
+  const useColor = opts.color !== false;
+  const unicode = opts.unicode !== false;
+  const ruleChar = unicode ? "─" : "-";
+  const arrow = unicode ? "→" : "->";
+  const keptMark = unicode ? "✓" : "v";
+  const revertedMark = unicode ? "↶" : "r";
+  const status = data.converged
+    ? "CONVERGED"
+    : data.recommendation.startsWith("continue")
+      ? "CONTINUE"
+      : "STOP";
+
+  const yellow = useColor ? chalk.hex("#f2b84b") : (s: string) => s;
+  const title = useColor ? chalk.hex("#f2b84b").bold : (s: string) => s;
+  const green = useColor ? chalk.green : (s: string) => s;
+  const red = useColor ? chalk.red : (s: string) => s;
+  const cyan = useColor ? chalk.cyan : (s: string) => s;
+  const dim = useColor ? chalk.dim : (s: string) => s;
+  const statusPaint = useColor
+    ? status === "CONTINUE"
+      ? chalk.green.bold
+      : status === "CONVERGED"
+        ? chalk.yellow.bold
+        : chalk.red.bold
+    : (s: string) => s;
+
+  const fit = (line: string) => padLineTo(truncate(line, width), width, "left");
+  const rule = yellow(ruleChar.repeat(width));
+  const score = `${dim("score")} ${cyan(data.baseline)} ${dim(arrow)} ${cyan(data.best)}`;
+  const attempts = `${dim("attempts")} ${data.attempts} · ${green(`${keptMark} ${data.kept} kept`)} · ${red(`${revertedMark} ${data.reverted} reverted`)} · patience ${data.sinceImprove}`;
+
+  return [
+    rule,
+    fit(`${title("Autopilot Ratchet")} ${statusPaint(status)}`),
+    fit(`${dim("task")} ${data.task}`),
+    fit(`${dim("eval")} ${data.goal} · ${data.eval}`),
+    fit(score),
+    fit(attempts),
+    fit(`${dim("next")} ${data.recommendation}`),
+    rule,
+  ];
+}

package/src/tui/components/category-index.ts

@@ -0,0 +1,49 @@
+import chalk from "chalk";
+
+export type UiCategory = "progress" | "status" | "done" | "diff" | "subagent" | "code" | "file" | "cmd" | "tool" | "error" | "search";
+
+interface CategoryMeta {
+  token: string;
+  label: string;
+  paint: (s: string) => string;
+}
+
+const META: Record<UiCategory, CategoryMeta> = {
+  progress: { token: "STEP", label: "progress", paint: chalk.cyan.bold },
+  status: { token: "STATUS", label: "status", paint: chalk.cyan.bold },
+  done: { token: "DONE", label: "completed", paint: chalk.green.bold },
+  diff: { token: "DIFF", label: "diff", paint: chalk.magenta.bold },
+  subagent: { token: "AGENT", label: "subagent", paint: chalk.blue.bold },
+  code: { token: "CODE", label: "code block", paint: chalk.cyan.bold },
+  file: { token: "FILE", label: "file path", paint: chalk.yellow.bold },
+  cmd: { token: "CMD", label: "command", paint: chalk.yellow.bold },
+  tool: { token: "TOOL", label: "tool", paint: chalk.magenta.bold },
+  error: { token: "ERR", label: "error", paint: chalk.red.bold },
+  search: { token: "SRCH", label: "search", paint: chalk.green.bold },
+};
+
+export function categoryMeta(category: UiCategory): { token: string; label: string } {
+  const m = META[category];
+  return { token: m.token, label: m.label };
+}
+
+export function categoryBadge(category: UiCategory, opts: { index?: number; color?: boolean } = {}): string {
+  const m = META[category];
+  const n = typeof opts.index === "number" ? `${String(Math.max(1, Math.trunc(opts.index))).padStart(2, "0")}:` : "";
+  const raw = `[${n}${m.token}]`;
+  return opts.color === false ? raw : m.paint(raw);
+}
+
+export function prefixCategory(category: UiCategory, text: string, opts: { index?: number; color?: boolean } = {}): string {
+  return `${categoryBadge(category, opts)} ${text}`;
+}
+
+export function categoryForTool(tool: string): UiCategory {
+  const normalized = (tool || "").toLowerCase();
+  if (normalized === "bash") return "cmd";
+  if (normalized === "read" || normalized === "write") return "file";
+  if (normalized === "edit") return "diff";
+  if (normalized === "search" || normalized === "find") return "search";
+  if (normalized === "task" || normalized.includes("agent")) return "subagent";
+  return "tool";
+}