anyclaude-react 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# anyclaude-react
+
+Restylable React UI kit for [`anyclaude-sdk`](https://www.npmjs.com/package/anyclaude-sdk) — hooks + components to build chatbots, AI agents, research assistants, and more. Includes built-in **serverless "survivor" stream-stitching** so long agent runs span function time-limits transparently.
+
+```bash
+npm install anyclaude-react anyclaude-sdk react
+```
+
+## Quick start (browser / in-process)
+
+Drive the agent in-process by wrapping the SDK's `query()` in a `run` function:
+
+```tsx
+import { AgentChat } from 'anyclaude-react'
+import 'anyclaude-react/styles.css'
+import { query, createOpenAIClient, MemoryFileSystem, NoopCommandExecutor, composeWorkspace } from 'anyclaude-sdk'
+
+const ws = composeWorkspace(new MemoryFileSystem(), new NoopCommandExecutor(), '/work')
+const llm = createOpenAIClient({ baseUrl: '…', model: 'gpt-4o', apiKey: KEY })
+
+export default function App() {
+  return (
+    <AgentChat
+      run={({ prompt, sessionId, continueRun }) =>
+        query({ prompt: continueRun ? '' : prompt, workspace: ws, llm, model: 'gpt-4o',
+                sessionId, resume: continueRun, continueRun, includePartialMessages: true })}
+    />
+  )
+}
+```
+
+## Serverless (survivor)
+
+Point at a function that streams NDJSON `SDKMessage`s. When the function pauses
+at its time-limit (`{type:'system',subtype:'paused'}`), the client auto-continues
+in a new request with the same `sessionId` — invisibly:
+
+```tsx
+<AgentChat endpoint="/api/agent" />
+```
+
+Your function runs `query({ ..., maxDurationMs, sessionStore, sessionId, resume: continueRun, continueRun })` and writes each message as a JSON line.
+
+## Hook
+
+```tsx
+const { messages, streamingText, status, tokens, cost, send, interrupt, clear } =
+  useAgent({ run /* | endpoint | client */, sessionId })
+```
+
+- `status`: `'idle' | 'running' | 'paused'`
+- `send(text)` starts/continues; `interrupt()` aborts; `clear()` resets (new session).
+
+## Components
+
+| Component | Purpose |
+|---|---|
+| `<AgentChat>` | All-in-one: Transcript + Working + Composer wired to `useAgent`. |
+| `<Transcript messages streamingText>` | Renders messages; pairs tool calls with results. |
+| `<Message>` / `<MarkdownMessage>` | Chat bubbles; safe built-in markdown (override via `render`). |
+| `<ToolCall>` | Collapsible tool call + result. |
+| `<Composer onSend>` | Textarea + send (Enter sends, Shift+Enter newline). |
+| `<Working active paused>` | Shimmering "Working…" indicator. |
+
+## Styling
+
+Everything is class-based (`.ac-*`) with `data-role` attributes. Import the
+optional `anyclaude-react/styles.css` and override the CSS variables on `.ac-chat`
+(`--ac-accent`, `--ac-bg`, `--ac-fg`, …), or skip it and style with your own
+CSS / Tailwind. No emojis — icons are inline SVG.

package/dist/client.d.ts

@@ -0,0 +1,33 @@
+import type { SDKMessage } from 'anyclaude-sdk';
+export interface RunOptions {
+    prompt: string;
+    sessionId: string;
+    continueRun?: boolean;
+}
+/** Produces the raw SDKMessage stream for one underlying run (in-process or remote). */
+export type RunFn = (opts: RunOptions) => AsyncIterable<SDKMessage>;
+export interface AgentClient {
+    /** Stream one logical run for `prompt` under `sessionId`, survivor-stitched. */
+    send(prompt: string, sessionId: string): AsyncIterable<SDKMessage>;
+}
+/**
+ * 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.
+ */
+export declare function createAgentClient({ run }: {
+    run: RunFn;
+}): AgentClient;
+export interface EndpointClientOptions {
+    /** URL of a serverless function that streams NDJSON SDKMessages. */
+    endpoint: string;
+    headers?: Record<string, string>;
+    /** Extra fields merged into the POST body (e.g. model, auth context). */
+    body?: Record<string, unknown>;
+}
+/**
+ * AgentClient backed by a serverless function. POSTs `{ prompt, sessionId,
+ * continueRun, ...body }` and reads a newline-delimited JSON stream of
+ * SDKMessages. Survivor-stitched automatically.
+ */
+export declare function createEndpointClient(opts: EndpointClientOptions): AgentClient;

package/dist/client.js

@@ -0,0 +1,74 @@
+function isPaused(m) {
+    return m.type === 'system' && m.subtype === 'paused';
+}
+/**
+ * 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.
+ */
+export function createAgentClient({ run }) {
+    return {
+        async *send(prompt, sessionId) {
+            let continueRun = false;
+            for (;;) {
+                let paused = false;
+                for await (const m of run({ prompt: continueRun ? '' : prompt, sessionId, continueRun })) {
+                    if (isPaused(m))
+                        paused = true;
+                    yield m; // forward everything (incl. the paused boundary) — consumers may show "paused"
+                }
+                if (!paused)
+                    break;
+                continueRun = true; // next iteration resumes + continues the same session
+            }
+        },
+    };
+}
+/**
+ * AgentClient backed by a serverless function. POSTs `{ prompt, sessionId,
+ * continueRun, ...body }` and reads a newline-delimited JSON stream of
+ * SDKMessages. Survivor-stitched automatically.
+ */
+export function createEndpointClient(opts) {
+    const run = async function* ({ prompt, sessionId, continueRun }) {
+        const res = await fetch(opts.endpoint, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json', ...opts.headers },
+            body: JSON.stringify({ prompt, sessionId, continueRun, ...opts.body }),
+        });
+        if (!res.body)
+            return;
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buf = '';
+        for (;;) {
+            const { done, value } = await reader.read();
+            if (done)
+                break;
+            buf += dec.decode(value, { stream: true });
+            let nl;
+            while ((nl = buf.indexOf('\n')) >= 0) {
+                const line = buf.slice(0, nl).trim();
+                buf = buf.slice(nl + 1);
+                if (line) {
+                    try {
+                        yield JSON.parse(line);
+                    }
+                    catch {
+                        /* skip non-JSON keepalive lines */
+                    }
+                }
+            }
+        }
+        const tail = buf.trim();
+        if (tail) {
+            try {
+                yield JSON.parse(tail);
+            }
+            catch {
+                /* ignore */
+            }
+        }
+    };
+    return createAgentClient({ run });
+}

package/dist/components/AgentChat.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type UseAgentOptions } from '../useAgent.js';
+export interface AgentChatProps extends UseAgentOptions {
+    className?: string;
+    placeholder?: string;
+    workingLabel?: string;
+    /** Override markdown rendering in the transcript. */
+    renderMarkdown?: (text: string) => ReactNode;
+    /** Optional header rendered above the transcript. */
+    header?: ReactNode;
+}
+/** All-in-one chat surface: Transcript + Working + Composer, wired to useAgent. */
+export declare function AgentChat({ className, placeholder, workingLabel, renderMarkdown, header, ...agentOpts }: AgentChatProps): import("react").JSX.Element;

package/dist/components/AgentChat.js

@@ -0,0 +1,11 @@
+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';
+/** All-in-one chat surface: Transcript + Working + Composer, wired to useAgent. */
+export function AgentChat({ className, placeholder, workingLabel, renderMarkdown, header, ...agentOpts }) {
+    const { messages, streamingText, status, send } = useAgent(agentOpts);
+    const running = status !== 'idle';
+    return (_jsxs("div", { className: `ac-chat${className ? ' ' + className : ''}`, children: [header, _jsx(Transcript, { messages: messages, streamingText: streamingText, renderMarkdown: renderMarkdown }), _jsx(Working, { active: running, label: workingLabel, paused: status === 'paused' }), _jsx(Composer, { onSend: send, placeholder: placeholder })] }));
+}

package/dist/components/Composer.d.ts

@@ -0,0 +1,10 @@
+export interface ComposerProps {
+    onSend: (text: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    /** Send on Enter (Shift+Enter = newline). Default true. */
+    sendOnEnter?: boolean;
+}
+/** Textarea + send button. Enter sends; Shift+Enter inserts a newline. */
+export declare function Composer({ onSend, disabled, placeholder, className, sendOnEnter }: ComposerProps): import("react").JSX.Element;

package/dist/components/Composer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/** Textarea + send button. Enter sends; Shift+Enter inserts a newline. */
+export function Composer({ onSend, disabled, placeholder = 'Send a message…', className, sendOnEnter = true }) {
+    const [value, setValue] = useState('');
+    const submit = () => {
+        const t = value.trim();
+        if (!t || disabled)
+            return;
+        onSend(t);
+        setValue('');
+    };
+    const onKeyDown = (e) => {
+        if (sendOnEnter && e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            submit();
+        }
+    };
+    return (_jsxs("div", { className: `ac-composer${className ? ' ' + className : ''}`, children: [_jsx("textarea", { className: "ac-composer-input", value: value, placeholder: placeholder, rows: 1, disabled: disabled, onChange: (e) => setValue(e.target.value), onKeyDown: onKeyDown }), _jsx("button", { className: "ac-composer-send", onClick: submit, disabled: disabled || !value.trim(), "aria-label": "Send", children: _jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M22 2 11 13" }), _jsx("path", { d: "M22 2 15 22l-4-9-9-4Z" })] }) })] }));
+}

package/dist/components/Message.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface MessageProps {
+    role: 'user' | 'assistant';
+    children?: ReactNode;
+    className?: string;
+}
+/** A plain chat bubble. */
+export declare function Message({ role, children, className }: MessageProps): import("react").JSX.Element;
+export interface MarkdownMessageProps {
+    text: string;
+    role?: 'user' | 'assistant';
+    className?: string;
+    /** Override the markdown renderer (default: built-in safe renderer). */
+    render?: (text: string) => ReactNode;
+}
+/** An assistant bubble whose text is rendered as markdown. */
+export declare function MarkdownMessage({ text, role, className, render }: MarkdownMessageProps): import("react").JSX.Element;

package/dist/components/Message.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderMarkdown } from '../markdown.js';
+/** 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. */
+export function MarkdownMessage({ text, role = 'assistant', className, render }) {
+    return (_jsx(Message, { role: role, className: `ac-msg-md${className ? ' ' + className : ''}`, children: (render ?? renderMarkdown)(text) }));
+}

package/dist/components/ToolCall.d.ts

@@ -0,0 +1,14 @@
+export interface ToolResultLike {
+    content: unknown;
+    isError?: boolean;
+}
+export interface ToolCallProps {
+    name: string;
+    input?: Record<string, unknown>;
+    result?: ToolResultLike;
+    className?: string;
+    /** Start expanded. Default false. */
+    defaultExpanded?: boolean;
+}
+/** A collapsible tool call + its result. */
+export declare function ToolCall({ name, input, result, className, defaultExpanded }: ToolCallProps): import("react").JSX.Element;

package/dist/components/ToolCall.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+function resultText(content) {
+    if (typeof content === 'string')
+        return content;
+    if (Array.isArray(content)) {
+        return content
+            .map((b) => (b && typeof b === 'object' && 'text' in b ? String(b.text ?? '') : '[…]'))
+            .join('\n');
+    }
+    return content == null ? '' : JSON.stringify(content);
+}
+/** A collapsible tool call + its result. */
+export function ToolCall({ name, input, result, className, defaultExpanded = false }) {
+    const [open, setOpen] = useState(defaultExpanded);
+    const summary = result ? resultText(result.content).split('\n')[0].slice(0, 120) : 'running…';
+    return (_jsxs("div", { className: `ac-tool${result?.isError ? ' ac-tool-error' : ''}${className ? ' ' + className : ''}`, children: [_jsxs("button", { className: "ac-tool-head", onClick: () => setOpen((o) => !o), "aria-expanded": open, children: [_jsx("span", { className: "ac-tool-caret", "aria-hidden": true, children: open ? '▾' : '▸' }), _jsx("span", { className: "ac-tool-name", children: name }), !open && _jsx("span", { className: "ac-tool-summary", children: summary })] }), open && (_jsxs("div", { className: "ac-tool-body", children: [input && Object.keys(input).length > 0 && (_jsx("pre", { className: "ac-tool-args", children: _jsx("code", { children: JSON.stringify(input, null, 2) }) })), result && (_jsx("pre", { className: `ac-tool-result${result.isError ? ' ac-tool-result-error' : ''}`, children: _jsx("code", { children: resultText(result.content) }) }))] }))] }));
+}

package/dist/components/Transcript.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import type { SDKMessage } from 'anyclaude-sdk';
+export interface TranscriptProps {
+    messages: SDKMessage[];
+    /** Live streaming text for the in-flight assistant turn (optional). */
+    streamingText?: string;
+    className?: string;
+    /** Override markdown rendering. */
+    renderMarkdown?: (text: string) => ReactNode;
+}
+/** Renders an SDKMessage[] as chat bubbles + collapsible tool calls. */
+export declare function Transcript({ messages, streamingText, className, renderMarkdown }: TranscriptProps): import("react").JSX.Element;

package/dist/components/Transcript.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Message, MarkdownMessage } from './Message.js';
+import { ToolCall } from './ToolCall.js';
+/** Renders an SDKMessage[] as chat bubbles + collapsible tool calls. */
+export function Transcript({ messages, streamingText, className, renderMarkdown }) {
+    // Pair tool_use blocks with their results (from synthetic user messages).
+    const results = new Map();
+    for (const m of messages) {
+        if (m.type === 'user') {
+            const c = m.message.content;
+            if (Array.isArray(c)) {
+                for (const b of c) {
+                    if (b.type === 'tool_result' && b.tool_use_id)
+                        results.set(b.tool_use_id, { content: b.content, isError: b.is_error });
+                }
+            }
+        }
+    }
+    const rendered = [];
+    let k = 0;
+    for (const m of messages) {
+        if (m.type === 'user') {
+            const c = m.message.content;
+            if (typeof c === 'string') {
+                if (c.trim())
+                    rendered.push(_jsx(Message, { role: "user", children: c }, k++));
+            }
+            // array content = tool results → shown via paired ToolCall, skip here
+            continue;
+        }
+        if (m.type === 'assistant') {
+            const blocks = (m.message.content ?? []);
+            for (const b of blocks) {
+                if (b.type === 'text' && b.text && b.text.trim()) {
+                    rendered.push(_jsx(MarkdownMessage, { text: b.text, render: renderMarkdown }, k++));
+                }
+                else if (b.type === 'tool_use' && b.id) {
+                    rendered.push(_jsx(ToolCall, { name: b.name ?? 'tool', input: b.input, result: results.get(b.id) }, k++));
+                }
+            }
+            continue;
+        }
+        if (m.type === 'system') {
+            const sub = m.subtype;
+            if (sub === 'local_command_output') {
+                const text = m.content ?? '';
+                if (text.trim())
+                    rendered.push(_jsx(MarkdownMessage, { text: text, render: renderMarkdown }, k++));
+            }
+            continue;
+        }
+    }
+    if (streamingText && streamingText.trim()) {
+        rendered.push(_jsx(MarkdownMessage, { text: streamingText, render: renderMarkdown }, "streaming"));
+    }
+    return _jsx("div", { className: `ac-transcript${className ? ' ' + className : ''}`, children: _jsx(Fragment, { children: rendered }) });
+}

package/dist/components/Working.d.ts

@@ -0,0 +1,10 @@
+export interface WorkingProps {
+    /** Show the indicator. */
+    active: boolean;
+    label?: string;
+    /** Shown when the run is paused mid-flight (survivor continuation). */
+    paused?: boolean;
+    className?: string;
+}
+/** A shimmering "Working…" indicator (CSS animation in styles.css). */
+export declare function Working({ active, label, paused, className }: WorkingProps): import("react").JSX.Element | null;

package/dist/components/Working.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** A shimmering "Working…" indicator (CSS animation in styles.css). */
+export function Working({ active, label = 'Working', paused, className }) {
+    if (!active)
+        return null;
+    const text = paused ? 'Resuming' : label;
+    return (_jsxs("div", { className: `ac-working${className ? ' ' + className : ''}`, role: "status", "aria-live": "polite", children: [_jsx("span", { className: "ac-working-spinner", "aria-hidden": true }), _jsxs("span", { className: "ac-working-text", children: [text, "\u2026"] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+export { createAgentClient, createEndpointClient } from './client.js';
+export type { AgentClient, RunFn, RunOptions, EndpointClientOptions } from './client.js';
+export { useAgent } from './useAgent.js';
+export type { UseAgentOptions, UseAgentResult, AgentStatus } from './useAgent.js';
+export { renderMarkdown } from './markdown.js';
+export { Message, MarkdownMessage } from './components/Message.js';
+export type { MessageProps, MarkdownMessageProps } from './components/Message.js';
+export { ToolCall } from './components/ToolCall.js';
+export type { ToolCallProps, ToolResultLike } from './components/ToolCall.js';
+export { Composer } from './components/Composer.js';
+export type { ComposerProps } from './components/Composer.js';
+export { Working } from './components/Working.js';
+export type { WorkingProps } from './components/Working.js';
+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';

package/dist/index.js

@@ -0,0 +1,10 @@
+// anyclaude-react — restylable React UI kit for anyclaude-sdk.
+export { createAgentClient, createEndpointClient } from './client.js';
+export { useAgent } from './useAgent.js';
+export { renderMarkdown } from './markdown.js';
+export { Message, MarkdownMessage } from './components/Message.js';
+export { ToolCall } from './components/ToolCall.js';
+export { Composer } from './components/Composer.js';
+export { Working } from './components/Working.js';
+export { Transcript } from './components/Transcript.js';
+export { AgentChat } from './components/AgentChat.js';

package/dist/markdown.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+/** Render markdown text to React nodes. */
+export declare function renderMarkdown(src: string): ReactNode;

package/dist/markdown.js

@@ -0,0 +1,108 @@
+// Tiny, dependency-free, XSS-safe markdown → React renderer. Text goes through
+// React text nodes (auto-escaped) — we never use dangerouslySetInnerHTML. Handles
+// the common cases (headings, lists, blockquote, fenced + inline code, bold,
+// italic, links). Consumers can pass their own renderer to <MarkdownMessage>.
+import { createElement, Fragment } from 'react';
+let _k = 0;
+const key = () => 'md' + ++_k;
+function inline(text) {
+    const nodes = [];
+    // order matters: code first (so ** inside `code` isn't parsed), then link, bold, italic
+    const re = /(`[^`]+`)|(\[[^\]]+\]\([^)]+\))|(\*\*[^*]+\*\*)|(\*[^*]+\*|_[^_]+_)/g;
+    let last = 0;
+    let m;
+    while ((m = re.exec(text))) {
+        if (m.index > last)
+            nodes.push(text.slice(last, m.index));
+        const tok = m[0];
+        if (tok.startsWith('`')) {
+            nodes.push(createElement('code', { key: key(), className: 'ac-code-inline' }, tok.slice(1, -1)));
+        }
+        else if (tok.startsWith('[')) {
+            const lm = /\[([^\]]+)\]\(([^)]+)\)/.exec(tok);
+            nodes.push(createElement('a', { key: key(), className: 'ac-link', href: lm[2], target: '_blank', rel: 'noreferrer' }, lm[1]));
+        }
+        else if (tok.startsWith('**')) {
+            nodes.push(createElement('strong', { key: key() }, tok.slice(2, -2)));
+        }
+        else {
+            nodes.push(createElement('em', { key: key() }, tok.slice(1, -1)));
+        }
+        last = m.index + tok.length;
+    }
+    if (last < text.length)
+        nodes.push(text.slice(last));
+    return nodes;
+}
+/** Render markdown text to React nodes. */
+export function renderMarkdown(src) {
+    const lines = (src ?? '').split('\n');
+    const out = [];
+    let i = 0;
+    let list = null;
+    const flushList = () => {
+        if (!list)
+            return;
+        const items = list.items.map((it) => createElement('li', { key: key() }, inline(it)));
+        out.push(createElement(list.ordered ? 'ol' : 'ul', { key: key(), className: 'ac-list' }, items));
+        list = null;
+    };
+    while (i < lines.length) {
+        const line = lines[i];
+        // fenced code block
+        const fence = /^```(\w*)\s*$/.exec(line);
+        if (fence) {
+            flushList();
+            const lang = fence[1];
+            const body = [];
+            i++;
+            while (i < lines.length && !/^```\s*$/.test(lines[i]))
+                body.push(lines[i++]);
+            i++; // closing fence
+            out.push(createElement('pre', { key: key(), className: 'ac-code-block', 'data-lang': lang || undefined }, createElement('code', null, body.join('\n'))));
+            continue;
+        }
+        const h = /^(#{1,4})\s+(.*)$/.exec(line);
+        if (h) {
+            flushList();
+            out.push(createElement('h' + h[1].length, { key: key(), className: 'ac-h' }, inline(h[2])));
+            i++;
+            continue;
+        }
+        const li = /^\s*([-*]|\d+\.)\s+(.*)$/.exec(line);
+        if (li) {
+            const ordered = /\d+\./.test(li[1]);
+            if (!list || list.ordered !== ordered) {
+                flushList();
+                list = { ordered, items: [] };
+            }
+            list.items.push(li[2]);
+            i++;
+            continue;
+        }
+        const bq = /^>\s?(.*)$/.exec(line);
+        if (bq) {
+            flushList();
+            out.push(createElement('blockquote', { key: key(), className: 'ac-quote' }, inline(bq[1])));
+            i++;
+            continue;
+        }
+        if (line.trim() === '') {
+            flushList();
+            i++;
+            continue;
+        }
+        // paragraph — merge consecutive non-blank, non-special lines
+        flushList();
+        const para = [line];
+        i++;
+        while (i < lines.length &&
+            lines[i].trim() !== '' &&
+            !/^(#{1,4}\s|```|>\s?|\s*([-*]|\d+\.)\s)/.test(lines[i])) {
+            para.push(lines[i++]);
+        }
+        out.push(createElement('p', { key: key(), className: 'ac-p' }, inline(para.join(' '))));
+    }
+    flushList();
+    return createElement(Fragment, null, out);
+}

package/dist/useAgent.d.ts

@@ -0,0 +1,24 @@
+import type { SDKMessage } from 'anyclaude-sdk';
+import { type AgentClient, type RunFn } from './client.js';
+export type AgentStatus = 'idle' | 'running' | 'paused';
+export interface UseAgentOptions {
+    /** Provide ONE of these. */
+    client?: AgentClient;
+    run?: RunFn;
+    endpoint?: string;
+    headers?: Record<string, string>;
+    /** Stable id for this conversation (survivor continuation reuses it). Auto if omitted. */
+    sessionId?: string;
+}
+export interface UseAgentResult {
+    messages: SDKMessage[];
+    streamingText: string;
+    status: AgentStatus;
+    tokens: number;
+    cost: number;
+    sessionId: string;
+    send: (text: string) => void;
+    interrupt: () => void;
+    clear: () => void;
+}
+export declare function useAgent(opts: UseAgentOptions): UseAgentResult;

package/dist/useAgent.js

@@ -0,0 +1,117 @@
+// React hook driving an agent run with live streaming + survivor stitching.
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { createAgentClient, createEndpointClient } from './client.js';
+let _seq = 0;
+function newSessionId() {
+    const c = globalThis.crypto;
+    return c?.randomUUID?.() ?? `sess-${Date.now()}-${++_seq}`;
+}
+function resolveClient(opts) {
+    if (opts.client)
+        return opts.client;
+    if (opts.run)
+        return createAgentClient({ run: opts.run });
+    if (opts.endpoint)
+        return createEndpointClient({ endpoint: opts.endpoint, headers: opts.headers });
+    throw new Error('useAgent: provide one of `client`, `run`, or `endpoint`.');
+}
+export function useAgent(opts) {
+    const [messages, setMessages] = useState([]);
+    const [streamingText, setStreamingText] = useState('');
+    const [status, setStatus] = useState('idle');
+    const [tokens, setTokens] = useState(0);
+    const [cost, setCost] = useState(0);
+    const sessionRef = useRef(opts.sessionId ?? newSessionId());
+    const abortRef = useRef(false);
+    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]);
+    const send = useCallback((text) => {
+        const t = text.trim();
+        if (!t || runningRef.current)
+            return;
+        runningRef.current = true;
+        abortRef.current = false;
+        const userMsg = {
+            type: 'user',
+            message: { role: 'user', content: t },
+            parent_tool_use_id: null,
+        };
+        setMessages((m) => [...m, userMsg]);
+        setStatus('running');
+        setStreamingText('');
+        void (async () => {
+            let buf = '';
+            try {
+                for await (const msg of client.send(t, sessionRef.current)) {
+                    if (abortRef.current)
+                        break;
+                    if (msg.type === 'stream_event') {
+                        const ev = msg.event;
+                        if (ev?.type === 'content_block_delta' && ev.delta?.type === 'text_delta') {
+                            buf += ev.delta.text ?? '';
+                            setStreamingText(buf);
+                        }
+                        continue;
+                    }
+                    const sub = msg.subtype;
+                    if (msg.type === 'system' && sub === 'paused') {
+                        setStatus('paused');
+                        continue;
+                    }
+                    if (msg.type === 'assistant') {
+                        buf = '';
+                        setStreamingText('');
+                        setStatus('running');
+                        setMessages((m) => [...m, msg]);
+                        continue;
+                    }
+                    if (msg.type === 'user') {
+                        setMessages((m) => [...m, msg]);
+                        continue;
+                    }
+                    if (msg.type === 'result') {
+                        const u = msg.usage;
+                        if (u)
+                            setTokens((u.input_tokens ?? 0) + (u.output_tokens ?? 0));
+                        const c = msg.total_cost_usd;
+                        if (typeof c === 'number')
+                            setCost(c);
+                        continue;
+                    }
+                    // system: init / local_command_output / compact_boundary
+                    setMessages((m) => [...m, msg]);
+                }
+            }
+            catch (err) {
+                const errMsg = {
+                    type: 'system',
+                    subtype: 'local_command_output',
+                    content: 'Error: ' + (err instanceof Error ? err.message : String(err)),
+                };
+                setMessages((m) => [...m, errMsg]);
+            }
+            finally {
+                runningRef.current = false;
+                setStreamingText('');
+                setStatus('idle');
+            }
+        })();
+    }, [client]);
+    const interrupt = useCallback(() => {
+        abortRef.current = true;
+        runningRef.current = false;
+        setStatus('idle');
+        setStreamingText('');
+    }, []);
+    const clear = useCallback(() => {
+        if (runningRef.current)
+            return;
+        setMessages([]);
+        setTokens(0);
+        setCost(0);
+        sessionRef.current = newSessionId();
+    }, []);
+    return { messages, streamingText, status, tokens, cost, sessionId: sessionRef.current, send, interrupt, clear };
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "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.",
+  "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" },
+    "./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"],
+  "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" }
+}

package/styles.css

@@ -0,0 +1,60 @@
+/* anyclaude-react — optional default theme. Restyle by overriding the CSS
+   variables below, or skip this file entirely and style the .ac-* classes
+   (and data-role attributes) yourself / with Tailwind. */
+.ac-chat {
+  --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;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  background: var(--ac-bg);
+  color: var(--ac-fg);
+  font: 15px/1.55 system-ui, sans-serif;
+}
+
+.ac-transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 14px; }
+
+.ac-msg { display: flex; gap: 8px; }
+.ac-msg-user { color: var(--ac-user); }
+.ac-msg-prefix { font-family: var(--ac-mono); opacity: 0.8; }
+.ac-msg-body { min-width: 0; }
+.ac-msg-md .ac-msg-body { color: var(--ac-fg); }
+
+.ac-p { margin: 0 0 8px; }
+.ac-h { margin: 12px 0 6px; line-height: 1.25; }
+.ac-list { margin: 6px 0; padding-left: 22px; }
+.ac-quote { border-left: 3px solid var(--ac-border); margin: 8px 0; padding: 2px 12px; color: var(--ac-muted); }
+.ac-link { color: var(--ac-accent); text-decoration: underline; }
+.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-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); }
+.ac-tool-name { font-family: var(--ac-mono); font-weight: 600; }
+.ac-tool-summary { color: var(--ac-muted); font-family: var(--ac-mono); font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ac-tool-body { padding: 0 12px 10px; }
+.ac-tool-args, .ac-tool-result { font-family: var(--ac-mono); font-size: 0.85em; background: var(--ac-bg); border: 1px solid var(--ac-border); border-radius: 8px; padding: 8px 10px; overflow-x: auto; margin: 6px 0 0; }
+.ac-tool-result-error { color: #ff8a80; }
+
+.ac-working { display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--ac-muted); font-family: var(--ac-mono); font-size: 13px; }
+.ac-working-text { background: linear-gradient(90deg, var(--ac-muted) 30%, var(--ac-accent) 50%, var(--ac-muted) 70%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ac-shimmer 1.6s linear infinite; }
+.ac-working-spinner { width: 9px; height: 9px; border-radius: 50%; background: var(--ac-accent); animation: ac-pulse 1s ease-in-out infinite; }
+@keyframes ac-shimmer { to { background-position: -200% center; } }
+@keyframes ac-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
+
+.ac-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--ac-border); }
+.ac-composer-input { flex: 1; resize: none; background: var(--ac-panel); color: var(--ac-fg); border: 1px solid var(--ac-border); border-radius: 10px; padding: 10px 12px; font: inherit; min-height: 20px; max-height: 180px; }
+.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; }