@winspan/claude-forge 8.41.0 → 8.50.6

package/web/src/pages/Dashboard.tsx

@@ -0,0 +1,572 @@
+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>
+}