feat(web): add syntax highlighting to source viewers

[Nameless-Monster-Nerd]

Fixes #6301

Why

Generated HTML, CSS, and JavaScript files were rendered as monochrome text in the source viewer, making larger artifacts difficult to scan. This change addresses the issue reported from the Open Design desktop app while reusing the project’s existing Shiki runtime.

What users will see

Supported source files now use theme-aware syntax colors in the existing viewer. Line numbers and exact source text are preserved, with plain-text fallback for unsupported, oversized, or unusually token-dense files.

Surface area

• UI — new page / dialog / panel / menu item / setting / empty state in apps/web or apps/desktop (including Electron menu bar)
• Keyboard shortcut — new or changed
• CLI / env var — new od subcommand or flag, new tools-dev / tools-pack flag, or new OD_* env var
• API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
• Extension point — new entry under skills/, design-systems/, design-templates/, or craft/, or change to the skills protocol
• i18n keys — added new translation keys (see TRANSLATIONS.md for the locale workflow)
• New top-level dependency — adding any new entry to the root package.json (dependencies or devDependencies); workspace-package package.json files are out of scope. Include a paragraph on what we get vs. what bytes we ship (see CONTRIBUTING.md → Code style)
• Default behavior change — changes what existing users experience without opting in (default model, default setting, file/SQLite schema, auto-network on startup, auto-install)
• None — internal refactor, docs, tests, or translation update only

Screenshots

Before	After — HTML

CSS	JavaScript

Bug fix verification

• Test path: apps/web/src/components/__tests__/FileViewer.syntax-highlight.test.tsx
• The regression test failed on main because the viewer never called Shiki for HTML/CSS/JavaScript, then passed on this branch.

Validation

• pnpm guard
• pnpm typecheck
• pnpm --filter @open-design/web test — 4,909 passed, 7 skipped
• pnpm --filter @open-design/web build
• Manual dark-theme verification for HTML, CSS, and JavaScript; exact source and line gutters preserved

[lefarcen]

Thanks @Nameless-Monster-Nerd — reusing the existing Shiki runtime for this is a nice fit. Since this is still a draft, we'll hold off on substantive review until you mark it ready for review.

💡 To drive this PR to merge hands-free, paste this to your AI coding agent (Claude Code / Codex / opencode / Cursor …):
Take over nexu-io/open-design#6303 until it merges — read https://raw.githubusercontent.com/nexu-io/looper/main/skills/pr-takeover/SKILL.md and follow it.

[Nameless-Monster-Nerd]

ready to review

[PerishCode]

The source-highlighting path has one blocking Windows line-ending regression: valid token output is discarded for normal multi-line CRLF files. The inline comment identifies the normalization fix and the missing regression case.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}

[Nameless-Monster-Nerd]

any update

[lefarcen]

Hey @Nameless-Monster-Nerd, quick update from our side: the current blocker is the CRLF regression that @PerishCode called out above, so the next step is a follow-up push addressing that normalization path and the missing regression coverage.

Since this changes the source-viewing UI in a user-visible way, I’ve also marked it for manual QA before merge. Once the blocking review item is fixed, CI settles, and design sign-off is in, we’ll loop QA in on the current head.

[Nameless-Monster-Nerd]

ok

[Nameless-Monster-Nerd]

@PerishCode review please

[PerishCode]

@Nameless-Monster-Nerd The source viewer now adds theme-aware Shiki token rendering for supported HTML, CSS, JavaScript, TypeScript, JSX/TSX, JSON, SVG, and related MIME types while preserving exact source text, line gutters, and plain-text fallbacks for unsupported, oversized, or token-dense inputs. I verified the full changed ranges, confirmed the prior multi-CRLF regression is fixed with focused coverage, and ran the two new test suites (8 tests passed) plus the web typecheck. Nice work addressing the follow-up cleanly and keeping the fallback behavior defensive.

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}