@hank-warren/pi-auto-permissions 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hank-warren/pi-auto-permissions
 
+## 0.20.0
+
+### Minor Changes
+
+- Rework the approval prompt so a long command can no longer push Allow/Block off-screen. The dialog shows the command (cut to a preview past a quarter of the terminal; Ctrl+O opens the full command in a scrolling viewer inside the prompt, which matters for commands a codemode script built, since the transcript shows only the script), then the guardian's note behind a `▌` bar in a fixed strong yellow, then the options, which stay pinned while you scroll the session. The review widget steps aside while the prompt is open instead of repeating it, and a settled result's reason now carries a `▌` bar in the outcome's color.
+
 ## 0.19.0
 
 ### Minor Changes

package/README.md

@@ -243,7 +243,7 @@ The guardian must return one of three decisions:
 
 - `approve`: execute the command
 - `revise`: block it and tell the main agent what to correct
-- `ask_user`: open an approval prompt (rendered with [`@hank-warren/pi-permission-selector`](../pi-permission-selector)'s `OptionSelector`): numbered options with `1`–`9` hotkeys, Tab to attach a note that is delivered to the agent as a steering user message, Esc to cancel — which blocks the command. In RPC mode, as in a pi-agents child whose prompts the parent shows, the prompt is Pi's plain select dialog instead: Allow or Block, without Tab notes. It waits for the RPC client's answer, so a client that never answers holds the command until the turn is cancelled
+- `ask_user`: open an approval prompt (rendered with [`@hank-warren/pi-permission-selector`](../pi-permission-selector)'s `OptionSelector`): the command, then the guardian's note behind a `▌` bar in a fixed strong yellow (gold on dark themes, dark goldenrod on light ones, regardless of the theme's `warning` color), then numbered options. A command taller than a quarter of the terminal is cut to a preview, and the prompt stays pinned while you scroll the session above. Ctrl+O opens the full command in a scrolling viewer inside the prompt (Shift+↑/↓ or the mouse wheel; PgUp/PgDn outside fullscreen) and closes it again — the only complete copy when a codemode script built the command, since the transcript then shows the script. Numbered options with `1`–`9` hotkeys, Tab to attach a note that is delivered to the agent as a steering user message, Esc to cancel — which blocks the command. In RPC mode, as in a pi-agents child whose prompts the parent shows, the prompt is Pi's plain select dialog instead: Allow or Block, without Tab notes. It waits for the RPC client's answer, so a client that never answers holds the command until the turn is cancelled
 
 ## Conversation context and caching
 
@@ -403,7 +403,7 @@ The default UI shows guardian progress as a single animated status line in a tem
 auto permissions · Git commit · ✶ waiting for openai-codex-auto-permissions/gpt-5.6-luna
 ```
 
-A sparkle spinner (`✶ ✸ ✻ ✽`) cycles while the guardian is reviewing and resolves to `✓ approved`, `↻ revision requested`, `? waiting for your approval`, or `✗ blocked`. When approval is needed, a static warning-colored `●` precedes the prompt heading so the active prompt remains visually distinct from the transcript. The guardian's reason, when present, appears on a dim second line; the command itself is not repeated because it is already visible in the Bash tool box. Configure the widget with:
+A sparkle spinner (`✶ ✸ ✻ ✽`) cycles while the guardian is reviewing and resolves to `✓ approved`, `↻ revision requested`, or `✗ blocked`. When approval is needed, the widget row steps aside for the approval dialog, whose static yellow `●` heading keeps it visually distinct from the transcript; with several commands under review, the summary line still counts the ones `waiting for your approval`. The reason, when present, appears on a second line behind a `▌` bar in the outcome's color; the command itself is not repeated because it is already visible in the Bash tool box. Configure the widget with:
 
 ```json
 {

package/approval-prompt.ts

@@ -0,0 +1,171 @@
+import { CURSOR_MARKER, Key, matchesKey, truncateToWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { OptionSelector, SelectorTheme } from "@hank-warren/pi-permission-selector/selector.ts";
+
+/** What an approval prompt shows, top to bottom above the options. */
+export interface ApprovalPromptContent {
+  header: string;
+  command: string;
+  /** Who wrote `note`: "Guardian", or "Review failed" for an infrastructure error. */
+  noteLabel: string;
+  note: string;
+  /**
+   * True when the transcript shows this exact command (a model-issued call).
+   * A call a codemode script built shows only the script there.
+   */
+  inTranscript: boolean;
+}
+
+export interface ApprovalPromptTheme extends SelectorTheme {
+  bold(text: string): string;
+  /** Pi 1.x themes report the background they are designed for. */
+  readonly appearance?: string;
+}
+
+/** The slice of pi-tui's mouse event this reads; older pi-tui releases do not export the type. */
+export interface WheelEvent {
+  type: string;
+  wheelDelta?: number;
+}
+
+const MIN_PREVIEW_ROWS = 3;
+/** Rows left for the rest of Pi's input dock when the full command is open. */
+const RESERVED_ROWS = 6;
+const MIN_VIEWER_ROWS = 3;
+/** The note's height while the viewer is open, so a long note cannot crowd the command out. */
+const VIEWER_NOTE_ROWS = 2;
+
+// Fixed rather than the theme's `warning`, which some themes make green or dim:
+// the approval note must read as a caution in every theme.
+const NOTE_YELLOW_DARK = "\x1b[38;2;255;215;0m";
+const NOTE_YELLOW_LIGHT = "\x1b[38;2;184;134;11m";
+const FG_RESET = "\x1b[39m";
+
+export function noteYellow(theme: Pick<ApprovalPromptTheme, "appearance">): (text: string) => string {
+  const color = theme.appearance === "light" ? NOTE_YELLOW_LIGHT : NOTE_YELLOW_DARK;
+  return (text) => `${color}${text}${FG_RESET}`;
+}
+
+/** Plain-text form for hosts that render the title themselves (RPC `ui.select`). */
+export function approvalPromptText(content: Omit<ApprovalPromptContent, "inTranscript">): string {
+  return `${content.header}\n\n${content.command}\n\n${content.noteLabel}: ${content.note}`;
+}
+
+function wrapBlock(text: string, width: number): string[] {
+  const lines: string[] = [];
+  for (const line of text.split("\n")) {
+    if (line.length === 0) lines.push("");
+    else lines.push(...wrapTextWithAnsi(line, width));
+  }
+  return lines;
+}
+
+/**
+ * The approval dialog: header, the command, the reviewer's note, then the
+ * options. It stays compact so the session transcript above keeps its room: a
+ * long command is cut to a preview. Ctrl+O opens the full command in a
+ * scrolling viewer inside the dialog, because the transcript does not always
+ * hold it (a codemode script's calls show only the script).
+ */
+export class ApprovalPrompt {
+  private expanded = false;
+  private scrollTop = 0;
+  private maxScroll = 0;
+  private viewportRows = 0;
+
+  constructor(
+    private readonly opts: {
+      content: ApprovalPromptContent;
+      selector: OptionSelector;
+      theme: ApprovalPromptTheme;
+      terminalRows: () => number;
+      requestRender: () => void;
+    },
+  ) {}
+
+  invalidate(): void {
+    this.opts.selector.invalidate();
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.ctrl("o"))) {
+      this.expanded = !this.expanded;
+      this.scrollTop = 0;
+      this.opts.requestRender();
+      return;
+    }
+    if (this.expanded) {
+      const page = Math.max(1, this.viewportRows - 1);
+      if (matchesKey(data, Key.pageUp)) return this.scrollBy(-page);
+      if (matchesKey(data, Key.pageDown)) return this.scrollBy(page);
+      if (matchesKey(data, Key.shift("up"))) return this.scrollBy(-1);
+      if (matchesKey(data, Key.shift("down"))) return this.scrollBy(1);
+    }
+    this.opts.selector.handleInput(data);
+  }
+
+  /** Scrolls the open viewer; otherwise the wheel falls through to the session. */
+  handleMouse(event: WheelEvent): { handled: true } | undefined {
+    if (!this.expanded || event.type !== "wheel" || !event.wheelDelta || this.maxScroll === 0) return undefined;
+    this.scrollBy(event.wheelDelta);
+    return { handled: true };
+  }
+
+  private scrollBy(lines: number): void {
+    const next = Math.max(0, Math.min(this.maxScroll, this.scrollTop + lines));
+    if (next === this.scrollTop) return;
+    this.scrollTop = next;
+    this.opts.requestRender();
+  }
+
+  private noteLines(width: number): string[] {
+    const { theme, content } = this.opts;
+    const yellow = noteYellow(theme);
+    const text = `${theme.bold(`${content.noteLabel}:`)} ${content.note}`;
+    const inner = Math.max(1, width - 2);
+    let lines = wrapBlock(text, inner);
+    if (this.expanded && lines.length > VIEWER_NOTE_ROWS) {
+      lines = lines.slice(0, VIEWER_NOTE_ROWS);
+      // Reflow the last kept row so the ellipsis always fits.
+      lines[VIEWER_NOTE_ROWS - 1] = truncateToWidth(`${lines[VIEWER_NOTE_ROWS - 1]} …`, inner, "…");
+    }
+    return lines.map((line) => `${yellow("▌ ")}${yellow(line)}`);
+  }
+
+  private preview(command: string[], width: number): string[] {
+    const { theme, content } = this.opts;
+    this.maxScroll = 0;
+    const cap = Math.max(MIN_PREVIEW_ROWS, Math.floor(this.opts.terminalRows() / 4));
+    if (command.length <= cap) return command;
+    const shown = cap - 1;
+    const where = content.inTranscript ? "ctrl+o view all, or scroll the session above" : "ctrl+o view all";
+    const more = `… ${command.length - shown} more lines · ${where}`;
+    return [...command.slice(0, shown), theme.fg("dim", truncateToWidth(more, width))];
+  }
+
+  private viewer(command: string[], width: number, fixedRows: number): string[] {
+    const budget = Math.max(MIN_PREVIEW_ROWS + fixedRows, this.opts.terminalRows() - RESERVED_ROWS);
+    // One row goes to the status line.
+    this.viewportRows = Math.max(MIN_VIEWER_ROWS, budget - fixedRows - 1);
+    this.maxScroll = Math.max(0, command.length - this.viewportRows);
+    this.scrollTop = Math.min(this.scrollTop, this.maxScroll);
+    const last = Math.min(command.length, this.scrollTop + this.viewportRows);
+    const status = `── lines ${this.scrollTop + 1}-${last} of ${command.length} · shift+↑↓/wheel scroll · ctrl+o collapse ──`;
+    return [...command.slice(this.scrollTop, last), this.opts.theme.fg("dim", truncateToWidth(status, width))];
+  }
+
+  render(width: number): string[] {
+    const w = Math.max(1, width);
+    const { theme, content } = this.opts;
+    const header = wrapBlock(`${noteYellow(theme)(theme.bold("●"))} ${content.header}`, w);
+    const note = this.noteLines(w);
+    const options = this.opts.selector.render(w);
+    const command = wrapBlock(content.command, w);
+    const fixedRows = header.length + 1 + 1 + note.length + 1 + options.length;
+    const commandRows = this.expanded ? this.viewer(command, w, fixedRows) : this.preview(command, w);
+    const lines = [...header, "", ...commandRows, "", ...note, "", ...options];
+    // A dock too short for the dialog clips from the top, keeping the options
+    // visible: Pi's layout scrolls a clipped component to its cursor line.
+    lines[lines.length - 1] = `${CURSOR_MARKER}${lines[lines.length - 1]}`;
+    return lines;
+  }
+}

package/index.ts

@@ -445,7 +445,13 @@ export default function autoPermissionsExtension(pi: ExtensionAPI) {
         choice = await promptSelect(
           pi,
           ctx,
-          `${gate.label} — Auto Permissions needs approval\n\n${detail}\n\n${command}`,
+          {
+            header: `${gate.label} — Auto Permissions needs approval`,
+            command,
+            noteLabel: decisionSource === "guardian" ? "Guardian" : "Review failed",
+            note: detail,
+            inTranscript: scope.target.scriptToolCallId === undefined,
+          },
           permissionPromptOptions(config.evaluationLog.enabled),
           promptSignal,
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hank-warren/pi-auto-permissions",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Fork of @ogulcancelik/pi-auto-permissions with dialog-answer user evidence: context-aware Bash permissions for Pi with automated guardian review.",
   "type": "module",
   "keywords": [
@@ -61,6 +61,7 @@
     "widget-status.ts",
     "classify.ts",
     "prompt-select.ts",
+    "approval-prompt.ts",
     "review-display.ts",
     "review-scope.ts",
     "session-overrides.ts",

package/prompt-select.ts

@@ -1,5 +1,6 @@
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { OptionSelector } from "@hank-warren/pi-permission-selector/selector.ts";
+import { ApprovalPrompt, type ApprovalPromptContent, approvalPromptText } from "./approval-prompt.js";
 
 /**
  * Tell Herdr this pane is waiting on a human, so a supervising agent can see
@@ -11,9 +12,9 @@ export function setHerdrBlocked(pi: ExtensionAPI, active: boolean, label?: strin
 }
 
 /**
- * Render an approval prompt with the shared `OptionSelector` through
- * `ctx.ui.custom()` (non-overlay, so it swaps into the editor area exactly
- * where `ctx.ui.select` used to render).
+ * Render an approval prompt — an `ApprovalPrompt` wrapping the shared
+ * `OptionSelector` — through `ctx.ui.custom()` (non-overlay, so it swaps into
+ * the editor area exactly where `ctx.ui.select` used to render).
  *
  * Cancellation parity with `ctx.ui.select` — all of these resolve
  * `undefined`, which every caller must treat as deny/cancel, never allow:
@@ -33,11 +34,11 @@ export function setHerdrBlocked(pi: ExtensionAPI, active: boolean, label?: strin
 export function promptSelect(
   pi: ExtensionAPI,
   ctx: ExtensionContext,
-  title: string,
+  content: ApprovalPromptContent,
   values: string[],
   signal: AbortSignal,
 ): Promise<string | undefined> {
-  if (ctx.mode === "rpc") return ctx.ui.select(title, values, { signal });
+  if (ctx.mode === "rpc") return ctx.ui.select(approvalPromptText(content), values, { signal });
   return ctx.ui.custom<string | undefined>((tui, theme, _keybindings, done) => {
     let finished = false;
     const onAbort = () => finish(undefined);
@@ -48,7 +49,6 @@ export function promptSelect(
       done(result);
     };
     const selector = new OptionSelector({
-      title: `${theme.fg("warning", theme.bold("●"))} ${title}`,
       options: values.map((value) => ({ value, label: value })),
       allowComment: true,
       theme,
@@ -69,6 +69,12 @@ export function promptSelect(
     // `done` before the factory resolves is safe: pi marks the dialog closed
     // and never mounts the component.
     if (signal.aborted) onAbort();
-    return selector;
+    return new ApprovalPrompt({
+      content,
+      selector,
+      theme,
+      terminalRows: () => tui.terminal.rows,
+      requestRender: () => tui.requestRender(),
+    });
   });
 }

package/review-display.ts

@@ -76,7 +76,8 @@ export function createReviewDisplay(deps: { isSessionActive: () => boolean }): R
     if (ctx.mode !== "tui") return;
     const rows = [...active.values()];
     const shown = rows.length === 1 ? rows[0] : rows.length === 0 ? settled : undefined;
-    if (rows.length === 0 && !settled) {
+    // A lone review waiting on the human is shown by the approval dialog itself.
+    if ((rows.length === 0 && !settled) || shown?.state === "ask_user") {
       ctx.ui.setWidget(WIDGET_KEY, undefined);
       return;
     }

package/widget-status.ts

@@ -84,8 +84,9 @@ export interface ReviewLinePalette {
 }
 
 /**
- * Render the widget content: one status line, plus a dim detail line only
- * when a guardian reason is present. The command is intentionally omitted —
+ * Render the widget content: one status line, plus a detail line behind a
+ * `▌` bar in the outcome's tone (the approval dialog's note style) only when
+ * a reason is present. The command is intentionally omitted —
  * it is already visible in the bash tool box above.
  */
 export function reviewStatusLines(
@@ -101,7 +102,7 @@ export function reviewStatusLines(
   const lines = [
     `${palette.header("auto permissions")} ${palette.muted(`· ${gateLabel} ·`)} ${status}`,
   ];
-  if (detail) lines.push(palette.muted(detail));
+  if (detail) lines.push(`${palette[frame.tone]("▌")} ${palette.muted(detail)}`);
   return lines;
 }