Frontend Architecture
See Terminal UI Architecture for the complete technical deep-dive with diagrams.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| State | Zustand 5 |
| Styling | Tailwind CSS 3.4 + 8bitcn/ui |
| AI Chat | Vercel AI SDK v6 (@ai-sdk/react) |
| Graph | react-force-graph-2d |
| Charts | Recharts |
| Markdown | react-markdown |
| Validation | Zod |
| Toasts | Sonner |
Key Hooks
| Hook | Purpose |
|---|---|
useAgentPipeline() | Derives 3-stage pipeline state from AI SDK messages |
usePlaybook() | Streams /api/playbook SSE for 4-lens analysis |
useThreadLoader() | Loads user threads on mount |
useFeed() | Infinite cursor-based pagination for community cards |
useMarketData() | BTC price + Fear & Greed index |
useGraphData() | Speaker nodes + similarity links |
useWatchlist() | Watchlist CRUD |
useBeliefAnalysis() | Individual belief deep analysis |
Speaker Tier System
| Tier | Color | Criteria |
|---|---|---|
| Legendary | Gold | Highest belief count |
| Epic | Teal | High belief count |
| Rare | Purple | Moderate |
| Common | Orange | Default |