修改

frontend/app/components/training/training-pipeline-panel.tsx

@@ -1,34 +1,43 @@
 "use client";
 
 import {
+	AlertTriangleIcon,
 	BarChart3Icon,
 	CheckIcon,
-	ChevronDownIcon,
+	ChevronRightIcon,
 	ClipboardListIcon,
 	ClockIcon,
 	DnaIcon,
 	ExternalLinkIcon,
 	FileTextIcon,
 	FlaskConicalIcon,
-	GitBranchIcon,
 	GraduationCapIcon,
 	HourglassIcon,
 	Loader2Icon,
-	MicroscopeIcon,
 	type LucideIcon,
+	MicroscopeIcon,
 	RefreshCwIcon,
 	ShieldCheckIcon,
 	TrendingUpIcon,
+	UserCheckIcon,
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { StepDetailSheet } from "@/components/training/step-detail-sheet";
 import { cn } from "@/lib/utils";
 
-type CardStatus = "pending" | "running" | "complete" | "failed" | "cancelled";
-type PhaseTone = "complete" | "running" | "pending";
+type CardStatus =
+	| "pending"
+	| "running"
+	| "waiting"
+	| "complete"
+	| "failed"
+	| "cancelled";
+type SectionType = "baseline" | "train" | "analysis";
+type GateKind = "human-check" | "human-review";
 
 type PipelineCard = {
 	key: string;
+	step: string;
 	icon?: string;
 	title: string;
 	subtitle: string;
@@ -36,10 +45,37 @@ type PipelineCard = {
 	progress?: number;
 };
 
-type PipelinePhase = {
-	key: string;
+type RoundItem = {
+	type: "round";
+	index: number;
+	run_id: string;
+	run_index: number;
+	section_type: SectionType;
 	label: string;
-	tone: PhaseTone;
+	description: string;
+	status: CardStatus;
+	cards: PipelineCard[];
+};
+
+type GateItem = {
+	type: "gate";
+	index: number;
+	key: string;
+	run_id: string;
+	run_index: number;
+	gate_kind: GateKind;
+	title: string;
+	description: string;
+	status: CardStatus;
+	reason?: string | null;
+};
+
+type PipelineItem = RoundItem | GateItem;
+
+type InFlight = {
+	run_id: string;
+	section_type: SectionType;
+	section_label: string;
 	cards: PipelineCard[];
 };
 
@@ -58,19 +94,21 @@ type LogLine = {
 type PipelinePayload = {
 	session_id: string;
 	generated_at_ms: number;
+	available?: boolean;
 	status: { mode: string; state: CardStatus };
 	kpis: Kpi[];
-	phases: PipelinePhase[];
+	items: PipelineItem[];
+	in_flight?: InFlight | null;
 	logs: LogLine[];
 };
 
 const ICON_MAP: Record<string, LucideIcon> = {
+	"alert-triangle": AlertTriangleIcon,
 	"bar-chart": BarChart3Icon,
 	microscope: MicroscopeIcon,
 	"trending-up": TrendingUpIcon,
 	"file-text": FileTextIcon,
 	dna: DnaIcon,
-	"git-branch": GitBranchIcon,
 	flask: FlaskConicalIcon,
 	shield: ShieldCheckIcon,
 	"graduation-cap": GraduationCapIcon,
@@ -78,6 +116,19 @@ const ICON_MAP: Record<string, LucideIcon> = {
 	"refresh-cw": RefreshCwIcon,
 	clock: ClockIcon,
 	hourglass: HourglassIcon,
+	"user-check": UserCheckIcon,
+};
+
+const SECTION_PHASE_TONE: Record<SectionType, string> = {
+	baseline: "from-violet-500/15 to-sky-500/10 border-violet-400/40",
+	train: "from-emerald-500/15 to-amber-500/10 border-emerald-400/40",
+	analysis: "from-sky-500/15 to-violet-500/10 border-sky-400/40",
+};
+
+const SECTION_BADGE_TONE: Record<SectionType, string> = {
+	baseline: "bg-violet-500/10 text-violet-700 dark:text-violet-300",
+	train: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+	analysis: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
 };
 
 export function TrainingPipelinePanel({
@@ -102,7 +153,6 @@ export function TrainingPipelinePanel({
 		es.onmessage = (ev) => {
 			try {
 				const payload = JSON.parse(ev.data);
-				// program.md missing → backend pushes {available: false}; clear panel.
 				if (payload && payload.available === false) {
 					setData(null);
 				} else {
@@ -114,7 +164,6 @@ export function TrainingPipelinePanel({
 			}
 		};
 		es.onerror = () => {
-			// EventSource auto-reconnects; just stop showing the loading state.
 			setLoading(false);
 		};
 		return () => {
@@ -122,33 +171,83 @@ export function TrainingPipelinePanel({
 		};
 	}, [sessionId]);
 
+	const stripNamespace = (key: string): string => {
+		// "R1:cml" → "cml" — backend uses round-namespaced keys, but the
+		// step-detail endpoint is keyed only by step name.
+		const idx = key.indexOf(":");
+		return idx >= 0 ? key.slice(idx + 1) : key;
+	};
+
 	return (
 		<div className="flex min-w-0 flex-1 flex-col overflow-hidden border-r bg-muted/20">
 			<div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
 				<HeaderRow status={data?.status ?? null} loading={loading} />
 				<KpiRow kpis={data?.kpis ?? []} />
-				<div className="mt-5 space-y-4">
-					{!data ? (
-						<div className="rounded-md border border-dashed p-8 text-center text-muted-foreground text-xs">
-							暂无 pipeline 数据
-						</div>
-					) : (
-						data.phases.map((phase) => (
-							<PhaseSection
-								key={phase.key}
-								phase={phase}
-								onCardClick={(card) =>
-									setOpenCard({
-										key: card.key,
-										title: card.title,
-										status: card.status,
-									})
-								}
-							/>
-						))
-					)}
+				<div className="mt-5 space-y-3">
+					{(() => {
+						if (!data) {
+							return (
+								<div className="rounded-md border border-dashed p-8 text-center text-muted-foreground text-xs">
+									暂无 pipeline 数据
+								</div>
+							);
+						}
+						const items = data.items ?? [];
+						if (items.length === 0) {
+							const isRunning = data.status?.state === "running";
+							return (
+								<div className="rounded-md border border-dashed p-8 text-center text-muted-foreground text-xs">
+									{isRunning
+										? "首个阶段进行中，卡片即将出现……"
+										: "等待 agent 进入第一个步骤……"}
+								</div>
+							);
+						}
+						return (
+							<>
+								{items.map((item, idx) => {
+									const showConnector = idx < items.length - 1;
+									if (item.type === "round") {
+										return (
+											<div
+												key={`round-${item.run_id}-${item.section_type}`}
+											>
+												<RoundSection
+													item={item}
+													onCardClick={(card) =>
+														setOpenCard({
+															key: stripNamespace(card.key),
+															title: card.title,
+															status: card.status,
+														})
+													}
+												/>
+												{showConnector ? <ItemConnector /> : null}
+											</div>
+										);
+									}
+									return (
+										<div key={`gate-${item.key}`}>
+											<GateCard
+												item={item}
+												onClick={() =>
+													setOpenCard({
+														key: stripNamespace(item.key),
+														title: item.title,
+														status: item.status,
+													})
+												}
+											/>
+											{showConnector ? <ItemConnector /> : null}
+										</div>
+									);
+								})}
+							</>
+						);
+					})()}
 				</div>
 			</div>
+			<LegendBar />
 			<LogStream logs={data?.logs ?? []} />
 			<StepDetailSheet
 				sessionId={sessionId}
@@ -177,6 +276,10 @@ function HeaderRow({
 			? `${status.mode} · ${statusText(status.state)}`
 			: "暂无运行";
 	const isRunning = status?.state === "running";
+	const isWaiting = status?.state === "waiting";
+	const isFailed = status?.state === "failed";
+	const isCancelled = status?.state === "cancelled";
+	const isErrored = isFailed || isCancelled;
 	return (
 		<header className="flex items-center justify-between gap-3">
 			<div className="flex items-center gap-2">
@@ -187,27 +290,33 @@ function HeaderRow({
 			</div>
 			<div
 				className={cn(
-					"flex items-center gap-1.5 rounded-full border bg-emerald-500/10 px-3 py-1 text-emerald-700 text-xs dark:text-emerald-300",
-					isRunning
-						? "animate-pipeline-pill-glow border-emerald-400"
-						: "border-emerald-500/40",
+					"flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs",
+					isErrored
+						? "border-rose-500/50 bg-rose-500/10 text-rose-700 dark:text-rose-300"
+						: isWaiting
+							? "border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+							: isRunning
+								? "animate-pipeline-pill-glow border-sky-400 bg-sky-500/10 text-sky-700 dark:text-sky-300"
+								: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
 				)}
 			>
 				<span className="relative inline-flex size-2 items-center justify-center">
 					<span
 						className={cn(
 							"size-2 rounded-full",
-							isRunning
-								? "bg-emerald-500"
-								: status?.state === "complete"
-									? "bg-emerald-500"
-									: status?.state === "failed"
-										? "bg-rose-500"
-										: "bg-muted-foreground",
+							isErrored
+								? "bg-rose-500"
+								: isWaiting
+									? "bg-amber-500"
+									: isRunning
+										? "bg-sky-500"
+										: status?.state === "complete"
+											? "bg-emerald-500"
+											: "bg-muted-foreground",
 						)}
 					/>
-					{isRunning ? (
-						<span className="pointer-events-none absolute inset-0 animate-pipeline-dot-ping rounded-full bg-emerald-400" />
+					{isRunning && !isErrored ? (
+						<span className="pointer-events-none absolute inset-0 animate-pipeline-dot-ping rounded-full bg-sky-400" />
 					) : null}
 				</span>
 				<span className="font-medium">{statusLabel}</span>
@@ -245,80 +354,204 @@ function KpiRow({ kpis }: { kpis: Kpi[] }) {
 	);
 }
 
-function PhaseSection({
-	phase,
+function ItemConnector() {
+	return (
+		<div className="flex justify-center py-1">
+			<div className="h-5 w-0.5 bg-gradient-to-b from-border to-muted-foreground/30" />
+		</div>
+	);
+}
+
+function StatusPill({ status }: { status: CardStatus }) {
+	const map: Record<
+		CardStatus,
+		{ label: string; cls: string; icon: LucideIcon | null }
+	> = {
+		complete: {
+			label: "COMPLETED",
+			cls: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 border-emerald-500/30",
+			icon: CheckIcon,
+		},
+		running: {
+			label: "IN PROGRESS",
+			cls: "bg-sky-500/15 text-sky-700 dark:text-sky-300 border-sky-500/30",
+			icon: Loader2Icon,
+		},
+		waiting: {
+			label: "WAITING FOR YOU",
+			cls: "bg-amber-500/15 text-amber-700 dark:text-amber-300 border-amber-500/40",
+			icon: HourglassIcon,
+		},
+		pending: {
+			label: "PENDING",
+			cls: "bg-muted text-muted-foreground border-border",
+			icon: null,
+		},
+		failed: {
+			label: "FAILED",
+			cls: "bg-rose-500/15 text-rose-700 dark:text-rose-300 border-rose-500/30",
+			icon: AlertTriangleIcon,
+		},
+		cancelled: {
+			label: "CANCELLED",
+			cls: "bg-muted text-muted-foreground border-border",
+			icon: null,
+		},
+	};
+	const { label, cls, icon: Icon } = map[status];
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[10px] font-semibold tracking-wider",
+				cls,
+			)}
+		>
+			{Icon ? (
+				<Icon
+					className={cn(
+						"size-3",
+						status === "running" ? "animate-spin" : "",
+					)}
+				/>
+			) : null}
+			{label}
+		</span>
+	);
+}
+
+function RoundSection({
+	item,
 	onCardClick,
 }: {
-	phase: PipelinePhase;
+	item: RoundItem;
 	onCardClick?: (card: PipelineCard) => void;
 }) {
-	const dotCls =
-		phase.tone === "complete"
-			? "bg-emerald-500"
-			: phase.tone === "running"
-				? "bg-sky-500"
-				: "bg-violet-500";
-	const arrowComplete = phase.tone === "complete";
+	const numLabel = item.index.toString().padStart(2, "0");
+	const phaseTone = SECTION_PHASE_TONE[item.section_type];
+	const badgeTone = SECTION_BADGE_TONE[item.section_type];
 	return (
-		<section className="rounded-xl border bg-background/60 p-4">
-			<div className="mb-3 flex items-center justify-between">
-				<div className="flex items-center gap-2">
-					<span className={cn("size-2 rounded-full", dotCls)} />
-					<span className="font-medium text-foreground text-sm">
-						{phase.label}
+		<section
+			className={cn(
+				"rounded-2xl border bg-gradient-to-br p-4 shadow-sm",
+				phaseTone,
+				"bg-background/80",
+			)}
+		>
+			<div className="mb-3 flex items-start justify-between gap-3">
+				<div className="flex items-center gap-3">
+					<span
+						className={cn(
+							"flex size-9 shrink-0 items-center justify-center rounded-full font-mono text-sm font-semibold",
+							badgeTone,
+						)}
+					>
+						{numLabel}
 					</span>
-				</div>
-				<ChevronDownIcon className="size-4 text-muted-foreground/60" />
-			</div>
-			<div className="flex flex-wrap items-stretch gap-2">
-				{phase.cards.map((card, idx) => (
-					<div key={card.key} className="flex items-stretch gap-2">
-						<PipelineCardView
-							card={card}
-							onClick={onCardClick ? () => onCardClick(card) : undefined}
-						/>
-						{idx < phase.cards.length - 1 ? (
-							<PhaseArrow complete={arrowComplete} />
-						) : null}
+					<div className="min-w-0">
+						<div className="flex items-center gap-2">
+							<span className="font-semibold text-foreground text-sm">
+								{item.label}
+							</span>
+						</div>
+						<p className="mt-0.5 text-[11px] text-muted-foreground">
+							{item.description}
+						</p>
 					</div>
-				))}
+				</div>
+				<StatusPill status={item.status} />
 			</div>
+			{item.cards.length > 0 ? (
+				<div className="flex flex-wrap items-stretch justify-center gap-2">
+					{item.cards.map((card, idx) => (
+						<div key={card.key} className="flex items-stretch gap-2">
+							<PipelineCardView
+								card={card}
+								onClick={onCardClick ? () => onCardClick(card) : undefined}
+							/>
+							{idx < item.cards.length - 1 ? <CardArrow /> : null}
+						</div>
+					))}
+				</div>
+			) : null}
 		</section>
 	);
 }
 
-function PhaseArrow({ complete }: { complete: boolean }) {
+function CardArrow() {
 	return (
-		<div className="flex items-center px-1">
-			<svg
-				width="32"
-				height="14"
-				viewBox="0 0 32 14"
-				fill="none"
-				className={cn(
-					complete ? "text-emerald-500" : "text-muted-foreground/40",
-				)}
-				aria-hidden
-			>
-				<line
-					x1="0"
-					y1="7"
-					x2="22"
-					y2="7"
-					stroke="currentColor"
-					strokeWidth="1.5"
-					strokeDasharray={complete ? "3 3" : "0"}
-				/>
-				<path
-					d="M22 2 L30 7 L22 12 Z"
-					fill="currentColor"
-					stroke="none"
-				/>
-			</svg>
+		<div className="flex items-center px-1 text-muted-foreground/50">
+			<ChevronRightIcon className="size-5" />
 		</div>
 	);
 }
 
+function GateCard({
+	item,
+	onClick,
+}: {
+	item: GateItem;
+	onClick?: () => void;
+}) {
+	const numLabel = item.index.toString().padStart(2, "0");
+	const isWaiting = item.status === "waiting";
+	const isComplete = item.status === "complete";
+	const Tag = onClick ? "button" : "div";
+	const hint =
+		item.gate_kind === "human-review"
+			? "在右侧对话里给出 OK / 调整后的指令，agent 才会继续。"
+			: "在右侧对话里回 OK / 修改建议，确认后进入下一轮训练。";
+	return (
+		<Tag
+			type={onClick ? "button" : undefined}
+			onClick={onClick}
+			className={cn(
+				"flex w-full items-center justify-between gap-3 rounded-2xl border-2 border-dashed bg-amber-500/5 p-4 text-left transition-colors",
+				isWaiting
+					? "border-amber-400 bg-amber-500/10 ring-2 ring-amber-300/40 dark:ring-amber-500/30 animate-pipeline-pill-glow"
+					: isComplete
+						? "border-emerald-400/60 bg-emerald-500/5"
+						: "border-amber-400/40",
+				onClick &&
+					"cursor-pointer hover:bg-amber-500/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400",
+			)}
+		>
+			<div className="flex items-center gap-3 min-w-0">
+				<span className="flex size-9 shrink-0 items-center justify-center rounded-full bg-amber-500/15 font-mono text-amber-700 text-sm font-semibold dark:text-amber-300">
+					{numLabel}
+				</span>
+				<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20 text-amber-700 dark:text-amber-300">
+					<UserCheckIcon className="size-5" />
+				</div>
+				<div className="min-w-0">
+					<div className="flex items-center gap-2 flex-wrap">
+						<span className="font-semibold text-foreground text-sm">
+							{item.title}
+						</span>
+						<span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-[10px] text-amber-700 dark:text-amber-300">
+							{item.run_id}
+						</span>
+					</div>
+					{item.reason ? (
+						<p className="mt-1 text-[12px] text-foreground/80 leading-snug line-clamp-3">
+							{item.reason}
+						</p>
+					) : (
+						<p className="mt-1 text-[11px] text-muted-foreground leading-snug">
+							{item.description}
+						</p>
+					)}
+					{isWaiting ? (
+						<p className="mt-1 text-[10px] uppercase tracking-wide text-amber-700/80 dark:text-amber-400/80">
+							{hint}
+						</p>
+					) : null}
+				</div>
+			</div>
+			<StatusPill status={item.status} />
+		</Tag>
+	);
+}
+
 function PipelineCardView({
 	card,
 	onClick,
@@ -357,7 +590,7 @@ function PipelineCardView({
 						<CheckIcon className="size-3" strokeWidth={3} />
 					</div>
 				) : (
-					<StatusBadge status={card.status} />
+					<MiniStatus status={card.status} />
 				)}
 			</div>
 			<div className="flex items-center gap-1.5">
@@ -390,7 +623,7 @@ function PipelineCardView({
 	);
 }
 
-function StatusBadge({ status }: { status: CardStatus }) {
+function MiniStatus({ status }: { status: CardStatus }) {
 	const map: Record<CardStatus, { label: string; cls: string }> = {
 		complete: {
 			label: "DONE",
@@ -400,6 +633,10 @@ function StatusBadge({ status }: { status: CardStatus }) {
 			label: "RUNNING",
 			cls: "bg-sky-500/20 text-sky-700 dark:text-sky-200",
 		},
+		waiting: {
+			label: "WAITING",
+			cls: "bg-amber-500/20 text-amber-700 dark:text-amber-200",
+		},
 		pending: {
 			label: "PENDING",
 			cls: "bg-muted text-muted-foreground",
@@ -429,6 +666,61 @@ function StatusBadge({ status }: { status: CardStatus }) {
 	);
 }
 
+function LegendBar() {
+	const items = [
+		{
+			icon: BarChart3Icon,
+			label: "Measure",
+			sub: "Quantify performance",
+			color:
+				"bg-sky-500/10 text-sky-700 dark:text-sky-300 border-sky-500/30",
+		},
+		{
+			icon: DnaIcon,
+			label: "Improve",
+			sub: "Data, training, quality",
+			color:
+				"bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 border-emerald-500/30",
+		},
+		{
+			icon: MicroscopeIcon,
+			label: "Understand",
+			sub: "Analyze & diagnose",
+			color:
+				"bg-violet-500/10 text-violet-700 dark:text-violet-300 border-violet-500/30",
+		},
+		{
+			icon: RefreshCwIcon,
+			label: "Iterate",
+			sub: "Repeat & grow",
+			color:
+				"bg-amber-500/10 text-amber-700 dark:text-amber-300 border-amber-500/30",
+		},
+	];
+	return (
+		<div className="flex shrink-0 items-center gap-4 border-t bg-background/80 px-6 py-2.5 overflow-x-auto">
+			{items.map(({ icon: Icon, label, sub, color }) => (
+				<div key={label} className="flex items-center gap-2 shrink-0">
+					<span
+						className={cn(
+							"flex size-7 items-center justify-center rounded-full border",
+							color,
+						)}
+					>
+						<Icon className="size-3.5" />
+					</span>
+					<div className="leading-tight">
+						<div className="text-[11px] font-semibold text-foreground">
+							{label}
+						</div>
+						<div className="text-[10px] text-muted-foreground">{sub}</div>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
 function LogStream({ logs }: { logs: LogLine[] }) {
 	const ref = useRef<HTMLDivElement>(null);
 	useEffect(() => {
@@ -471,6 +763,7 @@ function LogStream({ logs }: { logs: LogLine[] }) {
 function statusText(state: CardStatus) {
 	const map: Record<CardStatus, string> = {
 		running: "Running",
+		waiting: "等待人工确认",
 		complete: "Complete",
 		failed: "Failed",
 		pending: "Idle",