shadow-claw 1.51.0 → 1.52.1

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

@@ -500,4 +500,332 @@ describe("shadow-claw-integrations", () => {
 
     document.body.removeChild(el);
   });
+
+  it("connectOAuthFromForm handles successful OAuth flow through polling and token exchange", async () => {
+    const el = new ShadowClawIntegrations();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const oauthSlot = document.createElement("div");
+    oauthSlot.innerHTML = `
+      <select id="int-oauth-provider"><option value="google" selected>Google</option></select>
+      <input id="int-oauth-client-id" value="client-id-123" />
+      <input id="int-oauth-client-secret" value="secret-xyz" />
+      <input id="int-oauth-scope" value="https://mail.google.com/" />
+      <div data-region="oauth-status"></div>
+      <button data-action="connect-oauth"></button>
+    `;
+    el.shadowRoot?.appendChild(oauthSlot);
+
+    (global.fetch as any) = jest.fn((url: string) => {
+      if (url === "/oauth/authorize") {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: async () => ({
+            state: "state-123",
+            authorizeUrl:
+              "https://accounts.google.com/o/oauth2/auth?state=state-123",
+          }),
+        });
+      }
+      if (url.startsWith("/oauth/session/")) {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: async () => ({ status: "authorized" }),
+        });
+      }
+      if (url === "/oauth/token") {
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: async () => ({
+            accessToken: "test-access-token",
+            refreshToken: "test-refresh-token",
+            expiresIn: 3600,
+            scope: "mail.read",
+            tokenType: "Bearer",
+          }),
+        });
+      }
+      return Promise.reject(new Error("Unknown URL: " + url));
+    });
+
+    const windowOpenSpy = jest
+      .spyOn(window, "open")
+      .mockImplementation(() => null);
+    await el.connectOAuthFromForm(oauthSlot);
+
+    expect(windowOpenSpy).toHaveBeenCalledWith(
+      "https://accounts.google.com/o/oauth2/auth?state=state-123",
+      expect.any(String),
+      expect.any(String),
+    );
+    expect(el.pendingOauthResult).toEqual(
+      expect.objectContaining({
+        providerId: "google",
+        accessToken: "test-access-token",
+        refreshToken: "test-refresh-token",
+      }),
+    );
+    expect(
+      oauthSlot.querySelector('[data-region="oauth-status"]')?.textContent,
+    ).toBe("OAuth connected");
+
+    // Also test missing client ID
+    (
+      oauthSlot.querySelector("#int-oauth-client-id") as HTMLInputElement
+    ).value = "";
+    await el.connectOAuthFromForm(oauthSlot);
+
+    windowOpenSpy.mockRestore();
+    document.body.removeChild(el);
+  });
+
+  it("upsertLinkedOAuthAccount handles full account linking and validation errors", async () => {
+    const el = new ShadowClawIntegrations();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+    el.db = {} as any;
+
+    const savedConn = {
+      id: "conn-1",
+      label: "My IMAP",
+      pluginId: "imap",
+      enabled: true,
+      config: {},
+      credentialRef: null,
+      createdAt: 0,
+      updatedAt: 0,
+    } as any;
+
+    const slot = document.createElement("div");
+    slot.innerHTML = `
+      <select id="int-auth-mode"><option value="oauth" selected>OAuth</option></select>
+      <input id="int-username" value="user@gmail.com" />
+      <select id="int-oauth-provider"><option value="google" selected>Google</option></select>
+      <input id="int-oauth-client-id" value="client-id-123" />
+      <input id="int-oauth-client-secret" value="secret-xyz" />
+      <input id="int-oauth-scope" value="https://mail.google.com/" />
+    `;
+
+    // 1. Missing token without pendingOauthResult throws
+    el.pendingOauthResult = null;
+    await expect(el.upsertLinkedOAuthAccount(slot, savedConn)).rejects.toThrow(
+      "Connect OAuth first to obtain an access token.",
+    );
+
+    // 2. Missing username throws
+    (slot.querySelector("#int-username") as HTMLInputElement).value = "";
+    await expect(el.upsertLinkedOAuthAccount(slot, savedConn)).rejects.toThrow(
+      "Email login address is required for OAuth authentication.",
+    );
+    (slot.querySelector("#int-username") as HTMLInputElement).value =
+      "user@gmail.com";
+
+    // 3. Missing client ID throws
+    (slot.querySelector("#int-oauth-client-id") as HTMLInputElement).value = "";
+    await expect(el.upsertLinkedOAuthAccount(slot, savedConn)).rejects.toThrow(
+      "OAuth client ID is required for OAuth authentication.",
+    );
+    (slot.querySelector("#int-oauth-client-id") as HTMLInputElement).value =
+      "client-id-123";
+
+    // 4. Success path with pendingOauthResult
+    el.pendingOauthResult = {
+      providerId: "google",
+      accessToken: "plain-access-token",
+      refreshToken: "plain-refresh-token",
+      expiresAt: Date.now() + 3600000,
+      scope: "https://mail.google.com/",
+      tokenType: "Bearer",
+    };
+
+    const account = await el.upsertLinkedOAuthAccount(slot, savedConn);
+    expect(account).toBeDefined();
+    expect(account.authMode).toBe("oauth");
+    expect(account.oauthClientId).toBe("client-id-123");
+    expect(account.token).toBe("encrypted");
+
+    // 5. Calling buildCredentialRef with oauth returns correct structure
+    const credRef = await el.buildCredentialRef(slot, savedConn);
+    expect(credRef).toEqual({
+      serviceType: "http_api",
+      authType: "oauth",
+      providerId: "google",
+      accountId: account.id,
+      username: "user@gmail.com",
+    });
+
+    document.body.removeChild(el);
+  });
+
+  it("buildCredentialRef enforces username and password rules for basic_userpass", async () => {
+    const el = new ShadowClawIntegrations();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const savedConn = { id: "conn-1" } as any;
+    const slot = document.createElement("div");
+    slot.innerHTML = `
+      <select id="int-auth-mode"><option value="basic_userpass" selected>Password</option></select>
+      <input id="int-username" value="" />
+      <input id="int-password" value="" />
+    `;
+
+    // 1. Both empty -> returns null
+    const refNull = await el.buildCredentialRef(slot, savedConn);
+    expect(refNull).toBeNull();
+
+    // 2. Password without username -> throws
+    (slot.querySelector("#int-password") as HTMLInputElement).value = "pass123";
+    await expect(el.buildCredentialRef(slot, savedConn)).rejects.toThrow(
+      "Auth username is required when a password is configured.",
+    );
+
+    // 3. Username without password -> throws
+    (slot.querySelector("#int-password") as HTMLInputElement).value = "";
+    (slot.querySelector("#int-username") as HTMLInputElement).value =
+      "user@test.com";
+    await expect(el.buildCredentialRef(slot, savedConn)).rejects.toThrow(
+      "Auth password is required when username is configured.",
+    );
+
+    document.body.removeChild(el);
+  });
+
+  it("renderConnectionList handles card action button clicks and delete confirmation cancel", async () => {
+    const el = new ShadowClawIntegrations();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+    el.db = {} as any;
+
+    el.connections = [
+      {
+        id: "conn-1",
+        label: "My IMAP",
+        pluginId: "imap",
+        enabled: true,
+        config: { executionMode: "auto", pollIntervalSec: 120 },
+        credentialRef: { encryptedSecret: "enc" },
+      },
+    ] as any;
+
+    el.renderConnectionList();
+
+    const list = el.shadowRoot?.querySelector(
+      '[data-region="connection-list"]',
+    );
+    const editBtn = list?.querySelector(
+      'button[data-action="edit"]',
+    ) as HTMLButtonElement;
+    const toggleBtn = list?.querySelector(
+      'button[data-action="toggle"]',
+    ) as HTMLButtonElement;
+    const deleteBtn = list?.querySelector(
+      'button[data-action="delete"]',
+    ) as HTMLButtonElement;
+
+    expect(editBtn).not.toBeNull();
+    expect(toggleBtn).not.toBeNull();
+    expect(deleteBtn).not.toBeNull();
+
+    // Click edit -> calls showForm
+    const showFormSpy = jest.spyOn(el, "showForm");
+    editBtn.click();
+    expect(showFormSpy).toHaveBeenCalledWith("conn-1");
+
+    // Click toggle
+    const toggleSpy = jest.spyOn(el, "toggleConnection");
+    toggleBtn.click();
+    expect(toggleSpy).toHaveBeenCalledWith("conn-1");
+
+    // Click delete with confirmation cancelled
+    el.requestConfirmation = jest.fn<any>().mockResolvedValue(false);
+    const { deleteEmailConnection } =
+      await import("../../../subsystems/email/connections.js");
+    (deleteEmailConnection as jest.Mock).mockClear();
+    await el.deleteConnection("conn-1");
+    expect(deleteEmailConnection).not.toHaveBeenCalled();
+
+    // toggleConnection with unknown id
+    await el.toggleConnection("non-existent-id");
+
+    document.body.removeChild(el);
+  });
+
+  it("saveForm parses form values, handles validation errors, extra config JSON, and cancel action", async () => {
+    const el = new ShadowClawIntegrations();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+    el.db = {} as any;
+
+    el.manifests = [
+      {
+        id: "imap",
+        name: "IMAP",
+        configurableFields: ["port", "secure", "mailboxPath"],
+        description: "",
+      } as any,
+    ];
+    (getEmailPluginManifest as jest.Mock).mockReturnValue(el.manifests[0]);
+    el.showForm(null);
+
+    const slot = el.shadowRoot?.querySelector(
+      '[data-region="connection-form"]',
+    ) as HTMLElement;
+
+    // 1. Missing label shows error
+    (slot.querySelector("#int-label") as HTMLInputElement).value = "";
+    await el.saveForm();
+
+    // 2. Invalid extra config JSON shows error
+    (slot.querySelector("#int-label") as HTMLInputElement).value =
+      "Valid Label";
+    (slot.querySelector("#int-extra-config") as HTMLTextAreaElement).value =
+      "{ not-json";
+    await el.saveForm();
+
+    // 3. Valid config with data-config-fields and extra config JSON
+    (slot.querySelector("#int-extra-config") as HTMLTextAreaElement).value =
+      '{"customProp": true}';
+    const portInput = slot.querySelector("#cfg-port") as HTMLInputElement;
+    if (portInput) portInput.value = "993";
+    const secureInput = slot.querySelector("#cfg-secure") as HTMLInputElement;
+    if (secureInput) secureInput.value = "true";
+    const mailboxInput = slot.querySelector(
+      "#cfg-mailboxPath",
+    ) as HTMLInputElement;
+    if (mailboxInput) mailboxInput.value = "INBOX";
+
+    el.buildCredentialRef = jest.fn<any>().mockResolvedValue(null);
+    await el.saveForm();
+
+    const { upsertEmailConnection } =
+      await import("../../../subsystems/email/connections.js");
+    expect(upsertEmailConnection).toHaveBeenCalledWith(
+      el.db,
+      expect.objectContaining({
+        label: "Valid Label",
+        config: expect.objectContaining({
+          port: 993,
+          secure: true,
+          mailboxPath: "INBOX",
+          customProp: true,
+        }),
+      }),
+    );
+
+    // Cancel action hides form
+    el.showForm(null);
+    expect(slot.hidden).toBe(false);
+    const cancelBtn = slot.querySelector(
+      'button[data-action="cancel"]',
+    ) as HTMLButtonElement;
+    cancelBtn.click();
+    expect(slot.hidden).toBe(true);
+
+    document.body.removeChild(el);
+  });
 });

package/src/components/settings/shadow-claw-llm/model-ranking.test.ts

@@ -1,6 +1,9 @@
 import {
   compareLocalModelCandidates,
+  getSortedTransformersJsBrowserModelIds,
   isLikelyInstructionModelId,
+  ORIGINAL_PROMPT_API_MODELS,
+  renderTransformersJsBrowserModelOptions,
 } from "./model-ranking.js";
 
 describe("model-ranking", () => {
@@ -47,25 +50,136 @@ describe("model-ranking", () => {
       expect(compareLocalModelCandidates(b, a, "local")).toBeGreaterThan(0);
     });
 
-    it("ranks smaller quantized ONNX models higher for transformers_js_browser", () => {
-      const smallOnnx = {
-        id: "onnx-community/Qwen2.5-0.5B-Instruct-q4",
+    it("ranks the original 4 prompt api models at the top in order, with remainder models alphabetized for transformers_js_browser", () => {
+      const qwen3 = {
+        id: "onnx-community/Qwen3-0.6B-ONNX",
         supportsTools: true,
         contextLength: 32768,
       };
-      const largeNonOnnx = {
-        id: "meta-llama/Llama-3-8B-Instruct",
+      const gemma3 = {
+        id: "onnx-community/gemma-3-1b-it-ONNX-GQA",
+        supportsTools: true,
+        contextLength: 8192,
+      };
+      const gemma4E2B = {
+        id: "onnx-community/gemma-4-E2B-it-ONNX",
+        supportsTools: true,
+        contextLength: 128000,
+      };
+      const gemma4E4B = {
+        id: "onnx-community/gemma-4-E4B-it-ONNX",
+        supportsTools: true,
+        contextLength: 128000,
+      };
+      const remainderA = {
+        id: "HuggingFaceTB/SmolLM3-3B-ONNX",
+        supportsTools: true,
+        contextLength: 8192,
+      };
+      const remainderZ = {
+        id: "webgpu/Qwen3-4B-ONNX",
         supportsTools: true,
         contextLength: 8192,
       };
 
+      // Top 4 in order
+      expect(
+        compareLocalModelCandidates(qwen3, gemma3, "transformers_js_browser"),
+      ).toBeLessThan(0);
       expect(
         compareLocalModelCandidates(
-          smallOnnx,
-          largeNonOnnx,
+          gemma3,
+          gemma4E2B,
           "transformers_js_browser",
         ),
       ).toBeLessThan(0);
+      expect(
+        compareLocalModelCandidates(
+          gemma4E2B,
+          gemma4E4B,
+          "transformers_js_browser",
+        ),
+      ).toBeLessThan(0);
+
+      // Top 4 vs remainder
+      expect(
+        compareLocalModelCandidates(
+          gemma4E4B,
+          remainderA,
+          "transformers_js_browser",
+        ),
+      ).toBeLessThan(0);
+      expect(
+        compareLocalModelCandidates(
+          remainderA,
+          qwen3,
+          "transformers_js_browser",
+        ),
+      ).toBeGreaterThan(0);
+
+      // Remainder alphabetized
+      expect(
+        compareLocalModelCandidates(
+          remainderA,
+          remainderZ,
+          "transformers_js_browser",
+        ),
+      ).toBeLessThan(0);
+      expect(
+        compareLocalModelCandidates(
+          remainderZ,
+          remainderA,
+          "transformers_js_browser",
+        ),
+      ).toBeGreaterThan(0);
+    });
+
+    it("getSortedTransformersJsBrowserModelIds returns original 4 at top and remainder alphabetized", () => {
+      const sorted = getSortedTransformersJsBrowserModelIds();
+      expect(sorted.slice(0, 4)).toEqual(ORIGINAL_PROMPT_API_MODELS);
+      const remainder = sorted.slice(4);
+      const remainderSorted = [...remainder].sort((a, b) => a.localeCompare(b));
+      expect(remainder).toEqual(remainderSorted);
+    });
+
+    it("renderTransformersJsBrowserModelOptions renders top 4 models, hr separator, and alphabetized remainder", () => {
+      const html = renderTransformersJsBrowserModelOptions(
+        "onnx-community/Qwen3-0.6B-ONNX",
+      );
+
+      // Verify top 4 models rendered with curated labels
+      expect(html).toContain(
+        '<option value="onnx-community/Qwen3-0.6B-ONNX" selected>onnx-community/Qwen3-0.6B-ONNX — Recommended (Fast, Compact &amp; Tool Calling)</option>',
+      );
+      expect(html).toContain(
+        '<option value="onnx-community/gemma-3-1b-it-ONNX-GQA">onnx-community/gemma-3-1b-it-ONNX-GQA — Alternative (1B Parameters)</option>',
+      );
+      expect(html).toContain(
+        '<option value="onnx-community/gemma-4-E2B-it-ONNX">onnx-community/gemma-4-E2B-it-ONNX — Alternative (2B Parameters, 128k Context)</option>',
+      );
+      expect(html).toContain(
+        '<option value="onnx-community/gemma-4-E4B-it-ONNX">onnx-community/gemma-4-E4B-it-ONNX — Alternative (4B Parameters, 128k Context)</option>',
+      );
+
+      // Verify <hr /> separator is placed after top 4 models
+      const idxGemma4E4B = html.indexOf(
+        'value="onnx-community/gemma-4-E4B-it-ONNX"',
+      );
+      const idxHr = html.indexOf("<hr>");
+      const idxSmol = html.indexOf('value="HuggingFaceTB/SmolLM3-3B-ONNX"');
+
+      expect(idxHr).toBeGreaterThan(idxGemma4E4B);
+      expect(idxHr).toBeLessThan(idxSmol);
+
+      // Verify custom model option is appended when requested
+      const withCustom = renderTransformersJsBrowserModelOptions(
+        "onnx-community/Qwen3-0.6B-ONNX",
+        undefined,
+        { includeCustom: true },
+      );
+      expect(withCustom).toContain(
+        '<option value="__custom__">-- Custom Model ID --</option>',
+      );
     });
 
     it("handles various model sizes (0.7b, 1.1b, 1.5b, 7b, unstated size)", () => {

package/src/components/settings/shadow-claw-llm/model-ranking.ts

@@ -1,4 +1,6 @@
 import type { LocalModelRankCandidate } from "../../types.js";
+import { PROVIDERS } from "../../../config/config.js";
+import { escapeHtml } from "../../../utils/utils.js";
 
 function parseModelBillionsFromId(modelId: string): number | null {
   const normalized = modelId.toLowerCase();
@@ -109,11 +111,46 @@ function getLocalModelSortScore(
   return score;
 }
 
+export const ORIGINAL_PROMPT_API_MODELS: readonly string[] = [
+  "onnx-community/Qwen3-0.6B-ONNX",
+  "onnx-community/gemma-3-1b-it-ONNX-GQA",
+  "onnx-community/gemma-4-E2B-it-ONNX",
+  "onnx-community/gemma-4-E4B-it-ONNX",
+];
+
+export const CURATED_PROMPT_API_MODEL_LABELS: Record<string, string> = {
+  "onnx-community/Qwen3-0.6B-ONNX":
+    "onnx-community/Qwen3-0.6B-ONNX — Recommended (Fast, Compact & Tool Calling)",
+  "onnx-community/gemma-3-1b-it-ONNX-GQA":
+    "onnx-community/gemma-3-1b-it-ONNX-GQA — Alternative (1B Parameters)",
+  "onnx-community/gemma-4-E2B-it-ONNX":
+    "onnx-community/gemma-4-E2B-it-ONNX — Alternative (2B Parameters, 128k Context)",
+  "onnx-community/gemma-4-E4B-it-ONNX":
+    "onnx-community/gemma-4-E4B-it-ONNX — Alternative (4B Parameters, 128k Context)",
+};
+
 export function compareLocalModelCandidates(
   a: LocalModelRankCandidate,
   b: LocalModelRankCandidate,
   providerId: string,
 ): number {
+  if (providerId === "transformers_js_browser") {
+    const idxA = ORIGINAL_PROMPT_API_MODELS.indexOf(a.id);
+    const idxB = ORIGINAL_PROMPT_API_MODELS.indexOf(b.id);
+
+    if (idxA !== -1 && idxB !== -1) {
+      return idxA - idxB;
+    }
+    if (idxA !== -1) {
+      return -1;
+    }
+    if (idxB !== -1) {
+      return 1;
+    }
+
+    return a.id.localeCompare(b.id);
+  }
+
   const scoreA = getLocalModelSortScore(a, providerId);
   const scoreB = getLocalModelSortScore(b, providerId);
 
@@ -127,3 +164,63 @@ export function compareLocalModelCandidates(
 
   return a.id.localeCompare(b.id);
 }
+
+export function getSortedTransformersJsBrowserModelIds(
+  modelItems?: Array<string | { id?: string; name?: string }>,
+): string[] {
+  const staticModels = PROVIDERS.transformers_js_browser?.models || [];
+  const rawItems =
+    modelItems && modelItems.length > 0 ? modelItems : staticModels;
+
+  const idSet = new Set<string>();
+  for (const item of rawItems) {
+    const id = typeof item === "string" ? item : item?.id || item?.name;
+    if (id && typeof id === "string" && id.trim()) {
+      idSet.add(id.trim());
+    }
+  }
+  for (const id of ORIGINAL_PROMPT_API_MODELS) {
+    idSet.add(id);
+  }
+  for (const id of staticModels) {
+    idSet.add(id);
+  }
+
+  const allIds = Array.from(idSet);
+  return allIds.sort((a, b) =>
+    compareLocalModelCandidates(
+      { id: a, supportsTools: isLikelyInstructionModelId(a), contextLength: 0 },
+      { id: b, supportsTools: isLikelyInstructionModelId(b), contextLength: 0 },
+      "transformers_js_browser",
+    ),
+  );
+}
+
+export function renderTransformersJsBrowserModelOptions(
+  selectedModel: string,
+  modelItems?: Array<string | { id?: string; name?: string }>,
+  options?: { includeCustom?: boolean },
+): string {
+  const sortedModelIds = getSortedTransformersJsBrowserModelIds(modelItems);
+  let html = "";
+  for (let i = 0; i < sortedModelIds.length; i++) {
+    const id = sortedModelIds[i];
+    const isSelected = id === selectedModel ? " selected" : "";
+    const label =
+      CURATED_PROMPT_API_MODEL_LABELS[id] ||
+      `${id}${isLikelyInstructionModelId(id) ? " 🛠️" : ""}`;
+    html += `<option value="${escapeHtml(id)}"${isSelected}>${escapeHtml(label)}</option>`;
+    if (i === 3 && sortedModelIds.length > 4) {
+      html += "<hr>";
+    }
+  }
+  if (options?.includeCustom) {
+    const isCustomSelected =
+      selectedModel === "__custom__" ||
+      (selectedModel !== "" && !sortedModelIds.includes(selectedModel))
+        ? " selected"
+        : "";
+    html += `<option value="__custom__"${isCustomSelected}>-- Custom Model ID --</option>`;
+  }
+  return html;
+}