anyclaude-react 0.3.0 → 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

@@ -18,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

@@ -10,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anyclaude-react",
-  "version": "0.3.0",
+  "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": [