fireworks-ai 0.2.1 → 0.4.0

package/README.md

@@ -14,6 +14,7 @@ The Claude Agent SDK gives you a powerful agentic loop — but it's a server-sid
 - **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.
+- **Browser-side tool approval** — The SDK's `canUseTool` callback fires on the server, but your users are in the browser. `PermissionGate` bridges the gap with deferred promises, SSE events, and an HTTP POST endpoint — the agent blocks until the user clicks Allow/Deny or answers a clarifying question.
 - **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
@@ -70,13 +71,29 @@ app.route("/", createAgentRouter({ sessions, translator }));
 serve({ fetch: app.fetch, port: 3000 });
 ```
 
-This gives you three endpoints:
+### Extended thinking
+
+Enable Claude's chain-of-thought reasoning by setting `thinking` in your session config:
+
+```typescript
+const sessions = new SessionManager(() => ({
+  context: {},
+  model: "claude-sonnet-4-5-20250929",
+  systemPrompt: "You are a helpful assistant.",
+  thinking: { type: "enabled", budgetTokens: 10000 },
+}));
+```
+
+When enabled, thinking blocks stream to the client as `thinking_delta` SSE events and render as collapsible cards in `MessageList`. Set `{ type: "disabled" }` to explicitly turn thinking off (it's off by default).
+
+This gives you four 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 |
+| `POST` | `/api/sessions/:id/permissions` | Respond to a permission request (see [Permissions](#permissions)) |
 
 ### Session context
 
@@ -117,6 +134,35 @@ const translator = new MessageTranslator<MyContext>({
 
 Each returned `{ name, value }` object is sent to the client as a `custom` SSE event.
 
+### Permissions
+
+By default sessions run with `permissionMode: "bypassPermissions"` — all tools execute automatically. Set `permissionMode` to `"default"` (or `"acceptEdits"`) to require browser-side approval before each tool runs:
+
+```typescript
+const sessions = new SessionManager(() => ({
+  context: {},
+  model: "claude-sonnet-4-5-20250929",
+  systemPrompt: "You are a helpful assistant.",
+  permissionMode: "default",
+}));
+```
+
+When `permissionMode` is not `"bypassPermissions"`:
+
+1. Every tool call blocks the SDK until the user responds
+2. `AskUserQuestion` calls surface as structured questions with options
+3. `permission_request` SSE events fire to the client
+4. The user's response is POSTed back to `/api/sessions/:id/permissions`
+
+The `PermissionGate` on each session manages the deferred promises internally — no additional wiring needed.
+
+| Mode | Behavior |
+|------|----------|
+| `"bypassPermissions"` | All tools auto-approved (default) |
+| `"default"` | Every tool call requires explicit approval |
+| `"acceptEdits"` | File edits auto-approved, other tools require approval |
+| `"plan"` | Planning mode — SDK-defined behavior |
+
 ## Client
 
 `fireworks-ai/react` provides a drop-in chat UI that connects to your server.
@@ -201,6 +247,29 @@ registerWidget({
 
 Tool calls without a registered widget show a minimal status indicator.
 
+#### Built-in widgets
+
+fireworks-ai ships two built-in widgets that auto-register on import:
+
+- **WebSearchWidget** — renders web search results as link pills with favicons
+- **AskUserQuestionWidget** — displays completed question/answer pairs from `AskUserQuestion`
+
+These register automatically when you import from `fireworks-ai/react`.
+
+#### Input preview
+
+Widgets can provide an `inputRenderer` to customize how tool input is displayed in the approval card (when `permissionMode` is not `"bypassPermissions"`):
+
+```tsx
+registerWidget({
+  toolName: "web_search",
+  label: "Web Search",
+  richLabel: (result, input) => `Search: ${input.query}`,
+  inputRenderer: ({ input }) => <span>Searching: {input.query as string}</span>,
+  component: WebSearchWidget,
+});
+```
+
 ### Tool call lifecycle
 
 Each tool call moves through phases, reflected in `WidgetProps.phase`:
@@ -258,11 +327,12 @@ Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme
 | 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. |
+| `Session<TCtx>` | A single session — `id`, `context`, `pushMessage()`, `permissionGate`, `abort()` |
+| `SessionInit<TCtx>` | Factory return type — `model`, `systemPrompt`, `permissionMode`, `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 |
+| `createAgentRouter<TCtx>(config)` | Returns a Hono app with session, SSE, and permission routes |
+| `PermissionGate` | Per-session deferred-promise map for tool approval and user questions |
 | `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 |
@@ -272,14 +342,18 @@ Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme
 | Export | Description |
 |--------|-------------|
 | `AgentProvider` | Context provider — wraps store + SSE connection |
-| `useAgentContext()` | Returns `{ sessionId, sendMessage, store }` |
+| `useAgentContext()` | Returns `{ sessionId, sendMessage, respondToPermission, 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 |
+| `MessageList` | Auto-scrolling message list with pending permissions and thinking indicator |
 | `TextMessage` | Markdown-rendered message bubble |
 | `ChatInput` | Textarea + send button |
-| `ToolCallCard` | Lifecycle-aware tool call display |
+| `ToolCallCard` | Lifecycle-aware tool call display with inline approval |
+| `PendingPermissions` | Renders pending tool approval and user question cards |
+| `ToolApprovalCard` | Tool approval card with Allow/Deny buttons |
+| `UserQuestionCard` | Structured question card with option selection |
+| `ThinkingBlock` | Collapsible card displaying extended thinking text |
 | `ThinkingIndicator` | Animated dots shown while agent is generating |
 | `CollapsibleCard` | Expandable card wrapper |
 | `StatusDot` | Phase-colored status indicator |
@@ -293,14 +367,21 @@ Drop the `fireworks-ai/theme.css` import and add `@source` — your shadcn theme
 | Type | Description |
 |------|-------------|
 | `SSEEvent` | `{ event: string, data: string }` |
-| `ChatMessage` | `{ id, role, content, toolCalls? }` |
+| `ChatMessage` | `{ id, role, content, thinking?, 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 |
+| `WidgetRegistration<TResult>` | Widget registration — `toolName`, `label`, `richLabel?`, `inputRenderer?`, `component` |
 | `ChatStore` | `StoreApi<ChatStoreShape>` — vanilla Zustand store |
 | `ChatStoreShape` | Full state + actions interface |
 | `CustomEvent<T>` | `{ name: string, value: T }` — structured app-level event |
+| `PermissionRequest` | `ToolApprovalRequest \| UserQuestionRequest` — pending permission |
+| `PermissionResponse` | `ToolApprovalResponse \| UserQuestionResponse` — user's answer |
+| `ToolApprovalRequest` | `{ kind, requestId, toolName, input, description? }` |
+| `ToolApprovalResponse` | `{ kind, requestId, behavior: "allow" \| "deny", message? }` |
+| `UserQuestion` | `{ question, header?, options?, multiSelect? }` |
+| `UserQuestionRequest` | `{ kind, requestId, questions: UserQuestion[] }` |
+| `UserQuestionResponse` | `{ kind, requestId, answers: Record<string, string> }` |
 
 ## SSE Events
 
@@ -309,12 +390,15 @@ Events emitted by the server, handled automatically by `useAgent`:
 | Event | Payload | Description |
 |-------|---------|-------------|
 | `message_start` | `{}` | Agent began generating a response |
+| `thinking_start` | `{}` | Extended thinking block began |
+| `thinking_delta` | `{ text }` | Streaming thinking text chunk |
 | `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 |
+| `permission_request` | `PermissionRequest` | Tool approval or user question awaiting response |
 | `turn_complete` | `{ numTurns, cost }` | Agent turn finished |
 | `custom` | `{ name, value }` | App-specific event from `onToolResult` |
 | `session_error` | `{ subtype }` | Session ended with error |

package/dist/react/ApprovalButtons.d.ts

@@ -0,0 +1,5 @@
+export declare function ApprovalButtons({ onApprove, onDeny, className, }: {
+    onApprove: () => void;
+    onDeny: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ApprovalButtons.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "./cn.js";
+export function ApprovalButtons({ onApprove, onDeny, className, }) {
+    const allowRef = useRef(null);
+    // Auto-focus the Allow button when mounted
+    useEffect(() => {
+        allowRef.current?.focus();
+    }, []);
+    // Keyboard shortcuts: 1 = Allow, 2 = Deny (skip when typing in inputs)
+    useEffect(() => {
+        function handleKeyDown(e) {
+            const tag = e.target?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+                return;
+            }
+            if (e.key === "1") {
+                e.preventDefault();
+                onApprove();
+            }
+            else if (e.key === "2") {
+                e.preventDefault();
+                onDeny();
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [onApprove, onDeny]);
+    return (_jsxs("div", { className: cn("mt-2 flex items-center gap-2", className), children: [_jsxs("button", { ref: allowRef, type: "button", onClick: onApprove, className: "rounded bg-primary px-3 py-1 text-primary-foreground hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50", children: ["Allow", _jsx("kbd", { className: "ml-1.5 text-[9px] opacity-60", children: "1" })] }), _jsxs("button", { type: "button", onClick: onDeny, className: "rounded border border-border px-3 py-1 text-muted-foreground hover:bg-accent transition-colors focus:outline-none focus:ring-2 focus:ring-border", children: ["Deny", _jsx("kbd", { className: "ml-1.5 text-[9px] opacity-60", children: "2" })] })] }));
+}

package/dist/react/ChatInput.js

@@ -1,15 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { cn } from "./cn.js";
 export function ChatInput({ onSend, placeholder = "Type a message...", disabled, className, }) {
     const [text, setText] = useState("");
+    const textareaRef = useRef(null);
     const isDisabled = disabled ?? false;
+    const MAX_H = 160; // matches max-h-40 (10rem)
+    const autoResize = useCallback(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.overflowY = el.scrollHeight > MAX_H ? "auto" : "hidden";
+    }, []);
     function handleSend() {
         const trimmed = text.trim();
         if (!trimmed || isDisabled)
             return;
         onSend(trimmed);
         setText("");
+        requestAnimationFrame(() => {
+            const el = textareaRef.current;
+            if (el) {
+                el.style.height = "auto";
+            }
+        });
     }
     function handleKeyDown(e) {
         if (e.key === "Enter" && !e.shiftKey) {
@@ -17,5 +33,8 @@ export function ChatInput({ onSend, placeholder = "Type a message...", disabled,
             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" })] }) })] }));
+    return (_jsxs("div", { className: cn("flex items-end gap-2 p-3", className), children: [_jsx("textarea", { ref: textareaRef, value: text, onChange: (e) => {
+                    setText(e.target.value);
+                    autoResize();
+                }, 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 max-h-40 overflow-y-hidden" }), _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.js

@@ -4,5 +4,5 @@ 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 })] }));
+    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", { className: "truncate min-w-0", children: label })] }), open && _jsx("div", { className: "px-2.5 pb-2", children: children })] }));
 }

package/dist/react/MessageList.js

@@ -2,18 +2,21 @@ 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 { PendingPermissions } from "./PendingPermissions.js";
 import { TextMessage } from "./TextMessage.js";
+import { ThinkingBlock } from "./ThinkingBlock.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 streamingThinking = useChatStore((s) => s.streamingThinking);
     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]);
+    }, [messages, streamingText, streamingThinking, 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));
@@ -21,9 +24,9 @@ export function MessageList({ className }) {
                     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));
+                    if (msg.content || msg.thinking) {
+                        return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [msg.thinking && _jsx(ThinkingBlock, { thinking: msg.thinking }), msg.content && (_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 })] }) }));
+                }), streamingThinking && _jsx(ThinkingBlock, { thinking: streamingThinking, streaming: true }), streamingText && _jsx(TextMessage, { role: "assistant", content: streamingText }), _jsx(PendingPermissions, {}), isThinking && _jsx(ThinkingIndicator, {}), _jsx("div", { ref: bottomRef })] }) }));
 }

package/dist/react/PendingPermissions.d.ts

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

package/dist/react/PendingPermissions.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAgentContext, useChatStore } from "./AgentProvider.js";
+import { cn } from "./cn.js";
+import { ToolApprovalCard } from "./ToolApprovalCard.js";
+import { UserQuestionCard } from "./UserQuestionCard.js";
+export function PendingPermissions({ className }) {
+    const pending = useChatStore((s) => s.pendingPermissions);
+    const messages = useChatStore((s) => s.messages);
+    const { respondToPermission } = useAgentContext();
+    // Tool approvals that match a non-terminal tool call are rendered inline
+    // by ToolCallCard — skip them here to avoid duplicate UI.
+    const unclaimed = pending.filter((request) => {
+        if (request.kind !== "tool_approval")
+            return true;
+        for (const msg of messages) {
+            if (msg.toolCalls) {
+                for (const tc of msg.toolCalls) {
+                    if (tc.name === request.toolName &&
+                        tc.status !== "complete" &&
+                        tc.status !== "error") {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    });
+    if (!unclaimed.length)
+        return null;
+    return (_jsx("div", { className: cn("flex flex-col gap-2", className), children: unclaimed.map((request) => {
+            if (request.kind === "tool_approval") {
+                return (_jsx(ToolApprovalCard, { request: request, onApprove: () => respondToPermission({
+                        kind: "tool_approval",
+                        requestId: request.requestId,
+                        behavior: "allow",
+                    }), onDeny: (message) => respondToPermission({
+                        kind: "tool_approval",
+                        requestId: request.requestId,
+                        behavior: "deny",
+                        message: message ?? "Denied by user",
+                    }) }, request.requestId));
+            }
+            return (_jsx(UserQuestionCard, { request: request, onSubmit: (answers) => respondToPermission({
+                    kind: "user_question",
+                    requestId: request.requestId,
+                    answers,
+                }) }, request.requestId));
+        }) }));
+}

package/dist/react/ThinkingBlock.d.ts

@@ -0,0 +1,5 @@
+export declare function ThinkingBlock({ thinking, streaming, className, }: {
+    thinking: string;
+    streaming?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ThinkingBlock.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import Markdown from "react-markdown";
+import { cn } from "./cn.js";
+const STORAGE_KEY = "fireworks-thinking-open";
+function readPref() {
+    try {
+        return localStorage.getItem(STORAGE_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+}
+function writePref(open) {
+    try {
+        localStorage.setItem(STORAGE_KEY, String(open));
+    }
+    catch {
+        /* SSR / restricted env */
+    }
+}
+export function ThinkingBlock({ thinking, streaming = false, className, }) {
+    const [open, setOpen] = useState(readPref);
+    const toggle = useCallback(() => {
+        setOpen((prev) => {
+            const next = !prev;
+            writePref(next);
+            return next;
+        });
+    }, []);
+    return (_jsx("div", { className: cn("flex justify-start", className), children: _jsxs("div", { className: "rounded-md border border-border/40 bg-accent/20 overflow-hidden", children: [_jsxs("button", { type: "button", onClick: toggle, className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground/60 hover:bg-accent/30 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" }) }), streaming && !open && (_jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-yellow-500 animate-pulse" })), _jsx("span", { className: "truncate min-w-0", children: "Thinking" })] }), open && (_jsx("div", { className: "px-2.5 pt-1 pb-2", children: _jsx(ThinkingContent, { children: thinking }) }))] }) }));
+}
+function ThinkingContent({ children }) {
+    return (_jsx("div", { className: "text-xs text-muted-foreground/70 italic [&>*: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: children }) }));
+}

package/dist/react/ToolApprovalCard.d.ts

@@ -0,0 +1,7 @@
+import type { ToolApprovalRequest } from "../types.js";
+export declare function ToolApprovalCard({ request, onApprove, onDeny, className, }: {
+    request: ToolApprovalRequest;
+    onApprove: () => void;
+    onDeny: (message?: string) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/ToolApprovalCard.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApprovalButtons } from "./ApprovalButtons.js";
+import { cn } from "./cn.js";
+import { getWidget, stripMcpPrefix } from "./registry.js";
+export function ToolApprovalCard({ request, onApprove, onDeny, className, }) {
+    const reg = getWidget(stripMcpPrefix(request.toolName));
+    const label = reg?.label ?? request.toolName;
+    const InputRenderer = reg?.inputRenderer;
+    return (_jsxs("div", { className: cn("rounded-md border border-yellow-500/40 bg-yellow-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), _jsx("span", { className: "font-medium", children: label }), request.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", request.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: request.input })) : (Object.keys(request.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(request.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: onApprove, onDeny: () => onDeny() })] }));
+}

package/dist/react/ToolCallCard.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAgentContext, useChatStore } from "./AgentProvider.js";
+import { ApprovalButtons } from "./ApprovalButtons.js";
 import { CollapsibleCard } from "./CollapsibleCard.js";
 import { cn } from "./cn.js";
 import { getWidget, stripMcpPrefix } from "./registry.js";
@@ -7,15 +9,21 @@ export function ToolCallCard({ toolCall, className, }) {
     const short = stripMcpPrefix(toolCall.name);
     const reg = getWidget(short);
     const label = reg?.label ?? short;
+    const pendingPermissions = useChatStore((s) => s.pendingPermissions);
+    const { respondToPermission, store } = useAgentContext();
+    const isNonTerminal = toolCall.status !== "complete" && toolCall.status !== "error";
+    const matchingApproval = isNonTerminal
+        ? pendingPermissions.find((p) => p.kind === "tool_approval" && p.toolName === toolCall.name)
+        : undefined;
     if (toolCall.status === "complete" && toolCall.result && reg) {
         let parsed;
         try {
             parsed = JSON.parse(toolCall.result);
         }
         catch {
-            parsed = undefined;
+            parsed = toolCall.result;
         }
-        const displayLabel = parsed && reg.richLabel ? (reg.richLabel(parsed) ?? label) : label;
+        const displayLabel = reg.richLabel ? (reg.richLabel(parsed, toolCall.input) ?? label) : label;
         const widgetProps = {
             phase: toolCall.status,
             toolUseId: toolCall.id,
@@ -29,5 +37,21 @@ export function ToolCallCard({ toolCall, className, }) {
     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 })] }));
     }
+    if (matchingApproval) {
+        const InputRenderer = reg?.inputRenderer;
+        return (_jsxs("div", { className: cn("rounded-md border border-yellow-500/40 bg-yellow-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), _jsx("span", { className: "font-medium", children: label }), matchingApproval.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", matchingApproval.description] }))] }), InputRenderer ? (_jsx(InputRenderer, { input: matchingApproval.input })) : (Object.keys(matchingApproval.input).length > 0 && (_jsx("pre", { className: "mt-1.5 max-h-32 overflow-auto rounded bg-background/60 px-2 py-1 font-mono text-[10px] text-muted-foreground", children: JSON.stringify(matchingApproval.input, null, 2) }))), _jsx(ApprovalButtons, { onApprove: () => respondToPermission({
+                        kind: "tool_approval",
+                        requestId: matchingApproval.requestId,
+                        behavior: "allow",
+                    }), onDeny: () => {
+                        store.getState().errorToolCall(toolCall.id, "Not approved");
+                        respondToPermission({
+                            kind: "tool_approval",
+                            requestId: matchingApproval.requestId,
+                            behavior: "deny",
+                            message: "Denied by user",
+                        });
+                    } })] }));
+    }
     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/UserQuestionCard.d.ts

@@ -0,0 +1,6 @@
+import type { UserQuestionRequest } from "../types.js";
+export declare function UserQuestionCard({ request, onSubmit, className, }: {
+    request: UserQuestionRequest;
+    onSubmit: (answers: Record<string, string>) => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/UserQuestionCard.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "./cn.js";
+const OTHER_LABEL = "__other__";
+export function UserQuestionCard({ request, onSubmit, className, }) {
+    const [answers, setAnswers] = useState({});
+    const [otherText, setOtherText] = useState({});
+    const otherInputRefs = useRef({});
+    const allAnswered = request.questions.every((q) => {
+        const val = answers[q.question];
+        if (!val)
+            return false;
+        if (val === OTHER_LABEL)
+            return !!otherText[q.question]?.trim();
+        return true;
+    });
+    function resolvedAnswers() {
+        const resolved = {};
+        for (const q of request.questions) {
+            const val = answers[q.question] ?? "";
+            resolved[q.question] = val === OTHER_LABEL ? (otherText[q.question] ?? "") : val;
+        }
+        return resolved;
+    }
+    function selectOption(question, label, multiSelect) {
+        setAnswers((prev) => {
+            if (!multiSelect)
+                return { ...prev, [question]: label };
+            const current = prev[question] ?? "";
+            const labels = current ? current.split(", ") : [];
+            const next = labels.includes(label)
+                ? labels.filter((l) => l !== label)
+                : [...labels, label];
+            return { ...prev, [question]: next.join(", ") };
+        });
+        if (label === OTHER_LABEL) {
+            setTimeout(() => otherInputRefs.current[question]?.focus(), 0);
+        }
+    }
+    // Keyboard shortcuts: number keys select options
+    useEffect(() => {
+        function handleKeyDown(e) {
+            const tag = e.target?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+                return;
+            }
+            // Only handle single-question cards for keyboard shortcuts
+            if (request.questions.length !== 1)
+                return;
+            const q = request.questions[0];
+            if (!q.options?.length)
+                return;
+            const totalOptions = q.options.length + 1; // +1 for "Other"
+            const num = parseInt(e.key, 10);
+            if (num >= 1 && num <= totalOptions) {
+                e.preventDefault();
+                if (num <= q.options.length) {
+                    selectOption(q.question, q.options[num - 1].label, q.multiSelect);
+                }
+                else {
+                    selectOption(q.question, OTHER_LABEL, q.multiSelect);
+                }
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    });
+    return (_jsxs("div", { className: cn("rounded-md border border-blue-500/40 bg-blue-500/5 px-3 py-2.5 text-xs", className), children: [request.questions.map((q) => {
+                const hasOptions = q.options && q.options.length > 0;
+                const isSingleQuestion = request.questions.length === 1;
+                return (_jsxs("div", { className: "mb-3 last:mb-0", children: [q.header && (_jsx("span", { className: "text-[10px] uppercase tracking-wider text-muted-foreground/70", children: q.header })), _jsx("p", { className: "mt-0.5 text-foreground", children: q.question }), hasOptions && (_jsxs("div", { className: "mt-1.5 flex flex-col gap-1", children: [q.options.map((opt, idx) => {
+                                    const selected = (answers[q.question] ?? "")
+                                        .split(", ")
+                                        .includes(opt.label);
+                                    return (_jsxs("button", { type: "button", onClick: () => selectOption(q.question, opt.label, q.multiSelect), className: cn("flex items-start gap-2 rounded border px-2 py-1.5 text-left transition-colors", selected
+                                            ? "border-blue-500 bg-blue-500/15 text-foreground ring-1 ring-blue-500/30"
+                                            : "border-border text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "mt-px shrink-0", children: q.multiSelect ? (selected ? "☑" : "☐") : selected ? "●" : "○" }), _jsxs("span", { className: "flex-1", children: [_jsx("span", { className: "font-medium", children: opt.label }), opt.description && (_jsxs("span", { className: "ml-1 opacity-70", children: ["\u2014 ", opt.description] }))] }), isSingleQuestion && (_jsx("kbd", { className: "ml-auto shrink-0 text-[9px] opacity-40", children: idx + 1 }))] }, opt.label));
+                                }), (() => {
+                                    const isOther = answers[q.question] === OTHER_LABEL;
+                                    const otherIdx = q.options.length + 1;
+                                    return (_jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => selectOption(q.question, OTHER_LABEL, q.multiSelect), className: cn("flex w-full items-start gap-2 rounded border px-2 py-1.5 text-left transition-colors", isOther
+                                                    ? "border-blue-500 bg-blue-500/15 text-foreground ring-1 ring-blue-500/30"
+                                                    : "border-border text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "mt-px shrink-0", children: q.multiSelect ? (isOther ? "☑" : "☐") : isOther ? "●" : "○" }), _jsx("span", { className: "font-medium", children: "Other" }), isSingleQuestion && (_jsx("kbd", { className: "ml-auto shrink-0 text-[9px] opacity-40", children: otherIdx }))] }), isOther && (_jsx("input", { ref: (el) => { otherInputRefs.current[q.question] = el; }, type: "text", className: "mt-1 w-full rounded border border-border bg-background px-2 py-1 text-foreground focus:outline-none focus:ring-1 focus:ring-blue-500/50", placeholder: "Type your answer\u2026", value: otherText[q.question] ?? "", onChange: (e) => setOtherText((prev) => ({ ...prev, [q.question]: e.target.value })) }))] }));
+                                })()] })), !hasOptions && (_jsx("input", { type: "text", className: "mt-1.5 w-full rounded border border-border bg-background px-2 py-1 text-foreground focus:outline-none focus:ring-1 focus:ring-blue-500/50", placeholder: "Type your answer\u2026", value: answers[q.question] ?? "", onChange: (e) => setAnswers((prev) => ({ ...prev, [q.question]: e.target.value })) }))] }, q.question));
+            }), _jsx("button", { type: "button", disabled: !allAnswered, onClick: () => onSubmit(resolvedAnswers()), className: cn("mt-2 rounded bg-primary px-3 py-1 text-primary-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50", allAnswered ? "hover:bg-primary/90" : "opacity-50 cursor-not-allowed"), children: "Submit" })] }));
+}

package/dist/react/index.d.ts

@@ -1,13 +1,19 @@
-export type { ChatMessage, CustomEvent, SSEEvent, ToolCallInfo, ToolCallPhase, WidgetProps, WidgetRegistration, } from "../types.js";
+import "./widgets/AskUserQuestionWidget.js";
+import "./widgets/WebSearchWidget.js";
+export type { ChatMessage, CustomEvent, PermissionRequest, PermissionResponse, SSEEvent, ToolApprovalRequest, ToolApprovalResponse, ToolCallInfo, ToolCallPhase, UserQuestion, UserQuestionOption, UserQuestionRequest, UserQuestionResponse, 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 { PendingPermissions } from "./PendingPermissions.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 { ThinkingBlock } from "./ThinkingBlock.js";
 export { ThinkingIndicator } from "./ThinkingIndicator.js";
+export { ToolApprovalCard } from "./ToolApprovalCard.js";
 export { ToolCallCard } from "./ToolCallCard.js";
+export { UserQuestionCard } from "./UserQuestionCard.js";
 export { type UseAgentConfig, type UseAgentReturn, useAgent } from "./use-agent.js";