@neeter/react 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/dist/AgentProvider.d.ts

@@ -0,0 +1,15 @@
+import type { CustomEvent } from "@neeter/types";
+import { type ReactNode } from "react";
+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/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/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/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/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/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/CollapsibleCard.d.ts

@@ -0,0 +1,9 @@
+import type { ToolCallPhase } from "@neeter/types";
+import { type ReactNode } from "react";
+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/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/MessageList.d.ts

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

package/dist/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/PendingPermissions.d.ts

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

package/dist/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/StatusDot.d.ts

@@ -0,0 +1,8 @@
+import type { ToolCallPhase } from "@neeter/types";
+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/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/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/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 }) })) }) }));
+}

package/dist/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/ThinkingBlock.js

@@ -0,0 +1,38 @@
+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";
+import { ChevronIcon } from "./icons.js";
+import { markdownComponents } from "./markdown-overrides.js";
+import { PulsingDot } from "./StatusDot.js";
+const STORAGE_KEY = "neeter-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(ChevronIcon, { open: open }), streaming && !open && _jsx(PulsingDot, {}), _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: markdownComponents, children: children }) }));
+}

package/dist/ThinkingIndicator.d.ts

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

package/dist/ThinkingIndicator.js

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

package/dist/ToolApprovalCard.d.ts

@@ -0,0 +1,7 @@
+import type { ToolApprovalRequest } from "@neeter/types";
+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/ToolApprovalCard.js

@@ -0,0 +1,11 @@
+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";
+import { PulsingDot } from "./StatusDot.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-amber-500/40 bg-amber-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _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/ToolCallCard.d.ts

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

package/dist/ToolCallCard.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAgentContext, useChatStore } from "./AgentProvider.js";
+import { ApprovalButtons } from "./ApprovalButtons.js";
+import { findMatchingApproval } from "./approval-matching.js";
+import { CollapsibleCard } from "./CollapsibleCard.js";
+import { cn } from "./cn.js";
+import { getWidget, stripMcpPrefix } from "./registry.js";
+import { PulsingDot, StatusDot } from "./StatusDot.js";
+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 matchingApproval = findMatchingApproval(pendingPermissions, toolCall);
+    if (toolCall.status === "complete" && toolCall.result && reg) {
+        let parsed;
+        try {
+            parsed = JSON.parse(toolCall.result);
+        }
+        catch {
+            parsed = toolCall.result;
+        }
+        const displayLabel = reg.richLabel
+            ? (reg.richLabel(parsed, toolCall.input) ?? label)
+            : label;
+        const widgetProps = {
+            phase: toolCall.status,
+            toolUseId: toolCall.id,
+            input: toolCall.input,
+            partialInput: toolCall.partialInput,
+            result: parsed,
+            error: toolCall.error,
+        };
+        return (_jsx(CollapsibleCard, { label: displayLabel, status: toolCall.status, className: className, children: _jsx(reg.component, { ...widgetProps }) }));
+    }
+    if (toolCall.status === "error") {
+        return (_jsxs("div", { className: cn("flex items-center gap-2 rounded-md border border-destructive/50 bg-destructive/10 px-2.5 py-1.5 text-xs text-muted-foreground", className), children: [_jsx(StatusDot, { status: toolCall.status }), _jsx("span", { children: label }), toolCall.error && _jsx("span", { className: "ml-auto text-destructive", children: toolCall.error })] }));
+    }
+    if (matchingApproval) {
+        const InputRenderer = reg?.inputRenderer;
+        return (_jsxs("div", { className: cn("rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2.5 text-xs", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [_jsx(PulsingDot, {}), _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",
+                        });
+                    } })] }));
+    }
+    const FallbackInputRenderer = reg?.inputRenderer;
+    const hasInput = Object.keys(toolCall.input).length > 0;
+    return (_jsxs("div", { className: cn("rounded-md border border-border bg-accent/50 px-2.5 py-1.5 text-xs text-muted-foreground", className), children: [_jsxs("div", { className: "flex items-center gap-2", 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) }))] }), hasInput && FallbackInputRenderer && _jsx(FallbackInputRenderer, { input: toolCall.input })] }));
+}

package/dist/UserQuestionCard.d.ts

@@ -0,0 +1,6 @@
+import type { UserQuestionRequest } from "@neeter/types";
+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/UserQuestionCard.js

@@ -0,0 +1,120 @@
+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 wrapperRef = useRef(null);
+    const [answers, setAnswers] = useState({});
+    const [otherText, setOtherText] = useState({});
+    const otherInputRefs = useRef({});
+    // Auto-focus wrapper so number-key shortcuts work immediately
+    useEffect(() => {
+        wrapperRef.current?.focus();
+    }, []);
+    const allAnswered = request.questions.every((q) => {
+        const vals = answers[q.question];
+        if (!vals || vals.length === 0)
+            return false;
+        if (vals.includes(OTHER_LABEL))
+            return !!otherText[q.question]?.trim();
+        return true;
+    });
+    function resolvedAnswers() {
+        const resolved = {};
+        for (const q of request.questions) {
+            const vals = answers[q.question] ?? [];
+            const mapped = vals.map((v) => (v === OTHER_LABEL ? (otherText[q.question] ?? "") : v));
+            resolved[q.question] = mapped.join(", ");
+        }
+        return resolved;
+    }
+    function selectOption(question, label, multiSelect) {
+        setAnswers((prev) => {
+            if (!multiSelect)
+                return { ...prev, [question]: [label] };
+            const current = prev[question] ?? [];
+            return {
+                ...prev,
+                [question]: current.includes(label)
+                    ? current.filter((l) => l !== label)
+                    : [...current, label],
+            };
+        });
+        if (label === OTHER_LABEL) {
+            setTimeout(() => otherInputRefs.current[question]?.focus(), 0);
+        }
+    }
+    // Keyboard shortcuts: number keys select options, Enter submits
+    useEffect(() => {
+        function handleKeyDown(e) {
+            const tag = e.target?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+                return;
+            }
+            if (request.questions.length !== 1)
+                return;
+            const q = request.questions[0];
+            if (!q.options?.length)
+                return;
+            if (e.key === "Enter" && allAnswered) {
+                e.preventDefault();
+                onSubmit(resolvedAnswers());
+                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) {
+                    if (!q.multiSelect) {
+                        // Single-select: submit immediately (matches ApprovalButtons)
+                        onSubmit({ [q.question]: q.options[num - 1].label });
+                    }
+                    else {
+                        selectOption(q.question, q.options[num - 1].label, true);
+                    }
+                }
+                else {
+                    selectOption(q.question, OTHER_LABEL, q.multiSelect);
+                }
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    });
+    return (_jsxs("div", { ref: wrapperRef, tabIndex: -1, className: cn("rounded-md border border-blue-500/40 bg-blue-500/5 px-3 py-2.5 text-xs focus:outline-none", 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] ?? []).includes(opt.label);
+                                    return (_jsxs("button", { type: "button", onClick: () => {
+                                            if (!q.multiSelect && isSingleQuestion) {
+                                                onSubmit({ [q.question]: opt.label });
+                                            }
+                                            else {
+                                                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] ?? []).includes(OTHER_LABEL);
+                                    const otherIdx = (q.options?.length ?? 0) + 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 })), onKeyDown: (e) => {
+                                                    if (e.key === "Enter" && otherText[q.question]?.trim()) {
+                                                        e.preventDefault();
+                                                        onSubmit(resolvedAnswers());
+                                                    }
+                                                } }))] }));
+                                })()] })), !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] ?? [])[0] ?? "", onChange: (e) => setAnswers((prev) => ({ ...prev, [q.question]: [e.target.value] })), onKeyDown: (e) => {
+                                if (e.key === "Enter" && (answers[q.question]?.[0] ?? "").trim()) {
+                                    e.preventDefault();
+                                    onSubmit(resolvedAnswers());
+                                }
+                            } }))] }, 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/approval-matching.d.ts

@@ -0,0 +1,13 @@
+import type { ChatMessage, PermissionRequest, ToolApprovalRequest, ToolCallInfo } from "@neeter/types";
+/**
+ * Find the pending approval that matches a specific tool call.
+ * Matches by toolUseId when available, falls back to toolName.
+ * Only considers non-terminal tool calls (not complete/error).
+ */
+export declare function findMatchingApproval(pendingPermissions: PermissionRequest[], toolCall: ToolCallInfo): ToolApprovalRequest | undefined;
+/**
+ * Check if an approval request is "claimed" by any non-terminal tool call
+ * in the message list. Claimed approvals are rendered inline by ToolCallCard
+ * and should be skipped by PendingPermissions to avoid duplicate UI.
+ */
+export declare function isApprovalClaimedByToolCall(request: ToolApprovalRequest, messages: ChatMessage[]): boolean;

package/dist/approval-matching.js

@@ -0,0 +1,30 @@
+/**
+ * Find the pending approval that matches a specific tool call.
+ * Matches by toolUseId when available, falls back to toolName.
+ * Only considers non-terminal tool calls (not complete/error).
+ */
+export function findMatchingApproval(pendingPermissions, toolCall) {
+    if (toolCall.status === "complete" || toolCall.status === "error")
+        return undefined;
+    return pendingPermissions.find((p) => p.kind === "tool_approval" &&
+        (p.toolUseId ? p.toolUseId === toolCall.id : p.toolName === toolCall.name));
+}
+/**
+ * Check if an approval request is "claimed" by any non-terminal tool call
+ * in the message list. Claimed approvals are rendered inline by ToolCallCard
+ * and should be skipped by PendingPermissions to avoid duplicate UI.
+ */
+export function isApprovalClaimedByToolCall(request, messages) {
+    for (const msg of messages) {
+        if (msg.toolCalls) {
+            for (const tc of msg.toolCalls) {
+                if (tc.status === "complete" || tc.status === "error")
+                    continue;
+                if (request.toolUseId ? tc.id === request.toolUseId : tc.name === request.toolName) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}