@mindrian_os/install 1.13.0-beta.11

package/lib/quickview/server.cjs

@@ -0,0 +1,533 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * MindrianOS Quick-View Server
+ * Lightweight Node.js http server that serves an interactive project dashboard
+ * on localhost. Designed to make the filesystem INVISIBLE to users.
+ *
+ * Users see: "Blueprint Phase: 7 entries, biggest gap is Business Model"
+ * Users never see: room/business-model/ -- 0 entries
+ *
+ * Usage: node lib/quickview/server.cjs [ROOM_DIR] [PORT]
+ * Or: require('./server.cjs').start(roomDir, port)
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const http = require('http');
+
+// ── Config ──
+
+const SECTION_META = {
+  'problem-definition':    { label: 'Problem',        color: '#A63D2F', icon: '?' },
+  'market-analysis':       { label: 'Market',         color: '#C8A43C', icon: '~' },
+  'solution-design':       { label: 'Solution',       color: '#5C5A56', icon: '*' },
+  'business-model':        { label: 'Business Model', color: '#2D6B4A', icon: '#' },
+  'competitive-analysis':  { label: 'Competition',    color: '#B5602A', icon: '!' },
+  'team-execution':        { label: 'Team',           color: '#1E3A6E', icon: '+' },
+  'legal-ip':              { label: 'Legal & IP',     color: '#6B4E8B', icon: '&' },
+  'financial-model':       { label: 'Financials',     color: '#2A6B5E', icon: '$' },
+  'opportunity-bank':      { label: 'Opportunities',  color: '#C87137', icon: '@' },
+  'funding':               { label: 'Funding',        color: '#3A7B5E', icon: '%' },
+};
+
+const SKIP_DIRS = new Set(['.mindrian', 'meetings', 'team', 'exports', '.context', '.planning', 'personas']);
+const SKIP_FILES = new Set(['ROOM.md', 'STATE.md', 'MINTO.md', 'USER.md', 'ROOM-INTELLIGENCE.md', 'MEETINGS-INTELLIGENCE.md']);
+
+// ── Room Data Collection ──
+
+function collectRoomData(roomDir) {
+  const data = {
+    name: 'Untitled Project',
+    stage: 'Pre-opportunity',
+    sections: [],
+    totalEntries: 0,
+    meetings: 0,
+    intelligence: { gaps: [], convergence: [], contradictions: [] },
+    recentArtifacts: [],
+    generatedAt: new Date().toISOString(),
+  };
+
+  // Read STATE.md for venture name and stage
+  const statePath = path.join(roomDir, 'STATE.md');
+  if (fs.existsSync(statePath)) {
+    const stateContent = fs.readFileSync(statePath, 'utf-8');
+    const nameMatch = stateContent.match(/venture_name:\s*["']?(.+?)["']?\s*$/m);
+    const stageMatch = stateContent.match(/venture_stage:\s*["']?(.+?)["']?\s*$/m);
+    if (nameMatch) data.name = nameMatch[1].trim();
+    if (stageMatch) data.stage = stageMatch[1].trim();
+  }
+
+  // Scan sections
+  const entries = fs.readdirSync(roomDir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (!entry.isDirectory() || SKIP_DIRS.has(entry.name)) continue;
+    const sectionDir = path.join(roomDir, entry.name);
+    const meta = SECTION_META[entry.name] || { label: entry.name, color: '#5C5A56', icon: '-' };
+
+    const artifacts = [];
+    try {
+      const files = fs.readdirSync(sectionDir).filter(f => f.endsWith('.md') && !SKIP_FILES.has(f));
+      for (const file of files) {
+        const filePath = path.join(sectionDir, file);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const titleMatch = content.match(/^# (.+)$/m);
+        const dateMatch = file.match(/^(\d{4}-\d{2}-\d{2})/);
+        artifacts.push({
+          title: titleMatch ? titleMatch[1].trim() : file.replace('.md', ''),
+          date: dateMatch ? dateMatch[1] : null,
+          file: file,
+          size: content.length,
+        });
+        data.recentArtifacts.push({
+          title: titleMatch ? titleMatch[1].trim() : file.replace('.md', ''),
+          section: meta.label,
+          sectionColor: meta.color,
+          date: dateMatch ? dateMatch[1] : null,
+        });
+      }
+    } catch (e) { /* empty section */ }
+
+    data.sections.push({
+      id: entry.name,
+      label: meta.label,
+      color: meta.color,
+      icon: meta.icon,
+      entryCount: artifacts.length,
+      artifacts: artifacts,
+    });
+    data.totalEntries += artifacts.length;
+  }
+
+  // Sort recent artifacts by date (newest first)
+  data.recentArtifacts.sort((a, b) => (b.date || '').localeCompare(a.date || ''));
+  data.recentArtifacts = data.recentArtifacts.slice(0, 8);
+
+  // Count meetings
+  const meetingsDir = path.join(roomDir, 'meetings');
+  if (fs.existsSync(meetingsDir)) {
+    data.meetings = fs.readdirSync(meetingsDir, { withFileTypes: true })
+      .filter(d => d.isDirectory()).length;
+  }
+
+  // Simple intelligence
+  const activeSections = data.sections.filter(s => s.entryCount > 0).length;
+  const emptySections = data.sections.filter(s => s.entryCount === 0);
+  const singleEntrySections = data.sections.filter(s => s.entryCount === 1);
+
+  for (const s of emptySections) {
+    data.intelligence.gaps.push({ section: s.label, color: s.color, type: 'empty', message: `${s.label} has no entries` });
+  }
+  for (const s of singleEntrySections) {
+    data.intelligence.gaps.push({ section: s.label, color: s.color, type: 'thin', message: `${s.label} has only 1 entry -- single lens` });
+  }
+
+  return data;
+}
+
+// ── HTML Template ──
+
+function buildDashboardHTML(data) {
+  const sectionsHTML = data.sections.map(s => {
+    const pct = data.totalEntries > 0 ? Math.round((s.entryCount / Math.max(...data.sections.map(x => x.entryCount), 1)) * 100) : 0;
+    const artifactListHTML = s.artifacts.map(a =>
+      `<div class="artifact-item"><span class="artifact-dot" style="background:${s.color}"></span><span class="artifact-title">${a.title}</span>${a.date ? `<span class="artifact-date">${a.date}</span>` : ''}</div>`
+    ).join('');
+
+    return `
+      <div class="section-card" style="border-left: 4px solid ${s.color}">
+        <div class="section-header">
+          <div class="section-name">${s.label}</div>
+          <div class="section-count" style="color:${s.color}">${s.entryCount}</div>
+        </div>
+        <div class="section-bar-track">
+          <div class="section-bar-fill" style="width:${pct}%;background:${s.color}"></div>
+        </div>
+        ${s.entryCount > 0 ? `<div class="artifact-list">${artifactListHTML}</div>` : '<div class="empty-label">No entries yet</div>'}
+      </div>`;
+  }).join('');
+
+  const gapsHTML = data.intelligence.gaps.map(g =>
+    `<div class="signal-item signal-gap"><span class="signal-dot" style="background:${g.color}"></span>${g.message}</div>`
+  ).join('');
+
+  const recentHTML = data.recentArtifacts.map(a =>
+    `<div class="recent-item"><span class="recent-dot" style="background:${a.sectionColor}"></span><span class="recent-title">${a.title}</span><span class="recent-section">${a.section}</span></div>`
+  ).join('');
+
+  const activeSections = data.sections.filter(s => s.entryCount > 0).length;
+  const totalSections = data.sections.length;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${data.name} -- MindrianOS Quick View</title>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
+<style>
+:root {
+  --ds-bg: #0D0D0D;
+  --ds-surface: #1A1A1A;
+  --ds-elevated: #242424;
+  --ds-cream: #F5F1E8;
+  --ds-muted: #A8A39F;
+  --ds-text: #D4CFC7;
+  --ds-border: #2A2A2A;
+  --ds-red: #A63D2F;
+  --ds-blue: #1E3A6E;
+  --ds-yellow: #C8A43C;
+  --ds-green: #2D6B4A;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+* { border-radius: 0 !important; }
+body {
+  font-family: 'Inter', system-ui, sans-serif;
+  background: var(--ds-bg);
+  color: var(--ds-cream);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+}
+
+/* ── Header ── */
+.header {
+  background: var(--ds-surface);
+  border-bottom: 3px solid var(--ds-yellow);
+  padding: 24px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.header-left { display: flex; align-items: baseline; gap: 16px; }
+.project-name {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 2rem;
+  letter-spacing: 0.04em;
+  color: var(--ds-cream);
+}
+.stage-badge {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--ds-yellow);
+  border: 1px solid var(--ds-yellow);
+  padding: 4px 12px;
+}
+.header-stats {
+  display: flex;
+  gap: 24px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8rem;
+  color: var(--ds-muted);
+}
+.stat-value { color: var(--ds-cream); font-weight: 600; }
+.brand-mark {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  color: var(--ds-muted);
+  opacity: 0.5;
+}
+
+/* ── Layout ── */
+.main { display: grid; grid-template-columns: 1fr 340px; gap: 0; min-height: calc(100vh - 80px); }
+@media (max-width: 900px) { .main { grid-template-columns: 1fr; } }
+
+/* ── Sections Grid ── */
+.sections-panel { padding: 24px; }
+.panel-title {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 1.1rem;
+  letter-spacing: 0.1em;
+  color: var(--ds-muted);
+  margin-bottom: 16px;
+  text-transform: uppercase;
+}
+.sections-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+.section-card {
+  background: var(--ds-surface);
+  padding: 16px;
+  transition: background 150ms ease;
+  cursor: default;
+}
+.section-card:hover { background: var(--ds-elevated); }
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.section-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.section-count {
+  font-family: 'Bebas Neue', sans-serif;
+  font-size: 1.5rem;
+}
+.section-bar-track {
+  height: 3px;
+  background: var(--ds-border);
+  margin-bottom: 10px;
+}
+.section-bar-fill {
+  height: 100%;
+  transition: width 600ms ease;
+}
+.artifact-list { margin-top: 6px; }
+.artifact-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 0.8rem;
+  color: var(--ds-text);
+}
+.artifact-dot {
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+}
+.artifact-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.artifact-date {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.7rem;
+  color: var(--ds-muted);
+}
+.empty-label {
+  font-size: 0.8rem;
+  color: var(--ds-muted);
+  font-style: normal;
+  opacity: 0.6;
+  margin-top: 4px;
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  background: var(--ds-surface);
+  border-left: 3px solid var(--ds-border);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.signal-section { }
+.signal-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 0;
+  font-size: 0.8rem;
+  color: var(--ds-text);
+  border-bottom: 1px solid var(--ds-border);
+}
+.signal-item:last-child { border-bottom: none; }
+.signal-dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  flex-shrink: 0;
+}
+.signal-gap .signal-dot { opacity: 0.4; }
+
+.recent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  font-size: 0.8rem;
+  border-bottom: 1px solid var(--ds-border);
+}
+.recent-item:last-child { border-bottom: none; }
+.recent-dot { width: 6px; height: 6px; flex-shrink: 0; }
+.recent-title { flex: 1; color: var(--ds-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.recent-section {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: var(--ds-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ── Suggestions ── */
+.suggestions { margin-top: auto; }
+.suggest-item {
+  display: block;
+  background: var(--ds-elevated);
+  border-left: 3px solid var(--ds-yellow);
+  padding: 12px;
+  margin-bottom: 8px;
+  text-decoration: none;
+  color: var(--ds-cream);
+  font-size: 0.8rem;
+  transition: background 150ms ease;
+  cursor: pointer;
+}
+.suggest-item:hover { background: #2D2D2D; }
+.suggest-label {
+  font-size: 0.65rem;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--ds-yellow);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 4px;
+}
+
+/* ── Footer ── */
+.footer {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 12px;
+  font-size: 0.65rem;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--ds-muted);
+  opacity: 0.4;
+  border-top: 1px solid var(--ds-border);
+}
+
+/* ── Auto-refresh pulse ── */
+@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+.live-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: var(--ds-green);
+  margin-right: 6px;
+  animation: pulse 2s ease infinite;
+}
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    <div class="project-name">${data.name}</div>
+    <div class="stage-badge">${data.stage}</div>
+  </div>
+  <div class="header-stats">
+    <div><span class="stat-value">${data.totalEntries}</span> entries</div>
+    <div><span class="stat-value">${activeSections}/${totalSections}</span> sections</div>
+    <div><span class="stat-value">${data.meetings}</span> meetings</div>
+  </div>
+  <div class="brand-mark">MINDRANOS</div>
+</div>
+
+<div class="main">
+  <div class="sections-panel">
+    <div class="panel-title">Your Project</div>
+    <div class="sections-grid">
+      ${sectionsHTML}
+    </div>
+  </div>
+
+  <div class="sidebar">
+    ${data.intelligence.gaps.length > 0 ? `
+    <div class="signal-section">
+      <div class="panel-title">Gaps to Fill</div>
+      ${gapsHTML}
+    </div>` : ''}
+
+    ${data.recentArtifacts.length > 0 ? `
+    <div class="signal-section">
+      <div class="panel-title"><span class="live-dot"></span>Recent Work</div>
+      ${recentHTML}
+    </div>` : ''}
+
+    <div class="suggestions">
+      <div class="panel-title">Suggested Next</div>
+      ${data.intelligence.gaps.length > 0 ? `
+      <div class="suggest-item">
+        <div class="suggest-label">Biggest Gap</div>
+        Fill ${data.intelligence.gaps[0].section} -- ${data.intelligence.gaps[0].message}
+      </div>` : ''}
+      <div class="suggest-item">
+        <div class="suggest-label">Quick Win</div>
+        Grade your ${data.totalEntries} entries to see where you stand
+      </div>
+      ${data.meetings === 0 ? `
+      <div class="suggest-item">
+        <div class="suggest-label">Missing</div>
+        No meetings filed yet -- file a transcript to unlock team intelligence
+      </div>` : ''}
+    </div>
+  </div>
+
+  <div class="footer">
+    MindrianOS Quick View -- generated ${data.generatedAt.slice(0, 16).replace('T', ' ')} -- <span class="live-dot"></span>Auto-refreshes every 10s
+  </div>
+</div>
+
+<script>
+// Auto-refresh: full page reload when room data changes
+(function() {
+  var lastJson = '';
+  setInterval(async function() {
+    try {
+      var res = await fetch('/api/state');
+      if (res.ok) {
+        var text = await res.text();
+        if (lastJson && text !== lastJson) {
+          window.location.reload();
+        }
+        lastJson = text;
+      }
+    } catch (e) { /* server may have stopped */ }
+  }, 10000);
+})();
+</script>
+
+</body>
+</html>`;
+}
+
+// ── HTTP Server (zero dependencies) ──
+
+function startServer(roomDir, port) {
+  const server = http.createServer((req, res) => {
+    if (req.url === '/api/state') {
+      res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });
+      res.end(JSON.stringify(collectRoomData(roomDir)));
+      return;
+    }
+
+    // Serve dashboard HTML for everything else
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(buildDashboardHTML(collectRoomData(roomDir)));
+  });
+
+  server.listen(port, () => {
+    const url = `http://localhost:${port}`;
+    process.stderr.write(`MindrianOS Quick View: ${url}\n`);
+
+    // Auto-open browser
+    const { platform } = process;
+    const cmd = platform === 'darwin' ? 'open' : platform === 'win32' ? 'start' : 'xdg-open';
+    try { execSync(`${cmd} ${url}`, { stdio: 'ignore' }); } catch (e) { /* no browser */ }
+  });
+
+  return server;
+}
+
+// ── CLI Entry ──
+
+if (require.main === module) {
+  const roomDir = process.argv[2] || path.join(process.cwd(), 'room');
+  const port = parseInt(process.argv[3] || '8450', 10);
+  if (!fs.existsSync(roomDir)) {
+    process.stderr.write(`Room not found: ${roomDir}\n`);
+    process.exit(1);
+  }
+  startServer(roomDir, port);
+}
+
+module.exports = { startServer, collectRoomData, buildDashboardHTML };

package/lib/render/JTBD-PALETTES.md

@@ -0,0 +1,145 @@
+# JTBD-PALETTES.md -- JTBD-aware Renderer Palette Documentation
+
+> Phase 102 -- Context-aware rendering. The canonical source for JTBD -> palette mappings consumed by lib/render/render-v2.cjs (CLI surface) and downstream HTML-emitting phases (Phase 19 wiki-dashboard, Phase 25 export, Phase 30 presentation-generator).
+>
+> Owned by lib/render/render-v2.cjs (Phase 102-05 implementation). Read at module load by tests and downstream consumers, never mutated by user-data-bearing payloads. LOCAL-only per Canon Part 8.
+
+---
+
+## 1. Purpose
+
+Phase 102 ships TWO palettes for the same set of JTBDs because the CLI surface and the HTML/dashboard surface have different semantic contracts. The CLI uses the 5-color contract from skills/ui-system/SKILL.md §4 (Green / Cyan / Yellow / Red / Gray) where color carries semantic meaning at the terminal (red = error, etc.). HTML / wiki / presentation / Cytoscape surfaces use Mondrian primaries (red / yellow / blue / black / white) for visual identity discipline -- rectilinear grids, primary blocks, large white space.
+
+The dual-palette rule (Phase 102 D-06b) is: pick the palette by SURFACE, not by JTBD. The same JTBD renders red on CLI and could render blue on HTML -- and that is correct.
+
+This file is canonical for both palettes. Phase 102-05 ships the CLI mapping wired into render-v2.cjs; the Mondrian mapping is documented for downstream HTML-emitting phases to honor.
+
+---
+
+## 2. CLI Semantic Palette (5-color contract)
+
+Implementation: \`lib/render/render-v2.cjs\` -- \`JTBD_CLI_COLOR\` map. Applied as a single colored ■ glyph at the start of Zone 1 header (D-07). TTY-gated via \`process.stdout.isTTY\` so non-TTY captures (CI logs, JSON-mode emission) stay byte-clean and equal the strip-ANSI of the colored render (RENDER-102-05 invariant).
+
+| JTBD handle | CLI color | Meaning anchor |
+|---|---|---|
+| \`decide-pursue\` | red | high-stakes commit decision |
+| \`find-problem\` | yellow | questioning / ambiguity |
+| \`understand-market\` | cyan | informational |
+| \`find-bottleneck\` | red | blocker / urgent |
+| \`prepare-pitch\` | green | forward action / success-flavored |
+| \`validate-idea\` | yellow | challenge / scrutiny |
+| \`compare-options\` | cyan | informational table |
+| \`connect-domains\` | cyan | cross-reference |
+| \`surface-contradiction\` | red | conflict |
+| \`plan-execution\` | green | commitment |
+| \`file-meeting\` | cyan | capture |
+| \`audit-room\` | yellow | warning-flavored |
+| \`explore\` | gray | no specific action |
+
+Color -> ANSI SGR mapping (\`lib/render/render-v2.cjs\` \`ANSI\` constant):
+
+| Token | ANSI sequence | Semantic role (SKILL.md §4) |
+|---|---|---|
+| red | \\x1b[31m | Errors only |
+| yellow | \\x1b[33m | Warnings, caution |
+| cyan | \\x1b[36m | Commands, paths, links |
+| green | \\x1b[32m | Success, active, complete |
+| gray | \\x1b[90m | Meta info, timestamps, hints |
+| reset | \\x1b[0m | Reset to default |
+
+Compact mode (D-08) drops the overlay entirely -- Zone 1 left-rail accent is omitted when the token budget exceeds 80%. The accent is a "luxury" feature; semantic body colors stay.
+
+---
+
+## 3. Mondrian Dual Palette (HTML / dashboard / presentation)
+
+Used by HTML-emitting downstream phases ONLY (Phase 19 wiki-dashboard, Phase 25 data-room-export-v2, Phase 30 presentation-generator). Phase 102 renderer does NOT emit HTML -- this section is documentation, not active code.
+
+Per Phase 102 D-06b, Mondrian primaries (red, yellow, blue, black, white) map by JTBD as follows:
+
+| JTBD handle | Mondrian color |
+|---|---|
+| \`decide-pursue\` | red |
+| \`find-problem\` | yellow |
+| \`understand-market\` | blue |
+| \`find-bottleneck\` | red |
+| \`prepare-pitch\` | black (commitment / structural) |
+| \`validate-idea\` | yellow |
+| \`compare-options\` | blue |
+| \`connect-domains\` | blue |
+| \`surface-contradiction\` | red |
+| \`plan-execution\` | black |
+| \`file-meeting\` | blue |
+| \`audit-room\` | yellow |
+| \`explore\` | white (no specific action; the canvas) |
+
+Mondrian shapes vocabulary (HTML surfaces only): square (■), circle (●), triangle (▲ ▼ ▶ ◀). The 12-glyph CLI vocabulary stays unchanged -- circle (●) is NOT in the CLI allowlist; HTML surfaces gain it.
+
+The dual-palette rule prevents palette drift across surfaces and protects the De Stijl visual identity discipline downstream.
+
+---
+
+## 4. Surface Routing Rule
+
+| Surface | Palette | Why |
+|---|---|---|
+| CLI / TUI (every /mos:* output) | 5-color semantic (red / yellow / cyan / green / gray) | Color carries semantic meaning at the terminal; user reads "red = error" muscle-memory (SKILL.md §4) |
+| HTML dashboard / wiki / presentation / Cytoscape graph | Mondrian primaries (red / yellow / blue / black / white) | Visual identity discipline; rectilinear grid; primary blocks; large white space |
+
+Renderers MUST pick by SURFACE. A CLI /mos:audit-room output uses yellow. The HTML wiki page for the same room uses yellow as well -- coincidentally the same here, but the mapping rules are independent. compare-options is cyan on CLI but blue on HTML; this is intentional.
+
+---
+
+## 5. Forward References (downstream consumers)
+
+| Phase | Status | Consumes |
+|---|---|---|
+| Phase 19 wiki-dashboard | planned | Mondrian palette for JTBD-tagged page headers + sidebar accents |
+| Phase 25 data-room-export-v2 | planned | Mondrian palette for HTML / PDF export theming |
+| Phase 30 presentation-generator | planned | Mondrian palette for slide chrome + JTBD-anchored section colors |
+| Phase 91 navigation-engine | planned | CLI palette via render-v2 (read-through; no direct dependency on this file) |
+
+---
+
+## 6. Pending SKILL.md Amendment (Phase 106 follow-on)
+
+Phase 102 ships the CLI palette wired (D-06) and the Mondrian palette documented (D-06b). The formal skills/ui-system/SKILL.md amendment that encodes the dual-palette rule into the rendering style spec is queued as a Phase 106 follow-on. Phase 106 is a small subsequent phase, NOT in v1.12.3 scope.
+
+When Phase 106 lands, skills/ui-system/SKILL.md §4 will gain a sub-section titled "Cross-surface palette rule" referencing this file as the canonical source.
+
+---
+
+## 7. Resolution Algorithm (parser contract)
+
+render-v2.cjs reads JTBD_CLI_COLOR directly as a frozen object literal -- no Markdown parsing required. The mapping is duplicated here for human-readable documentation and downstream consumer reference.
+
+If the JTBD argument is null OR not in the map OR compact mode is active OR process.stdout.isTTY is false, the renderer applies NO accent. The header zone passes through unchanged.
+
+---
+
+## 8. Invariants (regression fences for Plan 102-05)
+
+1. **13 entries.** Both CLI and Mondrian tables MUST have exactly 13 rows (the canonical Phase 100 JTBD set). Adding a 14th JTBD requires Phase 100 vocabulary expansion + this file update + a HMI-102-XX requirement amendment.
+2. **Closed CLI palette.** CLI palette tokens MUST be from {red, yellow, cyan, green, gray}. No auxiliary colors.
+3. **Closed Mondrian palette.** Mondrian palette tokens MUST be from {red, yellow, blue, black, white}. No auxiliary colors.
+4. **TTY gate.** The renderer MUST gate ANSI emission on process.stdout.isTTY. Non-TTY captures MUST be byte-identical to the strip-ANSI of TTY captures.
+5. **Compact override.** Compact mode (token budget > 80%) MUST drop the Zone 1 color accent. Body semantic colors stay.
+
+---
+
+## Canon Refs
+
+- **Part 3 (Tri-Context Decision Gate)** -- color overlay is part of the cognitive surface the navigator reads at every Decision Gate.
+- **Part 7 (Reuse Before Build)** -- this file ships data-as-asset; no new module surface added.
+- **Part 8 (The Graph Boundary)** -- the renderer reads this file LOCAL-only at module load; no Brain queries derive palette. JTBD handle at render time is a generic enum scalar (Canon-allowed framework handle), never a user-data string.
+
+---
+
+## See Also
+
+- lib/render/render-v2.cjs -- consumer; Plan 102-05 implementation.
+- tests/test-render-v2-color-overlay.cjs -- RENDER-102-05 regression fence.
+- skills/ui-system/SKILL.md §4 -- the 5-color CLI contract (red / yellow / cyan / green / gray).
+- docs/MINDRIAN-CANON.md Part 3 -- closed verb vocabulary (10 verbs); sets context for why JTBD-aware rendering matters.
+- .planning/phases/102-context-aware-rendering/102-CONTEXT.md -- D-06 (CLI palette) + D-06b (Mondrian dual palette) decision records.
+- .planning/phases/100-jtbd-inference-engine/ -- upstream JTBD handle producer.