Problem

When viewing generated skills in the Skill Workshop, opening the "Support files" preview modal causes severe page lag and freezing, especially when the proposal includes large code files (up to 256 KB per file).

Root Cause

In ui/src/ui/components/file-preview-modal.ts, the entire file content is rendered as a single giant <pre> text node:

<pre class="pre">${file.contents}</pre>

For a 256 KB file with ~5000 lines, the browser must layout and paint the entire content as one monolithic DOM node. When scrolling through the code, the browser struggles to repaint such a large text node, causing visible stutter and freezing.

All support file contents are also eagerly loaded into memory at inspect time via the skills.proposals.inspect RPC, and passed to the modal component as a single array property.

Steps to Reproduce

1. Open the Skill Workshop (/skills/workshop)
2. Select a proposal that has support files with large code content (e.g., 100+ KB source files)
3. Click "Support files" to open the file preview modal
4. Scroll through the code in the detail pane — observe significant lag and freezing

Expected Behavior

Scrolling through code files should be smooth regardless of file size. Only the lines visible in the viewport (plus a small buffer) should be rendered.

Suggested Fix

Implement virtual scrolling for the code viewer — render only the visible lines plus overscan buffer, using spacer elements to maintain correct scrollbar dimensions. The same approach used by code editors and large-list UIs.

Environment

• OpenClaw Control UI
• ui/src/ui/components/file-preview-modal.ts