beadcyte 0.4.0

package/src/web/components/BeadDrawer.vue

@@ -0,0 +1,1883 @@
+<script setup lang="ts">
+// BeadDrawer.vue — right-side detail drawer. Opens when store.openBeadId
+// is set (via row-label click, tooltip Details button, or URL hash) and
+// stays sticky until ESC / click-away / close. Contains:
+//
+//   - Full dossier: id, title, description, priority, status, assignee,
+//     labels, dependency list (both directions), MR link, ship metadata.
+//   - Triage score panel — the eight signals from triage.ts with their
+//     normalized values, unnormalized contributions, and a composite.
+//   - Compact subgraph (BeadSubGraph.vue) with upstream blockers +
+//     downstream dependents up to 4 hops.
+//   - Actions: Copy id, Copy JSON.
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { renderMarkdown } from "../markdown";
+import {
+  X,
+  Copy,
+  Pin,
+  PinOff,
+  ChevronRight,
+  Maximize2,
+  MoreHorizontal,
+} from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { formatEstimate, explainFinish, explainEstimate, EXPLAIN_STARTS } from "../bead-detail";
+import Term from "./Term.vue";
+import { explainScore } from "../triage";
+import { SYNTHETIC_ASSIGNEE_NOTE } from "../view-model";
+import { ref as vueRef } from "vue";
+import BeadSubGraph from "./BeadSubGraph.vue";
+import BeadSubGraphOverlay from "./BeadSubGraphOverlay.vue";
+import TriageMeters from "./TriageMeters.vue";
+import ScoreStrip from "./ScoreStrip.vue";
+import {
+  blockedByHeading,
+  blocksHeading,
+  edgeIsSpent,
+} from "../dep-headings";
+import { buildEconomics, formatHours, PHASE_EXPLANATIONS, beadStages, stageSpans, STAGE_LABELS, STAGE_EXPLANATIONS, type EconomicsPhase } from "../economics";
+import PriorityChip from "./PriorityChip.vue";
+import TypeChip from "./TypeChip.vue";
+
+const store = useBeadsStore();
+
+// ── drawer sizing ────────────────────────────────────────────────────────
+// Width is user-adjustable via the left-edge drag handle and persisted per
+// browser. Below 600px viewport the drawer flips to fullscreen; the drag
+// handle is hidden and the persisted width is ignored.
+
+const DEFAULT_WIDTH = 560;
+const MIN_WIDTH = 360;
+const MAX_WIDTH_MARGIN = 80; // leave at least this much of the underlying page
+const WIDTH_STORAGE_KEY = "beadcyte:drawer-width";
+const FULLSCREEN_BREAKPOINT = 600;
+
+const viewportWidth = ref(
+  typeof window !== "undefined" ? window.innerWidth : 1200,
+);
+const isFullscreen = computed(
+  () => viewportWidth.value < FULLSCREEN_BREAKPOINT,
+);
+
+function loadStoredWidth(): number {
+  if (typeof localStorage === "undefined") return DEFAULT_WIDTH;
+  const raw = localStorage.getItem(WIDTH_STORAGE_KEY);
+  const n = raw ? parseInt(raw, 10) : NaN;
+  return Number.isFinite(n) && n >= MIN_WIDTH ? n : DEFAULT_WIDTH;
+}
+
+const drawerWidth = ref(loadStoredWidth());
+
+const effectiveWidth = computed(() => {
+  if (isFullscreen.value) return viewportWidth.value;
+  const maxW = Math.max(MIN_WIDTH, viewportWidth.value - MAX_WIDTH_MARGIN);
+  return Math.min(Math.max(drawerWidth.value, MIN_WIDTH), maxW);
+});
+
+const isResizing = ref(false);
+
+function onResizeStart(e: MouseEvent) {
+  if (isFullscreen.value) return;
+  e.preventDefault();
+  isResizing.value = true;
+  const startX = e.clientX;
+  const startW = drawerWidth.value;
+  const onMove = (ev: MouseEvent) => {
+    const dx = startX - ev.clientX; // drag left → wider (drawer is anchored right)
+    const next = Math.min(
+      viewportWidth.value - MAX_WIDTH_MARGIN,
+      Math.max(MIN_WIDTH, startW + dx),
+    );
+    drawerWidth.value = next;
+  };
+  const onUp = () => {
+    isResizing.value = false;
+    localStorage.setItem(WIDTH_STORAGE_KEY, String(drawerWidth.value));
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  };
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+
+function onViewportResize() {
+  viewportWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+  window.addEventListener("resize", onViewportResize);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", onViewportResize);
+});
+
+const bead = computed(() => store.drawerBead);
+
+// The drawer header is the only place a bead is added to or removed from the
+// watch list; the pins elsewhere are read-only reflections of it.
+// Where the bead's time went. Measured across a real repo, unclaimed +
+// in-review explains a median 99% of a bead's lifetime, so the phases are
+// worth showing as proportions of the whole rather than as bare figures.
+const econ = computed(() =>
+  bead.value ? buildEconomics(bead.value) : null,
+);
+
+// What if… (bp-q56): stage a change to this bead in the what-if plan. The
+// controls write to the change set, never to bd; the panel shows the diff.
+const whatIfHandles = computed(() => {
+  const roster = (store.calibratedRoster ?? store.roster)?.humans ?? [];
+  const seen = new Set<string>(roster.map((h) => h.handle));
+  for (const b of store.beads) if (b.assignee) seen.add(b.assignee);
+  return [...seen].sort();
+});
+const wiAssignee = vueRef<string>("");
+const wiPriority = vueRef<number>(2);
+watch(() => bead.value?.id, () => {
+  wiAssignee.value = bead.value?.assignee ?? "";
+  wiPriority.value = bead.value?.priority ?? 4;
+}, { immediate: true });
+const stagedHere = computed(() => store.whatIf.filter((c) => "id" in c && c.id === bead.value?.id));
+
+// The stage boundaries (bp-7c9): dated or absent, each saying where it came
+// from, and the hours between the ones that are known.
+const stages = computed(() => (bead.value ? beadStages(bead.value) : []));
+const spans = computed(() => stageSpans(stages.value));
+const knownStages = computed(() => stages.value.filter((s) => s.at !== null).length);
+const fmtStamp = (iso: string) => new Date(iso).toLocaleString(undefined, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" });
+
+// The estimate's source, explained by the estimator that wrote it (bp-67g.47).
+const estimateNote = computed(() => (detail.value ? explainEstimate(detail.value) : null));
+
+/** Segments of the flow bar, in lifecycle order, skipping what's absent. */
+const flowSegments = computed(() => {
+  const e = econ.value;
+  if (!e || e.elapsedHours === null || e.elapsedHours <= 0) return [];
+  const parts: Array<{
+    key: string;
+    label: string;
+    hours: number;
+    /** "" when measured; otherwise the badge text for how it was obtained. */
+    tag: string;
+    derived: boolean;
+    /** Which phase this is, for its explanation (bp-67g.47). */
+    phase: EconomicsPhase;
+  }> = [];
+  // "derived" and "reconstructed" both mean not-measured and both get the
+  // hatch; the badge separates them, because one is arithmetic you can check
+  // and the other is a number another tool admits it inferred.
+  const mark = (p: { kind: string } | null) =>
+    !p || p.kind === "recorded"
+      ? { tag: "", derived: false }
+      : { tag: p.kind === "derived" ? "derived" : "reconstructed", derived: true };
+  if (e.unclaimedHours !== null)
+    parts.push({
+      key: "unclaimed",
+      phase: "unclaimed",
+      label: "unclaimed",
+      hours: e.unclaimedHours,
+      ...mark(e.provenance.unclaimedHours),
+    });
+  if (e.reviewHours !== null)
+    parts.push({
+      key: "review",
+      phase: "review",
+      label: "in review",
+      hours: e.reviewHours,
+      ...mark(e.provenance.reviewHours),
+    });
+  if (e.workedHours !== null)
+    parts.push({
+      key: "worked",
+      phase: "worked",
+      label: "worked",
+      hours: e.workedHours,
+      ...mark(e.provenance.workedHours),
+    });
+  // Never derived and never recorded — it is the arithmetic remainder, so it
+  // is neither measured nor reconstructed and carries no marker.
+  if (e.unaccountedHours !== null && e.unaccountedHours > 0.01)
+    parts.push({
+      key: "other",
+      phase: "unaccounted",
+      label: "unaccounted",
+      hours: e.unaccountedHours,
+      tag: "",
+      derived: false,
+    });
+  const total = e.elapsedHours;
+  return parts.map((p) => ({
+    ...p,
+    pct: Math.min(100, (p.hours / total) * 100),
+  }));
+});
+
+/**
+ * One line per distinct non-measured provenance, so a bead whose unclaimed is
+ * derived AND whose worked hours were reconstructed explains both. The
+ * record's own note is printed verbatim where it left one — a reconstruction
+ * is only judgeable if it says how it was made, and the writer knows that
+ * while beadcyte does not.
+ */
+const provenanceNotes = computed(() => {
+  const e = econ.value;
+  if (!e) return [];
+  type Row = { fields: string[]; plural: boolean; kind: string; detail: string };
+  const rows: Row[] = [];
+  const seen = new Map<string, Row>();
+  // The verb travels with the label: "Work hours" is plural and "Unclaimed
+  // time" is not, so it cannot be inferred from how many fields merged.
+  const add = (
+    field: string,
+    plural: boolean,
+    p: { kind: string; method: string | null; note: string | null } | null,
+  ) => {
+    if (!p || p.kind === "recorded") return;
+    const detail = p.note ?? p.method ?? "";
+    const key = `${p.kind}|${detail}`;
+    const hit = seen.get(key);
+    if (hit) {
+      hit.fields.push(field);
+      hit.plural = true; // two subjects joined by "and" always take "were"
+      return;
+    }
+    const row: Row = { fields: [field], plural, kind: p.kind, detail };
+    seen.set(key, row);
+    rows.push(row);
+  };
+  add("Unclaimed time", false, e.provenance.unclaimedHours);
+  add("Review time", false, e.provenance.reviewHours);
+  add("Work hours", true, e.provenance.workedHours);
+  return rows;
+});
+
+/** The ship record's own note or method, whichever it left. */
+const shipNote = computed(() => {
+  const p = detail.value?.ship?.provenance;
+  if (!p || p.kind === "recorded") return null;
+  return p.note ?? p.method;
+});
+
+const isWatched = computed(() =>
+  bead.value ? store.watchedSet.has(bead.value.id) : false,
+);
+
+// ── page scroll lock ──────────────────────────────────────────────────────
+// The drawer is a fixed overlay, so the page behind it keeps its own
+// scrollbar — a third one beside the drawer's, and a wheel that misses the
+// drawer scrolls the Gantt underneath. Lock the page while the drawer is
+// open, padding the width the scrollbar was occupying so the layout behind
+// doesn't jump sideways as it disappears.
+let lockedPadding = "";
+let lockedOverflow = "";
+
+function lockPageScroll() {
+  const el = document.documentElement;
+  if (el.style.overflow === "hidden") return;
+  const barWidth = window.innerWidth - el.clientWidth;
+  lockedOverflow = el.style.overflow;
+  lockedPadding = el.style.paddingRight;
+  el.style.overflow = "hidden";
+  if (barWidth > 0) el.style.paddingRight = `${barWidth}px`;
+}
+
+function unlockPageScroll() {
+  const el = document.documentElement;
+  if (el.style.overflow !== "hidden") return;
+  el.style.overflow = lockedOverflow;
+  el.style.paddingRight = lockedPadding;
+}
+
+watch(
+  () => !!bead.value,
+  (open) => (open ? lockPageScroll() : unlockPageScroll()),
+  { immediate: true },
+);
+
+// Unmounting with the drawer open would otherwise strand the page unable
+// to scroll.
+onBeforeUnmount(unlockPageScroll);
+
+// ── triage panel collapse state ──────────────────────────────────────────
+// Signal breakdown is dense and rarely the primary interest. Show the
+// composite score by default; hide the full table behind an expand link.
+const triageOpen = ref(false);
+
+// ── description → HTML ───────────────────────────────────────────────────
+// Through markdown.ts, the one renderer (shared with the changelog viewer);
+// the trust argument for running without a sanitizer lives there.
+const descriptionHtml = computed(() => {
+  const src = bead.value?.description;
+  if (!src) return "";
+  return renderMarkdown(src);
+});
+const triage = computed(() =>
+  bead.value ? store.triage.get(bead.value.id) ?? null : null,
+);
+const detail = computed(() =>
+  bead.value ? store.beadDetailFor(bead.value.id) : null,
+);
+
+const blockedByList = computed(() => {
+  if (!bead.value) return [];
+  const byId = new Map(store.beads.map((b) => [b.id, b] as const));
+  return (bead.value.dependencies ?? [])
+    .filter((d) => d.type === "blocks")
+    .map((d) => byId.get(d.depends_on_id))
+    .filter((b): b is NonNullable<typeof b> => !!b);
+});
+
+const blocksList = computed(() => {
+  // Reverse edges: who depends on THIS bead?
+  if (!bead.value) return [];
+  const rootId = bead.value.id;
+  return store.beads.filter((b) =>
+    (b.dependencies ?? []).some(
+      (d) => d.type === "blocks" && d.depends_on_id === rootId,
+    ),
+  );
+});
+
+const childrenList = computed(() => {
+  // Show child beads (beads that have this bead as their parent)
+  if (!bead.value) return [];
+  return store.beads.filter((b) => b.parent === bead.value?.id);
+});
+
+// An epic's own dependency neighbourhood is almost always the epic alone —
+// epics carry parent/child edges, not blocks edges — so an epic's drawer
+// shows the graph of its children instead: every child, with the blocks
+// edges between them (bp-67g.59). The ±4 hop view survives on an epic only
+// when the epic has blocks edges of its own, or has no children to show;
+// otherwise it would be a second graph saying nothing.
+const isEpic = computed(() => bead.value?.issue_type === "epic");
+const showChildrenGraph = computed(
+  () => isEpic.value && childrenList.value.length > 0,
+);
+const showNeighbourhood = computed(
+  () =>
+    !showChildrenGraph.value ||
+    blockedByList.value.length > 0 ||
+    blocksList.value.length > 0,
+);
+
+// bp-67g.60: a child can zoom out from its own ±4 hops to its epic's whole
+// children graph — the one the epic's own drawer shows — with itself kept as
+// the focal node, so the switch reads as a zoom out rather than a change of
+// subject. Offered only when there is something to zoom out to: a parent
+// with more than one child. Resets to the bead-rooted view whenever the
+// drawer moves to another bead, which is the safer default when a click on
+// a node changes the subject.
+const parentBead = computed(() =>
+  bead.value?.parent ? store.beads.find((b) => b.id === bead.value!.parent) ?? null : null,
+);
+const siblingCount = computed(() =>
+  parentBead.value ? store.beads.filter((b) => b.parent === parentBead.value!.id).length : 0,
+);
+const canZoomOut = computed(
+  () => showNeighbourhood.value && !showChildrenGraph.value && !!parentBead.value && siblingCount.value > 1,
+);
+// In the store since bp-67g.45, so the s key can flip it; openBead resets
+// it to the bead-rooted view whenever the drawer moves to another bead.
+const subgraphScope = computed({
+  get: () => store.drawerSubgraphScope,
+  set: (v: "bead" | "epic") => store.setDrawerSubgraphScope(v),
+});
+const subgraphHint = computed(() => {
+  if (showChildrenGraph.value) return "the epic's own ±4 hops";
+  if (canZoomOut.value && subgraphScope.value === "epic")
+    return `all ${siblingCount.value} children of ${parentBead.value!.id}`;
+  return "±4 hops";
+});
+
+// The children graph at full viewport, for epics too large for a drawer
+// column. Closes whenever the drawer moves to another bead — including a
+// click on one of its own nodes, which is the point of clicking one.
+const childrenGraphFullscreen = ref(false);
+watch(
+  () => bead.value?.id,
+  () => {
+    childrenGraphFullscreen.value = false;
+  },
+);
+
+function close() {
+  store.closeBead();
+}
+
+// Which action button just fired a copy — used to flash a brief "Copied ✓"
+// label on the button. Keyed by action name so multiple buttons don't step
+// on each other's flashes.
+const copiedFlash = ref<string | null>(null);
+let copiedTimer: ReturnType<typeof setTimeout> | null = null;
+
+function flashCopied(name: string) {
+  if (copiedTimer) clearTimeout(copiedTimer);
+  copiedFlash.value = name;
+  copiedTimer = setTimeout(() => {
+    copiedFlash.value = null;
+  }, 900);
+}
+
+function copyId() {
+  if (!bead.value) return;
+  navigator.clipboard.writeText(bead.value.id);
+  flashCopied("id");
+}
+
+function copyIdFromHeader() {
+  if (!bead.value) return;
+  navigator.clipboard.writeText(bead.value.id);
+  flashCopied("head-id");
+}
+
+function copyJson() {
+  if (!bead.value) return;
+  navigator.clipboard.writeText(JSON.stringify(bead.value, null, 2));
+  flashCopied("json");
+}
+
+function selectFromSubgraph(id: string) {
+  store.openBead(id);
+}
+
+function formatDate(iso: string | null | undefined): string {
+  if (!iso) return "—";
+  return new Date(iso).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+/** "Mon 8 Sep", with the year once it isn't this one. */
+function formatDay(d: Date): string {
+  const sameYear = d.getFullYear() === new Date().getFullYear();
+  return d.toLocaleDateString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    ...(sameYear ? {} : { year: "numeric" }),
+  });
+}
+
+function fmtPct(v: number): string {
+  return `${(v * 100).toFixed(1)}%`;
+}
+
+function fmtNum(v: number): string {
+  return v.toFixed(4);
+}
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition name="drawer">
+      <div
+        v-if="bead"
+        class="bead-drawer-root"
+        :class="{ 'is-fullscreen': isFullscreen, 'is-resizing': isResizing }"
+      >
+        <div class="drawer-backdrop" @click="close" />
+        <aside
+          class="drawer"
+          :style="{ width: effectiveWidth + 'px' }"
+        >
+          <div
+            v-if="!isFullscreen"
+            class="resize-handle"
+            @mousedown="onResizeStart"
+            title="Drag to resize"
+          />
+          <header class="drawer-header">
+            <div class="head-line">
+              <code
+                class="head-id"
+                :class="{ 'is-copied': copiedFlash === 'head-id' }"
+                :title="`Click to copy · ${bead.id}`"
+                @click="copyIdFromHeader"
+              >{{ copiedFlash === 'head-id' ? 'copied ✓' : bead.id }}</code>
+              <PriorityChip :priority="bead.priority" />
+              <span class="pill" :class="`status-${bead.status}`">
+                {{ bead.status.replace(/_/g, " ") }}
+              </span>
+              <TypeChip :type="bead.issue_type" />
+              <div class="spacer" />
+              <!-- The keyboard route to the quick actions (bp-ocs); the
+                   menu anchors under this button. -->
+              <button
+                class="btn ghost actions-btn"
+                type="button"
+                aria-label="Actions: claim, assign, spec:ready, label, defer"
+                title="Actions (a)"
+                aria-haspopup="menu"
+                @click="(e) => { const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); store.openContextMenu(bead!.id, r.left, r.bottom + 4); }"
+              >
+                <MoreHorizontal class="icon" />
+              </button>
+              <button
+                class="btn ghost watch-toggle"
+                :class="{ 'is-watched': isWatched }"
+                :aria-pressed="isWatched"
+                :aria-label="isWatched ? 'Unwatch this bead' : 'Watch this bead'"
+                :title="isWatched ? 'Remove from watch list' : 'Add to watch list'"
+                @click="store.toggleWatch(bead.id)"
+              >
+                <component :is="isWatched ? PinOff : Pin" class="icon" />
+              </button>
+              <button class="btn ghost" @click="close" aria-label="Close">
+                <X class="icon" />
+              </button>
+            </div>
+            <h2 class="drawer-title">{{ bead.title }}</h2>
+          </header>
+
+          <div class="drawer-body">
+            <!-- Actions row -->
+            <div class="action-row">
+              <button class="btn" @click="copyId">
+                <Copy class="icon" />
+                <span v-if="copiedFlash === 'id'" class="flash">Copied ✓</span>
+                <span v-else>Copy id</span>
+              </button>
+              <button class="btn" @click="copyJson">
+                <Copy class="icon" />
+                <span v-if="copiedFlash === 'json'" class="flash">Copied ✓</span>
+                <span v-else>Copy JSON</span>
+              </button>
+            </div>
+
+            <!-- Triage score panel — breakdown table hidden by default,
+                 shown behind an expand link. -->
+            <section v-if="triage" class="section triage-section">
+              <div class="triage-summary">
+                <span class="score-value">{{ fmtPct(triage.score) }}</span>
+                <Term class="score-label" :note="explainScore()">triage score</Term>
+                <button
+                  type="button"
+                  class="btn btn-subtle triage-toggle"
+                  @click="triageOpen = !triageOpen"
+                >
+                  <ChevronRight
+                    class="icon chevron"
+                    :class="{ 'is-open': triageOpen }"
+                  />
+                  {{ triageOpen ? "hide breakdown" : "show breakdown" }}
+                </button>
+              </div>
+              <!-- The score in its population (bp-67g.28): percentile line and a
+                   histogram of the open beads' scores with this bead marked.
+                   Always shown; the per-signal breakdown stays behind the toggle. -->
+              <ScoreStrip :population="store.triageScorePopulation" :score="triage.score" />
+              <TriageMeters
+                v-if="triageOpen"
+                :breakdown="triage.breakdown"
+                :population="store.triageSignalPopulation"
+              />
+            </section>
+
+            <!-- Subgraph. An epic gets the graph of all its children; the
+                 hop-bounded neighbourhood is for everything else, and for an
+                 epic that has blocks edges of its own (see showChildrenGraph). -->
+            <section v-if="showChildrenGraph" class="section">
+              <h3 class="with-action">
+                Subgraph
+                <span class="hint">(all {{ childrenList.length }} children)</span>
+                <button
+                  class="btn ghost expand-btn"
+                  type="button"
+                  title="Show full screen"
+                  aria-label="Show the children graph full screen"
+                  @click="childrenGraphFullscreen = true"
+                >
+                  <Maximize2 class="icon" />
+                </button>
+              </h3>
+              <BeadSubGraphOverlay
+                v-if="childrenGraphFullscreen"
+                :epic="bead"
+                :beads="store.beads"
+                :child-count="childrenList.length"
+                @close="childrenGraphFullscreen = false"
+                @select="selectFromSubgraph"
+              />
+              <BeadSubGraph
+                :root-bead="bead"
+                :beads="store.beads"
+                mode="children"
+                @select="selectFromSubgraph"
+              />
+            </section>
+            <section v-if="showNeighbourhood" class="section">
+              <h3 :class="{ 'with-action': canZoomOut }">
+                Subgraph
+                <span class="hint">({{ subgraphHint }})</span>
+                <div
+                  v-if="canZoomOut"
+                  class="scope-toggle"
+                  role="group"
+                  aria-label="Subgraph scope"
+                >
+                  <button
+                    type="button"
+                    :class="{ 'is-active': subgraphScope === 'bead' }"
+                    :aria-pressed="subgraphScope === 'bead'"
+                    title="This bead's blockers and dependents, up to 4 hops"
+                    @click="subgraphScope = 'bead'"
+                  >this bead</button>
+                  <button
+                    type="button"
+                    :class="{ 'is-active': subgraphScope === 'epic' }"
+                    :aria-pressed="subgraphScope === 'epic'"
+                    title="Every child of the parent epic, with this bead marked"
+                    @click="subgraphScope = 'epic'"
+                  >whole epic</button>
+                </div>
+              </h3>
+              <BeadSubGraph
+                v-if="canZoomOut && subgraphScope === 'epic' && parentBead"
+                :root-bead="parentBead"
+                :beads="store.beads"
+                mode="children"
+                :focal-id="bead.id"
+                @select="selectFromSubgraph"
+              />
+              <BeadSubGraph
+                v-else
+                :root-bead="bead"
+                :beads="store.beads"
+                @select="selectFromSubgraph"
+              />
+            </section>
+
+            <!-- Dossier -->
+            <section class="section">
+              <h3>Details</h3>
+              <dl class="dossier">
+                <!-- The recorded assignee, or the scheduler's synthetic one
+                     with a marker that explains itself (bp-67g.47). The Gantt
+                     tooltip already showed the synthetic handle; the drawer
+                     showing no assignee for the same bead read as the two
+                     disagreeing. -->
+                <template v-if="bead.assignee || detail?.assignee">
+                  <dt>Assignee</dt>
+                  <dd>
+                    <code>{{ bead.assignee ?? detail?.assignee }}</code>
+                    <Term
+                      v-if="!bead.assignee && detail?.syntheticAssignee"
+                      class="hint synth-mark"
+                      :note="SYNTHETIC_ASSIGNEE_NOTE"
+                    >inferred by the scheduler</Term>
+                  </dd>
+                </template>
+                <template v-if="bead.parent">
+                  <dt>Parent</dt>
+                  <dd>
+                    <a href="#" @click.prevent="store.openBead(bead.parent!)">
+                      <code>{{ bead.parent }}</code>
+                    </a>
+                  </dd>
+                </template>
+                <template v-if="(bead.labels?.length ?? 0) > 0">
+                  <dt>Labels</dt>
+                  <dd class="labels">
+                    <span v-for="l in bead.labels" :key="l" class="label-pill">
+                      {{ l }}
+                    </span>
+                  </dd>
+                </template>
+                <dt>Created</dt>
+                <dd>{{ formatDate(bead.created_at) }}</dd>
+                <dt>Updated</dt>
+                <dd>{{ formatDate(bead.updated_at) }}</dd>
+                <template v-if="bead.started_at">
+                  <dt>Started</dt>
+                  <dd>{{ formatDate(bead.started_at) }}</dd>
+                </template>
+                <template v-if="bead.closed_at">
+                  <dt>Closed</dt>
+                  <dd>{{ formatDate(bead.closed_at) }}</dd>
+                </template>
+                <!-- One row, not one per evidence form. A bead can carry an
+                     MR and a commit, and it can carry a good MR alongside a
+                     commit that was rejected — splitting those into separate
+                     rows reads as separate events. -->
+                <template v-if="detail?.ship || detail?.shipProblem">
+                  <dt>Ship</dt>
+                  <dd class="ship-evidence">
+                    <a
+                      v-if="detail.ship?.mrUrl"
+                      :href="detail.ship.mrUrl"
+                      target="_blank"
+                      rel="noopener"
+                    >
+                      {{ detail.ship.mrUrl }}
+                    </a>
+                    <code
+                      v-if="detail.ship?.shortCommit"
+                      :title="detail.ship.commit ?? undefined"
+                    >
+                      {{ detail.ship.shortCommit }}
+                    </code>
+                    <!-- Same badge vocabulary as the phase bar: a marker
+                         means "not measured at close time", wherever it
+                         appears. -->
+                    <span
+                      v-if="detail.ship && detail.ship.provenance.kind !== 'recorded'"
+                      class="flow-derived"
+                    >{{ detail.ship.provenance.kind }}</span>
+                    <span v-if="detail.shipProblem" class="ship-problem">
+                      {{ detail.shipProblem }}
+                    </span>
+                  </dd>
+                </template>
+                <template
+                  v-if="detail?.ship && detail.ship.provenance.kind !== 'recorded'"
+                >
+                  <dt></dt>
+                  <dd class="ship-problem">
+                    Ship evidence was
+                    {{ detail.ship.provenance.kind }}, not recorded at
+                    close<template v-if="shipNote">: {{ shipNote }}</template>.
+                  </dd>
+                </template>
+                <template v-if="detail?.estimateSource">
+                  <dt>Estimate</dt>
+                  <dd>
+                    <template v-if="detail.estimateDays !== null">
+                      {{ formatEstimate(detail.estimateDays) }} ·
+                    </template>
+                    <Term v-if="estimateNote" class="hint" :note="estimateNote">{{ detail.estimateSource }}</Term>
+                    <span v-else class="hint">{{ detail.estimateSource }}</span>
+                  </dd>
+                </template>
+                <!-- Same dates the Gantt tooltip shows, from the same
+                     buildBeadDetail call — a date in one place and a day
+                     offset in the other is worse than either (bp-67g.38). -->
+                <template v-if="detail?.scheduled">
+                  <!-- Only for work that has NOT begun. An in-flight bead
+                       already has a measured `Started` row above, and the
+                       scheduler's start for it is the same date — two rows
+                       labelled "Started" showing the same day in two formats
+                       read as a bug, which is what they were. -->
+                  <template v-if="!detail.scheduled.inFlight">
+                    <dt><Term :note="EXPLAIN_STARTS">Starts</Term></dt>
+                    <dd>
+                      {{ formatDay(detail.scheduled.startDate) }}
+                      <span class="hint">{{ detail.scheduled.spanDays }}d</span>
+                    </dd>
+                  </template>
+                  <dt>
+                    <Term :note="explainFinish(detail.scheduled)">
+                      {{ detail.scheduled.beyondHorizon ? "Finishes after" : "Projected finish" }}
+                    </Term>
+                  </dt>
+                  <dd>
+                    <template v-if="detail.scheduled.beyondHorizon">
+                      <span class="beyond">
+                        {{ formatDay(detail.scheduled.endDate) }} — the end of
+                        the scheduling window, not a projection
+                      </span>
+                    </template>
+                    <template v-else>
+                      {{ formatDay(detail.scheduled.endDate) }}
+                    </template>
+                    <!-- The span moves here when the start row is gone, so
+                         it appears exactly once either way. The separator is
+                         load-bearing: "Thu, Sep 3" followed by "1d" reads as
+                         "Sep 31" without it. -->
+                    <template v-if="detail.scheduled.inFlight">
+                      ·
+                      <span class="hint">{{ detail.scheduled.spanDays }}d</span>
+                    </template>
+                    <!-- Two clocks (bp-m0g): the work, and the waiting the
+                         landing includes. -->
+                    <span v-if="detail.scheduled.workDays !== null" class="hint work-wait">
+                      · work {{ formatEstimate(detail.scheduled.workDays) }}<template v-if="detail.scheduled.waitBeforeDays + detail.scheduled.waitAfterDays > 0.01">
+                        · waiting {{ formatEstimate(detail.scheduled.waitBeforeDays + detail.scheduled.waitAfterDays) }}</template>
+                    </span>
+                  </dd>
+                </template>
+              </dl>
+            </section>
+
+            <!-- What if… (bp-q56): reassign, reprioritise, mark ready — in
+                 the what-if plan, not in bd. -->
+            <section v-if="bead.status !== 'closed'" class="section whatif-section">
+              <h3>What if…</h3>
+              <div class="whatif-row">
+                <label>
+                  <span>assign to</span>
+                  <select v-model="wiAssignee">
+                    <option value="">unassigned</option>
+                    <option v-for="h in whatIfHandles" :key="h" :value="h">{{ h }}</option>
+                  </select>
+                </label>
+                <button type="button" class="btn btn-subtle" :disabled="(wiAssignee || null) === (bead.assignee ?? null)" @click="store.addWhatIf({ kind: 'reassign', id: bead.id, assignee: wiAssignee || null })">stage</button>
+              </div>
+              <div class="whatif-row">
+                <label>
+                  <span>priority</span>
+                  <select v-model.number="wiPriority">
+                    <option v-for="p in [0, 1, 2, 3, 4]" :key="p" :value="p">P{{ p }}</option>
+                  </select>
+                </label>
+                <button type="button" class="btn btn-subtle" :disabled="wiPriority === (bead.priority ?? 4)" @click="store.addWhatIf({ kind: 'priority', id: bead.id, priority: wiPriority })">stage</button>
+              </div>
+              <div class="whatif-row">
+                <span class="whatif-label">spec:ready</span>
+                <button type="button" class="btn btn-subtle" @click="store.addWhatIf({ kind: 'spec-ready', id: bead.id, ready: !(bead.labels ?? []).includes('spec:ready') })">
+                  {{ (bead.labels ?? []).includes('spec:ready') ? "stage: remove" : "stage: mark" }}
+                </button>
+              </div>
+              <p v-if="stagedHere.length" class="hint">{{ stagedHere.length }} change{{ stagedHere.length === 1 ? "" : "s" }} staged for this bead — see the what-if panel.</p>
+              <p v-else class="hint">Staged changes re-plan everything without writing to bd; the panel shows what moves.</p>
+            </section>
+
+            <!-- Economics. Recorded on a minority of beads, so the whole
+                 section is absent rather than showing empty rows — but the
+                 queue wait is derivable from timestamps the tracker already
+                 holds, which is enough to draw on far more of them. -->
+            <section v-if="econ && (econ.hasAny || econ.hasDerived || knownStages > 1)" class="section">
+              <h3>Economics</h3>
+
+              <div v-if="flowSegments.length" class="flow">
+                <div class="flow-bar">
+                  <div
+                    v-for="seg in flowSegments"
+                    :key="seg.key"
+                    class="flow-seg"
+                    :class="[`seg-${seg.key}`, { 'is-derived': seg.derived }]"
+                    :style="{ width: seg.pct + '%' }"
+                    :title="`${seg.label} — ${formatHours(seg.hours)}${
+                      seg.derived ? ' (derived, not recorded)' : ''
+                    }`"
+                  />
+                </div>
+                <ul class="flow-key">
+                  <li v-for="seg in flowSegments" :key="seg.key">
+                    <span
+                      class="flow-swatch"
+                      :class="[`seg-${seg.key}`, { 'is-derived': seg.derived }]"
+                    />
+                    <Term class="flow-label" :note="PHASE_EXPLANATIONS[seg.phase]">{{ seg.label }}</Term>
+                    <!-- Marked on the row, not only by the hatch, so the
+                         distinction survives a colour-blind reader and a
+                         greyscale print. -->
+                    <span v-if="seg.tag" class="flow-derived">{{ seg.tag }}</span>
+                    <span class="flow-hours">{{ formatHours(seg.hours) }}</span>
+                    <span class="flow-pct">{{ seg.pct.toFixed(0) }}%</span>
+                  </li>
+                </ul>
+                <p class="flow-total">
+                  {{ formatHours(econ.elapsedHours ?? 0) }} from created to
+                  {{ econ.elapsedOngoing ? "now, still open" : "closed" }}
+                  <em v-if="econ.overAccounted">
+                    · recorded phases exceed that span
+                  </em>
+                </p>
+                <!-- What "derived" means, once, rather than per row. Nobody
+                     measured this bead; the queue wait is the subtraction a
+                     ship-record would have done at close time. -->
+                <p
+                  v-for="(n, i) in provenanceNotes"
+                  :key="i"
+                  class="econ-note"
+                >
+                  {{ n.fields.join(" and ") }}
+                  {{ n.plural ? "were" : "was" }} {{ n.kind }}, not
+                  measured<template v-if="n.detail">:
+                    <code>{{ n.detail }}</code></template
+                  >.
+                </p>
+              </div>
+
+              <!-- Stage boundaries (bp-7c9): filed, assigned, started, first
+                   MR, first QA, merged. Shown whenever more than filed is
+                   known; an absent boundary is printed as absent, because the
+                   tracker never sees an MR open or QA begin unless the close
+                   script writes it. -->
+              <dl v-if="knownStages > 1" class="stages">
+                <template v-for="st in stages" :key="st.id">
+                  <dt><Term :note="STAGE_EXPLANATIONS[st.id]">{{ STAGE_LABELS[st.id] }}</Term></dt>
+                  <dd>
+                    <template v-if="st.at">
+                      {{ fmtStamp(st.at) }}
+                      <span v-if="st.provenance && st.provenance.kind !== 'recorded'" class="flow-derived">{{ st.provenance.kind }}</span>
+                    </template>
+                    <span v-else class="stage-absent">not recorded</span>
+                  </dd>
+                </template>
+              </dl>
+              <p v-if="spans.length" class="stage-spans">
+                <template v-for="(sp, i) in spans" :key="sp.from + sp.to">
+                  <template v-if="i"> · </template>{{ STAGE_LABELS[sp.from] }} → {{ STAGE_LABELS[sp.to] }} {{ formatHours(sp.hours) }}<template v-if="sp.derived"> (derived)</template>
+                </template>
+              </p>
+
+              <!-- Absent work data is stated, because a bead with no logged
+                   sessions did not take zero hours. -->
+              <p v-if="econ.workedHours === null" class="econ-note">
+                Work hours not recorded for this bead.
+              </p>
+
+              <div v-if="econ.seats.length" class="econ-seats">
+                <div v-for="s in econ.seats" :key="s.seat" class="econ-seat">
+                  <div class="econ-seat-head">
+                    <code>{{ s.seat }}</code>
+                    <span class="econ-seat-hours">{{ formatHours(s.hours) }}</span>
+                  </div>
+                  <div
+                    v-for="(sess, i) in s.sessions"
+                    :key="i"
+                    class="econ-session"
+                  >
+                    <span class="econ-session-date">{{ sess.date ?? "undated" }}</span>
+                    <span class="econ-session-human">{{ sess.human ?? "—" }}</span>
+                    <span class="econ-session-hours">{{ formatHours(sess.hours) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <dl
+                v-if="econ.totals.agentHours !== null || econ.totals.tokensIn !== null || econ.totals.tokensOut !== null"
+                class="econ-totals"
+              >
+                <template v-if="econ.totals.agentHours !== null">
+                  <dt>AGENT HOURS</dt>
+                  <dd>{{ formatHours(econ.totals.agentHours) }}</dd>
+                </template>
+                <template v-if="econ.totals.tokensIn !== null">
+                  <dt>TOKENS IN</dt>
+                  <dd>{{ econ.totals.tokensIn.toLocaleString() }}</dd>
+                </template>
+                <template v-if="econ.totals.tokensOut !== null">
+                  <dt>TOKENS OUT</dt>
+                  <dd>{{ econ.totals.tokensOut.toLocaleString() }}</dd>
+                </template>
+              </dl>
+            </section>
+
+            <!-- Dependencies -->
+            <section
+              v-if="blockedByList.length || blocksList.length || childrenList.length"
+              class="section"
+            >
+              <h3>Dependencies</h3>
+              <div v-if="blockedByList.length" class="dep-list">
+                <div class="dep-heading">
+                  {{ blockedByHeading(blockedByList).prefix
+                  }}<Term :note="blockedByHeading(blockedByList).explain"><em>{{ blockedByHeading(blockedByList).tense }}</em></Term>{{ blockedByHeading(blockedByList).suffix }}
+                </div>
+                <div
+                  class="dep-row"
+                  v-for="d in blockedByList"
+                  :key="d.id"
+                  :class="{ 'is-spent': edgeIsSpent(d) }"
+                >
+                  <a href="#" @click.prevent="store.openBead(d.id)">
+                    <code>{{ d.id }}</code>
+                  </a>
+                  <span class="dep-title">{{ d.title }}</span>
+                  <span class="pill status" :class="`status-${d.status}`">
+                    {{ d.status.replace(/_/g, " ") }}
+                  </span>
+                </div>
+              </div>
+              <div v-if="childrenList.length" class="dep-list">
+                <div class="dep-heading">Children:</div>
+                <div class="dep-row" v-for="d in childrenList" :key="d.id">
+                  <a href="#" @click.prevent="store.openBead(d.id)">
+                    <code>{{ d.id }}</code>
+                  </a>
+                  <span class="dep-title">{{ d.title }}</span>
+                  <span class="pill status" :class="`status-${d.status}`">
+                    {{ d.status.replace(/_/g, " ") }}
+                  </span>
+                </div>
+              </div>
+              <div v-if="blocksList.length" class="dep-list">
+                <div class="dep-heading">
+                  {{ blocksHeading(bead.status).prefix
+                  }}<Term :note="blocksHeading(bead.status).explain"><em>{{ blocksHeading(bead.status).tense }}</em></Term>{{ blocksHeading(bead.status).suffix }}
+                </div>
+                <div
+                  class="dep-row"
+                  v-for="d in blocksList"
+                  :key="d.id"
+                  :class="{ 'is-spent': edgeIsSpent(d) }"
+                >
+                  <a href="#" @click.prevent="store.openBead(d.id)">
+                    <code>{{ d.id }}</code>
+                  </a>
+                  <span class="dep-title">{{ d.title }}</span>
+                  <span class="pill status" :class="`status-${d.status}`">
+                    {{ d.status.replace(/_/g, " ") }}
+                  </span>
+                </div>
+              </div>
+            </section>
+
+            <!-- Description rendered as markdown → HTML. Bead descriptions
+                 come from our own bd DB so we don't run a sanitizer; if the
+                 source ever becomes untrusted, pipe through DOMPurify. -->
+            <section v-if="bead.description" class="section description-section">
+              <h3>Description</h3>
+              <div class="description markdown-body" v-html="descriptionHtml" />
+            </section>
+          </div>
+        </aside>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style>
+.bead-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  pointer-events: none;
+}
+
+.drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--c-scrim);
+  pointer-events: auto;
+}
+
+.drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--c-panel);
+  border-left: 1px solid var(--c-border);
+  color: var(--c-text);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+  box-shadow: var(--shadow-drawer);
+  font-family:
+    ui-sans-serif,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+}
+
+.bead-drawer-root.is-fullscreen .drawer {
+  width: 100vw !important;
+  border-left: none;
+}
+
+/* Resize handle: a 6px hit-target on the drawer's left edge. Widens on
+   hover and while dragging so the affordance is discoverable. */
+.resize-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 2;
+  background: transparent;
+  transition: background 0.1s ease-out;
+}
+
+.resize-handle:hover,
+.bead-drawer-root.is-resizing .resize-handle {
+  background: var(--c-accent);
+  opacity: 0.6;
+}
+
+.bead-drawer-root.is-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.15s ease-out;
+}
+.drawer-enter-active .drawer,
+.drawer-leave-active .drawer {
+  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+.drawer-enter-from .drawer,
+.drawer-leave-to .drawer {
+  transform: translateX(100%);
+}
+
+.watch-toggle.is-watched {
+  color: var(--c-accent);
+}
+
+.drawer-header {
+  padding: 14px 18px 12px;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-panel);
+}
+
+.head-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.head-id {
+  color: var(--c-accent);
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 1px 4px;
+  border-radius: 3px;
+  transition: background 0.08s ease-out;
+}
+
+.head-id:hover {
+  background: var(--c-accent-wash-strong);
+}
+
+.head-id.is-copied {
+  color: var(--c-shipped);
+  font-weight: 600;
+}
+
+.pill {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 2px;
+  border: 1px solid var(--c-border);
+  color: var(--c-dim);
+  text-transform: lowercase;
+}
+.pill.pri-p0,
+.pill.pri-p1 { color: var(--c-danger-bright); border-color: var(--c-danger-bright); }
+.pill.pri-p2 { color: var(--c-warning); border-color: var(--c-warning); }
+.pill.status-closed { color: var(--c-shipped); border-color: var(--c-shipped-stroke); }
+.pill.status-in_progress { color: var(--c-in-progress); border-color: var(--c-in-progress); }
+.pill.status-deferred { color: var(--c-dim); }
+
+.drawer-title {
+  margin: 8px 0 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--c-text);
+  overflow-wrap: anywhere;
+}
+
+/* The drawer's single scroll container. The description used to be a second
+   one nested inside it (max-height 480 + overflow auto), so the wheel went to
+   whichever box was under the cursor and a long description was read through
+   a porthole while the fields above it stayed put. Now everything flows and
+   the metadata scrolls away, leaving the description the full height.
+
+   overscroll-behavior stops a wheel past either end from chaining to the
+   Gantt behind the drawer. */
+.drawer-body {
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 16px 18px 24px;
+  flex: 1;
+}
+
+/* Keeps "Description" visible once the metadata has scrolled off, so a long
+   body still says what it is. Sticks to the top of .drawer-body's viewport;
+   the negative offsets let it span the body's padding so text doesn't show
+   through beside it. */
+.section.description-section > h3 {
+  position: sticky;
+  top: -16px;
+  z-index: 1;
+  margin: -16px -18px 10px;
+  padding: 16px 18px 8px;
+  background: var(--c-panel);
+}
+
+.action-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+
+/* Real button styling — filled background, visible border, hover state
+   with slight lift. The tooltip's action row uses the same class so
+   affordances read the same way. */
+.btn {
+  background: var(--c-panel-2);
+  border: 1px solid var(--c-border);
+  color: var(--c-text);
+  font-size: 11px;
+  font-weight: 500;
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  line-height: 1.2;
+  transition: background 0.08s ease-out, border-color 0.08s ease-out, color 0.08s ease-out;
+}
+.btn:hover {
+  background: var(--c-accent-wash-strong);
+  border-color: var(--c-accent);
+  color: var(--c-accent);
+}
+.btn:active {
+  background: var(--c-accent-wash-strong);
+}
+.btn.btn-primary {
+  background: var(--c-accent);
+  color: var(--c-bg);
+  border-color: var(--c-accent);
+}
+.btn.btn-primary:hover {
+  background: var(--c-accent);
+  color: var(--c-bg);
+  opacity: 0.85;
+}
+.btn.btn-subtle {
+  background: transparent;
+  border-color: transparent;
+  color: var(--c-dim);
+  padding: 4px 8px;
+  font-weight: 400;
+}
+.btn.btn-subtle:hover {
+  background: var(--c-accent-wash);
+  color: var(--c-accent);
+  border-color: transparent;
+}
+.btn.ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--c-dim);
+  padding: 4px;
+}
+.btn.ghost:hover {
+  background: var(--c-dim-wash);
+  color: var(--c-text);
+  border-color: transparent;
+}
+
+.btn .flash {
+  color: var(--c-shipped);
+  font-weight: 600;
+}
+
+.chevron {
+  transition: transform 0.15s ease-out;
+}
+.chevron.is-open {
+  transform: rotate(90deg);
+}
+
+.section {
+  margin-bottom: 22px;
+}
+
+.section h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  margin: 0 0 10px;
+  font-weight: 600;
+}
+
+.section h3 .hint {
+  color: var(--c-dim);
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 10px;
+  margin-left: 4px;
+}
+
+/* A section heading that carries a control at its right edge. */
+.section h3.with-action {
+  display: flex;
+  align-items: center;
+}
+
+/* bp-67g.60: the scope toggle sits where the epic's expand button does. */
+.section h3 .scope-toggle {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 2px;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.section h3 .scope-toggle button {
+  font: inherit;
+  font-size: 10px;
+  padding: 1px 7px;
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--c-dim);
+  cursor: pointer;
+}
+
+.section h3 .scope-toggle button.is-active {
+  color: var(--c-accent);
+  border-color: var(--c-accent);
+  background: var(--c-accent-wash);
+}
+
+.section h3 .expand-btn {
+  margin-left: auto;
+}
+
+.section h3 .expand-btn .icon {
+  width: 13px;
+  height: 13px;
+}
+
+.triage-section {
+  margin-bottom: 18px;
+}
+
+.triage-summary {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.score-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--c-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.score-label {
+  color: var(--c-dim);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.triage-toggle {
+  background: transparent;
+  border: none;
+  color: var(--c-accent);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  margin-left: auto;
+  font-family: inherit;
+}
+.triage-toggle:hover { text-decoration: underline; }
+
+/* The breakdown itself is TriageMeters.vue's; nothing of the old table's
+   styling survived it. */
+
+/* A finish clamped to the horizon, not projected. */
+.beyond {
+  color: var(--c-warning-strong);
+  line-height: 1.4;
+}
+
+.dossier {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 4px 12px;
+  margin: 0;
+}
+
+/* Sits after the handle; the template newline between the two inline
+   elements is condensed away, so the gap has to be a margin. */
+.dossier .synth-mark {
+  margin-left: 6px;
+}
+
+/* What if… (bp-q56) */
+.whatif-section .whatif-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 4px 0;
+  font-size: 12px;
+}
+.whatif-section label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+.whatif-section label span,
+.whatif-section .whatif-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  min-width: 70px;
+}
+.whatif-section .whatif-label {
+  flex: 1;
+}
+.whatif-section select {
+  font: inherit;
+  padding: 3px 6px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: 4px;
+  background: var(--c-bg);
+  color: var(--c-text);
+}
+
+/* Stage boundaries (bp-7c9): the dossier's own grid, under the phase bar. */
+.stages {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  gap: 2px 12px;
+  margin: 10px 0 0;
+  font-size: 12px;
+}
+
+.stages dt {
+  color: var(--c-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-top: 2px;
+}
+
+.stages dd {
+  margin: 0;
+}
+
+.stages .stage-absent {
+  color: var(--c-dim);
+  font-style: italic;
+}
+
+.stage-spans {
+  margin: 6px 0 0;
+  font-size: 11px;
+  color: var(--c-dim);
+  line-height: 1.5;
+}
+
+.dossier dt {
+  color: var(--c-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-top: 2px;
+}
+
+.dossier dd {
+  margin: 0;
+  color: var(--c-text);
+  overflow-wrap: anywhere;
+}
+
+.dossier a {
+  color: var(--c-accent);
+  text-decoration: none;
+}
+.dossier a:hover { text-decoration: underline; }
+
+.ship-evidence {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+}
+
+/* The same green the Gantt paints a shipped bar with, so the SHA and the bar
+   it explains agree. Every named style redefines --c-shipped at a comparable
+   lightness, which is what makes it safe as text and not only as a fill. */
+.ship-evidence code {
+  color: var(--c-shipped);
+}
+
+/* A record that was written and did not count. Dim rather than alarming —
+   it is a note to whoever writes the close command, not a problem with the
+   bead. */
+.ship-problem {
+  color: var(--c-dim);
+  font-size: 11px;
+}
+
+.labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.label-pill {
+  background: var(--c-border);
+  color: var(--c-dim);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 2px;
+}
+
+.dep-list {
+  margin-bottom: 12px;
+}
+
+/* The tense word carries the meaning, so it's emphasised rather than
+   buried in the sentence — and as markup, not asterisks in a string. */
+/* ── economics ────────────────────────────────────────────────────────────
+   Phase colours are semantic, not decorative: green is time spent doing the
+   work, blue is time in review, amber is time nobody had picked it up, grey
+   is time the data doesn't explain. Amber dominating is the normal case and
+   the point of showing this at all. */
+.flow-bar {
+  display: flex;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: var(--c-panel-2);
+  margin-bottom: 10px;
+}
+
+.flow-seg {
+  height: 100%;
+  /* A phase can round to a sliver; keep it visible rather than vanishing. */
+  min-width: 2px;
+}
+
+.flow-seg.seg-worked,
+.flow-swatch.seg-worked {
+  background: var(--c-phase-worked);
+}
+.flow-seg.seg-review,
+.flow-swatch.seg-review {
+  background: var(--c-phase-review);
+}
+.flow-seg.seg-unclaimed,
+.flow-swatch.seg-unclaimed {
+  background: var(--c-phase-waiting);
+}
+.flow-seg.seg-other,
+.flow-swatch.seg-other {
+  background: var(--c-phase-other);
+}
+
+/* A derived figure, hatched rather than recoloured. The phase colours are
+   semantic — amber IS queue wait — so provenance has to ride on a second
+   channel or it would collide with the meaning already in the hue. The
+   stripes are the panel colour showing through, so they read as "not solid"
+   against every phase colour and in every named style without needing a
+   variant per phase. Backed up by the word "derived" on the legend row,
+   since a 10px bar's texture is not something to rely on alone.
+
+   Deliberately understated — at full strength the stripes read as hazard
+   tape, and "we did this subtraction for you" is not a warning. */
+.flow-seg.is-derived,
+.flow-swatch.is-derived {
+  background-image: repeating-linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--c-panel-2) 55%, transparent) 0 2px,
+    transparent 2px 6px
+  );
+}
+
+.flow-derived {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-dim);
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  padding: 0 3px;
+  line-height: 1.5;
+}
+
+.flow-key {
+  list-style: none;
+  margin: 0 0 8px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.flow-key li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.flow-swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  flex: none;
+}
+
+.flow-label {
+  color: var(--c-dim);
+}
+
+.flow-hours {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text);
+}
+
+.flow-pct {
+  width: 34px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-dim);
+}
+
+.flow-total {
+  margin: 0 0 10px;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.flow-total em {
+  font-style: normal;
+  color: var(--c-warning);
+}
+
+.econ-note {
+  margin: 0 0 10px;
+  font-size: 11px;
+  color: var(--c-dim);
+  font-style: italic;
+}
+
+.econ-seat {
+  margin-bottom: 8px;
+}
+
+.econ-seat-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 11px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.econ-seat-head code {
+  color: var(--c-accent);
+}
+
+.econ-seat-hours {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.econ-session {
+  display: flex;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--c-dim);
+  padding: 2px 0 2px 10px;
+}
+
+.econ-session-hours {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Was `class="detail-grid econ-totals"`, and .detail-grid is defined nowhere
+   — so this dl rendered as a browser-default definition list, label above
+   indented value. It never showed: only 3 beads in a 558-bead repo carried
+   totals. Reconstructed hours put it on 31 of 78, and it had to be built. */
+.econ-totals {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 3px 12px;
+  margin: 8px 0 0;
+  font-size: 11px;
+}
+
+.econ-totals dt {
+  color: var(--c-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 10px;
+  align-self: baseline;
+}
+
+.econ-totals dd {
+  margin: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text);
+}
+
+.dep-heading em {
+  font-style: normal;
+  font-weight: 700;
+  color: var(--c-text);
+}
+
+/* An edge whose far end has closed no longer binds. Recedes so the live
+   constraints are what stand out in a partially-cleared list. */
+.dep-row.is-spent {
+  opacity: var(--o-spent-edge);
+}
+
+.dep-heading {
+  color: var(--c-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 6px;
+}
+
+.dep-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.dep-row:last-child {
+  border-bottom: none;
+}
+
+.dep-row a {
+  color: var(--c-accent);
+  text-decoration: none;
+}
+.dep-row a:hover { text-decoration: underline; }
+
+.dep-title {
+  flex: 1;
+  color: var(--c-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description.markdown-body {
+  background: var(--c-bg);
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  padding: 14px 16px;
+  color: var(--c-text);
+  font-size: 12px;
+  line-height: 1.55;
+  word-wrap: break-word;
+}
+
+.markdown-body p {
+  margin: 0 0 10px;
+}
+.markdown-body p:last-child { margin-bottom: 0; }
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4 {
+  color: var(--c-text);
+  margin: 14px 0 6px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+.markdown-body h1 { font-size: 15px; }
+.markdown-body h2 { font-size: 14px; }
+.markdown-body h3 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--c-text); }
+.markdown-body h4 { font-size: 12px; color: var(--c-dim); }
+
+.markdown-body ul,
+.markdown-body ol {
+  margin: 0 0 10px;
+  padding-left: 20px;
+}
+
+.markdown-body li {
+  margin-bottom: 3px;
+}
+
+.markdown-body code {
+  background: var(--c-panel-2);
+  padding: 1px 5px;
+  border-radius: 2px;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-accent);
+}
+
+.markdown-body pre {
+  background: var(--c-panel-2);
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  padding: 10px 12px;
+  overflow: auto;
+  margin: 0 0 10px;
+}
+
+.markdown-body pre code {
+  background: transparent;
+  padding: 0;
+  color: var(--c-text);
+  font-size: 11px;
+}
+
+.markdown-body blockquote {
+  border-left: 3px solid var(--c-border);
+  padding: 0 12px;
+  color: var(--c-dim);
+  margin: 0 0 10px;
+}
+
+.markdown-body a {
+  color: var(--c-accent);
+  text-decoration: none;
+}
+.markdown-body a:hover { text-decoration: underline; }
+
+.markdown-body strong { color: var(--c-text); font-weight: 600; }
+.markdown-body em { color: var(--c-text); font-style: italic; }
+
+.markdown-body hr {
+  border: none;
+  border-top: 1px solid var(--c-border);
+  margin: 12px 0;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  margin: 0 0 10px;
+  font-size: 11px;
+}
+
+.markdown-body th,
+.markdown-body td {
+  padding: 4px 8px;
+  border: 1px solid var(--c-border);
+}
+
+.markdown-body th {
+  background: var(--c-panel-2);
+  color: var(--c-dim);
+  text-align: left;
+}
+</style>