beadcyte 0.4.0

package/src/web/components/TypeChip.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// TypeChip.vue — issue-type icon+label chip. Same visual footprint as
+// PriorityChip so they line up cleanly side-by-side in dossiers.
+//
+//   task     → CheckSquare
+//   bug      → Bug
+//   feature  → Sparkles
+//   epic     → Layers
+//   chore    → Wrench
+//   docs     → FileText
+//   question → HelpCircle
+//   *        → Square (fallback)
+
+import { computed } from "vue";
+import {
+  CheckSquare,
+  Bug,
+  Sparkles,
+  Layers,
+  Wrench,
+  FileText,
+  HelpCircle,
+  Square,
+} from "@lucide/vue";
+
+const props = defineProps<{
+  type: string;
+  compact?: boolean;
+}>();
+
+const icon = computed(() => {
+  switch ((props.type ?? "").toLowerCase()) {
+    case "task":
+      return CheckSquare;
+    case "bug":
+      return Bug;
+    case "feature":
+      return Sparkles;
+    case "epic":
+      return Layers;
+    case "chore":
+      return Wrench;
+    case "docs":
+    case "documentation":
+      return FileText;
+    case "question":
+      return HelpCircle;
+    default:
+      return Square;
+  }
+});
+</script>
+
+<template>
+  <span class="type-chip" :class="`type-${type}`" :title="type">
+    <component :is="icon" class="icon type-icon" />
+    <span v-if="!compact" class="type-text">{{ type }}</span>
+  </span>
+</template>
+
+<style>
+.type-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px 2px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid var(--c-border);
+  color: var(--c-dim);
+  text-transform: lowercase;
+}
+
+.type-chip .type-icon {
+  flex-shrink: 0;
+}
+
+.type-chip.type-bug {
+  color: var(--c-danger-bright);
+  border-color: oklch(from var(--c-today) l c h / 30%);
+}
+.type-chip.type-feature {
+  color: var(--c-shipped-bright);
+  border-color: oklch(from var(--c-shipped) l c h / 30%);
+}
+.type-chip.type-epic {
+  color: var(--c-epic);
+  border-color: oklch(from var(--c-epic) l c h / 35%);
+}
+.type-chip.type-chore {
+  color: var(--c-dim-bright);
+}
+</style>

package/src/web/components/Walkthrough.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+// Walkthrough.vue — the first-run tour (bp-67g.48). A small fixed card in
+// the bottom-right corner, NOT a modal: no backdrop, no aria-modal, focus is
+// never moved or trapped, so the app behind it stays usable while it is up.
+// Skip or Done marks it seen; it never appears again unasked, and the options
+// menu re-opens it. Escape closes it too, last in the registry's close order,
+// so it never steals an Escape meant for the drawer or an overlay.
+//
+// Content and memory live in walkthrough.ts; this file only lays them out.
+
+import { computed, ref, watch } from "vue";
+import { X } from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { WALKTHROUGH_STEPS, barKindNotes, markWalkthroughSeen } from "../walkthrough";
+
+const store = useBeadsStore();
+const i = ref(0);
+const step = computed(() => WALKTHROUGH_STEPS[i.value]!);
+const last = computed(() => i.value === WALKTHROUGH_STEPS.length - 1);
+const kinds = barKindNotes();
+
+// Start from the top each time it is opened.
+watch(
+  () => store.walkthroughOpen,
+  (open) => {
+    if (open) i.value = 0;
+  },
+);
+
+function finish() {
+  markWalkthroughSeen();
+  store.closeWalkthrough();
+}
+
+function next() {
+  if (last.value) finish();
+  else i.value++;
+}
+
+const showMe = computed(() => step.value.view && step.value.view !== store.view);
+</script>
+
+<template>
+  <Teleport to="body">
+    <aside
+      v-if="store.walkthroughOpen"
+      class="walkthrough"
+      role="complementary"
+      aria-label="Walkthrough"
+    >
+      <header>
+        <span class="count">{{ i + 1 }} / {{ WALKTHROUGH_STEPS.length }}</span>
+        <h2>{{ step.title }}</h2>
+        <button type="button" class="close" title="Skip the walkthrough (Esc)" aria-label="Skip the walkthrough" @click="finish">
+          <X class="icon" />
+        </button>
+      </header>
+      <p class="body">{{ step.body }}</p>
+      <dl v-if="step.kinds" class="kinds">
+        <template v-for="k in kinds" :key="k.kind">
+          <dt><code>{{ k.kind }}</code></dt>
+          <dd>{{ k.note }}</dd>
+        </template>
+      </dl>
+      <p class="also">Also in: {{ step.alsoIn }}</p>
+      <footer>
+        <button v-if="showMe" type="button" class="btn subtle" @click="store.setView(step.view!)">show me</button>
+        <span class="spacer" />
+        <button type="button" class="btn subtle" :disabled="i === 0" @click="i--">back</button>
+        <button type="button" class="btn" @click="next">{{ last ? "done" : "next" }}</button>
+      </footer>
+    </aside>
+  </Teleport>
+</template>
+
+<style>
+.walkthrough {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 800; /* under the overlays (900+), over the page */
+  width: min(420px, calc(100vw - 40px));
+  max-height: min(70vh, 560px);
+  overflow: auto;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-border-strong);
+  border-radius: 8px;
+  box-shadow: var(--shadow-pop);
+  padding: 12px 14px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.walkthrough header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.walkthrough .count {
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  color: var(--c-dim);
+  white-space: nowrap;
+}
+
+.walkthrough h2 {
+  flex: 1;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.walkthrough .close {
+  all: unset;
+  cursor: pointer;
+  color: var(--c-dim);
+  display: inline-flex;
+  padding: 2px;
+  border-radius: 4px;
+  align-self: center;
+}
+
+.walkthrough .close:hover,
+.walkthrough .close:focus-visible {
+  color: var(--c-text);
+  background: var(--c-lift);
+}
+
+.walkthrough .close .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.walkthrough .body {
+  margin: 0;
+}
+
+.walkthrough .kinds {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 2px 10px;
+  margin: 8px 0 0;
+  font-size: 11px;
+}
+
+.walkthrough .kinds dt code {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--c-accent);
+}
+
+.walkthrough .kinds dd {
+  margin: 0;
+  color: var(--c-text);
+}
+
+.walkthrough .also {
+  margin: 8px 0 0;
+  font-size: 11px;
+  color: var(--c-dim);
+  font-style: italic;
+}
+
+.walkthrough footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.walkthrough .spacer {
+  flex: 1;
+}
+
+.walkthrough .btn {
+  all: unset;
+  cursor: pointer;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--c-accent);
+  color: var(--c-bg);
+}
+
+.walkthrough .btn.subtle {
+  background: transparent;
+  color: var(--c-dim);
+  border: 1px solid var(--c-border);
+  font-weight: 400;
+}
+
+.walkthrough .btn.subtle:hover:not(:disabled) {
+  color: var(--c-text);
+}
+
+.walkthrough .btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.walkthrough .btn:focus-visible {
+  outline: 2px solid var(--c-accent);
+  outline-offset: 1px;
+}
+</style>

package/src/web/components/WhatIfPanel.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+// WhatIfPanel.vue — the what-if plan's card (bp-q56): the change set, what
+// moved and by how much, the frontier per person before and after, an idea
+// form, discard, and confirm. Confirm hands the change set to the apply
+// path (bp-2fq); until that lands it shows the bd commands to paste, which
+// is also the honest answer to "what would this do to my tracker".
+//
+// Confirm is two steps (bp-2fq): the commands are shown first, then "run
+// them" writes each through the same whitelisted endpoint the quick actions
+// use, and the report says what happened to every change.
+//
+// Not a modal. Sits bottom-left so it does not fight the walkthrough's
+// corner, and stays while the views underneath show the what-if plan.
+
+import { computed, ref } from "vue";
+import { X, Plus } from "@lucide/vue";
+import { useBeadsStore } from "../store";
+import { describeChange, describeDelta, whatIfCommands, IDEA_PREFIX } from "../whatif";
+
+const store = useBeadsStore();
+const diff = computed(() => store.whatIfDiff);
+const titleOf = (id: string) => store.beadById(id)?.title;
+const showCommands = ref(false);
+const commands = computed(() => whatIfCommands(store.whatIf));
+
+// The idea form.
+const ideaOpen = ref(false);
+const ideaTitle = ref("");
+const ideaType = ref("feature");
+const ideaPriority = ref(2);
+const ideaHours = ref(4);
+const ideaAssignee = ref<string>("");
+const handles = computed(() => (store.calibratedRoster ?? store.roster)?.humans.map((h) => h.handle) ?? []);
+let ideaSeq = 1;
+function addIdea() {
+  const title = ideaTitle.value.trim();
+  if (!title) return;
+  store.addWhatIf({
+    kind: "idea",
+    id: `${IDEA_PREFIX}${ideaSeq++}`,
+    title,
+    type: ideaType.value,
+    priority: ideaPriority.value,
+    hours: Math.max(0.25, ideaHours.value),
+    assignee: ideaAssignee.value || null,
+  });
+  ideaTitle.value = "";
+  ideaOpen.value = false;
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <aside v-if="store.whatIfActive || store.whatIfPanelOpen || store.whatIfReport" class="whatif" role="complementary" aria-label="What-if plan">
+      <header>
+        <h2>What-if <span class="count">{{ store.whatIf.length }} change{{ store.whatIf.length === 1 ? "" : "s" }}</span></h2>
+        <button type="button" class="close" title="Close the panel (changes stay)" aria-label="Close the panel" @click="store.closeWhatIfPanel()"><X class="icon" /></button>
+      </header>
+      <ul v-if="store.whatIfReport" class="report">
+        <li v-for="(r, i) in store.whatIfReport" :key="i" :class="{ ok: r.ok, failed: !r.ok }">
+          <span class="mark">{{ r.ok ? "✓" : "✗" }}</span>
+          <span class="text">{{ r.text }}</span>
+          <span v-if="r.detail" class="detail">{{ r.detail }}</span>
+        </li>
+        <li class="report-actions"><button type="button" class="btn subtle" @click="store.whatIfReport = null">dismiss</button></li>
+      </ul>
+      <p class="lede">
+        Every view shows the plan as it would be. Nothing is written until you confirm.
+      </p>
+
+      <ul v-if="store.whatIf.length" class="changes">
+        <li v-for="(c, i) in store.whatIf" :key="i">
+          <span class="change">{{ describeChange(c, titleOf) }}</span>
+          <button type="button" class="remove" :aria-label="`Remove change ${i + 1}`" @click="store.removeWhatIf(i)"><X class="icon" /></button>
+        </li>
+      </ul>
+      <p v-else class="hint">No changes yet. Reassign, reprioritise or mark spec:ready from a bead's drawer, change a cap from a person's roster line on incytes, or add an idea below.</p>
+
+      <button v-if="!ideaOpen" type="button" class="btn subtle" @click="ideaOpen = true"><Plus class="icon" /> add an idea</button>
+      <form v-else class="idea" @submit.prevent="addIdea">
+        <input v-model="ideaTitle" type="text" placeholder="the idea, as a title" required />
+        <div class="row">
+          <select v-model="ideaType" aria-label="type"><option>feature</option><option>task</option><option>bug</option><option>chore</option></select>
+          <select v-model.number="ideaPriority" aria-label="priority"><option v-for="p in [0, 1, 2, 3, 4]" :key="p" :value="p">P{{ p }}</option></select>
+          <label class="hours">~<input v-model.number="ideaHours" type="number" min="0.25" step="0.25" aria-label="hours of work" />h</label>
+          <select v-model="ideaAssignee" aria-label="assignee"><option value="">let the scheduler route it</option><option v-for="h in handles" :key="h" :value="h">{{ h }}</option></select>
+        </div>
+        <div class="row">
+          <button type="button" class="btn subtle" @click="ideaOpen = false">cancel</button>
+          <button type="submit" class="btn">add to the what-if</button>
+        </div>
+      </form>
+
+      <template v-if="diff">
+        <h3>What moves <span class="count">{{ diff.moved.length }}</span></h3>
+        <ul v-if="diff.moved.length" class="moves">
+          <li v-for="m in diff.moved.slice(0, 12)" :key="m.id">
+            <code>{{ m.id }}</code>
+            <span class="title">{{ m.title }}</span>
+            <span class="delta" :class="{ later: m.deltaDays > 0.25, earlier: m.deltaDays < -0.25 }">{{ describeDelta(m.deltaDays) }}</span>
+            <span v-if="m.assigneeBefore !== m.assigneeAfter" class="hands">{{ m.assigneeBefore ?? "—" }} → {{ m.assigneeAfter ?? "—" }}</span>
+          </li>
+          <li v-if="diff.moved.length > 12" class="more">and {{ diff.moved.length - 12 }} more</li>
+        </ul>
+        <p v-else class="hint">No landing moves by more than a quarter day{{ diff.unchanged ? ` (${diff.unchanged} unchanged)` : "" }}.</p>
+
+        <template v-if="diff.added.length">
+          <h3>Ideas land</h3>
+          <ul class="moves">
+            <li v-for="a in diff.added" :key="a.id">
+              <code>{{ a.id }}</code><span class="title">{{ a.title }}</span>
+              <span class="delta">{{ a.land === null ? "not within the window" : `day ${a.land.toFixed(1)}` }}</span>
+              <span class="hands">{{ a.assignee ?? "unrouted" }}</span>
+            </li>
+          </ul>
+        </template>
+
+        <h3>Frontier <span class="count">next {{ diff.frontierDays }} days</span></h3>
+        <table class="frontier">
+          <tbody>
+            <tr v-for="f in diff.frontier" :key="f.handle">
+              <td><code>{{ f.handle }}</code></td>
+              <td class="num">{{ f.before }}</td>
+              <td class="arrow">→</td>
+              <td class="num" :class="{ later: f.after < f.before, earlier: f.after > f.before }">{{ f.after }}</td>
+              <td class="lands">land</td>
+            </tr>
+          </tbody>
+        </table>
+      </template>
+
+      <footer>
+        <button type="button" class="btn subtle" :disabled="!store.whatIf.length || store.whatIfApplying" @click="store.discardWhatIf(); store.whatIfReport = null">discard</button>
+        <span class="spacer" />
+        <button type="button" class="btn" :disabled="!store.whatIf.length || store.whatIfApplying" @click="showCommands = !showCommands">{{ showCommands ? "back" : "confirm…" }}</button>
+      </footer>
+      <div v-if="showCommands && store.whatIf.length" class="commands">
+        <p class="hint">Confirming runs these through bd, one after another, as the quick actions do. Caps and unassigns are not bd facts and are reported instead.</p>
+        <pre>{{ commands.join("\n") }}</pre>
+        <button type="button" class="btn danger" :disabled="store.whatIfApplying" @click="store.confirmWhatIf(); showCommands = false">{{ store.whatIfApplying ? "running…" : `run ${commands.length} command${commands.length === 1 ? "" : "s"}` }}</button>
+      </div>
+    </aside>
+  </Teleport>
+</template>
+
+<style>
+.whatif {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+  z-index: 800;
+  width: min(460px, calc(100vw - 40px));
+  max-height: min(72vh, 640px);
+  overflow: auto;
+  background: var(--c-panel);
+  color: var(--c-text);
+  border: 1px solid var(--c-accent);
+  border-radius: 8px;
+  box-shadow: var(--shadow-pop);
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.whatif header { display: flex; align-items: center; gap: 8px; }
+.whatif h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 600; }
+.whatif h3 { margin: 12px 0 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-dim); }
+.whatif .count { font-weight: 400; color: var(--c-dim); font-size: 11px; margin-left: 6px; text-transform: none; letter-spacing: normal; }
+.whatif .close, .whatif .remove { all: unset; cursor: pointer; color: var(--c-dim); display: inline-flex; padding: 2px; border-radius: 4px; }
+.whatif .close:hover, .whatif .remove:hover { color: var(--c-text); background: var(--c-lift); }
+.whatif .icon { width: 14px; height: 14px; }
+.whatif .lede, .whatif .hint { margin: 4px 0 0; color: var(--c-dim); font-size: 11px; }
+.whatif ul { list-style: none; margin: 6px 0 0; padding: 0; }
+.whatif .changes li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+.whatif .change { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.whatif .moves li { display: grid; grid-template-columns: max-content 1fr max-content max-content; gap: 0 8px; align-items: baseline; padding: 2px 0; }
+.whatif .moves .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-dim); }
+.whatif code { font-family: ui-monospace, monospace; font-size: 11px; color: var(--c-accent); }
+.whatif .delta { font-variant-numeric: tabular-nums; }
+.whatif .delta.later, .whatif .num.later { color: var(--c-danger); }
+.whatif .delta.earlier, .whatif .num.earlier { color: var(--c-shipped); }
+.whatif .hands { font-size: 11px; color: var(--c-dim); }
+.whatif .more { color: var(--c-dim); }
+.whatif .frontier { border-collapse: collapse; margin-top: 4px; }
+.whatif .frontier td { padding: 1px 6px 1px 0; }
+.whatif .frontier .num { text-align: right; font-variant-numeric: tabular-nums; }
+.whatif .frontier .arrow, .whatif .frontier .lands { color: var(--c-dim); }
+.whatif footer { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
+.whatif .spacer { flex: 1; }
+.whatif .btn { all: unset; cursor: pointer; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--c-accent); color: var(--c-bg); display: inline-flex; align-items: center; gap: 4px; }
+.whatif .btn.subtle { background: transparent; color: var(--c-dim); border: 1px solid var(--c-border); font-weight: 400; }
+.whatif .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.whatif .idea { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
+.whatif .idea .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
+.whatif input, .whatif select { font: inherit; padding: 4px 8px; border: 1px solid var(--c-border-strong); border-radius: 4px; background: var(--c-bg); color: var(--c-text); }
+.whatif input[type="text"] { width: 100%; box-sizing: border-box; }
+.whatif .hours input { width: 56px; }
+.whatif .commands pre { margin: 6px 0 0; padding: 8px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; font-size: 11px; white-space: pre-wrap; }
+.whatif .commands .btn { margin-top: 8px; }
+.whatif .btn.danger { background: var(--c-danger); }
+.whatif .report li { display: grid; grid-template-columns: max-content 1fr; gap: 0 8px; padding: 2px 0; }
+.whatif .report .detail { grid-column: 2; font-size: 11px; color: var(--c-dim); }
+.whatif .report .ok .mark { color: var(--c-shipped); }
+.whatif .report .failed .mark { color: var(--c-danger); }
+.whatif .report .report-actions { display: block; padding-top: 4px; }
+</style>