sensorium-mcp 3.1.2 → 3.1.3-board.10

package/dist/board/components/Card.js

@@ -0,0 +1,78 @@
+/**
+ * Card tile — ✅ EDITABLE. Pure: `card` + `laneName` in, `open` out.
+ * Dispatch design: floating dark card — title, then chip row with priority,
+ * live worker pulse / blocked / archived. A decision_needed card gets a distinct
+ * badge plus a waiting-age cue so a stalled decision is obvious at a glance.
+ */
+
+import StatusChip from "./StatusChip.js";
+import PriorityChip from "./PriorityChip.js";
+import { proactiveLimitKind, providerLabel, retryLabel } from "./rateLimit.js";
+import { humanMins, minsSince } from "./time.js";
+
+export default {
+  name: "Card",
+  components: { StatusChip, PriorityChip },
+  props: {
+    card: { type: Object, required: true },
+    laneName: { type: Function, default: () => "Ungrouped" },
+    limitedProviders: { type: Array, default: () => [] },
+  },
+  emits: ["open"],
+  setup(props, { emit }) {
+    function elapsed() {
+      if (!props.card.startedAt) return "";
+      return humanMins(minsSince(props.card.startedAt));
+    }
+    function rlText() {
+      const p = providerLabel(props.card.rateLimitProvider);
+      return (p ? p + " · " : "") + retryLabel(props.card);
+    }
+    function proactiveProvider() {
+      return providerLabel(props.card.profile?.agentType);
+    }
+    function proactiveKind() {
+      return proactiveLimitKind(props.card, props.limitedProviders);
+    }
+    /** How long this card has been waiting on the operator. */
+    function waiting() {
+      const c = props.card;
+      if (c.status !== "decision_needed") return null;
+      const mins = minsSince(c.updatedAt || c.finishedAt || c.startedAt || c.createdAt);
+      return { text: humanMins(mins), stale: mins >= 480 };
+    }
+    return { emit, elapsed, proactiveKind, proactiveProvider, rlText, waiting };
+  },
+  template: `
+    <article class="card" role="listitem" tabindex="0"
+      :class="{ 'card--decision': card.status === 'decision_needed' }"
+      @click="emit('open', card)"
+      @keydown.enter="emit('open', card)">
+      <div v-if="waiting()" class="card__decision" :class="{ 'is-stale': waiting().stale }">
+        <span class="card__decision-label">
+          <span class="dot dot--pulse"></span>NEEDS YOU
+        </span>
+        <span class="card__decision-age">waiting {{ waiting().text }}</span>
+      </div>
+      <h3 class="card__title">{{ card.title }}</h3>
+      <p v-if="card.description" class="card__desc">{{ card.description }}</p>
+      <div v-if="card.status === 'rate_limited'" class="card__rl">
+        <svg viewBox="0 0 12 12" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" aria-hidden="true"><circle cx="6" cy="6" r="4.6"></circle><path d="M6 3.6V6l1.8 1.2"></path></svg>
+        <span>rate limited · {{ rlText() }}</span>
+      </div>
+      <div v-if="proactiveKind()" class="card__rl">
+        <StatusChip status="rate_limited" :kind="proactiveKind()" />
+        <span v-if="proactiveProvider()">{{ proactiveProvider() }}</span>
+      </div>
+      <div class="card__foot">
+        <PriorityChip :priority="card.priority" />
+        <span v-if="card.status === 'in_progress'" class="chip chip--live">
+          <span class="dot dot--pulse"></span>working<template v-if="card.startedAt"> · {{ elapsed() }}</template>
+        </span>
+        <span v-else-if="card.blockedReason" class="chip chip--warn">blocked</span>
+        <span v-if="card.archivedAt" class="chip chip--muted">archived</span>
+        <span class="card__lane">{{ laneName(card.laneGroupId) }}</span>
+      </div>
+    </article>
+  `,
+};

package/dist/board/components/Combobox.js

@@ -0,0 +1,79 @@
+/**
+ * Combobox — ✅ EDITABLE. Editable dropdown: free-text input + curated
+ * suggestions (optionally grouped). Pure: modelValue in, update:modelValue out.
+ * `groups`: [{ label|null, options: string[] }] — label null renders flat.
+ * The user may pick a suggestion OR type any value.
+ */
+
+import { computed, onMounted, onUnmounted, ref } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "Combobox",
+  props: {
+    modelValue: { type: String, default: "" },
+    groups: { type: Array, default: () => [] },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const open = ref(false);
+    const rootEl = ref(null);
+    const filtered = computed(() => {
+      const q = (props.modelValue || "").trim().toLowerCase();
+      const out = [];
+      for (const g of props.groups) {
+        const opts = q ? g.options.filter((o) => o.toLowerCase().includes(q)) : g.options;
+        if (opts.length) out.push({ label: g.label || null, options: opts });
+      }
+      return out;
+    });
+    function onInput(e) {
+      emit("update:modelValue", e.target.value);
+      open.value = true;
+    }
+    function pick(o) {
+      emit("update:modelValue", o);
+      open.value = false;
+    }
+    function onDoc(e) {
+      if (rootEl.value && !rootEl.value.contains(e.target)) open.value = false;
+    }
+    function onKey(e) {
+      if (e.key === "Escape") open.value = false;
+    }
+    onMounted(() => {
+      document.addEventListener("click", onDoc, true);
+      document.addEventListener("keydown", onKey);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", onDoc, true);
+      document.removeEventListener("keydown", onKey);
+    });
+    return { open, rootEl, filtered, onInput, pick };
+  },
+  template: `
+    <div class="dropdown combobox" ref="rootEl">
+      <div class="combobox__wrap">
+        <input class="input combobox__input" :value="modelValue" :placeholder="placeholder"
+          role="combobox" :aria-expanded="open" aria-autocomplete="list" :disabled="disabled"
+          @input="onInput" @focus="open = true" />
+        <button type="button" class="combobox__toggle" :class="{ 'is-open': open }" :disabled="disabled"
+          aria-label="Show suggestions" tabindex="-1" @click="open = !open">▾</button>
+      </div>
+      <ul v-if="open && filtered.length" class="dropdown__menu" role="listbox">
+        <template v-for="g in filtered" :key="g.label || '_'">
+          <li v-if="g.label" class="combobox__group" role="presentation">{{ g.label }}</li>
+          <li v-for="o in g.options" :key="o">
+            <button type="button" class="dropdown__opt" role="option"
+              :aria-selected="o === modelValue" :class="{ 'is-selected': o === modelValue }"
+              @click="pick(o)">
+              <span class="dropdown__optlabel">{{ o }}</span>
+              <span v-if="o === modelValue" class="dropdown__check">✓</span>
+            </button>
+          </li>
+        </template>
+      </ul>
+    </div>
+  `,
+};

package/dist/board/components/CommentComposer.js

@@ -0,0 +1,29 @@
+/**
+ * Comment composer — ✅ EDITABLE. Pure: emits `submit(text)`; clears on send.
+ */
+
+import { ref } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "CommentComposer",
+  props: {
+    busy: { type: Boolean, default: false },
+  },
+  emits: ["submit"],
+  setup(props, { emit }) {
+    const text = ref("");
+    function send() {
+      const t = text.value.trim();
+      if (!t) return;
+      emit("submit", t);
+      text.value = "";
+    }
+    return { text, send };
+  },
+  template: `
+    <form class="composer" @submit.prevent="send">
+      <textarea class="input input--area" v-model="text" rows="2" placeholder="Add a comment…"></textarea>
+      <button class="btn btn--primary" type="submit" :disabled="!text.trim() || busy">{{ busy ? 'Sending…' : 'Comment' }}</button>
+    </form>
+  `,
+};

package/dist/board/components/CommentList.js

@@ -0,0 +1,42 @@
+/**
+ * Comment history — ✅ EDITABLE. Pure: `comments` in.
+ * Dispatch design: activity feed — avatar tile + floating bubble per entry.
+ */
+
+const AVATARS = { worker: "⚙", operator: "Y", board: "◆" };
+
+export default {
+  name: "CommentList",
+  props: { comments: { type: Array, default: () => [] } },
+  setup() {
+    function when(iso) {
+      try {
+        return new Date(iso).toLocaleString();
+      } catch {
+        return iso;
+      }
+    }
+    function avatar(author) {
+      return AVATARS[author] || "•";
+    }
+    return { when, avatar };
+  },
+  template: `
+    <ul class="comments">
+      <li v-for="c in comments" :key="c.id" class="comment" :class="'comment--' + c.author">
+        <span class="comment__avatar" aria-hidden="true">{{ avatar(c.author) }}</span>
+        <div class="comment__bubble">
+          <div class="comment__meta">
+            <span class="comment__author">{{ c.author }}</span>
+            <time class="comment__time">{{ when(c.createdAt) }}</time>
+          </div>
+          <p class="comment__body">{{ c.content }}</p>
+        </div>
+      </li>
+      <li v-if="!comments.length" class="comment comment--empty">
+        <span class="comment__empty-title">No activity yet</span>
+        <span class="comment__empty-note">Worker updates, decisions and your notes all land here.</span>
+      </li>
+    </ul>
+  `,
+};

package/dist/board/components/DirTreePicker.js

@@ -0,0 +1,128 @@
+/**
+ * DirTreePicker — ✅ EDITABLE. Modal browser for picking an absolute directory
+ * on the HOST machine (the browser's own dialog only yields a folder name).
+ *
+ * Pure presentational: it never fetches. One filesystem level is loaded at a
+ * time through the async `load(path)` prop (path "" → volume roots), which the
+ * parent wires to the data seam (state/useDirBrowser.js → api.listDir). The
+ * chosen absolute path leaves via `select`.
+ */
+
+import { computed, ref, watch, onMounted, onUnmounted } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "DirTreePicker",
+  props: {
+    open: { type: Boolean, default: false },
+    /** async (path: string) => { path, parent, entries: [{ name, path }] } */
+    load: { type: Function, required: true },
+    value: { type: String, default: "" },
+    recent: { type: Array, default: () => [] },
+  },
+  emits: ["close", "select"],
+  setup(props, { emit }) {
+    // Breadcrumb chain of entered folders ([] = roots view).
+    const stack = ref([]);
+    const items = ref([]); // entries of the current level
+    const loading = ref(false);
+    const error = ref("");
+
+    const current = computed(() => stack.value[stack.value.length - 1] || null);
+
+    // Sequence guard: rapid breadcrumb/row clicks fire overlapping loads; only
+    // the newest may write, so a slow earlier response can't overwrite the level.
+    let loadSeq = 0;
+    async function loadLevel(path) {
+      const seq = ++loadSeq;
+      loading.value = true;
+      error.value = "";
+      try {
+        const listing = await props.load(path || "");
+        if (seq !== loadSeq) return;
+        items.value = (listing && listing.entries) || [];
+      } catch (e) {
+        if (seq !== loadSeq) return;
+        error.value = (e && e.message) || String(e);
+        items.value = [];
+      } finally {
+        if (seq === loadSeq) loading.value = false;
+      }
+    }
+
+    watch(
+      () => props.open,
+      (open) => {
+        if (!open) return;
+        stack.value = []; // always reopen at the roots
+        loadLevel("");
+      },
+    );
+
+    function enter(node) {
+      stack.value = [...stack.value, node];
+      loadLevel(node.path);
+    }
+    function jumpTo(i) {
+      // i = -1 → roots view; i = index in stack → that folder.
+      stack.value = stack.value.slice(0, i + 1);
+      loadLevel(i < 0 ? "" : stack.value[i].path);
+    }
+    function confirm() {
+      if (current.value) emit("select", current.value.path);
+    }
+    function onKey(e) {
+      if (e.key === "Escape" && props.open) emit("close");
+    }
+    onMounted(() => document.addEventListener("keydown", onKey));
+    onUnmounted(() => document.removeEventListener("keydown", onKey));
+
+    return { stack, current, items, loading, error, enter, jumpTo, confirm };
+  },
+  template: `
+    <div v-if="open" class="dtp-overlay" @click.self="$emit('close')">
+      <div class="dtp" role="dialog" aria-modal="true" aria-label="Choose working directory">
+        <header class="dtp__head">
+          <h3 class="dtp__title">Choose working directory</h3>
+          <button type="button" class="btn btn--ghost dtp__close" aria-label="Close" @click="$emit('close')">✕</button>
+        </header>
+
+        <nav class="dtp__crumbs" aria-label="Current location">
+          <button type="button" class="dtp__crumb dtp__crumb--root" :class="{ 'is-here': !current }" @click="jumpTo(-1)">HOST</button>
+          <template v-for="(n, i) in stack" :key="n.path">
+            <span class="dtp__crumbsep" aria-hidden="true">›</span>
+            <button type="button" class="dtp__crumb" :class="{ 'is-here': i === stack.length - 1 }" @click="jumpTo(i)">{{ n.name }}</button>
+          </template>
+        </nav>
+
+        <ul class="dtp__list" role="listbox">
+          <li v-if="loading" class="dtp__empty">Loading…</li>
+          <li v-else-if="error" class="dtp__empty dtp__empty--error">{{ error }}</li>
+          <template v-else>
+            <li v-for="n in items" :key="n.path">
+              <button type="button" class="dtp__row" @click="enter(n)">
+                <svg class="dtp__rowicon" viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1.8 4.5c0-.7.6-1.3 1.3-1.3h3l1.4 1.5h5.4c.7 0 1.3.6 1.3 1.3v6c0 .7-.6 1.3-1.3 1.3H3.1c-.7 0-1.3-.6-1.3-1.3v-7.5z"/></svg>
+                <span class="dtp__rowname">{{ n.name }}</span>
+                <span class="dtp__rowchev" aria-hidden="true">›</span>
+              </button>
+            </li>
+            <li v-if="!items.length" class="dtp__empty">No subfolders</li>
+          </template>
+        </ul>
+
+        <div v-if="recent.length" class="dtp__recent">
+          <span class="dtp__recentlabel mono-label">RECENT</span>
+          <button v-for="p in recent" :key="p" type="button" class="dtp__recentchip"
+            :class="{ 'is-on': value === p }" @click="$emit('select', p)">{{ p }}</button>
+        </div>
+
+        <footer class="dtp__foot">
+          <span class="dtp__path" :class="{ 'is-empty': !current }">{{ current ? current.path : 'Navigate to a folder' }}</span>
+          <div class="dtp__actions">
+            <button type="button" class="btn btn--ghost" @click="$emit('close')">Cancel</button>
+            <button type="button" class="btn btn--primary" :disabled="!current" @click="confirm">Use this folder</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  `,
+};

package/dist/board/components/Dropdown.js

@@ -0,0 +1,67 @@
+/**
+ * Custom dropdown — ✅ EDITABLE. Replaces native <select> (default styles are
+ * not overridable cross-platform). Pure: modelValue in, update:modelValue out.
+ * Options: array of strings or {value,label}.
+ */
+
+import { computed, onMounted, onUnmounted, ref } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "Dropdown",
+  props: {
+    modelValue: { default: null },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: "Select…" },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const open = ref(false);
+    const rootEl = ref(null);
+    const norm = computed(() =>
+      props.options.map((o) => (o && typeof o === "object" ? o : { value: o, label: String(o) }))
+    );
+    const current = computed(() => norm.value.find((o) => o.value === props.modelValue));
+    function pick(o) {
+      emit("update:modelValue", o.value);
+      open.value = false;
+    }
+    function onDoc(e) {
+      if (rootEl.value && !rootEl.value.contains(e.target)) open.value = false;
+    }
+    function onKey(e) {
+      if (e.key === "Escape") open.value = false;
+    }
+    onMounted(() => {
+      document.addEventListener("click", onDoc, true);
+      document.addEventListener("keydown", onKey);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("click", onDoc, true);
+      document.removeEventListener("keydown", onKey);
+    });
+    return { open, rootEl, norm, current, pick };
+  },
+  template: `
+    <div class="dropdown" ref="rootEl">
+      <button type="button" class="dropdown__btn" :class="{ 'is-open': open }" :disabled="disabled"
+        aria-haspopup="listbox" :aria-expanded="open" @click="open = !open">
+        <span class="dropdown__value" :class="{ 'is-placeholder': !current }">
+          {{ current ? current.label : placeholder }}
+        </span>
+        <span class="dropdown__chevron" aria-hidden="true">▾</span>
+      </button>
+      <ul v-if="open" class="dropdown__menu" role="listbox">
+        <li v-for="o in norm" :key="String(o.value)">
+          <button type="button" class="dropdown__opt" role="option"
+            :aria-selected="o.value === modelValue"
+            :class="{ 'is-selected': o.value === modelValue }"
+            @click="pick(o)">
+            <span class="dropdown__optlabel">{{ o.label }}</span>
+            <span v-if="o.value === modelValue" class="dropdown__check">✓</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `,
+};

package/dist/board/components/Lane.js

@@ -0,0 +1,47 @@
+/**
+ * Kanban column — ✅ EDITABLE. Pure: title/status/cards/laneName in, `open` out.
+ * Dispatch design: transparent column, colored status dot + name + count pill.
+ */
+
+import Card from "./Card.js";
+import { computed } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "Lane",
+  components: { Card },
+  props: {
+    title: { type: String, required: true },
+    status: { type: String, required: true },
+    cards: { type: Array, default: () => [] },
+    laneName: { type: Function, default: () => "Ungrouped" },
+    limitedProviders: { type: Array, default: () => [] },
+  },
+  emits: ["open"],
+  setup(props, { emit }) {
+    const rateLimited = computed(() => props.cards.filter((c) => c.status === "rate_limited").length);
+    return { emit, rateLimited };
+  },
+  template: `
+    <section class="lane" :class="'lane--' + status" role="listitem">
+      <header class="lane__head">
+        <span class="lane__dot"></span>
+        <h2 class="lane__title">{{ title }}</h2>
+        <span v-if="rateLimited" class="lane__rl" :title="rateLimited + ' card(s) waiting on a provider rate limit'">
+          <svg viewBox="0 0 12 12" width="10" height="10" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" aria-hidden="true"><circle cx="6" cy="6" r="4.6"></circle><path d="M6 3.6V6l1.8 1.2"></path></svg>{{ rateLimited }}
+        </span>
+        <span class="lane__count">{{ cards.length }}</span>
+      </header>
+      <div class="lane__body">
+        <Card
+          v-for="c in cards"
+          :key="c.cardId"
+          :card="c"
+          :lane-name="laneName"
+          :limited-providers="limitedProviders"
+          @open="emit('open', $event)"
+        />
+        <div v-if="!cards.length" class="lane__empty" aria-hidden="true"></div>
+      </div>
+    </section>
+  `,
+};

package/dist/board/components/PriorityChip.js

@@ -0,0 +1,20 @@
+/**
+ * Priority chip — ✅ EDITABLE. Pure: `priority` (int) in.
+ * Higher int = higher urgency (matches dispatch ORDER BY priority DESC).
+ * Labels are P0–P3 with **P0 = most urgent**, so the label is the INVERSE of the
+ * stored integer: int 3 → P0, int 0 → P3. Label + colour only — the integer and
+ * every sort/filter path stay untouched.
+ */
+
+/** Indexed by the stored integer. */
+const LABELS = ["P3", "P2", "P1", "P0"];
+
+export default {
+  name: "PriorityChip",
+  props: { priority: { type: Number, default: 0 } },
+  setup(props) {
+    const level = () => Math.max(0, Math.min(3, props.priority));
+    return { level, LABELS };
+  },
+  template: `<span class="chip chip--prio" :class="'chip--prio-' + level()">{{ LABELS[level()] }}</span>`,
+};

package/dist/board/components/ProfileSummary.js

@@ -0,0 +1,89 @@
+/**
+ * Execution-plan summary — ✅ EDITABLE. Pure: `profile` in.
+ *
+ * Reads the real seam shape (api/contract.d.ts ExecutionProfile plus the fields
+ * state/useBuilder.js writes: model, autonomy, prDraft, prProvider). Renders the
+ * plan as labelled rows — only rows with data appear, so the panel never invents
+ * a plan the card does not have. Phases are NOT part of ExecutionProfile and are
+ * not persisted anywhere yet, so they are deliberately absent.
+ */
+
+import { computed } from "../vendor/vue.esm-browser.js";
+
+const CI_LABELS = { github: "GitHub Actions", azure: "Azure Pipelines", none: "none" };
+
+/** "on"/"off" flag pills for a group of booleans. */
+function flags(profile, spec) {
+  const out = [];
+  for (const [key, label] of spec) {
+    if (profile[key] === undefined) continue;
+    out.push({ label, on: !!profile[key] });
+  }
+  return out;
+}
+
+export default {
+  name: "ProfileSummary",
+  props: { profile: { type: Object, default: () => ({}) } },
+  setup(props) {
+    const p = computed(() => props.profile || {});
+
+    const agent = computed(() => {
+      const out = [];
+      if (p.value.agentType) out.push(p.value.agentType);
+      if (p.value.model) out.push(p.value.model);
+      return out.join(" · ");
+    });
+
+    const rows = computed(() => {
+      const v = p.value;
+      const list = [];
+      if (agent.value) list.push({ key: "agent", label: "AGENT", text: agent.value, strong: true });
+      if (v.autonomy) list.push({ key: "autonomy", label: "AUTONOMY", text: v.autonomy });
+      if (v.repository) list.push({ key: "repo", label: "REPOSITORY", text: v.repository, mono: true });
+
+      const code = flags(v, [["worktree", "worktree"], ["createBranch", "branch"], ["push", "push"]]);
+      if (code.length) list.push({ key: "code", label: "CODE", flags: code });
+
+      const verify = flags(v, [["runTests", "tests"], ["build", "build"]]);
+      if (v.ciCheck && v.ciCheck !== "none") verify.push({ label: CI_LABELS[v.ciCheck] || v.ciCheck, on: true });
+      if (verify.length) list.push({ key: "verify", label: "VERIFY", flags: verify });
+
+      const review = flags(v, [["expertReview", "expert review"], ["operatorReview", "operator review"]]);
+      if (v.reviewAgentType) review.push({ label: "by " + v.reviewAgentType, on: true });
+      if (review.length) list.push({ key: "review", label: "REVIEW", flags: review });
+
+      if (v.openPr !== undefined) {
+        const pr = [{ label: v.openPr ? "open PR" : "no PR", on: !!v.openPr }];
+        if (v.openPr) {
+          if (v.prDraft !== undefined) pr.push({ label: v.prDraft ? "draft" : "ready for review", on: true });
+          if (v.prProvider) pr.push({ label: v.prProvider, on: true });
+        }
+        list.push({ key: "pr", label: "PULL REQUEST", flags: pr });
+      }
+
+      if (Array.isArray(v.skills) && v.skills.length) {
+        list.push({ key: "skills", label: "SKILLS", flags: v.skills.map((s) => ({ label: s, on: true })) });
+      }
+      return list;
+    });
+
+    return { rows };
+  },
+  template: `
+    <div class="plan">
+      <dl v-if="rows.length" class="plan__rows">
+        <div v-for="r in rows" :key="r.key" class="plan__row">
+          <dt class="plan__label">{{ r.label }}</dt>
+          <dd class="plan__value">
+            <span v-if="r.text" class="plan__text" :class="{ 'plan__text--strong': r.strong, 'plan__text--mono': r.mono }">{{ r.text }}</span>
+            <span v-if="r.flags" class="plan__flags">
+              <span v-for="(f, i) in r.flags" :key="i" class="plan__flag" :class="f.on ? 'is-on' : 'is-off'">{{ f.label }}</span>
+            </span>
+          </dd>
+        </div>
+      </dl>
+      <p v-else class="plan__empty">No execution plan on this card — the worker runs the lane default.</p>
+    </div>
+  `,
+};

package/dist/board/components/StateBanner.js

@@ -0,0 +1,24 @@
+/**
+ * Loading / error banner — ✅ EDITABLE. Pure: `loading`/`error` in, `retry` out.
+ */
+
+export default {
+  name: "StateBanner",
+  props: {
+    loading: { type: Boolean, default: false },
+    error: { type: [String, null], default: null },
+    retryable: { type: Boolean, default: true },
+  },
+  emits: ["retry"],
+  setup(props, { emit }) {
+    return { emit };
+  },
+  template: `
+    <div v-if="error" class="notice notice--error">
+      <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" aria-hidden="true" style="flex:none"><circle cx="8" cy="8" r="6.2"></circle><path d="M8 4.8V8.6M8 11.2v.1"></path></svg>
+      <span class="notice__msg">{{ error }}</span>
+      <button v-if="retryable" class="btn btn--ghost btn--sm" type="button" @click="emit('retry')">Retry</button>
+    </div>
+    <div v-else-if="loading" class="notice notice--info"><span class="spinner" aria-hidden="true"></span>Loading…</div>
+  `,
+};

package/dist/board/components/StatusChip.js

@@ -0,0 +1,26 @@
+/**
+ * Status chip — ✅ EDITABLE. Pure: `status` in.
+ * Dispatch design: tinted pill in the status accent color.
+ */
+
+const LABELS = {
+  backlog: "Backlog",
+  in_progress: "In progress",
+  decision_needed: "Decision needed",
+  blocked: "Blocked",
+  done: "Done",
+  rate_limited: "Rate limited",
+  usage_quota_exceeded: "usage quota exceeded",
+};
+
+export default {
+  name: "StatusChip",
+  props: {
+    status: { type: String, required: true },
+    kind: { type: String, default: "" },
+  },
+  setup(props) {
+    return { LABELS };
+  },
+  template: `<span class="chip chip--status" :class="'chip--status-' + status">{{ LABELS[kind] || LABELS[status] || kind || status }}</span>`,
+};