@aerok/pi-toolkit 0.1.0

package/extensions/bark/tui/settings.ts

@@ -0,0 +1,213 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { matchesKey } from "@earendil-works/pi-tui";
+
+import {
+  isValidEncryptionValue,
+  loadGlobalConfig,
+  loadProjectConfig,
+  loadResolvedConfig,
+  saveGlobalConfig,
+  saveProjectConfig,
+} from "../config.js";
+import type { BarkEventKey, BarkGlobalConfig, BarkProjectConfig, ResolvedBarkConfig } from "../types.js";
+import { boxInnerWidth, OverlayTheme } from "./theme.js";
+
+type Scope = "global" | "project";
+
+const EVENT_ROWS: Array<{ key: BarkEventKey; label: string; detail: string }> = [
+  { key: "agent_settled", label: "Task settled", detail: "Pi is fully done after retries and continuations" },
+  { key: "agent_end", label: "Agent response", detail: "Every low-level agent response (can be noisy)" },
+  { key: "session_shutdown", label: "Session shutdown", detail: "Pi session is closing" },
+  { key: "ask_user_prompt", label: "Question waiting", detail: "rpiv ask-user prompt is shown" },
+  { key: "permission_request", label: "Permission waiting", detail: "permission-system prompt is shown" },
+];
+
+export class BarkSettingsOverlay implements Component {
+  private scope: Scope;
+  private selectedIndex = 0;
+  private draft: ResolvedBarkConfig;
+  private saved = false;
+  private confirmPlaintext = false;
+  private notice: string | null = null;
+  private readonly cwd: string;
+  private readonly overlay = new OverlayTheme();
+  onClose?: () => void;
+  onOpenModelSelector?: (currentModel: string | undefined) => void;
+  requestRender?: () => void;
+
+  constructor(cwd: string) {
+    this.cwd = cwd;
+    this.scope = loadProjectConfig(cwd) ? "project" : "global";
+    this.draft = this.loadDraft();
+  }
+
+  setTheme(theme: Theme): void {
+    this.overlay.setTheme(theme);
+  }
+
+  invalidate(): void {}
+
+  setRecapModel(model: string): void {
+    this.draft.recap.model = model;
+    this.saved = false;
+  }
+
+  handleInput(data: string): void {
+    if (this.confirmPlaintext) {
+      if (data.toLowerCase() === "y") {
+        this.draft.encryption.mode = "plaintext";
+        this.confirmPlaintext = false;
+        this.notice = "Plaintext selected. Press Enter to save globally.";
+        this.saved = false;
+      } else if (data.toLowerCase() === "n" || matchesKey(data, "escape")) {
+        this.confirmPlaintext = false;
+      }
+      return;
+    }
+    if (matchesKey(data, "ctrl+c") || matchesKey(data, "escape")) {
+      this.onClose?.();
+      return;
+    }
+    if (matchesKey(data, "up") || data === "k") {
+      this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+      return;
+    }
+    if (matchesKey(data, "down") || data === "j") {
+      this.selectedIndex = Math.min(EVENT_ROWS.length + 2, this.selectedIndex + 1);
+      return;
+    }
+    if (data === "s" || data === "S") {
+      this.scope = this.scope === "global" ? "project" : "global";
+      this.draft = this.loadDraft();
+      this.saved = false;
+      return;
+    }
+    if ((data === "m" || data === "M") && this.selectedIndex === EVENT_ROWS.length + 2) {
+      this.onOpenModelSelector?.(this.draft.recap.model);
+      return;
+    }
+    if (matchesKey(data, "space")) {
+      this.toggleSelected();
+      return;
+    }
+    if (matchesKey(data, "enter")) this.save();
+  }
+
+  private loadDraft(): ResolvedBarkConfig {
+    if (this.scope === "project") return loadResolvedConfig(this.cwd);
+    return { ...loadGlobalConfig(), projectOverride: false };
+  }
+
+  private toggleSelected(): void {
+    this.saved = false;
+    if (this.selectedIndex === 0) {
+      this.draft.enabled = !this.draft.enabled;
+      return;
+    }
+    if (this.selectedIndex === 1) {
+      if (this.scope === "project") {
+        this.notice = "Encryption mode is global-only; press S to edit global settings.";
+      } else if (this.draft.encryption.mode === "encrypted") {
+        this.confirmPlaintext = true;
+      } else if (isValidEncryptionValue(this.draft.encryption.key) && isValidEncryptionValue(this.draft.encryption.iv)) {
+        this.draft.encryption.mode = "encrypted";
+        this.notice = "Encrypted delivery selected. Press Enter to save.";
+      } else {
+        this.notice = "Run /toolkit:bark-setup to configure encryption Key and IV.";
+      }
+      return;
+    }
+    if (this.selectedIndex <= EVENT_ROWS.length + 1) {
+      const event = EVENT_ROWS[this.selectedIndex - 2];
+      this.draft.events[event.key] = !this.draft.events[event.key];
+      return;
+    }
+    this.draft.recap.enabled = !this.draft.recap.enabled;
+  }
+
+  private save(): void {
+    if (this.scope === "global") {
+      const config: BarkGlobalConfig = {
+        ...loadGlobalConfig(),
+        enabled: this.draft.enabled,
+        encryption: { ...this.draft.encryption },
+        events: { ...this.draft.events },
+        recap: { ...this.draft.recap },
+      };
+      saveGlobalConfig(config);
+    } else {
+      const existing: BarkProjectConfig = loadProjectConfig(this.cwd) ?? { version: 1 };
+      saveProjectConfig(this.cwd, {
+        ...existing,
+        enabled: this.draft.enabled,
+        events: { ...this.draft.events },
+        recap: { ...this.draft.recap },
+      });
+    }
+    this.saved = true;
+  }
+
+  render(width: number): string[] {
+    const inner = boxInnerWidth(width);
+    const lines = [
+      this.overlay.borderLine(inner, "top"),
+      this.overlay.frameLine(this.overlay.fg("accent", this.overlay.bold("🔔 Pi Toolkit — Notify Settings")), inner),
+      this.overlay.frameLine(this.overlay.fg("dim", `Scope: ${this.scope} · S switches scope`), inner),
+      this.overlay.ruleLine(inner),
+    ];
+
+    if (this.confirmPlaintext) {
+      lines.push(this.overlay.frameLine(this.overlay.fg("error", "⚠ Disable end-to-end encryption globally?"), inner));
+      lines.push(this.overlay.frameLine("Bark Server and Apple APNs will be able to read notification content.", inner));
+      lines.push(this.overlay.ruleLine(inner));
+      lines.push(this.overlay.frameLine(this.overlay.fg("dim", "Y confirm plaintext · N/Esc keep encryption"), inner));
+      lines.push(this.overlay.borderLine(inner, "bottom"));
+      return lines;
+    }
+
+    this.row(lines, inner, 0, this.draft.enabled, "Bark enabled", this.draft.deviceKey ? "Device key configured" : "Run /toolkit:bark-setup first");
+    this.row(
+      lines,
+      inner,
+      1,
+      this.draft.encryption.mode === "encrypted",
+      "Encrypted delivery",
+      this.scope === "project"
+        ? "Global-only setting"
+        : this.draft.encryption.mode === "plaintext"
+          ? "Plaintext — third parties can read content"
+          : isValidEncryptionValue(this.draft.encryption.key) && isValidEncryptionValue(this.draft.encryption.iv)
+            ? "AES-128-CBC · PKCS#7"
+            : "Not configured — run /toolkit:bark-setup",
+    );
+    EVENT_ROWS.forEach((event, index) => {
+      this.row(lines, inner, index + 2, this.draft.events[event.key], event.label, event.detail);
+    });
+    this.row(
+      lines,
+      inner,
+      EVENT_ROWS.length + 2,
+      this.draft.recap.enabled,
+      "LLM recap",
+      this.draft.recap.model ? `Model: ${this.draft.recap.model}` : "Current session model · M selects",
+    );
+
+    lines.push(this.overlay.ruleLine(inner));
+    lines.push(this.overlay.frameLine(this.overlay.fg("dim", `Defaults: group=${this.draft.group || "—"} · sound=${this.draft.sound || "default"} · level=${this.draft.level}`), inner));
+    if (this.notice) lines.push(this.overlay.frameLine(this.overlay.fg("warning", this.notice), inner));
+    if (this.saved) lines.push(this.overlay.frameLine(this.overlay.fg("success", "✓ Settings saved"), inner));
+    lines.push(this.overlay.ruleLine(inner));
+    lines.push(this.overlay.frameLine(this.overlay.fg("dim", "↑↓ navigate · Space toggle · M recap model · S scope · Enter save · Esc close"), inner));
+    lines.push(this.overlay.borderLine(inner, "bottom"));
+    return lines;
+  }
+
+  private row(lines: string[], width: number, index: number, enabled: boolean, label: string, detail: string): void {
+    const selected = index === this.selectedIndex;
+    const marker = selected ? this.overlay.fg("accent", "▸") : " ";
+    const toggle = enabled ? this.overlay.fg("success", "●") : this.overlay.fg("dim", "○");
+    const renderedLabel = selected ? this.overlay.bold(label) : this.overlay.fg("dim", label);
+    lines.push(this.overlay.frameLine(`${marker} ${toggle} ${renderedLabel}  ${this.overlay.fg("dim", detail)}`, width));
+  }
+}

package/extensions/bark/tui/setup.ts

@@ -0,0 +1,375 @@
+import { copyToClipboard, type Theme } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { matchesKey } from "@earendil-works/pi-tui";
+
+import type { BarkClient } from "../client.js";
+import { createBarkClient } from "../client.js";
+import { isValidEncryptionValue, loadGlobalConfig, normalizeBarkDeviceKey, saveGlobalConfig } from "../config.js";
+import { generateEncryptionCredentials, type BarkEncryptionCredentials } from "../crypto.js";
+import type { BarkEncryptionConfig, BarkLevel } from "../types.js";
+import { boxInnerWidth, OverlayTheme } from "./theme.js";
+
+type SetupMode = "setup" | "rotate";
+type Phase =
+  | "instructions"
+  | "server"
+  | "key"
+  | "group"
+  | "sound"
+  | "level"
+  | "encryptionMode"
+  | "plaintextConfirm"
+  | "encryption"
+  | "testing"
+  | "decryptConfirm"
+  | "success"
+  | "failed";
+type TextTarget = "server" | "key" | "group" | "sound";
+const LEVELS: BarkLevel[] = ["passive", "active", "timeSensitive", "critical"];
+
+export class BarkSetupOverlay implements Component {
+  private phase: Phase;
+  private serverUrl = "https://api.day.app";
+  private deviceKey = "";
+  private group = "Pi";
+  private sound = "anticipate";
+  private levelIndex = 1;
+  private encrypted = true;
+  private credentials: BarkEncryptionCredentials;
+  private pasteBuffer = "";
+  private inPaste = false;
+  private error: string | null = null;
+  private copied: "key" | "iv" | null = null;
+  private readonly client: BarkClient;
+  private readonly overlay = new OverlayTheme();
+  onClose?: () => void;
+  requestRender?: () => void;
+
+  constructor(client: BarkClient = createBarkClient(), private readonly mode: SetupMode = "setup") {
+    this.client = client;
+    const config = loadGlobalConfig();
+    this.serverUrl = config.serverUrl;
+    this.deviceKey = config.deviceKey ?? "";
+    this.group = config.group ?? "";
+    this.sound = config.sound ?? "";
+    const levelIndex = LEVELS.indexOf(config.level);
+    if (levelIndex >= 0) this.levelIndex = levelIndex;
+    this.encrypted = mode === "rotate" || config.encryption.mode === "encrypted";
+    this.credentials =
+      mode === "setup" && isValidEncryptionValue(config.encryption.key) && isValidEncryptionValue(config.encryption.iv)
+        ? { key: config.encryption.key!, iv: config.encryption.iv! }
+        : generateEncryptionCredentials();
+    this.phase = mode === "rotate" ? "encryption" : "instructions";
+  }
+
+  setTheme(theme: Theme): void {
+    this.overlay.setTheme(theme);
+  }
+
+  invalidate(): void {}
+
+  handleInput(data: string): void {
+    if (matchesKey(data, "ctrl+c")) return this.onClose?.();
+    if (this.phase === "instructions") {
+      if (matchesKey(data, "enter") || matchesKey(data, "space")) this.phase = "server";
+      else if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "server" || this.phase === "key" || this.phase === "group" || this.phase === "sound") {
+      this.handleText(data, this.phase);
+      return;
+    }
+    if (this.phase === "level") {
+      if (matchesKey(data, "up") || data === "k") this.levelIndex = Math.max(0, this.levelIndex - 1);
+      else if (matchesKey(data, "down") || data === "j") this.levelIndex = Math.min(LEVELS.length - 1, this.levelIndex + 1);
+      else if (matchesKey(data, "enter")) this.phase = "encryptionMode";
+      else if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "encryptionMode") {
+      if (matchesKey(data, "up") || matchesKey(data, "down") || data === "j" || data === "k" || matchesKey(data, "space")) {
+        this.encrypted = !this.encrypted;
+      } else if (matchesKey(data, "enter")) {
+        if (this.encrypted) this.phase = "encryption";
+        else if (loadGlobalConfig().encryption.mode === "encrypted") this.phase = "plaintextConfirm";
+        else void this.testPlaintext();
+      } else if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "plaintextConfirm") {
+      if (data.toLowerCase() === "y") void this.testPlaintext();
+      else if (data.toLowerCase() === "n" || matchesKey(data, "escape")) this.phase = "encryptionMode";
+      return;
+    }
+    if (this.phase === "encryption") {
+      if (data.toLowerCase() === "k") void this.copyCredential("key");
+      else if (data.toLowerCase() === "i") void this.copyCredential("iv");
+      else if (matchesKey(data, "enter")) void this.testEncrypted();
+      else if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "decryptConfirm") {
+      if (data.toLowerCase() === "y") this.saveEncrypted();
+      else if (data.toLowerCase() === "n") {
+        this.error = "Encrypted settings were not activated. Check the App Key and IV, then retry.";
+        this.phase = "failed";
+      } else if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "testing") {
+      if (matchesKey(data, "escape")) this.onClose?.();
+      return;
+    }
+    if (this.phase === "failed" && matchesKey(data, "enter")) {
+      this.error = null;
+      this.phase = this.encrypted ? "encryption" : "encryptionMode";
+      return;
+    }
+    if (matchesKey(data, "enter") || matchesKey(data, "space") || matchesKey(data, "escape")) this.onClose?.();
+  }
+
+  private handleText(data: string, target: TextTarget): void {
+    if (this.inPaste) {
+      this.pasteBuffer += data;
+      const end = this.pasteBuffer.indexOf("\x1b[201~");
+      if (end >= 0) {
+        this.setText(target, this.pasteBuffer.slice(0, end).trim());
+        this.pasteBuffer = "";
+        this.inPaste = false;
+      }
+      return;
+    }
+    if (data.includes("\x1b[200~")) {
+      this.inPaste = true;
+      this.pasteBuffer = data.replace("\x1b[200~", "");
+      return;
+    }
+    if (matchesKey(data, "escape")) return this.onClose?.();
+    if (matchesKey(data, "backspace") || data === "\x7f" || data === "\b") {
+      this.setText(target, this.getText(target).slice(0, -1));
+      return;
+    }
+    if (matchesKey(data, "enter")) {
+      this.error = null;
+      if (target === "server") {
+        if (!this.serverUrl.trim()) this.serverUrl = "https://api.day.app";
+        try {
+          const url = new URL(this.serverUrl);
+          if (url.protocol !== "https:" && url.protocol !== "http:") throw new Error("protocol");
+          this.phase = "key";
+        } catch {
+          this.error = "Invalid server URL";
+        }
+      } else if (target === "key") {
+        this.deviceKey = normalizeBarkDeviceKey(this.deviceKey);
+        if (this.deviceKey && !/^https?:\/\//i.test(this.deviceKey)) this.phase = "group";
+        else this.error = "Enter a device key or Bark test URL";
+      } else if (target === "group") this.phase = "sound";
+      else this.phase = "level";
+      return;
+    }
+    if (!data.startsWith("\x1b[")) this.setText(target, this.getText(target) + data);
+  }
+
+  private getText(target: TextTarget): string {
+    if (target === "server") return this.serverUrl;
+    if (target === "key") return this.deviceKey;
+    if (target === "group") return this.group;
+    return this.sound;
+  }
+
+  private setText(target: TextTarget, value: string): void {
+    if (target === "server") this.serverUrl = value;
+    else if (target === "key") this.deviceKey = value;
+    else if (target === "group") this.group = value;
+    else this.sound = value;
+  }
+
+  private async copyCredential(field: "key" | "iv"): Promise<void> {
+    try {
+      await copyToClipboard(this.credentials[field]);
+      this.copied = field;
+      this.error = null;
+    } catch (error) {
+      this.error = `Copy failed: ${error instanceof Error ? error.message : String(error)}`;
+    }
+    this.requestRender?.();
+  }
+
+  private notification() {
+    return {
+      title: "Pi Toolkit — Encrypted Test",
+      body: "If this sentence is readable, Bark encryption is configured correctly.",
+      group: this.group || undefined,
+      sound: this.sound || undefined,
+      level: LEVELS[this.levelIndex],
+    };
+  }
+
+  private async testEncrypted(): Promise<void> {
+    this.phase = "testing";
+    this.error = null;
+    this.requestRender?.();
+    try {
+      await this.client.send(
+        {
+          serverUrl: this.serverUrl,
+          deviceKey: this.deviceKey,
+          encryption: { mode: "encrypted", ...this.credentials },
+        },
+        this.notification(),
+      );
+      this.phase = "decryptConfirm";
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error);
+      this.phase = "failed";
+    }
+    this.requestRender?.();
+  }
+
+  private async testPlaintext(): Promise<void> {
+    this.phase = "testing";
+    this.error = null;
+    this.requestRender?.();
+    try {
+      await this.client.send(
+        { serverUrl: this.serverUrl, deviceKey: this.deviceKey, encryption: { mode: "plaintext" } },
+        { ...this.notification(), title: "Pi Toolkit — Plaintext Test", body: "Plaintext Bark notifications are configured." },
+      );
+      this.save({ ...loadGlobalConfig().encryption, mode: "plaintext" });
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error);
+      this.phase = "failed";
+    }
+    this.requestRender?.();
+  }
+
+  private saveEncrypted(): void {
+    this.save({ mode: "encrypted", ...this.credentials });
+  }
+
+  private save(encryption: BarkEncryptionConfig): void {
+    const config = loadGlobalConfig();
+    saveGlobalConfig({
+      ...config,
+      enabled: true,
+      serverUrl: this.serverUrl.replace(/\/+$/, ""),
+      deviceKey: this.deviceKey,
+      group: this.group || undefined,
+      sound: this.sound || undefined,
+      level: LEVELS[this.levelIndex],
+      encryption,
+    });
+    this.phase = "success";
+    this.requestRender?.();
+    setTimeout(() => this.onClose?.(), 1200);
+  }
+
+  render(width: number): string[] {
+    const inner = boxInnerWidth(width);
+    const lines = [
+      this.overlay.borderLine(inner, "top"),
+      this.overlay.frameLine(this.overlay.fg("accent", this.overlay.bold(this.mode === "rotate" ? "🔐 Rotate Bark Encryption" : "🐶 Pi Toolkit — Bark Setup")), inner),
+      this.overlay.ruleLine(inner),
+    ];
+
+    if (this.phase === "instructions") {
+      this.line(lines, inner, "Configure Bark task-completion notifications.", "dim");
+      this.line(lines, inner, "");
+      this.line(lines, inner, "  1. Copy the test URL from Bark");
+      this.line(lines, inner, "  2. Choose encrypted (default) or plaintext delivery");
+      this.line(lines, inner, "  3. Verify a real notification before activation");
+      this.line(lines, inner, "");
+      this.line(lines, inner, "Credentials stay in a global 0600 file and never enter Git.", "dim");
+      this.footer(lines, inner, "Enter continue · Esc cancel");
+    } else if (this.phase === "server") this.textScreen(lines, inner, "Bark server URL", this.serverUrl, "Default: https://api.day.app");
+    else if (this.phase === "key") this.textScreen(lines, inner, "Device key or Bark test URL", this.maskKey(this.deviceKey), "The URL is normalized to its device key");
+    else if (this.phase === "group") this.textScreen(lines, inner, "Notification group (optional)", this.group, "Default: Pi · clear for no group");
+    else if (this.phase === "sound") this.textScreen(lines, inner, "Bark sound (optional)", this.sound, "Default: anticipate · clear for Bark default");
+    else if (this.phase === "level") {
+      this.line(lines, inner, "Default interruption level", "dim");
+      this.line(lines, inner, "");
+      LEVELS.forEach((level, index) => this.line(lines, inner, `  ${index === this.levelIndex ? this.overlay.fg("accent", "▸") : " "} ${index === this.levelIndex ? this.overlay.bold(level) : this.overlay.fg("dim", level)}`));
+      this.footer(lines, inner, "↑↓ select · Enter continue · Esc cancel");
+    } else if (this.phase === "encryptionMode") {
+      this.line(lines, inner, "Delivery privacy", "dim");
+      this.line(lines, inner, "");
+      this.choice(lines, inner, this.encrypted, "Encrypted", "Bark/APNs cannot read title, body, group, or sound");
+      this.choice(lines, inner, !this.encrypted, "Plaintext", "Third-party services can read notification content");
+      this.footer(lines, inner, "↑↓ toggle · Enter continue · Esc cancel");
+    } else if (this.phase === "plaintextConfirm") {
+      this.line(lines, inner, "⚠ Disable end-to-end encryption?", "error");
+      this.line(lines, inner, "");
+      this.line(lines, inner, "Bark Server and Apple APNs will be able to read notification content.");
+      this.line(lines, inner, "This change is global and cannot be enabled per project.", "dim");
+      this.footer(lines, inner, "Y confirm plaintext · N go back");
+    } else if (this.phase === "encryption") {
+      this.line(lines, inner, "Enter these exact values in Bark App → Push Encryption:", "dim");
+      this.line(lines, inner, "");
+      this.line(lines, inner, "  Algorithm  AES128");
+      this.line(lines, inner, "  Mode       CBC");
+      this.line(lines, inner, "  Padding    pkcs7");
+      this.line(lines, inner, `  Key        ${this.overlay.fg("accent", this.overlay.bold(this.credentials.key))}`);
+      this.line(lines, inner, `  IV         ${this.overlay.fg("accent", this.overlay.bold(this.credentials.iv))}`);
+      this.line(lines, inner, "");
+      this.line(lines, inner, "Key and IV remain fixed until you explicitly rotate them.", "dim");
+      if (this.copied) this.line(lines, inner, `✓ ${this.copied.toUpperCase()} copied; clipboard now contains a secret.`, "success");
+      this.footer(lines, inner, "K copy Key · I copy IV · Enter send encrypted test · Esc cancel");
+    } else if (this.phase === "testing") {
+      this.line(lines, inner, "");
+      this.line(lines, inner, "  ⠋ Sending a Bark test notification...", "accent");
+      this.footer(lines, inner, "Esc close");
+    } else if (this.phase === "decryptConfirm") {
+      this.line(lines, inner, "Encrypted test accepted by Bark.", "success");
+      this.line(lines, inner, "");
+      this.line(lines, inner, "Did your device show the readable English test sentence?");
+      this.line(lines, inner, "Do not confirm if it showed “Decryption Failed”.", "dim");
+      this.footer(lines, inner, "Y readable — activate · N failed — keep old settings");
+    } else if (this.phase === "success") {
+      this.line(lines, inner, "");
+      this.line(lines, inner, `  ✓ Bark ${this.encrypted ? "encrypted" : "plaintext"} notifications activated`, "success");
+      this.line(lines, inner, `  Group: ${this.group || "—"} · Sound: ${this.sound || "default"} · Level: ${LEVELS[this.levelIndex]}`, "dim");
+      this.footer(lines, inner, "Closing...");
+    } else {
+      this.line(lines, inner, "");
+      this.line(lines, inner, "  ✗ Bark setup was not activated", "error");
+      this.line(lines, inner, `  ${this.error || "Unknown error"}`, "dim");
+      this.footer(lines, inner, "Enter retry · Esc close");
+    }
+
+    if (this.error && this.phase !== "failed") this.line(lines, inner, `  ⚠ ${this.error}`, "error");
+    lines.push(this.overlay.borderLine(inner, "bottom"));
+    return lines;
+  }
+
+  private choice(lines: string[], width: number, selected: boolean, label: string, detail: string): void {
+    this.line(lines, width, `  ${selected ? this.overlay.fg("accent", "▸") : " "} ${selected ? this.overlay.bold(label) : label}  ${this.overlay.fg("dim", detail)}`);
+  }
+
+  private textScreen(lines: string[], width: number, label: string, value: string, hint: string): void {
+    this.line(lines, width, label, "dim");
+    this.line(lines, width, "");
+    this.line(lines, width, `  ${this.overlay.fg("accent", this.overlay.bold(value || " "))}${this.overlay.fg("dim", "█")}`);
+    this.line(lines, width, "");
+    this.line(lines, width, hint, "dim");
+    this.footer(lines, width, "Enter continue · Esc cancel");
+  }
+
+  private line(lines: string[], width: number, text: string, color?: "dim" | "accent" | "success" | "error"): void {
+    lines.push(this.overlay.frameLine(color ? this.overlay.fg(color, text) : text, width));
+  }
+
+  private footer(lines: string[], width: number, hint: string): void {
+    lines.push(this.overlay.ruleLine(width));
+    this.line(lines, width, hint, "dim");
+  }
+
+  private maskKey(value: string): string {
+    if (!value) return "";
+    if (/^https?:\/\//i.test(value)) {
+      try { return `${new URL(value).origin}/••••`; } catch { return "••••"; }
+    }
+    if (value.length <= 8) return "•".repeat(value.length);
+    return `${value.slice(0, 4)}${"•".repeat(Math.min(12, value.length - 8))}${value.slice(-4)}`;
+  }
+}

package/extensions/bark/tui/theme.ts

@@ -0,0 +1,49 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+const FALLBACK_COLORS: Record<string, string> = {
+  accent: "\x1b[36m",
+  success: "\x1b[32m",
+  warning: "\x1b[33m",
+  error: "\x1b[31m",
+  dim: "\x1b[2m",
+  borderMuted: "\x1b[90m",
+};
+
+function repeat(text: string, count: number): string {
+  return count > 0 ? text.repeat(count) : "";
+}
+
+export function boxInnerWidth(width: number): number {
+  return Math.max(1, width - 2);
+}
+
+export class OverlayTheme {
+  private theme: Theme | null = null;
+
+  setTheme(theme: Theme | null): void {
+    this.theme = theme;
+  }
+
+  fg(color: string, text: string): string {
+    if (this.theme) return this.theme.fg(color as never, text);
+    return `${FALLBACK_COLORS[color] ?? ""}${text}\x1b[0m`;
+  }
+
+  bold(text: string): string {
+    return this.theme ? this.theme.bold(text) : `\x1b[1m${text}\x1b[0m`;
+  }
+
+  frameLine(content: string, width: number): string {
+    const truncated = truncateToWidth(content, width, "");
+    return `${this.fg("borderMuted", "│")}${truncated}${repeat(" ", width - visibleWidth(truncated))}${this.fg("borderMuted", "│")}`;
+  }
+
+  ruleLine(width: number): string {
+    return this.fg("borderMuted", `├${repeat("─", width)}┤`);
+  }
+
+  borderLine(width: number, edge: "top" | "bottom"): string {
+    return this.fg("borderMuted", `${edge === "top" ? "┌" : "└"}${repeat("─", width)}${edge === "top" ? "┐" : "┘"}`);
+  }
+}