@neeter/react 0.7.1 → 0.8.0

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.0",
   "description": "React components and hooks for building chat UIs on top of the Claude Agent SDK",
   "license": "MIT",
   "author": "Dan Leeper",
@@ -25,7 +25,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
-    "@neeter/types": "0.7.1"
+    "@neeter/types": "0.8.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",