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.

Author: clean6378-max-it

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

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

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