jeo-code 0.4.5 → 0.4.7

package/src/tui/app.ts

@@ -22,7 +22,7 @@ import type { TaskSubEvent } from "../agent/task-tool";
 import { supportsUnicode } from "./components/capability";
 import { centerBlock, padLineTo, boxBlock, BOX_ASCII, BOX_UNICODE } from "./components/layout";
 import { SECTION_GAP, stackSections } from "./components/section";
-import { resolveTheme, themeGradient, accentPaint, accentShadowPaint, diffPaint } from "./components/themes";
+import { resolveTheme, themeGradient, accentPaint, accentShadowPaint, diffPaint, mutedPaint, cardFillPaint } from "./components/themes";
 import { detectColorLevel, animatedGradientText, ColorLevel } from "./components/color";
 import { formatForgeBox, summarizeForgeInvocation, summarizeForgeResult, fitForgeBoxes, webSearchCardLines, type ForgeSummary } from "./components/forge";
 import { renderJeoStatus, renderStatusBar, renderStatusBox } from "./components/status";
@@ -63,9 +63,11 @@ export interface AgentEventsLike {
   onStep?(step: number): void;
   onAssistant?(raw: string, invocation: { tool: string; arguments?: unknown } | null): void;
   onToolResult?(tool: string, success: boolean, output: string): void;
+  onToolProgress?(tool: string, partial: string): void;
   onNotice?(message: string): void;
   onUsage?(usage: { inputTokens: number; outputTokens: number }): void;
   onModelStream?(textSoFar: string): void;
+  onReasoningStream?(textSoFar: string): void;
   onBudget?(limit: number, reason: string): void;
 
 }
@@ -186,11 +188,19 @@ export class LaunchTui {
   // `"reasoning"` field of the forming tool-call JSON). Shown dim under the HUD while
   // the model responds, then flushed once into scrollback as a `jeo · …` ledger line.
   private streamingReasoning = "";
+  /** Native model thinking text (separate reasoning channel), shown DIMMED while it
+   *  streams and cleared on commit — ephemeral, never flushed (the durable record is the
+   *  action/reply the thinking produced). */
+  private streamingThought = "";
   /** Uniform live-activity text for the live status field (reasoning OR derived fallback). */
   private streamingActivity = "";
   /** Last stream-driven draw (ms epoch) — throttles per-delta repaints to ≤10/s. */
   private lastStreamDraw = 0;
   private flushedReasoning = "";
+  // Live streaming output of the currently-running tool (bash stdout via onToolProgress).
+  // Shown as a DIMMED bounded block while the tool runs; cleared when the formatted
+  // result card lands (onToolResult) — the gjc-style "shaded until complete" effect.
+  private liveToolOutput = "";
   // Ctrl+O history/detail panel. When set, the live inline frame shows this
   // block above the heartbeat; pressing Ctrl+O again clears it and restores the
   // normal activity view. Kept as data, not scrollback text, so it can actually close.
@@ -268,7 +278,14 @@ export class LaunchTui {
     // scrollback (☑ + strikethrough as items complete), so the checklist's history
     // is reviewable. The live pinned plan stays in the frame tail as before.
     if (changed && items.length > 0 && !this.finished) {
-      const card = formatTodoWriteCard(items, { unicode: this.unicode, color: this.theme.color });
+      const card = formatTodoWriteCard(items, {
+        unicode: this.unicode,
+        color: this.theme.color,
+        muted: mutedPaint(this.theme),
+        accent: this.theme.color ? accentPaint(this.theme) : undefined,
+        fill: cardFillPaint(this.theme),
+        width: Math.max(24, Math.min(100, size().cols)),
+      });
       this.appendLedger(card.join("\n") + "\n", "card");
     }
     this.todos = items;
@@ -320,8 +337,10 @@ export class LaunchTui {
         this.hudPhase = "thinking";
         this.retryNotice = null; // a new step starts a fresh model call
         this.streamingReasoning = ""; // fresh model response this step
+        this.streamingThought = "";
         this.streamingActivity = "";
         this.flushedReasoning = "";
+        this.liveToolOutput = ""; // fresh step: no tool output yet
         this.currentStepStartedAt = Date.now();
         this.spinner.updateStep(step, this.footer.maxSteps);
         this.spinner.next();
@@ -353,6 +372,18 @@ export class LaunchTui {
           this.draw();
         }
       },
+      onReasoningStream: textSoFar => {
+        if (this.finished) return;
+        // Native thinking deltas → the SAME transient dimmed block as the JSON-reasoning
+        // path (reuses the screen-safe tail renderer; no new frame structure). Ephemeral:
+        // cleared on commit, never flushed into scrollback.
+        if (textSoFar === this.streamingThought) return;
+        this.streamingThought = textSoFar;
+        if (Date.now() - this.lastStreamDraw >= 100) {
+          this.lastStreamDraw = Date.now();
+          this.draw();
+        }
+      },
       onAssistant: (_raw, invocation) => {
         this.thinking = false; // model replied; now dispatching the tool
         this.retryNotice = null; // the call got through — clear any backoff notice
@@ -365,6 +396,7 @@ export class LaunchTui {
           this.appendLedger(`${name}\n${this.streamingReasoning}\n`, "reasoning");
         }
         this.streamingReasoning = "";
+        this.streamingThought = "";
         this.streamingActivity = "";
         if (invocation && invocation.tool !== "done") {
           this.runningTool = true;
@@ -394,8 +426,17 @@ export class LaunchTui {
           this.hudPhase = "reporting";
         }
       },
+      onToolProgress: (_tool, partial) => {
+        if (this.finished) return;
+        this.liveToolOutput = partial;
+        if (Date.now() - this.lastStreamDraw >= 100) {
+          this.lastStreamDraw = Date.now();
+          this.draw();
+        }
+      },
       onToolResult: (tool, success, output) => {
         this.runningTool = false;
+        this.liveToolOutput = ""; // formatted result card now replaces the live dim output
         if (this.pendingIndex !== null) {
           this.tools.finish(this.pendingIndex, success);
           this.pendingIndex = null;
@@ -417,7 +458,7 @@ export class LaunchTui {
           // the non-TTY summary both show the merged card.
           card.title = `${paintedMark} Bash`;
           card.lines.push(...result.lines);
-          this.flushForgeCard(card);
+          this.flushForgeCard(card, success);
         } else if (card && t === "web_search" && success && webSearchCardLines(output, { unicode: this.unicode })) {
           // gjc-style Web Search card: `✓ Web Search: <provider> · N sources` header
           // over Query / Answer / Sources / Metadata divider sections rebuilt from
@@ -426,12 +467,12 @@ export class LaunchTui {
           const ws = webSearchCardLines(output, { unicode: this.unicode })!;
           card.title = `${paintedMark} Web Search: ${ws.titleMeta}`;
           card.lines = ws.lines;
-          this.flushForgeCard(card);
+          this.flushForgeCard(card, success);
         } else if (card) {
           card.title = `${paintedMark} ${card.title}`;
           if (!success) this.rememberForge(result);
-          this.flushForgeCard(card);
-          if (!success) this.flushForgeCard(result);
+          this.flushForgeCard(card, success);
+          if (!success) this.flushForgeCard(result, false);
         } else {
           // Light tool: one ✓/✗ line, plus a dim result tree for list-shaped output
           // (find/search/ls) and an error card when the tool failed.
@@ -439,7 +480,7 @@ export class LaunchTui {
           this.appendLedger(`${paintedMark} ${target}${suffix}\n${children.map(c => `${c}\n`).join("")}`, "tool");
           if (!success) {
             this.rememberForge(result);
-            this.flushForgeCard(result);
+            this.flushForgeCard(result, false);
           }
         }
         this.draw();
@@ -511,15 +552,22 @@ export class LaunchTui {
   }
 
   private renderLiveUserQueryCard(cols: number): string[] {
-    const text = this.livePromptInput.trim();
+    return this.renderUserCard(this.livePromptInput, cols);
+  }
+
+  /** Render a `user`-labeled query card (orange "user" header over a filled box).
+   *  Shared by the live next-prompt draft and the mid-turn steering flush. */
+  private renderUserCard(rawText: string, cols: number): string[] {
+    const text = (rawText ?? "").trim();
     if (!text) return [];
     const boxWidth = Math.max(24, Math.min(120, cols));
     const inner = Math.max(10, boxWidth - 2);
     const g = this.unicode ? BOX_UNICODE : BOX_ASCII;
-    const accent = this.theme.color ? chalk.hex("#ff6b4a").bold : (s: string) => s;
-    const border = this.theme.color ? chalk.hex("#7f1d1d") : (s: string) => s;
-    const shadow = this.theme.color ? chalk.hex("#451a1a").dim : border;
-    const fill = this.theme.color ? (s: string) => chalk.bgHex("#210b10")(s) : (s: string) => s;
+    const uc = this.theme.userCard;
+    const accent = this.theme.color && uc ? chalk.hex(uc.accent).bold : (s: string) => s;
+    const border = this.theme.color && uc ? chalk.hex(uc.border) : (s: string) => s;
+    const shadow = this.theme.color && uc ? chalk.hex(uc.shadow) : border;
+    const fill = this.theme.color && uc ? (s: string) => chalk.bgHex(uc.fill)(s) : (s: string) => s;
     const body = text
       .split("\n")
       .flatMap(line => wrapTextWithAnsi(line, Math.max(8, inner - 2)))
@@ -537,6 +585,23 @@ export class LaunchTui {
     return [`  ${accent("user")}`, top, ...mid, bottom];
   }
 
+  /** Flush a `user` card into scrollback so a submitted query stays visible there
+   *  (gjc parity), instead of only as the transient HUD turn-title / a status notice.
+   *  Shared by the prompt that STARTS a turn and the mid-turn steering flush. */
+  flushUserCard(text: string): void {
+    const t = (text ?? "").trim();
+    if (!t || this.finished) return;
+    const cols = Math.max(20, size().cols);
+    const lines = this.renderUserCard(t, cols);
+    if (lines.length) this.appendLedger(lines.join("\n"), "card");
+  }
+
+  /** Mid-turn steering query → a `user` card in scrollback (accepted input that is
+   *  now driving the running turn). Alias of {@link flushUserCard}. */
+  flushSteerCard(text: string): void {
+    this.flushUserCard(text);
+  }
+
   /** Append a completed progress-ledger line. In inline mode the line is flushed
    *  straight into normal scrollback ABOVE the live frame, so tmux / terminal
    *  mouse-wheel can review the full progress history mid-turn (gjc-style); the
@@ -686,7 +751,7 @@ export class LaunchTui {
     if (this.finished) return;
     const color = this.theme.color;
     const role = e.role || "subagent";
-    const roleLabel = role.toUpperCase();
+    const roleLabel = e.index && e.total ? `${role.toUpperCase()}[${e.index}/${e.total}]` : role.toUpperCase();
     const badge = categoryBadge("subagent", { color });
     const ok = this.unicode ? "✓" : "v";
     const bad = this.unicode ? "✗" : "x";
@@ -718,7 +783,7 @@ export class LaunchTui {
       case "done":
         this.subagentActive = false;
         this.subagentLive = null;
-        this.appendLedger(`${badge} ${last} ${roleLabel} done${e.success === false ? " (incomplete)" : ""}: ${detail}\n`, "subagent");
+        this.appendLedger(`${badge} ${last} ${roleLabel} done${e.tokens ? ` (${e.tokens.input + e.tokens.output} tok)` : ""}${e.success === false ? " (incomplete)" : ""}: ${detail}\n`, "subagent");
         break;
     }
     this.draw();
@@ -925,16 +990,24 @@ export class LaunchTui {
   /** Flush a completed forge card into scrollback (inline mode) and retire it from the
    *  live array so the in-frame card region and the final summary never repeat it.
    *  Non-inline modes keep the card in `forgeSummaries` for the final static summary. */
-  private flushForgeCard(summary: ForgeSummary): void {
+  private flushForgeCard(summary: ForgeSummary, success?: boolean): void {
     if (!this.inline || this.finished) return;
     const width = Math.max(24, Math.min(120, size().cols));
+    // gjc D2 (state-encoded border): a FAILED card gets a red border so it pops
+    // out of scrollback at a glance; OK/neutral cards keep the theme accent
+    // identity. The ✓/✗ title mark already encodes state, but the border tone
+    // is what the eye catches first when scanning back through history.
+    const errored = success === false && this.theme.color;
+    const paint = errored ? (s: string) => chalk.red(s) : accentPaint(this.theme);
+    const paintShadow = errored ? (s: string) => chalk.dim(chalk.red(s)) : accentShadowPaint(this.theme);
     const lines = formatForgeBox(summary, {
       width,
       maxLines: 12,
       unicode: this.unicode,
-      paint: accentPaint(this.theme),
-      paintShadow: accentShadowPaint(this.theme),
+      paint,
+      paintShadow,
       diffPaint: diffPaint(this.theme),
+      fill: cardFillPaint(this.theme),
       color: this.theme.color,
     });
     this.appendLedger(lines.join("\n") + "\n", "card");
@@ -946,6 +1019,7 @@ export class LaunchTui {
     width: number,
     maxEntries: number,
     anim?: { phase: number; colorLevel: ColorLevel; beat: string },
+    dim = false,
   ): string[] {
     const floor = Math.min(24, width);
     // Fill the available width (cap at formatForgeBox's own 120 ceiling) so an
@@ -962,12 +1036,14 @@ export class LaunchTui {
         paint,
         paintShadow: accentShadowPaint(this.theme),
         diffPaint: diffPaint(this.theme),
+        fill: cardFillPaint(this.theme),
         index: i + 1,
         color: this.theme.color,
+        dim,
         // DNA-flow identity on LIVE cards only: the flowing helix gradient rides
         // the card border and the claw beat marks the title. Flushed/final cards
-        // stay static — scrollback never carries animation frames.
-        ...(anim
+        // stay static. Suppressed while `dim` (in-flight shading takes precedence).
+        ...(anim && !dim
           ? { flow: { palette: DNA_FLOW_PALETTE, phase: anim.phase, colorLevel: anim.colorLevel }, titleMark: anim.beat }
           : {}),
       }));
@@ -1032,6 +1108,41 @@ export class LaunchTui {
     // it is the live heartbeat and must always be visible; the in-flight card gets
     // whatever rows remain above it.
     const tail: string[] = [];
+    // Live reasoning (gjc-style muted thinking): stream the model's forming thought
+    // as a DIMMED, bounded block above the status line. It is transient — flushed
+    // UN-dimmed into scrollback once the model commits to a tool/reply (onAssistant),
+    // so the in-progress trace stays shaded while the final record reads in normal text.
+    const liveThink = this.streamingThought.trim() || this.streamingReasoning.trim();
+    if (isThinking && liveThink) {
+      const wrapW = Math.max(8, Math.min(120, cols) - 2);
+      const wrapped = liveThink
+        .split("\n")
+        .flatMap(l => wrapTextWithAnsi(l, wrapW))
+        .filter(l => l.length > 0);
+      const shown = wrapped.slice(-6); // bottom-anchored tail of the live trace
+      if (shown.length) {
+        tail.push(dim(`${this.unicode ? "│" : "|"} thinking`));
+        for (const l of shown) tail.push(dim(`  ${l}`));
+        tail.push("");
+      }
+    }
+
+    // Live tool output (gjc-style streaming bash stdout): while a tool runs, its
+    // output arrives via onToolProgress and is shown as a DIMMED, bounded tail block.
+    // It is transient — cleared on result, when the formatted forge card takes over.
+    if (this.runningTool && this.liveToolOutput.trim()) {
+      const wrapW = Math.max(8, Math.min(120, cols) - 2);
+      const wrapped = this.liveToolOutput
+        .split("\n")
+        .flatMap(l => wrapTextWithAnsi(l, wrapW))
+        .filter(l => l.length > 0);
+      const shown = wrapped.slice(-8); // bottom-anchored tail of the live output
+      if (shown.length) {
+        tail.push(dim(`${this.unicode ? "│" : "|"} output`));
+        for (const l of shown) tail.push(dim(`  ${l}`));
+        tail.push("");
+      }
+    }
 
     // Live status field: unboxed thinking line + compact metrics row. The model's
     // streamed activity is uniform across providers via streamingActivity and keeps
@@ -1103,7 +1214,7 @@ export class LaunchTui {
       const forgeAnim = isThinking && this.theme.color && colorLevel >= ColorLevel.TrueColor
         ? { phase, colorLevel, beat }
         : undefined;
-      const forgeK = budget > 0 ? fitForgeBoxes(this.renderForge(cols, 2, forgeAnim), budget) : [];
+      const forgeK = budget > 0 ? fitForgeBoxes(this.renderForge(cols, 2, forgeAnim, true), budget) : [];
       if (forgeK.length) {
         frame.push(...forgeK);
         frame.push("");

package/src/tui/components/forge.ts

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { BOX_ASCII, BOX_UNICODE, padLineTo, type BoxGlyphs } from "./layout";
-import { stripAnsi, visibleWidth, animatedGradientText } from "./color";
-import { truncateToWidth } from "./width";
+import { visibleWidth, animatedGradientText } from "./color";
+import { truncateToWidth, wrapTextWithAnsi } from "./width";
 import { lightHighlightLine } from "./code-view";
 import { type UiCategory } from "./category-index";
 
@@ -33,6 +33,16 @@ export interface ForgeBoxOptions {
    *  the FULL padded row so added/removed lines read as background-tinted
    *  stripes — block-level contrast inside the card. */
   diffPaint?: { add: (s: string) => string; del: (s: string) => string };
+  /** Faint card background tint painter — applied to every WHOLE box row (borders
+   *  + content) so the card reads as a panel. Interior coloring uses targeted close
+   *  codes, so the fill spans each row. Identity/omitted = transparent card. Patch
+   *  `diffPaint` rows set their own background and intentionally override it. */
+  fill?: (s: string) => string;
+  /** In-flight shading: render the card as a flat DIMMED block (gjc-style "not done
+   *  yet" look). Strips inner color and wraps every row in `chalk.dim`, so a live
+   *  card reads as shaded until the result arrives and the normal formatted card
+   *  replaces it. Overrides `fill`/`flow` coloring. */
+  dim?: boolean;
 }
 
 const SECRET_VALUE_RE = /(api[_-]?key|authorization|bearer|password|secret|token)(\s*[:=]\s*)(["']?)[^"'\s,}]+/gi;
@@ -421,12 +431,13 @@ export function summarizeForgeResult(tool: string, success: boolean, output: str
 }
 
 function wrapPlainLine(line: string, width: number): string[] {
-  const plain = stripAnsi(line);
   if (width <= 0) return [""];
+  // Wrap by DISPLAY width (SGR-aware, wide-glyph-aware) so CJK/emoji content
+  // breaks on column boundaries and never overflows the card border. The old
+  // `slice(i, i+width)` counted code points, so a Hangul/CJK line (2 cols each)
+  // rendered ~2× the intended width and tore the right edge.
   if (visibleWidth(line) <= width) return [line];
-  const out: string[] = [];
-  for (let i = 0; i < plain.length; i += width) out.push(plain.slice(i, i + width));
-  return out;
+  return wrapTextWithAnsi(line, width);
 }
 
 function borderGlyphs(unicode: boolean | undefined): BoxGlyphs {
@@ -558,5 +569,12 @@ export function formatForgeBox(summary: ForgeSummary, opts: ForgeBoxOptions = {}
     rendered.push(contentRow(`… ${content.length - clipped.length} more lines ${hint}`));
   }
   rendered.push(bottom);
-  return rendered;
+  // In-flight shading takes precedence: strip inner color and dim every row so a
+  // live card reads as a flat shaded block until its formatted result replaces it.
+  if (opts.dim) {
+    return rendered.map(l => chalk.dim(l.replace(/\x1b\[[0-9;]*m/g, "")));
+  }
+  // Faint panel tint: wrap each whole, width-padded row so the card background spans
+  // the full rectangle (borders + content). No-op when no fill painter is supplied.
+  return opts.fill ? rendered.map(opts.fill) : rendered;
 }

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

@@ -115,7 +115,7 @@ export function renderInputFrame(line: string, opts: InputBoxOptions = {}): Inpu
   if (crow - hidden < 0) { visRow = 0; ccol = 0; }
 
   const promptMark = "> ";
-  const paintPrompt = useColor ? (opts.accent ?? chalk.red) : (s: string) => s;
+  const paintPrompt = useColor ? (opts.accent ?? chalk.blueBright) : (s: string) => s;
   const paintGhost = useColor ? chalk.dim : (s: string) => s;
   const body = rows.map((r, i) => {
     const content = placeholderRow ? paintGhost(r) : r;
@@ -123,11 +123,16 @@ export function renderInputFrame(line: string, opts: InputBoxOptions = {}): Inpu
   });
 
   const content = [...body];
+  // Label rows follow the active theme: the attachment hint uses the accent and
+  // the cwd label a dimmed accent (shadow), so the whole box reads in one tone
+  // instead of off-theme cyan/gray.
+  const labelAccent = useColor ? (opts.accent ?? chalk.cyan) : (s: string) => s;
+  const labelMuted = useColor ? (opts.accentShadow ?? chalk.gray) : (s: string) => s;
   if (opts.attachmentLabel) {
-    content.push(useColor ? chalk.cyan(opts.attachmentLabel) : opts.attachmentLabel);
+    content.push(labelAccent(opts.attachmentLabel));
   }
   if (opts.cwdLabel) {
-    content.push(useColor ? chalk.gray(opts.cwdLabel) : opts.cwdLabel);
+    content.push(labelMuted(opts.cwdLabel));
   }
   const glyphs = opts.unicode === false ? BOX_ASCII : BOX_UNICODE;
   // Depth cue: lit top/left edge (bright accent) vs shaded bottom/right edge (dim).

package/src/tui/components/markdown-text.ts

@@ -64,7 +64,13 @@ export function renderMarkdownAnsi(text: string, opts: MarkdownAnsiOptions = {})
       .replace(/`([^`]+)`/g, (_m, code: string) => chalk.cyan(code))
       .replace(/\*\*\*([^\*]+)\*\*\*/g, (_m, t: string) => chalk.bold.italic(t))
       .replace(/\*\*([^\*]+)\*\*/g, (_m, t: string) => chalk.bold(t))
-      .replace(/__([^\_]+)__/g, (_m, t: string) => chalk.bold(t));
+      .replace(/__([^\_]+)__/g, (_m, t: string) => chalk.bold(t))
+      // Single *italic* / _italic_ run AFTER the ***/**/__ passes so the doubles
+      // are already consumed. The `*` form ignores list bullets ("* item" has no
+      // closing `*`); the `_` form is word-boundary guarded so snake_case
+      // identifiers (foo_bar_baz) are never mistaken for emphasis.
+      .replace(/\*([^\s*][^*\n]*?[^\s*]|[^\s*])\*/g, (_m, t: string) => chalk.italic(t))
+      .replace(/(?<![\p{L}\p{N}_])_(?=\S)([^_\n]*?)(?<=\S)_(?![\p{L}\p{N}_])/gu, (_m, t: string) => chalk.italic(t));
 
   const out: string[] = [];
   let inFence = false;
@@ -79,6 +85,9 @@ export function renderMarkdownAnsi(text: string, opts: MarkdownAnsiOptions = {})
     }
     const heading = line.match(/^(#{1,6})\s+(.+)$/);
     if (heading) {
+      // Vertical rhythm: a heading that follows content gets one blank line of
+      // breathing room above it (final-report readability), never a leading blank.
+      if (out.length > 0 && out[out.length - 1]!.trim() !== "") out.push("");
       out.push(accent(styleInline(heading[2]!)));
       continue;
     }

package/src/tui/components/themes.ts

@@ -32,6 +32,16 @@ export interface EvolutionTheme {
    *  `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 };
+  /** User query card palette: themed colors for the mid-turn steering user card. */
+  userCard?: { accent: string; border: string; shadow: string; fill: string };
+  /** Muted foreground for secondary text (done/pending todo items, counts, tree
+   *  connectors). A real readable mid-tone — replaces `chalk.dim`, which washes
+   *  out to near-invisible on dark backgrounds. Falls back to a neutral gray. */
+  muted?: string;
+  /** Faint background tint for tool/todo cards — a subtle panel fill so cards read
+   *  as distinct blocks instead of floating on the terminal background. Falls back
+   *  to `userCard.fill`. No fill when the theme is colorless. */
+  card?: { fill: string };
 }
 
 /** Default diff palette (used when a theme defines none): high-contrast
@@ -44,13 +54,14 @@ export const DEFAULT_DIFF_PALETTE = {
   hunk: "#7dcfff",
 } as const;
 
-const COSMIC: EvolutionTheme = {
+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",
+  userCard: { accent: "#48dbfb", border: "#1b6f8c", shadow: "#0e3c4c", fill: "#081b24" },
 };
 
 const MATRIX: EvolutionTheme = {
@@ -67,6 +78,7 @@ const MATRIX: EvolutionTheme = {
   accent: "#39ff14",
   accentShadow: "#0b6623",
   diff: { add: "#7fff00", del: "#ff5f5f", addBg: "#0c2410", delBg: "#2a1212", hunk: "#00e5a0" },
+  userCard: { accent: "#39ff14", border: "#0b6623", shadow: "#053311", fill: "#031a08" },
 };
 
 const SOLAR: EvolutionTheme = {
@@ -82,6 +94,7 @@ const SOLAR: EvolutionTheme = {
   color: true,
   accent: "#ff8c00",
   accentShadow: "#8a4500",
+  userCard: { accent: "#ff8c00", border: "#8a4500", shadow: "#452200", fill: "#241100" },
 };
 
 const RED_CLAW: EvolutionTheme = {
@@ -97,6 +110,7 @@ const RED_CLAW: EvolutionTheme = {
   color: true,
   accent: "#e25656",
   accentShadow: "#5c0f0f",
+  userCard: { accent: "#e25656", border: "#5c0f0f", shadow: "#2e0707", fill: "#170303" },
 };
 
 const BLUE_CRAB: EvolutionTheme = {
@@ -113,6 +127,7 @@ const BLUE_CRAB: EvolutionTheme = {
   accent: "#0096c7",
   accentShadow: "#023e8a",
   diff: { add: "#06d6a0", del: "#ef476f", addBg: "#0a2922", delBg: "#2b1320", hunk: "#48cae4" },
+  userCard: { accent: "#0096c7", border: "#023e8a", shadow: "#011f45", fill: "#000f24" },
 };
 
 const AURORA: EvolutionTheme = {
@@ -129,6 +144,7 @@ const AURORA: EvolutionTheme = {
   accent: "#3ddad7",
   accentShadow: "#1d5c8f",
   diff: { add: "#16c79a", del: "#fd7c9b", addBg: "#0c2620", delBg: "#2a1626", hunk: "#7c83fd" },
+  userCard: { accent: "#3ddad7", border: "#1d5c8f", shadow: "#0e2e47", fill: "#071724" },
 };
 
 const SYNTHWAVE: EvolutionTheme = {
@@ -145,6 +161,7 @@ const SYNTHWAVE: EvolutionTheme = {
   accent: "#ec38bc",
   accentShadow: "#5b1a8a",
   diff: { add: "#03e9f4", del: "#ff5e99", addBg: "#0a2330", delBg: "#33122a", hunk: "#b388eb" },
+  userCard: { accent: "#ec38bc", border: "#5b1a8a", shadow: "#2d0d45", fill: "#160624" },
 };
 
 const SAKURA: EvolutionTheme = {
@@ -161,6 +178,7 @@ const SAKURA: EvolutionTheme = {
   accent: "#d6336c",
   accentShadow: "#862e59",
   diff: { add: "#37b24d", del: "#e03131", addBg: "#13260f", delBg: "#2b1212", hunk: "#cc5de8" },
+  userCard: { accent: "#d6336c", border: "#862e59", shadow: "#43172c", fill: "#210b16" },
 };
 
 const MONO: EvolutionTheme = {
@@ -267,6 +285,44 @@ export function accentShadowPaint(theme: EvolutionTheme): (s: string) => string
   return (s: string) => chalk.dim(chalk.hex(hex)(s));
 }
 
+/** Default muted foreground when a theme defines no `muted` — a readable mid-gray
+ *  that holds up on dark terminals (unlike ANSI `dim`, which collapses toward the
+ *  background). */
+export const DEFAULT_MUTED = "#9aa0a6";
+
+/** Painter for secondary/muted text. A real mid-tone hue, NOT `chalk.dim` — dim
+ *  renders near-invisible on dark backgrounds (the washed-out done/pending todo
+ *  rows). Identity when the theme is colorless. */
+export function mutedPaint(theme: EvolutionTheme): (s: string) => string {
+  if (!theme.color) return (s: string) => s;
+  const hex = theme.muted ?? DEFAULT_MUTED;
+  return (s: string) => chalk.hex(hex)(s);
+}
+
+/** Lighten a `#rrggbb` hex by a per-channel delta (clamped 0–255). Used to lift a
+ *  near-black `userCard.fill` (tuned for input chrome) into a card tint that reads
+ *  as a distinct panel without becoming loud. */
+export function liftHex(hex: string, delta: number): string {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(hex.trim());
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  const ch = (shift: number) => Math.max(0, Math.min(255, ((n >> shift) & 0xff) + delta));
+  return "#" + [ch(16), ch(8), ch(0)].map(v => v.toString(16).padStart(2, "0")).join("");
+}
+
+/** Painter that applies the theme's faint card background tint, so tool/todo cards
+ *  read as panels. Uses an explicit `card.fill`, else lifts `userCard.fill` (which is
+ *  near-black, tuned for input chrome) by a small delta so the panel separates from
+ *  the terminal background. Identity when the theme is colorless or has no fill. The
+ *  fill wraps whole, width-padded lines whose interior coloring uses targeted close
+ *  codes (never a full `\x1b[0m` reset), so the background spans the row. */
+export function cardFillPaint(theme: EvolutionTheme): (s: string) => string {
+  if (!theme.color) return (s: string) => s;
+  const fill = theme.card?.fill ?? (theme.userCard?.fill ? liftHex(theme.userCard.fill, 12) : undefined);
+  if (!fill) return (s: string) => s;
+  return (s: string) => chalk.bgHex(fill)(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. */

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

@@ -1,4 +1,6 @@
 import chalk from "chalk";
+import { padLineTo } from "./layout";
+import { visibleWidth } from "./color";
 
 export interface TodoCardItem {
   title: string;
@@ -8,40 +10,69 @@ export interface TodoCardItem {
 export interface TodoCardOptions {
   unicode?: boolean;
   color?: boolean;
+  /** Faint card background tint painter — gives the card a panel look so it reads
+   *  as a distinct block. Identity when absent (or colorless). */
+  fill?: (s: string) => string;
+  /** Muted foreground painter for secondary text (done/pending labels, count,
+   *  tree connectors). Replaces `chalk.dim`, which washes out on dark terminals. */
+  muted?: (s: string) => string;
+  /** Accent painter for the in_progress (active) item — the theme's highlight hue,
+   *  applied bold. Defaults to cyan so the active row matches the rest of the theme
+   *  instead of a hardcoded color that clashes on warm/green/red palettes. */
+  accent?: (s: string) => string;
+  /** Panel width: lines pad to this so the fill spans a clean rectangle. Clamped
+   *  to [20,120]; defaults to the longest content row + 2. */
+  width?: number;
 }
 
 /**
  * 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.
+ * pending stays muted. A faint background tint (when a `fill` painter is given)
+ * makes the whole block read as a panel; secondary text uses a real muted hue
+ * instead of ANSI dim so completed rows stay legible. Pure `string[]`; the caller
+ * flushes it into the ledger so the plan's evolution reads as transcript history.
  */
 export function formatTodoWriteCard(items: TodoCardItem[], opts: TodoCardOptions = {}): string[] {
   if (items.length === 0) return [];
   const unicode = opts.unicode !== false;
   const color = opts.color !== false;
+  const fill = opts.fill ?? ((s: string) => s);
+  const muted = color ? (opts.muted ?? chalk.dim) : (s: string) => s;
+  const active = color ? (opts.accent ? (s: string) => chalk.bold(opts.accent!(s)) : chalk.cyan.bold) : (s: string) => s;
   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];
+
+  const rows: string[] = [];
+  rows.push(
+    color
+      ? `${chalk.green(check)} ${chalk.bold("Todo Write")} ${muted(count)}`
+      : `${check} Todo Write ${count}`,
+  );
   items.forEach((item, i) => {
-    const conn = i === items.length - 1 ? ell : tee;
+    const conn = color ? muted(i === items.length - 1 ? ell : tee) : 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}`);
+      const label = color ? chalk.strikethrough(muted(item.title)) : item.title;
+      rows.push(`  ${conn} ${box} ${label}`);
     } else if (item.status === "in_progress") {
-      lines.push(`  ${conn} ${boxOpen} ${color ? chalk.cyan.bold(item.title) : item.title}`);
+      rows.push(`  ${conn} ${boxOpen} ${active(item.title)}`);
     } else {
-      lines.push(`  ${conn} ${boxOpen} ${color ? chalk.dim(item.title) : item.title}`);
+      rows.push(`  ${conn} ${boxOpen} ${color ? muted(item.title) : item.title}`);
     }
   });
-  return lines;
+
+  // Panel: pad each row (with a 1-col left gutter) to a common width and tint the
+  // whole rectangle — only when the caller opts in via `fill`/`width`; otherwise the
+  // bare tree-checklist rows return unchanged (back-compat). visibleWidth ignores
+  // ANSI, and every painter above closes with a TARGETED reset (never `\x1b[0m`), so
+  // the background spans the full row.
+  if (!opts.fill && opts.width === undefined) return rows;
+  const contentWidth = rows.reduce((m, r) => Math.max(m, visibleWidth(r)), 0) + 2;
+  const panelWidth = Math.max(20, Math.min(120, opts.width ?? contentWidth));
+  return rows.map(r => fill(padLineTo(` ${r}`, panelWidth, "left")));
 }