@wopr-network/platform-ui-core 1.1.5 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wopr-network/platform-ui-core",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "Brand-agnostic AI agent platform UI — deploy as any brand via env vars",
   "repository": {
     "type": "git",

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

@@ -3,6 +3,8 @@ import {
   clearChatHistory,
   getSessionId,
   loadChatHistory,
+  MAX_CHAT_HISTORY,
+  MAX_MESSAGE_CONTENT_LENGTH,
   saveChatHistory,
 } from "@/lib/chat/chat-store";
 import type { ChatMessage } from "@/lib/chat/types";
@@ -84,4 +86,94 @@ describe("chat-store", () => {
       expect(loadChatHistory()).toEqual([]);
     });
   });
+
+  describe("saveChatHistory limits", () => {
+    it("keeps only the last MAX_CHAT_HISTORY messages", () => {
+      const total = MAX_CHAT_HISTORY + 50;
+      const messages: ChatMessage[] = Array.from({ length: total }, (_, i) => ({
+        id: String(i),
+        role: "user" as const,
+        content: `msg ${i}`,
+        timestamp: 1000 + i,
+      }));
+      saveChatHistory(messages);
+      const loaded = loadChatHistory();
+      expect(loaded).toHaveLength(MAX_CHAT_HISTORY);
+      // Should keep the LAST MAX_CHAT_HISTORY (indices 50-149)
+      expect(loaded[0].id).toBe("50");
+      expect(loaded[MAX_CHAT_HISTORY - 1].id).toBe(String(total - 1));
+    });
+
+    it("truncates message content exceeding MAX_MESSAGE_CONTENT_LENGTH and appends ellipsis", () => {
+      const longContent = "x".repeat(MAX_MESSAGE_CONTENT_LENGTH + 1000);
+      const messages: ChatMessage[] = [
+        { id: "1", role: "user", content: longContent, timestamp: 1000 },
+      ];
+      saveChatHistory(messages);
+      const loaded = loadChatHistory();
+      expect(loaded).toHaveLength(1);
+      expect(loaded[0].content).toHaveLength(MAX_MESSAGE_CONTENT_LENGTH + 1);
+      expect(loaded[0].content).toBe(`${"x".repeat(MAX_MESSAGE_CONTENT_LENGTH)}…`);
+    });
+
+    it("does not mutate the original messages array when saving", () => {
+      const longContent = "x".repeat(MAX_MESSAGE_CONTENT_LENGTH + 1000);
+      const messages: ChatMessage[] = [
+        { id: "1", role: "user", content: longContent, timestamp: 1000 },
+      ];
+      const originalContent = messages[0].content;
+      saveChatHistory(messages);
+      // localStorage copy is truncated; in-memory array must be unchanged
+      expect(messages[0].content).toBe(originalContent);
+      expect(messages[0].content).toHaveLength(MAX_MESSAGE_CONTENT_LENGTH + 1000);
+    });
+
+    it("slices by Unicode codepoints so emoji are not split", () => {
+      // Each emoji is 2 UTF-16 code units but 1 codepoint.
+      // String.slice() cuts by code units; [...str].slice() cuts by codepoints.
+      // A string of MAX_MESSAGE_CONTENT_LENGTH emoji has 2*MAX code units.
+      // With .slice() the last emoji would be split; with spread it must not be.
+      const emoji = "\u{1F600}"; // 😀 — 2 code units
+      const longContent = emoji.repeat(MAX_MESSAGE_CONTENT_LENGTH + 100);
+      const messages: ChatMessage[] = [
+        { id: "1", role: "user", content: longContent, timestamp: 1000 },
+      ];
+      saveChatHistory(messages);
+      const loaded = loadChatHistory();
+      const stored = loaded[0].content;
+      // The stored content (minus ellipsis) must decode to valid codepoints only.
+      // If the last emoji were split, it would contain a lone surrogate which
+      // JSON.parse would either mangle or preserve as an invalid codepoint.
+      const withoutEllipsis = stored.slice(0, -1); // remove "…"
+      expect([...withoutEllipsis].every((ch) => ch === emoji)).toBe(true);
+    });
+
+    it("does not truncate content at or below the limit", () => {
+      const exactContent = "y".repeat(MAX_MESSAGE_CONTENT_LENGTH);
+      const messages: ChatMessage[] = [
+        { id: "1", role: "user", content: exactContent, timestamp: 1000 },
+      ];
+      saveChatHistory(messages);
+      const loaded = loadChatHistory();
+      expect(loaded[0].content).toBe(exactContent);
+    });
+
+    it("applies both message count and content length limits together", () => {
+      const total = MAX_CHAT_HISTORY + 10;
+      const messages: ChatMessage[] = Array.from({ length: total }, (_, i) => ({
+        id: String(i),
+        role: "bot" as const,
+        content: "z".repeat(MAX_MESSAGE_CONTENT_LENGTH + 1000),
+        timestamp: 1000 + i,
+      }));
+      saveChatHistory(messages);
+      const loaded = loadChatHistory();
+      expect(loaded).toHaveLength(MAX_CHAT_HISTORY);
+      expect(loaded[0].id).toBe("10");
+      for (const msg of loaded) {
+        expect(msg.content).toHaveLength(MAX_MESSAGE_CONTENT_LENGTH + 1);
+        expect(msg.content.endsWith("…")).toBe(true);
+      }
+    });
+  });
 });

package/src/__tests__/plugins-catalog-error.test.tsx

@@ -0,0 +1,233 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock next/navigation
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+// Mock framer-motion to avoid animation issues in tests
+vi.mock("framer-motion", () => ({
+  motion: {
+    div: ({
+      children,
+      variants: _variants,
+      initial: _initial,
+      animate: _animate,
+      whileHover: _whileHover,
+      whileTap: _whileTap,
+      transition: _transition,
+      style,
+      className,
+    }: React.PropsWithChildren<{
+      variants?: unknown;
+      initial?: unknown;
+      animate?: unknown;
+      whileHover?: unknown;
+      whileTap?: unknown;
+      transition?: unknown;
+      style?: React.CSSProperties;
+      className?: string;
+    }>) => (
+      <div style={style} className={className}>
+        {children}
+      </div>
+    ),
+  },
+  AnimatePresence: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+// Mock plugin setup chat hook
+vi.mock("@/hooks/use-plugin-setup-chat", () => ({
+  usePluginSetupChat: () => ({
+    state: {
+      isOpen: false,
+      pluginName: "",
+      messages: [],
+      isConnected: false,
+      isTyping: false,
+      isComplete: false,
+    },
+    sendMessage: vi.fn(),
+    closeSetup: vi.fn(),
+    openSetup: vi.fn(),
+  }),
+}));
+
+// Mock brand config
+vi.mock("@/lib/brand-config", () => ({
+  getBrandConfig: () => ({ productName: "TestProduct", brandName: "TestBrand" }),
+}));
+
+// Mock plugin-setup component
+vi.mock("@/components/plugin-setup", () => ({
+  SetupChatPanel: () => null,
+}));
+
+const mockListMarketplacePlugins = vi.fn();
+
+vi.mock("@/lib/marketplace-data", () => ({
+  listBots: vi.fn().mockResolvedValue([{ id: "bot-1", name: "Test Bot" }]),
+  listMarketplacePlugins: (...args: unknown[]) => mockListMarketplacePlugins(...args),
+  listInstalledPlugins: vi.fn().mockResolvedValue([]),
+  togglePluginEnabled: vi.fn(),
+  formatInstallCount: (n: number) => String(n),
+  hasHostedOption: () => false,
+}));
+
+import PluginsPage from "@/app/plugins/page";
+
+describe("plugins catalog error state", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("shows error message with retry when catalog load fails", async () => {
+    mockListMarketplacePlugins.mockRejectedValue(new Error("Network error"));
+
+    render(<PluginsPage />);
+
+    // Switch to the Catalog tab
+    const catalogTab = await screen.findByRole("tab", { name: /catalog/i });
+    await userEvent.click(catalogTab);
+
+    // Should show the error message
+    await waitFor(() => {
+      expect(screen.getByText(/CATALOG LOAD FAILED/i)).toBeInTheDocument();
+    });
+
+    // Should show the retry button
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+  });
+
+  it("retries loading when retry button is clicked", async () => {
+    const catalogPlugin = {
+      id: "plugin-1",
+      name: "Test Plugin",
+      description: "A test plugin",
+      version: "1.0.0",
+      color: "#ff0000",
+      tags: [],
+      capabilities: [],
+      installCount: 100,
+      author: "Test",
+      category: "integration",
+      configSchema: [],
+    };
+
+    // First call fails, second succeeds
+    mockListMarketplacePlugins
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce([catalogPlugin]);
+
+    render(<PluginsPage />);
+
+    // Switch to the Catalog tab
+    const catalogTab = await screen.findByRole("tab", { name: /catalog/i });
+    await userEvent.click(catalogTab);
+
+    // Wait for error state
+    await waitFor(() => {
+      expect(screen.getByText(/CATALOG LOAD FAILED/i)).toBeInTheDocument();
+    });
+
+    // Click retry
+    const retryButton = screen.getByRole("button", { name: /retry/i });
+    await userEvent.click(retryButton);
+
+    // After retry, the error should be gone and plugin visible in catalog tab (no tab reset)
+    await waitFor(() => {
+      expect(screen.getByText("Test Plugin")).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/CATALOG LOAD FAILED/i)).not.toBeInTheDocument();
+  });
+
+  it("shows error banner and retry button when catalog error occurs", async () => {
+    // This test validates the corrected rendering condition:
+    // The error banner renders whenever catalogError=true, not only when catalogTotal===0.
+    // The previous condition (catalogError && catalogTotal === 0) would hide the error
+    // if a prior catalog existed — this test verifies the simpler, correct condition.
+    mockListMarketplacePlugins.mockRejectedValue(new Error("Network error"));
+
+    render(<PluginsPage />);
+
+    const catalogTab = await screen.findByRole("tab", { name: /catalog/i });
+    await userEvent.click(catalogTab);
+
+    // Error banner shown
+    await waitFor(() => {
+      expect(screen.getByText(/CATALOG LOAD FAILED/i)).toBeInTheDocument();
+    });
+
+    // Retry button visible (not hidden by incorrect catalogTotal condition)
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+
+    // No empty-state message rendered at the same time
+    expect(screen.queryByText(/NO MATCHING PLUGINS FOUND/i)).not.toBeInTheDocument();
+  });
+
+  it("retry does not reset active tab to Installed", async () => {
+    const catalogPlugin = {
+      id: "plugin-1",
+      name: "Test Plugin",
+      description: "A test plugin",
+      version: "1.0.0",
+      color: "#ff0000",
+      tags: [],
+      capabilities: [],
+      installCount: 100,
+      author: "Test",
+      category: "integration",
+      configSchema: [],
+    };
+
+    // First call fails, second succeeds
+    mockListMarketplacePlugins
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce([catalogPlugin]);
+
+    render(<PluginsPage />);
+
+    // Switch to the Catalog tab
+    const catalogTab = await screen.findByRole("tab", { name: /catalog/i });
+    await userEvent.click(catalogTab);
+
+    // Wait for error state
+    await waitFor(() => {
+      expect(screen.getByText(/CATALOG LOAD FAILED/i)).toBeInTheDocument();
+    });
+
+    // Click retry
+    const retryButton = screen.getByRole("button", { name: /retry/i });
+    await userEvent.click(retryButton);
+
+    // After retry succeeds, the Catalog tab content should be visible
+    // WITHOUT having to re-click the tab (no tab reset)
+    await waitFor(() => {
+      expect(screen.getByText("Test Plugin")).toBeInTheDocument();
+    });
+
+    // The active tab should still be Catalog — verify the catalog content is visible
+    // without re-clicking the tab (i.e., no tab reset occurred)
+    expect(screen.queryByText(/CATALOG LOAD FAILED/i)).not.toBeInTheDocument();
+  });
+
+  it("shows empty state (not error) when catalog loads with zero plugins", async () => {
+    mockListMarketplacePlugins.mockResolvedValue([]);
+
+    render(<PluginsPage />);
+
+    // Switch to the Catalog tab
+    const catalogTab = await screen.findByRole("tab", { name: /catalog/i });
+    await userEvent.click(catalogTab);
+
+    // Should show the normal empty state, not the error state
+    await waitFor(() => {
+      expect(screen.getByText(/NO MATCHING PLUGINS FOUND/i)).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText(/CATALOG LOAD FAILED/i)).not.toBeInTheDocument();
+  });
+});

package/src/app/plugins/page.tsx

@@ -82,6 +82,8 @@ export default function PluginsPage() {
   const [toggling, setToggling] = useState<string | null>(null);
   const togglingRef = useRef<string | null>(null);
   const [toggleError, setToggleError] = useState<string | null>(null);
+  const [catalogError, setCatalogError] = useState(false);
+  const [catalogLoading, setCatalogLoading] = useState(false);
   const [installedPage, setInstalledPage] = useState(1);
   const [catalogPage, setCatalogPage] = useState(1);
 
@@ -114,15 +116,24 @@ export default function PluginsPage() {
       });
   }, []);
 
-  const loadCatalog = useCallback(async () => {
-    setLoading(true);
+  const loadCatalog = useCallback(async (isRetry = false) => {
+    setCatalogError(false);
+    if (isRetry) {
+      setCatalogLoading(true);
+    } else {
+      setLoading(true);
+    }
     try {
       const data = await listMarketplacePlugins();
       setCatalog(data);
     } catch {
-      // Keep previous catalog on error
+      setCatalogError(true);
     } finally {
-      setLoading(false);
+      if (isRetry) {
+        setCatalogLoading(false);
+      } else {
+        setLoading(false);
+      }
     }
   }, []);
 
@@ -446,7 +457,43 @@ export default function PluginsPage() {
             className="max-w-sm bg-black/50 border-terminal/30 placeholder:text-terminal/30 focus-visible:border-terminal focus-visible:ring-terminal/20"
           />
 
-          {catalogTotal === 0 ? (
+          {catalogLoading ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {Array.from({ length: 6 }, (_, n) => `csk-${n}`).map((skId) => (
+                <Card key={skId}>
+                  <CardHeader>
+                    <div className="flex items-start gap-3">
+                      <Skeleton className="h-10 w-10 rounded-lg" />
+                      <div className="flex-1 space-y-2">
+                        <Skeleton className="h-5 w-28" />
+                        <Skeleton className="h-4 w-full" />
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex items-center justify-between">
+                      <Skeleton className="h-3 w-24" />
+                      <Skeleton className="h-5 w-10 rounded-full" />
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : catalogError ? (
+            <div className="flex h-40 flex-col items-center justify-center gap-3 rounded-sm border border-dashed border-red-500/25 bg-red-500/5">
+              <p className="font-mono text-sm text-red-500">
+                &gt; CATALOG LOAD FAILED. CHECK CONNECTION AND RETRY.
+              </p>
+              <Button
+                variant="outline"
+                size="sm"
+                className="border-red-500/30 text-red-500 hover:bg-red-500/10"
+                onClick={() => loadCatalog(true)}
+              >
+                Retry
+              </Button>
+            </div>
+          ) : catalogTotal === 0 ? (
             <div className="flex h-40 items-center justify-center rounded-sm border border-dashed border-terminal/20">
               <p className="font-mono text-sm text-terminal/60">&gt; NO MATCHING PLUGINS FOUND.</p>
             </div>

package/src/components/channel-wizard/field-qr.tsx

@@ -163,7 +163,7 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
 
               {/* bg-white is intentional -- QR codes require white background for scanability */}
               <div className="h-40 w-40 rounded-sm bg-white p-3 min-[375px]:h-48 min-[375px]:w-48">
-                {/* biome-ignore lint/performance/noImgElement: QR code is a base64 data URL, not optimizable by next/image */}
+                {/* biome-ignore lint/performance/noImgElement: QR PNG is a base64 data URI from the API — next/image does not support data: URIs (cannot optimize, resize, or lazy-load inline blobs). Raw <img> is the only option here. */}
                 <img
                   src={qrPng}
                   alt="Scan this QR code with your phone"
@@ -205,7 +205,7 @@ export function FieldQR({ field, value: _value, onChange, error, botId }: FieldQ
               {/* bg-white is intentional -- QR codes require white background for scanability */}
               <div className="relative h-40 w-40 rounded-sm bg-white p-3 min-[375px]:h-48 min-[375px]:w-48">
                 {qrPng && (
-                  // biome-ignore lint/performance/noImgElement: QR code is a base64 data URL
+                  // biome-ignore lint/performance/noImgElement: base64 data URI — see comment above for rationale
                   <img src={qrPng} alt="Expired QR code" className="h-full w-full opacity-40" />
                 )}
                 {/* Dark overlay */}

package/src/lib/chat/chat-store.ts

@@ -5,6 +5,12 @@ import type { ChatMessage } from "./types";
 const HISTORY_KEY = storageKey("chat-history");
 const SESSION_KEY = storageKey("chat-session");
 
+/** Maximum number of messages persisted to localStorage. */
+export const MAX_CHAT_HISTORY = 100;
+
+/** Maximum character length for a single message's content field. */
+export const MAX_MESSAGE_CONTENT_LENGTH = 4_000;
+
 const ChatMessageSchema = z.object({
   id: z.string(),
   role: z.enum(["user", "bot", "event"]),
@@ -46,9 +52,15 @@ export function loadChatHistory(): ChatMessage[] {
 export function saveChatHistory(messages: ChatMessage[]): void {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(HISTORY_KEY, JSON.stringify(messages));
+    const trimmed = messages.slice(-MAX_CHAT_HISTORY).map((msg) => {
+      const codepoints = [...msg.content];
+      return codepoints.length > MAX_MESSAGE_CONTENT_LENGTH
+        ? { ...msg, content: `${codepoints.slice(0, MAX_MESSAGE_CONTENT_LENGTH).join("")}…` }
+        : msg;
+    });
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed));
   } catch {
-    // ignore
+    // ignore — quota exceeded or private browsing
   }
 }