@winspan/claude-forge 8.41.0 → 8.51.0

package/web/src/pages/Reports.tsx

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

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