pi-jar 0.1.2 → 0.1.4

package/src/panel.ts

@@ -1,5 +1,6 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { RowCache } from "./row-cache.ts";
 
 export type Paint = (color: string, text: string) => string;
 export interface PanelTab { name: string; render(width: number, fg: Paint): string[] }
@@ -13,6 +14,8 @@ export async function openPanel(ctx: ExtensionContext, tabs: readonly PanelTab[]
     let body: string[] = [];
     let rows = 10;
     let tabHits: { start: number; end: number }[] = [];
+    // The panel repaints on every Pi render while open; its body rows rarely change between frames.
+    const framed = new RowCache();
     const fg: Paint = (color, text) => theme.fg(color as never, text);
     const move = (delta: number) => { scroll = Math.max(0, Math.min(Math.max(0, body.length - rows), scroll + delta)); };
     const select = (index: number) => { tab = (index + tabs.length) % tabs.length; scroll = 0; };
@@ -40,7 +43,8 @@ export async function openPanel(ctx: ExtensionContext, tabs: readonly PanelTab[]
         rows = Math.max(4, (process.stdout.rows ?? 24) - 6);
         body = tabs[tab]!.render(inner, fg);
         scroll = Math.min(scroll, Math.max(0, body.length - rows));
-        const line = (text: string) => fg("dim", "│ ") + truncateToWidth(text, inner) + " ".repeat(Math.max(0, inner - visibleWidth(truncateToWidth(text, inner)))) + fg("dim", " │");
+        framed.begin(`${inner}\0${fg("dim", "│")}`);
+        const line = (text: string) => framed.get(text, (row) => fg("dim", "│ ") + truncateToWidth(row, inner, "...", true) + fg("dim", " │"));
         tabHits = [];
         // Every tab label is name + 2 cells wide ("[name]" or " name "), separated by one space.
         let x = 2;

package/src/plan.ts

@@ -75,6 +75,7 @@ export class PlanMode {
   private reminders = 0;
   private reviewing = false;
   private compacting = false;
+  private contextDirty = true;
   private compactGeneration = 0;
   private executionRestore: (() => Promise<void>) | undefined;
   private executionRunning = false;

package/src/prompt-search.ts

@@ -1,5 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { fuzzyFilter, Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { fuzzyFilter, Key, matchesKey, truncateToWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { cleanText } from "./status.ts";
 
 export interface PastPrompt { text: string; source: "this session" | "earlier session"; at?: number }
@@ -53,9 +53,18 @@ export async function openPromptSearch(ctx: ExtensionContext, prompts: readonly
     let query = "";
     let selected = 0;
     let first = 0;
-    let visible: PastPrompt[] = prompts.slice();
+    // pi-tui's fuzzyFilter takes a mutable array; copy once per overlay, not per keystroke.
+    const pool: PastPrompt[] = prompts.slice();
+    let visible: PastPrompt[] = pool;
     const rows = 10;
-    const filter = () => { visible = query ? fuzzyFilter(prompts, query, (item) => item.text) : prompts.slice(); selected = 0; first = 0; };
+    const filter = () => { visible = query ? fuzzyFilter(pool, query, (item) => item.text) : pool; selected = 0; first = 0; };
+    // Prompts can be several KiB; sanitize each once, not on every repaint.
+    const cleaned = new Map<PastPrompt, string>();
+    const preview = (item: PastPrompt) => {
+      let text = cleaned.get(item);
+      if (text === undefined) cleaned.set(item, text = cleanText(item.text, 400));
+      return text;
+    };
     return {
       invalidate() {},
       handleInput(data: string) {
@@ -79,21 +88,22 @@ export async function openPromptSearch(ctx: ExtensionContext, prompts: readonly
         const inner = w - 4;
         if (selected < first) first = selected;
         if (selected >= first + rows) first = selected - rows + 1;
-        const fit = (text: string) => { const value = truncateToWidth(text, inner); return value + " ".repeat(Math.max(0, inner - visibleWidth(value))); };
         const dim = (text: string) => theme.fg("dim", text);
+        // Rows are exactly `w` wide; only the two borders can overflow a narrow overlay.
         const lines = [
-          theme.fg("accent", "╭─ ⌕ PROMPT HISTORY ") + dim("─".repeat(Math.max(0, w - 21)) + "╮"),
-          dim("│ ") + fit(theme.fg("accent", "› ") + query + "\x1b[7m \x1b[0m" + dim(`  ${visible.length}/${prompts.length}`)) + dim(" │")
+          truncateToWidth(theme.fg("accent", "╭─ ⌕ PROMPT HISTORY ") + dim("─".repeat(Math.max(0, w - 21)) + "╮"), w),
+          dim("│ ") + truncateToWidth(theme.fg("accent", "› ") + query + "\x1b[7m \x1b[0m" + dim(`  ${visible.length}/${prompts.length}`), inner, "...", true) + dim(" │")
         ];
         for (let row = 0; row < rows; row++) {
           const item = visible[first + row];
           const active = first + row === selected;
-          const text = item ? (active ? "❯ " : "  ") + cleanText(item.text, 400) : "";
+          const text = item ? (active ? "❯ " : "  ") + preview(item) : "";
           const tag = item?.source === "earlier session" ? dim(" · earlier") : "";
-          lines.push(dim("│ ") + fit(item ? theme.fg(active ? "accent" : "muted", truncateToWidth(text, Math.max(4, inner - 10))) + tag : "") + dim(" │"));
+          const content = item ? theme.fg(active ? "accent" : "muted", truncateToWidth(text, Math.max(4, inner - 10))) + tag : "";
+          lines.push(dim("│ ") + truncateToWidth(content, inner, "...", true) + dim(" │"));
         }
-        lines.push(dim("╰─ type to filter · ↑↓ select · Enter edit · Esc close " + "─".repeat(Math.max(0, w - 57)) + "╯"));
-        return lines.map((line) => truncateToWidth(line, w));
+        lines.push(truncateToWidth(dim("╰─ type to filter · ↑↓ select · Enter edit · Esc close " + "─".repeat(Math.max(0, w - 57)) + "╯"), w));
+        return lines;
       }
     };
   }, { overlay: true, overlayOptions: { width: "80%", maxHeight: "60%" } });

package/src/row-cache.ts

@@ -0,0 +1,26 @@
+/**
+ * Row memo across consecutive renders. pi-tui re-segments every grapheme on each truncate, and pi-jar's
+ * chrome and overlays repaint on every Pi render (each streamed token) with mostly the same rows, or one
+ * changed row while typing or scrolling. Rows transformed by the previous render are reused while the
+ * scope (width, painter sample) holds, so memory stays bounded by two renders' rows.
+ */
+export class RowCache {
+  private previous = new Map<string, string>();
+  private current = new Map<string, string>();
+  private scope: string | undefined;
+
+  /** Start a render. A different scope drops every cached row. */
+  begin(scope: string): void {
+    this.previous = scope === this.scope ? this.current : new Map();
+    this.current = new Map();
+    this.scope = scope;
+  }
+
+  /** `transform(row)` for this render; `transform` may depend only on the row and the scope. */
+  get(row: string, transform: (row: string) => string): string {
+    let value = this.current.get(row) ?? this.previous.get(row);
+    if (value === undefined) value = transform(row);
+    this.current.set(row, value);
+    return value;
+  }
+}

package/src/session-gallery.ts

@@ -37,6 +37,13 @@ export function sessionWorkflow(jsonl: string): { goal?: string; plan?: string }
     ...(plan ? { plan } : {}) };
 }
 
+/** Goal and plan recorded in one session file; empty for oversized or unreadable files. */
+export async function sessionDetails(path: string, read: (path: string) => Promise<string> = (file) => readFile(file, "utf8"),
+  size: (path: string) => Promise<number> = async (file) => (await stat(file)).size): Promise<{ goal?: string; plan?: string }> {
+  try { return await size(path) <= MAX_SCAN_BYTES ? sessionWorkflow(await read(path)) : {}; }
+  catch { return {}; }
+}
+
 /** Most recent sessions for the project other than the current one, with their goal and plan. */
 export async function recentSessions(sessions: readonly SessionInfo[], current: string | undefined, limit = RECENT_SESSIONS,
   read: (path: string) => Promise<string> = (path) => readFile(path, "utf8"), size: (path: string) => Promise<number> = async (path) => (await stat(path)).size): Promise<RecentSession[]> {
@@ -44,9 +51,7 @@ export async function recentSessions(sessions: readonly SessionInfo[], current:
     .sort((a, b) => b.modified.getTime() - a.modified.getTime()).slice(0, limit);
   return Promise.all(picked.map(async (session) => {
     const title = session.name ? cleanText(session.name, 60) : cleanText(session.firstMessage || sessionDisplayName(undefined, session.id), 60);
-    let workflow: { goal?: string; plan?: string } = {};
-    try { if (await size(session.path) <= MAX_SCAN_BYTES) workflow = sessionWorkflow(await read(session.path)); }
-    catch { /* unreadable session: show it without details */ }
+    const workflow = await sessionDetails(session.path, read, size);
     return { path: session.path, title, modified: session.modified, messages: session.messageCount, ...workflow };
   }));
 }

package/src/session-ui.ts

@@ -1,8 +1,13 @@
 import type { ExtensionContext, SessionInfo } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, truncateToWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { Key, matchesKey, truncateToWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { sessionDisplayName } from "./composer.ts";
+import { iconSet, withIcon } from "./icons.ts";
+import { contentRows, sidebarWidth, splitFrame } from "./split-view.ts";
 import { cleanText } from "./status.ts";
 
+/** Extra per-session facts that need reading the session file; loaded lazily for the selected row only. */
+export interface SessionDetails { goal?: string; plan?: string }
+
 /** Search session titles and first prompts, without exposing raw JSONL contents in the picker. */
 export function filterSessions(sessions: readonly SessionInfo[], query: string): SessionInfo[] {
   const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
@@ -12,7 +17,22 @@ export function filterSessions(sessions: readonly SessionInfo[], query: string):
   });
 }
 
-export async function pickSession(ctx: ExtensionContext, sessions: readonly SessionInfo[], initial = ""): Promise<string | undefined> {
+const two = (value: number) => String(value).padStart(2, "0");
+function age(date: Date, now = Date.now()): string {
+  if (Number.isNaN(date.getTime())) return "";
+  const minutes = Math.max(0, Math.floor((now - date.getTime()) / 60_000));
+  if (minutes < 60) return `${minutes}m`;
+  if (minutes < 1440) return `${Math.floor(minutes / 60)}h`;
+  if (minutes < 43_200) return `${Math.floor(minutes / 1440)}d`;
+  return minutes < 525_600 ? `${Math.floor(minutes / 43_200)}mo` : `${Math.floor(minutes / 525_600)}y`;
+}
+
+// Chrome rows: top border, divider, search row, hint row, bottom border.
+const CHROME = 5;
+
+/** Overlay: searchable sessions on the left, the selected session's details on the right; resolves to the chosen path. */
+export async function pickSession(ctx: ExtensionContext, sessions: readonly SessionInfo[], initial = "",
+  details?: (session: SessionInfo) => Promise<SessionDetails>): Promise<string | undefined> {
   if (!ctx.hasUI || ctx.mode !== "tui") return undefined;
   const indexed = sessions.map((session) => ({
     session,
@@ -30,56 +50,106 @@ export async function pickSession(ctx: ExtensionContext, sessions: readonly Sess
     let selected = 0;
     let first = 0;
     let width = 80;
+    let listRows = contentRows(CHROME, 4);
+    let layout = { top: 1, rows: 0, leftWidth: 0, bodyX: 2, footerTop: 0 };
     let rows = search(query);
-    const pageSize = () => Math.max(2, Math.min(10, Math.floor(((process.stdout.rows ?? 24) - 7) / 2)));
+    let closed = false;
+    // undefined = never requested; null = in flight. Keyed by path so re-filtering keeps loaded details.
+    const cache = new Map<string, SessionDetails | null>();
+    const fg = (color: string, text: string) => theme.fg(color as never, text);
+    const finish = (path: string | undefined) => { closed = true; done(path); };
+    const reveal = () => { first = Math.max(0, Math.min(selected, first), selected - listRows + 1); };
+    const move = (to: number) => { selected = Math.max(0, Math.min(rows.length - 1, to)); reveal(); tui.requestRender(); };
     const refresh = () => { rows = search(query); selected = 0; first = 0; tui.requestRender(); };
+    const load = (session: SessionInfo) => {
+      if (!details || cache.has(session.path)) return;
+      cache.set(session.path, null);
+      // Never awaited: input stays live while the file is read, and late results after close are dropped.
+      const settle = (value: SessionDetails) => { if (closed) return; cache.set(session.path, value); tui.requestRender(); };
+      Promise.resolve().then(() => details(session)).then((value) => settle(value ?? {}), () => settle({}));
+    };
+    // Wrapping a 4 KiB first prompt is the costliest part of a frame; redo it only when its inputs change.
+    let described: { session: SessionInfo; inputs: string; loaded: SessionDetails | null | undefined; lines: string[] } | undefined;
+    const describe = (session: SessionInfo, bodyWidth: number, height: number): string[] => {
+      const date = session.modified;
+      const inputs = `${bodyWidth}\0${height}\0${age(date)}\0${iconSet()}`;
+      const loaded = details ? cache.get(session.path) : undefined;
+      if (described?.session === session && described.inputs === inputs && described.loaded === loaded) return described.lines;
+      const when = Number.isNaN(date.getTime()) ? "unknown"
+        : `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())} ${two(date.getHours())}:${two(date.getMinutes())}` + (age(date) ? ` · ${age(date)} ago` : "");
+      const lines = [
+        fg("accent", truncateToWidth(cleanText(sessionDisplayName(session.name, session.id), 200), bodyWidth)),
+        fg("muted", withIcon("session", cleanText(session.id, 36).slice(0, 8))),
+        fg("muted", withIcon("time", when)),
+        fg("muted", `${session.messageCount} message${session.messageCount === 1 ? "" : "s"}`)
+      ];
+      if (session.cwd) lines.push(fg("muted", withIcon("folder", cleanText(session.cwd, 400))));
+      if (details) {
+        if (!loaded) lines.push(fg("dim", "Loading details…"));
+        else {
+          for (const [key, text] of [["goal", loaded.goal], ["plan", loaded.plan]] as const) {
+            if (text?.trim()) lines.push(...wrapTextWithAnsi(withIcon(key, cleanText(text, 600)), Math.max(1, bodyWidth)).slice(0, 3).map((line) => fg("text", line)));
+          }
+        }
+      }
+      lines.push("", fg("dim", "First prompt"));
+      const prompt = cleanText(session.firstMessage, 4096);
+      lines.push(...(prompt ? wrapTextWithAnsi(prompt, Math.max(1, bodyWidth)).map((line) => fg("muted", line)) : [fg("dim", "No first prompt")]));
+      described = { session, inputs, loaded, lines: lines.slice(0, height).map((line) => truncateToWidth(line, Math.max(0, bodyWidth))) };
+      return described.lines;
+    };
     return {
-      invalidate() {},
+      invalidate() { described = undefined; },
       handleInput(data: string) {
-        if (matchesKey(data, Key.escape)) return done(undefined);
-        if (matchesKey(data, Key.enter)) return done(rows[selected]?.path);
-        if (matchesKey(data, Key.up)) selected = Math.max(0, selected - 1);
-        else if (matchesKey(data, Key.down)) selected = Math.min(rows.length - 1, selected + 1);
-        else if (matchesKey(data, Key.pageUp)) selected = Math.max(0, selected - pageSize());
-        else if (matchesKey(data, Key.pageDown)) selected = Math.min(rows.length - 1, selected + pageSize());
-        else if (matchesKey(data, Key.backspace) || data === "\x7f") { query = query.slice(0, -1); return refresh(); }
-        else if (/^[\x20-\x7e]$/.test(data) && query.length < 100) { query += data; return refresh(); }
-        first = Math.max(0, Math.min(selected, first), selected - pageSize() + 1);
-        tui.requestRender();
+        if (matchesKey(data, Key.escape)) return finish(undefined);
+        if (matchesKey(data, Key.enter)) return finish(rows[selected]?.path);
+        if (matchesKey(data, Key.up)) move(selected - 1);
+        else if (matchesKey(data, Key.down)) move(selected + 1);
+        else if (matchesKey(data, Key.pageUp)) move(selected - listRows);
+        else if (matchesKey(data, Key.pageDown)) move(selected + listRows);
+        else if (matchesKey(data, Key.backspace) || data === "\x7f") { query = query.slice(0, -1); refresh(); }
+        else if (/^[\x20-\x7e]$/.test(data) && query.length < 100) { query += data; refresh(); }
       },
       handleMouse(event: TuiMouseEvent) {
-        if (event.type === "wheel" && event.wheelDelta) {
-          selected = Math.max(0, Math.min(rows.length - 1, selected + Math.sign(event.wheelDelta)));
-          first = Math.max(0, Math.min(selected, first), selected - pageSize() + 1);
-          tui.requestRender(); return { handled: true };
-        }
-        if (event.type !== "click" || event.button !== "left" || event.x >= width) return;
-        const index = first + Math.floor((event.y - 2) / 2);
-        const row = rows[index];
-        if (event.y >= 2 && event.y < 2 + 2 * pageSize() && row) {
-          selected = index; done(row.path); return { handled: true };
-        }
+        if (event.type === "wheel" && event.wheelDelta) { move(selected + Math.sign(event.wheelDelta)); return { handled: true }; }
+        if (event.type !== "click" || event.button !== "left") return;
+        if (event.y === 0 && event.x >= width - 3) { finish(undefined); return { handled: true }; }
+        const row = event.y - layout.top;
+        // Collapsed layouts draw the list in the only pane, so any column inside the frame hits a row.
+        const inList = layout.leftWidth ? event.x < layout.leftWidth + 3 : event.x < width;
+        const index = first + row;
+        if (row < 0 || row >= layout.rows || !inList || !rows[index]) return;
+        // First click selects (details follow); clicking the selected row again resumes it.
+        if (index === selected) finish(rows[index]!.path);
+        else move(index);
+        return { handled: true };
       },
       render(available: number): string[] {
-        width = Math.max(0, available);
-        const fit = (line: string) => truncateToWidth(line, width);
+        width = Math.max(12, available);
+        listRows = contentRows(CHROME, 4);
         selected = Math.max(0, Math.min(selected, rows.length - 1));
-        const lines = [
-          fit(theme.fg("accent", `╭─ SESSIONS · ${rows.length}/${sessions.length} ─`)),
-          fit(theme.fg("muted", `│ Search: ${cleanText(query, 100)}${query ? "" : "(type to filter)"}`))
+        reveal();
+        const leftWidth = sidebarWidth(width, 22, 40);
+        const bodyWidth = leftWidth ? width - leftWidth - 6 : width - 4;
+        const listWidth = leftWidth || bodyWidth;
+        const list = rows.slice(first, first + listRows).map((session, offset) => {
+          const active = first + offset === selected;
+          const when = age(session.modified);
+          const title = truncateToWidth(cleanText(sessionDisplayName(session.name, session.id), 200), Math.max(1, listWidth - 2 - (when ? when.length + 1 : 0)));
+          return fg(active ? "accent" : "muted", (active ? "▌" : " ") + " " + title) + (when ? fg("dim", " " + when) : "");
+        });
+        if (!rows.length) list.push(fg("dim", "No matching sessions"));
+        const session = rows[selected];
+        if (session && leftWidth) load(session);
+        const right = leftWidth ? (session ? describe(session, bodyWidth, listRows) : []) : list;
+        const footer = [
+          fg("muted", `Search: ${cleanText(query, 100)}${query ? "" : fg("dim", "(type to filter)")}`),
+          fg("dim", "Type to search · ↑↓/PgUp/PgDn select · Enter/click again resume · Esc cancel")
         ];
-        for (let i = first; i < Math.min(rows.length, first + pageSize()); i++) {
-          const session = rows[i]!;
-          const title = cleanText(sessionDisplayName(session.name, session.id), 55);
-          const prompt = cleanText(session.firstMessage, 90);
-          const when = Number.isNaN(session.modified.getTime()) ? "" : session.modified.toISOString().slice(0, 10);
-          lines.push(fit(theme.fg(i === selected ? "accent" : "muted", `│ ${i === selected ? "❯" : " "} ${title} · ${when}`)));
-          lines.push(fit(theme.fg("dim", `│     ${prompt || "No first prompt"}`)));
-        }
-        if (!rows.length) lines.push(fit(theme.fg("dim", "│ No matching sessions")));
-        lines.push(fit(theme.fg("dim", "╰─ Type to search · ↑↓/PgUp/PgDn select · Enter resume · Esc cancel")));
-        return lines;
+        const split = splitFrame(theme, width, `${withIcon("session", "SESSIONS")} · ${rows.length}/${sessions.length}`, leftWidth ? list : [], right, footer, listRows, leftWidth);
+        layout = split.layout;
+        return available < width ? split.lines.map((line) => truncateToWidth(line, Math.max(0, available))) : split.lines;
       }
     };
-  });
+  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
 }

package/src/settings-ui.ts

@@ -1,6 +1,7 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { FOOTER_FIELDS, type FooterField } from "./footer-settings.ts";
+import { ICON_SETS } from "./icons.ts";
 import { GOAL_ROUND_CHOICES, type JarAccent, type JarVisualSettings } from "./settings.ts";
 
 const LABELS: Record<FooterField, string> = {
@@ -34,7 +35,7 @@ export async function openJarSettings(
     let width = 64;
     const accents: JarAccent[] = ["follow", ...availableAccents.filter((name): name is JarAccent =>
       name === "default" || ["gray", "pink", "teal", "azure", "violet", "amber"].includes(name))];
-    const fields = () => page === "footer" ? FOOTER_FIELDS.length : page === "pi" ? 5 : 6;
+    const fields = () => page === "footer" ? FOOTER_FIELDS.length : page === "pi" ? 5 : 7;
     const piError = (error: unknown) => ctx.ui.notify("Could not change Pi setting: " + (error as Error).message, "error");
     const pageSize = () => Math.min(fields(), Math.max(4, (process.stdout.rows ?? 24) - 9));
     const firstVisible = () => Math.min(Math.max(0, selected - pageSize() + 1), Math.max(0, fields() - pageSize()));
@@ -61,6 +62,7 @@ export async function openJarSettings(
       else if (index === 3) update({ ...state, mascot: !state.mascot });
       else if (index === 4) update({ ...state, suggestions: !state.suggestions });
       else if (index === 5) update({ ...state, ui: !state.ui });
+      else if (index === 6) update({ ...state, icons: ICON_SETS[(ICON_SETS.indexOf(state.icons) + 1) % ICON_SETS.length]! });
       tui.requestRender();
     };
     const row = (index: number, label: string, value: string, enabled: boolean) => {
@@ -109,12 +111,8 @@ export async function openJarSettings(
       render(available: number): string[] {
         width = Math.max(8, available);
         const state = current();
-        const fit = (text: string) => truncateToWidth(text, width);
-        const line = (text: string) => {
-          const inner = Math.max(0, width - 5);
-          const content = truncateToWidth(text, inner);
-          return fit(theme.fg("dim", "│  ") + content + " ".repeat(Math.max(0, inner - visibleWidth(content))) + theme.fg("dim", " │"));
-        };
+        // Rows are assembled from exact-width parts, so one truncate-and-pad pass per row is enough.
+        const line = (text: string) => theme.fg("dim", "│  ") + truncateToWidth(text, Math.max(0, width - 5), "...", true) + theme.fg("dim", " │");
         const title = " pi-jar · settings ";
         const top = theme.fg("accent", "╭─" + truncateToWidth(title, Math.max(0, width - 6))
           + "─".repeat(Math.max(0, width - 4 - visibleWidth(title))) + "×╮");
@@ -137,17 +135,18 @@ export async function openJarSettings(
             row(2, "Rounded composer", state.composer ? "ON" : "OFF", state.composer),
             row(3, "Ember mascot", state.mascot ? "ON" : "OFF", state.mascot),
             row(4, "Next-prompt suggestions", state.suggestions ? "ON" : "OFF", state.suggestions),
-            row(5, "Pi-jar UI", state.ui ? "ON" : "OFF", state.ui)
+            row(5, "Pi-jar UI", state.ui ? "ON" : "OFF", state.ui),
+            row(6, "Icons (nerd needs a Nerd Font)", state.icons.toUpperCase(), state.icons !== "ascii")
           ];
         const start = firstVisible();
         const rows = allRows.slice(start, start + pageSize());
-        return [fit(top), tabs, divider,
+        return [top, tabs, divider,
           line(theme.fg("accent", page === "footer" ? " FOOTER VISIBILITY" : page === "pi" ? " PI & WORKFLOWS" : " APPEARANCE & MOTION")),
           line(theme.fg("dim", page === "footer" ? ` Footer fields ${start + 1}–${start + rows.length}/${fields()}`
             : page === "pi" ? " Fullscreen mode enables clicks and copy-on-select" : " Accent cycles through loaded themes")),
-          ...rows.map(fit),
+          ...rows,
           line(theme.fg("dim", " Tab: section · ↑↓: choose · Enter/click: change · Esc")),
-          fit(theme.fg("dim", "╰" + "─".repeat(Math.max(0, width - 2)) + "╯"))];
+          theme.fg("dim", "╰" + "─".repeat(Math.max(0, width - 2)) + "╯")];
       }
     };
   });

package/src/settings.ts

@@ -2,6 +2,7 @@ import { existsSync, readFileSync, mkdirSync, renameSync, unlinkSync, writeFileS
 import { join } from "node:path";
 import { ACCENT_NAMES } from "./accent.ts";
 import { DEFAULT_FOOTER_SETTINGS, FOOTER_FIELDS, loadFooterSettings, type FooterSettings } from "./footer-settings.ts";
+import { ICON_SETS, type IconSet } from "./icons.ts";
 
 export type JarAccent = "follow" | "default" | (typeof ACCENT_NAMES)[number];
 export interface JarVisualSettings {
@@ -20,6 +21,8 @@ export interface JarVisualSettings {
   advisor: boolean;
   /** Consult the advisor automatically when the agent repeats a tool call or keeps failing. */
   advisorGates: boolean;
+  /** Glyph set for footer, composer and views: unicode, Nerd Font icons, or plain ascii. */
+  icons: IconSet;
   footer: FooterSettings;
 }
 
@@ -27,7 +30,7 @@ export const GOAL_ROUND_CHOICES = [4, 8, 12, 20] as const;
 
 export const SETTINGS_FILE = "pi-jar-settings.json";
 export function defaultVisualSettings(footer: FooterSettings = DEFAULT_FOOTER_SETTINGS): JarVisualSettings {
-  return { version: 1, accent: "follow", animations: true, ui: true, composer: true, mascot: true, suggestions: true, goalRounds: 8, advisor: true, advisorGates: true, footer: { ...footer } };
+  return { version: 1, accent: "follow", animations: true, ui: true, composer: true, mascot: true, suggestions: true, goalRounds: 8, advisor: true, advisorGates: true, icons: "unicode", footer: { ...footer } };
 }
 
 /** Legacy footer choices are imported only while the new file is absent. Never modify the old file. */
@@ -59,6 +62,7 @@ export function loadVisualSettings(directory: string): JarVisualSettings {
       ? value.goalRounds : fallback.goalRounds,
     advisor: typeof value.advisor === "boolean" ? value.advisor : fallback.advisor,
     advisorGates: typeof value.advisorGates === "boolean" ? value.advisorGates : fallback.advisorGates,
+    icons: ICON_SETS.some((set) => set === value.icons) ? value.icons as IconSet : fallback.icons,
     footer: Object.fromEntries(FOOTER_FIELDS.map((field) => [field,
       typeof footer[field] === "boolean" ? footer[field] : fallback.footer[field]])) as FooterSettings
   };

package/src/shells.ts

@@ -1,10 +1,9 @@
 import { spawn, type ChildProcess } from "node:child_process";
-import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, Text, truncateToWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { Text } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { safeLine } from "./diff-view.ts";
 import { cleanText } from "./status.ts";
-import { contentRows, optionList, sidebarWidth, splitFrame } from "./split-view.ts";
 
 export const SHELL_TOOL = "jar_shell";
 export const SHELL_MESSAGE = "pi-jar.shell";
@@ -54,10 +53,11 @@ export class ShellManager {
   constructor(onEvent: (event: ShellEvent) => void, spawnShell: typeof spawn = spawn) { this.onEvent = onEvent; this.spawnShell = spawnShell; }
 
   list(): ShellJob[] { return [...this.jobs.values()].map(({ job }) => ({ ...job, lines: [...job.lines] })); }
+  /** Read by the footer on every render: one shallow copy per job, never the output lines. */
   summaries(): Array<Omit<ShellJob, "lines">> {
     return [...this.jobs.values()].map(({ job }) => {
       const { lines: _lines, ...summary } = job;
-      return { ...summary };
+      return summary;
     });
   }
   get(id: string): ShellJob | undefined { const entry = this.jobs.get(id); return entry && { ...entry.job, lines: [...entry.job.lines] }; }
@@ -188,13 +188,14 @@ export class ShellManager {
 }
 
 type ShellMeta = Omit<ShellJob, "lines">;
-const elapsed = (job: ShellMeta | ShellJob, now = Date.now()) => {
-  const seconds = Math.max(0, Math.round(((job.endedAt ?? now) - job.startedAt) / 1000));
+/** `12s` / `3m 4s` since `startedAt`, up to `endedAt` once finished. */
+export const elapsed = (span: { startedAt: number; endedAt?: number }, now = Date.now()) => {
+  const seconds = Math.max(0, Math.round(((span.endedAt ?? now) - span.startedAt) / 1000));
   return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
 };
 export const shellState = (job: ShellMeta | ShellJob) => job.status === "running" ? "running"
   : job.status === "exited" ? `exited ${job.exitCode ?? "?"}` : job.status === "failed" ? `failed: ${cleanText(job.error ?? "", 60)}` : "killed";
-const describe = (job: ShellMeta | ShellJob) => `${job.id} · ${job.name} · ${shellState(job)} · ${elapsed(job)}${job.watch ? ` · watch /${job.watch}/${job.matched ? " matched" : ""}` : ""}`;
+export const describe = (job: ShellMeta | ShellJob) => `${job.id} · ${job.name} · ${shellState(job)} · ${elapsed(job)}${job.watch ? ` · watch /${job.watch}/${job.matched ? " matched" : ""}` : ""}`;
 const boundedTail = (lines: readonly string[], limit = MAX_TOOL_OUTPUT_CHARS): string => {
   let size = 0;
   const kept: string[] = [];
@@ -295,80 +296,3 @@ export function registerShells(pi: ExtensionAPI, shells: () => ShellManager | un
     }
   });
 }
-
-const SHELL_ACTIONS = [
-  { key: "x", label: "Kill the selected shell" },
-  { key: "f", label: "Follow the latest output" }
-] as const;
-
-/** Overlay: shells on the left, the selected shell's live output on the right; k kills. */
-export async function openShellsView(ctx: ExtensionContext, manager: ShellManager): Promise<void> {
-  if (!ctx.hasUI || ctx.mode !== "tui") return;
-  if (!manager.summaries().length) { ctx.ui.notify("pi-jar: no background shells (the agent starts them with jar_shell)", "info"); return; }
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
-    let selected = 0;
-    let follow = true;
-    let scroll = 0;
-    let rows = 0;
-    let width = 80;
-    let layout = { top: 1, rows: 0, leftWidth: 0, bodyX: 2, footerTop: 0 };
-    const fg = (color: string, text: string) => theme.fg(color as never, text);
-    const previous = manager.onChange;
-    const timer = setInterval(() => tui.requestRender(), 1000);
-    timer.unref?.();
-    manager.onChange = () => { previous?.(); tui.requestRender(); };
-    const close = () => { clearInterval(timer); manager.onChange = previous; done(); };
-    const component = {
-      invalidate() {},
-      handleInput(data: string) {
-        const jobs = manager.summaries();
-        if (matchesKey(data, Key.escape) || data === "q") return close();
-        if (matchesKey(data, Key.up) || data === "k") selected = Math.max(0, selected - 1);
-        else if (matchesKey(data, Key.down) || data === "j") selected = Math.min(jobs.length - 1, selected + 1);
-        else if (data === "x" || data === "K") { const job = jobs[selected]; if (job) { try { manager.kill(job.id); } catch (error) { ctx.ui.notify("pi-jar: " + String(error), "error"); } } }
-        else if (matchesKey(data, Key.pageUp)) { follow = false; scroll = Math.max(0, scroll - Math.max(1, rows - 2)); }
-        else if (matchesKey(data, Key.pageDown)) scroll += Math.max(1, rows - 2);
-        else if (data === "f" || data === "G") follow = true;
-        tui.requestRender();
-      },
-      handleMouse(event: TuiMouseEvent) {
-        const row = event.y - layout.top;
-        if (event.type === "wheel" && event.wheelDelta) { follow = false; scroll = Math.max(0, scroll + Math.sign(event.wheelDelta) * 3); tui.requestRender(); return { handled: true }; }
-        if (event.type !== "click" || event.button !== "left") return;
-        if (event.y === 0 && event.x >= width - 3) { close(); return { handled: true }; }
-        if (row >= 0 && row < layout.rows && layout.leftWidth && event.x < layout.leftWidth + 3 && row < manager.summaries().length) { selected = row; follow = true; tui.requestRender(); return { handled: true, focus: true }; }
-        const action = SHELL_ACTIONS[event.y - layout.footerTop];
-        if (action) { component.handleInput(action.key); return { handled: true }; }
-      },
-      render(available: number): string[] {
-        width = Math.max(24, available);
-        rows = contentRows(6 + SHELL_ACTIONS.length, 6);
-        const jobs = manager.summaries();
-        selected = Math.min(selected, Math.max(0, jobs.length - 1));
-        const job = jobs[selected];
-        const listWidth = sidebarWidth(width, 20, 34);
-        const bodyWidth = listWidth ? width - listWidth - 6 : width - 4;
-        const output = job ? manager.output(job.id, 400) : [];
-        const maxScroll = Math.max(0, output.length - rows);
-        scroll = follow ? maxScroll : Math.min(scroll, maxScroll);
-        if (scroll >= maxScroll) follow = true;
-        const list = jobs.slice(0, rows).map((item, index) => {
-          const color = item.status === "running" ? "accent" : item.status === "exited" && item.exitCode === 0 ? "success" : item.status === "killed" ? "dim" : "error";
-          const glyph = item.status === "running" ? "●" : item.status === "exited" && item.exitCode === 0 ? "✔" : item.status === "killed" ? "■" : "✖";
-          return fg(index === selected ? "accent" : "muted", (index === selected ? "▌" : " ")) + fg(color, glyph + " ") + fg(index === selected ? "accent" : "muted", truncateToWidth(`${item.id} ${item.name}`, Math.max(4, listWidth - 4)));
-        });
-        const body = output.slice(scroll, scroll + rows).map((line) => fg("muted", truncateToWidth(safeLine(line), bodyWidth)));
-        if (job && !output.length) body.push(fg("dim", "(no output yet)"));
-        const title = `⚙ SHELLS · ${manager.running()} running` + (job ? ` · ${describe(job)}` : "");
-        const footer = [
-          ...optionList(theme, SHELL_ACTIONS.map((item) => item.label), -1, SHELL_ACTIONS.map((item) => item.key)),
-          fg("dim", (job ? "$ " + truncateToWidth(cleanText(job.command, 400), Math.max(8, width - 60)) + "   " : "") + "↑↓ shell · PgUp/PgDn scroll · Esc close")
-        ];
-        const split = splitFrame(theme, width, title, list, body, footer, rows, listWidth);
-        layout = split.layout;
-        return split.lines;
-      }
-    };
-    return component;
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
-}