@wopr-network/platform-ui-core 1.1.0 → 1.1.2

package/package.json

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

package/src/__tests__/plugins-toggle-race.test.tsx

@@ -0,0 +1,179 @@
+import { act, render, screen, waitFor } from "@testing-library/react";
+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 mockTogglePluginEnabled = vi.fn();
+const mockListInstalledPlugins = vi.fn();
+
+vi.mock("@/lib/marketplace-data", () => ({
+  listBots: vi.fn().mockResolvedValue([{ id: "bot-1", name: "Test Bot" }]),
+  listMarketplacePlugins: vi.fn().mockResolvedValue([
+    {
+      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: [],
+    },
+  ]),
+  listInstalledPlugins: (...args: unknown[]) => mockListInstalledPlugins(...args),
+  togglePluginEnabled: (...args: unknown[]) => mockTogglePluginEnabled(...args),
+  formatInstallCount: (n: number) => String(n),
+  hasHostedOption: () => false,
+}));
+
+import PluginsPage from "@/app/plugins/page";
+
+describe("togglePlugin race condition", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockListInstalledPlugins.mockResolvedValue([{ pluginId: "plugin-1", enabled: true }]);
+    // Make togglePluginEnabled slow so we can test in-flight guard
+    mockTogglePluginEnabled.mockImplementation(
+      () => new Promise((resolve) => setTimeout(resolve, 500)),
+    );
+  });
+
+  it("blocks a second toggle while the first is in flight (stale closure exposes race)", async () => {
+    // Use a deferred promise instead of a real timer to avoid async leak on test teardown
+    let resolveToggle!: () => void;
+    const togglePromise = new Promise<void>((resolve) => {
+      resolveToggle = resolve;
+    });
+    mockTogglePluginEnabled.mockReturnValue(togglePromise);
+
+    render(<PluginsPage />);
+
+    // Wait for the page to fully load
+    const toggle = await screen.findByRole("switch", { name: /toggle test plugin/i });
+    expect(toggle).toBeInTheDocument();
+
+    // Simulate rapid double-click by firing two change events synchronously
+    // WITHOUT awaiting between them — this exposes the stale closure bug because
+    // React hasn't re-rendered between the two calls, so the `toggling` state
+    // variable is still `null` in both closures.
+    const switchEl = toggle;
+
+    // Fire two synthetic events in the same synchronous batch
+    act(() => {
+      switchEl.click();
+      switchEl.click();
+    });
+
+    // After settling, only ONE API call should have been made
+    await waitFor(() => {
+      // If the stale closure bug exists, this will be 2. With the ref fix, it will be 1.
+      expect(mockTogglePluginEnabled).toHaveBeenCalledTimes(1);
+    });
+
+    // Resolve the deferred promise to drain the pending async operation before teardown
+    await act(async () => {
+      resolveToggle();
+    });
+  });
+
+  it("allows toggling again after the first completes", async () => {
+    // Fast resolution for this test
+    mockTogglePluginEnabled.mockResolvedValue(undefined);
+    mockListInstalledPlugins
+      .mockResolvedValueOnce([{ pluginId: "plugin-1", enabled: true }]) // initial load
+      .mockResolvedValueOnce([{ pluginId: "plugin-1", enabled: false }]) // after first toggle
+      .mockResolvedValueOnce([{ pluginId: "plugin-1", enabled: true }]); // after second toggle
+
+    render(<PluginsPage />);
+
+    const toggle = await screen.findByRole("switch", { name: /toggle test plugin/i });
+
+    // First toggle
+    act(() => {
+      toggle.click();
+    });
+
+    await waitFor(() => {
+      expect(mockTogglePluginEnabled).toHaveBeenCalledTimes(1);
+    });
+
+    // Wait for the toggle to complete (ref cleared, switch re-enabled)
+    await waitFor(() => {
+      expect(toggle).not.toBeDisabled();
+    });
+
+    // Second toggle — should work now that the first is complete
+    act(() => {
+      toggle.click();
+    });
+
+    await waitFor(() => {
+      expect(mockTogglePluginEnabled).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/src/app/plugins/page.tsx

@@ -73,12 +73,14 @@ export default function PluginsPage() {
   const [catalog, setCatalog] = useState<PluginManifest[]>([]);
   const [loading, setLoading] = useState(true);
   const [installed, setInstalled] = useState<InstalledPlugin[]>([]);
+  const installedRef = useRef<InstalledPlugin[]>([]);
   const [search, setSearch] = useState("");
   const [bots, setBots] = useState<BotSummary[]>([]);
   const [selectedBotId, setSelectedBotId] = useState<string | null>(null);
   const selectedBotIdRef = useRef<string | null>(null);
   const [botsLoading, setBotsLoading] = useState(true);
   const [toggling, setToggling] = useState<string | null>(null);
+  const togglingRef = useRef<string | null>(null);
   const [toggleError, setToggleError] = useState<string | null>(null);
   const [installedPage, setInstalledPage] = useState(1);
   const [catalogPage, setCatalogPage] = useState(1);
@@ -128,6 +130,9 @@ export default function PluginsPage() {
     loadCatalog();
   }, [loadCatalog]);
 
+  // Keep installedRef current so togglePlugin can read installed without being in useCallback deps
+  installedRef.current = installed;
+
   // Load installed plugins when bot changes
   useEffect(() => {
     if (!selectedBotId) {
@@ -139,36 +144,43 @@ export default function PluginsPage() {
       .catch(() => setInstalled([]));
   }, [selectedBotId]);
 
-  async function togglePlugin(pluginId: string) {
-    if (!selectedBotId || toggling) return;
-    const plugin = installed.find((p) => p.pluginId === pluginId);
-    if (!plugin) return;
+  const togglePlugin = useCallback(
+    async (pluginId: string) => {
+      if (!selectedBotId || togglingRef.current) return;
+      const plugin = installedRef.current.find((p) => p.pluginId === pluginId);
+      if (!plugin) return;
 
-    const previousEnabled = plugin.enabled;
-    const newEnabled = !previousEnabled;
-    setToggling(pluginId);
-    setToggleError(null);
+      // Set ref synchronously BEFORE any await — prevents race
+      togglingRef.current = pluginId;
 
-    // Optimistic update
-    setInstalled((prev) =>
-      prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: newEnabled } : p)),
-    );
+      const previousEnabled = plugin.enabled;
+      const newEnabled = !previousEnabled;
+      setToggling(pluginId);
+      setToggleError(null);
 
-    try {
-      await togglePluginEnabled(selectedBotId, pluginId, newEnabled);
-      // Refetch from server to confirm state (handles side effects like dependency enabling)
-      const refreshed = await listInstalledPlugins(selectedBotId);
-      setInstalled(refreshed);
-    } catch {
-      // Revert on failure
+      // Optimistic update
       setInstalled((prev) =>
-        prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: previousEnabled } : p)),
+        prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: newEnabled } : p)),
       );
-      setToggleError("Failed to update plugin. Please try again.");
-    } finally {
-      setToggling(null);
-    }
-  }
+
+      try {
+        await togglePluginEnabled(selectedBotId, pluginId, newEnabled);
+        // Refetch from server to confirm state (handles side effects like dependency enabling)
+        const refreshed = await listInstalledPlugins(selectedBotId);
+        setInstalled(refreshed);
+      } catch {
+        // Revert on failure
+        setInstalled((prev) =>
+          prev.map((p) => (p.pluginId === pluginId ? { ...p, enabled: previousEnabled } : p)),
+        );
+        setToggleError("Failed to update plugin. Please try again.");
+      } finally {
+        togglingRef.current = null;
+        setToggling(null);
+      }
+    },
+    [selectedBotId],
+  );
 
   const installedManifests = useMemo(() => {
     const manifestMap = new Map(catalog.map((m) => [m.id, m]));

package/src/lib/brand-config.ts

@@ -74,34 +74,63 @@ export interface BrandConfig {
  * its env vars in .env (or .env.local) and the config picks them up
  * at build time — no code changes required.
  */
+/**
+ * Parse NEXT_PUBLIC_BRAND_NAV_ITEMS env var.
+ * Format: JSON array of {label, href} objects.
+ * Example: '[{"label":"Home","href":"/"},{"label":"Settings","href":"/settings"}]'
+ * Returns null if unset or invalid (falls back to defaults).
+ */
+function parseNavItems(raw: string | undefined): Array<{ label: string; href: string }> | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (
+      Array.isArray(parsed) &&
+      parsed.every(
+        (item: unknown) =>
+          typeof item === "object" &&
+          item !== null &&
+          typeof (item as { label?: unknown }).label === "string" &&
+          typeof (item as { href?: unknown }).href === "string",
+      )
+    ) {
+      return parsed as Array<{ label: string; href: string }>;
+    }
+  } catch {
+    // Invalid JSON — fall back to defaults
+  }
+  return null;
+}
+
 function envDefaults(): BrandConfig {
-  const env = (key: string) =>
-    (typeof process !== "undefined" ? process.env?.[key] : undefined) ?? "";
-  const productName = env("NEXT_PUBLIC_BRAND_PRODUCT_NAME") || "Platform";
-  const brandName = env("NEXT_PUBLIC_BRAND_NAME") || "Platform";
-  const storagePrefix = env("NEXT_PUBLIC_BRAND_STORAGE_PREFIX") || "platform";
-  const eventPrefix = env("NEXT_PUBLIC_BRAND_EVENT_PREFIX") || storagePrefix;
+  // Direct process.env.X access is required — Next.js Turbopack only inlines
+  // NEXT_PUBLIC_* vars when accessed as literal dot-property references.
+  // Dynamic access like process.env[key] is NOT inlined at build time.
+  const productName = process.env.NEXT_PUBLIC_BRAND_PRODUCT_NAME || "Platform";
+  const brandName = process.env.NEXT_PUBLIC_BRAND_NAME || "Platform";
+  const storagePrefix = process.env.NEXT_PUBLIC_BRAND_STORAGE_PREFIX || "platform";
+  const eventPrefix = process.env.NEXT_PUBLIC_BRAND_EVENT_PREFIX || storagePrefix;
   return {
     productName,
     brandName,
-    domain: env("NEXT_PUBLIC_BRAND_DOMAIN") || "localhost",
-    appDomain: env("NEXT_PUBLIC_BRAND_APP_DOMAIN") || "localhost:3000",
-    tagline: env("NEXT_PUBLIC_BRAND_TAGLINE") || "Your platform, your rules.",
+    domain: process.env.NEXT_PUBLIC_BRAND_DOMAIN || "localhost",
+    appDomain: process.env.NEXT_PUBLIC_BRAND_APP_DOMAIN || "localhost:3000",
+    tagline: process.env.NEXT_PUBLIC_BRAND_TAGLINE || "Your platform, your rules.",
     emails: {
-      privacy: env("NEXT_PUBLIC_BRAND_EMAIL_PRIVACY") || "privacy@example.com",
-      legal: env("NEXT_PUBLIC_BRAND_EMAIL_LEGAL") || "legal@example.com",
-      support: env("NEXT_PUBLIC_BRAND_EMAIL_SUPPORT") || "support@example.com",
+      privacy: process.env.NEXT_PUBLIC_BRAND_EMAIL_PRIVACY || "privacy@example.com",
+      legal: process.env.NEXT_PUBLIC_BRAND_EMAIL_LEGAL || "legal@example.com",
+      support: process.env.NEXT_PUBLIC_BRAND_EMAIL_SUPPORT || "support@example.com",
     },
-    defaultImage: env("NEXT_PUBLIC_BRAND_DEFAULT_IMAGE"),
+    defaultImage: process.env.NEXT_PUBLIC_BRAND_DEFAULT_IMAGE || "",
     storagePrefix,
     eventPrefix,
-    envVarPrefix: env("NEXT_PUBLIC_BRAND_ENV_PREFIX") || storagePrefix.toUpperCase(),
-    toolPrefix: env("NEXT_PUBLIC_BRAND_TOOL_PREFIX") || storagePrefix,
-    tenantCookieName: env("NEXT_PUBLIC_BRAND_TENANT_COOKIE") || `${storagePrefix}_tenant_id`,
-    companyLegalName: env("NEXT_PUBLIC_BRAND_COMPANY_LEGAL") || "Platform Inc.",
-    price: env("NEXT_PUBLIC_BRAND_PRICE"),
-    homePath: env("NEXT_PUBLIC_BRAND_HOME_PATH") || "/marketplace",
-    navItems: [
+    envVarPrefix: process.env.NEXT_PUBLIC_BRAND_ENV_PREFIX || storagePrefix.toUpperCase(),
+    toolPrefix: process.env.NEXT_PUBLIC_BRAND_TOOL_PREFIX || storagePrefix,
+    tenantCookieName: process.env.NEXT_PUBLIC_BRAND_TENANT_COOKIE || `${storagePrefix}_tenant_id`,
+    companyLegalName: process.env.NEXT_PUBLIC_BRAND_COMPANY_LEGAL || "Platform Inc.",
+    price: process.env.NEXT_PUBLIC_BRAND_PRICE || "",
+    homePath: process.env.NEXT_PUBLIC_BRAND_HOME_PATH || "/marketplace",
+    navItems: parseNavItems(process.env.NEXT_PUBLIC_BRAND_NAV_ITEMS) ?? [
       { label: "Dashboard", href: "/dashboard" },
       { label: "Chat", href: "/chat" },
       { label: "Marketplace", href: "/marketplace" },