iikit-dashboard 1.0.0 → 1.1.0

package/README.md

@@ -2,27 +2,21 @@
 
 **Watch your AI agent develop features in real time.**
 
-A browser-based dashboard for [Intent Integrity Kit](https://github.com/intent-integrity-chain/kit) projects. Visualizes every phase of the IIKit workflow — from constitution principles through specification, planning, and implementation — with live updates as artifacts change on disk.
+A browser-based dashboard for [Intent Integrity Kit (IIKit)](https://github.com/intent-integrity-chain/kit) projects. IIKit is a specification-driven development framework that guides AI agents through a structured workflow — from governance constitution through specification, clarification, planning, testing, and implementation. The dashboard visualizes every phase of that workflow with live updates as artifacts change on disk.
 
 ## Usage
 
-```bash
-# Run in your IIKit project directory
-npx iikit-dashboard
-
-# Or specify a project path
-npx iikit-dashboard /path/to/your/project
-```
-
-The dashboard opens at `http://localhost:3000`.
+The dashboard launches automatically early in the IIKit workflow — no manual setup needed.
 
-## Setup
+You can also start it standalone to browse historical data for any project that has feature specs:
 
 ```bash
-npm install
-tessl install   # installs tile dependencies (like npm install for tiles)
+npx iikit-dashboard              # current directory
+npx iikit-dashboard /path/to/project   # specific project
 ```
 
+The dashboard opens at `http://localhost:3000`.
+
 ## Views
 
 The pipeline bar at the top shows all nine IIKit workflow phases. Click any phase to see its visualization:
@@ -33,7 +27,7 @@ The pipeline bar at the top shows all nine IIKit workflow phases. Click any phas
 | **Spec** | Story map with swim lanes by priority + interactive requirements graph (US / FR / SC nodes and edges) |
 | **Clarify** | Q&A trail from clarification sessions, with clickable spec-item references that navigate back to the Spec view |
 | **Plan** | Tech stack badge wall, interactive file-structure tree (existing vs. planned files), rendered architecture diagram, and Tessl tile cards |
-| **Checklist** | *Coming soon* |
+| **Checklist** | Progress rings per checklist file with color coding (red/yellow/green), gate traffic light (OPEN/BLOCKED), and accordion detail view with CHK IDs and tag badges |
 | **Testify** | *Coming soon* |
 | **Tasks** | *Coming soon* |
 | **Analyze** | *Coming soon* |
@@ -58,19 +52,16 @@ The server reads directly from your project's `specs/` directory:
 | `spec.md` | User stories, requirements, success criteria, and clarification Q&A |
 | `plan.md` | Tech stack, file structure, and architecture diagram |
 | `tasks.md` | Task checkboxes grouped by `[US1]`, `[US2]` tags |
+| `checklists/*.md` | Checklist items with completion status, CHK IDs, and category groupings |
 | `CONSTITUTION.md` | Governance principles and obligation levels |
 | `tessl.json` | Installed Tessl tiles for the dependency panel |
 
 A file watcher (chokidar) detects changes and pushes updates to the browser via WebSocket with 300 ms debounce.
 
-## Integration with IIKit
-
-When you run `/iikit-08-implement`, the implement skill automatically launches the dashboard in the background. No manual setup needed.
-
 ## Requirements
 
 - Node.js 18+
-- An IIKit project with a `specs/` directory
+- A project with a `specs/` directory containing IIKit feature artifacts
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iikit-dashboard",
-  "version": "1.0.0",
-  "description": "IIKit Dashboard — real-time visualization for Intent Integrity Kit projects",
+  "version": "1.1.0",
+  "description": "Real-time dashboard for Intent Integrity Kit (IIKit) — visualizes every phase of specification-driven AI development",
   "main": "src/server.js",
   "bin": {
     "iikit-dashboard": "bin/iikit-dashboard.js"

package/src/checklist.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const path = require('path');
+const { parseChecklistsDetailed } = require('./parser');
+
+/**
+ * Map a percentage (0-100) to a color bracket.
+ * @param {number} percentage
+ * @returns {string} "red" | "yellow" | "green"
+ */
+function percentageToColor(percentage) {
+  if (percentage <= 33) return 'red';
+  if (percentage <= 66) return 'yellow';
+  return 'green';
+}
+
+/**
+ * Compute gate status from an array of file objects with percentage fields.
+ * Uses worst-case precedence: red if any at 0%, yellow if all 1-99%, green if all 100%.
+ *
+ * @param {Array<{percentage: number}>} files
+ * @returns {{status: string, level: string, label: string}}
+ */
+function computeGateStatus(files) {
+  if (files.length === 0) {
+    return { status: 'blocked', level: 'red', label: 'GATE: BLOCKED' };
+  }
+
+  const anyAtZero = files.some(f => f.percentage === 0);
+  if (anyAtZero) {
+    return { status: 'blocked', level: 'red', label: 'GATE: BLOCKED' };
+  }
+
+  const allComplete = files.every(f => f.percentage === 100);
+  if (allComplete) {
+    return { status: 'open', level: 'green', label: 'GATE: OPEN' };
+  }
+
+  return { status: 'blocked', level: 'yellow', label: 'GATE: BLOCKED' };
+}
+
+/**
+ * Compute checklist view state for a feature.
+ * Returns per-file detail with items, percentage, color, and aggregate gate status.
+ *
+ * @param {string} projectPath - Path to the project root
+ * @param {string} featureId - Feature directory name (e.g., "001-kanban-board")
+ * @returns {{files: Array, gate: {status: string, level: string, label: string}}}
+ */
+function computeChecklistViewState(projectPath, featureId) {
+  const checklistDir = path.join(projectPath, 'specs', featureId, 'checklists');
+  const parsed = parseChecklistsDetailed(checklistDir);
+
+  const files = parsed.map(file => {
+    const percentage = file.total > 0 ? Math.round((file.checked / file.total) * 100) : 0;
+    return {
+      ...file,
+      percentage,
+      color: percentageToColor(percentage)
+    };
+  });
+
+  const gate = computeGateStatus(files);
+
+  return { files, gate };
+}
+
+module.exports = { computeChecklistViewState };

package/src/parser.js

@@ -115,6 +115,96 @@ function parseChecklists(checklistDir) {
   return result;
 }
 
+/**
+ * Parse all checklist files in a directory and return detailed per-file data
+ * with individual items, categories, CHK IDs, and tags.
+ *
+ * Applies same requirements.md-only filter as parseChecklists:
+ * if requirements.md is the only file, returns empty array.
+ *
+ * @param {string} checklistDir - Path to checklists/ directory
+ * @returns {Array<{name: string, filename: string, total: number, checked: number, items: Array}>}
+ */
+function parseChecklistsDetailed(checklistDir) {
+  if (!fs.existsSync(checklistDir)) return [];
+
+  const files = fs.readdirSync(checklistDir).filter(f => f.endsWith('.md'));
+
+  // Same filter as parseChecklists: skip if requirements.md is the only file
+  const hasDomainChecklists = files.some(f => f !== 'requirements.md');
+  if (!hasDomainChecklists) return [];
+
+  const result = [];
+
+  for (const file of files) {
+    const content = fs.readFileSync(path.join(checklistDir, file), 'utf-8');
+    const lines = content.split('\n');
+
+    // Derive human-readable name from filename
+    const baseName = file.replace(/\.md$/, '');
+    const name = baseName.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+
+    const items = [];
+    let currentCategory = null;
+    let totalCount = 0;
+    let checkedCount = 0;
+
+    for (const line of lines) {
+      // Track category headings (## or ###)
+      const headingMatch = line.match(/^#{2,3}\s+(.+)/);
+      if (headingMatch) {
+        currentCategory = headingMatch[1].trim();
+        continue;
+      }
+
+      // Parse checkbox items
+      const checkboxMatch = line.match(/^- \[([ x])\]\s+(.*)/i);
+      if (!checkboxMatch) continue;
+
+      const isChecked = checkboxMatch[1].toLowerCase() === 'x';
+      let itemText = checkboxMatch[2].trim();
+      totalCount++;
+      if (isChecked) checkedCount++;
+
+      // Extract CHK-xxx ID
+      let chkId = null;
+      const chkMatch = itemText.match(/^(CHK-\d{3})\s+/);
+      if (chkMatch) {
+        chkId = chkMatch[1];
+        itemText = itemText.substring(chkMatch[0].length);
+      }
+
+      // Extract trailing tags [tag1] [tag2] — but not the checkbox itself
+      const tags = [];
+      const tagRegex = /\[([^\]]+)\]\s*$/;
+      let tagMatch;
+      while ((tagMatch = itemText.match(tagRegex))) {
+        // Don't treat spec references like [Completeness, FR-004] as simple tags
+        tags.unshift(tagMatch[1]);
+        itemText = itemText.substring(0, tagMatch.index).trim();
+      }
+
+      items.push({
+        text: itemText,
+        checked: isChecked,
+        chkId,
+        category: currentCategory,
+        tags
+      });
+    }
+
+    result.push({
+      name,
+      filename: file,
+      total: totalCount,
+      checked: checkedCount,
+      items
+    });
+  }
+
+  return result;
+}
+
 /**
  * Parse CONSTITUTION.md to determine if TDD is required.
  * Looks for strong TDD indicators combined with MUST/NON-NEGOTIABLE.
@@ -765,4 +855,4 @@ function parseResearchDecisions(content) {
   return decisions;
 }
 
-module.exports = { parseSpecStories, parseTasks, parseChecklists, parseConstitutionTDD, hasClarifications, parseConstitutionPrinciples, parseRequirements, parseSuccessCriteria, parseClarifications, parseStoryRequirementRefs, parseTechContext, parseFileStructure, parseAsciiDiagram, parseTesslJson, parseResearchDecisions };
+module.exports = { parseSpecStories, parseTasks, parseChecklists, parseChecklistsDetailed, parseConstitutionTDD, hasClarifications, parseConstitutionPrinciples, parseRequirements, parseSuccessCriteria, parseClarifications, parseStoryRequirementRefs, parseTechContext, parseFileStructure, parseAsciiDiagram, parseTesslJson, parseResearchDecisions };

package/src/public/index.html

@@ -854,6 +854,234 @@
       max-width: 360px;
     }
 
+    /* ====== Checklist Quality Gates Tab ====== */
+    .checklist-view {
+      padding: 24px 28px;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .gate-indicator {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 20px;
+      border-radius: var(--radius-lg);
+      background: var(--color-surface-elevated);
+      border: 1px solid var(--color-border);
+      margin-bottom: 28px;
+    }
+
+    .gate-dot {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      transition: background-color 0.4s ease;
+    }
+
+    .gate-dot.green { background-color: var(--color-green, #22c55e); }
+    .gate-dot.yellow { background-color: var(--color-yellow, #eab308); }
+    .gate-dot.red { background-color: var(--color-red, #ef4444); }
+
+    .gate-label {
+      font-size: 15px;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+    }
+
+    .gate-label.open { color: var(--color-green, #22c55e); }
+    .gate-label.blocked-yellow { color: var(--color-yellow, #eab308); }
+    .gate-label.blocked-red { color: var(--color-red, #ef4444); }
+
+    .checklist-rings {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 24px;
+      justify-content: center;
+      margin-bottom: 24px;
+    }
+
+    .checklist-ring-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      padding: 12px;
+      border-radius: var(--radius-lg);
+      transition: background-color 0.15s ease;
+      border: 2px solid transparent;
+    }
+
+    .checklist-ring-wrapper:hover {
+      background: var(--color-surface-elevated);
+    }
+
+    .checklist-ring-wrapper:focus-visible {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+
+    .checklist-ring-wrapper.expanded {
+      border-color: var(--color-primary);
+      background: var(--color-surface-elevated);
+    }
+
+    .checklist-ring-svg {
+      width: 100px;
+      height: 100px;
+    }
+
+    .checklist-ring-track {
+      fill: none;
+      stroke: var(--color-border);
+      stroke-width: 8;
+    }
+
+    .checklist-ring-fill {
+      fill: none;
+      stroke-width: 8;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
+      transform: rotate(-90deg);
+      transform-origin: 50% 50%;
+    }
+
+    .checklist-ring-fill.red { stroke: var(--color-red, #ef4444); }
+    .checklist-ring-fill.yellow { stroke: var(--color-yellow, #eab308); }
+    .checklist-ring-fill.green { stroke: var(--color-green, #22c55e); }
+
+    .checklist-ring-pct {
+      font-size: 18px;
+      font-weight: 700;
+      fill: var(--color-text);
+      text-anchor: middle;
+      dominant-baseline: central;
+    }
+
+    .checklist-ring-name {
+      margin-top: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text);
+      text-align: center;
+    }
+
+    .checklist-ring-fraction {
+      font-size: 12px;
+      color: var(--color-text-muted);
+    }
+
+    .checklist-detail {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s ease, opacity 0.15s ease;
+      border-radius: var(--radius-lg);
+      background: var(--color-surface-elevated);
+      border: 1px solid transparent;
+      margin-bottom: 0;
+      opacity: 0;
+    }
+
+    .checklist-detail.open {
+      max-height: 2000px;
+      border-color: var(--color-border);
+      margin-bottom: 16px;
+      opacity: 1;
+    }
+
+    .checklist-detail-inner {
+      padding: 16px 20px;
+    }
+
+    .checklist-category {
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-muted);
+      margin: 16px 0 8px;
+      padding-bottom: 4px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .checklist-category:first-child {
+      margin-top: 0;
+    }
+
+    .checklist-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 6px 0;
+      font-size: 13px;
+      color: var(--color-text);
+      line-height: 1.4;
+    }
+
+    .checklist-item-icon {
+      flex-shrink: 0;
+      width: 18px;
+      font-size: 14px;
+    }
+
+    .checklist-item-icon.checked { color: var(--color-green, #22c55e); }
+    .checklist-item-icon.unchecked { color: var(--color-text-muted); }
+
+    .checklist-item-id {
+      font-family: var(--font-mono, monospace);
+      font-size: 11px;
+      color: var(--color-text-muted);
+      background: var(--color-surface);
+      padding: 1px 5px;
+      border-radius: var(--radius-sm, 4px);
+      flex-shrink: 0;
+    }
+
+    .checklist-item-tag {
+      font-size: 10px;
+      font-weight: 600;
+      padding: 1px 6px;
+      border-radius: 9999px;
+      background: var(--color-primary-muted, rgba(99, 102, 241, 0.15));
+      color: var(--color-primary, #6366f1);
+      flex-shrink: 0;
+    }
+
+    .checklist-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 80px 20px;
+      text-align: center;
+    }
+
+    .checklist-empty-icon {
+      width: 56px;
+      height: 56px;
+      background: var(--color-surface-elevated);
+      border-radius: var(--radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      margin-bottom: 16px;
+    }
+
+    .checklist-empty-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 6px;
+    }
+
+    .checklist-empty-text {
+      font-size: 13px;
+      color: var(--color-text-muted);
+      max-width: 360px;
+    }
+
     /* ====== Spec Story Map Tab ====== */
     .storymap-view {
       padding: 24px 28px;
@@ -1707,6 +1935,8 @@
       let currentFeature = null;
       let currentBoard = null;
       let currentPipeline = null;
+      let currentChecklist = null;
+      let expandedChecklist = null;
       let activeTab = null;
       let ws = null;
       let reconnectTimer = null;
@@ -1783,6 +2013,8 @@
           renderPlanView();
         } else if (phaseId === 'clarify') {
           renderClarifyView();
+        } else if (phaseId === 'checklist') {
+          renderChecklistView();
         } else {
           renderPlaceholderView(phaseId);
         }
@@ -1814,6 +2046,150 @@
           </div>`;
       }
 
+      // ====== Checklist Quality Gates View ======
+
+      async function renderChecklistView() {
+        if (!currentFeature) return;
+
+        try {
+          const res = await fetch(`/api/checklist/${currentFeature}`);
+          if (!res.ok) throw new Error('Failed to load');
+          currentChecklist = await res.json();
+          expandedChecklist = null;
+          renderChecklistContent(currentChecklist);
+        } catch {
+          contentArea.innerHTML = '<div class="checklist-empty"><div class="checklist-empty-title">Failed to load checklist data.</div></div>';
+        }
+      }
+
+      function renderChecklistContent(data) {
+        if (!data) return;
+
+        // Empty state
+        if (!data.files || data.files.length === 0) {
+          contentArea.innerHTML = `
+            <div class="checklist-empty">
+              <div class="checklist-empty-icon">&#9744;</div>
+              <div class="checklist-empty-title">No checklists generated for this feature</div>
+              <div class="checklist-empty-text">Run <code>/iikit-04-checklist</code> to generate domain-specific quality checklists for requirements validation.</div>
+            </div>`;
+          return;
+        }
+
+        const CIRCUMFERENCE = 2 * Math.PI * 42; // radius=42 for viewBox 100x100
+
+        let html = '<div class="checklist-view">';
+
+        // Gate indicator
+        html += renderGateIndicator(data.gate);
+
+        // Progress rings
+        html += '<div class="checklist-rings">';
+        data.files.forEach((file) => {
+          const isExpanded = expandedChecklist === file.filename;
+          const offset = CIRCUMFERENCE - (file.percentage / 100) * CIRCUMFERENCE;
+
+          html += `<div class="checklist-ring-wrapper${isExpanded ? ' expanded' : ''}"
+            tabindex="0" role="button"
+            aria-expanded="${isExpanded}"
+            aria-controls="checklist-detail-${escapeHtml(file.filename)}"
+            aria-label="${escapeHtml(file.name)}: ${file.checked} of ${file.total} items complete, ${file.percentage}%"
+            data-filename="${escapeHtml(file.filename)}">
+            <svg class="checklist-ring-svg" viewBox="0 0 100 100" role="img"
+              aria-label="${escapeHtml(file.name)}: ${file.checked} of ${file.total} items complete, ${file.percentage}%">
+              <circle class="checklist-ring-track" cx="50" cy="50" r="42" />
+              <circle class="checklist-ring-fill ${file.color}" cx="50" cy="50" r="42"
+                stroke-dasharray="${CIRCUMFERENCE}"
+                stroke-dashoffset="${offset}" />
+              <text class="checklist-ring-pct" x="50" y="50">${file.percentage}%</text>
+            </svg>
+            <div class="checklist-ring-name">${escapeHtml(file.name)}</div>
+            <div class="checklist-ring-fraction">${file.checked}/${file.total}</div>
+          </div>`;
+        });
+        html += '</div>';
+
+        // Accordion detail panels
+        data.files.forEach((file) => {
+          const isExpanded = expandedChecklist === file.filename;
+          html += `<div id="checklist-detail-${escapeHtml(file.filename)}" class="checklist-detail${isExpanded ? ' open' : ''}">`;
+          html += '<div class="checklist-detail-inner">';
+          html += renderChecklistDetail(file);
+          html += '</div></div>';
+        });
+
+        html += '</div>';
+        contentArea.innerHTML = html;
+
+        // Attach click and keyboard handlers to rings
+        document.querySelectorAll('.checklist-ring-wrapper').forEach(wrapper => {
+          const filename = wrapper.getAttribute('data-filename');
+          wrapper.addEventListener('click', () => toggleChecklistExpand(filename, data));
+          wrapper.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              toggleChecklistExpand(filename, data);
+            }
+          });
+        });
+      }
+
+      function renderGateIndicator(gate) {
+        if (!gate) return '';
+        const levelClass = gate.level === 'yellow' ? 'blocked-yellow' : (gate.level === 'red' ? 'blocked-red' : 'open');
+        return `<div class="gate-indicator" role="status" aria-live="polite">
+          <div class="gate-dot ${gate.level}"></div>
+          <span class="gate-label ${levelClass}">${escapeHtml(gate.label)}</span>
+        </div>`;
+      }
+
+      function renderChecklistDetail(file) {
+        if (!file || !file.items || file.items.length === 0) {
+          return '<div style="color:var(--color-text-muted);font-size:13px;">No items detected in this checklist.</div>';
+        }
+
+        let html = '';
+        let currentCategory = null;
+
+        file.items.forEach(item => {
+          if (item.category !== currentCategory) {
+            currentCategory = item.category;
+            if (currentCategory) {
+              html += `<h4 class="checklist-category">${escapeHtml(currentCategory)}</h4>`;
+            }
+          }
+
+          const icon = item.checked
+            ? '<span class="checklist-item-icon checked">&#10003;</span>'
+            : '<span class="checklist-item-icon unchecked">&#9744;</span>';
+
+          const chkId = item.chkId
+            ? `<span class="checklist-item-id">${escapeHtml(item.chkId)}</span>`
+            : '';
+
+          const tags = (item.tags || []).map(t =>
+            `<span class="checklist-item-tag">${escapeHtml(t)}</span>`
+          ).join('');
+
+          html += `<div class="checklist-item">
+            ${icon}${chkId}
+            <span style="flex:1">${escapeHtml(item.text)}</span>
+            ${tags}
+          </div>`;
+        });
+
+        return html;
+      }
+
+      function toggleChecklistExpand(filename, data) {
+        if (expandedChecklist === filename) {
+          expandedChecklist = null;
+        } else {
+          expandedChecklist = filename;
+        }
+        renderChecklistContent(data);
+      }
+
       // ====== Spec Story Map View ======
       let currentStoryMap = null;
 
@@ -3212,6 +3588,15 @@
             }
             break;
 
+          case 'checklist_update':
+            if (msg.feature === currentFeature && msg.checklist) {
+              currentChecklist = msg.checklist;
+              if (activeTab === 'checklist') {
+                renderChecklistContent(msg.checklist);
+              }
+            }
+            break;
+
           case 'constitution_update':
             if (msg.constitution) {
               currentConstitution = msg.constitution;

package/src/server.js

@@ -12,6 +12,7 @@ const { computeAssertionHash, checkIntegrity } = require('./integrity');
 const { computePipelineState } = require('./pipeline');
 const { computeStoryMapState } = require('./storymap');
 const { computePlanViewState } = require('./planview');
+const { computeChecklistViewState } = require('./checklist');
 
 /**
  * List features from specs/ directory.
@@ -167,6 +168,20 @@ function createServer({ projectPath, port = 3000 }) {
     }
   });
 
+  // API: checklist view state for a feature
+  app.get('/api/checklist/:feature', (req, res) => {
+    try {
+      const featureDir = path.join(projectPath, 'specs', req.params.feature);
+      if (!fs.existsSync(featureDir)) {
+        return res.status(404).json({ error: 'Feature not found' });
+      }
+      const checklist = computeChecklistViewState(projectPath, req.params.feature);
+      res.json(checklist);
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // API: board state for a feature
   app.get('/api/board/:feature', (req, res) => {
     try {
@@ -256,6 +271,14 @@ function createServer({ projectPath, port = 3000 }) {
                   planview
                 }));
               }
+              const checklist = computeChecklistViewState(projectPath, ws.currentFeature);
+              if (checklist) {
+                ws.send(JSON.stringify({
+                  type: 'checklist_update',
+                  feature: ws.currentFeature,
+                  checklist
+                }));
+              }
             } catch {
               // ignore errors during push
             }