@wopr-network/platform-ui-core 1.1.6 → 1.1.8

package/package.json

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

package/src/__tests__/auto-topup-card.test.tsx

@@ -35,6 +35,14 @@ vi.mock("better-auth/react", () => ({
   }),
 }));
 
+/** Return an ISO-8601 UTC date string N days from now, truncated to midnight. */
+function daysFromNow(n: number): string {
+  const d = new Date();
+  d.setUTCDate(d.getUTCDate() + n);
+  d.setUTCHours(0, 0, 0, 0);
+  return d.toISOString();
+}
+
 const MOCK_SETTINGS: AutoTopupSettings = {
   usageBased: {
     enabled: false,
@@ -61,7 +69,7 @@ const MOCK_SETTINGS_ENABLED: AutoTopupSettings = {
     enabled: true,
     amountCents: 2000,
     interval: "weekly",
-    nextChargeDate: "2026-02-24T00:00:00Z",
+    nextChargeDate: daysFromNow(7),
   },
   paymentMethodLast4: "4242",
   paymentMethodBrand: "Visa",
@@ -89,7 +97,7 @@ const MOCK_SETTINGS_MONTHLY: AutoTopupSettings = {
     enabled: true,
     amountCents: 2000,
     interval: "monthly",
-    nextChargeDate: "2026-03-01T00:00:00Z",
+    nextChargeDate: daysFromNow(14),
   },
 };
 

package/src/__tests__/onboarding-store-urls.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { PROVIDER_DOC_URLS } from "../config/provider-docs";
+
+describe("AI_PROVIDERS keyHelpUrl consolidation", () => {
+  it("all keyHelpUrl values match PROVIDER_DOC_URLS entries", async () => {
+    const { AI_PROVIDERS } = await import("../lib/onboarding-store");
+
+    const urlToProviderDocKey: Record<string, string> = {
+      [PROVIDER_DOC_URLS.anthropic]: "anthropic",
+      [PROVIDER_DOC_URLS.openai]: "openai",
+      [PROVIDER_DOC_URLS.google]: "google",
+      [PROVIDER_DOC_URLS.xai]: "xai",
+      [PROVIDER_DOC_URLS.local]: "local",
+    };
+
+    for (const provider of AI_PROVIDERS) {
+      expect(
+        provider.keyHelpUrl in urlToProviderDocKey ||
+          Object.values(PROVIDER_DOC_URLS).includes(provider.keyHelpUrl as never),
+        `${provider.id} keyHelpUrl "${provider.keyHelpUrl}" should come from PROVIDER_DOC_URLS`,
+      ).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/__tests__/provider-docs.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { PROVIDER_DOC_URLS } from "../config/provider-docs";
+
+describe("PROVIDER_DOC_URLS", () => {
+  it("contains all expected provider keys", () => {
+    const expectedKeys = [
+      "openai",
+      "openrouter",
+      "anthropic",
+      "replicate",
+      "elevenlabs",
+      "elevenlabsHome",
+      "deepgram",
+      "discord",
+      "slack",
+      "telegram",
+      "whatsapp",
+      "msTeams",
+      "moonshot",
+      "github",
+      "google",
+      "xai",
+      "local",
+    ];
+    for (const key of expectedKeys) {
+      expect(PROVIDER_DOC_URLS).toHaveProperty(key);
+    }
+  });
+
+  it("all values are valid https or http URLs", () => {
+    for (const [key, url] of Object.entries(PROVIDER_DOC_URLS)) {
+      expect(url, `${key} should be a valid URL`).toMatch(/^https?:\/\//);
+    }
+  });
+});

package/src/__tests__/suspension-banner.test.tsx

@@ -19,6 +19,22 @@ vi.mock("better-auth/react", () => ({
   }),
 }));
 
+/** Return an ISO-8601 UTC date string N days from now, truncated to midnight. */
+function daysFromNow(n: number): string {
+  const d = new Date();
+  d.setUTCDate(d.getUTCDate() + n);
+  d.setUTCHours(0, 0, 0, 0);
+  return d.toISOString();
+}
+
+/** Return an ISO-8601 UTC date string N days from now, at end-of-day. */
+function endOfDayFromNow(n: number): string {
+  const d = new Date();
+  d.setUTCDate(d.getUTCDate() + n);
+  d.setUTCHours(23, 59, 59, 0);
+  return d.toISOString();
+}
+
 const MOCK_BALANCE: CreditBalance = {
   balance: 0.5,
   dailyBurn: 0.33,
@@ -32,8 +48,8 @@ vi.mock("@/lib/api", async (importOriginal) => {
     getCreditBalance: vi.fn().mockResolvedValue(MOCK_BALANCE),
     getAccountStatus: vi.fn().mockResolvedValue(null),
     getBillingUsageSummary: vi.fn().mockResolvedValue({
-      periodStart: "2026-02-01T00:00:00Z",
-      periodEnd: "2026-02-28T23:59:59Z",
+      periodStart: daysFromNow(-30),
+      periodEnd: endOfDayFromNow(0),
       totalSpend: 30,
       includedCredit: 50,
       amountDue: 0,
@@ -105,8 +121,8 @@ describe("SuspensionBanner", () => {
       runway: 5,
     });
     vi.mocked(api.getBillingUsageSummary).mockResolvedValueOnce({
-      periodStart: "2026-02-01T00:00:00Z",
-      periodEnd: "2026-02-28T23:59:59Z",
+      periodStart: daysFromNow(-30),
+      periodEnd: endOfDayFromNow(0),
       totalSpend: 120,
       includedCredit: 50,
       amountDue: 70,

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/config/provider-docs.ts

@@ -1,4 +1,12 @@
-/** External provider documentation URLs used in onboarding config fields. */
+/**
+ * External provider documentation URLs used in onboarding config fields.
+ *
+ * These are intentional external links to provider API key dashboards —
+ * no secret material. They live in code (not fetched from the API) because
+ * major provider dashboard URLs change extremely rarely (years, not weeks).
+ * The cost of an API round-trip, loading state, and DB migration is not
+ * justified. If a URL changes, update this map and publish a new version.
+ */
 export const PROVIDER_DOC_URLS = {
   openai: "https://platform.openai.com/api-keys",
   openrouter: "https://openrouter.ai/keys",
@@ -14,4 +22,7 @@ export const PROVIDER_DOC_URLS = {
   msTeams: "https://dev.teams.microsoft.com/",
   moonshot: "https://platform.moonshot.cn/",
   github: "https://github.com/settings/tokens",
+  google: "https://aistudio.google.com/apikey",
+  xai: "https://console.x.ai/",
+  local: "https://ollama.com/download",
 } as const;

package/src/lib/onboarding-store.ts

@@ -2,6 +2,7 @@
  * Client-side onboarding state with localStorage persistence.
  * Enables resume from last completed step.
  */
+import { PROVIDER_DOC_URLS } from "../config/provider-docs";
 import { storageKey } from "./brand-config";
 
 export interface ProviderConfig {
@@ -137,7 +138,7 @@ export const AI_PROVIDERS = [
     recommended: true,
     keyPattern: "^sk-ant-[a-zA-Z0-9_-]+$",
     keyPlaceholder: "sk-ant-api03-...",
-    keyHelpUrl: "https://console.anthropic.com/settings/keys",
+    keyHelpUrl: PROVIDER_DOC_URLS.anthropic,
   },
   {
     id: "openai",
@@ -148,7 +149,7 @@ export const AI_PROVIDERS = [
     recommended: false,
     keyPattern: "^sk-[a-zA-Z0-9_-]+$",
     keyPlaceholder: "sk-proj-...",
-    keyHelpUrl: "https://platform.openai.com/api-keys",
+    keyHelpUrl: PROVIDER_DOC_URLS.openai,
   },
   {
     id: "google",
@@ -159,7 +160,7 @@ export const AI_PROVIDERS = [
     recommended: false,
     keyPattern: "^AIza[a-zA-Z0-9_-]+$",
     keyPlaceholder: "AIzaSy...",
-    keyHelpUrl: "https://aistudio.google.com/apikey",
+    keyHelpUrl: PROVIDER_DOC_URLS.google,
   },
   {
     id: "xai",
@@ -170,7 +171,7 @@ export const AI_PROVIDERS = [
     recommended: false,
     keyPattern: "^xai-[a-zA-Z0-9_-]+$",
     keyPlaceholder: "xai-...",
-    keyHelpUrl: "https://console.x.ai/",
+    keyHelpUrl: PROVIDER_DOC_URLS.xai,
   },
   {
     id: "local",
@@ -181,7 +182,7 @@ export const AI_PROVIDERS = [
     recommended: false,
     keyPattern: ".*",
     keyPlaceholder: "http://localhost:11434",
-    keyHelpUrl: "https://ollama.com/download",
+    keyHelpUrl: PROVIDER_DOC_URLS.local,
   },
 ] as const;