anyclaude-react 0.2.2 → 0.4.0

package/README.md

@@ -55,15 +55,24 @@ const { messages, streamingText, status, tokens, cost, send, interrupt, clear }
 
 ## Client-side tools (server brain, browser hands)
 
-Run the agent on your server but execute chosen tools in the browser — e.g. `bash` on a WebContainer. Pair `query({ clientTools: ['bash'] })` server-side with a `clientTools` executor map here; `client_tool_request`s are auto-executed and the results streamed back:
+Run the agent on your server but execute its file/shell tools **in the browser** — against a WebContainer, an IndexedDB filesystem, OPFS, or memory. Pair `query({ clientTools: WORKSPACE_TOOL_NAMES })` server-side with a turnkey executor map here. `client_tool_request`s are auto-executed and the results streamed back; it reuses the real SDK tool implementations, so behavior matches server-side exactly.
 
 ```tsx
-useAgent({
-  endpoint: '/api/agent',
-  clientTools: { bash: async ({ command }) => ({ content: await runOnWebContainer(command) }) },
-})
+import { useAgent, createWebContainerClientTools, createWorkspaceClientTools } from 'anyclaude-react'
+import { DexieFileSystem } from 'anyclaude-sdk/fs'
+
+// real shell + files in a WebContainer:
+useAgent({ endpoint: '/api/agent', clientTools: createWebContainerClientTools(wc) })
+
+// or point the file tools at the user's own IndexedDB (no shell):
+useAgent({ endpoint: '/api/agent', clientTools: createWorkspaceClientTools(new DexieFileSystem('my-db')) })
+
+// fully overridable per tool:
+createWorkspaceClientTools(workspace, { only: ['write_file','read_file'], extra: { bash: myBash } })
 ```
 
+You can still hand-write a `clientTools` map (`{ bash: async ({command}) => ({ content }) }`) for full control.
+
 ## Components
 
 **Chat**
@@ -78,15 +87,26 @@ useAgent({
 | `<Composer onSend>` | Textarea + send (Enter sends, Shift+Enter newline). |
 | `<Working active paused>` | Shimmering "Working…" indicator. |
 
-**IDE** (optional peers: `@xterm/xterm`, `codemirror`)
+**Lightweight UI (root, no heavy deps)**
 
 | Component | Purpose |
 |---|---|
-| `<Terminal spawn>` | xterm.js bound to a streaming shell (e.g. a WebContainer process). |
 | `<FileExplorer list onOpen>` | Collapsible file tree over any filesystem adapter. |
-| `<CodeEditor value onChange>` | Controlled CodeMirror 6 editor. |
 | `<AskUser question onAnswer>` | Renders an `ask_user_question` prompt; pair with the SDK's `onAskUser`. |
 
+**IDE — `anyclaude-react/ide` subpath** (so the root barrel stays dependency-light)
+
+```tsx
+import { Terminal, CodeEditor } from 'anyclaude-react/ide'
+```
+
+| Component | Purpose | Peer dep |
+|---|---|---|
+| `<Terminal spawn>` | xterm.js terminal bound to a streaming shell (e.g. a WebContainer process). | `@xterm/xterm` + `@xterm/addon-fit` |
+| `<CodeEditor value onChange>` | Controlled CodeMirror 6 editor. | `codemirror` + `@codemirror/*` |
+
+The root export (`useAgent`, chat components, `FileExplorer`, `AskUser`, the client/workspace helpers) pulls **neither** `@xterm` nor `codemirror` — install those only if you import from `/ide`.
+
 ## Styling
 
 Everything is class-based (`.ac-*`) with `data-role` attributes. Import the

package/dist/ide.d.ts

@@ -0,0 +1,4 @@
+export { Terminal } from './components/Terminal.js';
+export type { TerminalProps, ShellProcess } from './components/Terminal.js';
+export { CodeEditor } from './components/CodeEditor.js';
+export type { CodeEditorProps } from './components/CodeEditor.js';

package/dist/ide.js

@@ -0,0 +1,7 @@
+// anyclaude-react/ide — heavy IDE components, split onto a subpath so the root
+// barrel stays dependency-light. These are the only components that need the
+// optional peers @xterm/* (Terminal) and codemirror/@codemirror/* (CodeEditor).
+//
+//   import { Terminal, CodeEditor } from 'anyclaude-react/ide'
+export { Terminal } from './components/Terminal.js';
+export { CodeEditor } from './components/CodeEditor.js';

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { createAgentClient, createEndpointClient } from './client.js';
+export { createWorkspaceClientTools, createWebContainerClientTools, type WorkspaceLike, type WorkspaceClientToolsOptions, } from './workspaceTools.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';
@@ -17,11 +18,7 @@ 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

@@ -1,5 +1,6 @@
 // anyclaude-react — restylable React UI kit for anyclaude-sdk.
 export { createAgentClient, createEndpointClient } from './client.js';
+export { createWorkspaceClientTools, createWebContainerClientTools, } from './workspaceTools.js';
 export { useAgent } from './useAgent.js';
 export { renderMarkdown } from './markdown.js';
 export { Message, MarkdownMessage } from './components/Message.js';
@@ -9,8 +10,8 @@ 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';
+// Heavy IDE components (Terminal → @xterm/*, CodeEditor → codemirror) live on a
+// subpath so this root barrel stays dependency-light:
+//   import { Terminal, CodeEditor } from 'anyclaude-react/ide'

package/dist/workspaceTools.d.ts

@@ -0,0 +1,48 @@
+import { WebContainerWorkspace } from 'anyclaude-sdk/workspace';
+import type { ClientToolMap } from './client.js';
+/** Structural view of an SDK workspace: a FileSystem, optionally a shell.
+ *  `DexieFileSystem`, `WebContainerWorkspace`, `OpfsFileSystem`,
+ *  `MemoryFileSystem` all satisfy this. */
+export interface WorkspaceLike {
+    readFile(path: string): Promise<string | null>;
+    writeFile(path: string, contents: string): Promise<void>;
+    readdir(path: string): Promise<Array<{
+        name: string;
+        isDir: boolean;
+    }> | null>;
+    deleteFile(path: string): Promise<void>;
+    mkdir?(path: string): Promise<void>;
+    readBinary?(path: string): Promise<Uint8Array | null>;
+    writeBinary?(path: string, data: Uint8Array): Promise<void>;
+    /** Present on shell-capable workspaces (e.g. WebContainerWorkspace). */
+    exec?(command: string, timeoutMs?: number): Promise<{
+        output: string;
+        exitCode: number;
+    }>;
+    cwd?: string;
+}
+export interface WorkspaceClientToolsOptions {
+    /** Working directory for the tools (default: workspace.cwd ?? '/'). */
+    cwd?: string;
+    /** Restrict to these tool names (default: all supported by the workspace). */
+    only?: string[];
+    /** Extra or overriding executors, merged on top of the generated map. */
+    extra?: ClientToolMap;
+}
+/**
+ * Build a `ClientToolMap` that executes the SDK's built-in workspace tools
+ * against any SDK workspace. `bash` is included only when the workspace has a
+ * shell (`exec`); filesystem-only workspaces (e.g. IndexedDB) omit it.
+ *
+ *   useAgent({ endpoint: '/api/agent',
+ *     clientTools: createWorkspaceClientTools(new DexieFileSystem('my-db')) })
+ */
+export declare function createWorkspaceClientTools(workspace: WorkspaceLike, opts?: WorkspaceClientToolsOptions): ClientToolMap;
+/**
+ * Convenience: client tools backed by a booted WebContainer — real files + a
+ * real `jsh` shell, all in the browser tab.
+ *
+ *   const wc = await WebContainer.boot()
+ *   useAgent({ endpoint: '/api/agent', clientTools: createWebContainerClientTools(wc) })
+ */
+export declare function createWebContainerClientTools(wc: ConstructorParameters<typeof WebContainerWorkspace>[0], opts?: WorkspaceClientToolsOptions): ClientToolMap;

package/dist/workspaceTools.js

@@ -0,0 +1,57 @@
+// createWorkspaceClientTools — run the SDK's built-in workspace tools
+// (read/write/edit/multi_edit/delete/list/glob/grep, and bash when a shell is
+// available) on the HOST instead of the server. Pair with the server-side
+// `query({ clientTools: WORKSPACE_TOOL_NAMES })`: the agent emits a
+// `client_tool_request`, this map executes it against the chosen workspace —
+// a browser WebContainer, an IndexedDB `DexieFileSystem`, OPFS, or memory — and
+// the result is streamed back. Reuses the real SDK tool implementations, so the
+// behavior matches server-side exactly.
+import { bash, readFile, writeFile, editFile, multiEdit, deleteFile, listFiles, glob, grep, } from 'anyclaude-sdk/tools';
+import { WebContainerWorkspace } from 'anyclaude-sdk/workspace';
+const WORKSPACE_TOOLS = [bash, writeFile, readFile, editFile, multiEdit, deleteFile, listFiles, glob, grep];
+const NOOP_EXEC = {
+    async exec() {
+        return { output: 'No shell available in this workspace (filesystem-only).', exitCode: 127 };
+    },
+};
+/**
+ * Build a `ClientToolMap` that executes the SDK's built-in workspace tools
+ * against any SDK workspace. `bash` is included only when the workspace has a
+ * shell (`exec`); filesystem-only workspaces (e.g. IndexedDB) omit it.
+ *
+ *   useAgent({ endpoint: '/api/agent',
+ *     clientTools: createWorkspaceClientTools(new DexieFileSystem('my-db')) })
+ */
+export function createWorkspaceClientTools(workspace, opts = {}) {
+    const hasExec = typeof workspace.exec === 'function';
+    const ctx = {
+        fs: workspace,
+        exec: hasExec ? workspace : NOOP_EXEC,
+        cwd: opts.cwd ?? workspace.cwd ?? '/',
+        readFiles: new Set(),
+    };
+    const map = {};
+    for (const t of WORKSPACE_TOOLS) {
+        const name = t.def.function.name;
+        if (opts.only && !opts.only.includes(name))
+            continue;
+        if (name === 'bash' && !hasExec)
+            continue;
+        map[name] = async (input) => {
+            const r = await t.run(input, ctx);
+            return { content: r.content, is_error: r.isError };
+        };
+    }
+    return { ...map, ...(opts.extra ?? {}) };
+}
+/**
+ * Convenience: client tools backed by a booted WebContainer — real files + a
+ * real `jsh` shell, all in the browser tab.
+ *
+ *   const wc = await WebContainer.boot()
+ *   useAgent({ endpoint: '/api/agent', clientTools: createWebContainerClientTools(wc) })
+ */
+export function createWebContainerClientTools(wc, opts = {}) {
+    const ws = new WebContainerWorkspace(wc, opts.cwd);
+    return createWorkspaceClientTools(ws, opts);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anyclaude-react",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "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",
@@ -11,6 +11,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./ide": {
+      "types": "./dist/ide.d.ts",
+      "import": "./dist/ide.js"
+    },
     "./styles.css": "./styles.css"
   },
   "files": [
@@ -54,7 +58,7 @@
     "@codemirror/view": ">=6.0.0",
     "@xterm/addon-fit": ">=0.10.0",
     "@xterm/xterm": ">=5.3.0",
-    "anyclaude-sdk": ">=0.1.0",
+    "anyclaude-sdk": ">=0.4.4",
     "codemirror": ">=6.0.0",
     "react": ">=18"
   },