feat: refine playground workspace UI

[JSerFeng]

The editor, graphs and preview now share a compact workspace inspired by Linear, with a dark default theme, matching Monaco colors, consistent dividers and a neutral light theme. Saved theme preferences are respected.

• Align the source, output and dependency panels; refine file tabs, toolbar controls, empty states and the preview dialog for desktop and narrow screens.
• Frame graphs around their actual node bounds, including negative coordinates; route module connections around cards and share zoom/reset controls. Add keyboard navigation and accessible names for file tabs and graph nodes.
• Keep chunk names readable when the graph is scaled down, and retain full paths in tooltips and inspection details.
• Wait for the preview worker to activate before loading the compiled page. A fresh preview starts from a blank iframe instead of occasionally rendering the playground itself. Active, installing and waiting workers receive initialization when activated, and later replacements are observed through updatefound. Closing the preview cancels pending initialization and removes listeners. Cleanup only unregisters workers in the preview scope, and obsolete startup callbacks do not navigate a closed preview.

Validation:

• pnpm check
• pnpm test: 8 worker lifecycle regressions covering first activation, existing and future replacements, repeated updates, cancellation and failed installation; also runs in CI.
• pnpm exec tsc --noEmit --ignoreDeprecations 6.0
• pnpm build
• git diff --check
• Browser checks: light/dark themes, file keyboard navigation, module/chunk selection, graph zoom/drag/reset, repeated fresh preview opens, and the 320px layout and preview dialog.
• No browser warnings or errors in the final validation run.

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-08T06:39:08.456002Z	bd6cfff	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bd6cfff14e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".