pi-jar 0.2.5 → 0.2.7

package/README.md

@@ -64,7 +64,8 @@ Pi only delivers mouse events in its **fullscreen** TUI mode. In regular mode th
 | `/jar` · `/jar settings` | Visual and workflow preferences. |
 | `/jar status` | One-line status summary. |
 | `/jar perf` | Long-session diagnostics on demand: branch entries, context sampling, parent and child RSS, retained/hibernated subagents and recovery worktrees, render requests vs. frames, shell output, discussion and quota cache. |
-| `/jar tasks [list\|add\|done\|open\|edit\|delete]` | Human view/editor for the agent's checklist. |
+| `/jar tasks [list\|add\|done\|open\|edit\|delete]` | Searchable, scrollable checklist; ←/→ folds/unfolds subtasks. |
+| `/jar tasks collapse\|expand\|toggle` · `/jar tasks scroll N` | Collapse/expand the compact task widget or scroll it by N rows. |
 | `/jar history` | Read-only conversation timeline for the active branch. |
 | `/diff` | Review, accept or revert the files the agent changed. |
 | `/jar activity` · `/jar shells` | Subagents and background shells: live transcript/output, stop or kill. |
@@ -90,6 +91,14 @@ Pi only delivers mouse events in its **fullscreen** TUI mode. In regular mode th
 | <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>H</kbd> | Search earlier prompts into the composer |
 | <kbd>Tab</kbd> / <kbd>→</kbd> in an empty composer | Accept the dim suggestion into the input (it is not sent) |
 
+## Popup navigation
+
+Pi-jar questions (`jar_ask`) sit at the bottom above other pi-jar popups, which resume when the question finishes. Their compact option list supports ↑/↓ selection, PgUp/PgDn or wheel scrolling, and shows descriptions for the selected option only.
+
+Pi-jar popups stay within the terminal viewport, including after resizing. Model, fallback, alias, theme and profile pickers filter as you type; use ↑/↓, PgUp/PgDn or the mouse wheel to move and Enter to choose. In Roles and Tasks, press `/` to search the full list, Enter to apply, and Esc while searching to clear it. Other pi-jar views support `/` to filter popup content (History and Changes retain their own search). Oversized popup chrome scrolls with the wheel or Ctrl+PgUp/PgDn.
+
+The task widget starts collapsed to a one-line summary. In fullscreen, click its heading to expand/collapse and wheel-scroll the expanded list. It uses at most a quarter of the terminal height. In regular mode use `/jar tasks expand`, `/jar tasks collapse`, or `/jar tasks scroll N`; `/jar tasks` opens the full editor, where ←/→ folds/unfolds a parent's subtasks.
+
 ## Profiles
 
 Profiles keep separate themes, appearance settings, and model-role configurations. **Default** preserves your existing setup.

package/extensions/index.ts

@@ -10,7 +10,8 @@ import type { DelegateController } from "../src/delegate.ts";
 import { ComposerStyle } from "../src/composer.ts";
 import { installCompactBuiltinTools } from "../src/compact-tools.ts";
 import { WELCOME_INTERVAL_MS } from "../src/animations.ts";
-import { promptText } from "../src/dialogs.ts";
+import { promptText, selectPopup } from "../src/dialogs.ts";
+import { taskWidget, type TaskWidgetState } from "../src/task-widget.ts";
 import { renderFooterLayout, type ActivityState, type FooterActivity, type FooterHit, type FooterTarget } from "../src/footer.ts";
 import { openJarHistory } from "../src/history-ui.ts";
 import { GOAL_ENTRY, GoalStore } from "../src/goals.ts";
@@ -35,8 +36,8 @@ import { registerSuggestions, SuggestionState } from "../src/suggest.ts";
 import { createDemoRoles } from "../src/roles.ts";
 import { ACTIVE_STATES, cleanText, collectStatuses, type JarRole } from "../src/status.ts";
 import { manageTasks } from "../src/tasks-ui.ts";
-import { registerTaskTool, todoRow } from "../src/task-tool.ts";
-import { TASK_ENTRY, TodoStore, todoProgress, todoTotals } from "../src/tasks.ts";
+import { registerTaskTool } from "../src/task-tool.ts";
+import { TASK_ENTRY, TodoStore, todoTotals } from "../src/tasks.ts";
 import { formatCost, sessionCost } from "../src/usage.ts";
 import { branchCalls, compactForBudget, CONTEXT_CONTINUATION, ContextBudgetGuard, providerCall, resumeAfterBudget } from "../src/context-budget.ts";
 import { WorkingState } from "../src/working.ts";
@@ -168,6 +169,7 @@ export default function piJar(pi: ExtensionAPI): void {
 
   // A finished list stays visible (all struck through) until the user's next prompt, like Claude.
   let todosAcknowledged = false;
+  const taskWidgetState: TaskWidgetState = { expanded: false, scroll: undefined };
   const updateTaskWidget = (ctx: ExtensionContext) => {
     if (!ctx.hasUI || ctx.mode !== "tui") return;
     const items = todos?.all() ?? [];
@@ -176,36 +178,8 @@ export default function piJar(pi: ExtensionAPI): void {
     const visible = enabled && items.length > 0 && (open.length > 0 || !todosAcknowledged);
     try {
       // Rows are rebuilt only when the list changes (every change reinstalls the widget), the width or the theme.
-      ctx.ui.setWidget("pi-jar.todos", !visible ? undefined : (_tui, theme) => {
-        let memo: { width: number; sample: string; lines: string[] } | undefined;
-        return {
-          invalidate() { memo = undefined; },
-          render(width: number) {
-            const colors = ctx.ui.theme ?? theme;
-            const sample = colors.fg("accent", "·") + colors.fg("dim", "·");
-            if (memo && memo.width === width && memo.sample === sample) return memo.lines.slice();
-            const all = todos?.all() ?? [];
-            const { done, total } = todoTotals(all);
-            const parents = new Set<string>();
-            for (const item of all) if (item.parentId) parents.add(item.parentId);
-            // Show a window of up to 8 rows that keeps the running leaf (or next open one) in view.
-            const running = all.findIndex((item) => item.status === "in_progress" && !parents.has(item.id));
-            const focus = Math.max(0, running >= 0 ? running : all.findIndex((item) => !item.done && !parents.has(item.id)));
-            const start = Math.max(0, Math.min(focus - 2, all.length - 8));
-            const shown = all.slice(start, start + 8);
-            const rows = [
-              colors.fg("accent", "Tasks") + colors.fg("dim", ` · ${done}/${total} done` + (done === total ? " · all complete" : "") + " · /jar tasks"),
-              ...(start > 0 ? [colors.fg("dim", `  … ${start} earlier`)] : []),
-              ...shown.map((item) => todoRow(item, (color, text) => colors.fg(color, text), (text) => colors.bold(text), parents.has(item.id) ? todoProgress(all, item.id) : undefined)),
-              ...(start + shown.length < all.length ? [colors.fg("dim", `  … +${all.length - start - shown.length} more`)] : [])
-            ];
-            // Pi inserts a spacer before widgets, but not between widgets and the composer.
-            const lines = [...rows.map((line) => truncateToWidth(line, Math.max(0, width))), truncateToWidth(" ", Math.max(0, width))];
-            memo = { width, sample, lines };
-            return lines.slice();
-          }
-        };
-      });
+      ctx.ui.setWidget("pi-jar.todos", !visible ? undefined : (tui, theme) =>
+        taskWidget(tui, theme, () => todos?.all() ?? [], taskWidgetState));
     } catch { /* Optional widget; task data remains available via /jar tasks and jar_todo. */ }
   };
   registerTaskTool(pi, () => todos, (ctx) => updateTaskWidget(ctx));
@@ -1185,7 +1159,16 @@ export default function piJar(pi: ExtensionAPI): void {
         return;
       }
       if (command === "tasks" || command.startsWith("tasks ")) {
-        if (todos) await manageTasks(args.trim().slice(5).trim(), ctx, todos, () => updateTaskWidget(ctx));
+        const taskArgs = args.trim().slice(5).trim();
+        if (["collapse", "expand", "toggle"].includes(taskArgs)) {
+          taskWidgetState.expanded = taskArgs === "toggle" ? !taskWidgetState.expanded : taskArgs === "expand";
+          taskWidgetState.scroll = undefined;
+          updateTaskWidget(ctx);
+        } else if (/^scroll -?\d+$/.test(taskArgs)) {
+          taskWidgetState.expanded = true;
+          taskWidgetState.scroll = Math.max(0, (taskWidgetState.scroll ?? 0) + Number(taskArgs.split(" ")[1]));
+          updateTaskWidget(ctx);
+        } else if (todos) await manageTasks(taskArgs, ctx, todos, () => updateTaskWidget(ctx));
         return;
       }
       if (command === "footer") {
@@ -1201,7 +1184,7 @@ export default function piJar(pi: ExtensionAPI): void {
         };
         while (true) {
           const options = FOOTER_FIELDS.map((field) => `${footerSettings[field] ? "[x]" : "[ ]"} ${labels[field]}`);
-          const selected = await ctx.ui.select("pi-jar · footer visibility", [...options, "Done"]);
+          const selected = await selectPopup(ctx, "pi-jar · footer visibility", [...options, "Done"]);
           const index = options.indexOf(selected ?? "");
           if (index < 0) break;
           const field = FOOTER_FIELDS[index]!;
@@ -1254,7 +1237,7 @@ export default function piJar(pi: ExtensionAPI): void {
           { name: "subagents-fleet", label: "Subagents · Fleet (/subagents-fleet)" }
         ].filter((entry) => pi.getCommands().some((item) => item.name === entry.name && item.source === "extension"));
         if (!native.length) { ctx.ui.notify("No task or subagent manager is installed", "info"); return; }
-        const selected = await ctx.ui.select("pi-jar · open existing manager", native.map((item) => item.label));
+        const selected = await selectPopup(ctx, "pi-jar · open existing manager", native.map((item) => item.label));
         const target = native.find((item) => item.label === selected);
         if (target && pi.getCommands().some((item) => item.name === target.name && item.source === "extension")) {
           pi.sendUserMessage(`/${target.name}`, { expandPromptTemplates: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-jar",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "A warm, role-aware Pi terminal workspace with switchable profiles, animated UI, plan and goal workflows, tasks, change review, model roles, background shells and subagents.",
   "type": "module",
   "license": "MIT",

package/src/activity-view.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { duration, leafTodos, type DelegateRegistry, type DelegateRun, type SubagentRecord, type TranscriptEntry } from "./delegate.ts";
 import { safeLine } from "./diff-view.ts";
@@ -250,7 +251,7 @@ export async function openActivityView(ctx: ExtensionContext, sources: ActivityS
     ctx.ui.notify("pi-jar: nothing running (subagents come from jar_delegate, shells from jar_shell)", "info");
     return;
   }
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
+  await popup<void>(ctx, (tui, theme, _keys, done) => {
     let items = opening;
     let at = initial ? items.findIndex((item) => item.kind !== "header" && item.kind === initial.kind && item.id === initial.id) : -1;
     if (at < 0) at = items.findIndex((item) => item.kind !== "header" && item.status === "running");
@@ -541,5 +542,5 @@ ctx.ui.notify("pi-jar: " + (error instanceof Error ? error.message : String(erro
       }
     };
     return component;
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  });
 }

package/src/ask-tool.ts

@@ -1,5 +1,6 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { acquirePopupPriority } from "./popup.ts";
+import { Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, type OverlayHandle, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { Type } from "typebox";
 import { cleanText } from "./status.ts";
 
@@ -33,6 +34,8 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
   })).filter((option) => !!option.label);
   if (!ctx.hasUI || ctx.mode !== "tui" || signal?.aborted) return { kind: "cancel" };
   let abort: (() => void) | undefined;
+  const release = acquirePopupPriority();
+  let handle: OverlayHandle | undefined;
   try { return await ctx.ui.custom<PickResult>((tui, theme, _keys, complete) => {
     const done = (result: PickResult) => { if (abort) signal?.removeEventListener("abort", abort); complete(result); };
     abort = () => done({ kind: "cancel" });
@@ -50,6 +53,8 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
     let hitRows: number[] = [];
     let scroll = 0;
     let lastSelected = selected;
+    let page = 10;
+    let reveal = false;
     const totalRows = () => options.length + actions.length;
     const choose = () => {
       if (selected < options.length) {
@@ -71,6 +76,10 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
         if (matchesKey(data, Key.escape)) return done({ kind: "cancel" });
         if (matchesKey(data, Key.up)) selected = (selected + totalRows() - 1) % totalRows();
         else if (matchesKey(data, Key.down)) selected = (selected + 1) % totalRows();
+        else if (matchesKey(data, Key.pageDown)) { scroll += page; }
+        else if (matchesKey(data, Key.pageUp)) { scroll = Math.max(0, scroll - page); }
+        else if (matchesKey(data, Key.home)) { selected = 0; reveal = true; }
+        else if (matchesKey(data, Key.end)) { selected = totalRows() - 1; reveal = true; }
         else if (multi && data === "a") {
           // Select all, or clear when everything is already checked.
           if (checked.size === options.length) checked.clear(); else options.forEach((_option, at) => checked.add(at));
@@ -94,14 +103,14 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
         return { handled: true };
       },
       render(width: number): string[] {
+        // Pi exposes focus order rather than a numeric z-index; focus brings this overlay to the front.
+        if (handle && !handle.isFocused()) handle.focus();
         hitRows = [];
+        const height = Math.max(1, tui.terminal?.rows ?? process.stdout.rows ?? 24);
         const inner = Math.max(1, width - 4);
         const badge = "◆ QUESTION " + String(index + 1) + "/" + String(total) + (multi ? " · MULTI SELECT" : "");
-        const title = question.header ? cleanText(question.header, 48) : "Clarification";
-        const lines: string[] = [
-          fit(theme.fg("accent", "╭─ " + badge + " ─"), width),
-          fit(theme.fg("muted", "│ " + title), width)
-        ];
+        const title = question.header ? " · " + cleanText(question.header, 48) : "";
+        const lines: string[] = [fit(theme.fg("accent", "╭─ " + badge + title), width)];
         const content: { line: string; target?: number }[] = [];
         for (const row of wrapTextWithAnsi(cleanText(question.question, 900), inner)) content.push({ line: fit("│ " + row, width) });
         content.push({ line: fit(theme.fg("dim", "├" + "─".repeat(Math.max(0, width - 1))), width) });
@@ -110,7 +119,11 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
           const marker = multi ? (checked.has(at) ? "☑" : "☐") : (active ? "●" : "○");
           const number = String(at + 1).padStart(2, " ") + ".";
           content.push({ target: at, line: fit(theme.fg(active ? "accent" : "muted", "│ " + (active ? "❯ " : "  ") + marker + " " + number + " " + option.label), width) });
-          if (option.description) content.push({ target: at, line: fit(theme.fg("dim", "│      " + option.description), width) });
+          if (option.description && active) {
+            for (const description of wrapTextWithAnsi(option.description, Math.max(1, inner - 6)).slice(0, 2)) {
+              content.push({ target: at, line: fit(theme.fg("dim", "│      " + description), width) });
+            }
+          }
         });
         actions.forEach((action, at) => {
           const row = options.length + at;
@@ -119,24 +132,36 @@ async function pickQuestion(ctx: ExtensionContext, question: AskQuestion, index:
           const chip = "[ " + action.icon + " " + label + " ]";
           content.push({ target: row, line: fit(theme.fg(active ? "accent" : "dim", "│ " + (active ? "❯ " : "  ") + chip), width) });
         });
-        const page = Math.max(3, Math.min(16, (process.stdout.rows ?? 24) - 5));
-        if (selected !== lastSelected) {
+        // One viewport owns all question text/options/actions: no nested generic popup scrolling.
+        page = Math.max(1, Math.min(12, height - 2));
+        if (selected !== lastSelected || reveal) {
           const target = content.findIndex((row) => row.target === selected);
           if (target < scroll) scroll = target;
           else if (target >= scroll + page) scroll = target - page + 1;
           lastSelected = selected;
+          reveal = false;
         }
         scroll = Math.max(0, Math.min(scroll, Math.max(0, content.length - page)));
         content.slice(scroll, scroll + page).forEach((row) => {
           if (row.target !== undefined) hitRows[lines.length] = row.target;
           lines.push(row.line);
         });
-        const hint = multi ? `${checked.size}/${options.length} checked · ↑↓ move · Space/Enter toggle · a all · Esc cancel` : "↑↓ move · Enter choose · wheel scroll · Esc cancel";
+        const hint = multi ? `${checked.size}/${options.length} checked · ↑↓ · Space toggle · Enter · a all · Esc` : "↑↓ choose · Enter · Pg/wheel scroll · Esc";
         lines.push(fit(theme.fg("dim", `╰─ ${scroll + 1}–${Math.min(scroll + page, content.length)}/${content.length} · ${hint}`), width));
-        return lines.map((line) => visibleWidth(line) <= width ? line : fit(line, width));
+        if (height <= 2) {
+          const body = lines.slice(1, 1 + page);
+          const remapped = body.map((_line, row) => hitRows[row + 1]);
+          hitRows = remapped;
+          return body.slice(0, height).map((line) => fit(line, width));
+        }
+        return lines.slice(0, height).map((line) => visibleWidth(line) <= width ? line : fit(line, width));
       }
     };
-  }); } finally { if (abort) signal?.removeEventListener("abort", abort); }
+  }, {
+    overlay: true,
+    overlayOptions: { anchor: "bottom-center", width: "100%", maxHeight: "100%", margin: 0 },
+    onHandle(value) { handle = value; handle.focus(); }
+  }); } finally { release(); if (abort) signal?.removeEventListener("abort", abort); }
 }
 
 export async function askOne(ctx: ExtensionContext, question: AskQuestion, index = 0, total = 1, signal?: AbortSignal): Promise<AskAnswer> {

package/src/dialogs.ts

@@ -2,13 +2,14 @@ import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { Input, Key, matchesKey, truncateToWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { todoMark, todoProgress, todoTotals, type Todo } from "./tasks.ts";
 import { cleanText } from "./status.ts";
+import { popup } from "./popup.ts";
 
 const fit = (line: string, width: number) => truncateToWidth(line, Math.max(0, width));
 
 /** Pi-jar owns these dialogs; Pi's normal and other extensions' questions are untouched. */
 export async function promptText(ctx: ExtensionContext, title: string, question: string, initial = ""): Promise<string | undefined> {
   if (!ctx.hasUI || ctx.mode !== "tui") return undefined;
-  return ctx.ui.custom<string | undefined>((tui, theme, _keys, done) => {
+  return popup<string | undefined>(ctx, (tui, theme, _keys, done) => {
     const input = new Input({ prompt: "❯ ", placeholder: "Type your answer" });
     input.focused = true;
     input.setValue(initial);
@@ -33,60 +34,124 @@ export async function promptText(ctx: ExtensionContext, title: string, question:
         return lines;
       }
     };
-  });
+  }, { filter: false });
 }
 
 export async function promptChoice(ctx: ExtensionContext, title: string, question: string, choices: readonly string[], initial = 0): Promise<number | undefined> {
   if (!ctx.hasUI || ctx.mode !== "tui" || !choices.length) return undefined;
-  return ctx.ui.custom<number | undefined>((tui, theme, _keys, done) => {
+  return popup<number | undefined>(ctx, (tui, theme, _keys, done) => {
+    const input = new Input({ prompt: "⌕ ", placeholder: "Type to filter" });
+    input.focused = true;
+    const labels = choices.map((choice) => cleanText(choice, 500));
+    let visible = choices.map((_, index) => index);
     let selected = Math.max(0, Math.min(choices.length - 1, initial));
     let firstChoiceRow = 0;
+    let first = 0;
+    let page = 10;
+    const choose = () => { const index = visible[selected]; if (index !== undefined) done(index); };
+    input.onSubmit = choose;
+    input.onEscape = () => done(undefined);
+    const refresh = () => {
+      const terms = input.getValue().trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+      visible = labels.flatMap((label, index) => terms.every((term) => label.toLocaleLowerCase().includes(term)) ? [index] : []);
+      selected = 0; first = 0;
+    };
+    const move = (delta: number) => { selected = Math.max(0, Math.min(Math.max(0, visible.length - 1), selected + delta)); };
     return {
-      invalidate() {},
+      get focused() { return input.focused; },
+      set focused(value: boolean) { input.focused = value; },
+      invalidate() { input.invalidate(); },
       handleInput(data: string) {
-        if (matchesKey(data, Key.escape)) return done(undefined);
-        if (matchesKey(data, Key.enter)) return done(selected);
-        if (matchesKey(data, Key.up)) selected = (selected + choices.length - 1) % choices.length;
-        if (matchesKey(data, Key.down)) selected = (selected + 1) % choices.length;
+        if (matchesKey(data, Key.up)) move(-1);
+        else if (matchesKey(data, Key.down)) move(1);
+        else if (matchesKey(data, Key.pageUp)) move(-page);
+        else if (matchesKey(data, Key.pageDown)) move(page);
+        else if (matchesKey(data, Key.home)) selected = 0;
+        else if (matchesKey(data, Key.end)) selected = Math.max(0, visible.length - 1);
+        else { const before = input.getValue(); input.handleInput(data); if (input.getValue() !== before) refresh(); }
         tui.requestRender();
       },
       handleMouse(event: TuiMouseEvent) {
+        if (event.type === "wheel" && event.wheelDelta) { move(Math.sign(event.wheelDelta) * 3); tui.requestRender(); return { handled: true }; }
         if (event.type !== "click" || event.button !== "left") return;
-        const index = event.y - firstChoiceRow;
-        if (index >= 0 && index < choices.length) { selected = index; done(index); return { handled: true }; }
+        const offset = event.y - firstChoiceRow;
+        if (offset >= 0 && offset < page && visible[first + offset] !== undefined) { selected = first + offset; choose(); return { handled: true }; }
       },
       render(width: number): string[] {
         const heading = [
           fit(theme.fg("accent", `╭─ ${cleanText(title, 56)} ─`), width),
-          ...wrapTextWithAnsi(cleanText(question, 160), Math.max(1, width - 2)).map((line) => fit(theme.fg("muted", `│ ${line}`), width))
+          ...wrapTextWithAnsi(cleanText(question, 160), Math.max(1, width - 2)).slice(0, Math.max(0, Math.min(2, (tui.terminal?.rows ?? process.stdout.rows ?? 24) - 4))).map((line) => fit(theme.fg("muted", `│ ${line}`), width)),
+          ...input.render(Math.max(1, width - 2)).map((line) => fit("│ " + line, width))
         ];
         firstChoiceRow = heading.length;
+        page = Math.max(1, (tui.terminal?.rows ?? process.stdout.rows ?? 24) - heading.length - 1);
+        if (selected < first) first = selected;
+        if (selected >= first + page) first = selected - page + 1;
+        first = Math.max(0, Math.min(first, Math.max(0, visible.length - page)));
         return [
           ...heading,
-          ...choices.map((choice, index) => fit(theme.fg(index === selected ? "accent" : "dim", `${index === selected ? "❯" : " "} ${cleanText(choice, 80)}`), width)),
-          fit(theme.fg("dim", "╰─ ↑↓: choose · Enter: confirm · Esc: cancel"), width)
+          ...(visible.length ? visible.slice(first, first + page).map((original, offset) => fit(theme.fg(first + offset === selected ? "accent" : "dim", `${first + offset === selected ? "❯" : " "} ${labels[original]}`), width)) : [fit(theme.fg("dim", "  No matches"), width)]),
+          fit(theme.fg("dim", `╰─ ${visible.length ? selected + 1 : 0}/${visible.length} · type to filter · ↑↓/Pg: choose · Enter: confirm · Esc: cancel`), width)
         ];
       }
     };
-  });
+  }, { filter: false });
+}
+
+/** Searchable replacement for Pi's native selector, preserving string results. */
+export async function selectPopup(ctx: ExtensionContext, title: string, choices: readonly string[]): Promise<string | undefined> {
+  const index = await promptChoice(ctx, title, "", choices);
+  return index === undefined ? undefined : choices[index];
 }
 
 export type TodoFilter = "all" | "open" | "done";
 export type TodoAction = { kind: "add" | "toggle" | "edit" | "delete"; id?: string };
 
-export async function todoView(ctx: ExtensionContext, todos: () => Todo[], filter: { value: TodoFilter }): Promise<TodoAction | undefined> {
+export async function todoView(ctx: ExtensionContext, todos: () => Todo[], filter: { value: TodoFilter; collapsed?: Set<string> }): Promise<TodoAction | undefined> {
   if (!ctx.hasUI || ctx.mode !== "tui") return undefined;
-  return ctx.ui.custom<TodoAction | undefined>((tui, theme, _keys, done) => {
+  return popup<TodoAction | undefined>(ctx, (tui, theme, _keys, done) => {
     let selected = 0;
-    const filtered = () => todos().filter((item) => filter.value === "all" || (filter.value === "done") === item.done);
+    const collapsed = filter.collapsed ??= new Set<string>();
+    const search = new Input({ prompt: "/ ", placeholder: "Filter all tasks" });
+    let searching = false;
+    search.onSubmit = () => { searching = false; search.focused = false; };
+    search.onEscape = () => { searching = false; search.focused = false; search.setValue(""); selected = 0; };
+    const filtered = () => {
+      const all = todos();
+      const byId = new Map(all.map((item) => [item.id, item]));
+      return all.filter((item) => {
+        if (!(filter.value === "all" || (filter.value === "done") === item.done)) return false;
+        const term = search.getValue().trim().toLocaleLowerCase();
+        if (term) return item.title.toLocaleLowerCase().includes(term);
+        let parent = item.parentId;
+        const seen = new Set<string>();
+        while (parent && !seen.has(parent)) {
+          if (collapsed.has(parent)) return false;
+          seen.add(parent); parent = byId.get(parent)?.parentId;
+        }
+        return true;
+      });
+    };
     let firstVisible = 0;
+    let page = 12;
     return {
-      invalidate() {},
+      get focused() { return search.focused; },
+      set focused(value: boolean) { search.focused = searching && value; },
+      invalidate() { search.invalidate(); },
       handleInput(data: string) {
+        if (searching) { search.handleInput(data); selected = 0; tui.requestRender(); return; }
+        if (data === "/") { searching = true; search.focused = true; tui.requestRender(); return; }
         const items = filtered();
         if (matchesKey(data, Key.escape) || data === "q") return done(undefined);
         if (matchesKey(data, Key.up)) selected = Math.max(0, selected - 1);
         else if (matchesKey(data, Key.down)) selected = Math.min(Math.max(0, items.length - 1), selected + 1);
+        else if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
+          const item = items[selected];
+          if (item && todos().some((child) => child.parentId === item.id)) {
+            if (matchesKey(data, Key.left)) collapsed.add(item.id); else collapsed.delete(item.id);
+          }
+        } else if (matchesKey(data, Key.pageDown)) selected = Math.min(Math.max(0, items.length - 1), selected + page);
+        else if (matchesKey(data, Key.pageUp)) selected = Math.max(0, selected - page);
         else if (data === "f") {
           const next: Record<TodoFilter, TodoFilter> = { all: "open", open: "done", done: "all" };
           filter.value = next[filter.value]; selected = 0;
@@ -104,7 +169,7 @@ export async function todoView(ctx: ExtensionContext, todos: () => Todo[], filte
         if (event.type !== "click" || event.button !== "left") return;
         const index = firstVisible + event.y - 1;
         const item = filtered()[index];
-        if (event.y >= 1 && event.y <= 12 && item) {
+        if (event.y >= 1 && event.y <= page && item) {
           selected = index; done({ kind: "toggle", id: item.id }); return { handled: true };
         }
       },
@@ -113,19 +178,20 @@ export async function todoView(ctx: ExtensionContext, todos: () => Todo[], filte
         selected = Math.min(selected, Math.max(0, items.length - 1));
         const all = todos();
         const totals = todoTotals(all);
-        const start = Math.max(0, selected - 11);
+        page = Math.max(1, Math.min(12, (tui.terminal?.rows ?? process.stdout.rows ?? 24) - 2));
+        const start = Math.max(0, Math.min(selected - page + 1, items.length - page));
         firstVisible = start;
         return [
           fit(theme.fg("accent", `╭─ pi-jar to-do · ${totals.total - totals.done} open · ${filter.value} ─`), width),
-          ...(items.length ? items.slice(start, start + 12).map((item, index) => {
+          ...(items.length ? items.slice(start, start + page).map((item, index) => {
             const progress = todoProgress(all, item.id);
-            const row = `${start + index === selected ? "❯" : " "} ${item.parentId ? "  " : ""}${todoMark(item)} ${item.title}${progress.total ? ` (${progress.done}/${progress.total})` : ""}`;
+            const row = `${start + index === selected ? "❯" : " "} ${item.parentId ? "  " : ""}${progress.total ? (collapsed.has(item.id) ? "▸ " : "▾ ") : ""}${todoMark(item)} ${item.title}${progress.total ? ` (${progress.done}/${progress.total})` : ""}`;
             return fit(theme.fg(start + index === selected ? "accent" : item.done ? "dim" : item.status === "in_progress" ? "warning" : "muted", row), width);
           })
             : [fit(theme.fg("dim", "  No items in this view"), width)]),
-          fit(theme.fg("dim", "╰─ ↑↓: select · Space: check · a: add · e: edit · d: delete · f: filter · Esc: close"), width)
+          searching ? fit(search.render(width)[0]!, width) : fit(theme.fg("dim", "╰─ ↑↓/Pg: select · ←→: collapse/expand · /: search · Space: check · a/e/d: add/edit/delete · f: status · Esc: close"), width)
         ];
       }
     };
-  });
+  }, { filter: false });
 }

package/src/diff-view.ts

@@ -1,4 +1,5 @@
 import { getLanguageFromPath, highlightCode, type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { coarseLineDiff, diffHunkOffsets, diffLineCount, diffRowCount, diffRowsWindow, diffSplitHunkOffsets, diffSplitRowCount, diffSplitRowsWindow,
   lineDiff, MAX_REVIEW_DIFF_LINES, type ChangeTracker, type DiffOp, type FileChange } from "./changes.ts";
@@ -172,7 +173,7 @@ export async function openDiffView(ctx: ExtensionContext, tracker: ChangeTracker
   if (!ctx.hasUI || ctx.mode !== "tui") return;
   let changes = tracker.changes();
   if (!changes.length) { ctx.ui.notify("pi-jar: no agent changes to review", "info"); return; }
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
+  await popup<void>(ctx, (tui, theme, _keys, done) => {
     let selected = 0;
     let scroll = 0;
     let listScroll = 0;
@@ -386,7 +387,7 @@ export async function openDiffView(ctx: ExtensionContext, tracker: ChangeTracker
       }
     };
     return component;
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  }, { filter: false });
 }
 
 /** Track edit/write targets before they run, and expose `/diff` plus ctrl+alt+d. */

package/src/history-ui.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Input, Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { createHistorySnapshot, historyChunk, historyPage, safeHistoryText, type HistoryChunk, type HistoryItem } from "./history.ts";
 import { RowCache } from "./row-cache.ts";
@@ -9,7 +10,7 @@ export async function openJarHistory(ctx: ExtensionContext): Promise<void> {
   if (!ctx.hasUI || ctx.mode !== "tui") return;
   // Capture the active branch ONCE on open. Paging and search operate on this snapshot.
   const snapshot = createHistorySnapshot(sessionBranch(ctx) as ReturnType<typeof ctx.sessionManager.getBranch>);
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
+  await popup<void>(ctx, (tui, theme, _keys, done) => {
     let current = historyPage(snapshot);
     let selected = Math.max(0, current.items.length - 1);
     let expanded = false;
@@ -140,5 +141,5 @@ export async function openJarHistory(ctx: ExtensionContext): Promise<void> {
           border("├", "─", "┤"), line(theme.fg("accent", headingDetail)), ...body, help, border("╰", "─", "╯")];
       }
     };
-  }, { overlay: true, overlayOptions: { anchor: "center", width: 92, maxHeight: "80%" } });
+  }, { filter: false });
 }

package/src/panel.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { RowCache } from "./row-cache.ts";
 
@@ -8,7 +9,7 @@ export interface PanelTab { name: string; render(width: number, fg: Paint): stri
 /** Tabbed, scrollable info panel (Usage / Context / Cache). Tab or click switches tabs; Esc closes. */
 export async function openPanel(ctx: ExtensionContext, tabs: readonly PanelTab[], initial = 0): Promise<void> {
   if (!ctx.hasUI || ctx.mode !== "tui") return;
-  await ctx.ui.custom<void>((tui, theme, _keys, done) => {
+  await popup<void>(ctx, (tui, theme, _keys, done) => {
     let tab = Math.max(0, Math.min(tabs.length - 1, initial));
     let scroll = 0;
     let body: string[] = [];
@@ -64,7 +65,7 @@ export async function openPanel(ctx: ExtensionContext, tabs: readonly PanelTab[]
         ];
       }
     };
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  });
 }
 
 export const tokens = (value: number): string => value < 1000 ? String(Math.round(value))

package/src/plan-view.ts

@@ -1,4 +1,5 @@
 import { getMarkdownTheme, type ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, Markdown, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { parsePlanSections, type PlanSection } from "./plan-utils.ts";
 import { contentRows, optionList, sidebarWidth, splitFrame } from "./split-view.ts";
@@ -45,7 +46,7 @@ export async function openPlanView(ctx: ExtensionContext, input: PlanViewInput):
   const lines = input.text.replace(/\r/g, "").split("\n");
   const { title, entries } = planEntries(input.text);
   const roleChoices = ["current", ...(input.roles ?? [])];
-  return ctx.ui.custom<PlanViewResult | undefined>((tui, theme, _keys, done) => {
+  return popup<PlanViewResult | undefined>(ctx, (tui, theme, _keys, done) => {
     let selected = 0;
     let focus: Focus = "toc";
     let action = 0;
@@ -145,5 +146,5 @@ export async function openPlanView(ctx: ExtensionContext, input: PlanViewInput):
         return split.lines;
       }
     };
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  });
 }

package/src/popup.ts

@@ -0,0 +1,103 @@
+import type { ExtensionContext, KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import { Input, Key, matchesKey, stripTerminalSequences, truncateToWidth, type Component, type TUI } from "@earendil-works/pi-tui";
+
+let priorityPopups = 0;
+/** Hide ordinary jar overlays while a blocking question owns the screen. */
+export function acquirePopupPriority(): () => void {
+  priorityPopups++;
+  let released = false;
+  return () => { if (!released) { released = true; priorityPopups--; } };
+}
+
+type Factory<T> = (tui: TUI, theme: Theme, keys: KeybindingsManager, done: (result: T) => void) => Component & { dispose?(): void };
+export interface PopupOptions {
+  /** Views with their own search/editor keep ownership of printable keys. */
+  filter?: boolean;
+}
+
+/** Common containment for every jar popup. Oversized chrome remains reachable, not silently clipped by Pi. */
+export function popup<T>(ctx: ExtensionContext, factory: Factory<T>, options: PopupOptions = {}): Promise<T> {
+  return ctx.ui.custom<T>((tui, theme, keys, done) => {
+    const child = factory(tui, theme, keys, done);
+    const input = new Input({ prompt: "/ ", placeholder: "Filter popup content" });
+    let searching = false;
+    let scroll = 0;
+    let height = 24;
+    let width = 80;
+    let source: string[] = [];
+    let hits: number[] = [];
+    let shown: number[] = [];
+    let follow = false;
+    const page = () => Math.max(1, height - 2);
+    const move = (delta: number) => { scroll = Math.max(0, Math.min(Math.max(0, hits.length - page()), scroll + delta)); };
+    input.onEscape = () => { searching = false; input.focused = false; input.setValue(""); scroll = 0; };
+    input.onSubmit = () => {
+      // Return to the original view, never activate a hidden selection on Enter.
+      scroll = hits[scroll] ?? 0;
+      searching = false; input.focused = false; input.setValue("");
+    };
+    return {
+      get focused() { return searching ? input.focused : (child as Component & { focused?: boolean }).focused ?? false; },
+      set focused(value: boolean) { input.focused = searching && value; (child as Component & { focused?: boolean }).focused = value; },
+      invalidate() { child.invalidate(); input.invalidate(); },
+      dispose() { child.dispose?.(); },
+      handleInput(data: string) {
+        if (searching) {
+          if (matchesKey(data, Key.up)) move(-1);
+          else if (matchesKey(data, Key.down)) move(1);
+          else if (matchesKey(data, Key.pageUp)) move(-page());
+          else if (matchesKey(data, Key.pageDown)) move(page());
+          else { const before = input.getValue(); input.handleInput(data); if (input.getValue() !== before) scroll = 0; }
+        } else if (options.filter !== false && data === "/") {
+          searching = true; input.focused = true; scroll = 0;
+        } else if (matchesKey(data, Key.ctrl("pageUp"))) move(-page());
+        else if (matchesKey(data, Key.ctrl("pageDown"))) move(page());
+        else { child.handleInput?.(data); follow = true; }
+        tui.requestRender();
+      },
+      handleMouse(event) {
+        if (event.type === "wheel" && event.wheelDelta && (searching || source.length > height)) {
+          move(Math.sign(event.wheelDelta) * 3); tui.requestRender(); return { handled: true };
+        }
+        if (event.type === "wheel") return child.handleMouse?.(event);
+        const original = shown[event.y];
+        if (original === undefined || original < 0) return;
+        return child.handleMouse?.({ ...event, y: original });
+      },
+      render(available) {
+        width = Math.max(1, available);
+        height = Math.max(1, tui.terminal?.rows ?? process.stdout.rows ?? 24);
+        source = child.render(width);
+        const terms = input.getValue().trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+        hits = source.flatMap((line, index) => {
+          const text = stripTerminalSequences(line).toLocaleLowerCase();
+          return !searching || (/[\p{L}\p{N}]/u.test(text) && terms.every((term) => text.includes(term))) ? [index] : [];
+        });
+        if (!searching && source.length <= height) {
+          scroll = 0; shown = hits; follow = false; return source.map((line) => truncateToWidth(line, width));
+        }
+        if (follow && !searching) {
+          const selected = source.findIndex((line) => stripTerminalSequences(line).includes("❯"));
+          if (selected >= 0) {
+            if (selected < scroll) scroll = selected;
+            if (selected >= scroll + page()) scroll = selected - page() + 1;
+          }
+        }
+        follow = false;
+        scroll = Math.max(0, Math.min(scroll, Math.max(0, hits.length - page())));
+        const window = hits.slice(scroll, scroll + page());
+        const body = window.length ? window.map((at) => source[at]!) : [theme.fg("dim", "No matches")];
+        const header = searching ? input.render(width)[0]! : theme.fg("dim", "↑↓ in view · Ctrl+PgUp/PgDn / wheel scroll popup" + (options.filter !== false ? " · / filter" : ""));
+        const footer = theme.fg("dim", `${hits.length ? scroll + 1 : 0}–${Math.min(hits.length, scroll + page())}/${hits.length}` + (searching ? " · Enter return to view · click to act · Esc clear" : ""));
+        if (height <= 2) {
+          shown = [...window.slice(0, 1), -1];
+          return [body[0]!, footer].slice(0, height).map((line) => truncateToWidth(line, width));
+        }
+        shown = [-1, ...window, -1];
+        // Header/footer have no child hit target, even on a one-row terminal.
+        shown[0] = -1;
+        return [header, ...body, footer].slice(0, height).map((line) => truncateToWidth(line, width));
+      }
+    };
+  }, { overlay: true, overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%", margin: 0, visible: () => priorityPopups === 0 } });
+}

package/src/profile-ui.ts

@@ -1,6 +1,7 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { JarProfile, ProfileStore } from "./profiles.ts";
 import type { JarVisualSettings } from "./settings.ts";
+import { selectPopup } from "./dialogs.ts";
 
 export type ProfileAction = "create" | "switch";
 
@@ -35,7 +36,7 @@ export async function promptNewProfile(ctx: ExtensionContext, options: Pick<Prof
   if (options.store.list().some((profile) => profile.name.toLocaleLowerCase() === normalized.toLocaleLowerCase())) {
     ctx.ui.notify("A profile with that name already exists", "warning"); return undefined;
   }
-  const selected = await ctx.ui.select("Choose a theme for " + normalized, [FOLLOW, ...options.themes.filter((item) => item !== "follow")]);
+  const selected = await selectPopup(ctx, "Choose a theme for " + normalized, [FOLLOW, ...options.themes.filter((item) => item !== "follow")]);
   if (!selected) return undefined;
   let profile: JarProfile;
   try { profile = options.create(normalized, selected === FOLLOW ? "follow" : selected); }
@@ -55,7 +56,7 @@ export async function openProfiles(ctx: ExtensionContext, options: ProfileUiOpti
   let preset: Partial<JarVisualSettings> | undefined;
   if (action !== "create") {
     const labels = new Map(options.store.list().map((profile) => [profile.name === active ? `${profile.name} (active)` : profile.name, profile.name]));
-    const choice = await ctx.ui.select(action === "switch" ? "Switch profile" : "Profiles", action === "switch" ? [...labels.keys()] : [CREATE, SWARM, ...labels.keys()]);
+    const choice = await selectPopup(ctx, action === "switch" ? "Switch profile" : "Profiles", action === "switch" ? [...labels.keys()] : [CREATE, SWARM, ...labels.keys()]);
     if (!choice) return;
     if (choice !== CREATE && choice !== SWARM) { await options.select(labels.get(choice)!); return; }
     if (choice === SWARM) preset = SWARM_SETTINGS;

package/src/prompt-search.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { fuzzyFilter, Key, matchesKey, truncateToWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { cleanText } from "./status.ts";
 
@@ -49,14 +50,14 @@ export function collectPrompts(entries: readonly unknown[], earlier: readonly {
 export async function openPromptSearch(ctx: ExtensionContext, prompts: readonly PastPrompt[]): Promise<string | undefined> {
   if (!ctx.hasUI || ctx.mode !== "tui") return undefined;
   if (!prompts.length) { ctx.ui.notify("pi-jar: no earlier prompts yet", "info"); return undefined; }
-  return ctx.ui.custom<string | undefined>((tui, theme, _keys, done) => {
+  return popup<string | undefined>(ctx, (tui, theme, _keys, done) => {
     let query = "";
     let selected = 0;
     let first = 0;
     // 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;
+    let rows = 10;
     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>();
@@ -85,6 +86,7 @@ export async function openPromptSearch(ctx: ExtensionContext, prompts: readonly
       },
       render(width: number): string[] {
         const w = Math.max(20, width);
+        rows = Math.max(1, Math.min(10, (tui.terminal?.rows ?? process.stdout.rows ?? 24) - 3));
         const inner = w - 4;
         if (selected < first) first = selected;
         if (selected >= first + rows) first = selected - rows + 1;
@@ -106,5 +108,5 @@ export async function openPromptSearch(ctx: ExtensionContext, prompts: readonly
         return lines;
       }
     };
-  }, { overlay: true, overlayOptions: { width: "80%", maxHeight: "60%" } });
+  }, { filter: false });
 }

package/src/roles-ui.ts

@@ -1,6 +1,7 @@
 import type { ExtensionContext, ThemeColor } from "@earendil-works/pi-coding-agent";
-import { Key, matchesKey, stripTerminalSequences, type TuiMouseEvent } from "@earendil-works/pi-tui";
-import { promptText } from "./dialogs.ts";
+import { Input, Key, matchesKey, stripTerminalSequences, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { promptText, selectPopup } from "./dialogs.ts";
+import { popup } from "./popup.ts";
 import { isRoleName, normalizeSpec, premiumRoleWarnings, THINKING, type ModelRoleManager, type RoleRow } from "./model-roles.ts";
 import { contentRows, optionList, sidebarWidth, splitFrame } from "./split-view.ts";
 
@@ -38,19 +39,31 @@ function detail(row: RoleRow, active: string | undefined): [ThemeColor, string][
 }
 
 async function roleScreen(ctx: ExtensionContext, roles: ModelRoleManager, initial: number): Promise<{ action: RoleAction; index: number } | undefined> {
-  return ctx.ui.custom<{ action: RoleAction; index: number } | undefined>((tui, theme, _keys, done) => {
+  return popup<{ action: RoleAction; index: number } | undefined>(ctx, (tui, theme, _keys, done) => {
     let selected = initial;
     let scroll = 0;
     let layout = { top: 1, rows: 0, leftWidth: 0, bodyX: 2, footerTop: 0 };
     let width = 80;
-    const rows = () => roles.list();
+    const input = new Input({ prompt: "/ ", placeholder: "Filter roles" });
+    let searching = false;
+    const rows = () => roles.list().filter((row) => `${row.role} ${row.label} ${row.spec ?? ""}`.toLocaleLowerCase().includes(input.getValue().trim().toLocaleLowerCase()));
+    input.onSubmit = () => { searching = false; input.focused = false; };
+    input.onEscape = () => { searching = false; input.focused = false; input.setValue(""); selected = 0; scroll = 0; };
     // Read once per screen: every action closes the screen, and reopening it re-checks against the current model.
     const warnings = premiumRoleWarnings(roles, ctx);
-    const finish = (action: RoleAction) => done({ action, index: selected });
+    const finish = (action: RoleAction) => {
+      const row = rows()[selected];
+      if (row) done({ action, index: roles.list().findIndex((item) => item.role === row.role) });
+    };
     return {
-      invalidate() {},
+      get focused() { return input.focused; },
+      set focused(value: boolean) { input.focused = searching && value; },
+      invalidate() { input.invalidate(); },
       handleInput(data: string) {
+        if (searching) { input.handleInput(data); selected = 0; scroll = 0; tui.requestRender(); return; }
+        if (data === "/") { searching = true; input.focused = true; tui.requestRender(); return; }
         const count = rows().length;
+        if (!count && !matchesKey(data, Key.escape)) return;
         if (matchesKey(data, Key.escape) || data === "q") return done(undefined);
         if (matchesKey(data, Key.up) || data === "k") selected = (selected + count - 1) % count;
         else if (matchesKey(data, Key.down) || data === "j") selected = (selected + 1) % count;
@@ -93,7 +106,8 @@ async function roleScreen(ctx: ExtensionContext, roles: ModelRoleManager, initia
           const mark = row.error ? "⚠" : row.resolved ? "●" : "○";
           return theme.fg(current ? "accent" : row.resolved ? "muted" : "dim", (current ? "❯ " : "  ") + mark + " " + row.role + (active === row.role ? " *" : ""));
         });
-        const row = list[selected]!;
+        const row = list[selected];
+        if (!row) return [theme.fg("accent", "pi-jar · roles"), ...input.render(width), theme.fg("dim", "No matching roles · / edit filter · Esc close")];
         const info = detail(row, active).map(([color, text]) => theme.fg(color, text));
         // Narrow terminals collapse the sidebar into a pager header above the details.
         const narrow = sidebarWidth(width) === 0;
@@ -103,13 +117,13 @@ async function roleScreen(ctx: ExtensionContext, roles: ModelRoleManager, initia
         const body = [...header, ...warnings.map((text) => theme.fg("warning", text)), ...info];
         const split = splitFrame(theme, width, "pi-jar · roles", narrow ? [] : left, body, [
           ...actions,
-          theme.fg("dim", "↑↓ choose role · press a key or click an action · Esc close")
+          searching ? input.render(width)[0]! : theme.fg("dim", "↑↓ choose role · / filter roles · press a key or click an action · Esc close")
         ], height);
         layout = split.layout;
         return split.lines;
       }
     };
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  }, { filter: false });
 }
 
 /** Keyboard- and pointer-driven model role manager. */
@@ -146,7 +160,7 @@ async function applyAction(ctx: ExtensionContext, roles: ModelRoleManager, row:
       const models = ctx.modelRegistry.getAvailable().slice().sort((a, b) => (a.provider + "/" + a.id).localeCompare(b.provider + "/" + b.id));
       if (!models.length) { ctx.ui.notify("No authenticated models are currently available", "warning"); return; }
       const labels = models.map((model) => model.provider + "/" + model.id);
-      const selected = await ctx.ui.select("Model for " + row.role, labels);
+      const selected = await selectPopup(ctx, "Model for " + row.role, labels);
       if (selected) roles.update(row.role, selected + effort(), scope);
       return;
     }
@@ -154,20 +168,20 @@ async function applyAction(ctx: ExtensionContext, roles: ModelRoleManager, row:
       const models = ctx.modelRegistry.getAvailable().slice().sort((a, b) => (a.provider + "/" + a.id).localeCompare(b.provider + "/" + b.id));
       if (!models.length) { ctx.ui.notify("No authenticated models are currently available", "warning"); return; }
       const choices = ["Clear fallback", ...models.map((model) => model.provider + "/" + model.id)];
-      const selected = await ctx.ui.select("Fallback model for " + row.role, choices);
+      const selected = await selectPopup(ctx, "Fallback model for " + row.role, choices);
       if (!selected) return;
       roles.updateFallbacks(row.role, selected === "Clear fallback" ? [] : [selected], scope);
       return;
     }
     case "alias": {
       const targets = roles.list().filter((item) => item.role !== row.role).map((item) => "@" + item.role);
-      const selected = await ctx.ui.select("Alias " + row.role + " to", targets);
+      const selected = await selectPopup(ctx, "Alias " + row.role + " to", targets);
       if (selected) roles.update(row.role, selected + effort(), scope);
       return;
     }
     case "thinking": {
       if (!row.spec) { ctx.ui.notify("Assign a model or alias first", "warning"); return; }
-      const selected = await ctx.ui.select("Thinking effort for " + row.role, ["follow current", ...THINKING]);
+      const selected = await selectPopup(ctx, "Thinking effort for " + row.role, ["follow current", ...THINKING]);
       if (selected) roles.update(row.role, base() + (selected === "follow current" ? "" : ":" + selected), scope);
       return;
     }

package/src/session-ui.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext, SessionInfo } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, matchesKey, truncateToWidth, wrapTextWithAnsi, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { sessionDisplayName } from "./composer.ts";
 import { iconSet, withIcon } from "./icons.ts";
@@ -45,7 +46,7 @@ export async function pickSession(ctx: ExtensionContext, sessions: readonly Sess
     for (const item of indexed) if (terms.every((term) => item.haystack.includes(term))) rows.push(item.session);
     return rows;
   };
-  return ctx.ui.custom<string | undefined>((tui, theme, _keys, done) => {
+  return popup<string | undefined>(ctx, (tui, theme, _keys, done) => {
     let query = initial.slice(0, 100);
     let selected = 0;
     let first = 0;
@@ -151,5 +152,5 @@ export async function pickSession(ctx: ExtensionContext, sessions: readonly Sess
         return available < width ? split.lines.map((line) => truncateToWidth(line, Math.max(0, available))) : split.lines;
       }
     };
-  }, { overlay: true, overlayOptions: { width: "100%", maxHeight: "100%" } });
+  }, { filter: false });
 }

package/src/settings-ui.ts

@@ -1,4 +1,5 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { popup } from "./popup.ts";
 import { Key, matchesKey, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
 import { FOOTER_FIELDS, type FooterField } from "./footer-settings.ts";
 import { formatTokens } from "./context-budget.ts";
@@ -34,7 +35,7 @@ export async function openJarSettings(
   const PAGES: Page[] = profiles ? ["appearance", "footer", "pi", "profiles"] : ["appearance", "footer", "pi"];
   let lastPage: Page = "appearance";
   while (true) {
-  const action = await ctx.ui.custom<ProfileAction | undefined>((tui, theme, _keys, done) => {
+  const action = await popup<ProfileAction | undefined>(ctx, (tui, theme, _keys, done) => {
     let page: Page = lastPage;
     let selected = 0;
     let width = 64;

package/src/split-view.ts

@@ -66,7 +66,7 @@ export function splitFrame(theme: SplitTheme, width: number, title: string, left
   for (const line of footer) lines.push(dim("│ ") + pad(padded.footer, line, w - 4) + dim(" │"));
   lines.push(dim("╰" + "─".repeat(w - 2) + "╯"));
   // Every row is assembled from exact-width parts; only a sidebar too wide for the frame can overflow.
-  const fitted = bodyWidth < 0 ? lines.map((line) => truncateToWidth(line, w)) : lines;
+  const fitted = bodyWidth < 0 || width < w ? lines.map((line) => truncateToWidth(line, Math.max(0, width))) : lines;
   const layout = { top: 1, rows, leftWidth: split ? leftWidth : 0, bodyX: split ? leftWidth + 4 : 2, footerTop };
   previous = { key, left: left.slice(0, rows), right: right.slice(0, rows), footer: footer.slice(), lines: fitted, layout };
   return { lines: fitted.slice(), layout: { ...layout } };
@@ -74,7 +74,7 @@ export function splitFrame(theme: SplitTheme, width: number, title: string, left
 
 /** Available content rows for a full-height overlay with `chrome` fixed rows. */
 export function contentRows(chrome: number, min = 4): number {
-  return Math.max(min, (process.stdout.rows ?? 24) - chrome);
+  return Math.max(1, (process.stdout.rows ?? 24) - chrome);
 }
 
 /**

package/src/task-widget.ts

@@ -0,0 +1,51 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { Key, matchesKey, truncateToWidth, type TUI, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { todoProgress, todoTotals, type Todo } from "./tasks.ts";
+import { todoRow } from "./task-tool.ts";
+
+/** Retained across widget refreshes. Compact by default so tasks never bury the composer. */
+export interface TaskWidgetState { expanded: boolean; scroll: number | undefined }
+export function taskWidget(tui: TUI, theme: Theme, items: () => Todo[], state: TaskWidgetState) {
+  let page = 4;
+  const toggle = () => { state.expanded = !state.expanded; tui.requestRender(); };
+  const move = (delta: number) => {
+    state.scroll = Math.max(0, Math.min(Math.max(0, items().length - page), (state.scroll ?? 0) + delta));
+    tui.requestRender();
+  };
+  return {
+    invalidate() {},
+    handleInput(data: string) {
+      if (matchesKey(data, Key.enter) || data === " ") toggle();
+      else if (matchesKey(data, Key.down)) move(1);
+      else if (matchesKey(data, Key.up)) move(-1);
+      else if (matchesKey(data, Key.pageDown)) move(page);
+      else if (matchesKey(data, Key.pageUp)) move(-page);
+    },
+    handleMouse(event: TuiMouseEvent) {
+      if (event.type === "click" && event.button === "left" && event.y === 0) { toggle(); return { handled: true }; }
+      if (event.type === "wheel" && event.wheelDelta && state.expanded) { move(Math.sign(event.wheelDelta) * 3); return { handled: true }; }
+    },
+    render(width: number) {
+      const all = items();
+      const { done, total } = todoTotals(all);
+      const parents = new Set(all.flatMap((item) => item.parentId ? [item.parentId] : []));
+      const running = all.findIndex((item) => item.status === "in_progress" && !parents.has(item.id));
+      const focus = Math.max(0, running >= 0 ? running : all.findIndex((item) => !item.done && !parents.has(item.id)));
+      // At most a quarter of the terminal, including heading and spacer.
+      const budget = Math.max(1, Math.floor((tui.terminal?.rows ?? process.stdout.rows ?? 24) / 4));
+      page = Math.max(1, Math.min(4, budget - 2));
+      const start = Math.max(0, Math.min(state.scroll ?? Math.max(0, focus - 1), Math.max(0, all.length - page)));
+      const current = all[focus];
+      const heading = theme.fg("accent", `${state.expanded ? "▾" : "▸"} Tasks`) + theme.fg("dim", ` · ${done}/${total} done`)
+        + (!state.expanded && current && !current.done ? theme.fg("muted", ` · ${current.title}`) : "")
+        + theme.fg("dim", ` · click to ${state.expanded ? "collapse" : "expand"} · /jar tasks`);
+      const rows = [heading];
+      if (state.expanded && budget > 2) {
+        rows[0] += theme.fg("dim", ` · ${start + 1}–${Math.min(all.length, start + page)}/${all.length} · wheel scroll`);
+        rows.push(...all.slice(start, start + page).map((item) => todoRow(item, (color, text) => theme.fg(color, text), (text) => theme.bold(text), parents.has(item.id) ? todoProgress(all, item.id) : undefined)));
+      }
+      rows.push(" ");
+      return rows.slice(0, Math.max(1, budget)).map((line) => truncateToWidth(line, Math.max(0, width)));
+    }
+  };
+}