From 9c564b575ee29fd586971f2213aa20f5533e8910 Mon Sep 17 00:00:00 2001
From: sinohqb <huangqiaobin2012@gmail.com>
Date: Tue, 28 Jul 2026 17:41:08 +0800
Subject: [PATCH] feat(frontend): v0.4 login page, dashboard rebuild, reports
 UX, keep-alive refresh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 登录页 + App 鉴权门 + X-Auth-Token 拦截器 + 菜单头部退出按钮
- 仪表盘重构：6 指标卡 / 趋势图 + 场景表现 / 最近记录 + 快捷操作 + 来源分布
- Reports 页重做：场景筛选、富选项下拉、allowClear、一键重置、同场景对比约束
- useOnTabActive：标签页激活自动刷新（根治 AI 助手评测记录"消失"）
- ModelConfigs 12 列合并为 6 列；来源 Tag；chunk 告警阈值修正并记录原因
---
 frontend/web/package-lock.json           |   4 +-
 frontend/web/package.json                |   2 +-
 frontend/web/src/App.tsx                 |  52 ++++-
 frontend/web/src/api.ts                  |  52 +++++
 frontend/web/src/components/RunList.tsx  |  12 +-
 frontend/web/src/hooks/useOnTabActive.ts |  23 +++
 frontend/web/src/pages/Home.tsx          | 244 +++++++++++++++--------
 frontend/web/src/pages/Login.tsx         |  52 +++++
 frontend/web/src/pages/ModelConfigs.tsx  | 150 +++++++-------
 frontend/web/src/pages/Reports.tsx       | 237 +++++++++++++++-------
 frontend/web/src/pages/Runs.tsx          |   5 +
 frontend/web/src/tokens.ts               |  12 ++
 frontend/web/vite.config.ts              |  12 +-
 13 files changed, 626 insertions(+), 231 deletions(-)
 create mode 100644 frontend/web/src/hooks/useOnTabActive.ts
 create mode 100644 frontend/web/src/pages/Login.tsx

diff --git a/frontend/web/package-lock.json b/frontend/web/package-lock.json
index b68bf62..c08e8fa 100644
--- a/frontend/web/package-lock.json
+++ b/frontend/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "agenteval-web",
-  "version": "0.3.0-dev",
+  "version": "0.4.0-dev",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "agenteval-web",
-      "version": "0.3.0-dev",
+      "version": "0.4.0-dev",
       "dependencies": {
         "@ant-design/charts": "^2.6.7",
         "@ant-design/icons": "^6.3.2",
diff --git a/frontend/web/package.json b/frontend/web/package.json
index 8d7bbc0..8117c1e 100644
--- a/frontend/web/package.json
+++ b/frontend/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "agenteval-web",
-  "version": "0.3.0-dev",
+  "version": "0.4.0-dev",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx
index 9134e89..c8337d5 100644
--- a/frontend/web/src/App.tsx
+++ b/frontend/web/src/App.tsx
@@ -1,6 +1,6 @@
-import { lazy, Suspense, useEffect } from 'react'
+import { lazy, Suspense, useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Layout, Menu, Spin } from 'antd'
+import { Layout, Menu, Spin, Button, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
 import {
   DashboardOutlined,
@@ -11,8 +11,11 @@ import {
   RobotOutlined,
   FolderOpenOutlined,
   CloudServerOutlined,
+  LogoutOutlined,
 } from '@ant-design/icons'
 import TabBar from './components/TabBar'
+import LoginPage from './pages/Login'
+import { authApi, authToken, setOnUnauthorized } from './api'
 import { useTabStore, type TabItem } from './stores/tabStore'
 import { colors } from './tokens'
 import type { ReactNode } from 'react'
@@ -68,10 +71,30 @@ const menuItems: MenuProps['items'] = routeConfigs.map((r) => ({
   label: r.name,
 }))
 
+type AuthState = 'checking' | 'login' | 'ready'
+
 function App() {
   const location = useLocation()
   const navigate = useNavigate()
   const { tabs, activeKey, openTab, setActiveTab } = useTabStore()
+  const [authState, setAuthState] = useState<AuthState>('checking')
+  const [authRequired, setAuthRequired] = useState(false)
+
+  useEffect(() => {
+    setOnUnauthorized(() => setAuthState('login'))
+    authApi.status()
+      .then((res) => {
+        setAuthRequired(res.data.auth_required)
+        setAuthState(res.data.authenticated ? 'ready' : 'login')
+      })
+      .catch(() => setAuthState('ready')) // 后端不可达时不锁死界面，由具体请求报错
+    return () => setOnUnauthorized(null)
+  }, [])
+
+  const logout = () => {
+    authToken.clear()
+    setAuthState('login')
+  }
 
   useEffect(() => {
     const config = routeConfigs.find((r) => r.path === location.pathname)
@@ -102,6 +125,18 @@ function App() {
     navigate(key)
   }
 
+  if (authState === 'checking') {
+    return (
+      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Spin size="large" />
+      </div>
+    )
+  }
+
+  if (authState === 'login') {
+    return <LoginPage onSuccess={() => setAuthState('ready')} />
+  }
+
   return (
     <Layout style={{ height: '100vh', overflow: 'hidden' }}>
       <Layout.Sider
@@ -120,7 +155,7 @@ function App() {
             height: 56,
             display: 'flex',
             alignItems: 'center',
-            padding: '0 20px',
+            padding: '0 12px 0 20px',
             flexShrink: 0,
             borderBottom: '1px solid rgba(255,255,255,0.06)',
           }}
@@ -128,6 +163,17 @@ function App() {
           <span style={{ color: '#fff', fontWeight: 700, fontSize: 16, letterSpacing: '0.3px' }}>
             AgentEvalTool
           </span>
+          {authRequired && (
+            <Tooltip title="退出登录" placement="right">
+              <Button
+                type="text"
+                size="small"
+                icon={<LogoutOutlined />}
+                onClick={logout}
+                style={{ color: colors.siderText, marginLeft: 'auto' }}
+              />
+            </Tooltip>
+          )}
         </div>
         <Menu
           theme="dark"
diff --git a/frontend/web/src/api.ts b/frontend/web/src/api.ts
index 75707d6..1aa7fc2 100644
--- a/frontend/web/src/api.ts
+++ b/frontend/web/src/api.ts
@@ -1,14 +1,38 @@
 import axios from 'axios'
 import { message } from 'antd'
 
+const AUTH_TOKEN_KEY = 'agenteval_auth_token'
+
+export const authToken = {
+  get: () => sessionStorage.getItem(AUTH_TOKEN_KEY),
+  set: (token: string) => sessionStorage.setItem(AUTH_TOKEN_KEY, token),
+  clear: () => sessionStorage.removeItem(AUTH_TOKEN_KEY),
+}
+
+/** Registered by App to switch back to the login screen on 401. */
+let onUnauthorized: (() => void) | null = null
+export const setOnUnauthorized = (handler: (() => void) | null) => { onUnauthorized = handler }
+
 const api = axios.create({
   baseURL: '/api',
   timeout: 30000,
 })
 
+api.interceptors.request.use((config) => {
+  const token = authToken.get()
+  if (token) config.headers['X-Auth-Token'] = token
+  return config
+})
+
 api.interceptors.response.use(
   (response) => response,
   (error) => {
+    const isLoginCall = error.config?.url?.includes('/auth/login')
+    if (error.response?.status === 401 && !isLoginCall && onUnauthorized) {
+      authToken.clear()
+      onUnauthorized()
+      return Promise.reject(error)
+    }
     const msg = error.response?.data?.detail || error.message || '请求失败'
     message.error(msg)
     return Promise.reject(error)
@@ -17,6 +41,16 @@ api.interceptors.response.use(
 
 export default api
 
+export interface AuthStatus {
+  auth_required: boolean
+  authenticated: boolean
+}
+
+export const authApi = {
+  status: () => api.get<AuthStatus>('/auth/status'),
+  login: (password: string) => api.post<{ token: string }>('/auth/login', { password }),
+}
+
 export interface Target {
   id: string
   name: string
@@ -100,21 +134,39 @@ export interface ModelConfigReference {
   purpose: string
 }
 
+export type RunTrigger = 'manual' | 'ai_assistant' | 'cli'
+
 export interface Run {
   id: string
   target_id: string
   scenario_id: string
   status: string
+  triggered_by?: RunTrigger
+  scenario_name?: string | null
+  target_name?: string | null
   started_at: string
   completed_at: string | null
   summary: Record<string, unknown> | null
 }
 
+export interface ScenarioStat {
+  scenario_id: string
+  scenario_name: string
+  run_count: number
+  avg_pass_rate: number | null
+  last_run_at: string | null
+}
+
 export interface DashboardStats {
   targets_count: number
   scenarios_count: number
   runs_count: number
+  model_configs_count: number
+  today_runs: number
+  running_count: number
   overall_pass_rate: number | null
+  trigger_breakdown: Partial<Record<RunTrigger, number>>
+  scenario_stats: ScenarioStat[]
   recent_runs: Run[]
 }
 
diff --git a/frontend/web/src/components/RunList.tsx b/frontend/web/src/components/RunList.tsx
index 815d725..83577fd 100644
--- a/frontend/web/src/components/RunList.tsx
+++ b/frontend/web/src/components/RunList.tsx
@@ -1,10 +1,10 @@
 import { useMemo, useState } from 'react'
-import { Empty, Input, Pagination, Progress, Segmented, Skeleton, Tooltip } from 'antd'
+import { Empty, Input, Pagination, Progress, Segmented, Skeleton, Tag, Tooltip } from 'antd'
 import { FileTextOutlined, SearchOutlined } from '@ant-design/icons'
 import dayjs from 'dayjs'
 import type { Run, Scenario, Target } from '../api'
 import type { RunProgress } from '../hooks/useRunSession'
-import { colors, statusColors, statusLabels } from '../tokens'
+import { colors, statusColors, statusLabels, triggerColors, triggerLabels } from '../tokens'
 import { elapsedStr, shortDateTime, toDate } from '../utils/date'
 
 const PAGE_SIZE = 10
@@ -292,6 +292,14 @@ function RunRow({ r, selected, targetName, scenarioName, onSelect, onOpenReport,
         <span>{shortDateTime(r.started_at)}</span>
         <span>·</span>
         <span>{elapsedStr(r.started_at, r.completed_at)}</span>
+        {r.triggered_by && r.triggered_by !== 'manual' && (
+          <Tag
+            color={triggerColors[r.triggered_by] ?? 'default'}
+            style={{ marginLeft: 2, marginRight: 0, fontSize: 10, lineHeight: '16px', padding: '0 4px' }}
+          >
+            {triggerLabels[r.triggered_by] ?? r.triggered_by}
+          </Tag>
+        )}
         {onOpenReport && status === 'completed' && (
           <Tooltip title="查看报告">
             <FileTextOutlined
diff --git a/frontend/web/src/hooks/useOnTabActive.ts b/frontend/web/src/hooks/useOnTabActive.ts
new file mode 100644
index 0000000..3bd8668
--- /dev/null
+++ b/frontend/web/src/hooks/useOnTabActive.ts
@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react'
+import { useTabStore } from '../stores/tabStore'
+
+/**
+ * Keep-alive tabs never remount, so "load on mount" data goes stale.
+ * Fires `callback` every time the given tab path becomes active again
+ * (skips the initial mount, which pages already handle themselves).
+ */
+export function useOnTabActive(path: string, callback: () => void) {
+  const activeKey = useTabStore((s) => s.activeKey)
+  const first = useRef(true)
+  const cbRef = useRef(callback)
+  cbRef.current = callback
+
+  useEffect(() => {
+    if (activeKey !== path) return
+    if (first.current) {
+      first.current = false
+      return
+    }
+    cbRef.current()
+  }, [activeKey, path])
+}
diff --git a/frontend/web/src/pages/Home.tsx b/frontend/web/src/pages/Home.tsx
index f15cc2f..f5e955b 100644
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@@ -1,56 +1,39 @@
 import { useEffect, useState } from 'react'
-import { Button, Col, Row, Table, Tag, Spin, Card, Tooltip } from 'antd'
+import { Button, Card, Col, Empty, Progress, Row, Spin, Tag, Tooltip } from 'antd'
 import { Line } from '@ant-design/charts'
+import { useNavigate } from 'react-router-dom'
 import {
   AimOutlined,
+  BarChartOutlined,
+  CheckCircleOutlined,
+  CloudServerOutlined,
   FileTextOutlined,
   PlayCircleOutlined,
-  CheckCircleOutlined,
+  PlusOutlined,
   ReloadOutlined,
+  RobotOutlined,
+  SyncOutlined,
 } from '@ant-design/icons'
-import { runsApi, scenariosApi, targetsApi, type Run, type TrendPoint } from '../api'
+import { statsApi, type DashboardStats, type Run, type TrendPoint } from '../api'
 import PageWrapper from '../components/PageWrapper'
 import StatCard from '../components/StatCard'
+import { useOnTabActive } from '../hooks/useOnTabActive'
+import { colors, statusColors, statusLabels, triggerColors, triggerLabels } from '../tokens'
 import { formatDateTime } from '../utils/date'
+import { passRateColor } from '../utils/colors'
 
 export default function HomePage() {
+  const navigate = useNavigate()
   const [loading, setLoading] = useState(true)
-  const [counts, setCounts] = useState({ targets: 0, scenarios: 0, runs: 0 })
-  const [recentRuns, setRecentRuns] = useState<Run[]>([])
+  const [stats, setStats] = useState<DashboardStats | null>(null)
   const [trend, setTrend] = useState<TrendPoint[]>([])
-  const [passRate, setPassRate] = useState<number | null>(null)
 
   const loadData = async () => {
     setLoading(true)
     try {
-      const [t, s, r] = await Promise.all([
-        targetsApi.list(),
-        scenariosApi.list(),
-        runsApi.list(),
-      ])
-      const runs = r.data
-      setCounts({
-        targets: t.data.length,
-        scenarios: s.data.length,
-        runs: runs.length,
-      })
-      setRecentRuns(runs.slice(-10).reverse())
-
-      const completedRuns = runs.filter((run) => run.status === 'completed' && run.summary)
-      if (completedRuns.length > 0) {
-        const totalRate = completedRuns.reduce(
-          (sum, run) => sum + ((run.summary as any)?.pass_rate || 0),
-          0,
-        )
-        setPassRate(totalRate / completedRuns.length)
-      }
-
-      const trendData: TrendPoint[] = completedRuns.map((run) => ({
-        date: run.started_at?.split('T')[0] || '',
-        pass_rate: ((run.summary as any)?.pass_rate || 0) * 100,
-        run_count: 1,
-      }))
-      setTrend(trendData)
+      const [d, t] = await Promise.all([statsApi.dashboard(), statsApi.trend(30)])
+      setStats(d.data)
+      setTrend(t.data)
     } catch {
       // errors handled by interceptor
     } finally {
@@ -59,39 +42,25 @@ export default function HomePage() {
   }
 
   useEffect(() => { loadData() }, [])
+  useOnTabActive('/', loadData)
 
-  const statusColor: Record<string, string> = {
-    completed: 'success',
-    running: 'processing',
-    pending: 'default',
-    failed: 'error',
-  }
-
-  const columns = [
-    { title: 'Run ID', dataIndex: 'id', key: 'id', ellipsis: true, width: 240 },
-    { title: '状态', dataIndex: 'status', key: 'status', width: 100,
-      render: (s: string) => <Tag color={statusColor[s] || 'default'}>{s}</Tag>,
-    },
-    { title: '开始时间', dataIndex: 'started_at', key: 'started_at', width: 180,
-      render: (t: string) => t ? formatDateTime(t) : '-',
-    },
-    { title: '通过率', key: 'pass_rate', width: 100,
-      render: (_: any, record: Run) => {
-        const rate = (record.summary as any)?.pass_rate
-        return rate != null ? `${(rate * 100).toFixed(0)}%` : '-'
-      },
-    },
-  ]
+  const passRate = stats?.overall_pass_rate ?? null
 
   const trendConfig = {
     data: trend,
     xField: 'date',
     yField: 'pass_rate',
     smooth: true,
-    height: 200,
+    height: 240,
     yAxis: { label: { formatter: (v: string) => `${v}%` }, min: 0, max: 100 },
     point: { size: 3 },
     color: '#1677ff',
+    tooltip: {
+      formatter: (datum: TrendPoint) => ({
+        name: '通过率',
+        value: `${datum.pass_rate}%（${datum.run_count ?? '-'} 次执行）`,
+      }),
+    },
   }
 
   return (
@@ -106,58 +75,163 @@ export default function HomePage() {
         </Tooltip>
       }
     >
-      {/* 内容区 — 可滚动 */}
-      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 16px' }}>
+      <div style={{ height: '100%', overflowY: 'auto', padding: '0 16px 16px' }}>
         <Spin spinning={loading}>
+          {/* 指标卡行 */}
           <Row gutter={[16, 16]}>
-            <Col xs={24} sm={12} lg={6}>
-              <StatCard icon={<AimOutlined />} color="blue" title="评测对象" value={counts.targets} />
+            <Col xs={12} sm={8} xl={4}>
+              <StatCard icon={<AimOutlined />} color="blue" title="评测对象" value={stats?.targets_count ?? 0} />
             </Col>
-            <Col xs={24} sm={12} lg={6}>
-              <StatCard icon={<FileTextOutlined />} color="green" title="评测场景" value={counts.scenarios} />
+            <Col xs={12} sm={8} xl={4}>
+              <StatCard icon={<FileTextOutlined />} color="green" title="评测场景" value={stats?.scenarios_count ?? 0} />
             </Col>
-            <Col xs={24} sm={12} lg={6}>
-              <StatCard icon={<PlayCircleOutlined />} color="orange" title="评测执行" value={counts.runs} />
+            <Col xs={12} sm={8} xl={4}>
+              <StatCard icon={<CloudServerOutlined />} color="purple" title="模型配置" value={stats?.model_configs_count ?? 0} />
             </Col>
-            <Col xs={24} sm={12} lg={6}>
+            <Col xs={12} sm={8} xl={4}>
+              <StatCard
+                icon={<PlayCircleOutlined />} color="orange" title="累计执行"
+                value={stats?.runs_count ?? 0}
+                suffix={stats?.today_runs ? ` / 今日 ${stats.today_runs}` : undefined}
+              />
+            </Col>
+            <Col xs={12} sm={8} xl={4}>
+              <StatCard
+                icon={<SyncOutlined spin={(stats?.running_count ?? 0) > 0} />}
+                color={(stats?.running_count ?? 0) > 0 ? 'blue' : 'green'}
+                title="运行中"
+                value={stats?.running_count ?? 0}
+                valueStyle={(stats?.running_count ?? 0) > 0 ? { color: '#1677ff' } : undefined}
+              />
+            </Col>
+            <Col xs={12} sm={8} xl={4}>
               <StatCard
                 icon={<CheckCircleOutlined />}
-                color="purple"
+                color={passRate != null && passRate >= 0.8 ? 'green' : 'red'}
                 title="平均通过率"
-                value={passRate != null ? passRate * 100 : 0}
-                suffix="%"
+                value={passRate != null ? passRate * 100 : '-'}
+                suffix={passRate != null ? '%' : undefined}
                 precision={1}
-                valueStyle={{ color: passRate != null && passRate >= 0.8 ? '#52c41a' : '#ff4d4f' }}
+                valueStyle={{ color: passRate != null ? passRateColor(passRate) : colors.textMuted }}
               />
             </Col>
           </Row>
 
+          {/* 图表行 */}
           <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
             <Col xs={24} lg={14}>
-              <Card title="最近评测记录">
-                <Table
-                  dataSource={recentRuns}
-                  columns={columns}
-                  rowKey="id"
-                  size="small"
-                  pagination={false}
-                />
-              </Card>
-            </Col>
-            <Col xs={24} lg={10}>
-              <Card title="通过率趋势">
+              <Card title="通过率趋势（近 30 天）" size="small" styles={{ body: { minHeight: 260 } }}>
                 {trend.length > 0 ? (
                   <Line {...trendConfig} />
                 ) : (
-                  <div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#9ca3af' }}>
-                    暂无趋势数据
-                  </div>
+                  <Empty style={{ paddingTop: 60 }} description="暂无趋势数据" />
                 )}
               </Card>
             </Col>
+            <Col xs={24} lg={10}>
+              <Card title="场景表现" size="small" styles={{ body: { minHeight: 260, overflowY: 'auto', maxHeight: 300 } }}>
+                {stats?.scenario_stats.length ? stats.scenario_stats.map((s) => (
+                  <div
+                    key={s.scenario_id}
+                    onClick={() => navigate('/reports')}
+                    style={{ padding: '8px 4px', cursor: 'pointer', borderBottom: `1px solid ${colors.border}` }}
+                  >
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
+                      <span style={{ fontSize: 13, fontWeight: 500 }}>{s.scenario_name}</span>
+                      <span style={{ fontSize: 12, color: colors.textSecondary }}>
+                        {s.run_count} 次 · {s.last_run_at ? formatDateTime(s.last_run_at) : '-'}
+                      </span>
+                    </div>
+                    <Progress
+                      percent={s.avg_pass_rate != null ? Math.round(s.avg_pass_rate * 100) : 0}
+                      size="small"
+                      strokeColor={s.avg_pass_rate != null ? passRateColor(s.avg_pass_rate) : colors.textMuted}
+                    />
+                  </div>
+                )) : <Empty style={{ paddingTop: 60 }} description="暂无已完成的评测" />}
+              </Card>
+            </Col>
+          </Row>
+
+          {/* 动态行 */}
+          <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
+            <Col xs={24} lg={14}>
+              <Card title="最近评测记录" size="small">
+                {stats?.recent_runs.length ? stats.recent_runs.map((r) => (
+                  <RecentRunRow key={r.id} run={r} onOpen={() => navigate(r.status === 'completed' ? `/reports?run=${r.id}` : '/runs')} />
+                )) : <Empty description="还没有评测记录" />}
+              </Card>
+            </Col>
+            <Col xs={24} lg={10}>
+              <Card title="快捷操作" size="small" style={{ marginBottom: 16 }}>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
+                  <Button icon={<PlayCircleOutlined />} onClick={() => navigate('/runs')}>发起评测</Button>
+                  <Button icon={<PlusOutlined />} onClick={() => navigate('/scenarios')}>新建场景</Button>
+                  <Button icon={<RobotOutlined />} onClick={() => navigate('/openclaw')}>AI 助手</Button>
+                </div>
+              </Card>
+              <Card title="触发来源分布" size="small">
+                {stats && Object.keys(stats.trigger_breakdown).length > 0 ? (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                    {(Object.entries(stats.trigger_breakdown) as Array<[string, number]>).map(([k, count]) => (
+                      <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <Tag color={triggerColors[k] ?? 'default'} style={{ margin: 0, width: 72, textAlign: 'center' }}>
+                          {triggerLabels[k] ?? k}
+                        </Tag>
+                        <Progress
+                          percent={stats.runs_count ? Math.round((count / stats.runs_count) * 100) : 0}
+                          size="small"
+                          style={{ flex: 1, margin: 0 }}
+                        />
+                        <span style={{ fontSize: 12, color: colors.textSecondary, width: 40, textAlign: 'right' }}>{count} 次</span>
+                      </div>
+                    ))}
+                  </div>
+                ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />}
+              </Card>
+            </Col>
           </Row>
         </Spin>
       </div>
     </PageWrapper>
   )
 }
+
+function RecentRunRow({ run, onOpen }: { run: Run; onOpen: () => void }) {
+  const rate = (run.summary as Record<string, unknown>)?.pass_rate as number | undefined
+  const dotColor = statusColors[run.status] ?? colors.textMuted
+  const trigger = run.triggered_by ?? 'manual'
+  return (
+    <div
+      className="run-row"
+      onClick={onOpen}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 10,
+        padding: '8px 4px', cursor: 'pointer',
+        borderBottom: `1px solid ${colors.border}`,
+      }}
+    >
+      <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor, flexShrink: 0 }} />
+      <div style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 13 }}>
+        <span style={{ fontWeight: 500 }}>{run.scenario_name || run.scenario_id.slice(0, 8)}</span>
+        <span style={{ color: colors.textMuted }}> · {run.target_name || run.target_id.slice(0, 8)}</span>
+      </div>
+      {trigger !== 'manual' && (
+        <Tag color={triggerColors[trigger] ?? 'default'} style={{ margin: 0, fontSize: 10, lineHeight: '16px', padding: '0 4px' }}>
+          {triggerLabels[trigger] ?? trigger}
+        </Tag>
+      )}
+      <span style={{ fontSize: 12, color: dotColor, width: 48, flexShrink: 0 }}>{statusLabels[run.status] ?? run.status}</span>
+      <span style={{
+        fontSize: 12, fontWeight: 600, width: 44, textAlign: 'right', flexShrink: 0,
+        color: rate != null ? passRateColor(rate) : colors.textMuted,
+      }}>
+        {rate != null ? `${Math.round(rate * 100)}%` : '-'}
+      </span>
+      <span style={{ fontSize: 12, color: colors.textMuted, width: 130, textAlign: 'right', flexShrink: 0 }}>
+        {run.started_at ? formatDateTime(run.started_at) : '-'}
+      </span>
+      <BarChartOutlined style={{ color: colors.textMuted }} />
+    </div>
+  )
+}
diff --git a/frontend/web/src/pages/Login.tsx b/frontend/web/src/pages/Login.tsx
new file mode 100644
index 0000000..cefebb7
--- /dev/null
+++ b/frontend/web/src/pages/Login.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Button, Card, Form, Input, message } from 'antd'
+import { LockOutlined } from '@ant-design/icons'
+import { authApi, authToken } from '../api'
+import { colors } from '../tokens'
+
+export default function LoginPage({ onSuccess }: { onSuccess: () => void }) {
+  const [loading, setLoading] = useState(false)
+
+  const submit = async ({ password }: { password: string }) => {
+    setLoading(true)
+    try {
+      const res = await authApi.login(password)
+      authToken.set(res.data.token)
+      message.success('登录成功')
+      onSuccess()
+    } catch {
+      // 错误提示由 axios 拦截器统一弹出（如"密码错误"）
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div style={{
+      height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: `linear-gradient(160deg, ${colors.sider} 0%, #2e3250 100%)`,
+    }}>
+      <Card style={{ width: 360, boxShadow: '0 8px 32px rgba(0,0,0,0.35)' }}>
+        <div style={{ textAlign: 'center', marginBottom: 24 }}>
+          <div style={{ fontSize: 22, fontWeight: 700, color: colors.text }}>AgentEvalTool</div>
+          <div style={{ fontSize: 13, color: colors.textSecondary, marginTop: 4 }}>
+            智能体质量评估平台
+          </div>
+        </div>
+        <Form onFinish={submit} autoComplete="off">
+          <Form.Item name="password" rules={[{ required: true, message: '请输入访问密码' }]}>
+            <Input.Password
+              size="large"
+              prefix={<LockOutlined style={{ color: colors.textMuted }} />}
+              placeholder="访问密码"
+              autoFocus
+            />
+          </Form.Item>
+          <Button type="primary" htmlType="submit" size="large" block loading={loading}>
+            登录
+          </Button>
+        </Form>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontend/web/src/pages/ModelConfigs.tsx b/frontend/web/src/pages/ModelConfigs.tsx
index 031e43d..3817073 100644
--- a/frontend/web/src/pages/ModelConfigs.tsx
+++ b/frontend/web/src/pages/ModelConfigs.tsx
@@ -33,13 +33,6 @@ const modalityLabels: Record<ModelModality, string> = {
   video: '视频',
 }
 
-const modalityColors: Record<ModelModality, string> = {
-  text: 'default',
-  image: 'cyan',
-  audio: 'magenta',
-  video: 'purple',
-}
-
 const modalityOptions = Object.entries(modalityLabels).map(([value, label]) => ({ value, label }))
 
 const featureLabels: Array<[keyof Pick<
@@ -54,6 +47,13 @@ const featureLabels: Array<[keyof Pick<
 
 const formatTokens = (value: number | null) => value ? new Intl.NumberFormat('zh-CN').format(value) : '-'
 
+const compactTokens = (value: number | null) => {
+  if (!value) return '-'
+  if (value >= 1000000 && value % 100000 === 0) return `${value / 1000000}M`
+  if (value >= 1000) return `${Math.round(value / 1000)}K`
+  return String(value)
+}
+
 const protocolOptions: Record<ModelProtocol, {
   label: string
   capabilities: ModelCapability[]
@@ -207,7 +207,8 @@ export default function ModelConfigsPage() {
 
   const columns = [
     {
-      title: '配置名称', dataIndex: 'name', key: 'name', width: 220,
+      // 配置名称 + 默认/厂商/区域 + Endpoint 摘要
+      title: '配置名称', dataIndex: 'name', key: 'name',
       render: (value: string, record: ModelConfig) => (
         <div style={{ minWidth: 0 }}>
           <Space size={6}>
@@ -216,84 +217,96 @@ export default function ModelConfigsPage() {
             </Tooltip>
             {record.is_default && <Tag color="gold" style={{ margin: 0 }}>默认</Tag>}
           </Space>
-          {(record.vendor_name || record.region) && (
-            <div style={{ color: '#8c8c8c', fontSize: 12, marginTop: 3 }}>
-              {[record.vendor_name, record.region].filter(Boolean).join(' · ')}
+          <Tooltip title={record.endpoint_url}>
+            <div style={{
+              color: '#8c8c8c', fontSize: 12, marginTop: 3,
+              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 260,
+            }}>
+              {[record.vendor_name, record.region].filter(Boolean).join(' · ') || record.endpoint_url}
             </div>
-          )}
+          </Tooltip>
         </div>
       ),
     },
     {
-      title: '协议', dataIndex: 'provider', key: 'provider', width: 150,
-      render: (value: ModelProtocol) => <Tag>{protocolOptions[value]?.label || value}</Tag>,
-    },
-    {
-      title: '能力', dataIndex: 'capability', key: 'capability', width: 110,
-      render: (value: ModelCapability) => <Tag color={capabilityColors[value]}>{capabilityLabels[value]}</Tag>,
-    },
-    {
-      title: '输入 / 输出', key: 'modalities', width: 230,
+      // 模型名 + 协议
+      title: '模型 / 协议', key: 'model', width: 200,
       render: (_: unknown, record: ModelConfig) => (
-        <Space direction="vertical" size={3}>
-          <Space size={4} wrap>
-            <span style={{ color: '#8c8c8c', fontSize: 12, width: 28 }}>输入</span>
-            {record.input_modalities.map((value) => (
-              <Tag key={`input-${value}`} color={modalityColors[value]} style={{ margin: 0 }}>
-                {modalityLabels[value]}
-              </Tag>
-            ))}
-          </Space>
-          <Space size={4} wrap>
-            <span style={{ color: '#8c8c8c', fontSize: 12, width: 28 }}>输出</span>
-            {record.output_modalities.map((value) => (
-              <Tag key={`output-${value}`} color={modalityColors[value]} style={{ margin: 0 }}>
-                {modalityLabels[value]}
-              </Tag>
-            ))}
-          </Space>
-        </Space>
-      ),
-    },
-    {
-      title: '模型', dataIndex: 'model_name', key: 'model_name', width: 180, ellipsis: true,
-      render: (value: string | null) => value || '-',
-    },
-    {
-      title: '规格', key: 'limits', width: 170,
-      render: (_: unknown, record: ModelConfig) => (
-        <div style={{ fontSize: 12, lineHeight: 1.7 }}>
-          <div><span style={{ color: '#8c8c8c' }}>上下文 </span>{formatTokens(record.context_window)}</div>
-          <div><span style={{ color: '#8c8c8c' }}>最大输出 </span>{formatTokens(record.max_output_tokens)}</div>
+        <div style={{ minWidth: 0 }}>
+          <div style={{
+            fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180,
+          }}>
+            {record.model_name || '-'}
+          </div>
+          <div style={{ color: '#8c8c8c', fontSize: 12, marginTop: 3 }}>
+            {protocolOptions[record.provider]?.label || record.provider}
+          </div>
         </div>
       ),
     },
     {
-      title: '特性', key: 'features', width: 210,
+      // 能力 + 输入/输出模态
+      title: '能力 / 模态', key: 'capability', width: 200,
       render: (_: unknown, record: ModelConfig) => {
-        const enabledFeatures = featureLabels.filter(([key]) => record[key])
-        return enabledFeatures.length ? (
-          <Space size={[4, 4]} wrap>
-            {enabledFeatures.map(([key, label]) => <Tag key={key} style={{ margin: 0 }}>{label}</Tag>)}
+        const modalityLine = (values: ModelModality[]) =>
+          values.map((v) => modalityLabels[v]).join('、')
+        return (
+          <Space size={6} align="start">
+            <Tag color={capabilityColors[record.capability]} style={{ margin: 0 }}>
+              {capabilityLabels[record.capability]}
+            </Tag>
+            <span style={{ color: '#8c8c8c', fontSize: 12, lineHeight: '22px' }}>
+              {modalityLine(record.input_modalities)} → {modalityLine(record.output_modalities)}
+            </span>
           </Space>
-        ) : '-'
+        )
       },
     },
-    { title: 'Endpoint', dataIndex: 'endpoint_url', key: 'endpoint_url', width: 260, ellipsis: true },
     {
-      title: '凭据', dataIndex: 'has_api_key', key: 'has_api_key', width: 90,
-      render: (value: boolean) => value ? <Tag color="success">已配置</Tag> : <Tag>无</Tag>,
+      // 上下文/最大输出 + 特性
+      title: '规格 / 特性', key: 'spec', width: 210,
+      render: (_: unknown, record: ModelConfig) => {
+        const enabledFeatures = featureLabels.filter(([key]) => record[key])
+        return (
+          <div style={{ fontSize: 12 }}>
+            <Tooltip title={`上下文 ${formatTokens(record.context_window)} / 最大输出 ${formatTokens(record.max_output_tokens)}`}>
+              <span>
+                <span style={{ color: '#8c8c8c' }}>上下文 </span>{compactTokens(record.context_window)}
+                <span style={{ color: '#8c8c8c' }}>　输出 </span>{compactTokens(record.max_output_tokens)}
+              </span>
+            </Tooltip>
+            {enabledFeatures.length > 0 && (
+              <div style={{ marginTop: 4, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                {enabledFeatures.map(([key, label]) => (
+                  <Tag key={key} style={{ margin: 0, fontSize: 11, lineHeight: '18px', padding: '0 5px' }}>{label}</Tag>
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      },
     },
     {
-      title: '状态', dataIndex: 'enabled', key: 'enabled', width: 90,
-      render: (value: boolean) => value ? <Tag color="success">启用</Tag> : <Tag>停用</Tag>,
+      // 状态 + 凭据 + 更新时间
+      title: '状态', key: 'status', width: 150,
+      render: (_: unknown, record: ModelConfig) => (
+        <div>
+          <Space size={4}>
+            {record.enabled ? <Tag color="success" style={{ margin: 0 }}>启用</Tag> : <Tag style={{ margin: 0 }}>停用</Tag>}
+            {record.has_api_key
+              ? <Tag color="blue" style={{ margin: 0 }}>有凭据</Tag>
+              : <Tag style={{ margin: 0 }}>无凭据</Tag>}
+          </Space>
+          <Tooltip title={`更新于 ${formatDateTime(record.updated_at)}`}>
+            <div style={{ color: '#8c8c8c', fontSize: 12, marginTop: 3 }}>
+              {formatDateTime(record.updated_at)}
+            </div>
+          </Tooltip>
+        </div>
+      ),
     },
     {
-      title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 170,
-      render: (value: string | null) => formatDateTime(value),
-    },
-    {
-      title: '操作', key: 'actions', width: 145, fixed: 'right' as const,
+      title: '操作', key: 'actions', width: 110,
       render: (_: unknown, record: ModelConfig) => (
         <Space size={2}>
           <Tooltip title="连接测试">
@@ -355,8 +368,9 @@ export default function ModelConfigsPage() {
           rowKey="id"
           loading={loading}
           pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (total) => `共 ${total} 个` }}
-          scroll={{ x: 1800, y: 'calc(100vh - 200px)' }}
+          scroll={{ y: 'calc(100vh - 200px)' }}
           style={{ height: '100%' }}
+          tableLayout="auto"
         />
       </div>
 
diff --git a/frontend/web/src/pages/Reports.tsx b/frontend/web/src/pages/Reports.tsx
index da733b7..2e5f963 100644
--- a/frontend/web/src/pages/Reports.tsx
+++ b/frontend/web/src/pages/Reports.tsx
@@ -1,17 +1,18 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import {
   Button, Card, Col, Collapse, Descriptions, Empty, Row, Segmented,
-  Select, Space, Spin, Statistic, Table, Tag, Tooltip, Badge,
+  Select, Space, Spin, Statistic, Table, Tag, Tooltip, Badge, message,
 } from 'antd'
 import {
-  CheckCircleOutlined, CloseCircleOutlined,
+  CheckCircleOutlined, CloseCircleOutlined, ClearOutlined,
   DownloadOutlined, UserOutlined, RobotOutlined, ReloadOutlined,
   DiffOutlined, FileMarkdownOutlined,
 } from '@ant-design/icons'
 import { reportsApi, runsApi, type Run } from '../api'
-import { colors } from '../tokens'
+import { colors, triggerColors, triggerLabels } from '../tokens'
 import { formatDateTime } from '../utils/date'
+import { useOnTabActive } from '../hooks/useOnTabActive'
 
 interface TurnData {
   sent_text: string
@@ -72,6 +73,7 @@ export default function ReportsPage() {
   const runQuery = searchParams.get('run') ?? ''
 
   const [runs, setRuns] = useState<Run[]>([])
+  const [scenarioFilter, setScenarioFilter] = useState<string>('')
   const [selectedRunId, setSelectedRunId] = useState<string>('')
   const [compareRunId, setCompareRunId] = useState<string>('')
   const [report, setReport] = useState<Report | null>(null)
@@ -93,8 +95,8 @@ export default function ReportsPage() {
 
   const loadRuns = async () => {
     const res = await runsApi.list()
-    const completed = res.data.filter((r) => r.status === 'completed').reverse()
-    setRuns(completed)
+    // API 已按 started_at DESC 排序，最新的在前
+    setRuns(res.data.filter((r) => r.status === 'completed'))
   }
 
   useEffect(() => {
@@ -104,6 +106,10 @@ export default function ReportsPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  // Keep-alive tabs never remount: refresh whenever this tab is re-activated
+  // so runs triggered elsewhere (e.g. AI assistant) show up.
+  useOnTabActive('/reports', loadRuns)
+
   useEffect(() => {
     if (runQuery && runQuery !== selectedRunId) {
       loadReport(runQuery)
@@ -114,6 +120,10 @@ export default function ReportsPage() {
   const handleView = (runId: string) => {
     setSearchParams({ run: runId })
     loadReport(runId)
+    // 对比报告要求同场景：A 变更后若 B 场景不同则清空
+    const a = runs.find((r) => r.id === runId)
+    const b = runs.find((r) => r.id === compareRunId)
+    if (a && b && a.scenario_id !== b.scenario_id) setCompareRunId('')
   }
 
   const handleCompare = async () => {
@@ -122,15 +132,82 @@ export default function ReportsPage() {
     try {
       const res = await reportsApi.compare(selectedRunId, compareRunId)
       setCompareResult(res.data as CompareResult)
+    } catch (e: any) {
+      const detail = e?.response?.data?.detail
+      if (detail) message.error(detail)
     } finally {
       setLoading(false)
     }
   }
 
-  const runSelectOptions = runs.map((r) => ({
-    value: r.id,
-    label: `${r.id.slice(0, 8)}… | ${r.started_at ? formatDateTime(r.started_at) : ''}`,
-  }))
+  const clearSelection = () => {
+    setSelectedRunId('')
+    setCompareRunId('')
+    setReport(null)
+    setCompareResult(null)
+    setSearchParams({})
+  }
+
+  const resetFilters = () => {
+    setScenarioFilter('')
+    clearSelection()
+  }
+
+  // 场景筛选项：从 run 列表聚合（含各场景 run 数量）
+  const scenarioOptions = useMemo(() => {
+    const map = new Map<string, { name: string; count: number }>()
+    for (const r of runs) {
+      const entry = map.get(r.scenario_id)
+      if (entry) entry.count += 1
+      else map.set(r.scenario_id, { name: r.scenario_name || r.scenario_id.slice(0, 8), count: 1 })
+    }
+    return [...map.entries()].map(([id, s]) => ({ value: id, label: `${s.name}（${s.count}）` }))
+  }, [runs])
+
+  const filteredRuns = useMemo(
+    () => (scenarioFilter ? runs.filter((r) => r.scenario_id === scenarioFilter) : runs),
+    [runs, scenarioFilter],
+  )
+
+  const buildOption = (r: Run) => {
+    const passRate = (r.summary as Record<string, unknown>)?.pass_rate as number | undefined
+    const pct = passRate != null ? `${Math.round(passRate * 100)}%` : '-'
+    const scenario = r.scenario_name || r.scenario_id.slice(0, 8)
+    const target = r.target_name || r.target_id.slice(0, 8)
+    const time = r.started_at ? formatDateTime(r.started_at) : ''
+    const trigger = r.triggered_by ?? 'manual'
+    return {
+      value: r.id,
+      searchText: `${scenario} ${target} ${time} ${r.id} ${triggerLabels[trigger] ?? trigger}`.toLowerCase(),
+      label: (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis' }}>{scenario}</span>
+          <span style={{ color: colors.textMuted }}>· {target}</span>
+          <span style={{ color: colors.textMuted, fontSize: 12 }}>{time}</span>
+          <span style={{
+            color: passRate != null && passRate >= 0.8 ? '#3f8600' : '#cf1322',
+            fontSize: 12, fontWeight: 600,
+          }}>{pct}</span>
+          {trigger !== 'manual' && (
+            <Tag color={triggerColors[trigger] ?? 'default'} style={{ marginRight: 0, fontSize: 10, lineHeight: '16px', padding: '0 4px' }}>
+              {triggerLabels[trigger] ?? trigger}
+            </Tag>
+          )}
+        </span>
+      ),
+    }
+  }
+
+  const runSelectOptions = filteredRuns.map(buildOption)
+
+  // 报告 B 只能选与报告 A 同场景的 run
+  const selectedRun = runs.find((r) => r.id === selectedRunId)
+  const compareOptions = runs
+    .filter((r) => r.id !== selectedRunId && selectedRun && r.scenario_id === selectedRun.scenario_id)
+    .map(buildOption)
+
+  const optionFilter = (input: string, opt?: { searchText?: string }) =>
+    (opt?.searchText ?? '').includes(input.toLowerCase())
 
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
@@ -144,72 +221,96 @@ export default function ReportsPage() {
         <span style={{ fontSize: 13, color: colors.textSecondary }}>查看评测结果详情与统计分析</span>
       </div>
 
-      {/* 选择栏 */}
+      {/* 选择栏：两行布局，避免对比模式下控件换行错乱 */}
       <div style={{
         padding: '8px 16px', flexShrink: 0,
         borderBottom: `1px solid ${colors.border}`,
         background: colors.bgSubtle,
-        display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
+        display: 'flex', flexDirection: 'column', gap: 8,
       }}>
-        <Segmented
-          value={viewMode}
-          onChange={(v) => { setViewMode(v as ViewMode); setCompareResult(null) }}
-          options={[
-            { label: '单次报告', value: 'single' },
-            { label: '对比报告', value: 'compare', icon: <DiffOutlined /> },
-          ]}
-        />
+        {/* 第一行：视图模式 + 场景筛选 + 重置/刷新 */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <Segmented
+            value={viewMode}
+            onChange={(v) => { setViewMode(v as ViewMode); setCompareResult(null) }}
+            options={[
+              { label: '单次报告', value: 'single' },
+              { label: '对比报告', value: 'compare', icon: <DiffOutlined /> },
+            ]}
+          />
+          <Select
+            style={{ width: 320 }}
+            value={scenarioFilter || undefined}
+            placeholder={`全部场景（${runs.length}）`}
+            allowClear
+            onChange={(v) => setScenarioFilter(v ?? '')}
+            options={scenarioOptions}
+            popupMatchSelectWidth={false}
+          />
+          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
+            <Tooltip title="重置筛选与选择">
+              <Button size="middle" icon={<ClearOutlined />} onClick={resetFilters}>重置</Button>
+            </Tooltip>
+            <Tooltip title="刷新列表">
+              <Button size="middle" icon={<ReloadOutlined />} onClick={loadRuns} />
+            </Tooltip>
+          </div>
+        </div>
 
-        <Select
-          style={{ width: 340 }}
-          placeholder={viewMode === 'compare' ? '选择报告 A' : '选择已完成的评测记录'}
-          value={selectedRunId || undefined}
-          onChange={handleView}
-          showSearch
-          filterOption={(input, opt) =>
-            (opt?.label as string ?? '').toLowerCase().includes(input.toLowerCase())}
-          options={runSelectOptions}
-        />
+        {/* 第二行：报告选择 + 操作 */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <Select
+            style={{ flex: 1, minWidth: 320, maxWidth: 680 }}
+            placeholder={viewMode === 'compare' ? '选择报告 A' : '选择已完成的评测记录'}
+            value={selectedRunId || undefined}
+            onChange={(v) => (v ? handleView(v) : clearSelection())}
+            allowClear
+            showSearch
+            filterOption={optionFilter}
+            options={runSelectOptions}
+            popupMatchSelectWidth={false}
+          />
 
-        {viewMode === 'compare' && (
-          <>
-            <span style={{ color: colors.textMuted, fontSize: 12 }}>vs</span>
-            <Select
-              style={{ width: 340 }}
-              placeholder="选择报告 B"
-              value={compareRunId || undefined}
-              onChange={setCompareRunId}
-              showSearch
-              filterOption={(input, opt) =>
-                (opt?.label as string ?? '').toLowerCase().includes(input.toLowerCase())}
-              options={runSelectOptions.filter((o) => o.value !== selectedRunId)}
-            />
-            <Button
-              type="primary"
-              icon={<DiffOutlined />}
-              disabled={!selectedRunId || !compareRunId}
-              onClick={handleCompare}
-            >
-              对比
-            </Button>
-          </>
-        )}
+          {viewMode === 'compare' && (
+            <>
+              <span style={{ color: colors.textMuted, fontSize: 12, flexShrink: 0 }}>vs</span>
+              <Tooltip title={selectedRunId ? '仅可选择与报告 A 相同场景的记录' : '请先选择报告 A'}>
+                <Select
+                  style={{ flex: 1, minWidth: 320, maxWidth: 680 }}
+                  placeholder="选择报告 B（同场景）"
+                  value={compareRunId || undefined}
+                  onChange={(v) => { setCompareRunId(v ?? ''); if (!v) setCompareResult(null) }}
+                  allowClear
+                  showSearch
+                  disabled={!selectedRunId}
+                  filterOption={optionFilter}
+                  options={compareOptions}
+                  popupMatchSelectWidth={false}
+                  notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="没有同场景的其他评测记录" />}
+                />
+              </Tooltip>
+              <Button
+                type="primary"
+                icon={<DiffOutlined />}
+                disabled={!selectedRunId || !compareRunId}
+                onClick={handleCompare}
+                style={{ flexShrink: 0 }}
+              >
+                对比
+              </Button>
+            </>
+          )}
 
-        {viewMode === 'single' && report && (
-          <Space>
-            <Button icon={<DownloadOutlined />} onClick={() => window.open(`/api/reports/${selectedRunId}/html`, '_blank')}>
-              导出 HTML
-            </Button>
-            <Button icon={<FileMarkdownOutlined />} onClick={() => window.open(reportsApi.markdownUrl(selectedRunId), '_blank')}>
-              导出 MD
-            </Button>
-          </Space>
-        )}
-
-        <div style={{ marginLeft: 'auto' }}>
-          <Tooltip title="刷新列表">
-            <Button size="middle" icon={<ReloadOutlined />} onClick={loadRuns} />
-          </Tooltip>
+          {viewMode === 'single' && report && (
+            <Space style={{ flexShrink: 0 }}>
+              <Button icon={<DownloadOutlined />} onClick={() => window.open(`/api/reports/${selectedRunId}/html`, '_blank')}>
+                导出 HTML
+              </Button>
+              <Button icon={<FileMarkdownOutlined />} onClick={() => window.open(reportsApi.markdownUrl(selectedRunId), '_blank')}>
+                导出 MD
+              </Button>
+            </Space>
+          )}
         </div>
       </div>
 
diff --git a/frontend/web/src/pages/Runs.tsx b/frontend/web/src/pages/Runs.tsx
index 696a895..dc0f197 100644
--- a/frontend/web/src/pages/Runs.tsx
+++ b/frontend/web/src/pages/Runs.tsx
@@ -13,6 +13,7 @@ import RuleOverview from '../components/RuleOverview'
 import CaseDetail from '../components/CaseDetail'
 import { useRunSession } from '../hooks/useRunSession'
 import { useTicker } from '../hooks/useTicker'
+import { useOnTabActive } from '../hooks/useOnTabActive'
 import { colors, statusColors, statusLabels } from '../tokens'
 import { formatDateTime, elapsedStr } from '../utils/date'
 import { passRateColor } from '../utils/colors'
@@ -52,6 +53,10 @@ export default function RunsPage() {
 
   useEffect(() => { loadLists() }, [])
 
+  // Keep-alive tabs never remount: refresh the list whenever the tab is
+  // re-activated so runs triggered elsewhere (e.g. AI assistant) show up.
+  useOnTabActive('/runs', loadLists)
+
   useEffect(() => {
     if (!session.isLive) return
     const id = window.setInterval(() => {
diff --git a/frontend/web/src/tokens.ts b/frontend/web/src/tokens.ts
index f8dc781..e89fcfe 100644
--- a/frontend/web/src/tokens.ts
+++ b/frontend/web/src/tokens.ts
@@ -43,6 +43,18 @@ export const statusLabels: Record<string, string> = {
   cancelled: '已取消',
 }
 
+export const triggerLabels: Record<string, string> = {
+  manual: '手动',
+  ai_assistant: 'AI 助手',
+  cli: 'CLI',
+}
+
+export const triggerColors: Record<string, string> = {
+  manual: 'default',
+  ai_assistant: 'purple',
+  cli: 'blue',
+}
+
 export const spacing = {
   xs: 4,
   sm: 8,
diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts
index d2547cd..424e51e 100644
--- a/frontend/web/vite.config.ts
+++ b/frontend/web/vite.config.ts
@@ -22,6 +22,14 @@ export default defineConfig({
     },
   },
   build: {
+    // Accepted oversized chunks (measured 2026-07-28):
+    //   vendor      ~2.12 MB min / ~650 kB gzip — react + @ant-design/charts
+    //                (charts CANNOT be split out: forced separate chunk creates
+    //                a circular reference and a runtime TDZ crash, and charts
+    //                loads on the default Home route anyway)
+    //   vendor-antd ~620 kB min / ~173 kB gzip
+    // Warning fires only above this limit, i.e. on a real size regression.
+    chunkSizeWarningLimit: 2200,
     rollupOptions: {
       output: {
         manualChunks(id) {
@@ -37,8 +45,8 @@ export default defineConfig({
           // NOTE: do NOT split @ant-design/charts into its own chunk — its deep
           // @antv dependency graph creates a circular chunk reference that causes
           // a runtime TDZ crash ("Cannot access 'd' before initialization").
-          // charts is loaded on the Home page (default route) anyway, so a
-          // separate chunk buys almost nothing.
+          // Returning undefined for @antv doesn't help either: rollup still
+          // merges it into vendor (verified 2026-07-28).
           if (id.includes('node_modules')) {
             return 'vendor'
           }