beadcyte 0.4.0

package/src/web/components/BeadsGantt.vue

@@ -0,0 +1,2125 @@
+<script setup lang="ts">
+// BeadsGantt.vue — thin renderer over DDV primitives.
+//
+// Consumes the view model (rows/bars/groups + meta) from the Pinia store
+// and paints a SVG Gantt with the same visual vocabulary as the CLI SVG
+// emitter (src/cli.mjs). Bar kinds map 1:1 to CSS classes so the palette
+// tunes globally without touching the render path.
+//
+// Uses ddv#40 (<GanttChart>) once it lands — for now we assemble from
+// <DDV> + <CartesianScaler> + <Axis> + <ThresholdLine>. See
+// https://gitlab.com/incytestudios/ddv/-/work_items/40 for the eventual
+// consolidation target. We manage layout + mouseState directly (via a
+// ResizeObserver) rather than through useChart(), because our fixed
+// row-label column and content-driven height don't fit its resize-driven
+// model — DDV's primitives only require the Layout/MouseState shapes,
+// and we build both from scratch.
+
+import { computed, ref, reactive, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import {
+  DDV,
+  CartesianScaler,
+  ThresholdLine,
+  fromRange,
+  fromTimeFrame,
+} from "@incytestudios/ddv";
+import type { Layout, MouseState } from "@incytestudios/ddv";
+import {
+  eachDayOfInterval,
+  eachWeekOfInterval,
+  eachMonthOfInterval,
+  eachQuarterOfInterval,
+  eachYearOfInterval,
+  format as formatDate,
+  eachHourOfInterval,
+} from "date-fns";
+import "@incytestudios/ddv/style.css";
+import { isWaitKind, type ViewModel, type Bar } from "../view-model";
+import { describeDelta } from "../whatif";
+import {
+  TriangleAlert,
+  ChevronDown,
+  ChevronUp,
+  ArrowRight,
+  Ban,
+  Pin,
+} from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import BeadTooltip from "./BeadTooltip.vue";
+import { useBeadTooltip } from "../composables/useBeadTooltip";
+import {
+  type Viewport,
+  clampViewport,
+  initialViewport,
+  panViewportPx,
+  zoomViewport,
+  centreViewport,
+  scrollMetrics,
+  viewportFromScrollLeft,
+  wheelZoomFactor,
+} from "../gantt-viewport";
+
+const props = defineProps<{
+  vm: ViewModel | null;
+}>();
+
+const store = useBeadsStore();
+
+// ── layout constants ──────────────────────────────────────────────────────
+// These roughly mirror cli.mjs's SVG constants; the interactive Gantt gets
+// a narrower label column and tighter rows. LABEL_COL is user-adjustable
+// (see labelColWidth below) — the other values stay fixed.
+const ROW_H = 20;
+/** Bar height inside a row; the rest is air. style-audit.mjs reads this. */
+const BAR_H = ROW_H - 8;
+const GROUP_H = 26;
+const GROUP_GAP = 6;
+// Left padding before the first text column, on both group headers and rows.
+const WATCH_PIN = 11;
+// Reserved gutter for the watch pin, left of the priority chip. Held open
+// whether or not a row is pinned: a column that appears and disappears would
+// reflow every title the moment you watch something.
+const PIN_COL_W = WATCH_PIN + 10;
+const ID_COL_X = 8;
+const TITLE_COL_X = 78;
+const PRIORITY_COL_W = 24; // reserved right-side gutter for "P#" text
+const AXIS_TOP = 36;
+const AXIS_BOTTOM = 16;
+const RIGHT_PAD = 24;
+
+// ── synthetic-assignee hatch ──────────────────────────────────────────────
+// A bar whose assignee the scheduler inferred keeps its kind's fill and
+// opacity and has diagonal stripes cut out of it by a mask (see <defs> in
+// the template and .bar.synthetic in the styles). Texture rather than a
+// third opacity level: the kinds already spend opacity — future 0.75,
+// backlog 0.35 — and a level between them converging on one of those after
+// compositing is exactly what style-audit.test.mjs keeps catching. The
+// audit reads these two numbers and checks the stripes stay legible at
+// BAR_H, so a "finer stripes" tweak cannot quietly turn the hatch into a
+// paler bar.
+// The least a bar may be drawn (bp-vsr). Spans are honest in the data — a
+// seventeen-minute bead is 0.012 of a day — so at six pixels a day it would
+// vanish; this keeps it a visible sliver. It is pixels, not days, so zooming
+// in reveals the real length instead of a floor pretending to be one.
+const MIN_BAR_PX = 3;
+
+// Wait segments (bp-6cg) are drawn dulled and CUT SHORT: at most this many
+// pixels, anchored where the wait ends (the landing, for review; the work's
+// start, for unclaimed), with a dotted connector standing in for the rest.
+// Their length is not to scale; the date they end on is.
+const MAX_WAIT_PX = 24;
+const WAIT_INSET = 3; // px shaved off top and bottom: secondary to the work
+
+interface WaitGeo {
+  x: number;
+  w: number;
+  gap: { x1: number; x2: number } | null;
+}
+
+/** Where a wait bar is drawn given the scaler, and the gap it elides. */
+function waitGeo(bar: Bar, scale: (d: Date) => number): WaitGeo {
+  const x1 = scale(dateAt(bar.startDay));
+  const x2 = scale(dateAt(bar.endDay));
+  const full = Math.max(0, x2 - x1);
+  if (full <= MAX_WAIT_PX) return { x: x1, w: Math.max(MIN_BAR_PX, full), gap: null };
+  // Anchor at the end that means something: the landing for review, the
+  // work's start for unclaimed. Both are the wait's END.
+  return { x: x2 - MAX_WAIT_PX, w: MAX_WAIT_PX, gap: { x1, x2: x2 - MAX_WAIT_PX } };
+}
+
+const HATCH_PITCH = 6; // px from one stripe to the next, across the stripes
+const HATCH_STRIPE = 3; // px of bar kept per pitch; the rest is cut away
+
+// ── label column width (user-adjustable, persisted) ──────────────────────
+// Users drag the divider between the label column and the plot to make
+// room for long titles. Width is clamped so the plot always retains a
+// usable minimum, and the current value round-trips through localStorage
+// so the choice sticks per browser.
+const LABEL_COL_MIN = 180;
+const LABEL_COL_MAX = 640;
+const LABEL_COL_DEFAULT = 420;
+const LABEL_COL_STORAGE_KEY = "beadcyte:label-col-width";
+
+function loadStoredLabelCol(): number {
+  if (typeof localStorage === "undefined") return LABEL_COL_DEFAULT;
+  const raw = localStorage.getItem(LABEL_COL_STORAGE_KEY);
+  const n = raw ? parseInt(raw, 10) : NaN;
+  return Number.isFinite(n) && n >= LABEL_COL_MIN && n <= LABEL_COL_MAX
+    ? n
+    : LABEL_COL_DEFAULT;
+}
+
+const labelColWidth = ref(loadStoredLabelCol());
+const isResizingLabelCol = ref(false);
+
+function onLabelColResizeStart(e: MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  isResizingLabelCol.value = true;
+  const startX = e.clientX;
+  const startW = labelColWidth.value;
+  const svgRect = wrapperEl.value?.getBoundingClientRect();
+  const maxAllowed = svgRect
+    ? Math.min(LABEL_COL_MAX, svgRect.width - 200) // reserve at least 200px for plot
+    : LABEL_COL_MAX;
+  const onMove = (ev: MouseEvent) => {
+    const dx = ev.clientX - startX;
+    const next = Math.min(
+      Math.max(LABEL_COL_MIN, startW + dx),
+      maxAllowed,
+    );
+    labelColWidth.value = next;
+  };
+  const onUp = () => {
+    isResizingLabelCol.value = false;
+    localStorage.setItem(LABEL_COL_STORAGE_KEY, String(labelColWidth.value));
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  };
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+
+// ── content-driven geometry ───────────────────────────────────────────────
+
+// groupBy "none" puts every row in one synthetic group with nothing worth
+// labelling, so the band collapses and the rows reclaim the space.
+const isUngrouped = computed(() => store.groupBy === "none");
+
+/** Height of the strip that carries the expand pill when ungrouped. */
+const PILL_STRIP_H = 22;
+
+/**
+ * Per-group band height. Ungrouped collapses to zero — except for the one
+ * case where the band still has a job: truncation applies to the single
+ * bucket just as it does to any other, and the "show N more" pill lives in
+ * the band. Losing it would strand the hidden rows with no way to reach
+ * them, so a slim strip survives to carry the pill and nothing else.
+ */
+const groupHeights = computed<number[]>(() => {
+  if (!props.vm) return [];
+  return props.vm.groups.map((g) => {
+    if (!isUngrouped.value) return GROUP_H;
+    const needsPill = g.truncatedCount > 0 || !!store.expandedGroups[g.id];
+    return needsPill ? PILL_STRIP_H : 0;
+  });
+});
+
+const groupGap = computed(() => (isUngrouped.value ? 0 : GROUP_GAP));
+
+const contentHeight = computed(() => {
+  if (!props.vm) return 200;
+  const rowsPx = props.vm.rows.length * ROW_H;
+  const bandsPx = groupHeights.value.reduce((a, b) => a + b, 0);
+  const gapsPx = props.vm.groups.length * groupGap.value;
+  return AXIS_TOP + AXIS_BOTTOM + rowsPx + bandsPx + gapsPx + 8;
+});
+
+const rowYByIndex = computed<number[]>(() => {
+  const out: number[] = [];
+  if (!props.vm) return out;
+  let y = 0;
+  props.vm.groups.forEach((g, gi) => {
+    y += groupHeights.value[gi] ?? 0;
+    for (let i = 0; i < g.rowCount; i++) {
+      out.push(y);
+      y += ROW_H;
+    }
+    y += groupGap.value;
+  });
+  return out;
+});
+
+interface GroupBand {
+  id: string;
+  label: string;
+  top: number;
+  height: number;
+  rowCount: number;
+  truncatedCount: number;
+  syntheticCount: number;
+  progress: { closed: number; total: number };
+}
+const groupBands = computed<GroupBand[]>(() => {
+  const out: GroupBand[] = [];
+  if (!props.vm) return out;
+  let y = 0;
+  props.vm.groups.forEach((g, gi) => {
+    const h = groupHeights.value[gi] ?? 0;
+    // A zero-height band has nothing to draw and would still catch clicks.
+    if (h > 0) {
+      out.push({
+        id: g.id,
+        label: g.label,
+        top: y,
+        height: h,
+        rowCount: g.rowCount,
+        truncatedCount: g.truncatedCount,
+        syntheticCount: g.syntheticCount,
+        progress: g.progress,
+      });
+    }
+    y += h + g.rowCount * ROW_H + groupGap.value;
+  });
+  return out;
+});
+
+// Progress bar geometry — a slim horizontal bar spanning the label column
+// showing closed/total ratio, plus a chip with the numeric split.
+const PROGRESS_BAR_H = 3;
+const PROGRESS_BAR_MARGIN_Y = 2;
+const PROGRESS_CHIP_W = 56;
+function progressFraction(p: { closed: number; total: number }): number {
+  return p.total > 0 ? p.closed / p.total : 0;
+}
+
+/** Hover text for a lane's inferred count. Same words as the grid's chip. */
+function inferredTitle(g: GroupBand): string {
+  return (
+    `${g.syntheticCount} of ${g.rowCount} inferred by the scheduler, ` +
+    `not recorded on the bead`
+  );
+}
+
+// ── layout + mouse state (DDV inputs) ─────────────────────────────────────
+// Watch the wrapper element's size and build a Layout DDV can consume.
+
+const wrapperEl = ref<HTMLElement | null>(null);
+const elementWidth = ref(0);
+const elementHeight = ref(0);
+
+let ro: ResizeObserver | null = null;
+onMounted(() => {
+  if (!wrapperEl.value) return;
+  const measure = () => {
+    if (!wrapperEl.value) return;
+    const rect = wrapperEl.value.getBoundingClientRect();
+    elementWidth.value = rect.width;
+    elementHeight.value = Math.max(rect.height, contentHeight.value);
+  };
+  measure();
+  ro = new ResizeObserver(measure);
+  ro.observe(wrapperEl.value);
+});
+onBeforeUnmount(() => {
+  ro?.disconnect();
+});
+
+const layout = computed<Layout>(() => {
+  const w = Math.max(0, elementWidth.value - labelColWidth.value - RIGHT_PAD);
+  const h = Math.max(0, contentHeight.value - AXIS_TOP - AXIS_BOTTOM);
+  return {
+    plotWidth: w,
+    plotHeight: h,
+    elementWidth: elementWidth.value,
+    elementHeight: contentHeight.value,
+    computedHeight: contentHeight.value,
+    margins: {
+      top: AXIS_TOP,
+      right: RIGHT_PAD,
+      bottom: AXIS_BOTTOM,
+      left: labelColWidth.value,
+    },
+  };
+});
+
+// A minimal MouseState — DDV's <DDV> reads flags off it for styling, but
+// the ThresholdLine + Axis + CartesianScaler don't require live coords for
+// our read-only chart. Interactivity (hover/click) lands in bp-6y1.
+const mouseState = reactive<MouseState>({
+  mouse: { x: 0, y: 0 },
+  normalizedMouse: { x: 0, y: 0 },
+  globalMouse: { x: 0, y: 0 },
+  isHovered: false,
+  isPlotHovered: false,
+});
+
+// ── scaler inputs ─────────────────────────────────────────────────────────
+// The X axis is a DateDomain — DDV's Axis + useLinearScaler handle Dates
+// natively, and solveTicksDateDomain auto-picks the nicest time unit
+// (year → minute) for the current axis width. Bar day-offsets get converted
+// to Date objects via `dateAt(day)` when they hit the scaler.
+// ── horizontal viewport (bp-c6q) ─────────────────────────────────────────
+// The x domain is the VISIBLE part of the window, not the window. Rules and
+// arithmetic in gantt-viewport.ts; here: the state, and the gestures that
+// move it. Null state means "auto": fit the window when it reads at a sane
+// density, otherwise a readable span centred on today. Any preset change
+// returns to auto.
+const viewportState = ref<Viewport | null>(null);
+const totalDays = computed(() => Math.max(1, props.vm?.meta.totalDays ?? 1));
+const viewport = computed<Viewport>(() => {
+  const w = layout.value.plotWidth;
+  return viewportState.value
+    ? clampViewport(viewportState.value, totalDays.value, w)
+    : initialViewport(totalDays.value, w, props.vm?.meta.todayDay ?? -1);
+});
+watch(
+  () => [props.vm?.meta.t0?.getTime(), props.vm?.meta.t1?.getTime()],
+  () => {
+    viewportState.value = null;
+  },
+);
+const hscroll = computed(() => scrollMetrics(viewport.value, totalDays.value, layout.value.plotWidth));
+
+const MS_PER_DAY = 86_400_000;
+const xDomain = computed(() => {
+  const t0 = props.vm?.meta.t0 ?? new Date();
+  const v = viewport.value;
+  return fromTimeFrame([
+    new Date(t0.getTime() + v.startDay * MS_PER_DAY),
+    new Date(t0.getTime() + (v.startDay + v.spanDays) * MS_PER_DAY),
+  ]);
+});
+
+// Drag on the axis strip pans; dragging right brings earlier days in.
+let scrubLastX: number | null = null;
+function onScrubDown(e: PointerEvent) {
+  if (!hscroll.value.scrollable) return;
+  (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  scrubLastX = e.clientX;
+  e.preventDefault();
+}
+function onScrubMove(e: PointerEvent) {
+  if (scrubLastX === null) return;
+  const dx = e.clientX - scrubLastX;
+  scrubLastX = e.clientX;
+  viewportState.value = panViewportPx(viewport.value, -dx, totalDays.value, layout.value.plotWidth);
+}
+function onScrubUp() {
+  scrubLastX = null;
+}
+// Wheel over the axis strip zooms around the pointer. Only here is the wheel
+// taken: over the plot body a vertical wheel still scrolls the page.
+function onScrubWheel(e: WheelEvent) {
+  if (!props.vm) return;
+  e.preventDefault();
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const frac = rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0.5;
+  viewportState.value = zoomViewport(viewport.value, wheelZoomFactor(e.deltaY), frac, totalDays.value, layout.value.plotWidth);
+}
+// Over the plot, a horizontal wheel (a trackpad swipe, or shift+wheel) pans.
+function onPlotWheel(e: WheelEvent) {
+  if (!hscroll.value.scrollable) return;
+  const dx = e.shiftKey ? e.deltaY : e.deltaX;
+  if (!e.shiftKey && Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+  if (Math.abs(dx) < 1) return;
+  e.preventDefault();
+  viewportState.value = panViewportPx(viewport.value, dx, totalDays.value, layout.value.plotWidth);
+}
+// The native scrollbar under the plot, kept in step both ways.
+const hscrollEl = ref<HTMLElement | null>(null);
+let syncingScroll = false;
+function onHScroll(e: Event) {
+  if (syncingScroll) return;
+  const el = e.target as HTMLElement;
+  viewportState.value = viewportFromScrollLeft(viewport.value, el.scrollLeft, totalDays.value, layout.value.plotWidth);
+}
+watch(
+  () => hscroll.value.scrollLeft,
+  async (left) => {
+    await nextTick();
+    const el = hscrollEl.value;
+    if (!el || Math.abs(el.scrollLeft - left) < 0.5) return;
+    syncingScroll = true;
+    el.scrollLeft = left;
+    requestAnimationFrame(() => {
+      syncingScroll = false;
+    });
+  },
+);
+// t (keybindings.ts): centre today at the current zoom.
+watch(
+  () => store.todayRequests,
+  () => {
+    const day = props.vm?.meta.todayDay;
+    if (day === undefined || day < 0 || day > totalDays.value) return;
+    viewportState.value = centreViewport(viewport.value, day, totalDays.value, layout.value.plotWidth);
+  },
+);
+const xScreenDomain = computed(() => fromRange(layout.value.plotWidth || 1));
+const yDomain = computed(() => ({
+  min: 0,
+  max: Math.max(1, props.vm?.rows.length ?? 1),
+}));
+const yScreenDomain = computed(() => fromRange(layout.value.plotHeight || 1));
+
+// Day-offset → Date, keyed to the view-model's window origin. Bars carry
+// integer day offsets from t0; the scaler works on Dates, so we bridge here.
+function dateAt(dayOffset: number): Date {
+  const t0 = props.vm?.meta.t0 ?? new Date();
+  return new Date(t0.getTime() + dayOffset * 86_400_000);
+}
+
+// ThresholdLine's `domain` prop is typed as NumericDomain, but the scaler
+// handles ms timestamps in a DateDomain identically. Cast at this boundary
+// so the runtime works and TS stays quiet.
+const xDomainAsNumeric = computed(() => xDomain.value as unknown as {
+  min: number;
+  max: number;
+});
+
+// ── top-axis ticks ────────────────────────────────────────────────────────
+// DDV's <Axis> hardcodes tick labels at the BOTTOM of the plot; for a Gantt
+// we want them across the TOP. We roll our own here using the same date-fns
+// unit progression DDV's solveTicksDateDomain uses, and target ~90px per
+// label to keep them from crowding.
+
+interface AxisTick {
+  date: Date;
+  label: string;
+  emphasize: boolean; // true for month/year starts — get a heavier gridline
+}
+
+// A "MMM d" label is ~42px at 10px, so 90 was reserving more than double
+// what a label needs and pushing the ladder up a rung too early — a 90-day
+// window landed on months when weeks would have fitted comfortably.
+const TARGET_LABEL_PX = 64;
+
+/**
+ * Boundaries are drawn one rung finer than labels, so week and day edges
+ * stay visible in a narrow window even when there's only room to LABEL
+ * months or weeks. Below this spacing the finer rung becomes a solid block
+ * of lines and stops being information, so it's dropped.
+ */
+const MINOR_GRID_MIN_PX = 7;
+
+const axis = computed<{ major: AxisTick[]; minor: Date[] }>(() => {
+  if (!props.vm || layout.value.plotWidth <= 0)
+    return { major: [], minor: [] };
+  // The visible interval, at the visible density (bp-c6q).
+  const v = viewport.value;
+  const origin = props.vm.meta.t0.getTime();
+  const t0 = new Date(origin + v.startDay * MS_PER_DAY);
+  const t1 = new Date(origin + (v.startDay + v.spanDays) * MS_PER_DAY);
+  const pxPerDay = layout.value.plotWidth / Math.max(1e-9, v.spanDays);
+
+  const interval = { start: t0, end: t1 };
+  const inWindow = (d: Date) => d >= t0 && d <= t1;
+
+  // Pick the SMALLEST unit whose per-unit spacing >= TARGET_LABEL_PX. That
+  // gives the densest labels without overlap. `each*OfInterval` returns
+  // unit-boundaries (start of month, etc.), some of which predate t0 — we
+  // filter to what actually falls inside the window.
+  const units: Array<{
+    px: number;
+    /** Labels narrower than "MMM d" may sit closer than TARGET_LABEL_PX. */
+    minPx?: number;
+    each: (i: { start: Date; end: Date }) => Date[];
+    format: (d: Date) => string;
+    emphasize: (d: Date) => boolean;
+  }> = [
+    // Hours exist for the zoomed viewport (bp-c6q, bp-vsr): at 240px a day
+    // a six-hour tick is 60px apart, which a "06:00" label fits under.
+    {
+      px: pxPerDay / 24,
+      minPx: 40,
+      each: (i) => eachHourOfInterval(i),
+      format: (d) => formatDate(d, "HH:mm"),
+      emphasize: (d) => d.getHours() === 0,
+    },
+    {
+      px: pxPerDay / 4,
+      minPx: 40,
+      each: (i) => eachHourOfInterval(i).filter((d) => d.getHours() % 6 === 0),
+      format: (d) => (d.getHours() === 0 ? formatDate(d, "MMM d") : formatDate(d, "HH:mm")),
+      emphasize: (d) => d.getHours() === 0,
+    },
+    {
+      px: pxPerDay,
+      each: eachDayOfInterval,
+      format: (d) => formatDate(d, "MMM d"),
+      emphasize: (d) => d.getDay() === 1,
+    },
+    {
+      px: pxPerDay * 7,
+      each: eachWeekOfInterval,
+      format: (d) => formatDate(d, "MMM d"),
+      emphasize: (d) => d.getDate() <= 7,
+    },
+    {
+      px: pxPerDay * 30,
+      each: eachMonthOfInterval,
+      format: (d) => formatDate(d, "MMM yyyy"),
+      emphasize: (d) => d.getMonth() === 0,
+    },
+    {
+      px: pxPerDay * 90,
+      each: eachQuarterOfInterval,
+      format: (d) => formatDate(d, "QQQ yyyy"),
+      emphasize: (d) => d.getMonth() === 0,
+    },
+    {
+      px: pxPerDay * 365,
+      each: eachYearOfInterval,
+      format: (d) => formatDate(d, "yyyy"),
+      emphasize: () => true,
+    },
+  ];
+
+  const chosenIdx = units.findIndex((u) => u.px >= (u.minPx ?? TARGET_LABEL_PX));
+  const chosen = units[chosenIdx === -1 ? 0 : chosenIdx];
+
+  // One rung finer than the labelled unit, when it still has room to read.
+  const finer = chosenIdx > 0 ? units[chosenIdx - 1] : null;
+  const minor =
+    finer && finer.px >= MINOR_GRID_MIN_PX
+      ? finer.each(interval).filter(inWindow)
+      : [];
+
+  return {
+    major: chosen
+      .each(interval)
+      .filter(inWindow)
+      .map((d) => ({
+        date: d,
+        label: chosen.format(d),
+        emphasize: chosen.emphasize(d),
+      })),
+    minor,
+  };
+});
+
+const axisTicks = computed(() => axis.value.major);
+const axisMinor = computed(() => axis.value.minor);
+
+const todayIso = computed(() => {
+  if (!props.vm) return "";
+  const d = new Date(props.vm.meta.t0);
+  d.setDate(d.getDate() + props.vm.meta.todayDay);
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+});
+
+const barCssClass = (b: Bar): string => {
+  const cls = ["bar", `kind-${b.kind}`];
+  if (b.synthetic) cls.push("synthetic");
+  return cls.join(" ");
+};
+
+// Icon edge in user units. Lucide components render as nested <svg>
+// elements here (see .gantt-icon), so this is their viewport size, and the
+// label maths needs it to leave room.
+const GANTT_ICON = 14;
+
+/**
+ * Horizontal room the TODAY label needs. Its text shares a baseline with the
+ * axis tick labels (y -8 vs -10) and is anchored the same way, so a tick
+ * landing near today's rule prints straight through it.
+ */
+const TODAY_LABEL_W = 56;
+
+/**
+ * Whether a tick's label would collide with the TODAY marker.
+ *
+ * Suppressing the tick rather than the marker loses nothing: the marker
+ * already prints the full date above itself, which is strictly more precise
+ * than the tick's month label.
+ */
+function tickCollidesWithToday(
+  tick: { date: Date },
+  scaler: { scale: (v: number) => number },
+): boolean {
+  const meta = props.vm?.meta;
+  if (!meta) return false;
+  if (meta.todayDay < 0 || meta.todayDay > meta.totalDays) return false;
+  const tx = scaler.scale(tick.date.getTime());
+  const todayX = scaler.scale(dateAt(meta.todayDay).getTime());
+  return Math.abs(tx - todayX) < TODAY_LABEL_W;
+}
+
+// Terminal icons sit at arrowhead scale, where a stroked glyph reads far
+// weaker than the filled triangle a <marker> used to draw. Bigger, heavier
+// and at full opacity to carry the same weight.
+//
+// Full-graph mode draws every edge at once, so its terminals shrink: at that
+// density a full-weight arrow per edge buries the bars it points at. Size is
+// per-role and passed as a prop, because a nested <svg> ignores CSS width.
+const DEP_ICON = 18;
+const DEP_ICON_NEUTRAL = 12;
+
+const depIconSize = (role: keyof typeof ROLE_ICON) =>
+  role === "neutral" ? DEP_ICON_NEUTRAL : DEP_ICON;
+
+// ── noop reserveSpace: Axis wants to negotiate its tick-label margins,
+// but we've already carved fixed AXIS_TOP/AXIS_BOTTOM room. Absorb the
+// updates without letting them mutate our fixed layout.
+const reserveSpace = () => () => {};
+
+// ── hover / click interactions (bp-6y1) ───────────────────────────────────
+// Hover any bar → resolve the bead's detail via the store and float a
+// tooltip pinned to the entry cursor position (NOT following the mouse, so
+// the user can move onto the tooltip to click its links). Both the bar and
+// the tooltip are hover targets; a short grace period on leave lets the
+// cursor traverse the gap between them. The state machine and the panel's
+// derived rows live in useBeadTooltip, shared with the drawer's subgraph
+// (bp-67g.42), so the two hovers say the same things about a bead.
+
+const {
+  hoveredBeadId,
+  props: tipProps,
+  enter: tipEnter,
+  cancelLeave,
+  scheduleLeave,
+  dismiss: tipDismiss,
+  toggleWatch: onToggleWatch,
+} = useBeadTooltip();
+
+// ── row hover ────────────────────────────────────────────────────────────
+// One band across the whole row — label column and plot together — so a
+// pointer over a bar can be lined up with the id and title on the left.
+// Driven by transparent hit rects (label band + plot), and falls back to the
+// tooltip's bead so the row stays lit while the tooltip is up.
+const hoveredRowId = ref<string | null>(null);
+// The open bead's row stays lit while the drawer is up: the drawer is the
+// keyboard cursor (bp-67g.45), and this is its mark in the view. Hover wins
+// while the pointer is on another row.
+const litRowId = computed(() => hoveredRowId.value ?? hoveredBeadId.value ?? store.openBeadId);
+
+// The bar's own rect is the band the panel stays off (bp-67g.41).
+function onBarEnter(bar: Bar, e: MouseEvent) {
+  tipEnter(bar.beadId, e);
+}
+
+function onOpenDetails(id: string) {
+  store.openBead(id);
+  tipDismiss();
+}
+
+// Right-click: the quick actions (bp-ocs). The hover tooltip goes first, or
+// it sits over the menu.
+function onBarMenu(bar: Bar, e: MouseEvent) {
+  tipDismiss();
+  store.openContextMenu(bar.beadId, e.clientX, e.clientY);
+}
+
+// ── copy-id flash ────────────────────────────────────────────────────────
+// Clicking a row's id column copies the id to the clipboard and briefly
+// swaps the display text to "copied ✓" before reverting. The flash state
+// is keyed by bead id so simultaneous flashes across rows (rare, but the
+// user could shift-click a batch later) don't stomp each other.
+const copiedIds = ref<Set<string>>(new Set());
+const copyTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function copyRowId(id: string, e: MouseEvent) {
+  e.stopPropagation();
+  void navigator.clipboard.writeText(id);
+  copiedIds.value = new Set([...copiedIds.value, id]);
+  const prev = copyTimers.get(id);
+  if (prev) clearTimeout(prev);
+  copyTimers.set(
+    id,
+    setTimeout(() => {
+      const next = new Set(copiedIds.value);
+      next.delete(id);
+      copiedIds.value = next;
+      copyTimers.delete(id);
+    }, 900),
+  );
+}
+
+// See BeadsGrid: an inferred match belongs in an assignee-filtered result
+// but recedes, because it's the scheduler's guess and not recorded fact.
+const assigneeFilterActive = computed(
+  () => (store.filters.assignees?.length ?? 0) > 0,
+);
+const isInferredMatch = (row: { syntheticAssignee: boolean }) =>
+  assigneeFilterActive.value && row.syntheticAssignee;
+
+const watched = computed(() => store.watchedSet);
+// Pins are a read-only reflection of the watch list; the drawer header owns
+// adding and removing.
+const isWatched = (id: string) => watched.value.has(id);
+
+/**
+ * The bead behind a group, when the group *is* a bead. Only epic grouping
+ * yields real bead ids; every other mode groups by a facet value (an
+ * assignee handle, a status) and placeholder buckets start with "__".
+ * Returns null when there's nothing to open, so the label stays inert.
+ */
+function groupBeadId(gid: string): string | null {
+  if (store.groupBy !== "epic") return null;
+  if (gid.startsWith("__")) return null;
+  return gid;
+}
+
+/** An assignee lane's header is a handle: it opens that person (bp-67g.43). */
+function groupPerson(gid: string): string | null {
+  if (store.groupBy !== "assignee") return null;
+  if (gid.startsWith("__")) return null;
+  return gid;
+}
+
+const isGroupOpenable = (gid: string) => !!groupBeadId(gid) || !!groupPerson(gid);
+
+function openGroupBead(gid: string) {
+  const id = groupBeadId(gid);
+  if (id) return store.openBead(id);
+  const who = groupPerson(gid);
+  if (who) store.openPerson(who);
+}
+
+// ── dim / highlight helpers ──────────────────────────────────────────────
+const blockedIds = computed(() => store.blockedBeadIds);
+const readyNowIds = computed(() => store.readyNowBeadIds);
+const overCapAssignees = computed(() => store.overCapAssignees);
+
+function isGroupOverCap(gid: string): boolean {
+  if (!store.highlights["over-cap"]) return false;
+  if (store.groupBy !== "assignee") return false;
+  return overCapAssignees.value.has(gid);
+}
+
+function barExtraClass(bar: Bar): string {
+  const cls: string[] = [];
+  if (blockedIds.value.has(bar.beadId)) cls.push("hl-blocked");
+  if (readyNowIds.value.has(bar.beadId)) cls.push("hl-ready-now");
+  return cls.join(" ");
+}
+
+// ── dependency arrows (bp-67g.1) ─────────────────────────────────────────
+// Map every visible bead id → the pixel geometry of its bar (union of any
+// split-bar segments the view-model emits). Recomputed with the view model.
+
+interface BeadGeometry {
+  xStart: number;
+  xEnd: number;
+  yCenter: number;
+}
+
+// What-if ghosts (bp-q56): for each bead the what-if moved, the baseline's
+// work span drawn dimmed under the live plan, with the delta beside it.
+const rowIndexById = computed(() => new Map((props.vm?.rows ?? []).map((r) => [r.beadId, r.index] as const)));
+const ghosts = computed(() => {
+  const d = store.whatIfDiff;
+  if (!d || !props.vm) return [];
+  const today = props.vm.meta.todayDay;
+  const total = props.vm.meta.totalDays;
+  const clampDay = (v: number) => Math.min(total, Math.max(0, today + v));
+  return d.moved
+    .filter((m) => rowIndexById.value.has(m.id))
+    .map((m) => ({
+      id: m.id,
+      rowIndex: rowIndexById.value.get(m.id)!,
+      startDay: clampDay(m.workBefore.start),
+      endDay: clampDay(m.workBefore.end),
+      afterStartDay: clampDay(m.workAfter.start),
+      label: describeDelta(m.deltaDays),
+      later: m.deltaDays > 0,
+    }));
+});
+
+const beadGeometryById = computed<Map<string, BeadGeometry>>(() => {
+  const out = new Map<string, BeadGeometry>();
+  if (!props.vm) return out;
+  // xScaler isn't available in a pure computed (it's a slot arg), so we
+  // build the geometry in scaled-day space and convert on render below.
+  // For now, capture only Y and raw day extents; the arrow path picks the
+  // scaler up when it renders.
+  for (const bar of props.vm.bars) {
+    const existing = out.get(bar.beadId);
+    const yCenter =
+      rowYByIndex.value[bar.rowIndex] + BAR_H / 2 + 3;
+    if (!existing) {
+      out.set(bar.beadId, {
+        xStart: bar.startDay,
+        xEnd: bar.endDay,
+        yCenter,
+      });
+    } else {
+      existing.xStart = Math.min(existing.xStart, bar.startDay);
+      existing.xEnd = Math.max(existing.xEnd, bar.endDay);
+    }
+  }
+  return out;
+});
+
+// A "focal" bead is what an edge is drawn relative to for coloring:
+//   - outgoing (green)  → focal bead BLOCKS this dependent
+//   - incoming (red)    → this blocker is what's blocking the focal
+// When no focal bead exists and "show all" is on, edges use a neutral hue.
+type EdgeRole = "outgoing" | "incoming" | "neutral";
+
+interface DepEdge {
+  fromId: string;
+  toId: string;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  role: EdgeRole;
+}
+
+// Which bead is the "focal" for arrow drawing? The hovered one, while the
+// cursor is on it; otherwise none, and no arrows unless the user opted into
+// "show all".
+const focalBeadId = computed<string | null>(() => {
+  if (hoveredBeadId.value) return hoveredBeadId.value;
+  return null;
+});
+
+const dependencyEdges = computed<DepEdge[]>(() => {
+  if (!store.showDependencies) return [];
+  const beads = store.beads;
+  const geo = beadGeometryById.value;
+  const focal = focalBeadId.value;
+  const edges: DepEdge[] = [];
+  for (const b of beads) {
+    if (!geo.has(b.id)) continue;
+    for (const d of b.dependencies ?? []) {
+      if (d.type !== "blocks") continue;
+      const blockerGeo = geo.get(d.depends_on_id);
+      if (!blockerGeo) continue;
+      const dependentGeo = geo.get(b.id);
+      if (!dependentGeo) continue;
+
+      // Focal-only filter: full-graph arrows are unreadable at scale, so
+      // we default to "arrows only for the focal bead" and let the user
+      // opt into all edges via a separate toggle.
+      let role: EdgeRole = "neutral";
+      if (focal) {
+        if (d.depends_on_id === focal) role = "outgoing";
+        else if (b.id === focal) role = "incoming";
+        else continue;
+      } else if (!store.showAllDependencies) {
+        continue;
+      }
+
+      edges.push({
+        fromId: d.depends_on_id,
+        toId: b.id,
+        fromX: blockerGeo.xEnd,
+        fromY: blockerGeo.yCenter,
+        toX: dependentGeo.xStart,
+        toY: dependentGeo.yCenter,
+        role,
+      });
+    }
+  }
+  return edges;
+});
+
+/**
+ * Cubic-bezier arrow path from (x0,y0) to (x1,y1). The control points push
+ * the curve upward by ~row height so arrows arc above the bars they
+ * connect. If the destination sits to the LEFT of the source (dependent
+ * scheduled before blocker — should be rare), we still route the curve
+ * cleanly with a bigger arc.
+ */
+function arrowGeometry(
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  iconSize: number,
+) {
+  const dx = x1 - x0;
+  const arcHeight = Math.max(ROW_H * 0.9, Math.min(80, Math.abs(dx) * 0.15));
+  const cy0 = y0 - arcHeight;
+  const cy1 = y1 - arcHeight;
+  const cx0 = x0 + (dx >= 0 ? Math.max(12, dx * 0.3) : -20);
+  const cx1 = x1 - (dx >= 0 ? Math.max(12, dx * 0.3) : -20);
+  // A cubic's tangent at t=1 is P3 - P2, so the terminal icon can be rotated
+  // to meet the curve instead of sitting at an arbitrary angle.
+  const rad = Math.atan2(y1 - cy1, x1 - cx1);
+  // Pull the glyph back along the tangent so it stops short of the bar
+  // instead of half-disappearing under it — the job <marker refX> used to do.
+  const pullback = iconSize * 0.45;
+  return {
+    d: `M ${x0} ${y0} C ${cx0} ${cy0}, ${cx1} ${cy1}, ${x1} ${y1}`,
+    tipX: x1 - Math.cos(rad) * pullback,
+    tipY: y1 - Math.sin(rad) * pullback,
+    angle: (rad * 180) / Math.PI,
+  };
+}
+
+/**
+ * Terminal icon per edge role. Markers can't do this: currentColor inside a
+ * <marker> resolves against the marker's own context in <defs>, not the
+ * referencing path, so a marker has to hardcode its fill (which is why this
+ * used to carry three near-identical marker defs). A nested <svg> placed at
+ * the tip inherits `color` from the edge's own class instead.
+ */
+const ROLE_ICON = {
+  // ArrowRight rather than a chevron: terminals get rotated onto the curve's
+  // tangent, and a bare chevron at an oblique angle reads as a checkmark.
+  // An arrow has a shaft, so its orientation survives any rotation.
+  outgoing: ArrowRight, // focal blocks these — flow continues downstream
+  // Semantic glyphs are reserved for the focal bead's own edges, where there
+  // are few of them and they're worth reading. Full-graph mode (neutral) stays
+  // plain: at that density a stop sign per edge is noise, and colour already
+  // carries the role.
+  incoming: Ban, // these block the focal — a stop, not an onward arrow
+  neutral: ArrowRight,
+} as const;
+</script>
+
+<template>
+  <div
+    ref="wrapperEl"
+    class="beads-gantt"
+    :class="{ 'is-resizing-labels': isResizingLabelCol }"
+    @wheel="onPlotWheel"
+    :style="{
+      minHeight: contentHeight + 'px',
+      // DDV's inner <svg class='outer'> hard-caps at min-height 250px unless
+      // we override --minHeight here. --aspectRatio has to be 'auto' or DDV
+      // will resize the SVG to whatever ratio the wrapper started at
+      // (short) and never grow to fit the row count.
+      '--minHeight': contentHeight + 'px',
+      '--aspectRatio': 'auto',
+    }"
+  >
+    <DDV :layout="layout" :mouse-state="mouseState" class="beads-gantt-ddv">
+      <template #default>
+        <CartesianScaler
+          :x-source="xDomain"
+          :y-source="yDomain"
+          :x-target="xScreenDomain"
+          :y-target="yScreenDomain"
+        >
+          <template #default="{ xScaler }">
+            <!-- Clip titles to the title column so long strings can't run
+                 into the priority chip on the right. Row texts sit inside
+                 translated <g>s at varying Y, so the clip rect spans the
+                 full vertical range — horizontal is the only constraint. -->
+            <defs>
+              <!-- Group labels get their own clip: they start further left
+                   than row titles and must stop short of the progress chip
+                   rather than the priority gutter. -->
+              <clipPath
+                id="beads-gantt-group-label-clip"
+                clipPathUnits="userSpaceOnUse"
+              >
+                <rect
+                  :x="ID_COL_X"
+                  :y="0"
+                  :width="Math.max(0, layout.margins.left - PROGRESS_CHIP_W - 8 - ID_COL_X - PIN_COL_W)"
+                  :height="contentHeight"
+                />
+              </clipPath>
+              <clipPath id="beads-gantt-title-clip" clipPathUnits="userSpaceOnUse">
+                <rect
+                  :x="TITLE_COL_X"
+                  :y="0"
+                  :width="Math.max(0, layout.margins.left - TITLE_COL_X - PRIORITY_COL_W - PIN_COL_W)"
+                  :height="contentHeight"
+                />
+              </clipPath>
+              <!-- The viewport (bp-c6q): every layer the x scaler positions
+                   is clipped to the plot column, so a bar, arrow or tick
+                   panned out of view cannot draw over the label column. In
+                   the plot groups' own coordinates, which start at the
+                   margins; the axis rows above the plot are included. -->
+              <clipPath id="beads-gantt-plot-clip" clipPathUnits="userSpaceOnUse">
+                <rect
+                  :x="0"
+                  :y="-AXIS_TOP"
+                  :width="Math.max(0, layout.plotWidth)"
+                  :height="Math.max(0, layout.plotHeight) + AXIS_TOP + AXIS_BOTTOM"
+                />
+              </clipPath>
+              <!-- Synthetic-assignee hatch (bp-67g.49). A luminance mask:
+                   the white stripes keep the bar and the gaps drop it, so
+                   the bar's own kind colour and opacity show through
+                   unchanged. The pattern tiles in user space, so stripes
+                   run continuously across neighbouring bars instead of
+                   restarting at each one's edge. The mask's content is in
+                   the referencing bar's coordinates — the plot's, since
+                   bars live in the translated plot group — and one rect
+                   the size of the plot covers every bar. -->
+              <pattern
+                id="beads-gantt-hatch"
+                patternUnits="userSpaceOnUse"
+                :width="HATCH_PITCH"
+                :height="HATCH_PITCH"
+                patternTransform="rotate(45)"
+              >
+                <rect :x="0" :y="0" :width="HATCH_STRIPE" :height="HATCH_PITCH" fill="#fff" />
+              </pattern>
+              <mask id="beads-gantt-synthetic-mask" maskContentUnits="userSpaceOnUse">
+                <rect
+                  :x="-HATCH_PITCH"
+                  :y="-HATCH_PITCH"
+                  :width="layout.plotWidth + 2 * HATCH_PITCH"
+                  :height="layout.plotHeight + 2 * HATCH_PITCH"
+                  fill="url(#beads-gantt-hatch)"
+                />
+              </mask>
+            </defs>
+
+            <!-- Plot background -->
+            <rect
+              v-if="layout.plotWidth > 0 && layout.plotHeight > 0"
+              class="plot-bg"
+              :x="layout.margins.left"
+              :y="layout.margins.top"
+              :width="layout.plotWidth"
+              :height="layout.plotHeight"
+            />
+
+            <!-- Top X-axis. Rendered manually (DDV's <Axis> hardcodes tick
+                 labels to the bottom of the plot). Ticks are auto-picked
+                 by the same date-fns unit progression DDV uses. -->
+            <g
+              v-if="xScaler && layout.plotWidth > 0"
+              class="x-axis"
+              clip-path="url(#beads-gantt-plot-clip)"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <g class="gridlines">
+                <!-- Finer boundaries first, so a labelled major line always
+                     paints over its minor counterpart at the same x. -->
+                <line
+                  v-for="(d, i) in axisMinor"
+                  :key="`minor-${i}`"
+                  class="minor"
+                  :x1="xScaler.scale(d.getTime())"
+                  :x2="xScaler.scale(d.getTime())"
+                  :y1="0"
+                  :y2="layout.plotHeight"
+                />
+                <line
+                  v-for="(t, i) in axisTicks"
+                  :key="`grid-${i}`"
+                  :class="{ emphasize: t.emphasize }"
+                  :x1="xScaler.scale(t.date.getTime())"
+                  :x2="xScaler.scale(t.date.getTime())"
+                  :y1="0"
+                  :y2="layout.plotHeight"
+                />
+              </g>
+              <g class="tick-labels">
+                <text
+                  v-for="(t, i) in axisTicks"
+                  v-show="!tickCollidesWithToday(t, xScaler)"
+                  :key="`tick-${i}`"
+                  :class="{ emphasize: t.emphasize }"
+                  :x="xScaler.scale(t.date.getTime()) + 4"
+                  :y="-8"
+                >{{ t.label }}</text>
+              </g>
+            </g>
+
+            <!-- Group header strips. The count sits at the RIGHT edge of
+                 the plot so it never collides with the (potentially long)
+                 epic label in the left column. -->
+            <g
+              v-if="vm"
+              class="left-column"
+              :transform="`translate(0 ${layout.margins.top})`"
+            >
+              <g
+                v-for="g in groupBands"
+                :key="g.id"
+                :class="{
+                  'group-band': true,
+                  'is-over-cap': isGroupOverCap(g.id),
+                }"
+                :transform="`translate(0 ${g.top})`"
+              >
+                <rect
+                  v-if="!isUngrouped"
+                  class="group-header"
+                  :x="0"
+                  :y="0"
+                  :width="layout.elementWidth"
+                  :height="g.height"
+                />
+                <text
+                  v-if="!isUngrouped"
+                  class="group-label"
+                  :class="{ 'is-openable': isGroupOpenable(g.id) }"
+                  :x="ID_COL_X"
+                  :y="GROUP_H - 11"
+                  clip-path="url(#beads-gantt-group-label-clip)"
+                  @click.stop="openGroupBead(g.id)"
+                >
+                  {{ g.label }}
+                  <title>{{ groupBeadId(g.id) ? `Open ${g.id}` : g.label }}</title>
+                </text>
+                <!-- Over-cap badge. The icon is a lucide component used as
+                     a NESTED <svg>: it renders its own <svg> root, so x/y
+                     (which fall through as attributes) place it, and it
+                     carries its own viewport rather than inheriting ours. -->
+                <TriangleAlert
+                  v-if="!isUngrouped && isGroupOverCap(g.id)"
+                  class="gantt-icon over-cap-icon"
+                  :size="GANTT_ICON"
+                  :x="layout.margins.left + 8"
+                  :y="GROUP_H - 22"
+                />
+                <Pin
+                  v-if="!isUngrouped && isWatched(g.id)"
+                  class="gantt-icon watch-pin"
+                  :size="WATCH_PIN"
+                  :x="layout.margins.left - PROGRESS_CHIP_W - PIN_COL_W - 3"
+                  :y="(GROUP_H - WATCH_PIN) / 2"
+                />
+                <text
+                  v-if="!isUngrouped && isGroupOverCap(g.id)"
+                  class="over-cap-badge"
+                  :x="layout.margins.left + 8 + GANTT_ICON + 4"
+                  :y="GROUP_H - 11"
+                >over cap</text>
+                <!-- Progress chip: e.g. "3/17". Positioned to the right of
+                     the label, inside the label column. Filter-independent. -->
+                <g
+                  v-if="!isUngrouped && g.progress.total > 0"
+                  class="group-progress"
+                  :transform="`translate(${layout.margins.left - PROGRESS_CHIP_W - 8} 0)`"
+                >
+                  <rect
+                    class="progress-chip"
+                    :x="0"
+                    :y="4"
+                    :width="PROGRESS_CHIP_W"
+                    :height="12"
+                    rx="2"
+                  />
+                  <text
+                    class="progress-chip-text"
+                    :x="PROGRESS_CHIP_W / 2"
+                    :y="14"
+                    text-anchor="middle"
+                  >{{ g.progress.closed }}/{{ g.progress.total }}</text>
+                </g>
+                <!-- Progress bar: slim rule under the label spanning the
+                     label column, closed-fraction filled. -->
+                <g
+                  v-if="!isUngrouped && g.progress.total > 0"
+                  class="progress-bar"
+                  :transform="`translate(10 ${GROUP_H - PROGRESS_BAR_H - PROGRESS_BAR_MARGIN_Y})`"
+                >
+                  <rect
+                    class="progress-bar-bg"
+                    :x="0"
+                    :y="0"
+                    :width="layout.margins.left - 20"
+                    :height="PROGRESS_BAR_H"
+                    rx="1.5"
+                  />
+                  <rect
+                    class="progress-bar-fill"
+                    :x="0"
+                    :y="0"
+                    :width="(layout.margins.left - 20) * progressFraction(g.progress)"
+                    :height="PROGRESS_BAR_H"
+                    rx="1.5"
+                  />
+                </g>
+                <!-- Row-count / expand pill on the right side of the plot
+                     area. When the group is truncated, this becomes a
+                     clickable "show N more" pill; when expanded (or fully
+                     visible) it's a passive "N beads" tag. -->
+                <g
+                  v-if="g.truncatedCount > 0"
+                  class="group-expand-btn"
+                  :transform="`translate(${layout.margins.left + layout.plotWidth - 128} 4)`"
+                  @click.stop="store.toggleExpandGroup(g.id)"
+                >
+                  <rect
+                    class="expand-pill"
+                    :x="0"
+                    :y="0"
+                    :width="120"
+                    :height="16"
+                    rx="8"
+                  />
+                  <text
+                    class="expand-pill-text"
+                    :x="52"
+                    :y="12"
+                    text-anchor="middle"
+                  >show {{ g.truncatedCount }} more</text>
+                  <ChevronDown class="gantt-icon" :size="GANTT_ICON" :x="96" :y="1" />
+                </g>
+                <g
+                  v-else-if="store.expandedGroups[g.id]"
+                  class="group-expand-btn is-expanded"
+                  :transform="`translate(${layout.margins.left + layout.plotWidth - 128} 4)`"
+                  @click.stop="store.toggleExpandGroup(g.id)"
+                >
+                  <rect
+                    class="expand-pill"
+                    :x="0"
+                    :y="0"
+                    :width="120"
+                    :height="16"
+                    rx="8"
+                  />
+                  <text
+                    class="expand-pill-text"
+                    :x="52"
+                    :y="12"
+                    text-anchor="middle"
+                  >collapse</text>
+                  <ChevronUp class="gantt-icon" :size="GANTT_ICON" :x="96" :y="1" />
+                </g>
+                <text
+                  v-else-if="!isUngrouped"
+                  class="group-count"
+                  :x="layout.margins.left + layout.plotWidth - 8"
+                  :y="GROUP_H - 9"
+                  text-anchor="end"
+                >
+                  {{ g.rowCount }} bead{{ g.rowCount === 1 ? "" : "s" }}<template v-if="g.syntheticCount > 0"> · {{ g.syntheticCount }} inferred</template>
+                  <title v-if="g.syntheticCount > 0">{{ inferredTitle(g) }}</title>
+                </text>
+              </g>
+            </g>
+
+            <!-- Divider between label column and plot. The visible line is
+                 thin, but the hit-target rect around it is 8px wide so
+                 dragging feels forgiving. Persists to localStorage. -->
+            <line
+              v-if="layout.plotWidth > 0"
+              class="label-divider"
+              :class="{ 'is-resizing': isResizingLabelCol }"
+              :x1="layout.margins.left"
+              :y1="0"
+              :x2="layout.margins.left"
+              :y2="layout.margins.top + layout.plotHeight + AXIS_BOTTOM"
+            />
+            <rect
+              v-if="layout.plotWidth > 0"
+              class="label-resize-handle"
+              :x="layout.margins.left - 4"
+              :y="0"
+              :width="8"
+              :height="layout.margins.top + layout.plotHeight + AXIS_BOTTOM"
+              @mousedown="onLabelColResizeStart"
+            />
+
+            <!-- Row hover band: one translucent rect per row across the full
+                 element width, behind the text and the bars. Always present so
+                 the opacity transition can run both ways. -->
+            <g
+              v-if="vm"
+              class="row-hover-layer"
+              :transform="`translate(0 ${layout.margins.top})`"
+            >
+              <rect
+                v-for="(row, i) in vm.rows"
+                :key="`hover-${row.beadId}`"
+                class="row-hover"
+                :class="{ 'is-lit': litRowId === row.beadId }"
+                :x="0"
+                :y="rowYByIndex[i]"
+                :width="layout.elementWidth"
+                :height="ROW_H"
+              />
+            </g>
+
+            <!-- Row labels (id + title + priority) -->
+            <g
+              v-if="vm"
+              class="row-labels"
+              :transform="`translate(0 ${layout.margins.top})`"
+            >
+              <g
+                v-for="(row, i) in vm.rows"
+                :key="row.beadId"
+                :class="{
+                  'row-label-band': true,
+                  'is-inferred-match': isInferredMatch(row),
+                  'is-lit': litRowId === row.beadId,
+                }"
+                :transform="`translate(0 ${rowYByIndex[i]})`"
+                @mouseenter="hoveredRowId = row.beadId"
+                @mouseleave="hoveredRowId = null"
+              >
+                <!-- Hit target for the empty parts of the band. Stops 4px
+                     short of the label-column resize handle. -->
+                <rect
+                  class="row-hit"
+                  :x="0"
+                  :y="0"
+                  :width="Math.max(0, layout.margins.left - 4)"
+                  :height="ROW_H"
+                />
+                <!-- ID: click copies to clipboard with a brief "copied ✓"
+                     flash. Separate from the title so the two affordances
+                     don't collide. -->
+                <text
+                  class="row-id"
+                  :class="{ 'is-copied': copiedIds.has(row.beadId) }"
+                  :x="ID_COL_X"
+                  :y="ROW_H - 6"
+                  @click="copyRowId(row.beadId, $event)"
+                >{{ copiedIds.has(row.beadId) ? "copied ✓" : row.beadId }}</text>
+                <!-- Title: click opens the detail drawer. Clipped to the
+                     title column so long strings can't collide with the
+                     priority chip on the right. -->
+                <text
+                  class="row-title"
+                  :x="TITLE_COL_X"
+                  :y="ROW_H - 6"
+                  clip-path="url(#beads-gantt-title-clip)"
+                  @click="store.openBead(row.beadId)"
+                >{{ row.title }}<title>{{ row.title }}</title></text>
+                <Pin
+                  v-if="isWatched(row.beadId)"
+                  class="gantt-icon watch-pin"
+                  :size="WATCH_PIN"
+                  :x="layout.margins.left - PRIORITY_COL_W - PIN_COL_W + 5"
+                  :y="(ROW_H - WATCH_PIN) / 2"
+                />
+                <text
+                  class="row-priority"
+                  :x="layout.margins.left - 8"
+                  :y="ROW_H - 6"
+                  text-anchor="end"
+                >P{{ row.priority }}</text>
+              </g>
+            </g>
+
+            <!-- Row hit targets in the plot, behind the bars, so empty row
+                 space lights the row too. Start 4px in, clear of the resize
+                 handle. -->
+            <g
+              v-if="vm && layout.plotWidth > 4"
+              class="row-hit-layer"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <rect
+                v-for="(row, i) in vm.rows"
+                :key="`hit-${row.beadId}`"
+                class="row-hit"
+                :x="4"
+                :y="rowYByIndex[i]"
+                :width="layout.plotWidth - 4"
+                :height="ROW_H"
+                @mouseenter="hoveredRowId = row.beadId"
+                @mouseleave="hoveredRowId = null"
+              />
+            </g>
+
+            <!-- Bars. Hover resolves the tooltip; a bar is not a link. -->
+            <g
+              v-if="vm && xScaler && layout.plotWidth > 0"
+              class="bars"
+              clip-path="url(#beads-gantt-plot-clip)"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <g
+                v-for="(bar, i) in vm.bars"
+                :key="`bar-${i}`"
+                @mouseenter="onBarEnter(bar, $event)"
+                @mouseleave="scheduleLeave"
+                @contextmenu.prevent="onBarMenu(bar, $event)"
+              >
+                <!-- Wait segments (bp-6cg): dulled, hatched, cut short at
+                     the end that means something, with a dotted connector
+                     for what was cut. The work bars below stay to scale. -->
+                <template v-if="isWaitKind(bar.kind)">
+                  <line
+                    v-if="waitGeo(bar, xScaler.scale).gap"
+                    class="wait-gap"
+                    :class="barCssClass(bar)"
+                    :x1="waitGeo(bar, xScaler.scale).gap!.x1"
+                    :x2="waitGeo(bar, xScaler.scale).gap!.x2"
+                    :y1="rowYByIndex[bar.rowIndex] + 3 + BAR_H / 2"
+                    :y2="rowYByIndex[bar.rowIndex] + 3 + BAR_H / 2"
+                  />
+                  <rect
+                    :class="[barCssClass(bar), 'is-wait', { 'is-hovered': hoveredBeadId === bar.beadId }]"
+                    :x="waitGeo(bar, xScaler.scale).x"
+                    :y="rowYByIndex[bar.rowIndex] + 3 + WAIT_INSET"
+                    :width="waitGeo(bar, xScaler.scale).w"
+                    :height="BAR_H - 2 * WAIT_INSET"
+                    rx="2"
+                  />
+                </template>
+                <rect
+                  v-else
+                  :class="[
+                    barCssClass(bar),
+                    barExtraClass(bar),
+                    { 'is-hovered': hoveredBeadId === bar.beadId },
+                  ]"
+                  :x="xScaler.scale(dateAt(bar.startDay))"
+                  :y="rowYByIndex[bar.rowIndex] + 3"
+                  :width="Math.max(MIN_BAR_PX, xScaler.scale(dateAt(bar.endDay)) - xScaler.scale(dateAt(bar.startDay)))"
+                  :height="BAR_H"
+                  rx="2"
+                />
+              </g>
+              <circle
+                v-for="(bar, i) in vm.bars.filter((b) => b.shipMarker)"
+                :key="`ship-${i}`"
+                class="ship-marker"
+                :cx="xScaler.scale(dateAt(bar.endDay))"
+                :cy="rowYByIndex[bar.rowIndex] + BAR_H / 2 + 3"
+                r="3"
+              />
+            </g>
+
+            <!-- What-if ghosts (bp-q56): where the work WAS, dimmed, and the
+                 delta next to where it is now. -->
+            <g
+              v-if="xScaler && vm && ghosts.length"
+              class="ghosts"
+              clip-path="url(#beads-gantt-plot-clip)"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <template v-for="g in ghosts" :key="`ghost-${g.id}`">
+                <rect
+                  class="ghost"
+                  :x="xScaler.scale(dateAt(g.startDay))"
+                  :y="rowYByIndex[g.rowIndex] + 3"
+                  :width="Math.max(MIN_BAR_PX, xScaler.scale(dateAt(g.endDay)) - xScaler.scale(dateAt(g.startDay)))"
+                  :height="BAR_H"
+                  rx="2"
+                />
+                <text
+                  class="ghost-delta"
+                  :class="{ later: g.later, earlier: !g.later }"
+                  :x="xScaler.scale(dateAt(g.afterStartDay)) + 4"
+                  :y="rowYByIndex[g.rowIndex] + 3 - 2"
+                >{{ g.label }}</text>
+              </template>
+            </g>
+
+            <!-- Dependency arrows (bp-67g.1). Rendered inside the plot's
+                 translate group so scaler pixels line up. Non-interactive
+                 so the underlying bars still receive hover/click. -->
+            <g
+              v-if="xScaler && vm && dependencyEdges.length"
+              class="dep-arrows"
+              clip-path="url(#beads-gantt-plot-clip)"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <g
+                v-for="(e, i) in dependencyEdges"
+                :key="`dep-${i}`"
+                :class="[
+                  'dep-edge',
+                  `role-${e.role}`,
+                ]"
+              >
+                <template
+                  v-for="geo in [arrowGeometry(
+                    xScaler.scale(dateAt(e.fromX)),
+                    e.fromY,
+                    xScaler.scale(dateAt(e.toX)),
+                    e.toY,
+                    depIconSize(e.role),
+                  )]"
+                >
+                  <path class="dep-arrow" :d="geo.d" />
+                  <!-- Terminal icon: a nested <svg> rotated onto the curve's
+                       end tangent. Inherits `color` from .dep-edge, which a
+                       <marker> could not do. -->
+                  <g :transform="`translate(${geo.tipX} ${geo.tipY}) rotate(${geo.angle})`">
+                    <component
+                      :is="ROLE_ICON[e.role]"
+                      class="dep-terminal-icon"
+                      :size="depIconSize(e.role)"
+                      :x="-DEP_ICON / 2"
+                      :y="-DEP_ICON / 2"
+                    />
+                  </g>
+                </template>
+              </g>
+            </g>
+
+            <!-- Today marker. ThresholdLine draws only the vertical rule
+                 (its `label` prop is inert — the primitive doesn't render
+                 text), so we position the TODAY label ourselves. Wrapped
+                 in the plot-area translate so the ThresholdLine's own
+                 `translate(scaler.scale(value) 0)` lands inside the plot. -->
+            <g
+              v-if="xScaler && vm && vm.meta.todayDay >= 0 && vm.meta.todayDay <= vm.meta.totalDays"
+              class="today"
+              clip-path="url(#beads-gantt-plot-clip)"
+              :transform="`translate(${layout.margins.left} ${layout.margins.top})`"
+            >
+              <!-- ThresholdLine's `value` + `domain` props are typed as
+                   NumericDomain / number, but the scaler handles ms
+                   timestamps identically in a DateDomain. Pass epoch time
+                   + the numeric-typed alias so runtime + TS both agree. -->
+              <ThresholdLine
+                :layout="{ ...layout, plotHeight: layout.plotHeight }"
+                :value="dateAt(vm.meta.todayDay).getTime()"
+                :scaler="xScaler"
+                :domain="xDomainAsNumeric"
+                color="var(--c-today)"
+                is-x
+              />
+              <!-- The date sits ON the tick row, taking the place of the
+                   tick this marker suppresses, so the row of dates across
+                   the top stays unbroken. TODAY floats above it. -->
+              <text
+                class="today-label"
+                :x="xScaler.scale(dateAt(vm.meta.todayDay)) + 4"
+                :y="-22"
+              >TODAY</text>
+              <text
+                class="today-date"
+                :x="xScaler.scale(dateAt(vm.meta.todayDay)) + 4"
+                :y="-8"
+              >{{ todayIso }}</text>
+            </g>
+          </template>
+        </CartesianScaler>
+      </template>
+    </DDV>
+    <!-- Horizontal viewport controls (bp-c6q). The strip over the axis is
+         the pan and zoom handle — drag to pan, wheel to zoom — offset from
+         the column divider so the label-width handle stays reachable. The
+         scrollbar sits in the plot's bottom margin and is the discoverable
+         way to scroll; both disappear when the window fits. -->
+    <div
+      v-if="hscroll.scrollable"
+      class="axis-scrub"
+      :style="{ left: layout.margins.left + 8 + 'px', width: Math.max(0, layout.plotWidth - 8) + 'px', height: AXIS_TOP + 'px' }"
+      title="Drag to pan the timeline · wheel to zoom"
+      @pointerdown="onScrubDown"
+      @pointermove="onScrubMove"
+      @pointerup="onScrubUp"
+      @pointercancel="onScrubUp"
+      @wheel="onScrubWheel"
+    />
+    <div
+      v-else
+      class="axis-scrub is-fit"
+      :style="{ left: layout.margins.left + 8 + 'px', width: Math.max(0, layout.plotWidth - 8) + 'px', height: AXIS_TOP + 'px' }"
+      title="Wheel to zoom the timeline"
+      @wheel="onScrubWheel"
+    />
+    <div
+      v-if="hscroll.scrollable"
+      ref="hscrollEl"
+      class="gantt-hscroll"
+      :style="{ left: layout.margins.left + 'px', width: Math.max(0, layout.plotWidth) + 'px', height: AXIS_BOTTOM + 'px' }"
+      aria-label="Scroll the timeline"
+      @scroll="onHScroll"
+    >
+      <div :style="{ width: hscroll.contentWidth + 'px', height: '1px' }" />
+    </div>
+    <BeadTooltip
+      v-bind="tipProps"
+      @details="onOpenDetails"
+      @watch="onToggleWatch"
+      @tooltip-enter="cancelLeave"
+      @tooltip-leave="scheduleLeave"
+    />
+  </div>
+</template>
+
+<style>
+/* Colours come from tokens.css. The static SVG emitter in src/cli.mjs still
+   carries its own copy of this palette — it renders outside a browser, where
+   custom properties and light-dark() aren't available. */
+.beads-gantt {
+
+  /* DDV theme overrides — its Axis + gridlines default to light-theme colors
+     (grey/white) that are invisible on our dark background. */
+  --axisTickFontColor: var(--c-dim);
+  --axisLabelColor: var(--c-dim);
+  --axisTickFontFamily: ui-sans-serif, -apple-system, Segoe UI, Roboto, sans-serif;
+  --axisTickFontSize: 10px;
+  --axisTickFontWeight: 400;
+  --axisLabelFontFamily: ui-sans-serif, -apple-system, Segoe UI, Roboto, sans-serif;
+  --boundaryStroke: var(--c-border-strong);
+  --boundaryStrokeWidth: 1;
+  --tickStroke: var(--c-border-strong);
+  --tickStrokeWidth: 1;
+  --subTickStroke: var(--c-border);
+  --subTickStrokeWidth: 0.5;
+  --gridStroke: var(--c-border);
+  --gridStrokeWidth: 0.5;
+  --subGridStroke: var(--c-border);
+  --subGridStrokeWidth: 0.5;
+  --gridStrokeDashArray: none;
+
+  background: var(--c-bg);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  overflow: hidden;
+  width: 100%;
+  display: block;
+  position: relative; /* the viewport controls are positioned over the svg */
+}
+
+/* Pan/zoom handle over the axis rows (bp-c6q). Transparent: the axis draws
+   underneath, this only catches the pointer. */
+.beads-gantt .axis-scrub {
+  position: absolute;
+  top: 0;
+  cursor: grab;
+  touch-action: none;
+  z-index: 2;
+}
+
+.beads-gantt .axis-scrub:active {
+  cursor: grabbing;
+}
+
+.beads-gantt .axis-scrub.is-fit {
+  cursor: default;
+}
+
+/* The real scrollbar, in the plot's bottom margin. Thin, and in the
+   panel's colours so it reads as part of the chart. */
+.beads-gantt .gantt-hscroll {
+  position: absolute;
+  bottom: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--c-border-strong) transparent;
+  z-index: 2;
+}
+
+.beads-gantt-ddv {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.beads-gantt .plot-bg {
+  fill: var(--c-panel);
+}
+
+.beads-gantt .group-header {
+  fill: var(--c-border);
+  fill-opacity: 0.4;
+}
+
+.beads-gantt .group-label {
+  fill: var(--c-epic);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.beads-gantt .group-count {
+  fill: var(--c-dim);
+  font-size: 10px;
+}
+
+.beads-gantt .group-expand-btn {
+  cursor: pointer;
+}
+
+.beads-gantt .expand-pill {
+  fill: var(--c-epic);
+  fill-opacity: 0.18;
+  stroke: var(--c-epic);
+  stroke-width: 0.75;
+  stroke-opacity: 0.5;
+  transition: fill-opacity 0.08s ease-out;
+}
+
+.beads-gantt .group-expand-btn:hover .expand-pill {
+  fill-opacity: 0.35;
+}
+
+.beads-gantt .group-expand-btn.is-expanded .expand-pill {
+  fill: var(--c-border);
+  fill-opacity: 0.5;
+  stroke: var(--c-dim);
+  stroke-opacity: 0.4;
+}
+
+/* SVG text paints with `fill`; a lucide icon paints with stroke=currentColor,
+   which resolves against `color`. Any rule that colours text next to an icon
+   has to set both, or the icon renders in the inherited default and looks
+   like a different control. */
+.beads-gantt .group-expand-btn {
+  color: var(--c-epic);
+}
+
+.beads-gantt .group-expand-btn.is-expanded {
+  color: var(--c-dim);
+}
+
+.beads-gantt .expand-pill-text {
+  fill: var(--c-epic);
+  font-size: 10px;
+  font-weight: 600;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.beads-gantt .group-expand-btn.is-expanded .expand-pill-text {
+  fill: var(--c-dim);
+  font-weight: 400;
+}
+
+.beads-gantt .progress-chip {
+  fill: var(--c-border);
+}
+
+.beads-gantt .progress-chip-text {
+  fill: var(--c-dim);
+  font-family: ui-monospace, monospace;
+  font-size: 9px;
+  dominant-baseline: alphabetic;
+}
+
+.beads-gantt .progress-bar-bg {
+  fill: var(--c-border);
+}
+
+.beads-gantt .progress-bar-fill {
+  fill: var(--c-shipped);
+  fill-opacity: 0.8;
+}
+
+/* Row hover band: the eye's ruler from a bar back to its id and title.
+   A lift, not a selection, and faster in than out so sweeping the pointer
+   down the chart reads as one moving band rather than a flicker. */
+.beads-gantt .row-hover {
+  fill: var(--c-accent-wash);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.16s ease-out;
+}
+
+.beads-gantt .row-hover.is-lit {
+  opacity: 1;
+  transition: opacity 0.06s ease-out;
+}
+
+.beads-gantt .row-hit {
+  fill: transparent;
+}
+
+.beads-gantt .row-id,
+.beads-gantt .row-title {
+  cursor: pointer;
+}
+
+.beads-gantt .row-id:hover,
+.beads-gantt .row-title:hover {
+  fill: var(--c-epic);
+}
+
+.beads-gantt .row-id {
+  fill: var(--c-dim);
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  transition: fill 0.08s ease-out;
+}
+
+.beads-gantt .row-id.is-copied {
+  fill: var(--c-shipped);
+  font-weight: 600;
+}
+
+.beads-gantt .row-title {
+  fill: var(--c-text);
+  font-size: 11px;
+}
+
+.beads-gantt .row-priority {
+  fill: var(--c-dim);
+  font-size: 9px;
+  transition: fill 0.08s ease-out;
+}
+
+/* The lit row's dim text steps up one notch. Colour only: nothing moves. */
+.beads-gantt .row-label-band.is-lit .row-id:not(.is-copied),
+.beads-gantt .row-label-band.is-lit .row-priority {
+  fill: var(--c-dim-bright);
+}
+
+.beads-gantt .bar {
+  stroke: none;
+  fill-opacity: 0.9;
+  cursor: pointer;
+  transition: fill-opacity 0.08s ease-out;
+}
+.beads-gantt .bar.is-hovered {
+  fill-opacity: 1;
+  filter: brightness(1.2);
+}
+.beads-gantt .bar.kind-shipped {
+  fill: var(--c-shipped);
+  stroke: var(--c-shipped-stroke);
+  stroke-width: 0.75;
+}
+/* 0.8, not 0.5. At 0.5 this washed into the panel and landed within 0.05
+   OKLab of a futureBacklog bar (0.35 over the same panel) — two low-opacity
+   fills over one background converge no matter how far apart their tokens
+   are. A closed bead is a fact; the speculative projection is the faint
+   one. Enforced by style-audit.test.mjs, which composites before comparing. */
+.beads-gantt .bar.kind-closedNoShip {
+  fill: var(--c-closed-noship);
+  fill-opacity: 0.8;
+}
+.beads-gantt .bar.kind-inProgressLive {
+  fill: var(--c-in-progress);
+  fill-opacity: 0.95;
+}
+.beads-gantt .bar.kind-future {
+  fill: var(--c-future);
+  fill-opacity: 0.75;
+}
+.beads-gantt .bar.kind-futureBacklog {
+  fill: var(--c-backlog);
+  fill-opacity: 0.35;
+}
+/* The wait clock (bp-6cg): the phase bar's own waiting and review colours,
+   hatched like every projection that is not work, and faint. Their fills are
+   deliberately NOT in the style audit's bar-kinds group: they are told apart
+   from work by texture, height and cut, not by hue — a review wait sits in
+   the in-progress hue family on purpose, as the drawer's phase bar does. */
+.beads-gantt .bar.kind-waitUnclaimed {
+  fill: var(--c-phase-waiting);
+  fill-opacity: 0.32;
+  mask: url(#beads-gantt-synthetic-mask);
+}
+.beads-gantt .bar.kind-waitReview {
+  fill: var(--c-phase-review);
+  fill-opacity: 0.32;
+  mask: url(#beads-gantt-synthetic-mask);
+}
+/* What-if ghosts (bp-q56): the plan as it was, under the plan as it would be. */
+.beads-gantt .ghost {
+  fill: none;
+  stroke: var(--c-dim);
+  stroke-width: 1;
+  stroke-dasharray: 3 2;
+  pointer-events: none;
+}
+.beads-gantt .ghost-delta {
+  font-size: 9px;
+  font-weight: 600;
+  pointer-events: none;
+}
+.beads-gantt .ghost-delta.later {
+  fill: var(--c-danger);
+}
+.beads-gantt .ghost-delta.earlier {
+  fill: var(--c-shipped);
+}
+.beads-gantt .wait-gap {
+  stroke-width: 1;
+  stroke-dasharray: 2 3;
+  stroke-opacity: 0.45;
+  pointer-events: none;
+}
+.beads-gantt .wait-gap.kind-waitUnclaimed {
+  stroke: var(--c-phase-waiting);
+}
+.beads-gantt .wait-gap.kind-waitReview {
+  stroke: var(--c-phase-review);
+}
+.beads-gantt .bar.kind-unassigned {
+  fill: var(--c-future);
+  fill-opacity: 0.35;
+  stroke: oklch(from var(--c-future) calc(l - 0.35) c h);
+  stroke-width: 0.75;
+}
+/* An inferred assignee is a texture, not a colour (bp-67g.49). The fill and
+   opacity stay the bar's kind — a hatched future bar is the same violet at
+   0.75 — and the mask cuts stripes out of it, so it reads as "this kind,
+   not settled" and never as a fourth violet. A fourth violet is what the
+   dashed stroke this replaces amounted to: --c-epic at 0.75px on a
+   --c-future fill, twelve degrees of hue apart, on a 12px bar. Texture
+   holds in every style and mode and under colour-vision deficiency, and
+   adds nothing to the opacity ladder the audit has to police. Geometry is
+   HATCH_PITCH / HATCH_STRIPE in the script and the <defs> in the template;
+   style-audit.test.mjs checks the stripes stay legible at BAR_H and that
+   this rule never grows a fill or fill-opacity the painted-kinds check
+   cannot see. */
+.beads-gantt .bar.synthetic {
+  mask: url(#beads-gantt-synthetic-mask);
+}
+
+.beads-gantt .row-label-band.is-inferred-match {
+  opacity: var(--o-inferred);
+}
+
+.beads-gantt .watch-pin {
+  color: var(--c-epic);
+  pointer-events: none;
+}
+
+/* Only openable when the group is backed by a real bead — otherwise the
+   label is a facet value and must not look like a link. */
+.beads-gantt .group-label.is-openable {
+  cursor: pointer;
+}
+
+.beads-gantt .group-label.is-openable:hover {
+  text-decoration: underline;
+}
+
+.beads-gantt .group-band.is-over-cap .group-label {
+  fill: var(--c-today);
+}
+
+/* Lucide icons inside the chart arrive as NESTED <svg> roots, and a nested
+   <svg> does not take its width/height from CSS — unlike a top-level one in
+   HTML, it keeps its width/height attributes and CSS is ignored. So size is
+   passed as :size at each call site (see GANTT_ICON / DEP_ICON)
+   and only the properties that really do cascade live here: stroke-width is
+   a genuine SVG presentation property, and stroke="currentColor" means each
+   icon takes the `color` of the band it sits in. */
+.beads-gantt .gantt-icon {
+  stroke-width: 2;
+  pointer-events: none;
+}
+
+.beads-gantt .over-cap-icon {
+  color: var(--c-today);
+}
+
+.beads-gantt .over-cap-badge {
+  fill: var(--c-today);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.beads-gantt .bar.hl-blocked {
+  stroke: var(--c-today);
+  stroke-width: 1.5;
+}
+
+.beads-gantt .bar.hl-ready-now {
+  stroke: var(--c-epic);
+  stroke-width: 1.5;
+  filter: drop-shadow(0 0 3px oklch(from var(--c-epic) l c h / 60%));
+}
+
+.beads-gantt .dep-arrow {
+  fill: none;
+  stroke-width: 1.25;
+  pointer-events: none;
+}
+
+.beads-gantt .dep-edge.role-outgoing {
+  /* Focal bead BLOCKS these — green, "downstream." */
+  color: var(--c-shipped);
+  stroke: var(--c-shipped);
+  stroke-opacity: 0.75;
+}
+.beads-gantt .dep-edge.role-incoming {
+  /* These are what's blocking the focal bead — red, "upstream." */
+  color: var(--c-today);
+  stroke: var(--c-today);
+  stroke-opacity: 0.75;
+}
+.beads-gantt .dep-edge.role-neutral {
+  /* Full-graph mode — no focal, use dim violet so density stays readable. */
+  color: var(--c-epic);
+  stroke: var(--c-epic);
+  stroke-opacity: 0.28;
+}
+.beads-gantt .dep-edge.role-neutral .dep-arrow {
+  stroke-width: 1;
+}
+
+/* Full-graph mode draws every edge at once, so its terminals shrink and fade:
+   at that density a full-weight arrow per edge buries the bars it points at.
+   Focal edges are few, so they keep full weight. */
+.beads-gantt .dep-edge.role-neutral .dep-terminal-icon {
+  stroke-width: 2.5;
+  stroke-opacity: 0.6;
+}
+
+/* Terminal icon rides the curve's end tangent. stroke-opacity is inherited
+   from the role above, so the icon fades with its edge. */
+.beads-gantt .dep-terminal-icon {
+  stroke-width: 3;
+  /* stroke-opacity inherits from the edge role, which is tuned for a hairline
+     curve and leaves the glyph a smudge. Terminals carry the meaning, so they
+     stay opaque. */
+  stroke-opacity: 1;
+  pointer-events: none;
+}
+
+
+.beads-gantt .ship-marker {
+  /* Decoration on top of the bar: let the pointer through to the bar so the
+     hover (and its tooltip) still fires at the centre of a short shipped bar. */
+  pointer-events: none;
+  fill: var(--c-shipped);
+  stroke: oklch(from var(--c-shipped) calc(l - 0.55) c h);
+  stroke-width: 1;
+}
+
+.beads-gantt .threshold line {
+  stroke: var(--c-today);
+  stroke-width: 1.5;
+  stroke-dasharray: 3, 3;
+}
+
+.beads-gantt .today-label {
+  fill: var(--c-today);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.beads-gantt .today-date {
+  fill: var(--c-dim);
+  font-size: 9px;
+}
+
+.beads-gantt .label-divider {
+  stroke: var(--c-border);
+  stroke-width: 1;
+  pointer-events: none;
+  transition: stroke 0.08s ease-out, stroke-width 0.08s ease-out;
+}
+
+.beads-gantt .label-divider.is-resizing {
+  stroke: var(--c-epic);
+  stroke-width: 2;
+}
+
+.beads-gantt .label-resize-handle {
+  fill: transparent;
+  cursor: col-resize;
+}
+
+.beads-gantt .label-resize-handle:hover {
+  fill: var(--c-epic);
+  fill-opacity: 0.25;
+}
+
+.beads-gantt.is-resizing-labels {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.beads-gantt.is-resizing-labels .label-resize-handle {
+  fill: var(--c-epic);
+  fill-opacity: 0.35;
+}
+
+.beads-gantt .x-axis .gridlines line {
+  stroke: var(--c-border);
+  stroke-width: 0.5;
+}
+
+/* Fainter than a labelled boundary: present enough to count weeks or days
+   against, quiet enough not to compete with the bars. */
+.beads-gantt .x-axis .gridlines line.minor {
+  stroke: var(--c-border);
+  stroke-width: 0.5;
+  stroke-opacity: 0.45;
+}
+
+.beads-gantt .x-axis .gridlines line.emphasize {
+  stroke: var(--c-border-strong);
+  stroke-width: 1;
+}
+
+.beads-gantt .x-axis .tick-labels text {
+  fill: var(--c-dim);
+  font-size: 10px;
+  dominant-baseline: alphabetic;
+}
+
+.beads-gantt .x-axis .tick-labels text.emphasize {
+  fill: var(--c-text);
+  font-weight: 600;
+}
+</style>