Dashboard ships the Supabase realtime client and Shiki in every page bundle

[charlesrhoward]

Problem

Three avoidable bundle costs on every dashboard page:

1. hooks/use-realtime-route-refresh.ts:4 imports createClient from the Supabase client module at the top level. The Neon branch at line 100 is a runtime check, so the import is never tree-shaken. That pulls @supabase/ssr and realtime-js into nine production client chunks, about 450 KB across the two largest, and all of it is dead when the data backend is Neon (which is every environment in .env.example, docker-compose.yml, playwright.config.ts and CI).
2. components/ai-elements/code-block.tsx:30 statically imports createHighlighter from shiki, a 372 KB chunk, in a client component that is not behind next/dynamic.
3. next.config.mjs:75 lists only iconoir-react in optimizePackageImports. lucide-react is imported in 32 component files and is not listed.

Fix

1. In use-realtime-route-refresh.ts, move the Supabase import inside the non-Neon branch as await import("@/lib/supabase/client"). Better: since production is Neon, delete the Supabase branch entirely if the realtime route refresh has a Neon implementation. Check with the maintainer before deleting.
2. In code-block.tsx, load the highlighter with await import("shiki") inside the effect that creates it, and render plain preformatted text until it resolves.
3. Add "lucide-react" to optimizePackageImports.

Exit criteria

• pnpm build, then grep -rl "postgres_changes" .next/static/chunks returns nothing when NEXT_PUBLIC_MOGPLEX_DATA_BACKEND=neon.
• The shiki chunk is no longer in the initial JS for /control (check the build output or the Network tab on first load).
• Post before and after sizes for the two largest dashboard chunks in the PR.
• Existing code-block tests and the realtime route refresh tests pass.
• pnpm lint, pnpm typecheck, pnpm test pass.

Out of scope

Converting app/(dashboard)/layout.tsx from a client component to a server component. Larger change, separate issue.

https://claude.ai/code/session_01SQ4nS96XYRztd5w9QkubPf

[charlesrhoward]

PR #583 is merged and its bundle changes are in the verified READY production deployment at 23ee75b54caa6bf47498ab3b941d5b730ab6cda5.

The PR includes before/after measurements and regression evidence: initial Control chunks decrease from 37 to 35; the two largest initial chunks are 433,627 → 433,627 and 368,073 → 304,875 raw bytes. Shiki loads after code/diffs appear, with plain text/raw patch fallback; Neon builds omit the Supabase realtime runtime. lucide-react is included in optimized package imports. Highlighting, realtime cleanup, production-build browser tests, lint, typecheck, and both library/unit suites passed as documented in #583.

One original exit criterion is still unresolved: literal postgres_changes search also matches the unchanged public SUPABASE-PATTERNS documentation in the agent-template catalog. This is neither the Supabase runtime nor initial Control JS. The runtime regression check passes, but the stated zero-literal-match criterion does not. This issue stays open pending the maintainer's choice between clarifying the runtime check and retaining the literal requirement. No documentation example has been rewritten or removed to evade the search.

[charlesrhoward]

All exit criteria are now met by #583 and #586. The latter merged at 81e161d54d1c34b3cda80bf0b511b6267e1d055a and is serving on mogplex.com (READY deployment dpl_FKJjy3xDHpbEV6EoXBAxR5BTsEBn). Production deployment run 37251320179 passed the old-serving-app migration compatibility check, Neon migrations, build, and production smoke check. Matching Trigger worker: 20261005.1, deployment p9w4gnp5.

The literal postgres_changes check now returns no matches anywhere under the fresh Neon .next/static/chunks: the remaining template prompt text moved to a server-only summary endpoint. Authenticated production readback returned 41 templates with exactly name, description, category, and model; no prompt fields. Real API/UI success and failure cases and strict bundle tests passed; all three browser assertions failed on the pre-fix baseline.

Shiki remains outside initial /control JS. #583 reduced the second-largest initial dashboard chunk from 368,073 to 304,875 bytes; the largest stayed 433,627 bytes. The fresh #586 comparison against 23ee75b5 leaves those two initial sizes unchanged and removes another 51,060 raw bytes across all JS chunks. This additional reduction is not an initial-load saving.

Exact final #586 CI 37249835893 passed lint, typecheck, build, all library/unit/database tiers and all browser shards; changed library lines had 100% diff coverage. Merge-group and main CI also passed. The legacy realtime path was retained as scoped in the issue, with its import behind the backend guard.