shadow-claw 1.23.4 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadow-claw",
-  "version": "1.23.4",
+  "version": "1.24.0",
   "type": "module",
   "license": "AGPL-3.0",
   "description": "Browser-native personal AI assistant.",
@@ -92,6 +92,7 @@
     "imapflow": "^1.3.3",
     "isomorphic-git": "^1.37.6",
     "marked": "^18.0.3",
+    "node-datachannel": "^0.33.2",
     "nodemailer": "^8.0.7",
     "peer": "^1.0.2",
     "peerjs": "github:kherrick/peerjs#v1.5.4-custom-events.0",

package/src/__mocks__/jszip.cjs

@@ -1,11 +1,21 @@
-module.exports = class JSZip {
+class JSZip {
   constructor() {}
 
+  static async loadAsync(_file) {
+    return new JSZip();
+  }
+
+  file(_name) {
+    return {
+      async: async (_type) =>
+        JSON.stringify({ messages: [{ id: "1", content: "hello" }] }),
+    };
+  }
+
   async generateAsync() {
     return new Blob([]);
   }
+}
 
-  file() {
-    return this;
-  }
-};
+module.exports = JSZip;
+module.exports.default = JSZip;

package/src/components/settings/shadow-claw-accounts/shadow-claw-accounts.test.ts

@@ -388,4 +388,39 @@ describe("shadow-claw-accounts", () => {
 
     document.body.removeChild(el);
   });
+
+  it("handles setDefaultAccount and deleteAccount", async () => {
+    const el = new ShadowClawAccounts();
+    document.body.appendChild(el);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    await el.render();
+    el.db = {} as any;
+
+    el.accounts = [
+      {
+        id: "acct-1",
+        label: "Account 1",
+        service: "Figma",
+        hostPattern: "api.figma.com",
+        authMode: "token",
+      } as any,
+      {
+        id: "acct-2",
+        label: "Account 2",
+        service: "Linear",
+        hostPattern: "api.linear.app",
+        authMode: "token",
+      } as any,
+    ];
+    el.defaultAccountId = "acct-1";
+
+    await el.setDefaultAccount("acct-2");
+    expect(el.defaultAccountId).toBe("acct-2");
+
+    await el.deleteAccount("acct-1");
+    expect(el.accounts.find((a) => a.id === "acct-1")).toBeUndefined();
+    expect(el.defaultAccountId).toBe("acct-2");
+
+    document.body.removeChild(el);
+  });
 });

package/src/components/settings/shadow-claw-control-plane/shadow-claw-control-plane.css

@@ -0,0 +1,117 @@
+*,
+*::before,
+*::after {
+  font-family: var(--shadow-claw-font-sans);
+}
+
+:host {
+  display: block;
+}
+
+.settings-section {
+  margin-bottom: 1.75rem;
+}
+
+.settings-section h3 {
+  align-items: center;
+  display: flex;
+  font-size: 1rem;
+  font-weight: 600;
+  gap: 0.5rem;
+  margin: 0 0 0.75rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  color: var(--shadow-claw-text-primary);
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+}
+
+.form-input,
+.form-select {
+  background-color: var(--shadow-claw-bg-primary);
+  border: 0.0625rem solid var(--shadow-claw-border-color);
+  border-radius: var(--shadow-claw-radius-s, 0.625rem);
+  box-sizing: border-box;
+  color: var(--shadow-claw-text-primary);
+  font-family: var(--shadow-claw-font-sans);
+  font-size: var(--shadow-claw-font-size-sm);
+  padding: 0.625rem 0.75rem;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+  width: 100%;
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--shadow-claw-accent-primary);
+  box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.06);
+  outline: none;
+}
+
+.form-toggle {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.form-toggle input[type="checkbox"] {
+  accent-color: var(--shadow-claw-accent-primary);
+  cursor: pointer;
+  height: 1.125rem;
+  width: 1.125rem;
+}
+
+.form-toggle .form-label {
+  cursor: pointer;
+  display: inline;
+  margin-bottom: 0;
+}
+
+.form-helper {
+  color: var(--shadow-claw-text-tertiary);
+  font-size: 0.75rem;
+  line-height: 1.45;
+  margin-top: 0.375rem;
+  max-width: 48rem;
+}
+
+.form-helper code {
+  background-color: var(--shadow-claw-bg-secondary);
+  border: 0.0625rem solid var(--shadow-claw-border-color);
+  border-radius: 0.375rem;
+  color: var(--shadow-claw-text-primary);
+  font-family: var(--shadow-claw-font-mono, monospace);
+  font-size: 0.72rem;
+  padding: 0.08rem 0.3rem;
+}
+
+.save-btn {
+  background-color: var(--shadow-claw-text-primary);
+  border: none;
+  border-radius: 62.5rem;
+  color: var(--shadow-claw-bg-primary);
+  cursor: pointer;
+  font-size: var(--shadow-claw-font-size-sm);
+  font-weight: 600;
+  margin-top: 0.75rem;
+  padding: 0.625rem 1.5rem;
+  transition: background-color 150ms cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.save-btn:hover {
+  background-color: var(--shadow-claw-accent-primary);
+  color: var(--shadow-claw-on-primary);
+}
+
+.save-btn:focus-visible {
+  outline: 0.125rem solid var(--shadow-claw-accent-primary);
+  outline-offset: 0.125rem;
+}

package/src/components/settings/shadow-claw-control-plane/shadow-claw-control-plane.html

@@ -0,0 +1,81 @@
+<template>
+  <div class="settings-section">
+    <h3>🎛️ Control Plane</h3>
+
+    <div class="form-group">
+      <div class="form-helper">
+        Configure the remote bridge allowing external tools, CLI commands
+        (<code>shadow-claw</code>), and MCP clients to discover, query, and
+        communicate with this client instance.
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="form-toggle">
+        <input
+          data-setting="control-plane-enabled-toggle"
+          id="control-plane-enabled-toggle"
+          type="checkbox"
+        />
+        <label class="form-label" for="control-plane-enabled-toggle">
+          Enable Remote Control Plane Client
+        </label>
+      </div>
+      <div class="form-helper">
+        Allow the <code>shadow-claw</code> CLI and remote server commands to
+        discover and communicate with this client. When disabled, this client
+        operates in standalone/serverless mode without opening a control plane
+        connection.
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="control-plane-url">
+        Control Plane Server URL
+      </label>
+      <input
+        class="form-input"
+        data-setting="control-plane-url-input"
+        id="control-plane-url"
+        placeholder="http://127.0.0.1:8888"
+        spellcheck="false"
+        type="url"
+      />
+      <div class="form-helper">
+        The base URL of the ShadowClaw server or local dev instance for the CLI
+        and remote control plane (e.g. <code>http://127.0.0.1:8888</code> or
+        <code>https://my-server.example.com</code>). Defaults to
+        <code>127.0.0.1:8888</code> when hosted on static sites (like GitHub
+        Pages), or same-origin on server deployments.
+      </div>
+      <button class="save-btn" data-action="save-control-plane-url">
+        💾 Save Control Plane URL
+      </button>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="control-plane-transport">
+        Control Plane Transport
+      </label>
+      <select
+        class="form-select"
+        id="control-plane-transport"
+        data-setting="control-plane-transport-select"
+      >
+        <option value="sse">
+          Server-Sent Events (SSE + HTTP POST) — Recommended / Proxy Friendly
+          (Default)
+        </option>
+        <option value="websocket">WebSocket (Full Duplex)</option>
+      </select>
+      <div class="form-helper">
+        Select the protocol used for the CLI and remote client control plane.
+        SSE + HTTP POST works through standard reverse proxies and firewalls
+        without requiring connection upgrades.
+      </div>
+      <button class="save-btn" data-action="save-control-plane-transport">
+        💾 Save Transport
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/settings/shadow-claw-control-plane/shadow-claw-control-plane.test.ts

@@ -0,0 +1,127 @@
+import { jest } from "@jest/globals";
+
+jest.unstable_mockModule("../../../core/effect.js", () => ({
+  effect: jest.fn((cb: any) => {
+    cb();
+    return () => {};
+  }),
+}));
+
+jest.unstable_mockModule("../../../db/db.js", () => ({
+  getDb: jest.fn(() => Promise.resolve({})),
+}));
+
+const mockSetConfig = jest.fn(() => Promise.resolve());
+const mockGetConfig = jest.fn(() => Promise.resolve("sse"));
+jest.unstable_mockModule("../../../db/setConfig.js", () => ({
+  setConfig: mockSetConfig,
+}));
+jest.unstable_mockModule("../../../db/getConfig.js", () => ({
+  getConfig: mockGetConfig,
+}));
+
+jest.unstable_mockModule("../../../stores/orchestrator.js", () => ({
+  orchestratorStore: {
+    orchestrator: {},
+    ready: true,
+  },
+}));
+
+jest.unstable_mockModule("../../../ui/toast.js", () => ({
+  showError: jest.fn(),
+  showSuccess: jest.fn(),
+}));
+
+const { ShadowClawControlPlane } =
+  await import("./shadow-claw-control-plane.js");
+const { showSuccess } = (await import("../../../ui/toast.js")) as any;
+
+describe("shadow-claw-control-plane", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = "";
+  });
+
+  it("should render correctly", async () => {
+    const el = new ShadowClawControlPlane();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    expect(el.shadowRoot).toBeTruthy();
+    const toggle = el.shadowRoot?.querySelector(
+      '[data-setting="control-plane-enabled-toggle"]',
+    ) as HTMLInputElement;
+    expect(toggle).toBeTruthy();
+  });
+
+  it("should save control plane transport", async () => {
+    const el = new ShadowClawControlPlane();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const select = el.shadowRoot?.querySelector(
+      '[data-setting="control-plane-transport-select"]',
+    ) as HTMLSelectElement;
+    if (select) select.value = "websocket";
+
+    await el.saveControlPlaneTransport();
+
+    expect(showSuccess).toHaveBeenCalledWith(
+      expect.stringContaining("WEBSOCKET"),
+      expect.any(Number),
+    );
+  });
+
+  it("should save control plane enabled state", async () => {
+    const el = new ShadowClawControlPlane();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    await el.saveControlPlaneEnabled(true);
+
+    expect(mockSetConfig).toHaveBeenCalledWith(
+      expect.anything(),
+      "control_plane_enabled",
+      "true",
+    );
+    expect(showSuccess).toHaveBeenCalledWith(
+      expect.stringContaining("enabled"),
+      expect.any(Number),
+    );
+
+    await el.saveControlPlaneEnabled(false);
+    expect(mockSetConfig).toHaveBeenCalledWith(
+      expect.anything(),
+      "control_plane_enabled",
+      "false",
+    );
+    expect(showSuccess).toHaveBeenCalledWith(
+      expect.stringContaining("disabled"),
+      expect.any(Number),
+    );
+  });
+
+  it("should save control plane url", async () => {
+    const el = new ShadowClawControlPlane();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const input = el.shadowRoot?.querySelector(
+      '[data-setting="control-plane-url-input"]',
+    ) as HTMLInputElement;
+    expect(input).toBeTruthy();
+    input.value = "https://custom-control.example.com";
+
+    await el.saveControlPlaneUrl();
+
+    expect(mockSetConfig).toHaveBeenCalledWith(
+      expect.anything(),
+      "control_plane_url",
+      "https://custom-control.example.com",
+    );
+    expect(showSuccess).toHaveBeenCalledWith(
+      expect.stringContaining("https://custom-control.example.com"),
+      expect.any(Number),
+    );
+  });
+});

package/src/components/settings/shadow-claw-control-plane/shadow-claw-control-plane.ts

@@ -0,0 +1,292 @@
+import { effect } from "../../../core/effect.js";
+import { getDb } from "../../../db/db.js";
+import { getConfig } from "../../../db/getConfig.js";
+import { setConfig } from "../../../db/setConfig.js";
+import {
+  CONFIG_KEYS,
+  DEFAULT_CONTROL_PLANE_ENABLED,
+  DEFAULT_CONTROL_PLANE_TRANSPORT,
+} from "../../../config/config.js";
+import { orchestratorStore } from "../../../stores/orchestrator.js";
+import { showError, showSuccess } from "../../../ui/toast.js";
+
+import type { Orchestrator } from "../../../core/orchestrator/orchestrator.js";
+import type { ShadowClawDatabase } from "../../../db/types.js";
+
+import ShadowClawElement from "../../shadow-claw-element.js";
+import shadowClawControlPlaneStyles from "./shadow-claw-control-plane.css" with { type: "css" };
+import shadowClawControlPlaneTemplate from "./shadow-claw-control-plane.html" with { type: "html" };
+
+const elementName = "shadow-claw-control-plane";
+
+/**
+ * Settings sub-component for Control Plane Client URL, enabled toggle, and transport configuration.
+ */
+export class ShadowClawControlPlane extends ShadowClawElement {
+  static styles = shadowClawControlPlaneStyles;
+  static template = shadowClawControlPlaneTemplate;
+
+  db: ShadowClawDatabase | null;
+  orchestrator: Orchestrator | null;
+
+  constructor() {
+    super();
+
+    this.db = null;
+    this.orchestrator = null;
+  }
+
+  async connectedCallback() {
+    const root = this.shadowRoot;
+    if (!root) {
+      throw new Error("shadowRoot not found");
+    }
+
+    this.db = await getDb();
+    this.orchestrator = orchestratorStore.orchestrator;
+
+    this.bindEventListeners();
+    this.setupEffects();
+    await this.render();
+  }
+
+  bindEventListeners() {
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+
+    root
+      .querySelector('[data-action="save-control-plane-transport"]')
+      ?.addEventListener("click", () => {
+        void this.saveControlPlaneTransport();
+      });
+
+    root
+      .querySelector('[data-action="save-control-plane-url"]')
+      ?.addEventListener("click", () => {
+        void this.saveControlPlaneUrl();
+      });
+
+    root
+      .querySelector('[data-setting="control-plane-enabled-toggle"]')
+      ?.addEventListener("change", (e) => {
+        const target = e.target as HTMLInputElement;
+        void this.saveControlPlaneEnabled(target.checked);
+      });
+  }
+
+  setupEffects() {
+    effect(() => {
+      if (orchestratorStore.ready) {
+        this.orchestrator = orchestratorStore.orchestrator;
+        this.render();
+      }
+    });
+  }
+
+  async render() {
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+
+    const cpEnabledToggle = root.querySelector(
+      '[data-setting="control-plane-enabled-toggle"]',
+    ) as HTMLInputElement | null;
+    if (cpEnabledToggle && this.db) {
+      try {
+        const { isControlPlaneEnabled } =
+          await import("../../../core/utils/initControlPlane.js");
+        cpEnabledToggle.checked = await isControlPlaneEnabled(this.db);
+      } catch (_) {
+        cpEnabledToggle.checked = DEFAULT_CONTROL_PLANE_ENABLED;
+      }
+    }
+
+    const cpUrlInput = root.querySelector(
+      '[data-setting="control-plane-url-input"]',
+    ) as HTMLInputElement | null;
+    if (cpUrlInput && this.db) {
+      try {
+        const stored = await getConfig(this.db, CONFIG_KEYS.CONTROL_PLANE_URL);
+        cpUrlInput.value = stored || "";
+      } catch (_) {
+        cpUrlInput.value = "";
+      }
+    }
+
+    const transportSelect = root.querySelector(
+      '[data-setting="control-plane-transport-select"]',
+    ) as HTMLSelectElement | null;
+    if (transportSelect && this.db) {
+      try {
+        const stored = await getConfig(
+          this.db,
+          CONFIG_KEYS.CONTROL_PLANE_TRANSPORT,
+        );
+        transportSelect.value = stored || DEFAULT_CONTROL_PLANE_TRANSPORT;
+      } catch (_) {
+        transportSelect.value = DEFAULT_CONTROL_PLANE_TRANSPORT;
+      }
+    }
+  }
+
+  async saveControlPlaneTransport() {
+    if (!this.db) {
+      return;
+    }
+
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+
+    const select = root.querySelector(
+      '[data-setting="control-plane-transport-select"]',
+    ) as HTMLSelectElement | null;
+    if (!select) {
+      return;
+    }
+
+    const transport = select.value === "websocket" ? "websocket" : "sse";
+
+    try {
+      await setConfig(this.db, CONFIG_KEYS.CONTROL_PLANE_TRANSPORT, transport);
+      if (typeof localStorage !== "undefined") {
+        try {
+          localStorage.setItem(CONFIG_KEYS.CONTROL_PLANE_TRANSPORT, transport);
+        } catch (_) {}
+      }
+
+      const {
+        isControlPlaneEnabled,
+        createDefaultControlPlaneClient,
+        shouldConnectControlPlane,
+      } = await import("../../../core/utils/initControlPlane.js");
+
+      if (
+        (await isControlPlaneEnabled(this.db)) &&
+        shouldConnectControlPlane()
+      ) {
+        createDefaultControlPlaneClient({
+          orchestrator: this.orchestrator || undefined,
+          transport,
+        });
+      }
+
+      showSuccess(
+        `Control Plane transport saved: ${transport.toUpperCase()}`,
+        3000,
+      );
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      showError("Error saving Control Plane transport: " + errorMsg, 6000);
+    }
+  }
+
+  async saveControlPlaneUrl() {
+    if (!this.db) {
+      return;
+    }
+
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+
+    const input = root.querySelector(
+      '[data-setting="control-plane-url-input"]',
+    ) as HTMLInputElement | null;
+    if (!input) {
+      return;
+    }
+
+    const url = input.value.trim();
+
+    try {
+      await setConfig(this.db, CONFIG_KEYS.CONTROL_PLANE_URL, url);
+      if (typeof localStorage !== "undefined") {
+        try {
+          if (url) {
+            localStorage.setItem(CONFIG_KEYS.CONTROL_PLANE_URL, url);
+          } else {
+            localStorage.removeItem(CONFIG_KEYS.CONTROL_PLANE_URL);
+          }
+        } catch (_) {}
+      }
+
+      const {
+        isControlPlaneEnabled,
+        createDefaultControlPlaneClient,
+        shouldConnectControlPlane,
+      } = await import("../../../core/utils/initControlPlane.js");
+
+      if (
+        (await isControlPlaneEnabled(this.db)) &&
+        shouldConnectControlPlane()
+      ) {
+        createDefaultControlPlaneClient({
+          orchestrator: this.orchestrator || undefined,
+        });
+      }
+
+      showSuccess(
+        url
+          ? `Control Plane URL saved: ${url}`
+          : "Control Plane URL reset to default",
+        3000,
+      );
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      showError("Error saving Control Plane URL: " + errorMsg, 6000);
+    }
+  }
+
+  async saveControlPlaneEnabled(enabled: boolean) {
+    if (!this.db) {
+      return;
+    }
+
+    try {
+      await setConfig(
+        this.db,
+        CONFIG_KEYS.CONTROL_PLANE_ENABLED,
+        enabled ? "true" : "false",
+      );
+      if (typeof localStorage !== "undefined") {
+        try {
+          localStorage.setItem(
+            CONFIG_KEYS.CONTROL_PLANE_ENABLED,
+            enabled ? "true" : "false",
+          );
+        } catch (_) {}
+      }
+
+      const {
+        createDefaultControlPlaneClient,
+        stopControlPlaneClient,
+        shouldConnectControlPlane,
+      } = await import("../../../core/utils/initControlPlane.js");
+
+      if (enabled) {
+        if (shouldConnectControlPlane()) {
+          createDefaultControlPlaneClient({
+            orchestrator: this.orchestrator || undefined,
+          });
+        }
+        showSuccess("Control plane client enabled and connected", 3000);
+      } else {
+        stopControlPlaneClient();
+        showSuccess("Control plane client disabled", 3000);
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      showError("Error saving Control Plane setting: " + errorMsg, 6000);
+    }
+  }
+}
+
+if (!customElements.get(elementName)) {
+  customElements.define(elementName, ShadowClawControlPlane);
+}