@burdenoff/fluidgrids-fe-sdk 2026.1113.3 → 2026.1113.5

package/dist/{ExecutionDetailPage-2zr-EHVq.js → ExecutionDetailPage-CXiHGMVH.js}

@@ -1,14 +1,14 @@
 "use client";
 import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
-import { c as errorAdvice, d as NodeStatusBadge, i as useRunPending, l as needsReconnect, n as useDurableParityRunFields, o as ConfirmStopRunDialog, r as useRunMetadata, t as setRunVersioningOverride, u as ExecutionStatusBadge } from "./useDurableParity-CoX24dE8.js";
+import { c as errorAdvice, d as NodeStatusBadge, i as useRunPending, l as needsReconnect, n as useDurableParityRunFields, o as ConfirmStopRunDialog, r as useRunMetadata, t as setRunVersioningOverride, u as ExecutionStatusBadge } from "./useDurableParity-9mQYNpiP.js";
 import { n as formatRunVersion, r as nodeDisplayTitle, t as buildNodeDisplayMap } from "./run-display-BycKYSU0.js";
 import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
 import { c as RunLogAppendedDocument, l as RunLogsDocument, s as isAgentNodeType } from "./agent-form-D0uLvzx4.js";
-import { C as describeRunStep, S as describeRunError, Xt as nodeStateDurationMs, Yt as formatElapsedMs, Zt as runDurationMs, dn as canSignalRun, gn as runSignalTargets, pn as durableInterfaceOf } from "./FluidGridsProvider-Dc_Jhtch.js";
+import { C as describeRunStep, S as describeRunError, Xt as nodeStateDurationMs, Yt as formatElapsedMs, Zt as runDurationMs, dn as canSignalRun, gn as runSignalTargets, pn as durableInterfaceOf } from "./FluidGridsProvider-gB2POEu6.js";
 import { n as useFgAskable, r as useFgAskableSelection } from "./askAboutBridge-BV8m95kk.js";
 import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
 import { t as TechnicalDetails } from "./TechnicalDetails-D4xGy201.js";
-import { _ as shortRunId, g as runChainLinks, h as parseMetadataDefinition, m as overrideRequestOf, n as useExecution, p as callbackTone, r as useExecutionActions, s as buildRetryTriggerInput, t as useAutoRefresh } from "./useExecutions-CB1Rva2V.js";
+import { _ as shortRunId, g as runChainLinks, h as parseMetadataDefinition, m as overrideRequestOf, n as useExecution, p as callbackTone, r as useExecutionActions, s as buildRetryTriggerInput, t as useAutoRefresh } from "./useExecutions-BvldyVgF.js";
 import { t as RunActionsMenu } from "./RunActionsMenu-BE_1r3bF.js";
 import { n as getFluidGridsClient, r as getFluidGridsClientSafe } from "./client-Ctl4jmY3.js";
 import { o as throwIfResultError, t as describeOperationError } from "./errors-xPZ-IbQd.js";
@@ -19,17 +19,17 @@ import { a as useRecipientLabel, n as ApprovalApprovers, t as channelLabel } fro
 import { r as useRunHumanRequests } from "./useHumanRequests-DwG2tQ3f.js";
 import { a as encodedPayloadBytes, f as EffectBadge, h as useRunPolicyDecisions, i as decodePayloads, l as formatBudgetUsd, n as checkCodecServerUrl, o as isEncodedPayload, r as containsEncodedPayload, t as CodecServerError } from "./codec-client-CAYl6j46.js";
 import { _ as agentLiveReplyState, a as canSaveRunAsTestCase, g as useAgentTokenStream, n as saveRunAsTestCase, t as useWorkflowProposal, v as agentTokenStreamsFor } from "./useWorkflowProposal-UtJYycLv.js";
-import { t as WorkflowProposalCard } from "./WorkflowProposalCard-zCdUpCk8.js";
+import { t as WorkflowProposalCard } from "./WorkflowProposalCard-SmRv_Egf.js";
 import { t as AiCreditBalanceSlot } from "./aiCreditsBridge-BuE92tKo.js";
-import { a as fetchRunFailureClusters, i as dismissRunFailureCluster, r as OPEN_STATUSES, t as BUCKET_LABELS } from "./FailureTriagePanel-CM-vmvbA.js";
-import { a as useDurableRunFields, i as useDeterminismStatus, n as SignalRunDialog, o as useRunStackTrace, r as terminateDurableRun, s as RunHistoryView, t as useRunHistory } from "./useRunHistory-dFVv-1Tn.js";
+import { a as fetchRunFailureClusters, i as dismissRunFailureCluster, r as OPEN_STATUSES, t as BUCKET_LABELS } from "./FailureTriagePanel-DA91XKVj.js";
+import { a as useDurableRunFields, i as useDeterminismStatus, n as SignalRunDialog, o as useRunStackTrace, r as terminateDurableRun, s as RunHistoryView, t as useRunHistory } from "./useRunHistory-DoxQsQIm.js";
 import { $P as VersioningBehavior, L as AgentStepKind, LI as WorkflowUpdateWaitFor, jd as ErrorType, yI as WorkflowQueryRejectCondition } from "./graphql-types-C5Tr6508.js";
 import { a as formatTokens, d as formatMicroUsd, o as modelLabel, r as aiCost } from "./ai-usage-D7SjIkUZ.js";
 import { _ as useWorkflowTestsEnabled, l as useDurableFunctionNodesEnabled, m as usePhaseCFlags, u as useDurableParityEnabled } from "./feature-flags-B_b8PJ6Z.js";
-import { A as revokeSignalToken, B as updateActivityOptions, D as resetActivities, E as queryRun, N as sendRunUpdate, O as resetRun, R as unpauseActivities, S as fetchSignalTokens, V as upsertRunSearchAttributes, _ as fetchPauseRules, b as fetchRunUpdate, d as failActivityById, g as fetchCodecServerSettings, i as completeActivityById, k as resetRunToLastCleanTask, s as createSignalToken, v as fetchRunControlFields, w as pauseActivities, y as fetchRunHistoryArchive } from "./api-BqA-f-AD.js";
-import { a as fetchTaskQueueStats } from "./api-BZVyX5d2.js";
-import { a as RUN_CONTROL_DIALOG_STYLE, c as parseJsonInput, i as NativeSelect, l as parseJsonObjectInput, n as JsonBlock, o as StatusPill, r as JsonField, s as newRunControlId, t as FieldError, u as useResource } from "./shared-Ctl9ZHo1.js";
-import { v as useWorkflowVersions } from "./useWorkflows-DEWdntS_.js";
+import { A as revokeSignalToken, B as updateActivityOptions, D as resetActivities, E as queryRun, N as sendRunUpdate, O as resetRun, R as unpauseActivities, S as fetchSignalTokens, V as upsertRunSearchAttributes, _ as fetchPauseRules, b as fetchRunUpdate, d as failActivityById, g as fetchCodecServerSettings, i as completeActivityById, k as resetRunToLastCleanTask, s as createSignalToken, v as fetchRunControlFields, w as pauseActivities, y as fetchRunHistoryArchive } from "./api-CEnNq15C.js";
+import { a as fetchTaskQueueStats } from "./api-DKfMt0IX.js";
+import { a as RUN_CONTROL_DIALOG_STYLE, c as parseJsonInput, i as NativeSelect, l as parseJsonObjectInput, n as JsonBlock, o as StatusPill, r as JsonField, s as newRunControlId, t as FieldError, u as useResource } from "./shared-C0LCTtyh.js";
+import { v as useWorkflowVersions } from "./useWorkflows-Z4M64JlD.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router";
 import { Icon } from "@iconify/react";
@@ -1518,7 +1518,7 @@ function RunHumanRequests({ requests }) {
 	if (requests.length === 0) return null;
 	const pending = requests.some((request) => request.status === "PENDING");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-6 space-y-2 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 space-y-2 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-human-requests",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 text-sm font-medium text-text-primary",
@@ -1874,15 +1874,15 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 		className: "flex gap-2 mt-3 mb-3",
 		children: [/* @__PURE__ */ jsx("button", {
 			onClick: () => setSelectedTab("output"),
-			className: `px-3 py-1.5 text-sm rounded ${selectedTab === "output" ? "bg-action-primary-bg text-action-primary-text" : "bg-background-tertiary text-text-secondary"}`,
+			className: `px-3 py-1.5 text-sm rounded ${selectedTab === "output" ? "bg-action-primary-bg text-action-primary-text" : "bg-surface-sunken text-text-secondary"}`,
 			children: tr("fluidgrids.executions.nodeTimeline.outputTab", "Output")
 		}), /* @__PURE__ */ jsx("button", {
 			onClick: () => setSelectedTab("input"),
-			className: `px-3 py-1.5 text-sm rounded ${selectedTab === "input" ? "bg-action-primary-bg text-action-primary-text" : "bg-background-tertiary text-text-secondary"}`,
+			className: `px-3 py-1.5 text-sm rounded ${selectedTab === "input" ? "bg-action-primary-bg text-action-primary-text" : "bg-surface-sunken text-text-secondary"}`,
 			children: tr("fluidgrids.executions.nodeTimeline.inputTab", "Input")
 		})]
 	}), /* @__PURE__ */ jsx("div", {
-		className: "bg-background-primary rounded p-3 max-h-64 overflow-auto",
+		className: "bg-surface-canvas rounded p-3 max-h-64 overflow-auto",
 		children: /* @__PURE__ */ jsx("pre", {
 			className: "text-xs text-text-primary whitespace-pre-wrap break-words font-mono",
 			children: selectedTab === "output" ? formatJsonData(node.output) : formatJsonData(node.inputArgs)
@@ -1903,7 +1903,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 			onViewAgentTrace && isAgentNodeType(node.nodeType) && /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: () => onViewAgentTrace(node.nodeId),
-				className: "px-3 py-1.5 text-sm border border-border-secondary text-text-primary rounded hover:bg-background-tertiary flex items-center gap-1.5",
+				className: "px-3 py-1.5 text-sm border border-border-default text-text-primary rounded hover:bg-surface-sunken flex items-center gap-1.5",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "mdi:robot-outline",
 					width: 16
@@ -1926,7 +1926,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 			className: "text-xs text-text-secondary cursor-pointer hover:text-text-primary",
 			children: tr("fluidgrids.executions.nodeTimeline.metadataSummary", "Metadata")
 		}), /* @__PURE__ */ jsx("pre", {
-			className: "mt-2 text-xs text-text-secondary bg-background-tertiary p-2 rounded overflow-auto max-h-32",
+			className: "mt-2 text-xs text-text-secondary bg-surface-sunken p-2 rounded overflow-auto max-h-32",
 			children: formatJsonData(node.metadata)
 		})]
 	}) });
@@ -1935,7 +1935,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 		className: "space-y-4",
 		children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-4 animate-pulse",
-			children: [/* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-background-tertiary rounded-full" }), /* @__PURE__ */ jsx("div", { className: "flex-1 h-20 bg-background-tertiary rounded-lg" })]
+			children: [/* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-surface-sunken rounded-full" }), /* @__PURE__ */ jsx("div", { className: "flex-1 h-20 bg-surface-sunken rounded-lg" })]
 		}, i))
 	});
 	if (nodeStates.length === 0) return /* @__PURE__ */ jsxs("div", {
@@ -1948,7 +1948,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute left-4 top-8 bottom-8 w-0.5 bg-border-secondary" }), /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute left-4 top-8 bottom-8 w-0.5 bg-border-default" }), /* @__PURE__ */ jsx("div", {
 			className: "space-y-4",
 			children: sortedNodes.map((node, index) => {
 				const isExpanded = isNodeOpen(node);
@@ -1973,7 +1973,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: `
                   relative z-10 w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0
-                  ${node.status === "COMPLETED" ? "bg-[var(--color-status-success-bg-subtle)] text-[var(--color-status-success-text)]" : node.status === "FAILED" ? "bg-[var(--color-status-error-bg-subtle)] text-[var(--color-status-error-text)]" : node.status === "RUNNING" ? "bg-[var(--color-status-info-bg-subtle)] text-[var(--color-status-info-text)]" : node.status === "SKIPPED" ? "bg-muted text-tertiary" : "bg-muted text-tertiary"}
+                  ${node.status === "COMPLETED" ? "bg-[var(--color-status-success-bg-subtle)] text-[var(--color-status-success-text)]" : node.status === "FAILED" ? "bg-[var(--color-status-error-bg-subtle)] text-[var(--color-status-error-text)]" : node.status === "RUNNING" ? "bg-[var(--color-status-info-bg-subtle)] text-[var(--color-status-info-text)]" : node.status === "SKIPPED" ? "bg-muted text-text-muted" : "bg-muted text-text-muted"}
                 `,
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-xs font-bold",
@@ -1985,7 +1985,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 						"data-testid": "run-step-card",
 						className: `
                   flex-1 rounded-lg border transition-all
-                  ${hasError ? "bg-[var(--color-status-error-bg-subtle)] border-[var(--color-status-error-border)]" : isRunning ? "bg-[var(--color-status-info-bg-subtle)] border-[var(--color-status-info-border)]" : "bg-background-secondary border-border-secondary"}
+                  ${hasError ? "bg-[var(--color-status-error-bg-subtle)] border-[var(--color-status-error-border)]" : isRunning ? "bg-[var(--color-status-info-bg-subtle)] border-[var(--color-status-info-border)]" : "bg-surface border-border-default"}
                 `,
 						children: [
 							/* @__PURE__ */ jsxs("button", {
@@ -2052,7 +2052,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 								})]
 							}),
 							isExpanded && v2 && /* @__PURE__ */ jsxs("div", {
-								className: "px-4 pb-4 border-t border-border-secondary/50",
+								className: "px-4 pb-4 border-t border-border-default/50",
 								children: [
 									hasError && /* @__PURE__ */ jsx(AskableSelectionDiv, {
 										describe: describeStep,
@@ -2121,7 +2121,7 @@ function NodeTimeline({ nodeStates, nodeDisplay, loading, triggerNodeId, onRetry
 								]
 							}),
 							isExpanded && !v2 && /* @__PURE__ */ jsxs("div", {
-								className: "px-4 pb-4 border-t border-border-secondary/50",
+								className: "px-4 pb-4 border-t border-border-default/50",
 								children: [
 									renderStepData(node),
 									node.error && /* @__PURE__ */ jsxs(AskableSelectionDiv, {
@@ -2192,7 +2192,7 @@ const LEVEL_TEXT_CLASS = {
 	ERROR: "text-[var(--color-status-error-text)]"
 };
 const LEVEL_BADGE_CLASS = {
-	DEBUG: "bg-muted text-tertiary",
+	DEBUG: "bg-muted text-text-muted",
 	INFO: "bg-[var(--color-status-info-bg)] text-[var(--color-status-info-text)]",
 	WARN: "bg-[var(--color-status-warning-bg)] text-[var(--color-status-warning-text)]",
 	ERROR: "bg-[var(--color-status-error-bg)] text-[var(--color-status-error-text)]"
@@ -2338,7 +2338,7 @@ function RunLogViewer({ runId, lines, nodeStates, nodeDisplay, loading, error, h
 	if (loading && lines.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "space-y-2",
 		"data-testid": "run-log-loading",
-		children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-6 bg-background-tertiary rounded animate-pulse" }, i))
+		children: [...Array(6)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-6 bg-surface-sunken rounded animate-pulse" }, i))
 	});
 	if (error && lines.length === 0) return /* @__PURE__ */ jsxs("div", {
 		className: "bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)] rounded-lg p-6 text-center",
@@ -2370,7 +2370,7 @@ function RunLogViewer({ runId, lines, nodeStates, nodeDisplay, loading, error, h
 							onChange: (e) => setSearch(e.target.value),
 							placeholder: tr("fluidgrids.executions.runLogViewer.searchPlaceholder", "Search log"),
 							"aria-label": tr("fluidgrids.executions.runLogViewer.searchAriaLabel", "Search log"),
-							className: "w-full pl-8 pr-3 py-1.5 text-sm rounded border border-border-secondary bg-background-primary text-text-primary"
+							className: "w-full pl-8 pr-3 py-1.5 text-sm rounded border border-border-default bg-surface-canvas text-text-primary"
 						})]
 					}),
 					/* @__PURE__ */ jsxs("select", {
@@ -2463,7 +2463,7 @@ function RunLogViewer({ runId, lines, nodeStates, nodeDisplay, loading, error, h
 			/* @__PURE__ */ jsxs("div", {
 				ref: scrollRef,
 				onScroll: handleScroll,
-				className: "max-h-[600px] overflow-auto rounded-lg border border-border-secondary bg-background-primary",
+				className: "max-h-[600px] overflow-auto rounded-lg border border-border-default bg-surface-canvas",
 				children: [groups.length === 0 ? /* @__PURE__ */ jsxs("div", {
 					className: "text-center py-10 text-text-secondary",
 					children: [/* @__PURE__ */ jsx(Icon, {
@@ -2474,11 +2474,11 @@ function RunLogViewer({ runId, lines, nodeStates, nodeDisplay, loading, error, h
 				}) : groups.map((group) => {
 					const groupCollapsed = isCollapsed(group);
 					return /* @__PURE__ */ jsxs("div", {
-						className: "border-b border-border-secondary last:border-b-0",
+						className: "border-b border-border-default last:border-b-0",
 						children: [/* @__PURE__ */ jsxs("button", {
 							onClick: () => toggleGroup(group.key, groupCollapsed),
 							"aria-expanded": !groupCollapsed,
-							className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-background-tertiary transition-colors",
+							className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-surface-sunken transition-colors",
 							children: [
 								/* @__PURE__ */ jsx(Icon, {
 									icon: groupCollapsed ? "mdi:chevron-right" : "mdi:chevron-down",
@@ -2503,7 +2503,7 @@ function RunLogViewer({ runId, lines, nodeStates, nodeDisplay, loading, error, h
 							className: "font-mono text-xs",
 							children: group.lines.map((line) => /* @__PURE__ */ jsxs("div", {
 								id: `L${line.id}`,
-								className: `group flex items-start gap-2 px-3 py-0.5 hover:bg-background-tertiary ${highlighted === line.id ? "bg-[var(--color-status-info-bg-subtle)]" : ""}`,
+								className: `group flex items-start gap-2 px-3 py-0.5 hover:bg-surface-sunken ${highlighted === line.id ? "bg-[var(--color-status-info-bg-subtle)]" : ""}`,
 								children: [
 									showTimestamps && /* @__PURE__ */ jsx("span", {
 										className: "text-text-secondary whitespace-nowrap select-none",
@@ -2559,7 +2559,7 @@ const TONE = {
 };
 function RunSummaryCard({ status, sentence, onRunAgain, runAgainBusy, onOpenWorkflow, reconnectTo }) {
 	const tr = useTr();
-	const tone = TONE[status] ?? "border-border-secondary bg-background-secondary";
+	const tone = TONE[status] ?? "border-border-default bg-surface";
 	return /* @__PURE__ */ jsxs("section", {
 		"aria-label": tr("fluidgrids.executions.runSummary.heading", "What happened"),
 		"data-testid": "run-summary-card",
@@ -2972,7 +2972,7 @@ function RunCallPath({ view, parentRunId }) {
 					className: "flex min-w-0 items-center gap-1",
 					children: [index > 0 && /* @__PURE__ */ jsx(Icon, {
 						icon: "mdi:chevron-right",
-						className: "text-text-tertiary",
+						className: "text-text-muted",
 						width: 14,
 						"aria-hidden": true
 					}), /* @__PURE__ */ jsx(Link, {
@@ -3002,7 +3002,7 @@ function ChildRunsPanel({ view, nodeDisplay, formatDateTime }) {
 	const children = view?.children ?? [];
 	if (children.length === 0) return null;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"aria-labelledby": "run-child-runs-heading",
 		"data-testid": "run-child-runs",
 		children: [
@@ -3018,7 +3018,7 @@ function ChildRunsPanel({ view, nodeDisplay, formatDateTime }) {
 						children: tr("fluidgrids.executions.hierarchy.childRunsTitle", "Child runs")
 					}),
 					/* @__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: children.length.toLocaleString()
 					})
 				]
@@ -3028,12 +3028,12 @@ function ChildRunsPanel({ view, nodeDisplay, formatDateTime }) {
 				children: tr("fluidgrids.executions.hierarchy.truncated", "This call tree has more runs than can be listed here, so some child runs may be missing.")
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				className: "mt-3 divide-y divide-border-secondary",
+				className: "mt-3 divide-y divide-border-default",
 				children: children.map((child) => {
 					const node = child.parentNodeId ? nodeDisplay[child.parentNodeId]?.label ?? child.parentNodeId : null;
 					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
 						to: runPath(child.id),
-						className: "flex flex-col gap-1 py-2 hover:bg-background-tertiary sm:flex-row sm:items-center sm:gap-3",
+						className: "flex flex-col gap-1 py-2 hover:bg-surface-sunken sm:flex-row sm:items-center sm:gap-3",
 						"data-testid": "run-child-run",
 						children: [
 							/* @__PURE__ */ jsx(ExecutionStatusBadge, {
@@ -3091,7 +3091,7 @@ function RunPolicyDecisions({ decisions, waiting, onDecide }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-policy-decisions",
 		children: [
 			/* @__PURE__ */ jsx("h3", {
@@ -3160,7 +3160,7 @@ function RunDataPrunedNotice({ dataPrunedAt }) {
 	const tr = useTr();
 	if (!dataPrunedAt) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-data-pruned-notice",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2 text-sm font-medium text-text-primary",
@@ -3222,7 +3222,7 @@ function RunQueuedBanner({ status, context }) {
 	const since = new Date(marker.queuedAt).toLocaleString();
 	const workspace = marker.scope === "WORKSPACE";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-queued-banner",
 		"data-queue-scope": marker.scope,
 		children: [
@@ -3238,7 +3238,7 @@ function RunQueuedBanner({ status, context }) {
 				children: workspace ? tr("fluidgrids.executions.queued.workspaceBody", "This workspace allows {{limit}} runs at a time across all its workflows and {{active}} are in progress. This run is number {{position}} in line and starts automatically when a slot frees up.", numbers) : tr("fluidgrids.executions.queued.body", "This workflow allows {{limit}} runs at a time and {{active}} are in progress. This run is number {{position}} in line and starts automatically when a slot frees up.", numbers)
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "mt-1 text-xs text-text-tertiary",
+				className: "mt-1 text-xs text-text-muted",
 				children: workspace ? tr("fluidgrids.executions.queued.workspaceSince", "Queued since {{time}} · the limit comes from your workspace's plan", { time: since }) : tr("fluidgrids.executions.queued.since", "Queued since {{time}} · change the limit in the workflow's Settings (Max parallel executions)", { time: since })
 			})
 		]
@@ -3304,7 +3304,7 @@ function RunBudgetPanel({ budget }) {
 	const stopped = budget.exceeded.find((event) => event.mode === "HARD");
 	const warned = budget.exceeded.filter((event) => event.mode === "SOFT");
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-budget-panel",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -3355,14 +3355,14 @@ function RunBudgetPanel({ budget }) {
 									})
 								]
 							}), /* @__PURE__ */ jsx("div", {
-								className: "mt-1 h-1.5 w-full overflow-hidden rounded-full bg-background-tertiary",
+								className: "mt-1 h-1.5 w-full overflow-hidden rounded-full bg-surface-sunken",
 								role: "progressbar",
 								"aria-label": label(dimension),
 								"aria-valuemin": 0,
 								"aria-valuemax": 100,
 								"aria-valuenow": value === null ? void 0 : Math.round(share * 100),
 								children: /* @__PURE__ */ jsx("div", {
-									className: over ? limit.mode === "HARD" ? "h-full bg-status-error" : "h-full bg-status-warning" : "h-full bg-primary",
+									className: over ? limit.mode === "HARD" ? "h-full bg-error" : "h-full bg-warning" : "h-full bg-primary",
 									style: { width: `${Math.round(share * 100)}%` }
 								})
 							})]
@@ -3426,7 +3426,7 @@ function RunAiAssistPanel({ runId, status, canPropose, canApply, onOpenWorkflow
 	}, [proposal, tr]);
 	if (status !== "FAILED" && status !== "TERMINATED") return null;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-primary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface-canvas p-4",
 		"data-testid": "run-ai-assist",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -3477,7 +3477,7 @@ function RunAiAssistPanel({ runId, status, canPropose, canApply, onOpenWorkflow
 						children: explanation.cause
 					}),
 					explanation.evidence.length > 0 && /* @__PURE__ */ jsx("pre", {
-						className: "max-h-40 overflow-auto whitespace-pre-wrap rounded bg-background-secondary p-2 text-xs text-text-secondary",
+						className: "max-h-40 overflow-auto whitespace-pre-wrap rounded bg-surface p-2 text-xs text-text-secondary",
 						children: explanation.evidence.join("\n")
 					}),
 					explanation.suggestions.length > 0 && /* @__PURE__ */ jsx("ul", {
@@ -3559,7 +3559,7 @@ function RunFailureClusterCard({ runId, status, canApply, onOpenWorkflow }) {
 	if (!failed || !cluster) return null;
 	const bucket = BUCKET_LABELS[String(cluster.bucket)];
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-primary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface-canvas p-4",
 		"data-testid": "run-failure-cluster",
 		"data-bucket": String(cluster.bucket),
 		children: [
@@ -3576,7 +3576,7 @@ function RunFailureClusterCard({ runId, status, canApply, onOpenWorkflow }) {
 						children: tr("fluidgrids.triage.runCardTitle", "Repeated failure")
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "inline-flex items-center gap-1 rounded-full bg-background-secondary px-2 py-0.5 text-xs text-text-secondary",
+						className: "inline-flex items-center gap-1 rounded-full bg-surface px-2 py-0.5 text-xs text-text-secondary",
 						children: [bucket && /* @__PURE__ */ jsx(Icon, {
 							icon: bucket.icon,
 							width: 14
@@ -3648,7 +3648,7 @@ const CAUSE_LABELS = {
 function HotfixCommandRow({ command }) {
 	const tr = useTr();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 rounded bg-background-tertiary p-2",
+		className: "flex items-center gap-2 rounded bg-surface-sunken p-2",
 		children: [/* @__PURE__ */ jsx("code", {
 			className: "flex-1 font-mono text-sm text-text-primary",
 			children: command
@@ -3830,14 +3830,14 @@ const COMPONENTS = {
 	},
 	img: ({ alt }) => /* @__PURE__ */ jsx("span", { children: alt ?? "" }),
 	code: ({ children }) => /* @__PURE__ */ jsx("code", {
-		className: "rounded bg-background-tertiary px-1 py-0.5 font-mono text-xs text-text-primary",
+		className: "rounded bg-surface-sunken px-1 py-0.5 font-mono text-xs text-text-primary",
 		children
 	}),
 	pre: ({ children }) => /* @__PURE__ */ jsx("pre", {
-		className: "mb-2 overflow-auto rounded bg-background-tertiary p-2 font-mono text-xs",
+		className: "mb-2 overflow-auto rounded bg-surface-sunken p-2 font-mono text-xs",
 		children
 	}),
-	hr: () => /* @__PURE__ */ jsx("hr", { className: "my-2 border-border-secondary" })
+	hr: () => /* @__PURE__ */ jsx("hr", { className: "my-2 border-border-default" })
 };
 /** Keeps the link target for the `a` renderer to check; never an image URL. */
 function urlTransform(url, key) {
@@ -3901,7 +3901,7 @@ function MetadataSection({ metadata }) {
 	if (!hasHandlers && !metadata.currentDetails) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "waiting-at-metadata",
-		className: "mt-3 space-y-3 border-t border-border-secondary pt-3",
+		className: "mt-3 space-y-3 border-t border-border-default pt-3",
 		children: [metadata.currentDetails && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h5", {
 			className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
 			children: tr("fluidgrids.executions.waitingAt.currentDetails", "Now")
@@ -3931,7 +3931,7 @@ function WaitingAtPanel({ trace, loading, error, onRefresh, metadata }) {
 	const tr = useTr();
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "waiting-at-panel",
-		className: "rounded-md border border-border-secondary bg-background-primary p-3",
+		className: "rounded-md border border-border-default bg-surface-canvas p-3",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "mb-2 flex items-center gap-2",
@@ -3966,7 +3966,7 @@ function WaitingAtPanel({ trace, loading, error, onRefresh, metadata }) {
 					" ",
 					error
 				]
-			}) : loading && trace === null ? /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded bg-background-tertiary" }) : trace ? /* @__PURE__ */ jsx("pre", {
+			}) : loading && trace === null ? /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded bg-surface-sunken" }) : trace ? /* @__PURE__ */ jsx("pre", {
 				className: "max-h-64 overflow-auto whitespace-pre-wrap break-words font-mono text-xs text-text-primary",
 				children: trace
 			}) : /* @__PURE__ */ jsx("p", {
@@ -4253,7 +4253,7 @@ function CostValue({ usage, tr }) {
 }
 function Stat({ label, children, detail }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "rounded-lg border border-border-secondary bg-background-primary p-3",
+		className: "rounded-lg border border-border-default bg-surface-canvas p-3",
 		children: [
 			/* @__PURE__ */ jsx("p", {
 				className: "text-xs text-text-secondary",
@@ -4307,7 +4307,7 @@ function AiUsageRollup({ usage, loading, error, onRefresh, nodeDisplay, tr }) {
 					2,
 					3,
 					4
-				].map((item) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-background-tertiary" }, item))
+				].map((item) => /* @__PURE__ */ jsx("div", { className: "h-20 animate-pulse rounded-lg bg-surface-sunken" }, item))
 			}),
 			total ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 				className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
@@ -4347,11 +4347,11 @@ function AiUsageRollup({ usage, loading, error, onRefresh, nodeDisplay, tr }) {
 }
 function UsageLines({ lines, nodeDisplay, tr }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "overflow-x-auto rounded-lg border border-border-secondary",
+		className: "overflow-x-auto rounded-lg border border-border-default",
 		children: /* @__PURE__ */ jsxs("table", {
 			className: "w-full min-w-[560px] text-sm",
 			children: [/* @__PURE__ */ jsx("thead", {
-				className: "bg-background-tertiary text-left text-xs text-text-secondary",
+				className: "bg-surface-sunken text-left text-xs text-text-secondary",
 				children: /* @__PURE__ */ jsxs("tr", { children: [
 					/* @__PURE__ */ jsx("th", {
 						className: "px-3 py-2 font-medium",
@@ -4375,7 +4375,7 @@ function UsageLines({ lines, nodeDisplay, tr }) {
 					})
 				] })
 			}), /* @__PURE__ */ jsx("tbody", { children: lines.map((line) => /* @__PURE__ */ jsxs("tr", {
-				className: "border-t border-border-secondary",
+				className: "border-t border-border-default",
 				children: [
 					/* @__PURE__ */ jsx("td", {
 						className: "px-3 py-2 text-text-primary",
@@ -4423,7 +4423,7 @@ function AgentNodeCard({ trace, steps, liveReplies, runLive, title, focused, tr
 		ref,
 		"aria-label": title,
 		"data-agent-node": trace.nodeId,
-		className: `rounded-lg border bg-background-primary p-4 ${focused ? "border-action-primary-bg" : "border-border-secondary"}`,
+		className: `rounded-lg border bg-surface-canvas p-4 ${focused ? "border-action-primary-bg" : "border-border-default"}`,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
@@ -4527,7 +4527,7 @@ function AgentNodeCard({ trace, steps, liveReplies, runLive, title, focused, tr
 					className: "cursor-pointer text-sm font-medium text-text-primary",
 					children: tr("fluidgrids.executions.executionDetail.agent.finalResponse", "Final response")
 				}), /* @__PURE__ */ jsx("pre", {
-					className: "mt-2 max-h-80 overflow-auto rounded bg-background-tertiary p-3 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
+					className: "mt-2 max-h-80 overflow-auto rounded bg-surface-sunken p-3 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
 					children: trace.response
 				})]
 			})
@@ -4562,7 +4562,7 @@ function PendingApprovals({ trace, tr }) {
 		}), trace.pendingApprovals.length > 0 && /* @__PURE__ */ jsx("ul", {
 			className: "mt-2 space-y-2",
 			children: trace.pendingApprovals.map((call) => /* @__PURE__ */ jsxs("li", {
-				className: "rounded bg-background-primary p-2",
+				className: "rounded bg-surface-canvas p-2",
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "font-mono text-xs font-medium text-text-primary",
 					children: call.tool
@@ -4577,7 +4577,7 @@ function PendingApprovals({ trace, tr }) {
 function AgentStepRow({ step, tr }) {
 	const marked = step.outcome !== "ok";
 	return /* @__PURE__ */ jsx("li", {
-		className: `rounded border ${step.outcome === "rejected" ? "border-status-warning-border" : step.outcome === "failed" ? "border-status-error-border" : "border-border-secondary"}`,
+		className: `rounded border ${step.outcome === "rejected" ? "border-status-warning-border" : step.outcome === "failed" ? "border-status-error-border" : "border-border-default"}`,
 		children: /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsxs("summary", {
 			className: "flex cursor-pointer flex-wrap items-center gap-2 px-3 py-2 text-sm",
 			children: [
@@ -4603,7 +4603,7 @@ function AgentStepRow({ step, tr }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2 border-t border-border-secondary px-3 py-2",
+			className: "space-y-2 border-t border-border-default px-3 py-2",
 			children: [
 				marked && step.reason && /* @__PURE__ */ jsx("p", {
 					className: `text-sm ${step.outcome === "rejected" ? "text-status-warning-text" : "text-status-error-text"}`,
@@ -4628,7 +4628,7 @@ function StepBlock({ label, value, empty }) {
 		className: "text-xs font-medium text-text-secondary",
 		children: label
 	}), value ? /* @__PURE__ */ jsx("pre", {
-		className: "mt-1 max-h-64 overflow-auto rounded bg-background-tertiary p-2 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
+		className: "mt-1 max-h-64 overflow-auto rounded bg-surface-sunken p-2 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
 		children: value
 	}) : /* @__PURE__ */ jsx("p", {
 		className: "mt-1 text-xs text-text-secondary",
@@ -4665,7 +4665,7 @@ function IterationList({ node, tr }) {
 }
 function IterationRow({ iteration, open, tr }) {
 	return /* @__PURE__ */ jsx("li", {
-		className: `rounded border ${iteration.error ? "border-status-error-border" : "border-border-secondary"}`,
+		className: `rounded border ${iteration.error ? "border-status-error-border" : "border-border-default"}`,
 		"data-agent-iteration": iteration.iteration,
 		children: /* @__PURE__ */ jsxs("details", {
 			open,
@@ -4697,7 +4697,7 @@ function IterationRow({ iteration, open, tr }) {
 					})
 				]
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 border-t border-border-secondary px-3 py-2",
+				className: "space-y-2 border-t border-border-default px-3 py-2",
 				children: [
 					iteration.turns.map((turn) => /* @__PURE__ */ jsx(ModelTurnRow, {
 						turn,
@@ -4708,7 +4708,7 @@ function IterationRow({ iteration, open, tr }) {
 						tr
 					}, call.key)),
 					iteration.final && /* @__PURE__ */ jsxs("div", {
-						className: "rounded bg-background-tertiary p-2",
+						className: "rounded bg-surface-sunken p-2",
 						children: [
 							/* @__PURE__ */ jsx("p", {
 								className: "text-xs font-medium text-text-secondary",
@@ -4754,7 +4754,7 @@ function IterationRow({ iteration, open, tr }) {
 }
 function ModelTurnRow({ turn, tr }) {
 	return /* @__PURE__ */ jsxs("details", {
-		className: "rounded border border-border-secondary",
+		className: "rounded border border-border-default",
 		children: [/* @__PURE__ */ jsxs("summary", {
 			className: "flex cursor-pointer flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2 text-sm",
 			children: [
@@ -4796,7 +4796,7 @@ function ModelTurnRow({ turn, tr }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2 border-t border-border-secondary px-3 py-2",
+			className: "space-y-2 border-t border-border-default px-3 py-2",
 			children: [
 				/* @__PURE__ */ jsx(StepBlock, {
 					label: tr("fluidgrids.executions.executionDetail.agent.sentToModel", "Sent to the model"),
@@ -4829,11 +4829,11 @@ function repliesWithoutStep(replies, steps) {
 /** Border and note colour of a live reply in each state. */
 const LIVE_REPLY_TONE = {
 	streaming: {
-		border: "border-border-secondary",
+		border: "border-border-default",
 		note: "text-text-secondary"
 	},
 	done: {
-		border: "border-border-secondary",
+		border: "border-border-default",
 		note: "text-text-secondary"
 	},
 	failed: {
@@ -4883,7 +4883,7 @@ function LiveReplyText({ text, writing, tr }) {
 		});
 	}
 	return /* @__PURE__ */ jsxs("pre", {
-		className: "mt-2 max-h-80 overflow-auto rounded bg-background-tertiary p-2 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
+		className: "mt-2 max-h-80 overflow-auto rounded bg-surface-sunken p-2 font-mono text-xs whitespace-pre-wrap break-words text-text-primary",
 		"aria-live": writing ? "polite" : "off",
 		"data-testid": "agent-live-reply-text",
 		children: [text, writing && /* @__PURE__ */ jsx("span", {
@@ -4939,7 +4939,7 @@ function LiveReply({ reply, runLive, tr }) {
 }
 function ToolCallRow({ call, tr }) {
 	const waiting = !call.hasResult && call.rule === "ask";
-	let border = "border-border-secondary";
+	let border = "border-border-default";
 	if (call.outcome === "rejected" || waiting) border = "border-status-warning-border";
 	else if (call.outcome === "failed") border = "border-status-error-border";
 	return /* @__PURE__ */ jsxs("details", {
@@ -4974,7 +4974,7 @@ function ToolCallRow({ call, tr }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "space-y-2 border-t border-border-secondary px-3 py-2",
+			className: "space-y-2 border-t border-border-default px-3 py-2",
 			children: [
 				call.outcome !== "ok" && call.reason && /* @__PURE__ */ jsx("p", {
 					className: `text-sm ${call.outcome === "rejected" ? "text-status-warning-text" : "text-status-error-text"}`,
@@ -5288,11 +5288,11 @@ function RunActivitiesCard({ runId, activities, pauseStates, pauseRules, canCont
 	const rules = useMemo(() => new Map(pauseRules.map((rule) => [rule.id, rule])), [pauseRules]);
 	if (activities.length === 0) return null;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary",
+		className: "mb-6 rounded-lg border border-border-default bg-surface",
 		"data-testid": "run-activities-card",
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "flex flex-wrap items-center gap-2 border-b border-border-secondary px-4 py-3",
+				className: "flex flex-wrap items-center gap-2 border-b border-border-default px-4 py-3",
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
 						icon: "mdi:cog-play-outline",
@@ -5336,7 +5336,7 @@ function RunActivitiesCard({ runId, activities, pauseStates, pauseRules, canCont
 				]
 			}),
 			/* @__PURE__ */ jsx("ul", {
-				className: "divide-y divide-border-secondary",
+				className: "divide-y divide-border-default",
 				children: activities.map((activity) => {
 					const pause = pauseStates.get(activity.activityId);
 					const rule = pause?.ruleId ? rules.get(pause.ruleId) : void 0;
@@ -5724,7 +5724,7 @@ function RunQueryPanel({ runId, handlers }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "space-y-3 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "space-y-3 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-query-panel",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -5880,7 +5880,7 @@ function RunSearchAttributesCard({ runId, attributes, canEdit, onChanged }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "run-search-attributes",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -6352,7 +6352,7 @@ function SignalTokensPanel({ runId, signalNames, canCreate }) {
 		}
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "space-y-3 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "space-y-3 rounded-lg border border-border-default bg-surface p-4",
 		"data-testid": "signal-tokens-panel",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -6392,7 +6392,7 @@ function SignalTokensPanel({ runId, signalNames, canCreate }) {
 				children: tr("fluidgrids.runControl.tokens.empty", "No tokens yet.")
 			}),
 			tokens.data && tokens.data.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "divide-y divide-border-secondary rounded-md border border-border-secondary",
+				className: "divide-y divide-border-default rounded-md border border-border-default",
 				children: tokens.data.map((token) => {
 					const state = tokenState(token);
 					return /* @__PURE__ */ jsxs("li", {
@@ -6592,7 +6592,7 @@ function SignalTokenCreatedDialog({ created, onClose }) {
 						children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.runControl.tokens.url", "Signal URL") }), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [/* @__PURE__ */ jsx("code", {
-								className: "min-w-0 flex-1 break-all rounded-md bg-background-primary p-2 font-mono text-xs text-text-primary",
+								className: "min-w-0 flex-1 break-all rounded-md bg-surface-canvas p-2 font-mono text-xs text-text-primary",
 								"data-testid": "signal-token-url",
 								children: created.url
 							}), /* @__PURE__ */ jsx(Button$1, {
@@ -6610,7 +6610,7 @@ function SignalTokenCreatedDialog({ created, onClose }) {
 						children: [/* @__PURE__ */ jsx(Label, { children: tr("fluidgrids.runControl.tokens.token", "Token") }), /* @__PURE__ */ jsxs("div", {
 							className: "flex gap-2",
 							children: [/* @__PURE__ */ jsx("code", {
-								className: "min-w-0 flex-1 break-all rounded-md bg-background-primary p-2 font-mono text-xs text-text-primary",
+								className: "min-w-0 flex-1 break-all rounded-md bg-surface-canvas p-2 font-mono text-xs text-text-primary",
 								"data-testid": "signal-token-value",
 								children: created.token
 							}), /* @__PURE__ */ jsx(Button$1, {
@@ -6861,11 +6861,11 @@ function formatBytes(bytes) {
 }
 function PayloadView({ value, codecServer, fetchImpl }) {
 	if (!containsEncodedPayload(value)) return /* @__PURE__ */ jsx("pre", {
-		className: "mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-background-secondary p-2 font-mono text-text-primary",
+		className: "mt-1 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded bg-surface p-2 font-mono text-text-primary",
 		children: JSON.stringify(value, null, 2)
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "mt-1 max-h-64 overflow-auto rounded bg-background-secondary p-2 font-mono text-text-primary",
+		className: "mt-1 max-h-64 overflow-auto rounded bg-surface p-2 font-mono text-text-primary",
 		"data-testid": "payload-view",
 		children: /* @__PURE__ */ jsx(PayloadNode, {
 			value,
@@ -6921,7 +6921,7 @@ function EncodedPayloadChip({ payload, codecServer, fetchImpl }) {
 		className: "inline-block align-top",
 		"data-testid": "payload-decoded",
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "mr-1 rounded border border-border-secondary px-1 text-[10px] uppercase text-text-secondary",
+			className: "mr-1 rounded border border-border-default px-1 text-[10px] uppercase text-text-secondary",
 			children: tr("fluidgrids.runControl.payload.decoded", "decoded")
 		}), /* @__PURE__ */ jsx("span", {
 			className: "whitespace-pre-wrap break-words",
@@ -6947,7 +6947,7 @@ function EncodedPayloadChip({ payload, codecServer, fetchImpl }) {
 		"data-testid": "payload-encoded",
 		children: [
 			/* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-1 rounded border border-border-secondary bg-background-tertiary px-1.5 py-0.5 text-xs text-text-secondary",
+				className: "inline-flex items-center gap-1 rounded border border-border-default bg-surface-sunken px-1.5 py-0.5 text-xs text-text-secondary",
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
 						icon: "mdi:lock-outline",
@@ -6990,7 +6990,7 @@ function RunArchivedNotice({ runId, enabled }) {
 	if (!archive.data?.archived) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
-		className: "flex items-start gap-2 rounded-md border border-border-secondary bg-background-tertiary p-3 text-sm text-text-primary",
+		className: "flex items-start gap-2 rounded-md border border-border-default bg-surface-elevated p-3 text-sm text-text-primary",
 		"data-testid": "run-archived",
 		children: [/* @__PURE__ */ jsx(Icon, {
 			icon: "mdi:archive-outline",
@@ -7063,7 +7063,7 @@ const STATE_CLASS = {
 	BACKOFF: "border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg-subtle)] text-[var(--color-status-warning-text)]",
 	CANCEL_REQUESTED: "border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bg-subtle)] text-[var(--color-status-warning-text)]"
 };
-const NEUTRAL_STATE = "border-border-secondary bg-background-tertiary text-text-secondary";
+const NEUTRAL_STATE = "border-border-default bg-surface-sunken text-text-secondary";
 function StateChip({ state }) {
 	if (!state) return null;
 	return /* @__PURE__ */ jsx("span", {
@@ -7075,7 +7075,7 @@ function RunPendingCard({ pending, loading, error, onRefresh, onViewChildRun })
 	const tr = useTr();
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "run-pending-card",
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "mb-3 flex items-center gap-2",
 			children: [
@@ -7109,7 +7109,7 @@ function RunPendingCard({ pending, loading, error, onRefresh, onViewChildRun })
 				" ",
 				error
 			]
-		}) : !pending ? loading ? /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded bg-background-tertiary" }) : null : isPendingEmpty(pending) ? /* @__PURE__ */ jsx("p", {
+		}) : !pending ? loading ? /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded bg-surface-sunken" }) : null : isPendingEmpty(pending) ? /* @__PURE__ */ jsx("p", {
 			className: "text-sm text-text-secondary",
 			children: tr("fluidgrids.executions.pending.none", "Nothing is outstanding right now.")
 		}) : /* @__PURE__ */ jsxs("div", {
@@ -7140,7 +7140,7 @@ function RunPendingCard({ pending, loading, error, onRefresh, onViewChildRun })
 					]
 				}),
 				pending.activities.length > 0 && /* @__PURE__ */ jsx("ul", {
-					className: "divide-y divide-border-secondary rounded-md border border-border-secondary",
+					className: "divide-y divide-border-default rounded-md border border-border-default",
 					children: pending.activities.map((activity) => {
 						const failure = pendingValueText(activity.lastFailure);
 						const heartbeat = pendingValueText(activity.heartbeatDetails);
@@ -7273,7 +7273,7 @@ const TONE_CLASS = {
 	success: "border-[var(--color-status-success-border)] bg-[var(--color-status-success-bg-subtle)] text-[var(--color-status-success-text)]",
 	error: "border-[var(--color-status-error-border)] bg-[var(--color-status-error-bg-subtle)] text-[var(--color-status-error-text)]",
 	info: "border-[var(--color-status-info-border)] bg-[var(--color-status-info-bg-subtle)] text-[var(--color-status-info-text)]",
-	neutral: "border-border-secondary bg-background-tertiary text-text-secondary"
+	neutral: "border-border-default bg-surface-sunken text-text-secondary"
 };
 const LINK_LABELS = {
 	first: ["fluidgrids.executions.parity.firstRun", "First run"],
@@ -7297,7 +7297,7 @@ function formatDateTime(value) {
 function Row({ label, children, testId }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
-		className: "flex flex-col gap-1 border-b border-border-secondary py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
+		className: "flex flex-col gap-1 border-b border-border-default py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "shrink-0 text-sm text-text-secondary",
 			children: label
@@ -7319,7 +7319,7 @@ function RunParityPanel({ run, open, durable, canOverride, onOverride }) {
 	].filter(([, value]) => value !== null);
 	return /* @__PURE__ */ jsxs("section", {
 		"data-testid": "run-parity-panel",
-		className: "mb-6 rounded-lg border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-lg border border-border-default bg-surface p-4",
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [
 				run.businessId && /* @__PURE__ */ jsx(Row, {
@@ -7398,7 +7398,7 @@ function RunParityPanel({ run, open, durable, canOverride, onOverride }) {
 						className: "flex flex-wrap items-center gap-2 sm:justify-end",
 						children: [
 							/* @__PURE__ */ jsx("span", {
-								className: "rounded border border-border-secondary bg-background-tertiary px-1.5 py-0.5 text-xs",
+								className: "rounded border border-border-default bg-surface-sunken px-1.5 py-0.5 text-xs",
 								"data-testid": "run-parity-behavior",
 								children: versioning.behavior === "AUTO_UPGRADE" ? tr("fluidgrids.executions.parity.autoUpgrade", "Auto-upgrade") : tr("fluidgrids.executions.parity.pinned", "Pinned")
 							}),
@@ -7540,7 +7540,7 @@ function RunVersioningOverrideDialog({ open, onOpenChange, runId, versions, curr
 					disabled: saving,
 					children: [
 						options.map((option) => /* @__PURE__ */ jsxs("label", {
-							className: "flex cursor-pointer gap-2 rounded-md border border-border-secondary p-2",
+							className: "flex cursor-pointer gap-2 rounded-md border border-border-default p-2",
 							children: [/* @__PURE__ */ jsx("input", {
 								type: "radio",
 								name: "run-override",
@@ -7562,7 +7562,7 @@ function RunVersioningOverrideDialog({ open, onOpenChange, runId, versions, curr
 							children: [tr("fluidgrids.executions.override.version", "Version"), /* @__PURE__ */ jsxs("select", {
 								value: version,
 								onChange: (event) => setVersion(event.target.value),
-								className: "mt-1 h-9 w-full rounded-md border border-border-secondary bg-background-primary px-2 text-sm text-text-primary",
+								className: "mt-1 h-9 w-full rounded-md border border-border-default bg-surface-canvas px-2 text-sm text-text-primary",
 								"data-testid": "run-override-version",
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
@@ -7995,22 +7995,22 @@ function ExecutionDetailPage() {
 		});
 	};
 	if (loading && !execution) return /* @__PURE__ */ jsx("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: "animate-pulse",
 			children: [
-				/* @__PURE__ */ jsx("div", { className: "h-8 w-48 bg-background-tertiary rounded mb-4" }),
-				/* @__PURE__ */ jsx("div", { className: "h-4 w-32 bg-background-tertiary rounded mb-8" }),
+				/* @__PURE__ */ jsx("div", { className: "h-8 w-48 bg-surface-sunken rounded mb-4" }),
+				/* @__PURE__ */ jsx("div", { className: "h-4 w-32 bg-surface-sunken rounded mb-8" }),
 				/* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6",
-					children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 bg-background-tertiary rounded-lg" }, i))
+					children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 bg-surface-sunken rounded-lg" }, i))
 				}),
-				/* @__PURE__ */ jsx("div", { className: "h-96 bg-background-tertiary rounded-lg" })
+				/* @__PURE__ */ jsx("div", { className: "h-96 bg-surface-sunken rounded-lg" })
 			]
 		})
 	});
 	if (error) 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(Link, {
 			to: "../runs",
 			className: "text-text-link hover:text-text-linkHover hover:underline text-sm mb-4 inline-block",
@@ -8051,7 +8051,7 @@ function ExecutionDetailPage() {
 		})]
 	});
 	if (!execution) 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(Link, {
 			to: "../runs",
 			className: "text-text-link hover:text-text-linkHover hover:underline text-sm mb-4 inline-block",
@@ -8061,7 +8061,7 @@ function ExecutionDetailPage() {
 				tr("fluidgrids.executions.executionDetail.backToExecutions", "Back to Executions")
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "bg-background-secondary border border-border-secondary rounded-lg p-6 text-center",
+			className: "bg-surface border border-border-default rounded-lg p-6 text-center",
 			children: [
 				/* @__PURE__ */ jsx(Icon, {
 					icon: "mdi:file-find-outline",
@@ -8123,7 +8123,7 @@ function ExecutionDetailPage() {
 		className: "text-lg font-medium text-text-primary mb-4",
 		children: tr("fluidgrids.executions.executionDetail.executionContextHeading", "Execution Context")
 	}), /* @__PURE__ */ jsx("div", {
-		className: "bg-background-primary rounded p-4 max-h-[300px] overflow-auto",
+		className: "bg-surface-canvas rounded p-4 max-h-[300px] overflow-auto",
 		children: /* @__PURE__ */ jsx("pre", {
 			className: "text-sm text-text-primary font-mono whitespace-pre-wrap break-words",
 			children: JSON.stringify(execution.context ?? null, null, 2)
@@ -8136,7 +8136,7 @@ function ExecutionDetailPage() {
 		className: "space-y-3",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.runIdRow", "Run ID")
@@ -8146,7 +8146,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.workflowRow", "Workflow")
@@ -8156,7 +8156,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.workflowKeyRow", "Workflow Key")
@@ -8166,7 +8166,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.versionRow", "Version")
@@ -8177,7 +8177,7 @@ function ExecutionDetailPage() {
 			}),
 			isDurableRun && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex justify-between py-2 border-b border-border-secondary",
+					className: "flex justify-between py-2 border-b border-border-default",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-text-secondary",
 						children: tr("fluidgrids.executions.executionDetail.workflowFnRow", "Function")
@@ -8187,7 +8187,7 @@ function ExecutionDetailPage() {
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex justify-between py-2 border-b border-border-secondary",
+					className: "flex justify-between py-2 border-b border-border-default",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-text-secondary",
 						children: tr("fluidgrids.executions.executionDetail.taskQueueRow", "Task queue")
@@ -8197,7 +8197,7 @@ function ExecutionDetailPage() {
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex justify-between gap-4 py-2 border-b border-border-secondary",
+					className: "flex justify-between gap-4 py-2 border-b border-border-default",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-text-secondary",
 						children: tr("fluidgrids.executions.executionDetail.buildIdRow", "Build")
@@ -8208,7 +8208,7 @@ function ExecutionDetailPage() {
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex justify-between py-2 border-b border-border-secondary",
+					className: "flex justify-between py-2 border-b border-border-default",
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "text-text-secondary",
 						children: tr("fluidgrids.executions.executionDetail.historyLengthRow", "History events")
@@ -8219,7 +8219,7 @@ function ExecutionDetailPage() {
 				})
 			] }),
 			execution.triggeredById && /* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.triggeredByRow", "Triggered By")
@@ -8230,7 +8230,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			execution.parentRunId && /* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.parentRunRow", "Parent Run")
@@ -8241,7 +8241,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.createdRow", "Created")
@@ -8251,7 +8251,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.startedRow", "Started")
@@ -8261,7 +8261,7 @@ function ExecutionDetailPage() {
 				})]
 			}),
 			execution.completedAt && /* @__PURE__ */ jsxs("div", {
-				className: "flex justify-between py-2 border-b border-border-secondary",
+				className: "flex justify-between py-2 border-b border-border-default",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-text-secondary",
 					children: tr("fluidgrids.executions.executionDetail.completedRow", "Completed")
@@ -8276,7 +8276,7 @@ function ExecutionDetailPage() {
 		className: "text-lg font-medium text-text-primary mb-4",
 		children: tr("fluidgrids.executions.executionDetail.triggerDataHeading", "Trigger Data")
 	}), /* @__PURE__ */ jsx("div", {
-		className: "bg-background-primary rounded p-4 max-h-[400px] overflow-auto",
+		className: "bg-surface-canvas rounded p-4 max-h-[400px] overflow-auto",
 		children: /* @__PURE__ */ jsx("pre", {
 			className: "text-sm text-text-primary font-mono whitespace-pre-wrap break-words",
 			children: JSON.stringify(execution.triggerData ?? null, null, 2)
@@ -8350,7 +8350,7 @@ function ExecutionDetailPage() {
 		failedSteps: execution.failedNodes
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "p-4 pb-24 sm:p-6 sm:pb-24 bg-background-primary min-h-screen",
+		className: "p-4 pb-24 sm:p-6 sm:pb-24 bg-surface-canvas min-h-screen",
 		children: [
 			/* @__PURE__ */ jsxs(Link, {
 				to: "../runs",
@@ -8714,7 +8714,7 @@ function ExecutionDetailPage() {
 				className: "grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: "bg-background-secondary rounded-lg border border-border-secondary p-4",
+						className: "bg-surface rounded-lg border border-border-default p-4",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-sm text-text-secondary",
 							children: tr("fluidgrids.executions.executionDetail.durationStat", "Duration")
@@ -8724,14 +8724,14 @@ function ExecutionDetailPage() {
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "bg-background-secondary rounded-lg border border-border-secondary p-4",
+						className: "bg-surface rounded-lg border border-border-default p-4",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-sm text-text-secondary",
 							children: tr("fluidgrids.executions.executionDetail.progressStat", "Progress")
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2 mt-1",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex-1 h-2 bg-background-tertiary rounded-full overflow-hidden",
+								className: "flex-1 h-2 bg-surface-sunken rounded-full overflow-hidden",
 								children: /* @__PURE__ */ jsx("div", {
 									className: `h-full ${execution.status === "FAILED" ? "bg-[var(--color-status-error-bg)]" : execution.status === "COMPLETED" ? "bg-[var(--color-status-success-bg)]" : "bg-[var(--color-status-info-bg)]"}`,
 									style: { width: `${execution.progress}%` }
@@ -8743,7 +8743,7 @@ function ExecutionDetailPage() {
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "bg-background-secondary rounded-lg border border-border-secondary p-4",
+						className: "bg-surface rounded-lg border border-border-default p-4",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-sm text-text-secondary",
 							children: tr("fluidgrids.executions.executionDetail.nodesStat", "Nodes")
@@ -8776,7 +8776,7 @@ function ExecutionDetailPage() {
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "bg-background-secondary rounded-lg border border-border-secondary p-4",
+						className: "bg-surface rounded-lg border border-border-default p-4",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "text-sm text-text-secondary",
 							children: tr("fluidgrids.executions.executionDetail.triggerStat", "Trigger")
@@ -8908,14 +8908,14 @@ function ExecutionDetailPage() {
 				onResetPointChange: setResetPoint
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "border-b border-border-secondary mb-6",
+				className: "border-b border-border-default mb-6",
 				children: /* @__PURE__ */ jsx("nav", {
 					className: "flex gap-4 -mb-px overflow-x-auto",
 					children: tabs.map((tab) => /* @__PURE__ */ jsxs("button", {
 						onClick: () => setActiveTab(tab.id),
 						className: `
                 flex shrink-0 items-center gap-2 whitespace-nowrap px-4 py-3 border-b-2 text-sm font-medium transition-colors
-                ${activeTab === tab.id ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-primary"}
+                ${activeTab === tab.id ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary hover:border-border-strong"}
               `,
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: tab.icon,
@@ -8925,7 +8925,7 @@ function ExecutionDetailPage() {
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "bg-background-secondary rounded-lg border border-border-secondary",
+				className: "bg-surface rounded-lg border border-border-default",
 				children: [
 					activeTab === "timeline" && /* @__PURE__ */ jsx("div", {
 						className: "p-4 sm:p-6",
@@ -9034,7 +9034,7 @@ function ExecutionDetailPage() {
 							className: "text-lg font-medium text-text-primary mb-4",
 							children: tr("fluidgrids.executions.executionDetail.triggerDataHeading", "Trigger Data")
 						}), /* @__PURE__ */ jsx("div", {
-							className: "bg-background-primary rounded p-4 max-h-[400px] overflow-auto",
+							className: "bg-surface-canvas rounded p-4 max-h-[400px] overflow-auto",
 							children: /* @__PURE__ */ jsx("pre", {
 								className: "text-sm text-text-primary font-mono whitespace-pre-wrap break-words",
 								children: JSON.stringify(execution.triggerData ?? null, null, 2)