refactor(viewer): port to Solid + TypeScript with Vite single-file build

[benvinegar]

What

Rewrites the viewer from ~390 lines of inline vanilla JS in viewer/index.html to Solid + TypeScript components in viewer/src/, typed against server/types.ts.

How it keeps the serving model intact

Vite + vite-plugin-singlefile builds everything into one self-contained viewer/dist/index.html, so the server keeps serving the viewer as a single in-memory document on both runtimes:

• server/index.ts reads the built file at boot (friendly error pointing at npm run build:viewer if missing)
• workers/index.ts imports it via the existing **/*.html Text rule
• No static-asset routes; auth and withOrigin URL rewriting unchanged — the onboarding localhost:4242 literals survive minification, verified in the built bundle

Behavior parity

All DOM structure, class names, and flows are preserved (the e2e suite is unchanged and passes): SSE-driven cards, version select, iframe src only changes when the version does (no sandbox reloads on unrelated refetches), postMessage bridge, session thread last in the stream, unread dots, contenteditable rename.

Two small improvements fall out naturally:

• stores reconcile by id, so sidebar keyboard focus survives refetches without the old manual focus-restoration code
• the onboarding copy button no longer captures HTML-source indentation whitespace

Build wiring

• npm run dev runs a Vite watch build alongside the server
• typecheck adds a third tsc program (tsconfig.viewer.json: DOM lib, solid JSX)
• e2e builds the viewer via Playwright global setup — CI workflow needs no changes
• npm pack builds the viewer in prepack; package ships viewer/dist/ instead of viewer source (verified via npm pack --dry-run)
• deploy / dev:cloud build the viewer first

Validation

• 49 unit tests, all three tsc programs, oxlint, oxfmt: pass
• e2e: 5/5 pass on Chromium locally; WebKit couldn't run in the dev sandbox (browser CDN blocked by network policy) — the WebKit resize-bridge quirk lives in server/snippetPage.ts, untouched here, but the e2e CI job is the real confirmation

https://claude.ai/code/session_01ApwZm1DNZoCQTJHha19thS

---

Generated by Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vite@​8.0.16
	vite-plugin-singlefile@​2.3.3
	vite-plugin-solid@​2.11.12
	solid-js@​1.9.13

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Obfuscated code: npm entities is 91.0% likely obfuscated Confidence: 0.91 Location: Package overview From: package-lock.json → npm/vite-plugin-solid@2.11.12 → npm/entities@6.0.1 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/entities@6.0.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Obfuscated code: npm seroval is 90.0% likely obfuscated Confidence: 0.90 Location: Package overview From: package-lock.json → npm/solid-js@1.9.13 → npm/seroval@1.5.4 ℹ Read more on: This package | This alert | What is obfuscated code? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/seroval@1.5.4. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report