@wopr-network/platform-ui-core 1.0.0

package/src/lib/changeset-types.ts

@@ -0,0 +1,56 @@
+/** Review status for a changeset */
+export type ChangesetReviewStatus = "pending" | "approved" | "rejected" | "changes_requested";
+
+/** Status of the changeset itself */
+export type ChangesetStatus = "open" | "merged" | "closed";
+
+/** A single file change within a changeset */
+export interface ChangesetFile {
+  path: string;
+  status: "added" | "modified" | "deleted" | "renamed";
+  additions: number;
+  deletions: number;
+  /** Only present for renamed files */
+  previousPath?: string;
+  /** Unified diff string; may be null for binary files */
+  patch: string | null;
+}
+
+/** A review on a changeset */
+export interface ChangesetReview {
+  id: string;
+  author: string;
+  status: ChangesetReviewStatus;
+  body: string | null;
+  createdAt: string;
+}
+
+/** A comment on a changeset */
+export interface ChangesetComment {
+  id: string;
+  author: string;
+  body: string;
+  filePath: string | null;
+  lineNumber: number | null;
+  createdAt: string;
+}
+
+/** Full changeset detail response */
+export interface ChangesetDetail {
+  id: string;
+  title: string;
+  description: string | null;
+  status: ChangesetStatus;
+  reviewStatus: ChangesetReviewStatus;
+  author: string;
+  sourceBranch: string;
+  targetBranch: string;
+  createdAt: string;
+  updatedAt: string;
+  mergedAt: string | null;
+  files: ChangesetFile[];
+  reviews: ChangesetReview[];
+  comments: ChangesetComment[];
+  totalAdditions: number;
+  totalDeletions: number;
+}

package/src/lib/channel-manifests.ts

@@ -0,0 +1,50 @@
+// Channel-specific manifest types and lookup functions.
+// The canonical plugin data lives in marketplace-data.ts; this module filters for channels.
+
+import {
+  type ConfigSchemaField,
+  listMarketplacePlugins,
+  type SetupStep as MarketplaceSetupStep,
+  type SetupFlowType,
+} from "./marketplace-data";
+
+export type { SetupFlowType };
+
+// Re-export ConfigSchemaField as ConfigField for backward compat
+export type ConfigField = ConfigSchemaField;
+
+// Re-export SetupStep for backward compat
+export type SetupStep = MarketplaceSetupStep;
+
+export interface ChannelManifest {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  setup: MarketplaceSetupStep[];
+  connectionTest?: {
+    label: string;
+    endpoint: string;
+  };
+}
+
+export async function getChannelManifests(): Promise<ChannelManifest[]> {
+  const plugins = await listMarketplacePlugins();
+  return plugins
+    .filter((m) => m.category === "channel")
+    .map((m) => ({
+      id: m.id,
+      name: m.name,
+      description: m.description,
+      icon: m.icon,
+      color: m.color,
+      setup: m.setup,
+      connectionTest: m.connectionTest,
+    }));
+}
+
+export async function getManifest(pluginId: string): Promise<ChannelManifest | undefined> {
+  const manifests = await getChannelManifests();
+  return manifests.find((m) => m.id === pluginId);
+}

package/src/lib/chat/chat-context.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { createContext, type ReactNode, useContext, useEffect } from "react";
+import { eventName } from "../brand-config";
+import type { ChatActions, ChatMessage, ChatMode } from "./types";
+import { useChat } from "./use-chat";
+
+export interface ChatContextValue extends ChatActions {
+  messages: ChatMessage[];
+  mode: ChatMode;
+  isConnected: boolean;
+  isTyping: boolean;
+  hasUnread: boolean;
+  sessionId: string;
+}
+
+const ChatContext = createContext<ChatContextValue | null>(null);
+
+export function ChatProvider({ children }: { children: ReactNode }) {
+  const chat = useChat();
+
+  // Listen for WebMCP tool call events from the SSE stream
+  const { expand, collapse, fullscreen, sendMessage, showTyping, notify } = chat;
+  useEffect(() => {
+    function handleToolCall(e: Event) {
+      const { tool, args } = (e as CustomEvent).detail;
+      if (tool === "chat.expand") expand();
+      else if (tool === "chat.collapse") collapse();
+      else if (tool === "chat.fullscreen") fullscreen();
+      else if (tool === "chat.sendMessage") sendMessage(args.text as string);
+      else if (tool === "chat.showTyping") {
+        showTyping();
+      } else if (tool === "chat.notify") {
+        notify(args.text as string);
+      }
+    }
+    const evtName = eventName("chat-tool-call");
+    window.addEventListener(evtName, handleToolCall);
+    return () => window.removeEventListener(evtName, handleToolCall);
+  }, [expand, collapse, fullscreen, sendMessage, showTyping, notify]);
+
+  return (
+    <ChatContext.Provider
+      value={{
+        messages: chat.messages,
+        mode: chat.mode,
+        isConnected: chat.isConnected,
+        isTyping: chat.isTyping,
+        hasUnread: chat.hasUnread,
+        sessionId: chat.sessionId,
+        expand: chat.expand,
+        collapse: chat.collapse,
+        fullscreen: chat.fullscreen,
+        sendMessage: chat.sendMessage,
+        addEventMarker: chat.addEventMarker,
+        showTyping: chat.showTyping,
+        notify: chat.notify,
+        clearHistory: chat.clearHistory,
+      }}
+    >
+      {children}
+    </ChatContext.Provider>
+  );
+}
+
+export function useChatContext(): ChatContextValue {
+  const ctx = useContext(ChatContext);
+  if (!ctx) throw new Error("useChatContext must be used within ChatProvider");
+  return ctx;
+}

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

@@ -0,0 +1,62 @@
+import { z } from "zod";
+import { storageKey } from "../brand-config";
+import type { ChatMessage } from "./types";
+
+const HISTORY_KEY = storageKey("chat-history");
+const SESSION_KEY = storageKey("chat-session");
+
+const ChatMessageSchema = z.object({
+  id: z.string(),
+  role: z.enum(["user", "bot", "event"]),
+  content: z.string(),
+  timestamp: z.number(),
+});
+
+export function getSessionId(): string {
+  if (typeof window === "undefined") return "";
+  try {
+    const existing = localStorage.getItem(SESSION_KEY);
+    if (existing) return existing;
+    const id = crypto.randomUUID();
+    localStorage.setItem(SESSION_KEY, id);
+    return id;
+  } catch {
+    // localStorage blocked (private browsing) — use ephemeral session ID
+    return crypto.randomUUID();
+  }
+}
+
+export function loadChatHistory(): ChatMessage[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    const arr = Array.isArray(parsed) ? parsed : [];
+    return arr.flatMap((item) => {
+      const result = ChatMessageSchema.safeParse(item);
+      return result.success ? [result.data] : [];
+    });
+  } catch {
+    // ignore — malformed JSON
+  }
+  return [];
+}
+
+export function saveChatHistory(messages: ChatMessage[]): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(messages));
+  } catch {
+    // ignore
+  }
+}
+
+export function clearChatHistory(): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(HISTORY_KEY);
+  } catch {
+    // ignore
+  }
+}

package/src/lib/chat/types.ts

@@ -0,0 +1,35 @@
+export type ChatEvent =
+  | { type: "text"; delta: string }
+  | { type: "tool_call"; tool: string; args: Record<string, unknown> }
+  | { type: "error"; message: string }
+  | { type: "done" };
+
+export type ChatMode = "collapsed" | "expanded" | "fullscreen";
+export type MessageRole = "user" | "bot" | "event";
+
+export interface ChatMessage {
+  id: string;
+  role: MessageRole;
+  content: string;
+  timestamp: number;
+}
+
+export interface ChatState {
+  mode: ChatMode;
+  messages: ChatMessage[];
+  sessionId: string;
+  isConnected: boolean;
+  isTyping: boolean;
+  hasUnread: boolean;
+}
+
+export interface ChatActions {
+  expand: () => void;
+  collapse: () => void;
+  fullscreen: () => void;
+  sendMessage: (text: string) => void;
+  addEventMarker: (text: string) => void;
+  showTyping: () => void;
+  notify: (text: string) => void;
+  clearHistory: () => void;
+}

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

@@ -0,0 +1,255 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { openChatStream, sendChatMessage } from "@/lib/api";
+import { eventName } from "@/lib/brand-config";
+import { clearChatHistory, getSessionId, loadChatHistory, saveChatHistory } from "./chat-store";
+import type { ChatEvent, ChatMessage, ChatMode } from "./types";
+
+/** Minimal interface for stream handles that support cleanup via .close(). */
+interface Closeable {
+  close(): void;
+}
+
+interface UseChatReturn {
+  messages: ChatMessage[];
+  mode: ChatMode;
+  isConnected: boolean;
+  isTyping: boolean;
+  hasUnread: boolean;
+  sessionId: string;
+  sendMessage: (text: string) => void;
+  addEventMarker: (text: string) => void;
+  showTyping: () => void;
+  notify: (text: string) => void;
+  expand: () => void;
+  collapse: () => void;
+  fullscreen: () => void;
+  clearHistory: () => void;
+}
+
+export function useChat(): UseChatReturn {
+  const [messages, setMessages] = useState<ChatMessage[]>(() => loadChatHistory());
+  const [mode, setMode] = useState<ChatMode>("collapsed");
+  const modeRef = useRef<ChatMode>("collapsed");
+  const [isConnected, setIsConnected] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const [hasUnread, setHasUnread] = useState(false);
+  const sessionId = useRef(getSessionId());
+  const eventSourceRef = useRef<Closeable | null>(null);
+  const pendingBotMsgRef = useRef<string | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const reconnectDelayRef = useRef(1000);
+
+  // Keep modeRef in sync for use inside callbacks
+  useEffect(() => {
+    modeRef.current = mode;
+  }, [mode]);
+
+  // Persist messages on change
+  useEffect(() => {
+    saveChatHistory(messages);
+  }, [messages]);
+
+  const addMessage = useCallback((msg: ChatMessage) => {
+    setMessages((prev) => [...prev, msg]);
+  }, []);
+
+  const connectSSE = useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const abortController = new AbortController();
+    eventSourceRef.current = {
+      close: () => abortController.abort(),
+    };
+
+    const processLine = (line: string) => {
+      if (!line.startsWith("data:")) return;
+      const raw = line.slice(5).trim();
+      if (!raw) return;
+      try {
+        const data = JSON.parse(raw) as ChatEvent;
+
+        if (data.type === "text") {
+          setIsTyping(true);
+          if (pendingBotMsgRef.current === null) {
+            pendingBotMsgRef.current = crypto.randomUUID();
+          }
+          const msgId = pendingBotMsgRef.current;
+          setMessages((prev) => {
+            const existing = prev.find((m) => m.id === msgId);
+            if (existing) {
+              return prev.map((m) =>
+                m.id === msgId ? { ...m, content: m.content + data.delta } : m,
+              );
+            }
+            return [
+              ...prev,
+              { id: msgId, role: "bot" as const, content: data.delta, timestamp: Date.now() },
+            ];
+          });
+        } else if (data.type === "tool_call") {
+          window.dispatchEvent(
+            new CustomEvent(eventName("chat-tool-call"), {
+              detail: { tool: data.tool, args: data.args },
+            }),
+          );
+        } else if (data.type === "done") {
+          setIsTyping(false);
+          pendingBotMsgRef.current = null;
+          if (modeRef.current === "collapsed") setHasUnread(true);
+        } else if (data.type === "error") {
+          setIsTyping(false);
+          pendingBotMsgRef.current = null;
+          addMessage({
+            id: crypto.randomUUID(),
+            role: "bot",
+            content: `Error: ${data.message}`,
+            timestamp: Date.now(),
+          });
+        }
+      } catch {
+        // ignore malformed events
+      }
+    };
+
+    openChatStream(sessionId.current, abortController.signal)
+      .then(async (res) => {
+        if (!res.ok || !res.body) throw new Error("SSE connection failed");
+        setIsConnected(true);
+        reconnectDelayRef.current = 1000;
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            processLine(line);
+          }
+        }
+      })
+      .catch((err) => {
+        if ((err as Error).name === "AbortError") return;
+        setIsConnected(false);
+        eventSourceRef.current = null;
+
+        const delay = reconnectDelayRef.current;
+        reconnectDelayRef.current = Math.min(delay * 2, 10000);
+        reconnectTimeoutRef.current = setTimeout(connectSSE, delay);
+      });
+  }, [addMessage]);
+
+  // Connect on mount
+  useEffect(() => {
+    connectSSE();
+    return () => {
+      eventSourceRef.current?.close();
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+    };
+  }, [connectSSE]);
+
+  const sendMessage = useCallback(
+    (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed) return;
+
+      const userMsg: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: trimmed,
+        timestamp: Date.now(),
+      };
+      addMessage(userMsg);
+      setIsTyping(true);
+
+      // POST to chat API
+      sendChatMessage(sessionId.current, trimmed).catch(() => {
+        setIsTyping(false);
+        addMessage({
+          id: crypto.randomUUID(),
+          role: "bot",
+          content: "Sorry, your message could not be sent. Please try again.",
+          timestamp: Date.now(),
+        });
+      });
+    },
+    [addMessage],
+  );
+
+  const addEventMarker = useCallback(
+    (text: string) => {
+      addMessage({
+        id: crypto.randomUUID(),
+        role: "event",
+        content: text,
+        timestamp: Date.now(),
+      });
+    },
+    [addMessage],
+  );
+
+  const expand = useCallback(() => {
+    setMode("expanded");
+    setHasUnread(false);
+  }, []);
+
+  const collapse = useCallback(() => {
+    setMode("collapsed");
+  }, []);
+
+  const fullscreen = useCallback(() => {
+    setMode("fullscreen");
+    setHasUnread(false);
+  }, []);
+
+  const clearHistoryFn = useCallback(() => {
+    setMessages([]);
+    setIsTyping(false);
+    pendingBotMsgRef.current = null;
+    clearChatHistory();
+  }, []);
+
+  const showTyping = useCallback(() => {
+    setIsTyping(true);
+  }, []);
+
+  const notify = useCallback(
+    (text: string) => {
+      addMessage({
+        id: crypto.randomUUID(),
+        role: "bot",
+        content: text,
+        timestamp: Date.now(),
+      });
+    },
+    [addMessage],
+  );
+
+  return {
+    messages,
+    mode,
+    isConnected,
+    isTyping,
+    hasUnread,
+    sessionId: sessionId.current,
+    sendMessage,
+    addEventMarker,
+    showTyping,
+    notify,
+    expand,
+    collapse,
+    fullscreen,
+    clearHistory: clearHistoryFn,
+  };
+}

package/src/lib/cost-comparison-data.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import { buildCostComparison, DIY_COSTS } from "./cost-comparison-data";
+
+describe("DIY_COSTS", () => {
+  it("contains items derived from channelPlugins and superpowers with diyCostData", () => {
+    expect(DIY_COSTS.length).toBeGreaterThan(0);
+    for (const item of DIY_COSTS) {
+      expect(item).toHaveProperty("capabilityId");
+      expect(typeof item.capabilityId).toBe("string");
+      expect(item).toHaveProperty("diyLabel");
+      expect(item).toHaveProperty("diyCostPerMonth");
+      expect(typeof item.diyCostNumeric).toBe("number");
+      expect(Array.isArray(item.accounts)).toBe(true);
+      expect(Array.isArray(item.apiKeys)).toBe(true);
+    }
+  });
+
+  it("each capabilityId is unique", () => {
+    const ids = DIY_COSTS.map((c) => c.capabilityId);
+    expect(ids.length).toBe(new Set(ids).size);
+  });
+});
+
+describe("buildCostComparison", () => {
+  it("returns empty summary when no capabilities are selected", () => {
+    const result = buildCostComparison([], []);
+    expect(result.items).toEqual([]);
+    expect(result.totalDiyMonthly).toBe("$0");
+    expect(result.totalPlatformMonthly).toBe("$5");
+    expect(result.accountsRequired).toBe(0);
+    expect(result.apiKeysRequired).toBe(0);
+  });
+
+  it("filters items to only selected channels and superpowers", () => {
+    const knownItem = DIY_COSTS[0];
+    if (!knownItem) return;
+
+    const result = buildCostComparison([knownItem.capabilityId], []);
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0].capabilityId).toBe(knownItem.capabilityId);
+  });
+
+  it("accepts superpowers in the second argument", () => {
+    const superItem = DIY_COSTS.find((c) =>
+      ["image-gen", "video-gen", "voice"].includes(c.capabilityId),
+    );
+    if (!superItem) return;
+
+    const result = buildCostComparison([], [superItem.capabilityId]);
+    expect(result.items).toHaveLength(1);
+    expect(result.items[0].capabilityId).toBe(superItem.capabilityId);
+  });
+
+  it("sums diyCostNumeric and formats as dollars with + suffix", () => {
+    // image-gen (3000 cents) + voice (1500 cents) = 4500 cents = $45
+    const result = buildCostComparison([], ["image-gen", "voice"]);
+    expect(result.totalDiyMonthly).toBe("$45+");
+    expect(result.totalPlatformMonthly).toBe("$5");
+  });
+
+  it("deduplicates accounts across items sharing the same provider", () => {
+    // image-gen and video-gen both require "Replicate" account
+    const result = buildCostComparison([], ["image-gen", "video-gen"]);
+    expect(result.accountsRequired).toBe(1);
+  });
+
+  it("deduplicates apiKeys across items sharing the same key", () => {
+    // image-gen and video-gen both require "Replicate API Token"
+    const result = buildCostComparison([], ["image-gen", "video-gen"]);
+    expect(result.apiKeysRequired).toBe(1);
+  });
+
+  it("counts distinct accounts when items use different providers", () => {
+    // image-gen (Replicate) + voice (ElevenLabs) = 2 accounts
+    const result = buildCostComparison([], ["image-gen", "voice"]);
+    expect(result.accountsRequired).toBe(2);
+    expect(result.apiKeysRequired).toBe(2);
+  });
+
+  it("ignores IDs that have no matching DIY_COSTS entry", () => {
+    const result = buildCostComparison(["nonexistent-channel"], ["nonexistent-super"]);
+    expect(result.items).toEqual([]);
+    expect(result.totalDiyMonthly).toBe("$0");
+  });
+
+  it("combines channels and superpowers in a single result", () => {
+    // Find a channel with cost data (not a superpower)
+    const superpowerIds = ["image-gen", "video-gen", "voice", "memory", "search", "text-gen"];
+    const channelItem = DIY_COSTS.find((c) => !superpowerIds.includes(c.capabilityId));
+    if (!channelItem) return;
+
+    const result = buildCostComparison([channelItem.capabilityId], ["image-gen"]);
+    expect(result.items).toHaveLength(2);
+  });
+});

package/src/lib/cost-comparison-data.ts

@@ -0,0 +1,54 @@
+import { getBrandConfig } from "./brand-config";
+import type { DiyCostData } from "./onboarding-data";
+import { channelPlugins, superpowers } from "./onboarding-data";
+
+export interface DiyCostItem extends DiyCostData {
+  capabilityId: string;
+}
+
+export interface CostComparisonSummary {
+  items: DiyCostItem[];
+  totalDiyMonthly: string;
+  totalPlatformMonthly: string;
+  accountsRequired: number;
+  apiKeysRequired: number;
+}
+
+// Derived entirely from the capability registries — no parallel map needed.
+// Adding diyCostData to a channelPlugin or superpower automatically includes it here.
+export const DIY_COSTS: DiyCostItem[] = [
+  ...channelPlugins
+    .filter((c): c is typeof c & { diyCostData: DiyCostData } => c.diyCostData != null)
+    .map((c) => ({ capabilityId: c.id, ...c.diyCostData })),
+  ...superpowers
+    .filter((s): s is typeof s & { diyCostData: DiyCostData } => s.diyCostData != null)
+    .map((s) => ({ capabilityId: s.id, ...s.diyCostData })),
+];
+
+export function buildCostComparison(
+  selectedChannels: string[],
+  selectedSuperpowers: string[],
+): CostComparisonSummary {
+  const selectedIds = new Set([...selectedChannels, ...selectedSuperpowers]);
+  const items = DIY_COSTS.filter((c) => selectedIds.has(c.capabilityId));
+
+  const allAccounts = new Set<string>();
+  const allApiKeys = new Set<string>();
+  let totalDiyCents = 0;
+
+  for (const item of items) {
+    for (const acc of item.accounts) allAccounts.add(acc);
+    for (const key of item.apiKeys) allApiKeys.add(key);
+    totalDiyCents += item.diyCostNumeric;
+  }
+
+  const totalDiy = totalDiyCents / 100;
+
+  return {
+    items,
+    totalDiyMonthly: totalDiy > 0 ? `$${totalDiy}+` : "$0",
+    totalPlatformMonthly: getBrandConfig().price || "$5",
+    accountsRequired: allAccounts.size,
+    apiKeysRequired: allApiKeys.size,
+  };
+}