@burdenoff/microfe-bigconsole 2026.610.1 → 2026.612.2

package/dist/bigconsole/pages/InsightsPage.js

@@ -2,12 +2,12 @@ import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
 import { isNative as t, nativeImpact as n, nativeNotify as r } from "../../utils/nativeBridge.js";
 import { memo as i, useCallback as a, useEffect as o, useState as s } from "react";
-import { AlertCircle as c, ArrowRight as l, CheckCircle as u, Clock as d, Loader2 as f, Sparkles as p, Trash2 as m, XCircle as h } from "lucide-react";
-import { gql as g } from "@apollo/client";
-import { useMutation as _, useQuery as v } from "@apollo/client/react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { AlertCircle as c, ArrowRight as l, Ban as ee, CheckCircle as u, Clock as d, Eye as f, Loader2 as p, RefreshCw as m, Sparkles as h, Trash2 as te, Wand2 as g, X as ne, XCircle as _ } from "lucide-react";
+import { gql as v } from "@apollo/client";
+import { useMutation as y, useQuery as b } from "@apollo/client/react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/bigconsole/pages/InsightsPage.tsx
-var x = g`
+var C = v`
   query ListPromptGenerations($status: PromptGenerationStatus, $first: Int) {
     listPromptGenerations(status: $status, first: $first) {
       edges {
@@ -36,7 +36,7 @@ var x = g`
       totalCount
     }
   }
-`, S = g`
+`, re = v`
   query GetPromptSuggestions($category: String, $limit: Int) {
     getPromptSuggestions(category: $category, limit: $limit) {
       id
@@ -47,7 +47,7 @@ var x = g`
       tags
     }
   }
-`, C = g`
+`, ie = v`
   mutation GenerateDashboardFromPrompt($input: GenerateDashboardFromPromptInput!) {
     generateDashboardFromPrompt(input: $input) {
       id
@@ -55,42 +55,65 @@ var x = g`
       prompt
     }
   }
-`, w = g`
+`, w = v`
   mutation CreateDashboardFromGeneration($input: CreateDashboardFromGenerationInput!) {
     createDashboardFromGeneration(input: $input) {
       id
     }
   }
-`, T = g`
+`, T = v`
   mutation DeletePromptGeneration($generationId: ID!) {
     deletePromptGeneration(generationId: $generationId)
   }
-`, E = [
+`, ae = v`
+  mutation CancelPromptGeneration($generationId: ID!) {
+    cancelPromptGeneration(generationId: $generationId) {
+      id
+      status
+    }
+  }
+`, E = v`
+  mutation RegenerateDashboard($input: RegenerateDashboardInput!) {
+    regenerateDashboard(input: $input) {
+      id
+      status
+      prompt
+    }
+  }
+`, oe = v`
+  mutation RefineGeneratedDashboard($input: RefineGeneratedDashboardInput!) {
+    refineGeneratedDashboard(input: $input) {
+      id
+      status
+      prompt
+    }
+  }
+`, D = [
 	"PENDING",
 	"PROCESSING",
 	"GENERATING"
 ];
-function D(e) {
+function se(e) {
 	switch (e) {
-		case "COMPLETED": return /* @__PURE__ */ y(u, {
+		case "COMPLETED": return /* @__PURE__ */ x(u, {
 			size: 16,
 			className: "text-green-500"
 		});
-		case "FAILED": return /* @__PURE__ */ y(h, {
+		case "FAILED": return /* @__PURE__ */ x(_, {
 			size: 16,
 			className: "text-red-500"
 		});
-		case "CANCELLED": return /* @__PURE__ */ y(h, {
+		case "CANCELLED": return /* @__PURE__ */ x(_, {
 			size: 16,
 			className: "text-gray-400"
 		});
 		case "PENDING":
 		case "PROCESSING":
-		case "GENERATING": return /* @__PURE__ */ y(f, {
+		case "GENERATING": return /* @__PURE__ */ x(p, {
 			size: 16,
 			className: "text-blue-500 animate-spin"
 		});
-		default: return /* @__PURE__ */ y(d, {
+		default: return /* @__PURE__ */ x(d, {
 			size: 16,
 			className: "text-gray-400"
 		});
@@ -108,483 +131,848 @@ function O(e) {
 	}
 }
 var k = i(function() {
-	let i = e(), [u, d] = s(""), [h, g] = s(!1), [k, A] = s(null), { data: j, loading: M, refetch: N } = v(x, {
+	let i = e(), [u, d] = s(""), [_, v] = s(!1), [k, A] = s(null), [j, M] = s(() => /* @__PURE__ */ new Set()), [N, P] = s(null), [F, I] = s(null), [L, R] = s(""), z = a((e) => {
+		M((t) => new Set(t).add(e));
+	}, []), B = a((e) => {
+		M((t) => {
+			let n = new Set(t);
+			return n.delete(e), n;
+		});
+	}, []), { data: V, loading: H, refetch: U } = b(C, {
 		variables: { first: 20 },
 		fetchPolicy: "cache-and-network"
-	}), { data: P } = v(S, { variables: { limit: 6 } }), [F] = _(C), [I] = _(w), [L] = _(T), R = j?.listPromptGenerations?.edges?.map((e) => e.node) || [], z = P?.getPromptSuggestions || [];
+	}), { data: W } = b(re, { variables: { limit: 6 } }), [G] = y(ie), [K] = y(w), [q] = y(T), [J] = y(ae), [Y] = y(E), [X] = y(oe), Z = V?.listPromptGenerations?.edges?.map((e) => e.node) || [], Q = W?.getPromptSuggestions || [];
 	o(() => {
-		if (!R.some((e) => E.includes(e.status))) return;
+		if (!Z.some((e) => D.includes(e.status))) return;
 		let e = setInterval(() => {
-			N();
+			U();
 		}, 3e3);
 		return () => clearInterval(e);
-	}, [R, N]);
-	let B = a(async () => {
-		if (!(!u.trim() || h)) {
+	}, [Z, U]), o(() => {
+		if (!N && !F) return;
+		let e = (e) => {
+			e.key === "Escape" && (P(null), I(null));
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [N, F]);
+	let $ = a(async () => {
+		if (!(!u.trim() || _)) {
 			if (u.length > 2e3) {
 				A("Prompt is too long (max 2000 characters).");
 				return;
 			}
-			A(null), g(!0);
+			A(null), v(!0);
 			try {
-				await F({ variables: { input: {
+				await G({ variables: { input: {
 					prompt: u.trim(),
 					styleType: "MODERN",
 					layoutType: "GRID",
 					maxWidgets: 8
-				} } }), d(""), N();
+				} } }), d(""), U();
 			} catch (e) {
 				A(e instanceof Error ? e.message : "Failed to generate dashboard");
 			} finally {
-				g(!1);
+				v(!1);
 			}
 		}
 	}, [
 		u,
-		h,
-		F,
-		N
-	]), V = a(async (e) => {
+		_,
+		G,
+		U
+	]), ce = a(async (e) => {
 		A(null);
 		try {
-			let t = (await I({ variables: { input: { generationId: e } } })).data?.createDashboardFromGeneration?.id;
+			let t = (await K({ variables: { input: { generationId: e } } })).data?.createDashboardFromGeneration?.id;
 			t && i(`/dashboards/${t}`);
 		} catch (e) {
 			A(e instanceof Error ? e.message : "Failed to create dashboard");
 		}
-	}, [I, i]), H = a(async (e) => {
+	}, [K, i]), le = a(async (e) => {
 		A(null);
 		try {
-			await L({ variables: { generationId: e } }), t() && r("success"), N();
+			await q({ variables: { generationId: e } }), t() && r("success"), U();
 		} catch (e) {
 			A(e instanceof Error ? e.message : "Failed to delete generation"), t() && r("error");
 		}
-	}, [L, N]), U = a((e) => {
+	}, [q, U]), ue = a(async (e) => {
+		A(null), z(e);
+		try {
+			await J({ variables: { generationId: e } }), U();
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Failed to cancel generation");
+		} finally {
+			B(e);
+		}
+	}, [J, U]), de = a(async (e) => {
+		A(null), z(e);
+		try {
+			await Y({ variables: { input: { generationId: e } } }), U();
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Failed to regenerate dashboard");
+		} finally {
+			B(e);
+		}
+	}, [Y, U]), fe = a(async () => {
+		if (!F || !L.trim()) return;
+		let e = F.id;
+		A(null), z(e);
+		try {
+			await X({ variables: { input: {
+				generationId: e,
+				refinementPrompt: L.trim()
+			} } }), I(null), R(""), U();
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Failed to refine generation");
+		} finally {
+			B(e);
+		}
+	}, [
+		F,
+		L,
+		X,
+		U
+	]), pe = a((e) => {
 		d(e);
 	}, []);
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ S("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
-		children: /* @__PURE__ */ b("div", {
-			style: {
-				padding: "var(--space-pagePadding)",
-				maxWidth: 960,
-				margin: "0 auto"
-			},
-			children: [
-				/* @__PURE__ */ b("div", {
-					style: { marginBottom: "var(--space-sectionGap)" },
-					children: [/* @__PURE__ */ b("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: "var(--space-iconGap)"
-						},
-						children: [/* @__PURE__ */ y(p, {
-							size: 24,
-							style: { color: "var(--color-action-primary-bg)" }
-						}), /* @__PURE__ */ y("h1", {
+		children: [
+			/* @__PURE__ */ S("div", {
+				style: {
+					padding: "var(--space-pagePadding)",
+					maxWidth: 960,
+					margin: "0 auto"
+				},
+				children: [
+					/* @__PURE__ */ S("div", {
+						style: { marginBottom: "var(--space-sectionGap)" },
+						children: [/* @__PURE__ */ S("div", {
 							style: {
-								fontSize: "var(--font-size-heading-h4)",
-								fontWeight: "var(--font-weight-bold)",
-								color: "var(--color-text-primary)"
-							},
-							children: "AI Insights"
-						})]
-					}), /* @__PURE__ */ y("p", {
-						style: {
-							fontSize: "var(--font-size-body-md)",
-							color: "var(--color-text-secondary)",
-							marginTop: 4
-						},
-						children: "Generate dashboards from natural language prompts"
-					})]
-				}),
-				/* @__PURE__ */ b("div", {
-					style: {
-						backgroundColor: "var(--color-bg-surface)",
-						border: "1px solid var(--color-border)",
-						borderRadius: "var(--radius-card)",
-						padding: "var(--space-cardPadding)",
-						marginBottom: "var(--space-sectionGap)"
-					},
-					children: [
-						/* @__PURE__ */ y("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
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)"
 							},
-							children: "Describe the dashboard you want to create"
-						}),
-						/* @__PURE__ */ y("textarea", {
-							id: "prompt-input",
-							value: u,
-							onChange: (e) => d(e.target.value),
-							placeholder: "e.g., Create a sales dashboard showing revenue trends, top products, and regional performance",
-							rows: 3,
-							maxLength: 2e3,
+							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: "AI Insights"
+							})]
+						}), /* @__PURE__ */ x("p", {
 							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) && B();
-							}
-						}),
-						/* @__PURE__ */ b("div", {
-							style: {
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-								marginTop: 8,
-								flexWrap: "wrap",
-								gap: 8
+								color: "var(--color-text-secondary)",
+								marginTop: 4
 							},
-							children: [/* @__PURE__ */ y("span", {
+							children: "Generate dashboards from natural language prompts"
+						})]
+					}),
+					/* @__PURE__ */ S("div", {
+						style: {
+							backgroundColor: "var(--color-bg-surface)",
+							border: "1px solid var(--color-border)",
+							borderRadius: "var(--radius-card)",
+							padding: "var(--space-cardPadding)",
+							marginBottom: "var(--space-sectionGap)"
+						},
+						children: [
+							/* @__PURE__ */ x("label", {
+								htmlFor: "prompt-input",
 								style: {
+									display: "block",
 									fontSize: "var(--font-size-body-sm)",
-									color: "var(--color-text-muted)"
+									fontWeight: "var(--font-weight-medium)",
+									color: "var(--color-text-primary)",
+									marginBottom: 8
+								},
+								children: "Describe the dashboard you want to create"
+							}),
+							/* @__PURE__ */ x("textarea", {
+								id: "prompt-input",
+								value: u,
+								onChange: (e) => d(e.target.value),
+								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"
 								},
-								children: "Press Ctrl+Enter to generate"
-							}), /* @__PURE__ */ b("button", {
-								onClick: B,
-								disabled: !u.trim() || h,
+								onKeyDown: (e) => {
+									e.key === "Enter" && (e.metaKey || e.ctrlKey) && $();
+								}
+							}),
+							/* @__PURE__ */ S("div", {
 								style: {
 									display: "flex",
+									justifyContent: "space-between",
 									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: !u.trim() || h ? "not-allowed" : "pointer",
-									opacity: !u.trim() || h ? .5 : 1
+									marginTop: 8,
+									flexWrap: "wrap",
+									gap: 8
 								},
-								children: [h ? /* @__PURE__ */ y(f, {
-									size: 16,
-									className: "animate-spin"
-								}) : /* @__PURE__ */ y(p, { size: 16 }), "Generate Dashboard"]
-							})]
-						})
-					]
-				}),
-				k && /* @__PURE__ */ b("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)"
-					},
-					children: [/* @__PURE__ */ b("div", {
+								children: [/* @__PURE__ */ x("span", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)"
+									},
+									children: "Press Ctrl+Enter to generate"
+								}), /* @__PURE__ */ S("button", {
+									onClick: $,
+									disabled: !u.trim() || _,
+									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: !u.trim() || _ ? "not-allowed" : "pointer",
+										opacity: !u.trim() || _ ? .5 : 1
+									},
+									children: [_ ? /* @__PURE__ */ x(p, {
+										size: 16,
+										className: "animate-spin"
+									}) : /* @__PURE__ */ x(h, { size: 16 }), "Generate Dashboard"]
+								})]
+							})
+						]
+					}),
+					k && /* @__PURE__ */ S("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
-							gap: 8
-						},
-						children: [/* @__PURE__ */ y(c, { size: 16 }), k]
-					}), /* @__PURE__ */ y("button", {
-						onClick: () => A(null),
-						style: {
-							background: "none",
-							border: "none",
+							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)",
-							cursor: "pointer",
-							fontSize: "var(--font-size-body-md)",
-							padding: "0 4px"
+							fontSize: "var(--font-size-body-sm)"
 						},
-						"aria-label": "Dismiss error",
-						children: "×"
-					})]
-				}),
-				z.length > 0 && /* @__PURE__ */ b("div", {
-					style: { marginBottom: "var(--space-sectionGap)" },
-					children: [/* @__PURE__ */ y("h2", {
+						children: [/* @__PURE__ */ S("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ x(c, { size: 16 }), k]
+						}), /* @__PURE__ */ x("button", {
+							onClick: () => A(null),
+							style: {
+								background: "none",
+								border: "none",
+								color: "var(--color-status-error-text)",
+								cursor: "pointer",
+								fontSize: "var(--font-size-body-md)",
+								padding: "0 4px"
+							},
+							"aria-label": "Dismiss error",
+							children: "×"
+						})]
+					}),
+					Q.length > 0 && /* @__PURE__ */ S("div", {
+						style: { marginBottom: "var(--space-sectionGap)" },
+						children: [/* @__PURE__ */ x("h2", {
+							style: {
+								fontSize: "var(--font-size-body-md)",
+								fontWeight: "var(--font-weight-semibold)",
+								color: "var(--color-text-primary)",
+								marginBottom: 12
+							},
+							children: "Suggestions"
+						}), /* @__PURE__ */ x("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "repeat(auto-fill, minmax(min(280px, 100%), 1fr))",
+								gap: 12
+							},
+							children: Q.map((e) => /* @__PURE__ */ S("button", {
+								onClick: () => pe(e.prompt),
+								style: {
+									textAlign: "left",
+									padding: 12,
+									borderRadius: "var(--radius-card)",
+									border: "1px solid var(--color-border)",
+									backgroundColor: "var(--color-bg-surface)",
+									cursor: "pointer"
+								},
+								children: [
+									/* @__PURE__ */ x("div", {
+										style: {
+											fontWeight: "var(--font-weight-medium)",
+											fontSize: "var(--font-size-body-sm)",
+											color: "var(--color-text-primary)",
+											marginBottom: 4
+										},
+										children: e.title
+									}),
+									/* @__PURE__ */ x("div", {
+										style: {
+											fontSize: "var(--font-size-body-sm)",
+											color: "var(--color-text-secondary)",
+											lineHeight: 1.4
+										},
+										children: e.exampleDescription || e.prompt.slice(0, 80)
+									}),
+									/* @__PURE__ */ x("div", {
+										style: {
+											display: "flex",
+											gap: 4,
+											marginTop: 8,
+											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
+										}, 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: "Suggestions"
-					}), /* @__PURE__ */ y("div", {
+						children: "Recent Generations"
+					}), H && Z.length === 0 ? /* @__PURE__ */ S("div", {
+						style: {
+							textAlign: "center",
+							padding: 40,
+							color: "var(--color-text-muted)"
+						},
+						children: [/* @__PURE__ */ x(p, {
+							size: 24,
+							className: "animate-spin",
+							style: { margin: "0 auto 8px" }
+						}), /* @__PURE__ */ x("p", { children: "Loading generations..." })]
+					}) : Z.length === 0 ? /* @__PURE__ */ S("div", {
+						style: {
+							textAlign: "center",
+							padding: 40,
+							backgroundColor: "var(--color-bg-surface)",
+							border: "1px solid var(--color-border)",
+							borderRadius: "var(--radius-card)"
+						},
+						children: [
+							/* @__PURE__ */ x(h, {
+								size: 32,
+								style: {
+									color: "var(--color-text-muted)",
+									margin: "0 auto 8px"
+								}
+							}),
+							/* @__PURE__ */ x("p", {
+								style: {
+									color: "var(--color-text-secondary)",
+									fontWeight: "var(--font-weight-medium)"
+								},
+								children: "No generations yet"
+							}),
+							/* @__PURE__ */ x("p", {
+								style: {
+									color: "var(--color-text-muted)",
+									fontSize: "var(--font-size-body-sm)",
+									marginTop: 4
+								},
+								children: "Describe a dashboard above to get started"
+							})
+						]
+					}) : /* @__PURE__ */ x("div", {
 						style: {
-							display: "grid",
-							gridTemplateColumns: "repeat(auto-fill, minmax(min(280px, 100%), 1fr))",
+							display: "flex",
+							flexDirection: "column",
 							gap: 12
 						},
-						children: z.map((e) => /* @__PURE__ */ b("button", {
-							onClick: () => U(e.prompt),
+						children: Z.map((e) => /* @__PURE__ */ x("div", {
 							style: {
-								textAlign: "left",
-								padding: 12,
+								padding: 16,
 								borderRadius: "var(--radius-card)",
 								border: "1px solid var(--color-border)",
-								backgroundColor: "var(--color-bg-surface)",
-								cursor: "pointer"
+								backgroundColor: "var(--color-bg-surface)"
 							},
-							children: [
-								/* @__PURE__ */ y("div", {
-									style: {
-										fontWeight: "var(--font-weight-medium)",
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-primary)",
-										marginBottom: 4
-									},
-									children: e.title
-								}),
-								/* @__PURE__ */ y("div", {
+							children: /* @__PURE__ */ S("div", {
+								style: {
+									display: "flex",
+									justifyContent: "space-between",
+									alignItems: "flex-start",
+									flexWrap: "wrap",
+									gap: 8
+								},
+								children: [/* @__PURE__ */ S("div", {
 									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-secondary)",
-										lineHeight: 1.4
+										flex: "1 1 200px",
+										minWidth: 0
 									},
-									children: e.exampleDescription || e.prompt.slice(0, 80)
-								}),
-								/* @__PURE__ */ y("div", {
+									children: [
+										/* @__PURE__ */ S("div", {
+											style: {
+												display: "flex",
+												alignItems: "center",
+												gap: 8,
+												marginBottom: 4,
+												minWidth: 0
+											},
+											children: [
+												se(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 || "Generating..."
+												}),
+												/* @__PURE__ */ x("span", {
+													style: {
+														fontSize: 11,
+														color: "var(--color-text-muted)",
+														padding: "2px 6px",
+														borderRadius: 4,
+														backgroundColor: "var(--color-bg-sunken)"
+													},
+													children: O(e.status)
+												})
+											]
+										}),
+										/* @__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.generatedSpec && /* @__PURE__ */ S("div", {
+											style: {
+												fontSize: 11,
+												color: "var(--color-text-muted)"
+											},
+											children: [
+												e.generatedSpec.pages.reduce((e, t) => e + t.widgets.length, 0),
+												" widgets across",
+												" ",
+												e.generatedSpec.pages.length,
+												" page(s) ·",
+												" ",
+												Math.round(e.generatedSpec.overallConfidence * 100),
+												"% confidence"
+											]
+										}),
+										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(c, { size: 14 }), e.errorMessage]
+										})
+									]
+								}), /* @__PURE__ */ S("div", {
 									style: {
 										display: "flex",
-										gap: 4,
-										marginTop: 8,
+										gap: 8,
 										flexWrap: "wrap"
 									},
-									children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ y("span", {
-										style: {
-											fontSize: 11,
-											padding: "2px 6px",
-											borderRadius: 4,
-											backgroundColor: "var(--color-bg-sunken)",
-											color: "var(--color-text-muted)"
-										},
-										children: e
-									}, e))
-								})
-							]
+									children: [
+										D.includes(e.status) && /* @__PURE__ */ S("button", {
+											onClick: () => {
+												n("medium"), ue(e.id);
+											},
+											disabled: j.has(e.id),
+											title: "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: j.has(e.id) ? "wait" : "pointer"
+											},
+											children: [/* @__PURE__ */ x(ee, { size: 14 }), " Cancel"]
+										}),
+										e.status === "COMPLETED" && e.generatedSpec && /* @__PURE__ */ S("button", {
+											onClick: () => P(e),
+											title: "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(f, { size: 14 }), " Preview"]
+										}),
+										e.status === "COMPLETED" && e.generatedSpec && /* @__PURE__ */ S("button", {
+											onClick: () => {
+												I(e), R("");
+											},
+											title: "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 }), " Refine"]
+										}),
+										(e.status === "COMPLETED" || e.status === "FAILED" || e.status === "CANCELLED") && /* @__PURE__ */ S("button", {
+											onClick: () => {
+												n("medium"), de(e.id);
+											},
+											disabled: j.has(e.id),
+											title: "Regenerate with the same prompt",
+											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: j.has(e.id) ? "wait" : "pointer"
+											},
+											children: [/* @__PURE__ */ x(m, {
+												size: 14,
+												className: j.has(e.id) ? "animate-spin" : ""
+											}), " Regenerate"]
+										}),
+										e.status === "COMPLETED" && !e.dashboardId && /* @__PURE__ */ S("button", {
+											onClick: () => ce(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: ["Create ", /* @__PURE__ */ x(l, { size: 14 })]
+										}),
+										e.dashboardId && /* @__PURE__ */ S("button", {
+											onClick: () => i(`/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: ["View Dashboard ", /* @__PURE__ */ x(l, { size: 14 })]
+										}),
+										/* @__PURE__ */ x("button", {
+											onClick: () => {
+												n("medium"), le(e.id);
+											},
+											title: "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(te, { size: 14 })
+										})
+									]
+								})]
+							})
 						}, e.id))
-					})]
-				}),
-				/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
-					style: {
-						fontSize: "var(--font-size-body-md)",
-						fontWeight: "var(--font-weight-semibold)",
-						color: "var(--color-text-primary)",
-						marginBottom: 12
-					},
-					children: "Recent Generations"
-				}), M && R.length === 0 ? /* @__PURE__ */ b("div", {
+					})] })
+				]
+			}),
+			N?.generatedSpec && /* @__PURE__ */ x("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": "Generation preview",
+				onClick: () => P(null),
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 1e3,
+					backgroundColor: "var(--color-overlay-scrim)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					padding: "var(--space-pagePadding)"
+				},
+				children: /* @__PURE__ */ S("div", {
+					onClick: (e) => e.stopPropagation(),
 					style: {
-						textAlign: "center",
-						padding: 40,
-						color: "var(--color-text-muted)"
-					},
-					children: [/* @__PURE__ */ y(f, {
-						size: 24,
-						className: "animate-spin",
-						style: { margin: "0 auto 8px" }
-					}), /* @__PURE__ */ y("p", { children: "Loading generations..." })]
-				}) : R.length === 0 ? /* @__PURE__ */ b("div", {
-					style: {
-						textAlign: "center",
-						padding: 40,
+						width: "min(640px, 100%)",
+						maxHeight: "80vh",
+						overflowY: "auto",
 						backgroundColor: "var(--color-bg-surface)",
+						borderRadius: "var(--radius-card)",
 						border: "1px solid var(--color-border)",
-						borderRadius: "var(--radius-card)"
+						boxShadow: "var(--shadow-elevation-3)",
+						padding: "var(--space-cardPadding)"
 					},
 					children: [
-						/* @__PURE__ */ y(p, {
-							size: 32,
-							style: {
-								color: "var(--color-text-muted)",
-								margin: "0 auto 8px"
-							}
-						}),
-						/* @__PURE__ */ y("p", {
+						/* @__PURE__ */ S("div", {
 							style: {
-								color: "var(--color-text-secondary)",
-								fontWeight: "var(--font-weight-medium)"
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "flex-start",
+								gap: 8,
+								marginBottom: "var(--space-controlGap)"
 							},
-							children: "No generations yet"
+							children: [/* @__PURE__ */ S("div", {
+								style: { minWidth: 0 },
+								children: [/* @__PURE__ */ x("h3", {
+									style: {
+										fontSize: "var(--font-size-heading-h4)",
+										fontWeight: "var(--font-weight-semibold)"
+									},
+									children: N.generatedSpec.name
+								}), N.generatedSpec.description && /* @__PURE__ */ x("p", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)",
+										marginTop: 2
+									},
+									children: N.generatedSpec.description
+								})]
+							}), /* @__PURE__ */ x("button", {
+								onClick: () => P(null),
+								"aria-label": "Close preview",
+								style: {
+									display: "flex",
+									padding: 4,
+									borderRadius: "var(--radius-button)",
+									border: "none",
+									backgroundColor: "transparent",
+									color: "var(--color-text-muted)",
+									cursor: "pointer"
+								},
+								children: /* @__PURE__ */ x(ne, { size: 18 })
+							})]
 						}),
-						/* @__PURE__ */ y("p", {
+						/* @__PURE__ */ S("div", {
 							style: {
+								fontSize: 11,
 								color: "var(--color-text-muted)",
-								fontSize: "var(--font-size-body-sm)",
-								marginTop: 4
+								marginBottom: "var(--space-controlGap)"
 							},
-							children: "Describe a dashboard above to get started"
-						})
+							children: [
+								N.generatedSpec.pages.reduce((e, t) => e + t.widgets.length, 0),
+								" widgets across",
+								" ",
+								N.generatedSpec.pages.length,
+								" page(s) ·",
+								" ",
+								Math.round(N.generatedSpec.overallConfidence * 100),
+								"% confidence"
+							]
+						}),
+						N.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", {
+								style: {
+									display: "flex",
+									flexWrap: "wrap",
+									gap: 6
+								},
+								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: [
+										e.title,
+										" · ",
+										e.type
+									]
+								}, t))
+							})]
+						}, t))
 					]
-				}) : /* @__PURE__ */ y("div", {
+				})
+			}),
+			F && /* @__PURE__ */ x("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": "Refine generation",
+				onClick: () => I(null),
+				style: {
+					position: "fixed",
+					inset: 0,
+					zIndex: 1e3,
+					backgroundColor: "var(--color-overlay-scrim)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					padding: "var(--space-pagePadding)"
+				},
+				children: /* @__PURE__ */ S("div", {
+					onClick: (e) => e.stopPropagation(),
 					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 12
+						width: "min(520px, 100%)",
+						backgroundColor: "var(--color-bg-surface)",
+						borderRadius: "var(--radius-card)",
+						border: "1px solid var(--color-border)",
+						boxShadow: "var(--shadow-elevation-3)",
+						padding: "var(--space-cardPadding)"
 					},
-					children: R.map((e) => /* @__PURE__ */ y("div", {
-						style: {
-							padding: 16,
-							borderRadius: "var(--radius-card)",
-							border: "1px solid var(--color-border)",
-							backgroundColor: "var(--color-bg-surface)"
-						},
-						children: /* @__PURE__ */ b("div", {
+					children: [
+						/* @__PURE__ */ x("h3", {
+							style: {
+								fontSize: "var(--font-size-heading-h4)",
+								fontWeight: "var(--font-weight-semibold)",
+								marginBottom: 4
+							},
+							children: "Refine dashboard"
+						}),
+						/* @__PURE__ */ x("p", {
+							style: {
+								fontSize: "var(--font-size-body-sm)",
+								color: "var(--color-text-muted)",
+								marginBottom: "var(--space-controlGap)"
+							},
+							children: "Describe what to change — the AI keeps the existing spec and applies your instructions."
+						}),
+						/* @__PURE__ */ x("textarea", {
+							value: L,
+							onChange: (e) => R(e.target.value),
+							maxLength: 2e3,
+							rows: 4,
+							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)"
+							}
+						}),
+						/* @__PURE__ */ S("div", {
 							style: {
 								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "flex-start"
+								justifyContent: "flex-end",
+								gap: 8,
+								flexWrap: "wrap"
 							},
-							children: [/* @__PURE__ */ b("div", {
-								style: { flex: 1 },
-								children: [
-									/* @__PURE__ */ b("div", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: 8,
-											marginBottom: 4
-										},
-										children: [
-											D(e.status),
-											/* @__PURE__ */ y("span", {
-												style: {
-													fontSize: "var(--font-size-body-sm)",
-													fontWeight: "var(--font-weight-medium)",
-													color: "var(--color-text-primary)"
-												},
-												children: e.generatedSpec?.name || "Generating..."
-											}),
-											/* @__PURE__ */ y("span", {
-												style: {
-													fontSize: 11,
-													color: "var(--color-text-muted)",
-													padding: "2px 6px",
-													borderRadius: 4,
-													backgroundColor: "var(--color-bg-sunken)"
-												},
-												children: O(e.status)
-											})
-										]
-									}),
-									/* @__PURE__ */ y("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.generatedSpec && /* @__PURE__ */ b("div", {
-										style: {
-											fontSize: 11,
-											color: "var(--color-text-muted)"
-										},
-										children: [
-											e.generatedSpec.pages.reduce((e, t) => e + t.widgets.length, 0),
-											" widgets across",
-											" ",
-											e.generatedSpec.pages.length,
-											" page(s) ·",
-											" ",
-											Math.round(e.generatedSpec.overallConfidence * 100),
-											"% confidence"
-										]
-									}),
-									e.errorMessage && /* @__PURE__ */ b("div", {
-										style: {
-											display: "flex",
-											alignItems: "center",
-											gap: 4,
-											marginTop: 4,
-											fontSize: "var(--font-size-body-sm)",
-											color: "var(--color-status-error-text)"
-										},
-										children: [/* @__PURE__ */ y(c, { size: 14 }), e.errorMessage]
-									})
-								]
-							}), /* @__PURE__ */ b("div", {
+							children: [/* @__PURE__ */ x("button", {
+								onClick: () => I(null),
+								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: "Cancel"
+							}), /* @__PURE__ */ S("button", {
+								onClick: () => void fe(),
+								disabled: !L.trim() || j.has(F.id),
 								style: {
 									display: "flex",
-									gap: 8
+									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: !L.trim() || j.has(F.id) ? "not-allowed" : "pointer",
+									opacity: L.trim() ? 1 : .6
 								},
-								children: [
-									e.status === "COMPLETED" && !e.dashboardId && /* @__PURE__ */ b("button", {
-										onClick: () => V(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: ["Create ", /* @__PURE__ */ y(l, { size: 14 })]
-									}),
-									e.dashboardId && /* @__PURE__ */ b("button", {
-										onClick: () => i(`/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: ["View Dashboard ", /* @__PURE__ */ y(l, { size: 14 })]
-									}),
-									/* @__PURE__ */ y("button", {
-										onClick: () => {
-											n("medium"), H(e.id);
-										},
-										title: "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__ */ y(m, { size: 14 })
-									})
-								]
+								children: [j.has(F.id) ? /* @__PURE__ */ x(p, {
+									size: 14,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ x(g, { size: 14 }), "Apply refinement"]
 							})]
 						})
-					}, e.id))
-				})] })
-			]
-		})
+					]
+				})
+			})
+		]
 	});
 });
 //#endregion