@burdenoff/microfe-bigconsole 2026.717.1 → 2026.717.3

package/dist/bigconsole/assistant/assistantRunStore.js

@@ -19,8 +19,21 @@ var t = [
 	datasinks: "datasink",
 	dashboards: "dashboard",
 	parsers: "parser"
-};
-function c(e, t) {
+}, c = [
+	{
+		step: "datasink",
+		re: /"createDataSink"\s*:\s*\{[^{}]*?"id"\s*:\s*"([A-Za-z0-9_-]+)"/
+	},
+	{
+		step: "dashboard",
+		re: /"createBigConsoleDashboard"\s*:\s*\{[^{}]*?"id"\s*:\s*"([A-Za-z0-9_-]+)"/
+	},
+	{
+		step: "parser",
+		re: /"createParser"\s*:\s*\{[^{}]*?"id"\s*:\s*"([A-Za-z0-9_-]+)"/
+	}
+], l = /"createBigConsoleWidget"\s*:\s*\{/;
+function u(e, t) {
 	let n = {
 		pending: 0,
 		running: 1,
@@ -29,7 +42,7 @@ function c(e, t) {
 	};
 	return n[t] > n[e] ? t : e;
 }
-var l = e()((e) => ({
+var d = e()((e) => ({
 	isRunning: !1,
 	previewOpen: !1,
 	hasRun: !1,
@@ -40,39 +53,45 @@ var l = e()((e) => ({
 	caption: "",
 	error: null,
 	updatedAt: null,
-	startRun: (t) => e({
-		isRunning: !0,
-		previewOpen: !0,
-		hasRun: !0,
-		prompt: t,
-		steps: {
-			...r,
-			datasink: "running"
-		},
-		entityIds: {},
-		caption: "",
-		error: null,
-		updatedAt: Date.now()
+	startRun: (n) => e((e) => {
+		let r = { ...e.steps };
+		for (let e of t) r[e] === "running" && (r[e] = "pending");
+		let i = t.find((e) => r[e] === "pending");
+		return i && (r[i] = "running"), {
+			isRunning: !0,
+			previewOpen: !0,
+			hasRun: !0,
+			prompt: n,
+			steps: r,
+			caption: "",
+			error: null,
+			updatedAt: Date.now()
+		};
 	}),
 	applyProgress: (n) => e((e) => {
-		let r = { ...e.steps }, l = { ...e.entityIds };
+		let r = { ...e.steps }, d = { ...e.entityIds }, f = (e, t) => {
+			r[e] = u(r[e], "done"), t && e !== "widget" && (d[e] = t);
+		};
 		for (let e of n.matchAll(i)) {
-			let t = s[e[1] ?? ""], n = e[2];
-			!t || !n || (r[t] = c(r[t], "done"), l[t] || (l[t] = n));
+			let t = s[e[1] ?? ""];
+			t && e[2] && f(t, e[2]);
+		}
+		for (let { step: e, re: t } of c) {
+			let r = t.exec(n);
+			r?.[1] && f(e, r[1]);
 		}
-		a.test(n) && (r.widget = c(r.widget, "done"), r.parser !== "done" && (r.parser = c(r.parser, "skipped")));
-		let u = t.find((e) => r[e] === "pending" || r[e] === "running");
-		return u && (r[u] = c(r[u], "running")), {
+		(l.test(n) || a.test(n)) && (r.widget = u(r.widget, "done"), r.parser !== "done" && (r.parser = u(r.parser, "skipped")));
+		let p = t.find((e) => r[e] === "pending" || r[e] === "running");
+		return p && (r[p] = u(r[p], "running")), {
 			steps: r,
-			entityIds: l,
+			entityIds: d,
 			caption: n.split("\n").map((e) => e.trim()).reverse().map((e) => o.exec(e)?.[1]).find((e) => !!e) ?? e.caption,
 			updatedAt: Date.now()
 		};
 	}),
 	finishRun: (n) => e((e) => {
 		let r = { ...e.steps };
-		if (n) for (let e of t) r[e] === "running" && (r[e] = "pending");
-		else for (let e of t) (r[e] === "running" || r[e] === "pending") && (r[e] = "skipped");
+		for (let e of t) r[e] === "running" && (r[e] = "pending");
 		return {
 			isRunning: !1,
 			error: n,
@@ -86,6 +105,6 @@ var l = e()((e) => ({
 	setRichMounted: (t) => e({ richMounted: t })
 }));
 //#endregion
-export { t as PREVIEW_STEPS, n as PREVIEW_STEP_LABEL, l as useAssistantRunStore };
+export { t as PREVIEW_STEPS, n as PREVIEW_STEP_LABEL, d as useAssistantRunStore };
 
 //# sourceMappingURL=assistantRunStore.js.map

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  /**\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"}
+{"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's narration is the only live signal the frontend gets — there is no\n * event stream — so this store turns it into something a UI can render: a\n * monotone DataSink → Dashboard → Parser → Widget rail, plus the id of each\n * entity as it appears.\n *\n * Three rules make the parsing survive a model that phrases things differently:\n *\n * 1. Read the id from BOTH the link path (`/bigconsole/datasinks/<id>`) AND the\n *    raw mutation JSON (`{ \"createDataSink\": { \"id\": \"<uuid>\", … } }`). The agent\n *    freely prints one, the other, or both — if we only watched for the link a\n *    turn that printed just JSON would leave the tab stuck on \"Waiting…\".\n * 2. Never regress. `progress.content` is REPLACED on every poll (not appended),\n *    so a shorter string arriving later must not rewind the rail.\n * 3. Accumulate across an incremental conversation. Each prompt builds one piece;\n *    a new prompt must NOT wipe the pieces already built, or the earlier tabs go\n *    blank. `startRun` preserves prior steps/ids and only lights up the next one.\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/**\n * The id straight out of a raw mutation response the agent printed instead of\n * (or as well as) a link, e.g. `{ \"createDataSink\": { \"id\": \"<uuid>\", … } }`.\n * `[^{}]` keeps each match inside its own object so we grab that mutation's id,\n * not a neighbour's. This is what stops \"Waiting…\" when no link is narrated.\n */\nconst JSON_ID_STEPS: ReadonlyArray<{ step: Exclude<PreviewStepKey, 'widget'>; re: RegExp }> = [\n  { step: 'datasink', re: /\"createDataSink\"\\s*:\\s*\\{[^{}]*?\"id\"\\s*:\\s*\"([A-Za-z0-9_-]+)\"/ },\n  { step: 'dashboard', re: /\"createBigConsoleDashboard\"\\s*:\\s*\\{[^{}]*?\"id\"\\s*:\\s*\"([A-Za-z0-9_-]+)\"/ },\n  { step: 'parser', re: /\"createParser\"\\s*:\\s*\\{[^{}]*?\"id\"\\s*:\\s*\"([A-Za-z0-9_-]+)\"/ },\n];\n/** The widget has no page of its own; its create response is enough to mark it done. */\nconst WIDGET_CREATE_JSON = /\"createBigConsoleWidget\"\\s*:\\s*\\{/;\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((state) => {\n      // A new prompt CONTINUES the same use case (incremental flow) — keep every\n      // step and id already built. Clear any stale spinner from the prior turn,\n      // then light up the earliest step that has not landed yet so the \"working\n      // on it\" indicator sits on the right tab.\n      const steps = { ...state.steps };\n      for (const key of PREVIEW_STEPS) {\n        if (steps[key] === 'running') steps[key] = 'pending';\n      }\n      const next = PREVIEW_STEPS.find((key) => steps[key] === 'pending');\n      if (next) steps[next] = 'running';\n      return {\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,\n        // entityIds intentionally preserved (merged) so earlier tabs keep content.\n        caption: '',\n        error: null,\n        updatedAt: Date.now(),\n      };\n    }),\n\n  applyProgress: (content) =>\n    set((state) => {\n      const steps = { ...state.steps };\n      const entityIds = { ...state.entityIds };\n\n      const markDone = (step: PreviewStepKey, id?: string) => {\n        steps[step] = advance(steps[step], 'done');\n        // Always record the freshest id seen this turn (never \"first wins\"): an\n        // incremental prompt that rebuilds a piece must point the tab at the new\n        // one. `step !== 'widget'` narrows to the keys entityIds actually holds.\n        if (id && step !== 'widget') entityIds[step] = id;\n      };\n\n      // 1) Markdown link paths.\n      for (const match of content.matchAll(ENTITY_LINK)) {\n        const step = LINK_TO_STEP[match[1] ?? ''];\n        if (step && match[2]) markDone(step, match[2]);\n      }\n      // 2) Raw mutation JSON (the agent often prints this instead of a link).\n      for (const { step, re } of JSON_ID_STEPS) {\n        const match = re.exec(content);\n        if (match?.[1]) markDone(step, match[1]);\n      }\n\n      if (WIDGET_CREATE_JSON.test(content) || 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 the parser was never built, 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      // The turn is over — stop the live spinner. A step still 'running' didn't\n      // land this turn, so drop it back to 'pending' (a later prompt can pick it\n      // up). NEVER blanket-skip pending steps: in the incremental flow the later\n      // steps simply have not been asked for yet, and 'done' steps must stay done.\n      const steps = { ...state.steps };\n      for (const key of PREVIEW_STEPS) {\n        if (steps[key] === 'running') steps[key] = 'pending';\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":"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"}

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

@@ -32,8 +32,13 @@ function w() {
 		let e = window.setInterval(() => R(Date.now()), 1e3);
 		return () => window.clearInterval(e);
 	}, [w]), u(() => {
-		let e = t.find((e) => D[e] === "running");
-		e && I(e);
+		let e = t.filter((e) => D[e] === "done"), n = e[e.length - 1];
+		if (n) {
+			I(n);
+			return;
+		}
+		let r = t.find((e) => D[e] === "running");
+		r && I(r);
 	}, [D]);
 	let B = j ? Math.max(0, Math.floor((L - j) / 1e3)) : 0, V = a();
 	return E ? T ? /* @__PURE__ */ S("section", {

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

@@ -1 +1 @@
-{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. The tab auto-switches to whatever step is\n * being worked on, and each tab has an \"Open\" button (top-right) that jumps to\n * the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n */\nimport { useEffect, useState } from 'react';\nimport { Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, type PreviewStepKey, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { StepRail, formatAgo, useAssistantSidebarWidth } from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/** A tab's top bar: what this tab is, plus a jump-to-the-real-page button. */\nfunction TabHeader({ label, onOpen }: { label: string; onOpen?: () => void }) {\n  return (\n    <div className=\"mb-2 flex items-center justify-between gap-2\">\n      <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">{label}</span>\n      {onOpen ? (\n        <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n          Open\n          <ArrowUpRight className=\"ml-1 size-3.5\" />\n        </Button>\n      ) : null}\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  // Tick the \"updated Xs ago\" label while a turn is live.\n  useEffect(() => {\n    if (!isRunning) return;\n    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(intervalId);\n  }, [isRunning]);\n\n  // 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  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 — each shows the real content of the built entity */}\n      <Tabs value={tab} onValueChange={(value) => setTab(value as PreviewStepKey)}>\n        <TabsList className=\"mx-3 mt-2\">\n          <TabsTrigger value=\"datasink\" data-testid=\"ai-preview-tab-datasink\">\n            Data Sink\n          </TabsTrigger>\n          <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n            Dashboard\n          </TabsTrigger>\n          <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n            Parser\n          </TabsTrigger>\n          <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n            Widget\n          </TabsTrigger>\n        </TabsList>\n\n        <div className=\"max-h-[440px] overflow-y-auto p-3\">\n          <TabsContent value=\"datasink\">\n            <TabHeader\n              label=\"Data Sink\"\n              onOpen={entityIds.datasink ? () => navigate(`/datasinks/${entityIds.datasink}`) : undefined}\n            />\n            <DataSinkContent id={entityIds.datasink} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\">\n            <TabHeader\n              label=\"Dashboard\"\n              onOpen={entityIds.dashboard ? () => navigate(`/dashboards/${entityIds.dashboard}`) : undefined}\n            />\n            <DashboardContent dashboardId={entityIds.dashboard} />\n          </TabsContent>\n\n          <TabsContent value=\"parser\">\n            <TabHeader\n              label=\"Parser\"\n              onOpen={entityIds.parser ? () => navigate(`/parsers/${entityIds.parser}`) : undefined}\n            />\n            <ParserContent parserId={entityIds.parser} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"widget\">\n            <TabHeader label=\"Widget\" onOpen={dashboardId ? () => navigate(`/dashboards/${dashboardId}`) : undefined} />\n            <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n          </TabsContent>\n        </div>\n      </Tabs>\n\n      {error ? (\n        <p\n          className=\"border-t border-border-subtle px-3 py-2 text-xs text-status-error-text\"\n          data-testid=\"ai-preview-error\"\n        >\n          {error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nexport default AiPreviewPanel;\n"],"mappings":"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"}
+{"version":3,"file":"AiPreviewPanel.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewPanel.tsx"],"sourcesContent":["/**\n * AI Preview — watch the assistant build, with the real content inline.\n *\n * Opens by itself the moment a prompt starts. A step rail (driven by the agent's\n * own narration) shows DataSink → Dashboard → Parser → Widget filling in, and\n * the four tabs show the ACTUAL content of each entity as it lands — the data\n * sink's rows, the live dashboard, the parser's transformed output, the rendered\n * widget charts — not a list of links. The tab auto-switches to whatever step is\n * being worked on, and each tab has an \"Open\" button (top-right) that jumps to\n * the real page.\n *\n * The content renderers need Apollo + the BigConsole providers, which is why\n * this full panel lives inside BigConsoleRoot; the store-only app-shell mini\n * panel (AiPreviewMiniPanel) keeps the lighter link view for other pages.\n */\nimport { useEffect, useState } from 'react';\nimport { Button, Tabs, TabsContent, TabsList, TabsTrigger } from '@burdenoff/fe-libs/ui';\nimport { ArrowUpRight, Loader2, Sparkles, X } from 'lucide-react';\n\nimport { PREVIEW_STEPS, type PreviewStepKey, useAssistantRunStore } from '../../assistant/assistantRunStore';\nimport { useBigConsoleNavigate } from '../../context';\nimport { StepRail, formatAgo, useAssistantSidebarWidth } from './previewShared';\nimport { DashboardContent, DataSinkContent, ParserContent, WidgetsContent } from './AiPreviewContent';\n\n/** A tab's top bar: what this tab is, plus a jump-to-the-real-page button. */\nfunction TabHeader({ label, onOpen }: { label: string; onOpen?: () => void }) {\n  return (\n    <div className=\"mb-2 flex items-center justify-between gap-2\">\n      <span className=\"text-xs font-semibold uppercase tracking-wide text-text-muted\">{label}</span>\n      {onOpen ? (\n        <Button size=\"sm\" variant=\"outline\" onClick={onOpen} data-testid=\"ai-preview-open-entity\">\n          Open\n          <ArrowUpRight className=\"ml-1 size-3.5\" />\n        </Button>\n      ) : null}\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  // Tick the \"updated Xs ago\" label while a turn is live.\n  useEffect(() => {\n    if (!isRunning) return;\n    const intervalId = window.setInterval(() => setNow(Date.now()), 1000);\n    return () => window.clearInterval(intervalId);\n  }, [isRunning]);\n\n  // Follow the build by showing the LATEST thing that actually landed — so the\n  // moment the data sink is created you see its rows, not an empty \"waiting for\n  // the dashboard\" tab. (The rail still shows the spinner on the next step.) If\n  // nothing has landed yet, sit on whatever is being worked on.\n  useEffect(() => {\n    const done = PREVIEW_STEPS.filter((key) => steps[key] === 'done');\n    const latestDone = done[done.length - 1];\n    if (latestDone) {\n      setTab(latestDone);\n      return;\n    }\n    const running = PREVIEW_STEPS.find((key) => steps[key] === 'running');\n    if (running) setTab(running);\n  }, [steps]);\n\n  const agoSeconds = updatedAt ? Math.max(0, Math.floor((now - updatedAt) / 1000)) : 0;\n\n  // Keep clear of the assistant.\n  //\n  // The assistant sidebar is `position: fixed` — it OVERLAYS the page instead of\n  // reflowing it. A panel that spans the full content width therefore runs\n  // underneath it, and everything in that overlapped strip (tabs, Open buttons)\n  // silently stops taking clicks. Measure the real element rather than hardcoding\n  // 560px: the widget is responsive, and it can be closed mid-run.\n  const assistantWidth = useAssistantSidebarWidth();\n\n  if (!hasRun) return null;\n\n  if (!previewOpen) {\n    return (\n      <div className=\"flex justify-end px-4 pt-3 md:px-6\" style={{ marginRight: assistantWidth }}>\n        <Button size=\"sm\" variant=\"outline\" onClick={openPreview} data-testid=\"ai-preview-open\">\n          <Sparkles className=\"mr-1.5 size-4\" />\n          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 — each shows the real content of the built entity */}\n      <Tabs value={tab} onValueChange={(value) => setTab(value as PreviewStepKey)}>\n        <TabsList className=\"mx-3 mt-2\">\n          <TabsTrigger value=\"datasink\" data-testid=\"ai-preview-tab-datasink\">\n            Data Sink\n          </TabsTrigger>\n          <TabsTrigger value=\"dashboard\" data-testid=\"ai-preview-tab-dashboard\">\n            Dashboard\n          </TabsTrigger>\n          <TabsTrigger value=\"parser\" data-testid=\"ai-preview-tab-parser\">\n            Parser\n          </TabsTrigger>\n          <TabsTrigger value=\"widget\" data-testid=\"ai-preview-tab-widget\">\n            Widget\n          </TabsTrigger>\n        </TabsList>\n\n        <div className=\"max-h-[440px] overflow-y-auto p-3\">\n          <TabsContent value=\"datasink\">\n            <TabHeader\n              label=\"Data Sink\"\n              onOpen={entityIds.datasink ? () => navigate(`/datasinks/${entityIds.datasink}`) : undefined}\n            />\n            <DataSinkContent id={entityIds.datasink} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"dashboard\">\n            <TabHeader\n              label=\"Dashboard\"\n              onOpen={entityIds.dashboard ? () => navigate(`/dashboards/${entityIds.dashboard}`) : undefined}\n            />\n            <DashboardContent dashboardId={entityIds.dashboard} />\n          </TabsContent>\n\n          <TabsContent value=\"parser\">\n            <TabHeader\n              label=\"Parser\"\n              onOpen={entityIds.parser ? () => navigate(`/parsers/${entityIds.parser}`) : undefined}\n            />\n            <ParserContent parserId={entityIds.parser} live={isRunning} />\n          </TabsContent>\n\n          <TabsContent value=\"widget\">\n            <TabHeader label=\"Widget\" onOpen={dashboardId ? () => navigate(`/dashboards/${dashboardId}`) : undefined} />\n            <WidgetsContent dashboardId={dashboardId} live={isRunning} />\n          </TabsContent>\n        </div>\n      </Tabs>\n\n      {error ? (\n        <p\n          className=\"border-t border-border-subtle px-3 py-2 text-xs text-status-error-text\"\n          data-testid=\"ai-preview-error\"\n        >\n          {error}\n        </p>\n      ) : null}\n    </section>\n  );\n}\n\nexport default AiPreviewPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/kanban/KanbanWidget.js

@@ -9,17 +9,117 @@ function i(e) {
 		default: return "bg-bg-sunken text-text-secondary";
 	}
 }
-var a = e(function({ widget: e, data: a, onClick: o }) {
-	let s = t(() => a?.columns || [], [a?.columns]), c = t(() => a?.tasks || [], [a?.tasks]), l = t(() => {
+var a = [
+	"status",
+	"state",
+	"column",
+	"stage",
+	"category",
+	"phase",
+	"group"
+], o = [
+	"title",
+	"name",
+	"summary",
+	"label",
+	"identifier",
+	"id"
+];
+function s(e) {
+	return typeof e == "string" && e.length > 0 ? e : void 0;
+}
+function c(e) {
+	let t = (e) => e.filter((e) => !!e && typeof e == "object" && !Array.isArray(e));
+	if (Array.isArray(e)) return t(e);
+	if (e && typeof e == "object") {
+		let n = e;
+		for (let e of [
+			"tasks",
+			"rows",
+			"items",
+			"data",
+			"nodes",
+			"results",
+			"records"
+		]) if (Array.isArray(n[e])) return t(n[e]);
+		let r = Object.values(n).find((e) => Array.isArray(e));
+		if (Array.isArray(r)) return t(r);
+	}
+	return [];
+}
+function l(e, t) {
+	for (let n of t) if (n && n in e) return n;
+}
+function u(e) {
+	let t = s(e)?.toLowerCase();
+	if (t) {
+		if (t === "urgent" || t === "high") return "high";
+		if (t === "medium" || t === "normal") return "medium";
+		if (t === "low") return "low";
+	}
+}
+function d(e, t) {
+	if (e && typeof e == "object" && !Array.isArray(e) && Array.isArray(e.columns)) {
+		let t = e;
+		return {
+			columns: t.columns ?? [],
+			tasks: t.tasks ?? []
+		};
+	}
+	let n = c(e);
+	if (n.length === 0) return {
+		columns: [],
+		tasks: []
+	};
+	let r = n[0], i = l(r, [
+		s(t?.columnField),
+		s(t?.groupField),
+		s(t?.statusField),
+		...a,
+		s(t?.xAxisField),
+		s(t?.labelField)
+	]);
+	if (!i) return {
+		columns: [],
+		tasks: []
+	};
+	let d = l(r, [
+		s(t?.cardTitleField),
+		s(t?.titleField),
+		...o,
+		s(t?.labelField)
+	]), f = {}, p = [], m = n.map((e, t) => {
+		let n = e[i], r = n == null || n === "" ? "Uncategorized" : String(n);
+		r in f || (f[r] = r, p.push(r));
+		let a = e.id ?? e.identifier ?? e.key, o = Array.isArray(e.labels) ? e.labels.filter((e) => typeof e == "string") : void 0;
+		return {
+			id: a == null ? `task-${t}` : String(a),
+			title: d && e[d] != null ? String(e[d]) : `Item ${t + 1}`,
+			column: r,
+			assignee: s(e.assignee),
+			priority: u(e.priority ?? e.priorityLabel),
+			labels: o && o.length > 0 ? o : void 0
+		};
+	});
+	return {
+		columns: p.map((e) => ({
+			id: e,
+			title: f[e] ?? e
+		})),
+		tasks: m
+	};
+}
+var f = e(function({ widget: e, data: a, onClick: o }) {
+	let s = e.config, { columns: c, tasks: l } = t(() => d(a, s), [a, s]), u = t(() => {
 		let e = {};
-		return s.forEach((t) => {
-			e[t.id] = c.filter((e) => e.column === t.id);
+		return c.forEach((t) => {
+			e[t.id] = l.filter((e) => e.column === t.id);
 		}), e;
-	}, [s, c]);
-	return s.length ? /* @__PURE__ */ n("div", {
+	}, [c, l]);
+	return c.length ? /* @__PURE__ */ n("div", {
 		className: "flex h-full p-2 gap-2 overflow-x-auto",
-		children: s.map((e) => {
-			let t = l[e.id] || [];
+		children: c.map((e) => {
+			let t = u[e.id] || [];
 			return /* @__PURE__ */ r("div", {
 				className: "flex-shrink-0 w-48 flex flex-col bg-bg-sunken/50 rounded-lg",
 				children: [/* @__PURE__ */ r("div", {
@@ -87,6 +187,6 @@ var a = e(function({ widget: e, data: a, onClick: o }) {
 	});
 });
 //#endregion
-export { a as default };
+export { f as default };
 
 //# sourceMappingURL=KanbanWidget.js.map

package/dist/bigconsole/components/widgets/kanban/KanbanWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kanban/KanbanWidget.tsx"],"sourcesContent":["/**\n * KanbanWidget Component\n *\n * Simple kanban board view with columns and tasks.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KanbanWidgetProps {\n  widget: Widget;\n  data?: KanbanData;\n  onClick?: (task: KanbanTask) => void;\n}\n\nexport interface KanbanColumn {\n  id: string;\n  title: string;\n  color?: string;\n}\n\nexport interface KanbanTask {\n  id: string;\n  title: string;\n  column: string;\n  priority?: 'high' | 'medium' | 'low';\n  assignee?: string;\n  labels?: string[];\n  dueDate?: string;\n}\n\nexport interface KanbanData {\n  columns?: KanbanColumn[];\n  tasks?: KanbanTask[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getPriorityColor(priority?: string): string {\n  switch (priority) {\n    case 'high':\n      return 'bg-state-error/20 text-state-error';\n    case 'medium':\n      return 'bg-state-warning/20 text-state-warning';\n    case 'low':\n      return 'bg-state-success/20 text-state-success';\n    default:\n      return 'bg-bg-sunken text-text-secondary';\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KanbanWidget: FC<KanbanWidgetProps> = memo(function KanbanWidget({ widget: _widget, data, onClick }) {\n  const columns = useMemo(() => data?.columns || [], [data?.columns]);\n  const tasks = useMemo(() => data?.tasks || [], [data?.tasks]);\n\n  // Group tasks by column\n  const tasksByColumn = useMemo(() => {\n    const grouped: Record<string, KanbanTask[]> = {};\n    columns.forEach((col) => {\n      grouped[col.id] = tasks.filter((t) => t.column === col.id);\n    });\n    return grouped;\n  }, [columns, tasks]);\n\n  if (!columns.length) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg\n            className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p>No board data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full p-2 gap-2 overflow-x-auto\">\n      {columns.map((column) => {\n        const columnTasks = tasksByColumn[column.id] || [];\n\n        return (\n          <div key={column.id} className=\"flex-shrink-0 w-48 flex flex-col bg-bg-sunken/50 rounded-lg\">\n            {/* Column Header */}\n            <div className=\"flex items-center gap-2 p-2 border-b border-border-default\">\n              <div\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: column.color || 'var(--color-text-muted)' }}\n              />\n              <span className=\"text-xs font-medium text-text-primary truncate\">{column.title}</span>\n              <span className=\"ml-auto text-xs text-text-tertiary\">{columnTasks.length}</span>\n            </div>\n\n            {/* Tasks */}\n            <div className=\"flex-1 p-2 space-y-2 overflow-y-auto\">\n              {columnTasks.map((task) => (\n                <div\n                  key={task.id}\n                  className={`\n                      p-2 bg-bg-surface rounded border border-border-default\n                      ${onClick ? 'cursor-pointer hover:border-action-primary-bg' : ''}\n                      transition-colors\n                    `}\n                  onClick={() => onClick?.(task)}\n                >\n                  <p className=\"text-xs font-medium text-text-primary line-clamp-2\">{task.title}</p>\n\n                  <div className=\"flex items-center gap-1 mt-2 flex-wrap\">\n                    {task.priority && (\n                      <span className={`px-1.5 py-0.5 text-[10px] rounded ${getPriorityColor(task.priority)}`}>\n                        {task.priority}\n                      </span>\n                    )}\n                    {task.assignee && (\n                      <span className=\"px-1.5 py-0.5 text-[10px] rounded bg-action-primary-bg/10 text-action-primary-text\">\n                        {task.assignee}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              ))}\n\n              {columnTasks.length === 0 && <p className=\"text-[10px] text-text-tertiary text-center py-4\">No tasks</p>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default KanbanWidget;\n"],"mappings":";;;AA4CA,SAAS,EAAiB,GAA2B;AACnD,SAAQ,GAAR;EACE,KAAK,OACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,KAAK,MACH,QAAO;EACT,QACE,QAAO;;;AAQb,IAAa,IAAsC,EAAK,SAAsB,EAAE,QAAQ,GAAS,SAAM,cAAW;CAChH,IAAM,IAAU,QAAc,GAAM,WAAW,EAAE,EAAE,CAAC,GAAM,QAAQ,CAAC,EAC7D,IAAQ,QAAc,GAAM,SAAS,EAAE,EAAE,CAAC,GAAM,MAAM,CAAC,EAGvD,IAAgB,QAAc;EAClC,IAAM,IAAwC,EAAE;AAIhD,SAHA,EAAQ,SAAS,MAAQ;AACvB,KAAQ,EAAI,MAAM,EAAM,QAAQ,MAAM,EAAE,WAAW,EAAI,GAAG;IAC1D,EACK;IACN,CAAC,GAAS,EAAM,CAAC;AAyBpB,QAvBK,EAAQ,SAwBX,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAc,EAAc,EAAO,OAAO,EAAE;AAElD,UACE,kBAAC,OAAD;IAAqB,WAAU;cAA/B,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OACE,WAAU;OACV,OAAO,EAAE,iBAAiB,EAAO,SAAS,2BAA2B;OACrE,CAAA;MACF,kBAAC,QAAD;OAAM,WAAU;iBAAkD,EAAO;OAAa,CAAA;MACtF,kBAAC,QAAD;OAAM,WAAU;iBAAsC,EAAY;OAAc,CAAA;MAC5E;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAY,KAAK,MAChB,kBAAC,OAAD;MAEE,WAAW;;wBAEL,IAAU,kDAAkD,GAAG;;;MAGrE,eAAe,IAAU,EAAK;gBAPhC,CASE,kBAAC,KAAD;OAAG,WAAU;iBAAsD,EAAK;OAAU,CAAA,EAElF,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAK,YACJ,kBAAC,QAAD;QAAM,WAAW,qCAAqC,EAAiB,EAAK,SAAS;kBAClF,EAAK;QACD,CAAA,EAER,EAAK,YACJ,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAK;QACD,CAAA,CAEL;SACF;QAtBC,EAAK,GAsBN,CACN,EAED,EAAY,WAAW,KAAK,kBAAC,KAAD;MAAG,WAAU;gBAAkD;MAAY,CAAA,CACpG;OACF;MA1CI,EAAO,GA0CX;IAER;EACE,CAAA,GAxEJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;cAER,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,EACN,kBAAC,KAAD,EAAA,UAAG,iBAAiB,CAAA,CAChB;;EACF,CAAA;EAyDV"}
+{"version":3,"file":"KanbanWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kanban/KanbanWidget.tsx"],"sourcesContent":["/**\n * KanbanWidget Component\n *\n * Simple kanban board view with columns and tasks.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KanbanWidgetProps {\n  widget: Widget;\n  data?: KanbanData;\n  onClick?: (task: KanbanTask) => void;\n}\n\nexport interface KanbanColumn {\n  id: string;\n  title: string;\n  color?: string;\n}\n\nexport interface KanbanTask {\n  id: string;\n  title: string;\n  column: string;\n  priority?: 'high' | 'medium' | 'low';\n  assignee?: string;\n  labels?: string[];\n  dueDate?: string;\n}\n\nexport interface KanbanData {\n  columns?: KanbanColumn[];\n  tasks?: KanbanTask[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getPriorityColor(priority?: string): string {\n  switch (priority) {\n    case 'high':\n      return 'bg-state-error/20 text-state-error';\n    case 'medium':\n      return 'bg-state-warning/20 text-state-warning';\n    case 'low':\n      return 'bg-state-success/20 text-state-success';\n    default:\n      return 'bg-bg-sunken text-text-secondary';\n  }\n}\n\n// Field names we try, in order, when the widget config doesn't name one\n// explicitly. A DataSink/parser typically emits a flat array of rows (e.g. the\n// Linear \"Kanban board\" parser -> [{ id, title, status, assignee, ... }]), so\n// the board is derived from a status/column field on those rows.\nconst COLUMN_FIELD_CANDIDATES = ['status', 'state', 'column', 'stage', 'category', 'phase', 'group'];\nconst TITLE_FIELD_CANDIDATES = ['title', 'name', 'summary', 'label', 'identifier', 'id'];\n\nfunction asString(value: unknown): string | undefined {\n  return typeof value === 'string' && value.length > 0 ? value : undefined;\n}\n\n/** Coerce parser output into an array of object rows (handles common envelopes). */\nfunction asRows(data: unknown): Record<string, unknown>[] {\n  const onlyObjects = (arr: unknown[]): Record<string, unknown>[] =>\n    arr.filter((r): r is Record<string, unknown> => !!r && typeof r === 'object' && !Array.isArray(r));\n\n  if (Array.isArray(data)) return onlyObjects(data);\n\n  if (data && typeof data === 'object') {\n    const obj = data as Record<string, unknown>;\n    for (const key of ['tasks', 'rows', 'items', 'data', 'nodes', 'results', 'records']) {\n      if (Array.isArray(obj[key])) return onlyObjects(obj[key] as unknown[]);\n    }\n    const firstArray = Object.values(obj).find((v) => Array.isArray(v));\n    if (Array.isArray(firstArray)) return onlyObjects(firstArray);\n  }\n  return [];\n}\n\n/** First key that actually exists on the sample row. */\nfunction firstPresent(row: Record<string, unknown>, keys: (string | undefined)[]): string | undefined {\n  for (const key of keys) {\n    if (key && key in row) return key;\n  }\n  return undefined;\n}\n\nfunction normalizePriority(value: unknown): KanbanTask['priority'] {\n  const v = asString(value)?.toLowerCase();\n  if (!v) return undefined;\n  if (v === 'urgent' || v === 'high') return 'high';\n  if (v === 'medium' || v === 'normal') return 'medium';\n  if (v === 'low') return 'low';\n  return undefined;\n}\n\n/**\n * Normalize widget data into the board's { columns, tasks } shape.\n *\n * KanbanWidget previously required the exact canonical shape and rendered\n * \"No board data\" for any DataSink/parser output that was a plain array of\n * rows (which is what parsers actually emit) — BOFF-4110. This adapts a flat\n * array into columns (distinct values of a status/column field, in first-seen\n * order) plus one card per row, honoring config field mappings with fallbacks.\n */\nfunction normalizeKanban(\n  data: unknown,\n  config?: Record<string, unknown>\n): { columns: KanbanColumn[]; tasks: KanbanTask[] } {\n  // Canonical shape passes through untouched (back-compat).\n  if (data && typeof data === 'object' && !Array.isArray(data) && Array.isArray((data as KanbanData).columns)) {\n    const d = data as KanbanData;\n    return { columns: d.columns ?? [], tasks: d.tasks ?? [] };\n  }\n\n  const rows = asRows(data);\n  if (rows.length === 0) return { columns: [], tasks: [] };\n\n  const sample = rows[0];\n  const columnField = firstPresent(sample, [\n    asString(config?.columnField),\n    asString(config?.groupField),\n    asString(config?.statusField),\n    ...COLUMN_FIELD_CANDIDATES,\n    asString(config?.xAxisField),\n    asString(config?.labelField),\n  ]);\n  if (!columnField) return { columns: [], tasks: [] };\n\n  const titleField = firstPresent(sample, [\n    asString(config?.cardTitleField),\n    asString(config?.titleField),\n    ...TITLE_FIELD_CANDIDATES,\n    asString(config?.labelField),\n  ]);\n\n  const columnTitles: Record<string, string> = {};\n  const columnOrder: string[] = [];\n  const tasks: KanbanTask[] = rows.map((row, i) => {\n    const columnRaw = row[columnField];\n    const column = columnRaw == null || columnRaw === '' ? 'Uncategorized' : String(columnRaw);\n    if (!(column in columnTitles)) {\n      columnTitles[column] = column;\n      columnOrder.push(column);\n    }\n    const idRaw = row.id ?? row.identifier ?? row.key;\n    const labels = Array.isArray(row.labels) ? row.labels.filter((l): l is string => typeof l === 'string') : undefined;\n    return {\n      id: idRaw != null ? String(idRaw) : `task-${i}`,\n      title: titleField && row[titleField] != null ? String(row[titleField]) : `Item ${i + 1}`,\n      column,\n      assignee: asString(row.assignee),\n      priority: normalizePriority(row.priority ?? row.priorityLabel),\n      labels: labels && labels.length > 0 ? labels : undefined,\n    };\n  });\n\n  const columns: KanbanColumn[] = columnOrder.map((id) => ({ id, title: columnTitles[id] ?? id }));\n  return { columns, tasks };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KanbanWidget: FC<KanbanWidgetProps> = memo(function KanbanWidget({ widget, data, onClick }) {\n  const config = widget.config as Record<string, unknown> | undefined;\n  const { columns, tasks } = useMemo(() => normalizeKanban(data, config), [data, config]);\n\n  // Group tasks by column\n  const tasksByColumn = useMemo(() => {\n    const grouped: Record<string, KanbanTask[]> = {};\n    columns.forEach((col) => {\n      grouped[col.id] = tasks.filter((t) => t.column === col.id);\n    });\n    return grouped;\n  }, [columns, tasks]);\n\n  if (!columns.length) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg\n            className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p>No board data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full p-2 gap-2 overflow-x-auto\">\n      {columns.map((column) => {\n        const columnTasks = tasksByColumn[column.id] || [];\n\n        return (\n          <div key={column.id} className=\"flex-shrink-0 w-48 flex flex-col bg-bg-sunken/50 rounded-lg\">\n            {/* Column Header */}\n            <div className=\"flex items-center gap-2 p-2 border-b border-border-default\">\n              <div\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: column.color || 'var(--color-text-muted)' }}\n              />\n              <span className=\"text-xs font-medium text-text-primary truncate\">{column.title}</span>\n              <span className=\"ml-auto text-xs text-text-tertiary\">{columnTasks.length}</span>\n            </div>\n\n            {/* Tasks */}\n            <div className=\"flex-1 p-2 space-y-2 overflow-y-auto\">\n              {columnTasks.map((task) => (\n                <div\n                  key={task.id}\n                  className={`\n                      p-2 bg-bg-surface rounded border border-border-default\n                      ${onClick ? 'cursor-pointer hover:border-action-primary-bg' : ''}\n                      transition-colors\n                    `}\n                  onClick={() => onClick?.(task)}\n                >\n                  <p className=\"text-xs font-medium text-text-primary line-clamp-2\">{task.title}</p>\n\n                  <div className=\"flex items-center gap-1 mt-2 flex-wrap\">\n                    {task.priority && (\n                      <span className={`px-1.5 py-0.5 text-[10px] rounded ${getPriorityColor(task.priority)}`}>\n                        {task.priority}\n                      </span>\n                    )}\n                    {task.assignee && (\n                      <span className=\"px-1.5 py-0.5 text-[10px] rounded bg-action-primary-bg/10 text-action-primary-text\">\n                        {task.assignee}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              ))}\n\n              {columnTasks.length === 0 && <p className=\"text-[10px] text-text-tertiary text-center py-4\">No tasks</p>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default KanbanWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.js

@@ -41,7 +41,8 @@ var g = c(function({ widget: c, data: g, onClick: _, onDrilldown: v }) {
 	let y = c.config, b = u(() => {
 		if (!g) return;
 		let e = (e, t) => t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e);
-		if ("value" in g && g.value !== void 0) return g;
+		if (typeof g == "number" || typeof g == "string") return { value: g };
+		if (typeof g == "object" && "value" in g && g.value !== void 0) return g;
 		let t = y?.valueField;
 		if (t && typeof g == "object") {
 			let n = e(g, t);

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCardWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardWidget.tsx"],"sourcesContent":["/**\n * MetricCardWidget Component\n *\n * Displays a single KPI/metric with trend, comparison, and optional sparkline.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, MetricCardConfig } from '../../../types';\nimport { TrendIndicator, type TrendDirection } from './TrendIndicator';\nimport { ComparisonBadge } from './ComparisonBadge';\nimport { SparklineChart, type SparklineDataPoint } from './SparklineChart';\nimport { firstObjectRow, inferValueField, unwrapRows } from '../utils/inferFields';\nimport { resolveConditionalStyle, conditionalStyleToClassName } from '../utils/conditionalFormat';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Fetched data */\n  data?: MetricCardData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives metric data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface MetricCardData {\n  /** Primary value to display */\n  value: number | string;\n  /** Previous value for comparison */\n  previousValue?: number;\n  /** Percentage change from previous */\n  changePercent?: number;\n  /** Trend direction override */\n  trend?: TrendDirection;\n  /** Sparkline data points */\n  sparklineData?: SparklineDataPoint[];\n  /** Target value for comparison */\n  target?: number;\n  /** Unit label (e.g., \"users\", \"$\") */\n  unit?: string;\n  /** Whether the metric is a currency */\n  isCurrency?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Format a number based on configuration\n */\nfunction formatValue(value: number | string, config?: MetricCardConfig): string {\n  if (typeof value === 'string') return value;\n\n  const { format = 'number', prefix, suffix } = config || {};\n\n  let formatted: string;\n\n  switch (format) {\n    case 'currency':\n      formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      }).format(value);\n      break;\n\n    case 'percentage':\n      formatted = `${(value * 100).toFixed(1)}%`;\n      break;\n\n    case 'compact':\n      formatted = new Intl.NumberFormat('en-US', {\n        notation: 'compact',\n        maximumFractionDigits: 1,\n      }).format(value);\n      break;\n\n    case 'number':\n    default:\n      formatted = new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: 2,\n      }).format(value);\n  }\n\n  // Apply prefix/suffix if provided\n  if (prefix) formatted = `${prefix}${formatted}`;\n  if (suffix) formatted = `${formatted}${suffix}`;\n\n  return formatted;\n}\n\n/**\n * Calculate trend direction from change percent\n */\nfunction calculateTrend(changePercent?: number): TrendDirection {\n  if (changePercent === undefined || changePercent === 0) return 'flat';\n  return changePercent > 0 ? 'up' : 'down';\n}\n\n/**\n * Get sparkline color based on trend\n */\nfunction getSparklineColor(trend: TrendDirection, positiveIsGood: boolean): 'success' | 'error' | 'muted' {\n  if (trend === 'flat') return 'muted';\n  const isGood = positiveIsGood ? trend === 'up' : trend === 'down';\n  return isGood ? 'success' : 'error';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardWidget: FC<MetricCardWidgetProps> = memo(function MetricCardWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as MetricCardConfig | undefined;\n\n  // Normalize data - extract value from object if valueField is configured\n  const data = useMemo((): MetricCardData | undefined => {\n    if (!rawData) return undefined;\n\n    // Helper to get nested value using dot notation (e.g., \"summary.totalSales\")\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown => {\n      return path.split('.').reduce((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj as unknown);\n    };\n\n    // If data already has 'value' property, use it directly\n    if ('value' in rawData && rawData.value !== undefined) {\n      return rawData as MetricCardData;\n    }\n\n    // If valueField is configured, extract the value from that field (supports dot notation)\n    const valueField = (config as unknown as Record<string, unknown> | undefined)?.valueField as string | undefined;\n    if (valueField && typeof rawData === 'object') {\n      const extractedValue = getNestedValue(rawData as unknown as Record<string, unknown>, valueField);\n      if (extractedValue !== undefined) {\n        // Also try to extract previousValue if previousValueField is configured\n        const previousValueField = (config as unknown as Record<string, unknown> | undefined)?.previousValueField as\n          string | undefined;\n        const previousValue = previousValueField\n          ? (getNestedValue(rawData as unknown as Record<string, unknown>, previousValueField) as number | undefined)\n          : undefined;\n\n        return {\n          value: extractedValue as number | string,\n          previousValue,\n          changePercent:\n            previousValue !== undefined && typeof extractedValue === 'number'\n              ? ((extractedValue - previousValue) / previousValue) * 100\n              : undefined,\n        };\n      }\n    }\n\n    // Try common field names at top level\n    const commonFields = ['value', 'total', 'amount', 'count', 'sum', 'totalSales', 'totalRevenue', 'totalOrders'];\n    for (const field of commonFields) {\n      if (typeof rawData === 'object' && field in rawData) {\n        const val = (rawData as unknown as Record<string, unknown>)[field];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    // Try looking in nested 'summary' object (common pattern)\n    if (typeof rawData === 'object' && 'summary' in rawData) {\n      const summary = (rawData as Record<string, unknown>).summary as Record<string, unknown> | undefined;\n      if (summary && typeof summary === 'object') {\n        for (const field of commonFields) {\n          if (field in summary) {\n            const val = summary[field];\n            if (typeof val === 'number' || typeof val === 'string') {\n              return { value: val };\n            }\n          }\n        }\n      }\n    }\n\n    // If rawData is a number or string directly, use it\n    if (typeof rawData === 'number' || typeof rawData === 'string') {\n      return { value: rawData };\n    }\n\n    // BOFF-2246 smart default: if rawData is an array (or envelope around an\n    // array) with object rows, use the configured valueField if it resolves\n    // on any row (supports dotted paths like \"metrics.revenue\") — otherwise\n    // pick the first numeric field from row[0]. This path only fires when\n    // the earlier top-level extraction didn't find anything, but an explicit\n    // `config.valueField` (flat or dotted) must always win over inference.\n    const firstRow = firstObjectRow(rawData);\n    if (firstRow) {\n      const configuredField = (config as unknown as Record<string, unknown> | undefined)?.valueField as\n        string | undefined;\n      if (configuredField) {\n        // Configured field is authoritative. Scan every row for it so sparse\n        // envelopes like `{data:[{id:1},{revenue:120}]}` with\n        // `valueField:\"revenue\"` still resolve. If no row carries it, return\n        // undefined rather than substituting an unrelated numeric column\n        // from row[0] (that would silently misrepresent the user's mapping).\n        const rows = unwrapRows(rawData) ?? [firstRow];\n        for (const r of rows) {\n          if (r && typeof r === 'object') {\n            const resolved = getNestedValue(r as Record<string, unknown>, configuredField);\n            if (typeof resolved === 'number' || typeof resolved === 'string') {\n              return { value: resolved };\n            }\n          }\n        }\n        return undefined;\n      }\n      const inferredField = inferValueField(firstRow);\n      if (inferredField) {\n        const val = firstRow[inferredField];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    return undefined;\n  }, [rawData, config]);\n\n  // Calculate derived values\n  const trend = useMemo(() => {\n    return data?.trend || calculateTrend(data?.changePercent);\n  }, [data?.trend, data?.changePercent]);\n\n  const positiveIsGood = config?.positiveIsGood ?? true;\n\n  const formattedValue = useMemo(() => {\n    // Treat 0 / \"\" as real values — only a missing value renders the em dash.\n    // (`if (!data?.value)` would wrongly blank out a legitimate 0, e.g. an ED\n    // boarding-compliance of 0% or an available-bed count of 0.)\n    if (data?.value === undefined || data?.value === null) return '—';\n    return formatValue(data.value, config);\n  }, [data?.value, config]);\n\n  const sparklineColor = useMemo(() => {\n    return getSparklineColor(trend, positiveIsGood);\n  }, [trend, positiveIsGood]);\n\n  // Conditional formatting on the metric value (threshold-driven color, not\n  // just trend direction). Falls back to the default primary text color.\n  const valueConditionalClass = useMemo(() => {\n    const style = resolveConditionalStyle(data?.value, config?.conditionalRules);\n    return conditionalStyleToClassName(style);\n  }, [data?.value, config?.conditionalRules]);\n\n  // Handle click\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown) {\n      onDrilldown({\n        value: data?.value,\n        changePercent: data?.changePercent,\n        trend,\n        target: data?.target,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, trend]);\n\n  // Determine if clickable\n  const isClickable = Boolean(onDrilldown || (onClick && widget.drilldowns?.length));\n\n  return (\n    <div\n      className={`\n          flex flex-col h-full p-4\n          ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n        `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Subtitle/Label */}\n      {config?.subtitle && <p className=\"text-xs text-text-secondary mb-1 truncate\">{config.subtitle}</p>}\n\n      {/* Main Value */}\n      <div className=\"flex items-baseline gap-2 mb-2\">\n        <span\n          className={`text-3xl font-semibold tracking-tight ${valueConditionalClass || 'text-text-primary'}`}\n          title={String(data?.value)}\n        >\n          {formattedValue}\n        </span>\n\n        {/* Trend Indicator (inline) */}\n        {config?.showTrend !== false && data?.changePercent !== undefined && (\n          <TrendIndicator direction={trend} size=\"md\" positiveIsGood={positiveIsGood} />\n        )}\n      </div>\n\n      {/* Comparison Badge */}\n      {config?.showComparison !== false && data?.changePercent !== undefined && (\n        <div className=\"mb-3\">\n          <ComparisonBadge\n            value={data.changePercent}\n            label={config?.comparisonLabel}\n            positiveIsGood={positiveIsGood}\n            size=\"sm\"\n          />\n        </div>\n      )}\n\n      {/* Target Progress */}\n      {data?.target !== undefined && typeof data.value === 'number' && (\n        <div className=\"mb-3\">\n          <div className=\"flex justify-between text-xs text-text-secondary mb-1\">\n            <span>Target: {formatValue(data.target, config)}</span>\n            <span>{((data.value / data.target) * 100).toFixed(0)}%</span>\n          </div>\n          <div className=\"h-1.5 bg-bg-sunken rounded-full overflow-hidden\">\n            <div\n              className={`h-full rounded-full transition-all ${\n                data.value >= data.target ? 'bg-state-success' : 'bg-action-primary-bg'\n              }`}\n              style={{\n                width: `${Math.min((data.value / data.target) * 100, 100)}%`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Sparkline */}\n      {config?.showSparkline !== false && data?.sparklineData?.length ? (\n        <div className=\"mt-auto pt-2\">\n          <SparklineChart data={data.sparklineData} width={120} height={32} color={sparklineColor} showFill />\n        </div>\n      ) : null}\n\n      {/* Drilldown Indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-2 flex items-center justify-end\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default MetricCardWidget;\n"],"mappings":"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"}
+{"version":3,"file":"MetricCardWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardWidget.tsx"],"sourcesContent":["/**\n * MetricCardWidget Component\n *\n * Displays a single KPI/metric with trend, comparison, and optional sparkline.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, MetricCardConfig } from '../../../types';\nimport { TrendIndicator, type TrendDirection } from './TrendIndicator';\nimport { ComparisonBadge } from './ComparisonBadge';\nimport { SparklineChart, type SparklineDataPoint } from './SparklineChart';\nimport { firstObjectRow, inferValueField, unwrapRows } from '../utils/inferFields';\nimport { resolveConditionalStyle, conditionalStyleToClassName } from '../utils/conditionalFormat';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Fetched data */\n  data?: MetricCardData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives metric data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface MetricCardData {\n  /** Primary value to display */\n  value: number | string;\n  /** Previous value for comparison */\n  previousValue?: number;\n  /** Percentage change from previous */\n  changePercent?: number;\n  /** Trend direction override */\n  trend?: TrendDirection;\n  /** Sparkline data points */\n  sparklineData?: SparklineDataPoint[];\n  /** Target value for comparison */\n  target?: number;\n  /** Unit label (e.g., \"users\", \"$\") */\n  unit?: string;\n  /** Whether the metric is a currency */\n  isCurrency?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Format a number based on configuration\n */\nfunction formatValue(value: number | string, config?: MetricCardConfig): string {\n  if (typeof value === 'string') return value;\n\n  const { format = 'number', prefix, suffix } = config || {};\n\n  let formatted: string;\n\n  switch (format) {\n    case 'currency':\n      formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      }).format(value);\n      break;\n\n    case 'percentage':\n      formatted = `${(value * 100).toFixed(1)}%`;\n      break;\n\n    case 'compact':\n      formatted = new Intl.NumberFormat('en-US', {\n        notation: 'compact',\n        maximumFractionDigits: 1,\n      }).format(value);\n      break;\n\n    case 'number':\n    default:\n      formatted = new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: 2,\n      }).format(value);\n  }\n\n  // Apply prefix/suffix if provided\n  if (prefix) formatted = `${prefix}${formatted}`;\n  if (suffix) formatted = `${formatted}${suffix}`;\n\n  return formatted;\n}\n\n/**\n * Calculate trend direction from change percent\n */\nfunction calculateTrend(changePercent?: number): TrendDirection {\n  if (changePercent === undefined || changePercent === 0) return 'flat';\n  return changePercent > 0 ? 'up' : 'down';\n}\n\n/**\n * Get sparkline color based on trend\n */\nfunction getSparklineColor(trend: TrendDirection, positiveIsGood: boolean): 'success' | 'error' | 'muted' {\n  if (trend === 'flat') return 'muted';\n  const isGood = positiveIsGood ? trend === 'up' : trend === 'down';\n  return isGood ? 'success' : 'error';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardWidget: FC<MetricCardWidgetProps> = memo(function MetricCardWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as MetricCardConfig | undefined;\n\n  // Normalize data - extract value from object if valueField is configured\n  const data = useMemo((): MetricCardData | undefined => {\n    if (!rawData) return undefined;\n\n    // Helper to get nested value using dot notation (e.g., \"summary.totalSales\")\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown => {\n      return path.split('.').reduce((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj as unknown);\n    };\n\n    // A parser can return a bare scalar (e.g. `. | length` -> 127). Handle that\n    // up front: the `in` operator below throws \"Cannot use 'in' operator to\n    // search for 'value' in 127\" when rawData is a primitive, which the widget\n    // error boundary surfaces as \"Failed to render\" (BOFF-4110).\n    if (typeof rawData === 'number' || typeof rawData === 'string') {\n      return { value: rawData };\n    }\n\n    // If data already has 'value' property, use it directly. Guard the `in`\n    // operator with an object check — it only accepts an object on the RHS.\n    if (typeof rawData === 'object' && 'value' in rawData && rawData.value !== undefined) {\n      return rawData as MetricCardData;\n    }\n\n    // If valueField is configured, extract the value from that field (supports dot notation)\n    const valueField = (config as unknown as Record<string, unknown> | undefined)?.valueField as string | undefined;\n    if (valueField && typeof rawData === 'object') {\n      const extractedValue = getNestedValue(rawData as unknown as Record<string, unknown>, valueField);\n      if (extractedValue !== undefined) {\n        // Also try to extract previousValue if previousValueField is configured\n        const previousValueField = (config as unknown as Record<string, unknown> | undefined)?.previousValueField as\n          string | undefined;\n        const previousValue = previousValueField\n          ? (getNestedValue(rawData as unknown as Record<string, unknown>, previousValueField) as number | undefined)\n          : undefined;\n\n        return {\n          value: extractedValue as number | string,\n          previousValue,\n          changePercent:\n            previousValue !== undefined && typeof extractedValue === 'number'\n              ? ((extractedValue - previousValue) / previousValue) * 100\n              : undefined,\n        };\n      }\n    }\n\n    // Try common field names at top level\n    const commonFields = ['value', 'total', 'amount', 'count', 'sum', 'totalSales', 'totalRevenue', 'totalOrders'];\n    for (const field of commonFields) {\n      if (typeof rawData === 'object' && field in rawData) {\n        const val = (rawData as unknown as Record<string, unknown>)[field];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    // Try looking in nested 'summary' object (common pattern)\n    if (typeof rawData === 'object' && 'summary' in rawData) {\n      const summary = (rawData as Record<string, unknown>).summary as Record<string, unknown> | undefined;\n      if (summary && typeof summary === 'object') {\n        for (const field of commonFields) {\n          if (field in summary) {\n            const val = summary[field];\n            if (typeof val === 'number' || typeof val === 'string') {\n              return { value: val };\n            }\n          }\n        }\n      }\n    }\n\n    // If rawData is a number or string directly, use it\n    if (typeof rawData === 'number' || typeof rawData === 'string') {\n      return { value: rawData };\n    }\n\n    // BOFF-2246 smart default: if rawData is an array (or envelope around an\n    // array) with object rows, use the configured valueField if it resolves\n    // on any row (supports dotted paths like \"metrics.revenue\") — otherwise\n    // pick the first numeric field from row[0]. This path only fires when\n    // the earlier top-level extraction didn't find anything, but an explicit\n    // `config.valueField` (flat or dotted) must always win over inference.\n    const firstRow = firstObjectRow(rawData);\n    if (firstRow) {\n      const configuredField = (config as unknown as Record<string, unknown> | undefined)?.valueField as\n        string | undefined;\n      if (configuredField) {\n        // Configured field is authoritative. Scan every row for it so sparse\n        // envelopes like `{data:[{id:1},{revenue:120}]}` with\n        // `valueField:\"revenue\"` still resolve. If no row carries it, return\n        // undefined rather than substituting an unrelated numeric column\n        // from row[0] (that would silently misrepresent the user's mapping).\n        const rows = unwrapRows(rawData) ?? [firstRow];\n        for (const r of rows) {\n          if (r && typeof r === 'object') {\n            const resolved = getNestedValue(r as Record<string, unknown>, configuredField);\n            if (typeof resolved === 'number' || typeof resolved === 'string') {\n              return { value: resolved };\n            }\n          }\n        }\n        return undefined;\n      }\n      const inferredField = inferValueField(firstRow);\n      if (inferredField) {\n        const val = firstRow[inferredField];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    return undefined;\n  }, [rawData, config]);\n\n  // Calculate derived values\n  const trend = useMemo(() => {\n    return data?.trend || calculateTrend(data?.changePercent);\n  }, [data?.trend, data?.changePercent]);\n\n  const positiveIsGood = config?.positiveIsGood ?? true;\n\n  const formattedValue = useMemo(() => {\n    // Treat 0 / \"\" as real values — only a missing value renders the em dash.\n    // (`if (!data?.value)` would wrongly blank out a legitimate 0, e.g. an ED\n    // boarding-compliance of 0% or an available-bed count of 0.)\n    if (data?.value === undefined || data?.value === null) return '—';\n    return formatValue(data.value, config);\n  }, [data?.value, config]);\n\n  const sparklineColor = useMemo(() => {\n    return getSparklineColor(trend, positiveIsGood);\n  }, [trend, positiveIsGood]);\n\n  // Conditional formatting on the metric value (threshold-driven color, not\n  // just trend direction). Falls back to the default primary text color.\n  const valueConditionalClass = useMemo(() => {\n    const style = resolveConditionalStyle(data?.value, config?.conditionalRules);\n    return conditionalStyleToClassName(style);\n  }, [data?.value, config?.conditionalRules]);\n\n  // Handle click\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown) {\n      onDrilldown({\n        value: data?.value,\n        changePercent: data?.changePercent,\n        trend,\n        target: data?.target,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, trend]);\n\n  // Determine if clickable\n  const isClickable = Boolean(onDrilldown || (onClick && widget.drilldowns?.length));\n\n  return (\n    <div\n      className={`\n          flex flex-col h-full p-4\n          ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n        `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Subtitle/Label */}\n      {config?.subtitle && <p className=\"text-xs text-text-secondary mb-1 truncate\">{config.subtitle}</p>}\n\n      {/* Main Value */}\n      <div className=\"flex items-baseline gap-2 mb-2\">\n        <span\n          className={`text-3xl font-semibold tracking-tight ${valueConditionalClass || 'text-text-primary'}`}\n          title={String(data?.value)}\n        >\n          {formattedValue}\n        </span>\n\n        {/* Trend Indicator (inline) */}\n        {config?.showTrend !== false && data?.changePercent !== undefined && (\n          <TrendIndicator direction={trend} size=\"md\" positiveIsGood={positiveIsGood} />\n        )}\n      </div>\n\n      {/* Comparison Badge */}\n      {config?.showComparison !== false && data?.changePercent !== undefined && (\n        <div className=\"mb-3\">\n          <ComparisonBadge\n            value={data.changePercent}\n            label={config?.comparisonLabel}\n            positiveIsGood={positiveIsGood}\n            size=\"sm\"\n          />\n        </div>\n      )}\n\n      {/* Target Progress */}\n      {data?.target !== undefined && typeof data.value === 'number' && (\n        <div className=\"mb-3\">\n          <div className=\"flex justify-between text-xs text-text-secondary mb-1\">\n            <span>Target: {formatValue(data.target, config)}</span>\n            <span>{((data.value / data.target) * 100).toFixed(0)}%</span>\n          </div>\n          <div className=\"h-1.5 bg-bg-sunken rounded-full overflow-hidden\">\n            <div\n              className={`h-full rounded-full transition-all ${\n                data.value >= data.target ? 'bg-state-success' : 'bg-action-primary-bg'\n              }`}\n              style={{\n                width: `${Math.min((data.value / data.target) * 100, 100)}%`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Sparkline */}\n      {config?.showSparkline !== false && data?.sparklineData?.length ? (\n        <div className=\"mt-auto pt-2\">\n          <SparklineChart data={data.sparklineData} width={120} height={32} color={sparklineColor} showFill />\n        </div>\n      ) : null}\n\n      {/* Drilldown Indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-2 flex items-center justify-end\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default MetricCardWidget;\n"],"mappings":"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"}

package/package.json

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