@winspan/claude-forge 8.51.1 → 8.54.3

package/web/src/pages/Dashboard.tsx

@@ -1,572 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useNavigate } from 'react-router-dom'
-import { Activity, MessageSquare, Clock, BookOpen, Bot, ShieldAlert, AlertTriangle, AlertCircle, Info } from 'lucide-react'
-import {
-  AreaChart, Area, BarChart, Bar,
-  PieChart, Pie, Cell,
-  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
-} from 'recharts'
-
-interface Stats {
-  pid: number
-  uptime: number
-  memory: any
-  eventCount: number
-}
-
-interface SystemStats {
-  totalSessions: number
-  totalEvents: number
-  toolUsage: Record<string, number>
-  dailyActivity: Array<{ date: string; eventCount: number; sessionCount: number }>
-  skillInvocations: number
-}
-
-interface SkillInvocationStats {
-  days: number
-  total: number
-  invocations: Array<{ skill_id: string; total: number; success: number; failed: number }>
-}
-
-interface RoutingStats {
-  days: number
-  total: number
-  agentCalls: number
-  noAgent: number
-  agentRate: number
-  byAgent: Array<{ agent: string; count: number }>
-}
-
-interface RuleHitRate {
-  period: { days: number; since: string }
-  summary: {
-    totalPrompts: number
-    agentDelegations: number
-    agentRate: string
-    skillInvocations: number
-    skillRate: string
-  }
-  skills: Array<{ skill_id: string; total: number; success: number; failed: number; rate: string }>
-  agents: Array<{ agent: string; count: number; rate: string }>
-  neverTriggered: string[]
-}
-
-async function fetchStatus(): Promise<Stats> {
-  const res = await fetch('/api/status')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-async function fetchSystemStats(): Promise<SystemStats> {
-  const res = await fetch('/api/stats')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-async function fetchSessionsCount(): Promise<number> {
-  const res = await fetch('/api/sessions?limit=1000')
-  if (!res.ok) return 0
-  const sessions = await res.json()
-  return sessions.length
-}
-
-async function fetchSkillInvocations(): Promise<SkillInvocationStats> {
-  const res = await fetch('/api/skill-stats/invocations?days=7')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-async function fetchRoutingStats(): Promise<RoutingStats> {
-  const res = await fetch('/api/routing/stats?days=7')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-async function fetchRuleHitRate(): Promise<RuleHitRate> {
-  const res = await fetch('/api/rules/hit-rate?days=7')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-interface AntiPattern {
-  id: string
-  type: 'edit_loop' | 'tool_failure_spike' | 'no_commit' | 'event_overflow'
-  severity: 'info' | 'warn' | 'critical'
-  title: string
-  description: string
-  detail: Record<string, unknown>
-  detectedAt: string
-  sessionId?: string
-  filePath?: string
-}
-
-interface InsightsResponse {
-  generatedAt: string
-  windowDays: number
-  summary: { total: number; critical: number; warn: number; info: number }
-  patterns: AntiPattern[]
-}
-
-async function fetchInsights(): Promise<InsightsResponse> {
-  const res = await fetch('/api/insights?days=7')
-  if (!res.ok) throw new Error('Failed')
-  return res.json()
-}
-
-function formatUptime(seconds: number): string {
-  const days = Math.floor(seconds / 86400)
-  const hours = Math.floor((seconds % 86400) / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  if (days > 0) return `${days}天 ${hours}小时`
-  if (hours > 0) return `${hours}小时 ${minutes}分钟`
-  return `${minutes}分钟`
-}
-
-const COLORS = {
-  primary: '#6366f1',
-  green: '#10b981',
-}
-
-const PIE_COLORS = ['#6366f1', '#e5e7eb']
-
-export default function Dashboard() {
-  const navigate = useNavigate()
-  const { data: status } = useQuery({ queryKey: ['status'], queryFn: fetchStatus, refetchInterval: 5000 })
-  const { data: systemStats } = useQuery({ queryKey: ['system-stats'], queryFn: fetchSystemStats, refetchInterval: 30000 })
-  const { data: sessionsCount } = useQuery({ queryKey: ['sessions-count'], queryFn: fetchSessionsCount })
-  const { data: skillStats } = useQuery({ queryKey: ['skill-invocations'], queryFn: fetchSkillInvocations, refetchInterval: 30000 })
-  const { data: routingStats } = useQuery({ queryKey: ['routing-stats'], queryFn: fetchRoutingStats, refetchInterval: 30000 })
-  const { data: ruleHitRate } = useQuery({ queryKey: ['rule-hit-rate'], queryFn: fetchRuleHitRate, refetchInterval: 30000 })
-  const { data: insights } = useQuery({ queryKey: ['insights'], queryFn: fetchInsights, refetchInterval: 60000 })
-
-  const toolUsageData = systemStats?.toolUsage
-    ? Object.entries(systemStats.toolUsage)
-        .sort(([, a], [, b]) => b - a)
-        .slice(0, 8)
-        .map(([name, count]) => ({ name, count }))
-    : []
-
-  const dailyData = systemStats?.dailyActivity || []
-  const skillData = skillStats?.invocations.slice(0, 8) || []
-  const agentPieData = routingStats
-    ? [
-        { name: 'Agent 调用', value: routingStats.agentCalls },
-        { name: '直接执行', value: routingStats.noAgent },
-      ]
-    : []
-  const agentByTypeData = routingStats?.byAgent.slice(0, 6) || []
-
-  return (
-    <div>
-      <h1 className="text-2xl font-bold text-gray-900 mb-6">仪表盘</h1>
-
-      {/* Stats grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-        <StatCard icon={Activity} label="总事件" value={status?.eventCount?.toString() || '-'} color="blue" onClick={() => navigate('/events')} />
-        <StatCard icon={MessageSquare} label="会话数" value={sessionsCount?.toString() || '-'} color="purple" onClick={() => navigate('/sessions')} />
-        <StatCard icon={BookOpen} label="Skill 调用" value={skillStats?.total?.toString() || '0'} color="green" />
-        <StatCard
-          icon={Bot}
-          label={`Agent 调用率 (${routingStats?.days ?? 7}天)`}
-          value={routingStats ? `${routingStats.agentRate}%` : '-'}
-          color="indigo"
-        />
-      </div>
-
-      {/* Charts */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-        {/* Daily activity */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-base font-semibold text-gray-900">最近 7 天活动</h3>
-            <button
-              onClick={() => navigate('/events')}
-              className="text-xs text-indigo-600 hover:text-indigo-700"
-            >
-              查看全部事件
-            </button>
-          </div>
-          <ResponsiveContainer width="100%" height={240}>
-            <AreaChart data={dailyData}>
-              <defs>
-                <linearGradient id="colorEvents" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor={COLORS.primary} stopOpacity={0.3} />
-                  <stop offset="95%" stopColor={COLORS.primary} stopOpacity={0} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis dataKey="date" tick={{ fontSize: 11 }} tickFormatter={(d) => d?.slice(5)} />
-              <YAxis tick={{ fontSize: 11 }} />
-              <Tooltip />
-              <Area
-                type="monotone"
-                dataKey="eventCount"
-                stroke={COLORS.primary}
-                strokeWidth={2}
-                fill="url(#colorEvents)"
-                name="事件"
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </div>
-
-        {/* Tool usage */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-base font-semibold text-gray-900">工具使用分布</h3>
-          </div>
-          <ResponsiveContainer width="100%" height={240}>
-            <BarChart data={toolUsageData} layout="vertical">
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis dataKey="name" type="category" tick={{ fontSize: 11 }} width={80} />
-              <Tooltip />
-              <Bar dataKey="count" fill={COLORS.primary} radius={[0, 4, 4, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-
-        {/* Skill 调用统计 */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900">
-              <BookOpen className="h-4 w-4 text-green-600" />
-              Skill 调用统计 ({skillStats?.days ?? 7} 天)
-            </h3>
-            <span className="text-xs text-gray-500">共 {skillStats?.total ?? 0} 次</span>
-          </div>
-          {skillData.length > 0 ? (
-            <ResponsiveContainer width="100%" height={240}>
-              <BarChart data={skillData} layout="vertical">
-                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-                <XAxis type="number" tick={{ fontSize: 11 }} />
-                <YAxis dataKey="skill_id" type="category" tick={{ fontSize: 10 }} width={140} />
-                <Tooltip />
-                <Legend wrapperStyle={{ fontSize: 11 }} />
-                <Bar dataKey="success" stackId="a" fill={COLORS.green} name="成功" radius={[0, 0, 0, 0]} />
-                <Bar dataKey="failed" stackId="a" fill="#ef4444" name="失败" radius={[0, 4, 4, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="flex items-center justify-center h-[240px] text-sm text-gray-400">
-              暂无 Skill 调用记录
-            </div>
-          )}
-        </div>
-
-        {/* Agent 调用率 */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900">
-              <Bot className="h-4 w-4 text-indigo-600" />
-              Agent 调用率 ({routingStats?.days ?? 7} 天)
-            </h3>
-            <span className="text-xs text-gray-500">
-              {routingStats ? `${routingStats.agentCalls} / ${routingStats.total}` : '-'}
-            </span>
-          </div>
-          {routingStats && routingStats.total > 0 ? (
-            <ResponsiveContainer width="100%" height={240}>
-              <PieChart>
-                <Pie
-                  data={agentPieData}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={50}
-                  outerRadius={80}
-                  label={({ name, percent }) => `${name}: ${((percent ?? 0) * 100).toFixed(0)}%`}
-                  labelLine={false}
-                >
-                  {agentPieData.map((_, idx) => (
-                    <Cell key={idx} fill={PIE_COLORS[idx]} />
-                  ))}
-                </Pie>
-                <Tooltip />
-              </PieChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="flex items-center justify-center h-[240px] text-sm text-gray-400">
-              暂无路由记录
-            </div>
-          )}
-        </div>
-
-        {/* Agent 类型分布 */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-base font-semibold text-gray-900">Agent 类型分布</h3>
-          </div>
-          {agentByTypeData.length > 0 ? (
-            <ResponsiveContainer width="100%" height={240}>
-              <BarChart data={agentByTypeData} layout="vertical">
-                <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-                <XAxis type="number" tick={{ fontSize: 11 }} />
-                <YAxis dataKey="agent" type="category" tick={{ fontSize: 11 }} width={120} />
-                <Tooltip />
-                <Bar dataKey="count" fill={COLORS.primary} radius={[0, 4, 4, 0]} />
-              </BarChart>
-            </ResponsiveContainer>
-          ) : (
-            <div className="flex items-center justify-center h-[240px] text-sm text-gray-400">
-              暂无 Agent 调用记录
-            </div>
-          )}
-        </div>
-
-        {/* Rule Hit Rate */}
-        <RuleHitRateCard data={ruleHitRate} />
-
-        {/* Workflow Insights */}
-        <InsightsCard data={insights} onSelectSession={(id) => navigate(`/sessions/${id}`)} />
-
-        {/* System info */}
-        <div className="bg-white rounded-lg shadow p-6">
-          <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900 mb-4">
-            <Clock className="h-4 w-4 text-indigo-600" />
-            系统状态
-          </h3>
-          <dl className="space-y-3 text-sm">
-            <div className="flex justify-between">
-              <dt className="text-gray-500">PID</dt>
-              <dd className="font-mono text-gray-900">{status?.pid || '-'}</dd>
-            </div>
-            <div className="flex justify-between">
-              <dt className="text-gray-500">运行时间</dt>
-              <dd className="text-gray-900">{status?.uptime ? formatUptime(status.uptime) : '-'}</dd>
-            </div>
-            <div className="flex justify-between">
-              <dt className="text-gray-500">内存使用</dt>
-              <dd className="text-gray-900">
-                {status?.memory ? `${Math.round(status.memory.heapUsed / 1024 / 1024)} MB` : '-'}
-              </dd>
-            </div>
-          </dl>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function StatCard({ icon: Icon, label, value, color, onClick }: {
-  icon: any, label: string, value: string, color: string, onClick?: () => void
-}) {
-  const colorClass: Record<string, string> = {
-    blue: 'bg-blue-100 text-blue-600',
-    purple: 'bg-purple-100 text-purple-600',
-    indigo: 'bg-indigo-100 text-indigo-600',
-    green: 'bg-green-100 text-green-600',
-  }
-  return (
-    <div
-      className={`bg-white rounded-lg shadow p-5 ${onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}`}
-      onClick={onClick}
-    >
-      <div className="flex items-center justify-between mb-3">
-        <span className="text-sm text-gray-500">{label}</span>
-        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${colorClass[color]}`}>
-          <Icon className="h-4 w-4" />
-        </div>
-      </div>
-      <div className="text-2xl font-bold text-gray-900">{value}</div>
-    </div>
-  )
-}
-
-function RuleHitRateCard({ data }: { data?: RuleHitRate }) {
-  const topSkills = data?.skills.slice(0, 5) || []
-
-  return (
-    <div className="bg-white rounded-lg shadow p-6 lg:col-span-2">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900">
-          <ShieldAlert className="h-4 w-4 text-amber-600" />
-          规则命中率 ({data?.period.days ?? 7} 天)
-        </h3>
-        <span className="text-xs text-gray-500">
-          共 {data?.summary.totalPrompts ?? 0} 次路由
-        </span>
-      </div>
-
-      {/* Top metrics */}
-      <div className="grid grid-cols-2 gap-4 mb-5">
-        <div className="bg-indigo-50 rounded-lg p-4 text-center">
-          <div className="text-2xl font-bold text-indigo-700">
-            {data?.summary.agentRate ?? '0%'}
-          </div>
-          <div className="text-xs text-indigo-600 mt-1">Agent 委托率</div>
-        </div>
-        <div className="bg-green-50 rounded-lg p-4 text-center">
-          <div className="text-2xl font-bold text-green-700">
-            {data?.summary.skillRate ?? '0%'}
-          </div>
-          <div className="text-xs text-green-600 mt-1">Skill 触发率</div>
-        </div>
-      </div>
-
-      {/* Top 5 Skill bar chart */}
-      {topSkills.length > 0 ? (
-        <div className="mb-5">
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Top Skill 调用排行</h4>
-          <ResponsiveContainer width="100%" height={160}>
-            <BarChart data={topSkills} layout="vertical">
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis dataKey="skill_id" type="category" tick={{ fontSize: 10 }} width={140} />
-              <Tooltip />
-              <Bar dataKey="total" fill="#10b981" radius={[0, 4, 4, 0]} name="调用次数" />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      ) : (
-        <div className="flex items-center justify-center h-[100px] text-sm text-gray-400 mb-5">
-          暂无 Skill 调用记录
-        </div>
-      )}
-
-      {/* Never triggered */}
-      {data && data.neverTriggered.length > 0 && (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">
-            从未触发的规则 ({data.neverTriggered.length})
-          </h4>
-          <div className="flex flex-wrap gap-2">
-            {data.neverTriggered.map(id => (
-              <span key={id} className="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded">
-                {id}
-              </span>
-            ))}
-          </div>
-          <p className="text-xs text-gray-400 mt-2">
-            这些 Skill 在过去 {data.period.days} 天内从未被触发，可考虑清理或优化关键词
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
-
-const PATTERN_LABEL: Record<AntiPattern['type'], string> = {
-  edit_loop: '编辑循环',
-  tool_failure_spike: '工具失败',
-  no_commit: '无 commit',
-  event_overflow: '事件爆量',
-}
-
-function InsightsCard({
-  data,
-  onSelectSession,
-}: {
-  data?: InsightsResponse
-  onSelectSession: (sessionId: string) => void
-}) {
-  const summary = data?.summary ?? { total: 0, critical: 0, warn: 0, info: 0 }
-  const top = (data?.patterns ?? []).slice(0, 5)
-
-  return (
-    <div className="bg-white rounded-lg shadow p-6 lg:col-span-2">
-      <div className="flex items-center justify-between mb-4">
-        <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900">
-          <AlertTriangle className="h-4 w-4 text-amber-600" />
-          工作流洞察 ({data?.windowDays ?? 7} 天)
-        </h3>
-        <span className="text-xs text-gray-500">共 {summary.total} 条</span>
-      </div>
-
-      {/* Severity counters */}
-      <div className="grid grid-cols-3 gap-4 mb-5">
-        <div className="bg-red-50 rounded-lg p-4 text-center">
-          <div className="flex items-center justify-center gap-2 text-2xl font-bold text-red-700">
-            <AlertCircle className="h-5 w-5" />
-            {summary.critical}
-          </div>
-          <div className="text-xs text-red-600 mt-1">Critical</div>
-        </div>
-        <div className="bg-amber-50 rounded-lg p-4 text-center">
-          <div className="flex items-center justify-center gap-2 text-2xl font-bold text-amber-700">
-            <AlertTriangle className="h-5 w-5" />
-            {summary.warn}
-          </div>
-          <div className="text-xs text-amber-600 mt-1">Warn</div>
-        </div>
-        <div className="bg-blue-50 rounded-lg p-4 text-center">
-          <div className="flex items-center justify-center gap-2 text-2xl font-bold text-blue-700">
-            <Info className="h-5 w-5" />
-            {summary.info}
-          </div>
-          <div className="text-xs text-blue-600 mt-1">Info</div>
-        </div>
-      </div>
-
-      {/* Top patterns */}
-      {top.length > 0 ? (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">最严重的 5 条</h4>
-          <ul className="space-y-2">
-            {top.map(p => (
-              <li
-                key={p.id}
-                className={`border-l-4 px-3 py-2 rounded ${severityBorder(p.severity)} ${
-                  p.sessionId ? 'cursor-pointer hover:bg-gray-50' : ''
-                }`}
-                onClick={() => p.sessionId && onSelectSession(p.sessionId)}
-              >
-                <div className="flex items-start justify-between gap-2">
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
-                    <SeverityIcon severity={p.severity} />
-                    <span className="text-sm font-medium text-gray-900 truncate">{p.title}</span>
-                  </div>
-                  <span className="text-xs text-gray-500 shrink-0">{PATTERN_LABEL[p.type]}</span>
-                </div>
-                <p className="text-xs text-gray-500 mt-1">{p.description}</p>
-                <PatternKeyData pattern={p} />
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : (
-        <div className="flex items-center justify-center h-[120px] text-sm text-gray-400">
-          没有检测到反模式，工作流健康
-        </div>
-      )}
-    </div>
-  )
-}
-
-function severityBorder(s: AntiPattern['severity']): string {
-  if (s === 'critical') return 'border-red-500 bg-red-50/30'
-  if (s === 'warn') return 'border-amber-500 bg-amber-50/30'
-  return 'border-blue-400 bg-blue-50/30'
-}
-
-function SeverityIcon({ severity }: { severity: AntiPattern['severity'] }) {
-  if (severity === 'critical') return <AlertCircle className="h-4 w-4 text-red-600 shrink-0" />
-  if (severity === 'warn') return <AlertTriangle className="h-4 w-4 text-amber-600 shrink-0" />
-  return <Info className="h-4 w-4 text-blue-600 shrink-0" />
-}
-
-function PatternKeyData({ pattern }: { pattern: AntiPattern }) {
-  const d = pattern.detail
-  let text = ''
-  if (pattern.type === 'edit_loop') {
-    const fp = String(d.filePath ?? '')
-    const count = Number(d.count ?? 0)
-    text = `${fp} edited ${count} 次`
-  } else if (pattern.type === 'tool_failure_spike') {
-    const recent = Number(d.recentFailureRate ?? 0) * 100
-    const baseline = Number(d.baselineFailureRate ?? 0) * 100
-    const total = Number(d.totalToolUses ?? 0)
-    text = `最近 24h ${recent.toFixed(1)}% / 基线 ${baseline.toFixed(1)}% (${total} 次工具调用)`
-  } else if (pattern.type === 'no_commit') {
-    const min = Number(d.durationMin ?? 0)
-    const ec = Number(d.eventCount ?? 0)
-    text = `${min} 分钟 · ${ec} 个事件 · 无 git commit`
-  } else if (pattern.type === 'event_overflow') {
-    const ec = Number(d.eventCount ?? 0)
-    const min = Number(d.durationMin ?? 0)
-    text = `${ec} 个事件 / ${min} 分钟`
-  }
-  if (!text) return null
-  return <p className="text-xs text-gray-400 mt-1 font-mono truncate">{text}</p>
-}