From 6fb46b100a9ff83d995cfe3912af8a0d02767989 Mon Sep 17 00:00:00 2001
From: shy3130 <415333856@qq.com>
Date: Sun, 30 Aug 2026 19:05:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E8=83=BD=E5=8A=9B=E5=BE=BD?=
 =?UTF-8?q?=E7=AB=A0=E4=B8=8E=E6=95=B0=E6=8D=AE=E6=BA=90=E9=A1=B5=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E2=80=94=E2=80=94=E8=B7=AF=E7=94=B1=E9=97=A8=E6=8E=A7?=
 =?UTF-8?q?=E3=80=81=E4=B8=AD=E7=AB=8B=E6=96=87=E6=A1=88=E3=80=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=8D=A1=E9=87=8D=E6=8E=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧栏数据源徽章: 六能力方格(按注册序) + 悬浮路由卡(逐格同色对应,
  fixed 定位逃逸侧栏裁剪, 渲染后按实际高度钳制视口防遮挡)
- 各页能力门控切换为矩阵 usable 视角: Data/Financials/Monitor 缺能力时
  提示并引导数据源配置; 门控判定不再绑定 TickFlow 套餐
- 设置页数据源区: 能力路由卡(点标签切换, 乐观更新)、TickFlow 详情改为
  左 API Key 右能力档位表、检测档位收进头部徽章集群(+/重检测)、
  可用功能收进悬停图标、订阅档位面板移除
- 插件详情与 TickFlow 同构: 能力适配表(服务中/已适配/未就绪/—) +
  Key 区申请话术嵌官网链接(manifest homepage)
- 能力层文案中立化: 通用界面不出现档位/订阅词汇, 能力不可用警示按
  usable 判定(TickFlow 档位不足与源未就绪同待遇)
- API Key 输入框与保存按钮改为一行左右布局
---
 frontend/src/components/Layout.tsx            |  224 +--
 .../components/data/ExtendHistoryPanel.tsx    |    7 +-
 .../src/components/data/MinuteSyncConfig.tsx  |    5 +-
 .../src/components/data/RepairDailyPanel.tsx  |    7 +-
 frontend/src/components/data/StatCard.tsx     |   12 +-
 frontend/src/lib/api.ts                       |   50 +-
 frontend/src/lib/capability-labels.tsx        |   25 +
 frontend/src/lib/queryKeys.ts                 |    1 +
 frontend/src/lib/useSharedQueries.ts          |   13 +
 frontend/src/pages/Data.tsx                   |   88 +-
 frontend/src/pages/Financials.tsx             |   18 +-
 frontend/src/pages/Monitor.tsx                |   22 +-
 frontend/src/pages/settings/DataSources.tsx   | 1321 ++++++++++-------
 frontend/src/pages/settings/Keys.tsx          |  451 ++----
 14 files changed, 1239 insertions(+), 1005 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index bab4ac8..f9adbdb 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, Suspense } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, Suspense } from 'react'
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion } from 'framer-motion'
@@ -10,7 +10,7 @@ import { AiReportBubble } from '@/components/financials/AiReportBubble'
 import { StockAnalysisHost } from '@/components/stock-analysis/StockAnalysisHost'
 import { StockAnalysisBubble } from '@/components/stock-analysis/StockAnalysisBubble'
 import {
-  useCapabilities,
+  useCapabilityMatrix,
   useSettings,
   usePreferences,
   useQuoteStatus,
@@ -53,7 +53,7 @@ import {
   PanelLeftOpen,
 } from 'lucide-react'
 import { Logo } from './Logo'
-import { api, type IndexQuote } from '@/lib/api'
+import { api, type CapabilityMatrix, type IndexQuote } from '@/lib/api'
 import { cn } from '@/lib/cn'
 import { resolveWatchlistGroupColor } from '@/lib/watchlist-group-colors'
 import { computeGroupPcts, groupPctColor, groupPctTitle } from '@/lib/watchlistGroupStats'
@@ -171,80 +171,140 @@ function SidebarIndexQuotes({ rows, items }: { rows: IndexQuote[] | undefined; i
   )
 }
 
-// ===== 档位卡片 =====
-function TierBadge({ label, hasKey, providerName, isTickflow }: { label: string; hasKey?: boolean; providerName: string; isTickflow: boolean }) {
-  const base = label.split(' ')[0].split('+')[0].toLowerCase()
-  const isNone = base === 'none'
+// ===== 数据源能力健康卡 =====
+// 能力路由架构下的侧栏状态: 不再展示「主数据源 + TickFlow 档位」(单源时代遗留 —
+// 五个能力各自路由, 拿日K的源代表全局是随意的), 改为回答「各能力当前是否都有源在供」。
+// 档位/订阅信息归设置页 TickFlow 介绍卡 (档位词仅出现在 TickFlow 专属界面的设计规则)。
+// 单能力方格: 可用=绿 / 日K缺失=红 / 其他缺失=琥珀 (与悬浮卡中同色, 一眼对应)
+function capSquareCls(c: { id: string; usable: boolean }) {
+  return c.usable ? 'bg-accent' : c.id === 'daily' ? 'bg-danger' : 'bg-warning/80'
+}
 
-  const tierConfig: Record<string, {
-    desc: string
-    dotStyle: React.CSSProperties
-    tagBg: React.CSSProperties
-    labelTextStyle: React.CSSProperties
-  }> = {
-    none: {
-      desc: '未配置 Key · 仅历史日K',
-      dotStyle: { background: '#52525b' },
-      tagBg: { background: 'rgba(113,113,122,0.15)' },
-      labelTextStyle: { color: '#71717a' },
-    },
-    free: {
-      desc: '基础日K · 自选实时',
-      dotStyle: { background: '#71717a' },
-      tagBg: { background: 'rgba(113,113,122,0.3)' },
-      labelTextStyle: { color: '#a1a1aa' },
-    },
-    starter: {
-      desc: '批量同步 · 行情池',
-      dotStyle: { background: '#3b82f6' },
-      tagBg: { background: 'rgba(59,130,246,0.2)' },
-      labelTextStyle: { color: '#60a5fa' },
-    },
-    pro: {
-      desc: '分钟K · 实时行情 · 盘口',
-      dotStyle: { background: 'linear-gradient(135deg, #a855f7, #7c3aed)' },
-      tagBg: { background: 'linear-gradient(135deg, rgba(168,85,247,0.2), rgba(124,58,237,0.15))' },
-      labelTextStyle: { background: 'linear-gradient(135deg, #c084fc, #a855f7)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' },
-    },
-    expert: {
-      desc: 'WebSocket · 财务数据',
-      dotStyle: { background: 'linear-gradient(135deg, #3b82f6, #a855f7, #f59e0b)' },
-      tagBg: { background: 'linear-gradient(135deg, rgba(59,130,246,0.2), rgba(168,85,247,0.2), rgba(245,158,11,0.2))' },
-      labelTextStyle: { background: 'linear-gradient(135deg, #60a5fa, #c084fc, #fbbf24)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' },
-    },
+function DataSourceHealthBadge({ matrix }: { matrix: CapabilityMatrix | undefined }) {
+  const caps = matrix?.capabilities ?? []
+  const loading = caps.length === 0
+  const usableCount = caps.filter(c => c.usable).length
+  const down = caps.filter(c => !c.usable)
+  // 日K是核心能力 (其他一切派生于它): 挂了用危险色; 一般缺项琥珀; 全可用绿
+  const level = loading
+    ? 'loading'
+    : down.length === 0 ? 'ok' : down.some(c => c.id === 'daily') ? 'danger' : 'warn'
+  const countCls = level === 'ok' ? 'text-accent/80'
+    : level === 'danger' ? 'text-danger'
+    : level === 'warn' ? 'text-warning'
+    : 'text-muted'
+
+  // 悬浮卡: 侧栏 aside 是 overflow-hidden, 用 fixed 定位逃逸裁剪 (坐标取自徽标实时位置)。
+  // 徽标靠近屏幕顶部时居中定位会把卡片上半截推出视口 → 渲染后按实际高度钳制进视口。
+  const linkRef = useRef<HTMLAnchorElement>(null)
+  const popRef = useRef<HTMLDivElement>(null)
+  const closeTimer = useRef<number | undefined>(undefined)
+  const [popPos, setPopPos] = useState<{ left: number; top: number } | null>(null)
+  const openPop = () => {
+    window.clearTimeout(closeTimer.current)
+    const rect = linkRef.current?.getBoundingClientRect()
+    if (rect) setPopPos({ left: rect.right, top: rect.top + rect.height / 2 })
   }
-
-  const t = tierConfig[base] || tierConfig.none
-  const displayLabel = isNone ? 'None' : (label || 'None')
-  const descText = isNone && !hasKey ? '配置 Key 解锁更多能力' : t.desc
+  const closePop = () => {
+    closeTimer.current = window.setTimeout(() => setPopPos(null), 80)
+  }
+  useEffect(() => () => window.clearTimeout(closeTimer.current), [])
+  useLayoutEffect(() => {
+    if (!popPos || !popRef.current) return
+    const h = popRef.current.offsetHeight
+    const margin = 8
+    const minCenter = margin + h / 2
+    const maxCenter = window.innerHeight - margin - h / 2
+    const clamped = Math.min(maxCenter, Math.max(minCenter, popPos.top))
+    if (clamped !== popPos.top) setPopPos({ ...popPos, top: clamped })
+  }, [popPos])
 
   return (
-    <NavLink
-      to="/settings?tab=data-sources"
-      className="group relative flex items-center gap-2 overflow-hidden rounded-md py-1.5 pl-2.5 pr-2 transition-colors duration-150 hover:bg-elevated/70"
-      title={`数据源 · ${providerName} — ${descText}`}
-    >
-      <span
-        className="pointer-events-none absolute inset-y-1.5 left-0 w-[2px] rounded-full bg-accent/50 transition-colors group-hover:bg-accent"
-        style={base === 'expert' ? { background: 'linear-gradient(180deg, #60a5fa, #c084fc, #fbbf24)' } : undefined}
-      />
-      <DatabaseZap className="h-3.5 w-3.5 shrink-0 text-muted group-hover:text-accent transition-colors" />
-      <span className="min-w-0 truncate text-[11px] font-medium text-secondary group-hover:text-foreground transition-colors">
-        {providerName || '数据源'}
-      </span>
-      <span
-        className="h-1.5 w-1.5 rounded-full shrink-0"
-        style={{ ...t.dotStyle, ...(base === 'expert' ? { animation: 'pulse 2s infinite' } : {}) }}
-      />
-      {isTickflow && (
-        <span
-          className="ml-auto inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold font-mono leading-none shrink-0"
-          style={t.tagBg}
-        >
-          <span className="truncate" style={t.labelTextStyle}>{displayLabel}</span>
+    <>
+      <NavLink
+        ref={linkRef}
+        to="/settings?tab=data-sources"
+        aria-label={`数据源能力 ${usableCount}/${caps.length || 5} 可用, 点击前往数据源配置`}
+        onMouseEnter={openPop}
+        onMouseLeave={closePop}
+        onFocus={openPop}
+        onBlur={closePop}
+        onKeyDown={e => { if (e.key === 'Escape') setPopPos(null) }}
+        className="group relative flex items-center gap-2 overflow-hidden rounded-md py-1.5 pl-2.5 pr-2 transition-colors duration-150 hover:bg-elevated/70"
+      >
+        <span className="pointer-events-none absolute inset-y-1.5 left-0 w-[2px] rounded-full bg-accent/50 transition-colors group-hover:bg-accent" />
+        <DatabaseZap className="h-3.5 w-3.5 shrink-0 text-muted group-hover:text-accent transition-colors" />
+        {/* 能力方格 (按注册顺序: 实时/日K/分钟/除权/财务), 与悬浮卡逐格同色对应 */}
+        <span className="flex items-center gap-1 shrink-0">
+          {loading
+            ? Array.from({ length: 5 }, (_, i) => (
+                <span key={i} className="h-2 w-2 rounded-[2px] bg-muted animate-pulse" />
+              ))
+            : caps.map(c => (
+                <span key={c.id} className={`h-2 w-2 rounded-[2px] ${capSquareCls(c)}`} />
+              ))}
         </span>
+        {!loading && (
+          <span className={`ml-auto text-[10px] font-mono font-bold leading-none shrink-0 ${countCls}`}>
+            {usableCount}/{caps.length}
+          </span>
+        )}
+      </NavLink>
+      {popPos && (
+        <div
+          ref={popRef}
+          className="fixed z-50 -translate-y-1/2 pl-3"
+          style={{ left: popPos.left, top: popPos.top }}
+          onMouseEnter={() => window.clearTimeout(closeTimer.current)}
+          onMouseLeave={closePop}
+        >
+          <motion.div
+            initial={{ opacity: 0, x: -6 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.15, ease: [0.16, 1, 0.3, 1] }}
+            className="w-64 rounded-md border border-border bg-surface py-2.5 pl-3 pr-3.5 shadow-2xl shadow-black/40"
+          >
+            <div className="mb-2 flex items-center justify-between">
+              <span className="flex items-center gap-1.5 text-xs font-medium text-foreground">
+                <DatabaseZap className="h-3.5 w-3.5 text-accent" />
+                数据源能力
+              </span>
+              <span className={`text-[10px] font-mono font-bold ${countCls}`}>
+                {loading ? '获取中…' : `${usableCount}/${caps.length} 可用`}
+              </span>
+            </div>
+            <div className="space-y-1.5 border-t border-border/60 pt-2">
+              {loading ? (
+                <div className="py-0.5 text-[11px] text-muted">正在获取能力路由状态…</div>
+              ) : caps.map(c => (
+                <div key={c.id} className="flex min-w-0 items-center gap-2">
+                  <span className={`h-2 w-2 shrink-0 rounded-[2px] ${capSquareCls(c)}`} />
+                  <span className="shrink-0 text-xs font-medium text-secondary">{c.label}</span>
+                  <span className="ml-auto flex min-w-0 shrink items-center gap-1.5">
+                    {c.usable ? (
+                      <>
+                        <span className="truncate text-[11px] text-muted">{c.effective_display}</span>
+                        <CheckCircle2 className="h-3 w-3 shrink-0 text-accent" />
+                      </>
+                    ) : (
+                      <span className="text-[11px] text-muted/70">未接入</span>
+                    )}
+                  </span>
+                </div>
+              ))}
+            </div>
+            {/* 分时有分钟K功能替身 (intraday_monitor_support 三路可达), 不单独占能力格, 在此备注 */}
+            <div className="mt-1.5 text-[10px] leading-relaxed text-muted/70">
+              分时信号监控可由分钟 K 数据驱动，不单独设能力格
+            </div>
+            <div className="mt-2 flex items-center gap-1 border-t border-border/60 pt-1.5 text-[10px] text-muted">
+              点击前往数据源配置
+              <ChevronRight className="h-3 w-3" />
+            </div>
+          </motion.div>
+        </div>
       )}
-    </NavLink>
+    </>
   )
 }
 
@@ -275,8 +335,8 @@ function AIConfigBadge({ configured, model }: { configured?: boolean; model?: st
 
 export function Layout() {
   // ===== 共享 hooks (替代内联 useQuery) =====
-  const { data: caps } = useCapabilities()
   const { data: settingsState } = useSettings()
+  const { data: matrix } = useCapabilityMatrix()
   const { data: versionData } = useVersion()
   const { data: prefs } = usePreferences()
   // 数据源列表 (用于实时行情状态显示当前数据源名称)
@@ -446,13 +506,6 @@ export function Layout() {
         ? '关闭实时行情'
         : '开启实时行情'
 
-  // 当前主数据源 (用于侧边栏数据源状态卡)
-  const activeProvider = prefs?.daily_data_provider || 'tickflow'
-  const activeProviderName = activeProvider === 'tickflow'
-    ? 'TickFlow'
-    : (dataSources?.custom?.find(s => s.name === activeProvider)?.display_name || activeProvider)
-  const isCustomActive = activeProvider !== 'tickflow'
-
   // 轮询触发记录总数 → 更新监控中心徽标 (每 15 秒; 后台标签页由 SSE 事件驱动, 不轮询)
   const alertsTotalQuery = useQuery({
     queryKey: ['alerts-total'],
@@ -572,15 +625,10 @@ export function Layout() {
             </button>
           </div>
 
-          {/* 状态卡 — 收起时隐藏 */}
-          {!navCollapsed && (
-            <div className="mt-2.5 border-t border-border/60 pt-1">
-              <TierBadge
-                label={caps?.label ?? ''}
-                hasKey={settingsState?.mode !== 'none'}
-                providerName={activeProviderName}
-                isTickflow={!isCustomActive}
-              />
+            {/* 状态卡 — 收起时隐藏 */}
+            {!navCollapsed && (
+              <div className="mt-2.5 border-t border-border/60 pt-1">
+                <DataSourceHealthBadge matrix={matrix} />
               <div className="mx-2 border-t border-border/45" aria-hidden="true" />
               <AIConfigBadge
                 configured={settingsState?.ai_configured ?? settingsState?.has_ai_key}
diff --git a/frontend/src/components/data/ExtendHistoryPanel.tsx b/frontend/src/components/data/ExtendHistoryPanel.tsx
index 0deec0d..a5e24c0 100644
--- a/frontend/src/components/data/ExtendHistoryPanel.tsx
+++ b/frontend/src/components/data/ExtendHistoryPanel.tsx
@@ -5,8 +5,9 @@ import { api } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { MissingCapChip } from '@/lib/capability-labels'
 
-export function ExtendHistoryPanel({ caps, isRunning, earliestDate, onStart }: {
-  caps: { label: string; capabilities: Record<string, { rpm: number | null; batch: number | null; subscribe: number | null }> } | undefined
+// hasCap: 日K批量能力当前是否可用 (路由矩阵判定, 生效源含插件/自定义源)
+export function ExtendHistoryPanel({ hasCap, isRunning, earliestDate, onStart }: {
+  hasCap: boolean
   isRunning: boolean
   earliestDate: string | null
   onStart: () => void
@@ -14,7 +15,7 @@ export function ExtendHistoryPanel({ caps, isRunning, earliestDate, onStart }: {
   const qc = useQueryClient()
   const [value, setValue] = useState(6)
   const [unit, setUnit] = useState<'month' | 'year'>('month')
-  const hasBatchCap = !!caps?.capabilities?.['kline.daily.batch']
+  const hasBatchCap = hasCap
 
   const extend = useMutation({
     mutationFn: () => api.extendHistory(value, unit),
diff --git a/frontend/src/components/data/MinuteSyncConfig.tsx b/frontend/src/components/data/MinuteSyncConfig.tsx
index 6a79a8a..de23261 100644
--- a/frontend/src/components/data/MinuteSyncConfig.tsx
+++ b/frontend/src/components/data/MinuteSyncConfig.tsx
@@ -5,7 +5,8 @@ import { api } from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { MissingCapChip } from '@/lib/capability-labels'
 
-export function MinuteSyncConfig({ caps, onJobStart }: { caps: { label: string; capabilities: Record<string, { rpm: number | null; batch: number | null; subscribe: number | null }> } | undefined; onJobStart?: (jobId: string) => void }) {
+// hasCap: 分钟K能力当前是否可用 (路由矩阵判定, 生效源含插件/自定义源)
+export function MinuteSyncConfig({ hasCap, onJobStart }: { hasCap: boolean; onJobStart?: (jobId: string) => void }) {
   const qc = useQueryClient()
   const prefs = useQuery({
     queryKey: QK.preferences,
@@ -17,7 +18,7 @@ export function MinuteSyncConfig({ caps, onJobStart }: { caps: { label: string;
     onSuccess: () => qc.invalidateQueries({ queryKey: QK.preferences }),
   })
 
-  const hasMinuteCap = !!caps?.capabilities?.['kline.minute.batch']
+  const hasMinuteCap = hasCap
   const enabled = prefs.data?.minute_sync_enabled ?? false
   const days = prefs.data?.minute_sync_days ?? 5
   const segmentDays = prefs.data?.minute_sync_segment_days ?? 20
diff --git a/frontend/src/components/data/RepairDailyPanel.tsx b/frontend/src/components/data/RepairDailyPanel.tsx
index f3ae7fa..f07c74e 100644
--- a/frontend/src/components/data/RepairDailyPanel.tsx
+++ b/frontend/src/components/data/RepairDailyPanel.tsx
@@ -18,14 +18,15 @@ function daysAgo(n: number): string {
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
 }
 
-export function RepairDailyPanel({ caps, isRunning, latestDate, onStart }: {
-  caps: { label: string; capabilities: Record<string, { rpm: number | null; batch: number | null; subscribe: number | null }> } | undefined
+// hasCap: 日K批量能力当前是否可用 (路由矩阵判定, 生效源含插件/自定义源)
+export function RepairDailyPanel({ hasCap, isRunning, latestDate, onStart }: {
+  hasCap: boolean
   isRunning: boolean
   latestDate: string | null
   onStart: () => void
 }) {
   const qc = useQueryClient()
-  const hasBatchCap = !!caps?.capabilities?.['kline.daily.batch']
+  const hasBatchCap = hasCap
 
   // 默认起始日期: 最新数据往前推 30 天 (兼顾补缺口 + 复核近期数据, 成本不高)
   const [startDate, setStartDate] = useState(daysAgo(30))
diff --git a/frontend/src/components/data/StatCard.tsx b/frontend/src/components/data/StatCard.tsx
index 00c682b..c0c9a23 100644
--- a/frontend/src/components/data/StatCard.tsx
+++ b/frontend/src/components/data/StatCard.tsx
@@ -32,6 +32,10 @@ export function Pill({ label, value }: { label: string; value: number | string }
   )
 }
 
+// 卡片能力徽章的输入: TickFlow 套餐限额对象, 或路由门控合并后的布尔可用性
+// (矩阵 usable 合并进 caps 时, 非对象真值表示「经其他数据源可用, 无套餐限额可显」)。
+export type CapLimitValue = { rpm: number | null; batch: number | null; subscribe: number | null } | boolean
+
 function CapBadge({ hasCap, isLocal, missingCapName, capInfo, localSuffix, customProvider }: {
   hasCap: boolean
   isLocal: boolean
@@ -101,7 +105,7 @@ export function StatCard({
   skipped?: boolean
   stagePct?: number
   tierKey?: string
-  capLimits?: Record<string, { rpm: number | null; batch: number | null; subscribe: number | null }>
+  capLimits?: Record<string, CapLimitValue>
   customProvider?: string | null
   onSettings?: () => void
   onShowFields?: (table?: string) => void
@@ -123,8 +127,10 @@ export function StatCard({
 
   const meta = tierKey ? CARD_META[tierKey] : undefined
   const isLocal = meta?.capKey === ''
-  const capInfo = meta?.capKey ? capLimits?.[meta.capKey] : undefined
-  const hasCap = isLocal || !!capInfo
+  // 布尔值 (路由门控合并) 只表达可用性; 限额信息仅当值为套餐对象时展示
+  const rawCap = meta?.capKey ? capLimits?.[meta.capKey] : undefined
+  const capInfo = rawCap && typeof rawCap === 'object' ? rawCap : undefined
+  const hasCap = isLocal || !!rawCap
 
   // 渲染字段说明入口图标
   // - fieldTabs 提供时: 返回 null (图标由 renderSubLabelInline 内联到文字后)
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index a9bcff3..c3e0110 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1378,7 +1378,51 @@ export interface PluginDataSourceItem {
   status: string           // 可用性原因 (供 UI 显示)
   description: string
   install_hint: string     // 未装依赖时显示的安装命令
+  homepage?: string        // 插件官网/申请地址 (manifest 可选声明)
   api_key_env?: string     // 声明后设置页提供 Key 输入框 (先探后存)
+  api_key_masked?: string  // 当前生效 Key 的脱敏串 (secrets.json 优先, .env 兜底; 与 TickFlow Key 同一展示契约)
+}
+
+/** 数据源路由偏好字段 (每个能力一个, 与后端能力注册表一一对应) */
+export type ProviderField =
+  | 'daily_data_provider'
+  | 'adj_factor_provider'
+  | 'minute_data_provider'
+  | 'depth5_data_provider'
+  | 'realtime_data_provider'
+  | 'financial_data_provider'
+
+/** 能力路由矩阵中的一个候选源 (candidates 只含当前确实可提供该能力的源) */
+export interface CapabilityCandidate {
+  name: string
+  display: string
+  kind: 'builtin' | 'plugin' | 'custom'
+  available: boolean
+  status: string
+  note?: string | null
+}
+
+/** 一个能力 (标准化数据集) 的路由视图 */
+export interface CapabilityRoute {
+  id: string
+  label: string
+  desc: string
+  field: ProviderField
+  default: string
+  tf_tier: string                                  // TickFlow 所需最低订阅档位
+  tf_available: boolean                            // 当前 TickFlow 档位是否提供该能力
+  usable: boolean                                  // 生效源当前能否真正提供 (各页能力门控的统一判定)
+  current: string                                  // 原始偏好值
+  current_display: string
+  effective: string                                // 当前生效源 (独立路由, current 即生效)
+  effective_display: string
+  candidates: CapabilityCandidate[]                // 当前可用候选 (按当前 TickFlow 档位过滤)
+  pending: CapabilityCandidate[]                   // 声明了该能力但未就绪的源 (置灰提示)
+}
+
+export interface CapabilityMatrix {
+  tickflow_tier?: string                           // TickFlow 当前档位基础名 (none/free/...)
+  capabilities: CapabilityRoute[]
 }
 
 export interface DataSourceLoadError {
@@ -1464,6 +1508,7 @@ export interface Preferences {
   daily_data_provider?: string
   adj_factor_provider?: string
   minute_data_provider?: string
+  depth5_data_provider?: string
   realtime_data_provider?: string
   financial_data_provider?: string
   data_source_job_timeout_s: number
@@ -1587,6 +1632,7 @@ export const api = {
 
   preferences: () => request<Preferences>('/api/settings/preferences'),
   dataSources: () => request<DataSourcesResponse>('/api/settings/data-sources'),
+  capabilityMatrix: () => request<CapabilityMatrix>('/api/settings/capability-matrix'),
   dataSource: (name: string) => request<CustomSourceConfig>(`/api/settings/data-sources/${encodeURIComponent(name)}`),
   saveDataSource: (config: CustomSourceConfig) =>
     request<DataSourcesResponse>('/api/settings/data-sources', {
@@ -1632,8 +1678,8 @@ export const api = {
       method: 'POST',
       body: JSON.stringify({ provider, dataset, symbols, config }),
     }),
-  updateDataProviders: (cfg: Partial<Pick<Preferences, 'daily_data_provider' | 'adj_factor_provider' | 'minute_data_provider' | 'realtime_data_provider' | 'financial_data_provider'>>) =>
-    request<Pick<Preferences, 'daily_data_provider' | 'adj_factor_provider' | 'minute_data_provider' | 'realtime_data_provider'>>(
+  updateDataProviders: (cfg: Partial<Pick<Preferences, ProviderField>>) =>
+    request<Pick<Preferences, ProviderField>>(
       '/api/settings/preferences/data-providers',
       { method: 'PUT', body: JSON.stringify(cfg) },
     ),
diff --git a/frontend/src/lib/capability-labels.tsx b/frontend/src/lib/capability-labels.tsx
index 5e94230..a987ed0 100644
--- a/frontend/src/lib/capability-labels.tsx
+++ b/frontend/src/lib/capability-labels.tsx
@@ -1,5 +1,6 @@
 // capability 内部名 → 用户能理解的中文标签
 import { useNavigate } from 'react-router-dom'
+import type { CapabilityMatrix, CapabilityRoute } from './api'
 
 export const CAP_LABELS: Record<string, { name: string; hint: string }> = {
   'quote.by_symbol':         { name: '自选股实时监控', hint: 'Free 可按标的查询实时行情,用于少量自选股监控' },
@@ -58,6 +59,30 @@ export function MissingCapChip({ capKey, label, to = '/settings?tab=data-sources
   )
 }
 
+// ===== 能力路由门控 (各页统一判定) =====
+// usable = 生效源当前能否提供该能力 (区别于 TickFlow 套餐视角):
+// 路由到可用插件/自定义源时同样可用; 路由到 TickFlow 但档位不足时不可用。
+// 矩阵未加载时返回 undefined, 调用方回退 TickFlow 套餐视角, 避免首屏闪烁。
+// 数据来自 useCapabilityMatrix (设置页与其他页面共享同一缓存)。
+
+export type RouteCapId = 'realtime' | 'daily' | 'minute' | 'adj_factor' | 'financial'
+
+export function routeCap(matrix: CapabilityMatrix | undefined, id: RouteCapId): CapabilityRoute | undefined {
+  return matrix?.capabilities.find(c => c.id === id)
+}
+
+export function routeCapUsable(matrix: CapabilityMatrix | undefined, id: RouteCapId): boolean | undefined {
+  return routeCap(matrix, id)?.usable
+}
+
+/** 生效源非 TickFlow 且当前可用时返回其展示名 (卡片徽章显示实际数据源), 否则 null */
+export function routeProviderDisplay(matrix: CapabilityMatrix | undefined, id: RouteCapId): string | null {
+  const cap = routeCap(matrix, id)
+  return cap && cap.usable && cap.effective !== 'tickflow' ? cap.effective_display : null
+}
+
+// ===== TickFlow 档位 (仅 TickFlow 专属界面) =====
+
 // 套餐等级 —— 仅用于 TickFlow 专属界面 (Key 配置 / 端点测速 / 引导页 tickflow 分支)。
 // 通用功能门槛一律用能力键 (capName/needCapText/MissingCapChip), 不用档位词。
 // 基础档提取与后端 quote_service.py 一致:取 label 第一个词("Pro +" → "pro")。
diff --git a/frontend/src/lib/queryKeys.ts b/frontend/src/lib/queryKeys.ts
index a706a88..8ec35a2 100644
--- a/frontend/src/lib/queryKeys.ts
+++ b/frontend/src/lib/queryKeys.ts
@@ -15,6 +15,7 @@ export const QK = {
   version:        ['version'] as const,
   preferences:    ['preferences'] as const,
   dataSources:    ['data-sources'] as const,
+  capabilityMatrix: ['capability-matrix'] as const,
   quoteStatus:    ['quote-status'] as const,
   quoteInterval:  ['quote-interval'] as const,
   overviewMarket: (asOf?: string) => ['overview-market', asOf ?? 'latest'] as const,
diff --git a/frontend/src/lib/useSharedQueries.ts b/frontend/src/lib/useSharedQueries.ts
index c6dd175..9734224 100644
--- a/frontend/src/lib/useSharedQueries.ts
+++ b/frontend/src/lib/useSharedQueries.ts
@@ -18,6 +18,19 @@ export function useCapabilities() {
   })
 }
 
+/** 能力路由矩阵 — 设置页与各页能力门控共用。
+
+ * 区别于 useCapabilities 的 TickFlow 套餐视角: 矩阵按「生效源当前能否提供」
+ * 判定 (usable), 路由到可用插件时同样可用。路由偏好 / 档位探测 / 插件装卸
+ * 变化时由设置页失效, 各页共享同一缓存自动刷新。
+ */
+export function useCapabilityMatrix() {
+  return useQuery({
+    queryKey: QK.capabilityMatrix,
+    queryFn: api.capabilityMatrix,
+  })
+}
+
 /** 设置状态 — Layout / Data / Keys 共用 */
 export function useSettings() {
   return useQuery({
diff --git a/frontend/src/pages/Data.tsx b/frontend/src/pages/Data.tsx
index e257131..d3a8046 100644
--- a/frontend/src/pages/Data.tsx
+++ b/frontend/src/pages/Data.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
@@ -22,6 +22,7 @@ import { EndpointTestDialog } from '@/components/EndpointTestDialog'
 import { api, type ExtDataConfig } from '@/lib/api'
 import {
   useCapabilities,
+  useCapabilityMatrix,
   useSettings,
   usePreferences,
   useQuoteStatus,
@@ -29,13 +30,13 @@ import {
   useDataStatus,
 } from '@/lib/useSharedQueries'
 import { useToggleRealtimeQuotes, useUpdateQuoteInterval } from '@/lib/useSharedMutations'
-import { MissingCapChip } from '@/lib/capability-labels'
+import { MissingCapChip, routeCapUsable, routeProviderDisplay, type RouteCapId } from '@/lib/capability-labels'
 import { QK } from '@/lib/queryKeys'
 import { PageHeader } from '@/components/PageHeader'
 import { formatScheduleDatePart, formatScheduleTimePart, isToday } from '@/lib/format'
 
 // 拆分出的子组件
-import { StatCard, type FieldTab } from '@/components/data/StatCard'
+import { StatCard, type FieldTab, type CapLimitValue } from '@/components/data/StatCard'
 import { ActiveJobCard } from '@/components/data/ActiveJobCard'
 import { SectionTitle, HistoryRow } from '@/components/data/SectionTitle'
 import { SettingsModal } from '@/components/data/SettingsModal'
@@ -180,25 +181,23 @@ export function Data() {
     ? 'TickFlow'
     : (dataSources.data?.custom?.find(s => s.name === activeProvider)?.display_name || activeProvider)
 
-  // tierKey → 自定义数据集名映射 (用于数据画像 CapBadge 显示数据源名而非 TickFlow 档位)
-  const TIERKEY_TO_DATASET: Record<string, string> = {
-    daily: 'daily',
-    adj_factor: 'adj_factor',
-    etf: 'daily',        // ETF 复用日K能力
-    minute: 'minute',
-    financials: 'financial',
-  }
-  // 当前 custom 源支持的数据集集合
-  const activeCustomDatasets = activeProvider !== 'tickflow'
-    ? new Set(dataSources.data?.custom?.find(s => s.name === activeProvider)?.datasets || [])
-    : new Set<string>()
-  // 给定 tierKey, 返回 custom provider 显示名 (走 custom 时) 或 null (走 TickFlow)
-  const getCustomProviderName = (tierKey: string): string | null => {
-    if (activeProvider === 'tickflow') return null
-    const ds = TIERKEY_TO_DATASET[tierKey]
-    if (ds && activeCustomDatasets.has(ds)) return activeDataSourceName
-    return null
-  }
+  // —— 能力路由门控 (全项目统一判定) ——
+  // usable = 生效源当前能否提供该能力 (含插件/自定义源; TickFlow 档位不足则不可用),
+  // 区别于 useCapabilities 的 TickFlow 套餐视角。矩阵未加载时回退套餐视角, 避免首屏闪烁。
+  const matrix = useCapabilityMatrix()
+  const tfCaps = caps.data?.capabilities
+  const usableOr = (id: RouteCapId, tfHas: boolean) => routeCapUsable(matrix.data, id) ?? tfHas
+  // 合并视角 caps: 套餐限额键位 + 路由可用性覆盖, 卡片徽章/显隐/设置弹窗共用
+  const mergedCaps = useMemo(() => {
+    const m: Record<string, CapLimitValue> = { ...(tfCaps ?? {}) }
+    const merge = (tfKey: string, usable: boolean) => { m[tfKey] = usable ? (m[tfKey] ?? true) : false }
+    merge('adj_factor', usableOr('adj_factor', !!tfCaps?.['adj_factor']))
+    merge('kline.daily.batch', usableOr('daily', !!tfCaps?.['kline.daily.batch']))
+    merge('kline.minute.batch', usableOr('minute', !!tfCaps?.['kline.minute.batch']))
+    merge('financial', usableOr('financial', !!tfCaps?.['financial']))
+    return m
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tfCaps, matrix.data])
 
   const minuteAuto = prefs.data?.minute_sync_enabled ?? false
   const pipelineSched = prefs.data?.pipeline_schedule ?? { hour: 15, minute: 30 }
@@ -241,9 +240,10 @@ export function Data() {
   const quoteStatus = useQuoteStatus()
   const toggleQuote = useToggleRealtimeQuotes()
 
-  const hasAdjCap = !!caps.data?.capabilities?.['adj_factor']
-  const hasDailyBatchCap = !!caps.data?.capabilities?.['kline.daily.batch']
-  const hasMinuteCap = !!caps.data?.capabilities?.['kline.minute.batch']
+  // 路由感知能力门控: 矩阵判定生效源可用性, 未加载回退套餐视角
+  const hasAdjCap = usableOr('adj_factor', !!tfCaps?.['adj_factor'])
+  const hasDailyBatchCap = usableOr('daily', !!tfCaps?.['kline.daily.batch'])
+  const hasMinuteCap = usableOr('minute', !!tfCaps?.['kline.minute.batch'])
   const indexAuto = prefs.data?.pipeline_pull_index ?? true
   const etfAuto = prefs.data?.pipeline_pull_etf ?? false
   const pipelineSteps = [
@@ -262,7 +262,7 @@ export function Data() {
     window.addEventListener('data-card-visible-change', handler)
     return () => window.removeEventListener('data-card-visible-change', handler)
   }, [])
-  const cardVisible = getCardVisibility(caps.data?.capabilities)
+  const cardVisible = getCardVisibility(mergedCaps)
   // 引用 cardVisibleTick 触发重渲染(避免 lint 警告)
   void cardVisibleTick
 
@@ -400,7 +400,7 @@ export function Data() {
             skipped={skippedCards.has('instruments')}
             stagePct={activeCard === 'instruments' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="instruments"
-            capLimits={caps.data?.capabilities}
+            capLimits={mergedCaps}
             auto
             onShowFields={() => setSchemaTable('instruments')}
           />
@@ -417,8 +417,8 @@ export function Data() {
             skipped={skippedCards.has('daily')}
             stagePct={activeCard === 'daily' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="daily"
-            capLimits={caps.data?.capabilities}
-            customProvider={getCustomProviderName('daily')}
+            capLimits={mergedCaps}
+            customProvider={routeProviderDisplay(matrix.data, 'daily')}
             auto
             onShowFields={() => setSchemaTable('daily')}
             onSettings={hasData ? () => setOpenSettings(v => v === 'daily' ? null : 'daily') : undefined}
@@ -437,8 +437,8 @@ export function Data() {
             skipped={skippedCards.has('adj_factor')}
             stagePct={activeCard === 'adj_factor' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="adj_factor"
-            capLimits={caps.data?.capabilities}
-            customProvider={getCustomProviderName('adj_factor')}
+            capLimits={mergedCaps}
+            customProvider={routeProviderDisplay(matrix.data, 'adj_factor')}
             auto
             onShowFields={() => setSchemaTable('adj_factor')}
           />
@@ -455,7 +455,7 @@ export function Data() {
             skipped={skippedCards.has('enriched')}
             stagePct={activeCard === 'enriched' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="enriched"
-            capLimits={caps.data?.capabilities}
+            capLimits={mergedCaps}
             auto
             subLabel={status.data?.indicators_ready === false ? '字段 · 指标计算中…' : '字段 · 指标 · 信号'}
             localBadgeSuffix={`${prefs.data?.enriched_batch_size ?? 1000}只/批`}
@@ -476,7 +476,7 @@ export function Data() {
             skipped={skippedCards.has('index_daily')}
             stagePct={activeCard === 'index_daily' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="daily"
-            capLimits={caps.data?.capabilities}
+            capLimits={mergedCaps}
             auto={indexAuto}
             subLabel={indexOverviewLabel}
             fieldTabs={[
@@ -497,8 +497,8 @@ export function Data() {
             stats={etfOverviewStats}
             loading={isLoading}
             tierKey="etf"
-            capLimits={caps.data?.capabilities}
-            customProvider={getCustomProviderName('etf')}
+            capLimits={mergedCaps}
+            customProvider={routeProviderDisplay(matrix.data, 'daily')}
             auto={etfAuto}
             subLabel="维表 · 日K · 指标"
             fieldTabs={[
@@ -521,8 +521,8 @@ export function Data() {
             skipped={skippedCards.has('minute')}
             stagePct={activeCard === 'minute' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="minute"
-            capLimits={caps.data?.capabilities}
-            customProvider={getCustomProviderName('minute')}
+            capLimits={mergedCaps}
+            customProvider={routeProviderDisplay(matrix.data, 'minute')}
             auto={minuteAuto}
             onShowFields={() => setSchemaTable('minute')}
             onSettings={hasData ? () => setOpenSettings(v => v === 'minute' ? null : 'minute') : undefined}
@@ -538,8 +538,8 @@ export function Data() {
             stats={s?.financials ? { rows: s.financials.rows } : null}
             loading={isLoading}
             tierKey="financials"
-            capLimits={caps.data?.capabilities}
-            customProvider={getCustomProviderName('financials')}
+            capLimits={mergedCaps}
+            customProvider={routeProviderDisplay(matrix.data, 'financial')}
             subLabel={`历史股本 · ${historicalShareRows.toLocaleString()} 条`}
             onSettings={hasData ? () => setOpenSettings(v => v === 'financials' ? null : 'financials') : undefined}
             settingsOpen={openSettings === 'financials'}
@@ -558,7 +558,7 @@ export function Data() {
             skipped={skippedCards.has('regime')}
             stagePct={activeCard === 'regime' ? (job.data?.stage_pct ?? 0) : 0}
             tierKey="regime"
-            capLimits={caps.data?.capabilities}
+            capLimits={mergedCaps}
             auto={prefs.data?.pipeline_regime_enabled === true}
             subLabel="状态 · 综合分 · 指标"
             onSettings={hasData ? () => setOpenSettings(v => v === 'regime' ? null : 'regime') : undefined}
@@ -973,7 +973,7 @@ export function Data() {
         {openSettings === 'daily' && (
           <SettingsModal title="日 K · 向前扩展历史" onClose={() => setOpenSettings(null)}>
             <ExtendHistoryPanel
-              caps={caps.data}
+              hasCap={hasDailyBatchCap}
               isRunning={!!activeJobId}
               earliestDate={s?.daily?.earliest_date ?? null}
               onStart={() => setOpenSettings(null)}
@@ -986,7 +986,7 @@ export function Data() {
         {showRepair && (
           <SettingsModal title="日 K · 修正 / 补数据" onClose={() => setShowRepair(false)}>
             <RepairDailyPanel
-              caps={caps.data}
+              hasCap={hasDailyBatchCap}
               isRunning={!!activeJobId}
               latestDate={s?.daily?.latest_date ?? null}
               onStart={() => setShowRepair(false)}
@@ -1038,7 +1038,7 @@ export function Data() {
       <AnimatePresence>
         {openSettings === 'page-settings' && (
           <SettingsModal title="页面设置 · 数据画像卡片" onClose={() => setOpenSettings(null)}>
-            <PageSettingsModal caps={caps.data?.capabilities} />
+            <PageSettingsModal caps={mergedCaps} />
           </SettingsModal>
         )}
       </AnimatePresence>
@@ -1147,7 +1147,7 @@ export function Data() {
       <AnimatePresence>
         {openSettings === 'minute' && (
           <SettingsModal title="分钟 K · 同步设置" onClose={() => setOpenSettings(null)}>
-            <MinuteSyncConfig caps={caps.data} onJobStart={(jobId) => { setActiveJobId(jobId); setOpenSettings(null) }} />
+            <MinuteSyncConfig hasCap={hasMinuteCap} onJobStart={(jobId) => { setActiveJobId(jobId); setOpenSettings(null) }} />
           </SettingsModal>
         )}
       </AnimatePresence>
diff --git a/frontend/src/pages/Financials.tsx b/frontend/src/pages/Financials.tsx
index 1c46508..b083c70 100644
--- a/frontend/src/pages/Financials.tsx
+++ b/frontend/src/pages/Financials.tsx
@@ -1,8 +1,10 @@
 import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
 import { RefreshCw, Download, Lock, Loader2, X, Search, FileText, Database, Clock, CheckCircle2, Hourglass, Lightbulb, ExternalLink, ChartPie } from 'lucide-react'
 import { PageHeader } from '@/components/PageHeader'
 import { EmptyState } from '@/components/EmptyState'
-import { useCapabilities } from '@/lib/useSharedQueries'
+import { useCapabilities, useCapabilityMatrix } from '@/lib/useSharedQueries'
+import { routeCapUsable } from '@/lib/capability-labels'
 import { useFinancialStatus, useFinancialSync } from '@/lib/useFinancials'
 import { StockFinancialSearch } from '@/components/financials/StockFinancialSearch'
 import { StockFinancialDetail } from '@/components/financials/StockFinancialDetail'
@@ -30,8 +32,12 @@ const TABLE_ICON: Record<string, typeof FileText> = {
 
 export function Financials() {
   const { data: caps } = useCapabilities()
+  const { data: matrix } = useCapabilityMatrix()
   const { data: status, isLoading } = useFinancialStatus()
-  const hasFinancial = caps?.capabilities?.['financial'] != null || status?.available === true
+  // 路由感知门控: 生效源当前能否提供财务数据 (含插件/自定义源);
+  // 矩阵未加载时回退 TickFlow 套餐视角 + 后端可用状态
+  const hasFinancial = routeCapUsable(matrix, 'financial')
+    ?? (caps?.capabilities?.['financial'] != null || status?.available === true)
   const syncMut = useFinancialSync()
   // 同步进行中 = 服务端真值(status.syncing)或本地乐观态(请求已发出待确认)。
   // 乐观窗口:点击后到 invalidate 触发的 refetch 返回之间,status.syncing 暂为 false,
@@ -72,6 +78,12 @@ export function Financials() {
             <p className="mt-2 text-xs leading-relaxed text-secondary">
               当前数据源未提供财务数据。配置提供财务数据的数据源后,此页自动显示财务数据面板。
             </p>
+            <Link
+              to="/settings?tab=data-sources"
+              className="mt-4 inline-flex items-center gap-1.5 rounded-btn bg-accent/90 px-3.5 py-1.5 text-xs font-medium text-base hover:bg-accent transition-colors"
+            >
+              前往数据源配置
+            </Link>
             {/* 当前财务数据源(TickFlow)需付费,后续将接入免费数据源;期间欢迎在 issues 推荐免费源 */}
             <div className="mt-5 rounded-btn border border-accent/25 bg-accent/[0.05] px-3.5 py-3 text-left">
               <div className="flex items-center gap-1.5 text-xs font-medium text-accent">
@@ -274,7 +286,7 @@ export function Financials() {
           <div className="rounded-card border border-dashed border-border bg-surface px-6 py-14 text-center">
             <Database className="mx-auto h-8 w-8 text-muted" />
             <div className="mt-3 text-sm text-secondary">暂无财务数据</div>
-            <div className="mt-1 text-xs text-muted">点击右上角"全部同步"从 TickFlow 拉取</div>
+            <div className="mt-1 text-xs text-muted">点击右上角"全部同步"从当前数据源拉取</div>
           </div>
         ) : (
           <>
diff --git a/frontend/src/pages/Monitor.tsx b/frontend/src/pages/Monitor.tsx
index 8a4d838..a6c7873 100644
--- a/frontend/src/pages/Monitor.tsx
+++ b/frontend/src/pages/Monitor.tsx
@@ -19,7 +19,7 @@ import { markSeen, resetBadge, leaveMonitorPage } from '@/lib/monitorBadge'
 import { RuleEditor } from '@/components/monitor/RuleEditor'
 import { StockPreviewDialog } from '@/components/StockPreviewDialog'
 import { DimensionMembersDialog, type DimensionKind, type DimensionMembersTarget } from '@/components/DimensionMembersDialog'
-import { usePreferences } from '@/lib/useSharedQueries'
+import { usePreferences, useQuoteStatus } from '@/lib/useSharedQueries'
 
 const TYPE_LABEL: Record<string, string> = {
   signal: '信号', price: '价格/涨跌', market: '市场异动', strategy: '策略监控', sector: '板块监控',
@@ -138,6 +138,10 @@ export function Monitor() {
 
   // 全局 ext 字段配置 (监控中心个股通知带行业/概念标签)
   const { data: prefs } = usePreferences()
+  // 实时行情可用性: mode=none 表示当前生效数据源完全无法提供实时行情
+  // (TickFlow 无有效 Key, 或路由源未就绪) — 监控/预警收不到最新价, 顶部提示去数据源配置。
+  const { data: quoteStatus } = useQuoteStatus()
+  const realtimeUnavailable = quoteStatus?.mode === 'none'
   const monitorExtFields = prefs?.monitor_ext_fields ?? {
     concept: { field: 'ext_gn_ths.所属概念' },
     industry: { field: 'ext_hy_ths.所属同花顺行业' },
@@ -185,6 +189,22 @@ export function Monitor() {
   return (
     <div className="flex flex-col h-full">
       <PageHeader title="监控中心" subtitle="实时信号与规则管理" />
+      {realtimeUnavailable && (
+        <div className="px-5 pb-1">
+          <div className="mx-auto flex max-w-7xl items-center gap-2.5 rounded-xl border border-warning/30 bg-warning/[0.06] px-4 py-2.5">
+            <AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
+            <span className="text-xs leading-relaxed text-secondary">
+              实时行情当前不可用 — 监控与预警收不到最新价。可接入提供实时行情的数据源。
+            </span>
+            <Link
+              to="/settings?tab=data-sources"
+              className="ml-auto shrink-0 rounded-btn bg-warning/15 px-2.5 py-1 text-[11px] font-medium text-warning hover:bg-warning/25 transition-colors"
+            >
+              前往数据源配置
+            </Link>
+          </div>
+        </div>
+      )}
       <div className="flex-1 min-h-0 px-5 py-4">
         <div className="mx-auto flex h-full max-w-7xl flex-col gap-4 lg:flex-row">
           {/* 左栏: 触发记录 */}
diff --git a/frontend/src/pages/settings/DataSources.tsx b/frontend/src/pages/settings/DataSources.tsx
index 1917a9d..17c8afa 100644
--- a/frontend/src/pages/settings/DataSources.tsx
+++ b/frontend/src/pages/settings/DataSources.tsx
@@ -1,57 +1,76 @@
 import { useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Check, Database, Eye, EyeOff, KeyRound, Plus, RefreshCw, Zap, FileWarning, Puzzle, AlertCircle, CheckCircle2, Loader2, Save, Trash2 } from 'lucide-react'
-import { api, type DataSourceItem, type PluginDataSourceItem } from '@/lib/api'
+import {
+  AlertCircle,
+  AlertTriangle,
+  CandlestickChart as CandlestickIcon,
+  Check,
+  CheckCircle2,
+  Database,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileWarning,
+  KeyRound,
+  Landmark,
+  ListChecks,
+  Loader2,
+  Lock,
+  Plus,
+  Puzzle,
+  Radio,
+  RefreshCw,
+  Route,
+  Save,
+  Scale,
+  Timer,
+  Trash2,
+  Zap,
+} from 'lucide-react'
+import {
+  api,
+  type CapabilityMatrix,
+  type CapabilityRoute,
+  type DataSourceItem,
+  type PluginDataSourceItem,
+  type Preferences,
+  type ProviderField,
+} from '@/lib/api'
 import { QK } from '@/lib/queryKeys'
 import { useCapabilities, usePreferences } from '@/lib/useSharedQueries'
 import { AnchorWrap } from '@/lib/useCardFlash'
-import { TIER_RANK, tierRank, tierStyle } from '@/lib/capability-labels'
+import { CAP_LABELS, TIER_RANK, tierRank, tierStyle, TierTag } from '@/lib/capability-labels'
 import { toast } from '@/components/Toast'
 import { DataSourceEditor } from './DataSourceEditor'
-import { TickFlowKeyConfig } from './Keys'
+import { TickFlowKeySection, TierHelpPopover, useInvalidateTierRelated } from './Keys'
 
 const DATASET_LABEL: Record<string, string> = {
-  daily: '日K',
-  adj_factor: '除权',
   realtime: '实时',
+  daily: '日K',
   minute: '分钟',
+  adj_factor: '除权',
   financial: '财务',
 }
 
-/** 数据集 → 路由偏好字段 + 默认值 + 展示标签 (financial 无后端路由消费方, 仅展示不参与切换) */
-/** 能力卡片定义: 数据集 + 说明 (路由选择嵌入每张卡片) */
-const CAPABILITY_CARDS = [
-  { dataset: 'daily', label: '日K', desc: '历史 + 实时覆写' },
-  { dataset: 'adj_factor', label: '除权因子', desc: '复权计算' },
-  { dataset: 'realtime', label: '实时行情', desc: '全市场快照' },
-  { dataset: 'minute', label: '分钟K', desc: '分时图 · 回测' },
-] as const
-
-/** 数据集 → 路由偏好字段 + 默认值 (financial 无后端路由消费方, 仅展示) */
-const DATASET_ROUTE: Record<string, {
-  field: 'daily_data_provider' | 'adj_factor_provider' | 'minute_data_provider' | 'realtime_data_provider'
-  def: string
-}> = {
-  daily: { field: 'daily_data_provider', def: 'tickflow' },
-  adj_factor: { field: 'adj_factor_provider', def: 'same_as_daily' },
-  minute: { field: 'minute_data_provider', def: 'tickflow' },
-  realtime: { field: 'realtime_data_provider', def: 'tickflow' },
+/** 能力图标 (纯展示; 能力清单本身由后端注册表驱动) */
+const CAP_ICON: Record<string, React.ComponentType<{ className?: string }>> = {
+  realtime: Radio,
+  daily: CandlestickIcon,
+  minute: Timer,
+  adj_factor: Scale,
+  financial: Landmark,
 }
 
-/** 各能力在 TickFlow 需要的最低订阅档位 (对照 tiers.yaml: 日K 全档位可用,
- *  全市场实时/除权因子需 Starter+, 分钟K需 Pro+, 财务需 Expert+) */
-const TICKFLOW_TIER_REQ: Record<string, string> = {
-  daily: 'none',
-  adj_factor: 'starter',
-  realtime: 'starter',
-  minute: 'pro',
-  financial: 'expert',
+/** TickFlow 档位要求文本: none → 全档位, 其余 → starter+ 形式 */
+function tierReqText(tier: string): string {
+  return tier === 'none' ? '全档位' : `${tier}+`
 }
 
-/** TickFlow 档位要求徽标: 按所需档位配色(与左侧菜单/Key 页一致), 当前档位不足时琥珀描边提示 */
+/** TickFlow 档位要求徽标: 按所需档位配色, 当前档位不足时琥珀描边提示。
+ *  仅用于 TickFlow 详情的档位介绍表 (能力卡上不展示档位信息)。 */
 function TierReqChip({ tier, currentLabel }: { tier: string; currentLabel?: string }) {
-  const text = tier === 'none' ? '全档位' : `${tier}+`
+  const text = tierReqText(tier)
   const req = TIER_RANK[tier] ?? -1
   const unmet = currentLabel != null && tierRank(currentLabel) < req
   const t = tierStyle(tier)
@@ -83,153 +102,265 @@ function AllTiersBadge({ size = 'text-[10px]' }: { size?: string }) {
   )
 }
 
-/** 卡片内静态数据集标签: 只展示该源适配了哪些数据集 (路由选择在下方能力卡片) */
-function DatasetChipRow({ datasets }: { datasets: string[] }) {
-  if (datasets.length === 0) return null
-  return (
-    <div className="flex flex-wrap items-center gap-1 ml-3.5 mt-1">
-      <span className="text-[9px] font-medium text-accent bg-accent/10 px-1 py-0.5 rounded">已适配</span>
-      {datasets.map(ds => (
-        <span key={ds} className="text-[9px] text-muted/60 bg-elevated/60 px-1 py-0.5 rounded">
-          {DATASET_LABEL[ds] || ds}
-        </span>
-      ))}
-    </div>
-  )
-}
-
-/** 按能力路由网格: 每个数据源详情下展示一张能力卡,卡片上以可点标签列出
- *  所有具备该能力的数据源 — 点谁,该数据集就立刻由谁提供,可跨源自由组合。
- *  TickFlow 详情含全部能力; 其他源只列自己参与的能力。 */
-function SourceCapabilityGrid({ sourceName, sourceDisplay, datasets, candidatesOf, providerOf, pending, onSelect, anyCustom, onReset }: {
-  sourceName: string
-  sourceDisplay: string
-  datasets: string[]
-  /** 该数据集的所有候选提供方 (含 TickFlow), 按推荐顺序 */
-  candidatesOf: (dataset: string) => { name: string; display: string }[]
-  /** 该数据集当前的原始路由偏好值 (adj_factor 可能是 same_as_daily) */
-  providerOf: (dataset: string) => string
-  pending?: boolean
-  onSelect: (dataset: string, provider: string) => void
-  anyCustom?: boolean
-  onReset?: () => void
-}) {
-  const isDefault = sourceName === 'tickflow'
-  const dsList = isDefault ? [...datasets, 'financial'] : datasets
-  const caps = useCapabilities()
-  if (dsList.length === 0) return null
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-[11px] text-muted">
-          {isDefault
-            ? '每个能力可单独选择提供方 — 点标签即刻切换,未单独设置的由 TickFlow 提供'
-            : `${sourceDisplay} 参与的能力 — 每个能力都可单独选择由哪个数据源提供`}
-        </span>
-        {isDefault && anyCustom && (
-          <button
-            onClick={onReset}
-            disabled={pending}
-            className="text-[11px] text-muted/60 hover:text-accent transition-colors disabled:opacity-50"
-          >
-            恢复默认
-          </button>
-        )}
-      </div>
-
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5 mb-2">
-        {dsList.map(ds => {
-          const route = DATASET_ROUTE[ds]
-          const meta = CAPABILITY_CARDS.find(c => c.dataset === ds)
-          const label = meta?.label || DATASET_LABEL[ds] || ds
-          const desc = meta?.desc || ''
-          if (!route) {
-            return (
-              <div key={ds} className="rounded-lg border border-border/50 bg-elevated/20 px-3 py-2.5" title="该数据集暂不支持切换数据源">
-                <div className="flex items-start justify-between gap-2">
-                  <div className="min-w-0">
-                    <div className="text-xs font-medium text-foreground truncate">{label}</div>
-                    {desc && <div className="text-[10px] text-muted mt-0.5">{desc}</div>}
-                  </div>
-                  <div className="flex items-center gap-1 shrink-0">
-                    {isDefault && <TierReqChip tier={TICKFLOW_TIER_REQ[ds]} currentLabel={caps.data?.label} />}
-                    <span className="shrink-0 px-1.5 py-0.5 rounded text-[10px] text-muted/50 bg-elevated/60">固定</span>
-                  </div>
-                </div>
-              </div>
-            )
-          }
-          const raw = providerOf(ds)
-          const candidates = candidatesOf(ds)
-          return (
-            <div key={ds} className="rounded-lg border border-border/50 bg-elevated/20 px-3 py-2.5">
-              <div className="flex items-start justify-between gap-2">
-                <div className="min-w-0">
-                  <div className="text-xs font-medium text-foreground">{label}</div>
-                  {desc && <div className="text-[10px] text-muted mt-0.5">{desc}</div>}
-                </div>
-                {/* 右上角: TickFlow 所需档位 (当前提供方由下方高亮标签指示) */}
-                {isDefault && <TierReqChip tier={TICKFLOW_TIER_REQ[ds]} currentLabel={caps.data?.label} />}
-              </div>
-              {/* 提供方标签: 点谁该数据集就由谁提供,当前项高亮 */}
-              <div className="flex flex-wrap gap-1 mt-2 pt-2 border-t border-border/50">
-                {ds === 'adj_factor' && (
-                  <button
-                    type="button"
-                    disabled={pending}
-                    onClick={() => onSelect(ds, 'same_as_daily')}
-                    title="除权因子跟随日K数据源"
-                    className={tagCls(raw === 'same_as_daily')}
-                  >
-                    跟随日K
-                  </button>
-                )}
-                {candidates.map(c => (
-                  <button
-                    key={c.name}
-                    type="button"
-                    disabled={pending}
-                    onClick={() => onSelect(ds, c.name)}
-                    title={`「${label}」由 ${c.display} 提供`}
-                    className={tagCls(raw === c.name)}
-                  >
-                    {c.display}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-/** 提供方标签样式: 当前项高亮(accent), 其余弱化可点 */
-function tagCls(active: boolean) {
-  return `px-1.5 py-0.5 rounded text-[10px] transition-colors select-none disabled:opacity-50 cursor-pointer ${
+/** 提供方标签样式: 当前项高亮(accent), 其余弱化可点; 未就绪源禁用置灰 */
+function tagCls(active: boolean, disabled = false) {
+  const base = 'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] transition-colors select-none'
+  if (disabled) return `${base} bg-elevated/40 text-muted/50 cursor-not-allowed`
+  return `${base} cursor-pointer disabled:opacity-50 ${
     active
       ? 'bg-accent/15 text-accent font-medium'
       : 'bg-elevated/60 text-muted/70 hover:bg-accent/15 hover:text-accent'
   }`
 }
 
-
-/** 详情组件所需的路由上下文(由面板构造) */
-interface RouteCtx {
-  /** 数据集 → 候选提供方列表 (含 TickFlow) */
-  candidatesOf: (dataset: string) => { name: string; display: string }[]
-  /** 数据集 → 当前原始路由偏好值 (adj_factor 可能是 same_as_daily) */
-  providerOf: (dataset: string) => string
-  displayOf: (name?: string) => string
-  pending: boolean
-  onSelect: (dataset: string, provider: string) => void
-  anyCustom: boolean
-  onReset: () => void
+/** 源名 → 展示名 (特殊值 + 候选/待就绪表查找, 找不到回退原始名) */
+function displayOfName(matrix: CapabilityMatrix | undefined, name: string): string {
+  if (name === 'tickflow') return 'TickFlow'
+  if (name === 'same_as_daily') return '跟随日K'
+  for (const cap of matrix?.capabilities ?? []) {
+    const hit = cap.candidates.find(c => c.name === name) ?? cap.pending.find(c => c.name === name)
+    if (hit) return hit.display
+  }
+  return name
 }
 
-/** 插件 API Key 配置区 (布局对齐 TickFlowKeyConfig: 状态 + 输入 + 保存并检测)。
+/** 乐观更新: 把一组偏好字段变更应用到矩阵缓存 (每能力独立路由, current 即生效) */
+function patchMatrix(
+  matrix: CapabilityMatrix,
+  changes: Partial<Record<ProviderField, string>>,
+): CapabilityMatrix {
+  const caps = matrix.capabilities.map(c => ({ ...c }))
+  for (const cap of caps) {
+    const value = changes[cap.field]
+    if (value !== undefined) {
+      cap.current = value
+      cap.current_display = displayOfName({ capabilities: caps }, value)
+      cap.effective = value
+      cap.effective_display = cap.current_display
+    }
+  }
+  return { ...matrix, capabilities: caps }
+}
+
+const DEFAULT_ROUTING: Record<ProviderField, string> = {
+  daily_data_provider: 'tickflow',
+  adj_factor_provider: 'tickflow',
+  minute_data_provider: 'tickflow',
+  depth5_data_provider: 'tickflow',
+  realtime_data_provider: 'tickflow',
+  financial_data_provider: 'tickflow',
+}
+
+/** 单个能力卡: 当前生效提供方 + 候选切换标签。
+ *  candidates 只含当前可提供该能力的源; 未就绪源 (pending) 置灰提示;
+ *  生效源无法提供该能力 (usable=False, 无论档位不足还是源未就绪) 时显示琥珀警示。 */
+function CapabilityCard({ cap, pendingKey, onSelect }: {
+  cap: CapabilityRoute
+  pendingKey: string | null
+  onSelect: (field: ProviderField, provider: string) => void
+}) {
+  const Icon = CAP_ICON[cap.id] ?? Database
+  const busy = (provider: string) => pendingKey === `${cap.field}:${provider}`
+  // 能力中立判定: usable=False 即当前路由的源供不了 (TickFlow 档位不足或插件未就绪同待遇)
+  const unmet = !cap.usable
+  const chipsEmpty = cap.candidates.length === 0 && cap.pending.length === 0
+  return (
+    <div className="rounded-lg border border-border/50 bg-elevated/20 px-3 py-2.5 flex flex-col transition-colors hover:border-border">
+      <div className="flex items-center gap-1.5">
+        <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-accent/10">
+          <Icon className="h-3 w-3 text-accent" />
+        </span>
+        <div className="text-xs font-medium text-foreground truncate">{cap.label}</div>
+      </div>
+      {cap.desc && <div className="mt-1 text-[10px] text-muted/70 truncate">{cap.desc}</div>}
+
+      {/* 当前生效提供方 */}
+      <div className="mt-2 flex items-center gap-1.5 min-w-0">
+        <span className="text-[9px] font-medium uppercase tracking-wider text-muted/50 shrink-0">当前</span>
+        {unmet ? (
+          <span
+            className="inline-flex items-center gap-1 text-[11px] font-medium text-warning truncate"
+            title={`「${cap.label}」当前路由的源无法提供该能力 — 可切换下方可用源, 或在数据源区接入其他源`}
+          >
+            <AlertTriangle className="h-3 w-3 shrink-0" />
+            能力不可用
+          </span>
+        ) : (
+          <>
+            <span className="h-1.5 w-1.5 rounded-full bg-accent shrink-0" />
+            <span className="text-[11px] font-medium text-foreground truncate">{cap.effective_display}</span>
+          </>
+        )}
+      </div>
+
+      {/* 候选标签: 点谁该能力就由谁提供 */}
+      <div className="flex flex-wrap gap-1 mt-2 pt-2 border-t border-border/50 min-h-[26px] items-center">
+        {cap.candidates.map(c => {
+          const active = cap.current === c.name
+          return (
+            <button
+              key={c.name}
+              type="button"
+              disabled={pendingKey != null}
+              onClick={() => onSelect(cap.field, c.name)}
+              title={`「${cap.label}」由 ${c.display} 提供`}
+              className={tagCls(active)}
+            >
+              {busy(c.name) && <Loader2 className="h-2.5 w-2.5 animate-spin" />}
+              {c.display}
+            </button>
+          )
+        })}
+        {/* 未就绪源: 声明了该能力但依赖/Key 未配好, 置灰并说明原因 */}
+        {cap.pending.map(c => (
+          <span
+            key={c.name}
+            title={c.note || c.status || '该源当前不可用'}
+            className={tagCls(false, true)}
+          >
+            <AlertCircle className="h-2.5 w-2.5" />
+            {c.display}
+          </span>
+        ))}
+        {chipsEmpty && (
+          <span className="text-[10px] text-muted/50">
+            暂无可用提供方
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** 能力路由区 (页面主视图): 每个能力一张卡, 点候选标签即刻切换 (乐观更新) */
+function CapabilityRoutingSection() {
+  const qc = useQueryClient()
+  const matrix = useQuery({ queryKey: QK.capabilityMatrix, queryFn: api.capabilityMatrix })
+  const [pendingKey, setPendingKey] = useState<string | null>(null)
+
+  const invalidateRouting = () => {
+    qc.invalidateQueries({ queryKey: QK.capabilityMatrix })
+    qc.invalidateQueries({ queryKey: QK.preferences })
+    qc.invalidateQueries({ queryKey: QK.capabilities })
+    qc.invalidateQueries({ queryKey: QK.quoteStatus })
+  }
+
+  /** 切换前先把变更写进矩阵/偏好缓存, 界面零延迟响应; 失败回滚 */
+  const applyOptimistic = (changes: Partial<Record<ProviderField, string>>) => {
+    const prevMatrix = qc.getQueryData<CapabilityMatrix>(QK.capabilityMatrix)
+    const prevPrefs = qc.getQueryData<Preferences>(QK.preferences)
+    if (prevMatrix) qc.setQueryData(QK.capabilityMatrix, patchMatrix(prevMatrix, changes))
+    if (prevPrefs) qc.setQueryData(QK.preferences, { ...prevPrefs, ...changes })
+    return { prevMatrix, prevPrefs }
+  }
+
+  const rollback = (ctx: { prevMatrix?: CapabilityMatrix; prevPrefs?: Preferences } | undefined) => {
+    if (ctx?.prevMatrix) qc.setQueryData(QK.capabilityMatrix, ctx.prevMatrix)
+    if (ctx?.prevPrefs) qc.setQueryData(QK.preferences, ctx.prevPrefs)
+  }
+
+  const routeMut = useMutation({
+    mutationFn: ({ field, provider }: { field: ProviderField; provider: string }) =>
+      // 动态键经运行时字段名收敛为合法偏好键 (字段名来自后端注册表)
+      api.updateDataProviders({ [field]: provider } as Partial<Pick<Preferences, ProviderField>>),
+    onMutate: async (v) => {
+      setPendingKey(`${v.field}:${v.provider}`)
+      await qc.cancelQueries({ queryKey: QK.capabilityMatrix })
+      await qc.cancelQueries({ queryKey: QK.preferences })
+      return applyOptimistic({ [v.field]: v.provider })
+    },
+    onSuccess: (_d, v) => {
+      const cap = matrix.data?.capabilities.find(c => c.field === v.field)
+      toast(`「${cap?.label || v.field}」已切换为 ${displayOfName(matrix.data, v.provider)}`, 'success')
+    },
+    onError: (e: Error, _v, ctx) => {
+      rollback(ctx)
+      toast(`路由切换失败: ${e.message}`, 'error')
+    },
+    onSettled: () => {
+      setPendingKey(null)
+      invalidateRouting()
+    },
+  })
+
+  const resetMut = useMutation({
+    mutationFn: () => api.updateDataProviders(DEFAULT_ROUTING),
+    onMutate: async () => {
+      await qc.cancelQueries({ queryKey: QK.capabilityMatrix })
+      await qc.cancelQueries({ queryKey: QK.preferences })
+      return applyOptimistic(DEFAULT_ROUTING)
+    },
+    onSuccess: () => toast('能力路由已恢复默认', 'success'),
+    onError: (e: Error, _v, ctx) => {
+      rollback(ctx)
+      toast(`恢复失败: ${e.message}`, 'error')
+    },
+    onSettled: invalidateRouting,
+  })
+
+  const list = matrix.data?.capabilities ?? []
+  const anyCustom = list.some(c => c.current !== c.default)
+
+  return (
+    <section className="rounded-card border border-border bg-surface p-5">
+      <div className="flex items-center justify-between mb-1 gap-3">
+        <div className="flex items-center gap-2.5 min-w-0">
+          <Route className="h-4 w-4 text-secondary shrink-0" />
+          <h2 className="text-sm font-medium text-foreground">能力路由</h2>
+          <span className="text-[10px] text-muted/60 shrink-0">{list.length} 个能力</span>
+        </div>
+        {anyCustom && (
+          <button
+            onClick={() => resetMut.mutate()}
+            disabled={resetMut.isPending}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn text-xs text-muted hover:text-foreground hover:bg-elevated transition-colors disabled:opacity-50 shrink-0"
+          >
+            <RefreshCw className={`h-3 w-3 ${resetMut.isPending ? 'animate-spin' : ''}`} />
+            恢复默认
+          </button>
+        )}
+      </div>
+      <p className="text-[11px] text-muted mb-4">
+        每个能力独立选择提供方 — 点标签即刻生效。选项只列出当前可提供该能力的源
+        (各源按自身可用性过滤, 详见下方数据源介绍); 未就绪的源置灰提示。
+      </p>
+
+      {matrix.isError ? (
+        <div className="flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg border border-danger/20 bg-danger/5">
+          <div className="flex items-center gap-2 text-xs text-danger min-w-0">
+            <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate">能力矩阵加载失败: {(matrix.error as Error)?.message || '未知错误'}</span>
+          </div>
+          <button
+            onClick={() => matrix.refetch()}
+            className="text-xs text-muted hover:text-foreground shrink-0"
+          >
+            重试
+          </button>
+        </div>
+      ) : matrix.isLoading || list.length === 0 ? (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="h-[120px] rounded-lg border border-border/50 bg-elevated/20 animate-pulse" />
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5">
+          {list.map(cap => (
+            <CapabilityCard
+              key={cap.id}
+              cap={cap}
+              pendingKey={pendingKey}
+              onSelect={(field, provider) => routeMut.mutate({ field, provider })}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}
+
+/** 插件 API Key 配置区块 (嵌入插件详情卡, 不再独立成卡)。
  *  先探后存: 后端用候选 Key 实探一次, 无效不落盘; secrets.json 优先于 .env。 */
 function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
   const qc = useQueryClient()
@@ -239,6 +370,7 @@ function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
 
   const invalidate = () => {
     qc.invalidateQueries({ queryKey: QK.dataSources })
+    qc.invalidateQueries({ queryKey: QK.capabilityMatrix })
     qc.invalidateQueries({ queryKey: QK.capabilities })
     qc.invalidateQueries({ queryKey: QK.quoteStatus })
   }
@@ -273,15 +405,33 @@ function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
   })
 
   return (
-    <section className="rounded-card border border-border bg-surface p-6">
-      <div className="flex items-center gap-2.5 mb-3">
-        <KeyRound className="h-4 w-4 text-secondary" />
-        <h3 className="text-sm font-medium text-foreground">API Key</h3>
+    <div>
+      <div className="flex items-center gap-2 mb-2">
+        <KeyRound className="h-3.5 w-3.5 text-secondary" />
+        <h3 className="text-xs font-medium text-foreground">API Key</h3>
         <span className="text-[10px] text-muted/50 uppercase tracking-wider">{plugin.api_key_env}</span>
       </div>
+
+      {/* 申请说明 + 官网链接 (对齐 TickFlow Key 区话术) */}
       <p className="text-xs text-secondary leading-relaxed mb-4">
-        Key 保存为本地文件(secrets.json, 优先级高于 .env),不会上传任何第三方。保存前会先用该 Key
-        实探一次数据接口,无效则不落盘。
+        {plugin.homepage ? (
+          <>
+            在{' '}
+            <a
+              href={plugin.homepage}
+              target="_blank"
+              rel="noreferrer"
+              className="text-accent hover:underline inline-flex items-baseline gap-0.5"
+            >
+              {plugin.display_name} 官网
+              <ExternalLink className="h-3 w-3 self-center" />
+            </a>
+            {' '}申请获取。
+          </>
+        ) : (
+          <>向该数据源官方申请 API Key。</>
+        )}
+        Key 仅存本地 (secrets.json 优先, 环境变量 {plugin.api_key_env} 兜底),不会上传任何第三方,请妥善保管。
       </p>
 
       {/* 当前状态 */}
@@ -293,8 +443,11 @@ function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
               <>
                 <CheckCircle2 className="h-4 w-4 text-bear shrink-0" />
                 <span className="text-sm font-medium shrink-0">已配置</span>
-                {save.data?.ok && save.data.api_key_masked && (
-                  <span className="font-mono text-xs text-secondary truncate">{save.data.api_key_masked}</span>
+                {/* 生效 Key 脱敏串 (secrets.json 优先, .env 兜底) — 常驻显示, 与 TickFlow Key 一致 */}
+                {plugin.api_key_masked && (
+                  <span className="font-mono text-xs text-secondary truncate" title={plugin.api_key_masked}>
+                    {plugin.api_key_masked}
+                  </span>
                 )}
               </>
             ) : (
@@ -345,7 +498,7 @@ function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
         <button
           type="submit"
           disabled={save.isPending || (!keyInput.trim() && !saved)}
-          className="w-full h-10 rounded-xl bg-accent text-white text-sm font-semibold flex items-center justify-center gap-2 hover:bg-accent/90 disabled:opacity-40 transition-all"
+          className="w-full h-9 rounded-xl bg-accent text-white text-sm font-semibold flex items-center justify-center gap-2 hover:bg-accent/90 disabled:opacity-40 transition-all"
         >
           {save.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : saved ? <Check className="h-4 w-4" /> : <Save className="h-4 w-4" />}
           {save.isPending ? '验证中...' : saved ? '已保存' : '保存并检测'}
@@ -364,7 +517,46 @@ function PluginKeyConfig({ plugin }: { plugin: PluginDataSourceItem }) {
           保存失败:{String((save.error as Error).message)}
         </div>
       )}
-    </section>
+    </div>
+  )
+}
+
+/** 能力芯片: 三态 — 服务中(高亮+勾) / 已适配(灰) / 档位锁定(锁, 仅 TickFlow) */
+function CapabilityChips({ caps, servingSet, isTickFlow }: {
+  caps: CapabilityRoute[]
+  servingSet: Set<string>
+  isTickFlow: boolean
+}) {
+  if (caps.length === 0) return <span className="text-[10px] text-muted/40">未声明能力</span>
+  return (
+    <div className="flex flex-wrap gap-1">
+      {caps.map(cap => {
+        const servingNow = servingSet.has(cap.id)
+        const locked = isTickFlow && !cap.tf_available
+        const cls = servingNow
+          ? 'bg-accent/15 text-accent'
+          : locked
+            ? 'bg-warning/8 text-warning/70'
+            : 'bg-elevated/60 text-muted/70'
+        const title = servingNow
+          ? `正在提供「${cap.label}」`
+          : locked
+            ? `TickFlow 需 ${tierReqText(cap.tf_tier)} · 当前档位未解锁`
+            : `已适配「${cap.label}」`
+        return (
+          <span
+            key={cap.id}
+            title={title}
+            className={`inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] leading-none ${cls}`}
+          >
+            {servingNow
+              ? <Check className="h-2.5 w-2.5" />
+              : locked ? <Lock className="h-2.5 w-2.5" /> : null}
+            {DATASET_LABEL[cap.id] || cap.id}
+          </span>
+        )
+      })}
+    </div>
   )
 }
 
@@ -372,16 +564,58 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
   const qc = useQueryClient()
   const prefs = usePreferences()
   const sources = useQuery({ queryKey: QK.dataSources, queryFn: api.dataSources })
-  const [selected, setSelected] = useState<string>('tickflow') // 当前在右侧编辑的源 name
+  const matrix = useQuery({ queryKey: QK.capabilityMatrix, queryFn: api.capabilityMatrix })
+  const [selected, setSelected] = useState<string>('tickflow') // 当前在下方配置的源 name
   const [confirmDelete, setConfirmDelete] = useState<string | null>(null)
 
+  const builtin: DataSourceItem[] = sources.data?.builtin ?? []
+  const pluginList: PluginDataSourceItem[] = sources.data?.plugins ?? []
+  const customList: DataSourceItem[] = sources.data?.custom ?? []
+  const errors = sources.data?.errors ?? []
+  const activeName = prefs.data?.daily_data_provider || 'tickflow'
+
+  const pluginItems: DataSourceItem[] = pluginList.map(p => ({
+    name: p.name, display_name: p.display_name, datasets: p.datasets,
+  }))
+  const allItems = [
+    ...builtin,
+    ...pluginItems,
+    ...customList,
+  ]
+  const customNames = new Set(customList.map(c => c.name))
+
+  const selectedCustom = customList.find(s => s.name === selected)
+
+  // ===== 各能力当前的有效提供方 (除权 same_as_daily = 跟随日K) =====
+  // 用于能力芯片"服务中"态与详情卡标识: 路由切换在上方能力路由区, 这里只读展示
+  const dailyPref = prefs.data?.daily_data_provider || 'tickflow'
+  const adjPref = prefs.data?.adj_factor_provider || 'same_as_daily'
+  const effProvider: Record<string, string> = {
+    daily: dailyPref,
+    adj_factor: adjPref === 'same_as_daily' ? dailyPref : adjPref,
+    minute: prefs.data?.minute_data_provider || 'tickflow',
+    realtime: prefs.data?.realtime_data_provider || 'tickflow',
+    financial: prefs.data?.financial_data_provider || 'tickflow',
+  }
+  const servingDatasets = (name: string) =>
+    Object.entries(effProvider).filter(([, v]) => v === name).map(([k]) => k)
+  const servingSetOf = (name: string) => new Set(servingDatasets(name))
+
+  const matrixCaps = matrix.data?.capabilities ?? []
+
+  // 数据源集合/插件可用性/档位变化都会改变能力候选集 → 统一连带失效
+  const invalidateSources = () => {
+    qc.invalidateQueries({ queryKey: QK.dataSources })
+    qc.invalidateQueries({ queryKey: QK.capabilityMatrix })
+    qc.invalidateQueries({ queryKey: QK.preferences })
+    qc.invalidateQueries({ queryKey: QK.capabilities })
+    qc.invalidateQueries({ queryKey: QK.quoteStatus })
+  }
+
   const reload = useMutation({
     mutationFn: api.reloadDataSources,
     onSuccess: () => {
-      qc.invalidateQueries({ queryKey: QK.dataSources })
-      // 重载可能改变数据集声明 → 能力与实时模式随之变化
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
+      invalidateSources()
       toast('配置已重新加载', 'success')
     },
   })
@@ -389,10 +623,7 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
   const remove = useMutation({
     mutationFn: (name: string) => api.deleteDataSource(name),
     onSuccess: () => {
-      qc.invalidateQueries({ queryKey: QK.dataSources })
-      qc.invalidateQueries({ queryKey: QK.preferences })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
+      invalidateSources()
       setSelected('tickflow')
       setConfirmDelete(null)
       toast('数据源已删除', 'success')
@@ -401,37 +632,29 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
 
   const switchProvider = useMutation({
     mutationFn: async (name: string) => {
-      // tickflow: 全量重置为默认路由
+      // 一键套用: 该源适配了哪些数据集就接管哪些, 其余回默认
       if (name === 'tickflow') {
-        return api.updateDataProviders({
-          daily_data_provider: 'tickflow',
-          adj_factor_provider: 'same_as_daily',
-          realtime_data_provider: 'tickflow',
-          minute_data_provider: 'tickflow',
-          financial_data_provider: 'tickflow',
-        })
+        return api.updateDataProviders(DEFAULT_ROUTING)
       }
-      // 非 tickflow: 该源适配了哪些数据集就接管哪些, 其余回退默认
       const supported = new Set(
         allItems.find(s => s.name === name)?.datasets ?? []
       )
       const pick = (dataset: string) =>
-        supported.has(dataset) ? name : (dataset === 'adj_factor' ? 'same_as_daily' : 'tickflow')
+        supported.has(dataset) ? name : DEFAULT_ROUTING[`${dataset}_data_provider` as ProviderField] ?? 'tickflow'
       return api.updateDataProviders({
         daily_data_provider: pick('daily'),
         adj_factor_provider: pick('adj_factor'),
         realtime_data_provider: pick('realtime'),
         minute_data_provider: pick('minute'),
-        financial_data_provider: 'tickflow',
+        financial_data_provider: pick('financial'),
       })
     },
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: QK.preferences })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      // 切换会改变实时行情 provider → 模式(none/watchlist/full_market)立即刷新
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
-      toast('数据源已切换', 'success')
+    onSuccess: (_d, name) => {
+      invalidateSources()
+      const display = allItems.find(s => s.name === name)?.display_name || name
+      toast(`已让「${display}」接管其适配的能力`, 'success')
     },
+    onError: (e: Error) => toast(`切换失败: ${e.message}`, 'error'),
   })
 
   const editExisting = useMutation({
@@ -442,9 +665,7 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
   const installMut = useMutation({
     mutationFn: (name: string) => api.installPlugin(name),
     onSuccess: (data) => {
-      qc.invalidateQueries({ queryKey: QK.dataSources })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
+      invalidateSources()
       if (data.install_ok) {
         toast('插件依赖安装成功', 'success')
       } else {
@@ -457,10 +678,7 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
   const uninstallMut = useMutation({
     mutationFn: (name: string) => api.uninstallPlugin(name),
     onSuccess: (data) => {
-      qc.invalidateQueries({ queryKey: QK.dataSources })
-      qc.invalidateQueries({ queryKey: QK.preferences })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
+      invalidateSources()
       if (data.uninstall_ok) {
         toast(data.uninstall_message || '已卸载', 'success')
       } else {
@@ -470,127 +688,20 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
     onError: (e: Error) => toast(`卸载失败: ${e.message}`, 'error'),
   })
 
-  const builtin: DataSourceItem[] = sources.data?.builtin ?? []
-  const pluginList: PluginDataSourceItem[] = sources.data?.plugins ?? []
-  const customList: DataSourceItem[] = sources.data?.custom ?? []
-  const errors = sources.data?.errors ?? []
-  const activeName = prefs.data?.daily_data_provider || 'tickflow'
-
   // 插件 name → 状态 (供卡片渲染时判断 available/installing 等)
   const pluginMap = new Map(pluginList.map(p => [p.name, p]))
-  const pluginNames = new Set(pluginList.map(p => p.name))
-
-  // 顶部数据源选择列表 (内置 + 所有插件 + 自定义 + 新增)
-  const pluginItems: DataSourceItem[] = pluginList.map(p => ({
-    name: p.name, display_name: p.display_name, datasets: p.datasets,
-  }))
-  const allItems = [
-    ...builtin,
-    ...pluginItems,
-    ...customList,
-  ]
-
-  const selectedCustom = customList.find(s => s.name === selected)
-
-  // ===== 各数据集当前的有效提供方 (除权 same_as_daily = 跟随日K) =====
-  // 用于"服务中"徽标: 改单个能力路由只影响对应数据集, 不再产生"当前数据源被切换"的表现
-  const dailyPref = prefs.data?.daily_data_provider || 'tickflow'
-  const adjPref = prefs.data?.adj_factor_provider || 'same_as_daily'
-  const effProvider: Record<string, string> = {
-    daily: dailyPref,
-    adj_factor: adjPref === 'same_as_daily' ? dailyPref : adjPref,
-    minute: prefs.data?.minute_data_provider || 'tickflow',
-    realtime: prefs.data?.realtime_data_provider || 'tickflow',
-  }
-  const servingDatasets = (name: string) =>
-    Object.entries(effProvider).filter(([, v]) => v === name).map(([k]) => k)
-  const servingLabels = (name: string) =>
-    servingDatasets(name).map(k => DATASET_LABEL[k] || k)
-
-  const displayOf = (name?: string) =>
-    name === 'tickflow' ? 'TickFlow'
-      : name === 'same_as_daily' ? '跟随日K'
-        : allItems.find(s => s.name === name)?.display_name || name || ''
-
-  const invalidateRouting = () => {
-    qc.invalidateQueries({ queryKey: QK.preferences })
-    qc.invalidateQueries({ queryKey: QK.capabilities })
-    qc.invalidateQueries({ queryKey: QK.quoteStatus })
-  }
-
-  // 单个能力的提供方切换: 点标签即刻生效 (same_as_daily 仅除权有效 = 跟随日K)
-  const routeMut = useMutation({
-    mutationFn: ({ dataset, provider }: { dataset: string; provider: string }) => {
-      const route = DATASET_ROUTE[dataset]
-      if (!route) throw new Error(`数据集 ${dataset} 不支持切换数据源`)
-      return api.updateDataProviders({ [route.field]: provider })
-    },
-    onSuccess: (_d, v) => {
-      invalidateRouting()
-      const label = DATASET_LABEL[v.dataset] || v.dataset
-      toast(`「${label}」已切换为 ${displayOf(v.provider)}`, 'success')
-    },
-    onError: (e: Error) => toast(`路由切换失败: ${e.message}`, 'error'),
-  })
-
-  // 恢复默认: 路由全部回 TickFlow
-  const resetRouteMut = useMutation({
-    mutationFn: () => api.updateDataProviders({
-      daily_data_provider: 'tickflow',
-      adj_factor_provider: 'same_as_daily',
-      minute_data_provider: 'tickflow',
-      realtime_data_provider: 'tickflow',
-    }),
-    onSuccess: () => {
-      invalidateRouting()
-      toast('数据集路由已恢复默认(TickFlow)', 'success')
-    },
-    onError: (e: Error) => toast(`恢复失败: ${e.message}`, 'error'),
-  })
-
-  const anyCustomRouting = Object.values(effProvider).some(v => v !== 'tickflow') || adjPref !== 'same_as_daily'
-
-  // 某数据集的全部候选提供方 (TickFlow 恒在首位, 其余按声明该数据集的数据源列出)
-  const candidatesOf = (dataset: string) => {
-    const list = [{ name: 'tickflow', display: 'TickFlow' }]
-    for (const item of allItems) {
-      if (item.name !== 'tickflow' && item.datasets.includes(dataset)) {
-        list.push({ name: item.name, display: item.display_name || item.name })
-      }
-    }
-    return list
-  }
-
-  // 数据集 → 当前原始路由偏好值 (adj_factor 保留 same_as_daily 以驱动"跟随日K"标签态)
-  const providerOf = (dataset: string) => {
-    switch (dataset) {
-      case 'daily': return dailyPref
-      case 'adj_factor': return adjPref
-      case 'minute': return prefs.data?.minute_data_provider || 'tickflow'
-      case 'realtime': return prefs.data?.realtime_data_provider || 'tickflow'
-      default: return 'tickflow'
-    }
-  }
-
-  // 传给各数据源详情的路由上下文(能力卡标签选择 + 当前提供方展示)
-  const routeCtx: RouteCtx = {
-    candidatesOf,
-    providerOf,
-    displayOf,
-    pending: routeMut.isPending,
-    onSelect: (dataset, provider) => routeMut.mutate({ dataset, provider }),
-    anyCustom: anyCustomRouting,
-    onReset: () => resetRouteMut.mutate(),
-  }
 
   return (
     <div className="space-y-5 max-w-5xl">
-      {/* ===== 顶部: 当前数据源 + 数据源选择 (一个大卡片) ===== */}
+      {/* ===== 上区: 能力路由 (能力为主视图, 点标签切换提供方) ===== */}
+      <CapabilityRoutingSection />
+
+      {/* ===== 下区: 数据源 (源为主视图, 配置/接入) ===== */}
       <AnchorWrap highlight={highlight} anchor="data-sources">
       <section className="rounded-card border border-border bg-surface p-5">
         <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-2.5">
-            <Database className="h-4 w-4 text-secondary" />
+          <div className="flex items-center gap-2.5 min-w-0">
+            <Database className="h-4 w-4 text-secondary shrink-0" />
             <h2 className="text-sm font-medium text-foreground">数据源</h2>
             <span
               className="text-[10px] text-muted/40 font-mono truncate hidden lg:inline max-w-[480px]"
@@ -602,7 +713,7 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
           <button
             onClick={() => reload.mutate()}
             disabled={reload.isPending}
-            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn text-xs text-muted hover:text-foreground hover:bg-elevated transition-colors disabled:opacity-50"
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn text-xs text-muted hover:text-foreground hover:bg-elevated transition-colors disabled:opacity-50 shrink-0"
           >
             <RefreshCw className={`h-3 w-3 ${reload.isPending ? 'animate-spin' : ''}`} />
             重新加载
@@ -622,15 +733,28 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
           </div>
         </div>
 
-        {/* 数据源选择 - 横向卡片列表 */}
+        {/* 数据源卡片 - 横向网格 (配置入口) */}
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5">
           {allItems.map(item => {
-            const serving = servingLabels(item.name)
+            const servingSet = servingSetOf(item.name)
+            const isTf = item.name === 'tickflow'
+            if (isTf) {
+              // 名义路由到 tickflow 但当前档位提供不了的能力 → 按锁定态展示, 不算服务中
+              for (const c of matrixCaps) {
+                if (!c.tf_available) servingSet.delete(c.id)
+              }
+            }
+            const servingCount = servingSet.size
             const isSelected = selected === item.name
             const plugin = pluginMap.get(item.name)
             const pluginUnavailable = plugin && !plugin.available
             const installing = installMut.isPending && installMut.variables === item.name
             const uninstalling = uninstallMut.isPending && uninstallMut.variables === item.name
+            const declared = new Set(item.datasets)
+            // TickFlow 展示注册表全量能力 (含档位锁定态); 其余源按声明过滤
+            const chipCaps = isTf
+              ? matrixCaps
+              : matrixCaps.filter(c => declared.has(c.id))
             return (
               <div
                 key={item.name}
@@ -639,7 +763,7 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
                   if (pluginUnavailable && !plugin?.api_key_env) return
                   setSelected(item.name)
                   // 只有用户自定义源 (YAML) 才进编辑器; tickflow 和插件不可编辑
-                  if (customList.some(c => c.name === item.name)) {
+                  if (customNames.has(item.name)) {
                     editExisting.mutate(item.name)
                   }
                 }}
@@ -651,93 +775,82 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
                       : 'border-border/60 bg-elevated/20 hover:bg-elevated/40 cursor-pointer'
                 }`}
               >
-                <div className="flex items-center gap-2 mb-1">
+                {/* 名称行: 服务点 + 名称 + 档位/第三方标识 */}
+                <div className="flex items-center gap-2">
                   <span
                     className={`h-1.5 w-1.5 rounded-full shrink-0 ${
-                      pluginUnavailable ? 'bg-muted/30' : serving.length > 0 ? 'bg-accent' : 'bg-transparent border border-muted/40'
+                      pluginUnavailable ? 'bg-muted/30' : servingCount > 0 ? 'bg-accent' : 'bg-transparent border border-muted/40'
                     }`}
                   />
-                  <span className={`text-sm truncate flex-1 ${serving.length > 0 ? 'font-medium text-foreground' : 'text-secondary'}`}>
+                  <span className={`text-sm truncate flex-1 ${servingCount > 0 ? 'font-medium text-foreground' : 'text-secondary'}`}>
                     {item.display_name}
                   </span>
-                  {serving.length > 0 && (
-                    <span
-                      className="shrink-0 inline-flex items-center gap-0.5 text-[9px] text-accent"
-                      title={`正在提供: ${serving.join(' · ')}`}
-                    >
-                      <Check className="h-2.5 w-2.5" /> 服务中
-                    </span>
+                  {isTf && matrix.data?.tickflow_tier && (
+                    <TierTag label={matrix.data.tickflow_tier} />
                   )}
-                  {item.name === 'tickflow' && (
-                    <>
-                      <span className="shrink-0 rounded bg-warning/15 px-1 py-0.5 text-[9px] font-medium leading-none text-warning">第三方</span>
-                      <AllTiersBadge size="text-[9px]" />
-                    </>
-                  )}
-                  {pluginNames.has(item.name) && (
+                  {!customNames.has(item.name) && (
                     <span className="shrink-0 rounded bg-warning/15 px-1 py-0.5 text-[9px] font-medium leading-none text-warning">第三方</span>
                   )}
-                  {/* 右侧操作区: 插件未安装→安装按钮(runtime=none 无依赖可装,显示配置提示); 否则→使用/卸载 */}
-                  {pluginUnavailable ? (
-                    plugin?.runtime === 'none' ? (
-                      <span
-                        className="text-[10px] text-muted/50 shrink-0 cursor-help"
-                        title={plugin?.status || '未配置凭据'}
-                      >
-                        点击配置 Key
-                      </span>
-                    ) : installing ? (
-                      <span className="inline-flex items-center gap-1 text-[9px] text-accent shrink-0">
-                        <RefreshCw className="h-2.5 w-2.5 animate-spin" /> 安装中...
-                      </span>
-                    ) : (
-                      <button
-                        onClick={(e) => { e.stopPropagation(); installMut.mutate(item.name) }}
-                        disabled={installMut.isPending}
-                        className="shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-50"
-                      >
-                        <Zap className="h-2.5 w-2.5" /> 安装
-                      </button>
-                    )
-                  ) : plugin ? (
-                    /* 已安装插件: 使用 + 卸载 */
-                    <div className="flex items-center gap-1 shrink-0">
-                      <button
-                        onClick={(e) => { e.stopPropagation(); switchProvider.mutate(item.name) }}
-                        disabled={switchProvider.isPending}
-                        className="rounded px-1.5 py-0.5 text-[10px] font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-50"
-                      >
-                        使用
-                      </button>
-                      {plugin?.runtime !== 'none' && (uninstalling ? (
-                        <RefreshCw className="h-2.5 w-2.5 animate-spin text-muted" />
-                      ) : (
-                        <button
-                          onClick={(e) => { e.stopPropagation(); uninstallMut.mutate(item.name) }}
-                          disabled={uninstallMut.isPending}
-                          className="text-[10px] text-muted/50 hover:text-danger transition-colors disabled:opacity-40"
-                          title="卸载依赖"
-                        >
-                          卸载
-                        </button>
-                      ))}
-                    </div>
-                  ) : (
-                    <button
-                      onClick={(e) => { e.stopPropagation(); switchProvider.mutate(item.name) }}
-                      disabled={switchProvider.isPending}
-                      className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-50"
-                    >
-                      使用
-                    </button>
-                  )}
                 </div>
-                {/* 数据集标签(静态): 该源适配的数据集, 路由选择在下方能力卡片 */}
-                <DatasetChipRow datasets={item.name === 'tickflow' ? [...item.datasets, 'financial'] : item.datasets} />
-                {/* 未安装插件显示安装命令提示 */}
-                {pluginUnavailable && plugin?.install_hint && (
-                  <div className="ml-3.5 mt-1 text-[10px] text-muted/40 font-mono truncate">{plugin.install_hint}</div>
-                )}
+
+                {/* 能力芯片: 服务中 / 已适配 / 档位锁定 */}
+                <div className="mt-2">
+                  <CapabilityChips caps={chipCaps} servingSet={servingSet} isTickFlow={isTf} />
+                </div>
+
+                {/* 底部: 状态提示 + 操作 */}
+                <div className="mt-2 pt-2 border-t border-border/50 flex items-center justify-between gap-2 min-h-[22px]">
+                  <span className="text-[10px] text-muted/50 truncate min-w-0">
+                    {servingCount > 0
+                      ? `服务中 ${servingCount} 项能力`
+                      : pluginUnavailable
+                        ? (plugin?.runtime === 'none' ? '点击配置 Key' : (plugin?.install_hint || plugin?.status || ''))
+                        : ''}
+                  </span>
+                  <div className="flex items-center gap-1 shrink-0">
+                    {pluginUnavailable ? (
+                      plugin?.runtime !== 'none' && (
+                        installing ? (
+                          <span className="inline-flex items-center gap-1 text-[10px] text-accent">
+                            <RefreshCw className="h-2.5 w-2.5 animate-spin" /> 安装中...
+                          </span>
+                        ) : (
+                          <button
+                            onClick={(e) => { e.stopPropagation(); installMut.mutate(item.name) }}
+                            disabled={installMut.isPending}
+                            className="rounded px-1.5 py-0.5 text-[10px] font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-50"
+                          >
+                            安装
+                          </button>
+                        )
+                      )
+                    ) : (
+                      <>
+                        <button
+                          onClick={(e) => { e.stopPropagation(); switchProvider.mutate(item.name) }}
+                          disabled={switchProvider.isPending}
+                          className="rounded px-1.5 py-0.5 text-[10px] font-medium bg-accent/10 text-accent hover:bg-accent/20 transition-colors disabled:opacity-50"
+                        >
+                          套用
+                        </button>
+                        {plugin && plugin?.runtime !== 'none' && (
+                          uninstalling ? (
+                            <RefreshCw className="h-2.5 w-2.5 animate-spin text-muted" />
+                          ) : (
+                            <button
+                              onClick={(e) => { e.stopPropagation(); uninstallMut.mutate(item.name) }}
+                              disabled={uninstallMut.isPending}
+                              className="text-[10px] text-muted/50 hover:text-danger transition-colors disabled:opacity-40"
+                              title="卸载依赖"
+                            >
+                              卸载
+                            </button>
+                          )
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
               </div>
             )
           })}
@@ -770,20 +883,16 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
           </div>
         )}
 
-        <div className="mt-3 flex items-center gap-3 text-[10px] text-muted/50">
-          <span>单击查看各源能力</span>
+        <div className="mt-3 flex items-center gap-3 text-[10px] text-muted/50 flex-wrap">
+          <span>芯片: 高亮=服务中 · 灰=已适配 · <Lock className="inline h-2.5 w-2.5" />=需更高 TickFlow 档位</span>
           <span className="text-muted/30">·</span>
-          <span>能力卡片上点标签,单独选择每个数据集的提供方</span>
-          <span className="text-muted/30">·</span>
-          <span>点「使用」一键套用该源全部能力</span>
-          <span className="text-muted/30">·</span>
-          <span>未单独设置的由 TickFlow 提供</span>
+          <span>单击卡片查看介绍与配置, 点「套用」让该源接管其适配的全部能力</span>
         </div>
 
       </section>
       </AnchorWrap>
 
-      {/* ===== 下方: 编辑区 ===== */}
+      {/* ===== 下方: 选中源的介绍 + 配置 (单一卡片布局) ===== */}
       <AnimatePresence mode="wait">
         <motion.div
           key={selected}
@@ -792,13 +901,8 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
           transition={{ duration: 0.15 }}
         >
           {selected === 'tickflow' ? (
-            <TickFlowDetail
-              active={servingDatasets('tickflow').length > 0}
-              onSwitch={() => switchProvider.mutate('tickflow')}
-              switching={switchProvider.isPending}
-              route={routeCtx}
-            />
-          ) : selected === '__new__' || customList.some(c => c.name === selected) ? (
+            <TickFlowDetail active={servingDatasets('tickflow').length > 0} matrix={matrix.data} />
+          ) : selected === '__new__' || customNames.has(selected) ? (
             selected === '__new__' ? (
               <DataSourceEditor
                 key={selected}
@@ -806,64 +910,36 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
                 existingName={undefined}
                 onCancel={() => setSelected('tickflow')}
                 onSaved={() => {
-                  qc.invalidateQueries({ queryKey: QK.dataSources })
-                  // 数据集声明变化 → 能力增广与实时模式立即刷新
-                  qc.invalidateQueries({ queryKey: QK.preferences })
-                  qc.invalidateQueries({ queryKey: QK.capabilities })
-                  qc.invalidateQueries({ queryKey: QK.quoteStatus })
+                  invalidateSources()
                   setSelected('tickflow')
                 }}
                 activeName={activeName}
                 onActivate={(name) => switchProvider.mutate(name)}
               />
             ) : (
-              /* 自定义源详情: 能力卡片(路由) + 编辑器 */
-              <div className="space-y-5">
-                <section className="rounded-card border border-border bg-surface p-6">
-                  <div className="flex items-center gap-2.5 mb-4">
-                    <Database className="h-4 w-4 text-secondary" />
-                    <h3 className="text-sm font-medium text-foreground">
-                      {selectedCustom?.display_name || selected} · 数据集能力与路由
-                    </h3>
-                  </div>
-                  <SourceCapabilityGrid
-                    sourceName={selected}
-                    sourceDisplay={selectedCustom?.display_name || selected}
-                    datasets={selectedCustom?.datasets || []}
-                    candidatesOf={routeCtx.candidatesOf}
-                    providerOf={routeCtx.providerOf}
-                    pending={routeCtx.pending}
-                    onSelect={routeCtx.onSelect}
-                  />
-                </section>
-                <DataSourceEditor
-                  key={selected}
-                  initial={null}
-                  existingName={selected}
-                  onCancel={() => setSelected('tickflow')}
-                  onSaved={() => {
-                    qc.invalidateQueries({ queryKey: QK.dataSources })
-                    // 数据集声明变化 → 能力增广与实时模式立即刷新
-                    qc.invalidateQueries({ queryKey: QK.preferences })
-                    qc.invalidateQueries({ queryKey: QK.capabilities })
-                    qc.invalidateQueries({ queryKey: QK.quoteStatus })
-                    // 强制清除该源的详情缓存, 下次编辑重新拉取最新配置
-                    qc.removeQueries({ queryKey: ['data-source-detail', selected] })
-                  }}
-                  activeName={activeName}
-                  onActivate={(name) => switchProvider.mutate(name)}
-                  onDelete={selectedCustom ? () => setConfirmDelete(selected) : undefined}
-                />
-              </div>
+              <DataSourceEditor
+                key={selected}
+                initial={null}
+                existingName={selected}
+                onCancel={() => setSelected('tickflow')}
+                onSaved={() => {
+                  invalidateSources()
+                  // 强制清除该源的详情缓存, 下次编辑重新拉取最新配置
+                  qc.removeQueries({ queryKey: ['data-source-detail', selected] })
+                }}
+                activeName={activeName}
+                onActivate={(name) => switchProvider.mutate(name)}
+                onDelete={selectedCustom ? () => setConfirmDelete(selected) : undefined}
+              />
             )
           ) : pluginList.find(x => x.name === selected) ? (
-            /* 选中插件: 信息 + 能力卡片(路由) + Key 配置 */
             <PluginDetail
               plugin={pluginList.find(x => x.name === selected)!}
               isActive={servingDatasets(selected).length > 0}
+              matrixCaps={matrixCaps}
+              servingSet={servingSetOf(selected)}
               onSwitch={() => switchProvider.mutate(selected)}
               switching={switchProvider.isPending}
-              route={routeCtx}
             />
           ) : null}
         </motion.div>
@@ -903,123 +979,228 @@ export function SettingsDataSourcesPanel({ highlight }: { highlight?: string } =
   )
 }
 
-function PluginDetail({ plugin, isActive, onSwitch, switching, route }: {
+/** 插件详情: 介绍 + 适配能力 + Key 配置合并为单一卡片 */
+function PluginDetail({ plugin, isActive, matrixCaps, servingSet, onSwitch, switching }: {
   plugin: PluginDataSourceItem
   isActive: boolean
+  matrixCaps: CapabilityRoute[]
+  servingSet: Set<string>
   onSwitch: () => void
   switching: boolean
-  route: RouteCtx
 }) {
+  const declared = new Set(plugin.datasets)
   return (
-    <div className="space-y-5">
-      <section className="rounded-card border border-border bg-surface p-6">
-        <div className="flex items-start gap-4 mb-5">
-          <div className="h-11 w-11 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
-            <Zap className="h-5 w-5 text-accent" />
+    <section className="rounded-card border border-border bg-surface p-6">
+      {/* 介绍 */}
+      <div className="flex items-start gap-4">
+        <div className="h-11 w-11 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
+          <Zap className="h-5 w-5 text-accent" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1 flex-wrap">
+            <h3 className="text-base font-semibold text-foreground">{plugin.display_name}</h3>
+            <span className="text-[10px] text-muted/50 uppercase tracking-wider">插件 · {plugin.runtime}</span>
+            <span className="rounded bg-warning/15 px-1 py-0.5 text-[9px] font-medium leading-none text-warning">第三方</span>
+            {isActive && (
+              <span className="inline-flex items-center gap-1 text-[10px] text-accent bg-accent/10 px-2 py-1 rounded">
+                <Check className="h-2.5 w-2.5" /> 服务中
+              </span>
+            )}
           </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1">
-              <h3 className="text-base font-semibold text-foreground">{plugin.display_name}</h3>
-              <span className="text-[10px] text-muted/50 uppercase tracking-wider">插件 · {plugin.runtime}</span>
-            </div>
-            {plugin.description && <p className="text-xs text-secondary leading-relaxed">{plugin.description}</p>}
+          {plugin.description && <p className="text-xs text-secondary leading-relaxed">{plugin.description}</p>}
+          <div className="mt-2">
+            <CapabilityChips
+              caps={matrixCaps.filter(c => declared.has(c.id))}
+              servingSet={servingSet}
+              isTickFlow={false}
+            />
           </div>
         </div>
+      </div>
 
-        {/* 本源参与的能力: 标签选择提供方, 即刻生效 */}
-        <SourceCapabilityGrid
-          sourceName={plugin.name}
-          sourceDisplay={plugin.display_name}
-          datasets={plugin.datasets}
-          candidatesOf={route.candidatesOf}
-          providerOf={route.providerOf}
-          pending={route.pending}
-          onSelect={route.onSelect}
-        />
+      {/* 主体: 操作 + Key 配置 (左) | 能力适配表 (右), 布局对齐 TickFlow 详情 */}
+      <div className="mt-5 pt-5 border-t border-border grid grid-cols-1 lg:grid-cols-[1fr_1.15fr] gap-6 items-start">
+        <div className="min-w-0">
+          <div className="flex items-center gap-3">
+            {plugin.available ? (
+              !isActive && (
+                <button
+                  onClick={onSwitch}
+                  disabled={switching}
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-btn bg-accent/10 text-accent text-xs font-medium hover:bg-accent/20 transition-colors disabled:opacity-50"
+                >
+                  <Zap className="h-3.5 w-3.5" />
+                  一键接管其适配的能力
+                </button>
+              )
+            ) : (
+              <span className="text-xs text-muted">{plugin.status}</span>
+            )}
+          </div>
 
-        <div className="flex items-center gap-3 mt-4">
-          {isActive ? (
-            <span className="inline-flex items-center gap-1 text-[10px] text-accent bg-accent/10 px-2 py-1 rounded">
-              <Check className="h-2.5 w-2.5" /> 服务中
-            </span>
-          ) : plugin.available ? (
-            <button
-              onClick={onSwitch}
-              disabled={switching}
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-btn bg-accent/10 text-accent text-xs font-medium hover:bg-accent/20 transition-colors disabled:opacity-50"
-            >
-              <Zap className="h-3.5 w-3.5" />
-              整体切换为该源
-            </button>
-          ) : (
-            <span className="text-xs text-muted">{plugin.status}</span>
+          {/* API Key 配置 (声明了 api_key_env 的插件) */}
+          {plugin.api_key_env && (
+            <div className={plugin.available ? 'mt-4' : ''}>
+              <PluginKeyConfig plugin={plugin} />
+            </div>
           )}
         </div>
-      </section>
 
-      {/* API Key 配置 (声明了 api_key_env 的插件) */}
-      {plugin.api_key_env && <PluginKeyConfig plugin={plugin} />}
-    </div>
-  )
-}
-
-function TickFlowDetail({ active, onSwitch, switching, route }: {
-  active: boolean
-  onSwitch: () => void
-  switching: boolean
-  route: RouteCtx
-}) {
-  return (
-    <div className="space-y-5">
-      <section className="rounded-card border border-border bg-surface p-6">
-        <div className="flex items-start gap-4 mb-5">
-          <div className="h-11 w-11 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
-            <Database className="h-5 w-5 text-accent" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 flex-wrap">
-              <h2 className="text-base font-semibold text-foreground">TickFlow</h2>
-              <span className="rounded bg-warning/15 px-1.5 py-0.5 text-[10px] font-medium text-warning">第三方</span>
-              <AllTiersBadge />
-              {active && (
-                <span className="inline-flex items-center gap-1 text-[10px] text-accent bg-accent/10 px-2 py-1 rounded">
-                  <Check className="h-2.5 w-2.5" /> 服务中
-                </span>
-              )}
-            </div>
-            <p className="text-xs text-secondary mt-1.5 leading-relaxed">
-              默认数据源,具备全部能力(日K · 除权 · 分钟 · 实时 · 财务)。在下方每个能力卡片上点标签,可单独选择该数据集由哪个数据源提供。
-            </p>
+        {/* 能力适配表: 全部能力 × 该源适配状态 (样式对齐 TickFlow 能力档位表) */}
+        <div className="min-w-0">
+          <div className="rounded-lg border border-border/60 bg-elevated/20 divide-y divide-border/50">
+            {matrixCaps.map(cap => {
+              const Icon = CAP_ICON[cap.id] ?? Database
+              const serving = servingSet.has(cap.id)
+              const declaredCap = declared.has(cap.id)
+              return (
+                <div key={cap.id} className="flex items-center gap-2.5 px-3 py-1.5">
+                  <Icon className="h-3.5 w-3.5 text-secondary shrink-0" />
+                  <div className="flex-1 min-w-0 truncate">
+                    <span className="text-xs text-foreground">{cap.label}</span>
+                    <span className="ml-1.5 text-[10px] text-muted/60">{cap.desc}</span>
+                  </div>
+                  {serving ? (
+                    <span className="w-[56px] text-right text-[10px] text-bear inline-flex items-center justify-end gap-0.5 shrink-0">
+                      <Check className="h-2.5 w-2.5" />服务中
+                    </span>
+                  ) : declaredCap ? (
+                    <span className={`w-[56px] text-right text-[10px] shrink-0 ${plugin.available ? 'text-secondary' : 'text-warning/80'}`}>
+                      {plugin.available ? '已适配' : '未就绪'}
+                    </span>
+                  ) : (
+                    <span className="w-[56px] text-right text-[10px] text-muted/30 shrink-0">—</span>
+                  )}
+                </div>
+              )
+            })}
           </div>
         </div>
+      </div>
+    </section>
+  )
+}
 
-        {/* 全部能力的提供方标签选择 + 恢复默认 */}
-        <SourceCapabilityGrid
-          sourceName="tickflow"
-          sourceDisplay="TickFlow"
-          datasets={['daily', 'adj_factor', 'realtime', 'minute']}
-          candidatesOf={route.candidatesOf}
-          providerOf={route.providerOf}
-          pending={route.pending}
-          onSelect={route.onSelect}
-          anyCustom={route.anyCustom}
-          onReset={route.onReset}
-        />
+/** TickFlow 详情: 介绍 + 能力档位表 + Key/可用功能左右两栏。
+ *  检测档位不再单独设面板 — 以头部「档位徽章 + ? 说明 + 重新检测」小集群呈现。 */
+function TickFlowDetail({ active, matrix }: { active: boolean; matrix?: CapabilityMatrix }) {
+  const caps = matrix?.capabilities ?? []
+  const tier = matrix?.tickflow_tier
+  const { data: tfCaps } = useCapabilities()
+  const capEntries = tfCaps ? Object.entries(tfCaps.capabilities) : []
+  const invalidate = useInvalidateTierRelated()
+  const redetect = useMutation({
+    mutationFn: () => api.redetectCapabilities(),
+    onSuccess: () => invalidate(),
+  })
+  return (
+    <section className="rounded-card border border-border bg-surface p-6">
+      {/* 介绍 */}
+      <div className="flex items-start gap-4">
+        <div className="h-11 w-11 rounded-xl bg-accent/10 flex items-center justify-center shrink-0">
+          <Database className="h-5 w-5 text-accent" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h2 className="text-base font-semibold text-foreground">TickFlow</h2>
+            <span className="rounded bg-warning/15 px-1.5 py-0.5 text-[10px] font-medium text-warning">第三方</span>
+            {tier && (
+              <>
+                <span className="text-[10px] text-muted/80">检测档位</span>
+                <TierTag label={tier} />
+                <TierHelpPopover currentLabel={tfCaps?.label ?? tier} />
+                <button
+                  type="button"
+                  onClick={() => redetect.mutate()}
+                  disabled={redetect.isPending}
+                  title="根据 API Key 重新检测订阅档位"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded text-muted/60 hover:text-foreground hover:bg-elevated/70 transition-colors duration-150"
+                >
+                  <RefreshCw className={`h-3 w-3 ${redetect.isPending ? 'animate-spin' : ''}`} />
+                </button>
+                {/* 可用功能: 收进悬停浮层, 不占版面 (能力清单 + 限频) */}
+                <div className="relative group/caps shrink-0" aria-label="可用功能">
+                  <span className="flex h-5 w-5 items-center justify-center rounded text-muted/60 transition-colors group-hover/caps:text-foreground">
+                    <ListChecks className="h-3 w-3" />
+                  </span>
+                  <div className="pointer-events-none invisible absolute left-0 top-full z-20 mt-1.5 w-64 rounded-md border border-border bg-surface py-2 pl-3 pr-3.5 opacity-0 shadow-2xl shadow-black/40 transition-all duration-150 group-hover/caps:visible group-hover/caps:opacity-100">
+                    <div className="mb-1.5 flex items-center justify-between">
+                      <span className="text-xs font-medium text-foreground">可用功能</span>
+                      <span className="text-[10px] font-mono text-muted">{capEntries.length} 项</span>
+                    </div>
+                    {capEntries.length > 0 ? (
+                      <div className="max-h-56 space-y-1 overflow-y-auto border-t border-border/60 pt-1.5">
+                        {capEntries.map(([cap, lim]) => (
+                          <div key={cap} className="flex min-w-0 items-baseline gap-2">
+                            <span className="min-w-0 flex-1 truncate text-[11px] text-secondary">
+                              {CAP_LABELS[cap]?.name ?? cap}
+                            </span>
+                            <span className="shrink-0 font-mono text-[10px] text-muted">
+                              {lim.rpm ? `${lim.rpm}/min` : lim.subscribe ? `${lim.subscribe} 订阅` : '—'}
+                              {lim.batch ? ` · ${lim.batch}/次` : ''}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="border-t border-border/60 pt-1.5 text-[11px] text-muted">
+                        暂无 — 配置 API Key 后自动检测
+                      </div>
+                    )}
+                    <div className="mt-1.5 border-t border-border/60 pt-1.5 text-[10px] text-muted/70">
+                      根据 API Key 自动检测
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+            <AllTiersBadge />
+            {active && (
+              <span className="inline-flex items-center gap-1 text-[10px] text-accent bg-accent/10 px-2 py-1 rounded">
+                <Check className="h-2.5 w-2.5" /> 服务中
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-secondary mt-1.5 leading-relaxed">
+            默认数据源,每个能力所需订阅档位见下表 — 当前档位未解锁的能力不会出现在上方「能力路由」的选项里。
+            未单独设置的能力默认由 TickFlow 提供;也可在数据源区接入插件替换任意能力。
+          </p>
+        </div>
+      </div>
 
-        {!active && (
-          <button
-            onClick={onSwitch}
-            disabled={switching}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-btn bg-accent/10 text-accent text-xs font-medium hover:bg-accent/20 transition-colors disabled:opacity-50 mt-3"
-          >
-            <Zap className="h-3.5 w-3.5" />
-            切换为当前数据源
-          </button>
-        )}
-      </section>
-
-      {/* TickFlow API Key 配置 + 订阅档位 + 可用功能 (原 account tab 内容) */}
-      <TickFlowKeyConfig />
-    </div>
+      {/* 主体: API Key 配置 (左) | 能力档位表 (右) */}
+      <div className="mt-5 pt-5 border-t border-border grid grid-cols-1 lg:grid-cols-[1fr_1.15fr] gap-6 items-start">
+        <div className="min-w-0">
+          <TickFlowKeySection />
+        </div>
+        <div className="min-w-0">
+          {/* 能力档位表: 各能力所需档位 + 当前档位可用性 */}
+          {caps.length > 0 && (
+            <div className="rounded-lg border border-border/60 bg-elevated/20 divide-y divide-border/50">
+              {caps.map(cap => {
+                const Icon = CAP_ICON[cap.id] ?? Database
+                return (
+                  <div key={cap.id} className="flex items-center gap-2.5 px-3 py-1.5">
+                    <Icon className="h-3.5 w-3.5 text-secondary shrink-0" />
+                    <div className="flex-1 min-w-0 truncate">
+                      <span className="text-xs text-foreground">{cap.label}</span>
+                      <span className="ml-1.5 text-[10px] text-muted/60">{cap.desc}</span>
+                    </div>
+                    <TierReqChip tier={cap.tf_tier} currentLabel={tier} />
+                    {cap.tf_available ? (
+                      <span className="w-[52px] text-right text-[10px] text-bear inline-flex items-center justify-end gap-0.5 shrink-0">
+                        <Check className="h-2.5 w-2.5" />可用
+                      </span>
+                    ) : (
+                      <span className="w-[52px] text-right text-[10px] text-warning/80 shrink-0">未解锁</span>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
   )
 }
diff --git a/frontend/src/pages/settings/Keys.tsx b/frontend/src/pages/settings/Keys.tsx
index e4cd10a..d8bb5ba 100644
--- a/frontend/src/pages/settings/Keys.tsx
+++ b/frontend/src/pages/settings/Keys.tsx
@@ -8,8 +8,6 @@ import {
   Trash2,
   CheckCircle2,
   AlertCircle,
-  RefreshCw,
-  Activity,
   ExternalLink,
   Loader2,
   Save,
@@ -17,17 +15,50 @@ import {
   HelpCircle,
 } from 'lucide-react'
 import { api } from '@/lib/api'
-import { useCapabilities, useSettings } from '@/lib/useSharedQueries'
+import { useSettings } from '@/lib/useSharedQueries'
 import { QK } from '@/lib/queryKeys'
-import { CAP_LABELS, tierTextStyle, tierStyle, tierBaseName, ALL_TIERS, TierTag } from '@/lib/capability-labels'
+import { tierStyle, tierBaseName, ALL_TIERS, TierTag } from '@/lib/capability-labels'
 
-// ===== TickFlow Key 配置主体 (可嵌入 DataSources 的 TickFlow 详情区) =====
+// ===== TickFlow 详情内嵌区块 (组合进数据源页的单一详情卡, 不再各自成卡) =====
+// 档位变化会重塑能力矩阵候选 (按档位过滤) → Key/档位相关写操作统一连带失效。
 
-export function TickFlowKeyConfig() {
+/** 区块小标题 (详情卡内部的分节, 区别于页面级 section) */
+function SectionHeading({ icon: Icon, title, badge, right }: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  badge?: string
+  right?: React.ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2 mb-3">
+      <div className="flex items-center gap-2 min-w-0">
+        <Icon className="h-3.5 w-3.5 text-secondary shrink-0" />
+        <h3 className="text-xs font-medium text-foreground">{title}</h3>
+        {badge && (
+          <span className="px-1.5 py-0.5 text-[10px] font-mono rounded bg-elevated text-muted shrink-0">{badge}</span>
+        )}
+      </div>
+      {right}
+    </div>
+  )
+}
+
+/** Key/档位/能力矩阵/侧栏状态的统一连带失效 (档位变化重塑矩阵候选) */
+export function useInvalidateTierRelated() {
   const qc = useQueryClient()
+  return () => {
+    qc.invalidateQueries({ queryKey: QK.settings })
+    qc.invalidateQueries({ queryKey: QK.capabilities })
+    qc.invalidateQueries({ queryKey: QK.capabilityMatrix })
+    // 档位变化会改变实时行情模式(none/watchlist/full_market), 立即刷新侧边栏状态
+    qc.invalidateQueries({ queryKey: QK.quoteStatus })
+  }
+}
 
+/** API Key 配置区块: 状态 + 输入 + 保存并检测 (先探后存) */
+export function TickFlowKeySection() {
   const settings = useSettings()
-  const caps = useCapabilities()
+  const invalidate = useInvalidateTierRelated()
 
   const [keyInput, setKeyInput] = useState('')
   const [revealing, setRevealing] = useState(false)
@@ -38,10 +69,7 @@ export function TickFlowKeyConfig() {
     mutationFn: () => api.saveTickflowKey(keyInput.trim()),
     onSuccess: (data) => {
       setKeyInput('')
-      qc.invalidateQueries({ queryKey: QK.settings })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      // 档位变化会改变实时行情模式(none/watchlist/full_market), 立即刷新侧边栏状态
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
+      invalidate()
       if (data.ok) {
         setSaved(true)
         setTimeout(() => setSaved(false), 2000)
@@ -52,266 +80,148 @@ export function TickFlowKeyConfig() {
 
   const clear = useMutation({
     mutationFn: () => api.clearTickflowKey(),
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: QK.settings })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
-    },
+    onSuccess: () => invalidate(),
   })
 
   const redetect = useMutation({
-    mutationFn: api.redetectCapabilities,
-    onSuccess: () => {
-      qc.invalidateQueries({ queryKey: QK.settings })
-      qc.invalidateQueries({ queryKey: QK.capabilities })
-      qc.invalidateQueries({ queryKey: QK.quoteStatus })
-    },
+    mutationFn: () => api.redetectCapabilities(),
+    onSuccess: () => invalidate(),
   })
 
   const mode = settings.data?.mode
   const masked = settings.data?.tickflow_api_key_masked
-  const capCount = caps.data ? Object.keys(caps.data.capabilities).length : 0
 
   return (
-    <>
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.3fr] gap-6 max-w-5xl">
-        {/* ========== 左列: Key 配置 ========== */}
-        <div className="space-y-6">
-          <Card icon={Key} title="TickFlow API Key">
-            <p className="text-sm text-secondary leading-relaxed mb-4">
-              在{' '}
-              <a
-                href="https://tickflow.org/auth/register?ref=V3KDKGXPEA"
-                target="_blank"
-                rel="noreferrer"
-                className="text-accent hover:underline inline-flex items-baseline gap-0.5"
-              >
-                tickflow.org
-                <ExternalLink className="h-3 w-3 self-center" />
-              </a>{' '}
-              注册获取。API Key 存放为本地文件,不会上传任何第三方,请妥善保管。
-            </p>
+    <div>
+      <SectionHeading icon={Key} title="TickFlow API Key" />
 
-            {/* 当前状态 */}
-            <div className="flex items-center justify-between mb-4">
-              <div className="min-w-0">
-                <div className="text-[10px] uppercase tracking-widest text-muted">状态</div>
-                <div className="mt-1 flex items-center gap-2 min-w-0">
-                  {mode === 'api_key' ? (
-                    <>
-                      <CheckCircle2 className="h-4 w-4 text-bear shrink-0" />
-                      <span className="text-sm font-medium shrink-0">已配置</span>
-                      <span className="font-mono text-xs text-secondary truncate">{masked}</span>
-                    </>
-                  ) : mode === 'free' ? (
-                    <>
-                      <CheckCircle2 className="h-4 w-4 text-bear shrink-0" />
-                      <span className="text-sm font-medium shrink-0">免费 Key</span>
-                      <span className="font-mono text-xs text-secondary truncate">{masked}</span>
-                    </>
-                  ) : (
-                    <>
-                      <AlertCircle className="h-4 w-4 text-muted shrink-0" />
-                      <span className="text-sm font-medium text-muted">未配置</span>
-                    </>
-                  )}
-                </div>
-              </div>
-              {(mode === 'api_key' || mode === 'free') && (
-                <button
-                  onClick={() => setConfirmClear(true)}
-                  disabled={clear.isPending}
-                  className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn bg-elevated text-secondary hover:text-danger text-xs transition-colors duration-150 ease-smooth disabled:opacity-50 shrink-0"
-                >
-                  <Trash2 className="h-3 w-3" />
-                  清除
-                </button>
-              )}
-            </div>
+      <p className="text-xs text-secondary leading-relaxed mb-4">
+        在{' '}
+        <a
+          href="https://tickflow.org/auth/register?ref=V3KDKGXPEA"
+          target="_blank"
+          rel="noreferrer"
+          className="text-accent hover:underline inline-flex items-baseline gap-0.5"
+        >
+          tickflow.org
+          <ExternalLink className="h-3 w-3 self-center" />
+        </a>{' '}
+        注册获取。API Key 存放为本地文件,不会上传任何第三方,请妥善保管。
+      </p>
 
-            {/* 输入 */}
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-                if (keyInput.trim()) save.mutate()
-              }}
-              className="space-y-2"
-            >
-              <div className="relative">
-                <input
-                  type={revealing ? 'text' : 'password'}
-                  placeholder={mode === 'none' ? '粘贴 TickFlow API Key' : '粘贴新 Key 替换当前'}
-                  value={keyInput}
-                  onChange={(e) => { setKeyInput(e.target.value); if (saved) setSaved(false) }}
-                  className="w-full px-3 py-2 pr-9 rounded-input bg-base border border-border text-sm font-mono focus:outline-none focus:border-accent transition-colors duration-150 ease-smooth"
-                />
-                <button
-                  type="button"
-                  onClick={() => setRevealing((v) => !v)}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-foreground transition-colors duration-150 ease-smooth"
-                  tabIndex={-1}
-                  aria-label={revealing ? '隐藏' : '显示'}
-                >
-                  {revealing ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                </button>
-              </div>
-              <button
-                type="submit"
-                disabled={save.isPending || (!keyInput.trim() && !saved)}
-                className="w-full h-10 rounded-xl bg-accent text-white text-sm font-semibold flex items-center justify-center gap-2 hover:bg-accent/90 disabled:opacity-40 transition-all"
-              >
-                {save.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : saved ? <Check className="h-4 w-4" /> : <Save className="h-4 w-4" />}
-                {save.isPending ? '保存中...' : saved ? '已保存' : '保存并检测'}
-              </button>
-
-              {/* 检测中提示 —— 成功/失败后自动消失 */}
-              {save.isPending && (
-                <div className="flex items-start gap-1.5 rounded-btn border border-warning/30 bg-warning/10 px-3 py-2 text-[11px] leading-snug text-warning">
-                  <AlertCircle className="h-3.5 w-3.5 mt-px shrink-0" />
-                  <span>
-                    验证通过前请不要离开当前页面 · 如遇网络问题请点击
-                    <button
-                      type="button"
-                      onClick={() => { save.reset(); redetect.mutate() }}
-                      disabled={redetect.isPending}
-                      className="font-semibold underline underline-offset-2 hover:text-warning/80 disabled:opacity-50"
-                    >
-                      {redetect.isPending ? '重新检测中…' : '重新检测'}
-                    </button>
-                  </span>
-                </div>
-              )}
-            </form>
-
-            {save.isError && (
-              <div className="mt-3 text-xs text-danger">
-                保存失败:{String((save.error as any).message)}
-              </div>
-            )}
-            {/* 无效 key —— 先探后存:探测失败(key 无效/乱填)时不存储,提示用户 */}
-            {save.data && !save.data.ok && (
-              <div className="mt-3 text-xs text-danger flex items-center gap-1.5">
-                <AlertCircle className="h-3 w-3 shrink-0" />
-                {save.data.reason === 'invalid'
-                  ? 'Key 无效或已过期,请检查后重试(未保存该 Key)'
-                  : save.data.error ?? '保存失败'}
-              </div>
-            )}
-            {save.data?.ok && (
-              <div className="mt-3 text-xs text-bear flex items-center gap-1.5">
-                <CheckCircle2 className="h-3 w-3" />
-                保存成功 — 档位 {save.data.tier_label}
-                {save.data.mode === 'free' && '(免费档 · 历史日K + 自选实时监控)'}
-              </div>
-            )}
-          </Card>
-        </div>
-
-        {/* ========== 右列: 档位 + 能力 ========== */}
-        <div className="space-y-6">
-          <Card
-            icon={Activity}
-            title="订阅档位"
-            right={
-              <button
-                onClick={() => redetect.mutate()}
-                disabled={redetect.isPending}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn bg-elevated hover:bg-elevated/80 text-xs text-secondary transition-colors duration-150 ease-smooth disabled:opacity-50"
-              >
-                <RefreshCw className={`h-3 w-3 ${redetect.isPending ? 'animate-spin' : ''}`} />
-                重新检测
-              </button>
-            }
-          >
-            {caps.data ? (
+      {/* 当前状态 */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="min-w-0">
+          <div className="text-[10px] uppercase tracking-widest text-muted">状态</div>
+          <div className="mt-1 flex items-center gap-2 min-w-0">
+            {mode === 'api_key' ? (
               <>
-                <div className="flex items-center gap-1.5">
-                  <div className="font-mono text-3xl font-bold tracking-tight" style={tierTextStyle(caps.data.label)}>
-                    {caps.data.label}
-                  </div>
-                  <TierHelpPopover currentLabel={caps.data.label} />
-                </div>
-                <div className="mt-1 text-xs text-muted">
-                  根据 API Key 自动检测 · 拥有"代表性 capability"任一即认为该档
-                </div>
-
-                {settings.data?.missing_caps && settings.data.missing_caps.length > 0 && (
-                  <div className="mt-3 rounded-btn border border-warning/40 bg-warning/5 px-3 py-2 text-xs">
-                    <div className="font-medium text-warning mb-1">
-                      本档应有但未探测到({settings.data.missing_caps.length} 项)
-                    </div>
-                    <div className="text-secondary space-y-0.5">
-                      {settings.data.missing_caps.map((c) => (
-                        <div key={c} className="font-mono">
-                          {CAP_LABELS[c]?.name ?? c}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
+                <CheckCircle2 className="h-4 w-4 text-bear shrink-0" />
+                <span className="text-sm font-medium shrink-0">已配置</span>
+                <span className="font-mono text-xs text-secondary truncate">{masked}</span>
+              </>
+            ) : mode === 'free' ? (
+              <>
+                <CheckCircle2 className="h-4 w-4 text-bear shrink-0" />
+                <span className="text-sm font-medium shrink-0">免费 Key</span>
+                <span className="font-mono text-xs text-secondary truncate">{masked}</span>
               </>
             ) : (
-              <div className="text-sm text-muted">加载中…</div>
+              <>
+                <AlertCircle className="h-4 w-4 text-muted shrink-0" />
+                <span className="text-sm font-medium text-muted">未配置</span>
+              </>
             )}
-          </Card>
-
-          <Card icon={CheckCircle2} title="可用功能" badge={`${capCount} 项`}>
-            {caps.data && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
-                className="-mx-5 -mb-5"
-              >
-                <div className="border-t border-border">
-                  {Object.entries(caps.data.capabilities).map(([cap, lim]) => {
-                    const meta = CAP_LABELS[cap]
-                    return (
-                      <div
-                        key={cap}
-                        className="px-5 py-3 border-b border-border last:border-b-0 flex items-baseline justify-between gap-4"
-                      >
-                        <div className="min-w-0">
-                          <div className="text-sm text-foreground truncate">
-                            {meta?.name ?? cap}
-                          </div>
-                          {meta?.hint && (
-                            <div className="mt-0.5 text-[11px] text-muted truncate">
-                              {meta.hint}
-                            </div>
-                          )}
-                        </div>
-                        <div className="text-right shrink-0 text-xs">
-                          <div className="font-mono text-foreground">
-                            {lim.rpm ? `${lim.rpm}/min` : lim.subscribe ? `${lim.subscribe} 订阅` : '—'}
-                          </div>
-                          {lim.batch && (
-                            <div className="font-mono text-muted">{lim.batch} 只/次</div>
-                          )}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </motion.div>
-            )}
-
-            {settings.data?.probe_log && settings.data.probe_log.length > 0 && (
-              <details className="mt-4 -mx-5 -mb-5 border-t border-border">
-                <summary className="cursor-pointer px-5 py-3 text-xs text-muted hover:text-secondary transition-colors duration-150 ease-smooth select-none">
-                  查看检测日志
-                </summary>
-                <div className="px-5 pb-4 font-mono text-[11px] space-y-0.5 text-secondary">
-                  {settings.data.probe_log.map((line, i) => (
-                    <div key={i}>{line}</div>
-                  ))}
-                </div>
-              </details>
-            )}
-          </Card>
+          </div>
         </div>
+        {(mode === 'api_key' || mode === 'free') && (
+          <button
+            onClick={() => setConfirmClear(true)}
+            disabled={clear.isPending}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-btn bg-elevated text-secondary hover:text-danger text-xs transition-colors duration-150 ease-smooth disabled:opacity-50 shrink-0"
+          >
+            <Trash2 className="h-3 w-3" />
+            清除
+          </button>
+        )}
       </div>
 
+      {/* 输入 + 保存: 左右一行 */}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          if (keyInput.trim()) save.mutate()
+        }}
+        className="flex items-center gap-2"
+      >
+        <div className="relative flex-1 min-w-0">
+          <input
+            type={revealing ? 'text' : 'password'}
+            placeholder={mode === 'none' ? '粘贴 TickFlow API Key' : '粘贴新 Key 替换当前'}
+            value={keyInput}
+            onChange={(e) => { setKeyInput(e.target.value); if (saved) setSaved(false) }}
+            className="w-full px-3 py-2 pr-9 rounded-input bg-base border border-border text-sm font-mono focus:outline-none focus:border-accent transition-colors duration-150 ease-smooth"
+          />
+          <button
+            type="button"
+            onClick={() => setRevealing((v) => !v)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-foreground transition-colors duration-150 ease-smooth"
+            tabIndex={-1}
+            aria-label={revealing ? '隐藏' : '显示'}
+          >
+            {revealing ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </button>
+        </div>
+        <button
+          type="submit"
+          disabled={save.isPending || (!keyInput.trim() && !saved)}
+          className="h-9 shrink-0 px-4 rounded-xl bg-accent text-white text-sm font-semibold flex items-center justify-center gap-2 hover:bg-accent/90 disabled:opacity-40 transition-all"
+        >
+          {save.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : saved ? <Check className="h-4 w-4" /> : <Save className="h-4 w-4" />}
+          {save.isPending ? '保存中...' : saved ? '已保存' : '保存并检测'}
+        </button>
+      </form>
+
+      {/* 检测中提示 —— 成功/失败后自动消失 */}
+      {save.isPending && (
+        <div className="mt-2 flex items-start gap-1.5 rounded-btn border border-warning/30 bg-warning/10 px-3 py-2 text-[11px] leading-snug text-warning">
+          <AlertCircle className="h-3.5 w-3.5 mt-px shrink-0" />
+            <span>
+              验证通过前请不要离开当前页面 · 如遇网络问题请点击
+              <button
+                type="button"
+                onClick={() => { save.reset(); redetect.mutate() }}
+                disabled={redetect.isPending}
+                className="font-semibold underline underline-offset-2 hover:text-warning/80 disabled:opacity-50"
+              >
+                {redetect.isPending ? '重新检测中…' : '重新检测'}
+              </button>
+            </span>
+          </div>
+        )}
+
+      {save.isError && (
+        <div className="mt-3 text-xs text-danger">
+          保存失败:{String((save.error as any).message)}
+        </div>
+      )}
+      {/* 无效 key —— 先探后存:探测失败(key 无效/乱填)时不存储,提示用户 */}
+      {save.data && !save.data.ok && (
+        <div className="mt-3 text-xs text-danger flex items-center gap-1.5">
+          <AlertCircle className="h-3 w-3 shrink-0" />
+          {save.data.reason === 'invalid'
+            ? 'Key 无效或已过期,请检查后重试(未保存该 Key)'
+            : save.data.error ?? '保存失败'}
+        </div>
+      )}
+      {save.data?.ok && (
+        <div className="mt-3 text-xs text-bear flex items-center gap-1.5">
+          <CheckCircle2 className="h-3 w-3" />
+          保存成功 — 档位 {save.data.tier_label}
+          {save.data.mode === 'free' && '(免费档 · 历史日K + 自选实时监控)'}
+        </div>
+      )}
+
       {/* 确认清除 Key 弹窗 */}
       {confirmClear && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -342,15 +252,13 @@ export function TickFlowKeyConfig() {
           </div>
         </div>
       )}
-    </>
+    </div>
   )
 }
 
-// ===== 通用卡片 =====
-
 // ===== 档位说明弹窗 =====
 
-function TierHelpPopover({ currentLabel }: { currentLabel: string }) {
+export function TierHelpPopover({ currentLabel }: { currentLabel: string }) {
   const [open, setOpen] = useState(false)
   const currentBase = tierBaseName(currentLabel)
 
@@ -412,32 +320,3 @@ function TierHelpPopover({ currentLabel }: { currentLabel: string }) {
     </div>
   )
 }
-
-
-interface CardProps {
-  icon: React.ComponentType<{ className?: string }>
-  title: string
-  badge?: string
-  right?: React.ReactNode
-  children: React.ReactNode
-}
-
-function Card({ icon: Icon, title, badge, right, children }: CardProps) {
-  return (
-    <section className="rounded-card border border-border bg-surface p-5">
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2.5">
-          <Icon className="h-4 w-4 text-secondary" />
-          <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          {badge && (
-            <span className="px-1.5 py-0.5 text-[10px] font-mono rounded bg-elevated text-muted">
-              {badge}
-            </span>
-          )}
-        </div>
-        {right}
-      </div>
-      {children}
-    </section>
-  )
-}