@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/InsightsPage.js

@@ -1,17 +1,20 @@
 import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import { reportBigConsoleQuotaError as t } from "../utils/quota.js";
-import n from "../hooks/useBigConsoleAnalytics.js";
-import { isNative as r, nativeImpact as i, nativeNotify as a } from "../../utils/nativeBridge.js";
-import { memo as o, useCallback as s, useEffect as c, useState as l } from "react";
-import { AlertCircle as u, ArrowRight as d, Ban as ee, CheckCircle as f, Clock as p, Eye as te, Loader2 as m, RefreshCw as ne, Sparkles as h, Trash2 as re, Wand2 as g, X as ie, XCircle as _ } from "lucide-react";
-import { gql as v } from "@apollo/client";
-import { useMutation as y, useQuery as b } from "@apollo/client/react";
-import { useI18n as ae } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AuroraBackground as oe, EmphasisPanel as se, GlassCard as ce, GradientText as le, IllustratedEmptyState as ue } from "@burdenoff/fe-libs/ui";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as t } from "../components/common/sectionStyles.js";
+import { Section as n, SectionStack as r } from "../components/common/Section.js";
+import "../components/common/index.js";
+import { reportBigConsoleQuotaError as i } from "../utils/quota.js";
+import a from "../hooks/useBigConsoleAnalytics.js";
+import { isNative as o, nativeImpact as s, nativeNotify as c } from "../../utils/nativeBridge.js";
+import { memo as l, useCallback as u, useEffect as d, useState as f } from "react";
+import { AlertCircle as p, ArrowRight as m, Ban as ee, CheckCircle as h, Clock as g, Eye as te, History as ne, Lightbulb as re, Loader2 as _, RefreshCw as ie, Sparkles as v, Trash2 as ae, Wand2 as y, X as oe, XCircle as b } from "lucide-react";
+import { gql as x } from "@apollo/client";
+import { useMutation as S, useQuery as C } from "@apollo/client/react";
+import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AuroraBackground as ce, GlassCard as le, GradientText as ue, IllustratedEmptyState as de, PagePurpose as fe } from "@burdenoff/fe-libs/ui";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/bigconsole/pages/InsightsPage.tsx
-var de = v`
+var pe = x`
   query ListPromptGenerations($status: PromptGenerationStatus, $first: Int) {
     listPromptGenerations(status: $status, first: $first) {
       edges {
@@ -40,7 +43,7 @@ var de = v`
       totalCount
     }
   }
-`, fe = v`
+`, me = x`
   query GetPromptSuggestions($category: String, $limit: Int) {
     getPromptSuggestions(category: $category, limit: $limit) {
       id
@@ -51,7 +54,7 @@ var de = v`
       tags
     }
   }
-`, pe = v`
+`, he = x`
   mutation GenerateDashboardFromPrompt($input: GenerateDashboardFromPromptInput!) {
     generateDashboardFromPrompt(input: $input) {
       id
@@ -59,24 +62,24 @@ var de = v`
       prompt
     }
   }
-`, me = v`
+`, ge = x`
   mutation CreateDashboardFromGeneration($input: CreateDashboardFromGenerationInput!) {
     createDashboardFromGeneration(input: $input) {
       id
     }
   }
-`, he = v`
+`, _e = x`
   mutation DeletePromptGeneration($generationId: ID!) {
     deletePromptGeneration(generationId: $generationId)
   }
-`, ge = v`
+`, ve = x`
   mutation CancelPromptGeneration($generationId: ID!) {
     cancelPromptGeneration(generationId: $generationId) {
       id
       status
     }
   }
-`, _e = v`
+`, ye = x`
   mutation RegenerateDashboard($input: RegenerateDashboardInput!) {
     regenerateDashboard(input: $input) {
       id
@@ -84,7 +87,7 @@ var de = v`
       prompt
     }
   }
-`, ve = v`
+`, be = x`
   mutation RefineGeneratedDashboard($input: RefineGeneratedDashboardInput!) {
     refineGeneratedDashboard(input: $input) {
       id
@@ -92,38 +95,118 @@ var de = v`
       prompt
     }
   }
-`, C = [
+`, E = [
 	"PENDING",
 	"PROCESSING",
 	"GENERATING"
-];
-function w(e) {
+], D = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "var(--space-iconGap)",
+	minHeight: "var(--size-controlHeight-md)",
+	padding: "0 var(--space-formGap)",
+	borderRadius: "var(--radius-button)",
+	fontSize: "var(--font-size-body-sm)",
+	fontWeight: "var(--font-weight-medium)",
+	lineHeight: 1.2,
+	cursor: "pointer"
+}, O = {
+	...D,
+	border: "1px solid var(--color-border-default)",
+	backgroundColor: "transparent",
+	color: "var(--color-text-primary)"
+}, k = {
+	...D,
+	border: "1px solid transparent",
+	backgroundColor: "var(--color-action-primary-bg)",
+	color: "var(--color-action-primary-text)"
+}, xe = {
+	...D,
+	border: "1px solid var(--color-status-warning-border)",
+	backgroundColor: "transparent",
+	color: "var(--color-status-warning-text)"
+}, A = {
+	...D,
+	minWidth: "var(--size-controlHeight-md)",
+	padding: "0 var(--space-controlGap)",
+	border: "1px solid var(--color-border-default)",
+	backgroundColor: "transparent",
+	color: "var(--color-status-error-text)"
+}, j = {
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "var(--space-iconGap)",
+	padding: "2px var(--space-controlGap)",
+	borderRadius: "var(--radius-pill)",
+	fontSize: "var(--font-size-body-sm)",
+	fontWeight: "var(--font-weight-medium)",
+	border: "1px solid var(--color-border-subtle)",
+	backgroundColor: "var(--color-bg-sunken)",
+	color: "var(--color-text-secondary)"
+};
+function M(e) {
 	switch (e) {
-		case "COMPLETED": return /* @__PURE__ */ x(f, {
-			size: 16,
-			className: "text-green-500"
-		});
-		case "FAILED": return /* @__PURE__ */ x(_, {
-			size: 16,
-			className: "text-red-500"
+		case "COMPLETED": return "success";
+		case "FAILED": return "danger";
+		case "PENDING":
+		case "PROCESSING":
+		case "GENERATING": return "info";
+		default: return "neutral";
+	}
+}
+var N = {
+	success: {
+		text: "var(--color-status-success-text)",
+		bg: "var(--color-status-success-bgSubtle)",
+		border: "var(--color-status-success-border)"
+	},
+	danger: {
+		text: "var(--color-status-error-text)",
+		bg: "var(--color-status-error-bgSubtle)",
+		border: "var(--color-status-error-border)"
+	},
+	info: {
+		text: "var(--color-status-info-text)",
+		bg: "var(--color-status-info-bgSubtle)",
+		border: "var(--color-status-info-border)"
+	},
+	neutral: {
+		text: "var(--color-text-secondary)",
+		bg: "var(--color-bg-sunken)",
+		border: "var(--color-border-subtle)"
+	}
+};
+function P(e) {
+	let t = N[M(e)].text;
+	switch (e) {
+		case "COMPLETED": return /* @__PURE__ */ w(h, {
+			size: 14,
+			style: { color: t },
+			"aria-hidden": "true"
 		});
-		case "CANCELLED": return /* @__PURE__ */ x(_, {
-			size: 16,
-			className: "text-gray-400"
+		case "FAILED":
+		case "CANCELLED": return /* @__PURE__ */ w(b, {
+			size: 14,
+			style: { color: t },
+			"aria-hidden": "true"
 		});
 		case "PENDING":
 		case "PROCESSING":
-		case "GENERATING": return /* @__PURE__ */ x(m, {
-			size: 16,
-			className: "text-blue-500 animate-spin"
+		case "GENERATING": return /* @__PURE__ */ w(_, {
+			size: 14,
+			className: "animate-spin",
+			style: { color: t },
+			"aria-hidden": "true"
 		});
-		default: return /* @__PURE__ */ x(p, {
-			size: 16,
-			className: "text-gray-400"
+		default: return /* @__PURE__ */ w(g, {
+			size: 14,
+			style: { color: t },
+			"aria-hidden": "true"
 		});
 	}
 }
-function T(e, t) {
+function F(e, t) {
 	switch (e) {
 		case "COMPLETED": return t("bigconsole.insights.status.completed", "Completed");
 		case "FAILED": return t("bigconsole.insights.status.failed", "Failed");
@@ -134,704 +217,667 @@ function T(e, t) {
 		default: return e;
 	}
 }
-var E = o(function() {
-	let { t: o } = ae(), f = e(), p = n(), [_, v] = l(""), [E, D] = l(!1), [O, k] = l(null), [A, j] = l(() => /* @__PURE__ */ new Set()), [M, N] = l(null), [P, F] = l(null), [I, L] = l(""), R = s((e) => {
-		j((t) => new Set(t).add(e));
-	}, []), z = s((e) => {
-		j((t) => {
+var Se = ({ status: e }) => {
+	let { t } = se(), n = N[M(e)];
+	return /* @__PURE__ */ T("span", {
+		"data-status": e,
+		style: {
+			...j,
+			border: `1px solid ${n.border}`,
+			backgroundColor: n.bg,
+			color: n.text
+		},
+		children: [P(e), F(e, t)]
+	});
+};
+function I(e) {
+	let t = N[e >= .8 ? "success" : e >= .5 ? "neutral" : "danger"];
+	return {
+		...j,
+		border: `1px solid ${t.border}`,
+		backgroundColor: t.bg,
+		color: t.text
+	};
+}
+function L(e) {
+	return e.pages.reduce((e, t) => e + t.widgets.length, 0);
+}
+var R = l(function() {
+	let { t: l } = se(), h = e(), g = a(), [b, x] = f(""), [D, M] = f(!1), [N, P] = f(null), [F, R] = f(() => /* @__PURE__ */ new Set()), [z, B] = f(null), [V, H] = f(null), [U, W] = f(""), G = u((e) => {
+		R((t) => new Set(t).add(e));
+	}, []), K = u((e) => {
+		R((t) => {
 			let n = new Set(t);
 			return n.delete(e), n;
 		});
-	}, []), { data: B, loading: ye, refetch: V, startPolling: H, stopPolling: U } = b(de, {
+	}, []), { data: Ce, loading: we, refetch: q, startPolling: Te, stopPolling: J } = C(pe, {
 		variables: { first: 20 },
 		fetchPolicy: "cache-and-network"
-	}), W = B?.listPromptGenerations?.edges?.some((e) => C.includes(e.node.status)) ?? !1, { data: be } = b(fe, { variables: { limit: 6 } }), [G] = y(pe), [K] = y(me), [q] = y(he), [J] = y(ge), [Y] = y(_e), [X] = y(ve), Z = B?.listPromptGenerations?.edges?.map((e) => e.node) || [], Q = be?.getPromptSuggestions || [];
-	c(() => (W || E ? H(2e3) : U(), () => U()), [
-		W,
-		E,
-		H,
-		U
-	]), c(() => {
-		if (!M && !P) return;
+	}), Y = Ce?.listPromptGenerations?.edges?.some((e) => E.includes(e.node.status)) ?? !1, { data: Ee } = C(me, { variables: { limit: 6 } }), [De] = S(he), [Oe] = S(ge), [ke] = S(_e), [Ae] = S(ve), [X] = S(ye), [je] = S(be), Z = Ce?.listPromptGenerations?.edges?.map((e) => e.node) || [], Me = Ee?.getPromptSuggestions || [];
+	d(() => (Y || D ? Te(2e3) : J(), () => J()), [
+		Y,
+		D,
+		Te,
+		J
+	]), d(() => {
+		if (!z && !V) return;
 		let e = (e) => {
-			e.key === "Escape" && (N(null), F(null));
+			e.key === "Escape" && (B(null), H(null));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [M, P]);
-	let $ = s(async () => {
-		if (!(!_.trim() || E)) {
-			if (_.length > 2e3) {
-				k(o("bigconsole.insights.error.promptTooLong", "Prompt is too long (max 2000 characters)."));
+	}, [z, V]);
+	let Ne = u(async () => {
+		if (!(!b.trim() || D)) {
+			if (b.length > 2e3) {
+				P(l("bigconsole.insights.error.promptTooLong", "Prompt is too long (max 2000 characters)."));
 				return;
 			}
-			k(null), D(!0);
+			P(null), M(!0);
 			try {
-				p("bigconsole.ai.generate_clicked", { maxWidgets: 8 });
-				let e = await G({ variables: { input: {
-					prompt: _.trim(),
+				g("bigconsole.ai.generate_clicked", { maxWidgets: 8 });
+				let e = await De({ variables: { input: {
+					prompt: b.trim(),
 					styleType: "MODERN",
 					layoutType: "GRID",
 					maxWidgets: 8
 				} } });
-				if (t(e, "command")) return;
-				let n = e.data?.generateDashboardFromPrompt?.id;
-				n && p("bigconsole.ai.dashboard_generated", {
-					generationId: n,
+				if (i(e, "command")) return;
+				let t = e.data?.generateDashboardFromPrompt?.id;
+				t && g("bigconsole.ai.dashboard_generated", {
+					generationId: t,
 					maxWidgets: 8
-				}), v(""), V();
+				}), x(""), q();
 			} catch (e) {
-				if (t(e, "command")) return;
-				k(e instanceof Error ? e.message : o("bigconsole.insights.error.generateFailed", "Failed to generate dashboard"));
+				if (i(e, "command")) return;
+				P(e instanceof Error ? e.message : l("bigconsole.insights.error.generateFailed", "Failed to generate dashboard"));
 			} finally {
-				D(!1);
+				M(!1);
 			}
 		}
 	}, [
-		p,
-		_,
-		E,
-		G,
-		V,
-		o
-	]), xe = s(async (e) => {
-		k(null);
+		g,
+		b,
+		D,
+		De,
+		q,
+		l
+	]), Q = u(async (e) => {
+		P(null);
 		try {
-			p("bigconsole.ai.create_dashboard_clicked", { generationId: e });
-			let n = await K({ variables: { input: { generationId: e } } });
-			if (t(n, "project")) return;
-			let r = n.data?.createDashboardFromGeneration?.id;
-			r && (p("bigconsole.ai.dashboard_created", {
+			g("bigconsole.ai.create_dashboard_clicked", { generationId: e });
+			let t = await Oe({ variables: { input: { generationId: e } } });
+			if (i(t, "project")) return;
+			let n = t.data?.createDashboardFromGeneration?.id;
+			n && (g("bigconsole.ai.dashboard_created", {
 				generationId: e,
-				dashboardId: r
-			}), f(`/dashboards/${r}`));
+				dashboardId: n
+			}), h(`/dashboards/${n}`));
 		} catch (e) {
-			if (t(e, "project")) return;
-			k(e instanceof Error ? e.message : o("bigconsole.insights.error.createFailed", "Failed to create dashboard"));
+			if (i(e, "project")) return;
+			P(e instanceof Error ? e.message : l("bigconsole.insights.error.createFailed", "Failed to create dashboard"));
 		}
 	}, [
-		K,
-		p,
-		f,
-		o
-	]), Se = s(async (e) => {
-		k(null);
+		Oe,
+		g,
+		h,
+		l
+	]), Pe = u(async (e) => {
+		P(null);
 		try {
-			await q({ variables: { generationId: e } }), r() && a("success"), V();
+			await ke({ variables: { generationId: e } }), o() && c("success"), q();
 		} catch (e) {
-			k(e instanceof Error ? e.message : o("bigconsole.insights.error.deleteFailed", "Failed to delete generation")), r() && a("error");
+			P(e instanceof Error ? e.message : l("bigconsole.insights.error.deleteFailed", "Failed to delete generation")), o() && c("error");
 		}
 	}, [
+		ke,
 		q,
-		V,
-		o
-	]), Ce = s(async (e) => {
-		k(null), R(e);
+		l
+	]), Fe = u(async (e) => {
+		P(null), G(e);
 		try {
-			await J({ variables: { generationId: e } }), V();
+			await Ae({ variables: { generationId: e } }), q();
 		} catch (e) {
-			k(e instanceof Error ? e.message : o("bigconsole.insights.error.cancelFailed", "Failed to cancel generation"));
+			P(e instanceof Error ? e.message : l("bigconsole.insights.error.cancelFailed", "Failed to cancel generation"));
 		} finally {
-			z(e);
+			K(e);
 		}
 	}, [
-		J,
-		V,
-		o
-	]), we = s(async (e) => {
-		k(null), R(e);
+		Ae,
+		q,
+		l
+	]), Ie = u(async (e) => {
+		P(null), G(e);
 		try {
-			if (t(await Y({ variables: { input: { generationId: e } } }), "command")) return;
-			V();
+			if (i(await X({ variables: { input: { generationId: e } } }), "command")) return;
+			q();
 		} catch (e) {
-			if (t(e, "command")) return;
-			k(e instanceof Error ? e.message : o("bigconsole.insights.error.regenerateFailed", "Failed to regenerate dashboard"));
+			if (i(e, "command")) return;
+			P(e instanceof Error ? e.message : l("bigconsole.insights.error.regenerateFailed", "Failed to regenerate dashboard"));
 		} finally {
-			z(e);
+			K(e);
 		}
 	}, [
-		Y,
-		V,
-		o
-	]), Te = s(async () => {
-		if (!P || !I.trim()) return;
-		let e = P.id;
-		k(null), R(e);
-		let n = !1;
+		X,
+		q,
+		l
+	]), Le = u(async () => {
+		if (!V || !U.trim()) return;
+		let e = V.id;
+		P(null), G(e);
+		let t = !1;
 		try {
-			if (t(await X({ variables: { input: {
+			if (i(await je({ variables: { input: {
 				generationId: e,
-				refinementPrompt: I.trim()
+				refinementPrompt: U.trim()
 			} } }), "command")) {
-				n = !0;
+				t = !0;
 				return;
 			}
-			n = !0, V();
+			t = !0, q();
 		} catch (e) {
-			if (t(e, "command")) {
-				n = !0;
+			if (i(e, "command")) {
+				t = !0;
 				return;
 			}
-			k(e instanceof Error ? e.message : o("bigconsole.insights.error.refineFailed", "Failed to refine generation"));
+			P(e instanceof Error ? e.message : l("bigconsole.insights.error.refineFailed", "Failed to refine generation"));
 		} finally {
-			n && (F(null), L("")), z(e);
+			t && (H(null), W("")), K(e);
 		}
 	}, [
-		P,
-		I,
-		X,
 		V,
-		o
-	]), Ee = s((e) => {
-		v(e);
-	}, []);
-	return /* @__PURE__ */ S("div", {
-		style: {
-			minHeight: "100vh",
-			backgroundColor: "var(--color-bg-canvas)"
-		},
+		U,
+		je,
+		q,
+		l
+	]), Re = u((e) => {
+		x(e);
+	}, []), $ = z?.generatedSpec;
+	return /* @__PURE__ */ T("div", {
+		className: "min-w-0",
+		style: { backgroundColor: "var(--color-bg-canvas)" },
 		children: [
-			/* @__PURE__ */ S("div", {
-				style: {
-					padding: "var(--space-pagePadding)",
-					maxWidth: 960,
-					margin: "0 auto"
-				},
-				children: [
-					/* @__PURE__ */ S("div", {
-						className: "relative mb-[var(--space-sectionGap)] overflow-hidden rounded-card border border-border-seam bg-gloss-card p-6",
-						children: [
-							/* @__PURE__ */ x(oe, { intensity: "subtle" }),
-							/* @__PURE__ */ S("div", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: "var(--space-iconGap)"
-								},
-								children: [/* @__PURE__ */ x(h, {
-									size: 24,
-									style: { color: "var(--color-action-primary-bg)" }
-								}), /* @__PURE__ */ x("h1", {
-									style: {
-										fontSize: "var(--font-size-heading-h4)",
-										fontWeight: "var(--font-weight-bold)",
-										color: "var(--color-text-primary)"
-									},
-									children: /* @__PURE__ */ x(le, { children: o("bigconsole.insights.header.title", "AI Insights") })
-								})]
-							}),
-							/* @__PURE__ */ x("p", {
-								style: {
-									fontSize: "var(--font-size-body-md)",
-									color: "var(--color-text-secondary)",
-									marginTop: 4
-								},
-								children: o("bigconsole.insights.header.subtitle", "Generate dashboards from natural language prompts")
-							})
-						]
-					}),
-					/* @__PURE__ */ S(se, {
-						className: "mb-[var(--space-sectionGap)] p-[var(--space-cardPadding)]",
-						children: [
-							/* @__PURE__ */ x("label", {
-								htmlFor: "prompt-input",
-								style: {
-									display: "block",
-									fontSize: "var(--font-size-body-sm)",
-									fontWeight: "var(--font-weight-medium)",
-									color: "var(--color-text-primary)",
-									marginBottom: 8
-								},
-								children: o("bigconsole.insights.prompt.label", "Describe the dashboard you want to create")
-							}),
-							/* @__PURE__ */ x("textarea", {
-								id: "prompt-input",
-								value: _,
-								onChange: (e) => v(e.target.value),
-								placeholder: o("bigconsole.insights.prompt.placeholder", "e.g., Create a sales dashboard showing revenue trends, top products, and regional performance"),
-								rows: 3,
-								maxLength: 2e3,
-								style: {
-									width: "100%",
-									padding: "8px 12px",
-									borderRadius: "var(--radius-button)",
-									border: "1px solid var(--color-border)",
-									backgroundColor: "var(--color-bg-canvas)",
-									color: "var(--color-text-primary)",
-									fontSize: "var(--font-size-body-md)",
-									resize: "vertical",
-									outline: "none"
-								},
-								onKeyDown: (e) => {
-									e.key === "Enter" && (e.metaKey || e.ctrlKey) && $();
-								}
-							}),
-							/* @__PURE__ */ S("div", {
-								style: {
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									marginTop: 8,
-									flexWrap: "wrap",
-									gap: 8
-								},
-								children: [/* @__PURE__ */ x("span", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)"
-									},
-									children: o("bigconsole.insights.prompt.hint", "Press Ctrl+Enter to generate")
-								}), /* @__PURE__ */ S("button", {
-									onClick: $,
-									disabled: !_.trim() || E,
-									style: {
-										display: "flex",
-										alignItems: "center",
-										gap: 8,
-										padding: "8px 16px",
-										borderRadius: "var(--radius-button)",
-										backgroundColor: "var(--color-action-primary-bg)",
-										color: "var(--color-action-primary-text)",
-										fontWeight: "var(--font-weight-medium)",
-										fontSize: "var(--font-size-body-sm)",
-										border: "none",
-										cursor: !_.trim() || E ? "not-allowed" : "pointer",
-										opacity: !_.trim() || E ? .5 : 1
-									},
-									children: [E ? /* @__PURE__ */ x(m, {
-										size: 16,
-										className: "animate-spin"
-									}) : /* @__PURE__ */ x(h, { size: 16 }), o("bigconsole.insights.prompt.generateButton", "Generate Dashboard")]
-								})]
-							})
-						]
-					}),
-					O && /* @__PURE__ */ S("div", {
+			/* @__PURE__ */ T("header", {
+				className: "relative overflow-hidden border-b border-[var(--color-border-seam)] bg-[image:var(--gradient-gloss-card)]",
+				children: [/* @__PURE__ */ w(ce, { intensity: "subtle" }), /* @__PURE__ */ w("div", {
+					style: { padding: "var(--space-pagePadding)" },
+					children: /* @__PURE__ */ T("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
-							justifyContent: "space-between",
-							gap: 8,
-							padding: "10px 16px",
-							marginBottom: "var(--space-sectionGap)",
-							borderRadius: "var(--radius-card)",
-							border: "1px solid var(--color-status-error-text)",
-							backgroundColor: "var(--color-bg-surface)",
-							color: "var(--color-status-error-text)",
-							fontSize: "var(--font-size-body-sm)"
+							gap: "var(--space-formGap)",
+							flexWrap: "wrap",
+							minWidth: 0
 						},
-						children: [/* @__PURE__ */ S("div", {
+						children: [/* @__PURE__ */ w("div", {
 							style: {
 								display: "flex",
+								height: "var(--size-controlHeight-lg)",
+								width: "var(--size-controlHeight-lg)",
+								flexShrink: 0,
 								alignItems: "center",
-								gap: 8
-							},
-							children: [/* @__PURE__ */ x(u, { size: 16 }), O]
-						}), /* @__PURE__ */ x("button", {
-							onClick: () => k(null),
-							style: {
-								background: "none",
-								border: "none",
-								color: "var(--color-status-error-text)",
-								cursor: "pointer",
-								fontSize: "var(--font-size-body-md)",
-								padding: "0 4px"
+								justifyContent: "center",
+								borderRadius: "var(--radius-card)",
+								backgroundColor: "var(--color-action-primary-bg)"
 							},
-							"aria-label": o("bigconsole.insights.error.dismiss", "Dismiss error"),
-							children: "×"
+							children: /* @__PURE__ */ w(v, { style: {
+								height: "var(--size-icon-lg)",
+								width: "var(--size-icon-lg)",
+								color: "var(--color-action-primary-text)"
+							} })
+						}), /* @__PURE__ */ T("div", {
+							style: { minWidth: 0 },
+							children: [/* @__PURE__ */ w("h1", {
+								className: "m-0 text-2xl font-bold text-text-primary",
+								children: /* @__PURE__ */ w(ue, { children: l("bigconsole.insights.header.title", "AI Insights") })
+							}), /* @__PURE__ */ w("p", {
+								className: "m-0 text-sm text-text-secondary",
+								children: l("bigconsole.insights.header.subtitle", "Generate dashboards from natural language prompts")
+							})]
 						})]
+					})
+				})]
+			}),
+			/* @__PURE__ */ T("div", {
+				style: { padding: "var(--space-pagePadding)" },
+				children: [/* @__PURE__ */ w(fe, {
+					className: "mb-[var(--space-sectionGap)]",
+					children: "Describe the dashboard you need in plain English and BigConsole proposes the pages, widgets and layout for it. Review the proposal, refine it in place, then create the real dashboard in one step — a generation is only a proposal until you accept it."
+				}), /* @__PURE__ */ T(r, { children: [
+					N && /* @__PURE__ */ w(n, {
+						headingLevel: 2,
+						tone: "danger",
+						padding: "compact",
+						title: "That request did not go through",
+						description: N,
+						icon: /* @__PURE__ */ w(p, { className: "h-icon-sm w-icon-sm" }),
+						"data-testid": "insights-error",
+						actions: /* @__PURE__ */ w("button", {
+							type: "button",
+							onClick: () => P(null),
+							"aria-label": l("bigconsole.insights.error.dismiss", "Dismiss error"),
+							className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+							style: O,
+							children: "Dismiss"
+						})
 					}),
-					Q.length > 0 && /* @__PURE__ */ S("div", {
-						style: { marginBottom: "var(--space-sectionGap)" },
-						children: [/* @__PURE__ */ x("h2", {
+					/* @__PURE__ */ w(n, {
+						id: "insights-prompt",
+						emphasis: "primary",
+						headingLevel: 2,
+						title: "Describe your dashboard",
+						description: "One or two sentences is enough — name the metrics, the breakdowns and who will read it.",
+						icon: /* @__PURE__ */ w(v, { className: "h-icon-sm w-icon-sm" }),
+						"data-testid": "insights-prompt",
+						children: /* @__PURE__ */ T("div", {
 							style: {
-								fontSize: "var(--font-size-body-md)",
-								fontWeight: "var(--font-weight-semibold)",
-								color: "var(--color-text-primary)",
-								marginBottom: 12
+								display: "flex",
+								flexDirection: "column",
+								gap: "var(--space-controlGap)"
 							},
-							children: o("bigconsole.insights.suggestions.heading", "Suggestions")
-						}), /* @__PURE__ */ x("div", {
+							children: [
+								/* @__PURE__ */ w("label", {
+									htmlFor: "prompt-input",
+									style: {
+										display: "block",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-medium)",
+										color: "var(--color-text-primary)"
+									},
+									children: l("bigconsole.insights.prompt.label", "Your prompt")
+								}),
+								/* @__PURE__ */ w("textarea", {
+									id: "prompt-input",
+									value: b,
+									onChange: (e) => x(e.target.value),
+									placeholder: l("bigconsole.insights.prompt.placeholder", "e.g., Create a sales dashboard showing revenue trends, top products, and regional performance"),
+									rows: 3,
+									maxLength: 2e3,
+									className: t,
+									style: {
+										width: "100%",
+										maxWidth: "100%",
+										padding: "var(--space-controlGap) var(--space-formGap)",
+										borderRadius: "var(--radius-input)",
+										border: "1px solid var(--color-border-default)",
+										backgroundColor: "var(--color-bg-canvas)",
+										color: "var(--color-text-primary)",
+										fontSize: "var(--font-size-body-md)",
+										resize: "vertical"
+									},
+									onKeyDown: (e) => {
+										e.key === "Enter" && (e.metaKey || e.ctrlKey) && Ne();
+									}
+								}),
+								/* @__PURE__ */ T("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										flexWrap: "wrap",
+										gap: "var(--space-controlGap)",
+										borderTop: "1px solid var(--color-border-subtle)",
+										paddingTop: "var(--space-controlGap)"
+									},
+									children: [/* @__PURE__ */ T("span", {
+										style: {
+											flex: "1 1 12rem",
+											minWidth: 0,
+											fontSize: "var(--font-size-body-sm)",
+											color: "var(--color-text-muted)"
+										},
+										children: [
+											l("bigconsole.insights.prompt.hint", "Press Ctrl+Enter to generate"),
+											" · ",
+											b.length,
+											"/2000"
+										]
+									}), /* @__PURE__ */ T("button", {
+										type: "button",
+										onClick: Ne,
+										disabled: !b.trim() || D,
+										className: t,
+										style: {
+											...k,
+											marginLeft: "auto",
+											cursor: !b.trim() || D ? "not-allowed" : "pointer",
+											opacity: !b.trim() || D ? .5 : 1
+										},
+										children: [D ? /* @__PURE__ */ w(_, {
+											size: 16,
+											className: "animate-spin",
+											"aria-hidden": "true"
+										}) : /* @__PURE__ */ w(v, {
+											size: 16,
+											"aria-hidden": "true"
+										}), l("bigconsole.insights.prompt.generateButton", "Generate dashboard")]
+									})]
+								})
+							]
+						})
+					}),
+					Me.length > 0 && /* @__PURE__ */ w(n, {
+						emphasis: "muted",
+						headingLevel: 2,
+						title: l("bigconsole.insights.suggestions.heading", "Starting points"),
+						description: "Pick one to drop it into the prompt box above, then edit it before generating.",
+						icon: /* @__PURE__ */ w(re, { className: "h-icon-sm w-icon-sm" }),
+						"data-testid": "insights-suggestions",
+						children: /* @__PURE__ */ w("div", {
 							style: {
 								display: "grid",
-								gridTemplateColumns: "repeat(auto-fill, minmax(min(280px, 100%), 1fr))",
-								gap: 12
+								gridTemplateColumns: "repeat(auto-fill, minmax(min(260px, 100%), 1fr))",
+								gap: "var(--space-controlGap)"
 							},
-							children: Q.map((e) => /* @__PURE__ */ S("button", {
-								onClick: () => Ee(e.prompt),
+							children: Me.map((e) => /* @__PURE__ */ T("button", {
+								type: "button",
+								onClick: () => Re(e.prompt),
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 								style: {
 									textAlign: "left",
-									padding: 12,
+									minWidth: 0,
+									minHeight: "var(--size-controlHeight-lg)",
+									padding: "var(--space-controlGap)",
 									borderRadius: "var(--radius-card)",
-									border: "1px solid var(--color-border)",
+									border: "1px solid var(--color-border-subtle)",
 									backgroundColor: "var(--color-bg-surface)",
 									cursor: "pointer"
 								},
 								children: [
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ w("span", {
 										style: {
+											display: "block",
 											fontWeight: "var(--font-weight-medium)",
 											fontSize: "var(--font-size-body-sm)",
 											color: "var(--color-text-primary)",
-											marginBottom: 4
+											marginBottom: "var(--space-iconGap)"
 										},
 										children: e.title
 									}),
-									/* @__PURE__ */ x("div", {
+									/* @__PURE__ */ w("span", {
 										style: {
+											display: "block",
 											fontSize: "var(--font-size-body-sm)",
 											color: "var(--color-text-secondary)",
 											lineHeight: 1.4
 										},
-										children: e.exampleDescription || e.prompt.slice(0, 80)
+										children: e.exampleDescription || e.prompt
 									}),
-									/* @__PURE__ */ x("div", {
+									e.tags.length > 0 && /* @__PURE__ */ w("span", {
 										style: {
 											display: "flex",
-											gap: 4,
-											marginTop: 8,
+											gap: "var(--space-iconGap)",
+											marginTop: "var(--space-controlGap)",
 											flexWrap: "wrap"
 										},
-										children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ x("span", {
-											style: {
-												fontSize: 11,
-												padding: "2px 6px",
-												borderRadius: 4,
-												backgroundColor: "var(--color-bg-sunken)",
-												color: "var(--color-text-muted)"
-											},
+										children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ w("span", {
+											style: j,
 											children: e
 										}, e))
 									})
 								]
 							}, e.id))
-						})]
-					}),
-					/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("h2", {
-						style: {
-							fontSize: "var(--font-size-body-md)",
-							fontWeight: "var(--font-weight-semibold)",
-							color: "var(--color-text-primary)",
-							marginBottom: 12
-						},
-						children: o("bigconsole.insights.generations.heading", "Recent Generations")
-					}), ye && Z.length === 0 ? /* @__PURE__ */ S("div", {
-						style: {
-							textAlign: "center",
-							padding: 40,
-							color: "var(--color-text-muted)"
-						},
-						children: [/* @__PURE__ */ x(m, {
-							size: 24,
-							className: "animate-spin",
-							style: { margin: "0 auto 8px" }
-						}), /* @__PURE__ */ x("p", { children: o("bigconsole.insights.generations.loading", "Loading generations...") })]
-					}) : Z.length === 0 && !E ? /* @__PURE__ */ x(ce, {
-						treatment: "insight",
-						className: "border-border-seam",
-						children: /* @__PURE__ */ x(ue, {
-							illustration: "onboarding",
-							title: o("bigconsole.insights.generations.emptyTitle", "No generations yet"),
-							description: o("bigconsole.insights.generations.emptyDescription", "Describe a dashboard above to get started")
 						})
-					}) : /* @__PURE__ */ S("div", {
-						style: {
-							display: "flex",
-							flexDirection: "column",
-							gap: 12
-						},
-						children: [E && !W && /* @__PURE__ */ x("div", {
-							style: {
-								padding: 16,
-								borderRadius: "var(--radius-card)",
-								border: "1px solid var(--color-border)",
-								backgroundColor: "var(--color-bg-surface)"
-							},
-							children: /* @__PURE__ */ S("div", {
+					}),
+					/* @__PURE__ */ w(n, {
+						emphasis: "bare",
+						padding: "none",
+						headingLevel: 2,
+						title: l("bigconsole.insights.generations.heading", "Recent generations"),
+						description: "Newest first. A generation stays a proposal until you create the dashboard from it.",
+						icon: /* @__PURE__ */ w(ne, { className: "h-icon-sm w-icon-sm" }),
+						meta: Z.length > 0 ? /* @__PURE__ */ T("span", {
+							style: j,
+							children: [
+								Z.length,
+								" generation",
+								Z.length === 1 ? "" : "s"
+							]
+						}) : void 0,
+						"data-testid": "insights-generations",
+						children: we && Z.length === 0 ? /* @__PURE__ */ w(n, {
+							emphasis: "muted",
+							headingLevel: 3,
+							"aria-label": "Loading generations",
+							className: "min-h-[10rem]",
+							"data-testid": "insights-generations-loading",
+							children: /* @__PURE__ */ T("div", {
 								style: {
 									display: "flex",
+									minHeight: "8rem",
+									flexDirection: "column",
 									alignItems: "center",
-									gap: 8,
-									minWidth: 0
+									justifyContent: "center",
+									gap: "var(--space-controlGap)",
+									color: "var(--color-text-muted)"
 								},
-								children: [
-									w("PROCESSING"),
-									/* @__PURE__ */ x("span", {
-										style: {
-											fontSize: "var(--font-size-body-sm)",
-											fontWeight: "var(--font-weight-medium)",
-											color: "var(--color-text-primary)"
-										},
-										children: o("bigconsole.insights.generations.generating", "Generating...")
-									}),
-									/* @__PURE__ */ x("span", {
-										style: {
-											fontSize: 11,
-											color: "var(--color-text-muted)",
-											padding: "2px 6px",
-											borderRadius: 4,
-											backgroundColor: "var(--color-bg-sunken)"
-										},
-										children: T("PROCESSING", o)
-									})
-								]
+								children: [/* @__PURE__ */ w(_, {
+									size: 24,
+									className: "animate-spin",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ w("p", {
+									style: { fontSize: "var(--font-size-body-sm)" },
+									children: l("bigconsole.insights.generations.loading", "Loading generations…")
+								})]
 							})
-						}), Z.map((e) => /* @__PURE__ */ x("div", {
-							style: {
-								padding: 16,
-								borderRadius: "var(--radius-card)",
-								border: "1px solid var(--color-border)",
-								backgroundColor: "var(--color-bg-surface)"
-							},
-							children: /* @__PURE__ */ S("div", {
-								style: {
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "flex-start",
-									flexWrap: "wrap",
-									gap: 8
-								},
-								children: [/* @__PURE__ */ S("div", {
-									style: {
-										flex: "1 1 200px",
-										minWidth: 0
-									},
+						}) : Z.length === 0 && !D ? /* @__PURE__ */ w(le, {
+							treatment: "insight",
+							className: "border-[var(--color-border-seam)]",
+							children: /* @__PURE__ */ w(de, {
+								illustration: "onboarding",
+								title: l("bigconsole.insights.generations.emptyTitle", "No generations yet"),
+								description: l("bigconsole.insights.generations.emptyDescription", "Describe a dashboard above to get started")
+							})
+						}) : /* @__PURE__ */ T("div", {
+							className: "flex flex-col gap-list-gap",
+							children: [D && !Y && /* @__PURE__ */ w(n, {
+								emphasis: "muted",
+								tone: "info",
+								padding: "compact",
+								headingLevel: 3,
+								title: "Sending your prompt…",
+								description: "The new generation appears here as soon as the backend accepts it.",
+								icon: /* @__PURE__ */ w(_, { className: "h-icon-sm w-icon-sm animate-spin" }),
+								"data-testid": "insights-generation-pending"
+							}), Z.map((e) => {
+								let r = e.generatedSpec, i = F.has(e.id), a = E.includes(e.status);
+								return /* @__PURE__ */ T(n, {
+									emphasis: "standard",
+									padding: "compact",
+									headingLevel: 3,
+									title: r?.name || (a ? l("bigconsole.insights.generations.generating", "Generating…") : "Untitled generation"),
+									meta: /* @__PURE__ */ w(Se, { status: e.status }),
+									description: e.prompt.length > 160 ? `${e.prompt.slice(0, 160)}…` : e.prompt,
+									"data-testid": "insights-generation-card",
+									bodyClassName: "flex flex-col gap-control-gap",
 									children: [
-										/* @__PURE__ */ S("div", {
+										r && /* @__PURE__ */ T("div", {
 											style: {
 												display: "flex",
-												alignItems: "center",
-												gap: 8,
-												marginBottom: 4,
-												minWidth: 0
+												flexWrap: "wrap",
+												gap: "var(--space-iconGap)"
 											},
 											children: [
-												w(e.status),
-												/* @__PURE__ */ x("span", {
-													style: {
-														fontSize: "var(--font-size-body-sm)",
-														fontWeight: "var(--font-weight-medium)",
-														color: "var(--color-text-primary)",
-														minWidth: 0,
-														overflow: "hidden",
-														textOverflow: "ellipsis",
-														whiteSpace: "nowrap"
-													},
-													children: e.generatedSpec?.name || o("bigconsole.insights.generations.generating", "Generating...")
+												/* @__PURE__ */ T("span", {
+													style: j,
+													children: [
+														L(r),
+														" widget",
+														L(r) === 1 ? "" : "s"
+													]
 												}),
-												/* @__PURE__ */ x("span", {
-													style: {
-														fontSize: 11,
-														color: "var(--color-text-muted)",
-														padding: "2px 6px",
-														borderRadius: 4,
-														backgroundColor: "var(--color-bg-sunken)"
-													},
-													children: T(e.status, o)
+												/* @__PURE__ */ T("span", {
+													style: j,
+													children: [
+														r.pages.length,
+														" page",
+														r.pages.length === 1 ? "" : "s"
+													]
+												}),
+												/* @__PURE__ */ T("span", {
+													style: I(r.overallConfidence),
+													children: [Math.round(r.overallConfidence * 100), "% confidence"]
 												})
 											]
 										}),
-										/* @__PURE__ */ x("p", {
-											style: {
-												fontSize: "var(--font-size-body-sm)",
-												color: "var(--color-text-secondary)",
-												marginBottom: 4
-											},
-											children: e.prompt.length > 120 ? e.prompt.slice(0, 120) + "..." : e.prompt
+										e.errorMessage && /* @__PURE__ */ w(n, {
+											headingLevel: 4,
+											tone: "danger",
+											padding: "compact",
+											title: "Generation failed",
+											description: e.errorMessage,
+											icon: /* @__PURE__ */ w(p, { className: "h-icon-sm w-icon-sm" })
 										}),
-										e.generatedSpec && /* @__PURE__ */ x("div", {
-											style: {
-												fontSize: 11,
-												color: "var(--color-text-muted)"
-											},
-											children: o("bigconsole.insights.generations.summary", "{{widgets}} widgets across {{pages}} page(s) · {{confidence}}% confidence", {
-												widgets: e.generatedSpec.pages.reduce((e, t) => e + t.widgets.length, 0),
-												pages: e.generatedSpec.pages.length,
-												confidence: Math.round(e.generatedSpec.overallConfidence * 100)
-											})
-										}),
-										e.errorMessage && /* @__PURE__ */ S("div", {
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												marginTop: 4,
-												fontSize: "var(--font-size-body-sm)",
-												color: "var(--color-status-error-text)"
-											},
-											children: [/* @__PURE__ */ x(u, { size: 14 }), e.errorMessage]
-										})
-									]
-								}), /* @__PURE__ */ S("div", {
-									style: {
-										display: "flex",
-										gap: 8,
-										flexWrap: "wrap"
-									},
-									children: [
-										C.includes(e.status) && /* @__PURE__ */ S("button", {
-											onClick: () => {
-												i("medium"), Ce(e.id);
-											},
-											disabled: A.has(e.id),
-											title: o("bigconsole.insights.actions.cancelTitle", "Cancel generation"),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-status-warning-text)",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: A.has(e.id) ? "wait" : "pointer"
-											},
-											children: [
-												/* @__PURE__ */ x(ee, { size: 14 }),
-												" ",
-												o("bigconsole.insights.actions.cancel", "Cancel")
-											]
-										}),
-										e.status === "COMPLETED" && e.generatedSpec && /* @__PURE__ */ S("button", {
-											onClick: () => N(e),
-											title: o("bigconsole.insights.actions.previewTitle", "Preview proposed layout"),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-text-primary)",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: "pointer"
-											},
-											children: [
-												/* @__PURE__ */ x(te, { size: 14 }),
-												" ",
-												o("bigconsole.insights.actions.preview", "Preview")
-											]
-										}),
-										e.status === "COMPLETED" && e.generatedSpec && /* @__PURE__ */ S("button", {
-											onClick: () => {
-												F(e), L("");
-											},
-											title: o("bigconsole.insights.actions.refineTitle", "Refine with instructions"),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-text-primary)",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: "pointer"
-											},
-											children: [
-												/* @__PURE__ */ x(g, { size: 14 }),
-												" ",
-												o("bigconsole.insights.actions.refine", "Refine")
-											]
-										}),
-										(e.status === "COMPLETED" || e.status === "FAILED" || e.status === "CANCELLED") && /* @__PURE__ */ S("button", {
-											onClick: () => {
-												i("medium"), we(e.id);
-											},
-											disabled: A.has(e.id),
-											title: o("bigconsole.insights.actions.regenerateTitle", "Regenerate with the same prompt"),
+										/* @__PURE__ */ T("div", {
 											style: {
 												display: "flex",
+												flexWrap: "wrap",
 												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-text-primary)",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: A.has(e.id) ? "wait" : "pointer"
+												gap: "var(--space-controlGap)",
+												borderTop: "1px solid var(--color-border-subtle)",
+												paddingTop: "var(--space-controlGap)"
 											},
 											children: [
-												/* @__PURE__ */ x(ne, {
-													size: 14,
-													className: A.has(e.id) ? "animate-spin" : ""
+												a && /* @__PURE__ */ T("button", {
+													type: "button",
+													onClick: () => {
+														s("medium"), Fe(e.id);
+													},
+													disabled: i,
+													title: l("bigconsole.insights.actions.cancelTitle", "Cancel generation"),
+													className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+													style: {
+														...xe,
+														cursor: i ? "wait" : "pointer"
+													},
+													children: [
+														/* @__PURE__ */ w(ee, {
+															size: 14,
+															"aria-hidden": "true"
+														}),
+														" ",
+														l("bigconsole.insights.actions.cancel", "Cancel")
+													]
 												}),
-												" ",
-												o("bigconsole.insights.actions.regenerate", "Regenerate")
-											]
-										}),
-										e.status === "COMPLETED" && !e.dashboardId && /* @__PURE__ */ S("button", {
-											onClick: () => xe(e.id),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												backgroundColor: "var(--color-action-primary-bg)",
-												color: "var(--color-action-primary-text)",
-												border: "none",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: "pointer"
-											},
-											children: [
-												o("bigconsole.insights.actions.create", "Create"),
-												" ",
-												/* @__PURE__ */ x(d, { size: 14 })
-											]
-										}),
-										e.dashboardId && /* @__PURE__ */ S("button", {
-											onClick: () => f(`/dashboards/${e.dashboardId}`),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												gap: 4,
-												padding: "6px 12px",
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-text-primary)",
-												fontSize: "var(--font-size-body-sm)",
-												cursor: "pointer"
-											},
-											children: [
-												o("bigconsole.insights.actions.viewDashboard", "View Dashboard"),
-												" ",
-												/* @__PURE__ */ x(d, { size: 14 })
+												e.status === "COMPLETED" && r && /* @__PURE__ */ T("button", {
+													type: "button",
+													onClick: () => B(e),
+													title: l("bigconsole.insights.actions.previewTitle", "Preview proposed layout"),
+													className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+													style: O,
+													children: [
+														/* @__PURE__ */ w(te, {
+															size: 14,
+															"aria-hidden": "true"
+														}),
+														" ",
+														l("bigconsole.insights.actions.preview", "Preview")
+													]
+												}),
+												e.status === "COMPLETED" && r && /* @__PURE__ */ T("button", {
+													type: "button",
+													onClick: () => {
+														H(e), W("");
+													},
+													title: l("bigconsole.insights.actions.refineTitle", "Refine with instructions"),
+													className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+													style: O,
+													children: [
+														/* @__PURE__ */ w(y, {
+															size: 14,
+															"aria-hidden": "true"
+														}),
+														" ",
+														l("bigconsole.insights.actions.refine", "Refine")
+													]
+												}),
+												(e.status === "COMPLETED" || e.status === "FAILED" || e.status === "CANCELLED") && /* @__PURE__ */ T("button", {
+													type: "button",
+													onClick: () => {
+														s("medium"), Ie(e.id);
+													},
+													disabled: i,
+													title: l("bigconsole.insights.actions.regenerateTitle", "Regenerate with the same prompt"),
+													className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+													style: {
+														...O,
+														cursor: i ? "wait" : "pointer"
+													},
+													children: [
+														/* @__PURE__ */ w(ie, {
+															size: 14,
+															className: i ? "animate-spin" : "",
+															"aria-hidden": "true"
+														}),
+														" ",
+														l("bigconsole.insights.actions.regenerate", "Regenerate")
+													]
+												}),
+												/* @__PURE__ */ T("div", {
+													style: {
+														display: "flex",
+														flexWrap: "wrap",
+														alignItems: "center",
+														gap: "var(--space-controlGap)",
+														marginLeft: "auto"
+													},
+													children: [
+														e.status === "COMPLETED" && !e.dashboardId && /* @__PURE__ */ T("button", {
+															type: "button",
+															onClick: () => Q(e.id),
+															className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+															style: k,
+															children: [
+																l("bigconsole.insights.actions.create", "Create dashboard"),
+																" ",
+																/* @__PURE__ */ w(m, {
+																	size: 14,
+																	"aria-hidden": "true"
+																})
+															]
+														}),
+														e.dashboardId && /* @__PURE__ */ T("button", {
+															type: "button",
+															onClick: () => h(`/dashboards/${e.dashboardId ?? ""}`),
+															className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+															style: O,
+															children: [
+																l("bigconsole.insights.actions.viewDashboard", "View dashboard"),
+																" ",
+																/* @__PURE__ */ w(m, {
+																	size: 14,
+																	"aria-hidden": "true"
+																})
+															]
+														}),
+														/* @__PURE__ */ w("button", {
+															type: "button",
+															onClick: () => {
+																s("medium"), Pe(e.id);
+															},
+															title: l("bigconsole.insights.actions.deleteTitle", "Delete generation"),
+															"aria-label": l("bigconsole.insights.actions.deleteTitle", "Delete generation"),
+															className: t,
+															style: A,
+															children: /* @__PURE__ */ w(ae, {
+																size: 14,
+																"aria-hidden": "true"
+															})
+														})
+													]
+												})
 											]
-										}),
-										/* @__PURE__ */ x("button", {
-											onClick: () => {
-												i("medium"), Se(e.id);
-											},
-											title: o("bigconsole.insights.actions.deleteTitle", "Delete generation"),
-											style: {
-												display: "flex",
-												alignItems: "center",
-												padding: 6,
-												borderRadius: "var(--radius-button)",
-												border: "1px solid var(--color-border)",
-												backgroundColor: "transparent",
-												color: "var(--color-text-muted)",
-												cursor: "pointer"
-											},
-											children: /* @__PURE__ */ x(re, { size: 14 })
 										})
 									]
-								})]
-							})
-						}, e.id))]
-					})] })
-				]
+								}, e.id);
+							})]
+						})
+					})
+				] })]
 			}),
-			M?.generatedSpec && /* @__PURE__ */ x("div", {
+			z && $ && /* @__PURE__ */ w("div", {
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-label": o("bigconsole.insights.preview.ariaLabel", "Generation preview"),
-				onClick: () => N(null),
+				"aria-label": l("bigconsole.insights.preview.ariaLabel", "Generation preview"),
+				onClick: () => B(null),
 				style: {
 					position: "fixed",
 					inset: 0,
@@ -842,110 +888,173 @@ var E = o(function() {
 					justifyContent: "center",
 					padding: "var(--space-pagePadding)"
 				},
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ T("div", {
 					onClick: (e) => e.stopPropagation(),
 					style: {
+						display: "flex",
+						flexDirection: "column",
+						minHeight: 0,
 						width: "min(640px, 100%)",
-						maxHeight: "80vh",
-						overflowY: "auto",
+						maxHeight: "calc(100dvh - 2 * var(--space-pagePadding))",
 						backgroundColor: "var(--color-bg-surface)",
 						borderRadius: "var(--radius-card)",
-						border: "1px solid var(--color-border)",
-						boxShadow: "var(--shadow-elevation-3)",
-						padding: "var(--space-cardPadding)"
+						border: "1px solid var(--color-border-default)",
+						boxShadow: "var(--shadow-elevation-3)"
 					},
 					children: [
-						/* @__PURE__ */ S("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
 								display: "flex",
 								justifyContent: "space-between",
 								alignItems: "flex-start",
-								gap: 8,
-								marginBottom: "var(--space-controlGap)"
+								gap: "var(--space-controlGap)",
+								padding: "var(--space-cardPadding)",
+								borderBottom: "1px solid var(--color-border-subtle)"
 							},
-							children: [/* @__PURE__ */ S("div", {
+							children: [/* @__PURE__ */ T("div", {
 								style: { minWidth: 0 },
-								children: [/* @__PURE__ */ x("h3", {
+								children: [/* @__PURE__ */ w("h2", {
 									style: {
 										fontSize: "var(--font-size-heading-h4)",
-										fontWeight: "var(--font-weight-semibold)"
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)"
 									},
-									children: M.generatedSpec.name
-								}), M.generatedSpec.description && /* @__PURE__ */ x("p", {
+									children: $.name
+								}), $.description && /* @__PURE__ */ w("p", {
 									style: {
 										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)",
+										color: "var(--color-text-secondary)",
 										marginTop: 2
 									},
-									children: M.generatedSpec.description
+									children: $.description
 								})]
-							}), /* @__PURE__ */ x("button", {
-								onClick: () => N(null),
-								"aria-label": o("bigconsole.insights.preview.close", "Close preview"),
+							}), /* @__PURE__ */ w("button", {
+								type: "button",
+								onClick: () => B(null),
+								"aria-label": l("bigconsole.insights.preview.close", "Close preview"),
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 								style: {
-									display: "flex",
-									padding: 4,
-									borderRadius: "var(--radius-button)",
-									border: "none",
-									backgroundColor: "transparent",
-									color: "var(--color-text-muted)",
-									cursor: "pointer"
+									...A,
+									color: "var(--color-text-muted)"
 								},
-								children: /* @__PURE__ */ x(ie, { size: 18 })
+								children: /* @__PURE__ */ w(oe, {
+									size: 18,
+									"aria-hidden": "true"
+								})
 							})]
 						}),
-						/* @__PURE__ */ x("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
-								fontSize: 11,
-								color: "var(--color-text-muted)",
-								marginBottom: "var(--space-controlGap)"
+								flex: "1 1 auto",
+								minHeight: 0,
+								overflowY: "auto",
+								padding: "var(--space-cardPadding)",
+								display: "flex",
+								flexDirection: "column",
+								gap: "var(--space-controlGap)"
 							},
-							children: o("bigconsole.insights.generations.summary", "{{widgets}} widgets across {{pages}} page(s) · {{confidence}}% confidence", {
-								widgets: M.generatedSpec.pages.reduce((e, t) => e + t.widgets.length, 0),
-								pages: M.generatedSpec.pages.length,
-								confidence: Math.round(M.generatedSpec.overallConfidence * 100)
-							})
-						}),
-						M.generatedSpec.pages.map((e, t) => /* @__PURE__ */ S("div", {
-							style: { marginBottom: "var(--space-controlGap)" },
-							children: [/* @__PURE__ */ x("div", {
-								style: {
-									fontSize: "var(--font-size-body-sm)",
-									fontWeight: "var(--font-weight-medium)",
-									color: "var(--color-text-primary)",
-									marginBottom: 4
-								},
-								children: e.name
-							}), /* @__PURE__ */ x("div", {
+							children: [/* @__PURE__ */ T("div", {
 								style: {
 									display: "flex",
 									flexWrap: "wrap",
-									gap: 6
+									gap: "var(--space-iconGap)"
 								},
-								children: e.widgets.map((e, t) => /* @__PURE__ */ S("span", {
-									style: {
-										fontSize: 11,
-										padding: "3px 8px",
-										borderRadius: "var(--radius-pill)",
-										backgroundColor: "var(--color-bg-sunken)",
-										color: "var(--color-text-secondary)"
-									},
+								children: [
+									/* @__PURE__ */ T("span", {
+										style: j,
+										children: [
+											L($),
+											" widget",
+											L($) === 1 ? "" : "s"
+										]
+									}),
+									/* @__PURE__ */ T("span", {
+										style: j,
+										children: [
+											$.pages.length,
+											" page",
+											$.pages.length === 1 ? "" : "s"
+										]
+									}),
+									/* @__PURE__ */ T("span", {
+										style: I($.overallConfidence),
+										children: [Math.round($.overallConfidence * 100), "% confidence"]
+									})
+								]
+							}), $.pages.map((e, t) => /* @__PURE__ */ w(n, {
+								emphasis: "muted",
+								padding: "compact",
+								headingLevel: 3,
+								title: e.name,
+								meta: /* @__PURE__ */ T("span", {
+									style: j,
 									children: [
-										e.title,
-										" · ",
-										e.type
+										e.widgets.length,
+										" widget",
+										e.widgets.length === 1 ? "" : "s"
 									]
-								}, t))
+								}),
+								children: /* @__PURE__ */ w("div", {
+									style: {
+										display: "flex",
+										flexWrap: "wrap",
+										gap: "var(--space-iconGap)"
+									},
+									children: e.widgets.map((e, t) => /* @__PURE__ */ T("span", {
+										style: {
+											...j,
+											backgroundColor: "var(--color-bg-surface)",
+											color: "var(--color-text-primary)"
+										},
+										children: [e.title, /* @__PURE__ */ w("span", {
+											style: { color: "var(--color-text-muted)" },
+											children: e.type
+										})]
+									}, t))
+								})
+							}, t))]
+						}),
+						/* @__PURE__ */ T("div", {
+							style: {
+								display: "flex",
+								justifyContent: "flex-end",
+								flexWrap: "wrap",
+								gap: "var(--space-controlGap)",
+								padding: "var(--space-cardPadding)",
+								borderTop: "1px solid var(--color-border-subtle)"
+							},
+							children: [/* @__PURE__ */ w("button", {
+								type: "button",
+								onClick: () => B(null),
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+								style: O,
+								children: "Close"
+							}), z.status === "COMPLETED" && !z.dashboardId && /* @__PURE__ */ T("button", {
+								type: "button",
+								onClick: () => {
+									let e = z.id;
+									B(null), Q(e);
+								},
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+								style: k,
+								children: [
+									l("bigconsole.insights.actions.create", "Create dashboard"),
+									" ",
+									/* @__PURE__ */ w(m, {
+										size: 14,
+										"aria-hidden": "true"
+									})
+								]
 							})]
-						}, t))
+						})
 					]
 				})
 			}),
-			P && /* @__PURE__ */ x("div", {
+			V && /* @__PURE__ */ w("div", {
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-label": o("bigconsole.insights.refine.ariaLabel", "Refine generation"),
-				onClick: () => F(null),
+				"aria-label": l("bigconsole.insights.refine.ariaLabel", "Refine generation"),
+				onClick: () => H(null),
 				style: {
 					position: "fixed",
 					inset: 0,
@@ -956,90 +1065,128 @@ var E = o(function() {
 					justifyContent: "center",
 					padding: "var(--space-pagePadding)"
 				},
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ T("div", {
 					onClick: (e) => e.stopPropagation(),
 					style: {
+						display: "flex",
+						flexDirection: "column",
+						minHeight: 0,
 						width: "min(520px, 100%)",
+						maxHeight: "calc(100dvh - 2 * var(--space-pagePadding))",
 						backgroundColor: "var(--color-bg-surface)",
 						borderRadius: "var(--radius-card)",
-						border: "1px solid var(--color-border)",
-						boxShadow: "var(--shadow-elevation-3)",
-						padding: "var(--space-cardPadding)"
+						border: "1px solid var(--color-border-default)",
+						boxShadow: "var(--shadow-elevation-3)"
 					},
 					children: [
-						/* @__PURE__ */ x("h3", {
+						/* @__PURE__ */ T("div", {
 							style: {
-								fontSize: "var(--font-size-heading-h4)",
-								fontWeight: "var(--font-weight-semibold)",
-								marginBottom: 4
+								padding: "var(--space-cardPadding)",
+								borderBottom: "1px solid var(--color-border-subtle)"
 							},
-							children: o("bigconsole.insights.refine.heading", "Refine dashboard")
+							children: [/* @__PURE__ */ w("h2", {
+								style: {
+									fontSize: "var(--font-size-heading-h4)",
+									fontWeight: "var(--font-weight-semibold)",
+									color: "var(--color-text-primary)"
+								},
+								children: l("bigconsole.insights.refine.heading", "Refine dashboard")
+							}), /* @__PURE__ */ w("p", {
+								style: {
+									fontSize: "var(--font-size-body-sm)",
+									color: "var(--color-text-secondary)",
+									marginTop: 2
+								},
+								children: l("bigconsole.insights.refine.subtitle", "Describe what to change — the AI keeps the existing spec and applies your instructions.")
+							})]
 						}),
-						/* @__PURE__ */ x("p", {
+						/* @__PURE__ */ T("div", {
 							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-muted)",
-								marginBottom: "var(--space-controlGap)"
+								flex: "1 1 auto",
+								minHeight: 0,
+								overflowY: "auto",
+								padding: "var(--space-cardPadding)",
+								display: "flex",
+								flexDirection: "column",
+								gap: "var(--space-controlGap)"
 							},
-							children: o("bigconsole.insights.refine.subtitle", "Describe what to change — the AI keeps the existing spec and applies your instructions.")
-						}),
-						/* @__PURE__ */ x("textarea", {
-							value: I,
-							onChange: (e) => L(e.target.value),
-							maxLength: 2e3,
-							rows: 4,
-							placeholder: o("bigconsole.insights.refine.placeholder", "e.g., Add a revenue-by-region map and remove the duplicate KPI cards"),
-							style: {
-								width: "100%",
-								resize: "vertical",
-								padding: "var(--space-inputPadding, 8px)",
-								borderRadius: "var(--radius-input)",
-								border: "1px solid var(--color-border)",
-								backgroundColor: "var(--color-bg-canvas)",
-								color: "var(--color-text-primary)",
-								fontSize: "var(--font-size-body-sm)",
-								marginBottom: "var(--space-controlGap)"
-							}
+							children: [/* @__PURE__ */ w(n, {
+								emphasis: "muted",
+								padding: "compact",
+								headingLevel: 3,
+								title: V.generatedSpec?.name || "Current proposal",
+								description: V.prompt.length > 240 ? `${V.prompt.slice(0, 240)}…` : V.prompt,
+								icon: /* @__PURE__ */ w(v, { className: "h-icon-sm w-icon-sm" })
+							}), /* @__PURE__ */ T("div", {
+								style: {
+									display: "flex",
+									flexDirection: "column",
+									gap: "var(--space-controlGap)"
+								},
+								children: [/* @__PURE__ */ w("label", {
+									htmlFor: "refine-input",
+									style: {
+										display: "block",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-medium)",
+										color: "var(--color-text-primary)"
+									},
+									children: "What should change?"
+								}), /* @__PURE__ */ w("textarea", {
+									id: "refine-input",
+									value: U,
+									onChange: (e) => W(e.target.value),
+									maxLength: 2e3,
+									rows: 4,
+									placeholder: l("bigconsole.insights.refine.placeholder", "e.g., Add a revenue-by-region map and remove the duplicate KPI cards"),
+									className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+									style: {
+										width: "100%",
+										maxWidth: "100%",
+										resize: "vertical",
+										padding: "var(--space-controlGap) var(--space-formGap)",
+										borderRadius: "var(--radius-input)",
+										border: "1px solid var(--color-border-default)",
+										backgroundColor: "var(--color-bg-canvas)",
+										color: "var(--color-text-primary)",
+										fontSize: "var(--font-size-body-md)"
+									}
+								})]
+							})]
 						}),
-						/* @__PURE__ */ S("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
 								display: "flex",
 								justifyContent: "flex-end",
-								gap: 8,
-								flexWrap: "wrap"
+								flexWrap: "wrap",
+								gap: "var(--space-controlGap)",
+								padding: "var(--space-cardPadding)",
+								borderTop: "1px solid var(--color-border-subtle)"
 							},
-							children: [/* @__PURE__ */ x("button", {
-								onClick: () => F(null),
+							children: [/* @__PURE__ */ w("button", {
+								type: "button",
+								onClick: () => H(null),
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+								style: O,
+								children: l("bigconsole.insights.actions.cancel", "Cancel")
+							}), /* @__PURE__ */ T("button", {
+								type: "button",
+								onClick: () => void Le(),
+								disabled: !U.trim() || F.has(V.id),
+								className: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 								style: {
-									padding: "8px 16px",
-									borderRadius: "var(--radius-button)",
-									border: "1px solid var(--color-border)",
-									backgroundColor: "transparent",
-									color: "var(--color-text-primary)",
-									fontSize: "var(--font-size-body-sm)",
-									cursor: "pointer"
-								},
-								children: o("bigconsole.insights.actions.cancel", "Cancel")
-							}), /* @__PURE__ */ S("button", {
-								onClick: () => void Te(),
-								disabled: !I.trim() || A.has(P.id),
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: 6,
-									padding: "8px 16px",
-									borderRadius: "var(--radius-button)",
-									border: "none",
-									backgroundColor: "var(--color-action-primary-bg)",
-									color: "var(--color-action-primary-text)",
-									fontSize: "var(--font-size-body-sm)",
-									cursor: !I.trim() || A.has(P.id) ? "not-allowed" : "pointer",
-									opacity: I.trim() ? 1 : .6
+									...k,
+									cursor: !U.trim() || F.has(V.id) ? "not-allowed" : "pointer",
+									opacity: U.trim() ? 1 : .6
 								},
-								children: [A.has(P.id) ? /* @__PURE__ */ x(m, {
+								children: [F.has(V.id) ? /* @__PURE__ */ w(_, {
+									size: 14,
+									className: "animate-spin",
+									"aria-hidden": "true"
+								}) : /* @__PURE__ */ w(y, {
 									size: 14,
-									className: "animate-spin"
-								}) : /* @__PURE__ */ x(g, { size: 14 }), o("bigconsole.insights.refine.apply", "Apply refinement")]
+									"aria-hidden": "true"
+								}), l("bigconsole.insights.refine.apply", "Apply refinement")]
 							})]
 						})
 					]
@@ -1049,6 +1196,6 @@ var E = o(function() {
 	});
 });
 //#endregion
-export { E as InsightsPage, E as default };
+export { R as InsightsPage, R as default };
 
 //# sourceMappingURL=InsightsPage.js.map