@neeter/react 0.7.1 → 0.8.1

package/README.md

@@ -0,0 +1,92 @@
+# @neeter/react
+
+React components and hooks for building chat UIs on top of the [Claude Agent SDK](https://github.com/anthropics/claude-agent-sdk). Connects to an `@neeter/server` backend over SSE with a Zustand store, drop-in components, and a widget system for tool call rendering.
+
+Part of the [neeter](https://github.com/quantumleeps/neeter) toolkit.
+
+## Install
+
+```bash
+pnpm add @neeter/react
+```
+
+Peer dependencies:
+
+```json
+{
+  "react": ">=18.0.0",
+  "react-markdown": ">=10.0.0",
+  "zustand": ">=5.0.0",
+  "immer": ">=10.0.0"
+}
+```
+
+Components use [Tailwind CSS v4](https://tailwindcss.com/) utility classes.
+
+## Quick start
+
+```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>
+  );
+}
+```
+
+## Styling
+
+Components use [shadcn/ui](https://ui.shadcn.com)-compatible CSS variable names. If you already have a shadcn theme, add one line:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@neeter/react/dist";
+```
+
+Without shadcn, import the bundled theme:
+
+```css
+@import "tailwindcss";
+@import "@neeter/react/theme.css";
+```
+
+## Key features
+
+- **11 built-in widgets** — Diff views for edits, code blocks for reads, expandable pills for web searches, and more. Auto-registered on import.
+- **Custom widgets** — Register your own components for MCP tools or app-specific rendering with `registerWidget()`.
+- **Tool call lifecycle** — Each tool moves through `pending` → `streaming_input` → `running` → `complete` with streaming JSON input.
+- **Permissions UI** — `ToolApprovalCard` and `UserQuestionCard` for browser-side tool approval.
+- **Extended thinking** — Collapsible thinking blocks with streaming text.
+- **Custom events** — Handle app-specific events from `onToolResult` via `AgentProvider`'s `onCustomEvent` prop.
+- **Abort** — Stop the agent mid-turn with `stopSession()` from `useAgentContext()`.
+
+## Examples
+
+| Example | Description |
+|---------|-------------|
+| [basic-chat](https://github.com/quantumleeps/neeter/tree/main/examples/basic-chat) | Minimal component setup |
+| [live-preview](https://github.com/quantumleeps/neeter/tree/main/examples/live-preview) | Custom events, widgets, split-pane preview |
+
+## Documentation
+
+- [Full API reference](https://github.com/quantumleeps/neeter#readme)
+- [Built-in widgets](https://github.com/quantumleeps/neeter/blob/main/docs/built-in-widgets.md)
+- [Custom widgets](https://github.com/quantumleeps/neeter/blob/main/docs/custom-widgets.md)
+
+## License
+
+MIT

package/dist/ChatInput.d.ts

@@ -1,5 +1,7 @@
-export declare function ChatInput({ onSend, placeholder, disabled, className, }: {
+export declare function ChatInput({ onSend, onStop, isStreaming, placeholder, disabled, className, }: {
     onSend: (text: string) => void;
+    onStop?: () => void;
+    isStreaming?: boolean;
     placeholder?: string;
     disabled?: boolean;
     className?: string;

package/dist/ChatInput.js

@@ -1,8 +1,8 @@
 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, }) {
+import { SendIcon, StopIcon } from "./icons.js";
+export function ChatInput({ onSend, onStop, isStreaming, placeholder = "Type a message...", disabled, className, }) {
     const [text, setText] = useState("");
     const textareaRef = useRef(null);
     const isDisabled = disabled ?? false;
@@ -37,5 +37,5 @@ export function ChatInput({ onSend, placeholder = "Type a message...", disabled,
     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, {}) })] }));
+                }, 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" }), isStreaming && onStop ? (_jsx("button", { type: "button", onClick: onStop, className: "inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90", children: _jsx(StopIcon, {}) })) : (_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/icons.d.ts

@@ -2,6 +2,9 @@ export declare function ChevronIcon({ open, className }: {
     open: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function StopIcon({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SendIcon({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/icons.js

@@ -3,6 +3,9 @@ import { cn } from "./cn.js";
 export function ChevronIcon({ open, className }) {
     return (_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", className), "aria-hidden": "true", children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
 }
+export function StopIcon({ className }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: cn("h-4 w-4", className), "aria-hidden": "true", children: _jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "1" }) }));
+}
 export function SendIcon({ className }) {
     return (_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: cn("h-4 w-4", className), "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/store.d.ts

@@ -8,6 +8,8 @@ interface ChatStoreState {
     streamingText: string;
     streamingThinking: string;
     pendingPermissions: PermissionRequest[];
+    totalCost: number;
+    totalTurns: number;
 }
 interface ChatStoreActions {
     setSessionId: (id: string) => void;
@@ -26,6 +28,8 @@ interface ChatStoreActions {
     setThinking: (v: boolean) => void;
     addPermissionRequest: (request: PermissionRequest) => void;
     removePermissionRequest: (requestId: string) => void;
+    addCost: (cost: number, turns: number) => void;
+    cancelInflightToolCalls: () => void;
     reset: () => void;
 }
 export type ChatStoreShape = ChatStoreState & ChatStoreActions;

package/dist/store.js

@@ -21,6 +21,8 @@ export function createChatStore() {
         streamingText: "",
         streamingThinking: "",
         pendingPermissions: [],
+        totalCost: 0,
+        totalTurns: 0,
         setSessionId: (id) => set((s) => {
             s.sessionId = id;
         }),
@@ -128,6 +130,24 @@ export function createChatStore() {
         removePermissionRequest: (requestId) => set((s) => {
             s.pendingPermissions = s.pendingPermissions.filter((p) => p.requestId !== requestId);
         }),
+        addCost: (cost, turns) => set((s) => {
+            s.totalCost += cost;
+            s.totalTurns += turns;
+        }),
+        cancelInflightToolCalls: () => set((s) => {
+            for (const msg of s.messages) {
+                if (msg.toolCalls) {
+                    for (const tc of msg.toolCalls) {
+                        if (tc.status === "pending" ||
+                            tc.status === "streaming_input" ||
+                            tc.status === "running") {
+                            tc.status = "error";
+                            tc.error = "Interrupted";
+                        }
+                    }
+                }
+            }
+        }),
         reset: () => set((s) => {
             s.sessionId = null;
             s.messages = [];
@@ -136,6 +156,8 @@ export function createChatStore() {
             s.streamingText = "";
             s.streamingThinking = "";
             s.pendingPermissions = [];
+            s.totalCost = 0;
+            s.totalTurns = 0;
         }),
     })));
 }

package/dist/use-agent.d.ts

@@ -7,6 +7,7 @@ export interface UseAgentConfig {
 export interface UseAgentReturn {
     sessionId: string | null;
     sendMessage: (text: string) => Promise<void>;
+    stopSession: () => Promise<void>;
     respondToPermission: (response: PermissionResponse) => Promise<void>;
 }
 export declare function useAgent(store: ChatStore, config?: UseAgentConfig): UseAgentReturn;

package/dist/use-agent.js

@@ -3,6 +3,7 @@ export function useAgent(store, config) {
     const endpoint = config?.endpoint ?? "/api";
     const onCustomEvent = config?.onCustomEvent;
     const eventSourceRef = useRef(null);
+    const abortedRef = useRef(false);
     const sessionId = useSyncExternalStore(store.subscribe, () => store.getState().sessionId);
     useEffect(() => {
         let cancelled = false;
@@ -22,6 +23,7 @@ export function useAgent(store, config) {
             return;
         const es = new EventSource(`${endpoint}/sessions/${sessionId}/events`);
         eventSourceRef.current = es;
+        abortedRef.current = false;
         es.addEventListener("message_start", () => {
             store.getState().setThinking(true);
         });
@@ -66,20 +68,45 @@ export function useAgent(store, config) {
             store.getState().flushStreamingThinking();
             store.getState().flushStreamingText();
             store.getState().setThinking(false);
-            const { subtype } = JSON.parse(e.data);
-            store.getState().addSystemMessage(`Session ended: ${subtype}`);
             store.getState().setStreaming(false);
+            if (abortedRef.current) {
+                store.getState().cancelInflightToolCalls();
+                store.getState().addSystemMessage("Interrupted");
+                abortedRef.current = false;
+            }
+            else {
+                const { subtype } = JSON.parse(e.data);
+                store.getState().addSystemMessage(`Session ended: ${subtype}`);
+            }
         });
-        es.addEventListener("turn_complete", () => {
+        es.addEventListener("turn_complete", (e) => {
+            const { cost, numTurns } = JSON.parse(e.data);
             store.getState().flushStreamingThinking();
             store.getState().flushStreamingText();
             store.getState().setThinking(false);
             store.getState().setStreaming(false);
+            store.getState().addCost(cost ?? 0, numTurns ?? 0);
+            if (abortedRef.current) {
+                store.getState().cancelInflightToolCalls();
+                store.getState().addSystemMessage("Interrupted");
+                abortedRef.current = false;
+            }
         });
         es.addEventListener("error", () => {
-            if (es.readyState === EventSource.CLOSED) {
+            if (abortedRef.current) {
+                store.getState().flushStreamingThinking();
+                store.getState().flushStreamingText();
+                store.getState().cancelInflightToolCalls();
+                store.getState().setThinking(false);
+                store.getState().setStreaming(false);
+                store.getState().addSystemMessage("Interrupted");
+                abortedRef.current = false;
+                es.close();
+            }
+            else if (es.readyState === EventSource.CLOSED) {
                 store.getState().flushStreamingThinking();
                 store.getState().flushStreamingText();
+                store.getState().setThinking(false);
                 store.getState().setStreaming(false);
             }
         });
@@ -105,6 +132,14 @@ export function useAgent(store, config) {
             body: JSON.stringify({ text }),
         });
     }, [sessionId, endpoint, store]);
+    const stopSession = useCallback(async () => {
+        if (!sessionId)
+            return;
+        abortedRef.current = true;
+        store.getState().setThinking(false);
+        store.getState().setStreaming(false);
+        await fetch(`${endpoint}/sessions/${sessionId}/abort`, { method: "POST" });
+    }, [sessionId, endpoint, store]);
     const respondToPermission = useCallback(async (response) => {
         if (!sessionId)
             return;
@@ -115,5 +150,5 @@ export function useAgent(store, config) {
             body: JSON.stringify(response),
         });
     }, [sessionId, endpoint, store]);
-    return { sessionId, sendMessage, respondToPermission };
+    return { sessionId, sendMessage, stopSession, respondToPermission };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neeter/react",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "React components and hooks for building chat UIs on top of the Claude Agent SDK",
   "license": "MIT",
   "author": "Dan Leeper",
@@ -20,12 +20,13 @@
   },
   "files": [
     "dist",
-    "src/theme.css"
+    "src/theme.css",
+    "README.md"
   ],
   "dependencies": {
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
-    "@neeter/types": "0.7.1"
+    "@neeter/types": "0.8.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",