fireworks-ai 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dan Leeper
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,320 @@
+# fireworks-ai
+
+A React + Hono toolkit for building chat UIs on top of the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk). Tool calls, text deltas, and results are individual sparks — fireworks-ai launches them into a unified, vivid display.
+
+## Why fireworks-ai
+
+The Claude Agent SDK gives you a powerful agentic loop — but it's a server-side `AsyncGenerator` with no opinion on how to get those events to a browser. fireworks-ai bridges that gap:
+
+- **Multi-turn persistent sessions** — `PushChannel` + `SessionManager` let users send messages at any time. Messages queue and the SDK picks them up when ready — no "wait for the agent to finish" lockout.
+- **Named SSE event routing** — The SDK yields a flat stream of internal message types. The `MessageTranslator` reshapes them into semantically named SSE events (`text_delta`, `tool_start`, `tool_call`, `tool_result`, ...) that the browser's `EventSource` can route with native `addEventListener`.
+- **UI-friendly tool lifecycle** — Tool calls move through `pending` → `streaming_input` → `running` → `complete` phases with streaming JSON input, giving your UI fine-grained control over loading states and progressive rendering.
+- **Structured custom events** — Hook into tool results with `onToolResult` and emit typed `{ name, value }` events for app-specific reactivity (e.g. "document saved", "data refreshed") without touching the core protocol.
+- **Client-server separation** — Server handles transport (SSE encoding, session routing). Client handles state (Zustand store, React components). The translator is the clean seam between them.
+
+## Install
+
+```bash
+pnpm add fireworks-ai
+```
+
+Peer dependencies:
+
+```json
+{
+  "@anthropic-ai/claude-agent-sdk": ">=0.2.0",
+  "hono": ">=4.0.0",
+  "react": ">=18.0.0",
+  "react-markdown": ">=10.0.0",
+  "zustand": ">=5.0.0",
+  "immer": ">=10.0.0",
+  "tailwindcss": ">=4.0.0"
+}
+```
+
+## Server
+
+`fireworks-ai/server` gives you a Hono router that manages Agent SDK sessions and streams events to the client over SSE.
+
+The Claude Agent SDK reads your API key from the environment automatically. Make sure it's set before starting your server:
+
+```bash
+export ANTHROPIC_API_KEY=your-api-key
+```
+
+```typescript
+import { Hono } from "hono";
+import { serve } from "@hono/node-server";
+import {
+  createAgentRouter,
+  SessionManager,
+  MessageTranslator,
+} from "fireworks-ai/server";
+
+const sessions = new SessionManager(() => ({
+  context: {},
+  model: "claude-sonnet-4-5-20250929",
+  systemPrompt: "You are a helpful assistant.",
+  maxTurns: 50,
+}));
+
+const translator = new MessageTranslator();
+
+const app = new Hono();
+app.route("/", createAgentRouter({ sessions, translator }));
+
+serve({ fetch: app.fetch, port: 3000 });
+```
+
+This gives you three endpoints:
+
+| Method | Path | Description |
+|--------|------|-------------|
+| `POST` | `/api/sessions` | Create a session, returns `{ sessionId }` |
+| `POST` | `/api/sessions/:id/messages` | Send `{ text }` to a session |
+| `GET` | `/api/sessions/:id/events` | SSE stream of agent events |
+
+### Session context
+
+`SessionManager` takes a factory function that runs once per session. The generic type parameter lets you attach per-session state:
+
+```typescript
+interface MyContext {
+  history: string[];
+}
+
+const sessions = new SessionManager<MyContext>(() => ({
+  context: { history: [] },
+  model: "claude-sonnet-4-5-20250929",
+  systemPrompt: "You are a helpful assistant.",
+  mcpServers: { myServer: createMyServer() },
+  allowedTools: ["mcp__myServer__*"],
+  maxTurns: 100,
+}));
+```
+
+The context is available in translator hooks (see below).
+
+### Reacting to tool results
+
+Use `onToolResult` to inspect what the agent did and emit structured custom events:
+
+```typescript
+const translator = new MessageTranslator<MyContext>({
+  onToolResult: (toolName, result, session) => {
+    if (toolName === "save_note") {
+      session.context.history.push(result);
+      return [{ name: "notes_updated", value: session.context.history }];
+    }
+    return [];
+  },
+});
+```
+
+Each returned `{ name, value }` object is sent to the client as a `custom` SSE event.
+
+## Client
+
+`fireworks-ai/react` provides a drop-in chat UI that connects to your server.
+
+```tsx
+import { AgentProvider, MessageList, ChatInput, useAgentContext } from "fireworks-ai/react";
+
+function App() {
+  return (
+    <AgentProvider>
+      <Chat />
+    </AgentProvider>
+  );
+}
+
+function Chat() {
+  const { sendMessage } = useAgentContext();
+
+  return (
+    <div className="flex h-screen flex-col">
+      <MessageList className="flex-1" />
+      <ChatInput onSend={sendMessage} />
+    </div>
+  );
+}
+```
+
+Components use Tailwind utility classes and accept `className` for overrides.
+
+### Custom events
+
+If your server emits custom events (via `onToolResult`), handle them with `onCustomEvent`:
+
+```tsx
+<AgentProvider
+  onCustomEvent={(e) => {
+    if (e.name === "notes_updated") {
+      myStore.getState().setNotes(e.value);
+    }
+  }}
+>
+  <Chat />
+</AgentProvider>
+```
+
+Each event is a typed `CustomEvent<T>` with `name` and `value` fields.
+
+### Widgets
+
+Register custom components for tool results. When a tool completes, `ToolCallCard` looks up the matching widget and renders it with typed props.
+
+```tsx
+import { registerWidget, type WidgetProps } from "fireworks-ai/react";
+
+interface SearchResult {
+  query: string;
+  results: { title: string; url: string }[];
+}
+
+function SearchWidget({ result }: WidgetProps<SearchResult>) {
+  if (!result) return null;
+  return (
+    <ul>
+      {result.results.map((r) => (
+        <li key={r.url}>
+          <a href={r.url}>{r.title}</a>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+registerWidget({
+  toolName: "search",
+  label: "Search",
+  richLabel: (r) => `Search: ${r.query}`,
+  component: SearchWidget,
+});
+```
+
+`toolName` matches the short name — MCP prefixes (`mcp__server__`) are stripped automatically. Call `registerWidget` at module scope; barrel-import your widgets directory so registrations run before render.
+
+Tool calls without a registered widget show a minimal status indicator.
+
+### Tool call lifecycle
+
+Each tool call moves through phases, reflected in `WidgetProps.phase`:
+
+| Phase | Trigger | What's available |
+|-------|---------|-----------------:|
+| `pending` | `tool_start` SSE event | `input: {}` |
+| `streaming_input` | `tool_input_delta` events | `partialInput` accumulates |
+| `running` | `tool_call` event (input finalized) | `input` is complete |
+| `complete` | `tool_result` event | `result` is JSON-parsed |
+| `error` | Error during execution | `error` message |
+
+## Styling
+
+Fireworks components use Tailwind v4 utility classes and [shadcn/ui](https://ui.shadcn.com)-compatible CSS variable names (`bg-primary`, `text-muted-foreground`, `border-border`, etc.).
+
+### With shadcn/ui
+
+Your existing theme variables are already compatible. Add one line to your main CSS so Tailwind scans fireworks-ai's component source for utility classes:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/fireworks-ai/src";
+```
+
+The `@source` path is relative to your CSS file — adjust if your stylesheet lives in a nested directory (e.g. `../../node_modules/fireworks-ai/src`).
+
+### Without shadcn/ui
+
+Import the bundled theme, which includes source scanning automatically:
+
+```css
+@import "tailwindcss";
+@import "fireworks-ai/theme.css";
+```
+
+This provides a neutral OKLCH palette with light + dark mode support and the Tailwind v4 `@theme inline` variable bridge.
+
+### Dark mode
+
+Dark mode activates via:
+- `.dark` class on `<html>` (recommended), or
+- `prefers-color-scheme: dark` system preference (automatic)
+
+Add `.light` to `<html>` to force light mode when using system preference detection.
+
+### Switching to shadcn later
+
+Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme takes over with zero migration.
+
+## API Reference
+
+### `fireworks-ai/server`
+
+| Export | Description |
+|--------|-------------|
+| `SessionManager<TCtx>` | Manages agent sessions with per-session context |
+| `Session<TCtx>` | A single session — `id`, `context`, `pushMessage()`, `abort()` |
+| `SessionInit<TCtx>` | Factory return type — `model`, `systemPrompt`, `mcpServers`, etc. |
+| `MessageTranslator<TCtx>` | Converts SDK messages to SSE events |
+| `TranslatorConfig<TCtx>` | Translator options — `onToolResult` hook |
+| `createAgentRouter<TCtx>(config)` | Returns a Hono app with session + SSE routes |
+| `PushChannel<T>` | Async iterable queue for feeding messages to the SDK |
+| `sseEncode(event)` | Formats an `SSEEvent` as an SSE string |
+| `streamSession(session, translator)` | Async generator yielding `SSEEvent`s |
+
+### `fireworks-ai/react`
+
+| Export | Description |
+|--------|-------------|
+| `AgentProvider` | Context provider — wraps store + SSE connection |
+| `useAgentContext()` | Returns `{ sessionId, sendMessage, store }` |
+| `useChatStore(selector)` | Zustand selector hook into chat state |
+| `createChatStore()` | Creates a vanilla Zustand store (for advanced use) |
+| `useAgent(store, config?)` | SSE connection hook (used internally by `AgentProvider`) |
+| `MessageList` | Auto-scrolling message list with thinking indicator |
+| `TextMessage` | Markdown-rendered message bubble |
+| `ChatInput` | Textarea + send button |
+| `ToolCallCard` | Lifecycle-aware tool call display |
+| `ThinkingIndicator` | Animated dots shown while agent is generating |
+| `CollapsibleCard` | Expandable card wrapper |
+| `StatusDot` | Phase-colored status indicator |
+| `cn(...inputs)` | `clsx` + `tailwind-merge` utility for class merging |
+| `registerWidget(registration)` | Register a component for a tool name |
+| `getWidget(toolName)` | Look up a registered widget |
+| `stripMcpPrefix(name)` | `"mcp__server__tool"` → `"tool"` |
+
+### Types (re-exported from both entry points)
+
+| Type | Description |
+|------|-------------|
+| `SSEEvent` | `{ event: string, data: string }` |
+| `ChatMessage` | `{ id, role, content, toolCalls? }` |
+| `ToolCallInfo` | `{ id, name, input, partialInput?, result?, error?, status }` |
+| `ToolCallPhase` | `"pending" \| "streaming_input" \| "running" \| "complete" \| "error"` |
+| `WidgetProps<TResult>` | Props passed to widget components |
+| `WidgetRegistration<TResult>` | Widget registration descriptor |
+| `ChatStore` | `StoreApi<ChatStoreShape>` — vanilla Zustand store |
+| `ChatStoreShape` | Full state + actions interface |
+| `CustomEvent<T>` | `{ name: string, value: T }` — structured app-level event |
+
+## SSE Events
+
+Events emitted by the server, handled automatically by `useAgent`:
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `message_start` | `{}` | Agent began generating a response |
+| `text_delta` | `{ text }` | Streaming text chunk |
+| `tool_start` | `{ id, name }` | Agent began calling a tool |
+| `tool_input_delta` | `{ id, partialJson }` | Streaming tool input JSON |
+| `tool_call` | `{ id, name, input }` | Tool input finalized |
+| `tool_result` | `{ toolUseId, result }` | Tool execution result |
+| `tool_progress` | `{ toolName, elapsed }` | Long-running tool heartbeat |
+| `turn_complete` | `{ numTurns, cost }` | Agent turn finished |
+| `custom` | `{ name, value }` | App-specific event from `onToolResult` |
+| `session_error` | `{ subtype }` | Session ended with error |
+
+## License
+
+MIT

package/dist/react/AgentProvider.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import type { CustomEvent } from "../types.js";
+import { type ChatStore, type ChatStoreShape } from "./store.js";
+import { type UseAgentReturn } from "./use-agent.js";
+interface AgentContextValue extends UseAgentReturn {
+    store: ChatStore;
+}
+export declare function AgentProvider(props: {
+    endpoint?: string;
+    onCustomEvent?: (event: CustomEvent) => void;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useAgentContext(): AgentContextValue;
+export declare function useChatStore<T>(selector: (state: ChatStoreShape) => T): T;
+export {};

package/dist/react/AgentProvider.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from "react";
+import { useStore } from "zustand";
+import { createChatStore } from "./store.js";
+import { useAgent } from "./use-agent.js";
+const AgentContext = createContext(null);
+export function AgentProvider(props) {
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createChatStore();
+    }
+    const store = storeRef.current;
+    const agentConfig = useMemo(() => ({
+        endpoint: props.endpoint,
+        onCustomEvent: props.onCustomEvent,
+    }), [props.endpoint, props.onCustomEvent]);
+    const agent = useAgent(store, agentConfig);
+    const value = useMemo(() => ({ ...agent, store }), [agent, store]);
+    return _jsx(AgentContext, { value: value, children: props.children });
+}
+export function useAgentContext() {
+    const ctx = useContext(AgentContext);
+    if (!ctx)
+        throw new Error("useAgentContext must be used within <AgentProvider>");
+    return ctx;
+}
+export function useChatStore(selector) {
+    const { store } = useAgentContext();
+    return useStore(store, selector);
+}

package/dist/react/ChatInput.d.ts

@@ -0,0 +1,6 @@
+export declare function ChatInput({ onSend, placeholder, disabled, className, }: {
+    onSend: (text: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ChatInput.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./cn.js";
+export function ChatInput({ onSend, placeholder = "Type a message...", disabled, className, }) {
+    const [text, setText] = useState("");
+    const isDisabled = disabled ?? false;
+    function handleSend() {
+        const trimmed = text.trim();
+        if (!trimmed || isDisabled)
+            return;
+        onSend(trimmed);
+        setText("");
+    }
+    function handleKeyDown(e) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    }
+    return (_jsxs("div", { className: cn("flex items-end gap-2 p-3", className), children: [_jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, rows: 1, className: "flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" }), _jsx("button", { type: "button", onClick: handleSend, disabled: !text.trim() || isDisabled, className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4", "aria-hidden": "true", children: [_jsx("path", { d: "M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" }), _jsx("path", { d: "m21.854 2.147-10.94 10.939" })] }) })] }));
+}

package/dist/react/CollapsibleCard.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { ToolCallPhase } from "../types.js";
+export declare function CollapsibleCard({ label, status, defaultOpen, children, className, }: {
+    label: string;
+    status?: ToolCallPhase;
+    defaultOpen?: boolean;
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/CollapsibleCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./cn.js";
+import { StatusDot } from "./StatusDot.js";
+export function CollapsibleCard({ label, status, defaultOpen = true, children, className, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsxs("div", { className: cn("rounded-md border border-border bg-accent/50 overflow-hidden", className), children: [_jsxs("button", { type: "button", onClick: () => setOpen(!open), className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent transition-colors", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: cn("h-3 w-3 transition-transform", open && "rotate-90"), "aria-hidden": "true", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }), status && _jsx(StatusDot, { status: status }), _jsx("span", { children: label })] }), open && _jsx("div", { className: "px-2.5 pb-2", children: children })] }));
+}

package/dist/react/MessageList.d.ts

@@ -0,0 +1,3 @@
+export declare function MessageList({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/MessageList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useChatStore } from "./AgentProvider.js";
+import { cn } from "./cn.js";
+import { TextMessage } from "./TextMessage.js";
+import { ThinkingIndicator } from "./ThinkingIndicator.js";
+import { ToolCallCard } from "./ToolCallCard.js";
+export function MessageList({ className }) {
+    const messages = useChatStore((s) => s.messages);
+    const streamingText = useChatStore((s) => s.streamingText);
+    const isThinking = useChatStore((s) => s.isThinking);
+    const bottomRef = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on content changes
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    }, [messages, streamingText, isThinking]);
+    return (_jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: _jsxs("div", { className: "flex flex-col gap-3 p-4 text-sm", children: [messages.map((msg) => {
+                    if (msg.toolCalls?.length) {
+                        return (_jsx("div", { className: "flex flex-col gap-1.5", children: msg.toolCalls.map((tc) => (_jsx(ToolCallCard, { toolCall: tc }, tc.id))) }, msg.id));
+                    }
+                    if (msg.role === "system") {
+                        return (_jsx("div", { className: "text-center text-xs text-destructive", children: msg.content }, msg.id));
+                    }
+                    if (msg.content) {
+                        return (_jsx(TextMessage, { role: msg.role, content: msg.content }, msg.id));
+                    }
+                    return null;
+                }), streamingText && _jsx(TextMessage, { role: "assistant", content: streamingText }), isThinking && _jsx(ThinkingIndicator, {}), _jsx("div", { ref: bottomRef })] }) }));
+}

package/dist/react/StatusDot.d.ts

@@ -0,0 +1,5 @@
+import type { ToolCallPhase } from "../types.js";
+export declare function StatusDot({ status, className }: {
+    status: ToolCallPhase;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/StatusDot.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+const phaseClasses = {
+    pending: "bg-muted-foreground/40",
+    streaming_input: "bg-yellow-500 animate-pulse",
+    running: "bg-yellow-500 animate-pulse",
+    complete: "bg-green-500",
+    error: "bg-red-500",
+};
+export function StatusDot({ status, className }) {
+    return _jsx("span", { className: cn("h-2 w-2 shrink-0 rounded-full", phaseClasses[status], className) });
+}

package/dist/react/TextMessage.d.ts

@@ -0,0 +1,5 @@
+export declare function TextMessage({ role, content, className, }: {
+    role: "user" | "assistant";
+    content: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/TextMessage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import { cn } from "./cn.js";
+export function TextMessage({ role, content, className, }) {
+    const isUser = role === "user";
+    return (_jsx("div", { className: cn("flex", isUser ? "justify-end" : "justify-start", className), children: _jsx("div", { className: cn("max-w-[85%] rounded-lg px-3 py-2 text-sm overflow-hidden break-words", isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground"), children: isUser ? (_jsx("span", { className: "whitespace-pre-wrap", children: content })) : (_jsx("div", { className: "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: _jsx(Markdown, { components: {
+                        p: ({ children }) => _jsx("p", { className: "mb-2 last:mb-0", children: children }),
+                        ul: ({ children }) => _jsx("ul", { className: "mb-2 ml-4 list-disc last:mb-0", children: children }),
+                        ol: ({ children }) => (_jsx("ol", { className: "mb-2 ml-4 list-decimal last:mb-0", children: children })),
+                        li: ({ children }) => _jsx("li", { className: "mb-0.5", children: children }),
+                        strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+                    }, children: content }) })) }) }));
+}

package/dist/react/ThinkingIndicator.d.ts

@@ -0,0 +1,3 @@
+export declare function ThinkingIndicator({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ThinkingIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+export function ThinkingIndicator({ className }) {
+    return (_jsx("div", { className: cn("flex justify-start", className), children: _jsxs("div", { className: "flex items-center gap-1 rounded-lg bg-muted px-3 py-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:0ms]" }), _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:150ms]" }), _jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-muted-foreground animate-bounce [animation-delay:300ms]" })] }) }));
+}

package/dist/react/ToolCallCard.d.ts

@@ -0,0 +1,5 @@
+import type { ToolCallInfo } from "../types.js";
+export declare function ToolCallCard({ toolCall, className, }: {
+    toolCall: ToolCallInfo;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ToolCallCard.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CollapsibleCard } from "./CollapsibleCard.js";
+import { cn } from "./cn.js";
+import { getWidget, stripMcpPrefix } from "./registry.js";
+import { StatusDot } from "./StatusDot.js";
+export function ToolCallCard({ toolCall, className, }) {
+    const short = stripMcpPrefix(toolCall.name);
+    const reg = getWidget(short);
+    const label = reg?.label ?? short;
+    if (toolCall.status === "complete" && toolCall.result && reg) {
+        let parsed;
+        try {
+            parsed = JSON.parse(toolCall.result);
+        }
+        catch {
+            parsed = undefined;
+        }
+        const displayLabel = parsed && reg.richLabel ? (reg.richLabel(parsed) ?? label) : label;
+        const widgetProps = {
+            phase: toolCall.status,
+            toolUseId: toolCall.id,
+            input: toolCall.input,
+            partialInput: toolCall.partialInput,
+            result: parsed,
+            error: toolCall.error,
+        };
+        return (_jsx(CollapsibleCard, { label: displayLabel, status: toolCall.status, className: className, children: _jsx(reg.component, { ...widgetProps }) }));
+    }
+    if (toolCall.status === "error") {
+        return (_jsxs("div", { className: cn("flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 px-2.5 py-1.5 text-xs text-muted-foreground", className), children: [_jsx(StatusDot, { status: toolCall.status }), _jsx("span", { children: label }), toolCall.error && _jsx("span", { className: "ml-auto text-destructive", children: toolCall.error })] }));
+    }
+    return (_jsxs("div", { className: cn("flex items-center gap-2 rounded-md border border-border bg-accent/50 px-2.5 py-1.5 text-xs text-muted-foreground", className), children: [_jsx(StatusDot, { status: toolCall.status }), _jsx("span", { children: label }), toolCall.status === "streaming_input" && toolCall.partialInput && (_jsx("span", { className: "ml-auto truncate max-w-[200px] opacity-50 font-mono text-[10px]", children: toolCall.partialInput.slice(0, 80) }))] }));
+}

package/dist/react/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/react/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/react/index.d.ts

@@ -0,0 +1,13 @@
+export type { ChatMessage, CustomEvent, SSEEvent, ToolCallInfo, ToolCallPhase, WidgetProps, WidgetRegistration, } from "../types.js";
+export { AgentProvider, useAgentContext, useChatStore } from "./AgentProvider.js";
+export { ChatInput } from "./ChatInput.js";
+export { CollapsibleCard } from "./CollapsibleCard.js";
+export { cn } from "./cn.js";
+export { MessageList } from "./MessageList.js";
+export { getWidget, registerWidget, stripMcpPrefix } from "./registry.js";
+export { StatusDot } from "./StatusDot.js";
+export { type ChatStore, type ChatStoreShape, createChatStore } from "./store.js";
+export { TextMessage } from "./TextMessage.js";
+export { ThinkingIndicator } from "./ThinkingIndicator.js";
+export { ToolCallCard } from "./ToolCallCard.js";
+export { type UseAgentConfig, type UseAgentReturn, useAgent } from "./use-agent.js";

package/dist/react/index.js

@@ -0,0 +1,12 @@
+export { AgentProvider, useAgentContext, useChatStore } from "./AgentProvider.js";
+export { ChatInput } from "./ChatInput.js";
+export { CollapsibleCard } from "./CollapsibleCard.js";
+export { cn } from "./cn.js";
+export { MessageList } from "./MessageList.js";
+export { getWidget, registerWidget, stripMcpPrefix } from "./registry.js";
+export { StatusDot } from "./StatusDot.js";
+export { createChatStore } from "./store.js";
+export { TextMessage } from "./TextMessage.js";
+export { ThinkingIndicator } from "./ThinkingIndicator.js";
+export { ToolCallCard } from "./ToolCallCard.js";
+export { useAgent } from "./use-agent.js";

package/dist/react/registry.d.ts

@@ -0,0 +1,4 @@
+import type { WidgetRegistration } from "../types.js";
+export declare function registerWidget<TResult>(reg: WidgetRegistration<TResult>): void;
+export declare function getWidget(toolName: string): WidgetRegistration | undefined;
+export declare function stripMcpPrefix(name: string): string;

package/dist/react/registry.js

@@ -0,0 +1,10 @@
+const widgets = new Map();
+export function registerWidget(reg) {
+    widgets.set(reg.toolName, reg);
+}
+export function getWidget(toolName) {
+    return widgets.get(toolName);
+}
+export function stripMcpPrefix(name) {
+    return name.replace(/^mcp__[^_]+__/, "");
+}

package/dist/react/registry.test.d.ts

@@ -0,0 +1 @@
+export {};