diff --git a/docs/plans/2026-05-26-research-workbench-phase1.md b/docs/plans/2026-05-26-research-workbench-phase1.md
new file mode 100644
index 0000000..3b73946
--- /dev/null
+++ b/docs/plans/2026-05-26-research-workbench-phase1.md
@@ -0,0 +1,1507 @@
+# Research Workbench — Phase 1: Infrastructure
+
+> **Execution:** Use the subagent-driven-development workflow to implement this plan.
+
+**Goal:** Build the Python backend (FastAPI + auth + AG-UI adapter + artifact API) and Docker container infrastructure for the research workbench.
+
+**Architecture:** A single Docker container runs amplifierd (session daemon), FastAPI (serves frontend + proxies amplifierd via AG-UI protocol), playwright-cli (browser control), and Xvfb/noVNC (virtual display). FastAPI translates between amplifierd's SSE event format and the AG-UI protocol that CopilotKit expects. Tool results with `_meta.ui.resourceUri` (MCP Apps) are passed through so the frontend can render interactive HTML visualizations in sandboxed iframes. Auth is simple email + bcrypt password hash with session cookies.
+
+**Tech Stack:** Python 3.13, FastAPI, uvicorn, httpx, bcrypt, ag-ui-protocol, Docker, Xvfb, x11vnc, websockify, noVNC
+
+---
+
+## Prerequisites
+
+- The repo is at `/home/ken/workspace/research-workbench`
+- It currently contains old car-help code (search.py, guide.py, sites.yaml, results/, static/, app.py) that will be replaced
+- Keep: `DESIGN.md`, `README.md`, `.gitignore`, `.python-version`, `.git/`
+
+---
+
+### Task 1: Clean out old car-help files
+
+**Files:**
+- Delete: `search.py`, `guide.py`, `sites.yaml`, `app.py`
+- Delete: `static/` directory, `results/` directory
+- Delete: `Dockerfile`, `entrypoint.sh`, `pyproject.toml`, `uv.lock`
+- Modify: `.gitignore`
+
+**Step 1: Remove old files**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+rm -f search.py guide.py sites.yaml app.py
+rm -rf static/ results/
+rm -f Dockerfile entrypoint.sh pyproject.toml uv.lock
+```
+
+**Step 2: Update .gitignore for new project structure**
+
+Replace `.gitignore` with:
+
+```gitignore
+# Python
+.venv/
+__pycache__/
+*.pyc
+*.egg-info/
+
+# Node / Frontend
+frontend/node_modules/
+frontend/dist/
+
+# Runtime
+artifacts/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+```
+
+**Step 3: Create directory structure**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+mkdir -p backend tests bundle/behaviors bundle/agents bundle/context frontend/src artifacts docs/plans
+```
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add -A && git commit -m "chore: remove old car-help files, prepare new structure"
+```
+
+---
+
+### Task 2: Create backend pyproject.toml
+
+**Files:**
+- Create: `backend/pyproject.toml`
+
+**Step 1: Create the pyproject.toml**
+
+Create `backend/pyproject.toml`:
+
+```toml
+[project]
+name = "research-workbench"
+version = "0.1.0"
+description = "AI research workbench backend - FastAPI + AG-UI adapter for amplifierd"
+requires-python = ">=3.13"
+dependencies = [
+    "fastapi>=0.115.0",
+    "uvicorn[standard]>=0.34.0",
+    "httpx>=0.28.0",
+    "bcrypt>=4.2.0",
+    "python-multipart>=0.0.18",
+    "ag-ui-protocol>=0.1.18",
+]
+
+[dependency-groups]
+dev = [
+    "pytest>=8.0",
+    "pytest-asyncio>=0.24",
+    "httpx>=0.28.0",
+]
+```
+
+**Step 2: Initialize the venv and install deps**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv sync
+```
+
+Expected: Dependencies install successfully. A `uv.lock` file is created.
+
+**Step 3: Verify ag-ui-protocol is importable**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -c "from ag_ui.core import RunAgentInput, EventType; print('ag-ui-protocol OK')"
+```
+
+Expected: `ag-ui-protocol OK`
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add backend/pyproject.toml backend/uv.lock && git commit -m "feat: add backend pyproject.toml with dependencies"
+```
+
+---
+
+### Task 3: Auth module (email + bcrypt + session cookie)
+
+**Files:**
+- Create: `backend/auth.py`
+- Create: `tests/test_auth.py`
+
+**Step 1: Write the failing test**
+
+Create `tests/test_auth.py`:
+
+```python
+"""Tests for auth module."""
+
+import os
+import sys
+import pytest
+from unittest.mock import patch
+
+# Add backend to path so tests can import modules
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), "..", "backend"))
+
+from auth import verify_password, create_session_token, validate_session_token
+
+
+class TestVerifyPassword:
+    """Test bcrypt password verification."""
+
+    def test_correct_password(self):
+        import bcrypt
+        hashed = bcrypt.hashpw(b"testpass123", bcrypt.gensalt()).decode()
+        with patch.dict(os.environ, {"AUTH_PASS_HASH": hashed}):
+            assert verify_password("testpass123") is True
+
+    def test_wrong_password(self):
+        import bcrypt
+        hashed = bcrypt.hashpw(b"testpass123", bcrypt.gensalt()).decode()
+        with patch.dict(os.environ, {"AUTH_PASS_HASH": hashed}):
+            assert verify_password("wrongpassword") is False
+
+    def test_empty_password(self):
+        import bcrypt
+        hashed = bcrypt.hashpw(b"testpass123", bcrypt.gensalt()).decode()
+        with patch.dict(os.environ, {"AUTH_PASS_HASH": hashed}):
+            assert verify_password("") is False
+
+
+class TestSessionToken:
+    """Test session token creation and validation."""
+
+    def test_create_and_validate(self):
+        token = create_session_token("ken@example.com")
+        assert token is not None
+        assert len(token) > 20
+
+    def test_validate_valid_token(self):
+        token = create_session_token("ken@example.com")
+        email = validate_session_token(token)
+        assert email == "ken@example.com"
+
+    def test_validate_invalid_token(self):
+        email = validate_session_token("bogus-token-value")
+        assert email is None
+
+    def test_validate_empty_token(self):
+        email = validate_session_token("")
+        assert email is None
+```
+
+**Step 2: Run test to verify it fails**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_auth.py -v 2>&1 | head -20
+```
+
+Expected: FAIL with `ModuleNotFoundError: No module named 'auth'`
+
+**Step 3: Write the implementation**
+
+Create `backend/auth.py`:
+
+```python
+"""
+Simple email + password authentication with session cookies.
+
+Auth credentials come from environment variables:
+  AUTH_USER      - the allowed email address
+  AUTH_PASS_HASH - bcrypt hash of the password
+
+Session tokens are stored in-memory (single container, single user).
+Token format: random hex string mapped to email in a dict.
+"""
+
+import os
+import secrets
+
+import bcrypt
+
+AUTH_USER: str = os.environ.get("AUTH_USER", "admin@localhost")
+AUTH_PASS_HASH: str = os.environ.get("AUTH_PASS_HASH", "")
+
+# In-memory session store: token -> email
+_sessions: dict[str, str] = {}
+
+
+def verify_password(password: str) -> bool:
+    """Check a plaintext password against the AUTH_PASS_HASH env var."""
+    stored_hash = os.environ.get("AUTH_PASS_HASH", AUTH_PASS_HASH)
+    if not stored_hash or not password:
+        return False
+    try:
+        return bcrypt.checkpw(password.encode("utf-8"), stored_hash.encode("utf-8"))
+    except (ValueError, TypeError):
+        return False
+
+
+def create_session_token(email: str) -> str:
+    """Create a new session token for the given email."""
+    token = secrets.token_hex(32)
+    _sessions[token] = email
+    return token
+
+
+def validate_session_token(token: str) -> str | None:
+    """Return the email for a valid token, or None."""
+    if not token:
+        return None
+    return _sessions.get(token)
+
+
+def invalidate_session_token(token: str) -> None:
+    """Remove a session token."""
+    _sessions.pop(token, None)
+```
+
+**Step 4: Run tests to verify they pass**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_auth.py -v
+```
+
+Expected: All 6 tests PASS.
+
+**Step 5: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add backend/auth.py tests/test_auth.py && git commit -m "feat: auth module with bcrypt password verification and session tokens"
+```
+
+---
+
+### Task 4: Artifacts module (per-session CRUD)
+
+**Files:**
+- Create: `backend/artifacts.py`
+- Create: `tests/test_artifacts.py`
+
+**Step 1: Write the failing test**
+
+Create `tests/test_artifacts.py`:
+
+```python
+"""Tests for artifacts module."""
+
+import os
+import sys
+import pytest
+
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), "..", "backend"))
+
+from artifacts import list_artifacts, get_artifact, save_artifact
+
+
+@pytest.fixture(autouse=True)
+def temp_artifacts(tmp_path, monkeypatch):
+    """Use a temp directory for artifacts during tests."""
+    monkeypatch.setattr("artifacts.ARTIFACTS_DIR", tmp_path)
+    return tmp_path
+
+
+class TestArtifacts:
+    def test_list_empty_session(self):
+        result = list_artifacts("session-1")
+        assert result == []
+
+    def test_save_and_list(self, temp_artifacts):
+        save_artifact("session-1", "guide.md", "# My Guide\n\nContent here.")
+        result = list_artifacts("session-1")
+        assert len(result) == 1
+        assert result[0]["name"] == "guide.md"
+        assert result[0]["session_id"] == "session-1"
+
+    def test_save_and_get(self, temp_artifacts):
+        save_artifact("session-1", "report.md", "# Report\n\nFindings.")
+        content = get_artifact("session-1", "report.md")
+        assert content == "# Report\n\nFindings."
+
+    def test_get_nonexistent(self):
+        content = get_artifact("no-session", "no-file.md")
+        assert content is None
+
+    def test_multiple_artifacts(self, temp_artifacts):
+        save_artifact("s1", "a.md", "A")
+        save_artifact("s1", "b.md", "B")
+        save_artifact("s2", "c.md", "C")
+        assert len(list_artifacts("s1")) == 2
+        assert len(list_artifacts("s2")) == 1
+
+    def test_overwrite_artifact(self, temp_artifacts):
+        save_artifact("s1", "doc.md", "v1")
+        save_artifact("s1", "doc.md", "v2")
+        assert get_artifact("s1", "doc.md") == "v2"
+        assert len(list_artifacts("s1")) == 1
+```
+
+**Step 2: Run test to verify it fails**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_artifacts.py -v 2>&1 | head -10
+```
+
+Expected: FAIL with `ModuleNotFoundError: No module named 'artifacts'`
+
+**Step 3: Write the implementation**
+
+Create `backend/artifacts.py`:
+
+```python
+"""
+Per-session artifact storage.
+
+Artifacts are markdown files stored at artifacts/<session_id>/<name>.md
+Written by the researcher agent via tool-filesystem, served by FastAPI.
+"""
+
+from pathlib import Path
+
+ARTIFACTS_DIR = Path("/app/artifacts")
+
+
+def list_artifacts(session_id: str) -> list[dict]:
+    """List all artifacts for a session."""
+    session_dir = ARTIFACTS_DIR / session_id
+    if not session_dir.is_dir():
+        return []
+    artifacts = []
+    for f in sorted(session_dir.iterdir()):
+        if f.is_file():
+            artifacts.append({
+                "name": f.name,
+                "session_id": session_id,
+                "size": f.stat().st_size,
+            })
+    return artifacts
+
+
+def get_artifact(session_id: str, name: str) -> str | None:
+    """Get the content of a specific artifact."""
+    path = ARTIFACTS_DIR / session_id / name
+    if not path.is_file():
+        return None
+    return path.read_text(encoding="utf-8")
+
+
+def save_artifact(session_id: str, name: str, content: str) -> Path:
+    """Save (or overwrite) an artifact."""
+    session_dir = ARTIFACTS_DIR / session_id
+    session_dir.mkdir(parents=True, exist_ok=True)
+    path = session_dir / name
+    path.write_text(content, encoding="utf-8")
+    return path
+```
+
+**Step 4: Run tests to verify they pass**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_artifacts.py -v
+```
+
+Expected: All 6 tests PASS.
+
+**Step 5: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add backend/artifacts.py tests/test_artifacts.py && git commit -m "feat: artifact storage module with per-session CRUD"
+```
+
+---
+
+### Task 5: AG-UI adapter (amplifierd SSE -> AG-UI events, MCP App metadata passthrough)
+
+This is the critical integration piece. It translates amplifierd's SSE event format into AG-UI protocol events that CopilotKit understands. It also passes through `_meta.ui` and `structuredContent` from tool results so the frontend can render MCP App iframes for interactive visualizations.
+
+**amplifierd SSE events** (from `GET /events?session=X`):
+- `content_block:start` — `{block_type: "text"|"tool_use", block_index, tool_id?, tool_name?}`
+- `content_block:delta` — `{token?, block_type?, content?, block_index}`
+- `content_block:end` — `{block_index}`
+- `tool:result` — `{tool_call_id, tool_name, content}`
+- `orchestrator:complete` — `{}`
+
+**AG-UI events** (what CopilotKit frontend expects):
+- `RUN_STARTED`, `TEXT_MESSAGE_START/CONTENT/END`, `TOOL_CALL_START/ARGS/END/RESULT`, `RUN_FINISHED`
+
+**Files:**
+- Create: `backend/agui_adapter.py`
+- Create: `tests/test_agui_adapter.py`
+
+**Step 1: Write the failing test**
+
+Create `tests/test_agui_adapter.py`:
+
+```python
+"""Tests for the AG-UI adapter that translates amplifierd SSE to AG-UI events."""
+
+import os
+import sys
+
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), "..", "backend"))
+
+from agui_adapter import AmplifierdEventTranslator
+
+
+class TestTextBlocks:
+    """Test text content block translation."""
+
+    def test_text_block_start(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        event = {
+            "event_type": "content_block:start",
+            "data": {"block_type": "text", "block_index": 0},
+        }
+        ag_events = list(translator.translate(event))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TEXT_MESSAGE_START"
+        assert ag_events[0]["role"] == "assistant"
+        assert "messageId" in ag_events[0]
+
+    def test_text_delta(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        # Start text block first
+        translator.translate({
+            "event_type": "content_block:start",
+            "data": {"block_type": "text", "block_index": 0},
+        })
+        ag_events = list(translator.translate({
+            "event_type": "content_block:delta",
+            "data": {"token": "Hello ", "block_index": 0},
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TEXT_MESSAGE_CONTENT"
+        assert ag_events[0]["delta"] == "Hello "
+
+    def test_text_block_end(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        translator.translate({
+            "event_type": "content_block:start",
+            "data": {"block_type": "text", "block_index": 0},
+        })
+        ag_events = list(translator.translate({
+            "event_type": "content_block:end",
+            "data": {"block_index": 0},
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TEXT_MESSAGE_END"
+
+
+class TestToolBlocks:
+    """Test tool call translation."""
+
+    def test_tool_use_start(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "content_block:start",
+            "data": {
+                "block_type": "tool_use",
+                "block_index": 1,
+                "tool_id": "tool_123",
+                "tool_name": "bash",
+            },
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TOOL_CALL_START"
+        assert ag_events[0]["toolCallName"] == "bash"
+        assert ag_events[0]["toolCallId"] == "tool_123"
+
+    def test_tool_use_delta(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        translator.translate({
+            "event_type": "content_block:start",
+            "data": {
+                "block_type": "tool_use",
+                "block_index": 1,
+                "tool_id": "tool_123",
+                "tool_name": "bash",
+            },
+        })
+        ag_events = list(translator.translate({
+            "event_type": "content_block:delta",
+            "data": {
+                "block_type": "tool_use",
+                "content": '{"command": "ls"}',
+                "block_index": 1,
+            },
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TOOL_CALL_ARGS"
+        assert ag_events[0]["delta"] == '{"command": "ls"}'
+
+    def test_tool_use_end(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        translator.translate({
+            "event_type": "content_block:start",
+            "data": {
+                "block_type": "tool_use",
+                "block_index": 1,
+                "tool_id": "tool_123",
+                "tool_name": "bash",
+            },
+        })
+        ag_events = list(translator.translate({
+            "event_type": "content_block:end",
+            "data": {"block_index": 1},
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TOOL_CALL_END"
+
+    def test_tool_result(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "tool:result",
+            "data": {
+                "tool_call_id": "tool_123",
+                "tool_name": "bash",
+                "content": "file1.txt\nfile2.txt",
+            },
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TOOL_CALL_RESULT"
+        assert ag_events[0]["toolCallId"] == "tool_123"
+
+    def test_tool_result_with_mcp_app_metadata(self):
+        """Tool results with _meta.ui.resourceUri pass through UI metadata for MCP Apps."""
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "tool:result",
+            "data": {
+                "tool_call_id": "tool_456",
+                "tool_name": "show_chart",
+                "content": "Chart rendered with 5 data points",
+                "_meta": {
+                    "ui": {
+                        "resourceUri": "app://chart",
+                        "csp": "default-src 'self'; script-src 'unsafe-inline' cdn.jsdelivr.net",
+                    }
+                },
+                "structuredContent": {
+                    "chartType": "bar",
+                    "labels": ["Q1", "Q2", "Q3"],
+                    "datasets": [{"label": "Sales", "data": [10, 20, 30]}],
+                },
+            },
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "TOOL_CALL_RESULT"
+        assert ag_events[0]["toolCallId"] == "tool_456"
+        # _meta.ui must be passed through for the frontend MCPAppRenderer
+        assert ag_events[0]["_meta"]["ui"]["resourceUri"] == "app://chart"
+        # structuredContent must be passed through for the iframe data
+        assert ag_events[0]["structuredContent"]["chartType"] == "bar"
+
+    def test_tool_result_without_mcp_app_metadata(self):
+        """Tool results without _meta.ui should NOT have _meta or structuredContent keys."""
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "tool:result",
+            "data": {
+                "tool_call_id": "tool_789",
+                "tool_name": "bash",
+                "content": "hello world",
+            },
+        }))
+        assert len(ag_events) == 1
+        assert "_meta" not in ag_events[0]
+        assert "structuredContent" not in ag_events[0]
+
+
+class TestLifecycle:
+    """Test lifecycle event translation."""
+
+    def test_orchestrator_complete(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "orchestrator:complete",
+            "data": {},
+        }))
+        assert len(ag_events) == 1
+        assert ag_events[0]["type"] == "RUN_FINISHED"
+        assert ag_events[0]["threadId"] == "thread-1"
+        assert ag_events[0]["runId"] == "run-1"
+
+    def test_unknown_event_ignored(self):
+        translator = AmplifierdEventTranslator(run_id="run-1", thread_id="thread-1")
+        ag_events = list(translator.translate({
+            "event_type": "some:unknown:event",
+            "data": {"foo": "bar"},
+        }))
+        assert ag_events == []
+```
+
+**Step 2: Run test to verify it fails**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_agui_adapter.py -v 2>&1 | head -10
+```
+
+Expected: FAIL with `ModuleNotFoundError: No module named 'agui_adapter'`
+
+**Step 3: Write the implementation**
+
+Create `backend/agui_adapter.py`:
+
+```python
+"""
+AG-UI protocol adapter for amplifierd.
+
+Translates amplifierd's SSE events into AG-UI protocol events that CopilotKit
+can consume. This is the critical bridge between the two systems.
+
+amplifierd events (from GET /events?session=X):
+  content_block:start  {block_type: "text"|"tool_use", block_index, tool_id?, tool_name?}
+  content_block:delta  {token?, block_type?, content?, block_index}
+  content_block:end    {block_index}
+  tool:result          {tool_call_id, tool_name, content}
+  orchestrator:complete {}
+
+AG-UI events (sent to CopilotKit frontend):
+  RUN_STARTED          {threadId, runId}
+  TEXT_MESSAGE_START    {messageId, role}
+  TEXT_MESSAGE_CONTENT  {messageId, delta}
+  TEXT_MESSAGE_END      {messageId}
+  TOOL_CALL_START       {toolCallId, toolCallName, parentMessageId?}
+  TOOL_CALL_ARGS        {toolCallId, delta}
+  TOOL_CALL_END         {toolCallId}
+  TOOL_CALL_RESULT      {toolCallId, content, role, _meta?, structuredContent?}
+  RUN_FINISHED          {threadId, runId}
+
+MCP App passthrough:
+  When a tool:result includes _meta.ui.resourceUri, the TOOL_CALL_RESULT event
+  preserves _meta and structuredContent so the frontend can render an MCP App
+  iframe instead of a plain ToolCallCard.
+"""
+
+import uuid
+
+
+class AmplifierdEventTranslator:
+    """Stateful translator from amplifierd SSE events to AG-UI events.
+
+    Tracks active content blocks to correctly pair start/end events and
+    assign consistent message IDs across the stream.
+    """
+
+    def __init__(self, run_id: str, thread_id: str):
+        self.run_id = run_id
+        self.thread_id = thread_id
+        # Track active blocks: block_index -> {type, message_id, tool_id}
+        self._blocks: dict[int, dict] = {}
+        # Current assistant message ID (for text blocks)
+        self._current_message_id: str | None = None
+
+    def translate(self, event: dict) -> list[dict]:
+        """Translate a single amplifierd event into zero or more AG-UI events."""
+        event_type = event.get("event_type", "")
+        data = event.get("data", {})
+
+        if event_type == "content_block:start":
+            return self._handle_block_start(data)
+        elif event_type == "content_block:delta":
+            return self._handle_block_delta(data)
+        elif event_type == "content_block:end":
+            return self._handle_block_end(data)
+        elif event_type == "tool:result":
+            return self._handle_tool_result(data)
+        elif event_type == "orchestrator:complete":
+            return self._handle_complete()
+        else:
+            return []
+
+    def _handle_block_start(self, data: dict) -> list[dict]:
+        block_type = data.get("block_type", "text")
+        block_index = data.get("block_index", 0)
+
+        if block_type == "tool_use":
+            tool_id = data.get("tool_id", str(uuid.uuid4()))
+            tool_name = data.get("tool_name", "unknown")
+            self._blocks[block_index] = {
+                "type": "tool_use",
+                "tool_id": tool_id,
+                "tool_name": tool_name,
+            }
+            return [{
+                "type": "TOOL_CALL_START",
+                "toolCallId": tool_id,
+                "toolCallName": tool_name,
+                "parentMessageId": self._current_message_id,
+            }]
+        else:
+            message_id = str(uuid.uuid4())
+            self._current_message_id = message_id
+            self._blocks[block_index] = {
+                "type": "text",
+                "message_id": message_id,
+            }
+            return [{
+                "type": "TEXT_MESSAGE_START",
+                "messageId": message_id,
+                "role": "assistant",
+            }]
+
+    def _handle_block_delta(self, data: dict) -> list[dict]:
+        block_index = data.get("block_index", 0)
+        block_info = self._blocks.get(block_index)
+
+        if block_info is None:
+            # Delta without a matching start - handle gracefully
+            if data.get("block_type") == "tool_use":
+                tool_id = data.get("tool_id", "unknown")
+                return [{
+                    "type": "TOOL_CALL_ARGS",
+                    "toolCallId": tool_id,
+                    "delta": data.get("content", ""),
+                }]
+            return []
+
+        if block_info["type"] == "tool_use":
+            return [{
+                "type": "TOOL_CALL_ARGS",
+                "toolCallId": block_info["tool_id"],
+                "delta": data.get("content", ""),
+            }]
+        else:
+            token = data.get("token", "")
+            if not token:
+                return []
+            return [{
+                "type": "TEXT_MESSAGE_CONTENT",
+                "messageId": block_info["message_id"],
+                "delta": token,
+            }]
+
+    def _handle_block_end(self, data: dict) -> list[dict]:
+        block_index = data.get("block_index", 0)
+        block_info = self._blocks.pop(block_index, None)
+
+        if block_info is None:
+            return []
+
+        if block_info["type"] == "tool_use":
+            return [{
+                "type": "TOOL_CALL_END",
+                "toolCallId": block_info["tool_id"],
+            }]
+        else:
+            return [{
+                "type": "TEXT_MESSAGE_END",
+                "messageId": block_info["message_id"],
+            }]
+
+    def _handle_tool_result(self, data: dict) -> list[dict]:
+        event: dict = {
+            "type": "TOOL_CALL_RESULT",
+            "toolCallId": data.get("tool_call_id", "unknown"),
+            "content": data.get("content", ""),
+            "role": "tool",
+        }
+        # Pass through MCP App metadata if present.
+        # When a tool result includes _meta.ui.resourceUri, the frontend
+        # renders an MCPAppRenderer (sandboxed iframe) instead of a ToolCallCard.
+        if "_meta" in data:
+            event["_meta"] = data["_meta"]
+        if "structuredContent" in data:
+            event["structuredContent"] = data["structuredContent"]
+        return [event]
+
+    def _handle_complete(self) -> list[dict]:
+        return [{
+            "type": "RUN_FINISHED",
+            "threadId": self.thread_id,
+            "runId": self.run_id,
+        }]
+```
+
+**Step 4: Run tests to verify they pass**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_agui_adapter.py -v
+```
+
+Expected: All 10 tests PASS.
+
+**Step 5: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add backend/agui_adapter.py tests/test_agui_adapter.py && git commit -m "feat: AG-UI adapter translating amplifierd SSE events to AG-UI protocol (with MCP App metadata passthrough)"
+```
+
+---
+
+### Task 6: FastAPI application (app.py)
+
+The main FastAPI app: auth endpoints, AG-UI/CopilotKit SSE endpoint, artifact API, MCP App template serving, session proxy to amplifierd, and static file serving.
+
+**Files:**
+- Create: `backend/app.py`
+- Create: `tests/test_app.py`
+
+**Step 1: Write the failing test**
+
+Create `tests/test_app.py`:
+
+```python
+"""Integration tests for the FastAPI app."""
+
+import os
+import sys
+
+import bcrypt
+import pytest
+
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), "..", "backend"))
+
+# Set auth env vars before importing app
+TEST_HASH = bcrypt.hashpw(b"testpass", bcrypt.gensalt()).decode()
+os.environ["AUTH_USER"] = "test@example.com"
+os.environ["AUTH_PASS_HASH"] = TEST_HASH
+
+from fastapi.testclient import TestClient
+
+from app import app
+
+client = TestClient(app)
+
+
+class TestHealthEndpoint:
+    def test_health(self):
+        resp = client.get("/api/health")
+        assert resp.status_code == 200
+        assert resp.json()["status"] == "ok"
+
+
+class TestAuthEndpoints:
+    def test_login_success(self):
+        resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "testpass",
+        })
+        assert resp.status_code == 200
+        data = resp.json()
+        assert "token" in data
+        assert "session" in resp.cookies
+
+    def test_login_wrong_password(self):
+        resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "wrongpass",
+        })
+        assert resp.status_code == 401
+
+    def test_login_wrong_email(self):
+        resp = client.post("/api/auth/login", json={
+            "email": "wrong@example.com",
+            "password": "testpass",
+        })
+        assert resp.status_code == 401
+
+    def test_me_unauthenticated(self):
+        resp = client.get("/api/auth/me")
+        assert resp.status_code == 401
+
+    def test_me_authenticated(self):
+        login_resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "testpass",
+        })
+        token = login_resp.json()["token"]
+        resp = client.get("/api/auth/me", cookies={"session": token})
+        assert resp.status_code == 200
+        assert resp.json()["email"] == "test@example.com"
+
+    def test_logout(self):
+        login_resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "testpass",
+        })
+        token = login_resp.json()["token"]
+        resp = client.post("/api/auth/logout", cookies={"session": token})
+        assert resp.status_code == 200
+        # Token should now be invalid
+        resp2 = client.get("/api/auth/me", cookies={"session": token})
+        assert resp2.status_code == 401
+
+
+class TestArtifactEndpoints:
+    def _auth_cookies(self) -> dict:
+        resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "testpass",
+        })
+        return {"session": resp.json()["token"]}
+
+    def test_list_artifacts_empty(self, tmp_path, monkeypatch):
+        monkeypatch.setattr("artifacts.ARTIFACTS_DIR", tmp_path)
+        cookies = self._auth_cookies()
+        resp = client.get("/api/artifacts/test-session", cookies=cookies)
+        assert resp.status_code == 200
+        assert resp.json() == []
+
+    def test_list_artifacts_unauthenticated(self):
+        resp = client.get("/api/artifacts/test-session")
+        assert resp.status_code == 401
+
+
+class TestMCPAppsEndpoint:
+    """Test serving MCP App HTML templates."""
+
+    def _auth_cookies(self) -> dict:
+        resp = client.post("/api/auth/login", json={
+            "email": "test@example.com",
+            "password": "testpass",
+        })
+        return {"session": resp.json()["token"]}
+
+    def test_get_app_not_found(self):
+        cookies = self._auth_cookies()
+        resp = client.get("/api/apps/nonexistent", cookies=cookies)
+        assert resp.status_code == 404
+
+    def test_get_app_unauthenticated(self):
+        resp = client.get("/api/apps/chart")
+        assert resp.status_code == 401
+```
+
+**Step 2: Run test to verify it fails**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_app.py -v 2>&1 | head -10
+```
+
+Expected: FAIL with `ModuleNotFoundError: No module named 'app'`
+
+**Step 3: Write the implementation**
+
+Create `backend/app.py` with the full FastAPI application. This is the longest file. Key sections:
+- Auth endpoints (`/api/auth/login`, `/api/auth/me`, `/api/auth/logout`)
+- Session proxy to amplifierd (`/api/sessions/*`)
+- AG-UI endpoint for CopilotKit (`/api/copilotkit`) - receives RunAgentInput, streams AG-UI events
+- Artifact API (`/api/artifacts/*`)
+- Static file serving for built frontend
+
+```python
+"""
+Research Workbench - FastAPI application.
+
+Serves:
+  /api/health            - health check
+  /api/auth/*            - login, logout, me
+  /api/sessions/*        - proxy to amplifierd session API
+  /api/copilotkit        - AG-UI protocol endpoint for CopilotKit
+  /api/artifacts/*       - per-session artifact CRUD
+  /api/apps/{name}       - MCP App HTML templates (for sandboxed iframes)
+  /                      - built frontend static files
+"""
+
+import json
+import os
+import uuid
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+import httpx
+from fastapi import Cookie, FastAPI, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+
+from agui_adapter import AmplifierdEventTranslator
+from artifacts import get_artifact, list_artifacts
+from auth import (
+    create_session_token,
+    invalidate_session_token,
+    validate_session_token,
+    verify_password,
+)
+
+AMPLIFIERD_URL = os.environ.get("AMPLIFIERD_URL", "http://localhost:8410")
+AUTH_USER = os.environ.get("AUTH_USER", "admin@localhost")
+BUNDLE_NAME = os.environ.get("BUNDLE_NAME", "research-workbench")
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    app.state.http_client = httpx.AsyncClient(base_url=AMPLIFIERD_URL, timeout=30.0)
+    yield
+    await app.state.http_client.aclose()
+
+
+app = FastAPI(title="research-workbench", version="0.1.0", lifespan=lifespan)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+    allow_credentials=True,
+)
+
+
+# --- Auth helpers ---
+
+def _require_auth(session: str | None) -> str:
+    email = validate_session_token(session) if session else None
+    if email is None:
+        raise HTTPException(status_code=401, detail="Not authenticated")
+    return email
+
+
+# --- Health ---
+
+@app.get("/api/health")
+async def health():
+    return {"status": "ok"}
+
+
+# --- Auth endpoints ---
+
+@app.post("/api/auth/login")
+async def login(request: Request):
+    body = await request.json()
+    email = body.get("email", "")
+    password = body.get("password", "")
+    if email != AUTH_USER or not verify_password(password):
+        return JSONResponse({"error": "Invalid credentials"}, status_code=401)
+    token = create_session_token(email)
+    response = JSONResponse({"token": token, "email": email})
+    response.set_cookie(key="session", value=token, httponly=True,
+                        samesite="lax", max_age=86400 * 7)
+    return response
+
+
+@app.get("/api/auth/me")
+async def me(session: str | None = Cookie(default=None)):
+    email = validate_session_token(session) if session else None
+    if email is None:
+        return JSONResponse({"error": "Not authenticated"}, status_code=401)
+    return {"email": email}
+
+
+@app.post("/api/auth/logout")
+async def logout(session: str | None = Cookie(default=None)):
+    if session:
+        invalidate_session_token(session)
+    response = JSONResponse({"status": "ok"})
+    response.delete_cookie("session")
+    return response
+
+
+# --- Session proxy (to amplifierd) ---
+
+@app.get("/api/sessions")
+async def list_sessions(session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    resp = await app.state.http_client.get("/sessions")
+    return JSONResponse(resp.json(), status_code=resp.status_code)
+
+
+@app.post("/api/sessions")
+async def create_session(request: Request, session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    body = await request.json()
+    if "bundle_name" not in body:
+        body["bundle_name"] = BUNDLE_NAME
+    resp = await app.state.http_client.post("/sessions", json=body)
+    return JSONResponse(resp.json(), status_code=resp.status_code)
+
+
+@app.get("/api/sessions/{session_id}")
+async def get_session(session_id: str, session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    resp = await app.state.http_client.get(f"/sessions/{session_id}")
+    return JSONResponse(resp.json(), status_code=resp.status_code)
+
+
+@app.delete("/api/sessions/{session_id}")
+async def delete_session(session_id: str, session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    resp = await app.state.http_client.delete(f"/sessions/{session_id}")
+    return JSONResponse({"status": "deleted"}, status_code=resp.status_code)
+
+
+@app.get("/api/sessions/{session_id}/transcript")
+async def get_transcript(session_id: str, session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    resp = await app.state.http_client.get(f"/sessions/{session_id}/transcript")
+    return JSONResponse(resp.json(), status_code=resp.status_code)
+
+
+# --- AG-UI endpoint (CopilotKit connects here) ---
+
+@app.post("/api/copilotkit")
+async def copilotkit_endpoint(request: Request, session: str | None = Cookie(default=None)):
+    """AG-UI protocol endpoint.
+
+    CopilotKit sends RunAgentInput (messages, threadId, runId).
+    We map threadId to an amplifierd session, execute the prompt,
+    and stream back AG-UI events translated from amplifierd's SSE.
+    """
+    _require_auth(session)
+    body = await request.json()
+
+    thread_id = body.get("threadId", str(uuid.uuid4()))
+    run_id = body.get("runId", str(uuid.uuid4()))
+    messages = body.get("messages", [])
+
+    # Extract latest user message as prompt
+    prompt = ""
+    for msg in reversed(messages):
+        if msg.get("role") == "user" and msg.get("content"):
+            prompt = msg["content"]
+            break
+    if not prompt:
+        return JSONResponse({"error": "No user message found"}, status_code=400)
+
+    # Use threadId as amplifierd session_id
+    amp_session_id = thread_id
+    client = app.state.http_client
+
+    # Create session if it doesn't exist
+    check = await client.get(f"/sessions/{amp_session_id}")
+    if check.status_code == 404:
+        await client.post("/sessions", json={
+            "session_id": amp_session_id,
+            "bundle_name": BUNDLE_NAME,
+        })
+
+    # Fire execute/stream
+    exec_resp = await client.post(
+        f"/sessions/{amp_session_id}/execute/stream",
+        json={"prompt": prompt},
+    )
+    if exec_resp.status_code != 202:
+        return JSONResponse(
+            {"error": "Failed to start execution", "detail": exec_resp.text},
+            status_code=502,
+        )
+
+    async def event_generator():
+        translator = AmplifierdEventTranslator(run_id=run_id, thread_id=thread_id)
+        yield _sse({"type": "RUN_STARTED", "threadId": thread_id, "runId": run_id})
+
+        async with httpx.AsyncClient(base_url=AMPLIFIERD_URL, timeout=None) as sse_client:
+            async with sse_client.stream(
+                "GET", "/events", params={"session": amp_session_id},
+            ) as response:
+                buffer = ""
+                async for chunk in response.aiter_text():
+                    buffer += chunk
+                    while "\n\n" in buffer:
+                        raw_event, buffer = buffer.split("\n\n", 1)
+                        parsed = _parse_sse(raw_event)
+                        if parsed is None:
+                            continue
+                        for ag_event in translator.translate(parsed):
+                            yield _sse(ag_event)
+                        if parsed.get("event_type") == "orchestrator:complete":
+                            return
+
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
+    )
+
+
+def _sse(event: dict) -> str:
+    return f"data: {json.dumps(event)}\n\n"
+
+
+def _parse_sse(raw: str) -> dict | None:
+    event_type = None
+    data_lines = []
+    for line in raw.strip().split("\n"):
+        if line.startswith("event:"):
+            event_type = line[6:].strip()
+        elif line.startswith("data:"):
+            data_lines.append(line[5:].strip())
+    if not data_lines:
+        return None
+    try:
+        data = json.loads("\n".join(data_lines))
+    except json.JSONDecodeError:
+        return None
+    return {"event_type": event_type or data.get("event_type", ""), "data": data}
+
+
+# --- Artifacts ---
+
+@app.get("/api/artifacts/{session_id}")
+async def api_list_artifacts(session_id: str, session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    return JSONResponse(list_artifacts(session_id))
+
+
+@app.get("/api/artifacts/{session_id}/{name}")
+async def api_get_artifact(session_id: str, name: str,
+                           session: str | None = Cookie(default=None)):
+    _require_auth(session)
+    content = get_artifact(session_id, name)
+    if content is None:
+        return JSONResponse({"error": "Not found"}, status_code=404)
+    return JSONResponse({"name": name, "session_id": session_id, "content": content})
+
+
+# --- MCP App templates (served to sandboxed iframes) ---
+
+APPS_DIR = Path(__file__).parent.parent / "bundle" / "apps"
+
+
+@app.get("/api/apps/{app_name}")
+async def get_mcp_app(app_name: str, session: str | None = Cookie(default=None)):
+    """Serve MCP App HTML templates for inline interactive visualizations.
+
+    MCP Apps are self-contained HTML files rendered in sandboxed iframes.
+    Tool results with _meta.ui.resourceUri reference these apps.
+    """
+    _require_auth(session)
+    # Normalize: allow "chart" or "chart.html"
+    if not app_name.endswith(".html"):
+        app_name += ".html"
+    app_path = APPS_DIR / app_name
+    if not app_path.is_file():
+        return JSONResponse({"error": f"App '{app_name}' not found"}, status_code=404)
+    html = app_path.read_text(encoding="utf-8")
+    return HTMLResponse(content=html)
+
+
+# --- Static files (built frontend) - MUST be last ---
+
+_static_dir = Path(__file__).parent.parent / "frontend" / "dist"
+if _static_dir.is_dir():
+    app.mount("/", StaticFiles(directory=str(_static_dir), html=True), name="frontend")
+```
+
+**Step 4: Run tests to verify they pass**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/test_app.py -v
+```
+
+Expected: All 11 tests PASS. (Session proxy tests that call amplifierd will fail without amplifierd running -- that's expected. The tests above only cover auth, health, and artifact endpoints.)
+
+**Step 5: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add backend/app.py tests/test_app.py && git commit -m "feat: FastAPI app with auth, AG-UI endpoint, session proxy, artifact API"
+```
+
+---
+
+### Task 7: Dockerfile
+
+**Files:**
+- Create: `Dockerfile`
+
+**Step 1: Create the Dockerfile**
+
+Create `Dockerfile`:
+
+```dockerfile
+FROM python:3.13-slim
+
+# System deps: display, VNC, browser libs, Node.js for playwright-cli
+RUN apt-get update -qq && apt-get install -y -qq --no-install-recommends \
+    xvfb x11vnc websockify novnc curl \
+    libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 \
+    libxkbcommon0 libxcomposite1 libxdamage1 libxrandr2 libgbm1 \
+    libpango-1.0-0 libcairo2 libasound2 libxshmfence1 libgtk-3-0 \
+    fonts-liberation && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install Node.js (for playwright-cli)
+RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \
+    apt-get install -y nodejs && \
+    rm -rf /var/lib/apt/lists/*
+
+# Install playwright-cli globally
+RUN npm install -g @anthropic-ai/playwright-cli
+
+# Install uv
+RUN pip install uv
+
+# Backend deps
+COPY backend/pyproject.toml backend/uv.lock /app/backend/
+WORKDIR /app/backend
+RUN uv sync --frozen
+
+# Install Playwright browser
+RUN uv run playwright install chromium
+
+# Install amplifierd
+RUN uv pip install amplifierd
+
+# Copy backend source
+COPY backend/*.py /app/backend/
+
+# Copy bundle
+COPY bundle/ /app/bundle/
+
+# Copy built frontend (build before docker build)
+COPY frontend/dist/ /app/frontend/dist/
+
+# Copy entrypoint
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Create artifacts directory
+RUN mkdir -p /app/artifacts
+
+WORKDIR /app
+
+EXPOSE 8080 6080
+
+ENV DISPLAY=:99
+ENV AMPLIFIERD_URL=http://localhost:8410
+ENV BUNDLE_NAME=research-workbench
+
+ENTRYPOINT ["/entrypoint.sh"]
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add Dockerfile && git commit -m "feat: Dockerfile with all-in-one container"
+```
+
+---
+
+### Task 8: Entrypoint script
+
+**Files:**
+- Create: `entrypoint.sh`
+
+**Step 1: Create the entrypoint**
+
+Create `entrypoint.sh`:
+
+```bash
+#!/bin/bash
+set -e
+
+export DISPLAY=:99
+
+echo "=== Starting Research Workbench ==="
+
+# 1. Virtual display
+Xvfb :99 -screen 0 1280x720x24 -ac &
+sleep 1
+echo "[OK] Xvfb display :99"
+
+# 2. VNC server
+x11vnc -display :99 -forever -nopw -listen 0.0.0.0 -rfbport 5900 -shared 2>/dev/null &
+sleep 1
+echo "[OK] x11vnc on :5900"
+
+# 3. noVNC (web VNC client)
+websockify --web=/usr/share/novnc/ 6080 localhost:5900 &
+sleep 1
+echo "[OK] noVNC on :6080"
+
+# 4. amplifierd (session daemon)
+cd /app
+amplifierd --port 8410 --bundle /app/bundle/bundle.md &
+AMPLIFIERD_PID=$!
+
+# Wait for amplifierd to be ready
+echo "Waiting for amplifierd..."
+for i in $(seq 1 30); do
+    if curl -s http://localhost:8410/health > /dev/null 2>&1; then
+        echo "[OK] amplifierd on :8410"
+        break
+    fi
+    sleep 1
+done
+
+# 5. FastAPI (web frontend + API)
+cd /app/backend
+uv run python -m uvicorn app:app --host 0.0.0.0 --port 8080 --log-level info &
+sleep 2
+echo "[OK] FastAPI on :8080"
+
+echo "============================================="
+echo "  Research Workbench: http://localhost:8080"
+echo "  Browser VNC:        http://localhost:6080"
+echo "============================================="
+
+# Keep container running
+if [ $# -eq 0 ]; then
+    wait $AMPLIFIERD_PID
+else
+    exec "$@"
+fi
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add entrypoint.sh && git commit -m "feat: entrypoint.sh starting all services"
+```
+
+---
+
+## Phase 1 Complete
+
+At this point you have:
+- Clean repo with new directory structure
+- Backend with auth, artifacts, AG-UI adapter (with MCP App metadata passthrough), and FastAPI app
+- MCP App template serving endpoint (`/api/apps/{name}`)
+- Tests for auth, artifacts, AG-UI adapter (including MCP App passthrough), and app integration
+- Dockerfile and entrypoint for the all-in-one container
+- No frontend yet (that's Phase 2)
+
+**Verify everything passes:**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/backend
+uv run python -m pytest ../tests/ -v
+```
+
+Expected: All tests pass.
\ No newline at end of file
diff --git a/docs/plans/2026-05-26-research-workbench-phase2.md b/docs/plans/2026-05-26-research-workbench-phase2.md
new file mode 100644
index 0000000..38608c7
--- /dev/null
+++ b/docs/plans/2026-05-26-research-workbench-phase2.md
@@ -0,0 +1,1820 @@
+# Research Workbench — Phase 2: Frontend (Chat + Sessions)
+
+> **Execution:** Use the subagent-driven-development workflow to implement this plan.
+
+**Goal:** Build the React frontend with CopilotKit headless chat, Tabler UI components, session management sidebar, tool call rendering, and MCP App inline visualization support.
+
+**Architecture:** A Vite + React + TypeScript SPA using CopilotKit's `useCopilotChat` hook for headless chat control (we build ALL UI with Tabler), connecting to the backend's AG-UI endpoint at `/api/copilotkit`. The layout is a 3-column design: session sidebar (240px), chat panel (flex), and right panel (45%) for browser/artifacts. Tool results with `_meta.ui.resourceUri` (MCP Apps, SEP-1865) are rendered as sandboxed iframes with JSON-RPC 2.0 postMessage bridges for interactive inline visualizations.
+
+**Tech Stack:** React 19, TypeScript, Vite (with `@rolldown/vite`), Tabler (`@tabler/core`, `@tabler/icons-react`), CopilotKit (`@copilotkit/react-core`, `@copilotkit/react-ui`), react-markdown
+
+**Depends on:** Phase 1 complete (backend running at `:8080`)
+
+---
+
+### Task 1: Scaffold Vite + React + TypeScript project
+
+**Files:**
+- Create: `frontend/package.json`
+- Create: `frontend/tsconfig.json`
+- Create: `frontend/vite.config.ts`
+- Create: `frontend/index.html`
+
+**Step 1: Initialize the frontend project**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm create vite@latest . -- --template react-ts
+```
+
+When prompted, select: React, TypeScript.
+
+If the directory already has files, answer "yes" to proceed.
+
+**Step 2: Install dependencies**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm install @copilotkit/react-core @copilotkit/react-ui @tabler/core @tabler/icons-react react-markdown
+npm install -D @types/react @types/react-dom
+```
+
+**Step 3: Update vite.config.ts for API proxy**
+
+Replace `frontend/vite.config.ts` with:
+
+```typescript
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      "/api": {
+        target: "http://localhost:8080",
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: "dist",
+    sourcemap: true,
+  },
+});
+```
+
+**Step 4: Verify the dev server starts**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm run dev -- --host 2>&1 &
+sleep 3
+curl -s http://localhost:3000 | head -5
+kill %1
+```
+
+Expected: HTML content from the Vite dev server.
+
+**Step 5: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/package.json frontend/package-lock.json frontend/tsconfig.json frontend/tsconfig.app.json frontend/tsconfig.node.json frontend/vite.config.ts frontend/index.html frontend/src frontend/public frontend/eslint.config.js -f
+git commit -m "feat: scaffold Vite + React + TypeScript frontend"
+```
+
+---
+
+### Task 2: TypeScript types
+
+**Files:**
+- Create: `frontend/src/lib/types.ts`
+
+**Step 1: Create the types file**
+
+Create `frontend/src/lib/types.ts`:
+
+```typescript
+/**
+ * Shared TypeScript types for the Research Workbench frontend.
+ */
+
+// --- Sessions ---
+
+export interface Session {
+  session_id: string;
+  status: string;
+  bundle: string | null;
+  created_at: string | null;
+  last_activity: string | null;
+  total_messages: number | null;
+  tool_invocations: number | null;
+  stale: boolean | null;
+}
+
+export interface SessionListResponse {
+  sessions: Session[];
+  total: number;
+}
+
+// --- Artifacts ---
+
+export interface Artifact {
+  name: string;
+  session_id: string;
+  size: number;
+}
+
+export interface ArtifactContent {
+  name: string;
+  session_id: string;
+  content: string;
+}
+
+// --- A2UI Blocks ---
+
+export type A2UIBlockType = "filters" | "form" | "table" | "cards";
+
+export interface A2UIFilterOption {
+  label: string;
+  active: boolean;
+}
+
+export interface A2UIFiltersBlock {
+  type: "filters";
+  options: A2UIFilterOption[];
+}
+
+export interface A2UIFormField {
+  name: string;
+  type: "text" | "number" | "select";
+  label?: string;
+  value?: string | number;
+  options?: string[];
+}
+
+export interface A2UIFormBlock {
+  type: "form";
+  fields: A2UIFormField[];
+  submitLabel?: string;
+}
+
+export interface A2UITableBlock {
+  type: "table";
+  headers: string[];
+  rows: string[][];
+}
+
+export interface A2UICardItem {
+  title: string;
+  description?: string;
+  image?: string;
+  price?: string;
+  url?: string;
+}
+
+export interface A2UICardsBlock {
+  type: "cards";
+  items: A2UICardItem[];
+}
+
+export type A2UIBlock =
+  | A2UIFiltersBlock
+  | A2UIFormBlock
+  | A2UITableBlock
+  | A2UICardsBlock;
+
+// --- Tool Calls ---
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  args: string;
+  result?: string;
+  status: "pending" | "running" | "complete" | "error";
+  /** MCP App metadata -- when present, render MCPAppRenderer instead of ToolCallCard */
+  _meta?: MCPAppMeta;
+  /** Structured data for the MCP App iframe */
+  structuredContent?: MCPAppStructuredContent;
+}
+
+// --- MCP Apps (inline interactive visualizations) ---
+
+/**
+ * MCP App metadata attached to tool results.
+ * When present, the frontend renders an MCPAppRenderer (sandboxed iframe)
+ * instead of a plain ToolCallCard.
+ */
+export interface MCPAppMeta {
+  ui: {
+    resourceUri: string;  // e.g. "app://chart"
+    csp?: string;         // Content Security Policy override
+  };
+}
+
+export interface MCPAppStructuredContent {
+  [key: string]: unknown;  // App-specific data (chart data, table rows, etc.)
+}
+
+// --- Auth ---
+
+export interface AuthUser {
+  email: string;
+}
+
+export interface LoginResponse {
+  token: string;
+  email: string;
+}
+```
+
+**Step 2: Verify it compiles**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npx tsc --noEmit --pretty 2>&1 | tail -5
+```
+
+Expected: No errors (or only warnings from the template files which we'll replace).
+
+**Step 3: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/lib/types.ts && git commit -m "feat: TypeScript types for sessions, artifacts, A2UI, tool calls, auth"
+```
+
+---
+
+### Task 3: Global styles (Tabler dark theme)
+
+**Files:**
+- Create: `frontend/src/styles/globals.css`
+
+**Step 1: Create the globals.css**
+
+Create `frontend/src/styles/globals.css`:
+
+```css
+/* Import Tabler core CSS */
+@import "@tabler/core/dist/css/tabler.min.css";
+@import "@tabler/core/dist/css/tabler-vendors.min.css";
+
+/* Force dark theme */
+:root {
+  color-scheme: dark;
+}
+
+body {
+  background-color: #1a1a2e;
+  color: #e0e0e0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  margin: 0;
+  overflow: hidden;
+  height: 100vh;
+}
+
+#root {
+  height: 100vh;
+  display: flex;
+}
+
+/* --- Layout: 3-column --- */
+
+.app-layout {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 240px;
+  min-width: 240px;
+  background-color: #16213e;
+  border-right: 1px solid #2a2a4a;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.chat-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.right-panel {
+  width: 45%;
+  min-width: 300px;
+  background-color: #16213e;
+  border-left: 1px solid #2a2a4a;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Sidebar --- */
+
+.sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid #2a2a4a;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h3 {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #8888aa;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+
+.session-item {
+  padding: 0.6rem 0.8rem;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-bottom: 2px;
+  font-size: 0.85rem;
+  color: #c0c0d0;
+  transition: background-color 0.15s;
+}
+
+.session-item:hover {
+  background-color: #1e2a4a;
+}
+
+.session-item.active {
+  background-color: #2a3a5a;
+  color: #ffffff;
+}
+
+.session-item .session-meta {
+  font-size: 0.7rem;
+  color: #6a6a8a;
+  margin-top: 2px;
+}
+
+/* --- Chat --- */
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.chat-message {
+  margin-bottom: 1rem;
+  max-width: 85%;
+}
+
+.chat-message.user {
+  margin-left: auto;
+  background-color: #2a3a6a;
+  border-radius: 12px 12px 4px 12px;
+  padding: 0.8rem 1rem;
+}
+
+.chat-message.assistant {
+  background-color: #1e2a4a;
+  border-radius: 12px 12px 12px 4px;
+  padding: 0.8rem 1rem;
+}
+
+.chat-message.assistant p {
+  margin: 0.3rem 0;
+  line-height: 1.5;
+}
+
+.chat-input-area {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid #2a2a4a;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.chat-input-area input {
+  flex: 1;
+  background-color: #1e2a4a;
+  border: 1px solid #3a3a5a;
+  border-radius: 8px;
+  padding: 0.6rem 1rem;
+  color: #e0e0e0;
+  font-size: 0.9rem;
+  outline: none;
+}
+
+.chat-input-area input:focus {
+  border-color: #5a7aba;
+}
+
+.chat-input-area button {
+  background-color: #3a5aba;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.6rem 1.2rem;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.chat-input-area button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* --- Tool call cards --- */
+
+.tool-call-card {
+  background-color: #12192e;
+  border: 1px solid #2a2a4a;
+  border-radius: 8px;
+  padding: 0.6rem 0.8rem;
+  margin: 0.5rem 0;
+  font-size: 0.8rem;
+}
+
+.tool-call-card .tool-name {
+  color: #7aa2f7;
+  font-weight: 600;
+  font-family: monospace;
+}
+
+.tool-call-card .tool-args {
+  color: #8888aa;
+  font-family: monospace;
+  font-size: 0.75rem;
+  margin-top: 4px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.tool-call-card .tool-status {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  margin-left: 0.5rem;
+}
+
+.tool-call-card .tool-status.running {
+  background-color: #2a4a3a;
+  color: #7af7a2;
+}
+
+.tool-call-card .tool-status.complete {
+  background-color: #2a3a4a;
+  color: #7aa2f7;
+}
+
+/* --- Right panel tabs --- */
+
+.right-panel-tabs {
+  display: flex;
+  border-bottom: 1px solid #2a2a4a;
+}
+
+.right-panel-tabs button {
+  flex: 1;
+  padding: 0.6rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: #8888aa;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.right-panel-tabs button.active {
+  color: #ffffff;
+  border-bottom-color: #5a7aba;
+}
+
+.right-panel-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* --- Login page --- */
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100%;
+}
+
+.login-card {
+  background-color: #16213e;
+  border: 1px solid #2a2a4a;
+  border-radius: 12px;
+  padding: 2rem;
+  width: 360px;
+}
+
+.login-card h2 {
+  margin-top: 0;
+  text-align: center;
+}
+
+.login-card input {
+  width: 100%;
+  padding: 0.6rem;
+  margin-bottom: 0.8rem;
+  background-color: #1e2a4a;
+  border: 1px solid #3a3a5a;
+  border-radius: 6px;
+  color: #e0e0e0;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+
+.login-card button {
+  width: 100%;
+  padding: 0.7rem;
+  background-color: #3a5aba;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.login-card .error {
+  color: #f7607a;
+  font-size: 0.85rem;
+  text-align: center;
+  margin-bottom: 0.5rem;
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/styles/globals.css && git commit -m "feat: global styles with Tabler dark theme, 3-column layout"
+```
+
+---
+
+### Task 4: API client and hooks
+
+**Files:**
+- Create: `frontend/src/lib/api.ts`
+- Create: `frontend/src/hooks/useAuth.ts`
+- Create: `frontend/src/hooks/useSessions.ts`
+- Create: `frontend/src/hooks/useChat.ts`
+- Create: `frontend/src/hooks/useArtifacts.ts`
+
+**Step 1: Create the API client**
+
+Create `frontend/src/lib/api.ts`:
+
+```typescript
+/**
+ * HTTP client for the Research Workbench backend API.
+ * All endpoints are relative (proxied by Vite in dev, served by FastAPI in prod).
+ */
+
+import type {
+  SessionListResponse,
+  Artifact,
+  ArtifactContent,
+  LoginResponse,
+  AuthUser,
+} from "./types";
+
+async function request<T>(url: string, options?: RequestInit): Promise<T> {
+  const resp = await fetch(url, {
+    credentials: "include",
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+  if (!resp.ok) {
+    const body = await resp.text();
+    throw new Error(`${resp.status}: ${body}`);
+  }
+  return resp.json();
+}
+
+// Auth
+export const login = (email: string, password: string) =>
+  request<LoginResponse>("/api/auth/login", {
+    method: "POST",
+    body: JSON.stringify({ email, password }),
+  });
+
+export const getMe = () => request<AuthUser>("/api/auth/me");
+
+export const logout = () =>
+  request<{ status: string }>("/api/auth/logout", { method: "POST" });
+
+// Sessions
+export const listSessions = () =>
+  request<SessionListResponse>("/api/sessions");
+
+export const createSession = (name?: string) =>
+  request<{ session_id: string }>("/api/sessions", {
+    method: "POST",
+    body: JSON.stringify({ name }),
+  });
+
+export const deleteSession = (sessionId: string) =>
+  request<{ status: string }>(`/api/sessions/${sessionId}`, {
+    method: "DELETE",
+  });
+
+export const getTranscript = (sessionId: string) =>
+  request<{ messages: Array<{ role: string; content: string }> }>(
+    `/api/sessions/${sessionId}/transcript`
+  );
+
+// Artifacts
+export const listArtifacts = (sessionId: string) =>
+  request<Artifact[]>(`/api/artifacts/${sessionId}`);
+
+export const getArtifact = (sessionId: string, name: string) =>
+  request<ArtifactContent>(`/api/artifacts/${sessionId}/${name}`);
+```
+
+**Step 2: Create the auth hook**
+
+Create `frontend/src/hooks/useAuth.ts`:
+
+```typescript
+import { useState, useEffect, useCallback } from "react";
+import * as api from "../lib/api";
+import type { AuthUser } from "../lib/types";
+
+export function useAuth() {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Check if already authenticated on mount
+  useEffect(() => {
+    api
+      .getMe()
+      .then(setUser)
+      .catch(() => setUser(null))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const doLogin = useCallback(async (email: string, password: string) => {
+    const resp = await api.login(email, password);
+    setUser({ email: resp.email });
+  }, []);
+
+  const doLogout = useCallback(async () => {
+    await api.logout();
+    setUser(null);
+  }, []);
+
+  return { user, loading, login: doLogin, logout: doLogout };
+}
+```
+
+**Step 3: Create the sessions hook**
+
+Create `frontend/src/hooks/useSessions.ts`:
+
+```typescript
+import { useState, useEffect, useCallback } from "react";
+import * as api from "../lib/api";
+import type { Session } from "../lib/types";
+
+export function useSessions() {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await api.listSessions();
+      setSessions(data.sessions);
+    } catch (e) {
+      console.error("Failed to list sessions:", e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const createNew = useCallback(async () => {
+    try {
+      const data = await api.createSession();
+      await refresh();
+      setActiveSessionId(data.session_id);
+      return data.session_id;
+    } catch (e) {
+      console.error("Failed to create session:", e);
+      return null;
+    }
+  }, [refresh]);
+
+  const switchTo = useCallback((sessionId: string) => {
+    setActiveSessionId(sessionId);
+  }, []);
+
+  const activeSession = sessions.find((s) => s.session_id === activeSessionId) ?? null;
+
+  return { sessions, activeSession, activeSessionId, loading, createNew, switchTo, refresh };
+}
+```
+
+**Step 4: Create the chat hook**
+
+This is the core hook. It connects to the backend's AG-UI SSE endpoint and manages the message stream.
+
+Create `frontend/src/hooks/useChat.ts`:
+
+```typescript
+import { useState, useCallback, useRef } from "react";
+import type { ToolCall } from "../lib/types";
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant" | "tool";
+  content: string;
+  toolCalls?: ToolCall[];
+}
+
+export function useChat(sessionId: string | null) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const sendMessage = useCallback(
+    async (content: string) => {
+      if (!sessionId || !content.trim()) return;
+
+      // Add user message
+      const userMsg: ChatMessage = {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content: content.trim(),
+      };
+      setMessages((prev) => [...prev, userMsg]);
+      setIsStreaming(true);
+
+      // Prepare AG-UI request
+      const allMessages = [...messages, userMsg].map((m) => ({
+        id: m.id,
+        role: m.role,
+        content: m.content,
+      }));
+
+      try {
+        abortRef.current = new AbortController();
+        const response = await fetch("/api/copilotkit", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({
+            threadId: sessionId,
+            runId: `run-${Date.now()}`,
+            messages: allMessages,
+            tools: [],
+            context: [],
+          }),
+          signal: abortRef.current.signal,
+        });
+
+        if (!response.ok || !response.body) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+
+        // Process SSE stream
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let assistantContent = "";
+        let assistantId = "";
+        const toolCalls: Record<string, ToolCall> = {};
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n\n");
+          buffer = lines.pop() ?? "";
+
+          for (const chunk of lines) {
+            if (!chunk.startsWith("data: ")) continue;
+            try {
+              const event = JSON.parse(chunk.slice(6));
+              switch (event.type) {
+                case "TEXT_MESSAGE_START":
+                  assistantId = event.messageId;
+                  assistantContent = "";
+                  break;
+                case "TEXT_MESSAGE_CONTENT":
+                  assistantContent += event.delta;
+                  // Update message in place for streaming effect
+                  setMessages((prev) => {
+                    const existing = prev.find((m) => m.id === assistantId);
+                    if (existing) {
+                      return prev.map((m) =>
+                        m.id === assistantId ? { ...m, content: assistantContent } : m
+                      );
+                    }
+                    return [
+                      ...prev,
+                      {
+                        id: assistantId,
+                        role: "assistant" as const,
+                        content: assistantContent,
+                      },
+                    ];
+                  });
+                  break;
+                case "TEXT_MESSAGE_END":
+                  // Content is already fully updated via deltas
+                  break;
+                case "TOOL_CALL_START":
+                  toolCalls[event.toolCallId] = {
+                    id: event.toolCallId,
+                    name: event.toolCallName,
+                    args: "",
+                    status: "running",
+                  };
+                  break;
+                case "TOOL_CALL_ARGS":
+                  if (toolCalls[event.toolCallId]) {
+                    toolCalls[event.toolCallId].args += event.delta;
+                  }
+                  break;
+                case "TOOL_CALL_END":
+                  if (toolCalls[event.toolCallId]) {
+                    toolCalls[event.toolCallId].status = "complete";
+                  }
+                  // Update the assistant message with tool calls
+                  setMessages((prev) =>
+                    prev.map((m) =>
+                      m.id === assistantId
+                        ? { ...m, toolCalls: Object.values(toolCalls) }
+                        : m
+                    )
+                  );
+                  break;
+                case "TOOL_CALL_RESULT":
+                  if (toolCalls[event.toolCallId]) {
+                    toolCalls[event.toolCallId].result = event.content;
+                    // Capture MCP App metadata for inline iframe rendering
+                    if (event._meta?.ui?.resourceUri) {
+                      toolCalls[event.toolCallId]._meta = event._meta;
+                    }
+                    if (event.structuredContent) {
+                      toolCalls[event.toolCallId].structuredContent = event.structuredContent;
+                    }
+                  }
+                  // Update the assistant message with tool call results (including MCP App data)
+                  setMessages((prev) =>
+                    prev.map((m) =>
+                      m.id === assistantId
+                        ? { ...m, toolCalls: Object.values(toolCalls) }
+                        : m
+                    )
+                  );
+                  break;
+                case "RUN_FINISHED":
+                  break;
+              }
+            } catch {
+              // Skip unparseable chunks
+            }
+          }
+        }
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") {
+          // User cancelled
+        } else {
+          console.error("Chat stream error:", err);
+        }
+      } finally {
+        setIsStreaming(false);
+      }
+    },
+    [sessionId, messages]
+  );
+
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+  }, []);
+
+  return { messages, isStreaming, sendMessage, cancel, clearMessages };
+}
+```
+
+**Step 5: Create the artifacts hook**
+
+Create `frontend/src/hooks/useArtifacts.ts`:
+
+```typescript
+import { useState, useCallback } from "react";
+import * as api from "../lib/api";
+import type { Artifact, ArtifactContent } from "../lib/types";
+
+export function useArtifacts(sessionId: string | null) {
+  const [artifacts, setArtifacts] = useState<Artifact[]>([]);
+  const [activeArtifact, setActiveArtifact] = useState<ArtifactContent | null>(null);
+
+  const refresh = useCallback(async () => {
+    if (!sessionId) return;
+    try {
+      const data = await api.listArtifacts(sessionId);
+      setArtifacts(data);
+    } catch (e) {
+      console.error("Failed to list artifacts:", e);
+    }
+  }, [sessionId]);
+
+  const loadArtifact = useCallback(
+    async (name: string) => {
+      if (!sessionId) return;
+      try {
+        const data = await api.getArtifact(sessionId, name);
+        setActiveArtifact(data);
+      } catch (e) {
+        console.error("Failed to load artifact:", e);
+      }
+    },
+    [sessionId]
+  );
+
+  return { artifacts, activeArtifact, refresh, loadArtifact };
+}
+```
+
+**Step 6: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/lib/api.ts frontend/src/hooks/ && git commit -m "feat: API client and hooks for auth, sessions, chat SSE, artifacts"
+```
+
+---
+
+### Task 5: Login page component
+
+**Files:**
+- Create: `frontend/src/components/LoginPage.tsx`
+
+**Step 1: Create the login page**
+
+Create `frontend/src/components/LoginPage.tsx`:
+
+```tsx
+import { useState, type FormEvent } from "react";
+
+interface LoginPageProps {
+  onLogin: (email: string, password: string) => Promise<void>;
+}
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await onLogin(email, password);
+    } catch {
+      setError("Invalid credentials");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-page">
+      <form className="login-card" onSubmit={handleSubmit}>
+        <h2>Research Workbench</h2>
+        {error && <div className="error">{error}</div>}
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          autoFocus
+          required
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <button type="submit" disabled={loading}>
+          {loading ? "Signing in..." : "Sign In"}
+        </button>
+      </form>
+    </div>
+  );
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/LoginPage.tsx && git commit -m "feat: login page component"
+```
+
+---
+
+### Task 6: Session sidebar component
+
+**Files:**
+- Create: `frontend/src/components/SessionSidebar.tsx`
+
+**Step 1: Create the sidebar**
+
+Create `frontend/src/components/SessionSidebar.tsx`:
+
+```tsx
+import { IconPlus, IconLogout } from "@tabler/icons-react";
+import type { Session } from "../lib/types";
+
+interface SessionSidebarProps {
+  sessions: Session[];
+  activeSessionId: string | null;
+  onSelect: (sessionId: string) => void;
+  onCreate: () => void;
+  onLogout: () => void;
+}
+
+export function SessionSidebar({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onCreate,
+  onLogout,
+}: SessionSidebarProps) {
+  return (
+    <div className="sidebar">
+      <div className="sidebar-header">
+        <h3>Sessions</h3>
+        <div style={{ display: "flex", gap: "0.3rem" }}>
+          <button
+            onClick={onCreate}
+            title="New session"
+            style={{
+              background: "none",
+              border: "none",
+              color: "#7aa2f7",
+              cursor: "pointer",
+              padding: "4px",
+            }}
+          >
+            <IconPlus size={18} />
+          </button>
+          <button
+            onClick={onLogout}
+            title="Log out"
+            style={{
+              background: "none",
+              border: "none",
+              color: "#8888aa",
+              cursor: "pointer",
+              padding: "4px",
+            }}
+          >
+            <IconLogout size={18} />
+          </button>
+        </div>
+      </div>
+      <div className="session-list">
+        {sessions.length === 0 && (
+          <div style={{ padding: "1rem", color: "#6a6a8a", fontSize: "0.85rem" }}>
+            No sessions yet. Click + to start researching.
+          </div>
+        )}
+        {sessions.map((s) => (
+          <div
+            key={s.session_id}
+            className={`session-item ${s.session_id === activeSessionId ? "active" : ""}`}
+            onClick={() => onSelect(s.session_id)}
+          >
+            <div>{s.session_id.slice(0, 12)}...</div>
+            <div className="session-meta">
+              {s.total_messages ?? 0} msgs &middot; {s.status}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/SessionSidebar.tsx && git commit -m "feat: session sidebar component with create, select, logout"
+```
+
+---
+
+### Task 7: Chat panel and tool call card components
+
+**Files:**
+- Create: `frontend/src/components/ChatPanel.tsx`
+- Create: `frontend/src/components/ToolCallCard.tsx`
+
+**Step 1: Create the ToolCallCard**
+
+Create `frontend/src/components/ToolCallCard.tsx`:
+
+```tsx
+import { IconTerminal, IconCheck, IconLoader } from "@tabler/icons-react";
+import type { ToolCall } from "../lib/types";
+
+interface ToolCallCardProps {
+  toolCall: ToolCall;
+}
+
+export function ToolCallCard({ toolCall }: ToolCallCardProps) {
+  // Try to extract a readable summary from the tool args
+  let argsSummary = toolCall.args;
+  try {
+    const parsed = JSON.parse(toolCall.args);
+    if (parsed.command) {
+      argsSummary = parsed.command;
+    }
+  } catch {
+    // Use raw args
+  }
+
+  return (
+    <div className="tool-call-card">
+      <span className="tool-name">
+        <IconTerminal size={14} style={{ verticalAlign: "middle", marginRight: 4 }} />
+        {toolCall.name}
+      </span>
+      <span className={`tool-status ${toolCall.status}`}>
+        {toolCall.status === "running" ? (
+          <IconLoader size={12} />
+        ) : (
+          <IconCheck size={12} />
+        )}{" "}
+        {toolCall.status}
+      </span>
+      {argsSummary && <div className="tool-args">{argsSummary}</div>}
+    </div>
+  );
+}
+```
+
+**Step 2: Create the ChatPanel**
+
+Create `frontend/src/components/ChatPanel.tsx`:
+
+```tsx
+import { useState, useRef, useEffect, type KeyboardEvent } from "react";
+import ReactMarkdown from "react-markdown";
+import { IconSend } from "@tabler/icons-react";
+import { ToolCallCard } from "./ToolCallCard";
+import type { ChatMessage } from "../hooks/useChat";
+
+interface ChatPanelProps {
+  messages: ChatMessage[];
+  isStreaming: boolean;
+  onSend: (content: string) => void;
+  sessionId: string | null;
+}
+
+export function ChatPanel({ messages, isStreaming, onSend, sessionId }: ChatPanelProps) {
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom on new messages
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSend = () => {
+    if (input.trim() && !isStreaming) {
+      onSend(input.trim());
+      setInput("");
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  if (!sessionId) {
+    return (
+      <div className="chat-panel" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <div style={{ color: "#6a6a8a", fontSize: "1.1rem" }}>
+          Select or create a session to start researching
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="chat-panel">
+      <div className="chat-messages">
+        {messages.map((msg) => (
+          <div key={msg.id} className={`chat-message ${msg.role}`}>
+            {msg.role === "assistant" ? (
+              <>
+                <ReactMarkdown>{msg.content}</ReactMarkdown>
+                {msg.toolCalls?.map((tc) => (
+                  <ToolCallCard key={tc.id} toolCall={tc} />
+                ))}
+              </>
+            ) : (
+              <div>{msg.content}</div>
+            )}
+          </div>
+        ))}
+        {isStreaming && messages.length > 0 && (
+          <div style={{ color: "#6a6a8a", fontSize: "0.8rem", padding: "0.5rem" }}>
+            Researching...
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+      <div className="chat-input-area">
+        <input
+          type="text"
+          placeholder="Ask a research question..."
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={isStreaming}
+          autoFocus
+        />
+        <button onClick={handleSend} disabled={isStreaming || !input.trim()}>
+          <IconSend size={18} />
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 3: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/ChatPanel.tsx frontend/src/components/ToolCallCard.tsx && git commit -m "feat: chat panel with SSE streaming and tool call cards"
+```
+
+---
+
+### Task 8: App shell and main entry point
+
+**Files:**
+- Modify: `frontend/src/App.tsx`
+- Modify: `frontend/src/main.tsx`
+- Create: `frontend/src/components/RightPanel.tsx`
+
+**Step 1: Create the RightPanel placeholder**
+
+Create `frontend/src/components/RightPanel.tsx`:
+
+```tsx
+/**
+ * Right panel with Browser and Artifacts tabs.
+ * Browser tab renders noVNC iframe. Artifacts tab shows per-session docs.
+ * Full implementation in Phase 3.
+ */
+
+import { useState } from "react";
+
+interface RightPanelProps {
+  sessionId: string | null;
+}
+
+export function RightPanel({ sessionId }: RightPanelProps) {
+  const [activeTab, setActiveTab] = useState<"browser" | "artifacts">("browser");
+
+  return (
+    <div className="right-panel">
+      <div className="right-panel-tabs">
+        <button
+          className={activeTab === "browser" ? "active" : ""}
+          onClick={() => setActiveTab("browser")}
+        >
+          Browser
+        </button>
+        <button
+          className={activeTab === "artifacts" ? "active" : ""}
+          onClick={() => setActiveTab("artifacts")}
+        >
+          Artifacts
+        </button>
+      </div>
+      <div className="right-panel-content">
+        {activeTab === "browser" ? (
+          <div style={{ padding: "1rem", color: "#6a6a8a" }}>
+            {sessionId
+              ? "Browser panel (noVNC) — implemented in Phase 3"
+              : "Select a session to view the browser"}
+          </div>
+        ) : (
+          <div style={{ padding: "1rem", color: "#6a6a8a" }}>
+            {sessionId
+              ? "Artifacts panel — implemented in Phase 3"
+              : "Select a session to view artifacts"}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 2: Replace App.tsx**
+
+Replace `frontend/src/App.tsx` with:
+
+```tsx
+import { useAuth } from "./hooks/useAuth";
+import { useSessions } from "./hooks/useSessions";
+import { useChat } from "./hooks/useChat";
+import { LoginPage } from "./components/LoginPage";
+import { SessionSidebar } from "./components/SessionSidebar";
+import { ChatPanel } from "./components/ChatPanel";
+import { RightPanel } from "./components/RightPanel";
+
+export default function App() {
+  const { user, loading: authLoading, login, logout } = useAuth();
+  const { sessions, activeSessionId, createNew, switchTo, refresh } = useSessions();
+  const { messages, isStreaming, sendMessage } = useChat(activeSessionId);
+
+  // Show loading while checking auth
+  if (authLoading) {
+    return (
+      <div className="login-page">
+        <div style={{ color: "#8888aa" }}>Loading...</div>
+      </div>
+    );
+  }
+
+  // Show login if not authenticated
+  if (!user) {
+    return <LoginPage onLogin={login} />;
+  }
+
+  return (
+    <div className="app-layout">
+      <SessionSidebar
+        sessions={sessions}
+        activeSessionId={activeSessionId}
+        onSelect={(id) => {
+          switchTo(id);
+        }}
+        onCreate={async () => {
+          await createNew();
+          await refresh();
+        }}
+        onLogout={logout}
+      />
+      <ChatPanel
+        messages={messages}
+        isStreaming={isStreaming}
+        onSend={sendMessage}
+        sessionId={activeSessionId}
+      />
+      <RightPanel sessionId={activeSessionId} />
+    </div>
+  );
+}
+```
+
+**Step 3: Replace main.tsx**
+
+Replace `frontend/src/main.tsx` with:
+
+```tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+**Step 4: Clean up unused Vite template files**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+rm -f src/App.css src/index.css src/assets/react.svg public/vite.svg
+```
+
+**Step 5: Verify the build compiles**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm run build 2>&1 | tail -10
+```
+
+Expected: Build succeeds. Output in `frontend/dist/`.
+
+**Step 6: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/ && git commit -m "feat: App shell with login, session sidebar, chat panel, right panel"
+```
+
+---
+
+### Task 9: MCP App Renderer component (sandboxed iframe for MCP Apps)
+
+Tool results with `_meta.ui.resourceUri` trigger inline interactive visualizations rendered in sandboxed iframes. This component handles the full MCP Apps lifecycle: fetching the HTML template, setting up the iframe sandbox, and bridging JSON-RPC 2.0 communication over `postMessage`.
+
+**Files:**
+- Create: `frontend/src/components/MCPAppRenderer.tsx`
+- Create: `frontend/src/components/__tests__/MCPAppRenderer.test.tsx`
+
+**Step 1: Create the MCPAppRenderer component**
+
+Create `frontend/src/components/MCPAppRenderer.tsx`:
+
+```tsx
+import { useRef, useEffect, useCallback, useState } from "react";
+import { IconAppWindow, IconLoader } from "@tabler/icons-react";
+
+interface MCPAppRendererProps {
+  /** Resource URI from tool result _meta.ui.resourceUri, e.g. "app://chart" */
+  resourceUri: string;
+  /** Structured data to send to the iframe app */
+  data: Record<string, unknown>;
+  /** Optional CSP override from _meta.ui.csp */
+  csp?: string;
+  /** Callback when the iframe app calls tools/call */
+  onToolCall?: (toolName: string, args: Record<string, unknown>) => void;
+  /** Callback when the iframe app sends a user message via ui/sendMessage */
+  onSendMessage?: (content: string) => void;
+}
+
+/**
+ * Renders an MCP App (SEP-1865) in a sandboxed iframe.
+ *
+ * Flow:
+ * 1. Parse resourceUri ("app://chart" -> "/api/apps/chart")
+ * 2. Fetch the HTML from the backend
+ * 3. Set iframe srcdoc with the HTML
+ * 4. Listen for postMessage JSON-RPC 2.0 calls from the iframe
+ * 5. On "ui/initialize", send the structured data as tool/input
+ * 6. On "tools/call", proxy to the backend and return the result
+ * 7. On "ui/sendMessage", inject into the chat
+ */
+export function MCPAppRenderer({
+  resourceUri,
+  data,
+  csp,
+  onToolCall,
+  onSendMessage,
+}: MCPAppRendererProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [iframeHeight, setIframeHeight] = useState(300);
+
+  // Parse app name from resourceUri: "app://chart" -> "chart"
+  const appName = resourceUri.replace(/^app:\/\//, "");
+
+  // Fetch HTML and set iframe srcdoc
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadApp() {
+      try {
+        setLoading(true);
+        setError(null);
+        const resp = await fetch(`/api/apps/${appName}`, {
+          credentials: "include",
+        });
+        if (!resp.ok) {
+          throw new Error(`Failed to load app: ${resp.status}`);
+        }
+        const html = await resp.text();
+        if (!cancelled && iframeRef.current) {
+          iframeRef.current.srcdoc = html;
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load app");
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    loadApp();
+    return () => { cancelled = true; };
+  }, [appName]);
+
+  // Handle incoming JSON-RPC 2.0 messages from the iframe
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      // Only accept messages from our iframe
+      if (!iframeRef.current?.contentWindow) return;
+
+      const msg = event.data;
+      if (!msg || typeof msg !== "object" || msg.jsonrpc !== "2.0") return;
+
+      switch (msg.method) {
+        case "ui/initialize":
+          // App is ready -- send it the structured data
+          iframeRef.current.contentWindow.postMessage(
+            {
+              jsonrpc: "2.0",
+              method: "tool/input",
+              params: data,
+            },
+            "*"
+          );
+          break;
+
+        case "tools/call":
+          // App wants to call a server tool
+          if (onToolCall) {
+            onToolCall(msg.params?.name, msg.params?.arguments ?? {});
+          }
+          // Send back an acknowledgment (the tool result will come async)
+          iframeRef.current.contentWindow.postMessage(
+            {
+              jsonrpc: "2.0",
+              id: msg.id,
+              result: { status: "accepted" },
+            },
+            "*"
+          );
+          break;
+
+        case "ui/sendMessage":
+          // App wants to inject a user message into the chat
+          if (onSendMessage && msg.params?.content) {
+            onSendMessage(msg.params.content);
+          }
+          break;
+
+        case "ui/resize":
+          // App requests a height change
+          if (msg.params?.height && typeof msg.params.height === "number") {
+            setIframeHeight(Math.min(msg.params.height, 800));
+          }
+          break;
+      }
+    },
+    [data, onToolCall, onSendMessage]
+  );
+
+  // Attach/detach postMessage listener
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [handleMessage]);
+
+  if (error) {
+    return (
+      <div
+        className="tool-call-card"
+        style={{ color: "#f7607a", fontSize: "0.8rem" }}
+      >
+        <IconAppWindow size={14} style={{ marginRight: 4 }} />
+        MCP App error: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="card"
+      style={{
+        margin: "0.5rem 0",
+        border: "1px solid #2a2a4a",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#0a0a1a",
+      }}
+    >
+      {/* Header bar */}
+      <div
+        style={{
+          padding: "0.3rem 0.6rem",
+          borderBottom: "1px solid #2a2a4a",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.3rem",
+          fontSize: "0.75rem",
+          color: "#7aa2f7",
+          backgroundColor: "#12192e",
+        }}
+      >
+        {loading ? <IconLoader size={14} /> : <IconAppWindow size={14} />}
+        <span>{appName}</span>
+      </div>
+
+      {/* Sandboxed iframe */}
+      <iframe
+        ref={iframeRef}
+        title={`MCP App: ${appName}`}
+        sandbox="allow-scripts allow-forms allow-popups"
+        style={{
+          width: "100%",
+          height: `${iframeHeight}px`,
+          border: "none",
+          backgroundColor: "#0a0a1a",
+        }}
+      />
+    </div>
+  );
+}
+```
+
+**Step 2: Create a basic test**
+
+Create `frontend/src/components/__tests__/MCPAppRenderer.test.tsx`:
+
+```tsx
+import { describe, it, expect } from "vitest";
+
+/**
+ * MCPAppRenderer is primarily integration-tested (needs iframe + postMessage).
+ * These tests verify the component module loads and the app name parsing logic.
+ */
+
+describe("MCPAppRenderer", () => {
+  it("module exports MCPAppRenderer component", async () => {
+    const mod = await import("../MCPAppRenderer");
+    expect(mod.MCPAppRenderer).toBeDefined();
+    expect(typeof mod.MCPAppRenderer).toBe("function");
+  });
+
+  it("parses app:// resource URIs correctly", () => {
+    // The component internally does: resourceUri.replace(/^app:\/\//, "")
+    const uri = "app://chart";
+    const appName = uri.replace(/^app:\/\//, "");
+    expect(appName).toBe("chart");
+  });
+
+  it("handles bare app names", () => {
+    const uri = "app://comparison";
+    const appName = uri.replace(/^app:\/\//, "");
+    expect(appName).toBe("comparison");
+  });
+});
+```
+
+**Step 3: Install vitest if not present and run test**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm install -D vitest @testing-library/react jsdom
+npx vitest run src/components/__tests__/MCPAppRenderer.test.tsx 2>&1 | tail -10
+```
+
+Expected: All 3 tests PASS.
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/MCPAppRenderer.tsx frontend/src/components/__tests__/ && git commit -m "feat: MCPAppRenderer for inline MCP App iframes with JSON-RPC postMessage bridge"
+```
+
+---
+
+### Task 10: Wire MCP App Renderer into ChatPanel
+
+When a tool call result includes `_meta.ui.resourceUri`, render an `MCPAppRenderer` instead of a `ToolCallCard`. This requires updating the ChatPanel to check each tool call for MCP App metadata.
+
+**Files:**
+- Modify: `frontend/src/components/ChatPanel.tsx`
+
+**Step 1: Add MCPAppRenderer import to ChatPanel**
+
+Add this import at the top of `frontend/src/components/ChatPanel.tsx`, alongside the existing imports:
+
+```tsx
+import { MCPAppRenderer } from "./MCPAppRenderer";
+```
+
+**Step 2: Update tool call rendering to detect MCP Apps**
+
+In `frontend/src/components/ChatPanel.tsx`, find the tool call rendering section inside `messages.map()`:
+
+Replace:
+```tsx
+                {msg.toolCalls?.map((tc) => (
+                  <ToolCallCard key={tc.id} toolCall={tc} />
+                ))}
+```
+
+With:
+```tsx
+                {msg.toolCalls?.map((tc) =>
+                  tc._meta?.ui?.resourceUri ? (
+                    <MCPAppRenderer
+                      key={tc.id}
+                      resourceUri={tc._meta.ui.resourceUri}
+                      data={tc.structuredContent ?? {}}
+                      csp={tc._meta.ui.csp}
+                      onSendMessage={(content) => onSend(content)}
+                    />
+                  ) : (
+                    <ToolCallCard key={tc.id} toolCall={tc} />
+                  )
+                )}
+```
+
+**Step 3: Verify the build compiles**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm run build 2>&1 | tail -10
+```
+
+Expected: Build succeeds.
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/ChatPanel.tsx && git commit -m "feat: wire MCPAppRenderer into ChatPanel for MCP App tool results"
+```
+
+---
+
+## Phase 2 Complete
+
+At this point you have:
+- Full React SPA with login flow, session sidebar, streaming chat, tool call rendering
+- MCP App Renderer component for inline interactive HTML visualizations in sandboxed iframes
+- Tool call results with `_meta.ui.resourceUri` automatically render as MCP Apps instead of ToolCallCards
+- Direct SSE streaming from the AG-UI endpoint (no CopilotKit runtime dependency)
+- Tabler dark theme with 3-column layout
+- Right panel placeholder (Browser + Artifacts tabs, implemented in Phase 3)
+- Build output in `frontend/dist/` ready for Docker
+
+**Verify the build:**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm run build && echo "BUILD OK" && ls -la dist/
+```
+
+Expected: `BUILD OK` with `dist/index.html` and `dist/assets/` directory.
\ No newline at end of file
diff --git a/docs/plans/2026-05-26-research-workbench-phase3.md b/docs/plans/2026-05-26-research-workbench-phase3.md
new file mode 100644
index 0000000..ea5f2f8
--- /dev/null
+++ b/docs/plans/2026-05-26-research-workbench-phase3.md
@@ -0,0 +1,1585 @@
+# Research Workbench — Phase 3: Bundle + Browser + Artifacts
+
+> **Execution:** Use the subagent-driven-development workflow to implement this plan.
+
+**Goal:** Create the Amplifier bundle (researcher agent), wire up the browser panel (noVNC iframe), implement the artifacts panel with markdown rendering, add A2UI block rendering for inline AI-generated UI controls, and build the visual artifact runtime for AI-generated interactive inline visualizations (Claude "builds visuals" style).
+
+**Architecture:** The bundle follows the thin-root pattern: `bundle.md` includes foundation (which brings tool-bash, tool-filesystem, tool-web-fetch) and declares the researcher agent. The agent's body contains playwright-cli command reference, A2UI output format spec, artifact conventions, and visual artifact generation instructions. A single universal runtime (`bundle/apps/runtime.html`) executes arbitrary AI-generated code (React/JSX, Chart.js, Leaflet, plain HTML) in a sandboxed iframe. The AI generates visualization code on the fly during conversation — not from fixed templates. The browser panel embeds noVNC via iframe. The artifacts panel lists and renders markdown files written by the agent.
+
+**Tech Stack:** Amplifier bundle (markdown + YAML), React components (Tabler), react-markdown, noVNC iframe, Chart.js, Leaflet.js, React 19/Babel standalone (in-browser JSX), MCP Apps (SEP-1865)
+
+**Depends on:** Phase 1 (backend) and Phase 2 (frontend shell) complete
+
+---
+
+### Task 1: Bundle root (bundle.md)
+
+The thin root bundle. It includes foundation (which provides tool-bash, tool-filesystem, tool-web-fetch) and declares the researcher agent. Do NOT redeclare foundation tools — that's the canonical anti-pattern.
+
+**Files:**
+- Create: `bundle/bundle.md`
+
+**Step 1: Create bundle.md**
+
+Create `bundle/bundle.md`:
+
+```markdown
+---
+bundle:
+  name: research-workbench
+  version: 0.1.0
+  description: General-purpose AI research tool with browser control and artifact generation
+
+includes:
+  - bundle: git+https://github.com/microsoft/amplifier-foundation@main
+  - bundle: research-workbench:behaviors/research-workbench
+---
+
+# Research Workbench
+
+A research-first Amplifier bundle. Provides a researcher agent with browser
+control (via playwright-cli), artifact generation, and A2UI inline controls.
+
+## What's Included
+
+**From foundation:** tool-bash, tool-filesystem, tool-web-fetch, and all standard hooks.
+
+**From this bundle:**
+- `researcher` agent — browser-equipped research assistant
+- Research workbench behavior — wires the researcher agent with context
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/bundle.md && git commit -m "feat: thin root bundle including foundation"
+```
+
+---
+
+### Task 2: Research workbench behavior
+
+**Files:**
+- Create: `bundle/behaviors/research-workbench.yaml`
+
+**Step 1: Create the behavior file**
+
+Create `bundle/behaviors/research-workbench.yaml`:
+
+```yaml
+# research-workbench behavior
+# Wires the researcher agent and research context into sessions.
+
+behavior:
+  name: research-workbench
+  description: Browser-equipped research assistant with artifact generation
+
+agents:
+  include:
+    - researcher
+
+context:
+  include:
+    - research-workbench:context/researcher-instructions
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/behaviors/research-workbench.yaml && git commit -m "feat: research-workbench behavior wiring researcher agent"
+```
+
+---
+
+### Task 3: Researcher agent definition
+
+The researcher agent is the core of the system. It knows how to use playwright-cli for browser control, generate A2UI blocks for interactive controls, and create artifacts.
+
+**Files:**
+- Create: `bundle/agents/researcher.md`
+
+**Step 1: Create the researcher agent**
+
+Create `bundle/agents/researcher.md`:
+
+```markdown
+---
+meta:
+  name: researcher
+  description: |
+    WHY: Users need a hands-free research assistant that can browse the web,
+    extract data, compare options, and generate polished deliverables.
+
+    WHEN: Delegated to for any research task — product comparisons, market
+    research, technical investigations, travel planning, buying guides.
+
+    WHAT: Conducts multi-step web research using a real browser (playwright-cli),
+    generates interactive inline UI controls (A2UI), and produces artifacts
+    (guides, reports, comparison tables) as markdown files.
+
+    HOW: Opens browser tabs via playwright-cli, takes compact snapshots,
+    clicks elements, fills forms. Generates A2UI JSON blocks inline when the
+    user would benefit from filters, forms, or data tables. Writes artifacts
+    to the artifacts directory for persistent deliverables.
+
+    Examples of delegation:
+    - "Research hybrid cars under $10K near Woodinville WA"
+    - "Compare the top 5 project management tools for small teams"
+    - "Find flights from Seattle to Tokyo in October under $800"
+    - "Investigate the best mechanical keyboards for programming"
+  model_role:
+    - research
+    - general
+---
+
+# Researcher Agent
+
+You are a research assistant with a live web browser. You help users
+investigate topics, compare options, and produce polished deliverables.
+
+## Browser Control (playwright-cli)
+
+You control a Chromium browser via `playwright-cli`. The browser is visible
+to the user in real-time through a VNC panel.
+
+### Commands
+
+All commands use `playwright-cli -s=research` (the `-s` flag keeps a persistent
+browser session across commands).
+
+| Action | Command |
+|--------|---------|
+| Open a URL | `playwright-cli -s=research open https://example.com` |
+| Take a snapshot | `playwright-cli -s=research snapshot` |
+| Compact snapshot | `playwright-cli -s=research snapshot -ic` |
+| Click an element | `playwright-cli -s=research click @e5` |
+| Type text | `playwright-cli -s=research type @e3 "search query"` |
+| Press a key | `playwright-cli -s=research press Enter` |
+| Scroll down | `playwright-cli -s=research scroll down` |
+| Go back | `playwright-cli -s=research back` |
+| New tab | `playwright-cli -s=research open https://other-site.com` |
+| List tabs | `playwright-cli -s=research tabs` |
+| Switch tab | `playwright-cli -s=research tab 2` |
+
+### Snapshot Refs
+
+Snapshots return an accessibility tree with element refs like `@e1`, `@e2`, etc.
+Use these refs for click/type actions. Always take a snapshot after navigation
+to see the page state.
+
+### Best Practices
+
+1. Always take a compact snapshot (`-ic`) after opening a URL or clicking
+2. Use refs from the most recent snapshot — they change after navigation
+3. Open new sites in new tabs (both URLs will be visible in the VNC panel)
+4. The user can see and interact with the browser via VNC at any time
+
+## A2UI (AI-to-UI) Blocks
+
+You can generate interactive UI controls inline in your messages. Wrap them
+in a JSON code block with the `a2ui` language tag. The frontend renders them
+as Tabler components.
+
+@mention bundle/context/a2ui-format.md
+
+## Artifacts
+
+When you produce a substantial deliverable (guide, report, comparison table),
+save it as a markdown file in the artifacts directory.
+
+@mention bundle/context/artifact-conventions.md
+
+## Inline Visuals (Claude-style)
+
+You can generate interactive visualizations inline in your messages. When your
+research would benefit from a visual (comparison chart, data table, map, dashboard,
+decision matrix), write the code directly as a `visual` code block. The frontend
+renders it live in a sandboxed iframe.
+
+@mention bundle/context/visual-artifacts.md
+
+Be proactive: if you're comparing 5 products, generate a comparison table.
+If you're showing locations, generate a map. If you're showing trends, generate
+a chart. Don't wait to be asked.
+
+## Research Workflow
+
+1. **Understand the request** — clarify scope, constraints, preferences
+2. **Plan the research** — identify sites to check, data to gather
+3. **Browse and extract** — open sites, take snapshots, extract data
+4. **Present findings** — use A2UI blocks for simple controls, `visual` blocks for rich interactive visualizations
+5. **Generate artifacts** — write polished guides/reports as markdown files
+6. **Iterate** — refine based on user feedback, apply filters, dig deeper
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/agents/researcher.md && git commit -m "feat: researcher agent with playwright-cli, A2UI, inline visuals, artifact conventions"
+```
+
+---
+
+### Task 4: Context files (A2UI format, artifact conventions, instructions)
+
+**Files:**
+- Create: `bundle/context/a2ui-format.md`
+- Create: `bundle/context/artifact-conventions.md`
+- Create: `bundle/context/researcher-instructions.md`
+
+**Step 1: Create a2ui-format.md**
+
+Create `bundle/context/a2ui-format.md`:
+
+````markdown
+# A2UI Block Format
+
+Generate interactive UI by emitting a fenced code block with language `a2ui`
+containing a JSON object. The frontend parses these and renders Tabler
+components.
+
+## Supported Block Types
+
+### Filters
+
+Toggle buttons for filtering results. When the user clicks a filter, the
+frontend sends a message with the updated filter state.
+
+```a2ui
+{
+  "type": "filters",
+  "options": [
+    {"label": "Toyota", "active": true},
+    {"label": "Honda", "active": true},
+    {"label": "Hyundai", "active": false},
+    {"label": "Under $5K", "active": false}
+  ]
+}
+```
+
+### Table
+
+Data table with headers and rows. Good for comparisons.
+
+```a2ui
+{
+  "type": "table",
+  "headers": ["Model", "Year", "Price", "Miles", "Source"],
+  "rows": [
+    ["Prius", "2014", "$6,500", "89K", "Craigslist"],
+    ["Camry Hybrid", "2012", "$7,200", "102K", "CarGurus"]
+  ]
+}
+```
+
+### Cards
+
+Card grid for items with images (listings, products, places).
+
+```a2ui
+{
+  "type": "cards",
+  "items": [
+    {
+      "title": "2014 Toyota Prius",
+      "description": "Clean title, one owner, 89K miles",
+      "price": "$6,500",
+      "url": "https://example.com/listing/123"
+    }
+  ]
+}
+```
+
+### Form
+
+Input form for structured user preferences.
+
+```a2ui
+{
+  "type": "form",
+  "fields": [
+    {"name": "max_price", "type": "number", "label": "Max Price", "value": 10000},
+    {"name": "radius", "type": "number", "label": "Search Radius (mi)", "value": 50},
+    {"name": "fuel_type", "type": "select", "label": "Fuel", "options": ["hybrid", "electric", "any"]}
+  ],
+  "submitLabel": "Update Search"
+}
+```
+
+## Rules
+
+- Always use the `a2ui` language tag on the code fence
+- The JSON must be a single object with a `type` field
+- Generate A2UI blocks when the user would benefit from interactive controls
+- Don't overuse — plain text is fine for simple responses
+````
+
+**Step 2: Create artifact-conventions.md**
+
+Create `bundle/context/artifact-conventions.md`:
+
+```markdown
+# Artifact Conventions
+
+Artifacts are polished deliverables saved as markdown files. They persist
+across the session and are viewable in the Artifacts panel.
+
+## Writing Artifacts
+
+Use tool-filesystem to write files to the artifacts directory:
+
+```
+write_file("artifacts/<session_id>/<name>.md", content)
+```
+
+The `<session_id>` matches the current session. Ask the system for the
+session ID if you don't know it, or use the working directory path.
+
+## File Naming
+
+- Use kebab-case: `buying-guide.md`, `comparison-table.md`
+- Be descriptive: `hybrid-cars-under-10k-guide.md`
+- Always use `.md` extension
+
+## Content Format
+
+- Start with an H1 title
+- Include a date and scope summary at the top
+- Use markdown tables for comparisons
+- Use bullet points for recommendations
+- Include source URLs where applicable
+- End with a "Next Steps" or "Summary" section
+
+## When to Create Artifacts
+
+Create an artifact when:
+- The user asks for a guide, report, or summary
+- You've gathered enough data for a comparison table
+- The research produces actionable recommendations
+- The user would benefit from a printable/shareable document
+
+Don't create artifacts for:
+- Simple answers or clarifications
+- Intermediate research steps
+- Status updates
+```
+
+**Step 3: Create researcher-instructions.md (thin awareness pointer)**
+
+Create `bundle/context/researcher-instructions.md`:
+
+```markdown
+# Research Workbench Context
+
+This session runs inside the Research Workbench. You have access to:
+
+- **Browser**: A live Chromium browser controlled via `playwright-cli -s=research`.
+  The user can see the browser in the VNC panel and take over at any time.
+- **Artifacts**: Write research deliverables to `artifacts/<session_id>/`.
+  They appear in the Artifacts panel.
+- **A2UI**: Generate inline interactive controls using `a2ui` code blocks.
+- **Inline Visuals**: Generate interactive charts, tables, maps, and dashboards
+  using `visual` code blocks. See the researcher agent for full details.
+
+See the researcher agent definition for full command reference.
+```
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/context/ && git commit -m "feat: context files for A2UI format, artifact conventions, researcher instructions"
+```
+
+---
+
+### Task 5: Visual artifact runtime (AI-generated inline visuals)
+
+A single universal runtime that executes AI-generated visualization code in a sandboxed iframe. Instead of fixed templates, the AI generates arbitrary React/HTML/JS code during conversation (Claude "builds visuals" style), and this runtime renders it live. Pre-loads common visualization libraries so the AI can use them immediately.
+
+**Files:**
+- Create: `bundle/apps/runtime.html`
+
+**Step 1: Create runtime.html**
+
+Create `bundle/apps/runtime.html`:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Pre-loaded libraries available to all AI-generated visuals -->
+  <link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9/dist/leaflet.css" rel="stylesheet">
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9/dist/leaflet.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>
+
+  <style>
+    body {
+      background: transparent;
+      margin: 0;
+      padding: 16px;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+    .theme-dark { color-scheme: dark; }
+    .visual-error {
+      color: #f7607a;
+      background: #2a1a1e;
+      border: 1px solid #4a2a3a;
+      border-radius: 8px;
+      padding: 1rem;
+      font-family: monospace;
+      font-size: 0.8rem;
+      white-space: pre-wrap;
+    }
+  </style>
+</head>
+<body class="theme-dark">
+  <div id="root"></div>
+
+  <script>
+    // --- MCP Apps JSON-RPC 2.0 bridge (pre-wired) ---
+    const mcpBridge = {
+      _pending: new Map(),
+
+      sendToHost(msg) {
+        window.parent.postMessage(msg, "*");
+      },
+
+      callTool(name, args) {
+        const id = crypto.randomUUID();
+        this.sendToHost({
+          jsonrpc: "2.0", id,
+          method: "tools/call",
+          params: { name, arguments: args },
+        });
+        return new Promise((resolve) => this._pending.set(id, resolve));
+      },
+
+      sendMessage(content) {
+        this.sendToHost({
+          jsonrpc: "2.0",
+          method: "ui/sendMessage",
+          params: { role: "user", content },
+        });
+      },
+
+      resize(height) {
+        this.sendToHost({
+          jsonrpc: "2.0",
+          method: "ui/resize",
+          params: { height: Math.min(height, 800) },
+        });
+      },
+    };
+
+    // --- Visual execution engine ---
+
+    function executeVisual(code, data) {
+      const root = document.getElementById("root");
+
+      try {
+        // Make data and bridge available to the generated code
+        window.__VISUAL_DATA__ = data || {};
+        window.__MCP__ = mcpBridge;
+
+        // Detect if the code contains JSX (look for < followed by a capital letter
+        // or common HTML tags used in React-like syntax)
+        const hasJSX = /<[A-Z]/.test(code) || /React\.createElement/.test(code);
+        const hasBabelType = /type\s*=\s*["']text\/babel["']/.test(code);
+
+        if (hasJSX || hasBabelType) {
+          // --- React/JSX path: compile with Babel, render to #root ---
+          const compiled = Babel.transform(code, {
+            presets: ["react"],
+            filename: "visual.jsx",
+          }).code;
+
+          // Wrap in a function that has access to React, ReactDOM, data, and bridge
+          const fn = new Function(
+            "React", "ReactDOM", "data", "mcp", "root",
+            compiled + "\n\n" +
+            "// Auto-render: if code defined a default export or App component\n" +
+            "if (typeof App !== 'undefined') {\n" +
+            "  ReactDOM.createRoot(root).render(React.createElement(App, { data, mcp }));\n" +
+            "}\n"
+          );
+          fn(React, ReactDOM, data, mcpBridge, root);
+        } else if (/<[a-z][\s\S]*>/i.test(code)) {
+          // --- HTML path: inject directly ---
+          root.innerHTML = code;
+
+          // Execute any <script> tags in the injected HTML
+          root.querySelectorAll("script").forEach((oldScript) => {
+            const newScript = document.createElement("script");
+            if (oldScript.src) {
+              newScript.src = oldScript.src;
+            } else {
+              // Wrap script body so it has access to data and bridge
+              newScript.textContent =
+                "(function(data, mcp) {\n" +
+                oldScript.textContent +
+                "\n})(window.__VISUAL_DATA__, window.__MCP__);";
+            }
+            oldScript.parentNode.replaceChild(newScript, oldScript);
+          });
+        } else {
+          // --- Plain JS path: execute as a script that manipulates #root ---
+          const fn = new Function("data", "mcp", "root", "Chart", "L", code);
+          fn(data, mcpBridge, root, window.Chart, window.L);
+        }
+
+        // Auto-resize after rendering
+        requestAnimationFrame(() => {
+          const height = Math.max(root.scrollHeight + 32, 100);
+          mcpBridge.resize(height);
+        });
+
+      } catch (err) {
+        root.innerHTML =
+          '<div class="visual-error">Visual render error:\n' +
+          err.message.replace(/</g, "&lt;") +
+          "</div>";
+        mcpBridge.resize(120);
+      }
+    }
+
+    // --- Listen for messages from the host ---
+
+    window.addEventListener("message", (e) => {
+      const msg = e.data;
+      if (!msg || typeof msg !== "object") return;
+
+      // Response to a tools/call we made
+      if (msg.id && mcpBridge._pending.has(msg.id)) {
+        mcpBridge._pending.get(msg.id)(msg.result);
+        mcpBridge._pending.delete(msg.id);
+        return;
+      }
+
+      // Host sends visual code to render
+      if (msg.method === "render") {
+        executeVisual(msg.params?.code || "", msg.params?.data || {});
+        return;
+      }
+
+      // Legacy: tool/input for backwards compatibility with MCP App protocol
+      if (msg.method === "tool/input") {
+        // If params has a `code` field, treat as a visual render
+        if (msg.params?.code) {
+          executeVisual(msg.params.code, msg.params.data || {});
+        }
+      }
+    });
+
+    // Tell the host we're ready
+    mcpBridge.sendToHost({
+      jsonrpc: "2.0",
+      method: "ui/initialize",
+      params: { runtime: "visual-artifact", version: "1.0.0" },
+    });
+  </script>
+</body>
+</html>
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/apps/runtime.html && git commit -m "feat: visual artifact runtime for AI-generated inline visualizations"
+```
+
+---
+
+### Task 6: Visual artifacts agent context file
+
+This context file teaches the researcher agent HOW to generate inline visuals — Claude "builds visuals" style. The agent generates arbitrary React/HTML/JS code on the fly, not from fixed templates. The context includes when to generate visuals, what libraries are available, the output format, 5 complete working example patterns, and constraints.
+
+**Files:**
+- Create: `bundle/context/visual-artifacts.md`
+
+**Step 1: Create the visual artifacts context file**
+
+Create `bundle/context/visual-artifacts.md`:
+
+````markdown
+# Inline Visual Artifacts
+
+You can generate interactive visualizations inline in your messages by writing
+code in a `visual` fenced code block. The frontend renders the code live in
+a sandboxed iframe with pre-loaded libraries.
+
+## When to Generate a Visual
+
+Be proactive. Generate a visual when:
+- **Comparing options**: product comparison tables, feature matrices, pros/cons
+- **Showing trends**: price history, ratings over time, market data
+- **Displaying locations**: dealer maps, store finders, event venues
+- **Scoring/ranking**: decision matrices, weighted scoring tables
+- **Budget breakdowns**: cost comparisons, price distributions
+- **Dashboards**: multi-metric summaries with charts + stats + tables
+
+Don't wait to be asked. If you have structured data that would benefit from
+a visual, generate one.
+
+## Available Libraries (pre-loaded in the runtime)
+
+These are loaded and ready to use — no imports needed:
+
+| Library | Global | Version | Use for |
+|---------|--------|---------|---------|
+| **Tabler CSS** | CSS classes | 1.0.0-beta20 | Cards, tables, badges, buttons, forms, grid, dark theme |
+| **Chart.js** | `Chart` | 4.x | Bar, line, pie, radar, doughnut, scatter, polar area charts |
+| **Leaflet.js** | `L` | 1.9 | Maps with markers, popups, tile layers (CARTO dark tiles) |
+| **React** | `React` | 19 | Interactive components with state |
+| **ReactDOM** | `ReactDOM` | 19 | Rendering React components |
+| **Babel** | (automatic) | 7.x | JSX compilation (used automatically when JSX detected) |
+
+## Output Format
+
+Write the visual as a fenced code block with the `visual` language tag,
+containing a JSON object with `title`, `code`, and optionally `data` and `height`:
+
+~~~
+```visual
+{
+  "title": "Price Comparison",
+  "code": "<your complete HTML, JSX, or JS code here>",
+  "data": { "items": [...] },
+  "height": 400
+}
+```
+~~~
+
+### Fields
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `title` | Yes | Display title shown above the visual |
+| `code` | Yes | The complete code to execute (HTML, JSX, or plain JS) |
+| `data` | No | Structured data object passed to the code as `data` |
+| `height` | No | Initial iframe height in pixels (default: 300, max: 800) |
+
+### Code Formats
+
+The runtime auto-detects the code format:
+
+1. **React/JSX** (contains `<ComponentName` or `React.createElement`): Compiled with Babel, rendered to `#root`. Define an `App` component and it auto-renders.
+2. **HTML** (contains `<div`, `<table`, etc.): Injected directly into `#root`. Script tags execute with `data` and `mcp` in scope.
+3. **Plain JS** (anything else): Executed as a function with `data`, `mcp`, `root`, `Chart`, `L` as parameters.
+
+### Available in Code Scope
+
+| Variable | Type | Description |
+|----------|------|-------------|
+| `data` | Object | The `data` field from the visual JSON block |
+| `mcp` | Object | MCP bridge: `mcp.sendMessage(text)`, `mcp.callTool(name, args)`, `mcp.resize(height)` |
+| `root` | Element | The `#root` DOM element (for plain JS path) |
+| `Chart` | Class | Chart.js constructor (for plain JS path) |
+| `L` | Object | Leaflet.js namespace (for plain JS path) |
+
+## Example Patterns
+
+### 1. Comparison Table (HTML + Tabler CSS)
+
+```visual
+{
+  "title": "Hybrid Cars Under $10K",
+  "code": "<div class=\"card\"><div class=\"table-responsive\"><table class=\"table table-hover table-striped\"><thead><tr><th>Model</th><th>Year</th><th>Price</th><th>Miles</th><th>MPG</th><th>Source</th></tr></thead><tbody id=\"rows\"></tbody></table></div></div><script>const rows = data.items.map(item => `<tr><td><strong>${item.model}</strong></td><td>${item.year}</td><td style=\"color:#7af7a2;font-weight:600\">${item.price}</td><td>${item.miles}</td><td>${item.mpg}</td><td><a href=\"${item.url}\" style=\"color:#7aa2f7\" target=\"_blank\">${item.source}</a></td></tr>`).join('');document.getElementById('rows').innerHTML = rows;</script>",
+  "data": {
+    "items": [
+      {"model": "Toyota Prius", "year": 2015, "price": "$7,800", "miles": "82K", "mpg": "51", "source": "CarGurus", "url": "#"},
+      {"model": "Honda Civic Hybrid", "year": 2014, "price": "$6,200", "miles": "95K", "mpg": "44", "source": "Craigslist", "url": "#"},
+      {"model": "Toyota Camry Hybrid", "year": 2013, "price": "$8,500", "miles": "78K", "mpg": "41", "source": "AutoTrader", "url": "#"},
+      {"model": "Ford Fusion Hybrid", "year": 2014, "price": "$5,900", "miles": "110K", "mpg": "42", "source": "Cars.com", "url": "#"}
+    ]
+  },
+  "height": 280
+}
+```
+
+### 2. Bar Chart (Plain JS + Chart.js)
+
+```visual
+{
+  "title": "Price Comparison by Model",
+  "code": "const canvas = document.createElement('canvas'); root.appendChild(canvas); new Chart(canvas.getContext('2d'), { type: 'bar', data: { labels: data.labels, datasets: [{ label: data.datasetLabel, data: data.values, backgroundColor: 'rgba(122,162,247,0.6)', borderColor: 'rgba(122,162,247,1)', borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { labels: { color: '#c0c0d0' } }, title: { display: true, text: data.title, color: '#e0e0e0' } }, scales: { x: { ticks: { color: '#8888aa' }, grid: { color: '#1e2a4a' } }, y: { ticks: { color: '#8888aa' }, grid: { color: '#1e2a4a' } } }, onClick: (_, els) => { if (els.length) mcp.sendMessage('Tell me more about ' + data.labels[els[0].index]); } } });",
+  "data": {
+    "title": "Asking Price ($)",
+    "datasetLabel": "Price",
+    "labels": ["Prius", "Civic Hybrid", "Camry Hybrid", "Fusion Hybrid", "Insight"],
+    "values": [7800, 6200, 8500, 5900, 4800]
+  },
+  "height": 380
+}
+```
+
+### 3. Location Map (Plain JS + Leaflet)
+
+```visual
+{
+  "title": "Dealers Near Woodinville, WA",
+  "code": "root.style.height = '340px'; const map = L.map(root).setView(data.center, data.zoom); L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: 'CARTO', maxZoom: 18 }).addTo(map); data.markers.forEach(m => { const marker = L.marker([m.lat, m.lng]).addTo(map); marker.bindPopup(`<b>${m.title}</b><br>${m.description || ''}<br><span style='color:#7af7a2'>${m.price || ''}</span>`); marker.on('click', () => mcp.sendMessage('Tell me about ' + m.title)); }); if (data.markers.length > 1) map.fitBounds(data.markers.map(m => [m.lat, m.lng]), { padding: [30, 30] });",
+  "data": {
+    "center": [47.76, -122.16],
+    "zoom": 11,
+    "markers": [
+      {"lat": 47.758, "lng": -122.164, "title": "Toyota of Kirkland", "description": "Certified pre-owned", "price": "$7,800"},
+      {"lat": 47.81, "lng": -122.20, "title": "Honda of Bothell", "description": "Used inventory", "price": "$6,200"},
+      {"lat": 47.68, "lng": -122.12, "title": "CarMax Bellevue", "description": "Multi-brand", "price": "Various"}
+    ]
+  },
+  "height": 380
+}
+```
+
+### 4. React Dashboard (JSX)
+
+```visual
+{
+  "title": "Research Summary Dashboard",
+  "code": "function StatCard({ label, value, color }) { return React.createElement('div', { className: 'card', style: { flex: 1, minWidth: 140 } }, React.createElement('div', { className: 'card-body', style: { padding: '1rem' } }, React.createElement('div', { style: { fontSize: '0.75rem', color: '#8888aa', textTransform: 'uppercase' } }, label), React.createElement('div', { style: { fontSize: '1.5rem', fontWeight: 700, color: color || '#e0e0e0' } }, value))); } function App({ data }) { const [sort, setSort] = React.useState('price'); const sorted = [...data.items].sort((a, b) => sort === 'price' ? a.priceNum - b.priceNum : a.miles - b.miles); return React.createElement('div', null, React.createElement('div', { style: { display: 'flex', gap: '0.5rem', marginBottom: '1rem' } }, React.createElement(StatCard, { label: 'Options Found', value: data.items.length, color: '#7aa2f7' }), React.createElement(StatCard, { label: 'Avg Price', value: '$' + Math.round(data.items.reduce((s, i) => s + i.priceNum, 0) / data.items.length).toLocaleString(), color: '#7af7a2' }), React.createElement(StatCard, { label: 'Price Range', value: '$' + Math.min(...data.items.map(i => i.priceNum)).toLocaleString() + ' - $' + Math.max(...data.items.map(i => i.priceNum)).toLocaleString() })), React.createElement('div', { style: { marginBottom: '0.5rem' } }, React.createElement('button', { onClick: () => setSort('price'), className: 'btn btn-sm ' + (sort === 'price' ? 'btn-primary' : 'btn-outline-secondary'), style: { marginRight: 4 } }, 'Sort by Price'), React.createElement('button', { onClick: () => setSort('miles'), className: 'btn btn-sm ' + (sort === 'miles' ? 'btn-primary' : 'btn-outline-secondary') }, 'Sort by Miles')), React.createElement('div', { className: 'table-responsive' }, React.createElement('table', { className: 'table table-hover' }, React.createElement('thead', null, React.createElement('tr', null, ['Model', 'Price', 'Miles', 'Source'].map(h => React.createElement('th', { key: h }, h)))), React.createElement('tbody', null, sorted.map((item, i) => React.createElement('tr', { key: i, onClick: () => mcp.sendMessage('Tell me more about ' + item.model), style: { cursor: 'pointer' } }, React.createElement('td', null, React.createElement('strong', null, item.model)), React.createElement('td', { style: { color: '#7af7a2' } }, item.price), React.createElement('td', null, item.milesStr), React.createElement('td', null, item.source))))))); }",
+  "data": {
+    "items": [
+      {"model": "2015 Prius", "price": "$7,800", "priceNum": 7800, "miles": 82000, "milesStr": "82K", "source": "CarGurus"},
+      {"model": "2014 Civic Hybrid", "price": "$6,200", "priceNum": 6200, "miles": 95000, "milesStr": "95K", "source": "Craigslist"},
+      {"model": "2013 Camry Hybrid", "price": "$8,500", "priceNum": 8500, "miles": 78000, "milesStr": "78K", "source": "AutoTrader"},
+      {"model": "2014 Fusion Hybrid", "price": "$5,900", "priceNum": 5900, "miles": 110000, "milesStr": "110K", "source": "Cars.com"}
+    ]
+  },
+  "height": 450
+}
+```
+
+### 5. Decision Matrix (HTML + interactive weight sliders)
+
+```visual
+{
+  "title": "Car Decision Matrix",
+  "code": "<style>.matrix-table th, .matrix-table td { padding: 0.4rem 0.6rem; text-align: center; } .matrix-table th { color: #8888aa; font-size: 0.75rem; text-transform: uppercase; } .score-cell { font-weight: 600; } .best { color: #7af7a2; } .weight-slider { width: 80px; accent-color: #7aa2f7; }</style><div class=\"card\"><div class=\"card-body\"><div id=\"weights-row\" style=\"display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap\"></div><div class=\"table-responsive\"><table class=\"table table-hover matrix-table\" id=\"matrix\"></table></div></div></div><script>const criteria = data.criteria; const options = data.options; let weights = criteria.map(c => c.weight); function render() { const total = weights.reduce((s,w) => s+w, 0) || 1; const norm = weights.map(w => w/total); let html = '<thead><tr><th>Option</th>'; criteria.forEach((c,i) => html += `<th>${c.name} (${Math.round(norm[i]*100)}%)</th>`); html += '<th>Score</th></tr></thead><tbody>'; const scores = options.map(opt => { let s = 0; opt.scores.forEach((v,i) => s += v * norm[i]); return s; }); const maxScore = Math.max(...scores); options.forEach((opt,oi) => { const isMax = scores[oi] === maxScore; html += `<tr><td style=\"text-align:left\"><strong>${opt.name}</strong></td>`; opt.scores.forEach(s => html += `<td class=\"score-cell\">${s}/10</td>`); html += `<td class=\"score-cell ${isMax ? 'best' : ''}\" style=\"font-size:1.1rem\">${scores[oi].toFixed(1)}</td></tr>`; }); html += '</tbody>'; document.getElementById('matrix').innerHTML = html; } const wr = document.getElementById('weights-row'); criteria.forEach((c,i) => { const label = document.createElement('label'); label.style.cssText = 'font-size:0.75rem;color:#aaa;display:flex;flex-direction:column;align-items:center'; label.textContent = c.name; const slider = document.createElement('input'); slider.type = 'range'; slider.min = 0; slider.max = 10; slider.value = weights[i]; slider.className = 'weight-slider'; slider.oninput = () => { weights[i] = +slider.value; render(); }; label.appendChild(slider); wr.appendChild(label); }); render();</script>",
+  "data": {
+    "criteria": [
+      {"name": "Price", "weight": 8},
+      {"name": "MPG", "weight": 7},
+      {"name": "Reliability", "weight": 9},
+      {"name": "Cargo", "weight": 4},
+      {"name": "Comfort", "weight": 5}
+    ],
+    "options": [
+      {"name": "2015 Prius", "scores": [7, 10, 9, 5, 6]},
+      {"name": "2014 Civic Hybrid", "scores": [8, 8, 8, 6, 7]},
+      {"name": "2013 Camry Hybrid", "scores": [6, 7, 9, 8, 9]},
+      {"name": "2014 Fusion Hybrid", "scores": [9, 7, 6, 7, 8]}
+    ]
+  },
+  "height": 400
+}
+```
+
+## Constraints
+
+- **Self-contained**: All code must work without external API calls or fetches.
+  Data comes from the `data` field or is hardcoded in the code.
+- **Dark theme always**: Use Tabler's `.theme-dark` classes. Background is
+  transparent (inherits from runtime). Text should be light (#e0e0e0).
+- **Responsive width**: Visuals fill the available width. Use percentage widths
+  and `max-width` where appropriate.
+- **Max height**: Specify `height` in the JSON block (default 300, max 800).
+  The runtime auto-resizes based on content.
+- **No external fetches**: Don't call APIs from within the visual. All data
+  must be passed via the `data` field.
+- **Click-to-explore**: When users click interactive elements (chart bars,
+  table rows, map markers), call `mcp.sendMessage("Tell me more about X")`
+  to inject a follow-up question into the chat.
+
+## When to Use Visuals vs A2UI
+
+| Need | Use |
+|------|-----|
+| Toggle filters, simple form inputs | A2UI blocks |
+| Static data table (< 5 rows) | A2UI table block |
+| Interactive chart with click events | `visual` block |
+| Sortable table with many rows | `visual` block |
+| Side-by-side product comparison | `visual` block |
+| Location map with markers | `visual` block |
+| Multi-metric dashboard | `visual` block |
+| Decision matrix with adjustable weights | `visual` block |
+````
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/context/visual-artifacts.md && git commit -m "feat: visual artifacts context file with 5 example patterns for AI-generated visuals"
+```
+
+---
+
+### Task 7: Verify bundle structure and visual artifact references
+
+The researcher agent definition references `@mention bundle/context/visual-artifacts.md` (from Task 3). This task verifies the agent can be loaded, the bundle structure is valid, and all @mention references resolve.
+
+**Files:**
+- Verify: `bundle/agents/researcher.md` (updated in Task 3 with inline visuals section)
+- Verify: `bundle/apps/runtime.html` (created in Task 5)
+- Verify: `bundle/context/visual-artifacts.md` (created in Task 6)
+
+**Step 1: Verify bundle directory structure**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+find bundle/ -type f | sort
+```
+
+Expected output:
+```
+bundle/agents/researcher.md
+bundle/apps/runtime.html
+bundle/behaviors/research-workbench.yaml
+bundle/bundle.md
+bundle/context/a2ui-format.md
+bundle/context/artifact-conventions.md
+bundle/context/researcher-instructions.md
+bundle/context/visual-artifacts.md
+```
+
+**Step 2: Verify all @mention references resolve**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+# Check that all @mention targets exist
+grep -rh '@mention' bundle/ | sed 's/.*@mention //' | while read ref; do
+  # Convert bundle reference to file path
+  path="bundle/$(echo "$ref" | sed 's|^bundle/||').md"
+  if [ -f "$path" ]; then
+    echo "OK: $path"
+  else
+    echo "MISSING: $path (from @mention $ref)"
+  fi
+done
+```
+
+Expected: All references resolve to OK. Specifically:
+- `bundle/context/a2ui-format.md` — OK
+- `bundle/context/artifact-conventions.md` — OK
+- `bundle/context/visual-artifacts.md` — OK
+- `bundle/context/researcher-instructions.md` — OK (via behavior include)
+
+**Step 3: Verify runtime.html loads the expected libraries**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+# Quick sanity check that runtime.html references all expected CDN libraries
+grep -c 'chart.js' bundle/apps/runtime.html && \
+grep -c 'leaflet' bundle/apps/runtime.html && \
+grep -c 'react@19' bundle/apps/runtime.html && \
+grep -c 'babel/standalone' bundle/apps/runtime.html && \
+echo "All libraries referenced in runtime.html"
+```
+
+Expected: 4 counts (one per library family) and "All libraries referenced".
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add bundle/ && git commit -m "feat: complete bundle with visual artifact runtime and context"
+```
+
+---
+
+### Task 8: Browser panel component (noVNC iframe)
+
+**Files:**
+- Create: `frontend/src/components/BrowserPanel.tsx`
+
+**Step 1: Create the browser panel**
+
+Create `frontend/src/components/BrowserPanel.tsx`:
+
+```tsx
+/**
+ * Browser panel: embeds a noVNC iframe showing the live Playwright browser.
+ *
+ * In production (behind cloudflared): points to vnc.ampbox.io
+ * In local dev (Docker): points to localhost:6080
+ * The URL is determined by the current hostname.
+ */
+
+interface BrowserPanelProps {
+  sessionId: string | null;
+}
+
+function getVncUrl(): string {
+  const hostname = window.location.hostname;
+
+  // Production: behind cloudflared
+  if (hostname === "research.ampbox.io") {
+    return "https://vnc.ampbox.io/vnc.html?autoconnect=true&resize=remote&quality=6&compression=2";
+  }
+
+  // Local Docker: noVNC on port 6080
+  return `http://${hostname}:6080/vnc.html?autoconnect=true&resize=remote&quality=6&compression=2`;
+}
+
+export function BrowserPanel({ sessionId }: BrowserPanelProps) {
+  if (!sessionId) {
+    return (
+      <div style={{ padding: "2rem", color: "#6a6a8a", textAlign: "center" }}>
+        Select a session to view the browser
+      </div>
+    );
+  }
+
+  return (
+    <iframe
+      src={getVncUrl()}
+      title="Browser - noVNC"
+      style={{
+        width: "100%",
+        height: "100%",
+        border: "none",
+        backgroundColor: "#0a0a1a",
+      }}
+      allow="clipboard-read; clipboard-write"
+    />
+  );
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/BrowserPanel.tsx && git commit -m "feat: browser panel with noVNC iframe"
+```
+
+---
+
+### Task 9: Artifacts panel component
+
+**Files:**
+- Create: `frontend/src/components/ArtifactsPanel.tsx`
+
+**Step 1: Create the artifacts panel**
+
+Create `frontend/src/components/ArtifactsPanel.tsx`:
+
+```tsx
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { IconFileText, IconRefresh } from "@tabler/icons-react";
+import { useArtifacts } from "../hooks/useArtifacts";
+
+interface ArtifactsPanelProps {
+  sessionId: string | null;
+}
+
+export function ArtifactsPanel({ sessionId }: ArtifactsPanelProps) {
+  const { artifacts, activeArtifact, refresh, loadArtifact } = useArtifacts(sessionId);
+
+  // Refresh artifact list when session changes
+  useEffect(() => {
+    if (sessionId) refresh();
+  }, [sessionId, refresh]);
+
+  if (!sessionId) {
+    return (
+      <div style={{ padding: "2rem", color: "#6a6a8a", textAlign: "center" }}>
+        Select a session to view artifacts
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      {/* Artifact list header */}
+      <div
+        style={{
+          padding: "0.5rem 0.75rem",
+          borderBottom: "1px solid #2a2a4a",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span style={{ fontSize: "0.8rem", color: "#8888aa" }}>
+          {artifacts.length} artifact{artifacts.length !== 1 ? "s" : ""}
+        </span>
+        <button
+          onClick={refresh}
+          style={{
+            background: "none",
+            border: "none",
+            color: "#7aa2f7",
+            cursor: "pointer",
+            padding: "2px",
+          }}
+          title="Refresh"
+        >
+          <IconRefresh size={16} />
+        </button>
+      </div>
+
+      {/* Artifact tabs */}
+      {artifacts.length > 0 && (
+        <div
+          style={{
+            display: "flex",
+            gap: "2px",
+            padding: "0.3rem 0.5rem",
+            overflowX: "auto",
+            borderBottom: "1px solid #2a2a4a",
+          }}
+        >
+          {artifacts.map((a) => (
+            <button
+              key={a.name}
+              onClick={() => loadArtifact(a.name)}
+              style={{
+                background:
+                  activeArtifact?.name === a.name ? "#2a3a5a" : "transparent",
+                border: "none",
+                color: activeArtifact?.name === a.name ? "#ffffff" : "#8888aa",
+                padding: "0.3rem 0.6rem",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "0.75rem",
+                whiteSpace: "nowrap",
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+              }}
+            >
+              <IconFileText size={14} />
+              {a.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Artifact content */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "1rem",
+        }}
+      >
+        {activeArtifact ? (
+          <div className="chat-message assistant">
+            <ReactMarkdown>{activeArtifact.content}</ReactMarkdown>
+          </div>
+        ) : artifacts.length > 0 ? (
+          <div style={{ color: "#6a6a8a", textAlign: "center", paddingTop: "2rem" }}>
+            Click an artifact tab to view it
+          </div>
+        ) : (
+          <div style={{ color: "#6a6a8a", textAlign: "center", paddingTop: "2rem" }}>
+            No artifacts yet. The researcher will create them during research.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/ArtifactsPanel.tsx && git commit -m "feat: artifacts panel with tabbed markdown rendering"
+```
+
+---
+
+### Task 10: A2UI renderer component
+
+Parses `a2ui` JSON code blocks from assistant messages and renders them as interactive Tabler components.
+
+**Files:**
+- Create: `frontend/src/components/A2UIRenderer.tsx`
+
+**Step 1: Create the A2UI renderer**
+
+Create `frontend/src/components/A2UIRenderer.tsx`:
+
+```tsx
+import type { A2UIBlock } from "../lib/types";
+import { IconFilter, IconTable, IconCards, IconForms } from "@tabler/icons-react";
+
+interface A2UIRendererProps {
+  block: A2UIBlock;
+  onAction?: (action: string, data: Record<string, unknown>) => void;
+}
+
+export function A2UIRenderer({ block, onAction }: A2UIRendererProps) {
+  switch (block.type) {
+    case "filters":
+      return (
+        <div className="tool-call-card" style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap", alignItems: "center" }}>
+          <IconFilter size={16} style={{ color: "#7aa2f7", marginRight: 4 }} />
+          {block.options.map((opt, i) => (
+            <button
+              key={i}
+              onClick={() => onAction?.("filter_toggle", { label: opt.label, active: !opt.active })}
+              style={{
+                padding: "0.3rem 0.6rem",
+                borderRadius: "12px",
+                border: "1px solid",
+                borderColor: opt.active ? "#5a7aba" : "#3a3a5a",
+                backgroundColor: opt.active ? "#2a3a6a" : "transparent",
+                color: opt.active ? "#ffffff" : "#8888aa",
+                cursor: "pointer",
+                fontSize: "0.8rem",
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      );
+
+    case "table":
+      return (
+        <div className="tool-call-card" style={{ overflowX: "auto" }}>
+          <div style={{ marginBottom: "0.4rem", display: "flex", alignItems: "center", gap: 4 }}>
+            <IconTable size={16} style={{ color: "#7aa2f7" }} />
+            <span style={{ fontSize: "0.8rem", color: "#8888aa" }}>Data Table</span>
+          </div>
+          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.8rem" }}>
+            <thead>
+              <tr>
+                {block.headers.map((h, i) => (
+                  <th
+                    key={i}
+                    style={{
+                      textAlign: "left",
+                      padding: "0.3rem 0.5rem",
+                      borderBottom: "1px solid #2a2a4a",
+                      color: "#aaaacc",
+                      fontWeight: 600,
+                    }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {block.rows.map((row, ri) => (
+                <tr key={ri}>
+                  {row.map((cell, ci) => (
+                    <td
+                      key={ci}
+                      style={{
+                        padding: "0.3rem 0.5rem",
+                        borderBottom: "1px solid #1a1a2e",
+                        color: "#c0c0d0",
+                      }}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+
+    case "cards":
+      return (
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "0.5rem", margin: "0.5rem 0" }}>
+          {block.items.map((item, i) => (
+            <div
+              key={i}
+              className="tool-call-card"
+              style={{ cursor: item.url ? "pointer" : "default" }}
+              onClick={() => item.url && window.open(item.url, "_blank")}
+            >
+              <div style={{ fontWeight: 600, color: "#e0e0e0", marginBottom: 4 }}>{item.title}</div>
+              {item.price && (
+                <div style={{ color: "#7af7a2", fontWeight: 600, fontSize: "0.9rem" }}>{item.price}</div>
+              )}
+              {item.description && (
+                <div style={{ color: "#8888aa", fontSize: "0.75rem", marginTop: 4 }}>{item.description}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      );
+
+    case "form":
+      return (
+        <div className="tool-call-card">
+          <div style={{ marginBottom: "0.5rem", display: "flex", alignItems: "center", gap: 4 }}>
+            <IconForms size={16} style={{ color: "#7aa2f7" }} />
+            <span style={{ fontSize: "0.8rem", color: "#8888aa" }}>Input Form</span>
+          </div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget);
+              const data: Record<string, unknown> = {};
+              formData.forEach((v, k) => (data[k] = v));
+              onAction?.("form_submit", data);
+            }}
+            style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}
+          >
+            {block.fields.map((field) => (
+              <div key={field.name}>
+                <label style={{ fontSize: "0.75rem", color: "#8888aa", display: "block", marginBottom: 2 }}>
+                  {field.label || field.name}
+                </label>
+                {field.type === "select" ? (
+                  <select
+                    name={field.name}
+                    defaultValue={String(field.value ?? "")}
+                    style={{
+                      width: "100%",
+                      padding: "0.3rem",
+                      backgroundColor: "#1e2a4a",
+                      border: "1px solid #3a3a5a",
+                      borderRadius: "4px",
+                      color: "#e0e0e0",
+                      fontSize: "0.8rem",
+                    }}
+                  >
+                    {field.options?.map((opt) => (
+                      <option key={opt} value={opt}>{opt}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    name={field.name}
+                    type={field.type}
+                    defaultValue={String(field.value ?? "")}
+                    style={{
+                      width: "100%",
+                      padding: "0.3rem",
+                      backgroundColor: "#1e2a4a",
+                      border: "1px solid #3a3a5a",
+                      borderRadius: "4px",
+                      color: "#e0e0e0",
+                      fontSize: "0.8rem",
+                      boxSizing: "border-box",
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+            <button
+              type="submit"
+              style={{
+                padding: "0.4rem 0.8rem",
+                backgroundColor: "#3a5aba",
+                color: "white",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "0.8rem",
+                marginTop: "0.3rem",
+                alignSelf: "flex-start",
+              }}
+            >
+              {block.submitLabel || "Submit"}
+            </button>
+          </form>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Parse A2UI blocks from message content.
+ * Looks for ```a2ui ... ``` fenced code blocks and extracts the JSON.
+ */
+export function parseA2UIBlocks(content: string): A2UIBlock[] {
+  const blocks: A2UIBlock[] = [];
+  const regex = /```a2ui\s*\n([\s\S]*?)```/g;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    try {
+      const parsed = JSON.parse(match[1].trim());
+      if (parsed && parsed.type) {
+        blocks.push(parsed as A2UIBlock);
+      }
+    } catch {
+      // Skip unparseable blocks
+    }
+  }
+  return blocks;
+}
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/A2UIRenderer.tsx && git commit -m "feat: A2UI renderer for filters, tables, cards, forms"
+```
+
+---
+
+### Task 11: Wire up RightPanel and integrate A2UI + visual blocks into ChatPanel
+
+**Files:**
+- Modify: `frontend/src/components/RightPanel.tsx`
+- Modify: `frontend/src/components/ChatPanel.tsx`
+
+**Step 1: Update RightPanel with real Browser and Artifacts components**
+
+Replace `frontend/src/components/RightPanel.tsx` with:
+
+```tsx
+import { useState } from "react";
+import { BrowserPanel } from "./BrowserPanel";
+import { ArtifactsPanel } from "./ArtifactsPanel";
+
+interface RightPanelProps {
+  sessionId: string | null;
+}
+
+export function RightPanel({ sessionId }: RightPanelProps) {
+  const [activeTab, setActiveTab] = useState<"browser" | "artifacts">("browser");
+
+  return (
+    <div className="right-panel">
+      <div className="right-panel-tabs">
+        <button
+          className={activeTab === "browser" ? "active" : ""}
+          onClick={() => setActiveTab("browser")}
+        >
+          Browser
+        </button>
+        <button
+          className={activeTab === "artifacts" ? "active" : ""}
+          onClick={() => setActiveTab("artifacts")}
+        >
+          Artifacts
+        </button>
+      </div>
+      <div className="right-panel-content">
+        {activeTab === "browser" ? (
+          <BrowserPanel sessionId={sessionId} />
+        ) : (
+          <ArtifactsPanel sessionId={sessionId} />
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+**Step 2: Update ChatPanel to render A2UI blocks and visual blocks**
+
+In `frontend/src/components/ChatPanel.tsx`, add the A2UI import and rendering. Replace the message rendering section inside the `messages.map()` where assistant messages are rendered. Specifically, after the `<ReactMarkdown>` call, add A2UI parsing:
+
+Add this import at the top:
+```tsx
+import { A2UIRenderer, parseA2UIBlocks } from "./A2UIRenderer";
+```
+
+Then in the assistant message rendering block (inside `messages.map`), replace:
+```tsx
+{msg.role === "assistant" ? (
+  <>
+    <ReactMarkdown>{msg.content}</ReactMarkdown>
+    {msg.toolCalls?.map((tc) => (
+      <ToolCallCard key={tc.id} toolCall={tc} />
+    ))}
+  </>
+```
+
+With:
+```tsx
+{msg.role === "assistant" ? (
+  <>
+    <ReactMarkdown>{msg.content}</ReactMarkdown>
+    {parseA2UIBlocks(msg.content).map((block, i) => (
+      <A2UIRenderer
+        key={i}
+        block={block}
+        onAction={(action, data) => {
+          // Send A2UI interaction back as user message
+          onSend(`[${action}] ${JSON.stringify(data)}`);
+        }}
+      />
+    ))}
+    {msg.toolCalls?.map((tc) => (
+      <ToolCallCard key={tc.id} toolCall={tc} />
+    ))}
+  </>
+```
+
+**Step 3: Verify the build compiles**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench/frontend
+npm run build 2>&1 | tail -10
+```
+
+Expected: Build succeeds.
+
+**Step 4: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add frontend/src/components/ && git commit -m "feat: wire RightPanel with Browser + Artifacts, add A2UI rendering to chat"
+```
+
+---
+
+### Task 12: Docker Compose for local development
+
+**Files:**
+- Create: `docker-compose.yml`
+
+**Step 1: Create docker-compose.yml**
+
+Create `docker-compose.yml`:
+
+```yaml
+# Local development: docker compose up
+# Builds and runs the all-in-one container.
+#
+# Before running:
+#   1. Build the frontend: cd frontend && npm run build
+#   2. Set your API key: export ANTHROPIC_API_KEY=sk-...
+#   3. Generate a password hash: python -c "import bcrypt; print(bcrypt.hashpw(b'YOUR_PASSWORD', bcrypt.gensalt()).decode())"
+
+services:
+  workbench:
+    build: .
+    ports:
+      - "8080:8080"   # Web UI
+      - "6080:6080"   # noVNC browser view
+    environment:
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+      - AUTH_USER=${AUTH_USER:-admin@localhost}
+      - AUTH_PASS_HASH=${AUTH_PASS_HASH}
+      - DISPLAY=:99
+    volumes:
+      - ./artifacts:/app/artifacts   # Persist artifacts across restarts
+    restart: unless-stopped
+```
+
+**Step 2: Commit**
+
+Run:
+```bash
+cd /home/ken/workspace/research-workbench
+git add docker-compose.yml && git commit -m "feat: docker-compose.yml for local development"
+```
+
+---
+
+## Cross-Phase Dependencies
+
+The visual artifact system introduced in Tasks 5-6 requires coordinating changes across all three phases. These are notes for the implementer:
+
+### Phase 1 Backend (already handled)
+
+The backend already serves `GET /api/apps/{app_name}` which reads HTML files from `bundle/apps/`. Since we replaced 4 template files with a single `runtime.html`, the endpoint continues to work — the frontend will request `/api/apps/runtime` and get `runtime.html`.
+
+The AG-UI adapter already passes through `_meta.ui` and `structuredContent` from tool results. No changes needed.
+
+### Phase 2 Frontend (needs updating when implementing Phase 3)
+
+The `MCPAppRenderer` component (Phase 2, Task 9) and `ChatPanel` (Phase 2, Tasks 7 + 10) need these updates to support `visual` code blocks:
+
+1. **Detect `visual` code blocks in assistant messages**: Add a `parseVisualBlocks(content)` function (similar to `parseA2UIBlocks`) that extracts `` ```visual `` fenced code blocks and parses the JSON (`{ title, code, data, height }`).
+
+2. **Create a `VisualBlock` wrapper component** that:
+   - Displays the visual's `title` in a header bar
+   - Loads `runtime.html` from `/api/apps/runtime` via the existing `MCPAppRenderer`
+   - After the iframe signals `ui/initialize`, sends the `render` method via postMessage with the visual's `code` and `data`
+   - Supports a "pop out" button to open the visual in a full browser tab
+   - Supports a "view source" toggle to show the generated code
+
+3. **Wire `VisualBlock` into `ChatPanel`**: After A2UI blocks, render any detected visual blocks from the assistant message content.
+
+4. **Update `MCPAppRenderer`**: Add support for the `render` postMessage method (in addition to existing `tool/input`). When the iframe sends `ui/initialize` with `runtime: "visual-artifact"`, send `{ method: "render", params: { code, data } }` instead of `{ method: "tool/input", params: data }`.
+
+These updates should be implemented during Phase 3 Task 11 (which already modifies `ChatPanel.tsx`).
+
+---
+
+## Phase 3 Complete
+
+At this point you have:
+- **Bundle**: Thin root including foundation, with researcher agent, A2UI format spec, artifact conventions, and visual artifact generation context
+- **Visual artifact runtime**: Single `runtime.html` that executes arbitrary AI-generated React/HTML/JS code in a sandboxed iframe with pre-loaded Chart.js, Leaflet, React 19, Babel, and Tabler CSS
+- **Visual artifacts context**: Agent instructions with 5 complete example patterns (comparison table, bar chart, location map, React dashboard, decision matrix with interactive weight sliders)
+- **Browser panel**: noVNC iframe with auto-detection of production vs local URLs
+- **Artifacts panel**: Tabbed markdown rendering of per-session artifacts
+- **A2UI renderer**: Interactive filters, tables, cards, and forms from agent-generated JSON
+- **Docker Compose**: One-command local deployment
+
+**The AI-generated visuals flow:**
+
+```
+Agent writes a ```visual code block in its message
+  -> Frontend detects the visual block, parses JSON { title, code, data, height }
+    -> VisualBlock component loads runtime.html from /api/apps/runtime
+      -> After iframe ready (ui/initialize), sends { method: "render", params: { code, data } }
+        -> runtime.html receives code, auto-detects format (JSX/HTML/JS)
+          -> Compiles JSX via Babel if needed, executes code with data in scope
+            -> Renders interactive chart/table/map/dashboard in the iframe
+              -> User clicks elements -> mcp.sendMessage() injects follow-up into chat
+```
+
+**Full deployment flow:**
+
+```bash
+# 1. Build frontend
+cd frontend && npm run build && cd ..
+
+# 2. Build and run Docker container
+export ANTHROPIC_API_KEY=sk-...
+export AUTH_USER=ken@example.com
+export AUTH_PASS_HASH=$(python3 -c "import bcrypt; print(bcrypt.hashpw(b'mypassword', bcrypt.gensalt()).decode())")
+docker compose up --build
+
+# 3. Open http://localhost:8080
+# 4. Log in with your credentials
+# 5. Create a session and start researching!
+```
+
+**Production deployment (vela0 + cloudflared):**
+
+The container exposes ports 8080 and 6080. The existing `/mnt/services/research.yml` cloudflared config routes:
+- `research.ampbox.io` -> `http://10.66.204.209:8080`
+- `vnc.ampbox.io` -> `http://10.66.204.209:6080`