sensorium-mcp 3.1.2 → 3.1.3-board.2

package/dist/board/views/BoardView.js

@@ -0,0 +1,84 @@
+/**
+ * Board / kanban screen — ✅ EDITABLE.
+ *
+ * Dispatch design: transparent swipeable columns (dot + name + count pill),
+ * floating cards, accent "+ New card" pill. All data + actions come from
+ * useBoard() — no fetch here.
+ */
+
+import { computed, inject, onMounted, onUnmounted, ref } from "../vendor/vue.esm-browser.js";
+import { useBoard } from "../state/useBoard.js";
+import Lane from "../components/Lane.js";
+import StateBanner from "../components/StateBanner.js";
+import Dropdown from "../components/Dropdown.js";
+
+const COLUMN_LABELS = {
+  backlog: "Backlog",
+  in_progress: "In progress",
+  decision_needed: "Decision needed",
+  blocked: "Blocked",
+  done: "Done",
+};
+
+export default {
+  name: "BoardView",
+  components: { Lane, StateBanner, Dropdown },
+  setup() {
+    const router = inject("router");
+    const board = useBoard();
+    const laneSel = ref(board.laneFilter.value);
+
+    onMounted(() => board.start());
+    onUnmounted(() => board.stop());
+
+    function open(card) {
+      router.navigate(`/card/${card.cardId}`);
+    }
+    const laneOptions = computed(() => [
+      { value: null, label: "All lanes" },
+      ...board.lanes.value.map((l) => ({ value: l.threadId, label: l.name })),
+    ]);
+    function onLaneChange(v) {
+      laneSel.value = v;
+      board.actions.setLaneFilter(v);
+    }
+    function onArchivedChange(e) {
+      board.actions.setIncludeArchived(e.target.checked);
+    }
+
+    return { router, board, laneSel, laneOptions, open, onLaneChange, onArchivedChange, labels: COLUMN_LABELS };
+  },
+  template: `
+    <section class="board">
+      <div class="board__toolbar">
+        <Dropdown class="dropdown--sm" :model-value="laneSel" :options="laneOptions"
+          placeholder="All lanes" @update:model-value="onLaneChange" />
+        <label class="field field--check">
+          <input type="checkbox" :checked="board.includeArchived.value" @change="onArchivedChange" />
+          <span class="field__label">Archived</span>
+        </label>
+        <button class="btn btn--primary board__new" type="button" @click="router.navigate('/new')">
+          + New card
+        </button>
+      </div>
+
+      <StateBanner
+        :loading="board.loading.value"
+        :error="board.error.value"
+        @retry="board.actions.refresh()"
+      />
+
+      <div class="board__columns" role="list">
+        <Lane
+          v-for="status in board.statuses"
+          :key="status"
+          :title="labels[status] || status"
+          :status="status"
+          :cards="board.byStatus.value[status]"
+          :lane-name="board.laneName"
+          @open="open"
+        />
+      </div>
+    </section>
+  `,
+};

package/dist/board/views/BuilderView.js

@@ -0,0 +1,303 @@
+/**
+ * Card builder — ✅ EDITABLE. Step-by-step wizard (full concept pass).
+ *
+ * Step 1 "What": title / goal / acceptance / priority / type / lane.
+ * Step 2 "How": rendered GENERICALLY from the policy schema — the view knows
+ * only the widget *types* (select / segmented / chips / toggle / phases); every
+ * option list, preset and phase preset lives in the editable data file
+ * schema/policy.js and reaches here through useBuilder() (frozen seam). A
+ * designer tunes the controls by editing that data file, no view change needed.
+ *
+ * Preset picker on top; collapsible read-only "Compiled policy" preview below,
+ * derived live from the schema + current values.
+ *
+ * Only the WHAT fields + type/lane/priority submit through useBuilder(). The HOW
+ * values are local builder state (compiled into the preview); the seam wiring to
+ * persist them is a P1+ extension.
+ */
+
+import { computed, inject, onMounted, reactive, ref } from "../vendor/vue.esm-browser.js";
+import { useBuilder } from "../state/useBuilder.js";
+import StateBanner from "../components/StateBanner.js";
+import Dropdown from "../components/Dropdown.js";
+
+const PRIORITIES = ["Low", "Medium", "High", "Urgent"];
+
+/** Deep-ish clone of a schema default (handles chips arrays + phases pairs). */
+function cloneVal(v) {
+  return Array.isArray(v) ? v.map((x) => (Array.isArray(x) ? [...x] : x)) : v;
+}
+
+export default {
+  name: "BuilderView",
+  components: { StateBanner, Dropdown },
+  setup() {
+    const router = inject("router");
+    const b = useBuilder();
+
+    const step = ref(1);
+    const preset = ref(null);
+    const previewOpen = ref(false);
+    const newPhase = ref("");
+    // HOW values, keyed by schema field. Seeded from schema defaults once the
+    // schema arrives (load() below); reactive so v-model tracks every key.
+    const how = reactive({});
+
+    function seedDefaults() {
+      for (const f of b.policySchema.value) {
+        if (!(f.key in how)) how[f.key] = cloneVal(f.default);
+      }
+    }
+
+    onMounted(async () => {
+      await b.load();
+      seedDefaults();
+    });
+
+    const laneOptions = computed(() =>
+      b.lanes.value.map((l) => ({ value: l.threadId, label: l.name }))
+    );
+
+    function applyPreset(p) {
+      preset.value = p.name;
+      if (p.type) b.draft.type = p.type;
+      for (const f of b.policySchema.value) {
+        const v = p.values && f.key in p.values ? p.values[f.key] : f.default;
+        how[f.key] = cloneVal(v);
+      }
+    }
+
+    // Generic widget handlers — all clear the active preset on edit.
+    function setValue(key, val) {
+      how[key] = val;
+      preset.value = null;
+    }
+    function toggleBool(key) {
+      how[key] = !how[key];
+      preset.value = null;
+    }
+    function toggleChip(key, opt) {
+      const arr = how[key] || (how[key] = []);
+      const i = arr.indexOf(opt);
+      i >= 0 ? arr.splice(i, 1) : arr.push(opt);
+      preset.value = null;
+    }
+    function addPhase(key) {
+      const t = newPhase.value.trim();
+      if (!t) return;
+      (how[key] || (how[key] = [])).push([t, false]);
+      newPhase.value = "";
+      preset.value = null;
+    }
+    function removePhase(key, i) {
+      how[key].splice(i, 1);
+      preset.value = null;
+    }
+    function flipPhaseReview(key, i) {
+      how[key][i][1] = !how[key][i][1];
+      preset.value = null;
+    }
+
+    function formatValue(f, v) {
+      switch (f.widget) {
+        case "chips":
+          return v && v.length ? v.join(", ") : "none";
+        case "toggle":
+          // Schema may supply richer phrasing; fall back to plain on/off.
+          return v ? (f.onText || "on") : (f.offText || "off");
+        case "phases":
+          return v && v.length
+            ? v.map((p, i) => i + 1 + ". " + p[0] + (p[1] ? " (review)" : "")).join("  ")
+            : "single pass";
+        default:
+          return v == null || v === "" ? "—" : String(v);
+      }
+    }
+
+    const compiled = computed(() => {
+      const lines = [
+        ["TASK", b.draft.title || "(untitled)"],
+        ["TYPE", b.draft.type + " · " + (PRIORITIES[b.draft.priority] || "") + " priority"],
+      ];
+      for (const f of b.policySchema.value) {
+        lines.push([f.label.toUpperCase(), formatValue(f, how[f.key])]);
+      }
+      return lines;
+    });
+
+    async function next() {
+      if (step.value === 1) {
+        step.value = 2;
+        return;
+      }
+      const card = await b.submit();
+      if (card) router.navigate(`/card/${card.cardId}`);
+    }
+
+    return {
+      router, b, step, preset, previewOpen, newPhase, how, compiled, PRIORITIES, laneOptions,
+      applyPreset, setValue, toggleBool, toggleChip, addPhase, removePhase, flipPhaseReview, next,
+    };
+  },
+  template: `
+    <section class="builder">
+      <header class="builder__head">
+        <div class="builder__headrow">
+          <div>
+            <h1 class="builder__title">New card</h1>
+            <p class="builder__hint mono-label">STEP {{ step }} OF 2 · {{ step === 1 ? 'WHAT' : 'HOW' }}</p>
+          </div>
+          <div class="builder__dots">
+            <span class="builder__dotstep is-on"></span>
+            <span class="builder__dotstep" :class="{ 'is-on': step === 2 }"></span>
+          </div>
+        </div>
+      </header>
+
+      <StateBanner :error="b.error.value" />
+
+      <div class="presets">
+        <p class="mono-label presets__label">START FROM A PRESET</p>
+        <div class="presets__row">
+          <button
+            v-for="p in b.presets.value"
+            :key="p.name"
+            type="button"
+            class="presets__chip"
+            :class="{ 'is-active': preset === p.name }"
+            @click="applyPreset(p)"
+          >{{ p.name }}</button>
+        </div>
+      </div>
+
+      <form class="form" @submit.prevent="next">
+        <template v-if="step === 1">
+          <label class="field">
+            <span class="field__label">Title *</span>
+            <input class="input" v-model="b.draft.title" placeholder="e.g. Migrate auth to passkeys" />
+          </label>
+
+          <label class="field">
+            <span class="field__label">Goal</span>
+            <textarea class="input input--area" v-model="b.draft.description" rows="3"
+              placeholder="What should the worker achieve?"></textarea>
+          </label>
+
+          <label class="field">
+            <span class="field__label">Acceptance <span class="field__hint">— how we know it's done</span></span>
+            <textarea class="input input--area" v-model="b.draft.acceptance" rows="3"
+              placeholder="All tests pass, no breaking API changes…"></textarea>
+          </label>
+
+          <div class="field">
+            <span class="field__label">Priority</span>
+            <div class="seg" role="radiogroup" aria-label="Priority">
+              <button v-for="(p, i) in PRIORITIES" :key="p" type="button" class="seg__btn"
+                :class="b.draft.priority === i ? 'is-active-' + i : ''"
+                role="radio" :aria-checked="b.draft.priority === i"
+                @click="b.draft.priority = i">{{ p }}</button>
+            </div>
+          </div>
+
+          <div class="form__row">
+            <div class="field">
+              <span class="field__label">Type</span>
+              <Dropdown :model-value="b.draft.type" :options="b.types.value"
+                @update:model-value="v => b.draft.type = v" />
+            </div>
+            <div class="field">
+              <span class="field__label">Lane *</span>
+              <Dropdown :model-value="b.draft.laneThreadId" :options="laneOptions"
+                placeholder="Pick a lane" @update:model-value="v => b.draft.laneThreadId = v" />
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <template v-for="f in b.policySchema.value" :key="f.key">
+            <!-- select -->
+            <div v-if="f.widget === 'select'" class="field">
+              <span class="field__label">{{ f.label }}<span v-if="f.desc" class="field__hint"> — {{ f.desc }}</span></span>
+              <Dropdown :model-value="how[f.key]" :options="f.options"
+                @update:model-value="v => setValue(f.key, v)" />
+            </div>
+
+            <!-- segmented -->
+            <div v-else-if="f.widget === 'segmented'" class="field">
+              <span class="field__label">{{ f.label }}<span v-if="f.desc" class="field__hint"> — {{ f.desc }}</span></span>
+              <div class="seg" role="radiogroup" :aria-label="f.label">
+                <button v-for="o in f.options" :key="o" type="button" class="seg__btn"
+                  :class="{ 'is-selected': how[f.key] === o }"
+                  role="radio" :aria-checked="how[f.key] === o"
+                  @click="setValue(f.key, o)">{{ o }}</button>
+              </div>
+            </div>
+
+            <!-- chips (multi-select) -->
+            <div v-else-if="f.widget === 'chips'" class="field">
+              <span class="field__label">{{ f.label }}<span v-if="f.desc" class="field__hint"> — {{ f.desc }}</span></span>
+              <div class="skillchips">
+                <button v-for="o in f.options" :key="o" type="button" class="skillchips__chip"
+                  :class="{ 'is-on': (how[f.key] || []).includes(o) }"
+                  @click="toggleChip(f.key, o)">{{ (how[f.key] || []).includes(o) ? '✓ ' : '' }}{{ o }}</button>
+              </div>
+            </div>
+
+            <!-- toggle -->
+            <div v-else-if="f.widget === 'toggle'" class="switchlist">
+              <button type="button" class="switchrow" @click="toggleBool(f.key)">
+                <span class="switchrow__text">
+                  <span class="switchrow__label">{{ f.label }}</span>
+                  <span v-if="f.desc" class="switchrow__desc">{{ f.desc }}</span>
+                </span>
+                <span class="switch" :class="{ 'is-on': how[f.key] }"><span class="switch__knob"></span></span>
+              </button>
+            </div>
+
+            <!-- phases (ordered list with per-phase review) -->
+            <div v-else-if="f.widget === 'phases'" class="field">
+              <span class="field__label">{{ f.label }}<span v-if="f.desc" class="field__hint"> — {{ f.desc }}</span></span>
+              <div class="phases">
+                <div v-for="(ph, i) in (how[f.key] || [])" :key="i" class="phases__row">
+                  <span class="phases__num">{{ i + 1 }}</span>
+                  <span class="phases__name">{{ ph[0] }}</span>
+                  <button type="button" class="phases__review" :class="{ 'is-on': ph[1] }"
+                    @click="flipPhaseReview(f.key, i)">{{ ph[1] ? 'REVIEW ✓' : 'REVIEW' }}</button>
+                  <button type="button" class="phases__remove" aria-label="Remove phase" @click="removePhase(f.key, i)">×</button>
+                </div>
+                <div class="phases__add">
+                  <input class="input" v-model="newPhase" placeholder="Add a phase…" @keydown.enter.prevent="addPhase(f.key)" />
+                  <button type="button" class="btn phases__addbtn" @click="addPhase(f.key)">Add</button>
+                </div>
+              </div>
+            </div>
+          </template>
+        </template>
+
+        <div v-if="step === 2" class="preview" :class="{ 'is-open': previewOpen }">
+          <button type="button" class="preview__toggle" @click="previewOpen = !previewOpen">
+            <span class="preview__title">
+              <span class="preview__label">COMPILED POLICY</span>
+              <span class="preview__meta">read-only · live</span>
+            </span>
+            <span class="preview__chevron">{{ previewOpen ? '▲' : '▼' }}</span>
+          </button>
+          <div v-if="previewOpen" class="preview__body">
+            <div v-for="([k, v]) in compiled" :key="k" class="preview__line">
+              <span class="preview__key">{{ k }}</span>
+              <span class="preview__val">{{ v }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="actions builder__actions">
+          <button v-if="step === 2" class="btn" type="button" @click="step = 1">Back</button>
+          <button class="btn btn--primary builder__cta" type="submit" :disabled="b.submitting.value">
+            {{ step === 1 ? 'Next → How' : (b.submitting.value ? 'Creating…' : 'Create card') }}
+          </button>
+          <button class="btn btn--ghost" type="button" @click="router.navigate('/board')">Cancel</button>
+        </div>
+      </form>
+    </section>
+  `,
+};

package/dist/board/views/CardView.js

@@ -0,0 +1,245 @@
+/**
+ * Card detail screen — ✅ EDITABLE.
+ *
+ * Full concept pass (all phases): worker status strip (running/started/elapsed),
+ * Decision-needed block with option buttons, Blocked banner, assistant log panel
+ * (static sample lines — P3 wires real streaming), activity feed. Everything
+ * data-bound flows through useCard(); the log lines and decision options are
+ * static mock UI per the brief.
+ */
+
+import { computed, inject, onMounted, ref } from "../vendor/vue.esm-browser.js";
+import { useCard } from "../state/useCard.js";
+import StatusChip from "../components/StatusChip.js";
+import PriorityChip from "../components/PriorityChip.js";
+import ProfileSummary from "../components/ProfileSummary.js";
+import CommentList from "../components/CommentList.js";
+import CommentComposer from "../components/CommentComposer.js";
+import StateBanner from "../components/StateBanner.js";
+
+/** Static sample assistant log (P3 replaces with real streaming). */
+const SAMPLE_LOG = [
+  { kind: "cmd", text: "$ git checkout -b task/worker-run" },
+  { kind: "info", text: "Reading project files (14 relevant)" },
+  { kind: "info", text: "Drafting plan — 3 phases, tests after each" },
+  { kind: "ok", text: "✓ Phase 1 complete, 34 tests green (8.2s)" },
+  { kind: "cmd", text: "$ npm test --silent" },
+  { kind: "warn", text: "⚠ 2 flaky timing tests — retrying" },
+  { kind: "ok", text: "✓ Retry clean, proceeding to phase 2" },
+  { kind: "info", text: "Instrumenting spawn barrier for repro" },
+];
+
+const DECISION_OPTIONS = [
+  "Go with the recommendation",
+  "Choose the cheaper alternative",
+  "Pause — let's discuss",
+];
+
+export default {
+  name: "CardView",
+  components: {
+    StatusChip,
+    PriorityChip,
+    ProfileSummary,
+    CommentList,
+    CommentComposer,
+    StateBanner,
+  },
+  props: { cardId: { type: Number, required: true } },
+  setup(props) {
+    const router = inject("router");
+    const { card, comments, running, loading, error, load, actions } = useCard(props.cardId);
+    onMounted(load);
+
+    const logOpen = ref(true);
+    const answered = ref(false);
+    const ownAnswer = ref("");
+
+    const showLog = computed(() => {
+      const c = card.value;
+      return c && (c.status === "in_progress" || c.status === "decision_needed" || c.status === "blocked");
+    });
+    const logStatus = computed(() => {
+      const c = card.value;
+      if (!c) return "";
+      if (c.status === "in_progress") return running.value === false ? "IDLE" : "LIVE";
+      if (c.status === "blocked") return "HALTED";
+      return "PAUSED";
+    });
+    const decisionQuestion = computed(() => {
+      const list = comments.value.filter((c) => c.author === "worker");
+      return list.length
+        ? list[list.length - 1].content
+        : "The worker needs an operator decision to continue.";
+    });
+    const workerStrip = computed(() => {
+      const c = card.value;
+      if (!c || !c.startedAt) return null;
+      const start = new Date(c.startedAt);
+      const end = c.finishedAt ? new Date(c.finishedAt) : new Date();
+      const mins = Math.max(0, Math.round((end - start) / 60000));
+      const elapsed = mins >= 60 ? Math.floor(mins / 60) + "h " + (mins % 60) + "m" : mins + "m";
+      return {
+        state:
+          c.status === "in_progress"
+            ? running.value === false
+              ? "idle"
+              : "running"
+            : c.status === "done" && c.finishedAt
+              ? "finished"
+              : "paused",
+        started: start.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+        elapsed,
+        thread: c.workerThreadId,
+      };
+    });
+
+    async function move(status) {
+      await actions.move(status);
+    }
+    async function stop() {
+      await actions.stop();
+    }
+    async function archive() {
+      await actions.archive();
+      router.navigate("/board");
+    }
+    async function remove() {
+      await actions.remove();
+      router.navigate("/board");
+    }
+    async function addComment(text) {
+      await actions.comment(text);
+    }
+    async function answer(label) {
+      answered.value = true;
+      await actions.comment("Decision: " + label);
+    }
+    async function answerOwn() {
+      const t = ownAnswer.value.trim();
+      if (!t) return;
+      answered.value = true;
+      await actions.comment("Decision: " + t);
+    }
+
+    return {
+      router, card, comments, running, loading, error, actions,
+      move, stop, archive, remove, addComment,
+      logOpen, showLog, logStatus, SAMPLE_LOG,
+      decisionQuestion, DECISION_OPTIONS, answer, answered, ownAnswer, answerOwn,
+      workerStrip,
+    };
+  },
+  template: `
+    <section class="card-detail">
+      <div class="card-detail__nav">
+        <button class="btn btn--back" type="button" aria-label="Back to board" @click="router.navigate('/board')">←</button>
+        <span class="card-detail__id">CARD DSP-{{ cardId }}</span>
+      </div>
+
+      <StateBanner :loading="loading" :error="error" @retry="actions.reload()" />
+
+      <template v-if="card">
+        <header class="card-detail__head">
+          <h1 class="card-detail__title">{{ card.title }}</h1>
+          <div class="chips">
+            <PriorityChip :priority="card.priority" />
+            <StatusChip :status="card.status" />
+            <span class="chip chip--muted">{{ card.type }}</span>
+          </div>
+        </header>
+
+        <div v-if="workerStrip" class="worker-strip" :class="'worker-strip--' + workerStrip.state">
+          <span class="worker-strip__state">
+            <span v-if="workerStrip.state === 'running'" class="dot dot--pulse"></span>
+            {{ workerStrip.state }}
+          </span>
+          <span class="worker-strip__item">started {{ workerStrip.started }}</span>
+          <span class="worker-strip__item">elapsed {{ workerStrip.elapsed }}</span>
+          <span v-if="workerStrip.thread" class="worker-strip__item">thread {{ workerStrip.thread }}</span>
+        </div>
+
+        <div v-if="card.status === 'decision_needed'" class="decision">
+          <div class="decision__head">
+            <span class="dot dot--pulse"></span>
+            <span class="decision__label">WORKER NEEDS A DECISION</span>
+          </div>
+          <p class="decision__question">{{ decisionQuestion }}</p>
+          <div class="decision__options">
+            <button
+              v-for="opt in DECISION_OPTIONS"
+              :key="opt"
+              type="button"
+              class="decision__option"
+              :disabled="answered"
+              @click="answer(opt)"
+            >{{ opt }}</button>
+          </div>
+          <div class="decision__own">
+            <input class="input" v-model="ownAnswer" placeholder="Your variant…" :disabled="answered"
+              @keydown.enter.prevent="answerOwn" />
+            <button type="button" class="decision__own-send" :disabled="answered || !ownAnswer.trim()"
+              @click="answerOwn">Send</button>
+          </div>
+          <p v-if="answered" class="decision__sent">Answer sent — worker resuming.</p>
+        </div>
+
+        <div v-if="card.blockedReason" class="notice notice--warn">
+          <span><strong>Waiting on:</strong> {{ card.blockedReason }}</span>
+        </div>
+
+        <div v-if="showLog" class="log">
+          <button type="button" class="log__toggle" @click="logOpen = !logOpen">
+            <span class="log__title">
+              <span class="mono-label">AGENT LOG</span>
+              <span class="log__status" :class="'log__status--' + logStatus.toLowerCase()">
+                <span v-if="logStatus === 'LIVE'" class="dot dot--pulse"></span>{{ logStatus }}
+              </span>
+            </span>
+            <span class="log__chevron">{{ logOpen ? '▲' : '▼' }}</span>
+          </button>
+          <div v-if="logOpen" class="log__body">
+            <p v-for="(ln, i) in SAMPLE_LOG" :key="i" class="log__line" :class="'log__line--' + ln.kind">{{ ln.text }}</p>
+            <p v-if="logStatus === 'LIVE'" class="log__line log__line--cursor">▋</p>
+          </div>
+        </div>
+
+        <section class="section">
+          <h2 class="section__label">Description</h2>
+          <p class="prose">{{ card.description || '—' }}</p>
+        </section>
+
+        <section class="section">
+          <h2 class="section__label">Acceptance</h2>
+          <p class="prose">{{ card.acceptance || '—' }}</p>
+        </section>
+
+        <section class="section">
+          <h2 class="section__label">Execution profile</h2>
+          <ProfileSummary :profile="card.profile" />
+        </section>
+
+        <section class="section section--plain">
+          <h2 class="section__label">Activity</h2>
+          <CommentList :comments="comments" />
+          <CommentComposer @submit="addComment" />
+        </section>
+
+        <div class="card-detail__actions">
+          <button class="btn" type="button" v-if="card.status !== 'backlog'" @click="move('backlog')">
+            Move to Backlog
+          </button>
+          <button class="btn" type="button" v-if="card.status !== 'done'" @click="move('done')">
+            Mark Done
+          </button>
+          <button class="btn btn--danger" type="button" v-if="card.status === 'in_progress'" @click="stop">
+            Stop
+          </button>
+          <span class="card-detail__actions-spacer"></span>
+          <button class="btn" type="button" @click="archive">Archive</button>
+          <button class="btn btn--danger" type="button" @click="remove">Delete</button>
+        </div>
+      </template>
+    </section>
+  `,
+};