@signalflare-ai/ui 0.5.0

package/dist/ai-task-list-B9CpMDYN.js

@@ -0,0 +1,120 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, CircleDashedIcon, CircleNotchIcon, XCircleIcon } from "@phosphor-icons/react";
+//#region src/components/ai-task-list/ai-task-list.tsx
+var SF_AI_TASK_LIST_VARIANTS = {};
+var SF_AI_TASK_LIST_DEFAULT_VARIANTS = {};
+var STATUS_CONFIG = {
+	pending: {
+		icon: CircleDashedIcon,
+		className: "text-sf-subtle/60",
+		textClassName: "text-sf-subtle"
+	},
+	in_progress: {
+		icon: CircleNotchIcon,
+		className: "text-sf-brand animate-spin",
+		textClassName: "text-sf-default"
+	},
+	completed: {
+		icon: CheckCircleIcon,
+		className: "text-sf-success/60",
+		textClassName: "text-sf-subtle/60 line-through"
+	},
+	cancelled: {
+		icon: XCircleIcon,
+		className: "text-sf-subtle/40",
+		textClassName: "text-sf-subtle/40 line-through"
+	}
+};
+var PRIORITY_DOT = {
+	high: "bg-sf-danger",
+	medium: "bg-sf-warning",
+	low: "bg-sf-subtle"
+};
+/**
+* Single task item with status icon, content, and optional priority dot.
+*/
+function AiTaskListItem({ task, className, ...props }) {
+	const config = STATUS_CONFIG[task.status];
+	const StatusIcon = config.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-2 py-1", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(StatusIcon, { className: cn("mt-0.5 size-3.5 shrink-0", config.className) }),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 grow text-sm", config.textClassName),
+				children: task.content
+			}),
+			task.priority && /* @__PURE__ */ jsx("span", {
+				className: cn("mt-2 size-1 shrink-0 rounded-full", PRIORITY_DOT[task.priority]),
+				title: `${task.priority} priority`
+			})
+		]
+	});
+}
+AiTaskListItem.displayName = "AiTaskListItem";
+/**
+* Task progress list. Renders structured tasks from the harness `task_write`
+* tool. Typically rendered inside the `PromptInputBackLayer` or inline in
+* conversation.
+*
+* Maps to harness event: `task_updated`.
+*
+* @example
+* ```tsx
+* <AiTaskList
+*   title="Current tasks"
+*   tasks={[
+*     { id: "1", content: "Read config file", status: "completed", priority: "high" },
+*     { id: "2", content: "Run migrations", status: "in_progress", priority: "high" },
+*     { id: "3", content: "Seed database", status: "pending", priority: "medium" },
+*   ]}
+* />
+* ```
+*/
+function AiTaskList({ tasks, title, icon, showProgress = true, children, className, ...props }) {
+	const completed = tasks.filter((t) => t.status === "completed").length;
+	const total = tasks.filter((t) => t.status !== "cancelled").length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1", className),
+		...props,
+		children: [
+			(title || showProgress) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2 pb-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [icon && /* @__PURE__ */ jsx(icon, { className: "size-3.5 text-sf-subtle" }), title && /* @__PURE__ */ jsx("span", {
+						className: "text-sm text-sf-subtle",
+						children: title
+					})]
+				}), showProgress && total > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "text-xs tabular-nums text-sf-subtle/60",
+					children: [
+						completed,
+						"/",
+						total
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: tasks.map((task) => /* @__PURE__ */ jsx(AiTaskListItem, { task }, task.id))
+			}),
+			showProgress && total > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-1 h-0.5 overflow-hidden rounded-full bg-sf-tint",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-full bg-sf-brand/60 transition-[width] duration-300 ease-out",
+					style: { width: `${completed / total * 100}%` }
+				})
+			}),
+			children
+		]
+	});
+}
+AiTaskList.displayName = "AiTaskList";
+//#endregion
+export { SF_AI_TASK_LIST_VARIANTS as i, AiTaskListItem as n, SF_AI_TASK_LIST_DEFAULT_VARIANTS as r, AiTaskList as t };
+
+//# sourceMappingURL=ai-task-list-B9CpMDYN.js.map

package/dist/ai-task-list-B9CpMDYN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-task-list-B9CpMDYN.js","names":[],"sources":["../src/components/ai-task-list/ai-task-list.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  CheckCircleIcon,\n  CircleDashedIcon,\n  CircleNotchIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ElementType, HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_TASK_LIST_VARIANTS = {} as const;\nexport const SF_AI_TASK_LIST_DEFAULT_VARIANTS = {} as const;\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type AiTaskStatus =\n  | \"pending\"\n  | \"in_progress\"\n  | \"completed\"\n  | \"cancelled\";\n\nexport type AiTaskPriority = \"high\" | \"medium\" | \"low\";\n\nexport type AiTaskItem = {\n  /** Unique task identifier. */\n  id: string;\n  /** Task description. */\n  content: string;\n  /** Current status. */\n  status: AiTaskStatus;\n  /** Priority level. */\n  priority?: AiTaskPriority;\n};\n\nexport type AiTaskListProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** List of tasks. */\n  tasks: AiTaskItem[];\n  /** Optional title above the task list. */\n  title?: string;\n  /** Custom icon for the title area. */\n  icon?: ElementType;\n  /** Show a progress summary (e.g. \"3 / 7 done\"). Default: `true`. */\n  showProgress?: boolean;\n  /** Content rendered below the task list. */\n  children?: ReactNode;\n};\n\nexport type AiTaskListItemProps = HTMLAttributes<HTMLDivElement> & {\n  task: AiTaskItem;\n};\n\n// ─── Status config ────────────────────────────────────────────────────────────\n\nconst STATUS_CONFIG: Record<\n  AiTaskStatus,\n  { icon: ElementType; className: string; textClassName: string }\n> = {\n  pending: {\n    icon: CircleDashedIcon,\n    className: \"text-sf-subtle/60\",\n    textClassName: \"text-sf-subtle\",\n  },\n  in_progress: {\n    icon: CircleNotchIcon,\n    className: \"text-sf-brand animate-spin\",\n    textClassName: \"text-sf-default\",\n  },\n  completed: {\n    icon: CheckCircleIcon,\n    className: \"text-sf-success/60\",\n    textClassName: \"text-sf-subtle/60 line-through\",\n  },\n  cancelled: {\n    icon: XCircleIcon,\n    className: \"text-sf-subtle/40\",\n    textClassName: \"text-sf-subtle/40 line-through\",\n  },\n};\n\nconst PRIORITY_DOT: Record<AiTaskPriority, string> = {\n  high: \"bg-sf-danger\",\n  medium: \"bg-sf-warning\",\n  low: \"bg-sf-subtle\",\n};\n\n// ─── AiTaskListItem ──────────────────────────────────────────────────────────\n\n/**\n * Single task item with status icon, content, and optional priority dot.\n */\nexport function AiTaskListItem({\n  task,\n  className,\n  ...props\n}: AiTaskListItemProps) {\n  const config = STATUS_CONFIG[task.status];\n  const StatusIcon = config.icon;\n\n  return (\n    <div className={cn(\"flex items-start gap-2 py-1\", className)} {...props}>\n      <StatusIcon\n        className={cn(\"mt-0.5 size-3.5 shrink-0\", config.className)}\n      />\n      <span className={cn(\"min-w-0 grow text-sm\", config.textClassName)}>\n        {task.content}\n      </span>\n      {task.priority && (\n        <span\n          className={cn(\n            \"mt-2 size-1 shrink-0 rounded-full\",\n            PRIORITY_DOT[task.priority]\n          )}\n          title={`${task.priority} priority`}\n        />\n      )}\n    </div>\n  );\n}\n\nAiTaskListItem.displayName = \"AiTaskListItem\";\n\n// ─── AiTaskList ──────────────────────────────────────────────────────────────\n\n/**\n * Task progress list. Renders structured tasks from the harness `task_write`\n * tool. Typically rendered inside the `PromptInputBackLayer` or inline in\n * conversation.\n *\n * Maps to harness event: `task_updated`.\n *\n * @example\n * ```tsx\n * <AiTaskList\n *   title=\"Current tasks\"\n *   tasks={[\n *     { id: \"1\", content: \"Read config file\", status: \"completed\", priority: \"high\" },\n *     { id: \"2\", content: \"Run migrations\", status: \"in_progress\", priority: \"high\" },\n *     { id: \"3\", content: \"Seed database\", status: \"pending\", priority: \"medium\" },\n *   ]}\n * />\n * ```\n */\nexport function AiTaskList({\n  tasks,\n  title,\n  icon,\n  showProgress = true,\n  children,\n  className,\n  ...props\n}: AiTaskListProps) {\n  const completed = tasks.filter((t) => t.status === \"completed\").length;\n  const total = tasks.filter((t) => t.status !== \"cancelled\").length;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)} {...props}>\n      {/* Header */}\n      {(title || showProgress) && (\n        <div className=\"flex items-center justify-between gap-2 pb-0.5\">\n          <div className=\"flex items-center gap-1.5\">\n            {icon &&\n              (() => {\n                const Icon = icon;\n                return <Icon className=\"size-3.5 text-sf-subtle\" />;\n              })()}\n            {title && <span className=\"text-sm text-sf-subtle\">{title}</span>}\n          </div>\n          {showProgress && total > 0 && (\n            <span className=\"text-xs tabular-nums text-sf-subtle/60\">\n              {completed}/{total}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Tasks */}\n      <div className=\"flex flex-col\">\n        {tasks.map((task) => (\n          <AiTaskListItem key={task.id} task={task} />\n        ))}\n      </div>\n\n      {/* Progress bar */}\n      {showProgress && total > 0 && (\n        <div className=\"mt-1 h-0.5 overflow-hidden rounded-full bg-sf-tint\">\n          <div\n            className=\"h-full rounded-full bg-sf-brand/60 transition-[width] duration-300 ease-out\"\n            style={{ width: `${(completed / total) * 100}%` }}\n          />\n        </div>\n      )}\n\n      {children}\n    </div>\n  );\n}\n\nAiTaskList.displayName = \"AiTaskList\";\n"],"mappings":";;;;;AAcA,IAAa,2BAA2B,EAAE;AAC1C,IAAa,mCAAmC,EAAE;AA0ClD,IAAM,gBAGF;CACF,SAAS;EACP,MAAM;EACN,WAAW;EACX,eAAe;EAChB;CACD,aAAa;EACX,MAAM;EACN,WAAW;EACX,eAAe;EAChB;CACD,WAAW;EACT,MAAM;EACN,WAAW;EACX,eAAe;EAChB;CACD,WAAW;EACT,MAAM;EACN,WAAW;EACX,eAAe;EAChB;CACF;AAED,IAAM,eAA+C;CACnD,MAAM;CACN,QAAQ;CACR,KAAK;CACN;;;;AAOD,SAAgB,eAAe,EAC7B,MACA,WACA,GAAG,SACmB;CACtB,MAAM,SAAS,cAAc,KAAK;CAClC,MAAM,aAAa,OAAO;AAE1B,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,+BAA+B,UAAU;EAAE,GAAI;YAAlE;GACE,oBAAC,YAAD,EACE,WAAW,GAAG,4BAA4B,OAAO,UAAU,EAC3D,CAAA;GACF,oBAAC,QAAD;IAAM,WAAW,GAAG,wBAAwB,OAAO,cAAc;cAC9D,KAAK;IACD,CAAA;GACN,KAAK,YACJ,oBAAC,QAAD;IACE,WAAW,GACT,qCACA,aAAa,KAAK,UACnB;IACD,OAAO,GAAG,KAAK,SAAS;IACxB,CAAA;GAEA;;;AAIV,eAAe,cAAc;;;;;;;;;;;;;;;;;;;;AAuB7B,SAAgB,WAAW,EACzB,OACA,OACA,MACA,eAAe,MACf,UACA,WACA,GAAG,SACe;CAClB,MAAM,YAAY,MAAM,QAAQ,MAAM,EAAE,WAAW,YAAY,CAAC;CAChE,MAAM,QAAQ,MAAM,QAAQ,MAAM,EAAE,WAAW,YAAY,CAAC;AAE5D,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;YAA1D;IAEI,SAAS,iBACT,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACG,QAGU,oBADM,MACN,EAAM,WAAU,2BAA4B,CAAA,EAEtD,SAAS,oBAAC,QAAD;MAAM,WAAU;gBAA0B;MAAa,CAAA,CAC7D;QACL,gBAAgB,QAAQ,KACvB,qBAAC,QAAD;KAAM,WAAU;eAAhB;MACG;MAAU;MAAE;MACR;OAEL;;GAIR,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,SACV,oBAAC,gBAAD,EAAoC,MAAQ,EAAvB,KAAK,GAAkB,CAC5C;IACE,CAAA;GAGL,gBAAgB,QAAQ,KACvB,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,GAAI,YAAY,QAAS,IAAI,IAAI;KACjD,CAAA;IACE,CAAA;GAGP;GACG;;;AAIV,WAAW,cAAc"}

package/dist/ai-timeline-Bb5ntsr3.js

@@ -0,0 +1,373 @@
+"use client";
+import { t as cn } from "./cn-YROP2_ox.js";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BrainIcon, CaretDownIcon, CheckCircleIcon, CircleDashedIcon, CodeIcon, LightningIcon, MagnifyingGlassIcon, RobotIcon, ShieldWarningIcon, SpinnerGapIcon, WrenchIcon, XCircleIcon } from "@phosphor-icons/react";
+//#region src/components/ai-timeline/ai-timeline.tsx
+var SF_AI_TIMELINE_VARIANTS = { density: {
+	comfortable: {
+		classes: "",
+		description: "Taller lanes with more padding"
+	},
+	compact: {
+		classes: "",
+		description: "Tight lanes for dense views"
+	}
+} };
+var SF_AI_TIMELINE_DEFAULT_VARIANTS = { density: "comfortable" };
+var AGENT_ICONS = {
+	explore: MagnifyingGlassIcon,
+	search: MagnifyingGlassIcon,
+	execute: CodeIcon,
+	code: CodeIcon,
+	plan: BrainIcon,
+	think: BrainIcon,
+	tool: WrenchIcon,
+	build: WrenchIcon,
+	main: LightningIcon
+};
+function getAgentIcon(agentType, customIcon) {
+	if (customIcon) return customIcon;
+	if (agentType) {
+		const lower = agentType.toLowerCase();
+		for (const [key, icon] of Object.entries(AGENT_ICONS)) if (lower.includes(key)) return icon;
+	}
+	return RobotIcon;
+}
+function getModelShort(modelId) {
+	if (!modelId) return "";
+	return modelId.split("/").pop()?.replace(/^claude-/, "").replace(/-\d+$/, "") ?? "";
+}
+function formatMs(ms) {
+	const s = Math.round(ms / 100) / 10;
+	if (s < 60) return `${s}s`;
+	return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;
+}
+var BLOCK_COLORS = {
+	running: "bg-sf-brand text-sf-inverse",
+	tool_call: "bg-sf-warning text-sf-inverse",
+	waiting: "bg-sf-fill text-sf-subtle",
+	approval: "bg-sf-info text-sf-inverse",
+	completed: "bg-sf-brand/60 text-sf-inverse",
+	error: "bg-sf-danger text-sf-inverse"
+};
+var BLOCK_HOVER = "hover:brightness-110 hover:shadow-sm";
+function BlockIcon({ type }) {
+	switch (type) {
+		case "running": return /* @__PURE__ */ jsx(SpinnerGapIcon, {
+			size: 8,
+			className: "animate-spin"
+		});
+		case "tool_call": return /* @__PURE__ */ jsx(WrenchIcon, { size: 8 });
+		case "approval": return /* @__PURE__ */ jsx(ShieldWarningIcon, { size: 8 });
+		case "completed": return /* @__PURE__ */ jsx(CheckCircleIcon, { size: 8 });
+		case "error": return /* @__PURE__ */ jsx(XCircleIcon, { size: 8 });
+		default: return /* @__PURE__ */ jsx(CircleDashedIcon, { size: 8 });
+	}
+}
+function TimelineBlockSegment({ block, timeOrigin, nowMs, pxPerMs, laneHeight, onBlockClick, rowIndex = 0, rowCount = 1 }) {
+	const left = Math.max(0, (block.startMs - timeOrigin) * pxPerMs);
+	const end = block.endMs ?? nowMs;
+	const width = Math.max(4, (end - block.startMs) * pxPerMs);
+	const durationMs = end - block.startMs;
+	const MIN_LABEL_PX = 40;
+	const roundedClass = width < 20 ? "rounded-none" : width < 40 ? "rounded-sm" : "rounded-md";
+	const blockHeight = laneHeight - 8;
+	const innerPadding = 2;
+	const rowHeight = (blockHeight - innerPadding * 2) / rowCount;
+	const topOffset = innerPadding + rowIndex * rowHeight;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-label": block.label ?? block.type,
+		title: block.description ?? block.label,
+		onClick: onBlockClick ? () => onBlockClick(block) : void 0,
+		className: cn("group absolute transition-[width] duration-150", roundedClass, BLOCK_COLORS[block.type], onBlockClick ? BLOCK_HOVER : "cursor-default", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring", "flex items-center gap-1 overflow-hidden px-1.5"),
+		style: {
+			left,
+			width,
+			height: rowHeight - 1,
+			top: topOffset
+		},
+		children: [
+			/* @__PURE__ */ jsx(BlockIcon, { type: block.type }),
+			width >= MIN_LABEL_PX && block.label && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-[9px] font-medium leading-none",
+				children: block.label
+			}),
+			width >= MIN_LABEL_PX && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto shrink-0 text-[8px] opacity-70",
+				children: formatMs(durationMs)
+			})
+		]
+	});
+}
+/**
+* Calculate row assignments for blocks to avoid overlap.
+* Returns arrays of blocks grouped by row, where no blocks in a row overlap in time.
+*/
+function computeBlockRows(blocks) {
+	if (blocks.length === 0) return [];
+	const sorted = [...blocks].sort((a, b) => a.startMs - b.startMs);
+	const rows = [];
+	for (const block of sorted) {
+		let placed = false;
+		for (const row of rows) if (!row.some((existing) => block.startMs < (existing.endMs ?? Infinity) && (block.endMs ?? Infinity) > existing.startMs)) {
+			row.push(block);
+			placed = true;
+			break;
+		}
+		if (!placed) rows.push([block]);
+	}
+	return rows;
+}
+var LANE_HEIGHT_COMFORTABLE = 40;
+var LANE_HEIGHT_COMPACT = 28;
+var LABEL_WIDTH = 128;
+/**
+* `AiTimelineLane` — a single horizontal swim lane within an `AiTimeline`.
+*
+* Shows one agent's activity as colored blocks on a time axis. Blocks
+* represent periods of activity: running, tool calls, waiting, etc.
+*
+* Consumed by `AiTimeline` — pass lanes as children.
+*/
+var AiTimelineLane = forwardRef(({ label, agentType, modelId, status = "idle", blocks, timeOrigin, nowMs, pxPerMs, defaultExpanded = false, onBlockClick, icon, density = "comfortable", className, ...props }, ref) => {
+	const [expanded, setExpanded] = useState(defaultExpanded);
+	const Icon = getAgentIcon(agentType, icon);
+	const modelShort = getModelShort(modelId);
+	const blockRows = useMemo(() => computeBlockRows(blocks), [blocks]);
+	const rowCount = blockRows.length;
+	const baseLaneH = density === "compact" ? LANE_HEIGHT_COMPACT : LANE_HEIGHT_COMFORTABLE;
+	const laneH = rowCount > 1 ? baseLaneH * rowCount : baseLaneH;
+	const maxEnd = useMemo(() => {
+		if (!blocks.length) return timeOrigin;
+		return Math.max(...blocks.map((b) => b.endMs ?? nowMs));
+	}, [
+		blocks,
+		timeOrigin,
+		nowMs
+	]);
+	const totalWidth = Math.max(0, (maxEnd - timeOrigin) * pxPerMs);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("border-b border-sf-line last:border-b-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			style: { height: laneH },
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2 border-r border-sf-line bg-sf-base px-3",
+				style: { width: LABEL_WIDTH },
+				children: [
+					blocks.some((b) => b.detail) && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": expanded ? "Collapse lane" : "Expand lane",
+						onClick: () => setExpanded((v) => !v),
+						className: "shrink-0 text-sf-subtle hover:text-sf-default focus-visible:outline-none",
+						children: /* @__PURE__ */ jsx(CaretDownIcon, {
+							size: 10,
+							className: cn("transition-transform", expanded && "rotate-180")
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("flex shrink-0 items-center justify-center rounded", density === "compact" ? "size-5" : "size-6", status === "running" ? "text-sf-brand" : status === "completed" ? "text-sf-success" : status === "error" ? "text-sf-danger" : "text-sf-subtle"),
+						children: status === "running" ? /* @__PURE__ */ jsx(SpinnerGapIcon, {
+							size: density === "compact" ? 12 : 14,
+							className: "animate-spin"
+						}) : /* @__PURE__ */ jsx(Icon, { size: density === "compact" ? 12 : 14 })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("truncate font-medium text-sf-default", density === "compact" ? "text-[10px]" : "text-xs"),
+							children: label
+						}), modelShort && density === "comfortable" && /* @__PURE__ */ jsx("div", {
+							className: "truncate font-mono text-[9px] text-sf-inactive",
+							children: modelShort
+						})]
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "relative flex-1 overflow-hidden",
+				style: { minWidth: totalWidth },
+				children: blockRows.map((row, rowIndex) => row.map((block) => /* @__PURE__ */ jsx(TimelineBlockSegment, {
+					block,
+					timeOrigin,
+					nowMs,
+					pxPerMs,
+					laneHeight: laneH,
+					onBlockClick,
+					rowIndex,
+					rowCount
+				}, block.id)))
+			})]
+		}), expanded && blocks.filter((b) => b.detail).map((block) => /* @__PURE__ */ jsxs("div", {
+			className: "ml-[128px] border-t border-sf-line/50 bg-sf-recessed px-3 py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "mb-1 flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", BLOCK_COLORS[block.type].split(" ")[0]) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-medium text-sf-strong",
+						children: block.label ?? block.type
+					}),
+					block.endMs && /* @__PURE__ */ jsx("span", {
+						className: "text-[10px] text-sf-subtle",
+						children: formatMs(block.endMs - block.startMs)
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "text-xs text-sf-subtle",
+				children: block.detail
+			})]
+		}, `detail-${block.id}`))]
+	});
+});
+AiTimelineLane.displayName = "AiTimelineLane";
+var TIME_AXIS_HEIGHT = 24;
+/** Format elapsed time for tick labels — shows seconds with 1 decimal when under 1 minute */
+function formatElapsed(ms) {
+	if (ms < 6e4) {
+		const s = Math.round(ms / 100) / 10;
+		return `${s.toFixed(s % 1 === 0 ? 0 : 1)}s`;
+	}
+	const m = Math.floor(ms / 6e4);
+	const s = Math.round(ms % 6e4 / 1e3);
+	return s > 0 ? `${m}m ${s}s` : `${m}m`;
+}
+/** Generate time axis tick marks spaced appropriately for the zoom level. */
+function generateTicks(originMs, nowMs, pxPerMs, totalWidth) {
+	const durationMs = nowMs - originMs;
+	const tickIntervalMs = (() => {
+		const pxPerSec = pxPerMs * 1e3;
+		if (pxPerSec >= 100) return 1e3;
+		if (pxPerSec >= 30) return 5e3;
+		if (pxPerSec >= 10) return 1e4;
+		if (pxPerSec >= 5) return 3e4;
+		return 6e4;
+	})();
+	const ticks = [];
+	const firstTick = Math.ceil(originMs / tickIntervalMs) * tickIntervalMs;
+	for (let t = firstTick; t <= originMs + durationMs; t += tickIntervalMs) {
+		const elapsed = t - originMs;
+		const x = elapsed * pxPerMs;
+		if (x > totalWidth) break;
+		const label = formatElapsed(elapsed);
+		ticks.push({
+			label,
+			x
+		});
+	}
+	return ticks;
+}
+/**
+* `AiTimeline` — horizontal swim-lane timeline for commander-level orchestration.
+*
+* Displays multiple `AiTimelineLane` children on a shared time axis. Supports
+* live updating (a "now" marker follows the live edge), panning, and zoom via
+* `pixelsPerSecond`.
+*
+* @example
+* ```tsx
+* <AiTimeline
+*   timeOrigin={state.missionStartedAt}
+*   pixelsPerSecond={30}
+*   showNowMarker
+* >
+*   <AiTimelineLane
+*     label="Main"
+*     blocks={mainLaneBlocks}
+*     timeOrigin={timeOrigin}
+*     nowMs={Date.now()}
+*     pxPerMs={pxPerMs}
+*   />
+*   <AiTimelineLane label="Explore" blocks={exploreBlocks} ... />
+* </AiTimeline>
+* ```
+*/
+var AiTimeline = forwardRef(({ timeOrigin, pixelsPerSecond = 30, showNowMarker = true, nowMs: nowMsProp, density: _density = SF_AI_TIMELINE_DEFAULT_VARIANTS.density, className, children, ...props }, ref) => {
+	const nowMs = nowMsProp ?? Date.now();
+	const origin = timeOrigin ?? nowMs;
+	const pxPerMs = pixelsPerSecond / 1e3;
+	const totalDurationMs = nowMs - origin;
+	const totalWidth = Math.max(400, totalDurationMs * pxPerMs + 120);
+	const nowX = totalDurationMs * pxPerMs;
+	const ticks = useMemo(() => generateTicks(origin, nowMs, pxPerMs, totalWidth), [
+		origin,
+		Math.floor(nowMs / 2e3),
+		pxPerMs,
+		totalWidth
+	]);
+	const scrollRef = useRef(null);
+	const scrollToNow = useCallback(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		const targetScroll = LABEL_WIDTH + nowX - el.clientWidth * .85;
+		el.scrollLeft = Math.max(0, targetScroll);
+	}, [nowX]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative overflow-hidden rounded-lg border border-sf-line bg-sf-base", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: { minWidth: LABEL_WIDTH + totalWidth },
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex border-b border-sf-line",
+					style: { height: TIME_AXIS_HEIGHT },
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "shrink-0 border-r border-sf-line bg-sf-elevated px-3",
+						style: { width: LABEL_WIDTH },
+						children: /* @__PURE__ */ jsx("span", {
+							className: "text-[10px] font-medium uppercase tracking-wider text-sf-subtle",
+							children: "Time"
+						})
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative flex-1 bg-sf-recessed",
+						style: { minWidth: totalWidth },
+						children: [ticks.map((tick) => /* @__PURE__ */ jsxs("div", {
+							className: "absolute top-0 flex flex-col items-center",
+							style: { left: tick.x },
+							children: [/* @__PURE__ */ jsx("div", { className: "h-2 w-px bg-sf-line" }), /* @__PURE__ */ jsxs("span", {
+								className: "mt-0.5 font-mono text-[9px] text-sf-inactive",
+								children: ["+", tick.label]
+							})]
+						}, tick.x)), showNowMarker && /* @__PURE__ */ jsxs("div", {
+							className: "absolute top-0 flex flex-col items-center",
+							style: { left: nowX },
+							children: [/* @__PURE__ */ jsx("div", { className: "h-2 w-px bg-sf-brand" }), /* @__PURE__ */ jsx("span", {
+								className: "mt-0.5 font-mono text-[9px] font-medium text-sf-brand",
+								children: "now"
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "pointer-events-none absolute inset-0 ml-[128px]",
+						children: [ticks.map((tick) => /* @__PURE__ */ jsx("div", {
+							className: "absolute top-0 h-full w-px bg-sf-line/50",
+							style: { left: tick.x }
+						}, `grid-${tick.x}`)), showNowMarker && /* @__PURE__ */ jsx("div", {
+							className: "absolute top-0 h-full w-px bg-sf-brand/30",
+							style: { left: nowX }
+						})]
+					}), children]
+				})]
+			})
+		}), showNowMarker && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Scroll to now",
+			onClick: scrollToNow,
+			className: cn("absolute right-2 top-1 rounded px-1.5 py-0.5 text-[9px] font-medium", "bg-sf-brand/10 text-sf-brand hover:bg-sf-brand/20 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring"),
+			children: "→ now"
+		})]
+	});
+});
+AiTimeline.displayName = "AiTimeline";
+//#endregion
+export { SF_AI_TIMELINE_VARIANTS as i, AiTimelineLane as n, SF_AI_TIMELINE_DEFAULT_VARIANTS as r, AiTimeline as t };
+
+//# sourceMappingURL=ai-timeline-Bb5ntsr3.js.map

package/dist/ai-timeline-Bb5ntsr3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-timeline-Bb5ntsr3.js","names":[],"sources":["../src/components/ai-timeline/ai-timeline.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  BrainIcon,\n  CaretDownIcon,\n  CheckCircleIcon,\n  CircleDashedIcon,\n  CodeIcon,\n  LightningIcon,\n  MagnifyingGlassIcon,\n  RobotIcon,\n  ShieldWarningIcon,\n  SpinnerGapIcon,\n  WrenchIcon,\n  XCircleIcon,\n} from \"@phosphor-icons/react\";\nimport type { ComponentProps, ElementType, ReactNode } from \"react\";\nimport { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const SF_AI_TIMELINE_VARIANTS = {\n  density: {\n    comfortable: { classes: \"\", description: \"Taller lanes with more padding\" },\n    compact: { classes: \"\", description: \"Tight lanes for dense views\" },\n  },\n} as const;\n\nexport const SF_AI_TIMELINE_DEFAULT_VARIANTS = {\n  density: \"comfortable\",\n} as const;\n\nexport type SFAiTimelineDensity = keyof typeof SF_AI_TIMELINE_VARIANTS.density;\n\n// ─── Block types ─────────────────────────────────────────────────────────────\n\n/** Visual type of a timeline block — controls color and icon. */\nexport type AiTimelineBlockType =\n  | \"running\" // brand blue — agent actively generating\n  | \"tool_call\" // amber — executing a tool\n  | \"waiting\" // gray — idle/blocked\n  | \"approval\" // purple — waiting for human approval\n  | \"completed\" // green — successfully finished\n  | \"error\"; // red — failed\n\n/** A colored segment on a lane representing a period of activity. */\nexport interface AiTimelineBlock {\n  /** Unique ID for this block. */\n  id: string;\n  /** Visual type (controls color). */\n  type: AiTimelineBlockType;\n  /** Wall-clock ms when this activity started. */\n  startMs: number;\n  /**\n   * Wall-clock ms when this activity ended.\n   * Undefined means still active — the block extends to \"now\".\n   */\n  endMs?: number;\n  /** Short label shown inside the block when space allows. */\n  label?: string;\n  /** Longer description shown in the expanded detail panel. */\n  description?: string;\n  /** Extra detail content shown when the block is expanded. */\n  detail?: ReactNode;\n}\n\n// ─── Lane props ───────────────────────────────────────────────────────────────\n\nexport type AiTimelineLaneProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /** Lane label (agent name). */\n  label: string;\n  /** Agent type string for icon selection. */\n  agentType?: string;\n  /** Model ID shown as a subtle badge. */\n  modelId?: string;\n  /** Current lane status — controls the label icon. */\n  status?: \"idle\" | \"running\" | \"completed\" | \"error\";\n  /** Ordered activity blocks for this lane. */\n  blocks: AiTimelineBlock[];\n  /** Timeline origin (ms) — same as AiTimeline timeOrigin. */\n  timeOrigin: number;\n  /** Current \"now\" timestamp (ms) for live blocks. */\n  nowMs: number;\n  /** Pixels per millisecond (zoom level). */\n  pxPerMs: number;\n  /** Whether the lane is expanded to show block details. */\n  defaultExpanded?: boolean;\n  /** Callback when a block is clicked. */\n  onBlockClick?: (block: AiTimelineBlock) => void;\n  /** Custom icon override. */\n  icon?: ElementType;\n  /** Lane height variant. */\n  density?: SFAiTimelineDensity;\n};\n\n// ─── Timeline props ───────────────────────────────────────────────────────────\n\nexport type AiTimelineProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /**\n   * Wall-clock ms for the timeline origin (t=0).\n   * Defaults to the startMs of the first block across all lanes.\n   */\n  timeOrigin?: number;\n  /**\n   * Pixels per second of elapsed time.\n   * Controls horizontal zoom level.\n   * @default 30\n   */\n  pixelsPerSecond?: number;\n  /**\n   * Whether to show a pulsing \"now\" marker at the live edge.\n   * @default true\n   */\n  showNowMarker?: boolean;\n  /**\n   * Current timestamp in ms. Used to render the \"now\" marker and open-ended\n   * block widths. Pass a stable `useState` value to prevent hydration shifts.\n   * When omitted, `Date.now()` is called at render time (fine for live views\n   * driven by a ticking parent, not suitable for SSR).\n   */\n  nowMs?: number;\n  /** Lane density variant. @default \"comfortable\" */\n  density?: SFAiTimelineDensity;\n  /** Children should be `AiTimelineLane` components. */\n  children?: ReactNode;\n};\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nconst AGENT_ICONS: Record<string, ElementType> = {\n  explore: MagnifyingGlassIcon,\n  search: MagnifyingGlassIcon,\n  execute: CodeIcon,\n  code: CodeIcon,\n  plan: BrainIcon,\n  think: BrainIcon,\n  tool: WrenchIcon,\n  build: WrenchIcon,\n  main: LightningIcon,\n};\n\nfunction getAgentIcon(\n  agentType?: string,\n  customIcon?: ElementType\n): ElementType {\n  if (customIcon) return customIcon;\n  if (agentType) {\n    const lower = agentType.toLowerCase();\n    for (const [key, icon] of Object.entries(AGENT_ICONS)) {\n      if (lower.includes(key)) return icon;\n    }\n  }\n  return RobotIcon;\n}\n\nfunction getModelShort(modelId?: string) {\n  if (!modelId) return \"\";\n  return (\n    modelId\n      .split(\"/\")\n      .pop()\n      ?.replace(/^claude-/, \"\")\n      .replace(/-\\d+$/, \"\") ?? \"\"\n  );\n}\n\nfunction formatMs(ms: number) {\n  const s = Math.round(ms / 100) / 10;\n  if (s < 60) return `${s}s`;\n  return `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`;\n}\n\n// Block colors — all semantic SF tokens, no raw Tailwind colors\nconst BLOCK_COLORS: Record<AiTimelineBlockType, string> = {\n  running: \"bg-sf-brand text-sf-inverse\",\n  tool_call: \"bg-sf-warning text-sf-inverse\",\n  waiting: \"bg-sf-fill text-sf-subtle\",\n  approval: \"bg-sf-info text-sf-inverse\",\n  completed: \"bg-sf-brand/60 text-sf-inverse\",\n  error: \"bg-sf-danger text-sf-inverse\",\n};\n\n// Hover is a uniform subtle brightness lift — no per-type color shifting\nconst BLOCK_HOVER = \"hover:brightness-110 hover:shadow-sm\";\n\nfunction BlockIcon({ type }: { type: AiTimelineBlockType }) {\n  switch (type) {\n    case \"running\":\n      return <SpinnerGapIcon size={8} className=\"animate-spin\" />;\n    case \"tool_call\":\n      return <WrenchIcon size={8} />;\n    case \"approval\":\n      return <ShieldWarningIcon size={8} />;\n    case \"completed\":\n      return <CheckCircleIcon size={8} />;\n    case \"error\":\n      return <XCircleIcon size={8} />;\n    default:\n      return <CircleDashedIcon size={8} />;\n  }\n}\n\n// ─── AiTimelineBlock (rendered) ───────────────────────────────────────────────\n\nfunction TimelineBlockSegment({\n  block,\n  timeOrigin,\n  nowMs,\n  pxPerMs,\n  laneHeight,\n  onBlockClick,\n  rowIndex = 0,\n  rowCount = 1,\n}: {\n  block: AiTimelineBlock;\n  timeOrigin: number;\n  nowMs: number;\n  pxPerMs: number;\n  laneHeight: number;\n  onBlockClick?: (block: AiTimelineBlock) => void;\n  rowIndex?: number;\n  rowCount?: number;\n}) {\n  const left = Math.max(0, (block.startMs - timeOrigin) * pxPerMs);\n  const end = block.endMs ?? nowMs;\n  const width = Math.max(4, (end - block.startMs) * pxPerMs);\n  const durationMs = end - block.startMs;\n\n  const MIN_LABEL_PX = 40;\n  // Short blocks get sharp corners to avoid weird rounded look when overlaid\n  const isShort = width < 20;\n  const roundedClass = isShort\n    ? \"rounded-none\"\n    : width < 40\n      ? \"rounded-sm\"\n      : \"rounded-md\";\n\n  // Calculate vertical position for overlapping blocks\n  // Blocks that overlap in time stack vertically, centered within the lane\n  const blockHeight = laneHeight - 8;\n  const innerPadding = 2;\n  const availableHeight = blockHeight - innerPadding * 2;\n  const rowHeight = availableHeight / rowCount;\n  const topOffset = innerPadding + rowIndex * rowHeight;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={block.label ?? block.type}\n      title={block.description ?? block.label}\n      onClick={onBlockClick ? () => onBlockClick(block) : undefined}\n      className={cn(\n        \"group absolute transition-[width] duration-150\",\n        roundedClass,\n        BLOCK_COLORS[block.type],\n        onBlockClick ? BLOCK_HOVER : \"cursor-default\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring\",\n        \"flex items-center gap-1 overflow-hidden px-1.5\"\n      )}\n      style={{\n        left,\n        width,\n        height: rowHeight - 1,\n        top: topOffset,\n      }}\n    >\n      <BlockIcon type={block.type} />\n      {width >= MIN_LABEL_PX && block.label && (\n        <span className=\"truncate text-[9px] font-medium leading-none\">\n          {block.label}\n        </span>\n      )}\n      {width >= MIN_LABEL_PX && (\n        <span className=\"ml-auto shrink-0 text-[8px] opacity-70\">\n          {formatMs(durationMs)}\n        </span>\n      )}\n    </button>\n  );\n}\n\n/**\n * Calculate row assignments for blocks to avoid overlap.\n * Returns arrays of blocks grouped by row, where no blocks in a row overlap in time.\n */\nfunction computeBlockRows(blocks: AiTimelineBlock[]): AiTimelineBlock[][] {\n  if (blocks.length === 0) return [];\n\n  // Sort blocks by start time\n  const sorted = [...blocks].sort((a, b) => a.startMs - b.startMs);\n  const rows: AiTimelineBlock[][] = [];\n\n  for (const block of sorted) {\n    // Find the first row where this block doesn't overlap with any existing block\n    let placed = false;\n    for (const row of rows) {\n      const overlaps = row.some(\n        (existing) =>\n          block.startMs < (existing.endMs ?? Infinity) &&\n          (block.endMs ?? Infinity) > existing.startMs\n      );\n      if (!overlaps) {\n        row.push(block);\n        placed = true;\n        break;\n      }\n    }\n    if (!placed) {\n      // Start a new row\n      rows.push([block]);\n    }\n  }\n\n  return rows;\n}\n\n// ─── AiTimelineLane ───────────────────────────────────────────────────────────\n\nconst LANE_HEIGHT_COMFORTABLE = 40;\nconst LANE_HEIGHT_COMPACT = 28;\nconst LABEL_WIDTH = 128;\n\n/**\n * `AiTimelineLane` — a single horizontal swim lane within an `AiTimeline`.\n *\n * Shows one agent's activity as colored blocks on a time axis. Blocks\n * represent periods of activity: running, tool calls, waiting, etc.\n *\n * Consumed by `AiTimeline` — pass lanes as children.\n */\nexport const AiTimelineLane = forwardRef<HTMLDivElement, AiTimelineLaneProps>(\n  (\n    {\n      label,\n      agentType,\n      modelId,\n      status = \"idle\",\n      blocks,\n      timeOrigin,\n      nowMs,\n      pxPerMs,\n      defaultExpanded = false,\n      onBlockClick,\n      icon,\n      density = \"comfortable\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [expanded, setExpanded] = useState(defaultExpanded);\n    const Icon = getAgentIcon(agentType, icon);\n    const modelShort = getModelShort(modelId);\n\n    // Compute block rows to handle overlapping blocks\n    const blockRows = useMemo(() => computeBlockRows(blocks), [blocks]);\n    const rowCount = blockRows.length;\n\n    // Lane height scales with number of rows for overlapping blocks\n    const baseLaneH =\n      density === \"compact\" ? LANE_HEIGHT_COMPACT : LANE_HEIGHT_COMFORTABLE;\n    const laneH = rowCount > 1 ? baseLaneH * rowCount : baseLaneH;\n\n    // Total timeline width needed for this lane\n    const maxEnd = useMemo(() => {\n      if (!blocks.length) return timeOrigin;\n      return Math.max(...blocks.map((b) => b.endMs ?? nowMs));\n    }, [blocks, timeOrigin, nowMs]);\n\n    const totalWidth = Math.max(0, (maxEnd - timeOrigin) * pxPerMs);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"border-b border-sf-line last:border-b-0\", className)}\n        {...props}\n      >\n        {/* Lane row */}\n        <div className=\"flex\" style={{ height: laneH }}>\n          {/* Label sidebar */}\n          <div\n            className=\"flex shrink-0 items-center gap-2 border-r border-sf-line bg-sf-base px-3\"\n            style={{ width: LABEL_WIDTH }}\n          >\n            {/* Expand toggle (only when there are expandable blocks) */}\n            {blocks.some((b) => b.detail) && (\n              <button\n                type=\"button\"\n                aria-label={expanded ? \"Collapse lane\" : \"Expand lane\"}\n                onClick={() => setExpanded((v) => !v)}\n                className=\"shrink-0 text-sf-subtle hover:text-sf-default focus-visible:outline-none\"\n              >\n                <CaretDownIcon\n                  size={10}\n                  className={cn(\n                    \"transition-transform\",\n                    expanded && \"rotate-180\"\n                  )}\n                />\n              </button>\n            )}\n\n            {/* Agent icon */}\n            <div\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded\",\n                density === \"compact\" ? \"size-5\" : \"size-6\",\n                status === \"running\"\n                  ? \"text-sf-brand\"\n                  : status === \"completed\"\n                    ? \"text-sf-success\"\n                    : status === \"error\"\n                      ? \"text-sf-danger\"\n                      : \"text-sf-subtle\"\n              )}\n            >\n              {status === \"running\" ? (\n                <SpinnerGapIcon\n                  size={density === \"compact\" ? 12 : 14}\n                  className=\"animate-spin\"\n                />\n              ) : (\n                <Icon size={density === \"compact\" ? 12 : 14} />\n              )}\n            </div>\n\n            {/* Name + model */}\n            <div className=\"min-w-0 flex-1\">\n              <div\n                className={cn(\n                  \"truncate font-medium text-sf-default\",\n                  density === \"compact\" ? \"text-[10px]\" : \"text-xs\"\n                )}\n              >\n                {label}\n              </div>\n              {modelShort && density === \"comfortable\" && (\n                <div className=\"truncate font-mono text-[9px] text-sf-inactive\">\n                  {modelShort}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Blocks area */}\n          <div\n            className=\"relative flex-1 overflow-hidden\"\n            style={{ minWidth: totalWidth }}\n          >\n            {blockRows.map((row, rowIndex) =>\n              row.map((block) => (\n                <TimelineBlockSegment\n                  key={block.id}\n                  block={block}\n                  timeOrigin={timeOrigin}\n                  nowMs={nowMs}\n                  pxPerMs={pxPerMs}\n                  laneHeight={laneH}\n                  onBlockClick={onBlockClick}\n                  rowIndex={rowIndex}\n                  rowCount={rowCount}\n                />\n              ))\n            )}\n          </div>\n        </div>\n\n        {/* Expanded detail rows */}\n        {expanded &&\n          blocks\n            .filter((b) => b.detail)\n            .map((block) => (\n              <div\n                key={`detail-${block.id}`}\n                className=\"ml-[128px] border-t border-sf-line/50 bg-sf-recessed px-3 py-2\"\n              >\n                <div className=\"mb-1 flex items-center gap-1.5\">\n                  <span\n                    className={cn(\n                      \"size-1.5 rounded-full\",\n                      BLOCK_COLORS[block.type].split(\" \")[0]\n                    )}\n                  />\n                  <span className=\"text-[10px] font-medium text-sf-strong\">\n                    {block.label ?? block.type}\n                  </span>\n                  {block.endMs && (\n                    <span className=\"text-[10px] text-sf-subtle\">\n                      {formatMs(block.endMs - block.startMs)}\n                    </span>\n                  )}\n                </div>\n                <div className=\"text-xs text-sf-subtle\">{block.detail}</div>\n              </div>\n            ))}\n      </div>\n    );\n  }\n);\n\nAiTimelineLane.displayName = \"AiTimelineLane\";\n\n// ─── AiTimeline ───────────────────────────────────────────────────────────────\n\nconst TIME_AXIS_HEIGHT = 24;\n\n/** Format elapsed time for tick labels — shows seconds with 1 decimal when under 1 minute */\nfunction formatElapsed(ms: number): string {\n  if (ms < 60_000) {\n    const s = Math.round(ms / 100) / 10;\n    return `${s.toFixed(s % 1 === 0 ? 0 : 1)}s`;\n  }\n  const m = Math.floor(ms / 60_000);\n  const s = Math.round((ms % 60_000) / 1000);\n  return s > 0 ? `${m}m ${s}s` : `${m}m`;\n}\n\n/** Generate time axis tick marks spaced appropriately for the zoom level. */\nfunction generateTicks(\n  originMs: number,\n  nowMs: number,\n  pxPerMs: number,\n  totalWidth: number\n): Array<{ label: string; sublabel?: string; x: number }> {\n  const durationMs = nowMs - originMs;\n  const tickIntervalMs = (() => {\n    const pxPerSec = pxPerMs * 1000;\n    if (pxPerSec >= 100) return 1000; // 1s ticks\n    if (pxPerSec >= 30) return 5000; // 5s ticks\n    if (pxPerSec >= 10) return 10_000; // 10s ticks\n    if (pxPerSec >= 5) return 30_000; // 30s ticks\n    return 60_000; // 1min ticks\n  })();\n\n  const ticks: Array<{ label: string; sublabel?: string; x: number }> = [];\n  const firstTick = Math.ceil(originMs / tickIntervalMs) * tickIntervalMs;\n\n  for (let t = firstTick; t <= originMs + durationMs; t += tickIntervalMs) {\n    const elapsed = t - originMs;\n    const x = elapsed * pxPerMs;\n    if (x > totalWidth) break;\n    const label = formatElapsed(elapsed);\n    ticks.push({ label, x });\n  }\n  return ticks;\n}\n\n/**\n * `AiTimeline` — horizontal swim-lane timeline for commander-level orchestration.\n *\n * Displays multiple `AiTimelineLane` children on a shared time axis. Supports\n * live updating (a \"now\" marker follows the live edge), panning, and zoom via\n * `pixelsPerSecond`.\n *\n * @example\n * ```tsx\n * <AiTimeline\n *   timeOrigin={state.missionStartedAt}\n *   pixelsPerSecond={30}\n *   showNowMarker\n * >\n *   <AiTimelineLane\n *     label=\"Main\"\n *     blocks={mainLaneBlocks}\n *     timeOrigin={timeOrigin}\n *     nowMs={Date.now()}\n *     pxPerMs={pxPerMs}\n *   />\n *   <AiTimelineLane label=\"Explore\" blocks={exploreBlocks} ... />\n * </AiTimeline>\n * ```\n */\nexport const AiTimeline = forwardRef<HTMLDivElement, AiTimelineProps>(\n  (\n    {\n      timeOrigin,\n      pixelsPerSecond = 30,\n      showNowMarker = true,\n      nowMs: nowMsProp,\n      density: _density = SF_AI_TIMELINE_DEFAULT_VARIANTS.density,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Use the provided stable nowMs, or fall back to Date.now().\n    // For SSR-safe demos, always pass a stable useState value as nowMs.\n    const nowMs = nowMsProp ?? Date.now();\n    const origin = timeOrigin ?? nowMs;\n    const pxPerMs = pixelsPerSecond / 1000;\n    const totalDurationMs = nowMs - origin;\n    const totalWidth = Math.max(400, totalDurationMs * pxPerMs + 120);\n    const nowX = totalDurationMs * pxPerMs;\n\n    const ticks = useMemo(\n      () => generateTicks(origin, nowMs, pxPerMs, totalWidth),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [origin, Math.floor(nowMs / 2000), pxPerMs, totalWidth]\n    );\n\n    const scrollRef = useRef<HTMLDivElement>(null);\n\n    // Scroll to keep the now-marker in view\n    const scrollToNow = useCallback(() => {\n      const el = scrollRef.current;\n      if (!el) return;\n      const targetScroll = LABEL_WIDTH + nowX - el.clientWidth * 0.85;\n      el.scrollLeft = Math.max(0, targetScroll);\n    }, [nowX]);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative overflow-hidden rounded-lg border border-sf-line bg-sf-base\",\n          className\n        )}\n        {...props}\n      >\n        {/* Scrollable horizontal container */}\n        <div ref={scrollRef} className=\"overflow-x-auto\">\n          <div style={{ minWidth: LABEL_WIDTH + totalWidth }}>\n            {/* Time axis */}\n            <div\n              className=\"flex border-b border-sf-line\"\n              style={{ height: TIME_AXIS_HEIGHT }}\n            >\n              {/* Label column spacer */}\n              <div\n                className=\"shrink-0 border-r border-sf-line bg-sf-elevated px-3\"\n                style={{ width: LABEL_WIDTH }}\n              >\n                <span className=\"text-[10px] font-medium uppercase tracking-wider text-sf-subtle\">\n                  Time\n                </span>\n              </div>\n              {/* Axis ticks */}\n              <div\n                className=\"relative flex-1 bg-sf-recessed\"\n                style={{ minWidth: totalWidth }}\n              >\n                {ticks.map((tick) => (\n                  <div\n                    key={tick.x}\n                    className=\"absolute top-0 flex flex-col items-center\"\n                    style={{ left: tick.x }}\n                  >\n                    <div className=\"h-2 w-px bg-sf-line\" />\n                    <span className=\"mt-0.5 font-mono text-[9px] text-sf-inactive\">\n                      +{tick.label}\n                    </span>\n                  </div>\n                ))}\n\n                {/* Now marker line */}\n                {showNowMarker && (\n                  <div\n                    className=\"absolute top-0 flex flex-col items-center\"\n                    style={{ left: nowX }}\n                  >\n                    <div className=\"h-2 w-px bg-sf-brand\" />\n                    <span className=\"mt-0.5 font-mono text-[9px] font-medium text-sf-brand\">\n                      now\n                    </span>\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Lanes — pass timeOrigin/nowMs/pxPerMs via context-like clone or expect them as props */}\n            <div className=\"relative\">\n              {/* Vertical grid lines at tick positions */}\n              <div className=\"pointer-events-none absolute inset-0 ml-[128px]\">\n                {ticks.map((tick) => (\n                  <div\n                    key={`grid-${tick.x}`}\n                    className=\"absolute top-0 h-full w-px bg-sf-line/50\"\n                    style={{ left: tick.x }}\n                  />\n                ))}\n                {/* Now marker vertical line */}\n                {showNowMarker && (\n                  <div\n                    className=\"absolute top-0 h-full w-px bg-sf-brand/30\"\n                    style={{ left: nowX }}\n                  />\n                )}\n              </div>\n\n              {children}\n            </div>\n          </div>\n        </div>\n\n        {/* Scroll-to-now button */}\n        {showNowMarker && (\n          <button\n            type=\"button\"\n            aria-label=\"Scroll to now\"\n            onClick={scrollToNow}\n            className={cn(\n              \"absolute right-2 top-1 rounded px-1.5 py-0.5 text-[9px] font-medium\",\n              \"bg-sf-brand/10 text-sf-brand hover:bg-sf-brand/20 transition-colors\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sf-ring\"\n            )}\n          >\n            → now\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAiTimeline.displayName = \"AiTimeline\";\n"],"mappings":"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"}