@burdenoff/microfe-bigconsole 2026.912.3 → 2026.912.4

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

@@ -1,28 +1,28 @@
-import { useEffect as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as e, useLayoutEffect as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/previewShared.tsx
-function i(e, t) {
+function a(e, t) {
 	return e < 5 ? t("bigconsole.widget.aiPreview.agoJustNow", "just now") : e < 60 ? t("bigconsole.widget.aiPreview.agoSeconds", "{{n}}s ago", { n: e }) : e < 3600 ? t("bigconsole.widget.aiPreview.agoMinutes", "{{n}}m ago", { n: Math.floor(e / 60) }) : t("bigconsole.widget.aiPreview.agoHours", "{{n}}h ago", { n: Math.floor(e / 3600) });
 }
-function a(n) {
-	let [r, i] = t(0);
-	return e(() => {
-		if (!n) {
+function o(e) {
+	let [r, i] = n(0);
+	return t(() => {
+		if (!e) {
 			i(0);
 			return;
 		}
-		let e = () => {
+		let t = () => {
 			let e = document.querySelector("[data-testid=\"assistant-widget-window\"][data-layout=\"sidebar\"]")?.getBoundingClientRect(), t = e && e.width < window.innerWidth * .75 ? Math.round(e.width) : 0;
 			i((e) => e === t ? e : t);
 		};
-		e();
-		let t = window.setInterval(e, 500);
-		return window.addEventListener("resize", e), () => {
-			window.clearInterval(t), window.removeEventListener("resize", e);
+		t();
+		let n = window.setInterval(t, 500);
+		return window.addEventListener("resize", t), () => {
+			window.clearInterval(n), window.removeEventListener("resize", t);
 		};
-	}, [n]), r;
+	}, [e]), r;
 }
-var o = {
+var s = {
 	datasink: {
 		key: "bigconsole.widget.aiPreview.tab.dataSink",
 		fallback: "Data Sink"
@@ -40,7 +40,7 @@ var o = {
 		fallback: "Widget"
 	}
 };
-function s(e) {
+function c(e) {
 	let t = e("bigconsole.widget.aiPreview.buildProgress", "Build progress"), n = e("bigconsole.widget.aiPreview.stepSkipped", "skipped");
 	return {
 		errorHeading: e("bigconsole.widget.aiPreview.errorHeading", "Build stopped"),
@@ -56,8 +56,8 @@ function s(e) {
 		}
 	};
 }
-function c({ state: i, stateLabel: a, updatedLabel: o, updatedAt: s, ago: c }) {
-	let [l, u] = t(() => Date.now());
+function l({ state: t, stateLabel: a, updatedLabel: o, updatedAt: s, ago: c }) {
+	let [l, u] = n(() => Date.now());
 	e(() => {
 		if (s === null) return;
 		u(Date.now());
@@ -65,17 +65,17 @@ function c({ state: i, stateLabel: a, updatedLabel: o, updatedAt: s, ago: c }) {
 		return () => window.clearInterval(e);
 	}, [s]);
 	let d = s === null ? 0 : Math.max(0, Math.floor((l - s) / 1e3)), f = "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide";
-	return /* @__PURE__ */ r("span", {
+	return /* @__PURE__ */ i("span", {
 		className: "inline-flex items-center gap-2",
 		"data-testid": "ai-preview-ago",
-		children: [i !== "idle" && a ? /* @__PURE__ */ r("span", {
-			className: i === "running" ? `${f} bg-[var(--color-status-success-bgSubtle)] text-status-success-text` : `${f} bg-[var(--color-status-error-bgSubtle)] text-status-error-text`,
-			"data-testid": i === "running" ? "ai-preview-live" : "ai-preview-stopped",
-			children: [i === "running" ? /* @__PURE__ */ r("span", {
+		children: [t !== "idle" && a ? /* @__PURE__ */ i("span", {
+			className: t === "running" ? `${f} bg-[var(--color-status-success-bgSubtle)] text-status-success-text` : `${f} bg-[var(--color-status-error-bgSubtle)] text-status-error-text`,
+			"data-testid": t === "running" ? "ai-preview-live" : "ai-preview-stopped",
+			children: [t === "running" ? /* @__PURE__ */ i("span", {
 				className: "relative flex size-2",
-				children: [/* @__PURE__ */ n("span", { className: "absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping" }), /* @__PURE__ */ n("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
-			}) : /* @__PURE__ */ n("span", { className: "relative inline-flex size-2 rounded-full bg-status-error-text" }), a]
-		}) : null, /* @__PURE__ */ r("span", { children: [
+				children: [/* @__PURE__ */ r("span", { className: "absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping" }), /* @__PURE__ */ r("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
+			}) : /* @__PURE__ */ r("span", { className: "relative inline-flex size-2 rounded-full bg-status-error-text" }), a]
+		}) : null, /* @__PURE__ */ i("span", { children: [
 			o,
 			" ",
 			c(d)
@@ -83,6 +83,6 @@ function c({ state: i, stateLabel: a, updatedLabel: o, updatedAt: s, ago: c }) {
 	});
 }
 //#endregion
-export { c as PreviewMeta, o as STEP_LABEL, i as formatAgo, s as previewLabels, a as useAssistantSidebarWidth };
+export { l as PreviewMeta, s as STEP_LABEL, a as formatAgo, c as previewLabels, o as useAssistantSidebarWidth };
 
 //# sourceMappingURL=previewShared.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * What is still BigConsole's about the AI preview surfaces.\n *\n * ★★★ THE SHELL, DIVIDERS AND STEP RAIL HAVE MOVED TO fe-libs\n * (`AssistantEntityPreview` / `AssistantStepRail`). They existed here so the\n * full panel and the mini panel could not drift apart; the shared component now\n * guarantees that for both, and for every other product that adopts it.\n *\n * What remains is genuinely local: BigConsole's relationship to the assistant\n * sidebar, and how it words a relative timestamp.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * DOM + formatting, which is why the mini panel can live in the app shell\n * without dragging the data layer along.\n */\nimport { useEffect, useState } from 'react';\n\nimport type { AssistantEntityPreviewProps } from '@burdenoff/fe-libs/shared/assistant';\n\nimport type { PreviewStepKey } from '../../assistant/assistantRunStore';\n\n/** The `t` both panels already hold — accepted rather than imported, so this\n *  file keeps no provider requirement of its own. */\ntype Translate = (key: string, fallback: string, params?: Record<string, string | number>) => string;\n\n/**\n * \"just now\" / \"40s ago\" / \"12m ago\" / \"3h ago\".\n *\n * ★★ TRANSLATED, and it now has an hour bucket. It used to return English in\n * all three locales (en, hi, ta), and a panel left open past an hour read \"240m ago\" rather\n * than \"4h ago\" — both of which were only visible on the surface that outlives\n * a build, which is exactly the one people leave sitting there.\n */\nexport function formatAgo(seconds: number, t: Translate): string {\n  if (seconds < 5) return t('bigconsole.widget.aiPreview.agoJustNow', 'just now');\n  if (seconds < 60) {\n    return t('bigconsole.widget.aiPreview.agoSeconds', '{{n}}s ago', { n: seconds });\n  }\n  if (seconds < 3600) {\n    return t('bigconsole.widget.aiPreview.agoMinutes', '{{n}}m ago', { n: Math.floor(seconds / 60) });\n  }\n  // ★ `{{n}}`, not `{n}` — fe-libs' single-brace interpolation was broken until\n  // 2026.910.7 and shipped raw braces to users across the fleet. Double braces\n  // are what this repo already uses (see `…aiPreviewMini.linkReady`).\n  return t('bigconsole.widget.aiPreview.agoHours', '{{n}}h ago', { n: Math.floor(seconds / 3600) });\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 *\n * ★★★ `enabled` IS NOT AN OPTIMISATION, IT IS THE FIX. The mini panel is\n * mounted by the app shell on every page, and a hook cannot be called below an\n * early return — so this 500ms poll ran for the lifetime of the tab on every\n * route, for every user, whether or not the assistant had ever been opened.\n * Moving the call site was impossible; making the hook do nothing was not.\n */\nexport function useAssistantSidebarWidth(enabled: boolean): number {\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    if (!enabled) {\n      setWidth(0);\n      return;\n    }\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  }, [enabled]);\n\n  return width;\n}\n\n/**\n * Step labels, reusing the TAB keys.\n *\n * ★★ They used to be English constants in the store (`PREVIEW_STEP_LABEL`), so\n * the rail rendered \"Data Sink / Dashboard / Parser / Widget\" in every locale —\n * directly beside the SAME four names rendered translated as tab labels. The\n * keys already exist and are already seeded; nothing new was needed to fix it.\n *\n * ★ Lives here because BOTH panels render the rail. It was defined twice, which\n * is the exact duplication this migration exists to remove.\n */\nexport const STEP_LABEL: Record<PreviewStepKey, { key: string; fallback: string }> = {\n  datasink: { key: 'bigconsole.widget.aiPreview.tab.dataSink', fallback: 'Data Sink' },\n  dashboard: { key: 'bigconsole.widget.aiPreview.tab.dashboard', fallback: 'Dashboard' },\n  parser: { key: 'bigconsole.widget.aiPreview.tab.parser', fallback: 'Parser' },\n  widget: { key: 'bigconsole.widget.aiPreview.tab.widget', fallback: 'Widget' },\n};\n\n/**\n * The shared surface's chrome strings, already translated.\n *\n * ★★ ONE copy, deliberately. BOTH defects this migration produced were the same\n * bug written twice — the failure caption and the reopen clock each had to be\n * fixed in the full panel AND the mini panel — so anything the two pass\n * identically belongs here rather than inlined in each. That is the same reason\n * the shell lived in this file before it moved to fe-libs.\n *\n * ★ Both surfaces use the `aiPreview` namespace, not `aiPreviewMini`: the rail\n * says the same thing wherever it is rendered, and splitting the keys would mean\n * translating \"running\" and \"failed\" twice per locale for no difference.\n *\n * `AssistantEntityPreviewProps['labels']` rather than a hand-written shape, so a\n * new label added upstream is a type error here instead of a silently missing\n * string.\n */\nexport function previewLabels(t: Translate): AssistantEntityPreviewProps['labels'] {\n  const buildProgress = t('bigconsole.widget.aiPreview.buildProgress', 'Build progress');\n  const skipped = t('bigconsole.widget.aiPreview.stepSkipped', 'skipped');\n  return {\n    // ★ main named the failure \"Build stopped\" in a hardcoded English <h3>. The\n    //   shared surface cannot know that word — it takes it as a label — so this\n    //   both restores the name AND makes it translatable for the first time.\n    errorHeading: t('bigconsole.widget.aiPreview.errorHeading', 'Build stopped'),\n    steps: buildProgress,\n    stepsHeading: buildProgress,\n    skipped,\n    stepStatus: {\n      pending: t('bigconsole.widget.aiPreview.stepPending', 'not started'),\n      running: t('bigconsole.widget.aiPreview.stepRunning', 'running'),\n      done: t('bigconsole.widget.aiPreview.stepDone', 'completed'),\n      failed: t('bigconsole.widget.aiPreview.stepFailed', 'failed'),\n      skipped,\n    },\n  };\n}\n\n/**\n * The status strip both panels hand to the shared surface as `meta`.\n *\n * ★★★ ONE copy, and this one is not a tidiness argument — the SAME DEFECT was\n * written into both panels twice over. The migration changed this chip from\n * `bg-status-success-bg` to `bg-status-success-bgSubtle` in both files, and that\n * utility DOES NOT EXIST: the token is `--color-status-success-bgSubtle` but the\n * Tailwind preset exposes it as `status-success-bg-subtle`. The app shell emits\n * `.bg-status-success-bg-subtle` and never `.bg-status-success-bgSubtle`, so the\n * \"Live\" pill lost its background entirely and became transparent text.\n * Nothing failed: an unknown utility is simply absent from the stylesheet.\n *\n * ★ Fixed with the ARBITRARY-VALUE form, `bg-[var(--color-status-…-bgSubtle)]`,\n * which is what the other ~30 sites in this repo use. It names the token\n * directly, so it cannot be broken by a preset key being spelled differently\n * from the variable — which is the entire mechanism of the bug above.\n *\n * ★★ It also carries the FAILED state, which the caption cannot. The shared\n * surface blanks `caption` whenever `error` is set — deliberately, so a rotating\n * \"Creating…\" cannot sit under a dead run — so a product that wants the failure\n * NAMED (as this one did on main, with \"Stopped\") has to say it somewhere the\n * error does not suppress. `meta` is that place: `PreviewHeader` renders it\n * without consulting `error`.\n *\n * Labels are passed in already translated, so the `t('literal.key', …)` calls\n * stay greppable at each call site and each panel keeps its own namespace.\n */\nexport function PreviewMeta({\n  state,\n  stateLabel,\n  updatedLabel,\n  updatedAt,\n  ago,\n}: {\n  state: 'running' | 'stopped' | 'idle';\n  stateLabel: string | null;\n  updatedLabel: string;\n  /** When the run last changed, or null when there is nothing to age. */\n  updatedAt: number | null;\n  /** Renders the elapsed seconds — `formatAgo` bound to the caller's `t`. */\n  ago: (seconds: number) => string;\n}) {\n  /**\n   * ★★★ THE CLOCK LIVES HERE, in the one element that displays it.\n   *\n   * It used to live in each panel, and that made a 1 Hz `setState` on the PANEL\n   * — which re-rendered everything below it. `AssistantEntityPreview` calls\n   * `activeTab.render()` on every render with no memo, so the Widgets tab's live\n   * dashboard and every Recharts widget inside it re-rendered once a second, for\n   * as long as the preview stayed open. main did not: its ticker was gated on\n   * `isRunning`, so it stopped when the build did. Ungating it to fix the frozen\n   * timestamp is right, but it has to cost one <span>, not the whole subtree.\n   *\n   * ★★ Mounting is also the gate now. The mini panel is mounted on EVERY route\n   * and returns null when the full panel is up — but a hook cannot sit below an\n   * early return, so its interval ran on every page regardless of whether\n   * anything was shown. Owning the timer here means \"not rendered\" is \"not\n   * ticking\", by construction rather than by remembering to pass a flag.\n   */\n  const [now, setNow] = useState(() => Date.now());\n  useEffect(() => {\n    if (updatedAt === null) return;\n    // ★ Re-read on mount so a reopened panel cannot show the previous open's\n    // reading for up to a second. See the note on lint in the git history:\n    // reading the clock in render is an ESLint error (Date.now is impure).\n    setNow(Date.now());\n    const id = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(id);\n  }, [updatedAt]);\n\n  const agoSeconds = updatedAt === null ? 0 : Math.max(0, Math.floor((now - updatedAt) / 1000));\n\n  const chip =\n    'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide';\n  return (\n    <span className=\"inline-flex items-center gap-2\" data-testid=\"ai-preview-ago\">\n      {state !== 'idle' && stateLabel ? (\n        <span\n          className={\n            state === 'running'\n              ? `${chip} bg-[var(--color-status-success-bgSubtle)] text-status-success-text`\n              : `${chip} bg-[var(--color-status-error-bgSubtle)] text-status-error-text`\n          }\n          data-testid={state === 'running' ? 'ai-preview-live' : 'ai-preview-stopped'}\n        >\n          {state === 'running' ? (\n            <span className=\"relative flex size-2\">\n              <span className=\"absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-status-success-text\" />\n            </span>\n          ) : (\n            /* ★ Still, not pulsing: the ping says \"this is happening now\", which\n               is the opposite of what a stopped run means. */\n            <span className=\"relative inline-flex size-2 rounded-full bg-status-error-text\" />\n          )}\n          {stateLabel}\n        </span>\n      ) : null}\n      <span>\n        {updatedLabel} {ago(agoSeconds)}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,EAAU,GAAiB,GAAsB;AAW/D,QAVI,IAAU,IAAU,EAAE,0CAA0C,WAAW,GAC3E,IAAU,KACL,EAAE,0CAA0C,cAAc,EAAE,GAAG,GAAS,CAAC,GAE9E,IAAU,OACL,EAAE,0CAA0C,cAAc,EAAE,GAAG,KAAK,MAAM,IAAU,GAAG,EAAE,CAAC,GAK5F,EAAE,wCAAwC,cAAc,EAAE,GAAG,KAAK,MAAM,IAAU,KAAK,EAAE,CAAC;;AAgBnG,SAAgB,EAAyB,GAA0B;CACjE,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AAwBrC,QAtBA,QAAgB;AACd,MAAI,CAAC,GAAS;AACZ,KAAS,EAAE;AACX;;EAEF,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,CAAC,EAAQ,CAAC,EAEN;;AAcT,IAAa,IAAwE;CACnF,UAAU;EAAE,KAAK;EAA4C,UAAU;EAAa;CACpF,WAAW;EAAE,KAAK;EAA6C,UAAU;EAAa;CACtF,QAAQ;EAAE,KAAK;EAA0C,UAAU;EAAU;CAC7E,QAAQ;EAAE,KAAK;EAA0C,UAAU;EAAU;CAC9E;AAmBD,SAAgB,EAAc,GAAqD;CACjF,IAAM,IAAgB,EAAE,6CAA6C,iBAAiB,EAChF,IAAU,EAAE,2CAA2C,UAAU;AACvE,QAAO;EAIL,cAAc,EAAE,4CAA4C,gBAAgB;EAC5E,OAAO;EACP,cAAc;EACd;EACA,YAAY;GACV,SAAS,EAAE,2CAA2C,cAAc;GACpE,SAAS,EAAE,2CAA2C,UAAU;GAChE,MAAM,EAAE,wCAAwC,YAAY;GAC5D,QAAQ,EAAE,0CAA0C,SAAS;GAC7D;GACD;EACF;;AA8BH,SAAgB,EAAY,EAC1B,UACA,eACA,iBACA,cACA,UASC;CAkBD,IAAM,CAAC,GAAK,KAAU,QAAe,KAAK,KAAK,CAAC;AAChD,SAAgB;AACd,MAAI,MAAc,KAAM;AAIxB,IAAO,KAAK,KAAK,CAAC;EAClB,IAAM,IAAK,OAAO,kBAAkB,EAAO,KAAK,KAAK,CAAC,EAAE,IAAK;AAC7D,eAAa,OAAO,cAAc,EAAG;IACpC,CAAC,EAAU,CAAC;CAEf,IAAM,IAAa,MAAc,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,IAAM,KAAa,IAAK,CAAC,EAEvF,IACJ;AACF,QACE,kBAAC,QAAD;EAAM,WAAU;EAAiC,eAAY;YAA7D,CACG,MAAU,UAAU,IACnB,kBAAC,QAAD;GACE,WACE,MAAU,YACN,GAAG,EAAK,uEACR,GAAG,EAAK;GAEd,eAAa,MAAU,YAAY,oBAAoB;aANzD,CAQG,MAAU,YACT,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA,EAC3H,kBAAC,QAAD,EAAM,WAAU,mEAAoE,CAAA,CAC/E;QAIP,kBAAC,QAAD,EAAM,WAAU,iEAAkE,CAAA,EAEnF,EACI;OACL,MACJ,kBAAC,QAAD,EAAA,UAAA;GACG;GAAa;GAAE,EAAI,EAAW;GAC1B,EAAA,CAAA,CACF"}
+{"version":3,"file":"previewShared.js","names":[],"sources":["../../../../src/bigconsole/components/preview/previewShared.tsx"],"sourcesContent":["/**\n * What is still BigConsole's about the AI preview surfaces.\n *\n * ★★★ THE SHELL, DIVIDERS AND STEP RAIL HAVE MOVED TO fe-libs\n * (`AssistantEntityPreview` / `AssistantStepRail`). They existed here so the\n * full panel and the mini panel could not drift apart; the shared component now\n * guarantees that for both, and for every other product that adopts it.\n *\n * What remains is genuinely local: BigConsole's relationship to the assistant\n * sidebar, and how it words a relative timestamp.\n *\n * Nothing here touches Apollo, React Query, or BigConsole context — it is pure\n * DOM + formatting, which is why the mini panel can live in the app shell\n * without dragging the data layer along.\n */\nimport { useEffect, useLayoutEffect, useState } from 'react';\n\nimport type { AssistantEntityPreviewProps } from '@burdenoff/fe-libs/shared/assistant';\n\nimport type { PreviewStepKey } from '../../assistant/assistantRunStore';\n\n/** The `t` both panels already hold — accepted rather than imported, so this\n *  file keeps no provider requirement of its own. */\ntype Translate = (key: string, fallback: string, params?: Record<string, string | number>) => string;\n\n/**\n * \"just now\" / \"40s ago\" / \"12m ago\" / \"3h ago\".\n *\n * ★★ TRANSLATED, and it now has an hour bucket. It used to return English in\n * all three locales (en, hi, ta), and a panel left open past an hour read \"240m ago\" rather\n * than \"4h ago\" — both of which were only visible on the surface that outlives\n * a build, which is exactly the one people leave sitting there.\n */\nexport function formatAgo(seconds: number, t: Translate): string {\n  if (seconds < 5) return t('bigconsole.widget.aiPreview.agoJustNow', 'just now');\n  if (seconds < 60) {\n    return t('bigconsole.widget.aiPreview.agoSeconds', '{{n}}s ago', { n: seconds });\n  }\n  if (seconds < 3600) {\n    return t('bigconsole.widget.aiPreview.agoMinutes', '{{n}}m ago', { n: Math.floor(seconds / 60) });\n  }\n  // ★ `{{n}}`, not `{n}` — fe-libs' single-brace interpolation was broken until\n  // 2026.910.7 and shipped raw braces to users across the fleet. Double braces\n  // are what this repo already uses (see `…aiPreviewMini.linkReady`).\n  return t('bigconsole.widget.aiPreview.agoHours', '{{n}}h ago', { n: Math.floor(seconds / 3600) });\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 *\n * ★★★ `enabled` IS NOT AN OPTIMISATION, IT IS THE FIX. The mini panel is\n * mounted by the app shell on every page, and a hook cannot be called below an\n * early return — so this 500ms poll ran for the lifetime of the tab on every\n * route, for every user, whether or not the assistant had ever been opened.\n * Moving the call site was impossible; making the hook do nothing was not.\n */\nexport function useAssistantSidebarWidth(enabled: boolean): number {\n  const [width, setWidth] = useState(0);\n\n  /**\n   * ★★★ `useLayoutEffect`, NOT `useEffect` — it has to measure BEFORE the paint\n   * that reveals the panel.\n   *\n   * Gating the poll on `enabled` (so it stops running on every route) quietly\n   * introduced a layout jump. `startRun` sets `hasRun` and `previewOpen` in the\n   * SAME store update, so the render that first shows the panel is also the\n   * render on which this hook is first enabled — and a passive effect has not\n   * run yet, so `width` is still 0 and the panel paints one frame at full width,\n   * underneath the fixed 480/560px assistant sidebar it was just launched from,\n   * before snapping ~576px narrower.\n   *\n   * ★ The pre-gate version had no such frame, for a reason that is easy to miss:\n   * the hook was UNGATED and called above the `!hasRun` early return, so the\n   * poll had been running since the page mounted and `width` was already 560 long\n   * before any prompt. The bug is not what the effect does — it always measured\n   * synchronously — it is WHEN the effect first runs.\n   *\n   * A layout effect commits before the browser paints, so the first frame the\n   * user sees already carries the margin. The read is one querySelector plus one\n   * getBoundingClientRect; this app has no SSR, so there is no hydration warning\n   * to trade against.\n   */\n  useLayoutEffect(() => {\n    if (!enabled) {\n      setWidth(0);\n      return;\n    }\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  }, [enabled]);\n\n  return width;\n}\n\n/**\n * Step labels, reusing the TAB keys.\n *\n * ★★ They used to be English constants in the store (`PREVIEW_STEP_LABEL`), so\n * the rail rendered \"Data Sink / Dashboard / Parser / Widget\" in every locale —\n * directly beside the SAME four names rendered translated as tab labels. The\n * keys already exist and are already seeded; nothing new was needed to fix it.\n *\n * ★ Lives here because BOTH panels render the rail. It was defined twice, which\n * is the exact duplication this migration exists to remove.\n */\nexport const STEP_LABEL: Record<PreviewStepKey, { key: string; fallback: string }> = {\n  datasink: { key: 'bigconsole.widget.aiPreview.tab.dataSink', fallback: 'Data Sink' },\n  dashboard: { key: 'bigconsole.widget.aiPreview.tab.dashboard', fallback: 'Dashboard' },\n  parser: { key: 'bigconsole.widget.aiPreview.tab.parser', fallback: 'Parser' },\n  widget: { key: 'bigconsole.widget.aiPreview.tab.widget', fallback: 'Widget' },\n};\n\n/**\n * The shared surface's chrome strings, already translated.\n *\n * ★★ ONE copy, deliberately. BOTH defects this migration produced were the same\n * bug written twice — the failure caption and the reopen clock each had to be\n * fixed in the full panel AND the mini panel — so anything the two pass\n * identically belongs here rather than inlined in each. That is the same reason\n * the shell lived in this file before it moved to fe-libs.\n *\n * ★ Both surfaces use the `aiPreview` namespace, not `aiPreviewMini`: the rail\n * says the same thing wherever it is rendered, and splitting the keys would mean\n * translating \"running\" and \"failed\" twice per locale for no difference.\n *\n * `AssistantEntityPreviewProps['labels']` rather than a hand-written shape, so a\n * new label added upstream is a type error here instead of a silently missing\n * string.\n */\nexport function previewLabels(t: Translate): AssistantEntityPreviewProps['labels'] {\n  const buildProgress = t('bigconsole.widget.aiPreview.buildProgress', 'Build progress');\n  const skipped = t('bigconsole.widget.aiPreview.stepSkipped', 'skipped');\n  return {\n    // ★ main named the failure \"Build stopped\" in a hardcoded English <h3>. The\n    //   shared surface cannot know that word — it takes it as a label — so this\n    //   both restores the name AND makes it translatable for the first time.\n    errorHeading: t('bigconsole.widget.aiPreview.errorHeading', 'Build stopped'),\n    steps: buildProgress,\n    stepsHeading: buildProgress,\n    skipped,\n    stepStatus: {\n      pending: t('bigconsole.widget.aiPreview.stepPending', 'not started'),\n      running: t('bigconsole.widget.aiPreview.stepRunning', 'running'),\n      done: t('bigconsole.widget.aiPreview.stepDone', 'completed'),\n      failed: t('bigconsole.widget.aiPreview.stepFailed', 'failed'),\n      skipped,\n    },\n  };\n}\n\n/**\n * The status strip both panels hand to the shared surface as `meta`.\n *\n * ★★★ ONE copy, and this one is not a tidiness argument — the SAME DEFECT was\n * written into both panels twice over. The migration changed this chip from\n * `bg-status-success-bg` to `bg-status-success-bgSubtle` in both files, and that\n * utility DOES NOT EXIST: the token is `--color-status-success-bgSubtle` but the\n * Tailwind preset exposes it as `status-success-bg-subtle`. The app shell emits\n * `.bg-status-success-bg-subtle` and never `.bg-status-success-bgSubtle`, so the\n * \"Live\" pill lost its background entirely and became transparent text.\n * Nothing failed: an unknown utility is simply absent from the stylesheet.\n *\n * ★ Fixed with the ARBITRARY-VALUE form, `bg-[var(--color-status-…-bgSubtle)]`,\n * which is what the other ~30 sites in this repo use. It names the token\n * directly, so it cannot be broken by a preset key being spelled differently\n * from the variable — which is the entire mechanism of the bug above.\n *\n * ★★ It also carries the FAILED state, which the caption cannot. The shared\n * surface blanks `caption` whenever `error` is set — deliberately, so a rotating\n * \"Creating…\" cannot sit under a dead run — so a product that wants the failure\n * NAMED (as this one did on main, with \"Stopped\") has to say it somewhere the\n * error does not suppress. `meta` is that place: `PreviewHeader` renders it\n * without consulting `error`.\n *\n * Labels are passed in already translated, so the `t('literal.key', …)` calls\n * stay greppable at each call site and each panel keeps its own namespace.\n */\nexport function PreviewMeta({\n  state,\n  stateLabel,\n  updatedLabel,\n  updatedAt,\n  ago,\n}: {\n  state: 'running' | 'stopped' | 'idle';\n  stateLabel: string | null;\n  updatedLabel: string;\n  /** When the run last changed, or null when there is nothing to age. */\n  updatedAt: number | null;\n  /** Renders the elapsed seconds — `formatAgo` bound to the caller's `t`. */\n  ago: (seconds: number) => string;\n}) {\n  /**\n   * ★★★ THE CLOCK LIVES HERE, in the one element that displays it.\n   *\n   * It used to live in each panel, and that made a 1 Hz `setState` on the PANEL\n   * — which re-rendered everything below it. `AssistantEntityPreview` calls\n   * `activeTab.render()` on every render with no memo, so the Widgets tab's live\n   * dashboard and every Recharts widget inside it re-rendered once a second, for\n   * as long as the preview stayed open. main did not: its ticker was gated on\n   * `isRunning`, so it stopped when the build did. Ungating it to fix the frozen\n   * timestamp is right, but it has to cost one <span>, not the whole subtree.\n   *\n   * ★★ Mounting is also the gate now. The mini panel is mounted on EVERY route\n   * and returns null when the full panel is up — but a hook cannot sit below an\n   * early return, so its interval ran on every page regardless of whether\n   * anything was shown. Owning the timer here means \"not rendered\" is \"not\n   * ticking\", by construction rather than by remembering to pass a flag.\n   */\n  const [now, setNow] = useState(() => Date.now());\n  useEffect(() => {\n    if (updatedAt === null) return;\n    // ★ Re-read on mount so a reopened panel cannot show the previous open's\n    // reading for up to a second. See the note on lint in the git history:\n    // reading the clock in render is an ESLint error (Date.now is impure).\n    setNow(Date.now());\n    const id = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(id);\n  }, [updatedAt]);\n\n  const agoSeconds = updatedAt === null ? 0 : Math.max(0, Math.floor((now - updatedAt) / 1000));\n\n  const chip =\n    'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide';\n  return (\n    <span className=\"inline-flex items-center gap-2\" data-testid=\"ai-preview-ago\">\n      {state !== 'idle' && stateLabel ? (\n        <span\n          className={\n            state === 'running'\n              ? `${chip} bg-[var(--color-status-success-bgSubtle)] text-status-success-text`\n              : `${chip} bg-[var(--color-status-error-bgSubtle)] text-status-error-text`\n          }\n          data-testid={state === 'running' ? 'ai-preview-live' : 'ai-preview-stopped'}\n        >\n          {state === 'running' ? (\n            <span className=\"relative flex size-2\">\n              <span className=\"absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-status-success-text\" />\n            </span>\n          ) : (\n            /* ★ Still, not pulsing: the ping says \"this is happening now\", which\n               is the opposite of what a stopped run means. */\n            <span className=\"relative inline-flex size-2 rounded-full bg-status-error-text\" />\n          )}\n          {stateLabel}\n        </span>\n      ) : null}\n      <span>\n        {updatedLabel} {ago(agoSeconds)}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,EAAU,GAAiB,GAAsB;AAW/D,QAVI,IAAU,IAAU,EAAE,0CAA0C,WAAW,GAC3E,IAAU,KACL,EAAE,0CAA0C,cAAc,EAAE,GAAG,GAAS,CAAC,GAE9E,IAAU,OACL,EAAE,0CAA0C,cAAc,EAAE,GAAG,KAAK,MAAM,IAAU,GAAG,EAAE,CAAC,GAK5F,EAAE,wCAAwC,cAAc,EAAE,GAAG,KAAK,MAAM,IAAU,KAAK,EAAE,CAAC;;AAgBnG,SAAgB,EAAyB,GAA0B;CACjE,IAAM,CAAC,GAAO,KAAY,EAAS,EAAE;AA+CrC,QAtBA,QAAsB;AACpB,MAAI,CAAC,GAAS;AACZ,KAAS,EAAE;AACX;;EAEF,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,CAAC,EAAQ,CAAC,EAEN;;AAcT,IAAa,IAAwE;CACnF,UAAU;EAAE,KAAK;EAA4C,UAAU;EAAa;CACpF,WAAW;EAAE,KAAK;EAA6C,UAAU;EAAa;CACtF,QAAQ;EAAE,KAAK;EAA0C,UAAU;EAAU;CAC7E,QAAQ;EAAE,KAAK;EAA0C,UAAU;EAAU;CAC9E;AAmBD,SAAgB,EAAc,GAAqD;CACjF,IAAM,IAAgB,EAAE,6CAA6C,iBAAiB,EAChF,IAAU,EAAE,2CAA2C,UAAU;AACvE,QAAO;EAIL,cAAc,EAAE,4CAA4C,gBAAgB;EAC5E,OAAO;EACP,cAAc;EACd;EACA,YAAY;GACV,SAAS,EAAE,2CAA2C,cAAc;GACpE,SAAS,EAAE,2CAA2C,UAAU;GAChE,MAAM,EAAE,wCAAwC,YAAY;GAC5D,QAAQ,EAAE,0CAA0C,SAAS;GAC7D;GACD;EACF;;AA8BH,SAAgB,EAAY,EAC1B,UACA,eACA,iBACA,cACA,UASC;CAkBD,IAAM,CAAC,GAAK,KAAU,QAAe,KAAK,KAAK,CAAC;AAChD,SAAgB;AACd,MAAI,MAAc,KAAM;AAIxB,IAAO,KAAK,KAAK,CAAC;EAClB,IAAM,IAAK,OAAO,kBAAkB,EAAO,KAAK,KAAK,CAAC,EAAE,IAAK;AAC7D,eAAa,OAAO,cAAc,EAAG;IACpC,CAAC,EAAU,CAAC;CAEf,IAAM,IAAa,MAAc,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,IAAM,KAAa,IAAK,CAAC,EAEvF,IACJ;AACF,QACE,kBAAC,QAAD;EAAM,WAAU;EAAiC,eAAY;YAA7D,CACG,MAAU,UAAU,IACnB,kBAAC,QAAD;GACE,WACE,MAAU,YACN,GAAG,EAAK,uEACR,GAAG,EAAK;GAEd,eAAa,MAAU,YAAY,oBAAoB;aANzD,CAQG,MAAU,YACT,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA,EAC3H,kBAAC,QAAD,EAAM,WAAU,mEAAoE,CAAA,CAC/E;QAIP,kBAAC,QAAD,EAAM,WAAU,iEAAkE,CAAA,EAEnF,EACI;OACL,MACJ,kBAAC,QAAD,EAAA,UAAA;GACG;GAAa;GAAE,EAAI,EAAW;GAC1B,EAAA,CAAA,CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-bigconsole",
-  "version": "2026.912.3",
+  "version": "2026.912.4",
   "description": "BigConsole - AI-powered analytics and dashboard platform",
   "type": "module",
   "files": [
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^4.0.11",
-    "@burdenoff/fe-libs": "2026.912.3",
+    "@burdenoff/fe-libs": "2026.912.4",
     "@burdenoff/fluidgrids-fe-sdk": "2026.731.4",
     "@iconify/react": "^6.0.2",
     "@monaco-editor/react": "^4.7.0",
@@ -83,7 +83,7 @@
     "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@burdenoff/fe-libs": "2026.912.3",
+    "@burdenoff/fe-libs": "2026.912.4",
     "@burdenoff/fluidgrids-fe-sdk": "2026.731.4",
     "@eslint/js": "^10.0.1",
     "@graphql-codegen/add": "^5.0.0",