sensorium-mcp 3.1.3-board.6 → 3.1.3-board.7

package/README.md

@@ -5,6 +5,8 @@
 
 MCP server with multi-layer memory, voice analysis, multi-thread orchestration, and Telegram bridge for AI assistants.
 
+Internal TypeScript conventions: [coding guidelines](docs/coding-guidelines.md).
+
 ## Why?
 
 AI assistants forget everything between sessions. Every restart is a blank slate — no memory of your preferences, past decisions, or ongoing projects. Voice messages arrive as opaque audio blobs. And there's no way to talk to your agent when it's running headless in CI or on a remote machine.

package/dist/board/api/api.js

@@ -19,10 +19,11 @@ let implPromise = null;
 /** @returns {Promise<BoardApi>} */
 function load() {
   if (!implPromise) {
-    implPromise =
+    implPromise = (
       MODE === "preview"
         ? import("../mock/api.mock.js").then((m) => m.mockApi)
-        : import("./client.js").then((m) => m.client);
+        : import("./client.js").then((m) => m.client)
+    ).then(assertAdapterComplete);
   }
   return implPromise;
 }
@@ -31,31 +32,53 @@ const METHODS = [
   "listCards",
   "getCard",
   "createCard",
+  "previewBriefing",
   "updateCard",
   "deleteCard",
   "stopCard",
   "addComment",
-  "listLanes",
+  "postDecision",
+  "listLaneGroups",
   "getProfiles",
+  "saveProfile",
   "threadRunning",
-  // Card-builder "How" schema + presets. Preview is served by mock/api.mock.js
-  // (from the editable schema/policy.js). TODO(P1): api/client.js must implement
-  // getPolicySchema()/getPresets() against the real board API before production
-  // uses the schema-driven builder; until then production calls reject and
-  // useBuilder() degrades to a schema-less builder (no crash).
+  "threadLogs",
+  // Card-builder "How" schema + presets.
   "getPolicySchema",
   "getPresets",
-  // Lane management (Settings). Preview served by the mock; TODO(P1): implement
-  // in api/client.js before production exposes lane CRUD.
-  "createLane",
-  "updateLane",
-  "deleteLane",
+  "createLaneGroup",
+  "updateLaneGroup",
+  "deleteLaneGroup",
+  // Working-directory picker: one filesystem level per call (lazy browse).
+  "listDir",
 ];
 
+/**
+ * Fail LOUD if the resolved adapter is missing any METHODS entry. A method listed
+ * in the contract/registry but never implemented in the active adapter used to
+ * surface as a late "undefined is not a function" at call time — exactly how
+ * lane-group CRUD and previewBriefing broke in production
+ * while preview worked. Asserting completeness once, at load, turns that silent
+ * drift into an immediate, named error.
+ *
+ * @param {Partial<BoardApi>} impl
+ * @returns {BoardApi}
+ */
+function assertAdapterComplete(impl) {
+  const missing = METHODS.filter((name) => typeof impl?.[name] !== "function");
+  if (missing.length) {
+    throw new Error(
+      `Board API adapter is missing method(s): ${missing.join(", ")}. ` +
+        `Every METHODS entry must be implemented by the active adapter (api/client.js or mock/api.mock.js).`,
+    );
+  }
+  return /** @type {BoardApi} */ (impl);
+}
+
 /** @type {BoardApi} */
 const api = /** @type {any} */ ({});
 for (const name of METHODS) {
   api[name] = (...args) => load().then((impl) => impl[name](...args));
 }
 
-export { api };
+export { api, assertAdapterComplete };

package/dist/board/api/api.test.ts

@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { assertAdapterComplete } from "./api.js";
+import { client } from "./client.js";
+import type { BoardApi } from "./contract.js";
+
+test("the adapter completeness guard passes for the production client", () => {
+  // Arrange
+  const impl = client;
+
+  // Act & Assert — every contract/registry method is now implemented in client.js.
+  assert.doesNotThrow(() => assertAdapterComplete(impl));
+});
+
+test("the adapter completeness guard throws naming a method missing from the adapter", () => {
+  // Arrange — a client with one contract method dropped (the exact drift that
+  // shipped lane CRUD as a late `undefined is not a function`).
+  const incomplete: Partial<BoardApi> = { ...client };
+  delete incomplete.createLaneGroup;
+
+  // Act & Assert
+  assert.throws(() => assertAdapterComplete(incomplete), /createLaneGroup/);
+});

package/dist/board/api/client.js

@@ -2,15 +2,14 @@
  * Production data adapter.  ❌ FROZEN SEAM.
  *
  * Real `fetch` to the board API. Root-relative `/api/...` paths (never a host or
- * port) so the app works unchanged behind the Cloudflare Tunnel. Bearer token is
- * injected from state/auth.js. This is the ONLY module that talks to the network.
+ * port) so the app works unchanged behind the Dev Tunnel. This is the ONLY module
+ * that talks to the network.
  *
  * @typedef {import('./contract.js').BoardApi}   BoardApi
  * @typedef {import('./contract.js').BoardCard}  BoardCard
  */
 
 import { API_BASE } from "../config.js";
-import { getToken } from "../state/auth.js";
 
 /**
  * @param {string} method
@@ -19,8 +18,6 @@ import { getToken } from "../state/auth.js";
  */
 async function req(method, path, body) {
   const headers = {};
-  const token = getToken();
-  if (token) headers.Authorization = `Bearer ${token}`;
   if (body !== undefined) headers["Content-Type"] = "application/json";
 
   const res = await fetch(`${API_BASE}${path}`, {
@@ -49,12 +46,11 @@ async function req(method, path, body) {
 
 /** @type {BoardApi} */
 export const client = {
-  listCards({ includeArchived = false, lane } = {}) {
+  listCards({ includeArchived = false } = {}) {
     const p = new URLSearchParams();
     if (includeArchived) p.set("includeArchived", "1");
-    if (lane != null) p.set("lane", String(lane));
     const qs = p.toString();
-    return req("GET", `/api/board/cards${qs ? `?${qs}` : ""}`).then((d) => d.cards);
+    return req("GET", `/api/board/cards${qs ? `?${qs}` : ""}`);
   },
   getCard(id) {
     return req("GET", `/api/board/cards/${id}`);
@@ -62,6 +58,9 @@ export const client = {
   createCard(card) {
     return req("POST", "/api/board/cards", card).then((d) => d.card);
   },
+  previewBriefing(draft) {
+    return req("POST", "/api/board/cards/preview", draft).then((d) => d.briefing);
+  },
   updateCard(id, patch) {
     return req("PATCH", `/api/board/cards/${id}`, patch).then((d) => d.card);
   },
@@ -74,23 +73,41 @@ export const client = {
   addComment(id, content) {
     return req("POST", `/api/board/cards/${id}/comments`, { content }).then((d) => d.comment);
   },
-  listLanes() {
-    return req("GET", "/api/board/lanes").then((d) => d.lanes);
+  postDecision(id, answer) {
+    return req("POST", `/api/board/cards/${id}/decision`, { answer }).then((d) => d.card);
+  },
+  listLaneGroups() {
+    return req("GET", "/api/board/lane-groups").then((d) => d.laneGroups);
+  },
+  createLaneGroup(name) {
+    return req("POST", "/api/board/lane-groups", { name }).then((d) => d.laneGroup);
+  },
+  updateLaneGroup(id, patch) {
+    return req("PATCH", `/api/board/lane-groups/${id}`, patch).then((d) => d.laneGroup);
+  },
+  deleteLaneGroup(id) {
+    return req("DELETE", `/api/board/lane-groups/${id}`).then(() => undefined);
   },
   getProfiles() {
     return req("GET", "/api/board/profiles").then((d) => d.profiles);
   },
+  saveProfile(input) {
+    return req("POST", "/api/board/profiles", input).then((d) => d.profile);
+  },
   threadRunning(threadId) {
     return req("GET", `/api/threads/${threadId}/running`).then((d) => !!d.running);
   },
-  // TODO(P1): serve the card-builder "How" schema/presets from the real board
-  // API (e.g. GET /api/board/policy). Until then these reject explicitly so the
-  // production failure is legible; useBuilder() swallows the rejection and falls
-  // back to a schema-less builder (no crash).
+  threadLogs(threadId, { view = "assistant", offset = 0, limit = 4000 } = {}) {
+    const params = new URLSearchParams({ view, offset: String(offset), limit: String(limit) });
+    return req("GET", `/api/threads/${threadId}/logs?${params}`);
+  },
   getPolicySchema() {
-    return Promise.reject(new Error("getPolicySchema not implemented — P1"));
+    return req("GET", "/api/board/policy").then((d) => d.schema);
   },
   getPresets() {
-    return Promise.reject(new Error("getPresets not implemented — P1"));
+    return req("GET", "/api/board/policy").then((d) => d.presets);
+  },
+  listDir(path) {
+    return req("GET", `/api/board/dir-listing?path=${encodeURIComponent(path || "")}`);
   },
 };

package/dist/board/components/Card.js

@@ -1,52 +1,77 @@
 /**
  * Card tile — ✅ EDITABLE. Pure: `card` + `laneName` in, `open` out.
  * Dispatch design: floating dark card — title, then chip row with priority,
- * type, live worker pulse / blocked / archived.
+ * 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 { providerLabel, retryLabel } from "./rateLimit.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: (id) => `Thread ${id}` },
+    laneName: { type: Function, default: () => "Ungrouped" },
+    limitedProviders: { type: Array, default: () => [] },
   },
   emits: ["open"],
   setup(props, { emit }) {
     function elapsed() {
       if (!props.card.startedAt) return "";
-      const mins = Math.max(0, Math.round((Date.now() - new Date(props.card.startedAt)) / 60000));
-      return mins >= 60 ? Math.floor(mins / 60) + "h " + (mins % 60) + "m" : mins + "m";
+      return humanMins(minsSince(props.card.startedAt));
     }
     function rlText() {
-      const p = providerLabel(props.card);
+      const p = providerLabel(props.card.rateLimitProvider);
       return (p ? p + " · " : "") + retryLabel(props.card);
     }
-    return { emit, elapsed, rlText };
+    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 class="chip chip--muted">{{ card.type }}</span>
         <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.laneThreadId) }}</span>
+        <span class="card__lane">{{ laneName(card.laneGroupId) }}</span>
       </div>
     </article>
   `,

package/dist/board/components/Combobox.js

@@ -13,6 +13,7 @@ export default {
     modelValue: { type: String, default: "" },
     groups: { type: Array, default: () => [] },
     placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
@@ -55,9 +56,9 @@ export default {
     <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"
+          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 }"
+        <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">

package/dist/board/components/CommentList.js

@@ -33,7 +33,10 @@ export default {
           <p class="comment__body">{{ c.content }}</p>
         </div>
       </li>
-      <li v-if="!comments.length" class="comment comment--empty">No comments yet.</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

@@ -12,6 +12,7 @@ export default {
     modelValue: { default: null },
     options: { type: Array, default: () => [] },
     placeholder: { type: String, default: "Select…" },
+    disabled: { type: Boolean, default: false },
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
@@ -43,7 +44,7 @@ export default {
   },
   template: `
     <div class="dropdown" ref="rootEl">
-      <button type="button" class="dropdown__btn" :class="{ 'is-open': open }"
+      <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 }}

package/dist/board/components/Lane.js

@@ -13,7 +13,8 @@ export default {
     title: { type: String, required: true },
     status: { type: String, required: true },
     cards: { type: Array, default: () => [] },
-    laneName: { type: Function, default: (id) => `Thread ${id}` },
+    laneName: { type: Function, default: () => "Ungrouped" },
+    limitedProviders: { type: Array, default: () => [] },
   },
   emits: ["open"],
   setup(props, { emit }) {
@@ -36,9 +37,10 @@ export default {
           :key="c.cardId"
           :card="c"
           :lane-name="laneName"
+          :limited-providers="limitedProviders"
           @open="emit('open', $event)"
         />
-        <p v-if="!cards.length" class="lane__empty">Nothing here</p>
+        <div v-if="!cards.length" class="lane__empty" aria-hidden="true"></div>
       </div>
     </section>
   `,

package/dist/board/components/PriorityChip.js

@@ -1,10 +1,13 @@
 /**
  * Priority chip — ✅ EDITABLE. Pure: `priority` (int) in.
  * Higher int = higher urgency (matches dispatch ORDER BY priority DESC).
- * Dispatch design: tinted pill — Low / Medium / High / Urgent.
+ * 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.
  */
 
-const LABELS = ["Low", "Medium", "High", "Urgent"];
+/** Indexed by the stored integer. */
+const LABELS = ["P3", "P2", "P1", "P0"];
 
 export default {
   name: "PriorityChip",

package/dist/board/components/ProfileSummary.js

@@ -1,39 +1,89 @@
 /**
- * Execution-profile summary — ✅ EDITABLE. Pure: `profile` in.
- * Renders the set flags as readable chips; nothing set → a muted note.
+ * 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 FLAG_LABELS = {
-  createBranch: "branch",
-  runTests: "tests",
-  build: "build",
-  openPr: "PR",
-  push: "push",
-  expertReview: "expert review",
-  operatorReview: "operator review",
-};
+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 items = computed(() => {
-      const p = props.profile || {};
+    const p = computed(() => props.profile || {});
+
+    const agent = computed(() => {
       const out = [];
-      if (p.agentType) out.push(p.agentType);
-      for (const [k, label] of Object.entries(FLAG_LABELS)) if (p[k]) out.push(label);
-      if (p.ciCheck && p.ciCheck !== "none") out.push("ci:" + p.ciCheck);
-      if (Array.isArray(p.skills) && p.skills.length) out.push(p.skills.length + " skill(s)");
-      return out;
+      if (p.value.agentType) out.push(p.value.agentType);
+      if (p.value.model) out.push(p.value.model);
+      return out.join(" · ");
     });
-    return { items };
+
+    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="profile">
-      <span v-for="(it, i) in items" :key="i" class="chip chip--live">{{ it }}</span>
-      <span v-if="!items.length" class="profile__empty">Default profile (no flags set).</span>
+    <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>
   `,
 };