@jameslovespancakes/pi-plus 1.0.18 → 1.0.20

package/src/domains/claude-remote/index.ts

@@ -0,0 +1,183 @@
+import { basename } from "node:path";
+import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
+import { ClaudeRemoteBridge, type BridgeOptions } from "../../core/claude-remote/bridge.ts";
+import { mirrorMessage } from "../../core/claude-remote/protocol.ts";
+import { env, setEnv } from "../../core/env.ts";
+import { createTokenSource } from "./auth.ts";
+import { remoteControlPicker } from "./picker.ts";
+
+interface Bridge {
+  start(): Promise<void>;
+  stop(): void;
+  send: ClaudeRemoteBridge["send"];
+  reportState: ClaudeRemoteBridge["reportState"];
+}
+
+/** Dependency seams allow lifecycle tests without network access or real credentials. */
+export interface RemoteDependencies {
+  bridge(options: BridgeOptions): Bridge;
+  tokenSource(): BridgeOptions["getAccessToken"];
+}
+
+const defaults: RemoteDependencies = {
+  bridge: (options) => new ClaudeRemoteBridge(options),
+  tokenSource: () => createTokenSource(),
+};
+
+export function registerClaudeRemote(pi: ExtensionAPI, deps: RemoteDependencies = defaults): void {
+  let active: Bridge | undefined;
+  let status = "off";
+  let enabled = false;
+  let current: ExtensionContext | undefined;
+  let generation = 0;
+  // Counts rather than a TTL: follow-ups can wait longer than 30 seconds.
+  const echoes: string[] = [];
+
+  function notify(ctx: ExtensionContext, message: string, warning = false): void {
+    ctx.ui.notify(message, warning ? "warning" : "info");
+  }
+
+  function setConnectionStatus(value: string): void {
+    status = value;
+    if (!current?.hasUI) return;
+    const connected = value.startsWith("connected");
+    const label = connected ? (value.includes("read-only") ? "Read-only" : "Active")
+      : value === "connecting" ? "Connecting" : "Offline";
+    current.ui.setStatus("claude-remote",
+      current.ui.theme.fg(connected ? "success" : "error", `● Remote Control ${label}`));
+  }
+
+  function stop(): void {
+    ++generation;
+    active?.stop();
+    active = undefined;
+    echoes.length = 0;
+    setConnectionStatus("off");
+  }
+
+  function start(ctx: ExtensionContext): void {
+    if (active) {
+      notify(ctx, `Claude Remote: ${status}. Open https://claude.ai/code`);
+      return;
+    }
+    current = ctx;
+    const gen = ++generation;
+    const title = `pi: ${pi.getSessionName() || basename(ctx.cwd) || "session"}`.slice(0, 100);
+    setConnectionStatus("connecting");
+    try {
+      const allowInbound = !/^(0|false|off|no)$/i.test(env("PI_CLAUDE_REMOTE_ALLOW_INBOUND") ?? "1");
+      const bridge = deps.bridge({
+        title, allowInbound,
+        trustedDeviceToken: env("CLAUDE_TRUSTED_DEVICE_TOKEN"),
+        getAccessToken: deps.tokenSource(),
+        onText(text) {
+          if (generation !== gen || !current || !allowInbound) return;
+          if (echoes.length >= 256) throw new Error("Too many remote follow-ups");
+          echoes.push(text);
+          try {
+            pi.sendUserMessage(text, current.isIdle() ? undefined : { deliverAs: "followUp" });
+          } catch (error) {
+            echoes.splice(echoes.lastIndexOf(text), 1);
+            throw error;
+          }
+        },
+        onInterrupt() {
+          if (generation === gen && allowInbound) current?.abort();
+        },
+        onConnect(id) {
+          if (generation !== gen) return;
+          setConnectionStatus(allowInbound ? "connected" : "connected (read-only)");
+          notify(ctx, `Claude Remote: ${title} is live at https://claude.ai/code (${id}).`);
+        },
+        onConnectionChange(connected) {
+          if (generation !== gen) return;
+          setConnectionStatus(connected ? (allowInbound ? "connected" : "connected (read-only)") : "connecting");
+        },
+        onError(message) {
+          if (generation !== gen) return;
+          stop();
+          setConnectionStatus("disconnected");
+          notify(ctx, `${message}. Pi continues locally.`, true);
+        },
+      });
+      active = bridge;
+      bridge.reportState(ctx.isIdle() ? "idle" : "running");
+      void bridge.start().catch(() => {
+        if (generation !== gen) return;
+        stop();
+        setConnectionStatus("disconnected");
+        notify(ctx, "Claude Remote could not connect. Run /login for Anthropic, then /claude-remote on.", true);
+      });
+    } catch {
+      stop();
+      notify(ctx, "Claude Remote needs an Anthropic OAuth login. Use /login, then /claude-remote on.", true);
+    }
+  }
+
+  function setEnabled(next: boolean, ctx: ExtensionContext): boolean {
+    enabled = next;
+    const saved = setEnv("PI_CLAUDE_REMOTE", next ? "1" : "0");
+    if (next) start(ctx);
+    else stop();
+    if (!saved) notify(ctx, "Could not save preference; changed this session only.", true);
+    else if ((env("PI_CLAUDE_REMOTE") === "1") !== next) {
+      notify(ctx, "PI_CLAUDE_REMOTE overrides this preference after reload.", true);
+    }
+    return enabled;
+  }
+
+  pi.registerCommand("claude-remote", {
+    description: "Remote Control on/off",
+    getArgumentCompletions: (prefix) => ["on", "off"]
+      .filter((value) => value.startsWith(prefix)).map((value) => ({ value, label: value })),
+    handler: async (args, ctx) => {
+      const action = args.trim().toLowerCase();
+      if (!action && ctx.mode === "tui") {
+        await ctx.ui.custom((_tui, theme, _keys, done) => remoteControlPicker(
+          theme, enabled, (next) => setEnabled(next, ctx), () => done(undefined),
+        ));
+      } else if (action === "on" || action === "off") {
+        if (action === "on" && ctx.hasUI && !enabled && !await ctx.ui.confirm("Enable Remote Control?",
+          "Share sessions with Anthropic and control pi from the Claude app. Auto-starts in interactive sessions.")) return;
+        setEnabled(action === "on", ctx);
+      } else notify(ctx, "Usage: /claude-remote [on|off]", true);
+    },
+  });
+
+  pi.on("session_start", (_event, ctx) => {
+    stop();
+    current = ctx;
+    setConnectionStatus("off");
+    enabled = env("PI_CLAUDE_REMOTE") === "1";
+    // Never spawn remote mirrors for workflow/SDK/print subagents by default.
+    if (ctx.mode === "tui" && enabled) start(ctx);
+  });
+  pi.on("session_shutdown", (_event, ctx) => {
+    stop();
+    if (ctx.hasUI) ctx.ui.setStatus("claude-remote", undefined);
+    current = undefined;
+  });
+  pi.on("session_tree", (_event, ctx) => {
+    const wasActive = !!active;
+    stop();
+    current = ctx;
+    if (wasActive) start(ctx); // an old branch's remote input must not control a new branch
+  });
+  pi.on("message_end", (event, ctx) => {
+    current = ctx;
+    if (!active) return;
+    const message = event.message;
+    if (message.role === "user") {
+      const text = typeof message.content === "string" ? message.content
+        : message.content.filter((block) => block.type === "text").map((block) => block.text).join("");
+      const index = echoes.indexOf(text);
+      if (index !== -1) { echoes.splice(index, 1); return; }
+    }
+    const outbound = mirrorMessage(message);
+    if (outbound) active.send(outbound);
+  });
+  pi.on("agent_start", (_event, ctx) => { current = ctx; active?.reportState("running"); });
+  pi.on("agent_end", (_event, ctx) => { current = ctx; active?.reportState("idle"); });
+}
+
+export default function claudeRemote(pi: ExtensionAPI): void { registerClaudeRemote(pi); }

package/src/domains/claude-remote/picker.ts

@@ -0,0 +1,36 @@
+import { SettingsList, type Component } from "@earendil-works/pi-tui";
+import { hasTruecolor, levelColor } from "../../ui/format.ts";
+import { frameSettings, settingsTheme } from "../../ui/settings-picker.ts";
+
+/** Same dot, colors and in-place SettingsList toggle as /provider. */
+export function remoteControlPicker(
+  theme: any,
+  initial: boolean,
+  toggle: (enabled: boolean) => boolean,
+  done: () => void,
+): Component {
+  let enabled = initial;
+  const color = (value: boolean, text: string) => hasTruecolor()
+    ? levelColor(value ? 100 : 0)(text) : theme.fg(value ? "success" : "error", text);
+  const label = () => `${color(enabled, "●")} Remote Control`;
+  const value = () => color(enabled, enabled ? "On" : "Off");
+  const item = {
+    id: "remote-control", label: label(), currentValue: value(),
+    values: [color(true, "On"), color(false, "Off")],
+  };
+  const list = new SettingsList([item], 1, settingsTheme(theme), () => {
+    enabled = toggle(!enabled);
+    item.label = label();
+    list.updateValue(item.id, value());
+  }, done, { enableSearch: false });
+  const frame = frameSettings(theme, list, "Remote Control");
+  return {
+    ...frame,
+    invalidate() {
+      item.values = [color(true, "On"), color(false, "Off")];
+      item.label = label();
+      list.updateValue(item.id, value());
+      frame.invalidate();
+    },
+  };
+}

package/src/domains/models/catalog-tool.ts

@@ -14,7 +14,7 @@ import {
 } from "../../core/catalog/quality.ts";
 import { ensureFresh, usageState } from "../../services/usage-service.ts";
 import { geminiQuotaFamily } from "../../core/gemini/quota.ts";
-import { combinedWindow, isGeminiAccount, pooledWindow } from "../../core/quota/pool.ts";
+import { combinedWindow, isGeminiAccount, pooledWindow, rollOver } from "../../core/quota/pool.ts";
 import { env, isFromProcessEnv, maskSecret, setEnv } from "../../core/env.ts";
 import { fitId } from "../../ui/format.ts";
 
@@ -57,7 +57,7 @@ interface Entry {
 
 function quotaFor(provider: string, modelId: string): number | undefined {
   const state = usageState();
-  const rows = state.rows;
+  const rows = rollOver(state.rows);
   if (provider === "anthropic") {
     // The pool's figure, not whichever account happens to be listed first.
     const pool = combinedWindow(rows, "5h", state.accounts, Date.now(), true);

package/src/domains/models/provider-picker.ts

@@ -1,5 +1,6 @@
 import type { Component } from "@earendil-works/pi-tui";
 import { hasTruecolor, levelColor } from "../../ui/format.ts";
+import { frameSettings, settingsTheme } from "../../ui/settings-picker.ts";
 
 /**
  * The `/provider` picker.
@@ -79,50 +80,6 @@ function labelFor(theme: any, row: ProviderRow): string {
   return `${dot} ${name}`;
 }
 
-/**
- * The chrome pi uses for `/model` and its other in-chat pickers.
- *
- * Not a box: a full-width accent rule, a bold title, the body, then a closing
- * rule. Reproduced from pi's own `frame(theme, title, body, footer)` helper so
- * this reads as part of the chat flow rather than as a floating dialog.
- *
- * Input and mouse events pass straight through, so the frame is presentation
- * only and does not disturb the in-place updates.
- */
-function framed(theme: any, list: any, title: string): Component {
-  const rule = (width: number) => theme.fg("accent", "─".repeat(Math.max(1, width)));
-
-  return {
-    invalidate: () => list.invalidate?.(),
-    handleInput: (data: string) => list.handleInput(data),
-    handleMouse: (event: any) => list.handleMouse?.(event),
-    render(width: number): string[] {
-      const inner = Math.max(1, width);
-      // pi pads title and footer by one column; the list renders flush.
-      return [
-        rule(inner),
-        ` ${theme.fg("accent", theme.bold(title))}`,
-        ...list.render(inner),
-        rule(inner),
-      ];
-    },
-  } as Component;
-}
-
-/**
- * Theme for the picker. Every callback takes `selected` so the highlighted row
- * can be emphasised without the caller tracking cursor position.
- */
-function pickerTheme(theme: any) {
-  return {
-    label: (text: string, selected: boolean) => (selected ? theme.fg("accent", text) : text),
-    value: (text: string, _selected: boolean) => text,
-    description: (text: string) => theme.fg("dim", text),
-    cursor: theme.fg("accent", "›"),
-    hint: (text: string) => theme.fg("dim", text),
-  };
-}
-
 export interface PickerDeps {
   /** Re-reads the current rows, so the picker never shows stale state. */
   rows: () => Promise<ProviderRow[]>;
@@ -195,13 +152,13 @@ export async function openProviderPicker(ctx: any, deps: PickerDeps): Promise<vo
     list = new SettingsList(
       items,
       12,
-      pickerTheme(theme),
+      settingsTheme(theme),
       onChange,
       () => done(undefined),
       { enableSearch: false },
     );
 
-    return framed(theme, list, "Providers") as Component & { dispose?(): void };
+    return frameSettings(theme, list, "Providers") as Component & { dispose?(): void };
   });
   // No `overlay` option: the picker renders inline in the chat flow rather than
   // floating over it.

package/src/domains/setup/index.ts

@@ -131,6 +131,17 @@ async function inspect(ctx: any): Promise<Feature[]> {
     open: "/remote setup",
   });
 
+  /* Claude app remote control (preference only; never connect from the hub). */
+  const claudeRemote = env("PI_CLAUDE_REMOTE") === "1";
+  features.push({
+    name: "Claude Remote",
+    ready: claudeRemote,
+    detail: claudeRemote ? "auto-start enabled for interactive sessions" : "opt-in Claude app mirror; requires Anthropic OAuth",
+    commands: ["/claude-remote", "/claude-remote on", "/claude-remote off"],
+    setup: "/claude-remote",
+    open: "/claude-remote",
+  });
+
   return features;
 }
 
@@ -166,7 +177,7 @@ function buildBrief(features: Feature[]): string {
     `Config file: ${configPath()}${existsSync(configPath()) ? "" : " (not created yet)"}`,
     "",
     "Write the reply yourself, in chat. Requirements:",
-    "1. One short sentence on what pi-plus is: four capabilities in one package.",
+    "1. One short sentence on what pi-plus is: extensions for subscriptions, models, workflows, and remote collaboration.",
     "2. A compact list of the capabilities, each with one line on what it does and the command to try. Mark which are already working.",
     pending.length > 0
       ? `3. Then a short 'Set these up next' section covering ONLY the ones marked NOT SET UP (${pending.map((f) => f.name).join(", ")}), each with the single command to run and one line on what it will ask for.`

package/src/domains/workflows/runtime/progress.ts

@@ -1,9 +1,9 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { WorkflowProgressEvent } from "./types.ts";
 import type { AgentChatMessage, AgentChatRole, AgentRowStatus, WorkflowLaneItemStatus, WorkflowProgressSnapshot } from "./progress-types.ts";
-import { formatWorkflowUsageLine, type WorkflowUsageSnapshot } from "./usage.ts";
+import type { WorkflowUsageSnapshot } from "./usage.ts";
 import { unknownErrorMessage } from "./unknown-error.ts";
-import { statusTextFromCounts, type WorkflowStatusCounts } from "./ui/workflow-format.ts";
+import type { WorkflowStatusCounts } from "./ui/workflow-format.ts";
 import { toDisplayLine, toDisplayText } from "./ui/display-text.ts";
 import { renderWorkflowWidgetLines } from "./ui/workflow-widget.ts";
 
@@ -61,7 +61,7 @@ const WIDGET_REFRESH_INTERVAL_MS = 1_000;
 export const DEFAULT_LANE_ITEM_LIMIT = 200;
 
 /**
- * Tracks live workflow state for widgets, footer/status text, result renderers,
+ * Tracks live workflow state for widgets, result renderers,
  * and headless stderr breadcrumbs.
  */
 export class ProgressTracker {
@@ -81,17 +81,24 @@ export class ProgressTracker {
   private doneAt: number | undefined;
   private currentPhase = "Workflow";
   private nextAgentId = 1;
-  private lastStatusText: string | undefined;
   private usageSnapshot: WorkflowUsageSnapshot | undefined;
   private widgetRefreshInterval: ReturnType<typeof setInterval> | undefined;
   private readonly surfaceKey: string;
+  private readonly ctx: ExtensionContext;
+  private readonly title: string;
+  private readonly runId: string;
+  private readonly onSnapshot?: (snapshot: WorkflowProgressSnapshot) => void;
 
   constructor(
-    private readonly ctx: ExtensionContext,
-    private readonly title: string,
-    private readonly runId: string,
-    private readonly onSnapshot?: (snapshot: WorkflowProgressSnapshot) => void,
+    ctx: ExtensionContext,
+    title: string,
+    runId: string,
+    onSnapshot?: (snapshot: WorkflowProgressSnapshot) => void,
   ) {
+    this.ctx = ctx;
+    this.title = title;
+    this.runId = runId;
+    this.onSnapshot = onSnapshot;
     this.surfaceKey = `workflow:${runId}`;
     this.ensurePhase(this.currentPhase);
   }
@@ -336,7 +343,6 @@ export class ProgressTracker {
     if (!this.ctx.hasUI) return;
     this.publishWidget();
     this.startWidgetRefresh();
-    this.publishStatus();
   }
 
   private publishWidget(): void {
@@ -358,24 +364,6 @@ export class ProgressTracker {
     this.widgetRefreshInterval = undefined;
   }
 
-  private publishStatus(): void {
-    const status = statusTextFromCounts(
-      {
-        title: this.title,
-        doneAt: this.doneAt,
-        currentPhase: this.currentPhase,
-        counters: [...this.counters.values()].map((counter) => ({ ...counter })),
-      },
-      this.statusCountsSnapshot(),
-      this.ctx.ui.theme,
-    );
-    const usage = formatWorkflowUsageLine(this.usageSnapshot);
-    const next = usage ? `${status} · ${usage}` : status;
-    if (next === this.lastStatusText) return;
-    this.ctx.ui.setStatus(this.surfaceKey, next);
-    this.lastStatusText = next;
-  }
-
   /** Clear this run's live workflow surfaces. Final feedback is delivered by the result surface. */
   done(): void {
     this.doneAt = Date.now();
@@ -384,7 +372,6 @@ export class ProgressTracker {
     if (!this.ctx.hasUI) return;
     this.ctx.ui.setWidget(this.surfaceKey, undefined);
     this.ctx.ui.setStatus(this.surfaceKey, undefined);
-    this.lastStatusText = undefined;
   }
 
   private publishSnapshot(): void {

package/src/ui/settings-picker.ts

@@ -0,0 +1,26 @@
+import { truncateToWidth, type Component, type SettingsListTheme } from "@earendil-works/pi-tui";
+
+/** Shared inline chrome for provider-style SettingsList pickers. */
+export function frameSettings(theme: any, list: Component, title: string): Component {
+  const rule = (width: number) => theme.fg("accent", "─".repeat(width));
+  return {
+    invalidate: () => list.invalidate(),
+    handleInput: (data) => list.handleInput?.(data),
+    handleMouse: (event) => list.handleMouse?.(event),
+    render(width) {
+      const inner = Math.max(1, width);
+      return [rule(inner), truncateToWidth(` ${theme.fg("accent", theme.bold(title))}`, inner, ""),
+        ...list.render(inner), rule(inner)];
+    },
+  };
+}
+
+export function settingsTheme(theme: any): SettingsListTheme {
+  return {
+    label: (text, selected) => selected ? theme.fg("accent", text) : text,
+    value: (text) => text,
+    description: (text) => theme.fg("dim", text),
+    cursor: theme.fg("accent", "›"),
+    hint: (text) => theme.fg("dim", text),
+  };
+}

package/src/ui/usage-bars.ts

@@ -8,6 +8,7 @@ import {
   OBSERVED_PROVIDERS,
   poolAvailability,
   pooledWindow,
+  rollOver,
   scopedLabels,
   type UsageRow,
 } from "../core/quota/pool.ts";
@@ -163,7 +164,9 @@ function renderCell(theme: any, cell: Cell, labelWidth: number, cellWidth: numbe
   const label = theme.fg(cell.active ? "accent" : "muted", cell.label.slice(0, labelWidth).padEnd(labelWidth));
   const reset = formatShortReset(cell.resetAt);
   const resetWidth = 4;
-  const barWidth = Math.max(4, cellWidth - labelWidth - 6 - resetWidth - 3);
+  // label, space, bar, space, 5-wide percent, space, reset: exactly cellWidth,
+  // so every row's right column starts under its title.
+  const barWidth = Math.max(4, cellWidth - labelWidth - resetWidth - 8);
 
   if (cell.remaining === undefined) {
     return `${label} ${theme.fg("dim", "·".repeat(barWidth))} ${theme.fg("dim", "  n/a")}${" ".repeat(resetWidth + 1)}`;
@@ -188,7 +191,8 @@ function renderCell(theme: any, cell: Cell, labelWidth: number, cellWidth: numbe
   return `${label} ${bar} ${percent} ${theme.fg("dim", reset.padEnd(resetWidth))}`;
 }
 
-export function renderUsageLines(state: UsageState, theme: any, width: number, active?: ActiveModel): string[] {
+export function renderUsageLines(raw: UsageState, theme: any, width: number, active?: ActiveModel): string[] {
+  const state = { ...raw, rows: rollOver(raw.rows) };
   if (state.loading) return [theme.fg("dim", "  usage: loading…")];
   if (state.rows.length === 0) {
     if (state.errors.length > 0) return state.errors.map((error) => theme.fg("warning", `  ${error}`));
@@ -219,7 +223,8 @@ export function renderUsageLines(state: UsageState, theme: any, width: number, a
   return lines.map((line) => truncateToWidth(line, width, ""));
 }
 
-export function usageSummaryText(state: UsageState): string {
+export function usageSummaryText(raw: UsageState): string {
+  const state = { ...raw, rows: rollOver(raw.rows) };
   const combined = ["5h", "7d", ...scopedLabels(state.rows)].map((label) => {
     const pool = combinedWindow(state.rows, label, state.accounts, Date.now(), true);
     return `Claude combined ${label}: ${pool