shadow-claw 1.51.0 → 1.52.1

package/src/components/shadow-claw-a2ui/shadow-claw-a2ui.test.ts

@@ -1,5 +1,16 @@
 import { jest } from "@jest/globals";
 
+jest.unstable_mockModule("../../storage/readGroupFileBytes.js", () => ({
+  readGroupFileBytes: jest.fn(
+    async (_db: any, _groupId: string, filePath: string) => {
+      if (filePath.includes("error")) {
+        throw new Error("File read error");
+      }
+      return new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+    },
+  ),
+}));
+
 import { setDB } from "../../db/db.js";
 import { registerBasicFunctions } from "../../ui/a2ui/registries/basicFunctions.js";
 import { A2UI_BASIC_CATALOG_ID } from "../../ui/a2ui/types.js";
@@ -1791,4 +1802,102 @@ describe("Basic catalog components unit tests", () => {
 
     document.body.removeChild(el);
   });
+
+  it("resolves workspace media and poster paths to blob URLs", async () => {
+    const el = document.createElement("shadow-claw-a2ui") as any;
+    el.groupId = "peer:media-group";
+    document.body.appendChild(el);
+
+    await (el as any).onTemplateReady;
+
+    el.applyEnvelope({
+      version: "v1.0" as const,
+      type: "createSurface",
+      surfaceId: "media-blob-surface",
+      catalogId: A2UI_BASIC_CATALOG_ID,
+      components: [
+        {
+          id: "root",
+          component: "Column",
+          children: ["img-png", "img-gif", "img-webp", "vid-mp4", "aud-mp3"],
+        },
+        {
+          id: "img-png",
+          component: "Image",
+          url: "sample.png",
+        },
+        {
+          id: "img-gif",
+          component: "Image",
+          url: "sample.gif",
+        },
+        {
+          id: "img-webp",
+          component: "Image",
+          url: "sample.webp",
+        },
+        {
+          id: "vid-mp4",
+          component: "Video",
+          url: "sample.mp4",
+          posterUrl: "poster.jpg",
+        },
+        {
+          id: "aud-mp3",
+          component: "AudioPlayer",
+          url: "sample.mp3",
+        },
+      ] as any,
+      dataModel: {},
+    });
+
+    // Wait for async media resolution
+    await new Promise((resolve) => setTimeout(resolve, 80));
+
+    const root = el.shadowRoot;
+    const imgs = root?.querySelectorAll("img");
+    const video = root?.querySelector("video");
+    const audio = root?.querySelector("audio");
+
+    expect(imgs?.length).toBeGreaterThanOrEqual(3);
+    imgs?.forEach((img: HTMLImageElement) => {
+      expect(img.src).toContain("mock-blob");
+      expect(img.hasAttribute("data-a2ui-workspace-src")).toBe(false);
+    });
+
+    expect(video?.src).toContain("mock-blob");
+    expect(video?.poster).toContain("mock-blob");
+    expect(audio?.src).toContain("mock-blob");
+
+    // Test error handling in resolveSingleMediaToBlobUrl and resolveVideoPosterToBlobUrl
+    el.applyEnvelope({
+      version: "v1.0" as const,
+      type: "createSurface",
+      surfaceId: "media-error-surface",
+      catalogId: A2UI_BASIC_CATALOG_ID,
+      components: [
+        {
+          id: "root",
+          component: "Column",
+          children: ["img-err", "vid-err"],
+        },
+        {
+          id: "img-err",
+          component: "Image",
+          url: "error.png",
+        },
+        {
+          id: "vid-err",
+          component: "Video",
+          url: "error.mp4",
+          posterUrl: "error-poster.jpg",
+        },
+      ] as any,
+      dataModel: {},
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 80));
+
+    document.body.removeChild(el);
+  });
 });

package/src/components/shadow-claw-chat/shadow-claw-chat.html

@@ -153,14 +153,14 @@
 
     <shadow-claw-dialog
       dialog-class="chat__prompt-api-dialog"
-      dialog-aria-label="Prompt API Onboarding"
+      dialog-aria-label="Local AI Onboarding"
     >
       <form class="chat__prompt-api-form" method="dialog">
         <div class="chat__prompt-api-header">
           <div class="chat__prompt-api-icon" aria-hidden="true">&#10024;</div>
           <div>
             <h3 class="chat__prompt-api-title">
-              Welcome to Local AI (Prompt API)
+              Welcome to Local AI (Transformers.js)
             </h3>
             <p class="chat__prompt-api-subtitle">
               On-device intelligence built directly into your browser.
@@ -172,13 +172,16 @@
           <section class="chat__prompt-api-card">
             <h4>&#128274; 100% On-Device</h4>
             <p>
-              ShadowClaw defaults to the browser-native
-              <strong>Prompt API</strong>. Models execute directly on your
+              ShadowClaw defaults to
+              <strong>Transformers.js</strong>. Models execute directly on your
               hardware with no API keys and no subscription costs.
             </p>
           </section>
 
-          <section class="chat__prompt-api-card chat__prompt-api-status-card">
+          <section
+            class="chat__prompt-api-card chat__prompt-api-status-card"
+            hidden
+          >
             <h4>&#127760; Browser Capabilities</h4>
             <div
               class="chat__prompt-api-status-content"
@@ -199,11 +202,10 @@
           </section>
 
           <section class="chat__prompt-api-card chat__prompt-api-fallback-card">
-            <h4>&#9881;&#65039; Default Prompt API Model</h4>
+            <h4>&#9881;&#65039; Default Transformers.js Model</h4>
             <p class="chat__prompt-api-model-desc">
-              Choose your default Prompt API fallback model. If native browser
-              Prompt API is not enabled, ShadowClaw will run this local model
-              directly in the browser:
+              Choose your default Transformers.js model. ShadowClaw will run
+              this local model directly in the browser:
             </p>
             <div class="chat__prompt-api-select-group">
               <label class="form-label" for="prompt-api-fallback-model-select"
@@ -230,6 +232,71 @@
                   onnx-community/gemma-4-E4B-it-ONNX &mdash; Alternative (4B
                   Parameters, 128k Context)
                 </option>
+                <hr />
+                <option value="HuggingFaceTB/SmolLM3-3B-ONNX">
+                  HuggingFaceTB/SmolLM3-3B-ONNX
+                </option>
+                <option value="LiquidAI/LFM2.5-1.2B-Thinking-ONNX">
+                  LiquidAI/LFM2.5-1.2B-Thinking-ONNX &#128736;&#65039;
+                </option>
+                <option
+                  value="onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX"
+                >
+                  onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX
+                  &#128736;&#65039;
+                </option>
+                <option value="onnx-community/LFM2-1.2B-ONNX">
+                  onnx-community/LFM2-1.2B-ONNX
+                </option>
+                <option value="onnx-community/Llama-3.2-1B-Instruct-ONNX">
+                  onnx-community/Llama-3.2-1B-Instruct-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/Llama-3.2-3B-Instruct-ONNX">
+                  onnx-community/Llama-3.2-3B-Instruct-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/Phi-3.5-mini-instruct-onnx-web">
+                  onnx-community/Phi-3.5-mini-instruct-onnx-web
+                  &#128736;&#65039;
+                </option>
+                <option value="onnx-community/Phi-4-mini-instruct-ONNX">
+                  onnx-community/Phi-4-mini-instruct-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/Qwen3.5-0.8B-ONNX-OPT">
+                  onnx-community/Qwen3.5-0.8B-ONNX-OPT
+                </option>
+                <option value="onnx-community/Qwen3.5-4B-ONNX-OPT">
+                  onnx-community/Qwen3.5-4B-ONNX-OPT
+                </option>
+                <option value="onnx-community/gemma-3-1b-it-ONNX">
+                  onnx-community/gemma-3-1b-it-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-12B-it-ONNX">
+                  onnx-community/gemma-4-12B-it-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-12B-it-qat-mobile-ONNX">
+                  onnx-community/gemma-4-12B-it-qat-mobile-ONNX
+                  &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-E27B-it-ONNX">
+                  onnx-community/gemma-4-E27B-it-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-E2B-it-qat-mobile-ONNX">
+                  onnx-community/gemma-4-E2B-it-qat-mobile-ONNX
+                  &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-E4B-it-qat-mobile-ONNX">
+                  onnx-community/gemma-4-E4B-it-qat-mobile-ONNX
+                  &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gemma-4-E9B-it-ONNX">
+                  onnx-community/gemma-4-E9B-it-ONNX &#128736;&#65039;
+                </option>
+                <option value="onnx-community/gpt-oss-20b-ONNX">
+                  onnx-community/gpt-oss-20b-ONNX
+                </option>
+                <option value="webgpu/Qwen3-4B-ONNX">
+                  webgpu/Qwen3-4B-ONNX
+                </option>
               </select>
             </div>
           </section>
@@ -237,10 +304,10 @@
           <section class="chat__prompt-api-card">
             <h4>&#127760; Prefer Cloud AI or Another Provider?</h4>
             <p>
-              Local AI with Prompt API is free and private, but not your only
-              option. ShadowClaw also supports OpenRouter, Anthropic, OpenAI,
-              Google Gemini, and AWS Bedrock. You can configure any provider at
-              any time in Settings.
+              Local AI with Transformers.js is free and private, but not your
+              only option. ShadowClaw also supports OpenRouter, Anthropic,
+              OpenAI, Google Gemini, and AWS Bedrock. You can configure any
+              provider at any time in Settings.
             </p>
           </section>
         </div>
@@ -258,7 +325,7 @@
             class="chat__prompt-api-confirm-btn"
             data-action="confirm-prompt-api-onboarding"
           >
-            Continue with Prompt API
+            Continue with Transformers.js
           </button>
         </div>
       </form>

package/src/components/shadow-claw-chat/shadow-claw-chat.test.ts

@@ -415,6 +415,15 @@ describe("shadow-claw-chat UX enhancements (issue #10)", () => {
         'value="onnx-community/gemma-4-E4B-it-ONNX"',
       );
     });
+
+    it("should reword onboarding dialog to Transformers.js and local AI", () => {
+      expect(templateHtml).toContain("Welcome to Local AI (Transformers.js)");
+      expect(templateHtml).toContain("Continue with Transformers.js");
+      expect(templateHtml).toContain("ShadowClaw defaults to");
+      expect(templateHtml).toContain("Transformers.js");
+      expect(templateHtml).not.toContain("Welcome to Local AI (Prompt API)");
+      expect(templateHtml).not.toContain("Continue with Prompt API");
+    });
   });
 
   describe("AUTO_SCROLL_THRESHOLD constant", () => {
@@ -1355,6 +1364,9 @@ describe("shadow-claw-chat prompt api onboarding", () => {
     expect(storedConfig["prompt_api_fallback_model"]).toBe(
       "onnx-community/Qwen3-0.6B-ONNX",
     );
+    expect(storedConfig["provider"]).toBe("transformers_js_browser");
+    expect(storedConfig["model"]).toBe("onnx-community/Qwen3-0.6B-ONNX");
+    expect(storedConfig["transformers_js_onboarding_seen"]).toBe("true");
     expect(storedConfig["prompt_api_onboarding_seen"]).toBe("true");
     expect(mockDialog.close).toHaveBeenCalledTimes(1);
   });
@@ -1433,6 +1445,67 @@ describe("shadow-claw-chat prompt api onboarding", () => {
     }
   });
 
+  it("should populate onboarding model select with top 4 prompt api models and alphabetized remainder", () => {
+    const instance = Object.create(ShadowClawChat.prototype);
+    const mockSelectEl: any = {
+      innerHTML: "",
+      value: "",
+    };
+
+    instance.populateOnboardingModelSelect(
+      mockSelectEl,
+      "onnx-community/Qwen3-0.6B-ONNX",
+    );
+
+    expect(mockSelectEl.value).toBe("onnx-community/Qwen3-0.6B-ONNX");
+    // Ensure top 4 models are rendered
+    expect(mockSelectEl.innerHTML).toContain(
+      'value="onnx-community/Qwen3-0.6B-ONNX"',
+    );
+    expect(mockSelectEl.innerHTML).toContain(
+      'value="onnx-community/gemma-3-1b-it-ONNX-GQA"',
+    );
+    expect(mockSelectEl.innerHTML).toContain(
+      'value="onnx-community/gemma-4-E2B-it-ONNX"',
+    );
+    expect(mockSelectEl.innerHTML).toContain(
+      'value="onnx-community/gemma-4-E4B-it-ONNX"',
+    );
+    // Ensure remainder models are present
+    expect(mockSelectEl.innerHTML).toContain(
+      'value="HuggingFaceTB/SmolLM3-3B-ONNX"',
+    );
+    expect(mockSelectEl.innerHTML).toContain('value="webgpu/Qwen3-4B-ONNX"');
+
+    // Verify ordering in rendered HTML
+    const idxQwen3 = mockSelectEl.innerHTML.indexOf(
+      'value="onnx-community/Qwen3-0.6B-ONNX"',
+    );
+    const idxGemma3 = mockSelectEl.innerHTML.indexOf(
+      'value="onnx-community/gemma-3-1b-it-ONNX-GQA"',
+    );
+    const idxGemma4E2B = mockSelectEl.innerHTML.indexOf(
+      'value="onnx-community/gemma-4-E2B-it-ONNX"',
+    );
+    const idxGemma4E4B = mockSelectEl.innerHTML.indexOf(
+      'value="onnx-community/gemma-4-E4B-it-ONNX"',
+    );
+    const idxSmol = mockSelectEl.innerHTML.indexOf(
+      'value="HuggingFaceTB/SmolLM3-3B-ONNX"',
+    );
+    const idxWebgpu = mockSelectEl.innerHTML.indexOf(
+      'value="webgpu/Qwen3-4B-ONNX"',
+    );
+
+    expect(idxQwen3).toBeLessThan(idxGemma3);
+    expect(idxGemma3).toBeLessThan(idxGemma4E2B);
+    expect(idxGemma4E2B).toBeLessThan(idxGemma4E4B);
+    const idxHr = mockSelectEl.innerHTML.indexOf("<hr>");
+    expect(idxHr).toBeGreaterThan(idxGemma4E4B);
+    expect(idxHr).toBeLessThan(idxSmol);
+    expect(idxSmol).toBeLessThan(idxWebgpu);
+  });
+
   describe("ShadowClawChat helper methods", () => {
     let instance: any;
 

package/src/components/shadow-claw-chat/shadow-claw-chat.trusted-types.test.ts

@@ -108,6 +108,9 @@ jest.unstable_mockModule("../../utils/utils.js", () => ({
   formatTimestamp: jest.fn(() => "now"),
   handleSpecialLinkNavigation: jest.fn(() => false),
   computeSha256: jest.fn(async (_: ArrayBuffer) => "mock-hash"),
+  escapeHtml: jest.fn((text: string) => text.replace(/</g, "&lt;")),
+  sanitizeGroupId: jest.fn((id: string) => id.replace(/[^a-zA-Z0-9-]/g, "-")),
+  sanitizeHtml: jest.fn((html: string) => html),
 }));
 
 jest.unstable_mockModule(

package/src/components/shadow-claw-chat/shadow-claw-chat.ts

@@ -5,6 +5,7 @@ import {
   CONFIG_KEYS,
   DEFAULT_PROMPT_API_FALLBACK_MODEL,
   DEFAULT_PROVIDER,
+  PROVIDERS,
 } from "../../config/config.js";
 import { decodePathSegment } from "../../core/app-routes.js";
 
@@ -64,10 +65,7 @@ import {
   handleSpecialLinkNavigation,
 } from "../../utils/utils.js";
 import { isTruthyConfigValue } from "../../utils/parseBooleanConfig.js";
-import {
-  isNativePromptApiAvailable,
-  renderPromptApiStatusHtml,
-} from "../common/help/prompt-api.js";
+import { renderTransformersJsBrowserModelOptions } from "../settings/shadow-claw-llm/model-ranking.js";
 
 import { computeTokenDisplayValues } from "./utils/computeTokenDisplayValues.js";
 import { escapeHtml } from "./utils/escapeHtml.js";
@@ -1979,6 +1977,11 @@ export class ShadowClawChat extends ShadowClawElement {
 
     if (this.db) {
       try {
+        await setConfig(
+          this.db,
+          CONFIG_KEYS.TRANSFORMERS_JS_ONBOARDING_SEEN,
+          "true",
+        );
         await setConfig(
           this.db,
           CONFIG_KEYS.PROMPT_API_ONBOARDING_SEEN,
@@ -2031,14 +2034,16 @@ export class ShadowClawChat extends ShadowClawElement {
         typeof provider === "string" && provider.trim()
           ? provider.trim()
           : DEFAULT_PROVIDER;
-      if (effectiveProvider !== "prompt_api") {
+      if (effectiveProvider !== "transformers_js_browser") {
         return;
       }
 
-      const seen = await getConfig(
-        this.db,
-        CONFIG_KEYS.PROMPT_API_ONBOARDING_SEEN,
-      );
+      const seen =
+        (await getConfig(
+          this.db,
+          CONFIG_KEYS.TRANSFORMERS_JS_ONBOARDING_SEEN,
+        )) ||
+        (await getConfig(this.db, CONFIG_KEYS.PROMPT_API_ONBOARDING_SEEN));
       if (isTruthyConfigValue(seen, false)) {
         return;
       }
@@ -2050,42 +2055,53 @@ export class ShadowClawChat extends ShadowClawElement {
 
       this.ensureShadowDialogs();
 
-      const isNativeSupported = await isNativePromptApiAvailable();
-      const isAvailable = isNativeSupported;
-
       const statusCard = root.querySelector(".chat__prompt-api-status-card");
       if (statusCard) {
-        (statusCard as HTMLElement).hidden = !isAvailable;
-      }
-
-      const statusEl = root.querySelector('[data-info="prompt-api-status"]');
-      if (statusEl) {
-        setSanitizedHtml(
-          statusEl as HTMLElement,
-          renderPromptApiStatusHtml(isNativeSupported),
-        );
+        (statusCard as HTMLElement).hidden = true;
       }
 
       const fallbackCard = root.querySelector(
         ".chat__prompt-api-fallback-card",
       );
       if (fallbackCard) {
-        (fallbackCard as HTMLElement).hidden = isAvailable;
+        (fallbackCard as HTMLElement).hidden = false;
       }
 
       const modelSelect = root.querySelector(
         '[data-setting="prompt-api-onboarding-fallback-model"]',
       ) as HTMLSelectElement | null;
       if (modelSelect) {
-        const storedFallbackModel = await getConfig(
-          this.db,
-          CONFIG_KEYS.PROMPT_API_FALLBACK_MODEL,
-        );
+        const storedModel =
+          (await getConfig(this.db, CONFIG_KEYS.MODEL)) ||
+          (await getConfig(this.db, CONFIG_KEYS.PROMPT_API_FALLBACK_MODEL));
         const currentModel =
-          typeof storedFallbackModel === "string" && storedFallbackModel.trim()
-            ? storedFallbackModel.trim()
-            : DEFAULT_PROMPT_API_FALLBACK_MODEL;
-        modelSelect.value = currentModel;
+          typeof storedModel === "string" && storedModel.trim()
+            ? storedModel.trim()
+            : PROVIDERS.transformers_js_browser?.defaultModel ||
+              "onnx-community/Qwen3-0.6B-ONNX";
+
+        this.populateOnboardingModelSelect(modelSelect, currentModel);
+
+        const modelsUrl = PROVIDERS.transformers_js_browser?.modelsUrl;
+        if (modelsUrl && typeof fetch === "function") {
+          fetch(modelsUrl)
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+              if (!data) return;
+              const items = Array.isArray(data)
+                ? data
+                : data.models || data.data || [];
+              if (Array.isArray(items) && items.length > 0) {
+                const currentSelected = modelSelect.value || currentModel;
+                this.populateOnboardingModelSelect(
+                  modelSelect,
+                  currentSelected,
+                  items,
+                );
+              }
+            })
+            .catch(() => {});
+        }
       }
 
       const shadowDialog = root.querySelector(
@@ -2111,6 +2127,19 @@ export class ShadowClawChat extends ShadowClawElement {
     }
   }
 
+  populateOnboardingModelSelect(
+    modelSelect: HTMLSelectElement,
+    selectedModel: string,
+    modelItems?: any[],
+  ): void {
+    const html = renderTransformersJsBrowserModelOptions(
+      selectedModel,
+      modelItems,
+    );
+    setSanitizedHtml(modelSelect, html);
+    modelSelect.value = selectedModel;
+  }
+
   async confirmPromptApiOnboarding(): Promise<void> {
     const root = this.shadowRoot;
     if (!root) {
@@ -2125,15 +2154,28 @@ export class ShadowClawChat extends ShadowClawElement {
       '[data-setting="prompt-api-onboarding-fallback-model"]',
     ) as HTMLSelectElement | null;
     const selectedModel =
-      modelSelect?.value?.trim() || DEFAULT_PROMPT_API_FALLBACK_MODEL;
+      modelSelect?.value?.trim() ||
+      PROVIDERS.transformers_js_browser?.defaultModel ||
+      DEFAULT_PROMPT_API_FALLBACK_MODEL;
 
     if (this.db) {
       try {
+        await setConfig(
+          this.db,
+          CONFIG_KEYS.PROVIDER,
+          "transformers_js_browser",
+        );
+        await setConfig(this.db, CONFIG_KEYS.MODEL, selectedModel);
         await setConfig(
           this.db,
           CONFIG_KEYS.PROMPT_API_FALLBACK_MODEL,
           selectedModel,
         );
+        await setConfig(
+          this.db,
+          CONFIG_KEYS.TRANSFORMERS_JS_ONBOARDING_SEEN,
+          "true",
+        );
         await setConfig(
           this.db,
           CONFIG_KEYS.PROMPT_API_ONBOARDING_SEEN,
@@ -2144,6 +2186,11 @@ export class ShadowClawChat extends ShadowClawElement {
       }
     }
 
+    if (orchestratorStore.orchestrator) {
+      orchestratorStore.orchestrator.provider = "transformers_js_browser";
+      orchestratorStore.orchestrator.model = selectedModel;
+    }
+
     const shadowDialog = root.querySelector(
       'shadow-claw-dialog[dialog-class="chat__prompt-api-dialog"]',
     );
@@ -2156,7 +2203,7 @@ export class ShadowClawChat extends ShadowClawElement {
       }
     }
 
-    showSuccess("Prompt API configured", 2500);
+    showSuccess("Transformers.js configured", 2500);
   }
 
   async downloadAttachment(groupId: string, attachment: MessageAttachment) {