@treenity/mods 3.0.1 → 3.0.3

package/mcp/mcp-server.ts

@@ -0,0 +1,393 @@
+// Treenity MCP Server — exposes tree store as MCP tools
+// StreamableHTTP transport, stateless, token auth via ?token= or Authorization header
+
+import { requestApproval } from '#agent/guardian';
+import { matchesAny } from '@treenity/core/glob';
+import { AiPolicy } from '#agent/types';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
+import { createNode, getComponent } from '@treenity/core';
+import { verifyViewSource } from '@treenity/core/mods/uix/verify';
+import { TypeCatalog } from '@treenity/core/schema/catalog';
+import { executeAction } from '@treenity/core/server/actions';
+import { buildClaims, resolveToken, type Session, withAcl } from '@treenity/core/server/auth';
+import { deployPrefab } from '@treenity/core/server/prefab';
+import type { Tree } from '@treenity/core/tree';
+import { existsSync, readFileSync } from 'node:fs';
+import { createServer, type Server } from 'node:http';
+import { createServer as createHttpsServer } from 'node:https';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { z } from 'zod/v3';
+
+function loadDevCerts(): { key: Buffer; cert: Buffer } | null {
+  const home = homedir();
+  const keyPath = join(home, 'localhost+2-key.pem');
+  const certPath = join(home, 'localhost+2.pem');
+  if (!existsSync(keyPath) || !existsSync(certPath)) return null;
+  return { key: readFileSync(keyPath), cert: readFileSync(certPath) };
+}
+
+// Guardian policy check for MCP write operations
+// Reads global policy from /agents/guardian, checks deny → escalate → allow
+export type McpGuardianResult = { allowed: true } | { allowed: false; reason: string };
+
+
+export async function checkMcpGuardian(store: Tree, toolName: string, input?: string): Promise<McpGuardianResult> {
+  try {
+    const guardianNode = await store.get('/agents/guardian');
+    if (!guardianNode) return { allowed: false, reason: 'no Guardian configured at /agents/guardian — all writes denied' };
+
+    const policy = getComponent(guardianNode, AiPolicy);
+    if (!policy || policy.$type !== 'ai.policy') return { allowed: false, reason: 'invalid Guardian policy type — writes denied' };
+
+    const allow = (policy.allow as string[]) ?? [];
+    const deny = (policy.deny as string[]) ?? [];
+    const escalate = (policy.escalate as string[]) ?? [];
+
+    if (matchesAny(deny, toolName)) return { allowed: false, reason: `denied by Guardian: ${toolName}` };
+
+    if (matchesAny(escalate, toolName)) {
+      const approved = await requestApproval(store, {
+        agentPath: '/agents/mcp',
+        role: 'mcp',
+        tool: toolName,
+        input: input?.slice(0, 500) ?? '',
+        reason: 'MCP tool requires approval',
+      });
+      return approved
+        ? { allowed: true }
+        : { allowed: false, reason: 'denied by human' };
+    }
+
+    if (matchesAny(allow, toolName)) return { allowed: true };
+
+    // Unknown tool via MCP → deny by default (safer than escalate for external callers)
+    return { allowed: false, reason: `not in Guardian allow list: ${toolName}. Use Treenity Agent Office for write operations.` };
+  } catch (err) {
+    console.error('[mcp-guardian] failed to check policy:', err);
+    return { allowed: false, reason: 'Guardian check failed — writes denied for safety' };
+  }
+}
+
+/** Compact YAML-like serializer — readable for LLMs, much less noisy than JSON */
+function yaml(val: unknown, depth = 0, maxStr = 300): string {
+  const pad = '  '.repeat(depth);
+  if (val == null) return 'null';
+  if (typeof val === 'boolean' || typeof val === 'number') return String(val);
+  if (typeof val === 'string') {
+    if (maxStr < Infinity && val.length > maxStr) return JSON.stringify(val.slice(0, maxStr) + '…');
+    return /[\n\r:#\[\]{}",]/.test(val) || val === '' ? JSON.stringify(val) : val;
+  }
+  if (Array.isArray(val)) {
+    if (!val.length) return '[]';
+    if (val.every(v => typeof v !== 'object' || v == null)) {
+      const inline = `[${val.map(v => yaml(v, 0, maxStr)).join(', ')}]`;
+      if (inline.length < 80) return inline;
+    }
+    return val.map(item => {
+      if (typeof item !== 'object' || item == null) return `${pad}- ${yaml(item, 0, maxStr)}`;
+      const inner = yaml(item, depth + 1, maxStr);
+      const lines = inner.split('\n');
+      return lines.length === 1
+        ? `${pad}- ${lines[0].trimStart()}`
+        : `${pad}- ${lines[0].trimStart()}\n${lines.slice(1).map(l => `${pad}  ${l.trimStart()}`).join('\n')}`;
+    }).join('\n');
+  }
+  if (typeof val === 'object') {
+    const entries = Object.entries(val as Record<string, unknown>);
+    if (!entries.length) return '{}';
+    return entries.map(([k, v]) => {
+      if (v != null && typeof v === 'object') {
+        const inner = yaml(v, depth + 1, maxStr);
+        if (!inner.includes('\n') && inner.length < 60) return `${pad}${k}: ${inner.trimStart()}`;
+        return `${pad}${k}:\n${inner}`;
+      }
+      return `${pad}${k}: ${yaml(v, 0, maxStr)}`;
+    }).join('\n');
+  }
+  return String(val);
+}
+
+const text = (s: string) => ({ content: [{ type: 'text' as const, text: s }] });
+const catalog = new TypeCatalog();
+
+function dataKeys(node: Record<string, unknown>) {
+  return Object.keys(node).filter(k => !k.startsWith('$'));
+}
+
+export async function buildMcpServer(store: Tree, session: Session, claims?: string[]) {
+  claims ??= await buildClaims(store, session.userId);
+  const aclStore = withAcl(store, session.userId, claims);
+
+  const mcp = new McpServer({ name: 'treenity', version: '1.0.0' });
+
+  mcp.registerTool(
+    'get_node',
+    {
+      description: 'Read a node by path. Returns full untruncated values.',
+      inputSchema: { path: z.string() },
+    },
+    async ({ path }) => {
+      const node = await aclStore.get(path);
+      return text(node ? yaml(node, 0, Infinity) : `not found: ${path}`);
+    },
+  );
+
+  mcp.registerTool(
+    'list_children',
+    {
+      description: 'List children of a node. Long string values may be truncated — use get_node for full data.',
+      inputSchema: {
+        path: z.string(),
+        depth: z.number().optional(),
+        detail: z.boolean().optional().describe('Show first-level fields and component types'),
+        full: z.boolean().optional().describe('Return complete YAML of each node'),
+      },
+    },
+    async ({ path, depth, detail, full }) => {
+      const ctx = { queryContextPath: path, userId: session.userId };
+      const result = await aclStore.getChildren(path, { depth }, ctx);
+      const { items, total, truncated } = result;
+      const truncNote = truncated ? '\n⚠️ Results truncated — ACL scan limit reached. Use query mounts for large collections.' : '';
+
+      if (full) return text(yaml({ total, truncated, items }));
+
+      if (detail) {
+        const lines = items.map(n => {
+          const name = n.$path.split('/').at(-1);
+          const keys = dataKeys(n);
+          const header = n.$type === 'dir' ? `${name}/` : `${name}: ${n.$type}  [${keys.length}]`;
+          const fields = keys.map(k => {
+            const v = (n as Record<string, unknown>)[k];
+            if (v && typeof v === 'object' && '$type' in (v as object))
+              return `  ${k}: ${(v as Record<string, unknown>).$type}`;
+            if (Array.isArray(v)) return `  ${k}: [${v.length}]`;
+            const s = String(v);
+            return `  ${k}: ${s.length > 60 ? s.slice(0, 60) + '…' : s}`;
+          });
+          return header + (fields.length ? '\n' + fields.join('\n') : '');
+        });
+        return text(lines.join('\n') + `\n(${total} total)` + truncNote);
+      }
+
+      const lines = items.map(n => {
+        const name = n.$path.split('/').at(-1);
+        if (n.$type === 'dir') return `${name}/`;
+        return `${name}  ${n.$type}  [${dataKeys(n).length}]`;
+      });
+      return text(lines.join('\n') + (total > items.length ? `\n(${total} total)` : '') + truncNote);
+    },
+  );
+
+  mcp.registerTool(
+    'set_node',
+    {
+      description: 'Create or update a node. May require Guardian approval.',
+      inputSchema: {
+        path: z.string(),
+        type: z.string(),
+        components: z.record(z.unknown()).optional(),
+        acl: z.array(z.object({ g: z.string(), p: z.number() })).optional(),
+        owner: z.string().optional(),
+      },
+    },
+    async ({ path, type, components, acl, owner }) => {
+      const guard = await checkMcpGuardian(store, 'mcp__treenity__set_node', JSON.stringify({ path, type }));
+      if (!guard.allowed) return text(`🛑 Guardian: ${guard.reason}`);
+      const existing = await aclStore.get(path);
+      const node = existing ?? createNode(path, type);
+      if (!existing) node.$type = type;
+      if (components) {
+        for (const [k, v] of Object.entries(components)) {
+          if (k === '__proto__' || k === 'constructor' || k === 'prototype') continue;
+          const comp = v as Record<string, unknown> | null;
+          if (comp && typeof comp === 'object' && comp.$type === type) {
+            for (const [fk, fv] of Object.entries(comp)) {
+              if (fk !== '$type') node[fk] = fv;
+            }
+            continue;
+          }
+          node[k] = v;
+        }
+      }
+      if (acl) node.$acl = acl;
+      if (owner) node.$owner = owner;
+      await aclStore.set(node);
+      return text(yaml(node));
+    },
+  );
+
+  mcp.registerTool(
+    'execute',
+    {
+      description: 'Execute an action on a node or component. Actions are methods registered on types. May require Guardian approval.',
+      inputSchema: {
+        path: z.string(),
+        action: z.string(),
+        type: z.string().optional(),
+        key: z.string().optional(),
+        data: z.record(z.unknown()).optional(),
+      },
+    },
+    async ({ path, action, type, key, data }) => {
+      const guard = await checkMcpGuardian(store, 'mcp__treenity__execute', JSON.stringify({ path, action }));
+      if (!guard.allowed) return text(`🛑 Guardian: ${guard.reason}`);
+      // Action-level Guardian check — allows operators to deny/escalate specific actions
+      // e.g. deny "mcp__treenity__execute:run" to block flow execution
+      const actionGuard = await checkMcpGuardian(store, `mcp__treenity__execute:${action}`, JSON.stringify({ path }));
+      if (!actionGuard.allowed) return text(`🛑 Guardian: ${actionGuard.reason}`);
+      const result = await executeAction(aclStore, path, type, key, action, data);
+      return text(yaml(result ?? { ok: true }));
+    },
+  );
+
+  mcp.registerTool(
+    'deploy_prefab',
+    {
+      description: 'Deploy a module prefab (node tree template) to a target path. Idempotent: skips existing nodes. Browse available prefabs via list_children /sys/mods.',
+      inputSchema: {
+        source: z.string().describe('Prefab path: /sys/mods/{mod}/prefabs/{name}'),
+        target: z.string().describe('Target path where nodes will be created'),
+        allowAbsolute: z.boolean().optional().describe('Allow prefab to write outside target (e.g. /sys/autostart refs). Default: false'),
+      },
+    },
+    async ({ source, target, allowAbsolute }) => {
+      const guard = await checkMcpGuardian(store, 'mcp__treenity__deploy_prefab', JSON.stringify({ source, target }));
+      if (!guard.allowed) return text(`🛑 Guardian: ${guard.reason}`);
+      const result = await deployPrefab(aclStore, source, target, { allowAbsolute });
+      return text(yaml(result));
+    },
+  );
+
+  mcp.registerTool(
+    'compile_view',
+    {
+      description: 'Verify that a UIX view source compiles correctly. Pass path to check an existing type node, or source to verify before writing.',
+      inputSchema: {
+        path: z.string().optional().describe('Path to type node (e.g. /sys/types/cosmos/system) — reads view.source'),
+        source: z.string().optional().describe('Raw JSX/TSX source to verify directly'),
+      },
+    },
+    async ({ path, source }) => {
+      let code = source;
+      if (!code) {
+        if (!path) return text('error: provide path or source');
+        const node = await aclStore.get(path);
+        if (!node) return text(`not found: ${path}`);
+        code = (node as any)?.view?.source;
+        if (!code || typeof code !== 'string') return text(`no view.source on ${path}`);
+      }
+      const result = verifyViewSource(code);
+      return text(yaml(result));
+    },
+  );
+
+  mcp.registerTool(
+    'remove_node',
+    {
+      description: 'Remove a node by path. May be denied by Guardian.',
+      inputSchema: { path: z.string() },
+    },
+    async ({ path }) => {
+      const guard = await checkMcpGuardian(store, 'mcp__treenity__remove_node', path);
+      if (!guard.allowed) return text(`🛑 Guardian: ${guard.reason}`);
+      const ok = await aclStore.remove(path);
+      return text(ok ? `removed: ${path}` : `not found: ${path}`);
+    },
+  );
+
+  // ── Discovery tools — powered by TypeCatalog ──
+
+  mcp.registerTool(
+    'catalog',
+    {
+      description: 'List all registered types with title, properties, and action names. Use this first to discover what types exist.',
+      inputSchema: {},
+    },
+    async () => text(yaml(catalog.list())),
+  );
+
+  mcp.registerTool(
+    'describe_type',
+    {
+      description: 'Get full schema of a type: properties, actions with argument types, and cross-references to other types. Use after catalog to understand a specific type deeply.',
+      inputSchema: { type: z.string().describe('Type name, e.g. "cafe.contact" or "board.task"') },
+    },
+    async ({ type: typeName }) => {
+      const desc = catalog.describe(typeName);
+      return text(desc ? yaml(desc) : `type not found: ${typeName}`);
+    },
+  );
+
+  mcp.registerTool(
+    'search_types',
+    {
+      description: 'Search types by keyword across names, titles, property names, and action names. Use to find types relevant to a task.',
+      inputSchema: { query: z.string().describe('Search keyword, e.g. "order", "mail", "contact"') },
+    },
+    async ({ query }) => text(yaml(catalog.search(query))),
+  );
+
+  return mcp;
+}
+
+export function extractToken(req: import('node:http').IncomingMessage): string | null {
+  const auth = req.headers.authorization;
+  if (typeof auth === 'string' && auth.startsWith('Bearer ')) return auth.slice(7);
+
+  const qs = (req.url ?? '').split('?')[1];
+  if (qs) {
+    const match = qs.match(/(?:^|&)token=([^&]+)/);
+    if (match) return decodeURIComponent(match[1]);
+  }
+  return null;
+}
+
+/** Create MCP HTTP server. Returns server handle for lifecycle management. */
+export function createMcpHttpServer(store: Tree, port: number): Server {
+  const tls = loadDevCerts();
+
+  const handler = async (req: import('node:http').IncomingMessage, res: import('node:http').ServerResponse) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, mcp-session-id');
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+
+    const url = (req.url ?? '/').split('?')[0];
+    if (url !== '/mcp') {
+      res.writeHead(404);
+      res.end('not found');
+      return;
+    }
+
+    const token = extractToken(req);
+    let session: Session | null = null;
+    let devClaims: string[] | undefined;
+    if (token) {
+      session = await resolveToken(store, token);
+    } else if (!process.env.TENANT) {
+      console.warn('[mcp] ⚠️  DEV MODE: no TENANT set — all MCP requests have ADMIN access. Set TENANT env for production.');
+      session = { userId: 'mcp-dev' } as Session;
+      devClaims = ['u:mcp-dev', 'authenticated', 'admins'];
+    }
+    if (!session) {
+      res.writeHead(401, { 'Content-Type': 'text/plain' });
+      res.end('token required (?token= or Authorization: Bearer)');
+      return;
+    }
+
+    const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
+    const mcp = await buildMcpServer(store, session, devClaims);
+    await mcp.connect(transport);
+    await transport.handleRequest(req, res);
+  };
+
+  const server = tls ? createHttpsServer(tls, handler) : createServer(handler);
+  server.listen(port, '127.0.0.1', () => console.log(`treenity mcp ${tls ? 'https' : 'http'}://localhost:${port}/mcp`));
+  return server;
+}

package/mcp/server.ts

@@ -0,0 +1,2 @@
+import './types';
+import './service';

package/mcp/service.ts

@@ -0,0 +1,18 @@
+// MCP autostart service — starts/stops the MCP HTTP server via tree lifecycle
+
+import { getComponent, register } from '@treenity/core';
+import { createMcpHttpServer } from './mcp-server';
+import { McpConfig } from './types';
+
+register('mcp.server', 'service', async (node, ctx) => {
+  const config = getComponent(node, McpConfig);
+  const port = config?.port ?? (Number(process.env.MCP_PORT) || 3212);
+  const server = createMcpHttpServer(ctx.tree, port);
+
+  return {
+    stop: async () => {
+      server.close();
+      console.log(`[mcp] stopped :${port}`);
+    },
+  };
+});

package/mcp/types.ts

@@ -0,0 +1,6 @@
+import { registerType } from '@treenity/core/comp';
+
+export class McpConfig {
+  port = 3212;
+}
+registerType('mcp.server', McpConfig);

package/mindmap/branch.tsx

@@ -3,19 +3,30 @@
 
 import type { NodeData } from '@treenity/core';
 import { useChildren } from '@treenity/react/hooks';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
+
+export type EditingAt = {
+  parentPath: string;
+  side: 'left' | 'right';
+  color: string;
+} | null;
 
 export type MindMapState = {
   expanded: Set<string>;
   selectedPath: string | null;
+  editingAt: EditingAt;
   onToggle: (path: string) => void;
   onSelect: (path: string) => void;
+  onAddChild: (parentPath: string, side: 'left' | 'right', color: string) => void;
+  onCommitAdd: (parentPath: string, name: string) => void;
+  onCancelAdd: () => void;
+  onDelete: (path: string) => void;
 };
 
 export const MindMapCtx = createContext<MindMapState>(null!);
 
 const LEVEL_W = 200;
-const SPACING = 36;
+const SPACING = 40;
 
 function basename(path: string): string {
   if (path === '/') return '/';
@@ -41,7 +52,7 @@ type BranchProps = {
 };
 
 export function MindMapBranch({ node, side, color, depth }: BranchProps) {
-  const { expanded, selectedPath, onToggle, onSelect } = useContext(MindMapCtx);
+  const { expanded, selectedPath, onToggle, onSelect, onAddChild } = useContext(MindMapCtx);
   const isExpanded = expanded.has(node.$path);
   const isLeft = side === 'left';
   const isSelected = selectedPath === node.$path;
@@ -50,8 +61,7 @@ export function MindMapBranch({ node, side, color, depth }: BranchProps) {
   const strokeW = Math.max(1.5, 3 - depth * 0.4);
 
   return (
-    <g>
-      {/* Click = expand/collapse */}
+    <g className="mm-branch">
       <g
         className={`mm-node${isSelected ? ' mm-node-selected' : ''}`}
         onClick={() => onToggle(node.$path)}
@@ -60,9 +70,9 @@ export function MindMapBranch({ node, side, color, depth }: BranchProps) {
         {/* Dot */}
         <circle r={isSelected ? 5 : 3.5} fill={color} className="mm-dot" />
 
-        {/* Label */}
+        {/* Label — offset from dot to avoid overlap with child curves */}
         <text
-          x={isLeft ? -12 : 12}
+          x={isLeft ? -14 : 14}
           textAnchor={isLeft ? 'end' : 'start'}
           dominantBaseline="central"
           className="mm-label"
@@ -74,7 +84,7 @@ export function MindMapBranch({ node, side, color, depth }: BranchProps) {
         {/* Type tag */}
         {type && depth <= 2 && (
           <text
-            x={isLeft ? -12 - name.length * 7.5 - 8 : 12 + name.length * 7.5 + 8}
+            x={isLeft ? -14 - name.length * 7.5 - 6 : 14 + name.length * 7.5 + 6}
             textAnchor={isLeft ? 'end' : 'start'}
             dominantBaseline="central"
             className="mm-type-tag"
@@ -86,14 +96,24 @@ export function MindMapBranch({ node, side, color, depth }: BranchProps) {
 
         {/* Hit area */}
         <rect
-          x={isLeft ? -12 - name.length * 8 : -6}
-          y={-14}
-          width={name.length * 8 + 20}
-          height={28}
+          x={isLeft ? -14 - name.length * 8 : -6}
+          y={-16}
+          width={name.length * 8 + 24}
+          height={32}
           fill="transparent"
         />
       </g>
 
+      {/* "+" add child button — visible on hover */}
+      <g
+        className="mm-add-btn"
+        transform={`translate(${isLeft ? -14 - name.length * 7.5 - 20 : 14 + name.length * 7.5 + 20},0)`}
+        onClick={e => { e.stopPropagation(); onAddChild(node.$path, side, color); }}
+      >
+        <circle r={9} className="mm-add-bg" />
+        <text textAnchor="middle" dominantBaseline="central" className="mm-add-icon">+</text>
+      </g>
+
       {/* Children (only fetched when expanded) */}
       {isExpanded && (
         <BranchChildren
@@ -108,6 +128,61 @@ export function MindMapBranch({ node, side, color, depth }: BranchProps) {
   );
 }
 
+// Inline input for naming new nodes
+function InlineInput({ x, y, side, onCommit, onCancel }: {
+  x: number;
+  y: number;
+  side: 'left' | 'right';
+  onCommit: (name: string) => void;
+  onCancel: () => void;
+}) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Focus after foreignObject mounts
+    setTimeout(() => ref.current?.focus(), 50);
+  }, []);
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      const val = ref.current?.value.trim();
+      if (val) onCommit(val);
+      else onCancel();
+    }
+    if (e.key === 'Escape') onCancel();
+  };
+
+  const handleBlur = () => {
+    const val = ref.current?.value.trim();
+    if (val) onCommit(val);
+    else onCancel();
+  };
+
+  const isLeft = side === 'left';
+  const inputW = 140;
+
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <circle r={3.5} fill="var(--accent)" />
+      <foreignObject
+        x={isLeft ? -inputW - 14 : 14}
+        y={-12}
+        width={inputW}
+        height={24}
+      >
+        <input
+          ref={ref}
+          className="mm-inline-input"
+          placeholder="node name..."
+          onKeyDown={handleKey}
+          onBlur={handleBlur}
+        />
+      </foreignObject>
+    </g>
+  );
+}
+
 type ChildrenProps = {
   path: string;
   side: 'left' | 'right';
@@ -117,17 +192,22 @@ type ChildrenProps = {
 };
 
 function BranchChildren({ path, side, color, depth, strokeW }: ChildrenProps) {
+  const { editingAt, onCommitAdd, onCancelAdd } = useContext(MindMapCtx);
   const children = useChildren(path, { watch: true, watchNew: true });
-  if (children.length === 0) return null;
 
   const isLeft = side === 'left';
   const dx = isLeft ? -LEVEL_W : LEVEL_W;
-  const totalH = (children.length - 1) * SPACING;
+  const isEditing = editingAt?.parentPath === path;
+  const totalCount = children.length + (isEditing ? 1 : 0);
+
+  if (totalCount === 0) return null;
+
+  const totalH = (totalCount - 1) * SPACING;
   const startY = -totalH / 2;
 
   return (
     <>
-      {/* Curves from this node to each child — drawn at parent level */}
+      {/* Curves to existing children */}
       {children.map((child, i) => {
         const cy = startY + i * SPACING;
         return (
@@ -144,20 +224,39 @@ function BranchChildren({ path, side, color, depth, strokeW }: ChildrenProps) {
         );
       })}
 
-      {/* Child nodes */}
+      {/* Curve to new node slot */}
+      {isEditing && (
+        <path
+          d={sCurve(dx, startY + children.length * SPACING)}
+          fill="none"
+          stroke="var(--accent)"
+          strokeWidth={strokeW}
+          strokeOpacity={0.5}
+          strokeLinecap="round"
+          strokeDasharray="6 4"
+        />
+      )}
+
+      {/* Existing child nodes */}
       {children.map((child, i) => {
         const cy = startY + i * SPACING;
         return (
           <g key={child.$path} transform={`translate(${dx},${cy})`}>
-            <MindMapBranch
-              node={child}
-              side={side}
-              color={color}
-              depth={depth + 1}
-            />
+            <MindMapBranch node={child} side={side} color={color} depth={depth + 1} />
           </g>
         );
       })}
+
+      {/* Inline input for new node */}
+      {isEditing && (
+        <InlineInput
+          x={dx}
+          y={startY + children.length * SPACING}
+          side={side}
+          onCommit={name => onCommitAdd(path, name)}
+          onCancel={onCancelAdd}
+        />
+      )}
     </>
   );
 }