@wopr-network/platform-ui-core 1.0.0

package/src/__tests__/chat/chat-panel.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { ChatPanel } from "@/components/chat/chat-panel";
+import type { ChatMessage as ChatMessageType } from "@/lib/chat/types";
+
+// jsdom does not implement scrollIntoView — polyfill it for ChatPanel's auto-scroll useEffect
+beforeAll(() => {
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+function msg(
+  overrides: Partial<ChatMessageType> & { role: ChatMessageType["role"]; content: string },
+): ChatMessageType {
+  return { id: crypto.randomUUID(), timestamp: Date.now(), ...overrides };
+}
+
+const baseProps = {
+  messages: [] as ChatMessageType[],
+  mode: "expanded" as const,
+  isConnected: true,
+  isTyping: false,
+  onSend: vi.fn(),
+  onClose: vi.fn(),
+  onFullscreen: vi.fn(),
+};
+
+describe("ChatPanel", () => {
+  it("renders in expanded mode with panel testid", () => {
+    render(<ChatPanel {...baseProps} />);
+    expect(screen.getByTestId("chat-panel")).toBeInTheDocument();
+  });
+
+  it("renders in fullscreen mode with fullscreen testid", () => {
+    render(<ChatPanel {...baseProps} mode="fullscreen" />);
+    expect(screen.getByTestId("chat-fullscreen")).toBeInTheDocument();
+  });
+
+  it("shows connected indicator when isConnected is true", () => {
+    render(<ChatPanel {...baseProps} isConnected={true} />);
+    expect(screen.getByLabelText("Connected")).toBeInTheDocument();
+  });
+
+  it("shows disconnected indicator when isConnected is false", () => {
+    render(<ChatPanel {...baseProps} isConnected={false} />);
+    expect(screen.getByLabelText("Disconnected")).toBeInTheDocument();
+  });
+
+  it("renders message list with user and bot messages", () => {
+    const messages = [
+      msg({ role: "user", content: "Question?" }),
+      msg({ role: "bot", content: "Answer!" }),
+    ];
+    render(<ChatPanel {...baseProps} messages={messages} />);
+    expect(screen.getByText("Question?")).toBeInTheDocument();
+    expect(screen.getByText("Answer!")).toBeInTheDocument();
+  });
+
+  it("shows 'Connecting to Platform' when no messages and disconnected", () => {
+    render(<ChatPanel {...baseProps} messages={[]} isConnected={false} />);
+    expect(screen.getByText("Connecting to Platform")).toBeInTheDocument();
+  });
+
+  it("does NOT show connecting text when connected with no messages", () => {
+    render(<ChatPanel {...baseProps} messages={[]} isConnected={true} />);
+    expect(screen.queryByText("Connecting to Platform")).not.toBeInTheDocument();
+  });
+
+  it("shows typing indicator when isTyping is true", () => {
+    render(<ChatPanel {...baseProps} isTyping={true} />);
+    expect(screen.getByTestId("chat-typing-indicator")).toBeInTheDocument();
+  });
+
+  it("hides typing indicator when isTyping is false", () => {
+    render(<ChatPanel {...baseProps} isTyping={false} />);
+    expect(screen.queryByTestId("chat-typing-indicator")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when close button is clicked", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<ChatPanel {...baseProps} onClose={onClose} />);
+
+    await user.click(screen.getByLabelText("Close chat"));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it("shows fullscreen button in expanded mode", () => {
+    render(<ChatPanel {...baseProps} mode="expanded" />);
+    expect(screen.getByLabelText("Full screen")).toBeInTheDocument();
+  });
+
+  it("hides fullscreen button in fullscreen mode", () => {
+    render(<ChatPanel {...baseProps} mode="fullscreen" />);
+    expect(screen.queryByLabelText("Full screen")).not.toBeInTheDocument();
+  });
+
+  it("calls onFullscreen when fullscreen button is clicked", async () => {
+    const user = userEvent.setup();
+    const onFullscreen = vi.fn();
+    render(<ChatPanel {...baseProps} onFullscreen={onFullscreen} />);
+
+    await user.click(screen.getByLabelText("Full screen"));
+    expect(onFullscreen).toHaveBeenCalledOnce();
+  });
+
+  it("disables chat input when disconnected", () => {
+    render(<ChatPanel {...baseProps} isConnected={false} />);
+    expect(screen.getByLabelText("Chat message input")).toBeDisabled();
+  });
+});

package/src/__tests__/chat/chat-widget.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChatContextValue } from "@/lib/chat/chat-context";
+
+// ChatPanel uses scrollIntoView for auto-scroll; jsdom doesn't implement it
+beforeAll(() => {
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+let mockContext: ChatContextValue;
+
+vi.mock("@/lib/chat/chat-context", () => ({
+  useChatContext: () => mockContext,
+}));
+
+// Import AFTER mock is defined
+import { ChatWidget } from "@/components/chat/chat-widget";
+
+describe("ChatWidget", () => {
+  beforeEach(() => {
+    mockContext = {
+      messages: [],
+      mode: "collapsed",
+      isConnected: true,
+      isTyping: false,
+      hasUnread: false,
+      sessionId: "test-session",
+      expand: vi.fn(),
+      collapse: vi.fn(),
+      fullscreen: vi.fn(),
+      sendMessage: vi.fn(),
+      addEventMarker: vi.fn(),
+      showTyping: vi.fn(),
+      notify: vi.fn(),
+      clearHistory: vi.fn(),
+    };
+  });
+
+  it("shows ambient dot in collapsed mode", () => {
+    mockContext.mode = "collapsed";
+    render(<ChatWidget />);
+    expect(screen.getByTestId("chat-ambient-dot")).toBeInTheDocument();
+  });
+
+  it("shows chat panel in expanded mode", () => {
+    mockContext.mode = "expanded";
+    render(<ChatWidget />);
+    expect(screen.getByTestId("chat-panel")).toBeInTheDocument();
+    expect(screen.queryByTestId("chat-ambient-dot")).not.toBeInTheDocument();
+  });
+
+  it("shows fullscreen panel in fullscreen mode", () => {
+    mockContext.mode = "fullscreen";
+    render(<ChatWidget />);
+    expect(screen.getByTestId("chat-fullscreen")).toBeInTheDocument();
+  });
+
+  it("calls expand when ambient dot is clicked", async () => {
+    const user = userEvent.setup();
+    mockContext.mode = "collapsed";
+    render(<ChatWidget />);
+
+    await user.click(screen.getByTestId("chat-ambient-dot"));
+    expect(mockContext.expand).toHaveBeenCalledOnce();
+  });
+
+  it("calls collapse when close button is clicked in expanded mode", async () => {
+    const user = userEvent.setup();
+    mockContext.mode = "expanded";
+    render(<ChatWidget />);
+
+    await user.click(screen.getByLabelText("Close chat"));
+    expect(mockContext.collapse).toHaveBeenCalledOnce();
+  });
+
+  it("passes hasUnread to ambient dot", () => {
+    mockContext.hasUnread = true;
+    render(<ChatWidget />);
+    expect(screen.getByTestId("chat-unread-pulse")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,87 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  clearChatHistory,
+  getSessionId,
+  loadChatHistory,
+  saveChatHistory,
+} from "@/lib/chat/chat-store";
+import type { ChatMessage } from "@/lib/chat/types";
+
+describe("chat-store", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  describe("getSessionId", () => {
+    it("generates a session ID on first call", () => {
+      const id = getSessionId();
+      expect(id).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/);
+      expect(typeof id).toBe("string");
+      expect(id.length).toBeGreaterThan(10);
+    });
+
+    it("returns the same session ID on subsequent calls", () => {
+      const id1 = getSessionId();
+      const id2 = getSessionId();
+      expect(id1).toBe(id2);
+    });
+  });
+
+  describe("loadChatHistory / saveChatHistory", () => {
+    it("returns empty array when no history saved", () => {
+      expect(loadChatHistory()).toEqual([]);
+    });
+
+    it("round-trips messages through localStorage", () => {
+      const messages: ChatMessage[] = [
+        { id: "1", role: "user", content: "hello", timestamp: 1000 },
+        { id: "2", role: "bot", content: "hi there", timestamp: 1001 },
+      ];
+      saveChatHistory(messages);
+      expect(loadChatHistory()).toEqual(messages);
+    });
+
+    it("returns empty array when localStorage contains invalid JSON shape", () => {
+      localStorage.setItem("platform-chat-history", JSON.stringify([{ bad: "data" }]));
+      expect(loadChatHistory()).toEqual([]);
+    });
+
+    it("returns empty array when localStorage contains non-array JSON", () => {
+      localStorage.setItem("platform-chat-history", JSON.stringify({ id: "1", role: "user" }));
+      expect(loadChatHistory()).toEqual([]);
+    });
+
+    it("returns empty array when a message has an invalid role", () => {
+      localStorage.setItem(
+        "platform-chat-history",
+        JSON.stringify([{ id: "1", role: "admin", content: "hi", timestamp: 1000 }]),
+      );
+      expect(loadChatHistory()).toEqual([]);
+    });
+
+    it("returns empty array when a message is missing required fields", () => {
+      localStorage.setItem("platform-chat-history", JSON.stringify([{ id: "1", role: "user" }]));
+      expect(loadChatHistory()).toEqual([]);
+    });
+
+    it("strips extra fields from valid messages", () => {
+      localStorage.setItem(
+        "platform-chat-history",
+        JSON.stringify([
+          { id: "1", role: "user", content: "hi", timestamp: 1000, xss: "<script>" },
+        ]),
+      );
+      const result = loadChatHistory();
+      expect(result).toEqual([{ id: "1", role: "user", content: "hi", timestamp: 1000 }]);
+      expect((result[0] as unknown as Record<string, unknown>).xss).toBeUndefined();
+    });
+  });
+
+  describe("clearChatHistory", () => {
+    it("removes saved history", () => {
+      saveChatHistory([{ id: "1", role: "user", content: "hello", timestamp: 1000 }]);
+      clearChatHistory();
+      expect(loadChatHistory()).toEqual([]);
+    });
+  });
+});

package/src/__tests__/command-center.test.tsx

@@ -0,0 +1,246 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+// Mock framer-motion so CountUp animation resolves in tests.
+// CountUp uses useMotionValue → useTransform → animate. The effects run in
+// declaration order (animate effect first, then the rounded.on subscription).
+// We defer the motion-value set via queueMicrotask so Effect 2 has time to
+// register its listener before the value propagates.
+vi.mock("framer-motion", () => {
+  const React = require("react");
+
+  function makeMotionValue(initial: number) {
+    let current = initial;
+    const listeners: Array<(v: number) => void> = [];
+    return {
+      get: () => current,
+      set: (v: number) => {
+        current = v;
+        for (const l of listeners) l(v);
+      },
+      on: (_event: string, cb: (v: number) => void) => {
+        listeners.push(cb);
+        return () => {
+          const i = listeners.indexOf(cb);
+          if (i !== -1) listeners.splice(i, 1);
+        };
+      },
+    };
+  }
+
+  return {
+    motion: new Proxy(
+      {},
+      {
+        get:
+          (_target, tag: string) =>
+          ({ children, ...props }: React.PropsWithChildren<Record<string, unknown>>) =>
+            React.createElement(tag, props, children),
+      },
+    ),
+    AnimatePresence: ({ children }: React.PropsWithChildren) => children,
+    useMotionValue: makeMotionValue,
+    useTransform: (mv: ReturnType<typeof makeMotionValue>, fn: (v: number) => number) => {
+      const derived = makeMotionValue(fn(mv.get()));
+      mv.on("change", (v) => derived.set(fn(v)));
+      return derived;
+    },
+    // Defer the set so Effect 2 (rounded.on subscription) registers before propagation.
+    animate: (mv: ReturnType<typeof makeMotionValue>, target: number) => {
+      queueMicrotask(() => mv.set(target));
+      return {
+        stop: () => {
+          /* no-op */
+        },
+      };
+    },
+  };
+});
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => "/",
+}));
+
+vi.mock("@/lib/trpc", () => ({
+  trpc: {
+    useUtils: () => ({
+      fleet: { listInstances: { invalidate: vi.fn() } },
+    }),
+    fleet: {
+      listInstances: {
+        useQuery: vi.fn().mockReturnValue({
+          data: {
+            bots: [
+              {
+                id: "inst-001",
+                name: "prod-assistant",
+                state: "running",
+                health: "healthy",
+                uptime: null,
+                stats: null,
+              },
+              {
+                id: "inst-002",
+                name: "dev-bot",
+                state: "stopped",
+                health: "healthy",
+                uptime: null,
+                stats: null,
+              },
+              {
+                id: "inst-003",
+                name: "community-mod",
+                state: "running",
+                health: "degraded",
+                uptime: null,
+                stats: null,
+              },
+            ],
+          },
+          isLoading: false,
+          error: null,
+          dataUpdatedAt: Date.now(),
+        }),
+      },
+    },
+  },
+}));
+
+vi.mock("@/lib/api", () => ({
+  mapBotStatusToFleetInstance: vi.fn(
+    (bot: { id: string; name: string; state: string; health: string | null }) => ({
+      id: bot.id,
+      name: bot.name,
+      status: bot.state === "running" ? "running" : "stopped",
+      health: bot.health === "healthy" ? "healthy" : "degraded",
+      uptime: bot.id === "inst-001" ? 86400 : null,
+      pluginCount: bot.id === "inst-001" ? 2 : bot.id === "inst-002" ? 1 : 3,
+      sessionCount: bot.id === "inst-001" ? 5 : 0,
+      provider: bot.id === "inst-001" ? "anthropic" : "openai",
+    }),
+  ),
+  getActivityFeed: vi.fn().mockResolvedValue([
+    {
+      id: "evt-1",
+      timestamp: "2026-02-14T16:30:00Z",
+      actor: "admin",
+      action: "created instance",
+      target: "prod-assistant",
+      targetHref: "/instances/inst-001",
+    },
+    {
+      id: "evt-2",
+      timestamp: "2026-02-14T16:15:00Z",
+      actor: "admin",
+      action: "installed plugin",
+      target: "memory v1.2.0",
+      targetHref: "/plugins",
+    },
+  ]),
+  getFleetResources: vi.fn().mockResolvedValue({
+    totalCpuPercent: 35,
+    totalMemoryMb: 768,
+    memoryCapacityMb: 2048,
+  }),
+  getDividendStats: vi.fn().mockResolvedValue({
+    poolCents: 50000,
+    activeUsers: 120,
+    perUserCents: 416,
+    nextDistributionAt: "2026-03-03T00:00:00Z",
+    userEligible: true,
+    userLastPurchaseAt: "2026-03-01T12:00:00Z",
+    userWindowExpiresAt: "2026-03-08T12:00:00Z",
+  }),
+}));
+
+import { CommandCenter } from "../components/dashboard/command-center";
+
+describe("CommandCenter", () => {
+  it("renders the page heading", () => {
+    render(<CommandCenter />);
+    expect(screen.getByText("Command Center")).toBeInTheDocument();
+    expect(screen.getByText("Fleet overview and quick actions")).toBeInTheDocument();
+  });
+
+  it("renders fleet summary cards with counts after loading", async () => {
+    render(<CommandCenter />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("running-count")).toHaveTextContent("2");
+    });
+    expect(screen.getByTestId("stopped-count")).toHaveTextContent("1");
+    expect(screen.getByTestId("degraded-count")).toHaveTextContent("1");
+  });
+
+  it("shows resource usage", async () => {
+    render(<CommandCenter />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("cpu-usage")).not.toHaveTextContent("--");
+    });
+    expect(screen.getByTestId("memory-usage")).not.toHaveTextContent("--");
+  });
+
+  it("renders the activity feed", async () => {
+    render(<CommandCenter />);
+    await waitFor(() => {
+      expect(screen.getByText("created instance")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Recent Activity")).toBeInTheDocument();
+    expect(screen.getByText("installed plugin")).toBeInTheDocument();
+  });
+
+  it("renders quick action buttons with correct links", () => {
+    render(<CommandCenter />);
+
+    const launchLink = screen.getByText("Add Another Platform").closest("a");
+    expect(launchLink).toHaveAttribute("href", "/instances/new");
+
+    const healthLink = screen.getByText("Fleet Health").closest("a");
+    expect(healthLink).toHaveAttribute("href", "/fleet/health");
+
+    const pluginsLink = screen.getByText("Manage Plugins").closest("a");
+    expect(pluginsLink).toHaveAttribute("href", "/plugins");
+
+    const billingLink = screen.getByText("Billing Overview").closest("a");
+    expect(billingLink).toHaveAttribute("href", "/billing/usage");
+  });
+
+  it("activity feed items are clickable links", async () => {
+    render(<CommandCenter />);
+    await waitFor(() => {
+      expect(screen.getByText("created instance")).toBeInTheDocument();
+    });
+    const activityLink = screen.getAllByText("prod-assistant")[0].closest("a");
+    expect(activityLink).toHaveAttribute("href", "/instances/inst-001");
+  });
+
+  it("shows empty state when no activity", async () => {
+    const { getActivityFeed } = await import("@/lib/api");
+    (getActivityFeed as ReturnType<typeof vi.fn>).mockResolvedValueOnce([]);
+    render(<CommandCenter />);
+    await waitFor(() => {
+      expect(screen.getByText(/STANDING BY/)).toBeInTheDocument();
+    });
+  });
+
+  it("shows dividend stats when available", async () => {
+    render(<CommandCenter />);
+
+    await waitFor(() => {
+      expect(screen.getByText("your daily share")).toBeInTheDocument();
+    });
+  });
+
+  it("shows error banner when activity endpoint fails", async () => {
+    const { getActivityFeed } = await import("@/lib/api");
+    (getActivityFeed as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error("Not found"));
+    render(<CommandCenter />);
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toBeInTheDocument();
+    });
+    expect(screen.getByText(/Not found/)).toBeInTheDocument();
+  });
+});

package/src/__tests__/compliance-retention-edit.test.tsx

@@ -0,0 +1,134 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom/vitest";
+import { describe, expect, it, vi } from "vitest";
+
+// Mock apiFetch
+const mockApiFetch = vi.fn();
+vi.mock("@/lib/api", () => ({
+  apiFetch: (...args: unknown[]) => mockApiFetch(...args),
+  fetchAuditLog: vi.fn(),
+}));
+vi.mock("@/lib/trpc", () => ({
+  trpcVanilla: {
+    admin: {
+      complianceDeletionRequests: { query: vi.fn().mockResolvedValue({ requests: [], total: 0 }) },
+      complianceTriggerDeletion: { mutate: vi.fn() },
+      complianceExportRequests: { query: vi.fn().mockResolvedValue({ requests: [], total: 0 }) },
+      complianceTriggerExport: { mutate: vi.fn() },
+      complianceCancelDeletion: { mutate: vi.fn() },
+    },
+  },
+}));
+
+// Mock fetchRetentionPolicies and updateRetentionPolicy for component tests
+const mockFetchRetentionPolicies = vi.fn();
+const mockUpdateRetentionPolicy = vi.fn();
+
+vi.mock("@/lib/admin-compliance-api", async () => {
+  const actual = await vi.importActual<typeof import("@/lib/admin-compliance-api")>(
+    "@/lib/admin-compliance-api",
+  );
+  return {
+    ...actual,
+    fetchRetentionPolicies: (...args: unknown[]) => mockFetchRetentionPolicies(...args),
+    updateRetentionPolicy: (...args: unknown[]) => mockUpdateRetentionPolicy(...args),
+  };
+});
+
+vi.mock("@/lib/errors", () => ({
+  toUserMessage: (e: unknown) => (e instanceof Error ? e.message : String(e)),
+}));
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
+import { ComplianceDashboard } from "@/components/admin/compliance-dashboard";
+
+const MOCK_POLICIES = [
+  {
+    dataType: "audit_logs",
+    retentionDays: 365,
+    autoDelete: false,
+    lastPurge: null,
+    recordsAffected: 1200,
+  },
+];
+
+describe("updateRetentionPolicy", () => {
+  it("calls PATCH /admin/compliance/retention/:dataType with body", async () => {
+    // Test the underlying apiFetch directly via the real implementation
+    mockApiFetch.mockResolvedValueOnce({
+      dataType: "audit_logs",
+      retentionDays: 180,
+      autoDelete: true,
+      lastPurge: null,
+      recordsAffected: 0,
+    });
+
+    const { updateRetentionPolicy } = await vi.importActual<
+      typeof import("@/lib/admin-compliance-api")
+    >("@/lib/admin-compliance-api");
+
+    const result2 = await updateRetentionPolicy("audit_logs", {
+      retentionDays: 180,
+      autoDelete: true,
+    });
+
+    expect(mockApiFetch).toHaveBeenCalledWith(
+      "/admin/compliance/retention/audit_logs",
+      expect.objectContaining({
+        method: "PATCH",
+        body: JSON.stringify({ retentionDays: 180, autoDelete: true }),
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    expect(result2.retentionDays).toBe(180);
+  });
+});
+
+describe("RetentionPoliciesTab edit", () => {
+  it("shows Edit button on each policy card", async () => {
+    mockFetchRetentionPolicies.mockResolvedValueOnce(MOCK_POLICIES);
+    render(<ComplianceDashboard />);
+
+    const retentionTab = await screen.findByRole("tab", { name: /retention/i });
+    await userEvent.click(retentionTab);
+
+    const editBtn = await screen.findByRole("button", { name: /edit/i });
+    expect(editBtn).toBeInTheDocument();
+  });
+
+  it("opens dialog with current values and saves", async () => {
+    mockFetchRetentionPolicies.mockResolvedValueOnce(MOCK_POLICIES);
+    mockUpdateRetentionPolicy.mockResolvedValueOnce({
+      ...MOCK_POLICIES[0],
+      retentionDays: 180,
+    });
+
+    render(<ComplianceDashboard />);
+
+    const retentionTab = await screen.findByRole("tab", { name: /retention/i });
+    await userEvent.click(retentionTab);
+
+    const editBtn = await screen.findByRole("button", { name: /edit/i });
+    await userEvent.click(editBtn);
+
+    const daysInput = await screen.findByLabelText(/retention.*days/i);
+    expect(daysInput).toHaveValue(365);
+
+    await userEvent.clear(daysInput);
+    await userEvent.type(daysInput, "180");
+
+    const saveBtn = screen.getByRole("button", { name: /save/i });
+    await userEvent.click(saveBtn);
+
+    await waitFor(() => {
+      expect(mockUpdateRetentionPolicy).toHaveBeenCalledWith("audit_logs", {
+        retentionDays: 180,
+        autoDelete: false,
+      });
+    });
+  });
+});