@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/customWidget/CustomWidgetProposalPanel.js

@@ -1,41 +1,29 @@
-import e from "../components/widgets/WidgetErrorBoundary.js";
-import t from "../renderers/adapters/BigConsoleRenderer.js";
-import { PROPOSABLE_WIDGET_TYPES as n, derivePreviewState as ee, validateProposal as r } from "./proposalContract.js";
-import { localProposalSource as i } from "./proposalSource.js";
-import { memo as a, useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { AlertTriangle as u, Check as d, Loader2 as f, RefreshCw as p, Sparkles as m, X as h } from "lucide-react";
-import { Button as g, Input as _, Label as v, Textarea as te } from "@burdenoff/fe-libs/ui";
-import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Section as e, SectionStack as t } from "../components/common/Section.js";
+import "../components/common/index.js";
+import n from "../components/widgets/WidgetErrorBoundary.js";
+import ee from "../renderers/adapters/BigConsoleRenderer.js";
+import { PROPOSABLE_WIDGET_TYPES as te, derivePreviewState as r, validateProposal as i } from "./proposalContract.js";
+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 { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as f, Input as p, Label as m, Textarea as ce } from "@burdenoff/fe-libs/ui";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/customWidget/CustomWidgetProposalPanel.tsx
-var x = "w-full", S = {
-	loading: {
-		title: "Building preview…",
-		body: "Running the parser against the selected DataSink."
-	},
-	valid: {
-		title: "Preview",
-		body: ""
-	},
-	"no-data": {
-		title: "No data returned",
-		body: "The binding is valid but the parser returned no rows. The widget will render empty until the sink has data."
-	},
-	"field-mismatch": {
-		title: "Field mismatch",
-		body: "Some mapped fields are not present in the parser output. Fix the mapping below before approving."
-	},
-	"access-error": {
-		title: "Cannot read this data",
-		body: "You do not have access to the proposed DataSink or parser in this workspace."
-	}
+var v = "w-full", y = {
+	loading: "neutral",
+	valid: "neutral",
+	"no-data": "warning",
+	"field-mismatch": "warning",
+	"access-error": "danger"
 };
-function C(e) {
-	let t = (/* @__PURE__ */ new Date(0)).toISOString();
+function b(e, t) {
+	let n = (/* @__PURE__ */ new Date(0)).toISOString();
 	return {
 		id: `preview-${e.id}`,
 		pageId: "preview",
 		type: e.widgetType,
-		title: e.presentation.title || "Untitled widget",
+		title: e.presentation.title || t,
 		description: e.presentation.description,
 		dataSinkId: e.binding.dataSinkId || null,
 		parserId: e.binding.parserId || null,
@@ -53,18 +41,18 @@ function C(e) {
 		positionY: 0,
 		positionWidth: 6,
 		positionHeight: 4,
-		createdAt: t,
-		updatedAt: t
+		createdAt: n,
+		updatedAt: n
 	};
 }
-function w(e) {
+function x(e) {
 	if (Array.isArray(e)) {
 		let t = e.find((e) => e && typeof e == "object");
 		return t ? Object.keys(t) : [];
 	}
 	if (e && typeof e == "object") return Object.keys(e);
 }
-function T(e) {
+function S(e) {
 	if (Array.isArray(e)) return e.length;
 	if (e && typeof e == "object") {
 		let t = e.cells;
@@ -72,378 +60,414 @@ function T(e) {
 	}
 	return 0;
 }
-var E = a(function({ sinks: a, parsers: E, resolvePreviewData: D, onApprove: O, onClose: k, source: A = i }) {
-	let [j, re] = l(""), [M, N] = l(null), [P, F] = l(!1), [I, L] = l(!1), [R, z] = l(null), [B, V] = l(void 0), [H, U] = l(!1), [W, G] = l(!1), K = c(() => a.map((e) => e.id), [a]), q = c(() => E.map((e) => e.id), [E]), J = c(() => w(B), [B]), Y = c(() => M ? r(M, {
-		permittedDataSinkIds: K,
-		permittedParserIds: q,
-		availableFields: J
+var C = a(function({ sinks: a, parsers: C, resolvePreviewData: w, onApprove: T, onClose: E, source: D = ne }) {
+	let { t: O } = se(), 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.")
+		},
+		valid: {
+			title: O("bigconsole.widget.customWidget.preview.valid.title", "Preview"),
+			body: ""
+		},
+		"no-data": {
+			title: O("bigconsole.widget.customWidget.preview.noData.title", "No data returned"),
+			body: O("bigconsole.widget.customWidget.preview.noData.body", "The binding is valid but the parser returned no rows. The widget will render empty until the sink has data.")
+		},
+		"field-mismatch": {
+			title: O("bigconsole.widget.customWidget.preview.fieldMismatch.title", "Field mismatch"),
+			body: O("bigconsole.widget.customWidget.preview.fieldMismatch.body", "Some mapped fields are not present in the parser output. Fix the mapping below before approving.")
+		},
+		"access-error": {
+			title: O("bigconsole.widget.customWidget.preview.accessError.title", "Cannot read this data"),
+			body: O("bigconsole.widget.customWidget.preview.accessError.body", "You do not have access to the proposed DataSink or parser in this workspace.")
+		}
+	}), [O]), [A, le] = c(""), [j, M] = c(null), [N, P] = c(!1), [F, I] = c(!1), [L, R] = c(null), [z, B] = c(void 0), [V, H] = c(!1), [U, W] = c(!1), G = s(() => a.map((e) => e.id), [a]), K = s(() => C.map((e) => e.id), [C]), q = s(() => x(z), [z]), J = s(() => j ? i(j, {
+		permittedDataSinkIds: G,
+		permittedParserIds: K,
+		availableFields: q
 	}) : {
 		issues: [],
 		canApprove: !1
 	}, [
-		M,
+		j,
+		G,
 		K,
-		q,
-		J
-	]), X = c(() => ee(Y, {
-		loading: H,
-		accessError: W,
-		rowCount: T(B)
+		q
+	]), Y = s(() => r(J, {
+		loading: V,
+		accessError: U,
+		rowCount: S(z)
 	}), [
-		Y,
-		H,
-		W,
-		B
+		J,
+		V,
+		U,
+		z
 	]);
-	s(() => {
-		if (!M || !M.binding.dataSinkId) {
-			V(void 0);
+	re(() => {
+		if (!j || !j.binding.dataSinkId) {
+			B(void 0);
 			return;
 		}
 		let e = !1;
-		return U(!0), G(!1), D(M).then((t) => {
-			e || V(t);
+		return H(!0), W(!1), w(j).then((t) => {
+			e || B(t);
 		}).catch(() => {
-			e || (V(void 0), G(!0));
+			e || (B(void 0), W(!0));
 		}).finally(() => {
-			e || U(!1);
+			e || H(!1);
 		}), () => {
 			e = !0;
 		};
-	}, [M ? `${M.binding.dataSinkId}|${M.binding.parserId ?? ""}|${M.binding.dataPath ?? ""}` : "", D]);
-	let ie = o(async () => {
-		if (j.trim()) {
-			F(!0), z(null);
+	}, [j ? `${j.binding.dataSinkId}|${j.binding.parserId ?? ""}|${j.binding.dataPath ?? ""}` : "", w]);
+	let ue = o(async () => {
+		if (A.trim()) {
+			P(!0), R(null);
 			try {
-				N(await A.propose({
-					prompt: j.trim(),
+				M(await D.propose({
+					prompt: A.trim(),
 					sinks: a,
-					parsers: E
+					parsers: C
 				}));
 			} finally {
-				F(!1);
+				P(!1);
 			}
 		}
 	}, [
-		j,
 		A,
+		D,
 		a,
-		E
-	]), Z = o((e) => {
-		N((t) => t && e(t));
-	}, []), ae = o(() => {
-		N(null), V(void 0), G(!1), z(null);
-	}, []), oe = o(async () => {
-		if (!(!M || !Y.canApprove)) {
-			L(!0), z(null);
+		C
+	]), X = o((e) => {
+		M((t) => t && e(t));
+	}, []), de = o(() => {
+		M(null), B(void 0), W(!1), R(null);
+	}, []), Z = o(async () => {
+		if (!(!j || !J.canApprove)) {
+			I(!0), R(null);
 			try {
-				await O(M), k();
+				await T(j), E();
 			} catch (e) {
-				z(e instanceof Error ? e.message : "Could not save the widget.");
+				R(e instanceof Error ? e.message : O("bigconsole.widget.customWidget.error.couldNotSaveWidget", "Could not save the widget."));
 			} finally {
-				L(!1);
+				I(!1);
 			}
 		}
 	}, [
-		M,
-		Y.canApprove,
-		O,
-		k
-	]), Q = Y.issues.filter((e) => e.severity === "error"), $ = Y.issues.filter((e) => e.severity === "warning");
-	return /* @__PURE__ */ b("section", {
+		j,
+		J.canApprove,
+		T,
+		E,
+		O
+	]), Q = J.issues.filter((e) => e.severity === "error"), $ = J.issues.filter((e) => e.severity === "warning");
+	return /* @__PURE__ */ g("section", {
 		"data-testid": "custom-widget-proposal-panel",
-		"aria-label": "AI custom widget builder",
-		className: "flex h-full w-full flex-col gap-4 overflow-y-auto p-4",
-		children: [/* @__PURE__ */ b("div", {
-			className: "flex flex-col gap-2",
-			children: [
-				/* @__PURE__ */ b(v, {
-					htmlFor: "custom-widget-prompt",
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ y(m, {
-						className: "size-4",
+		"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__ */ _(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__ */ g(ae, {
+				className: "size-4",
+				"aria-hidden": "true"
+			}),
+			actions: /* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ _(f, {
+					"data-testid": "custom-widget-generate",
+					onClick: ue,
+					disabled: !A.trim() || N,
+					children: [N ? /* @__PURE__ */ g(d, {
+						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
-					}), "Describe the widget you need"]
-				}),
-				/* @__PURE__ */ y(te, {
+					}) : null, j ? O("bigconsole.widget.customWidget.action.regenerate", "Regenerate") : O("bigconsole.widget.customWidget.action.generateProposal", "Generate proposal")]
+				}), j ? /* @__PURE__ */ _(f, {
+					variant: "outline",
+					"data-testid": "custom-widget-reject",
+					onClick: de,
+					children: [/* @__PURE__ */ g(oe, {
+						className: "mr-1 size-4",
+						"aria-hidden": "true"
+					}), O("bigconsole.widget.customWidget.action.reject", "Reject")]
+				}) : null]
+			}),
+			children: /* @__PURE__ */ _("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ g(m, {
+					htmlFor: "custom-widget-prompt",
+					children: "What should it show?"
+				}), /* @__PURE__ */ g(ce, {
 					id: "custom-widget-prompt",
 					"data-testid": "custom-widget-prompt",
-					value: j,
-					onChange: (e) => re(e.target.value),
-					placeholder: "e.g. a funnel of signup conversion stages",
+					value: A,
+					onChange: (e) => le(e.target.value),
+					placeholder: O("bigconsole.widget.customWidget.prompt.placeholder", "e.g. a funnel of signup conversion stages"),
 					rows: 3
+				})]
+			})
+		}), 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__ */ 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
 				}),
-				/* @__PURE__ */ b("div", {
-					className: "flex flex-wrap gap-2",
-					children: [/* @__PURE__ */ b(g, {
-						"data-testid": "custom-widget-generate",
-						onClick: ie,
-						disabled: !j.trim() || P,
-						children: [P ? /* @__PURE__ */ y(f, {
+				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__ */ _("div", {
+						className: "flex h-[200px] items-center justify-center text-text-secondary",
+						children: [/* @__PURE__ */ g(d, {
 							className: "mr-2 size-4 animate-spin",
 							"aria-hidden": "true"
-						}) : null, M ? "Regenerate" : "Generate proposal"]
-					}), M ? /* @__PURE__ */ b(g, {
-						variant: "outline",
-						"data-testid": "custom-widget-reject",
-						onClick: ae,
-						children: [/* @__PURE__ */ y(h, {
-							className: "mr-1 size-4",
-							"aria-hidden": "true"
-						}), "Reject"]
-					}) : null]
-				})
-			]
-		}), M ? /* @__PURE__ */ b(ne, { children: [
-			/* @__PURE__ */ b("div", {
-				className: "flex flex-col gap-2",
-				children: [
-					/* @__PURE__ */ b("div", {
-						className: "flex items-center justify-between gap-2",
-						children: [/* @__PURE__ */ y("h3", {
-							className: "text-sm font-semibold text-text-primary",
-							children: S[X].title
-						}), /* @__PURE__ */ y("span", {
-							"data-testid": "custom-widget-preview-state",
-							"data-state": X,
-							className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
-							children: X
+						}), /* @__PURE__ */ g("span", {
+							className: "text-sm",
+							children: k.loading.body
 						})]
-					}),
-					/* @__PURE__ */ y("div", {
-						"data-testid": "custom-widget-preview",
-						className: "min-h-[220px] rounded-lg border border-border-default bg-bg-surface p-2",
-						children: X === "loading" ? /* @__PURE__ */ b("div", {
-							className: "flex h-[200px] items-center justify-center text-text-secondary",
-							children: [/* @__PURE__ */ y(f, {
-								className: "mr-2 size-4 animate-spin",
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ y("span", {
-								className: "text-sm",
-								children: S.loading.body
-							})]
-						}) : X === "valid" ? /* @__PURE__ */ y("div", {
-							className: "h-[200px]",
-							children: /* @__PURE__ */ y(e, {
-								widgetId: `preview-${M.id}`,
-								children: /* @__PURE__ */ y(t, {
-									widget: C(M),
-									data: B
-								})
+					}) : Y === "valid" ? /* @__PURE__ */ g("div", {
+						className: "h-[200px]",
+						children: /* @__PURE__ */ g(n, {
+							widgetId: `preview-${j.id}`,
+							children: /* @__PURE__ */ g(ee, {
+								widget: b(j, O("bigconsole.widget.customWidget.untitledWidget", "Untitled widget")),
+								data: z
 							})
-						}) : /* @__PURE__ */ b("div", {
-							className: "flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center",
-							children: [
-								/* @__PURE__ */ y(u, {
-									className: "size-5 text-status-warning-text",
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ y("p", {
-									className: "text-sm text-text-secondary",
-									children: S[X].body
-								}),
-								X === "access-error" ? /* @__PURE__ */ b(g, {
-									size: "sm",
-									variant: "outline",
-									onClick: () => Z((e) => ({ ...e })),
-									children: [/* @__PURE__ */ y(p, {
-										className: "mr-1 size-3.5",
-										"aria-hidden": "true"
-									}), "Retry"]
-								}) : null
-							]
 						})
-					}),
-					M.rationale ? /* @__PURE__ */ y("p", {
-						className: "text-xs text-text-secondary",
-						"data-testid": "custom-widget-rationale",
-						children: M.rationale
-					}) : null
-				]
+					}) : /* @__PURE__ */ _("div", {
+						className: "flex h-[200px] flex-col items-center justify-center gap-2 px-4 text-center",
+						children: [
+							/* @__PURE__ */ g(l, {
+								className: "size-5 text-[var(--color-status-warning-text)]",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ g("p", {
+								className: "text-sm text-text-secondary",
+								children: k[Y].body
+							}),
+							Y === "access-error" ? /* @__PURE__ */ _(f, {
+								size: "sm",
+								variant: "outline",
+								onClick: () => X((e) => ({ ...e })),
+								children: [/* @__PURE__ */ g(ie, {
+									className: "mr-1 size-3.5",
+									"aria-hidden": "true"
+								}), O("bigconsole.widget.customWidget.action.retry", "Retry")]
+							}) : null
+						]
+					})
+				}), 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__ */ y("ul", {
-				"data-testid": "custom-widget-issues",
-				className: "flex flex-col gap-1",
-				children: [...Q, ...$].map((e) => /* @__PURE__ */ y("li", {
-					"data-severity": e.severity,
-					className: `rounded-md px-2 py-1 text-xs ${e.severity === "error" ? "bg-status-error-bg/10 text-status-error-text" : "bg-status-warning-bg/10 text-status-warning-text"}`,
-					children: e.message
-				}, `${e.code}-${e.path ?? ""}`))
+			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__ */ g("ul", {
+					"data-testid": "custom-widget-issues",
+					className: "flex min-w-0 flex-col gap-1",
+					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__ */ b("div", {
-				className: "flex flex-col gap-3",
-				children: [
-					/* @__PURE__ */ y("h3", {
-						className: "text-sm font-semibold text-text-primary",
-						children: "Proposal"
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ y(v, {
-							htmlFor: "custom-widget-title",
-							children: "Title"
-						}), /* @__PURE__ */ y(_, {
-							id: "custom-widget-title",
-							"data-testid": "custom-widget-title",
-							className: x,
-							value: M.presentation.title,
-							onChange: (e) => Z((t) => ({
-								...t,
-								presentation: {
-									...t.presentation,
-									title: e.target.value
-								}
-							}))
-						})]
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ y(v, {
-							htmlFor: "custom-widget-type",
-							children: "Widget type"
-						}), /* @__PURE__ */ y("select", {
-							id: "custom-widget-type",
-							"data-testid": "custom-widget-type",
-							value: M.widgetType,
-							onChange: (e) => Z((t) => ({
-								...t,
-								widgetType: e.target.value
-							})),
-							className: "w-full rounded-md border border-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: n.map((e) => /* @__PURE__ */ y("option", {
-								value: e,
-								children: e
-							}, e))
-						})]
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ y(v, {
-							htmlFor: "custom-widget-sink",
-							children: "DataSink"
-						}), /* @__PURE__ */ b("select", {
-							id: "custom-widget-sink",
-							"data-testid": "custom-widget-sink",
-							value: M.binding.dataSinkId,
-							onChange: (e) => {
-								let t = a.find((t) => t.id === e.target.value);
-								Z((n) => ({
-									...n,
-									binding: {
-										...n.binding,
-										dataSinkId: e.target.value,
-										dataSinkKey: t?.key
-									}
-								}));
-							},
-							className: "w-full rounded-md border border-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__ */ y("option", {
-								value: "",
-								children: "Select a DataSink…"
-							}), a.map((e) => /* @__PURE__ */ y("option", {
-								value: e.id,
-								children: e.name || e.key
-							}, e.id))]
-						})]
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ y(v, {
-							htmlFor: "custom-widget-parser",
-							children: "Parser"
-						}), /* @__PURE__ */ b("select", {
-							id: "custom-widget-parser",
-							"data-testid": "custom-widget-parser",
-							value: M.binding.parserId ?? "",
-							onChange: (e) => {
-								let t = E.find((t) => t.id === e.target.value);
-								Z((n) => ({
-									...n,
-									binding: {
-										...n.binding,
-										parserId: e.target.value || void 0,
-										parserName: t?.name
+			/* @__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__ */ _("div", {
+					className: "flex flex-col gap-3",
+					children: [
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-title",
+								children: O("bigconsole.widget.customWidget.field.title", "Title")
+							}), /* @__PURE__ */ g(p, {
+								id: "custom-widget-title",
+								"data-testid": "custom-widget-title",
+								className: v,
+								value: j.presentation.title,
+								onChange: (e) => X((t) => ({
+									...t,
+									presentation: {
+										...t.presentation,
+										title: e.target.value
 									}
-								}));
-							},
-							className: "w-full rounded-md border border-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__ */ y("option", {
-								value: "",
-								children: "No parser"
-							}), E.map((e) => /* @__PURE__ */ y("option", {
-								value: e.id,
-								children: e.name
-							}, e.id))]
-						})]
-					}),
-					Object.keys(M.fieldMapping).length > 0 ? /* @__PURE__ */ b("fieldset", {
-						className: "flex flex-col gap-2",
-						"data-testid": "custom-widget-field-mapping",
-						children: [
-							/* @__PURE__ */ y("legend", {
-								className: "text-sm font-medium text-text-primary",
-								children: "Field mapping"
-							}),
-							Object.entries(M.fieldMapping).map(([e, t]) => /* @__PURE__ */ b("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ y(v, {
-									htmlFor: `custom-widget-field-${e}`,
+								}))
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-type",
+								children: O("bigconsole.widget.customWidget.field.widgetType", "Widget type")
+							}), /* @__PURE__ */ g("select", {
+								id: "custom-widget-type",
+								"data-testid": "custom-widget-type",
+								value: j.widgetType,
+								onChange: (e) => X((t) => ({
+									...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__ */ g("option", {
+									value: e,
 									children: e
-								}), /* @__PURE__ */ y(_, {
-									id: `custom-widget-field-${e}`,
-									"data-testid": `custom-widget-field-${e}`,
-									value: t,
-									onChange: (t) => Z((n) => ({
+								}, e))
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-sink",
+								children: O("bigconsole.widget.customWidget.field.dataSink", "DataSink")
+							}), /* @__PURE__ */ _("select", {
+								id: "custom-widget-sink",
+								"data-testid": "custom-widget-sink",
+								value: j.binding.dataSinkId,
+								onChange: (e) => {
+									let t = a.find((t) => t.id === e.target.value);
+									X((n) => ({
 										...n,
-										fieldMapping: {
-											...n.fieldMapping,
-											[e]: t.target.value
+										binding: {
+											...n.binding,
+											dataSinkId: e.target.value,
+											dataSinkKey: t?.key
 										}
-									}))
-								})]
-							}, e)),
-							J?.length ? /* @__PURE__ */ b("p", {
-								className: "text-xs text-text-secondary",
-								children: ["Available: ", J.join(", ")]
-							}) : null
-						]
-					}) : null
-				]
+									}));
+								},
+								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__ */ g("option", {
+									value: "",
+									children: O("bigconsole.widget.customWidget.field.selectDataSink", "Select a DataSink…")
+								}), a.map((e) => /* @__PURE__ */ g("option", {
+									value: e.id,
+									children: e.name || e.key
+								}, e.id))]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ g(m, {
+								htmlFor: "custom-widget-parser",
+								children: O("bigconsole.widget.customWidget.field.parser", "Parser")
+							}), /* @__PURE__ */ _("select", {
+								id: "custom-widget-parser",
+								"data-testid": "custom-widget-parser",
+								value: j.binding.parserId ?? "",
+								onChange: (e) => {
+									let t = C.find((t) => t.id === e.target.value);
+									X((n) => ({
+										...n,
+										binding: {
+											...n.binding,
+											parserId: e.target.value || void 0,
+											parserName: t?.name
+										}
+									}));
+								},
+								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__ */ g("option", {
+									value: "",
+									children: O("bigconsole.widget.customWidget.field.noParser", "No parser")
+								}), C.map((e) => /* @__PURE__ */ g("option", {
+									value: e.id,
+									children: e.name
+								}, e.id))]
+							})]
+						}),
+						Object.keys(j.fieldMapping).length > 0 ? /* @__PURE__ */ _("fieldset", {
+							className: "flex flex-col gap-2",
+							"data-testid": "custom-widget-field-mapping",
+							children: [
+								/* @__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__ */ _("div", {
+									className: "flex flex-col gap-1",
+									children: [/* @__PURE__ */ g(m, {
+										htmlFor: `custom-widget-field-${e}`,
+										children: e
+									}), /* @__PURE__ */ g(p, {
+										id: `custom-widget-field-${e}`,
+										"data-testid": `custom-widget-field-${e}`,
+										value: t,
+										onChange: (t) => X((n) => ({
+											...n,
+											fieldMapping: {
+												...n.fieldMapping,
+												[e]: t.target.value
+											}
+										}))
+									})]
+								}, e)),
+								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
+							]
+						}) : null
+					]
+				})
 			}),
-			R ? /* @__PURE__ */ y("p", {
-				role: "alert",
-				className: "text-xs text-status-error-text",
-				"data-testid": "custom-widget-approve-error",
-				children: R
+			L ? /* @__PURE__ */ g(e, {
+				tone: "danger",
+				padding: "compact",
+				headingLevel: 3,
+				title: "Could not add the widget",
+				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__ */ b("div", {
-				className: "flex flex-wrap gap-2 border-t border-border-default pt-3",
-				children: [/* @__PURE__ */ b(g, {
+			/* @__PURE__ */ _("div", {
+				className: "flex flex-wrap gap-2 border-t border-[var(--color-border-subtle)] pt-3",
+				children: [/* @__PURE__ */ _(f, {
 					"data-testid": "custom-widget-approve",
-					onClick: oe,
-					disabled: !Y.canApprove || I,
-					children: [I ? /* @__PURE__ */ y(f, {
+					onClick: Z,
+					disabled: !J.canApprove || F,
+					children: [F ? /* @__PURE__ */ g(d, {
 						className: "mr-2 size-4 animate-spin",
 						"aria-hidden": "true"
-					}) : /* @__PURE__ */ y(d, {
+					}) : /* @__PURE__ */ g(u, {
 						className: "mr-1 size-4",
 						"aria-hidden": "true"
-					}), "Approve & add to dashboard"]
-				}), /* @__PURE__ */ y(g, {
+					}), O("bigconsole.widget.customWidget.action.approveAndAdd", "Approve & add to dashboard")]
+				}), /* @__PURE__ */ g(f, {
 					variant: "outline",
-					onClick: k,
+					onClick: E,
 					"data-testid": "custom-widget-cancel",
-					children: "Cancel"
+					children: O("bigconsole.widget.customWidget.action.cancel", "Cancel")
 				})]
 			})
-		] }) : /* @__PURE__ */ y("p", {
-			className: "text-sm text-text-secondary",
-			"data-testid": "custom-widget-empty",
-			children: "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."
-		})]
+		] }) : /* @__PURE__ */ g(e, {
+			emphasis: "muted",
+			padding: "compact",
+			title: "No proposal yet",
+			headingLevel: 3,
+			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.")
+			})
+		})] })
 	});
 });
 //#endregion
-export { E as default };
+export { C as default };
 
 //# sourceMappingURL=CustomWidgetProposalPanel.js.map