@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/preview/AiPreviewPanel.js

@@ -1,191 +1,232 @@
-import { useBigConsoleNavigate as e } from "../../context/BigConsoleContext.js";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { useBigConsoleNavigate as t } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
-import { PREVIEW_STEPS as t, useAssistantRunStore as n } from "../../assistant/assistantRunStore.js";
-import { StepRail as r, formatAgo as i, useAssistantSidebarWidth as a } from "./previewShared.js";
-import { DashboardContent as o, DataSinkContent as s, ParserContent as c, WidgetsContent as l } from "./AiPreviewContent.js";
-import { useEffect as u, useState as d } from "react";
-import { ArrowUpRight as f, Loader2 as p, Sparkles as m, X as h } from "lucide-react";
-import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Button as _, Tabs as v, TabsContent as y, TabsList as b, TabsTrigger as x } from "@burdenoff/fe-libs/ui";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { PREVIEW_STEPS as n, useAssistantRunStore as r } from "../../assistant/assistantRunStore.js";
+import { PREVIEW_CHROME_DIVIDER as i, PREVIEW_PANEL_SHELL as a, StepRail as o, formatAgo as s, useAssistantSidebarWidth as c } from "./previewShared.js";
+import { DashboardContent as l, DataSinkContent as u, ParserContent as d, WidgetsContent as f } from "./AiPreviewContent.js";
+import { useEffect as p, useState as m } from "react";
+import { AlertCircle as h, ArrowUpRight as g, Loader2 as _, Sparkles as v, X as y } from "lucide-react";
+import { useI18n as b } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as x, Tabs as S, TabsContent as C, TabsList as w, TabsTrigger as T } from "@burdenoff/fe-libs/ui";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/AiPreviewPanel.tsx
-function w({ label: e, onOpen: t }) {
-	let { t: n } = g();
-	return /* @__PURE__ */ C("div", {
-		className: "mb-2 flex items-center justify-between gap-2",
-		children: [/* @__PURE__ */ S("span", {
-			className: "text-xs font-semibold uppercase tracking-wide text-text-muted",
-			children: e
-		}), t ? /* @__PURE__ */ C(_, {
-			size: "sm",
-			variant: "outline",
-			onClick: t,
-			"data-testid": "ai-preview-open-entity",
-			children: [n("bigconsole.widget.aiPreview.open", "Open"), /* @__PURE__ */ S(f, { className: "ml-1 size-3.5" })]
-		}) : null]
+function O({ onOpen: e }) {
+	let { t } = b();
+	return /* @__PURE__ */ D(x, {
+		size: "sm",
+		variant: "outline",
+		onClick: e,
+		"data-testid": "ai-preview-open-entity",
+		children: [t("bigconsole.widget.aiPreview.open", "Open"), /* @__PURE__ */ E(g, { className: "ml-1 size-3.5" })]
 	});
 }
-function T() {
-	let { t: f } = g(), T = e(), E = n((e) => e.isRunning), D = n((e) => e.previewOpen), O = n((e) => e.hasRun), k = n((e) => e.steps), A = n((e) => e.entityIds), j = n((e) => e.caption), M = n((e) => e.error), N = n((e) => e.updatedAt), P = n((e) => e.openPreview), F = n((e) => e.closePreview), I = n((e) => e.setRichMounted);
-	u(() => (I(!0), () => I(!1)), [I]);
-	let [L, R] = d("datasink"), [z, B] = d(() => Date.now()), V = A.dashboard;
-	u(() => {
-		if (!E) return;
-		let e = window.setInterval(() => B(Date.now()), 1e3);
+function k() {
+	let { t: g } = b(), k = t(), A = r((e) => e.isRunning), j = r((e) => e.previewOpen), M = r((e) => e.hasRun), N = r((e) => e.steps), P = r((e) => e.entityIds), F = r((e) => e.caption), I = r((e) => e.error), L = r((e) => e.updatedAt), R = r((e) => e.openPreview), z = r((e) => e.closePreview), B = r((e) => e.setRichMounted);
+	p(() => (B(!0), () => B(!1)), [B]);
+	let [V, H] = m("datasink"), [U, W] = m(() => Date.now()), G = P.dashboard;
+	p(() => {
+		if (!A) return;
+		let e = window.setInterval(() => W(Date.now()), 1e3);
 		return () => window.clearInterval(e);
-	}, [E]), u(() => {
-		let e = t.filter((e) => k[e] === "done"), n = e[e.length - 1];
-		if (n) {
-			R(n);
+	}, [A]), p(() => {
+		let e = n.filter((e) => N[e] === "done"), t = e[e.length - 1];
+		if (t) {
+			H(t);
 			return;
 		}
-		let r = t.find((e) => k[e] === "running");
-		r && R(r);
-	}, [k]);
-	let H = N ? Math.max(0, Math.floor((z - N) / 1e3)) : 0, U = a();
-	return O ? D ? /* @__PURE__ */ C("section", {
+		let r = n.find((e) => N[e] === "running");
+		r && H(r);
+	}, [N]);
+	let K = L ? Math.max(0, Math.floor((U - L) / 1e3)) : 0, q = c();
+	return M ? j ? /* @__PURE__ */ D("section", {
 		"data-testid": "ai-preview-panel",
-		"aria-label": f("bigconsole.widget.aiPreview.ariaLabel", "AI preview"),
-		style: { marginRight: U ? U + 16 : void 0 },
-		className: "mx-4 mt-3 overflow-hidden rounded-lg border border-border-default bg-bg-sunken shadow-sm md:mx-6",
+		"aria-label": g("bigconsole.widget.aiPreview.ariaLabel", "AI preview"),
+		style: { marginRight: q ? q + 16 : void 0 },
+		className: `${a} mx-4 mt-3 md:mx-6`,
 		children: [
-			/* @__PURE__ */ C("div", {
-				className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-bg-surface px-3 py-2",
-				children: [/* @__PURE__ */ C("div", {
-					className: "flex min-w-0 items-center gap-2",
-					children: [
-						/* @__PURE__ */ S(m, { className: "size-4 shrink-0 text-action-primary-bg" }),
-						/* @__PURE__ */ S("h2", {
-							className: "truncate text-sm font-semibold text-text-primary",
-							children: f("bigconsole.widget.aiPreview.title", "AI Preview")
-						}),
-						E ? /* @__PURE__ */ C("span", {
-							className: "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text",
-							"data-testid": "ai-preview-live",
-							children: [/* @__PURE__ */ C("span", {
-								className: "relative flex size-2",
-								children: [/* @__PURE__ */ S("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75" }), /* @__PURE__ */ S("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
-							}), f("bigconsole.widget.aiPreview.live", "Live")]
-						}) : null,
-						/* @__PURE__ */ C("span", {
-							className: "truncate text-xs text-text-muted",
-							"data-testid": "ai-preview-ago",
-							children: [
-								E ? j || f("bigconsole.widget.aiPreview.working", "Working…") : M ? f("bigconsole.widget.aiPreview.stopped", "Stopped") : f("bigconsole.widget.aiPreview.done", "Done"),
-								" ",
-								"· ",
-								f("bigconsole.widget.aiPreview.updated", "updated"),
-								" ",
-								i(H)
-							]
-						})
-					]
-				}), /* @__PURE__ */ S(_, {
+			/* @__PURE__ */ D("div", {
+				className: `flex items-start justify-between gap-control-gap bg-bg-surface px-3 py-2 ${i}`,
+				children: [/* @__PURE__ */ D("div", {
+					className: "flex min-w-0 flex-col gap-0.5",
+					children: [/* @__PURE__ */ D("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ E(v, { className: "size-4 shrink-0 text-action-primary-bg" }),
+							/* @__PURE__ */ E("h2", {
+								className: "text-sm font-semibold text-text-primary",
+								children: g("bigconsole.widget.aiPreview.title", "AI Preview")
+							}),
+							A ? /* @__PURE__ */ D("span", {
+								className: "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text",
+								"data-testid": "ai-preview-live",
+								children: [/* @__PURE__ */ D("span", {
+									className: "relative flex size-2",
+									children: [/* @__PURE__ */ E("span", { className: "absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping" }), /* @__PURE__ */ E("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
+								}), g("bigconsole.widget.aiPreview.live", "Live")]
+							}) : null
+						]
+					}), /* @__PURE__ */ D("span", {
+						className: "min-w-0 break-words text-xs text-text-muted",
+						"data-testid": "ai-preview-ago",
+						children: [
+							A ? F || g("bigconsole.widget.aiPreview.working", "Working…") : I ? g("bigconsole.widget.aiPreview.stopped", "Stopped") : g("bigconsole.widget.aiPreview.done", "Done"),
+							" ",
+							"· ",
+							g("bigconsole.widget.aiPreview.updated", "updated"),
+							" ",
+							s(K)
+						]
+					})]
+				}), /* @__PURE__ */ E(x, {
 					size: "sm",
 					variant: "ghost",
-					onClick: F,
-					"aria-label": f("bigconsole.widget.aiPreview.closeAriaLabel", "Close preview"),
+					onClick: z,
+					"aria-label": g("bigconsole.widget.aiPreview.closeAriaLabel", "Close preview"),
 					"data-testid": "ai-preview-close",
-					children: /* @__PURE__ */ S(h, { className: "size-4" })
+					children: /* @__PURE__ */ E(y, { className: "size-4" })
 				})]
 			}),
-			/* @__PURE__ */ S("div", {
-				className: "border-b border-border-subtle px-3 py-2",
-				children: /* @__PURE__ */ S(r, { steps: k })
+			/* @__PURE__ */ D("div", {
+				className: `px-3 py-2 ${i}`,
+				children: [/* @__PURE__ */ E("h3", {
+					className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-text-muted",
+					children: "Build progress"
+				}), /* @__PURE__ */ E(o, { steps: N })]
 			}),
-			/* @__PURE__ */ C(v, {
-				value: L,
-				onValueChange: (e) => R(e),
-				children: [/* @__PURE__ */ C(b, {
-					className: "mx-3 mt-2",
+			/* @__PURE__ */ D(S, {
+				value: V,
+				onValueChange: (e) => H(e),
+				children: [/* @__PURE__ */ E("div", {
+					className: "min-w-0 overflow-x-auto px-3 pt-2",
+					children: /* @__PURE__ */ D(w, {
+						className: "w-max",
+						children: [
+							/* @__PURE__ */ E(T, {
+								value: "datasink",
+								"data-testid": "ai-preview-tab-datasink",
+								children: g("bigconsole.widget.aiPreview.tab.dataSink", "Data Sink")
+							}),
+							/* @__PURE__ */ E(T, {
+								value: "dashboard",
+								"data-testid": "ai-preview-tab-dashboard",
+								children: g("bigconsole.widget.aiPreview.tab.dashboard", "Dashboard")
+							}),
+							/* @__PURE__ */ E(T, {
+								value: "parser",
+								"data-testid": "ai-preview-tab-parser",
+								children: g("bigconsole.widget.aiPreview.tab.parser", "Parser")
+							}),
+							/* @__PURE__ */ E(T, {
+								value: "widget",
+								"data-testid": "ai-preview-tab-widget",
+								children: g("bigconsole.widget.aiPreview.tab.widget", "Widget")
+							})
+						]
+					})
+				}), /* @__PURE__ */ D("div", {
+					className: "min-w-0 overflow-y-auto p-3",
+					style: { maxHeight: "min(440px, 60vh)" },
 					children: [
-						/* @__PURE__ */ S(x, {
+						/* @__PURE__ */ E(C, {
 							value: "datasink",
-							"data-testid": "ai-preview-tab-datasink",
-							children: f("bigconsole.widget.aiPreview.tab.dataSink", "Data Sink")
+							children: /* @__PURE__ */ E(e, {
+								emphasis: "standard",
+								padding: "compact",
+								headingLevel: 3,
+								title: "Data sink rows",
+								description: "The rows the assistant just landed, straight from the sink.",
+								actions: P.datasink ? /* @__PURE__ */ E(O, { onOpen: () => k(`/datasinks/${P.datasink ?? ""}`) }) : void 0,
+								children: /* @__PURE__ */ E(u, {
+									id: P.datasink,
+									live: A
+								})
+							})
 						}),
-						/* @__PURE__ */ S(x, {
+						/* @__PURE__ */ E(C, {
 							value: "dashboard",
-							"data-testid": "ai-preview-tab-dashboard",
-							children: f("bigconsole.widget.aiPreview.tab.dashboard", "Dashboard")
+							children: /* @__PURE__ */ E(e, {
+								emphasis: "standard",
+								padding: "compact",
+								headingLevel: 3,
+								title: g("bigconsole.widget.aiPreview.tab.dashboard", "Dashboard"),
+								description: "The live board, rendered exactly as the real page renders it.",
+								actions: P.dashboard ? /* @__PURE__ */ E(O, { onOpen: () => k(`/dashboards/${P.dashboard ?? ""}`) }) : void 0,
+								children: /* @__PURE__ */ E(l, { dashboardId: P.dashboard })
+							})
 						}),
-						/* @__PURE__ */ S(x, {
+						/* @__PURE__ */ E(C, {
 							value: "parser",
-							"data-testid": "ai-preview-tab-parser",
-							children: f("bigconsole.widget.aiPreview.tab.parser", "Parser")
+							children: /* @__PURE__ */ E(e, {
+								emphasis: "standard",
+								padding: "compact",
+								headingLevel: 3,
+								title: "Parser output",
+								description: "The rows after the parser's transform, so you can check the shape.",
+								actions: P.parser ? /* @__PURE__ */ E(O, { onOpen: () => k(`/parsers/${P.parser ?? ""}`) }) : void 0,
+								children: /* @__PURE__ */ E(d, {
+									parserId: P.parser,
+									live: A
+								})
+							})
 						}),
-						/* @__PURE__ */ S(x, {
+						/* @__PURE__ */ E(C, {
 							value: "widget",
-							"data-testid": "ai-preview-tab-widget",
-							children: f("bigconsole.widget.aiPreview.tab.widget", "Widget")
-						})
-					]
-				}), /* @__PURE__ */ C("div", {
-					className: "max-h-[440px] overflow-y-auto p-3",
-					children: [
-						/* @__PURE__ */ C(y, {
-							value: "datasink",
-							children: [/* @__PURE__ */ S(w, {
-								label: f("bigconsole.widget.aiPreview.tab.dataSink", "Data Sink"),
-								onOpen: A.datasink ? () => T(`/datasinks/${A.datasink}`) : void 0
-							}), /* @__PURE__ */ S(s, {
-								id: A.datasink,
-								live: E
-							})]
-						}),
-						/* @__PURE__ */ C(y, {
-							value: "dashboard",
-							children: [/* @__PURE__ */ S(w, {
-								label: f("bigconsole.widget.aiPreview.tab.dashboard", "Dashboard"),
-								onOpen: A.dashboard ? () => T(`/dashboards/${A.dashboard}`) : void 0
-							}), /* @__PURE__ */ S(o, { dashboardId: A.dashboard })]
-						}),
-						/* @__PURE__ */ C(y, {
-							value: "parser",
-							children: [/* @__PURE__ */ S(w, {
-								label: f("bigconsole.widget.aiPreview.tab.parser", "Parser"),
-								onOpen: A.parser ? () => T(`/parsers/${A.parser}`) : void 0
-							}), /* @__PURE__ */ S(c, {
-								parserId: A.parser,
-								live: E
-							})]
-						}),
-						/* @__PURE__ */ C(y, {
-							value: "widget",
-							children: [/* @__PURE__ */ S(w, {
-								label: f("bigconsole.widget.aiPreview.tab.widget", "Widget"),
-								onOpen: V ? () => T(`/dashboards/${V}`) : void 0
-							}), /* @__PURE__ */ S(l, {
-								dashboardId: V,
-								live: E
-							})]
+							children: /* @__PURE__ */ E(e, {
+								emphasis: "standard",
+								padding: "compact",
+								headingLevel: 3,
+								title: "Widgets",
+								description: "Every widget on the new dashboard, rendered live.",
+								actions: G ? /* @__PURE__ */ E(O, { onOpen: () => k(`/dashboards/${G}`) }) : void 0,
+								children: /* @__PURE__ */ E(f, {
+									dashboardId: G,
+									live: A
+								})
+							})
 						})
 					]
 				})]
 			}),
-			M ? /* @__PURE__ */ S("p", {
-				className: "border-t border-border-subtle px-3 py-2 text-xs text-status-error-text",
-				"data-testid": "ai-preview-error",
-				children: M
+			I ? /* @__PURE__ */ D("div", {
+				role: "alert",
+				className: "border-t border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] px-3 py-2",
+				children: [/* @__PURE__ */ E("h3", {
+					className: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-status-error-text)]",
+					children: "Build stopped"
+				}), /* @__PURE__ */ D("p", {
+					className: "mt-0.5 flex items-start gap-icon-gap text-xs text-[var(--color-status-error-text)]",
+					"data-testid": "ai-preview-error",
+					children: [/* @__PURE__ */ E(h, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ E("span", {
+						className: "min-w-0 break-words",
+						children: I
+					})]
+				})]
 			}) : null
 		]
-	}) : /* @__PURE__ */ S("div", {
-		className: "flex justify-end px-4 pt-3 md:px-6",
-		style: { marginRight: U },
-		children: /* @__PURE__ */ C(_, {
+	}) : /* @__PURE__ */ D("div", {
+		className: "flex flex-wrap items-center justify-end gap-control-gap px-4 pt-3 md:px-6",
+		style: { marginRight: q },
+		children: [/* @__PURE__ */ E("span", {
+			className: "text-xs text-text-muted",
+			children: A ? "AI build running" : "AI build finished"
+		}), /* @__PURE__ */ D(x, {
 			size: "sm",
 			variant: "outline",
-			onClick: P,
+			onClick: R,
 			"data-testid": "ai-preview-open",
 			children: [
-				/* @__PURE__ */ S(m, { className: "mr-1.5 size-4" }),
-				f("bigconsole.widget.aiPreview.previewButton", "Preview"),
-				E ? /* @__PURE__ */ S(p, { className: "ml-1.5 size-3.5 animate-spin" }) : null
+				/* @__PURE__ */ E(v, { className: "mr-1.5 size-4" }),
+				g("bigconsole.widget.aiPreview.previewButton", "Preview"),
+				A ? /* @__PURE__ */ E(_, { className: "ml-1.5 size-3.5 animate-spin" }) : null
 			]
-		})
+		})]
 	}) : null;
 }
 //#endregion
-export { T as default };
+export { k as default };
 
 //# sourceMappingURL=AiPreviewPanel.js.map

package/dist/bigconsole/components/preview/AiPreviewPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. The tab auto-switches to whatever step is\n * being worked on, and each tab has an \"Open\" button (top-right) that jumps to\n * the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n */\nimport { useEffect, useState } from 'react';\nimport { Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, type PreviewStepKey, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { StepRail, formatAgo, useAssistantSidebarWidth } from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/** A tab's top bar: what this tab is, plus a jump-to-the-real-page button. */\nfunction TabHeader({ label, onOpen }: { label: string; onOpen?: () => void }) {\n  const { t } = useI18n();\n  return (\n    <div className=\"mb-2 flex items-center justify-between gap-2\">\n      <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">{label}</span>\n      {onOpen ? (\n        <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n          {t('bigconsole.widget.aiPreview.open', 'Open')}\n          <ArrowUpRight className=\"ml-1 size-3.5\" />\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function AiPreviewPanel() {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n\n  const isRunning = useAssistantRunStore((state) => state.isRunning);\n  const previewOpen = useAssistantRunStore((state) => state.previewOpen);\n  const hasRun = useAssistantRunStore((state) => state.hasRun);\n  const steps = useAssistantRunStore((state) => state.steps);\n  const entityIds = useAssistantRunStore((state) => state.entityIds);\n  const caption = useAssistantRunStore((state) => state.caption);\n  const error = useAssistantRunStore((state) => state.error);\n  const updatedAt = useAssistantRunStore((state) => state.updatedAt);\n  const openPreview = useAssistantRunStore((state) => state.openPreview);\n  const closePreview = useAssistantRunStore((state) => state.closePreview);\n  const setRichMounted = useAssistantRunStore((state) => state.setRichMounted);\n\n  // Tell the app-shell mini panel to stand down while this full panel is on a\n  // /bigconsole page. On unmount (e.g. navigating to /workflows mid-run) this\n  // flips false and the mini panel takes over so the build stays visible.\n  useEffect(() => {\n    setRichMounted(true);\n    return () => setRichMounted(false);\n  }, [setRichMounted]);\n\n  const [tab, setTab] = useState<PreviewStepKey>('datasink');\n  const [now, setNow] = useState(() => Date.now());\n\n  const dashboardId = entityIds.dashboard;\n\n  // Tick the \"updated Xs ago\" label while a turn is live.\n  useEffect(() => {\n    if (!isRunning) return;\n    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(intervalId);\n  }, [isRunning]);\n\n  // Follow the build by showing the LATEST thing that actually landed — so the\n  // moment the data sink is created you see its rows, not an empty \"waiting for\n  // the dashboard\" tab. (The rail still shows the spinner on the next step.) If\n  // nothing has landed yet, sit on whatever is being worked on.\n  useEffect(() => {\n    const done = PREVIEW_STEPS.filter((key) => steps[key] === 'done');\n    const latestDone = done[done.length - 1];\n    if (latestDone) {\n      setTab(latestDone);\n      return;\n    }\n    const running = PREVIEW_STEPS.find((key) => steps[key] === 'running');\n    if (running) setTab(running);\n  }, [steps]);\n\n  const agoSeconds = updatedAt ? Math.max(0, Math.floor((now - updatedAt) / 1000)) : 0;\n\n  // Keep clear of the assistant.\n  //\n  // The assistant sidebar is `position: fixed` — it OVERLAYS the page instead of\n  // reflowing it. A panel that spans the full content width therefore runs\n  // underneath it, and everything in that overlapped strip (tabs, Open buttons)\n  // silently stops taking clicks. Measure the real element rather than hardcoding\n  // 560px: the widget is responsive, and it can be closed mid-run.\n  const assistantWidth = useAssistantSidebarWidth();\n\n  if (!hasRun) return null;\n\n  if (!previewOpen) {\n    return (\n      <div className=\"flex justify-end px-4 pt-3 md:px-6\" style={{ marginRight: assistantWidth }}>\n        <Button size=\"sm\" variant=\"outline\" onClick={openPreview} data-testid=\"ai-preview-open\">\n          <Sparkles className=\"mr-1.5 size-4\" />\n          {t('bigconsole.widget.aiPreview.previewButton', 'Preview')}\n          {isRunning ? <Loader2 className=\"ml-1.5 size-3.5 animate-spin\" /> : null}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <section\n      data-testid=\"ai-preview-panel\"\n      aria-label={t('bigconsole.widget.aiPreview.ariaLabel', 'AI preview')}\n      style={{ marginRight: assistantWidth ? assistantWidth + 16 : undefined }}\n      className=\"mx-4 mt-3 overflow-hidden rounded-lg border border-border-default bg-bg-sunken shadow-sm md:mx-6\"\n    >\n      {/* Header + live strip */}\n      <div className=\"flex items-center justify-between gap-3 border-b border-border-subtle bg-bg-surface px-3 py-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <Sparkles className=\"size-4 shrink-0 text-action-primary-bg\" />\n          <h2 className=\"truncate text-sm font-semibold text-text-primary\">\n            {t('bigconsole.widget.aiPreview.title', 'AI Preview')}\n          </h2>\n          {isRunning ? (\n            <span\n              className=\"inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text\"\n              data-testid=\"ai-preview-live\"\n            >\n              <span className=\"relative flex size-2\">\n                <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75\" />\n                <span className=\"relative inline-flex size-2 rounded-full bg-status-success-text\" />\n              </span>\n              {t('bigconsole.widget.aiPreview.live', 'Live')}\n            </span>\n          ) : null}\n          <span className=\"truncate text-xs text-text-muted\" data-testid=\"ai-preview-ago\">\n            {isRunning\n              ? caption\n                ? caption\n                : t('bigconsole.widget.aiPreview.working', 'Working…')\n              : error\n                ? t('bigconsole.widget.aiPreview.stopped', 'Stopped')\n                : t('bigconsole.widget.aiPreview.done', 'Done')}{' '}\n            · {t('bigconsole.widget.aiPreview.updated', 'updated')} {formatAgo(agoSeconds)}\n          </span>\n        </div>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={closePreview}\n          aria-label={t('bigconsole.widget.aiPreview.closeAriaLabel', 'Close preview')}\n          data-testid=\"ai-preview-close\"\n        >\n          <X className=\"size-4\" />\n        </Button>\n      </div>\n\n      {/* Step rail */}\n      <div className=\"border-b border-border-subtle px-3 py-2\">\n        <StepRail steps={steps} />\n      </div>\n\n      {/* Tabs — each shows the real content of the built entity */}\n      <Tabs value={tab} onValueChange={(value) => setTab(value as PreviewStepKey)}>\n        <TabsList className=\"mx-3 mt-2\">\n          <TabsTrigger value=\"datasink\" data-testid=\"ai-preview-tab-datasink\">\n            {t('bigconsole.widget.aiPreview.tab.dataSink', 'Data Sink')}\n          </TabsTrigger>\n          <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n            {t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n          </TabsTrigger>\n          <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n            {t('bigconsole.widget.aiPreview.tab.parser', 'Parser')}\n          </TabsTrigger>\n          <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n            {t('bigconsole.widget.aiPreview.tab.widget', 'Widget')}\n          </TabsTrigger>\n        </TabsList>\n\n        <div className=\"max-h-[440px] overflow-y-auto p-3\">\n          <TabsContent value=\"datasink\">\n            <TabHeader\n              label={t('bigconsole.widget.aiPreview.tab.dataSink', 'Data Sink')}\n              onOpen={entityIds.datasink ? () => navigate(`/datasinks/${entityIds.datasink}`) : undefined}\n            />\n            <DataSinkContent id={entityIds.datasink} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\">\n            <TabHeader\n              label={t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n              onOpen={entityIds.dashboard ? () => navigate(`/dashboards/${entityIds.dashboard}`) : undefined}\n            />\n            <DashboardContent dashboardId={entityIds.dashboard} />\n          </TabsContent>\n\n          <TabsContent value=\"parser\">\n            <TabHeader\n              label={t('bigconsole.widget.aiPreview.tab.parser', 'Parser')}\n              onOpen={entityIds.parser ? () => navigate(`/parsers/${entityIds.parser}`) : undefined}\n            />\n            <ParserContent parserId={entityIds.parser} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"widget\">\n            <TabHeader\n              label={t('bigconsole.widget.aiPreview.tab.widget', 'Widget')}\n              onOpen={dashboardId ? () => navigate(`/dashboards/${dashboardId}`) : undefined}\n            />\n            <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n          </TabsContent>\n        </div>\n      </Tabs>\n\n      {error ? (\n        <p\n          className=\"border-t border-border-subtle px-3 py-2 text-xs text-status-error-text\"\n          data-testid=\"ai-preview-error\"\n        >\n          {error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nexport default AiPreviewPanel;\n"],"mappings":"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"}
+{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. The tab auto-switches to whatever step is\n * being worked on, and each tab has an \"Open\" button that jumps to the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n *\n * Section emphasis (BOFF-5639): the panel is a recessed shell (chrome, progress\n * and tabs sit on `bg-bg-sunken`) wrapped around ONE raised result surface — the\n * live entity for the selected tab. That keeps the built thing the loudest part\n * of the panel without adding a second page-level `primary` on every route the\n * panel is injected into.\n */\nimport { useEffect, useState } from 'react';\nimport { Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AlertCircle, ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, type PreviewStepKey, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { Section } from '../common';\nimport {\n  PREVIEW_CHROME_DIVIDER,\n  PREVIEW_PANEL_SHELL,\n  StepRail,\n  formatAgo,\n  useAssistantSidebarWidth,\n} from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/** Jump-to-the-real-page button, shared by all four tabs. */\nfunction OpenEntityButton({ onOpen }: { onOpen: () => void }) {\n  const { t } = useI18n();\n  return (\n    <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n      {t('bigconsole.widget.aiPreview.open', 'Open')}\n      <ArrowUpRight className=\"ml-1 size-3.5\" />\n    </Button>\n  );\n}\n\nexport function AiPreviewPanel() {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n\n  const isRunning = useAssistantRunStore((state) => state.isRunning);\n  const previewOpen = useAssistantRunStore((state) => state.previewOpen);\n  const hasRun = useAssistantRunStore((state) => state.hasRun);\n  const steps = useAssistantRunStore((state) => state.steps);\n  const entityIds = useAssistantRunStore((state) => state.entityIds);\n  const caption = useAssistantRunStore((state) => state.caption);\n  const error = useAssistantRunStore((state) => state.error);\n  const updatedAt = useAssistantRunStore((state) => state.updatedAt);\n  const openPreview = useAssistantRunStore((state) => state.openPreview);\n  const closePreview = useAssistantRunStore((state) => state.closePreview);\n  const setRichMounted = useAssistantRunStore((state) => state.setRichMounted);\n\n  // Tell the app-shell mini panel to stand down while this full panel is on a\n  // /bigconsole page. On unmount (e.g. navigating to /workflows mid-run) this\n  // flips false and the mini panel takes over so the build stays visible.\n  useEffect(() => {\n    setRichMounted(true);\n    return () => setRichMounted(false);\n  }, [setRichMounted]);\n\n  const [tab, setTab] = useState<PreviewStepKey>('datasink');\n  const [now, setNow] = useState(() => Date.now());\n\n  const dashboardId = entityIds.dashboard;\n\n  // Tick the \"updated Xs ago\" label while a turn is live.\n  useEffect(() => {\n    if (!isRunning) return;\n    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(intervalId);\n  }, [isRunning]);\n\n  // Follow the build by showing the LATEST thing that actually landed — so the\n  // moment the data sink is created you see its rows, not an empty \"waiting for\n  // the dashboard\" tab. (The rail still shows the spinner on the next step.) If\n  // nothing has landed yet, sit on whatever is being worked on.\n  useEffect(() => {\n    const done = PREVIEW_STEPS.filter((key) => steps[key] === 'done');\n    const latestDone = done[done.length - 1];\n    if (latestDone) {\n      setTab(latestDone);\n      return;\n    }\n    const running = PREVIEW_STEPS.find((key) => steps[key] === 'running');\n    if (running) setTab(running);\n  }, [steps]);\n\n  const agoSeconds = updatedAt ? Math.max(0, Math.floor((now - updatedAt) / 1000)) : 0;\n\n  // Keep clear of the assistant.\n  //\n  // The assistant sidebar is `position: fixed` — it OVERLAYS the page instead of\n  // reflowing it. A panel that spans the full content width therefore runs\n  // underneath it, and everything in that overlapped strip (tabs, Open buttons)\n  // silently stops taking clicks. Measure the real element rather than hardcoding\n  // 560px: the widget is responsive, and it can be closed mid-run.\n  const assistantWidth = useAssistantSidebarWidth();\n\n  if (!hasRun) return null;\n\n  if (!previewOpen) {\n    return (\n      <div\n        className=\"flex flex-wrap items-center justify-end gap-control-gap px-4 pt-3 md:px-6\"\n        style={{ marginRight: assistantWidth }}\n      >\n        {/* The lone button gave no clue what it belonged to. */}\n        <span className=\"text-xs text-text-muted\">{isRunning ? 'AI build running' : 'AI build finished'}</span>\n        <Button size=\"sm\" variant=\"outline\" onClick={openPreview} data-testid=\"ai-preview-open\">\n          <Sparkles className=\"mr-1.5 size-4\" />\n          {t('bigconsole.widget.aiPreview.previewButton', 'Preview')}\n          {isRunning ? <Loader2 className=\"ml-1.5 size-3.5 animate-spin\" /> : null}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <section\n      data-testid=\"ai-preview-panel\"\n      aria-label={t('bigconsole.widget.aiPreview.ariaLabel', 'AI preview')}\n      style={{ marginRight: assistantWidth ? assistantWidth + 16 : undefined }}\n      className={`${PREVIEW_PANEL_SHELL} mx-4 mt-3 md:mx-6`}\n    >\n      {/* Header + live strip. Title/badge on the first line, the caption on its\n          own line: it is the most useful string during a run and it used to be\n          the first thing to truncate away. */}\n      <div\n        className={`flex items-start justify-between gap-control-gap bg-bg-surface px-3 py-2 ${PREVIEW_CHROME_DIVIDER}`}\n      >\n        <div className=\"flex min-w-0 flex-col gap-0.5\">\n          <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n            <Sparkles className=\"size-4 shrink-0 text-action-primary-bg\" />\n            <h2 className=\"text-sm font-semibold text-text-primary\">\n              {t('bigconsole.widget.aiPreview.title', 'AI Preview')}\n            </h2>\n            {isRunning ? (\n              <span\n                className=\"inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text\"\n                data-testid=\"ai-preview-live\"\n              >\n                <span className=\"relative flex size-2\">\n                  <span className=\"absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping\" />\n                  <span className=\"relative inline-flex size-2 rounded-full bg-status-success-text\" />\n                </span>\n                {t('bigconsole.widget.aiPreview.live', 'Live')}\n              </span>\n            ) : null}\n          </div>\n          <span className=\"min-w-0 break-words text-xs text-text-muted\" data-testid=\"ai-preview-ago\">\n            {isRunning\n              ? caption\n                ? caption\n                : t('bigconsole.widget.aiPreview.working', 'Working…')\n              : error\n                ? t('bigconsole.widget.aiPreview.stopped', 'Stopped')\n                : t('bigconsole.widget.aiPreview.done', 'Done')}{' '}\n            · {t('bigconsole.widget.aiPreview.updated', 'updated')} {formatAgo(agoSeconds)}\n          </span>\n        </div>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={closePreview}\n          aria-label={t('bigconsole.widget.aiPreview.closeAriaLabel', 'Close preview')}\n          data-testid=\"ai-preview-close\"\n        >\n          <X className=\"size-4\" />\n        </Button>\n      </div>\n\n      {/* Step rail — the panel's progress narrative, now a labelled block\n          instead of four unexplained pills. */}\n      <div className={`px-3 py-2 ${PREVIEW_CHROME_DIVIDER}`}>\n        <h3 className=\"mb-1 text-[11px] font-semibold uppercase tracking-wide text-text-muted\">Build progress</h3>\n        <StepRail steps={steps} />\n      </div>\n\n      {/* Tabs — each shows the real content of the built entity */}\n      <Tabs value={tab} onValueChange={(value) => setTab(value as PreviewStepKey)}>\n        {/* fe-libs TabsList is `w-fit inline-flex` with nowrap triggers and no\n            overflow handling, inside a panel that is `overflow-hidden` — below\n            ~430px the fourth tab was clipped instead of reachable. */}\n        <div className=\"min-w-0 overflow-x-auto px-3 pt-2\">\n          <TabsList className=\"w-max\">\n            <TabsTrigger value=\"datasink\" data-testid=\"ai-preview-tab-datasink\">\n              {t('bigconsole.widget.aiPreview.tab.dataSink', 'Data Sink')}\n            </TabsTrigger>\n            <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n              {t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n            </TabsTrigger>\n            <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n              {t('bigconsole.widget.aiPreview.tab.parser', 'Parser')}\n            </TabsTrigger>\n            <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n              {t('bigconsole.widget.aiPreview.tab.widget', 'Widget')}\n            </TabsTrigger>\n          </TabsList>\n        </div>\n\n        {/* The hard 440px cap ate most of the fold on a short laptop screen. */}\n        <div className=\"min-w-0 overflow-y-auto p-3\" style={{ maxHeight: 'min(440px, 60vh)' }}>\n          <TabsContent value=\"datasink\">\n            <Section\n              emphasis=\"standard\"\n              padding=\"compact\"\n              headingLevel={3}\n              title=\"Data sink rows\"\n              description=\"The rows the assistant just landed, straight from the sink.\"\n              actions={\n                entityIds.datasink ? (\n                  <OpenEntityButton onOpen={() => navigate(`/datasinks/${entityIds.datasink ?? ''}`)} />\n                ) : undefined\n              }\n            >\n              <DataSinkContent id={entityIds.datasink} live={isRunning} />\n            </Section>\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\">\n            <Section\n              emphasis=\"standard\"\n              padding=\"compact\"\n              headingLevel={3}\n              title={t('bigconsole.widget.aiPreview.tab.dashboard', 'Dashboard')}\n              description=\"The live board, rendered exactly as the real page renders it.\"\n              actions={\n                entityIds.dashboard ? (\n                  <OpenEntityButton onOpen={() => navigate(`/dashboards/${entityIds.dashboard ?? ''}`)} />\n                ) : undefined\n              }\n            >\n              <DashboardContent dashboardId={entityIds.dashboard} />\n            </Section>\n          </TabsContent>\n\n          <TabsContent value=\"parser\">\n            <Section\n              emphasis=\"standard\"\n              padding=\"compact\"\n              headingLevel={3}\n              title=\"Parser output\"\n              description=\"The rows after the parser's transform, so you can check the shape.\"\n              actions={\n                entityIds.parser ? (\n                  <OpenEntityButton onOpen={() => navigate(`/parsers/${entityIds.parser ?? ''}`)} />\n                ) : undefined\n              }\n            >\n              <ParserContent parserId={entityIds.parser} live={isRunning} />\n            </Section>\n          </TabsContent>\n\n          <TabsContent value=\"widget\">\n            <Section\n              emphasis=\"standard\"\n              padding=\"compact\"\n              headingLevel={3}\n              title=\"Widgets\"\n              description=\"Every widget on the new dashboard, rendered live.\"\n              actions={\n                dashboardId ? <OpenEntityButton onOpen={() => navigate(`/dashboards/${dashboardId}`)} /> : undefined\n              }\n            >\n              <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n            </Section>\n          </TabsContent>\n        </div>\n      </Tabs>\n\n      {/* A failed run used to be 12px red text in a bare footer — the quietest\n          treatment on the panel for its most important message. */}\n      {error ? (\n        <div\n          role=\"alert\"\n          className=\"border-t border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] px-3 py-2\"\n        >\n          <h3 className=\"text-[11px] font-semibold uppercase tracking-wide text-[var(--color-status-error-text)]\">\n            Build stopped\n          </h3>\n          <p\n            className=\"mt-0.5 flex items-start gap-icon-gap text-xs text-[var(--color-status-error-text)]\"\n            data-testid=\"ai-preview-error\"\n          >\n            <AlertCircle className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n            <span className=\"min-w-0 break-words\">{error}</span>\n          </p>\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\nexport default AiPreviewPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/preview/previewShared.js

@@ -1,39 +1,57 @@
-import { PREVIEW_STEPS as e, PREVIEW_STEP_LABEL as t } from "../../assistant/assistantRunStore.js";
-import { useEffect as n, useState as r } from "react";
-import { Check as i, ChevronRight as a, Loader2 as o, Minus as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { SECTION_MOTION as e } from "../common/sectionStyles.js";
+import "../common/index.js";
+import { PREVIEW_STEPS as t, PREVIEW_STEP_LABEL as n } from "../../assistant/assistantRunStore.js";
+import { useEffect as r, useState as i } from "react";
+import { Check as a, ChevronRight as o, Loader2 as s, Minus as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/previewShared.tsx
-function u({ status: e }) {
-	return e === "done" ? /* @__PURE__ */ c(i, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ c(o, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ c(s, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ c("span", { className: "size-1.5 rounded-full bg-border-strong" });
+var d = [
+	"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)]",
+	"bg-bg-sunken shadow-[var(--shadow-elevation-1)]",
+	e
+].join(" "), f = "border-b border-[var(--color-border-subtle)]";
+function p({ status: e }) {
+	return e === "done" ? /* @__PURE__ */ l(a, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ l(s, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ l(c, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ l("span", { className: "size-1.5 rounded-full bg-[var(--color-border-strong)]" });
 }
-function d({ steps: n }) {
-	return /* @__PURE__ */ c("div", {
-		className: "flex flex-wrap items-center gap-1",
+function m(e) {
+	let t = "inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs";
+	return e === "done" ? `${t} border-status-success-border bg-status-success-bg font-medium text-status-success-text` : e === "running" ? `${t} border-[var(--color-action-primary-bg)] bg-bg-surface font-semibold text-text-primary shadow-[var(--shadow-elevation-1)]` : `${t} border-[var(--color-border-subtle)] font-medium text-text-muted`;
+}
+function h({ steps: e }) {
+	return /* @__PURE__ */ l("div", {
+		role: "list",
+		className: "flex min-w-0 items-center gap-1 overflow-x-auto pb-0.5",
 		"data-testid": "ai-preview-step-rail",
-		children: e.map((r, i) => /* @__PURE__ */ l("div", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ l("span", {
+		"aria-label": "Build steps",
+		children: t.map((r, i) => /* @__PURE__ */ u("div", {
+			role: "listitem",
+			className: "flex shrink-0 items-center gap-1",
+			children: [/* @__PURE__ */ u("span", {
 				"data-testid": `ai-preview-step-${r}`,
-				"data-status": n[r],
-				className: ["inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium", n[r] === "done" ? "border-status-success-border bg-status-success-bg text-status-success-text" : n[r] === "running" ? "border-border-strong bg-bg-surface text-text-primary" : "border-border-default text-text-muted"].join(" "),
+				"data-status": e[r],
+				"aria-current": e[r] === "running" ? "step" : void 0,
+				className: m(e[r]),
 				children: [
-					/* @__PURE__ */ c(u, { status: n[r] }),
-					t[r],
-					n[r] === "skipped" ? /* @__PURE__ */ c("span", {
+					/* @__PURE__ */ l(p, { status: e[r] }),
+					n[r],
+					e[r] === "skipped" ? /* @__PURE__ */ l("span", {
 						className: "text-[10px]",
 						children: "skipped"
 					}) : null
 				]
-			}), i < e.length - 1 ? /* @__PURE__ */ c(a, { className: "size-3.5 text-text-muted" }) : null]
+			}), i < t.length - 1 ? /* @__PURE__ */ l(o, {
+				className: "size-3.5 shrink-0 text-text-muted",
+				"aria-hidden": "true"
+			}) : null]
 		}, r))
 	});
 }
-function f(e) {
+function g(e) {
 	return e < 5 ? "just now" : e < 60 ? `${String(e)}s ago` : `${String(Math.floor(e / 60))}m ago`;
 }
-function p() {
-	let [e, t] = r(0);
-	return n(() => {
+function _() {
+	let [e, t] = i(0);
+	return r(() => {
 		let e = () => {
 			let e = document.querySelector("[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]")?.getBoundingClientRect(), n = e && e.width < window.innerWidth * .75 ? Math.round(e.width) : 0;
 			t((e) => e === n ? e : n);
@@ -46,6 +64,6 @@ function p() {
 	}, []), e;
 }
 //#endregion
-export { d as StepRail, f as formatAgo, p as useAssistantSidebarWidth };
+export { f as PREVIEW_CHROME_DIVIDER, d as PREVIEW_PANEL_SHELL, h as StepRail, g as formatAgo, _ as useAssistantSidebarWidth };
 
 //# sourceMappingURL=previewShared.js.map

package/dist/bigconsole/components/preview/previewShared.js.map

@@ -1 +1 @@
-{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * Presentational bits shared by the two AI-preview surfaces:\n *   - AiPreviewPanel     — the full panel with live entity tabs, mounted inside\n *                          BigConsoleRoot (needs the BigConsole Apollo context).\n *   - AiPreviewMiniPanel — the lightweight, store-only panel mounted by the app\n *                          shell so the build stays visible on ANY page.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * store-shape + DOM, which is exactly why the mini panel can live in the app\n * shell without dragging the data layer along.\n */\nimport { useEffect, useState } from 'react';\nimport { Check, ChevronRight, Loader2, Minus } from 'lucide-react';\n\nimport {\n  PREVIEW_STEP_LABEL,\n  PREVIEW_STEPS,\n  type PreviewStepKey,\n  type PreviewStepStatus,\n} from '../../assistant/assistantRunStore';\n\nexport function StepPip({ status }: { status: PreviewStepStatus }) {\n  if (status === 'done') return <Check className=\"size-3.5 text-status-success-text\" />;\n  if (status === 'running') return <Loader2 className=\"size-3.5 animate-spin text-action-primary-bg\" />;\n  if (status === 'skipped') return <Minus className=\"size-3.5 text-text-muted\" />;\n  return <span className=\"size-1.5 rounded-full bg-border-strong\" />;\n}\n\nexport function StepRail({ steps }: { steps: Record<PreviewStepKey, PreviewStepStatus> }) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-1\" data-testid=\"ai-preview-step-rail\">\n      {PREVIEW_STEPS.map((key, index) => (\n        <div key={key} className=\"flex items-center gap-1\">\n          <span\n            data-testid={`ai-preview-step-${key}`}\n            data-status={steps[key]}\n            className={[\n              'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium',\n              steps[key] === 'done'\n                ? 'border-status-success-border bg-status-success-bg text-status-success-text'\n                : steps[key] === 'running'\n                  ? 'border-border-strong bg-bg-surface text-text-primary'\n                  : 'border-border-default text-text-muted',\n            ].join(' ')}\n          >\n            <StepPip status={steps[key]} />\n            {PREVIEW_STEP_LABEL[key]}\n            {steps[key] === 'skipped' ? <span className=\"text-[10px]\">skipped</span> : null}\n          </span>\n          {index < PREVIEW_STEPS.length - 1 ? <ChevronRight className=\"size-3.5 text-text-muted\" /> : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function formatAgo(seconds: number): string {\n  if (seconds < 5) return 'just now';\n  if (seconds < 60) return `${String(seconds)}s ago`;\n  return `${String(Math.floor(seconds / 60))}m ago`;\n}\n\n/**\n * Width of the assistant sidebar, or 0 when it is closed.\n *\n * Polled rather than subscribed: the widget lives in fe-libs, is mounted by the\n * app shell, and emits nothing when it opens or closes. Reading the DOM is the\n * only honest signal available, and it is cheap.\n */\nexport function useAssistantSidebarWidth(): number {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const measure = () => {\n      const el = document.querySelector('[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]');\n      const rect = el?.getBoundingClientRect();\n      // Below `sm` the sidebar is full-width; reserving that would leave no room\n      // for the preview at all, so on small screens let it stack underneath.\n      const next = rect && rect.width < window.innerWidth * 0.75 ? Math.round(rect.width) : 0;\n      setWidth((current) => (current === next ? current : next));\n    };\n    measure();\n    const intervalId = window.setInterval(measure, 500);\n    window.addEventListener('resize', measure);\n    return () => {\n      window.clearInterval(intervalId);\n      window.removeEventListener('resize', measure);\n    };\n  }, []);\n\n  return width;\n}\n"],"mappings":";;;;;AAqBA,SAAgB,EAAQ,EAAE,aAAyC;AAIjE,QAHI,MAAW,SAAe,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,GACjF,MAAW,YAAkB,kBAAC,GAAD,EAAS,WAAU,gDAAiD,CAAA,GACjG,MAAW,YAAkB,kBAAC,GAAD,EAAO,WAAU,4BAA6B,CAAA,GACxE,kBAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA;;AAGpE,SAAgB,EAAS,EAAE,YAA+D;AACxF,QACE,kBAAC,OAAD;EAAK,WAAU;EAAoC,eAAY;YAC5D,EAAc,KAAK,GAAK,MACvB,kBAAC,OAAD;GAAe,WAAU;aAAzB,CACE,kBAAC,QAAD;IACE,eAAa,mBAAmB;IAChC,eAAa,EAAM;IACnB,WAAW,CACT,wFACA,EAAM,OAAS,SACX,+EACA,EAAM,OAAS,YACb,yDACA,wCACP,CAAC,KAAK,IAAI;cAVb;KAYE,kBAAC,GAAD,EAAS,QAAQ,EAAM,IAAQ,CAAA;KAC9B,EAAmB;KACnB,EAAM,OAAS,YAAY,kBAAC,QAAD;MAAM,WAAU;gBAAc;MAAc,CAAA,GAAG;KACtE;OACN,IAAQ,EAAc,SAAS,IAAI,kBAAC,GAAD,EAAc,WAAU,4BAA6B,CAAA,GAAG,KACxF;KAlBI,EAkBJ,CACN;EACE,CAAA;;AAIV,SAAgB,EAAU,GAAyB;AAGjD,QAFI,IAAU,IAAU,aACpB,IAAU,KAAW,GAAG,OAAO,EAAQ,CAAC,SACrC,GAAG,OAAO,KAAK,MAAM,IAAU,GAAG,CAAC,CAAC;;AAU7C,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AAoBrC,QAlBA,QAAgB;EACd,IAAM,UAAgB;GAEpB,IAAM,IADK,SAAS,cAAc,qEAAiE,EAClF,uBAAuB,EAGlC,IAAO,KAAQ,EAAK,QAAQ,OAAO,aAAa,MAAO,KAAK,MAAM,EAAK,MAAM,GAAG;AACtF,MAAU,MAAa,MAAY,IAAO,IAAU,EAAM;;AAE5D,KAAS;EACT,IAAM,IAAa,OAAO,YAAY,GAAS,IAAI;AAEnD,SADA,OAAO,iBAAiB,UAAU,EAAQ,QAC7B;AAEX,GADA,OAAO,cAAc,EAAW,EAChC,OAAO,oBAAoB,UAAU,EAAQ;;IAE9C,EAAE,CAAC,EAEC"}
+{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * Presentational bits shared by the two AI-preview surfaces:\n *   - AiPreviewPanel     — the full panel with live entity tabs, mounted inside\n *                          BigConsoleRoot (needs the BigConsole Apollo context).\n *   - AiPreviewMiniPanel — the lightweight, store-only panel mounted by the app\n *                          shell so the build stays visible on ANY page.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * store-shape + DOM, which is exactly why the mini panel can live in the app\n * shell without dragging the data layer along.\n */\nimport { useEffect, useState } from 'react';\nimport { Check, ChevronRight, Loader2, Minus } from 'lucide-react';\n\nimport {\n  PREVIEW_STEP_LABEL,\n  PREVIEW_STEPS,\n  type PreviewStepKey,\n  type PreviewStepStatus,\n} from '../../assistant/assistantRunStore';\nimport { SECTION_MOTION } from '../common';\n\n/**\n * The panel shell, shared by both preview surfaces.\n *\n * `rounded-lg` + `border-border-default` used to make this a fourth surface\n * recipe in a product that otherwise uses `rounded-card` and the theme-aware\n * `--color-border-subtle` — and the plain `border-*` utilities are registered\n * as frozen light hex in this shell, so they do not follow dark mode. Both\n * panels now read the recipe from here, so they cannot drift apart.\n */\nexport const PREVIEW_PANEL_SHELL = [\n  'min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)]',\n  'bg-bg-sunken shadow-[var(--shadow-elevation-1)]',\n  SECTION_MOTION,\n].join(' ');\n\n/** Chrome strips (header, progress, tabs) share one recessed treatment. */\nexport const PREVIEW_CHROME_DIVIDER = 'border-b border-[var(--color-border-subtle)]';\n\nexport function StepPip({ status }: { status: PreviewStepStatus }) {\n  if (status === 'done') return <Check className=\"size-3.5 text-status-success-text\" />;\n  if (status === 'running') return <Loader2 className=\"size-3.5 animate-spin text-action-primary-bg\" />;\n  if (status === 'skipped') return <Minus className=\"size-3.5 text-text-muted\" />;\n  // `bg-border-strong` is registered as a frozen light hex in this shell, so the\n  // not-started pip stayed light grey in dark mode.\n  return <span className=\"size-1.5 rounded-full bg-[var(--color-border-strong)]\" />;\n}\n\n/**\n * Per-step chip treatment. The step you are ON has to out-rank a not-started\n * step at a glance — they used to differ only by border shade, which is the\n * weakest possible signal for the panel's only progress narrative.\n */\nfunction stepChipClasses(status: PreviewStepStatus): string {\n  // `rounded-full` rather than `rounded-pill`: this rail also renders inside the\n  // app shell's own Tailwind build, and `rounded-full` needs no token registry.\n  const base = 'inline-flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs';\n  if (status === 'done') {\n    return `${base} border-status-success-border bg-status-success-bg font-medium text-status-success-text`;\n  }\n  if (status === 'running') {\n    return `${base} border-[var(--color-action-primary-bg)] bg-bg-surface font-semibold text-text-primary shadow-[var(--shadow-elevation-1)]`;\n  }\n  return `${base} border-[var(--color-border-subtle)] font-medium text-text-muted`;\n}\n\nexport function StepRail({ steps }: { steps: Record<PreviewStepKey, PreviewStepStatus> }) {\n  return (\n    // One scrolling line rather than `flex-wrap`: wrapping left chevrons\n    // dangling at the end of a line, pointing at nothing.\n    //\n    // `role=\"list\"` is what makes the `aria-label` count: an aria-label on a\n    // role-less <div> is dropped by every screen reader, so the rail would have\n    // been announced as four unrelated strings.\n    <div\n      role=\"list\"\n      className=\"flex min-w-0 items-center gap-1 overflow-x-auto pb-0.5\"\n      data-testid=\"ai-preview-step-rail\"\n      aria-label=\"Build steps\"\n    >\n      {PREVIEW_STEPS.map((key, index) => (\n        <div key={key} role=\"listitem\" className=\"flex shrink-0 items-center gap-1\">\n          <span\n            data-testid={`ai-preview-step-${key}`}\n            data-status={steps[key]}\n            aria-current={steps[key] === 'running' ? 'step' : undefined}\n            className={stepChipClasses(steps[key])}\n          >\n            <StepPip status={steps[key]} />\n            {PREVIEW_STEP_LABEL[key]}\n            {steps[key] === 'skipped' ? <span className=\"text-[10px]\">skipped</span> : null}\n          </span>\n          {index < PREVIEW_STEPS.length - 1 ? (\n            <ChevronRight className=\"size-3.5 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function formatAgo(seconds: number): string {\n  if (seconds < 5) return 'just now';\n  if (seconds < 60) return `${String(seconds)}s ago`;\n  return `${String(Math.floor(seconds / 60))}m ago`;\n}\n\n/**\n * Width of the assistant sidebar, or 0 when it is closed.\n *\n * Polled rather than subscribed: the widget lives in fe-libs, is mounted by the\n * app shell, and emits nothing when it opens or closes. Reading the DOM is the\n * only honest signal available, and it is cheap.\n */\nexport function useAssistantSidebarWidth(): number {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const measure = () => {\n      const el = document.querySelector('[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]');\n      const rect = el?.getBoundingClientRect();\n      // Below `sm` the sidebar is full-width; reserving that would leave no room\n      // for the preview at all, so on small screens let it stack underneath.\n      const next = rect && rect.width < window.innerWidth * 0.75 ? Math.round(rect.width) : 0;\n      setWidth((current) => (current === next ? current : next));\n    };\n    measure();\n    const intervalId = window.setInterval(measure, 500);\n    window.addEventListener('resize', measure);\n    return () => {\n      window.clearInterval(intervalId);\n      window.removeEventListener('resize', measure);\n    };\n  }, []);\n\n  return width;\n}\n"],"mappings":";;;;;;;AA+BA,IAAa,IAAsB;CACjC;CACA;CACA;CACD,CAAC,KAAK,IAAI,EAGE,IAAyB;AAEtC,SAAgB,EAAQ,EAAE,aAAyC;AAMjE,QALI,MAAW,SAAe,kBAAC,GAAD,EAAO,WAAU,qCAAsC,CAAA,GACjF,MAAW,YAAkB,kBAAC,GAAD,EAAS,WAAU,gDAAiD,CAAA,GACjG,MAAW,YAAkB,kBAAC,GAAD,EAAO,WAAU,4BAA6B,CAAA,GAGxE,kBAAC,QAAD,EAAM,WAAU,yDAA0D,CAAA;;AAQnF,SAAS,EAAgB,GAAmC;CAG1D,IAAM,IAAO;AAOb,QANI,MAAW,SACN,GAAG,EAAK,2FAEb,MAAW,YACN,GAAG,EAAK,6HAEV,GAAG,EAAK;;AAGjB,SAAgB,EAAS,EAAE,YAA+D;AACxF,QAOE,kBAAC,OAAD;EACE,MAAK;EACL,WAAU;EACV,eAAY;EACZ,cAAW;YAEV,EAAc,KAAK,GAAK,MACvB,kBAAC,OAAD;GAAe,MAAK;GAAW,WAAU;aAAzC,CACE,kBAAC,QAAD;IACE,eAAa,mBAAmB;IAChC,eAAa,EAAM;IACnB,gBAAc,EAAM,OAAS,YAAY,SAAS,KAAA;IAClD,WAAW,EAAgB,EAAM,GAAK;cAJxC;KAME,kBAAC,GAAD,EAAS,QAAQ,EAAM,IAAQ,CAAA;KAC9B,EAAmB;KACnB,EAAM,OAAS,YAAY,kBAAC,QAAD;MAAM,WAAU;gBAAc;MAAc,CAAA,GAAG;KACtE;OACN,IAAQ,EAAc,SAAS,IAC9B,kBAAC,GAAD;IAAc,WAAU;IAAoC,eAAY;IAAS,CAAA,GAC/E,KACA;KAdI,EAcJ,CACN;EACE,CAAA;;AAIV,SAAgB,EAAU,GAAyB;AAGjD,QAFI,IAAU,IAAU,aACpB,IAAU,KAAW,GAAG,OAAO,EAAQ,CAAC,SACrC,GAAG,OAAO,KAAK,MAAM,IAAU,GAAG,CAAC,CAAC;;AAU7C,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AAoBrC,QAlBA,QAAgB;EACd,IAAM,UAAgB;GAEpB,IAAM,IADK,SAAS,cAAc,qEAAiE,EAClF,uBAAuB,EAGlC,IAAO,KAAQ,EAAK,QAAQ,OAAO,aAAa,MAAO,KAAK,MAAM,EAAK,MAAM,GAAG;AACtF,MAAU,MAAa,MAAY,IAAO,IAAU,EAAM;;AAE5D,KAAS;EACT,IAAM,IAAa,OAAO,YAAY,GAAS,IAAI;AAEnD,SADA,OAAO,iBAAiB,UAAU,EAAQ,QAC7B;AAEX,GADA,OAAO,cAAc,EAAW,EAChC,OAAO,oBAAoB,UAAU,EAAQ;;IAE9C,EAAE,CAAC,EAEC"}