beadcyte 0.4.0

package/src/web/components/FilterPopover.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts" generic="T extends string | number">
+// FilterPopover.vue — small multi-select popover for the controls panel.
+//
+// Renders a chip-style trigger button that opens a floating checkbox list.
+// Options come from live data (parent enumerates unique values from the
+// current beads); selecting nothing means "no filter." Closes on
+// outside-click and Escape. Keyboard-navigable (tab into the button, enter/
+// space to open, tab through options).
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import type { FilterOption } from "./filter-option";
+
+const props = defineProps<{
+  label: string;
+  options: FilterOption<T>[];
+  modelValue: T[] | null;
+  /** The active view does not act on this filter (bp-67g.36): inert trigger, menu shut. */
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [T[] | null];
+}>();
+
+const open = ref(false);
+const rootEl = ref<HTMLElement | null>(null);
+
+const selected = computed(() => new Set(props.modelValue ?? []));
+
+const summary = computed(() => {
+  const n = props.modelValue?.length ?? 0;
+  if (!n) return "any";
+  if (n === 1) {
+    const opt = props.options.find((o) => o.value === props.modelValue![0]);
+    return opt?.label ?? String(props.modelValue![0]);
+  }
+  return `${n} selected`;
+});
+
+function toggle(v: T) {
+  const cur = props.modelValue ?? [];
+  const next = cur.includes(v)
+    ? cur.filter((x) => x !== v)
+    : [...cur, v];
+  emit("update:modelValue", next.length ? next : null);
+}
+
+function clear() {
+  emit("update:modelValue", null);
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!rootEl.value) return;
+  if (!rootEl.value.contains(e.target as Node)) open.value = false;
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape") open.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", onClickOutside);
+  document.addEventListener("keydown", onKeydown);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("mousedown", onClickOutside);
+  document.removeEventListener("keydown", onKeydown);
+});
+
+// Auto-scroll list to selected item when opened.
+watch(open, (v) => {
+  if (!v) return;
+});
+</script>
+
+<template>
+  <div ref="rootEl" class="filter-popover" :class="{ open }">
+    <button
+      type="button"
+      class="filter-trigger"
+      :class="{ 'has-selection': (modelValue?.length ?? 0) > 0 }"
+      :disabled="disabled"
+      @click="open = !open"
+    >
+      <span class="label">{{ label }}</span>
+      <span class="summary">{{ summary }}</span>
+      <span class="caret">▾</span>
+    </button>
+
+    <div v-if="open && !disabled" class="filter-menu" role="listbox">
+      <div class="filter-menu-header">
+        <span>{{ label }}</span>
+        <button
+          v-if="(modelValue?.length ?? 0) > 0"
+          type="button"
+          class="clear"
+          @click="clear"
+        >clear</button>
+      </div>
+      <ul>
+        <li v-for="opt in options" :key="String(opt.value)">
+          <label>
+            <input
+              type="checkbox"
+              :checked="selected.has(opt.value)"
+              @change="toggle(opt.value)"
+            />
+            <span class="option-label">{{ opt.label }}</span>
+            <span v-if="opt.hint" class="option-hint">{{ opt.hint }}</span>
+          </label>
+        </li>
+        <li v-if="!options.length" class="empty">(no options in data)</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style>
+.filter-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.filter-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid var(--c-border);
+  color: var(--c-text);
+  padding: 4px 8px 4px 10px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.filter-trigger:hover,
+.filter-popover.open .filter-trigger {
+  border-color: var(--c-accent);
+}
+
+.filter-trigger .label {
+  color: var(--c-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.filter-trigger .summary {
+  color: var(--c-text);
+}
+
+.filter-trigger.has-selection .summary {
+  color: var(--c-accent);
+  font-weight: 600;
+}
+
+.filter-trigger .caret {
+  color: var(--c-dim);
+  font-size: 9px;
+}
+
+.filter-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 100;
+  min-width: 200px;
+  max-height: 320px;
+  overflow: auto;
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  box-shadow: var(--shadow-panel);
+  color: var(--c-text);
+  font-size: 11px;
+}
+
+.filter-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--c-border);
+  color: var(--c-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 10px;
+}
+
+.filter-menu-header .clear {
+  background: none;
+  border: none;
+  color: var(--c-accent);
+  cursor: pointer;
+  font-size: 10px;
+  padding: 0;
+}
+
+.filter-menu ul {
+  list-style: none;
+  padding: 4px 0;
+  margin: 0;
+}
+
+.filter-menu li {
+  padding: 0;
+}
+
+.filter-menu label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+
+.filter-menu label:hover {
+  background: var(--c-accent-wash);
+}
+
+.filter-menu input[type="checkbox"] {
+  accent-color: var(--c-accent);
+}
+
+.option-label {
+  flex: 1;
+}
+
+.option-hint {
+  color: var(--c-dim);
+  font-size: 10px;
+}
+
+.filter-menu li.empty {
+  padding: 8px 12px;
+  color: var(--c-dim);
+  font-style: italic;
+}
+
+/* Dimmed with its group when the view cannot act on it (bp-67g.36). */
+.filter-popover .filter-trigger:disabled {
+  cursor: not-allowed;
+}
+</style>

package/src/web/components/GroupProgress.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+// GroupProgress.vue — group sizes and completion, replacing the Groups text
+// list in app-main (bp-67g.30).
+//
+// The list this replaces was ordered by group ID, so the outlier group was
+// not merely unobvious, it was unfindable. Sorted by population with the
+// closed run drawn inside the bar, "which epic is huge" and "how far along
+// is it" are both answered without reading a number.
+//
+// Horizontal rows rather than columns: group labels are long (an epic's ID
+// plus its title) and a horizontal form never rotates a label.
+
+import { computed } from "vue";
+import type { GroupProgressRow } from "../insights";
+
+const props = defineProps<{
+  rows: GroupProgressRow[];
+  /** What the rows are grouped by, for the heading. */
+  groupBy: string;
+}>();
+
+/**
+ * The placeholder bucket is pulled out of the bars. It is the remainder
+ * rather than a peer — on a 556-bead repo it held 305 of them — and left in
+ * the scale it put every real group on a tenth of the width.
+ */
+const groups = computed(() => props.rows.filter((r) => !r.synthetic));
+const remainder = computed(() => props.rows.filter((r) => r.synthetic));
+
+const maxTotal = computed(() =>
+  Math.max(1, ...groups.value.map((r) => r.total)),
+);
+
+const totals = computed(() => ({
+  closed: props.rows.reduce((a, r) => a + r.closed, 0),
+  total: props.rows.reduce((a, r) => a + r.total, 0),
+}));
+
+const overall = computed(() =>
+  totals.value.total > 0 ? totals.value.closed / totals.value.total : 0,
+);
+
+const pct = (v: number) => Math.round(v * 100);
+</script>
+
+<template>
+  <section class="stat-block progress-block">
+    <h2>
+      Progress
+      <span class="hint">by {{ groupBy }}</span>
+    </h2>
+
+    <div class="progress-head">
+      <span class="progress-value">{{ pct(overall) }}%</span>
+      <span class="progress-sub">
+        {{ totals.closed }} of {{ totals.total }} closed ·
+        {{ groups.length }} {{ groups.length === 1 ? "group" : "groups" }}
+        <!-- Phrased rather than interpolating the label, which is already
+             parenthesised ("(no epic)") and read as a double bracket. -->
+        <template v-for="r in remainder" :key="r.id">
+          · {{ r.total }} ungrouped, {{ pct(r.fraction) }}% closed
+        </template>
+      </span>
+    </div>
+
+    <div class="legend">
+      <span class="key"><i class="swatch is-closed" />closed</span>
+      <span class="key"><i class="swatch is-open" />open</span>
+    </div>
+
+    <ul v-if="groups.length" class="rows">
+      <li v-for="r in groups" :key="r.id">
+        <span class="r-label" :title="r.label">{{ r.label }}</span>
+        <span
+          class="r-track"
+          :style="{ width: `${(r.total / maxTotal) * 100}%` }"
+          :aria-label="`${r.closed} of ${r.total} closed`"
+        >
+          <i class="r-closed" :style="{ width: `${r.fraction * 100}%` }" />
+        </span>
+        <span class="r-value">
+          {{ r.closed }}/{{ r.total }}
+          <em>{{ pct(r.fraction) }}%</em>
+        </span>
+      </li>
+    </ul>
+    <p v-else class="progress-empty">Nothing grouped to compare.</p>
+
+    <!-- rowCount is deliberately absent from the bars — it is what the Gantt
+         DRAWS, clamped at maxPerGroup, not how big the group is. It appears
+         here only so the difference is inspectable. -->
+    <details class="table-view">
+      <summary>Table</summary>
+      <table>
+        <thead>
+          <tr>
+            <th>group</th>
+            <th class="num">closed</th>
+            <th class="num">total</th>
+            <th class="num">%</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="r in rows" :key="r.id">
+            <td><code>{{ r.id }}</code></td>
+            <td class="num">{{ r.closed }}</td>
+            <td class="num">{{ r.total }}</td>
+            <td class="num">{{ pct(r.fraction) }}%</td>
+          </tr>
+        </tbody>
+      </table>
+    </details>
+  </section>
+</template>
+
+<style scoped>
+.progress-block h2 .hint {
+  text-transform: none;
+  letter-spacing: 0;
+  font-weight: 400;
+  color: var(--c-dim);
+  margin-left: 6px;
+}
+
+.progress-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+/* Proportional figures: tabular-nums makes a 24px standalone value read
+   loose. The table below gets tabular, where digits align. */
+.progress-value {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.progress-sub {
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.legend {
+  display: flex;
+  gap: 12px;
+  font-size: 10px;
+  color: var(--c-dim);
+  margin-bottom: 8px;
+}
+
+.key {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.swatch.is-closed {
+  background: var(--c-shipped);
+}
+
+.swatch.is-open {
+  background: var(--c-future);
+}
+
+.rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.rows li {
+  display: grid;
+  grid-template-columns: minmax(80px, 30%) 1fr 76px;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  /* The shared .stat-block li rule adds a divider and space-between; these
+     rows carry their own grid, so neither applies. */
+  border-bottom: none;
+}
+
+.r-label {
+  font-size: 11px;
+  color: var(--c-dim-bright);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Track length is the group's population; the fill is what's closed. */
+.r-track {
+  display: block;
+  height: 11px;
+  background: var(--c-future);
+  border-radius: 2px;
+  overflow: hidden;
+  min-width: 3px;
+}
+
+/* A 2px gap in the surface colour separates closed from open, rather than a
+   stroke — a border would add data-weight ink that isn't data. */
+.r-closed {
+  display: block;
+  height: 11px;
+  background: var(--c-shipped);
+  border-right: 2px solid var(--c-panel);
+  border-radius: 2px 0 0 2px;
+}
+
+.r-value {
+  font-size: 10px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.r-value em {
+  font-style: normal;
+  color: var(--c-text);
+  margin-left: 4px;
+}
+
+.progress-empty {
+  color: var(--c-dim);
+  font-size: 12px;
+  margin: 12px 0;
+}
+
+.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;
+}
+</style>

package/src/web/components/LoadMeter.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+// LoadMeter.vue — shown in place of the chart while there is nothing to
+// show: a first load, or a project switch. A background poll never reaches
+// here; it refreshes in place behind a thin activity hint.
+//
+// The bar fills against how long THIS project took last time, because the
+// current run has no progress to report — the `bd` subprocess is ~90% of
+// the wall time and says nothing while it works. That makes it an estimate,
+// so it is labelled as one and gives up honestly when outlasted rather than
+// creeping to 99%.
+
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useBeadsStore } from "../store";
+import { formatElapsed, meterState } from "../load-meter";
+
+const store = useBeadsStore();
+
+// Ticks the elapsed clock. 100ms is smooth enough for a bar and cheap.
+const now = ref(Date.now());
+let timer: ReturnType<typeof setInterval> | null = null;
+onMounted(() => {
+  timer = setInterval(() => (now.value = Date.now()), 100);
+});
+onBeforeUnmount(() => {
+  if (timer !== null) clearInterval(timer);
+});
+
+const elapsedMs = computed(() =>
+  store.fetchStartedAt === null ? 0 : now.value - store.fetchStartedAt,
+);
+const expectedMs = computed(() => store.expectedFetchMs);
+const state = computed(() => meterState(elapsedMs.value, expectedMs.value));
+const projectLabel = computed(() => store.activeProject?.label ?? null);
+</script>
+
+<template>
+  <section class="load-meter" role="status" aria-live="polite">
+    <div class="meter-head">
+      <!-- Built as one expression: a leading space inside a <template> tag
+           is collapsed by the compiler, which ran "Loading" into the
+           project name. -->
+      <span class="meter-what">{{
+        projectLabel ? `Loading ${projectLabel}…` : "Loading…"
+      }}</span>
+      <span class="meter-elapsed">{{ formatElapsed(elapsedMs) }}</span>
+    </div>
+
+    <div
+      class="meter-track"
+      role="progressbar"
+      :aria-valuemin="0"
+      :aria-valuemax="100"
+      :aria-valuenow="state.pct === null ? undefined : Math.round(state.pct)"
+    >
+      <div
+        v-if="state.mode === 'determinate'"
+        class="meter-fill"
+        :style="{ width: state.pct + '%' }"
+      />
+      <div v-else class="meter-fill is-indeterminate" />
+    </div>
+
+    <!-- Says where the number came from. A bar filling against a past run
+         is an estimate, and presenting it as measurement would be a lie. -->
+    <p class="meter-note">
+      <template v-if="state.overrun">
+        Taking longer than last time ({{ formatElapsed(expectedMs ?? 0) }}) —
+        no estimate to give.
+      </template>
+      <template v-else-if="state.mode === 'determinate'">
+        Estimated from the last load of this project
+        ({{ formatElapsed(expectedMs ?? 0) }}).
+      </template>
+      <template v-else>
+        First load of this project — no previous timing to estimate from.
+      </template>
+    </p>
+  </section>
+</template>
+
+<style>
+.load-meter {
+  padding: 22px 20px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  background: var(--c-bg);
+}
+
+.meter-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 9px;
+  font-size: 12px;
+  color: var(--c-text);
+}
+
+.meter-what {
+  font-weight: 600;
+}
+
+.meter-elapsed {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-dim);
+}
+
+.meter-track {
+  height: 6px;
+  border-radius: 3px;
+  background: var(--c-panel-2);
+  overflow: hidden;
+}
+
+.meter-fill {
+  height: 100%;
+  background: var(--c-accent);
+  border-radius: 3px;
+  transition: width 0.1s linear;
+}
+
+/* A sweep rather than a fill, so it reads as "working" and not as an
+   amount completed. */
+.meter-fill.is-indeterminate {
+  width: 34%;
+  animation: meter-sweep 1.1s ease-in-out infinite;
+  transition: none;
+}
+
+@keyframes meter-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(295%);
+  }
+}
+
+.meter-note {
+  margin: 9px 0 0;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+</style>

package/src/web/components/MineRow.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// MineRow.vue — one bead as a dense list row in the mine view. Click opens
+// the drawer, as everywhere else. The optional note carries the relationship
+// a section is about ("waiting on bp-x · bob").
+
+import type { Bead } from "../store";
+import { useBeadsStore } from "../store";
+import PriorityChip from "./PriorityChip.vue";
+import TypeChip from "./TypeChip.vue";
+
+defineProps<{ bead: Bead; note?: string | null }>();
+
+const store = useBeadsStore();
+const statusClass = (s: string) => `status-${s.replace(/_/g, "-")}`;
+</script>
+
+<template>
+  <li class="mine-row" @click="store.openBead(bead.id)" @contextmenu.prevent="store.openContextMenu(bead.id, $event.clientX, $event.clientY)">
+    <code class="mine-id">{{ bead.id }}</code>
+    <PriorityChip :priority="bead.priority ?? 4" />
+    <span class="mine-title" :title="bead.title">{{ bead.title }}</span>
+    <span v-if="note" class="mine-note" :title="note">{{ note }}</span>
+    <TypeChip :type="bead.issue_type" />
+    <span class="pill" :class="statusClass(bead.status)">{{ bead.status.replace(/_/g, " ") }}</span>
+    <!-- A trailing action, when a section has one (the frontier's "stage", bp-wfe). -->
+    <slot />
+  </li>
+</template>