@iloveagents/foundry-web-ui 0.1.0

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

@@ -0,0 +1,330 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useAppStore } from "../app-store";
+
+const reset = () =>
+  useAppStore.setState({
+    threadActive: false,
+    currentPage: "/chat",
+    navContext: {
+      group: null,
+      groupDescription: null,
+      groupMeta: {},
+      label: "Chat",
+      description: null,
+      meta: {},
+      contextInstructions: null,
+    },
+    selectedItemId: null,
+    content: {},
+    highlights: [],
+    contextItems: [],
+    sentContext: {},
+  });
+const store = () => useAppStore.getState();
+
+const ephemeralItem = (label = "hello", sourcePage = "panel") => ({
+  type: "selection" as const,
+  label,
+  payload: { kind: "text" as const, text: label },
+  sourcePage,
+  persistence: "ephemeral" as const,
+});
+
+const persistentItem = (label = "pinned", sourcePage = "panel") => ({
+  type: "selection" as const,
+  label,
+  payload: { kind: "text" as const, text: label },
+  sourcePage,
+  persistence: "persistent" as const,
+});
+
+const pageItem = (path = "/workspace", label = "Form") => ({
+  type: "page" as const,
+  label,
+  payload: { kind: "page" as const, path, label },
+  sourcePage: path,
+  persistence: "persistent" as const,
+});
+
+const refItem = (refId = "entity-1:block-1", preview = "Introduction") => ({
+  type: "ref" as const,
+  label: preview,
+  payload: { kind: "ref" as const, refType: "block", refId, preview },
+  sourcePage: "/spaces/entity-1",
+  persistence: "persistent" as const,
+});
+
+describe("app-store", () => {
+  beforeEach(reset);
+
+  describe("addContextItem", () => {
+    it("adds an item with generated id and createdAt", () => {
+      store().addContextItem(ephemeralItem());
+      expect(store().contextItems).toHaveLength(1);
+      expect(store().contextItems[0]).toMatchObject({
+        label: "hello",
+        sourcePage: "panel",
+        type: "selection",
+        persistence: "ephemeral",
+      });
+      expect(store().contextItems[0].id).toBeTruthy();
+      expect(store().contextItems[0].createdAt).toBeGreaterThan(0);
+    });
+
+    it("deduplicates by label + sourcePage", () => {
+      store().addContextItem(ephemeralItem("same", "src"));
+      store().addContextItem(ephemeralItem("same", "src"));
+      expect(store().contextItems).toHaveLength(1);
+    });
+
+    it("allows same label from different sources", () => {
+      store().addContextItem(ephemeralItem("same", "src-a"));
+      store().addContextItem(ephemeralItem("same", "src-b"));
+      expect(store().contextItems).toHaveLength(2);
+    });
+
+    it("caps at 10 items", () => {
+      for (let i = 0; i < 11; i++) {
+        store().addContextItem(ephemeralItem(`text-${i}`));
+      }
+      expect(store().contextItems).toHaveLength(10);
+    });
+
+    it("deduplicates page items by path", () => {
+      store().addContextItem(pageItem("/workspace", "Form"));
+      store().addContextItem(pageItem("/workspace", "Form copy"));
+      expect(store().contextItems).toHaveLength(1);
+    });
+
+    it("allows page items with different paths", () => {
+      store().addContextItem(pageItem("/workspace"));
+      store().addContextItem(pageItem("/documents"));
+      expect(store().contextItems).toHaveLength(2);
+    });
+
+    it("deduplicates ref items by refId", () => {
+      store().addContextItem(refItem("e1:b1", "Intro"));
+      store().addContextItem(refItem("e1:b1", "Intro copy"));
+      expect(store().contextItems).toHaveLength(1);
+    });
+
+    it("allows ref items with different refIds", () => {
+      store().addContextItem(refItem("e1:b1"));
+      store().addContextItem(refItem("e1:b2"));
+      expect(store().contextItems).toHaveLength(2);
+    });
+
+    it("truncates label longer than 500 chars", () => {
+      const longLabel = "a".repeat(600);
+      store().addContextItem(ephemeralItem(longLabel));
+      expect(store().contextItems[0].label).toHaveLength(503);
+      expect(store().contextItems[0].label.endsWith("...")).toBe(true);
+    });
+  });
+
+  describe("removeContextItem", () => {
+    it("removes by id, leaves others", () => {
+      store().addContextItem(ephemeralItem("a"));
+      store().addContextItem(ephemeralItem("b"));
+      const idToRemove = store().contextItems[0].id;
+      store().removeContextItem(idToRemove);
+      expect(store().contextItems).toHaveLength(1);
+      expect(store().contextItems[0].label).toBe("b");
+    });
+  });
+
+  describe("consumeContextForMessage", () => {
+    it("keeps persistent items, removes ephemeral", () => {
+      store().addContextItem(persistentItem("pinned"));
+      store().addContextItem(ephemeralItem("temp"));
+      const snapshot = store().consumeContextForMessage("msg-1");
+
+      expect(snapshot).toHaveLength(2);
+      expect(store().contextItems).toHaveLength(1);
+      expect(store().contextItems[0].label).toBe("pinned");
+      expect(store().sentContext["msg-1"]).toHaveLength(2);
+    });
+
+    it("returns empty array without side effects when no items", () => {
+      const snapshot = store().consumeContextForMessage("msg-1");
+      expect(snapshot).toEqual([]);
+      expect(store().sentContext).toEqual({});
+    });
+  });
+
+  describe("clearAllContext", () => {
+    it("resets items and sentContext", () => {
+      store().addContextItem(ephemeralItem("a"));
+      store().consumeContextForMessage("msg-1");
+      store().addContextItem(ephemeralItem("b"));
+      store().clearAllContext();
+      expect(store().contextItems).toHaveLength(0);
+      expect(store().sentContext).toEqual({});
+    });
+  });
+
+  describe("promoteContextItem", () => {
+    it("changes ephemeral to persistent", () => {
+      store().addContextItem(ephemeralItem("temp"));
+      const id = store().contextItems[0].id;
+      store().promoteContextItem(id);
+      expect(store().contextItems[0].persistence).toBe("persistent");
+    });
+  });
+
+  describe("navContext", () => {
+    it("setNavContext updates navigation context", () => {
+      store().setNavContext({
+        group: "Contracts",
+        groupDescription: "Contract workspace",
+        groupMeta: { orgId: "org-1" },
+        label: "Acme NDA",
+        description: "Review NDA terms",
+        meta: { contractId: "123" },
+        contextInstructions: null,
+      });
+      expect(store().navContext.group).toBe("Contracts");
+      expect(store().navContext.groupMeta).toEqual({ orgId: "org-1" });
+      expect(store().navContext.label).toBe("Acme NDA");
+      expect(store().navContext.meta).toEqual({ contractId: "123" });
+    });
+  });
+
+  describe("setCurrentPage", () => {
+    it("clears ephemeral context on navigation", () => {
+      store().addContextItem(ephemeralItem("temp"));
+      store().addContextItem(persistentItem("pinned"));
+      store().setCurrentPage("/workspace");
+      expect(store().contextItems).toHaveLength(1);
+      expect(store().contextItems[0].label).toBe("pinned");
+    });
+
+    it("does not clear when navigating to the same page", () => {
+      store().addContextItem(ephemeralItem("temp"));
+      store().setCurrentPage("/chat"); // same as default
+      expect(store().contextItems).toHaveLength(1);
+    });
+  });
+
+  describe("content", () => {
+    it("updates individual fields", () => {
+      store().updateContentField("title", "My Draft");
+      store().updateContentField("priority", "high");
+      expect(store().content).toEqual({ title: "My Draft", priority: "high" });
+    });
+
+    it("clearContent resets to empty", () => {
+      store().updateContentField("title", "test");
+      store().clearContent();
+      expect(store().content).toEqual({});
+    });
+  });
+
+  describe("highlights", () => {
+    it("adds and removes highlights", () => {
+      store().addHighlight("field-1");
+      store().addHighlight("field-2");
+      expect(store().highlights).toEqual(["field-1", "field-2"]);
+
+      store().removeHighlight("field-1");
+      expect(store().highlights).toEqual(["field-2"]);
+    });
+
+    it("deduplicates highlights", () => {
+      store().addHighlight("field-1");
+      store().addHighlight("field-1");
+      expect(store().highlights).toHaveLength(1);
+    });
+  });
+
+  describe("getAgentState", () => {
+    it("returns correct projection with navigation context", () => {
+      store().setCurrentPage("/workspace");
+      store().setNavContext({
+        group: "Pages",
+        groupDescription: null,
+        groupMeta: {},
+        label: "Workspace",
+        description: "Collaborate on drafts",
+        meta: {},
+        contextInstructions: null,
+      });
+      store().setSelectedItemId("doc-1");
+      store().updateContentField("title", "Test");
+      store().addHighlight("field-1");
+      store().addContextItem(persistentItem("ctx"));
+
+      const projection = store().getAgentState();
+      expect(projection).toEqual({
+        navigation: {
+          group: "Pages",
+          groupDescription: null,
+          groupMeta: {},
+          page: "/workspace",
+          label: "Workspace",
+          description: "Collaborate on drafts",
+          meta: {},
+          contextInstructions: null,
+        },
+        selectedItemId: "doc-1",
+        content: { title: "Test" },
+        highlights: ["field-1"],
+        contextItems: [
+          {
+            type: "selection",
+            label: "ctx",
+            text: "ctx",
+            sourcePage: "panel",
+          },
+        ],
+      });
+    });
+
+    it("includes navigation metadata", () => {
+      store().setNavContext({
+        group: "Contracts",
+        groupDescription: "Contract workspace",
+        groupMeta: { orgId: "org-1" },
+        label: "Acme NDA",
+        description: "Review NDA",
+        meta: { contractId: "123", type: "nda" },
+        contextInstructions: null,
+      });
+      store().setCurrentPage("/contracts/123");
+
+      const projection = store().getAgentState();
+      expect(projection.navigation.meta).toEqual({ contractId: "123", type: "nda" });
+      expect(projection.navigation.groupMeta).toEqual({ orgId: "org-1" });
+      expect(projection.navigation.group).toBe("Contracts");
+    });
+  });
+
+  describe("resetAll", () => {
+    it("resets all state to defaults", () => {
+      store().markThreadActive();
+      store().setNavContext({
+        group: "Contracts",
+        groupDescription: "test",
+        groupMeta: { orgId: "1" },
+        label: "Acme",
+        description: "test",
+        meta: { id: "1" },
+        contextInstructions: null,
+      });
+      store().setSelectedItemId("doc-1");
+      store().updateContentField("title", "test");
+      store().addHighlight("field-1");
+      store().addContextItem(ephemeralItem("temp"));
+
+      store().resetAll();
+
+      expect(store().threadActive).toBe(false);
+      expect(store().navContext.group).toBeNull();
+      expect(store().navContext.label).toBe("Chat");
+      expect(store().selectedItemId).toBeNull();
+      expect(store().content).toEqual({});
+      expect(store().highlights).toEqual([]);
+      expect(store().contextItems).toEqual([]);
+    });
+  });
+});

package/src/lib/__tests__/attachment-adapter.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { FileAttachmentAdapter } from "../attachment-adapter";
+
+const adapter = new FileAttachmentAdapter();
+
+describe("FileAttachmentAdapter.add", () => {
+  it("uses browser-supplied MIME type", async () => {
+    const file = new File(["x"], "photo.png", { type: "image/png" });
+    const result = await adapter.add({ file });
+    expect(result.contentType).toBe("image/png");
+    expect(result.type).toBe("image");
+  });
+
+  it("resolves MIME from extension when browser type is empty", async () => {
+    const file = new File(["x"], "report.docx", { type: "" });
+    const result = await adapter.add({ file });
+    expect(result.contentType).toBe(
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    );
+    expect(result.type).toBe("document");
+  });
+
+  it("falls back to application/octet-stream for unknown extensions", async () => {
+    const file = new File(["x"], "data.xyz", { type: "" });
+    const result = await adapter.add({ file });
+    expect(result.contentType).toBe("application/octet-stream");
+  });
+
+  it("throws for files exceeding 20 MB", async () => {
+    const big = new File(["x"], "big.png", { type: "image/png" });
+    Object.defineProperty(big, "size", { value: 20 * 1024 * 1024 + 1 });
+    await expect(adapter.add({ file: big })).rejects.toThrow("File too large");
+  });
+
+  it("accepts a file at exactly 20 MB", async () => {
+    const exact = new File(["x"], "ok.png", { type: "image/png" });
+    Object.defineProperty(exact, "size", { value: 20 * 1024 * 1024 });
+    await expect(adapter.add({ file: exact })).resolves.toBeDefined();
+  });
+
+  it("classifies images vs documents correctly", async () => {
+    const image = new File(["x"], "pic.jpg", { type: "image/jpeg" });
+    const pdf = new File(["x"], "doc.pdf", { type: "application/pdf" });
+
+    expect((await adapter.add({ file: image })).type).toBe("image");
+    expect((await adapter.add({ file: pdf })).type).toBe("document");
+  });
+});

package/src/lib/__tests__/chat-bubble-store.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useChatBubbleStore } from "../chat-bubble-store";
+
+const reset = () =>
+  useChatBubbleStore.setState({ isOpen: false, isExpanded: false, showPagePanel: true });
+const store = () => useChatBubbleStore.getState();
+
+describe("chat-bubble-store", () => {
+  beforeEach(reset);
+
+  it("starts closed", () => {
+    expect(store().isOpen).toBe(false);
+    expect(store().isExpanded).toBe(false);
+  });
+
+  it("open sets isOpen to true", () => {
+    store().open();
+    expect(store().isOpen).toBe(true);
+    expect(store().isExpanded).toBe(false);
+  });
+
+  it("close resets both states", () => {
+    store().expand();
+    store().close();
+    expect(store().isOpen).toBe(false);
+    expect(store().isExpanded).toBe(false);
+  });
+
+  it("toggle flips isOpen", () => {
+    store().toggle();
+    expect(store().isOpen).toBe(true);
+    store().toggle();
+    expect(store().isOpen).toBe(false);
+  });
+
+  it("expand hides bubble and shows expanded layout", () => {
+    store().open();
+    store().expand();
+    expect(store().isOpen).toBe(false);
+    expect(store().isExpanded).toBe(true);
+  });
+
+  it("collapse returns to bubble mode", () => {
+    store().expand();
+    store().collapse();
+    expect(store().isOpen).toBe(true);
+    expect(store().isExpanded).toBe(false);
+  });
+
+  it("expand defaults to showing page panel", () => {
+    store().expand();
+    expect(store().showPagePanel).toBe(true);
+    store().togglePagePanel();
+    expect(store().showPagePanel).toBe(false);
+    store().collapse();
+    store().expand();
+    expect(store().showPagePanel).toBe(true);
+  });
+
+  it("togglePagePanel flips showPagePanel", () => {
+    expect(store().showPagePanel).toBe(true);
+    store().togglePagePanel();
+    expect(store().showPagePanel).toBe(false);
+    store().togglePagePanel();
+    expect(store().showPagePanel).toBe(true);
+  });
+});

package/src/lib/__tests__/client-tools.test.ts

@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock matchMedia before importing modules that use theme-store
+vi.stubGlobal(
+  "matchMedia",
+  vi.fn().mockReturnValue({
+    matches: false,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  }),
+);
+
+const { clientToolRegistry } = await import("@iloveagents/foundry-agent");
+await import("../client-tools"); // triggers registerGlobalTools()
+
+const registry = () => clientToolRegistry.getState();
+
+describe("Global tool registration", () => {
+  it("registers all global tools with ui_ prefix", () => {
+    const names = registry()
+      .getActiveSchemas()
+      .map((s) => s.name)
+      .sort();
+    expect(names).toEqual([
+      "ui_confirm",
+      "ui_get_context",
+      "ui_highlight",
+      "ui_navigate",
+      "ui_open_panel",
+      "ui_select_item",
+      "ui_set_theme",
+      "ui_update_content",
+    ]);
+  });
+
+  it("each schema has required fields", () => {
+    for (const schema of registry().getActiveSchemas()) {
+      expect(schema.name).toBeTruthy();
+      expect(schema.description).toBeTruthy();
+      expect(schema.parameters).toBeDefined();
+    }
+  });
+});
+
+describe("isRegistered", () => {
+  it("returns true for global tools", () => {
+    expect(registry().isRegistered("ui_navigate")).toBe(true);
+    expect(registry().isRegistered("ui_set_theme")).toBe(true);
+  });
+
+  it("returns false for unknown tools", () => {
+    expect(registry().isRegistered("unknown_tool")).toBe(false);
+  });
+});
+
+describe("executeTool", () => {
+  it("ui_set_theme returns success", async () => {
+    const result = await registry().executeTool("ui_set_theme", '{"mode":"dark"}');
+    expect(JSON.parse(result).status).toBe("success");
+  });
+
+  it("ui_confirm returns pending", async () => {
+    const result = await registry().executeTool("ui_confirm", '{"action":"Delete"}');
+    expect(JSON.parse(result).status).toBe("pending");
+  });
+
+  it("ui_update_content updates multiple fields", async () => {
+    const result = await registry().executeTool(
+      "ui_update_content",
+      '{"fields":{"title":"Test","priority":"High"}}',
+    );
+    const parsed = JSON.parse(result);
+    expect(parsed.status).toBe("success");
+    expect(parsed.fields).toEqual({ title: "Test", priority: "High" });
+  });
+
+  it("unknown tool returns error", async () => {
+    const result = await registry().executeTool("unknown", "{}");
+    expect(JSON.parse(result).error).toContain("Unknown client tool");
+  });
+});
+
+describe("Page tools", () => {
+  beforeEach(() => {
+    registry().clearPageTools();
+  });
+
+  it("registers and clears page tools", () => {
+    const before = registry().getActiveSchemas().length;
+
+    registry().registerPageTools([
+      {
+        name: "page_custom_tool",
+        description: "Page tool",
+        parameters: { type: "object", properties: {} },
+        execute: async () => JSON.stringify({ ok: true }),
+      },
+    ]);
+
+    expect(registry().getActiveSchemas().length).toBe(before + 1);
+    expect(registry().isRegistered("page_custom_tool")).toBe(true);
+
+    registry().clearPageTools();
+    expect(registry().isRegistered("page_custom_tool")).toBe(false);
+  });
+
+  it("page tools can be executed", async () => {
+    registry().registerPageTools([
+      {
+        name: "page_my_tool",
+        description: "Test",
+        parameters: { type: "object", properties: {} },
+        execute: async (argsJson) => {
+          const { value } = JSON.parse(argsJson);
+          return JSON.stringify({ received: value });
+        },
+      },
+    ]);
+
+    const result = await registry().executeTool("page_my_tool", '{"value":"hello"}');
+    expect(JSON.parse(result).received).toBe("hello");
+  });
+});

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useDevStore } from "../dev-store.ts";
+import type { DevToolCall } from "../dev-store.ts";
+
+function makeToolCall(id: string): DevToolCall {
+  return {
+    id,
+    name: `tool_${id}`,
+    args: "{}",
+    isClientSide: false,
+    timestamp: Date.now(),
+  };
+}
+
+describe("useDevStore", () => {
+  beforeEach(() => {
+    useDevStore.setState({
+      lastRequest: null,
+      lastRequestAt: null,
+      toolCalls: [],
+      events: [],
+    });
+  });
+
+  describe("captureRequest", () => {
+    it("stores request payload and timestamp", () => {
+      useDevStore.getState().captureRequest({ thread_id: "t1" });
+      expect(useDevStore.getState().lastRequest).toEqual({ thread_id: "t1" });
+      expect(useDevStore.getState().lastRequestAt).toBeTypeOf("number");
+    });
+
+    it("resets tool calls and events on fresh turn", () => {
+      useDevStore.getState().logEvent("TEXT_DELTA");
+      useDevStore.getState().captureRequest({ thread_id: "t1" });
+      expect(useDevStore.getState().toolCalls).toEqual([]);
+      expect(useDevStore.getState().events).toEqual([]);
+    });
+
+    it("preserves tool calls on follow-up (multi-turn)", () => {
+      useDevStore.getState().addToolCall(makeToolCall("tc1"));
+      useDevStore.getState().captureRequest({ thread_id: "t1" });
+      expect(useDevStore.getState().toolCalls.length).toBe(1);
+    });
+  });
+
+  describe("addToolCall", () => {
+    it("appends tool call", () => {
+      useDevStore.getState().addToolCall(makeToolCall("tc1"));
+      useDevStore.getState().addToolCall(makeToolCall("tc2"));
+      expect(useDevStore.getState().toolCalls.length).toBe(2);
+    });
+  });
+
+  describe("updateToolCall", () => {
+    it("updates args and result by id", () => {
+      useDevStore.getState().addToolCall(makeToolCall("tc1"));
+      useDevStore.getState().updateToolCall("tc1", { result: { temp: 22 } });
+      expect(useDevStore.getState().toolCalls[0].result).toEqual({ temp: 22 });
+    });
+  });
+
+  describe("logEvent", () => {
+    it("appends events", () => {
+      useDevStore.getState().logEvent("TEXT_DELTA", "hello");
+      expect(useDevStore.getState().events.length).toBe(1);
+      expect(useDevStore.getState().events[0].type).toBe("TEXT_DELTA");
+    });
+
+    it("caps at MAX_EVENTS (50)", () => {
+      for (let i = 0; i < 60; i++) {
+        useDevStore.getState().logEvent(`EVENT_${i}`);
+      }
+      expect(useDevStore.getState().events.length).toBe(50);
+      // Should keep the last 50 (events 10-59)
+      expect(useDevStore.getState().events[0].type).toBe("EVENT_10");
+    });
+  });
+});