Files
agent-workbench/assets/dashboard/src/pages/overview.tsx
T

22 lines
3.7 KiB
TypeScript

import { ArrowRight, Activity, CheckCircle2, CircleHelp, Layers3 } from 'lucide-react'
import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { PageHeading, Panel, Empty, Reports, Status } from '@/components/shared'
import { useWorkbench } from '@/lib/context'
import { phaseLabels } from '@/lib/types'
export default function Overview() {
const { state } = useWorkbench()
const pending = [...state.tasks.filter(t => t.decision), ...((state as { decisions?: { id: string; title: string; question: string; status: string }[] }).decisions || []).filter(d => ['open','needs_reconsideration'].includes(d.status)).map(d => ({ id: d.id, name: d.title, decision: d.question }))]
const blocked = state.tasks.filter(t => ['blocked', 'failed'].includes(t.status))
const lead = state.tasks.find(t => t.id === 'WP0')
const stats = [{ label: '工作包', value: state.tasks.length, icon: Layers3 }, { label: '进行中', value: state.tasks.filter(t => t.status === 'running').length, icon: Activity }, { label: '已完成', value: state.tasks.filter(t => t.status === 'completed').length, icon: CheckCircle2 }, { label: '待决定', value: pending.length, icon: CircleHelp }]
return <div className="space-y-6"><PageHeading title="项目总览" description="关键进展、当前阻塞,以及需要你决定的事项。" action={<Button asChild><Link to="/communication">询问进度 <ArrowRight /></Link></Button>} />
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">{stats.map(s => <Card key={s.label}><CardContent className="flex items-start justify-between pt-6"><div><p className="text-sm text-muted-foreground">{s.label}</p><p className="mt-2 text-3xl font-semibold tabular-nums">{s.value}</p></div><s.icon className="size-5 text-primary" /></CardContent></Card>)}</div>
<div className="grid gap-6 lg:grid-cols-2"><Panel title="当前阶段与阻塞" description="总控记录与需要关注的任务。">{lead ? <div className="mb-5 flex items-center gap-3"><span className="font-medium">{phaseLabels[lead.phase] || lead.phase}</span><Status value={lead.status} /></div> : <Empty>尚未登记总控阶段。</Empty>}{blocked.length ? <div className="space-y-3">{blocked.slice(0, 3).map(t => <p key={t.id} className="text-sm">{t.id} · {t.name}</p>)}</div> : <p className="text-sm text-muted-foreground">当前没有登记受阻任务。</p>}<Button variant="link" asChild className="mt-4 px-0"><Link to="/tasks">查看全部任务 <ArrowRight /></Link></Button></Panel>
<Panel title="等待你决定" description="待决策事项摘要。">{pending.length ? <div className="space-y-4">{pending.slice(0, 3).map(t => <div key={t.id}><p className="text-xs font-medium text-muted-foreground">{t.id} · {t.name}</p><p className="mt-1 line-clamp-3 whitespace-pre-wrap text-sm leading-6">{t.decision}</p></div>)}</div> : <Empty>当前没有登记待决策事项。</Empty>}<Button variant="link" asChild className="mt-4 px-0"><Link to="/decisions">查看方案与决策 <ArrowRight /></Link></Button></Panel></div>
{state.hooks && <Panel title="故障与恢复" description="重大事件触发汇报;重复状态不打扰。"><p className="text-sm text-muted-foreground">活动故障 {state.hooks.active_firing} · 待投递通知 {state.hooks.pending_notifications}</p><Button variant="link" asChild className="mt-3 px-0"><Link to="/logs">查看运行日志 <ArrowRight /></Link></Button></Panel>}
<Panel title="最近重要汇报" description="保留关键结论,详细讨论进入专门会话。"><Reports events={state.events.filter(e => /report|summary|handoff/.test(e.kind)).slice(0, 3)} compact /></Panel>
</div>
}