@winspan/claude-forge 8.51.1 → 8.54.3

package/web/src/pages/Reports.tsx

@@ -1,428 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useState, type ReactNode, type ComponentType } from 'react'
-import {
-  FileText, Download, Activity, MessageSquare, ListTodo,
-  Bot, BookOpen, Wrench, FileEdit, AlertTriangle, CheckCircle2,
-  TrendingUp, TrendingDown, Minus,
-} from 'lucide-react'
-import {
-  BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
-} from 'recharts'
-
-interface WeeklyReport {
-  generatedAt: string
-  week: { start: string; end: string; isoWeekNumber: number }
-  overview: {
-    totalSessions: number
-    totalEvents: number
-    totalTasks: number
-    activeProjects: string[]
-    activeDays: number
-  }
-  agentDelegation: {
-    totalPrompts: number
-    delegations: number
-    rate: string
-    weekOverWeek: string
-    topAgents: Array<{ agent: string; count: number }>
-  }
-  skills: {
-    invocations: number
-    distinct: number
-    topSkills: Array<{ skill_id: string; count: number }>
-    neverUsed: string[]
-  }
-  tools: {
-    totalCalls: number
-    topTools: Array<{ name: string; count: number }>
-    failureRate: string
-  }
-  files: {
-    topEdited: Array<{ path: string; editCount: number }>
-    totalEdits: number
-  }
-  anomalies: Array<{ type: string; description: string }>
-}
-
-const WEEK_OPTIONS: Array<{ label: string; offset: number }> = [
-  { label: '本周', offset: 0 },
-  { label: '上周', offset: -1 },
-  { label: '上上周', offset: -2 },
-]
-
-async function fetchReport(weekOffset: number): Promise<WeeklyReport> {
-  const res = await fetch(`/api/reports/weekly?weekOffset=${weekOffset}`)
-  if (!res.ok) throw new Error('Failed to fetch weekly report')
-  return res.json()
-}
-
-export default function Reports() {
-  const [weekOffset, setWeekOffset] = useState(0)
-  const { data: report, isLoading, error } = useQuery({
-    queryKey: ['weekly-report', weekOffset],
-    queryFn: () => fetchReport(weekOffset),
-    refetchInterval: 60_000,
-  })
-
-  const handleDownload = () => {
-    const url = `/api/reports/weekly?weekOffset=${weekOffset}&format=markdown`
-    window.open(url, '_blank')
-  }
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
-        <h1 className="flex items-center gap-2 text-2xl font-bold text-gray-900">
-          <FileText className="h-6 w-6 text-indigo-600" />
-          周报
-        </h1>
-        <div className="flex items-center gap-3">
-          <div className="inline-flex rounded-md shadow-sm">
-            {WEEK_OPTIONS.map((opt, idx) => (
-              <button
-                key={opt.offset}
-                onClick={() => setWeekOffset(opt.offset)}
-                className={[
-                  'px-3 py-1.5 text-sm font-medium border',
-                  idx === 0 ? 'rounded-l-md' : '',
-                  idx === WEEK_OPTIONS.length - 1 ? 'rounded-r-md' : '',
-                  idx > 0 ? '-ml-px' : '',
-                  weekOffset === opt.offset
-                    ? 'bg-indigo-600 text-white border-indigo-600 z-10'
-                    : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
-                ].join(' ')}
-              >
-                {opt.label}
-              </button>
-            ))}
-          </div>
-          <button
-            onClick={handleDownload}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded-md shadow-sm"
-          >
-            <Download className="h-4 w-4" />
-            导出 Markdown
-          </button>
-        </div>
-      </div>
-
-      {isLoading && (
-        <div className="bg-white rounded-lg shadow p-12 text-center text-gray-500">
-          加载中...
-        </div>
-      )}
-      {error && (
-        <div className="bg-white rounded-lg shadow p-6 text-red-600">
-          加载失败: {(error as Error).message}
-        </div>
-      )}
-
-      {report && (
-        <>
-          <div className="bg-white rounded-lg shadow p-4 mb-4 flex items-center justify-between flex-wrap gap-2">
-            <div className="text-sm text-gray-600">
-              <span className="font-semibold text-gray-900">第 {report.week.isoWeekNumber} 周</span>
-              <span className="mx-2 text-gray-400">·</span>
-              {report.week.start.slice(0, 10)} ~ {report.week.end.slice(0, 10)}
-            </div>
-            <div className="text-xs text-gray-400">
-              生成于 {new Date(report.generatedAt).toLocaleString('zh-CN')}
-            </div>
-          </div>
-
-          <OverviewCard data={report.overview} />
-          <AgentCard data={report.agentDelegation} />
-          <SkillsCard data={report.skills} />
-          <ToolsCard data={report.tools} />
-          <FilesCard data={report.files} />
-          <AnomaliesCard data={report.anomalies} />
-        </>
-      )}
-    </div>
-  )
-}
-
-function SectionCard({
-  title, icon: Icon, iconColor, children,
-}: {
-  title: string
-  icon: ComponentType<{ className?: string }>
-  iconColor?: string
-  children: ReactNode
-}) {
-  return (
-    <div className="bg-white rounded-lg shadow p-6 mb-4">
-      <h3 className="flex items-center gap-2 text-base font-semibold text-gray-900 mb-4">
-        <Icon className={`h-4 w-4 ${iconColor ?? 'text-indigo-600'}`} />
-        {title}
-      </h3>
-      {children}
-    </div>
-  )
-}
-
-function StatNumber({ label, value }: { label: string; value: number | string }) {
-  return (
-    <div className="text-center">
-      <div className="text-2xl font-bold text-gray-900">{value}</div>
-      <div className="text-xs text-gray-500 mt-1">{label}</div>
-    </div>
-  )
-}
-
-function OverviewCard({ data }: { data: WeeklyReport['overview'] }) {
-  return (
-    <SectionCard title="概览" icon={Activity} iconColor="text-blue-600">
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
-        <div className="bg-blue-50 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-xs text-blue-600 mb-1">
-            <MessageSquare className="h-3 w-3" /> 会话
-          </div>
-          <div className="text-2xl font-bold text-blue-700">{data.totalSessions}</div>
-        </div>
-        <div className="bg-indigo-50 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-xs text-indigo-600 mb-1">
-            <Activity className="h-3 w-3" /> 事件
-          </div>
-          <div className="text-2xl font-bold text-indigo-700">{data.totalEvents}</div>
-        </div>
-        <div className="bg-purple-50 rounded-lg p-4">
-          <div className="flex items-center gap-2 text-xs text-purple-600 mb-1">
-            <ListTodo className="h-3 w-3" /> 任务
-          </div>
-          <div className="text-2xl font-bold text-purple-700">{data.totalTasks}</div>
-        </div>
-        <div className="bg-emerald-50 rounded-lg p-4">
-          <div className="text-xs text-emerald-600 mb-1">活跃天数</div>
-          <div className="text-2xl font-bold text-emerald-700">
-            {data.activeDays} <span className="text-base font-normal">/ 7</span>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <div className="text-xs font-medium text-gray-700 mb-2">
-          活跃项目 ({data.activeProjects.length})
-        </div>
-        {data.activeProjects.length > 0 ? (
-          <div className="flex flex-wrap gap-2">
-            {data.activeProjects.map((p) => (
-              <span
-                key={p}
-                className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded font-mono break-all"
-                title={p}
-              >
-                {p.length > 60 ? `...${p.slice(-60)}` : p}
-              </span>
-            ))}
-          </div>
-        ) : (
-          <div className="text-sm text-gray-400">本周无活跃项目</div>
-        )}
-      </div>
-    </SectionCard>
-  )
-}
-
-function WeekOverWeekIndicator({ weekOverWeek }: { weekOverWeek: string }) {
-  const num = parseFloat(weekOverWeek)
-  if (Number.isNaN(num) || Math.abs(num) < 0.05) {
-    return (
-      <span className="inline-flex items-center gap-1 text-xs text-gray-500">
-        <Minus className="h-3 w-3" /> {weekOverWeek}
-      </span>
-    )
-  }
-  if (num > 0) {
-    return (
-      <span className="inline-flex items-center gap-1 text-xs text-emerald-600">
-        <TrendingUp className="h-3 w-3" /> {weekOverWeek}
-      </span>
-    )
-  }
-  return (
-    <span className="inline-flex items-center gap-1 text-xs text-rose-600">
-      <TrendingDown className="h-3 w-3" /> {weekOverWeek}
-    </span>
-  )
-}
-
-function AgentCard({ data }: { data: WeeklyReport['agentDelegation'] }) {
-  const chartData = data.topAgents.map(a => ({ name: a.agent, count: a.count }))
-  return (
-    <SectionCard title="Agent 委托" icon={Bot} iconColor="text-indigo-600">
-      <div className="grid grid-cols-3 gap-4 mb-4">
-        <StatNumber label="总路由" value={data.totalPrompts} />
-        <StatNumber label="委托次数" value={data.delegations} />
-        <div className="text-center">
-          <div className="text-2xl font-bold text-indigo-700">{data.rate}</div>
-          <div className="text-xs text-gray-500 mt-1">委托率</div>
-          <div className="mt-1">
-            <WeekOverWeekIndicator weekOverWeek={data.weekOverWeek} />
-          </div>
-        </div>
-      </div>
-
-      {chartData.length > 0 ? (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Top 5 Agents</h4>
-          <ResponsiveContainer width="100%" height={180}>
-            <BarChart data={chartData} layout="vertical">
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis dataKey="name" type="category" tick={{ fontSize: 11 }} width={120} />
-              <Tooltip />
-              <Bar dataKey="count" fill="#6366f1" radius={[0, 4, 4, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      ) : (
-        <div className="text-sm text-gray-400 text-center py-4">本周无 Agent 委托记录</div>
-      )}
-    </SectionCard>
-  )
-}
-
-function SkillsCard({ data }: { data: WeeklyReport['skills'] }) {
-  const chartData = data.topSkills.map(s => ({ name: s.skill_id, count: s.count }))
-  return (
-    <SectionCard title="Skills" icon={BookOpen} iconColor="text-emerald-600">
-      <div className="grid grid-cols-2 gap-4 mb-4">
-        <StatNumber label="调用总数" value={data.invocations} />
-        <StatNumber label="不同 Skill" value={data.distinct} />
-      </div>
-
-      {chartData.length > 0 ? (
-        <div className="mb-4">
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Top 5 Skills</h4>
-          <ResponsiveContainer width="100%" height={180}>
-            <BarChart data={chartData} layout="vertical">
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis dataKey="name" type="category" tick={{ fontSize: 10 }} width={140} />
-              <Tooltip />
-              <Bar dataKey="count" fill="#10b981" radius={[0, 4, 4, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      ) : (
-        <div className="text-sm text-gray-400 text-center py-4 mb-4">本周无 Skill 调用</div>
-      )}
-
-      {data.neverUsed.length > 0 && (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">
-            从未使用的 Skill ({data.neverUsed.length})
-          </h4>
-          <div className="flex flex-wrap gap-2">
-            {data.neverUsed.map(id => (
-              <span key={id} className="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded">
-                {id}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </SectionCard>
-  )
-}
-
-function ToolsCard({ data }: { data: WeeklyReport['tools'] }) {
-  const chartData = data.topTools.map(t => ({ name: t.name, count: t.count }))
-  const failureNum = parseFloat(data.failureRate)
-  const failureColor = failureNum > 5 ? 'text-rose-600' : failureNum > 1 ? 'text-amber-600' : 'text-emerald-600'
-
-  return (
-    <SectionCard title="Tools" icon={Wrench} iconColor="text-amber-600">
-      <div className="grid grid-cols-2 gap-4 mb-4">
-        <StatNumber label="调用总数" value={data.totalCalls} />
-        <div className="text-center">
-          <div className={`text-2xl font-bold ${failureColor}`}>{data.failureRate}</div>
-          <div className="text-xs text-gray-500 mt-1">失败率</div>
-        </div>
-      </div>
-
-      {chartData.length > 0 ? (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Top 5 Tools</h4>
-          <ResponsiveContainer width="100%" height={180}>
-            <BarChart data={chartData} layout="vertical">
-              <CartesianGrid strokeDasharray="3 3" stroke="#f3f4f6" />
-              <XAxis type="number" tick={{ fontSize: 11 }} />
-              <YAxis dataKey="name" type="category" tick={{ fontSize: 11 }} width={120} />
-              <Tooltip />
-              <Bar dataKey="count" fill="#f59e0b" radius={[0, 4, 4, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      ) : (
-        <div className="text-sm text-gray-400 text-center py-4">本周无工具调用记录</div>
-      )}
-    </SectionCard>
-  )
-}
-
-function FilesCard({ data }: { data: WeeklyReport['files'] }) {
-  return (
-    <SectionCard title="文件编辑" icon={FileEdit} iconColor="text-purple-600">
-      <div className="mb-4">
-        <StatNumber label="编辑总数" value={data.totalEdits} />
-      </div>
-
-      {data.topEdited.length > 0 ? (
-        <div>
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Top 5 编辑文件</h4>
-          <div className="space-y-2">
-            {data.topEdited.map((f) => (
-              <div
-                key={f.path}
-                className="flex items-center justify-between gap-3 px-3 py-2 bg-gray-50 rounded text-sm"
-              >
-                <span className="font-mono text-xs text-gray-700 break-all flex-1" title={f.path}>
-                  {f.path.length > 80 ? `...${f.path.slice(-80)}` : f.path}
-                </span>
-                <span className="font-semibold text-purple-700 whitespace-nowrap">
-                  {f.editCount} 次
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="text-sm text-gray-400 text-center py-4">本周无文件编辑记录</div>
-      )}
-    </SectionCard>
-  )
-}
-
-function AnomaliesCard({ data }: { data: WeeklyReport['anomalies'] }) {
-  if (data.length === 0) {
-    return (
-      <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-4 flex items-center gap-2">
-        <CheckCircle2 className="h-5 w-5 text-emerald-600" />
-        <span className="text-sm text-emerald-700 font-medium">本周无异常</span>
-      </div>
-    )
-  }
-  return (
-    <SectionCard title="异常" icon={AlertTriangle} iconColor="text-amber-600">
-      <div className="space-y-2">
-        {data.map((item, idx) => (
-          <div
-            key={idx}
-            className="flex items-start gap-3 px-3 py-2 bg-amber-50 border border-amber-200 rounded text-sm"
-          >
-            <AlertTriangle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
-            <div>
-              <div className="font-medium text-amber-900">{item.type}</div>
-              <div className="text-amber-700 mt-0.5">{item.description}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </SectionCard>
-  )
-}
-
-
-

package/web/src/pages/SessionDetail.tsx

@@ -1,162 +0,0 @@
-import { useParams, Link } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
-import { format } from 'date-fns'
-import { parseUTC } from '../utils/time'
-import { ArrowLeft, MessageSquare, FileEdit, Terminal, GitCommit } from 'lucide-react'
-import clsx from 'clsx'
-
-interface TaskDetail {
-  id: string
-  title: string
-  start_time: string
-  end_time?: string
-  status: string
-  event_count: number
-  prompts: Array<{ timestamp: string; content: string }>
-  events: Array<any>
-  injections: Array<any>
-  summary: {
-    toolUsage: Record<string, number>
-    filesChanged: string[]
-    commits: Array<{ timestamp: string; message: string }>
-  }
-}
-
-interface SessionDetail {
-  session: {
-    session_id: string
-    first_prompt: string
-    event_count: number
-    start_time: string
-    end_time: string
-  }
-  tasks: TaskDetail[]
-}
-
-async function fetchSessionDetail(id: string): Promise<SessionDetail> {
-  const res = await fetch(`/api/sessions/${id}/detail`)
-  if (!res.ok) throw new Error('Failed to fetch session detail')
-  return res.json()
-}
-
-export default function SessionDetail() {
-  const { id } = useParams<{ id: string }>()
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['session-detail', id],
-    queryFn: () => fetchSessionDetail(id!),
-    enabled: !!id,
-  })
-
-  if (isLoading) {
-    return (
-      <div className="bg-white rounded-lg shadow p-6">
-        <p className="text-gray-600">加载中...</p>
-      </div>
-    )
-  }
-
-  if (error || !data) {
-    return (
-      <div>
-        <Link to="/sessions" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
-          <ArrowLeft className="h-4 w-4 mr-1" />返回
-        </Link>
-        <div className="bg-white rounded-lg shadow p-6">
-          <p className="text-red-600">加载失败</p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <Link to="/sessions" className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-4">
-        <ArrowLeft className="h-4 w-4 mr-1" />返回会话列表
-      </Link>
-
-      <div className="bg-white rounded-lg shadow p-6 mb-6">
-        <h1 className="text-xl font-bold text-gray-900 mb-2">
-          会话详情
-        </h1>
-        <p className="text-sm text-gray-500 font-mono mb-4">{data.session.session_id}</p>
-        <div className="grid grid-cols-3 gap-4">
-          <div>
-            <div className="text-xs text-gray-500">事件数</div>
-            <div className="text-lg font-semibold">{data.session.event_count}</div>
-          </div>
-          <div>
-            <div className="text-xs text-gray-500">任务数</div>
-            <div className="text-lg font-semibold">{data.tasks.length}</div>
-          </div>
-          <div>
-            <div className="text-xs text-gray-500">开始时间</div>
-            <div className="text-sm">
-              {data.session.start_time ? format(parseUTC(data.session.start_time), 'MM-dd HH:mm:ss') : '-'}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        {data.tasks.map((task) => (
-          <div key={task.id} className="bg-white rounded-lg shadow p-6">
-            <div className="flex items-center justify-between mb-4">
-              <h3 className="text-lg font-semibold text-gray-900">{task.title}</h3>
-              <span className={clsx(
-                'px-2 py-1 text-xs font-medium rounded-full',
-                task.status === 'completed' && 'bg-green-100 text-green-700',
-                task.status === 'active' && 'bg-blue-100 text-blue-700',
-                task.status === 'abandoned' && 'bg-gray-100 text-gray-600'
-              )}>
-                {task.status}
-              </span>
-            </div>
-
-            <div className="grid grid-cols-3 gap-4 mb-4 text-sm">
-              <div>
-                <div className="text-xs text-gray-500 mb-1 flex items-center gap-1">
-                  <Terminal className="h-3 w-3" />工具使用
-                </div>
-                <div className="space-y-1">
-                  {Object.entries(task.summary.toolUsage).slice(0, 5).map(([tool, count]) => (
-                    <div key={tool} className="flex justify-between text-xs">
-                      <span className="text-gray-600">{tool}</span>
-                      <span className="font-mono text-gray-900">{count}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 mb-1 flex items-center gap-1">
-                  <FileEdit className="h-3 w-3" />文件变更
-                </div>
-                <div className="text-xs text-gray-700">{task.summary.filesChanged.length} 个文件</div>
-              </div>
-              <div>
-                <div className="text-xs text-gray-500 mb-1 flex items-center gap-1">
-                  <GitCommit className="h-3 w-3" />提交
-                </div>
-                <div className="text-xs text-gray-700">{task.summary.commits.length} 次</div>
-              </div>
-            </div>
-
-            {task.prompts.length > 0 && (
-              <div className="border-t pt-3">
-                <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
-                  <MessageSquare className="h-3 w-3" />用户提示
-                </div>
-                <div className="space-y-2">
-                  {task.prompts.slice(0, 3).map((p, i) => (
-                    <div key={i} className="text-sm bg-gray-50 rounded p-2">
-                      <p className="text-gray-700 line-clamp-2">{p.content}</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}