@yunazgr/pi-companion 0.3.3 → 0.3.4

package/README.md

@@ -2,7 +2,7 @@
 
 Lightweight, local-first remote control for Pi sessions.
 
-**New in 0.3.3:** Provider usage now shows measured session tokens and cost without pretending they are subscription quotas. Compatible extensions can still supply real weekly/5-hour limits. Mobile sessions, automations and usage use cards; the overview has compact activity filters; automation buttons share a consistent style; pull-to-refresh is gesture-only. No data or provider credentials are collected by the daemon outside the already shared session metadata.
+**New in 0.3.4:** Custom Pi terminal popups now appear in Companion with a claymorphism shell, scrollable terminal view, adjustable text size, and touch-friendly navigation and input controls. Interact with custom slash-command screens or question pickers from either device; native question sheets still work for standard dialogs and `jar_ask`.
 
 **New in 0.3.2:** responsive automation and run-history tables, rounded status chips, matching clay-icon headers, and a single-column automation workspace with full-width mobile controls. **Edit automation** scrolls to and focuses the inline editor. Pull to refresh Overview, Sessions, Automations, or Settings—with a gesture; unsaved settings stay intact. Camera-policy guidance now explains HTTPS proxy configuration. Existing rich results, staged job editing, optional retries, and answers-only automation sessions are retained. See [automations](docs/automations.md).
 
@@ -151,7 +151,11 @@ A paired device cannot access sessions that have not explicitly enabled remote c
 
 Pi's `companion_ask_user` tool asks one to four questions at once. Each question can offer options with descriptions, allow several choices (`multiSelect`), and accept a free-text "Other" answer; a question without options is free text. The browser shows them in a bottom sheet within thumb reach; "Later" hides it until you tap the waiting-question badge.
 
-Dialogs from other extensions (`ctx.ui.select`, `ctx.ui.confirm`, `ctx.ui.input`) are relayed to the same sheet while the terminal dialog stays open: whichever side answers first wins and the other closes. Question tools that draw their own `ctx.ui.custom` picker are relayed through a small adapter: pi-jar's `jar_ask` is supported, and a companion answer completes its terminal picker. Other `ctx.ui.custom` components and `ctx.ui.editor` stay terminal-only because they cannot be answered from outside. Pending questions are part of the session snapshot, so a browser that connects later still sees them.
+Dialogs from other extensions (`ctx.ui.select`, `ctx.ui.confirm`, `ctx.ui.input`) are relayed to the same sheet while the terminal dialog stays open: whichever side answers first wins and the other closes. Question tools that draw their own `ctx.ui.custom` picker can use a native-sheet adapter: pi-jar's `jar_ask` is supported, and a companion answer completes its terminal picker. Standard dialogs work for any extension, not just `jar_ask`. Pending questions are part of the session snapshot, so a browser that connects later still sees them.
+
+Other `ctx.ui.custom` components are mirrored in a terminal-style popup, including custom slash-command screens. ANSI colors and selection highlighting are preserved inside a clay-styled, vertically and horizontally scrollable viewer. Text-size controls and view-scroll buttons make long or wide screens easier to read; separate navigation controls and expandable extra keys operate the original component. The input bar stays available while the popup body scrolls, and unsent text is retained if the connection drops. Enter submits according to the extension's keybindings; Close sends Escape so the component supplies its own cancellation result. Components that ignore Escape may remain open. Local completion closes the companion view, and pending frames survive browser reconnects. Ending sharing stops mirroring without closing the local component.
+
+Custom popups use the local terminal's rendered width (scroll horizontally on narrow screens), not an independently resized terminal. Mouse-only interactions, terminal images, and direct terminal I/O are not mirrored. RPC automation sessions cannot mirror custom terminal components because Pi does not create them in RPC mode. `ctx.ui.editor` remains terminal-only.
 
 ## Refreshing your workspace
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yunazgr/pi-companion",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Local-first remote control for Pi sessions: live activity feed, steering, git diff, file drop and phone pairing from a single Rust daemon.",
   "keywords": [
     "pi-package",

package/src/ask.ts

@@ -1,5 +1,6 @@
 import type { ExtensionUIContext } from "@earendil-works/pi-coding-agent";
 import type { AskAnswers, AskOption, AskQuestion, AskRequest } from "./protocol.js";
+import type { PopupRelay } from "./popup.js";
 
 export type AskInput = Omit<AskRequest, "requestId" | "createdAt">;
 
@@ -16,10 +17,10 @@ const RELAYED = Symbol.for("pi-companion.dialog-relay");
  *
  * Pi hands every extension the same ui object, so patching it once per object covers all of
  * them. The terminal dialog stays open; whichever side answers first wins and the other is
- * dismissed. `editor` takes no AbortSignal, so it stays terminal-only. `custom` dialogs are
- * relayed only for known question tools (see ToolDialogRelay).
+ * dismissed. `editor` takes no AbortSignal, so it stays terminal-only. Known custom question
+ * tools use native sheets (ToolDialogRelay); other custom components use terminal mirroring.
  */
-export function relayDialogs(ui: ExtensionUIContext, channel: AskChannel, tools: ToolDialogRelay) {
+export function relayDialogs(ui: ExtensionUIContext, channel: AskChannel, tools: ToolDialogRelay, popups?: PopupRelay) {
   const target = ui as ExtensionUIContext & { [RELAYED]?: true };
   if (target[RELAYED]) return;
   target[RELAYED] = true;
@@ -32,7 +33,7 @@ export function relayDialogs(ui: ExtensionUIContext, channel: AskChannel, tools:
 
   ui.custom = (factory, options) => {
     const complete = tools.claim();
-    if (!complete) return custom(factory, options);
+    if (!complete) return custom(popups ? popups.wrap(factory) : factory, options);
     return custom((tui, theme, keybindings, done) => {
       complete((result) => done(result as never));
       return factory(tui, theme, keybindings, done);

package/src/bridge.ts

@@ -6,6 +6,7 @@ import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-a
 import { relayDialogs, ToolDialogRelay, type AskChannel, type AskInput } from "./ask.js";
 import { ensureDaemon } from "./daemon.js";
 import { TelemetryRelay } from "./telemetry.js";
+import { PopupRelay } from "./popup.js";
 import type { AskAnswers, AskRequest, BridgeMessage, ServerMessage, SessionSnapshot, TempFile } from "./protocol.js";
 
 const execFileAsync = promisify(execFile);
@@ -14,6 +15,10 @@ export class CompanionBridge implements AskChannel {
   readonly sessionId = randomUUID();
   /** Relays question tools that ask through ctx.ui.custom (fed from tool_execution_* events). */
   readonly toolDialogs = new ToolDialogRelay(this);
+  readonly popups = new PopupRelay(popups => {
+    this.snapshot.popups = popups;
+    this.send({ type: "session.update", session: { popups } });
+  });
   private ws?: WebSocket;
   private ctx?: ExtensionContext;
   private reconnect?: NodeJS.Timeout;
@@ -48,7 +53,7 @@ export class CompanionBridge implements AskChannel {
 
   setContext(ctx: ExtensionContext) {
     this.ctx = ctx;
-    if (this.activated && this.snapshot.remoteEnabled && ctx.hasUI && !this.restoreDialogs) this.restoreDialogs = relayDialogs(ctx.ui, this, this.toolDialogs);
+    if (this.activated && this.snapshot.remoteEnabled && ctx.hasUI && !this.restoreDialogs) this.restoreDialogs = relayDialogs(ctx.ui, this, this.toolDialogs, this.popups);
     this.refreshMetadata();
   }
 
@@ -115,6 +120,7 @@ export class CompanionBridge implements AskChannel {
     // End only Companion sharing: Pi itself and its local history keep running.
     this.restoreDialogs?.();
     this.restoreDialogs = undefined;
+    this.popups.clear();
     this.restoreStatus?.();
     this.restoreStatus = undefined;
     if (this.metadataTimer) clearInterval(this.metadataTimer);
@@ -144,7 +150,7 @@ export class CompanionBridge implements AskChannel {
   /** Only an explicit /companion command may activate this session's bridge. */
   activate() {
     this.activated = true;
-    if (this.snapshot.remoteEnabled && this.ctx?.hasUI && !this.restoreDialogs) this.restoreDialogs = relayDialogs(this.ctx.ui, this, this.toolDialogs);
+    if (this.snapshot.remoteEnabled && this.ctx?.hasUI && !this.restoreDialogs) this.restoreDialogs = relayDialogs(this.ctx.ui, this, this.toolDialogs, this.popups);
     if (!this.snapshot.remoteEnabled) return;
     const ui = this.ctx?.ui;
     if (ui && typeof ui.setStatus === "function" && !this.restoreStatus) {
@@ -233,6 +239,7 @@ export class CompanionBridge implements AskChannel {
     this.closed = true;
     this.restoreDialogs?.();
     this.restoreDialogs = undefined;
+    this.popups.clear();
     this.restoreStatus?.();
     this.restoreStatus = undefined;
     if (this.metadataTimer) clearInterval(this.metadataTimer);
@@ -335,6 +342,12 @@ export class CompanionBridge implements AskChannel {
       case "git_diff":
         await this.sendGitDiff(Boolean(command.staged));
         break;
+      case "popup_input":
+        this.popups.input(command.popupId, command.data);
+        break;
+      case "popup_close":
+        this.popups.close(command.popupId);
+        break;
       case "ask_answer":
         this.asks.get(command.requestId)?.settle(command.answers ?? {});
         break;

package/src/popup.ts

@@ -0,0 +1,83 @@
+import { randomUUID } from "node:crypto";
+import type { ExtensionUIContext } from "@earendil-works/pi-coding-agent";
+import type { TerminalPopup } from "./protocol.js";
+
+type CustomFactory = Parameters<ExtensionUIContext["custom"]>[0];
+type FactoryArgs = Parameters<CustomFactory>;
+type PopupFactory<T> = (tui: FactoryArgs[0], theme: FactoryArgs[1], keys: FactoryArgs[2], done: (result: T) => void) => ReturnType<CustomFactory>;
+
+/** Mirrors rendered terminal lines, never serializes or evaluates extension code in the browser. */
+export class PopupRelay {
+  private frameTimer?: NodeJS.Timeout;
+  private generation = 0;
+  private active = new Map<string, { frame: TerminalPopup; input: (data: string) => void; close: () => void }>();
+  constructor(private publish: (popups: TerminalPopup[]) => void) {}
+
+  wrap<T>(factory: PopupFactory<T>) {
+    return async (...args: Parameters<typeof factory>) => {
+      const [tui, theme, keys, done] = args;
+      const generation = this.generation;
+      const id = randomUUID();
+      let finished = false;
+      const remove = () => {
+        finished = true;
+        if (this.active.delete(id)) this.flush();
+      };
+      const finish = (result: T) => { if (finished) return; remove(); done(result); };
+      const component = await factory(tui, theme, keys, finish);
+      if (finished || generation !== this.generation) return component;
+      const entry = {
+        frame: { id, lines: [], width: 0 } as TerminalPopup,
+        input: (data: string) => { component.handleInput?.(data); tui.requestRender(); },
+        // Let the component produce its own cancellation result; arbitrary factories
+        // may require a tagged result rather than undefined.
+        close: () => { component.handleInput?.("\x1b"); tui.requestRender(); }
+      };
+      this.active.set(id, entry);
+      // Patch the instance rather than proxying it: preserve focus, cursor and mouse behavior.
+      const render = component.render;
+      const dispose = component.dispose;
+      component.render = function(width) {
+        const lines = render.call(this, width);
+        if (!finished && relay.active.has(id)) {
+          let budget = 128_000;
+          const bounded: string[] = [];
+          for (const line of lines.slice(0, 500)) {
+            const text = line.slice(0, Math.min(16384, budget));
+            bounded.push(text);
+            budget -= text.length;
+            if (budget <= 0) break;
+          }
+          const frame = { id, width, lines: bounded };
+          if (JSON.stringify(frame) !== JSON.stringify(entry.frame)) {
+            const firstFrame = entry.frame.width === 0;
+            entry.frame = frame;
+            if (firstFrame) relay.flush();
+            else relay.scheduleFrame();
+          }
+        }
+        return lines;
+      };
+      const relay = this;
+      component.dispose = function() { remove(); dispose?.call(this); };
+      return component;
+    };
+  }
+
+  input(id: string, data: unknown) {
+    if (typeof data === "string" && data.length > 0 && data.length <= 4096) this.active.get(id)?.input(data);
+  }
+  close(id: string) { this.active.get(id)?.close(); }
+  /** Stop mirroring without terminating the user's local dialog. */
+  clear() { this.generation++; if (!this.active.size) return; this.active.clear(); this.flush(); }
+  private scheduleFrame() {
+    if (this.frameTimer) return;
+    this.frameTimer = setTimeout(() => this.flush(), 50);
+    this.frameTimer.unref();
+  }
+  private flush() {
+    if (this.frameTimer) clearTimeout(this.frameTimer);
+    this.frameTimer = undefined;
+    this.publish([...this.active.values()].map(entry => entry.frame));
+  }
+}

package/src/protocol.ts

@@ -55,7 +55,10 @@ export type SessionTelemetry = {
   providers?: ProviderUsage[];
 };
 
+export type TerminalPopup = { id: string; lines: string[]; width: number };
+
 export type SessionSnapshot = {
+  popups?: TerminalPopup[];
   id: string;
   name?: string | null;
   cwd: string;
@@ -73,6 +76,8 @@ export type SessionSnapshot = {
 };
 
 export type BrowserCommand =
+  | { type: "popup_input"; popupId: string; data: string }
+  | { type: "popup_close"; popupId: string }
   | { type: "prompt"; text: string }
   | { type: "steer"; text: string }
   | { type: "abort" }