Investigate webview performance issue

[zhanba]

Summary

Track and investigate performance bottlenecks in the VS Code webview UI (packages/vscode-webui). As chat sessions grow (long message histories, frequent streaming updates, many tool invocations), users may experience slow rendering, sluggish input, and high memory usage inside the Pochi panel. This issue is intended to collect findings, profiling data, and potential optimizations.

Scope

The investigation should cover (but is not limited to):

• Message list rendering for long chat histories
  • packages/vscode-webui/src/components/message/message-list.tsx — renders all messages without virtualization; each Part currently re-renders on every state update.
  • getToolCallCheckpoint flattens messages via flatMap inside every Part render — O(N*M) work per render.
  • getUserEditsCheckpoint re-iterates messages per user message.
• Markdown/code-block rendering during streaming
  • packages/vscode-webui/src/components/message/markdown.tsx
  • packages/vscode-webui/src/components/message/code-block.tsx (only CodeBlock is memoized today)
  • Syntax highlighter: code-highlighter.tsx
• Tool invocation rendering / streaming state
  • packages/vscode-webui/src/features/tools
  • packages/vscode-webui/src/features/chat/lib/use-live-chat-kit-getters.ts
• Mermaid diagram rendering: mermaid.tsx
• LiveStore-driven re-renders and selector granularity: packages/vscode-webui/src/livestore.default.worker.ts
• Web worker boundary cost and message payload sizes between the webview and extension host.

Suspected hotspots

1. No list virtualization — MessageList maps over all messages and all their parts. Long conversations (100+ messages, many tool calls) force a full re-render on each streaming tick.
2. Per-render flatMap calls — getToolCallCheckpoint and getUserEditsCheckpoint in message-list.tsx allocate new arrays on every render per part.
3. Missing memoization — Part, TextPartUI, UserAttachments, and UserActiveSelections are not wrapped in React.memo; they re-render whenever the parent does, even when their inputs are unchanged.
4. Streaming markdown re-parse — streaming tokens may trigger full markdown re-parse per token rather than diff-based updates.
5. Tool-call micro-batching — recent refactor (feat: refactor tool call parallel execution to micro-batching #1477) may interact with webview render throttling; worth validating frame budget during streaming.

Proposed investigation steps

1. Capture baseline performance traces using Chrome DevTools / React Profiler with:
   • A long conversation (e.g. 200+ messages with mixed text, code blocks, tool calls).
   • An actively streaming assistant response.
   • A session with many subtasks / user edits.
2. Collect Core Web Vitals using the existing reportWebVitals.ts hook (INP is most relevant).
3. Identify the top 3–5 components by render time and the main sources of wasted renders.
4. Measure memory usage over a long session to detect leaks (listener retention, LiveStore subscriptions, worker message buffers).
5. Propose and prototype fixes, e.g.:
   • Virtualize message list (e.g. @tanstack/react-virtual).
   • Memoize message/part components and precompute checkpoint maps once per messages change.
   • Debounce/throttle markdown re-render during streaming.
   • Split LiveStore selectors to narrow subscriptions.
6. Document findings and follow-up issues/PRs referencing this tracker.

Acceptance criteria

• A written report (PR comment or markdown in repo) detailing:
  • Reproduction steps and measurement methodology.
  • Before/after metrics (render times, INP, memory) for the top hotspots.
  • A prioritized list of optimizations with effort/impact estimates.
• At least one follow-up PR addressing the highest-impact hotspot(s), or linked issues for each.

Additional context

Recent related work:

• feat: refactor tool call parallel execution to micro-batching #1477 refactor tool call parallel execution to micro-batching
• feat(vscode-webui): Optimize diff patch display with @pierre/diffs library #1260 optimize diff patch display with @pierre/diffs
• Replace react-markdown with streamdown.ai #401 replace react-markdown with streamdown.ai (closed)

---

🤖 Generated with Pochi | Task