@worca/ui 0.38.0 → 0.41.0

package/app/styles.css

@@ -10,6 +10,16 @@
   --bg: #ffffff;
   --bg-secondary: #f8fafc;
   --bg-tertiary: #f1f5f9;
+  /* Card / panel surface. `--surface` was used in several places
+   * (`.run-card`, sidebar widgets, settings cards) without ever
+   * being defined, so it silently resolved to `unset` → no
+   * background. That was invisible while the page background and
+   * cards were both white, but the moment a parent panel tinted
+   * itself gray (e.g. `.pipelines-tier-section` → `--bg-secondary`)
+   * the cards turned transparent. Alias it to `--bg` so cards
+   * always render on a white (light) / dark-slate (dark) surface
+   * regardless of what's behind them. */
+  --surface: var(--bg);
   --border: #e2e8f0;
   --border-subtle: rgba(226, 232, 240, 0.6);
   --muted: #94a3b8;
@@ -145,15 +155,50 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .sidebar.collapsed .sidebar-section-header,
-.sidebar.collapsed .sidebar-item span,
+/* `.sidebar-item-left > span` targets only label spans — the outer
+   `.sidebar-item-left` is itself a span and would have been swept up
+   by the broader `.sidebar-item span` selector, hiding the icon too. */
+.sidebar.collapsed .sidebar-item-left > span,
 .sidebar.collapsed .conn-label,
-.sidebar.collapsed .logo-text {
+.sidebar.collapsed .logo-text,
+.sidebar.collapsed .sidebar-project-section,
+.sidebar.collapsed .sidebar-new-run-chevron-dropdown {
   display: none;
 }
 
+/* In the collapsed rail, nav items become icon-only — center them so they
+   sit under the toggle button rather than floating against the left edge. */
+.sidebar.collapsed .sidebar-item {
+  justify-content: center;
+  margin: 2px 6px;
+  padding: 8px 6px;
+}
+.sidebar.collapsed .sidebar-item-left {
+  gap: 0;
+}
+.sidebar.collapsed .sidebar-new-run {
+  padding: 4px 6px;
+}
+.sidebar.collapsed .sidebar-new-run-split {
+  width: auto;
+}
+.sidebar.collapsed .sidebar-footer {
+  justify-content: center;
+  padding: 12px 6px;
+}
+
 .sidebar-logo {
-  padding: 20px 16px 12px;
+  padding: 16px 12px 12px 16px;
   border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sidebar.collapsed .sidebar-logo {
+  justify-content: center;
+  padding: 16px 6px 12px;
 }
 
 .logo-text {
@@ -164,6 +209,35 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--fg);
 }
 
+.sidebar-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.sidebar-toggle-btn:hover {
+  background: var(--border);
+  color: var(--fg);
+}
+
+.sidebar-toggle-btn:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+}
+
 /* --- 6. Sidebar Sections --- */
 .sidebar-section {
   padding: 8px 0;
@@ -400,529 +474,1072 @@ h1, h2, h3, h4, h5, h6 {
   color: #ffffff;
 }
 
+.action-btn--ghost {
+  border-color: transparent;
+  color: var(--text-muted);
+}
+
+.action-btn--ghost:hover {
+  border-color: var(--border);
+  color: var(--text);
+}
+
 .action-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.action-btn:disabled:hover {
-  background: var(--bg-secondary);
-  color: inherit;
-}
-
-.error-dialog-body {
+.run-stage-actions {
   display: flex;
   align-items: center;
-  gap: 16px;
-  padding: 8px 0;
-}
-.error-dialog-body p {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.5;
-}
-.error-dialog-icon {
-  color: var(--status-error);
-  flex-shrink: 0;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 0 0 4px;
+  flex-wrap: wrap;
 }
 
-/* --- 10. Run Header --- */
-.run-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 16px 0;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--border-subtle);
+/* --- Run Timeline ---
+   Local tokens layered on the global palette. --text-strong gives a
+   WCAG-AA-safe muted color for labels (4.5:1 on white at 12-13px), avoiding
+   the very pale --muted (#94a3b8). All other colors route through brand vars
+   so dark mode and theme tweaks land for free. */
+.run-timeline {
+  --tl-text-strong: #475569;
+  --tl-row-alt-bg: rgba(15, 23, 42, 0.04);
+  --tl-row-divider: rgba(15, 23, 42, 0.08);
+  --tl-grid-line: rgba(15, 23, 42, 0.05);
+  --tl-axis-line: rgba(15, 23, 42, 0.18);
+  --tl-axis-tick: rgba(15, 23, 42, 0.28);
+  --tl-axis-label: rgba(15, 23, 42, 0.62);
+  --tl-row-label: rgba(15, 23, 42, 0.78);
+  --tl-row-label-count: rgba(15, 23, 42, 0.45);
+  --tl-loopback-default-opacity: 0.7;
+  --tl-loopback-hint: rgba(15, 23, 42, 0.4);
+  --tl-bar-stroke: rgba(15, 23, 42, 0.22);
+  --tl-bar-shadow: rgba(15, 23, 42, 0.22);
+  --timeline-gap-fill: rgba(15, 23, 42, 0.04);
+  --timeline-gap-dot: rgba(15, 23, 42, 0.32);
+
+  padding: 16px 20px 24px;
+  background: var(--bg, #fff);
+  border: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
+  border-radius: 10px;
+  overflow-x: auto;
+  position: relative;
 }
 
-.run-header-left {
+/* worca-ui drives dark mode via [data-theme="dark"] on the html element,
+   not via prefers-color-scheme. Both selectors here so the timeline tokens
+   flip with the rest of the chrome. */
+[data-theme="dark"] .run-timeline,
+.run-timeline[data-theme="dark"] {
+  --tl-text-strong: #cbd5e1;
+  --tl-row-alt-bg: rgba(255, 255, 255, 0.04);
+  --tl-row-divider: rgba(255, 255, 255, 0.1);
+  --tl-grid-line: rgba(255, 255, 255, 0.07);
+  --tl-axis-line: rgba(255, 255, 255, 0.22);
+  --tl-axis-tick: rgba(255, 255, 255, 0.35);
+  --tl-axis-label: rgba(255, 255, 255, 0.7);
+  --tl-row-label: rgba(255, 255, 255, 0.9);
+  --tl-row-label-count: rgba(255, 255, 255, 0.55);
+  --tl-loopback-hint: rgba(255, 255, 255, 0.5);
+  --tl-bar-stroke: rgba(255, 255, 255, 0.32);
+  --tl-bar-shadow: rgba(0, 0, 0, 0.45);
+  --timeline-gap-fill: rgba(255, 255, 255, 0.06);
+  --timeline-gap-dot: rgba(255, 255, 255, 0.4);
+}
+
+/* Top stats summary */
+.timeline-summary {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  /* Right-padding reserves space for the absolutely-positioned .timeline-toolbar
+     anchored at top:16px / right:20px so the stats never run under the buttons. */
+  padding: 4px 260px 16px 0;
+  flex-wrap: wrap;
+}
+.summary-stat {
   display: flex;
-  align-items: center;
-  gap: 12px;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 64px;
 }
-
-.run-title {
-  font-size: 22px;
+.summary-stat-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--tl-text-strong);
+  font-weight: 500;
+}
+.summary-stat-value {
+  font-size: 18px;
   font-weight: 600;
-  color: var(--fg);
-  letter-spacing: -0.01em;
+  color: var(--fg, #0f172a);
+  font-variant-numeric: tabular-nums;
+}
+.summary-spacer {
+  flex: 1;
 }
 
-.run-header-right {
+/* Toolbar — anchored to the top-right corner of the timeline box.
+   Stacks the zoom button group above the keyboard-hint text, both right-aligned. */
+.timeline-toolbar {
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  z-index: 2;
   display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+.timeline-toolbar-group {
+  display: inline-flex;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--bg, #fff);
+}
+.timeline-zoom-btn {
+  display: inline-flex;
   align-items: center;
-  gap: 16px;
+  justify-content: center;
+  min-width: 30px;
+  height: 28px;
+  padding: 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--tl-text-strong);
+  cursor: pointer;
+  user-select: none;
+  border-right: 1px solid var(--border, #e2e8f0);
+}
+.timeline-zoom-btn:last-child {
+  border-right: none;
+}
+.timeline-zoom-btn:hover {
+  background: var(--bg-secondary, #f8fafc);
+  color: var(--fg, #0f172a);
+}
+.timeline-zoom-btn:active {
+  background: var(--bg-tertiary, #f1f5f9);
+}
+.timeline-zoom-btn:focus-visible {
+  outline: 2px solid var(--accent, #3b82f6);
+  outline-offset: -2px;
+  z-index: 1;
+}
+.timeline-toolbar-hint {
+  font-size: 11px;
+  color: var(--tl-text-strong);
+  text-align: right;
 }
 
-.run-meta {
-  font-size: 13px;
-  color: var(--muted);
+/* SVG wrapper */
+.timeline-svg-wrap {
+  position: relative;
+  overflow: visible;
 }
 
-.meta-label {
-  font-weight: 500;
-  color: var(--fg);
-  opacity: 0.7;
+/* Row backgrounds */
+.row-bg-alt {
+  fill: var(--tl-row-alt-bg);
+}
+.row-divider {
+  stroke: var(--tl-row-divider);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+.grid-line {
+  stroke: var(--tl-grid-line);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
 
-.meta-value {
+/* Row labels — match the uppercase tracking used by .pipeline-stage-name so
+   timeline rows read like the stage section headers elsewhere in the UI. */
+.row-label {
+  font-size: 12px;
   font-weight: 600;
-  color: var(--fg);
+  fill: var(--tl-row-label);
+  font-family: var(--sl-font-sans, system-ui, sans-serif);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
-
-.run-pr-link {
-  color: var(--accent);
-  text-decoration: none;
+.row-label-count {
+  font-size: 11px;
   font-weight: 500;
+  fill: var(--tl-row-label-count);
+  text-transform: none;
+  letter-spacing: 0;
 }
-
-.run-pr-link:hover {
-  text-decoration: underline;
+.loopback-hint {
+  font-size: 10px;
+  fill: var(--tl-loopback-hint);
+  pointer-events: none;
 }
 
-.run-meta-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 16px;
-  background: var(--bg-hover);
-  border-radius: var(--radius-md);
-  margin-bottom: 8px;
-  font-size: 13px;
-  color: var(--muted);
-  font-variant-numeric: tabular-nums;
+/* Bars
+   Default: thin contrasting hairline stroke so bar edges read clearly without
+   any per-bar divider. Hover/active: lift via translateY + drop-shadow so the
+   bar "raises" off the chart. Active state persists while the iteration drawer
+   is open (driven by the .is-active class). Reduced-motion drops the lift. */
+.timeline-bar {
+  cursor: pointer;
+  stroke: var(--tl-bar-stroke);
+  stroke-width: 1;
+  transition:
+    filter 130ms ease,
+    transform 130ms ease,
+    stroke-width 130ms ease;
+  /* SVG rect transforms relative to the SVG viewport origin, not the rect
+     itself — fine for translateY since we want a small vertical lift. */
+}
+.timeline-bar:hover,
+.timeline-bar.is-active {
+  filter: drop-shadow(0 3px 6px var(--tl-bar-shadow));
+  transform: translateY(-1px);
+  stroke-width: 1.25;
 }
-
-.run-meta-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 20px;
+.timeline-bar:focus-visible {
+  /* Subtle keyboard-focus indicator — no bold ring. The raised+shadow state
+     above also kicks in on focus via :focus-visible :is() below. */
+  outline: 1.5px dashed var(--accent, #3b82f6);
+  outline-offset: 2px;
 }
-
-.timing-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 20px;
-  font-size: 13px;
-  color: var(--muted);
+.timeline-bar:focus-visible {
+  filter: drop-shadow(0 3px 6px var(--tl-bar-shadow));
+  transform: translateY(-1px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .timeline-bar,
+  .timeline-bar:hover,
+  .timeline-bar.is-active,
+  .timeline-bar:focus-visible {
+    transform: none;
+  }
+}
+.bar-label {
+  font-size: 10px;
+  font-weight: 600;
+  fill: #fff;
+  font-family: var(--sl-font-sans, system-ui, sans-serif);
   font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
 }
 
-.timing-strip-item {
-  white-space: nowrap;
+/* Gaps */
+.timeline-gap {
+  cursor: default;
 }
-
-.run-card .timing-strip {
-  font-size: 12px;
-  gap: 6px 16px;
-  padding-left: 26px;
+.timeline-gap:focus-visible {
+  outline: 2px solid var(--accent, #3b82f6);
+  outline-offset: 1px;
 }
-
-.stage-detail .timing-strip {
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border);
+.gap-bg {
+  fill: var(--timeline-gap-fill);
 }
-
-.run-info-section {
-  padding: 12px 16px;
-  background: var(--bg-hover);
-  border-radius: var(--radius-md);
-  margin-bottom: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.gap-dot {
+  fill: var(--timeline-gap-dot);
 }
 
-/* Project / Branch / Pipeline-Template / Worktree rows inside
-   `.run-info-section` all share the same label-value typography so the
-   block reads as a uniform stack. Mirror .run-group below it. */
-.run-project,
-.run-branch,
-.run-template,
-.run-worktree {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
+/* Loopbacks */
+.loopback {
+  stroke-opacity: var(--tl-loopback-default-opacity);
+  transition: stroke-opacity 120ms ease, stroke-width 120ms ease;
 }
-
-.pipeline-cost-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 20px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fg);
+.loopback.highlight {
+  stroke-opacity: 1;
+  stroke-width: 2.5;
 }
 
-/* Pipeline timing bar */
-.pipeline-timing-bar-container {
-  margin-top: 8px;
+/* Time axis */
+.axis-baseline {
+  stroke: var(--tl-axis-line);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
-
-.pipeline-timing-bar-label {
-  font-size: 13px;
-  font-weight: 600;
-  margin-bottom: 4px;
+.axis-tick {
+  stroke: var(--tl-axis-tick);
+  stroke-width: 1;
+  shape-rendering: crispEdges;
 }
-
-.pipeline-timing-bar {
-  display: flex;
-  height: 22px;
-  border-radius: 6px;
-  overflow: hidden;
-  background: var(--surface);
+.axis-label {
+  font-size: 11px;
+  fill: var(--tl-axis-label);
+  font-family: var(--sl-font-sans, system-ui, sans-serif);
+  font-variant-numeric: tabular-nums;
 }
 
-.timing-bar-segment {
+/* Legend */
+.timeline-legend {
   display: flex;
   align-items: center;
-  justify-content: center;
-  min-width: 0;
-  transition: opacity 0.15s;
-  cursor: default;
-}
-
-.timing-bar-segment:hover {
-  opacity: 0.85;
+  gap: 18px;
+  padding: 14px 0 4px;
+  margin-top: 8px;
+  border-top: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
+  flex-wrap: wrap;
 }
-
-.timing-bar-thinking {
-  background: var(--status-blocked, #f59e0b);
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--tl-text-strong);
 }
-
-.timing-bar-tools {
-  background: var(--status-in-progress, #3b82f6);
+.legend-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  background: var(--muted);
 }
-
-.timing-bar-rest {
-  background: var(--muted, #94a3b8);
-  opacity: 0.4;
+.legend-swatch--gap {
+  background:
+    radial-gradient(circle, var(--timeline-gap-dot) 0.6px, transparent 1.2px),
+    var(--timeline-gap-fill);
+  background-size: 5px 5px;
+  border: 1px solid var(--tl-row-divider);
 }
-
-.timing-bar-segment-text {
-  font-size: 11px;
-  font-weight: 600;
-  color: #fff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 6px;
-  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+.legend-loopback {
+  /* Inline SVG arc + chevron; inherits color from the legend-item color, so
+     it tracks the rest of the legend chrome in both themes. */
+  color: var(--accent, #3b82f6);
+  flex-shrink: 0;
 }
 
-.pipeline-timing-bar-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-  margin-top: 6px;
+/* Tooltip */
+.timeline-tooltip {
+  position: fixed;
+  z-index: 1000;
+  background: var(--bg, #fff);
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 8px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
+  padding: 10px 12px;
+  pointer-events: none;
+  min-width: 200px;
+  max-width: 280px;
   font-size: 12px;
+  line-height: 1.55;
+  color: var(--fg, #0f172a);
 }
-
-.timing-bar-legend-item {
+.tooltip-header {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+  font-weight: 600;
+  margin-bottom: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
 }
-
-.timing-bar-legend-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+.tooltip-hue-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-
-.timing-bar-legend-label {
-  color: var(--fg);
+.tooltip-header-sub {
+  font-weight: 400;
+  color: var(--tl-text-strong);
+  font-size: 11px;
+}
+.tooltip-bead-sub {
+  font-size: 11px;
+  color: var(--tl-text-strong);
+  margin-top: -2px;
+  margin-bottom: 4px;
+  line-height: 1.35;
+}
+.tooltip-bead-id {
+  font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 10.5px;
+  background: var(--tl-row-alt, rgba(148, 163, 184, 0.12));
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+}
+.tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+}
+.tooltip-label {
+  color: var(--tl-text-strong);
   font-weight: 500;
 }
-
-.timing-bar-legend-value {
-  color: var(--muted);
+.tooltip-value {
+  font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-variant-numeric: tabular-nums;
+  color: var(--fg, #0f172a);
+}
+.tooltip-status {
+  text-transform: capitalize;
 }
+.tooltip-status.status-completed { color: var(--status-completed); }
+.tooltip-status.status-running, .tooltip-status.status-in_progress { color: var(--status-running); }
+.tooltip-status.status-failed { color: var(--status-failed); }
+.tooltip-status.status-paused { color: var(--status-paused); }
+.tooltip-status.status-interrupted { color: var(--status-interrupted); }
 
-.stage-totals-strip {
+/* --- Iteration drawer --- */
+.iteration-drawer::part(panel) {
+  width: 420px;
+  max-width: 90vw;
+}
+.iteration-drawer::part(header) {
+  border-bottom: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
+}
+.drawer-body {
   display: flex;
-  gap: 20px;
-  padding: 6px 0 2px;
+  flex-direction: column;
+  gap: 14px;
   font-size: 13px;
+  color: var(--fg, #0f172a);
+}
+.drawer-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 4px;
+  font-size: 16px;
   font-weight: 600;
-  color: var(--fg);
+  color: var(--fg, #0f172a);
+  outline: none;
 }
-
-.stage-totals-item {
+.drawer-hue-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.drawer-title-sub {
+  font-weight: 400;
+  color: var(--tl-text-strong);
+  font-size: 13px;
+}
+.drawer-status-row {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: var(--bg-secondary, #f8fafc);
+  align-self: flex-start;
 }
-
-.stage-info-strip {
+.drawer-status-pill {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.drawer-status-text {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+.drawer-status-text.status-completed { color: var(--status-completed); }
+.drawer-status-text.status-running, .drawer-status-text.status-in_progress { color: var(--status-running); }
+.drawer-status-text.status-failed { color: var(--status-failed); }
+.drawer-fields {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 18px;
+  margin: 0;
+}
+.drawer-label {
+  color: var(--tl-text-strong);
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  align-self: center;
+}
+.drawer-value {
+  margin: 0;
+  font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-variant-numeric: tabular-nums;
+  color: var(--fg, #0f172a);
+}
+.drawer-bead {
+  font-family: inherit;
   display: flex;
+  align-items: baseline;
+  gap: 6px;
   flex-wrap: wrap;
-  gap: 4px 20px;
+}
+.drawer-bead-id {
+  font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  background: var(--tl-row-alt, rgba(148, 163, 184, 0.12));
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.drawer-raw-json {
+  margin-top: 4px;
+}
+.drawer-raw-json summary {
+  cursor: pointer;
+  color: var(--tl-text-strong);
+  font-size: 12px;
+  user-select: none;
+}
+.drawer-raw-json pre {
+  font-size: 11px;
+  font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 6px;
+  padding: 10px;
+  overflow-x: auto;
+  white-space: pre;
+  margin-top: 6px;
+  max-height: 280px;
+}
+.drawer-run-detail-link {
+  color: var(--accent, #3b82f6);
+  text-decoration: none;
   font-size: 13px;
-  color: var(--muted);
-  padding: 4px 0;
+  font-weight: 500;
 }
-
-.stage-info-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
+.drawer-run-detail-link:hover {
+  text-decoration: underline;
 }
 
-.text-muted {
-  color: var(--muted);
-  opacity: 0.7;
+@media (prefers-reduced-motion: reduce) {
+  .timeline-bar,
+  .loopback {
+    transition: none;
+  }
 }
 
-.iteration-detail .timing-strip {
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border);
+.action-btn:disabled:hover {
+  background: var(--bg-secondary);
+  color: inherit;
 }
 
-/* --- 11. Stage Timeline --- */
-.stage-timeline {
+.error-dialog-body {
   display: flex;
   align-items: center;
-  justify-content: safe center;
-  padding: 28px 16px;
-  gap: 0;
-  overflow-x: auto;
+  gap: 16px;
+  padding: 8px 0;
+}
+.error-dialog-body p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.error-dialog-icon {
+  color: var(--status-error);
+  flex-shrink: 0;
 }
 
-.stage-node {
+/* --- 10. Run Header --- */
+.run-header {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-  min-width: 90px;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 16px 0;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-.stage-icon {
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
+.run-header-left {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  border: 3px solid var(--border);
-  background: var(--bg);
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+  gap: 12px;
 }
 
-.stage-icon svg {
-  width: 22px;
-  height: 22px;
+.run-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--fg);
+  letter-spacing: -0.01em;
 }
 
-.stage-node.status-pending .stage-icon {
-  border-color: var(--status-pending);
+.run-header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
-.stage-node.status-in-progress .stage-icon {
-  border-color: var(--status-in-progress);
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+.run-meta {
+  font-size: 13px;
+  color: var(--muted);
 }
 
-.stage-node.status-completed .stage-icon {
-  border-color: var(--status-completed);
-  background: var(--status-completed);
-  color: #ffffff;
-  transform: scale(1.05);
+.meta-label {
+  font-weight: 500;
+  color: var(--fg);
+  opacity: 0.7;
 }
 
-.stage-node.status-error .stage-icon {
-  border-color: var(--status-error);
-  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
+.meta-value {
+  font-weight: 600;
+  color: var(--fg);
 }
 
-.stage-node.status-interrupted .stage-icon {
-  border-color: var(--status-interrupted);
+.run-pr-link {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
 }
 
-.stage-label {
-  font-size: 11px;
-  font-weight: 500;
+.run-pr-link:hover {
+  text-decoration: underline;
+}
+
+.run-meta-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--bg-hover);
+  border-radius: var(--radius-md);
+  margin-bottom: 8px;
+  font-size: 13px;
   color: var(--muted);
-  text-align: center;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
 }
 
-/* --- 12. Spin Animation --- */
-.icon-spin {
-  animation: icon-spin 1.5s linear infinite;
+.run-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
 }
 
-@keyframes icon-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.timing-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+  font-size: 13px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
 }
 
-.effort-zap-icon {
-  width: 12px;
-  height: 12px;
-  vertical-align: -1px;
-  margin-right: 2px;
+.timing-strip-item {
+  white-space: nowrap;
 }
 
-/* --- 13. Stage Connector --- */
-.stage-connector {
-  width: 36px;
-  height: 4px;
-  background: var(--border);
-  border-radius: 2px;
-  flex-shrink: 0;
-  align-self: center;
-  margin-bottom: 24px;
-  transition: background var(--transition-fast);
+.run-card .timing-strip {
+  font-size: 12px;
+  gap: 6px 16px;
+  padding-left: 26px;
 }
 
-.stage-connector.completed {
-  background: var(--status-completed);
+.stage-detail .timing-strip {
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
 }
 
-/* --- 13b. Prompt Panel --- */
-.run-prompt-panel {
-  margin-bottom: 16px;
+.run-info-section {
+  padding: 12px 16px;
+  background: var(--bg-hover);
+  border-radius: var(--radius-md);
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.run-prompt-summary {
+/* Project / Branch / Pipeline-Template / Worktree rows inside
+   `.run-info-section` all share the same label-value typography so the
+   block reads as a uniform stack. Mirror .run-group below it. */
+.run-project,
+.run-branch,
+.run-template,
+.run-worktree {
+  display: flex;
+  align-items: center;
+  gap: 6px;
   font-size: 13px;
-  font-weight: 500;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
-.run-prompt-body {
+.pipeline-cost-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
   font-size: 13px;
+  font-weight: 600;
   color: var(--fg);
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 8px 0;
 }
 
-/* --- 14. Stage Detail & Panel --- */
-.stage-panels {
+/* Pipeline timing bar */
+.pipeline-timing-bar-actions {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 16px;
+  justify-content: flex-end;
+  margin-bottom: 8px;
 }
 
-sl-details.stage-panel {
-  --border-color: var(--border-subtle);
-  --border-radius: var(--radius-lg);
+.pipeline-timing-bar-container {
+  margin-top: 8px;
 }
 
-sl-details.stage-panel::part(base) {
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  background: var(--bg-secondary);
-  box-shadow: var(--shadow-sm);
+.pipeline-timing-bar-label {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
 }
 
-sl-details.stage-panel::part(header) {
-  padding: 12px 16px;
+.pipeline-timing-bar {
+  display: flex;
+  height: 22px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--surface);
 }
 
-sl-details.stage-panel::part(content) {
-  padding: 0 16px 16px;
+.timing-bar-segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  transition: opacity 0.15s;
+  cursor: default;
 }
 
-.stage-content-wrapper {
-  position: relative;
+.timing-bar-segment:hover {
+  opacity: 0.85;
 }
 
-.stage-copy-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  font-size: 11px;
-  font-family: inherit;
-  color: var(--fg-muted);
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: color 0.15s, border-color 0.15s;
-  z-index: 1;
+.timing-bar-thinking {
+  background: var(--status-blocked, #f59e0b);
 }
 
-.stage-copy-btn:hover {
-  color: var(--fg);
-  border-color: var(--fg-muted);
+.timing-bar-tools {
+  background: var(--status-in-progress, #3b82f6);
 }
 
-.stage-copy-btn svg {
-  flex-shrink: 0;
+.timing-bar-rest {
+  background: var(--muted, #94a3b8);
+  opacity: 0.4;
 }
 
-.stage-panel-header {
+.timing-bar-segment-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 6px;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+
+.pipeline-timing-bar-legend {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin-top: 6px;
+  font-size: 12px;
 }
 
-.stage-panel-icon {
+.timing-bar-legend-item {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
 
-.stage-panel-icon svg {
-  width: 16px;
-  height: 16px;
+.timing-bar-legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
 }
 
-.stage-panel-label {
+.timing-bar-legend-label {
+  color: var(--fg);
   font-weight: 500;
-  font-size: 14px;
 }
 
-.stage-panel-meta {
-  display: flex;
-  gap: 12px;
-  margin-left: auto;
-  margin-right: 8px;
-  font-size: 12px;
+.timing-bar-legend-value {
   color: var(--muted);
-  font-variant-numeric: tabular-nums;
 }
 
-.stage-meta-item {
+.stage-totals-strip {
+  display: flex;
+  gap: 20px;
+  padding: 6px 0 2px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.stage-totals-item {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  white-space: nowrap;
 }
 
-.stage-meta-icon {
+.stage-info-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+  font-size: 13px;
+  color: var(--muted);
+  padding: 4px 0;
+}
+
+.stage-info-item {
   display: inline-flex;
-  opacity: 0.6;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
 }
 
-.stage-meta-iteration {
-  color: var(--status-in-progress);
-  font-weight: 600;
+.text-muted {
+  color: var(--muted);
+  opacity: 0.7;
 }
 
-.stage-detail {
+.iteration-detail .timing-strip {
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* --- 11. Stage Timeline --- */
+.stage-timeline {
+  display: flex;
+  align-items: center;
+  justify-content: safe center;
+  padding: 28px 16px;
+  gap: 0;
+  overflow-x: auto;
+}
+
+.stage-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  min-width: 90px;
+}
+
+.stage-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  border: 3px solid var(--border);
+  background: var(--bg);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+.stage-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.stage-node.status-pending .stage-icon {
+  border-color: var(--status-pending);
+}
+
+.stage-node.status-in-progress .stage-icon {
+  border-color: var(--status-in-progress);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+.stage-node.status-completed .stage-icon {
+  border-color: var(--status-completed);
+  background: var(--status-completed);
+  color: #ffffff;
+  transform: scale(1.05);
+}
+
+.stage-node.status-error .stage-icon {
+  border-color: var(--status-error);
+  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
+}
+
+.stage-node.status-interrupted .stage-icon {
+  border-color: var(--status-interrupted);
+}
+
+.stage-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+  text-align: center;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* --- 12. Spin Animation --- */
+.icon-spin {
+  animation: icon-spin 1.5s linear infinite;
+}
+
+@keyframes icon-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.effort-zap-icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: -1px;
+  margin-right: 2px;
+}
+
+/* --- 13. Stage Connector --- */
+.stage-connector {
+  width: 36px;
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  flex-shrink: 0;
+  align-self: center;
+  margin-bottom: 24px;
+  transition: background var(--transition-fast);
+}
+
+.stage-connector.completed {
+  background: var(--status-completed);
+}
+
+/* --- 13b. Prompt Panel --- */
+.run-prompt-panel {
+  margin-bottom: 16px;
+}
+
+.run-prompt-summary {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.run-prompt-body {
+  font-size: 13px;
+  color: var(--fg);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+/* --- 14. Stage Detail & Panel --- */
+.stage-panels {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+sl-details.stage-panel {
+  --border-color: var(--border-subtle);
+  --border-radius: var(--radius-lg);
+}
+
+sl-details.stage-panel::part(base) {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+sl-details.stage-panel::part(header) {
+  padding: 12px 16px;
+}
+
+sl-details.stage-panel::part(content) {
+  padding: 0 16px 16px;
+}
+
+.stage-content-wrapper {
+  position: relative;
+}
+
+.stage-copy-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--fg-muted);
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  z-index: 1;
+}
+
+.stage-copy-btn:hover {
+  color: var(--fg);
+  border-color: var(--fg-muted);
+}
+
+.stage-copy-btn svg {
+  flex-shrink: 0;
+}
+
+.stage-panel-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.stage-panel-icon {
+  display: flex;
+  align-items: center;
+}
+
+.stage-panel-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.stage-panel-label {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.stage-panel-meta {
+  display: flex;
+  gap: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+  font-size: 12px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.stage-meta-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.stage-meta-icon {
+  display: inline-flex;
+  opacity: 0.6;
+}
+
+.stage-meta-iteration {
+  color: var(--status-in-progress);
+  font-weight: 600;
+}
+
+.stage-detail {
   padding: 4px 0;
 }
 
@@ -2942,7 +3559,18 @@ sl-option.template-grouped::part(label) {
   font-weight: 500;
 }
 
-/* Description wraps below name, aligned with label */
+/* Description wraps below name, aligned with the label's left edge.
+ * Shoelace renders the option as `[checked-icon] [prefix] [label] [suffix]`
+ * on a single flex row. With `flex-wrap: wrap`, the suffix lands on
+ * a new line — but at the parent's left edge, NOT under the label.
+ * We push it back so "ID: foo" sits directly under "Foo" instead of
+ * indented to the prefix slot. Shoelace's prefix slot is ~24px wide
+ * by default; we use the same offset as the label's apparent x.
+ *
+ * The 14px is empirical: 24px ::part(base) padding-left minus the
+ * ~10px the prefix slot is currently empty (no checkmark on
+ * non-selected items). Adjust if Shoelace changes its inner spacing.
+ */
 sl-option.template-grouped::part(suffix) {
   flex-basis: 100%;
   font-size: 11px;
@@ -2951,7 +3579,7 @@ sl-option.template-grouped::part(suffix) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: 0 0 4px;
+  padding: 0 0 4px 14px;
 }
 
 /* Fix contrast on selected/current option description */
@@ -3112,6 +3740,9 @@ sl-option.template-grouped:focus::part(suffix) {
 
 .sidebar.collapsed .sidebar-new-run-btn-primary {
   padding: 8px;
+  /* Chevron half is hidden — drop the divider so the button reads as a
+     single icon control, not a button with a stray edge. */
+  border-right: 0;
 }
 
 /* Stage restart button */
@@ -5962,780 +6593,2091 @@ sl-tooltip.bead-tooltip::part(body) {
   font-size: 22px;
   font-weight: 600;
   color: var(--fg);
-  font-variant-numeric: tabular-nums;
+  font-variant-numeric: tabular-nums;
+}
+
+.fleet-circuit-breaker-alert,
+.fleet-user-halt-alert {
+  display: block;
+}
+
+.fleet-circuit-breaker-alert .cb-trip-reason,
+.fleet-circuit-breaker-alert .cb-unstarted-count {
+  display: block;
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--fg);
+  opacity: 0.85;
+}
+
+.fleet-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+/* Run-detail "Fleet:" / "Workspace:" group line above the Branch row.
+   Mirrors .run-branch exactly: same font-size, gap, and value weight.
+   The only visual difference is the accent-colored anchor + underline-
+   on-hover affordance signalling it's clickable. */
+.run-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.run-group-link {
+  /* Inherits font-family + font-size from .run-group → matches the plain
+     <span class="meta-value"> on the Branch line, just colored and
+     underlined-on-hover to read as a link. */
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.run-group-link:hover {
+  text-decoration: underline;
+}
+
+/* Run-card "Fleet:" / "Workspace:" meta-item — sized by parent
+   .run-card-meta (12px). Same coloring as .run-group-link but no
+   monospace. */
+.run-card-group-link {
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: none;
+  word-break: break-all;
+}
+
+.run-card-group-link:hover {
+  text-decoration: underline;
+}
+
+/* Sidebar fleet-header clickable feedback */
+.fleet-header-clickable {
+  transition: background-color var(--transition-fast);
+}
+
+.fleet-header-clickable:hover {
+  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
+}
+
+/* Fleet list view (route: /#/fleet-runs) — one `fleet-card` per fleet.
+   No wrapping border / shared background; each card carries its own
+   chrome plus the layered stack-of-cards shadow. Gap matches the
+   gap between pipeline cards in run-list for visual consistency. */
+.fleet-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.fleet-list-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  transition: background-color var(--transition-fast);
+}
+
+.fleet-list-row:last-child {
+  border-bottom: none;
+}
+
+.fleet-list-row:hover {
+  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
+}
+
+.fleet-list-row-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fleet-list-row-badge {
+  flex-shrink: 0;
+}
+
+.fleet-list-row-meta {
+  font-size: 12px;
+  color: var(--muted);
+  flex-shrink: 0;
+}
+
+.fleet-list-row-id {
+  font-family: var(--sl-font-mono);
+  font-size: 11.5px;
+  color: var(--muted);
+  background: var(--bg-tertiary);
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.fleet-list-loading,
+.fleet-list-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--muted);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.fleet-detail-empty {
+  padding: 64px 24px;
+  text-align: center;
+  color: var(--muted);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  max-width: 540px;
+  margin: 0 auto;
+}
+
+.fleet-detail-empty sl-icon {
+  font-size: 48px;
+  color: var(--muted);
+  opacity: 0.6;
+}
+
+.fleet-detail-empty h2 {
+  margin: 8px 0 0 0;
+  font-size: 18px;
+  color: var(--fg);
+}
+
+.fleet-detail-empty p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.fleet-detail-empty code {
+  font-size: 12px;
+  background: var(--bg-2, var(--border));
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.fleet-detail-empty-hint {
+  font-size: 13px;
+  opacity: 0.85;
+}
+
+.fleet-detail-empty-hint a {
+  color: var(--accent, var(--fg));
+}
+
+/* --- Workspace: tier styling --- */
+
+.workspace-card-tiers {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.workspace-tier-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tier-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+.tier-status {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.tier-children {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tier-child {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+}
+
+/* --- Workspace: DAG graph --- */
+
+.dag-preview {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-secondary);
+  padding: 16px;
+}
+
+.dag-preview svg {
+  display: block;
+}
+
+.workspace-dag-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+
+
+.workspace-dag-svg {
+  overflow-x: auto;
+}
+
+/* --- Workspace run card --- */
+
+/* --- Plan stage artifact strip (run-detail) --- */
+
+.plan-artifact-strip {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0 4px;
+}
+.plan-artifact-strip .plan-file-chip {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--fg-muted);
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  max-width: 360px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.plan-loading,
+.plan-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 20px;
+  color: var(--fg-muted);
+}
+
+/* W-061: plan revision selector inside the plan dialog */
+.plan-iter-selector {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border, var(--bg-secondary));
+}
+
+/* --- sl-dialog: wider markdown-body dialogs (plan, guide) --- */
+
+sl-dialog.markdown-dialog::part(panel) {
+  /* Default sl-dialog is ~31rem wide — too narrow for prose with code
+     blocks. Cap at 90vw so it stays comfortable on small viewports. */
+  width: min(960px, 90vw);
+  max-width: min(960px, 90vw);
+}
+sl-dialog.markdown-dialog::part(body) {
+  /* Give the body breathing room and let it scroll vertically instead
+     of the whole dialog growing without bound. */
+  max-height: 70vh;
+  overflow: auto;
+}
+
+/* --- Markdown body styling (used by guide-content + workspace-plan-content) --- */
+
+.markdown-body {
+  font-family: var(--sl-font-sans, system-ui, sans-serif);
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--fg);
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4 {
+  margin: 1.2em 0 0.5em;
+  line-height: 1.25;
+  font-weight: 600;
+}
+.markdown-body h1 { font-size: 1.5em; }
+.markdown-body h2 { font-size: 1.25em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
+.markdown-body h3 { font-size: 1.1em; }
+.markdown-body p { margin: 0.6em 0; }
+.markdown-body ul,
+.markdown-body ol { margin: 0.6em 0; padding-left: 1.5em; }
+.markdown-body li { margin: 0.25em 0; }
+.markdown-body code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--bg-secondary);
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.markdown-body pre {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: 6px;
+  padding: 10px 12px;
+  overflow-x: auto;
+  font-size: 12.5px;
+}
+.markdown-body pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+.markdown-body blockquote {
+  border-left: 3px solid var(--border);
+  padding: 4px 12px;
+  margin: 0.6em 0;
+  color: var(--fg-muted);
+}
+.markdown-body a { color: var(--accent); }
+.markdown-body table {
+  border-collapse: collapse;
+  margin: 0.8em 0;
+}
+.markdown-body th,
+.markdown-body td {
+  border: 1px solid var(--border-subtle);
+  padding: 4px 8px;
+  text-align: left;
+}
+
+/* --- Markdown context overrides --- */
+
+.markdown-inline.markdown-body {
+  display: inline;
+  font-size: inherit;
+  line-height: inherit;
+}
+.markdown-inline.markdown-body p {
+  display: inline;
+  margin: 0;
+}
+.markdown-inline.markdown-body code {
+  font-size: 0.85em;
+}
+
+.agent-prompt-content .markdown-body {
+  white-space: normal;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.agent-prompt-content .markdown-body h1,
+.agent-prompt-content .markdown-body h2,
+.agent-prompt-content .markdown-body h3 {
+  margin: 0.8em 0 0.3em;
+}
+
+.bead-tooltip-excerpt.markdown-body {
+  white-space: normal;
+  font-size: 12px;
+  max-height: 200px;
+  overflow-y: auto;
+  /* Inherit the tooltip's (light) text color instead of --fg, which is the
+     main-panel foreground and renders dark-on-dark inside the tooltip. */
+  color: inherit;
+}
+.bead-tooltip-excerpt.markdown-body p {
+  margin: 0.3em 0;
+}
+.bead-tooltip-excerpt.markdown-body pre {
+  font-size: 11px;
+  max-height: 120px;
+  overflow: auto;
+}
+/* The base markdown code/blockquote/link colors assume the light main panel;
+   re-tint them for the dark tooltip surface so they stay legible. */
+.bead-tooltip-excerpt.markdown-body code,
+.bead-tooltip-excerpt.markdown-body pre {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.bead-tooltip-excerpt.markdown-body blockquote {
+  color: inherit;
+  opacity: 0.8;
+  border-left-color: rgba(255, 255, 255, 0.3);
+}
+
+.workspace-run-card .workspace-card-root,
+.workspace-run-card .workspace-card-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+
+/* --- Workspace forms: external-repo picker --- */
+
+.repo-checklist-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+.ws-external-tag {
+  margin-left: 8px;
+}
+
+/* --- Workspace forms: Dependency Graph label --- */
+
+.dag-preview-block {
+  margin-top: 16px;
+}
+.dag-preview-label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* --- Workspace edit: scan-for-additions status + Available tag --- */
+
+.ws-edit-scan-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--fg-muted);
+  margin-bottom: 12px;
+}
+.ws-edit-scan-error {
+  margin-bottom: 12px;
+}
+.ws-edit-new-tag {
+  margin-left: 8px;
+}
+
+/* --- Workspace create: Parent Directory row --- */
+
+.parent-dir-row {
+  display: flex;
+  gap: 8px;
+  align-items: stretch;
+}
+.parent-dir-row .input-parent-dir {
+  flex: 1;
+}
+.parent-dir-suggestions {
+  margin-top: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  overflow: hidden;
+}
+.parent-dir-suggestions-label {
+  padding: 6px 12px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--fg-muted);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.parent-dir-suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--fg);
+  text-align: left;
+}
+.parent-dir-suggestion-item:last-child {
+  border-bottom: none;
+}
+.parent-dir-suggestion-item:hover {
+  background: var(--bg-hover);
+}
+.parent-dir-suggestion-item svg {
+  flex-shrink: 0;
+  color: var(--fg-muted);
+}
+
+/* --- Configuration → Workspaces list --- */
+
+.workspaces-config-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 64px 24px;
+  gap: 12px;
+  color: var(--fg-muted);
+}
+.workspaces-config-empty .empty-icon {
+  color: var(--fg-muted);
+  opacity: 0.5;
+  margin-bottom: 8px;
+}
+.workspaces-config-empty h3 {
+  margin: 0;
+  color: var(--fg);
+}
+.workspaces-config-empty p {
+  max-width: 480px;
+  margin: 0 0 12px;
+  line-height: 1.5;
+}
+
+.workspaces-config-table {
+  padding: 16px;
+  overflow-x: auto;
+}
+.workspaces-config-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+.workspaces-config-table thead th {
+  text-align: left;
+  font-weight: 600;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  color: var(--fg-muted);
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+.workspaces-config-table tbody td {
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+.workspaces-config-table tbody tr:hover {
+  background: var(--bg-hover);
+}
+.workspaces-config-table .ws-name strong {
+  font-weight: 600;
+}
+.workspaces-config-table .ws-path code,
+.workspaces-config-table .ws-umbrella {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--fg-muted);
+}
+.workspaces-config-table .ws-tiers {
+  color: var(--fg-muted);
+  font-size: 12px;
+  margin-left: 4px;
+}
+.workspaces-config-table .ws-dash {
+  color: var(--fg-muted);
+  opacity: 0.5;
+}
+.workspaces-config-table .actions-col {
+  text-align: right;
+}
+.workspaces-config-table .ws-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+}
+.ws-action-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 4px 6px;
+  cursor: pointer;
+  color: var(--fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ws-action-btn:hover {
+  background: var(--bg-hover);
+}
+.ws-action-btn--danger:hover {
+  background: rgba(220, 38, 38, 0.1);
+  color: rgb(220, 38, 38);
+  border-color: rgba(220, 38, 38, 0.4);
+}
+
+.dag-graph-node rect {
+  rx: 6;
+  fill: var(--bg);
+  stroke: var(--border);
+  stroke-width: 1.5;
+}
+
+.dag-graph-node text {
+  font-size: 12px;
+  font-family: var(--sl-font-sans);
+  fill: var(--fg);
+}
+
+.dag-graph-edge {
+  fill: none;
+  stroke: var(--border);
+  stroke-width: 2;
+}
+
+.dag-graph-node--status-pending rect { stroke: var(--status-pending); }
+.dag-graph-node--status-running rect { stroke: var(--status-running); }
+.dag-graph-node--status-completed rect { stroke: var(--status-completed); }
+.dag-graph-node--status-failed rect { stroke: var(--status-failed); }
+.dag-graph-node--status-paused rect { stroke: var(--status-paused); }
+.dag-graph-node--status-blocked rect { stroke: var(--status-blocked); }
+.dag-graph-node--status-planning rect { stroke: var(--status-running); }
+.dag-graph-node--status-integration-testing rect { stroke: var(--status-running); }
+.dag-graph-node--status-integration-failed rect { stroke: var(--status-failed); }
+
+/* --- Workspace: conflict icon --- */
+
+.conflict-icon {
+  color: var(--status-blocked);
+}
+
+/* Graphify cache location — selectable monospace path (W-053 cache relocation) */
+.graphify-codebox {
+  display: block;
+  margin: 0.25rem 0 0.75rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+  color: var(--fg);
+  word-break: break-all;
+  user-select: all;
+}
+
+/* A monospace value/command box with a copy button pinned to the right. */
+.graphify-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.25rem 0 0.75rem;
+}
+
+.graphify-copy-row .graphify-codebox {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+}
+
+/* Shown when the graphify CLI is missing/incompatible. */
+.graphify-not-installed {
+  margin: 0 0 0.75rem;
+}
+
+/* Caution color (action needed: install) on the message text only — not the
+   install-command code box, which keeps normal monospace styling. */
+.graphify-not-installed .settings-tab-description {
+  color: var(--status-paused);
+}
+
+/* Code Review Graph (CRG) — mirrors graphify-* classes above */
+.crg-codebox {
+  display: block;
+  margin: 0.25rem 0 0.75rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85rem;
+  color: var(--fg);
+  word-break: break-all;
+  user-select: all;
+}
+
+.crg-copy-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0.25rem 0 0.75rem;
+}
+
+.crg-copy-row .crg-codebox {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+}
+
+.crg-not-installed {
+  margin: 0 0 0.75rem;
+}
+
+.crg-not-installed .settings-tab-description {
+  color: var(--status-paused);
+}
+
+.crg-coming-soon {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.crg-stage-tools {
+  margin: 1rem 0;
+}
+
+.crg-stage-tools-grid {
+  display: grid;
+  gap: 0.4rem;
+  margin-top: 0.5rem;
+}
+
+.crg-stage-tools-entry {
+  display: flex;
+  gap: 0.75rem;
+  align-items: baseline;
+  font-size: 0.85rem;
+}
+
+.crg-stage-role {
+  font-weight: 600;
+  min-width: 6rem;
+  color: var(--fg);
+}
+
+.crg-stage-tool-list {
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.8rem;
+  word-break: break-all;
+}
+
+/* --- Pipelines view --- */
+
+.pipelines-view {
+  padding: 24px 0;
+}
+
+.pipelines-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.pipelines-loading-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 48px;
+  font-size: 32px;
+}
+
+/*
+ * Tier sections are sl-details collapsibles. The summary slot holds a
+ * 2-row grid: top row [icon | TITLE | count | spacer], bottom row a
+ * one-line description that wraps under the title. Shoelace's own
+ * chevron sits to the right of our summary content.
+ */
+.pipelines-tier-section {
+  margin-bottom: 0;
+}
+.pipelines-tier-section::part(base) {
+  border: 1px solid var(--border-subtle, var(--border));
+  border-radius: var(--radius-lg);
+  /* Match the new-run-section panel chrome so the tier sections
+   * read as the same kind of grouping (gray-tinted surface holding
+   * a heading + a stack of items). Previously these were on the
+   * default `--surface`, which left the cards floating with no
+   * visual hierarchy against the page background. */
+  background: var(--bg-secondary);
+}
+.pipelines-tier-section::part(header) {
+  padding: 12px 16px;
+}
+.pipelines-tier-section::part(content) {
+  padding: 12px 16px 16px;
+}
+
+/* The summary's flex container: lay out icon + title + count + desc. */
+.tier-section-header {
+  display: grid;
+  grid-template-columns: auto auto auto 1fr;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 4px 10px;
+  width: 100%;
+}
+.tier-section-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg-muted);
+  grid-row: 1;
+}
+.tier-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  grid-row: 1;
+}
+.tier-section-count {
+  grid-row: 1;
+  font-size: 11px;
+  justify-self: start;
+}
+.tier-section-desc {
+  grid-row: 2;
+  grid-column: 2 / -1;
+  margin: 0;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+/*
+ * Empty-tier placeholder — sits inside an otherwise normal
+ * .pipelines-tier-section so the page never collapses around an empty
+ * tier. Uses the dashed Settings-style border to read as "absence,
+ * not error".
+ */
+.tier-section-empty {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 18px 20px;
+  border: 1px dashed var(--border-subtle, var(--border));
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+}
+.tier-section-empty-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--fg);
 }
-
-.fleet-circuit-breaker-alert,
-.fleet-user-halt-alert {
-  display: block;
+.tier-section-empty-desc {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--fg-muted);
 }
 
-.fleet-circuit-breaker-alert .cb-trip-reason,
-.fleet-circuit-breaker-alert .cb-unstarted-count {
-  display: block;
-  margin-top: 4px;
-  font-size: 12.5px;
-  color: var(--fg);
-  opacity: 0.85;
+.pipelines-grid {
+  display: grid;
+  /* Cards 50% wider than the original 320px min — fewer per row, more
+     room for the description text and tag chips to breathe. The gap
+     scales with the new width so the grid still feels balanced. */
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+  gap: 20px;
 }
 
-.fleet-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  align-items: center;
+.template-card {
+  /* +50% on the original 140px to stay proportional with the wider
+     grid track; longer descriptions now have headroom before the card
+     needs to grow further. */
+  min-height: 210px;
 }
 
-/* Run-detail "Fleet:" / "Workspace:" group line above the Branch row.
-   Mirrors .run-branch exactly: same font-size, gap, and value weight.
-   The only visual difference is the accent-colored anchor + underline-
-   on-hover affordance signalling it's clickable. */
-.run-group {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
+/*
+ * "ID: <slug>" badge — pill-shaped with a subtle gray background to
+ * read as a handle/identifier chip rather than incidental text. Sits
+ * inline with the file-text icon, name, and Default badge on the
+ * card's top row (mirrors the tier section header layout). Uses
+ * Settings-style tokens (--bg-secondary, --border-subtle) so it
+ * lands in the same visual family as our other chips and badges.
+ */
+.template-card-id-badge {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle, var(--border));
+  max-width: max-content;
+  min-width: 0;
 }
-
-.run-group-link {
-  /* Inherits font-family + font-size from .run-group → matches the plain
-     <span class="meta-value"> on the Branch line, just colored and
-     underlined-on-hover to read as a link. */
-  color: var(--accent);
+.template-card-id-label {
+  font-size: 10px;
   font-weight: 600;
-  text-decoration: none;
-  word-break: break-all;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+  flex-shrink: 0;
+}
+.template-card-id {
+  font-family: var(--sl-font-mono);
+  font-size: 12px;
+  color: var(--fg);
+  background: transparent;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.run-group-link:hover {
-  text-decoration: underline;
+/*
+ * Template cards inherit `cursor: pointer` and a hover lift from the
+ * base `.run-card` rule. The `--clickable` modifier is added by the
+ * view only when an edit/duplicate handler is wired up; in the degraded
+ * read-only state we strip those affordances so the card looks (and
+ * feels) inert.
+ */
+.template-card:not(.template-card--clickable) {
+  cursor: default;
+}
+.template-card:not(.template-card--clickable):hover {
+  background: var(--surface);
+  box-shadow: none;
+  transform: none;
+}
+.template-card--clickable:focus-visible {
+  outline: 2px solid var(--accent, #4f9eff);
+  outline-offset: 2px;
 }
 
-/* Run-card "Fleet:" / "Workspace:" meta-item — sized by parent
-   .run-card-meta (12px). Same coloring as .run-group-link but no
-   monospace. */
-.run-card-group-link {
-  color: var(--accent);
+.template-default-badge {
+  margin-right: 8px;
   font-weight: 600;
-  text-decoration: none;
-  word-break: break-all;
 }
 
-.run-card-group-link:hover {
-  text-decoration: underline;
+/*
+ * Top row is just icon + name + (optional) ★ Default. The shared
+ * `.run-card-title { flex: 1 }` rule does the right thing here:
+ * the title soaks up the horizontal space and pushes the Default
+ * badge to the right edge.
+ *
+ * The "ID:slug" handle and the description below it are both
+ * indented to align with the title's left edge (i.e. past the
+ * icon's column). The icon is 16px wide and the .run-card-top
+ * gap is 10px, so 26px of left padding aligns subsequent rows
+ * with the title.
+ */
+.template-card-id-row {
+  display: flex;
+  margin-top: 6px;
+  padding-left: 26px;
+}
+.template-card .run-card-meta {
+  padding-left: 26px;
 }
 
-/* Sidebar fleet-header clickable feedback */
-.fleet-header-clickable {
-  transition: background-color var(--transition-fast);
+/*
+ * Buttons pin to the card's bottom so cards of varying heights
+ * (description length, badge presence) line their action rows up
+ * with each other in a tier-section grid. `margin-top: auto` on
+ * the last child of a column-flex container absorbs the extra
+ * vertical space.
+ */
+.template-card .run-card-actions {
+  margin-top: auto;
 }
 
-.fleet-header-clickable:hover {
-  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
+.template-tier-badge {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-/* Fleet list view (route: /#/fleet-runs) — one `fleet-card` per fleet.
-   No wrapping border / shared background; each card carries its own
-   chrome plus the layered stack-of-cards shadow. Gap matches the
-   gap between pipeline cards in run-list for visual consistency. */
-.fleet-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.template-card .run-card-stages sl-tag {
+  margin-right: 4px;
+  margin-bottom: 4px;
 }
 
-.fleet-list-row {
+.pipelines-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  cursor: pointer;
-  transition: background-color var(--transition-fast);
+  justify-content: center;
+  text-align: center;
+  padding: 64px 24px;
+  gap: 16px;
+  color: var(--fg-muted);
 }
 
-.fleet-list-row:last-child {
-  border-bottom: none;
+.pipelines-empty .empty-state-icon {
+  color: var(--fg-muted);
+  opacity: 0.5;
+  margin-bottom: 8px;
 }
 
-.fleet-list-row:hover {
-  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
+.pipelines-empty h2 {
+  margin: 0;
+  color: var(--fg);
+  font-size: 20px;
+  font-weight: 600;
 }
 
-.fleet-list-row-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--fg);
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.pipelines-empty p {
+  max-width: 480px;
+  margin: 0 0 16px;
+  line-height: 1.5;
+  color: var(--fg-muted);
 }
 
-.fleet-list-row-badge {
-  flex-shrink: 0;
+.pipelines-empty .empty-state-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
 }
 
-.fleet-list-row-meta {
-  font-size: 12px;
-  color: var(--muted);
-  flex-shrink: 0;
+.pipelines-empty .empty-state-hint {
+  font-size: 13px;
+  color: var(--fg-muted);
+  border-top: 1px solid var(--border);
+  padding-top: 16px;
 }
 
-.fleet-list-row-id {
-  font-family: var(--sl-font-mono);
-  font-size: 11.5px;
-  color: var(--muted);
-  background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: 4px;
-  flex-shrink: 0;
+/* Deep-link card for template-driven settings (W-062 Phase 6) */
+.pipelines-deep-link-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-secondary);
+  padding: 16px;
+  margin-bottom: 24px;
+  box-shadow: var(--shadow-sm);
 }
 
-.fleet-list-loading,
-.fleet-list-empty {
-  padding: 24px;
-  text-align: center;
-  color: var(--muted);
+.pipelines-deep-link-content {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
-.fleet-detail-empty {
-  padding: 64px 24px;
-  text-align: center;
-  color: var(--muted);
+.pipelines-deep-link-icon {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 12px;
-  max-width: 540px;
-  margin: 0 auto;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius);
+  color: var(--accent);
+  flex-shrink: 0;
 }
 
-.fleet-detail-empty sl-icon {
-  font-size: 48px;
-  color: var(--muted);
-  opacity: 0.6;
+.pipelines-deep-link-text {
+  flex: 1;
 }
 
-.fleet-detail-empty h2 {
-  margin: 8px 0 0 0;
-  font-size: 18px;
+.pipelines-deep-link-title {
+  font-size: 14px;
+  font-weight: 600;
   color: var(--fg);
+  margin-bottom: 4px;
 }
 
-.fleet-detail-empty p {
-  margin: 0;
-  line-height: 1.5;
-}
-
-.fleet-detail-empty code {
-  font-size: 12px;
-  background: var(--bg-2, var(--border));
-  padding: 1px 6px;
-  border-radius: 4px;
+.pipelines-deep-link-desc {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
 }
 
-.fleet-detail-empty-hint {
+.pipelines-deep-link-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
   font-size: 13px;
-  opacity: 0.85;
+  font-weight: 500;
+  color: var(--fg);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  white-space: nowrap;
 }
 
-.fleet-detail-empty-hint a {
-  color: var(--accent, var(--fg));
+.pipelines-deep-link-btn:hover {
+  background: var(--bg);
+  border-color: var(--border-subtle);
+  color: var(--fg-active);
 }
 
-/* --- Workspace: tier styling --- */
 
-.workspace-card-tiers {
+/* ─── Pipelines Editor ─────────────────────────────────────────────── */
+
+.pipelines-editor {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin-top: 8px;
+  height: 100%;
+  max-height: calc(100vh - 120px);
 }
 
-.workspace-tier-row {
+/*
+ * Editor sub-header: lives below the page chrome's "Edit Template" title.
+ * Shows the template name + scope badge on the left, view-mode toggle on
+ * the right. No back button here — the page chrome already provides one.
+ */
+.editor-subheader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.editor-subheader-title-group {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
+  min-width: 0;
 }
 
-.tier-label {
-  font-size: 11px;
+/*
+ * Inline editable Name + ID + read-only Storage in the editor
+ * subheader. All three share the same gray-pill chassis
+ * (`.editor-field-pill`) so the row reads as a single field group;
+ * size/weight variants live on the per-pill modifier class.
+ *
+ * Name is the widest (flex-grow), ID is mid-width with a monospace
+ * input, Storage is a fixed compact pill showing the tier.
+ */
+.editor-field-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px 2px 8px;
+  border-radius: 9999px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle, var(--border));
+  min-width: 0;
+}
+.editor-field-pill-label {
+  font-size: 10px;
   font-weight: 600;
-  color: var(--muted);
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  min-width: 60px;
+  color: var(--fg-muted);
   flex-shrink: 0;
 }
 
-.tier-status {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
+.editor-name-pill {
+  flex: 1 1 240px;
+  padding-right: 4px;
 }
-
-.tier-children {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
+.editor-name-input {
+  flex: 1;
+  min-width: 0;
+}
+.editor-name-input::part(form-control-input) {
+  font-weight: 600;
+}
+.editor-name-input::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  min-height: 22px;
 }
 
-.tier-child {
+.editor-id-badge {
+  flex: 0 1 240px;
+}
+.editor-id-input {
+  flex: 1;
+  min-width: 0;
+}
+.editor-id-input::part(form-control-input) {
+  font-family: var(--sl-font-mono);
   font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border);
+  padding: 0 6px;
 }
-
-/* --- Workspace: DAG graph --- */
-
-.dag-preview {
-  overflow-x: auto;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg-secondary);
-  padding: 16px;
+.editor-id-input::part(base) {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  min-height: 22px;
 }
 
-.dag-preview svg {
-  display: block;
+.editor-storage-pill {
+  flex: 0 0 auto;
+  padding: 2px 10px 2px 8px;
 }
 
-.workspace-dag-panel {
+/*
+ * Description section sits above the tab group inside the scroll
+ * area — outside any tab so it always shows. Matches the
+ * settings-section header style (h3.settings-section-title +
+ * settings-field + label + textarea) so the editor reads like
+ * the rest of the app.
+ */
+.editor-description-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
+  padding-bottom: 16px;
+  margin-bottom: 4px;
+}
+.editor-description-input {
+  width: 100%;
+}
+.editor-description-input::part(textarea) {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--fg);
+}
+.editor-storage-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fg);
+  text-transform: capitalize;
 }
 
+/*
+ * Visual error state on a field pill — used when the ID collides
+ * with an existing template in the same tier. The border turns
+ * warning-amber to match the inline badge that appears next to
+ * the input and the disabled Save button.
+ */
+.editor-field-pill--invalid {
+  border-color: var(--sl-color-warning-600, #d97706);
+}
+.editor-id-collision-badge {
+  flex-shrink: 0;
+}
 
+.editor-subheader-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-.workspace-dag-svg {
-  overflow-x: auto;
+.icon-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--fg-muted);
+  transition: var(--transition-fast);
 }
 
-/* --- Workspace run card --- */
+.icon-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--fg);
+}
 
-/* --- Plan stage artifact strip (run-detail) --- */
+.editor-mode-toggle {
+  margin-left: auto;
+}
 
-.plan-artifact-strip {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 10px 0 4px;
+/*
+ * Read-only badge in the editor subheader. Sits next to the tier
+ * badge whenever we're viewing a built-in template; visually warns
+ * the user that nothing they type here will save.
+ */
+.editor-readonly-badge {
+  margin-left: 4px;
 }
-.plan-artifact-strip .plan-file-chip {
-  font-family: var(--font-mono);
-  font-size: 12px;
+
+/*
+ * Editor content gate: when readOnly, the form controls inside each
+ * tab panel (and the JSON view) become non-interactive — but the
+ * tab nav stays clickable so users can move between Models /
+ * Stages / Agents / etc. to inspect the whole template. We scope
+ * pointer-events:none to the panels (not the whole content) so the
+ * `<sl-tab slot="nav">` items still take clicks.
+ *
+ * `aria-disabled="true"` on the wrapper tells assistive tech the
+ * surface is locked; the per-panel muted opacity signals "look,
+ * don't touch". Inputs visually keep their value so users can still
+ * read and copy from them.
+ *
+ * Cheaper than threading a `disabled` flag through every section
+ * and every input; tradeoff is screen readers won't announce each
+ * control as disabled — only the panel container. Acceptable for a
+ * read-only inspector mode.
+ */
+.editor-content--readonly sl-tab-panel,
+.editor-content--readonly .editor-section--json {
+  pointer-events: none;
+  opacity: 0.7;
+  user-select: text; /* let users still highlight + copy values */
+}
+.editor-content--readonly sl-tab-panel *,
+.editor-content--readonly .editor-section--json * {
+  cursor: default !important;
+}
+
+/*
+ * Editor uses the same .settings-tab-content / .settings-section-title /
+ * .settings-cards primitives as Project Settings — define one supporting
+ * helper here (the lead-in paragraph under a section title) and a few
+ * tab-group tweaks so the editor's tab nav sits naturally inside its
+ * scroll container.
+ */
+.settings-section-desc {
+  margin: -2px 0 14px;
   color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.settings-section-desc code {
   background: var(--bg-secondary);
-  padding: 2px 6px;
+  padding: 1px 5px;
   border-radius: 4px;
-  max-width: 360px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.plan-loading,
-.plan-error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 20px;
-  color: var(--fg-muted);
+  font-size: 12px;
 }
 
-/* W-061: plan revision selector inside the plan dialog */
-.plan-iter-selector {
+.editor-tab-group {
+  --indicator-color: var(--accent, var(--sl-color-primary-600, #4f9eff));
+  /* Keep Shoelace's default track color (subtle border under the tab
+   * row) so the editor matches the Project Settings convention of a
+   * horizontal line between the nav and the panel content. Used to
+   * be `transparent` which suppressed that divider. */
+}
+.editor-tab-group::part(base) {
+  /* Hand the scroll to .editor-content so the tab nav stays sticky. */
+  height: 100%;
+}
+/*
+ * Tab nav style mirrors the project Settings tabs: 13px medium,
+ * 10/16 padding, and a clear gap between the icon and the label
+ * so the icon doesn't visually fuse with the first letter.
+ */
+.editor-tab-group sl-tab::part(base) {
+  font-size: 13px;
+  font-weight: 500;
+  padding: 10px 16px;
+  gap: 6px;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 6px;
-  margin: 0 0 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border, var(--bg-secondary));
 }
-
-/* --- sl-dialog: wider markdown-body dialogs (plan, guide) --- */
-
-sl-dialog.markdown-dialog::part(panel) {
-  /* Default sl-dialog is ~31rem wide — too narrow for prose with code
-     blocks. Cap at 90vw so it stays comfortable on small viewports. */
-  width: min(960px, 90vw);
-  max-width: min(960px, 90vw);
+.editor-tab-group sl-tab svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
 }
-sl-dialog.markdown-dialog::part(body) {
-  /* Give the body breathing room and let it scroll vertically instead
-     of the whole dialog growing without bound. */
-  max-height: 70vh;
-  overflow: auto;
+.editor-tab-group sl-tab-panel::part(base) {
+  padding: 16px 4px 0;
 }
 
-/* --- Markdown body styling (used by guide-content + workspace-plan-content) --- */
+/*
+ * Pipeline tab holds three sections (Stage configuration, Loop
+ * limits, Circuit breaker) on one panel — the same shape as the
+ * Project Settings → Pipeline tab. Each section is its own
+ * `.settings-tab-content` flex column with gap:20px between fields
+ * but no margin above the section heading, so without an explicit
+ * separator they jam right up against each other. Give the three
+ * direct children real vertical breathing room.
+ */
+.editor-pipeline-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.editor-pipeline-tab > .settings-tab-content + .settings-tab-content {
+  /* Visual separator on top of the gap so it reads as a fresh
+   * section rather than a continuation of the previous one. */
+  border-top: 1px solid var(--border-subtle, var(--border));
+  padding-top: 24px;
+}
 
-.markdown-body {
-  font-family: var(--sl-font-sans, system-ui, sans-serif);
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--fg);
+/*
+ * Shared chrome for the template action dialogs (Create / Duplicate /
+ * Rename / Import). Wraps the Settings-style form primitives so the
+ * dialog body looks like a one-screen mini Settings tab.
+ */
+.template-action-dialog::part(panel) {
+  min-width: min(520px, 100vw - 32px);
 }
-.markdown-body h1,
-.markdown-body h2,
-.markdown-body h3,
-.markdown-body h4 {
-  margin: 1.2em 0 0.5em;
-  line-height: 1.25;
-  font-weight: 600;
+.template-action-dialog .dialog-lead {
+  margin: 0 0 14px;
+  color: var(--fg-muted);
+  font-size: 13px;
+  line-height: 1.5;
 }
-.markdown-body h1 { font-size: 1.5em; }
-.markdown-body h2 { font-size: 1.25em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; }
-.markdown-body h3 { font-size: 1.1em; }
-.markdown-body p { margin: 0.6em 0; }
-.markdown-body ul,
-.markdown-body ol { margin: 0.6em 0; padding-left: 1.5em; }
-.markdown-body li { margin: 0.25em 0; }
-.markdown-body code {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
+.template-action-dialog .dialog-lead code {
   background: var(--bg-secondary);
   padding: 1px 5px;
-  border-radius: 3px;
+  border-radius: 4px;
+  font-size: 12px;
 }
-.markdown-body pre {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: 6px;
-  padding: 10px 12px;
-  overflow-x: auto;
-  font-size: 12.5px;
+.template-action-dialog .settings-field {
+  margin-bottom: 14px;
 }
-.markdown-body pre code {
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
+.template-action-dialog .dialog-error {
+  margin-top: 8px;
 }
-.markdown-body blockquote {
-  border-left: 3px solid var(--border);
-  padding: 4px 12px;
-  margin: 0.6em 0;
+.template-action-dialog .dialog-bundle-list {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-size: 13px;
   color: var(--fg-muted);
 }
-.markdown-body a { color: var(--accent); }
-.markdown-body table {
-  border-collapse: collapse;
-  margin: 0.8em 0;
+.template-action-dialog .dialog-bundle-list code {
+  font-family: var(--sl-font-mono);
+  color: var(--fg);
 }
-.markdown-body th,
-.markdown-body td {
-  border: 1px solid var(--border-subtle);
-  padding: 4px 8px;
-  text-align: left;
+
+.editor-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }
 
-/* --- Markdown context overrides --- */
+/* Editor Sections */
 
-.markdown-inline.markdown-body {
-  display: inline;
-  font-size: inherit;
-  line-height: inherit;
+.editor-section {
+  max-width: 900px;
 }
-.markdown-inline.markdown-body p {
-  display: inline;
+
+.editor-section--json {
+  max-width: 1000px;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
   margin: 0;
+  color: var(--fg);
 }
-.markdown-inline.markdown-body code {
-  font-size: 0.85em;
+
+/* Stages List */
+
+.stages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stage-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: var(--transition-fast);
 }
 
-.agent-prompt-content .markdown-body {
-  white-space: normal;
-  font-size: 12px;
-  line-height: 1.5;
+.stage-row--disabled {
+  opacity: 0.5;
 }
-.agent-prompt-content .markdown-body h1,
-.agent-prompt-content .markdown-body h2,
-.agent-prompt-content .markdown-body h3 {
-  margin: 0.8em 0 0.3em;
+
+.stage-row-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
 }
 
-.bead-tooltip-excerpt.markdown-body {
-  white-space: normal;
-  font-size: 12px;
-  max-height: 200px;
-  overflow-y: auto;
-  /* Inherit the tooltip's (light) text color instead of --fg, which is the
-     main-panel foreground and renders dark-on-dark inside the tooltip. */
-  color: inherit;
+.stage-name {
+  font-weight: 500;
+  font-family: var(--sl-font-mono);
 }
-.bead-tooltip-excerpt.markdown-body p {
-  margin: 0.3em 0;
+
+.stage-row.disabled .stage-name {
+  text-decoration: line-through;
 }
-.bead-tooltip-excerpt.markdown-body pre {
-  font-size: 11px;
-  max-height: 120px;
-  overflow: auto;
+
+.stage-row-agent {
+  width: 200px;
 }
-/* The base markdown code/blockquote/link colors assume the light main panel;
-   re-tint them for the dark tooltip surface so they stay legible. */
-.bead-tooltip-excerpt.markdown-body code,
-.bead-tooltip-excerpt.markdown-body pre {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.15);
+
+/* Agents Matrix */
+
+.agents-matrix {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
-.bead-tooltip-excerpt.markdown-body blockquote {
-  color: inherit;
-  opacity: 0.8;
-  border-left-color: rgba(255, 255, 255, 0.3);
+
+.agent-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
 }
 
-.workspace-run-card .workspace-card-root,
-.workspace-run-card .workspace-card-name {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--fg-muted);
+.agent-name {
+  flex: 0 0 100px;
+  font-weight: 500;
+  font-family: var(--sl-font-mono);
 }
 
-/* --- Workspace forms: external-repo picker --- */
+.agent-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+  flex: 1;
+}
 
-.repo-checklist-actions {
+.agent-field {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Loops Grid */
+
+.loops-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
-  margin-top: 12px;
-  flex-wrap: wrap;
 }
-.ws-external-tag {
-  margin-left: 8px;
+
+.loop-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-/* --- Workspace forms: Dependency Graph label --- */
+/* Circuit Breaker Grid */
 
-.dag-preview-block {
-  margin-top: 16px;
-}
-.dag-preview-label {
-  display: block;
-  margin-bottom: 8px;
+.circuit-breaker-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
 }
 
-/* --- Workspace edit: scan-for-additions status + Available tag --- */
+.cb-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-.ws-edit-scan-status {
+.cb-field-row {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 13px;
-  color: var(--fg-muted);
-  margin-bottom: 12px;
-}
-.ws-edit-scan-error {
-  margin-bottom: 12px;
-}
-.ws-edit-new-tag {
-  margin-left: 8px;
 }
 
-/* --- Workspace create: Parent Directory row --- */
+/* Governance */
 
-.parent-dir-row {
+.governance-content {
   display: flex;
-  gap: 8px;
-  align-items: stretch;
-}
-.parent-dir-row .input-parent-dir {
-  flex: 1;
+  flex-direction: column;
+  gap: 24px;
 }
-.parent-dir-suggestions {
-  margin-top: 8px;
+
+/* JSON Editor */
+
+.json-editor-wrapper {
+  background: var(--bg-secondary);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  overflow: hidden;
+  border-radius: var(--radius);
+  padding: 4px;
 }
-.parent-dir-suggestions-label {
-  padding: 6px 12px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+
+.json-editor {
+  font-family: var(--sl-font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  min-height: 300px;
+  resize: vertical;
+}
+
+.json-editor-hint {
+  font-size: 12px;
   color: var(--fg-muted);
-  background: var(--bg-secondary);
-  border-bottom: 1px solid var(--border-subtle);
+  margin-top: 8px;
 }
-.parent-dir-suggestion-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  background: transparent;
-  border: none;
-  border-bottom: 1px solid var(--border-subtle);
-  cursor: pointer;
-  font-family: var(--font-mono);
+
+/* Diff view styles */
+.diff-hint {
   font-size: 13px;
-  color: var(--fg);
-  text-align: left;
+  color: var(--fg-muted);
+  margin-bottom: 16px;
+  line-height: 1.5;
 }
-.parent-dir-suggestion-item:last-child {
-  border-bottom: none;
+
+.diff-reset-icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 4px;
+  color: var(--accent);
 }
-.parent-dir-suggestion-item:hover {
-  background: var(--bg-hover);
+
+.diff-no-changes {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--status-completed);
 }
-.parent-dir-suggestion-item svg {
-  flex-shrink: 0;
+
+.diff-no-changes svg {
+  margin-bottom: 16px;
+  color: var(--status-completed);
+}
+
+.diff-no-changes h3 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.diff-no-changes p {
+  margin: 0;
   color: var(--fg-muted);
 }
 
-/* --- Configuration → Workspaces list --- */
+.diff-empty,
+.diff-loading {
+  padding: 24px;
+  text-align: center;
+  color: var(--fg-muted);
+}
 
-.workspaces-config-empty {
+.diff-loading {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  text-align: center;
-  padding: 64px 24px;
   gap: 12px;
-  color: var(--fg-muted);
-}
-.workspaces-config-empty .empty-icon {
-  color: var(--fg-muted);
-  opacity: 0.5;
-  margin-bottom: 8px;
-}
-.workspaces-config-empty h3 {
-  margin: 0;
-  color: var(--fg);
-}
-.workspaces-config-empty p {
-  max-width: 480px;
-  margin: 0 0 12px;
-  line-height: 1.5;
 }
 
-.workspaces-config-table {
-  padding: 16px;
+.diff-table-container {
   overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
 }
-.workspaces-config-table table {
+
+.diff-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 14px;
+  font-size: 13px;
 }
-.workspaces-config-table thead th {
+
+.diff-table th {
   text-align: left;
+  padding: 10px 12px;
+  background: var(--bg-secondary);
+  border-bottom: 2px solid var(--border);
   font-weight: 600;
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border);
-  color: var(--fg-muted);
-  text-transform: uppercase;
+  color: var(--fg);
+  position: sticky;
+  top: 0;
+}
+
+.diff-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+
+.diff-row--changed {
+  background: rgba(251, 191, 36, 0.05);
+}
+
+.diff-row--changed .diff-path {
+  font-weight: 600;
+}
+
+.diff-path code {
+  display: block;
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
   font-size: 11px;
-  letter-spacing: 0.04em;
+  color: var(--fg-muted);
+  margin-bottom: 4px;
+}
+
+.diff-label {
+  display: block;
+  font-size: 12px;
+  color: var(--fg);
+}
+
+.diff-value {
+  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
+  font-size: 12px;
+  max-width: 300px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
-.workspaces-config-table tbody td {
-  padding: 12px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: middle;
+
+.diff-value--builtin {
+  color: var(--fg-muted);
+  background: var(--bg-tertiary);
+  padding: 4px 8px;
+  border-radius: 4px;
 }
-.workspaces-config-table tbody tr:hover {
-  background: var(--bg-hover);
+
+.diff-value--current {
+  color: var(--fg);
+  background: rgba(59, 130, 246, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
 }
-.workspaces-config-table .ws-name strong {
-  font-weight: 600;
+
+.diff-actions {
+  white-space: nowrap;
 }
-.workspaces-config-table .ws-path code,
-.workspaces-config-table .ws-umbrella {
-  font-family: var(--font-mono);
+
+/* Common field styles */
+
+.field-label {
   font-size: 12px;
+  font-weight: 500;
   color: var(--fg-muted);
 }
-.workspaces-config-table .ws-tiers {
-  color: var(--fg-muted);
+
+.field-hint {
   font-size: 12px;
-  margin-left: 4px;
-}
-.workspaces-config-table .ws-dash {
   color: var(--fg-muted);
-  opacity: 0.5;
-}
-.workspaces-config-table .actions-col {
-  text-align: right;
 }
-.workspaces-config-table .ws-actions {
+
+/* Footer */
+
+.editor-footer {
   display: flex;
-  gap: 4px;
+  align-items: center;
   justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
 }
-.ws-action-btn {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 4px 6px;
-  cursor: pointer;
-  color: var(--fg);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+
+/* Save alert */
+
+.editor-save-alert {
+  margin-bottom: 16px;
 }
-.ws-action-btn:hover {
-  background: var(--bg-hover);
+
+.editor-validation-alert {
+  margin-bottom: 16px;
 }
-.ws-action-btn--danger:hover {
-  background: rgba(220, 38, 38, 0.1);
-  color: rgb(220, 38, 38);
-  border-color: rgba(220, 38, 38, 0.4);
+
+.validation-list {
+  margin: 8px 0 0 16px;
+  padding-left: 20px;
+  font-size: 13px;
 }
 
-.dag-graph-node rect {
-  rx: 6;
-  fill: var(--bg);
-  stroke: var(--border);
-  stroke-width: 1.5;
+.validation-list li {
+  margin-bottom: 4px;
 }
 
-.dag-graph-node text {
-  font-size: 12px;
-  font-family: var(--sl-font-sans);
-  fill: var(--fg);
+.validation-list code {
+  font-family: var(--sl-font-mono);
+  background: var(--bg-tertiary);
+  padding: 2px 4px;
+  border-radius: 3px;
 }
 
-.dag-graph-edge {
-  fill: none;
-  stroke: var(--border);
-  stroke-width: 2;
+/* Loading state */
+
+.editor-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  font-size: 14px;
+  color: var(--fg-muted);
+  gap: 8px;
 }
 
-.dag-graph-node--status-pending rect { stroke: var(--status-pending); }
-.dag-graph-node--status-running rect { stroke: var(--status-running); }
-.dag-graph-node--status-completed rect { stroke: var(--status-completed); }
-.dag-graph-node--status-failed rect { stroke: var(--status-failed); }
-.dag-graph-node--status-paused rect { stroke: var(--status-paused); }
-.dag-graph-node--status-blocked rect { stroke: var(--status-blocked); }
-.dag-graph-node--status-planning rect { stroke: var(--status-running); }
-.dag-graph-node--status-integration-testing rect { stroke: var(--status-running); }
-.dag-graph-node--status-integration-failed rect { stroke: var(--status-failed); }
+/* ===========================================================================
+ * Help mode (W-061 prototype, prototype/W-061-help-mode-toggle)
+ *
+ * Two concerns:
+ *   1. The right-edge "Docs" tab (.help-edge-tab) — always visible at 75%
+ *      opacity, fully opaque on hover/active.
+ *   2. Per-surface "?" badges (.help-badge) — hidden until body has the
+ *      .help-mode-active class.
+ *
+ * Colour: violet (~#7c3aed) — deliberately chosen so help mode reads as
+ * "informational / secondary" and never competes with the blue used for
+ * primary actions + running state, the green used for completed, the
+ * orange used for caution, or the red used for failed.
+ *
+ * Animation: each badge radiates a slow sonar wave outward and fades to
+ * transparent, like a discoverability signal. `prefers-reduced-motion`
+ * collapses the wave to a static dim halo.
+ * ===========================================================================
+ */
+
+/* --- Edge tab --------------------------------------------------------- */
+
+.help-edge-tab-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1000;
+}
 
-/* --- Workspace: conflict icon --- */
+/* Vertical pill anchored ~100px from the top of the viewport (deliberately
+   off-centre so it sits above the eye line and doesn't compete with
+   sidebar/main content for the visual centre). */
+.help-edge-tab {
+  position: fixed;
+  right: 0;
+  top: 100px;
+  transform: translateX(0);
+  transform-origin: right center;
+  pointer-events: auto;
 
-.conflict-icon {
-  color: var(--status-blocked);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* Sized to wrap the rotated content (icon ~20px + 10px gap + "Docs"
+     label ~38px ≈ 68px length, 20px max thickness). Height bumped +25%
+     (84 → 105) per the user's request to give the rotated content more
+     padding at the top and bottom of the tab. */
+  width: 30px;
+  height: 105px;
+  padding: 0;
+  border: 1px solid #c4b5fd; /* violet-300 */
+  border-right: none;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  background: rgba(124, 58, 237, 0.1); /* violet-600 @ 10% */
+  color: #5b21b6; /* violet-800 */
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  opacity: 0.75;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
+  transition: opacity 160ms ease, background-color 120ms ease, color 120ms ease,
+    transform 180ms ease, box-shadow 180ms ease;
 }
 
-/* Graphify cache location — selectable monospace path (W-053 cache relocation) */
-.graphify-codebox {
-  display: block;
-  margin: 0.25rem 0 0.75rem;
-  padding: 0.4rem 0.6rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.85rem;
-  color: var(--fg);
-  word-break: break-all;
-  user-select: all;
+.help-edge-tab:hover,
+.help-edge-tab:focus-visible {
+  opacity: 1;
+  color: #4c1d95; /* violet-900 */
+  background: rgba(124, 58, 237, 0.18);
+  transform: translateX(-2px);
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
+  outline: none;
 }
 
-/* A monospace value/command box with a copy button pinned to the right. */
-.graphify-copy-row {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin: 0.25rem 0 0.75rem;
+.help-edge-tab:focus-visible {
+  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08), 0 0 0 2px #7c3aed;
 }
 
-.graphify-copy-row .graphify-codebox {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
+.help-edge-tab--active {
+  opacity: 1;
+  background: #7c3aed; /* violet-600 */
+  color: #fff;
+  border-color: #6d28d9; /* violet-700 */
 }
 
-/* Shown when the graphify CLI is missing/incompatible. */
-.graphify-not-installed {
-  margin: 0 0 0.75rem;
+.help-edge-tab--active:hover,
+.help-edge-tab--active:focus-visible {
+  background: #6d28d9;
+  color: #fff;
 }
 
-/* Caution color (action needed: install) on the message text only — not the
-   install-command code box, which keeps normal monospace styling. */
-.graphify-not-installed .settings-tab-description {
-  color: var(--status-paused);
+/* Inner row is icon + "Docs". Rotating the entire row -90deg (counter-
+   clockwise) makes both the icon and the label share the same rotation,
+   reading bottom-to-top along the right edge (head tilted left). */
+.help-edge-tab__inner {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  transform: rotate(-90deg);
+  transform-origin: center center;
+  white-space: nowrap;
 }
 
-/* Code Review Graph (CRG) — mirrors graphify-* classes above */
-.crg-codebox {
-  display: block;
-  margin: 0.25rem 0 0.75rem;
-  padding: 0.4rem 0.6rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.85rem;
-  color: var(--fg);
-  word-break: break-all;
-  user-select: all;
+.help-edge-tab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.crg-copy-row {
-  display: flex;
+.help-edge-tab__label {
+  /* Matches the sidebar's WORCA wordmark (.logo-text) — JetBrains Mono
+     family + bold weight + wide letter-spacing — so the affordance reads
+     as part of the brand vocabulary rather than a generic side tab. */
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1;
+}
+
+/* --- Per-surface help badge ------------------------------------------- */
+
+/* Hidden by default. Once help-mode-active flips on the body, every badge
+   reveals at the top-right of its parent and emits a slow sonar wave that
+   radiates outward then fades.
+
+   The badge is a real <a> — keyboard reachable when visible, opens the
+   doc in a new tab, never depends on JS for click handling. */
+.help-badge {
+  display: none;
+  position: absolute;
+  /* Vertically centred on the host's right edge — gives the sonar wave
+     equal headroom above and below the badge so it doesn't overflow
+     the host's bounding box. With disc 27px and wave max scale 1.5,
+     max wave diameter is ~40px → fits inside any host ≥ 40px tall
+     (typical sl-tab ~40px, panel headers larger). */
+  top: 50%;
+  right: 6px;
+  transform: translateY(-50%);
+  z-index: 5;
+
   align-items: center;
-  gap: 0.4rem;
-  margin: 0.25rem 0 0.75rem;
+  justify-content: center;
+  /* Solid disc 27×27 — entire badge scaled up 50% (18 → 27). Icon, wave
+     base, and clickable hit target all grow proportionally. */
+  width: 27px;
+  height: 27px;
+  border-radius: 50%;
+  /* Solid disc at 75% opacity — rgba on the background only so the
+     ::after sonar wave's own opacity animation (0.55 → 0) isn't dimmed
+     by parent inheritance. The white glyph stays fully visible. */
+  background: rgba(124, 58, 237, 0.75); /* violet-600 @ 75% */
+  color: #fff;
+  text-decoration: none;
+  transition: transform 120ms ease, background-color 120ms ease;
 }
 
-.crg-copy-row .crg-codebox {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
+/* Plain text "?" glyph — no container artifact (lucide's question-mark
+   variants all wrap the ? in some outline shape). Sized + weighted to
+   fill the 27px disc with a comfortable optical balance. */
+.help-badge__glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--sl-font-sans, system-ui, sans-serif);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  /* Most "?" glyphs sit slightly above the optical centre of their
+     em-box because of the descender-free shape. Nudge down 1px so it
+     reads centred in the disc. */
+  margin-top: 1px;
 }
 
-.crg-not-installed {
-  margin: 0 0 0.75rem;
+/* The sonar wave — a same-colour pseudo-element behind the badge that
+   slowly grows outward and fades. Sits at z-index 0 (badge itself is
+   at z-index 5) so it appears under the badge during expansion. */
+.help-badge::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #7c3aed;
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
 }
 
-.crg-not-installed .settings-tab-description {
-  color: var(--status-paused);
+body.help-mode-active .help-badge {
+  display: inline-flex;
 }
 
-.crg-coming-soon {
-  color: var(--muted);
-  font-style: italic;
+body.help-mode-active .help-badge::after {
+  animation: help-badge-sonar 2.4s ease-out infinite;
 }
 
-.crg-stage-tools {
-  margin: 1rem 0;
+/* Auto-relative any direct parent of a badge so absolute positioning has
+   a containing block. Modern browsers (Chrome 105+, Safari 15.4+,
+   Firefox 121+) all support :has(). For sl-tab specifically, also force
+   overflow: visible so the badge (and especially the sonar wave) isn't
+   clipped against the tab strip's edge. */
+body.help-mode-active *:has(> .help-badge) {
+  position: relative;
 }
 
-.crg-stage-tools-grid {
-  display: grid;
-  gap: 0.4rem;
-  margin-top: 0.5rem;
+body.help-mode-active sl-tab {
+  overflow: visible;
 }
 
-.crg-stage-tools-entry {
-  display: flex;
-  gap: 0.75rem;
-  align-items: baseline;
-  font-size: 0.85rem;
+.help-badge:hover,
+.help-badge:focus-visible {
+  /* Compose the hover lift with the vertical-centre translate so the
+     badge doesn't jump when hovered. */
+  transform: translateY(-50%) scale(1.1);
+  /* Full opacity on hover so the affordance reads stronger. */
+  background: #6d28d9; /* violet-700, opaque */
+  outline: none;
 }
 
-.crg-stage-role {
-  font-weight: 600;
-  min-width: 6rem;
-  color: var(--fg);
+/* Sonar wave: scale 1 → 1.5 from the 27px badge → max diameter ~40px,
+   centred on a badge that's vertically centred on the host. Wave fits
+   the host's bounding box on any host ≥ 40px tall (typical sl-tab
+   ~40px, panel headers larger; thin inline hosts may graze the edge). */
+@keyframes help-badge-sonar {
+  0% {
+    transform: scale(1);
+    opacity: 0.55;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
 }
 
-.crg-stage-tool-list {
-  color: var(--muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.8rem;
-  word-break: break-all;
+@media (prefers-reduced-motion: reduce) {
+  body.help-mode-active .help-badge::after {
+    animation: none;
+    opacity: 0.22;
+    transform: scale(1.3);
+  }
+  .help-edge-tab {
+    transition: none;
+  }
+}
+
+/* Dark-mode — violet stays violet, but we lift the idle background so it
+   doesn't blend into dark panels. */
+:root[data-theme='dark'] .help-edge-tab,
+.sl-theme-dark .help-edge-tab {
+  background: rgba(124, 58, 237, 0.22);
+  color: #e9d5ff; /* violet-200 */
+  border-color: #6d28d9;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.4);
+}
+
+:root[data-theme='dark'] .help-edge-tab:hover,
+:root[data-theme='dark'] .help-edge-tab:focus-visible,
+.sl-theme-dark .help-edge-tab:hover,
+.sl-theme-dark .help-edge-tab:focus-visible {
+  background: rgba(124, 58, 237, 0.35);
+  color: #f5f3ff;
 }