sensorium-mcp 3.1.2 → 3.1.3-board.2

package/Install-Sensorium.ps1

@@ -41,11 +41,25 @@ $ConfigFile = Join-Path $DataDir "install.config.json"
 $StartupDir = [Environment]::GetFolderPath("Startup")
 $StartupLauncher = Join-Path $StartupDir "SensoriumSupervisor.cmd"
 
+# Isolated MCP runtime: a PRIVATE npm cache + a repo-independent cwd for the MCP,
+# both living under $DataDir (never a dev checkout). This severs the shared-cache /
+# shared-cwd coupling that lets a worker's `npm ci`/build in a dev repo interfere
+# with (and kill) the live MCP — WITHOUT pinning the version, so `npx ...@latest`
+# still auto-updates the MCP on each restart. npx also stages its packages in
+# <cache>/_npx, so a private npm cache isolates npx resolution too.
+$McpRuntimeRoot = Join-Path $DataDir "mcp-runtime"
+$McpRuntimeCache = Join-Path $McpRuntimeRoot "npm-cache"
+
 # ── Config File ──────────────────────────────────────────────────────────────
 $Defaults = @{
     SecureVaultProfile = "SENSORIUM"
     UpdateMode         = "production"
     MCPStartCommand    = "npx -y sensorium-mcp@latest"
+    # Opt-in runtime isolation. When "true", the MCP keeps its `npx ...@latest`
+    # start command (so auto-update still works) but is given its OWN npm cache
+    # ($McpRuntimeCache) and a repo-independent cwd ($McpRuntimeRoot), decoupled
+    # from any dev checkout's shared npm cache / cwd. "false" = legacy behaviour.
+    IsolateMcpRuntime  = "false"
 }
 
 function Load-Config {
@@ -78,6 +92,7 @@ $Config = Load-Config
 $SecureVaultProfile = $Config["SecureVaultProfile"]
 $UpdateMode = $Config["UpdateMode"]
 $EffectiveMCPStartCommand = $Config["MCPStartCommand"]
+$IsolateMcpRuntime = $Config["IsolateMcpRuntime"] -eq "true"
 
 # Resolve the supervisor release channel from the same tag the node server
 # follows: the "@<tag>" in MCPStartCommand. Only @refactor uses the branch
@@ -306,10 +321,44 @@ function Test-SecureVaultAvailable {
     catch { return $false }
 }
 
+function Initialize-IsolatedMcpRuntime {
+    <#
+      Prepares the PRIVATE MCP runtime area: a dedicated npm cache and a
+      repo-independent cwd, both under $McpRuntimeRoot. It does NOT install or pin
+      any package — the MCP keeps its `npx ...@latest` start command so auto-update
+      still works; isolation comes purely from the private cache + cwd handed to the
+      supervisor (and thus to npx) via Start-Supervisor. Idempotent; only creates dirs.
+    #>
+    Write-Host "Isolated MCP runtime enabled — preparing private cache + cwd..." -ForegroundColor Cyan
+    Write-Host "  Runtime cwd : $McpRuntimeRoot"
+    Write-Host "  npm cache   : $McpRuntimeCache (npx stages under $McpRuntimeCache\_npx)"
+
+    try {
+        New-Item -ItemType Directory -Path $McpRuntimeRoot -Force | Out-Null
+        New-Item -ItemType Directory -Path $McpRuntimeCache -Force | Out-Null
+    }
+    catch {
+        Write-Host "[WARN] Could not create isolated runtime dirs: $($_.Exception.Message) — keeping legacy behaviour." -ForegroundColor Yellow
+        return $false
+    }
+    return $true
+}
+
 function Start-Supervisor {
     $env:SUPERVISOR_UPDATE_MODE = $UpdateMode
     $env:MCP_START_COMMAND = $EffectiveMCPStartCommand
 
+    # In isolated mode, hand the supervisor a private npm cache and a repo-independent
+    # cwd. The supervisor inherits its whole environment and passes it to the MCP, so
+    # NPM_CONFIG_CACHE reaches the `npx ...@latest` child automatically (isolating both
+    # the npm cache and npx's <cache>\_npx staging); MCP_WORKING_DIR is consumed by the
+    # supervisor to set the MCP's spawn cwd. The `@latest` command is unchanged, so
+    # auto-update keeps working — only WHERE npx resolves/caches changes.
+    if ($IsolateMcpRuntime) {
+        $env:NPM_CONFIG_CACHE = $McpRuntimeCache
+        $env:MCP_WORKING_DIR = $McpRuntimeRoot
+    }
+
     $useSecureVault = (-not [string]::IsNullOrWhiteSpace($SecureVaultProfile)) -and (Test-SecureVaultAvailable)
 
     if ($useSecureVault) {
@@ -414,6 +463,7 @@ else {
 Write-Host "SecureVault profile: $(if ([string]::IsNullOrWhiteSpace($SecureVaultProfile)) { '<disabled>' } else { $SecureVaultProfile })"
 Write-Host "Watcher mode: $UpdateMode"
 Write-Host "MCP start command: $EffectiveMCPStartCommand"
+Write-Host "MCP runtime isolation: $(if ($IsolateMcpRuntime) { 'ENABLED' } else { 'disabled (legacy npx)' })"
 Write-Host "Binary     : $Binary"
 Write-Host ""
 
@@ -428,6 +478,17 @@ New-Item -ItemType Directory -Path $BinDir -Force | Out-Null
 # Step 3 — fetch release metadata and download only when needed
 Sync-ReleaseBinary
 
+# Step 3b — prepare the isolated MCP runtime area (opt-in): a private npm cache +
+# repo-independent cwd. The `npx ...@latest` command is unchanged (auto-update
+# preserved). On any failure this disables the isolation env in Start-Supervisor,
+# so the install degrades safely to legacy behaviour.
+if ($IsolateMcpRuntime) {
+    if (-not (Initialize-IsolatedMcpRuntime)) {
+        $IsolateMcpRuntime = $false
+        Write-Host "[WARN] Isolation disabled for this run — using the shared npm cache / inherited cwd." -ForegroundColor Yellow
+    }
+}
+
 # Step 4 — install launcher and start
 Install-StartupLauncher
 Start-Supervisor

package/dist/board/api/api.js

@@ -0,0 +1,61 @@
+/**
+ * Data-adapter switch.  ❌ FROZEN SEAM — the ONLY seam is data.
+ *
+ * MODE decides the implementation ONCE, lazily:
+ *   - preview    → mock/api.mock.js is DYNAMICALLY imported (so not a single mock
+ *                  byte is loaded in production).
+ *   - production → api/client.js (real fetch).
+ *
+ * Every method returns a Promise and forwards to the resolved adapter, so callers
+ * (state/ composables) never know or care which one is live.
+ *
+ * @typedef {import('./contract.js').BoardApi} BoardApi
+ */
+
+import { MODE } from "../config.js";
+
+let implPromise = null;
+
+/** @returns {Promise<BoardApi>} */
+function load() {
+  if (!implPromise) {
+    implPromise =
+      MODE === "preview"
+        ? import("../mock/api.mock.js").then((m) => m.mockApi)
+        : import("./client.js").then((m) => m.client);
+  }
+  return implPromise;
+}
+
+const METHODS = [
+  "listCards",
+  "getCard",
+  "createCard",
+  "updateCard",
+  "deleteCard",
+  "stopCard",
+  "addComment",
+  "listLanes",
+  "getProfiles",
+  "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).
+  "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",
+];
+
+/** @type {BoardApi} */
+const api = /** @type {any} */ ({});
+for (const name of METHODS) {
+  api[name] = (...args) => load().then((impl) => impl[name](...args));
+}
+
+export { api };

package/dist/board/api/client.js

@@ -0,0 +1,96 @@
+/**
+ * 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.
+ *
+ * @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
+ * @param {string} path
+ * @param {unknown} [body]
+ */
+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}`, {
+    method,
+    headers,
+    ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+  });
+
+  const text = await res.text();
+  let data = null;
+  if (text) {
+    try {
+      data = JSON.parse(text);
+    } catch {
+      data = { error: text };
+    }
+  }
+  if (!res.ok) {
+    const msg = (data && data.error) || `${res.status} ${res.statusText}`;
+    const err = new Error(msg);
+    err.status = res.status;
+    throw err;
+  }
+  return data;
+}
+
+/** @type {BoardApi} */
+export const client = {
+  listCards({ includeArchived = false, lane } = {}) {
+    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);
+  },
+  getCard(id) {
+    return req("GET", `/api/board/cards/${id}`);
+  },
+  createCard(card) {
+    return req("POST", "/api/board/cards", card).then((d) => d.card);
+  },
+  updateCard(id, patch) {
+    return req("PATCH", `/api/board/cards/${id}`, patch).then((d) => d.card);
+  },
+  deleteCard(id) {
+    return req("DELETE", `/api/board/cards/${id}`).then(() => undefined);
+  },
+  stopCard(id) {
+    return req("POST", `/api/board/cards/${id}/stop`, {}).then((d) => d.card);
+  },
+  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);
+  },
+  getProfiles() {
+    return req("GET", "/api/board/profiles").then((d) => d.profiles);
+  },
+  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).
+  getPolicySchema() {
+    return Promise.reject(new Error("getPolicySchema not implemented — P1"));
+  },
+  getPresets() {
+    return Promise.reject(new Error("getPresets not implemented — P1"));
+  },
+};

package/dist/board/components/BottomNav.js

@@ -0,0 +1,32 @@
+/**
+ * Bottom navigation — ✅ EDITABLE. Pure: `active` in, `navigate` out.
+ * Thumb-reach primary nav (board / new / settings).
+ */
+
+export default {
+  name: "BottomNav",
+  props: { active: { type: String, default: "board" } },
+  emits: ["navigate"],
+  setup(props, { emit }) {
+    const items = [
+      { name: "board", to: "/board", label: "Board", icon: "▦" },
+      { name: "settings", to: "/settings", label: "Settings", icon: "⚙" },
+    ];
+    return { items, emit };
+  },
+  template: `
+    <nav class="bottom-nav">
+      <button
+        v-for="it in items"
+        :key="it.name"
+        type="button"
+        class="bottom-nav__item"
+        :class="{ 'is-active': active === it.name }"
+        @click="emit('navigate', it.to)"
+      >
+        <span class="bottom-nav__icon" aria-hidden="true">{{ it.icon }}</span>
+        <span class="bottom-nav__label">{{ it.label }}</span>
+      </button>
+    </nav>
+  `,
+};

package/dist/board/components/Card.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import StatusChip from "./StatusChip.js";
+import PriorityChip from "./PriorityChip.js";
+
+export default {
+  name: "Card",
+  components: { StatusChip, PriorityChip },
+  props: {
+    card: { type: Object, required: true },
+    laneName: { type: Function, default: (id) => `Thread ${id}` },
+  },
+  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 { emit, elapsed };
+  },
+  template: `
+    <article class="card" role="listitem" tabindex="0"
+      @click="emit('open', card)"
+      @keydown.enter="emit('open', card)">
+      <h3 class="card__title">{{ card.title }}</h3>
+      <p v-if="card.description" class="card__desc">{{ card.description }}</p>
+      <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>
+      </div>
+    </article>
+  `,
+};

package/dist/board/components/CommentComposer.js

@@ -0,0 +1,26 @@
+/**
+ * Comment composer — ✅ EDITABLE. Pure: emits `submit(text)`; clears on send.
+ */
+
+import { ref } from "../vendor/vue.esm-browser.js";
+
+export default {
+  name: "CommentComposer",
+  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()">Comment</button>
+    </form>
+  `,
+};

package/dist/board/components/CommentList.js

@@ -0,0 +1,39 @@
+/**
+ * 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">No comments yet.</li>
+    </ul>
+  `,
+};

package/dist/board/components/Dropdown.js

@@ -0,0 +1,66 @@
+/**
+ * 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…" },
+  },
+  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 }"
+        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,40 @@
+/**
+ * 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";
+
+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: (id) => `Thread ${id}` },
+  },
+  emits: ["open"],
+  setup(props, { emit }) {
+    return { emit };
+  },
+  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 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"
+          @open="emit('open', $event)"
+        />
+        <p v-if="!cards.length" class="lane__empty">Nothing here</p>
+      </div>
+    </section>
+  `,
+};

package/dist/board/components/PriorityChip.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+const LABELS = ["Low", "Medium", "High", "Urgent"];
+
+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,39 @@
+/**
+ * Execution-profile summary — ✅ EDITABLE. Pure: `profile` in.
+ * Renders the set flags as readable chips; nothing set → a muted note.
+ */
+
+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",
+};
+
+export default {
+  name: "ProfileSummary",
+  props: { profile: { type: Object, default: () => ({}) } },
+  setup(props) {
+    const items = computed(() => {
+      const p = props.profile || {};
+      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;
+    });
+    return { items };
+  },
+  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>
+  `,
+};

package/dist/board/components/StateBanner.js

@@ -0,0 +1,22 @@
+/**
+ * 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 },
+  },
+  emits: ["retry"],
+  setup(props, { emit }) {
+    return { emit };
+  },
+  template: `
+    <div v-if="error" class="notice notice--error">
+      <span>{{ error }}</span>
+      <button class="btn btn--ghost btn--sm" type="button" @click="emit('retry')">Retry</button>
+    </div>
+    <div v-else-if="loading" class="notice notice--info">Loading…</div>
+  `,
+};

package/dist/board/components/StatusChip.js

@@ -0,0 +1,21 @@
+/**
+ * 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",
+};
+
+export default {
+  name: "StatusChip",
+  props: { status: { type: String, required: true } },
+  setup(props) {
+    return { LABELS };
+  },
+  template: `<span class="chip chip--status" :class="'chip--status-' + status">{{ LABELS[status] || status }}</span>`,
+};

package/dist/board/components/TokenEntry.js

@@ -0,0 +1,42 @@
+/**
+ * Token-entry gate — ✅ EDITABLE. Shown in production when no token is stored.
+ * Uses useAuth() to persist; no fetch here.
+ */
+
+import { ref } from "../vendor/vue.esm-browser.js";
+import { useAuth } from "../state/auth.js";
+
+export default {
+  name: "TokenEntry",
+  setup() {
+    const auth = useAuth();
+    const value = ref("");
+    function save() {
+      if (value.value.trim()) auth.setToken(value.value.trim());
+    }
+    return { value, save };
+  },
+  template: `
+    <section class="token-gate">
+      <div class="token-gate__card">
+        <div class="token-gate__logo"><span class="app-bar__dot"></span></div>
+        <h1 class="token-gate__title">Dispatch</h1>
+        <p class="token-gate__sub">Enter the board API token to continue.</p>
+        <form @submit.prevent="save">
+          <input
+            class="input"
+            type="password"
+            v-model="value"
+            placeholder="Bearer token"
+            autocomplete="off"
+            autofocus
+          />
+          <button class="btn btn--primary token-gate__btn" type="submit" :disabled="!value.trim()">
+            Continue
+          </button>
+        </form>
+        <p class="token-gate__hint">The token is stored only in this browser.</p>
+      </div>
+    </section>
+  `,
+};