@wopr-network/platform-ui-core 1.0.0

package/src/hooks/use-count-up.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export function useCountUp(target: number, duration = 1200) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    if (target <= 0) {
+      setValue(0);
+      return;
+    }
+    const start = performance.now();
+    let raf: number;
+    function tick(now: number) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(eased * target);
+      if (progress < 1) raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [target, duration]);
+  return value;
+}

package/src/hooks/use-debounce.ts

@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay = 300): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debounced;
+}

package/src/hooks/use-fleet-sse.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { PLATFORM_BASE_URL } from "@/lib/api-config";
+import { getActiveTenantId } from "@/lib/tenant-context";
+
+export interface FleetSSEEvent {
+  type: "bot.started" | "bot.stopped" | "bot.created" | "bot.removed" | "bot.restarted";
+  botId: string;
+  timestamp: string;
+}
+
+/**
+ * Subscribe to real-time fleet events via SSE.
+ * EventSource sends session cookies automatically (withCredentials: true).
+ * Tenant ID is passed as a query parameter (EventSource cannot send headers).
+ */
+export function useFleetSSE(onEvent: (event: FleetSSEEvent) => void): void {
+  const onEventRef = useRef(onEvent);
+  onEventRef.current = onEvent;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const tenantId = getActiveTenantId();
+    const url = new URL(`${PLATFORM_BASE_URL}/fleet/events`);
+    if (tenantId) url.searchParams.set("tenantId", tenantId);
+
+    const es = new EventSource(url.toString(), { withCredentials: true });
+
+    function handleFleetEvent(e: MessageEvent) {
+      try {
+        const data = JSON.parse(e.data) as FleetSSEEvent;
+        onEventRef.current(data);
+      } catch (_err) {
+        // Malformed event — ignore
+      }
+    }
+
+    es.addEventListener("fleet", handleFleetEvent);
+
+    return () => {
+      es.removeEventListener("fleet", handleFleetEvent);
+      es.close();
+    };
+  }, []);
+}

package/src/hooks/use-has-org.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getOrganization } from "@/lib/org-api";
+
+export function useHasOrg(): { hasOrg: boolean; loading: boolean } {
+  const [hasOrg, setHasOrg] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getOrganization()
+      .then(() => setHasOrg(true))
+      .catch(() => setHasOrg(false))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { hasOrg, loading };
+}

package/src/hooks/use-image-status.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from "react";
+import type { ImageStatusResponse } from "@/lib/api";
+import { getImageStatus } from "@/lib/api";
+
+export function useImageStatus(id: string | null) {
+  const [data, setData] = useState<ImageStatusResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (!id) return;
+    setLoading(true);
+    setError(null);
+    const result = await getImageStatus(id);
+    if (result === null) {
+      setError("Failed to fetch image status");
+      setData(null);
+    } else {
+      setData(result);
+      setError(null);
+    }
+    setLoading(false);
+  }, [id]);
+
+  useEffect(() => {
+    if (id) refresh();
+  }, [id, refresh]);
+
+  return {
+    updateAvailable: data?.updateAvailable ?? false,
+    loading,
+    error,
+    refresh,
+  };
+}

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+
+function readStorage<T>(key: string, initialValue: T): T {
+  if (typeof window === "undefined") return initialValue;
+  try {
+    const item = localStorage.getItem(key);
+    return item !== null ? (JSON.parse(item) as T) : initialValue;
+  } catch {
+    return initialValue;
+  }
+}
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((prev: T) => T)) => void, () => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => readStorage(key, initialValue));
+
+  const setValue = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      setStoredValue((prev) => {
+        const next = value instanceof Function ? value(prev) : value;
+        localStorage.setItem(key, JSON.stringify(next));
+        return next;
+      });
+    },
+    [key],
+  );
+
+  const removeValue = useCallback(() => {
+    localStorage.removeItem(key);
+    setStoredValue(initialValue);
+  }, [key, initialValue]);
+
+  return [storedValue, setValue, removeValue];
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useIsMobile(breakpoint = 1024) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+
+  return isMobile;
+}

package/src/hooks/use-page-context.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useRef } from "react";
+import { getPagePrompt } from "@/lib/page-prompts";
+import { trpc } from "@/lib/trpc";
+
+/**
+ * Sends the current page context to the platform whenever the route changes.
+ * Call once in the dashboard layout.
+ */
+export function usePageContext(): void {
+  const pathname = usePathname();
+  const lastPath = useRef<string | null>(null);
+  const { mutate } = trpc.pageContext.update.useMutation();
+
+  useEffect(() => {
+    if (!pathname || pathname === lastPath.current) return;
+    lastPath.current = pathname;
+
+    const pagePrompt = getPagePrompt(pathname);
+    mutate({ currentPage: pathname, pagePrompt });
+  }, [pathname, mutate]);
+}

package/src/hooks/use-pagination-params.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+
+export function usePaginationParams(pageSize = 20) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const raw = searchParams.get("page");
+  const page = raw ? Math.max(1, parseInt(raw, 10) || 1) : 1;
+  const offset = (page - 1) * pageSize;
+
+  const setPage = useCallback(
+    (newPage: number) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (newPage <= 1) {
+        params.delete("page");
+      } else {
+        params.set("page", String(newPage));
+      }
+      const qs = params.toString();
+      router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+    },
+    [router, pathname, searchParams],
+  );
+
+  return { page, setPage, offset } as const;
+}

package/src/hooks/use-plugin-registry.ts

@@ -0,0 +1,247 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  additionalModels,
+  allModels,
+  type ByokProvider,
+  byokProviders,
+  channelPlugins,
+  collectConfigFields,
+  getChannelPlugins,
+  getOptionalPlugins,
+  getProviderPlugins,
+  heroModels,
+  MODEL_COUNT,
+  type ModelOption,
+  type OnboardingConfigField,
+  type Personality,
+  type PluginCategory,
+  type PluginOption,
+  type Preset,
+  personalities,
+  pluginCategories,
+  presets,
+  providerPlugins,
+  resolveDependencies,
+  type Superpower,
+  superpowers,
+  validateField,
+} from "@/lib/onboarding-data";
+
+// Re-export types so consumers only need one import source
+export type {
+  PluginOption,
+  PluginCategory,
+  Superpower,
+  Personality,
+  Preset,
+  ModelOption,
+  ByokProvider,
+  OnboardingConfigField,
+};
+
+/**
+ * Derived data useful for the create-instance page and other consumers
+ * that need simple {value, label} lists of plugins.
+ */
+export interface SimpleOption {
+  value: string;
+  label: string;
+}
+
+export interface PluginRegistry {
+  /** All channel plugins (Discord, Slack, Telegram, etc.) */
+  channels: PluginOption[];
+  /** All AI provider plugins (Anthropic, OpenAI, etc.) */
+  providers: PluginOption[];
+  /** Optional plugin categories (Memory, Voice, Integration, UI) */
+  categories: PluginCategory[];
+  /** Superpower definitions (ImageGen, Voice, Memory, Search) */
+  superpowers: Superpower[];
+  /** Personality options */
+  personalities: Personality[];
+  /** Preset configurations */
+  presets: Preset[];
+  /** Hero/featured models */
+  heroModels: ModelOption[];
+  /** Additional models beyond heroes */
+  additionalModels: ModelOption[];
+  /** All models combined */
+  allModels: ModelOption[];
+  /** BYOK provider options */
+  byokProviders: ByokProvider[];
+  /** Total model count label */
+  modelCount: string;
+  /** Whether marketplace channels have been loaded (or failed with fallback) */
+  channelsLoaded: boolean;
+  /** Whether marketplace providers have been loaded (or failed with fallback) */
+  providersLoaded: boolean;
+  /** Whether marketplace categories have been loaded (or failed with fallback) */
+  categoriesLoaded: boolean;
+  /** Whether any data source is still loading */
+  loading: boolean;
+
+  // --- Derived simple lists for create-instance and similar pages ---
+
+  /** Providers as simple {value, label} for select dropdowns */
+  providerOptions: SimpleOption[];
+  /** Channels as simple {value, label} for toggle buttons */
+  channelOptions: SimpleOption[];
+  /** All optional plugins as simple {value, label} for toggle buttons */
+  pluginOptions: SimpleOption[];
+
+  // --- Helper functions ---
+
+  /** Get a flat list of all plugins (channels + providers + category plugins) */
+  getAllPlugins: () => PluginOption[];
+  /** Find a plugin by id from the combined list */
+  getPluginById: (id: string) => PluginOption | undefined;
+  /** Collect config fields for a selection of channels, providers, and plugins */
+  collectConfigFields: (
+    selectedChannels: string[],
+    selectedProviders: string[],
+    selectedPlugins: string[],
+  ) => OnboardingConfigField[];
+  /** Resolve plugin dependencies */
+  resolveDependencies: (
+    selectedChannels: string[],
+    selectedProviders: string[],
+    selectedPlugins: string[],
+  ) => string[];
+  /** Validate a single config field value */
+  validateField: (field: OnboardingConfigField, value: string) => string | null;
+}
+
+/**
+ * Hook that provides plugin data from a single source of truth.
+ *
+ * Currently backed by static data in onboarding-data.ts.
+ * Future: can fetch from an API and fall back to static data.
+ */
+export function usePluginRegistry(): PluginRegistry {
+  const [channels, setChannels] = useState<PluginOption[]>([]);
+  const [channelsLoaded, setChannelsLoaded] = useState(false);
+  const [providers, setProviders] = useState<PluginOption[]>([]);
+  const [providersLoaded, setProvidersLoaded] = useState(false);
+  const [categories, setCategories] = useState<PluginCategory[]>([]);
+  const [categoriesLoaded, setCategoriesLoaded] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    getChannelPlugins()
+      .then((result) => {
+        if (!cancelled) {
+          setChannels(result);
+          setChannelsLoaded(true);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setChannels(channelPlugins);
+          setChannelsLoaded(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    getProviderPlugins()
+      .then((result) => {
+        if (!cancelled) {
+          setProviders(result);
+          setProvidersLoaded(true);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setProviders(providerPlugins);
+          setProvidersLoaded(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    getOptionalPlugins()
+      .then((result) => {
+        if (!cancelled) {
+          setCategories(result);
+          setCategoriesLoaded(true);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setCategories(pluginCategories);
+          setCategoriesLoaded(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const providerOptions = useMemo<SimpleOption[]>(
+    () => providers.map((p) => ({ value: p.id, label: p.name })),
+    [providers],
+  );
+
+  const channelOptions = useMemo<SimpleOption[]>(
+    () => channels.map((c) => ({ value: c.id, label: c.name })),
+    [channels],
+  );
+
+  const pluginOptions = useMemo<SimpleOption[]>(
+    () => categories.flatMap((cat) => cat.plugins.map((p) => ({ value: p.id, label: p.name }))),
+    [categories],
+  );
+
+  const loading = !channelsLoaded || !providersLoaded || !categoriesLoaded;
+
+  return useMemo<PluginRegistry>(
+    () => ({
+      channels,
+      providers,
+      categories,
+      superpowers,
+      personalities,
+      presets,
+      heroModels,
+      additionalModels,
+      allModels,
+      byokProviders,
+      modelCount: MODEL_COUNT,
+      channelsLoaded,
+      providersLoaded,
+      categoriesLoaded,
+      loading,
+      providerOptions,
+      channelOptions,
+      pluginOptions,
+      getAllPlugins: () => [...channels, ...providers, ...categories.flatMap((c) => c.plugins)],
+      getPluginById: (id: string) =>
+        [...channels, ...providers, ...categories.flatMap((c) => c.plugins)].find(
+          (p) => p.id === id,
+        ),
+      collectConfigFields,
+      resolveDependencies,
+      validateField,
+    }),
+    [
+      channels,
+      channelsLoaded,
+      providersLoaded,
+      categoriesLoaded,
+      loading,
+      providers,
+      categories,
+      providerOptions,
+      channelOptions,
+      pluginOptions,
+    ],
+  );
+}