From 512e71c3f027be6236d6af6bbcfc2e49089037f4 Mon Sep 17 00:00:00 2001
From: yu-med <clean6378@gmail.com>
Date: Wed, 3 Jun 2026 02:02:58 +0800
Subject: [PATCH 1/5] refactor(frontend): decompose sessions.js tool rendering
 into dispatch registry

Extract tool use and tool result rendering from sessions.js into
static/js/render/ with TOOL_USE_RENDERERS and TOOL_RESULT_RENDERERS,
one module per tool type, mirroring utils/tool_dispatch.py. sessions.js
retains workspace and message orchestration only.
Add Vitest coverage for registry wiring, HTML escaping, and getToolSummary.
Document the frontend registry in docs/architecture.md. No intended
visual or behavior change for existing sessions.
---
 docs/architecture.md                          |   5 +-
 static/js/render/registry.js                  |  67 ++++++++
 static/js/render/registry.test.js             |  99 ++++++++++++
 static/js/render/tool_result/bash.js          |  12 ++
 static/js/render/tool_result/common.js        |   8 +
 static/js/render/tool_result/fallback.js      |   7 +
 static/js/render/tool_result/file_edit.js     |   6 +
 static/js/render/tool_result/file_read.js     |   7 +
 static/js/render/tool_result/file_write.js    |   6 +
 static/js/render/tool_result/glob.js          |   7 +
 static/js/render/tool_result/grep.js          |   6 +
 static/js/render/tool_result/plan.js          |   6 +
 static/js/render/tool_result/task.js          |  13 ++
 static/js/render/tool_result/todo_write.js    |  15 ++
 static/js/render/tool_result/user_input.js    |  19 +++
 static/js/render/tool_result/utils.js         |   8 +
 static/js/render/tool_result/web_fetch.js     |   6 +
 static/js/render/tool_result/web_search.js    |   6 +
 .../js/render/tool_use/ask_user_question.js   |  14 ++
 static/js/render/tool_use/bash.js             |  12 ++
 static/js/render/tool_use/common.js           |   5 +
 static/js/render/tool_use/edit.js             |  12 ++
 static/js/render/tool_use/fallback.js         |  12 ++
 static/js/render/tool_use/glob.js             |  10 ++
 static/js/render/tool_use/grep.js             |  10 ++
 static/js/render/tool_use/read.js             |  10 ++
 static/js/render/tool_use/summary.js          |  16 ++
 static/js/render/tool_use/task.js             |  11 ++
 static/js/render/tool_use/todo_write.js       |  15 ++
 static/js/render/tool_use/write.js            |  11 ++
 static/js/sessions.js                         | 144 +-----------------
 31 files changed, 443 insertions(+), 142 deletions(-)
 create mode 100644 static/js/render/registry.js
 create mode 100644 static/js/render/registry.test.js
 create mode 100644 static/js/render/tool_result/bash.js
 create mode 100644 static/js/render/tool_result/common.js
 create mode 100644 static/js/render/tool_result/fallback.js
 create mode 100644 static/js/render/tool_result/file_edit.js
 create mode 100644 static/js/render/tool_result/file_read.js
 create mode 100644 static/js/render/tool_result/file_write.js
 create mode 100644 static/js/render/tool_result/glob.js
 create mode 100644 static/js/render/tool_result/grep.js
 create mode 100644 static/js/render/tool_result/plan.js
 create mode 100644 static/js/render/tool_result/task.js
 create mode 100644 static/js/render/tool_result/todo_write.js
 create mode 100644 static/js/render/tool_result/user_input.js
 create mode 100644 static/js/render/tool_result/utils.js
 create mode 100644 static/js/render/tool_result/web_fetch.js
 create mode 100644 static/js/render/tool_result/web_search.js
 create mode 100644 static/js/render/tool_use/ask_user_question.js
 create mode 100644 static/js/render/tool_use/bash.js
 create mode 100644 static/js/render/tool_use/common.js
 create mode 100644 static/js/render/tool_use/edit.js
 create mode 100644 static/js/render/tool_use/fallback.js
 create mode 100644 static/js/render/tool_use/glob.js
 create mode 100644 static/js/render/tool_use/grep.js
 create mode 100644 static/js/render/tool_use/read.js
 create mode 100644 static/js/render/tool_use/summary.js
 create mode 100644 static/js/render/tool_use/task.js
 create mode 100644 static/js/render/tool_use/todo_write.js
 create mode 100644 static/js/render/tool_use/write.js

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/registry.js b/static/js/render/registry.js
new file mode 100644
index 0000000..c37cbb4
--- /dev/null
+++ b/static/js/render/registry.js
@@ -0,0 +1,67 @@
+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 { renderToolUseFallback } from './tool_use/fallback.js';
+import { getToolSummary } from './tool_use/summary.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,
+};
+
+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,
+};
+
+export function renderToolUse(tool) {
+    const name = tool.name || 'unknown';
+    const fn = TOOL_USE_RENDERERS[name] ?? renderToolUseFallback;
+    return fn(tool);
+}
+
+export function renderToolResult(parsed) {
+    const rt = parsed.result_type || 'unknown';
+    const fn = TOOL_RESULT_RENDERERS[rt] ?? renderToolResultFallback;
+    return fn(parsed);
+}
diff --git a/static/js/render/registry.test.js b/static/js/render/registry.test.js
new file mode 100644
index 0000000..2eba6e2
--- /dev/null
+++ b/static/js/render/registry.test.js
@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest';
+import {
+    TOOL_USE_RENDERERS,
+    TOOL_RESULT_RENDERERS,
+    renderToolUse,
+    renderToolResult,
+    getToolSummary,
+} from './registry.js';
+
+const CORE_TOOL_USE = ['Bash', 'Read', 'Write', 'Edit', 'Glob', 'Grep', 'Task', 'TodoWrite', 'AskUserQuestion'];
+
+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('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('renderReadUse escapes file path in body', () => {
+        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');
+    });
+});
+
+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 with escaped path', () => {
+        expect(getToolSummary('Read', { file_path: 'a<b' })).toContain('&lt;b');
+    });
+});
+
+describe('renderToolUse fallback', () => {
+    it('uses JSON fallback for unknown tools', () => {
+        const html = renderToolUse({
+            name: 'WebFetch',
+            input: { url: 'https://example.com' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('example.com');
+    });
+});
+
+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');
+    });
+});
diff --git a/static/js/render/tool_result/bash.js b/static/js/render/tool_result/bash.js
new file mode 100644
index 0000000..bb58255
--- /dev/null
+++ b/static/js/render/tool_result/bash.js
@@ -0,0 +1,12 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { finishToolResult } from './common.js';
+
+export function renderBashResult(parsed) {
+    const exitCode = parsed.exit_code;
+    const status = parsed.interrupted ? 'interrupted' : (parsed.is_error ? `error (exit ${exitCode})` : (exitCode === 0 ? 'success' : `exit ${exitCode}`));
+    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..cb00362
--- /dev/null
+++ b/static/js/render/tool_result/fallback.js
@@ -0,0 +1,7 @@
+import { finishToolResult } from './common.js';
+
+export function renderToolResultFallback(parsed) {
+    const rt = parsed.result_type || 'unknown';
+    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..885f2f3
--- /dev/null
+++ b/static/js/render/tool_result/todo_write.js
@@ -0,0 +1,15 @@
+import { esc } from '../../shared/utils.js';
+import { finishToolResult } from './common.js';
+
+export function renderTodoWriteResult(parsed) {
+    const count = parsed.todo_count || 0;
+    const summary = `Todos updated (${count} items)`;
+    let body = '';
+    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>`;
+        }
+    }
+    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..a32904c
--- /dev/null
+++ b/static/js/render/tool_result/utils.js
@@ -0,0 +1,8 @@
+export 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;
+}
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..2d08b36
--- /dev/null
+++ b/static/js/render/tool_use/fallback.js
@@ -0,0 +1,12 @@
+import { esc, truncate } from '../../shared/utils.js';
+import { getToolSummary } from './summary.js';
+import { wrapToolUse } from './common.js';
+
+export function renderToolUseFallback(tool) {
+    const name = tool.name || 'unknown';
+    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..3b5acd9
--- /dev/null
+++ b/static/js/render/tool_use/summary.js
@@ -0,0 +1,16 @@
+import { esc, truncate } from '../../shared/utils.js';
+
+export 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;
+}
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/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;

From 4d1edfd77d8b6e12aead72bad92e70e464f70f4c Mon Sep 17 00:00:00 2001
From: yu-med <clean6378@gmail.com>
Date: Wed, 3 Jun 2026 03:01:03 +0800
Subject: [PATCH 2/5] refactor(frontend): decompose sessions.js tool rendering
 into dispatch registry

Extract tool use and tool result rendering from sessions.js into
static/js/render/ with TOOL_USE_RENDERERS and TOOL_RESULT_RENDERERS,
one module per tool type, mirroring utils/tool_dispatch.py. Register
WebFetch and WebSearch explicitly (JSON body via fallback helper).
Fix bash result summary when exit_code is missing (use "unknown" not
"exit undefined"). Tighten Vitest: fictitious tool for fallback path,
separate WebFetch/WebSearch registry tests.
Add Vitest coverage for registry wiring, HTML escaping, and getToolSummary.
Document the frontend registry in docs/architecture.md. No intended
visual or behavior change for existing sessions.
---
 static/js/render/registry.js            |  4 ++++
 static/js/render/registry.test.js       | 28 ++++++++++++++++++++++++-
 static/js/render/tool_result/bash.js    | 13 +++++++++++-
 static/js/render/tool_use/web_fetch.js  |  6 ++++++
 static/js/render/tool_use/web_search.js |  6 ++++++
 5 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 static/js/render/tool_use/web_fetch.js
 create mode 100644 static/js/render/tool_use/web_search.js

diff --git a/static/js/render/registry.js b/static/js/render/registry.js
index c37cbb4..55ce764 100644
--- a/static/js/render/registry.js
+++ b/static/js/render/registry.js
@@ -7,6 +7,8 @@ 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';
 
@@ -37,6 +39,8 @@ export const TOOL_USE_RENDERERS = {
     Task: renderTaskUse,
     TodoWrite: renderTodoWriteUse,
     AskUserQuestion: renderAskUserQuestionUse,
+    WebFetch: renderWebFetchUse,
+    WebSearch: renderWebSearchUse,
 };
 
 export const TOOL_RESULT_RENDERERS = {
diff --git a/static/js/render/registry.test.js b/static/js/render/registry.test.js
index 2eba6e2..efce04a 100644
--- a/static/js/render/registry.test.js
+++ b/static/js/render/registry.test.js
@@ -7,7 +7,7 @@ import {
     getToolSummary,
 } from './registry.js';
 
-const CORE_TOOL_USE = ['Bash', 'Read', 'Write', 'Edit', 'Glob', 'Grep', 'Task', 'TodoWrite', 'AskUserQuestion'];
+const CORE_TOOL_USE = ['Bash', 'Read', 'Write', 'Edit', 'Glob', 'Grep', 'Task', 'TodoWrite', 'AskUserQuestion', 'WebFetch', 'WebSearch'];
 
 const CORE_TOOL_RESULT = [
     'bash',
@@ -66,6 +66,12 @@ describe('TOOL_RESULT_RENDERERS', () => {
         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');
+    });
 });
 
 describe('getToolSummary', () => {
@@ -81,12 +87,32 @@ describe('getToolSummary', () => {
 
 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('renders WebFetch via registry (JSON body, not unknown-tool path)', () => {
         const html = renderToolUse({
             name: 'WebFetch',
             input: { url: 'https://example.com' },
         });
         expect(html).toContain('tool-call');
         expect(html).toContain('example.com');
+        expect(html).toContain('<pre><code>');
+    });
+
+    it('renders WebSearch via registry', () => {
+        const html = renderToolUse({
+            name: 'WebSearch',
+            input: { query: 'vitest registry' },
+        });
+        expect(html).toContain('tool-call');
+        expect(html).toContain('vitest registry');
     });
 });
 
diff --git a/static/js/render/tool_result/bash.js b/static/js/render/tool_result/bash.js
index bb58255..fcbcd79 100644
--- a/static/js/render/tool_result/bash.js
+++ b/static/js/render/tool_result/bash.js
@@ -3,7 +3,18 @@ import { finishToolResult } from './common.js';
 
 export function renderBashResult(parsed) {
     const exitCode = parsed.exit_code;
-    const status = parsed.interrupted ? 'interrupted' : (parsed.is_error ? `error (exit ${exitCode})` : (exitCode === 0 ? 'success' : `exit ${exitCode}`));
+    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>`;
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' });
+}

From 05b9f40fd13fd3b5e867d33fcfc5c40c846f4ad4 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 3 Jun 2026 04:07:02 +0800
Subject: [PATCH 3/5] refactor(frontend): decompose sessions.js tool rendering
 into dispatch registry

Extract tool use and tool result rendering into static/js/render/ with
TOOL_USE_RENDERERS and TOOL_RESULT_RENDERERS (one module per type),
mirroring utils/tool_dispatch.py. sessions.js keeps workspace orchestration.
Harden registry dispatch with hasOwnProperty lookups; register WebFetch and
WebSearch explicitly (JSON body via fallback helper). Fix bash result summary
when exit_code is missing; align todo_write summary count with parsed.todos.
Add Vitest for registry wiring, escaping, fallback vs registered tools, and
todo_write count consistency. Document render/registry.js in architecture.md.
---
 static/js/render/registry.js               | 18 +++++++++++---
 static/js/render/registry.test.js          | 29 ++++++++++++++++++++--
 static/js/render/tool_result/todo_write.js |  7 ++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/static/js/render/registry.js b/static/js/render/registry.js
index 55ce764..e2ebf61 100644
--- a/static/js/render/registry.js
+++ b/static/js/render/registry.js
@@ -58,14 +58,24 @@ export const TOOL_RESULT_RENDERERS = {
     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) {
     const name = tool.name || 'unknown';
-    const fn = TOOL_USE_RENDERERS[name] ?? renderToolUseFallback;
-    return fn(tool);
+    return getToolUseRenderer(name)(tool);
 }
 
 export function renderToolResult(parsed) {
     const rt = parsed.result_type || 'unknown';
-    const fn = TOOL_RESULT_RENDERERS[rt] ?? renderToolResultFallback;
-    return fn(parsed);
+    return getToolResultRenderer(rt)(parsed);
 }
diff --git a/static/js/render/registry.test.js b/static/js/render/registry.test.js
index efce04a..23a5d3c 100644
--- a/static/js/render/registry.test.js
+++ b/static/js/render/registry.test.js
@@ -6,6 +6,7 @@ import {
     renderToolResult,
     getToolSummary,
 } from './registry.js';
+import { renderWebFetchUse } from './tool_use/web_fetch.js';
 
 const CORE_TOOL_USE = ['Bash', 'Read', 'Write', 'Edit', 'Glob', 'Grep', 'Task', 'TodoWrite', 'AskUserQuestion', 'WebFetch', 'WebSearch'];
 
@@ -96,14 +97,23 @@ describe('renderToolUse fallback', () => {
         expect(TOOL_USE_RENDERERS.UnknownToolXYZ).toBeUndefined();
     });
 
-    it('renders WebFetch via registry (JSON body, not unknown-tool path)', () => {
+    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');
-        expect(html).toContain('<pre><code>');
     });
 
     it('renders WebSearch via registry', () => {
@@ -116,6 +126,21 @@ describe('renderToolUse fallback', () => {
     });
 });
 
+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' });
diff --git a/static/js/render/tool_result/todo_write.js b/static/js/render/tool_result/todo_write.js
index 885f2f3..6247daa 100644
--- a/static/js/render/tool_result/todo_write.js
+++ b/static/js/render/tool_result/todo_write.js
@@ -2,10 +2,13 @@ import { esc } from '../../shared/utils.js';
 import { finishToolResult } from './common.js';
 
 export function renderTodoWriteResult(parsed) {
-    const count = parsed.todo_count || 0;
+    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 (parsed.todos && parsed.todos.length) {
+    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>`;

From 2c1beddd9168fc4378287e39389766bb0d208f29 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 3 Jun 2026 04:12:03 +0800
Subject: [PATCH 4/5] fix(frontend): single-layer tool summary escaping and
 registry tests

---
 static/js/render/registry.test.js    | 13 ++++++++++---
 static/js/render/tool_use/summary.js | 15 ++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/static/js/render/registry.test.js b/static/js/render/registry.test.js
index 23a5d3c..78005d8 100644
--- a/static/js/render/registry.test.js
+++ b/static/js/render/registry.test.js
@@ -41,7 +41,7 @@ describe('TOOL_USE_RENDERERS', () => {
         expect(html).toContain('&lt;script&gt;');
     });
 
-    it('renderReadUse escapes file path in body', () => {
+    it('renderReadUse escapes file path in body and summary', () => {
         const html = renderToolUse({
             name: 'Read',
             input: { file_path: 'C:\\tmp\\<evil>.txt' },
@@ -81,8 +81,8 @@ describe('getToolSummary', () => {
         expect(getToolSummary('Bash', { command: 'ls -la' })).toContain('ls -la');
     });
 
-    it('formats Read summary with escaped path', () => {
-        expect(getToolSummary('Read', { file_path: 'a<b' })).toContain('&lt;b');
+    it('formats Read summary as plain text (escaping deferred to wrapToolUse)', () => {
+        expect(getToolSummary('Read', { file_path: 'a<b' })).toBe('Read: a<b');
     });
 });
 
@@ -147,4 +147,11 @@ describe('renderToolResult fallback', () => {
         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_use/summary.js b/static/js/render/tool_use/summary.js
index 3b5acd9..be9e7b0 100644
--- a/static/js/render/tool_use/summary.js
+++ b/static/js/render/tool_use/summary.js
@@ -1,15 +1,16 @@
-import { esc, truncate } from '../../shared/utils.js';
+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: ${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 === '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: ${esc(inp.subagent_type || '')} - ${esc(inp.description || '')}`;
+    if (name === 'Task') return `Task: ${inp.subagent_type || ''} - ${inp.description || ''}`;
     if (name === 'TodoWrite') return 'TodoWrite';
     if (name === 'AskUserQuestion') return 'AskUserQuestion';
     return name;

From 6a01ac53d6386a9167fa69bea3dca15f67d1ea58 Mon Sep 17 00:00:00 2001
From: chen <clean6378@gmail.com>
Date: Wed, 3 Jun 2026 06:43:46 +0800
Subject: [PATCH 5/5] fix(frontend): harden render registry dispatch and test
 toolResultHasBody

Introduce UNKNOWN_DISPATCH_KEY sentinel with documented non-registration
rule. Guard renderToolUse/renderToolResult against null input; guard
toolResultHasBody similarly. Add Vitest coverage for sentinel, null args,
and toolResultHasBody contract used by sessions.js.
---
 static/js/render/constants.js            |  5 +++
 static/js/render/registry.js             |  7 ++--
 static/js/render/registry.test.js        | 46 ++++++++++++++++++++++++
 static/js/render/tool_result/fallback.js |  3 +-
 static/js/render/tool_result/utils.js    |  5 ++-
 static/js/render/tool_use/fallback.js    |  3 +-
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 static/js/render/constants.js

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
index e2ebf61..893a8dd 100644
--- a/static/js/render/registry.js
+++ b/static/js/render/registry.js
@@ -11,6 +11,7 @@ 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';
@@ -71,11 +72,13 @@ function getToolResultRenderer(resultType) {
 }
 
 export function renderToolUse(tool) {
-    const name = tool.name || 'unknown';
+    if (!tool) return '';
+    const name = tool.name || UNKNOWN_DISPATCH_KEY;
     return getToolUseRenderer(name)(tool);
 }
 
 export function renderToolResult(parsed) {
-    const rt = parsed.result_type || 'unknown';
+    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
index 78005d8..432225e 100644
--- a/static/js/render/registry.test.js
+++ b/static/js/render/registry.test.js
@@ -5,7 +5,9 @@ import {
     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'];
@@ -32,6 +34,10 @@ describe('TOOL_USE_RENDERERS', () => {
         }
     });
 
+    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',
@@ -41,6 +47,11 @@ describe('TOOL_USE_RENDERERS', () => {
         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',
@@ -73,6 +84,41 @@ describe('TOOL_RESULT_RENDERERS', () => {
         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', () => {
diff --git a/static/js/render/tool_result/fallback.js b/static/js/render/tool_result/fallback.js
index cb00362..bef7425 100644
--- a/static/js/render/tool_result/fallback.js
+++ b/static/js/render/tool_result/fallback.js
@@ -1,7 +1,8 @@
 import { finishToolResult } from './common.js';
+import { UNKNOWN_DISPATCH_KEY } from '../constants.js';
 
 export function renderToolResultFallback(parsed) {
-    const rt = parsed.result_type || 'unknown';
+    const rt = parsed.result_type || UNKNOWN_DISPATCH_KEY;
     const summary = `Tool result (${rt})`;
     return finishToolResult(summary, '');
 }
diff --git a/static/js/render/tool_result/utils.js b/static/js/render/tool_result/utils.js
index a32904c..5ce0b8c 100644
--- a/static/js/render/tool_result/utils.js
+++ b/static/js/render/tool_result/utils.js
@@ -1,5 +1,8 @@
+import { UNKNOWN_DISPATCH_KEY } from '../constants.js';
+
 export function toolResultHasBody(parsed) {
-    const rt = parsed.result_type || 'unknown';
+    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;
diff --git a/static/js/render/tool_use/fallback.js b/static/js/render/tool_use/fallback.js
index 2d08b36..1c7bbfb 100644
--- a/static/js/render/tool_use/fallback.js
+++ b/static/js/render/tool_use/fallback.js
@@ -1,9 +1,10 @@
 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';
+    const name = tool.name || UNKNOWN_DISPATCH_KEY;
     const inp = tool.input || {};
     const summary = getToolSummary(name, inp);
     const s = JSON.stringify(inp, null, 2);