@burdenoff/microfe-vibecontrols 2026.625.2 → 2026.625.3

package/dist/pages/OverviewPage.js

@@ -2,8 +2,8 @@ import { useListTargetsQuery as e } from "../generated/wspace-operations.js";
 import { useVibeControls as t, useVibeNavigate as n } from "../providers/VibeControlsProvider.js";
 import r from "../hooks/useCachedInitialData.js";
 import { PageHeader as i } from "../components/shared/PageHeader.js";
-import { LoadingState as ee } from "../components/shared/LoadingState.js";
-import { ErrorState as a } from "../components/shared/ErrorState.js";
+import { LoadingState as a } from "../components/shared/LoadingState.js";
+import { ErrorState as ee } from "../components/shared/ErrorState.js";
 import { Card as o } from "../components/shared/Card.js";
 import { StatCard as s } from "../components/shared/StatCard.js";
 import { AgentSetupBanner as c } from "../components/shared/AgentSetupBanner.js";
@@ -13,32 +13,32 @@ import { AgentCard as u } from "../components/agents/AgentCard.js";
 import "../components/agents/index.js";
 import { SessionCard as te } from "../components/sessions/SessionCard.js";
 import "../components/sessions/index.js";
-import { VibeCard as ne } from "../components/vibes/VibeCard.js";
+import { VibeCard as d } from "../components/vibes/VibeCard.js";
 import "../components/vibes/index.js";
-import { useCallback as re, useMemo as d } from "react";
-import { useI18n as f } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Activity as p, Bot as m, FileText as h, GitBranch as g, Play as _, RefreshCw as v, Server as y, Terminal as b, Zap as x } from "lucide-react";
-import { usePermissions as ie } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { EmphasisPanel as ae } from "@burdenoff/fe-libs/ui";
-import { MotionItem as w, MotionList as T, MotionPage as oe } from "@burdenoff/fe-libs/shared/motion";
+import { useCallback as f, useMemo as p } from "react";
+import { useI18n as ne } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Activity as m, Bot as h, FileText as re, GitBranch as ie, Play as g, RefreshCw as ae, Server as _, Terminal as v, Zap as y } from "lucide-react";
+import { usePermissions as b } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as oe, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { AuroraBackground as se, EmphasisPanel as ce, GradientText as C, IllustratedEmptyState as w } from "@burdenoff/fe-libs/ui";
+import { MotionItem as T, MotionList as E, MotionPage as D } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/OverviewPage.tsx
-function E() {
-	let E = n(), { t: D } = f(), { hasPermission: O, isLoading: k } = ie(), A = (e, t, n) => {
-		let r = D(e, n), i = r === e ? t : r;
+function O() {
+	let O = n(), { t: k } = ne(), { hasPermission: A, isLoading: j } = b(), M = (e, t, n) => {
+		let r = k(e, n), i = r === e ? t : r;
 		return n ? Object.entries(n).reduce((e, [t, n]) => e.replace(`{{${t}}}`, String(n)), i) : i;
-	}, { agents: j, vibes: M, sessions: N, loading: P, error: F, totals: I, refetch: L } = r(), { workspaceId: R } = t(), z = e({
+	}, { agents: N, vibes: P, sessions: F, loading: I, error: L, totals: R, refetch: z } = r(), { workspaceId: B } = t(), V = e({
 		variables: {
-			workspaceId: R || "",
+			workspaceId: B || "",
 			limit: 50
 		},
-		skip: !R,
+		skip: !B,
 		fetchPolicy: "cache-and-network"
-	}), B = z.refetch, V = re(() => {
-		L(), B();
-	}, [L, B]), H = z.data?.targets.items ?? [], U = z.data?.targets.total ?? 0, W = U > H.length, G = H.filter((e) => e.status === "connected" || e.status === "active").length;
-	F && console.error("[overview] failed to load initial workspace data", F);
-	let K = d(() => j.map((e) => ({
+	}), H = V.refetch, U = f(() => {
+		z(), H();
+	}, [z, H]), W = V.data?.targets.items ?? [], G = V.data?.targets.total ?? 0, le = G > W.length, ue = W.filter((e) => e.status === "connected" || e.status === "active").length;
+	L && console.error("[overview] failed to load initial workspace data", L);
+	let K = p(() => N.map((e) => ({
 		id: e.id,
 		workspaceId: "",
 		name: e.name,
@@ -58,7 +58,7 @@ function E() {
 		metadata: {},
 		createdAt: e.createdAt || "",
 		updatedAt: ""
-	})), [j]), q = d(() => M.map((e) => ({
+	})), [N]), q = p(() => P.map((e) => ({
 		id: e.id,
 		workspaceId: "",
 		name: e.name,
@@ -77,7 +77,7 @@ function E() {
 		updatedAt: "",
 		archivedAt: null,
 		agents: e.agents ?? []
-	})), [M]), J = d(() => N.map((e) => ({
+	})), [P]), J = p(() => F.map((e) => ({
 		id: e.id,
 		workspaceId: "",
 		agentId: e.agentId ?? null,
@@ -97,29 +97,29 @@ function E() {
 		updatedAt: "",
 		agent: void 0,
 		vibe: void 0
-	})), [N]), Y = K.filter((e) => e.isActive), X = J.filter((e) => e.status === "RUNNING"), Z = q.filter((e) => e.status === "ACTIVE"), Q = {
+	})), [F]), Y = K.filter((e) => e.isActive), X = J.filter((e) => e.status === "RUNNING"), Z = q.filter((e) => e.status === "ACTIVE"), Q = {
 		agents: {
-			total: I.agents,
+			total: R.agents,
 			active: Y.length,
 			offline: K.filter((e) => !e.isActive).length
 		},
 		vibes: {
-			total: I.vibes,
+			total: R.vibes,
 			active: Z.length,
 			archived: q.filter((e) => e.status === "ARCHIVED").length
 		},
 		sessions: {
-			total: I.sessions,
+			total: R.sessions,
 			running: X.length,
 			stopped: J.filter((e) => e.status === "STOPPED").length
 		}
-	}, $ = d(() => {
+	}, $ = p(() => {
 		let e = [];
 		return J.slice(0, 3).forEach((t) => {
 			e.push({
 				id: `session-${t.id}`,
 				type: "session_started",
-				title: t.status === "RUNNING" ? A("overviewPage.activity.sessionRunning", "Session Running") : A("overviewPage.activity.sessionStatus", "Session {{status}}", { status: t.status.toLowerCase() }),
+				title: t.status === "RUNNING" ? M("overviewPage.activity.sessionRunning", "Session Running") : M("overviewPage.activity.sessionStatus", "Session {{status}}", { status: t.status.toLowerCase() }),
 				description: `${t.name}`,
 				timestamp: t.createdAt,
 				color: t.status === "RUNNING" ? "green" : "blue"
@@ -128,41 +128,41 @@ function E() {
 			e.push({
 				id: `agent-${t.id}`,
 				type: "agent_connected",
-				title: A("overviewPage.activity.agentOnline", "Agent Online"),
-				description: A("overviewPage.activity.agentOnlineDescription", "{{name}} is active", { name: t.name }),
+				title: M("overviewPage.activity.agentOnline", "Agent Online"),
+				description: M("overviewPage.activity.agentOnlineDescription", "{{name}} is active", { name: t.name }),
 				timestamp: t.lastHeartbeat || t.updatedAt,
 				color: "blue"
 			});
 		}), e.sort((e, t) => new Date(t.timestamp).getTime() - new Date(e.timestamp).getTime()).slice(0, 6);
 	}, [J, Y]);
-	if (k || P && j.length === 0 && M.length === 0 && N.length === 0) return /* @__PURE__ */ S("div", {
+	if (j || I && N.length === 0 && P.length === 0 && F.length === 0) return /* @__PURE__ */ x("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ S(ee, { message: A("overviewPage.loadingPermissions", "Loading permissions...") })
+		children: /* @__PURE__ */ x(a, { message: M("overviewPage.loadingPermissions", "Loading permissions...") })
 	});
-	if (!O(l.VIBE_LIST)) return /* @__PURE__ */ S("div", {
+	if (!A(l.VIBE_LIST)) return /* @__PURE__ */ x("div", {
 		className: "flex items-center justify-center min-h-[400px] px-4",
-		children: /* @__PURE__ */ C("div", {
+		children: /* @__PURE__ */ S("div", {
 			className: "text-center space-y-2 max-w-sm",
-			children: [/* @__PURE__ */ S("h2", {
+			children: [/* @__PURE__ */ x("h2", {
 				className: "text-lg font-semibold tracking-tight text-text-primary",
-				children: A("common.accessDeniedTitle", "Access Denied")
-			}), /* @__PURE__ */ S("p", {
+				children: M("common.accessDeniedTitle", "Access Denied")
+			}), /* @__PURE__ */ x("p", {
 				className: "text-sm text-text-secondary",
-				children: A("overviewPage.accessDeniedDescription", "You don't have permission to access this page.")
+				children: M("overviewPage.accessDeniedDescription", "You don't have permission to access this page.")
 			})]
 		})
 	});
-	let se = (e) => {
-		if (!e) return A("overviewPage.time.unknown", "Unknown");
+	let de = (e) => {
+		if (!e) return M("overviewPage.time.unknown", "Unknown");
 		let t = Date.now() - new Date(e).getTime();
-		return t < 6e4 ? A("overviewPage.time.justNow", "Just now") : t < 36e5 ? A("overviewPage.time.minutesAgo", "{{count}}m ago", { count: Math.floor(t / 6e4) }) : t < 864e5 ? A("overviewPage.time.hoursAgo", "{{count}}h ago", { count: Math.floor(t / 36e5) }) : A("overviewPage.time.daysAgo", "{{count}}d ago", { count: Math.floor(t / 864e5) });
-	}, ce = (e) => /* @__PURE__ */ S({
-		session_started: _,
-		agent_connected: y,
-		vibe_updated: g,
-		note_created: h,
-		module_installed: p
-	}[e] || p, { className: "size-4" }), le = (e) => ({
+		return t < 6e4 ? M("overviewPage.time.justNow", "Just now") : t < 36e5 ? M("overviewPage.time.minutesAgo", "{{count}}m ago", { count: Math.floor(t / 6e4) }) : t < 864e5 ? M("overviewPage.time.hoursAgo", "{{count}}h ago", { count: Math.floor(t / 36e5) }) : M("overviewPage.time.daysAgo", "{{count}}d ago", { count: Math.floor(t / 864e5) });
+	}, fe = (e) => /* @__PURE__ */ x({
+		session_started: g,
+		agent_connected: _,
+		vibe_updated: ie,
+		note_created: re,
+		module_installed: m
+	}[e] || m, { className: "size-4" }), pe = (e) => ({
 		green: "bg-status-success-bg-subtle text-status-success-text",
 		blue: "bg-[var(--color-accent-soft)] text-text-primary",
 		purple: "bg-accent-purple-subtle text-text-primary",
@@ -171,294 +171,274 @@ function E() {
 		yellow: "bg-status-warning-bg-subtle text-status-warning-text",
 		pink: "bg-accent-purple-subtle text-text-primary"
 	})[e] || "bg-bg-sunken text-text-secondary";
-	return /* @__PURE__ */ C(oe, {
+	return /* @__PURE__ */ S(D, {
 		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: [
-			/* @__PURE__ */ S(i, {
-				title: A("overviewPage.title", "VibeControls Overview"),
-				description: A("overviewPage.description", "Monitor and manage your development environments"),
-				actions: /* @__PURE__ */ C("button", {
-					type: "button",
-					onClick: V,
-					disabled: P,
-					className: "inline-flex items-center gap-2 px-3 py-2 text-sm bg-bg-surface border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-					children: [/* @__PURE__ */ S(v, {
-						className: `size-4 ${P ? "animate-spin" : ""}`,
-						"aria-hidden": "true"
-					}), A("overviewPage.refresh", "Refresh")]
-				})
+			/* @__PURE__ */ S("div", {
+				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+				children: [/* @__PURE__ */ x(se, { intensity: "subtle" }), /* @__PURE__ */ x(i, {
+					title: /* @__PURE__ */ S(oe, { children: [
+						/* @__PURE__ */ x(C, { children: M("overviewPage.titleNoun", "VibeControls") }),
+						" ",
+						M("overviewPage.titleSuffix", "Overview")
+					] }),
+					description: M("overviewPage.description", "Monitor and manage your development environments"),
+					actions: /* @__PURE__ */ S("button", {
+						type: "button",
+						onClick: U,
+						disabled: I,
+						className: "inline-flex items-center gap-2 px-3 py-2 text-sm bg-bg-surface border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+						children: [/* @__PURE__ */ x(ae, {
+							className: `size-4 ${I ? "animate-spin" : ""}`,
+							"aria-hidden": "true"
+						}), M("overviewPage.refresh", "Refresh")]
+					})
+				})]
 			}),
-			F && !P && /* @__PURE__ */ S(a, {
-				title: A("overviewPage.loadFailed.title", "Could not load workspace data"),
-				message: A("overviewPage.loadFailed.message", "We couldn't load your VibeControls overview. Please try again in a moment."),
-				onRetry: V
+			L && !I && /* @__PURE__ */ x(ee, {
+				title: M("overviewPage.loadFailed.title", "Could not load workspace data"),
+				message: M("overviewPage.loadFailed.message", "We couldn't load your VibeControls overview. Please try again in a moment."),
+				onRetry: U
 			}),
-			!F && K.length === 0 && !P && /* @__PURE__ */ S(c, {
+			!L && K.length === 0 && !I && /* @__PURE__ */ x(c, {
 				variant: "full",
 				dismissKey: "vibecontrols-overview-setup-banner"
 			}),
-			/* @__PURE__ */ C(T, {
+			/* @__PURE__ */ S(E, {
 				"data-tour": "overview-stats",
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
 				stagger: .06,
 				children: [
-					/* @__PURE__ */ S(w, {
+					/* @__PURE__ */ x(T, {
 						variant: "fadeScale",
-						children: /* @__PURE__ */ S(s, {
-							title: A("overviewPage.stats.targets", "Targets"),
-							value: P ? "-" : U,
-							subtitle: P || W ? "" : A("overviewPage.stats.connected", "{{count}} connected", { count: G }),
-							icon: /* @__PURE__ */ S(y, { className: "size-6" }),
-							variant: !P && U > 0 ? "success" : "default",
-							onClick: () => E("/targets")
+						children: /* @__PURE__ */ x(s, {
+							title: M("overviewPage.stats.targets", "Targets"),
+							value: I ? "-" : G,
+							subtitle: I || le ? "" : M("overviewPage.stats.connected", "{{count}} connected", { count: ue }),
+							icon: /* @__PURE__ */ x(_, { className: "size-6" }),
+							variant: !I && G > 0 ? "success" : "default",
+							onClick: () => O("/targets")
 						})
 					}),
-					/* @__PURE__ */ S(w, {
+					/* @__PURE__ */ x(T, {
 						variant: "fadeScale",
-						children: /* @__PURE__ */ S(s, {
-							title: A("overviewPage.stats.agents", "Agents"),
-							value: P ? "-" : Q.agents.total,
-							subtitle: P ? "" : A("overviewPage.stats.active", "{{count}} active", { count: Q.agents.active }),
-							icon: /* @__PURE__ */ S(m, { className: "size-6" }),
-							variant: !P && Q.agents.active > 0 ? "success" : "default",
-							onClick: () => E("/agents")
+						children: /* @__PURE__ */ x(s, {
+							title: M("overviewPage.stats.agents", "Agents"),
+							value: I ? "-" : Q.agents.total,
+							subtitle: I ? "" : M("overviewPage.stats.active", "{{count}} active", { count: Q.agents.active }),
+							icon: /* @__PURE__ */ x(h, { className: "size-6" }),
+							variant: !I && Q.agents.active > 0 ? "success" : "default",
+							onClick: () => O("/agents")
 						})
 					}),
-					/* @__PURE__ */ S(w, {
+					/* @__PURE__ */ x(T, {
 						variant: "fadeScale",
-						children: /* @__PURE__ */ S(s, {
-							title: A("overviewPage.stats.vibes", "Vibes"),
-							value: P ? "-" : Q.vibes.total,
-							subtitle: P ? "" : A("overviewPage.stats.active", "{{count}} active", { count: Q.vibes.active }),
-							icon: /* @__PURE__ */ S(x, { className: "size-6" }),
-							onClick: () => E("/vibes")
+						children: /* @__PURE__ */ x(s, {
+							title: M("overviewPage.stats.vibes", "Vibes"),
+							value: I ? "-" : Q.vibes.total,
+							subtitle: I ? "" : M("overviewPage.stats.active", "{{count}} active", { count: Q.vibes.active }),
+							icon: /* @__PURE__ */ x(y, { className: "size-6" }),
+							onClick: () => O("/vibes")
 						})
 					}),
-					/* @__PURE__ */ S(w, {
+					/* @__PURE__ */ x(T, {
 						variant: "fadeScale",
-						children: /* @__PURE__ */ S(s, {
-							title: A("overviewPage.stats.sessions", "Sessions"),
-							value: P ? "-" : Q.sessions.total,
-							subtitle: P ? "" : A("overviewPage.stats.running", "{{count}} running", { count: Q.sessions.running }),
-							icon: /* @__PURE__ */ S(b, { className: "size-6" }),
-							variant: !P && Q.sessions.running > 0 ? "success" : "default",
-							onClick: () => E("/sessions")
+						children: /* @__PURE__ */ x(s, {
+							title: M("overviewPage.stats.sessions", "Sessions"),
+							value: I ? "-" : Q.sessions.total,
+							subtitle: I ? "" : M("overviewPage.stats.running", "{{count}} running", { count: Q.sessions.running }),
+							icon: /* @__PURE__ */ x(v, { className: "size-6" }),
+							variant: !I && Q.sessions.running > 0 ? "success" : "default",
+							onClick: () => O("/sessions")
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ C(T, {
+			/* @__PURE__ */ S(E, {
 				className: "grid grid-cols-1 gap-6 xl:grid-cols-3",
 				stagger: .08,
-				children: [/* @__PURE__ */ S(w, {
+				children: [/* @__PURE__ */ x(T, {
 					className: "xl:col-span-2 h-full",
-					children: /* @__PURE__ */ C(ae, {
-						className: "flex h-full flex-col",
-						children: [/* @__PURE__ */ C("div", {
+					children: /* @__PURE__ */ S(ce, {
+						className: "flex h-full flex-col border-[color-mix(in_oklab,var(--color-action-primary-bg)_34%,transparent)] shadow-[var(--shadow-glow)]",
+						children: [/* @__PURE__ */ S("div", {
 							className: "flex items-center justify-between mb-5",
-							children: [/* @__PURE__ */ C("h2", {
+							children: [/* @__PURE__ */ S("h2", {
 								className: "text-lg font-semibold tracking-tight text-text-primary flex items-center gap-2.5",
-								children: [/* @__PURE__ */ S("span", {
+								children: [/* @__PURE__ */ x("span", {
 									className: "inline-flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-									children: /* @__PURE__ */ S(m, { className: "size-5" })
-								}), A("overviewPage.sections.activeAgents", "Active Agents")]
-							}), /* @__PURE__ */ S("button", {
+									children: /* @__PURE__ */ x(h, { className: "size-5" })
+								}), M("overviewPage.sections.activeAgents", "Active Agents")]
+							}), /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => E("/agents"),
+								onClick: () => O("/agents"),
 								className: "text-sm font-medium text-text-link hover:underline",
-								"aria-label": A("overviewPage.sections.viewAllAgents", "View all agents"),
-								children: A("overviewPage.sections.viewAll", "View all")
+								"aria-label": M("overviewPage.sections.viewAllAgents", "View all agents"),
+								children: M("overviewPage.sections.viewAll", "View all")
 							})]
-						}), Y.length > 0 ? /* @__PURE__ */ S(T, {
+						}), Y.length > 0 ? /* @__PURE__ */ x(E, {
 							className: "grid grid-cols-1 sm:grid-cols-2 gap-4 flex-1 content-start",
 							stagger: .04,
-							children: Y.slice(0, 4).map((e) => /* @__PURE__ */ S(w, { children: /* @__PURE__ */ S(u, {
+							children: Y.slice(0, 4).map((e) => /* @__PURE__ */ x(T, { children: /* @__PURE__ */ x(u, {
 								agent: e,
-								onSelect: (e) => E(`/agents/${e.id}`)
+								onSelect: (e) => O(`/agents/${e.id}`)
 							}) }, e.id))
-						}) : /* @__PURE__ */ C("div", {
-							className: "flex flex-1 flex-col items-center justify-center text-center py-8 text-text-secondary",
-							children: [
-								/* @__PURE__ */ S("span", {
-									className: "inline-flex size-12 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-text-primary mb-3",
-									children: /* @__PURE__ */ S(m, { className: "size-6" })
-								}),
-								/* @__PURE__ */ S("p", {
-									className: "text-base font-semibold text-text-primary",
-									children: A("overviewPage.empty.noActiveAgents", "No active agents")
-								}),
-								/* @__PURE__ */ S("p", {
-									className: "text-xs text-text-muted mt-1 mb-4",
-									children: A("overviewPage.empty.installCliHint", "Install the agent CLI to get started")
-								}),
-								/* @__PURE__ */ C("div", {
-									className: "flex flex-wrap items-center justify-center gap-2",
-									children: [
-										/* @__PURE__ */ S("button", {
-											type: "button",
-											onClick: () => E("/getting-started"),
-											className: "text-sm font-medium text-text-link hover:underline",
-											children: A("overviewPage.empty.setupGuide", "Setup guide")
-										}),
-										/* @__PURE__ */ S("span", {
-											className: "text-text-muted",
-											children: "·"
-										}),
-										/* @__PURE__ */ S("button", {
-											type: "button",
-											onClick: () => E("/agents"),
-											className: "text-sm text-text-link hover:underline",
-											children: A("overviewPage.empty.addAgent", "Add agent")
-										})
-									]
-								})
-							]
+						}) : /* @__PURE__ */ x(w, {
+							className: "flex-1 py-8",
+							illustration: "empty-agents",
+							title: M("overviewPage.empty.noActiveAgents", "No active agents"),
+							description: M("overviewPage.empty.installCliHint", "Install the agent CLI to get started"),
+							action: /* @__PURE__ */ S("div", {
+								className: "flex flex-wrap items-center justify-center gap-2",
+								children: [
+									/* @__PURE__ */ x("button", {
+										type: "button",
+										onClick: () => O("/getting-started"),
+										className: "text-sm font-medium text-text-link hover:underline",
+										children: M("overviewPage.empty.setupGuide", "Setup guide")
+									}),
+									/* @__PURE__ */ x("span", {
+										className: "text-text-muted",
+										children: "·"
+									}),
+									/* @__PURE__ */ x("button", {
+										type: "button",
+										onClick: () => O("/agents"),
+										className: "text-sm text-text-link hover:underline",
+										children: M("overviewPage.empty.addAgent", "Add agent")
+									})
+								]
+							})
 						})]
 					})
-				}), /* @__PURE__ */ S(w, {
+				}), /* @__PURE__ */ x(T, {
 					className: "h-full",
-					children: /* @__PURE__ */ C(o, {
+					children: /* @__PURE__ */ S(o, {
 						className: "flex h-full flex-col",
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ S("div", {
 							className: "flex items-center justify-between mb-5",
-							children: [/* @__PURE__ */ C("h2", {
+							children: [/* @__PURE__ */ S("h2", {
 								className: "text-lg font-semibold tracking-tight text-text-primary flex items-center gap-2.5",
-								children: [/* @__PURE__ */ S("span", {
+								children: [/* @__PURE__ */ x("span", {
 									className: "inline-flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-									children: /* @__PURE__ */ S(p, { className: "size-5" })
-								}), A("overviewPage.sections.recentActivity", "Recent Activity")]
-							}), /* @__PURE__ */ S("button", {
+									children: /* @__PURE__ */ x(m, { className: "size-5" })
+								}), M("overviewPage.sections.recentActivity", "Recent Activity")]
+							}), /* @__PURE__ */ x("button", {
 								type: "button",
-								onClick: () => E("/audit"),
+								onClick: () => O("/audit"),
 								className: "text-sm font-medium text-text-link hover:underline",
-								"aria-label": A("overviewPage.sections.viewAllActivity", "View all activity"),
+								"aria-label": M("overviewPage.sections.viewAllActivity", "View all activity"),
 								children: "View all"
 							})]
-						}), /* @__PURE__ */ S(T, {
+						}), /* @__PURE__ */ x(E, {
 							className: "space-y-3 flex-1",
 							stagger: .04,
-							children: $.length > 0 ? $.map((e) => /* @__PURE__ */ S(w, {
+							children: $.length > 0 ? $.map((e) => /* @__PURE__ */ x(T, {
 								variant: "fadeRight",
-								children: /* @__PURE__ */ C("div", {
+								children: /* @__PURE__ */ S("div", {
 									className: "flex items-start gap-3",
 									children: [
-										/* @__PURE__ */ S("div", {
-											className: `flex-shrink-0 size-8 rounded-full flex items-center justify-center ${le(e.color)}`,
-											children: ce(e.type)
+										/* @__PURE__ */ x("div", {
+											className: `flex-shrink-0 size-8 rounded-full flex items-center justify-center ${pe(e.color)}`,
+											children: fe(e.type)
 										}),
-										/* @__PURE__ */ C("div", {
+										/* @__PURE__ */ S("div", {
 											className: "flex-1 min-w-0",
-											children: [/* @__PURE__ */ S("p", {
+											children: [/* @__PURE__ */ x("p", {
 												className: "text-sm font-medium text-text-primary truncate",
 												children: e.title
-											}), /* @__PURE__ */ S("p", {
+											}), /* @__PURE__ */ x("p", {
 												className: "text-xs text-text-secondary truncate",
 												children: e.description
 											})]
 										}),
-										/* @__PURE__ */ S("span", {
+										/* @__PURE__ */ x("span", {
 											className: "text-xs text-text-secondary flex-shrink-0",
-											children: se(e.timestamp)
+											children: de(e.timestamp)
 										})
 									]
 								})
-							}, e.id)) : /* @__PURE__ */ C("div", {
-								className: "flex h-full flex-col items-center justify-center text-center py-4 text-text-secondary text-sm",
-								children: [/* @__PURE__ */ S("p", { children: A("overviewPage.empty.noRecentActivity", "No recent activity") }), /* @__PURE__ */ S("button", {
+							}, e.id)) : /* @__PURE__ */ x(w, {
+								className: "h-full py-6",
+								illustration: "empty-notifications",
+								title: M("overviewPage.empty.noRecentActivity", "No recent activity"),
+								action: /* @__PURE__ */ x("button", {
 									type: "button",
-									onClick: () => E("/audit"),
-									className: "mt-2 text-sm text-text-link hover:underline",
-									children: A("overviewPage.empty.viewAuditLog", "View audit log")
-								})]
+									onClick: () => O("/audit"),
+									className: "text-sm text-text-link hover:underline",
+									children: M("overviewPage.empty.viewAuditLog", "View audit log")
+								})
 							})
 						})]
 					})
 				})]
 			}),
-			/* @__PURE__ */ S(w, { children: /* @__PURE__ */ C(o, { children: [/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ x(T, { children: /* @__PURE__ */ S(o, { children: [/* @__PURE__ */ S("div", {
 				className: "flex items-center justify-between mb-5",
-				children: [/* @__PURE__ */ C("h2", {
+				children: [/* @__PURE__ */ S("h2", {
 					className: "text-lg font-semibold tracking-tight text-text-primary flex items-center gap-2.5",
-					children: [/* @__PURE__ */ S("span", {
+					children: [/* @__PURE__ */ x("span", {
 						className: "inline-flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ S(b, { className: "size-5" })
-					}), A("overviewPage.sections.runningSessions", "Running Sessions")]
-				}), /* @__PURE__ */ S("button", {
+						children: /* @__PURE__ */ x(v, { className: "size-5" })
+					}), M("overviewPage.sections.runningSessions", "Running Sessions")]
+				}), /* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => E("/sessions"),
+					onClick: () => O("/sessions"),
 					className: "text-sm font-medium text-text-link hover:underline",
-					children: A("overviewPage.sections.viewAll", "View all")
+					children: M("overviewPage.sections.viewAll", "View all")
 				})]
-			}), X.length > 0 ? /* @__PURE__ */ S(T, {
+			}), X.length > 0 ? /* @__PURE__ */ x(E, {
 				className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4",
 				stagger: .04,
-				children: X.slice(0, 6).map((e) => /* @__PURE__ */ S(w, { children: /* @__PURE__ */ S(te, {
+				children: X.slice(0, 6).map((e) => /* @__PURE__ */ x(T, { children: /* @__PURE__ */ x(te, {
 					session: e,
-					onOpen: (e) => E(`/sessions/${e.id}`)
+					onOpen: (e) => O(`/sessions/${e.id}`)
 				}) }, e.id))
-			}) : /* @__PURE__ */ C("div", {
-				className: "flex flex-col items-center text-center py-10 text-text-secondary",
-				children: [
-					/* @__PURE__ */ S("span", {
-						className: "inline-flex size-12 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-text-primary mb-3",
-						children: /* @__PURE__ */ S(b, { className: "size-6" })
-					}),
-					/* @__PURE__ */ S("p", {
-						className: "text-base font-semibold text-text-primary",
-						children: A("overviewPage.empty.noRunningSessions", "No running sessions")
-					}),
-					/* @__PURE__ */ S("button", {
-						type: "button",
-						onClick: () => E("/sessions"),
-						className: "mt-3 text-sm font-medium text-text-link hover:underline",
-						children: A("overviewPage.empty.startSession", "Start a session")
-					})
-				]
+			}) : /* @__PURE__ */ x(w, {
+				illustration: "empty-sessions",
+				title: M("overviewPage.empty.noRunningSessions", "No running sessions"),
+				action: /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => O("/sessions"),
+					className: "text-sm font-medium text-text-link hover:underline",
+					children: M("overviewPage.empty.startSession", "Start a session")
+				})
 			})] }) }),
-			/* @__PURE__ */ S(w, { children: /* @__PURE__ */ C(o, { children: [/* @__PURE__ */ C("div", {
+			/* @__PURE__ */ x(T, { children: /* @__PURE__ */ S(o, { children: [/* @__PURE__ */ S("div", {
 				className: "flex items-center justify-between mb-5",
-				children: [/* @__PURE__ */ C("h2", {
+				children: [/* @__PURE__ */ S("h2", {
 					className: "text-lg font-semibold tracking-tight text-text-primary flex items-center gap-2.5",
-					children: [/* @__PURE__ */ S("span", {
+					children: [/* @__PURE__ */ x("span", {
 						className: "inline-flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-						children: /* @__PURE__ */ S(x, { className: "size-5" })
-					}), A("overviewPage.sections.activeVibes", "Active Vibes")]
-				}), /* @__PURE__ */ S("button", {
+						children: /* @__PURE__ */ x(y, { className: "size-5" })
+					}), M("overviewPage.sections.activeVibes", "Active Vibes")]
+				}), /* @__PURE__ */ x("button", {
 					type: "button",
-					onClick: () => E("/vibes"),
+					onClick: () => O("/vibes"),
 					className: "text-sm font-medium text-text-link hover:underline",
-					children: A("overviewPage.sections.viewAll", "View all")
+					children: M("overviewPage.sections.viewAll", "View all")
 				})]
-			}), Z.length > 0 ? /* @__PURE__ */ S(T, {
+			}), Z.length > 0 ? /* @__PURE__ */ x(E, {
 				className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4",
 				stagger: .04,
-				children: Z.slice(0, 6).map((e) => /* @__PURE__ */ S(w, { children: /* @__PURE__ */ S(ne, {
+				children: Z.slice(0, 6).map((e) => /* @__PURE__ */ x(T, { children: /* @__PURE__ */ x(d, {
 					vibe: e,
-					onOpen: (e) => E(`/vibes/${e.id}`)
+					onOpen: (e) => O(`/vibes/${e.id}`)
 				}) }, e.id))
-			}) : /* @__PURE__ */ C("div", {
-				className: "flex flex-col items-center text-center py-10 text-text-secondary",
-				children: [
-					/* @__PURE__ */ S("span", {
-						className: "inline-flex size-12 items-center justify-center rounded-full bg-[var(--color-accent-soft)] text-text-primary mb-3",
-						children: /* @__PURE__ */ S(x, { className: "size-6" })
-					}),
-					/* @__PURE__ */ S("p", {
-						className: "text-base font-semibold text-text-primary",
-						children: A("overviewPage.empty.noActiveVibes", "No active vibes")
-					}),
-					/* @__PURE__ */ S("button", {
-						type: "button",
-						onClick: () => E("/vibes"),
-						className: "mt-3 text-sm font-medium text-text-link hover:underline",
-						children: A("overviewPage.empty.addVibe", "Add a vibe")
-					})
-				]
+			}) : /* @__PURE__ */ x(w, {
+				illustration: "empty-vibes",
+				title: M("overviewPage.empty.noActiveVibes", "No active vibes"),
+				action: /* @__PURE__ */ x("button", {
+					type: "button",
+					onClick: () => O("/vibes"),
+					className: "text-sm font-medium text-text-link hover:underline",
+					children: M("overviewPage.empty.addVibe", "Add a vibe")
+				})
 			})] }) })
 		]
 	});
 }
 //#endregion
-export { E as OverviewPage };
+export { O as OverviewPage };
 
 //# sourceMappingURL=OverviewPage.js.map