Chat Ephemeral Visualization Layer — RSC Streaming + Chart Overlays #194
Description
Summary
Enable the AI chat to dynamically compose React components in responses and drive temporary visual overlays on the main net worth projection chart. When users ask "what if" questions, the chart becomes a reactive canvas — ghost trajectories, annotations, and delta shading appear ephemerally and disappear when the conversation moves on.
Architecture
Client (React)
├── Chat Panel ← receives streaming RSC components
└── Main Chart ← reads from Zustand store, draws ephemeral overlays
↑
chatVisualizationStore (Zustand) ← written by invisible <ChartOverlaySync />
↑
Next.js Server Action (rendering proxy) → composes ResponseLayout
↑ consumes SSE
Go Backend (UNCHANGED)
Key: Go backend stays exactly as-is. Next.js server action acts as a thin rendering proxy — consumes the existing SSE stream and composes React components server-side using createStreamableUI from Vercel AI SDK.
Visual States
- Baseline — Chat idle, single trajectory, suggested questions
- What-If Ghost Line — Rose ghost trajectory diverging at the scenario point, ImpactCard in chat, annotation callouts on chart
- Multi-Scenario Comparison — Multiple ghost trajectories (amber/cyan), ScenarioComparison card in chat, crossover annotations on chart
- Ephemeral Cleanup — When user asks a new question, previous overlays disappear via React unmount lifecycle
Implementation Phases
| Phase | Scope | Details |
|---|---|---|
| 1 | Zustand store + Chart.js plugin | chatVisualizationStore, chatOverlayPlugin |
| 2 | RSC server action | Thin proxy consuming Go SSE, composing components |
| 3 | Composition layer + bridge | ResponseLayout (server), ChartOverlaySync (client) |
| 4 | Chat.tsx updates | Call server action instead of direct SSE |
| 5 | Rich chat components | ImpactCard, ScenarioComparison, ChatMarkdown |
Existing Infrastructure (Ready to Use)
- 26 registered AI tools (all implemented)
- Read-only analysis tools auto-execute
- 31-year timeline projection engine
- Chart.js plugin architecture (milestone + position plugins)
- SSE streaming from Go backend
Spec
Full spec with code samples: spec/chat-ephemeral-visualization-layer.md
Mockups
Three Pencil mockups created in Assetra3.pen showing the baseline, what-if, and multi-scenario states.