@tea-agent/loop-agent 0.10.0 → 0.12.0

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

@@ -1,61 +1,71 @@
 :root {
-  --canvas: #f7f7f4;
-  --canvas-soft: #fafaf7;
-  --surface: #ffffff;
-  --surface-muted: #f0efe9;
-  --surface-ink: #26251e;
-  --ink: #26251e;
-  --body: #5a5852;
-  --muted: #807d72;
-  --muted-soft: #a09c92;
-  --hairline: #e6e5e0;
-  --hairline-strong: #cfcdc4;
-  --orange: #f54e00;
-  --orange-active: #d04200;
-  --blue: #3f6ea4;
-  --green: #1f8a65;
-  --amber: #a66a00;
-  --red: #c72d53;
-  --lavender: #e4daf1;
-  --mint: #d8ead5;
-  --peach: #f1d8cb;
-  --gold: #d8b166;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-10: 40px;
-  --space-12: 48px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --transition-fast: 160ms ease;
-  --transition-base: 240ms ease;
-}
-
-* { box-sizing: border-box; }
-
-html { background: var(--canvas); scroll-behavior: smooth; }
+	--canvas: #f7f7f4;
+	--canvas-soft: #fafaf7;
+	--surface: #ffffff;
+	--surface-muted: #f0efe9;
+	--surface-ink: #26251e;
+	--ink: #26251e;
+	--body: #5a5852;
+	--muted: #807d72;
+	--muted-soft: #a09c92;
+	--hairline: #e6e5e0;
+	--hairline-strong: #cfcdc4;
+	--orange: #f54e00;
+	--orange-active: #d04200;
+	--blue: #3f6ea4;
+	--green: #1f8a65;
+	--amber: #a66a00;
+	--red: #c72d53;
+	--lavender: #e4daf1;
+	--mint: #d8ead5;
+	--peach: #f1d8cb;
+	--gold: #d8b166;
+	--space-1: 4px;
+	--space-2: 8px;
+	--space-3: 12px;
+	--space-4: 16px;
+	--space-5: 20px;
+	--space-6: 24px;
+	--space-8: 32px;
+	--space-10: 40px;
+	--space-12: 48px;
+	--radius-sm: 4px;
+	--radius-md: 6px;
+	--radius-lg: 8px;
+	--transition-fast: 160ms ease;
+	--transition-base: 240ms ease;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	background: var(--canvas);
+	scroll-behavior: smooth;
+}
 
 body {
-  min-width: 320px;
-  margin: 0;
-  background: var(--canvas);
-  color: var(--ink);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
+	min-width: 320px;
+	margin: 0;
+	background: var(--canvas);
+	color: var(--ink);
+	font-family:
+		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
 }
 
 button,
 input,
 select,
-textarea { font: inherit; }
+textarea {
+	font: inherit;
+}
 
-a { color: inherit; }
+a {
+	color: inherit;
+}
 
 code,
 pre,
@@ -70,248 +80,499 @@ td:first-child,
 .kpi-value,
 .risk-total,
 .process-timeline-time {
-  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
 }
 
 .skip-link {
-  position: fixed;
-  top: -64px;
-  left: var(--space-4);
-  z-index: 100;
-  padding: 9px 12px;
-  background: var(--orange);
-  color: #fff;
-  font-weight: 700;
-  text-decoration: none;
-  transition: top var(--transition-fast);
+	position: fixed;
+	top: -64px;
+	left: var(--space-4);
+	z-index: 100;
+	padding: 9px 12px;
+	background: var(--orange);
+	color: #fff;
+	font-weight: 700;
+	text-decoration: none;
+	transition: top var(--transition-fast);
 }
 
-.skip-link:focus { top: var(--space-3); }
+.skip-link:focus {
+	top: var(--space-3);
+}
 
 #app {
-  width: min(100% - 48px, 1680px);
-  margin: 0 auto;
-  padding-bottom: 56px;
+	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 auto 1fr;
-  grid-template-areas: "brand nav status" "crumb crumb crumb";
-  column-gap: var(--space-6);
-  align-items: center;
-  min-height: 76px;
-  margin-bottom: var(--space-8);
-  padding: 14px 0 12px;
-  background: color-mix(in srgb, var(--canvas) 94%, transparent);
-  border-bottom: 1px solid var(--hairline);
-  backdrop-filter: blur(10px);
+	position: sticky;
+	top: 0;
+	z-index: 30;
+	display: grid;
+	grid-template-columns: auto auto 1fr;
+	grid-template-areas: "brand nav status" "crumb crumb crumb";
+	column-gap: var(--space-6);
+	align-items: center;
+	min-height: 76px;
+	margin-bottom: var(--space-8);
+	padding: 14px 0 12px;
+	background: color-mix(in srgb, var(--canvas) 94%, transparent);
+	border-bottom: 1px solid var(--hairline);
+	backdrop-filter: blur(10px);
 }
 
 .logo {
-  grid-area: brand;
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  color: var(--ink);
-  font-size: 16px;
-  font-weight: 650;
-  letter-spacing: 0;
-  text-decoration: none;
+	grid-area: brand;
+	display: inline-flex;
+	align-items: center;
+	gap: 9px;
+	color: var(--ink);
+	font-size: 16px;
+	font-weight: 650;
+	letter-spacing: 0;
+	text-decoration: none;
 }
 
-.logo > i { color: var(--orange); font-size: 20px; font-weight: 400; }
-.logo:hover { color: var(--orange-active); }
+.logo > i {
+	color: var(--orange);
+	font-size: 20px;
+	font-weight: 400;
+}
+.logo:hover {
+	color: var(--orange-active);
+}
 
 .top-nav {
-  grid-area: nav;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+	grid-area: nav;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
 }
 
 .nav-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 36px;
-  padding: 0 10px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  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);
-}
-
-.nav-link > i { font-size: 16px; font-weight: 400; }
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 36px;
+	padding: 0 10px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	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);
+}
+
+.nav-link > i {
+	font-size: 16px;
+	font-weight: 400;
+}
 .nav-link:hover,
-.nav-link:focus-visible { border-color: var(--hairline-strong); background: var(--surface); color: var(--ink); outline: none; }
-.nav-link-active { border-color: var(--orange); background: var(--surface); color: var(--ink); }
+.nav-link:focus-visible {
+	border-color: var(--hairline-strong);
+	background: var(--surface);
+	color: var(--ink);
+	outline: none;
+}
+.nav-link-active {
+	border-color: var(--orange);
+	background: var(--surface);
+	color: var(--ink);
+}
 
 .header-meta {
-  grid-area: status;
-  display: inline-flex;
-  justify-self: end;
-  align-items: center;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
+	grid-area: status;
+	display: inline-flex;
+	justify-self: end;
+	align-items: center;
+	gap: 7px;
+	color: var(--muted);
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
 }
 
-.header-meta > i { color: var(--green); font-size: 16px; }
+.header-meta > i {
+	color: var(--green);
+	font-size: 16px;
+}
 
 .breadcrumb {
-  grid-area: crumb;
-  display: flex;
-  min-height: 16px;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 12px;
+	grid-area: crumb;
+	display: flex;
+	min-height: 16px;
+	gap: 7px;
+	color: var(--muted);
+	font-size: 12px;
 }
 
-.breadcrumb[hidden] { display: none; }
+.breadcrumb[hidden] {
+	display: none;
+}
 
-.breadcrumb a { color: var(--body); text-decoration: none; }
+.breadcrumb a {
+	color: var(--body);
+	text-decoration: none;
+}
 .breadcrumb a:hover,
-.breadcrumb a:focus-visible { color: var(--orange); text-decoration: underline; outline: none; }
+.breadcrumb a:focus-visible {
+	color: var(--orange);
+	text-decoration: underline;
+	outline: none;
+}
 
-.dashboard-main:focus { outline: none; }
-.view { min-width: 0; }
-.view[hidden] { display: none !important; }
-.view:not(.view-dashboard) { display: grid; gap: var(--space-4); }
+.dashboard-main:focus {
+	outline: none;
+}
+.view {
+	min-width: 0;
+}
+.view[hidden] {
+	display: none !important;
+}
+.view:not(.view-dashboard) {
+	display: grid;
+	gap: var(--space-4);
+}
 
 .view-heading {
-  display: grid;
-  gap: 4px;
-  margin-bottom: var(--space-6);
+	display: grid;
+	gap: 4px;
+	margin-bottom: var(--space-6);
 }
 
 .view-kicker {
-  margin: 0;
-  color: var(--orange);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .08em;
+	margin: 0;
+	color: var(--orange);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.08em;
 }
 
 .view h2 {
-  margin: 0;
-  color: var(--ink);
-  font-size: 28px;
-  font-weight: 500;
-  line-height: 1.16;
-  letter-spacing: 0;
+	margin: 0;
+	color: var(--ink);
+	font-size: 28px;
+	font-weight: 500;
+	line-height: 1.16;
+	letter-spacing: 0;
 }
 
-.view-heading > p:last-child { max-width: 66ch; margin: 0; color: var(--body); }
+.view-heading > p:last-child {
+	max-width: 66ch;
+	margin: 0;
+	color: var(--body);
+}
 
 .panel {
-  min-width: 0;
-  background: var(--surface);
-  border: 1px solid var(--hairline);
-  border-radius: var(--radius-lg);
-  padding: var(--space-5);
+	min-width: 0;
+	background: var(--surface);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	padding: var(--space-5);
 }
 
-.panel-primary { border-color: var(--hairline-strong); }
-.panel-meta { background: transparent; border-color: var(--hairline-strong); }
-.panel-table { overflow: hidden; padding: 0; }
-.panel-output { background: #fbfbf9; }
+.panel-primary {
+	border-color: var(--hairline-strong);
+}
+.panel-meta {
+	background: transparent;
+	border-color: var(--hairline-strong);
+}
+.panel-table {
+	overflow: hidden;
+	padding: 0;
+}
+.panel-output {
+	background: #fbfbf9;
+}
 
 .section-heading,
 .panel h3 {
-  margin: 0 0 var(--space-4);
-  color: var(--ink);
-  font-size: 14px;
-  font-weight: 700;
+	margin: 0 0 var(--space-4);
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
 }
 
 .empty,
-.risk-empty { margin: 0; color: var(--muted); }
-.empty-state { padding: var(--space-8); text-align: center; color: var(--body); }
+.risk-empty {
+	margin: 0;
+	color: var(--muted);
+}
+.empty-state {
+	padding: var(--space-8);
+	text-align: center;
+	color: var(--body);
+}
 
-.view-dashboard { display: grid; gap: var(--space-4); }
+.view-dashboard {
+	display: grid;
+	gap: var(--space-4);
+}
 
-.repo-banner { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); background: var(--surface); }
-.repo-banner > i { color: var(--muted); font-size: 18px; }
-.repo-banner-text { display: grid; gap: 2px; min-width: 0; }
-.repo-banner-name { color: var(--ink); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
-.repo-banner-path { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
+.repo-banner {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	padding: 10px 14px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+}
+.repo-banner > i {
+	color: var(--muted);
+	font-size: 18px;
+}
+.repo-banner-text {
+	display: grid;
+	gap: 2px;
+	min-width: 0;
+}
+.repo-banner-name {
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.repo-banner-path {
+	color: var(--muted);
+	font-size: 11px;
+	overflow-wrap: anywhere;
+}
 
-.panel-kpi { padding: 0; background: transparent; border: 0; }
+.panel-kpi {
+	padding: 0;
+	background: transparent;
+	border: 0;
+}
 
-.kpi-group { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-3); }
-.kpi-group + .kpi-group { margin-top: var(--space-3); }
-.kpi-group-legend { padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
+.kpi-group {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	display: grid;
+	gap: var(--space-3);
+}
+.kpi-group + .kpi-group {
+	margin-top: var(--space-3);
+}
+.kpi-group-legend {
+	padding: 0;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
 
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-  overflow: visible;
-  border: 1px solid var(--hairline-strong);
-  border-radius: var(--radius-lg);
-  background: var(--surface);
+.kpi-grid {
+	display: grid;
+	grid-template-columns: repeat(6, minmax(0, 1fr));
+	overflow: visible;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
 }
 
 .kpi-card {
-  position: relative;
-  min-width: 0;
-  min-height: 84px;
-  padding: 15px 18px 14px;
-  border-left: 1px solid var(--hairline);
+	position: relative;
+	min-width: 0;
+	min-height: 84px;
+	padding: 15px 18px 14px;
+	border-left: 1px solid var(--hairline);
 }
 
-.kpi-card:first-child { border-left: 0; }
-.kpi-label { margin-bottom: 9px; color: var(--muted); font-size: 11px; font-weight: 650; }
-.kpi-value-row { display: flex; align-items: baseline; gap: 6px; }
-.kpi-value { color: var(--ink); font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
+.kpi-card:first-child {
+	border-left: 0;
+}
+.kpi-label {
+	margin-bottom: 9px;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 650;
+}
+.kpi-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
+}
+.kpi-value {
+	color: var(--ink);
+	font-size: 26px;
+	font-weight: 500;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
 
-.kpi-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-soft); cursor: help; font-size: 13px; line-height: 1; }
-.kpi-help:hover, .kpi-help:focus-visible { color: var(--ink); background: var(--surface-muted); outline: none; }
-.kpi-help:focus-visible { box-shadow: 0 0 0 2px var(--hairline-strong); }
-.kpi-tip { position: absolute; left: 12px; right: 12px; top: calc(100% - 8px); z-index: 10; max-width: 280px; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--surface-ink); color: var(--canvas); font-size: 11px; font-weight: 400; line-height: 1.5; box-shadow: var(--shadow-panel); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-fast); }
-.kpi-help:hover + .kpi-tip, .kpi-help:focus-visible + .kpi-tip { opacity: 1; visibility: visible; }
+.kpi-help {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--muted-soft);
+	cursor: help;
+	font-size: 13px;
+	line-height: 1;
+}
+.kpi-help:hover,
+.kpi-help:focus-visible {
+	color: var(--ink);
+	background: var(--surface-muted);
+	outline: none;
+}
+.kpi-help:focus-visible {
+	box-shadow: 0 0 0 2px var(--hairline-strong);
+}
+.kpi-tip {
+	position: absolute;
+	left: 12px;
+	right: 12px;
+	top: calc(100% - 8px);
+	z-index: 10;
+	max-width: 280px;
+	padding: 8px 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-md);
+	background: var(--surface-ink);
+	color: var(--canvas);
+	font-size: 11px;
+	font-weight: 400;
+	line-height: 1.5;
+	box-shadow: var(--shadow-panel);
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transition: opacity var(--transition-fast);
+}
+.kpi-help:hover + .kpi-tip,
+.kpi-help:focus-visible + .kpi-tip {
+	opacity: 1;
+	visibility: visible;
+}
 
 .dashboard-workspace,
 .dashboard-secondary {
-  display: grid;
-  gap: var(--space-4);
-  align-items: stretch;
+	display: grid;
+	gap: var(--space-4);
+	align-items: stretch;
 }
 
-.dashboard-workspace { grid-template-columns: 1fr; }
-.dashboard-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.dashboard-workspace {
+	grid-template-columns: 1fr;
+}
+.dashboard-secondary {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
 
 .panel-risk {
-  display: block;
-  background: var(--canvas-soft);
-}
-
-.panel-risk-attention { border-color: color-mix(in srgb, var(--red) 50%, var(--hairline)); background: #fff8f9; }
-.panel-risk .section-heading { margin: 0 0 var(--space-3); }
-.risk-blocks { display: grid; gap: var(--space-4); }
-.risk-block { display: grid; grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr); align-items: start; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
-.risk-block:first-child { padding-top: 0; border-top: 0; }
-.risk-block-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
-.risk-block-dag .risk-block-label { color: var(--ink); }
-.risk-block-worker .risk-block-label { color: var(--ink); }
-.risk-total { margin: 0; color: var(--amber); font-size: 32px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
-.panel-risk-attention .risk-total { color: var(--red); }
-.risk-summary { margin: 0; color: var(--body); font-size: 12px; line-height: 1.6; }
-.panel-risk .risk-empty { margin: 0; }
-
-.projection-fault { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--red) 50%, var(--hairline)); border-radius: var(--radius-lg); background: #fff8f9; }
-.projection-fault > i { color: var(--red); font-size: 20px; line-height: 1.4; }
-.projection-fault-body { display: grid; gap: 4px; min-width: 0; }
-.projection-fault-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }
-.projection-fault-message { margin: 0; color: var(--body); font-size: 12px; overflow-wrap: anywhere; }
-.projection-fault-at { margin: 0; color: var(--muted); font-size: 11px; }
+	display: block;
+	background: var(--canvas-soft);
+}
+
+.panel-risk-attention {
+	border-color: color-mix(in srgb, var(--red) 50%, var(--hairline));
+	background: #fff8f9;
+}
+.panel-risk .section-heading {
+	margin: 0 0 var(--space-3);
+}
+.risk-blocks {
+	display: grid;
+	gap: var(--space-4);
+}
+.risk-block {
+	display: grid;
+	grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--space-3);
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--hairline);
+}
+.risk-block:first-child {
+	padding-top: 0;
+	border-top: 0;
+}
+.risk-block-label {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+.risk-block-dag .risk-block-label {
+	color: var(--ink);
+}
+.risk-block-worker .risk-block-label {
+	color: var(--ink);
+}
+.risk-total {
+	margin: 0;
+	color: var(--amber);
+	font-size: 32px;
+	font-weight: 500;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+.panel-risk-attention .risk-total {
+	color: var(--red);
+}
+.risk-summary {
+	margin: 0;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.6;
+}
+.panel-risk .risk-empty {
+	margin: 0;
+}
+
+.projection-fault {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--space-3);
+	padding: 14px 16px;
+	border: 1px solid color-mix(in srgb, var(--red) 50%, var(--hairline));
+	border-radius: var(--radius-lg);
+	background: #fff8f9;
+}
+.projection-fault > i {
+	color: var(--red);
+	font-size: 20px;
+	line-height: 1.4;
+}
+.projection-fault-body {
+	display: grid;
+	gap: 4px;
+	min-width: 0;
+}
+.projection-fault-title {
+	margin: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+.projection-fault-message {
+	margin: 0;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.projection-fault-at {
+	margin: 0;
+	color: var(--muted);
+	font-size: 11px;
+}
 
 .risk-link,
 .active-dag-link,
@@ -319,183 +580,437 @@ td:first-child,
 .inbox-link,
 .artifact-link,
 .step-link {
-  color: var(--ink);
-  font-size: 12px;
-  font-weight: 700;
-  text-decoration-color: var(--orange);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 4px;
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+	text-decoration-color: var(--orange);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 4px;
 }
 
-.risk-link { margin: 0; padding: 0; white-space: nowrap; }
+.risk-link {
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+}
 .risk-link:hover,
 .active-dag-link:hover,
 .link:hover,
 .inbox-link:hover,
 .artifact-link:hover,
-.step-link:hover { color: var(--orange-active); }
+.step-link:hover {
+	color: var(--orange-active);
+}
 
-.active-dag-list { display: grid; gap: 10px; }
-.active-dag-card { padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas-soft); }
-.active-dag-card-running { border-left: 3px solid var(--orange); padding-left: 12px; }
-.active-dag-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3); margin-bottom: 9px; }
-.active-dag-title { min-width: 0; color: var(--ink); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
-.active-dag-meta { display: grid; gap: 4px; color: var(--body); font-size: 12px; }
-.active-dag-link { display: inline-block; margin-top: 10px; }
+.active-dag-list {
+	display: grid;
+	gap: 10px;
+}
+.active-dag-card {
+	padding: 14px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--canvas-soft);
+}
+.active-dag-card-running {
+	border-left: 3px solid var(--orange);
+	padding-left: 12px;
+}
+.active-dag-header {
+	display: flex;
+	align-items: start;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: 9px;
+}
+.active-dag-title {
+	min-width: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.active-dag-meta {
+	display: grid;
+	gap: 4px;
+	color: var(--body);
+	font-size: 12px;
+}
+.active-dag-link {
+	display: inline-block;
+	margin-top: 10px;
+}
 
 .meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: 15px 24px;
-  margin: 0;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 15px 24px;
+	margin: 0;
 }
 
-.meta-item { min-width: 0; }
-.meta-item dt { color: var(--muted); font-size: 11px; font-weight: 650; }
-.meta-item dd { min-height: 24px; margin: 4px 0 0; padding-top: 5px; border-top: 1px solid var(--hairline); color: var(--ink); overflow-wrap: anywhere; font-size: 12px; }
+.meta-item {
+	min-width: 0;
+}
+.meta-item dt {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 650;
+}
+.meta-item dd {
+	min-height: 24px;
+	margin: 4px 0 0;
+	padding-top: 5px;
+	border-top: 1px solid var(--hairline);
+	color: var(--ink);
+	overflow-wrap: anywhere;
+	font-size: 12px;
+}
 
-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
 th,
-td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
-th { position: sticky; top: 0; z-index: 2; background: var(--surface-muted); color: var(--body); font-size: 11px; font-weight: 700; }
-td { color: var(--body); }
-tbody tr:last-child td { border-bottom: 0; }
-tbody tr { transition: background-color var(--transition-fast); }
-tbody tr:hover { background: #fff8f4; }
-tr.clickable { cursor: pointer; }
-tr.clickable:focus-within { outline: 2px solid var(--orange); outline-offset: -2px; }
+td {
+	padding: 11px 14px;
+	border-bottom: 1px solid var(--hairline);
+	text-align: left;
+	vertical-align: top;
+}
+th {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--surface-muted);
+	color: var(--body);
+	font-size: 11px;
+	font-weight: 700;
+}
+td {
+	color: var(--body);
+}
+tbody tr:last-child td {
+	border-bottom: 0;
+}
+tbody tr {
+	transition: background-color var(--transition-fast);
+}
+tbody tr:hover {
+	background: #fff8f4;
+}
+tr.clickable {
+	cursor: pointer;
+}
+tr.clickable:focus-within {
+	outline: 2px solid var(--orange);
+	outline-offset: -2px;
+}
 
 .badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 22px;
-  padding: 2px 7px;
-  border: 1px solid currentColor;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1.2;
-  white-space: nowrap;
+	display: inline-flex;
+	align-items: center;
+	min-height: 22px;
+	padding: 2px 7px;
+	border: 1px solid currentColor;
+	border-radius: 999px;
+	background: transparent;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	line-height: 1.2;
+	white-space: nowrap;
 }
 
 .badge-succeeded,
 .badge-finished,
 .badge-completed,
 .badge-done,
-.liveness-active { color: var(--green); background: #f2faf5; }
+.liveness-active {
+	color: var(--green);
+	background: #f2faf5;
+}
 .badge-failed,
 .badge-error,
-.liveness-stale { color: var(--red); background: #fff5f7; }
-.badge-partial-failed { color: #9a3a4f; background: #fff7f8; }
+.liveness-stale {
+	color: var(--red);
+	background: #fff5f7;
+}
+.badge-partial-failed {
+	color: #9a3a4f;
+	background: #fff7f8;
+}
 .badge-running,
-.badge-started { color: var(--orange-active); background: #fff5ed; }
+.badge-started {
+	color: var(--orange-active);
+	background: #fff5ed;
+}
 .badge-pending,
 .badge-queued,
 .badge-blocked,
-.badge-unknown { color: var(--body); background: var(--surface-muted); }
+.badge-unknown {
+	color: var(--body);
+	background: var(--surface-muted);
+}
 .badge-skipped,
 .badge-reused,
-.liveness-quiet { color: var(--blue); background: #f2f6fb; }
-.liveness-timeout-risk { color: var(--amber); background: #fff8e7; }
+.liveness-quiet {
+	color: var(--blue);
+	background: #f2f6fb;
+}
+.liveness-timeout-risk {
+	color: var(--amber);
+	background: #fff8e7;
+}
 
-.dag-detail-workspace { display: block; }
+.dag-detail-workspace {
+	display: block;
+}
 
 .dag-inspector {
-  position: fixed;
-  z-index: 40;
-  top: 96px;
-  right: 24px;
-  bottom: 24px;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  width: min(var(--dag-inspector-width, 440px), calc(100vw - 48px));
-  min-width: 0;
-  padding: 0;
-  overflow: hidden;
-  border-color: var(--hairline-strong);
-  box-shadow: 0 20px 48px rgba(38, 37, 30, .16);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateX(calc(100% + 24px));
-  visibility: hidden;
-  transition: transform var(--transition-base), opacity var(--transition-base), visibility 0s linear 240ms;
-}
-.dag-inspector.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; transition-delay: 0s, 0s, 0s; }
+	position: fixed;
+	z-index: 40;
+	top: 96px;
+	right: 24px;
+	bottom: 24px;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	width: min(var(--dag-inspector-width, 440px), calc(100vw - 48px));
+	min-width: 0;
+	padding: 0;
+	overflow: hidden;
+	border-color: var(--hairline-strong);
+	box-shadow: 0 20px 48px rgba(38, 37, 30, 0.16);
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(calc(100% + 24px));
+	visibility: hidden;
+	transition:
+		transform var(--transition-base),
+		opacity var(--transition-base),
+		visibility 0s linear 240ms;
+}
+.dag-inspector.is-open {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translateX(0);
+	visibility: visible;
+	transition-delay: 0s, 0s, 0s;
+}
 .dag-inspector-resize-handle {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 18px;
-  cursor: col-resize;
-  touch-action: none;
-  outline: none;
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 18px;
+	cursor: col-resize;
+	touch-action: none;
+	outline: none;
 }
 .dag-inspector-resize-handle::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 7px;
-  width: 3px;
-  height: 52px;
-  transform: translateY(-50%);
-  border-radius: 2px;
-  background: var(--hairline-strong);
-  opacity: 0;
-  transition: opacity var(--transition-base), background var(--transition-base);
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 7px;
+	width: 3px;
+	height: 52px;
+	transform: translateY(-50%);
+	border-radius: 2px;
+	background: var(--hairline-strong);
+	opacity: 0;
+	transition:
+		opacity var(--transition-base),
+		background var(--transition-base);
 }
 .dag-inspector-resize-handle:hover::before,
-.dag-inspector-resize-handle:focus-visible::before { background: var(--orange); opacity: 1; }
-.dag-inspector-resize-handle:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
-body.is-resizing-dag-inspector { cursor: col-resize; user-select: none; }
-.dag-inspector-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
-.dag-inspector-title { display: grid; gap: 6px; min-width: 0; }
-.dag-inspector-title h3 { margin: 0; font-size: 14px; }
-.dag-inspector-node { min-width: 0; color: var(--body); font-size: 12px; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
-.dag-inspector-controls { display: inline-flex; align-items: center; gap: 8px; }
-.dag-inspector-close { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--body); cursor: pointer; }
-.dag-inspector-close:hover, .dag-inspector-close:focus-visible { border-color: var(--orange); color: var(--orange-active); outline: none; }
-.dag-inspector-tabs { display: flex; grid-column: 1 / -1; gap: 4px; margin-top: 2px; }
-.dag-inspector-tab { min-height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
-.dag-inspector-tab:hover, .dag-inspector-tab:focus-visible { color: var(--ink); outline: none; }
-.dag-inspector-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline)); background: #fff5ed; color: var(--orange-active); }
-.dag-inspector-content { min-height: 0; padding: var(--space-4); overflow: auto; overscroll-behavior: contain; }
-.panel-graph { min-height: 0; }
-
-.dag-graph-wrap { display: grid; gap: var(--space-3); }
-.dag-graph-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
+.dag-inspector-resize-handle:focus-visible::before {
+	background: var(--orange);
+	opacity: 1;
+}
+.dag-inspector-resize-handle:focus-visible {
+	outline: 2px solid var(--orange);
+	outline-offset: -2px;
+}
+body.is-resizing-dag-inspector {
+	cursor: col-resize;
+	user-select: none;
+}
+body.is-resizing-dag-graph {
+	cursor: grabbing;
+	user-select: none;
+}
+.dag-inspector-header {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: var(--space-4) var(--space-4) var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+	background: var(--canvas-soft);
+}
+.dag-inspector-title {
+	display: grid;
+	gap: 6px;
+	min-width: 0;
+}
+.dag-inspector-title h3 {
+	margin: 0;
+	font-size: 14px;
+}
+.dag-inspector-node {
+	min-width: 0;
+	color: var(--body);
+	font-size: 12px;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	overflow-wrap: anywhere;
+}
+.dag-inspector-controls {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+.dag-inspector-close {
+	display: inline-grid;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--body);
+	cursor: pointer;
+}
+.dag-inspector-close:hover,
+.dag-inspector-close:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-inspector-tabs {
+	display: flex;
+	grid-column: 1 / -1;
+	gap: 4px;
+	margin-top: 2px;
+}
+.dag-inspector-tab {
+	min-height: 32px;
+	padding: 0 10px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-inspector-tab:hover,
+.dag-inspector-tab:focus-visible {
+	color: var(--ink);
+	outline: none;
+}
+.dag-inspector-tab[aria-selected="true"] {
+	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
+	background: #fff5ed;
+	color: var(--orange-active);
+}
+.dag-inspector-content {
+	min-height: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+.panel-graph {
+	min-height: 0;
+}
+
+.dag-graph-wrap {
+	display: grid;
+	gap: var(--space-3);
+}
+.dag-graph-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
 .dag-graph-summary,
-.dag-graph-fallback { margin: 0; color: var(--muted); font-size: 12px; }
+.dag-graph-fallback {
+	margin: 0;
+	color: var(--muted);
+	font-size: 12px;
+}
 .dag-graph-reset {
-  min-height: 32px;
-  padding: 0 10px;
-  border: 1px solid var(--hairline-strong);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
-  color: var(--ink);
-  font-size: 12px;
-  font-weight: 650;
-  cursor: pointer;
+	min-height: 32px;
+	padding: 0 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 650;
+	cursor: pointer;
 }
 .dag-graph-reset:hover,
-.dag-graph-reset:focus-visible { border-color: var(--orange); color: var(--orange-active); outline: none; }
-.dag-graph-viewport { min-height: 320px; max-height: 560px; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas-soft); scroll-behavior: auto; }
-.dag-graph { display: block; }
-.dag-edge { fill: none; stroke: var(--hairline-strong); stroke-width: 2; transition: opacity var(--transition-fast), stroke var(--transition-fast); }
-#dag-arrow path { fill: var(--hairline-strong); }
-.dag-graph-node { cursor: pointer; transition: opacity var(--transition-fast); }
-.dag-graph-node rect { fill: var(--surface); stroke: var(--hairline-strong); stroke-width: 1.5; }
+.dag-graph-reset:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-graph-viewport {
+	min-height: 320px;
+	max-height: 560px;
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--canvas-soft);
+	scroll-behavior: auto;
+}
+.dag-graph {
+	display: block;
+}
+.dag-edge {
+	fill: none;
+	stroke: var(--hairline-strong);
+	stroke-width: 2;
+	transition:
+		opacity var(--transition-fast),
+		stroke var(--transition-fast);
+}
+#dag-arrow path {
+	fill: var(--hairline-strong);
+}
+.dag-graph-node {
+	cursor: pointer;
+	transition: opacity var(--transition-fast);
+}
+.dag-graph-node rect {
+	fill: var(--surface);
+	stroke: var(--hairline-strong);
+	stroke-width: 1.5;
+}
 .dag-graph-node:hover rect,
-.dag-graph-node:focus-visible rect { stroke: var(--orange); stroke-width: 2; }
-.dag-graph-node:focus { outline: none; }
-.dag-graph-node.selected rect { stroke: var(--orange); stroke-width: 3; }
+.dag-graph-node:focus-visible rect {
+	stroke: var(--orange);
+	stroke-width: 2;
+}
+.dag-graph-node:focus {
+	outline: none;
+}
+.dag-graph-node.selected rect {
+	stroke: var(--orange);
+	stroke-width: 3;
+}
 .dag-graph-node.status-running rect,
-.dag-graph-node.status-started rect { stroke: var(--orange); fill: #fff7f0; }
+.dag-graph-node.status-started rect {
+	stroke: var(--orange);
+	fill: #fff7f0;
+}
 .dag-graph-node.status-failed rect,
-.dag-graph-node.status-error rect { stroke: var(--red); fill: #fff7f8; }
+.dag-graph-node.status-error rect {
+	stroke: var(--red);
+	fill: #fff7f8;
+}
 .dag-graph-node.status-succeeded:hover rect,
 .dag-graph-node.status-succeeded:focus-visible rect,
 .dag-graph-node.status-finished:hover rect,
@@ -503,163 +1018,873 @@ body.is-resizing-dag-inspector { cursor: col-resize; user-select: none; }
 .dag-graph-node.status-completed:hover rect,
 .dag-graph-node.status-completed:focus-visible rect,
 .dag-graph-node.status-done:hover rect,
-.dag-graph-node.status-done:focus-visible rect { stroke: var(--green); fill: #f2faf5; }
+.dag-graph-node.status-done:focus-visible rect {
+	stroke: var(--green);
+	fill: #f2faf5;
+}
 .dag-graph-node.selected.status-succeeded rect,
 .dag-graph-node.selected.status-finished rect,
 .dag-graph-node.selected.status-completed rect,
-.dag-graph-node.selected.status-done rect { stroke: var(--green); fill: #f2faf5; }
-.dag-graph-node.status-skipped rect { stroke-dasharray: 5 4; }
-.dag-node-label { fill: var(--ink); font-size: 13px; font-weight: 700; }
-.dag-node-meta { fill: var(--muted); font-size: 11px; }
-.dag-node-status { fill: var(--body); font-size: 11px; }
-.dag-dimmed { opacity: .28; }
-.dag-graph-node.status-running { animation: graph-node-pulse 2s ease-in-out infinite; }
-@keyframes graph-node-pulse { 50% { opacity: .72; } }
-
-.dag-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
-.dag-section-heading h3 { margin: 0; }
-.dag-section-meta { color: var(--muted); font-size: 12px; }
-#dag-nodes .dag-section-heading { padding: var(--space-5) var(--space-5) 0; }
-#dag-nodes .dag-node-table { border-top: 1px solid var(--hairline); }
-.dag-node-table { table-layout: fixed; }
-.dag-node-table th:nth-child(1), .dag-node-table td:nth-child(1) { width: 19%; }
-.dag-node-table th:nth-child(2), .dag-node-table td:nth-child(2) { width: 7%; }
-.dag-node-table th:nth-child(3), .dag-node-table td:nth-child(3) { width: 12%; }
-.dag-node-table th:nth-child(4), .dag-node-table td:nth-child(4) { width: 16%; }
-.dag-node-table th:nth-child(5), .dag-node-table td:nth-child(5) { width: 12%; }
-.dag-node-table th:nth-child(6), .dag-node-table td:nth-child(6) { width: 9%; }
-.dag-node-table th:nth-child(7), .dag-node-table td:nth-child(7) { width: 25%; }
-.dag-node-table td:nth-child(1), .dag-node-table td:nth-child(4), .dag-node-table td:nth-child(7) { overflow-wrap: anywhere; }
-.dag-active-node { background: #fff8f3; }
-.dag-error-node { background: #fff7f8; }
-.dag-node-selected { box-shadow: inset 3px 0 0 var(--orange); }
-
-.rank-lanes { display: grid; gap: var(--space-3); }
-.rank-lane { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
-.rank-lane-label { color: var(--muted); font-size: 11px; font-weight: 700; }
-.rank-lane-nodes { display: flex; flex-wrap: wrap; gap: 8px; }
-.rank-node-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--canvas-soft); }
-.rank-node-active { border-color: var(--orange); }
-.rank-node-error { border-color: var(--red); }
-.rank-node-id { color: var(--ink); font-size: 11px; }
-.rank-node-dur { color: var(--muted); font-size: 11px; }
-
-.process-timeline-note { margin: 0 0 var(--space-2); color: var(--muted); font-size: 11px; }
-.process-timeline { display: grid; gap: 0; margin: 0; padding: var(--space-2) 0; list-style: none; }
-.process-timeline-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: stretch; min-height: 34px; }
-.process-timeline-item.has-time { grid-template-columns: 20px 92px minmax(0, 1fr); }
-.process-timeline-rail { position: relative; display: grid; place-items: center; min-height: 34px; }
-.process-timeline-rail::before { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline-strong); content: ""; }
-.process-timeline-item.is-first .process-timeline-rail::before { top: 50%; }
-.process-timeline-item.is-last .process-timeline-rail::before { bottom: 50%; }
-.process-timeline-dot { position: relative; z-index: 1; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted-soft); }
-.process-timeline-lifecycle .process-timeline-dot { background: var(--lavender); }
-.process-timeline-tool-start .process-timeline-dot { background: var(--orange); }
-.process-timeline-tool-end .process-timeline-dot { background: var(--green); }
-.process-timeline-assistant .process-timeline-dot { background: var(--blue); }
-.process-timeline-protocol .process-timeline-dot { background: var(--muted-soft); }
-.process-timeline-time { padding: 9px 0; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
-.process-timeline-label { min-width: 0; padding: 8px 0 8px var(--space-2); color: var(--body); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
-.process-timeline-protocol .process-timeline-label { color: var(--muted); font-size: 11px; }
-
-.markdown-output { display: grid; gap: var(--space-3); color: var(--body); font-size: 13px; line-height: 1.65; }
-.markdown-output > :first-child { margin-top: 0; }
-.markdown-output > :last-child { margin-bottom: 0; }
-.markdown-output h1, .markdown-output h2, .markdown-output h3, .markdown-output h4 { margin: var(--space-5) 0 var(--space-2); color: var(--ink); line-height: 1.3; }
-.markdown-output h1 { font-size: 21px; }
-.markdown-output h2 { font-size: 18px; }
-.markdown-output h3 { font-size: 16px; }
-.markdown-output h4 { font-size: 14px; }
-.markdown-output p, .markdown-output blockquote, .markdown-output ul, .markdown-output ol { margin: 0; }
-.markdown-output ul, .markdown-output ol { padding-left: 22px; }
-.markdown-output blockquote { padding-left: 12px; border-left: 3px solid var(--peach); color: var(--body); }
-.markdown-output pre { margin: 0; padding: var(--space-3); overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-ink); color: #f8f7f2; font-size: 12px; line-height: 1.65; }
-.markdown-output code { padding: 1px 4px; border-radius: 3px; background: var(--surface-muted); color: var(--ink); font-size: .92em; }
-.markdown-output pre code { padding: 0; background: transparent; color: inherit; }
-.markdown-output a { color: var(--orange-active); text-decoration-color: var(--orange); text-underline-offset: 3px; }
-.markdown-output table { font-size: 12px; }
-.markdown-output th, .markdown-output td { padding: 8px 9px; }
-.markdown-output th { position: static; }
-.markdown-error { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
-.markdown-error-title { margin: 0; color: var(--red); font-size: 12px; font-weight: 700; }
-
-.run-detail-workspace { display: grid; grid-template-columns: minmax(220px, .5fr) minmax(0, 1.25fr) minmax(220px, .45fr); gap: var(--space-4); align-items: start; }
-.run-evidence { display: grid; gap: var(--space-4); min-width: 0; }
-.panel-rail { background: var(--canvas-soft); }
-.step-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
-.step-timeline li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 38px; border-bottom: 1px solid var(--hairline); }
-.step-timeline li:last-child { border-bottom: 0; }
-.step-marker { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--hairline-strong); border-radius: 50%; color: var(--muted); font-size: 10px; }
-.step-marker.succeeded { border-color: var(--green); color: var(--green); }
-.step-marker.running { border-color: var(--orange); color: var(--orange-active); }
-.step-marker.failed { border-color: var(--red); color: var(--red); }
-.step-name { min-width: 0; color: var(--body); font-size: 12px; overflow-wrap: anywhere; }
-.step-duration { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
-
-.output-block { max-height: 480px; margin: 0; padding: var(--space-4); overflow: auto; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-ink); color: #f8f7f2; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
-
-.artifact-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
-.artifact-list li { min-width: 0; }
-.artifact-list a { color: var(--body); font-size: 12px; overflow-wrap: anywhere; }
-.artifact-links { display: flex; flex-wrap: wrap; gap: 6px; }
-.muted { color: var(--muted); }
-
-.dag-run-timeline { position: relative; display: grid; gap: 0; }
-.dag-run-timeline::before { position: absolute; top: 12px; bottom: 12px; left: 10px; width: 1px; background: var(--hairline-strong); content: ""; }
-.dag-run-timeline-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: 9px 0; color: inherit; text-decoration: none; transition: background-color var(--transition-fast); }
+.dag-graph-node.selected.status-done rect {
+	stroke: var(--green);
+	fill: #f2faf5;
+}
+.dag-graph-node.status-skipped rect {
+	stroke-dasharray: 5 4;
+}
+.dag-node-label {
+	fill: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+}
+.dag-node-meta {
+	fill: var(--muted);
+	font-size: 11px;
+}
+.dag-node-status {
+	fill: var(--body);
+	font-size: 11px;
+}
+.dag-dimmed {
+	opacity: 0.28;
+}
+.dag-graph-node.status-running {
+	animation: graph-node-pulse 2s ease-in-out infinite;
+}
+@keyframes graph-node-pulse {
+	50% {
+		opacity: 0.72;
+	}
+}
+
+.dag-section-heading {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: var(--space-4);
+}
+.dag-section-heading h3 {
+	margin: 0;
+}
+.dag-section-meta {
+	color: var(--muted);
+	font-size: 12px;
+}
+#dag-nodes .dag-section-heading {
+	padding: var(--space-5) var(--space-5) 0;
+}
+#dag-nodes .dag-node-table {
+	border-top: 1px solid var(--hairline);
+}
+.dag-node-table {
+	table-layout: fixed;
+}
+.dag-node-table th:nth-child(1),
+.dag-node-table td:nth-child(1) {
+	width: 19%;
+}
+.dag-node-table th:nth-child(2),
+.dag-node-table td:nth-child(2) {
+	width: 7%;
+}
+.dag-node-table th:nth-child(3),
+.dag-node-table td:nth-child(3) {
+	width: 12%;
+}
+.dag-node-table th:nth-child(4),
+.dag-node-table td:nth-child(4) {
+	width: 16%;
+}
+.dag-node-table th:nth-child(5),
+.dag-node-table td:nth-child(5) {
+	width: 12%;
+}
+.dag-node-table th:nth-child(6),
+.dag-node-table td:nth-child(6) {
+	width: 9%;
+}
+.dag-node-table th:nth-child(7),
+.dag-node-table td:nth-child(7) {
+	width: 25%;
+}
+.dag-node-table td:nth-child(1),
+.dag-node-table td:nth-child(4),
+.dag-node-table td:nth-child(7) {
+	overflow-wrap: anywhere;
+}
+.dag-active-node {
+	background: #fff8f3;
+}
+.dag-error-node {
+	background: #fff7f8;
+}
+.dag-node-selected {
+	box-shadow: inset 3px 0 0 var(--orange);
+}
+
+.rank-lanes {
+	display: grid;
+	gap: var(--space-3);
+}
+.rank-lane {
+	display: grid;
+	grid-template-columns: 56px minmax(0, 1fr);
+	gap: var(--space-3);
+	align-items: center;
+}
+.rank-lane-label {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+}
+.rank-lane-nodes {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.rank-node-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 32px;
+	padding: 5px 8px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--canvas-soft);
+}
+.rank-node-active {
+	border-color: var(--orange);
+}
+.rank-node-error {
+	border-color: var(--red);
+}
+.rank-node-id {
+	color: var(--ink);
+	font-size: 11px;
+}
+.rank-node-dur {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.process-timeline-note {
+	margin: 0 0 var(--space-2);
+	color: var(--muted);
+	font-size: 11px;
+}
+.process-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: var(--space-2) 0;
+	list-style: none;
+}
+.process-timeline-item {
+	display: grid;
+	grid-template-columns: 20px minmax(0, 1fr);
+	align-items: stretch;
+	min-height: 34px;
+}
+.process-timeline-item.has-time {
+	grid-template-columns: 20px 92px minmax(0, 1fr);
+}
+.process-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 34px;
+}
+.process-timeline-rail::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.process-timeline-item.is-first .process-timeline-rail::before {
+	top: 50%;
+}
+.process-timeline-item.is-last .process-timeline-rail::before {
+	bottom: 50%;
+}
+.process-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 8px;
+	height: 8px;
+	border: 2px solid var(--surface);
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.process-timeline-lifecycle .process-timeline-dot {
+	background: var(--lavender);
+}
+.process-timeline-tool-start .process-timeline-dot {
+	background: var(--orange);
+}
+.process-timeline-tool-end .process-timeline-dot {
+	background: var(--green);
+}
+.process-timeline-assistant .process-timeline-dot {
+	background: var(--blue);
+}
+.process-timeline-protocol .process-timeline-dot {
+	background: var(--muted-soft);
+}
+.process-timeline-time {
+	padding: 9px 0;
+	color: var(--muted);
+	font-size: 10px;
+	font-variant-numeric: tabular-nums;
+}
+.process-timeline-label {
+	min-width: 0;
+	padding: 8px 0 8px var(--space-2);
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+.process-timeline-protocol .process-timeline-label {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.markdown-output {
+	display: grid;
+	gap: var(--space-3);
+	color: var(--body);
+	font-size: 13px;
+	line-height: 1.65;
+}
+.markdown-output > :first-child {
+	margin-top: 0;
+}
+.markdown-output > :last-child {
+	margin-bottom: 0;
+}
+.markdown-output h1,
+.markdown-output h2,
+.markdown-output h3,
+.markdown-output h4 {
+	margin: var(--space-5) 0 var(--space-2);
+	color: var(--ink);
+	line-height: 1.3;
+}
+.markdown-output h1 {
+	font-size: 21px;
+}
+.markdown-output h2 {
+	font-size: 18px;
+}
+.markdown-output h3 {
+	font-size: 16px;
+}
+.markdown-output h4 {
+	font-size: 14px;
+}
+.markdown-output p,
+.markdown-output blockquote,
+.markdown-output ul,
+.markdown-output ol {
+	margin: 0;
+}
+.markdown-output ul,
+.markdown-output ol {
+	padding-left: 22px;
+}
+.markdown-output blockquote {
+	padding-left: 12px;
+	border-left: 3px solid var(--peach);
+	color: var(--body);
+}
+.markdown-output pre {
+	margin: 0;
+	padding: var(--space-3);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.65;
+}
+.markdown-output code {
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: var(--surface-muted);
+	color: var(--ink);
+	font-size: 0.92em;
+}
+.markdown-output pre code {
+	padding: 0;
+	background: transparent;
+	color: inherit;
+}
+.markdown-output a {
+	color: var(--orange-active);
+	text-decoration-color: var(--orange);
+	text-underline-offset: 3px;
+}
+.markdown-output table {
+	font-size: 12px;
+}
+.markdown-output th,
+.markdown-output td {
+	padding: 8px 9px;
+}
+.markdown-output th {
+	position: static;
+}
+.markdown-error {
+	display: grid;
+	gap: var(--space-2);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--hairline);
+}
+.markdown-error-title {
+	margin: 0;
+	color: var(--red);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.run-layer-process {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-layer-diagnosis {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-detail-workspace {
+	display: grid;
+	grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.25fr);
+	gap: var(--space-4);
+	align-items: start;
+}
+.run-evidence {
+	display: grid;
+	gap: var(--space-4);
+	min-width: 0;
+}
+.artifact-preview-list {
+	gap: 12px;
+}
+.artifact-preview-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: baseline;
+	margin-bottom: 6px;
+}
+.artifact-preview-label {
+	font-size: 12px;
+	color: var(--muted);
+	overflow-wrap: anywhere;
+}
+.artifact-preview-body {
+	max-height: 240px;
+	overflow: auto;
+	font-size: 12px;
+}
+.artifact-preview-error {
+	color: var(--red);
+}
+.batch-task-links,
+.batch-task-evidence {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	align-items: center;
+}
+.object-link {
+	color: var(--body);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.panel-rail {
+	background: var(--canvas-soft);
+}
+.step-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.step-timeline li {
+	display: grid;
+	grid-template-columns: 18px minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 8px;
+	min-height: 38px;
+	border-bottom: 1px solid var(--hairline);
+}
+.step-timeline li:last-child {
+	border-bottom: 0;
+}
+.step-marker {
+	display: inline-grid;
+	place-items: center;
+	width: 16px;
+	height: 16px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: 50%;
+	color: var(--muted);
+	font-size: 10px;
+}
+.step-marker.succeeded {
+	border-color: var(--green);
+	color: var(--green);
+}
+.step-marker.running {
+	border-color: var(--orange);
+	color: var(--orange-active);
+}
+.step-marker.failed {
+	border-color: var(--red);
+	color: var(--red);
+}
+.step-name {
+	min-width: 0;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.step-duration {
+	color: var(--muted);
+	font-size: 11px;
+	font-variant-numeric: tabular-nums;
+}
+
+.output-block {
+	max-height: 480px;
+	margin: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.7;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.artifact-list {
+	display: grid;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.artifact-list li {
+	min-width: 0;
+}
+.artifact-list a {
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.artifact-links {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.muted {
+	color: var(--muted);
+}
+
+.dag-run-timeline {
+	position: relative;
+	display: grid;
+	gap: 0;
+}
+.dag-run-timeline::before {
+	position: absolute;
+	top: 12px;
+	bottom: 12px;
+	left: 10px;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.dag-run-timeline-item {
+	position: relative;
+	display: grid;
+	grid-template-columns: 24px minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: 9px 0;
+	color: inherit;
+	text-decoration: none;
+	transition: background-color var(--transition-fast);
+}
 .dag-run-timeline-item:hover,
-.dag-run-timeline-item:focus-visible { margin-inline: -8px; padding-inline: 8px; background: #fff8f4; outline: none; }
-.dag-run-timeline-rail { position: relative; display: grid; place-items: center; min-height: 24px; }
-.dag-run-timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--muted-soft); }
-.dag-run-timeline-dot.status-finished, .dag-run-timeline-dot.status-succeeded, .dag-run-timeline-dot.status-completed { background: var(--green); }
-.dag-run-timeline-dot.status-failed, .dag-run-timeline-dot.status-error, .dag-run-timeline-dot.status-partial_failed { background: var(--red); }
-.dag-run-timeline-dot.status-running, .dag-run-timeline-dot.status-started { background: var(--orange); }
-.dag-run-timeline-content { display: grid; gap: 3px; min-width: 0; }
-.dag-run-timeline-title { color: var(--ink); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
-.dag-run-timeline-meta { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
-.dag-run-timeline-status { padding-top: 1px; }
+.dag-run-timeline-item:focus-visible {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	background: #fff8f4;
+	outline: none;
+}
+.dag-run-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 24px;
+}
+.dag-run-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 9px;
+	height: 9px;
+	border: 2px solid var(--surface);
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.dag-run-timeline-dot.status-finished,
+.dag-run-timeline-dot.status-succeeded,
+.dag-run-timeline-dot.status-completed {
+	background: var(--green);
+}
+.dag-run-timeline-dot.status-failed,
+.dag-run-timeline-dot.status-error,
+.dag-run-timeline-dot.status-partial_failed {
+	background: var(--red);
+}
+.dag-run-timeline-dot.status-running,
+.dag-run-timeline-dot.status-started {
+	background: var(--orange);
+}
+.dag-run-timeline-content {
+	display: grid;
+	gap: 3px;
+	min-width: 0;
+}
+.dag-run-timeline-title {
+	color: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-meta {
+	color: var(--muted);
+	font-size: 11px;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-status {
+	padding-top: 1px;
+}
 
 #failures-list .row-failed td:first-child,
-#failures-list .row-blocked td:first-child { color: var(--red); font-weight: 700; }
+#failures-list .row-blocked td:first-child {
+	color: var(--red);
+	font-weight: 700;
+}
 
 @media (max-width: 1320px) {
-  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  .kpi-card:nth-child(4) { border-left: 0; }
-  .kpi-card:nth-child(n + 4) { border-top: 1px solid var(--hairline); }
-  .dashboard-workspace { grid-template-columns: 1fr; }
-  .run-detail-workspace { grid-template-columns: minmax(200px, .45fr) minmax(0, 1fr); }
-  .panel-artifacts { grid-column: 1 / -1; }
+	.kpi-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+	.kpi-card:nth-child(4) {
+		border-left: 0;
+	}
+	.kpi-card:nth-child(n + 4) {
+		border-top: 1px solid var(--hairline);
+	}
+	.dashboard-workspace {
+		grid-template-columns: 1fr;
+	}
+	.run-detail-workspace {
+		grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1fr);
+	}
+	.panel-artifacts {
+		grid-column: 1 / -1;
+	}
 }
 
 @media (max-width: 1080px) {
-  #app { width: min(100% - 32px, 1680px); }
-  .site-header { grid-template-columns: auto auto 1fr; grid-template-areas: "brand nav status" "crumb crumb crumb"; row-gap: 8px; }
-  .run-detail-workspace { grid-template-columns: 1fr; }
-  .panel-artifacts { grid-column: auto; }
+	#app {
+		width: min(100% - 32px, 1680px);
+	}
+	.site-header {
+		grid-template-columns: auto auto 1fr;
+		grid-template-areas: "brand nav status" "crumb crumb crumb";
+		row-gap: 8px;
+	}
+	.run-detail-workspace {
+		grid-template-columns: 1fr;
+	}
+	.panel-artifacts {
+		grid-column: auto;
+	}
 }
 
 @media (max-width: 720px) {
-  #app { width: min(100% - 24px, 1680px); }
-  .site-header { margin-bottom: var(--space-6); }
-  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .kpi-card:nth-child(n) { border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
-  .kpi-card:nth-child(1), .kpi-card:nth-child(2) { border-top: 0; }
-  .kpi-card:nth-child(odd) { border-left: 0; }
-  .dag-inspector { top: 76px; right: 12px; bottom: 12px; width: calc(100vw - 24px); }
-  .dag-inspector-resize-handle { display: none; }
-  .dashboard-secondary { grid-template-columns: 1fr; }
-  .risk-block { grid-template-columns: 1fr; gap: var(--space-2); }
-  .panel { padding: var(--space-4); }
-  .panel-table { overflow-x: auto; padding: 0; }
-  table { min-width: 680px; }
-  .view h2 { font-size: 24px; }
+	#app {
+		width: min(100% - 24px, 1680px);
+	}
+	.site-header {
+		margin-bottom: var(--space-6);
+	}
+	.kpi-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.kpi-card:nth-child(n) {
+		border-top: 1px solid var(--hairline);
+		border-left: 1px solid var(--hairline);
+	}
+	.kpi-card:nth-child(1),
+	.kpi-card:nth-child(2) {
+		border-top: 0;
+	}
+	.kpi-card:nth-child(odd) {
+		border-left: 0;
+	}
+	.dag-inspector {
+		top: 76px;
+		right: 12px;
+		bottom: 12px;
+		width: calc(100vw - 24px);
+	}
+	.dag-inspector-resize-handle {
+		display: none;
+	}
+	.dashboard-secondary {
+		grid-template-columns: 1fr;
+	}
+	.risk-block {
+		grid-template-columns: 1fr;
+		gap: var(--space-2);
+	}
+	.panel {
+		padding: var(--space-4);
+	}
+	.panel-table {
+		overflow-x: auto;
+		padding: 0;
+	}
+	table {
+		min-width: 680px;
+	}
+	.view h2 {
+		font-size: 24px;
+	}
+}
+
+/* R3: object relation bar + recommended commands (copy-only) */
+.object-relations-panel {
+	padding: var(--space-3) var(--space-4);
+}
+
+.object-relation-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: 0.9rem;
+}
+
+.object-relation-item {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.25rem;
+}
+
+.object-relation-label {
+	color: var(--muted, #6b6560);
+	font-weight: 600;
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.object-relation-sep {
+	color: var(--muted, #6b6560);
+	opacity: 0.7;
+	user-select: none;
+}
+
+.object-link {
+	color: var(--accent, #8a5a2b);
+	text-decoration: none;
+	word-break: break-all;
+}
+
+.object-link:hover,
+.object-link:focus-visible {
+	text-decoration: underline;
+}
+
+.recommended-command {
+	border: 1px solid var(--border, #e2ddd4);
+	border-radius: 8px;
+	padding: var(--space-3);
+	margin: var(--space-2) 0;
+	background: #fbf9f4;
+}
+
+.recommended-command-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	align-items: baseline;
+	margin-bottom: var(--space-2);
+}
+
+.recommended-command-kind {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--muted, #6b6560);
+	text-transform: uppercase;
+}
+
+.recommended-command-label {
+	font-weight: 600;
+}
+
+.recommended-command-body {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.recommended-command-text {
+	flex: 1 1 12rem;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 0.85rem;
+	word-break: break-all;
+	background: #f0ebe3;
+	padding: 0.35rem 0.5rem;
+	border-radius: 4px;
+}
+
+button.copy-command {
+	appearance: none;
+	border: 1px solid var(--border, #d4cdc2);
+	background: #fff;
+	border-radius: 6px;
+	padding: 0.35rem 0.75rem;
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+button.copy-command:hover,
+button.copy-command:focus-visible {
+	border-color: var(--accent, #8a5a2b);
+}
+
+.executed-facts {
+	border-left: 3px solid #6b8f71;
+}
+
+.advisory-note {
+	margin: 0 0 var(--space-2);
+	font-size: 0.85rem;
+}
+
+.blocking-list {
+	margin: 0;
+	padding-left: 1.25rem;
+}
+
+.blocking-message {
+	font-weight: 500;
+}
+
+.blocking-meta {
+	font-size: 0.85rem;
+	color: var(--muted, #6b6560);
+	margin: 0.15rem 0 0.35rem;
+}
+
+
+
+/* R5: unified view states + information hierarchy */
+.view-state {
+	border-radius: var(--radius, 8px);
+	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.view-state-loading {
+	border: 1px dashed var(--border, #e2dcd4);
+	background: var(--surface-muted, #f7f4ef);
+	color: var(--muted, #6b6560);
+}
+.view-state-empty {
+	border: 1px solid var(--border, #e2dcd4);
+	background: var(--surface, #fffdf9);
+}
+.view-state-degraded {
+	/* projection-fault styles also apply */
+}
+.view-state-error {
+	border: 1px solid var(--danger-border, #e8b4b4);
+	background: var(--danger-bg, #fdf2f2);
+	color: var(--danger-text, #8a2f2f);
+}
+.view-state-error p {
+	margin: 0;
+}
+.layer-primary {
+	/* main facts */
+}
+.layer-diagnostic {
+	opacity: 0.98;
+}
+.layer-raw {
+	font-size: 0.9rem;
+	color: var(--muted, #6b6560);
+}
+.pool-filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 0.75rem;
+	align-items: center;
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.pool-filters label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.9rem;
+}
+.pool-filters select,
+.pool-filters input[type="search"] {
+	font: inherit;
+	padding: 0.25rem 0.5rem;
+	border: 1px solid var(--border, #e2dcd4);
+	border-radius: 6px;
+	background: var(--surface, #fff);
+	min-height: 2rem;
+}
+.pool-filters select:focus-visible,
+.pool-filters input[type="search"]:focus-visible {
+	outline: 2px solid var(--focus, #3d6bf3);
+	outline-offset: 2px;
+}
+
+@media (max-width: 1024px) {
+	.pool-filters {
+		flex-direction: column;
+		align-items: stretch;
+	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: .01ms !important;
-  }
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+		transition-duration: 0.01ms !important;
+	}
 }