@iloveagents/foundry-web-ui 0.1.0

package/src/lib/__tests__/nav-config.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from "vitest";
+import { findNavItem, DEFAULT_NAV_CONFIG, type NavGroup } from "../nav-config";
+
+describe("findNavItem", () => {
+  it("finds item in default config", () => {
+    const result = findNavItem(DEFAULT_NAV_CONFIG, "/");
+    expect(result).not.toBeNull();
+    expect(result!.group).toBe("Pages");
+    expect(result!.item.label).toBe("Chat");
+    expect(result!.item.description).toBeTruthy();
+  });
+
+  it("returns null for unknown path", () => {
+    expect(findNavItem(DEFAULT_NAV_CONFIG, "/unknown")).toBeNull();
+  });
+
+  it("finds item across multiple groups", () => {
+    const config: NavGroup[] = [
+      ...DEFAULT_NAV_CONFIG,
+      {
+        label: "Contracts",
+        items: [
+          {
+            to: "/contracts/123",
+            label: "Acme NDA",
+            icon: DEFAULT_NAV_CONFIG[0].items[0].icon,
+            description: "Review NDA",
+            meta: { contractId: "123" },
+          },
+        ],
+      },
+    ];
+
+    const result = findNavItem(config, "/contracts/123");
+    expect(result).not.toBeNull();
+    expect(result!.group).toBe("Contracts");
+    expect(result!.item.label).toBe("Acme NDA");
+    expect(result!.item.meta).toEqual({ contractId: "123" });
+  });
+
+  it("returns first match when paths duplicate across groups", () => {
+    const config: NavGroup[] = [
+      {
+        label: "A",
+        items: [{ to: "/x", label: "X-A", icon: DEFAULT_NAV_CONFIG[0].items[0].icon }],
+      },
+      {
+        label: "B",
+        items: [{ to: "/x", label: "X-B", icon: DEFAULT_NAV_CONFIG[0].items[0].icon }],
+      },
+    ];
+    const result = findNavItem(config, "/x");
+    expect(result!.group).toBe("A");
+  });
+
+  it("all default config items are findable", () => {
+    for (const group of DEFAULT_NAV_CONFIG) {
+      for (const item of group.items) {
+        const result = findNavItem(DEFAULT_NAV_CONFIG, item.to);
+        expect(result).not.toBeNull();
+        expect(result!.item.to).toBe(item.to);
+      }
+    }
+  });
+
+  it("finds deeply nested child items", () => {
+    const icon = DEFAULT_NAV_CONFIG[0].items[0].icon;
+    const config: NavGroup[] = [
+      {
+        label: "Workspaces",
+        items: [
+          {
+            to: "/spaces/root",
+            label: "Workspace",
+            icon,
+            children: [
+              {
+                to: "/spaces/folder",
+                label: "Folder",
+                icon,
+                children: [
+                  {
+                    to: "/spaces/entity",
+                    label: "Entity",
+                    icon,
+                    meta: { spacesEntityId: "entity" },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = findNavItem(config, "/spaces/entity");
+    expect(result).not.toBeNull();
+    expect(result!.item.label).toBe("Entity");
+    expect(result!.item.meta).toEqual({ spacesEntityId: "entity" });
+  });
+
+  it("uses the deepest prefix match for nested routes", () => {
+    const icon = DEFAULT_NAV_CONFIG[0].items[0].icon;
+    const config: NavGroup[] = [
+      {
+        label: "Workspaces",
+        items: [
+          {
+            to: "/spaces/root",
+            label: "Workspace",
+            icon,
+            children: [
+              {
+                to: "/spaces/root/views",
+                label: "Views",
+                icon,
+                children: [
+                  {
+                    to: "/spaces/root/views/contradictions",
+                    label: "Contradictions",
+                    icon,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = findNavItem(config, "/spaces/root/views/contradictions/details");
+    expect(result).not.toBeNull();
+    expect(result!.item.label).toBe("Contradictions");
+  });
+});

package/src/lib/__tests__/nav-dnd.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { getContainerDropZoneLabel, hasAnyDropTarget, hasExternalFilesData } from "../nav-dnd";
+
+describe("nav-dnd helpers", () => {
+  it("detects external file drags from Files type alone", () => {
+    expect(
+      hasExternalFilesData({
+        types: ["Files"],
+        files: { length: 0 },
+      }),
+    ).toBe(true);
+  });
+
+  it("treats file-only targets as active drop targets", () => {
+    expect(hasAnyDropTarget(false, true)).toBe(true);
+    expect(hasAnyDropTarget(true, false)).toBe(true);
+    expect(hasAnyDropTarget(false, false)).toBe(false);
+  });
+
+  it("uses upload copy for external file container drops", () => {
+    expect(getContainerDropZoneLabel(true)).toBe("Upload to root");
+    expect(getContainerDropZoneLabel(false)).toBe("Move to root");
+  });
+});

package/src/lib/__tests__/nav-store.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useNavStore } from "../nav-store.ts";
+import { DEFAULT_NAV_CONFIG } from "../nav-config.ts";
+import type { NavGroup } from "../nav-config.ts";
+
+const testGroup: NavGroup = {
+  label: "TestGroup",
+  items: [{ to: "/test", label: "Test", icon: {} as NavGroup["items"][0]["icon"] }],
+};
+
+describe("useNavStore", () => {
+  beforeEach(() => {
+    useNavStore.setState({ config: DEFAULT_NAV_CONFIG });
+  });
+
+  it("initializes with DEFAULT_NAV_CONFIG", () => {
+    expect(useNavStore.getState().config).toBe(DEFAULT_NAV_CONFIG);
+  });
+
+  describe("setConfig", () => {
+    it("replaces entire config", () => {
+      useNavStore.getState().setConfig([testGroup]);
+      expect(useNavStore.getState().config).toEqual([testGroup]);
+    });
+  });
+
+  describe("addGroup", () => {
+    it("appends new group", () => {
+      const before = useNavStore.getState().config.length;
+      useNavStore.getState().addGroup(testGroup);
+      expect(useNavStore.getState().config.length).toBe(before + 1);
+      expect(useNavStore.getState().config.at(-1)).toEqual(testGroup);
+    });
+
+    it("replaces existing group with same label (preserves order)", () => {
+      useNavStore.getState().addGroup(testGroup);
+      const updated: NavGroup = { ...testGroup, description: "updated" };
+      useNavStore.getState().addGroup(updated);
+
+      const matches = useNavStore.getState().config.filter((g) => g.label === "TestGroup");
+      expect(matches.length).toBe(1);
+      expect(matches[0].description).toBe("updated");
+    });
+  });
+
+  describe("removeGroup", () => {
+    it("removes group by label", () => {
+      useNavStore.getState().addGroup(testGroup);
+      useNavStore.getState().removeGroup("TestGroup");
+      expect(useNavStore.getState().config.find((g) => g.label === "TestGroup")).toBeUndefined();
+    });
+
+    it("no-op for non-existent label", () => {
+      const before = useNavStore.getState().config.length;
+      useNavStore.getState().removeGroup("NoSuchGroup");
+      expect(useNavStore.getState().config.length).toBe(before);
+    });
+  });
+});

package/src/lib/__tests__/sidebar-store.test.ts

@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_WIDTH,
+  SIDEBAR_WIDTH,
+  useSidebarStore,
+} from "../sidebar-store";
+
+const SIDEBAR_WIDTH_VERSION = "2026-03-27-narrow";
+
+const reset = () =>
+  useSidebarStore.setState({
+    isOpen: true,
+    isMobileOpen: false,
+    width: SIDEBAR_WIDTH,
+  });
+
+const store = () => useSidebarStore.getState();
+
+async function importFreshSidebarStore(
+  storageValue: string | null,
+  storageVersion: string | null = SIDEBAR_WIDTH_VERSION,
+) {
+  vi.resetModules();
+  vi.stubGlobal("localStorage", {
+    getItem: vi.fn().mockImplementation((key: string) => {
+      if (key === "sidebar-width") return storageValue;
+      if (key === "sidebar-width-version") return storageVersion;
+      return null;
+    }),
+    setItem: vi.fn(),
+  });
+  return import("../sidebar-store");
+}
+
+describe("sidebar-store", () => {
+  beforeEach(() => {
+    reset();
+    vi.useFakeTimers();
+    vi.stubGlobal("localStorage", {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+    });
+  });
+
+  describe("toggle", () => {
+    it("flips isOpen from true to false", () => {
+      store().toggle();
+      expect(store().isOpen).toBe(false);
+    });
+
+    it("flips isOpen from false to true", () => {
+      useSidebarStore.setState({ isOpen: false });
+      store().toggle();
+      expect(store().isOpen).toBe(true);
+    });
+
+    it("persists state to localStorage", () => {
+      store().toggle();
+      expect(localStorage.setItem).toHaveBeenCalledWith("sidebar", "false");
+    });
+  });
+
+  describe("open / close", () => {
+    it("open sets isOpen to true", () => {
+      useSidebarStore.setState({ isOpen: false });
+      store().open();
+      expect(store().isOpen).toBe(true);
+      expect(localStorage.setItem).toHaveBeenCalledWith("sidebar", "true");
+    });
+
+    it("close sets isOpen to false", () => {
+      store().close();
+      expect(store().isOpen).toBe(false);
+      expect(localStorage.setItem).toHaveBeenCalledWith("sidebar", "false");
+    });
+  });
+
+  describe("mobile drawer", () => {
+    it("toggleMobile flips isMobileOpen", () => {
+      store().toggleMobile();
+      expect(store().isMobileOpen).toBe(true);
+      store().toggleMobile();
+      expect(store().isMobileOpen).toBe(false);
+    });
+
+    it("closeMobile sets isMobileOpen to false", () => {
+      useSidebarStore.setState({ isMobileOpen: true });
+      store().closeMobile();
+      expect(store().isMobileOpen).toBe(false);
+    });
+  });
+
+  describe("setWidth", () => {
+    it("persists sidebar width to localStorage", () => {
+      store().setWidth(360);
+      vi.runAllTimers();
+      expect(store().width).toBe(360);
+      expect(localStorage.setItem).toHaveBeenCalledWith("sidebar-width", "360");
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        "sidebar-width-version",
+        SIDEBAR_WIDTH_VERSION,
+      );
+    });
+
+    it("clamps width to the supported range", () => {
+      store().setWidth(999);
+      expect(store().width).toBe(SIDEBAR_MAX_WIDTH);
+
+      store().setWidth(100);
+      expect(store().width).toBe(SIDEBAR_MIN_WIDTH);
+    });
+  });
+
+  describe("initial width from localStorage", () => {
+    it("falls back to default width when sidebar-width is missing", async () => {
+      const { useSidebarStore: freshStore } = await importFreshSidebarStore(null);
+      expect(freshStore.getState().width).toBe(SIDEBAR_WIDTH);
+    });
+
+    it("falls back to default width when sidebar-width is invalid", async () => {
+      const { useSidebarStore: freshStore } = await importFreshSidebarStore("not-a-number");
+      expect(freshStore.getState().width).toBe(SIDEBAR_WIDTH);
+    });
+
+    it("uses stored width when within the supported range", async () => {
+      const { useSidebarStore: freshStore } = await importFreshSidebarStore("360");
+      expect(freshStore.getState().width).toBe(360);
+    });
+
+    it("clamps stored width to the supported range", async () => {
+      const { useSidebarStore: largeStore } = await importFreshSidebarStore("999");
+      expect(largeStore.getState().width).toBe(SIDEBAR_MAX_WIDTH);
+
+      const { useSidebarStore: smallStore } = await importFreshSidebarStore("100");
+      expect(smallStore.getState().width).toBe(SIDEBAR_MIN_WIDTH);
+    });
+
+    it("resets legacy stored widths when the version changes", async () => {
+      const { useSidebarStore: freshStore } = await importFreshSidebarStore("394", null);
+      expect(freshStore.getState().width).toBe(SIDEBAR_WIDTH);
+    });
+  });
+});

package/src/lib/__tests__/theme-store.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock matchMedia before importing the store (jsdom doesn't implement it)
+const matchMediaMock = vi.fn().mockReturnValue({
+  matches: false,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+});
+Object.defineProperty(window, "matchMedia", { value: matchMediaMock, writable: true });
+
+// Import after mock is in place (store initializes on import)
+const { useThemeStore } = await import("../theme-store");
+
+const store = () => useThemeStore.getState();
+
+describe("theme-store", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.classList.remove("dark");
+    matchMediaMock.mockReturnValue({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    });
+    useThemeStore.setState({ mode: "system" });
+  });
+
+  describe("setMode", () => {
+    it("applies dark class for dark mode", () => {
+      store().setMode("dark");
+      expect(store().mode).toBe("dark");
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+      expect(localStorage.getItem("theme")).toBe("dark");
+    });
+
+    it("removes dark class for light mode", () => {
+      store().setMode("dark");
+      store().setMode("light");
+      expect(document.documentElement.classList.contains("dark")).toBe(false);
+      expect(localStorage.getItem("theme")).toBe("light");
+    });
+
+    it("persists to localStorage", () => {
+      store().setMode("dark");
+      expect(localStorage.getItem("theme")).toBe("dark");
+    });
+  });
+
+  describe("cycle", () => {
+    it("cycles light -> dark -> system -> light", () => {
+      store().setMode("light");
+      store().cycle();
+      expect(store().mode).toBe("dark");
+      store().cycle();
+      expect(store().mode).toBe("system");
+      store().cycle();
+      expect(store().mode).toBe("light");
+    });
+  });
+
+  describe("system mode", () => {
+    it("respects OS dark preference", () => {
+      matchMediaMock.mockReturnValue({
+        matches: true,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      });
+      store().setMode("system");
+      expect(document.documentElement.classList.contains("dark")).toBe(true);
+    });
+
+    it("respects OS light preference", () => {
+      matchMediaMock.mockReturnValue({
+        matches: false,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      });
+      store().setMode("system");
+      expect(document.documentElement.classList.contains("dark")).toBe(false);
+    });
+  });
+});

package/src/lib/__tests__/tool-panel-store.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useToolPanelStore } from "../tool-panel-store";
+
+const reset = () =>
+  useToolPanelStore.setState({
+    isOpen: false,
+    content: null,
+    isFullscreen: false,
+    // Node env fallbacks
+    panelWidth: 800,
+    useOverlay: true,
+  });
+
+const store = () => useToolPanelStore.getState();
+
+const content = { title: "Test", content: "body", type: "markdown" as const };
+
+describe("tool-panel-store", () => {
+  beforeEach(reset);
+
+  describe("toggleFullscreen", () => {
+    it("entering fullscreen sets overlay and expands width", () => {
+      store().toggleFullscreen();
+      expect(store().isFullscreen).toBe(true);
+      expect(store().useOverlay).toBe(true);
+    });
+
+    it("exiting fullscreen restores layout defaults", () => {
+      store().toggleFullscreen(); // on
+      store().toggleFullscreen(); // off
+      expect(store().isFullscreen).toBe(false);
+      // jsdom: innerWidth=1024 < 1280, so overlay=true, panelWidth=1024
+      expect(store().useOverlay).toBe(true);
+      expect(store().panelWidth).toBeLessThanOrEqual(1280);
+    });
+  });
+
+  describe("updateLayout", () => {
+    it("is a no-op when fullscreen", () => {
+      store().openPanel(content);
+      store().toggleFullscreen();
+      const widthBefore = store().panelWidth;
+      store().updateLayout();
+      expect(store().panelWidth).toBe(widthBefore);
+    });
+
+    it("recalculates when not fullscreen", () => {
+      store().updateLayout();
+      // jsdom: innerWidth=1024 < 1280, so overlay=true
+      expect(store().useOverlay).toBe(true);
+      expect(store().panelWidth).toBeLessThanOrEqual(1280);
+    });
+  });
+
+  describe("SSR / Node fallbacks", () => {
+    it("defaults to panelWidth=800 and useOverlay=true without window", () => {
+      expect(store().panelWidth).toBe(800);
+      expect(store().useOverlay).toBe(true);
+    });
+  });
+});

package/src/lib/__tests__/use-page-context.test.ts

@@ -0,0 +1,58 @@
+/**
+ * Tests for usePageContext — tests the underlying store operations
+ * since the hook is a thin mount/unmount wrapper over addContextItem/removeContextItem.
+ */
+import { beforeEach, describe, expect, it } from "vitest";
+import { useAppStore } from "../app-store";
+
+const reset = () =>
+  useAppStore.setState({
+    contextItems: [],
+    sentContext: {},
+  });
+
+const store = () => useAppStore.getState();
+
+const noteItem = () => ({
+  type: "note" as const,
+  label: "Dashboard metrics",
+  payload: { kind: "text" as const, text: "Q1 revenue data" },
+  sourcePage: "/dashboard",
+  persistence: "ephemeral" as const,
+});
+
+describe("usePageContext (store operations)", () => {
+  beforeEach(reset);
+
+  it("addContextItem adds note items", () => {
+    store().addContextItem(noteItem());
+    expect(store().contextItems).toHaveLength(1);
+    expect(store().contextItems[0].label).toBe("Dashboard metrics");
+    expect(store().contextItems[0].type).toBe("note");
+  });
+
+  it("removeContextItem removes by id (simulates unmount cleanup)", () => {
+    store().addContextItem(noteItem());
+    const id = store().contextItems[0].id;
+
+    store().removeContextItem(id);
+    expect(store().contextItems).toHaveLength(0);
+  });
+
+  it("re-adding after removal works (simulates remount)", () => {
+    store().addContextItem(noteItem());
+    const id = store().contextItems[0].id;
+    store().removeContextItem(id);
+
+    store().addContextItem(noteItem());
+    expect(store().contextItems).toHaveLength(1);
+  });
+
+  it("ephemeral note items are cleared on navigation", () => {
+    store().addContextItem(noteItem());
+    expect(store().contextItems).toHaveLength(1);
+
+    store().setCurrentPage("/other-page");
+    expect(store().contextItems).toHaveLength(0);
+  });
+});