@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.2

package/dist/pages/SettingsPage.js

@@ -1,29 +1,29 @@
-import { useMySettingsQuery as e, useResetSettingsMutation as t, useSettingsPageDataQuery as n, useUpdateNotificationPreferencesMutation as ee, useUpdateWorkspaceDefaultsMutation as te } from "../generated/wspace-operations.js";
-import { useVibeControls as ne } from "../providers/VibeControlsProvider.js";
-import re from "../hooks/useCachedInitialData.js";
-import { PageHeader as ie } from "../components/shared/PageHeader.js";
-import { LoadingState as r } from "../components/shared/LoadingState.js";
-import { Card as i } from "../components/shared/Card.js";
+import { useMySettingsQuery as e, useResetSettingsMutation as t, useSettingsPageDataQuery as n, useUpdateNotificationPreferencesMutation as r, useUpdateWorkspaceDefaultsMutation as ee } from "../generated/wspace-operations.js";
+import { useVibeControls as te } from "../providers/VibeControlsProvider.js";
+import ne from "../hooks/useCachedInitialData.js";
+import { PageHeader as re } from "../components/shared/PageHeader.js";
+import { LoadingState as i } from "../components/shared/LoadingState.js";
+import { Card as a } from "../components/shared/Card.js";
 import "../components/shared/index.js";
-import { VIBE_PERMISSIONS as a } from "../constants/permissions.js";
-import { AdvancedSection as o } from "../components/settings/AdvancedSection.js";
-import { NotificationsSection as s } from "../components/settings/NotificationsSection.js";
-import { WorkspaceDefaultsSection as c } from "../components/settings/WorkspaceDefaultsSection.js";
-import { IdePreferencesSection as l } from "../components/settings/IdePreferencesSection.js";
-import { useCallback as u, useEffect as d, useMemo as f, useState as p } from "react";
-import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ChevronRight as h, RefreshCw as g, RotateCcw as _, Save as v } from "lucide-react";
+import { VIBE_PERMISSIONS as o } from "../constants/permissions.js";
+import { AdvancedSection as s } from "../components/settings/AdvancedSection.js";
+import { NotificationsSection as c } from "../components/settings/NotificationsSection.js";
+import { WorkspaceDefaultsSection as l } from "../components/settings/WorkspaceDefaultsSection.js";
+import { IdePreferencesSection as u } from "../components/settings/IdePreferencesSection.js";
+import { useCallback as d, useEffect as f, useMemo as p, useState as m } from "react";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ChevronRight as g, RefreshCw as _, RotateCcw as ie, Save as v } from "lucide-react";
 import { usePermissions as y } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { PermissionButton as C } from "@burdenoff/fe-libs/shared/components";
 import { MotionItem as w, MotionList as T, MotionPage as E } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/SettingsPage.tsx
 function D() {
-	let { hasPermission: D, isLoading: O } = y(), { workspaceId: ae } = ne(), { t: k } = m(), A = D(a.CONFIG_UPDATE), [j, M] = p("notifications"), [N, P] = p(!1), [F, I] = p(null), { agents: L } = re(), R = f(() => L.map((e) => ({
+	let { hasPermission: D, isLoading: O } = y(), { workspaceId: ae } = te(), { t: k } = h(), A = D(o.CONFIG_UPDATE), [j, M] = m("notifications"), [N, P] = m(!1), [F, I] = m(null), { agents: L } = ne(), R = p(() => L.map((e) => ({
 		id: e.id,
 		name: e.name,
 		isActive: e.isActive
-	})), [L]), z = u((e, t) => {
+	})), [L]), z = d((e, t) => {
 		let n = k(e);
 		return n === e ? t : n;
 	}, [k]), B = n({
@@ -34,12 +34,12 @@ function D() {
 		skip: O || A,
 		fetchPolicy: "cache-and-network",
 		notifyOnNetworkStatusChange: !0
-	}), H = B.data?.mySettings ?? V.data?.mySettings, U = B.loading || V.loading, W = f(() => (B.data?.listSettingsSecrets ?? []).map((e) => ({
+	}), H = B.data?.mySettings ?? V.data?.mySettings, U = B.loading || V.loading, W = p(() => (B.data?.listSettingsSecrets ?? []).map((e) => ({
 		id: e.id,
 		key: e.key,
 		value: e.value ?? null,
 		isSecret: e.isSecret
-	})), [B.data?.listSettingsSecrets]), G = u(async () => {
+	})), [B.data?.listSettingsSecrets]), G = d(async () => {
 		if (A) {
 			await B.refetch();
 			return;
@@ -49,13 +49,13 @@ function D() {
 		A,
 		V,
 		B
-	]), [K, q] = p({
+	]), [K, q] = m({
 		agentOffline: !0,
 		sessionError: !0,
 		vibeStatusChange: !1,
 		emailDigest: !1,
 		digestFrequency: "none"
-	}), [J, Y] = p({
+	}), [J, Y] = m({
 		defaultAgent: null,
 		defaultSessionType: "TMUX",
 		autoStartSessions: !0,
@@ -69,10 +69,10 @@ function D() {
 		autoUpdate: !0,
 		defaultEnvironmentVariables: null
 	});
-	d(() => {
+	f(() => {
 		H && (q(H.notifications), Y(H.workspaceDefaults));
 	}, [H]);
-	let [X] = ee({ refetchQueries: ["MySettings", "SettingsPageData"] }), [Z] = te({ refetchQueries: ["MySettings", "SettingsPageData"] }), [Q] = t({ refetchQueries: ["MySettings", "SettingsPageData"] }), oe = u(async () => {
+	let [X] = r({ refetchQueries: ["MySettings", "SettingsPageData"] }), [Z] = ee({ refetchQueries: ["MySettings", "SettingsPageData"] }), [Q] = t({ refetchQueries: ["MySettings", "SettingsPageData"] }), oe = d(async () => {
 		P(!0), I(null);
 		try {
 			j === "notifications" && await X({ variables: { input: {
@@ -117,7 +117,7 @@ function D() {
 		X,
 		Z,
 		J
-	]), se = u(async () => {
+	]), se = d(async () => {
 		let e = {
 			notifications: "NOTIFICATIONS",
 			workspace: "WORKSPACE_DEFAULTS",
@@ -162,15 +162,15 @@ function D() {
 			description: z("settings.advancedDesc", "Logging, telemetry, secrets")
 		}
 	], ce = A ? $ : $.filter((e) => e.id === "notifications");
-	return d(() => {
+	return f(() => {
 		!A && j !== "notifications" && M("notifications");
 	}, [j, A]), O || U && !H ? /* @__PURE__ */ x(E, {
-		className: "min-h-screen flex items-center justify-center bg-bg-surface p-4 sm:p-6",
-		children: /* @__PURE__ */ x(r, { message: z("settings.loading", "Loading settings...") })
+		className: "min-h-screen flex items-center justify-center bg-bg-canvas px-6 lg:px-8 py-6",
+		children: /* @__PURE__ */ x(i, { message: z("settings.loading", "Loading settings...") })
 	}) : /* @__PURE__ */ S(E, {
-		className: "min-h-screen space-y-6 bg-bg-surface p-4 sm:p-6",
+		className: "min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6",
 		children: [
-			/* @__PURE__ */ x(ie, {
+			/* @__PURE__ */ x(re, {
 				title: z("nav.settings", "Settings"),
 				description: z("settings.description", "Configure VibeControls preferences and workspace defaults"),
 				actions: A ? /* @__PURE__ */ S("div", {
@@ -179,24 +179,24 @@ function D() {
 					children: [/* @__PURE__ */ S("button", {
 						type: "button",
 						onClick: se,
-						className: "flex items-center gap-2 rounded-md border border-border-default px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary",
+						className: "flex items-center gap-2 rounded-button border border-border-default px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary hover:border-border-strong",
 						title: z("settings.resetToDefaults", "Reset to defaults"),
-						children: [/* @__PURE__ */ x(_, { className: "size-4" }), z("settings.reset", "Reset")]
+						children: [/* @__PURE__ */ x(ie, { className: "size-4" }), z("settings.reset", "Reset")]
 					}), /* @__PURE__ */ x(C, {
-						permission: a.CONFIG_UPDATE,
+						permission: o.CONFIG_UPDATE,
 						children: /* @__PURE__ */ S("button", {
 							type: "button",
 							onClick: oe,
 							disabled: N || U,
-							className: "flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50",
-							children: [N ? /* @__PURE__ */ x(g, { className: "size-4 animate-spin" }) : /* @__PURE__ */ x(v, { className: "size-4" }), z("common.save", "Save")]
+							className: "flex items-center gap-2 rounded-button bg-action-primary-bg px-4 py-2 text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50",
+							children: [N ? /* @__PURE__ */ x(_, { className: "size-4 animate-spin" }) : /* @__PURE__ */ x(v, { className: "size-4" }), z("common.save", "Save")]
 						})
 					})]
 				}) : void 0
 			}),
 			F ? /* @__PURE__ */ x("div", {
 				role: F.tone === "error" ? "alert" : "status",
-				className: `rounded-lg border px-4 py-3 text-sm ${F.tone === "error" ? "border-status-error-border bg-status-error-bg/10 text-status-error-text" : "border-status-success-border bg-status-success-bg/10 text-status-success-text"}`,
+				className: `rounded-card border px-4 py-3 text-sm ${F.tone === "error" ? "border-status-error-border bg-status-error-bg-subtle text-status-error-text" : "border-status-success-border bg-status-success-bg-subtle text-status-success-text"}`,
 				children: F.message
 			}) : null,
 			/* @__PURE__ */ S("div", {
@@ -205,22 +205,34 @@ function D() {
 					"data-tour": "settings-section-nav",
 					className: "w-full flex-shrink-0 lg:w-64",
 					"aria-label": z("settings.sections", "Settings sections"),
-					children: /* @__PURE__ */ x(i, {
+					children: /* @__PURE__ */ x(a, {
 						className: "p-2",
 						children: /* @__PURE__ */ x(T, {
 							stagger: .04,
-							children: ce.map((e) => /* @__PURE__ */ x(w, { children: /* @__PURE__ */ S("button", {
-								type: "button",
-								onClick: () => M(e.id),
-								className: `flex w-full items-center justify-between rounded-md px-3 py-2 text-left transition-colors ${j === e.id ? "bg-action-primary-bg/10 font-medium text-action-primary-bg" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
-								children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("div", {
-									className: "text-sm font-medium",
-									children: e.label
-								}), /* @__PURE__ */ x("div", {
-									className: "text-xs opacity-70",
-									children: e.description
-								})] }), /* @__PURE__ */ x(h, { className: "size-4" })]
-							}) }, e.id))
+							className: "space-y-0.5",
+							children: ce.map((e) => {
+								let t = j === e.id;
+								return /* @__PURE__ */ x(w, { children: /* @__PURE__ */ S("button", {
+									type: "button",
+									onClick: () => M(e.id),
+									"aria-current": t ? "true" : void 0,
+									className: `relative flex w-full items-center justify-between rounded-button px-3 py-2 text-left transition-colors ${t ? "bg-[var(--color-accent-soft)] font-medium text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"}`,
+									children: [
+										t && /* @__PURE__ */ x("span", {
+											"aria-hidden": "true",
+											className: "absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-action-primary-bg"
+										}),
+										/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("div", {
+											className: "text-sm font-medium",
+											children: e.label
+										}), /* @__PURE__ */ x("div", {
+											className: "text-xs text-text-muted",
+											children: e.description
+										})] }),
+										/* @__PURE__ */ x(g, { className: "size-4" })
+									]
+								}) }, e.id);
+							})
 						})
 					})
 				}), /* @__PURE__ */ x("div", {
@@ -228,22 +240,22 @@ function D() {
 					className: "flex-1",
 					children: U && !H ? /* @__PURE__ */ S("div", {
 						className: "flex items-center justify-center py-12 text-text-secondary",
-						children: [/* @__PURE__ */ x(g, { className: "size-5 animate-spin" }), /* @__PURE__ */ x("span", {
+						children: [/* @__PURE__ */ x(_, { className: "size-5 animate-spin" }), /* @__PURE__ */ x("span", {
 							className: "ml-2",
 							children: z("settings.loading", "Loading settings...")
 						})]
 					}) : /* @__PURE__ */ S(b, { children: [
-						j === "notifications" ? /* @__PURE__ */ x(s, {
+						j === "notifications" ? /* @__PURE__ */ x(c, {
 							data: K,
 							onChange: q
 						}) : null,
-						j === "editor" ? /* @__PURE__ */ x(l, {}) : null,
-						j === "workspace" ? /* @__PURE__ */ x(c, {
+						j === "editor" ? /* @__PURE__ */ x(u, {}) : null,
+						j === "workspace" ? /* @__PURE__ */ x(l, {
 							data: J,
 							onChange: Y,
 							agents: R
 						}) : null,
-						j === "advanced" ? /* @__PURE__ */ x(o, {
+						j === "advanced" ? /* @__PURE__ */ x(s, {
 							data: {
 								logLevel: J.logLevel,
 								telemetryEnabled: J.telemetryEnabled,

package/dist/pages/SettingsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../src/pages/SettingsPage.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronRight, RefreshCw, RotateCcw, Save } from 'lucide-react';\nimport { MotionItem, MotionList, MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { PermissionButton } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Card, PageHeader, LoadingState } from '@/components/shared';\nimport { AdvancedSection } from '@/components/settings/AdvancedSection';\nimport { NotificationsSection } from '@/components/settings/NotificationsSection';\nimport { WorkspaceDefaultsSection } from '@/components/settings/WorkspaceDefaultsSection';\nimport { IdePreferencesSection } from '@/components/settings/IdePreferencesSection';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport {\n  useMySettingsQuery,\n  useResetSettingsMutation,\n  useSettingsPageDataQuery,\n  useUpdateNotificationPreferencesMutation,\n  useUpdateWorkspaceDefaultsMutation,\n} from '@/generated/wspace-operations';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\ntype SettingsSection = 'notifications' | 'workspace' | 'advanced' | 'editor';\n\nexport function SettingsPage() {\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const { workspaceId } = useVibeControls();\n  const { t } = useI18n();\n  const canUpdateConfigs = hasPermission(VIBE_PERMISSIONS.CONFIG_UPDATE);\n\n  const [activeSection, setActiveSection] = useState<SettingsSection>('notifications');\n  const [isSaving, setIsSaving] = useState(false);\n  const [feedback, setFeedback] = useState<{ tone: 'success' | 'error'; message: string } | null>(\n    null\n  );\n\n  const { agents: cachedAgents } = useCachedInitialData();\n  const agents = useMemo(\n    () =>\n      cachedAgents.map((agent) => ({ id: agent.id, name: agent.name, isActive: agent.isActive })),\n    [cachedAgents]\n  );\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const settingsPageQuery = useSettingsPageDataQuery({\n    skip: permissionsLoading || !canUpdateConfigs,\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const mySettingsQuery = useMySettingsQuery({\n    skip: permissionsLoading || canUpdateConfigs,\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const settingsData = settingsPageQuery.data?.mySettings ?? mySettingsQuery.data?.mySettings;\n  const settingsLoading = settingsPageQuery.loading || mySettingsQuery.loading;\n  const secrets = useMemo(\n    () =>\n      (settingsPageQuery.data?.listSettingsSecrets ?? []).map(\n        (secret: NonNullable<(typeof settingsPageQuery.data)['listSettingsSecrets']>[number]) => ({\n          id: secret.id,\n          key: secret.key,\n          value: secret.value ?? null,\n          isSecret: secret.isSecret,\n        })\n      ),\n    [settingsPageQuery.data?.listSettingsSecrets]\n  );\n\n  const refetchSettings = useCallback(async () => {\n    if (canUpdateConfigs) {\n      await settingsPageQuery.refetch();\n      return;\n    }\n\n    await mySettingsQuery.refetch();\n  }, [canUpdateConfigs, mySettingsQuery, settingsPageQuery]);\n\n  const [notifications, setNotifications] = useState({\n    agentOffline: true,\n    sessionError: true,\n    vibeStatusChange: false,\n    emailDigest: false,\n    digestFrequency: 'none' as string | null,\n  });\n\n  const [workspaceDefaults, setWorkspaceDefaults] = useState({\n    defaultAgent: null as string | null,\n    defaultSessionType: 'TMUX',\n    autoStartSessions: true,\n    defaultVibeType: 'PROJECT',\n    autoGitSync: false,\n    agentHeartbeatInterval: 30,\n    agentAutoReconnect: true,\n    agentMaxSessions: 10,\n    logLevel: 'info',\n    telemetryEnabled: true,\n    autoUpdate: true,\n    defaultEnvironmentVariables: null as string | null,\n  });\n\n  useEffect(() => {\n    if (!settingsData) {\n      return;\n    }\n\n    setNotifications(settingsData.notifications);\n    setWorkspaceDefaults(settingsData.workspaceDefaults);\n  }, [settingsData]);\n\n  const [updateNotificationsMutation] = useUpdateNotificationPreferencesMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n  const [updateWorkspaceDefaultsMutation] = useUpdateWorkspaceDefaultsMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n  const [resetSettingsMutation] = useResetSettingsMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n\n  const handleSave = useCallback(async () => {\n    setIsSaving(true);\n    setFeedback(null);\n\n    try {\n      if (activeSection === 'notifications') {\n        await updateNotificationsMutation({\n          variables: {\n            input: {\n              agentOffline: notifications.agentOffline,\n              sessionError: notifications.sessionError,\n              vibeStatusChange: notifications.vibeStatusChange,\n              emailDigest: notifications.emailDigest,\n              digestFrequency: notifications.digestFrequency,\n            },\n          },\n        });\n      }\n\n      if (activeSection === 'workspace') {\n        await updateWorkspaceDefaultsMutation({\n          variables: {\n            input: {\n              defaultAgent: workspaceDefaults.defaultAgent,\n              defaultSessionType: workspaceDefaults.defaultSessionType,\n              autoStartSessions: workspaceDefaults.autoStartSessions,\n              defaultVibeType: workspaceDefaults.defaultVibeType,\n              autoGitSync: workspaceDefaults.autoGitSync,\n              agentHeartbeatInterval: workspaceDefaults.agentHeartbeatInterval,\n              agentAutoReconnect: workspaceDefaults.agentAutoReconnect,\n              agentMaxSessions: workspaceDefaults.agentMaxSessions,\n              logLevel: workspaceDefaults.logLevel,\n              telemetryEnabled: workspaceDefaults.telemetryEnabled,\n              autoUpdate: workspaceDefaults.autoUpdate,\n              defaultEnvironmentVariables: workspaceDefaults.defaultEnvironmentVariables,\n            },\n          },\n        });\n      }\n\n      if (activeSection === 'advanced') {\n        await updateWorkspaceDefaultsMutation({\n          variables: {\n            input: {\n              logLevel: workspaceDefaults.logLevel,\n              telemetryEnabled: workspaceDefaults.telemetryEnabled,\n              autoUpdate: workspaceDefaults.autoUpdate,\n            },\n          },\n        });\n      }\n\n      setFeedback({\n        tone: 'success',\n        message: tr('settings.saveSuccess', 'Settings saved successfully.'),\n      });\n    } catch (saveError) {\n      console.error('Failed to save settings:', saveError);\n      setFeedback({\n        tone: 'error',\n        message:\n          saveError instanceof Error\n            ? saveError.message\n            : tr('settings.saveFailed', 'Failed to save settings.'),\n      });\n    } finally {\n      setIsSaving(false);\n    }\n  }, [\n    activeSection,\n    notifications,\n    tr,\n    updateNotificationsMutation,\n    updateWorkspaceDefaultsMutation,\n    workspaceDefaults,\n  ]);\n\n  const handleReset = useCallback(async () => {\n    const categoryMap: Record<\n      SettingsSection,\n      'NOTIFICATIONS' | 'WORKSPACE_DEFAULTS' | 'ADVANCED' | 'PREFERENCES'\n    > = {\n      notifications: 'NOTIFICATIONS',\n      workspace: 'WORKSPACE_DEFAULTS',\n      editor: 'PREFERENCES',\n      advanced: 'ADVANCED',\n    };\n\n    try {\n      setFeedback(null);\n      await resetSettingsMutation({ variables: { category: categoryMap[activeSection] as never } });\n      await refetchSettings();\n      setFeedback({\n        tone: 'success',\n        message: tr('settings.resetSuccess', 'Settings reset to defaults.'),\n      });\n    } catch (resetError) {\n      console.error('Failed to reset settings:', resetError);\n      setFeedback({\n        tone: 'error',\n        message:\n          resetError instanceof Error\n            ? resetError.message\n            : tr('settings.resetFailed', 'Failed to reset settings.'),\n      });\n    }\n  }, [activeSection, refetchSettings, resetSettingsMutation, tr]);\n\n  const sections: Array<{ id: SettingsSection; label: string; description: string }> = [\n    {\n      id: 'notifications',\n      label: tr('settings.notifications', 'Notifications'),\n      description: tr('settings.notificationsDesc', 'Alert preferences'),\n    },\n    {\n      id: 'workspace',\n      label: tr('settings.workspace', 'Workspace'),\n      description: tr('settings.workspaceDesc', 'Agent, session, vibe defaults'),\n    },\n    {\n      id: 'editor',\n      label: tr('settings.editor', 'Code Editor'),\n      description: tr('settings.editorDesc', 'Default IDE + per-Vibe overrides'),\n    },\n    {\n      id: 'advanced',\n      label: tr('settings.advanced', 'Advanced'),\n      description: tr('settings.advancedDesc', 'Logging, telemetry, secrets'),\n    },\n  ];\n\n  const visibleSections = canUpdateConfigs\n    ? sections\n    : sections.filter((section) => section.id === 'notifications');\n\n  useEffect(() => {\n    if (!canUpdateConfigs && activeSection !== 'notifications') {\n      setActiveSection('notifications');\n    }\n  }, [activeSection, canUpdateConfigs]);\n\n  if (permissionsLoading || (settingsLoading && !settingsData)) {\n    return (\n      <MotionPage className=\"min-h-screen flex items-center justify-center bg-bg-surface p-4 sm:p-6\">\n        <LoadingState message={tr('settings.loading', 'Loading settings...')} />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"min-h-screen space-y-6 bg-bg-surface p-4 sm:p-6\">\n      <PageHeader\n        title={tr('nav.settings', 'Settings')}\n        description={tr(\n          'settings.description',\n          'Configure VibeControls preferences and workspace defaults'\n        )}\n        actions={\n          canUpdateConfigs ? (\n            <div data-tour=\"settings-actions\" className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={handleReset}\n                className=\"flex items-center gap-2 rounded-md border border-border-default px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary\"\n                title={tr('settings.resetToDefaults', 'Reset to defaults')}\n              >\n                <RotateCcw className=\"size-4\" />\n                {tr('settings.reset', 'Reset')}\n              </button>\n\n              <PermissionButton permission={VIBE_PERMISSIONS.CONFIG_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleSave}\n                  disabled={isSaving || settingsLoading}\n                  className=\"flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50\"\n                >\n                  {isSaving ? (\n                    <RefreshCw className=\"size-4 animate-spin\" />\n                  ) : (\n                    <Save className=\"size-4\" />\n                  )}\n                  {tr('common.save', 'Save')}\n                </button>\n              </PermissionButton>\n            </div>\n          ) : undefined\n        }\n      />\n\n      {feedback ? (\n        <div\n          role={feedback.tone === 'error' ? 'alert' : 'status'}\n          className={`rounded-lg border px-4 py-3 text-sm ${\n            feedback.tone === 'error'\n              ? 'border-status-error-border bg-status-error-bg/10 text-status-error-text'\n              : 'border-status-success-border bg-status-success-bg/10 text-status-success-text'\n          }`}\n        >\n          {feedback.message}\n        </div>\n      ) : null}\n\n      <div className=\"flex flex-col gap-6 lg:flex-row\">\n        <nav\n          data-tour=\"settings-section-nav\"\n          className=\"w-full flex-shrink-0 lg:w-64\"\n          aria-label={tr('settings.sections', 'Settings sections')}\n        >\n          <Card className=\"p-2\">\n            <MotionList stagger={0.04}>\n              {visibleSections.map((section) => (\n                <MotionItem key={section.id}>\n                  <button\n                    type=\"button\"\n                    onClick={() => setActiveSection(section.id)}\n                    className={`flex w-full items-center justify-between rounded-md px-3 py-2 text-left transition-colors ${\n                      activeSection === section.id\n                        ? 'bg-action-primary-bg/10 font-medium text-action-primary-bg'\n                        : 'text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n                    }`}\n                  >\n                    <div>\n                      <div className=\"text-sm font-medium\">{section.label}</div>\n                      <div className=\"text-xs opacity-70\">{section.description}</div>\n                    </div>\n                    <ChevronRight className=\"size-4\" />\n                  </button>\n                </MotionItem>\n              ))}\n            </MotionList>\n          </Card>\n        </nav>\n\n        <div data-tour=\"settings-content-area\" className=\"flex-1\">\n          {settingsLoading && !settingsData ? (\n            <div className=\"flex items-center justify-center py-12 text-text-secondary\">\n              <RefreshCw className=\"size-5 animate-spin\" />\n              <span className=\"ml-2\">{tr('settings.loading', 'Loading settings...')}</span>\n            </div>\n          ) : (\n            <>\n              {activeSection === 'notifications' ? (\n                <NotificationsSection data={notifications} onChange={setNotifications} />\n              ) : null}\n\n              {activeSection === 'editor' ? <IdePreferencesSection /> : null}\n\n              {activeSection === 'workspace' ? (\n                <WorkspaceDefaultsSection\n                  data={workspaceDefaults}\n                  onChange={setWorkspaceDefaults}\n                  agents={agents}\n                />\n              ) : null}\n\n              {activeSection === 'advanced' ? (\n                <AdvancedSection\n                  data={{\n                    logLevel: workspaceDefaults.logLevel,\n                    telemetryEnabled: workspaceDefaults.telemetryEnabled,\n                    autoUpdate: workspaceDefaults.autoUpdate,\n                  }}\n                  onChange={(advanced) =>\n                    setWorkspaceDefaults((previous) => ({\n                      ...previous,\n                      logLevel: advanced.logLevel,\n                      telemetryEnabled: advanced.telemetryEnabled,\n                      autoUpdate: advanced.autoUpdate,\n                    }))\n                  }\n                  secrets={secrets}\n                  secretsLoading={settingsPageQuery.loading && canUpdateConfigs}\n                  onRefreshSecrets={async () => {\n                    if (canUpdateConfigs) {\n                      await settingsPageQuery.refetch();\n                    }\n                  }}\n                  workspaceId={workspaceId || ''}\n                />\n              ) : null}\n            </>\n          )}\n        </div>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SettingsPage.js","names":[],"sources":["../../src/pages/SettingsPage.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { ChevronRight, RefreshCw, RotateCcw, Save } from 'lucide-react';\nimport { MotionItem, MotionList, MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport { PermissionButton } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { Card, PageHeader, LoadingState } from '@/components/shared';\nimport { AdvancedSection } from '@/components/settings/AdvancedSection';\nimport { NotificationsSection } from '@/components/settings/NotificationsSection';\nimport { WorkspaceDefaultsSection } from '@/components/settings/WorkspaceDefaultsSection';\nimport { IdePreferencesSection } from '@/components/settings/IdePreferencesSection';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport {\n  useMySettingsQuery,\n  useResetSettingsMutation,\n  useSettingsPageDataQuery,\n  useUpdateNotificationPreferencesMutation,\n  useUpdateWorkspaceDefaultsMutation,\n} from '@/generated/wspace-operations';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\ntype SettingsSection = 'notifications' | 'workspace' | 'advanced' | 'editor';\n\nexport function SettingsPage() {\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const { workspaceId } = useVibeControls();\n  const { t } = useI18n();\n  const canUpdateConfigs = hasPermission(VIBE_PERMISSIONS.CONFIG_UPDATE);\n\n  const [activeSection, setActiveSection] = useState<SettingsSection>('notifications');\n  const [isSaving, setIsSaving] = useState(false);\n  const [feedback, setFeedback] = useState<{ tone: 'success' | 'error'; message: string } | null>(\n    null\n  );\n\n  const { agents: cachedAgents } = useCachedInitialData();\n  const agents = useMemo(\n    () =>\n      cachedAgents.map((agent) => ({ id: agent.id, name: agent.name, isActive: agent.isActive })),\n    [cachedAgents]\n  );\n\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const settingsPageQuery = useSettingsPageDataQuery({\n    skip: permissionsLoading || !canUpdateConfigs,\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const mySettingsQuery = useMySettingsQuery({\n    skip: permissionsLoading || canUpdateConfigs,\n    fetchPolicy: 'cache-and-network',\n    notifyOnNetworkStatusChange: true,\n  });\n\n  const settingsData = settingsPageQuery.data?.mySettings ?? mySettingsQuery.data?.mySettings;\n  const settingsLoading = settingsPageQuery.loading || mySettingsQuery.loading;\n  const secrets = useMemo(\n    () =>\n      (settingsPageQuery.data?.listSettingsSecrets ?? []).map(\n        (secret: NonNullable<(typeof settingsPageQuery.data)['listSettingsSecrets']>[number]) => ({\n          id: secret.id,\n          key: secret.key,\n          value: secret.value ?? null,\n          isSecret: secret.isSecret,\n        })\n      ),\n    [settingsPageQuery.data?.listSettingsSecrets]\n  );\n\n  const refetchSettings = useCallback(async () => {\n    if (canUpdateConfigs) {\n      await settingsPageQuery.refetch();\n      return;\n    }\n\n    await mySettingsQuery.refetch();\n  }, [canUpdateConfigs, mySettingsQuery, settingsPageQuery]);\n\n  const [notifications, setNotifications] = useState({\n    agentOffline: true,\n    sessionError: true,\n    vibeStatusChange: false,\n    emailDigest: false,\n    digestFrequency: 'none' as string | null,\n  });\n\n  const [workspaceDefaults, setWorkspaceDefaults] = useState({\n    defaultAgent: null as string | null,\n    defaultSessionType: 'TMUX',\n    autoStartSessions: true,\n    defaultVibeType: 'PROJECT',\n    autoGitSync: false,\n    agentHeartbeatInterval: 30,\n    agentAutoReconnect: true,\n    agentMaxSessions: 10,\n    logLevel: 'info',\n    telemetryEnabled: true,\n    autoUpdate: true,\n    defaultEnvironmentVariables: null as string | null,\n  });\n\n  useEffect(() => {\n    if (!settingsData) {\n      return;\n    }\n\n    setNotifications(settingsData.notifications);\n    setWorkspaceDefaults(settingsData.workspaceDefaults);\n  }, [settingsData]);\n\n  const [updateNotificationsMutation] = useUpdateNotificationPreferencesMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n  const [updateWorkspaceDefaultsMutation] = useUpdateWorkspaceDefaultsMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n  const [resetSettingsMutation] = useResetSettingsMutation({\n    refetchQueries: ['MySettings', 'SettingsPageData'],\n  });\n\n  const handleSave = useCallback(async () => {\n    setIsSaving(true);\n    setFeedback(null);\n\n    try {\n      if (activeSection === 'notifications') {\n        await updateNotificationsMutation({\n          variables: {\n            input: {\n              agentOffline: notifications.agentOffline,\n              sessionError: notifications.sessionError,\n              vibeStatusChange: notifications.vibeStatusChange,\n              emailDigest: notifications.emailDigest,\n              digestFrequency: notifications.digestFrequency,\n            },\n          },\n        });\n      }\n\n      if (activeSection === 'workspace') {\n        await updateWorkspaceDefaultsMutation({\n          variables: {\n            input: {\n              defaultAgent: workspaceDefaults.defaultAgent,\n              defaultSessionType: workspaceDefaults.defaultSessionType,\n              autoStartSessions: workspaceDefaults.autoStartSessions,\n              defaultVibeType: workspaceDefaults.defaultVibeType,\n              autoGitSync: workspaceDefaults.autoGitSync,\n              agentHeartbeatInterval: workspaceDefaults.agentHeartbeatInterval,\n              agentAutoReconnect: workspaceDefaults.agentAutoReconnect,\n              agentMaxSessions: workspaceDefaults.agentMaxSessions,\n              logLevel: workspaceDefaults.logLevel,\n              telemetryEnabled: workspaceDefaults.telemetryEnabled,\n              autoUpdate: workspaceDefaults.autoUpdate,\n              defaultEnvironmentVariables: workspaceDefaults.defaultEnvironmentVariables,\n            },\n          },\n        });\n      }\n\n      if (activeSection === 'advanced') {\n        await updateWorkspaceDefaultsMutation({\n          variables: {\n            input: {\n              logLevel: workspaceDefaults.logLevel,\n              telemetryEnabled: workspaceDefaults.telemetryEnabled,\n              autoUpdate: workspaceDefaults.autoUpdate,\n            },\n          },\n        });\n      }\n\n      setFeedback({\n        tone: 'success',\n        message: tr('settings.saveSuccess', 'Settings saved successfully.'),\n      });\n    } catch (saveError) {\n      console.error('Failed to save settings:', saveError);\n      setFeedback({\n        tone: 'error',\n        message:\n          saveError instanceof Error\n            ? saveError.message\n            : tr('settings.saveFailed', 'Failed to save settings.'),\n      });\n    } finally {\n      setIsSaving(false);\n    }\n  }, [\n    activeSection,\n    notifications,\n    tr,\n    updateNotificationsMutation,\n    updateWorkspaceDefaultsMutation,\n    workspaceDefaults,\n  ]);\n\n  const handleReset = useCallback(async () => {\n    const categoryMap: Record<\n      SettingsSection,\n      'NOTIFICATIONS' | 'WORKSPACE_DEFAULTS' | 'ADVANCED' | 'PREFERENCES'\n    > = {\n      notifications: 'NOTIFICATIONS',\n      workspace: 'WORKSPACE_DEFAULTS',\n      editor: 'PREFERENCES',\n      advanced: 'ADVANCED',\n    };\n\n    try {\n      setFeedback(null);\n      await resetSettingsMutation({ variables: { category: categoryMap[activeSection] as never } });\n      await refetchSettings();\n      setFeedback({\n        tone: 'success',\n        message: tr('settings.resetSuccess', 'Settings reset to defaults.'),\n      });\n    } catch (resetError) {\n      console.error('Failed to reset settings:', resetError);\n      setFeedback({\n        tone: 'error',\n        message:\n          resetError instanceof Error\n            ? resetError.message\n            : tr('settings.resetFailed', 'Failed to reset settings.'),\n      });\n    }\n  }, [activeSection, refetchSettings, resetSettingsMutation, tr]);\n\n  const sections: Array<{ id: SettingsSection; label: string; description: string }> = [\n    {\n      id: 'notifications',\n      label: tr('settings.notifications', 'Notifications'),\n      description: tr('settings.notificationsDesc', 'Alert preferences'),\n    },\n    {\n      id: 'workspace',\n      label: tr('settings.workspace', 'Workspace'),\n      description: tr('settings.workspaceDesc', 'Agent, session, vibe defaults'),\n    },\n    {\n      id: 'editor',\n      label: tr('settings.editor', 'Code Editor'),\n      description: tr('settings.editorDesc', 'Default IDE + per-Vibe overrides'),\n    },\n    {\n      id: 'advanced',\n      label: tr('settings.advanced', 'Advanced'),\n      description: tr('settings.advancedDesc', 'Logging, telemetry, secrets'),\n    },\n  ];\n\n  const visibleSections = canUpdateConfigs\n    ? sections\n    : sections.filter((section) => section.id === 'notifications');\n\n  useEffect(() => {\n    if (!canUpdateConfigs && activeSection !== 'notifications') {\n      setActiveSection('notifications');\n    }\n  }, [activeSection, canUpdateConfigs]);\n\n  if (permissionsLoading || (settingsLoading && !settingsData)) {\n    return (\n      <MotionPage className=\"min-h-screen flex items-center justify-center bg-bg-canvas px-6 lg:px-8 py-6\">\n        <LoadingState message={tr('settings.loading', 'Loading settings...')} />\n      </MotionPage>\n    );\n  }\n\n  return (\n    <MotionPage className=\"min-h-screen space-y-6 bg-bg-canvas px-6 lg:px-8 py-6\">\n      <PageHeader\n        title={tr('nav.settings', 'Settings')}\n        description={tr(\n          'settings.description',\n          'Configure VibeControls preferences and workspace defaults'\n        )}\n        actions={\n          canUpdateConfigs ? (\n            <div data-tour=\"settings-actions\" className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={handleReset}\n                className=\"flex items-center gap-2 rounded-button border border-border-default px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary hover:border-border-strong\"\n                title={tr('settings.resetToDefaults', 'Reset to defaults')}\n              >\n                <RotateCcw className=\"size-4\" />\n                {tr('settings.reset', 'Reset')}\n              </button>\n\n              <PermissionButton permission={VIBE_PERMISSIONS.CONFIG_UPDATE}>\n                <button\n                  type=\"button\"\n                  onClick={handleSave}\n                  disabled={isSaving || settingsLoading}\n                  className=\"flex items-center gap-2 rounded-button bg-action-primary-bg px-4 py-2 text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50\"\n                >\n                  {isSaving ? (\n                    <RefreshCw className=\"size-4 animate-spin\" />\n                  ) : (\n                    <Save className=\"size-4\" />\n                  )}\n                  {tr('common.save', 'Save')}\n                </button>\n              </PermissionButton>\n            </div>\n          ) : undefined\n        }\n      />\n\n      {feedback ? (\n        <div\n          role={feedback.tone === 'error' ? 'alert' : 'status'}\n          className={`rounded-card border px-4 py-3 text-sm ${\n            feedback.tone === 'error'\n              ? 'border-status-error-border bg-status-error-bg-subtle text-status-error-text'\n              : 'border-status-success-border bg-status-success-bg-subtle text-status-success-text'\n          }`}\n        >\n          {feedback.message}\n        </div>\n      ) : null}\n\n      <div className=\"flex flex-col gap-6 lg:flex-row\">\n        <nav\n          data-tour=\"settings-section-nav\"\n          className=\"w-full flex-shrink-0 lg:w-64\"\n          aria-label={tr('settings.sections', 'Settings sections')}\n        >\n          <Card className=\"p-2\">\n            <MotionList stagger={0.04} className=\"space-y-0.5\">\n              {visibleSections.map((section) => {\n                const isActive = activeSection === section.id;\n                return (\n                  <MotionItem key={section.id}>\n                    <button\n                      type=\"button\"\n                      onClick={() => setActiveSection(section.id)}\n                      aria-current={isActive ? 'true' : undefined}\n                      className={`relative flex w-full items-center justify-between rounded-button px-3 py-2 text-left transition-colors ${\n                        isActive\n                          ? 'bg-[var(--color-accent-soft)] font-medium text-text-primary'\n                          : 'text-text-secondary hover:bg-bg-sunken hover:text-text-primary'\n                      }`}\n                    >\n                      {isActive && (\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-action-primary-bg\"\n                        />\n                      )}\n                      <div>\n                        <div className=\"text-sm font-medium\">{section.label}</div>\n                        <div className=\"text-xs text-text-muted\">{section.description}</div>\n                      </div>\n                      <ChevronRight className=\"size-4\" />\n                    </button>\n                  </MotionItem>\n                );\n              })}\n            </MotionList>\n          </Card>\n        </nav>\n\n        <div data-tour=\"settings-content-area\" className=\"flex-1\">\n          {settingsLoading && !settingsData ? (\n            <div className=\"flex items-center justify-center py-12 text-text-secondary\">\n              <RefreshCw className=\"size-5 animate-spin\" />\n              <span className=\"ml-2\">{tr('settings.loading', 'Loading settings...')}</span>\n            </div>\n          ) : (\n            <>\n              {activeSection === 'notifications' ? (\n                <NotificationsSection data={notifications} onChange={setNotifications} />\n              ) : null}\n\n              {activeSection === 'editor' ? <IdePreferencesSection /> : null}\n\n              {activeSection === 'workspace' ? (\n                <WorkspaceDefaultsSection\n                  data={workspaceDefaults}\n                  onChange={setWorkspaceDefaults}\n                  agents={agents}\n                />\n              ) : null}\n\n              {activeSection === 'advanced' ? (\n                <AdvancedSection\n                  data={{\n                    logLevel: workspaceDefaults.logLevel,\n                    telemetryEnabled: workspaceDefaults.telemetryEnabled,\n                    autoUpdate: workspaceDefaults.autoUpdate,\n                  }}\n                  onChange={(advanced) =>\n                    setWorkspaceDefaults((previous) => ({\n                      ...previous,\n                      logLevel: advanced.logLevel,\n                      telemetryEnabled: advanced.telemetryEnabled,\n                      autoUpdate: advanced.autoUpdate,\n                    }))\n                  }\n                  secrets={secrets}\n                  secretsLoading={settingsPageQuery.loading && canUpdateConfigs}\n                  onRefreshSecrets={async () => {\n                    if (canUpdateConfigs) {\n                      await settingsPageQuery.refetch();\n                    }\n                  }}\n                  workspaceId={workspaceId || ''}\n                />\n              ) : null}\n            </>\n          )}\n        </div>\n      </div>\n    </MotionPage>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/SharedSessionPage.js

@@ -35,7 +35,7 @@ function pe({ onSubmit: e, isLoading: t, error: n }) {
 				})]
 			})] }),
 			n && /* @__PURE__ */ b("div", {
-				className: "flex items-center gap-2 p-3 bg-status-error-bg/10 border border-status-error-bg/30 rounded-lg",
+				className: "flex items-center gap-2 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 				children: [/* @__PURE__ */ y(u, { className: "size-4 text-status-error-text" }), /* @__PURE__ */ y("span", {
 					className: "text-sm text-status-error-text",
 					children: n
@@ -147,7 +147,7 @@ function x() {
 		}
 	}, [T, V]), Ce = K.find((e) => e.userId === F), Q = R?.permission || a.View, $ = se(() => R?.ttydUrl || null, [R?.ttydUrl]);
 	return ve ? /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ y(m, { className: "size-8 text-action-primary-bg animate-spin mx-auto mb-4" }), /* @__PURE__ */ y("p", {
@@ -156,12 +156,12 @@ function x() {
 			})]
 		})
 	}) : I || !R ? /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center p-4",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center p-4",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center max-w-md",
 			children: [
 				/* @__PURE__ */ y("div", {
-					className: "size-16 bg-status-error-bg/10 rounded-full flex items-center justify-center mx-auto mb-4",
+					className: "size-16 bg-status-error-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4",
 					children: /* @__PURE__ */ y(u, { className: "size-8 text-status-error-text" })
 				}),
 				/* @__PURE__ */ y("h2", {
@@ -175,23 +175,23 @@ function x() {
 				/* @__PURE__ */ b("button", {
 					type: "button",
 					onClick: () => window.history.back(),
-					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors",
 					children: [/* @__PURE__ */ y(d, { className: "size-4" }), x("sharedSession.goBack", "Go Back")]
 				})
 			]
 		})
 	}) : R.isValid ? R.requiresPassword && !C ? /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center p-4",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center p-4",
 		children: /* @__PURE__ */ y("div", {
 			className: "w-full max-w-md",
 			children: /* @__PURE__ */ b("div", {
-				className: "bg-bg-surface border border-border-default rounded-lg p-6",
+				className: "bg-bg-surface border border-border-subtle rounded-card p-6 shadow-elevation-1",
 				children: [
 					/* @__PURE__ */ b("div", {
 						className: "text-center mb-6",
 						children: [
 							/* @__PURE__ */ y("div", {
-								className: "size-12 bg-action-primary-bg/10 rounded-full flex items-center justify-center mx-auto mb-4",
+								className: "size-12 bg-[var(--color-accent-soft)] rounded-full flex items-center justify-center mx-auto mb-4",
 								children: /* @__PURE__ */ y(_, { className: "size-6 text-action-primary-bg" })
 							}),
 							/* @__PURE__ */ y("h2", {
@@ -211,7 +211,7 @@ function x() {
 					/* @__PURE__ */ y("div", {
 						className: "flex justify-center mb-6",
 						children: /* @__PURE__ */ y("div", {
-							className: `inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm ${R.permission === a.View ? "bg-bg-sunken text-text-secondary" : "bg-action-primary-bg/10 text-action-primary-bg"}`,
+							className: `inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm ${R.permission === a.View ? "bg-bg-sunken text-text-secondary" : "bg-[var(--color-accent-soft)] text-action-primary-bg"}`,
 							children: R.permission === a.View ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "size-4" }), x("sharedSession.viewOnly", "View Only")] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, { className: "size-4" }), x("sharedSession.canControl", "Can Control")] })
 						})
 					}),
@@ -234,7 +234,7 @@ function x() {
 			})
 		})
 	}) : j ? /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center p-4",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center p-4",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center max-w-md",
 			children: [
@@ -255,7 +255,7 @@ function x() {
 					children: [/* @__PURE__ */ b("button", {
 						type: "button",
 						onClick: () => window.history.back(),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors",
 						children: [/* @__PURE__ */ y(d, { className: "size-4" }), x("sharedSession.goBack", "Go Back")]
 					}), /* @__PURE__ */ b("button", {
 						type: "button",
@@ -270,12 +270,12 @@ function x() {
 			]
 		})
 	}) : !C && !R.requiresPassword ? k ? /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center p-4",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center p-4",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center max-w-md",
 			children: [
 				/* @__PURE__ */ y("div", {
-					className: "size-16 bg-status-error-bg/10 rounded-full flex items-center justify-center mx-auto mb-4",
+					className: "size-16 bg-status-error-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4",
 					children: /* @__PURE__ */ y(u, { className: "size-8 text-status-error-text" })
 				}),
 				/* @__PURE__ */ y("h2", {
@@ -291,7 +291,7 @@ function x() {
 					children: [/* @__PURE__ */ b("button", {
 						type: "button",
 						onClick: () => window.history.back(),
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors",
 						children: [/* @__PURE__ */ y(d, { className: "size-4" }), x("sharedSession.goBack", "Go Back")]
 					}), /* @__PURE__ */ b("button", {
 						type: "button",
@@ -306,7 +306,7 @@ function x() {
 			]
 		})
 	}) : /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ y(m, { className: "size-8 text-action-primary-bg animate-spin mx-auto mb-4" }), /* @__PURE__ */ y("p", {
@@ -315,7 +315,7 @@ function x() {
 			})]
 		})
 	}) : /* @__PURE__ */ b(fe, {
-		className: "min-h-screen bg-bg-surface flex flex-col",
+		className: "min-h-screen bg-bg-canvas flex flex-col",
 		children: [/* @__PURE__ */ y("header", {
 			className: "bg-bg-surface border-b border-border-default px-4 py-3",
 			children: /* @__PURE__ */ b("div", {
@@ -332,7 +332,7 @@ function x() {
 					}), /* @__PURE__ */ b("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ y("div", {
-							className: "p-2 bg-action-primary-bg/10 rounded-lg",
+							className: "p-2 bg-[var(--color-accent-soft)] rounded-lg",
 							children: /* @__PURE__ */ y(_, { className: "size-5 text-action-primary-bg" })
 						}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 							className: "font-semibold text-text-primary",
@@ -349,7 +349,7 @@ function x() {
 				}), /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ y("div", {
-						className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${Q === a.View ? "bg-bg-sunken text-text-secondary" : "bg-action-primary-bg/10 text-action-primary-bg"}`,
+						className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${Q === a.View ? "bg-bg-sunken text-text-secondary" : "bg-[var(--color-accent-soft)] text-action-primary-bg"}`,
 						children: Q === a.View ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(f, { className: "size-3.5" }), x("sharedSession.viewOnly", "View Only")] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, { className: "size-3.5" }), x("sharedSession.interactive", "Interactive")] })
 					}), /* @__PURE__ */ b("div", {
 						className: "flex items-center gap-1.5 px-2.5 py-1 bg-bg-sunken rounded-full text-xs text-text-secondary",
@@ -446,12 +446,12 @@ function x() {
 			})]
 		})]
 	}) : /* @__PURE__ */ y("div", {
-		className: "min-h-screen bg-bg-surface flex items-center justify-center p-4",
+		className: "min-h-screen bg-bg-canvas flex items-center justify-center p-4",
 		children: /* @__PURE__ */ b("div", {
 			className: "text-center max-w-md",
 			children: [
 				/* @__PURE__ */ y("div", {
-					className: "size-16 bg-status-warning-bg/10 rounded-full flex items-center justify-center mx-auto mb-4",
+					className: "size-16 bg-status-warning-bg-subtle rounded-full flex items-center justify-center mx-auto mb-4",
 					children: /* @__PURE__ */ y(u, { className: "size-8 text-status-warning-text" })
 				}),
 				/* @__PURE__ */ y("h2", {
@@ -465,7 +465,7 @@ function x() {
 				/* @__PURE__ */ b("button", {
 					type: "button",
 					onClick: () => window.history.back(),
-					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-md hover:bg-bg-elevated transition-colors",
+					className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken border border-border-default rounded-button hover:bg-bg-elevated hover:border-border-strong transition-colors",
 					children: [/* @__PURE__ */ y(d, { className: "size-4" }), x("sharedSession.goBack", "Go Back")]
 				})
 			]