@burdenoff/fluidgrids-fe-sdk 2026.1113.4 → 2026.1113.5

package/dist/{SettingsPage-DPWog4BR.js → SettingsPage-BfBa-qSk.js}

@@ -8,14 +8,14 @@ import { i as isAutonomyLevel, o as useAutonomyLevelCopy, t as AUTONOMY_LEVELS }
 import { n as getFluidGridsClient } from "./client-Ctl4jmY3.js";
 import { o as throwIfResultError, t as describeOperationError } from "./errors-xPZ-IbQd.js";
 import { d as useFluidGridsFlag, m as usePhaseCFlags, t as FLUIDGRIDS_FLAGS, u as useDurableParityEnabled } from "./feature-flags-B_b8PJ6Z.js";
-import { M as saveCodecServerSettings, _ as fetchPauseRules, a as createPauseRule, c as deletePauseRule, f as fetchArchiveSettings, g as fetchCodecServerSettings, j as saveArchiveSettings, l as deleteSearchAttribute, o as createSearchAttribute, r as clearArchiveSettings, x as fetchSearchAttributes } from "./api-BqA-f-AD.js";
-import { i as NativeSelect, o as StatusPill, t as FieldError, u as useResource } from "./shared-Ctl9ZHo1.js";
+import { M as saveCodecServerSettings, _ as fetchPauseRules, a as createPauseRule, c as deletePauseRule, f as fetchArchiveSettings, g as fetchCodecServerSettings, j as saveArchiveSettings, l as deleteSearchAttribute, o as createSearchAttribute, r as clearArchiveSettings, x as fetchSearchAttributes } from "./api-CEnNq15C.js";
+import { i as NativeSelect, o as StatusPill, t as FieldError, u as useResource } from "./shared-C0LCTtyh.js";
 import { OI as WorkflowSearchAttributeType } from "./graphql-types-C5Tr6508.js";
 import { M as useFlowStore } from "./node-operation-selection-Czeeb2D4.js";
-import { Ut as findSaveConflict, yt as useSaveStatusStore } from "./FluidGridsProvider-BgP5c-hH.js";
-import { a as useLogStreamDestinations, i as useLogStreamDestinationActions } from "./useObservability-BGrwZS5X.js";
+import { Ut as findSaveConflict, yt as useSaveStatusStore } from "./FluidGridsProvider-gB2POEu6.js";
+import { a as useLogStreamDestinations, i as useLogStreamDestinationActions } from "./useObservability-Cps9Y9a3.js";
 import { n as useConnections } from "./useConnections-BlB0gbOB.js";
-import { Nt as useUpdateWorkflowDefinitionMutation, Rt as useWorkflowDefinitionQuery, Vt as useWorkflowDefinitionsQuery, n as useAgentDefinitions } from "./useAgentDefinitions-BmyWUoyo.js";
+import { Nt as useUpdateWorkflowDefinitionMutation, Rt as useWorkflowDefinitionQuery, Vt as useWorkflowDefinitionsQuery, n as useAgentDefinitions } from "./useAgentDefinitions-DoMEv0kS.js";
 import { a as formToInput$2, i as emptyAgentForm, n as agentToForm, o as grantDays, r as describeRule, t as AgentFormError } from "./agent-form-D0uLvzx4.js";
 import { r as getFluidGridsConfig } from "./config-X97zrIvn.js";
 import { n as getGlobalStoreClient } from "./global-client-DP_Wxe5t.js";
@@ -994,7 +994,7 @@ function needsAllowFallback(draft, others) {
 * approve or decline actions a REQUIRE_APPROVAL policy is holding. The server enforces every
 * rule; changing a policy or deciding an approval needs workflow publish rights.
 */
-const FIELD$1 = "rounded-md border border-border-secondary bg-background-secondary px-2 py-1.5 text-sm text-text-primary";
+const FIELD$1 = "rounded-md border border-border-default bg-surface px-2 py-1.5 text-sm text-text-primary";
 function errorMessage$2(err) {
 	if (err instanceof PolicyFormError) return err.message;
 	return describeOperationError(err);
@@ -1002,7 +1002,7 @@ function errorMessage$2(err) {
 function DryRunSummary({ result }) {
 	const tr = useTr();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-md border border-border-secondary bg-background-secondary p-3 space-y-3",
+		className: "rounded-md border border-border-default bg-surface p-3 space-y-3",
 		"data-testid": "action-policy-dry-run",
 		children: [/* @__PURE__ */ jsx("p", {
 			className: "text-sm text-text-primary",
@@ -1043,19 +1043,19 @@ function DryRunSummary({ result }) {
 						})
 					]
 				}) }), /* @__PURE__ */ jsx("tbody", { children: result.rows.map((row) => /* @__PURE__ */ jsxs("tr", {
-					className: "border-t border-border-secondary text-text-primary",
+					className: "border-t border-border-default text-text-primary",
 					children: [
 						/* @__PURE__ */ jsxs("td", {
 							className: "py-1 pr-2",
 							children: [/* @__PURE__ */ jsx("div", { children: row.workflowKey }), /* @__PURE__ */ jsx("div", {
-								className: "text-text-tertiary",
+								className: "text-text-muted",
 								children: new Date(row.runCreatedAt).toLocaleString()
 							})]
 						}),
 						/* @__PURE__ */ jsxs("td", {
 							className: "py-1 pr-2",
 							children: [/* @__PURE__ */ jsx("div", { children: row.nodeId }), /* @__PURE__ */ jsxs("div", {
-								className: "font-mono text-text-tertiary",
+								className: "font-mono text-text-muted",
 								children: [row.nodeType, row.operation ? ` · ${row.operation}` : ""]
 							})]
 						}),
@@ -1070,7 +1070,7 @@ function DryRunSummary({ result }) {
 						/* @__PURE__ */ jsxs("td", {
 							className: "py-1",
 							children: [/* @__PURE__ */ jsx(EffectBadge, { effect: row.effect }), row.policyName ? /* @__PURE__ */ jsx("div", {
-								className: "text-text-tertiary",
+								className: "text-text-muted",
 								children: row.policyName
 							}) : null]
 						})
@@ -1122,7 +1122,7 @@ function PolicyEditor({ initial, conditionEditable, storedCondition, others, onC
 		} : row)
 	}));
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-lg border border-border-secondary bg-background-primary p-4 space-y-4",
+		className: "rounded-lg border border-border-default bg-surface-canvas p-4 space-y-4",
 		"data-testid": "action-policy-editor",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -1263,7 +1263,7 @@ function PolicyEditor({ initial, conditionEditable, storedCondition, others, onC
 								}), environment]
 							}, environment)),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-text-tertiary",
+								className: "text-xs text-text-muted",
 								children: tr("fluidgrids.actionPolicies.environmentsHelp", "None checked applies in every environment. Test runs are DEV; triggered and API runs are PROD.")
 							})
 						]
@@ -1445,7 +1445,7 @@ function ApprovalsList({ approvals, onDecide }) {
 						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "font-mono text-[10px] text-text-tertiary",
+						className: "font-mono text-[10px] text-text-muted",
 						children: [
 							tr("fluidgrids.actionPolicies.payload", "Payload"),
 							" ",
@@ -1568,7 +1568,7 @@ function ActionPoliciesTab() {
 				"data-testid": "action-policies-empty",
 				children: tr("fluidgrids.actionPolicies.empty", "No policies yet. Every action runs as its workflow says.")
 			}) : /* @__PURE__ */ jsx("ul", {
-				className: "divide-y divide-border-secondary rounded-lg border border-border-secondary",
+				className: "divide-y divide-border-default rounded-lg border border-border-default",
 				children: policies.map((policy) => /* @__PURE__ */ jsxs("li", {
 					className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
 					"data-testid": "action-policy-row",
@@ -1589,7 +1589,7 @@ function ActionPoliciesTab() {
 								}),
 								!policy.enabled ? /* @__PURE__ */ jsx(Badge, {
 									variant: "outline",
-									className: "text-xs text-text-tertiary",
+									className: "text-xs text-text-muted",
 									children: tr("fluidgrids.actionPolicies.disabled", "Disabled")
 								}) : null
 							]
@@ -1916,7 +1916,7 @@ function ManagedAiPolicyForm({ policy, loading, error, workspaceWideRequired, ca
 		}
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "space-y-4 rounded-lg border border-border-default bg-background-secondary p-5",
+		className: "space-y-4 rounded-lg border border-border-default bg-surface p-5",
 		"aria-label": tr("fluidgrids.settings.managedAi.title", "Managed AI"),
 		children: [
 			/* @__PURE__ */ jsx("h2", {
@@ -2136,7 +2136,7 @@ function RunBudgetSettings({ budget, disabled, onChange }) {
 						disabled: disabled || !limit,
 						children: [/* @__PURE__ */ jsx(SelectTrigger, {
 							"aria-label": tr("fluidgrids.settings.execution.budget.modeLabelFor", "{{limit}}: when reached", { limit: label }),
-							className: "w-[150px] bg-background-secondary border-border-secondary",
+							className: "w-[150px] bg-surface border-border-default",
 							children: /* @__PURE__ */ jsx(SelectValue, {})
 						}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
 							value: "HARD",
@@ -2224,7 +2224,7 @@ function AutonomyLevelSetting({ value, disabled, onChange }) {
 						"data-level": option.value ?? "none",
 						onClick: () => onChange(option.value),
 						onKeyDown: (event) => handleKeyDown(event, index),
-						className: cn("flex items-start gap-3 rounded-lg border p-3 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60", selected ? "border-primary bg-primary/5" : "border-border-secondary hover:bg-background-secondary"),
+						className: cn("flex items-start gap-3 rounded-lg border p-3 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60", selected ? "border-primary bg-primary/5" : "border-border-default hover:bg-surface-sunken"),
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: selected ? "mdi:radiobox-marked" : "mdi:radiobox-blank",
 							width: 16,
@@ -2570,7 +2570,7 @@ function DurableHistoryCapsCard({ canEdit }) {
 	};
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "durable-history-caps",
-		className: "mt-8 border-t border-border-secondary pt-6",
+		className: "mt-8 border-t border-border-default pt-6",
 		children: [
 			/* @__PURE__ */ jsx("h3", {
 				className: "text-sm font-semibold text-text-primary",
@@ -2589,7 +2589,7 @@ function DurableHistoryCapsCard({ canEdit }) {
 					error
 				]
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-				className: "divide-y divide-border-secondary",
+				className: "divide-y divide-border-default",
 				children: [/* @__PURE__ */ jsx(SettingRow, {
 					label: tr("fluidgrids.settings.historyCaps.eventsLabel", "Events per run"),
 					description: tr("fluidgrids.settings.historyCaps.eventsDescription", "{{min}} to {{max}}; the run is told to continue as new at 80%.", {
@@ -2708,7 +2708,7 @@ function RunDataTab() {
 		"data-testid": "run-data-settings",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-2 p-3 rounded-lg bg-background-secondary border border-border-secondary mb-6",
+				className: "flex items-start gap-2 p-3 rounded-lg bg-surface border border-border-default mb-6",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "mdi:database-clock-outline",
 					width: 18,
@@ -2724,7 +2724,7 @@ function RunDataTab() {
 				children: tr("fluidgrids.settings.runData.readOnly", "You can see these settings but not change them: changing them needs permission to delete workflows.")
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "divide-y divide-border-secondary",
+				className: "divide-y divide-border-default",
 				children: [
 					/* @__PURE__ */ jsx(SettingRow, {
 						label: tr("fluidgrids.settings.runData.saveSuccessfulLabel", "Keep data of successful runs"),
@@ -2991,7 +2991,7 @@ function WorkflowNotificationsTab({ workflowKey }) {
 		"data-testid": "workflow-notifications-settings",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "mb-6 flex items-start gap-2 rounded-lg border border-border-secondary bg-background-secondary p-3",
+				className: "mb-6 flex items-start gap-2 rounded-lg border border-border-default bg-surface p-3",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "mdi:bell-outline",
 					width: 18,
@@ -3014,7 +3014,7 @@ function WorkflowNotificationsTab({ workflowKey }) {
 				}), tr("fluidgrids.settings.workflowNotifications.eventsTitle", "Notify when")]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mb-6 divide-y divide-border-secondary",
+				className: "mb-6 divide-y divide-border-default",
 				children: [
 					/* @__PURE__ */ jsx(SettingRow, {
 						label: failureLabel,
@@ -3046,7 +3046,7 @@ function WorkflowNotificationsTab({ workflowKey }) {
 				}), tr("fluidgrids.settings.workflowNotifications.channelsTitle", "Channels")]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "mb-6 divide-y divide-border-secondary",
+				className: "mb-6 divide-y divide-border-default",
 				children: [
 					/* @__PURE__ */ jsx(SettingRow, {
 						label: inAppLabel,
@@ -3139,7 +3139,7 @@ function RunControlTab({ flags }) {
 }
 function Card$1({ icon, title, description, children, testId }) {
 	return /* @__PURE__ */ jsxs("section", {
-		className: "rounded-lg border border-border-secondary bg-background-secondary p-4 sm:p-6",
+		className: "rounded-lg border border-border-default bg-surface p-4 sm:p-6",
 		"data-testid": testId,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -3220,7 +3220,7 @@ function PauseRulesCard() {
 				children: tr("fluidgrids.settings.pauseRules.empty", "No pause rules.")
 			}),
 			rules.data && rules.data.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "mb-4 divide-y divide-border-secondary rounded-md border border-border-secondary",
+				className: "mb-4 divide-y divide-border-default rounded-md border border-border-default",
 				children: rules.data.map((rule) => /* @__PURE__ */ jsxs("li", {
 					className: "flex flex-wrap items-center gap-3 px-3 py-2 text-sm",
 					"data-testid": `pause-rule-${rule.id}`,
@@ -3390,7 +3390,7 @@ function SearchAttributeDefinitionsCard() {
 		children: [
 			/* @__PURE__ */ jsx(FieldError, { message: definitions.error }),
 			definitions.data && definitions.data.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "mb-4 divide-y divide-border-secondary rounded-md border border-border-secondary",
+				className: "mb-4 divide-y divide-border-default rounded-md border border-border-default",
 				children: definitions.data.map((definition) => /* @__PURE__ */ jsxs("li", {
 					className: "flex flex-wrap items-center gap-3 px-3 py-2 text-sm",
 					"data-testid": `search-attribute-${definition.name}`,
@@ -3891,14 +3891,14 @@ function LogStreamingTab() {
 function LogStreamingDisabledNotice() {
 	const tr = useTr();
 	return /* @__PURE__ */ jsx(Card, {
-		className: "bg-background-secondary border-border-secondary",
+		className: "bg-surface border-border-default",
 		"data-testid": "log-streaming-disabled",
 		children: /* @__PURE__ */ jsxs(CardContent, {
 			className: "flex items-start gap-3 p-6",
 			children: [/* @__PURE__ */ jsx(Icon, {
 				icon: "mdi:transit-connection-variant",
 				width: 20,
-				className: "mt-0.5 shrink-0 text-text-tertiary",
+				className: "mt-0.5 shrink-0 text-text-muted",
 				"aria-hidden": "true"
 			}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
 				className: "text-base font-semibold text-text-primary",
@@ -4019,7 +4019,7 @@ function LogStreamingSettings() {
 				})]
 			}),
 			showForm && /* @__PURE__ */ jsxs(Card, {
-				className: "border-border-secondary bg-background-secondary",
+				className: "border-border-default bg-surface",
 				children: [/* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between gap-3",
 					children: [/* @__PURE__ */ jsx("h3", {
@@ -4066,7 +4066,7 @@ function LogStreamingSettings() {
 										provider: event.target.value,
 										endpoint: ""
 									})),
-									className: "w-full rounded-md border border-border-secondary bg-background-primary px-3 py-2 text-sm text-text-primary",
+									className: "w-full rounded-md border border-border-default bg-surface-canvas px-3 py-2 text-sm text-text-primary",
 									children: PROVIDERS.map((provider) => /* @__PURE__ */ jsx("option", {
 										value: provider,
 										children: provider
@@ -4119,7 +4119,7 @@ function LogStreamingSettings() {
 									...current,
 									configText: event.target.value
 								})),
-								className: "min-h-24 w-full rounded-md border border-border-secondary bg-background-primary px-3 py-2 font-mono text-xs text-text-primary",
+								className: "min-h-24 w-full rounded-md border border-border-default bg-surface-canvas px-3 py-2 font-mono text-xs text-text-primary",
 								spellCheck: false
 							})]
 						}),
@@ -4136,7 +4136,7 @@ function LogStreamingSettings() {
 										type: "checkbox",
 										checked: form.eventFilters.includes(event),
 										onChange: () => toggleEvent(event),
-										className: "size-4 rounded border-border-secondary accent-action-primary-bg"
+										className: "size-4 rounded border-border-default accent-action-primary-bg"
 									}), eventLabel(event)]
 								}, event))
 							})]
@@ -4150,7 +4150,7 @@ function LogStreamingSettings() {
 									...current,
 									isEnabled: event.target.checked
 								})),
-								className: "size-4 rounded border-border-secondary accent-action-primary-bg"
+								className: "size-4 rounded border-border-default accent-action-primary-bg"
 							}), tr("fluidgrids.settings.logStreaming.enabled", "Destination enabled")]
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -4173,11 +4173,11 @@ function LogStreamingSettings() {
 				className: "space-y-3",
 				children: [
 					loading && destinations.length === 0 && /* @__PURE__ */ jsx("div", {
-						className: "rounded-lg border border-border-secondary bg-background-secondary p-6 text-sm text-text-secondary",
+						className: "rounded-lg border border-border-default bg-surface p-6 text-sm text-text-secondary",
 						children: tr("fluidgrids.settings.logStreaming.loading", "Loading destinations…")
 					}),
 					!loading && destinations.length === 0 && /* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg border border-dashed border-border-secondary bg-background-secondary p-8 text-center",
+						className: "rounded-lg border border-dashed border-border-default bg-surface p-8 text-center",
 						children: [
 							/* @__PURE__ */ jsx(Icon, {
 								icon: "mdi:transit-connection-variant",
@@ -4195,7 +4195,7 @@ function LogStreamingSettings() {
 						]
 					}),
 					destinations.map((destination) => /* @__PURE__ */ jsx(Card, {
-						className: "border-border-secondary bg-background-secondary",
+						className: "border-border-default bg-surface",
 						children: /* @__PURE__ */ jsxs(CardContent, {
 							className: "flex flex-col gap-4 p-4 sm:flex-row sm:items-center sm:justify-between",
 							children: [/* @__PURE__ */ jsxs("div", {
@@ -4209,7 +4209,7 @@ function LogStreamingSettings() {
 												children: destination.name
 											}),
 											/* @__PURE__ */ jsx("span", {
-												className: "rounded-full bg-background-tertiary px-2 py-0.5 text-xs text-text-secondary",
+												className: "rounded-full bg-surface-sunken px-2 py-0.5 text-xs text-text-secondary",
 												children: destination.provider
 											}),
 											/* @__PURE__ */ jsx("span", {
@@ -4321,7 +4321,7 @@ function AgentEditor({ initial, onCancel, onSave }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-lg border border-border-secondary bg-background-primary p-4 space-y-4",
+		className: "rounded-lg border border-border-default bg-surface-canvas p-4 space-y-4",
 		"data-testid": "agent-definition-editor",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -4447,7 +4447,7 @@ function AgentEditor({ initial, onCancel, onSave }) {
 							}),
 							/* @__PURE__ */ jsx("span", { children: connection.name }),
 							/* @__PURE__ */ jsx("span", {
-								className: "text-xs text-text-tertiary",
+								className: "text-xs text-text-muted",
 								children: connection.provider?.name ?? connection.providerId
 							})
 						]
@@ -4642,7 +4642,7 @@ function AgentsTab() {
 			}) : /* @__PURE__ */ jsx("ul", {
 				className: "space-y-3",
 				children: agents.map((agent) => /* @__PURE__ */ jsxs("li", {
-					className: "rounded-lg border border-border-secondary bg-background-secondary p-3 space-y-2",
+					className: "rounded-lg border border-border-default bg-surface p-3 space-y-2",
 					"data-testid": `agent-definition-${agent.id}`,
 					children: [
 						/* @__PURE__ */ jsxs("div", {
@@ -4694,7 +4694,7 @@ function AgentsTab() {
 							children: agent.toolAllowlist.length > 0 ? agent.toolAllowlist.map(describeRule).join(" · ") : tr("fluidgrids.agents.noTools", "No tools allowed")
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "text-xs text-text-tertiary",
+							className: "text-xs text-text-muted",
 							children: tr("fluidgrids.agents.connectionCount", "{{count}} connections in scope", { count: agent.connectionScope.length })
 						}),
 						/* @__PURE__ */ jsx(AgentGrants, {
@@ -5201,13 +5201,13 @@ function useMcpTokens() {
 * the call log, where calls held by a REQUIRE_APPROVAL action policy are approved or declined.
 * Every call an external agent makes passes the workspace's action policies and is recorded.
 */
-const FIELD = "rounded-md border border-border-secondary bg-background-secondary px-2 py-1.5 text-sm text-text-primary";
-const CARD = "rounded-lg border border-border-secondary bg-background-primary p-4 space-y-3";
+const FIELD = "rounded-md border border-border-default bg-surface px-2 py-1.5 text-sm text-text-primary";
+const CARD = "rounded-lg border border-border-default bg-surface-canvas p-4 space-y-3";
 const TONE_CLASSES = {
 	success: "bg-status-success-bg-subtle text-status-success-text border-status-success-border",
 	warning: "bg-status-warning-bg-subtle text-status-warning-text border-status-warning-border",
 	danger: "bg-status-error-bg-subtle text-status-error-text border-status-error-border",
-	neutral: "bg-background-secondary text-text-secondary border-border-secondary"
+	neutral: "bg-surface text-text-secondary border-border-default"
 };
 function errorMessage(err) {
 	return err instanceof McpFormError ? err.message : describeOperationError(err);
@@ -5273,7 +5273,7 @@ function ConnectorToolForm({ onSave }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2 border-t border-border-secondary pt-3",
+		className: "space-y-2 border-t border-border-default pt-3",
 		"data-testid": "mcp-connector-form",
 		children: [
 			/* @__PURE__ */ jsx("p", {
@@ -5508,7 +5508,7 @@ function TokenSection({ toolNames, versions }) {
 				children: tr("fluidgrids.mcp.tokens.create", "Create token")
 			}),
 			/* @__PURE__ */ jsxs("ul", {
-				className: "divide-y divide-border-secondary",
+				className: "divide-y divide-border-default",
 				children: [tokens.keys.map((key) => /* @__PURE__ */ jsxs("li", {
 					className: "flex flex-wrap items-center justify-between gap-2 py-2",
 					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
@@ -5545,7 +5545,7 @@ function TokenSection({ toolNames, versions }) {
 function CallRow({ call, onDecide }) {
 	const tr = useTr();
 	return /* @__PURE__ */ jsxs("tr", {
-		className: "border-t border-border-secondary align-top",
+		className: "border-t border-border-default align-top",
 		"data-testid": "mcp-call-row",
 		children: [
 			/* @__PURE__ */ jsx("td", {
@@ -5757,7 +5757,7 @@ function McpGatewayTab({ workflowKey }) {
 						className: "flex flex-wrap items-center gap-2",
 						children: [
 							/* @__PURE__ */ jsxs("code", {
-								className: "rounded bg-background-secondary px-2 py-1 text-xs text-text-primary break-all",
+								className: "rounded bg-surface px-2 py-1 text-xs text-text-primary break-all",
 								"data-testid": "mcp-endpoint-url",
 								children: ["POST ", url]
 							}),
@@ -5777,7 +5777,7 @@ function McpGatewayTab({ workflowKey }) {
 						]
 					}),
 					workflowKey && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 border-t border-border-secondary pt-3",
+						className: "flex items-center gap-2 border-t border-border-default pt-3",
 						children: [/* @__PURE__ */ jsx(Switch, {
 							id: "mcp-this-workflow",
 							checked: thisWorkflowTool?.enabled ?? false,
@@ -5806,7 +5806,7 @@ function McpGatewayTab({ workflowKey }) {
 						children: tr("fluidgrids.mcp.tools.help", "A workflow tool runs the workflow's active version; its arguments are the fields its \"When Executed by Another Workflow\" trigger declares. Changes reach clients when you publish.")
 					}),
 					/* @__PURE__ */ jsxs("ul", {
-						className: "divide-y divide-border-secondary",
+						className: "divide-y divide-border-default",
 						"data-testid": "mcp-tools",
 						children: [mcp.tools.map((tool) => /* @__PURE__ */ jsxs("li", {
 							className: "flex flex-wrap items-center justify-between gap-2 py-2",
@@ -5875,7 +5875,7 @@ function McpGatewayTab({ workflowKey }) {
 						})]
 					}),
 					/* @__PURE__ */ jsx("ul", {
-						className: "divide-y divide-border-secondary",
+						className: "divide-y divide-border-default",
 						"data-testid": "mcp-versions",
 						children: mcp.toolSets.map((set) => /* @__PURE__ */ jsxs("li", {
 							className: "flex flex-wrap items-center justify-between gap-2 py-2",
@@ -6035,7 +6035,7 @@ function CopyButton({ value, label }) {
 		asChild: true,
 		children: /* @__PURE__ */ jsx("button", {
 			onClick: handleCopy,
-			className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary hover:text-text-primary transition-colors",
+			className: "p-1.5 rounded hover:bg-surface-sunken text-text-secondary hover:text-text-primary transition-colors",
 			children: /* @__PURE__ */ jsx(Icon, {
 				icon: "mdi:content-copy",
 				width: 16
@@ -6053,7 +6053,7 @@ function GeneralTab() {
 	const autosaveEnabled = useSaveStatusStore((s) => s.autosaveEnabled);
 	const setAutosaveEnabled = useSaveStatusStore((s) => s.actions.setAutosaveEnabled);
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(ReadOnlyBanner, {}), /* @__PURE__ */ jsxs("div", {
-		className: "divide-y divide-border-secondary",
+		className: "divide-y divide-border-default",
 		children: [
 			/* @__PURE__ */ jsx(SettingRow, {
 				label: tr("fluidgrids.settings.general.workspaceNameLabel", "Workspace Name"),
@@ -6061,7 +6061,7 @@ function GeneralTab() {
 				children: /* @__PURE__ */ jsx(Input, {
 					value: settings.workspaceName,
 					readOnly: true,
-					className: "w-[250px] bg-background-secondary border-border-secondary text-text-primary cursor-default"
+					className: "w-[250px] bg-surface border-border-default text-text-primary cursor-default"
 				})
 			}),
 			/* @__PURE__ */ jsx(SettingRow, {
@@ -6070,7 +6070,7 @@ function GeneralTab() {
 				children: /* @__PURE__ */ jsx(Input, {
 					value: settings.defaultWorkflowPrefix,
 					readOnly: true,
-					className: "w-[120px] bg-background-secondary border-border-secondary text-text-primary cursor-default"
+					className: "w-[120px] bg-surface border-border-default text-text-primary cursor-default"
 				})
 			}),
 			/* @__PURE__ */ jsx(SettingRow, {
@@ -6176,7 +6176,7 @@ function ExecutionTab({ workflowKey }) {
 				children: tr("fluidgrids.settings.execution.noWorkflowContextBanner", "No workflow selected — open Settings from a specific workflow to edit its execution settings.")
 			})]
 		}), /* @__PURE__ */ jsx("div", {
-			className: "divide-y divide-border-secondary",
+			className: "divide-y divide-border-default",
 			children: /* @__PURE__ */ jsx(SettingRow, {
 				label: tr("fluidgrids.settings.execution.defaultTimeoutLabel", "Default Timeout"),
 				description: tr("fluidgrids.settings.execution.noWorkflowContextDescription", "Open this page from a specific workflow to edit its execution settings."),
@@ -6185,7 +6185,7 @@ function ExecutionTab({ workflowKey }) {
 					children: [/* @__PURE__ */ jsx(Input, {
 						value: settings.defaultTimeoutSeconds,
 						readOnly: true,
-						className: "w-[100px] bg-background-secondary border-border-secondary text-text-primary text-right cursor-default"
+						className: "w-[100px] bg-surface border-border-default text-text-primary text-right cursor-default"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-xs text-text-secondary",
 						children: tr("fluidgrids.settings.execution.defaultTimeoutUnit", "seconds")
@@ -6196,7 +6196,7 @@ function ExecutionTab({ workflowKey }) {
 	}
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsxs("div", {
-			className: "divide-y divide-border-secondary",
+			className: "divide-y divide-border-default",
 			children: [
 				/* @__PURE__ */ jsx(SettingRow, {
 					label: tr("fluidgrids.settings.execution.defaultTimeoutLabel", "Timeout"),
@@ -6274,7 +6274,7 @@ function ExecutionTab({ workflowKey }) {
 							onError: e.target.value
 						})),
 						disabled: locked,
-						className: "w-[160px] rounded-md border border-border-secondary bg-background-secondary px-2 py-1.5 text-sm text-text-primary",
+						className: "w-[160px] rounded-md border border-border-default bg-surface px-2 py-1.5 text-sm text-text-primary",
 						children: [
 							/* @__PURE__ */ jsx("option", {
 								value: "stop",
@@ -6304,7 +6304,7 @@ function ExecutionTab({ workflowKey }) {
 							})),
 							disabled: locked || otherWorkflowsLoading,
 							children: [/* @__PURE__ */ jsx(SelectTrigger, {
-								className: "w-[220px] bg-background-secondary border-border-secondary",
+								className: "w-[220px] bg-surface border-border-default",
 								children: /* @__PURE__ */ jsx(SelectValue, { placeholder: tr("fluidgrids.settings.execution.errorWorkflowPlaceholder", "None") })
 							}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
 								value: "__none__",
@@ -6355,7 +6355,7 @@ function ExecutionTab({ workflowKey }) {
 							disabled: locked,
 							children: [/* @__PURE__ */ jsx(SelectTrigger, {
 								"aria-label": tr(row.labelKey, row.label),
-								className: "w-[220px] bg-background-secondary border-border-secondary",
+								className: "w-[220px] bg-surface border-border-default",
 								children: /* @__PURE__ */ jsx(SelectValue, {})
 							}), /* @__PURE__ */ jsxs(SelectContent, { children: [
 								/* @__PURE__ */ jsx(SelectItem, {
@@ -6481,7 +6481,7 @@ function ApiTab() {
 		className: "space-y-4",
 		children: [
 			/* @__PURE__ */ jsx(Card, {
-				className: "border border-border-secondary bg-background-secondary",
+				className: "border border-border-default bg-surface",
 				children: /* @__PURE__ */ jsxs(CardHeader, {
 					className: "pb-3",
 					children: [
@@ -6501,7 +6501,7 @@ function ApiTab() {
 							children: tr("fluidgrids.settings.api.gatewayUrlDescription", "Base URL for workflow API operations. Use this to trigger, list, and manage workflows programmatically.")
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 rounded-lg bg-background-tertiary px-3 py-2 border border-border-secondary",
+							className: "flex items-center gap-2 rounded-lg bg-surface-sunken px-3 py-2 border border-border-default",
 							children: [/* @__PURE__ */ jsx("code", {
 								className: "text-sm text-text-primary flex-1 truncate",
 								children: settings.gatewayUrl
@@ -6514,7 +6514,7 @@ function ApiTab() {
 				})
 			}),
 			/* @__PURE__ */ jsx(Card, {
-				className: "border border-border-secondary bg-background-secondary",
+				className: "border border-border-default bg-surface",
 				children: /* @__PURE__ */ jsxs(CardHeader, {
 					className: "pb-3",
 					children: [
@@ -6543,7 +6543,7 @@ function ApiTab() {
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 rounded-lg bg-background-tertiary px-3 py-2 border border-border-secondary",
+							className: "flex items-center gap-2 rounded-lg bg-surface-sunken px-3 py-2 border border-border-default",
 							children: [/* @__PURE__ */ jsx("code", {
 								className: "text-sm text-text-primary flex-1 truncate",
 								children: settings.webhookUrlFormat
@@ -6556,7 +6556,7 @@ function ApiTab() {
 				})
 			}),
 			/* @__PURE__ */ jsx(Card, {
-				className: "border border-border-secondary bg-background-secondary",
+				className: "border border-border-default bg-surface",
 				children: /* @__PURE__ */ jsxs(CardHeader, {
 					className: "pb-3",
 					children: [/* @__PURE__ */ jsxs("div", {
@@ -6570,7 +6570,7 @@ function ApiTab() {
 							children: tr("fluidgrids.settings.api.curlExampleTitle", "Example: Trigger via cURL")
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
-						className: "relative rounded-lg bg-background-tertiary px-3 py-2 border border-border-secondary",
+						className: "relative rounded-lg bg-surface-sunken px-3 py-2 border border-border-default",
 						children: [/* @__PURE__ */ jsx("pre", {
 							className: "text-xs text-text-primary overflow-x-auto whitespace-pre-wrap",
 							children: `curl -X POST "${settings.webhookUrlFormat}" \\
@@ -6602,7 +6602,7 @@ function SettingsPage({ workflowKey: workflowKeyProp } = {}) {
 	const runControlSettings = hasRunControlSettings(phaseC);
 	const visibleTab = !logStreamsEnabled && activeTab === "log-streaming" || !runControlSettings && activeTab === "run-control" ? "general" : activeTab;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "p-4 sm:p-6 bg-background-primary min-h-screen",
+		className: "p-4 sm:p-6 bg-surface-canvas min-h-screen",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6",
 			"data-tour": "fluidgrids-settings-header",
@@ -6634,7 +6634,7 @@ function SettingsPage({ workflowKey: workflowKeyProp } = {}) {
 			className: "w-full",
 			children: [
 				/* @__PURE__ */ jsxs(TabsList, {
-					className: "mb-6 h-auto max-w-full flex-wrap justify-start border border-border-secondary bg-background-secondary",
+					className: "mb-6 h-auto max-w-full flex-wrap justify-start border border-border-default bg-surface",
 					"data-tour": "fluidgrids-settings-tabs",
 					children: [
 						/* @__PURE__ */ jsxs(TabsTrigger, {