@mcp-b/react-components 0.11.0 → 0.12.0

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,7 +1,9 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SearchIcon, D as PlayIcon, L as XIcon, N as SquareIcon, T as PauseIcon, k as RefreshIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { L as XIcon, M as SpinnerIcon, P as TerminalIcon, T as PauseIcon, a as CheckIcon, f as EllipsisIcon, h as FileIcon, k as RefreshIcon, t as ArrowDownIcon, y as InfoIcon } from "../icons-D2Q5n5C1.js";
+import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { Button } from "./Button.js";
-import { Badge } from "./Badge.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
+import { MenuContent, MenuItem, MenuRoot, MenuSeparator, MenuTrigger } from "./Menu.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkExecutionWorkbench.tsx
@@ -11,35 +13,99 @@ function formatTimestamp(value) {
 	const date = value instanceof Date ? value : new Date(value);
 	return Number.isNaN(date.getTime()) ? "Not recorded" : date.toLocaleString();
 }
+function formatShortTimestamp(value) {
+	if (value == null) return "Not recorded";
+	const date = value instanceof Date ? value : new Date(value);
+	return Number.isNaN(date.getTime()) ? "Not recorded" : date.toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
 function formatJson(value) {
 	return JSON.stringify(value, null, 2);
 }
 function getErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function submissionStatusColor(status) {
-	if (status === "completed") return "success";
-	if (status === "error") return "destructive";
-	if (status === "aborted" || status === "skipped") return "warning";
-	if (status === "running") return "primary";
-	return "neutral";
+function TooltipIcon({ children, className, label, status, tone }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("span", {
+		"aria-label": label,
+		className: cx("think-execution-workbench__icon", className),
+		"data-status": status,
+		"data-tone": tone,
+		role: "img",
+		children
+	}) }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		sideOffset: 6,
+		children: label
+	})] });
 }
-function workflowStatusColor(status) {
-	const value = String(status);
-	if (value === "complete") return "success";
-	if (value === "errored" || value === "terminated") return "destructive";
-	if (value === "paused" || value === "waiting") return "warning";
-	if (value === "running") return "primary";
+function runId(run) {
+	return run.kind === "submission" ? run.record.submissionId : run.record.workflowId;
+}
+function runTitle(run) {
+	return run.kind === "submission" ? run.record.submissionId : run.record.workflowName;
+}
+function runSubtitle(run) {
+	return run.kind === "workflow" ? run.record.workflowId : void 0;
+}
+function runCreatedAt(run) {
+	return run.record.createdAt;
+}
+function runProgressedAt(run) {
+	return run.kind === "submission" ? run.record.startedAt : run.record.updatedAt;
+}
+function runProgressedLabel(run) {
+	return run.kind === "submission" ? "Started" : "Updated";
+}
+function runCompletedAt(run) {
+	return run.record.completedAt;
+}
+function runStatus(run) {
+	return String(run.record.status);
+}
+function formatStatus(status) {
+	return status.charAt(0).toUpperCase() + status.slice(1);
+}
+function runListTimestamp(run) {
+	const progressedAt = runProgressedAt(run);
+	return `${progressedAt ? runProgressedLabel(run) : "Created"} ${formatShortTimestamp(progressedAt ?? runCreatedAt(run))}`;
+}
+function runAccessibleName(run) {
+	const subtitle = runSubtitle(run);
+	return `${runTitle(run)}${subtitle ? ` ${subtitle}` : ""}. ${formatStatus(runStatus(run))}. ${runListTimestamp(run)}`;
+}
+function runStatusTone(run) {
+	const status = runStatus(run);
+	if (status === "completed" || status === "complete") return "success";
+	if (status === "error" || status === "errored" || status === "terminated") return "danger";
+	if (status === "aborted" || status === "skipped" || status === "paused" || status === "waiting") return "warning";
+	if (status === "running") return "primary";
 	return "neutral";
 }
-function StatusBadge({ children, color }) {
-	return /* @__PURE__ */ jsxs(Badge, {
+function RunStatus({ run }) {
+	const status = runStatus(run);
+	const icon = status === "completed" || status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : status === "error" || status === "errored" || status === "terminated" ? /* @__PURE__ */ jsx(XIcon, {}) : status === "aborted" || status === "skipped" || status === "paused" || status === "waiting" ? /* @__PURE__ */ jsx(PauseIcon, {}) : status === "running" ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(InfoIcon, {});
+	return /* @__PURE__ */ jsx(TooltipIcon, {
 		className: "think-execution-workbench__status",
-		color,
-		size: "sm",
-		children: [/* @__PURE__ */ jsx(DotIcon, {}), /* @__PURE__ */ jsx("span", { children })]
+		label: `Status: ${status}`,
+		status,
+		tone: runStatusTone(run),
+		children: icon
 	});
 }
+function runMetadata(run) {
+	return run.record.metadata;
+}
+function runError(run) {
+	return run.kind === "submission" ? run.record.error : run.record.error ? `${run.record.error.name}: ${run.record.error.message}` : void 0;
+}
+function isSameRun(first, second) {
+	return first?.kind === second.kind && runId(first) === runId(second);
+}
 function isSubmissionCancelable(status) {
 	return status === "pending" || status === "running";
 }
@@ -47,47 +113,260 @@ function isWorkflowTerminal(status) {
 	const value = String(status);
 	return value === "complete" || value === "errored" || value === "terminated";
 }
+function RunActivity({ run }) {
+	const progressedAt = runProgressedAt(run);
+	const completedAt = runCompletedAt(run);
+	const error = runError(run);
+	const metadata = runMetadata(run);
+	return /* @__PURE__ */ jsxs(Activity, {
+		defaultOpen: true,
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
+			icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
+			label: "Activity"
+		}), /* @__PURE__ */ jsxs(ActivityContent, { children: [
+			/* @__PURE__ */ jsx(ActivityItem, {
+				icon: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+				children: `Created ${formatTimestamp(runCreatedAt(run))}`
+			}),
+			progressedAt ? /* @__PURE__ */ jsx(ActivityItem, {
+				icon: /* @__PURE__ */ jsx(RefreshIcon, {}),
+				children: `${runProgressedLabel(run)} ${formatTimestamp(progressedAt)}`
+			}) : null,
+			completedAt ? /* @__PURE__ */ jsx(ActivityItem, {
+				icon: /* @__PURE__ */ jsx(CheckIcon, {}),
+				children: `Finished ${formatTimestamp(completedAt)}`
+			}) : null,
+			error ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+				icon: /* @__PURE__ */ jsx(XIcon, {}),
+				label: "Failure",
+				children: /* @__PURE__ */ jsx(ActivityPanel, {
+					label: "Error",
+					text: error,
+					status: "error",
+					error: true
+				})
+			}) : null,
+			metadata ? /* @__PURE__ */ jsx(ActivityItemGroup, {
+				icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+				label: "Metadata",
+				children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(metadata) })
+			}) : null,
+			/* @__PURE__ */ jsx(ActivityItemGroup, {
+				icon: /* @__PURE__ */ jsx(FileIcon, {}),
+				label: "Raw record",
+				children: /* @__PURE__ */ jsx(ActivityOutput, { children: formatJson(run.record) })
+			})
+		] })]
+	});
+}
+function RunDetail({ run }) {
+	if (!run) return /* @__PURE__ */ jsx("div", {
+		className: "think-execution-workbench__empty-detail",
+		role: "status",
+		children: /* @__PURE__ */ jsx("p", { children: "Select a run to view its activity." })
+	});
+	const id = runId(run);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
+		className: "think-execution-workbench__detail-header",
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: runTitle(run) }), run.kind === "workflow" ? /* @__PURE__ */ jsx("code", { children: id }) : null] }), /* @__PURE__ */ jsxs("div", {
+			className: "think-execution-workbench__detail-status",
+			children: [/* @__PURE__ */ jsx(RunStatus, { run }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: formatStatus(runStatus(run)) }), /* @__PURE__ */ jsx("span", { children: runListTimestamp(run) })] })]
+		})]
+	}), /* @__PURE__ */ jsx(RunActivity, { run })] });
+}
+function RunActions({ busy, onAction, run, source }) {
+	const id = runId(run);
+	const action = (key, callback) => () => onAction(key, callback);
+	return /* @__PURE__ */ jsxs(MenuRoot, { children: [/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(MenuTrigger, {
+		unstyled: true,
+		render: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			color: "neutral",
+			size: "icon-xs",
+			className: "think-execution-workbench__run-actions",
+			"aria-label": `Actions for ${run.kind} ${id}`,
+			disabled: busy,
+			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+		})
+	}) }), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		sideOffset: 6,
+		children: "Run actions"
+	})] }), /* @__PURE__ */ jsx(MenuContent, {
+		align: "end",
+		children: run.kind === "submission" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			isSubmissionCancelable(run.record.status) ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				onClick: action(`cancel-submission:${id}`, () => source.cancelSubmission(id)),
+				children: "Cancel"
+			}) : null,
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				variant: "destructive",
+				onClick: action(`delete-submission:${id}`, () => source.deleteSubmission(id)),
+				children: "Delete"
+			})
+		] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				onClick: action(`sync-workflow:${id}`, () => source.getWorkflowStatus(run.record.workflowName, id)),
+				children: "Refresh status"
+			}),
+			runStatus(run) === "running" ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				onClick: action(`pause-workflow:${id}`, () => source.pauseWorkflow(id)),
+				children: "Pause"
+			}) : null,
+			runStatus(run) === "paused" ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				onClick: action(`resume-workflow:${id}`, () => source.resumeWorkflow(id)),
+				children: "Resume"
+			}) : null,
+			isWorkflowTerminal(run.record.status) ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				onClick: action(`restart-workflow:${id}`, () => source.restartWorkflow(id)),
+				children: "Restart"
+			}) : null,
+			runStatus(run) === "running" ? /* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				variant: "destructive",
+				onClick: action(`terminate-workflow:${id}`, () => source.terminateWorkflow(id)),
+				children: "Terminate"
+			}) : null,
+			/* @__PURE__ */ jsx(MenuSeparator, {}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: busy,
+				variant: "destructive",
+				onClick: action(`delete-workflow:${id}`, () => source.deleteWorkflow(id)),
+				children: "Delete"
+			})
+		] })
+	})] });
+}
+/**
+* Unified execution history for native Think submissions and Agents workflows.
+* The workbench reads and acts through the whole upstream agent stub; it does
+* not normalize execution records or own workflow authoring.
+*/
 function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, source, title = "Execution", ...props }) {
-	const inspectionId = React.useId();
-	const submissionsId = React.useId();
-	const executionsId = React.useId();
+	const runsId = React.useId();
+	const activeSourceRef = React.useRef(source);
+	const sourceGenerationRef = React.useRef(0);
+	const operationSequenceRef = React.useRef(0);
 	const [busyAction, setBusyAction] = React.useState("refresh");
 	const [error, setError] = React.useState(null);
-	const [submissions, setSubmissions] = React.useState([]);
-	const [workflows, setWorkflows] = React.useState(null);
-	const [selectedSubmission, setSelectedSubmission] = React.useState(null);
-	const [selectedWorkflow, setSelectedWorkflow] = React.useState(null);
-	const loadData = React.useCallback(async () => {
-		const [nextSubmissions, nextWorkflows] = await Promise.all([source.listSubmissions({ limit: pageSize }), source.getWorkflows({
+	const [executionData, setExecutionData] = React.useState(null);
+	const [selection, setSelection] = React.useState(null);
+	const activeExecutionData = executionData?.source === source ? executionData : null;
+	const selectedRun = selection?.source === source ? selection.run : null;
+	const runs = React.useMemo(() => [...activeExecutionData?.submissions.map((record) => ({
+		kind: "submission",
+		record
+	})) ?? [], ...activeExecutionData?.workflows.workflows.map((record) => ({
+		kind: "workflow",
+		record
+	})) ?? []].sort((first, second) => Number(runCreatedAt(second)) - Number(runCreatedAt(first))), [activeExecutionData]);
+	const isCurrentOperation = React.useCallback((operation) => activeSourceRef.current === operation.source && sourceGenerationRef.current === operation.generation && operationSequenceRef.current === operation.sequence, []);
+	const beginOperation = React.useCallback(() => {
+		if (activeSourceRef.current !== source) return null;
+		return {
+			generation: sourceGenerationRef.current,
+			sequence: ++operationSequenceRef.current,
+			source
+		};
+	}, [source]);
+	const loadData = React.useCallback(async (operation) => {
+		const [nextSubmissions, nextWorkflows] = await Promise.all([operation.source.listSubmissions({ limit: pageSize }), operation.source.getWorkflows({
 			limit: pageSize,
 			orderBy: "desc"
 		})]);
-		setSubmissions(nextSubmissions);
-		setWorkflows(nextWorkflows);
-	}, [pageSize, source]);
+		if (!isCurrentOperation(operation)) return;
+		setExecutionData({
+			source: operation.source,
+			submissions: nextSubmissions,
+			workflows: nextWorkflows
+		});
+	}, [isCurrentOperation, pageSize]);
 	const refresh = React.useCallback(async () => {
+		const operation = beginOperation();
+		if (!operation) return;
 		setBusyAction("refresh");
 		setError(null);
 		try {
-			await loadData();
+			await loadData(operation);
 		} catch (nextError) {
+			if (!isCurrentOperation(operation)) return;
 			setError(getErrorMessage(nextError));
 		} finally {
-			setBusyAction(null);
+			if (isCurrentOperation(operation)) setBusyAction(null);
 		}
-	}, [loadData]);
+	}, [
+		beginOperation,
+		isCurrentOperation,
+		loadData
+	]);
 	const runAction = React.useCallback(async (key, action) => {
+		const operation = beginOperation();
+		if (!operation) return;
 		setBusyAction(key);
 		setError(null);
 		try {
-			await action();
-			await loadData();
+			await action(operation);
+			if (!isCurrentOperation(operation)) return;
+			await loadData(operation);
 		} catch (nextError) {
+			if (!isCurrentOperation(operation)) return;
 			setError(getErrorMessage(nextError));
 		} finally {
-			setBusyAction(null);
+			if (isCurrentOperation(operation)) setBusyAction(null);
 		}
-	}, [loadData]);
+	}, [
+		beginOperation,
+		isCurrentOperation,
+		loadData
+	]);
+	const selectRun = React.useCallback((run) => {
+		runAction(`select-${run.kind}:${runId(run)}`, async (operation) => {
+			if (run.kind === "submission") {
+				const inspection = await operation.source.inspectSubmission(run.record.submissionId);
+				if (!isCurrentOperation(operation)) return;
+				setSelection({
+					source: operation.source,
+					run: inspection ? {
+						kind: "submission",
+						record: inspection
+					} : run
+				});
+				return;
+			}
+			const workflow = await operation.source.getWorkflow(run.record.workflowId);
+			if (!isCurrentOperation(operation)) return;
+			setSelection({
+				source: operation.source,
+				run: workflow ? {
+					kind: "workflow",
+					record: workflow
+				} : run
+			});
+		});
+	}, [isCurrentOperation, runAction]);
+	React.useLayoutEffect(() => {
+		activeSourceRef.current = source;
+		sourceGenerationRef.current += 1;
+		operationSequenceRef.current += 1;
+		setExecutionData(null);
+		setSelection(null);
+		setBusyAction("refresh");
+		setError(null);
+		return () => {
+			if (activeSourceRef.current === source) {
+				sourceGenerationRef.current += 1;
+				operationSequenceRef.current += 1;
+			}
+		};
+	}, [source]);
 	React.useEffect(() => {
 		refresh();
 	}, [refresh]);
@@ -104,17 +383,21 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 						className: "think-execution-workbench__title",
 						children: title
 					})]
-				}), /* @__PURE__ */ jsxs(Button, {
+				}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
 					type: "button",
-					variant: "outline",
+					variant: "ghost",
 					color: "neutral",
-					size: "sm",
+					size: "icon-xs",
 					className: "think-execution-workbench__refresh",
-					"aria-label": "Refresh execution records",
+					"aria-label": "Refresh runs",
 					disabled: busyAction !== null,
 					onClick: () => void refresh(),
-					children: [/* @__PURE__ */ jsx(RefreshIcon, {}), /* @__PURE__ */ jsx("span", { children: "Refresh" })]
-				})]
+					children: /* @__PURE__ */ jsx(RefreshIcon, {})
+				}) }), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					sideOffset: 6,
+					children: "Refresh runs"
+				})] })]
 			}),
 			error ? /* @__PURE__ */ jsx("div", {
 				className: "think-execution-workbench__error",
@@ -122,325 +405,65 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 				children: error
 			}) : null,
 			/* @__PURE__ */ jsxs("div", {
-				className: "think-execution-workbench__sections",
+				className: "think-execution-workbench__content",
 				"aria-busy": busyAction !== null,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "think-execution-workbench__lists",
-					children: [/* @__PURE__ */ jsxs("section", {
-						className: "think-execution-workbench__section",
-						"aria-labelledby": submissionsId,
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__section-header",
-							children: [/* @__PURE__ */ jsx("h3", {
-								id: submissionsId,
-								children: "Submissions"
-							}), /* @__PURE__ */ jsx(Badge, {
-								color: "neutral",
-								size: "sm",
-								children: submissions.length
-							})]
-						}), busyAction === "refresh" && submissions.length === 0 ? /* @__PURE__ */ jsx("p", {
-							className: "think-execution-workbench__empty",
-							role: "status",
-							children: "Loading submissions..."
-						}) : submissions.length === 0 ? /* @__PURE__ */ jsx("p", {
-							className: "think-execution-workbench__empty",
-							children: "No submissions."
-						}) : /* @__PURE__ */ jsx("ul", {
-							className: "think-execution-workbench__list",
-							role: "list",
-							children: submissions.map((submission) => /* @__PURE__ */ jsxs("li", {
-								className: "think-execution-workbench__item",
-								"data-selected": selectedSubmission?.submissionId === submission.submissionId ? "true" : void 0,
-								children: [/* @__PURE__ */ jsxs("div", {
-									className: "think-execution-workbench__row-main",
-									children: [
-										/* @__PURE__ */ jsxs("div", {
-											className: "think-execution-workbench__item-topline",
-											children: [/* @__PURE__ */ jsx("code", { children: submission.submissionId }), /* @__PURE__ */ jsx(StatusBadge, {
-												color: submissionStatusColor(submission.status),
-												children: submission.status
-											})]
-										}),
-										/* @__PURE__ */ jsxs("p", {
-											className: "think-execution-workbench__row-meta",
-											children: [/* @__PURE__ */ jsxs("span", { children: ["Created ", formatTimestamp(submission.createdAt)] }), submission.idempotencyKey ? /* @__PURE__ */ jsxs("span", { children: ["Idempotency ", submission.idempotencyKey] }) : null]
-										}),
-										submission.error ? /* @__PURE__ */ jsx("p", {
-											className: "think-execution-workbench__item-error",
-											children: submission.error
-										}) : null
-									]
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "think-execution-workbench__actions",
-									children: [
-										/* @__PURE__ */ jsx(Button, {
-											type: "button",
-											variant: "ghost",
-											color: "neutral",
-											size: "icon-xs",
-											"aria-label": `Inspect submission ${submission.submissionId}`,
-											disabled: busyAction !== null,
-											onClick: () => void runAction(`inspect-submission:${submission.submissionId}`, async () => {
-												setSelectedWorkflow(null);
-												setSelectedSubmission(await source.inspectSubmission(submission.submissionId));
-											}),
-											children: /* @__PURE__ */ jsx(SearchIcon, {})
-										}),
-										isSubmissionCancelable(submission.status) ? /* @__PURE__ */ jsx(Button, {
-											type: "button",
-											variant: "ghost",
-											color: "neutral",
-											size: "icon-xs",
-											"aria-label": `Cancel submission ${submission.submissionId}`,
-											disabled: busyAction !== null,
-											onClick: () => void runAction(`cancel-submission:${submission.submissionId}`, () => source.cancelSubmission(submission.submissionId)),
-											children: /* @__PURE__ */ jsx(SquareIcon, {})
-										}) : null,
-										/* @__PURE__ */ jsx(Button, {
-											type: "button",
-											variant: "ghost",
-											color: "destructive",
-											size: "icon-xs",
-											"aria-label": `Delete submission ${submission.submissionId}`,
-											disabled: busyAction !== null,
-											onClick: () => void runAction(`delete-submission:${submission.submissionId}`, () => source.deleteSubmission(submission.submissionId)),
-											children: /* @__PURE__ */ jsx(XIcon, {})
-										})
-									]
-								})]
-							}, submission.submissionId))
-						})]
-					}), /* @__PURE__ */ jsxs("section", {
-						className: "think-execution-workbench__section",
-						"aria-labelledby": executionsId,
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__section-header",
-							children: [/* @__PURE__ */ jsx("h3", {
-								id: executionsId,
-								children: "Tracked workflows"
-							}), /* @__PURE__ */ jsx(Badge, {
-								color: "neutral",
-								size: "sm",
-								children: workflows?.total ?? 0
-							})]
-						}), busyAction === "refresh" && workflows === null ? /* @__PURE__ */ jsx("p", {
-							className: "think-execution-workbench__empty",
-							role: "status",
-							children: "Loading workflows..."
-						}) : !workflows || workflows.workflows.length === 0 ? /* @__PURE__ */ jsx("p", {
-							className: "think-execution-workbench__empty",
-							children: "No tracked workflows."
-						}) : /* @__PURE__ */ jsx("ul", {
-							className: "think-execution-workbench__list",
-							role: "list",
-							children: workflows.workflows.map((workflow) => {
-								const workflowStatus = String(workflow.status);
-								return /* @__PURE__ */ jsxs("li", {
-									className: "think-execution-workbench__item",
-									"data-selected": selectedWorkflow?.workflowId === workflow.workflowId ? "true" : void 0,
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "think-execution-workbench__row-main",
-										children: [
-											/* @__PURE__ */ jsxs("div", {
-												className: "think-execution-workbench__item-topline",
-												children: [/* @__PURE__ */ jsx("code", { children: workflow.workflowName }), /* @__PURE__ */ jsx(StatusBadge, {
-													color: workflowStatusColor(workflow.status),
-													children: workflowStatus
-												})]
-											}),
-											/* @__PURE__ */ jsxs("p", {
-												className: "think-execution-workbench__row-meta",
-												children: [/* @__PURE__ */ jsx("span", { children: workflow.workflowId }), /* @__PURE__ */ jsxs("span", { children: ["Updated ", formatTimestamp(workflow.updatedAt)] })]
-											}),
-											workflow.error ? /* @__PURE__ */ jsxs("p", {
-												className: "think-execution-workbench__item-error",
-												children: [
-													workflow.error.name,
-													": ",
-													workflow.error.message
-												]
-											}) : null
-										]
-									}), /* @__PURE__ */ jsxs("div", {
-										className: "think-execution-workbench__actions",
-										children: [
-											/* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "neutral",
-												size: "icon-xs",
-												"aria-label": `Inspect workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`inspect-workflow:${workflow.workflowId}`, async () => {
-													setSelectedSubmission(null);
-													setSelectedWorkflow(await source.getWorkflow(workflow.workflowId) ?? workflow);
-												}),
-												children: /* @__PURE__ */ jsx(SearchIcon, {})
-											}),
-											/* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "neutral",
-												size: "icon-xs",
-												"aria-label": `Sync workflow ${workflow.workflowId} status`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`sync-workflow:${workflow.workflowId}`, () => source.getWorkflowStatus(workflow.workflowName, workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(RefreshIcon, {})
-											}),
-											workflowStatus === "running" ? /* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "neutral",
-												size: "icon-xs",
-												"aria-label": `Pause workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`pause-workflow:${workflow.workflowId}`, () => source.pauseWorkflow(workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(PauseIcon, {})
-											}) : null,
-											workflowStatus === "paused" ? /* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "neutral",
-												size: "icon-xs",
-												"aria-label": `Resume workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`resume-workflow:${workflow.workflowId}`, () => source.resumeWorkflow(workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(PlayIcon, {})
-											}) : null,
-											isWorkflowTerminal(workflow.status) ? /* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "neutral",
-												size: "icon-xs",
-												"aria-label": `Restart workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`restart-workflow:${workflow.workflowId}`, () => source.restartWorkflow(workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(RefreshIcon, {})
-											}) : null,
-											workflowStatus === "running" ? /* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "destructive",
-												size: "icon-xs",
-												"aria-label": `Terminate workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`terminate-workflow:${workflow.workflowId}`, () => source.terminateWorkflow(workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(SquareIcon, {})
-											}) : null,
-											/* @__PURE__ */ jsx(Button, {
-												type: "button",
-												variant: "ghost",
-												color: "destructive",
-												size: "icon-xs",
-												"aria-label": `Delete workflow ${workflow.workflowId}`,
-												disabled: busyAction !== null,
-												onClick: () => void runAction(`delete-workflow:${workflow.workflowId}`, () => source.deleteWorkflow(workflow.workflowId)),
-												children: /* @__PURE__ */ jsx(XIcon, {})
-											})
-										]
+				children: [/* @__PURE__ */ jsxs("section", {
+					className: "think-execution-workbench__run-list",
+					"aria-labelledby": runsId,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "think-execution-workbench__list-header",
+						children: /* @__PURE__ */ jsx("h3", {
+							id: runsId,
+							children: "Runs"
+						})
+					}), busyAction === "refresh" && runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "think-execution-workbench__empty",
+						role: "status",
+						children: "Loading runs..."
+					}) : runs.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "think-execution-workbench__empty",
+						children: "No runs yet."
+					}) : /* @__PURE__ */ jsx("ul", {
+						className: "think-execution-workbench__list",
+						role: "list",
+						children: runs.map((run) => {
+							const id = runId(run);
+							const selected = isSameRun(selectedRun, run);
+							return /* @__PURE__ */ jsxs("li", {
+								"data-selected": selected || void 0,
+								children: [/* @__PURE__ */ jsxs("button", {
+									type: "button",
+									className: "think-execution-workbench__run",
+									"aria-label": runAccessibleName(run),
+									"aria-current": selected ? "page" : void 0,
+									disabled: busyAction !== null,
+									onClick: () => selectRun(run),
+									children: [/* @__PURE__ */ jsx(RunStatus, { run }), /* @__PURE__ */ jsxs("span", {
+										className: "think-execution-workbench__run-copy",
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "think-execution-workbench__run-heading",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "think-execution-workbench__run-title",
+												children: runTitle(run)
+											}), runSubtitle(run) ? /* @__PURE__ */ jsx("code", { children: runSubtitle(run) }) : null]
+										}), /* @__PURE__ */ jsx("span", {
+											className: "think-execution-workbench__run-summary",
+											children: runListTimestamp(run)
+										})]
 									})]
-								}, workflow.workflowId);
-							})
-						})]
+								}), /* @__PURE__ */ jsx(RunActions, {
+									busy: busyAction !== null,
+									run,
+									source,
+									onAction: (key, action) => void runAction(key, () => action())
+								})]
+							}, `${run.kind}:${id}`);
+						})
 					})]
-				}), /* @__PURE__ */ jsx("div", {
+				}), /* @__PURE__ */ jsx("section", {
 					className: "think-execution-workbench__detail",
-					"aria-labelledby": inspectionId,
-					children: selectedSubmission ? /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__detail-header",
-							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-								className: "think-execution-workbench__eyebrow",
-								children: "Submission inspection"
-							}), /* @__PURE__ */ jsx("h3", {
-								id: inspectionId,
-								children: /* @__PURE__ */ jsx("code", { children: selectedSubmission.submissionId })
-							})] }), /* @__PURE__ */ jsx(StatusBadge, {
-								color: submissionStatusColor(selectedSubmission.status),
-								children: selectedSubmission.status
-							})]
-						}),
-						/* @__PURE__ */ jsxs("dl", {
-							className: "think-execution-workbench__meta think-execution-workbench__meta--detail",
-							children: [
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Created" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedSubmission.createdAt) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Started" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedSubmission.startedAt) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Completed" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedSubmission.completedAt) })] }),
-								selectedSubmission.requestId ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Request" }), /* @__PURE__ */ jsx("dd", { children: selectedSubmission.requestId })] }) : null,
-								selectedSubmission.idempotencyKey ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Idempotency" }), /* @__PURE__ */ jsx("dd", { children: selectedSubmission.idempotencyKey })] }) : null
-							]
-						}),
-						selectedSubmission.error ? /* @__PURE__ */ jsx("p", {
-							className: "think-execution-workbench__item-error",
-							children: selectedSubmission.error
-						}) : null,
-						selectedSubmission.metadata ? /* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__inspection",
-							children: [/* @__PURE__ */ jsx("h4", { children: "Metadata" }), /* @__PURE__ */ jsx("pre", {
-								tabIndex: 0,
-								children: formatJson(selectedSubmission.metadata)
-							})]
-						}) : null,
-						/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__inspection",
-							children: [/* @__PURE__ */ jsx("h4", { children: "Raw record" }), /* @__PURE__ */ jsx("pre", {
-								tabIndex: 0,
-								children: formatJson(selectedSubmission)
-							})]
-						})
-					] }) : selectedWorkflow ? /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__detail-header",
-							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-								className: "think-execution-workbench__eyebrow",
-								children: "Workflow inspection"
-							}), /* @__PURE__ */ jsx("h3", {
-								id: inspectionId,
-								children: /* @__PURE__ */ jsx("code", { children: selectedWorkflow.workflowName })
-							})] }), /* @__PURE__ */ jsx(StatusBadge, {
-								color: workflowStatusColor(selectedWorkflow.status),
-								children: String(selectedWorkflow.status)
-							})]
-						}),
-						/* @__PURE__ */ jsxs("dl", {
-							className: "think-execution-workbench__meta think-execution-workbench__meta--detail",
-							children: [
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Instance" }), /* @__PURE__ */ jsx("dd", { children: selectedWorkflow.workflowId })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Created" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedWorkflow.createdAt) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Updated" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedWorkflow.updatedAt) })] }),
-								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Completed" }), /* @__PURE__ */ jsx("dd", { children: formatTimestamp(selectedWorkflow.completedAt) })] })
-							]
-						}),
-						selectedWorkflow.error ? /* @__PURE__ */ jsxs("p", {
-							className: "think-execution-workbench__item-error",
-							children: [
-								selectedWorkflow.error.name,
-								": ",
-								selectedWorkflow.error.message
-							]
-						}) : null,
-						selectedWorkflow.metadata ? /* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__inspection",
-							children: [/* @__PURE__ */ jsx("h4", { children: "Metadata" }), /* @__PURE__ */ jsx("pre", {
-								tabIndex: 0,
-								children: formatJson(selectedWorkflow.metadata)
-							})]
-						}) : null,
-						/* @__PURE__ */ jsxs("div", {
-							className: "think-execution-workbench__inspection",
-							children: [/* @__PURE__ */ jsx("h4", { children: "Raw record" }), /* @__PURE__ */ jsx("pre", {
-								tabIndex: 0,
-								children: formatJson(selectedWorkflow)
-							})]
-						})
-					] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("h3", {
-						id: inspectionId,
-						children: "Inspection"
-					}), /* @__PURE__ */ jsx("p", {
-						className: "think-execution-workbench__empty think-execution-workbench__empty--detail",
-						children: "Inspect a submission or workflow."
-					})] })
+					"aria-label": "Run detail",
+					children: /* @__PURE__ */ jsx(RunDetail, { run: selectedRun })
 				})]
 			})
 		]