shadow-claw 1.23.4 → 1.24.0

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

package/src/components/shadow-claw-a2ui/catalog/basic/shared.test.ts

@@ -0,0 +1,117 @@
+import { applyWeight, renderChildrenList, variantToTag } from "./shared.js";
+
+describe("catalog/basic/shared", () => {
+  describe("variantToTag", () => {
+    it("maps header variants to appropriate tags", () => {
+      expect(variantToTag("h1")).toBe("h1");
+      expect(variantToTag("h2")).toBe("h2");
+      expect(variantToTag("h3")).toBe("h3");
+      expect(variantToTag("h4")).toBe("h4");
+      expect(variantToTag("h5")).toBe("h5");
+      expect(variantToTag("body" as any)).toBe("span");
+      expect(variantToTag("caption" as any)).toBe("span");
+    });
+  });
+
+  describe("applyWeight", () => {
+    it("applies flexGrow when weight is defined", () => {
+      const el = document.createElement("div");
+      applyWeight(el, 2);
+      expect(el.style.flexGrow).toBe("2");
+    });
+
+    it("does nothing when weight is undefined", () => {
+      const el = document.createElement("div");
+      applyWeight(el, undefined);
+      expect(el.style.flexGrow).toBe("");
+    });
+  });
+
+  describe("renderChildrenList", () => {
+    it("renders array of component IDs", () => {
+      const rendered: HTMLElement[] = [];
+      const ctx = {
+        renderComponent: (id: string) => {
+          const div = document.createElement("div");
+          div.id = id;
+          return div;
+        },
+      };
+
+      renderChildrenList(
+        ["comp-1", "comp-2"],
+        { dataModel: {} } as any,
+        ctx,
+        (el) => rendered.push(el),
+      );
+
+      expect(rendered).toHaveLength(2);
+      expect(rendered[0].id).toBe("comp-1");
+      expect(rendered[1].id).toBe("comp-2");
+    });
+
+    it("renders array of objects with id property", () => {
+      const rendered: HTMLElement[] = [];
+      const ctx = {
+        renderComponent: (id: string) => {
+          const div = document.createElement("div");
+          div.id = id;
+          return div;
+        },
+      };
+
+      renderChildrenList(
+        [{ id: "item-a" }, { id: "item-b" }] as any,
+        { dataModel: {} } as any,
+        ctx,
+        (el) => rendered.push(el),
+      );
+
+      expect(rendered).toHaveLength(2);
+      expect(rendered[0].id).toBe("item-a");
+    });
+
+    it("renders template bound to dataModel array", () => {
+      const rendered: HTMLElement[] = [];
+      const surface = {
+        dataModel: {
+          tasks: ["Task 1", "Task 2"],
+        },
+      };
+      const ctx = {
+        renderComponent: (id: string, scope?: any) => {
+          const div = document.createElement("div");
+          div.id = `${id}-${scope?.index}`;
+          div.textContent = String(scope?.itemValue);
+          return div;
+        },
+      };
+
+      renderChildrenList(
+        { path: "/tasks", componentId: "task-item" },
+        surface as any,
+        ctx,
+        (el) => rendered.push(el),
+      );
+
+      expect(rendered).toHaveLength(2);
+      expect(rendered[0].textContent).toBe("Task 1");
+      expect(rendered[1].textContent).toBe("Task 2");
+    });
+
+    it("handles non-array template target gracefully", () => {
+      const rendered: HTMLElement[] = [];
+      const surface = { dataModel: { count: 42 } };
+      const ctx = { renderComponent: () => document.createElement("div") };
+
+      renderChildrenList(
+        { path: "/count", componentId: "item" },
+        surface as any,
+        ctx,
+        (el) => rendered.push(el),
+      );
+
+      expect(rendered).toHaveLength(0);
+    });
+  });
+});