dc-recorder/docs/superpowers/plans/2026-05-13-react-ssr-dashboard.md

React SSR Dashboard Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace static client-rendered homepage with React server-side rendering while keeping live WebSocket/voice behavior as progressive enhancement.

Architecture: Express GET / builds dashboard data, renders React component to HTML with react-dom/server, injects bootstrap JSON for client script. CSS/JS move to static assets; React owns initial markup only, lightweight browser JS handles tab switching, voice bridge, WebSocket updates, and async thread discovery.

Tech Stack: React, ReactDOM server, Bun, Express, TypeScript, vanilla browser JS for progressive enhancement.

---

Task 1: Add React dependencies

Files:

• Modify: package.json

• Modify: bun.lockb

• Run bun add react react-dom.

• Run bun add -d @types/react @types/react-dom.

• Verify bun run typecheck.

Task 2: Extract dashboard assets

Files:

• Create: public/dashboard.css

• Create: public/dashboard.js

• Modify: public/index.html

• Move current <style> content to dashboard.css.

• Move current <script> content to dashboard.js.

• Keep client behavior independent from static HTML.

Task 3: Create React SSR renderer

Files:

• Create: src/web/dashboardPage.tsx

• Create DashboardPage React component accepting: guilds, voiceChannels, watchChannels, selectedChannel, messages, status.

• Render same Voice/Text layout as current homepage.

• Render message cards server-side from DB metadata.

• Export renderDashboardPage(props) returning full HTML with CSS/JS links and bootstrap JSON.

Task 4: Wire Express SSR route

Files:

• Modify: src/webserver.ts

• Add GET / before static middleware fallback or before static index handling.

• Build props from voiceController and getMessagesByChannel.

• Respect query ?guild=<id>&channel=<id>.

• Render HTML with renderDashboardPage.

Task 5: Verify

Files: all touched files

• Run bun run typecheck.
• Run bun run test.
• Run short SSR import smoke if possible.