shadow-claw 1.23.4 → 1.24.1

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

@@ -198,4 +198,190 @@ describe("shadow-claw-peerjs", () => {
       "http://localhost/?peer=test",
     );
   });
+
+  it("should show room QR code", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const room = { roomId: "room-1", name: "Room One" };
+    await el.showRoomQr(room);
+
+    const group = el.shadowRoot?.querySelector(
+      '[data-info="room-qr-group"]',
+    ) as HTMLElement;
+    const label = el.shadowRoot?.querySelector('[data-info="room-qr-label"]');
+    expect(group.hidden).toBe(false);
+    expect(label?.textContent).toContain("Room One");
+
+    document.body.removeChild(el);
+  });
+
+  it("should add and remove trusted peer rows", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const initialRows =
+      el.shadowRoot?.querySelectorAll(".peerjs-trusted-peer-row").length || 0;
+    el._appendTrustedPeerRow("peer-xyz", "Peer XYZ");
+
+    const newRows = el.shadowRoot?.querySelectorAll(".peerjs-trusted-peer-row");
+    expect(newRows.length).toBe(initialRows + 1);
+
+    // Remove row
+    const removeBtn = newRows[newRows.length - 1].querySelector(
+      ".save-btn--danger",
+    ) as HTMLButtonElement;
+    removeBtn?.click();
+
+    expect(
+      el.shadowRoot?.querySelectorAll(".peerjs-trusted-peer-row").length,
+    ).toBe(initialRows);
+
+    document.body.removeChild(el);
+  });
+
+  it("should copy room URL and generate trusted peer options with aliases", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const mockClipboard = {
+      writeText: jest.fn<any>().mockResolvedValue(undefined),
+    };
+    Object.assign(navigator, { clipboard: mockClipboard });
+
+    const options = el._trustedPeerOptions();
+    expect(options.length).toBeGreaterThan(0);
+
+    document.body.removeChild(el);
+  });
+
+  it("handles copyPeerId and copyPeerUrl", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const mockClipboard = {
+      writeText: jest.fn<any>().mockResolvedValue(undefined),
+    };
+    Object.assign(navigator, { clipboard: mockClipboard });
+
+    // 1. Copy Peer ID
+    const peerIdInput = el.shadowRoot?.querySelector(
+      '[data-setting="peerjs-my-peer-id-input"]',
+    ) as HTMLInputElement;
+    if (peerIdInput) peerIdInput.value = "my-test-peer";
+    await el.copyPeerId();
+    expect(mockClipboard.writeText).toHaveBeenCalledWith("my-test-peer");
+
+    // 2. Copy Peer URL
+    el._currentPeerUrl = "http://localhost/?peer=my-test-peer";
+    await el.copyPeerUrl();
+    expect(mockClipboard.writeText).toHaveBeenCalledWith(
+      "http://localhost/?peer=my-test-peer",
+    );
+
+    document.body.removeChild(el);
+  });
+
+  it("handles savePeerJsConfig", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const hostInput = el.shadowRoot?.querySelector(
+      '[data-setting="peerjs-server-host-input"]',
+    ) as HTMLInputElement;
+    const portInput = el.shadowRoot?.querySelector(
+      '[data-setting="peerjs-server-port-input"]',
+    ) as HTMLInputElement;
+
+    if (hostInput) hostInput.value = "peer.example.com";
+    if (portInput) portInput.value = "9001";
+
+    await el.savePeerJsConfig();
+    expect(mockConfigurePeerJs).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      "test-peer-id",
+      expect.any(Array),
+      "peer.example.com",
+      9001,
+      "/myapp",
+      false,
+    );
+
+    document.body.removeChild(el);
+  });
+
+  it("handles copyRoomUrl, showRoomQr, updateConnectionStatus, and updateQrCode", async () => {
+    const el = new ShadowClawPeerJs() as any;
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    const mockClipboard = {
+      writeText: jest.fn<any>().mockResolvedValue(undefined),
+    };
+    Object.assign(navigator, { clipboard: mockClipboard });
+
+    // 1. copyRoomUrl
+    el._currentRoomUrl = "http://localhost/?room=test-room";
+    await el.copyRoomUrl();
+    expect(mockClipboard.writeText).toHaveBeenCalledWith(
+      "http://localhost/?room=test-room",
+    );
+
+    // 2. showRoomQr
+    const room = {
+      roomId: "room-1",
+      name: "Test Room",
+      members: [],
+      createdAt: 0,
+      updatedAt: 0,
+    };
+    await el.showRoomQr(room);
+    expect(el._currentRoomUrl).toContain("room-1");
+
+    // 4. renderRooms
+    const { listRooms } =
+      await import("../../../core/orchestrator/utils/operations/room.js");
+    const testRooms = [
+      {
+        roomId: "room-host-1",
+        name: "My Host Room",
+        hostPeerId: "test-peer-id",
+        members: [
+          { peerId: "test-peer-id", alias: "Host Me", kind: "human" },
+          { peerId: "peer-remote-1", alias: "Agent Remote", kind: "agent" },
+        ],
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      },
+      {
+        roomId: "room-guest-2",
+        name: "Guest Room",
+        hostPeerId: "peer-other",
+        members: [{ peerId: "peer-other", alias: "Other", kind: "human" }],
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      },
+    ];
+    (listRooms as jest.Mock<any>).mockReturnValue(testRooms);
+
+    let roomsContainer = el.shadowRoot?.querySelector(
+      '[data-info="rooms-list"]',
+    );
+    if (!roomsContainer) {
+      roomsContainer = document.createElement("div");
+      roomsContainer.setAttribute("data-info", "rooms-list");
+      el.shadowRoot?.appendChild(roomsContainer);
+    }
+
+    el.renderRooms();
+    expect(roomsContainer.querySelectorAll(".peerjs-room-card").length).toBe(2);
+
+    document.body.removeChild(el);
+  });
 });

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

@@ -51,6 +51,28 @@ jest.unstable_mockModule("../../../storage/getStorageEstimate.js", () => ({
     .mockResolvedValue({ usage: 1024, quota: 10240 }),
 }));
 
+jest.unstable_mockModule("../../../storage/storage.js", () => ({
+  resetStorageDirectory: jest.fn<any>().mockResolvedValue(undefined),
+  getStorageRoot: jest.fn<any>().mockResolvedValue({}),
+  setStorageRoot: jest.fn(),
+  invalidateStorageRoot: jest.fn(),
+  isStaleHandleError: jest.fn(() => false),
+  setStorageDirectory: jest.fn<any>().mockResolvedValue(undefined),
+  getStorageStatus: jest
+    .fn<any>()
+    .mockResolvedValue({ type: "opfs", permission: "granted", name: "OPFS" }),
+  getOpfsRootDirName: jest.fn(() => "shadow-claw-opfs"),
+  isDirectoryHandle: jest.fn(() => false),
+}));
+
+jest.unstable_mockModule("../../../stores/orchestrator.js", () => ({
+  orchestratorStore: {
+    storageStatus: { type: "opfs", permission: "granted" },
+    resetSiteConfigSeed: jest.fn<any>().mockResolvedValue(undefined),
+    loadFiles: jest.fn<any>().mockResolvedValue(undefined),
+  },
+}));
+
 const { CONFIG_KEYS } = await import("../../../config/config.js");
 const { getConfig } = await import("../../../db/getConfig.js");
 const { setConfig } = await import("../../../db/setConfig.js");
@@ -115,4 +137,58 @@ describe("shadow-claw-storage", () => {
 
     document.body.removeChild(el);
   });
+
+  it("formats bytes accurately", () => {
+    const el = new ShadowClawStorage();
+    expect(el.formatBytes(0)).toBe("0 B");
+    expect(el.formatBytes(1024)).toBe("1 KB");
+    expect(el.formatBytes(1048576)).toBe("1 MB");
+    expect(el.formatBytes(1073741824)).toBe("1 GB");
+  });
+
+  it("handles requestPersistentStorage", async () => {
+    const el = new ShadowClawStorage() as any;
+    el.db = {};
+    el.updateStorageInfo = jest.fn();
+
+    const { requestPersistentStorage } =
+      await import("../../../storage/requestPersistentStorage.js");
+    (requestPersistentStorage as jest.Mock<any>).mockResolvedValueOnce(true);
+
+    await el.handleRequestPersistent();
+    expect(showSuccess).toHaveBeenCalledWith(
+      "Persistent storage granted",
+      3500,
+    );
+
+    const { showWarning } = await import("../../../ui/toast.js");
+    (requestPersistentStorage as jest.Mock<any>).mockResolvedValueOnce(false);
+    await el.handleRequestPersistent();
+    expect(showWarning).toHaveBeenCalled();
+  });
+
+  it("handles handleResetSiteConfig and handleResetStorageDir", async () => {
+    const el = new ShadowClawStorage() as any;
+    el.db = {};
+    el.updateStorageInfo = jest.fn();
+
+    // With confirmation false
+    el.requestConfirmation = (jest.fn() as any).mockResolvedValue(false);
+    await el.handleResetSiteConfig();
+    await el.handleResetStorageDir();
+
+    // With confirmation true
+    el.requestConfirmation = (jest.fn() as any).mockResolvedValue(true);
+    await el.handleResetSiteConfig();
+    expect(showSuccess).toHaveBeenCalledWith(
+      "Site config reset. Reload to apply its defaults again.",
+      5000,
+    );
+
+    await el.handleResetStorageDir();
+    expect(showSuccess).toHaveBeenCalledWith(
+      "Reverted to browser-internal storage",
+      3500,
+    );
+  });
 });

package/src/components/settings/shadow-claw-task-server/shadow-claw-task-server.css

@@ -33,7 +33,8 @@
   margin-bottom: 0.375rem;
 }
 
-.form-input {
+.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);
@@ -48,12 +49,32 @@
   width: 100%;
 }
 
-.form-input:focus {
+.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;

package/src/components/settings/shadow-claw-task-server/shadow-claw-task-server.html

@@ -44,7 +44,7 @@
         site, and task scheduling runs on a separate backend.
       </div>
       <button class="save-btn" data-action="save-task-server-url">
-        💾 Save Task Server URL
+        💾 Save URL
       </button>
     </div>
   </div>

package/src/components/settings/shadow-claw-task-server/shadow-claw-task-server.test.ts

@@ -25,6 +25,7 @@ jest.unstable_mockModule("../../../stores/orchestrator.js", () => ({
   orchestratorStore: {
     orchestrator: {
       taskServerUrl: "/test-schedule",
+      taskServerEnabled: true,
     },
     ready: true,
   },
@@ -56,6 +57,10 @@ describe("shadow-claw-task-server", () => {
       '[data-setting="task-server-url-input"]',
     ) as HTMLInputElement;
     expect(input.value).toBe("/test-schedule");
+    const enabledToggle = el.shadowRoot?.querySelector(
+      '[data-setting="task-server-enabled-toggle"]',
+    ) as HTMLInputElement;
+    expect(enabledToggle.checked).toBe(true);
   });
 
   it("should save task server url", async () => {
@@ -77,4 +82,18 @@ describe("shadow-claw-task-server", () => {
     );
     expect(showSuccess).toHaveBeenCalled();
   });
+
+  it("should save task server enabled toggle", async () => {
+    const el = new ShadowClawTaskServer();
+    document.body.appendChild(el);
+    await el.connectedCallback();
+
+    await el.saveTaskServerEnabled(false);
+
+    expect(mockSetTaskServerEnabled).toHaveBeenCalledWith(
+      orchestratorStore.orchestrator,
+      expect.anything(),
+      false,
+    );
+  });
 });

package/src/components/settings/shadow-claw-task-server/shadow-claw-task-server.ts

@@ -17,7 +17,7 @@ import shadowClawTaskServerTemplate from "./shadow-claw-task-server.html" with {
 const elementName = "shadow-claw-task-server";
 
 /**
- * Settings sub-component for Task Server URL configuration.
+ * Settings sub-component for Task Server URL and server-side task scheduling configuration.
  */
 export class ShadowClawTaskServer extends ShadowClawElement {
   static styles = shadowClawTaskServerStyles;
@@ -100,6 +100,7 @@ export class ShadowClawTaskServer extends ShadowClawElement {
       enabledToggle.checked = this.orchestrator.taskServerEnabled;
     }
   }
+
   async saveTaskServerEnabled(enabled: boolean) {
     if (!this.orchestrator || !this.db) {
       return;

package/src/components/shadow-claw/utils/initChatSplitResize.test.ts

@@ -1,27 +1,88 @@
 import { jest } from "@jest/globals";
-import { initChatSplitResize } from "./initChatSplitResize.js";
+import {
+  DEFAULT_CHAT_SPLIT_HEIGHT_PX,
+  MIN_CHAT_SPLIT_HEIGHT_PX,
+} from "../constants.js";
+
+const mockGetConfig = jest.fn() as any;
+const mockSetConfig = jest.fn() as any;
+
+jest.unstable_mockModule("../../../db/getConfig.js", () => ({
+  getConfig: mockGetConfig,
+}));
+
+jest.unstable_mockModule("../../../db/setConfig.js", () => ({
+  setConfig: mockSetConfig,
+}));
+
+const { initChatSplitResize } = await import("./initChatSplitResize.js");
 
 describe("initChatSplitResize", () => {
   let shadowRoot: ShadowRoot;
   let mainContent: HTMLElement;
+  let chatPage: HTMLElement;
   let handle: HTMLElement;
   let shadowClaw: any;
+  let cleanups: Array<() => void>;
 
   beforeEach(() => {
+    jest.clearAllMocks();
+    cleanups = [];
+
+    // Mock desktop window dimensions
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 1200,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      writable: true,
+      configurable: true,
+      value: 900,
+    });
+
     const host = document.createElement("div");
     shadowRoot = host.attachShadow({ mode: "open" });
 
     mainContent = document.createElement("div");
     mainContent.classList.add("main-content");
+    mainContent.getBoundingClientRect = () => ({
+      height: 900,
+      width: 1200,
+      top: 0,
+      left: 0,
+      bottom: 900,
+      right: 1200,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+    chatPage = document.createElement("div");
+    chatPage.classList.add("chat-page");
+    chatPage.getBoundingClientRect = () => ({
+      height: 300,
+      width: 400,
+      top: 0,
+      left: 0,
+      bottom: 300,
+      right: 400,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
 
     handle = document.createElement("div");
     handle.classList.add("chat-split-resize-handle");
 
     mainContent.appendChild(handle);
+    mainContent.appendChild(chatPage);
     shadowRoot.appendChild(mainContent);
 
     shadowClaw = {
-      addCleanup: jest.fn(),
+      addCleanup: jest.fn((fn: () => void) => {
+        cleanups.push(fn);
+      }),
     };
 
     if (!Element.prototype.setPointerCapture) {
@@ -29,31 +90,137 @@ describe("initChatSplitResize", () => {
     }
   });
 
-  it("should initialize attributes and event listeners", async () => {
-    await initChatSplitResize(shadowRoot, shadowClaw, handle, undefined);
+  afterEach(() => {
+    for (const fn of cleanups) {
+      fn();
+    }
+  });
+
+  it("handles null shadow or null handle safely", async () => {
+    await initChatSplitResize(null, shadowClaw, handle, undefined);
+    expect(shadowClaw.addCleanup).not.toHaveBeenCalled();
 
-    expect(handle.getAttribute("tabindex")).toBe("0");
-    expect(handle.getAttribute("role")).toBe("separator");
-    expect(handle.getAttribute("aria-orientation")).toBe("horizontal");
-    expect(handle.getAttribute("aria-label")).toBe("Resize chat panel height");
-    expect(shadowClaw.addCleanup).toHaveBeenCalled();
+    await initChatSplitResize(shadowRoot, shadowClaw, null as any, undefined);
+    expect(shadowClaw.addCleanup).not.toHaveBeenCalled();
   });
 
-  it("should update height on ArrowUp / ArrowDown keydown", async () => {
-    await initChatSplitResize(shadowRoot, shadowClaw, handle, undefined);
+  it("loads saved height from db or defaults", async () => {
+    const mockDb: any = {};
+    mockGetConfig.mockResolvedValueOnce(450);
+
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+    expect(mainContent.style.getPropertyValue("--chat-split-height")).toBe(
+      "450px",
+    );
+
+    // String saved value
+    mockGetConfig.mockResolvedValueOnce("350");
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+    expect(mainContent.style.getPropertyValue("--chat-split-height")).toBe(
+      "350px",
+    );
+
+    // Fallback on error
+    mockGetConfig.mockRejectedValueOnce(new Error("DB error"));
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+    expect(mainContent.style.getPropertyValue("--chat-split-height")).toBe(
+      `${DEFAULT_CHAT_SPLIT_HEIGHT_PX}px`,
+    );
+  });
+
+  it("handles pointer drag resize workflow", async () => {
+    const mockDb: any = {};
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+
+    // Pointer down to start drag
+    const pointerDownEvent = new Event("pointerdown", { bubbles: true }) as any;
+    pointerDownEvent.pointerId = 1;
+    pointerDownEvent.pointerType = "mouse";
+    pointerDownEvent.button = 0;
+    pointerDownEvent.clientY = 500;
+    pointerDownEvent.preventDefault = jest.fn();
+
+    handle.dispatchEvent(pointerDownEvent);
+    expect(handle.classList.contains("active")).toBe(true);
+
+    // Pointer move dragging upward (delta = 500 - 400 = 100 increase)
+    const pointerMoveEvent = new Event("pointermove", { bubbles: true }) as any;
+    pointerMoveEvent.pointerId = 1;
+    pointerMoveEvent.clientY = 400;
+    document.dispatchEvent(pointerMoveEvent);
+
+    // Pointer up to finish drag
+    const pointerUpEvent = new Event("pointerup", { bubbles: true }) as any;
+    pointerUpEvent.pointerId = 1;
+    handle.dispatchEvent(pointerUpEvent);
 
+    expect(handle.classList.contains("active")).toBe(false);
+  });
+
+  it("handles dblclick to reset to default height", async () => {
+    const mockDb: any = {};
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+
+    mainContent.style.setProperty("--chat-split-height", "600px");
+    handle.dispatchEvent(new MouseEvent("dblclick", { bubbles: true }));
+
+    expect(mainContent.style.getPropertyValue("--chat-split-height")).toBe(
+      `${DEFAULT_CHAT_SPLIT_HEIGHT_PX}px`,
+    );
+  });
+
+  it("handles keyboard navigation with Home, End, Shift+Arrow", async () => {
+    const mockDb: any = {};
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, mockDb);
+
+    // Home key sets to min height
     handle.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
+      new KeyboardEvent("keydown", { key: "Home", bubbles: true }),
+    );
+    expect(mainContent.style.getPropertyValue("--chat-split-height")).toBe(
+      `${MIN_CHAT_SPLIT_HEIGHT_PX}px`,
+    );
+
+    // End key sets to max clamped height
+    handle.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "End", bubbles: true }),
     );
     expect(
       mainContent.style.getPropertyValue("--chat-split-height"),
     ).toBeTruthy();
 
+    // Shift + ArrowUp increases by 32
     handle.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }),
+      new KeyboardEvent("keydown", {
+        key: "ArrowUp",
+        shiftKey: true,
+        bubbles: true,
+      }),
     );
     expect(
       mainContent.style.getPropertyValue("--chat-split-height"),
     ).toBeTruthy();
   });
+
+  it("ignores resize events on mobile screen width (< 896px)", async () => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 600,
+    });
+
+    await initChatSplitResize(shadowRoot, shadowClaw, handle, undefined);
+
+    const pointerDownEvent = new Event("pointerdown", { bubbles: true }) as any;
+    pointerDownEvent.pointerId = 1;
+    pointerDownEvent.clientY = 500;
+    pointerDownEvent.button = 0;
+
+    handle.dispatchEvent(pointerDownEvent);
+    expect(handle.classList.contains("active")).toBe(false);
+
+    handle.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
+    );
+  });
 });

package/src/components/shadow-claw/utils/setupEffects.test.ts

@@ -10,6 +10,8 @@ describe("setupEffects", () => {
   let mockShowSuccess: any;
   let mockShowPage: any;
   let mockUpdateActivityLogToggleVisibility: any;
+  let mockEnsureComponentLoaded: any;
+  let mockFileViewerStore: any;
   let setupEffects: any;
 
   let effectCallbacks: Array<() => void>;
@@ -25,6 +27,8 @@ describe("setupEffects", () => {
     mockShowSuccess = jest.fn();
     mockShowPage = jest.fn();
     mockUpdateActivityLogToggleVisibility = jest.fn();
+    mockEnsureComponentLoaded = jest.fn().mockResolvedValue(undefined as never);
+    mockFileViewerStore = { file: null };
 
     jest.unstable_mockModule("../../../core/effect.js", () => ({
       effect: mockEffect,
@@ -42,7 +46,19 @@ describe("setupEffects", () => {
       updateActivityLogToggleVisibility: mockUpdateActivityLogToggleVisibility,
     }));
 
+    jest.unstable_mockModule("./loadComponent.js", () => ({
+      ensureComponentLoaded: mockEnsureComponentLoaded,
+    }));
+
+    jest.unstable_mockModule("../../../stores/file-viewer.js", () => ({
+      fileViewerStore: mockFileViewerStore,
+    }));
+
     shadowRoot = document.createElement("div").attachShadow({ mode: "open" });
+    const main = document.createElement("div");
+    main.classList.add("main-content");
+    shadowRoot.appendChild(main);
+
     shadowClaw = { previousOrchestratorState: "idle", currentPage: "chat" };
     db = {};
     oStore = { state: "idle", activePage: "chat", activityLog: [] };
@@ -65,6 +81,29 @@ describe("setupEffects", () => {
     expect(mockEffect).toHaveBeenCalledTimes(4);
   });
 
+  it("fileViewerStore effect should load file-viewer and pdf-viewer and stamp DOM", async () => {
+    setupEffects(shadowRoot, shadowClaw, db, oStore);
+    const cb = effectCallbacks[0];
+
+    // When file is null, do nothing
+    mockFileViewerStore.file = null;
+    cb();
+    expect(mockEnsureComponentLoaded).not.toHaveBeenCalled();
+
+    // When file is a text file
+    mockFileViewerStore.file = { name: "doc.txt", kind: "text" };
+    cb();
+    expect(mockEnsureComponentLoaded).toHaveBeenCalledWith("file-viewer");
+
+    await Promise.resolve();
+    expect(shadowRoot.querySelector("shadow-claw-file-viewer")).not.toBeNull();
+
+    // When file is a PDF
+    mockFileViewerStore.file = { name: "manual.pdf", kind: "pdf" };
+    cb();
+    expect(mockEnsureComponentLoaded).toHaveBeenCalledWith("pdf-viewer");
+  });
+
   it("orchestrator state effect should showSuccess when transitioning to idle from thinking/responding", () => {
     setupEffects(shadowRoot, shadowClaw, db, oStore);
     const cb = effectCallbacks[1];