@zeldrisho/pi-gate 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.7.3] - 2026-10-28
+
+### Changed
+
+- Show the approval timeout and configured confirmation keys, and allow horizontal scrolling of long command lines.
+
+## [0.7.2] - 2026-10-25
+
+### Changed
+
+- Show approval prompts in Pi’s normal dialog area, using the terminal background and Pi theme accents.
+- Highlight matched command text and clarify agent guidance for timeouts, denials, and policy blocks.
+
 ## [0.7.1] - 2026-10-25
 
 ### Changed
@@ -105,7 +118,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - support `prompt`, `block`, and `allow` actions, with longest-pattern-wins resolution
 - block rather than auto-approve in non-UI modes
 
-[Unreleased]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.7.1...HEAD
+[Unreleased]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.7.3...HEAD
+[0.7.3]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.7.2...pi-gate-v0.7.3
+[0.7.2]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.7.1...pi-gate-v0.7.2
 [0.7.1]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.7.0...pi-gate-v0.7.1
 [0.7.0]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.6.1...pi-gate-v0.7.0
 [0.6.1]: https://github.com/zeldrisho/pi-packages/compare/pi-gate-v0.6.0...pi-gate-v0.6.1

package/README.md

@@ -46,9 +46,7 @@ pi-gate is a guard rail, not a sandbox. Complex shell syntax, pipelines, redirec
 
 The built-in `bash` tool is gated, and `write`/`edit` calls targeting the gate config require approval. Prompt dialogs offer `Allow` and `Deny`; approvals are never remembered. To stop repeated prompts, add a specific `allow` rule to `gate.json`.
 
-Approval dialogs are serialized for concurrent tool calls; cancellation, shutdown, reload, session replacement, or a policy change while a dialog is open denies the pending call. Calls queued before shutdown or session replacement are also denied.
-
-Long commands are truncated in approval dialogs, but an approved command executes in full. Denied, dismissed, blocked, and timed-out calls stop the turn; other allowed calls in a parallel batch may still run. In non-interactive modes (`-p`, JSON), commands requiring approval are denied.
+The approval dialog highlights the matched command text. Long commands are truncated in the dialog but execute in full if approved. Denials, blocks, dismissals, and timeouts stop the turn; other allowed calls in a parallel batch may still run. In non-interactive modes (`-p`, JSON), commands requiring approval are denied.
 
 In Herdr-managed panes, install Herdr's Pi integration with `herdr integration install pi` to report pending approvals as `blocked`. Herdr is optional.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeldrisho/pi-gate",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Pi extension that gates bash commands and protects its configuration from tool edits",
   "keywords": [
     "command-blocking",
@@ -33,13 +33,15 @@
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "^1.4.0",
+    "@earendil-works/pi-tui": "^1.4.0",
     "typebox": "^1.4.2",
     "typescript": "^7.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.3.0",
     "vite-plus": "1.3.0"
   },
   "peerDependencies": {
-    "@earendil-works/pi-coding-agent": "*"
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
   },
   "engines": {
     "node": ">=24"

package/src/approval-prompt.ts

@@ -0,0 +1,179 @@
+import { keyHint, rawKeyHint } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import {
+  Key,
+  matchesKey,
+  sliceByColumn,
+  truncateToWidth,
+  visibleWidth,
+  wrapTextWithAnsi,
+} from "@earendil-works/pi-tui";
+
+const ACTIONS = ["Allow", "Deny"] as const;
+
+type Action = (typeof ACTIONS)[number];
+
+type Foreground = "text" | "muted" | "accent" | "toolOutput" | "border";
+
+export interface ApprovalPromptTheme {
+  style(text: string, options: { fg?: Foreground; bold?: boolean }): string;
+  bold(text: string): string;
+}
+
+export interface ApprovalPromptKeybindings {
+  matches(
+    data: string,
+    action: "tui.select.up" | "tui.select.down" | "tui.select.confirm" | "tui.select.cancel",
+  ): boolean;
+}
+
+export interface ApprovalPromptTui {
+  requestRender(): void;
+}
+
+/** Theme-aware approval dialog used by the interactive TUI. */
+export function createApprovalPrompt(
+  tui: ApprovalPromptTui,
+  theme: ApprovalPromptTheme,
+  keybindings: ApprovalPromptKeybindings,
+  done: (result: Action | undefined) => void,
+  command: string,
+  rule: string,
+  deadline?: number,
+): Component {
+  let selectedIndex = 0;
+  let horizontalOffset = 0;
+  let maxHorizontalOffset = 0;
+  let pageWidth = 1;
+
+  const invalidate = () => {};
+
+  const innerWidth = (width: number) => Math.max(1, width - 4);
+
+  const panelLine = (
+    text: string,
+    width: number,
+    color: "text" | "muted" | "accent" | "toolOutput" = "text",
+  ) => {
+    const contentWidth = innerWidth(width);
+    const content = truncateToWidth(text, contentWidth, "…");
+    const padding = " ".repeat(Math.max(0, contentWidth - visibleWidth(content)));
+
+    const styled = theme.style(`${content}${padding}`, { fg: color });
+
+    return `  ${styled}  `;
+  };
+
+  const component: Component = {
+    render(width: number): string[] {
+      const available = innerWidth(width);
+
+      const longestLine = Math.max(
+        0,
+        ...command.split("\n").map((line) => visibleWidth(line.replace(/[»«]/gu, ""))),
+      );
+
+      pageWidth = longestLine > available ? Math.max(1, available - 2) : available;
+      maxHorizontalOffset = longestLine > available ? longestLine - pageWidth : 0;
+      horizontalOffset = Math.min(horizontalOffset, maxHorizontalOffset);
+      const border = theme.style("─".repeat(available + 4), { fg: "border" });
+
+      const lines = [
+        border,
+        panelLine(
+          theme.bold(
+            `${deadline === undefined ? "" : `(${Math.max(0, Math.ceil((deadline - Date.now()) / 1_000))}s) `}pi-gate: allow this command?`,
+          ),
+          width,
+          "accent",
+        ),
+        panelLine("Review the requested command or file change:", width, "muted"),
+        panelLine("", width),
+        ...command.split("\n").map((line) => {
+          const contentWidth = innerWidth(width);
+          const parts = line.split(/([»«])/u);
+          let matched = false;
+
+          const rendered = parts
+            .map((part) => {
+              if (part === "»") {
+                matched = true;
+
+                return "";
+              }
+
+              if (part === "«") {
+                matched = false;
+
+                return "";
+              }
+
+              return theme.style(part, { fg: matched ? "accent" : "toolOutput", bold: matched });
+            })
+            .join("");
+
+          const visible = line.replace(/[»«]/gu, "");
+          const content = sliceByColumn(rendered, horizontalOffset, pageWidth, true);
+          const prefix = horizontalOffset > 0 && visibleWidth(visible) > 0 ? "…" : "";
+          const suffix = visibleWidth(visible) > horizontalOffset + pageWidth ? "…" : "";
+
+          const padding = " ".repeat(
+            Math.max(0, contentWidth - visibleWidth(prefix + content + suffix)),
+          );
+
+          return `  ${theme.style(prefix, { fg: "toolOutput" })}${content}${theme.style(suffix + padding, { fg: "toolOutput" })}  `;
+        }),
+        panelLine("", width),
+        panelLine(`Matched rule: ${rule}`, width, "muted"),
+        panelLine("", width),
+        ...ACTIONS.map((action, index) => {
+          const selected = index === selectedIndex;
+          const label = `${selected ? "→ " : "  "}${action}`;
+          const row = truncateToWidth(label, available);
+          const padded = `${row}${" ".repeat(Math.max(0, available - visibleWidth(row)))}`;
+
+          return theme.style(`  ${padded}  `, {
+            fg: selected ? "accent" : "text",
+          });
+        }),
+        panelLine("", width),
+        ...wrapTextWithAnsi(
+          `${rawKeyHint("↑↓", "navigate")}  ${maxHorizontalOffset > 0 ? `${rawKeyHint("←→", "scroll command")}  ` : ""}${keyHint("tui.select.confirm", "select")}  ${keyHint("tui.select.cancel", "cancel")}`,
+          available,
+        ).map((line) => `  ${line}  `),
+        border,
+      ];
+
+      return lines.map((line) => truncateToWidth(line, width));
+    },
+    handleInput(data: string): void {
+      if (matchesKey(data, Key.left)) {
+        horizontalOffset = Math.max(0, horizontalOffset - pageWidth);
+      } else if (matchesKey(data, Key.right)) {
+        horizontalOffset = Math.min(maxHorizontalOffset, horizontalOffset + pageWidth);
+      } else if (keybindings.matches(data, "tui.select.up") || data === "k") {
+        selectedIndex = Math.max(0, selectedIndex - 1);
+      } else if (keybindings.matches(data, "tui.select.down") || data === "j") {
+        selectedIndex = Math.min(ACTIONS.length - 1, selectedIndex + 1);
+      } else if (keybindings.matches(data, "tui.select.confirm")) {
+        done(ACTIONS[selectedIndex]);
+
+        return;
+      } else if (keybindings.matches(data, "tui.select.cancel")) {
+        done(undefined);
+
+        return;
+      } else {
+        return;
+      }
+
+      component.invalidate();
+      tui.requestRender();
+    },
+    invalidate,
+  };
+
+  return component;
+}
+
+export type ApprovalAction = Action;

package/src/index.ts

@@ -31,8 +31,10 @@
 import {
   isToolCallEventType,
   type ExtensionAPI,
+  type ExtensionContext,
   type ToolCallEventResult,
 } from "@earendil-works/pi-coding-agent";
+import { createApprovalPrompt, type ApprovalAction } from "./approval-prompt";
 import { configPath, ensureConfig, loadConfigResult } from "./config";
 import {
   bashTouchesConfig,
@@ -44,6 +46,85 @@ import { formatCommandForDisplay, formatPromptCommand, formatRule } from "./disp
 
 const HERDR_BLOCKED_LABEL = "pi-gate: approval required";
 
+/** Uses a themed terminal component in TUI mode and Pi's standard selector elsewhere. */
+async function selectApproval(
+  ctx: ExtensionContext,
+  timeoutMs: number,
+  signal: AbortSignal,
+  command: string,
+  rule: string,
+  showMatchHint: boolean,
+): Promise<string | undefined> {
+  if (ctx.mode !== "tui" || !ctx.ui.custom) {
+    return ctx.ui.select(
+      `pi-gate: allow this command?\n\n${command}\n\nMatched rule: ${rule}${showMatchHint ? "\nMatched command text is wrapped in »…«" : ""}`,
+      ["Allow", "Deny"],
+      { timeout: timeoutMs, signal },
+    );
+  }
+
+  let uiDone: ((value: ApprovalAction | undefined) => void) | undefined;
+  let settled = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let countdown: ReturnType<typeof setInterval> | undefined;
+  let removeAbortListener: (() => void) | undefined;
+
+  return new Promise<ApprovalAction | undefined>((resolve, reject) => {
+    const finish = (value: ApprovalAction | undefined) => {
+      if (settled) return;
+      settled = true;
+
+      if (timer !== undefined) clearTimeout(timer);
+
+      if (countdown !== undefined) clearInterval(countdown);
+      removeAbortListener?.();
+      resolve(value);
+      uiDone?.(value);
+    };
+
+    const onAbort = () => finish(undefined);
+
+    try {
+      const deadline = Date.now() + timeoutMs;
+      timer = setTimeout(() => finish(undefined), timeoutMs);
+
+      const uiPromise = ctx.ui.custom<ApprovalAction | undefined>(
+        (tui, theme, keybindings, done) => {
+          uiDone = done;
+          countdown = setInterval(() => tui.requestRender(), 1_000);
+
+          return createApprovalPrompt(tui, theme, keybindings, done, command, rule, deadline);
+        },
+      );
+
+      uiPromise
+        .then(finish)
+        .catch(reject)
+        .finally(() => {
+          if (timer !== undefined) clearTimeout(timer);
+
+          if (countdown !== undefined) clearInterval(countdown);
+          removeAbortListener?.();
+        });
+
+      if (signal) {
+        signal.addEventListener("abort", onAbort, { once: true });
+        removeAbortListener = () => signal.removeEventListener("abort", onAbort);
+
+        if (signal.aborted) onAbort();
+      }
+    } catch (error) {
+      settled = true;
+
+      if (timer !== undefined) clearTimeout(timer);
+
+      if (countdown !== undefined) clearInterval(countdown);
+      removeAbortListener?.();
+      reject(error);
+    }
+  });
+}
+
 const MAX_REASON_RULE_NAME_LENGTH = 27;
 
 /** Escapes a rule pattern for terminal display and bounds its length in denial messages. */
@@ -57,7 +138,7 @@ function reasonRuleName(pattern: string): string {
 
 /** Formats an approval timeout with the matched rule, elapsed limit in seconds, and retry guidance. */
 function timeoutReason(pattern: string, timeoutMs: number): string {
-  return `pi-gate: no response to rule "${reasonRuleName(pattern)}" within ${timeoutMs / 1_000}s; command not run. Ask the user whether to retry.`;
+  return `pi-gate: no response to rule "${reasonRuleName(pattern)}" within ${timeoutMs / 1_000}s; command not run. Ask the user whether to retry approval.`;
 }
 
 function reportHerdrBlocked(pi: ExtensionAPI, ctx: { mode?: string }, active: boolean): void {
@@ -218,7 +299,7 @@ export default function piGate(pi: ExtensionAPI): void {
       const rule = configChange ? CONFIG_CHANGE_REASON : formatRule(match);
 
       if (match.action === "block") {
-        const reason = `pi-gate: blocked by rule "${reasonRuleName(match.pattern)}". Do not retry or use equivalent commands; ask the user.`;
+        const reason = `pi-gate: command blocked by rule "${reasonRuleName(match.pattern)}". Ask the user before proceeding.`;
 
         if (ctx.hasUI) ctx.ui.notify(reason, "warning");
 
@@ -230,7 +311,7 @@ export default function piGate(pi: ExtensionAPI): void {
           block: true,
           reason: configChange
             ? CONFIG_CHANGE_REASON
-            : `pi-gate: rule "${reasonRuleName(match.pattern)}" needs approval but no UI is available. Do not retry; ask the user.`,
+            : `pi-gate: rule "${reasonRuleName(match.pattern)}" needs approval but no UI is available. Ask the user before proceeding.`,
           terminate: true,
         };
       }
@@ -248,11 +329,7 @@ export default function piGate(pi: ExtensionAPI): void {
 
       try {
         const promptStartedAt = Date.now();
-        choice = await ctx.ui.select(
-          `pi-gate: allow this command?\n\n${promptCommand}\n\nMatched rule: ${rule}${configChange ? "" : "\nMatched command text is wrapped in »…«"}`,
-          ["Allow", "Deny"],
-          { timeout: timeoutMs, signal },
-        );
+        choice = await selectApproval(ctx, timeoutMs, signal, promptCommand, rule, !configChange);
         // Pi returns undefined for both dismissal and timeout; elapsed time separates the timeout case.
         timedOut = choice === undefined && Date.now() - promptStartedAt >= timeoutMs;
       } finally {
@@ -277,7 +354,7 @@ export default function piGate(pi: ExtensionAPI): void {
             ? timeoutReason(match.pattern, timeoutMs)
             : configChange
               ? CONFIG_CHANGE_REASON
-              : `pi-gate: denied by rule "${reasonRuleName(match.pattern)}". Do not retry or use equivalent commands; ask the user.`,
+              : `pi-gate: command not run because approval was denied. Ask the user before retrying (rule "${reasonRuleName(match.pattern)}").`,
           terminate: true,
         };
       }