@worca/ui 0.41.0 → 0.42.0

package/app/styles.css

@@ -1136,6 +1136,15 @@ h1, h2, h3, h4, h5, h6 {
   border-bottom: 1px solid var(--border);
 }
 
+/* Pending stage: placeholder line shown until the stage starts (then replaced
+   by the real Started/Finished/Duration strip). Keeps the body non-empty so
+   the absolute Copy button aligns to content instead of the divider. */
+.timing-strip--pending .timing-strip-pending {
+  font-size: 12px;
+  font-style: italic;
+  color: var(--fg-muted);
+}
+
 .run-info-section {
   padding: 12px 16px;
   background: var(--bg-hover);
@@ -1151,6 +1160,8 @@ h1, h2, h3, h4, h5, h6 {
    block reads as a uniform stack. Mirror .run-group below it. */
 .run-project,
 .run-branch,
+.run-target-branch,
+.run-source,
 .run-template,
 .run-worktree {
   display: flex;
@@ -1172,6 +1183,7 @@ h1, h2, h3, h4, h5, h6 {
 .pipeline-timing-bar-actions {
   display: flex;
   justify-content: flex-end;
+  gap: 8px;
   margin-bottom: 8px;
 }
 
@@ -1947,6 +1959,12 @@ sl-input [slot="prefix"] {
   color: var(--muted);
 }
 
+/* Align the "Revising PR #N" badge with the meta rows above/below it
+   (which carry the same 26px left indent past the status icon). */
+.run-card-revises-pr {
+  padding-left: 26px;
+}
+
 .run-card-stages {
   display: flex;
   flex-wrap: wrap;
@@ -2353,6 +2371,28 @@ sl-input [slot="prefix"] {
   margin-top: 2px;
 }
 
+/* Export-mode picker (standalone vs delta): roomy rows, with each option's
+   description on its own line aligned under the option title (not the radio). */
+.export-mode-group sl-radio::part(base) {
+  align-items: flex-start;
+}
+.export-mode-group sl-radio:not(:last-of-type) {
+  margin-block-end: 16px;
+}
+.export-mode-option {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.export-mode-title {
+  line-height: 1.3;
+}
+.export-mode-hint {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+
 .settings-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -4621,11 +4661,6 @@ sl-details.learnings-panel::part(content) {
   margin-top: 10px;
 }
 
-.preflight-summary {
-  font-size: 0.8rem;
-  color: var(--muted);
-  margin-bottom: 8px;
-}
 
 .preflight-table {
   width: 100%;
@@ -4659,6 +4694,12 @@ sl-details.learnings-panel::part(content) {
   color: var(--muted);
 }
 
+/* Secondary pill on the preflight params row (e.g. the Max Beads source:
+   "explicit" / "template"). Same font as the value pill, visually subordinated. */
+.preflight-param-source-badge {
+  opacity: 0.72;
+}
+
 .circuit-breaker-banner {
   margin: 8px 0 4px;
 }
@@ -5561,6 +5602,44 @@ sl-tooltip.bead-tooltip::part(body) {
 }
 
 /* ─── Add Project / Worca Setup dialog shared styles ─────────────────── */
+/* Gist-export dialog (template "Export (gist)" flow). */
+.gist-export-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.gist-export-spinner {
+  font-size: 1rem;
+}
+
+.gist-export-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.gist-export-url-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.gist-export-copy-btn {
+  font-size: 1.15rem;
+  flex: 0 0 auto;
+}
+
+.gist-export-copy-btn.is-copied {
+  color: var(--status-completed, var(--sl-color-success-600));
+}
+
+.gist-export-footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .dialog-meta-row {
   display: flex;
   align-items: center;
@@ -5951,7 +6030,14 @@ sl-tooltip.bead-tooltip::part(body) {
 
 /* ─── Models tab — model cards + env rows ──────────────────────────── */
 .models-cards {
-  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+  /* Single column: a model card's action row carries six controls
+     (Rename/Duplicate/Copy/Delete + Discard/Save) that need ~620px to sit on
+     one line, so full-width cards stay roomy and never overflow. (Was a
+     multi-column auto-fill grid at minmax(440px) — too narrow for the row.)
+     For a capped two-column layout instead, use:
+       repeat(auto-fill, minmax(640px, 1fr));
+     .model-card-actions also wraps as a safety net for the dirty-state status. */
+  grid-template-columns: 1fr;
 }
 
 .model-card {
@@ -6098,6 +6184,7 @@ sl-tooltip.bead-tooltip::part(body) {
 .model-card-actions {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   margin-top: 14px;
   padding-top: 12px;
@@ -7592,6 +7679,25 @@ sl-dialog.markdown-dialog::part(body) {
  */
 .template-card .run-card-actions {
   margin-top: auto;
+  /*
+   * Left-align the action cluster (Duplicate + Export buttons) and push
+   * Delete to the far right via `margin-left:auto` on the button itself
+   * (see .template-card-delete-push). Scoped to template cards so run cards
+   * keep the global flex-end alignment. nowrap keeps Delete on the same row
+   * as the other buttons instead of wrapping it to its own line.
+   */
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+
+/*
+ * Delete is always pinned to the far right of the template card's
+ * action row, regardless of how many left-cluster buttons precede it
+ * (count varies with has_overlays / builtin). `margin-left:auto`
+ * absorbs the free space so it never relies on :last-child.
+ */
+.template-card .run-card-actions .template-card-delete-push {
+  margin-left: auto;
 }
 
 .template-tier-badge {
@@ -7930,6 +8036,28 @@ sl-dialog.markdown-dialog::part(body) {
 .editor-content--readonly .editor-section--json * {
   cursor: default !important;
 }
+/*
+ * Exception: the Prompts tab is itself a read-only viewer, not an editor —
+ * scrolling a prompt, expanding a stage's <sl-details>, and switching the
+ * per-stage Agent/User sub-tabs are all read actions. The panel-wide
+ * pointer-events:none + opacity:0.7 above would (a) swallow wheel events so
+ * the inner 480px `.prompt-file-content` scroll pane can't be scrolled and
+ * (b) bleach the prompt text, which is hard to read on a text-heavy surface.
+ *
+ * Exempt the Prompts panel entirely (it has no editable controls, so
+ * re-enabling pointer-events can't allow edits). Both the outer panel and
+ * the nested per-stage sub-tab panels are covered — the nested
+ * `sl-tab-panel`s would otherwise re-match the base rule above. opacity is
+ * reset on both levels because it compounds (0.7 × 0.7) and isn't inherited.
+ */
+.editor-content--readonly sl-tab-panel[name="prompts"],
+.editor-content--readonly sl-tab-panel[name="prompts"] sl-tab-panel {
+  pointer-events: auto;
+  opacity: 1;
+}
+.editor-content--readonly sl-tab-panel[name="prompts"] * {
+  cursor: auto !important;
+}
 
 /*
  * Editor uses the same .settings-tab-content / .settings-section-title /
@@ -8681,3 +8809,1189 @@ body.help-mode-active sl-tab {
   background: rgba(124, 58, 237, 0.35);
   color: #f5f3ff;
 }
+
+/* ── Overlays tab (pipelines-editor) ────────────────────────────────────── */
+
+.overlay-stages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-spacing-small);
+  padding: var(--sl-spacing-medium);
+}
+
+.overlay-stage-card {
+  border-radius: var(--sl-border-radius-medium);
+}
+
+.overlay-stage-card--disabled {
+  padding: var(--sl-spacing-small) var(--sl-spacing-medium);
+  border: 1px solid var(--sl-color-neutral-200);
+  border-radius: var(--sl-border-radius-medium);
+  opacity: 0.5;
+  cursor: default;
+}
+
+.overlay-stage-label {
+  font-size: var(--sl-font-size-small);
+  color: var(--sl-color-neutral-600);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.overlay-file-label {
+  font-size: var(--sl-font-size-x-small);
+  color: var(--sl-color-neutral-500);
+  margin-left: var(--sl-spacing-x-small);
+}
+
+.overlay-stage-tabs {
+  --track-color: transparent;
+}
+
+.overlay-file-content.markdown-body {
+  padding: var(--sl-spacing-medium);
+  max-height: 480px;
+  overflow-y: auto;
+  font-size: var(--sl-font-size-small);
+}
+
+.overlay-empty {
+  color: var(--sl-color-neutral-500);
+  font-size: var(--sl-font-size-small);
+  padding: var(--sl-spacing-medium);
+}
+
+/* ── Prompts tab (pipelines-editor-overlays.js) ─────────────────────────── */
+
+.prompt-file-content.markdown-body {
+  padding: var(--sl-spacing-medium);
+  max-height: 480px;
+  overflow-y: auto;
+  font-size: var(--sl-font-size-small);
+}
+
+.prompt-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--sl-font-size-x-small);
+  color: var(--sl-color-neutral-500);
+  padding: 0 var(--sl-spacing-x-small) var(--sl-spacing-small);
+}
+
+.prompt-source-badge {
+  margin-left: var(--sl-spacing-x-small);
+}
+
+.prompt-base-label,
+.prompt-customizations-label {
+  font-size: var(--sl-font-size-x-small);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--sl-color-neutral-500);
+  padding: var(--sl-spacing-small) var(--sl-spacing-medium) 0;
+}
+
+.prompt-customizations-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: var(--sl-spacing-small);
+}
+
+.prompt-help-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--sl-color-neutral-300);
+  color: var(--sl-color-neutral-700);
+  font-size: 10px;
+  font-weight: 700;
+  cursor: help;
+}
+
+/* Merge contributions: green = appended (additive), amber = overwrites a
+   built-in section (caution). Follows the badge color language. */
+.prompt-merge-block {
+  margin: var(--sl-spacing-x-small) var(--sl-spacing-medium);
+  border-left: 3px solid var(--sl-color-neutral-300);
+  border-radius: 0 var(--sl-border-radius-medium) var(--sl-border-radius-medium) 0;
+  padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
+}
+
+.prompt-merge-block .prompt-file-content.markdown-body {
+  padding: var(--sl-spacing-x-small) 0 0;
+  max-height: none;
+}
+
+.prompt-merge-append {
+  background: var(--sl-color-success-50);
+  border-left-color: var(--sl-color-success-500);
+}
+
+.prompt-merge-overwrite {
+  background: var(--sl-color-warning-50);
+  border-left-color: var(--sl-color-warning-500);
+}
+
+.prompt-merge-tag {
+  font-size: var(--sl-font-size-x-small);
+  color: var(--sl-color-neutral-600);
+}
+
+.prompt-merge-tag code {
+  font-size: var(--sl-font-size-x-small);
+}
+
+.prompt-merge-verb {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  cursor: help;
+}
+
+/* ── File Access view (run-file-access.js) ──────────────────────────────── */
+
+.run-file-access {
+  --fa-file-col-width: 220px;
+  --fa-cell-width: 80px;
+  --fa-cell-height: 32px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 20px;
+}
+
+/* ── Loading / empty states ─────────────────────────────────────────────── */
+
+.access-loading {
+  color: var(--text-muted, #94a3b8);
+  font-size: 13px;
+  padding: 40px;
+  text-align: center;
+}
+
+.access-empty-state {
+  padding: 40px;
+  text-align: center;
+  color: var(--fg, #0f172a);
+}
+
+.access-empty-hint {
+  font-size: 13px;
+  color: var(--text-muted, #94a3b8);
+}
+
+/* ── KPI strip ──────────────────────────────────────────────────────────── */
+
+.access-kpi-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.access-kpi-card {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 16px;
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  min-width: 100px;
+}
+
+.access-kpi-card--amber {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* Read = green, Written = blue — same semantics as the matrix op pills. */
+.access-kpi-card--read {
+  border-color: rgba(34, 197, 94, 0.4);
+  background: rgba(34, 197, 94, 0.06);
+}
+
+.access-kpi-card--read .access-kpi-label {
+  color: #15803d;
+}
+
+.access-kpi-card--write {
+  border-color: rgba(59, 130, 246, 0.4);
+  background: rgba(59, 130, 246, 0.06);
+}
+
+.access-kpi-card--write .access-kpi-label {
+  color: #1d4ed8;
+}
+
+.access-kpi-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted, #94a3b8);
+  font-weight: 500;
+}
+
+.access-kpi-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg, #0f172a);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Controls bar ───────────────────────────────────────────────────────── */
+
+.access-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.access-heatmap-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  background: var(--bg-secondary, #f8fafc);
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background var(--transition-fast, 150ms ease),
+    color var(--transition-fast, 150ms ease),
+    border-color var(--transition-fast, 150ms ease);
+}
+
+.access-heatmap-toggle--active {
+  background: rgba(249, 115, 22, 0.12);
+  border-color: #f97316;
+  color: #c2410c;
+}
+
+.access-chips {
+  display: flex;
+  gap: 6px;
+}
+
+.access-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 20px;
+  background: var(--bg-secondary, #f8fafc);
+  color: var(--text-muted, #94a3b8);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background var(--transition-fast, 150ms ease),
+    color var(--transition-fast, 150ms ease),
+    border-color var(--transition-fast, 150ms ease);
+}
+
+.access-chip--active.access-chip--reads {
+  background: rgba(34, 197, 94, 0.1);
+  border-color: #22c55e;
+  color: #15803d;
+}
+
+.access-chip--active.access-chip--writes {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.access-path-filter {
+  flex: 1;
+  min-width: 140px;
+  max-width: 260px;
+  padding: 4px 10px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  background: var(--bg, #fff);
+  color: var(--fg, #0f172a);
+  font-size: 12px;
+}
+
+.access-path-filter:focus {
+  outline: none;
+  border-color: var(--accent, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
+.access-sort-select {
+  padding: 4px 8px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  background: var(--bg-secondary, #f8fafc);
+  color: var(--fg, #0f172a);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* ── Treetable container ────────────────────────────────────────────────── */
+
+.access-treetable {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: 540px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  background: var(--bg, #fff);
+  font-size: 12px;
+}
+
+/* ── Table header (sticky top) ──────────────────────────────────────────── */
+
+.access-table-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background: var(--bg-secondary, #f8fafc);
+  border-bottom: 1px solid var(--border, #e2e8f0);
+}
+
+/* Stage group label row — a grid that shares the table's column template so
+   each stage label spans exactly its data columns. Empty spacers hold the
+   file and Σ tracks. */
+.access-stage-groups {
+  display: grid;
+  grid-template-columns: var(--fa-grid);
+  width: max-content;
+  border-bottom: 1px solid var(--border, #e2e8f0);
+}
+
+/* Empty spacer cells over the file and Σ columns of the stage-label row. */
+.access-stage-spacer {
+  min-height: 0;
+}
+
+.access-stage-group-header {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  border-right: 1px solid var(--border, #e2e8f0);
+  color: var(--fg, #0f172a);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.access-stage-group-header .access-stage-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.access-stage-group-header:hover {
+  background: var(--border, #e2e8f0);
+}
+
+.access-stage-group-header--collapsed {
+  background: rgba(59, 130, 246, 0.06);
+  color: #3b82f6;
+}
+
+/* Column headers row — same grid template as the stage-label and body rows. */
+.access-col-headers {
+  display: grid;
+  grid-template-columns: var(--fa-grid);
+  width: max-content;
+}
+
+.access-col-header {
+  min-width: 0;
+  min-height: var(--fa-cell-height, 32px);
+  padding: 4px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: var(--text-muted, #94a3b8);
+  border-right: 1px solid rgba(226, 232, 240, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.access-col-agent {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.access-col-header:last-child {
+  border-right: none;
+}
+
+/* File column header — sticky left, wider than data cells */
+.access-col-file-header {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  width: var(--fa-file-col-width, 220px);
+  background: var(--bg-secondary, #f8fafc);
+  font-weight: 600;
+  color: var(--fg, #0f172a);
+  justify-content: flex-start;
+  border-right: 2px solid var(--border, #e2e8f0);
+}
+
+.access-col-header--collapsed {
+  background: rgba(59, 130, 246, 0.06);
+  color: #3b82f6;
+  font-style: italic;
+}
+
+.access-sigma-header {
+  font-weight: 600;
+  color: var(--fg, #0f172a);
+  background: var(--bg-secondary, #f8fafc);
+}
+
+.access-col-iter {
+  font-size: 10px;
+  color: var(--text-muted, #94a3b8);
+}
+
+/* ── Table body rows ────────────────────────────────────────────────────── */
+
+.access-table-body {
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+}
+
+/* Each row is its own grid sharing the table column template, so cells line up
+   with the header columns exactly (no per-stage width drift). */
+.access-row {
+  display: grid;
+  grid-template-columns: var(--fa-grid);
+  width: max-content;
+  align-items: stretch;
+  min-height: var(--fa-cell-height, 32px);
+  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
+}
+
+.access-row:last-child {
+  border-bottom: none;
+}
+
+.access-row--dir {
+  background: var(--bg-secondary, #f8fafc);
+  font-weight: 500;
+}
+
+.access-row--file {
+  background: var(--bg, #fff);
+}
+
+.access-row--file:hover {
+  background: rgba(59, 130, 246, 0.04);
+}
+
+/* ── Cells ──────────────────────────────────────────────────────────────── */
+
+.access-cell {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 6px;
+  border-right: 1px solid rgba(226, 232, 240, 0.5);
+}
+
+/* Aggregated Σ cell shown for a collapsed stage — holds the same op pills. */
+.access-cell--stage-agg {
+  flex-wrap: wrap;
+  gap: 3px;
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.access-cell:last-child {
+  border-right: none;
+}
+
+/* Sticky file name column — left:0, inherits row background */
+.access-cell--file {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  width: var(--fa-file-col-width, 220px);
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 3px 8px;
+  /* One indent step == a dir's [chevron 18px + gap 6px], so a child's content
+     (file name, or sub-folder chevron) starts exactly under its parent's
+     folder icon. */
+  padding-left: calc(8px + var(--depth, 0) * 24px);
+  background: inherit;
+  border-right: 2px solid var(--border, #e2e8f0);
+}
+
+.access-row--dir .access-cell--file {
+  background: var(--bg-secondary, #f8fafc);
+}
+
+.access-row--file .access-cell--file {
+  background: var(--bg, #fff);
+}
+
+.access-row--file:hover .access-cell--file {
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.access-cell--empty {
+  color: var(--text-muted, #94a3b8);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.access-cell--clickable {
+  cursor: pointer;
+}
+
+.access-cell--clickable:focus-visible {
+  outline: 2px solid var(--sl-color-primary-600, #2563eb);
+  outline-offset: -2px;
+  border-radius: 2px;
+}
+
+.access-cell--sigma {
+  flex-wrap: wrap;
+  gap: 3px;
+  background: var(--bg-secondary, #f8fafc);
+}
+
+/* ── Dir toggle button ──────────────────────────────────────────────────── */
+
+.access-dir-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-muted, #94a3b8);
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.access-dir-toggle:hover {
+  background: var(--border, #e2e8f0);
+  color: var(--fg, #0f172a);
+}
+
+/* ── File name + category colors ────────────────────────────────────────── */
+
+.access-file-name {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* read → blue (informational, no change) */
+.access-file-name--read {
+  color: #3b82f6;
+}
+
+/* write → green (positive, modified) */
+.access-file-name--write {
+  color: #22c55e;
+}
+
+/* leaked → amber (caution, untracked write) */
+.access-file-name--leaked {
+  color: #f59e0b;
+}
+
+/* ✎ git-tracked write decoration */
+.access-tracked-icon {
+  font-size: 11px;
+  color: var(--text-muted, #94a3b8);
+  margin-left: 3px;
+  flex-shrink: 0;
+}
+
+/* ── Heatmap shading ────────────────────────────────────────────────────── */
+
+/* When heatmap mode is active, shade non-empty data cells by op-count density.
+   --heat (0..1) is set per-cell by the view when _heatmap is true. */
+.access-treetable--heatmap
+  .access-cell:not(.access-cell--empty):not(.access-cell--file):not(.access-cell--sigma):not(.access-cell--stage-agg) {
+  background-color: rgba(249, 115, 22, calc(var(--heat, 0) * 0.28));
+}
+
+/* ── Operation badges (R / W / RW) ─────────────────────────────────────── */
+
+.access-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  font-variant-numeric: tabular-nums;
+}
+
+/* R = green (read) */
+.access-badge--read {
+  background: rgba(34, 197, 94, 0.12);
+  color: #15803d;
+  border-color: rgba(34, 197, 94, 0.3);
+}
+
+/* W = blue (write) */
+.access-badge--write {
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+/* broad scan — amber caution */
+.access-badge--broad {
+  background: rgba(245, 158, 11, 0.12);
+  color: #b45309;
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+/* zero-hit search — red */
+.access-badge--zero-hit {
+  background: rgba(239, 68, 68, 0.1);
+  color: #b91c1c;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.access-op-count {
+  font-size: 8px;
+  font-weight: 500;
+  vertical-align: super;
+  line-height: 1;
+  opacity: 0.85;
+}
+
+/* ── Sigma (Σ) column ───────────────────────────────────────────────────── */
+
+.access-sigma-read {
+  color: #1d4ed8;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.access-sigma-write {
+  color: #15803d;
+  font-weight: 600;
+  font-size: 11px;
+}
+
+/* ── Searches lane ──────────────────────────────────────────────────────── */
+
+.access-searches {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.access-searches-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg, #0f172a);
+  margin: 0;
+}
+
+.access-searches-empty {
+  font-size: 13px;
+  color: var(--text-muted, #94a3b8);
+  margin: 0;
+}
+
+.access-searches-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  /* Fixed layout + explicit column widths so the per-stage grouped tables all
+     line up with each other (and with the ungrouped table). Pattern is the one
+     unsized column, so it absorbs the remaining width. */
+  table-layout: fixed;
+}
+
+.access-searches-table th:nth-child(1),
+.access-searches-table td:nth-child(1) {
+  width: 130px;
+}
+
+.access-searches-table th:nth-child(2),
+.access-searches-table td:nth-child(2) {
+  width: 90px;
+}
+
+.access-searches-table th:nth-child(4),
+.access-searches-table td:nth-child(4) {
+  width: 200px;
+}
+
+.access-searches-table th:nth-child(5),
+.access-searches-table td:nth-child(5) {
+  width: 70px;
+}
+
+.access-searches-table th:nth-child(6),
+.access-searches-table td:nth-child(6) {
+  width: 150px;
+}
+
+/* Long scope paths shouldn't break the fixed columns. */
+.access-searches-table td:nth-child(4) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.access-searches-table th {
+  text-align: left;
+  padding: 6px 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted, #94a3b8);
+  font-weight: 500;
+  border-bottom: 2px solid var(--border, #e2e8f0);
+}
+
+.access-searches-table td {
+  padding: 6px 10px;
+  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
+  vertical-align: middle;
+}
+
+.access-search-row:last-child td {
+  border-bottom: none;
+}
+
+.access-search-pattern {
+  font-family: var(--sl-font-mono, monospace);
+  font-size: 11px;
+  color: var(--fg, #0f172a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Graph-queries lane (graphify / CRG) ────────────────────────────────── */
+
+.access-graph-lane {
+  margin-top: 18px;
+}
+
+/* Graph table columns: Stage · Engine · Op · Query(flex). Only fields both
+   engines reliably expose. Override the searches widths (higher specificity
+   via the doubled class). */
+.access-searches-table.access-graph-table td:nth-child(3),
+.access-searches-table.access-graph-table th:nth-child(3) {
+  width: 120px;
+}
+
+.access-searches-table.access-graph-table td:nth-child(4),
+.access-searches-table.access-graph-table th:nth-child(4) {
+  width: auto;
+}
+
+.access-engine-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.access-engine-badge--graphify {
+  background: rgba(8, 145, 178, 0.12);
+  color: #0e7490;
+  border-color: rgba(8, 145, 178, 0.3);
+}
+
+.access-engine-badge--crg {
+  background: rgba(99, 102, 241, 0.12);
+  color: #4338ca;
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.access-searches-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.access-searches-group-toggle {
+  padding: 2px 8px;
+  font-size: 11px;
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: 4px;
+  background: var(--bg-secondary, #f8fafc);
+  color: var(--text-muted, #94a3b8);
+  cursor: pointer;
+}
+
+.access-searches-group-toggle--active {
+  background: rgba(234, 179, 8, 0.12);
+  border-color: rgba(234, 179, 8, 0.4);
+  color: #854d0e;
+}
+
+.access-searches-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.access-searches-stage-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.access-searches-stage-header {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted, #94a3b8);
+  padding: 4px 10px;
+  background: var(--bg-secondary, #f8fafc);
+  border-radius: 4px;
+}
+
+/* ── Scope-dot: yellow hint on dir rows that appear as a search scope ──── */
+
+.access-scope-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #eab308;
+  margin-left: 4px;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+/* ── Capture integrity strip ────────────────────────────────────────────── */
+
+.access-capture-strip {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 14px;
+  background: var(--bg-secondary, #f8fafc);
+  border: 1px solid var(--border, #e2e8f0);
+  border-radius: var(--radius, 6px);
+  font-size: 12px;
+  color: var(--text-muted, #94a3b8);
+}
+
+.access-capture-strip--degraded {
+  border-color: #f59e0b;
+  background: rgba(245, 158, 11, 0.06);
+  color: #b45309;
+}
+
+.access-capture-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+}
+
+.access-capture-leakage {
+  font-variant-numeric: tabular-nums;
+}
+
+.access-capture-oracle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* ── Dark mode ──────────────────────────────────────────────────────────── */
+
+[data-theme="dark"] .access-file-name--read {
+  color: #93c5fd; /* blue-300 */
+}
+
+[data-theme="dark"] .access-file-name--write {
+  color: #86efac; /* green-300 */
+}
+
+[data-theme="dark"] .access-file-name--leaked {
+  color: #fcd34d; /* amber-300 */
+}
+
+[data-theme="dark"] .access-badge--read {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+[data-theme="dark"] .access-badge--write {
+  background: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+  border-color: rgba(34, 197, 94, 0.4);
+}
+
+[data-theme="dark"] .access-badge--rw {
+  background: rgba(20, 184, 166, 0.2);
+  color: #5eead4;
+  border-color: rgba(20, 184, 166, 0.4);
+}
+
+[data-theme="dark"] .access-sigma-read {
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .access-sigma-write {
+  color: #86efac;
+}
+
+/* ── File name button (reset) ────────────────────────────────────────────── */
+
+.access-file-name-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+}
+
+
+/* ── Drawer panels (file-history / cell-detail) ─────────────────────────── */
+
+.access-file-drawer,
+.access-cell-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  box-shadow: var(--shadow-lg), -2px 0 16px rgba(0, 0, 0, 0.08);
+  z-index: 200;
+  overflow: hidden;
+}
+
+.access-drawer-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.access-drawer-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.access-drawer-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.access-drawer-close:hover {
+  background: var(--bg-secondary);
+  color: var(--fg);
+}
+
+.access-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.access-drawer-section-label {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+}
+
+.access-drawer-empty {
+  margin: 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* ── File history list ───────────────────────────────────────────────────── */
+
+.access-file-history-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.access-file-history-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  font-size: 12px;
+}
+
+.access-history-stage {
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.access-history-iter {
+  color: var(--muted);
+}
+
+.access-history-bead {
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--bg-tertiary);
+  color: var(--muted);
+}
+
+.access-history-agent {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg);
+}
+
+.access-history-read {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+
+.access-history-write {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(34, 197, 94, 0.12);
+  color: #15803d;
+}
+
+/* ── Timeline link ──────────────────────────────────────────────────────── */
+
+.access-timeline-link {
+  align-self: flex-start;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 12px;
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.access-timeline-link:hover {
+  color: var(--accent-hover);
+}
+
+/* ── Cell detail definition list ────────────────────────────────────────── */
+
+.access-cell-detail {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 12px;
+  margin: 0;
+  font-size: 13px;
+}
+
+.access-cell-detail dt {
+  font-weight: 600;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.access-cell-detail dd {
+  margin: 0;
+  color: var(--fg);
+  word-break: break-all;
+}
+
+[data-theme="dark"] .access-history-read {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .access-history-write {
+  background: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}