@burdenoff/fluidgrids-fe-sdk 2026.1113.3 → 2026.1113.5

package/dist/{ExecutionsListPage-ASTpHWjv.js → ExecutionsListPage-DGHmXNTR.js}

@@ -1,26 +1,26 @@
 "use client";
 import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
 import { g as useExecutionsStore, h as DEFAULT_EXECUTIONS_FILTER } from "./config-X97zrIvn.js";
-import { b as validateDateRange, c as EMPTY_SEARCH_FILTER, d as searchFilterConflicts, i as useExecutionStats, l as OPERATORS_BY_TYPE, o as useExecutionsWithStore, r as useExecutionActions, t as useAutoRefresh, u as buildSearchAttributeFilter } from "./useExecutions-CB1Rva2V.js";
+import { b as validateDateRange, c as EMPTY_SEARCH_FILTER, d as searchFilterConflicts, i as useExecutionStats, l as OPERATORS_BY_TYPE, o as useExecutionsWithStore, r as useExecutionActions, t as useAutoRefresh, u as buildSearchAttributeFilter } from "./useExecutions-BvldyVgF.js";
 import { m as usePhaseCFlags, u as useDurableParityEnabled } from "./feature-flags-B_b8PJ6Z.js";
 import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
 import { n as useFluidGridsPageControls } from "./pageControlsBridge-0pX9s-3k.js";
 import { t as executionsControls } from "./pageControlSpecs-DZJ9K37m.js";
 import { t as TagFilterSelect } from "./TagFilterSelect-CAShgvbS.js";
 import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
-import { a as useRunStatusCounts, c as errorAdvice, f as runStatusLabels, o as ConfirmStopRunDialog, p as RUN_STATUS_CONFIG, s as ADVICE_ERROR_TYPES, u as ExecutionStatusBadge } from "./useDurableParity-CoX24dE8.js";
+import { a as useRunStatusCounts, c as errorAdvice, f as runStatusLabels, o as ConfirmStopRunDialog, p as RUN_STATUS_CONFIG, s as ADVICE_ERROR_TYPES, u as ExecutionStatusBadge } from "./useDurableParity-9mQYNpiP.js";
 import { t as Disclosure } from "./Disclosure-DQiUKrqd.js";
 import { n as formatRunVersion } from "./run-display-BycKYSU0.js";
-import { Yt as formatElapsedMs, Zt as runDurationMs } from "./FluidGridsProvider-Dc_Jhtch.js";
+import { Yt as formatElapsedMs, Zt as runDurationMs } from "./FluidGridsProvider-gB2POEu6.js";
 import { r as useRunHumanRequests } from "./useHumanRequests-DwG2tQ3f.js";
 import { n as runListLinkKey, t as runListFilterFromSearch } from "./run-list-links-DZ8Q5l35.js";
 import { t as TechnicalDetails } from "./TechnicalDetails-D4xGy201.js";
 import { t as RunActionsMenu } from "./RunActionsMenu-BE_1r3bF.js";
-import { h as useWorkflowDefinitions } from "./useWorkflows-DEWdntS_.js";
+import { h as useWorkflowDefinitions } from "./useWorkflows-Z4M64JlD.js";
 import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
 import { s as useFluidGridsPermission, t as FLUIDGRIDS_PERMISSIONS } from "./constants-dcxg6zG6.js";
-import { C as jsonArg, F as startBatchOperation, I as startBatchTerminate, P as startBatchExport, m as fetchBatchOperations, n as cancelBatchOperation, p as fetchBatchOperation, x as fetchSearchAttributes } from "./api-BqA-f-AD.js";
-import { a as RUN_CONTROL_DIALOG_STYLE, c as parseJsonInput, i as NativeSelect, o as StatusPill, r as JsonField, t as FieldError, u as useResource } from "./shared-Ctl9ZHo1.js";
+import { C as jsonArg, F as startBatchOperation, I as startBatchTerminate, P as startBatchExport, m as fetchBatchOperations, n as cancelBatchOperation, p as fetchBatchOperation, x as fetchSearchAttributes } from "./api-CEnNq15C.js";
+import { a as RUN_CONTROL_DIALOG_STYLE, c as parseJsonInput, i as NativeSelect, o as StatusPill, r as JsonField, t as FieldError, u as useResource } from "./shared-C0LCTtyh.js";
 import { t as describeOperationError } from "./errors-xPZ-IbQd.js";
 import { n as getFluidGridsClient } from "./client-Ctl4jmY3.js";
 import { bI as WorkflowResetType, eI as WorkflowBatchOperationType } from "./graphql-types-C5Tr6508.js";
@@ -554,7 +554,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 								placeholder: tr("fluidgrids.executions.executionFilters.searchPlaceholder", "Search by workflow name or run ID..."),
 								value: filter.search,
 								onChange: (e) => setSearchQuery(e.target.value),
-								className: "w-full pl-[3.25rem] pr-4 py-2 bg-background-secondary border border-border-secondary rounded-lg text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent"
+								className: "w-full pl-[3.25rem] pr-4 py-2 bg-surface border border-border-default rounded-lg text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-transparent"
 							}),
 							filter.search && /* @__PURE__ */ jsx("button", {
 								onClick: () => setSearchQuery(""),
@@ -707,7 +707,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => handleDatePresetChange("custom"),
-							className: "px-3 py-2 border border-border-default rounded-lg text-text-primary text-left hover:bg-background-tertiary",
+							className: "px-3 py-2 border border-border-default rounded-lg text-text-primary text-left hover:bg-surface-sunken",
 							"data-testid": "runs-custom-range",
 							children: tr("fluidgrids.executions.executionFilters.dateCustomRange", "Custom Range")
 						}),
@@ -717,7 +717,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 								type: "checkbox",
 								checked: autoRefresh,
 								onChange: (e) => setAutoRefresh(e.target.checked),
-								className: "w-4 h-4 rounded border-border-secondary text-action-primary-bg focus:ring-action-primary-bg"
+								className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
 							}), /* @__PURE__ */ jsx("span", {
 								className: "text-sm text-text-secondary",
 								children: tr("fluidgrids.executions.executionFilters.liveUpdates", "Live updates")
@@ -811,7 +811,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 			showCustomDate && /* @__PURE__ */ jsxs("div", {
 				className: "space-y-2",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-wrap gap-3 items-center p-3 bg-background-secondary rounded-lg border border-border-secondary",
+					className: "flex flex-wrap gap-3 items-center p-3 bg-surface rounded-lg border border-border-default",
 					children: [
 						/* @__PURE__ */ jsx("label", {
 							className: "text-sm text-text-secondary",
@@ -825,7 +825,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 								start: e.target.value ? new Date(e.target.value) : null,
 								preset: "custom"
 							}),
-							className: "px-3 py-1.5 bg-background-primary border border-border-secondary rounded text-text-primary text-sm"
+							className: "px-3 py-1.5 bg-surface-canvas border border-border-default rounded text-text-primary text-sm"
 						}),
 						/* @__PURE__ */ jsx("label", {
 							className: "text-sm text-text-secondary",
@@ -839,7 +839,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 								end: e.target.value ? new Date(e.target.value) : null,
 								preset: "custom"
 							}),
-							className: "px-3 py-1.5 bg-background-primary border border-border-secondary rounded text-text-primary text-sm"
+							className: "px-3 py-1.5 bg-surface-canvas border border-border-default rounded text-text-primary text-sm"
 						}),
 						/* @__PURE__ */ jsx("button", {
 							onClick: () => setShowCustomDate(false),
@@ -866,7 +866,7 @@ function ExecutionFilters({ workflows = [], onRefresh }) {
 							type: "checkbox",
 							checked: autoRefresh,
 							onChange: (e) => setAutoRefresh(e.target.checked),
-							className: "w-4 h-4 rounded border-border-secondary text-action-primary-bg focus:ring-action-primary-bg"
+							className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
 						}), /* @__PURE__ */ jsx("span", {
 							className: "text-sm text-text-secondary",
 							children: tr("fluidgrids.executions.executionFilters.autoRefresh", "Auto-refresh")
@@ -914,8 +914,8 @@ function StatCard({ label, value, icon, color, trend, onClick }) {
 		onClick,
 		disabled: !onClick,
 		className: `
-        flex flex-col p-4 bg-background-secondary rounded-lg border border-border-secondary
-        hover:border-border-primary transition-colors
+        flex flex-col p-4 bg-surface rounded-lg border border-border-default
+        hover:border-border-strong transition-colors
         ${onClick ? "cursor-pointer" : "cursor-default"}
         text-left w-full
       `,
@@ -951,7 +951,7 @@ function ExecutionStats({ stats, loading, scoped = false, onFilterByStatus }) {
 	const v2 = useNavigationV2();
 	if (loading) return /* @__PURE__ */ jsx("div", {
 		className: "grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4",
-		children: [...Array(v2 ? 4 : 6)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 bg-background-secondary rounded-lg border border-border-secondary animate-pulse" }, i))
+		children: [...Array(v2 ? 4 : 6)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-24 bg-surface rounded-lg border border-border-default animate-pulse" }, i))
 	});
 	if (!stats) return null;
 	const formatDuration = (seconds) => {
@@ -1189,13 +1189,13 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 		}));
 	};
 	if (loading && executions.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: "bg-background-secondary rounded-lg border border-border-secondary overflow-hidden",
+		className: "bg-surface rounded-lg border border-border-default overflow-hidden",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "overflow-x-auto",
 			children: /* @__PURE__ */ jsxs("table", {
 				className: "w-full min-w-[800px]",
 				children: [/* @__PURE__ */ jsx("thead", {
-					className: "bg-background-tertiary border-b border-border-secondary",
+					className: "bg-surface-sunken border-b border-border-default",
 					children: /* @__PURE__ */ jsxs("tr", { children: [
 						/* @__PURE__ */ jsx("th", { className: "w-10 px-4 py-3" }),
 						/* @__PURE__ */ jsx("th", {
@@ -1225,18 +1225,18 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 						/* @__PURE__ */ jsx("th", { className: "px-4 py-3" })
 					] })
 				}), /* @__PURE__ */ jsx("tbody", { children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("tr", {
-					className: "border-b border-border-secondary",
+					className: "border-b border-border-default",
 					children: /* @__PURE__ */ jsx("td", {
 						colSpan: 8,
 						className: "px-4 py-4",
-						children: /* @__PURE__ */ jsx("div", { className: "h-8 bg-background-tertiary rounded animate-pulse" })
+						children: /* @__PURE__ */ jsx("div", { className: "h-8 bg-surface-sunken rounded animate-pulse" })
 					})
 				}, i)) })]
 			})
 		})
 	});
 	if (executions.length === 0) return /* @__PURE__ */ jsxs("div", {
-		className: "bg-background-secondary rounded-lg border border-border-secondary p-12 text-center",
+		className: "bg-surface rounded-lg border border-border-default p-12 text-center",
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
 				icon: "mdi:play-box-outline",
@@ -1259,13 +1259,13 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 		]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "bg-background-secondary rounded-lg border border-border-secondary overflow-hidden",
+		className: "bg-surface rounded-lg border border-border-default overflow-hidden",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "overflow-x-auto",
 			children: /* @__PURE__ */ jsxs("table", {
 				className: "w-full min-w-[800px]",
 				children: [/* @__PURE__ */ jsx("thead", {
-					className: "bg-background-tertiary border-b border-border-secondary",
+					className: "bg-surface-sunken border-b border-border-default",
 					children: /* @__PURE__ */ jsxs("tr", { children: [
 						/* @__PURE__ */ jsx("th", {
 							className: "w-10 px-4 py-3",
@@ -1273,7 +1273,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 								type: "checkbox",
 								checked: selection.allSelected,
 								onChange: () => selectAll(allRunIds),
-								className: "w-4 h-4 rounded border-border-secondary"
+								className: "w-4 h-4 rounded border-border-default"
 							})
 						}),
 						/* @__PURE__ */ jsx("th", {
@@ -1303,13 +1303,13 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 						/* @__PURE__ */ jsx("th", { className: "px-4 py-3 w-32" })
 					] })
 				}), /* @__PURE__ */ jsx("tbody", {
-					className: "divide-y divide-border-secondary",
+					className: "divide-y divide-border-default",
 					children: executions.map((execution) => {
 						const isSelected = selection.runIds.includes(execution.id);
 						const isExpanded = expandedRows.has(execution.id);
 						return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
 							className: `
-                      hover:bg-background-tertiary/50 cursor-pointer transition-colors
+                      hover:bg-surface-sunken/50 cursor-pointer transition-colors
                       ${isSelected ? "bg-action-primary-bg/10" : ""}
                     `,
 							onClick: () => onRowClick?.(execution),
@@ -1321,7 +1321,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 										type: "checkbox",
 										checked: isSelected,
 										onChange: () => toggleSelectRun(execution.id),
-										className: "w-4 h-4 rounded border-border-secondary"
+										className: "w-4 h-4 rounded border-border-default"
 									})
 								}),
 								/* @__PURE__ */ jsx("td", {
@@ -1370,7 +1370,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 									children: /* @__PURE__ */ jsxs("div", {
 										className: "flex items-center gap-2",
 										children: [/* @__PURE__ */ jsx("div", {
-											className: "flex-1 h-2 bg-background-tertiary rounded-full overflow-hidden max-w-[100px]",
+											className: "flex-1 h-2 bg-surface-sunken rounded-full overflow-hidden max-w-[100px]",
 											children: /* @__PURE__ */ jsx("div", {
 												className: `h-full transition-all ${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}%` }
@@ -1396,7 +1396,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 												onClick: () => toggleRowExpanded(execution.id),
 												"aria-expanded": isExpanded,
 												"aria-label": isExpanded ? tr("fluidgrids.executions.executionTable.collapseRow", "Hide run details") : tr("fluidgrids.executions.executionTable.expandRow", "Show run details"),
-												className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+												className: "p-1.5 rounded hover:bg-surface-sunken text-text-secondary",
 												children: /* @__PURE__ */ jsx(Icon, {
 													icon: isExpanded ? "mdi:chevron-up" : "mdi:chevron-down",
 													width: 18
@@ -1408,7 +1408,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 													"data-agent": "confirm",
 													type: "button",
 													onClick: () => onAction?.(action.action, execution),
-													className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+													className: "p-1.5 rounded hover:bg-surface-sunken text-text-secondary",
 													title: action.label,
 													"aria-label": action.label,
 													children: /* @__PURE__ */ jsx(Icon, {
@@ -1419,7 +1419,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 											}),
 											/* @__PURE__ */ jsx("button", {
 												onClick: () => navigate(`../runs/${execution.id}`),
-												className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary",
+												className: "p-1.5 rounded hover:bg-surface-sunken text-text-secondary",
 												title: tr("fluidgrids.executions.executionTable.viewDetails", "View Details"),
 												"aria-label": tr("fluidgrids.executions.executionTable.viewDetails", "View Details"),
 												children: /* @__PURE__ */ jsx(Icon, {
@@ -1433,7 +1433,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 							]
 						}, execution.id), isExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
 							colSpan: 8,
-							className: "px-4 py-4 bg-background-tertiary/30",
+							className: "px-4 py-4 bg-surface-sunken/30",
 							children: /* @__PURE__ */ jsxs("div", {
 								className: "grid grid-cols-2 lg:grid-cols-4 gap-4",
 								children: [
@@ -1467,7 +1467,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 												]
 											}),
 											(execution.skippedNodes ?? 0) > 0 && /* @__PURE__ */ jsxs("span", {
-												className: "text-tertiary",
+												className: "text-text-muted",
 												children: [
 													execution.skippedNodes,
 													" ",
@@ -1500,7 +1500,7 @@ function ExecutionTable({ executions, workflowNames, loading, canExecute = true,
 				})]
 			})
 		}), /* @__PURE__ */ jsx("div", {
-			className: "sm:hidden px-4 py-2 bg-background-tertiary border-t border-border-secondary text-xs text-text-secondary text-center",
+			className: "sm:hidden px-4 py-2 bg-surface-sunken border-t border-border-default text-xs text-text-secondary text-center",
 			children: tr("fluidgrids.executions.executionTable.swipeHint", "Swipe to see more columns")
 		})]
 	});
@@ -1561,17 +1561,17 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 	if (loading) return /* @__PURE__ */ jsx("div", {
 		className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
 		children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", {
-			className: "rounded-lg border border-border-secondary bg-background-secondary p-4 animate-pulse",
+			className: "rounded-lg border border-border-default bg-surface p-4 animate-pulse",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between mb-3",
-					children: [/* @__PURE__ */ jsx("div", { className: "h-4 bg-background-tertiary rounded w-32" }), /* @__PURE__ */ jsx("div", { className: "h-5 bg-background-tertiary rounded-full w-20" })]
+					children: [/* @__PURE__ */ jsx("div", { className: "h-4 bg-surface-sunken rounded w-32" }), /* @__PURE__ */ jsx("div", { className: "h-5 bg-surface-sunken rounded-full w-20" })]
 				}),
-				/* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-48 mb-2" }),
-				/* @__PURE__ */ jsx("div", { className: "h-2 bg-background-tertiary rounded w-full mb-3" }),
+				/* @__PURE__ */ jsx("div", { className: "h-3 bg-surface-sunken rounded w-48 mb-2" }),
+				/* @__PURE__ */ jsx("div", { className: "h-2 bg-surface-sunken rounded w-full mb-3" }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between",
-					children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-16" }), /* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-24" })]
+					children: [/* @__PURE__ */ jsx("div", { className: "h-3 bg-surface-sunken rounded w-16" }), /* @__PURE__ */ jsx("div", { className: "h-3 bg-surface-sunken rounded w-24" })]
 				})
 			]
 		}, i))
@@ -1601,8 +1601,8 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 			return /* @__PURE__ */ jsxs("div", {
 				onClick: () => onCardClick(execution),
 				className: `
-              rounded-lg border bg-background-secondary p-4 cursor-pointer
-              transition-all duration-200 hover:shadow-md hover:border-border-primary
+              rounded-lg border bg-surface p-4 cursor-pointer
+              transition-all duration-200 hover:shadow-md hover:border-border-strong
               ${config.borderColor}
             `,
 				children: [
@@ -1614,7 +1614,7 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 								className: "text-sm font-semibold text-text-primary truncate",
 								children: execution.workflow?.name || workflowNames?.[execution.workflowKey] || execution.workflowKey
 							}), /* @__PURE__ */ jsx("p", {
-								className: "text-xs text-text-tertiary mt-0.5",
+								className: "text-xs text-text-muted mt-0.5",
 								children: formatRunVersion(execution.version)
 							})]
 						}), /* @__PURE__ */ jsx(ExecutionStatusBadge, {
@@ -1625,10 +1625,10 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 					/* @__PURE__ */ jsxs("div", {
 						className: "mb-3",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex justify-between text-xs text-text-tertiary mb-1",
+							className: "flex justify-between text-xs text-text-muted mb-1",
 							children: [/* @__PURE__ */ jsx("span", { children: tr("fluidgrids.executions.executionCards.progressLabel", "Progress") }), /* @__PURE__ */ jsxs("span", { children: [Math.round(execution.progress), "%"] })]
 						}), /* @__PURE__ */ jsx("div", {
-							className: "h-1.5 bg-background-tertiary rounded-full overflow-hidden",
+							className: "h-1.5 bg-surface-sunken rounded-full overflow-hidden",
 							children: /* @__PURE__ */ jsx("div", {
 								className: `h-full rounded-full transition-all duration-500 ${getProgressColor(execution.status)}`,
 								style: { width: `${Math.min(execution.progress, 100)}%` }
@@ -1672,7 +1672,7 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 						]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between text-xs text-text-tertiary pt-2 border-t border-border-secondary",
+						className: "flex items-center justify-between text-xs text-text-muted pt-2 border-t border-border-default",
 						children: [/* @__PURE__ */ jsxs("span", {
 							className: "flex items-center gap-1",
 							children: [/* @__PURE__ */ jsx(Icon, {
@@ -1687,7 +1687,7 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 							const actions = runQuickActions(execution.status, { resumeOffered });
 							if (actions.length === 0) return null;
 							return /* @__PURE__ */ jsx("div", {
-								className: "flex gap-1 mt-2 pt-2 border-t border-border-secondary",
+								className: "flex gap-1 mt-2 pt-2 border-t border-border-default",
 								children: actions.map((action) => {
 									const { icon, label, hover } = CARD_ACTIONS(tr)[action];
 									return /* @__PURE__ */ jsxs("button", {
@@ -1697,7 +1697,7 @@ function ExecutionCards({ executions, workflowNames, loading, onCardClick, onAct
 											e.stopPropagation();
 											onAction(action, execution);
 										},
-										className: `flex items-center gap-1 text-xs px-2 py-1 rounded bg-background-tertiary text-text-secondary transition-colors ${hover}`,
+										className: `flex items-center gap-1 text-xs px-2 py-1 rounded bg-surface-sunken text-text-secondary transition-colors ${hover}`,
 										children: [
 											/* @__PURE__ */ jsx(Icon, {
 												icon,
@@ -1766,12 +1766,12 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 		className: "space-y-6 pl-8",
 		children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-4 animate-pulse",
-			children: [/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-background-tertiary mt-1.5 shrink-0" }), /* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-surface-sunken mt-1.5 shrink-0" }), /* @__PURE__ */ jsxs("div", {
 				className: "flex-1",
 				children: [
-					/* @__PURE__ */ jsx("div", { className: "h-4 bg-background-tertiary rounded w-48 mb-2" }),
-					/* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-32 mb-1" }),
-					/* @__PURE__ */ jsx("div", { className: "h-3 bg-background-tertiary rounded w-24" })
+					/* @__PURE__ */ jsx("div", { className: "h-4 bg-surface-sunken rounded w-48 mb-2" }),
+					/* @__PURE__ */ jsx("div", { className: "h-3 bg-surface-sunken rounded w-32 mb-1" }),
+					/* @__PURE__ */ jsx("div", { className: "h-3 bg-surface-sunken rounded w-24" })
 				]
 			})]
 		}, i))
@@ -1803,15 +1803,15 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 				/* @__PURE__ */ jsx(Icon, {
 					icon: "mdi:calendar",
 					width: 14,
-					className: "text-text-tertiary"
+					className: "text-text-muted"
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-xs font-semibold text-text-tertiary uppercase tracking-wider",
+					className: "text-xs font-semibold text-text-muted uppercase tracking-wider",
 					children: dateLabel
 				}),
-				/* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border-secondary" }),
+				/* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-border-default" }),
 				/* @__PURE__ */ jsxs("span", {
-					className: "text-xs text-text-tertiary",
+					className: "text-xs text-text-muted",
 					children: [
 						dateExecutions.length,
 						" ",
@@ -1821,7 +1821,7 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "relative ml-4",
-			children: [/* @__PURE__ */ jsx("div", { className: "absolute left-[5px] top-0 bottom-0 w-px bg-border-secondary" }), /* @__PURE__ */ jsx("div", {
+			children: [/* @__PURE__ */ jsx("div", { className: "absolute left-[5px] top-0 bottom-0 w-px bg-border-default" }), /* @__PURE__ */ jsx("div", {
 				className: "space-y-4",
 				children: dateExecutions.map((execution, idx) => {
 					const isLast = idx === dateExecutions.length - 1;
@@ -1831,11 +1831,11 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 						className: "relative flex gap-4 cursor-pointer group",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "relative z-10 shrink-0 mt-1.5",
-							children: /* @__PURE__ */ jsx("div", { className: `w-[11px] h-[11px] rounded-full border-2 border-background-primary ${getStatusDotColor(execution.status)}` })
+							children: /* @__PURE__ */ jsx("div", { className: `w-[11px] h-[11px] rounded-full border-2 border-surface-canvas ${getStatusDotColor(execution.status)}` })
 						}), /* @__PURE__ */ jsxs("div", {
 							className: `
-                        flex-1 rounded-lg border border-border-secondary bg-background-secondary p-3
-                        transition-all duration-200 group-hover:shadow-sm group-hover:border-border-primary
+                        flex-1 rounded-lg border border-border-default bg-surface p-3
+                        transition-all duration-200 group-hover:shadow-sm group-hover:border-border-strong
                         ${isLast ? "" : "mb-0"}
                       `,
 							children: [/* @__PURE__ */ jsxs("div", {
@@ -1849,7 +1849,7 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 												className: "text-sm font-semibold text-text-primary truncate",
 												children: execution.workflow?.name || workflowNames?.[execution.workflowKey] || execution.workflowKey
 											}), /* @__PURE__ */ jsx("span", {
-												className: "text-xs text-text-tertiary",
+												className: "text-xs text-text-muted",
 												children: formatRunVersion(execution.version)
 											})]
 										}),
@@ -1902,7 +1902,7 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 											e.stopPropagation();
 											onAction("cancel", execution);
 										},
-										className: "p-1 rounded opacity-60 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-status-error-bg-subtle text-text-tertiary hover:text-status-error-text transition-all",
+										className: "p-1 rounded opacity-60 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-status-error-bg-subtle text-text-muted hover:text-status-error-text transition-all",
 										title: tr("fluidgrids.executions.executionTimeline.cancelTooltip", "Cancel execution"),
 										"aria-label": tr("fluidgrids.executions.executionTimeline.cancelTooltip", "Cancel execution"),
 										children: /* @__PURE__ */ jsx(Icon, {
@@ -1914,7 +1914,7 @@ function ExecutionTimeline({ executions, workflowNames, loading, onItemClick, on
 							}), execution.status === "RUNNING" && /* @__PURE__ */ jsx("div", {
 								className: "mt-2",
 								children: /* @__PURE__ */ jsx("div", {
-									className: "h-1 bg-background-tertiary rounded-full overflow-hidden",
+									className: "h-1 bg-surface-sunken rounded-full overflow-hidden",
 									children: /* @__PURE__ */ jsx("div", {
 										className: "h-full bg-status-info-bg rounded-full transition-all duration-500 animate-pulse",
 										style: { width: `${Math.min(execution.progress, 100)}%` }
@@ -2012,7 +2012,7 @@ function Pagination({ totalItems, showPageSize = true }) {
 					/* @__PURE__ */ jsx("button", {
 						onClick: () => goToPage(page - 1),
 						disabled: page === 1,
-						className: "p-2 rounded hover:bg-background-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
+						className: "p-2 rounded hover:bg-surface-sunken disabled:opacity-50 disabled:cursor-not-allowed",
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "mdi:chevron-left",
 							width: 20,
@@ -2028,7 +2028,7 @@ function Pagination({ totalItems, showPageSize = true }) {
 							onClick: () => goToPage(pageNum),
 							className: `
                       min-w-[32px] h-8 px-2 rounded text-sm font-medium
-                      ${pageNum === page ? "bg-action-primary-bg text-action-primary-text" : "hover:bg-background-tertiary text-text-secondary"}
+                      ${pageNum === page ? "bg-action-primary-bg text-action-primary-text" : "hover:bg-surface-sunken text-text-secondary"}
                     `,
 							children: pageNum
 						}, pageNum))
@@ -2044,7 +2044,7 @@ function Pagination({ totalItems, showPageSize = true }) {
 					/* @__PURE__ */ jsx("button", {
 						onClick: () => goToPage(page + 1),
 						disabled: page === totalPages,
-						className: "p-2 rounded hover:bg-background-tertiary disabled:opacity-50 disabled:cursor-not-allowed",
+						className: "p-2 rounded hover:bg-surface-sunken disabled:opacity-50 disabled:cursor-not-allowed",
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "mdi:chevron-right",
 							width: 20,
@@ -2188,7 +2188,7 @@ function RunsPlainTable({ executions, workflowNames, loading, canExecute = true,
 	if (loading && executions.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "space-y-2",
 		"aria-busy": "true",
-		children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-12 rounded-lg bg-background-tertiary animate-pulse" }, i))
+		children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-12 rounded-lg bg-surface-sunken animate-pulse" }, i))
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "runs-plain-table",
@@ -2366,7 +2366,7 @@ function SearchAttributeFilterBar({ applied, onApply, conflicts }) {
 		}));
 	};
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-4 space-y-3 rounded-lg border border-border-secondary bg-background-secondary p-3",
+		className: "mb-4 space-y-3 rounded-lg border border-border-default bg-surface p-3",
 		"data-testid": "search-attribute-filter",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -2809,7 +2809,7 @@ function BatchOperationDialog({ type, input, selection, onClose, onStarted }) {
 							})]
 						}),
 						dryRun && /* @__PURE__ */ jsx("p", {
-							className: "rounded-md bg-background-primary p-2 text-sm text-text-primary",
+							className: "rounded-md bg-surface-canvas p-2 text-sm text-text-primary",
 							"data-testid": "batch-dry-run-result",
 							children: tr("fluidgrids.runControl.batch.dryRunResult", "The job would select {{count}} runs.", { count: dryRun.total })
 						}),
@@ -2920,7 +2920,7 @@ function BatchProgressDrawer({ job: initial, open, onOpenChange, canCancel }) {
 						/* @__PURE__ */ jsx(FieldError, { message: jobs.error }),
 						(jobs.data?.items ?? []).map((item) => /* @__PURE__ */ jsxs("button", {
 							type: "button",
-							className: "w-full rounded-md border border-border-secondary p-2 text-left hover:bg-background-tertiary",
+							className: "w-full rounded-md border border-border-default p-2 text-left hover:bg-surface-sunken",
 							onClick: () => setJob(item),
 							"data-testid": `batch-job-${item.id}`,
 							children: [/* @__PURE__ */ jsxs("div", {
@@ -2979,7 +2979,7 @@ function BatchJobProgress({ job, onCancel }) {
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "h-2 overflow-hidden rounded-full bg-background-tertiary",
+				className: "h-2 overflow-hidden rounded-full bg-surface-sunken",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "h-full bg-[var(--color-status-info-bg)]",
 					style: { width: `${progress.percent}%` }
@@ -3109,14 +3109,14 @@ function RunsParityBar({ workflowId, onWorkflowIdChange, total, counts, countsEr
 			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [total !== null && /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => onSelectStatus("all"),
-				className: cn("rounded-full border px-2.5 py-1 text-xs", selectedStatus === "all" ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-secondary text-text-secondary hover:text-text-primary"),
+				className: cn("rounded-full border px-2.5 py-1 text-xs", selectedStatus === "all" ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-default text-text-secondary hover:text-text-primary"),
 				"aria-pressed": selectedStatus === "all",
 				"data-testid": "runs-count-all",
 				children: tr("fluidgrids.executions.parity.countAll", "All {{count}}", { count: total })
 			}), counts.map(({ status, count }) => isRunStatus(status) ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: () => onSelectStatus(status),
-				className: cn("rounded-full border px-2.5 py-1 text-xs", selectedStatus === status ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-secondary text-text-secondary hover:text-text-primary"),
+				className: cn("rounded-full border px-2.5 py-1 text-xs", selectedStatus === status ? "border-action-primary-bg bg-action-primary-bg text-action-primary-text" : "border-border-default text-text-secondary hover:text-text-primary"),
 				"aria-pressed": selectedStatus === status,
 				"data-testid": `runs-count-${status}`,
 				children: tr("fluidgrids.executions.parity.countStatus", "{{status}} {{count}}", {
@@ -3372,7 +3372,7 @@ function ExecutionsListPage() {
 		}, { replace: true });
 	};
 	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",
@@ -3398,13 +3398,13 @@ function ExecutionsListPage() {
 						label: tr("fluidgrids.executions.executionsList.moreOptions", "More options"),
 						"data-testid": "runs-view-menu"
 					}) : /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center bg-background-secondary rounded-lg border border-border-secondary p-1",
+						className: "flex items-center bg-surface rounded-lg border border-border-default p-1",
 						children: [
 							/* @__PURE__ */ jsx("button", {
 								onClick: () => setViewMode("table"),
 								"aria-pressed": viewMode === "table",
 								"aria-label": tr("fluidgrids.executions.executionsList.tableViewTooltip", "Table View"),
-								className: `p-2 rounded ${viewMode === "table" ? "bg-background-tertiary text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								className: `p-2 rounded ${viewMode === "table" ? "bg-surface-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
 								title: tr("fluidgrids.executions.executionsList.tableViewTooltip", "Table View"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "mdi:table",
@@ -3415,7 +3415,7 @@ function ExecutionsListPage() {
 								onClick: () => setViewMode("cards"),
 								"aria-pressed": viewMode === "cards",
 								"aria-label": tr("fluidgrids.executions.executionsList.cardViewTooltip", "Card View"),
-								className: `p-2 rounded ${viewMode === "cards" ? "bg-background-tertiary text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								className: `p-2 rounded ${viewMode === "cards" ? "bg-surface-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
 								title: tr("fluidgrids.executions.executionsList.cardViewTooltip", "Card View"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "mdi:view-grid",
@@ -3426,7 +3426,7 @@ function ExecutionsListPage() {
 								onClick: () => setViewMode("timeline"),
 								"aria-pressed": viewMode === "timeline",
 								"aria-label": tr("fluidgrids.executions.executionsList.timelineViewTooltip", "Timeline View"),
-								className: `p-2 rounded ${viewMode === "timeline" ? "bg-background-tertiary text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
+								className: `p-2 rounded ${viewMode === "timeline" ? "bg-surface-sunken text-text-primary" : "text-text-secondary hover:text-text-primary"}`,
 								title: tr("fluidgrids.executions.executionsList.timelineViewTooltip", "Timeline View"),
 								children: /* @__PURE__ */ jsx(Icon, {
 									icon: "mdi:timeline",

package/dist/{FailureTriagePanel-CM-vmvbA.js → FailureTriagePanel-DA91XKVj.js}

@@ -1096,7 +1096,7 @@ function ClusterRow({ cluster, canRetry, onOpenRun, onRetry, onDismiss }) {
 		icon: "mdi:alert-outline"
 	};
 	return /* @__PURE__ */ jsx("li", {
-		className: "rounded-lg border border-border-secondary bg-background-primary p-3",
+		className: "rounded-lg border border-border-default bg-surface-canvas p-3",
 		"data-testid": "failure-cluster",
 		"data-bucket": String(cluster.bucket),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -1108,7 +1108,7 @@ function ClusterRow({ cluster, canRetry, onOpenRun, onRetry, onDismiss }) {
 						className: "flex flex-wrap items-center gap-2 text-sm",
 						children: [
 							/* @__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: [/* @__PURE__ */ jsx(Icon, {
 									icon: bucket.icon,
 									width: 14
@@ -1173,7 +1173,7 @@ function FailureTriagePanel({ canManage, canRetry, onOpenRun, onRetry }) {
 	const triage = useFailureTriage();
 	const enabled = triage.settings?.enabled ?? false;
 	return /* @__PURE__ */ jsxs("section", {
-		className: "mb-6 rounded-xl border border-border-secondary bg-background-secondary p-4",
+		className: "mb-6 rounded-xl border border-border-default bg-surface p-4",
 		"data-testid": "failure-triage-panel",
 		children: [
 			/* @__PURE__ */ jsxs("div", {