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.

Author: clean6378-max-it

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 = {

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');
     });
 });
 

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>`;

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' });
+}

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' });
+}