@mindrian_os/install 1.13.0-beta.11

package/lib/graph/constellation-config.cjs

@@ -0,0 +1,299 @@
+/**
+ * MindrianOS Plugin -- Constellation Graph Configuration
+ * De Stijl color map, line styles, and Cytoscape stylesheet generator
+ * for the 12-Thread Constellation view (VIEW-06).
+ *
+ * Exports: THREAD_COLORS, THREAD_STYLES, spectralColorScale,
+ *          generateCytoscapeStylesheet, EDGE_TYPE_LABELS
+ */
+
+'use strict';
+
+// --- De Stijl Thread Color Map (FABRIC-02) ---
+
+const THREAD_COLORS = {
+  INFORMS:                   '#2563EB',  // blue
+  CONTRADICTS:               '#DC2626',  // red
+  CONVERGES:                 '#D97706',  // amber/yellow
+  ENABLES:                   '#16A34A',  // green
+  INVALIDATES:               '#6B7280',  // gray
+  BELONGS_TO:                '#9CA3AF',  // light gray, subtle
+  REASONING_INFORMS:         '#7C3AED',  // purple
+  HSI_CONNECTION:            '#F59E0B',  // gold, animated
+  REVERSE_SALIENT:           '#EF4444',  // bright red, pulsing
+  ANALOGOUS_TO:              '#06B6D4',  // cyan, dashed
+  STRUCTURALLY_ISOMORPHIC:   '#8B5CF6',  // violet
+  RESOLVES_VIA:              '#10B981',  // emerald, dotted
+};
+
+// --- Thread Line Styles ---
+
+const THREAD_STYLES = {
+  INFORMS:                   { lineStyle: 'solid',  width: 2,   arrow: true,  animated: false },
+  CONTRADICTS:               { lineStyle: 'solid',  width: 3,   arrow: false, animated: false },
+  CONVERGES:                 { lineStyle: 'solid',  width: 2.5, arrow: false, animated: false },
+  ENABLES:                   { lineStyle: 'solid',  width: 2,   arrow: true,  animated: false },
+  INVALIDATES:               { lineStyle: 'solid',  width: 2,   arrow: true,  animated: false },
+  BELONGS_TO:                { lineStyle: 'solid',  width: 1,   arrow: false, animated: false },
+  REASONING_INFORMS:         { lineStyle: 'solid',  width: 2,   arrow: true,  animated: false },
+  HSI_CONNECTION:            { lineStyle: 'solid',  width: 2.5, arrow: false, animated: true  },
+  REVERSE_SALIENT:           { lineStyle: 'solid',  width: 3,   arrow: false, animated: true  },
+  ANALOGOUS_TO:              { lineStyle: 'dashed', width: 2,   arrow: false, animated: false },
+  STRUCTURALLY_ISOMORPHIC:   { lineStyle: 'dashed', width: 2,   arrow: false, animated: false },
+  RESOLVES_VIA:              { lineStyle: 'dotted', width: 2,   arrow: true,  animated: false },
+};
+
+// --- Human-Readable Thread Labels ---
+
+const EDGE_TYPE_LABELS = {
+  INFORMS:                   'Informs',
+  CONTRADICTS:               'Contradicts',
+  CONVERGES:                 'Converges',
+  ENABLES:                   'Enables',
+  INVALIDATES:               'Invalidates',
+  BELONGS_TO:                'Belongs To',
+  REASONING_INFORMS:         'Reasoning Informs',
+  HSI_CONNECTION:            'Surprise',
+  REVERSE_SALIENT:           'Bottleneck',
+  ANALOGOUS_TO:              'Analogy Bridge',
+  STRUCTURALLY_ISOMORPHIC:   'Structural Isomorphism',
+  RESOLVES_VIA:              'Resolves Via',
+};
+
+// --- Spectral Color Scale (FABRIC-03) ---
+
+/**
+ * Map a spectral_gap value (0-1) to a color intensity.
+ * Low spectral_gap = muted gray-blue, high = vivid gold-red.
+ * Returns a hex color string.
+ *
+ * @param {number} spectralGap - Value between 0 and 1
+ * @returns {string} Hex color
+ */
+function spectralColorScale(spectralGap) {
+  const t = Math.max(0, Math.min(1, spectralGap || 0));
+
+  // Interpolate from cool muted (#4A5568) to vivid warm (#F59E0B)
+  const r0 = 0x4A, g0 = 0x55, b0 = 0x68;
+  const r1 = 0xF5, g1 = 0x9E, b1 = 0x0B;
+
+  const r = Math.round(r0 + (r1 - r0) * t);
+  const g = Math.round(g0 + (g1 - g0) * t);
+  const b = Math.round(b0 + (b1 - b0) * t);
+
+  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+
+// --- Cytoscape Stylesheet Generator (VIEW-06) ---
+
+/**
+ * Generate a complete Cytoscape.js stylesheet array for the Constellation view.
+ * Includes node styles (section-group, artifact), edge styles per Thread type,
+ * spectral coloring, and special effects for Surprises and Bottlenecks.
+ *
+ * @returns {Array<object>} Cytoscape stylesheet array
+ */
+function generateCytoscapeStylesheet() {
+  const styles = [];
+
+  // -- Base node style --
+  styles.push({
+    selector: 'node',
+    style: {
+      'label':              'data(label)',
+      'text-valign':        'bottom',
+      'text-halign':        'center',
+      'font-family':        'DM Sans, Inter, sans-serif',
+      'font-size':          '11px',
+      'color':              '#EEF0F4',
+      'text-margin-y':      8,
+      'background-color':   'data(color)',
+      'border-width':       1,
+      'border-color':       '#2A2A2A',
+      'width':              'mapData(degree, 0, 20, 24, 56)',
+      'height':             'mapData(degree, 0, 20, 24, 56)',
+      'text-max-width':     '100px',
+      'text-wrap':          'ellipsis',
+      'text-background-color': '#0D0D0D',
+      'text-background-opacity': 0.7,
+      'text-background-padding': '2px',
+      'overlay-opacity':    0,
+      'transition-property': 'background-color, width, height, border-width',
+      'transition-duration': '0.2s',
+    },
+  });
+
+  // -- Section-group nodes --
+  styles.push({
+    selector: 'node.section-group',
+    style: {
+      'width':              48,
+      'height':             48,
+      'font-size':          '13px',
+      'font-weight':        '700',
+      'border-width':       3,
+      'border-color':       'data(color)',
+      'background-opacity': 0.85,
+      'text-margin-y':      12,
+      'shape':              'round-rectangle',
+    },
+  });
+
+  // -- Artifact nodes --
+  styles.push({
+    selector: 'node.artifact',
+    style: {
+      'shape':              'ellipse',
+      'background-opacity': 0.7,
+    },
+  });
+
+  // -- Meeting nodes --
+  styles.push({
+    selector: 'node.meeting',
+    style: {
+      'shape':              'diamond',
+      'background-opacity': 0.75,
+      'width':              28,
+      'height':             28,
+    },
+  });
+
+  // -- Hovered/selected node --
+  styles.push({
+    selector: 'node:selected',
+    style: {
+      'border-width':       4,
+      'border-color':       '#FFFFFF',
+      'background-opacity': 1,
+      'font-size':          '13px',
+      'z-index':            999,
+    },
+  });
+
+  // -- Dimmed state (when something is selected, others dim) --
+  styles.push({
+    selector: 'node.dimmed',
+    style: {
+      'opacity':            0.15,
+    },
+  });
+
+  styles.push({
+    selector: 'edge.dimmed',
+    style: {
+      'opacity':            0.05,
+    },
+  });
+
+  // -- Base edge style --
+  styles.push({
+    selector: 'edge',
+    style: {
+      'width':              1.5,
+      'line-color':         '#555',
+      'target-arrow-color': '#555',
+      'curve-style':        'bezier',
+      'opacity':            0.5,
+      'overlay-opacity':    0,
+      'transition-property': 'opacity, width, line-color',
+      'transition-duration': '0.2s',
+    },
+  });
+
+  // -- Per-Thread-type edge styles --
+  const edgeTypes = Object.keys(THREAD_COLORS);
+  for (const type of edgeTypes) {
+    const color = THREAD_COLORS[type];
+    const ts = THREAD_STYLES[type];
+
+    const edgeStyle = {
+      'line-color':         color,
+      'target-arrow-color': color,
+      'width':              ts.width,
+      'opacity':            type === 'BELONGS_TO' ? 0.2 : 0.6,
+    };
+
+    if (ts.lineStyle === 'dashed') {
+      edgeStyle['line-style'] = 'dashed';
+      edgeStyle['line-dash-pattern'] = [8, 4];
+    } else if (ts.lineStyle === 'dotted') {
+      edgeStyle['line-style'] = 'dashed';
+      edgeStyle['line-dash-pattern'] = [3, 4];
+    }
+
+    if (ts.arrow) {
+      edgeStyle['target-arrow-shape'] = 'triangle';
+    } else {
+      edgeStyle['target-arrow-shape'] = 'none';
+    }
+
+    // CSS class selector: edge type as lowercase-hyphen class
+    const cssClass = type.toLowerCase().replace(/_/g, '-');
+    styles.push({
+      selector: `edge.${cssClass}`,
+      style: edgeStyle,
+    });
+  }
+
+  // -- HSI_CONNECTION (Surprise) edge highlight (FABRIC-04) --
+  styles.push({
+    selector: 'edge.hsi-connection.high-breakthrough',
+    style: {
+      'width':              4,
+      'opacity':            0.9,
+      'line-color':         '#F59E0B',
+    },
+  });
+
+  // -- REVERSE_SALIENT (Bottleneck) edge highlight (FABRIC-05) --
+  styles.push({
+    selector: 'edge.reverse-salient',
+    style: {
+      'width':              3.5,
+      'opacity':            0.85,
+      'line-color':         '#EF4444',
+    },
+  });
+
+  // -- ANALOGOUS_TO cross-domain bridge (FABRIC-06) --
+  styles.push({
+    selector: 'edge.analogous-to',
+    style: {
+      'line-style':         'dashed',
+      'line-dash-pattern':  [10, 5],
+      'width':              2.5,
+      'opacity':            0.7,
+      'line-color':         '#06B6D4',
+    },
+  });
+
+  // -- Selected edge --
+  styles.push({
+    selector: 'edge:selected',
+    style: {
+      'width':              4,
+      'opacity':            1,
+      'z-index':            999,
+    },
+  });
+
+  // -- Highlighted connected edges --
+  styles.push({
+    selector: 'edge.highlighted',
+    style: {
+      'opacity':            0.9,
+      'width':              3,
+    },
+  });
+
+  return styles;
+}
+
+module.exports = {
+  THREAD_COLORS,
+  THREAD_STYLES,
+  EDGE_TYPE_LABELS,
+  spectralColorScale,
+  generateCytoscapeStylesheet,
+};

package/lib/graph/graph-detail-panel.js

@@ -0,0 +1,165 @@
+/**
+ * MindrianOS Plugin -- Slide-in Graph Detail Panel
+ * Shows node info and cross-section connections when a graph node is clicked.
+ *
+ * Zero dependencies. Self-contained CSS via injected style tag.
+ * Embeddable via script tag or CJS require.
+ *
+ * Usage:
+ *   GraphDetailPanel.init(containerEl);   // optional, defaults to document.body
+ *   GraphDetailPanel.show(nodeData, allEdges);
+ *   GraphDetailPanel.hide();
+ */
+
+'use strict';
+
+var EDGE_TYPE_COLORS = {
+  INFORMS: '#888888',
+  CONTRADICTS: '#FF4B4B',
+  CONVERGES: '#C8A43C',
+  ENABLES: '#4A90D9',
+  HSI_CONNECTION: '#8B6FE8',
+  REVERSE_SALIENT: '#FF8C42',
+};
+
+var GraphDetailPanel = {
+  _panel: null,
+  _content: null,
+  _initialized: false,
+
+  /** Create the panel DOM structure. Call once. */
+  init: function(containerEl) {
+    if (this._initialized) return;
+    var host = containerEl || document.body;
+
+    // Inject styles
+    var style = document.createElement('style');
+    style.textContent = [
+      '.gdp-panel { position:fixed; top:0; right:0; width:360px; height:100vh; background:#1A1A1A; border-left:3px solid #5C5A56; transform:translateX(100%); transition:transform 0.3s ease; z-index:10000; overflow-y:auto; font-family:"DM Sans","Inter",sans-serif; color:#EEF0F4; padding:24px 20px; box-sizing:border-box; }',
+      '.gdp-panel.gdp-open { transform:translateX(0); }',
+      '.gdp-close { position:absolute; top:12px; right:14px; background:none; border:none; color:#EEF0F4; font-size:22px; cursor:pointer; opacity:0.6; }',
+      '.gdp-close:hover { opacity:1; }',
+      '.gdp-label { font-size:20px; font-weight:600; margin:0 0 10px 0; line-height:1.3; }',
+      '.gdp-badge { display:inline-block; padding:2px 10px; border-radius:10px; font-size:11px; font-weight:500; background:#333; margin-right:6px; margin-bottom:6px; }',
+      '.gdp-section-row { font-size:13px; color:#AAA; margin-bottom:4px; }',
+      '.gdp-section-row span { color:#EEF0F4; }',
+      '.gdp-divider { border:none; border-top:1px solid #333; margin:14px 0; }',
+      '.gdp-conns-title { font-size:14px; font-weight:600; margin-bottom:8px; }',
+      '.gdp-conn { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:6px; }',
+      '.gdp-conn-badge { padding:1px 7px; border-radius:8px; font-size:10px; font-weight:600; color:#1A1A1A; white-space:nowrap; }',
+      '.gdp-arrow { color:#666; font-size:11px; }',
+      '.gdp-summary { font-family:"Source Serif 4",serif; font-size:14px; line-height:1.6; color:#CCC; margin-top:10px; }',
+    ].join('\n');
+    host.appendChild(style);
+
+    // Create panel
+    var panel = document.createElement('div');
+    panel.className = 'gdp-panel';
+    panel.innerHTML = '<button class="gdp-close" aria-label="Close">&times;</button><div class="gdp-content"></div>';
+    host.appendChild(panel);
+
+    this._panel = panel;
+    this._content = panel.querySelector('.gdp-content');
+
+    var self = this;
+    panel.querySelector('.gdp-close').addEventListener('click', function() { self.hide(); });
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') self.hide();
+    });
+
+    this._initialized = true;
+  },
+
+  /** Populate and slide in the panel. */
+  show: function(nodeData, allEdges) {
+    if (!this._initialized) this.init();
+    var nd = nodeData || {};
+    var color = nd.color || '#5C5A56';
+    this._panel.style.borderLeftColor = color;
+
+    var html = '';
+
+    // Header
+    html += '<h2 class="gdp-label" style="color:' + color + '">' + esc(nd.label || nd.id || 'Node') + '</h2>';
+
+    // Type badge
+    var cls = nd.layer || 'content';
+    html += '<span class="gdp-badge">' + esc(cls) + '</span>';
+
+    // Section
+    if (nd.section) {
+      html += '<div class="gdp-section-row">Section: <span>' + esc(nd.section.replace(/-/g, ' ')) + '</span></div>';
+    }
+    // Methodology
+    if (nd.methodology) {
+      html += '<div class="gdp-section-row">Methodology: <span>' + esc(nd.methodology.replace(/-/g, ' ')) + '</span></div>';
+    }
+    // Meeting date
+    if (nd.meeting_date) {
+      html += '<div class="gdp-section-row">Meeting date: <span>' + esc(nd.meeting_date) + '</span></div>';
+    }
+    // Speaker role
+    if (nd.role) {
+      html += '<div class="gdp-section-row">Role: <span>' + esc(nd.role) + '</span></div>';
+    }
+    // Assumption status
+    if (nd.status) {
+      var sc = nd.status === 'valid' ? '#4CAF50' : nd.status === 'invalid' ? '#FF4B4B' : '#C8A43C';
+      html += '<div class="gdp-section-row">Status: <span style="color:' + sc + '">' + esc(nd.status) + '</span></div>';
+    }
+
+    // Cross-section connections
+    var connEdges = (allEdges || []).filter(function(e) {
+      return e.source === nd.id || e.target === nd.id;
+    });
+    if (connEdges.length > 0) {
+      html += '<hr class="gdp-divider">';
+      html += '<div class="gdp-conns-title">Connections (' + connEdges.length + ')</div>';
+
+      // Group by type
+      var groups = {};
+      connEdges.forEach(function(e) {
+        var t = e.type || 'RELATED';
+        if (!groups[t]) groups[t] = [];
+        groups[t].push(e);
+      });
+
+      Object.keys(groups).forEach(function(type) {
+        var badgeColor = EDGE_TYPE_COLORS[type] || '#666';
+        groups[type].forEach(function(e) {
+          var isOutgoing = e.source === nd.id;
+          var otherId = isOutgoing ? e.target : e.source;
+          var arrow = isOutgoing ? '\u2192' : '\u2190';
+          html += '<div class="gdp-conn">';
+          html += '<span class="gdp-conn-badge" style="background:' + badgeColor + '">' + esc(type) + '</span>';
+          html += '<span class="gdp-arrow">' + arrow + '</span>';
+          html += '<span>' + esc(otherId) + '</span>';
+          html += '</div>';
+        });
+      });
+    }
+
+    // Summary
+    html += '<hr class="gdp-divider">';
+    var summary = nd.desc || nd.summary || 'No summary available.';
+    html += '<div class="gdp-summary">' + esc(summary) + '</div>';
+
+    this._content.innerHTML = html;
+    this._panel.classList.add('gdp-open');
+  },
+
+  /** Slide the panel out. */
+  hide: function() {
+    if (this._panel) this._panel.classList.remove('gdp-open');
+  }
+};
+
+function esc(s) {
+  var d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+// Module exports
+if (typeof window !== 'undefined') window.GraphDetailPanel = GraphDetailPanel;
+if (typeof module !== 'undefined') module.exports = GraphDetailPanel;

package/lib/hmi/ROOM.md

@@ -0,0 +1,47 @@
+---
+type: directory-identity
+name: lib/hmi
+section: lib/hmi
+purpose: HMI (Human-Machine Interaction) primitives — JTBD substrate, selectors, renderer extensions
+founding_phase: 100
+phase: 100
+milestone: v1.12.3
+canon_parts: [2, "2a", 3, 7]
+created: 2026-05-01
+---
+
+# lib/hmi/
+
+`lib/hmi/` is the home for HMI (Human-Machine Interaction) primitives. Phase 100 ships the JTBD substrate (taxonomy, classifier, state). Phases 101-105 deposit selectors, renderer extensions, manifest schema, and polling extensions here.
+
+## Files in this section
+
+| File | Plan | Purpose |
+|------|------|---------|
+| `jtbd-taxonomy.json` | 100-01 | The canonical 12+1 JTBD taxonomy. 13 entries (12 first-class jobs + `explore` fallback). Each entry carries detector cues, methodology hooks, next-move verb set, completion shape, and operator/persona affinity. Data substrate every Phase 100 component reads. |
+| `jtbd-classifier.cjs` | 100-02 | Heuristic classifier. Inputs: latest user message + active operator (Phase 99) + STATE.md decisions recency. Output: `{ jtbd, confidence, evidence[] }`. No LLM round-trip. Below 0.6 (or 0.8 for JUST_TALK), returns null. |
+| `jtbd-state.cjs` | 100-03 | Per-room state file at `<roomDir>/.mindrian/jtbd-state.json`. Atomic write via mktemp + rename. History bounded at 50 entries. 24h staleness rule. |
+
+## Canon Part 8 boundary (LOCAL ONLY)
+
+This directory is LOCAL-only by constitution. The classifier never queries Brain. No methodology hook in `jtbd-taxonomy.json` invokes a Brain MCP tool directly. JTBD state writes only to `<roomDir>/.mindrian/jtbd-state.json` and the local graph. Any future Brain enrichment of JTBD inference (deferred to v1.15.x per CONTEXT D-16) ships through a separately reviewed code path under Canon Part 8 PR gate.
+
+## Consumers
+
+- Phase 101 (uiux-selector-block) reads JTBD-aware verb sets from `jtbd-taxonomy.json` to render Shape F.6.
+- Phase 102 (renderer extensions) reads operator + JTBD to pick body shape.
+- Phase 103 (memory layers) writes across-session JTBD aggregations sourced from `jtbd-state.cjs` history.
+- Phase 104 (per-command manifest) writes `serves_jtbd:` declarations into command frontmatters keyed against this taxonomy.
+- Phase 105 (compliance polling) scores command outputs against the active JTBD's verb set.
+
+## Decision #15 + Decision #16 compliance
+
+Per `CLAUDE.md` Decision #15, every directory in the data room (and the lib tree by extension under this milestone's policy) carries a ROOM.md identity file. `lib/hmi/` is bound to Phase 100; subsequent additions in 101-105 update this file's "Files in this section" table. No MINTO.md required at this level — `.room-root` cascade scope is `room/`, not `lib/`.
+
+## Cross-references
+
+- Milestone KICKOFF: `~/MindrianRooms/mindrianOS/research/2026-04-30-tui-and-ruling-system/05-v1-12-3-hmi-milestone-plan.md`
+- Phase 100 CONTEXT: `.planning/phases/100-jtbd-inference-engine/100-CONTEXT.md`
+- Phase 100 RESEARCH: `.planning/phases/100-jtbd-inference-engine/100-RESEARCH.md`
+- Canon: `docs/MINDRIAN-CANON.md` Parts 2, 2a, 3, 7
+- Sibling identity reference: `lib/conversation/ROOM.md` (Phase 99)