@tea-agent/loop-agent 0.7.4 → 0.8.0

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

@@ -1,613 +1,722 @@
-:root {
-  --bg: #0d1117;
-  --surface: #161b22;
-  --border: #30363d;
-  --text: #c9d1d9;
-  --muted: #8b949e;
-  --link: #58a6ff;
-  --green: #3fb950;
-  --red: #f85149;
-  --yellow: #d29922;
-  --blue: #58a6ff;
-  --gray-red: #8b3a3a;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  background: var(--bg);
-  color: var(--text);
-}
-
-#app {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 1rem 1.5rem 2rem;
-}
-
-.site-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem 1.5rem;
-  margin-bottom: 1.5rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.logo {
-  color: var(--text);
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.logo:hover {
-  color: var(--link);
-}
-
-.top-nav {
-  display: flex;
-  gap: 1rem;
-}
-
-.nav-link {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 12px;
-}
-
-.nav-link:hover {
-  color: var(--link);
-}
-
-.header-refresh {
-  margin-left: auto;
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.breadcrumb {
-  flex-basis: 100%;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.breadcrumb a {
-  color: var(--link);
-  text-decoration: none;
-}
-
-.breadcrumb a:hover {
-  text-decoration: underline;
-}
-
-h2 {
-  margin: 0 0 0.75rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
-h3,
-.section-heading {
-  margin: 0 0 0.5rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-}
-
-.panel {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
-  margin-bottom: 1rem;
-}
-
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 0.75rem;
-  padding: 0.75rem;
-}
-
-.kpi-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.6rem 0.75rem;
-  text-align: center;
-}
-
-.kpi-card.kpi-highlight {
-  border-color: var(--yellow);
-  background: rgba(210, 153, 34, 0.08);
-}
-
-.kpi-card.kpi-danger {
-  border-color: var(--red);
-}
-
-.kpi-label {
-  color: var(--muted);
-  font-size: 10px;
-  text-transform: uppercase;
-  margin-bottom: 0.25rem;
-}
-
-.kpi-value {
-  font-size: 1.4rem;
-  font-weight: 700;
-}
-
-.active-dag-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.active-dag-card {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
-}
-
-.active-dag-card-running {
-  border-color: var(--yellow);
-  box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.25);
-  animation: pulse-border 2s ease-in-out infinite;
-}
-
-@keyframes pulse-border {
-  0%,
-  100% {
-    border-color: var(--yellow);
-  }
-  50% {
-    border-color: rgba(210, 153, 34, 0.5);
-  }
-}
-
-.active-dag-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.35rem;
-}
-
-.active-dag-title {
-  font-weight: 600;
-  flex: 1;
-}
-
-.active-dag-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  color: var(--muted);
-  font-size: 12px;
-  margin-bottom: 0.5rem;
-}
-
-.active-dag-link {
-  color: var(--link);
-  text-decoration: none;
-  font-size: 12px;
-}
-
-.active-dag-link:hover {
-  text-decoration: underline;
-}
-
-.dashboard-footer {
-  margin-top: 0.75rem;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 0.5rem 1.5rem;
-}
-
-.meta-item dt {
-  color: var(--muted);
-  font-size: 11px;
-  text-transform: uppercase;
-  margin: 0;
-}
-
-.meta-item dd {
-  margin: 0.15rem 0 0;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th,
-td {
-  text-align: left;
-  padding: 0.4rem 0.6rem;
-  border-bottom: 1px solid var(--border);
-}
-
-th {
-  color: var(--muted);
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 600;
-}
-
-tbody tr:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-tbody tr.clickable {
-  cursor: pointer;
-}
-
-tbody tr.dag-node-selected {
-  background: rgba(88, 166, 255, 0.12);
-}
-
-.timeline-node-label {
-  color: var(--muted);
-  font-size: 12px;
-  margin: 0 0 0.5rem;
-}
-
-.process-timeline-scroll {
-  max-height: 320px;
-  overflow-y: auto;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-}
-
-.process-timeline {
-  list-style: none;
-  margin: 0;
-  padding: 0.25rem 0;
-}
-
-.process-timeline-item {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.35rem 0.75rem;
-  border-bottom: 1px solid var(--border);
-  font-size: 12px;
-}
-
-.process-timeline-item:last-child {
-  border-bottom: none;
-}
-
-.process-timeline-time {
-  flex: 0 0 4.5rem;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.process-timeline-label {
-  flex: 1;
-  word-break: break-word;
-}
-
-tbody tr.active-task {
-  background: rgba(210, 153, 34, 0.12);
-}
-
-.badge {
-  display: inline-block;
-  padding: 0.1rem 0.45rem;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.badge-succeeded,
-.badge-finished,
-.badge-completed,
-.badge-done {
-  background: rgba(63, 185, 80, 0.2);
-  color: var(--green);
-}
-
-.badge-failed,
-.badge-error {
-  background: rgba(248, 81, 73, 0.2);
-  color: var(--red);
-}
-
-.badge-partial-failed {
-  background: rgba(248, 81, 73, 0.15);
-  color: #ff9a8b;
-  border: 1px solid rgba(248, 81, 73, 0.35);
-}
-
-.badge-running,
-.badge-started {
-  background: rgba(210, 153, 34, 0.2);
-  color: var(--yellow);
-}
-
-.badge-skipped {
-  background: rgba(139, 148, 158, 0.15);
-  color: var(--muted);
-}
-
-.badge-stale {
-  background: rgba(139, 58, 58, 0.3);
-  color: #e06c75;
-}
-
-.badge-reused {
-  background: rgba(88, 166, 255, 0.2);
-  color: var(--blue);
-}
-
-.badge-pending,
-.badge-blocked,
-.badge-unknown,
-.badge-queued {
-  background: rgba(139, 148, 158, 0.15);
-  color: var(--muted);
-}
-
-.liveness-active {
-  background: rgba(63, 185, 80, 0.2);
-  color: var(--green);
-}
-
-.liveness-quiet {
-  background: rgba(210, 153, 34, 0.2);
-  color: var(--yellow);
-}
-
-.liveness-stale {
-  background: rgba(139, 58, 58, 0.3);
-  color: #e06c75;
-}
-
-.liveness-timeout-risk {
-  background: rgba(248, 81, 73, 0.25);
-  color: var(--red);
-}
-
-.rank-lanes {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.rank-lane {
-  border-left: 3px solid var(--border);
-  padding-left: 0.75rem;
-}
-
-.rank-lane-label {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 600;
-  margin-bottom: 0.35rem;
-}
-
-.rank-lane-nodes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.rank-node-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0.25rem 0.5rem;
-  font-size: 12px;
-}
-
-.rank-node-active {
-  border-color: var(--yellow);
-  background: rgba(210, 153, 34, 0.12);
-}
-
-.rank-node-error {
-  border-color: var(--red);
-  background: rgba(248, 81, 73, 0.1);
-}
-
-.rank-node-id {
-  font-weight: 600;
-}
-
-.rank-node-dur {
-  color: var(--muted);
-  font-size: 10px;
-}
-
-.step-timeline {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.step-timeline li {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.35rem 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.step-timeline li:last-child {
-  border-bottom: none;
-}
-
-.step-marker {
-  width: 1.5rem;
-  text-align: center;
-  font-weight: 700;
-}
-
-.step-marker.succeeded {
-  color: var(--green);
-}
-
-.step-marker.running {
-  color: var(--yellow);
-}
-
-.step-marker.pending {
-  color: var(--muted);
-}
-
-.step-marker.failed {
-  color: var(--red);
-}
-
-.step-name {
-  flex: 1;
-}
-
-.step-duration {
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.output-block {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0.5rem 0.75rem;
-  white-space: pre-wrap;
-  word-break: break-all;
-  max-height: 240px;
-  overflow-y: auto;
-  font-size: 12px;
-}
-
-.output-preview {
-  margin: 0.5rem 0;
-}
-
-.output-preview summary {
-  cursor: pointer;
-  color: var(--link);
-  font-size: 12px;
-  margin-bottom: 0.25rem;
-}
-
-.error-preview summary {
-  color: var(--red);
-}
-
-.artifact-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.artifact-list li {
-  padding: 0.25rem 0;
-}
-
-.artifact-list a {
-  color: var(--link);
-  text-decoration: none;
-}
-
-.artifact-list a:hover {
-  text-decoration: underline;
-}
-
-.empty {
-  color: var(--muted);
-  font-style: italic;
-}
-
-.link {
-  color: var(--link);
-  text-decoration: none;
-}
-
-.link:hover {
-  text-decoration: underline;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-.dag-active-node {
-  background: rgba(210, 153, 34, 0.18);
-}
-
-.dag-error-node {
-  background: rgba(248, 81, 73, 0.12);
-}
-
-tbody tr.dag-active-node:hover {
-  background: rgba(210, 153, 34, 0.25);
-}
-
-tbody tr.dag-error-node:hover {
-  background: rgba(248, 81, 73, 0.18);
-}
-
-.dag-output-node {
-  margin: 0.5rem 0 0.25rem;
-  font-size: 12px;
-  color: var(--muted);
-}
-
-.step-link {
-  margin-left: 0.5rem;
-  color: var(--link);
-  text-decoration: none;
-  font-size: 11px;
-}
-
-.step-link:hover {
-  text-decoration: underline;
-}
-
-.inbox-link,
-.artifact-link {
-  color: var(--link);
-  text-decoration: none;
-  font-size: 11px;
-}
-
-.inbox-link:hover,
-.artifact-link:hover {
-  text-decoration: underline;
-}
-
-.artifact-links {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.artifact-links .muted {
-  color: var(--muted);
-}
-
-#failures-list .row-failed {
-  border-left: 3px solid var(--red, #e06c75);
-}
-
-#failures-list .row-blocked {
-  border-left: 3px solid var(--yellow, #d19a66);
-}
+:root {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --surface-raised: #1c2128;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --muted: #8b949e;
+  --link: #58a6ff;
+  --green: #3fb950;
+  --red: #f85149;
+  --yellow: #d29922;
+  --blue: #58a6ff;
+  --gray-red: #8b3a3a;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow-1: 0 4px 18px rgba(0, 0, 0, 0.2);
+  --transition-fast: 140ms ease;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+  background: var(--bg);
+  color: var(--text);
+}
+
+code,
+pre,
+.output-block,
+.rank-node-id,
+.dag-node-label,
+.dag-node-meta,
+.dag-node-status,
+td:first-child,
+.meta-item dd {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+#app {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem 2rem;
+}
+
+.site-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.logo {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.logo:hover {
+  color: var(--link);
+}
+
+.top-nav {
+  display: flex;
+  gap: 1rem;
+}
+
+.nav-link {
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 12px;
+}
+
+.nav-link:hover {
+  color: var(--link);
+}
+
+.header-refresh {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.breadcrumb {
+  flex-basis: 100%;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.breadcrumb a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.breadcrumb a:hover {
+  text-decoration: underline;
+}
+
+h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+h3,
+.section-heading {
+  margin: 0 0 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+}
+
+.dag-graph-wrap {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.dag-graph-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.dag-graph-summary,
+.dag-graph-fallback {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.dag-graph-fallback { margin: 0; }
+
+.dag-graph-reset {
+  appearance: none;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-raised);
+  color: var(--text);
+  padding: 6px 10px;
+  cursor: pointer;
+}
+
+.dag-graph-reset:hover,
+.dag-graph-reset:focus-visible { border-color: var(--link); }
+
+.dag-graph-viewport {
+  min-height: 220px;
+  max-height: 620px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: radial-gradient(circle at 1px 1px, rgba(139, 148, 158, 0.18) 1px, transparent 0) 0 0 / 20px 20px, var(--bg);
+  scroll-behavior: smooth;
+}
+
+.dag-graph { display: block; }
+.dag-edge { fill: none; stroke: var(--muted); stroke-width: 2; opacity: 0.75; transition: opacity var(--transition-fast); }
+.dag-edge + .dag-edge { stroke-width: 1.8; }
+#dag-arrow path { fill: var(--muted); }
+.dag-graph-node { cursor: pointer; transition: opacity var(--transition-fast); }
+.dag-graph-node rect { fill: var(--surface-raised); stroke: var(--border); stroke-width: 1.5; }
+.dag-graph-node:hover rect,
+.dag-graph-node:focus-visible rect { stroke: var(--link); stroke-width: 2.5; }
+.dag-graph-node:focus { outline: none; }
+.dag-graph-node.selected rect { stroke: var(--link); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.45)); }
+.dag-graph-node.status-running rect,
+.dag-graph-node.status-started rect { stroke: var(--yellow); }
+.dag-graph-node.status-failed rect,
+.dag-graph-node.status-error rect { stroke: var(--red); fill: rgba(248, 81, 73, 0.1); }
+.dag-graph-node.status-skipped rect { stroke-dasharray: 5 4; }
+.dag-node-label { fill: var(--text); font-size: 13px; font-weight: 700; }
+.dag-node-meta { fill: var(--muted); font-size: 11px; }
+.dag-node-status { fill: var(--text); font-size: 11px; }
+.dag-dimmed { opacity: 0.25; }
+.dag-graph-node.status-running { animation: graph-node-pulse 2s ease-in-out infinite; }
+
+@keyframes graph-node-pulse {
+  50% { filter: drop-shadow(0 0 7px rgba(210, 153, 34, 0.45)); }
+}
+
+@media (max-width: 680px) {
+  #app { padding-inline: var(--space-3); }
+  .meta-grid { grid-template-columns: 1fr; }
+  .dag-graph-viewport { max-height: 480px; }
+  table { min-width: 760px; }
+  .panel { overflow-x: auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.kpi-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.6rem 0.75rem;
+  text-align: center;
+}
+
+.kpi-card.kpi-highlight {
+  border-color: var(--yellow);
+  background: rgba(210, 153, 34, 0.08);
+}
+
+.kpi-card.kpi-danger {
+  border-color: var(--red);
+}
+
+.kpi-label {
+  color: var(--muted);
+  font-size: 10px;
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
+}
+
+.kpi-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+.active-dag-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.active-dag-card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.75rem 1rem;
+}
+
+.active-dag-card-running {
+  border-color: var(--yellow);
+  box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.25);
+  animation: pulse-border 2s ease-in-out infinite;
+}
+
+@keyframes pulse-border {
+  0%,
+  100% {
+    border-color: var(--yellow);
+  }
+  50% {
+    border-color: rgba(210, 153, 34, 0.5);
+  }
+}
+
+.active-dag-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.35rem;
+}
+
+.active-dag-title {
+  font-weight: 600;
+  flex: 1;
+}
+
+.active-dag-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  color: var(--muted);
+  font-size: 12px;
+  margin-bottom: 0.5rem;
+}
+
+.active-dag-link {
+  color: var(--link);
+  text-decoration: none;
+  font-size: 12px;
+}
+
+.active-dag-link:hover {
+  text-decoration: underline;
+}
+
+.dashboard-footer {
+  margin-top: 0.75rem;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.5rem 1.5rem;
+}
+
+.meta-item dt {
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.meta-item dd {
+  margin: 0.15rem 0 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--border);
+}
+
+th {
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+tbody tr.clickable {
+  cursor: pointer;
+}
+
+tbody tr.dag-node-selected {
+  background: rgba(88, 166, 255, 0.12);
+}
+
+.timeline-node-label {
+  color: var(--muted);
+  font-size: 12px;
+  margin: 0 0 0.5rem;
+}
+
+.process-timeline-scroll {
+  max-height: 320px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+}
+
+.process-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+.process-timeline-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.35rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+}
+
+.process-timeline-item:last-child {
+  border-bottom: none;
+}
+
+.process-timeline-time {
+  flex: 0 0 4.5rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.process-timeline-label {
+  flex: 1;
+  word-break: break-word;
+}
+
+tbody tr.active-task {
+  background: rgba(210, 153, 34, 0.12);
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.1rem 0.45rem;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-succeeded,
+.badge-finished,
+.badge-completed,
+.badge-done {
+  background: rgba(63, 185, 80, 0.2);
+  color: var(--green);
+}
+
+.badge-failed,
+.badge-error {
+  background: rgba(248, 81, 73, 0.2);
+  color: var(--red);
+}
+
+.badge-partial-failed {
+  background: rgba(248, 81, 73, 0.15);
+  color: #ff9a8b;
+  border: 1px solid rgba(248, 81, 73, 0.35);
+}
+
+.badge-running,
+.badge-started {
+  background: rgba(210, 153, 34, 0.2);
+  color: var(--yellow);
+}
+
+.badge-skipped {
+  background: rgba(139, 148, 158, 0.15);
+  color: var(--muted);
+}
+
+.badge-stale {
+  background: rgba(139, 58, 58, 0.3);
+  color: #e06c75;
+}
+
+.badge-reused {
+  background: rgba(88, 166, 255, 0.2);
+  color: var(--blue);
+}
+
+.badge-pending,
+.badge-blocked,
+.badge-unknown,
+.badge-queued {
+  background: rgba(139, 148, 158, 0.15);
+  color: var(--muted);
+}
+
+.liveness-active {
+  background: rgba(63, 185, 80, 0.2);
+  color: var(--green);
+}
+
+.liveness-quiet {
+  background: rgba(210, 153, 34, 0.2);
+  color: var(--yellow);
+}
+
+.liveness-stale {
+  background: rgba(139, 58, 58, 0.3);
+  color: #e06c75;
+}
+
+.liveness-timeout-risk {
+  background: rgba(248, 81, 73, 0.25);
+  color: var(--red);
+}
+
+.rank-lanes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.rank-lane {
+  border-left: 3px solid var(--border);
+  padding-left: 0.75rem;
+}
+
+.rank-lane-label {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.rank-lane-nodes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.rank-node-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.25rem 0.5rem;
+  font-size: 12px;
+}
+
+.rank-node-active {
+  border-color: var(--yellow);
+  background: rgba(210, 153, 34, 0.12);
+}
+
+.rank-node-error {
+  border-color: var(--red);
+  background: rgba(248, 81, 73, 0.1);
+}
+
+.rank-node-id {
+  font-weight: 600;
+}
+
+.rank-node-dur {
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.step-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.step-timeline li {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.step-timeline li:last-child {
+  border-bottom: none;
+}
+
+.step-marker {
+  width: 1.5rem;
+  text-align: center;
+  font-weight: 700;
+}
+
+.step-marker.succeeded {
+  color: var(--green);
+}
+
+.step-marker.running {
+  color: var(--yellow);
+}
+
+.step-marker.pending {
+  color: var(--muted);
+}
+
+.step-marker.failed {
+  color: var(--red);
+}
+
+.step-name {
+  flex: 1;
+}
+
+.step-duration {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.output-block {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 240px;
+  overflow-y: auto;
+  font-size: 12px;
+}
+
+.output-preview {
+  margin: 0.5rem 0;
+}
+
+.output-preview summary {
+  cursor: pointer;
+  color: var(--link);
+  font-size: 12px;
+  margin-bottom: 0.25rem;
+}
+
+.error-preview summary {
+  color: var(--red);
+}
+
+.artifact-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.artifact-list li {
+  padding: 0.25rem 0;
+}
+
+.artifact-list a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.artifact-list a:hover {
+  text-decoration: underline;
+}
+
+.empty {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.link {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.dag-active-node {
+  background: rgba(210, 153, 34, 0.18);
+}
+
+.dag-error-node {
+  background: rgba(248, 81, 73, 0.12);
+}
+
+tbody tr.dag-active-node:hover {
+  background: rgba(210, 153, 34, 0.25);
+}
+
+tbody tr.dag-error-node:hover {
+  background: rgba(248, 81, 73, 0.18);
+}
+
+.dag-output-node {
+  margin: 0.5rem 0 0.25rem;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.step-link {
+  margin-left: 0.5rem;
+  color: var(--link);
+  text-decoration: none;
+  font-size: 11px;
+}
+
+.step-link:hover {
+  text-decoration: underline;
+}
+
+.inbox-link,
+.artifact-link {
+  color: var(--link);
+  text-decoration: none;
+  font-size: 11px;
+}
+
+.inbox-link:hover,
+.artifact-link:hover {
+  text-decoration: underline;
+}
+
+.artifact-links {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.artifact-links .muted {
+  color: var(--muted);
+}
+
+#failures-list .row-failed {
+  border-left: 3px solid var(--red, #e06c75);
+}
+
+#failures-list .row-blocked {
+  border-left: 3px solid var(--yellow, #d19a66);
+}