From 20a3b0b374ecbf97e79fb806789df725550d31ba Mon Sep 17 00:00:00 2001
From: zyc <1439655764@qq.com>
Date: Tue, 10 Feb 2026 14:55:28 +0800
Subject: [PATCH] add UI

---
 web/package-lock.json          |  10 +
 web/package.json               |   1 +
 web/src/App.tsx                |  15 +-
 web/src/api.ts                 |   8 +-
 web/src/index.css              | 835 +++++++++++++++++++++++++--------
 web/src/pages/BugDetail.tsx    | 107 +++--
 web/src/pages/BugList.tsx      |  13 +-
 web/src/pages/Dashboard.tsx    |  15 +-
 web/src/pages/RepairDetail.tsx | 122 ++---
 web/src/pages/RepairList.tsx   | 197 ++++----
 10 files changed, 914 insertions(+), 409 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 05ec304..3451078 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.13.4",
+        "lucide-react": "^0.563.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.13.0"
@@ -2872,6 +2873,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.563.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz",
+      "integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index fe5aaf7..3b1e665 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.13.4",
+    "lucide-react": "^0.563.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.13.0"
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0727e2e..57cd3e4 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom';
+import { LayoutDashboard, Bug, Wrench, Shield } from 'lucide-react';
 import Dashboard from './pages/Dashboard';
 import BugList from './pages/BugList';
 import BugDetail from './pages/BugDetail';
@@ -12,7 +13,10 @@ function App() {
       <div className="app">
         <aside className="sidebar">
           <div className="logo">
-            🛡️ <span>Log Center</span>
+            <div className="logo-icon">
+              <Shield size={16} />
+            </div>
+            Log Center
           </div>
           <nav>
             <ul className="nav-menu">
@@ -22,7 +26,8 @@ function App() {
                   className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
                   end
                 >
-                  📊 Dashboard
+                  <LayoutDashboard size={16} />
+                  Dashboard
                 </NavLink>
               </li>
               <li className="nav-item">
@@ -30,7 +35,8 @@ function App() {
                   to="/bugs"
                   className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
                 >
-                  🐛 Bug List
+                  <Bug size={16} />
+                  Bug List
                 </NavLink>
               </li>
               <li className="nav-item">
@@ -38,7 +44,8 @@ function App() {
                   to="/repairs"
                   className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}
                 >
-                  🔧 Repair Reports
+                  <Wrench size={16} />
+                  Repair Reports
                 </NavLink>
               </li>
             </ul>
diff --git a/web/src/api.ts b/web/src/api.ts
index 3358c6d..faa5d29 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -70,8 +70,11 @@ export const getBugDetail = (id: number) => api.get<ErrorLog>(`/api/v1/bugs/${id
 
 export const getProjects = () => api.get<{ projects: string[] }>('/api/v1/projects');
 
-export const updateTaskStatus = (taskId: number, status: string) =>
-    api.put(`/api/v1/tasks/${taskId}/status`, { status });
+export const updateTaskStatus = (taskId: number, status: string, message?: string) =>
+    api.put(`/api/v1/tasks/${taskId}/status`, { status, message });
+
+export const triggerRepair = (bugId: number) =>
+    updateTaskStatus(bugId, 'PENDING_FIX', 'Triggered from UI');
 
 export const getRepairReports = (params: {
     page?: number;
@@ -82,4 +85,3 @@ export const getRepairReports = (params: {
 export const getRepairReportDetail = (id: number) => api.get<RepairReport>(`/api/v1/repair/reports/${id}`);
 
 export default api;
-
diff --git a/web/src/index.css b/web/src/index.css
index 036b727..9bf77ee 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,15 +1,31 @@
+/* ============================================
+   Log Center - Modern Minimalist Design System
+   ============================================ */
+
 :root {
-  --bg-primary: #0f0f23;
-  --bg-secondary: #1a1a2e;
-  --bg-card: #16213e;
-  --accent: #00d4ff;
-  --accent-secondary: #7b2cbf;
-  --text-primary: #ffffff;
-  --text-secondary: #a0a0b0;
-  --success: #00e676;
-  --warning: #ffab00;
-  --error: #ff5252;
-  --border: #2a2a4a;
+  --bg-primary: #09090b;
+  --bg-secondary: #0f0f11;
+  --bg-card: #18181b;
+  --bg-surface: #1f1f23;
+  --bg-hover: #27272a;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --accent-muted: rgba(59, 130, 246, 0.12);
+  --indigo: #6366f1;
+  --text-primary: #fafafa;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --success: #22c55e;
+  --success-muted: rgba(34, 197, 94, 0.12);
+  --warning: #f59e0b;
+  --warning-muted: rgba(245, 158, 11, 0.12);
+  --error: #ef4444;
+  --error-muted: rgba(239, 68, 68, 0.12);
+  --border: #27272a;
+  --border-subtle: #1f1f23;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
 }
 
 * {
@@ -19,143 +35,200 @@
 }
 
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   background: var(--bg-primary);
   color: var(--text-primary);
-  line-height: 1.6;
+  line-height: 1.5;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--accent-hover);
+}
+
+/* ============ Layout ============ */
+
 .app {
   display: flex;
   min-height: 100vh;
 }
 
-/* Sidebar */
+/* ============ Sidebar ============ */
+
 .sidebar {
-  width: 260px;
+  width: 240px;
   background: var(--bg-secondary);
   border-right: 1px solid var(--border);
-  padding: 24px 16px;
+  padding: 20px 12px;
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
 }
 
 .logo {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--accent);
-  margin-bottom: 40px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 32px;
+  padding: 0 12px;
   display: flex;
   align-items: center;
   gap: 10px;
+  letter-spacing: -0.01em;
 }
 
-.logo span {
-  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--accent);
+  border-radius: var(--radius-sm);
+  color: white;
+  flex-shrink: 0;
 }
 
 .nav-menu {
   list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .nav-item {
-  margin-bottom: 8px;
+  margin: 0;
 }
 
 .nav-link {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: 8px;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
   color: var(--text-secondary);
   text-decoration: none;
-  transition: all 0.2s ease;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.nav-link:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
 }
 
-.nav-link:hover,
 .nav-link.active {
-  background: rgba(0, 212, 255, 0.1);
+  background: var(--accent-muted);
   color: var(--accent);
 }
 
-/* Main Content */
+.nav-link svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.nav-link.active svg,
+.nav-link:hover svg {
+  opacity: 1;
+}
+
+/* ============ Main Content ============ */
+
 .main-content {
   flex: 1;
   padding: 32px;
   overflow-y: auto;
+  min-width: 0;
 }
 
 .page-header {
-  margin-bottom: 32px;
+  margin-bottom: 28px;
 }
 
 .page-title {
-  font-size: 28px;
+  font-size: 20px;
   font-weight: 600;
-  margin-bottom: 8px;
+  letter-spacing: -0.02em;
+  margin-bottom: 4px;
 }
 
 .page-subtitle {
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
+  font-size: 13px;
 }
 
-/* Stats Cards */
+/* ============ Stats Cards ============ */
+
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 24px;
-  margin-bottom: 32px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 28px;
 }
 
 .stat-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 24px;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  transition: border-color 0.15s ease;
 }
 
 .stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.1);
+  border-color: #3f3f46;
 }
 
 .stat-label {
-  font-size: 14px;
-  color: var(--text-secondary);
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
   margin-bottom: 8px;
 }
 
 .stat-value {
-  font-size: 36px;
+  font-size: 28px;
   font-weight: 700;
+  letter-spacing: -0.02em;
 }
 
-.stat-value.accent {
-  color: var(--accent);
+.stat-value.accent { color: var(--accent); }
+.stat-value.success { color: var(--success); }
+.stat-value.warning { color: var(--warning); }
+.stat-value.error { color: var(--error); }
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  margin-bottom: 12px;
 }
 
-.stat-value.success {
-  color: var(--success);
-}
+.stat-icon.accent { background: var(--accent-muted); color: var(--accent); }
+.stat-icon.success { background: var(--success-muted); color: var(--success); }
+.stat-icon.warning { background: var(--warning-muted); color: var(--warning); }
+.stat-icon.error { background: var(--error-muted); color: var(--error); }
 
-.stat-value.warning {
-  color: var(--warning);
-}
+/* ============ Table ============ */
 
-.stat-value.error {
-  color: var(--error);
-}
-
-/* Table */
 .table-container {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
 }
 
@@ -163,12 +236,12 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 24px;
+  padding: 16px 20px;
   border-bottom: 1px solid var(--border);
 }
 
 .table-title {
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 600;
 }
 
@@ -177,179 +250,195 @@ table {
   border-collapse: collapse;
 }
 
-th,
-td {
-  padding: 16px 24px;
+th, td {
+  padding: 10px 20px;
   text-align: left;
+  font-size: 13px;
 }
 
 th {
-  background: rgba(0, 0, 0, 0.2);
-  color: var(--text-secondary);
+  background: var(--bg-surface);
+  color: var(--text-tertiary);
   font-weight: 500;
-  font-size: 13px;
+  font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.05em;
 }
 
 tr {
-  border-bottom: 1px solid var(--border);
-  transition: background 0.2s ease;
+  border-bottom: 1px solid var(--border-subtle);
+  transition: background 0.1s ease;
 }
 
-tr:hover {
-  background: rgba(0, 212, 255, 0.05);
+tbody tr:last-child {
+  border-bottom: none;
 }
 
-/* Status Badge */
-.status-badge {
-  display: inline-block;
-  padding: 4px 12px;
-  border-radius: 20px;
+tbody tr:hover {
+  background: var(--bg-hover);
+}
+
+td a {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+td a:hover {
+  text-decoration: underline;
+}
+
+.cell-mono {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
   font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.cell-secondary {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.cell-error {
+  color: var(--error);
+  font-weight: 500;
+}
+
+/* ============ Status Badge ============ */
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
   font-weight: 600;
-  text-transform: uppercase;
+  letter-spacing: 0.02em;
 }
 
 .status-NEW {
-  background: rgba(0, 212, 255, 0.2);
+  background: var(--accent-muted);
   color: var(--accent);
 }
 
 .status-PENDING_FIX {
-  background: rgba(255, 171, 0, 0.2);
+  background: var(--warning-muted);
   color: var(--warning);
 }
 
 .status-FIXING {
-  background: rgba(123, 44, 191, 0.2);
-  color: var(--accent-secondary);
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--indigo);
 }
 
 .status-FIXED {
-  background: rgba(0, 230, 118, 0.2);
+  background: var(--success-muted);
   color: var(--success);
 }
 
 .status-VERIFIED {
-  background: rgba(0, 230, 118, 0.3);
+  background: rgba(34, 197, 94, 0.18);
   color: var(--success);
 }
 
 .status-DEPLOYED {
-  background: rgba(0, 230, 118, 0.4);
-  color: var(--success);
+  background: rgba(34, 197, 94, 0.25);
+  color: #16a34a;
 }
 
 .status-FIX_FAILED {
-  background: rgba(255, 82, 82, 0.2);
+  background: var(--error-muted);
   color: var(--error);
 }
 
 .status-CANNOT_REPRODUCE {
-  background: rgba(160, 160, 176, 0.2);
-  color: var(--text-secondary);
+  background: rgba(113, 113, 122, 0.15);
+  color: var(--text-tertiary);
 }
 
-/* Filters */
-.filters {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 24px;
+.status-VERIFYING {
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--indigo);
 }
 
-.filter-select {
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 10px 16px;
-  color: var(--text-primary);
-  font-size: 14px;
-  cursor: pointer;
-}
+/* ============ Filters: Project Tabs ============ */
 
-.filter-select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-/* Project Tabs (breadcrumb navigation) */
 .project-tabs {
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-bottom: 16px;
-  padding: 6px;
-  background: var(--bg-secondary);
+  margin-bottom: 12px;
+  padding: 4px;
+  background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: var(--radius-md);
   overflow-x: auto;
 }
 
 .project-tab {
-  position: relative;
   background: none;
   border: none;
-  padding: 10px 20px;
+  padding: 6px 14px;
   color: var(--text-secondary);
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   white-space: nowrap;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .project-tab:hover {
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-hover);
 }
 
 .project-tab.active {
-  background: var(--accent);
+  background: var(--text-primary);
   color: var(--bg-primary);
   font-weight: 600;
 }
 
-/* Status Tabs */
+/* ============ Filters: Status Tabs ============ */
+
 .status-tabs {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   overflow-x: auto;
-  padding-bottom: 4px;
+  padding-bottom: 2px;
 }
 
 .status-tab {
   background: none;
   border: 1px solid var(--border);
-  padding: 6px 14px;
-  color: var(--text-secondary);
-  font-size: 12px;
+  padding: 5px 12px;
+  color: var(--text-tertiary);
+  font-size: 11px;
   font-weight: 500;
   cursor: pointer;
-  border-radius: 20px;
+  border-radius: 999px;
   white-space: nowrap;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
   text-transform: uppercase;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.03em;
 }
 
 .status-tab:hover {
-  border-color: var(--text-secondary);
-  color: var(--text-primary);
+  border-color: #3f3f46;
+  color: var(--text-secondary);
 }
 
 .status-tab.active {
   border-color: var(--accent);
-  background: rgba(0, 212, 255, 0.15);
+  background: var(--accent-muted);
   color: var(--accent);
 }
 
 .status-tab.active.status-color-NEW {
   border-color: var(--accent);
-  background: rgba(0, 212, 255, 0.15);
+  background: var(--accent-muted);
   color: var(--accent);
 }
 
@@ -357,36 +446,37 @@ tr:hover {
 .status-tab.active.status-color-VERIFIED,
 .status-tab.active.status-color-DEPLOYED {
   border-color: var(--success);
-  background: rgba(0, 230, 118, 0.15);
+  background: var(--success-muted);
   color: var(--success);
 }
 
 .status-tab.active.status-color-PENDING_FIX {
   border-color: var(--warning);
-  background: rgba(255, 171, 0, 0.15);
+  background: var(--warning-muted);
   color: var(--warning);
 }
 
 .status-tab.active.status-color-FIX_FAILED {
   border-color: var(--error);
-  background: rgba(255, 82, 82, 0.15);
+  background: var(--error-muted);
   color: var(--error);
 }
 
 .status-tab.active.status-color-FIXING,
 .status-tab.active.status-color-VERIFYING {
-  border-color: var(--accent-secondary);
-  background: rgba(123, 44, 191, 0.15);
-  color: #b388ff;
+  border-color: var(--indigo);
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--indigo);
 }
 
 .status-tab.active.status-color-CANNOT_REPRODUCE {
-  border-color: var(--text-secondary);
-  background: rgba(160, 160, 176, 0.15);
-  color: var(--text-secondary);
+  border-color: var(--text-tertiary);
+  background: rgba(113, 113, 122, 0.12);
+  color: var(--text-tertiary);
 }
 
-/* Project link in table */
+/* ============ Project Link in Table ============ */
+
 .project-link {
   background: none;
   border: none;
@@ -394,128 +484,467 @@ tr:hover {
   font-size: inherit;
   font-family: inherit;
   cursor: pointer;
-  padding: 2px 8px;
+  padding: 2px 6px;
   border-radius: 4px;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
 }
 
 .project-link:hover {
-  background: rgba(0, 212, 255, 0.1);
+  background: var(--accent-muted);
   color: var(--accent);
 }
 
-/* Empty state */
+/* ============ Filter Select ============ */
+
+.filters {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.filter-select {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 8px 12px;
+  color: var(--text-primary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.filter-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* ============ Empty State ============ */
+
 .empty-state {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 200px;
-  color: var(--text-secondary);
-  font-size: 15px;
+  color: var(--text-tertiary);
+  font-size: 13px;
   gap: 4px;
 }
 
-/* Bug Detail */
+/* ============ Detail Page ============ */
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  margin-bottom: 20px;
+  font-size: 13px;
+  font-weight: 500;
+  transition: color 0.15s ease;
+}
+
+.back-link:hover {
+  color: var(--text-primary);
+}
+
 .detail-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   padding: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .detail-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
+  gap: 16px;
 }
 
 .detail-title {
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
-  margin-bottom: 8px;
+  letter-spacing: -0.01em;
+  line-height: 1.4;
 }
 
 .detail-meta {
   display: flex;
   gap: 16px;
-  color: var(--text-secondary);
-  font-size: 14px;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  margin-top: 6px;
 }
 
-.stack-trace {
-  background: var(--bg-primary);
-  border-radius: 8px;
-  padding: 16px;
-  font-family: 'Fira Code', monospace;
+.detail-meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.detail-section {
+  margin-bottom: 20px;
+}
+
+.detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.detail-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.detail-section-value {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
   font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* ============ Code Block / Stack Trace ============ */
+
+.code-block {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 12px;
+  line-height: 1.6;
   overflow-x: auto;
   white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.code-block.error {
   color: var(--error);
 }
 
-.back-link {
+.code-block.accent {
+  color: var(--accent);
+}
+
+.code-block.neutral {
+  color: var(--text-secondary);
+}
+
+/* Keep backward compat */
+.stack-trace {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 16px;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text-secondary);
+}
+
+/* ============ Metadata Table ============ */
+
+.meta-table {
+  width: 100%;
+}
+
+.meta-table td {
+  padding: 8px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.meta-table tr:last-child td {
+  border-bottom: none;
+}
+
+.meta-label {
+  color: var(--text-tertiary);
+  font-weight: 500;
+  width: 140px;
+}
+
+/* ============ Buttons ============ */
+
+.btn {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  color: var(--accent);
-  text-decoration: none;
-  margin-bottom: 24px;
-}
-
-.back-link:hover {
-  text-decoration: underline;
-}
-
-/* Pagination */
-.pagination {
-  display: flex;
   justify-content: center;
-  gap: 8px;
-  padding: 20px;
-}
-
-.pagination button {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  color: var(--text-primary);
+  gap: 6px;
   padding: 8px 16px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
+  border: none;
+  line-height: 1;
 }
 
-.pagination button:hover:not(:disabled) {
+.btn-primary {
   background: var(--accent);
-  border-color: var(--accent);
+  color: white;
 }
 
-.pagination button:disabled {
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-primary:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-/* Loading */
+.btn-secondary {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: #3f3f46;
+}
+
+.btn-secondary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-danger {
+  background: var(--error-muted);
+  color: var(--error);
+}
+
+.btn-danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: none;
+}
+
+.btn-ghost:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+/* ============ Trigger Repair Button ============ */
+
+.trigger-repair-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.trigger-repair-btn:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.trigger-repair-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.trigger-repair-btn.loading {
+  pointer-events: none;
+}
+
+/* ============ Info Row ============ */
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-row > span:first-child {
+  color: var(--text-tertiary);
+  font-weight: 500;
+  min-width: 100px;
+}
+
+/* ============ Breadcrumb ============ */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin-bottom: 12px;
+}
+
+.breadcrumb a {
+  color: var(--text-secondary);
+}
+
+.breadcrumb a:hover {
+  color: var(--text-primary);
+}
+
+.breadcrumb-separator {
+  color: var(--text-tertiary);
+}
+
+/* ============ Title Row ============ */
+
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.title-row h1 {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+/* ============ Pagination ============ */
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+}
+
+.pagination button {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  padding: 6px 14px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.15s ease;
+}
+
+.pagination button:hover:not(:disabled) {
+  background: var(--bg-hover);
+  border-color: #3f3f46;
+}
+
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-info {
+  color: var(--text-tertiary);
+  font-size: 13px;
+  padding: 0 8px;
+}
+
+/* ============ Loading ============ */
+
 .loading {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 200px;
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
+  font-size: 13px;
 }
 
 .spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--border);
+  width: 32px;
+  height: 32px;
+  border: 2px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
-  animation: spin 1s linear infinite;
+  animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
\ No newline at end of file
+  to { transform: rotate(360deg); }
+}
+
+/* ============ Test Result Badge ============ */
+
+.test-pass {
+  color: var(--success);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.test-fail {
+  color: var(--error);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+/* ============ Card (generic for RepairDetail etc.) ============ */
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  margin-bottom: 16px;
+}
+
+.card h2 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ============ Actions Bar ============ */
+
+.actions-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border);
+}
diff --git a/web/src/pages/BugDetail.tsx b/web/src/pages/BugDetail.tsx
index b8954fa..7cb1d87 100644
--- a/web/src/pages/BugDetail.tsx
+++ b/web/src/pages/BugDetail.tsx
@@ -1,14 +1,16 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link, useLocation } from 'react-router-dom';
-import { getBugDetail, type ErrorLog } from '../api';
+import { ArrowLeft, Play, Loader2, FileCode, GitCommit } from 'lucide-react';
+import { getBugDetail, triggerRepair, type ErrorLog } from '../api';
 
 export default function BugDetail() {
     const { id } = useParams<{ id: string }>();
     const location = useLocation();
     const [bug, setBug] = useState<ErrorLog | null>(null);
     const [loading, setLoading] = useState(true);
+    const [repairing, setRepairing] = useState(false);
+    const [repairMessage, setRepairMessage] = useState('');
 
-    // Preserve search params from the list page for back navigation
     const backSearch = location.state?.fromSearch || '';
 
     useEffect(() => {
@@ -26,6 +28,22 @@ export default function BugDetail() {
         fetchBug();
     }, [id]);
 
+    const handleTriggerRepair = async () => {
+        if (!bug) return;
+        setRepairing(true);
+        setRepairMessage('');
+        try {
+            await triggerRepair(bug.id);
+            setBug({ ...bug, status: 'PENDING_FIX' });
+            setRepairMessage('Repair triggered successfully');
+        } catch (error) {
+            console.error('Failed to trigger repair:', error);
+            setRepairMessage('Failed to trigger repair');
+        } finally {
+            setRepairing(false);
+        }
+    };
+
     if (loading) {
         return (
             <div className="loading">
@@ -38,10 +56,13 @@ export default function BugDetail() {
         return <div className="loading">Bug not found</div>;
     }
 
+    const canTriggerRepair = ['NEW', 'FIX_FAILED'].includes(bug.status);
+
     return (
         <div>
             <Link to={`/bugs${backSearch ? `?${backSearch}` : ''}`} className="back-link">
-                ← Back to Bug List
+                <ArrowLeft size={14} />
+                Back to Bug List
             </Link>
 
             <div className="detail-card">
@@ -52,33 +73,35 @@ export default function BugDetail() {
                         </h2>
                         <div className="detail-meta">
                             <span>Project: {bug.project_id}</span>
-                            <span>Environment: {bug.environment}</span>
+                            <span>Env: {bug.environment}</span>
                             <span>Level: {bug.level}</span>
                         </div>
                     </div>
                     <span className={`status-badge status-${bug.status}`}>{bug.status}</span>
                 </div>
 
-                <div style={{ marginBottom: '24px' }}>
-                    <h4 style={{ marginBottom: '12px', color: 'var(--text-secondary)' }}>Location</h4>
-                    <p style={{ fontFamily: 'monospace', fontSize: '14px' }}>
-                        📁 {bug.file_path} : Line {bug.line_number}
-                    </p>
+                <div className="detail-section">
+                    <div className="detail-section-title">Location</div>
+                    <div className="detail-section-value">
+                        <FileCode size={14} style={{ display: 'inline', verticalAlign: 'middle', marginRight: '6px' }} />
+                        {bug.file_path} : Line {bug.line_number}
+                    </div>
                 </div>
 
                 {bug.commit_hash && (
-                    <div style={{ marginBottom: '24px' }}>
-                        <h4 style={{ marginBottom: '12px', color: 'var(--text-secondary)' }}>Git Info</h4>
-                        <p style={{ fontFamily: 'monospace', fontSize: '14px' }}>
-                            Commit: {bug.commit_hash}
-                            {bug.version && ` | Version: ${bug.version}`}
-                        </p>
+                    <div className="detail-section">
+                        <div className="detail-section-title">Git Info</div>
+                        <div className="detail-section-value">
+                            <GitCommit size={14} style={{ display: 'inline', verticalAlign: 'middle', marginRight: '6px' }} />
+                            {bug.commit_hash}
+                            {bug.version && ` | v${bug.version}`}
+                        </div>
                     </div>
                 )}
 
-                <div style={{ marginBottom: '24px' }}>
-                    <h4 style={{ marginBottom: '12px', color: 'var(--text-secondary)' }}>Stack Trace</h4>
-                    <pre className="stack-trace">
+                <div className="detail-section">
+                    <div className="detail-section-title">Stack Trace</div>
+                    <pre className="code-block error">
                         {typeof bug.stack_trace === 'string'
                             ? bug.stack_trace
                             : JSON.stringify(bug.stack_trace, null, 2)}
@@ -86,33 +109,61 @@ export default function BugDetail() {
                 </div>
 
                 {bug.context && Object.keys(bug.context).length > 0 && (
-                    <div>
-                        <h4 style={{ marginBottom: '12px', color: 'var(--text-secondary)' }}>Context</h4>
-                        <pre className="stack-trace" style={{ color: 'var(--accent)' }}>
+                    <div className="detail-section">
+                        <div className="detail-section-title">Context</div>
+                        <pre className="code-block accent">
                             {JSON.stringify(bug.context, null, 2)}
                         </pre>
                     </div>
                 )}
+
+                <div className="actions-bar">
+                    <button
+                        className="trigger-repair-btn"
+                        onClick={handleTriggerRepair}
+                        disabled={!canTriggerRepair || repairing}
+                    >
+                        {repairing ? (
+                            <Loader2 size={14} className="spinner" />
+                        ) : (
+                            <Play size={14} />
+                        )}
+                        {repairing ? 'Triggering...' : 'Trigger Repair'}
+                    </button>
+                    {repairMessage && (
+                        <span style={{
+                            fontSize: '13px',
+                            color: repairMessage.includes('success') ? 'var(--success)' : 'var(--error)'
+                        }}>
+                            {repairMessage}
+                        </span>
+                    )}
+                    {!canTriggerRepair && !repairing && (
+                        <span style={{ fontSize: '13px', color: 'var(--text-tertiary)' }}>
+                            Only NEW or FIX_FAILED bugs can be triggered
+                        </span>
+                    )}
+                </div>
             </div>
 
             <div className="detail-card">
-                <h4 style={{ marginBottom: '16px' }}>Metadata</h4>
-                <table>
+                <div className="detail-section-title" style={{ marginBottom: '12px' }}>Metadata</div>
+                <table className="meta-table">
                     <tbody>
                         <tr>
-                            <td style={{ color: 'var(--text-secondary)' }}>Bug ID</td>
+                            <td className="meta-label">Bug ID</td>
                             <td>{bug.id}</td>
                         </tr>
                         <tr>
-                            <td style={{ color: 'var(--text-secondary)' }}>Fingerprint</td>
-                            <td style={{ fontFamily: 'monospace', fontSize: '13px' }}>{bug.fingerprint}</td>
+                            <td className="meta-label">Fingerprint</td>
+                            <td className="cell-mono">{bug.fingerprint}</td>
                         </tr>
                         <tr>
-                            <td style={{ color: 'var(--text-secondary)' }}>Retry Count</td>
+                            <td className="meta-label">Retry Count</td>
                             <td>{bug.retry_count}</td>
                         </tr>
                         <tr>
-                            <td style={{ color: 'var(--text-secondary)' }}>Reported At</td>
+                            <td className="meta-label">Reported At</td>
                             <td>{new Date(bug.timestamp).toLocaleString()}</td>
                         </tr>
                     </tbody>
diff --git a/web/src/pages/BugList.tsx b/web/src/pages/BugList.tsx
index 04c16b2..1f08772 100644
--- a/web/src/pages/BugList.tsx
+++ b/web/src/pages/BugList.tsx
@@ -15,7 +15,6 @@ export default function BugList() {
     const [totalPages, setTotalPages] = useState(1);
     const [projects, setProjects] = useState<string[]>([]);
 
-    // Read filters from URL params, default status to NEW
     const currentProject = searchParams.get('project') || '';
     const currentStatus = searchParams.get('status') ?? 'NEW';
     const currentPage = parseInt(searchParams.get('page') || '1', 10);
@@ -30,7 +29,6 @@ export default function BugList() {
                     next.delete(key);
                 }
             }
-            // Reset page when changing filters
             if ('project' in updates || 'status' in updates) {
                 next.delete('page');
             }
@@ -77,7 +75,6 @@ export default function BugList() {
                 <p className="page-subtitle">All reported errors and their current status</p>
             </div>
 
-            {/* Project breadcrumb navigation */}
             <div className="project-tabs">
                 <button
                     className={`project-tab ${currentProject === '' ? 'active' : ''}`}
@@ -96,7 +93,6 @@ export default function BugList() {
                 ))}
             </div>
 
-            {/* Status filter tabs */}
             <div className="status-tabs">
                 <button
                     className={`status-tab ${currentStatus === '' ? 'active' : ''}`}
@@ -146,7 +142,6 @@ export default function BugList() {
                                             <Link
                                                 to={`/bugs/${bug.id}`}
                                                 state={{ fromSearch: searchParams.toString() }}
-                                                style={{ color: 'var(--accent)' }}
                                             >
                                                 #{bug.id}
                                             </Link>
@@ -159,8 +154,8 @@ export default function BugList() {
                                                 {bug.project_id}
                                             </button>
                                         </td>
-                                        <td style={{ color: 'var(--error)' }}>{bug.error_type}</td>
-                                        <td style={{ fontFamily: 'monospace', fontSize: '13px' }}>
+                                        <td className="cell-error">{bug.error_type}</td>
+                                        <td className="cell-mono">
                                             {bug.file_path}:{bug.line_number}
                                         </td>
                                         <td>
@@ -168,7 +163,7 @@ export default function BugList() {
                                                 {bug.status}
                                             </span>
                                         </td>
-                                        <td style={{ color: 'var(--text-secondary)', fontSize: '14px' }}>
+                                        <td className="cell-secondary">
                                             {new Date(bug.timestamp).toLocaleString()}
                                         </td>
                                     </tr>
@@ -184,7 +179,7 @@ export default function BugList() {
                                 >
                                     Previous
                                 </button>
-                                <span style={{ padding: '8px 16px', color: 'var(--text-secondary)' }}>
+                                <span className="pagination-info">
                                     Page {currentPage} of {totalPages}
                                 </span>
                                 <button
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 9564f0c..3cbd234 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { Bug, CalendarPlus, TrendingUp, AlertTriangle } from 'lucide-react';
 import { getStats, type DashboardStats } from '../api';
 
 export default function Dashboard() {
@@ -40,18 +41,30 @@ export default function Dashboard() {
 
             <div className="stats-grid">
                 <div className="stat-card">
+                    <div className="stat-icon accent">
+                        <Bug size={18} />
+                    </div>
                     <div className="stat-label">Total Bugs</div>
                     <div className="stat-value accent">{stats.total_bugs}</div>
                 </div>
                 <div className="stat-card">
-                    <div className="stat-label">Today's New Bugs</div>
+                    <div className="stat-icon warning">
+                        <CalendarPlus size={18} />
+                    </div>
+                    <div className="stat-label">Today's New</div>
                     <div className="stat-value warning">{stats.today_bugs}</div>
                 </div>
                 <div className="stat-card">
+                    <div className="stat-icon success">
+                        <TrendingUp size={18} />
+                    </div>
                     <div className="stat-label">Fix Rate</div>
                     <div className="stat-value success">{stats.fix_rate}%</div>
                 </div>
                 <div className="stat-card">
+                    <div className="stat-icon error">
+                        <AlertTriangle size={18} />
+                    </div>
                     <div className="stat-label">Pending Fix</div>
                     <div className="stat-value error">
                         {(stats.status_distribution['NEW'] || 0) +
diff --git a/web/src/pages/RepairDetail.tsx b/web/src/pages/RepairDetail.tsx
index 8fc4723..df4502c 100644
--- a/web/src/pages/RepairDetail.tsx
+++ b/web/src/pages/RepairDetail.tsx
@@ -1,87 +1,91 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft, Bot, FileCode, FlaskConical } from 'lucide-react';
 import { getRepairReportDetail, type RepairReport } from '../api';
 
-function RepairDetail() {
+export default function RepairDetail() {
     const { id } = useParams<{ id: string }>();
     const [report, setReport] = useState<RepairReport | null>(null);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         if (id) {
-            fetchDetail(parseInt(id));
+            const fetchDetail = async () => {
+                try {
+                    const res = await getRepairReportDetail(parseInt(id));
+                    setReport(res.data);
+                } catch (err) {
+                    console.error(err);
+                } finally {
+                    setLoading(false);
+                }
+            };
+            fetchDetail();
         }
     }, [id]);
 
-    const fetchDetail = async (reportId: number) => {
-        try {
-            const res = await getRepairReportDetail(reportId);
-            setReport(res.data);
-        } catch (err) {
-            console.error(err);
-        } finally {
-            setLoading(false);
-        }
-    };
+    if (loading) {
+        return (
+            <div className="loading">
+                <div className="spinner"></div>
+            </div>
+        );
+    }
 
-    if (loading) return <div className="loading">Loading...</div>;
-    if (!report) return <div className="error">Report not found</div>;
+    if (!report) {
+        return <div className="loading">Report not found</div>;
+    }
 
     return (
-        <div className="bug-detail-page">
-            <div className="header">
-                <div className="breadcrumb">
-                    <Link to="/repairs">Repair Reports</Link> / #{report.id}
-                </div>
+        <div>
+            <Link to="/repairs" className="back-link">
+                <ArrowLeft size={14} />
+                Back to Repair Reports
+            </Link>
+
+            <div style={{ marginBottom: '20px' }}>
                 <div className="title-row">
-                    <h1>Repair Report #{report.id}</h1>
-                    <span className={`status-badge ${report.status}`}>{report.status}</span>
+                    <h1 className="page-title">Repair Report #{report.id}</h1>
+                    <span className={`status-badge status-${report.status}`}>{report.status}</span>
                 </div>
             </div>
 
-            <div className="detail-grid" style={{ gridTemplateColumns: '1fr' }}>
-                <div className="card">
-                    <h2>Basic Info</h2>
-                    <div className="info-row">
-                        <span>Project:</span> <strong>{report.project_id}</strong>
-                    </div>
-                    <div className="info-row">
-                        <span>Bug ID:</span> <Link to={`/bugs/${report.error_log_id}`}>#{report.error_log_id}</Link>
-                    </div>
-                    <div className="info-row">
-                        <span>Created At:</span> {new Date(report.created_at).toLocaleString()}
-                    </div>
-                    <div className="info-row">
-                        <span>Test Result:</span>
-                        <span style={{ color: report.test_passed ? '#10b981' : '#ef4444', fontWeight: 'bold', marginLeft: '8px' }}>
-                            {report.test_passed ? 'PASS' : 'FAIL'}
-                        </span>
-                    </div>
+            <div className="card">
+                <h2>Basic Info</h2>
+                <div className="info-row">
+                    <span>Project</span>
+                    <strong>{report.project_id}</strong>
                 </div>
+                <div className="info-row">
+                    <span>Bug ID</span>
+                    <Link to={`/bugs/${report.error_log_id}`}>#{report.error_log_id}</Link>
+                </div>
+                <div className="info-row">
+                    <span>Created At</span>
+                    <span>{new Date(report.created_at).toLocaleString()}</span>
+                </div>
+                <div className="info-row">
+                    <span>Test Result</span>
+                    <span className={report.test_passed ? 'test-pass' : 'test-fail'}>
+                        {report.test_passed ? 'PASS' : 'FAIL'}
+                    </span>
+                </div>
+            </div>
 
-                <div className="card">
-                    <h2>🤖 AI Analysis</h2>
-                    <div className="stack-trace">
-                        <pre style={{ whiteSpace: 'pre-wrap' }}>{report.ai_analysis}</pre>
-                    </div>
-                </div>
+            <div className="card">
+                <h2><Bot size={16} /> AI Analysis</h2>
+                <pre className="code-block neutral">{report.ai_analysis}</pre>
+            </div>
 
-                <div className="card">
-                    <h2>📝 Code Changes</h2>
-                    <div className="stack-trace">
-                        <pre>{report.code_diff || 'No changes recorded'}</pre>
-                    </div>
-                </div>
+            <div className="card">
+                <h2><FileCode size={16} /> Code Changes</h2>
+                <pre className="code-block neutral">{report.code_diff || 'No changes recorded'}</pre>
+            </div>
 
-                <div className="card">
-                    <h2>🧪 Test Output</h2>
-                    <div className="stack-trace">
-                        <pre>{report.test_output}</pre>
-                    </div>
-                </div>
+            <div className="card">
+                <h2><FlaskConical size={16} /> Test Output</h2>
+                <pre className="code-block neutral">{report.test_output}</pre>
             </div>
         </div>
     );
 }
-
-export default RepairDetail;
diff --git a/web/src/pages/RepairList.tsx b/web/src/pages/RepairList.tsx
index 0bc7478..c2f3ea1 100644
--- a/web/src/pages/RepairList.tsx
+++ b/web/src/pages/RepairList.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { getRepairReports, type RepairReport, getProjects } from '../api';
 
-function RepairList() {
+export default function RepairList() {
     const [reports, setReports] = useState<RepairReport[]>([]);
     const [loading, setLoading] = useState(true);
     const [projects, setProjects] = useState<string[]>([]);
@@ -13,146 +13,139 @@ function RepairList() {
     const [totalPages, setTotalPages] = useState(1);
 
     useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const res = await getProjects();
+                setProjects(res.data.projects);
+            } catch (err) {
+                console.error(err);
+            }
+        };
         fetchProjects();
     }, []);
 
     useEffect(() => {
+        const fetchReports = async () => {
+            setLoading(true);
+            try {
+                const res = await getRepairReports({
+                    page: filters.page,
+                    project_id: filters.project_id || undefined,
+                });
+                setReports(res.data.items);
+                setTotalPages(res.data.total_pages);
+            } catch (err) {
+                console.error(err);
+            } finally {
+                setLoading(false);
+            }
+        };
         fetchReports();
     }, [filters]);
 
-    const fetchProjects = async () => {
-        try {
-            const res = await getProjects();
-            setProjects(res.data.projects);
-        } catch (err) {
-            console.error(err);
-        }
-    };
-
-    const fetchReports = async () => {
-        setLoading(true);
-        try {
-            const res = await getRepairReports({
-                page: filters.page,
-                project_id: filters.project_id || undefined,
-            });
-            setReports(res.data.items);
-            setTotalPages(res.data.total_pages);
-        } catch (err) {
-            console.error(err);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleFilterChange = (key: string, value: any) => {
+    const handleFilterChange = (key: string, value: string) => {
         setFilters((prev) => ({ ...prev, [key]: value, page: 1 }));
     };
 
-    const getStatusColor = (status: string) => {
-        switch (status) {
-            case 'FIXED': return '#10b981';
-            case 'FIX_FAILED': return '#ef4444';
-            default: return '#6b7280';
-        }
-    };
-
     return (
-        <div className="bug-list-page">
-            <div className="header">
-                <h1>🔧 Repair Reports</h1>
-                <div className="filters">
-                    <select
-                        value={filters.project_id}
-                        onChange={(e) => handleFilterChange('project_id', e.target.value)}
-                    >
-                        <option value="">All Projects</option>
-                        {projects.map((p) => (
-                            <option key={p} value={p}>
-                                {p}
-                            </option>
-                        ))}
-                    </select>
+        <div>
+            <div className="page-header">
+                <div className="title-row">
+                    <div>
+                        <h1 className="page-title">Repair Reports</h1>
+                        <p className="page-subtitle">AI-powered bug repair attempts and their results</p>
+                    </div>
+                    <div className="filters">
+                        <select
+                            className="filter-select"
+                            value={filters.project_id}
+                            onChange={(e) => handleFilterChange('project_id', e.target.value)}
+                        >
+                            <option value="">All Projects</option>
+                            {projects.map((p) => (
+                                <option key={p} value={p}>{p}</option>
+                            ))}
+                        </select>
+                    </div>
                 </div>
             </div>
 
             <div className="table-container">
-                <table>
-                    <thead>
-                        <tr>
-                            <th>ID</th>
-                            <th>Project</th>
-                            <th>Bug ID</th>
-                            <th>Modified Files</th>
-                            <th>Test Passed</th>
-                            <th>Status</th>
-                            <th>Date</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {loading ? (
+                {loading ? (
+                    <div className="loading">
+                        <div className="spinner"></div>
+                    </div>
+                ) : reports.length === 0 ? (
+                    <div className="empty-state">No reports found</div>
+                ) : (
+                    <table>
+                        <thead>
                             <tr>
-                                <td colSpan={8} className="text-center">Loading...</td>
+                                <th>ID</th>
+                                <th>Project</th>
+                                <th>Bug ID</th>
+                                <th>Modified Files</th>
+                                <th>Test Result</th>
+                                <th>Status</th>
+                                <th>Date</th>
+                                <th>Actions</th>
                             </tr>
-                        ) : reports.length === 0 ? (
-                            <tr>
-                                <td colSpan={8} className="text-center">No reports found</td>
-                            </tr>
-                        ) : (
-                            reports.map((report) => (
+                        </thead>
+                        <tbody>
+                            {reports.map((report) => (
                                 <tr key={report.id}>
                                     <td>#{report.id}</td>
                                     <td>{report.project_id}</td>
                                     <td>
-                                        <Link to={`/bugs/${report.error_log_id}`}>#{report.error_log_id}</Link>
+                                        <Link to={`/bugs/${report.error_log_id}`}>
+                                            #{report.error_log_id}
+                                        </Link>
                                     </td>
                                     <td>{report.modified_files.length} files</td>
                                     <td>
-                                        <span style={{ color: report.test_passed ? '#10b981' : '#ef4444' }}>
+                                        <span className={report.test_passed ? 'test-pass' : 'test-fail'}>
                                             {report.test_passed ? 'PASS' : 'FAIL'}
                                         </span>
                                     </td>
                                     <td>
-                                        <span
-                                            className="status-badge"
-                                            style={{ backgroundColor: getStatusColor(report.status) }}
-                                        >
+                                        <span className={`status-badge status-${report.status}`}>
                                             {report.status}
                                         </span>
                                     </td>
-                                    <td>{new Date(report.created_at).toLocaleString()}</td>
+                                    <td className="cell-secondary">
+                                        {new Date(report.created_at).toLocaleString()}
+                                    </td>
                                     <td>
                                         <Link to={`/repairs/${report.id}`} className="btn-link">
                                             View
                                         </Link>
                                     </td>
                                 </tr>
-                            ))
-                        )}
-                    </tbody>
-                </table>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
             </div>
 
-            <div className="pagination">
-                <button
-                    disabled={filters.page === 1}
-                    onClick={() => setFilters((prev) => ({ ...prev, page: prev.page - 1 }))}
-                >
-                    Previous
-                </button>
-                <span>
-                    Page {filters.page} of {totalPages}
-                </span>
-                <button
-                    disabled={filters.page === totalPages}
-                    onClick={() => setFilters((prev) => ({ ...prev, page: prev.page + 1 }))}
-                >
-                    Next
-                </button>
-            </div>
+            {totalPages > 1 && (
+                <div className="pagination">
+                    <button
+                        disabled={filters.page === 1}
+                        onClick={() => setFilters((prev) => ({ ...prev, page: prev.page - 1 }))}
+                    >
+                        Previous
+                    </button>
+                    <span className="pagination-info">
+                        Page {filters.page} of {totalPages}
+                    </span>
+                    <button
+                        disabled={filters.page === totalPages}
+                        onClick={() => setFilters((prev) => ({ ...prev, page: prev.page + 1 }))}
+                    >
+                        Next
+                    </button>
+                </div>
+            )}
         </div>
     );
 }
-
-export default RepairList;