beadcyte 0.4.0

package/src/web/components/PriorityChip.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// PriorityChip.vue — first-class priority indicator. Priority is one of
+// the most-scanned attributes on a bead, so it gets its own chip with a
+// distinct icon per level, color-coded background, and tight uniform
+// sizing so chips line up cleanly in tooltips + drawers + row labels.
+//
+// Levels:
+//   P0 → flame       (drop everything, red)
+//   P1 → chevrons-up (urgent, orange)
+//   P2 → chevron-up  (normal, amber)
+//   P3 → chevron-down (low, dim blue)
+//   P4 → moon        (deferred / backlog, grey)
+
+import { computed } from "vue";
+import { Flame, ChevronsUp, ChevronUp, ChevronDown, Moon } from "@lucide/vue";
+
+const props = defineProps<{
+  priority: number | null | undefined;
+  /** compact = icon only, no text */
+  compact?: boolean;
+}>();
+
+const level = computed(() => {
+  const p = props.priority ?? 4;
+  if (p < 0) return 0;
+  if (p > 4) return 4;
+  return p;
+});
+
+const icon = computed(() => {
+  switch (level.value) {
+    case 0:
+      return Flame;
+    case 1:
+      return ChevronsUp;
+    case 2:
+      return ChevronUp;
+    case 3:
+      return ChevronDown;
+    case 4:
+      return Moon;
+    default:
+      return ChevronUp;
+  }
+});
+</script>
+
+<template>
+  <span class="prio-chip" :class="`prio-p${level}`" :title="`Priority P${level}`">
+    <component :is="icon" class="icon prio-icon" />
+    <span v-if="!compact" class="prio-text">P{{ level }}</span>
+  </span>
+</template>
+
+<style>
+.prio-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px 2px 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.prio-chip .prio-icon {
+  flex-shrink: 0;
+}
+
+.prio-chip.prio-p0 {
+  background: oklch(from var(--c-today) l c h / 15%);
+  color: var(--c-danger-bright);
+  border-color: oklch(from var(--c-today) l c h / 40%);
+}
+
+.prio-chip.prio-p1 {
+  background: oklch(from var(--c-warning-strong) l c h / 13%);
+  /* warning-strong, not warning-bright: the bright variant sat 0.06 OKLab
+     from P2's --c-warning in dark mode, under the audit floor (bp-jak). */
+  color: var(--c-warning-strong);
+  border-color: oklch(from var(--c-warning-strong) l c h / 35%);
+}
+
+.prio-chip.prio-p2 {
+  background: oklch(from var(--c-warning) l c h / 12%);
+  color: var(--c-warning);
+  border-color: oklch(from var(--c-warning) l c h / 30%);
+}
+
+.prio-chip.prio-p3 {
+  background: oklch(from var(--c-in-progress) l c h / 10%);
+  color: var(--c-in-progress-bright);
+  border-color: oklch(from var(--c-in-progress) l c h / 25%);
+}
+
+.prio-chip.prio-p4 {
+  background: oklch(from var(--c-dim) l c h / 8%);
+  color: var(--c-dim);
+  border-color: oklch(from var(--c-dim) l c h / 25%);
+}
+</style>

package/src/web/components/ScoreStrip.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+// ScoreStrip.vue — the composite triage score placed in its population
+// (bp-67g.28): a percentile line and a 40-bin histogram of the open beads'
+// scores, with quartile ticks and one saturated marker where this bead sits.
+//
+// Presentational. The population comes from the store's lazy getter so the
+// drawer stays the only reader of triage; the bins are --c-dim, the marker
+// is the one accent mark, and nothing here introduces a new semantic colour.
+
+import { computed } from "vue";
+import { describeRank, type ScorePopulation } from "../triage";
+
+const props = defineProps<{
+  population: ScorePopulation;
+  score: number;
+}>();
+
+const rank = computed(() => describeRank(props.population, props.score));
+const maxBin = computed(() => Math.max(1, ...props.population.histogram));
+const span = computed(() => props.population.max - props.population.min || 1);
+const posOf = (v: number) =>
+  Math.min(100, Math.max(0, ((v - props.population.min) / span.value) * 100));
+const fmtPct = (v: number) => `${(v * 100).toFixed(1)}%`;
+</script>
+
+<template>
+  <div class="score-strip" v-if="population.n > 0">
+    <p class="rank">{{ rank }}</p>
+    <div
+      class="strip"
+      role="img"
+      :aria-label="`Distribution of ${population.n} open beads' triage scores from ${fmtPct(population.min)} to ${fmtPct(population.max)}; this bead at ${fmtPct(score)}, ${rank}`"
+    >
+      <div class="bins">
+        <i
+          v-for="(count, i) in population.histogram"
+          :key="i"
+          class="bin"
+          :style="{ height: count ? `${Math.max(6, (count / maxBin) * 100)}%` : '0%' }"
+        />
+      </div>
+      <i class="q" :style="{ left: `${posOf(population.p25)}%` }" />
+      <i class="q is-median" :style="{ left: `${posOf(population.p50)}%` }" />
+      <i class="q" :style="{ left: `${posOf(population.p75)}%` }" />
+      <i class="marker" :style="{ left: `${posOf(score)}%` }" />
+    </div>
+    <div class="axis">
+      <span>{{ fmtPct(population.min) }}</span>
+      <span class="mid">median {{ fmtPct(population.p50) }}</span>
+      <span>{{ fmtPct(population.max) }}</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.score-strip {
+  margin-top: 8px;
+}
+
+.score-strip .rank {
+  margin: 0 0 6px;
+  font-size: 11px;
+  color: var(--c-dim);
+}
+
+.score-strip .strip {
+  position: relative;
+  height: 44px;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.score-strip .bins {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+}
+
+.score-strip .bin {
+  flex: 1 1 0;
+  min-width: 0;
+  background: var(--c-dim);
+  opacity: 0.55;
+  border-radius: 1px 1px 0 0;
+}
+
+/* Quartile ticks read as a distribution's landmarks, not as data. */
+.score-strip .q {
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  width: 1px;
+  background: var(--c-border-strong);
+  transform: translateX(-0.5px);
+}
+
+.score-strip .q.is-median {
+  background: var(--c-dim-bright);
+}
+
+/* The one saturated mark: a line down the strip with a dot at its foot. */
+.score-strip .marker {
+  position: absolute;
+  top: -4px;
+  bottom: -5px;
+  width: 2px;
+  background: var(--c-accent);
+  transform: translateX(-1px);
+}
+
+.score-strip .marker::after {
+  content: "";
+  position: absolute;
+  left: -3px;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--c-accent);
+}
+
+.score-strip .axis {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--c-dim);
+  font-variant-numeric: tabular-nums;
+}
+</style>

package/src/web/components/SearchPalette.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
+import { useBeadsStore } from "../store";
+import { rankBeads } from "../search";
+
+const store = useBeadsStore();
+const isOpen = ref(false);
+const searchQuery = ref("");
+const selectedIndex = ref(0);
+const showPalette = ref(false);
+
+// Search results — ranking lives in ../search.ts so it can be tested
+// without mounting this component.
+const searchResults = computed(() => rankBeads(store.beads, searchQuery.value));
+
+function openPalette() {
+  isOpen.value = true;
+  searchQuery.value = "";
+  selectedIndex.value = 0;
+  showPalette.value = true;
+}
+
+function closePalette() {
+  isOpen.value = false;
+  showPalette.value = false;
+  searchQuery.value = "";
+}
+
+function selectItem(index: number) {
+  if (index >= 0 && index < searchResults.value.length) {
+    const selectedBead = searchResults.value[index].bead;
+    // Open the bead detail drawer instead of just focusing it
+    store.openBead(selectedBead.id);
+    closePalette();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!isOpen.value) return;
+  
+  switch (e.key) {
+    case "Escape":
+      e.preventDefault();
+      closePalette();
+      break;
+    case "ArrowDown":
+      e.preventDefault();
+      selectedIndex.value = Math.min(selectedIndex.value + 1, searchResults.value.length - 1);
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+      break;
+    case "Enter":
+      e.preventDefault();
+      selectItem(selectedIndex.value);
+      break;
+  }
+}
+
+// ⌘K / Ctrl+K and / arrive through keybindings.ts → useKeyboard, which bumps
+// store.searchRequests (bp-67g.45); the palette no longer listens for the
+// chord itself, so the ? overlay is the one list of what opens it.
+watch(() => store.searchRequests, () => openPalette());
+
+// Setup event listeners
+onMounted(() => {
+  document.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+});
+
+// Watch for changes to selected index to make sure it's visible
+watch(selectedIndex, async (newIndex) => {
+  if (newIndex >= 0 && showPalette.value) {
+    await nextTick();
+    const resultElements = document.querySelectorAll('.search-result');
+    if (resultElements[newIndex]) {
+      // Scroll the selected item into view
+      (resultElements[newIndex] as HTMLElement).scrollIntoView({
+        block: 'nearest',
+        behavior: 'smooth'
+      });
+    }
+  }
+});
+
+// Watch for changes to open state to manage focus
+watch(isOpen, (newVal) => {
+  if (newVal) {
+    // Give the search input focus when opening
+    setTimeout(() => {
+      const input = document.querySelector('.search-input') as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    }, 0);
+  }
+});
+</script>
+
+<template>
+  <div v-if="showPalette" class="search-palette-overlay">
+    <div class="search-palette">
+      <input
+        v-model="searchQuery"
+        class="search-input"
+        type="text"
+        placeholder="Search beads by ID or title..."
+        autocomplete="off"
+      />
+      <div class="search-results">
+        <div
+          v-for="(item, index) in searchResults"
+          :key="item.bead.id"
+          class="search-result"
+          :class="{ 'selected': index === selectedIndex }"
+          @click="selectItem(index)"
+        >
+          <div class="result-id">{{ item.bead.id }}</div>
+          <div class="result-title">{{ item.bead.title }}</div>
+        </div>
+        <div v-if="searchQuery && searchResults.length === 0" class="no-results">
+          No matching beads found
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.search-palette-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--c-scrim);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 50px;
+}
+
+.search-palette {
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  width: 500px;
+  max-width: 90vw;
+  box-shadow: var(--shadow-panel);
+}
+
+.search-input {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-bottom: 1px solid var(--c-border);
+  background: var(--c-bg);
+  color: var(--c-text);
+  font-size: 14px;
+}
+
+.search-input:focus {
+  outline: none;
+}
+
+.search-results {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.search-result {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--c-border);
+  display: flex;
+  flex-direction: column;
+}
+
+.search-result:last-child {
+  border-bottom: none;
+}
+
+.search-result:hover,
+.search-result.selected {
+  background: var(--c-accent);
+  color: var(--c-bg);
+}
+
+.result-id {
+  font-family: monospace;
+  font-size: 12px;
+  opacity: 0.8;
+  margin-bottom: 2px;
+}
+
+.result-title {
+  font-size: 14px;
+}
+
+.no-results {
+  padding: 12px;
+  text-align: center;
+  color: var(--c-dim);
+}
+</style>