@treenity/mods 3.0.1 → 3.0.2

package/mindmap/mindmap.css

@@ -99,6 +99,58 @@
   cursor: pointer;
 }
 
+/* ── Add child button ── */
+
+.mm-add-btn {
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.mm-branch:hover > .mm-add-btn {
+  opacity: 1;
+}
+
+.mm-add-bg {
+  fill: var(--surface-2);
+  stroke: var(--border);
+  stroke-width: 1;
+  transition: fill 0.15s;
+}
+
+.mm-add-btn:hover .mm-add-bg {
+  fill: var(--accent);
+  stroke: var(--accent);
+}
+
+.mm-add-icon {
+  font-size: 12px;
+  font-weight: 700;
+  fill: var(--text-3);
+  font-family: var(--font);
+}
+
+.mm-add-btn:hover .mm-add-icon {
+  fill: var(--bg);
+}
+
+/* ── Inline input ── */
+
+.mm-inline-input {
+  width: 100%;
+  height: 100%;
+  background: var(--surface);
+  border: 1.5px solid var(--accent);
+  border-radius: 4px;
+  color: var(--text);
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 6px;
+  outline: none;
+  box-sizing: border-box;
+}
+
 /* ── Toolbar ── */
 
 .mm-toolbar {

package/mindmap/sidebar.tsx

@@ -3,6 +3,7 @@
 
 import { execute, usePath } from '@treenity/react/hooks';
 import { getActions, getComponents, getPlainFields, getSchema } from '@treenity/react/mods/editor-ui/node-utils';
+import { Button } from '@treenity/react/ui/button';
 
 type Props = {
   path: string;
@@ -22,8 +23,8 @@ export function MindMapSidebar({ path, onClose, onNavigate }: Props) {
     return (
       <div className="mm-sidebar">
         <div className="mm-sidebar-header">
-          <span className="text-[var(--text-3)]">Loading...</span>
-          <button className="mm-btn" onClick={onClose}>&times;</button>
+          <span className="text-muted-foreground">Loading...</span>
+          <Button variant="ghost" size="sm" className="mm-btn" onClick={onClose}>&times;</Button>
         </div>
       </div>
     );
@@ -45,9 +46,9 @@ export function MindMapSidebar({ path, onClose, onNavigate }: Props) {
           >
             {path.split('/').at(-1) || '/'}
           </span>
-          <span className="text-[11px] text-[var(--text-3)] truncate">{path}</span>
+          <span className="text-[11px] text-muted-foreground truncate">{path}</span>
         </div>
-        <button className="mm-btn shrink-0" onClick={onClose}>&times;</button>
+        <Button variant="ghost" size="sm" className="mm-btn shrink-0" onClick={onClose}>&times;</Button>
       </div>
 
       <div className="mm-sidebar-body">
@@ -110,13 +111,15 @@ export function MindMapSidebar({ path, onClose, onNavigate }: Props) {
             <div className="mm-section-label">Actions</div>
             <div className="flex flex-wrap gap-1">
               {actions.map(a => (
-                <button
+                <Button
                   key={a}
+                  variant="ghost"
+                  size="sm"
                   className="mm-action-btn"
                   onClick={() => execute(path, a).catch(console.error)}
                 >
                   {a}
-                </button>
+                </Button>
               ))}
             </div>
           </div>

package/mindmap/view.tsx

@@ -1,14 +1,16 @@
 // MindMap View — Miro-style horizontal tree with organic curves
 // Each node fetches its own children via useChildren when expanded
 
+import type { NodeData } from '@treenity/core';
 import { register } from '@treenity/core';
 import type { View } from '@treenity/react/context';
 import { useChildren } from '@treenity/react/hooks';
+import { trpc } from '@treenity/react/trpc';
 import { select } from 'd3-selection';
 import 'd3-transition';
 import { zoom as d3zoom, type ZoomBehavior, zoomIdentity } from 'd3-zoom';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { MindMapBranch, MindMapCtx, type MindMapState } from './branch';
+import { type EditingAt, MindMapBranch, MindMapCtx, type MindMapState } from './branch';
 import { MindMapSidebar } from './sidebar';
 import type { MindMapConfig } from './types';
 import './mindmap.css';
@@ -38,6 +40,7 @@ const MindMapView: View<MindMapConfig> = ({ value, ctx }) => {
 
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set([rootPath]));
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [editingAt, setEditingAt] = useState<EditingAt>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const svgRef = useRef<SVGSVGElement>(null);
   const gRef = useRef<SVGGElement>(null);
@@ -117,19 +120,52 @@ const MindMapView: View<MindMapConfig> = ({ value, ctx }) => {
     window.dispatchEvent(new PopStateEvent('popstate'));
   }, []);
 
+  const handleAddChild = useCallback((parentPath: string, side: 'left' | 'right', color: string) => {
+    setEditingAt({ parentPath, side, color });
+    setExpanded(prev => new Set([...prev, parentPath]));
+  }, []);
+
+  const handleCommitAdd = useCallback((parentPath: string, name: string) => {
+    const childPath = `${parentPath}/${name}`;
+    trpc.set.mutate({ node: { $path: childPath, $type: 'dir' } as NodeData });
+    setEditingAt(null);
+  }, []);
+
+  const handleCancelAdd = useCallback(() => setEditingAt(null), []);
+
+  const handleDelete = useCallback((path: string) => {
+    if (path === rootPath) return;
+    if (!confirm(`Delete ${basename(path)}?`)) return;
+    trpc.remove.mutate({ path });
+    setSelectedPath(null);
+  }, [rootPath]);
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
       if (e.key === 'Enter' && selectedPath) { e.preventDefault(); handleToggle(selectedPath); }
       if (e.key === 'Escape') setSelectedPath(null);
+      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedPath && selectedPath !== rootPath) {
+        e.preventDefault();
+        handleDelete(selectedPath);
+      }
+      if (e.key === 'Tab' && selectedPath && !editingAt) {
+        e.preventDefault();
+        handleAddChild(selectedPath, 'right', PALETTE[0]);
+      }
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [selectedPath, handleToggle]);
+  }, [selectedPath, handleToggle, handleDelete, handleAddChild, rootPath, editingAt]);
 
   const mmState: MindMapState = useMemo(
-    () => ({ expanded, selectedPath, onToggle: handleToggle, onSelect: handleSelect }),
-    [expanded, selectedPath, handleToggle, handleSelect],
+    () => ({
+      expanded, selectedPath, editingAt,
+      onToggle: handleToggle, onSelect: handleSelect,
+      onAddChild: handleAddChild, onCommitAdd: handleCommitAdd, onCancelAdd: handleCancelAdd,
+      onDelete: handleDelete,
+    }),
+    [expanded, selectedPath, editingAt, handleToggle, handleSelect, handleAddChild, handleCommitAdd, handleCancelAdd, handleDelete],
   );
 
   const svgW = selectedPath ? dims.w - 280 : dims.w;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@treenity/mods",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Official Treenity modules — board, sim, cafe, doc, mindmap, and more.",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "license": "AGPL-3.0",
+  "license": "FSL-1.1-MIT",
   "author": "Treenity <hello@treenity.ai> (https://treenity.ai)",
   "homepage": "https://github.com/treenity-ai/treenity",
   "repository": {
@@ -53,19 +53,43 @@
     "three",
     "todo",
     "whisper",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
     "LICENSE"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "prepack": "npm run build"
   },
+  "imports": {
+    "#*": {
+      "development": [
+        "./*.ts",
+        "./*.tsx"
+      ],
+      "default": [
+        "./dist/*.js"
+      ]
+    }
+  },
+  "dependencies": {
+    "@grammyjs/runner": "^2.0.3"
+  },
+  "optionalDependencies": {
+    "@huggingface/transformers": "^3.8.1",
+    "wavefile": "^11.0.0"
+  },
   "peerDependencies": {
     "@treenity/core": "^3.0.0",
-    "@treenity/react": "^3.0.0"
+    "@treenity/react": "^3.0.0",
+    "grammy": "^1.39.0"
   },
   "peerDependenciesMeta": {
     "@treenity/react": {
       "optional": true
+    },
+    "grammy": {
+      "optional": true
     }
   },
   "devDependencies": {

package/sensor-demo/service.ts

@@ -2,26 +2,27 @@
 
 import { createNode, register } from '@treenity/core';
 import '@treenity/core/contexts/service';
+import { safeInterval } from '@treenity/core/util/safe-timers';
 import { SensorReading } from './types';
 
 register('examples.demo.sensor', 'service', async (node, ctx) => {
   let seq = 0;
   const MAX = 10;
-  const timer = setInterval(async () => {
+  const timer = safeInterval(async () => {
     const ts = Date.now();
     const name = String(ts).slice(-6).padStart(6, '0');
-    await ctx.store.set(createNode(`${node.$path}/${name}`, SensorReading, {
+    await ctx.tree.set(createNode(`${node.$path}/${name}`, SensorReading, {
       ts,
       value: +(20 + Math.sin(seq * 0.1) * 5 + Math.random() * 2).toFixed(1),
       seq: seq++,
     }));
     // Trim old readings
-    const { items } = await ctx.store.getChildren(node.$path);
+    const { items } = await ctx.tree.getChildren(node.$path);
     if (items.length > MAX) {
       items.sort((a, b) => (a.ts as number) - (b.ts as number));
-      for (const old of items.slice(0, items.length - MAX)) await ctx.store.remove(old.$path);
+      for (const old of items.slice(0, items.length - MAX)) await ctx.tree.remove(old.$path);
     }
-  }, 1000);
+  }, 1000, 'sensor-demo.tick');
   console.log(`[sensor-demo] started on ${node.$path}`);
   return { stop: async () => clearInterval(timer) };
 });

package/sensor-generator/action.ts

@@ -20,7 +20,7 @@ register(
         value: +(20 + Math.sin(i * 0.3) * 5 + Math.random() * 2).toFixed(1),
         seq: i,
       } as NodeData;
-      await ctx.store.set(node);
+      await ctx.tree.set(node);
       yield node;
       await new Promise((r) => setTimeout(r, delay));
     }

package/sim/service.ts

@@ -14,7 +14,7 @@ import {
   resolve,
 } from '@treenity/core';
 import '@treenity/core/contexts/service';
-import { newComp, setComp } from '@treenity/core/comp';
+import { newComponent, setComponent } from '@treenity/core/comp';
 import { type ActionCtx, serverNodeHandle } from '@treenity/core/server/actions';
 import {
   type AgentEvent,
@@ -108,7 +108,7 @@ function getAgentEvents(n: NodeData): AgentEvent[] {
 function pushAgentEvent(n: NodeData, event: AgentEvent) {
   const ev = getComponent(n, SimEvents);
   const entries = [...(ev?.entries ?? []), event].slice(-30);
-  setComp(n, SimEvents, { entries });
+  setComponent(n, SimEvents, { entries });
 }
 
 // ── LLM tools — base + interact ──
@@ -281,13 +281,13 @@ function mockThink(agent: NodeData, all: NodeData[]): Tool[] {
 /** @description Start the agent simulation loop */
 register('sim.world', 'action:start', async (ctx: ActionCtx) => {
   const cfg = getComponent(ctx.node, SimConfig)!;
-  setComp(ctx.node, SimConfig, { ...cfg, running: true });
+  setComponent(ctx.node, SimConfig, { ...cfg, running: true });
 }, { description: 'Start the simulation' });
 
 /** @description Stop the agent simulation loop */
 register('sim.world', 'action:stop', async (ctx: ActionCtx) => {
   const cfg = getComponent(ctx.node, SimConfig)!;
-  setComp(ctx.node, SimConfig, { ...cfg, running: false });
+  setComponent(ctx.node, SimConfig, { ...cfg, running: false });
 }, { description: 'Stop the simulation' });
 
 /** @description Update simulation settings (roundDelay, model, dimensions) */
@@ -298,7 +298,7 @@ register('sim.world', 'action:set-config', async (ctx: ActionCtx, params: any) =
   if (params.model !== undefined) next.model = String(params.model);
   if (params.width !== undefined) next.width = Number(params.width);
   if (params.height !== undefined) next.height = Number(params.height);
-  setComp(ctx.node, SimConfig, next);
+  setComponent(ctx.node, SimConfig, next);
 }, { description: 'Update simulation settings', params: 'roundDelay?, model?, width?, height?' });
 
 /** @description Add an agent or item entity to the simulation world */
@@ -307,23 +307,23 @@ register('sim.world', 'action:add-entity', async (ctx: ActionCtx, params: any) =
   const type = params.type || 'sim.item';
   const path = `${ctx.node.$path}/${id}`;
   const components: Record<string, any> = {
-    descriptive: newComp(SimDescriptive, {
+    descriptive: newComponent(SimDescriptive, {
       name: params.name || id,
       icon: params.icon || '?',
       description: params.description || '',
     }),
-    position: newComp(SimPosition, {
+    position: newComponent(SimPosition, {
       x: params.x ?? 300,
       y: params.y ?? 200,
       radius: params.radius ?? 100,
     }),
   };
   if (type === 'sim.agent') {
-    components.ai = newComp(SimAi, { systemPrompt: params.systemPrompt || `You are ${params.name}.` });
-    components.memory = newComp(SimMemory, { entries: [] });
-    components.events = newComp(SimEvents, { entries: [] });
+    components.ai = newComponent(SimAi, { systemPrompt: params.systemPrompt || `You are ${params.name}.` });
+    components.memory = newComponent(SimMemory, { entries: [] });
+    components.events = newComponent(SimEvents, { entries: [] });
   }
-  await ctx.store.set(createNode(path, type, {}, components));
+  await ctx.tree.set(createNode(path, type, {}, components));
 }, { description: 'Add agent or item to the world', params: 'name, icon, type?, x?, y?, radius?, systemPrompt?, description?' });
 
 // Agent actions (callable by other agents via interact, or by UI)
@@ -333,18 +333,18 @@ register('sim.agent', 'action:move', async (ctx: ActionCtx, params: any) => {
   const next = { ...pos };
   if (params.x !== undefined) next.x = Math.round(Number(params.x));
   if (params.y !== undefined) next.y = Math.round(Number(params.y));
-  setComp(ctx.node, SimPosition, next);
+  setComponent(ctx.node, SimPosition, next);
 }, { description: 'Move to position', params: 'x, y' });
 
 /** @description Update agent properties (systemPrompt, radius, name, icon, description) */
 register('sim.agent', 'action:update', async (ctx: ActionCtx, params: any) => {
   if (params.systemPrompt !== undefined) {
     const ai = getComponent(ctx.node, SimAi)!;
-    setComp(ctx.node, SimAi, { ...ai, systemPrompt: String(params.systemPrompt) });
+    setComponent(ctx.node, SimAi, { ...ai, systemPrompt: String(params.systemPrompt) });
   }
   if (params.radius !== undefined) {
     const pos = getComponent(ctx.node, SimPosition)!;
-    setComp(ctx.node, SimPosition, { ...pos, radius: Number(params.radius) });
+    setComponent(ctx.node, SimPosition, { ...pos, radius: Number(params.radius) });
   }
   if (params.name !== undefined || params.icon !== undefined || params.description !== undefined) {
     const desc = getComponent(ctx.node, SimDescriptive)!;
@@ -352,7 +352,7 @@ register('sim.agent', 'action:update', async (ctx: ActionCtx, params: any) => {
     if (params.name !== undefined) next.name = String(params.name);
     if (params.icon !== undefined) next.icon = String(params.icon);
     if (params.description !== undefined) next.description = String(params.description);
-    setComp(ctx.node, SimDescriptive, next);
+    setComponent(ctx.node, SimDescriptive, next);
   }
 }, { description: 'Update agent properties', params: 'systemPrompt?, radius?, name?, icon?, description?' });
 
@@ -376,17 +376,17 @@ register('sim.world', 'service', async (node, ctx) => {
   const wp = node.$path;
 
   async function getAllEntities() {
-    return (await ctx.store.getChildren(wp)).items.filter(
+    return (await ctx.tree.getChildren(wp)).items.filter(
       (n) => n.$type === 'sim.agent' || n.$type === 'sim.item',
     );
   }
 
   async function getAgents() {
-    return (await ctx.store.getChildren(wp)).items.filter((n) => n.$type === 'sim.agent');
+    return (await ctx.tree.getChildren(wp)).items.filter((n) => n.$type === 'sim.agent');
   }
 
   async function runRound() {
-    const world = await ctx.store.get(wp);
+    const world = await ctx.tree.get(wp);
     if (!world) return;
     const cfg = getComponent(world, SimConfig);
     if (!cfg?.running) return;
@@ -398,8 +398,8 @@ register('sim.world', 'service', async (node, ctx) => {
     if (!agents.length) return;
 
     // Phase: thinking
-    setComp(world, SimRound, { ...round, phase: 'thinking' });
-    await ctx.store.set(world);
+    setComponent(world, SimRound, { ...round, phase: 'thinking' });
+    await ctx.tree.set(world);
 
     const log = round.log ?? [];
     const model = cfg.model ?? 'claude-haiku-4-5-20251001';
@@ -434,7 +434,7 @@ register('sim.world', 'service', async (node, ctx) => {
 
             // Push event to directed target or all hearers
             for (const hearer of nearAgents) {
-              const fresh = await ctx.store.get(hearer.$path);
+              const fresh = await ctx.tree.get(hearer.$path);
               if (!fresh) continue;
               const hName = eName(fresh);
               const eventType = to && to === hName ? 'speak' : 'hear';
@@ -446,7 +446,7 @@ register('sim.world', 'service', async (node, ctx) => {
                 data: { message: t.message as string },
                 ts,
               });
-              await ctx.store.set(fresh);
+              await ctx.tree.set(fresh);
             }
 
             newEntries.push({
@@ -461,15 +461,15 @@ register('sim.world', 'service', async (node, ctx) => {
             break;
           }
           case 'move': {
-            const fresh = await ctx.store.get(agent.$path);
+            const fresh = await ctx.tree.get(agent.$path);
             if (!fresh) break;
             const pos = getComponent(fresh, SimPosition)!;
-            setComp(fresh, SimPosition, {
+            setComponent(fresh, SimPosition, {
               ...pos,
               x: Math.max(0, Math.min(cfg.width, t.x as number)),
               y: Math.max(0, Math.min(cfg.height, t.y as number)),
             });
-            await ctx.store.set(fresh);
+            await ctx.tree.set(fresh);
             newEntries.push({
               round: num,
               agent: agentName,
@@ -481,13 +481,13 @@ register('sim.world', 'service', async (node, ctx) => {
             break;
           }
           case 'remember': {
-            const fresh = await ctx.store.get(agent.$path);
+            const fresh = await ctx.tree.get(agent.$path);
             if (!fresh) break;
             const mem = getComponent(fresh, SimMemory);
-            setComp(fresh, SimMemory, {
+            setComponent(fresh, SimMemory, {
               entries: [...(mem?.entries ?? []), t.text as string].slice(-20),
             });
-            await ctx.store.set(fresh);
+            await ctx.tree.set(fresh);
             break;
           }
           case 'interact': {
@@ -497,7 +497,7 @@ register('sim.world', 'service', async (node, ctx) => {
             const targetPath = nameToPath.get(targetName);
             if (!targetPath) break;
 
-            const targetNode = await ctx.store.get(targetPath);
+            const targetNode = await ctx.tree.get(targetPath);
             if (!targetNode) break;
 
             // Check proximity
@@ -510,17 +510,17 @@ register('sim.world', 'service', async (node, ctx) => {
 
             const actx: ActionCtx = {
               node: targetNode,
-              store: ctx.store,
+              tree: ctx.tree,
               signal: AbortSignal.timeout(5000),
-              nc: serverNodeHandle(ctx.store),
+              nc: serverNodeHandle(ctx.tree),
             };
             const result = await (handler as any)(actx, data);
-            // Persist handler mutations (handlers don't call store.set — executeAction/caller does)
-            await ctx.store.set(targetNode);
+            // Persist handler mutations (handlers don't call tree.set — executeAction/caller does)
+            await ctx.tree.set(targetNode);
 
             // Push event to target agent's inbox
             if (targetNode.$type === 'sim.agent') {
-              const freshTarget = await ctx.store.get(targetPath);
+              const freshTarget = await ctx.tree.get(targetPath);
               if (freshTarget) {
                 pushAgentEvent(freshTarget, {
                   round: num,
@@ -529,7 +529,7 @@ register('sim.world', 'service', async (node, ctx) => {
                   data: { ...data, result },
                   ts,
                 });
-                await ctx.store.set(freshTarget);
+                await ctx.tree.set(freshTarget);
               }
             }
 
@@ -551,19 +551,19 @@ register('sim.world', 'service', async (node, ctx) => {
     const freshEntities = await getAllEntities();
     for (const a of freshEntities) {
       const near = getNearby(a, freshEntities);
-      setComp(a, SimNearby, { agents: near.map(eName) });
-      await ctx.store.set(a);
+      setComponent(a, SimNearby, { agents: near.map(eName) });
+      await ctx.tree.set(a);
     }
 
     // Advance round
-    const worldFresh = await ctx.store.get(wp);
+    const worldFresh = await ctx.tree.get(wp);
     if (!worldFresh) return;
-    setComp(worldFresh, SimRound, {
+    setComponent(worldFresh, SimRound, {
       current: num + 1,
       phase: 'idle',
       log: [...log, ...newEntries].slice(-50),
     });
-    await ctx.store.set(worldFresh);
+    await ctx.tree.set(worldFresh);
     console.log(`[sim] round ${num} done: ${newEntries.length} events`);
   }
 
@@ -572,7 +572,7 @@ register('sim.world', 'service', async (node, ctx) => {
     console.log(`[sim] started on ${wp}`);
     while (!stopped) {
       try {
-        const w = await ctx.store.get(wp);
+        const w = await ctx.tree.get(wp);
         const cfg = w ? getComponent(w, SimConfig) : null;
         if (cfg?.running) await runRound();
         await new Promise((r) => setTimeout(r, cfg?.roundDelay ?? 5000));

package/table/view.tsx

@@ -6,8 +6,13 @@ import { useSchema } from '@treenity/react/schema-loader';
 import { Button } from '@treenity/react/ui/button';
 import { Input } from '@treenity/react/ui/input';
 import {
-  Pagination, PaginationContent, PaginationEllipsis,
-  PaginationItem, PaginationLink, PaginationNext, PaginationPrevious,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
 } from '@treenity/react/ui/pagination';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@treenity/react/ui/table';
 import { useMemo } from 'react';

package/todo/types.ts

@@ -16,9 +16,9 @@ class TodoList {
   /** @description Add a new todo item */
   async add(data: { title: string }) {
     if (!data.title?.trim()) throw new Error('Title required');
-    const { node, store } = getCtx();
+    const { node, tree } = getCtx();
     const id = Date.now().toString(36);
-    await store.set({
+    await tree.set({
       $path: `${node.$path}/${id}`,
       $type: 'todo.item',
       title: data.title.trim(),

package/todo/view.tsx

@@ -1,5 +1,7 @@
 import { type NodeData, register } from '@treenity/core';
 import { useChildren, usePath } from '@treenity/react/hooks';
+import { Button } from '@treenity/react/ui/button';
+import { Input } from '@treenity/react/ui/input';
 import { useState } from 'react';
 import { TodoItem, TodoList } from './types';
 
@@ -19,17 +21,14 @@ function TodoListView({ value }: { value: NodeData }) {
       <h2 className="text-xl font-bold mb-4">{list.title}</h2>
 
       <div className="flex gap-2 mb-4">
-        <input
-          className="flex-1 border rounded px-3 py-1.5 text-sm"
+        <Input
+          className="flex-1"
           placeholder="What needs to be done?"
           value={draft}
           onChange={e => setDraft(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && handleAdd()}
         />
-        <button
-          className="bg-blue-600 text-white px-3 py-1.5 rounded text-sm"
-          onClick={handleAdd}
-        >Add</button>
+        <Button size="sm" onClick={handleAdd}>Add</Button>
       </div>
 
       <ul className="space-y-1">
@@ -47,16 +46,16 @@ function TodoItemRow({ value }: { value: NodeData }) {
   return (
     <li
       className="flex items-center gap-2 px-3 py-2 rounded
-        hover:bg-neutral-100 cursor-pointer"
+        hover:bg-muted cursor-pointer"
       onClick={() => item.toggle()}
     >
       <span className={`w-4 h-4 rounded border flex items-center
         justify-center text-xs ${item.done
-          ? 'bg-blue-600 border-blue-600 text-white'
-          : 'border-neutral-300'}`}>
+          ? 'bg-primary border-primary text-primary-foreground'
+          : 'border-input'}`}>
         {item.done ? '✓' : ''}
       </span>
-      <span className={item.done ? 'line-through text-neutral-400' : ''}>
+      <span className={item.done ? 'line-through text-muted-foreground' : ''}>
         {item.title}
       </span>
     </li>

package/whisper/inbox.ts

@@ -19,7 +19,7 @@ register('whisper.inbox', 'service', async (node, ctx) => {
   const sent = new Set<string>();
 
   // Mark existing COMPLETED transcriptions as already processed
-  const { items } = await ctx.store.getChildren(config.source);
+  const { items } = await ctx.tree.getChildren(config.source);
   for (const child of items) {
     if (child.$type !== 'whisper.transcription') continue;
     if (getText(child)) sent.add(child.$path);
@@ -29,7 +29,7 @@ register('whisper.inbox', 'service', async (node, ctx) => {
   const unsub = ctx.subscribe(config.source, (event) => {
     if (event.type !== 'set' && event.type !== 'patch') return;
 
-    ctx.store.get(event.path).then(async (n) => {
+    ctx.tree.get(event.path).then(async (n) => {
       if (!n || n.$type !== 'whisper.transcription') return;
       if (sent.has(n.$path)) return;
 
@@ -40,7 +40,7 @@ register('whisper.inbox', 'service', async (node, ctx) => {
 
       const taskId = `t-${Date.now()}`;
       const taskPath = `${config.target}/tasks/${taskId}`;
-      await ctx.store.set(createNode(taskPath, 'agent.task', {
+      await ctx.tree.set(createNode(taskPath, 'agent.task', {
         prompt: text,
         status: 'pending',
         createdAt: Date.now(),