pi-jar 0.1.2 → 0.1.3

package/src/footer.ts

@@ -3,6 +3,7 @@ import { sep } from "node:path";
 import { sliceByColumn, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
 import { DEFAULT_FOOTER_SETTINGS, type FooterSettings } from "./footer-settings.ts";
 import { roleFrame } from "./animations.ts";
+import { icon, type IconKey, withIcon } from "./icons.ts";
 import type { RoleStatus } from "./roles.ts";
 import { ACTIVE_STATES, cleanText, type JarStatus } from "./status.ts";
 import type { Quota } from "./quota.ts";
@@ -18,8 +19,10 @@ export interface FooterView extends JarStatus {
   settings?: FooterSettings;
   context: string;
   goal?: string;
-  /** pi-jar's own short indicators (changes to review, running shells), shown before extras. */
+  /** pi-jar's own short indicators (changes to review), shown before extras. */
   chips?: readonly string[];
+  /** Live subagents and background shells, one clickable row each. */
+  activity?: readonly FooterActivity[];
   memory?: string;
   cost?: string;
   quota?: Quota;
@@ -30,6 +33,49 @@ export interface FooterView extends JarStatus {
   motionBudget?: number;
 }
 
+export type ActivityState = "queued" | "running" | "done" | "failed" | "stopped";
+export interface FooterActivity {
+  kind: "subagent" | "shell";
+  id: string;
+  name: string;
+  state: ActivityState;
+  /** What it is doing now: the current tool, or the shell command. */
+  detail?: string;
+  /** Right-aligned counters, e.g. `3 tools · 12s`. */
+  stats?: string;
+}
+
+/** A clickable footer region, in the footer component's local cells. */
+export type FooterTarget = { kind: "subagent" | "shell"; id: string } | { kind: "activity" } | { kind: "session" };
+export interface FooterHit { y: number; x0: number; x1: number; target: FooterTarget }
+
+const MAX_ACTIVITY_ROWS = 3;
+const THINKING_ICONS: Record<string, IconKey> = {
+  minimal: "thinkingMinimal", low: "thinkingLow", medium: "thinkingMedium", high: "thinkingHigh", xhigh: "thinkingXhigh", max: "thinkingMax"
+};
+
+/** `ctx 58%` → `◫ 58%`: the icon replaces the word, and ascii keeps the word. */
+const metric = (key: IconKey, word: string, text: string) => withIcon(key, text.startsWith(word + " ") ? text.slice(word.length + 1) : text);
+
+function activityGlyph(state: ActivityState): { glyph: string; color: Color } {
+  if (state === "running") return { glyph: icon("running"), color: "accent" };
+  if (state === "queued") return { glyph: icon("pending"), color: "dim" };
+  if (state === "done") return { glyph: icon("success"), color: "success" };
+  if (state === "failed") return { glyph: icon("error"), color: "error" };
+  return { glyph: icon("stopped"), color: "dim" };
+}
+
+function activityRow(item: FooterActivity, width: number, theme: FooterTheme): string {
+  const { glyph, color } = activityGlyph(item.state);
+  const head = theme.fg(color, glyph) + " " + theme.fg(item.state === "running" ? "accent" : "muted",
+    withIcon(item.kind === "subagent" ? "agent" : "shell", cleanText(item.name, 28)));
+  const stats = item.stats ? theme.fg("dim", cleanText(item.stats, 40)) : "";
+  const room = width - visibleWidth(head) - visibleWidth(stats) - 4;
+  const detail = item.detail && room >= 6 ? "  " + theme.fg("dim", truncateToWidth(cleanText(item.detail, 200), room, "…")) : "";
+  const gap = " ".repeat(Math.max(1, width - visibleWidth(head) - visibleWidth(detail) - visibleWidth(stats)));
+  return truncateToWidth(head + detail + (stats ? gap + stats : ""), width);
+}
+
 function fitCwd(cwd: string, width: number): string {
   if (visibleWidth(cwd) <= width) return cwd;
   return "…" + sliceByColumn(cwd, visibleWidth(cwd) - width + 1, width - 1);
@@ -45,33 +91,50 @@ function roleColor(role: RoleStatus): Color {
 
 /** Every line is bounded in terminal cells; critical role failure takes precedence. */
 export function renderFooter(view: FooterView, width: number, theme: FooterTheme): string[] {
+  return renderFooterLayout(view, width, theme).lines;
+}
+
+/** Footer lines plus the clickable regions (activity rows, the session name) they contain. */
+export function renderFooterLayout(view: FooterView, width: number, theme: FooterTheme): { lines: string[]; hits: FooterHit[] } {
+  const hits: FooterHit[] = [];
+  const lines = footerLines(view, width, theme, hits);
+  return { lines, hits };
+}
+
+function footerLines(view: FooterView, width: number, theme: FooterTheme, hits: FooterHit[]): string[] {
   if (width <= 0) return [];
   const show = view.settings ?? DEFAULT_FOOTER_SETTINGS;
-  if (!view.goal && !Object.entries(show).some(([field, enabled]) => enabled && (field !== "memory" || !!view.memory))) return [];
+  const activity = view.activity ?? [];
+  if (!view.goal && !activity.length && !Object.entries(show).some(([field, enabled]) => enabled && (field !== "memory" || !!view.memory))) return [];
   // Keep tiny terminals unframed so context and urgent role status stay readable.
   const framed = width >= 32;
   const contentWidth = framed ? width - 4 : width;
+  // Local cell offsets of content inside the frame, for click targets.
+  const offsetX = framed ? 2 : 0;
+  const offsetY = framed ? 1 : 0;
   const roles = show.roles ? [...view.roles].sort((a, b) => Number(b.state === "failed") - Number(a.state === "failed")) : [];
   const primary = roles.find((role) => role.state === "failed") ?? roles.find((role) => ACTIVE_STATES.has(role.state));
   const model = cleanText(view.model, 24) || "no-model";
-  const context = cleanText(view.context, 12) || "ctx ?";
+  const context = metric("context", "ctx", cleanText(view.context, 12) || "ctx ?");
   const goal = view.goal ? cleanText(view.goal, 240) : "";
   const quota = view.quota;
-  const windows = [quota?.fiveHour && `5h ${Math.round(quota.fiveHour.used)}%`, quota?.week && `week ${Math.round(quota.week.used)}%`].filter((value): value is string => !!value);
-  const cost = view.cost ? cleanText(view.cost, 20) : undefined;
+  const windowList = [quota?.fiveHour && `5h ${Math.round(quota.fiveHour.used)}%`, quota?.week && `week ${Math.round(quota.week.used)}%`].filter((value): value is string => !!value);
+  const windows = windowList.map((value, index) => index ? value : withIcon("quota", value));
+  const cost = view.cost ? metric("cost", "cost", cleanText(view.cost, 20)) : undefined;
+  const memory = view.memory ? metric("memory", "ram", view.memory) : undefined;
   const prefix = view.demo ? theme.fg("warning", "DEMO") : "";
   const effortColors = {
     off: "thinkingOff", minimal: "thinkingMinimal", low: "thinkingLow", medium: "thinkingMedium",
     high: "thinkingHigh", xhigh: "thinkingXhigh", max: "thinkingMax"
   } as const;
-  const effort = show.effort && view.effort ? theme.fg(effortColors[view.effort], view.effort) : "";
+  const effort = show.effort && view.effort ? theme.fg(effortColors[view.effort], THINKING_ICONS[view.effort] ? withIcon(THINKING_ICONS[view.effort]!, view.effort) : view.effort) : "";
   const firstRole = primary ? `${primary.label} ${roleFrame(primary.state, view.frame, view.animations)}` : undefined;
   const attention = firstRole ?? (show.extras ? view.extras[0] : undefined);
   // At narrow widths reserve the right-hand slot for critical/active status, then context.
-  const modelLabel = show.model ? theme.fg("muted", model) : "";
+  const modelLabel = show.model ? theme.fg("muted", withIcon("model", model)) : "";
   const left = [prefix, modelLabel, effort].filter(Boolean).join(theme.fg("dim", " · "));
   // Context is never dropped; optional metrics move to a second line on medium widths.
-  const metrics = [...(show.context ? [context] : []), ...(show.memory && contentWidth >= 90 && view.memory ? [view.memory] : []), ...(show.cost && contentWidth >= 52 && cost ? [cost] : []), ...(show.quota && contentWidth >= 90 ? windows : [])];
+  const metrics = [...(show.context ? [context] : []), ...(show.memory && contentWidth >= 90 && memory ? [memory] : []), ...(show.cost && contentWidth >= 52 && cost ? [cost] : []), ...(show.quota && contentWidth >= 90 ? windows : [])];
   let right = theme.fg("dim", metrics.join("  ·  "));
   if (contentWidth < 52 && attention && contentWidth >= 26) {
     const room = Math.max(0, contentWidth - Math.min(visibleWidth(left), 12) - visibleWidth(right) - 4);
@@ -87,18 +150,24 @@ export function renderFooter(view: FooterView, width: number, theme: FooterTheme
     if (room >= 3 && beforeEffort) return truncateToWidth(beforeEffort, room) + theme.fg("dim", " · ") + effort;
     return truncateToWidth(beforeEffort || effort, availableLeft);
   })();
-  const name = show.sessionName && view.sessionName ? cleanText(view.sessionName, 128) : "";
+  const name = show.sessionName ? cleanText(view.sessionName || "sessions", 128) : "";
   const rawCwd = show.cwd && view.cwd ? cleanText(view.cwd, 256) : "";
   const home = homedir();
   const cwd = home && rawCwd.startsWith(home + sep) ? `~${rawCwd.slice(home.length)}` : rawCwd;
   let namedLeft = fittedLeft;
   let space = availableLeft - visibleWidth(namedLeft);
-  if (cwd && space >= 7) {
-    const budget = name ? Math.min(24, Math.max(4, Math.floor((space - 6) / 2))) : Math.min(32, space - 3);
-    namedLeft += theme.fg("dim", " · ") + theme.fg("muted", fitCwd(cwd, budget));
+  const folder = icon("folder") ? icon("folder") + " " : "";
+  if (cwd && space >= 7 + folder.length) {
+    const budget = name ? Math.min(24, Math.max(4, Math.floor((space - 6) / 2))) : Math.min(32, space - 3 - folder.length);
+    namedLeft += theme.fg("dim", " · ") + theme.fg("muted", folder + fitCwd(cwd, budget));
     space = availableLeft - visibleWidth(namedLeft);
   }
-  if (name && space >= 7) namedLeft += theme.fg("dim", " · ") + theme.fg("muted", truncateToWidth(name, space - 3, "…"));
+  if (name && space >= 7) {
+    const start = visibleWidth(namedLeft) + 3;
+    const label = truncateToWidth(withIcon("session", name), space - 3, "…");
+    namedLeft += theme.fg("dim", " · ") + theme.fg("muted", label);
+    hits.push({ y: offsetY, x0: offsetX + start, x1: offsetX + start + visibleWidth(label), target: { kind: "session" } });
+  }
   const gap = " ".repeat(Math.max(1, contentWidth - visibleWidth(namedLeft) - visibleWidth(right)));
   const lines = [truncateToWidth(namedLeft + gap + right, contentWidth)];
   if (goal) {
@@ -107,8 +176,16 @@ export function renderFooter(view: FooterView, width: number, theme: FooterTheme
     lines.push(truncateToWidth(goalPrefix + theme.fg("muted", truncateToWidth(goal, room, "…")), contentWidth));
   }
   if (contentWidth < 52) {
-    const small = [...(show.memory && view.memory ? [view.memory] : []), ...(show.quota ? windows : [])];
+    const small = [...(show.memory && memory ? [memory] : []), ...(show.quota ? windows : [])];
     if (small.length && contentWidth >= 26) lines.push(truncateToWidth(theme.fg("dim", small.join("  ·  ")), contentWidth));
+    // Too narrow for rows: one clickable count of live work.
+    const agents = activity.filter((item) => item.kind === "subagent" && (item.state === "running" || item.state === "queued")).length;
+    const shells = activity.filter((item) => item.kind === "shell" && item.state === "running").length;
+    const counts = [agents ? withIcon("subagents", `${agents}`) : "", shells ? withIcon("shell", `${shells}`) : ""].filter(Boolean).join("  ");
+    if (counts) {
+      hits.push({ y: offsetY + lines.length, x0: offsetX, x1: offsetX + contentWidth, target: { kind: "activity" } });
+      lines.push(truncateToWidth(theme.fg("accent", counts), contentWidth));
+    }
     return framed ? frameFooter(lines, width, view, theme) : lines;
   }
 
@@ -123,19 +200,29 @@ export function renderFooter(view: FooterView, width: number, theme: FooterTheme
   const remaining = Math.max(0, view.extras.length - (contentWidth >= 100 ? 2 : 1));
   const extras = show.extras ? view.extras.slice(0, contentWidth >= 100 ? 2 : 1).map((status) => theme.fg("muted", status)) : [];
   if (show.extras && remaining) extras.push(theme.fg("dim", `+${remaining}`));
-  if (show.branch && contentWidth >= 52 && view.branch) extras.push(theme.fg("dim", `git ${cleanText(view.branch, 28)}`));
+  if (show.branch && contentWidth >= 52 && view.branch) extras.push(theme.fg("dim", withIcon("branch", cleanText(view.branch, 28))));
   const chips = (view.chips ?? []).map((chip) => theme.fg("warning", cleanText(chip, 32)));
   const joined = [...segments, ...chips, ...extras].join(theme.fg("dim", "  ·  "));
   if (joined) lines.push(truncateToWidth(joined, contentWidth));
-  if (contentWidth < 90 && ((show.quota && windows.length) || (show.memory && view.memory))) {
-    const summary = [...(show.memory && view.memory ? [view.memory] : []), ...(show.quota ? windows : [])].join("  ·  ");
+  if (contentWidth < 90 && ((show.quota && windows.length) || (show.memory && memory))) {
+    const summary = [...(show.memory && memory ? [memory] : []), ...(show.quota ? windows : [])].join("  ·  ");
     if (summary) lines.push(truncateToWidth(theme.fg("dim", summary), contentWidth));
   }
+  const shown = activity.length > MAX_ACTIVITY_ROWS ? activity.slice(0, MAX_ACTIVITY_ROWS - 1) : activity;
+  for (const item of shown) {
+    hits.push({ y: offsetY + lines.length, x0: offsetX, x1: offsetX + contentWidth, target: { kind: item.kind, id: item.id } });
+    lines.push(activityRow(item, contentWidth, theme));
+  }
+  if (shown.length < activity.length) {
+    hits.push({ y: offsetY + lines.length, x0: offsetX, x1: offsetX + contentWidth, target: { kind: "activity" } });
+    lines.push(truncateToWidth(theme.fg("dim", `  +${activity.length - shown.length} more · ctrl+alt+a to manage`), contentWidth));
+  }
   return framed ? frameFooter(lines, width, view, theme) : lines;
 }
 
 function frameFooter(lines: string[], width: number, view: FooterView, theme: FooterTheme): string[] {
-  const active = (view.settings?.roles ?? true) && view.roles.some((role) => ACTIVE_STATES.has(role.state));
+  const active = ((view.settings?.roles ?? true) && view.roles.some((role) => ACTIVE_STATES.has(role.state)))
+    || !!view.activity?.some((item) => item.state === "running");
   const pulse = active && view.animations ? ["◇", "◈", "◆", "◈"][view.frame % 4] : "◇";
   const top = theme.fg("dim", "╭─") + theme.fg(active ? "accent" : "dim", pulse)
     + theme.fg("dim", "─".repeat(width - 4) + "╮");

package/src/icons.ts

@@ -0,0 +1,57 @@
+/**
+ * Glyph sets for pi-jar chrome, modelled on omp's symbol presets:
+ * - `unicode`: symbols every monospace font ships (default);
+ * - `nerd`: Nerd Font icons (install a Nerd Font, e.g. via `brew install --cask font-jetbrains-mono-nerd-font`);
+ * - `ascii`: no decorative glyphs; key hints spelled out.
+ * Decorative keys may map to "" in `ascii`; always render through `withIcon`.
+ */
+export const ICON_SETS = ["unicode", "nerd", "ascii"] as const;
+export type IconSet = (typeof ICON_SETS)[number];
+
+export type IconKey =
+  | "pi" | "model" | "folder" | "branch" | "context" | "memory" | "cost" | "quota" | "session"
+  | "subagents" | "agent" | "shell" | "changes" | "goal" | "plan" | "tasks" | "time" | "tools" | "roles"
+  | "esc" | "enter" | "tab" | "shiftEnter"
+  | "success" | "error" | "running" | "pending" | "stopped" | "warning"
+  | "thinkingMinimal" | "thinkingLow" | "thinkingMedium" | "thinkingHigh" | "thinkingXhigh" | "thinkingMax";
+
+const UNICODE: Record<IconKey, string> = {
+  pi: "π", model: "⬢", folder: "⌂", branch: "⎇", context: "◫", memory: "▤", cost: "", quota: "◔", session: "◈",
+  subagents: "⧉", agent: "◉", shell: "⚙", changes: "±", goal: "◎", plan: "◆", tasks: "☰", time: "◷", tools: "⚒", roles: "⇄",
+  esc: "⎋", enter: "⏎", tab: "⇥", shiftEnter: "⇧⏎",
+  success: "✔", error: "✖", running: "●", pending: "○", stopped: "■", warning: "⚠",
+  thinkingMinimal: "○", thinkingLow: "◔", thinkingMedium: "◑", thinkingHigh: "◒", thinkingXhigh: "◕", thinkingMax: "◉"
+};
+
+// Code points follow omp's nerd preset (Font Awesome / Codicons / Material Design ranges).
+const NERD: Record<IconKey, string> = {
+  pi: "\u{f0d57}", model: "\uec19", folder: "\uf115", branch: "\uf126", context: "\ue70f", memory: "\u{f035b}",
+  cost: "\uf0d6", quota: "\uf0e4", session: "\u{f02da}",
+  subagents: "\uf0c0", agent: "\uf007", shell: "\uf120", changes: "\uf044", goal: "\uf140", plan: "\uf2d2",
+  tasks: "\uf0ae", time: "\uf017", tools: "\uf0ad", roles: "\u{f04e1}",
+  esc: "\u{f12b7}", enter: "\u{f0311}", tab: "\u{f0312}", shiftEnter: "\u{f0636}\u{f0311}",
+  success: "\uf00c", error: "\uf00d", running: "\uf111", pending: "\uf10c", stopped: "\uf04d", warning: "\uf071",
+  thinkingMinimal: "\u{f0a9e}", thinkingLow: "\u{f0a9f}", thinkingMedium: "\u{f0aa1}", thinkingHigh: "\u{f0aa3}",
+  thinkingXhigh: "\u{f0aa5}", thinkingMax: "\uf06d"
+};
+
+const ASCII: Record<IconKey, string> = {
+  pi: "", model: "", folder: "", branch: "git", context: "ctx", memory: "ram", cost: "cost", quota: "quota", session: "",
+  subagents: "", agent: "", shell: "$", changes: "+/-", goal: "goal", plan: "plan", tasks: "", time: "", tools: "", roles: "",
+  esc: "esc", enter: "enter", tab: "tab", shiftEnter: "shift+enter",
+  success: "ok", error: "x", running: "*", pending: "-", stopped: "#", warning: "!",
+  thinkingMinimal: "", thinkingLow: "", thinkingMedium: "", thinkingHigh: "", thinkingXhigh: "", thinkingMax: ""
+};
+
+const SETS: Record<IconSet, Record<IconKey, string>> = { unicode: UNICODE, nerd: NERD, ascii: ASCII };
+let active: IconSet = "unicode";
+
+/** Process-wide: renderers read the active set on every paint, so a settings change applies on the next frame. */
+export function setIconSet(set: IconSet): void { active = set; }
+export function iconSet(): IconSet { return active; }
+export function icon(key: IconKey): string { return SETS[active][key]; }
+/** `glyph text`, or just `text` when the active set has no glyph for `key`. */
+export function withIcon(key: IconKey, text: string): string {
+  const glyph = SETS[active][key];
+  return glyph ? (text ? glyph + " " + text : glyph) : text;
+}

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

@@ -53,9 +53,11 @@ 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; };
     return {
       invalidate() {},
       handleInput(data: string) {

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 { 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,101 @@ 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({}));
+    };
+    const describe = (session: SessionInfo, bodyWidth: number, height: number): string[] => {
+      const date = session.modified;
+      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) {
+        const loaded = cache.get(session.path);
+        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")]));
+      return lines.slice(0, height).map((line) => truncateToWidth(line, Math.max(0, bodyWidth)));
+    };
     return {
       invalidate() {},
       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) => {
@@ -137,7 +139,8 @@ 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());

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
   };