shadow-claw 1.23.3 → 1.24.0

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

@@ -17,6 +17,10 @@ jest.unstable_mockModule("../../../db/getConfig.js", () => ({
   getConfig: jest.fn<any>().mockResolvedValue(undefined),
 }));
 
+jest.unstable_mockModule("../../../db/setConfig.js", () => ({
+  setConfig: jest.fn<any>().mockResolvedValue(undefined),
+}));
+
 jest.unstable_mockModule("../../../storage/isPersistent.js", () => ({
   isPersistent: jest.fn<any>().mockResolvedValue(false),
 }));
@@ -47,6 +51,32 @@ 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");
+const { showSuccess } = await import("../../../ui/toast.js");
 const { ShadowClawStorage } = await import("./shadow-claw-storage.js");
 
 describe("shadow-claw-storage", () => {
@@ -71,4 +101,94 @@ describe("shadow-claw-storage", () => {
 
     document.body.removeChild(el);
   });
+
+  it("renders and syncs upload append ULID toggle", async () => {
+    (getConfig as any).mockImplementation((_db: any, key: string) => {
+      if (key === CONFIG_KEYS.FILES_UPLOAD_APPEND_ULID) {
+        return Promise.resolve("true");
+      }
+      return Promise.resolve(undefined);
+    });
+
+    const el = new ShadowClawStorage();
+    document.body.appendChild(el);
+    await new Promise((r) => setTimeout(r, 100));
+    await el.updateStorageInfo();
+
+    const toggle = el.shadowRoot?.querySelector(
+      '[data-setting="files-upload-append-ulid-toggle"]',
+    ) as HTMLInputElement | null;
+    expect(toggle).not.toBeNull();
+    expect(toggle?.checked).toBe(true);
+
+    toggle!.checked = false;
+    toggle!.dispatchEvent(new Event("change"));
+    await new Promise((r) => setTimeout(r, 50));
+
+    expect(setConfig).toHaveBeenCalledWith(
+      expect.anything(),
+      CONFIG_KEYS.FILES_UPLOAD_APPEND_ULID,
+      "false",
+    );
+    expect(showSuccess).toHaveBeenCalledWith(
+      "Unique ID prefix on file upload disabled",
+      2500,
+    );
+
+    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-storage/shadow-claw-storage.ts

@@ -13,6 +13,7 @@ import { resetStorageDirectory } from "../../../storage/storage.js";
 
 import { orchestratorStore } from "../../../stores/orchestrator.js";
 import { showError, showSuccess, showWarning } from "../../../ui/toast.js";
+import { isTruthyConfigValue } from "../../../common/utils/config-value.mjs";
 
 import type { ShadowClawDatabase } from "../../../db/types.js";
 
@@ -86,6 +87,15 @@ export class ShadowClawStorage extends ShadowClawElement {
           orchestratorStore.grantStorageAccess(this.db);
         }
       });
+
+    root
+      .querySelector('[data-setting="files-upload-append-ulid-toggle"]')
+      ?.addEventListener("change", (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        if (target) {
+          void this.onUploadAppendUlidToggle(target.checked);
+        }
+      });
   }
 
   /**
@@ -240,6 +250,37 @@ export class ShadowClawStorage extends ShadowClawElement {
     }
   }
 
+  /**
+   * Handle toggling unique ID prefix for uploaded files.
+   */
+  async onUploadAppendUlidToggle(enabled: boolean) {
+    if (!this.db) {
+      return;
+    }
+
+    try {
+      const { setConfig } = await import("../../../db/setConfig.js");
+      await setConfig(
+        this.db,
+        CONFIG_KEYS.FILES_UPLOAD_APPEND_ULID,
+        enabled ? "true" : "false",
+      );
+
+      showSuccess(
+        enabled
+          ? "Unique ID prefix on file upload enabled"
+          : "Unique ID prefix on file upload disabled",
+        2500,
+      );
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      showError(
+        "Error saving unique ID file upload setting: " + errorMsg,
+        6000,
+      );
+    }
+  }
+
   /**
    * Handle resetting storage directory.
    */
@@ -383,6 +424,21 @@ export class ShadowClawStorage extends ShadowClawElement {
       if (requestPersistentBtn) {
         requestPersistentBtn.disabled = persistent;
       }
+
+      // Sync upload append ULID toggle
+      const uploadAppendUlidVal = await getConfig(
+        this.db,
+        CONFIG_KEYS.FILES_UPLOAD_APPEND_ULID,
+      );
+      const uploadAppendUlidToggle = root.querySelector(
+        '[data-setting="files-upload-append-ulid-toggle"]',
+      ) as HTMLInputElement | null;
+      if (uploadAppendUlidToggle) {
+        uploadAppendUlidToggle.checked = isTruthyConfigValue(
+          uploadAppendUlidVal,
+          false,
+        );
+      }
     } catch (err) {
       console.warn("Failed to update storage info:", err);
     }

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];