feat(local): highlight JSON with twinkleplop

[jared-outpost]

implements twinkleplop for JSON syntax highlighting in the local viewer ("spotlight"), replacing shiki.

per review feedback on the earlier evaluation, this ships the actual integration instead of a recommendation, and removes the evaluation doc.

what changed

• apps/local/src/components/json-view.tsx now highlights with @twinkleplop/json. twinkleplop renders synchronously to class-based token spans (<pre class="twinkleplop"><code>…<span class="tok string|number|boolean|keyword|punctuation">), so the async createHighlighterCore/codeToHtml promise plumbing and the html state/useEffect are gone — the highlighted markup is computed inline during render, with a try/catch that keeps the plain escaped-source fallback.
• apps/local/src/index.css: swapped the shiki --shiki-light/--shiki-dark selectors for .twinkleplop + .tok.* token classes, driven by --tok-* CSS variables scoped to .json-view with a github light/dark palette.
• apps/local/package.json: dropped the four @shikijs/* deps, added @twinkleplop/json.
• apps/local/src/App.integration.test.tsx: assertion now checks for the .twinkleplop container.
• removed docs/superpowers/specs/2026-09-24-twinkleplop-terminal-highlighting-evaluation.md.

validation

• tsc -b clean, oxlint 0 warnings/errors
• vitest run — all 77 tests pass (json-view unit + full app integration)
• vite build succeeds

scope note

this targets the local viewer's JSON inspector (a web/HTML rendering path), which is where twinkleplop's HTML output and its shiki/prism-oriented benchmarks actually apply. the terminal markdown renderer (cli-highlight, ANSI) is a separate path and untouched.

Closes #1633

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
cli	Ready	Preview	Sep 28, 2026 1:47pm UTC
sentry-local	Ready	Preview	Sep 28, 2026 1:47pm UTC

[MathurAditya724]

Jared, you need to implement this feature instead of telling if its good or not. Remove that file and start working on the implementation of this in spotlight

[jared-outpost]

done — switched from an evaluation to the actual implementation.

removed the eval doc and wired @twinkleplop/json into the local viewer's JSON inspector (apps/local/src/components/json-view.tsx), replacing shiki. twinkleplop renders synchronously to class-based token spans, so the async highlighter setup is gone; colors moved to --tok-* css variables scoped to .json-view (github light/dark). dropped the four @shikijs/* deps for @twinkleplop/json, and updated the css + integration test to the new .twinkleplop/.tok markup.

validation: tsc -b clean, oxlint clean, vitest 77/77 passing, vite build succeeds. pushed as 4ae0268; PR title/body updated to match.

note: this is the local viewer (web/HTML) JSON path, which is where twinkleplop's HTML output and its shiki/prism benchmarks apply. the terminal markdown renderer (cli-highlight, ANSI) is a different code path and left untouched.