修改

frontend/app/components/assistant-ui/activity-panel.tsx

@@ -212,6 +212,7 @@ export function ActivityPanel({ asDrawer = false }: { asDrawer?: boolean } = {})
 	useEffect(() => {
 		const latestId = items.at(-1)?.id ?? null;
 		if (
+			!asDrawer &&
 			mode === "activity" &&
 			!selectedId &&
 			latestId &&
@@ -220,7 +221,7 @@ export function ActivityPanel({ asDrawer = false }: { asDrawer?: boolean } = {})
 			openActivity();
 		}
 		prevLatestIdRef.current = latestId;
-	}, [items, mode, openActivity, selectedId]);
+	}, [asDrawer, items, mode, openActivity, selectedId]);
 
 	if (!asDrawer && !open) return null;
 
@@ -269,6 +270,7 @@ export function ActivityPanel({ asDrawer = false }: { asDrawer?: boolean } = {})
 								open={selectedId === item.id}
 								onOpenChange={(nextOpen) => {
 									if (nextOpen) openItem(item.id);
+									else if (selectedId === item.id) openActivity();
 								}}
 							/>
 						))}

frontend/app/components/assistant-ui/thread-list.tsx

@@ -6,10 +6,13 @@ import {
 import { ThreadListPrimitive } from "@assistant-ui/react";
 import type { UIMessage } from "ai";
 import {
+	Loader2Icon,
 	MoreHorizontalIcon,
 	PencilIcon,
 	PlusIcon,
+	ServerIcon,
 	Trash2Icon,
+	XIcon,
 } from "lucide-react";
 import {
 	type FC,
@@ -23,6 +26,7 @@ import {
 	clearActiveSessionId,
 	readActiveSessionId,
 	writeActiveSessionId,
+	writePendingWorkspaceSessionId,
 } from "@/lib/claw-active-session";
 import { useClawSessionReplay } from "@/lib/claw-session-replay";
 import { pushHomeUrl, pushSessionUrl } from "@/lib/claw-session-url";
@@ -112,6 +116,7 @@ export const ThreadList: FC = () => {
 	return (
 		<ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex min-h-0 flex-1 flex-col gap-1">
 			<ThreadListNew />
+			<JupyterWorkspaceList />
 			<ClawSessionList />
 		</ThreadListPrimitive.Root>
 	);
@@ -139,6 +144,177 @@ const ThreadListNew: FC = () => {
 	);
 };
 
+type JupyterWorkspaceEntry = {
+	id: string;
+	label?: string;
+	base_url?: string;
+	workspace_root?: string;
+	created_at?: number;
+	last_used_at?: number;
+};
+
+function ensureSidebarWorkspaceSessionId(): {
+	sessionId: string;
+	created: boolean;
+} {
+	const existing = readActiveSessionId();
+	if (existing) return { sessionId: existing, created: false };
+	const generated =
+		typeof crypto !== "undefined" && "randomUUID" in crypto
+			? `__LOCALID_${crypto.randomUUID().replace(/-/g, "").slice(0, 8)}`
+			: `__LOCALID_${Math.random().toString(36).slice(2, 10)}`;
+	writeActiveSessionId(generated);
+	return { sessionId: generated, created: true };
+}
+
+function workspaceDisplayLabel(entry: JupyterWorkspaceEntry): string {
+	if (entry.label && entry.label.trim()) return entry.label.trim();
+	if (entry.base_url) {
+		try {
+			return new URL(entry.base_url).host;
+		} catch {
+			return entry.base_url;
+		}
+	}
+	return entry.id;
+}
+
+const JupyterWorkspaceList: FC = () => {
+	const [entries, setEntries] = useState<JupyterWorkspaceEntry[]>([]);
+	const [loaded, setLoaded] = useState(false);
+	const [bindingId, setBindingId] = useState<string | null>(null);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		let cancelled = false;
+		const refresh = () => {
+			fetch("/api/claw/jupyter/workspaces", { cache: "no-store" })
+				.then((res) => (res.ok ? res.json() : []))
+				.then((payload) => {
+					if (cancelled) return;
+					if (Array.isArray(payload)) {
+						setEntries(payload as JupyterWorkspaceEntry[]);
+					} else {
+						setEntries([]);
+					}
+					setLoaded(true);
+				})
+				.catch(() => {
+					if (cancelled) return;
+					setEntries([]);
+					setLoaded(true);
+				});
+		};
+		refresh();
+		const onChanged = () => refresh();
+		window.addEventListener("claw-workspaces-changed", onChanged);
+		window.addEventListener("focus", refresh);
+		return () => {
+			cancelled = true;
+			window.removeEventListener("claw-workspaces-changed", onChanged);
+			window.removeEventListener("focus", refresh);
+		};
+	}, []);
+
+	if (!loaded || entries.length === 0) return null;
+
+	const bind = async (entry: JupyterWorkspaceEntry) => {
+		setError(null);
+		setBindingId(entry.id);
+		const { sessionId, created } = ensureSidebarWorkspaceSessionId();
+		try {
+			const response = await fetch(
+				`/api/claw/jupyter/workspaces/${encodeURIComponent(entry.id)}/bind`,
+				{
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ session_id: sessionId }),
+				},
+			);
+			if (!response.ok) {
+				const payload = (await response.json().catch(() => ({}))) as {
+					detail?: string;
+					error?: string;
+				};
+				setError(payload.detail ?? payload.error ?? "切换工作区失败");
+				return;
+			}
+			if (created) writePendingWorkspaceSessionId(sessionId);
+			window.dispatchEvent(new Event("claw-sessions-changed"));
+			window.dispatchEvent(new Event("claw-workspaces-changed"));
+		} catch (err) {
+			setError(
+				err instanceof Error ? err.message : "切换工作区时网络异常",
+			);
+		} finally {
+			setBindingId(null);
+		}
+	};
+
+	const remove = async (entry: JupyterWorkspaceEntry) => {
+		if (!window.confirm(`移除工作区「${workspaceDisplayLabel(entry)}」？`)) return;
+		try {
+			const response = await fetch(
+				`/api/claw/jupyter/workspaces/${encodeURIComponent(entry.id)}`,
+				{ method: "DELETE" },
+			);
+			if (!response.ok) return;
+			setEntries((current) => current.filter((e) => e.id !== entry.id));
+		} catch {
+			// best effort; next refresh will reconcile
+		}
+	};
+
+	return (
+		<div className="mt-1 flex flex-col gap-1 border-y border-dashed py-2">
+			<div className="flex items-center gap-1.5 px-2 text-muted-foreground text-xs uppercase tracking-wide">
+				<ServerIcon className="size-3" />
+				<span>工作区</span>
+			</div>
+			<div className="flex flex-col gap-0.5">
+				{entries.map((entry) => {
+					const label = workspaceDisplayLabel(entry);
+					const subtitle = entry.workspace_root ?? "";
+					const isBinding = bindingId === entry.id;
+					return (
+						<div
+							key={entry.id}
+							className="group relative flex h-9 items-center gap-1 rounded-lg transition-colors hover:bg-muted"
+						>
+							<button
+								type="button"
+								disabled={isBinding}
+								onClick={() => void bind(entry)}
+								className="flex h-full min-w-0 flex-1 items-center gap-2 rounded-lg px-3 text-left text-sm disabled:cursor-wait"
+								title={`${entry.base_url ?? ""}${subtitle ? ` · ${subtitle}` : ""}`}
+							>
+								{isBinding ? (
+									<Loader2Icon className="size-3.5 shrink-0 animate-spin" />
+								) : (
+									<ServerIcon className="size-3.5 shrink-0 text-muted-foreground" />
+								)}
+								<span className="min-w-0 flex-1 truncate">{label}</span>
+							</button>
+							<button
+								type="button"
+								aria-label="移除工作区"
+								title="移除工作区"
+								onClick={() => void remove(entry)}
+								className="mr-1 hidden size-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-background hover:text-foreground group-hover:flex"
+							>
+								<XIcon className="size-3.5" />
+							</button>
+						</div>
+					);
+				})}
+			</div>
+			{error ? (
+				<div className="px-2 text-destructive text-xs">{error}</div>
+			) : null}
+		</div>
+	);
+};
+
 const ClawSessionList: FC = () => {
 	const { replaySession } = useClawSessionReplay();
 	const [sessions, setSessions] = useState<ClawSession[]>([]);

frontend/app/components/assistant-ui/thread.tsx

@@ -273,7 +273,25 @@ function useRefreshCurrentRun() {
 			const runStatus = await fetchLatestRunStatus(sessionId);
 			if (cancelled) return;
 			if (runStatus?.status === "queued" || runStatus?.status === "running") {
-				activeRunRef.current = runStatus.run_id ?? "active";
+				const runKey = runStatus.run_id ?? "active";
+				const previousRunKey = activeRunRef.current;
+				activeRunRef.current = runKey;
+				// Watcher auto-resume: backend started a new run via _maybe_auto_resume
+				// without a local SSE stream driving the UI. We need to replay once so
+				// the active-run placeholder (pending prompt + 思考中 bubble) appears.
+				// useRefreshReplayedRun will take over polling once replayedRun.active
+				// becomes true.
+				if (!runtimeRunning && previousRunKey !== runKey) {
+					const response = await fetch(`/api/claw/sessions/${sessionId}`, {
+						cache: "no-store",
+					});
+					if (!response.ok || cancelled) return;
+					const payload = await response.json();
+					replaySession(
+						sessionId,
+						toReplayRepository(payload, sessionId, runStatus),
+					);
+				}
 				return;
 			}
 			if (!runtimeRunning && !activeRunRef.current) return;
@@ -632,6 +650,7 @@ function WorkspaceSwitchDialog({
 			if (needsFirstMessageSession) {
 				writePendingWorkspaceSessionId(sessionIdForRequest);
 			}
+			window.dispatchEvent(new Event("claw-workspaces-changed"));
 			setStatus(payload as JupyterWorkspaceStatus);
 			setProgress({ percent: 100, label: "切换完成" });
 			setMessage("工作区切换成功，后续工具会在远端 Jupyter 工作区执行。");
@@ -1186,6 +1205,7 @@ function ModelPickerButton({
 	};
 }) {
 	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
 	const normalizedQuery = query.trim().toLowerCase();
 	const filteredModels = useMemo(() => {
 		if (!normalizedQuery) return status.models;
@@ -1199,7 +1219,7 @@ function ModelPickerButton({
 	}, [normalizedQuery, status.models]);
 
 	return (
-		<PopoverPrimitive.Root>
+		<PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
 			<PopoverPrimitive.Trigger asChild>
 				<button
 					type="button"
@@ -1240,7 +1260,10 @@ function ModelPickerButton({
 										key={model.id}
 										type="button"
 										className="flex h-8 w-full items-center justify-between gap-2 rounded-lg px-2 text-left text-sm hover:bg-muted"
-										onClick={() => status.setModel(model.id)}
+										onClick={() => {
+											setOpen(false);
+											void status.setModel(model.id);
+										}}
 									>
 										<span className="min-w-0 flex-1 truncate">{model.id}</span>
 										<span className="shrink-0 text-muted-foreground text-xs">

frontend/app/components/training/step-detail-sheet.tsx

@@ -1,18 +1,48 @@
 "use client";
 
-import { ExternalLinkIcon, FileIcon, RefreshCwIcon } from "lucide-react";
+import {
+	ExternalLinkIcon,
+	FileIcon,
+	RefreshCwIcon,
+	XIcon,
+} from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetTitle,
+} from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 
+type TableSection = {
+	title: string;
+	source_path: string;
+	kind: "csv" | "jsonl" | "text" | "markdown" | "missing" | "error";
+	columns: string[];
+	rows: string[][];
+	total_rows: number;
+	shown_rows: number;
+	error?: string;
+	body?: string;
+};
+
 type StepDetail = {
 	step: string;
 	run_dic: number | null;
-	format: "markdown" | "jsonl" | "json" | "csv" | "text" | "empty";
-	content: string;
+	format:
+		| "markdown"
+		| "jsonl"
+		| "json"
+		| "csv"
+		| "text"
+		| "empty"
+		| "tables";
+	content?: string;
+	sections?: TableSection[];
 	source_path: string | null;
 	fetched_at_ms: number;
 	error?: string;
@@ -65,6 +95,7 @@ export function StepDetailSheet({
 		<Sheet open={open} onOpenChange={onOpenChange}>
 			<SheetContent
 				side="right"
+				hideClose
 				className="flex w-[min(50rem,calc(100vw-2rem))] flex-col gap-0 p-0 sm:max-w-2xl"
 			>
 				<header className="flex shrink-0 items-start justify-between gap-3 border-b px-5 py-3">
@@ -87,17 +118,25 @@ export function StepDetailSheet({
 							</div>
 						) : null}
 					</div>
-					<Button
-						type="button"
-						variant="ghost"
-						size="icon"
-						className="mt-0.5 size-7 shrink-0"
-						onClick={() => setReloadCount((c) => c + 1)}
-						title="刷新"
-						aria-label="刷新"
-					>
-						<RefreshCwIcon className="size-3.5" />
-					</Button>
+					<div className="mt-0.5 flex shrink-0 items-center gap-1">
+						<Button
+							type="button"
+							variant="ghost"
+							size="icon"
+							className="size-7"
+							onClick={() => setReloadCount((c) => c + 1)}
+							title="刷新"
+							aria-label="刷新"
+						>
+							<RefreshCwIcon className="size-3.5" />
+						</Button>
+						<SheetClose
+							className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+							aria-label="关闭"
+						>
+							<XIcon className="size-3.5" />
+						</SheetClose>
+					</div>
 				</header>
 				<div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm">
 					{loading ? (
@@ -106,14 +145,16 @@ export function StepDetailSheet({
 						<p className="text-muted-foreground text-xs">无法获取详情</p>
 					) : detail.format === "empty" ? (
 						<EmptyView detail={detail} />
+					) : detail.format === "tables" ? (
+						<TablesView sections={detail.sections ?? []} />
 					) : detail.format === "markdown" ? (
-						<MarkdownView text={detail.content} />
+						<MarkdownView text={detail.content ?? ""} />
 					) : detail.format === "json" ? (
-						<JsonView text={detail.content} />
+						<JsonView text={detail.content ?? ""} />
 					) : detail.format === "jsonl" ? (
-						<JsonLinesView text={detail.content} />
+						<JsonLinesView text={detail.content ?? ""} />
 					) : (
-						<RawView text={detail.content} />
+						<RawView text={detail.content ?? ""} />
 					)}
 				</div>
 				{detail?.source_path && !loading ? (
@@ -939,6 +980,153 @@ function MarkdownView({ text }: { text: string }) {
 	);
 }
 
+function TablesView({ sections }: { sections: TableSection[] }) {
+	if (sections.length === 0) {
+		return <p className="text-muted-foreground text-xs">空内容。</p>;
+	}
+	return (
+		<div className="space-y-3">
+			{sections.map((section, idx) => (
+				<TableSectionCard
+					key={`${section.title}-${idx}`}
+					section={section}
+					defaultOpen={idx <= 1}
+				/>
+			))}
+		</div>
+	);
+}
+
+function TableSectionCard({
+	section,
+	defaultOpen,
+}: {
+	section: TableSection;
+	defaultOpen: boolean;
+}) {
+	const isMissing = section.kind === "missing" || section.kind === "error";
+	const isMarkdown = section.kind === "markdown";
+	const truncated =
+		section.shown_rows > 0 && section.shown_rows < section.total_rows;
+	const noteParts: string[] = [];
+	if (section.total_rows > 0) {
+		noteParts.push(`共 ${section.total_rows} 行`);
+		if (truncated) {
+			noteParts.push(`仅显示前 ${section.shown_rows} 行`);
+		}
+	}
+	if (section.kind === "csv") noteParts.push("CSV");
+	else if (section.kind === "jsonl") noteParts.push("JSONL");
+	else if (section.kind === "text") noteParts.push("TEXT");
+	else if (section.kind === "markdown") noteParts.push("MARKDOWN");
+
+	return (
+		<details
+			open={defaultOpen && !isMissing}
+			className="group rounded-lg border bg-card shadow-sm"
+		>
+			<summary className="flex cursor-pointer items-center gap-2 border-b px-4 py-2.5 hover:bg-muted/30">
+				<span className="font-semibold text-foreground text-sm">
+					{section.title}
+				</span>
+				{noteParts.length > 0 ? (
+					<span className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+						{noteParts.join(" · ")}
+					</span>
+				) : null}
+				<span className="ml-auto text-[10px] text-muted-foreground transition-transform group-open:rotate-180">
+					▾
+				</span>
+			</summary>
+			<div className="space-y-2 px-4 py-3">
+				<div className="flex items-center gap-1 truncate font-mono text-[11px] text-muted-foreground">
+					<FileIcon className="size-3 shrink-0" />
+					<span className="truncate">{section.source_path}</span>
+				</div>
+				{isMissing ? (
+					<p className="rounded-md border border-dashed border-muted-foreground/30 bg-muted/30 px-3 py-2 text-muted-foreground text-xs">
+						{section.error ?? "产物文件不存在或读取失败"}
+					</p>
+				) : isMarkdown ? (
+					<MarkdownView text={section.body ?? ""} />
+				) : section.rows.length === 0 ? (
+					<p className="text-muted-foreground text-xs">空表。</p>
+				) : (
+					<DataTable columns={section.columns} rows={section.rows} />
+				)}
+			</div>
+		</details>
+	);
+}
+
+function DataTable({
+	columns,
+	rows,
+}: {
+	columns: string[];
+	rows: string[][];
+}) {
+	return (
+		<div className="max-h-[60vh] overflow-auto rounded-md border">
+			<table className="w-full border-collapse text-[12px]">
+				<thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/60">
+					<tr>
+						<th className="border-b border-r px-2 py-1 text-left font-medium text-[10px] text-muted-foreground tracking-wider w-10">
+							#
+						</th>
+						{columns.map((c) => (
+							<th
+								key={c}
+								className="border-b border-r last:border-r-0 px-2 py-1 text-left font-medium whitespace-nowrap"
+							>
+								{c}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{rows.map((row, rIdx) => (
+						<tr
+							key={rIdx}
+							className="border-b last:border-b-0 hover:bg-muted/20"
+						>
+							<td className="border-r px-2 py-1 align-top font-mono text-[10px] text-muted-foreground tabular-nums">
+								{rIdx + 1}
+							</td>
+							{columns.map((c, cIdx) => {
+								const cell = row[cIdx] ?? "";
+								return (
+									<td
+										key={c}
+										className="border-r last:border-r-0 px-2 py-1 align-top font-mono text-[11px]"
+									>
+										{cell === "" ? (
+											<span className="text-muted-foreground">—</span>
+										) : (
+											<TableCell text={cell} />
+										)}
+									</td>
+								);
+							})}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+function TableCell({ text }: { text: string }) {
+	if (text.includes("\n")) {
+		return (
+			<pre className="whitespace-pre-wrap break-words font-mono text-[11px] leading-snug">
+				{text}
+			</pre>
+		);
+	}
+	return <span className="break-words whitespace-pre-wrap">{text}</span>;
+}
+
 function RawView({ text }: { text: string }) {
 	return (
 		<pre className="overflow-x-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed">

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",

frontend/app/components/ui/sheet.tsx

@@ -48,9 +48,11 @@ function SheetContent({
 	className,
 	children,
 	side = "right",
+	hideClose = false,
 	...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 	side?: "top" | "right" | "bottom" | "left";
+	hideClose?: boolean;
 }) {
 	return (
 		<SheetPortal>
@@ -72,10 +74,12 @@ function SheetContent({
 				{...props}
 			>
 				{children}
-				<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-					<XIcon className="size-4" />
-					<span className="sr-only">Close</span>
-				</SheetPrimitive.Close>
+				{hideClose ? null : (
+					<SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+						<XIcon className="size-4" />
+						<span className="sr-only">Close</span>
+					</SheetPrimitive.Close>
+				)}
 			</SheetPrimitive.Content>
 		</SheetPortal>
 	);