187 lines
7.7 KiB
TypeScript
187 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import { AlertCircle, Bot, BrainCircuit, Loader2, ServerCog, Square } from 'lucide-react';
|
|
|
|
import type { ProcessEvent, ProcessRun } from '@/types';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
function statusLabel(status: string) {
|
|
if (status === 'done') return '已完成';
|
|
if (status === 'error') return '失败';
|
|
if (status === 'cancelled') return '已取消';
|
|
if (status === 'waiting') return '等待中';
|
|
if (status === 'running') return '运行中';
|
|
if (status === 'queued') return '排队中';
|
|
return status;
|
|
}
|
|
|
|
function actorTypeLabel(actorType: string) {
|
|
if (actorType === 'mcp') return 'MCP';
|
|
if (actorType === 'system') return '系统';
|
|
if (actorType === 'agent') return '智能体';
|
|
return actorType;
|
|
}
|
|
|
|
function eventKindLabel(kind: string) {
|
|
if (kind === 'run_started') return '已启动';
|
|
if (kind === 'run_progress') return '进行中';
|
|
if (kind === 'run_status') return '状态更新';
|
|
if (kind === 'run_artifact') return '产物';
|
|
if (kind === 'run_finished') return '已结束';
|
|
if (kind === 'run_cancelled') return '已取消';
|
|
return kind;
|
|
}
|
|
|
|
function statusTone(status: string) {
|
|
if (status === 'done') return 'bg-emerald-500/10 text-emerald-300 border-emerald-500/20';
|
|
if (status === 'error') return 'bg-rose-500/10 text-rose-300 border-rose-500/20';
|
|
if (status === 'cancelled') return 'bg-zinc-500/10 text-zinc-300 border-zinc-500/20';
|
|
if (status === 'waiting') return 'bg-amber-500/10 text-amber-300 border-amber-500/20';
|
|
return 'bg-sky-500/10 text-sky-300 border-sky-500/20';
|
|
}
|
|
|
|
function actorIcon(run: ProcessRun) {
|
|
if (run.actor_type === 'mcp') return <ServerCog className="w-4 h-4" />;
|
|
if (run.actor_type === 'system') return <BrainCircuit className="w-4 h-4" />;
|
|
return <Bot className="w-4 h-4" />;
|
|
}
|
|
|
|
export function ProcessLane({
|
|
runs,
|
|
events,
|
|
selectedRunId,
|
|
onSelectRun,
|
|
onCancelRun,
|
|
}: {
|
|
runs: ProcessRun[];
|
|
events: ProcessEvent[];
|
|
selectedRunId: string | null;
|
|
onSelectRun: (runId: string) => void;
|
|
onCancelRun: (runId: string) => void;
|
|
}) {
|
|
const sortedRuns = [...runs].sort((a, b) => {
|
|
const at = new Date(a.started_at).getTime();
|
|
const bt = new Date(b.started_at).getTime();
|
|
return bt - at;
|
|
});
|
|
|
|
if (sortedRuns.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col bg-card/60 border-l border-border">
|
|
<div className="px-4 py-3 border-b border-border flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-sm font-semibold tracking-wide uppercase text-muted-foreground">执行过程</h2>
|
|
<p className="text-xs text-muted-foreground mt-1">智能体、A2A、MCP 的实时过程</p>
|
|
</div>
|
|
<Badge variant="outline" className="text-xs">
|
|
{sortedRuns.length} 个任务
|
|
</Badge>
|
|
</div>
|
|
<ScrollArea className="flex-1 px-4 py-4">
|
|
<div className="space-y-3">
|
|
{sortedRuns.map((run) => {
|
|
const runEvents = events
|
|
.filter((event) => event.run_id === run.run_id)
|
|
.slice(-5)
|
|
.reverse();
|
|
const isSelected = run.run_id === selectedRunId;
|
|
const canCancel =
|
|
!run.parent_run_id &&
|
|
run.actor_type !== 'mcp' &&
|
|
(run.status === 'running' || run.status === 'waiting');
|
|
return (
|
|
<Card
|
|
key={run.run_id}
|
|
className={cn(
|
|
'cursor-pointer transition-colors border-border/80 hover:border-primary/40',
|
|
isSelected && 'border-primary bg-primary/5'
|
|
)}
|
|
onClick={() => onSelectRun(run.run_id)}
|
|
>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center text-muted-foreground">
|
|
{actorIcon(run)}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<CardTitle className="text-sm leading-none truncate">{run.actor_name}</CardTitle>
|
|
<p className="text-xs text-muted-foreground mt-1 truncate">{run.title}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<Badge variant="outline" className={cn('text-[10px] border', statusTone(run.status))}>
|
|
{statusLabel(run.status)}
|
|
</Badge>
|
|
{canCancel && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-7 px-2"
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onCancelRun(run.run_id);
|
|
}}
|
|
>
|
|
<Square className="w-3.5 h-3.5 mr-1" />
|
|
取消
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0 space-y-2">
|
|
<div className="flex items-center gap-2 text-[11px] text-muted-foreground flex-wrap">
|
|
<span>{actorTypeLabel(run.actor_type)}</span>
|
|
{run.source && <span>{run.source}</span>}
|
|
{run.parent_run_id && <span>子任务</span>}
|
|
</div>
|
|
{run.summary && (
|
|
<div className="rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground whitespace-pre-wrap line-clamp-3">
|
|
{run.summary}
|
|
</div>
|
|
)}
|
|
<div className="space-y-1.5">
|
|
{runEvents.length === 0 && run.status === 'running' && (
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
|
等待首个事件...
|
|
</div>
|
|
)}
|
|
{runEvents.map((event) => (
|
|
<div key={event.event_id} className="text-xs rounded-md border border-border/50 bg-background/60 px-3 py-2">
|
|
<div className="flex items-center gap-2 text-[10px] uppercase tracking-wide text-muted-foreground mb-1">
|
|
<span>{eventKindLabel(event.kind)}</span>
|
|
{event.status && <span>{statusLabel(event.status)}</span>}
|
|
</div>
|
|
<div className="text-foreground/90 whitespace-pre-wrap break-words">
|
|
{event.text || '结构化更新'}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{run.status === 'error' && (
|
|
<div className="flex items-center gap-2 text-xs text-rose-300">
|
|
<AlertCircle className="w-3.5 h-3.5" />
|
|
此任务执行失败。
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
);
|
|
}
|