pi-jar 0.1.2 → 0.1.4

package/src/tasks.ts

@@ -4,19 +4,25 @@ import { cleanText } from "./status.ts";
 export const TASK_ENTRY = "pi-jar.task";
 export const TODO_STATUSES = ["pending", "in_progress", "completed"] as const;
 export type TodoStatus = (typeof TODO_STATUSES)[number];
-/** `done` mirrors `status === "completed"` for callers that only need open/closed. */
-export interface Todo { id: string; title: string; done: boolean; status: TodoStatus; activeForm?: string; details?: string }
-export interface TodoInput { title: string; status: TodoStatus; activeForm?: string }
+/**
+ * `done` mirrors `status === "completed"` for callers that only need open/closed. `parentId` marks a
+ * subtask of a top-level task (one level deep); a parent's status is derived from its subtasks.
+ */
+export interface Todo { id: string; title: string; done: boolean; status: TodoStatus; activeForm?: string; details?: string; parentId?: string }
+/** A parent's own `status` is ignored when it has subtasks. */
+export interface TodoInput { id?: string; title: string; status: TodoStatus; activeForm?: string; details?: string; subtasks?: readonly TodoInput[] }
+export type TodoReplacement = Partial<Omit<TodoInput, "id">>;
+/** Bounds the whole list: parents plus subtasks. */
 export const MAX_TODOS = 50;
 
-interface WrittenTodo { id: string; title: string; status: TodoStatus; activeForm?: string }
+interface WrittenTodo { id: string; title: string; status: TodoStatus; activeForm?: string; details?: string; parentId?: string }
 export type TodoEvent =
-  | { v: 1; op: "add"; id: string; title: string; details?: string }
+  | { v: 1; op: "add"; id: string; title: string; details?: string; parentId?: string }
   | { v: 1; op: "edit"; id: string; title: string }
   | { v: 1; op: "toggle"; id: string; done: boolean }
   | { v: 1; op: "status"; id: string; status: TodoStatus }
   | { v: 1; op: "delete"; id: string }
-  /** Full-list replacement, like a Claude todo write. */
+  /** Full-list replacement, like a Claude todo write. Subtasks follow a parent listed earlier. */
   | { v: 1; op: "write"; items: WrittenTodo[] };
 
 const validId = (id: unknown): id is string => typeof id === "string" && /^[a-zA-Z0-9-]{1,64}$/.test(id);
@@ -25,37 +31,113 @@ const validStatus = (status: unknown): status is TodoStatus => TODO_STATUSES.inc
 const validWrite = (event: Record<string, unknown>): boolean => {
   if (event.v !== 1 || event.op !== "write" || !Array.isArray(event.items) || event.items.length > MAX_TODOS) return false;
   const ids = new Set<string>();
-  let running = 0;
+  const top = new Set<string>();
+  const parents = new Set<string>();
   for (const raw of event.items as unknown[]) {
     const item = raw as Record<string, unknown> | null;
     if (!item || !validId(item.id) || !validTitle(item.title) || !validStatus(item.status) || ids.has(item.id)) return false;
     ids.add(item.id);
-    if (item.status === "in_progress" && ++running > 1) return false;
+    if (item.parentId === undefined) top.add(item.id);
+    else if (validId(item.parentId) && top.has(item.parentId)) parents.add(item.parentId);
+    else return false;
   }
+  // Only leaves run; a parent's in_progress is derived.
+  let running = 0;
+  for (const raw of event.items as Record<string, unknown>[]) if (raw.status === "in_progress" && !parents.has(raw.id as string) && ++running > 1) return false;
   return true;
 };
-const make = (id: string, title: string, status: TodoStatus, activeForm?: unknown, details?: unknown): Todo => ({
+const make = (id: string, title: string, status: TodoStatus, activeForm?: unknown, details?: unknown, parentId?: unknown): Todo => ({
   id, title: cleanText(title, 120), status, done: status === "completed",
   ...(typeof activeForm === "string" && cleanText(activeForm, 80) ? { activeForm: cleanText(activeForm, 80) } : {}),
-  ...(typeof details === "string" && cleanText(details, 240) ? { details: cleanText(details, 240) } : {})
+  ...(typeof details === "string" && cleanText(details, 240) ? { details: cleanText(details, 240) } : {}),
+  ...(typeof parentId === "string" ? { parentId } : {})
 });
+/** Parent rollup: all subtasks completed → completed; any running or partly completed → in_progress. */
+const rolled = (done: number, running: number, total: number): TodoStatus => done === total ? "completed" : running || done ? "in_progress" : "pending";
+/** Top-level tasks in order, each followed by its subtasks; orphans are dropped. */
+const grouped = (items: ReadonlyMap<string, Todo>): Map<string, Todo> => {
+  const kids = new Map<string, Todo[]>();
+  for (const item of items.values()) {
+    if (!item.parentId) continue;
+    const list = kids.get(item.parentId);
+    if (list) list.push(item); else kids.set(item.parentId, [item]);
+  }
+  const next = new Map<string, Todo>();
+  for (const item of items.values()) {
+    if (item.parentId) continue;
+    next.set(item.id, item);
+    for (const kid of kids.get(item.id) ?? []) next.set(kid.id, kid);
+  }
+  return next;
+};
+
+/** Subtask counts for a parent; `{ done: 0, total: 0 }` when it has none. */
+export function todoProgress(items: readonly Todo[], id: string): { done: number; total: number } {
+  let done = 0, total = 0;
+  for (const item of items) if (item.parentId === id) { total++; if (item.done) done++; }
+  return { done, total };
+}
+/** Completion counted over leaf tasks: subtasks plus top-level tasks without subtasks. */
+export function todoTotals(items: readonly Todo[]): { done: number; total: number } {
+  const parents = new Set<string>();
+  for (const item of items) if (item.parentId) parents.add(item.parentId);
+  let done = 0, total = 0;
+  for (const item of items) if (!parents.has(item.id)) { total++; if (item.done) done++; }
+  return { done, total };
+}
 
 /** Session-local, append-only changes: only the current Pi branch is replayed. */
 export class TodoStore {
   private items = new Map<string, Todo>();
   private readonly append: (event: TodoEvent) => void;
   constructor(append: (event: TodoEvent) => void) { this.append = append; }
+  /** Display order: each top-level task is followed by its subtasks. */
   all(): Todo[] { return [...this.items.values()].map((item) => ({ ...item })); }
   get(id: string): Todo | undefined { const item = this.items.get(id); return item && { ...item }; }
-  /** The task being worked on right now, if any. */
-  current(): Todo | undefined { const item = [...this.items.values()].find((todo) => todo.status === "in_progress"); return item && { ...item }; }
+  /** The leaf task being worked on right now, if any. */
+  current(): Todo | undefined {
+    const parents = new Set<string>();
+    for (const item of this.items.values()) if (item.parentId) parents.add(item.parentId);
+    const item = [...this.items.values()].find((todo) => todo.status === "in_progress" && !parents.has(todo.id));
+    return item && { ...item };
+  }
 
+  private children(id: string): Todo[] { return [...this.items.values()].filter((item) => item.parentId === id); }
   private setItemStatus(item: Todo, status: TodoStatus): void {
-    // Exactly one task is in progress: starting one parks the previous one.
+    // Exactly one leaf is in progress: starting one parks the previous one (parents re-derive in rollup).
     if (status === "in_progress") for (const other of this.items.values()) if (other !== item && other.status === "in_progress") { other.status = "pending"; other.done = false; }
     item.status = status;
     item.done = status === "completed";
   }
+  /** Parent actions cascade: start runs the first open subtask, done/open apply to every subtask. */
+  private setTree(item: Todo, status: TodoStatus): boolean {
+    const kids = this.children(item.id);
+    if (!kids.length) this.setItemStatus(item, status);
+    else if (status === "in_progress") {
+      const next = kids.find((kid) => kid.status === "in_progress") ?? kids.find((kid) => kid.status !== "completed");
+      if (!next) return false;
+      this.setItemStatus(next, status);
+    } else for (const kid of kids) this.setItemStatus(kid, status);
+    this.rollup();
+    return true;
+  }
+  private rollup(): void {
+    const counts = new Map<string, { done: number; running: number; total: number }>();
+    for (const item of this.items.values()) {
+      if (!item.parentId) continue;
+      const count = counts.get(item.parentId) ?? { done: 0, running: 0, total: 0 };
+      count.total++;
+      if (item.status === "completed") count.done++;
+      else if (item.status === "in_progress") count.running++;
+      counts.set(item.parentId, count);
+    }
+    for (const [id, count] of counts) {
+      const parent = this.items.get(id);
+      if (!parent) continue;
+      parent.status = rolled(count.done, count.running, count.total);
+      parent.done = parent.status === "completed";
+    }
+  }
 
   apply(raw: unknown): boolean {
     if (!raw || typeof raw !== "object") return false;
@@ -66,31 +148,38 @@ export class TodoStore {
       const next = new Map<string, Todo>();
       for (const raw of event.items as unknown[]) {
         const item = raw as Record<string, unknown>;
-        next.set(item.id as string, make(item.id as string, item.title as string, item.status as TodoStatus, item.activeForm, this.items.get(item.id as string)?.details));
+        next.set(item.id as string, make(item.id as string, item.title as string, item.status as TodoStatus, item.activeForm, item.details ?? this.items.get(item.id as string)?.details, item.parentId));
       }
-      this.items = next;
+      this.items = grouped(next);
+      this.rollup();
       return true;
     }
     if (!validId(event.id)) return false;
     const item = this.items.get(event.id);
     switch (event.op) {
-      case "add":
-        if (!validTitle(event.title) || item) return false;
-        this.items.set(event.id, make(event.id, event.title, "pending", undefined, event.details));
+      case "add": {
+        const parent = validId(event.parentId) ? this.items.get(event.parentId) : undefined;
+        if (!validTitle(event.title) || item || (event.parentId !== undefined && (!parent || parent.parentId))) return false;
+        this.items.set(event.id, make(event.id, event.title, "pending", undefined, event.details, event.parentId));
+        if (parent) { this.items = grouped(this.items); this.rollup(); }
         return true;
+      }
       case "edit":
         if (!validTitle(event.title) || !item) return false;
         item.title = cleanText(event.title, 120);
         return true;
       case "toggle":
         if (typeof event.done !== "boolean" || !item) return false;
-        this.setItemStatus(item, event.done ? "completed" : "pending");
-        return true;
+        return this.setTree(item, event.done ? "completed" : "pending");
       case "status":
         if (!validStatus(event.status) || !item) return false;
-        this.setItemStatus(item, event.status);
+        return this.setTree(item, event.status);
+      case "delete":
+        if (!item) return false;
+        this.items.delete(event.id);
+        for (const kid of this.children(event.id)) this.items.delete(kid.id);
+        this.rollup();
         return true;
-      case "delete": return this.items.delete(event.id);
       default: return false;
     }
   }
@@ -115,38 +204,134 @@ export class TodoStore {
     try { this.append(event); return true; }
     catch { this.items = before; return false; }
   }
-  add(title: string, details?: string): Todo | undefined {
-    if (!validTitle(title)) return undefined;
+  /** Why `add` would be rejected, as a message for the model; undefined when it is valid. */
+  addError(title: string, parentId?: string): string | undefined {
+    if (!validTitle(title)) return "add needs a short, non-empty title.";
+    if (this.items.size >= MAX_TODOS) return `At most ${MAX_TODOS} tasks including subtasks.`;
+    if (parentId === undefined) return undefined;
+    const parent = this.items.get(parentId);
+    if (!parent) return `parent ${parentId} is not a task id from jar_todo list.`;
+    if (parent.parentId) return `parent ${parentId} is a subtask; subtasks nest only one level under a top-level task.`;
+    return undefined;
+  }
+  add(title: string, details?: string, parentId?: string): Todo | undefined {
+    if (this.addError(title, parentId)) return undefined;
     const id = randomUUID();
     const cleanDetails = typeof details === "string" && details.trim() ? cleanText(details, 240) : undefined;
-    return this.commit({ v: 1, op: "add", id, title, ...(cleanDetails ? { details: cleanDetails } : {}) }) ? this.get(id) : undefined;
+    return this.commit({ v: 1, op: "add", id, title, ...(cleanDetails ? { details: cleanDetails } : {}), ...(parentId ? { parentId } : {}) }) ? this.get(id) : undefined;
   }
   /**
-   * Replace the whole list. Items keep their id when an existing task has the same title,
-   * so history and the goal loop see continuity. Returns an error message on invalid input.
+   * Replace the whole list. Items keep their id when an existing task has the same title (subtasks:
+   * within the same parent), so history and the goal loop see continuity. Returns an error message
+   * on invalid input.
    */
   write(inputs: readonly TodoInput[]): string | undefined {
-    if (inputs.length > MAX_TODOS) return `At most ${MAX_TODOS} tasks.`;
-    if (inputs.some((item) => !validTitle(item.title))) return "Every task needs a short, non-empty title.";
-    if (inputs.some((item) => !validStatus(item.status))) return `status must be one of ${TODO_STATUSES.join(", ")}.`;
-    if (inputs.filter((item) => item.status === "in_progress").length > 1) return "Only one task may be in_progress at a time.";
+    const malformed = this.inputError(inputs);
+    if (malformed) return malformed;
+    const flat = inputs.flatMap((item) => [item, ...(item.subtasks ?? [])]);
+    if (flat.length > MAX_TODOS) return `At most ${MAX_TODOS} tasks including subtasks.`;
+    if (inputs.some((item) => item.subtasks?.some((sub) => sub.subtasks?.length))) return "Subtasks cannot have their own subtasks; nest only one level.";
+    if (flat.some((item) => !validTitle(item.title))) return "Every task and subtask needs a short, non-empty title.";
+    if (flat.some((item) => !validStatus(item.status))) return `status must be one of ${TODO_STATUSES.join(", ")}.`;
+    const leaves = inputs.flatMap((item) => item.subtasks?.length ? item.subtasks : [item]);
+    if (leaves.filter((item) => item.status === "in_progress").length > 1) return "Only one task may be in_progress at a time (a parent's status follows its subtasks).";
+    const key = (parentId: string, title: string) => parentId + "\n" + cleanText(title, 120).toLowerCase();
     const free = new Map<string, string[]>();
     for (const item of this.items.values()) {
-      const key = cleanText(item.title, 120).toLowerCase();
-      free.set(key, [...(free.get(key) ?? []), item.id]);
+      const slot = key(item.parentId ?? "", item.title);
+      free.set(slot, [...(free.get(slot) ?? []), item.id]);
     }
-    const items = inputs.map((item): WrittenTodo => {
-      const id = free.get(cleanText(item.title, 120).toLowerCase())?.shift() ?? randomUUID();
+    const entry = (item: TodoInput, id: string, status: TodoStatus, parentId?: string): WrittenTodo => {
       const activeForm = typeof item.activeForm === "string" && item.activeForm.trim() ? item.activeForm : undefined;
-      return { id, title: item.title, status: item.status, ...(activeForm ? { activeForm } : {}) };
-    });
+      const details = item.details ?? this.items.get(id)?.details;
+      return { id, title: item.title, status, ...(activeForm ? { activeForm } : {}), ...(details ? { details } : {}), ...(parentId ? { parentId } : {}) };
+    };
+    const supplied = new Set<string>();
+    for (const item of flat) if (item.id !== undefined) {
+      if (!validId(item.id) || supplied.has(item.id) || !this.items.has(item.id)) return "Explicit ids must be unique existing task ids.";
+      supplied.add(item.id);
+    }
+    const take = (item: TodoInput, parentId: string): string => {
+      if (item.id) return item.id;
+      const ids = free.get(key(parentId, item.title));
+      while (ids?.length) { const id = ids.shift()!; if (!supplied.has(id)) return id; }
+      return randomUUID();
+    };
+    const items: WrittenTodo[] = [];
+    for (const item of inputs) {
+      const id = take(item, "");
+      if (item.id && this.items.get(item.id)?.parentId) return "A task id cannot move to a different parent.";
+      const subtasks = item.subtasks ?? [];
+      const done = subtasks.filter((sub) => sub.status === "completed").length;
+      const running = subtasks.filter((sub) => sub.status === "in_progress").length;
+      items.push(entry(item, id, subtasks.length ? rolled(done, running, subtasks.length) : item.status));
+      for (const sub of subtasks) {
+        if (sub.id && this.items.get(sub.id)?.parentId !== id) return "A task id cannot move to a different parent.";
+        items.push(entry(sub, take(sub, id), sub.status, id));
+      }
+    }
     return this.commit({ v: 1, op: "write", items }) ? undefined : "Could not save the task list.";
   }
+  /** Validate before flattening: malformed runtime input must never erase the current list. */
+  private inputError(inputs: readonly TodoInput[]): string | undefined {
+    if (!Array.isArray(inputs)) return "todos must be an array.";
+    for (const item of inputs) {
+      if (!item || typeof item !== "object" || !validTitle(item.title) || !validStatus(item.status)) return "Every task needs a short, non-empty title and a valid status.";
+      if (item.activeForm !== undefined && typeof item.activeForm !== "string") return "activeForm must be a string.";
+      if (item.details !== undefined && typeof item.details !== "string") return "details must be a string.";
+      if (item.subtasks !== undefined) {
+        if (!Array.isArray(item.subtasks)) return "subtasks must be an array.";
+        for (const sub of item.subtasks) {
+          if (!sub || typeof sub !== "object") return "Every subtask must be an object.";
+          if (sub.subtasks !== undefined && (!Array.isArray(sub.subtasks) || sub.subtasks.length)) return "Subtasks cannot have their own subtasks; nest only one level.";
+        }
+        const error = this.inputError(item.subtasks);
+        if (error) return error;
+      }
+    }
+    return undefined;
+  }
+  private snapshot(): TodoInput[] {
+    return this.all().filter((item) => !item.parentId).map((item) => ({
+      id: item.id, title: item.title, status: item.status, activeForm: item.activeForm,
+      subtasks: this.children(item.id).map((sub) => ({ id: sub.id, title: sub.title, status: sub.status, activeForm: sub.activeForm }))
+    }));
+  }
+  /** Atomically append a batch; unaffected ids and leaf statuses are retained. */
+  appendTodos(inputs: readonly TodoInput[], parentId?: string): string | undefined {
+    const error = this.inputError(inputs);
+    if (error) return error;
+    if (!inputs.length) return "append needs at least one task.";
+    if (inputs.some((item) => item.id !== undefined || item.subtasks?.some((sub) => sub.id !== undefined))) return "Appended tasks must not supply existing ids.";
+    const next = this.snapshot();
+    if (parentId !== undefined) {
+      const parent = next.find((item) => item.id === parentId);
+      if (!parent) return "parent must be an existing top-level task id.";
+      if (inputs.some((item) => item.subtasks?.length)) return "Subtasks cannot have their own subtasks; nest only one level.";
+      parent.subtasks = [...(parent.subtasks ?? []), ...inputs];
+    } else next.push(...inputs);
+    return this.write(next);
+  }
+  /** Replace only the addressed task. Omitted fields and subtasks are preserved. */
+  replace(id: string, replacement: TodoReplacement): string | undefined {
+    if (!this.items.has(id)) return "replace needs a valid existing task id.";
+    if (!replacement || typeof replacement !== "object" || Array.isArray(replacement)) return "replace needs task fields.";
+    if ("id" in replacement && replacement.id !== id) return "Replacement id must match the addressed task.";
+    if (!Object.keys(replacement).some((key) => ["title", "status", "activeForm", "subtasks"].includes(key))) return "replace needs at least one task field.";
+    const next = this.snapshot();
+    const target = next.flatMap((item) => [item, ...(item.subtasks ?? [])]).find((item) => item.id === id)!;
+    if (this.items.get(id)?.parentId && replacement.subtasks?.length) return "Subtasks cannot have their own subtasks; nest only one level.";
+    Object.assign(target, replacement, { id });
+    return this.write(next);
+  }
   edit(id: string, title: string): boolean { return this.commit({ v: 1, op: "edit", id, title }); }
+  /** On a parent, start runs its first open subtask; done/open complete or reopen all subtasks. */
   setStatus(id: string, status: TodoStatus): boolean {
     const item = this.items.get(id);
     if (!item) return false;
-    return item.status === status || this.commit({ v: 1, op: "status", id, status });
+    const kids = status === "in_progress" ? this.children(id) : [];
+    const unchanged = kids.length ? kids.some((kid) => kid.status === "in_progress") : item.status === status;
+    return unchanged || this.commit({ v: 1, op: "status", id, status });
   }
   setDone(id: string, done: boolean): boolean {
     const item = this.items.get(id);
@@ -157,6 +342,7 @@ export class TodoStore {
     const item = this.items.get(id);
     return !!item && this.setDone(id, !item.done);
   }
+  /** Deleting a parent deletes its subtasks. */
   delete(id: string): boolean { return this.commit({ v: 1, op: "delete", id }); }
 }
 

package/src/welcome.ts

@@ -1,6 +1,7 @@
 import { sliceByColumn, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { FLAME_RAMP, FLAME_WIDTH, flameFrame, rgb, supportsTruecolor } from "./flame.ts";
 import { cleanText } from "./status.ts";
+import { iconSet, withIcon } from "./icons.ts";
 
 export type WelcomeAction = "settings" | "refresh" | "roles" | "plan" | "goal" | `resume:${number}`;
 
@@ -89,8 +90,11 @@ const center = (line: string, width: number) => {
   const left = Math.floor(room / 2);
   return " ".repeat(left) + line + " ".repeat(room - left);
 };
+// truncateToWidth re-segments every grapheme even when a line already fits; visibleWidth is
+// memoized by Pi, so measure first and only truncate real overflow (same output either way).
+const fitTo = (line: string, width: number) => visibleWidth(line) <= width ? line : truncateToWidth(line, width);
 const fixedCell = (line: string, width: number) => {
-  const value = truncateToWidth(line, width);
+  const value = fitTo(line, width);
   return value + " ".repeat(Math.max(0, width - visibleWidth(value)));
 };
 
@@ -157,12 +161,12 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
   const label = (name: string, value: string, color: WelcomeColor = "muted") =>
     fg("dim", name.padEnd(labelWidth)) + fg(color, cleanText(value, 120));
 
-  const header = [fg("accent", "pi-jar" + (info.version ? " " + info.version : "")),
-    info.model ? fg("muted", cleanText(info.model, 40)) : fg("dim", "no model"),
+  const header = [fg("accent", withIcon("pi", "pi-jar" + (info.version ? " " + info.version : ""))),
+    info.model ? fg("muted", withIcon("model", cleanText(info.model, 40))) : fg("dim", "no model"),
     info.effort && info.effort !== "off" ? fg("muted", info.effort) : "",
     info.activeRole ? fg("warning", "role:" + cleanText(info.activeRole, 16)) : ""].filter(Boolean).join(fg("dim", " · "));
 
-  const git = info.branch ? "git " + cleanText(info.branch, 24) + (info.dirty ? " · dirty" : "") : "git unavailable";
+  const git = info.branch ? withIcon("branch", cleanText(info.branch, 24)) + (info.dirty ? " · dirty" : "") : withIcon("branch", "unavailable");
   const quota = info.quota != null ? `quota ${Math.round(info.quota)}%` : `quota ${info.quotaEnabled ? "unavailable" : "off"}`;
   const plan = info.plan?.enabled ? "◆ planning" + (info.plan.title ? " · " + info.plan.title : "")
     : info.plan?.title ? "last · " + info.plan.title + ` (${info.plan.steps} steps)` : "none · /plan <idea>";
@@ -185,7 +189,7 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
     cell(center(fg("dim", "— welcome to ") + fg("accent", "pi-jar") + fg("dim", " —"), inner)),
     cell(""),
     divider,
-    cell(label("PROJECT", (info.project || "unavailable") + " · " + git, info.dirty ? "warning" : "muted")),
+    cell(label("PROJECT", withIcon("folder", info.project || "unavailable") + " · " + git, info.dirty ? "warning" : "muted")),
     cell(label("SESSION", [info.context ?? "ctx ?", quota, info.cost ?? ""].filter(Boolean).join(" · "))),
     divider,
     cell(label("PLAN", plan, info.plan?.enabled ? "warning" : "muted")),
@@ -203,6 +207,21 @@ function card(width: number, fg: Paint, info: WelcomeInfo): string[] {
   ];
 }
 
+const CARD_COLORS: readonly WelcomeColor[] = ["accent", "warning", "error", "muted", "dim"];
+let cardCache: { key: string; lines: string[]; widths: number[] } | undefined;
+
+/** The card only changes with its inputs and theme; the flame beside it repaints every tick. */
+function cachedCard(width: number, fg: Paint, info: WelcomeInfo, inputs: string): { lines: string[]; widths: number[] } {
+  const key = `${width}\0${inputs}`;
+  if (cardCache?.key !== key) {
+    const lines = card(width, fg, info);
+    cardCache = { key, lines, widths: lines.map((line) => visibleWidth(line)) };
+  }
+  return cardCache;
+}
+/** Pi repaints the welcome on every render, not only on flame ticks; identical inputs reuse the last lines. */
+let welcomeCache: { key: string; lines: string[] } | undefined;
+
 /** Which welcome action (if any) sits under a zero-based cell in the rendered lines. */
 export function welcomeHit(lines: readonly string[], x: number, y: number): WelcomeAction | undefined {
   const line = lines[y];
@@ -227,10 +246,17 @@ export function welcomeSettingsHit(lines: readonly string[], x: number, y: numbe
 
 export function welcomeLines(width: number, frame: number, fg: Paint, info: WelcomeInfo = {}): string[] {
   if (width <= 0) return [];
-  const fit = (line: string) => truncateToWidth(line, width);
+  const inputs = `${supportsTruecolor()}\0${iconSet()}\0${CARD_COLORS.map((color) => fg(color, "x")).join("")}\0${JSON.stringify(info)}`;
+  const key = `${width}\0${frame}\0${inputs}`;
+  if (welcomeCache?.key !== key) welcomeCache = { key, lines: renderWelcome(width, frame, fg, info, inputs) };
+  return welcomeCache.lines.slice();
+}
+
+function renderWelcome(width: number, frame: number, fg: Paint, info: WelcomeInfo, inputs: string): string[] {
   const seed = info.flameSeed ?? 1;
   const flame = flameFrame(frame, seed, (color, text) => fg(color, text));
   if (width < 32) {
+    const fit = (line: string) => fitTo(line, width);
     const start = Math.max(0, Math.floor((FLAME_WIDTH - width) / 2));
     return [
       ...flame.slice(4).map((line) => fit(sliceByColumn(line, start, Math.min(width, FLAME_WIDTH)))),
@@ -242,19 +268,26 @@ export function welcomeLines(width: number, frame: number, fg: Paint, info: Welc
     ];
   }
   const wide = width >= 72;
-  const flameArt = flame.map((line) => center(fixedCell(line, FLAME_WIDTH), ART_WIDTH));
+  // FlameSim rows are exactly FLAME_WIDTH single-cell glyphs, so center them without measuring:
+  // re-measuring freshly colored rows every 150 ms tick was most of the welcome's render time.
+  const flameLeft = " ".repeat(Math.floor((ART_WIDTH - FLAME_WIDTH) / 2));
+  const flameRight = " ".repeat(ART_WIDTH - FLAME_WIDTH - flameLeft.length);
+  const flameArt = flame.map((line) => flameLeft + line + flameRight);
   if (!wide) {
-    const art = [...flame.slice(2).map((line) => center(fixedCell(line, FLAME_WIDTH), Math.min(width, ART_WIDTH))),
-      ...PI_COMPACT.map((line) => fg("accent", center(line, Math.min(width, ART_WIDTH))))];
-    return [...art.map(fit), ...card(width, fg, info).map(fit), ""];
+    // width >= 32 here, so ART_WIDTH-wide art rows always fit.
+    const art = [...flameArt.slice(2), ...PI_COMPACT.map((line) => fg("accent", center(line, ART_WIDTH)))];
+    const details = cachedCard(width, fg, info, inputs);
+    return [...art, ...details.lines.map((line, index) => details.widths[index]! <= width ? line : truncateToWidth(line, width)), ""];
   }
   const art = [...flameArt, ...PI_LARGE.map((line) => fg("accent", center(fixedCell(line, 21), ART_WIDTH)))];
-  const details = card(width - ART_WIDTH - 2, fg, info);
-  const topPad = Math.max(0, Math.floor((details.length - art.length) / 2));
+  const details = cachedCard(width - ART_WIDTH - 2, fg, info, inputs);
+  const topPad = Math.max(0, Math.floor((details.lines.length - art.length) / 2));
   const artRows = [...Array.from({ length: topPad }, () => " ".repeat(ART_WIDTH)), ...art];
-  const merged = Array.from({ length: Math.max(artRows.length, details.length) }, (_, index) => {
+  const merged = Array.from({ length: Math.max(artRows.length, details.lines.length) }, (_, index) => {
     const left = artRows[index] ?? " ".repeat(ART_WIDTH);
-    return fit(left + "  " + (details[index] ?? ""));
+    const right = details.lines[index] ?? "";
+    // Every art row is ART_WIDTH cells and card widths are measured once per card.
+    return ART_WIDTH + 2 + (details.widths[index] ?? 0) <= width ? left + "  " + right : truncateToWidth(left + "  " + right, width);
   });
   return [...merged, "", ""];
 }

package/src/working.ts

@@ -1,3 +1,4 @@
+import { icon } from "./icons.ts";
 import { cleanText } from "./status.ts";
 
 export type WorkingPhase = "idle" | "generating" | "tool" | "waiting";
@@ -54,7 +55,8 @@ export class WorkingState {
     const symbols = phase === "tool" ? ["◐", "◓", "◑", "◒"] : phase === "generating" ? ["✢", "✣", "✤", "✣"] : ["✢"];
     const frames = animations ? symbols.map((symbol) => fg(color, symbol)) : [fg(color, symbols[0] ?? "✢")];
     const details = phase === "idle" || this.startedAt === undefined ? "" :
-      ` (${duration(elapsed)}${this.outputTokens ? ` · ↓ ${tokenCount(this.outputTokens)} tokens` : ""}${effort && effort !== "off" ? ` · ${effort} effort` : ""})`;
+      ` (${duration(elapsed)}${this.outputTokens ? ` · ↓ ${tokenCount(this.outputTokens)} tokens` : ""}${effort && effort !== "off" ? ` · ${effort} effort` : ""}`
+      + `${phase === "waiting" ? "" : ` · ${icon("esc") === "esc" ? "esc" : icon("esc") + " esc"} to interrupt`})`;
     return { message: word ? fg(color, word) + fg("muted", details) : undefined, frames, color };
   }
 }