prism-mcp-server 2.5.2 → 3.0.1

package/dist/dashboard/ui.js

@@ -27,7 +27,8 @@ export function renderDashboardHTML(version) {
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    :root {
+    /* ─── Theme: Dark (Default) ─── */
+    :root, [data-theme="dark"] {
       --bg-primary: #0a0e1a;
       --bg-secondary: #111827;
       --bg-glass: rgba(17, 24, 39, 0.6);
@@ -49,6 +50,44 @@ export function renderDashboardHTML(version) {
       --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
     }
 
+    /* ─── Theme: Midnight — deeper blacks, blue-shifted accents ─── */
+    [data-theme="midnight"] {
+      --bg-primary: #020617;
+      --bg-secondary: #0f172a;
+      --bg-glass: rgba(2, 6, 23, 0.7);
+      --border-glass: rgba(59, 130, 246, 0.15);
+      --border-glow: rgba(59, 130, 246, 0.35);
+      --text-primary: #e2e8f0;
+      --text-secondary: #94a3b8;
+      --text-muted: #475569;
+      --accent-purple: #818cf8;
+      --accent-blue: #60a5fa;
+      --accent-cyan: #22d3ee;
+      --accent-green: #34d399;
+      --accent-amber: #fbbf24;
+      --accent-rose: #fb7185;
+      --gradient-hero: linear-gradient(135deg, #818cf8 0%, #60a5fa 50%, #22d3ee 100%);
+    }
+
+    /* ─── Theme: Purple Haze — warm violet tones ─── */
+    [data-theme="purple"] {
+      --bg-primary: #0c0515;
+      --bg-secondary: #1a0a2e;
+      --bg-glass: rgba(26, 10, 46, 0.65);
+      --border-glass: rgba(168, 85, 247, 0.2);
+      --border-glow: rgba(168, 85, 247, 0.4);
+      --text-primary: #f5f3ff;
+      --text-secondary: #c4b5fd;
+      --text-muted: #7c3aed;
+      --accent-purple: #a855f7;
+      --accent-blue: #7c3aed;
+      --accent-cyan: #c084fc;
+      --accent-green: #a78bfa;
+      --accent-amber: #e879f9;
+      --accent-rose: #f472b6;
+      --gradient-hero: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #c084fc 100%);
+    }
+
     body {
       background: var(--bg-primary);
       color: var(--text-primary);
@@ -256,6 +295,21 @@ export function renderDashboardHTML(version) {
     .health-issues .issue-row {
       padding: 0.3rem 0; display: flex; gap: 0.5rem; align-items: flex-start;
     }
+    .cleanup-btn {
+      margin-left: auto; background: rgba(244,63,94,0.12); border: 1px solid rgba(244,63,94,0.3);
+      color: var(--accent-rose); cursor: pointer; font-size: 0.75rem; font-weight: 600;
+      padding: 0.2rem 0.65rem; border-radius: 6px; transition: all 0.2s;
+    }
+    .cleanup-btn:hover { background: rgba(244,63,94,0.25); border-color: var(--accent-rose); }
+    .cleanup-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .toast-fixed {
+      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200;
+      padding: 0.65rem 1.2rem; border-radius: 10px; font-size: 0.85rem; font-weight: 500;
+      backdrop-filter: blur(10px); border: 1px solid var(--border-glow);
+      background: var(--bg-secondary); color: var(--text-primary);
+      opacity: 0; transition: opacity 0.3s; pointer-events: none;
+    }
+    .toast-fixed.show { opacity: 1; }
 
     /* ─── Neural Graph (v2.3.0) ─── */
     #network-container {
@@ -270,6 +324,126 @@ export function renderDashboardHTML(version) {
       transition: color 0.2s;
     }
     .refresh-btn:hover { color: var(--accent-purple); }
+
+    /* ─── Settings Modal (v3.0) ─── */
+    .settings-btn {
+      background: none; border: 1px solid var(--border-glass);
+      color: var(--text-secondary); cursor: pointer; font-size: 1.1rem;
+      padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
+      transition: all 0.2s;
+    }
+    .settings-btn:hover { border-color: var(--border-glow); color: var(--accent-purple); }
+    .identity-chip {
+      display: none; align-items: center; gap: 0.4rem;
+      padding: 0.35rem 0.75rem; border-radius: 999px;
+      background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.25);
+      color: var(--text-secondary); font-size: 0.8rem; font-weight: 500;
+      cursor: pointer; transition: all 0.2s;
+    }
+    .identity-chip:hover { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(139,92,246,0.2); }
+    .identity-chip .role-icon { font-size: 0.9rem; }
+    .identity-chip .identity-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* Settings modal tab bar */
+    .settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-glass); margin: 0 -1.5rem 1.2rem; padding: 0 1.5rem; }
+    .s-tab { padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer;
+      border-bottom: 2px solid transparent; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
+    .s-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }
+    .s-tab:hover:not(.active) { color: var(--text-primary); }
+    .s-tab-panel { display: none; } .s-tab-panel.active { display: block; }
+    /* Skills editor */
+    .skill-role-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
+    .skill-role-row label { font-size: 0.82rem; color: var(--text-secondary); }
+    .skill-role-select { padding: 0.3rem 0.6rem; background: var(--bg-hover); color: var(--text-primary);
+      border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono); }
+    .skill-textarea { width: 100%; min-height: 220px; background: var(--bg-hover); color: var(--text-primary);
+      border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.75rem;
+      font-size: 0.82rem; font-family: var(--font-mono); line-height: 1.5; resize: vertical;
+      box-sizing: border-box; transition: border-color 0.2s; }
+    .skill-textarea:focus { outline: none; border-color: var(--accent-purple); }
+    .skill-char-count { font-size: 0.74rem; color: var(--text-muted); text-align: right; margin-top: 0.3rem; }
+    .skill-actions { display: flex; gap: 0.6rem; margin-top: 0.85rem; align-items: center; }
+    .skill-save-btn { background: var(--accent-purple); color: #fff; border: none; border-radius: var(--radius-sm);
+      padding: 0.45rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
+    .skill-save-btn:hover { opacity: 0.85; }
+    .skill-upload-btn { background: none; border: 1px solid var(--border-glass); color: var(--text-secondary);
+      border-radius: var(--radius-sm); padding: 0.45rem 0.85rem; font-size: 0.82rem; cursor: pointer; transition: all 0.2s; }
+    .skill-upload-btn:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
+    .skill-clear-btn { background: none; border: none; color: var(--text-muted); font-size: 0.8rem; cursor: pointer;
+      margin-left: auto; transition: color 0.2s; }
+    .skill-clear-btn:hover { color: #ef4444; }
+    .skill-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.5; }
+    .modal-overlay {
+      display: none; position: fixed; inset: 0; z-index: 100;
+      background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
+      justify-content: center; align-items: center;
+    }
+    .modal-overlay.active { display: flex; }
+    .modal {
+      background: var(--bg-secondary); border: 1px solid var(--border-glow);
+      border-radius: var(--radius); padding: 2rem; width: 480px; max-width: 90vw;
+      max-height: 85vh; overflow-y: auto; position: relative;
+    }
+    .modal h2 { font-size: 1.1rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
+    .modal-close {
+      position: absolute; top: 1rem; right: 1rem; background: none;
+      border: none; color: var(--text-muted); cursor: pointer; font-size: 1.25rem;
+    }
+    .modal-close:hover { color: var(--text-primary); }
+    .setting-row {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+    .setting-row:last-child { border-bottom: none; }
+    .setting-label { font-size: 0.85rem; color: var(--text-secondary); }
+    .setting-desc { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
+    .toggle {
+      position: relative; width: 44px; height: 24px;
+      background: rgba(100,116,139,0.3); border-radius: 12px;
+      cursor: pointer; transition: background 0.3s; flex-shrink: 0;
+    }
+    .toggle.active { background: var(--accent-purple); }
+    .toggle::after {
+      content: ''; position: absolute; top: 2px; left: 2px;
+      width: 20px; height: 20px; border-radius: 50%;
+      background: white; transition: transform 0.3s;
+    }
+    .toggle.active::after { transform: translateX(20px); }
+    .setting-select {
+      background: var(--bg-primary); border: 1px solid var(--border-glass);
+      color: var(--text-primary); padding: 0.4rem 0.6rem;
+      border-radius: 6px; font-size: 0.8rem; font-family: var(--font-sans);
+    }
+    .setting-section {
+      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.1em; color: var(--accent-purple); margin: 1rem 0 0.5rem;
+    }
+    .setting-saved {
+      font-size: 0.75rem; color: var(--accent-green); opacity: 0;
+      transition: opacity 0.3s; margin-left: 0.5rem;
+    }
+    .setting-saved.show { opacity: 1; }
+    .boot-badge {
+      font-size: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 4px;
+      background: rgba(245,158,11,0.15); color: var(--accent-amber);
+      font-weight: 600; text-transform: uppercase;
+    }
+
+    /* ─── Hivemind Radar (v3.0) ─── */
+    .team-list { list-style: none; padding: 0; }
+    .team-item {
+      display: flex; align-items: center; gap: 0.75rem;
+      padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
+      font-size: 0.85rem;
+    }
+    .team-item:last-child { border-bottom: none; }
+    .team-role { font-weight: 600; color: var(--text-primary); min-width: 60px; }
+    .team-task { color: var(--text-secondary); flex: 1; }
+    .team-heartbeat { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); }
+    .pulse-dot {
+      width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green);
+      flex-shrink: 0; animation: pulseDot 2s ease-in-out infinite;
+    }
+    @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
   </style>
 </head>
 <body>
@@ -282,10 +456,12 @@ export function renderDashboardHTML(version) {
         <span class="version-badge">v${version}</span>
       </div>
       <div class="selector">
+        <span class="identity-chip" id="identityChip" onclick="openSettings()" title="Agent Identity — click to change"></span>
         <select id="projectSelect">
           <option value="">Loading projects...</option>
         </select>
         <button onclick="loadProject()">Inspect</button>
+        <button class="settings-btn" onclick="openSettings()" title="Settings">⚙️</button>
       </div>
     </header>
 
@@ -319,7 +495,10 @@ export function renderDashboardHTML(version) {
 
         <!-- Brain Health (v2.2.0) -->
         <div class="card" id="healthCard" style="display:none">
-          <div class="card-title"><span class="dot" style="background:var(--accent-green)"></span> Brain Health 🩺</div>
+          <div class="card-title">
+            <span class="dot" style="background:var(--accent-green)"></span> Brain Health 🩺
+            <button class="cleanup-btn" id="cleanupBtn" onclick="cleanupIssues()" style="display:none">🧹 Fix Issues</button>
+          </div>
           <div class="health-status">
             <div class="health-dot unknown" id="healthDot"></div>
             <div>
@@ -367,11 +546,193 @@ export function renderDashboardHTML(version) {
           <div class="card-title"><span class="dot" style="background:var(--accent-amber)"></span> Session Ledger</div>
           <div class="timeline" id="ledgerTimeline"></div>
         </div>
+        </div>
+
+        <!-- Hivemind Radar (v3.0) -->
+        <div class="card" id="hivemindCard" style="display:none">
+          <div class="card-title">
+            <span class="dot" style="background:var(--accent-cyan)"></span>
+            Hivemind Radar 🐝
+            <button onclick="loadTeam()" class="refresh-btn">↻</button>
+          </div>
+          <ul class="team-list" id="teamList">
+            <li style="color:var(--text-muted);font-size:0.85rem;text-align:center;padding:1rem">
+              No active agents. Set PRISM_ENABLE_HIVEMIND=true to enable.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Settings Modal (v3.0) -->
+    <div class="modal-overlay" id="settingsModal">
+      <div class="modal">
+        <button class="modal-close" onclick="closeSettings()">✕</button>
+        <h2>⚙️ Settings</h2>
+
+        <!-- Tab bar -->
+        <div class="settings-tabs">
+          <button class="s-tab active" id="stab-settings" onclick="switchSettingsTab('settings')">⚙️ Settings</button>
+          <button class="s-tab" id="stab-skills" onclick="switchSettingsTab('skills')">📜 Skills</button>
+        </div>
+
+        <!-- Settings panel (existing content) -->
+        <div class="s-tab-panel active" id="spanel-settings">
+
+        <div class="setting-section">Runtime Settings</div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Auto-Capture HTML</div>
+            <div class="setting-desc">Capture local dev server UI on handoff save</div>
+          </div>
+          <div class="toggle" id="toggle-auto-capture" onclick="toggleSetting('auto_capture', this)"></div>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Dashboard Theme</div>
+            <div class="setting-desc">Visual theme for Mind Palace</div>
+          </div>
+          <select class="setting-select" id="select-theme" onchange="saveSetting('dashboard_theme', this.value)">
+            <option value="dark">Dark (Default)</option>
+            <option value="midnight">Midnight</option>
+            <option value="purple">Purple Haze</option>
+          </select>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Context Depth</div>
+            <div class="setting-desc">Default level for session_load_context</div>
+          </div>
+          <select class="setting-select" id="select-context-depth" onchange="saveSetting('default_context_depth', this.value)">
+            <option value="standard">Standard (~200 tokens)</option>
+            <option value="quick">Quick (~50 tokens)</option>
+            <option value="deep">Deep (~1000+ tokens)</option>
+          </select>
+        </div>
+
+        <div class="setting-section">Boot Settings <span class="boot-badge">Restart Required</span></div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Hivemind Mode</div>
+            <div class="setting-desc">Multi-agent coordination (PRISM_ENABLE_HIVEMIND)</div>
+          </div>
+          <div class="toggle" id="toggle-hivemind" onclick="toggleBootSetting('hivemind_enabled', this)"></div>
+        </div>
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Storage Backend</div>
+            <div class="setting-desc">Switch between SQLite and Supabase</div>
+          </div>
+          <select id="storageBackendSelect" onchange="window.saveBootSetting('PRISM_STORAGE', this.value)" style="padding: 0.2rem 0.4rem; background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono); cursor: pointer;">
+            <option value="local">SQLite</option>
+            <option value="supabase">Supabase</option>
+          </select>
+        </div>
+
+        <div class="setting-section">Agent Identity</div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Default Role</div>
+            <div class="setting-desc">Used when no role is passed to memory/Hivemind tools</div>
+          </div>
+          <select class="setting-select" id="select-default-role" onchange="saveSetting('default_role', this.value)">
+            <option value="global">global (shared)</option>
+            <option value="dev">dev</option>
+            <option value="qa">qa</option>
+            <option value="pm">pm</option>
+            <option value="lead">lead</option>
+            <option value="security">security</option>
+            <option value="ux">ux</option>
+          </select>
+        </div>
+
+        <div class="setting-row">
+          <div>
+            <div class="setting-label">Agent Name</div>
+            <div class="setting-desc">Display name shown in Hivemind Radar (e.g. Dmitri, Dev Alex)</div>
+          </div>
+          <input type="text" id="input-agent-name"
+            placeholder="e.g. Dmitri"
+            style="padding: 0.2rem 0.5rem; background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.85rem; font-family: var(--font-mono); width: 130px;"
+            onchange="saveSetting('agent_name', this.value)"
+            oninput="clearTimeout(this._t); this._t=setTimeout(()=>saveSetting('agent_name',this.value),800)" />
+        </div>
+
+        <span class="setting-saved" id="savedToast">Saved ✓</span>
+        </div><!-- /spanel-settings -->
+
+        <!-- Skills panel -->
+        <div class="s-tab-panel" id="spanel-skills">
+          <div class="skill-role-row">
+            <label>Role</label>
+            <select class="skill-role-select" id="skillRoleSelect" onchange="loadSkillForRole(this.value)">
+              <option value="global">🌐 global</option>
+              <option value="dev">🛠️ dev</option>
+              <option value="qa">🔍 qa</option>
+              <option value="pm">📋 pm</option>
+              <option value="lead">🏗️ lead</option>
+              <option value="security">🔒 security</option>
+              <option value="ux">🎨 ux</option>
+            </select>
+          </div>
+          <textarea class="skill-textarea" id="skillTextarea"
+            placeholder="Paste rules, conventions, or prompts for this role...
+Example:\n## Dev Rules\n- Always write tests first\n- Use TypeScript strict mode\n- Log errors to console.error"
+            oninput="document.getElementById('skillCharCount').textContent = this.value.length + ' chars'">
+          </textarea>
+          <div class="skill-char-count" id="skillCharCount">0 chars</div>
+          <div class="skill-actions">
+            <button class="skill-save-btn" onclick="saveCurrentSkill()">💾 Save</button>
+            <label class="skill-upload-btn" title="Upload a .md or .txt file">
+              📎 Upload file
+              <input type="file" accept=".md,.txt,.markdown" style="display:none"
+                onchange="handleSkillUpload(this)">
+            </label>
+            <button class="skill-clear-btn" onclick="clearCurrentSkill()">🗑️ Clear</button>
+          </div>
+          <div class="skill-hint">
+            Skills are auto-injected into <code>session_load_context</code> responses for this role.<br>
+            Use Markdown. Changes take effect immediately — no restart needed.
+          </div>
+        </div><!-- /spanel-skills -->
+
       </div>
     </div>
   </div>
 
+  <!-- Fixed toast for cleanup feedback -->
+  <div class="toast-fixed" id="fixedToast"></div>
+
   <script>
+    // Role icon map
+    var ROLE_ICONS = {dev:'🛠️',qa:'🔍',pm:'📋',lead:'🏗️',security:'🔒',ux:'🎨',global:'🌐',cmo:'📢'};
+
+    // Load and render the identity chip from settings
+    async function loadIdentityChip() {
+      try {
+        var res = await fetch('/api/settings');
+        var data = await res.json();
+        var s = data.settings || {};
+        var role = s.default_role || '';
+        var name = s.agent_name || '';
+        var chip = document.getElementById('identityChip');
+        if (!chip) return;
+        if (role && role !== 'global' || name) {
+          var icon = ROLE_ICONS[role] || '🤖';
+          var label = name ? (role && role !== 'global' ? role + ' · ' + name : name) : role;
+          chip.innerHTML = '<span class="role-icon">' + icon + '</span><span class="identity-label">' + escapeHtml(label) + '</span>';
+          chip.style.display = 'flex';
+        } else {
+          chip.style.display = 'none';
+        }
+      } catch(e) { /* silently skip */ }
+    }
+
     // Auto-load project list on page load
     (async function() {
       try {
@@ -387,6 +748,8 @@ export function renderDashboardHTML(version) {
       } catch(e) {
         document.getElementById('projectSelect').innerHTML = '<option value="">Error loading projects</option>';
       }
+      // Load identity chip once settings are available
+      loadIdentityChip();
     })();
 
     async function loadProject() {
@@ -508,6 +871,7 @@ export function renderDashboardHTML(version) {
 
           // Issue rows
           var issues = healthData.issues || [];
+          var cleanupBtn = document.getElementById('cleanupBtn');
           if (issues.length > 0) {
             var sevIcons = { error: '🔴', warning: '🟡', info: '🔵' };
             healthIssues.innerHTML = issues.map(function(i) {
@@ -516,8 +880,10 @@ export function renderDashboardHTML(version) {
                 '<span>' + escapeHtml(i.message) + '</span>' +
                 '</div>';
             }).join('');
+            if (cleanupBtn) cleanupBtn.style.display = 'inline-block';
           } else {
             healthIssues.innerHTML = '<div style="color:var(--accent-green);font-size:0.8rem">🎉 No issues found</div>';
+            if (cleanupBtn) cleanupBtn.style.display = 'none';
           }
 
           healthCard.style.display = 'block';
@@ -528,6 +894,7 @@ export function renderDashboardHTML(version) {
 
         document.getElementById('content').className = 'grid grid-main fade-in';
         document.getElementById('content').style.display = 'grid';
+        loadTeam(); // v3.0: auto-load Hivemind team
       } catch(e) {
         alert('Failed to load project data: ' + e.message);
       } finally {
@@ -618,6 +985,249 @@ export function renderDashboardHTML(version) {
 
     // Initialize the graph on page load
     loadGraph();
+
+    // ─── Settings Modal (v3.0) ───
+    function openSettings() {
+      document.getElementById('settingsModal').classList.add('active');
+      loadSettings();
+    }
+    function closeSettings() {
+      document.getElementById('settingsModal').classList.remove('active');
+    }
+    // Close on overlay click
+    document.getElementById('settingsModal').addEventListener('click', function(e) {
+      if (e.target === this) closeSettings();
+    });
+
+    // ─── Skills Tab JS ───────────────────────────────────────────
+    var _skillsCache = {};  // role → content cache
+
+    function switchSettingsTab(tab) {
+      ['settings','skills'].forEach(function(t) {
+        document.getElementById('stab-' + t).classList.toggle('active', t === tab);
+        document.getElementById('spanel-' + t).classList.toggle('active', t === tab);
+      });
+      if (tab === 'skills') {
+        // Load skill for whichever role is currently selected
+        var role = document.getElementById('skillRoleSelect').value;
+        loadSkillForRole(role);
+      }
+    }
+
+    async function loadSkillForRole(role) {
+      try {
+        var res = await fetch('/api/skills');
+        var data = await res.json();
+        _skillsCache = data.skills || {};
+        var content = _skillsCache[role] || '';
+        var ta = document.getElementById('skillTextarea');
+        ta.value = content;
+        document.getElementById('skillCharCount').textContent = content.length + ' chars';
+      } catch(e) { console.warn('Skills load failed:', e); }
+    }
+
+    async function saveCurrentSkill() {
+      var role = document.getElementById('skillRoleSelect').value;
+      var content = document.getElementById('skillTextarea').value;
+      try {
+        await fetch('/api/skills', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ role: role, content: content })
+        });
+        _skillsCache[role] = content;
+        showFixedToast('✅ Skill saved for ' + role, true);
+      } catch(e) { showFixedToast('❌ Save failed', false); }
+    }
+
+    async function clearCurrentSkill() {
+      var role = document.getElementById('skillRoleSelect').value;
+      try {
+        await fetch('/api/skills/' + role, { method: 'DELETE' });
+        document.getElementById('skillTextarea').value = '';
+        document.getElementById('skillCharCount').textContent = '0 chars';
+        _skillsCache[role] = '';
+        showFixedToast('🗑️ Skill cleared for ' + role, true);
+      } catch(e) { showFixedToast('❌ Clear failed', false); }
+    }
+
+    function handleSkillUpload(input) {
+      var file = input.files[0];
+      if (!file) return;
+      var reader = new FileReader();
+      reader.onload = async function(e) {
+        var content = e.target.result;
+        var ta = document.getElementById('skillTextarea');
+        ta.value = content;
+        document.getElementById('skillCharCount').textContent = content.length + ' chars';
+        // Auto-save after upload
+        await saveCurrentSkill();
+      };
+      reader.readAsText(file);
+      input.value = '';  // reset so same file can be re-uploaded
+    }
+
+
+      async function loadSettings() {
+      try {
+        var res = await fetch('/api/settings');
+        var data = await res.json();
+        var s = data.settings || {};
+        // Runtime toggles
+        if (s.auto_capture === 'true') document.getElementById('toggle-auto-capture').classList.add('active');
+        else document.getElementById('toggle-auto-capture').classList.remove('active');
+        // Context depth
+        if (s.default_context_depth) document.getElementById('select-context-depth').value = s.default_context_depth;
+        // Theme
+        if (s.dashboard_theme) {
+          document.getElementById('select-theme').value = s.dashboard_theme;
+          applyTheme(s.dashboard_theme);
+        }
+        // Boot toggles
+        if (s.hivemind_enabled === 'true') document.getElementById('toggle-hivemind').classList.add('active');
+        else document.getElementById('toggle-hivemind').classList.remove('active');
+        
+        // Storage Backend
+        if (s.PRISM_STORAGE) {
+          document.getElementById('storageBackendSelect').value = s.PRISM_STORAGE;
+        }
+        // Agent Identity
+        if (s.default_role) document.getElementById('select-default-role').value = s.default_role;
+        if (s.agent_name) document.getElementById('input-agent-name').value = s.agent_name;
+      } catch(e) { console.warn('Settings load failed:', e); }
+    }
+
+    function toggleSetting(key, el) {
+      var isActive = el.classList.toggle('active');
+      saveSetting(key, isActive ? 'true' : 'false');
+    }
+    function toggleBootSetting(key, el) {
+      var isActive = el.classList.toggle('active');
+      saveSetting(key, isActive ? 'true' : 'false');
+      showToast('Saved. Restart your AI client for this to take effect.');
+    }
+    function saveBootSetting(key, value) {
+      saveSetting(key, value);
+      showToast('Saved. Restart your AI client for this to take effect.');
+    }
+
+    async function saveSetting(key, value) {
+      try {
+        await fetch('/api/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ key: key, value: value })
+        });
+        if (key === 'dashboard_theme') applyTheme(value);
+        // Refresh identity chip if role or name changed
+        if (key === 'default_role' || key === 'agent_name') loadIdentityChip();
+        showToast('Saved ✓');
+      } catch(e) { console.error('Setting save failed:', e); }
+    }
+
+    /**
+     * applyTheme — sets the data-theme attribute on <html>
+     * CSS custom properties in [data-theme="..."] blocks
+     * override :root defaults instantly, no page reload needed.
+     */
+    function applyTheme(theme) {
+      document.documentElement.setAttribute('data-theme', theme || 'dark');
+    }
+
+    function showToast(msg) {
+      var toast = document.getElementById('savedToast');
+      toast.textContent = msg || 'Saved ✓';
+      toast.classList.add('show');
+      setTimeout(function() { toast.classList.remove('show'); }, 2000);
+    }
+
+    // ─── Hivemind Radar (v3.0) ───
+    async function loadTeam() {
+      var project = document.getElementById('projectSelect').value;
+      if (!project) return;
+      var card = document.getElementById('hivemindCard');
+      try {
+        var res = await fetch('/api/team?project=' + encodeURIComponent(project));
+        var data = await res.json();
+        var team = data.team || [];
+        var list = document.getElementById('teamList');
+        if (team.length > 0) {
+          var roleIcons = {dev:'🛠️',qa:'🔍',pm:'📋',lead:'🏗️',security:'🔒',ux:'🎨',cmo:'📢'};
+          list.innerHTML = team.map(function(a) {
+            var icon = roleIcons[a.role] || '🤖';
+            var ago = a.last_heartbeat ? timeAgo(a.last_heartbeat) : '?';
+            return '<li class="team-item">' +
+              '<span class="pulse-dot"></span>' +
+              '<span class="team-role">' + icon + ' ' + escapeHtml(a.role) + '</span>' +
+              '<span class="team-task">' + escapeHtml(a.current_task || 'idle') + '</span>' +
+              '<span class="team-heartbeat">' + ago + '</span></li>';
+          }).join('');
+          card.style.display = 'block';
+        } else {
+          list.innerHTML = '<li style="color:var(--text-muted);font-size:0.85rem;text-align:center;padding:1rem">No active agents on this project.</li>';
+          card.style.display = 'block';
+        }
+      } catch(e) {
+        console.warn('Team load failed:', e);
+      }
+    }
+
+    function timeAgo(iso) {
+      var diff = Date.now() - new Date(iso).getTime();
+      var mins = Math.floor(diff / 60000);
+      if (mins < 1) return 'just now';
+      if (mins < 60) return mins + 'm ago';
+      return Math.floor(mins/60) + 'h ago';
+    }
+
+    // ─── Brain Health Cleanup (v3.1) ───
+    async function cleanupIssues() {
+      var btn = document.getElementById('cleanupBtn');
+      if (btn) { btn.disabled = true; btn.textContent = 'Cleaning...'; }
+      try {
+        var res = await fetch('/api/health/cleanup', { method: 'POST' });
+        var data = await res.json();
+        showFixedToast(data.message || (data.ok ? 'Cleanup complete.' : 'Cleanup failed.'), data.ok);
+        // Re-run health check to refresh the card
+        setTimeout(async function() {
+          try {
+            var healthRes = await fetch('/api/health');
+            var healthData = await healthRes.json();
+            var healthDot = document.getElementById('healthDot');
+            var healthLabel = document.getElementById('healthLabel');
+            var healthSummary = document.getElementById('healthSummary');
+            var healthIssues = document.getElementById('healthIssues');
+            var cleanupBtn = document.getElementById('cleanupBtn');
+            var statusMap = { healthy: '✅ Healthy', degraded: '⚠️ Degraded', unhealthy: '🔴 Unhealthy' };
+            healthDot.className = 'health-dot ' + (healthData.status || 'unknown');
+            healthLabel.textContent = statusMap[healthData.status] || '❓ Unknown';
+            var t = healthData.totals || {};
+            healthSummary.textContent = (t.activeEntries || 0) + ' entries · ' + (t.handoffs || 0) + ' handoffs · ' + (t.rollups || 0) + ' rollups';
+            var issues = healthData.issues || [];
+            if (issues.length > 0) {
+              var sevIcons = { error: '🔴', warning: '🟡', info: '🔵' };
+              healthIssues.innerHTML = issues.map(function(i) {
+                return '<div class="issue-row"><span>' + (sevIcons[i.severity] || '❓') + '</span><span>' + escapeHtml(i.message) + '</span></div>';
+              }).join('');
+              if (cleanupBtn) { cleanupBtn.disabled = false; cleanupBtn.textContent = '🧹 Fix Issues'; cleanupBtn.style.display = 'inline-block'; }
+            } else {
+              healthIssues.innerHTML = '<div style="color:var(--accent-green);font-size:0.8rem">🎉 No issues found</div>';
+              if (cleanupBtn) cleanupBtn.style.display = 'none';
+            }
+          } catch(e) {}
+        }, 400);
+      } catch(e) {
+        showFixedToast('Cleanup request failed.', false);
+        if (btn) { btn.disabled = false; btn.textContent = '🧹 Fix Issues'; }
+      }
+    }
+
+    function showFixedToast(msg, ok) {
+      var t = document.getElementById('fixedToast');
+      t.textContent = (ok === false ? '❌ ' : '✅ ') + msg;
+      t.classList.add('show');
+      setTimeout(function() { t.classList.remove('show'); }, 3500);
+    }
   </script>
 </body>
 </html>`;