beadcyte 0.4.0

package/src/web/components/ChangelogOverlay.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+// ChangelogOverlay.vue — the in-app changelog (bp-67g.46). Opens from the
+// header's version tag and the options menu's About; closes on Escape
+// (through keybindings.ts), the close button or a click on the backdrop.
+//
+// The markdown is CHANGELOG.md itself, inlined by Vite at build time, so
+// reading it needs no network and a published install has its own copy. The
+// link out is configuration — BEADCYTE_CHANGELOG_URL, reflected by serve.mjs
+// onto import.meta.env — and absent when unset, because a hardcoded URL would
+// point a private deployment at a repo it may not be able to see.
+
+import { computed } from "vue";
+import { ExternalLink, X } from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { renderMarkdown } from "../markdown";
+import { changelogBody, describeChangelog } from "../changelog-view";
+import changelogMd from "../../../CHANGELOG.md?raw";
+
+const store = useBeadsStore();
+const version: string = import.meta.env.VITE_BEADCYTE_VERSION || "unknown";
+const externalUrl: string | null = import.meta.env.VITE_BEADCYTE_CHANGELOG_URL || null;
+
+const summary = computed(() => describeChangelog(changelogMd, version));
+const html = computed(() => renderMarkdown(changelogBody(changelogMd)));
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="store.changelogOpen"
+      class="changelog-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-label="What changed"
+      @click.self="store.closeChangelog()"
+    >
+      <div class="changelog-panel">
+        <header>
+          <h2>What changed <span class="running">· running v{{ version }}</span></h2>
+          <a
+            v-if="externalUrl"
+            class="external"
+            :href="externalUrl"
+            target="_blank"
+            rel="noopener"
+            title="The same file on the repo"
+          >
+            on the repo <ExternalLink class="icon" />
+          </a>
+          <button type="button" class="close" title="Close (Esc)" aria-label="Close" @click="store.closeChangelog()">
+            <X class="icon" />
+          </button>
+        </header>
+        <p class="note">{{ summary.note }}</p>
+        <!-- Generated from our own tracker and shipped in the package: a
+             trusted source, rendered without a sanitizer (see markdown.ts). -->
+        <div class="changelog-body" v-html="html" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+.changelog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 950;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 6vh 16px;
+  background: color-mix(in oklab, var(--c-bg) 70%, transparent);
+}
+
+.changelog-panel {
+  width: min(760px, 100%);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 8px;
+  box-shadow: var(--shadow-pop);
+  padding: 16px 20px 20px;
+}
+
+.changelog-panel header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.changelog-panel h2 {
+  margin: 0;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.changelog-panel .running {
+  color: var(--c-dim);
+  font-weight: 400;
+  font-family: ui-monospace, monospace;
+  font-size: 12px;
+}
+
+.changelog-panel .external {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--c-accent);
+  text-decoration: none;
+}
+
+.changelog-panel .external:hover {
+  text-decoration: underline;
+}
+
+.changelog-panel .external .icon,
+.changelog-panel .close .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.changelog-panel .close {
+  all: unset;
+  cursor: pointer;
+  color: var(--c-dim);
+  display: inline-flex;
+  padding: 4px;
+  border-radius: 4px;
+}
+
+.changelog-panel .close:hover {
+  color: var(--c-text);
+  background: var(--c-lift);
+}
+
+.changelog-panel .note {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: var(--c-dim);
+  line-height: 1.5;
+}
+
+.changelog-body {
+  overflow: auto;
+  min-height: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  padding-right: 6px;
+}
+
+.changelog-body h2 {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 14px 0 4px;
+  padding-top: 10px;
+  border-top: 1px solid var(--c-border);
+}
+
+.changelog-body h2:first-child {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.changelog-body h3 {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+  margin: 10px 0 4px;
+}
+
+.changelog-body ul {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.changelog-body li {
+  margin: 2px 0;
+}
+
+.changelog-body code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-accent);
+}
+
+.changelog-body a {
+  color: var(--c-accent);
+}
+</style>

package/src/web/components/ContextMenu.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+// ContextMenu.vue — the quick actions on one bead (bp-ocs): claim, assign
+// to a roster member, mark or unmark spec:ready, add a label, defer. Opens on right-click over a bar, a
+// card, a table row or a mine row, from the drawer's Actions button, and on
+// the a key for the open bead, so every path has a keyboard route.
+//
+// It is a real menu: focus moves to the first item on open, arrows move
+// between items, Escape closes (through the key registry, ahead of the
+// drawer), and a click anywhere else closes. Defer asks twice — pick a
+// horizon, then confirm — because a wrong click writes to the real tracker.
+// The menu speaks in outcomes; the exact bd command behind each action, and
+// how to reverse it by hand, is documented in docs/bd-usage.md. There is no
+// client-side undo by design.
+
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useBeadsStore } from "../store";
+import { DEFER_CHOICES, READY_LABEL, type Mutation } from "../mutations";
+
+const store = useBeadsStore();
+const menuEl = ref<HTMLElement | null>(null);
+const bead = computed(() => (store.contextMenu ? store.beadById(store.contextMenu.id) : null));
+const step = ref<"root" | "label" | "defer" | "assign">("root");
+const labelText = ref("");
+const deferUntil = ref<string>(DEFER_CHOICES[2].until);
+
+// The roster is the list of people to assign to; a handle that is only on
+// beads (a derived roster) is still a person, so it is on the list too.
+const handles = computed(() => {
+  const roster = (store.calibratedRoster ?? store.roster)?.humans ?? [];
+  const seen = new Set<string>(roster.map((h) => h.handle));
+  for (const b of store.beads) if (b.assignee) seen.add(b.assignee);
+  return [...seen].sort();
+});
+const assignee = ref<string>("");
+
+// Type-ahead for labels: every label already on some bead, most used first,
+// minus the ones this bead has. A native datalist, so filtering as you type
+// and picking with the keyboard come from the browser.
+const labelSuggestions = computed(() => {
+  const counts = new Map<string, number>();
+  for (const b of store.beads) for (const l of b.labels ?? []) counts.set(l, (counts.get(l) ?? 0) + 1);
+  const mine = new Set(bead.value?.labels ?? []);
+  return [...counts.entries()]
+    .filter(([l]) => !mine.has(l))
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+    .map(([l, n]) => ({ label: l, n }));
+});
+const assignMutation = computed<Mutation | null>(() =>
+  bead.value && assignee.value && assignee.value !== bead.value.assignee
+    ? { action: "assign", id: bead.value.id, assignee: assignee.value }
+    : null,
+);
+
+const isReady = computed(() => !!bead.value?.labels?.includes(READY_LABEL));
+const claimable = computed(() => !!bead.value && bead.value.status !== "closed" && bead.value.status !== "in_progress");
+const deferrable = computed(() => !!bead.value && bead.value.status !== "closed" && bead.value.status !== "deferred");
+
+const pos = computed(() => {
+  const m = store.contextMenu;
+  if (!m) return { left: "0px", top: "0px" };
+  const w = 280;
+  const h = 260;
+  const left = Math.min(Math.max(8, m.x), window.innerWidth - w - 8);
+  const top = Math.min(Math.max(8, m.y), window.innerHeight - h - 8);
+  return { left: `${left}px`, top: `${top}px` };
+});
+
+function close() {
+  store.closeContextMenu();
+}
+
+function run(m: Mutation) {
+  close();
+  void store.mutate(m);
+}
+
+const deferMutation = computed<Mutation | null>(() =>
+  bead.value ? { action: "defer", id: bead.value.id, until: deferUntil.value } : null,
+);
+const labelMutation = computed<Mutation | null>(() =>
+  bead.value && /^[a-z0-9][a-z0-9:_./-]{0,63}$/i.test(labelText.value.trim())
+    ? { action: "add-label", id: bead.value.id, label: labelText.value.trim() }
+    : null,
+);
+
+function items(): HTMLElement[] {
+  return [...(menuEl.value?.querySelectorAll<HTMLElement>('[role="menuitem"], input, select') ?? [])].filter((el) => !(el as HTMLButtonElement).disabled);
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const list = items();
+  const i = list.indexOf(document.activeElement as HTMLElement);
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    list[(i + 1) % list.length]?.focus();
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    list[(i - 1 + list.length) % list.length]?.focus();
+  } else if (e.key === "Home") {
+    e.preventDefault();
+    list[0]?.focus();
+  } else if (e.key === "End") {
+    e.preventDefault();
+    list[list.length - 1]?.focus();
+  }
+  // Escape is the key registry's (close order: this menu first).
+}
+
+// Closing rules. The listeners are permanent and check state, rather than
+// being attached when the menu opens: a component re-mounted by hot reload
+// while a menu was up would otherwise have none until the next open.
+function onOutside(e: Event) {
+  if (!store.contextMenu) return;
+  if (menuEl.value && !menuEl.value.contains(e.target as Node)) close();
+}
+function onScroll() {
+  if (store.contextMenu) close();
+}
+onMounted(() => {
+  document.addEventListener("pointerdown", onOutside, true);
+  document.addEventListener("scroll", onScroll, { capture: true, passive: true });
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onOutside, true);
+  document.removeEventListener("scroll", onScroll, { capture: true });
+});
+// The menu belongs to a bead on a surface: when the drawer closes or moves
+// to another bead, or the view changes, it is about nothing and goes.
+watch(
+  () => [store.openBeadId, store.view],
+  () => {
+    if (store.contextMenu) close();
+  },
+);
+
+watch(
+  () => store.contextMenu,
+  async (m) => {
+    step.value = "root";
+    labelText.value = "";
+    if (m) {
+      const b = store.beadById(m.id);
+      assignee.value = b?.assignee ?? handles.value[0] ?? "";
+      await nextTick();
+      items()[0]?.focus();
+    }
+  },
+);
+// Each step is a small form: focus its first field so typing goes there.
+watch(step, async () => {
+  await nextTick();
+  items()[0]?.focus();
+});
+
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="store.contextMenu && bead"
+      ref="menuEl"
+      class="bead-menu"
+      role="menu"
+      :aria-label="`Actions for ${bead.id}`"
+      :style="pos"
+      @keydown="onKeydown"
+    >
+      <header class="menu-head"><code>{{ bead.id }}</code> <span class="menu-title">{{ bead.title }}</span></header>
+
+      <template v-if="step === 'root'">
+        <button type="button" role="menuitem" class="item" :disabled="!claimable" @click="run({ action: 'claim', id: bead.id })">
+          claim <span class="cmd">{{ bead.status === "in_progress" ? "already in progress" : "start it, assigned to you" }}</span>
+        </button>
+        <button type="button" role="menuitem" class="item" :disabled="bead.status === 'closed' || !handles.length" @click="step = 'assign'">
+          assign… <span class="cmd">{{ bead.assignee ? `now ${bead.assignee}` : "unassigned" }}</span>
+        </button>
+        <button type="button" role="menuitem" class="item" :disabled="bead.status === 'closed'" @click="run({ action: isReady ? 'unspec-ready' : 'spec-ready', id: bead.id })">
+          {{ isReady ? "remove spec:ready" : "mark spec:ready" }}
+        </button>
+        <button type="button" role="menuitem" class="item" :disabled="bead.status === 'closed'" @click="step = 'label'">add label…</button>
+        <button type="button" role="menuitem" class="item" :disabled="!deferrable" @click="step = 'defer'">defer…</button>
+        <p class="menu-note">Writes to your tracker through bd. No undo here; every action and how to reverse it is in docs/bd-usage.md.</p>
+      </template>
+
+      <template v-else-if="step === 'assign'">
+        <label class="field">
+          <span>assign to</span>
+          <select v-model="assignee">
+            <option v-for="h in handles" :key="h" :value="h">{{ h }}{{ h === bead.assignee ? " (current)" : "" }}</option>
+          </select>
+        </label>
+        <p class="menu-note">Sets the assignee only; the status stays. Claim is what starts work.<template v-if="!assignMutation"> That is already the assignee.</template></p>
+        <div class="row">
+          <button type="button" role="menuitem" class="item subtle" @click="step = 'root'">back</button>
+          <button type="button" role="menuitem" class="item primary" :disabled="!assignMutation" @click="assignMutation && run(assignMutation)">assign</button>
+        </div>
+      </template>
+
+      <template v-else-if="step === 'label'">
+        <label class="field">
+          <span>label</span>
+          <input
+            v-model="labelText"
+            type="text"
+            list="bead-menu-labels"
+            autocomplete="off"
+            placeholder="type to search existing labels, or a new one"
+            spellcheck="false"
+            @keydown.enter.prevent="labelMutation && run(labelMutation)"
+          />
+          <datalist id="bead-menu-labels">
+            <option v-for="o in labelSuggestions" :key="o.label" :value="o.label">{{ o.n }} bead{{ o.n === 1 ? "" : "s" }}</option>
+          </datalist>
+        </label>
+        <p class="menu-note">
+          {{ labelSuggestions.length }} existing label{{ labelSuggestions.length === 1 ? "" : "s" }} to pick from; a new one is fine too.
+          Letters, digits, <code>: _ . / -</code>, up to 64.
+        </p>
+        <div class="row">
+          <button type="button" role="menuitem" class="item subtle" @click="step = 'root'">back</button>
+          <button type="button" role="menuitem" class="item primary" :disabled="!labelMutation" @click="labelMutation && run(labelMutation)">
+            add
+          </button>
+        </div>
+      </template>
+
+      <template v-else>
+        <label class="field">
+          <span>defer for</span>
+          <select v-model="deferUntil">
+            <option v-for="c in DEFER_CHOICES" :key="c.until" :value="c.until">{{ c.label }} ({{ c.until }})</option>
+          </select>
+        </label>
+        <p class="menu-note confirm">
+          Deferring hides <code>{{ bead.id }}</code> from ready work until then. Undo later with <code>bd undefer</code>.
+        </p>
+        <div class="row">
+          <button type="button" role="menuitem" class="item subtle" @click="step = 'root'">back</button>
+          <button type="button" role="menuitem" class="item primary danger" @click="deferMutation && run(deferMutation)">confirm defer</button>
+        </div>
+      </template>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+.bead-menu {
+  position: fixed;
+  z-index: 10000; /* above the bead tooltip (9999): a menu is the thing being used */
+  width: 280px;
+  padding: 8px;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 6px;
+  box-shadow: var(--shadow-pop);
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bead-menu .menu-head {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  padding: 2px 6px 8px;
+  border-bottom: 1px solid var(--c-border);
+  margin-bottom: 4px;
+}
+
+.bead-menu .menu-head code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-accent);
+  white-space: nowrap; /* the id never wraps; the title is what truncates */
+}
+
+.bead-menu .menu-title {
+  color: var(--c-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bead-menu .item {
+  all: unset;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: baseline;
+  cursor: pointer;
+  padding: 6px 8px;
+  border-radius: 4px;
+  color: var(--c-text);
+}
+
+.bead-menu .item:hover,
+.bead-menu .item:focus-visible {
+  background: var(--c-lift);
+  outline: none;
+}
+
+.bead-menu .item:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--c-accent);
+}
+
+.bead-menu .item:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.bead-menu .item .cmd {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  color: var(--c-dim);
+}
+
+.bead-menu .item.primary {
+  justify-content: center;
+  background: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
+}
+
+.bead-menu .item.primary.danger {
+  background: var(--c-danger);
+}
+
+.bead-menu .item.subtle {
+  justify-content: center;
+  color: var(--c-dim);
+  border: 1px solid var(--c-border);
+}
+
+.bead-menu .row {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.bead-menu .row .item {
+  flex: 1;
+}
+
+.bead-menu .field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 6px;
+}
+
+.bead-menu .field span {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--c-dim);
+}
+
+.bead-menu input,
+.bead-menu select {
+  font: inherit;
+  padding: 5px 8px;
+  border: 1px solid var(--c-border-strong);
+  border-radius: 4px;
+  background: var(--c-bg);
+  color: var(--c-text);
+}
+
+.bead-menu .menu-note {
+  margin: 4px 6px 2px;
+  font-size: 11px;
+  color: var(--c-dim);
+  line-height: 1.45;
+}
+
+.bead-menu .menu-note code {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  color: var(--c-text);
+}
+
+.bead-menu .menu-note.confirm {
+  color: var(--c-text);
+}
+</style>