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