beadcyte 0.4.0

package/src/web/components/ControlsPanel.vue

@@ -0,0 +1,476 @@
+<script setup lang="ts">
+// ControlsPanel.vue — group-by radio + filter popovers + window presets.
+// Every change mutates the Pinia store; the reactive view model recomputes
+// through Vue's computed-caching (bp-092), so re-render is instant with no
+// refetch. Filter option lists are enumerated live from the current beads
+// so there are no dead options.
+
+import { computed } from "vue";
+import {
+  useBeadsStore,
+  WINDOW_PRESETS,
+  HIGHLIGHT_KINDS,
+  type WindowPreset,
+  type HighlightKind,
+  windowFromPreset,
+} from "../store";
+import type { GroupBy } from "../view-model";
+import { assigneeKey, UNASSIGNED } from "../view-model";
+import type { ViewMode } from "../composables/url-codec";
+import FilterPopover from "./FilterPopover.vue";
+import type { FilterOption } from "./filter-option";
+import { SHORTCUTS } from "../shortcuts";
+import { controlApplies, scopeNote, type ControlId } from "../controls-scope";
+
+const HIGHLIGHT_LABELS: Record<HighlightKind, string> = {
+  blocked: "blocked",
+  "over-cap": "over-cap",
+  "ready-now": "ready-now",
+};
+
+const store = useBeadsStore();
+
+// ── what the active view listens to (bp-67g.36) ──────────────────────────
+// A group the view cannot act on is dimmed and its buttons disabled, and one
+// note at the end of the panel says where they do work. The matrix lives in
+// controls-scope.ts; nothing here decides applicability.
+const inert = (c: ControlId) => !controlApplies(store.view, c);
+const inertTitle = (c: ControlId) =>
+  inert(c) ? `Not used by the ${store.view} view` : undefined;
+const note = computed(() => scopeNote(store.view));
+
+const GROUP_MODES: Array<{ id: GroupBy; label: string }> = [
+  { id: "epic", label: "epic" },
+  { id: "assignee", label: "assignee" },
+  { id: "seat", label: "seat" },
+  { id: "track", label: "track" },
+  { id: "status", label: "status" },
+  { id: "priority", label: "priority" },
+  { id: "none", label: "none" },
+];
+
+const VIEW_MODES: Array<{ id: ViewMode; label: string }> = [
+  { id: "mine", label: "mine" },
+  { id: "gantt", label: "gantt" },
+  { id: "grid", label: "grid" },
+  { id: "table", label: "table" },
+  { id: "incytes", label: "incytes" },
+];
+
+// ── option lists (enumerated from live data) ──────────────────────────────
+
+/**
+ * Is this bead's status in view?
+ *
+ * Every count below is a promise about what selecting the option will show,
+ * so they all have to filter by the same rule. Before bp-67g.40 only the
+ * assignee counter consulted status at all, and it consulted the two toggles
+ * rather than the status filter — so type, priority and label hints
+ * cheerfully counted hidden closed beads while assignee did not.
+ *
+ * The status counter itself deliberately does NOT use this: its whole job is
+ * to tell you how many beads a status you have not selected would bring in.
+ */
+function inStatusSelection(b: { status: string }): boolean {
+  const sel = store.filters.statuses;
+  return !sel || sel.length === 0 || sel.includes(b.status);
+}
+
+const typeOptions = computed<FilterOption<string>[]>(() => {
+  const seen = new Map<string, number>();
+  for (const b of store.beads) {
+    if (b.issue_type === "epic") continue;
+    if (!inStatusSelection(b)) continue;
+    seen.set(b.issue_type, (seen.get(b.issue_type) ?? 0) + 1);
+  }
+  return [...seen.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([value, count]) => ({ value, label: value, hint: `${count}` }));
+});
+
+const priorityOptions = computed<FilterOption<number>[]>(() => {
+  const seen = new Map<number, number>();
+  for (const b of store.beads) {
+    if (b.issue_type === "epic") continue;
+    if (!inStatusSelection(b)) continue;
+    const p = b.priority ?? 4;
+    seen.set(p, (seen.get(p) ?? 0) + 1);
+  }
+  return [0, 1, 2, 3, 4].map((p) => ({
+    value: p,
+    label: `P${p}`,
+    hint: `${seen.get(p) ?? 0}`,
+  }));
+});
+
+const statusOptions = computed<FilterOption<string>[]>(() => {
+  const seen = new Map<string, number>();
+  for (const b of store.beads) {
+    if (b.issue_type === "epic") continue;
+    seen.set(b.status, (seen.get(b.status) ?? 0) + 1);
+  }
+  return [...seen.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([value, count]) => ({
+      value,
+      label: value.replace(/_/g, " "),
+      hint: `${count}`,
+    }));
+});
+
+const labelOptions = computed<FilterOption<string>[]>(() => {
+  const seen = new Map<string, number>();
+  for (const b of store.beads) {
+    if (b.issue_type === "epic") continue;
+    if (!inStatusSelection(b)) continue;
+    for (const l of b.labels ?? []) seen.set(l, (seen.get(l) ?? 0) + 1);
+  }
+  return [...seen.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 40) // cap the popover; wide-tail labels rarely help filtering
+    .map(([value, count]) => ({ value, label: value, hint: `${count}` }));
+});
+
+const assigneeOptions = computed<FilterOption<string>[]>(() => {
+  // Resolved through the scheduler, exactly as grouping and the filter do —
+  // reading b.assignee here would list handles that then filter to nothing
+  // and pile everyone's real work under "(unassigned)".
+  const schedule = store.scheduleWithEstimates?.schedule;
+  const seen = new Map<string, number>();
+  for (const b of store.beads) {
+    if (b.issue_type === "epic") continue;
+    if (!inStatusSelection(b)) continue;
+    const a = assigneeKey(b, schedule?.get(b.id));
+    seen.set(a, (seen.get(a) ?? 0) + 1);
+  }
+  return [...seen.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([value, count]) => ({
+      value,
+      label: value === UNASSIGNED ? "(unassigned)" : value,
+      hint: `${count}`,
+    }));
+});
+
+// ── two-way bindings that route through the store ────────────────────────
+
+const types = computed({
+  get: () => store.filters.types ?? null,
+  set: (v) => store.setFilters({ types: v }),
+});
+const priorities = computed({
+  get: () => store.filters.priorities ?? null,
+  set: (v) => store.setFilters({ priorities: v }),
+});
+const statuses = computed({
+  get: () => store.filters.statuses ?? null,
+  set: (v) => store.setFilters({ statuses: v }),
+});
+const labels = computed({
+  get: () => store.filters.labels ?? null,
+  set: (v) => store.setFilters({ labels: v }),
+});
+const assignees = computed({
+  get: () => store.filters.assignees ?? null,
+  set: (v) => store.setFilters({ assignees: v }),
+});
+
+const activePreset = computed<WindowPreset | null>(() => {
+  // Best-effort match: if `window` matches a preset's from/to, mark it active.
+  //
+  // Uses the store's windowFromPreset rather than a local mirror of it. There
+  // WAS a mirror here, defended on the grounds that template code should not
+  // see every branch of the store's factory — and it silently stopped
+  // matching the moment a seventh preset was added to one switch and not the
+  // other, leaving the new preset permanently un-highlighted.
+  const w = store.window;
+  for (const p of WINDOW_PRESETS) {
+    const cand = p.id;
+    const other = windowFromPreset(cand);
+    if (sameDate(w.from, other.from) && sameDate(w.to, other.to)) return cand;
+  }
+  return null;
+});
+
+function sameDate(a: Date | null, b: Date | null): boolean {
+  if (a === null && b === null) return true;
+  if (a === null || b === null) return false;
+  return Math.abs(a.getTime() - b.getTime()) < 60_000;
+}
+
+</script>
+
+<template>
+  <section class="controls-panel">
+    <div class="control-group">
+      <label class="group-label">View</label>
+      <div class="segmented">
+        <button
+          v-for="v in VIEW_MODES"
+          :key="v.id"
+          type="button"
+          :class="{ active: store.view === v.id }"
+          @click="store.setView(v.id)"
+        >{{ v.label }}</button>
+      </div>
+    </div>
+
+    <div class="control-group" :class="{ 'is-inert': inert('groupBy') }" :title="inertTitle('groupBy')">
+      <label class="group-label">Group by</label>
+      <div class="segmented">
+        <button
+          v-for="g in GROUP_MODES"
+          :key="g.id"
+          type="button"
+          :class="{ active: store.groupBy === g.id }"
+          :disabled="inert('groupBy')"
+          @click="store.setGroupBy(g.id)"
+        >{{ g.label }}</button>
+      </div>
+    </div>
+
+    <div v-if="store.watched.length" class="control-group" :class="{ 'is-inert': inert('watch') }" :title="inertTitle('watch')">
+      <label class="group-label">Watch</label>
+      <div class="segmented">
+        <button
+          type="button"
+          :class="{ active: store.watchedOnly }"
+          :aria-pressed="store.watchedOnly"
+          :disabled="inert('watch')"
+          title="Show only watched beads, and the children of watched epics"
+          @click="store.toggleWatchedOnly()"
+        >watched only</button>
+      </div>
+    </div>
+
+    <!-- MINE: one click to the two views that matter during a working day
+         (bp-egy). Each button REPLACES the filter state with its own, and
+         the active mark is derived from the filters, so a hand edit drops
+         it. Disabled until a current user is chosen in the options menu. -->
+    <div class="control-group" :class="{ 'is-inert': inert('mine') }" :title="inertTitle('mine')">
+      <label class="group-label">Mine</label>
+      <div class="segmented">
+        <button
+          v-for="s in SHORTCUTS"
+          :key="s.id"
+          type="button"
+          :class="{ active: store.activeShortcut === s.id }"
+          :aria-pressed="store.activeShortcut === s.id"
+          :disabled="!store.effectiveUser || inert('mine')"
+          :title="store.effectiveUser ? s.title : 'Set your current user in the options menu (gear, top right) first'"
+          @click="store.applyShortcut(s.id)"
+        >{{ s.label }}</button>
+      </div>
+      <span v-if="!store.effectiveUser && !inert('mine')" class="mine-hint">set your user in options (gear, top right)</span>
+      <span v-else-if="store.effectiveUser && store.userIsStale" class="mine-hint">{{ store.effectiveUser }} is not an assignee here — pick again in options</span>
+    </div>
+
+    <div class="control-group" :class="{ 'is-inert': inert('filters') }" :title="inertTitle('filters')">
+      <label class="group-label">Filters</label>
+      <FilterPopover
+        label="type"
+        :options="typeOptions"
+        :disabled="inert('filters')"
+        v-model="types"
+      />
+      <FilterPopover
+        label="priority"
+        :options="priorityOptions"
+        :disabled="inert('filters')"
+        v-model="priorities"
+      />
+      <FilterPopover
+        label="status"
+        :options="statusOptions"
+        :disabled="inert('filters')"
+        v-model="statuses"
+      />
+      <FilterPopover
+        label="label"
+        :options="labelOptions"
+        :disabled="inert('filters')"
+        v-model="labels"
+      />
+      <FilterPopover
+        label="assignee"
+        :options="assigneeOptions"
+        :disabled="inert('filters')"
+        v-model="assignees"
+      />
+      <!-- The one filter term the popovers cannot express: it looks at other
+           beads. Shown here so a shortcut that sets it stays legible. -->
+      <div class="segmented">
+        <button
+          type="button"
+          :class="{ active: !!store.filters.unblocked }"
+          :aria-pressed="!!store.filters.unblocked"
+          :disabled="inert('filters')"
+          title="Only beads whose every blocks-dependency is closed"
+          @click="store.setFilters({ unblocked: store.filters.unblocked ? null : true })"
+        >unblocked</button>
+      </div>
+    </div>
+
+    <div class="control-group" :class="{ 'is-inert': inert('window') }" :title="inertTitle('window')">
+      <label class="group-label">Window</label>
+      <div class="segmented">
+        <button
+          v-for="p in WINDOW_PRESETS"
+          :key="p.id"
+          type="button"
+          :class="{ active: activePreset === p.id }"
+          :disabled="inert('window')"
+          @click="store.setWindowFromPreset(p.id)"
+        >{{ p.label }}</button>
+      </div>
+    </div>
+
+    <div class="control-group" :class="{ 'is-inert': inert('highlight') }" :title="inertTitle('highlight')">
+      <label class="group-label">Highlight</label>
+      <div class="segmented">
+        <button
+          v-for="k in HIGHLIGHT_KINDS"
+          :key="k"
+          type="button"
+          :class="{ active: store.highlights[k] }"
+          :disabled="inert('highlight')"
+          @click="store.toggleHighlight(k)"
+        >{{ HIGHLIGHT_LABELS[k] }}</button>
+        <!-- Arrows are the Gantt's alone, so these two can be inert while the
+             highlights beside them are live (the grid). -->
+        <button
+          type="button"
+          :class="{ active: store.showDependencies }"
+          :disabled="inert('deps')"
+          :title="inert('deps') ? 'Dependency arrows are drawn on the gantt only' : 'Draw dependency arrows around the hovered bead (green = it blocks these, red = these block it)'"
+          @click="store.toggleShowDependencies()"
+        >deps</button>
+        <button
+          type="button"
+          :disabled="inert('deps') || !store.showDependencies"
+          :class="{ active: store.showAllDependencies }"
+          title="Also draw arrows for every visible edge, not just the hovered bead"
+          @click="store.toggleShowAllDependencies()"
+        >all deps</button>
+      </div>
+    </div>
+
+    <!-- What-if (bp-q56): the change set's size, and the way to its panel. -->
+    <div class="control-group" :class="{ 'is-inert': inert('whatif') }" :title="inertTitle('whatif')">
+      <label class="group-label">What if</label>
+      <div class="segmented">
+        <button
+          type="button"
+          :class="{ active: store.whatIfActive }"
+          :aria-pressed="store.whatIfActive"
+          :disabled="inert('whatif')"
+          title="Stage changes and see the plan as it would be, without writing to bd"
+          @click="store.openWhatIfPanel()"
+        >{{ store.whatIfActive ? `${store.whatIf.length} staged` : "plan…" }}</button>
+        <button v-if="store.whatIfActive" type="button" :disabled="inert('whatif')" title="Drop every staged change" @click="store.discardWhatIf()">discard</button>
+      </div>
+    </div>
+
+    <span v-if="note" class="scope-note">{{ note }}</span>
+
+    <!-- The "Show closed" / "Include deferred" toggles used to live here.
+         They duplicated the STATUS filter and were applied ahead of it, so
+         asking for a status a toggle hid returned an empty view with no
+         explanation (bp-67g.40). The status filter is now the only control
+         over status, and its first-paint value says so out loud. -->
+  </section>
+</template>
+
+<style>
+.controls-panel {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-panel);
+  --border: var(--c-border);
+  --panel: var(--c-panel);
+  --text: var(--c-text);
+  --dim: var(--c-dim);
+  --accent: var(--c-accent);
+}
+
+.controls-panel .control-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.controls-panel .group-label {
+  font-size: 10px;
+  /* Explicit: this used to arrive by accident, leaked from BeadsGrid's
+     unscoped .group-label rule. */
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  margin-right: 2px;
+}
+
+.controls-panel .segmented {
+  display: inline-flex;
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.controls-panel .segmented button {
+  background: transparent;
+  color: var(--c-dim);
+  border: none;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  border-right: 1px solid var(--c-border);
+  font-family: inherit;
+}
+
+.controls-panel .segmented button:last-child {
+  border-right: none;
+}
+
+.controls-panel .segmented button:hover:not(.active) {
+  color: var(--c-text);
+}
+
+.controls-panel .segmented button.active {
+  background: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
+}
+
+.controls-panel .segmented button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.controls-panel .mine-hint {
+  font-size: 11px;
+  color: var(--c-dim);
+  margin-left: 8px;
+}
+
+/* A group the active view cannot act on (bp-67g.36): still there, so the
+   panel keeps its shape between views, but plainly not live. The buttons
+   carry disabled as well, so the pointer says so too. */
+.controls-panel .control-group.is-inert {
+  opacity: 0.45;
+}
+
+.controls-panel .control-group.is-inert .segmented button:disabled {
+  opacity: 1; /* the group is already dimmed; do not double it */
+}
+
+.controls-panel .scope-note {
+  font-size: 11px;
+  color: var(--c-dim);
+  font-style: italic;
+}
+</style>

package/src/web/components/CostTrend.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+// CostTrend.vue — seat hours per week, measured behind today and projected
+// ahead, with tokens in/out in the figures and the table (bp-0z5).
+//
+// Sits beside Ships per week and shares its weekly buckets. Measured weeks
+// are solid stacks by seat; projected weeks continue the axis past a rule at
+// today, drawn dulled and dashed like every projection in the app, and the
+// head says what the projection is made of — medians of comparable shipped
+// work, with the sample size — so nothing projected can be read as measured.
+// A hand-written SVG: stacked bars over a dozen or so buckets need no
+// scaler library, and the table beneath carries every value anyway.
+
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { weeklyAverage, fmtTokens, fmtHours, type CostSeries } from "../cost";
+
+const props = defineProps<{ series: CostSeries; who?: string | null }>();
+
+const weeks = computed(() => [...props.series.past, ...props.series.projected]);
+const measuredAvg = computed(() => weeklyAverage(props.series.past));
+const projectedAvg = computed(() => weeklyAverage(props.series.projected));
+const hasMeasured = computed(() => props.series.past.some((w) => w.beads > 0));
+const hasProjected = computed(() => props.series.projected.some((w) => w.beads > 0));
+const peak = computed(() => Math.max(1, ...weeks.value.map((w) => w.hours)));
+
+// Geometry in pixels: the svg is as wide as its host (measured, like
+// ShipTrend) and a fixed height, so text stays text-sized at any width.
+const hostEl = ref<HTMLElement | null>(null);
+const W = ref(600);
+let ro: ResizeObserver | null = null;
+onMounted(() => {
+  if (!hostEl.value) return;
+  const measure = () => {
+    if (hostEl.value) W.value = Math.max(200, hostEl.value.getBoundingClientRect().width);
+  };
+  measure();
+  ro = new ResizeObserver(measure);
+  ro.observe(hostEl.value);
+});
+onBeforeUnmount(() => ro?.disconnect());
+const H = 150;
+const PAD = { top: 14, right: 8, bottom: 22, left: 34 };
+const plotW = computed(() => W.value - PAD.left - PAD.right);
+const plotH = H - PAD.top - PAD.bottom;
+const slot = computed(() => plotW.value / Math.max(1, weeks.value.length));
+const barW = computed(() => Math.max(3, slot.value * 0.62));
+const x = (i: number) => PAD.left + i * slot.value + (slot.value - barW.value) / 2;
+const y = (h: number) => PAD.top + plotH - (h / peak.value) * plotH;
+const todayX = computed(() => PAD.left + props.series.past.length * slot.value);
+const fmtWeek = (d: Date) => d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+/** Every 2nd/3rd label when the axis is crowded. */
+const labelEvery = computed(() => Math.max(1, Math.ceil(56 / slot.value)));
+const gridTicks = computed(() => {
+  const p = peak.value;
+  const step = p <= 5 ? 1 : p <= 20 ? 5 : p <= 50 ? 10 : p <= 200 ? 50 : 100;
+  const out: number[] = [];
+  for (let v = step; v <= p; v += step) out.push(v);
+  return out;
+});
+
+/** Segments for one week's stack, in the shared seat order, bottom-up. */
+function segments(w: { hoursBySeat: Record<string, number> }) {
+  let acc = 0;
+  return props.series.seats
+    .map((seat, si) => {
+      const h = w.hoursBySeat[seat] ?? 0;
+      const seg = { seat, si, h, y0: acc, y1: acc + h };
+      acc += h;
+      return seg;
+    })
+    .filter((s) => s.h > 0);
+}
+const seatHours = (avg: { hoursBySeat: Record<string, number> }) =>
+  props.series.seats.map((s) => `${s} ${fmtHours(avg.hoursBySeat[s] ?? 0)}`).join(" · ");
+</script>
+
+<template>
+  <section class="stat-block cost-block">
+    <h2>
+      Cost per week
+      <span class="hint">{{ series.past.length }} weeks recorded · {{ series.horizonWeeks }} projected</span>
+    </h2>
+
+    <div v-if="hasMeasured || hasProjected" class="cost-head">
+      <div v-if="hasMeasured" class="cost-figure">
+        <span class="cost-value">{{ fmtHours(measuredAvg.hours) }}<span class="unit">/wk</span></span>
+        <span class="cost-sub">
+          recorded · {{ seatHours(measuredAvg) }}
+          <template v-if="measuredAvg.tokensIn !== null"> · tokens {{ fmtTokens(measuredAvg.tokensIn) }} in / {{ fmtTokens(measuredAvg.tokensOut) }} out</template>
+          · over {{ measuredAvg.beads }} bead{{ measuredAvg.beads === 1 ? "" : "s" }}<template v-if="series.reconstructed"> · {{ series.reconstructed }} of the {{ series.sample }} records say they were reconstructed, not measured</template>
+        </span>
+      </div>
+      <div v-if="hasProjected" class="cost-figure is-projection">
+        <span class="cost-value">{{ fmtHours(projectedAvg.hours) }}<span class="unit">/wk</span></span>
+        <span class="cost-sub">
+          projected · {{ seatHours(projectedAvg) }}
+          <template v-if="projectedAvg.tokensIn !== null"> · tokens {{ fmtTokens(projectedAvg.tokensIn) }} in / {{ fmtTokens(projectedAvg.tokensOut) }} out</template>
+          · {{ projectedAvg.beads }} bead{{ projectedAvg.beads === 1 ? "" : "s" }} scheduled to land, each given the median cost of comparable shipped work ({{ series.sample }} recorded)
+        </span>
+      </div>
+    </div>
+
+    <div ref="hostEl" class="cost-host">
+    <svg v-if="hasMeasured || hasProjected" class="cost-svg" :width="W" :height="H" role="img" :aria-label="`Hours per week by seat, ${series.past.length} recorded weeks then ${series.horizonWeeks} projected`">
+      <g class="grid">
+        <line v-for="v in gridTicks" :key="v" :x1="PAD.left" :x2="W - PAD.right" :y1="y(v)" :y2="y(v)" />
+        <text v-for="v in gridTicks" :key="'l' + v" :x="PAD.left - 4" :y="y(v) + 3" text-anchor="end">{{ v }}h</text>
+      </g>
+      <line class="baseline" :x1="PAD.left" :x2="W - PAD.right" :y1="PAD.top + plotH" :y2="PAD.top + plotH" />
+      <g v-for="(w, i) in weeks" :key="w.weekStart.toISOString()" class="week" :class="{ projected: !w.measured }">
+        <rect
+          v-for="s in segments(w)"
+          :key="s.seat"
+          :class="`seat seat-${s.si}`"
+          :x="x(i)"
+          :y="y(s.y1)"
+          :width="barW"
+          :height="Math.max(0, y(s.y0) - y(s.y1))"
+        >
+          <title>{{ fmtWeek(w.weekStart) }} · {{ s.seat }} {{ s.h.toFixed(1) }}h{{ w.measured ? "" : " (projected)" }}</title>
+        </rect>
+        <text v-if="i % labelEvery === 0" class="xlabel" :x="x(i) + barW / 2" :y="H - 8" text-anchor="middle">{{ fmtWeek(w.weekStart) }}</text>
+      </g>
+      <g class="today" :transform="`translate(${todayX} 0)`">
+        <line :y1="PAD.top - 4" :y2="PAD.top + plotH" />
+        <text :y="PAD.top - 3" x="3">today</text>
+      </g>
+    </svg>
+    <p v-else class="hint">
+      No bead here carries recorded economics{{ who ? ` for ${who}` : "" }} — hours by seat under
+      <code>metadata.economics.by_seat</code>, tokens under <code>totals</code> or per session — so there is no recorded cost to show and nothing
+      to project from. See docs/economics.md for what to record.
+    </p>
+    </div>
+
+    <div v-if="hasMeasured || hasProjected" class="cost-legend">
+      <span v-for="(s, i) in series.seats" :key="s" class="key"><i :class="`swatch seat-${i}`" />{{ s }}</span>
+      <span class="key"><i class="swatch projected-swatch" />projected (dulled)</span>
+    </div>
+
+    <details v-if="hasMeasured || hasProjected" class="table-view">
+      <summary>Table</summary>
+      <table>
+        <thead>
+          <tr>
+            <th>week of</th>
+            <th v-for="s in series.seats" :key="s" class="num">{{ s }} h</th>
+            <th class="num">tokens in</th>
+            <th class="num">tokens out</th>
+            <th class="num">beads</th>
+            <th>basis</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="w in weeks" :key="w.weekStart.toISOString()" :class="{ projected: !w.measured }">
+            <td>{{ fmtWeek(w.weekStart) }}</td>
+            <td v-for="s in series.seats" :key="s" class="num">{{ fmtHours(w.hoursBySeat[s] ?? 0) }}</td>
+            <td class="num">{{ fmtTokens(w.tokensIn) }}</td>
+            <td class="num">{{ fmtTokens(w.tokensOut) }}</td>
+            <td class="num">{{ w.beads }}</td>
+            <td>{{ w.measured ? "recorded" : "projected (medians)" }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </details>
+  </section>
+</template>
+
+<style scoped>
+.cost-block h2 .hint {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+  color: var(--c-dim);
+  margin-left: 6px;
+}
+.cost-head { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 6px; }
+.cost-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.cost-value { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--c-text); }
+.cost-value .unit { font-size: 12px; font-weight: 400; color: var(--c-dim); margin-left: 2px; }
+.cost-figure.is-projection .cost-value { color: var(--c-dim); font-style: italic; }
+.cost-sub { font-size: 11px; color: var(--c-dim); max-width: 60ch; }
+.cost-host { width: 100%; margin-top: 4px; }
+.cost-svg { display: block; }
+.cost-svg .grid line { stroke: var(--c-border); stroke-width: 0.5; }
+.cost-svg .grid text, .cost-svg .xlabel { fill: var(--c-dim); font-size: 9px; font-family: var(--font-body); }
+.cost-svg .baseline { stroke: var(--c-border-strong); stroke-width: 1; }
+/* Seats: the first (most hours, usually the agent) in the accent, the second in the in-progress hue, more in dim. */
+.cost-svg .seat-0, .cost-legend .seat-0 { fill: var(--c-accent); background: var(--c-accent); }
+.cost-svg .seat-1, .cost-legend .seat-1 { fill: var(--c-in-progress); background: var(--c-in-progress); }
+.cost-svg .seat-2, .cost-legend .seat-2, .cost-svg .seat-3, .cost-legend .seat-3 { fill: var(--c-dim); background: var(--c-dim); }
+.cost-svg .week.projected rect { fill-opacity: 0.35; stroke: var(--c-dim); stroke-width: 0.75; stroke-dasharray: 2 2; }
+.cost-svg .today line { stroke: var(--c-danger); stroke-width: 1; stroke-dasharray: 3 2; }
+.cost-svg .today text { fill: var(--c-danger); font-size: 9px; font-family: var(--font-body); }
+.cost-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 10px; color: var(--c-dim); }
+.cost-legend .key { display: inline-flex; align-items: center; gap: 5px; }
+.cost-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
+.cost-legend .projected-swatch { background: var(--c-dim); opacity: 0.35; outline: 1px dashed var(--c-dim); }
+.hint code { font-family: var(--font-mono); font-size: 0.92em; }
+.table-view { margin-top: 10px; font-size: 11px; }
+.table-view summary { cursor: pointer; color: var(--c-dim); padding: 2px 0; }
+.table-view table { border-collapse: collapse; margin-top: 6px; width: 100%; }
+.table-view th, .table-view td { text-align: left; padding: 2px 8px 2px 0; border-bottom: 1px solid var(--c-border); }
+.table-view thead th { color: var(--c-dim); font-size: 10px; font-weight: 600; }
+.table-view .num { text-align: right; font-variant-numeric: tabular-nums; }
+.table-view tr.projected td { color: var(--c-dim); font-style: italic; }
+</style>