beadcyte 0.4.0

package/src/web/App.vue

@@ -0,0 +1,691 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, computed, ref, watch } from "vue";
+import { useBeadsStore } from "./store";
+import { useUrlState } from "./composables/useUrlState";
+import { useKeyboard } from "./composables/useKeyboard";
+import ShortcutsOverlay from "./components/ShortcutsOverlay.vue";
+import ChangelogOverlay from "./components/ChangelogOverlay.vue";
+import Walkthrough from "./components/Walkthrough.vue";
+import ContextMenu from "./components/ContextMenu.vue";
+import Toast from "./components/Toast.vue";
+import WhatIfPanel from "./components/WhatIfPanel.vue";
+import Term from "./components/Term.vue";
+import { walkthroughSeen } from "./walkthrough";
+import { BAR_KIND_NOTES, isWaitKind, type BarKind } from "./view-model";
+import { Eye, RefreshCw } from "@lucide/vue";
+import BeadsMine from "./components/BeadsMine.vue";
+import BeadsGantt from "./components/BeadsGantt.vue";
+import BeadsGrid from "./components/BeadsGrid.vue";
+import BeadsTable from "./components/BeadsTable.vue";
+import BeadDrawer from "./components/BeadDrawer.vue";
+import ControlsPanel from "./components/ControlsPanel.vue";
+import SearchPalette from "./components/SearchPalette.vue";
+import OptionsMenu from "./components/OptionsMenu.vue";
+import BeadsIncytes from "./components/BeadsIncytes.vue";
+import BeadcyteMark from "./components/BeadcyteMark.vue";
+import LoadMeter from "./components/LoadMeter.vue";
+import { useLiveRefresh } from "./composables/useLiveRefresh";
+import { formatAge } from "./load-meter";
+
+const store = useBeadsStore();
+useUrlState();
+
+// Get version from environment variables
+const version = import.meta.env.VITE_BEADCYTE_VERSION || 'unknown';
+
+// Every key the app answers to — Escape for the drawer, ⌘K for search, the
+// letters — is one document listener in useKeyboard, driven by the table in
+// keybindings.ts, which the ? overlay is generated from (bp-67g.45).
+useKeyboard();
+
+// URL hash → drawer. `#bp-abc` opens the drawer for that bead. Two-way:
+// opening the drawer sets the hash so pages are deep-linkable, and manual
+// hash changes (back button, paste) reopen the corresponding drawer.
+function readHashBeadId(): string | null {
+  const raw = window.location.hash.replace(/^#/, "");
+  return /^[a-z0-9-]+(\.[a-z0-9-]+)*$/i.test(raw) ? raw : null;
+}
+function onHashChange() {
+  const id = readHashBeadId();
+  if (id) store.openBead(id);
+  else if (store.openBeadId) store.closeBead();
+}
+
+onMounted(() => {
+  // Learn the launch directory first so it seeds an empty registry, then
+  // fetch — otherwise the first request goes out with no project and the
+  // menu shows nothing to switch between.
+  void store.loadProjects().then(() => store.fetch());
+  window.addEventListener("hashchange", onHashChange);
+  // First run only (bp-67g.48): the tour opens once per browser and never
+  // again unasked; the options menu re-opens it.
+  if (!walkthroughSeen()) store.openWalkthrough();
+  // Deep-link on first load — but wait for the payload so drawerBead
+  // resolves properly. The store.fetch() promise handles that.
+  const startId = readHashBeadId();
+  if (startId) {
+    const unwatch = watch(
+      () => store.beads.length > 0,
+      (loaded) => {
+        if (loaded) {
+          store.openBead(startId);
+          unwatch();
+        }
+      },
+      { immediate: true },
+    );
+  }
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("hashchange", onHashChange);
+});
+
+// Reflect drawer open state into the URL hash (without triggering the
+// hashchange listener above — comparison against current hash short-
+// circuits the cycle).
+watch(
+  () => store.openBeadId,
+  (id) => {
+    const desired = id ? `#${id}` : "";
+    if (window.location.hash !== desired) {
+      // Replace, not push — avoid polluting browser history for every
+      // drawer open/close.
+      history.replaceState(null, "", desired || window.location.pathname);
+    }
+  },
+);
+
+const vm = computed(() => store.viewModel);
+
+// Bar kinds as a count list, deliberately text (bp-67g.16 rejected charting
+// a six-way split that is a two-way split at default filters). It is a fact
+// about the RENDERER — "future" vs "futureBacklog" is inside or beyond the
+// scheduling horizon, and the count is of bars drawn in this window — so it
+// sits under the Gantt with the other counts, not on the project-wide view
+// (bp-67g.36).
+// Wait segments (bp-6cg) are the calendar around the work, not bars of
+// work, so the footer counts neither them nor their kinds.
+const workBars = computed(() => (vm.value?.bars ?? []).filter((b) => !isWaitKind(b.kind)));
+const barKindCounts = computed(() => {
+  const m = new Map<string, number>();
+  for (const b of workBars.value) m.set(b.kind, (m.get(b.kind) ?? 0) + 1);
+  return [...m.entries()].sort((a, b) => b[1] - a[1]);
+});
+
+// A watched id can outlive its bead — deleted, renamed, or belonging to
+// another repo. Those are counted and mentioned rather than silently
+// dropped, so a shrinking badge isn't a mystery.
+useLiveRefresh();
+
+// Ticks so the age label counts up on its own rather than freezing at
+// whatever it said when the payload landed. 1s: the label's smallest unit.
+const clock = ref(Date.now());
+let clockTimer: ReturnType<typeof setInterval> | null = null;
+onMounted(() => {
+  clockTimer = setInterval(() => (clock.value = Date.now()), 1000);
+});
+onBeforeUnmount(() => {
+  if (clockTimer !== null) clearInterval(clockTimer);
+});
+
+/**
+ * "updated 12s ago". This is what makes polling "off" a safe choice rather
+ * than a trap: stale data stays visible AS stale.
+ */
+const ageLabel = computed(() =>
+  store.lastFetched
+    ? formatAge(clock.value - store.lastFetched.getTime())
+    : null,
+);
+
+const staleWatchCount = computed(
+  () => store.watched.length - store.watchedBeads.length,
+);
+
+// The calibration strip that sat here on every view (bp-67g.29) moved into
+// the incytes view (bp-dgq): it is a project-wide fact, and that is the
+// project-wide surface. See BeadsIncytes.vue's Allocation block.
+
+</script>
+
+<template>
+  <div class="app">
+    <SearchPalette />
+    <ShortcutsOverlay />
+    <ChangelogOverlay />
+    <Walkthrough />
+    <ContextMenu />
+    <Toast />
+    <WhatIfPanel />
+    <header class="app-header">
+      <!-- The mark replaces the wordmark as TEXT, so the accessible name
+           has to come from somewhere: the SVG is aria-hidden and the h1
+           keeps a visually-hidden label. -->
+      <h1 class="app-title">
+        <BeadcyteMark />
+        <span class="visually-hidden">beadcyte</span>
+      </h1>
+      <!-- Outside the h1 deliberately. The version arrived inside it, which
+           made the page's main heading announce as "beadcytev0.1.0" — the
+           visually-hidden label and the tag concatenate with no separator.
+           A version is not part of the product's name. -->
+      <!-- "What changed" is the question a version number provokes, so the
+           tag is the way in to the changelog (bp-67g.46). -->
+      <button
+        type="button"
+        class="version-btn"
+        :title="`beadcyte ${version} — what changed`"
+        aria-label="What changed in this version"
+        @click="store.openChangelog()"
+      ><span class="version-tag">v{{ version }}</span></button>
+      <div class="app-meta">
+        <!-- A background refresh keeps the chart and says so quietly here;
+             only a first load or a project switch shows the meter. -->
+        <span v-if="store.loading && store.refreshingInPlace" class="refreshing">
+          <RefreshCw class="icon spin" /> refreshing
+        </span>
+        <span v-else-if="store.loading">loading…</span>
+        <span v-else-if="store.error" class="error">error: {{ store.error }}</span>
+        <span v-else-if="store.generatedAt">
+          {{ store.beads.length }} beads<template v-if="ageLabel"> · {{ ageLabel }}</template>
+        </span>
+        <!-- A failed refresh keeps the last good data on screen; the error
+             belongs beside the age, not in place of the chart. -->
+        <span v-if="store.error && store.payload" class="error stale-warn">
+          · refresh failed
+        </span>
+      </div>
+      <!-- Watch list: count badge with a hover list. Read-only here — the
+           drawer header owns adding and removing. Sits AFTER the load status
+           so the ticking "updated Ns ago" text cannot shove it around. -->
+      <div v-if="store.watched.length" class="watch-menu">
+        <button
+          type="button"
+          class="watch-trigger"
+          :aria-label="`${store.watchedBeads.length} watched`"
+        >
+          <Eye class="icon" />
+          <span class="watch-count">{{ store.watchedBeads.length }}</span>
+        </button>
+        <div class="watch-popover">
+          <p v-if="!store.watchedBeads.length" class="watch-empty">
+            Nothing watched is in view.
+          </p>
+          <button
+            v-for="b in store.watchedBeads"
+            :key="b.id"
+            type="button"
+            class="watch-item"
+            @click="store.openBead(b.id)"
+          >
+            <code>{{ b.id }}</code>
+            <span class="watch-item-title">{{ b.title }}</span>
+          </button>
+          <p v-if="staleWatchCount" class="watch-stale">
+            {{ staleWatchCount }} watched
+            {{ staleWatchCount === 1 ? "bead is" : "beads are" }} no longer in
+            this repo.
+          </p>
+        </div>
+      </div>
+      <!-- The gear comes last, right of the load status and the watch badge:
+           appearance and
+           projects live in its menu, and its panel opens leftward from the
+           header edge. -->
+      <div class="theme-controls">
+        <OptionsMenu />
+      </div>
+    </header>
+
+    <ControlsPanel />
+
+    <BeadDrawer />
+
+    <section class="chart-wrap">
+      <!-- The meter replaces the view only when there is nothing to show —
+           a first load or a project switch. A background poll leaves the
+           chart up and swaps data in behind the header's activity hint. -->
+      <LoadMeter v-if="!vm && store.loading" />
+      <!-- v-if, not v-show: the unselected view is unmounted so it costs
+           nothing on every filter/window change. -->
+      <BeadsMine v-else-if="store.view === 'mine'" :vm="vm" />
+      <BeadsGantt v-else-if="store.view === 'gantt'" :vm="vm" />
+      <BeadsIncytes v-else-if="store.view === 'incytes'" :vm="vm" />
+      <!-- Reads store.tableViewModel itself: the same set with the per-group
+           cap lifted (bp-67g.44), so it does not take the Gantt's vm. -->
+      <BeadsTable v-else-if="store.view === 'table'" />
+      <BeadsGrid v-else :vm="vm" />
+      <!-- Describes the view model the gantt and grid are drawing. Incytes
+           carries its own totals, and row/bar counts are not what it is
+           about, so it doesn't inherit this line. -->
+      <p v-if="store.view === 'gantt' || store.view === 'grid'" class="counts">
+        <code>{{ vm?.rows.length ?? 0 }}</code> rows ·
+        <!-- Bars are a timeline concept; the grid doesn't draw any. -->
+        <template v-if="store.view === 'gantt'">
+          <code>{{ workBars.length }}</code> bars<template v-if="barKindCounts.length">
+            (<template v-for="([kind, n], i) in barKindCounts" :key="kind"><template v-if="i"> · </template><Term class="kind-term" :note="BAR_KIND_NOTES[kind as BarKind]"><code class="kind">{{ kind }}</code></Term> {{ n }}</template>)</template> ·
+        </template>
+        <code>{{ vm?.groups.length ?? 0 }}</code> groups
+      </p>
+    </section>
+
+  </div>
+</template>
+
+<style>
+body {
+  margin: 0;
+  background: var(--c-bg);
+  color: var(--c-text);
+  font-family:
+    ui-sans-serif,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-meta .refreshing {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--c-dim);
+}
+
+.app-meta .spin {
+  animation: bp-spin 0.9s linear infinite;
+}
+
+@keyframes bp-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app-meta .stale-warn {
+  color: var(--c-warning);
+}
+
+.theme-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+}
+
+
+/* Watch menu. Hover-opened rather than click-toggled: it's a glance at a
+   short list, not a mode to enter. */
+.watch-menu {
+  position: relative;
+  margin-left: 12px;
+}
+
+/* Same geometry as the gear next to it (OptionsMenu.vue .options-trigger):
+   16px icon, 3px/7px padding, one radius token, so the pair reads as one
+   control group and shares a 24px height. */
+.watch-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 3px 7px;
+  line-height: 16px;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background: var(--c-panel-2);
+  color: var(--c-accent);
+  font: inherit;
+  font-size: 11px;
+  cursor: default;
+}
+
+.watch-trigger .icon {
+  width: 16px;
+  height: 16px;
+}
+
+.watch-count {
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.watch-popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 400;
+  min-width: 280px;
+  max-width: 420px;
+  max-height: 320px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 4px;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  background: var(--c-panel);
+  box-shadow: var(--shadow-pop);
+
+  /* Not display:none — that can't be transitioned, so the list vanished the
+     instant the pointer left the trigger, before it could reach the list.
+     Closing is delayed and only then fades; opening is immediate. */
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease-out 0.35s,
+    visibility 0s linear 0.5s;
+}
+
+/* Bridges the 4px gap between trigger and list. Without it that strip
+   belongs to neither element, so travelling down to the list crossed dead
+   ground and dismissed it. As a child of the popover it keeps
+   .watch-menu:hover true, and it spans the full width so a diagonal path to
+   an entry stays covered. */
+.watch-popover::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -6px;
+  height: 6px;
+}
+
+.watch-menu:hover .watch-popover,
+.watch-menu:focus-within .watch-popover {
+  visibility: visible;
+  opacity: 1;
+  transition:
+    opacity 0.1s ease-out,
+    visibility 0s;
+}
+
+.watch-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--c-text);
+  font: inherit;
+  font-size: 11px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.watch-item:hover,
+.watch-item:focus-visible {
+  background: var(--c-panel-2);
+}
+
+.watch-item code {
+  color: var(--c-accent);
+  flex: none;
+}
+
+.watch-item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.watch-empty,
+.watch-stale {
+  margin: 0;
+  padding: 6px 8px;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.version-tag {
+  font-size: 10px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-panel);
+}
+
+/* The mark paints with currentColor, so this rule is what colours it.
+   --c-accent, because that is what the text wordmark it replaces used, and
+   a named style recolouring its accent recolours the mark with it — which
+   is the point of asking for a theme-responsive logo. font-size drives the
+   height, since the mark is sized in em.
+
+   One rule, not two: the version tag arrived with its own .app-title block
+   ahead of this one, whose font-size was already dead because this one sits
+   later in the file. `gap` and `font-weight` are the parts of it that were
+   actually taking effect, folded in here. */
+.app-title {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--c-accent);
+}
+
+/* Reachable by a screen reader, absent to everyone else. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+
+.app-meta {
+  font-size: 12px;
+  color: var(--c-dim);
+}
+
+.app-meta .error {
+  color: var(--c-danger);
+}
+
+.controls {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-panel);
+  align-items: center;
+}
+
+.control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control > label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+}
+
+.segmented {
+  display: inline-flex;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.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);
+}
+
+.segmented button:last-child {
+  border-right: none;
+}
+
+.segmented button.active {
+  background: var(--c-accent);
+  color: var(--c-bg);
+}
+
+.chart-wrap {
+  padding: 20px 20px 4px;
+}
+
+/* The gantt and grid are followed by the counts line, which supplies the
+   bottom gap. Incytes isn't, so it needs its own. */
+.chart-wrap:has(.incytes),
+.chart-wrap:has(.mine),
+.chart-wrap:has(.beads-table) {
+  padding-bottom: 24px;
+}
+
+
+/* The version tag is a button now; keep the tag's own look and add the
+   affordance on hover only, so the header stays quiet. */
+.version-btn {
+  all: unset;
+  display: inline-flex;
+  cursor: pointer;
+  border-radius: 3px;
+  margin-left: 10px;
+  margin-right: auto; /* everything after the tag sits at the right edge */
+}
+
+.version-btn:hover .version-tag,
+.version-btn:focus-visible .version-tag {
+  color: var(--c-accent);
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+}
+
+.version-btn:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 1px;
+}
+
+.chart-wrap .counts {
+  color: var(--c-dim);
+  font-size: 11px;
+  margin: 6px 4px 0;
+}
+
+.chart-wrap .counts code {
+  color: var(--c-accent);
+}
+
+/* Kind names are the renderer's own vocabulary; keep them quieter than the
+   totals they qualify. */
+.chart-wrap .counts code.kind {
+  color: var(--c-dim-bright);
+}
+
+.skeleton-note {
+  grid-column: 1 / -1;
+  padding: 12px 16px;
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  color: var(--c-dim);
+  font-size: 12px;
+}
+
+.skeleton-note code {
+  color: var(--c-accent);
+}
+
+.stat-block {
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  padding: 16px;
+}
+
+.stat-block h2 {
+  margin: 0 0 12px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  font-weight: 600;
+}
+
+.stat-block ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.stat-block li {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--c-border);
+  gap: 8px;
+}
+
+.stat-block li:last-child {
+  border-bottom: none;
+}
+
+/* Scoped to the stat block: bare .group-label is a name three components
+   use, and leaving it unqualified is how BeadsGrid's copy ended up
+   restyling this one. Size and weight are stated rather than inherited
+   from that accident. */
+.stat-block .group-label {
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat-count {
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.stat-count em {
+  font-style: normal;
+  color: var(--c-danger);
+  margin-left: 6px;
+}
+
+.hint {
+  font-size: 11px;
+  color: var(--c-dim);
+  margin: -4px 0 8px;
+}
+
+code {
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+</style>