frontend-component

name	frontend-component
description	Build a polished MemOS dashboard component to the project design system (Next.js App Router, Tailwind, shadcn/ui, Framer Motion). Use for any new UI piece — OKR tree, activity feed, provenance graph, brief authoring, etc.

MemOS Frontend Component

The dashboard is the showpiece — it must look extraordinary, not just functional. Every component is accessible, responsive, dark-mode-aware, and animated with restraint. Build to the design system; do not invent one-off styles.

Design system (hold to this)

• shadcn/ui primitives (Button, Card, Dialog, Table, Badge, Tabs). Don't hand-roll what shadcn provides.
• Tailwind tokens only — no magic hex. Use the theme's semantic colors.
• Framer Motion for transitions: subtle, fast (150-250ms), purposeful. Animate entrance of new feed items, progress bar fills, graph node focus.
• Dark mode first, light mode parity.
• Empty states and loading skeletons are REQUIRED, not afterthoughts — they're what make it feel finished.
• Typography: one display face for headings, one mono for IDs/claims.

Steps

1. Confirm the component's data contract

What does it render? Which intent(s) or API route feeds it? Define the TS type (import from packages/shared — never redefine).

2. Build the component — packages/web/components/<area>/<Name>.tsx

• Server component for data fetch where possible; client component only when it needs interactivity/realtime.
• Loading skeleton + empty state + error state, all designed.
• Accessible: keyboard nav, ARIA labels, focus rings.

3. Special-case the signature components (make these shine)

• OKR tree: nested cards with animated rollup progress bars (Recharts or a custom bar). Sub-OKR weight × milestone progress visibly rolls up to parent.
• Live activity feed: subscribe via Supabase Realtime / SSE; new items animate in at top; color-coded by type (checkin/fact/learning). This is the demo wow-moment — invest in it.
• Provenance graph: React Flow. Nodes = learning / artifact / workflow-run / OKR / agent; edges = the bd_id and target_objective_id links. Clicking a learning expands its full chain. This is the single most impressive screenshot — make it beautiful and interactive.
• Trust leaderboard: agents ranked by trust score with sparklines.

4. Wire realtime if applicable

Use Supabase Realtime channels or an SSE endpoint on the gateway. Debounce/batch updates so the feed doesn't thrash.

5. Polish pass

Hover states, transitions, responsive breakpoints (mobile → wide). Screenshot it in dark mode for the README.

Done when

Component renders all states (loading/empty/error/data), matches the design system, animates with restraint, is accessible, and looks good enough to put in the README. Commit as feat(web): <component>.