@tea-agent/loop-agent 0.32.0 → 0.33.0

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

@@ -456,42 +456,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;
@@ -1471,12 +1494,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 +1914,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 +1925,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 +1957,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;
 }
@@ -3154,3 +3191,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;
+}