@mseep/claudian 2.0.25

package/src/features/chat/rendering/ToolCallRenderer.ts

@@ -0,0 +1,1161 @@
+import { setIcon } from 'obsidian';
+
+import type { TodoItem } from '../../../core/tools/todo';
+import { getToolIcon, MCP_ICON_MARKER } from '../../../core/tools/toolIcons';
+import { extractResolvedAnswersFromResultText } from '../../../core/tools/toolInput';
+import {
+  isAgentLifecycleTool,
+  TOOL_APPLY_PATCH,
+  TOOL_ASK_USER_QUESTION,
+  TOOL_BASH,
+  TOOL_EDIT,
+  TOOL_ENTER_PLAN_MODE,
+  TOOL_EXIT_PLAN_MODE,
+  TOOL_GLOB,
+  TOOL_GREP,
+  TOOL_LS,
+  TOOL_READ,
+  TOOL_SKILL,
+  TOOL_TODO_WRITE,
+  TOOL_TOOL_SEARCH,
+  TOOL_WEB_FETCH,
+  TOOL_WEB_SEARCH,
+  TOOL_WRITE,
+  TOOL_WRITE_STDIN,
+} from '../../../core/tools/toolNames';
+import { extractToolResultContent } from '../../../core/tools/toolResultContent';
+import type { AskUserQuestionItem, AskUserQuestionOption, ToolCallInfo } from '../../../core/types';
+import type { DiffStats } from '../../../core/types/diff';
+import { appendMcpIcon } from '../../../shared/icons';
+import { parseApplyPatchDiffs, parseFileUpdateChangeDiffs } from '../../../utils/diff';
+import { setupCollapsible } from './collapsible';
+import { renderDiffContent, renderDiffStats } from './DiffRenderer';
+import { renderTodoItems } from './todoUtils';
+
+export function setToolIcon(el: HTMLElement, name: string): void {
+  const icon = getToolIcon(name);
+  if (icon === MCP_ICON_MARKER) {
+    appendMcpIcon(el);
+  } else {
+    setIcon(el, icon);
+  }
+}
+
+function stringifyToolValue(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  if (value === null || value === undefined) return '';
+
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+function getInputText(input: Record<string, unknown>, key: string, fallback = ''): string {
+  return stringifyToolValue(input[key]) || fallback;
+}
+
+export function getToolName(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case TOOL_TODO_WRITE: {
+      const todos = input.todos as Array<{ status: string }> | undefined;
+      if (todos && Array.isArray(todos) && todos.length > 0) {
+        const completed = todos.filter(t => t.status === 'completed').length;
+        return `Tasks ${completed}/${todos.length}`;
+      }
+      return 'Tasks';
+    }
+    case TOOL_ENTER_PLAN_MODE:
+      return 'Entering plan mode';
+    case TOOL_EXIT_PLAN_MODE:
+      return 'Plan complete';
+    default:
+      return name;
+  }
+}
+
+export function getToolSummary(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case TOOL_READ:
+    case TOOL_WRITE:
+    case TOOL_EDIT: {
+      const filePath = getInputText(input, 'file_path');
+      return fileNameOnly(filePath);
+    }
+    case TOOL_BASH: {
+      const cmd = getInputText(input, 'command');
+      return truncateText(cmd, 60);
+    }
+    case TOOL_GLOB:
+    case TOOL_GREP:
+      return getInputText(input, 'pattern');
+    case TOOL_WEB_SEARCH:
+      return getWebSearchSummary(input, 60);
+    case TOOL_WEB_FETCH:
+      return truncateText(getInputText(input, 'url'), 60);
+    case TOOL_LS:
+      return fileNameOnly(getInputText(input, 'path', '.'));
+    case TOOL_SKILL:
+      return getInputText(input, 'skill');
+    case TOOL_TOOL_SEARCH:
+      return truncateText(parseToolSearchQuery(getInputText(input, 'query')), 60);
+    case TOOL_TODO_WRITE:
+      return '';
+    case TOOL_APPLY_PATCH:
+      return getApplyPatchSummary(input);
+    case TOOL_WRITE_STDIN:
+      return getWriteStdinSummary(input);
+    default:
+      if (isAgentLifecycleTool(name)) {
+        return getAgentLifecycleSummary(name, input);
+      }
+      return '';
+  }
+}
+
+/** Combined name+summary for ARIA labels (collapsible regions need a single descriptive phrase). */
+export function getToolLabel(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case TOOL_READ:
+      return `Read: ${shortenPath(getInputText(input, 'file_path')) || 'file'}`;
+    case TOOL_WRITE:
+      return `Write: ${shortenPath(getInputText(input, 'file_path')) || 'file'}`;
+    case TOOL_EDIT:
+      return `Edit: ${shortenPath(getInputText(input, 'file_path')) || 'file'}`;
+    case TOOL_BASH: {
+      const cmd = getInputText(input, 'command', 'command');
+      return `Bash: ${cmd.length > 40 ? cmd.substring(0, 40) + '...' : cmd}`;
+    }
+    case TOOL_GLOB:
+      return `Glob: ${getInputText(input, 'pattern', 'files')}`;
+    case TOOL_GREP:
+      return `Grep: ${getInputText(input, 'pattern', 'pattern')}`;
+    case TOOL_WEB_SEARCH: {
+      return getWebSearchLabel(input, 40);
+    }
+    case TOOL_WEB_FETCH: {
+      const url = getInputText(input, 'url', 'url');
+      return `WebFetch: ${url.length > 40 ? url.substring(0, 40) + '...' : url}`;
+    }
+    case TOOL_LS:
+      return `LS: ${shortenPath(getInputText(input, 'path')) || '.'}`;
+    case TOOL_TODO_WRITE: {
+      const todos = input.todos as Array<{ status: string }> | undefined;
+      if (todos && Array.isArray(todos)) {
+        const completed = todos.filter(t => t.status === 'completed').length;
+        return `Tasks (${completed}/${todos.length})`;
+      }
+      return 'Tasks';
+    }
+    case TOOL_SKILL: {
+      const skillName = getInputText(input, 'skill', 'skill');
+      return `Skill: ${skillName}`;
+    }
+    case TOOL_TOOL_SEARCH: {
+      const tools = parseToolSearchQuery(getInputText(input, 'query'));
+      return `ToolSearch: ${tools || 'tools'}`;
+    }
+    case TOOL_ENTER_PLAN_MODE:
+      return 'Entering plan mode';
+    case TOOL_EXIT_PLAN_MODE:
+      return 'Plan complete';
+    case TOOL_APPLY_PATCH: {
+      const summary = getApplyPatchSummary(input);
+      return summary ? `apply_patch: ${summary}` : 'apply_patch';
+    }
+    case TOOL_WRITE_STDIN: {
+      const summary = getWriteStdinSummary(input);
+      return summary ? `write_stdin: ${summary}` : 'write_stdin';
+    }
+    default:
+      if (isAgentLifecycleTool(name)) {
+        const summary = getAgentLifecycleSummary(name, input);
+        return summary ? `${name}: ${summary}` : name;
+      }
+      return name;
+  }
+}
+
+export function fileNameOnly(filePath: string): string {
+  if (!filePath) return '';
+  const normalized = filePath.replace(/\\/g, '/');
+  return normalized.split('/').pop() ?? normalized;
+}
+
+function getApplyPatchSummary(input: Record<string, unknown>): string {
+  // Extract file paths from patch text markers
+  const patchText = typeof input.patch === 'string' ? input.patch : '';
+  const patchFiles = [...patchText.matchAll(/^\*\*\* (?:Add|Update|Delete) File: (.+)$/gm)]
+    .map(m => m[1]?.trim() ?? '');
+
+  // Also check changes array
+  const changes = input.changes;
+  const changeFiles = Array.isArray(changes)
+    ? (changes as Array<{ path?: string }>)
+        .map(c => c.path)
+        .filter((p): p is string => !!p)
+    : [];
+
+  const files = [...new Set([...patchFiles, ...changeFiles])];
+  if (files.length === 0) return patchText ? 'patch' : '';
+  if (files.length === 1) return fileNameOnly(files[0]);
+  return `${files.length} files`;
+}
+
+function getWriteStdinSummary(input: Record<string, unknown>): string {
+  const sessionId = stringifyToolValue(input.session_id ?? input.sessionId);
+  const chars = typeof input.chars === 'string' ? input.chars.replace(/\n/g, '\\n') : '';
+  if (chars) {
+    const preview = chars.length > 24 ? `${chars.slice(0, 24)}...` : chars;
+    return sessionId ? `#${sessionId} ${preview}` : preview;
+  }
+  return sessionId ? `#${sessionId}` : '';
+}
+
+function getAgentLifecycleSummary(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case 'spawn_agent': {
+      const msg = typeof input.message === 'string' ? input.message : '';
+      return msg.length > 50 ? `${msg.slice(0, 50)}...` : msg;
+    }
+    case 'send_input': {
+      const msg = typeof input.message === 'string' ? input.message : '';
+      return msg.length > 40 ? `${msg.slice(0, 40)}...` : msg;
+    }
+    case 'wait': {
+      const ids = Array.isArray(input.ids) ? input.ids.length : 0;
+      const timeoutMs = typeof input.timeout_ms === 'number' ? input.timeout_ms : undefined;
+      const parts: string[] = [];
+      if (ids > 0) parts.push(`${ids} agent${ids === 1 ? '' : 's'}`);
+      if (timeoutMs !== undefined) parts.push(`${Math.round(timeoutMs / 1000)}s`);
+      return parts.join(', ');
+    }
+    case 'resume_agent':
+    case 'close_agent':
+      return '';
+    default:
+      return '';
+  }
+}
+
+function shortenPath(filePath: string | undefined): string {
+  if (!filePath) return '';
+  const normalized = filePath.replace(/\\/g, '/');
+  const parts = normalized.split('/');
+  if (parts.length <= 3) return normalized;
+  return '.../' + parts.slice(-2).join('/');
+}
+
+function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+}
+
+function parseToolSearchQuery(query: string | undefined): string {
+  if (!query) return '';
+  const selectPrefix = 'select:';
+  const body = query.startsWith(selectPrefix) ? query.slice(selectPrefix.length) : query;
+  return body.split(',').map(s => s.trim()).filter(Boolean).join(', ');
+}
+
+interface WebSearchLink {
+  title: string;
+  url: string;
+}
+
+interface WebSearchDisplayData {
+  actionType: string;
+  query: string;
+  queries: string[];
+  url: string;
+  pattern: string;
+}
+
+function normalizeWebSearchDisplayData(input: Record<string, unknown>): WebSearchDisplayData {
+  const queries = Array.isArray(input.queries)
+    ? input.queries
+        .filter((entry): entry is string => typeof entry === 'string' && entry.trim().length > 0)
+        .map(entry => entry.trim())
+    : [];
+
+  const query = typeof input.query === 'string' && input.query.trim()
+    ? input.query.trim()
+    : queries[0] ?? '';
+  const url = typeof input.url === 'string' && input.url.trim() ? input.url.trim() : '';
+  const pattern = typeof input.pattern === 'string' && input.pattern.trim() ? input.pattern.trim() : '';
+
+  const explicitActionType = typeof input.actionType === 'string' && input.actionType.trim()
+    ? input.actionType.trim()
+    : '';
+  const actionType = explicitActionType
+    || (url && pattern ? 'find_in_page' : url ? 'open_page' : (query || queries.length > 0) ? 'search' : '');
+
+  return { actionType, query, queries, url, pattern };
+}
+
+function getWebSearchSummary(input: Record<string, unknown>, maxLength: number): string {
+  const data = normalizeWebSearchDisplayData(input);
+
+  switch (data.actionType) {
+    case 'open_page':
+      return truncateText(`Open ${data.url || 'page'}`, maxLength);
+    case 'find_in_page': {
+      const target = data.pattern ? `Find "${data.pattern}"` : 'Find in page';
+      const suffix = data.url ? ` in ${data.url}` : '';
+      return truncateText(target + suffix, maxLength);
+    }
+    case 'search':
+      return truncateText(data.query || data.queries[0] || '', maxLength);
+    default:
+      return truncateText(data.query || data.url || data.pattern || '', maxLength);
+  }
+}
+
+function getWebSearchLabel(input: Record<string, unknown>, maxLength: number): string {
+  const summary = getWebSearchSummary(input, maxLength);
+  return `WebSearch: ${summary || 'search'}`;
+}
+
+function appendToolLink(parent: HTMLElement, title: string, url: string): void {
+  const linkEl = parent.createEl('a', { cls: 'claudian-tool-link' });
+  linkEl.setAttribute('href', url);
+  linkEl.setAttribute('target', '_blank');
+  linkEl.setAttribute('rel', 'noopener noreferrer');
+
+  const iconEl = linkEl.createSpan({ cls: 'claudian-tool-link-icon' });
+  setIcon(iconEl, 'external-link');
+
+  linkEl.createSpan({ cls: 'claudian-tool-link-title', text: title });
+}
+
+function isPlaceholderWebSearchResult(result: string | undefined): boolean {
+  if (!result) return true;
+  const normalized = result.trim().toLowerCase();
+  return normalized === '' || normalized === 'search complete';
+}
+
+function parseWebSearchResult(result: string): { links: WebSearchLink[]; summary: string } | null {
+  const linksMatch = result.match(/Links:\s*(\[[\s\S]*?\])(?:\n|$)/);
+  if (!linksMatch) return null;
+
+  try {
+    const parsed = JSON.parse(linksMatch[1]) as WebSearchLink[];
+    if (!Array.isArray(parsed) || parsed.length === 0) return null;
+
+    const linksEndIndex = result.indexOf(linksMatch[0]) + linksMatch[0].length;
+    const summary = result.slice(linksEndIndex).trim();
+    return { links: parsed.filter(l => l.title && l.url), summary };
+  } catch {
+    return null;
+  }
+}
+
+function renderWebSearchActionExpanded(container: HTMLElement, input: Record<string, unknown>): boolean {
+  const data = normalizeWebSearchDisplayData(input);
+  const hasStructuredData = Boolean(data.actionType || data.query || data.queries.length || data.url || data.pattern);
+  if (!hasStructuredData) {
+    return false;
+  }
+
+  const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+
+  switch (data.actionType) {
+    case 'open_page':
+      linesEl.createDiv({ cls: 'claudian-tool-line', text: 'Open page' });
+      if (data.url) {
+        appendToolLink(linesEl, data.url, data.url);
+      } else {
+        linesEl.createDiv({ cls: 'claudian-tool-line', text: 'URL unavailable' });
+      }
+      return true;
+
+    case 'find_in_page':
+      linesEl.createDiv({ cls: 'claudian-tool-line', text: 'Find in page' });
+      if (data.url) {
+        appendToolLink(linesEl, data.url, data.url);
+      } else {
+        linesEl.createDiv({ cls: 'claudian-tool-line', text: 'URL unavailable' });
+      }
+      if (data.pattern) {
+        linesEl.createDiv({ cls: 'claudian-tool-line', text: `Pattern: ${data.pattern}` });
+      }
+      return true;
+
+    case 'search':
+    default: {
+      const primaryQuery = data.query || data.queries[0];
+      linesEl.createDiv({
+        cls: 'claudian-tool-line',
+        text: primaryQuery ? `Query: ${primaryQuery}` : 'Search web',
+      });
+
+      const alternateQueries = data.queries.filter(query => query !== primaryQuery);
+      for (const query of alternateQueries.slice(0, 4)) {
+        linesEl.createDiv({ cls: 'claudian-tool-line', text: `Alt query: ${query}` });
+      }
+      if (alternateQueries.length > 4) {
+        linesEl.createDiv({
+          cls: 'claudian-tool-truncated',
+          text: `... ${alternateQueries.length - 4} more queries`,
+        });
+      }
+      return true;
+    }
+  }
+}
+
+function renderWebSearchExpanded(
+  container: HTMLElement,
+  input: Record<string, unknown>,
+  result: string | undefined,
+): void {
+  const parsed = result ? parseWebSearchResult(result) : null;
+  if (parsed && parsed.links.length > 0) {
+    const linksEl = container.createDiv({ cls: 'claudian-tool-lines' });
+    for (const link of parsed.links) {
+      appendToolLink(linksEl, link.title, link.url);
+    }
+
+    if (parsed.summary) {
+      const summaryEl = container.createDiv({ cls: 'claudian-tool-web-summary' });
+      summaryEl.setText(parsed.summary.length > 800 ? parsed.summary.slice(0, 800) + '...' : parsed.summary);
+    }
+    return;
+  }
+
+  const data = normalizeWebSearchDisplayData(input);
+  const shouldRenderAction = Boolean(data.actionType || data.query || data.queries.length || data.url || data.pattern)
+    && (!result
+      || isPlaceholderWebSearchResult(result)
+      || data.actionType === 'open_page'
+      || data.actionType === 'find_in_page');
+
+  if (shouldRenderAction && renderWebSearchActionExpanded(container, input)) {
+    if (result && !isPlaceholderWebSearchResult(result)) {
+      renderLinesExpanded(container, result, 12);
+    }
+    return;
+  }
+
+  if (result) {
+    renderLinesExpanded(container, result, 20);
+    return;
+  }
+
+  if (renderWebSearchActionExpanded(container, input)) {
+    return;
+  }
+
+  container.createDiv({ cls: 'claudian-tool-empty', text: 'No result' });
+}
+
+function renderFileSearchExpanded(container: HTMLElement, result: string): void {
+  const lines = result.split(/\r?\n/).filter(line => line.trim());
+  if (lines.length === 0) {
+    container.createDiv({ cls: 'claudian-tool-empty', text: 'No matches found' });
+    return;
+  }
+  renderLinesExpanded(container, result, 15, true);
+}
+
+function renderLinesExpanded(
+  container: HTMLElement,
+  result: string,
+  maxLines: number,
+  hoverable = false
+): void {
+  const lines = result.split(/\r?\n/);
+  const truncated = lines.length > maxLines;
+  const displayLines = truncated ? lines.slice(0, maxLines) : lines;
+
+  const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+  for (const line of displayLines) {
+    const stripped = line.replace(/^\s*\d+→/, '');
+    const lineEl = linesEl.createDiv({ cls: 'claudian-tool-line' });
+    if (hoverable) lineEl.addClass('hoverable');
+    lineEl.setText(stripped || ' ');
+  }
+
+  if (truncated) {
+    linesEl.createDiv({
+      cls: 'claudian-tool-truncated',
+      text: `... ${lines.length - maxLines} more lines`,
+    });
+  }
+}
+
+function renderToolSearchExpanded(container: HTMLElement, result: string): void {
+  let toolNames: string[] = [];
+  try {
+    const parsed = JSON.parse(result) as Array<{ type: string; tool_name: string }>;
+    if (Array.isArray(parsed)) {
+      toolNames = parsed
+        .filter(item => item.type === 'tool_reference' && item.tool_name)
+        .map(item => item.tool_name);
+    }
+  } catch {
+    // Fall back to showing raw result
+  }
+
+  if (toolNames.length === 0) {
+    renderLinesExpanded(container, result, 20);
+    return;
+  }
+
+  for (const name of toolNames) {
+    const lineEl = container.createDiv({ cls: 'claudian-tool-search-item' });
+    const iconEl = lineEl.createSpan({ cls: 'claudian-tool-search-icon' });
+    setToolIcon(iconEl, name);
+    lineEl.createSpan({ text: name });
+  }
+}
+
+function renderWebFetchExpanded(container: HTMLElement, result: string): void {
+  const maxChars = 500;
+  const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+  const lineEl = linesEl.createDiv({ cls: 'claudian-tool-line claudian-tool-line-wrap' });
+
+  if (result.length > maxChars) {
+    lineEl.setText(result.slice(0, maxChars));
+    linesEl.createDiv({
+      cls: 'claudian-tool-truncated',
+      text: `... ${result.length - maxChars} more characters`,
+    });
+  } else {
+    lineEl.setText(result);
+  }
+}
+
+function renderApplyPatchExpanded(
+  container: HTMLElement,
+  input: Record<string, unknown>,
+  result: string | undefined,
+): void {
+  const patchText = typeof input.patch === 'string' ? input.patch : '';
+  const parsedDiffs = getApplyPatchFileDiffs(input);
+
+  if (result && /verification failed|^[Ee]rror:/.test(result.trim())) {
+    renderLinesExpanded(container, result, 20);
+  }
+
+  if (parsedDiffs.length > 0) {
+    renderApplyPatchDiffSections(container, parsedDiffs);
+    return;
+  }
+
+  const changes = Array.isArray(input.changes) ? input.changes : [];
+  if (changes.length > 0) {
+    const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+    for (const change of changes as unknown[]) {
+      if (!change || typeof change !== 'object' || Array.isArray(change)) continue;
+      const changeRecord = change as Record<string, unknown>;
+      const path = typeof changeRecord.path === 'string' ? changeRecord.path : '';
+      if (!path) continue;
+      const movedTo = readMoveTarget(changeRecord.kind);
+      const pathText = movedTo ? `${path} -> ${movedTo}` : path;
+      linesEl.createDiv({ cls: 'claudian-tool-line', text: pathText });
+    }
+    return;
+  }
+
+  if (patchText) {
+    renderLinesExpanded(container, patchText, 80);
+    return;
+  }
+
+  if (result) {
+    const fileMatches = [...result.matchAll(/(?:update|add|delete|create|modify|Applied:\s*)(?:\w+:\s*)?([^\n,]+)/gi)];
+    if (fileMatches.length > 0) {
+      const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+      for (const match of fileMatches) {
+        const filePath = match[1]?.trim();
+        if (filePath) {
+          const lineEl = linesEl.createDiv({ cls: 'claudian-tool-line' });
+          lineEl.setText(filePath);
+        }
+      }
+      return;
+    }
+    renderLinesExpanded(container, result, 20);
+    return;
+  }
+
+  container.createDiv({ cls: 'claudian-tool-empty', text: 'No result' });
+}
+
+function renderApplyPatchDiffSections(
+  container: HTMLElement,
+  fileDiffs: ReturnType<typeof parseApplyPatchDiffs>,
+): void {
+  for (const fileDiff of fileDiffs) {
+    const sectionEl = container.createDiv({ cls: 'claudian-tool-patch-section' });
+
+    if (fileDiff.operation === 'delete' && fileDiff.diffLines.length === 0) {
+      sectionEl.createDiv({ cls: 'claudian-tool-empty', text: 'File deleted' });
+      continue;
+    }
+
+    if (fileDiff.diffLines.length === 0) {
+      sectionEl.createDiv({ cls: 'claudian-tool-empty', text: 'No textual diff available' });
+      continue;
+    }
+
+    const diffRow = sectionEl.createDiv({ cls: 'claudian-write-edit-diff-row' });
+    const diffEl = diffRow.createDiv({ cls: 'claudian-write-edit-diff' });
+    renderDiffContent(diffEl, fileDiff.diffLines);
+  }
+}
+
+function readMoveTarget(kind: unknown): string | undefined {
+  if (!kind || typeof kind !== 'object' || Array.isArray(kind)) {
+    return undefined;
+  }
+  const record = kind as Record<string, unknown>;
+  return typeof record.move_path === 'string' ? record.move_path : undefined;
+}
+
+function getApplyPatchFileDiffs(input: Record<string, unknown>): ReturnType<typeof parseApplyPatchDiffs> {
+  const patchText = typeof input.patch === 'string' ? input.patch : '';
+  const parsedDiffs = patchText ? parseApplyPatchDiffs(patchText) : [];
+  return parsedDiffs.length > 0 ? parsedDiffs : parseFileUpdateChangeDiffs(input.changes);
+}
+
+function getApplyPatchDiffStats(input: Record<string, unknown>): DiffStats | undefined {
+  const fileDiffs = getApplyPatchFileDiffs(input);
+  if (fileDiffs.length === 0) return undefined;
+
+  const stats = fileDiffs.reduce<DiffStats>(
+    (acc, fileDiff) => ({
+      added: acc.added + fileDiff.stats.added,
+      removed: acc.removed + fileDiff.stats.removed,
+    }),
+    { added: 0, removed: 0 }
+  );
+
+  return stats.added > 0 || stats.removed > 0 ? stats : undefined;
+}
+
+function getDiffStatsAriaLabel(stats: DiffStats): string {
+  return `Changes: +${stats.added} -${stats.removed}`;
+}
+
+function renderAgentLifecycleExpanded(container: HTMLElement, result: string): void {
+  // Try to parse as JSON for structured display
+  const trimmed = result.trim();
+  if (trimmed.startsWith('{')) {
+    try {
+      const parsed = JSON.parse(trimmed) as Record<string, unknown>;
+      const linesEl = container.createDiv({ cls: 'claudian-tool-lines' });
+      for (const [key, value] of Object.entries(parsed)) {
+        const lineEl = linesEl.createDiv({ cls: 'claudian-tool-line' });
+        const displayValue = formatToolDisplayValue(value);
+        lineEl.setText(`${key}: ${displayValue}`);
+      }
+      return;
+    } catch { /* fall through to plain text */ }
+  }
+  renderLinesExpanded(container, result, 20);
+}
+
+function formatToolDisplayValue(value: unknown): string {
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return `${value}`;
+  }
+  if (value === null || value === undefined) {
+    return '';
+  }
+  return JSON.stringify(value);
+}
+
+export function renderExpandedContent(
+  container: HTMLElement,
+  toolName: string,
+  result: string | undefined,
+  input: Record<string, unknown> = {},
+): void {
+  if (!result && toolName !== TOOL_WEB_SEARCH && toolName !== TOOL_BASH && toolName !== TOOL_APPLY_PATCH) {
+    container.createDiv({ cls: 'claudian-tool-empty', text: 'No result' });
+    return;
+  }
+
+  const resolvedResult = result ?? '';
+
+  if (isAgentLifecycleTool(toolName)) {
+    renderAgentLifecycleExpanded(container, resolvedResult);
+    return;
+  }
+
+  switch (toolName) {
+    case TOOL_BASH:
+      renderBashContent(container, input, resolvedResult);
+      break;
+    case TOOL_WRITE_STDIN:
+      renderLinesExpanded(container, resolvedResult, 20);
+      break;
+    case TOOL_READ:
+      renderLinesExpanded(container, resolvedResult, 15);
+      break;
+    case TOOL_GLOB:
+    case TOOL_GREP:
+    case TOOL_LS:
+      renderFileSearchExpanded(container, resolvedResult);
+      break;
+    case TOOL_WEB_SEARCH:
+      renderWebSearchExpanded(container, input, result);
+      break;
+    case TOOL_WEB_FETCH:
+      renderWebFetchExpanded(container, resolvedResult);
+      break;
+    case TOOL_TOOL_SEARCH:
+      renderToolSearchExpanded(container, resolvedResult);
+      break;
+    case TOOL_APPLY_PATCH:
+      renderApplyPatchExpanded(container, input, result);
+      break;
+    default:
+      renderLinesExpanded(container, resolvedResult, 20);
+      break;
+  }
+}
+
+function getTodos(input: Record<string, unknown>): TodoItem[] | undefined {
+  const todos = input.todos;
+  if (!todos || !Array.isArray(todos)) return undefined;
+  return todos as TodoItem[];
+}
+
+function getCurrentTask(input: Record<string, unknown>): TodoItem | undefined {
+  const todos = getTodos(input);
+  if (!todos) return undefined;
+  return todos.find(t => t.status === 'in_progress');
+}
+
+function areAllTodosCompleted(input: Record<string, unknown>): boolean {
+  const todos = getTodos(input);
+  if (!todos || todos.length === 0) return false;
+  return todos.every(t => t.status === 'completed');
+}
+
+function resetStatusElement(statusEl: HTMLElement, statusClass: string, ariaLabel: string): void {
+  statusEl.className = 'claudian-tool-status';
+  statusEl.empty();
+  statusEl.addClass(statusClass);
+  statusEl.setAttribute('aria-label', ariaLabel);
+}
+
+const STATUS_ICONS: Record<string, string> = {
+  completed: 'check',
+  error: 'x',
+  blocked: 'shield-off',
+};
+
+function setTodoWriteStatus(statusEl: HTMLElement, input: Record<string, unknown>): void {
+  const isComplete = areAllTodosCompleted(input);
+  const status = isComplete ? 'completed' : 'running';
+  const ariaLabel = isComplete ? 'Status: completed' : 'Status: in progress';
+  resetStatusElement(statusEl, `status-${status}`, ariaLabel);
+  if (isComplete) setIcon(statusEl, 'check');
+}
+
+function setToolStatus(statusEl: HTMLElement, status: ToolCallInfo['status']): void {
+  resetStatusElement(statusEl, `status-${status}`, `Status: ${status}`);
+  const icon = STATUS_ICONS[status];
+  if (icon) setIcon(statusEl, icon);
+}
+
+function setApplyPatchHeaderRight(statusEl: HTMLElement, toolCall: ToolCallInfo): void {
+  const isError = toolCall.status === 'error' || toolCall.status === 'blocked';
+  const stats = isError ? undefined : getApplyPatchDiffStats(toolCall.input);
+  if (!stats) {
+    setToolStatus(statusEl, toolCall.status);
+    return;
+  }
+
+  statusEl.className = 'claudian-tool-status claudian-write-edit-stats';
+  statusEl.empty();
+  statusEl.setAttribute('aria-label', getDiffStatsAriaLabel(stats));
+  renderDiffStats(statusEl, stats);
+}
+
+function setGenericToolHeaderRight(statusEl: HTMLElement, toolCall: ToolCallInfo): void {
+  if (toolCall.name === TOOL_APPLY_PATCH) {
+    setApplyPatchHeaderRight(statusEl, toolCall);
+    return;
+  }
+
+  setToolStatus(statusEl, toolCall.status);
+}
+
+export function renderTodoWriteResult(
+  container: HTMLElement,
+  input: Record<string, unknown>
+): void {
+  container.empty();
+  container.addClass('claudian-todo-panel-content');
+  container.addClass('claudian-todo-list-container');
+
+  const todos = input.todos as TodoItem[] | undefined;
+  if (!todos || !Array.isArray(todos)) {
+    const item = container.createSpan({ cls: 'claudian-tool-result-item' });
+    item.setText('Tasks updated');
+    return;
+  }
+
+  renderTodoItems(container, todos);
+}
+
+export function isBlockedToolResult(content: unknown, isError?: boolean): boolean {
+  const lower = extractToolResultContent(content, { fallbackIndent: 2 }).toLowerCase();
+  if (lower.includes('outside the vault')) return true;
+  if (lower.includes('access denied')) return true;
+  if (lower.includes('user denied')) return true;
+  if (lower.includes('approval')) return true;
+  if (isError && lower.includes('deny')) return true;
+  return false;
+}
+
+interface ToolElementStructure {
+  toolEl: HTMLElement;
+  header: HTMLElement;
+  iconEl: HTMLElement;
+  nameEl: HTMLElement;
+  summaryEl: HTMLElement;
+  statusEl: HTMLElement;
+  content: HTMLElement;
+  currentTaskEl: HTMLElement | null;
+}
+
+export interface ToolCallRenderOptions {
+  initiallyExpanded?: boolean;
+}
+
+function createToolElementStructure(
+  parentEl: HTMLElement,
+  toolCall: ToolCallInfo
+): ToolElementStructure {
+  const toolEl = parentEl.createDiv({ cls: 'claudian-tool-call' });
+  if (toolCall.name === TOOL_BASH) {
+    toolEl.addClass('claudian-tool-call-bash');
+  }
+
+  const header = toolEl.createDiv({ cls: 'claudian-tool-header' });
+  header.setAttribute('tabindex', '0');
+  header.setAttribute('role', 'button');
+
+  const iconEl = header.createSpan({ cls: 'claudian-tool-icon' });
+  iconEl.setAttribute('aria-hidden', 'true');
+  setToolIcon(iconEl, toolCall.name);
+
+  const nameEl = header.createSpan({ cls: 'claudian-tool-name' });
+  nameEl.setText(getToolName(toolCall.name, toolCall.input));
+
+  const summaryEl = header.createSpan({ cls: 'claudian-tool-summary' });
+  summaryEl.setText(getToolSummary(toolCall.name, toolCall.input));
+
+  const currentTaskEl = toolCall.name === TOOL_TODO_WRITE
+    ? createCurrentTaskPreview(header, toolCall.input)
+    : null;
+
+  const statusEl = header.createSpan({ cls: 'claudian-tool-status' });
+
+  const content = toolEl.createDiv({ cls: 'claudian-tool-content' });
+
+  return { toolEl, header, iconEl, nameEl, summaryEl, statusEl, content, currentTaskEl };
+}
+
+function formatAnswer(raw: unknown): string {
+  if (Array.isArray(raw)) return raw.join(', ');
+  if (typeof raw === 'string') return raw;
+  return '';
+}
+
+function resolveAskUserAnswers(toolCall: ToolCallInfo): Record<string, unknown> | undefined {
+  if (toolCall.resolvedAnswers) return toolCall.resolvedAnswers;
+
+  const parsed = extractResolvedAnswersFromResultText(toolCall.result);
+  if (parsed) {
+    toolCall.resolvedAnswers = parsed;
+    return parsed;
+  }
+
+  return undefined;
+}
+
+function renderAskUserQuestionResult(container: HTMLElement, toolCall: ToolCallInfo): boolean {
+  container.empty();
+  const questions = toolCall.input.questions as AskUserQuestionItem[] | undefined;
+  const answers = resolveAskUserAnswers(toolCall);
+  if (!questions || !Array.isArray(questions) || !answers) return false;
+
+  const reviewEl = container.createDiv({ cls: 'claudian-ask-review' });
+  for (let i = 0; i < questions.length; i++) {
+    const q = questions[i];
+    const answer = formatAnswer(
+      (q.id ? answers[q.id] : undefined) ?? answers[q.question]
+    );
+    const pairEl = reviewEl.createDiv({ cls: 'claudian-ask-review-pair' });
+    pairEl.createDiv({ text: `${i + 1}.`, cls: 'claudian-ask-review-num' });
+    const bodyEl = pairEl.createDiv({ cls: 'claudian-ask-review-body' });
+    bodyEl.createDiv({ text: q.question, cls: 'claudian-ask-review-q-text' });
+    bodyEl.createDiv({
+      text: answer || 'Not answered',
+      cls: answer ? 'claudian-ask-review-a-text' : 'claudian-ask-review-empty',
+    });
+  }
+
+  return true;
+}
+
+function renderAskUserQuestionFallback(container: HTMLElement, toolCall: ToolCallInfo, initialText?: string): void {
+  container.empty();
+
+  const questions = Array.isArray(toolCall.input.questions)
+    ? toolCall.input.questions as AskUserQuestionItem[]
+    : [];
+
+  if (questions.length === 0) {
+    contentFallback(container, initialText || toolCall.result || 'Waiting for answer...');
+    return;
+  }
+
+  if (initialText || toolCall.result) {
+    container.createDiv({
+      cls: 'claudian-ask-review-prompt',
+      text: initialText || toolCall.result || 'Waiting for answer...',
+    });
+  }
+
+  for (let questionIndex = 0; questionIndex < questions.length; questionIndex++) {
+    const question = questions[questionIndex];
+    const reviewEl = container.createDiv({ cls: 'claudian-ask-review' });
+    const pairEl = reviewEl.createDiv({ cls: 'claudian-ask-review-pair' });
+    pairEl.createDiv({ text: `${questionIndex + 1}.`, cls: 'claudian-ask-review-num' });
+    const bodyEl = pairEl.createDiv({ cls: 'claudian-ask-review-body' });
+    bodyEl.createDiv({ text: question.question, cls: 'claudian-ask-review-q-text' });
+
+    if (!Array.isArray(question.options) || question.options.length === 0) {
+      bodyEl.createDiv({ cls: 'claudian-ask-review-empty', text: 'No options recorded' });
+      continue;
+    }
+
+    const listEl = bodyEl.createDiv({ cls: 'claudian-ask-list' });
+    question.options.forEach((option, optionIndex) => {
+      renderAskUserQuestionOption(listEl, option, optionIndex, question.multiSelect === true);
+    });
+  }
+}
+
+function renderAskUserQuestionOption(
+  parentEl: HTMLElement,
+  option: AskUserQuestionOption,
+  optionIndex: number,
+  isMultiSelect: boolean,
+): void {
+  const itemEl = parentEl.createDiv({ cls: 'claudian-ask-item is-disabled' });
+
+  if (isMultiSelect) {
+    itemEl.createDiv({ cls: 'claudian-ask-check', text: '[ ] ' });
+  } else {
+    itemEl.createDiv({ cls: 'claudian-ask-item-num', text: `${optionIndex + 1}. ` });
+  }
+
+  const contentEl = itemEl.createDiv({ cls: 'claudian-ask-item-content' });
+  const labelRowEl = contentEl.createDiv({ cls: 'claudian-ask-label-row' });
+  labelRowEl.createDiv({ cls: 'claudian-ask-item-label', text: option.label });
+
+  if (option.description) {
+    contentEl.createDiv({ cls: 'claudian-ask-item-desc', text: option.description });
+  }
+}
+
+function contentFallback(container: HTMLElement, text: string): void {
+  const resultRow = container.createDiv({ cls: 'claudian-tool-result-row' });
+  const resultText = resultRow.createSpan({ cls: 'claudian-tool-result-text' });
+  resultText.setText(text);
+}
+
+function renderBashContent(
+  container: HTMLElement,
+  input: Record<string, unknown>,
+  result: string,
+  initialText?: string,
+): void {
+  const command = (input.command as string) || '';
+  if (command) {
+    const cmdEl = container.createDiv({ cls: 'claudian-tool-bash-command' });
+    cmdEl.setText(`$ ${command}`);
+  }
+  if (initialText) {
+    contentFallback(container, initialText);
+  } else if (result) {
+    renderLinesExpanded(container, result, 20);
+  } else {
+    container.createDiv({ cls: 'claudian-tool-empty', text: 'No result' });
+  }
+}
+
+function createCurrentTaskPreview(
+  header: HTMLElement,
+  input: Record<string, unknown>
+): HTMLElement {
+  const currentTaskEl = header.createSpan({ cls: 'claudian-tool-current' });
+  const currentTask = getCurrentTask(input);
+  if (currentTask) {
+    currentTaskEl.setText(currentTask.activeForm);
+  }
+  return currentTaskEl;
+}
+
+function createTodoToggleHandler(
+  currentTaskEl: HTMLElement | null,
+  statusEl: HTMLElement | null,
+  onExpandChange?: (expanded: boolean) => void
+): (expanded: boolean) => void {
+  return (expanded: boolean) => {
+    if (onExpandChange) onExpandChange(expanded);
+    if (currentTaskEl) {
+      currentTaskEl.toggleClass('claudian-hidden', expanded);
+    }
+    if (statusEl) {
+      statusEl.toggleClass('claudian-hidden', expanded);
+    }
+  };
+}
+
+function renderToolContent(
+  content: HTMLElement,
+  toolCall: ToolCallInfo,
+  initialText?: string
+): void {
+  if (toolCall.name === TOOL_TODO_WRITE) {
+    content.addClass('claudian-tool-content-todo');
+    renderTodoWriteResult(content, toolCall.input);
+  } else if (toolCall.name === TOOL_ASK_USER_QUESTION) {
+    content.addClass('claudian-tool-content-ask');
+    if (initialText) {
+      renderAskUserQuestionFallback(content, toolCall, 'Waiting for answer...');
+    } else if (!renderAskUserQuestionResult(content, toolCall)) {
+      renderAskUserQuestionFallback(content, toolCall);
+    }
+  } else if (toolCall.name === TOOL_BASH) {
+    renderBashContent(content, toolCall.input, toolCall.result ?? '', initialText);
+  } else if (initialText) {
+    contentFallback(content, initialText);
+  } else {
+    renderExpandedContent(content, toolCall.name, toolCall.result, toolCall.input);
+  }
+}
+
+export function renderToolCall(
+  parentEl: HTMLElement,
+  toolCall: ToolCallInfo,
+  toolCallElements: Map<string, HTMLElement>,
+  options: ToolCallRenderOptions = {}
+): HTMLElement {
+  const { toolEl, header, statusEl, content, currentTaskEl } =
+    createToolElementStructure(parentEl, toolCall);
+
+  toolEl.dataset.toolId = toolCall.id;
+  toolCallElements.set(toolCall.id, toolEl);
+
+  setGenericToolHeaderRight(statusEl, toolCall);
+
+  renderToolContent(content, toolCall, 'Running...');
+
+  const initiallyExpanded = options.initiallyExpanded ?? false;
+  const state = { isExpanded: initiallyExpanded };
+  toolCall.isExpanded = initiallyExpanded;
+  const todoStatusEl = toolCall.name === TOOL_TODO_WRITE ? statusEl : null;
+  setupCollapsible(toolEl, header, content, state, {
+    initiallyExpanded,
+    onToggle: createTodoToggleHandler(currentTaskEl, todoStatusEl, (expanded) => {
+      toolCall.isExpanded = expanded;
+    }),
+    baseAriaLabel: getToolLabel(toolCall.name, toolCall.input)
+  });
+
+  return toolEl;
+}
+
+export function updateToolCallResult(
+  toolId: string,
+  toolCall: ToolCallInfo,
+  toolCallElements: Map<string, HTMLElement>
+) {
+  const toolEl = toolCallElements.get(toolId);
+  if (!toolEl) return;
+
+  if (toolCall.name === TOOL_TODO_WRITE) {
+    const statusEl = toolEl.querySelector('.claudian-tool-status') as HTMLElement;
+    if (statusEl) {
+      setTodoWriteStatus(statusEl, toolCall.input);
+    }
+    const content = toolEl.querySelector('.claudian-tool-content') as HTMLElement;
+    if (content) {
+      renderTodoWriteResult(content, toolCall.input);
+    }
+    const nameEl = toolEl.querySelector('.claudian-tool-name') as HTMLElement;
+    if (nameEl) {
+      nameEl.setText(getToolName(toolCall.name, toolCall.input));
+    }
+    const currentTaskEl = toolEl.querySelector('.claudian-tool-current') as HTMLElement;
+    if (currentTaskEl) {
+      const currentTask = getCurrentTask(toolCall.input);
+      currentTaskEl.setText(currentTask ? currentTask.activeForm : '');
+    }
+    return;
+  }
+
+  const statusEl = toolEl.querySelector('.claudian-tool-status') as HTMLElement;
+  if (statusEl) {
+    setGenericToolHeaderRight(statusEl, toolCall);
+  }
+
+  if (toolCall.name === TOOL_ASK_USER_QUESTION) {
+    const content = toolEl.querySelector('.claudian-tool-content') as HTMLElement;
+    if (content) {
+      content.addClass('claudian-tool-content-ask');
+      if (!renderAskUserQuestionResult(content, toolCall)) {
+        renderAskUserQuestionFallback(content, toolCall);
+      }
+    }
+    return;
+  }
+
+  const content = toolEl.querySelector('.claudian-tool-content') as HTMLElement;
+  if (content) {
+    content.empty();
+    renderExpandedContent(content, toolCall.name, toolCall.result, toolCall.input);
+  }
+}
+
+/** For stored (non-streaming) tool calls — collapsed by default. */
+export function renderStoredToolCall(
+  parentEl: HTMLElement,
+  toolCall: ToolCallInfo,
+  options: ToolCallRenderOptions = {}
+): HTMLElement {
+  const { toolEl, header, statusEl, content, currentTaskEl } =
+    createToolElementStructure(parentEl, toolCall);
+
+  if (toolCall.name === TOOL_TODO_WRITE) {
+    setTodoWriteStatus(statusEl, toolCall.input);
+  } else {
+    setGenericToolHeaderRight(statusEl, toolCall);
+  }
+
+  renderToolContent(content, toolCall);
+
+  const state = { isExpanded: false };
+  const todoStatusEl = toolCall.name === TOOL_TODO_WRITE ? statusEl : null;
+  setupCollapsible(toolEl, header, content, state, {
+    initiallyExpanded: options.initiallyExpanded ?? false,
+    onToggle: createTodoToggleHandler(currentTaskEl, todoStatusEl),
+    baseAriaLabel: getToolLabel(toolCall.name, toolCall.input)
+  });
+
+  return toolEl;
+}