npm - @burdenoff/microfe-bigconsole - Versions diffs - 2026.1008.11 → 2026.1008.13 - Mend

@burdenoff/microfe-bigconsole 2026.1008.11 → 2026.1008.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { localProposalSource as ne } from "./proposalSource.js";
 import { memo as a, useCallback as o, useEffect as re, useMemo as s, useState as c } from "react";
 import { AlertTriangle as l, Check as u, Loader2 as d, RefreshCw as ie, Sparkles as ae, X as oe } from "lucide-react";
 import { Button as f, Input as p, Label as m, Textarea as se } from "@burdenoff/fe-libs/ui";
-import { Fragment as ce, jsx as h, jsxs as g } from "react/jsx-runtime";
-import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/customWidget/CustomWidgetProposalPanel.tsx
 var v = "w-full", y = {
 	loading: "neutral",
@@ -61,7 +61,7 @@ function S(e) {
 	return 0;
 }
 var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T, onClose: E, source: D = ne }) {
-	let { t: O } = _(), k = s(() => ({
+	let { t: O } = ce(), k = s(() => ({
 		loading: {
 			title: O("bigconsole.widget.customWidget.preview.loading.title", "Building preview…"),
 			body: O("bigconsole.widget.customWidget.preview.loading.body", "Running the parser against the selected DataSink.")
@@ -160,43 +160,43 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 		E,
 		O
 	]), Q = J.issues.filter((e) => e.severity === "error"), $ = J.issues.filter((e) => e.severity === "warning");
-	return /* @__PURE__ */ h("section", {
+	return /* @__PURE__ */ g("section", {
 		"data-testid": "custom-widget-proposal-panel",
 		"aria-label": O("bigconsole.widget.customWidget.panel.ariaLabel", "AI custom widget builder"),
 		className: "flex h-full w-full min-w-0 flex-col overflow-y-auto p-4",
-		children: /* @__PURE__ */ g(t, { children: [/* @__PURE__ */ h(e, {
+		children: /* @__PURE__ */ _(t, { children: [/* @__PURE__ */ g(e, {
 			title: O("bigconsole.widget.customWidget.prompt.label", "Describe the widget you need"),
 			description: "Plain English. The assistant proposes a typed widget you can edit before anything is saved.",
-			icon: /* @__PURE__ */ h(ae, {
+			icon: /* @__PURE__ */ g(ae, {
 				className: "size-4",
 				"aria-hidden": "true"
 			}),
-			actions: /* @__PURE__ */ g("div", {
+			actions: /* @__PURE__ */ _("div", {
 				className: "flex flex-wrap gap-2",
-				children: [/* @__PURE__ */ g(f, {
+				children: [/* @__PURE__ */ _(f, {
 					"data-testid": "custom-widget-generate",
 					onClick: ue,
 					disabled: !A.trim() || N,
-					children: [N ? /* @__PURE__ */ h(d, {
+					children: [N ? /* @__PURE__ */ g(d, {
 						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
 					}) : null, j ? O("bigconsole.widget.customWidget.action.regenerate", "Regenerate") : O("bigconsole.widget.customWidget.action.generateProposal", "Generate proposal")]
-				}), j ? /* @__PURE__ */ g(f, {
+				}), j ? /* @__PURE__ */ _(f, {
 					variant: "outline",
 					"data-testid": "custom-widget-reject",
 					onClick: de,
-					children: [/* @__PURE__ */ h(oe, {
+					children: [/* @__PURE__ */ g(oe, {
 						className: "mr-1 size-4",
 						"aria-hidden": "true"
 					}), O("bigconsole.widget.customWidget.action.reject", "Reject")]
 				}) : null]
 			}),
-			children: /* @__PURE__ */ g("div", {
+			children: /* @__PURE__ */ _("div", {
 				className: "flex flex-col gap-2",
-				children: [/* @__PURE__ */ h(m, {
+				children: [/* @__PURE__ */ g(m, {
 					htmlFor: "custom-widget-prompt",
 					children: "What should it show?"
-				}), /* @__PURE__ */ h(se, {
+				}), /* @__PURE__ */ g(se, {
 					id: "custom-widget-prompt",
 					"data-testid": "custom-widget-prompt",
 					value: A,
@@ -205,95 +205,95 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 					rows: 3
 				})]
 			})
-		}), j ? /* @__PURE__ */ g(ce, { children: [
-			/* @__PURE__ */ g(e, {
+		}), j ? /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ _(e, {
 				emphasis: "primary",
 				tone: y[Y],
 				title: k[Y].title,
 				description: "Rendered by the real widget renderer against the real parser output — what you approve is what you get.",
-				meta: /* @__PURE__ */ h("span", {
+				meta: /* @__PURE__ */ g("span", {
 					"data-testid": "custom-widget-preview-state",
 					"data-state": Y,
 					className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
 					children: Y
 				}),
-				children: [/* @__PURE__ */ h("div", {
+				children: [/* @__PURE__ */ g("div", {
 					"data-testid": "custom-widget-preview",
 					className: "min-h-[220px] min-w-0 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-2",
-					children: Y === "loading" ? /* @__PURE__ */ g("div", {
+					children: Y === "loading" ? /* @__PURE__ */ _("div", {
 						className: "flex h-[200px] items-center justify-center text-text-secondary",
-						children: [/* @__PURE__ */ h(d, {
+						children: [/* @__PURE__ */ g(d, {
 							className: "mr-2 size-4 animate-spin",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ h("span", {
+						}), /* @__PURE__ */ g("span", {
 							className: "text-sm",
 							children: k.loading.body
 						})]
-					}) : Y === "valid" ? /* @__PURE__ */ h("div", {
+					}) : Y === "valid" ? /* @__PURE__ */ g("div", {
 						className: "h-[200px]",
-						children: /* @__PURE__ */ h(n, {
+						children: /* @__PURE__ */ g(n, {
 							widgetId: `preview-${j.id}`,
-							children: /* @__PURE__ */ h(ee, {
+							children: /* @__PURE__ */ g(ee, {
 								widget: b(j, O("bigconsole.widget.customWidget.untitledWidget", "Untitled widget")),
 								data: z
 							})
 						})
-					}) : /* @__PURE__ */ g("div", {
+					}) : /* @__PURE__ */ _("div", {
 						className: "flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center",
 						children: [
-							/* @__PURE__ */ h(l, {
+							/* @__PURE__ */ g(l, {
 								className: "size-5 text-[var(--color-status-warning-text)]",
 								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ h("p", {
+							/* @__PURE__ */ g("p", {
 								className: "text-sm text-text-secondary",
 								children: k[Y].body
 							}),
-							Y === "access-error" ? /* @__PURE__ */ g(f, {
+							Y === "access-error" ? /* @__PURE__ */ _(f, {
 								size: "sm",
 								variant: "outline",
 								onClick: () => X((e) => ({ ...e })),
-								children: [/* @__PURE__ */ h(ie, {
+								children: [/* @__PURE__ */ g(ie, {
 									className: "mr-1 size-3.5",
 									"aria-hidden": "true"
 								}), O("bigconsole.widget.customWidget.action.retry", "Retry")]
 							}) : null
 						]
 					})
-				}), j.rationale ? /* @__PURE__ */ h("p", {
+				}), j.rationale ? /* @__PURE__ */ g("p", {
 					className: "mt-2 text-xs text-text-secondary",
 					"data-testid": "custom-widget-rationale",
 					children: j.rationale
 				}) : null]
 			}),
-			Q.length > 0 || $.length > 0 ? /* @__PURE__ */ h(e, {
+			Q.length > 0 || $.length > 0 ? /* @__PURE__ */ g(e, {
 				tone: Q.length > 0 ? "danger" : "warning",
 				padding: "compact",
 				headingLevel: 3,
 				title: Q.length > 0 ? `${Q.length} ${Q.length === 1 ? "problem" : "problems"} to fix before approving` : `${$.length} ${$.length === 1 ? "warning" : "warnings"}`,
-				children: /* @__PURE__ */ h("ul", {
+				children: /* @__PURE__ */ g("ul", {
 					"data-testid": "custom-widget-issues",
 					className: "flex min-w-0 flex-col gap-1",
-					children: [...Q, ...$].map((e) => /* @__PURE__ */ h("li", {
+					children: [...Q, ...$].map((e) => /* @__PURE__ */ g("li", {
 						"data-severity": e.severity,
 						className: `break-words text-xs ${e.severity === "error" ? "text-[var(--color-status-error-text)]" : "text-[var(--color-status-warning-text)]"}`,
 						children: e.message
 					}, `${e.code}-${e.path ?? ""}`))
 				})
 			}) : null,
-			/* @__PURE__ */ h(e, {
+			/* @__PURE__ */ g(e, {
 				title: O("bigconsole.widget.customWidget.proposal.heading", "Proposal"),
 				description: "Every field is editable — the assistant proposes, you dispose.",
 				"data-testid": "custom-widget-proposal-fields",
-				children: /* @__PURE__ */ g("div", {
+				children: /* @__PURE__ */ _("div", {
 					className: "flex flex-col gap-3",
 					children: [
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ h(m, {
+							children: [/* @__PURE__ */ g(m, {
 								htmlFor: "custom-widget-title",
 								children: O("bigconsole.widget.customWidget.field.title", "Title")
-							}), /* @__PURE__ */ h(p, {
+							}), /* @__PURE__ */ g(p, {
 								id: "custom-widget-title",
 								"data-testid": "custom-widget-title",
 								className: v,
@@ -307,12 +307,12 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 								}))
 							})]
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ h(m, {
+							children: [/* @__PURE__ */ g(m, {
 								htmlFor: "custom-widget-type",
 								children: O("bigconsole.widget.customWidget.field.widgetType", "Widget type")
-							}), /* @__PURE__ */ h("select", {
+							}), /* @__PURE__ */ g("select", {
 								id: "custom-widget-type",
 								"data-testid": "custom-widget-type",
 								value: j.widgetType,
@@ -321,18 +321,18 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 									widgetType: e.target.value
 								})),
 								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-								children: te.map((e) => /* @__PURE__ */ h("option", {
+								children: te.map((e) => /* @__PURE__ */ g("option", {
 									value: e,
 									children: e
 								}, e))
 							})]
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ h(m, {
+							children: [/* @__PURE__ */ g(m, {
 								htmlFor: "custom-widget-sink",
 								children: O("bigconsole.widget.customWidget.field.dataSink", "DataSink")
-							}), /* @__PURE__ */ g("select", {
+							}), /* @__PURE__ */ _("select", {
 								id: "custom-widget-sink",
 								"data-testid": "custom-widget-sink",
 								value: j.binding.dataSinkId,
@@ -348,21 +348,21 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 									}));
 								},
 								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-								children: [/* @__PURE__ */ h("option", {
+								children: [/* @__PURE__ */ g("option", {
 									value: "",
 									children: O("bigconsole.widget.customWidget.field.selectDataSink", "Select a DataSink…")
-								}), a.map((e) => /* @__PURE__ */ h("option", {
+								}), a.map((e) => /* @__PURE__ */ g("option", {
 									value: e.id,
 									children: e.name || e.key
 								}, e.id))]
 							})]
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ h(m, {
+							children: [/* @__PURE__ */ g(m, {
 								htmlFor: "custom-widget-parser",
 								children: O("bigconsole.widget.customWidget.field.parser", "Parser")
-							}), /* @__PURE__ */ g("select", {
+							}), /* @__PURE__ */ _("select", {
 								id: "custom-widget-parser",
 								"data-testid": "custom-widget-parser",
 								value: j.binding.parserId ?? "",
@@ -378,29 +378,29 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 									}));
 								},
 								className: "w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-								children: [/* @__PURE__ */ h("option", {
+								children: [/* @__PURE__ */ g("option", {
 									value: "",
 									children: O("bigconsole.widget.customWidget.field.noParser", "No parser")
-								}), C.map((e) => /* @__PURE__ */ h("option", {
+								}), C.map((e) => /* @__PURE__ */ g("option", {
 									value: e.id,
 									children: e.name
 								}, e.id))]
 							})]
 						}),
-						Object.keys(j.fieldMapping).length > 0 ? /* @__PURE__ */ g("fieldset", {
+						Object.keys(j.fieldMapping).length > 0 ? /* @__PURE__ */ _("fieldset", {
 							className: "flex flex-col gap-2",
 							"data-testid": "custom-widget-field-mapping",
 							children: [
-								/* @__PURE__ */ h("legend", {
+								/* @__PURE__ */ g("legend", {
 									className: "text-sm font-medium text-text-primary",
 									children: O("bigconsole.widget.customWidget.fieldMapping.legend", "Field mapping")
 								}),
-								Object.entries(j.fieldMapping).map(([e, t]) => /* @__PURE__ */ g("div", {
+								Object.entries(j.fieldMapping).map(([e, t]) => /* @__PURE__ */ _("div", {
 									className: "flex flex-col gap-1",
-									children: [/* @__PURE__ */ h(m, {
+									children: [/* @__PURE__ */ g(m, {
 										htmlFor: `custom-widget-field-${e}`,
 										children: e
-									}), /* @__PURE__ */ h(p, {
+									}), /* @__PURE__ */ g(p, {
 										id: `custom-widget-field-${e}`,
 										"data-testid": `custom-widget-field-${e}`,
 										value: t,
@@ -413,7 +413,7 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 										}))
 									})]
 								}, e)),
-								q?.length ? /* @__PURE__ */ h("p", {
+								q?.length ? /* @__PURE__ */ g("p", {
 									className: "break-words text-xs text-text-secondary",
 									children: O("bigconsole.widget.customWidget.fieldMapping.available", "Available: {{fields}}", { fields: q.join(", ") })
 								}) : null
@@ -422,44 +422,44 @@ var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T,
 					]
 				})
 			}),
-			L ? /* @__PURE__ */ h(e, {
+			L ? /* @__PURE__ */ g(e, {
 				tone: "danger",
 				padding: "compact",
 				headingLevel: 3,
 				title: "Could not add the widget",
-				children: /* @__PURE__ */ h("p", {
+				children: /* @__PURE__ */ g("p", {
 					role: "alert",
 					className: "break-words text-xs text-[var(--color-status-error-text)]",
 					"data-testid": "custom-widget-approve-error",
 					children: L
 				})
 			}) : null,
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ _("div", {
 				className: "flex flex-wrap gap-2 border-t border-[var(--color-border-subtle)] pt-3",
-				children: [/* @__PURE__ */ g(f, {
+				children: [/* @__PURE__ */ _(f, {
 					"data-testid": "custom-widget-approve",
 					onClick: Z,
 					disabled: !J.canApprove || F,
-					children: [F ? /* @__PURE__ */ h(d, {
+					children: [F ? /* @__PURE__ */ g(d, {
 						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
-					}) : /* @__PURE__ */ h(u, {
+					}) : /* @__PURE__ */ g(u, {
 						className: "mr-1 size-4",
 						"aria-hidden": "true"
 					}), O("bigconsole.widget.customWidget.action.approveAndAdd", "Approve & add to dashboard")]
-				}), /* @__PURE__ */ h(f, {
+				}), /* @__PURE__ */ g(f, {
 					variant: "outline",
 					onClick: E,
 					"data-testid": "custom-widget-cancel",
 					children: O("bigconsole.widget.customWidget.action.cancel", "Cancel")
 				})]
 			})
-		] }) : /* @__PURE__ */ h(e, {
+		] }) : /* @__PURE__ */ g(e, {
 			emphasis: "muted",
 			padding: "compact",
 			title: "No proposal yet",
 			headingLevel: 3,
-			children: /* @__PURE__ */ h("p", {
+			children: /* @__PURE__ */ g("p", {
 				className: "text-sm text-text-secondary",
 				"data-testid": "custom-widget-empty",
 				children: O("bigconsole.widget.customWidget.empty", "No proposal yet. Describe a widget and the assistant will propose one for you to review — nothing is added to the dashboard until you approve it.")

package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomWidgetProposalPanel.js","names":[],"sources":["../../../src/bigconsole/customWidget/CustomWidgetProposalPanel.tsx"],"sourcesContent":["/*\n Custom-widget proposal review panel (BOFF-5532).\n \n The authoring surface for the AI custom-widget builder: prompt in, typed\n * proposal out, reviewed and edited by a human, then approved into a real\n * widget. Nothing is written to the dashboard until the reviewer approves.\n \n Deliberate choices:\n * - The preview renders through the real widget renderer with the real\n * parser output, so what the reviewer approves is what they will get.\n * - Bindings are chosen from the user's permitted sinks and parsers only, and\n * the panel says plainly when a proposal points somewhere they cannot reach.\n * - Every proposal field is editable before approval — the AI proposes, the\n * reviewer disposes.\n /\n\nimport { type FC, memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button, Input, Label, Textarea } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AlertTriangle, Check, Loader2, RefreshCw, Sparkles, X } from 'lucide-react';\n\nimport type { Widget } from '../types';\nimport { BigConsoleRenderer } from '../renderers/adapters/BigConsoleRenderer';\nimport { WidgetErrorBoundary } from '../components/widgets/WidgetErrorBoundary';\nimport {\n PROPOSABLE_WIDGET_TYPES,\n derivePreviewState,\n validateProposal,\n type CustomWidgetProposal,\n type ProposableWidgetType,\n type ProposalPreviewState,\n} from './proposalContract';\nimport {\n localProposalSource,\n type CustomWidgetProposalSource,\n type ProposalCandidateParser,\n type ProposalCandidateSink,\n} from './proposalSource';\nimport { Section, SectionStack, type SectionTone } from '../components/common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface CustomWidgetProposalPanelProps {\n /* Sinks the user may bind to (already RBAC-filtered by the API). /\n sinks: readonly ProposalCandidateSink[];\n /* Parsers the user may bind to. /\n parsers: readonly ProposalCandidateParser[];\n /\n Resolves the rows a binding would produce, for the preview. Should reject\n * (or throw) when the user cannot read the binding, so the panel can show the\n * access-failure state.\n /\n resolvePreviewData: (proposal: CustomWidgetProposal) => Promise<unknown>;\n /* Persists an approved proposal. Resolves once the widget exists. /\n onApprove: (proposal: CustomWidgetProposal) => Promise<void>;\n /* Closes the panel without persisting anything. /\n onClose: () => void;\n /* Swap for the GraphQL-backed source once BOFF-3021's backend half lands. /\n source?: CustomWidgetProposalSource;\n}\n\nconst FIELD_CLASSES = 'w-full';\n\n/\n The preview is the thing being judged, so its tone tracks the binding state.\n * The copy itself is translated per render (`previewCopy` below); only the tone\n * ladder is static.\n /\nconst PREVIEW_TONES: Record<ProposalPreviewState, SectionTone> = {\n loading: 'neutral',\n valid: 'neutral',\n 'no-data': 'warning',\n 'field-mismatch': 'warning',\n 'access-error': 'danger',\n};\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/* Builds a throwaway Widget so the preview can use the production renderer. /\nfunction toDraftWidget(proposal: CustomWidgetProposal, untitledLabel: string): Widget {\n const now = new Date(0).toISOString();\n return {\n id: `preview-${proposal.id}`,\n pageId: 'preview',\n type: proposal.widgetType,\n title: proposal.presentation.title \|\| untitledLabel,\n description: proposal.presentation.description,\n dataSinkId: proposal.binding.dataSinkId \|\| null,\n parserId: proposal.binding.parserId \|\| null,\n config: { ...proposal.presentation.config, ...proposal.fieldMapping },\n position: { x: 0, y: 0, width: 6, height: 4 },\n positionX: 0,\n positionY: 0,\n positionWidth: 6,\n positionHeight: 4,\n createdAt: now,\n updatedAt: now,\n } as Widget;\n}\n\n/* Field names present in the resolved preview payload, for mismatch checks. /\nfunction extractFields(data: unknown): string[] \| undefined {\n if (Array.isArray(data)) {\n const first = data.find((row) => row && typeof row === 'object');\n return first ? Object.keys(first as Record<string, unknown>) : [];\n }\n if (data && typeof data === 'object') return Object.keys(data as Record<string, unknown>);\n return undefined;\n}\n\nfunction countRows(data: unknown): number {\n if (Array.isArray(data)) return data.length;\n if (data && typeof data === 'object') {\n const cells = (data as { cells?: unknown }).cells;\n if (Array.isArray(cells)) return cells.length;\n return Object.keys(data as Record<string, unknown>).length;\n }\n return 0;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CustomWidgetProposalPanel: FC<CustomWidgetProposalPanelProps> = memo(function CustomWidgetProposalPanel({\n sinks,\n parsers,\n resolvePreviewData,\n onApprove,\n onClose,\n source = localProposalSource,\n}) {\n const { t } = useI18n();\n\n const previewCopy = useMemo<Record<ProposalPreviewState, { title: string; body: string }>>(\n () => ({\n loading: {\n title: t('bigconsole.widget.customWidget.preview.loading.title', 'Building preview…'),\n body: t(\n 'bigconsole.widget.customWidget.preview.loading.body',\n 'Running the parser against the selected DataSink.'\n ),\n },\n valid: {\n title: t('bigconsole.widget.customWidget.preview.valid.title', 'Preview'),\n body: '',\n },\n 'no-data': {\n title: t('bigconsole.widget.customWidget.preview.noData.title', 'No data returned'),\n body: t(\n 'bigconsole.widget.customWidget.preview.noData.body',\n 'The binding is valid but the parser returned no rows. The widget will render empty until the sink has data.'\n ),\n },\n 'field-mismatch': {\n title: t('bigconsole.widget.customWidget.preview.fieldMismatch.title', 'Field mismatch'),\n body: t(\n 'bigconsole.widget.customWidget.preview.fieldMismatch.body',\n 'Some mapped fields are not present in the parser output. Fix the mapping below before approving.'\n ),\n },\n 'access-error': {\n title: t('bigconsole.widget.customWidget.preview.accessError.title', 'Cannot read this data'),\n body: t(\n 'bigconsole.widget.customWidget.preview.accessError.body',\n 'You do not have access to the proposed DataSink or parser in this workspace.'\n ),\n },\n }),\n [t]\n );\n\n const [prompt, setPrompt] = useState('');\n const [proposal, setProposal] = useState<CustomWidgetProposal \| null>(null);\n const [isProposing, setIsProposing] = useState(false);\n const [isApproving, setIsApproving] = useState(false);\n const [approveError, setApproveError] = useState<string \| null>(null);\n\n const [previewData, setPreviewData] = useState<unknown>(undefined);\n const [previewLoading, setPreviewLoading] = useState(false);\n const [previewAccessError, setPreviewAccessError] = useState(false);\n\n const permittedDataSinkIds = useMemo(() => sinks.map((sink) => sink.id), [sinks]);\n const permittedParserIds = useMemo(() => parsers.map((parser) => parser.id), [parsers]);\n const availableFields = useMemo(() => extractFields(previewData), [previewData]);\n\n const validation = useMemo(\n () =>\n proposal\n ? validateProposal(proposal, { permittedDataSinkIds, permittedParserIds, availableFields })\n : { issues: [], canApprove: false },\n [proposal, permittedDataSinkIds, permittedParserIds, availableFields]\n );\n\n const previewState = useMemo(\n () =>\n derivePreviewState(validation, {\n loading: previewLoading,\n accessError: previewAccessError,\n rowCount: countRows(previewData),\n }),\n [validation, previewLoading, previewAccessError, previewData]\n );\n\n // Re-resolve the preview whenever the binding changes.\n const bindingKey = proposal\n ? `${proposal.binding.dataSinkId}\|${proposal.binding.parserId ?? ''}\|${proposal.binding.dataPath ?? ''}`\n : '';\n\n useEffect(() => {\n if (!proposal \|\| !proposal.binding.dataSinkId) {\n setPreviewData(undefined);\n return;\n }\n let cancelled = false;\n setPreviewLoading(true);\n setPreviewAccessError(false);\n\n resolvePreviewData(proposal)\n .then((data) => {\n if (cancelled) return;\n setPreviewData(data);\n })\n .catch(() => {\n if (cancelled) return;\n setPreviewData(undefined);\n setPreviewAccessError(true);\n })\n .finally(() => {\n if (!cancelled) setPreviewLoading(false);\n });\n\n return () => {\n cancelled = true;\n };\n // `bindingKey` captures every input that changes the resolved data.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [bindingKey, resolvePreviewData]);\n\n const handlePropose = useCallback(async () => {\n if (!prompt.trim()) return;\n setIsProposing(true);\n setApproveError(null);\n try {\n const next = await source.propose({ prompt: prompt.trim(), sinks, parsers });\n setProposal(next);\n } finally {\n setIsProposing(false);\n }\n }, [prompt, source, sinks, parsers]);\n\n const patchProposal = useCallback((patch: (current: CustomWidgetProposal) => CustomWidgetProposal) => {\n setProposal((current) => (current ? patch(current) : current));\n }, []);\n\n const handleReject = useCallback(() => {\n setProposal(null);\n setPreviewData(undefined);\n setPreviewAccessError(false);\n setApproveError(null);\n }, []);\n\n const handleApprove = useCallback(async () => {\n if (!proposal \|\| !validation.canApprove) return;\n setIsApproving(true);\n setApproveError(null);\n try {\n await onApprove(proposal);\n onClose();\n } catch (error) {\n setApproveError(\n error instanceof Error\n ? error.message\n : t('bigconsole.widget.customWidget.error.couldNotSaveWidget', 'Could not save the widget.')\n );\n } finally {\n setIsApproving(false);\n }\n }, [proposal, validation.canApprove, onApprove, onClose, t]);\n\n const errors = validation.issues.filter((issue) => issue.severity === 'error');\n const warnings = validation.issues.filter((issue) => issue.severity === 'warning');\n\n return (\n <section\n data-testid=\"custom-widget-proposal-panel\"\n aria-label={t('bigconsole.widget.customWidget.panel.ariaLabel', 'AI custom widget builder')}\n className=\"flex h-full w-full min-w-0 flex-col overflow-y-auto p-4\"\n >\n {/\n Five stages — prompt → preview → validation → editable proposal →\n approval — used to be five bare divs separated by one uniform gap. Each\n is now a labelled section, and the preview (the thing the reviewer is\n actually judging) is the panel's single `primary` block (BOFF-5636).\n /}\n <SectionStack>\n {/ ---------- Prompt ---------- /}\n <Section\n title={t('bigconsole.widget.customWidget.prompt.label', 'Describe the widget you need')}\n description=\"Plain English. The assistant proposes a typed widget you can edit before anything is saved.\"\n icon={<Sparkles className=\"size-4\" aria-hidden=\"true\" />}\n actions={\n <div className=\"flex flex-wrap gap-2\">\n <Button\n data-testid=\"custom-widget-generate\"\n onClick={handlePropose}\n disabled={!prompt.trim() \|\| isProposing}\n >\n {isProposing ? <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n {proposal\n ? t('bigconsole.widget.customWidget.action.regenerate', 'Regenerate')\n : t('bigconsole.widget.customWidget.action.generateProposal', 'Generate proposal')}\n </Button>\n {proposal ? (\n <Button variant=\"outline\" data-testid=\"custom-widget-reject\" onClick={handleReject}>\n <X className=\"mr-1 size-4\" aria-hidden=\"true\" />\n {t('bigconsole.widget.customWidget.action.reject', 'Reject')}\n </Button>\n ) : null}\n </div>\n }\n >\n <div className=\"flex flex-col gap-2\">\n <Label htmlFor=\"custom-widget-prompt\">What should it show?</Label>\n <Textarea\n id=\"custom-widget-prompt\"\n data-testid=\"custom-widget-prompt\"\n value={prompt}\n onChange={(event) => setPrompt(event.target.value)}\n placeholder={t(\n 'bigconsole.widget.customWidget.prompt.placeholder',\n 'e.g. a funnel of signup conversion stages'\n )}\n rows={3}\n />\n </div>\n </Section>\n\n {!proposal ? (\n <Section emphasis=\"muted\" padding=\"compact\" title=\"No proposal yet\" headingLevel={3}>\n <p className=\"text-sm text-text-secondary\" data-testid=\"custom-widget-empty\">\n {t(\n 'bigconsole.widget.customWidget.empty',\n 'No proposal yet. Describe a widget and the assistant will propose one for you to review — nothing is added to the dashboard until you approve it.'\n )}\n </p>\n </Section>\n ) : (\n <>\n {/ ---------- Preview ---------- /}\n <Section\n emphasis=\"primary\"\n tone={PREVIEW_TONES[previewState]}\n title={previewCopy[previewState].title}\n description=\"Rendered by the real widget renderer against the real parser output — what you approve is what you get.\"\n meta={\n <span\n data-testid=\"custom-widget-preview-state\"\n data-state={previewState}\n className=\"rounded-pill bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n >\n {previewState}\n </span>\n }\n >\n <div\n data-testid=\"custom-widget-preview\"\n className=\"min-h-[220px] min-w-0 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-2\"\n >\n {previewState === 'loading' ? (\n <div className=\"flex h-[200px] items-center justify-center text-text-secondary\">\n <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" />\n <span className=\"text-sm\">{previewCopy.loading.body}</span>\n </div>\n ) : previewState === 'valid' ? (\n <div className=\"h-[200px]\">\n <WidgetErrorBoundary widgetId={`preview-${proposal.id}`}>\n <BigConsoleRenderer\n widget={toDraftWidget(\n proposal,\n t('bigconsole.widget.customWidget.untitledWidget', 'Untitled widget')\n )}\n data={previewData as Record<string, unknown>}\n />\n </WidgetErrorBoundary>\n </div>\n ) : (\n <div className=\"flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center\">\n <AlertTriangle className=\"size-5 text-[var(--color-status-warning-text)]\" aria-hidden=\"true\" />\n <p className=\"text-sm text-text-secondary\">{previewCopy[previewState].body}</p>\n {previewState === 'access-error' ? (\n <Button size=\"sm\" variant=\"outline\" onClick={() => patchProposal((current) => ({ ...current }))}>\n <RefreshCw className=\"mr-1 size-3.5\" aria-hidden=\"true\" />\n {t('bigconsole.widget.customWidget.action.retry', 'Retry')}\n </Button>\n ) : null}\n </div>\n )}\n </div>\n\n {proposal.rationale ? (\n <p className=\"mt-2 text-xs text-text-secondary\" data-testid=\"custom-widget-rationale\">\n {proposal.rationale}\n </p>\n ) : null}\n </Section>\n\n {/ ---------- Validation ---------- /}\n {errors.length > 0 \|\| warnings.length > 0 ? (\n <Section\n tone={errors.length > 0 ? 'danger' : 'warning'}\n padding=\"compact\"\n headingLevel={3}\n title={\n errors.length > 0\n ? `${errors.length} ${errors.length === 1 ? 'problem' : 'problems'} to fix before approving`\n : `${warnings.length} ${warnings.length === 1 ? 'warning' : 'warnings'}`\n }\n >\n <ul data-testid=\"custom-widget-issues\" className=\"flex min-w-0 flex-col gap-1\">\n {[...errors, ...warnings].map((issue) => (\n <li\n key={`${issue.code}-${issue.path ?? ''}`}\n data-severity={issue.severity}\n className={`break-words text-xs ${\n issue.severity === 'error'\n ? 'text-[var(--color-status-error-text)]'\n : 'text-[var(--color-status-warning-text)]'\n }`}\n >\n {issue.message}\n </li>\n ))}\n </ul>\n </Section>\n ) : null}\n\n {/ ---------- Editable proposal ---------- /}\n <Section\n title={t('bigconsole.widget.customWidget.proposal.heading', 'Proposal')}\n description=\"Every field is editable — the assistant proposes, you dispose.\"\n data-testid=\"custom-widget-proposal-fields\"\n >\n <div className=\"flex flex-col gap-3\">\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-title\">\n {t('bigconsole.widget.customWidget.field.title', 'Title')}\n </Label>\n <Input\n id=\"custom-widget-title\"\n data-testid=\"custom-widget-title\"\n className={FIELD_CLASSES}\n value={proposal.presentation.title}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n presentation: { ...current.presentation, title: event.target.value },\n }))\n }\n />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-type\">\n {t('bigconsole.widget.customWidget.field.widgetType', 'Widget type')}\n </Label>\n <select\n id=\"custom-widget-type\"\n data-testid=\"custom-widget-type\"\n value={proposal.widgetType}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n widgetType: event.target.value as ProposableWidgetType,\n }))\n }\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n {PROPOSABLE_WIDGET_TYPES.map((type) => (\n <option key={type} value={type}>\n {type}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-sink\">\n {t('bigconsole.widget.customWidget.field.dataSink', 'DataSink')}\n </Label>\n <select\n id=\"custom-widget-sink\"\n data-testid=\"custom-widget-sink\"\n value={proposal.binding.dataSinkId}\n onChange={(event) => {\n const sink = sinks.find((candidate) => candidate.id === event.target.value);\n patchProposal((current) => ({\n ...current,\n binding: { ...current.binding, dataSinkId: event.target.value, dataSinkKey: sink?.key },\n }));\n }}\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">\n {t('bigconsole.widget.customWidget.field.selectDataSink', 'Select a DataSink…')}\n </option>\n {sinks.map((sink) => (\n <option key={sink.id} value={sink.id}>\n {sink.name \|\| sink.key}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-parser\">\n {t('bigconsole.widget.customWidget.field.parser', 'Parser')}\n </Label>\n <select\n id=\"custom-widget-parser\"\n data-testid=\"custom-widget-parser\"\n value={proposal.binding.parserId ?? ''}\n onChange={(event) => {\n const parser = parsers.find((candidate) => candidate.id === event.target.value);\n patchProposal((current) => ({\n ...current,\n binding: {\n ...current.binding,\n parserId: event.target.value \|\| undefined,\n parserName: parser?.name,\n },\n }));\n }}\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">{t('bigconsole.widget.customWidget.field.noParser', 'No parser')}</option>\n {parsers.map((parser) => (\n <option key={parser.id} value={parser.id}>\n {parser.name}\n </option>\n ))}\n </select>\n </div>\n\n {/ Field mapping /}\n {Object.keys(proposal.fieldMapping).length > 0 ? (\n <fieldset className=\"flex flex-col gap-2\" data-testid=\"custom-widget-field-mapping\">\n <legend className=\"text-sm font-medium text-text-primary\">\n {t('bigconsole.widget.customWidget.fieldMapping.legend', 'Field mapping')}\n </legend>\n {Object.entries(proposal.fieldMapping).map(([role, field]) => (\n <div key={role} className=\"flex flex-col gap-1\">\n <Label htmlFor={`custom-widget-field-${role}`}>{role}</Label>\n <Input\n id={`custom-widget-field-${role}`}\n data-testid={`custom-widget-field-${role}`}\n value={field}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n fieldMapping: { ...current.fieldMapping, [role]: event.target.value },\n }))\n }\n />\n </div>\n ))}\n {availableFields?.length ? (\n <p className=\"break-words text-xs text-text-secondary\">\n {t('bigconsole.widget.customWidget.fieldMapping.available', 'Available: {{fields}}', {\n fields: availableFields.join(', '),\n })}\n </p>\n ) : null}\n </fieldset>\n ) : null}\n </div>\n </Section>\n\n {/ ---------- Approval ---------- */}\n {approveError ? (\n <Section tone=\"danger\" padding=\"compact\" headingLevel={3} title=\"Could not add the widget\">\n <p\n role=\"alert\"\n className=\"break-words text-xs text-[var(--color-status-error-text)]\"\n data-testid=\"custom-widget-approve-error\"\n >\n {approveError}\n </p>\n </Section>\n ) : null}\n\n <div className=\"flex flex-wrap gap-2 border-t border-[var(--color-border-subtle)] pt-3\">\n <Button\n data-testid=\"custom-widget-approve\"\n onClick={handleApprove}\n disabled={!validation.canApprove \|\| isApproving}\n >\n {isApproving ? (\n <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Check className=\"mr-1 size-4\" aria-hidden=\"true\" />\n )}\n {t('bigconsole.widget.customWidget.action.approveAndAdd', 'Approve & add to dashboard')}\n </Button>\n <Button variant=\"outline\" onClick={onClose} data-testid=\"custom-widget-cancel\">\n {t('bigconsole.widget.customWidget.action.cancel', 'Cancel')}\n </Button>\n </div>\n </>\n )}\n </SectionStack>\n </section>\n );\n});\n\nexport default CustomWidgetProposalPanel;\n"],"mappings":"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"}
1	+ {"version":3,"file":"CustomWidgetProposalPanel.js","names":[],"sources":["../../../src/bigconsole/customWidget/CustomWidgetProposalPanel.tsx"],"sourcesContent":["/*\n Custom-widget proposal review panel (BOFF-5532).\n \n The authoring surface for the AI custom-widget builder: prompt in, typed\n * proposal out, reviewed and edited by a human, then approved into a real\n * widget. Nothing is written to the dashboard until the reviewer approves.\n \n Deliberate choices:\n * - The preview renders through the real widget renderer with the real\n * parser output, so what the reviewer approves is what they will get.\n * - Bindings are chosen from the user's permitted sinks and parsers only, and\n * the panel says plainly when a proposal points somewhere they cannot reach.\n * - Every proposal field is editable before approval — the AI proposes, the\n * reviewer disposes.\n /\n\nimport { type FC, memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { Button, Input, Label, Textarea } from '@burdenoff/fe-libs/ui';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { AlertTriangle, Check, Loader2, RefreshCw, Sparkles, X } from 'lucide-react';\n\nimport type { Widget } from '../types';\nimport { BigConsoleRenderer } from '../renderers/adapters/BigConsoleRenderer';\nimport { WidgetErrorBoundary } from '../components/widgets/WidgetErrorBoundary';\nimport {\n PROPOSABLE_WIDGET_TYPES,\n derivePreviewState,\n validateProposal,\n type CustomWidgetProposal,\n type ProposableWidgetType,\n type ProposalPreviewState,\n} from './proposalContract';\nimport {\n localProposalSource,\n type CustomWidgetProposalSource,\n type ProposalCandidateParser,\n type ProposalCandidateSink,\n} from './proposalSource';\nimport { Section, SectionStack, type SectionTone } from '../components/common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface CustomWidgetProposalPanelProps {\n /* Sinks the user may bind to (already RBAC-filtered by the API). /\n sinks: readonly ProposalCandidateSink[];\n /* Parsers the user may bind to. /\n parsers: readonly ProposalCandidateParser[];\n /\n Resolves the rows a binding would produce, for the preview. Should reject\n * (or throw) when the user cannot read the binding, so the panel can show the\n * access-failure state.\n /\n resolvePreviewData: (proposal: CustomWidgetProposal) => Promise<unknown>;\n /* Persists an approved proposal. Resolves once the widget exists. /\n onApprove: (proposal: CustomWidgetProposal) => Promise<void>;\n /* Closes the panel without persisting anything. /\n onClose: () => void;\n /* Swap for the GraphQL-backed source once BOFF-3021's backend half lands. /\n source?: CustomWidgetProposalSource;\n}\n\nconst FIELD_CLASSES = 'w-full';\n\n/\n The preview is the thing being judged, so its tone tracks the binding state.\n * The copy itself is translated per render (`previewCopy` below); only the tone\n * ladder is static.\n /\nconst PREVIEW_TONES: Record<ProposalPreviewState, SectionTone> = {\n loading: 'neutral',\n valid: 'neutral',\n 'no-data': 'warning',\n 'field-mismatch': 'warning',\n 'access-error': 'danger',\n};\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/* Builds a throwaway Widget so the preview can use the production renderer. /\nfunction toDraftWidget(proposal: CustomWidgetProposal, untitledLabel: string): Widget {\n const now = new Date(0).toISOString();\n return {\n id: `preview-${proposal.id}`,\n pageId: 'preview',\n type: proposal.widgetType,\n title: proposal.presentation.title \|\| untitledLabel,\n description: proposal.presentation.description,\n dataSinkId: proposal.binding.dataSinkId \|\| null,\n parserId: proposal.binding.parserId \|\| null,\n config: { ...proposal.presentation.config, ...proposal.fieldMapping },\n position: { x: 0, y: 0, width: 6, height: 4 },\n positionX: 0,\n positionY: 0,\n positionWidth: 6,\n positionHeight: 4,\n createdAt: now,\n updatedAt: now,\n } as Widget;\n}\n\n/* Field names present in the resolved preview payload, for mismatch checks. /\nfunction extractFields(data: unknown): string[] \| undefined {\n if (Array.isArray(data)) {\n const first = data.find((row) => row && typeof row === 'object');\n return first ? Object.keys(first as Record<string, unknown>) : [];\n }\n if (data && typeof data === 'object') return Object.keys(data as Record<string, unknown>);\n return undefined;\n}\n\nfunction countRows(data: unknown): number {\n if (Array.isArray(data)) return data.length;\n if (data && typeof data === 'object') {\n const cells = (data as { cells?: unknown }).cells;\n if (Array.isArray(cells)) return cells.length;\n return Object.keys(data as Record<string, unknown>).length;\n }\n return 0;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const CustomWidgetProposalPanel: FC<CustomWidgetProposalPanelProps> = memo(function CustomWidgetProposalPanel({\n sinks,\n parsers,\n resolvePreviewData,\n onApprove,\n onClose,\n source = localProposalSource,\n}) {\n const { t } = useI18n();\n\n const previewCopy = useMemo<Record<ProposalPreviewState, { title: string; body: string }>>(\n () => ({\n loading: {\n title: t('bigconsole.widget.customWidget.preview.loading.title', 'Building preview…'),\n body: t(\n 'bigconsole.widget.customWidget.preview.loading.body',\n 'Running the parser against the selected DataSink.'\n ),\n },\n valid: {\n title: t('bigconsole.widget.customWidget.preview.valid.title', 'Preview'),\n body: '',\n },\n 'no-data': {\n title: t('bigconsole.widget.customWidget.preview.noData.title', 'No data returned'),\n body: t(\n 'bigconsole.widget.customWidget.preview.noData.body',\n 'The binding is valid but the parser returned no rows. The widget will render empty until the sink has data.'\n ),\n },\n 'field-mismatch': {\n title: t('bigconsole.widget.customWidget.preview.fieldMismatch.title', 'Field mismatch'),\n body: t(\n 'bigconsole.widget.customWidget.preview.fieldMismatch.body',\n 'Some mapped fields are not present in the parser output. Fix the mapping below before approving.'\n ),\n },\n 'access-error': {\n title: t('bigconsole.widget.customWidget.preview.accessError.title', 'Cannot read this data'),\n body: t(\n 'bigconsole.widget.customWidget.preview.accessError.body',\n 'You do not have access to the proposed DataSink or parser in this workspace.'\n ),\n },\n }),\n [t]\n );\n\n const [prompt, setPrompt] = useState('');\n const [proposal, setProposal] = useState<CustomWidgetProposal \| null>(null);\n const [isProposing, setIsProposing] = useState(false);\n const [isApproving, setIsApproving] = useState(false);\n const [approveError, setApproveError] = useState<string \| null>(null);\n\n const [previewData, setPreviewData] = useState<unknown>(undefined);\n const [previewLoading, setPreviewLoading] = useState(false);\n const [previewAccessError, setPreviewAccessError] = useState(false);\n\n const permittedDataSinkIds = useMemo(() => sinks.map((sink) => sink.id), [sinks]);\n const permittedParserIds = useMemo(() => parsers.map((parser) => parser.id), [parsers]);\n const availableFields = useMemo(() => extractFields(previewData), [previewData]);\n\n const validation = useMemo(\n () =>\n proposal\n ? validateProposal(proposal, { permittedDataSinkIds, permittedParserIds, availableFields })\n : { issues: [], canApprove: false },\n [proposal, permittedDataSinkIds, permittedParserIds, availableFields]\n );\n\n const previewState = useMemo(\n () =>\n derivePreviewState(validation, {\n loading: previewLoading,\n accessError: previewAccessError,\n rowCount: countRows(previewData),\n }),\n [validation, previewLoading, previewAccessError, previewData]\n );\n\n // Re-resolve the preview whenever the binding changes.\n const bindingKey = proposal\n ? `${proposal.binding.dataSinkId}\|${proposal.binding.parserId ?? ''}\|${proposal.binding.dataPath ?? ''}`\n : '';\n\n useEffect(() => {\n if (!proposal \|\| !proposal.binding.dataSinkId) {\n setPreviewData(undefined);\n return;\n }\n let cancelled = false;\n setPreviewLoading(true);\n setPreviewAccessError(false);\n\n resolvePreviewData(proposal)\n .then((data) => {\n if (cancelled) return;\n setPreviewData(data);\n })\n .catch(() => {\n if (cancelled) return;\n setPreviewData(undefined);\n setPreviewAccessError(true);\n })\n .finally(() => {\n if (!cancelled) setPreviewLoading(false);\n });\n\n return () => {\n cancelled = true;\n };\n // `bindingKey` captures every input that changes the resolved data.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [bindingKey, resolvePreviewData]);\n\n const handlePropose = useCallback(async () => {\n if (!prompt.trim()) return;\n setIsProposing(true);\n setApproveError(null);\n try {\n const next = await source.propose({ prompt: prompt.trim(), sinks, parsers });\n setProposal(next);\n } finally {\n setIsProposing(false);\n }\n }, [prompt, source, sinks, parsers]);\n\n const patchProposal = useCallback((patch: (current: CustomWidgetProposal) => CustomWidgetProposal) => {\n setProposal((current) => (current ? patch(current) : current));\n }, []);\n\n const handleReject = useCallback(() => {\n setProposal(null);\n setPreviewData(undefined);\n setPreviewAccessError(false);\n setApproveError(null);\n }, []);\n\n const handleApprove = useCallback(async () => {\n if (!proposal \|\| !validation.canApprove) return;\n setIsApproving(true);\n setApproveError(null);\n try {\n await onApprove(proposal);\n onClose();\n } catch (error) {\n setApproveError(\n error instanceof Error\n ? error.message\n : t('bigconsole.widget.customWidget.error.couldNotSaveWidget', 'Could not save the widget.')\n );\n } finally {\n setIsApproving(false);\n }\n }, [proposal, validation.canApprove, onApprove, onClose, t]);\n\n const errors = validation.issues.filter((issue) => issue.severity === 'error');\n const warnings = validation.issues.filter((issue) => issue.severity === 'warning');\n\n return (\n <section\n data-testid=\"custom-widget-proposal-panel\"\n aria-label={t('bigconsole.widget.customWidget.panel.ariaLabel', 'AI custom widget builder')}\n className=\"flex h-full w-full min-w-0 flex-col overflow-y-auto p-4\"\n >\n {/\n Five stages — prompt → preview → validation → editable proposal →\n approval — used to be five bare divs separated by one uniform gap. Each\n is now a labelled section, and the preview (the thing the reviewer is\n actually judging) is the panel's single `primary` block (BOFF-5636).\n /}\n <SectionStack>\n {/ ---------- Prompt ---------- /}\n <Section\n title={t('bigconsole.widget.customWidget.prompt.label', 'Describe the widget you need')}\n description=\"Plain English. The assistant proposes a typed widget you can edit before anything is saved.\"\n icon={<Sparkles className=\"size-4\" aria-hidden=\"true\" />}\n actions={\n <div className=\"flex flex-wrap gap-2\">\n <Button\n data-testid=\"custom-widget-generate\"\n onClick={handlePropose}\n disabled={!prompt.trim() \|\| isProposing}\n >\n {isProposing ? <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" /> : null}\n {proposal\n ? t('bigconsole.widget.customWidget.action.regenerate', 'Regenerate')\n : t('bigconsole.widget.customWidget.action.generateProposal', 'Generate proposal')}\n </Button>\n {proposal ? (\n <Button variant=\"outline\" data-testid=\"custom-widget-reject\" onClick={handleReject}>\n <X className=\"mr-1 size-4\" aria-hidden=\"true\" />\n {t('bigconsole.widget.customWidget.action.reject', 'Reject')}\n </Button>\n ) : null}\n </div>\n }\n >\n <div className=\"flex flex-col gap-2\">\n <Label htmlFor=\"custom-widget-prompt\">What should it show?</Label>\n <Textarea\n id=\"custom-widget-prompt\"\n data-testid=\"custom-widget-prompt\"\n value={prompt}\n onChange={(event) => setPrompt(event.target.value)}\n placeholder={t(\n 'bigconsole.widget.customWidget.prompt.placeholder',\n 'e.g. a funnel of signup conversion stages'\n )}\n rows={3}\n />\n </div>\n </Section>\n\n {!proposal ? (\n <Section emphasis=\"muted\" padding=\"compact\" title=\"No proposal yet\" headingLevel={3}>\n <p className=\"text-sm text-text-secondary\" data-testid=\"custom-widget-empty\">\n {t(\n 'bigconsole.widget.customWidget.empty',\n 'No proposal yet. Describe a widget and the assistant will propose one for you to review — nothing is added to the dashboard until you approve it.'\n )}\n </p>\n </Section>\n ) : (\n <>\n {/ ---------- Preview ---------- /}\n <Section\n emphasis=\"primary\"\n tone={PREVIEW_TONES[previewState]}\n title={previewCopy[previewState].title}\n description=\"Rendered by the real widget renderer against the real parser output — what you approve is what you get.\"\n meta={\n <span\n data-testid=\"custom-widget-preview-state\"\n data-state={previewState}\n className=\"rounded-pill bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary\"\n >\n {previewState}\n </span>\n }\n >\n <div\n data-testid=\"custom-widget-preview\"\n className=\"min-h-[220px] min-w-0 rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-2\"\n >\n {previewState === 'loading' ? (\n <div className=\"flex h-[200px] items-center justify-center text-text-secondary\">\n <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" />\n <span className=\"text-sm\">{previewCopy.loading.body}</span>\n </div>\n ) : previewState === 'valid' ? (\n <div className=\"h-[200px]\">\n <WidgetErrorBoundary widgetId={`preview-${proposal.id}`}>\n <BigConsoleRenderer\n widget={toDraftWidget(\n proposal,\n t('bigconsole.widget.customWidget.untitledWidget', 'Untitled widget')\n )}\n data={previewData as Record<string, unknown>}\n />\n </WidgetErrorBoundary>\n </div>\n ) : (\n <div className=\"flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center\">\n <AlertTriangle className=\"size-5 text-[var(--color-status-warning-text)]\" aria-hidden=\"true\" />\n <p className=\"text-sm text-text-secondary\">{previewCopy[previewState].body}</p>\n {previewState === 'access-error' ? (\n <Button size=\"sm\" variant=\"outline\" onClick={() => patchProposal((current) => ({ ...current }))}>\n <RefreshCw className=\"mr-1 size-3.5\" aria-hidden=\"true\" />\n {t('bigconsole.widget.customWidget.action.retry', 'Retry')}\n </Button>\n ) : null}\n </div>\n )}\n </div>\n\n {proposal.rationale ? (\n <p className=\"mt-2 text-xs text-text-secondary\" data-testid=\"custom-widget-rationale\">\n {proposal.rationale}\n </p>\n ) : null}\n </Section>\n\n {/ ---------- Validation ---------- /}\n {errors.length > 0 \|\| warnings.length > 0 ? (\n <Section\n tone={errors.length > 0 ? 'danger' : 'warning'}\n padding=\"compact\"\n headingLevel={3}\n title={\n errors.length > 0\n ? `${errors.length} ${errors.length === 1 ? 'problem' : 'problems'} to fix before approving`\n : `${warnings.length} ${warnings.length === 1 ? 'warning' : 'warnings'}`\n }\n >\n <ul data-testid=\"custom-widget-issues\" className=\"flex min-w-0 flex-col gap-1\">\n {[...errors, ...warnings].map((issue) => (\n <li\n key={`${issue.code}-${issue.path ?? ''}`}\n data-severity={issue.severity}\n className={`break-words text-xs ${\n issue.severity === 'error'\n ? 'text-[var(--color-status-error-text)]'\n : 'text-[var(--color-status-warning-text)]'\n }`}\n >\n {issue.message}\n </li>\n ))}\n </ul>\n </Section>\n ) : null}\n\n {/ ---------- Editable proposal ---------- /}\n <Section\n title={t('bigconsole.widget.customWidget.proposal.heading', 'Proposal')}\n description=\"Every field is editable — the assistant proposes, you dispose.\"\n data-testid=\"custom-widget-proposal-fields\"\n >\n <div className=\"flex flex-col gap-3\">\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-title\">\n {t('bigconsole.widget.customWidget.field.title', 'Title')}\n </Label>\n <Input\n id=\"custom-widget-title\"\n data-testid=\"custom-widget-title\"\n className={FIELD_CLASSES}\n value={proposal.presentation.title}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n presentation: { ...current.presentation, title: event.target.value },\n }))\n }\n />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-type\">\n {t('bigconsole.widget.customWidget.field.widgetType', 'Widget type')}\n </Label>\n <select\n id=\"custom-widget-type\"\n data-testid=\"custom-widget-type\"\n value={proposal.widgetType}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n widgetType: event.target.value as ProposableWidgetType,\n }))\n }\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n {PROPOSABLE_WIDGET_TYPES.map((type) => (\n <option key={type} value={type}>\n {type}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-sink\">\n {t('bigconsole.widget.customWidget.field.dataSink', 'DataSink')}\n </Label>\n <select\n id=\"custom-widget-sink\"\n data-testid=\"custom-widget-sink\"\n value={proposal.binding.dataSinkId}\n onChange={(event) => {\n const sink = sinks.find((candidate) => candidate.id === event.target.value);\n patchProposal((current) => ({\n ...current,\n binding: { ...current.binding, dataSinkId: event.target.value, dataSinkKey: sink?.key },\n }));\n }}\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">\n {t('bigconsole.widget.customWidget.field.selectDataSink', 'Select a DataSink…')}\n </option>\n {sinks.map((sink) => (\n <option key={sink.id} value={sink.id}>\n {sink.name \|\| sink.key}\n </option>\n ))}\n </select>\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <Label htmlFor=\"custom-widget-parser\">\n {t('bigconsole.widget.customWidget.field.parser', 'Parser')}\n </Label>\n <select\n id=\"custom-widget-parser\"\n data-testid=\"custom-widget-parser\"\n value={proposal.binding.parserId ?? ''}\n onChange={(event) => {\n const parser = parsers.find((candidate) => candidate.id === event.target.value);\n patchProposal((current) => ({\n ...current,\n binding: {\n ...current.binding,\n parserId: event.target.value \|\| undefined,\n parserName: parser?.name,\n },\n }));\n }}\n className=\"w-full rounded-md border border-[var(--color-border-default)] bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n >\n <option value=\"\">{t('bigconsole.widget.customWidget.field.noParser', 'No parser')}</option>\n {parsers.map((parser) => (\n <option key={parser.id} value={parser.id}>\n {parser.name}\n </option>\n ))}\n </select>\n </div>\n\n {/ Field mapping /}\n {Object.keys(proposal.fieldMapping).length > 0 ? (\n <fieldset className=\"flex flex-col gap-2\" data-testid=\"custom-widget-field-mapping\">\n <legend className=\"text-sm font-medium text-text-primary\">\n {t('bigconsole.widget.customWidget.fieldMapping.legend', 'Field mapping')}\n </legend>\n {Object.entries(proposal.fieldMapping).map(([role, field]) => (\n <div key={role} className=\"flex flex-col gap-1\">\n <Label htmlFor={`custom-widget-field-${role}`}>{role}</Label>\n <Input\n id={`custom-widget-field-${role}`}\n data-testid={`custom-widget-field-${role}`}\n value={field}\n onChange={(event) =>\n patchProposal((current) => ({\n ...current,\n fieldMapping: { ...current.fieldMapping, [role]: event.target.value },\n }))\n }\n />\n </div>\n ))}\n {availableFields?.length ? (\n <p className=\"break-words text-xs text-text-secondary\">\n {t('bigconsole.widget.customWidget.fieldMapping.available', 'Available: {{fields}}', {\n fields: availableFields.join(', '),\n })}\n </p>\n ) : null}\n </fieldset>\n ) : null}\n </div>\n </Section>\n\n {/ ---------- Approval ---------- */}\n {approveError ? (\n <Section tone=\"danger\" padding=\"compact\" headingLevel={3} title=\"Could not add the widget\">\n <p\n role=\"alert\"\n className=\"break-words text-xs text-[var(--color-status-error-text)]\"\n data-testid=\"custom-widget-approve-error\"\n >\n {approveError}\n </p>\n </Section>\n ) : null}\n\n <div className=\"flex flex-wrap gap-2 border-t border-[var(--color-border-subtle)] pt-3\">\n <Button\n data-testid=\"custom-widget-approve\"\n onClick={handleApprove}\n disabled={!validation.canApprove \|\| isApproving}\n >\n {isApproving ? (\n <Loader2 className=\"mr-2 size-4 animate-spin\" aria-hidden=\"true\" />\n ) : (\n <Check className=\"mr-1 size-4\" aria-hidden=\"true\" />\n )}\n {t('bigconsole.widget.customWidget.action.approveAndAdd', 'Approve & add to dashboard')}\n </Button>\n <Button variant=\"outline\" onClick={onClose} data-testid=\"custom-widget-cancel\">\n {t('bigconsole.widget.customWidget.action.cancel', 'Cancel')}\n </Button>\n </div>\n </>\n )}\n </SectionStack>\n </section>\n );\n});\n\nexport default CustomWidgetProposalPanel;\n"],"mappings":"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"}

package/dist/bigconsole/hooks/useDashboardLayoutBaseline.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { LayoutItem } from '../utils/layoutBaseline';
+export interface DashboardLayoutBaseline {
+    /** The board's positions differ from the last loaded or saved ones, because a person placed something. */
+    dirty: boolean;
+    /**
+     * Re-take the baseline after the positions reached the server. `sent` is exactly
+     * what was sent; `editRevisionAtSave` is `layoutEditRevision` read BEFORE the
+     * request began, so a placement made while it was in flight stays dirty.
+     * Call it on success only: a failed save must leave the layout dirty.
+     */
+    markSaved: (sent: ReadonlyArray<LayoutItem>, editRevisionAtSave: number) => void;
+}
+export declare function useDashboardLayoutBaseline(dashboardId: string | undefined): DashboardLayoutBaseline;
+//# sourceMappingURL=useDashboardLayoutBaseline.d.ts.map

package/dist/bigconsole/hooks/useDashboardLayoutBaseline.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDashboardLayoutBaseline.d.ts","sourceRoot":"","sources":["../../../src/bigconsole/hooks/useDashboardLayoutBaseline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,OAAO,EAML,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,uBAAuB;IACtC,0GAA0G;IAC1G,KAAK,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CAClF;AAED,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,uBAAuB,CA0BnG"}

package/dist/bigconsole/hooks/useDashboardLayoutBaseline.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { useWidgetStore as e } from "../store/widgetStore.js";
+import "../store/index.js";
+import { INITIAL_LAYOUT_BASELINE as t, isLayoutBaselineDirty as n, layoutFromWidgets as r, normaliseLayout as i, reduceLayoutBaseline as a } from "../utils/layoutBaseline.js";
+import { useCallback as o, useEffect as s, useMemo as c, useReducer as l, useState as u } from "react";
+//#region src/bigconsole/hooks/useDashboardLayoutBaseline.ts
+function d(d) {
+	let f = e((e) => e.widgets), p = e((e) => e.layoutEditRevision), [m, h] = l(a, t), g = c(() => r(f.values()), [f]), [_, v] = u(d);
+	_ !== d && (v(d), h({ type: "reset" })), s(() => {
+		h({
+			type: "observe",
+			layout: g,
+			editRevision: p
+		});
+	}, [
+		d,
+		g,
+		p
+	]);
+	let y = o((e, t) => {
+		h({
+			type: "saved",
+			layout: i(e),
+			editRevision: t
+		});
+	}, []);
+	return {
+		dirty: n(m, g),
+		markSaved: y
+	};
+}
+//#endregion
+export { d as useDashboardLayoutBaseline };
+//# sourceMappingURL=useDashboardLayoutBaseline.js.map

package/dist/bigconsole/hooks/useDashboardLayoutBaseline.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useDashboardLayoutBaseline.js","names":[],"sources":["../../../src/bigconsole/hooks/useDashboardLayoutBaseline.ts"],"sourcesContent":["/**\n * useDashboardLayoutBaseline (BOFF-8060, N3/N4: the dashboard leave guard)\n *\n * The React shell around `utils/layoutBaseline.ts`: \"does the dashboard builder\n * hold moved or resized widgets that are not saved yet?\". The rules, and why a\n * layout event alone is not a dirty signal, are documented there; this file only\n * feeds the reducer from the widget store and exposes the answer.\n *\n * ★ It reads the store, never the grid. The canvas does not hand react-grid-layout\n * an `onLayoutChange` (`DashboardGrid` wires `onDragStop` / `onResizeStop` only,\n * with `compactType={null}`), so mount and compaction events never reach the store\n * at all; what does reach it is load, create, delete, save write-back (all\n * absorbed while the baseline floats) and the person's placements (which freeze\n * it, through `layoutEditRevision`).\n */\n\nimport { useCallback, useEffect, useMemo, useReducer, useState } from 'react';\nimport { useWidgetStore } from '../store';\nimport {\n INITIAL_LAYOUT_BASELINE,\n isLayoutBaselineDirty,\n layoutFromWidgets,\n normaliseLayout,\n reduceLayoutBaseline,\n type LayoutItem,\n} from '../utils/layoutBaseline';\n\nexport interface DashboardLayoutBaseline {\n /** The board's positions differ from the last loaded or saved ones, because a person placed something. */\n dirty: boolean;\n /**\n * Re-take the baseline after the positions reached the server. `sent` is exactly\n * what was sent; `editRevisionAtSave` is `layoutEditRevision` read BEFORE the\n * request began, so a placement made while it was in flight stays dirty.\n * Call it on success only: a failed save must leave the layout dirty.\n */\n markSaved: (sent: ReadonlyArray<LayoutItem>, editRevisionAtSave: number) => void;\n}\n\nexport function useDashboardLayoutBaseline(dashboardId: string | undefined): DashboardLayoutBaseline {\n const widgets = useWidgetStore((state) => state.widgets);\n const editRevision = useWidgetStore((state) => state.layoutEditRevision);\n const [baseline, dispatch] = useReducer(reduceLayoutBaseline, INITIAL_LAYOUT_BASELINE);\n\n const layout = useMemo(() => layoutFromWidgets(widgets.values()), [widgets]);\n\n // A different dashboard on the same mounted page (the route param changed):\n // forget the old baseline in the SAME render, so the old dashboard's frozen\n // baseline is never compared against the new one's widgets. This is React's\n // \"adjust state when a prop changes\" pattern; the effect below then re-seeds it.\n const [trackedDashboardId, setTrackedDashboardId] = useState(dashboardId);\n if (trackedDashboardId !== dashboardId) {\n setTrackedDashboardId(dashboardId);\n dispatch({ type: 'reset' });\n }\n\n useEffect(() => {\n dispatch({ type: 'observe', layout, editRevision });\n }, [dashboardId, layout, editRevision]);\n\n const markSaved = useCallback((sent: ReadonlyArray<LayoutItem>, editRevisionAtSave: number) => {\n dispatch({ type: 'saved', layout: normaliseLayout(sent), editRevision: editRevisionAtSave });\n }, []);\n\n return { dirty: isLayoutBaselineDirty(baseline, layout), markSaved };\n}\n"],"mappings":";;;;;AAuCA,SAAgB,EAA2B,GAA0D;CACnG,IAAM,IAAU,GAAgB,MAAU,EAAM,QAAQ,EAClD,IAAe,GAAgB,MAAU,EAAM,mBAAmB,EAClE,CAAC,GAAU,KAAY,EAAW,GAAsB,EAAwB,EAEhF,IAAS,QAAc,EAAkB,EAAQ,QAAQ,CAAC,EAAE,CAAC,EAAQ,CAAC,EAMtE,CAAC,GAAoB,KAAyB,EAAS,EAAY;AAMzE,CALI,MAAuB,MACzB,EAAsB,EAAY,EAClC,EAAS,EAAE,MAAM,SAAS,CAAC,GAG7B,QAAgB;AACd,IAAS;GAAE,MAAM;GAAW;GAAQ;GAAc,CAAC;IAClD;EAAC;EAAa;EAAQ;EAAa,CAAC;CAEvC,IAAM,IAAY,GAAa,GAAiC,MAA+B;AAC7F,IAAS;GAAE,MAAM;GAAS,QAAQ,EAAgB,EAAK;GAAE,cAAc;GAAoB,CAAC;IAC3F,EAAE,CAAC;AAEN,QAAO;EAAE,OAAO,EAAsB,GAAU,EAAO;EAAE;EAAW"}