beadcyte 0.4.0

package/src/web/components/BeadsIncytes.vue

@@ -0,0 +1,567 @@
+<script setup lang="ts">
+// BeadsIncytes.vue — the project-wide view, third alongside gantt and grid.
+//
+// Everything here answers a question about the PROJECT rather than about a
+// bead or a date: how fast is work shipping, how far along is each group,
+// what shape is the plan, who is on it. The Gantt and the grid are both
+// views of individual beads in time; this is the one that steps back.
+//
+// bp-67g.35. bp-67g.16's spike had recommended putting these in the summary
+// tail under the Gantt instead; that was overruled, and having built them
+// the tab is the better home — a project-wide surface buried below a
+// timeline is not a surface anyone goes to.
+//
+// Project-wide means project-wide (bp-67g.36): nothing here reads the
+// filters or the window. "Bars by kind" did — it counted the bars the Gantt
+// was drawing in the current window — and it moved wholesale in bp-67g.35
+// only because it sat in the summary tail. Bar kind is a fact about the
+// renderer ("future" vs "futureBacklog" is inside or beyond the scheduling
+// horizon), so it lives with the renderer again, in the Gantt's footer.
+// Progress reads projectGroups(), so its rows are every group over every
+// bead; the controls panel dims everything but group-by on this view.
+//
+// One person at a time (bp-67g.43): pick a handle and the same two charts
+// re-scope to that person — their weekly ships, in the project's buckets,
+// and the progress of the beads recorded as theirs — and the pane below
+// adds what the project view has no room for: the roster's caps and where
+// they came from, what is in flight, what is ready for them, what the
+// scheduler would route to them next (a projection, marked as one), and
+// what they shipped lately. Every assignee handle in the app leads here
+// (store.openPerson), and ?who= makes the picture shareable. The mine view
+// stays the actionable list for YOU; this is anyone, from the project's
+// angle, and it reuses the mine view's own rules (person.ts) rather than a
+// second set.
+
+import { computed, ref, watch } from "vue";
+import { X } from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { projectGroups, type ViewModel } from "../view-model";
+import { groupProgress } from "../insights";
+import { isShipped } from "../../ship.mjs";
+import {
+  personRoster,
+  describeCap,
+  rosterProvenanceNote,
+  personShipTrend,
+  beadsAssignedTo,
+  personWork,
+} from "../person";
+import ShipTrend from "./ShipTrend.vue";
+import CostTrend from "./CostTrend.vue";
+import { costSeries } from "../cost";
+import GroupProgress from "./GroupProgress.vue";
+import MineRow from "./MineRow.vue";
+import WipBullets from "./WipBullets.vue";
+import { wipRows as computeWipRows, type CalibratedHuman } from "../wip";
+import { frontierLane, describeLane, proposeNext, describeProposal } from "../frontier";
+
+// The view model is what the other views draw; this one does not read it
+// (see the header), but every view takes it so App.vue can hand it over
+// uniformly.
+defineProps<{ vm: ViewModel | null }>();
+
+const store = useBeadsStore();
+
+const rosterHumans = computed(() => store.calibratedRoster?.humans ?? store.roster?.humans ?? []);
+
+// ── allocation (bp-67g.29, here since bp-dgq) ────────────────────────────
+// Everyone's work in flight against their calibrated cap, on one shared
+// scale. It used to be a strip under the controls on every view; it is a
+// project-wide fact, so it lives on the project-wide view. With a person
+// selected the other rows stay — the comparison is the point — and theirs
+// is emphasised; a handle click scopes the view to that person.
+const velocity = computed(() => store.velocity);
+const wipRows = computed(() =>
+  computeWipRows(store.beads, (store.calibratedRoster?.humans ?? []) as unknown as CalibratedHuman[]),
+);
+
+// ── one person (bp-67g.43) ───────────────────────────────────────────────
+const who = computed(() => store.who);
+const person = computed(() =>
+  who.value ? personRoster(who.value, (store.calibratedRoster ?? store.roster) as never) : null,
+);
+const personTrend = computed(() => (who.value ? personShipTrend(who.value, store.velocity as never) : null));
+const personProgress = computed(() => {
+  const sched = store.scheduleWithEstimates?.schedule;
+  if (!who.value || !sched) return [];
+  return groupProgress(projectGroups(beadsAssignedTo(store.beads, who.value), sched, store.groupBy));
+});
+const work = computed(() =>
+  who.value
+    ? personWork(store.beads, who.value, {
+        schedule: store.scheduleWithEstimates?.schedule ?? null,
+        triage: store.triage,
+        watched: store.watched,
+      })
+    : null,
+);
+// Their recent ships, newest first: the trend's points as beads.
+const recentShips = computed(() => {
+  if (!who.value) return [];
+  return beadsAssignedTo(store.beads, who.value)
+    .filter((b) => b.status === "closed" && b.closed_at && isShipped(b))
+    .sort((a, b) => (b.closed_at! > a.closed_at! ? 1 : -1))
+    .slice(0, 8);
+});
+const inFlight = computed(() => (work.value ? [...work.value.inProgress, ...work.value.inReview] : []));
+const fmtDay = (iso: string) => new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short" });
+// ── cost trajectory (bp-0z5) ─────────────────────────────────────────────
+// Seat hours and tokens per week: measured in the ship trend's buckets,
+// projected ahead over the window's forward span from medians of comparable
+// shipped work, placed where the schedule lands each bead. Follows the
+// what-if like every other plan reading.
+const costHorizonDays = computed(() => {
+  const to = store.window.to;
+  return to ? Math.max(7, Math.ceil((to.getTime() - Date.now()) / 86_400_000)) : 56;
+});
+const projectCost = computed(() => {
+  const v = store.velocity;
+  if (!v) return null;
+  return costSeries(store.planBeads, store.scheduleWithEstimates?.schedule ?? null, v.weekly, { horizonDays: costHorizonDays.value });
+});
+const personCost = computed(() => {
+  const v = store.velocity;
+  if (!v || !who.value) return null;
+  return costSeries(store.planBeads, store.scheduleWithEstimates?.schedule ?? null, v.weekly, { horizonDays: costHorizonDays.value, handle: who.value });
+});
+
+// ── the frontier (bp-wfe) ────────────────────────────────────────────────
+// The plan's edge for this person over the window's forward span (7–60
+// days, 14 when the window is open-ended), and what they could take next,
+// ranked with reasons. Accepting a proposal stages a what-if reassignment;
+// the diff shows what moves before anything is confirmed (owner decision).
+const frontierDays = computed(() => {
+  const to = store.window.to;
+  if (!to) return 14;
+  return Math.min(60, Math.max(7, Math.ceil((to.getTime() - Date.now()) / 86_400_000)));
+});
+const lane = computed(() =>
+  who.value ? frontierLane(who.value, store.planBeads, store.scheduleWithEstimates?.schedule ?? null, frontierDays.value) : null,
+);
+const laneTicks = computed(() => {
+  const n = frontierDays.value;
+  const step = n <= 14 ? 1 : n <= 30 ? 5 : 10;
+  const out: number[] = [];
+  for (let d = 0; d <= n; d += step) out.push(d);
+  return out;
+});
+const lanePct = (day: number) => `${Math.min(100, Math.max(0, (day / frontierDays.value) * 100))}%`;
+const proposals = computed(() =>
+  who.value
+    ? proposeNext(who.value, store.planBeads, rosterHumans.value as never, store.scheduleWithEstimates?.schedule ?? null, store.triage)
+    : [],
+);
+const beadOf = (id: string) => store.planBeads.find((b) => b.id === id);
+// What-if cap (bp-q56): staged, not written; the roster file is the record.
+const wiCap = ref<number>(1);
+watch(person, (p) => { wiCap.value = p?.cap ?? p?.rawCap ?? 5; }, { immediate: true });
+
+/**
+ * Group-by "none" collapses everything into one synthetic bucket, so there
+ * is nothing to compare. The Progress block still renders — saying so is
+ * better than a view with a hole in it — but it needs the caller to admit
+ * the grouping is off rather than showing "0 groups".
+ */
+const grouped = computed(() => store.groupBy !== "none");
+</script>
+
+<template>
+  <div class="incytes" :class="{ 'is-person': !!who }">
+    <!-- Who the view is about: the project, or one person (bp-67g.43). -->
+    <nav class="people-bar" aria-label="Scope">
+      <span class="people-label">Showing</span>
+      <button type="button" class="chip" :class="{ 'is-active': !who }" @click="store.setWho(null)">everyone</button>
+      <button
+        v-for="h in rosterHumans"
+        :key="h.handle"
+        type="button"
+        class="chip"
+        :class="{ 'is-active': who === h.handle }"
+        @click="store.setWho(h.handle)"
+      ><code>{{ h.handle }}</code></button>
+      <button v-if="who && !rosterHumans.some((h) => h.handle === who)" type="button" class="chip is-active"><code>{{ who }}</code></button>
+      <button v-if="who" type="button" class="chip clear" title="Back to everyone" aria-label="Back to everyone" @click="store.setWho(null)"><X class="icon" /></button>
+    </nav>
+
+    <template v-if="who">
+      <ShipTrend v-if="personTrend" :trend="personTrend" />
+      <CostTrend v-if="personCost" :series="personCost" :who="who" />
+      <section v-else class="stat-block trend-block">
+        <h2>Ships per week <span class="hint">{{ who }}</span></h2>
+        <p class="hint">No ship attributed to {{ who }} in the last {{ store.velocity?.weeklyWeeks ?? 8 }} weeks.</p>
+      </section>
+
+      <GroupProgress v-if="grouped && personProgress.length" :rows="personProgress" :group-by="store.groupBy" />
+      <section v-else class="stat-block progress-block">
+        <h2>Progress</h2>
+        <p class="hint">
+          <template v-if="!grouped">Grouping is off, so there are no groups to compare.</template>
+          <template v-else>No beads are recorded as {{ who }}'s.</template>
+        </p>
+      </section>
+
+      <section v-if="velocity && wipRows.length" class="stat-block allocation-block">
+        <h2>
+          Allocation
+          <span class="hint">calibrated · last {{ velocity.lookbackDays }}d · {{ velocity.totalClosedInWindow }} ships · {{ velocity.activeCount }} active</span>
+        </h2>
+        <WipBullets :rows="wipRows" :selected="who" @select="store.setWho" />
+      </section>
+
+      <section class="stat-block person-roster">
+        <h2>Roster</h2>
+        <ul v-if="person">
+          <li><code>{{ person.handle }}</code> <span class="stat-count">{{ describeCap(person) }}</span></li>
+          <li>
+            <span>rate</span>
+            <span class="stat-count">{{ person.closesPerWeek > 0 ? person.closesPerWeek.toFixed(1) + "/wk" : "no ships" }}<template v-if="person.hoursPerWeek > 0"> · {{ person.hoursPerWeek.toFixed(0) }}h/wk</template> · {{ person.closedInWindow }} closed in window</span>
+          </li>
+          <li v-if="person.labels.length || person.areas.length">
+            <span>affinities</span>
+            <span class="stat-count">{{ [...person.labels, ...person.areas].join(", ") }}</span>
+          </li>
+        </ul>
+        <p class="hint">{{ person ? rosterProvenanceNote(person) : "" }}</p>
+        <p class="whatif-cap">
+          <span class="hint">what if their cap were</span>
+          <input v-model.number="wiCap" type="number" min="1" max="20" aria-label="what-if cap" />
+          <button type="button" class="chip" :disabled="who === null || wiCap === (person?.cap ?? null)" @click="who && store.addWhatIf({ kind: 'cap', handle: who, cap: wiCap })">stage</button>
+        </p>
+      </section>
+
+      <section class="stat-block person-list">
+        <h2>In flight <span class="count">{{ inFlight.length }}</span></h2>
+        <p class="hint">Recorded assignments in progress or in review — what they have committed to.</p>
+        <ul v-if="inFlight.length" class="mine-list"><MineRow v-for="b in inFlight" :key="b.id" :bead="b" /></ul>
+        <p v-else class="hint">Nothing in flight.</p>
+      </section>
+
+      <section class="stat-block person-list">
+        <h2>Ready for them <span class="count">{{ work?.ready.length ?? 0 }}</span></h2>
+        <p class="hint">Assigned to them, unblocked, not started.</p>
+        <ul v-if="work?.ready.length" class="mine-list"><MineRow v-for="b in work!.ready" :key="b.id" :bead="b" /></ul>
+        <p v-else class="hint">Nothing waiting for them.</p>
+      </section>
+
+      <section class="stat-block person-list is-projection">
+        <h2>Likely next <span class="count">{{ work?.suggested.length ?? 0 }}</span></h2>
+        <p class="hint">
+          A projection, not work they have: unassigned beads the scheduler would route to
+          {{ who }} by affinity when a slot frees. Nobody decided this.
+        </p>
+        <ul v-if="work?.suggested.length" class="mine-list"><MineRow v-for="b in work!.suggested" :key="b.id" :bead="b" note="inferred" /></ul>
+        <p v-else class="hint">The scheduler routes nothing to them right now.</p>
+      </section>
+
+      <section class="stat-block person-list is-projection frontier-block">
+        <h2>Frontier <span class="hint">next {{ frontierDays }} days</span></h2>
+        <p class="hint">
+          Where the plan puts {{ who }}: when beads start for them and when they land, from the same
+          schedule the Gantt draws. Follows the window's forward span.
+        </p>
+        <div v-if="lane" class="lane" role="img" :aria-label="`${who}: ${describeLane(lane)}`">
+          <i v-for="t in laneTicks" :key="t" class="tick" :style="{ left: lanePct(t) }"><span>{{ t === 0 ? "today" : `+${t}d` }}</span></i>
+          <button
+            v-for="(m, i) in lane.markers"
+            :key="`${m.id}-${m.kind}-${i}`"
+            type="button"
+            class="marker"
+            :class="[m.kind, { synthetic: m.synthetic }]"
+            :style="{ left: lanePct(m.day) }"
+            :title="`${m.id} ${m.kind} in ${m.day.toFixed(1)}d${m.synthetic ? ' (inferred assignment)' : ''}`"
+            @click="store.openBead(m.id)"
+          />
+        </div>
+        <p class="hint">{{ lane ? describeLane(lane) : "" }}</p>
+        <ul v-if="lane?.markers.length" class="mine-list">
+          <template v-for="(m, i) in lane.markers" :key="`${m.id}-${m.kind}-${i}`">
+            <MineRow v-if="beadOf(m.id)" :bead="beadOf(m.id)!" :note="`${m.kind} +${m.day.toFixed(1)}d${m.synthetic ? ' · inferred' : ''}`" />
+          </template>
+        </ul>
+      </section>
+
+      <section class="stat-block person-list is-projection proposals-block">
+        <h2>Proposed next <span class="count">{{ proposals.length }}</span></h2>
+        <p class="hint">
+          What {{ who }} could take next, ranked with the reasons: the scheduler's routing, affinity,
+          triage, what it unblocks, priority, room today — and beads someone over cap has not started.
+          Stage adds it to the what-if and it leaves this list, because in that plan it is theirs;
+          nothing is written until you confirm.
+        </p>
+        <ul v-if="proposals.length" class="mine-list">
+          <MineRow v-for="p in proposals" :key="p.bead.id" :bead="p.bead" :note="describeProposal(p)">
+            <button
+              type="button"
+              class="chip stage"
+              :title="p.from ? `Stage moving ${p.bead.id} from ${p.from} to ${who}` : `Stage assigning ${p.bead.id} to ${who}`"
+              @click.stop="store.addWhatIf(p.change)"
+            >stage</button>
+          </MineRow>
+        </ul>
+        <p v-else class="hint">Nothing to propose: no ready bead is unassigned or held by someone over cap.</p>
+      </section>
+
+      <section class="stat-block person-list">
+        <h2>Recent ships <span class="count">{{ recentShips.length }}</span></h2>
+        <ul v-if="recentShips.length" class="mine-list">
+          <MineRow v-for="b in recentShips" :key="b.id" :bead="b" :note="fmtDay(b.closed_at!)" />
+        </ul>
+        <p v-else class="hint">No ship evidence on any bead recorded as theirs.</p>
+      </section>
+    </template>
+
+    <ShipTrend v-if="!who && store.shipTrend" :trend="store.shipTrend" />
+    <CostTrend v-if="!who && projectCost" :series="projectCost" />
+
+    <GroupProgress
+      v-if="!who && grouped && store.groupProgress.length"
+      :rows="store.groupProgress"
+      :group-by="store.groupBy"
+    />
+    <section v-else-if="!who && !grouped" class="stat-block">
+      <h2>Progress</h2>
+      <p class="hint">
+        Grouping is off, so there are no groups to compare. Pick a
+        <strong>group by</strong> mode above — epic, assignee, status,
+        priority — and this becomes a sorted completion chart.
+      </p>
+    </section>
+
+    <section v-if="!who && velocity && wipRows.length" class="stat-block allocation-block">
+      <h2>
+        Allocation
+        <span class="hint">calibrated · last {{ velocity.lookbackDays }}d · {{ velocity.totalClosedInWindow }} ships · {{ velocity.activeCount }} active</span>
+      </h2>
+      <p class="hint">Work in flight against each person's calibrated cap, on one scale; the run past the cap is drawn at its real length. A handle shows that person.</p>
+      <WipBullets :rows="wipRows" @select="store.setWho" />
+    </section>
+
+    <section v-if="!who" class="stat-block">
+      <h2>Roster</h2>
+      <p v-if="store.roster?._derived" class="hint">
+        (derived from bead assignees — drop
+        <code>.beadcyte/roster.json</code> in the CWD for real caps +
+        affinities)
+      </p>
+      <ul>
+        <!-- Each handle opens that person's picture (bp-67g.43). -->
+        <li v-for="h in rosterHumans" :key="h.handle">
+          <button type="button" class="handle-link" :title="`Show ${h.handle}`" @click="store.setWho(h.handle)"><code>{{ h.handle }}</code></button>
+          <span v-if="h.cap" class="stat-count">cap {{ h.cap }}</span>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* Same auto-fit grid app-main used, so the blocks keep the proportions they
+   were designed against. The two charts claim wider spans below. */
+.incytes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* A line chart in a 280px column is narrower than its own axis labels, and a
+   progress row has three columns of its own. */
+.incytes > :deep(.trend-block),
+.incytes > :deep(.progress-block),
+.incytes > .allocation-block {
+  grid-column: 1 / -1;
+}
+
+.incytes .allocation-block h2 .hint {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+  margin-left: 8px;
+}
+
+.incytes .allocation-block .wip-bullets {
+  margin-top: 10px;
+}
+
+@media (min-width: 900px) {
+  /* Side by side once there's room: the trend answers "how fast" and the
+     bars answer "how far", and the pair is the summary. */
+  .incytes > :deep(.trend-block),
+  .incytes > :deep(.progress-block) {
+    grid-column: span 2;
+  }
+}
+
+.incytes .hint {
+  font-size: 11px;
+  color: var(--c-dim);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.incytes .hint strong {
+  color: var(--c-dim-bright);
+  font-weight: 600;
+}
+
+/* Who the view is about (bp-67g.43). */
+.incytes .people-bar {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.incytes .people-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  margin-right: 4px;
+}
+
+.incytes .chip {
+  all: unset;
+  cursor: pointer;
+  padding: 3px 10px;
+  border: 1px solid var(--c-border);
+  border-radius: 12px;
+  font-size: 11px;
+  color: var(--c-dim);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.incytes .chip code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: inherit;
+}
+
+.incytes .chip:hover {
+  color: var(--c-text);
+  border-color: var(--c-border-strong);
+}
+
+.incytes .chip.is-active {
+  background: var(--c-accent);
+  border-color: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
+}
+
+.incytes .chip.clear .icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* The frontier lane (bp-wfe): a ruler of the next N days; starts are hollow
+   marks, landings filled, inferred assignments dashed. */
+.incytes .lane {
+  position: relative;
+  height: 34px;
+  margin: 8px 16px 20px 4px; /* bottom room for the tick labels */
+  border-bottom: 1px solid var(--c-border);
+}
+/* A ruler, a list of reasons and twenty weekly buckets all want the width: span the pane. */
+.incytes .frontier-block,
+.incytes .proposals-block,
+.incytes > :deep(.cost-block) {
+  grid-column: 1 / -1;
+}
+.incytes .lane .tick {
+  position: absolute;
+  top: 18px;
+  bottom: -1px;
+  width: 1px;
+  background: var(--c-border);
+}
+.incytes .lane .tick span {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  transform: translateX(-50%);
+  font-size: 9px;
+  color: var(--c-dim);
+  white-space: nowrap;
+  padding-top: 2px;
+}
+.incytes .lane .tick:first-child span { transform: none; }
+.incytes .lane .marker {
+  position: absolute;
+  top: 4px;
+  width: 10px;
+  height: 10px;
+  margin-left: -5px;
+  padding: 0;
+  border-radius: 50%;
+  border: 2px solid var(--c-in-progress);
+  background: transparent;
+  cursor: pointer;
+}
+.incytes .lane .marker.lands { background: var(--c-shipped); border-color: var(--c-shipped); top: 14px; }
+.incytes .lane .marker.synthetic { border-style: dashed; }
+.incytes .lane .marker:hover, .incytes .lane .marker:focus-visible { transform: scale(1.3); z-index: 1; }
+.incytes .frontier-block { padding-bottom: 14px; }
+.incytes .proposals-block .chip.stage { margin-left: auto; font-size: 10px; }
+
+.incytes .whatif-cap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 8px 0 0;
+}
+
+.incytes .whatif-cap input {
+  width: 56px;
+  font: inherit;
+  padding: 2px 6px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: 4px;
+  background: var(--c-bg);
+  color: var(--c-text);
+}
+
+.incytes .chip:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.incytes .handle-link {
+  all: unset;
+  cursor: pointer;
+}
+
+.incytes .handle-link code {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+
+.incytes .handle-link:hover code,
+.incytes .handle-link:focus-visible code {
+  color: var(--c-accent);
+}
+
+.incytes .person-list h2 .count,
+.incytes .person-roster h2 .count {
+  font-size: 11px;
+  color: var(--c-dim);
+  font-weight: 400;
+  margin-left: 6px;
+}
+
+/* Likely-next is a projection: the same visual register as inferred bars. */
+.incytes .person-list.is-projection {
+  border-style: dashed;
+}
+
+.incytes .mine-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+</style>