From fb8d13975761f33f82a9230e1548b1510ee4d99b Mon Sep 17 00:00:00 2001
From: Abdu Alim Arlikhozhaev <arlikhozhaevca@gmail.com>
Date: Tue, 30 Jun 2026 12:56:38 -0700
Subject: [PATCH] Add Phase 2 showcase UX: component architecture, diff viewer,
 deep links, and responsive layout

---
 frontend/app/layout.tsx                       |  10 +-
 frontend/app/page.tsx                         | 751 +-----------------
 frontend/app/repos/[id]/page.tsx              |  38 +
 frontend/components/dashboard/AnalyzeBar.tsx  |  90 +++
 frontend/components/dashboard/ChartsPanel.tsx |  98 +++
 frontend/components/dashboard/Dashboard.tsx   | 319 ++++++++
 frontend/components/dashboard/DiffViewer.tsx  | 127 +++
 frontend/components/dashboard/Header.tsx      |  81 ++
 frontend/components/dashboard/IssueTable.tsx  | 129 +++
 .../components/dashboard/PipelineStepper.tsx  |  76 ++
 .../components/dashboard/RefactorList.tsx     | 123 +++
 .../components/dashboard/RepoDetailPanel.tsx  | 180 +++++
 frontend/components/dashboard/RepoSidebar.tsx | 124 +++
 frontend/components/dashboard/StatsRow.tsx    |  45 ++
 frontend/components/ui/Primitives.tsx         | 185 +++++
 15 files changed, 1643 insertions(+), 733 deletions(-)
 create mode 100644 frontend/app/repos/[id]/page.tsx
 create mode 100644 frontend/components/dashboard/AnalyzeBar.tsx
 create mode 100644 frontend/components/dashboard/ChartsPanel.tsx
 create mode 100644 frontend/components/dashboard/Dashboard.tsx
 create mode 100644 frontend/components/dashboard/DiffViewer.tsx
 create mode 100644 frontend/components/dashboard/Header.tsx
 create mode 100644 frontend/components/dashboard/IssueTable.tsx
 create mode 100644 frontend/components/dashboard/PipelineStepper.tsx
 create mode 100644 frontend/components/dashboard/RefactorList.tsx
 create mode 100644 frontend/components/dashboard/RepoDetailPanel.tsx
 create mode 100644 frontend/components/dashboard/RepoSidebar.tsx
 create mode 100644 frontend/components/dashboard/StatsRow.tsx
 create mode 100644 frontend/components/ui/Primitives.tsx
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 6346668..e44441c 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,4 +1,10 @@
 import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "AutoDev — Self-Healing Codebase Agent",
@@ -7,7 +13,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={inter.className}>
       <head>
         <style>{`
           @keyframes slideIn {
@@ -31,4 +37,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body style={{ margin: 0, padding: 0 }}>{children}</body>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 531589a..6bd3060 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,742 +1,31 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import {
-  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
-  LineChart, Line, CartesianGrid, Legend,
-} from "recharts";
-import {
-  GitBranch, GitPullRequest, Search, AlertTriangle,
-  CheckCircle, XCircle, Clock, Code, Zap,
-  TrendingDown, ExternalLink, Loader2, RefreshCw, Plus,
-} from "lucide-react";
-import { api, type Repo, type Stats, type ReportResponse, type Refactor, type Issue } from "../lib/api";
+import { Suspense } from "react";
+import { Dashboard } from "@/components/dashboard/Dashboard";
+import { C, SPIN_STYLE } from "@/lib/theme";
+import { Loader2 } from "lucide-react";
 
-// ── Colour palette ───────────────────────────────────────────────────────────
-const C = {
-  bg:       "#0a0e1a",
-  panel:    "#0f1525",
-  border:   "#1e2a45",
-  accent:   "#4f8ef7",
-  green:    "#22c55e",
-  yellow:   "#f59e0b",
-  red:      "#ef4444",
-  muted:    "#64748b",
-  text:     "#e2e8f0",
-  subtext:  "#94a3b8",
-};
-
-const SEVERITY_COLOR: Record<string, string> = {
-  critical: C.red,
-  high:     "#f97316",
-  medium:   C.yellow,
-  low:      C.green,
-};
-
-const SPIN_STYLE = { animation: "spin 1s linear infinite" } as const;
-const PULSE_STYLE = { animation: "pulse 2s ease-in-out infinite" } as const;
-
-const STATUS_ICON: Record<string, JSX.Element> = {
-  pending:      <Clock    size={14} color={C.yellow} />,
-  cloning:      <Loader2  size={14} color={C.accent} style={SPIN_STYLE} />,
-  analyzing:    <Search   size={14} color={C.accent} style={PULSE_STYLE} />,
-  refactoring:  <Zap      size={14} color="#a855f7" />,
-  done:         <CheckCircle size={14} color={C.green} />,
-  failed:       <XCircle  size={14} color={C.red} />,
-};
-
-// ── Utility ───────────────────────────────────────────────────────────────────
-const errorMessage = (e: unknown): string =>
-  e instanceof Error ? e.message : "An unexpected error occurred";
-
-const ago = (d: string) => {
-  // Append Z if no timezone info — DB stores UTC without Z
-  const normalized = d.endsWith("Z") || d.includes("+") ? d : d + "Z";
-  const secs = Math.floor((Date.now() - new Date(normalized).getTime()) / 1000);
-  if (secs < 0) return "just now";
-  if (secs < 60) return `${secs}s ago`;
-  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
-  if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
-  return `${Math.floor(secs / 86400)}d ago`;
-};
-
-// ── Components ────────────────────────────────────────────────────────────────
-
-function StatCard({ label, value, sub, icon, color = C.accent }: {
-  label: string; value: string | number; sub?: string;
-  icon: JSX.Element; color?: string;
-}) {
+function HomeFallback() {
   return (
-    <div style={{
-      background: C.panel, border: `1px solid ${C.border}`,
-      borderRadius: 12, padding: "20px 24px",
-      display: "flex", gap: 16, alignItems: "center",
-    }}>
-      <div style={{
-        width: 48, height: 48, borderRadius: 10,
-        background: color + "22", display: "flex",
-        alignItems: "center", justifyContent: "center",
-      }}>
-        {icon}
-      </div>
-      <div>
-        <div style={{ fontSize: 26, fontWeight: 700, color: C.text, fontFamily: "monospace" }}>
-          {value}
-        </div>
-        <div style={{ fontSize: 12, color: C.subtext }}>{label}</div>
-        {sub && <div style={{ fontSize: 11, color: color, marginTop: 2 }}>{sub}</div>}
-      </div>
+    <div
+      style={{
+        minHeight: "100vh",
+        background: C.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: C.muted,
+      }}
+    >
+      <Loader2 size={32} style={SPIN_STYLE} />
     </div>
   );
 }
 
-function Badge({ text, color }: { text: string; color: string }) {
+export default function HomePage() {
   return (
-    <span style={{
-      background: color + "22", color, border: `1px solid ${color}44`,
-      borderRadius: 6, padding: "2px 8px", fontSize: 11, fontWeight: 600,
-      textTransform: "uppercase", letterSpacing: "0.05em",
-    }}>
-      {text}
-    </span>
-  );
-}
-
-function IssueRow({ issue, onRefactor }: { issue: Issue; onRefactor: (id: string) => Promise<void> }) {
-  const [loading, setLoading] = useState(false);
-  const [done, setDone]       = useState(false);
-  const color = SEVERITY_COLOR[issue.severity] || C.muted;
-
-  const handleRefactor = async () => {
-    setLoading(true);
-    try {
-      await onRefactor(issue.id);
-      setDone(true);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{
-      display: "grid", gridTemplateColumns: "1fr 2fr 100px 90px 80px",
-      gap: 12, padding: "12px 16px", alignItems: "center",
-      borderBottom: `1px solid ${C.border}`,
-    }}>
-      <div>
-        <div style={{ fontSize: 12, color: C.text, fontFamily: "monospace" }}>
-          {issue.function_name || "—"}
-        </div>
-        <div style={{ fontSize: 10, color: C.muted, marginTop: 2 }}>
-          {issue.file_path.split("/").slice(-2).join("/")}
-          {issue.line_start ? `:${issue.line_start}` : ""}
-        </div>
-      </div>
-      <div style={{ fontSize: 12, color: C.subtext }}>{issue.description}</div>
-      <Badge text={issue.issue_type.replace("_", " ")} color={C.accent} />
-      <Badge text={issue.severity} color={color} />
-      <button
-        onClick={handleRefactor}
-        disabled={loading || done}
-        style={{
-          background: done ? C.green + "22" : C.accent + "22",
-          border: `1px solid ${done ? C.green : C.accent}44`,
-          color: done ? C.green : C.accent,
-          borderRadius: 6, padding: "4px 10px",
-          fontSize: 11, cursor: loading || done ? "not-allowed" : "pointer",
-          display: "flex", alignItems: "center", gap: 4, fontWeight: 600,
-          transition: "all 0.2s",
-        }}
-      >
-        {loading ? <Loader2 size={12} style={{animation: "spin 1s linear infinite"}} /> 
-         : done   ? <CheckCircle size={12} /> 
-                  : <Zap size={12} />}
-        {done ? "Queued" : "Fix"}
-      </button>
-    </div>
-  );
-}
-
-// ── Main Page ─────────────────────────────────────────────────────────────────
-
-export default function Dashboard() {
-  const [repoUrl, setRepoUrl]         = useState("");
-  const [repos, setRepos]             = useState<Repo[]>([]);
-  const [stats, setStats]             = useState<Stats | null>(null);
-  const [selectedRepo, setSelectedRepo] = useState<string | null>(null);
-  const [report, setReport]           = useState<ReportResponse | null>(null);
-  const [refactors, setRefactors]     = useState<Refactor[]>([]);
-  const [loading, setLoading]         = useState(false);
-  const [submitting, setSubmitting]   = useState(false);
-  const [error, setError]             = useState<string | null>(null);
-  const [tab, setTab]                 = useState<"issues" | "refactors" | "charts">("issues");
-
-  const fetchAll = async () => {
-    setLoading(true);
-    try {
-      const [r, s] = await Promise.all([api.listRepos(), api.getStats()]);
-      setRepos(r);
-      setStats(s);
-    } catch (e: unknown) {
-      setError(errorMessage(e));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { fetchAll(); }, []);
-
-  // Auto-select newest repo once repos load, but only if nothing selected yet
-  useEffect(() => {
-    if (!selectedRepo && repos.length > 0) {
-      loadReport(repos[0].id);
-    }
-  }, [repos, selectedRepo]);
-
-  // Auto-refresh every 8s when there are active jobs
-  useEffect(() => {
-    const active = repos.some(r => ["cloning","analyzing","refactoring"].includes(r.status));
-    if (!active) return;
-    const t = setInterval(fetchAll, 8000);
-    return () => clearInterval(t);
-  }, [repos]);
-
-  const [reportLoading, setReportLoading] = useState(false);
-
-  const loadReport = async (repoId: string) => {
-    setSelectedRepo(repoId);
-    setReportLoading(true);
-    setReport(null);
-    setRefactors([]);
-    try {
-      const [rpt, rfcs] = await Promise.all([
-        api.getReport(repoId),
-        api.getRefactors(repoId),
-      ]);
-      setReport(rpt);
-      setRefactors(rfcs);
-      setTab("issues");
-    } catch (e: unknown) {
-      setReport(null);
-      setRefactors([]);
-      const msg = errorMessage(e);
-      if (!msg.includes("404")) {
-        setError(`Failed to load report: ${msg}`);
-      }
-    } finally {
-      setReportLoading(false);
-    }
-  };
-
-  const handleDeleteRepo = async (repoId: string) => {
-    if (!confirm("Delete this repository and all its data?")) return;
-    try {
-      await api.deleteRepo(repoId);
-      if (selectedRepo === repoId) {
-        setSelectedRepo(null);
-        setReport(null);
-        setRefactors([]);
-      }
-      fetchAll();
-    } catch (e: unknown) {
-      showToast(errorMessage(e), "error");
-    }
-  };
-
-  const handleAnalyze = async () => {
-    if (!repoUrl.trim()) return;
-    setSubmitting(true);
-    setError(null);
-    try {
-      await api.analyzeRepo(repoUrl.trim());
-      setRepoUrl("");
-      setTimeout(fetchAll, 500);
-    } catch (e: unknown) {
-      setError(errorMessage(e));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const [toast, setToast] = useState<{msg: string; type: "success"|"error"} | null>(null);
-
-  const showToast = (msg: string, type: "success"|"error" = "success") => {
-    setToast({msg, type});
-    setTimeout(() => setToast(null), 4000);
-  };
-
-  const handleRefactor = async (issueId: string) => {
-    try {
-      await api.triggerRefactor(issueId);
-      showToast("Refactor queued — Celery is processing it now.");
-      setTab("refactors");
-      // Poll refactors tab until the result appears
-      let attempts = 0;
-      const poll = setInterval(async () => {
-        attempts++;
-        if (selectedRepo) {
-          const rfcs = await api.getRefactors(selectedRepo);
-          setRefactors(rfcs);
-        }
-        if (attempts >= 20) clearInterval(poll); // stop after ~40s
-      }, 2000);
-    } catch (e: unknown) {
-      showToast(errorMessage(e), "error");
-    }
-  };
-
-  // ── Chart data ─────────────────────────────────────────────────────────────
-  const complexityChartData = report?.issues
-    .filter(i => i.issue_type === "complexity" && i.metric_value)
-    .slice(0, 12)
-    .map(i => ({
-      name: i.function_name || "fn",
-      complexity: i.metric_value,
-    })) ?? [];
-
-  const issueTypeData = report
-    ? Object.entries(
-        report.issues.reduce((acc, i) => {
-          acc[i.issue_type] = (acc[i.issue_type] || 0) + 1;
-          return acc;
-        }, {} as Record<string, number>)
-      ).map(([type, count]) => ({ type: type.replace("_", " "), count }))
-    : [];
-
-  const refactorChart = refactors
-    .filter(r => r.complexity_before && r.complexity_after)
-    .slice(0, 10)
-    .map((r, i) => ({
-      name: `#${i + 1}`,
-      before: r.complexity_before,
-      after: r.complexity_after,
-    }));
-
-  // ── Render ─────────────────────────────────────────────────────────────────
-  return (
-    <div style={{
-      minHeight: "100vh", background: C.bg, color: C.text,
-      fontFamily: "'Inter', system-ui, sans-serif",
-    }}>
-      {/* Header */}
-      <div style={{
-        borderBottom: `1px solid ${C.border}`, padding: "16px 32px",
-        display: "flex", alignItems: "center", justifyContent: "space-between",
-        background: C.panel,
-      }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-          <div style={{
-            width: 36, height: 36, borderRadius: 8,
-            background: `linear-gradient(135deg, ${C.accent}, #7c3aed)`,
-            display: "flex", alignItems: "center", justifyContent: "center",
-          }}>
-            <Zap size={20} color="white" />
-          </div>
-          <div>
-            <div style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em" }}>AutoDev</div>
-            <div style={{ fontSize: 11, color: C.muted }}>Self-Healing Codebase Agent</div>
-          </div>
-        </div>
-        <button
-          onClick={fetchAll}
-          style={{
-            background: "transparent", border: `1px solid ${C.border}`,
-            color: C.subtext, borderRadius: 8, padding: "6px 12px",
-            cursor: "pointer", display: "flex", alignItems: "center", gap: 6, fontSize: 13,
-          }}
-        >
-          <RefreshCw size={13} /> Refresh
-        </button>
-      </div>
-
-      <div style={{ padding: "28px 32px" }}>
-        {/* Error banner */}
-        {error && (
-          <div style={{
-            background: C.red + "15", border: `1px solid ${C.red}44`,
-            borderRadius: 8, padding: "10px 16px", marginBottom: 20,
-            color: C.red, fontSize: 13,
-          }}>
-            ⚠ {error}
-          </div>
-        )}
-
-        {/* Toast notification */}
-        {toast && (
-          <div style={{
-            position: "fixed", bottom: 24, right: 24, zIndex: 1000,
-            background: toast.type === "success" ? C.green + "22" : C.red + "22",
-            border: `1px solid ${toast.type === "success" ? C.green : C.red}66`,
-            borderRadius: 10, padding: "12px 20px",
-            color: toast.type === "success" ? C.green : C.red,
-            fontSize: 13, fontWeight: 500,
-            boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
-            display: "flex", alignItems: "center", gap: 8,
-            animation: "slideIn 0.2s ease",
-          }}>
-            {toast.type === "success" ? <CheckCircle size={16} /> : <XCircle size={16} />}
-            {toast.msg}
-          </div>
-        )}
-
-        {/* Input */}
-        <div style={{
-          display: "flex", gap: 10, marginBottom: 28,
-          background: C.panel, border: `1px solid ${C.border}`,
-          borderRadius: 12, padding: 16,
-        }}>
-          <input
-            value={repoUrl}
-            onChange={e => setRepoUrl(e.target.value)}
-            onKeyDown={e => e.key === "Enter" && handleAnalyze()}
-            placeholder="https://github.com/owner/repo"
-            style={{
-              flex: 1, background: C.bg, border: `1px solid ${C.border}`,
-              borderRadius: 8, padding: "10px 14px", color: C.text,
-              fontSize: 14, outline: "none", fontFamily: "monospace",
-            }}
-          />
-          <button
-            onClick={handleAnalyze}
-            disabled={submitting || !repoUrl.trim()}
-            style={{
-              background: submitting ? C.muted : C.accent,
-              border: "none", borderRadius: 8, padding: "10px 20px",
-              color: "white", fontWeight: 600, fontSize: 14,
-              cursor: submitting ? "not-allowed" : "pointer",
-              display: "flex", alignItems: "center", gap: 8,
-              transition: "background 0.2s",
-            }}
-          >
-            {submitting ? <Loader2 size={16} style={SPIN_STYLE} /> : <Plus size={16} />}
-            Analyze Repo
-          </button>
-        </div>
-
-        {/* Stats row */}
-        {stats && (
-          <div style={{
-            display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
-            gap: 12, marginBottom: 28,
-          }}>
-            <StatCard label="Repositories" value={stats.total_repos} icon={<GitBranch size={22} color={C.accent} />} />
-            <StatCard label="Issues Found" value={stats.total_issues} icon={<AlertTriangle size={22} color={C.yellow} />} color={C.yellow} />
-            <StatCard label="PRs Opened" value={stats.prs_opened} icon={<GitPullRequest size={22} color={C.green} />} color={C.green} />
-            <StatCard label="Avg Complexity" value={stats.avg_complexity_before?.toFixed(1)} sub="before refactor" icon={<Code size={22} color="#f97316" />} color="#f97316" />
-            <StatCard
-              label="Complexity Reduction"
-              value={`${stats.complexity_reduction_pct}%`}
-              sub="avg across refactors"
-              icon={<TrendingDown size={22} color={C.green} />}
-              color={C.green}
-            />
-          </div>
-        )}
-
-        {/* Main layout */}
-        <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 16 }}>
-          {/* Repo list */}
-          <div style={{
-            background: C.panel, border: `1px solid ${C.border}`,
-            borderRadius: 12, overflow: "hidden",
-          }}>
-            <div style={{
-              padding: "14px 16px", borderBottom: `1px solid ${C.border}`,
-              fontSize: 12, fontWeight: 600, color: C.subtext,
-              textTransform: "uppercase", letterSpacing: "0.08em",
-            }}>
-              Repositories ({repos.length})
-            </div>
-            <div style={{ maxHeight: 520, overflowY: "auto" }}>
-              {loading && repos.length === 0 ? (
-                <div style={{ padding: 20, color: C.muted, fontSize: 13, textAlign: "center" }}>
-                  <Loader2 size={20} style={{ ...SPIN_STYLE, marginBottom: 8 }} />
-                  <div>Loading...</div>
-                </div>
-              ) : repos.length === 0 ? (
-                <div style={{ padding: 24, color: C.muted, fontSize: 13, textAlign: "center" }}>
-                  No repositories yet.
-                  <br />Paste a GitHub URL above ↑
-                </div>
-              ) : (
-                repos.map(repo => (
-                  <div
-                    key={repo.id}
-                    onClick={() => loadReport(repo.id)}
-                    style={{
-                      padding: "12px 16px", cursor: "pointer",
-                      borderBottom: `1px solid ${C.border}`,
-                      background: selectedRepo === repo.id ? C.accent + "15" : "transparent",
-                      borderLeft: selectedRepo === repo.id ? `3px solid ${C.accent}` : "3px solid transparent",
-                      transition: "background 0.15s",
-                    }}
-                  >
-                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}>
-                      <div style={{ fontWeight: 600, fontSize: 13, color: C.text }}>
-                        {repo.name}
-                      </div>
-                      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-                        {STATUS_ICON[repo.status] || <Clock size={14} />}
-                        <button
-                          onClick={e => { e.stopPropagation(); handleDeleteRepo(repo.id); }}
-                          style={{
-                            background: "transparent", border: "none",
-                            color: C.muted, cursor: "pointer", padding: 2,
-                            borderRadius: 4, display: "flex", alignItems: "center",
-                            transition: "color 0.15s",
-                          }}
-                          onMouseEnter={e => (e.currentTarget.style.color = C.red)}
-                          onMouseLeave={e => (e.currentTarget.style.color = C.muted)}
-                          title="Delete repo"
-                        >
-                          <XCircle size={13} />
-                        </button>
-                      </div>
-                    </div>
-                    <div style={{ fontSize: 11, color: C.muted }}>
-                      {repo.owner} · {repo.branch}
-                    </div>
-                    <div style={{ fontSize: 10, color: C.muted, marginTop: 2 }}>
-                      {ago(repo.created_at)}
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-
-          {/* Right panel */}
-          <div style={{
-            background: C.panel, border: `1px solid ${C.border}`,
-            borderRadius: 12, overflow: "hidden",
-          }}>
-            {!selectedRepo ? (
-              <div style={{
-                display: "flex", flexDirection: "column",
-                alignItems: "center", justifyContent: "center",
-                height: 400, color: C.muted, gap: 12,
-              }}>
-                <Code size={40} color={C.border} />
-                <div style={{ fontSize: 14 }}>Select a repository to view analysis</div>
-              </div>
-            ) : reportLoading ? (
-              <div style={{
-                display: "flex", flexDirection: "column",
-                alignItems: "center", justifyContent: "center",
-                height: 400, color: C.muted, gap: 12,
-              }}>
-                <Loader2 size={32} color={C.accent} style={{ animation: "spin 1s linear infinite" }} />
-                <div style={{ fontSize: 14 }}>Loading analysis...</div>
-              </div>
-            ) : !report && selectedRepo ? (
-              <div style={{
-                display: "flex", flexDirection: "column",
-                alignItems: "center", justifyContent: "center",
-                height: 400, color: C.muted, gap: 12,
-              }}>
-                <Clock size={40} color={C.border} />
-                <div style={{ fontSize: 14 }}>Analysis in progress — refresh in a moment</div>
-                <button
-                  onClick={() => loadReport(selectedRepo)}
-                  style={{
-                    background: C.accent + "22", border: `1px solid ${C.accent}44`,
-                    color: C.accent, borderRadius: 8, padding: "6px 16px",
-                    cursor: "pointer", fontSize: 13,
-                  }}
-                >
-                  Check again
-                </button>
-              </div>
-            ) : (
-              <>
-                {/* Tabs */}
-                <div style={{
-                  display: "flex", borderBottom: `1px solid ${C.border}`,
-                  padding: "0 16px",
-                }}>
-                  {(["issues", "refactors", "charts"] as const).map(t => (
-                    <button
-                      key={t}
-                      onClick={() => setTab(t)}
-                      style={{
-                        background: "transparent", border: "none",
-                        borderBottom: tab === t ? `2px solid ${C.accent}` : "2px solid transparent",
-                        color: tab === t ? C.accent : C.muted,
-                        padding: "12px 16px", cursor: "pointer",
-                        fontSize: 13, fontWeight: 600, textTransform: "capitalize",
-                        transition: "color 0.15s",
-                      }}
-                    >
-                      {t === "issues" && `Issues ${report ? `(${report.issues.length})` : ""}`}
-                      {t === "refactors" && `Refactors ${refactors.length > 0 ? `(${refactors.length})` : ""}`}
-                      {t === "charts" && "Charts"}
-                    </button>
-                  ))}
-                </div>
-
-                {/* Report summary strip */}
-                {report && tab === "issues" && (
-                  <div style={{
-                    display: "flex", gap: 24, padding: "12px 16px",
-                    borderBottom: `1px solid ${C.border}`,
-                    background: C.bg + "88",
-                  }}>
-                    {[
-                      { label: "Files", value: report.report.total_files },
-                      { label: "Issues", value: report.report.total_issues },
-                      { label: "Max Complexity", value: report.report.max_complexity },
-                      { label: "Security", value: report.report.security_issues },
-                      { label: "Lint", value: report.report.lint_errors },
-                    ].map(s => (
-                      <div key={s.label}>
-                        <div style={{ fontSize: 18, fontWeight: 700, color: C.text, fontFamily: "monospace" }}>{s.value}</div>
-                        <div style={{ fontSize: 10, color: C.muted }}>{s.label}</div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                {/* Issues tab */}
-                {tab === "issues" && report && (
-                  <div style={{ maxHeight: 460, overflowY: "auto" }}>
-                    {/* Table header */}
-                    <div style={{
-                      display: "grid", gridTemplateColumns: "1fr 2fr 100px 90px 80px",
-                      gap: 12, padding: "8px 16px",
-                      borderBottom: `1px solid ${C.border}`,
-                      fontSize: 10, fontWeight: 700, color: C.muted,
-                      textTransform: "uppercase", letterSpacing: "0.08em",
-                    }}>
-                      <div>Function</div><div>Description</div>
-                      <div>Type</div><div>Severity</div><div>Action</div>
-                    </div>
-                    {report.issues.map(issue => (
-                      <IssueRow key={issue.id} issue={issue} onRefactor={handleRefactor} />
-                    ))}
-                    {report.issues.length === 0 && (
-                      <div style={{ padding: 32, textAlign: "center", color: C.muted, fontSize: 13 }}>
-                        <CheckCircle size={32} color={C.green} style={{ marginBottom: 8 }} />
-                        <div>No issues found — clean codebase!</div>
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {/* Refactors tab */}
-                {tab === "refactors" && (
-                  <div style={{ maxHeight: 460, overflowY: "auto" }}>
-                    {refactors.length === 0 ? (
-                      <div style={{ padding: 32, textAlign: "center", color: C.muted, fontSize: 13 }}>
-                        No refactors generated yet.
-                      </div>
-                    ) : (
-                      refactors.map(r => (
-                        <div key={r.id} style={{
-                          padding: "14px 16px",
-                          borderBottom: `1px solid ${C.border}`,
-                          display: "grid", gridTemplateColumns: "1fr 1fr 1fr 100px 80px",
-                          gap: 12, alignItems: "center",
-                        }}>
-                          <div>
-                            <Badge
-                              text={r.status}
-                              color={
-                                r.status === "pr_opened" ? C.green :
-                                r.status === "validated" ? C.accent :
-                                r.status === "failed" ? C.red : C.yellow
-                              }
-                            />
-                          </div>
-                          <div style={{ fontSize: 12, color: C.subtext, fontFamily: "monospace" }}>
-                            {r.complexity_before != null ? `CC ${r.complexity_before} → ${r.complexity_after}` : "—"}
-                          </div>
-                          <div style={{ fontSize: 12, color: C.subtext }}>
-                            {r.lines_before != null ? `${r.lines_before} → ${r.lines_after} lines` : "—"}
-                          </div>
-                          <div style={{ fontSize: 11, color: C.muted }}>
-                            {r.tokens_used > 0 ? `${r.tokens_used} tokens` : "—"}
-                          </div>
-                          {r.pr_url ? (
-                            <a href={r.pr_url} target="_blank" rel="noopener" style={{
-                              color: C.accent, fontSize: 11, display: "flex",
-                              alignItems: "center", gap: 4, textDecoration: "none",
-                            }}>
-                              PR #{r.pr_number} <ExternalLink size={11} />
-                            </a>
-                          ) : <div />}
-                        </div>
-                      ))
-                    )}
-                  </div>
-                )}
-
-                {/* Charts tab */}
-                {tab === "charts" && report && (
-                  <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 24 }}>
-                    {complexityChartData.length > 0 && (
-                      <div>
-                        <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
-                          FUNCTION COMPLEXITY SCORES
-                        </div>
-                        <ResponsiveContainer width="100%" height={180}>
-                          <BarChart data={complexityChartData}>
-                            <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
-                            <XAxis dataKey="name" tick={{ fill: C.muted, fontSize: 10 }} />
-                            <YAxis tick={{ fill: C.muted, fontSize: 10 }} />
-                            <Tooltip
-                              contentStyle={{ background: C.panel, border: `1px solid ${C.border}`, borderRadius: 8 }}
-                              labelStyle={{ color: C.text }}
-                            />
-                            <Bar dataKey="complexity" fill={C.accent} radius={[4, 4, 0, 0]} />
-                          </BarChart>
-                        </ResponsiveContainer>
-                      </div>
-                    )}
-                    {issueTypeData.length > 0 && (
-                      <div>
-                        <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
-                          ISSUES BY TYPE
-                        </div>
-                        <ResponsiveContainer width="100%" height={180}>
-                          <BarChart data={issueTypeData} layout="vertical">
-                            <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
-                            <XAxis type="number" tick={{ fill: C.muted, fontSize: 10 }} />
-                            <YAxis dataKey="type" type="category" tick={{ fill: C.muted, fontSize: 10 }} width={100} />
-                            <Tooltip
-                              contentStyle={{ background: C.panel, border: `1px solid ${C.border}`, borderRadius: 8 }}
-                            />
-                            <Bar dataKey="count" fill="#a855f7" radius={[0, 4, 4, 0]} />
-                          </BarChart>
-                        </ResponsiveContainer>
-                      </div>
-                    )}
-                    {refactorChart.length > 0 && (
-                      <div>
-                        <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
-                          COMPLEXITY BEFORE vs AFTER REFACTOR
-                        </div>
-                        <ResponsiveContainer width="100%" height={180}>
-                          <LineChart data={refactorChart}>
-                            <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
-                            <XAxis dataKey="name" tick={{ fill: C.muted, fontSize: 10 }} />
-                            <YAxis tick={{ fill: C.muted, fontSize: 10 }} />
-                            <Tooltip
-                              contentStyle={{ background: C.panel, border: `1px solid ${C.border}`, borderRadius: 8 }}
-                            />
-                            <Legend wrapperStyle={{ color: C.muted, fontSize: 11 }} />
-                            <Line type="monotone" dataKey="before" stroke={C.red} strokeWidth={2} dot={{ r: 3 }} />
-                            <Line type="monotone" dataKey="after" stroke={C.green} strokeWidth={2} dot={{ r: 3 }} />
-                          </LineChart>
-                        </ResponsiveContainer>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
+    <Suspense fallback={<HomeFallback />}>
+      <Dashboard />
+    </Suspense>
   );
 }
diff --git a/frontend/app/repos/[id]/page.tsx b/frontend/app/repos/[id]/page.tsx
new file mode 100644
index 0000000..3941fec
--- /dev/null
+++ b/frontend/app/repos/[id]/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Suspense } from "react";
+import { useParams } from "next/navigation";
+import { Dashboard } from "@/components/dashboard/Dashboard";
+import { C, SPIN_STYLE } from "@/lib/theme";
+import { Loader2 } from "lucide-react";
+
+function RepoFallback() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        background: C.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: C.muted,
+      }}
+    >
+      <Loader2 size={32} style={SPIN_STYLE} />
+    </div>
+  );
+}
+
+function RepoPageInner() {
+  const params = useParams();
+  const repoId = typeof params.id === "string" ? params.id : undefined;
+  return <Dashboard initialRepoId={repoId} />;
+}
+
+export default function RepoPage() {
+  return (
+    <Suspense fallback={<RepoFallback />}>
+      <RepoPageInner />
+    </Suspense>
+  );
+}
diff --git a/frontend/components/dashboard/AnalyzeBar.tsx b/frontend/components/dashboard/AnalyzeBar.tsx
new file mode 100644
index 0000000..cf44bb7
--- /dev/null
+++ b/frontend/components/dashboard/AnalyzeBar.tsx
@@ -0,0 +1,90 @@
+import { Loader2, Plus } from "lucide-react";
+import { C, SPIN_STYLE } from "@/lib/theme";
+
+export function AnalyzeBar({
+  repoUrl,
+  branch,
+  submitting,
+  onUrlChange,
+  onBranchChange,
+  onSubmit,
+}: {
+  repoUrl: string;
+  branch: string;
+  submitting: boolean;
+  onUrlChange: (v: string) => void;
+  onBranchChange: (v: string) => void;
+  onSubmit: () => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 10,
+        marginBottom: 28,
+        background: C.panel,
+        border: `1px solid ${C.border}`,
+        borderRadius: 12,
+        padding: 16,
+      }}
+    >
+      <input
+        value={repoUrl}
+        onChange={(e) => onUrlChange(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && onSubmit()}
+        placeholder="https://github.com/owner/repo"
+        aria-label="GitHub repository URL"
+        style={{
+          flex: "1 1 240px",
+          background: C.bg,
+          border: `1px solid ${C.border}`,
+          borderRadius: 8,
+          padding: "10px 14px",
+          color: C.text,
+          fontSize: 14,
+          outline: "none",
+          fontFamily: "monospace",
+        }}
+      />
+      <input
+        value={branch}
+        onChange={(e) => onBranchChange(e.target.value)}
+        placeholder="main"
+        aria-label="Branch name"
+        style={{
+          flex: "0 1 120px",
+          background: C.bg,
+          border: `1px solid ${C.border}`,
+          borderRadius: 8,
+          padding: "10px 14px",
+          color: C.text,
+          fontSize: 14,
+          outline: "none",
+          fontFamily: "monospace",
+        }}
+      />
+      <button
+        type="button"
+        onClick={onSubmit}
+        disabled={submitting || !repoUrl.trim()}
+        style={{
+          background: submitting ? C.muted : C.accent,
+          border: "none",
+          borderRadius: 8,
+          padding: "10px 20px",
+          color: "white",
+          fontWeight: 600,
+          fontSize: 14,
+          cursor: submitting ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+        }}
+      >
+        {submitting ? <Loader2 size={16} style={SPIN_STYLE} /> : <Plus size={16} />}
+        Analyze Repo
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/ChartsPanel.tsx b/frontend/components/dashboard/ChartsPanel.tsx
new file mode 100644
index 0000000..8105361
--- /dev/null
+++ b/frontend/components/dashboard/ChartsPanel.tsx
@@ -0,0 +1,98 @@
+import {
+  BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer,
+  LineChart, Line, CartesianGrid, Legend,
+} from "recharts";
+import { C } from "@/lib/theme";
+import type { Issue, Refactor } from "@/lib/api";
+
+export function ChartsPanel({
+  issues,
+  refactors,
+}: {
+  issues: Issue[];
+  refactors: Refactor[];
+}) {
+  const complexityChartData = issues
+    .filter((i) => i.issue_type === "complexity" && i.metric_value)
+    .slice(0, 12)
+    .map((i) => ({
+      name: i.function_name || "fn",
+      complexity: i.metric_value,
+    }));
+
+  const issueTypeData = Object.entries(
+    issues.reduce((acc, i) => {
+      acc[i.issue_type] = (acc[i.issue_type] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>)
+  ).map(([type, count]) => ({ type: type.replace("_", " "), count }));
+
+  const refactorChart = refactors
+    .filter((r) => r.complexity_before && r.complexity_after)
+    .slice(0, 10)
+    .map((r, i) => ({
+      name: `#${i + 1}`,
+      before: r.complexity_before,
+      after: r.complexity_after,
+    }));
+
+  const tooltipStyle = {
+    contentStyle: { background: C.panel, border: `1px solid ${C.border}`, borderRadius: 8 },
+    labelStyle: { color: C.text },
+  };
+
+  return (
+    <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 24 }}>
+      {complexityChartData.length > 0 && (
+        <div>
+          <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
+            FUNCTION COMPLEXITY SCORES
+          </div>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={complexityChartData}>
+              <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
+              <XAxis dataKey="name" tick={{ fill: C.muted, fontSize: 10 }} />
+              <YAxis tick={{ fill: C.muted, fontSize: 10 }} />
+              <Tooltip {...tooltipStyle} />
+              <Bar dataKey="complexity" fill={C.accent} radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+      {issueTypeData.length > 0 && (
+        <div>
+          <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
+            ISSUES BY TYPE
+          </div>
+          <ResponsiveContainer width="100%" height={180}>
+            <BarChart data={issueTypeData} layout="vertical">
+              <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
+              <XAxis type="number" tick={{ fill: C.muted, fontSize: 10 }} />
+              <YAxis dataKey="type" type="category" tick={{ fill: C.muted, fontSize: 10 }} width={100} />
+              <Tooltip {...tooltipStyle} />
+              <Bar dataKey="count" fill="#a855f7" radius={[0, 4, 4, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+      {refactorChart.length > 0 && (
+        <div>
+          <div style={{ fontSize: 12, fontWeight: 600, color: C.subtext, marginBottom: 12 }}>
+            COMPLEXITY BEFORE vs AFTER REFACTOR
+          </div>
+          <ResponsiveContainer width="100%" height={180}>
+            <LineChart data={refactorChart}>
+              <CartesianGrid strokeDasharray="3 3" stroke={C.border} />
+              <XAxis dataKey="name" tick={{ fill: C.muted, fontSize: 10 }} />
+              <YAxis tick={{ fill: C.muted, fontSize: 10 }} />
+              <Tooltip {...tooltipStyle} />
+              <Legend wrapperStyle={{ color: C.muted, fontSize: 11 }} />
+              <Line type="monotone" dataKey="before" stroke={C.red} strokeWidth={2} dot={{ r: 3 }} />
+              <Line type="monotone" dataKey="after" stroke={C.green} strokeWidth={2} dot={{ r: 3 }} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/Dashboard.tsx b/frontend/components/dashboard/Dashboard.tsx
new file mode 100644
index 0000000..ffc9c13
--- /dev/null
+++ b/frontend/components/dashboard/Dashboard.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Header } from "@/components/dashboard/Header";
+import { AnalyzeBar } from "@/components/dashboard/AnalyzeBar";
+import { StatsRow } from "@/components/dashboard/StatsRow";
+import { RepoSidebar } from "@/components/dashboard/RepoSidebar";
+import { RepoDetailPanel } from "@/components/dashboard/RepoDetailPanel";
+import { ConfirmModal, Toast } from "@/components/ui/Primitives";
+import { useIsMobile } from "@/hooks/useMediaQuery";
+import { api, type Repo, type Stats, type ReportResponse, type Refactor } from "@/lib/api";
+import { C, type TabId } from "@/lib/theme";
+import { errorMessage } from "@/lib/utils";
+
+const ACTIVE_STATUSES = ["cloning", "analyzing", "refactoring", "validating"];
+const VALID_TABS: TabId[] = ["issues", "refactors", "charts"];
+
+function parseTab(value: string | null): TabId {
+  if (value && VALID_TABS.includes(value as TabId)) return value as TabId;
+  return "issues";
+}
+
+export function Dashboard({ initialRepoId }: { initialRepoId?: string }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const isMobile = useIsMobile();
+
+  const [repoUrl, setRepoUrl] = useState("");
+  const [branch, setBranch] = useState("main");
+  const [repos, setRepos] = useState<Repo[]>([]);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [selectedRepoId, setSelectedRepoId] = useState<string | null>(initialRepoId ?? null);
+  const [report, setReport] = useState<ReportResponse | null>(null);
+  const [refactors, setRefactors] = useState<Refactor[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [reportLoading, setReportLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [tab, setTab] = useState<TabId>(parseTab(searchParams.get("tab")));
+  const [toast, setToast] = useState<{ msg: string; type: "success" | "error" } | null>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+
+  const selectedRepo = repos.find((r) => r.id === selectedRepoId) ?? null;
+
+  const navigateToRepo = useCallback(
+    (repoId: string, nextTab: TabId = tab) => {
+      setSelectedRepoId(repoId);
+      router.push(`/repos/${repoId}?tab=${nextTab}`);
+    },
+    [router, tab]
+  );
+
+  const fetchAll = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [r, s] = await Promise.all([api.listRepos(), api.getStats()]);
+      setRepos(r);
+      setStats(s);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const loadReport = useCallback(async (repoId: string, nextTab?: TabId) => {
+    setSelectedRepoId(repoId);
+    setReportLoading(true);
+    setReport(null);
+    setRefactors([]);
+    if (nextTab) setTab(nextTab);
+    try {
+      const [rpt, rfcs] = await Promise.all([
+        api.getReport(repoId),
+        api.getRefactors(repoId),
+      ]);
+      setReport(rpt);
+      setRefactors(rfcs);
+    } catch (e: unknown) {
+      setReport(null);
+      setRefactors([]);
+      const msg = errorMessage(e);
+      if (!msg.includes("404")) {
+        setError(`Failed to load report: ${msg}`);
+      }
+    } finally {
+      setReportLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+
+  useEffect(() => {
+    const urlTab = parseTab(searchParams.get("tab"));
+    setTab(urlTab);
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (initialRepoId) {
+      loadReport(initialRepoId, parseTab(searchParams.get("tab")));
+    }
+  }, [initialRepoId, searchParams, loadReport]);
+
+  useEffect(() => {
+    if (!initialRepoId && repos.length > 0 && window.location.pathname === "/") {
+      navigateToRepo(repos[0].id);
+      loadReport(repos[0].id);
+    }
+  }, [repos, initialRepoId, navigateToRepo, loadReport]);
+
+  useEffect(() => {
+    const active = repos.some((r) => ACTIVE_STATUSES.includes(r.status));
+    if (!active) return;
+    const t = setInterval(fetchAll, 8000);
+    return () => clearInterval(t);
+  }, [repos, fetchAll]);
+
+  const showToast = (msg: string, type: "success" | "error" = "success") => {
+    setToast({ msg, type });
+    setTimeout(() => setToast(null), 4000);
+  };
+
+  const handleTabChange = (nextTab: TabId) => {
+    setTab(nextTab);
+    if (selectedRepoId) {
+      router.push(`/repos/${selectedRepoId}?tab=${nextTab}`);
+    }
+  };
+
+  const handleAnalyze = async () => {
+    if (!repoUrl.trim()) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await api.analyzeRepo(repoUrl.trim(), branch.trim() || "main");
+      setRepoUrl("");
+      showToast("Repository queued for analysis.");
+      setTimeout(fetchAll, 500);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDeleteRepo = async (repoId: string) => {
+    setDeleteTarget(repoId);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await api.deleteRepo(deleteTarget);
+      if (selectedRepoId === deleteTarget) {
+        setSelectedRepoId(null);
+        setReport(null);
+        setRefactors([]);
+        router.push("/");
+      }
+      fetchAll();
+      showToast("Repository deleted.");
+    } catch (e: unknown) {
+      showToast(errorMessage(e), "error");
+    } finally {
+      setDeleteTarget(null);
+    }
+  };
+
+  const handleRefactor = async (issueId: string) => {
+    try {
+      await api.triggerRefactor(issueId);
+      showToast("Refactor queued — Celery is processing it now.");
+      handleTabChange("refactors");
+      let attempts = 0;
+      const poll = setInterval(async () => {
+        attempts++;
+        if (selectedRepoId) {
+          const rfcs = await api.getRefactors(selectedRepoId);
+          setRefactors(rfcs);
+        }
+        if (attempts >= 20) clearInterval(poll);
+      }, 2000);
+    } catch (e: unknown) {
+      showToast(errorMessage(e), "error");
+    }
+  };
+
+  const handleSelectRepo = (repoId: string) => {
+    setSidebarOpen(false);
+    navigateToRepo(repoId);
+    loadReport(repoId);
+  };
+
+  return (
+    <div style={{ minHeight: "100vh", background: C.bg, color: C.text }}>
+      <Header
+        onRefresh={fetchAll}
+        showMenu={isMobile}
+        onMenuClick={() => setSidebarOpen(true)}
+      />
+
+      <main style={{ padding: isMobile ? "16px" : "28px 32px" }}>
+        {error && (
+          <div
+            role="alert"
+            style={{
+              background: C.red + "15",
+              border: `1px solid ${C.red}44`,
+              borderRadius: 8,
+              padding: "10px 16px",
+              marginBottom: 20,
+              color: C.red,
+              fontSize: 13,
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        {toast && <Toast message={toast.msg} type={toast.type} />}
+
+        {deleteTarget && (
+          <ConfirmModal
+            title="Delete repository?"
+            message="This will permanently delete the repository and all analysis data."
+            confirmLabel="Delete"
+            onConfirm={confirmDelete}
+            onCancel={() => setDeleteTarget(null)}
+          />
+        )}
+
+        <AnalyzeBar
+          repoUrl={repoUrl}
+          branch={branch}
+          submitting={submitting}
+          onUrlChange={setRepoUrl}
+          onBranchChange={setBranch}
+          onSubmit={handleAnalyze}
+        />
+
+        {stats && <StatsRow stats={stats} />}
+
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: isMobile ? "1fr" : "280px 1fr",
+            gap: 16,
+            position: "relative",
+          }}
+        >
+          {isMobile && sidebarOpen && (
+            <div
+              style={{
+                position: "fixed",
+                inset: 0,
+                zIndex: 900,
+                background: "rgba(0,0,0,0.5)",
+              }}
+              onClick={() => setSidebarOpen(false)}
+            />
+          )}
+
+          <div
+            style={
+              isMobile
+                ? {
+                    position: "fixed",
+                    top: 0,
+                    left: sidebarOpen ? 0 : -300,
+                    width: 280,
+                    height: "100vh",
+                    zIndex: 950,
+                    transition: "left 0.2s ease",
+                    padding: 12,
+                    background: C.bg,
+                  }
+                : undefined
+            }
+          >
+            {(!isMobile || sidebarOpen) && (
+              <RepoSidebar
+                repos={repos}
+                selectedId={selectedRepoId}
+                loading={loading}
+                onSelect={handleSelectRepo}
+                onDelete={handleDeleteRepo}
+              />
+            )}
+          </div>
+
+          <section
+            style={{
+              background: C.panel,
+              border: `1px solid ${C.border}`,
+              borderRadius: 12,
+              overflow: "hidden",
+              minWidth: 0,
+            }}
+          >
+            <RepoDetailPanel
+              repo={selectedRepo}
+              report={report}
+              refactors={refactors}
+              loading={reportLoading}
+              tab={tab}
+              onTabChange={handleTabChange}
+              onRetry={() => selectedRepoId && loadReport(selectedRepoId)}
+              onRefactor={handleRefactor}
+            />
+          </section>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/DiffViewer.tsx b/frontend/components/dashboard/DiffViewer.tsx
new file mode 100644
index 0000000..115bfaa
--- /dev/null
+++ b/frontend/components/dashboard/DiffViewer.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { C } from "@/lib/theme";
+import { useIsMobile } from "@/hooks/useMediaQuery";
+
+type DiffLine = { num: number; text: string; kind: "same" | "add" | "remove" };
+
+function buildDiff(before: string, after: string): { left: DiffLine[]; right: DiffLine[] } {
+  const beforeLines = before.split("\n");
+  const afterLines = after.split("\n");
+  const max = Math.max(beforeLines.length, afterLines.length);
+  const left: DiffLine[] = [];
+  const right: DiffLine[] = [];
+
+  for (let i = 0; i < max; i++) {
+    const b = beforeLines[i];
+    const a = afterLines[i];
+    if (b === a) {
+      if (b !== undefined) {
+        left.push({ num: i + 1, text: b, kind: "same" });
+        right.push({ num: i + 1, text: a, kind: "same" });
+      }
+    } else {
+      if (b !== undefined) left.push({ num: i + 1, text: b, kind: "remove" });
+      if (a !== undefined) right.push({ num: i + 1, text: a, kind: "add" });
+    }
+  }
+  return { left, right };
+}
+
+const LINE_BG: Record<DiffLine["kind"], string> = {
+  same: "transparent",
+  add: C.green + "18",
+  remove: C.red + "18",
+};
+
+function DiffPane({ title, lines, accent }: { title: string; lines: DiffLine[]; accent: string }) {
+  return (
+    <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
+      <div
+        style={{
+          padding: "8px 12px",
+          fontSize: 11,
+          fontWeight: 600,
+          color: accent,
+          borderBottom: `1px solid ${C.border}`,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em",
+        }}
+      >
+        {title}
+      </div>
+      <pre
+        style={{
+          margin: 0,
+          padding: 12,
+          overflow: "auto",
+          maxHeight: 320,
+          fontSize: 12,
+          lineHeight: 1.55,
+          fontFamily: "ui-monospace, 'Cascadia Code', monospace",
+          color: C.text,
+        }}
+      >
+        {lines.map((line) => (
+          <div
+            key={`${title}-${line.num}`}
+            style={{
+              display: "flex",
+              background: LINE_BG[line.kind],
+              borderRadius: 2,
+            }}
+          >
+            <span style={{ width: 36, flexShrink: 0, color: C.muted, userSelect: "none" }}>
+              {line.num}
+            </span>
+            <code style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{line.text}</code>
+          </div>
+        ))}
+      </pre>
+    </div>
+  );
+}
+
+export function DiffViewer({
+  before,
+  after,
+  title,
+  subtitle,
+}: {
+  before: string;
+  after: string;
+  title?: string;
+  subtitle?: string;
+}) {
+  const isMobile = useIsMobile();
+  const { left, right } = buildDiff(before, after);
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${C.border}`,
+        borderRadius: 10,
+        overflow: "hidden",
+        background: C.bg,
+      }}
+    >
+      {(title || subtitle) && (
+        <div style={{ padding: "10px 14px", borderBottom: `1px solid ${C.border}` }}>
+          {title && <div style={{ fontSize: 13, fontWeight: 600, color: C.text }}>{title}</div>}
+          {subtitle && <div style={{ fontSize: 11, color: C.muted, marginTop: 2 }}>{subtitle}</div>}
+        </div>
+      )}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: isMobile ? "column" : "row",
+        }}
+      >
+        <DiffPane title="Before" lines={left} accent={C.red} />
+        {!isMobile && <div style={{ width: 1, background: C.border, flexShrink: 0 }} />}
+        {isMobile && <div style={{ height: 1, background: C.border }} />}
+        <DiffPane title="After" lines={right} accent={C.green} />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/Header.tsx b/frontend/components/dashboard/Header.tsx
new file mode 100644
index 0000000..640017d
--- /dev/null
+++ b/frontend/components/dashboard/Header.tsx
@@ -0,0 +1,81 @@
+import { RefreshCw, Zap, Menu } from "lucide-react";
+import { C } from "@/lib/theme";
+
+export function Header({
+  onRefresh,
+  onMenuClick,
+  showMenu,
+}: {
+  onRefresh: () => void;
+  onMenuClick?: () => void;
+  showMenu?: boolean;
+}) {
+  return (
+    <header
+      style={{
+        borderBottom: `1px solid ${C.border}`,
+        padding: "16px 24px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        background: C.panel,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+        {showMenu && onMenuClick && (
+          <button
+            type="button"
+            aria-label="Open repositories"
+            onClick={onMenuClick}
+            style={{
+              background: "transparent",
+              border: `1px solid ${C.border}`,
+              borderRadius: 8,
+              padding: 8,
+              cursor: "pointer",
+              color: C.subtext,
+              display: "flex",
+            }}
+          >
+            <Menu size={18} />
+          </button>
+        )}
+        <div
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 8,
+            background: `linear-gradient(135deg, ${C.accent}, #7c3aed)`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Zap size={20} color="white" />
+        </div>
+        <div>
+          <div style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em" }}>AutoDev</div>
+          <div style={{ fontSize: 11, color: C.muted }}>Self-Healing Codebase Agent</div>
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={onRefresh}
+        style={{
+          background: "transparent",
+          border: `1px solid ${C.border}`,
+          color: C.subtext,
+          borderRadius: 8,
+          padding: "6px 12px",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          fontSize: 13,
+        }}
+      >
+        <RefreshCw size={13} /> Refresh
+      </button>
+    </header>
+  );
+}
diff --git a/frontend/components/dashboard/IssueTable.tsx b/frontend/components/dashboard/IssueTable.tsx
new file mode 100644
index 0000000..e76e0db
--- /dev/null
+++ b/frontend/components/dashboard/IssueTable.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle, Loader2, Zap } from "lucide-react";
+import { Badge } from "@/components/ui/Primitives";
+import { C, SEVERITY_COLOR } from "@/lib/theme";
+import { shortPath } from "@/lib/utils";
+import type { Issue } from "@/lib/api";
+
+function IssueRow({
+  issue,
+  onRefactor,
+}: {
+  issue: Issue;
+  onRefactor: (id: string) => Promise<void>;
+}) {
+  const [loading, setLoading] = useState(false);
+  const [done, setDone] = useState(false);
+  const color = SEVERITY_COLOR[issue.severity] || C.muted;
+
+  const handleRefactor = async () => {
+    setLoading(true);
+    try {
+      await onRefactor(issue.id);
+      setDone(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "minmax(120px,1fr) minmax(140px,2fr) 90px 80px 72px",
+        gap: 10,
+        padding: "12px 16px",
+        alignItems: "center",
+        borderBottom: `1px solid ${C.border}`,
+      }}
+    >
+      <div>
+        <div style={{ fontSize: 12, color: C.text, fontFamily: "monospace" }}>
+          {issue.function_name || "—"}
+        </div>
+        <div style={{ fontSize: 10, color: C.muted, marginTop: 2 }}>
+          {shortPath(issue.file_path)}
+          {issue.line_start ? `:${issue.line_start}` : ""}
+        </div>
+      </div>
+      <div style={{ fontSize: 12, color: C.subtext }}>{issue.description}</div>
+      <Badge text={issue.issue_type.replace("_", " ")} color={C.accent} />
+      <Badge text={issue.severity} color={color} />
+      <button
+        type="button"
+        onClick={handleRefactor}
+        disabled={loading || done}
+        style={{
+          background: done ? C.green + "22" : C.accent + "22",
+          border: `1px solid ${done ? C.green : C.accent}44`,
+          color: done ? C.green : C.accent,
+          borderRadius: 6,
+          padding: "4px 8px",
+          fontSize: 11,
+          cursor: loading || done ? "not-allowed" : "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          fontWeight: 600,
+        }}
+      >
+        {loading ? (
+          <Loader2 size={12} style={{ animation: "spin 1s linear infinite" }} />
+        ) : done ? (
+          <CheckCircle size={12} />
+        ) : (
+          <Zap size={12} />
+        )}
+        {done ? "Queued" : "Fix"}
+      </button>
+    </div>
+  );
+}
+
+export function IssueTable({
+  issues,
+  onRefactor,
+}: {
+  issues: Issue[];
+  onRefactor: (id: string) => Promise<void>;
+}) {
+  if (issues.length === 0) {
+    return (
+      <div style={{ padding: 32, textAlign: "center", color: C.muted, fontSize: 13 }}>
+        <CheckCircle size={32} color={C.green} style={{ marginBottom: 8 }} />
+        <div>No issues found — clean codebase!</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "minmax(120px,1fr) minmax(140px,2fr) 90px 80px 72px",
+          gap: 10,
+          padding: "8px 16px",
+          borderBottom: `1px solid ${C.border}`,
+          fontSize: 10,
+          fontWeight: 700,
+          color: C.muted,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+          minWidth: 520,
+        }}
+      >
+        <div>Function</div>
+        <div>Description</div>
+        <div>Type</div>
+        <div>Severity</div>
+        <div>Action</div>
+      </div>
+      {issues.map((issue) => (
+        <IssueRow key={issue.id} issue={issue} onRefactor={onRefactor} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/PipelineStepper.tsx b/frontend/components/dashboard/PipelineStepper.tsx
new file mode 100644
index 0000000..2677e75
--- /dev/null
+++ b/frontend/components/dashboard/PipelineStepper.tsx
@@ -0,0 +1,76 @@
+import { C } from "@/lib/theme";
+
+const STEPS = [
+  { key: "pending", label: "Queued" },
+  { key: "cloning", label: "Clone" },
+  { key: "analyzing", label: "Analyze" },
+  { key: "refactoring", label: "Refactor" },
+  { key: "validating", label: "Validate" },
+  { key: "done", label: "Complete" },
+] as const;
+
+const ORDER = STEPS.map((s) => s.key);
+
+function stepIndex(status: string): number {
+  if (status === "failed") return -1;
+  const idx = ORDER.indexOf(status as (typeof ORDER)[number]);
+  return idx >= 0 ? idx : 0;
+}
+
+export function PipelineStepper({ status }: { status: string }) {
+  const current = stepIndex(status);
+  const failed = status === "failed";
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 0,
+        padding: "12px 16px",
+        borderBottom: `1px solid ${C.border}`,
+        background: C.bg + "88",
+        overflowX: "auto",
+      }}
+    >
+      {STEPS.map((step, i) => {
+        const done = !failed && current > i;
+        const active = !failed && current === i;
+        const isFailed = failed && i === Math.max(current, 0);
+
+        const dotColor = isFailed ? C.red : done ? C.green : active ? C.accent : C.border;
+        const textColor = isFailed ? C.red : done ? C.green : active ? C.accent : C.muted;
+
+        return (
+          <div key={step.key} style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", minWidth: 64 }}>
+              <div
+                style={{
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  background: dotColor,
+                  border: active ? `2px solid ${C.accent}88` : "none",
+                  boxShadow: active ? `0 0 0 3px ${C.accent}33` : "none",
+                }}
+              />
+              <span style={{ fontSize: 10, color: textColor, marginTop: 6, fontWeight: active ? 600 : 400 }}>
+                {isFailed ? "Failed" : step.label}
+              </span>
+            </div>
+            {i < STEPS.length - 1 && (
+              <div
+                style={{
+                  width: 28,
+                  height: 2,
+                  background: done ? C.green : C.border,
+                  marginBottom: 18,
+                }}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/RefactorList.tsx b/frontend/components/dashboard/RefactorList.tsx
new file mode 100644
index 0000000..c32bdf9
--- /dev/null
+++ b/frontend/components/dashboard/RefactorList.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react";
+import { Badge } from "@/components/ui/Primitives";
+import { DiffViewer } from "@/components/dashboard/DiffViewer";
+import { C } from "@/lib/theme";
+import { shortPath } from "@/lib/utils";
+import type { Refactor } from "@/lib/api";
+
+function statusColor(status: string) {
+  if (status === "pr_opened") return C.green;
+  if (status === "validated") return C.accent;
+  if (status === "failed") return C.red;
+  return C.yellow;
+}
+
+function RefactorCard({ refactor }: { refactor: Refactor }) {
+  const [expanded, setExpanded] = useState(false);
+  const hasDiff = refactor.original_code && refactor.refactored_code;
+
+  return (
+    <div style={{ borderBottom: `1px solid ${C.border}` }}>
+      <button
+        type="button"
+        onClick={() => hasDiff && setExpanded(!expanded)}
+        style={{
+          width: "100%",
+          padding: "14px 16px",
+          background: "transparent",
+          border: "none",
+          cursor: hasDiff ? "pointer" : "default",
+          textAlign: "left",
+          color: C.text,
+        }}
+      >
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr auto",
+            gap: 12,
+            alignItems: "center",
+          }}
+        >
+          <div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+              <Badge text={refactor.status} color={statusColor(refactor.status)} />
+              {refactor.validation_passed === true && (
+                <Badge text="validated" color={C.green} />
+              )}
+              {refactor.function_name && (
+                <span style={{ fontSize: 12, fontFamily: "monospace", color: C.text }}>
+                  {refactor.function_name}
+                </span>
+              )}
+            </div>
+            {refactor.file_path && (
+              <div style={{ fontSize: 11, color: C.muted, marginTop: 4 }}>
+                {shortPath(refactor.file_path)}
+              </div>
+            )}
+            <div style={{ fontSize: 12, color: C.subtext, marginTop: 6, fontFamily: "monospace" }}>
+              {refactor.complexity_before != null
+                ? `CC ${refactor.complexity_before} → ${refactor.complexity_after}`
+                : "—"}
+              {refactor.lines_before != null &&
+                ` · ${refactor.lines_before} → ${refactor.lines_after} lines`}
+              {refactor.tokens_used > 0 && ` · ${refactor.tokens_used} tokens`}
+            </div>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {refactor.pr_url && (
+              <a
+                href={refactor.pr_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  color: C.accent,
+                  fontSize: 11,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  textDecoration: "none",
+                }}
+              >
+                PR #{refactor.pr_number} <ExternalLink size={11} />
+              </a>
+            )}
+            {hasDiff && (expanded ? <ChevronUp size={16} color={C.muted} /> : <ChevronDown size={16} color={C.muted} />)}
+          </div>
+        </div>
+      </button>
+      {expanded && hasDiff && (
+        <div style={{ padding: "0 16px 16px" }}>
+          <DiffViewer
+            before={refactor.original_code!}
+            after={refactor.refactored_code!}
+            subtitle={refactor.explanation || refactor.validation_notes || undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function RefactorList({ refactors }: { refactors: Refactor[] }) {
+  if (refactors.length === 0) {
+    return (
+      <div style={{ padding: 32, textAlign: "center", color: C.muted, fontSize: 13 }}>
+        No refactors generated yet.
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {refactors.map((r) => (
+        <RefactorCard key={r.id} refactor={r} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/RepoDetailPanel.tsx b/frontend/components/dashboard/RepoDetailPanel.tsx
new file mode 100644
index 0000000..018aac5
--- /dev/null
+++ b/frontend/components/dashboard/RepoDetailPanel.tsx
@@ -0,0 +1,180 @@
+"use client";
+
+import { Clock, Code, Loader2 } from "lucide-react";
+import { PipelineStepper } from "@/components/dashboard/PipelineStepper";
+import { IssueTable } from "@/components/dashboard/IssueTable";
+import { RefactorList } from "@/components/dashboard/RefactorList";
+import { ChartsPanel } from "@/components/dashboard/ChartsPanel";
+import { C, SPIN_STYLE, type TabId } from "@/lib/theme";
+import type { ReportResponse, Refactor, Repo } from "@/lib/api";
+
+export function RepoDetailPanel({
+  repo,
+  report,
+  refactors,
+  loading,
+  tab,
+  onTabChange,
+  onRetry,
+  onRefactor,
+}: {
+  repo: Repo | null;
+  report: ReportResponse | null;
+  refactors: Refactor[];
+  loading: boolean;
+  tab: TabId;
+  onTabChange: (tab: TabId) => void;
+  onRetry: () => void;
+  onRefactor: (issueId: string) => Promise<void>;
+}) {
+  if (!repo) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: 400,
+          color: C.muted,
+          gap: 12,
+        }}
+      >
+        <Code size={40} color={C.border} />
+        <div style={{ fontSize: 14 }}>Select a repository to view analysis</div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: 400,
+          color: C.muted,
+          gap: 12,
+        }}
+      >
+        <Loader2 size={32} color={C.accent} style={SPIN_STYLE} />
+        <div style={{ fontSize: 14 }}>Loading analysis...</div>
+      </div>
+    );
+  }
+
+  if (!report) {
+    return (
+      <div>
+        <PipelineStepper status={repo.status} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            height: 340,
+            color: C.muted,
+            gap: 12,
+          }}
+        >
+          <Clock size={40} color={C.border} />
+          <div style={{ fontSize: 14 }}>Analysis in progress — refresh in a moment</div>
+          <button
+            type="button"
+            onClick={onRetry}
+            style={{
+              background: C.accent + "22",
+              border: `1px solid ${C.accent}44`,
+              color: C.accent,
+              borderRadius: 8,
+              padding: "6px 16px",
+              cursor: "pointer",
+              fontSize: 13,
+            }}
+          >
+            Check again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const tabs: { id: TabId; label: string }[] = [
+    { id: "issues", label: `Issues (${report.issues.length})` },
+    { id: "refactors", label: `Refactors (${refactors.length})` },
+    { id: "charts", label: "Charts" },
+  ];
+
+  return (
+    <div>
+      <PipelineStepper status={repo.status} />
+      <div style={{ display: "flex", borderBottom: `1px solid ${C.border}`, padding: "0 16px" }}>
+        {tabs.map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            onClick={() => onTabChange(t.id)}
+            style={{
+              background: "transparent",
+              border: "none",
+              borderBottom: tab === t.id ? `2px solid ${C.accent}` : "2px solid transparent",
+              color: tab === t.id ? C.accent : C.muted,
+              padding: "12px 16px",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: 600,
+            }}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "issues" && (
+        <>
+          <div
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 24,
+              padding: "12px 16px",
+              borderBottom: `1px solid ${C.border}`,
+              background: C.bg + "88",
+            }}
+          >
+            {[
+              { label: "Files", value: report.report.total_files },
+              { label: "Issues", value: report.report.total_issues },
+              { label: "Max Complexity", value: report.report.max_complexity },
+              { label: "Security", value: report.report.security_issues },
+              { label: "Lint", value: report.report.lint_errors },
+            ].map((s) => (
+              <div key={s.label}>
+                <div style={{ fontSize: 18, fontWeight: 700, color: C.text, fontFamily: "monospace" }}>
+                  {s.value}
+                </div>
+                <div style={{ fontSize: 10, color: C.muted }}>{s.label}</div>
+              </div>
+            ))}
+          </div>
+          <div style={{ maxHeight: 460, overflowY: "auto" }}>
+            <IssueTable issues={report.issues} onRefactor={onRefactor} />
+          </div>
+        </>
+      )}
+
+      {tab === "refactors" && (
+        <div style={{ maxHeight: 520, overflowY: "auto" }}>
+          <RefactorList refactors={refactors} />
+        </div>
+      )}
+
+      {tab === "charts" && (
+        <ChartsPanel issues={report.issues} refactors={refactors} />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/dashboard/RepoSidebar.tsx b/frontend/components/dashboard/RepoSidebar.tsx
new file mode 100644
index 0000000..6c682d7
--- /dev/null
+++ b/frontend/components/dashboard/RepoSidebar.tsx
@@ -0,0 +1,124 @@
+import {
+  Clock, Loader2, Search, Zap, CheckCircle, XCircle,
+} from "lucide-react";
+import { C, SPIN_STYLE, PULSE_STYLE } from "@/lib/theme";
+import { ago } from "@/lib/utils";
+import type { Repo } from "@/lib/api";
+
+const STATUS_ICON: Record<string, React.ReactNode> = {
+  pending: <Clock size={14} color={C.yellow} />,
+  cloning: <Loader2 size={14} color={C.accent} style={SPIN_STYLE} />,
+  analyzing: <Search size={14} color={C.accent} style={PULSE_STYLE} />,
+  refactoring: <Zap size={14} color="#a855f7" />,
+  validating: <Loader2 size={14} color={C.accent} style={SPIN_STYLE} />,
+  done: <CheckCircle size={14} color={C.green} />,
+  failed: <XCircle size={14} color={C.red} />,
+};
+
+export function RepoSidebar({
+  repos,
+  selectedId,
+  loading,
+  onSelect,
+  onDelete,
+}: {
+  repos: Repo[];
+  selectedId: string | null;
+  loading: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+}) {
+  return (
+    <aside
+      style={{
+        background: C.panel,
+        border: `1px solid ${C.border}`,
+        borderRadius: 12,
+        overflow: "hidden",
+        height: "100%",
+      }}
+    >
+      <div
+        style={{
+          padding: "14px 16px",
+          borderBottom: `1px solid ${C.border}`,
+          fontSize: 12,
+          fontWeight: 600,
+          color: C.subtext,
+          textTransform: "uppercase",
+          letterSpacing: "0.08em",
+        }}
+      >
+        Repositories ({repos.length})
+      </div>
+      <div style={{ maxHeight: 520, overflowY: "auto" }}>
+        {loading && repos.length === 0 ? (
+          <div style={{ padding: 20, color: C.muted, fontSize: 13, textAlign: "center" }}>
+            <Loader2 size={20} style={{ ...SPIN_STYLE, marginBottom: 8 }} />
+            <div>Loading...</div>
+          </div>
+        ) : repos.length === 0 ? (
+          <div style={{ padding: 24, color: C.muted, fontSize: 13, textAlign: "center" }}>
+            No repositories yet.
+            <br />
+            Paste a GitHub URL above
+          </div>
+        ) : (
+          repos.map((repo) => (
+            <div
+              key={repo.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => onSelect(repo.id)}
+              onKeyDown={(e) => e.key === "Enter" && onSelect(repo.id)}
+              style={{
+                padding: "12px 16px",
+                cursor: "pointer",
+                borderBottom: `1px solid ${C.border}`,
+                background: selectedId === repo.id ? C.accent + "15" : "transparent",
+                borderLeft:
+                  selectedId === repo.id ? `3px solid ${C.accent}` : "3px solid transparent",
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  marginBottom: 4,
+                }}
+              >
+                <div style={{ fontWeight: 600, fontSize: 13, color: C.text }}>{repo.name}</div>
+                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                  {STATUS_ICON[repo.status] || <Clock size={14} />}
+                  <button
+                    type="button"
+                    aria-label={`Delete ${repo.name}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelete(repo.id);
+                    }}
+                    style={{
+                      background: "transparent",
+                      border: "none",
+                      color: C.muted,
+                      cursor: "pointer",
+                      padding: 2,
+                      display: "flex",
+                    }}
+                  >
+                    <XCircle size={13} />
+                  </button>
+                </div>
+              </div>
+              <div style={{ fontSize: 11, color: C.muted }}>
+                {repo.owner} · {repo.branch}
+              </div>
+              <div style={{ fontSize: 10, color: C.muted, marginTop: 2 }}>{ago(repo.created_at)}</div>
+            </div>
+          ))
+        )}
+      </div>
+    </aside>
+  );
+}
diff --git a/frontend/components/dashboard/StatsRow.tsx b/frontend/components/dashboard/StatsRow.tsx
new file mode 100644
index 0000000..2684bd8
--- /dev/null
+++ b/frontend/components/dashboard/StatsRow.tsx
@@ -0,0 +1,45 @@
+import { GitBranch, GitPullRequest, AlertTriangle, Code, TrendingDown } from "lucide-react";
+import { StatCard } from "@/components/ui/Primitives";
+import { C } from "@/lib/theme";
+import type { Stats } from "@/lib/api";
+
+export function StatsRow({ stats }: { stats: Stats }) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+        gap: 12,
+        marginBottom: 28,
+      }}
+    >
+      <StatCard label="Repositories" value={stats.total_repos} icon={<GitBranch size={22} color={C.accent} />} />
+      <StatCard
+        label="Issues Found"
+        value={stats.total_issues}
+        icon={<AlertTriangle size={22} color={C.yellow} />}
+        color={C.yellow}
+      />
+      <StatCard
+        label="PRs Opened"
+        value={stats.prs_opened}
+        icon={<GitPullRequest size={22} color={C.green} />}
+        color={C.green}
+      />
+      <StatCard
+        label="Avg Complexity"
+        value={stats.avg_complexity_before?.toFixed(1)}
+        sub="before refactor"
+        icon={<Code size={22} color="#f97316" />}
+        color="#f97316"
+      />
+      <StatCard
+        label="Complexity Reduction"
+        value={`${stats.complexity_reduction_pct}%`}
+        sub="avg across refactors"
+        icon={<TrendingDown size={22} color={C.green} />}
+        color={C.green}
+      />
+    </div>
+  );
+}
diff --git a/frontend/components/ui/Primitives.tsx b/frontend/components/ui/Primitives.tsx
new file mode 100644
index 0000000..cdd165d
--- /dev/null
+++ b/frontend/components/ui/Primitives.tsx
@@ -0,0 +1,185 @@
+import { C } from "@/lib/theme";
+
+export function Badge({ text, color }: { text: string; color: string }) {
+  return (
+    <span
+      style={{
+        background: color + "22",
+        color,
+        border: `1px solid ${color}44`,
+        borderRadius: 6,
+        padding: "2px 8px",
+        fontSize: 11,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {text}
+    </span>
+  );
+}
+
+export function StatCard({
+  label,
+  value,
+  sub,
+  icon,
+  color = C.accent,
+}: {
+  label: string;
+  value: string | number;
+  sub?: string;
+  icon: React.ReactNode;
+  color?: string;
+}) {
+  return (
+    <div
+      style={{
+        background: C.panel,
+        border: `1px solid ${C.border}`,
+        borderRadius: 12,
+        padding: "20px 24px",
+        display: "flex",
+        gap: 16,
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 10,
+          background: color + "22",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {icon}
+      </div>
+      <div>
+        <div style={{ fontSize: 26, fontWeight: 700, color: C.text, fontFamily: "monospace" }}>
+          {value}
+        </div>
+        <div style={{ fontSize: 12, color: C.subtext }}>{label}</div>
+        {sub && <div style={{ fontSize: 11, color, marginTop: 2 }}>{sub}</div>}
+      </div>
+    </div>
+  );
+}
+
+export function Toast({
+  message,
+  type,
+}: {
+  message: string;
+  type: "success" | "error";
+}) {
+  const color = type === "success" ? C.green : C.red;
+  return (
+    <div
+      role="status"
+      style={{
+        position: "fixed",
+        bottom: 24,
+        right: 24,
+        zIndex: 1000,
+        background: color + "22",
+        border: `1px solid ${color}66`,
+        borderRadius: 10,
+        padding: "12px 20px",
+        color,
+        fontSize: 13,
+        fontWeight: 500,
+        boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+        animation: "slideIn 0.2s ease",
+      }}
+    >
+      {message}
+    </div>
+  );
+}
+
+export function ConfirmModal({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  onConfirm,
+  onCancel,
+}: {
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 1100,
+        background: "rgba(0,0,0,0.6)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+      }}
+      onClick={onCancel}
+    >
+      <div
+        style={{
+          background: C.panel,
+          border: `1px solid ${C.border}`,
+          borderRadius: 12,
+          padding: 24,
+          maxWidth: 400,
+          width: "100%",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 style={{ margin: "0 0 8px", fontSize: 16, color: C.text }}>{title}</h2>
+        <p style={{ margin: "0 0 20px", fontSize: 14, color: C.subtext, lineHeight: 1.5 }}>
+          {message}
+        </p>
+        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{
+              background: "transparent",
+              border: `1px solid ${C.border}`,
+              color: C.subtext,
+              borderRadius: 8,
+              padding: "8px 16px",
+              cursor: "pointer",
+              fontSize: 13,
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            style={{
+              background: C.red,
+              border: "none",
+              color: "white",
+              borderRadius: 8,
+              padding: "8px 16px",
+              cursor: "pointer",
+              fontSize: 13,
+              fontWeight: 600,
+            }}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
