@yunazgr/pi-companion 0.3.2 → 0.3.4

package/README.md

@@ -2,7 +2,9 @@
 
 Lightweight, local-first remote control for Pi sessions.
 
-**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—or use the Refresh button; 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).
+**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).
 
 Pi Companion is deliberately not another agent runtime. Pi owns execution and conversation state. A single Rust daemon owns session discovery, pairing, temporary file exchange, browser fan-out, and the embedded web UI.
 
@@ -149,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
 
@@ -192,7 +198,7 @@ Network loss and daemon restarts reconnect automatically with bounded backoff. H
 
 Shared session title, model, effort and working directory refresh on Pi events and once per second while sharing, including while idle. Session detail shows context-window usage and estimated session cost. Native Pi context and recorded usage costs take precedence; independent extension reports fill unavailable fields. Missing usage is shown as unavailable, not zero.
 
-**Settings → Usage** is available on the console and paired devices. It displays the latest snapshot per provider: weekly usage, 5-hour usage when reported, reset times, source and snapshot age. Quota snapshots are not added across sessions or accounts. These are extension-reported limits, not billing totals or locally inferred quotas; providers without a quota report remain unavailable.
+**Settings → Usage** is available on the console and paired devices. It displays the latest snapshot per provider: weekly usage, 5-hour usage when reported, reset times, source and snapshot age. Quota snapshots are not added across sessions or accounts. Those limits are extension-reported, not billing totals or locally inferred quotas. Companion additionally reports actual session token consumption and cost grouped by the model's provider from Pi's recorded assistant messages; this is session-only data, not an account-wide tally. Settings selects the newest consumption independently of quota freshness and displays their timestamps and session-ended indicators separately. When no quota adapter is installed, 5-hour and weekly quotas still show as unavailable rather than fabricated percentages.
 
 Extensions can publish a provider-neutral event without importing Companion:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yunazgr/pi-companion",
-  "version": "0.3.2",
+  "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

@@ -43,6 +43,11 @@ export type ProviderUsage = {
   updatedAt: string;
   weekly?: UsageWindow;
   fiveHour?: UsageWindow;
+  /** Observed consumption in this shared Pi session, not account quota utilization. */
+  sessionTokens?: number;
+  sessionCost?: number;
+  /** Native consumption freshness, independent of the account quota report. */
+  sessionUpdatedAt?: string;
 };
 export type SessionTelemetry = {
   context?: { tokens?: number; window?: number; percent?: number; source?: string };
@@ -50,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;
@@ -68,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" }

package/src/telemetry.ts

@@ -51,6 +51,7 @@ export function normalizeTelemetry(value: unknown, source = "extension", now = D
 /** Independent sources may supply different fields; one broken/missing adapter cannot erase another. */
 export class TelemetryRelay {
   private sources = new Map<string, { telemetry: SessionTelemetry; contextAt?: number; costAt?: number }>();
+  private nativeUsage = new Map<string, { fingerprint: string; updatedAt: string }>();
 
   ingest(value: unknown, fallbackSource = "extension", now = Date.now()) {
     const raw = record(value);
@@ -140,6 +141,43 @@ export class TelemetryRelay {
       }
       if (known && Number.isFinite(total)) result.cost = { amount: total, currency: "USD", source: "native" };
     } catch { /* Preserve extension estimate when native usage is unavailable. */ }
+    // Native session entries are available without another plugin. They report actual
+    // consumption, not provider subscription limits, and must never fabricate quotas.
+    try {
+      const totals = new Map<string, { tokens: number; cost: number; hasTokens: boolean; hasCost: boolean }>();
+      for (const entry of ctx?.sessionManager?.getEntries?.() ?? []) {
+        const raw = record(entry);
+        if (raw?.type !== "message") continue;
+        const message = record(raw.message);
+        if (message?.role !== "assistant") continue;
+        const provider = text(message.provider);
+        const usage = record(message.usage);
+        if (!provider || !usage) continue;
+        const pieces = [usage.input, usage.output, usage.cacheRead, usage.cacheWrite].map(number);
+        const tokens = number(usage.totalTokens) ?? (pieces.some(value => value !== undefined)
+          ? pieces.reduce<number>((sum, value) => sum + (value ?? 0), 0) : undefined);
+        const cost = number(record(usage.cost)?.total);
+        if (tokens === undefined && cost === undefined) continue;
+        const total = totals.get(provider) ?? { tokens: 0, cost: 0, hasTokens: false, hasCost: false };
+        if (tokens !== undefined) { total.tokens += tokens; total.hasTokens = true; }
+        if (cost !== undefined) { total.cost += cost; total.hasCost = true; }
+        totals.set(provider, total);
+      }
+      for (const [provider, total] of totals) {
+        const fingerprint = JSON.stringify(total);
+        const cached = this.nativeUsage.get(provider);
+        const updatedAt = cached?.fingerprint === fingerprint ? cached.updatedAt : new Date(now).toISOString();
+        this.nativeUsage.set(provider, { fingerprint, updatedAt });
+        const old = providers.get(provider);
+        providers.set(provider, {
+          ...old, provider, source: old?.source ?? "Pi session", updatedAt: old?.updatedAt ?? updatedAt,
+          sessionUpdatedAt: updatedAt,
+          ...(total.hasTokens ? { sessionTokens: total.tokens } : {}),
+          ...(total.hasCost ? { sessionCost: total.cost } : {})
+        });
+      }
+      if (providers.size) result.providers = [...providers.values()];
+    } catch { /* Keep independently reported quota snapshots if native entries are unavailable. */ }
     return result;
   }
 }