@soederpop/luca 0.2.2 → 0.2.3

package/commands/inkbot.ts

@@ -2,208 +2,437 @@ import { z } from 'zod'
 import { commands, CommandOptionsSchema } from '@soederpop/luca'
 import type { ContainerContext } from '@soederpop/luca'
 import { AGIContainer } from '../src/agi/container.server.js'
-import { tmpdir } from 'os'
 
 export const argsSchema = CommandOptionsSchema.extend({
   model: z.string().optional().describe('OpenAI model to use'),
 })
 
+// ─── Scene Types ──────────────────────────────────────────────────────
+
+interface SceneState {
+  code: string
+  component: ((...args: any[]) => any) | null
+  error: string
+  status: 'idle' | 'rendered' | 'interactive' | 'complete' | 'failed'
+  interactive: boolean
+}
+
+type Layout = 'split' | 'canvas' | 'chat'
+const LAYOUT_CYCLE: Layout[] = ['split', 'canvas', 'chat']
+
+function seedMentalState(ms: any) {
+  ms.set('activeSceneId', null)
+  ms.set('scenes', {} as Record<string, SceneState>)
+  ms.set('focus', 'chat' as 'chat' | 'canvas')
+  ms.set('layout', 'split' as Layout)
+  ms.set('thoughts', [] as Array<{ at: string; text: string }>)
+  ms.set('observations', {} as Record<string, string>)
+  ms.set('plan', '')
+  ms.set('mood', 'ready')
+}
+
+// ─── Safe Eval ────────────────────────────────────────────────────────
+
+const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+
+const EVAL_TIMEOUT = 15_000
+
+async function evalWithTimeout<T>(fn: () => Promise<T>, ms: number): Promise<T> {
+  let timer: ReturnType<typeof setTimeout>
+  const timeout = new Promise<never>((_, reject) => {
+    timer = setTimeout(() => reject(new Error(`Scene evaluation timed out after ${ms}ms`)), ms)
+  })
+  try {
+    return await Promise.race([fn(), timeout])
+  } finally {
+    clearTimeout(timer!)
+  }
+}
+
+// ─── Main Handler ─────────────────────────────────────────────────────
+
 export async function inkbot(options: z.infer<typeof argsSchema>, context: ContainerContext) {
   const container = new AGIContainer()
 
-  // ─── Load Ink ────────────────────────────────────────────────────────
+  // ─── Load Ink ──────────────────────────────────────────────────────
   const ink = container.feature('ink', { enable: true, patchConsole: true })
   await ink.loadModules()
   const React = ink.React
   const h = React.createElement
-  const { Box, Text } = ink.components
+  const { Box, Text, Spacer, Newline } = ink.components
   const { useInput, useApp, useStdout } = ink.hooks
-  const { useState, useEffect } = React
-
-  // ─── Scene Runner ────────────────────────────────────────────────────
-  // Scenes are code strings run as bun subprocesses.
-  // The stage entity tracks which scenes exist and which is active.
-  // Scene entities track individual code, output, error, status.
+  const { useState, useEffect, useRef, useCallback, useMemo } = React
 
-  const stage = container.entity('inkbot:stage')
-  stage.setState({ activeSceneId: null, sceneIds: [] as string[], tick: 0 })
+  // ─── Assistant ─────────────────────────────────────────────────────
+  const mgr = container.feature('assistantsManager')
+  await mgr.discover()
+  const assistant = mgr.create('inkbot', { model: options.model })
 
-  const sceneMap: Record<string, ReturnType<typeof container.entity>> = {}
+  seedMentalState(assistant.mentalState)
 
-  function bumpStage() {
-    stage.setState({ tick: ((stage.state.get('tick') as number) || 0) + 1 })
+  // ─── Container features for scene scope ────────────────────────────
+  const fs = container.feature('fs')
+  const proc = container.feature('proc')
+  const ui = container.feature('ui')
+  const yaml = container.feature('yaml')
+  const grep = container.feature('grep')
+  const git = container.feature('git')
+
+  // ─── Scene Focus Context ───────────────────────────────────────────
+  // Scenes use useSceneInput() which is only active when canvas is focused.
+  const SceneFocusContext = React.createContext(false)
+
+  function makeUseSceneInput(onError: (err: Error) => void) {
+    return function useSceneInput(handler: (ch: string, key: any) => void) {
+      const focused = React.useContext(SceneFocusContext)
+      useInput(
+        (ch: string, key: any) => {
+          // Reserve Tab, Escape, and Ctrl+L (layout toggle) for the host app
+          if (key.tab || key.escape) return
+          if (key.ctrl && ch === 'l') return
+          try {
+            handler(ch, key)
+          } catch (err: any) {
+            onError(err)
+          }
+        },
+        { isActive: focused },
+      )
+    }
   }
 
-  function getOrCreateScene(id: string, code: string) {
-    if (sceneMap[id]) {
-      sceneMap[id].setState({ code })
-      return sceneMap[id]
+  // ─── Error Boundary ────────────────────────────────────────────────
+
+  class SceneErrorBoundary extends React.Component<
+    { children: any; onError?: (err: Error) => void; fallback?: any },
+    { error: Error | null }
+  > {
+    constructor(props: any) {
+      super(props)
+      this.state = { error: null }
+    }
+    static getDerivedStateFromError(error: Error) {
+      return { error }
+    }
+    componentDidCatch(error: Error) {
+      this.props.onError?.(error)
+    }
+    render() {
+      if (this.state.error) {
+        return h(
+          Box,
+          { flexDirection: 'column', paddingX: 1 },
+          h(Text, { color: 'red', bold: true }, 'Render Error'),
+          h(Text, { color: 'red', wrap: 'wrap' }, this.state.error.message),
+          h(
+            Text,
+            { dimColor: true, wrap: 'wrap' },
+            this.state.error.stack?.split('\n').slice(1, 4).join('\n') || '',
+          ),
+        )
+      }
+      return this.props.children
     }
-    const scene = container.entity(`inkbot:scene:${id}`)
-    scene.setState({ code, output: '', error: '', status: 'idle', exitCode: null })
-    sceneMap[id] = scene
-    const ids = [...((stage.state.get('sceneIds') || []) as string[])]
-    if (!ids.includes(id)) ids.push(id)
-    stage.setState({ sceneIds: ids })
-    if (!stage.state.get('activeSceneId')) stage.setState({ activeSceneId: id })
-    return scene
   }
 
-  const proc = container.feature('proc')
-  const fs = container.feature('fs')
-  const sceneTmpDir = `${tmpdir()}/inkbot-scenes`
-  fs.ensureFolder(sceneTmpDir)
+  // ─── Scene State Management ────────────────────────────────────────
 
-  async function runScene(id: string): Promise<{ output: string; error: string; exitCode: number }> {
-    const scene = sceneMap[id]
-    if (!scene) throw new Error(`Scene "${id}" not found`)
+  let busy = false
+  assistant.on('turnStart', () => { busy = true })
+  assistant.on('response', () => { busy = false })
 
-    const code = scene.state.get('code') as string
-    scene.setState({ status: 'running', output: '', error: '' })
-    bumpStage()
+  function getScenes(): Record<string, SceneState> {
+    return { ...(assistant.mentalState.get('scenes') || {}) }
+  }
 
-    // Write to tmpdir, shell out to `luca run` — gets full container context + process isolation
-    const file = `${sceneTmpDir}/${id.replace(/[^a-zA-Z0-9-]/g, '_')}_${Date.now()}.ts`
-    fs.writeFile(file, code)
+  function setScene(id: string, patch: Partial<SceneState>) {
+    const scenes = getScenes()
+    scenes[id] = {
+      ...(scenes[id] || { code: '', component: null, error: '', status: 'idle', interactive: false }),
+      ...patch,
+    }
+    assistant.mentalState.set('scenes', scenes)
+  }
 
-    try {
-      const result = await proc.spawnAndCapture('luca', ['run', file], {
-        cwd: container.cwd,
-        onOutput(data: string) {
-          scene.setState({ output: ((scene.state.get('output') || '') as string) + data })
-          bumpStage()
-        },
-        onError(data: string) {
-          scene.setState({ error: ((scene.state.get('error') || '') as string) + data })
-          bumpStage()
-        },
-      })
+  // ─── Pending Responders ────────────────────────────────────────────
+  // For interactive scenes: draw() blocks until the component calls respond().
+  const pendingResponders = new Map<string, (result: any) => void>()
+
+  function createRespondForScene(sceneId: string) {
+    return (data: any) => {
+      const resolver = pendingResponders.get(sceneId)
+      if (resolver) {
+        pendingResponders.delete(sceneId)
+        setScene(sceneId, { status: 'complete' })
+        assistant.mentalState.set('focus', 'chat')
+        resolver({ status: 'completed', sceneId, response: data })
+      }
+    }
+  }
+
+  // ─── Scene Error Reporter ──────────────────────────────────────────
+  // When a scene errors and the assistant is idle, feed the error back
+  // so it can self-correct.
+  function reportSceneError(sceneId: string, error: string) {
+    setScene(sceneId, { error, status: 'failed' })
+    if (!busy) {
+      const errMsg = `[Scene "${sceneId}" render error]\n${error}\n\nFix the component code and redraw.`
+      assistant.conversation?.pushMessage({ role: 'developer', content: errMsg })
+      assistant.ask(errMsg).catch(() => {})
+    }
+  }
 
-      const status = result.exitCode === 0 ? 'complete' : 'failed'
-      scene.setState({ status, exitCode: result.exitCode })
-      bumpStage()
-      try { fs.unlink(file) } catch {}
+  // ─── Scene Evaluator ──────────────────────────────────────────────
+  // Evaluates scene code in an async function scope with all APIs injected.
+  // The code must `return` a React component function.
+
+  async function evaluateScene(
+    code: string,
+    sceneId: string,
+    interactive: boolean,
+  ): Promise<{ component: ((...args: any[]) => any) | null; error: string | null }> {
+    const respondFn = createRespondForScene(sceneId)
+    const sceneErrorHandler = (err: Error) => reportSceneError(sceneId, err.message)
+    const useSceneInput = makeUseSceneInput(sceneErrorHandler)
+
+    const paramNames = [
+      // React core
+      'h', 'React', 'Box', 'Text', 'Spacer', 'Newline',
+      // React hooks
+      'useState', 'useEffect', 'useRef', 'useCallback', 'useMemo',
+      // Scene input (focus-aware, error-safe)
+      'useSceneInput',
+      // Canvas API
+      'setMental', 'getMental', 'respond',
+      // Container
+      'container', 'fs', 'proc', 'ui', 'yaml', 'grep', 'git',
+      // Utilities
+      'fetch', 'URL', 'Buffer', 'JSON', 'Date', 'Math', 'console',
+    ]
+
+    const paramValues = [
+      h, React, Box, Text, Spacer, Newline,
+      useState, useEffect, useRef, useCallback, useMemo,
+      useSceneInput,
+      (k: string, v: any) => assistant.mentalState.set(k, v),
+      (k: string) => assistant.mentalState.get(k),
+      respondFn,
+      container, fs, proc, ui, yaml, grep, git,
+      fetch, URL, Buffer, JSON, Date, Math, console,
+    ]
 
-      return {
-        output: (scene.state.get('output') || '') as string,
-        error: (scene.state.get('error') || '') as string,
-        exitCode: result.exitCode ?? 1,
+    try {
+      const factory = new AsyncFunction(...paramNames, code)
+      const result = await evalWithTimeout(() => factory(...paramValues), EVAL_TIMEOUT)
+
+      if (typeof result !== 'function') {
+        return {
+          component: null,
+          error: `Scene code must return a React component function, got ${typeof result}. End your code with: return function Scene() { return h(Box, {}, h(Text, {}, "hello")) }`,
+        }
       }
+
+      return { component: result, error: null }
     } catch (err: any) {
-      scene.setState({ status: 'failed', error: err.message, exitCode: 1 })
-      bumpStage()
-      try { fs.unlink(file) } catch {}
-      return { output: '', error: err.message, exitCode: 1 }
+      return { component: null, error: err.message }
     }
   }
 
-  // ─── Assistant ───────────────────────────────────────────────────────
-  const mgr = container.feature('assistantsManager')
-  await mgr.discover()
-  const assistant = mgr.create('inkbot', { model: options.model })
-
-  // Scene completion → inject result into conversation so the assistant sees it
-  stage.on('sceneComplete' as any, (id: string, output: string) => {
-    const msg = output.trim()
-      ? `[Scene "${id}" completed]\n${output.trim()}`
-      : `[Scene "${id}" completed with no output]`
-    assistant.conversation?.pushMessage({ role: 'developer', content: msg })
-  })
-
-  stage.on('sceneFailed' as any, (id: string, error: string) => {
-    const msg = `[Scene "${id}" failed]\n${error.trim()}`
-    assistant.conversation?.pushMessage({ role: 'developer', content: msg })
-    // Auto-ask the assistant to fix it
-    assistant.ask(msg).catch(() => {})
-  })
+  // ─── Canvas Tools ─────────────────────────────────────────────────
 
-  // Canvas tools — registered directly so they close over stage/sceneMap
   assistant.addTool(
     'draw',
-    async (args: { code: string; sceneId?: string }) => {
+    async (args: { code: string; sceneId?: string; interactive?: boolean }) => {
       const id = args.sceneId || 'default'
-      getOrCreateScene(id, args.code)
-      stage.setState({ activeSceneId: id })
-      bumpStage()
-      // Fire and forget — result feeds back via stage events
-      runScene(id).then(result => {
-        if (result.exitCode === 0) {
-          stage.emit('sceneComplete' as any, id, result.output)
-        } else {
-          stage.emit('sceneFailed' as any, id, result.error)
-        }
-      })
-      return { status: 'running', sceneId: id }
+      const interactive = !!args.interactive
+
+      const { component, error } = await evaluateScene(args.code, id, interactive)
+
+      if (error) {
+        setScene(id, { code: args.code, component: null, error, status: 'failed', interactive })
+        assistant.mentalState.set('activeSceneId', id)
+        return { status: 'failed', sceneId: id, error }
+      }
+
+      setScene(id, { code: args.code, component, error: '', status: interactive ? 'interactive' : 'rendered', interactive })
+      assistant.mentalState.set('activeSceneId', id)
+
+      if (interactive) {
+        // Block until the component calls respond()
+        return new Promise<any>((resolve) => {
+          pendingResponders.set(id, resolve)
+        })
+      }
+
+      return { status: 'rendered', sceneId: id }
     },
     z.object({
-      code: z.string().describe('TypeScript code to execute. Use console.log() for visible output.'),
+      code: z
+        .string()
+        .describe(
+          'Async function body that returns a React component function. Use h() for elements. Has access to: h, React, Box, Text, Spacer, Newline, useState, useEffect, useRef, useCallback, useMemo, useSceneInput, setMental, getMental, respond, container, fs, proc, ui, yaml, grep, git, fetch.',
+        ),
       sceneId: z.string().optional().describe('Scene id (defaults to "default").'),
-    }).describe('Draw or redraw the canvas. Returns immediately — output streams to the canvas. If the scene fails, you will be notified automatically.'),
+      interactive: z
+        .boolean()
+        .optional()
+        .describe('When true, the tool call blocks until the component calls respond(data). The component should use useSceneInput() for keyboard input.'),
+    }).describe(
+      'Render a React Ink component in the canvas pane. The code runs as an async function body and must return a React component function. Interactive scenes block until respond(data) is called.',
+    ),
   )
 
   assistant.addTool(
     'create_scene',
-    async (args: { id: string; code: string }) => {
-      getOrCreateScene(args.id, args.code)
-      return { created: args.id, allScenes: stage.state.get('sceneIds') }
+    async (args: { id: string; code: string; interactive?: boolean }) => {
+      const { component, error } = await evaluateScene(args.code, args.id, !!args.interactive)
+      if (error) {
+        setScene(args.id, { code: args.code, component: null, error, status: 'failed', interactive: !!args.interactive })
+        return { created: args.id, error }
+      }
+      setScene(args.id, { code: args.code, component, error: '', status: 'idle', interactive: !!args.interactive })
+      if (!assistant.mentalState.get('activeSceneId')) {
+        assistant.mentalState.set('activeSceneId', args.id)
+      }
+      return { created: args.id, allScenes: Object.keys(getScenes()) }
     },
     z.object({
       id: z.string().describe('Unique scene identifier'),
-      code: z.string().describe('TypeScript code for this scene'),
-    }).describe('Create a named scene without running it yet.'),
+      code: z.string().describe('Async function body returning a React component function'),
+      interactive: z.boolean().optional().describe('Whether this scene uses interactive APIs'),
+    }).describe('Create a named scene without activating it. Validates the code immediately.'),
   )
 
   assistant.addTool(
-    'run_scene',
-    async (args: { id: string }) => runScene(args.id),
+    'activate_scene',
+    async (args: { id: string }) => {
+      const scenes = getScenes()
+      if (!scenes[args.id]) return { error: `Scene "${args.id}" not found` }
+      assistant.mentalState.set('activeSceneId', args.id)
+      return { activeSceneId: args.id }
+    },
     z.object({
-      id: z.string().describe('Scene id to run'),
-    }).describe('Run a specific scene by its id.'),
+      id: z.string().describe('Scene id to display in the canvas'),
+    }).describe('Switch the canvas to display a different scene.'),
   )
 
   assistant.addTool(
-    'run_all',
+    'get_canvas',
     async () => {
-      const ids = (stage.state.get('sceneIds') || []) as string[]
-      const results: any[] = []
-      for (const id of ids) results.push({ id, ...(await runScene(id)) })
-      return results
+      const activeId = assistant.mentalState.get('activeSceneId') as string | null
+      const scenes = getScenes()
+      if (!activeId || !scenes[activeId]) return { status: 'empty', allScenes: [] }
+      const s = scenes[activeId]
+      return { sceneId: activeId, status: s.status, error: s.error, interactive: s.interactive, allScenes: Object.keys(scenes) }
     },
-    z.object({}).describe('Run every scene in order and return all results.'),
+    z.object({}).describe('Inspect the current canvas state: active scene, status, errors, scene list.'),
   )
 
+  // ─── Mental State Tools ───────────────────────────────────────────
+
   assistant.addTool(
-    'get_canvas',
+    'think',
+    async (args: { text: string }) => {
+      const thoughts = [...(assistant.mentalState.get('thoughts') || [])]
+      thoughts.push({ at: new Date().toISOString(), text: args.text })
+      if (thoughts.length > 50) thoughts.splice(0, thoughts.length - 50)
+      assistant.mentalState.set('thoughts', thoughts)
+      return { recorded: true, totalThoughts: thoughts.length }
+    },
+    z.object({
+      text: z.string().describe('Your thought, observation, or internal note.'),
+    }).describe('Record a thought in your mental state.'),
+  )
+
+  assistant.addTool(
+    'observe',
+    async (args: { key: string; value: string }) => {
+      const observations = { ...(assistant.mentalState.get('observations') || {}) }
+      observations[args.key] = args.value
+      assistant.mentalState.set('observations', observations)
+      return { recorded: true, key: args.key }
+    },
+    z.object({
+      key: z.string().describe('A short label for what you observed.'),
+      value: z.string().describe('Your observation.'),
+    }).describe('Record a named observation.'),
+  )
+
+  assistant.addTool(
+    'set_plan',
+    async (args: { plan: string }) => {
+      assistant.mentalState.set('plan', args.plan)
+      return { updated: true }
+    },
+    z.object({
+      plan: z.string().describe('Your current plan of action.'),
+    }).describe('Set or update your current plan.'),
+  )
+
+  assistant.addTool(
+    'set_mood',
+    async (args: { mood: string }) => {
+      assistant.mentalState.set('mood', args.mood)
+      return { updated: true }
+    },
+    z.object({
+      mood: z.string().describe('A word or short phrase describing your current state.'),
+    }).describe('Update your mood/status displayed in the UI header.'),
+  )
+
+  assistant.addTool(
+    'reflect',
     async () => {
-      const activeId = stage.state.get('activeSceneId') as string | null
-      if (!activeId || !sceneMap[activeId]) return { status: 'empty', allScenes: [] }
-      const s = sceneMap[activeId]
       return {
-        sceneId: activeId,
-        status: s.state.get('status'),
-        output: s.state.get('output'),
-        error: s.state.get('error'),
-        code: s.state.get('code'),
-        allScenes: stage.state.get('sceneIds'),
+        mood: assistant.mentalState.get('mood'),
+        plan: assistant.mentalState.get('plan'),
+        thoughts: assistant.mentalState.get('thoughts'),
+        observations: assistant.mentalState.get('observations'),
+        scenes: Object.keys(getScenes()),
+        activeScene: assistant.mentalState.get('activeSceneId'),
       }
     },
-    z.object({}).describe('Inspect the current canvas: active scene output, error, code, status.'),
+    z.object({}).describe('Review your full mental state.'),
   )
 
+  // ─── Coder Subagent ───────────────────────────────────────────────
+
+  let coderAssistant: any = null
+
+  const CODER_PREFIX = `You are answering a question from Inkbot, a canvas-rendering assistant that renders React Ink components directly in a split-pane terminal UI.
+
+IMPORTANT CONTEXT about Inkbot's execution environment:
+- Scene code is an async function body that must RETURN a React component function
+- Uses h() (React.createElement) instead of JSX — no JSX compilation available
+- Available in scope: h, React, Box, Text, Spacer, Newline, useState, useEffect, useRef, useCallback, useMemo
+- useSceneInput(handler) for keyboard input (focus-aware, error-safe — NOT raw useInput)
+- setMental(key, value) and getMental(key) for assistant mental state
+- respond(data) to complete interactive scenes
+- container, fs, proc, ui, yaml, grep, git — all Luca container features
+- fetch, URL, Buffer, JSON, Date, Math, console — standard globals
+- Top-level await works (the wrapper is async)
+- No imports possible — everything via scope injection
+
+When answering, return a SINGLE code snippet that works as a scene code body. Must end with \`return function SceneName() { ... }\`.
+
+Inkbot's question: `
+
   assistant.addTool(
-    'activate_scene',
-    async (args: { id: string }) => {
-      if (!sceneMap[args.id]) return { error: `Scene "${args.id}" not found` }
-      stage.setState({ activeSceneId: args.id })
-      bumpStage()
-      return { activeSceneId: args.id }
+    'ask_coder',
+    async (args: { question: string }) => {
+      if (!coderAssistant) {
+        coderAssistant = mgr.create('codingAssistant', { model: options.model || 'gpt-5.4' })
+        await coderAssistant.start()
+      }
+      const answer = await coderAssistant.ask(CODER_PREFIX + args.question)
+      return { answer }
     },
     z.object({
-      id: z.string().describe('Scene id to make active in the canvas'),
-    }).describe('Switch the canvas to display a different scene.'),
+      question: z.string().describe('Your question about the Luca framework, container APIs, or how to write scene components.'),
+    }).describe('Ask the coding assistant a question about the Luca framework or how to build scene components.'),
   )
 
-  // ─── Ink App ─────────────────────────────────────────────────────────
+  // ─── Ink App ──────────────────────────────────────────────────────
 
   type Msg = { role: 'user' | 'assistant' | 'system'; content: string }
 
@@ -213,7 +442,13 @@ export async function inkbot(options: z.infer<typeof argsSchema>, context: Conta
     const [streaming, setStreaming] = useState('')
     const [thinking, setThinking] = useState(false)
     const [activity, setActivity] = useState('')
-    const [canvas, setCanvas] = useState({ output: '', error: '', status: 'empty' })
+    const [canvasError, setCanvasError] = useState('')
+    const [canvasStatus, setCanvasStatus] = useState('empty')
+    const [mood, setMood] = useState('ready')
+    const [focus, setFocus] = useState<'chat' | 'canvas'>('chat')
+    const [layout, setLayout] = useState<Layout>('split')
+    const [activeComponent, setActiveComponent] = useState<((...args: any[]) => any) | null>(null)
+    const [errorBoundaryKey, setErrorBoundaryKey] = useState(0)
     const { exit } = useApp()
     const { stdout } = useStdout()
     const rows = stdout?.rows ?? 24
@@ -221,127 +456,224 @@ export async function inkbot(options: z.infer<typeof argsSchema>, context: Conta
     // --- assistant events ---
     useEffect(() => {
       const onPreview = (text: string) => setStreaming(text)
-      const onResponse = (text: string) => {
-        setStreaming('')
-        setThinking(false)
-        setActivity('')
-        setMessages(prev => [...prev, { role: 'assistant', content: text }])
-      }
       const onToolCall = (name: string) => setActivity(`${name}`)
       const onToolResult = () => setActivity('')
 
       assistant.on('preview', onPreview)
-      assistant.on('response', onResponse)
       assistant.on('toolCall', onToolCall)
       assistant.on('toolResult', onToolResult)
       return () => {
         assistant.off('preview', onPreview)
-        assistant.off('response', onResponse)
         assistant.off('toolCall', onToolCall)
         assistant.off('toolResult', onToolResult)
       }
     }, [])
 
-    // --- stage entity ticks → canvas state ---
+    // --- mentalState → UI state ---
     useEffect(() => {
-      const unsub = stage.state.observe((_changeType: any, key: any) => {
-        if (key !== 'tick') return
-        const activeId = stage.state.get('activeSceneId') as string | null
-        if (!activeId || !sceneMap[activeId]) {
-          setCanvas({ output: '', error: '', status: 'empty' })
-          return
+      const unsub = assistant.mentalState.observe((_changeType: any, key: any) => {
+        if (key === 'scenes' || key === 'activeSceneId') {
+          const activeId = assistant.mentalState.get('activeSceneId') as string | null
+          const scenes = (assistant.mentalState.get('scenes') as Record<string, SceneState>) || {}
+          if (!activeId || !scenes[activeId]) {
+            setActiveComponent(null)
+            setCanvasError('')
+            setCanvasStatus('empty')
+            return
+          }
+          const s = scenes[activeId]
+          setActiveComponent(() => s.component)
+          setCanvasError(s.error)
+          setCanvasStatus(s.status)
+          // Reset error boundary when component changes
+          setErrorBoundaryKey((k) => k + 1)
+        }
+        if (key === 'mood') {
+          setMood((assistant.mentalState.get('mood') || 'ready') as string)
+        }
+        if (key === 'focus') {
+          setFocus((assistant.mentalState.get('focus') || 'chat') as 'chat' | 'canvas')
+        }
+        if (key === 'layout') {
+          setLayout((assistant.mentalState.get('layout') || 'split') as Layout)
         }
-        const s = sceneMap[activeId]
-        setCanvas({
-          output: (s.state.get('output') || '') as string,
-          error: (s.state.get('error') || '') as string,
-          status: (s.state.get('status') || 'idle') as string,
-        })
       })
       return unsub
     }, [])
 
-    // --- keyboard ---
+    // --- keyboard (host-level) ---
     useInput((ch, key) => {
-      if (key.escape) { exit(); return }
+      if (key.escape) {
+        exit()
+        return
+      }
+
+      // Tab toggles focus
+      if (key.tab) {
+        const next = focus === 'chat' ? 'canvas' : 'chat'
+        setFocus(next)
+        assistant.mentalState.set('focus', next)
+        return
+      }
 
+      // When canvas is focused, only the scene component handles input
+      // (via useSceneInput which filters Tab/Escape)
+      if (focus === 'canvas') return
+
+      // Chat-focused input
       if (key.return) {
         if (thinking) return
         const msg = input.trim()
         if (!msg) return
         setInput('')
-        setMessages(prev => [...prev, { role: 'user', content: msg }])
+        setMessages((prev) => [...prev, { role: 'user', content: msg }])
         setThinking(true)
-        assistant.ask(msg).catch((err: any) => {
-          setMessages(prev => [...prev, { role: 'system', content: `error: ${err.message}` }])
-          setThinking(false)
-        })
+        assistant
+          .ask(msg)
+          .then((text: string) => {
+            setStreaming('')
+            setThinking(false)
+            setActivity('')
+            setMessages((prev) => [...prev, { role: 'assistant', content: text }])
+          })
+          .catch((err: any) => {
+            setStreaming('')
+            setThinking(false)
+            setActivity('')
+            setMessages((prev) => [...prev, { role: 'system', content: `error: ${err.message}` }])
+          })
         return
       }
 
       if (key.backspace || key.delete) {
-        setInput(prev => prev.slice(0, -1))
+        setInput((prev) => prev.slice(0, -1))
         return
       }
 
       if (ch && !key.ctrl && !key.meta) {
-        setInput(prev => prev + ch)
+        setInput((prev) => prev + ch)
       }
     })
 
     // --- render ---
     const visible = messages.slice(-30)
-    const sceneIds = (stage.state.get('sceneIds') || []) as string[]
-    const activeId = (stage.state.get('activeSceneId') || '') as string
+    const scenes = (assistant.mentalState.get('scenes') as Record<string, SceneState>) || {}
+    const sceneIds = Object.keys(scenes)
+    const activeId = (assistant.mentalState.get('activeSceneId') || '') as string
+    const chatFocused = focus === 'chat'
+    const canvasFocused = focus === 'canvas'
 
     const chatChildren: any[] = []
-
     visible.forEach((m, i) => {
       const color = m.role === 'user' ? 'green' : m.role === 'system' ? 'red' : 'white'
       const prefix = m.role === 'user' ? '> ' : '  '
       chatChildren.push(h(Text, { key: `msg-${i}`, wrap: 'wrap', color }, `${prefix}${m.content}`))
     })
-
     if (streaming) chatChildren.push(h(Text, { key: 'chat-stream', wrap: 'wrap', dimColor: true }, `  ${streaming}`))
     if (thinking && !streaming) chatChildren.push(h(Text, { key: 'chat-think', color: 'yellow' }, '  thinking...'))
     if (activity) chatChildren.push(h(Text, { key: 'chat-act', color: 'blue' }, `  [${activity}]`))
 
-    const canvasBody = canvas.output
-      ? h(Text, { key: 'cvs-out', wrap: 'wrap' }, canvas.output)
-      : canvas.status === 'empty'
-        ? h(Text, { key: 'cvs-empty', dimColor: true }, '  ask inkbot to draw something')
-        : null
-
-    // border + header + status = 4 rows overhead per panel
-    const panelHeight = rows - 2
+    // Canvas content — either the active scene component or placeholders
+    let canvasContent: any
+    if (activeComponent) {
+      canvasContent = h(
+        SceneFocusContext.Provider,
+        { value: canvasFocused },
+        h(
+          SceneErrorBoundary,
+          {
+            key: errorBoundaryKey,
+            onError: (err: Error) => reportSceneError(activeId, err.message),
+          },
+          h(activeComponent),
+        ),
+      )
+    } else if (canvasError) {
+      canvasContent = h(
+        Box,
+        { flexDirection: 'column', paddingX: 1 },
+        h(Text, { color: 'red', bold: true }, 'Error'),
+        h(Text, { color: 'red', wrap: 'wrap' }, canvasError),
+      )
+    } else {
+      canvasContent = h(Text, { dimColor: true, key: 'cvs-empty' }, '  ask inkbot to draw something')
+    }
 
-    return h(Box, { flexDirection: 'row', width: '100%', height: rows },
-      // ── Chat ──
-      h(Box, { key: 'chat', flexDirection: 'column', width: '50%', height: rows, borderStyle: 'round', borderColor: 'cyan', paddingX: 1 },
-        h(Text, { bold: true, color: 'cyan' }, ' inkbot '),
+    return h(
+      Box,
+      { flexDirection: 'row', width: '100%', height: rows },
+      // ── Chat Pane ──
+      h(
+        Box,
+        {
+          key: 'chat',
+          flexDirection: 'column',
+          width: '50%',
+          height: rows,
+          borderStyle: 'round',
+          borderColor: chatFocused ? 'cyan' : 'gray',
+          paddingX: 1,
+        },
+        h(
+          Text,
+          { bold: true, color: chatFocused ? 'cyan' : 'gray' },
+          ' inkbot ',
+          h(Text, { dimColor: true }, `[${mood}]`),
+          !chatFocused ? h(Text, { dimColor: true }, '  (tab to focus)') : null,
+        ),
         h(Box, { flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }, ...chatChildren),
-        h(Box, { borderStyle: 'single', borderColor: 'gray', paddingX: 1 },
-          h(Text, { color: 'green' }, '> '),
-          h(Text, null, input),
-          h(Text, { dimColor: true }, '\u2588'),
+        h(
+          Box,
+          {
+            borderStyle: 'single',
+            borderColor: chatFocused ? 'gray' : 'blackBright',
+            paddingX: 1,
+          },
+          h(Text, { color: chatFocused ? 'green' : 'blackBright' }, '> '),
+          h(Text, { dimColor: !chatFocused }, input),
+          chatFocused ? h(Text, { dimColor: true }, '\u2588') : null,
         ),
       ),
-      // ── Canvas ──
-      h(Box, { key: 'canvas', flexDirection: 'column', width: '50%', height: rows, borderStyle: 'round', borderColor: 'magenta', paddingX: 1 },
-        h(Text, { bold: true, color: 'magenta' }, ' canvas '),
-        h(Box, { flexDirection: 'column', height: panelHeight - 4, overflow: 'hidden' },
-          canvasBody,
-          canvas.error ? h(Text, { key: 'cvs-err', color: 'red', wrap: 'wrap' }, canvas.error) : null,
+      // ── Canvas Pane ──
+      h(
+        Box,
+        {
+          key: 'canvas',
+          flexDirection: 'column',
+          width: '50%',
+          height: rows,
+          borderStyle: 'round',
+          borderColor: canvasFocused ? 'magenta' : 'gray',
+          paddingX: 1,
+        },
+        h(
+          Text,
+          { bold: true, color: canvasFocused ? 'magenta' : 'gray' },
+          ' canvas ',
+          canvasStatus === 'interactive'
+            ? h(Text, { color: 'yellow' }, '[interactive]')
+            : null,
+          !canvasFocused && canvasStatus === 'interactive'
+            ? h(Text, { dimColor: true }, '  (tab to focus)')
+            : null,
+        ),
+        h(
+          Box,
+          { flexDirection: 'column', flexGrow: 1, overflow: 'hidden' },
+          canvasContent,
         ),
-        h(Box, null,
-          h(Text, { dimColor: true }, ` ${canvas.status}`),
-          sceneIds.length > 1 ? h(Text, { dimColor: true }, `  scenes: ${sceneIds.join(', ')}  active: ${activeId}`) : null,
+        h(
+          Box,
+          null,
+          h(Text, { dimColor: true }, ` ${canvasStatus}`),
+          sceneIds.length > 1
+            ? h(Text, { dimColor: true }, `  scenes: ${sceneIds.join(', ')}  active: ${activeId}`)
+            : null,
         ),
       ),
     )
   }
 
-  // Mount and hold
   await ink.render(h(App))
   await ink.waitUntilExit()
 }