neeter 0.6.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,361 @@
+# neeter
+
+[![npm version](https://img.shields.io/npm/v/neeter)](https://www.npmjs.com/package/neeter)
+[![npm downloads](https://img.shields.io/npm/dm/neeter)](https://www.npmjs.com/package/neeter)
+[![license](https://img.shields.io/npm/l/neeter)](./LICENSE)
+
+A React + Hono toolkit that puts a browser UI on the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk) — the same agentic framework that powers Claude Code. Streams tool calls, file edits, permissions, and multi-turn sessions over SSE into ready-made React components.
+
+## Why neeter
+
+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. neeter 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.
+- **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
+
+```bash
+pnpm add neeter
+```
+
+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
+
+`neeter/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 "neeter/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 });
+```
+
+### 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
+
+`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.
+
+### 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
+
+`neeter/react` provides a drop-in chat UI that connects to your server.
+
+```tsx
+import { AgentProvider, MessageList, ChatInput, useAgentContext } from "neeter/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
+
+When you add tools to your `SessionManager`, neeter automatically renders them with purpose-built widgets — diff views for edits, code blocks for file reads, expandable link pills for web searches, and so on. No configuration needed.
+
+- **[Built-in widgets](docs/built-in-widgets.md)** — what ships out of the box for the 11 supported SDK tools, how approval previews work, and how to extend or override them
+- **[Custom widgets](docs/custom-widgets.md)** — register your own components for MCP tools or app-specific rendering
+
+Tool calls without a registered widget fall back to 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
+
+Neeter 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 neeter's component source for utility classes:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/neeter/src";
+```
+
+The `@source` path is relative to your CSS file — adjust if your stylesheet lives in a nested directory (e.g. `../../node_modules/neeter/src`).
+
+### Without shadcn/ui
+
+Import the bundled theme, which includes source scanning automatically:
+
+```css
+@import "tailwindcss";
+@import "neeter/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 `neeter/theme.css` import and add `@source` — your shadcn theme takes over with zero migration.
+
+## API Reference
+
+### `neeter/server`
+
+| Export | Description |
+|--------|-------------|
+| `SessionManager<TCtx>` | Manages agent sessions with per-session context |
+| `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, 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 |
+
+### `neeter/react`
+
+| Export | Description |
+|--------|-------------|
+| `AgentProvider` | Context provider — wraps store + SSE connection |
+| `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 pending permissions and thinking indicator |
+| `TextMessage` | Markdown-rendered message bubble |
+| `ChatInput` | Textarea + send button |
+| `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 |
+| `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, 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 — `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, toolUseId?, 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
+
+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 |
+
+## Development
+
+See [docs/development.md](docs/development.md) for local setup, pre-commit hooks, and CI.
+
+## 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/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.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,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "./cn.js";
+import { SendIcon } from "./icons.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) {
+            e.preventDefault();
+            handleSend();
+        }
+    }
+    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: _jsx(SendIcon, {}) })] }));
+}

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,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./cn.js";
+import { ChevronIcon } from "./icons.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(ChevronIcon, { open: open }), 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.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,32 @@
+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, 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));
+                    }
+                    if (msg.role === "system") {
+                        return (_jsx("div", { className: "text-center text-xs text-destructive", children: 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;
+                }), 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,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAgentContext, useChatStore } from "./AgentProvider.js";
+import { isApprovalClaimedByToolCall } from "./approval-matching.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) => request.kind !== "tool_approval" || !isApprovalClaimedByToolCall(request, messages));
+    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/StatusDot.d.ts

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

package/dist/react/StatusDot.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+const phaseClasses = {
+    pending: "bg-muted-foreground/40",
+    streaming_input: "bg-amber-500 animate-pulse",
+    running: "bg-amber-500 animate-pulse",
+    complete: "bg-emerald-500",
+    error: "bg-destructive",
+};
+export function StatusDot({ status, className }) {
+    return _jsx("span", { className: cn("h-2 w-2 shrink-0 rounded-full", phaseClasses[status], className) });
+}
+export function PulsingDot({ className }) {
+    return (_jsx("span", { className: cn("inline-block h-2 w-2 shrink-0 rounded-full bg-amber-500 animate-pulse", 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,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import { cn } from "./cn.js";
+import { markdownComponents } from "./markdown-overrides.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: markdownComponents, children: content }) })) }) }));
+}