pi-jar 0.2.6 → 0.2.7

package/README.md

@@ -93,6 +93,8 @@ Pi only delivers mouse events in its **fullscreen** TUI mode. In regular mode th
 
 ## 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-jar",
-  "version": "0.2.6",
+  "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/ask-tool.ts

@@ -1,6 +1,6 @@
 import type { ExtensionAPI, 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 { 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";
 
@@ -34,7 +34,9 @@ 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;
-  try { return await popup<PickResult>(ctx, (tui, theme, _keys, complete) => {
+  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" });
     signal?.addEventListener("abort", abort, { once: true });
@@ -51,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) {
@@ -72,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));
@@ -95,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) });
@@ -111,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;
@@ -120,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/popup.ts

@@ -1,6 +1,14 @@
 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. */
@@ -91,5 +99,5 @@ export function popup<T>(ctx: ExtensionContext, factory: Factory<T>, options: Po
         return [header, ...body, footer].slice(0, height).map((line) => truncateToWidth(line, width));
       }
     };
-  }, { overlay: true, overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%", margin: 0 } });
+  }, { overlay: true, overlayOptions: { anchor: "center", width: "100%", maxHeight: "100%", margin: 0, visible: () => priorityPopups === 0 } });
 }