@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.2

package/dist/pages/SessionsPage.js

@@ -1327,11 +1327,11 @@ function jt() {
 		stopped: Y.filter((e) => e.status === "STOPPED").length
 	};
 	if (Pt) return /* @__PURE__ */ h(Et, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ h(xe, { message: b("sessions.loadingPermissions", "Loading permissions...") })
 	});
 	if (Ft && Ft.permissionStrings?.length > 0 && !Bt) return /* @__PURE__ */ h(Et, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ h(St, {
 			title: b("common.accessDeniedTitle", "Access Denied"),
 			description: b("sessions.accessDeniedDescription", "You don't have permission to view sessions."),
@@ -1339,11 +1339,11 @@ function jt() {
 		})
 	});
 	if (Rr && !Lr && Y.length === 0) return /* @__PURE__ */ h(Et, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ h(xe, { message: b("sessions.loading", "Loading sessions...") })
 	});
 	if (zr && Y.length === 0) return /* @__PURE__ */ h(Et, {
-		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
+		className: "space-y-6 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
 		children: /* @__PURE__ */ h(Se, {
 			title: b("sessions.failedLoad", "Failed to load sessions"),
 			message: zr.message,
@@ -1351,7 +1351,7 @@ function jt() {
 		})
 	});
 	let Qi = () => !si || k === "terminal" ? null : /* @__PURE__ */ g("div", {
-		className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2 bg-action-primary-bg/10 border border-action-primary-bg/20 rounded-lg",
+		className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2.5 bg-[var(--color-accent-soft)] border border-border-subtle rounded-card",
 		children: [/* @__PURE__ */ h("span", {
 			className: "text-sm font-medium text-text-primary",
 			children: b(F.size === 1 ? "sessions.selectionCountSingle" : "sessions.selectionCountPlural", F.size === 1 ? "{{count}} session selected" : "{{count}} sessions selected", { count: F.size })
@@ -1362,7 +1362,7 @@ function jt() {
 					type: "button",
 					onClick: ci,
 					disabled: sn,
-					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50",
+					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-subtle rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 					children: [
 						/* @__PURE__ */ h(ft, { className: "size-3" }),
 						" ",
@@ -1373,7 +1373,7 @@ function jt() {
 					type: "button",
 					onClick: li,
 					disabled: sn,
-					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-default rounded-md hover:bg-bg-sunken transition-colors disabled:opacity-50",
+					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-bg-surface border border-border-subtle rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 					children: [
 						/* @__PURE__ */ h(ct, { className: "size-3" }),
 						" ",
@@ -1384,7 +1384,7 @@ function jt() {
 					type: "button",
 					onClick: ui,
 					disabled: sn,
-					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-status-error-text bg-status-error-bg border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50",
+					className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-status-error-text bg-status-error-bg-subtle border border-status-error-border rounded-button hover:bg-status-error-bg-subtle/80 transition-colors disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 					children: [
 						/* @__PURE__ */ h(mt, { className: "size-3" }),
 						" ",
@@ -1404,12 +1404,12 @@ function jt() {
 			]
 		})]
 	}), $i = /* @__PURE__ */ g("div", {
-		className: "flex items-center gap-0.5 rounded-md bg-bg-sunken p-0.5 flex-shrink-0",
+		className: "flex items-center gap-0.5 rounded-button bg-bg-sunken p-0.5 flex-shrink-0 border border-border-subtle",
 		children: [
 			/* @__PURE__ */ h("button", {
 				type: "button",
 				onClick: () => A("terminal"),
-				className: `p-1.5 rounded ${k === "terminal" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+				className: `p-1.5 rounded ${k === "terminal" ? "bg-[var(--color-accent-soft)] text-action-primary-bg" : "text-text-secondary hover:bg-bg-surface/60"}`,
 				title: b("sessions.terminalViewTitle", "Terminal view"),
 				"aria-label": b("sessions.terminalViewTitle", "Terminal view"),
 				children: /* @__PURE__ */ h(rt, { className: "size-4 text-text-secondary" })
@@ -1417,7 +1417,7 @@ function jt() {
 			/* @__PURE__ */ h("button", {
 				type: "button",
 				onClick: () => A("grid"),
-				className: `p-1.5 rounded ${k === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+				className: `p-1.5 rounded ${k === "grid" ? "bg-[var(--color-accent-soft)] text-action-primary-bg" : "text-text-secondary hover:bg-bg-surface/60"}`,
 				title: b("sessions.gridViewTitle", "Grid view"),
 				"aria-label": b("sessions.gridViewTitle", "Grid view"),
 				children: /* @__PURE__ */ h(Qe, { className: "size-4 text-text-secondary" })
@@ -1425,7 +1425,7 @@ function jt() {
 			/* @__PURE__ */ h("button", {
 				type: "button",
 				onClick: () => A("list"),
-				className: `p-1.5 rounded ${k === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
+				className: `p-1.5 rounded ${k === "list" ? "bg-[var(--color-accent-soft)] text-action-primary-bg" : "text-text-secondary hover:bg-bg-surface/60"}`,
 				title: b("sessions.listViewTitle", "List view"),
 				"aria-label": b("sessions.listViewTitle", "List view"),
 				children: /* @__PURE__ */ h(nt, { className: "size-4 text-text-secondary" })
@@ -1629,7 +1629,7 @@ function jt() {
 				})]
 			}),
 			on && /* @__PURE__ */ h("div", {
-				className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm",
+				className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-card shadow-elevation-3 text-sm",
 				children: on
 			}),
 			ea
@@ -1955,7 +1955,7 @@ function jt() {
 									children: [Vt && /* @__PURE__ */ g("button", {
 										type: "button",
 										onClick: gi,
-										className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
+										className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 										children: [
 											/* @__PURE__ */ h(ot, { className: "size-4" }),
 											" ",
@@ -1967,7 +1967,7 @@ function jt() {
 						})
 					}),
 					on && /* @__PURE__ */ h("div", {
-						className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg text-status-success-text rounded-md shadow-lg text-sm",
+						className: "fixed bottom-4 right-4 z-50 px-4 py-3 bg-status-success-bg-subtle text-status-success-text border border-status-success-border rounded-card shadow-elevation-3 text-sm",
 						children: on
 					})
 				]
@@ -2015,7 +2015,7 @@ function jt() {
 			className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
 			"data-testid": "sessions-reconnect-modal",
 			children: /* @__PURE__ */ g("div", {
-				className: "bg-bg-surface rounded-lg p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto",
+				className: "bg-bg-surface rounded-card border border-border-subtle shadow-[var(--shadow-elevation-4)] p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto",
 				children: [
 					/* @__PURE__ */ h("h2", {
 						className: "text-lg font-semibold text-text-primary mb-1",
@@ -2042,7 +2042,7 @@ function jt() {
 								clearable: !0
 							})] }),
 							mr && /* @__PURE__ */ h("div", {
-								className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+								className: "p-3 bg-status-error-bg-subtle text-status-error-text border border-status-error-border text-sm rounded-card",
 								"data-testid": "sessions-reconnect-error",
 								children: mr
 							}),
@@ -2092,7 +2092,7 @@ function jt() {
 												_r(null);
 											}
 										},
-										className: "shrink-0 px-3 py-1.5 text-xs bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
+										className: "shrink-0 px-3 py-1.5 text-xs bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-all duration-200 disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
 										"data-testid": `sessions-reconnect-adopt-${e.externalName}`,
 										children: gr === e.externalName ? b("sessions.adopting", "Adopting…") : b("sessions.adopt", "Adopt")
 									})]
@@ -2119,7 +2119,7 @@ function jt() {
 		return /* @__PURE__ */ h("div", {
 			className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-50 p-4",
 			children: /* @__PURE__ */ g("div", {
-				className: "bg-bg-surface rounded-lg p-6 w-full max-w-lg",
+				className: "bg-bg-surface rounded-card border border-border-subtle shadow-[var(--shadow-elevation-4)] p-6 w-full max-w-lg",
 				children: [
 					/* @__PURE__ */ h("h2", {
 						className: "text-lg font-semibold text-text-primary mb-4",
@@ -2129,7 +2129,7 @@ function jt() {
 						className: "space-y-4",
 						children: [
 							nn && /* @__PURE__ */ h("div", {
-								className: "p-3 bg-status-error-bg text-status-error-text text-sm rounded-md",
+								className: "p-3 bg-status-error-bg-subtle text-status-error-text border border-status-error-border text-sm rounded-card",
 								children: nn
 							}),
 							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {