@burdenoff/microfe-bigconsole 2026.716.4 → 2026.717.1

package/dist/bigconsole/BigConsoleRoot.js

@@ -7,10 +7,10 @@ import { BigConsoleRoutes as o } from "./BigConsoleRoutes.js";
 import { BigConsoleProvider as s } from "./context/BigConsoleContext.js";
 import "./context/index.js";
 import { BigConsoleQuotaProvider as c } from "./providers/BigConsoleQuotaProvider.js";
-import l from "./components/preview/AiPreviewPanel.js";
-import u from "./components/DrilldownModal.js";
-import d from "./hooks/useFilterUrlSync.js";
-import f from "./components/DrilldownDashboardRenderer.js";
+import l from "./hooks/useFilterUrlSync.js";
+import u from "./components/DrilldownDashboardRenderer.js";
+import d from "./components/preview/AiPreviewPanel.js";
+import f from "./components/DrilldownModal.js";
 import { useCallback as p, useEffect as m, useLayoutEffect as h, useRef as g, useState as _ } from "react";
 import { useSearchParams as v } from "react-router-dom";
 import { ErrorBoundary as y } from "@burdenoff/fe-libs/shared/components";
@@ -157,7 +157,7 @@ var F = i, I = r, L = a, R = /* @__PURE__ */ new Set(), z = (r) => {
 		r.productName
 	]);
 	let [X, Z] = v(), Q = e((e) => e.isOpen), $ = e((e) => e.closeModal);
-	d();
+	l();
 	let te = p(() => {
 		$();
 		let e = new URLSearchParams(X);
@@ -174,7 +174,7 @@ var F = i, I = r, L = a, R = /* @__PURE__ */ new Set(), z = (r) => {
 			return;
 		}
 		window.location.assign("/billing");
-	}, [B]), re = p((e, t) => /* @__PURE__ */ E(f, {
+	}, [B]), re = p((e, t) => /* @__PURE__ */ E(u, {
 		dashboardId: e,
 		params: t
 	}), []);
@@ -194,9 +194,9 @@ var F = i, I = r, L = a, R = /* @__PURE__ */ new Set(), z = (r) => {
 					children: /* @__PURE__ */ E(n, {
 						basePath: z,
 						children: /* @__PURE__ */ D(t, { children: [
-							/* @__PURE__ */ E(l, {}),
+							/* @__PURE__ */ E(d, {}),
 							/* @__PURE__ */ E(o, { ...r }),
-							Q && /* @__PURE__ */ E(u, {
+							Q && /* @__PURE__ */ E(f, {
 								onClose: te,
 								renderDashboard: re
 							})

package/dist/bigconsole/components/dashboard/DashboardCanvas.js

@@ -5,9 +5,9 @@ import { CrossFilterProvider as n } from "../../contexts/CrossFilterContext.js";
 import "../../contexts/index.js";
 import { useBigConsole as r } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
-import i from "../../hooks/useWidgetOperations.js";
-import { getWidgetDefinition as a } from "../widgets/WidgetRegistry.js";
-import o from "../../hooks/useWidgetCatalog.js";
+import { getWidgetDefinition as i } from "../widgets/WidgetRegistry.js";
+import a from "../../hooks/useWidgetCatalog.js";
+import o from "../../hooks/useWidgetOperations.js";
 import s from "../../hooks/useDashboardImageExport.js";
 import { useInstalledWidgets as c } from "../../hooks/useInstalledWidgets.js";
 import l from "./DashboardGrid.js";
@@ -32,14 +32,14 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 		apiGatewayUrl: P,
 		authToken: F,
 		enabled: M
-	}), { definitions: Ee } = o({
+	}), { definitions: Ee } = a({
 		workspaceId: N,
 		apiGatewayUrl: P,
 		authToken: F,
 		enabled: M
 	}), I = t((e) => e.zoomLevel), L = t((e) => e.sidebarCollapsed), R = t((e) => e.toggleSidebar), z = !L, B = t((e) => e.setGlobalFilterValues), De = p((e) => {
 		B(e);
-	}, [B]), { createWidget: V } = i(v, f, { skipFetch: !0 }), H = e((e) => e.widgets), U = ce(() => {
+	}, [B]), { createWidget: V } = o(v, f, { skipFetch: !0 }), H = e((e) => e.widgets), U = ce(() => {
 		let e = Array.from(H.values());
 		return v ? e.filter((e) => e.pageId === v) : e;
 	}, [H, v]), Oe = e((e) => e.selectedWidgetId), W = e((e) => e.selectWidget), G = e((e) => e.addWidget), K = e((e) => e.updateWidgetPosition), q = e((e) => e.configPanelOpen), ke = e((e) => e.closeConfigPanel);
@@ -68,14 +68,14 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 		W(e);
 	}, [W]), Y = p(async (e, t) => {
 		D(null);
-		let n = t?.definition || (e.type ? a(e.type) : null), r = {
+		let n = t?.definition || (e.type ? i(e.type) : null), r = {
 			width: n?.defaultSize?.width ?? 4,
 			height: n?.defaultSize?.height ?? 4
-		}, i;
-		if (t?.position) i = t.position;
+		}, a;
+		if (t?.position) a = t.position;
 		else {
 			let { x: e, y: t } = oe(U, r, { cols: 12 });
-			i = {
+			a = {
 				x: e,
 				y: t,
 				width: r.width,
@@ -93,7 +93,7 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 				renderer: e.renderer,
 				template: e.template,
 				config: e.config || {},
-				position: i,
+				position: a,
 				refreshInterval: e.refreshInterval ?? void 0,
 				dataSinkId: o.dataSinkId,
 				parserId: o.parserId
@@ -116,11 +116,11 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 			template: e.template,
 			refreshInterval: e.refreshInterval,
 			config: e.config || {},
-			position: i,
-			positionX: i.x,
-			positionY: i.y,
-			positionWidth: i.width,
-			positionHeight: i.height,
+			position: a,
+			positionX: a.x,
+			positionY: a.y,
+			positionWidth: a.width,
+			positionHeight: a.height,
 			dataSinkId: o.dataSinkId,
 			parserId: o.parserId,
 			translations: [],
@@ -146,19 +146,19 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 			if (!t) return;
 			let n = JSON.parse(t);
 			if (!n || typeof n != "object" || !("type" in n)) return;
-			let r = n, i = a(r.type), o = null;
+			let r = n, a = i(r.type), o = null;
 			r.defaultConfig && r.category && (o = {
-				...i,
-				name: r.name || i.name,
+				...a,
+				name: r.name || a.name,
 				category: r.category,
 				defaultConfig: r.defaultConfig,
-				defaultSize: r.defaultSize || i.defaultSize
+				defaultSize: r.defaultSize || a.defaultSize
 			});
 			let s = S.current?.getBoundingClientRect();
 			if (!s) return;
 			let c = {
-				width: i.defaultSize.width,
-				height: i.defaultSize.height
+				width: a.defaultSize.width,
+				height: a.defaultSize.height
 			}, { x: l, y: u } = ae(e.clientX, e.clientY, s, w, c, { cols: 12 }), d = {
 				x: l,
 				y: u,
@@ -167,8 +167,8 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 			};
 			Y({
 				type: r.type,
-				title: r.name || i.name,
-				config: r.defaultConfig || i.defaultConfig
+				title: r.name || a.name,
+				config: r.defaultConfig || a.defaultConfig
 			}, {
 				position: d,
 				definition: o
@@ -179,7 +179,7 @@ var v = f(function({ dashboardId: f, pageId: v, title: y, onPaste: le, onSave: u
 	}, [w, Y]), Pe = p((e) => {
 		e.preventDefault(), e.dataTransfer.dropEffect = "copy";
 	}, []), Fe = p((e, t) => {
-		let n = t || a(e);
+		let n = t || i(e);
 		Y({
 			type: e,
 			title: n.name,

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

@@ -0,0 +1,116 @@
+import e from "../datasink/DataSinkTableViewer.js";
+import t from "../../hooks/useWidgetOperations.js";
+import n from "../../hooks/useDataSinkOperations.js";
+import r from "../../hooks/useParserOperations.js";
+import i from "../widgets/WidgetWrapper.js";
+import a from "../DrilldownDashboardRenderer.js";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { Spinner as l } from "@burdenoff/fe-libs/ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/bigconsole/components/preview/AiPreviewContent.tsx
+var f = 4e3, p = 6e4;
+function m({ label: e }) {
+	return /* @__PURE__ */ d("div", {
+		className: "flex items-center gap-2 px-1 py-8 text-sm text-text-muted",
+		children: [/* @__PURE__ */ u(l, { className: "size-4" }), e]
+	});
+}
+function h({ text: e }) {
+	return /* @__PURE__ */ u("p", {
+		className: "px-1 py-8 text-sm text-text-muted",
+		children: e
+	});
+}
+function g(e, t, n) {
+	let [r, i] = c(null), [a, l] = c(!0), u = s(e);
+	return u.current = e, o(() => {
+		if (!t) {
+			l(!1);
+			return;
+		}
+		let e = !1, r = Date.now(), a = async () => {
+			let t = await u.current();
+			e || (t != null && i(t), l(!1));
+		};
+		a();
+		let o = window.setInterval(() => {
+			!n || Date.now() - r > p || typeof document < "u" && document.visibilityState !== "visible" || a();
+		}, f);
+		return () => {
+			e = !0, window.clearInterval(o);
+		};
+	}, [t, n]), {
+		data: r,
+		loading: a
+	};
+}
+function _({ id: t, live: r }) {
+	let { getDataSinkData: i } = n({ skipFetch: !0 }), { data: a, loading: o } = g(async () => {
+		let e = await i({ id: t }, { limit: 50 });
+		return e ? e.raw : null;
+	}, t, r);
+	return t ? o ? /* @__PURE__ */ u(m, { label: "Loading the data sink’s data…" }) : /* @__PURE__ */ u("div", {
+		"data-testid": "ai-preview-content-datasink",
+		children: /* @__PURE__ */ u(e, {
+			data: a,
+			maxHeight: "300px"
+		})
+	}) : /* @__PURE__ */ u(h, { text: "Waiting for the data sink to be created…" });
+}
+function v({ dashboardId: e }) {
+	return e ? /* @__PURE__ */ u("div", {
+		"data-testid": "ai-preview-content-dashboard",
+		className: "max-h-[340px] overflow-y-auto",
+		children: /* @__PURE__ */ u(a, {
+			dashboardId: e,
+			params: {}
+		})
+	}) : /* @__PURE__ */ u(h, { text: "Waiting for the dashboard to be created…" });
+}
+function y({ parserId: t, live: n }) {
+	let { executeParser: i } = r({ skipFetch: !0 }), { data: a, loading: o } = g(async () => {
+		let e = await i(t ?? "");
+		return e ? e.output : null;
+	}, t, n);
+	return t ? o ? /* @__PURE__ */ u(m, { label: "Running the parser…" }) : /* @__PURE__ */ d("div", {
+		"data-testid": "ai-preview-content-parser",
+		children: [/* @__PURE__ */ u("p", {
+			className: "mb-2 px-1 text-xs text-text-muted",
+			children: "Parser output (transformed rows):"
+		}), /* @__PURE__ */ u(e, {
+			data: a,
+			maxHeight: "280px"
+		})]
+	}) : /* @__PURE__ */ u(h, { text: "No parser in this build — the rows were already shaped." });
+}
+function b(e) {
+	let t = e.toUpperCase();
+	return t.includes("METRIC") || t.includes("KPI") || t.includes("CARD") || t.includes("STAT") ? 160 : t.includes("TABLE") || t.includes("LIST") ? 280 : 320;
+}
+function x({ dashboardId: e, live: n }) {
+	let { widgets: r, loading: a, refetch: c } = t(void 0, e, { skipFetch: !e }), l = s(c);
+	return l.current = c, o(() => {
+		if (!e) return;
+		let t = Date.now(), r = window.setInterval(() => {
+			!n || Date.now() - t > p || typeof document < "u" && document.visibilityState !== "visible" || l.current();
+		}, f);
+		return () => window.clearInterval(r);
+	}, [e, n]), e ? a && r.length === 0 ? /* @__PURE__ */ u(m, { label: "Loading widgets…" }) : r.length === 0 ? /* @__PURE__ */ u(h, { text: "No widgets on this dashboard yet." }) : /* @__PURE__ */ u("div", {
+		"data-testid": "ai-preview-content-widget",
+		className: "space-y-3",
+		children: r.map((e) => /* @__PURE__ */ u("div", {
+			className: "overflow-hidden rounded-md border border-border-subtle bg-bg-surface",
+			style: { height: b(e.type) },
+			children: /* @__PURE__ */ u(i, {
+				widget: e,
+				isLoading: !1,
+				error: null,
+				filterValues: {}
+			})
+		}, e.id))
+	}) : /* @__PURE__ */ u(h, { text: "Waiting for the dashboard — widgets live on it." });
+}
+//#endregion
+export { v as DashboardContent, _ as DataSinkContent, y as ParserContent, x as WidgetsContent };
+
+//# sourceMappingURL=AiPreviewContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AiPreviewContent.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewContent.tsx"],"sourcesContent":["/**\n * Live content renderers for the AI preview tabs.\n *\n * Each tab shows the REAL content of the entity the assistant just built —\n * the data sink's rows, the live dashboard, the parser's transformed output,\n * the rendered widget charts — not a list with an Open button. They reuse the\n * same components the real pages use (DataSinkTableViewer, DrilldownDashboard-\n * Renderer, WidgetWrapper) so what you see in the preview is what you get.\n *\n * These require Apollo + the BigConsole providers, which is why they live only\n * in the full AiPreviewPanel (mounted inside BigConsoleRoot), never in the\n * store-only app-shell mini panel.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\n\nimport { DataSinkTableViewer } from '../datasink/DataSinkTableViewer';\nimport { DrilldownDashboardRenderer } from '../DrilldownDashboardRenderer';\nimport { WidgetWrapper } from '../widgets/WidgetWrapper';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useParserOperations } from '../../hooks/useParserOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\n\n/** While the build is live, re-pull content on this cadence so it fills in. */\nconst CONTENT_POLL_MS = 4000;\n/** Stop the live re-pull after this long even if the turn is still running. */\nconst CONTENT_POLL_WINDOW_MS = 60_000;\n\nfunction CenteredSpinner({ label }: { label: string }) {\n  return (\n    <div className=\"flex items-center gap-2 px-1 py-8 text-sm text-text-muted\">\n      <Spinner className=\"size-4\" />\n      {label}\n    </div>\n  );\n}\n\nfunction Waiting({ text }: { text: string }) {\n  return <p className=\"px-1 py-8 text-sm text-text-muted\">{text}</p>;\n}\n\n/**\n * Fetch-on-mount, then re-fetch every CONTENT_POLL_MS while `live`, bounded to\n * CONTENT_POLL_WINDOW_MS. Returns { data, loading, done }. `fetcher` must be\n * stable-ish; we hold it in a ref so the effect keys only on `key`/`live`.\n */\nfunction useLiveContent<T>(fetcher: () => Promise<T | null>, key: string | undefined, live: boolean) {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const fetcherRef = useRef(fetcher);\n  fetcherRef.current = fetcher;\n\n  useEffect(() => {\n    if (!key) {\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    const startedAt = Date.now();\n    const pull = async () => {\n      const result = await fetcherRef.current();\n      if (cancelled) return;\n      if (result !== null && result !== undefined) setData(result);\n      setLoading(false);\n    };\n    void pull();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void pull();\n    }, CONTENT_POLL_MS);\n    return () => {\n      cancelled = true;\n      window.clearInterval(intervalId);\n    };\n  }, [key, live]);\n\n  return { data, loading };\n}\n\nexport function DataSinkContent({ id, live }: { id?: string; live: boolean }) {\n  const { getDataSinkData } = useDataSinkOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await getDataSinkData({ id }, { limit: 50 });\n      return res ? res.raw : null;\n    },\n    id,\n    live\n  );\n\n  if (!id) return <Waiting text=\"Waiting for the data sink to be created…\" />;\n  if (loading) return <CenteredSpinner label=\"Loading the data sink’s data…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-datasink\">\n      <DataSinkTableViewer data={data} maxHeight=\"300px\" />\n    </div>\n  );\n}\n\nexport function DashboardContent({ dashboardId }: { dashboardId?: string }) {\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard to be created…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-dashboard\" className=\"max-h-[340px] overflow-y-auto\">\n      <DrilldownDashboardRenderer dashboardId={dashboardId} params={{}} />\n    </div>\n  );\n}\n\nexport function ParserContent({ parserId, live }: { parserId?: string; live: boolean }) {\n  const { executeParser } = useParserOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await executeParser(parserId ?? '');\n      return res ? res.output : null;\n    },\n    parserId,\n    live\n  );\n\n  if (!parserId) return <Waiting text=\"No parser in this build — the rows were already shaped.\" />;\n  if (loading) return <CenteredSpinner label=\"Running the parser…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-parser\">\n      <p className=\"mb-2 px-1 text-xs text-text-muted\">Parser output (transformed rows):</p>\n      <DataSinkTableViewer data={data} maxHeight=\"280px\" />\n    </div>\n  );\n}\n\n/** Recharts needs a definite pixel height or it renders 0px tall. */\nfunction widgetBoxHeight(type: string): number {\n  const t = type.toUpperCase();\n  if (t.includes('METRIC') || t.includes('KPI') || t.includes('CARD') || t.includes('STAT')) return 160;\n  if (t.includes('TABLE') || t.includes('LIST')) return 280;\n  return 320;\n}\n\nexport function WidgetsContent({ dashboardId, live }: { dashboardId?: string; live: boolean }) {\n  const { widgets, loading, refetch } = useWidgetOperations(undefined, dashboardId, {\n    skipFetch: !dashboardId,\n  });\n\n  const refetchRef = useRef(refetch);\n  refetchRef.current = refetch;\n  useEffect(() => {\n    if (!dashboardId) return;\n    const startedAt = Date.now();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void refetchRef.current();\n    }, CONTENT_POLL_MS);\n    return () => window.clearInterval(intervalId);\n  }, [dashboardId, live]);\n\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard — widgets live on it.\" />;\n  if (loading && widgets.length === 0) return <CenteredSpinner label=\"Loading widgets…\" />;\n  if (widgets.length === 0) return <Waiting text=\"No widgets on this dashboard yet.\" />;\n\n  return (\n    <div data-testid=\"ai-preview-content-widget\" className=\"space-y-3\">\n      {widgets.map((widget) => (\n        <div\n          key={widget.id}\n          className=\"overflow-hidden rounded-md border border-border-subtle bg-bg-surface\"\n          style={{ height: widgetBoxHeight(widget.type) }}\n        >\n          <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={{}} />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,89 +1,45 @@
 import { useBigConsoleNavigate as e } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
 import { PREVIEW_STEPS as t, useAssistantRunStore as n } from "../../assistant/assistantRunStore.js";
-import r from "../../hooks/useDashboardOperations.js";
-import i from "../../hooks/useDataSinkOperations.js";
-import a from "../../hooks/useParserOperations.js";
-import o from "../../hooks/useWidgetOperations.js";
-import { EmptyOrLoading as s, StepRail as ee, formatAgo as c, useAssistantSidebarWidth as te } from "./previewShared.js";
-import { useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { Loader2 as p, Sparkles as m, X as h } from "lucide-react";
-import { Badge as g, Button as _, Tabs as ne, TabsContent as v, TabsList as y, TabsTrigger as b } from "@burdenoff/fe-libs/ui";
+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 { Button as g, Tabs as _, TabsContent as v, TabsList as y, TabsTrigger as b } from "@burdenoff/fe-libs/ui";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/AiPreviewPanel.tsx
-var C = 3500, w = 3e4, T = "default";
-function E({ id: e, title: t, meta: n, isNew: r, onOpen: i }) {
+function C({ label: e, onOpen: t }) {
 	return /* @__PURE__ */ S("div", {
-		"data-testid": "ai-preview-row",
-		"data-entity-id": e,
-		className: ["flex items-center justify-between gap-3 rounded-md border px-3 py-2", r ? "border-status-success-border bg-status-success-bg/30" : "border-border-subtle bg-bg-surface"].join(" "),
-		children: [/* @__PURE__ */ S("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ x("p", {
-				className: "truncate text-sm font-medium text-text-primary",
-				children: t
-			}), n ? /* @__PURE__ */ x("p", {
-				className: "truncate text-xs text-text-muted",
-				children: n
-			}) : null]
-		}), /* @__PURE__ */ S("div", {
-			className: "flex shrink-0 items-center gap-2",
-			children: [r ? /* @__PURE__ */ S(g, {
-				className: "bg-status-success-bg text-status-success-text",
-				children: [/* @__PURE__ */ x(m, { className: "mr-1 size-3" }), "just built"]
-			}) : null, i ? /* @__PURE__ */ x(_, {
-				size: "sm",
-				variant: "ghost",
-				onClick: i,
-				children: "Open"
-			}) : null]
-		})]
+		className: "mb-2 flex items-center justify-between gap-2",
+		children: [/* @__PURE__ */ x("span", {
+			className: "text-xs font-semibold uppercase tracking-wide text-text-muted",
+			children: e
+		}), t ? /* @__PURE__ */ S(g, {
+			size: "sm",
+			variant: "outline",
+			onClick: t,
+			"data-testid": "ai-preview-open-entity",
+			children: ["Open", /* @__PURE__ */ x(f, { className: "ml-1 size-3.5" })]
+		}) : null]
 	});
 }
-function D() {
-	let g = e(), D = n((e) => e.isRunning), O = n((e) => e.previewOpen), k = n((e) => e.hasRun), A = n((e) => e.steps), j = n((e) => e.entityIds), M = n((e) => e.caption), N = n((e) => e.error), P = n((e) => e.updatedAt), F = n((e) => e.openPreview), I = n((e) => e.closePreview), L = n((e) => e.setRichMounted);
-	l(() => (L(!0), () => L(!1)), [L]);
-	let [R, z] = f("datasink"), [B, V] = f(() => Date.now()), H = j.dashboard, U = i({ skipFetch: !0 }), W = r(), G = a({
-		consoleId: H ?? T,
-		skipFetch: !0
-	}), K = o(void 0, H, { skipFetch: !H }), q = d({
-		sinks: U.refetch,
-		dashboards: W.refetch,
-		parsers: G.refetch,
-		widgets: K.refetch
-	});
-	q.current = {
-		sinks: U.refetch,
-		dashboards: W.refetch,
-		parsers: G.refetch,
-		widgets: K.refetch
-	}, l(() => {
-		if (!k) return;
-		let e = Infinity;
-		D || (e = Date.now() + w);
-		let t = () => {
-			typeof document < "u" && document.visibilityState !== "visible" || Date.now() > e || (q.current.sinks(), q.current.dashboards(), H && (q.current.parsers(), q.current.widgets()), V(Date.now()));
-		};
-		t();
-		let n = window.setInterval(t, C), r = () => {
-			document.visibilityState === "visible" && t();
-		};
-		return document.addEventListener("visibilitychange", r), () => {
-			window.clearInterval(n), document.removeEventListener("visibilitychange", r);
-		};
-	}, [
-		k,
-		D,
-		H
-	]), l(() => {
-		let e = t.find((e) => A[e] === "running");
-		e && z(e);
-	}, [A]);
-	let J = P ? Math.max(0, Math.floor((B - P) / 1e3)) : 0, Y = te(), X = u(() => U.dataSinks.slice(0, 25), [U.dataSinks]), Z = u(() => W.dashboards.slice(0, 25), [W.dashboards]), Q = u(() => G.parsers.slice(0, 25), [G.parsers]), $ = u(() => K.widgets.slice(0, 25), [K.widgets]);
-	return k ? O ? /* @__PURE__ */ S("section", {
+function w() {
+	let f = e(), w = n((e) => e.isRunning), T = n((e) => e.previewOpen), E = n((e) => e.hasRun), D = n((e) => e.steps), O = n((e) => e.entityIds), k = n((e) => e.caption), A = n((e) => e.error), j = n((e) => e.updatedAt), M = n((e) => e.openPreview), N = n((e) => e.closePreview), P = n((e) => e.setRichMounted);
+	u(() => (P(!0), () => P(!1)), [P]);
+	let [F, I] = d("datasink"), [L, R] = d(() => Date.now()), z = O.dashboard;
+	u(() => {
+		if (!w) return;
+		let e = window.setInterval(() => R(Date.now()), 1e3);
+		return () => window.clearInterval(e);
+	}, [w]), u(() => {
+		let e = t.find((e) => D[e] === "running");
+		e && I(e);
+	}, [D]);
+	let B = j ? Math.max(0, Math.floor((L - j) / 1e3)) : 0, V = a();
+	return E ? T ? /* @__PURE__ */ S("section", {
 		"data-testid": "ai-preview-panel",
 		"aria-label": "AI preview",
-		style: { marginRight: Y ? Y + 16 : void 0 },
+		style: { marginRight: V ? V + 16 : void 0 },
 		className: "mx-4 mt-3 overflow-hidden rounded-lg border border-border-default bg-bg-sunken shadow-sm md:mx-6",
 		children: [
 			/* @__PURE__ */ S("div", {
@@ -96,7 +52,7 @@ function D() {
 							className: "truncate text-sm font-semibold text-text-primary",
 							children: "AI Preview"
 						}),
-						D ? /* @__PURE__ */ S("span", {
+						w ? /* @__PURE__ */ S("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__ */ S("span", {
@@ -108,17 +64,17 @@ function D() {
 							className: "truncate text-xs text-text-muted",
 							"data-testid": "ai-preview-ago",
 							children: [
-								D ? M || "Working…" : N ? "Stopped" : "Done",
+								w ? k || "Working…" : A ? "Stopped" : "Done",
 								" · updated",
 								" ",
-								c(J)
+								i(B)
 							]
 						})
 					]
-				}), /* @__PURE__ */ x(_, {
+				}), /* @__PURE__ */ x(g, {
 					size: "sm",
 					variant: "ghost",
-					onClick: I,
+					onClick: N,
 					"aria-label": "Close preview",
 					"data-testid": "ai-preview-close",
 					children: /* @__PURE__ */ x(h, { className: "size-4" })
@@ -126,126 +82,101 @@ function D() {
 			}),
 			/* @__PURE__ */ x("div", {
 				className: "border-b border-border-subtle px-3 py-2",
-				children: /* @__PURE__ */ x(ee, { steps: A })
+				children: /* @__PURE__ */ x(r, { steps: D })
 			}),
-			/* @__PURE__ */ S(ne, {
-				value: R,
-				onValueChange: (e) => z(e),
+			/* @__PURE__ */ S(_, {
+				value: F,
+				onValueChange: (e) => I(e),
 				children: [/* @__PURE__ */ S(y, {
 					className: "mx-3 mt-2",
 					children: [
 						/* @__PURE__ */ x(b, {
 							value: "datasink",
 							"data-testid": "ai-preview-tab-datasink",
-							children: "Data Sinks"
+							children: "Data Sink"
 						}),
 						/* @__PURE__ */ x(b, {
 							value: "dashboard",
 							"data-testid": "ai-preview-tab-dashboard",
-							children: "Dashboards"
+							children: "Dashboard"
 						}),
 						/* @__PURE__ */ x(b, {
 							value: "parser",
 							"data-testid": "ai-preview-tab-parser",
-							children: "Parsers"
+							children: "Parser"
 						}),
 						/* @__PURE__ */ x(b, {
 							value: "widget",
 							"data-testid": "ai-preview-tab-widget",
-							children: "Widgets"
+							children: "Widget"
 						})
 					]
 				}), /* @__PURE__ */ S("div", {
-					className: "max-h-[320px] overflow-y-auto p-3",
+					className: "max-h-[440px] overflow-y-auto p-3",
 					children: [
-						/* @__PURE__ */ x(v, {
+						/* @__PURE__ */ S(v, {
 							value: "datasink",
-							className: "space-y-2",
-							children: X.length === 0 ? /* @__PURE__ */ x(s, {
-								loading: U.loading,
-								empty: "No data sinks yet."
-							}) : X.map((e) => /* @__PURE__ */ x(E, {
-								id: e.id,
-								title: e.name ?? e.key,
-								meta: e.status,
-								isNew: e.id === j.datasink,
-								onOpen: () => g(`/datasinks/${e.id}`)
-							}, e.id))
+							children: [/* @__PURE__ */ x(C, {
+								label: "Data Sink",
+								onOpen: O.datasink ? () => f(`/datasinks/${O.datasink}`) : void 0
+							}), /* @__PURE__ */ x(s, {
+								id: O.datasink,
+								live: w
+							})]
 						}),
-						/* @__PURE__ */ x(v, {
+						/* @__PURE__ */ S(v, {
 							value: "dashboard",
-							className: "space-y-2",
-							children: Z.length === 0 ? /* @__PURE__ */ x(s, {
-								loading: W.loading,
-								empty: "No dashboards yet."
-							}) : Z.map((e) => /* @__PURE__ */ x(E, {
-								id: e.id,
-								title: e.name,
-								meta: `${String(e.widgetCount ?? 0)} widget(s)`,
-								isNew: e.id === j.dashboard,
-								onOpen: () => g(`/dashboards/${e.id}`)
-							}, e.id))
+							children: [/* @__PURE__ */ x(C, {
+								label: "Dashboard",
+								onOpen: O.dashboard ? () => f(`/dashboards/${O.dashboard}`) : void 0
+							}), /* @__PURE__ */ x(o, { dashboardId: O.dashboard })]
 						}),
-						/* @__PURE__ */ x(v, {
+						/* @__PURE__ */ S(v, {
 							value: "parser",
-							className: "space-y-2",
-							children: H ? Q.length === 0 ? /* @__PURE__ */ x(s, {
-								loading: G.loading,
-								empty: "No parsers on this dashboard yet."
-							}) : Q.map((e) => /* @__PURE__ */ x(E, {
-								id: e.id,
-								title: e.name,
-								meta: `${e.type} · ${e.status}`,
-								isNew: e.id === j.parser,
-								onOpen: () => g(`/parsers/${e.id}`)
-							}, e.id)) : /* @__PURE__ */ x("p", {
-								className: "px-1 py-6 text-sm text-text-muted",
-								children: "Parsers are listed per dashboard — waiting for the dashboard to be created."
-							})
+							children: [/* @__PURE__ */ x(C, {
+								label: "Parser",
+								onOpen: O.parser ? () => f(`/parsers/${O.parser}`) : void 0
+							}), /* @__PURE__ */ x(c, {
+								parserId: O.parser,
+								live: w
+							})]
 						}),
-						/* @__PURE__ */ x(v, {
+						/* @__PURE__ */ S(v, {
 							value: "widget",
-							className: "space-y-2",
-							children: H ? $.length === 0 ? /* @__PURE__ */ x(s, {
-								loading: K.loading,
-								empty: "No widgets on this dashboard yet."
-							}) : $.map((e) => /* @__PURE__ */ x(E, {
-								id: e.id,
-								title: e.title,
-								meta: e.type,
-								isNew: e.id === $[$.length - 1]?.id && A.widget === "done",
-								onOpen: () => g(`/dashboards/${H}`)
-							}, e.id)) : /* @__PURE__ */ x("p", {
-								className: "px-1 py-6 text-sm text-text-muted",
-								children: "Widgets live on a dashboard — waiting for the dashboard to be created."
-							})
+							children: [/* @__PURE__ */ x(C, {
+								label: "Widget",
+								onOpen: z ? () => f(`/dashboards/${z}`) : void 0
+							}), /* @__PURE__ */ x(l, {
+								dashboardId: z,
+								live: w
+							})]
 						})
 					]
 				})]
 			}),
-			N ? /* @__PURE__ */ x("p", {
+			A ? /* @__PURE__ */ x("p", {
 				className: "border-t border-border-subtle px-3 py-2 text-xs text-status-error-text",
 				"data-testid": "ai-preview-error",
-				children: N
+				children: A
 			}) : null
 		]
 	}) : /* @__PURE__ */ x("div", {
 		className: "flex justify-end px-4 pt-3 md:px-6",
-		style: { marginRight: Y },
-		children: /* @__PURE__ */ S(_, {
+		style: { marginRight: V },
+		children: /* @__PURE__ */ S(g, {
 			size: "sm",
 			variant: "outline",
-			onClick: F,
+			onClick: M,
 			"data-testid": "ai-preview-open",
 			children: [
 				/* @__PURE__ */ x(m, { className: "mr-1.5 size-4" }),
 				"Preview",
-				D ? /* @__PURE__ */ x(p, { className: "ml-1.5 size-3.5 animate-spin" }) : null
+				w ? /* @__PURE__ */ x(p, { className: "ml-1.5 size-3.5 animate-spin" }) : null
 			]
 		})
 	}) : null;
 }
 //#endregion
-export { D as default };
+export { w as default };
 
 //# sourceMappingURL=AiPreviewPanel.js.map