diff --git a/docs/architecture.md b/docs/architecture.md
index 3463132..ea2601a 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -105,10 +105,13 @@ The UI is a **hash-routed** SPA with ES modules under `static/js/`:
 
 - `app.js` — routing and boot
 - `projects.js`, `sessions.js`, `search.js`, `export.js` — route handlers
+- `render/registry.js` — **tool dispatch registry** for session UI: `TOOL_USE_RENDERERS` and `TOOL_RESULT_RENDERERS` map tool name / `result_type` → render function (one module per type under `render/tool_use/` and `render/tool_result/`). Parallels backend `utils/tool_dispatch.py` (backend uses ordered predicates; frontend uses direct key lookup + fallback).
 - `shared/markdown.js` — markdown + **DOMPurify** sanitization (do not render raw LLM HTML)
 - `shared/state.js`, `shared/utils.js`, `shared/theme.js` — shared UI state and helpers
 
-No bundler step — modern browsers load modules directly. Frontend unit tests use **vitest** + **jsdom** (`npm test`).
+`sessions.js` keeps workspace/session orchestration and message bubbles; tool cards delegate to `render/registry.js`.
+
+No bundler step — modern browsers load modules directly. Frontend unit tests use **vitest** + **jsdom** (`npm test`), including `static/js/render/registry.test.js` for registry wiring and renderer escaping.
 
 ## Continuous integration
 
diff --git a/static/js/render/constants.js b/static/js/render/constants.js
new file mode 100644
index 0000000..8950299
--- /dev/null
+++ b/static/js/render/constants.js
@@ -0,0 +1,5 @@
+/**
+ * Sentinel when tool.name or result_type is missing.
+ * Used for fallback routing only — do not add UNKNOWN_DISPATCH_KEY to TOOL_*_RENDERERS.
+ */
+export const UNKNOWN_DISPATCH_KEY = 'unknown';
diff --git a/static/js/render/registry.js b/static/js/render/registry.js
new file mode 100644
index 0000000..893a8dd
--- /dev/null
+++ b/static/js/render/registry.js
@@ -0,0 +1,84 @@
+import { renderBashUse } from './tool_use/bash.js';
+import { renderReadUse } from './tool_use/read.js';
+import { renderWriteUse } from './tool_use/write.js';
+import { renderEditUse } from './tool_use/edit.js';
+import { renderGlobUse } from './tool_use/glob.js';
+import { renderGrepUse } from './tool_use/grep.js';
+import { renderTaskUse } from './tool_use/task.js';
+import { renderTodoWriteUse } from './tool_use/todo_write.js';
+import { renderAskUserQuestionUse } from './tool_use/ask_user_question.js';
+import { renderWebFetchUse } from './tool_use/web_fetch.js';
+import { renderWebSearchUse } from './tool_use/web_search.js';
+import { renderToolUseFallback } from './tool_use/fallback.js';
+import { getToolSummary } from './tool_use/summary.js';
+import { UNKNOWN_DISPATCH_KEY } from './constants.js';
+
+import { renderBashResult } from './tool_result/bash.js';
+import { renderFileReadResult } from './tool_result/file_read.js';
+import { renderFileEditResult } from './tool_result/file_edit.js';
+import { renderFileWriteResult } from './tool_result/file_write.js';
+import { renderGlobResult } from './tool_result/glob.js';
+import { renderGrepResult } from './tool_result/grep.js';
+import { renderWebSearchResult } from './tool_result/web_search.js';
+import { renderWebFetchResult } from './tool_result/web_fetch.js';
+import { renderTaskResult } from './tool_result/task.js';
+import { renderTodoWriteResult } from './tool_result/todo_write.js';
+import { renderUserInputResult } from './tool_result/user_input.js';
+import { renderPlanResult } from './tool_result/plan.js';
+import { renderToolResultFallback } from './tool_result/fallback.js';
+import { toolResultHasBody } from './tool_result/utils.js';
+
+export { getToolSummary, toolResultHasBody };
+
+export const TOOL_USE_RENDERERS = {
+    Bash: renderBashUse,
+    Read: renderReadUse,
+    Write: renderWriteUse,
+    Edit: renderEditUse,
+    Glob: renderGlobUse,
+    Grep: renderGrepUse,
+    Task: renderTaskUse,
+    TodoWrite: renderTodoWriteUse,
+    AskUserQuestion: renderAskUserQuestionUse,
+    WebFetch: renderWebFetchUse,
+    WebSearch: renderWebSearchUse,
+};
+
+export const TOOL_RESULT_RENDERERS = {
+    bash: renderBashResult,
+    file_read: renderFileReadResult,
+    file_edit: renderFileEditResult,
+    file_write: renderFileWriteResult,
+    glob: renderGlobResult,
+    grep: renderGrepResult,
+    web_search: renderWebSearchResult,
+    web_fetch: renderWebFetchResult,
+    task: renderTaskResult,
+    todo_write: renderTodoWriteResult,
+    user_input: renderUserInputResult,
+    plan: renderPlanResult,
+};
+
+function getToolUseRenderer(name) {
+    return Object.prototype.hasOwnProperty.call(TOOL_USE_RENDERERS, name)
+        ? TOOL_USE_RENDERERS[name]
+        : renderToolUseFallback;
+}
+
+function getToolResultRenderer(resultType) {
+    return Object.prototype.hasOwnProperty.call(TOOL_RESULT_RENDERERS, resultType)
+        ? TOOL_RESULT_RENDERERS[resultType]
+        : renderToolResultFallback;
+}
+
+export function renderToolUse(tool) {
+    if (!tool) return '';
+    const name = tool.name || UNKNOWN_DISPATCH_KEY;
+    return getToolUseRenderer(name)(tool);
+}
+
+export function renderToolResult(parsed) {
+    if (!parsed) return '';
+    const rt = parsed.result_type || UNKNOWN_DISPATCH_KEY;
+    return getToolResultRenderer(rt)(parsed);
+}
diff --git a/static/js/render/registry.test.js b/static/js/render/registry.test.js
new file mode 100644
index 0000000..432225e
--- /dev/null
+++ b/static/js/render/registry.test.js
@@ -0,0 +1,203 @@
+import { describe, it, expect } from 'vitest';
+import {
+    TOOL_USE_RENDERERS,
+    TOOL_RESULT_RENDERERS,
+    renderToolUse,
+    renderToolResult,
+    getToolSummary,
+    toolResultHasBody,
+} from './registry.js';
+import { UNKNOWN_DISPATCH_KEY } from './constants.js';
+import { renderWebFetchUse } from './tool_use/web_fetch.js';
+
+const CORE_TOOL_USE = ['Bash', 'Read', 'Write', 'Edit', 'Glob', 'Grep', 'Task', 'TodoWrite', 'AskUserQuestion', 'WebFetch', 'WebSearch'];
+
+const CORE_TOOL_RESULT = [
+    'bash',
+    'file_read',
+    'file_edit',
+    'file_write',
+    'glob',
+    'grep',
+    'web_search',
+    'web_fetch',
+    'task',
+    'todo_write',
+    'user_input',
+    'plan',
+];
+
+describe('TOOL_USE_RENDERERS', () => {
+    it('registers core tool names', () => {
+        for (const name of CORE_TOOL_USE) {
+            expect(TOOL_USE_RENDERERS[name], name).toBeTypeOf('function');
+        }
+    });
+
+    it('does not register the unknown dispatch sentinel as a tool renderer', () => {
+        expect(Object.prototype.hasOwnProperty.call(TOOL_USE_RENDERERS, UNKNOWN_DISPATCH_KEY)).toBe(false);
+    });
+
+    it('renderBashUse escapes HTML in command', () => {
+        const html = renderToolUse({
+            name: 'Bash',
+            input: { command: '<script>alert(1)</script>' },
+        });
+        expect(html).not.toContain('<script>');
+        expect(html).toContain('&lt;script&gt;');
+    });
+
+    it('returns empty string for null or undefined tool', () => {
+        expect(renderToolUse(null)).toBe('');
+        expect(renderToolUse(undefined)).toBe('');
+    });
+
+    it('renderReadUse escapes file path in body and summary', () => {
+        const html = renderToolUse({
+            name: 'Read',
+            input: { file_path: 'C:\\tmp\\<evil>.txt' },
+        });
+        expect(html).toContain('&lt;evil&gt;');
+        expect(html).not.toContain('<evil>');
+    });
+});
+
+describe('TOOL_RESULT_RENDERERS', () => {
+    it('registers core result types', () => {
+        for (const rt of CORE_TOOL_RESULT) {
+            expect(TOOL_RESULT_RENDERERS[rt], rt).toBeTypeOf('function');
+        }
+    });
+
+    it('renderBashResult escapes stdout', () => {
+        const html = renderToolResult({
+            result_type: 'bash',
+            exit_code: 0,
+            stdout: '<img onerror=alert(1)>',
+        });
+        expect(html).not.toContain('<img');
+        expect(html).toContain('&lt;img');
+    });
+
+    it('renderBashResult avoids undefined in summary when exit_code missing', () => {
+        const html = renderToolResult({ result_type: 'bash' });
+        expect(html).toContain('Bash Result (unknown)');
+        expect(html).not.toContain('undefined');
+    });
+
+    it('returns empty string for null or undefined parsed', () => {
+        expect(renderToolResult(null)).toBe('');
+        expect(renderToolResult(undefined)).toBe('');
+    });
+});
+
+describe('toolResultHasBody', () => {
+    it('returns false for null or undefined', () => {
+        expect(toolResultHasBody(null)).toBe(false);
+        expect(toolResultHasBody(undefined)).toBe(false);
+    });
+
+    it('returns true for bash with stdout or stderr', () => {
+        expect(toolResultHasBody({ result_type: 'bash', stdout: 'ok' })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'bash', stderr: 'err' })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'bash' })).toBe(false);
+    });
+
+    it('returns false for summary-only result types', () => {
+        expect(toolResultHasBody({ result_type: 'file_read', file_path: '/a' })).toBe(false);
+        expect(toolResultHasBody({ result_type: 'glob', num_files: 3 })).toBe(false);
+    });
+
+    it('returns true for user_input and todo_write with todos', () => {
+        expect(toolResultHasBody({ result_type: 'user_input' })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'todo_write', todos: [{ content: 'x' }] })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'todo_write', todo_count: 1 })).toBe(false);
+    });
+
+    it('returns true for task when duration, retrieval, or description is set', () => {
+        expect(toolResultHasBody({ result_type: 'task', description: 'subagent' })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'task', total_duration_ms: 100 })).toBe(true);
+        expect(toolResultHasBody({ result_type: 'task', status: 'completed' })).toBe(false);
+    });
+});
+
+describe('getToolSummary', () => {
+    it('formats Bash summary', () => {
+        expect(getToolSummary('Bash', { command: 'ls -la' })).toMatch(/Bash:/);
+        expect(getToolSummary('Bash', { command: 'ls -la' })).toContain('ls -la');
+    });
+
+    it('formats Read summary as plain text (escaping deferred to wrapToolUse)', () => {
+        expect(getToolSummary('Read', { file_path: 'a<b' })).toBe('Read: a<b');
+    });
+});
+
+describe('renderToolUse fallback', () => {
+    it('uses JSON fallback for unknown tools', () => {
+        const html = renderToolUse({
+            name: 'UnknownToolXYZ',
+            input: { foo: 'bar' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('&quot;foo&quot;');
+        expect(TOOL_USE_RENDERERS.UnknownToolXYZ).toBeUndefined();
+    });
+
+    it('uses fallback when name is an inherited property (e.g. constructor)', () => {
+        const html = renderToolUse({
+            name: 'constructor',
+            input: { foo: 'bar' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('&quot;foo&quot;');
+    });
+
+    it('dispatches WebFetch to registered renderer (not generic unknown-tool fallback)', () => {
+        expect(TOOL_USE_RENDERERS.WebFetch).toBe(renderWebFetchUse);
+        const html = renderToolUse({
+            name: 'WebFetch',
+            input: { url: 'https://example.com' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('example.com');
+    });
+
+    it('renders WebSearch via registry', () => {
+        const html = renderToolUse({
+            name: 'WebSearch',
+            input: { query: 'vitest registry' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('vitest registry');
+    });
+});
+
+describe('renderTodoWriteResult', () => {
+    it('summary count matches parsed.todos length when todos are present', () => {
+        const html = renderToolResult({
+            result_type: 'todo_write',
+            todo_count: 99,
+            todos: [
+                { status: 'pending', content: 'one' },
+                { status: 'completed', content: 'two' },
+            ],
+        });
+        expect(html).toContain('Todos updated (2 items)');
+        expect(html).not.toContain('99 items');
+    });
+});
+
+describe('renderToolResult fallback', () => {
+    it('renders summary-only for unknown result types', () => {
+        const html = renderToolResult({ result_type: 'custom_type' });
+        expect(html).toContain('Tool result (custom_type)');
+        expect(html).toContain('tool-result');
+    });
+
+    it('uses fallback when result_type is an inherited property (e.g. constructor)', () => {
+        const html = renderToolResult({ result_type: 'constructor' });
+        expect(html).toContain('Tool result (constructor)');
+        expect(html).toContain('tool-result');
+        expect(Object.prototype.hasOwnProperty.call(TOOL_RESULT_RENDERERS, 'constructor')).toBe(false);
+    });
+});
diff --git a/static/js/render/tool_result/bash.js b/static/js/render/tool_result/bash.js
new file mode 100644
index 0000000..fcbcd79
--- /dev/null
+++ b/static/js/render/tool_result/bash.js
@@ -0,0 +1,23 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { finishToolResult } from './common.js';
+
+export function renderBashResult(parsed) {
+    const exitCode = parsed.exit_code;
+    let status;
+    if (parsed.interrupted) {
+        status = 'interrupted';
+    } else if (parsed.is_error) {
+        status = typeof exitCode === 'number' ? `error (exit ${exitCode})` : 'error';
+    } else if (exitCode === 0) {
+        status = 'success';
+    } else if (typeof exitCode === 'number') {
+        status = `exit ${exitCode}`;
+    } else {
+        status = 'unknown';
+    }
+    const summary = `Bash Result (${status})`;
+    let body = '';
+    if (parsed.stdout) body += `<div class="tool-call-section"><div class="tool-call-section-title">stdout</div><pre><code>${esc(truncate(parsed.stdout, 2000))}</code></pre></div>`;
+    if (parsed.stderr) body += `<div class="tool-call-section"><div class="tool-call-section-title">stderr</div><pre style="border-left:3px solid var(--danger)"><code>${esc(truncate(parsed.stderr, 1000))}</code></pre></div>`;
+    return finishToolResult(summary, body);
+}
diff --git a/static/js/render/tool_result/common.js b/static/js/render/tool_result/common.js
new file mode 100644
index 0000000..808a970
--- /dev/null
+++ b/static/js/render/tool_result/common.js
@@ -0,0 +1,8 @@
+import { esc } from '../../shared/utils.js';
+
+export function finishToolResult(summary, body) {
+    if (!body) {
+        return `<div class="tool-result"><span class="tool-result-summary">${esc(summary)}</span></div>`;
+    }
+    return `<details class="tool-result"><summary class="tool-result-summary">${esc(summary)}</summary><div class="tool-call-body">${body}</div></details>`;
+}
diff --git a/static/js/render/tool_result/fallback.js b/static/js/render/tool_result/fallback.js
new file mode 100644
index 0000000..bef7425
--- /dev/null
+++ b/static/js/render/tool_result/fallback.js
@@ -0,0 +1,8 @@
+import { finishToolResult } from './common.js';
+import { UNKNOWN_DISPATCH_KEY } from '../constants.js';
+
+export function renderToolResultFallback(parsed) {
+    const rt = parsed.result_type || UNKNOWN_DISPATCH_KEY;
+    const summary = `Tool result (${rt})`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/file_edit.js b/static/js/render/tool_result/file_edit.js
new file mode 100644
index 0000000..1a780a7
--- /dev/null
+++ b/static/js/render/tool_result/file_edit.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderFileEditResult(parsed) {
+    const summary = `Edited: ${parsed.file_path || ''}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/file_read.js b/static/js/render/tool_result/file_read.js
new file mode 100644
index 0000000..6c20b9f
--- /dev/null
+++ b/static/js/render/tool_result/file_read.js
@@ -0,0 +1,7 @@
+import { finishToolResult } from './common.js';
+
+export function renderFileReadResult(parsed) {
+    const numLines = parsed.num_lines ? ` (${parsed.num_lines} lines)` : '';
+    const summary = `Read: ${parsed.file_path || ''}${numLines}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/file_write.js b/static/js/render/tool_result/file_write.js
new file mode 100644
index 0000000..ae1deb1
--- /dev/null
+++ b/static/js/render/tool_result/file_write.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderFileWriteResult(parsed) {
+    const summary = `Wrote: ${parsed.file_path || ''}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/glob.js b/static/js/render/tool_result/glob.js
new file mode 100644
index 0000000..9355906
--- /dev/null
+++ b/static/js/render/tool_result/glob.js
@@ -0,0 +1,7 @@
+import { finishToolResult } from './common.js';
+
+export function renderGlobResult(parsed) {
+    const trunc = parsed.truncated ? ' (truncated)' : '';
+    const summary = `Glob: ${parsed.num_files || 0} files found${trunc}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/grep.js b/static/js/render/tool_result/grep.js
new file mode 100644
index 0000000..a5fab0b
--- /dev/null
+++ b/static/js/render/tool_result/grep.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderGrepResult(parsed) {
+    const summary = `Grep: ${parsed.num_files || 0} files, ${parsed.num_lines || 0} lines`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/plan.js b/static/js/render/tool_result/plan.js
new file mode 100644
index 0000000..b2d1b18
--- /dev/null
+++ b/static/js/render/tool_result/plan.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderPlanResult(parsed) {
+    const summary = `Plan: ${parsed.file_path || ''}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/task.js b/static/js/render/tool_result/task.js
new file mode 100644
index 0000000..1f5ee33
--- /dev/null
+++ b/static/js/render/tool_result/task.js
@@ -0,0 +1,13 @@
+import { finishToolResult } from './common.js';
+
+export function renderTaskResult(parsed) {
+    const status = parsed.status || 'completed';
+    const dur = parsed.total_duration_ms;
+    const durStr = dur ? ` (${(dur / 1000).toFixed(1)}s)` : '';
+    const tokStr = parsed.total_tokens ? `, ${parsed.total_tokens.toLocaleString()} tokens` : '';
+    const toolStr = parsed.total_tool_use_count ? `, ${parsed.total_tool_use_count} tool calls` : '';
+    let summary = `Task ${status}${durStr}${tokStr}${toolStr}`;
+    if (parsed.retrieval_status) summary = `Task retrieval: ${parsed.retrieval_status}`;
+    if (parsed.description) summary = `Task launched: ${parsed.description}`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/todo_write.js b/static/js/render/tool_result/todo_write.js
new file mode 100644
index 0000000..6247daa
--- /dev/null
+++ b/static/js/render/tool_result/todo_write.js
@@ -0,0 +1,18 @@
+import { esc } from '../../shared/utils.js';
+import { finishToolResult } from './common.js';
+
+export function renderTodoWriteResult(parsed) {
+    const hasTodos = parsed.todos && parsed.todos.length;
+    const count = hasTodos
+        ? parsed.todos.length
+        : (typeof parsed.todo_count === 'number' ? parsed.todo_count : 0);
+    const summary = `Todos updated (${count} items)`;
+    let body = '';
+    if (hasTodos) {
+        for (const t of parsed.todos) {
+            const icon = {'completed': '\u2705', 'in_progress': '\u23f3', 'pending': '\u2b1c'}[t.status] || '\u2b1c';
+            body += `<div>${icon} ${esc(t.content || '')}</div>`;
+        }
+    }
+    return finishToolResult(summary, body);
+}
diff --git a/static/js/render/tool_result/user_input.js b/static/js/render/tool_result/user_input.js
new file mode 100644
index 0000000..a302562
--- /dev/null
+++ b/static/js/render/tool_result/user_input.js
@@ -0,0 +1,19 @@
+import { esc } from '../../shared/utils.js';
+import { finishToolResult } from './common.js';
+
+export function renderUserInputResult(parsed) {
+    const summary = 'User input received';
+    let body = '';
+    const qs = parsed.questions || [];
+    const ans = parsed.answers || {};
+    for (const q of qs) {
+        body += `<div class="tool-call-section"><strong>Q:</strong> ${esc(q.question || '')}</div>`;
+    }
+    const ansKeys = Object.keys(ans);
+    if (ansKeys.length) {
+        for (const k of ansKeys) {
+            body += `<div class="tool-call-section"><strong>A:</strong> ${esc(String(ans[k]))}</div>`;
+        }
+    }
+    return finishToolResult(summary, body);
+}
diff --git a/static/js/render/tool_result/utils.js b/static/js/render/tool_result/utils.js
new file mode 100644
index 0000000..5ce0b8c
--- /dev/null
+++ b/static/js/render/tool_result/utils.js
@@ -0,0 +1,11 @@
+import { UNKNOWN_DISPATCH_KEY } from '../constants.js';
+
+export function toolResultHasBody(parsed) {
+    if (!parsed) return false;
+    const rt = parsed.result_type || UNKNOWN_DISPATCH_KEY;
+    if (rt === 'bash') return !!(parsed.stdout || parsed.stderr);
+    if (rt === 'todo_write') return !!(parsed.todos && parsed.todos.length);
+    if (rt === 'user_input') return true;
+    if (rt === 'task' && (parsed.total_duration_ms || parsed.retrieval_status || parsed.description)) return true;
+    return false;
+}
diff --git a/static/js/render/tool_result/web_fetch.js b/static/js/render/tool_result/web_fetch.js
new file mode 100644
index 0000000..8093065
--- /dev/null
+++ b/static/js/render/tool_result/web_fetch.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderWebFetchResult(parsed) {
+    const summary = `Fetch: ${parsed.url || ''} (${parsed.status_code || '?'})`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_result/web_search.js b/static/js/render/tool_result/web_search.js
new file mode 100644
index 0000000..d294e13
--- /dev/null
+++ b/static/js/render/tool_result/web_search.js
@@ -0,0 +1,6 @@
+import { finishToolResult } from './common.js';
+
+export function renderWebSearchResult(parsed) {
+    const summary = `Search: "${parsed.query || ''}" - ${parsed.result_count || 0} results`;
+    return finishToolResult(summary, '');
+}
diff --git a/static/js/render/tool_use/ask_user_question.js b/static/js/render/tool_use/ask_user_question.js
new file mode 100644
index 0000000..fda5779
--- /dev/null
+++ b/static/js/render/tool_use/ask_user_question.js
@@ -0,0 +1,14 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderAskUserQuestionUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('AskUserQuestion', inp);
+    let body = '';
+    const questions = inp.questions || [];
+    for (const q of questions) {
+        body += `<div class="tool-call-section"><strong>Q:</strong> ${esc(q.question || '')}</div>`;
+    }
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/bash.js b/static/js/render/tool_use/bash.js
new file mode 100644
index 0000000..8eb8956
--- /dev/null
+++ b/static/js/render/tool_use/bash.js
@@ -0,0 +1,12 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderBashUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Bash', inp);
+    let body = '';
+    body += `<div class="tool-call-section"><div class="tool-call-section-title">Command</div><pre><code>${esc(inp.command || '')}</code></pre></div>`;
+    if (inp.description) body += `<div class="tool-call-section"><div class="tool-call-section-title">Description</div><div>${esc(inp.description)}</div></div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/common.js b/static/js/render/tool_use/common.js
new file mode 100644
index 0000000..61b29c6
--- /dev/null
+++ b/static/js/render/tool_use/common.js
@@ -0,0 +1,5 @@
+import { esc } from '../../shared/utils.js';
+
+export function wrapToolUse(summary, body) {
+    return `<details class="tool-call"><summary class="tool-name">${esc(summary)}</summary><div class="tool-call-body">${body}</div></details>`;
+}
diff --git a/static/js/render/tool_use/edit.js b/static/js/render/tool_use/edit.js
new file mode 100644
index 0000000..6a861ca
--- /dev/null
+++ b/static/js/render/tool_use/edit.js
@@ -0,0 +1,12 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderEditUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Edit', inp);
+    let body = `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
+    if (inp.old_string) body += `<div class="tool-call-section"><div class="tool-call-section-title">Old</div><pre style="border-left:3px solid var(--danger)"><code>${esc(truncate(inp.old_string, 300))}</code></pre></div>`;
+    if (inp.new_string) body += `<div class="tool-call-section"><div class="tool-call-section-title">New</div><pre style="border-left:3px solid var(--success)"><code>${esc(truncate(inp.new_string, 300))}</code></pre></div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/fallback.js b/static/js/render/tool_use/fallback.js
new file mode 100644
index 0000000..1c7bbfb
--- /dev/null
+++ b/static/js/render/tool_use/fallback.js
@@ -0,0 +1,13 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+import { UNKNOWN_DISPATCH_KEY } from '../constants.js';
+
+export function renderToolUseFallback(tool) {
+    const name = tool.name || UNKNOWN_DISPATCH_KEY;
+    const inp = tool.input || {};
+    const summary = getToolSummary(name, inp);
+    const s = JSON.stringify(inp, null, 2);
+    const body = `<pre><code>${esc(truncate(s, 500))}</code></pre>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/glob.js b/static/js/render/tool_use/glob.js
new file mode 100644
index 0000000..cdae344
--- /dev/null
+++ b/static/js/render/tool_use/glob.js
@@ -0,0 +1,10 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderGlobUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Glob', inp);
+    const body = `<div class="tool-call-section">Pattern: <code>${esc(inp.pattern || '')}</code>${inp.path ? ' in <code>' + esc(inp.path) + '</code>' : ''}</div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/grep.js b/static/js/render/tool_use/grep.js
new file mode 100644
index 0000000..fbac36d
--- /dev/null
+++ b/static/js/render/tool_use/grep.js
@@ -0,0 +1,10 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderGrepUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Grep', inp);
+    const body = `<div class="tool-call-section">Pattern: <code>${esc(inp.pattern || '')}</code>${inp.path ? ' in <code>' + esc(inp.path) + '</code>' : ''}</div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/read.js b/static/js/render/tool_use/read.js
new file mode 100644
index 0000000..fedd348
--- /dev/null
+++ b/static/js/render/tool_use/read.js
@@ -0,0 +1,10 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderReadUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Read', inp);
+    const body = `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/summary.js b/static/js/render/tool_use/summary.js
new file mode 100644
index 0000000..be9e7b0
--- /dev/null
+++ b/static/js/render/tool_use/summary.js
@@ -0,0 +1,17 @@
+import { truncate } from '../../shared/utils.js';
+
+/** Plain-text summaries; HTML escaping happens in wrapToolUse / finishToolResult. */
+export function getToolSummary(name, inp) {
+    if (name === 'Bash') return `Bash: ${truncate(inp.command || '', 80)}`;
+    if (name === 'Read') return `Read: ${inp.file_path || ''}`;
+    if (name === 'Write') return `Write: ${inp.file_path || ''}`;
+    if (name === 'Edit') return `Edit: ${inp.file_path || ''}`;
+    if (name === 'Glob') return `Glob: ${inp.pattern || ''}`;
+    if (name === 'Grep') return `Grep: /${inp.pattern || ''}/` + (inp.path ? ` in ${inp.path}` : '');
+    if (name === 'WebFetch') return `Fetch: ${truncate(inp.url || '', 80)}`;
+    if (name === 'WebSearch') return `Search: ${truncate(inp.query || '', 80)}`;
+    if (name === 'Task') return `Task: ${inp.subagent_type || ''} - ${inp.description || ''}`;
+    if (name === 'TodoWrite') return 'TodoWrite';
+    if (name === 'AskUserQuestion') return 'AskUserQuestion';
+    return name;
+}
diff --git a/static/js/render/tool_use/task.js b/static/js/render/tool_use/task.js
new file mode 100644
index 0000000..033574e
--- /dev/null
+++ b/static/js/render/tool_use/task.js
@@ -0,0 +1,11 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderTaskUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Task', inp);
+    let body = `<div class="tool-call-section">${esc(inp.subagent_type || '')} &mdash; ${esc(inp.description || '')}</div>`;
+    if (inp.prompt) body += `<div class="tool-call-section"><div class="tool-call-section-title">Prompt</div><pre><code>${esc(truncate(inp.prompt, 500))}</code></pre></div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/todo_write.js b/static/js/render/tool_use/todo_write.js
new file mode 100644
index 0000000..eaab879
--- /dev/null
+++ b/static/js/render/tool_use/todo_write.js
@@ -0,0 +1,15 @@
+import { esc } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderTodoWriteUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('TodoWrite', inp);
+    let body = '';
+    const todos = inp.todos || [];
+    for (const t of todos) {
+        const icon = {'completed': '[x]', 'in_progress': '[~]', 'pending': '[ ]'}[t.status] || '[ ]';
+        body += `<div>${icon} ${esc(t.content || '')}</div>`;
+    }
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/render/tool_use/web_fetch.js b/static/js/render/tool_use/web_fetch.js
new file mode 100644
index 0000000..03bf3d9
--- /dev/null
+++ b/static/js/render/tool_use/web_fetch.js
@@ -0,0 +1,6 @@
+import { renderToolUseFallback } from './fallback.js';
+
+/** Preserves pre-refactor JSON fallback body; registered so WebFetch does not hit generic unknown-tool path. */
+export function renderWebFetchUse(tool) {
+    return renderToolUseFallback({ ...tool, name: 'WebFetch' });
+}
diff --git a/static/js/render/tool_use/web_search.js b/static/js/render/tool_use/web_search.js
new file mode 100644
index 0000000..0868d6d
--- /dev/null
+++ b/static/js/render/tool_use/web_search.js
@@ -0,0 +1,6 @@
+import { renderToolUseFallback } from './fallback.js';
+
+/** Preserves pre-refactor JSON fallback body; registered so WebSearch does not hit generic unknown-tool path. */
+export function renderWebSearchUse(tool) {
+    return renderToolUseFallback({ ...tool, name: 'WebSearch' });
+}
diff --git a/static/js/render/tool_use/write.js b/static/js/render/tool_use/write.js
new file mode 100644
index 0000000..359af31
--- /dev/null
+++ b/static/js/render/tool_use/write.js
@@ -0,0 +1,11 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderWriteUse(tool) {
+    const inp = tool.input || {};
+    const summary = getToolSummary('Write', inp);
+    let body = `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
+    if (inp.content) body += `<div class="tool-call-section"><div class="tool-call-section-title">Content</div><pre><code>${esc(truncate(inp.content, 500))}</code></pre></div>`;
+    return wrapToolUse(summary, body);
+}
diff --git a/static/js/sessions.js b/static/js/sessions.js
index 1ef13f0..a6821e5 100644
--- a/static/js/sessions.js
+++ b/static/js/sessions.js
@@ -1,10 +1,11 @@
 // Session workspace — sidebar, session loading, message rendering.
 
 import { state } from './shared/state.js';
-import { esc, truncate, formatDate, formatTs, smoothSet, loadingBar, showToast, closeSidebar, setHamburgerVisible } from './shared/utils.js';
+import { esc, formatDate, formatTs, smoothSet, loadingBar, showToast, closeSidebar, setHamburgerVisible } from './shared/utils.js';
 import { renderMarkdown, cleanContent } from './shared/markdown.js';
 import { setWorkspaceMode } from './shared/theme.js';
 import { downloadSession } from './export.js';
+import { renderToolUse, renderToolResult, toolResultHasBody } from './render/registry.js';
 
 // ==================== Workspace (split layout) ====================
 
@@ -228,7 +229,7 @@ function renderUser(msg) {
     if (!hasText && !hasImages && !hasToolResult) return '';
 
     if (hasToolResult && !hasText && !hasImages) {
-        if (_toolResultHasBody(msg.tool_result_parsed)) return renderToolResult(msg.tool_result_parsed);
+        if (toolResultHasBody(msg.tool_result_parsed)) return renderToolResult(msg.tool_result_parsed);
         return '';
     }
 
@@ -280,145 +281,6 @@ function renderSystem(msg) {
     return '';
 }
 
-function getToolSummary(name, inp) {
-    if (name === 'Bash') return `Bash: ${truncate(inp.command || '', 80)}`;
-    if (name === 'Read') return `Read: ${esc(inp.file_path || '')}`;
-    if (name === 'Write') return `Write: ${esc(inp.file_path || '')}`;
-    if (name === 'Edit') return `Edit: ${esc(inp.file_path || '')}`;
-    if (name === 'Glob') return `Glob: ${esc(inp.pattern || '')}`;
-    if (name === 'Grep') return `Grep: /${esc(inp.pattern || '')}/` + (inp.path ? ` in ${esc(inp.path)}` : '');
-    if (name === 'WebFetch') return `Fetch: ${truncate(inp.url || '', 80)}`;
-    if (name === 'WebSearch') return `Search: ${truncate(inp.query || '', 80)}`;
-    if (name === 'Task') return `Task: ${esc(inp.subagent_type || '')} - ${esc(inp.description || '')}`;
-    if (name === 'TodoWrite') return 'TodoWrite';
-    if (name === 'AskUserQuestion') return 'AskUserQuestion';
-    return name;
-}
-
-function renderToolUse(tool) {
-    const name = tool.name || 'unknown';
-    const inp = tool.input || {};
-    const summary = getToolSummary(name, inp);
-
-    let body = '';
-
-    if (name === 'Bash') {
-        body += `<div class="tool-call-section"><div class="tool-call-section-title">Command</div><pre><code>${esc(inp.command || '')}</code></pre></div>`;
-        if (inp.description) body += `<div class="tool-call-section"><div class="tool-call-section-title">Description</div><div>${esc(inp.description)}</div></div>`;
-    } else if (name === 'Read') {
-        body += `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
-    } else if (name === 'Write') {
-        body += `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
-        if (inp.content) body += `<div class="tool-call-section"><div class="tool-call-section-title">Content</div><pre><code>${esc(truncate(inp.content, 500))}</code></pre></div>`;
-    } else if (name === 'Edit') {
-        body += `<div class="tool-call-section">File: <code>${esc(inp.file_path || '')}</code></div>`;
-        if (inp.old_string) body += `<div class="tool-call-section"><div class="tool-call-section-title">Old</div><pre style="border-left:3px solid var(--danger)"><code>${esc(truncate(inp.old_string, 300))}</code></pre></div>`;
-        if (inp.new_string) body += `<div class="tool-call-section"><div class="tool-call-section-title">New</div><pre style="border-left:3px solid var(--success)"><code>${esc(truncate(inp.new_string, 300))}</code></pre></div>`;
-    } else if (name === 'Glob') {
-        body += `<div class="tool-call-section">Pattern: <code>${esc(inp.pattern || '')}</code>${inp.path ? ' in <code>' + esc(inp.path) + '</code>' : ''}</div>`;
-    } else if (name === 'Grep') {
-        body += `<div class="tool-call-section">Pattern: <code>${esc(inp.pattern || '')}</code>${inp.path ? ' in <code>' + esc(inp.path) + '</code>' : ''}</div>`;
-    } else if (name === 'Task') {
-        body += `<div class="tool-call-section">${esc(inp.subagent_type || '')} &mdash; ${esc(inp.description || '')}</div>`;
-        if (inp.prompt) body += `<div class="tool-call-section"><div class="tool-call-section-title">Prompt</div><pre><code>${esc(truncate(inp.prompt, 500))}</code></pre></div>`;
-    } else if (name === 'TodoWrite') {
-        const todos = inp.todos || [];
-        for (const t of todos) {
-            const icon = {'completed': '[x]', 'in_progress': '[~]', 'pending': '[ ]'}[t.status] || '[ ]';
-            body += `<div>${icon} ${esc(t.content || '')}</div>`;
-        }
-    } else if (name === 'AskUserQuestion') {
-        const questions = inp.questions || [];
-        for (const q of questions) {
-            body += `<div class="tool-call-section"><strong>Q:</strong> ${esc(q.question || '')}</div>`;
-        }
-    } else {
-        const s = JSON.stringify(inp, null, 2);
-        body += `<pre><code>${esc(truncate(s, 500))}</code></pre>`;
-    }
-
-    return `<details class="tool-call"><summary class="tool-name">${esc(summary)}</summary><div class="tool-call-body">${body}</div></details>`;
-}
-
-function _toolResultHasBody(parsed) {
-    const rt = parsed.result_type || 'unknown';
-    if (rt === 'bash') return !!(parsed.stdout || parsed.stderr);
-    if (rt === 'todo_write') return !!(parsed.todos && parsed.todos.length);
-    if (rt === 'user_input') return true;
-    if (rt === 'task' && (parsed.total_duration_ms || parsed.retrieval_status || parsed.description)) return true;
-    return false;
-}
-
-function renderToolResult(parsed) {
-    const rt = parsed.result_type || 'unknown';
-    let summary = '';
-    let body = '';
-
-    if (rt === 'bash') {
-        const exitCode = parsed.exit_code;
-        const status = parsed.interrupted ? 'interrupted' : (parsed.is_error ? `error (exit ${exitCode})` : (exitCode === 0 ? 'success' : `exit ${exitCode}`));
-        summary = `Bash Result (${status})`;
-        if (parsed.stdout) body += `<div class="tool-call-section"><div class="tool-call-section-title">stdout</div><pre><code>${esc(truncate(parsed.stdout, 2000))}</code></pre></div>`;
-        if (parsed.stderr) body += `<div class="tool-call-section"><div class="tool-call-section-title">stderr</div><pre style="border-left:3px solid var(--danger)"><code>${esc(truncate(parsed.stderr, 1000))}</code></pre></div>`;
-    } else if (rt === 'file_read') {
-        const numLines = parsed.num_lines ? ` (${parsed.num_lines} lines)` : '';
-        summary = `Read: ${parsed.file_path || ''}${numLines}`;
-    } else if (rt === 'file_edit') {
-        summary = `Edited: ${parsed.file_path || ''}`;
-    } else if (rt === 'file_write') {
-        summary = `Wrote: ${parsed.file_path || ''}`;
-    } else if (rt === 'glob') {
-        const trunc = parsed.truncated ? ' (truncated)' : '';
-        summary = `Glob: ${parsed.num_files || 0} files found${trunc}`;
-    } else if (rt === 'grep') {
-        summary = `Grep: ${parsed.num_files || 0} files, ${parsed.num_lines || 0} lines`;
-    } else if (rt === 'web_search') {
-        summary = `Search: "${parsed.query || ''}" - ${parsed.result_count || 0} results`;
-    } else if (rt === 'web_fetch') {
-        summary = `Fetch: ${parsed.url || ''} (${parsed.status_code || '?'})`;
-    } else if (rt === 'task') {
-        const status = parsed.status || 'completed';
-        const dur = parsed.total_duration_ms;
-        const durStr = dur ? ` (${(dur / 1000).toFixed(1)}s)` : '';
-        const tokStr = parsed.total_tokens ? `, ${parsed.total_tokens.toLocaleString()} tokens` : '';
-        const toolStr = parsed.total_tool_use_count ? `, ${parsed.total_tool_use_count} tool calls` : '';
-        summary = `Task ${status}${durStr}${tokStr}${toolStr}`;
-        if (parsed.retrieval_status) summary = `Task retrieval: ${parsed.retrieval_status}`;
-        if (parsed.description) summary = `Task launched: ${parsed.description}`;
-    } else if (rt === 'todo_write') {
-        const count = parsed.todo_count || 0;
-        summary = `Todos updated (${count} items)`;
-        if (parsed.todos && parsed.todos.length) {
-            for (const t of parsed.todos) {
-                const icon = {'completed': '\u2705', 'in_progress': '\u23f3', 'pending': '\u2b1c'}[t.status] || '\u2b1c';
-                body += `<div>${icon} ${esc(t.content || '')}</div>`;
-            }
-        }
-    } else if (rt === 'user_input') {
-        summary = 'User input received';
-        const qs = parsed.questions || [];
-        const ans = parsed.answers || {};
-        for (const q of qs) {
-            body += `<div class="tool-call-section"><strong>Q:</strong> ${esc(q.question || '')}</div>`;
-        }
-        const ansKeys = Object.keys(ans);
-        if (ansKeys.length) {
-            for (const k of ansKeys) {
-                body += `<div class="tool-call-section"><strong>A:</strong> ${esc(String(ans[k]))}</div>`;
-            }
-        }
-    } else if (rt === 'plan') {
-        summary = `Plan: ${parsed.file_path || ''}`;
-    } else {
-        summary = `Tool result (${rt})`;
-    }
-
-    if (!body) {
-        return `<div class="tool-result"><span class="tool-result-summary">${esc(summary)}</span></div>`;
-    }
-    return `<details class="tool-result"><summary class="tool-result-summary">${esc(summary)}</summary><div class="tool-call-body">${body}</div></details>`;
-}
-
 export function copyAll() {
     const sessionEl = document.querySelector('.session-content-inner') || document.querySelector('#session-content');
     if (!sessionEl) return;