@burdenoff/microfe-bigconsole 2026.716.3 → 2026.716.4

package/dist/bigconsole/assistant/assistantRunStore.js

@@ -33,6 +33,7 @@ var l = e()((e) => ({
 	isRunning: !1,
 	previewOpen: !1,
 	hasRun: !1,
+	richMounted: !1,
 	prompt: "",
 	steps: { ...r },
 	entityIds: {},
@@ -81,7 +82,8 @@ var l = e()((e) => ({
 		};
 	}),
 	openPreview: () => e({ previewOpen: !0 }),
-	closePreview: () => e({ previewOpen: !1 })
+	closePreview: () => e({ previewOpen: !1 }),
+	setRichMounted: (t) => e({ richMounted: t })
 }));
 //#endregion
 export { t as PREVIEW_STEPS, n as PREVIEW_STEP_LABEL, l as useAssistantRunStore };

package/dist/bigconsole/assistant/assistantRunStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"assistantRunStore.js","names":[],"sources":["../../../src/bigconsole/assistant/assistantRunStore.ts"],"sourcesContent":["/**\n * What the assistant is building, right now.\n *\n * The agent is instructed to narrate each step and to print a link the moment a\n * create lands (\"✅ Data sink created — [Open the data sink](/bigconsole/datasinks/<id>)\").\n * That narration is the only live signal the frontend gets — there is no event\n * stream from the agent — so this store turns it into something a UI can render:\n * a monotone DataSink → Dashboard → Parser → Widget rail, plus the id of each\n * entity as it appears.\n *\n * Two rules make the parsing survive a model that phrases things differently:\n *\n * 1. Match on the LINK PATH (`/bigconsole/datasinks/<id>`), never on the ✅\n *    sentence. The path is copied from the mutation response; the sentence is\n *    prose and the model is free to reword it.\n * 2. Never regress. `progress.content` is REPLACED on every poll (not appended)\n *    and the ⏳ tool lines come only from the agent's newest message, so a\n *    shorter string arriving later must not rewind the rail.\n */\nimport { create } from 'zustand';\n\nexport type PreviewStepKey = 'datasink' | 'dashboard' | 'parser' | 'widget';\nexport type PreviewStepStatus = 'pending' | 'running' | 'done' | 'skipped';\n\nexport const PREVIEW_STEPS: readonly PreviewStepKey[] = ['datasink', 'dashboard', 'parser', 'widget'];\n\nexport const PREVIEW_STEP_LABEL: Record<PreviewStepKey, string> = {\n  datasink: 'Data Sink',\n  dashboard: 'Dashboard',\n  parser: 'Parser',\n  widget: 'Widget',\n};\n\ninterface AssistantRunState {\n  /** A turn is in flight. */\n  isRunning: boolean;\n  /** The panel is on screen. Auto-opens when a turn starts; the user can close it. */\n  previewOpen: boolean;\n  /** True once any turn has run — gates the \"Preview\" button. */\n  hasRun: boolean;\n  prompt: string;\n  steps: Record<PreviewStepKey, PreviewStepStatus>;\n  /** Ids harvested from the agent's links. A widget has no link of its own. */\n  entityIds: { datasink?: string; dashboard?: string; parser?: string };\n  /** Newest \"⏳ …\" line — what the agent says it is doing this second. */\n  caption: string;\n  /** Set when the turn fails, so the panel can stop pretending to be live. */\n  error: string | null;\n  /** Epoch ms of the last progress tick — drives the \"updated 3s ago\" strip. */\n  updatedAt: number | null;\n\n  startRun: (prompt: string) => void;\n  applyProgress: (content: string) => void;\n  finishRun: (error: string | null) => void;\n  openPreview: () => void;\n  closePreview: () => void;\n}\n\nconst IDLE_STEPS: Record<PreviewStepKey, PreviewStepStatus> = {\n  datasink: 'pending',\n  dashboard: 'pending',\n  parser: 'pending',\n  widget: 'pending',\n};\n\n/** `/bigconsole/datasinks/<id>` — the trustworthy part of the narration. */\nconst ENTITY_LINK = /\\/bigconsole\\/(datasinks|dashboards|parsers)\\/([A-Za-z0-9_-]+)/g;\n/** The widget links to its dashboard, so it can only be detected from the prose. */\nconst WIDGET_DONE = /widget\\s+(added|created)/i;\nconst RUNNING_LINE = /^⏳\\s*(.+?)…?$/;\n\nconst LINK_TO_STEP: Record<string, PreviewStepKey> = {\n  datasinks: 'datasink',\n  dashboards: 'dashboard',\n  parsers: 'parser',\n};\n\n/** Only ever moves a step forward. */\nfunction advance(current: PreviewStepStatus, next: PreviewStepStatus): PreviewStepStatus {\n  const rank: Record<PreviewStepStatus, number> = { pending: 0, running: 1, skipped: 2, done: 3 };\n  return rank[next] > rank[current] ? next : current;\n}\n\nexport const useAssistantRunStore = create<AssistantRunState>()((set) => ({\n  isRunning: false,\n  previewOpen: false,\n  hasRun: false,\n  prompt: '',\n  steps: { ...IDLE_STEPS },\n  entityIds: {},\n  caption: '',\n  error: null,\n  updatedAt: null,\n\n  startRun: (prompt) =>\n    set({\n      isRunning: true,\n      // Auto-open: the whole point is that you SEE the build happen without\n      // having to go looking for it.\n      previewOpen: true,\n      hasRun: true,\n      prompt,\n      steps: { ...IDLE_STEPS, datasink: 'running' },\n      entityIds: {},\n      caption: '',\n      error: null,\n      updatedAt: Date.now(),\n    }),\n\n  applyProgress: (content) =>\n    set((state) => {\n      const steps = { ...state.steps };\n      const entityIds = { ...state.entityIds };\n\n      for (const match of content.matchAll(ENTITY_LINK)) {\n        const step = LINK_TO_STEP[match[1] ?? ''];\n        const id = match[2];\n        if (!step || !id) continue;\n        steps[step] = advance(steps[step], 'done');\n        if (!entityIds[step as keyof typeof entityIds]) {\n          entityIds[step as keyof typeof entityIds] = id;\n        }\n      }\n\n      if (WIDGET_DONE.test(content)) {\n        steps.widget = advance(steps.widget, 'done');\n        // The parser is optional — the agent skips it when the rows are already\n        // shaped. If the widget landed and no parser link ever appeared, it was\n        // skipped, not stuck.\n        if (steps.parser !== 'done') steps.parser = advance(steps.parser, 'skipped');\n      }\n\n      // The first step that has not finished is the one being worked on.\n      const active = PREVIEW_STEPS.find((key) => steps[key] === 'pending' || steps[key] === 'running');\n      if (active) steps[active] = advance(steps[active], 'running');\n\n      const caption =\n        content\n          .split('\\n')\n          .map((line) => line.trim())\n          .reverse()\n          .map((line) => RUNNING_LINE.exec(line)?.[1])\n          .find((label): label is string => Boolean(label)) ?? state.caption;\n\n      return { steps, entityIds, caption, updatedAt: Date.now() };\n    }),\n\n  finishRun: (error) =>\n    set((state) => {\n      const steps = { ...state.steps };\n      if (!error) {\n        // A clean finish means nothing is still in flight. Anything left running\n        // never produced a link — mark it skipped rather than leaving a spinner\n        // on screen forever.\n        for (const key of PREVIEW_STEPS) {\n          if (steps[key] === 'running' || steps[key] === 'pending') steps[key] = 'skipped';\n        }\n      } else {\n        for (const key of PREVIEW_STEPS) {\n          if (steps[key] === 'running') steps[key] = 'pending';\n        }\n      }\n      return { isRunning: false, error, steps, caption: '', updatedAt: Date.now() };\n    }),\n\n  openPreview: () => set({ previewOpen: true }),\n  closePreview: () => set({ previewOpen: false }),\n}));\n"],"mappings":";;AAwBA,IAAa,IAA2C;CAAC;CAAY;CAAa;CAAU;CAAS,EAExF,IAAqD;CAChE,UAAU;CACV,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EA2BK,IAAwD;CAC5D,UAAU;CACV,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EAGK,IAAc,mEAEd,IAAc,6BACd,IAAe,iBAEf,IAA+C;CACnD,WAAW;CACX,YAAY;CACZ,SAAS;CACV;AAGD,SAAS,EAAQ,GAA4B,GAA4C;CACvF,IAAM,IAA0C;EAAE,SAAS;EAAG,SAAS;EAAG,SAAS;EAAG,MAAM;EAAG;AAC/F,QAAO,EAAK,KAAQ,EAAK,KAAW,IAAO;;AAG7C,IAAa,IAAuB,GAA2B,EAAE,OAAS;CACxE,WAAW;CACX,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,OAAO,EAAE,GAAG,GAAY;CACxB,WAAW,EAAE;CACb,SAAS;CACT,OAAO;CACP,WAAW;CAEX,WAAW,MACT,EAAI;EACF,WAAW;EAGX,aAAa;EACb,QAAQ;EACR;EACA,OAAO;GAAE,GAAG;GAAY,UAAU;GAAW;EAC7C,WAAW,EAAE;EACb,SAAS;EACT,OAAO;EACP,WAAW,KAAK,KAAK;EACtB,CAAC;CAEJ,gBAAgB,MACd,GAAK,MAAU;EACb,IAAM,IAAQ,EAAE,GAAG,EAAM,OAAO,EAC1B,IAAY,EAAE,GAAG,EAAM,WAAW;AAExC,OAAK,IAAM,KAAS,EAAQ,SAAS,EAAY,EAAE;GACjD,IAAM,IAAO,EAAa,EAAM,MAAM,KAChC,IAAK,EAAM;AACb,IAAC,KAAQ,CAAC,MACd,EAAM,KAAQ,EAAQ,EAAM,IAAO,OAAO,EACrC,EAAU,OACb,EAAU,KAAkC;;AAIhD,EAAI,EAAY,KAAK,EAAQ,KAC3B,EAAM,SAAS,EAAQ,EAAM,QAAQ,OAAO,EAIxC,EAAM,WAAW,WAAQ,EAAM,SAAS,EAAQ,EAAM,QAAQ,UAAU;EAI9E,IAAM,IAAS,EAAc,MAAM,MAAQ,EAAM,OAAS,aAAa,EAAM,OAAS,UAAU;AAWhG,SAVI,MAAQ,EAAM,KAAU,EAAQ,EAAM,IAAS,UAAU,GAUtD;GAAE;GAAO;GAAW,SAPzB,EACG,MAAM,KAAK,CACX,KAAK,MAAS,EAAK,MAAM,CAAC,CAC1B,SAAS,CACT,KAAK,MAAS,EAAa,KAAK,EAAK,GAAG,GAAG,CAC3C,MAAM,MAA2B,EAAQ,EAAO,IAAI,EAAM;GAE3B,WAAW,KAAK,KAAK;GAAE;GAC3D;CAEJ,YAAY,MACV,GAAK,MAAU;EACb,IAAM,IAAQ,EAAE,GAAG,EAAM,OAAO;AAChC,MAAK,EAQH,MAAK,IAAM,KAAO,EAChB,CAAI,EAAM,OAAS,cAAW,EAAM,KAAO;YALxC,IAAM,KAAO,EAChB,EAAI,EAAM,OAAS,aAAa,EAAM,OAAS,eAAW,EAAM,KAAO;AAO3E,SAAO;GAAE,WAAW;GAAO;GAAO;GAAO,SAAS;GAAI,WAAW,KAAK,KAAK;GAAE;GAC7E;CAEJ,mBAAmB,EAAI,EAAE,aAAa,IAAM,CAAC;CAC7C,oBAAoB,EAAI,EAAE,aAAa,IAAO,CAAC;CAChD,EAAE"}
+{"version":3,"file":"assistantRunStore.js","names":[],"sources":["../../../src/bigconsole/assistant/assistantRunStore.ts"],"sourcesContent":["/**\n * What the assistant is building, right now.\n *\n * The agent is instructed to narrate each step and to print a link the moment a\n * create lands (\"✅ Data sink created — [Open the data sink](/bigconsole/datasinks/<id>)\").\n * That narration is the only live signal the frontend gets — there is no event\n * stream from the agent — so this store turns it into something a UI can render:\n * a monotone DataSink → Dashboard → Parser → Widget rail, plus the id of each\n * entity as it appears.\n *\n * Two rules make the parsing survive a model that phrases things differently:\n *\n * 1. Match on the LINK PATH (`/bigconsole/datasinks/<id>`), never on the ✅\n *    sentence. The path is copied from the mutation response; the sentence is\n *    prose and the model is free to reword it.\n * 2. Never regress. `progress.content` is REPLACED on every poll (not appended)\n *    and the ⏳ tool lines come only from the agent's newest message, so a\n *    shorter string arriving later must not rewind the rail.\n */\nimport { create } from 'zustand';\n\nexport type PreviewStepKey = 'datasink' | 'dashboard' | 'parser' | 'widget';\nexport type PreviewStepStatus = 'pending' | 'running' | 'done' | 'skipped';\n\nexport const PREVIEW_STEPS: readonly PreviewStepKey[] = ['datasink', 'dashboard', 'parser', 'widget'];\n\nexport const PREVIEW_STEP_LABEL: Record<PreviewStepKey, string> = {\n  datasink: 'Data Sink',\n  dashboard: 'Dashboard',\n  parser: 'Parser',\n  widget: 'Widget',\n};\n\ninterface AssistantRunState {\n  /** A turn is in flight. */\n  isRunning: boolean;\n  /** The panel is on screen. Auto-opens when a turn starts; the user can close it. */\n  previewOpen: boolean;\n  /** True once any turn has run — gates the \"Preview\" button. */\n  hasRun: boolean;\n  /**\n   * The full, context-rich panel (mounted inside BigConsoleRoot, with live entity\n   * tabs) is on screen right now. The lightweight app-shell panel reads this and\n   * steps aside so the two never render at once. It flips false the instant you\n   * leave a /bigconsole page — that is what lets the mini panel take over and keep\n   * the build visible on whatever screen you moved to.\n   */\n  richMounted: boolean;\n  prompt: string;\n  steps: Record<PreviewStepKey, PreviewStepStatus>;\n  /** Ids harvested from the agent's links. A widget has no link of its own. */\n  entityIds: { datasink?: string; dashboard?: string; parser?: string };\n  /** Newest \"⏳ …\" line — what the agent says it is doing this second. */\n  caption: string;\n  /** Set when the turn fails, so the panel can stop pretending to be live. */\n  error: string | null;\n  /** Epoch ms of the last progress tick — drives the \"updated 3s ago\" strip. */\n  updatedAt: number | null;\n\n  startRun: (prompt: string) => void;\n  applyProgress: (content: string) => void;\n  finishRun: (error: string | null) => void;\n  openPreview: () => void;\n  closePreview: () => void;\n  setRichMounted: (mounted: boolean) => void;\n}\n\nconst IDLE_STEPS: Record<PreviewStepKey, PreviewStepStatus> = {\n  datasink: 'pending',\n  dashboard: 'pending',\n  parser: 'pending',\n  widget: 'pending',\n};\n\n/** `/bigconsole/datasinks/<id>` — the trustworthy part of the narration. */\nconst ENTITY_LINK = /\\/bigconsole\\/(datasinks|dashboards|parsers)\\/([A-Za-z0-9_-]+)/g;\n/** The widget links to its dashboard, so it can only be detected from the prose. */\nconst WIDGET_DONE = /widget\\s+(added|created)/i;\nconst RUNNING_LINE = /^⏳\\s*(.+?)…?$/;\n\nconst LINK_TO_STEP: Record<string, PreviewStepKey> = {\n  datasinks: 'datasink',\n  dashboards: 'dashboard',\n  parsers: 'parser',\n};\n\n/** Only ever moves a step forward. */\nfunction advance(current: PreviewStepStatus, next: PreviewStepStatus): PreviewStepStatus {\n  const rank: Record<PreviewStepStatus, number> = { pending: 0, running: 1, skipped: 2, done: 3 };\n  return rank[next] > rank[current] ? next : current;\n}\n\nexport const useAssistantRunStore = create<AssistantRunState>()((set) => ({\n  isRunning: false,\n  previewOpen: false,\n  hasRun: false,\n  richMounted: false,\n  prompt: '',\n  steps: { ...IDLE_STEPS },\n  entityIds: {},\n  caption: '',\n  error: null,\n  updatedAt: null,\n\n  startRun: (prompt) =>\n    set({\n      isRunning: true,\n      // Auto-open: the whole point is that you SEE the build happen without\n      // having to go looking for it.\n      previewOpen: true,\n      hasRun: true,\n      prompt,\n      steps: { ...IDLE_STEPS, datasink: 'running' },\n      entityIds: {},\n      caption: '',\n      error: null,\n      updatedAt: Date.now(),\n    }),\n\n  applyProgress: (content) =>\n    set((state) => {\n      const steps = { ...state.steps };\n      const entityIds = { ...state.entityIds };\n\n      for (const match of content.matchAll(ENTITY_LINK)) {\n        const step = LINK_TO_STEP[match[1] ?? ''];\n        const id = match[2];\n        if (!step || !id) continue;\n        steps[step] = advance(steps[step], 'done');\n        if (!entityIds[step as keyof typeof entityIds]) {\n          entityIds[step as keyof typeof entityIds] = id;\n        }\n      }\n\n      if (WIDGET_DONE.test(content)) {\n        steps.widget = advance(steps.widget, 'done');\n        // The parser is optional — the agent skips it when the rows are already\n        // shaped. If the widget landed and no parser link ever appeared, it was\n        // skipped, not stuck.\n        if (steps.parser !== 'done') steps.parser = advance(steps.parser, 'skipped');\n      }\n\n      // The first step that has not finished is the one being worked on.\n      const active = PREVIEW_STEPS.find((key) => steps[key] === 'pending' || steps[key] === 'running');\n      if (active) steps[active] = advance(steps[active], 'running');\n\n      const caption =\n        content\n          .split('\\n')\n          .map((line) => line.trim())\n          .reverse()\n          .map((line) => RUNNING_LINE.exec(line)?.[1])\n          .find((label): label is string => Boolean(label)) ?? state.caption;\n\n      return { steps, entityIds, caption, updatedAt: Date.now() };\n    }),\n\n  finishRun: (error) =>\n    set((state) => {\n      const steps = { ...state.steps };\n      if (!error) {\n        // A clean finish means nothing is still in flight. Anything left running\n        // never produced a link — mark it skipped rather than leaving a spinner\n        // on screen forever.\n        for (const key of PREVIEW_STEPS) {\n          if (steps[key] === 'running' || steps[key] === 'pending') steps[key] = 'skipped';\n        }\n      } else {\n        for (const key of PREVIEW_STEPS) {\n          if (steps[key] === 'running') steps[key] = 'pending';\n        }\n      }\n      return { isRunning: false, error, steps, caption: '', updatedAt: Date.now() };\n    }),\n\n  openPreview: () => set({ previewOpen: true }),\n  closePreview: () => set({ previewOpen: false }),\n  setRichMounted: (mounted) => set({ richMounted: mounted }),\n}));\n"],"mappings":";;AAwBA,IAAa,IAA2C;CAAC;CAAY;CAAa;CAAU;CAAS,EAExF,IAAqD;CAChE,UAAU;CACV,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EAoCK,IAAwD;CAC5D,UAAU;CACV,WAAW;CACX,QAAQ;CACR,QAAQ;CACT,EAGK,IAAc,mEAEd,IAAc,6BACd,IAAe,iBAEf,IAA+C;CACnD,WAAW;CACX,YAAY;CACZ,SAAS;CACV;AAGD,SAAS,EAAQ,GAA4B,GAA4C;CACvF,IAAM,IAA0C;EAAE,SAAS;EAAG,SAAS;EAAG,SAAS;EAAG,MAAM;EAAG;AAC/F,QAAO,EAAK,KAAQ,EAAK,KAAW,IAAO;;AAG7C,IAAa,IAAuB,GAA2B,EAAE,OAAS;CACxE,WAAW;CACX,aAAa;CACb,QAAQ;CACR,aAAa;CACb,QAAQ;CACR,OAAO,EAAE,GAAG,GAAY;CACxB,WAAW,EAAE;CACb,SAAS;CACT,OAAO;CACP,WAAW;CAEX,WAAW,MACT,EAAI;EACF,WAAW;EAGX,aAAa;EACb,QAAQ;EACR;EACA,OAAO;GAAE,GAAG;GAAY,UAAU;GAAW;EAC7C,WAAW,EAAE;EACb,SAAS;EACT,OAAO;EACP,WAAW,KAAK,KAAK;EACtB,CAAC;CAEJ,gBAAgB,MACd,GAAK,MAAU;EACb,IAAM,IAAQ,EAAE,GAAG,EAAM,OAAO,EAC1B,IAAY,EAAE,GAAG,EAAM,WAAW;AAExC,OAAK,IAAM,KAAS,EAAQ,SAAS,EAAY,EAAE;GACjD,IAAM,IAAO,EAAa,EAAM,MAAM,KAChC,IAAK,EAAM;AACb,IAAC,KAAQ,CAAC,MACd,EAAM,KAAQ,EAAQ,EAAM,IAAO,OAAO,EACrC,EAAU,OACb,EAAU,KAAkC;;AAIhD,EAAI,EAAY,KAAK,EAAQ,KAC3B,EAAM,SAAS,EAAQ,EAAM,QAAQ,OAAO,EAIxC,EAAM,WAAW,WAAQ,EAAM,SAAS,EAAQ,EAAM,QAAQ,UAAU;EAI9E,IAAM,IAAS,EAAc,MAAM,MAAQ,EAAM,OAAS,aAAa,EAAM,OAAS,UAAU;AAWhG,SAVI,MAAQ,EAAM,KAAU,EAAQ,EAAM,IAAS,UAAU,GAUtD;GAAE;GAAO;GAAW,SAPzB,EACG,MAAM,KAAK,CACX,KAAK,MAAS,EAAK,MAAM,CAAC,CAC1B,SAAS,CACT,KAAK,MAAS,EAAa,KAAK,EAAK,GAAG,GAAG,CAC3C,MAAM,MAA2B,EAAQ,EAAO,IAAI,EAAM;GAE3B,WAAW,KAAK,KAAK;GAAE;GAC3D;CAEJ,YAAY,MACV,GAAK,MAAU;EACb,IAAM,IAAQ,EAAE,GAAG,EAAM,OAAO;AAChC,MAAK,EAQH,MAAK,IAAM,KAAO,EAChB,CAAI,EAAM,OAAS,cAAW,EAAM,KAAO;YALxC,IAAM,KAAO,EAChB,EAAI,EAAM,OAAS,aAAa,EAAM,OAAS,eAAW,EAAM,KAAO;AAO3E,SAAO;GAAE,WAAW;GAAO;GAAO;GAAO,SAAS;GAAI,WAAW,KAAK,KAAK;GAAE;GAC7E;CAEJ,mBAAmB,EAAI,EAAE,aAAa,IAAM,CAAC;CAC7C,oBAAoB,EAAI,EAAE,aAAa,IAAO,CAAC;CAC/C,iBAAiB,MAAY,EAAI,EAAE,aAAa,GAAS,CAAC;CAC3D,EAAE"}

package/dist/bigconsole/assistant/index.js

@@ -1,3 +1,4 @@
 import { gatherPageContext as e, resolveBigConsoleConversationContext as t } from "./pageContext.js";
 import { useSandboxAssistantTransport as n } from "./createSandboxAssistantTransport.js";
-export { e as gatherPageContext, t as resolveBigConsoleConversationContext, n as useSandboxAssistantTransport };
+import r from "../components/preview/AiPreviewMiniPanel.js";
+export { r as AiPreviewMiniPanel, e as gatherPageContext, t as resolveBigConsoleConversationContext, n as useSandboxAssistantTransport };

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

@@ -0,0 +1,133 @@
+import { useAssistantRunStore as e } from "../../assistant/assistantRunStore.js";
+import { StepRail as t, formatAgo as n, useAssistantSidebarWidth as r } from "./previewShared.js";
+import { useEffect as i, useState as a } from "react";
+import { ArrowUpRight as o, Loader2 as s, Sparkles as c, X as l } from "lucide-react";
+import { Button as u } from "@burdenoff/fe-libs/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/bigconsole/components/preview/AiPreviewMiniPanel.tsx
+function p({ onNavigate: p }) {
+	let m = e((e) => e.isRunning), h = e((e) => e.previewOpen), g = e((e) => e.hasRun), _ = e((e) => e.richMounted), v = e((e) => e.steps), y = e((e) => e.entityIds), b = e((e) => e.caption), x = e((e) => e.error), S = e((e) => e.updatedAt), C = e((e) => e.openPreview), w = e((e) => e.closePreview), [T, E] = a(() => Date.now());
+	i(() => {
+		if (!m) return;
+		let e = window.setInterval(() => E(Date.now()), 1e3);
+		return () => window.clearInterval(e);
+	}, [m]);
+	let D = r(), O = (e) => {
+		p ? p(e) : typeof window < "u" && window.location.assign(e);
+	};
+	if (!g || _) return null;
+	if (!h) return /* @__PURE__ */ d("div", {
+		className: "flex justify-end px-4 pt-1 md:px-6",
+		style: { marginRight: D },
+		children: /* @__PURE__ */ f(u, {
+			size: "sm",
+			variant: "outline",
+			onClick: C,
+			"data-testid": "ai-preview-open",
+			children: [
+				/* @__PURE__ */ d(c, { className: "mr-1.5 size-4" }),
+				"Preview",
+				m ? /* @__PURE__ */ d(s, { className: "ml-1.5 size-3.5 animate-spin" }) : null
+			]
+		})
+	});
+	let k = S ? Math.max(0, Math.floor((T - S) / 1e3)) : 0, A = [];
+	return y.datasink && A.push({
+		key: "datasink",
+		label: "Data Sink",
+		path: `/bigconsole/datasinks/${y.datasink}`
+	}), y.dashboard && A.push({
+		key: "dashboard",
+		label: "Dashboard",
+		path: `/bigconsole/dashboards/${y.dashboard}`
+	}), y.parser && A.push({
+		key: "parser",
+		label: "Parser",
+		path: `/bigconsole/parsers/${y.parser}`
+	}), /* @__PURE__ */ f("section", {
+		"data-testid": "ai-preview-panel",
+		"data-variant": "mini",
+		"aria-label": "AI preview",
+		style: { marginRight: D ? D + 16 : void 0 },
+		className: "mx-4 mt-1 mb-3 overflow-hidden rounded-lg border border-border-default bg-bg-sunken shadow-sm md:mx-6",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-bg-surface px-3 py-2",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [
+						/* @__PURE__ */ d(c, { className: "size-4 shrink-0 text-action-primary-bg" }),
+						/* @__PURE__ */ d("h2", {
+							className: "truncate text-sm font-semibold text-text-primary",
+							children: "AI Preview"
+						}),
+						m ? /* @__PURE__ */ f("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__ */ f("span", {
+								className: "relative flex size-2",
+								children: [/* @__PURE__ */ d("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75" }), /* @__PURE__ */ d("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
+							}), "Live"]
+						}) : null,
+						/* @__PURE__ */ f("span", {
+							className: "truncate text-xs text-text-muted",
+							"data-testid": "ai-preview-ago",
+							children: [
+								m ? b || "Working…" : x ? "Stopped" : "Done",
+								" · updated",
+								" ",
+								n(k)
+							]
+						})
+					]
+				}), /* @__PURE__ */ d(u, {
+					size: "sm",
+					variant: "ghost",
+					onClick: w,
+					"aria-label": "Close preview",
+					"data-testid": "ai-preview-close",
+					children: /* @__PURE__ */ d(l, { className: "size-4" })
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "border-b border-border-subtle px-3 py-2",
+				children: /* @__PURE__ */ d(t, { steps: v })
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "space-y-2 p-3",
+				children: [A.length === 0 ? /* @__PURE__ */ d("p", {
+					className: "px-1 py-4 text-sm text-text-muted",
+					children: m ? "Building… links appear here as each piece is created." : "Nothing built yet."
+				}) : A.map((e) => /* @__PURE__ */ f("div", {
+					"data-testid": "ai-preview-row",
+					className: "flex items-center justify-between gap-3 rounded-md border border-border-subtle bg-bg-surface px-3 py-2",
+					children: [/* @__PURE__ */ f("p", {
+						className: "truncate text-sm font-medium text-text-primary",
+						children: [e.label, " ready"]
+					}), /* @__PURE__ */ f(u, {
+						size: "sm",
+						variant: "ghost",
+						onClick: () => O(e.path),
+						children: ["Open", /* @__PURE__ */ d(o, { className: "ml-1 size-3.5" })]
+					})]
+				}, e.key)), y.dashboard ? /* @__PURE__ */ f(u, {
+					size: "sm",
+					variant: "outline",
+					className: "w-full",
+					"data-testid": "ai-preview-open-in-bigconsole",
+					onClick: () => O(`/bigconsole/dashboards/${y.dashboard ?? ""}`),
+					children: ["Open in BigConsole for the live view", /* @__PURE__ */ d(o, { className: "ml-1 size-3.5" })]
+				}) : null]
+			}),
+			x ? /* @__PURE__ */ d("p", {
+				className: "border-t border-border-subtle px-3 py-2 text-xs text-status-error-text",
+				"data-testid": "ai-preview-error",
+				children: x
+			}) : null
+		]
+	});
+}
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=AiPreviewMiniPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AiPreviewMiniPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewMiniPanel.tsx"],"sourcesContent":["/**\n * AI Preview — the app-shell copy.\n *\n * The full <AiPreviewPanel> lives inside BigConsoleRoot and only exists on\n * /bigconsole pages, but the assistant widget is global: you can start a build\n * from anywhere. This lightweight panel is mounted by the app shell so the build\n * is visible on WHATEVER page you are on — workflows, store, workspaces, search.\n *\n * It is deliberately store-only: no Apollo, no BigConsole context, no data\n * fetching. That is what lets it mount above the router. It shows the same live\n * step rail and caption as the full panel, plus click-through links to each\n * entity as it lands. The rich per-entity tabs stay on the /bigconsole pages,\n * where the data layer actually exists.\n *\n * It renders nothing while the full panel is up (`richMounted`), so the two\n * never stack. Leave a /bigconsole page mid-run and the full panel unmounts,\n * `richMounted` flips false, and this one takes over without a flicker.\n */\nimport { useEffect, useState } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { StepRail, formatAgo, useAssistantSidebarWidth } from './previewShared';\n\ninterface AiPreviewMiniPanelProps {\n  /**\n   * Route to an in-app path. The links are absolute (`/bigconsole/...`) because\n   * this panel renders outside the BigConsole router. Falls back to a full\n   * navigation when the host does not supply a handler.\n   */\n  onNavigate?: (path: string) => void;\n}\n\ninterface QuickLink {\n  key: string;\n  label: string;\n  path: string;\n}\n\nexport function AiPreviewMiniPanel({ onNavigate }: AiPreviewMiniPanelProps) {\n  const isRunning = useAssistantRunStore((state) => state.isRunning);\n  const previewOpen = useAssistantRunStore((state) => state.previewOpen);\n  const hasRun = useAssistantRunStore((state) => state.hasRun);\n  const richMounted = useAssistantRunStore((state) => state.richMounted);\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\n  const [now, setNow] = useState(() => Date.now());\n  useEffect(() => {\n    if (!isRunning) return;\n    const id = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(id);\n  }, [isRunning]);\n\n  const assistantWidth = useAssistantSidebarWidth();\n\n  const go = (path: string) => {\n    if (onNavigate) onNavigate(path);\n    else if (typeof window !== 'undefined') window.location.assign(path);\n  };\n\n  // Nothing has run, or the full in-context panel is already on screen.\n  if (!hasRun || richMounted) return null;\n\n  if (!previewOpen) {\n    return (\n      <div className=\"flex justify-end px-4 pt-1 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          Preview\n          {isRunning ? <Loader2 className=\"ml-1.5 size-3.5 animate-spin\" /> : null}\n        </Button>\n      </div>\n    );\n  }\n\n  const agoSeconds = updatedAt ? Math.max(0, Math.floor((now - updatedAt) / 1000)) : 0;\n\n  const links: QuickLink[] = [];\n  if (entityIds.datasink)\n    links.push({ key: 'datasink', label: 'Data Sink', path: `/bigconsole/datasinks/${entityIds.datasink}` });\n  if (entityIds.dashboard)\n    links.push({ key: 'dashboard', label: 'Dashboard', path: `/bigconsole/dashboards/${entityIds.dashboard}` });\n  if (entityIds.parser) links.push({ key: 'parser', label: 'Parser', path: `/bigconsole/parsers/${entityIds.parser}` });\n\n  return (\n    <section\n      data-testid=\"ai-preview-panel\"\n      data-variant=\"mini\"\n      aria-label=\"AI preview\"\n      style={{ marginRight: assistantWidth ? assistantWidth + 16 : undefined }}\n      className=\"mx-4 mt-1 mb-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\">AI Preview</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              Live\n            </span>\n          ) : null}\n          <span className=\"truncate text-xs text-text-muted\" data-testid=\"ai-preview-ago\">\n            {isRunning ? (caption ? caption : 'Working…') : error ? 'Stopped' : 'Done'} · updated{' '}\n            {formatAgo(agoSeconds)}\n          </span>\n        </div>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={closePreview}\n          aria-label=\"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      {/* Quick links to what has been built so far. The full per-entity tabs live\n          on the /bigconsole pages; here we surface the direct links instead. */}\n      <div className=\"space-y-2 p-3\">\n        {links.length === 0 ? (\n          <p className=\"px-1 py-4 text-sm text-text-muted\">\n            {isRunning ? 'Building… links appear here as each piece is created.' : 'Nothing built yet.'}\n          </p>\n        ) : (\n          links.map((link) => (\n            <div\n              key={link.key}\n              data-testid=\"ai-preview-row\"\n              className=\"flex items-center justify-between gap-3 rounded-md border border-border-subtle bg-bg-surface px-3 py-2\"\n            >\n              <p className=\"truncate text-sm font-medium text-text-primary\">{link.label} ready</p>\n              <Button size=\"sm\" variant=\"ghost\" onClick={() => go(link.path)}>\n                Open\n                <ArrowUpRight className=\"ml-1 size-3.5\" />\n              </Button>\n            </div>\n          ))\n        )}\n        {entityIds.dashboard ? (\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            className=\"w-full\"\n            data-testid=\"ai-preview-open-in-bigconsole\"\n            onClick={() => go(`/bigconsole/dashboards/${entityIds.dashboard ?? ''}`)}\n          >\n            Open in BigConsole for the live view\n            <ArrowUpRight className=\"ml-1 size-3.5\" />\n          </Button>\n        ) : null}\n      </div>\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 AiPreviewMiniPanel;\n"],"mappings":"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"}

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

@@ -1,64 +1,37 @@
 import { useBigConsoleNavigate as e } from "../../context/BigConsoleContext.js";
 import "../../context/index.js";
-import { PREVIEW_STEPS as t, PREVIEW_STEP_LABEL as n, useAssistantRunStore as r } from "../../assistant/assistantRunStore.js";
-import i from "../../hooks/useDashboardOperations.js";
-import a from "../../hooks/useDataSinkOperations.js";
-import ee from "../../hooks/useParserOperations.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 { useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
-import { Check as d, ChevronRight as f, Loader2 as p, Minus as m, Sparkles as h, X as g } from "lucide-react";
-import { Badge as _, Button as v, Spinner as y, Tabs as b, TabsContent as x, TabsList as S, TabsTrigger as C } from "@burdenoff/fe-libs/ui";
-import { jsx as w, jsxs as T } from "react/jsx-runtime";
+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 { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/AiPreviewPanel.tsx
-var E = 3500, D = 3e4, O = "default";
-function k({ status: e }) {
-	return e === "done" ? /* @__PURE__ */ w(d, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ w(p, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ w(m, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ w("span", { className: "size-1.5 rounded-full bg-border-strong" });
-}
-function A({ steps: e }) {
-	return /* @__PURE__ */ w("div", {
-		className: "flex flex-wrap items-center gap-1",
-		"data-testid": "ai-preview-step-rail",
-		children: t.map((r, i) => /* @__PURE__ */ T("div", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ T("span", {
-				"data-testid": `ai-preview-step-${r}`,
-				"data-status": e[r],
-				className: ["inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium", e[r] === "done" ? "border-status-success-border bg-status-success-bg text-status-success-text" : e[r] === "running" ? "border-border-strong bg-bg-surface text-text-primary" : "border-border-default text-text-muted"].join(" "),
-				children: [
-					/* @__PURE__ */ w(k, { status: e[r] }),
-					n[r],
-					e[r] === "skipped" ? /* @__PURE__ */ w("span", {
-						className: "text-[10px]",
-						children: "skipped"
-					}) : null
-				]
-			}), i < t.length - 1 ? /* @__PURE__ */ w(f, { className: "size-3.5 text-text-muted" }) : null]
-		}, r))
-	});
-}
-function j(e) {
-	return e < 5 ? "just now" : e < 60 ? `${String(e)}s ago` : `${String(Math.floor(e / 60))}m ago`;
-}
-function M({ id: e, title: t, meta: n, isNew: r, onOpen: i }) {
-	return /* @__PURE__ */ T("div", {
+var C = 3500, w = 3e4, T = "default";
+function E({ id: e, title: t, meta: n, isNew: r, onOpen: i }) {
+	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__ */ T("div", {
+		children: [/* @__PURE__ */ S("div", {
 			className: "min-w-0",
-			children: [/* @__PURE__ */ w("p", {
+			children: [/* @__PURE__ */ x("p", {
 				className: "truncate text-sm font-medium text-text-primary",
 				children: t
-			}), n ? /* @__PURE__ */ w("p", {
+			}), n ? /* @__PURE__ */ x("p", {
 				className: "truncate text-xs text-text-muted",
 				children: n
 			}) : null]
-		}), /* @__PURE__ */ T("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "flex shrink-0 items-center gap-2",
-			children: [r ? /* @__PURE__ */ T(_, {
+			children: [r ? /* @__PURE__ */ S(g, {
 				className: "bg-status-success-bg text-status-success-text",
-				children: [/* @__PURE__ */ w(h, { className: "mr-1 size-3" }), "just built"]
-			}) : null, i ? /* @__PURE__ */ w(v, {
+				children: [/* @__PURE__ */ x(m, { className: "mr-1 size-3" }), "just built"]
+			}) : null, i ? /* @__PURE__ */ x(_, {
 				size: "sm",
 				variant: "ghost",
 				onClick: i,
@@ -67,34 +40,13 @@ function M({ id: e, title: t, meta: n, isNew: r, onOpen: i }) {
 		})]
 	});
 }
-function N() {
-	let [e, t] = u(0);
-	return s(() => {
-		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);
-		};
-		e();
-		let n = window.setInterval(e, 500);
-		return window.addEventListener("resize", e), () => {
-			window.clearInterval(n), window.removeEventListener("resize", e);
-		};
-	}, []), e;
-}
-function P({ loading: e, empty: t }) {
-	return e ? /* @__PURE__ */ T("div", {
-		className: "flex items-center gap-2 px-1 py-6 text-sm text-text-muted",
-		children: [/* @__PURE__ */ w(y, { className: "size-4" }), "Loading…"]
-	}) : /* @__PURE__ */ w("p", {
-		className: "px-1 py-6 text-sm text-text-muted",
-		children: t
-	});
-}
-function F() {
-	let n = e(), d = r((e) => e.isRunning), f = r((e) => e.previewOpen), m = r((e) => e.hasRun), _ = r((e) => e.steps), y = r((e) => e.entityIds), k = r((e) => e.caption), F = r((e) => e.error), I = r((e) => e.updatedAt), te = r((e) => e.openPreview), L = r((e) => e.closePreview), [R, z] = u("datasink"), [B, V] = u(() => Date.now()), H = y.dashboard, U = a({ skipFetch: !0 }), W = i(), G = ee({
-		consoleId: H ?? O,
+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 = l({
+	}), K = o(void 0, H, { skipFetch: !H }), q = d({
 		sinks: U.refetch,
 		dashboards: W.refetch,
 		parsers: G.refetch,
@@ -105,165 +57,165 @@ function F() {
 		dashboards: W.refetch,
 		parsers: G.refetch,
 		widgets: K.refetch
-	}, s(() => {
-		if (!m) return;
+	}, l(() => {
+		if (!k) return;
 		let e = Infinity;
-		d || (e = Date.now() + D);
+		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, E), r = () => {
+		let n = window.setInterval(t, C), r = () => {
 			document.visibilityState === "visible" && t();
 		};
 		return document.addEventListener("visibilitychange", r), () => {
 			window.clearInterval(n), document.removeEventListener("visibilitychange", r);
 		};
 	}, [
-		m,
-		d,
+		k,
+		D,
 		H
-	]), s(() => {
-		let e = t.find((e) => _[e] === "running");
+	]), l(() => {
+		let e = t.find((e) => A[e] === "running");
 		e && z(e);
-	}, [_]);
-	let J = I ? Math.max(0, Math.floor((B - I) / 1e3)) : 0, Y = N(), X = c(() => U.dataSinks.slice(0, 25), [U.dataSinks]), Z = c(() => W.dashboards.slice(0, 25), [W.dashboards]), Q = c(() => G.parsers.slice(0, 25), [G.parsers]), $ = c(() => K.widgets.slice(0, 25), [K.widgets]);
-	return m ? f ? /* @__PURE__ */ T("section", {
+	}, [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", {
 		"data-testid": "ai-preview-panel",
 		"aria-label": "AI preview",
 		style: { marginRight: Y ? Y + 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__ */ T("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-bg-surface px-3 py-2",
-				children: [/* @__PURE__ */ T("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "flex min-w-0 items-center gap-2",
 					children: [
-						/* @__PURE__ */ w(h, { className: "size-4 shrink-0 text-action-primary-bg" }),
-						/* @__PURE__ */ w("h2", {
+						/* @__PURE__ */ x(m, { className: "size-4 shrink-0 text-action-primary-bg" }),
+						/* @__PURE__ */ x("h2", {
 							className: "truncate text-sm font-semibold text-text-primary",
 							children: "AI Preview"
 						}),
-						d ? /* @__PURE__ */ T("span", {
+						D ? /* @__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__ */ T("span", {
+							children: [/* @__PURE__ */ S("span", {
 								className: "relative flex size-2",
-								children: [/* @__PURE__ */ w("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75" }), /* @__PURE__ */ w("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
+								children: [/* @__PURE__ */ x("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75" }), /* @__PURE__ */ x("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
 							}), "Live"]
 						}) : null,
-						/* @__PURE__ */ T("span", {
+						/* @__PURE__ */ S("span", {
 							className: "truncate text-xs text-text-muted",
 							"data-testid": "ai-preview-ago",
 							children: [
-								d ? k || "Working…" : F ? "Stopped" : "Done",
+								D ? M || "Working…" : N ? "Stopped" : "Done",
 								" · updated",
 								" ",
-								j(J)
+								c(J)
 							]
 						})
 					]
-				}), /* @__PURE__ */ w(v, {
+				}), /* @__PURE__ */ x(_, {
 					size: "sm",
 					variant: "ghost",
-					onClick: L,
+					onClick: I,
 					"aria-label": "Close preview",
 					"data-testid": "ai-preview-close",
-					children: /* @__PURE__ */ w(g, { className: "size-4" })
+					children: /* @__PURE__ */ x(h, { className: "size-4" })
 				})]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ x("div", {
 				className: "border-b border-border-subtle px-3 py-2",
-				children: /* @__PURE__ */ w(A, { steps: _ })
+				children: /* @__PURE__ */ x(ee, { steps: A })
 			}),
-			/* @__PURE__ */ T(b, {
+			/* @__PURE__ */ S(ne, {
 				value: R,
 				onValueChange: (e) => z(e),
-				children: [/* @__PURE__ */ T(S, {
+				children: [/* @__PURE__ */ S(y, {
 					className: "mx-3 mt-2",
 					children: [
-						/* @__PURE__ */ w(C, {
+						/* @__PURE__ */ x(b, {
 							value: "datasink",
 							"data-testid": "ai-preview-tab-datasink",
 							children: "Data Sinks"
 						}),
-						/* @__PURE__ */ w(C, {
+						/* @__PURE__ */ x(b, {
 							value: "dashboard",
 							"data-testid": "ai-preview-tab-dashboard",
 							children: "Dashboards"
 						}),
-						/* @__PURE__ */ w(C, {
+						/* @__PURE__ */ x(b, {
 							value: "parser",
 							"data-testid": "ai-preview-tab-parser",
 							children: "Parsers"
 						}),
-						/* @__PURE__ */ w(C, {
+						/* @__PURE__ */ x(b, {
 							value: "widget",
 							"data-testid": "ai-preview-tab-widget",
 							children: "Widgets"
 						})
 					]
-				}), /* @__PURE__ */ T("div", {
+				}), /* @__PURE__ */ S("div", {
 					className: "max-h-[320px] overflow-y-auto p-3",
 					children: [
-						/* @__PURE__ */ w(x, {
+						/* @__PURE__ */ x(v, {
 							value: "datasink",
 							className: "space-y-2",
-							children: X.length === 0 ? /* @__PURE__ */ w(P, {
+							children: X.length === 0 ? /* @__PURE__ */ x(s, {
 								loading: U.loading,
 								empty: "No data sinks yet."
-							}) : X.map((e) => /* @__PURE__ */ w(M, {
+							}) : X.map((e) => /* @__PURE__ */ x(E, {
 								id: e.id,
 								title: e.name ?? e.key,
 								meta: e.status,
-								isNew: e.id === y.datasink,
-								onOpen: () => n(`/datasinks/${e.id}`)
+								isNew: e.id === j.datasink,
+								onOpen: () => g(`/datasinks/${e.id}`)
 							}, e.id))
 						}),
-						/* @__PURE__ */ w(x, {
+						/* @__PURE__ */ x(v, {
 							value: "dashboard",
 							className: "space-y-2",
-							children: Z.length === 0 ? /* @__PURE__ */ w(P, {
+							children: Z.length === 0 ? /* @__PURE__ */ x(s, {
 								loading: W.loading,
 								empty: "No dashboards yet."
-							}) : Z.map((e) => /* @__PURE__ */ w(M, {
+							}) : Z.map((e) => /* @__PURE__ */ x(E, {
 								id: e.id,
 								title: e.name,
 								meta: `${String(e.widgetCount ?? 0)} widget(s)`,
-								isNew: e.id === y.dashboard,
-								onOpen: () => n(`/dashboards/${e.id}`)
+								isNew: e.id === j.dashboard,
+								onOpen: () => g(`/dashboards/${e.id}`)
 							}, e.id))
 						}),
-						/* @__PURE__ */ w(x, {
+						/* @__PURE__ */ x(v, {
 							value: "parser",
 							className: "space-y-2",
-							children: H ? Q.length === 0 ? /* @__PURE__ */ w(P, {
+							children: H ? Q.length === 0 ? /* @__PURE__ */ x(s, {
 								loading: G.loading,
 								empty: "No parsers on this dashboard yet."
-							}) : Q.map((e) => /* @__PURE__ */ w(M, {
+							}) : Q.map((e) => /* @__PURE__ */ x(E, {
 								id: e.id,
 								title: e.name,
 								meta: `${e.type} · ${e.status}`,
-								isNew: e.id === y.parser,
-								onOpen: () => n(`/parsers/${e.id}`)
-							}, e.id)) : /* @__PURE__ */ w("p", {
+								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."
 							})
 						}),
-						/* @__PURE__ */ w(x, {
+						/* @__PURE__ */ x(v, {
 							value: "widget",
 							className: "space-y-2",
-							children: H ? $.length === 0 ? /* @__PURE__ */ w(P, {
+							children: H ? $.length === 0 ? /* @__PURE__ */ x(s, {
 								loading: K.loading,
 								empty: "No widgets on this dashboard yet."
-							}) : $.map((e) => /* @__PURE__ */ w(M, {
+							}) : $.map((e) => /* @__PURE__ */ x(E, {
 								id: e.id,
 								title: e.title,
 								meta: e.type,
-								isNew: e.id === $[$.length - 1]?.id && _.widget === "done",
-								onOpen: () => n(`/dashboards/${H}`)
-							}, e.id)) : /* @__PURE__ */ w("p", {
+								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."
 							})
@@ -271,29 +223,29 @@ function F() {
 					]
 				})]
 			}),
-			F ? /* @__PURE__ */ w("p", {
+			N ? /* @__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: F
+				children: N
 			}) : null
 		]
-	}) : /* @__PURE__ */ w("div", {
+	}) : /* @__PURE__ */ x("div", {
 		className: "flex justify-end px-4 pt-3 md:px-6",
 		style: { marginRight: Y },
-		children: /* @__PURE__ */ T(v, {
+		children: /* @__PURE__ */ S(_, {
 			size: "sm",
 			variant: "outline",
-			onClick: te,
+			onClick: F,
 			"data-testid": "ai-preview-open",
 			children: [
-				/* @__PURE__ */ w(h, { className: "mr-1.5 size-4" }),
+				/* @__PURE__ */ x(m, { className: "mr-1.5 size-4" }),
 				"Preview",
-				d ? /* @__PURE__ */ w(p, { className: "ml-1.5 size-3.5 animate-spin" }) : null
+				D ? /* @__PURE__ */ x(p, { className: "ml-1.5 size-3.5 animate-spin" }) : null
 			]
 		})
 	}) : null;
 }
 //#endregion
-export { F as default };
+export { D 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.\n *\n * Opens by itself the moment a prompt starts, and shows the DataSink → Dashboard\n * → Parser → Widget chain filling in live: a step rail driven by the agent's own\n * narration, and four tabs listing the real entities as they land.\n *\n * Why polling and not a subscription: the four entity types have no working\n * GraphQL subscriptions (DataSink's are declared in the SDL but have no\n * resolvers; the others have none at all). The same 3.5s poll is already used by\n * DashboardViewPage for exactly this reason. Note the real freshness floor is\n * fe-libs' ~15s shared read cache, not this interval.\n */\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Badge, Button, Spinner, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { Check, ChevronRight, Loader2, Minus, Sparkles, X } from 'lucide-react';\n\nimport {\n  PREVIEW_STEP_LABEL,\n  PREVIEW_STEPS,\n  type PreviewStepKey,\n  type PreviewStepStatus,\n  useAssistantRunStore,\n} from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useDashboardOperations } from '../../hooks/useDashboardOperations';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useParserOperations } from '../../hooks/useParserOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\n\n/** Matches DashboardViewPage's live cadence. */\nconst LIVE_POLL_MS = 3500;\n/** Keep polling briefly after the turn ends — the last write can land late. */\nconst TRAILING_POLL_MS = 30_000;\n/** Parsers are listed per console; a console IS a dashboard. */\nconst DEFAULT_CONSOLE_ID = 'default';\n\nfunction 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\nfunction 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\nfunction 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\ninterface RowProps {\n  id: string;\n  title: string;\n  meta?: string;\n  isNew: boolean;\n  onOpen?: () => void;\n}\n\nfunction EntityRow({ id, title, meta, isNew, onOpen }: RowProps) {\n  return (\n    <div\n      data-testid=\"ai-preview-row\"\n      data-entity-id={id}\n      className={[\n        'flex items-center justify-between gap-3 rounded-md border px-3 py-2',\n        isNew ? 'border-status-success-border bg-status-success-bg/30' : 'border-border-subtle bg-bg-surface',\n      ].join(' ')}\n    >\n      <div className=\"min-w-0\">\n        <p className=\"truncate text-sm font-medium text-text-primary\">{title}</p>\n        {meta ? <p className=\"truncate text-xs text-text-muted\">{meta}</p> : null}\n      </div>\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {isNew ? (\n          <Badge className=\"bg-status-success-bg text-status-success-text\">\n            <Sparkles className=\"mr-1 size-3\" />\n            just built\n          </Badge>\n        ) : null}\n        {onOpen ? (\n          <Button size=\"sm\" variant=\"ghost\" onClick={onOpen}>\n            Open\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\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 */\nfunction 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\nfunction EmptyOrLoading({ loading, empty }: { loading: boolean; empty: string }) {\n  if (loading) {\n    return (\n      <div className=\"flex items-center gap-2 px-1 py-6 text-sm text-text-muted\">\n        <Spinner className=\"size-4\" />\n        Loading…\n      </div>\n    );\n  }\n  return <p className=\"px-1 py-6 text-sm text-text-muted\">{empty}</p>;\n}\n\nexport function AiPreviewPanel() {\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\n  const [tab, setTab] = useState<PreviewStepKey>('datasink');\n  const [now, setNow] = useState(() => Date.now());\n\n  const dashboardId = entityIds.dashboard;\n\n  // The panel does its own fetching, so the tabs are live even before the user\n  // opens them — the \"just built\" highlight must be right the instant they look.\n  const sinks = useDataSinkOperations({ skipFetch: true });\n  const dashboards = useDashboardOperations();\n  const parsers = useParserOperations({ consoleId: dashboardId ?? DEFAULT_CONSOLE_ID, skipFetch: true });\n  const widgets = useWidgetOperations(undefined, dashboardId, { skipFetch: !dashboardId });\n\n  const refetchRef = useRef({\n    sinks: sinks.refetch,\n    dashboards: dashboards.refetch,\n    parsers: parsers.refetch,\n    widgets: widgets.refetch,\n  });\n  refetchRef.current = {\n    sinks: sinks.refetch,\n    dashboards: dashboards.refetch,\n    parsers: parsers.refetch,\n    widgets: widgets.refetch,\n  };\n\n  // Follow the build. Keeps polling for a short while after the turn settles so\n  // the final widget does not miss the panel by a second.\n  useEffect(() => {\n    if (!hasRun) return;\n\n    let stopAt = Number.POSITIVE_INFINITY;\n    if (!isRunning) stopAt = Date.now() + TRAILING_POLL_MS;\n\n    const poll = () => {\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      if (Date.now() > stopAt) return;\n      void refetchRef.current.sinks();\n      void refetchRef.current.dashboards();\n      if (dashboardId) {\n        void refetchRef.current.parsers();\n        void refetchRef.current.widgets();\n      }\n      setNow(Date.now());\n    };\n\n    poll();\n    const intervalId = window.setInterval(poll, LIVE_POLL_MS);\n    const onVisible = () => {\n      if (document.visibilityState === 'visible') poll();\n    };\n    document.addEventListener('visibilitychange', onVisible);\n    return () => {\n      window.clearInterval(intervalId);\n      document.removeEventListener('visibilitychange', onVisible);\n    };\n  }, [hasRun, isRunning, dashboardId]);\n\n  // Jump the user to whatever is being worked on, so they are not left staring\n  // at the Data Sinks tab while the parser is the thing actually happening.\n  useEffect(() => {\n    const active = PREVIEW_STEPS.find((key) => steps[key] === 'running');\n    if (active) setTab(active);\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  const sinkRows = useMemo(() => sinks.dataSinks.slice(0, 25), [sinks.dataSinks]);\n  const dashboardRows = useMemo(() => dashboards.dashboards.slice(0, 25), [dashboards.dashboards]);\n  const parserRows = useMemo(() => parsers.parsers.slice(0, 25), [parsers.parsers]);\n  const widgetRows = useMemo(() => widgets.widgets.slice(0, 25), [widgets.widgets]);\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          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=\"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\">AI Preview</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              Live\n            </span>\n          ) : null}\n          <span className=\"truncate text-xs text-text-muted\" data-testid=\"ai-preview-ago\">\n            {isRunning ? (caption ? caption : 'Working…') : error ? 'Stopped' : 'Done'} · updated{' '}\n            {formatAgo(agoSeconds)}\n          </span>\n        </div>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={closePreview}\n          aria-label=\"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 */}\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            Data Sinks\n          </TabsTrigger>\n          <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n            Dashboards\n          </TabsTrigger>\n          <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n            Parsers\n          </TabsTrigger>\n          <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n            Widgets\n          </TabsTrigger>\n        </TabsList>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-3\">\n          <TabsContent value=\"datasink\" className=\"space-y-2\">\n            {sinkRows.length === 0 ? (\n              <EmptyOrLoading loading={sinks.loading} empty=\"No data sinks yet.\" />\n            ) : (\n              sinkRows.map((sink) => (\n                <EntityRow\n                  key={sink.id}\n                  id={sink.id}\n                  title={sink.name ?? sink.key}\n                  meta={sink.status}\n                  isNew={sink.id === entityIds.datasink}\n                  onOpen={() => navigate(`/datasinks/${sink.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\" className=\"space-y-2\">\n            {dashboardRows.length === 0 ? (\n              <EmptyOrLoading loading={dashboards.loading} empty=\"No dashboards yet.\" />\n            ) : (\n              dashboardRows.map((dashboard) => (\n                <EntityRow\n                  key={dashboard.id}\n                  id={dashboard.id}\n                  title={dashboard.name}\n                  meta={`${String(dashboard.widgetCount ?? 0)} widget(s)`}\n                  isNew={dashboard.id === entityIds.dashboard}\n                  onOpen={() => navigate(`/dashboards/${dashboard.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"parser\" className=\"space-y-2\">\n            {!dashboardId ? (\n              <p className=\"px-1 py-6 text-sm text-text-muted\">\n                Parsers are listed per dashboard — waiting for the dashboard to be created.\n              </p>\n            ) : parserRows.length === 0 ? (\n              <EmptyOrLoading loading={parsers.loading} empty=\"No parsers on this dashboard yet.\" />\n            ) : (\n              parserRows.map((parser) => (\n                <EntityRow\n                  key={parser.id}\n                  id={parser.id}\n                  title={parser.name}\n                  meta={`${parser.type} · ${parser.status}`}\n                  isNew={parser.id === entityIds.parser}\n                  onOpen={() => navigate(`/parsers/${parser.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"widget\" className=\"space-y-2\">\n            {!dashboardId ? (\n              <p className=\"px-1 py-6 text-sm text-text-muted\">\n                Widgets live on a dashboard — waiting for the dashboard to be created.\n              </p>\n            ) : widgetRows.length === 0 ? (\n              <EmptyOrLoading loading={widgets.loading} empty=\"No widgets on this dashboard yet.\" />\n            ) : (\n              widgetRows.map((widget) => (\n                <EntityRow\n                  key={widget.id}\n                  id={widget.id}\n                  title={widget.title}\n                  meta={widget.type}\n                  // A widget has no link of its own in the narration, so the most\n                  // recent one on the dashboard being built is the new one.\n                  isNew={widget.id === widgetRows[widgetRows.length - 1]?.id && steps.widget === 'done'}\n                  onOpen={() => navigate(`/dashboards/${dashboardId}`)}\n                />\n              ))\n            )}\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":";;;;;;;;;;;;AA+BA,IAAM,IAAe,MAEf,IAAmB,KAEnB,IAAqB;AAE3B,SAAS,EAAQ,EAAE,aAAyC;AAI1D,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,SAAS,EAAS,EAAE,YAA+D;AACjF,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,SAAS,EAAU,GAAyB;AAG1C,QAFI,IAAU,IAAU,aACpB,IAAU,KAAW,GAAG,OAAO,EAAQ,CAAC,SACrC,GAAG,OAAO,KAAK,MAAM,IAAU,GAAG,CAAC,CAAC;;AAW7C,SAAS,EAAU,EAAE,OAAI,UAAO,SAAM,UAAO,aAAoB;AAC/D,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,kBAAgB;EAChB,WAAW,CACT,uEACA,IAAQ,yDAAyD,qCAClE,CAAC,KAAK,IAAI;YANb,CAQE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAAkD;IAAU,CAAA,EACxE,IAAO,kBAAC,KAAD;IAAG,WAAU;cAAoC;IAAS,CAAA,GAAG,KACjE;MACN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,IACC,kBAAC,GAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,GAAD,EAAU,WAAU,eAAgB,CAAA,EAAA,aAE9B;QACN,MACH,IACC,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAQ,SAAS;cAAQ;IAE1C,CAAA,GACP,KACA;KACF;;;AAWV,SAAS,IAAmC;CAC1C,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;;AAGT,SAAS,EAAe,EAAE,YAAS,YAA8C;AAS/E,QARI,IAEA,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,EAAA,WAE1B;MAGH,kBAAC,KAAD;EAAG,WAAU;YAAqC;EAAU,CAAA;;AAGrE,SAAgB,IAAiB;CAC/B,IAAM,IAAW,GAAuB,EAElC,IAAY,GAAsB,MAAU,EAAM,UAAU,EAC5D,IAAc,GAAsB,MAAU,EAAM,YAAY,EAChE,IAAS,GAAsB,MAAU,EAAM,OAAO,EACtD,IAAQ,GAAsB,MAAU,EAAM,MAAM,EACpD,IAAY,GAAsB,MAAU,EAAM,UAAU,EAC5D,IAAU,GAAsB,MAAU,EAAM,QAAQ,EACxD,IAAQ,GAAsB,MAAU,EAAM,MAAM,EACpD,IAAY,GAAsB,MAAU,EAAM,UAAU,EAC5D,KAAc,GAAsB,MAAU,EAAM,YAAY,EAChE,IAAe,GAAsB,MAAU,EAAM,aAAa,EAElE,CAAC,GAAK,KAAU,EAAyB,WAAW,EACpD,CAAC,GAAK,KAAU,QAAe,KAAK,KAAK,CAAC,EAE1C,IAAc,EAAU,WAIxB,IAAQ,EAAsB,EAAE,WAAW,IAAM,CAAC,EAClD,IAAa,GAAwB,EACrC,IAAU,GAAoB;EAAE,WAAW,KAAe;EAAoB,WAAW;EAAM,CAAC,EAChG,IAAU,EAAoB,KAAA,GAAW,GAAa,EAAE,WAAW,CAAC,GAAa,CAAC,EAElF,IAAa,EAAO;EACxB,OAAO,EAAM;EACb,YAAY,EAAW;EACvB,SAAS,EAAQ;EACjB,SAAS,EAAQ;EAClB,CAAC;AA0CF,CAzCA,EAAW,UAAU;EACnB,OAAO,EAAM;EACb,YAAY,EAAW;EACvB,SAAS,EAAQ;EACjB,SAAS,EAAQ;EAClB,EAID,QAAgB;AACd,MAAI,CAAC,EAAQ;EAEb,IAAI,IAAS;AACb,EAAK,MAAW,IAAS,KAAK,KAAK,GAAG;EAEtC,IAAM,UAAa;AACb,UAAO,WAAa,OAAe,SAAS,oBAAoB,aAChE,KAAK,KAAK,GAAG,MACZ,EAAW,QAAQ,OAAO,EAC1B,EAAW,QAAQ,YAAY,EAChC,MACG,EAAW,QAAQ,SAAS,EAC5B,EAAW,QAAQ,SAAS,GAEnC,EAAO,KAAK,KAAK,CAAC;;AAGpB,KAAM;EACN,IAAM,IAAa,OAAO,YAAY,GAAM,EAAa,EACnD,UAAkB;AACtB,GAAI,SAAS,oBAAoB,aAAW,GAAM;;AAGpD,SADA,SAAS,iBAAiB,oBAAoB,EAAU,QAC3C;AAEX,GADA,OAAO,cAAc,EAAW,EAChC,SAAS,oBAAoB,oBAAoB,EAAU;;IAE5D;EAAC;EAAQ;EAAW;EAAY,CAAC,EAIpC,QAAgB;EACd,IAAM,IAAS,EAAc,MAAM,MAAQ,EAAM,OAAS,UAAU;AACpE,EAAI,KAAQ,EAAO,EAAO;IACzB,CAAC,EAAM,CAAC;CAEX,IAAM,IAAa,IAAY,KAAK,IAAI,GAAG,KAAK,OAAO,IAAM,KAAa,IAAK,CAAC,GAAG,GAS7E,IAAiB,GAA0B,EAE3C,IAAW,QAAc,EAAM,UAAU,MAAM,GAAG,GAAG,EAAE,CAAC,EAAM,UAAU,CAAC,EACzE,IAAgB,QAAc,EAAW,WAAW,MAAM,GAAG,GAAG,EAAE,CAAC,EAAW,WAAW,CAAC,EAC1F,IAAa,QAAc,EAAQ,QAAQ,MAAM,GAAG,GAAG,EAAE,CAAC,EAAQ,QAAQ,CAAC,EAC3E,IAAa,QAAc,EAAQ,QAAQ,MAAM,GAAG,GAAG,EAAE,CAAC,EAAQ,QAAQ,CAAC;AAgBjF,QAdK,IAEA,IAaH,kBAAC,WAAD;EACE,eAAY;EACZ,cAAW;EACX,OAAO,EAAE,aAAa,IAAiB,IAAiB,KAAK,KAAA,GAAW;EACxE,WAAU;YAJZ;GAOE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAU,WAAU,0CAA2C,CAAA;MAC/D,kBAAC,MAAD;OAAI,WAAU;iBAAmD;OAAe,CAAA;MAC/E,IACC,kBAAC,QAAD;OACE,WAAU;OACV,eAAY;iBAFd,CAIE,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,kBAAC,QAAD,EAAM,WAAU,8FAA+F,CAAA,EAC/G,kBAAC,QAAD,EAAM,WAAU,mEAAoE,CAAA,CAC/E;kBAEF;WACL;MACJ,kBAAC,QAAD;OAAM,WAAU;OAAmC,eAAY;iBAA/D;QACG,IAAa,KAAoB,aAAc,IAAQ,YAAY;QAAO;QAAW;QACrF,EAAU,EAAW;QACjB;;MACH;QACN,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACT,cAAW;KACX,eAAY;eAEZ,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;KACjB,CAAA,CACL;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAiB,UAAS,CAAA;IACtB,CAAA;GAGN,kBAAC,GAAD;IAAM,OAAO;IAAK,gBAAgB,MAAU,EAAO,EAAwB;cAA3E,CACE,kBAAC,GAAD;KAAU,WAAU;eAApB;MACE,kBAAC,GAAD;OAAa,OAAM;OAAW,eAAY;iBAA0B;OAEtD,CAAA;MACd,kBAAC,GAAD;OAAa,OAAM;OAAY,eAAY;iBAA2B;OAExD,CAAA;MACd,kBAAC,GAAD;OAAa,OAAM;OAAS,eAAY;iBAAwB;OAElD,CAAA;MACd,kBAAC,GAAD;OAAa,OAAM;OAAS,eAAY;iBAAwB;OAElD,CAAA;MACL;QAEX,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAa,OAAM;OAAW,WAAU;iBACrC,EAAS,WAAW,IACnB,kBAAC,GAAD;QAAgB,SAAS,EAAM;QAAS,OAAM;QAAuB,CAAA,GAErE,EAAS,KAAK,MACZ,kBAAC,GAAD;QAEE,IAAI,EAAK;QACT,OAAO,EAAK,QAAQ,EAAK;QACzB,MAAM,EAAK;QACX,OAAO,EAAK,OAAO,EAAU;QAC7B,cAAc,EAAS,cAAc,EAAK,KAAK;QAC/C,EANK,EAAK,GAMV,CACF;OAEQ,CAAA;MAEd,kBAAC,GAAD;OAAa,OAAM;OAAY,WAAU;iBACtC,EAAc,WAAW,IACxB,kBAAC,GAAD;QAAgB,SAAS,EAAW;QAAS,OAAM;QAAuB,CAAA,GAE1E,EAAc,KAAK,MACjB,kBAAC,GAAD;QAEE,IAAI,EAAU;QACd,OAAO,EAAU;QACjB,MAAM,GAAG,OAAO,EAAU,eAAe,EAAE,CAAC;QAC5C,OAAO,EAAU,OAAO,EAAU;QAClC,cAAc,EAAS,eAAe,EAAU,KAAK;QACrD,EANK,EAAU,GAMf,CACF;OAEQ,CAAA;MAEd,kBAAC,GAAD;OAAa,OAAM;OAAS,WAAU;iBAClC,IAIE,EAAW,WAAW,IACxB,kBAAC,GAAD;QAAgB,SAAS,EAAQ;QAAS,OAAM;QAAsC,CAAA,GAEtF,EAAW,KAAK,MACd,kBAAC,GAAD;QAEE,IAAI,EAAO;QACX,OAAO,EAAO;QACd,MAAM,GAAG,EAAO,KAAK,KAAK,EAAO;QACjC,OAAO,EAAO,OAAO,EAAU;QAC/B,cAAc,EAAS,YAAY,EAAO,KAAK;QAC/C,EANK,EAAO,GAMZ,CACF,GAfF,kBAAC,KAAD;QAAG,WAAU;kBAAoC;QAE7C,CAAA;OAeM,CAAA;MAEd,kBAAC,GAAD;OAAa,OAAM;OAAS,WAAU;iBAClC,IAIE,EAAW,WAAW,IACxB,kBAAC,GAAD;QAAgB,SAAS,EAAQ;QAAS,OAAM;QAAsC,CAAA,GAEtF,EAAW,KAAK,MACd,kBAAC,GAAD;QAEE,IAAI,EAAO;QACX,OAAO,EAAO;QACd,MAAM,EAAO;QAGb,OAAO,EAAO,OAAO,EAAW,EAAW,SAAS,IAAI,MAAM,EAAM,WAAW;QAC/E,cAAc,EAAS,eAAe,IAAc;QACpD,EARK,EAAO,GAQZ,CACF,GAjBF,kBAAC,KAAD;QAAG,WAAU;kBAAoC;QAE7C,CAAA;OAiBM,CAAA;MACV;OACD;;GAEN,IACC,kBAAC,KAAD;IACE,WAAU;IACV,eAAY;cAEX;IACC,CAAA,GACF;GACI;MAjKR,kBAAC,OAAD;EAAK,WAAU;EAAqC,OAAO,EAAE,aAAa,GAAgB;YACxF,kBAAC,GAAD;GAAQ,MAAK;GAAK,SAAQ;GAAU,SAAS;GAAa,eAAY;aAAtE;IACE,kBAAC,GAAD,EAAU,WAAU,iBAAkB,CAAA;;IAErC,IAAY,kBAAC,GAAD,EAAS,WAAU,gCAAiC,CAAA,GAAG;IAC7D;;EACL,CAAA,GAVU"}
+{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build.\n *\n * Opens by itself the moment a prompt starts, and shows the DataSink → Dashboard\n * → Parser → Widget chain filling in live: a step rail driven by the agent's own\n * narration, and four tabs listing the real entities as they land.\n *\n * Why polling and not a subscription: the four entity types have no working\n * GraphQL subscriptions (DataSink's are declared in the SDL but have no\n * resolvers; the others have none at all). The same 3.5s poll is already used by\n * DashboardViewPage for exactly this reason. Note the real freshness floor is\n * fe-libs' ~15s shared read cache, not this interval.\n */\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { Badge, Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, type PreviewStepKey, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useDashboardOperations } from '../../hooks/useDashboardOperations';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useParserOperations } from '../../hooks/useParserOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\nimport { EmptyOrLoading, StepRail, formatAgo, useAssistantSidebarWidth } from './previewShared';\n\n/** Matches DashboardViewPage's live cadence. */\nconst LIVE_POLL_MS = 3500;\n/** Keep polling briefly after the turn ends — the last write can land late. */\nconst TRAILING_POLL_MS = 30_000;\n/** Parsers are listed per console; a console IS a dashboard. */\nconst DEFAULT_CONSOLE_ID = 'default';\n\ninterface RowProps {\n  id: string;\n  title: string;\n  meta?: string;\n  isNew: boolean;\n  onOpen?: () => void;\n}\n\nfunction EntityRow({ id, title, meta, isNew, onOpen }: RowProps) {\n  return (\n    <div\n      data-testid=\"ai-preview-row\"\n      data-entity-id={id}\n      className={[\n        'flex items-center justify-between gap-3 rounded-md border px-3 py-2',\n        isNew ? 'border-status-success-border bg-status-success-bg/30' : 'border-border-subtle bg-bg-surface',\n      ].join(' ')}\n    >\n      <div className=\"min-w-0\">\n        <p className=\"truncate text-sm font-medium text-text-primary\">{title}</p>\n        {meta ? <p className=\"truncate text-xs text-text-muted\">{meta}</p> : null}\n      </div>\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {isNew ? (\n          <Badge className=\"bg-status-success-bg text-status-success-text\">\n            <Sparkles className=\"mr-1 size-3\" />\n            just built\n          </Badge>\n        ) : null}\n        {onOpen ? (\n          <Button size=\"sm\" variant=\"ghost\" onClick={onOpen}>\n            Open\n          </Button>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nexport function AiPreviewPanel() {\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  // The panel does its own fetching, so the tabs are live even before the user\n  // opens them — the \"just built\" highlight must be right the instant they look.\n  const sinks = useDataSinkOperations({ skipFetch: true });\n  const dashboards = useDashboardOperations();\n  const parsers = useParserOperations({ consoleId: dashboardId ?? DEFAULT_CONSOLE_ID, skipFetch: true });\n  const widgets = useWidgetOperations(undefined, dashboardId, { skipFetch: !dashboardId });\n\n  const refetchRef = useRef({\n    sinks: sinks.refetch,\n    dashboards: dashboards.refetch,\n    parsers: parsers.refetch,\n    widgets: widgets.refetch,\n  });\n  refetchRef.current = {\n    sinks: sinks.refetch,\n    dashboards: dashboards.refetch,\n    parsers: parsers.refetch,\n    widgets: widgets.refetch,\n  };\n\n  // Follow the build. Keeps polling for a short while after the turn settles so\n  // the final widget does not miss the panel by a second.\n  useEffect(() => {\n    if (!hasRun) return;\n\n    let stopAt = Number.POSITIVE_INFINITY;\n    if (!isRunning) stopAt = Date.now() + TRAILING_POLL_MS;\n\n    const poll = () => {\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      if (Date.now() > stopAt) return;\n      void refetchRef.current.sinks();\n      void refetchRef.current.dashboards();\n      if (dashboardId) {\n        void refetchRef.current.parsers();\n        void refetchRef.current.widgets();\n      }\n      setNow(Date.now());\n    };\n\n    poll();\n    const intervalId = window.setInterval(poll, LIVE_POLL_MS);\n    const onVisible = () => {\n      if (document.visibilityState === 'visible') poll();\n    };\n    document.addEventListener('visibilitychange', onVisible);\n    return () => {\n      window.clearInterval(intervalId);\n      document.removeEventListener('visibilitychange', onVisible);\n    };\n  }, [hasRun, isRunning, dashboardId]);\n\n  // Jump the user to whatever is being worked on, so they are not left staring\n  // at the Data Sinks tab while the parser is the thing actually happening.\n  useEffect(() => {\n    const active = PREVIEW_STEPS.find((key) => steps[key] === 'running');\n    if (active) setTab(active);\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  const sinkRows = useMemo(() => sinks.dataSinks.slice(0, 25), [sinks.dataSinks]);\n  const dashboardRows = useMemo(() => dashboards.dashboards.slice(0, 25), [dashboards.dashboards]);\n  const parserRows = useMemo(() => parsers.parsers.slice(0, 25), [parsers.parsers]);\n  const widgetRows = useMemo(() => widgets.widgets.slice(0, 25), [widgets.widgets]);\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          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=\"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\">AI Preview</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              Live\n            </span>\n          ) : null}\n          <span className=\"truncate text-xs text-text-muted\" data-testid=\"ai-preview-ago\">\n            {isRunning ? (caption ? caption : 'Working…') : error ? 'Stopped' : 'Done'} · updated{' '}\n            {formatAgo(agoSeconds)}\n          </span>\n        </div>\n        <Button\n          size=\"sm\"\n          variant=\"ghost\"\n          onClick={closePreview}\n          aria-label=\"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 */}\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            Data Sinks\n          </TabsTrigger>\n          <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n            Dashboards\n          </TabsTrigger>\n          <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n            Parsers\n          </TabsTrigger>\n          <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n            Widgets\n          </TabsTrigger>\n        </TabsList>\n\n        <div className=\"max-h-[320px] overflow-y-auto p-3\">\n          <TabsContent value=\"datasink\" className=\"space-y-2\">\n            {sinkRows.length === 0 ? (\n              <EmptyOrLoading loading={sinks.loading} empty=\"No data sinks yet.\" />\n            ) : (\n              sinkRows.map((sink) => (\n                <EntityRow\n                  key={sink.id}\n                  id={sink.id}\n                  title={sink.name ?? sink.key}\n                  meta={sink.status}\n                  isNew={sink.id === entityIds.datasink}\n                  onOpen={() => navigate(`/datasinks/${sink.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\" className=\"space-y-2\">\n            {dashboardRows.length === 0 ? (\n              <EmptyOrLoading loading={dashboards.loading} empty=\"No dashboards yet.\" />\n            ) : (\n              dashboardRows.map((dashboard) => (\n                <EntityRow\n                  key={dashboard.id}\n                  id={dashboard.id}\n                  title={dashboard.name}\n                  meta={`${String(dashboard.widgetCount ?? 0)} widget(s)`}\n                  isNew={dashboard.id === entityIds.dashboard}\n                  onOpen={() => navigate(`/dashboards/${dashboard.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"parser\" className=\"space-y-2\">\n            {!dashboardId ? (\n              <p className=\"px-1 py-6 text-sm text-text-muted\">\n                Parsers are listed per dashboard — waiting for the dashboard to be created.\n              </p>\n            ) : parserRows.length === 0 ? (\n              <EmptyOrLoading loading={parsers.loading} empty=\"No parsers on this dashboard yet.\" />\n            ) : (\n              parserRows.map((parser) => (\n                <EntityRow\n                  key={parser.id}\n                  id={parser.id}\n                  title={parser.name}\n                  meta={`${parser.type} · ${parser.status}`}\n                  isNew={parser.id === entityIds.parser}\n                  onOpen={() => navigate(`/parsers/${parser.id}`)}\n                />\n              ))\n            )}\n          </TabsContent>\n\n          <TabsContent value=\"widget\" className=\"space-y-2\">\n            {!dashboardId ? (\n              <p className=\"px-1 py-6 text-sm text-text-muted\">\n                Widgets live on a dashboard — waiting for the dashboard to be created.\n              </p>\n            ) : widgetRows.length === 0 ? (\n              <EmptyOrLoading loading={widgets.loading} empty=\"No widgets on this dashboard yet.\" />\n            ) : (\n              widgetRows.map((widget) => (\n                <EntityRow\n                  key={widget.id}\n                  id={widget.id}\n                  title={widget.title}\n                  meta={widget.type}\n                  // A widget has no link of its own in the narration, so the most\n                  // recent one on the dashboard being built is the new one.\n                  isNew={widget.id === widgetRows[widgetRows.length - 1]?.id && steps.widget === 'done'}\n                  onOpen={() => navigate(`/dashboards/${dashboardId}`)}\n                />\n              ))\n            )}\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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"}

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

@@ -0,0 +1,61 @@
+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 { Spinner as c } from "@burdenoff/fe-libs/ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/bigconsole/components/preview/previewShared.tsx
+function d({ status: e }) {
+	return e === "done" ? /* @__PURE__ */ l(i, { className: "size-3.5 text-status-success-text" }) : e === "running" ? /* @__PURE__ */ l(o, { className: "size-3.5 animate-spin text-action-primary-bg" }) : e === "skipped" ? /* @__PURE__ */ l(s, { className: "size-3.5 text-text-muted" }) : /* @__PURE__ */ l("span", { className: "size-1.5 rounded-full bg-border-strong" });
+}
+function f({ steps: n }) {
+	return /* @__PURE__ */ l("div", {
+		className: "flex flex-wrap items-center gap-1",
+		"data-testid": "ai-preview-step-rail",
+		children: e.map((r, i) => /* @__PURE__ */ u("div", {
+			className: "flex 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(" "),
+				children: [
+					/* @__PURE__ */ l(d, { status: n[r] }),
+					t[r],
+					n[r] === "skipped" ? /* @__PURE__ */ l("span", {
+						className: "text-[10px]",
+						children: "skipped"
+					}) : null
+				]
+			}), i < e.length - 1 ? /* @__PURE__ */ l(a, { className: "size-3.5 text-text-muted" }) : null]
+		}, r))
+	});
+}
+function p(e) {
+	return e < 5 ? "just now" : e < 60 ? `${String(e)}s ago` : `${String(Math.floor(e / 60))}m ago`;
+}
+function m({ loading: e, empty: t }) {
+	return e ? /* @__PURE__ */ u("div", {
+		className: "flex items-center gap-2 px-1 py-6 text-sm text-text-muted",
+		children: [/* @__PURE__ */ l(c, { className: "size-4" }), "Loading…"]
+	}) : /* @__PURE__ */ l("p", {
+		className: "px-1 py-6 text-sm text-text-muted",
+		children: t
+	});
+}
+function h() {
+	let [e, t] = r(0);
+	return n(() => {
+		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);
+		};
+		e();
+		let n = window.setInterval(e, 500);
+		return window.addEventListener("resize", e), () => {
+			window.clearInterval(n), window.removeEventListener("resize", e);
+		};
+	}, []), e;
+}
+//#endregion
+export { m as EmptyOrLoading, f as StepRail, p as formatAgo, h as useAssistantSidebarWidth };
+
+//# sourceMappingURL=previewShared.js.map

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

@@ -0,0 +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 { Spinner } from '@burdenoff/fe-libs/ui';\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\nexport function EmptyOrLoading({ loading, empty }: { loading: boolean; empty: string }) {\n  if (loading) {\n    return (\n      <div className=\"flex items-center gap-2 px-1 py-6 text-sm text-text-muted\">\n        <Spinner className=\"size-4\" />\n        Loading…\n      </div>\n    );\n  }\n  return <p className=\"px-1 py-6 text-sm text-text-muted\">{empty}</p>;\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":";;;;;;AAsBA,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;;AAG7C,SAAgB,EAAe,EAAE,YAAS,YAA8C;AAStF,QARI,IAEA,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAS,WAAU,UAAW,CAAA,EAAA,WAE1B;MAGH,kBAAC,KAAD;EAAG,WAAU;YAAqC;EAAU,CAAA;;AAUrE,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-bigconsole",
-  "version": "2026.716.3",
+  "version": "2026.716.4",
   "description": "BigConsole - AI-powered analytics and dashboard platform",
   "type": "module",
   "files": [