@chaaskit/client 0.1.0

package/dist/lib/useExtensions-B5nX_8XD.js

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { useCallback, useSyncExternalStore } from "react";
+class ClientExtensionRegistry {
+  constructor() {
+    __publicField(this, "pages", /* @__PURE__ */ new Map());
+    __publicField(this, "tools", /* @__PURE__ */ new Map());
+    __publicField(this, "overrides", /* @__PURE__ */ new Map());
+    __publicField(this, "listeners", /* @__PURE__ */ new Set());
+    // Cached arrays for useSyncExternalStore compatibility
+    // These are only updated when the underlying data changes
+    __publicField(this, "cachedPages", []);
+    __publicField(this, "cachedSidebarPages", []);
+    __publicField(this, "cachedTools", []);
+  }
+  /**
+   * Register a custom page
+   */
+  registerPage(page) {
+    this.pages.set(page.id, page);
+    this.invalidateCaches();
+    this.notifyListeners();
+  }
+  /**
+   * Unregister a custom page
+   */
+  unregisterPage(id) {
+    const result = this.pages.delete(id);
+    if (result) {
+      this.invalidateCaches();
+      this.notifyListeners();
+    }
+    return result;
+  }
+  /**
+   * Get all registered pages
+   * Returns a cached array for useSyncExternalStore compatibility
+   */
+  getPages() {
+    return this.cachedPages;
+  }
+  /**
+   * Get pages that should appear in the sidebar
+   * Returns a cached array for useSyncExternalStore compatibility
+   */
+  getSidebarPages() {
+    return this.cachedSidebarPages;
+  }
+  /**
+   * Register a custom tool renderer
+   */
+  registerTool(tool) {
+    this.tools.set(tool.name, tool);
+    this.invalidateCaches();
+    this.notifyListeners();
+  }
+  /**
+   * Unregister a tool renderer
+   */
+  unregisterTool(name) {
+    const result = this.tools.delete(name);
+    if (result) {
+      this.invalidateCaches();
+      this.notifyListeners();
+    }
+    return result;
+  }
+  /**
+   * Get all registered tools
+   * Returns a cached array for useSyncExternalStore compatibility
+   */
+  getTools() {
+    return this.cachedTools;
+  }
+  /**
+   * Get a specific tool by name
+   */
+  getTool(name) {
+    return this.tools.get(name);
+  }
+  /**
+   * Register a component override
+   */
+  registerOverride(override) {
+    this.overrides.set(override.slot, override);
+    this.notifyListeners();
+  }
+  /**
+   * Get a component override for a slot
+   */
+  getOverride(slot) {
+    return this.overrides.get(slot);
+  }
+  /**
+   * Subscribe to registry changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  invalidateCaches() {
+    this.cachedPages = Array.from(this.pages.values());
+    this.cachedSidebarPages = this.cachedPages.filter((p) => p.showInSidebar);
+    this.cachedTools = Array.from(this.tools.values());
+  }
+  notifyListeners() {
+    this.listeners.forEach((listener) => listener());
+  }
+  /**
+   * Clear all registered extensions
+   */
+  clear() {
+    this.pages.clear();
+    this.tools.clear();
+    this.overrides.clear();
+    this.invalidateCaches();
+    this.notifyListeners();
+  }
+}
+const clientRegistry = new ClientExtensionRegistry();
+function useExtensionPages() {
+  const getSnapshot = useCallback(() => clientRegistry.getPages(), []);
+  const subscribe = useCallback((callback) => clientRegistry.subscribe(callback), []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useSidebarPages() {
+  const getSnapshot = useCallback(() => clientRegistry.getSidebarPages(), []);
+  const subscribe = useCallback((callback) => clientRegistry.subscribe(callback), []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useExtensionTools() {
+  const getSnapshot = useCallback(() => clientRegistry.getTools(), []);
+  const subscribe = useCallback((callback) => clientRegistry.subscribe(callback), []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useToolRenderer(toolName) {
+  const getSnapshot = useCallback(() => clientRegistry.getTool(toolName), [toolName]);
+  const subscribe = useCallback((callback) => clientRegistry.subscribe(callback), []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useComponentOverride(slot) {
+  const getSnapshot = useCallback(() => clientRegistry.getOverride(slot), [slot]);
+  const subscribe = useCallback((callback) => clientRegistry.subscribe(callback), []);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export {
+  useSidebarPages as a,
+  useExtensionTools as b,
+  clientRegistry as c,
+  useToolRenderer as d,
+  useComponentOverride as e,
+  useExtensionPages as u
+};
+//# sourceMappingURL=useExtensions-B5nX_8XD.js.map

package/dist/lib/useExtensions-B5nX_8XD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExtensions-B5nX_8XD.js","sources":["../../src/extensions/registry.ts","../../src/extensions/useExtensions.ts"],"sourcesContent":["import type { ComponentType } from 'react';\n\n/**\n * Page extension configuration\n */\nexport interface PageExtension {\n  /** Unique identifier for the page */\n  id: string;\n  /** URL path for the page (e.g., \"/analytics\") */\n  path: string;\n  /** Display label for navigation */\n  label: string;\n  /** Optional icon name from lucide-react */\n  icon?: string;\n  /** React component to render for this page */\n  component: ComponentType;\n  /** Whether to show in the sidebar navigation */\n  showInSidebar?: boolean;\n  /** Whether this page requires authentication */\n  requiresAuth?: boolean;\n  /** Whether this page requires admin access */\n  requiresAdmin?: boolean;\n}\n\n/**\n * Tool result renderer extension\n */\nexport interface ToolExtension {\n  /** Tool name to match */\n  name: string;\n  /** Description of the tool */\n  description: string;\n  /** Custom renderer for tool results */\n  resultRenderer?: ComponentType<{ result: unknown }>;\n}\n\n/**\n * Component override extension\n */\nexport interface ComponentOverride {\n  /** Component slot to override */\n  slot: 'header' | 'footer' | 'sidebar-header' | 'sidebar-footer' | 'message-actions';\n  /** Component to render in the slot */\n  component: ComponentType<Record<string, unknown>>;\n}\n\n/**\n * Client-side extension registry for customizing the ChaasKit UI\n *\n * Note: getPages(), getSidebarPages(), and getTools() cache their results\n * to support React's useSyncExternalStore which requires stable references.\n */\nclass ClientExtensionRegistry {\n  private pages: Map<string, PageExtension> = new Map();\n  private tools: Map<string, ToolExtension> = new Map();\n  private overrides: Map<string, ComponentOverride> = new Map();\n  private listeners: Set<() => void> = new Set();\n\n  // Cached arrays for useSyncExternalStore compatibility\n  // These are only updated when the underlying data changes\n  private cachedPages: PageExtension[] = [];\n  private cachedSidebarPages: PageExtension[] = [];\n  private cachedTools: ToolExtension[] = [];\n\n  /**\n   * Register a custom page\n   */\n  registerPage(page: PageExtension): void {\n    this.pages.set(page.id, page);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a custom page\n   */\n  unregisterPage(id: string): boolean {\n    const result = this.pages.delete(id);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered pages\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getPages(): PageExtension[] {\n    return this.cachedPages;\n  }\n\n  /**\n   * Get pages that should appear in the sidebar\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getSidebarPages(): PageExtension[] {\n    return this.cachedSidebarPages;\n  }\n\n  /**\n   * Register a custom tool renderer\n   */\n  registerTool(tool: ToolExtension): void {\n    this.tools.set(tool.name, tool);\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n\n  /**\n   * Unregister a tool renderer\n   */\n  unregisterTool(name: string): boolean {\n    const result = this.tools.delete(name);\n    if (result) {\n      this.invalidateCaches();\n      this.notifyListeners();\n    }\n    return result;\n  }\n\n  /**\n   * Get all registered tools\n   * Returns a cached array for useSyncExternalStore compatibility\n   */\n  getTools(): ToolExtension[] {\n    return this.cachedTools;\n  }\n\n  /**\n   * Get a specific tool by name\n   */\n  getTool(name: string): ToolExtension | undefined {\n    return this.tools.get(name);\n  }\n\n  /**\n   * Register a component override\n   */\n  registerOverride(override: ComponentOverride): void {\n    this.overrides.set(override.slot, override);\n    this.notifyListeners();\n  }\n\n  /**\n   * Get a component override for a slot\n   */\n  getOverride(slot: string): ComponentOverride | undefined {\n    return this.overrides.get(slot);\n  }\n\n  /**\n   * Subscribe to registry changes\n   */\n  subscribe(listener: () => void): () => void {\n    this.listeners.add(listener);\n    return () => this.listeners.delete(listener);\n  }\n\n  private invalidateCaches(): void {\n    this.cachedPages = Array.from(this.pages.values());\n    this.cachedSidebarPages = this.cachedPages.filter(p => p.showInSidebar);\n    this.cachedTools = Array.from(this.tools.values());\n  }\n\n  private notifyListeners(): void {\n    this.listeners.forEach(listener => listener());\n  }\n\n  /**\n   * Clear all registered extensions\n   */\n  clear(): void {\n    this.pages.clear();\n    this.tools.clear();\n    this.overrides.clear();\n    this.invalidateCaches();\n    this.notifyListeners();\n  }\n}\n\n// Singleton instance\nexport const clientRegistry = new ClientExtensionRegistry();\n\n// Export for use in user extensions\nexport default clientRegistry;\n","import { useSyncExternalStore, useCallback } from 'react';\nimport { clientRegistry, type PageExtension, type ToolExtension, type ComponentOverride } from './registry';\n\n/**\n * Hook to access extension pages with automatic updates\n */\nexport function useExtensionPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access sidebar pages with automatic updates\n */\nexport function useSidebarPages(): PageExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getSidebarPages(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to access extension tools with automatic updates\n */\nexport function useExtensionTools(): ToolExtension[] {\n  const getSnapshot = useCallback(() => clientRegistry.getTools(), []);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a specific tool renderer\n */\nexport function useToolRenderer(toolName: string): ToolExtension | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getTool(toolName), [toolName]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n\n/**\n * Hook to get a component override\n */\nexport function useComponentOverride(slot: string): ComponentOverride | undefined {\n  const getSnapshot = useCallback(() => clientRegistry.getOverride(slot), [slot]);\n  const subscribe = useCallback((callback: () => void) => clientRegistry.subscribe(callback), []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":"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"}

package/dist/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <defs>
+    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1"/>
+      <stop offset="100%" style="stop-color:#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <rect width="100" height="100" rx="20" fill="url(#gradient)"/>
+  <path d="M30 35 L50 25 L70 35 L70 55 L50 65 L30 55 Z" fill="none" stroke="white" stroke-width="3" stroke-linejoin="round"/>
+  <circle cx="50" cy="45" r="8" fill="white"/>
+  <path d="M35 70 Q50 78 65 70" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@chaaskit/client",
+  "version": "0.1.0",
+  "description": "React frontend client for ChaasKit AI chat applications",
+  "license": "MIT",
+  "author": "Matt Ferrante <@ferrants>",
+  "homepage": "https://chaaskit.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ferrants/chaaskit.git",
+    "directory": "packages/client"
+  },
+  "bugs": {
+    "url": "https://github.com/ferrants/chaaskit/issues"
+  },
+  "keywords": ["chaaskit", "ai", "chat", "saas", "client", "react", "vite"],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "import": "./dist/lib/index.js"
+    },
+    "./extensions": {
+      "types": "./src/extensions/index.ts",
+      "import": "./dist/lib/extensions.js"
+    },
+    "./ssr": {
+      "types": "./src/ssr.ts",
+      "import": "./dist/lib/ssr.js"
+    },
+    "./ssr-utils": {
+      "types": "./src/ssr-utils.tsx",
+      "import": "./dist/lib/ssr-utils.js"
+    },
+    "./routes": {
+      "types": "./src/routes/index.ts",
+      "import": "./dist/lib/routes.js"
+    },
+    "./routes/*": {
+      "types": "./src/routes/*.tsx",
+      "import": "./dist/lib/routes/*.js"
+    },
+    "./styles": "./dist/lib/styles.css",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite --host",
+    "build": "tsc && vite build --config vite.config.lib.ts",
+    "build:lib": "vite build --config vite.config.lib.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@chaaskit/shared": "^0.1.0",
+    "lucide-react": "^0.321.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-syntax-highlighter": "^15.5.11",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^7.0.0"
+  }
+}

package/src/components/AgentSelector.tsx

@@ -0,0 +1,90 @@
+import { ChevronDown, Bot } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { useChatStore, type AgentInfo } from '../stores/chatStore';
+
+interface AgentSelectorProps {
+  className?: string;
+}
+
+export default function AgentSelector({ className = '' }: AgentSelectorProps) {
+  const { availableAgents, selectedAgentId, setSelectedAgentId, isLoadingAgents } = useChatStore();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Don't show if only one agent or no agents
+  if (availableAgents.length <= 1) {
+    return null;
+  }
+
+  const selectedAgent = availableAgents.find((a) => a.id === selectedAgentId) || availableAgents[0];
+
+  function handleSelect(agent: AgentInfo) {
+    setSelectedAgentId(agent.id);
+    setIsOpen(false);
+  }
+
+  if (isLoadingAgents) {
+    return (
+      <div className={`flex items-center gap-2 text-sm text-text-muted ${className}`}>
+        <Bot size={16} />
+        <span>Loading agents...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 rounded-lg border border-border bg-background-secondary px-3 py-2 text-sm text-text-primary hover:border-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/20"
+      >
+        <Bot size={16} className="text-text-secondary" />
+        <span className="max-w-[150px] truncate">{selectedAgent?.name || 'Select agent'}</span>
+        <ChevronDown
+          size={16}
+          className={`text-text-secondary transition-transform ${isOpen ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 top-full z-50 mt-1 min-w-[200px] rounded-lg border border-border bg-background shadow-lg">
+          <div className="max-h-[300px] overflow-y-auto py-1">
+            {availableAgents.map((agent) => (
+              <button
+                key={agent.id}
+                type="button"
+                onClick={() => handleSelect(agent)}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-background-secondary ${
+                  agent.id === selectedAgentId
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-text-primary'
+                }`}
+              >
+                <Bot size={16} className={agent.id === selectedAgentId ? 'text-primary' : 'text-text-secondary'} />
+                <span className="flex-1">{agent.name}</span>
+                {agent.isDefault && (
+                  <span className="rounded bg-background-secondary px-1.5 py-0.5 text-xs text-text-muted">
+                    Default
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/BranchModal.tsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import { X, GitBranch, Loader2 } from 'lucide-react';
+
+interface BranchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onBranch: (content?: string) => Promise<void>;
+  messagePreview: string;
+  initialContent?: string;
+}
+
+export default function BranchModal({ isOpen, onClose, onBranch, messagePreview, initialContent = '' }: BranchModalProps) {
+  const [content, setContent] = useState(initialContent);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Update content when modal opens with new initialContent
+  useEffect(() => {
+    if (isOpen) {
+      setContent(initialContent);
+    }
+  }, [isOpen, initialContent]);
+
+  if (!isOpen) return null;
+
+  async function handleBranch() {
+    setIsLoading(true);
+    try {
+      await onBranch(content || undefined);
+      setContent('');
+      onClose();
+    } catch (error) {
+      console.error('Failed to create branch:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter' && e.metaKey) {
+      handleBranch();
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg rounded-lg bg-background border border-border shadow-xl">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border p-4">
+          <div className="flex items-center gap-2">
+            <GitBranch size={20} className="text-primary" />
+            <h2 className="text-lg font-semibold text-text-primary">Branch Conversation</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-text-muted hover:bg-background-secondary hover:text-text-primary"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-4 space-y-4">
+          {/* Message preview */}
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              Branch from this response:
+            </label>
+            <div className="rounded-lg bg-background-secondary p-3 text-sm text-text-secondary max-h-24 overflow-y-auto">
+              {messagePreview}
+            </div>
+          </div>
+
+          {/* Explanation */}
+          <p className="text-sm text-text-muted">
+            {initialContent
+              ? 'Edit your message below and send it to create a new branch exploring a different direction.'
+              : 'This will create a new conversation branch from this point. Optionally add a new message to continue in a different direction.'}
+          </p>
+
+          {/* New message input */}
+          <div>
+            <label className="block text-sm font-medium text-text-secondary mb-2">
+              {initialContent ? 'Your message:' : 'Add a new message (optional):'}
+            </label>
+            <textarea
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={initialContent ? 'Edit your message...' : 'Ask a different question or take the conversation in a new direction...'}
+              className="w-full rounded-lg border border-border bg-background p-3 text-sm text-text-primary placeholder-text-muted focus:border-primary focus:outline-none resize-none"
+              rows={3}
+              autoFocus={Boolean(initialContent)}
+            />
+            <p className="mt-1 text-xs text-text-muted">
+              Press <kbd className="px-1 py-0.5 bg-background-secondary rounded text-text-secondary">⌘</kbd> + <kbd className="px-1 py-0.5 bg-background-secondary rounded text-text-secondary">Enter</kbd> to branch
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 border-t border-border p-4">
+          <button
+            onClick={onClose}
+            className="rounded-lg px-4 py-2 text-sm font-medium text-text-secondary hover:bg-background-secondary"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleBranch}
+            disabled={isLoading}
+            className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover disabled:opacity-50"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 size={16} className="animate-spin" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <GitBranch size={16} />
+                Create Branch
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ClientOnly.tsx

@@ -0,0 +1,27 @@
+import { useState, useEffect, type ReactNode } from 'react';
+
+interface ClientOnlyProps {
+  children: () => ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * Renders children only on the client after hydration.
+ * Use this for components that rely on browser APIs or client-side state.
+ *
+ * @example
+ * ```tsx
+ * <ClientOnly fallback={<LoadingSkeleton />}>
+ *   {() => <ChatApp />}
+ * </ClientOnly>
+ * ```
+ */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted ? <>{children()}</> : <>{fallback}</>;
+}

package/src/components/ExportMenu.tsx

@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Download, FileText, FileJson, FileType, X } from 'lucide-react';
+
+interface ExportMenuProps {
+  threadId: string;
+  threadTitle: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ExportMenu({ threadId, threadTitle, isOpen, onClose }: ExportMenuProps) {
+  const [isExporting, setIsExporting] = useState<string | null>(null);
+
+  async function handleExport(format: 'markdown' | 'json' | 'pdf') {
+    setIsExporting(format);
+    try {
+      const response = await fetch(`/api/export/${threadId}?format=${format}`, {
+        credentials: 'include',
+      });
+
+      if (!response.ok) {
+        throw new Error('Export failed');
+      }
+
+      // Get the blob and create download
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+
+      // Set filename based on format
+      const ext = format === 'pdf' ? 'html' : format === 'markdown' ? 'md' : 'json';
+      a.download = `${threadTitle}.${ext}`;
+
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      onClose();
+    } catch (error) {
+      console.error('Export failed:', error);
+    } finally {
+      setIsExporting(null);
+    }
+  }
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-sm rounded-xl bg-background p-4 shadow-2xl">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-text-primary">Export Conversation</h3>
+          <button
+            onClick={onClose}
+            className="rounded p-1 text-text-muted hover:bg-background-secondary hover:text-text-primary"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <p className="mb-4 text-sm text-text-secondary">
+          Choose a format to export "{threadTitle}"
+        </p>
+
+        <div className="space-y-2">
+          <button
+            onClick={() => handleExport('markdown')}
+            disabled={isExporting !== null}
+            className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left hover:bg-background-secondary disabled:opacity-50"
+          >
+            <FileText size={20} className="text-text-muted" />
+            <div className="flex-1">
+              <p className="font-medium text-text-primary">Markdown</p>
+              <p className="text-xs text-text-muted">Best for documentation and notes</p>
+            </div>
+            {isExporting === 'markdown' && (
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            )}
+          </button>
+
+          <button
+            onClick={() => handleExport('json')}
+            disabled={isExporting !== null}
+            className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left hover:bg-background-secondary disabled:opacity-50"
+          >
+            <FileJson size={20} className="text-text-muted" />
+            <div className="flex-1">
+              <p className="font-medium text-text-primary">JSON</p>
+              <p className="text-xs text-text-muted">Machine-readable, includes metadata</p>
+            </div>
+            {isExporting === 'json' && (
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            )}
+          </button>
+
+          <button
+            onClick={() => handleExport('pdf')}
+            disabled={isExporting !== null}
+            className="flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3 text-left hover:bg-background-secondary disabled:opacity-50"
+          >
+            <FileType size={20} className="text-text-muted" />
+            <div className="flex-1">
+              <p className="font-medium text-text-primary">HTML (Print to PDF)</p>
+              <p className="text-xs text-text-muted">Formatted for printing</p>
+            </div>
+            {isExporting === 'pdf' && (
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}