From f470b3c3cde10495fb689f2c4fc96f0508be61b4 Mon Sep 17 00:00:00 2001
From: ryzrr <ryzrr.official@gmail.com>
Date: Tue, 21 Jul 2026 23:07:40 +0530
Subject: [PATCH 1/2] refactor: replace mock data with real metrics across the
 dashboard

Removes lib/mock-data.ts and the pipelines demo page/components, and wires
every chart, hook, and route to honest empty states instead of fallback
mock data. Also fixes timeseries bucket zero-filling and per-minute rate
normalization, widens the traces window to match the time-range picker,
and refreshes project access checks to query membership live instead of
trusting a cached session list.
---
 app/(dashboard)/alerts/page.tsx               |  40 +-
 app/(dashboard)/endpoints/page.tsx            |  22 +-
 app/(dashboard)/overview/page.tsx             |  40 +-
 app/(dashboard)/pipelines/page.tsx            | 112 ------
 app/(dashboard)/traces/page.tsx               |  36 +-
 app/api/lb/[...path]/route.ts                 |  11 +-
 app/api/realtime-token/route.ts               |   8 +-
 app/auth/signin/page.tsx                      |  12 +-
 apps/api/api/routes/query.py                  | 127 +++++--
 apps/api/api/schemas.py                       |   8 +-
 apps/api/worker/metrics.py                    |  12 +-
 auth.ts                                       |  14 +-
 components/alerts/rule-list.tsx               |  13 +-
 components/auth/user-menu.tsx                 |   8 +-
 components/charts/empty-chart-state.tsx       |  12 +
 components/charts/error-rate-chart.tsx        |  16 +-
 components/charts/latency-histogram.tsx       |   4 +-
 components/charts/requests-chart.tsx          |  16 +-
 components/dashboard/active-pipeline.tsx      | 154 --------
 components/dashboard/incident-panel.tsx       |  10 +-
 components/dashboard/live-log-table.tsx       | 128 ++++---
 .../dashboard/pipeline-architecture.tsx       | 124 ------
 components/dashboard/stat-card.tsx            |   6 +-
 components/endpoints/endpoint-comparison.tsx  |  18 +-
 components/endpoints/endpoint-drawer.tsx      |  18 +-
 components/endpoints/endpoint-table.tsx       |  13 +-
 components/layout/sidebar.tsx                 |   2 -
 components/layout/time-range-picker.tsx       |  26 +-
 components/layout/topbar.tsx                  |  12 +-
 components/projects/create-project-dialog.tsx |  16 +-
 components/status/uptime-bar.tsx              |   6 +-
 components/traces/flame-graph.tsx             |  10 +-
 components/traces/service-map.tsx             |   6 +-
 components/traces/span-detail.tsx             |   8 +-
 hooks/use-api-query.ts                        |  33 +-
 hooks/use-data.ts                             |  56 ++-
 hooks/use-live-metrics.ts                     |  95 ++---
 hooks/use-time-range.ts                       |   1 +
 hooks/use-websocket.ts                        | 129 ++++---
 lib/mock-data.ts                              | 358 ------------------
 lib/project-access.ts                         |  27 ++
 lib/socket.ts                                 |   3 +
 lib/types.ts                                  |   2 +-
 lib/utils.ts                                  |  16 +
 proxy.ts                                      |   5 +-
 types/next-auth.d.ts                          |   3 -
 46 files changed, 627 insertions(+), 1169 deletions(-)
 delete mode 100644 app/(dashboard)/pipelines/page.tsx
 create mode 100644 components/charts/empty-chart-state.tsx
 delete mode 100644 components/dashboard/active-pipeline.tsx
 delete mode 100644 components/dashboard/pipeline-architecture.tsx
 delete mode 100644 lib/mock-data.ts
 create mode 100644 lib/project-access.ts

diff --git a/app/(dashboard)/alerts/page.tsx b/app/(dashboard)/alerts/page.tsx
index acd47e4..c7f7ea1 100644
--- a/app/(dashboard)/alerts/page.tsx
+++ b/app/(dashboard)/alerts/page.tsx
@@ -84,11 +84,11 @@ function ChannelConfigForm({ channel, onSave, onTest, onDelete, onClose }: {
           <span className="text-lg">{CHANNEL_ICON[channel.type]}</span>
           <span className="text-sm font-medium text-[#F5F5F5]">{channel.name}</span>
         </div>
-        <button onClick={onClose} className="text-[#333] hover:text-[#666] text-xs">✕</button>
+        <button onClick={onClose} className="text-[#808080] hover:text-[#949494] text-xs">✕</button>
       </div>
 
       <div>
-        <label className="text-[10px] text-[#444] uppercase tracking-wider">
+        <label className="text-[10px] text-[#808080] uppercase tracking-wider">
           {channel.type === "pagerduty" ? "Routing key" : "Webhook URL"}
         </label>
         <input
@@ -111,7 +111,7 @@ function ChannelConfigForm({ channel, onSave, onTest, onDelete, onClose }: {
       )}
 
       {channel.lastDeliveryAt && (
-        <p className="text-[10px] text-[#333]">
+        <p className="text-[10px] text-[#808080]">
           Last delivery: {timeAgo(channel.lastDeliveryAt)} ·{" "}
           <span className={channel.lastDeliveryOk ? "text-green" : "text-red"}>
             {channel.lastDeliveryOk ? "OK" : "Failed"}
@@ -129,7 +129,7 @@ function ChannelConfigForm({ channel, onSave, onTest, onDelete, onClose }: {
         </Button>
         <button
           onClick={() => onDelete(channel.id)}
-          className="ml-auto text-[10px] text-[#555] hover:text-red transition-colors"
+          className="ml-auto text-[10px] text-[#949494] hover:text-red transition-colors"
         >
           Delete
         </button>
@@ -158,7 +158,7 @@ function AddChannelForm({ onCreate, onClose }: {
     <div className="rounded-lg border border-dashed border-[#2A2A2A] bg-[#0D0D0D] p-4 space-y-3">
       <div className="flex items-center justify-between">
         <span className="text-xs font-medium text-[#888] uppercase tracking-wider">New channel</span>
-        <button onClick={onClose} className="text-[#333] hover:text-[#666] text-xs">✕</button>
+        <button onClick={onClose} className="text-[#808080] hover:text-[#949494] text-xs">✕</button>
       </div>
       <div className="flex flex-wrap items-center gap-2">
         <select
@@ -294,7 +294,7 @@ export default function AlertsPage() {
             { label: "Triggered Today", value: triggeredToday, color: "#F59E0B" },
           ].map((stat) => (
             <div key={stat.label} className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4">
-              <p className="text-[10px] text-[#444] uppercase tracking-wider mb-1">{stat.label}</p>
+              <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-1">{stat.label}</p>
               <p className="text-2xl font-semibold tabular-nums" style={{ color: stat.color }}>
                 {stat.value}
               </p>
@@ -309,7 +309,7 @@ export default function AlertsPage() {
               key={tab}
               onClick={() => setActiveTab(tab)}
               className={`px-3 py-1.5 text-xs rounded capitalize font-medium transition-colors ${
-                activeTab === tab ? "bg-blue text-white" : "text-[#555] hover:text-[#888]"
+                activeTab === tab ? "bg-blue text-white" : "text-[#949494] hover:text-[#888]"
               }`}
             >
               {tab}
@@ -324,11 +324,11 @@ export default function AlertsPage() {
 
             {/* Enhanced rule builder */}
             <div className="rounded-lg border border-dashed border-[#2A2A2A] bg-[#0D0D0D] p-4 space-y-3">
-              <p className="text-xs font-medium text-[#444] uppercase tracking-wider">Rule Builder</p>
+              <p className="text-xs font-medium text-[#808080] uppercase tracking-wider">Rule Builder</p>
 
               {/* Main condition row */}
               <div className="flex items-center gap-2 flex-wrap">
-                <span className="text-xs text-[#555]">Alert when</span>
+                <span className="text-xs text-[#949494]">Alert when</span>
                 <select
                   value={metric}
                   onChange={(e) => setMetric(e.target.value)}
@@ -354,19 +354,19 @@ export default function AlertsPage() {
                   onChange={(e) => setThreshold(e.target.value)}
                   className="bg-[#111] border border-[#2A2A2A] rounded px-2 py-1 text-xs text-[#F5F5F5] outline-none w-16 focus:border-blue transition-colors"
                 />
-                <span className="text-xs text-[#555]">{metric === "Error Rate" ? "%" : "ms"} for</span>
+                <span className="text-xs text-[#949494]">{metric === "Error Rate" ? "%" : "ms"} for</span>
                 <input
                   type="number"
                   value={window}
                   onChange={(e) => setWindow(e.target.value)}
                   className="bg-[#111] border border-[#2A2A2A] rounded px-2 py-1 text-xs text-[#F5F5F5] outline-none w-14 focus:border-blue transition-colors"
                 />
-                <span className="text-xs text-[#555]">min</span>
+                <span className="text-xs text-[#949494]">min</span>
               </div>
 
               {/* Severity + channel row */}
               <div className="flex items-center gap-3 flex-wrap">
-                <span className="text-xs text-[#555]">Severity</span>
+                <span className="text-xs text-[#949494]">Severity</span>
                 <div className="flex items-center gap-1">
                   {SEVERITIES.map((s) => (
                     <button
@@ -376,7 +376,7 @@ export default function AlertsPage() {
                         "px-2.5 py-1 rounded text-[10px] font-semibold border transition-colors",
                         severity === s.value
                           ? "border-current"
-                          : "border-[#1E1E1E] text-[#555] hover:text-[#888]"
+                          : "border-[#1E1E1E] text-[#949494] hover:text-[#888]"
                       )}
                       style={severity === s.value ? { color: s.color, borderColor: s.color, backgroundColor: `${s.color}18` } : {}}
                     >
@@ -385,7 +385,7 @@ export default function AlertsPage() {
                   ))}
                 </div>
 
-                <span className="text-xs text-[#555]">Send to</span>
+                <span className="text-xs text-[#949494]">Send to</span>
                 <select
                   value={channelName}
                   onChange={(e) => setChannelName(e.target.value)}
@@ -406,7 +406,7 @@ export default function AlertsPage() {
               </div>
 
               {/* Preview */}
-              <p className="text-[10px] text-[#333] font-mono bg-[#0A0A0A] rounded px-3 py-2 border border-[#161616]">
+              <p className="text-[10px] text-[#808080] font-mono bg-[#0A0A0A] rounded px-3 py-2 border border-[#161616]">
                 {preview}
               </p>
             </div>
@@ -431,7 +431,7 @@ export default function AlertsPage() {
                               {connected ? "connected" : "not configured"}
                             </Badge>
                             {ch.lastDeliveryAt && (
-                              <span className="text-[10px] text-[#333]">
+                              <span className="text-[10px] text-[#808080]">
                                 {timeAgo(ch.lastDeliveryAt)} · {ch.lastDeliveryOk ? "OK" : "failed"}
                               </span>
                             )}
@@ -459,7 +459,7 @@ export default function AlertsPage() {
                 );
               })}
               {channels.length === 0 && !addingChannel && (
-                <p className="col-span-2 text-xs text-[#444] text-center py-6">
+                <p className="col-span-2 text-xs text-[#808080] text-center py-6">
                   No channels yet. Add one to receive alert notifications.
                 </p>
               )}
@@ -469,7 +469,7 @@ export default function AlertsPage() {
             ) : (
               <button
                 onClick={() => setAddingChannel(true)}
-                className="rounded-lg border border-dashed border-[#2A2A2A] bg-transparent p-4 flex items-center justify-center gap-2 text-[#444] hover:text-[#888] hover:border-[#333] transition-colors w-full"
+                className="rounded-lg border border-dashed border-[#2A2A2A] bg-transparent p-4 flex items-center justify-center gap-2 text-[#808080] hover:text-[#888] hover:border-[#333] transition-colors w-full"
               >
                 <Plus className="h-4 w-4" />
                 <span className="text-sm">Add Channel</span>
@@ -482,14 +482,14 @@ export default function AlertsPage() {
         {activeTab === "history" && (
           <div className="rounded-lg border border-[#1E1E1E] bg-[#111] divide-y divide-[#161616]">
             {historyEntries.length === 0 && (
-              <p className="text-xs text-[#444] px-4 py-6 text-center">No alert history yet.</p>
+              <p className="text-xs text-[#808080] px-4 py-6 text-center">No alert history yet.</p>
             )}
             {historyEntries.map((h) => (
               <div key={h.id} className="flex items-center gap-4 px-4 py-3 hover:bg-[#151515] transition-colors cursor-pointer">
                 <div className={`h-2 w-2 rounded-full flex-shrink-0 ${h.resolved ? "bg-green" : "bg-red animate-pulse"}`} />
                 <div className="flex-1">
                   <p className="text-xs font-medium text-[#F5F5F5]">{h.ruleName}</p>
-                  <p className="text-[10px] text-[#444] mt-0.5">
+                  <p className="text-[10px] text-[#808080] mt-0.5">
                     {timeAgo(h.firedAt)} · {h.duration} · via {h.channel}
                   </p>
                 </div>
diff --git a/app/(dashboard)/endpoints/page.tsx b/app/(dashboard)/endpoints/page.tsx
index 2874a2e..8ebef61 100644
--- a/app/(dashboard)/endpoints/page.tsx
+++ b/app/(dashboard)/endpoints/page.tsx
@@ -112,7 +112,7 @@ export default function EndpointsPage() {
             <Badge variant="red" dot>{summary.critical} Critical</Badge>
           </div>
           <div className="ml-auto flex items-center gap-2">
-            <span className="text-xs text-[#444]">{filtered.length} endpoints</span>
+            <span className="text-xs text-[#808080]">{filtered.length} endpoints</span>
             <Button
               variant={compareMode ? "primary" : "ghost"}
               size="sm"
@@ -126,13 +126,13 @@ export default function EndpointsPage() {
 
         {/* Compare mode hint */}
         {compareMode && !showingComparison && (
-          <div className="flex items-center gap-2 text-xs text-[#555] bg-blue-dim border border-blue/20 rounded px-3 py-2">
+          <div className="flex items-center gap-2 text-xs text-[#949494] bg-blue-dim border border-blue/20 rounded px-3 py-2">
             <GitCompare className="h-3 w-3 text-blue" />
             {compareSelection.length === 0
               ? "Select 2 endpoints to compare"
               : `${compareSelection.length}/2 selected — pick one more`}
             {compareSelection.length > 0 && (
-              <button onClick={() => setCompareSelection([])} className="ml-auto text-[#444] hover:text-[#888]">
+              <button onClick={() => setCompareSelection([])} className="ml-auto text-[#808080] hover:text-[#888]">
                 <X className="h-3 w-3" />
               </button>
             )}
@@ -151,13 +151,13 @@ export default function EndpointsPage() {
         <div className="flex items-center gap-3 flex-wrap">
           {/* Route search */}
           <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-[#1E1E1E] bg-[#111] flex-1 max-w-xs hover:border-[#2A2A2A] transition-colors">
-            <Search className="h-3 w-3 text-[#444] flex-shrink-0" />
+            <Search className="h-3 w-3 text-[#808080] flex-shrink-0" />
             <input
               type="text"
               placeholder="Filter by route..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#333] outline-none flex-1"
+              className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#808080] outline-none flex-1"
             />
           </div>
 
@@ -168,7 +168,7 @@ export default function EndpointsPage() {
                 key={m}
                 onClick={() => setMethodFilter(m)}
                 className={`px-2 py-1 text-[10px] font-bold rounded transition-colors ${
-                  methodFilter === m ? "bg-blue text-white" : "text-[#555] hover:text-[#888]"
+                  methodFilter === m ? "bg-blue text-white" : "text-[#949494] hover:text-[#888]"
                 }`}
               >
                 {m}
@@ -189,7 +189,7 @@ export default function EndpointsPage() {
                       : label === "4xx"
                       ? "bg-yellow/20 text-yellow"
                       : "bg-red/20 text-red"
-                    : "text-[#555] hover:text-[#888]"
+                    : "text-[#949494] hover:text-[#888]"
                 }`}
               >
                 {label}
@@ -199,17 +199,17 @@ export default function EndpointsPage() {
 
           {/* Latency threshold */}
           <div className="flex items-center gap-1.5 px-2 py-1.5 rounded border border-[#1E1E1E] bg-[#111]">
-            <span className="text-[10px] text-[#444]">p99 &lt;</span>
+            <span className="text-[10px] text-[#808080]">p99 &lt;</span>
             <input
               type="number"
               placeholder="ms"
               value={maxLatency}
               onChange={(e) => setMaxLatency(e.target.value)}
-              className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#333] outline-none w-14 text-right tabular-nums"
+              className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#808080] outline-none w-14 text-right tabular-nums"
             />
-            <span className="text-[10px] text-[#333]">ms</span>
+            <span className="text-[10px] text-[#808080]">ms</span>
             {maxLatency && (
-              <button onClick={() => setMaxLatency("")} className="text-[#333] hover:text-[#666]">
+              <button onClick={() => setMaxLatency("")} className="text-[#808080] hover:text-[#949494]">
                 <X className="h-2.5 w-2.5" />
               </button>
             )}
diff --git a/app/(dashboard)/overview/page.tsx b/app/(dashboard)/overview/page.tsx
index cb62e8c..bb9ad94 100644
--- a/app/(dashboard)/overview/page.tsx
+++ b/app/(dashboard)/overview/page.tsx
@@ -5,11 +5,12 @@ import { TimeRangePicker } from "@/components/layout/time-range-picker";
 import { StatCardComponent } from "@/components/dashboard/stat-card";
 import { RequestsChart } from "@/components/charts/requests-chart";
 import { ErrorRateChart } from "@/components/charts/error-rate-chart";
+import { EmptyChartState } from "@/components/charts/empty-chart-state";
 import { LiveLogTable } from "@/components/dashboard/live-log-table";
 import { IncidentPanel } from "@/components/dashboard/incident-panel";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import { useTimeRange } from "@/hooks/use-time-range";
-import { useMetrics, useIncidentSocket } from "@/hooks/use-websocket";
+import { useMetrics, useIncidentSocket, useLiveChartData } from "@/hooks/use-websocket";
 import { useChartData, useIncidents } from "@/hooks/use-data";
 import { useProjects } from "@/components/providers/project-provider";
 
@@ -18,22 +19,31 @@ const SPARK_COLORS = ["#378ADD", "#EF4444", "#F59E0B", "#22C55E"];
 export default function OverviewPage() {
   const { range, setRange, hours } = useTimeRange("24h");
   const { activeProject } = useProjects();
+  const isLive = range === "live";
 
-  // REST: chart timeseries + incidents (real data; mock while loading / API down)
-  const { data: chartData } = useChartData(hours);
+  // REST: chart timeseries + incidents — real data only; empty while
+  // loading, on error, or genuinely no traffic in range (never fabricated).
+  // In "live" mode the REST range is irrelevant (not displayed) — pass a
+  // harmless valid value rather than skipping the hook (Rules of Hooks).
+  const { data: restChartData } = useChartData(isLive ? 1 : hours);
   const { data: incidents } = useIncidents();
 
   // Live stat cards + incidents via Socket.io — project-scoped realtime token
-  // fetched from the BFF; falls back to demo data while connecting / keyless.
+  // fetched from the BFF.
   const projectId = activeProject?.id ?? null;
   const cards = useMetrics(projectId);
   const liveIncidents = useIncidentSocket(projectId);
+  // Rolling ~2 min buffer from the same real-time metric stream as the stat
+  // cards — only actually connects while "Live" is selected below.
+  const liveChartData = useLiveChartData(isLive ? projectId : null);
+
+  const chartData = isLive ? liveChartData : restChartData;
 
   return (
     <div className="flex flex-col min-h-screen">
       <Topbar
         breadcrumb={[{ label: "Projects" }, { label: activeProject?.name ?? "—" }, { label: "Overview" }]}
-        actions={<TimeRangePicker value={range} onChange={setRange} />}
+        actions={<TimeRangePicker value={range} onChange={setRange} showLive />}
       />
 
       <div className="flex-1 flex gap-0">
@@ -51,9 +61,15 @@ export default function OverviewPage() {
             <Card>
               <CardHeader>
                 <CardTitle>Requests Over Time</CardTitle>
-                <span className="text-[10px] text-[#444] font-mono">req/min</span>
+                <span className="text-[10px] text-[#808080] font-mono">req/min</span>
               </CardHeader>
-              <RequestsChart data={chartData} />
+              {chartData.length > 0 ? (
+                <RequestsChart data={chartData} />
+              ) : (
+                <EmptyChartState
+                  message={isLive ? "Waiting for live traffic…" : "No traffic in this time range yet."}
+                />
+              )}
             </Card>
             <Card>
               <CardHeader>
@@ -66,12 +82,18 @@ export default function OverviewPage() {
                   ].map((l) => (
                     <div key={l.label} className="flex items-center gap-1">
                       <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: l.color }} />
-                      <span className="text-[10px] text-[#444]">{l.label}</span>
+                      <span className="text-[10px] text-[#808080]">{l.label}</span>
                     </div>
                   ))}
                 </div>
               </CardHeader>
-              <ErrorRateChart data={chartData} />
+              {chartData.length > 0 ? (
+                <ErrorRateChart data={chartData} />
+              ) : (
+                <EmptyChartState
+                  message={isLive ? "Waiting for live traffic…" : "No response data in this time range yet."}
+                />
+              )}
             </Card>
           </div>
 
diff --git a/app/(dashboard)/pipelines/page.tsx b/app/(dashboard)/pipelines/page.tsx
deleted file mode 100644
index 66a43cd..0000000
--- a/app/(dashboard)/pipelines/page.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Topbar } from "@/components/layout/topbar";
-import { TimeRangePicker } from "@/components/layout/time-range-picker";
-import { PipelineArchitecture } from "@/components/dashboard/pipeline-architecture";
-import { ActivePipeline } from "@/components/dashboard/active-pipeline";
-import { StatCardComponent } from "@/components/dashboard/stat-card";
-import { useTimeRange } from "@/hooks/use-time-range";
-import { Button } from "@/components/ui/button";
-import { Plus } from "lucide-react";
-import type { StatCard } from "@/lib/types";
-
-const PIPELINE_CARDS: StatCard[] = [
-  { label: "Processed Prompts", value: "124", unit: "k", delta: 15, deltaLabel: "vs yesterday", sparkline: [80,90,95,110,100,115,120,124,118,122,119,124] },
-  { label: "Avg. Latency", value: "850", unit: "ms", delta: 45, deltaLabel: "vs yesterday", sparkline: [700,720,800,810,790,830,845,850,840,855,848,850] },
-  { label: "Total Cost", value: "$452", delta: -120, deltaLabel: "vs yesterday", sparkline: [580,560,540,510,490,480,465,460,455,452,454,452] },
-  { label: "Blocked Requests", value: "2.4", unit: "k", delta: 4, deltaLabel: "vs yesterday", sparkline: [1.8,1.9,2.0,2.1,2.0,2.2,2.3,2.35,2.4,2.38,2.4,2.4] },
-];
-
-const PIPELINE_LIST = [
-  { name: "Customer Support Bot", status: "healthy", requests: "124k", model: "GPT-4o / Claude" },
-  { name: "Code Review Agent", status: "healthy", requests: "38k", model: "Claude Sonnet" },
-  { name: "Document Summarizer", status: "warning", requests: "12k", model: "Gemini Flash" },
-  { name: "Email Classifier", status: "healthy", requests: "89k", model: "GPT-4o Mini" },
-];
-
-export default function PipelinesPage() {
-  const { range, setRange } = useTimeRange("24h");
-  const [activePipeline, setActivePipeline] = useState(PIPELINE_LIST[0].name);
-
-  return (
-    <div className="flex flex-col min-h-screen">
-      <Topbar
-        breadcrumb={[
-          { label: "Pipelines" },
-          { label: activePipeline },
-        ]}
-        actions={
-          <>
-            <TimeRangePicker value={range} onChange={setRange} />
-            <Button variant="primary" size="sm">
-              <Plus className="h-3 w-3" />
-              New Flow
-            </Button>
-          </>
-        }
-      />
-
-      {/* Overview/Metrics/Evaluations tabs */}
-      <div className="flex items-center gap-0.5 px-5 pt-4 border-b border-[#1E1E1E]">
-        {["Overview", "Metrics", "Evaluations"].map((tab, i) => (
-          <button
-            key={tab}
-            className={`px-3 py-2 text-xs font-medium border-b-2 -mb-px transition-colors ${
-              i === 0
-                ? "border-blue text-[#F5F5F5]"
-                : "border-transparent text-[#555] hover:text-[#888]"
-            }`}
-          >
-            {tab}
-          </button>
-        ))}
-      </div>
-
-      <div className="flex flex-1 gap-0">
-        {/* Left: pipeline list */}
-        <div className="w-[200px] flex-shrink-0 border-r border-[#1E1E1E] p-3 space-y-1">
-          <p className="text-[10px] text-[#333] uppercase tracking-wider px-2 mb-2">Pipelines</p>
-          {PIPELINE_LIST.map((p) => (
-            <button
-              key={p.name}
-              onClick={() => setActivePipeline(p.name)}
-              className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-left transition-colors ${
-                activePipeline === p.name
-                  ? "bg-blue-dim text-blue border border-blue-border"
-                  : "text-[#888] hover:text-[#F5F5F5] hover:bg-[#161616] border border-transparent"
-              }`}
-            >
-              <div className={`h-1.5 w-1.5 rounded-full flex-shrink-0 ${p.status === "healthy" ? "bg-green" : "bg-yellow"}`} />
-              <span className="text-xs font-medium truncate">{p.name}</span>
-            </button>
-          ))}
-        </div>
-
-        {/* Main content */}
-        <div className="flex-1 p-5 space-y-5 min-w-0">
-          {/* Stat cards */}
-          <div className="grid grid-cols-4 gap-3">
-            {PIPELINE_CARDS.map((card, i) => {
-              const COLORS = ["#378ADD", "#F59E0B", "#22C55E", "#EF4444"];
-              return (
-                <StatCardComponent
-                  key={card.label}
-                  card={card}
-                  sparkColor={COLORS[i]}
-                />
-              );
-            })}
-          </div>
-
-          <PipelineArchitecture />
-        </div>
-
-        {/* Right: Active pipeline architecture */}
-        <div className="w-[320px] flex-shrink-0 border-l border-[#1E1E1E] overflow-y-auto no-scrollbar p-4">
-          <ActivePipeline />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/(dashboard)/traces/page.tsx b/app/(dashboard)/traces/page.tsx
index f41734c..82155ae 100644
--- a/app/(dashboard)/traces/page.tsx
+++ b/app/(dashboard)/traces/page.tsx
@@ -3,12 +3,14 @@
 import { useState, useEffect, useMemo } from "react";
 import { Search, GitBranch, Map } from "lucide-react";
 import { Topbar } from "@/components/layout/topbar";
+import { TimeRangePicker } from "@/components/layout/time-range-picker";
 import { FlameGraph } from "@/components/traces/flame-graph";
 import { SpanDetail } from "@/components/traces/span-detail";
 import { ServiceMap } from "@/components/traces/service-map";
 import { Badge } from "@/components/ui/badge";
 import { cn, formatMs, timeAgo } from "@/lib/utils";
 import { useTraces } from "@/hooks/use-data";
+import { useTimeRange } from "@/hooks/use-time-range";
 import { useProjects } from "@/components/providers/project-provider";
 import type { Trace, TraceSpan } from "@/lib/types";
 
@@ -36,7 +38,8 @@ type ViewMode = "flamegraph" | "servicemap";
 
 export default function TracesPage() {
   const { activeProject } = useProjects();
-  const { data: traces } = useTraces();
+  const { range, setRange, hours } = useTimeRange("24h");
+  const { data: traces } = useTraces(hours);
   const [selectedTrace, setSelectedTrace] = useState<Trace | null>(null);
 
   // Keep the selection in sync with the current trace list: clear it when the
@@ -64,7 +67,10 @@ export default function TracesPage() {
 
   return (
     <div className="flex flex-col min-h-screen">
-      <Topbar breadcrumb={[{ label: "Projects" }, { label: activeProject?.name ?? "—" }, { label: "Traces" }]} />
+      <Topbar
+        breadcrumb={[{ label: "Projects" }, { label: activeProject?.name ?? "—" }, { label: "Traces" }]}
+        actions={<TimeRangePicker value={range} onChange={setRange} />}
+      />
 
       <div className="flex flex-1 gap-0">
         {/* Trace list */}
@@ -72,13 +78,13 @@ export default function TracesPage() {
           {/* Search */}
           <div className="p-3 border-b border-[#1E1E1E] space-y-2">
             <div className="flex items-center gap-1.5 px-2 py-1.5 rounded border border-[#1E1E1E] bg-[#111]">
-              <Search className="h-3 w-3 text-[#444]" />
+              <Search className="h-3 w-3 text-[#808080]" />
               <input
                 type="text"
                 placeholder="Search trace ID, endpoint..."
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="bg-transparent text-[10px] text-[#F5F5F5] placeholder-[#333] outline-none flex-1"
+                className="bg-transparent text-[10px] text-[#F5F5F5] placeholder-[#808080] outline-none flex-1"
               />
             </div>
             {/* Duration filter */}
@@ -91,7 +97,7 @@ export default function TracesPage() {
                     "px-2 py-0.5 text-[9px] rounded border transition-colors",
                     durationFilter === opt.value
                       ? "border-blue bg-blue/10 text-blue"
-                      : "border-[#1E1E1E] text-[#444] hover:text-[#888] hover:border-[#2A2A2A]"
+                      : "border-[#1E1E1E] text-[#808080] hover:text-[#888] hover:border-[#2A2A2A]"
                   )}
                 >
                   {opt.label}
@@ -111,14 +117,14 @@ export default function TracesPage() {
                 )}
               >
                 <div className="flex items-center justify-between mb-1">
-                  <span className="text-[10px] font-mono text-[#555]">{trace.id}</span>
+                  <span className="text-[10px] font-mono text-[#949494]">{trace.id}</span>
                   <Badge variant={trace.status === "error" ? "red" : "green"} size="sm">
                     {trace.status}
                   </Badge>
                 </div>
                 <p className="text-xs text-[#F5F5F5] font-mono truncate mb-1">{trace.endpoint}</p>
                 <div className="flex items-center justify-between">
-                  <span className="text-[10px] text-[#444]">{timeAgo(trace.timestamp)}</span>
+                  <span className="text-[10px] text-[#808080]">{timeAgo(trace.timestamp)}</span>
                   <span className={cn(
                     "text-[10px] font-mono font-semibold",
                     trace.totalDuration > 1000 ? "text-red" : trace.totalDuration > 500 ? "text-yellow" : "text-green"
@@ -129,7 +135,7 @@ export default function TracesPage() {
               </button>
             ))}
             {filtered.length === 0 && (
-              <div className="p-6 text-center text-[10px] text-[#333]">No traces match</div>
+              <div className="p-6 text-center text-[10px] text-[#808080]">No traces match</div>
             )}
           </div>
         </div>
@@ -141,12 +147,12 @@ export default function TracesPage() {
               {/* Trace header + toolbar */}
               <div className="flex items-center gap-4 flex-wrap">
                 <div className="flex items-center gap-2">
-                  <span className="text-[10px] text-[#444] uppercase tracking-wider">Trace</span>
+                  <span className="text-[10px] text-[#808080] uppercase tracking-wider">Trace</span>
                   <span className="text-xs font-mono text-blue">{selectedTrace.id}</span>
                 </div>
                 <div className="h-3 w-px bg-[#1E1E1E]" />
-                <span className="text-xs text-[#444]">{selectedTrace.spans.length} spans</span>
-                <span className="text-xs text-[#444]">{timeAgo(selectedTrace.timestamp)}</span>
+                <span className="text-xs text-[#808080]">{selectedTrace.spans.length} spans</span>
+                <span className="text-xs text-[#808080]">{timeAgo(selectedTrace.timestamp)}</span>
                 <Badge variant={selectedTrace.status === "error" ? "red" : "green"} size="sm">
                   {selectedTrace.status}
                 </Badge>
@@ -161,7 +167,7 @@ export default function TracesPage() {
                         "flex items-center gap-1.5 px-2.5 py-1 rounded border text-[10px] transition-colors",
                         criticalPath
                           ? "border-[#F59E0B]/40 bg-[#F59E0B]/10 text-[#F59E0B]"
-                          : "border-[#1E1E1E] text-[#444] hover:text-[#888] hover:border-[#2A2A2A]"
+                          : "border-[#1E1E1E] text-[#808080] hover:text-[#888] hover:border-[#2A2A2A]"
                       )}
                     >
                       <GitBranch className="h-3 w-3" />
@@ -175,7 +181,7 @@ export default function TracesPage() {
                       onClick={() => setViewMode("flamegraph")}
                       className={cn(
                         "flex items-center gap-1 px-2 py-1 text-[10px] rounded transition-colors",
-                        viewMode === "flamegraph" ? "bg-blue text-white" : "text-[#555] hover:text-[#888]"
+                        viewMode === "flamegraph" ? "bg-blue text-white" : "text-[#949494] hover:text-[#888]"
                       )}
                     >
                       <GitBranch className="h-3 w-3" />
@@ -185,7 +191,7 @@ export default function TracesPage() {
                       onClick={() => setViewMode("servicemap")}
                       className={cn(
                         "flex items-center gap-1 px-2 py-1 text-[10px] rounded transition-colors",
-                        viewMode === "servicemap" ? "bg-blue text-white" : "text-[#555] hover:text-[#888]"
+                        viewMode === "servicemap" ? "bg-blue text-white" : "text-[#949494] hover:text-[#888]"
                       )}
                     >
                       <Map className="h-3 w-3" />
@@ -211,7 +217,7 @@ export default function TracesPage() {
               )}
             </>
           ) : (
-            <div className="flex-1 flex items-center justify-center text-[#333] text-sm">
+            <div className="flex-1 flex items-center justify-center text-[#808080] text-sm">
               Select a trace to view the flame graph
             </div>
           )}
diff --git a/app/api/lb/[...path]/route.ts b/app/api/lb/[...path]/route.ts
index 2eab36d..656c724 100644
--- a/app/api/lb/[...path]/route.ts
+++ b/app/api/lb/[...path]/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/auth";
+import { verifyProjectAccess } from "@/lib/project-access";
 
 /**
  * Session-scoped read/write proxy for dashboard telemetry.
@@ -7,9 +8,11 @@ import { auth } from "@/auth";
  *   browser (no key) → here (NextAuth session) → backend (internal token + project)
  *
  * Enforces that the requested `?project=<id>` belongs to the signed-in user
- * (via `session.projectIds`), then forwards to the FastAPI backend with the
- * server-only internal token and an explicit `x-project-id`. The browser never
- * holds a project API key or the internal token.
+ * with a fresh membership check (see lib/project-access.ts — a cached
+ * session-level list goes stale the moment a project is created after
+ * login), then forwards to the FastAPI backend with the server-only internal
+ * token and an explicit `x-project-id`. The browser never holds a project API
+ * key or the internal token.
  */
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
@@ -25,7 +28,7 @@ async function proxy(req: Request, ctx: { params: Promise<{ path: string[] }> })
   const reqUrl = new URL(req.url);
   const project = reqUrl.searchParams.get("project");
   if (!project) return NextResponse.json({ error: "missing_project" }, { status: 400 });
-  if (!session.projectIds?.includes(project)) {
+  if (!(await verifyProjectAccess(email, project))) {
     return NextResponse.json({ error: "forbidden" }, { status: 403 });
   }
 
diff --git a/app/api/realtime-token/route.ts b/app/api/realtime-token/route.ts
index 805275f..632dccd 100644
--- a/app/api/realtime-token/route.ts
+++ b/app/api/realtime-token/route.ts
@@ -1,9 +1,11 @@
 import { NextResponse } from "next/server";
 import { auth } from "@/auth";
+import { verifyProjectAccess } from "@/lib/project-access";
 
 // Mints a short-lived, project-scoped realtime token for the browser's
-// Socket.io / SSE connections — only after verifying the signed-in user is a
-// member of the requested project. The browser never holds an API key.
+// Socket.io / SSE connections — only after verifying (fresh, not cached —
+// see lib/project-access.ts) the signed-in user is a member of the
+// requested project. The browser never holds an API key.
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
 function internalToken(): string {
@@ -17,7 +19,7 @@ export async function GET(req: Request) {
 
   const project = new URL(req.url).searchParams.get("project");
   if (!project) return NextResponse.json({ error: "missing_project" }, { status: 400 });
-  if (!session.projectIds?.includes(project)) {
+  if (!(await verifyProjectAccess(email, project))) {
     return NextResponse.json({ error: "forbidden" }, { status: 403 });
   }
 
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index 7cf301e..f189a50 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -50,7 +50,7 @@ function SignInForm() {
         <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-8 space-y-6">
           <div className="space-y-1.5 text-center">
             <h1 className="text-lg font-semibold text-[#F5F5F5]">Welcome back</h1>
-            <p className="text-sm text-[#555]">Sign in to your Liveboard workspace</p>
+            <p className="text-sm text-[#949494]">Sign in to your Liveboard workspace</p>
           </div>
 
           {error && (
@@ -76,7 +76,7 @@ function SignInForm() {
               {hasGoogle && (
                 <div className="flex items-center gap-2">
                   <div className="flex-1 h-px bg-[#1E1E1E]" />
-                  <span className="text-[10px] text-[#333]">dev login</span>
+                  <span className="text-[10px] text-[#808080]">dev login</span>
                   <div className="flex-1 h-px bg-[#1E1E1E]" />
                 </div>
               )}
@@ -124,15 +124,15 @@ function SignInForm() {
             </p>
           )}
 
-          <p className="text-center text-[10px] text-[#444] leading-relaxed">
+          <p className="text-center text-[10px] text-[#808080] leading-relaxed">
             By signing in you agree to our{" "}
-            <span className="text-[#666] hover:text-[#888] cursor-pointer transition-colors">Terms of Service</span>
+            <span className="text-[#949494] hover:text-[#888] cursor-pointer transition-colors">Terms of Service</span>
             {" "}and{" "}
-            <span className="text-[#666] hover:text-[#888] cursor-pointer transition-colors">Privacy Policy</span>.
+            <span className="text-[#949494] hover:text-[#888] cursor-pointer transition-colors">Privacy Policy</span>.
           </p>
         </div>
 
-        <p className="mt-6 text-center text-xs text-[#333]">Open source API observability</p>
+        <p className="mt-6 text-center text-xs text-[#808080]">Open source API observability</p>
       </div>
     </div>
   );
diff --git a/apps/api/api/routes/query.py b/apps/api/api/routes/query.py
index f1b8a5b..a725664 100644
--- a/apps/api/api/routes/query.py
+++ b/apps/api/api/routes/query.py
@@ -33,31 +33,65 @@ async def get_timeseries(
     project_id: str = Depends(resolve_project_id),
     conn: asyncpg.Connection = Depends(scoped_conn),
 ) -> list[TimeseriesPoint]:
-    """Request volume and status-code breakdown bucketed over time."""
+    """
+    Request volume and status-code breakdown bucketed over time.
+
+    Counts are normalized to a per-minute rate (divided by bucket width) —
+    the bucket width varies with `hours` (5 min / 15 min / 1 hr) so a raw
+    per-bucket count would jump ~12x just from switching the time range,
+    with no actual traffic change.
+
+    Buckets are generated for the *entire* requested range up front (via
+    generate_series) and left-joined against the real data, rather than only
+    returning rows where traffic happened. Otherwise a quiet stretch — no
+    events for hours — simply has no rows, and the chart draws a straight
+    line connecting the points either side of the gap as if it were one
+    smooth, continuous step. Zero-filling makes a real gap look like a gap.
+
+    `time` is returned as a raw ISO 8601 UTC instant, not a pre-formatted
+    string — this endpoint has no idea what timezone the viewer is in, so
+    formatting here would silently bake in the server's UTC clock. The
+    frontend formats it in the viewer's local timezone, same as every other
+    timestamp in the app (live log, incidents, etc.).
+    """
     # asyncpg encodes interval params from datetime.timedelta (not str).
-    bucket = (
-        datetime.timedelta(minutes=5) if hours <= 6
-        else datetime.timedelta(minutes=15) if hours <= 24
-        else datetime.timedelta(hours=1)
-    )
-    fmt = "%H:%M" if hours <= 24 else "%b %d"
+    bucket_minutes = 5 if hours <= 6 else 15 if hours <= 24 else 60
+    bucket = datetime.timedelta(minutes=bucket_minutes)
 
     rows = await conn.fetch(
         """
+        WITH buckets AS (
+            SELECT generate_series(
+                time_bucket($1, now() - ($3 * INTERVAL '1 hour')),
+                time_bucket($1, now()),
+                $1
+            ) AS t
+        ),
+        agg AS (
+            SELECT
+                time_bucket($1, time)                                                    AS t,
+                COUNT(*)::int                                                             AS requests,
+                SUM(CASE WHEN status_code < 400               THEN 1 ELSE 0 END)::int   AS req_2xx,
+                SUM(CASE WHEN status_code BETWEEN 400 AND 499 THEN 1 ELSE 0 END)::int   AS req_4xx,
+                SUM(CASE WHEN status_code >= 500              THEN 1 ELSE 0 END)::int   AS req_5xx,
+                COALESCE(
+                    PERCENTILE_CONT(0.99) WITHIN GROUP (ORDER BY duration_ms), 0
+                )::float                                                                  AS p99
+            FROM events
+            WHERE project_id = $2
+              AND time >= now() - ($3 * INTERVAL '1 hour')
+            GROUP BY t
+        )
         SELECT
-            time_bucket($1, time)                                                    AS t,
-            COUNT(*)::int                                                             AS requests,
-            SUM(CASE WHEN status_code < 400               THEN 1 ELSE 0 END)::int   AS req_2xx,
-            SUM(CASE WHEN status_code BETWEEN 400 AND 499 THEN 1 ELSE 0 END)::int   AS req_4xx,
-            SUM(CASE WHEN status_code >= 500              THEN 1 ELSE 0 END)::int   AS req_5xx,
-            COALESCE(
-                PERCENTILE_CONT(0.99) WITHIN GROUP (ORDER BY duration_ms), 0
-            )::float                                                                  AS p99
-        FROM events
-        WHERE project_id = $2
-          AND time >= now() - ($3 * INTERVAL '1 hour')
-        GROUP BY t
-        ORDER BY t
+            b.t,
+            COALESCE(a.requests, 0) AS requests,
+            COALESCE(a.req_2xx, 0)  AS req_2xx,
+            COALESCE(a.req_4xx, 0)  AS req_4xx,
+            COALESCE(a.req_5xx, 0)  AS req_5xx,
+            COALESCE(a.p99, 0)      AS p99
+        FROM buckets b
+        LEFT JOIN agg a ON a.t = b.t
+        ORDER BY b.t
         """,
         bucket,
         project_id,
@@ -66,11 +100,11 @@ async def get_timeseries(
 
     return [
         TimeseriesPoint(
-            time=row["t"].strftime(fmt),
-            requests=row["requests"],
-            errors2xx=row["req_2xx"],
-            errors4xx=row["req_4xx"],
-            errors5xx=row["req_5xx"],
+            time=row["t"].isoformat(),
+            requests=round(row["requests"] / bucket_minutes, 1),
+            errors2xx=round(row["req_2xx"] / bucket_minutes, 1),
+            errors4xx=round(row["req_4xx"] / bucket_minutes, 1),
+            errors5xx=round(row["req_5xx"] / bucket_minutes, 1),
             p99=round(row["p99"], 1),
         )
         for row in rows
@@ -136,12 +170,9 @@ async def get_endpoints(
 
 # ─── Incidents ───────────────────────────────────────────────────────────────
 
-@router.get("/incidents", response_model=list[IncidentOut])
-async def get_incidents(
-    project_id: str = Depends(resolve_project_id),
-    conn: asyncpg.Connection = Depends(scoped_conn),
-) -> list[IncidentOut]:
-    """Recent incidents from the AI anomaly detection worker (Phase 5)."""
+async def fetch_incidents(conn: asyncpg.Connection, project_id: str) -> list[IncidentOut]:
+    """Recent incidents from the AI anomaly detection worker (Phase 5). Shared by the
+    authenticated dashboard route and the public status-page route."""
     rows = await conn.fetch(
         """
         SELECT id, severity, title, summary, endpoint, resolved, created_at
@@ -166,16 +197,28 @@ async def get_incidents(
     ]
 
 
+@router.get("/incidents", response_model=list[IncidentOut])
+async def get_incidents(
+    project_id: str = Depends(resolve_project_id),
+    conn: asyncpg.Connection = Depends(scoped_conn),
+) -> list[IncidentOut]:
+    return await fetch_incidents(conn, project_id)
+
+
 # ─── Traces ──────────────────────────────────────────────────────────────────
 
 @router.get("/traces", response_model=list[TraceOut])
 async def get_traces(
+    hours: int = Query(24, ge=1, le=168),
     project_id: str = Depends(resolve_project_id),
     conn: asyncpg.Connection = Depends(scoped_conn),
 ) -> list[TraceOut]:
     """
-    Recent distributed traces assembled from the spans table.
-    Returns an empty list until Phase 6 (span ingest) is wired up.
+    Recent distributed traces assembled from the spans table, within the
+    last `hours` (default 24, matching Endpoints/Overview's picker). This
+    used to hardcode 24h with no way to widen it and no indication to the
+    viewer that a window even existed — a project with real spans older than
+    a day would just show an empty page with no explanation.
     """
     rows = await conn.fetch(
         """
@@ -183,7 +226,7 @@ async def get_traces(
             SELECT DISTINCT trace_id
             FROM spans
             WHERE project_id = $1
-              AND start_time >= now() - INTERVAL '24 hours'
+              AND start_time >= now() - ($2 * INTERVAL '1 hour')
             LIMIT 20
         )
         SELECT
@@ -205,6 +248,7 @@ async def get_traces(
         ORDER BY trace_start DESC, s.start_time
         """,
         project_id,
+        hours,
     )
 
     # Group spans into traces
@@ -281,14 +325,11 @@ def _service_name(prefix: str) -> str:
     return _map.get(segment, prefix or "API")
 
 
-@router.get("/services", response_model=list[ServiceStatusOut])
-async def get_services(
-    project_id: str = Depends(resolve_project_id),
-    conn: asyncpg.Connection = Depends(scoped_conn),
-) -> list[ServiceStatusOut]:
+async def fetch_services(conn: asyncpg.Connection, project_id: str) -> list[ServiceStatusOut]:
     """
     Service health derived from route-prefix groups in event data.
     Uptime bars represent up to 90 days; missing days default to 'up'.
+    Shared by the authenticated dashboard route and the public status-page route.
     """
     rows = await conn.fetch(
         """
@@ -365,3 +406,11 @@ async def get_services(
         )
 
     return result[:10]
+
+
+@router.get("/services", response_model=list[ServiceStatusOut])
+async def get_services(
+    project_id: str = Depends(resolve_project_id),
+    conn: asyncpg.Connection = Depends(scoped_conn),
+) -> list[ServiceStatusOut]:
+    return await fetch_services(conn, project_id)
diff --git a/apps/api/api/schemas.py b/apps/api/api/schemas.py
index 4e99d36..273b446 100644
--- a/apps/api/api/schemas.py
+++ b/apps/api/api/schemas.py
@@ -52,10 +52,10 @@ class ProjectResponse(BaseModel):
 
 class TimeseriesPoint(BaseModel):
     time: str
-    requests: int
-    errors2xx: int
-    errors4xx: int
-    errors5xx: int
+    requests: float   # per-minute rate, normalized by bucket width — never a raw bucket count
+    errors2xx: float
+    errors4xx: float
+    errors5xx: float
     p99: float
 
 
diff --git a/apps/api/worker/metrics.py b/apps/api/worker/metrics.py
index b3dd6cb..06ff4a1 100644
--- a/apps/api/worker/metrics.py
+++ b/apps/api/worker/metrics.py
@@ -4,8 +4,8 @@
 Every second it:
   1. SCANs Redis for active event streams (events:*)
   2. Queries the last 60-second window from TimescaleDB per project
-  3. Publishes { requests, errorRate, p99, bucket } to  metrics:{project_id}
-     on the Redis pub/sub bus
+  3. Publishes { requests, errorRate, p99, avg, req2xx, req4xx, req5xx, bucket }
+     to metrics:{project_id} on the Redis pub/sub bus
 
 The API process (realtime/pubsub.py) subscribes to metrics:* and forwards
 each message to the correct Socket.io room.
@@ -55,7 +55,10 @@ async def _fetch_metrics(conn: asyncpg.Connection, project_id: str) -> Optional[
             COALESCE(
                 PERCENTILE_CONT(0.99) WITHIN GROUP (ORDER BY duration_ms), 0
             )                                                                 AS p99,
-            COALESCE(AVG(duration_ms), 0)                                    AS avg_ms
+            COALESCE(AVG(duration_ms), 0)                                    AS avg_ms,
+            SUM(CASE WHEN status_code < 400               THEN 1 ELSE 0 END) AS req_2xx,
+            SUM(CASE WHEN status_code BETWEEN 400 AND 499 THEN 1 ELSE 0 END) AS req_4xx,
+            SUM(CASE WHEN status_code >= 500               THEN 1 ELSE 0 END) AS req_5xx
         FROM events
         WHERE project_id = $1::uuid
           AND time > NOW() - INTERVAL '1 minute'
@@ -69,6 +72,9 @@ async def _fetch_metrics(conn: asyncpg.Connection, project_id: str) -> Optional[
         "errorRate": float(row["error_rate"] or 0),
         "p99": round(float(row["p99"]), 1),
         "avg": round(float(row["avg_ms"]), 1),
+        "req2xx": int(row["req_2xx"] or 0),
+        "req4xx": int(row["req_4xx"] or 0),
+        "req5xx": int(row["req_5xx"] or 0),
         "bucket": None,
     }
 
diff --git a/auth.ts b/auth.ts
index 05a37a4..2f30061 100644
--- a/auth.ts
+++ b/auth.ts
@@ -80,15 +80,21 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
   session: { strategy: "jwt" },
 
   callbacks: {
-    // Provision a real user + org + project in the backend on sign-in, and
-    // record the projects this user may read. Never blocks login on failure.
+    // Provision a real user + org + project in the backend on sign-in.
+    // Never blocks login on failure.
+    //
+    // Deliberately NOT caching the project list on the token here: a JWT
+    // session is only re-derived at sign-in, so a project created afterward
+    // (by this route or a teammate) would look inaccessible — every
+    // dashboard read and realtime connection 403ing — until the user signed
+    // out and back in. Project access is instead checked fresh, per request,
+    // against the backend (lib/project-access.ts).
     async jwt({ token, user }) {
       if (user?.email) {
         try {
           const result = await provisionUser(user.email, user.name ?? undefined);
           if (result) {
             token.userId = result.user_id;
-            token.projectIds = result.projects.map((p) => p.id);
             token.defaultProjectId = result.projects[0]?.id;
           }
         } catch (err) {
@@ -118,14 +124,12 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
     async session({ session, token }) {
       const t = token as {
         userId?: string;
-        projectIds?: string[];
         defaultProjectId?: string;
         sub?: string;
       };
       if (session.user) {
         session.user.id = t.userId ?? t.sub ?? session.user.id;
       }
-      session.projectIds = t.projectIds;
       session.defaultProjectId = t.defaultProjectId;
       return session;
     },
diff --git a/components/alerts/rule-list.tsx b/components/alerts/rule-list.tsx
index 4457de1..2d52696 100644
--- a/components/alerts/rule-list.tsx
+++ b/components/alerts/rule-list.tsx
@@ -50,7 +50,7 @@ export function RuleList({ rules, onToggle }: RuleListProps) {
     <div className="rounded-lg border border-[#1E1E1E] bg-[#111] overflow-hidden">
       <div className="grid grid-cols-[2fr_1fr_1fr_1fr_80px_40px] gap-3 px-4 py-2.5 border-b border-[#1E1E1E]">
         {["Rule", "Condition", "Channel", "Last Triggered", "Status", ""].map((h) => (
-          <span key={h} className="text-[10px] font-medium text-[#444] uppercase tracking-wider">
+          <span key={h} className="text-[10px] font-medium text-[#808080] uppercase tracking-wider">
             {h}
           </span>
         ))}
@@ -87,13 +87,13 @@ export function RuleList({ rules, onToggle }: RuleListProps) {
                 <span className="text-xs font-medium text-[#F5F5F5] truncate">{rule.name}</span>
               </div>
 
-              <span className="text-[10px] text-[#555] font-mono leading-tight">
+              <span className="text-[10px] text-[#949494] font-mono leading-tight">
                 {METRIC_LABELS[rule.metric]} {OPERATOR_LABELS[rule.operator]} {rule.threshold}{thresholdUnit} / {rule.window}min
               </span>
 
-              <span className="text-xs text-[#555]">{rule.channel}</span>
+              <span className="text-xs text-[#949494]">{rule.channel}</span>
 
-              <span className="text-xs text-[#444]">
+              <span className="text-xs text-[#808080]">
                 {rule.lastTriggered ? timeAgo(rule.lastTriggered) : "—"}
               </span>
 
@@ -126,6 +126,11 @@ export function RuleList({ rules, onToggle }: RuleListProps) {
             </div>
           );
         })}
+        {localRules.length === 0 && (
+          <div className="p-6 text-center text-[10px] text-[#808080]">
+            No alert rules yet — create one below.
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/components/auth/user-menu.tsx b/components/auth/user-menu.tsx
index 5c8672c..f8ca2d5 100644
--- a/components/auth/user-menu.tsx
+++ b/components/auth/user-menu.tsx
@@ -55,9 +55,9 @@ export function UserMenu() {
         className="flex items-center gap-2.5 px-2.5 py-1.5 rounded hover:bg-[#161616] transition-colors"
       >
         <div className="h-5 w-5 rounded-full bg-[#1E1E1E] border border-[#2A2A2A] flex items-center justify-center">
-          <span className="text-[9px] text-[#555]">?</span>
+          <span className="text-[9px] text-[#949494]">?</span>
         </div>
-        <span className="text-xs font-medium text-[#555]">Sign in</span>
+        <span className="text-xs font-medium text-[#949494]">Sign in</span>
       </Link>
     );
   }
@@ -71,7 +71,7 @@ export function UserMenu() {
           <Avatar name={name} image={image} />
           <div className="min-w-0 flex-1">
             <p className="text-xs font-medium text-[#F5F5F5] truncate">{name ?? "User"}</p>
-            <p className="text-[10px] text-[#555] truncate">{email}</p>
+            <p className="text-[10px] text-[#949494] truncate">{email}</p>
           </div>
         </button>
       </DropdownMenu.Trigger>
@@ -86,7 +86,7 @@ export function UserMenu() {
           {/* User info header */}
           <div className="px-2 py-2 mb-1 border-b border-[#1E1E1E]">
             <p className="text-xs font-semibold text-[#F5F5F5] truncate">{name}</p>
-            <p className="text-[10px] text-[#444] truncate">{email}</p>
+            <p className="text-[10px] text-[#808080] truncate">{email}</p>
           </div>
 
           <DropdownMenu.Item asChild>
diff --git a/components/charts/empty-chart-state.tsx b/components/charts/empty-chart-state.tsx
new file mode 100644
index 0000000..39196a4
--- /dev/null
+++ b/components/charts/empty-chart-state.tsx
@@ -0,0 +1,12 @@
+import { BarChart3 } from "lucide-react";
+
+/** Honest placeholder for a chart with no data — matches the 160px chart
+ * height so swapping between the two doesn't shift the surrounding layout. */
+export function EmptyChartState({ message }: { message: string }) {
+  return (
+    <div className="h-[160px] flex flex-col items-center justify-center gap-1.5 text-center px-6">
+      <BarChart3 className="h-4 w-4 text-[#555]" />
+      <p className="text-xs text-[#808080]">{message}</p>
+    </div>
+  );
+}
diff --git a/components/charts/error-rate-chart.tsx b/components/charts/error-rate-chart.tsx
index 5240629..93a46ec 100644
--- a/components/charts/error-rate-chart.tsx
+++ b/components/charts/error-rate-chart.tsx
@@ -10,7 +10,7 @@ import {
   CartesianGrid,
 } from "recharts";
 import type { ChartData } from "@/lib/types";
-import { formatNumber } from "@/lib/utils";
+import { formatNumber, formatChartTime } from "@/lib/utils";
 
 interface ErrorRateChartProps {
   data: ChartData[];
@@ -32,7 +32,7 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
   if (!active || !payload?.length) return null;
   return (
     <div className="rounded-lg border border-[#2A2A2A] bg-[#161616] p-2.5 shadow-xl min-w-[120px]">
-      <p className="text-[10px] text-[#555] mb-2 font-mono">{label}</p>
+      <p className="text-[10px] text-[#949494] mb-2 font-mono">{label ? formatChartTime(label) : ""}</p>
       {payload.map((p) => (
         <div key={p.name} className="flex items-center justify-between gap-3 text-xs">
           <div className="flex items-center gap-1.5">
@@ -47,11 +47,14 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
 }
 
 export function ErrorRateChart({ data }: ErrorRateChartProps) {
-  const xStep = Math.ceil(data.length / 8);
+  // Labels now always carry the date ("07/20 14:30", not "14:30" — see
+  // apps/api/api/routes/query.py) so fewer of them fit before overlapping;
+  // target ~5 visible ticks instead of ~8.
+  const xStep = Math.ceil(data.length / 3);
 
   return (
     <ResponsiveContainer width="100%" height={160}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -24, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 44, left: -24, bottom: 0 }}>
         <defs>
           <linearGradient id="grad2xx" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor="#22C55E" stopOpacity={0.25} />
@@ -69,13 +72,14 @@ export function ErrorRateChart({ data }: ErrorRateChartProps) {
         <CartesianGrid strokeDasharray="3 3" stroke="#161616" vertical={false} />
         <XAxis
           dataKey="time"
-          tick={{ fill: "#444", fontSize: 10, fontFamily: "monospace" }}
+          tickFormatter={formatChartTime}
+          tick={{ fill: "#808080", fontSize: 10, fontFamily: "monospace" }}
           axisLine={false}
           tickLine={false}
           interval={xStep}
         />
         <YAxis
-          tick={{ fill: "#444", fontSize: 10 }}
+          tick={{ fill: "#808080", fontSize: 10 }}
           axisLine={false}
           tickLine={false}
           tickFormatter={formatNumber}
diff --git a/components/charts/latency-histogram.tsx b/components/charts/latency-histogram.tsx
index 2e5896f..a710400 100644
--- a/components/charts/latency-histogram.tsx
+++ b/components/charts/latency-histogram.tsx
@@ -40,12 +40,12 @@ export function LatencyHistogram({ p50, p95, p99 }: LatencyHistogramProps) {
       <BarChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
         <XAxis
           dataKey="label"
-          tick={{ fill: "#555", fontSize: 10 }}
+          tick={{ fill: "#949494", fontSize: 10 }}
           axisLine={false}
           tickLine={false}
         />
         <YAxis
-          tick={{ fill: "#444", fontSize: 10 }}
+          tick={{ fill: "#808080", fontSize: 10 }}
           axisLine={false}
           tickLine={false}
         />
diff --git a/components/charts/requests-chart.tsx b/components/charts/requests-chart.tsx
index 147b8ec..347a377 100644
--- a/components/charts/requests-chart.tsx
+++ b/components/charts/requests-chart.tsx
@@ -10,7 +10,7 @@ import {
   CartesianGrid,
 } from "recharts";
 import type { ChartData } from "@/lib/types";
-import { formatNumber } from "@/lib/utils";
+import { formatNumber, formatChartTime } from "@/lib/utils";
 
 interface RequestsChartProps {
   data: ChartData[];
@@ -30,7 +30,7 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
   if (!active || !payload?.length) return null;
   return (
     <div className="rounded-lg border border-[#2A2A2A] bg-[#161616] p-2.5 shadow-xl">
-      <p className="text-[10px] text-[#555] mb-1.5 font-mono">{label}</p>
+      <p className="text-[10px] text-[#949494] mb-1.5 font-mono">{label ? formatChartTime(label) : ""}</p>
       <p className="text-xs font-semibold text-[#F5F5F5]">
         {formatNumber(payload[0].value)} req/min
       </p>
@@ -39,11 +39,14 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
 }
 
 export function RequestsChart({ data }: RequestsChartProps) {
-  const xStep = Math.ceil(data.length / 8);
+  // Labels now always carry the date ("07/20 14:30", not "14:30" — see
+  // apps/api/api/routes/query.py) so fewer of them fit before overlapping;
+  // target ~5 visible ticks instead of ~8.
+  const xStep = Math.ceil(data.length / 3);
 
   return (
     <ResponsiveContainer width="100%" height={160}>
-      <AreaChart data={data} margin={{ top: 4, right: 4, left: -24, bottom: 0 }}>
+      <AreaChart data={data} margin={{ top: 4, right: 44, left: -24, bottom: 0 }}>
         <defs>
           <linearGradient id="reqGrad" x1="0" y1="0" x2="0" y2="1">
             <stop offset="5%" stopColor="#378ADD" stopOpacity={0.2} />
@@ -53,13 +56,14 @@ export function RequestsChart({ data }: RequestsChartProps) {
         <CartesianGrid strokeDasharray="3 3" stroke="#161616" vertical={false} />
         <XAxis
           dataKey="time"
-          tick={{ fill: "#444", fontSize: 10, fontFamily: "monospace" }}
+          tickFormatter={formatChartTime}
+          tick={{ fill: "#808080", fontSize: 10, fontFamily: "monospace" }}
           axisLine={false}
           tickLine={false}
           interval={xStep}
         />
         <YAxis
-          tick={{ fill: "#444", fontSize: 10 }}
+          tick={{ fill: "#808080", fontSize: 10 }}
           axisLine={false}
           tickLine={false}
           tickFormatter={formatNumber}
diff --git a/components/dashboard/active-pipeline.tsx b/components/dashboard/active-pipeline.tsx
deleted file mode 100644
index b62b198..0000000
--- a/components/dashboard/active-pipeline.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client";
-
-import { Badge } from "@/components/ui/badge";
-import { MoreHorizontal, GitMerge, Shield, Zap } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-export function ActivePipeline() {
-  return (
-    <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4 space-y-5">
-      <div className="flex items-center justify-between">
-        <p className="text-xs font-medium text-[#888] uppercase tracking-wider">Active Pipeline Architecture</p>
-        <Button variant="ghost" size="sm">
-          <Zap className="h-3 w-3" />
-          Edit Pipeline
-        </Button>
-      </div>
-
-      {/* 1. INGRESS */}
-      <div>
-        <p className="text-[10px] font-semibold text-[#444] uppercase tracking-wider mb-2">
-          1. INGRESS (ENTRY POINT)
-        </p>
-        <div className="rounded-lg border border-[#1E1E1E] bg-[#0D0D0D] p-3 space-y-2">
-          {[
-            { label: "Endpoint:", value: "/v1/chat/completions", badge: "POST" },
-            { label: "Auth Protocol:", value: "Bearer Token (Strict)" },
-            { label: "Rate Limit:", value: "req/min per IP", badge: "100" },
-          ].map((row) => (
-            <div key={row.label} className="flex items-center justify-between">
-              <span className="text-[10px] text-[#444]">{row.label}</span>
-              <div className="flex items-center gap-1.5">
-                <span className="text-[10px] text-[#888] font-mono">{row.value}</span>
-                {row.badge && (
-                  <Badge variant="blue" size="sm">{row.badge}</Badge>
-                )}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* 2. PRE-PROCESSING */}
-      <div>
-        <p className="text-[10px] font-semibold text-[#444] uppercase tracking-wider mb-2">
-          2. PRE-PROCESSING (MIDDLEWARE)
-        </p>
-        <div className="grid grid-cols-3 gap-2">
-          {[
-            {
-              title: "PII Redact",
-              icon: Shield,
-              fields: [{ k: "Mode:", v: "MASK" }, { k: "Engine:", v: "NER" }],
-            },
-            {
-              title: "Injection",
-              icon: GitMerge,
-              fields: [{ k: "Heuristic:", v: "ON", green: true }, { k: "Vector:", v: "STRICT" }],
-            },
-            {
-              title: "Toxicity Class.",
-              icon: Zap,
-              fields: [{ k: "Threshold:", v: "0.85" }, { k: "Action:", v: "DROP", red: true }],
-            },
-          ].map((block) => (
-            <div key={block.title} className="rounded-lg border border-[#1E1E1E] bg-[#0D0D0D] p-2.5">
-              <div className="flex items-center gap-1.5 mb-2">
-                <block.icon className="h-3 w-3 text-[#444]" />
-                <span className="text-[10px] font-medium text-[#888]">{block.title}</span>
-              </div>
-              {block.fields.map((f) => (
-                <div key={f.k} className="flex items-center justify-between mt-1">
-                  <span className="text-[9px] text-[#333]">{f.k}</span>
-                  <span
-                    className={`text-[9px] font-mono font-bold ${
-                      "green" in f && f.green ? "text-green" : "red" in f && f.red ? "text-red" : "text-[#888]"
-                    }`}
-                  >
-                    {f.v}
-                  </span>
-                </div>
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* 3. DYNAMIC ROUTER */}
-      <div>
-        <p className="text-[10px] font-semibold text-[#444] uppercase tracking-wider mb-2">
-          3. DYNAMIC ROUTER (DECISION MATRIX)
-        </p>
-        <div className="space-y-2">
-          {[
-            {
-              num: "01",
-              severity: "High",
-              condition: ['IF', '[', 'Intent', ']', '==', '[', 'Billing', ',', 'Refund', ']'],
-              route: "GPT-4o",
-              temp: "0.2",
-              maxTokens: "1024",
-              badge: "red" as const,
-            },
-            {
-              num: "02",
-              severity: "Medium",
-              condition: ['IF', '[', 'Intent', ']', '==', '[', 'General', ',', 'FAQ', ']'],
-              route: "Claude Sonnet",
-              temp: "0.7",
-              maxTokens: "2048",
-              badge: "yellow" as const,
-            },
-          ].map((rule) => (
-            <div key={rule.num} className="rounded-lg border border-[#1E1E1E] bg-[#0D0D0D] p-3">
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-mono text-[#444]">Rule {rule.num}</span>
-                  <Badge variant={rule.badge} size="sm">{rule.severity}</Badge>
-                </div>
-                <MoreHorizontal className="h-3.5 w-3.5 text-[#333]" />
-              </div>
-              <div className="font-mono text-[10px] text-[#555] mb-2.5 flex flex-wrap gap-1">
-                {rule.condition.map((token, i) => (
-                  <span
-                    key={i}
-                    className={
-                      ["IF", "=="].includes(token) ? "text-blue" :
-                      ["[", "]", ","].includes(token) ? "text-[#333]" :
-                      ["Intent"].includes(token) ? "text-purple-400" :
-                      "text-[#888]"
-                    }
-                  >
-                    {token}
-                  </span>
-                ))}
-              </div>
-              <div className="grid grid-cols-3 gap-2">
-                {[
-                  { label: "Route to:", value: rule.route },
-                  { label: "Temp:", value: rule.temp },
-                  { label: "Max Tokens:", value: rule.maxTokens },
-                ].map((f) => (
-                  <div key={f.label}>
-                    <p className="text-[9px] text-[#333]">{f.label}</p>
-                    <p className="text-[10px] font-mono text-[#888] font-medium">{f.value}</p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/dashboard/incident-panel.tsx b/components/dashboard/incident-panel.tsx
index 715d8d8..03d4471 100644
--- a/components/dashboard/incident-panel.tsx
+++ b/components/dashboard/incident-panel.tsx
@@ -51,12 +51,12 @@ function IncidentCard({ incident }: { incident: Incident }) {
             )}
           </div>
           <p className="text-xs font-medium text-[#F5F5F5] leading-snug">{incident.title}</p>
-          <p className="text-[10px] text-[#444] mt-0.5 font-mono">{timeAgo(incident.timestamp)}</p>
+          <p className="text-[10px] text-[#808080] mt-0.5 font-mono">{timeAgo(incident.timestamp)}</p>
         </div>
         {expanded ? (
-          <ChevronDown className="h-3.5 w-3.5 text-[#444] flex-shrink-0 mt-1" />
+          <ChevronDown className="h-3.5 w-3.5 text-[#808080] flex-shrink-0 mt-1" />
         ) : (
-          <ChevronRight className="h-3.5 w-3.5 text-[#444] flex-shrink-0 mt-1" />
+          <ChevronRight className="h-3.5 w-3.5 text-[#808080] flex-shrink-0 mt-1" />
         )}
       </button>
 
@@ -72,7 +72,7 @@ function IncidentCard({ incident }: { incident: Incident }) {
             <div className="px-3 pb-3 border-t border-[#1E1E1E]/50">
               <p className="text-xs text-[#888] mt-2.5 leading-relaxed">{incident.summary}</p>
               <div className="flex items-center gap-1.5 mt-2">
-                <span className="text-[10px] text-[#444]">Affected:</span>
+                <span className="text-[10px] text-[#808080]">Affected:</span>
                 <span className="text-[10px] font-mono text-blue">{incident.endpoint}</span>
               </div>
             </div>
@@ -104,7 +104,7 @@ export function IncidentPanel({ incidents }: IncidentPanelProps) {
         ))}
         {resolved.length > 0 && (
           <>
-            <p className="text-[10px] text-[#333] uppercase tracking-wider px-1 pt-1">Resolved</p>
+            <p className="text-[10px] text-[#808080] uppercase tracking-wider px-1 pt-1">Resolved</p>
             {resolved.map((i) => (
               <IncidentCard key={i.id} incident={i} />
             ))}
diff --git a/components/dashboard/live-log-table.tsx b/components/dashboard/live-log-table.tsx
index 133995d..3470c68 100644
--- a/components/dashboard/live-log-table.tsx
+++ b/components/dashboard/live-log-table.tsx
@@ -1,28 +1,39 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
-import { Pause, Play } from "lucide-react";
+import { Loader2, Pause, Play, WifiOff } from "lucide-react";
 import { useLiveLog } from "@/hooks/use-live-metrics";
 import { getMethodColor, getStatusColor, formatMs } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const STATUS_DOT = {
+  "no-project":   "bg-[#555]",
+  connecting:     "bg-yellow animate-pulse",
+  reconnecting:   "bg-yellow animate-pulse",
+  live:           "bg-green animate-pulse",
+} as const;
+
+const STATUS_LABEL = {
+  "no-project": "No project",
+  connecting:   "Connecting…",
+  reconnecting: "Reconnecting…",
+  live:         "Live Request Log",
+} as const;
 
 export function LiveLogTable() {
-  const { logs, paused, setPaused } = useLiveLog(40);
+  const { logs, paused, setPaused, status } = useLiveLog(40);
 
   return (
     <div className="rounded-lg border border-[#1E1E1E] bg-[#111111] overflow-hidden">
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-[#1E1E1E]">
         <div className="flex items-center gap-2">
-          <div className="h-1.5 w-1.5 rounded-full bg-green animate-pulse" />
+          <div className={cn("h-1.5 w-1.5 rounded-full", STATUS_DOT[status])} />
           <span className="text-xs font-medium text-[#888888] uppercase tracking-wider">
-            Live Request Log
+            {status === "live" ? "Live Request Log" : STATUS_LABEL[status]}
           </span>
         </div>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => setPaused(!paused)}
-        >
+        <Button variant="ghost" size="sm" onClick={() => setPaused(!paused)} disabled={status !== "live"}>
           {paused ? (
             <><Play className="h-3 w-3" /> Resume</>
           ) : (
@@ -34,7 +45,7 @@ export function LiveLogTable() {
       {/* Table header */}
       <div className="grid grid-cols-[80px_60px_1fr_60px_70px_90px] px-4 py-1.5 border-b border-[#1A1A1A]">
         {["Time", "Method", "Route", "Status", "Latency", "User"].map((h) => (
-          <span key={h} className="text-[10px] font-medium text-[#444] uppercase tracking-wider">
+          <span key={h} className="text-[10px] font-medium text-[#808080] uppercase tracking-wider">
             {h}
           </span>
         ))}
@@ -42,47 +53,72 @@ export function LiveLogTable() {
 
       {/* Rows */}
       <div className="h-[280px] overflow-y-auto no-scrollbar">
-        <AnimatePresence initial={false}>
-          {logs.map((log) => (
-            <motion.div
-              key={log.id}
-              initial={{ opacity: 0, y: -4 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.2 }}
-              className="grid grid-cols-[80px_60px_1fr_60px_70px_90px] px-4 py-1.5 border-b border-[#161616] hover:bg-[#151515] transition-colors items-center"
-            >
-              <span className="text-[10px] text-[#444] font-mono tabular-nums">
-                {log.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
-              </span>
-
-              <span
-                className="text-[10px] font-bold font-mono"
-                style={{ color: getMethodColor(log.method) }}
+        {logs.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center gap-2 text-center px-6">
+            {status === "no-project" ? (
+              <>
+                <WifiOff className="h-4 w-4 text-[#555]" />
+                <p className="text-xs text-[#808080]">Select a project to see its live requests.</p>
+              </>
+            ) : status === "connecting" ? (
+              <>
+                <Loader2 className="h-4 w-4 text-[#808080] animate-spin" />
+                <p className="text-xs text-[#808080]">Connecting to the live stream…</p>
+              </>
+            ) : status === "reconnecting" ? (
+              <>
+                <WifiOff className="h-4 w-4 text-yellow" />
+                <p className="text-xs text-[#808080]">Connection dropped — reconnecting…</p>
+              </>
+            ) : (
+              <p className="text-xs text-[#808080]">
+                No requests yet — they&apos;ll show up here as soon as your API gets traffic.
+              </p>
+            )}
+          </div>
+        ) : (
+          <AnimatePresence initial={false}>
+            {logs.map((log) => (
+              <motion.div
+                key={log.id}
+                initial={{ opacity: 0, y: -4 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.2 }}
+                className="grid grid-cols-[80px_60px_1fr_60px_70px_90px] px-4 py-1.5 border-b border-[#161616] hover:bg-[#151515] transition-colors items-center"
               >
-                {log.method}
-              </span>
+                <span className="text-[10px] text-[#808080] font-mono tabular-nums">
+                  {log.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
+                </span>
 
-              <span className="text-xs text-[#888] font-mono truncate pr-2">
-                {log.route}
-              </span>
+                <span
+                  className="text-[10px] font-bold font-mono"
+                  style={{ color: getMethodColor(log.method) }}
+                >
+                  {log.method}
+                </span>
 
-              <span
-                className="text-xs font-mono font-semibold tabular-nums"
-                style={{ color: getStatusColor(log.status) }}
-              >
-                {log.status}
-              </span>
+                <span className="text-xs text-[#888] font-mono truncate pr-2">
+                  {log.route}
+                </span>
+
+                <span
+                  className="text-xs font-mono font-semibold tabular-nums"
+                  style={{ color: getStatusColor(log.status) }}
+                >
+                  {log.status}
+                </span>
 
-              <span className="text-xs text-[#555] font-mono tabular-nums">
-                {formatMs(log.latency)}
-              </span>
+                <span className="text-xs text-[#949494] font-mono tabular-nums">
+                  {formatMs(log.latency)}
+                </span>
 
-              <span className="text-[10px] text-[#444] font-mono truncate">
-                {log.userId}
-              </span>
-            </motion.div>
-          ))}
-        </AnimatePresence>
+                <span className="text-[10px] text-[#808080] font-mono truncate">
+                  {log.userId}
+                </span>
+              </motion.div>
+            ))}
+          </AnimatePresence>
+        )}
       </div>
     </div>
   );
diff --git a/components/dashboard/pipeline-architecture.tsx b/components/dashboard/pipeline-architecture.tsx
deleted file mode 100644
index 8e3262c..0000000
--- a/components/dashboard/pipeline-architecture.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-"use client";
-
-import { Badge } from "@/components/ui/badge";
-import { Shield } from "lucide-react";
-
-interface PipelineNode {
-  id: string;
-  label: string;
-  sublabel?: string;
-  status: "healthy" | "warning" | "error";
-  traffic?: number;
-  latency?: number;
-}
-
-const NODES: PipelineNode[] = [
-  { id: "gateway", label: "API Gateway", sublabel: "/v1/chat/completions", status: "healthy", traffic: 100 },
-  { id: "gpt4o", label: "GPT-4o", status: "healthy", traffic: 68, latency: 120 },
-  { id: "claude", label: "Claude Sonnet", status: "healthy", traffic: 22, latency: 145 },
-  { id: "gemini", label: "Gemini Flash", status: "warning", traffic: 10, latency: 850 },
-];
-
-const GUARDRAIL_ROWS = [
-  { time: "10:42 AM", client: "user_892x", rule: "PII_Detector_v2 (Credit Card Info)", prompt: '"payment with 4532 1121"', action: "Blocked" as const },
-  { time: "10:15 AM", client: "user_110a", rule: "Prompt Injection Attempt", prompt: '"Ignore previous instructions"', action: "Fallback" as const },
-  { time: "09:30 AM", client: "sys_router", rule: "Upstream Timeout (GPT-4o > 5000ms)", prompt: '"Summarize the attached 50…"', action: "Blocked" as const },
-  { time: "09:12 AM", client: "user_4480", rule: "Output Parsing: Invalid JSON Schema", prompt: "user_name: John Doe...", action: "Retried" as const },
-  { time: "08:45 AM", client: "anon_io", rule: "Rate Limit: 50 requests / minute", prompt: '"What is the capital of E…"', action: "Fallback" as const },
-];
-
-const ACTION_VARIANTS = {
-  Blocked: "red" as const,
-  Fallback: "yellow" as const,
-  Retried: "blue" as const,
-};
-
-export function PipelineArchitecture() {
-  return (
-    <div className="space-y-4">
-      {/* Flow diagram */}
-      <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4">
-        <div className="flex items-center justify-between mb-4">
-          <p className="text-xs font-medium text-[#888] uppercase tracking-wider">Endpoint Traffic & Health</p>
-          <div className="flex items-center gap-1.5 text-[10px] text-[#444]">
-            <div className="h-1.5 w-1.5 rounded-full bg-green" />
-            Live
-          </div>
-        </div>
-
-        {/* Gateway node */}
-        <div className="flex flex-col items-center gap-3">
-          <div className="rounded-lg border border-[#2A2A2A] bg-[#161616] px-5 py-3 text-center">
-            <p className="text-xs font-semibold text-[#F5F5F5] mb-0.5">API Gateway</p>
-            <p className="text-[10px] text-[#444] font-mono">/v1/chat/completions</p>
-            <p className="text-[10px] text-blue mt-1">124k Reqs</p>
-          </div>
-
-          {/* Connectors */}
-          <div className="flex items-start gap-4 w-full">
-            {NODES.slice(1).map((node) => (
-              <div key={node.id} className="flex-1 flex flex-col items-center gap-2">
-                <div className="h-4 w-px bg-[#2A2A2A]" />
-                <div
-                  className={`w-full rounded-lg border px-3 py-2 ${
-                    node.status === "healthy"
-                      ? "border-green/20 bg-green/5"
-                      : "border-yellow/20 bg-yellow/5"
-                  }`}
-                >
-                  <div className="flex items-center justify-between mb-1">
-                    <span className="text-[10px] font-semibold text-[#F5F5F5]">{node.label}</span>
-                    <Badge variant={node.status === "healthy" ? "green" : "yellow"} size="sm">
-                      {node.status === "healthy" ? "Healthy" : "Warning"}
-                    </Badge>
-                  </div>
-                  <div className="flex items-center justify-between text-[10px] text-[#444]">
-                    <span>Traffic</span>
-                    <span className="text-[#888] font-mono">{node.traffic}%</span>
-                  </div>
-                  <div className="flex items-center justify-between text-[10px] text-[#444]">
-                    <span>Avg</span>
-                    <span className="font-mono" style={{ color: node.latency && node.latency > 500 ? "#F59E0B" : "#888" }}>
-                      {node.latency}ms
-                    </span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Guardrail exceptions */}
-      <div className="rounded-lg border border-[#1E1E1E] bg-[#111] overflow-hidden">
-        <div className="flex items-center justify-between px-4 py-2.5 border-b border-[#1E1E1E]">
-          <div className="flex items-center gap-2">
-            <Shield className="h-3.5 w-3.5 text-[#555]" />
-            <span className="text-xs font-medium text-[#888] uppercase tracking-wider">Guardrail Exceptions</span>
-          </div>
-          <button className="text-[10px] text-[#444] hover:text-[#888] transition-colors flex items-center gap-1">
-            Filter
-          </button>
-        </div>
-
-        <div className="grid grid-cols-[80px_90px_1fr_160px_70px] gap-2 px-4 py-2 border-b border-[#161616]">
-          {["Time", "Client ID", "Violation / Rule", "Prompt Snippet", "Action"].map((h) => (
-            <span key={h} className="text-[10px] font-medium text-[#444] uppercase tracking-wider">{h}</span>
-          ))}
-        </div>
-
-        <div className="divide-y divide-[#161616]">
-          {GUARDRAIL_ROWS.map((row, i) => (
-            <div key={i} className="grid grid-cols-[80px_90px_1fr_160px_70px] gap-2 px-4 py-2 items-center hover:bg-[#151515] transition-colors">
-              <span className="text-[10px] text-[#444] font-mono">{row.time}</span>
-              <span className="text-[10px] text-blue font-mono">{row.client}</span>
-              <span className="text-xs text-[#555] truncate">{row.rule}</span>
-              <span className="text-[10px] text-[#444] font-mono truncate">{row.prompt}</span>
-              <Badge variant={ACTION_VARIANTS[row.action]}>{row.action}</Badge>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/components/dashboard/stat-card.tsx b/components/dashboard/stat-card.tsx
index bca6b38..96513dc 100644
--- a/components/dashboard/stat-card.tsx
+++ b/components/dashboard/stat-card.tsx
@@ -20,7 +20,7 @@ export function StatCardComponent({ card, sparkColor = "#378ADD" }: StatCardProp
     <div className="rounded-lg border border-[#1E1E1E] bg-[#111111] p-4 flex flex-col gap-3 hover:border-[#2A2A2A] transition-colors">
       <div className="flex items-start justify-between">
         <div>
-          <p className="text-[10px] font-medium text-[#555] uppercase tracking-wider mb-1">
+          <p className="text-[10px] font-medium text-[#949494] uppercase tracking-wider mb-1">
             {card.label}
           </p>
           <div className="flex items-baseline gap-1">
@@ -28,7 +28,7 @@ export function StatCardComponent({ card, sparkColor = "#378ADD" }: StatCardProp
               {card.value}
             </span>
             {card.unit && (
-              <span className="text-sm text-[#555] font-medium">{card.unit}</span>
+              <span className="text-sm text-[#949494] font-medium">{card.unit}</span>
             )}
           </div>
         </div>
@@ -54,7 +54,7 @@ export function StatCardComponent({ card, sparkColor = "#378ADD" }: StatCardProp
             {card.unit === "%" ? "pp" : card.unit === "ms" ? "ms" : "%"}
           </span>
         </div>
-        <span className="text-[10px] text-[#444]">{card.deltaLabel}</span>
+        <span className="text-[10px] text-[#808080]">{card.deltaLabel}</span>
       </div>
     </div>
   );
diff --git a/components/endpoints/endpoint-comparison.tsx b/components/endpoints/endpoint-comparison.tsx
index 8ac5593..823c882 100644
--- a/components/endpoints/endpoint-comparison.tsx
+++ b/components/endpoints/endpoint-comparison.tsx
@@ -77,7 +77,7 @@ export function EndpointComparison({ endpoints, onClose }: EndpointComparisonPro
             </div>
           ))}
         </div>
-        <button onClick={onClose} className="text-[#444] hover:text-[#888] transition-colors">
+        <button onClick={onClose} className="text-[#808080] hover:text-[#888] transition-colors">
           <X className="h-4 w-4" />
         </button>
       </div>
@@ -86,10 +86,10 @@ export function EndpointComparison({ endpoints, onClose }: EndpointComparisonPro
       <div className="grid grid-cols-4 gap-2">
         {metrics.map((m) => (
           <div key={m.label} className="rounded border border-[#1A1A1A] bg-[#0D0D0D] p-3">
-            <p className="text-[10px] text-[#444] uppercase tracking-wider mb-2">{m.label}</p>
+            <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-2">{m.label}</p>
             <div className="space-y-1">
               <div className="flex items-center justify-between">
-                <span className="text-[10px] text-[#555]">A</span>
+                <span className="text-[10px] text-[#949494]">A</span>
                 <span
                   className="text-xs font-mono font-semibold"
                   style={{ color: m.winner === "a" ? "#22C55E" : "#F5F5F5" }}
@@ -98,7 +98,7 @@ export function EndpointComparison({ endpoints, onClose }: EndpointComparisonPro
                 </span>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-[10px] text-[#555]">B</span>
+                <span className="text-[10px] text-[#949494]">B</span>
                 <span
                   className="text-xs font-mono font-semibold"
                   style={{ color: m.winner === "b" ? "#22C55E" : "#F5F5F5" }}
@@ -113,19 +113,19 @@ export function EndpointComparison({ endpoints, onClose }: EndpointComparisonPro
 
       {/* p99 Latency chart */}
       <div>
-        <p className="text-[10px] text-[#444] uppercase tracking-wider mb-3">p99 Latency — 24h</p>
+        <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-3">p99 Latency — 24h</p>
         <div className="h-40">
           <ResponsiveContainer width="100%" height="100%">
             <LineChart data={chartData}>
-              <XAxis dataKey="hour" tick={{ fontSize: 9, fill: "#333" }} interval={5} />
-              <YAxis tick={{ fontSize: 9, fill: "#333" }} tickFormatter={(v) => `${v}ms`} width={45} />
+              <XAxis dataKey="hour" tick={{ fontSize: 9, fill: "#808080" }} interval={5} />
+              <YAxis tick={{ fontSize: 9, fill: "#808080" }} tickFormatter={(v) => `${v}ms`} width={45} />
               <Tooltip
                 contentStyle={{ background: "#111", border: "1px solid #1E1E1E", borderRadius: 6 }}
-                labelStyle={{ color: "#555", fontSize: 10 }}
+                labelStyle={{ color: "#949494", fontSize: 10 }}
                 itemStyle={{ fontSize: 11 }}
                 formatter={(v) => `${String(v)}ms`}
               />
-              <Legend wrapperStyle={{ fontSize: 10, color: "#555" }} />
+              <Legend wrapperStyle={{ fontSize: 10, color: "#949494" }} />
               <Line dataKey={a.route} stroke={COLORS[0]} dot={false} strokeWidth={1.5} />
               <Line dataKey={b.route} stroke={COLORS[1]} dot={false} strokeWidth={1.5} />
             </LineChart>
diff --git a/components/endpoints/endpoint-drawer.tsx b/components/endpoints/endpoint-drawer.tsx
index 15d2b0d..d303293 100644
--- a/components/endpoints/endpoint-drawer.tsx
+++ b/components/endpoints/endpoint-drawer.tsx
@@ -41,7 +41,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
             </div>
             <button
               onClick={onClose}
-              className="p-1 rounded hover:bg-[#1E1E1E] text-[#444] hover:text-[#888] transition-colors"
+              className="p-1 rounded hover:bg-[#1E1E1E] text-[#808080] hover:text-[#888] transition-colors"
             >
               <X className="h-4 w-4" />
             </button>
@@ -51,7 +51,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
             {/* Health Score */}
             <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-3">
               <div className="flex items-center justify-between mb-2">
-                <span className="text-[10px] text-[#444] uppercase tracking-wider">Health Score</span>
+                <span className="text-[10px] text-[#808080] uppercase tracking-wider">Health Score</span>
                 <span
                   className="text-xl font-bold tabular-nums"
                   style={{ color: getHealthColor(endpoint.healthScore) }}
@@ -81,7 +81,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
                 },
               ].map((stat) => (
                 <div key={stat.label} className="rounded-lg border border-[#1E1E1E] bg-[#111] p-3">
-                  <p className="text-[10px] text-[#444] uppercase tracking-wider mb-1">{stat.label}</p>
+                  <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-1">{stat.label}</p>
                   <p className="text-lg font-semibold tabular-nums" style={{ color: stat.color || "#F5F5F5" }}>
                     {stat.value}
                   </p>
@@ -91,7 +91,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
 
             {/* Latency */}
             <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-3">
-              <p className="text-[10px] text-[#444] uppercase tracking-wider mb-3">Latency Distribution</p>
+              <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-3">Latency Distribution</p>
               <LatencyHistogram p50={endpoint.p50} p95={endpoint.p95} p99={endpoint.p99} />
               <div className="grid grid-cols-3 gap-2 mt-3">
                 {[
@@ -100,7 +100,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
                   { label: "p99", value: formatMs(endpoint.p99), color: "#EF4444" },
                 ].map((p) => (
                   <div key={p.label} className="text-center">
-                    <p className="text-[10px] text-[#444] mb-0.5">{p.label}</p>
+                    <p className="text-[10px] text-[#808080] mb-0.5">{p.label}</p>
                     <p className="text-xs font-semibold font-mono" style={{ color: p.color }}>
                       {p.value}
                     </p>
@@ -111,7 +111,7 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
 
             {/* Top errors */}
             <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-3">
-              <p className="text-[10px] text-[#444] uppercase tracking-wider mb-3">Top Errors</p>
+              <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-3">Top Errors</p>
               {endpoint.errorRate > 0 ? (
                 <div className="space-y-2">
                   {[
@@ -120,13 +120,13 @@ export function EndpointDrawer({ endpoint, onClose }: EndpointDrawerProps) {
                   ].map((err, i) => (
                     <div key={i} className="flex items-start gap-2 text-xs">
                       <span className="text-red font-mono font-bold flex-shrink-0">{err.code}</span>
-                      <span className="text-[#555] flex-1 truncate">{err.msg}</span>
-                      <span className="text-[#444] flex-shrink-0">{err.count}x</span>
+                      <span className="text-[#949494] flex-1 truncate">{err.msg}</span>
+                      <span className="text-[#808080] flex-shrink-0">{err.count}x</span>
                     </div>
                   ))}
                 </div>
               ) : (
-                <p className="text-xs text-[#444]">No errors in selected window</p>
+                <p className="text-xs text-[#808080]">No errors in selected window</p>
               )}
             </div>
           </div>
diff --git a/components/endpoints/endpoint-table.tsx b/components/endpoints/endpoint-table.tsx
index 1a29f90..b37551e 100644
--- a/components/endpoints/endpoint-table.tsx
+++ b/components/endpoints/endpoint-table.tsx
@@ -30,7 +30,7 @@ export function EndpointTable({ endpoints, onSelect, selected, compareSelected =
 
   const SortBtn = ({ k, label }: { k: SortKey; label: string }) => (
     <button
-      className="flex items-center gap-1 text-[10px] font-medium text-[#444] uppercase tracking-wider hover:text-[#888] transition-colors"
+      className="flex items-center gap-1 text-[10px] font-medium text-[#808080] uppercase tracking-wider hover:text-[#888] transition-colors"
       onClick={() => toggleSort(k)}
     >
       {label}
@@ -42,13 +42,13 @@ export function EndpointTable({ endpoints, onSelect, selected, compareSelected =
     <div className="rounded-lg border border-[#1E1E1E] bg-[#111111] overflow-hidden">
       {/* Header */}
       <div className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr_80px_36px] gap-2 px-4 py-2.5 border-b border-[#1E1E1E]">
-        <span className="text-[10px] font-medium text-[#444] uppercase tracking-wider">Endpoint</span>
+        <span className="text-[10px] font-medium text-[#808080] uppercase tracking-wider">Endpoint</span>
         <SortBtn k="requests24h" label="Requests 24h" />
         <SortBtn k="errorRate" label="Error Rate" />
         <SortBtn k="p50" label="p50" />
         <SortBtn k="p95" label="p95" />
         <SortBtn k="p99" label="p99" />
-        <span className="text-[10px] font-medium text-[#444] uppercase tracking-wider">Health</span>
+        <span className="text-[10px] font-medium text-[#808080] uppercase tracking-wider">Health</span>
         <span />
       </div>
 
@@ -100,9 +100,14 @@ export function EndpointTable({ endpoints, onSelect, selected, compareSelected =
               </span>
             </div>
 
-            <ChevronRight className="h-3.5 w-3.5 text-[#333]" />
+            <ChevronRight className="h-3.5 w-3.5 text-[#808080]" />
           </button>
         ))}
+        {sorted.length === 0 && (
+          <div className="p-6 text-center text-[10px] text-[#808080]">
+            No endpoints have received traffic in this range yet.
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 0a0a5a7..53c4372 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -9,7 +9,6 @@ import {
   Bell,
   Globe,
   Settings,
-  Activity,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { LiveboardIcon } from "@/components/logo";
@@ -20,7 +19,6 @@ const NAV_ITEMS = [
   { href: "/overview", label: "Overview", icon: LayoutDashboard },
   { href: "/endpoints", label: "Endpoints", icon: Zap },
   { href: "/traces", label: "Traces", icon: GitBranch },
-  { href: "/pipelines", label: "Pipelines", icon: Activity },
   { href: "/alerts", label: "Alerts", icon: Bell },
   { href: "/status", label: "Status Page", icon: Globe },
 ];
diff --git a/components/layout/time-range-picker.tsx b/components/layout/time-range-picker.tsx
index bf3f34a..a6f90d0 100644
--- a/components/layout/time-range-picker.tsx
+++ b/components/layout/time-range-picker.tsx
@@ -6,13 +6,35 @@ import type { TimeRange } from "@/lib/types";
 interface TimeRangePickerProps {
   value: TimeRange;
   onChange: (range: TimeRange) => void;
+  /** Include the "Live" option — only meaningful where the caller actually
+   * has a realtime data source wired up (e.g. Overview's socket-fed chart).
+   * Off by default so REST-only consumers (like Endpoints) don't show a
+   * button that quietly does nothing. */
+  showLive?: boolean;
 }
 
 const RANGES: TimeRange[] = ["1h", "6h", "24h", "7d"];
 
-export function TimeRangePicker({ value, onChange }: TimeRangePickerProps) {
+export function TimeRangePicker({ value, onChange, showLive = false }: TimeRangePickerProps) {
   return (
     <div className="flex items-center gap-0.5 p-0.5 rounded bg-[#111] border border-[#1E1E1E]">
+      {showLive && (
+        <button
+          onClick={() => onChange("live")}
+          className={cn(
+            "flex items-center gap-1.5 px-2.5 py-1 text-xs rounded transition-all duration-100 font-medium",
+            value === "live"
+              ? "bg-blue text-white"
+              : "text-[#949494] hover:text-[#888]"
+          )}
+        >
+          <span className={cn(
+            "h-1.5 w-1.5 rounded-full",
+            value === "live" ? "bg-white animate-pulse" : "bg-green"
+          )} />
+          Live
+        </button>
+      )}
       {RANGES.map((range) => (
         <button
           key={range}
@@ -21,7 +43,7 @@ export function TimeRangePicker({ value, onChange }: TimeRangePickerProps) {
             "px-2.5 py-1 text-xs rounded transition-all duration-100 font-medium",
             value === range
               ? "bg-blue text-white"
-              : "text-[#555] hover:text-[#888]"
+              : "text-[#949494] hover:text-[#888]"
           )}
         >
           {range}
diff --git a/components/layout/topbar.tsx b/components/layout/topbar.tsx
index c5a1904..6ef2487 100644
--- a/components/layout/topbar.tsx
+++ b/components/layout/topbar.tsx
@@ -20,12 +20,12 @@ export function Topbar({ breadcrumb, actions }: TopbarProps) {
         <div className="flex items-center gap-1.5 text-xs flex-1 min-w-0">
           {breadcrumb?.map((crumb, i) => (
             <span key={i} className="flex items-center gap-1.5">
-              {i > 0 && <span className="text-[#333]">/</span>}
+              {i > 0 && <span className="text-[#808080]">/</span>}
               <span
                 className={
                   i === breadcrumb.length - 1
                     ? "text-[#F5F5F5] font-medium"
-                    : "text-[#555] hover:text-[#888] cursor-pointer transition-colors"
+                    : "text-[#949494] hover:text-[#888] cursor-pointer transition-colors"
                 }
               >
                 {crumb.label}
@@ -36,19 +36,19 @@ export function Topbar({ breadcrumb, actions }: TopbarProps) {
 
         {/* Search */}
         <div className="flex items-center gap-1.5 px-2.5 py-1 rounded border border-[#1E1E1E] bg-[#111] w-48 hover:border-[#2A2A2A] transition-colors">
-          <Search className="h-3 w-3 text-[#444] flex-shrink-0" />
+          <Search className="h-3 w-3 text-[#808080] flex-shrink-0" />
           <input
             type="text"
             placeholder="Search..."
-            className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#444] outline-none flex-1 w-full"
+            className="bg-transparent text-xs text-[#F5F5F5] placeholder-[#808080] outline-none flex-1 w-full"
           />
-          <kbd className="text-[10px] text-[#444] font-mono">⌘K</kbd>
+          <kbd className="text-[10px] text-[#808080] font-mono">⌘K</kbd>
         </div>
 
         {/* Actions */}
         <div className="flex items-center gap-2">
           {actions}
-          <button className="relative p-1.5 rounded hover:bg-[#161616] text-[#555] hover:text-[#888] transition-colors">
+          <button className="relative p-1.5 rounded hover:bg-[#161616] text-[#949494] hover:text-[#888] transition-colors">
             <Bell className="h-3.5 w-3.5" />
             <span className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-red" />
           </button>
diff --git a/components/projects/create-project-dialog.tsx b/components/projects/create-project-dialog.tsx
index 8c43862..5f90911 100644
--- a/components/projects/create-project-dialog.tsx
+++ b/components/projects/create-project-dialog.tsx
@@ -82,7 +82,7 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
           <Dialog.Close asChild>
             <button
               onClick={resetAndClose}
-              className="absolute right-4 top-4 rounded p-1 text-[#555] hover:text-[#888] hover:bg-[#1A1A1A] transition-colors outline-none"
+              className="absolute right-4 top-4 rounded p-1 text-[#949494] hover:text-[#888] hover:bg-[#1A1A1A] transition-colors outline-none"
             >
               <X className="h-3.5 w-3.5" />
             </button>
@@ -94,7 +94,7 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
                 <Dialog.Title className="text-base font-semibold text-[#F5F5F5]">
                   Create project
                 </Dialog.Title>
-                <Dialog.Description className="mt-1 text-sm text-[#555]">
+                <Dialog.Description className="mt-1 text-sm text-[#949494]">
                   A project groups API keys, events, and alert rules.
                 </Dialog.Description>
               </div>
@@ -136,7 +136,7 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
                 <Dialog.Title className="text-base font-semibold text-[#F5F5F5]">
                   API key created
                 </Dialog.Title>
-                <Dialog.Description className="mt-1 text-sm text-[#555]">
+                <Dialog.Description className="mt-1 text-sm text-[#949494]">
                   Copy your API key now — it will not be shown again.
                 </Dialog.Description>
               </div>
@@ -144,7 +144,7 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
               <div className="rounded-lg border border-[#2A2A2A] bg-[#0A0A0A] p-4 space-y-3">
                 <div className="flex items-start justify-between gap-3">
                   <div className="space-y-1 min-w-0">
-                    <p className="text-[10px] text-[#444] font-medium uppercase tracking-wider">
+                    <p className="text-[10px] text-[#808080] font-medium uppercase tracking-wider">
                       {result.project.name}
                     </p>
                     <p className="font-mono text-xs text-[#F5F5F5] break-all leading-relaxed">
@@ -153,7 +153,7 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
                   </div>
                   <button
                     onClick={copyKey}
-                    className="flex-shrink-0 p-2 rounded border border-[#2A2A2A] hover:border-[#333] bg-[#161616] hover:bg-[#1A1A1A] text-[#555] hover:text-[#888] transition-colors"
+                    className="flex-shrink-0 p-2 rounded border border-[#2A2A2A] hover:border-[#333] bg-[#161616] hover:bg-[#1A1A1A] text-[#949494] hover:text-[#888] transition-colors"
                     title="Copy API key"
                   >
                     {copied ? (
@@ -173,10 +173,10 @@ export function CreateProjectDialog({ open, onOpenChange }: Props) {
               </div>
 
               <div className="space-y-1.5">
-                <p className="text-xs text-[#555] font-medium">Quick start</p>
+                <p className="text-xs text-[#949494] font-medium">Quick start</p>
                 <div className="rounded border border-[#1E1E1E] bg-[#0A0A0A] p-3 font-mono text-[11px] text-[#888] leading-relaxed space-y-1">
-                  <p><span className="text-[#444]">npm install</span> liveboard</p>
-                  <p><span className="text-[#444]">LIVEBOARD_API_KEY=</span><span className="text-blue">{result.project.apiKeyMasked}</span></p>
+                  <p><span className="text-[#808080]">npm install</span> liveboard</p>
+                  <p><span className="text-[#808080]">LIVEBOARD_API_KEY=</span><span className="text-blue">{result.project.apiKeyMasked}</span></p>
                 </div>
               </div>
 
diff --git a/components/status/uptime-bar.tsx b/components/status/uptime-bar.tsx
index 1d48907..42781a0 100644
--- a/components/status/uptime-bar.tsx
+++ b/components/status/uptime-bar.tsx
@@ -48,7 +48,7 @@ export function UptimeBar({ service }: UptimeBarProps) {
         </div>
         <div className="text-right">
           <p className="text-xs font-mono text-[#F5F5F5]">{service.uptime90d.toFixed(2)}%</p>
-          <p className="text-[10px] text-[#444]">uptime (90d)</p>
+          <p className="text-[10px] text-[#808080]">uptime (90d)</p>
         </div>
       </div>
 
@@ -67,8 +67,8 @@ export function UptimeBar({ service }: UptimeBarProps) {
         ))}
       </div>
       <div className="flex items-center justify-between mt-1">
-        <span className="text-[10px] text-[#333]">90 days ago</span>
-        <span className="text-[10px] text-[#333]">Today</span>
+        <span className="text-[10px] text-[#808080]">90 days ago</span>
+        <span className="text-[10px] text-[#808080]">Today</span>
       </div>
     </div>
   );
diff --git a/components/traces/flame-graph.tsx b/components/traces/flame-graph.tsx
index 66fd194..2c416c2 100644
--- a/components/traces/flame-graph.tsx
+++ b/components/traces/flame-graph.tsx
@@ -67,11 +67,11 @@ export function FlameGraph({ trace, onSpanClick, selectedSpan, highlightCritical
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-2.5 border-b border-[#1E1E1E]">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-mono text-[#555]">trace_id:</span>
+          <span className="text-xs font-mono text-[#949494]">trace_id:</span>
           <span className="text-xs font-mono text-blue">{trace.id}</span>
         </div>
         <div className="flex items-center gap-3">
-          <span className="text-xs text-[#444]">{trace.spans.length} spans</span>
+          <span className="text-xs text-[#808080]">{trace.spans.length} spans</span>
           <span
             className={cn(
               "text-xs font-mono font-bold",
@@ -87,7 +87,7 @@ export function FlameGraph({ trace, onSpanClick, selectedSpan, highlightCritical
       <div className="px-4 py-1.5 border-b border-[#161616]">
         <div className="flex justify-between">
           {[0, 0.25, 0.5, 0.75, 1].map((pct) => (
-            <span key={pct} className="text-[10px] text-[#333] font-mono">
+            <span key={pct} className="text-[10px] text-[#808080] font-mono">
               {Math.round(pct * totalDuration)}ms
             </span>
           ))}
@@ -108,7 +108,7 @@ export function FlameGraph({ trace, onSpanClick, selectedSpan, highlightCritical
             <div key={span.id} className="flex items-center gap-3">
               <div
                 className="w-[120px] flex-shrink-0 text-[10px] font-mono truncate transition-colors"
-                style={{ color: isCritical ? "#888" : "#333" }}
+                style={{ color: isCritical ? "#888" : "#808080" }}
               >
                 {span.service}
               </div>
@@ -134,7 +134,7 @@ export function FlameGraph({ trace, onSpanClick, selectedSpan, highlightCritical
                   )}
                 </button>
               </div>
-              <div className="w-[50px] flex-shrink-0 text-[10px] text-[#444] font-mono text-right tabular-nums">
+              <div className="w-[50px] flex-shrink-0 text-[10px] text-[#808080] font-mono text-right tabular-nums">
                 {span.duration}ms
               </div>
             </div>
diff --git a/components/traces/service-map.tsx b/components/traces/service-map.tsx
index 7e12959..cf9ee60 100644
--- a/components/traces/service-map.tsx
+++ b/components/traces/service-map.tsx
@@ -107,7 +107,7 @@ export function ServiceMap({ trace }: ServiceMapProps) {
 
   return (
     <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4">
-      <p className="text-[10px] text-[#444] uppercase tracking-wider mb-3">Service Map</p>
+      <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-3">Service Map</p>
       <div className="flex items-center justify-center">
         <svg width={W} height={H} className="overflow-visible">
           <defs>
@@ -136,7 +136,7 @@ export function ServiceMap({ trace }: ServiceMapProps) {
                     y={(fromNode.y + toNode.y) / 2 - 6}
                     textAnchor="middle"
                     fontSize={8}
-                    fill="#333"
+                    fill="#808080"
                     className="font-mono"
                   >
                     ×{edge.count}
@@ -205,7 +205,7 @@ export function ServiceMap({ trace }: ServiceMapProps) {
           return (
             <div key={node.service} className="flex items-center gap-1.5">
               <div className="h-2 w-2 rounded-full" style={{ backgroundColor: color }} />
-              <span className="text-[10px] text-[#444] font-mono">{node.service}</span>
+              <span className="text-[10px] text-[#808080] font-mono">{node.service}</span>
               {node.hasError && <span className="text-[10px] text-red">!</span>}
             </div>
           );
diff --git a/components/traces/span-detail.tsx b/components/traces/span-detail.tsx
index e97bbe0..9586965 100644
--- a/components/traces/span-detail.tsx
+++ b/components/traces/span-detail.tsx
@@ -40,7 +40,7 @@ export function SpanDetail({ span, onClose }: SpanDetailProps) {
             </div>
             <button
               onClick={onClose}
-              className="p-1 rounded hover:bg-[#1E1E1E] text-[#444] hover:text-[#888] transition-colors"
+              className="p-1 rounded hover:bg-[#1E1E1E] text-[#808080] hover:text-[#888] transition-colors"
             >
               <X className="h-3.5 w-3.5" />
             </button>
@@ -56,7 +56,7 @@ export function SpanDetail({ span, onClose }: SpanDetailProps) {
               { label: "Parent", value: span.parentId || "root", mono: true },
             ].map((field) => (
               <div key={field.label}>
-                <p className="text-[10px] text-[#444] uppercase tracking-wider mb-0.5">{field.label}</p>
+                <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-0.5">{field.label}</p>
                 <p
                   className={cn("text-xs", field.mono ? "font-mono" : "font-medium")}
                   style={{ color: field.color || "#888" }}
@@ -69,12 +69,12 @@ export function SpanDetail({ span, onClose }: SpanDetailProps) {
 
           {Object.keys(span.tags).length > 0 && (
             <div className="px-4 pb-4">
-              <p className="text-[10px] text-[#444] uppercase tracking-wider mb-2">Tags</p>
+              <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-2">Tags</p>
               <div className="space-y-1">
                 {Object.entries(span.tags).map(([k, v]) => (
                   <div key={k} className="flex items-center gap-2 text-xs font-mono">
                     <span className="text-blue">{k}</span>
-                    <span className="text-[#333]">=</span>
+                    <span className="text-[#808080]">=</span>
                     <span className="text-[#888]">{v}</span>
                   </div>
                 ))}
diff --git a/hooks/use-api-query.ts b/hooks/use-api-query.ts
index ca4d2c6..d7e3459 100644
--- a/hooks/use-api-query.ts
+++ b/hooks/use-api-query.ts
@@ -4,22 +4,26 @@ import { useEffect, useRef, useState } from "react";
 import { apiFetch } from "@/lib/api-client";
 import { useProjects } from "@/components/providers/project-provider";
 
-// Stable empty-array reference for the "real project, no data" state — reused
-// across renders so consumers depending on the result don't see a new [] each
-// render (which would loop any effect keyed on it).
-const EMPTY_LIST: readonly never[] = [];
+// Stable empty-array reference — reused across renders so consumers depending
+// on the result don't see a new [] each render (which would loop any effect
+// keyed on it). Exported so callers can pass the same reference as `empty`.
+export const EMPTY_LIST: readonly never[] = [];
 
 /**
  * Generic hook for REST API data.
- * - Shows `fallback` (mock) while loading or on error.
- * - Swaps to real data once the fetch succeeds.
+ *
+ * Never fabricates data. `data` is `empty` while loading, with no active
+ * project, or on a fetch error — real data only ever comes from a real,
+ * successful fetch. Callers render their own honest empty/loading state from
+ * `loading` + an empty `data`, rather than this hook ever guessing at numbers.
+ *
  * - Refetches whenever `path` or serialised `params` change.
  * - Polls every `pollMs` milliseconds if provided.
  */
 export function useApiQuery<T>(
   path: string,
   params: Record<string, string>,
-  fallback: T,
+  empty: T,
   transform?: (raw: unknown) => T,
   pollMs?: number,
 ): { data: T; loading: boolean; refetch: () => void } {
@@ -44,13 +48,14 @@ export function useApiQuery<T>(
   // Main fetch — runs on mount, param change, or manual refetch tick
   useEffect(() => {
     let active = true;
-    // Only clear data (show fallback) when params actually changed, not on poll ticks
+    // Only clear data (show empty) when params actually changed, not on poll ticks
     if (tick === 0) {
       setData(null);
       setLoading(true);
     }
 
-    // No active project yet → show fallback (demo) instead of a scopeless call.
+    // No active project yet (still loading auth/project state) — nothing to
+    // fetch. Stay on the honest empty state rather than a scopeless call.
     if (!projectId) {
       setLoading(false);
       return () => {
@@ -92,13 +97,5 @@ export function useApiQuery<T>(
     return () => clearInterval(id);
   }, [pollMs]);
 
-  // Honesty rule: a REAL project never shows the demo `fallback`. While loading
-  // or on error it shows an empty result (empty state), not fabricated data.
-  // The demo `fallback` is only used when there's no project (landing / loading).
-  // Use the shared EMPTY_LIST so the reference is stable across renders.
-  const effectiveFallback = projectId
-    ? (Array.isArray(fallback) ? (EMPTY_LIST as unknown as T) : fallback)
-    : fallback;
-
-  return { data: data ?? effectiveFallback, loading, refetch };
+  return { data: data ?? empty, loading, refetch };
 }
diff --git a/hooks/use-data.ts b/hooks/use-data.ts
index 316123e..c7dedad 100644
--- a/hooks/use-data.ts
+++ b/hooks/use-data.ts
@@ -5,21 +5,13 @@
  * Each hook:
  *   1. Fetches real data from the API.
  *   2. Transforms snake_case backend response to camelCase frontend types.
- *   3. Falls back to mock data while loading or if the API is unreachable.
+ *   3. Shows an honest empty result while loading or if the API is
+ *      unreachable — never fabricated data (see EMPTY_LIST in use-api-query).
  */
 
-import { useMemo } from "react";
-import { useApiQuery } from "@/hooks/use-api-query";
+import { useApiQuery, EMPTY_LIST } from "@/hooks/use-api-query";
 import { apiMutate } from "@/lib/api-client";
 import { useProjects } from "@/components/providers/project-provider";
-import {
-  generateChartData,
-  getAlertRules,
-  getEndpoints,
-  getIncidents,
-  getServiceStatuses,
-  getTraces,
-} from "@/lib/mock-data";
 import type {
   AlertRule,
   ChartData,
@@ -156,11 +148,10 @@ function toServices(raw: unknown): ServiceStatus[] {
 
 /** Request-volume and status-code breakdown for the overview charts. Polls every 30 s. */
 export function useChartData(hours: number) {
-  const fallback = useMemo(() => generateChartData(hours), [hours]);
   return useApiQuery<ChartData[]>(
     "/v1/metrics/timeseries",
     { hours: String(hours) },
-    fallback,
+    EMPTY_LIST as unknown as ChartData[],
     undefined,
     30_000,
   );
@@ -168,36 +159,32 @@ export function useChartData(hours: number) {
 
 /** AI-detected incidents — polls every 60 s (matches anomaly worker cadence). */
 export function useIncidents() {
-  const fallback = useMemo(() => getIncidents(), []);
-  return useApiQuery<Incident[]>("/v1/incidents", {}, fallback, toIncidents, 60_000);
+  return useApiQuery<Incident[]>("/v1/incidents", {}, EMPTY_LIST as unknown as Incident[], toIncidents, 60_000);
 }
 
 /** Per-route aggregate stats for the endpoints explorer. */
 export function useEndpoints(hours = 24) {
-  const fallback = useMemo(() => getEndpoints(), []);
   return useApiQuery<Endpoint[]>(
     "/v1/endpoints",
     { hours: String(hours) },
-    fallback,
+    EMPTY_LIST as unknown as Endpoint[],
     toEndpoints,
   );
 }
 
-/**
- * Distributed traces from the spans table.
- * Falls back to mock data while spans table is empty (pre-Phase 6).
- */
-export function useTraces() {
-  const mockTraces = useMemo(() => getTraces(), []);
-  // Real project → shows real spans (empty when none). Only the no-project
-  // (landing) case falls back to the demo traces, handled inside useApiQuery.
-  return useApiQuery<Trace[]>("/v1/traces", {}, mockTraces, toTraces);
+/** Distributed traces from the spans table. */
+export function useTraces(hours = 24) {
+  return useApiQuery<Trace[]>(
+    "/v1/traces",
+    { hours: String(hours) },
+    EMPTY_LIST as unknown as Trace[],
+    toTraces,
+  );
 }
 
 /** Service health derived from route-prefix groups — used by the status page. */
 export function useServices() {
-  const fallback = useMemo(() => getServiceStatuses(), []);
-  return useApiQuery<ServiceStatus[]>("/v1/services", {}, fallback, toServices);
+  return useApiQuery<ServiceStatus[]>("/v1/services", {}, EMPTY_LIST as unknown as ServiceStatus[], toServices, 30_000);
 }
 
 // ─── Alert rules ─────────────────────────────────────────────────────────────
@@ -282,9 +269,10 @@ function toAlertHistory(raw: unknown): AlertHistoryEntry[] {
 export function useAlertRules() {
   const { activeProject } = useProjects();
   const project = activeProject?.id;
-  const fallback = useMemo(() => getAlertRules(), []);
   // Poll so a rule flipping to "firing" (by the evaluation worker) shows up live.
-  const query = useApiQuery<AlertRule[]>("/v1/alert-rules", {}, fallback, toAlertRules, 15_000);
+  const query = useApiQuery<AlertRule[]>(
+    "/v1/alert-rules", {}, EMPTY_LIST as unknown as AlertRule[], toAlertRules, 15_000,
+  );
 
   async function createRule(payload: CreateAlertRulePayload): Promise<AlertRule> {
     const raw = await apiMutate<ApiAlertRule>("POST", "/v1/alert-rules", payload, project);
@@ -304,8 +292,9 @@ export function useAlertRules() {
 
 /** Alert firing history for the current project. */
 export function useAlertHistory() {
-  const fallback = useMemo((): AlertHistoryEntry[] => [], []);
-  return useApiQuery<AlertHistoryEntry[]>("/v1/alert-history", {}, fallback, toAlertHistory, 15_000);
+  return useApiQuery<AlertHistoryEntry[]>(
+    "/v1/alert-history", {}, EMPTY_LIST as unknown as AlertHistoryEntry[], toAlertHistory, 15_000,
+  );
 }
 
 // ─── Alert channels (real delivery targets) ──────────────────────────────────
@@ -353,11 +342,10 @@ export interface CreateChannelPayload {
 export function useChannels() {
   const { activeProject } = useProjects();
   const project = activeProject?.id;
-  const fallback = useMemo<AlertChannel[]>(() => [], []);
   const query = useApiQuery<AlertChannel[]>(
     "/v1/channels",
     {},
-    fallback,
+    EMPTY_LIST as unknown as AlertChannel[],
     (raw) => (raw as ApiChannel[]).map(toChannel),
     15_000,
   );
diff --git a/hooks/use-live-metrics.ts b/hooks/use-live-metrics.ts
index e122094..aa04222 100644
--- a/hooks/use-live-metrics.ts
+++ b/hooks/use-live-metrics.ts
@@ -8,55 +8,25 @@ import type { LogEntry } from "@/lib/types";
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
 const LOG_BUFFER = 200;
 
-// ── Demo mode ────────────────────────────────────────────────────────────────
-// When no live backend is connected, synthesize a realistic request stream so
-// the dashboard reads as live instead of sitting empty.
-const DEMO_ROUTES: { method: LogEntry["method"]; route: string; weight: number }[] = [
-  { method: "GET", route: "/api/products", weight: 9 },
-  { method: "GET", route: "/api/users/:id", weight: 7 },
-  { method: "GET", route: "/health", weight: 6 },
-  { method: "POST", route: "/api/checkout", weight: 4 },
-  { method: "GET", route: "/api/search", weight: 5 },
-  { method: "POST", route: "/api/orders", weight: 4 },
-  { method: "POST", route: "/api/auth/login", weight: 3 },
-  { method: "POST", route: "/api/payments", weight: 3 },
-  { method: "PATCH", route: "/api/users/:id", weight: 2 },
-  { method: "DELETE", route: "/api/products/:id", weight: 1 },
-  { method: "GET", route: "/api/analytics/events", weight: 3 },
-];
-const DEMO_POOL = DEMO_ROUTES.flatMap((r) => Array(r.weight).fill(r));
-
-function mockLog(): LogEntry {
-  const pick = DEMO_POOL[Math.floor(Math.random() * DEMO_POOL.length)];
-  const roll = Math.random();
-  // Mostly 2xx, occasional 4xx, rare 5xx — skew errors toward checkout/auth.
-  const risky = pick.route.includes("checkout") || pick.route.includes("auth");
-  let status = 200;
-  if (roll > (risky ? 0.82 : 0.94)) status = 500;
-  else if (roll > (risky ? 0.7 : 0.9)) status = 401;
-  else if (pick.method === "POST") status = 201;
-  const base = pick.route.includes("checkout") || pick.route.includes("payments") ? 260 : 40;
-  return {
-    id: crypto.randomUUID(),
-    timestamp: new Date(),
-    method: pick.method,
-    route: pick.route,
-    status,
-    latency: Math.round(base + Math.random() * base * (status >= 500 ? 4 : 1.5)),
-    userId: `u_${Math.floor(1000 + Math.random() * 8999)}`,
-  };
-}
-
+export type LiveLogStatus = "no-project" | "connecting" | "live" | "reconnecting";
+
+/**
+ * Streams real request-log entries over SSE for a project. Never fabricates
+ * rows: with no project, no realtime token, or a dropped connection, `logs`
+ * simply stays whatever real entries have arrived (possibly empty) and
+ * `status` tells the caller what's actually going on, so the UI can show an
+ * honest "connecting…" / "reconnecting…" / "no requests yet" state instead
+ * of a fake-but-convincing feed.
+ */
 export function useLiveLog(maxEntries = LOG_BUFFER) {
   const [logs, setLogs] = useState<LogEntry[]>([]);
   const [paused, setPaused] = useState(false);
-  const [connected, setConnected] = useState(false);
+  const [status, setStatus] = useState<LiveLogStatus>("connecting");
 
   const pausedRef  = useRef(paused);
   const retryDelay = useRef(1_000);
   const esRef      = useRef<EventSource | null>(null);
   const timerRef   = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const mockRef    = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const { activeProject } = useProjects();
   const projectId = activeProject?.id ?? null;
@@ -67,30 +37,23 @@ export function useLiveLog(maxEntries = LOG_BUFFER) {
 
   useEffect(() => {
     let cancelled = false;
-    let token: string | null = null;
-
-    function startMock() {
-      if (mockRef.current) return;
-      // Seed a full-looking buffer, then stream new entries in.
-      setLogs(Array.from({ length: 18 }, mockLog));
-      mockRef.current = setInterval(() => {
-        if (pausedRef.current) return;
-        setLogs((prev) => [mockLog(), ...prev].slice(0, maxEntries));
-      }, 900);
-    }
+    let hasConnectedOnce = false;
 
     async function connect() {
       if (cancelled) return;
       if (!projectId) {
-        startMock();
+        setStatus("no-project");
         return;
       }
       // Short-lived, project-scoped realtime token (Phase 8.4) — refetched on
       // each (re)connect so an expired token self-heals.
-      token = await fetchRealtimeToken(projectId);
+      const token = await fetchRealtimeToken(projectId);
       if (cancelled) return;
       if (!token) {
-        startMock();
+        setStatus(hasConnectedOnce ? "reconnecting" : "connecting");
+        const delay = retryDelay.current;
+        retryDelay.current = Math.min(delay * 2, 8_000);
+        timerRef.current = setTimeout(connect, delay);
         return;
       }
 
@@ -119,28 +82,24 @@ export function useLiveLog(maxEntries = LOG_BUFFER) {
       });
 
       es.onopen = () => {
-        setConnected(true);
+        hasConnectedOnce = true;
+        setStatus("live");
         retryDelay.current = 1_000;
-        // Real stream is live — drop the demo fallback.
-        if (mockRef.current) {
-          clearInterval(mockRef.current);
-          mockRef.current = null;
-        }
       };
 
       es.onerror = () => {
-        setConnected(false);
+        setStatus(hasConnectedOnce ? "reconnecting" : "connecting");
         es.close();
         esRef.current = null;
-        // Backend unreachable — fall back to the demo stream so the UI stays live.
-        startMock();
-        // Exponential back-off: 1 s → 2 s → 4 s → 8 s
+        // Exponential back-off: 1 s → 2 s → 4 s → 8 s. No fake data in the
+        // meantime — the log just stops growing until the stream recovers.
         const delay = retryDelay.current;
         retryDelay.current = Math.min(delay * 2, 8_000);
         timerRef.current = setTimeout(connect, delay);
       };
     }
 
+    setLogs([]);
     void connect();
 
     return () => {
@@ -148,15 +107,11 @@ export function useLiveLog(maxEntries = LOG_BUFFER) {
       esRef.current?.close();
       esRef.current = null;
       if (timerRef.current) clearTimeout(timerRef.current);
-      if (mockRef.current) {
-        clearInterval(mockRef.current);
-        mockRef.current = null;
-      }
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxEntries, projectId]);
 
-  return { logs, paused, setPaused, connected };
+  return { logs, paused, setPaused, status, connected: status === "live" };
 }
 
 export function useLiveCounter(base: number, variance = 0.05) {
diff --git a/hooks/use-time-range.ts b/hooks/use-time-range.ts
index ddee9ff..0c0bab3 100644
--- a/hooks/use-time-range.ts
+++ b/hooks/use-time-range.ts
@@ -7,6 +7,7 @@ export function useTimeRange(defaultRange: TimeRange = "24h") {
   const [range, setRange] = useState<TimeRange>(defaultRange);
 
   const hours: Record<TimeRange, number> = {
+    live: 0, // unused — "live" reads from the realtime socket stream, not this REST param
     "1h": 1,
     "6h": 6,
     "24h": 24,
diff --git a/hooks/use-websocket.ts b/hooks/use-websocket.ts
index 35f9e67..b9adb0a 100644
--- a/hooks/use-websocket.ts
+++ b/hooks/use-websocket.ts
@@ -7,31 +7,21 @@ import type { Incident, StatCard } from "@/lib/types";
 
 const SPARKLINE_LENGTH = 20;
 
-function emptyCards(): StatCard[] {
+function emptyCards(label = "connecting…"): StatCard[] {
   return [
-    { label: "Requests / min", value: "—", unit: "req", delta: 0, deltaLabel: "connecting…", sparkline: [] },
-    { label: "Error Rate",      value: "—", unit: "%",   delta: 0, deltaLabel: "connecting…", sparkline: [] },
-    { label: "p99 Latency",     value: "—", unit: "ms",  delta: 0, deltaLabel: "connecting…", sparkline: [] },
-    { label: "Avg Latency",     value: "—", unit: "ms",  delta: 0, deltaLabel: "connecting…", sparkline: [] },
+    { label: "Requests / min", value: "—", unit: "req", delta: 0, deltaLabel: label, sparkline: [] },
+    { label: "Error Rate",      value: "—", unit: "%",   delta: 0, deltaLabel: label, sparkline: [] },
+    { label: "p99 Latency",     value: "—", unit: "ms",  delta: 0, deltaLabel: label, sparkline: [] },
+    { label: "Avg Latency",     value: "—", unit: "ms",  delta: 0, deltaLabel: label, sparkline: [] },
   ];
 }
 
-/** Realistic metric tick for demo mode when no live backend is connected. */
-function mockMetric(): MetricUpdate {
-  return {
-    requests:  Math.round(2200 + Math.random() * 520),
-    errorRate: Math.round((0.3 + Math.random() * 1.7) * 10) / 10,
-    p99:       Math.round(250 + Math.random() * 95),
-    avg:       Math.round(90 + Math.random() * 55),
-    bucket:    new Date().toISOString(),
-  };
-}
-
 /**
  * Streams live stat-card data for a project. Fetches a short-lived, project-
- * scoped realtime token from the BFF (no API key in the browser). When there's
- * no project / backend, falls back to a self-updating demo stream so the
- * dashboard always feels alive instead of stuck "connecting…".
+ * scoped realtime token from the BFF (no API key in the browser). Never
+ * fabricates numbers: with no project, no realtime token, or simply no
+ * traffic in the last minute, the cards stay at the honest "—" empty state —
+ * that's the truth, not a reason to make something up.
  */
 export function useMetrics(projectId: string | null) {
   const [cards, setCards] = useState<StatCard[]>(emptyCards);
@@ -101,39 +91,31 @@ export function useMetrics(projectId: string | null) {
       ]);
     }
 
-    let mockTimer: ReturnType<typeof setInterval> | null = null;
-
-    function startMock() {
-      if (mockTimer) return;
-      // Seed history so sparklines render full immediately.
-      for (let i = 0; i < SPARKLINE_LENGTH; i++) applyUpdate(mockMetric());
-      mockTimer = setInterval(() => applyUpdate(mockMetric()), 2000);
-    }
-
-    // No project context (logged-out / loading) → synthetic demo so the UI
-    // isn't dead. A REAL project never shows synthetic numbers.
+    // No project context yet (logged-out / still loading) — nothing to
+    // connect to. Stay on the honest empty state, no synthetic numbers.
     if (!projectId) {
-      startMock();
-      return () => {
-        if (mockTimer) clearInterval(mockTimer);
-      };
+      history.current = { requests: [], errorRate: [], p99: [], avg: [] };
+      setCards(emptyCards("no project selected"));
+      return;
     }
 
+    // Clear any previous project's values before this connection attempt —
+    // otherwise, if this project simply has no traffic in the last minute,
+    // the last project's numbers would stay on screen looking exactly like
+    // this project's live data instead of the honest "—" empty state.
+    history.current = { requests: [], errorRate: [], p99: [], avg: [] };
+    setCards(emptyCards());
+
     let cancelled = false;
     let socket: ReturnType<typeof getSocket> | null = null;
     let onMetric: ((update: MetricUpdate) => void) | null = null;
 
     void (async () => {
       const token = await fetchRealtimeToken(projectId);
-      if (cancelled) return;
-      if (!token) {
-        // Realtime unavailable entirely (backend down) — demo fallback for dev.
-        startMock();
-        return;
-      }
-      // Real project + realtime available → show ONLY real metrics. When there's
-      // no traffic in the last minute the worker publishes nothing, so the cards
-      // stay at their empty ("—") state — which is the honest answer.
+      if (cancelled || !token) return;
+      // When there's no traffic in the last minute the worker publishes
+      // nothing, so the cards stay at their empty ("—") state — the honest
+      // answer, not a reason to fabricate a number.
       socket = getSocket(token);
       onMetric = (update: MetricUpdate) => applyUpdate(update);
       socket.on("metric", onMetric);
@@ -142,13 +124,72 @@ export function useMetrics(projectId: string | null) {
     return () => {
       cancelled = true;
       if (socket && onMetric) socket.off("metric", onMetric);
-      if (mockTimer) clearInterval(mockTimer);
     };
   }, [projectId]);
 
   return cards;
 }
 
+const LIVE_CHART_BUFFER = 120; // ~2 minutes at the worker's 1-tick/sec cadence
+
+export interface LiveChartPoint {
+  time: string;
+  requests: number;
+  errors2xx: number;
+  errors4xx: number;
+  errors5xx: number;
+  p99: number;
+}
+
+/**
+ * Rolling ~2-minute buffer of real request-rate data for the "Live" chart
+ * option — fed from the exact same per-second Socket.io metric stream that
+ * powers the stat cards (already proven accurate: a real 60s-window COUNT()
+ * from Postgres, not an estimate). Never interpolates or backfills; it only
+ * ever contains ticks that actually arrived, so a quiet stretch is a quiet
+ * stretch, not a smoothed guess.
+ */
+export function useLiveChartData(projectId: string | null): LiveChartPoint[] {
+  const [points, setPoints] = useState<LiveChartPoint[]>([]);
+
+  useEffect(() => {
+    setPoints([]);
+    if (!projectId) return;
+
+    let cancelled = false;
+    let socket: ReturnType<typeof getSocket> | null = null;
+    let onMetric: ((update: MetricUpdate) => void) | null = null;
+
+    void (async () => {
+      const token = await fetchRealtimeToken(projectId);
+      if (cancelled || !token) return;
+      socket = getSocket(token);
+      onMetric = (update: MetricUpdate) => {
+        const point: LiveChartPoint = {
+          // Raw ISO instant, not a pre-formatted string — formatted for
+          // display client-side by formatChartTime, same as the REST
+          // timeseries data these points render alongside.
+          time: new Date().toISOString(),
+          requests: update.requests,
+          errors2xx: update.req2xx ?? 0,
+          errors4xx: update.req4xx ?? 0,
+          errors5xx: update.req5xx ?? 0,
+          p99: update.p99,
+        };
+        setPoints((prev) => [...prev, point].slice(-LIVE_CHART_BUFFER));
+      };
+      socket.on("metric", onMetric);
+    })();
+
+    return () => {
+      cancelled = true;
+      if (socket && onMetric) socket.off("metric", onMetric);
+    };
+  }, [projectId]);
+
+  return points;
+}
+
 interface RawIncidentPush {
   id: string;
   severity: string;
diff --git a/lib/mock-data.ts b/lib/mock-data.ts
deleted file mode 100644
index 9756190..0000000
--- a/lib/mock-data.ts
+++ /dev/null
@@ -1,358 +0,0 @@
-import type {
-  LogEntry,
-  Incident,
-  Endpoint,
-  Trace,
-  TraceSpan,
-  AlertRule,
-  ServiceStatus,
-  ChartData,
-  StatCard,
-} from "./types";
-
-function randomBetween(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-function generateSparkline(base: number, points = 12): number[] {
-  return Array.from({ length: points }, () =>
-    Math.max(0, base + randomBetween(-base * 0.3, base * 0.3))
-  );
-}
-
-export function getStatCards(): StatCard[] {
-  return [
-    {
-      label: "Requests / min",
-      value: "2.4k",
-      delta: 12,
-      deltaLabel: "vs yesterday",
-      sparkline: generateSparkline(2400),
-    },
-    {
-      label: "Error Rate",
-      value: "1.8",
-      unit: "%",
-      delta: -0.3,
-      deltaLabel: "vs yesterday",
-      sparkline: generateSparkline(1.8),
-    },
-    {
-      label: "p99 Latency",
-      value: "284",
-      unit: "ms",
-      delta: 22,
-      deltaLabel: "vs yesterday",
-      sparkline: generateSparkline(284),
-    },
-    {
-      label: "Active Users",
-      value: "1.2k",
-      delta: 5,
-      deltaLabel: "vs yesterday",
-      sparkline: generateSparkline(1200),
-    },
-  ];
-}
-
-export function generateChartData(hours: number): ChartData[] {
-  const points = hours <= 6 ? hours * 12 : hours <= 24 ? hours * 4 : hours;
-  const now = Date.now();
-  const interval = (hours * 3600000) / points;
-
-  return Array.from({ length: points }, (_, i) => {
-    const t = new Date(now - (points - i) * interval);
-    const hour = t.getHours();
-    const base = 1800 + Math.sin((hour / 24) * Math.PI * 2) * 600;
-    const requests = Math.max(0, base + randomBetween(-200, 200));
-    const errorRate = Math.random() * 0.04;
-
-    const timeLabel = hours > 24
-      ? t.toLocaleDateString([], { month: "short", day: "numeric" })
-      : t.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-
-    return {
-      time: timeLabel,
-      requests: Math.floor(requests),
-      errors2xx: Math.floor(requests * (1 - errorRate) * 0.95),
-      errors4xx: Math.floor(requests * errorRate * 0.7),
-      errors5xx: Math.floor(requests * errorRate * 0.3),
-      p99: randomBetween(180, 420),
-    };
-  });
-}
-
-const ROUTES = [
-  "/api/auth/login",
-  "/api/auth/refresh",
-  "/api/users",
-  "/api/users/:id",
-  "/api/products",
-  "/api/products/:id",
-  "/api/orders",
-  "/api/orders/:id",
-  "/api/checkout",
-  "/api/payments",
-  "/api/webhooks/stripe",
-  "/api/search",
-  "/api/analytics/events",
-  "/health",
-];
-
-const METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"] as const;
-const STATUSES = [200, 201, 204, 400, 401, 403, 404, 422, 500, 502, 503];
-const USER_IDS = [
-  "user_892x",
-  "user_110a",
-  "user_4480",
-  "anon_io",
-  "user_7721",
-  "sys_router",
-  "user_3301",
-  "user_9980",
-];
-
-export function generateLogEntries(count = 50): LogEntry[] {
-  return Array.from({ length: count }, (_, i) => ({
-    id: `log_${Date.now()}_${i}`,
-    timestamp: new Date(Date.now() - i * 1200 - randomBetween(0, 800)),
-    method: METHODS[randomBetween(0, METHODS.length - 1)],
-    route: ROUTES[randomBetween(0, ROUTES.length - 1)],
-    status: STATUSES[randomBetween(0, STATUSES.length - 1)],
-    latency: randomBetween(12, 850),
-    userId: USER_IDS[randomBetween(0, USER_IDS.length - 1)],
-  }));
-}
-
-export function getIncidents(): Incident[] {
-  return [
-    {
-      id: "inc_001",
-      severity: "critical",
-      title: "p99 Latency Spike on /api/checkout",
-      summary:
-        "p99 latency exceeded 2000ms for 8 minutes. Root cause: downstream payment service timeout. Affected ~340 requests. Auto-recovered after payment service restart.",
-      endpoint: "/api/checkout",
-      timestamp: new Date(Date.now() - 1800000),
-      resolved: true,
-    },
-    {
-      id: "inc_002",
-      severity: "warning",
-      title: "Elevated 4xx Rate on /api/auth",
-      summary:
-        "4xx error rate rose to 12% on the auth endpoints. Pattern matches credential-stuffing from 3 IP ranges. Rate limiting kicked in at 10:42 AM.",
-      endpoint: "/api/auth/login",
-      timestamp: new Date(Date.now() - 5400000),
-      resolved: false,
-    },
-    {
-      id: "inc_003",
-      severity: "info",
-      title: "Traffic Anomaly — /api/search",
-      summary:
-        "Unusual spike in search requests (3.2x normal). Likely a new feature release driving user activity. No error rate increase observed.",
-      endpoint: "/api/search",
-      timestamp: new Date(Date.now() - 10800000),
-      resolved: true,
-    },
-  ];
-}
-
-export function getEndpoints(): Endpoint[] {
-  return [
-    { id: "ep_01", method: "POST", route: "/api/auth/login", requests24h: 48200, errorRate: 11.2, p50: 89, p95: 210, p99: 380, lastCalled: new Date(Date.now() - 2000), healthScore: 42 },
-    { id: "ep_02", method: "GET", route: "/api/products", requests24h: 124000, errorRate: 0.4, p50: 45, p95: 120, p99: 195, lastCalled: new Date(Date.now() - 800), healthScore: 96 },
-    { id: "ep_03", method: "GET", route: "/api/users/:id", requests24h: 88000, errorRate: 0.9, p50: 38, p95: 95, p99: 145, lastCalled: new Date(Date.now() - 1200), healthScore: 91 },
-    { id: "ep_04", method: "POST", route: "/api/checkout", requests24h: 12400, errorRate: 3.1, p50: 320, p95: 890, p99: 1840, lastCalled: new Date(Date.now() - 4000), healthScore: 58 },
-    { id: "ep_05", method: "POST", route: "/api/payments", requests24h: 11800, errorRate: 0.8, p50: 410, p95: 980, p99: 1200, lastCalled: new Date(Date.now() - 5000), healthScore: 84 },
-    { id: "ep_06", method: "GET", route: "/api/orders", requests24h: 34000, errorRate: 0.2, p50: 52, p95: 130, p99: 200, lastCalled: new Date(Date.now() - 900), healthScore: 97 },
-    { id: "ep_07", method: "POST", route: "/api/webhooks/stripe", requests24h: 8900, errorRate: 0.0, p50: 28, p95: 72, p99: 110, lastCalled: new Date(Date.now() - 3000), healthScore: 100 },
-    { id: "ep_08", method: "GET", route: "/api/search", requests24h: 56000, errorRate: 0.6, p50: 85, p95: 240, p99: 420, lastCalled: new Date(Date.now() - 600), healthScore: 89 },
-    { id: "ep_09", method: "PUT", route: "/api/users/:id", requests24h: 9200, errorRate: 1.4, p50: 95, p95: 280, p99: 520, lastCalled: new Date(Date.now() - 8000), healthScore: 75 },
-    { id: "ep_10", method: "DELETE", route: "/api/products/:id", requests24h: 1200, errorRate: 0.0, p50: 65, p95: 140, p99: 210, lastCalled: new Date(Date.now() - 60000), healthScore: 99 },
-    { id: "ep_11", method: "GET", route: "/api/analytics/events", requests24h: 22000, errorRate: 2.8, p50: 180, p95: 540, p99: 980, lastCalled: new Date(Date.now() - 2400), healthScore: 63 },
-    { id: "ep_12", method: "GET", route: "/health", requests24h: 288000, errorRate: 0.0, p50: 4, p95: 8, p99: 12, lastCalled: new Date(Date.now() - 100), healthScore: 100 },
-  ];
-}
-
-export function getTraces(): Trace[] {
-  return Array.from({ length: 20 }, (_, i) => {
-    const traceId = `trace_${(i + 1).toString().padStart(4, "0")}`;
-    const hasError = i % 7 === 0;
-    const totalDuration = randomBetween(80, 1800);
-
-    const spans: TraceSpan[] = [
-      {
-        id: `${traceId}_s1`,
-        traceId,
-        service: "api-gateway",
-        name: "HTTP POST /api/checkout",
-        startTime: 0,
-        duration: totalDuration,
-        status: hasError ? "error" : "ok",
-        tags: { "http.method": "POST", "http.url": "/api/checkout", "http.status_code": hasError ? "500" : "200" },
-      },
-      {
-        id: `${traceId}_s2`,
-        traceId,
-        parentId: `${traceId}_s1`,
-        service: "auth-service",
-        name: "ValidateToken",
-        startTime: 5,
-        duration: randomBetween(10, 40),
-        status: "ok",
-        tags: { "user.id": "user_892x" },
-      },
-      {
-        id: `${traceId}_s3`,
-        traceId,
-        parentId: `${traceId}_s1`,
-        service: "product-service",
-        name: "GetCartItems",
-        startTime: 45,
-        duration: randomBetween(20, 80),
-        status: "ok",
-        tags: { "db.type": "postgres" },
-      },
-      {
-        id: `${traceId}_s4`,
-        traceId,
-        parentId: `${traceId}_s1`,
-        service: "payment-service",
-        name: "ChargeCard",
-        startTime: 130,
-        duration: randomBetween(100, 800),
-        status: hasError ? "error" : "ok",
-        tags: { "payment.provider": "stripe" },
-      },
-    ];
-
-    return {
-      id: traceId,
-      rootSpan: `${traceId}_s1`,
-      service: "api-gateway",
-      endpoint: "/api/checkout",
-      totalDuration,
-      timestamp: new Date(Date.now() - i * 180000),
-      status: hasError ? "error" : "ok",
-      spans,
-    };
-  });
-}
-
-export function getAlertRules(): AlertRule[] {
-  return [
-    {
-      id: "rule_01",
-      name: "High Error Rate",
-      metric: "error_rate",
-      operator: ">",
-      threshold: 5,
-      window: 5,
-      severity: "critical",
-      channel: "Slack #alerts",
-      status: "ok",
-      enabled: true,
-    },
-    {
-      id: "rule_02",
-      name: "p99 Latency Spike",
-      metric: "p99_latency",
-      operator: ">",
-      threshold: 2000,
-      window: 3,
-      severity: "critical",
-      channel: "PagerDuty",
-      status: "firing",
-      lastTriggered: new Date(Date.now() - 1800000),
-      enabled: true,
-    },
-    {
-      id: "rule_03",
-      name: "Low Traffic Warning",
-      metric: "requests_per_min",
-      operator: "<",
-      threshold: 100,
-      window: 10,
-      severity: "warning",
-      channel: "Slack #warnings",
-      status: "ok",
-      enabled: true,
-    },
-    {
-      id: "rule_04",
-      name: "Auth 4xx Spike",
-      metric: "auth_4xx_rate",
-      operator: ">",
-      threshold: 10,
-      window: 2,
-      severity: "warning",
-      channel: "Discord",
-      status: "firing",
-      lastTriggered: new Date(Date.now() - 5400000),
-      enabled: true,
-    },
-    {
-      id: "rule_05",
-      name: "Payment Errors",
-      metric: "payment_error_rate",
-      operator: ">",
-      threshold: 2,
-      window: 5,
-      severity: "critical",
-      channel: "PagerDuty",
-      status: "ok",
-      enabled: false,
-    },
-  ];
-}
-
-export function getServiceStatuses(): ServiceStatus[] {
-  return [
-    {
-      id: "svc_01",
-      name: "API Gateway",
-      uptime90d: 99.98,
-      currentStatus: "operational",
-      responseTime: 45,
-      uptimeBars: Array.from({ length: 90 }, (_, i) => (i === 12 || i === 45 ? "degraded" : "up")),
-    },
-    {
-      id: "svc_02",
-      name: "Authentication",
-      uptime90d: 99.91,
-      currentStatus: "degraded",
-      responseTime: 120,
-      uptimeBars: Array.from({ length: 90 }, (_, i) =>
-        i === 88 || i === 89 ? "degraded" : i === 30 ? "down" : "up"
-      ),
-    },
-    {
-      id: "svc_03",
-      name: "Product Catalog",
-      uptime90d: 100,
-      currentStatus: "operational",
-      responseTime: 38,
-      uptimeBars: Array.from({ length: 90 }, () => "up" as const),
-    },
-    {
-      id: "svc_04",
-      name: "Payments",
-      uptime90d: 99.99,
-      currentStatus: "operational",
-      responseTime: 410,
-      uptimeBars: Array.from({ length: 90 }, (_, i) => (i === 60 ? "down" : "up")),
-    },
-    {
-      id: "svc_05",
-      name: "Search",
-      uptime90d: 99.85,
-      currentStatus: "operational",
-      responseTime: 85,
-      uptimeBars: Array.from({ length: 90 }, (_, i) =>
-        [20, 21, 55].includes(i) ? "degraded" : "up"
-      ),
-    },
-  ];
-}
diff --git a/lib/project-access.ts b/lib/project-access.ts
new file mode 100644
index 0000000..b903ae8
--- /dev/null
+++ b/lib/project-access.ts
@@ -0,0 +1,27 @@
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+  return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+/**
+ * Fresh, per-request check that `email` may read `projectId` — queries org
+ * membership straight from the backend rather than trusting a cached list.
+ *
+ * A project's membership can change after a session is issued (a new project
+ * created, a team invite accepted), and NextAuth JWT sessions are not
+ * re-derived on every request — only at sign-in. Caching this list in the
+ * session (as `session.projectIds` used to) meant any project created after
+ * login was invisible to every dashboard read and realtime connection until
+ * the user signed out and back in. This mirrors the same "ask the backend,
+ * not a stale cache" pattern already used by rotate/delete/status-page BFF
+ * routes (`_require_member` on the backend side).
+ */
+export async function verifyProjectAccess(email: string, projectId: string): Promise<boolean> {
+  const res = await fetch(
+    `${API_URL}/v1/internal/access?email=${encodeURIComponent(email)}`,
+    { headers: { "x-internal-token": internalToken() }, cache: "no-store" }
+  );
+  if (!res.ok) return false;
+  const data = (await res.json()) as { projects?: { id: string }[] };
+  return data.projects?.some((p) => p.id === projectId) ?? false;
+}
diff --git a/lib/socket.ts b/lib/socket.ts
index 137dad1..efbdb48 100644
--- a/lib/socket.ts
+++ b/lib/socket.ts
@@ -7,6 +7,9 @@ export interface MetricUpdate {
   errorRate: number;  // 0–100
   p99: number;        // milliseconds
   avg: number;        // milliseconds
+  req2xx?: number;
+  req4xx?: number;
+  req5xx?: number;
   bucket: string | null;
 }
 
diff --git a/lib/types.ts b/lib/types.ts
index 3c50f51..31c287a 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,4 +1,4 @@
-export type TimeRange = "1h" | "6h" | "24h" | "7d";
+export type TimeRange = "live" | "1h" | "6h" | "24h" | "7d";
 
 export interface StatCard {
   label: string;
diff --git a/lib/utils.ts b/lib/utils.ts
index c3e1a44..5cb6497 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -16,6 +16,22 @@ export function formatMs(ms: number): string {
   return `${ms}ms`;
 }
 
+/**
+ * Formats a chart timestamp (ISO 8601 UTC instant) in the viewer's own local
+ * timezone — always includes the date, not just the hour, since any bucket
+ * window can span a day boundary (whenever "now" is within it of midnight),
+ * and an hour-only label can't tell you "09:30" is 13 hours after "20:15"
+ * rather than 13 hours before it.
+ */
+export function formatChartTime(iso: string): string {
+  const d = new Date(iso);
+  const date = d.toLocaleDateString([], { month: "2-digit", day: "2-digit" });
+  // Explicit 24h — the locale default can be 12h with an AM/PM suffix, which
+  // is long enough to make already-tight tick labels run into each other.
+  const time = d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+  return `${date} ${time}`;
+}
+
 export function formatPercent(n: number, decimals = 1): string {
   return `${n.toFixed(decimals)}%`;
 }
diff --git a/proxy.ts b/proxy.ts
index f8439db..c30de4a 100644
--- a/proxy.ts
+++ b/proxy.ts
@@ -15,7 +15,10 @@ export const config = {
     "/endpoints/:path*",
     "/traces/:path*",
     "/alerts/:path*",
-    "/pipelines/:path*",
     "/settings/:path*",
+    // Exact match only — the authenticated status *preview*. Must NOT be a
+    // wildcard: /status/[slug], /status/confirm/[token], and
+    // /status/unsubscribe/[token] are intentionally public (no session).
+    "/status",
   ],
 };
diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts
index cdea171..807a29b 100644
--- a/types/next-auth.d.ts
+++ b/types/next-auth.d.ts
@@ -5,8 +5,6 @@ declare module "next-auth" {
     user: {
       id: string;
     } & DefaultSession["user"];
-    /** Project IDs the signed-in user is authorized to read (org membership scope). */
-    projectIds?: string[];
     /** The project shown by default in the dashboard. */
     defaultProjectId?: string;
   }
@@ -15,7 +13,6 @@ declare module "next-auth" {
 declare module "next-auth/jwt" {
   interface JWT {
     userId?: string;
-    projectIds?: string[];
     defaultProjectId?: string;
   }
 }

From 68e5205e4095200a6c8c9429ed0636a91b7d2905 Mon Sep 17 00:00:00 2001
From: ryzrr <ryzrr.official@gmail.com>
Date: Tue, 21 Jul 2026 23:08:39 +0530
Subject: [PATCH 2/2] feat: public status page with email subscriptions

Adds a per-project shareable status page (/status/[slug]) with service
uptime, incident history, and email subscriptions (confirm/unsubscribe
flows via Resend). Projects can toggle their status page on/off from a
new Settings page, which mints a stable public slug on first enable. The
anomaly worker now emails confirmed subscribers when a new incident fires.
---
 app/(dashboard)/settings/page.tsx             |  77 ++++++
 app/api/projects/[id]/status-page/route.ts    |  30 +++
 app/status/[slug]/page.tsx                    | 134 ++++++++++
 app/status/confirm/[token]/page.tsx           |  31 +++
 app/status/page.tsx                           | 240 ++++-------------
 app/status/unsubscribe/[token]/page.tsx       |  31 +++
 apps/api/api/routes/internal.py               |  69 +++++
 apps/api/api/routes/public_status.py          | 140 ++++++++++
 apps/api/api/schemas.py                       |  29 +++
 apps/api/core/config.py                       |   8 +
 apps/api/core/email.py                        |  67 +++++
 apps/api/main.py                              |   3 +-
 .../versions/007_public_status_page.py        |  36 +++
 .../versions/008_status_subscribers.py        |  42 +++
 apps/api/worker/anomaly.py                    |  30 +++
 components/layout/sidebar.tsx                 |   7 +-
 components/projects/project-switcher.tsx      |  20 +-
 components/providers/project-provider.tsx     |  32 ++-
 components/settings/project-settings-card.tsx | 244 ++++++++++++++++++
 components/status/auto-refresh.tsx            |  16 ++
 components/status/incident-card.tsx           | 123 +++++++++
 components/status/overall-banner.tsx          |  42 +++
 components/status/subscribe-form.tsx          |  67 +++++
 23 files changed, 1324 insertions(+), 194 deletions(-)
 create mode 100644 app/(dashboard)/settings/page.tsx
 create mode 100644 app/api/projects/[id]/status-page/route.ts
 create mode 100644 app/status/[slug]/page.tsx
 create mode 100644 app/status/confirm/[token]/page.tsx
 create mode 100644 app/status/unsubscribe/[token]/page.tsx
 create mode 100644 apps/api/api/routes/public_status.py
 create mode 100644 apps/api/core/email.py
 create mode 100644 apps/api/migrations/versions/007_public_status_page.py
 create mode 100644 apps/api/migrations/versions/008_status_subscribers.py
 create mode 100644 components/settings/project-settings-card.tsx
 create mode 100644 components/status/auto-refresh.tsx
 create mode 100644 components/status/incident-card.tsx
 create mode 100644 components/status/overall-banner.tsx
 create mode 100644 components/status/subscribe-form.tsx

diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
new file mode 100644
index 0000000..1a7310a
--- /dev/null
+++ b/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { signOut, useSession } from "next-auth/react";
+import { LogOut } from "lucide-react";
+import { Topbar } from "@/components/layout/topbar";
+import { Button } from "@/components/ui/button";
+import { useProjects } from "@/components/providers/project-provider";
+import { ProjectSettingsCard } from "@/components/settings/project-settings-card";
+
+function Avatar({ name, image }: { name?: string | null; image?: string | null }) {
+  if (image) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={image} alt={name ?? "User"} className="h-10 w-10 rounded-full" />;
+  }
+  const initials = name
+    ? name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase()
+    : "?";
+  return (
+    <div className="h-10 w-10 rounded-full bg-gradient-to-br from-blue to-blue-hover flex items-center justify-center flex-shrink-0">
+      <span className="text-sm font-bold text-white">{initials}</span>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const { data: session } = useSession();
+  const { projects, loading } = useProjects();
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Topbar breadcrumb={[{ label: "Settings" }]} />
+
+      <main className="max-w-2xl mx-auto w-full px-6 py-8 space-y-8">
+        {/* Account */}
+        <section>
+          <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider mb-3">Account</h2>
+          <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar name={session?.user?.name} image={session?.user?.image} />
+              <div>
+                <p className="text-sm font-medium text-[#F5F5F5]">{session?.user?.name ?? "—"}</p>
+                <p className="text-xs text-[#949494]">{session?.user?.email ?? "—"}</p>
+              </div>
+            </div>
+            <Button variant="ghost" size="sm" onClick={() => signOut({ callbackUrl: "/auth/signin" })}>
+              <LogOut className="h-3 w-3" /> Sign out
+            </Button>
+          </div>
+        </section>
+
+        {/* Projects */}
+        <section>
+          <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider mb-3">Projects</h2>
+          {projects.length > 0 ? (
+            // Once there's something to show, keep showing it — every mutation
+            // (rotate/toggle/delete) triggers a background refresh() that flips
+            // `loading` true, and gating on that here would unmount every card
+            // (losing e.g. the just-rotated-key display) on every single action.
+            <div className="space-y-3">
+              {projects.map((project) => (
+                <ProjectSettingsCard key={project.id} project={project} />
+              ))}
+            </div>
+          ) : loading ? (
+            <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4">
+              <p className="text-xs text-[#808080]">Loading…</p>
+            </div>
+          ) : (
+            <div className="rounded-lg border border-[#1E1E1E] bg-[#111] p-4">
+              <p className="text-xs text-[#808080]">No projects yet.</p>
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/app/api/projects/[id]/status-page/route.ts b/app/api/projects/[id]/status-page/route.ts
new file mode 100644
index 0000000..ac43f58
--- /dev/null
+++ b/app/api/projects/[id]/status-page/route.ts
@@ -0,0 +1,30 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+function internalToken(): string {
+  return process.env.INTERNAL_SERVICE_TOKEN ?? process.env.API_SECRET_KEY ?? "";
+}
+
+export async function PATCH(
+  req: Request,
+  ctx: { params: Promise<{ id: string }> }
+) {
+  const session = await auth();
+  const email = session?.user?.email;
+  if (!email) return NextResponse.json({ error: "unauthenticated" }, { status: 401 });
+
+  const { enabled } = (await req.json()) as { enabled: boolean };
+  const { id } = await ctx.params;
+  const res = await fetch(
+    `${API_URL}/v1/internal/projects/${encodeURIComponent(id)}/status-page`,
+    {
+      method: "PATCH",
+      headers: { "content-type": "application/json", "x-internal-token": internalToken() },
+      body: JSON.stringify({ email, enabled }),
+      cache: "no-store",
+    }
+  );
+  const data = await res.json().catch(() => ({}));
+  return NextResponse.json(data, { status: res.status });
+}
diff --git a/app/status/[slug]/page.tsx b/app/status/[slug]/page.tsx
new file mode 100644
index 0000000..de00649
--- /dev/null
+++ b/app/status/[slug]/page.tsx
@@ -0,0 +1,134 @@
+import { notFound } from "next/navigation";
+import { LiveboardIcon } from "@/components/logo";
+import { UptimeBar } from "@/components/status/uptime-bar";
+import { OverallBanner } from "@/components/status/overall-banner";
+import { IncidentCard } from "@/components/status/incident-card";
+import { SubscribeForm } from "@/components/status/subscribe-form";
+import { AutoRefresh } from "@/components/status/auto-refresh";
+import type { ServiceStatus, Incident } from "@/lib/types";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+interface ApiService {
+  id: string;
+  name: string;
+  uptime90d: number;
+  current_status: ServiceStatus["currentStatus"];
+  response_time: number;
+  uptime_bars: ServiceStatus["uptimeBars"];
+}
+
+interface ApiIncident {
+  id: string;
+  severity: Incident["severity"];
+  title: string;
+  summary: string;
+  endpoint: string;
+  timestamp: string;
+  resolved: boolean;
+}
+
+interface PublicStatus {
+  project_name: string;
+  services: ApiService[];
+  incidents: ApiIncident[];
+}
+
+function toServices(raw: ApiService[]): ServiceStatus[] {
+  return raw.map((s) => ({
+    id: s.id,
+    name: s.name,
+    uptime90d: s.uptime90d,
+    currentStatus: s.current_status,
+    responseTime: s.response_time,
+    uptimeBars: s.uptime_bars,
+  }));
+}
+
+function toIncidents(raw: ApiIncident[]): Incident[] {
+  return raw.map((i) => ({
+    id: i.id,
+    severity: i.severity,
+    title: i.title,
+    summary: i.summary,
+    endpoint: i.endpoint,
+    timestamp: new Date(i.timestamp),
+    resolved: i.resolved,
+  }));
+}
+
+/**
+ * The actual public status page — no session, no ProjectProvider, no
+ * localStorage. Server-rendered per request straight from the FastAPI
+ * public-status endpoint, scoped by `slug` alone, exactly like a real
+ * status page a logged-out visitor (or your customer's customer) can open.
+ */
+export default async function PublicStatusPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+
+  const res = await fetch(`${API_URL}/v1/public/status/${encodeURIComponent(slug)}`, {
+    cache: "no-store",
+  });
+  if (res.status === 404) notFound();
+  if (!res.ok) throw new Error(`status API ${res.status}`);
+
+  const data = (await res.json()) as PublicStatus;
+  const services = toServices(data.services);
+  const incidents = toIncidents(data.incidents);
+  const hasDegraded = services.some((s) => s.currentStatus !== "operational");
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A]">
+      <AutoRefresh intervalMs={30_000} />
+
+      <header className="flex items-center justify-between px-8 h-12 border-b border-[#1E1E1E]">
+        <div className="flex items-center gap-2">
+          <LiveboardIcon size={22} />
+          <span className="text-sm font-bold text-[#F5F5F5] font-display">
+            {data.project_name} Status
+          </span>
+        </div>
+      </header>
+
+      <main className="max-w-3xl mx-auto px-6 py-12 space-y-8">
+        <OverallBanner hasDegraded={hasDegraded} lastChecked={new Date().toLocaleTimeString()} />
+
+        <section>
+          <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider mb-3">
+            Components
+          </h2>
+          <div className="space-y-2">
+            {services.map((service) => (
+              <UptimeBar key={service.id} service={service} />
+            ))}
+            {services.length === 0 && (
+              <p className="text-xs text-[#808080]">No components to report yet.</p>
+            )}
+          </div>
+        </section>
+
+        <section>
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider">
+              Incident History
+            </h2>
+            <span className="text-[10px] text-[#808080]">
+              {incidents.filter((i) => !i.resolved).length} active
+            </span>
+          </div>
+          <div className="space-y-2">
+            {incidents.map((incident) => (
+              <IncidentCard key={incident.id} incident={incident} />
+            ))}
+          </div>
+        </section>
+
+        <SubscribeForm slug={slug} />
+
+        <footer className="text-center text-[10px] text-[#808080] pb-4">
+          Powered by <span className="text-blue">LiveBoard</span> · status.liveboard.dev
+        </footer>
+      </main>
+    </div>
+  );
+}
diff --git a/app/status/confirm/[token]/page.tsx b/app/status/confirm/[token]/page.tsx
new file mode 100644
index 0000000..8f1472a
--- /dev/null
+++ b/app/status/confirm/[token]/page.tsx
@@ -0,0 +1,31 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import { LiveboardIcon } from "@/components/logo";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+export default async function ConfirmSubscriptionPage({
+  params,
+}: {
+  params: Promise<{ token: string }>;
+}) {
+  const { token } = await params;
+  const res = await fetch(
+    `${API_URL}/v1/public/status/subscriptions/${encodeURIComponent(token)}/confirm`,
+    { cache: "no-store" },
+  );
+  const data = (await res.json()) as { ok: boolean; detail: string };
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] flex items-center justify-center px-6">
+      <div className="max-w-sm text-center space-y-4">
+        <LiveboardIcon size={28} />
+        {data.ok ? (
+          <CheckCircle2 className="h-8 w-8 text-green mx-auto" />
+        ) : (
+          <XCircle className="h-8 w-8 text-red mx-auto" />
+        )}
+        <p className={`text-sm ${data.ok ? "text-[#F5F5F5]" : "text-red"}`}>{data.detail}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/status/page.tsx b/app/status/page.tsx
index 805b8a4..40442e8 100644
--- a/app/status/page.tsx
+++ b/app/status/page.tsx
@@ -1,165 +1,37 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import { CheckCircle2, AlertTriangle, XCircle, Mail, ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ExternalLink } from "lucide-react";
 import { LiveboardIcon } from "@/components/logo";
 import { UptimeBar } from "@/components/status/uptime-bar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { OverallBanner } from "@/components/status/overall-banner";
+import { IncidentCard } from "@/components/status/incident-card";
+import { SubscribeForm } from "@/components/status/subscribe-form";
 import { useIncidents, useServices } from "@/hooks/use-data";
-import { timeAgo } from "@/lib/utils";
-import type { Incident } from "@/lib/types";
-
-const OVERALL_STATUS = {
-  operational: {
-    label: "All Systems Operational",
-    color: "text-green",
-    bg: "bg-green/10 border-green/20",
-    icon: CheckCircle2,
-  },
-  degraded: {
-    label: "Degraded Performance",
-    color: "text-yellow",
-    bg: "bg-yellow/10 border-yellow/20",
-    icon: AlertTriangle,
-  },
-  partial_outage: {
-    label: "Partial Outage",
-    color: "text-red",
-    bg: "bg-red/10 border-red/20",
-    icon: XCircle,
-  },
-};
-
-// ─── Incident timeline data ───────────────────────────────────────────────────
-
-type TimelineStep = "investigating" | "identified" | "monitoring" | "resolved";
-
-const STEP_COLORS: Record<TimelineStep, string> = {
-  investigating: "#EF4444",
-  identified: "#F59E0B",
-  monitoring: "#378ADD",
-  resolved: "#22C55E",
-};
-
-const STEP_ORDER: TimelineStep[] = ["investigating", "identified", "monitoring", "resolved"];
-
-function buildTimeline(incident: Incident): { step: TimelineStep; time: Date; note: string; done: boolean }[] {
-  const base = incident.timestamp.getTime();
-  const steps: TimelineStep[] = incident.resolved
-    ? ["investigating", "identified", "monitoring", "resolved"]
-    : ["investigating", "identified"];
-
-  const offsets = [0, 8 * 60000, 22 * 60000, 35 * 60000];
-  const notes: Record<TimelineStep, string> = {
-    investigating: "Incident detected and engineers paged.",
-    identified: `Root cause identified: elevated error rate on ${incident.endpoint}.`,
-    monitoring: "Fix deployed, monitoring for stability.",
-    resolved: "All systems back to normal. Post-mortem scheduled.",
-  };
-
-  return STEP_ORDER.map((step, i) => ({
-    step,
-    time: new Date(base + offsets[i]!),
-    note: notes[step],
-    done: steps.includes(step),
-  }));
-}
-
-// ─── IncidentCard with expandable timeline ────────────────────────────────────
-
-function IncidentCard({ incident }: { incident: Incident }) {
-  const [expanded, setExpanded] = useState(!incident.resolved);
-  const timeline = useMemo(() => buildTimeline(incident), [incident]);
-  const currentStep = incident.resolved ? "resolved" : timeline.filter((t) => t.done).slice(-1)[0]?.step ?? "investigating";
-
-  return (
-    <div className="rounded-lg border border-[#1E1E1E] bg-[#111] overflow-hidden">
-      {/* Header */}
-      <button
-        onClick={() => setExpanded((v) => !v)}
-        className="w-full p-4 text-left hover:bg-[#151515] transition-colors"
-      >
-        <div className="flex items-start justify-between gap-3 mb-1.5">
-          <div className="flex items-center gap-2">
-            <Badge
-              variant={incident.severity === "critical" ? "red" : incident.severity === "warning" ? "yellow" : "blue"}
-              size="sm"
-            >
-              {incident.severity}
-            </Badge>
-            <h3 className="text-sm font-medium text-[#F5F5F5]">{incident.title}</h3>
-          </div>
-          <div className="flex items-center gap-2 flex-shrink-0">
-            <Badge variant={incident.resolved ? "green" : "red"} size="sm">
-              {incident.resolved ? "Resolved" : currentStep}
-            </Badge>
-            <ChevronDown className={cn("h-3.5 w-3.5 text-[#444] transition-transform", expanded && "rotate-180")} />
-          </div>
-        </div>
-        <p className="text-xs text-[#555] leading-relaxed">{incident.summary}</p>
-        <div className="flex items-center gap-3 mt-2">
-          <span className="text-[10px] text-[#333]">{timeAgo(incident.timestamp)}</span>
-          <span className="text-[10px] text-[#333]">·</span>
-          <span className="text-[10px] font-mono text-blue">{incident.endpoint}</span>
-        </div>
-      </button>
-
-      {/* Timeline */}
-      {expanded && (
-        <div className="border-t border-[#161616] px-4 py-3">
-          <p className="text-[10px] text-[#444] uppercase tracking-wider mb-3">Timeline</p>
-          <div className="relative">
-            {/* Vertical connector */}
-            <div className="absolute left-[6px] top-2 bottom-2 w-px bg-[#1E1E1E]" />
-
-            <div className="space-y-3">
-              {timeline.map(({ step, time, note, done }) => (
-                <div key={step} className="flex gap-3 relative">
-                  {/* Step dot */}
-                  <div
-                    className="h-3.5 w-3.5 rounded-full flex-shrink-0 mt-0.5 border-2 transition-colors z-10"
-                    style={{
-                      borderColor: done ? STEP_COLORS[step] : "#1E1E1E",
-                      backgroundColor: done ? `${STEP_COLORS[step]}30` : "#0A0A0A",
-                    }}
-                  />
-                  <div className={cn("flex-1", !done && "opacity-30")}>
-                    <div className="flex items-center gap-2 mb-0.5">
-                      <span
-                        className="text-[10px] font-semibold capitalize"
-                        style={{ color: done ? STEP_COLORS[step] : "#444" }}
-                      >
-                        {step}
-                      </span>
-                      {done && (
-                        <span className="text-[10px] text-[#333] font-mono">{timeAgo(time)}</span>
-                      )}
-                    </div>
-                    <p className="text-[10px] text-[#555] leading-relaxed">{note}</p>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
+import { useProjects } from "@/components/providers/project-provider";
+
+/**
+ * Authenticated preview of *your* project's status page — this is what you,
+ * signed in, see for whichever project is active. It is NOT what a visitor
+ * sees; that's the public, session-free /status/[slug] route. This page just
+ * lets you check the page before/after sharing its public link.
+ */
 export default function StatusPage() {
+  const { activeProject } = useProjects();
   const { data: services } = useServices();
   const { data: incidents } = useIncidents();
-  const [email, setEmail] = useState("");
+  // null until mounted — computing this during the initial render would
+  // differ between the server-rendered pass and the client hydration pass
+  // (a few ms apart) and trip a hydration mismatch.
+  const [lastChecked, setLastChecked] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLastChecked(new Date().toLocaleTimeString());
+    const id = setInterval(() => setLastChecked(new Date().toLocaleTimeString()), 30_000);
+    return () => clearInterval(id);
+  }, []);
 
   const hasDegraded = services.some((s) => s.currentStatus !== "operational");
-  const overallKey: keyof typeof OVERALL_STATUS = hasDegraded ? "degraded" : "operational";
-  const overall = OVERALL_STATUS[overallKey];
-  const StatusIcon = overall.icon;
 
   return (
     <div className="min-h-screen bg-[#0A0A0A]">
@@ -168,45 +40,55 @@ export default function StatusPage() {
         <div className="flex items-center gap-2">
           <LiveboardIcon size={22} />
           <span className="text-sm font-bold text-[#F5F5F5] font-display">
-            Liveboard Status
+            Status preview — {activeProject?.name ?? "—"}
           </span>
         </div>
-        <a href="/overview" className="text-xs text-[#444] hover:text-[#888] transition-colors">
+        <a href="/overview" className="text-xs text-[#808080] hover:text-[#888] transition-colors">
           Back to Dashboard →
         </a>
       </header>
 
       <main className="max-w-3xl mx-auto px-6 py-12 space-y-8">
+        {activeProject?.statusPageEnabled && activeProject.publicSlug ? (
+          <a
+            href={`/status/${activeProject.publicSlug}`}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1.5 text-xs text-blue hover:underline"
+          >
+            View your public status page <ExternalLink className="h-3 w-3" />
+          </a>
+        ) : (
+          <p className="text-xs text-[#949494]">
+            This page isn&apos;t public yet — enable it from the project switcher to get a shareable link.
+          </p>
+        )}
+
         {/* Overall status */}
-        <div className={`rounded-xl border ${overall.bg} p-6 flex items-center gap-4`}>
-          <StatusIcon className={`h-8 w-8 ${overall.color} flex-shrink-0`} />
-          <div>
-            <h1 className={`text-xl font-semibold ${overall.color}`}>{overall.label}</h1>
-            <p className="text-xs text-[#555] mt-0.5">
-              Last checked: {new Date().toLocaleTimeString()} · Updates in real time
-            </p>
-          </div>
-        </div>
+        <OverallBanner hasDegraded={hasDegraded} lastChecked={lastChecked} />
 
         {/* Services */}
         <section>
-          <h2 className="text-xs font-medium text-[#444] uppercase tracking-wider mb-3">
+          <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider mb-3">
             Components
           </h2>
           <div className="space-y-2">
             {services.map((service) => (
               <UptimeBar key={service.id} service={service} />
             ))}
+            {services.length === 0 && (
+              <p className="text-xs text-[#808080]">No traffic recorded yet — components appear here once your API receives requests.</p>
+            )}
           </div>
         </section>
 
         {/* Incident history with timelines */}
         <section>
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-xs font-medium text-[#444] uppercase tracking-wider">
+            <h2 className="text-xs font-medium text-[#808080] uppercase tracking-wider">
               Incident History
             </h2>
-            <span className="text-[10px] text-[#333]">
+            <span className="text-[10px] text-[#808080]">
               {incidents.filter((i) => !i.resolved).length} active
             </span>
           </div>
@@ -218,29 +100,11 @@ export default function StatusPage() {
         </section>
 
         {/* Subscribe */}
-        <section className="rounded-xl border border-[#1E1E1E] bg-[#111] p-6">
-          <div className="flex items-center gap-2 mb-1">
-            <Mail className="h-4 w-4 text-[#555]" />
-            <h2 className="text-sm font-medium text-[#F5F5F5]">Get Incident Alerts</h2>
-          </div>
-          <p className="text-xs text-[#444] mb-4">
-            Subscribe to receive email notifications for incidents and status updates.
-          </p>
-          <div className="flex gap-2">
-            <input
-              type="email"
-              placeholder="your@email.com"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="flex-1 bg-[#0D0D0D] border border-[#2A2A2A] rounded px-3 py-1.5 text-sm text-[#F5F5F5] placeholder-[#333] outline-none focus:border-blue transition-colors"
-            />
-            <Button variant="primary" size="md">
-              Subscribe
-            </Button>
-          </div>
-        </section>
+        {activeProject?.statusPageEnabled && activeProject.publicSlug ? (
+          <SubscribeForm slug={activeProject.publicSlug} />
+        ) : null}
 
-        <footer className="text-center text-[10px] text-[#333] pb-4">
+        <footer className="text-center text-[10px] text-[#808080] pb-4">
           Powered by{" "}
           <span className="text-blue">LiveBoard</span> · status.liveboard.dev
         </footer>
diff --git a/app/status/unsubscribe/[token]/page.tsx b/app/status/unsubscribe/[token]/page.tsx
new file mode 100644
index 0000000..651419f
--- /dev/null
+++ b/app/status/unsubscribe/[token]/page.tsx
@@ -0,0 +1,31 @@
+import { CheckCircle2, XCircle } from "lucide-react";
+import { LiveboardIcon } from "@/components/logo";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+export default async function UnsubscribePage({
+  params,
+}: {
+  params: Promise<{ token: string }>;
+}) {
+  const { token } = await params;
+  const res = await fetch(
+    `${API_URL}/v1/public/status/subscriptions/${encodeURIComponent(token)}/unsubscribe`,
+    { cache: "no-store" },
+  );
+  const data = (await res.json()) as { ok: boolean; detail: string };
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] flex items-center justify-center px-6">
+      <div className="max-w-sm text-center space-y-4">
+        <LiveboardIcon size={28} />
+        {data.ok ? (
+          <CheckCircle2 className="h-8 w-8 text-green mx-auto" />
+        ) : (
+          <XCircle className="h-8 w-8 text-red mx-auto" />
+        )}
+        <p className={`text-sm ${data.ok ? "text-[#F5F5F5]" : "text-red"}`}>{data.detail}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/api/api/routes/internal.py b/apps/api/api/routes/internal.py
index 6afcaaa..861e630 100644
--- a/apps/api/api/routes/internal.py
+++ b/apps/api/api/routes/internal.py
@@ -54,6 +54,8 @@ class ProjectDetail(BaseModel):
     org_id: str
     api_key_masked: str
     created_at: str
+    status_page_enabled: bool
+    public_slug: str | None
 
 
 class ProvisionResponse(BaseModel):
@@ -78,6 +80,16 @@ class RotatedKeyResponse(BaseModel):
     new_api_key: str
 
 
+class StatusPageToggleRequest(BaseModel):
+    email: str
+    enabled: bool
+
+
+class StatusPageSettingsResponse(BaseModel):
+    enabled: bool
+    public_slug: str | None
+
+
 # ─── Helpers ─────────────────────────────────────────────────────────────────
 
 def _slugify(text: str) -> str:
@@ -248,6 +260,7 @@ async def list_projects(
     rows = await db.fetch(
         """
         SELECT p.id, p.name, p.org_id, p.created_at,
+               p.status_page_enabled, p.public_slug,
                (SELECT k.prefix FROM api_keys k
                 WHERE k.project_id = p.id AND k.revoked_at IS NULL
                 ORDER BY k.created_at DESC LIMIT 1) AS prefix
@@ -266,6 +279,8 @@ async def list_projects(
             org_id=str(r["org_id"]),
             api_key_masked=_mask(r["prefix"]),
             created_at=r["created_at"].isoformat() if r["created_at"] else "",
+            status_page_enabled=r["status_page_enabled"],
+            public_slug=r["public_slug"],
         )
         for r in rows
     ]
@@ -316,6 +331,60 @@ async def rotate_key(
     return RotatedKeyResponse(project_id=project_id, new_api_key=raw)
 
 
+async def _generate_public_slug(db: asyncpg.Connection, name: str) -> str:
+    """A `_slugify(name)` base is not unique enough on its own — every new
+    signup defaults to a project named 'My API' (see _create_project below),
+    so append a short random suffix and retry on the rare collision."""
+    base = _slugify(name)
+    for _ in range(5):
+        candidate = f"{base}-{secrets.token_urlsafe(4).lower().rstrip('=-_')}"
+        exists = await db.fetchval("SELECT 1 FROM projects WHERE public_slug = $1", candidate)
+        if not exists:
+            return candidate
+    raise HTTPException(status_code=500, detail="Could not generate a unique status page slug")
+
+
+@router.patch("/projects/{project_id}/status-page", response_model=StatusPageSettingsResponse)
+async def set_status_page(
+    project_id: str,
+    body: StatusPageToggleRequest,
+    db: asyncpg.Connection = Depends(get_db),
+    _: None = Depends(authenticate_internal),
+) -> StatusPageSettingsResponse:
+    """
+    Enable/disable the public status page for a project. Enabling mints a
+    public_slug the first time only — disabling keeps it, so re-enabling
+    restores the same /status/{slug} link.
+    """
+    await _require_member(db, body.email, project_id)
+
+    if body.enabled:
+        row = await db.fetchrow(
+            "SELECT name, public_slug FROM projects WHERE id = $1::uuid", project_id
+        )
+        if row is None:
+            raise HTTPException(status_code=404, detail="Project not found")
+        slug = row["public_slug"] or await _generate_public_slug(db, row["name"])
+        await db.execute(
+            "UPDATE projects SET status_page_enabled = TRUE, public_slug = $2 WHERE id = $1::uuid",
+            project_id,
+            slug,
+        )
+        return StatusPageSettingsResponse(enabled=True, public_slug=slug)
+
+    row = await db.fetchrow(
+        """
+        UPDATE projects SET status_page_enabled = FALSE
+        WHERE id = $1::uuid
+        RETURNING public_slug
+        """,
+        project_id,
+    )
+    if row is None:
+        raise HTTPException(status_code=404, detail="Project not found")
+    return StatusPageSettingsResponse(enabled=False, public_slug=row["public_slug"])
+
+
 class RealtimeTokenRequest(BaseModel):
     project_id: str
 
diff --git a/apps/api/api/routes/public_status.py b/apps/api/api/routes/public_status.py
new file mode 100644
index 0000000..99187d2
--- /dev/null
+++ b/apps/api/api/routes/public_status.py
@@ -0,0 +1,140 @@
+"""
+Public, unauthenticated status-page surface.
+
+Deliberately outside the resolve_project_id / scoped_conn read plane used by
+the rest of api/routes/*.py — there is no signed-in caller here, only a
+project's own public_slug. A project only becomes reachable through this
+router once its owner flips status_page_enabled on (see
+api.routes.internal.set_status_page).
+"""
+from __future__ import annotations
+
+import logging
+import secrets
+from datetime import datetime, timedelta, timezone
+
+import asyncpg
+from fastapi import APIRouter, Depends, HTTPException
+
+from api.deps import get_db
+from api.schemas import (
+    PublicStatusOut,
+    SubscribeRequest,
+    SubscribeResponse,
+    SubscriptionStatusOut,
+)
+from api.routes.query import fetch_incidents, fetch_services
+from core.config import settings
+from core.email import confirmation_email, send
+
+router = APIRouter(prefix="/v1/public", tags=["public-status"])
+logger = logging.getLogger(__name__)
+
+_RESEND_COOLDOWN = timedelta(seconds=60)
+
+
+async def _resolve_public_project(conn: asyncpg.Connection, slug: str) -> asyncpg.Record:
+    row = await conn.fetchrow(
+        "SELECT id, name FROM projects WHERE public_slug = $1 AND status_page_enabled = TRUE",
+        slug,
+    )
+    if row is None:
+        raise HTTPException(status_code=404, detail="Status page not found")
+    return row
+
+
+@router.get("/status/{slug}", response_model=PublicStatusOut)
+async def public_status(
+    slug: str,
+    conn: asyncpg.Connection = Depends(get_db),
+) -> PublicStatusOut:
+    project = await _resolve_public_project(conn, slug)
+    project_id = str(project["id"])
+    services = await fetch_services(conn, project_id)
+    incidents = await fetch_incidents(conn, project_id)
+    return PublicStatusOut(project_name=project["name"], services=services, incidents=incidents)
+
+
+@router.post("/status/{slug}/subscribe", response_model=SubscribeResponse)
+async def subscribe(
+    slug: str,
+    body: SubscribeRequest,
+    conn: asyncpg.Connection = Depends(get_db),
+) -> SubscribeResponse:
+    """
+    Double opt-in: creates/refreshes an unconfirmed row and emails a confirm
+    link. Never reveals whether the address was already subscribed — always
+    returns {ok: true} — so this can't be used to enumerate subscribers.
+    """
+    project = await _resolve_public_project(conn, slug)
+
+    existing = await conn.fetchrow(
+        "SELECT confirmed_at, unsubscribed_at, created_at "
+        "FROM status_subscribers WHERE project_id = $1 AND email = $2",
+        project["id"],
+        body.email,
+    )
+    already_active = bool(existing and existing["confirmed_at"] and not existing["unsubscribed_at"])
+    recently_issued = bool(
+        existing
+        and existing["confirmed_at"] is None
+        and (datetime.now(timezone.utc) - existing["created_at"]) < _RESEND_COOLDOWN
+    )
+    if already_active or recently_issued:
+        return SubscribeResponse(ok=True)
+
+    token = secrets.token_urlsafe(24)
+    await conn.execute(
+        """
+        INSERT INTO status_subscribers (project_id, email, confirm_token)
+        VALUES ($1, $2, $3)
+        ON CONFLICT (project_id, email) DO UPDATE
+            SET confirm_token = $3, confirmed_at = NULL, unsubscribed_at = NULL, created_at = now()
+        """,
+        project["id"],
+        body.email,
+        token,
+    )
+
+    confirm_url = f"{settings.public_app_url}/status/confirm/{token}"
+    subject, html = confirmation_email(confirm_url)
+    ok, detail = await send(body.email, subject, html)
+    if not ok:
+        logger.warning("Confirmation email to subscriber failed: %s", detail)
+    return SubscribeResponse(ok=True)
+
+
+@router.get("/status/subscriptions/{token}/confirm", response_model=SubscriptionStatusOut)
+async def confirm_subscription(
+    token: str,
+    conn: asyncpg.Connection = Depends(get_db),
+) -> SubscriptionStatusOut:
+    row = await conn.fetchrow(
+        """
+        UPDATE status_subscribers SET confirmed_at = now()
+        WHERE confirm_token = $1 AND unsubscribed_at IS NULL
+        RETURNING email
+        """,
+        token,
+    )
+    if row is None:
+        return SubscriptionStatusOut(ok=False, detail="This confirmation link is invalid or expired.")
+    return SubscriptionStatusOut(ok=True, detail=f"Subscribed — you'll get incident alerts at {row['email']}.")
+
+
+@router.get("/status/subscriptions/{token}/unsubscribe", response_model=SubscriptionStatusOut)
+async def unsubscribe(
+    token: str,
+    conn: asyncpg.Connection = Depends(get_db),
+) -> SubscriptionStatusOut:
+    row = await conn.fetchrow(
+        """
+        UPDATE status_subscribers SET unsubscribed_at = now()
+        WHERE confirm_token = $1
+        RETURNING email
+        """,
+        token,
+    )
+    if row is None:
+        return SubscriptionStatusOut(ok=False, detail="This unsubscribe link is invalid.")
+    return SubscriptionStatusOut(ok=True, detail=f"Unsubscribed {row['email']}.")
diff --git a/apps/api/api/schemas.py b/apps/api/api/schemas.py
index 273b446..dd66ecc 100644
--- a/apps/api/api/schemas.py
+++ b/apps/api/api/schemas.py
@@ -219,3 +219,32 @@ class ChannelOut(BaseModel):
 class ChannelTestResponse(BaseModel):
     ok: bool
     detail: str
+
+
+# ─── Public status page ───────────────────────────────────────────────────────
+
+class PublicStatusOut(BaseModel):
+    project_name: str
+    services: list[ServiceStatusOut]
+    incidents: list[IncidentOut]
+
+
+class SubscribeRequest(BaseModel):
+    email: str = Field(..., min_length=3, max_length=254)
+
+    @field_validator("email", mode="after")
+    @classmethod
+    def _basic_shape(cls, v: str) -> str:
+        v = v.strip().lower()
+        if "@" not in v or " " in v or v.startswith("@") or v.endswith("@"):
+            raise ValueError("not a valid email address")
+        return v
+
+
+class SubscribeResponse(BaseModel):
+    ok: bool
+
+
+class SubscriptionStatusOut(BaseModel):
+    ok: bool
+    detail: str
diff --git a/apps/api/core/config.py b/apps/api/core/config.py
index 047aae4..503e66d 100644
--- a/apps/api/core/config.py
+++ b/apps/api/core/config.py
@@ -38,6 +38,14 @@ class Settings(BaseSettings):
     # Max events accepted per project per minute (fixed window). 0 = unlimited.
     ingest_rate_limit_per_min: int = 120_000
 
+    # ── Email (public status page subscriptions) ─────────────────────────────
+    # Resend API key for confirmation + incident-alert emails. Empty in dev —
+    # core.email.send() logs and no-ops instead of raising when unset.
+    resend_api_key: SecretStr = SecretStr("")
+    email_from: str = "Liveboard Status <status@liveboard.dev>"
+    # Public origin used to build confirm/unsubscribe links in emails.
+    public_app_url: str = "http://localhost:3000"
+
     # ── Environment ───────────────────────────────────────────────────────────
     environment: str = "development"
 
diff --git a/apps/api/core/email.py b/apps/api/core/email.py
new file mode 100644
index 0000000..7c78ae6
--- /dev/null
+++ b/apps/api/core/email.py
@@ -0,0 +1,67 @@
+"""
+Status-page subscriber email — confirmation + incident-alert messages, sent
+via the Resend HTTP API (no SDK, same style as core/notify.deliver).
+
+Returns (ok, detail) and never raises — a delivery failure must not crash the
+subscribe endpoint or the anomaly evaluation loop.
+"""
+from __future__ import annotations
+
+import logging
+
+import httpx
+
+from core.config import settings
+
+logger = logging.getLogger(__name__)
+
+_TIMEOUT = 8.0
+_RESEND_URL = "https://api.resend.com/emails"
+
+
+async def send(to: str, subject: str, html: str) -> tuple[bool, str]:
+    api_key = settings.resend_api_key.get_secret_value()
+    if not api_key:
+        logger.warning("RESEND_API_KEY not set — skipping email to %s (%s)", to, subject)
+        return False, "email not configured"
+
+    try:
+        async with httpx.AsyncClient(timeout=_TIMEOUT) as client:
+            r = await client.post(
+                _RESEND_URL,
+                headers={"Authorization": f"Bearer {api_key}"},
+                json={
+                    "from": settings.email_from,
+                    "to": [to],
+                    "subject": subject,
+                    "html": html,
+                },
+            )
+        ok = 200 <= r.status_code < 300
+        if not ok:
+            logger.warning("Email to %s failed: HTTP %s", to, r.status_code)
+        return ok, f"HTTP {r.status_code}"
+    except Exception as exc:  # network / timeout
+        logger.warning("Email to %s errored: %s", to, exc)
+        return False, str(exc)[:160]
+
+
+def confirmation_email(confirm_url: str) -> tuple[str, str]:
+    subject = "Confirm your Liveboard status alerts"
+    html = (
+        "<p>Click below to confirm you'd like incident alerts for this status page.</p>"
+        f'<p><a href="{confirm_url}">Confirm subscription</a></p>'
+        "<p style=\"color:#888;font-size:12px\">If you didn't request this, ignore this email.</p>"
+    )
+    return subject, html
+
+
+def incident_email(title: str, summary: str, status_url: str, unsubscribe_url: str) -> tuple[str, str]:
+    subject = f"Incident: {title}"
+    html = (
+        f"<p><strong>{title}</strong></p>"
+        f"<p>{summary}</p>"
+        f'<p><a href="{status_url}">View status page</a></p>'
+        f'<p style="color:#888;font-size:12px"><a href="{unsubscribe_url}">Unsubscribe</a></p>'
+    )
+    return subject, html
diff --git a/apps/api/main.py b/apps/api/main.py
index 44faa4e..e87f954 100644
--- a/apps/api/main.py
+++ b/apps/api/main.py
@@ -8,7 +8,7 @@
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
-from api.routes import alerts, ingest, internal, projects, query, spans
+from api.routes import alerts, ingest, internal, projects, public_status, query, spans
 from core.config import settings
 from core.database import close_pool, get_pool
 from core.redis_client import close_redis
@@ -70,6 +70,7 @@ async def lifespan(app: FastAPI):
 _fastapi.include_router(query.router)
 _fastapi.include_router(alerts.router)
 _fastapi.include_router(spans.router)
+_fastapi.include_router(public_status.router)
 _fastapi.include_router(sse_router)
 
 
diff --git a/apps/api/migrations/versions/007_public_status_page.py b/apps/api/migrations/versions/007_public_status_page.py
new file mode 100644
index 0000000..3204d55
--- /dev/null
+++ b/apps/api/migrations/versions/007_public_status_page.py
@@ -0,0 +1,36 @@
+"""Public per-project status page (opt-in)
+
+Revision ID: 007
+Revises: 006
+Create Date: 2026-07-20
+
+Lets a project owner publish a logged-out-visitable status page at
+/status/{public_slug}, scoped to exactly that project. Off by default —
+`status_page_enabled` must be flipped on (see /v1/internal/projects/{id}/status-page)
+before the public route will serve anything for a project.
+"""
+
+from alembic import op
+
+revision = "007"
+down_revision = "006"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute("ALTER TABLE projects ADD COLUMN IF NOT EXISTS public_slug TEXT;")
+    op.execute(
+        "ALTER TABLE projects ADD COLUMN IF NOT EXISTS status_page_enabled "
+        "BOOLEAN NOT NULL DEFAULT FALSE;"
+    )
+    op.execute(
+        "CREATE UNIQUE INDEX IF NOT EXISTS idx_projects_public_slug "
+        "ON projects(public_slug) WHERE public_slug IS NOT NULL;"
+    )
+
+
+def downgrade() -> None:
+    op.execute("DROP INDEX IF EXISTS idx_projects_public_slug;")
+    op.execute("ALTER TABLE projects DROP COLUMN IF EXISTS status_page_enabled;")
+    op.execute("ALTER TABLE projects DROP COLUMN IF EXISTS public_slug;")
diff --git a/apps/api/migrations/versions/008_status_subscribers.py b/apps/api/migrations/versions/008_status_subscribers.py
new file mode 100644
index 0000000..1f2a092
--- /dev/null
+++ b/apps/api/migrations/versions/008_status_subscribers.py
@@ -0,0 +1,42 @@
+"""Status page incident-alert subscribers (double opt-in by email)
+
+Revision ID: 008
+Revises: 007
+Create Date: 2026-07-20
+
+Backs the public status page's "Get Incident Alerts" form. A row is created
+on subscribe with `confirmed_at = NULL`; the anomaly worker only emails rows
+where `confirmed_at IS NOT NULL AND unsubscribed_at IS NULL`, so an address is
+never emailed until it's clicked its confirmation link.
+"""
+
+from alembic import op
+
+revision = "008"
+down_revision = "007"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute("""
+        CREATE TABLE IF NOT EXISTS status_subscribers (
+            id              UUID        PRIMARY KEY DEFAULT gen_random_uuid(),
+            project_id      UUID        NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+            email           TEXT        NOT NULL,
+            confirm_token   TEXT        UNIQUE NOT NULL,
+            confirmed_at    TIMESTAMPTZ,
+            unsubscribed_at TIMESTAMPTZ,
+            created_at      TIMESTAMPTZ DEFAULT now(),
+            UNIQUE (project_id, email)
+        );
+    """)
+    op.execute(
+        "CREATE INDEX IF NOT EXISTS idx_status_subscribers_active "
+        "ON status_subscribers(project_id) "
+        "WHERE confirmed_at IS NOT NULL AND unsubscribed_at IS NULL;"
+    )
+
+
+def downgrade() -> None:
+    op.execute("DROP TABLE IF EXISTS status_subscribers;")
diff --git a/apps/api/worker/anomaly.py b/apps/api/worker/anomaly.py
index 1117ab6..dda0b85 100644
--- a/apps/api/worker/anomaly.py
+++ b/apps/api/worker/anomaly.py
@@ -21,6 +21,7 @@
 
 from core.config import settings
 from core.database import get_pool
+from core.email import incident_email, send as send_email
 from core.redis_client import get_redis
 
 logger = logging.getLogger(__name__)
@@ -240,6 +241,35 @@ async def _handle_anomaly(
     await redis.publish(f"incidents:{project_id}", json.dumps(payload))
     logger.info("Incident created id=%s project=%s", row["id"], project_id)
 
+    await _notify_subscribers(conn, project_id, title, summary)
+
+
+async def _notify_subscribers(conn, project_id: str, title: str, summary: str) -> None:
+    """
+    Email confirmed, active status-page subscribers about a new incident.
+    Best-effort — a delivery failure must not break the anomaly loop, same as
+    the alert-channel worker's notify.deliver.
+    """
+    rows = await conn.fetch(
+        """
+        SELECT s.email, s.confirm_token, p.public_slug
+        FROM status_subscribers s
+        JOIN projects p ON p.id = s.project_id
+        WHERE s.project_id = $1 AND s.confirmed_at IS NOT NULL AND s.unsubscribed_at IS NULL
+        """,
+        project_id,
+    )
+    if not rows or not rows[0]["public_slug"]:
+        return
+
+    status_url = f"{settings.public_app_url}/status/{rows[0]['public_slug']}"
+    for row in rows:
+        unsubscribe_url = f"{settings.public_app_url}/status/unsubscribe/{row['confirm_token']}"
+        subject, html = incident_email(title, summary, status_url, unsubscribe_url)
+        ok, detail = await send_email(row["email"], subject, html)
+        if not ok:
+            logger.warning("Incident email to %s failed: %s", row["email"], detail)
+
 
 # ─── Cerebras summariser ─────────────────────────────────────────────────────
 
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 53c4372..fbd4ee3 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -72,7 +72,12 @@ export function Sidebar() {
       <div className="px-2 py-3 border-t border-[#1E1E1E] space-y-0.5">
         <Link
           href="/settings"
-          className="flex items-center gap-2.5 px-2.5 py-1.5 rounded text-[#888888] hover:text-[#F5F5F5] hover:bg-[#161616] transition-colors border border-transparent"
+          className={cn(
+            "flex items-center gap-2.5 px-2.5 py-1.5 rounded transition-colors duration-100 border",
+            pathname === "/settings" || pathname.startsWith("/settings/")
+              ? "bg-blue-dim text-blue border-blue-border"
+              : "text-[#888888] hover:text-[#F5F5F5] hover:bg-[#161616] border-transparent"
+          )}
         >
           <Settings className="h-3.5 w-3.5" />
           <span className="text-xs font-medium">Settings</span>
diff --git a/components/projects/project-switcher.tsx b/components/projects/project-switcher.tsx
index da9626f..938877e 100644
--- a/components/projects/project-switcher.tsx
+++ b/components/projects/project-switcher.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronDown, Plus } from "lucide-react";
+import { Check, ChevronDown, Plus, Settings } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import { useProjects, type Project } from "@/components/providers/project-provider";
 import { CreateProjectDialog } from "@/components/projects/create-project-dialog";
@@ -44,7 +45,7 @@ export function ProjectSwitcher() {
                 {activeProject?.name ?? "Select project"}
               </span>
             </div>
-            <ChevronDown className="h-3 w-3 text-[#555] group-hover:text-[#888] transition-colors flex-shrink-0" />
+            <ChevronDown className="h-3 w-3 text-[#949494] group-hover:text-[#888] transition-colors flex-shrink-0" />
           </button>
         </DropdownMenu.Trigger>
 
@@ -55,7 +56,7 @@ export function ProjectSwitcher() {
             align="start"
             sideOffset={4}
           >
-            <p className="px-2 py-1 text-[10px] text-[#444] font-medium uppercase tracking-wider">
+            <p className="px-2 py-1 text-[10px] text-[#808080] font-medium uppercase tracking-wider">
               Projects
             </p>
 
@@ -75,6 +76,19 @@ export function ProjectSwitcher() {
 
             <DropdownMenu.Separator className="my-1 h-px bg-[#1E1E1E]" />
 
+            {activeProject && (
+              <DropdownMenu.Item asChild>
+                <Link
+                  href="/settings"
+                  onClick={() => setDropdownOpen(false)}
+                  className="flex items-center gap-2 px-2 py-1.5 rounded text-xs text-[#888] hover:text-[#F5F5F5] hover:bg-[#1A1A1A] outline-none cursor-pointer transition-colors"
+                >
+                  <Settings className="h-3 w-3" />
+                  Project settings
+                </Link>
+              </DropdownMenu.Item>
+            )}
+
             <DropdownMenu.Item
               onSelect={handleCreateClick}
               className="flex items-center gap-2 px-2 py-1.5 rounded text-xs text-[#888] hover:text-[#F5F5F5] hover:bg-[#1A1A1A] outline-none cursor-pointer transition-colors"
diff --git a/components/providers/project-provider.tsx b/components/providers/project-provider.tsx
index 5180cc7..eee3a0b 100644
--- a/components/providers/project-provider.tsx
+++ b/components/providers/project-provider.tsx
@@ -17,6 +17,8 @@ export interface Project {
   /** Masked display-only key hint: lb_live_abcd•••• */
   apiKeyMasked: string;
   createdAt: string;
+  statusPageEnabled: boolean;
+  publicSlug: string | null;
 }
 
 export interface CreateProjectResult {
@@ -33,6 +35,7 @@ interface ProjectContextValue {
   createProject: (name: string) => Promise<CreateProjectResult>;
   deleteProject: (id: string) => Promise<void>;
   rotateKey: (id: string) => Promise<string>;
+  setStatusPageEnabled: (id: string, enabled: boolean) => Promise<{ enabled: boolean; publicSlug: string | null }>;
   refresh: () => Promise<void>;
 }
 
@@ -43,10 +46,19 @@ interface ProjectDetailDTO {
   org_id: string;
   api_key_masked: string;
   created_at: string;
+  status_page_enabled: boolean;
+  public_slug: string | null;
 }
 
 function fromDTO(d: ProjectDetailDTO): Project {
-  return { id: d.id, name: d.name, apiKeyMasked: d.api_key_masked, createdAt: d.created_at };
+  return {
+    id: d.id,
+    name: d.name,
+    apiKeyMasked: d.api_key_masked,
+    createdAt: d.created_at,
+    statusPageEnabled: d.status_page_enabled,
+    publicSlug: d.public_slug,
+  };
 }
 
 function maskRaw(raw: string): string {
@@ -131,6 +143,8 @@ export function ProjectProvider({ children }: { children: React.ReactNode }) {
         name: data.project.name,
         apiKeyMasked: maskRaw(data.new_api_key),
         createdAt: new Date().toISOString(),
+        statusPageEnabled: false,
+        publicSlug: null,
       };
       return { project, rawApiKey: data.new_api_key };
     },
@@ -155,6 +169,21 @@ export function ProjectProvider({ children }: { children: React.ReactNode }) {
     return data.new_api_key;
   }, [refresh]);
 
+  const setStatusPageEnabled = useCallback(
+    async (id: string, enabled: boolean): Promise<{ enabled: boolean; publicSlug: string | null }> => {
+      const res = await fetch(`/api/projects/${id}/status-page`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ enabled }),
+      });
+      if (!res.ok) throw new Error("Failed to update status page setting");
+      const data = (await res.json()) as { enabled: boolean; public_slug: string | null };
+      await refresh();
+      return { enabled: data.enabled, publicSlug: data.public_slug };
+    },
+    [refresh]
+  );
+
   const activeProject =
     projects.find((p) => p.id === activeProjectId) ?? projects[0] ?? null;
 
@@ -168,6 +197,7 @@ export function ProjectProvider({ children }: { children: React.ReactNode }) {
         createProject,
         deleteProject,
         rotateKey,
+        setStatusPageEnabled,
         refresh,
       }}
     >
diff --git a/components/settings/project-settings-card.tsx b/components/settings/project-settings-card.tsx
new file mode 100644
index 0000000..cc2ba81
--- /dev/null
+++ b/components/settings/project-settings-card.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Copy, ExternalLink, RefreshCw, Trash2 } from "lucide-react";
+import { useProjects, type Project } from "@/components/providers/project-provider";
+import { Button } from "@/components/ui/button";
+import { cn, timeAgo } from "@/lib/utils";
+
+interface Props {
+  project: Project;
+}
+
+/**
+ * One project's real settings: API key + rotate, public status page toggle,
+ * and a destructive delete — all backed by the existing ProjectProvider
+ * actions (rotateKey/setStatusPageEnabled/deleteProject), which were already
+ * fully wired to the backend but had no UI caller anywhere in the app.
+ */
+export function ProjectSettingsCard({ project }: Props) {
+  const { rotateKey, deleteProject, setStatusPageEnabled } = useProjects();
+
+  const [rotateConfirm, setRotateConfirm] = useState(false);
+  const [rotating, setRotating] = useState(false);
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [copiedKey, setCopiedKey] = useState(false);
+
+  const [statusSaving, setStatusSaving] = useState(false);
+  const [statusError, setStatusError] = useState("");
+  const [copiedLink, setCopiedLink] = useState(false);
+
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleteConfirmText, setDeleteConfirmText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState("");
+
+  async function handleRotate() {
+    setRotating(true);
+    try {
+      const raw = await rotateKey(project.id);
+      setNewKey(raw);
+      setRotateConfirm(false);
+    } catch {
+      // leave rotateConfirm open so the user can retry
+    } finally {
+      setRotating(false);
+    }
+  }
+
+  function copyNewKey() {
+    if (!newKey) return;
+    navigator.clipboard.writeText(newKey).then(() => {
+      setCopiedKey(true);
+      setTimeout(() => setCopiedKey(false), 2000);
+    });
+  }
+
+  async function handleToggleStatusPage() {
+    setStatusSaving(true);
+    setStatusError("");
+    try {
+      await setStatusPageEnabled(project.id, !project.statusPageEnabled);
+    } catch {
+      setStatusError("Couldn't update the status page. Please try again.");
+    } finally {
+      setStatusSaving(false);
+    }
+  }
+
+  const publicUrl = project.publicSlug
+    ? `${typeof window !== "undefined" ? window.location.origin : ""}/status/${project.publicSlug}`
+    : null;
+
+  function copyLink() {
+    if (!publicUrl) return;
+    navigator.clipboard.writeText(publicUrl).then(() => {
+      setCopiedLink(true);
+      setTimeout(() => setCopiedLink(false), 2000);
+    });
+  }
+
+  async function handleDelete() {
+    setDeleting(true);
+    setDeleteError("");
+    try {
+      await deleteProject(project.id);
+      // success: this project disappears from the list and the card unmounts
+    } catch {
+      setDeleteError("Couldn't delete the project. Please try again.");
+      setDeleting(false);
+    }
+  }
+
+  return (
+    <div className="rounded-lg border border-[#1E1E1E] bg-[#111] overflow-hidden">
+      <div className="px-4 py-3 border-b border-[#1E1E1E]">
+        <p className="text-sm font-medium text-[#F5F5F5]">{project.name}</p>
+        <p className="text-[10px] text-[#808080]">Created {timeAgo(new Date(project.createdAt))}</p>
+      </div>
+
+      <div className="p-4 space-y-4">
+        {/* API key */}
+        <div>
+          <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-1.5">API key</p>
+          {newKey ? (
+            <div className="rounded border border-green/20 bg-green/5 p-3 space-y-2">
+              <p className="text-[10px] text-green">New key generated — copy it now, it won&apos;t be shown again.</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 text-xs font-mono text-[#F5F5F5] break-all">{newKey}</code>
+                <button
+                  onClick={copyNewKey}
+                  className="flex-shrink-0 p-1.5 rounded border border-[#2A2A2A] hover:bg-[#1A1A1A] text-[#949494] hover:text-[#888] transition-colors"
+                  title="Copy key"
+                >
+                  {copiedKey ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <code className="flex-1 bg-[#0D0D0D] border border-[#2A2A2A] rounded px-2.5 py-1.5 text-xs text-[#949494] font-mono">
+                {project.apiKeyMasked}
+              </code>
+              {rotateConfirm ? (
+                <>
+                  <Button variant="primary" size="sm" onClick={handleRotate} disabled={rotating}>
+                    {rotating ? "Rotating…" : "Confirm rotate"}
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => setRotateConfirm(false)} disabled={rotating}>
+                    Cancel
+                  </Button>
+                </>
+              ) : (
+                <Button variant="ghost" size="sm" onClick={() => setRotateConfirm(true)}>
+                  <RefreshCw className="h-3 w-3" /> Rotate
+                </Button>
+              )}
+            </div>
+          )}
+          {rotateConfirm && !newKey && (
+            <p className="text-[10px] text-yellow mt-1.5">
+              This immediately invalidates the current key — anything using it stops working until updated.
+            </p>
+          )}
+        </div>
+
+        {/* Public status page */}
+        <div className="rounded-lg border border-[#1E1E1E] bg-[#0D0D0D] p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-[#F5F5F5] font-medium">Public status page</p>
+              <p className="text-[10px] text-[#808080] mt-0.5">
+                Anyone with the link can view it — no account needed.
+              </p>
+            </div>
+            <button
+              onClick={handleToggleStatusPage}
+              disabled={statusSaving}
+              className={cn(
+                "h-4 w-7 rounded-full transition-colors relative flex items-center flex-shrink-0",
+                project.statusPageEnabled ? "bg-blue" : "bg-[#2A2A2A]"
+              )}
+            >
+              <span
+                className={cn(
+                  "h-3 w-3 rounded-full bg-white absolute transition-all",
+                  project.statusPageEnabled ? "left-[14px]" : "left-[2px]"
+                )}
+              />
+            </button>
+          </div>
+
+          {project.statusPageEnabled && publicUrl && (
+            <div className="flex items-center gap-2 pt-1">
+              <input
+                readOnly
+                value={publicUrl}
+                className="flex-1 bg-[#161616] border border-[#2A2A2A] rounded px-2.5 py-1.5 text-xs text-[#888] font-mono outline-none"
+              />
+              <button
+                onClick={copyLink}
+                className="flex-shrink-0 p-2 rounded border border-[#2A2A2A] hover:bg-[#1A1A1A] text-[#949494] hover:text-[#888] transition-colors"
+                title="Copy link"
+              >
+                {copiedLink ? <Check className="h-3.5 w-3.5 text-green-500" /> : <Copy className="h-3.5 w-3.5" />}
+              </button>
+              <a
+                href={publicUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="flex-shrink-0 p-2 rounded border border-[#2A2A2A] hover:bg-[#1A1A1A] text-[#949494] hover:text-[#888] transition-colors"
+                title="Open"
+              >
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </div>
+          )}
+          {statusError && <p className="text-[10px] text-red">{statusError}</p>}
+        </div>
+
+        {/* Danger zone */}
+        <div className="rounded-lg border border-red/20 bg-red-dim p-3 space-y-2">
+          <p className="text-xs text-red font-medium">Danger zone</p>
+          {!deleteOpen ? (
+            <Button variant="danger" size="sm" onClick={() => setDeleteOpen(true)}>
+              <Trash2 className="h-3 w-3" /> Delete project
+            </Button>
+          ) : (
+            <div className="space-y-2">
+              <p className="text-[10px] text-[#949494]">
+                This permanently deletes <span className="text-[#F5F5F5] font-medium">{project.name}</span> and
+                all its events, traces, alert rules, and API keys. Type the project name to confirm.
+              </p>
+              <input
+                value={deleteConfirmText}
+                onChange={(e) => setDeleteConfirmText(e.target.value)}
+                placeholder={project.name}
+                className="w-full bg-[#0D0D0D] border border-red/30 rounded px-2.5 py-1.5 text-xs text-[#F5F5F5] placeholder-[#555] outline-none focus:border-red/60 transition-colors"
+              />
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={handleDelete}
+                  disabled={deleteConfirmText !== project.name || deleting}
+                >
+                  {deleting ? "Deleting…" : "Delete permanently"}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => { setDeleteOpen(false); setDeleteConfirmText(""); }}
+                  disabled={deleting}
+                >
+                  Cancel
+                </Button>
+              </div>
+              {deleteError && <p className="text-[10px] text-red">{deleteError}</p>}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/status/auto-refresh.tsx b/components/status/auto-refresh.tsx
new file mode 100644
index 0000000..9dd7088
--- /dev/null
+++ b/components/status/auto-refresh.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+/** Periodically re-runs the current route's Server Component with fresh data
+ * (no client-side fetch, no session) — backs the "updates in real time" claim
+ * on the public status page. */
+export function AutoRefresh({ intervalMs = 30_000 }: { intervalMs?: number }) {
+  const router = useRouter();
+  useEffect(() => {
+    const id = setInterval(() => router.refresh(), intervalMs);
+    return () => clearInterval(id);
+  }, [router, intervalMs]);
+  return null;
+}
diff --git a/components/status/incident-card.tsx b/components/status/incident-card.tsx
new file mode 100644
index 0000000..2622928
--- /dev/null
+++ b/components/status/incident-card.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { ChevronDown } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn, timeAgo } from "@/lib/utils";
+import type { Incident } from "@/lib/types";
+
+type TimelineStep = "investigating" | "identified" | "monitoring" | "resolved";
+
+const STEP_COLORS: Record<TimelineStep, string> = {
+  investigating: "#EF4444",
+  identified: "#F59E0B",
+  monitoring: "#378ADD",
+  resolved: "#22C55E",
+};
+
+const STEP_ORDER: TimelineStep[] = ["investigating", "identified", "monitoring", "resolved"];
+
+function buildTimeline(incident: Incident): { step: TimelineStep; time: Date; note: string; done: boolean }[] {
+  const base = incident.timestamp.getTime();
+  const steps: TimelineStep[] = incident.resolved
+    ? ["investigating", "identified", "monitoring", "resolved"]
+    : ["investigating", "identified"];
+
+  const offsets = [0, 8 * 60000, 22 * 60000, 35 * 60000];
+  const notes: Record<TimelineStep, string> = {
+    investigating: "Incident detected and engineers paged.",
+    identified: `Root cause identified: elevated error rate on ${incident.endpoint}.`,
+    monitoring: "Fix deployed, monitoring for stability.",
+    resolved: "All systems back to normal. Post-mortem scheduled.",
+  };
+
+  return STEP_ORDER.map((step, i) => ({
+    step,
+    time: new Date(base + offsets[i]!),
+    note: notes[step],
+    done: steps.includes(step),
+  }));
+}
+
+/** Incident card with an expandable status timeline. Shared by the authed
+ * status preview and the public /status/[slug] page — no hooks beyond local
+ * expand/collapse state, so it renders the same either side of auth. */
+export function IncidentCard({ incident }: { incident: Incident }) {
+  const [expanded, setExpanded] = useState(!incident.resolved);
+  const timeline = useMemo(() => buildTimeline(incident), [incident]);
+  const currentStep = incident.resolved ? "resolved" : timeline.filter((t) => t.done).slice(-1)[0]?.step ?? "investigating";
+
+  return (
+    <div className="rounded-lg border border-[#1E1E1E] bg-[#111] overflow-hidden">
+      {/* Header */}
+      <button
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full p-4 text-left hover:bg-[#151515] transition-colors"
+      >
+        <div className="flex items-start justify-between gap-3 mb-1.5">
+          <div className="flex items-center gap-2">
+            <Badge
+              variant={incident.severity === "critical" ? "red" : incident.severity === "warning" ? "yellow" : "blue"}
+              size="sm"
+            >
+              {incident.severity}
+            </Badge>
+            <h3 className="text-sm font-medium text-[#F5F5F5]">{incident.title}</h3>
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            <Badge variant={incident.resolved ? "green" : "red"} size="sm">
+              {incident.resolved ? "Resolved" : currentStep}
+            </Badge>
+            <ChevronDown className={cn("h-3.5 w-3.5 text-[#808080] transition-transform", expanded && "rotate-180")} />
+          </div>
+        </div>
+        <p className="text-xs text-[#949494] leading-relaxed">{incident.summary}</p>
+        <div className="flex items-center gap-3 mt-2">
+          <span className="text-[10px] text-[#808080]">{timeAgo(incident.timestamp)}</span>
+          <span className="text-[10px] text-[#808080]">·</span>
+          <span className="text-[10px] font-mono text-blue">{incident.endpoint}</span>
+        </div>
+      </button>
+
+      {/* Timeline */}
+      {expanded && (
+        <div className="border-t border-[#161616] px-4 py-3">
+          <p className="text-[10px] text-[#808080] uppercase tracking-wider mb-3">Timeline</p>
+          <div className="relative">
+            {/* Vertical connector */}
+            <div className="absolute left-[6px] top-2 bottom-2 w-px bg-[#1E1E1E]" />
+
+            <div className="space-y-3">
+              {timeline.map(({ step, time, note, done }) => (
+                <div key={step} className="flex gap-3 relative">
+                  {/* Step dot */}
+                  <div
+                    className="h-3.5 w-3.5 rounded-full flex-shrink-0 mt-0.5 border-2 transition-colors z-10"
+                    style={{
+                      borderColor: done ? STEP_COLORS[step] : "#1E1E1E",
+                      backgroundColor: done ? `${STEP_COLORS[step]}30` : "#0A0A0A",
+                    }}
+                  />
+                  <div className={cn("flex-1", !done && "opacity-30")}>
+                    <div className="flex items-center gap-2 mb-0.5">
+                      <span
+                        className="text-[10px] font-semibold capitalize"
+                        style={{ color: done ? STEP_COLORS[step] : "#808080" }}
+                      >
+                        {step}
+                      </span>
+                      {done && (
+                        <span className="text-[10px] text-[#808080] font-mono">{timeAgo(time)}</span>
+                      )}
+                    </div>
+                    <p className="text-[10px] text-[#949494] leading-relaxed">{note}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/status/overall-banner.tsx b/components/status/overall-banner.tsx
new file mode 100644
index 0000000..6e1299c
--- /dev/null
+++ b/components/status/overall-banner.tsx
@@ -0,0 +1,42 @@
+import { CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
+
+const OVERALL_STATUS = {
+  operational: {
+    label: "All Systems Operational",
+    color: "text-green",
+    bg: "bg-green/10 border-green/20",
+    icon: CheckCircle2,
+  },
+  degraded: {
+    label: "Degraded Performance",
+    color: "text-yellow",
+    bg: "bg-yellow/10 border-yellow/20",
+    icon: AlertTriangle,
+  },
+  partial_outage: {
+    label: "Partial Outage",
+    color: "text-red",
+    bg: "bg-red/10 border-red/20",
+    icon: XCircle,
+  },
+};
+
+/** Top status banner — shared by the authed status preview and the public
+ * /status/[slug] page. Server-renderable: no hooks, no client state. */
+export function OverallBanner({ hasDegraded, lastChecked }: { hasDegraded: boolean; lastChecked: string | null }) {
+  const key: keyof typeof OVERALL_STATUS = hasDegraded ? "degraded" : "operational";
+  const overall = OVERALL_STATUS[key];
+  const StatusIcon = overall.icon;
+
+  return (
+    <div className={`rounded-xl border ${overall.bg} p-6 flex items-center gap-4`}>
+      <StatusIcon className={`h-8 w-8 ${overall.color} flex-shrink-0`} />
+      <div>
+        <h1 className={`text-xl font-semibold ${overall.color}`}>{overall.label}</h1>
+        <p className="text-xs text-[#949494] mt-0.5">
+          {lastChecked ? `Last checked: ${lastChecked} · ` : ""}Updates in real time
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/status/subscribe-form.tsx b/components/status/subscribe-form.tsx
new file mode 100644
index 0000000..df547d7
--- /dev/null
+++ b/components/status/subscribe-form.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { Mail } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+/**
+ * Public, unauthenticated subscribe form — posts straight to the FastAPI
+ * public-status endpoint (CORS-allowed for this origin) rather than the
+ * session-gated BFF, since a status-page visitor never has a session.
+ * Shared by the public /status/[slug] page and the owner's authed preview.
+ */
+export function SubscribeForm({ slug }: { slug: string }) {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<"idle" | "sending" | "sent" | "error">("idle");
+
+  async function handleSubscribe() {
+    if (!email.trim()) return;
+    setState("sending");
+    try {
+      const res = await fetch(`${API_URL}/v1/public/status/${encodeURIComponent(slug)}/subscribe`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ email: email.trim() }),
+      });
+      if (!res.ok) throw new Error(String(res.status));
+      setState("sent");
+    } catch {
+      setState("error");
+    }
+  }
+
+  return (
+    <section className="rounded-xl border border-[#1E1E1E] bg-[#111] p-6">
+      <div className="flex items-center gap-2 mb-1">
+        <Mail className="h-4 w-4 text-[#949494]" />
+        <h2 className="text-sm font-medium text-[#F5F5F5]">Get Incident Alerts</h2>
+      </div>
+      <p className="text-xs text-[#808080] mb-4">
+        Subscribe to receive email notifications for incidents and status updates.
+      </p>
+
+      {state === "sent" ? (
+        <p className="text-xs text-green">Check your email to confirm the subscription.</p>
+      ) : (
+        <div className="flex gap-2">
+          <input
+            type="email"
+            placeholder="your@email.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            disabled={state === "sending"}
+            className="flex-1 bg-[#0D0D0D] border border-[#2A2A2A] rounded px-3 py-1.5 text-sm text-[#F5F5F5] placeholder-[#333] outline-none focus:border-blue transition-colors"
+          />
+          <Button variant="primary" size="md" onClick={handleSubscribe} disabled={!email.trim() || state === "sending"}>
+            {state === "sending" ? "Subscribing…" : "Subscribe"}
+          </Button>
+        </div>
+      )}
+      {state === "error" && (
+        <p className="text-xs text-red mt-2">Something went wrong — try again.</p>
+      )}
+    </section>
+  );
+}