@tea-agent/loop-agent 0.32.1 → 0.33.1

package/dist/worker/observe/static/styles.css

@@ -76,59 +76,6 @@ body {
 	line-height: 1.5;
 }
 
-.embedded-operator-nav {
-	display: none;
-}
-
-body[data-embedded-shell="true"] .site-header .logo {
-	display: none;
-}
-
-body[data-embedded-shell="true"] .site-header {
-	position: sticky;
-	top: 49px;
-	z-index: 30;
-	grid-template-columns: 1fr auto;
-	grid-template-areas: "nav status" "crumb crumb";
-	min-height: 56px;
-	margin-bottom: var(--space-5);
-	padding: 10px 0;
-}
-
-body[data-embedded-shell="true"] .embedded-operator-nav {
-	position: sticky;
-	top: 0;
-	z-index: 40;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	padding: 8px max(24px, calc((100vw - 1680px) / 2));
-	border-bottom: 1px solid var(--hairline);
-	background: color-mix(in srgb, var(--canvas) 92%, transparent);
-	backdrop-filter: blur(10px);
-	font-size: 13px;
-	font-weight: 700;
-}
-
-.embedded-operator-nav a,
-.embedded-operator-nav span {
-	padding: 6px 12px;
-	border-radius: var(--radius-pill);
-	text-decoration: none;
-}
-
-.embedded-operator-nav a:hover,
-.embedded-operator-nav a:focus-visible {
-	background: var(--surface);
-	color: var(--orange-active);
-	outline: none;
-}
-
-.embedded-operator-nav span {
-	background: var(--ink);
-	color: #fff;
-}
-
 button,
 input,
 select,
@@ -149,7 +96,6 @@ pre,
 .dag-node-table td:nth-child(2),
 td:first-child,
 .meta-item dd,
-.header-refresh,
 .kpi-value,
 .risk-total,
 .process-timeline-time {
@@ -176,140 +122,13 @@ td:first-child,
 #app {
 	width: min(100% - 48px, 1680px);
 	margin: 0 auto;
-	padding-bottom: 56px;
-}
-
-.site-header {
-	position: sticky;
-	top: 0;
-	z-index: 30;
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	grid-template-areas: "brand nav status" "crumb crumb crumb";
-	column-gap: var(--space-5);
-	align-items: center;
-	min-height: 72px;
-	margin-bottom: var(--space-6);
-	padding: 14px 0 12px;
-	background: color-mix(in srgb, var(--canvas) 82%, transparent);
-	border-bottom: 1px solid var(--hairline);
-	backdrop-filter: blur(12px);
-}
-
-.logo {
-	grid-area: brand;
-	display: inline-flex;
-	align-items: center;
-	gap: 10px;
-	color: var(--ink);
-	font-size: 15px;
-	font-weight: 650;
-	letter-spacing: -0.01em;
-	text-decoration: none;
-}
-
-.logo > i {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	border-radius: var(--radius-md);
-	background: var(--orange-soft);
-	color: var(--orange-active);
-	font-size: 18px;
-	font-weight: 400;
-}
-
-.logo:hover {
-	color: var(--orange-active);
-}
-
-.top-nav {
-	grid-area: nav;
-	display: inline-flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 4px;
-	justify-self: start;
-	padding: 5px;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-pill);
-	background: color-mix(in srgb, var(--surface) 88%, transparent);
-	box-shadow: var(--shadow-panel);
-}
-
-.nav-link {
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	min-height: 34px;
-	padding: 0 14px;
-	border: 1px solid transparent;
-	border-radius: var(--radius-pill);
-	color: var(--body);
-	font-size: 13px;
-	font-weight: 600;
-	text-decoration: none;
-	transition:
-		border-color var(--transition-fast),
-		background-color var(--transition-fast),
-		color var(--transition-fast),
-		box-shadow var(--transition-fast);
-}
-
-.nav-link > i {
-	font-size: 15px;
-	font-weight: 400;
-}
-
-.nav-link:hover,
-.nav-link:focus-visible {
-	border-color: transparent;
-	background: var(--surface);
-	color: var(--ink);
-	outline: none;
-}
-
-.nav-link-active {
-	border-color: transparent;
-	background: var(--ink);
-	color: #fff;
-	box-shadow: none;
-}
-
-.nav-link-active:hover,
-.nav-link-active:focus-visible {
-	background: var(--ink);
-	color: #fff;
-}
-
-.header-meta {
-	grid-area: status;
-	display: inline-flex;
-	justify-self: end;
-	align-items: center;
-	gap: 8px;
-	min-height: 34px;
-	padding: 0 12px;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-pill);
-	background: var(--surface);
-	color: var(--muted);
-	font-size: 12px;
-	font-variant-numeric: tabular-nums;
-	box-shadow: var(--shadow-panel);
-}
-
-.header-meta > i {
-	color: color-mix(in srgb, var(--green) 70%, white);
-	font-size: 14px;
+	padding: var(--space-5) 0 56px;
 }
 
 .breadcrumb {
-	grid-area: crumb;
 	display: flex;
 	min-height: 16px;
+	margin-bottom: var(--space-4);
 	gap: 7px;
 	color: var(--muted);
 	font-size: 12px;
@@ -344,6 +163,65 @@ td:first-child,
 	gap: var(--space-4);
 }
 
+/* 「昨夜班次」条带：夜间结果在观测总览的唯一一级呈现（管理动作在操作侧） */
+.night-strip {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 13px 18px;
+	margin-bottom: var(--space-4);
+	border-left: 3px solid var(--lavender);
+	background: linear-gradient(
+		90deg,
+		color-mix(in srgb, var(--lavender) 22%, var(--surface)),
+		var(--surface) 55%
+	);
+}
+.night-strip[hidden] {
+	display: none;
+}
+.night-strip-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: 0 0 auto;
+	width: 34px;
+	height: 34px;
+	border-radius: 10px;
+	background: color-mix(in srgb, var(--lavender) 55%, var(--surface));
+	color: #6a4a9e;
+	font-size: 16px;
+}
+.night-strip-main {
+	min-width: 0;
+}
+.night-strip-title {
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--ink);
+}
+.night-strip-sub {
+	margin-top: 1px;
+	font-size: 12px;
+	color: var(--body);
+	font-variant-numeric: tabular-nums;
+}
+.night-strip-actions {
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+}
+.night-strip-manage {
+	border-color: color-mix(in srgb, var(--orange) 35%, var(--hairline));
+	color: var(--orange-active);
+}
+.night-strip-manage:hover {
+	border-color: var(--orange);
+	background: var(--orange-soft);
+}
+
 .view-heading {
 	display: grid;
 	gap: 4px;
@@ -456,42 +334,65 @@ td:first-child,
 .view-pool .page-header-heading {
 	margin-bottom: 0;
 }
-.pool-toolbar {
-	display: grid;
-	justify-items: end;
-	gap: 8px;
-	padding-top: 2px;
-}
-.pool-toolbar-actions {
+.page-header-actions {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-end;
 	gap: 10px 12px;
+	padding-top: 2px;
 }
-.pool-toolbar .pool-updated-at {
-	margin: 0;
-	max-width: 28ch;
-	font-size: 11px;
-	line-height: 1.4;
-	text-align: right;
-}
+.page-action-btn,
 .pool-refresh-btn {
 	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 34px;
+	padding: 8px 14px;
 	border: 1px solid var(--hairline);
 	border-radius: var(--radius-pill);
 	background: var(--surface);
 	color: var(--ink);
 	font-size: 13px;
 	font-weight: 700;
-	padding: 8px 14px;
+	line-height: 1.2;
+	text-decoration: none;
 	cursor: pointer;
 	box-shadow: var(--shadow-panel);
+	transition:
+		background-color var(--transition-fast),
+		border-color var(--transition-fast),
+		color var(--transition-fast);
 }
-.pool-refresh-btn:hover {
+.page-action-btn:hover,
+.page-action-btn:focus-visible,
+.pool-refresh-btn:hover,
+.pool-refresh-btn:focus-visible {
 	border-color: var(--orange);
 	color: var(--orange-active);
 	background: var(--orange-soft);
+	outline: none;
+}
+.pool-toolbar {
+	display: grid;
+	justify-items: end;
+	gap: 8px;
+	padding-top: 2px;
+}
+.pool-toolbar-actions {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 10px 12px;
+}
+.pool-toolbar .pool-updated-at {
+	margin: 0;
+	max-width: 28ch;
+	font-size: 11px;
+	line-height: 1.4;
+	text-align: right;
 }
 .pool-auto-refresh-label {
 	display: inline-flex;
@@ -615,75 +516,6 @@ td:first-child,
 	gap: var(--space-3);
 }
 
-.repo-banner {
-	display: flex;
-	align-items: flex-start;
-	gap: 10px;
-	padding: 6px 12px;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-md);
-	background: transparent;
-}
-.repo-banner-inline {
-	justify-self: end;
-	align-items: center;
-	max-width: min(48ch, 100%);
-	padding: 4px 10px 4px 8px;
-	border: 1px solid var(--hairline);
-	border-radius: 999px;
-	background: var(--canvas-soft);
-}
-.repo-banner-icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: 0 0 auto;
-	width: 28px;
-	height: 28px;
-	border-radius: 8px;
-	background: var(--surface);
-	border: 1px solid var(--hairline);
-	color: var(--orange-active);
-}
-.repo-banner-icon > i {
-	font-size: 15px;
-	line-height: 1;
-}
-.repo-banner-inline .repo-banner-text {
-	display: grid;
-	justify-items: start;
-	gap: 1px;
-	min-width: 0;
-}
-.repo-banner-text {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
-	gap: 6px 10px;
-	min-width: 0;
-}
-.repo-banner-name {
-	color: var(--ink);
-	font-size: 13px;
-	font-weight: 700;
-	letter-spacing: 0.01em;
-	line-height: 1.25;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.repo-banner-path {
-	color: var(--muted);
-	font-size: 11px;
-	line-height: 1.35;
-	font-variant-numeric: tabular-nums;
-	letter-spacing: 0.01em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	max-width: 36ch;
-}
-
 .panel-kpi {
 	display: grid;
 	grid-template-columns: var(--dashboard-cols);
@@ -1292,7 +1124,7 @@ tr.clickable:focus-within {
 .dag-inspector {
 	position: fixed;
 	z-index: 40;
-	/* Align with site-header top edge; same inset as right/bottom. */
+	/* Align near the unified chrome bottom edge; same inset as right/bottom. */
 	top: 24px;
 	right: 24px;
 	bottom: 24px;
@@ -1471,12 +1303,11 @@ body.is-resizing-dag-graph {
 	color: var(--muted);
 }
 .dag-inspector-attempt-select {
-	font-size: 12px;
-	padding: 2px 6px;
-	border: 1px solid var(--hairline);
-	border-radius: 6px;
-	background: var(--surface);
-	color: var(--ink);
+	/* Shared custom-select surface; keep class for integration hooks. */
+	min-width: 9.5rem;
+}
+.dag-inspector-attempt-bar .custom-select-menu {
+	z-index: 5;
 }
 .dag-inspector-attempt-preview {
 	display: flex;
@@ -1892,9 +1723,10 @@ body.is-resizing-dag-graph {
 .dag-node-table {
 	table-layout: fixed;
 }
+/* 9 columns sum to 100%: 4/17/6/8/14/9/8/14/20 */
 .dag-node-table th:nth-child(1),
 .dag-node-table td:nth-child(1) {
-	width: 5%;
+	width: 4%;
 }
 .dag-node-table th:nth-child(2),
 .dag-node-table td:nth-child(2) {
@@ -1902,27 +1734,31 @@ body.is-resizing-dag-graph {
 }
 .dag-node-table th:nth-child(3),
 .dag-node-table td:nth-child(3) {
-	width: 7%;
+	width: 6%;
 }
 .dag-node-table th:nth-child(4),
 .dag-node-table td:nth-child(4) {
-	width: 11%;
+	width: 8%;
 }
 .dag-node-table th:nth-child(5),
 .dag-node-table td:nth-child(5) {
-	width: 15%;
+	width: 14%;
 }
 .dag-node-table th:nth-child(6),
 .dag-node-table td:nth-child(6) {
-	width: 11%;
+	width: 9%;
 }
 .dag-node-table th:nth-child(7),
 .dag-node-table td:nth-child(7) {
-	width: 9%;
+	width: 8%;
 }
 .dag-node-table th:nth-child(8),
 .dag-node-table td:nth-child(8) {
-	width: 25%;
+	width: 14%;
+}
+.dag-node-table th:nth-child(9),
+.dag-node-table td:nth-child(9) {
+	width: 20%;
 }
 .dag-node-table th:first-child,
 .dag-node-table td:first-child {
@@ -1930,9 +1766,19 @@ body.is-resizing-dag-graph {
 }
 .dag-node-table td:nth-child(2),
 .dag-node-table td:nth-child(5),
-.dag-node-table td:nth-child(8) {
+.dag-node-table td:nth-child(8),
+.dag-node-table td:nth-child(9) {
 	overflow-wrap: anywhere;
 }
+.dag-node-error-summary {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+	overflow: hidden;
+	color: var(--red);
+	word-break: break-word;
+}
 .dag-active-node {
 	background: #fff8f3;
 }
@@ -2808,11 +2654,6 @@ body.is-resizing-dag-graph {
 	#app {
 		width: min(100% - 32px, 1680px);
 	}
-	.site-header {
-		grid-template-columns: auto 1fr auto;
-		grid-template-areas: "brand nav status" "crumb crumb crumb";
-		row-gap: 8px;
-	}
 	.run-detail-workspace {
 		grid-template-columns: 1fr;
 	}
@@ -2827,14 +2668,6 @@ body.is-resizing-dag-graph {
 	.dashboard-page-header {
 		grid-template-columns: 1fr;
 	}
-	.repo-banner-inline {
-		justify-self: start;
-		max-width: none;
-	}
-	.repo-banner-path {
-		max-width: none;
-		white-space: normal;
-	}
 	.pool-toolbar {
 		justify-items: start;
 	}
@@ -2851,9 +2684,6 @@ body.is-resizing-dag-graph {
 	#app {
 		width: min(100% - 24px, 1680px);
 	}
-	.site-header {
-		margin-bottom: var(--space-6);
-	}
 	.kpi-grid {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
@@ -3154,3 +2984,554 @@ button.copy-command:focus-visible {
 		transition-duration: 0.01ms !important;
 	}
 }
+
+/* Formal DAG run history page (#/dags) */
+.section-heading-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3, 0.75rem);
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.section-heading-row .section-heading {
+	margin: 0;
+}
+.section-heading-action {
+	flex-shrink: 0;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--orange-active, #c45c26);
+	text-decoration: none;
+}
+.section-heading-action:hover,
+.section-heading-action:focus-visible {
+	text-decoration: underline;
+}
+.view-dags .dags-table-wrap,
+.dags-table-wrap.table-scroll {
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.dags-history-table {
+	width: 100%;
+	min-width: 720px;
+	border-collapse: collapse;
+}
+.dags-run-id-wrap {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	max-width: 100%;
+}
+.dags-run-id {
+	font-size: 12px;
+	overflow-wrap: anywhere;
+	word-break: break-all;
+}
+.dags-copy-btn,
+.dags-copy-btn-icon {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	border: 1px solid var(--hairline, #e2dcd4);
+	border-radius: var(--radius-md, 6px);
+	background: var(--surface, #fff);
+	color: var(--ink, #1c1917);
+	cursor: pointer;
+	line-height: 1;
+}
+.dags-copy-btn:hover {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: var(--surface-muted, #f0efe9);
+}
+.dags-copy-btn:active {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: color-mix(in srgb, var(--surface-muted, #f0efe9) 80%, var(--hairline, #e6e5e0));
+}
+/* Mouse focus must not leave residual orange chrome; orange is :focus-visible only. */
+.dags-copy-btn:focus:not(:focus-visible) {
+	outline: none;
+	border-color: var(--hairline, #e2dcd4);
+}
+.dags-copy-btn:focus-visible {
+	border-color: var(--orange-active, #c45c26);
+	outline: 2px solid color-mix(in srgb, var(--orange) 55%, transparent);
+	outline-offset: 1px;
+}
+.dags-copy-btn .dags-copy-icon {
+	display: block;
+}
+.dags-copy-btn .dags-copy-icon-check {
+	display: none;
+}
+.dags-copy-btn.is-copied {
+	color: var(--green, #1f8a65);
+	border-color: var(--hairline, #e2dcd4);
+}
+.dags-copy-btn.is-copied:hover,
+.dags-copy-btn.is-copied:active {
+	border-color: var(--hairline-strong, #cfcdc4);
+}
+.dags-copy-btn.is-copied .dags-copy-icon-rects {
+	display: none;
+}
+.dags-copy-btn.is-copied .dags-copy-icon-check {
+	display: block;
+}
+/* Copy success must never paint row / cell / run-id container chrome. */
+.dags-history-row.is-copied,
+.dags-run-id-cell.is-copied,
+.dags-run-id-wrap.is-copied {
+	background: transparent;
+	border-color: inherit;
+	box-shadow: none;
+}
+.dags-copy-toast {
+	position: fixed;
+	right: 24px;
+	bottom: 24px;
+	z-index: 50;
+	max-width: min(360px, calc(100vw - 32px));
+	padding: 10px 14px;
+	border: 1px solid var(--hairline-strong, #cfcdc4);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #fff);
+	color: var(--ink, #1c1917);
+	box-shadow: var(--shadow-soft);
+	font-size: 13px;
+	pointer-events: none;
+}
+.dags-copy-toast[hidden] {
+	display: none !important;
+}
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+.dags-pagination {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+	align-items: center;
+	column-gap: 1rem;
+	row-gap: 0.75rem;
+	width: 100%;
+	min-width: 0;
+}
+.dags-pagination-summary {
+	min-width: 0;
+	justify-self: start;
+	text-align: left;
+}
+.dags-pagination-summary .dags-meta {
+	margin: 0;
+}
+.dags-pagination-pages {
+	display: inline-flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	justify-content: center;
+	gap: 2px;
+	justify-self: center;
+	flex: 0 0 auto;
+	max-width: 100%;
+	padding: 5px;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 14px;
+	background: var(--surface, #ffffff);
+	box-shadow:
+		0 1px 2px rgb(38 37 30 / 4%),
+		0 4px 12px rgb(38 37 30 / 3%);
+}
+.dags-pagination-tools {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	justify-self: end;
+	min-width: 0;
+}
+.dags-page-num,
+.dags-page-nav {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	min-width: 36px;
+	min-height: 36px;
+	padding: 0;
+	margin: 0;
+	border: 1px solid transparent;
+	border-radius: 10px;
+	background: transparent;
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	transition:
+		background var(--transition-fast, 160ms ease),
+		color var(--transition-fast, 160ms ease),
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-base, 220ms ease),
+		opacity var(--transition-fast, 160ms ease);
+}
+.dags-page-num i,
+.dags-page-nav i,
+.dags-refresh-btn i {
+	font-size: 18px;
+	line-height: 1;
+	pointer-events: none;
+}
+.dags-page-num:hover:not(:disabled),
+.dags-page-nav:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--orange-soft, #fff1ea) 70%, var(--surface-muted, #f0efe9));
+	color: var(--ink, #26251e);
+}
+.dags-page-num:active:not(:disabled),
+.dags-page-nav:active:not(:disabled) {
+	background: color-mix(in srgb, var(--orange, #f54e00) 14%, var(--surface-muted, #f0efe9));
+}
+.dags-page-num:focus-visible,
+.dags-page-nav:focus-visible,
+.dags-refresh-btn:focus-visible,
+.dags-page-size-label select:focus-visible,
+.dags-page-size-label .custom-select-trigger:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--orange, #f54e00) 55%, transparent);
+	outline-offset: 1px;
+}
+.dags-page-num.is-current,
+.dags-page-num.is-current:disabled,
+.dags-page-num.is-current:hover:disabled,
+.dags-page-num.is-current:active:disabled {
+	background: var(--orange, #f54e00);
+	border-color: var(--orange, #f54e00);
+	color: #fff;
+	opacity: 1;
+	box-shadow: 0 2px 8px color-mix(in srgb, var(--orange, #f54e00) 35%, transparent);
+	cursor: default;
+}
+.dags-page-nav:disabled,
+.dags-page-num:disabled:not(.is-current),
+.dags-refresh-btn:disabled,
+.dags-page-size-label select:disabled,
+.dags-page-size-label .custom-select.is-disabled .custom-select-trigger,
+.dags-page-size-label .custom-select-trigger:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.dags-page-ellipsis {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	min-width: 28px;
+	height: 36px;
+	color: var(--muted, #807d72);
+	user-select: none;
+	pointer-events: none;
+}
+.dags-page-size-label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 13px;
+	color: var(--body, #5a5852);
+}
+.dags-page-size-label select {
+	box-sizing: border-box;
+	height: 36px;
+	min-width: 4.5rem;
+	padding: 0 0.5rem;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+	transition:
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		background var(--transition-fast, 160ms ease);
+}
+.dags-page-size-label .custom-select {
+	min-width: 4.5rem;
+}
+.dags-page-size-label .custom-select-trigger {
+	box-sizing: border-box;
+	height: 36px;
+	min-width: 4.5rem;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 10px;
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+}
+.dags-refresh-btn {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	min-width: 36px;
+	min-height: 36px;
+	padding: 0;
+	margin: 0;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	transition:
+		background var(--transition-fast, 160ms ease),
+		border-color var(--transition-fast, 160ms ease),
+		color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		opacity var(--transition-fast, 160ms ease);
+}
+.dags-refresh-btn:hover:not(:disabled) {
+	border-color: var(--hairline-strong, #cfcdc4);
+	background: var(--surface-muted, #f0efe9);
+}
+.dags-refresh-btn:active:not(:disabled) {
+	background: color-mix(in srgb, var(--surface-muted, #f0efe9) 80%, var(--hairline, #e6e5e0));
+}
+.dags-pagination.is-busy {
+	opacity: 0.92;
+}
+.dags-degraded-banner:not([hidden]) {
+	border: 1px solid color-mix(in srgb, #c45c26 35%, var(--hairline, #e2dcd4));
+	background: color-mix(in srgb, #c45c26 8%, var(--surface, #fff));
+	color: var(--ink, #1c1917);
+	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+	margin-bottom: var(--space-3, 0.75rem);
+}
+.dags-history-row.clickable {
+	cursor: pointer;
+}
+@media (max-width: 720px) {
+	.dags-pagination {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.dags-pagination-summary {
+		flex: 1 1 auto;
+		justify-self: auto;
+	}
+	.dags-pagination-tools {
+		flex: 0 0 auto;
+		margin-left: auto;
+		justify-self: auto;
+	}
+	.dags-pagination-pages {
+		order: 3;
+		flex: 0 0 auto;
+		flex-wrap: nowrap;
+		width: max-content;
+		max-width: 100%;
+		margin-inline: auto;
+		justify-content: center;
+		justify-self: auto;
+		gap: 1px;
+		padding: 3px;
+	}
+	.dags-page-num,
+	.dags-page-nav {
+		width: 28px;
+		height: 28px;
+		min-width: 28px;
+		min-height: 28px;
+		border-radius: 8px;
+		font-size: 12px;
+	}
+	.dags-page-num i,
+	.dags-page-nav i {
+		font-size: 15px;
+	}
+	.dags-page-ellipsis {
+		width: 16px;
+		min-width: 16px;
+		height: 28px;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.dags-copy-btn,
+	.dags-page-num,
+	.dags-page-nav,
+	.dags-refresh-btn,
+	.dags-page-size-label select,
+	.dags-page-size-label .custom-select-trigger,
+	.dags-copy-toast,
+	.custom-select-trigger,
+	.custom-select-chevron,
+	.custom-select-menu {
+		transition: none !important;
+		transform: none !important;
+		animation: none !important;
+	}
+	.custom-select.is-open .custom-select-chevron {
+		transform: none !important;
+	}
+}
+
+/* Shared custom select (DAG history pageSize + inspector attempt). */
+.custom-select {
+	position: relative;
+	display: inline-flex;
+	vertical-align: middle;
+	min-width: 4.5rem;
+}
+.custom-select-trigger {
+	box-sizing: border-box;
+	display: inline-flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.35rem;
+	width: 100%;
+	height: 36px;
+	min-height: 36px;
+	padding: 0 0.55rem 0 0.65rem;
+	margin: 0;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 10px;
+	background: var(--surface, #ffffff);
+	color: var(--ink, #26251e);
+	font: inherit;
+	font-size: 13px;
+	line-height: 1;
+	cursor: pointer;
+	appearance: none;
+	-webkit-appearance: none;
+	box-shadow: 0 1px 2px color-mix(in srgb, var(--ink, #26251e) 4%, transparent);
+	transition:
+		border-color var(--transition-fast, 160ms ease),
+		box-shadow var(--transition-fast, 160ms ease),
+		background var(--transition-fast, 160ms ease);
+}
+.custom-select-trigger:hover:not(:disabled) {
+	background: var(--surface-muted, #f0efe9);
+	border-color: var(--hairline-strong, #cfcdc4);
+}
+.custom-select-trigger:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--orange, #f54e00) 55%, transparent);
+	outline-offset: 1px;
+}
+.custom-select-trigger:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+.custom-select-value {
+	flex: 1 1 auto;
+	min-width: 0;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.custom-select-chevron {
+	flex: 0 0 auto;
+	font-size: 16px;
+	line-height: 1;
+	color: var(--muted, #807d72);
+	transition: transform var(--transition-fast, 160ms ease);
+	pointer-events: none;
+}
+.custom-select.is-open .custom-select-chevron {
+	transform: rotate(180deg);
+}
+.custom-select-menu {
+	box-sizing: border-box;
+	position: absolute;
+	z-index: 40;
+	display: flex;
+	flex-direction: column;
+	min-width: 100%;
+	max-height: calc(6 * 38px + 8px);
+	padding: 4px;
+	overflow-x: hidden;
+	overflow-y: auto;
+	border: 1px solid var(--hairline, #e6e5e0);
+	border-radius: 12px;
+	background: color-mix(in srgb, var(--surface, #ffffff) 96%, transparent);
+	backdrop-filter: blur(8px);
+	box-shadow:
+		0 4px 16px color-mix(in srgb, var(--ink, #26251e) 10%, transparent),
+		0 1px 3px color-mix(in srgb, var(--ink, #26251e) 6%, transparent);
+}
+.custom-select-menu[hidden] {
+	display: none !important;
+}
+.custom-select-option {
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5rem;
+	min-height: 38px;
+	height: 38px;
+	padding: 0 0.65rem;
+	border-radius: 8px;
+	color: var(--ink, #26251e);
+	font-size: 13px;
+	line-height: 1.2;
+	cursor: pointer;
+	user-select: none;
+}
+.custom-select-option:hover,
+.custom-select-option.is-active {
+	background: var(--surface-muted, #f0efe9);
+}
+.custom-select-option.is-selected {
+	background: var(--orange-soft, #fff1ea);
+	color: var(--orange-active, #d04200);
+	font-weight: 600;
+}
+.custom-select-option.is-selected.is-active,
+.custom-select-option.is-selected:hover {
+	background: color-mix(in srgb, var(--orange-soft, #fff1ea) 70%, var(--surface-muted, #f0efe9));
+}
+.custom-select-option-label {
+	flex: 1 1 auto;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.custom-select-option-check {
+	flex: 0 0 auto;
+	font-size: 15px;
+	line-height: 1;
+	opacity: 0;
+	color: var(--orange-active, #d04200);
+}
+.custom-select-option.is-selected .custom-select-option-check {
+	opacity: 1;
+}