beadcyte 0.4.0

package/src/web/components/BeadsMine.vue

@@ -0,0 +1,325 @@
+<script setup lang="ts">
+// BeadsMine.vue — the worklog: what should I be doing, what is going on
+// (bp-egy). First tab and the default.
+//
+// Everything here is about ONE person — the current user chosen in the
+// options menu, or carried in by a ?me= link — and is a list, not a chart:
+// several small sets at once, which no single filter on the Gantt or grid
+// can show together. The sets come from mine.ts so they are testable without
+// a DOM; this file lays them out and hosts the "who are you" prompt when no
+// user is set, because the view itself is the natural place to ask.
+
+import { computed, watchEffect } from "vue";
+import { useBeadsStore } from "../store";
+import type { ViewModel } from "../view-model";
+import { buildMineModel, type HoldingItem, type WaitingItem } from "../mine";
+import MineRow from "./MineRow.vue";
+
+defineProps<{ vm: ViewModel | null }>();
+
+const store = useBeadsStore();
+const me = computed(() => store.effectiveUser);
+
+const model = computed(() => {
+  if (!me.value) return null;
+  return buildMineModel(store.beads, me.value, {
+    schedule: store.scheduleWithEstimates?.schedule ?? null,
+    triage: store.triage,
+    watched: store.watched,
+  });
+});
+
+// j/k walk the sections in reading order (bp-67g.45).
+watchEffect(() => {
+  const m = model.value;
+  store.publishViewOrder(
+    m
+      ? [
+          ...m.ready, ...m.suggested, ...m.inProgress, ...m.inReview,
+          ...m.waitingOnOthers.map((w) => w.bead), ...m.waitingOnMe.map((h) => h.bead), ...m.watching,
+        ].map((b) => b.id)
+      : [],
+  );
+});
+
+function pick(e: Event) {
+  const v = (e.target as HTMLSelectElement).value;
+  store.setCurrentUser(v || null);
+}
+
+const waitingNote = (w: WaitingItem) =>
+  "waiting on " + w.blockers.map((b) => (b.holder ? `${b.id} · ${b.holder}` : `${b.id} · unassigned`)).join(", ");
+const holdingNote = (h: HoldingItem) =>
+  "via " + h.via.map((b) => b.id).join(", ") + (h.bead.assignee ? ` · for ${h.bead.assignee}` : " · unassigned");
+</script>
+
+<template>
+  <div class="mine">
+    <!-- No user yet: the view is the prompt. -->
+    <section v-if="!me" class="mine-section mine-setup">
+      <h2>Who are you?</h2>
+      <p class="mine-why">
+        This view lists your own work: what is ready for you, what you have in
+        flight, who you are waiting on and who is waiting on you. Pick the
+        assignee handle that is you. It is stored in this browser and can be
+        changed later in the options menu.
+      </p>
+      <select class="mine-select" value="" aria-label="Current user" @change="pick">
+        <option value="">choose your handle…</option>
+        <option v-for="a in store.presentAssignees" :key="a" :value="a">{{ a }}</option>
+      </select>
+      <p v-if="store.beads.length && !store.presentAssignees.length" class="mine-empty">
+        No bead in this project carries an assignee yet, so there is nobody to be.
+      </p>
+    </section>
+
+    <template v-else-if="model">
+      <header class="mine-header">
+        <h1><span class="mine-label">mine</span>{{ me }}</h1>
+        <p v-if="store.userIsStale" class="mine-stale">
+          {{ me }} is not an assignee in this project.
+          <select class="mine-select" value="" aria-label="Current user" @change="pick">
+            <option value="">pick again…</option>
+            <option v-for="a in store.presentAssignees" :key="a" :value="a">{{ a }}</option>
+          </select>
+        </p>
+        <p v-else class="mine-sub">
+          assigned to you<template v-if="store.urlUser"> · from this link</template> · change in options
+        </p>
+      </header>
+
+      <section class="mine-section">
+        <h2>Ready for you <span class="count">{{ model.ready.length }}</span></h2>
+        <p class="mine-why">Assigned to you, approved (spec:ready), not already moving, every blocker closed.</p>
+        <ul v-if="model.ready.length" class="mine-list">
+          <MineRow v-for="b in model.ready" :key="b.id" :bead="b" />
+        </ul>
+        <p v-else class="mine-empty">Nothing is ready for you right now.</p>
+        <template v-if="model.suggested.length">
+          <h3>Suggested <span class="count">{{ model.suggested.length }}</span></h3>
+          <p class="mine-why">Unassigned and ready; the scheduler would route these to you by affinity.</p>
+          <ul class="mine-list">
+            <MineRow v-for="b in model.suggested" :key="b.id" :bead="b" note="inferred" />
+          </ul>
+        </template>
+      </section>
+
+      <section class="mine-section">
+        <h2>In flight <span class="count">{{ model.inProgress.length + model.inReview.length }}</span></h2>
+        <h3>In progress <span class="count">{{ model.inProgress.length }}</span></h3>
+        <ul v-if="model.inProgress.length" class="mine-list">
+          <MineRow v-for="b in model.inProgress" :key="b.id" :bead="b" />
+        </ul>
+        <p v-else class="mine-empty">Nothing in progress.</p>
+        <h3>In review <span class="count">{{ model.inReview.length }}</span></h3>
+        <ul v-if="model.inReview.length" class="mine-list">
+          <MineRow v-for="b in model.inReview" :key="b.id" :bead="b" />
+        </ul>
+        <p v-else class="mine-empty">Nothing in review.</p>
+      </section>
+
+      <section class="mine-section">
+        <h2>Waiting on others <span class="count">{{ model.waitingOnOthers.length }}</span></h2>
+        <p class="mine-why">Your beads that cannot move yet, and who holds what blocks them.</p>
+        <ul v-if="model.waitingOnOthers.length" class="mine-list">
+          <MineRow v-for="w in model.waitingOnOthers" :key="w.bead.id" :bead="w.bead" :note="waitingNote(w)" />
+        </ul>
+        <p v-else class="mine-empty">Nothing of yours is blocked.</p>
+      </section>
+
+      <section class="mine-section">
+        <h2>Waiting on you <span class="count">{{ model.waitingOnMe.length }}</span></h2>
+        <p class="mine-why">Other people's beads held up by something you have open.</p>
+        <ul v-if="model.waitingOnMe.length" class="mine-list">
+          <MineRow v-for="h in model.waitingOnMe" :key="h.bead.id" :bead="h.bead" :note="holdingNote(h)" />
+        </ul>
+        <p v-else class="mine-empty">Nobody is waiting on you.</p>
+      </section>
+
+      <section class="mine-section">
+        <h2>Watching <span class="count">{{ model.watching.length }}</span></h2>
+        <ul v-if="model.watching.length" class="mine-list">
+          <MineRow v-for="b in model.watching" :key="b.id" :bead="b" />
+        </ul>
+        <p v-else class="mine-empty">Nothing watched. Pin a bead from its tooltip or drawer.</p>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style>
+.mine {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+  gap: 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.mine-header {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  padding: 0 2px;
+}
+
+.mine-header h1 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--c-text);
+}
+
+.mine-label {
+  color: var(--c-accent);
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  margin-right: 8px;
+}
+
+.mine-sub,
+.mine-why,
+.mine-empty {
+  margin: 0;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.mine-stale {
+  margin: 0;
+  font-size: 11px;
+  color: var(--c-danger);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mine-empty {
+  padding: 8px 4px 2px;
+}
+
+.mine-section {
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  padding: 12px 14px;
+  min-width: 0;
+}
+
+.mine-setup {
+  grid-column: 1 / -1;
+  max-width: 560px;
+}
+
+.mine-setup .mine-why {
+  margin: 6px 0 12px;
+  line-height: 1.5;
+}
+
+.mine-section h2,
+.mine-section h3 {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin: 0 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-dim);
+}
+
+.mine-section h3 {
+  margin-top: 14px;
+  font-weight: 500;
+}
+
+.mine-section .count {
+  font-family: ui-monospace, monospace;
+  font-weight: 500;
+  color: var(--c-text);
+}
+
+.mine-list {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+}
+
+.mine-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 4px;
+  border-top: 1px solid var(--c-border);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.08s ease-out;
+}
+
+.mine-row:hover {
+  background: var(--c-accent-wash);
+}
+
+.mine-id {
+  flex: none;
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.mine-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--c-text);
+}
+
+.mine-note {
+  flex: none;
+  max-width: 38%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.mine .pill {
+  flex: none;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--c-border);
+  color: var(--c-dim);
+  white-space: nowrap;
+}
+
+.mine .pill.status-in-progress {
+  color: var(--c-accent);
+  border-color: var(--c-accent);
+}
+
+.mine .pill.status-in-review {
+  color: var(--c-warning);
+  border-color: var(--c-warning);
+}
+
+.mine .pill.status-closed {
+  opacity: 0.6;
+}
+
+.mine-select {
+  font: inherit;
+  font-size: 12px;
+  padding: 4px 8px;
+  background: var(--c-bg);
+  color: var(--c-text);
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+}
+</style>

package/src/web/components/BeadsTable.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+// BeadsTable.vue — the table view (bp-67g.44): one dense row per bead,
+// every column sortable. The surface for scanning and comparing; the Gantt
+// is for time and the grid for browsing.
+//
+// Rows come from store.tableViewModel — the grid's filtered, windowed set
+// with the per-group cap lifted — through table.ts, which also owns the sort.
+// Clicking a row opens the drawer, as a card or a bar does. This is also the
+// one view where every derived number is visible at once instead of behind
+// a hover, which makes it the readable equivalent of the Gantt: nothing in
+// the app is reachable only by reading a bar.
+//
+// The controls that paint the other views (highlight, dependency arrows)
+// do not reach here; controls-scope.ts says so and the panel dims them.
+
+import { computed, ref, watchEffect } from "vue";
+import { useBeadsStore } from "../store";
+import { formatEstimate } from "../bead-detail";
+import { SYNTHETIC_ASSIGNEE_NOTE } from "../view-model";
+import {
+  buildTableRows,
+  sortRows,
+  toggleSort,
+  describeSort,
+  COLUMNS,
+  DEFAULT_SORT,
+  type TableSort,
+  type TableSortKey,
+} from "../table";
+import PriorityChip from "./PriorityChip.vue";
+import TypeChip from "./TypeChip.vue";
+import Term from "./Term.vue";
+
+const store = useBeadsStore();
+
+const sort = ref<TableSort>({ ...DEFAULT_SORT });
+
+const rows = computed(() => {
+  const vm = store.tableViewModel;
+  if (!vm) return [];
+  const detailFor = store.beadDetailFor;
+  const byId = new Map(store.beads.map((b) => [b.id, b] as const));
+  return buildTableRows(vm, {
+    detailFor,
+    triage: store.triage,
+    labelsFor: (id) => byId.get(id)?.labels ?? [],
+  });
+});
+
+const sorted = computed(() => sortRows(rows.value, sort.value));
+// j/k walk the rows in the order on screen, which only this component knows.
+watchEffect(() => store.publishViewOrder(sorted.value.map((r) => r.id)));
+const groupCount = computed(() => store.tableViewModel?.groups.length ?? 0);
+
+function onSort(key: TableSortKey) {
+  sort.value = toggleSort(sort.value, key);
+}
+
+const ariaSort = (key: TableSortKey) =>
+  sort.value.key === key ? (sort.value.dir === "asc" ? "ascending" : "descending") : "none";
+
+const fmtPct = (v: number) => `${(v * 100).toFixed(1)}%`;
+const fmtDay = (d: Date) => d.toLocaleDateString(undefined, { day: "numeric", month: "short" });
+const statusClass = (s: string) => `status-${s.replace(/_/g, "-")}`;
+
+function onRowKey(e: KeyboardEvent, id: string) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    store.openBead(id);
+  }
+}
+</script>
+
+<template>
+  <div class="beads-table">
+    <div class="table-scroll">
+      <table>
+        <thead>
+          <tr>
+            <th
+              v-for="c in COLUMNS"
+              :key="c.key"
+              scope="col"
+              :class="[`col-${c.key}`, { 'is-sorted': sort.key === c.key, 'is-numeric': c.numeric }]"
+              :aria-sort="ariaSort(c.key)"
+            >
+              <button type="button" class="sort" @click="onSort(c.key)">
+                {{ c.label }}
+                <span class="dir" aria-hidden="true">{{
+                  sort.key === c.key ? (sort.dir === "asc" ? "▲" : "▼") : ""
+                }}</span>
+              </button>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="r in sorted"
+            :key="r.id"
+            tabindex="0"
+            :class="{ 'is-closed': r.status === 'closed', 'is-open': store.openBeadId === r.id }"
+            @click="store.openBead(r.id)"
+            @keydown="onRowKey($event, r.id)"
+            @contextmenu.prevent="store.openContextMenu(r.id, $event.clientX, $event.clientY)"
+          >
+            <td class="col-id"><code>{{ r.id }}</code></td>
+            <td class="col-title" :title="r.title">{{ r.title }}</td>
+            <td class="col-type"><TypeChip :type="r.type" /></td>
+            <td class="col-priority"><PriorityChip :priority="r.priority" /></td>
+            <td class="col-status">
+              <span class="pill" :class="statusClass(r.status)">{{ r.status.replace(/_/g, " ") }}</span>
+            </td>
+            <td class="col-assignee">
+              <template v-if="r.assignee">
+                <code>{{ r.assignee }}</code>
+                <Term v-if="r.synthetic" class="inferred" :note="SYNTHETIC_ASSIGNEE_NOTE">inferred</Term>
+              </template>
+              <span v-else class="none">—</span>
+            </td>
+            <td class="col-labels">
+              <span v-for="l in r.labels" :key="l" class="label">{{ l }}</span>
+            </td>
+            <td class="col-estimate is-numeric">
+              <template v-if="r.estimateDays !== null">{{ formatEstimate(r.estimateDays) }}</template>
+              <span v-else class="none">—</span>
+            </td>
+            <td class="col-finish is-numeric">
+              <template v-if="r.finishDate">
+                <span v-if="r.beyondHorizon" class="beyond" title="The scheduling window's end — a bound, not a projection">after {{ fmtDay(r.finishDate) }}</span>
+                <template v-else>{{ fmtDay(r.finishDate) }}</template>
+              </template>
+              <span v-else class="none">—</span>
+            </td>
+            <td class="col-triage is-numeric">
+              <template v-if="r.triage !== null">{{ fmtPct(r.triage) }}</template>
+              <span v-else class="none">—</span>
+            </td>
+            <td class="col-group" :title="r.group">{{ r.group }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <p v-if="rows.length === 0" class="empty-state">
+      No beads match the current filters and window.
+    </p>
+    <!-- Its own footer: bars are a timeline concept, and "every row" is the
+         point here, so the line says the cap is off. -->
+    <p v-else class="table-footer">
+      <code>{{ rows.length }}</code> rows · <code>{{ groupCount }}</code> groups ·
+      {{ describeSort(sort) }} · every row the filters and window admit, no per-group cap
+    </p>
+  </div>
+</template>
+
+<style>
+.beads-table {
+  width: 100%;
+}
+
+.beads-table .table-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  background: var(--c-panel);
+}
+
+.beads-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.beads-table th,
+.beads-table td {
+  padding: 4px 8px;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.beads-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--c-panel);
+  border-bottom: 1px solid var(--c-border-strong);
+}
+
+.beads-table th .sort {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  padding: 4px 0;
+}
+
+.beads-table th .sort:hover,
+.beads-table th.is-sorted .sort {
+  color: var(--c-text);
+}
+
+.beads-table th .dir {
+  display: inline-block;
+  width: 1em;
+  font-size: 9px;
+  color: var(--c-accent);
+}
+
+.beads-table th.is-numeric,
+.beads-table td.is-numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.beads-table th.is-numeric .sort {
+  flex-direction: row-reverse;
+}
+
+.beads-table tbody tr {
+  cursor: pointer;
+}
+
+.beads-table tbody tr:hover,
+.beads-table tbody tr:focus-visible {
+  background: var(--c-lift);
+  outline: none;
+}
+
+.beads-table tbody tr:focus-visible td:first-child,
+.beads-table tbody tr.is-open td:first-child {
+  box-shadow: inset 2px 0 0 var(--c-accent);
+}
+
+/* The open bead is the keyboard cursor (bp-67g.45): marked in the view too. */
+.beads-table tbody tr.is-open {
+  background: var(--c-accent-wash);
+}
+
+.beads-table tbody tr.is-closed td {
+  color: var(--c-dim);
+}
+
+.beads-table code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-accent);
+}
+
+.beads-table tr.is-closed code {
+  color: var(--c-dim-bright);
+}
+
+.beads-table .col-title {
+  max-width: 34ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--c-text);
+}
+
+.beads-table .col-group {
+  max-width: 24ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--c-dim);
+}
+
+.beads-table .none {
+  color: var(--c-dim);
+}
+
+.beads-table .inferred {
+  margin-left: 6px;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+
+.beads-table .label {
+  display: inline-block;
+  margin-right: 4px;
+  padding: 0 5px;
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+
+.beads-table .beyond {
+  color: var(--c-dim);
+  font-style: italic;
+}
+
+/* Same pill vocabulary as the grid cards. */
+.beads-table .pill {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 3px;
+  border: 1px solid var(--c-border);
+  font-size: 10px;
+  color: var(--c-dim);
+}
+
+.beads-table .pill.status-closed {
+  border-color: var(--c-shipped);
+  color: var(--c-shipped);
+}
+
+.beads-table .pill.status-in-progress {
+  border-color: var(--c-in-progress);
+  color: var(--c-in-progress);
+}
+
+.beads-table .pill.status-deferred {
+  border-color: var(--c-closed-noship);
+  color: var(--c-closed-noship);
+}
+
+.beads-table .empty-state,
+.beads-table .table-footer {
+  color: var(--c-dim);
+  font-size: 11px;
+  margin: 6px 4px 0;
+}
+
+.beads-table .table-footer code {
+  color: var(--c-accent);
+}
+</style>