Phase 2 — Dashboard (Overview)

Landing route after sign-in: /. The dashboard is live — React Query refetches every 8 seconds and the connection dot pulses emerald when the last fetch is < 12 s old. Same data drives every numeric strip.

Six surfaces, top to bottom

┌────────────────────────────────────────────────────┐
│ ✨ Good morning · Acme Inc                  [PRO] 🟢│  ← greeting + plan + live dot
├────────────────────────────────────────────────────┤
│ Projects | Blocks | Snapshots | MCP 24h | AI 24h   │  ← 5 KPIs
├────────────────────────────────────────────────────┤
│ Activity — last 14 days                            │  ← sparkline
├────────────────────────────────────────────────────┤
│ Live activity         │  Recent projects (grid)    │  ← 2-column body
├────────────────────────────────────────────────────┤
│ + New project · ✨ AI Decompose · 🔌 Connect agent │  ← quick actions
├────────────────────────────────────────────────────┤
│ ✨ Try a sample (only when 0 projects)             │  ← sample gallery
└────────────────────────────────────────────────────┘

1. Greeting strip

Time-aware greeting (Good morning / afternoon / evening) + current org name + plan badge + connection indicator (already covered in Phase 1).

The greeting subhead summarises your workspace: “3 projects · 47 blocks · last activity 12m ago” once data has loaded; “Loading your workspace…” before.

2. Five KPI cards

KPI	What it counts	Tone
Projects	Total projects in the current org	indigo
Blocks	All atom-blocks across all projects in the org	sky
Snapshots	Versioned snapshots (Phase 5)	amber
MCP calls	Tool calls in the last 24 hours	emerald
AI calls	Internal AI calls in the last 24 hours (Decompose Wizard, Persona Critique, Pattern D)	rose

Projects is a link to /projects. The others are read-only stats. Click → relevant detail page where it exists.

3. 14-day activity sparkline

Mini bar chart of activity events per day for the last 14 days. Total event count appears in the header. The data feeds from the Cloud’s audit log — every block create / patch / delete / snapshot / MCP call gets recorded.

Use it to spot:

Days with no activity — gaps where work stalled.
Spikes — heavy authoring sprints, or AI batch runs.
Linear ramps — consistent daily progress.

4. Live activity tail (left column)

A streaming list of the most recent events:

🆕  alice  created feature  Login screen           5m
✨  alice  AI critique      pm-critic              7m
📸  bob    snapshot         "before W6 review"     1h
🤖  -      MCP call         get_atom               1h

Up to ~20 most-recent rows, scrollable. The list refetches with the 8-second pulse so new events appear without manual reload. All → at the top links to /org/audit (Coming soon in early-access).

5. Recent projects grid (right column)

A compact card grid of the most recently-touched projects (≤ 6 cards). Each card carries:

Project avatar (auto-generated hue from project ID, or user-uploaded).
Name + status badge (active emerald / draft amber / archived grey).
“updated <date>” line.
Optional description (line-clamp 2).
Hover → translate-up + arrow appears.

Click → /projects/:id (Project hub). + New in the header → /projects/new.

6. Quick-actions row

Four buttons that short-circuit common flows:

Action	Destination	Purpose
+ New project	`/projects/new`	Blank project wizard.
✨ AI Decompose	`/projects/<latest>/workspace?wizard=1` (or `/projects/new` if no projects)	Open the Decompose Wizard on the latest project.
🔌 Connect agent	`/settings`	IDE / agent setup (Cursor, Claude Code, Cline).
➜ Browse all	`/projects`	Full project list.

7. Sample PRD gallery — only if `projectCount === 0`

When the workspace is brand-new, the dashboard appends a 5-up gallery of pre-baked PRD samples:

Sample	Archetype	Idea
📋 TeamFlow	`saas-b2b`	Project management for engineering teams.
🌱 Habito	`mobile`	Habit tracker with streaks + AI nudges.
💳 PayLink	`api`	Stripe-style payment API service.
👥 PeopleOps	`internal`	HR dashboard for onboarding + headcount.
(one more)	`cli` / `other`	Per the active build.

Click a card → /projects/new?sample=<id>. The Create Project page reads ?sample= and prefills name + description, plus auto-checks Use AI scaffold so the Decompose Wizard opens automatically after creation.

The gallery disappears as soon as the first project is created. Returning users never see it.

What drives the dashboard

Single endpoint — useOverview() posts to GET /dashboard/overview (org-scoped) and returns:

{
  generatedAt: string;            // ISO timestamp — drives the live/stale dot
  stats: {
    projectCount: number;
    blockCount: number;
    snapshotCount: number;
    mcpCallsLast24h: number;
    aiCallsLast24h: number;
  };
  activitySpark: { day: string; count: number }[];   // 14 entries
  recentActivity: ActivityRow[];                       // ~20 entries
  recentProjects: ProjectCard[];                       // ≤6
}

useBilling() is a separate query (GET /billing/me) used only for the plan badge. Both refetch on the 8 s tick + window-focus event.