anyclaude-react 0.1.0 → 0.2.1

package/dist/client.d.ts

@@ -1,11 +1,31 @@
 import type { SDKMessage } from 'anyclaude-sdk';
+export interface ClientToolResult {
+    tool_use_id: string;
+    content: string | unknown;
+    is_error?: boolean;
+}
 export interface RunOptions {
     prompt: string;
     sessionId: string;
     continueRun?: boolean;
+    /** Results of host-executed client tools, carried into a continuation run. */
+    clientToolResults?: ClientToolResult[];
 }
 /** Produces the raw SDKMessage stream for one underlying run (in-process or remote). */
 export type RunFn = (opts: RunOptions) => AsyncIterable<SDKMessage>;
+/** Executor for a host/client-side tool (e.g. run `bash` on a WebContainer). */
+export type ClientToolExecutor = (input: Record<string, unknown>, req: {
+    tool_use_id: string;
+    name: string;
+}) => Promise<{
+    content: string | unknown;
+    is_error?: boolean;
+}> | {
+    content: string | unknown;
+    is_error?: boolean;
+};
+/** Map of tool name → host executor. */
+export type ClientToolMap = Record<string, ClientToolExecutor>;
 export interface AgentClient {
     /** Stream one logical run for `prompt` under `sessionId`, survivor-stitched. */
     send(prompt: string, sessionId: string): AsyncIterable<SDKMessage>;
@@ -13,10 +33,13 @@ export interface AgentClient {
 /**
  * Build an AgentClient from a `run` function. `run` does ONE underlying run —
  * e.g. wrapping the SDK's `query()` in-process, or a fetch to a serverless
- * endpoint. The stitching across `paused` boundaries is handled here.
+ * endpoint. This stitches across `paused` boundaries (survivor) AND executes
+ * client-side tools: on a `client_tool_request`, it runs the matching
+ * `clientTools` executor and feeds the result into the continuation.
  */
-export declare function createAgentClient({ run }: {
+export declare function createAgentClient({ run, clientTools }: {
     run: RunFn;
+    clientTools?: ClientToolMap;
 }): AgentClient;
 export interface EndpointClientOptions {
     /** URL of a serverless function that streams NDJSON SDKMessages. */
@@ -24,6 +47,8 @@ export interface EndpointClientOptions {
     headers?: Record<string, string>;
     /** Extra fields merged into the POST body (e.g. model, auth context). */
     body?: Record<string, unknown>;
+    /** Host executors for client-side tools (e.g. run `bash` on a WebContainer). */
+    clientTools?: ClientToolMap;
 }
 /**
  * AgentClient backed by a serverless function. POSTs `{ prompt, sessionId,

package/dist/client.js

@@ -1,25 +1,58 @@
 function isPaused(m) {
     return m.type === 'system' && m.subtype === 'paused';
 }
+function clientToolReq(m) {
+    if (m.type === 'system' && m.subtype === 'client_tool_request') {
+        return m.request ?? null;
+    }
+    return null;
+}
 /**
  * Build an AgentClient from a `run` function. `run` does ONE underlying run —
  * e.g. wrapping the SDK's `query()` in-process, or a fetch to a serverless
- * endpoint. The stitching across `paused` boundaries is handled here.
+ * endpoint. This stitches across `paused` boundaries (survivor) AND executes
+ * client-side tools: on a `client_tool_request`, it runs the matching
+ * `clientTools` executor and feeds the result into the continuation.
  */
-export function createAgentClient({ run }) {
+export function createAgentClient({ run, clientTools }) {
     return {
         async *send(prompt, sessionId) {
             let continueRun = false;
+            let pending;
             for (;;) {
                 let paused = false;
-                for await (const m of run({ prompt: continueRun ? '' : prompt, sessionId, continueRun })) {
+                const requests = [];
+                for await (const m of run({ prompt: continueRun ? '' : prompt, sessionId, continueRun, clientToolResults: pending })) {
+                    const req = clientToolReq(m);
+                    if (req)
+                        requests.push(req);
                     if (isPaused(m))
                         paused = true;
-                    yield m; // forward everything (incl. the paused boundary) — consumers may show "paused"
+                    yield m; // forward everything (incl. paused + client_tool_request) so the UI can react
                 }
                 if (!paused)
                     break;
-                continueRun = true; // next iteration resumes + continues the same session
+                continueRun = true;
+                // Execute any client-side tool requests, carry the results into the next run.
+                pending = undefined;
+                if (requests.length && clientTools) {
+                    pending = [];
+                    for (const req of requests) {
+                        const exec = clientTools[req.name];
+                        try {
+                            if (!exec) {
+                                pending.push({ tool_use_id: req.tool_use_id, content: `No client executor for tool "${req.name}".`, is_error: true });
+                            }
+                            else {
+                                const r = await exec(req.input, { tool_use_id: req.tool_use_id, name: req.name });
+                                pending.push({ tool_use_id: req.tool_use_id, content: r.content, is_error: r.is_error });
+                            }
+                        }
+                        catch (e) {
+                            pending.push({ tool_use_id: req.tool_use_id, content: `Error: ${e instanceof Error ? e.message : String(e)}`, is_error: true });
+                        }
+                    }
+                }
             }
         },
     };
@@ -30,11 +63,11 @@ export function createAgentClient({ run }) {
  * SDKMessages. Survivor-stitched automatically.
  */
 export function createEndpointClient(opts) {
-    const run = async function* ({ prompt, sessionId, continueRun }) {
+    const run = async function* ({ prompt, sessionId, continueRun, clientToolResults }) {
         const res = await fetch(opts.endpoint, {
             method: 'POST',
             headers: { 'content-type': 'application/json', ...opts.headers },
-            body: JSON.stringify({ prompt, sessionId, continueRun, ...opts.body }),
+            body: JSON.stringify({ prompt, sessionId, continueRun, clientToolResults, ...opts.body }),
         });
         if (!res.body)
             return;
@@ -70,5 +103,5 @@ export function createEndpointClient(opts) {
             }
         }
     };
-    return createAgentClient({ run });
+    return createAgentClient({ run, clientTools: opts.clientTools });
 }

package/dist/components/AskUser.d.ts

@@ -0,0 +1,21 @@
+export interface AskUserQuestion {
+    question: string;
+    header?: string;
+    options: Array<{
+        label: string;
+        description?: string;
+    }>;
+    multiSelect?: boolean;
+}
+export interface AskUserProps {
+    question: AskUserQuestion;
+    /** Called with the chosen label (single) or labels (multiSelect). */
+    onAnswer: (answer: string | string[]) => void;
+    className?: string;
+}
+/**
+ * Renders an `ask_user_question` prompt as option buttons and resolves the
+ * answer. Wire it to the SDK's `onAskUser` handler: store the question + a
+ * resolver in state, render <AskUser>, and call the resolver from onAnswer.
+ */
+export declare function AskUser({ question, onAnswer, className }: AskUserProps): import("react").JSX.Element;

package/dist/components/AskUser.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * Renders an `ask_user_question` prompt as option buttons and resolves the
+ * answer. Wire it to the SDK's `onAskUser` handler: store the question + a
+ * resolver in state, render <AskUser>, and call the resolver from onAnswer.
+ */
+export function AskUser({ question, onAnswer, className }) {
+    const [selected, setSelected] = useState([]);
+    const multi = !!question.multiSelect;
+    const toggle = (label) => setSelected((s) => (s.includes(label) ? s.filter((l) => l !== label) : [...s, label]));
+    return (_jsxs("div", { className: `ac-askuser${className ? ' ' + className : ''}`, children: [question.header && _jsx("span", { className: "ac-askuser-header", children: question.header }), _jsx("div", { className: "ac-askuser-question", children: question.question }), _jsx("div", { className: "ac-askuser-options", children: question.options.map((o) => {
+                    const isSel = selected.includes(o.label);
+                    return (_jsxs("button", { className: 'ac-askuser-option' + (isSel ? ' ac-selected' : ''), onClick: () => (multi ? toggle(o.label) : onAnswer(o.label)), children: [_jsx("span", { className: "ac-askuser-label", children: o.label }), o.description && _jsx("span", { className: "ac-askuser-desc", children: o.description })] }, o.label));
+                }) }), multi && (_jsxs("button", { className: "ac-askuser-submit", disabled: !selected.length, onClick: () => onAnswer(selected), children: ["Submit", selected.length ? ` (${selected.length})` : ''] }))] }));
+}

package/dist/components/ChatPanel.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { type UseAgentOptions } from '../useAgent.js';
+export interface ChatPanelProps extends UseAgentOptions {
+    className?: string;
+    /** Panel title shown in the header. */
+    title?: ReactNode;
+    placeholder?: string;
+    workingLabel?: string;
+    renderMarkdown?: (text: string) => ReactNode;
+    /** Show the tokens · cost · status line in the header. Default true. */
+    showStats?: boolean;
+}
+/**
+ * A polished chat panel: header (title + live status/tokens/cost) + Transcript +
+ * Working + Composer, wired to useAgent. Like <AgentChat> but with a header bar.
+ */
+export declare function ChatPanel({ className, title, placeholder, workingLabel, renderMarkdown, showStats, ...agentOpts }: ChatPanelProps): import("react").JSX.Element;

package/dist/components/ChatPanel.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAgent } from '../useAgent.js';
+import { Transcript } from './Transcript.js';
+import { Composer } from './Composer.js';
+import { Working } from './Working.js';
+/**
+ * A polished chat panel: header (title + live status/tokens/cost) + Transcript +
+ * Working + Composer, wired to useAgent. Like <AgentChat> but with a header bar.
+ */
+export function ChatPanel({ className, title = 'Agent', placeholder, workingLabel, renderMarkdown, showStats = true, ...agentOpts }) {
+    const { messages, streamingText, status, tokens, cost, send } = useAgent(agentOpts);
+    const running = status !== 'idle';
+    return (_jsxs("div", { className: `ac-chatpanel${className ? ' ' + className : ''}`, children: [_jsxs("div", { className: "ac-chatpanel-head", children: [_jsx("span", { className: "ac-chatpanel-title", children: title }), showStats && (_jsxs("span", { className: "ac-chatpanel-stats", children: [_jsx("span", { className: 'ac-status ac-status-' + status, children: status }), tokens ? _jsxs("span", { className: "ac-stat", children: [" \u00B7 ", tokens.toLocaleString(), " tok"] }) : null, cost ? _jsxs("span", { className: "ac-stat", children: [" \u00B7 $", cost.toFixed(4)] }) : null] }))] }), _jsx(Transcript, { messages: messages, streamingText: streamingText, renderMarkdown: renderMarkdown }), _jsx(Working, { active: running, label: workingLabel, paused: status === 'paused' }), _jsx(Composer, { onSend: send, placeholder: placeholder, disabled: running })] }));
+}

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,17 @@
+import { type Extension } from '@codemirror/state';
+export interface CodeEditorProps {
+    /** The document text (controlled). */
+    value: string;
+    onChange?: (value: string) => void;
+    /** Language for highlighting. Currently 'javascript'/'typescript' supported out of the box. */
+    language?: string;
+    readOnly?: boolean;
+    className?: string;
+    /** Extra CodeMirror extensions to append. */
+    extensions?: Extension[];
+}
+/**
+ * A CodeMirror 6 editor. Controlled via `value`/`onChange`. Requires the optional
+ * peer deps `codemirror` + `@codemirror/*`.
+ */
+export declare function CodeEditor({ value, onChange, language, readOnly, className, extensions }: CodeEditorProps): import("react").JSX.Element;

package/dist/components/CodeEditor.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { EditorView, keymap, lineNumbers, highlightActiveLine } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { javascript } from '@codemirror/lang-javascript';
+/**
+ * A CodeMirror 6 editor. Controlled via `value`/`onChange`. Requires the optional
+ * peer deps `codemirror` + `@codemirror/*`.
+ */
+export function CodeEditor({ value, onChange, language = 'typescript', readOnly = false, className, extensions = [] }) {
+    const hostRef = useRef(null);
+    const viewRef = useRef(null);
+    useEffect(() => {
+        if (!hostRef.current)
+            return;
+        const langExt = language === 'javascript' ? javascript({ jsx: true }) : javascript({ typescript: true, jsx: true });
+        const view = new EditorView({
+            parent: hostRef.current,
+            state: EditorState.create({
+                doc: value,
+                extensions: [
+                    lineNumbers(),
+                    highlightActiveLine(),
+                    history(),
+                    langExt,
+                    keymap.of([...defaultKeymap, ...historyKeymap]),
+                    EditorView.editable.of(!readOnly),
+                    EditorView.updateListener.of((u) => {
+                        if (u.docChanged && onChange)
+                            onChange(u.state.doc.toString());
+                    }),
+                    EditorView.theme({ '&': { height: '100%', fontSize: '13px' }, '.cm-scroller': { fontFamily: 'ui-monospace, monospace' } }),
+                    ...extensions,
+                ],
+            }),
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [language, readOnly]);
+    // Sync external value changes into the editor (without clobbering local edits).
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        if (value !== view.state.doc.toString()) {
+            view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+        }
+    }, [value]);
+    return _jsx("div", { className: `ac-editor-host${className ? ' ' + className : ''}`, ref: hostRef });
+}

package/dist/components/FileExplorer.d.ts

@@ -0,0 +1,21 @@
+export interface FileEntry {
+    name: string;
+    isDir: boolean;
+}
+export interface FileExplorerProps {
+    /** List a directory's immediate children. Adapt any FS (WebContainer, SDK FileSystem, …). */
+    list: (dir: string) => Promise<FileEntry[]>;
+    /** Root directory to show. Default '/'. */
+    root?: string;
+    /** Currently-open file path (highlighted). */
+    openPath?: string | null;
+    onOpen: (path: string) => void;
+    /** Bump to force a re-read (e.g. after the agent writes files). */
+    refreshKey?: number;
+    className?: string;
+    title?: string;
+    /** Directory names to skip. Default: node_modules, .git, .bcs. */
+    ignore?: string[];
+}
+/** A collapsible file tree over any filesystem (provide a `list(dir)` adapter). */
+export declare function FileExplorer({ list, root, openPath, onOpen, refreshKey, className, title, ignore }: FileExplorerProps): import("react").JSX.Element;

package/dist/components/FileExplorer.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/** A collapsible file tree over any filesystem (provide a `list(dir)` adapter). */
+export function FileExplorer({ list, root = '/', openPath, onOpen, refreshKey = 0, className, title = 'Files', ignore }) {
+    const [nodes, setNodes] = useState([]);
+    const ignoreSet = new Set(ignore ?? ['node_modules', '.git', '.bcs']);
+    useEffect(() => {
+        let cancelled = false;
+        list(root)
+            .then((entries) => {
+            if (cancelled)
+                return;
+            const mapped = entries
+                .filter((e) => !ignoreSet.has(e.name))
+                .map((e) => ({ ...e, path: root === '/' ? `/${e.name}` : `${root}/${e.name}` }))
+                .sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1));
+            setNodes(mapped);
+        })
+            .catch(() => setNodes([]));
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [root, refreshKey]);
+    return (_jsxs("div", { className: `ac-explorer${className ? ' ' + className : ''}`, children: [_jsx("div", { className: "ac-explorer-head", children: title }), _jsx("div", { className: "ac-tree", children: nodes.map((n) => (_jsx(TreeNode, { node: n, depth: 0, list: list, openPath: openPath ?? null, onOpen: onOpen, ignore: ignoreSet, refreshKey: refreshKey }, n.path))) })] }));
+}
+function TreeNode({ node, depth, list, openPath, onOpen, ignore, refreshKey }) {
+    const [open, setOpen] = useState(depth < 1);
+    const [children, setChildren] = useState(null);
+    const pad = { paddingLeft: 6 + depth * 12 };
+    useEffect(() => {
+        if (!node.isDir || !open)
+            return;
+        let cancelled = false;
+        list(node.path)
+            .then((entries) => {
+            if (cancelled)
+                return;
+            setChildren(entries
+                .filter((e) => !ignore.has(e.name))
+                .map((e) => ({ ...e, path: `${node.path}/${e.name}` }))
+                .sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)));
+        })
+            .catch(() => setChildren([]));
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, node.path, refreshKey]);
+    if (node.isDir) {
+        return (_jsxs("div", { children: [_jsxs("div", { className: "ac-tree-row ac-dir", style: pad, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: "ac-tree-caret", children: open ? '▾' : '▸' }), " ", node.name] }), open && children?.map((c) => _jsx(TreeNode, { node: c, depth: depth + 1, list: list, openPath: openPath, onOpen: onOpen, ignore: ignore, refreshKey: refreshKey }, c.path))] }));
+    }
+    return (_jsx("div", { className: 'ac-tree-row ac-file' + (openPath === node.path ? ' ac-active' : ''), style: pad, onClick: () => onOpen(node.path), children: node.name }));
+}

package/dist/components/Message.d.ts

@@ -10,8 +10,8 @@ export interface MarkdownMessageProps {
     text: string;
     role?: 'user' | 'assistant';
     className?: string;
-    /** Override the markdown renderer (default: built-in safe renderer). */
+    /** Override the markdown renderer (default: streamdown, streaming-aware). */
     render?: (text: string) => ReactNode;
 }
-/** An assistant bubble whose text is rendered as markdown. */
+/** An assistant bubble whose text is rendered as markdown via streamdown. */
 export declare function MarkdownMessage({ text, role, className, render }: MarkdownMessageProps): import("react").JSX.Element;

package/dist/components/Message.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { renderMarkdown } from '../markdown.js';
+import { Streamdown } from 'streamdown';
 /** A plain chat bubble. */
 export function Message({ role, children, className }) {
     return (_jsxs("div", { className: `ac-msg ac-msg-${role}${className ? ' ' + className : ''}`, "data-role": role, children: [role === 'user' && _jsx("span", { className: "ac-msg-prefix", "aria-hidden": true, children: "\u203A" }), _jsx("div", { className: "ac-msg-body", children: children })] }));
 }
-/** An assistant bubble whose text is rendered as markdown. */
+/** An assistant bubble whose text is rendered as markdown via streamdown. */
 export function MarkdownMessage({ text, role = 'assistant', className, render }) {
-    return (_jsx(Message, { role: role, className: `ac-msg-md${className ? ' ' + className : ''}`, children: (render ?? renderMarkdown)(text) }));
+    return (_jsx(Message, { role: role, className: `ac-msg-md${className ? ' ' + className : ''}`, children: render ? render(text) : _jsx(Streamdown, { children: text }) }));
 }

package/dist/components/Terminal.d.ts

@@ -0,0 +1,28 @@
+import '@xterm/xterm/css/xterm.css';
+/** A live shell process (structurally compatible with a WebContainer process). */
+export interface ShellProcess {
+    output: ReadableStream<string>;
+    input: WritableStream<string>;
+    resize?(size: {
+        cols: number;
+        rows: number;
+    }): void;
+    kill?(): void;
+}
+export interface TerminalProps {
+    /** Spawn a shell process for the given terminal size (e.g. wc.spawn('jsh', {terminal})). */
+    spawn: (size: {
+        cols: number;
+        rows: number;
+    }) => Promise<ShellProcess>;
+    className?: string;
+    /** Header label; pass null to hide the header. */
+    title?: string | null;
+    fontSize?: number;
+}
+/**
+ * An interactive xterm.js terminal bound to a streaming shell process. Backend-
+ * agnostic — pass any `spawn` that returns a {output, input, resize?, kill?}.
+ * Requires the optional peer deps `@xterm/xterm` + `@xterm/addon-fit`.
+ */
+export declare function Terminal({ spawn, className, title, fontSize }: TerminalProps): import("react").JSX.Element;

package/dist/components/Terminal.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Terminal as XTerm } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+/**
+ * An interactive xterm.js terminal bound to a streaming shell process. Backend-
+ * agnostic — pass any `spawn` that returns a {output, input, resize?, kill?}.
+ * Requires the optional peer deps `@xterm/xterm` + `@xterm/addon-fit`.
+ */
+export function Terminal({ spawn, className, title = 'Terminal', fontSize = 13 }) {
+    const hostRef = useRef(null);
+    useEffect(() => {
+        if (!hostRef.current)
+            return;
+        let disposed = false;
+        let shell = null;
+        let writer = null;
+        const term = new XTerm({
+            convertEol: true,
+            cursorBlink: true,
+            fontSize,
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+            theme: { background: '#0b0e14', foreground: '#cbd5e1' },
+        });
+        const fit = new FitAddon();
+        term.loadAddon(fit);
+        term.open(hostRef.current);
+        const safeFit = () => {
+            const el = hostRef.current;
+            if (!el || el.clientWidth === 0 || el.clientHeight === 0)
+                return;
+            try {
+                fit.fit();
+                shell?.resize?.({ cols: term.cols, rows: term.rows });
+            }
+            catch {
+                /* not ready */
+            }
+        };
+        const raf = requestAnimationFrame(safeFit);
+        void (async () => {
+            shell = await spawn({ cols: term.cols, rows: term.rows });
+            if (disposed) {
+                shell.kill?.();
+                return;
+            }
+            shell.output
+                .pipeTo(new WritableStream({ write: (chunk) => term.write(chunk) }))
+                .catch(() => { });
+            writer = shell.input.getWriter();
+            term.onData((d) => void writer?.write(d));
+        })();
+        const ro = new ResizeObserver(() => safeFit());
+        ro.observe(hostRef.current);
+        return () => {
+            disposed = true;
+            cancelAnimationFrame(raf);
+            ro.disconnect();
+            try {
+                writer?.releaseLock();
+            }
+            catch {
+                /* ignore */
+            }
+            shell?.kill?.();
+            term.dispose();
+        };
+    }, [spawn, fontSize]);
+    return (_jsxs("div", { className: `ac-terminal${className ? ' ' + className : ''}`, children: [title !== null && _jsx("div", { className: "ac-terminal-head", children: title }), _jsx("div", { className: "ac-terminal-host", ref: hostRef })] }));
+}

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { createAgentClient, createEndpointClient } from './client.js';
-export type { AgentClient, RunFn, RunOptions, EndpointClientOptions } from './client.js';
+export type { AgentClient, RunFn, RunOptions, EndpointClientOptions, ClientToolMap, ClientToolExecutor, ClientToolResult, } from './client.js';
 export { useAgent } from './useAgent.js';
 export type { UseAgentOptions, UseAgentResult, AgentStatus } from './useAgent.js';
 export { renderMarkdown } from './markdown.js';
@@ -15,3 +15,13 @@ export { Transcript } from './components/Transcript.js';
 export type { TranscriptProps } from './components/Transcript.js';
 export { AgentChat } from './components/AgentChat.js';
 export type { AgentChatProps } from './components/AgentChat.js';
+export { ChatPanel } from './components/ChatPanel.js';
+export type { ChatPanelProps } from './components/ChatPanel.js';
+export { Terminal } from './components/Terminal.js';
+export type { TerminalProps, ShellProcess } from './components/Terminal.js';
+export { FileExplorer } from './components/FileExplorer.js';
+export type { FileExplorerProps, FileEntry } from './components/FileExplorer.js';
+export { CodeEditor } from './components/CodeEditor.js';
+export type { CodeEditorProps } from './components/CodeEditor.js';
+export { AskUser } from './components/AskUser.js';
+export type { AskUserProps, AskUserQuestion } from './components/AskUser.js';

package/dist/index.js

@@ -8,3 +8,9 @@ export { Composer } from './components/Composer.js';
 export { Working } from './components/Working.js';
 export { Transcript } from './components/Transcript.js';
 export { AgentChat } from './components/AgentChat.js';
+export { ChatPanel } from './components/ChatPanel.js';
+// IDE-grade components (optional peer deps: @xterm/*, @codemirror/*)
+export { Terminal } from './components/Terminal.js';
+export { FileExplorer } from './components/FileExplorer.js';
+export { CodeEditor } from './components/CodeEditor.js';
+export { AskUser } from './components/AskUser.js';

package/dist/useAgent.d.ts

@@ -1,5 +1,5 @@
 import type { SDKMessage } from 'anyclaude-sdk';
-import { type AgentClient, type RunFn } from './client.js';
+import { type AgentClient, type RunFn, type ClientToolMap } from './client.js';
 export type AgentStatus = 'idle' | 'running' | 'paused';
 export interface UseAgentOptions {
     /** Provide ONE of these. */
@@ -7,6 +7,8 @@ export interface UseAgentOptions {
     run?: RunFn;
     endpoint?: string;
     headers?: Record<string, string>;
+    /** Host executors for client-side tools (e.g. run `bash` on a WebContainer). */
+    clientTools?: ClientToolMap;
     /** Stable id for this conversation (survivor continuation reuses it). Auto if omitted. */
     sessionId?: string;
 }

package/dist/useAgent.js

@@ -10,9 +10,9 @@ function resolveClient(opts) {
     if (opts.client)
         return opts.client;
     if (opts.run)
-        return createAgentClient({ run: opts.run });
+        return createAgentClient({ run: opts.run, clientTools: opts.clientTools });
     if (opts.endpoint)
-        return createEndpointClient({ endpoint: opts.endpoint, headers: opts.headers });
+        return createEndpointClient({ endpoint: opts.endpoint, headers: opts.headers, clientTools: opts.clientTools });
     throw new Error('useAgent: provide one of `client`, `run`, or `endpoint`.');
 }
 export function useAgent(opts) {
@@ -26,7 +26,7 @@ export function useAgent(opts) {
     const runningRef = useRef(false);
     const client = useMemo(() => resolveClient(opts), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [opts.client, opts.run, opts.endpoint, opts.headers]);
+    [opts.client, opts.run, opts.endpoint, opts.headers, opts.clientTools]);
     const send = useCallback((text) => {
         const t = text.trim();
         if (!t || runningRef.current)

package/package.json

@@ -1,22 +1,100 @@
 {
   "name": "anyclaude-react",
-  "version": "0.1.0",
-  "description": "React UI kit for anyclaude-sdk — restylable hooks + components (useAgent, Transcript, Composer, AgentChat) with built-in serverless 'survivor' stream-stitching. Build chatbots, agents, research assistants.",
+  "version": "0.2.1",
+  "description": "React UI kit for anyclaude-sdk — restylable hooks + components (useAgent, Transcript, Composer, AgentChat, Terminal, FileExplorer, CodeEditor, ChatPanel, AskUser) with built-in serverless 'survivor' stream-stitching. Build chatbots, agents, research assistants, browser IDEs.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./styles.css": "./styles.css"
   },
-  "files": ["dist", "styles.css"],
-  "sideEffects": ["*.css"],
-  "scripts": { "build": "tsc -p tsconfig.json", "typecheck": "tsc -p tsconfig.json --noEmit", "prepublishOnly": "npm run build" },
-  "keywords": ["anyclaude", "claude", "agent", "react", "ai-chat", "chatbot", "ui", "hooks"],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "sideEffects": [
+    "*.css",
+    "@xterm/xterm/css/xterm.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "anyclaude",
+    "claude",
+    "agent",
+    "react",
+    "ai-chat",
+    "chatbot",
+    "ui",
+    "hooks",
+    "terminal",
+    "ide",
+    "codemirror",
+    "xterm"
+  ],
   "license": "MIT",
   "author": "Hans Ade <anye.happiness@swisslinkedu.com>",
-  "repository": { "type": "git", "url": "git+https://github.com/pipilot-dev/anyclaude-sdk.git", "directory": "anyclaude-react" },
-  "peerDependencies": { "react": ">=18", "anyclaude-sdk": ">=0.1.0" },
-  "devDependencies": { "@types/react": "^18.3.0", "react": "^18.3.1", "typescript": "^5.4.0" }
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pipilot-dev/anyclaude-sdk.git",
+    "directory": "anyclaude-react"
+  },
+  "peerDependencies": {
+    "@codemirror/commands": ">=6.0.0",
+    "@codemirror/lang-javascript": ">=6.0.0",
+    "@codemirror/state": ">=6.0.0",
+    "@codemirror/view": ">=6.0.0",
+    "@xterm/addon-fit": ">=0.10.0",
+    "@xterm/xterm": ">=5.3.0",
+    "anyclaude-sdk": ">=0.1.0",
+    "codemirror": ">=6.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@xterm/xterm": {
+      "optional": true
+    },
+    "@xterm/addon-fit": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/commands": {
+      "optional": true
+    },
+    "@codemirror/lang-javascript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.34.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.0"
+  },
+  "dependencies": {
+    "streamdown": "^2.5.0"
+  }
 }

package/styles.css

@@ -22,6 +22,11 @@
 }
 
 .ac-transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px; }
+/* The transcript is a flex column; children must NOT shrink. Tool pills use
+   overflow:hidden (→ flex min-height:0), so without this they collapse to a
+   sliver and the error border reads as a stray red line. They should keep their
+   natural height and let the transcript scroll. */
+.ac-transcript > * { flex-shrink: 0; }
 
 .ac-msg { display: flex; gap: 8px; }
 .ac-msg-user { color: var(--ac-user); }
@@ -37,7 +42,7 @@
 .ac-code-inline { font-family: var(--ac-mono); background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: 6px; padding: 1px 5px; font-size: 0.9em; }
 .ac-code-block { font-family: var(--ac-mono); background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); padding: 12px 14px; overflow-x: auto; margin: 10px 0; }
 
-.ac-tool { border: 1px solid var(--ac-border); border-radius: 10px; background: var(--ac-panel); margin: 2px 0; overflow: hidden; }
+.ac-tool { border: 1px solid var(--ac-border); border-radius: 10px; background: var(--ac-panel); margin: 2px 0; overflow: hidden; flex-shrink: 0; }
 .ac-tool-error { border-color: #b3403a; }
 .ac-tool-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--ac-accent); padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; }
 .ac-tool-caret { color: var(--ac-muted); }
@@ -58,3 +63,49 @@
 .ac-composer-input:focus { outline: none; border-color: var(--ac-accent); }
 .ac-composer-send { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ac-accent); color: #00121a; border: 0; cursor: pointer; flex: none; }
 .ac-composer-send:disabled { opacity: 0.4; cursor: default; }
+
+/* ---- shared vars (so IDE components work outside .ac-chat) ---- */
+:root {
+  --ac-bg: #0d1117; --ac-fg: #e6edf3; --ac-muted: #8b949e; --ac-border: #232c3d;
+  --ac-accent: #4dd0e1; --ac-user: #5fd75f; --ac-panel: #161b22; --ac-radius: 12px;
+  --ac-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* ---- ChatPanel ---- */
+.ac-chatpanel { display: flex; flex-direction: column; height: 100%; background: var(--ac-bg); color: var(--ac-fg); font: 15px/1.55 system-ui, sans-serif; }
+.ac-chatpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--ac-border); font-size: 14px; }
+.ac-chatpanel-title { font-weight: 600; }
+.ac-chatpanel-stats { color: var(--ac-muted); font-family: var(--ac-mono); font-size: 12.5px; }
+.ac-status { text-transform: capitalize; }
+.ac-status-running { color: var(--ac-accent); }
+.ac-status-paused { color: #ffd75f; }
+
+/* ---- Terminal ---- */
+.ac-terminal { display: flex; flex-direction: column; height: 100%; background: #0b0e14; border: 1px solid var(--ac-border); border-radius: var(--ac-radius); overflow: hidden; }
+.ac-terminal-head { padding: 6px 12px; font-family: var(--ac-mono); font-size: 12px; color: var(--ac-muted); border-bottom: 1px solid var(--ac-border); }
+.ac-terminal-host { flex: 1; min-height: 0; padding: 6px; }
+
+/* ---- FileExplorer ---- */
+.ac-explorer { background: var(--ac-panel); border: 1px solid var(--ac-border); border-radius: var(--ac-radius); overflow: auto; font-size: 13px; color: var(--ac-fg); }
+.ac-explorer-head { padding: 8px 12px; font-weight: 600; color: var(--ac-muted); border-bottom: 1px solid var(--ac-border); }
+.ac-tree-row { padding: 4px 8px; cursor: pointer; white-space: nowrap; font-family: var(--ac-mono); }
+.ac-tree-row:hover { background: rgba(255,255,255,0.05); }
+.ac-tree-row.ac-active { background: rgba(77,208,225,0.16); color: var(--ac-accent); }
+.ac-tree-caret { opacity: 0.7; }
+.ac-dir { color: var(--ac-fg); }
+
+/* ---- CodeEditor ---- */
+.ac-editor-host { height: 100%; overflow: hidden; border: 1px solid var(--ac-border); border-radius: var(--ac-radius); }
+.ac-editor-host .cm-editor { height: 100%; }
+
+/* ---- AskUser ---- */
+.ac-askuser { border: 1px solid var(--ac-accent); border-radius: var(--ac-radius); background: var(--ac-panel); padding: 12px 14px; margin: 8px 0; }
+.ac-askuser-header { display: inline-block; font-family: var(--ac-mono); font-size: 11px; text-transform: uppercase; color: var(--ac-accent); margin-bottom: 4px; }
+.ac-askuser-question { font-weight: 600; margin-bottom: 10px; }
+.ac-askuser-options { display: flex; flex-direction: column; gap: 6px; }
+.ac-askuser-option { text-align: left; background: var(--ac-bg); border: 1px solid var(--ac-border); border-radius: 8px; padding: 8px 10px; color: var(--ac-fg); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
+.ac-askuser-option:hover, .ac-askuser-option.ac-selected { border-color: var(--ac-accent); }
+.ac-askuser-label { font-weight: 600; }
+.ac-askuser-desc { color: var(--ac-muted); font-size: 13px; }
+.ac-askuser-submit { margin-top: 10px; background: var(--ac-accent); color: #001016; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
+.ac-askuser-submit:disabled { opacity: 0.5; cursor: default; }