brainforge-ai 1.2.0 → 1.2.2

package/dist/core/dashboardTemplate.js

@@ -27,46 +27,162 @@ function getDashboardHtml() {
         <div class="meta-item"><span class="label">User Level</span><span id="user-level"></span></div>
         <div class="meta-item"><span class="label">Code Level</span><span id="code-level" class="badge"></span></div>
         <div class="meta-item"><span class="label">Git</span><span id="git-status"></span></div>
+        <div class="meta-item"><span class="label">Complexity</span><span id="complexity"></span></div>
+        <div class="meta-item"><span class="label">Academic Readiness</span><span id="academic-readiness"></span></div>
       </div>
     </section>
 
-    <section class="progress-section">
-      <div class="section-header">
-        <h2>Phases</h2>
-        <span id="phase-counter" class="counter"></span>
-      </div>
-      <div class="progress-bar-wrap">
-        <div id="progress-bar" class="progress-bar"></div>
+    <!-- Tab Navigation -->
+    <nav class="tab-nav">
+      <button class="tab-btn active" data-tab="overview">Overview</button>
+      <button class="tab-btn" data-tab="phases">Phases</button>
+      <button class="tab-btn" data-tab="memory">Memory</button>
+      <button class="tab-btn" data-tab="study">Study</button>
+      <button class="tab-btn" data-tab="defense">Defense</button>
+      <button class="tab-btn" data-tab="docs">Docs Hub</button>
+      <button class="tab-btn" data-tab="agents">Agents</button>
+      <button class="tab-btn" data-tab="reports">Reports</button>
+    </nav>
+
+    <!-- Overview Tab -->
+    <div class="tab-content active" id="tab-overview">
+      <section class="progress-section card">
+        <div class="section-header">
+          <h2>Progress</h2>
+          <span id="phase-counter" class="counter"></span>
+        </div>
+        <div class="progress-bar-wrap">
+          <div id="progress-bar" class="progress-bar"></div>
+        </div>
+        <div id="phases-list-overview" class="phases-list"></div>
+      </section>
+
+      <div class="two-col">
+        <section class="card">
+          <h2>Recent Commits</h2>
+          <ul id="commits-list" class="list"></ul>
+        </section>
+        <section class="card">
+          <h2>Known Bugs</h2>
+          <ul id="bugs-list" class="list"></ul>
+        </section>
       </div>
-      <div id="phases-list" class="phases-list"></div>
-    </section>
 
-    <div class="two-col">
       <section class="card">
-        <h2>Recent Commits</h2>
-        <ul id="commits-list" class="list"></ul>
+        <h2>Last Decisions</h2>
+        <ul id="decisions-list" class="list"></ul>
       </section>
 
       <section class="card">
-        <h2>Known Bugs</h2>
-        <ul id="bugs-list" class="list"></ul>
+        <h2>Project Depth</h2>
+        <div id="depth-grid" class="depth-grid"></div>
       </section>
     </div>
 
-    <section class="card">
-      <h2>Last Decisions</h2>
-      <ul id="decisions-list" class="list"></ul>
-    </section>
+    <!-- Phases Tab -->
+    <div class="tab-content" id="tab-phases">
+      <section class="card">
+        <h2>All Phases</h2>
+        <div id="phases-list-full" class="phases-list"></div>
+      </section>
+    </div>
+
+    <!-- Memory Tab -->
+    <div class="tab-content" id="tab-memory">
+      <section class="card">
+        <h2>Memory Files</h2>
+        <p class="tab-hint">These files keep your project context. Run <code>brainforge serve</code> to read them.</p>
+        <div id="memory-docs-grid" class="docs-grid"></div>
+      </section>
+    </div>
+
+    <!-- Study Tab -->
+    <div class="tab-content" id="tab-study">
+      <section class="card">
+        <h2>Study Mode</h2>
+        <div id="study-status" class="status-banner"></div>
+        <div id="study-docs-grid" class="docs-grid"></div>
+        <div class="cmd-hint">
+          <span class="cmd-label">Run to enable:</span>
+          <code>brainforge study</code>
+          <span class="cmd-label">then:</span>
+          <code>/study-phase 1</code>
+        </div>
+      </section>
+    </div>
+
+    <!-- Defense Tab -->
+    <div class="tab-content" id="tab-defense">
+      <section class="card">
+        <h2>Defense Pack</h2>
+        <div id="defense-checklist" class="checklist"></div>
+        <div class="cmd-hint">
+          <span class="cmd-label">Run:</span>
+          <code>brainforge defense-pack</code>
+          <span class="cmd-label">then:</span>
+          <code>/defense-pack</code>
+        </div>
+      </section>
+    </div>
+
+    <!-- Docs Hub Tab -->
+    <div class="tab-content" id="tab-docs">
+      <section class="card">
+        <h2>Docs Hub</h2>
+        <p class="tab-hint">Click a card to preview the file. Run <code>brainforge serve</code> for full file reading.</p>
+        <div id="doc-viewer" class="doc-viewer hidden">
+          <div class="doc-viewer-header">
+            <span id="doc-viewer-title"></span>
+            <button id="doc-viewer-close" class="close-btn">✕</button>
+          </div>
+          <pre id="doc-viewer-content" class="doc-viewer-content"></pre>
+        </div>
+        <div id="docs-by-category"></div>
+      </section>
+    </div>
+
+    <!-- Agents Tab -->
+    <div class="tab-content" id="tab-agents">
+      <section class="card">
+        <h2>Agent Families</h2>
+        <p class="tab-hint">Use <code>/router</code> to find the right agent for your task.</p>
+        <div id="agents-grid" class="agents-grid"></div>
+      </section>
+    </div>
+
+    <!-- Reports Tab -->
+    <div class="tab-content" id="tab-reports">
+      <section class="card">
+        <h2>Reports</h2>
+        <div id="reports-docs-grid" class="docs-grid"></div>
+        <div class="cmd-hint">
+          <span class="cmd-label">Generate:</span>
+          <code>brainforge professor-check</code>
+          <code>brainforge difficulty</code>
+          <code>brainforge defense-pack</code>
+        </div>
+      </section>
+    </div>
 
     <footer class="footer">
-      Powered by <strong>BrainForge</strong> — structured AI development
+      Powered by <strong>BrainForge v1.2</strong> — structured AI development
     </footer>
   </div>
 
   <script>
+    // Tab navigation
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tab = btn.dataset.tab;
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+        btn.classList.add('active');
+        document.getElementById('tab-' + tab).classList.add('active');
+      });
+    });
+
     async function loadData() {
       try {
-        // Use inlined data (file:// mode) or fetch (http:// mode via brainforge serve)
         let d = window.__BRAINFORGE_DATA__;
         if (!d) {
           const res = await fetch('data.json?t=' + Date.now());
@@ -74,42 +190,57 @@ function getDashboardHtml() {
         }
 
         document.title = 'BrainForge — ' + d.projectName;
-        document.getElementById('project-name').textContent = d.projectName;
-        document.getElementById('project-description').textContent = d.description || 'No description yet.';
-        document.getElementById('project-type').textContent = d.projectType || '—';
-        document.getElementById('project-stack').textContent = (d.stack || []).join(', ') || '—';
-        document.getElementById('user-level').textContent = d.userLevel || '—';
-        document.getElementById('code-level').textContent = d.codeLevel || '—';
-        document.getElementById('git-status').textContent = d.gitStatus || '—';
-        document.getElementById('updated-at').textContent = 'Updated: ' + new Date(d.updatedAt).toLocaleString();
-
+        setText('project-name', d.projectName);
+        setText('project-description', d.description || 'No description yet.');
+        setText('project-type', d.projectType || '—');
+        setText('project-stack', (d.stack || []).join(', ') || '—');
+        setText('user-level', d.userLevel || '—');
+        setText('code-level', d.codeLevel || '—');
+        setText('git-status', d.gitStatus || '—');
+        setText('updated-at', 'Updated: ' + new Date(d.updatedAt).toLocaleString());
+
+        const pd = d.projectDepth || {};
+        setText('complexity', pd.estimatedComplexity || '—');
+        setText('academic-readiness', pd.academicReadiness || '—');
+
+        // Progress
         const done = (d.phases || []).filter(p => p.status === 'done').length;
         const total = d.totalPhases || d.phases?.length || 0;
-        document.getElementById('phase-counter').textContent = done + ' / ' + total + ' done';
+        setText('phase-counter', done + ' / ' + total + ' done');
         const pct = total > 0 ? Math.round((done / total) * 100) : 0;
-        document.getElementById('progress-bar').style.width = pct + '%';
-        document.getElementById('progress-bar').textContent = pct + '%';
-
-        const phasesList = document.getElementById('phases-list');
-        (d.phases || []).forEach(p => {
-          const div = document.createElement('div');
-          div.className = 'phase-item ' + p.status;
-          div.innerHTML = '<span class="phase-num">' + String(p.id).padStart(2,'0') + '</span>'
-            + '<span class="phase-title">' + p.title + '</span>'
-            + '<span class="phase-status ' + p.status + '">' + p.status + '</span>';
-          phasesList.appendChild(div);
-        });
+        const pb = document.getElementById('progress-bar');
+        pb.style.width = pct + '%';
+        pb.textContent = pct + '%';
+
+        renderPhases('phases-list-overview', d.phases || []);
+        renderPhases('phases-list-full', d.phases || []);
 
         renderList('commits-list', d.recentCommits, 'No commits yet.');
         renderList('bugs-list', d.knownBugs, 'No bugs tracked.');
         renderList('decisions-list', d.decisions, 'No decisions recorded.');
+
+        renderDepthGrid(pd);
+        renderDocsByCategory('docs-by-category', d.docs || []);
+        renderDocsByCategory('memory-docs-grid', (d.docs || []).filter(dc => dc.category === 'Memory'), true);
+        renderDocsByCategory('study-docs-grid', (d.docs || []).filter(dc => dc.category === 'Study'), true);
+        renderDocsByCategory('reports-docs-grid', (d.docs || []).filter(dc => dc.category === 'Reports'), true);
+        renderStudyStatus(d.study || {});
+        renderDefenseChecklist(d.defense || {});
+        renderAgentsGrid(d.agents || []);
+
       } catch (e) {
-        document.body.innerHTML += '<p style="color:red;padding:1rem">Error loading data.json: ' + e.message + '</p>';
+        document.body.innerHTML += '<p style="color:red;padding:1rem">Error loading data.json: ' + e.message + '. Run brainforge serve for live loading.</p>';
       }
     }
 
+    function setText(id, val) {
+      const el = document.getElementById(id);
+      if (el) el.textContent = val;
+    }
+
     function renderList(id, items, empty) {
       const el = document.getElementById(id);
+      if (!el) return;
       if (!items || items.length === 0) {
         el.innerHTML = '<li class="empty">' + empty + '</li>';
         return;
@@ -117,6 +248,142 @@ function getDashboardHtml() {
       el.innerHTML = items.map(i => '<li>' + i + '</li>').join('');
     }
 
+    function renderPhases(id, phases) {
+      const el = document.getElementById(id);
+      if (!el) return;
+      if (!phases.length) { el.innerHTML = '<p class="empty">No phases yet.</p>'; return; }
+      el.innerHTML = phases.map(p =>
+        '<div class="phase-item ' + p.status + '">'
+        + '<span class="phase-num">' + String(p.id).padStart(2,'0') + '</span>'
+        + '<span class="phase-title">' + p.title + '</span>'
+        + '<span class="phase-status ' + p.status + '">' + p.status + '</span>'
+        + '</div>'
+      ).join('');
+    }
+
+    function renderDepthGrid(pd) {
+      const el = document.getElementById('depth-grid');
+      if (!el) return;
+      const items = [
+        { label: 'Agents', value: pd.totalAgents || 0 },
+        { label: 'Commands', value: pd.totalCommands || 0 },
+        { label: 'Phases', value: pd.totalPhases || 0 },
+        { label: 'Memory Files', value: pd.totalMemoryFiles || 0 },
+        { label: 'Reports', value: pd.totalReports || 0 },
+        { label: 'Total MD Files', value: pd.totalMarkdownFiles || 0 },
+      ];
+      el.innerHTML = items.map(i =>
+        '<div class="depth-item"><span class="depth-value">' + i.value + '</span><span class="label">' + i.label + '</span></div>'
+      ).join('');
+    }
+
+    function renderDocsByCategory(id, docs, flat) {
+      const el = document.getElementById(id);
+      if (!el) return;
+      if (!docs.length) { el.innerHTML = '<p class="empty">No docs found.</p>'; return; }
+
+      if (flat) {
+        el.innerHTML = docs.map(doc => docCard(doc)).join('');
+        return;
+      }
+
+      const cats = {};
+      docs.forEach(doc => {
+        if (!cats[doc.category]) cats[doc.category] = [];
+        cats[doc.category].push(doc);
+      });
+
+      el.innerHTML = Object.entries(cats).map(([cat, catDocs]) =>
+        '<div class="doc-category">'
+        + '<h3 class="doc-cat-title">' + cat + '</h3>'
+        + '<div class="doc-cat-grid">' + catDocs.map(doc => docCard(doc)).join('') + '</div>'
+        + '</div>'
+      ).join('');
+    }
+
+    function docCard(doc) {
+      const cls = doc.exists ? 'doc-card' : 'doc-card missing';
+      const badge = doc.exists ? '<span class="doc-badge exists">exists</span>' : '<span class="doc-badge missing">missing</span>';
+      return '<div class="' + cls + '" data-path="' + doc.path + '" onclick="openDoc(this)">'
+        + '<div class="doc-card-title">' + doc.title + '</div>'
+        + '<div class="doc-card-path">' + doc.path + '</div>'
+        + badge
+        + '</div>';
+    }
+
+    async function openDoc(el) {
+      const p = el.dataset.path;
+      const viewer = document.getElementById('doc-viewer');
+      const title = document.getElementById('doc-viewer-title');
+      const content = document.getElementById('doc-viewer-content');
+      title.textContent = p;
+      content.textContent = 'Loading...';
+      viewer.classList.remove('hidden');
+      try {
+        const res = await fetch('../' + p.replace('.brainforge/', '') + '?t=' + Date.now());
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        content.textContent = await res.text();
+      } catch {
+        content.textContent = 'Cannot read file in file:// mode.\\nRun: brainforge serve';
+      }
+    }
+
+    document.getElementById('doc-viewer-close').addEventListener('click', () => {
+      document.getElementById('doc-viewer').classList.add('hidden');
+    });
+
+    function renderStudyStatus(study) {
+      const el = document.getElementById('study-status');
+      if (!el) return;
+      if (study.enabled) {
+        el.className = 'status-banner success';
+        el.textContent = 'Study Mode enabled — ' + (study.files || []).length + ' file(s)';
+      } else {
+        el.className = 'status-banner warn';
+        el.textContent = 'Study Mode not initialized. Run: brainforge study';
+      }
+    }
+
+    function renderDefenseChecklist(defense) {
+      const el = document.getElementById('defense-checklist');
+      if (!el) return;
+      const items = [
+        { label: 'Defense Pack report', ok: defense.reportExists },
+        { label: 'Professor Check report', ok: defense.professorCheckExists },
+        { label: 'Difficulty Report', ok: defense.difficultyReportExists },
+      ];
+      el.innerHTML = items.map(item =>
+        '<div class="check-item ' + (item.ok ? 'ok' : 'missing') + '">'
+        + '<span class="check-icon">' + (item.ok ? '✔' : '✖') + '</span>'
+        + '<span>' + item.label + '</span>'
+        + '</div>'
+      ).join('');
+    }
+
+    function renderAgentsGrid(agents) {
+      const el = document.getElementById('agents-grid');
+      if (!el) return;
+      if (!agents.length) { el.innerHTML = '<p class="empty">No agents found. Run brainforge update.</p>'; return; }
+
+      const families = {};
+      agents.forEach(a => {
+        if (!families[a.family]) families[a.family] = [];
+        families[a.family].push(a);
+      });
+
+      el.innerHTML = Object.entries(families).map(([fam, agts]) =>
+        '<div class="agent-family">'
+        + '<h3 class="agent-family-title">' + fam + '</h3>'
+        + agts.map(a =>
+          '<div class="agent-card">'
+          + '<div class="agent-title">' + a.title + '</div>'
+          + '<div class="agent-summary">' + a.summary + '</div>'
+          + '</div>'
+        ).join('')
+        + '</div>'
+      ).join('');
+    }
+
     loadData();
   </script>
 </body>
@@ -149,11 +416,7 @@ body {
   min-height: 100vh;
 }
 
-.container {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
+.container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
 
 .header {
   display: flex;
@@ -162,13 +425,7 @@ body {
   margin-bottom: 2rem;
 }
 
-.logo {
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--primary-light);
-  letter-spacing: -0.5px;
-}
-
+.logo { font-size: 1.4rem; font-weight: 700; color: var(--primary-light); letter-spacing: -0.5px; }
 .updated-at { color: var(--muted); font-size: 0.8rem; }
 
 .project-card {
@@ -181,12 +438,13 @@ body {
 
 h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.4rem; }
 h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: var(--primary-light); }
+h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
 
 .description { color: var(--muted); margin-bottom: 1.25rem; }
 
 .meta-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 0.75rem;
 }
 
@@ -212,7 +470,41 @@ h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: var(--pri
   width: fit-content;
 }
 
-.progress-section {
+/* Tab Navigation */
+.tab-nav {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 1.5rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.tab-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 0.45rem 0.9rem;
+  border-radius: 7px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.15s;
+}
+
+.tab-btn:hover { background: var(--surface2); color: var(--text); }
+.tab-btn.active { background: var(--primary); color: #fff; }
+
+.tab-content { display: none; }
+.tab-content.active { display: block; }
+
+.tab-hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; }
+.tab-hint code { background: var(--surface2); padding: 1px 6px; border-radius: 4px; font-size: 0.8rem; }
+
+/* Cards */
+.card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -220,13 +512,18 @@ h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: var(--pri
   margin-bottom: 1.5rem;
 }
 
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
+@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
+
+.progress-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
 }
 
+.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
 .counter { color: var(--muted); font-size: 0.85rem; }
 
 .progress-bar-wrap {
@@ -264,64 +561,198 @@ h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: var(--pri
 }
 
 .phase-item.done { border-left-color: var(--success); }
-.phase-item.in-progress { border-left-color: var(--primary); }
-.phase-item.pending { border-left-color: var(--border); }
+.phase-item.in-progress { border-left-color: var(--warning); }
 
-.phase-num { color: var(--muted); font-size: 0.8rem; font-weight: 600; min-width: 24px; }
-.phase-title { flex: 1; font-size: 0.9rem; }
+.phase-num { font-size: 0.8rem; color: var(--muted); min-width: 28px; }
+.phase-title { flex: 1; }
 
 .phase-status {
   font-size: 0.72rem;
-  font-weight: 600;
   padding: 2px 8px;
   border-radius: 20px;
-  text-transform: capitalize;
+  font-weight: 600;
+  text-transform: uppercase;
+  background: var(--surface);
+  color: var(--muted);
 }
-.phase-status.done { background: #14532d; color: var(--success); }
-.phase-status.in-progress { background: #1e1b4b; color: var(--primary-light); }
-.phase-status.pending { background: var(--surface); color: var(--muted); }
 
-.two-col {
+.phase-status.done { background: rgba(34,197,94,0.15); color: var(--success); }
+.phase-status.in-progress { background: rgba(245,158,11,0.15); color: var(--warning); }
+
+.list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
+.list li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
+.list li:last-child { border-bottom: none; }
+.list .empty { color: var(--muted); font-style: italic; }
+
+/* Depth grid */
+.depth-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
-  margin-bottom: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 0.75rem;
 }
 
-@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
+.depth-item {
+  background: var(--surface2);
+  border-radius: 8px;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
 
-.card {
-  background: var(--surface);
+.depth-value { font-size: 1.6rem; font-weight: 700; color: var(--primary-light); }
+
+/* Docs grid */
+.docs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.doc-category { margin-bottom: 1.5rem; }
+.doc-cat-title { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
+.doc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
+
+.doc-card {
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.doc-card:hover { border-color: var(--primary); }
+.doc-card.missing { opacity: 0.5; cursor: default; }
+.doc-card.missing:hover { border-color: var(--border); }
+
+.doc-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
+.doc-card-path { font-size: 0.7rem; color: var(--muted); margin-bottom: 0.4rem; word-break: break-all; }
+
+.doc-badge {
+  display: inline-block;
+  font-size: 0.68rem;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.doc-badge.exists { background: rgba(34,197,94,0.15); color: var(--success); }
+.doc-badge.missing { background: rgba(239,68,68,0.15); color: var(--error); }
+
+/* Doc viewer */
+.doc-viewer {
+  background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 1.5rem;
+  padding: 1rem;
   margin-bottom: 1.5rem;
 }
 
-.list {
-  list-style: none;
+.doc-viewer.hidden { display: none; }
+
+.doc-viewer-header {
   display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.doc-viewer-content {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--text);
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.close-btn:hover { background: var(--surface); }
+
+/* Status banners */
+.status-banner {
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+.status-banner.success { background: rgba(34,197,94,0.12); color: var(--success); border: 1px solid rgba(34,197,94,0.2); }
+.status-banner.warn { background: rgba(245,158,11,0.12); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }
+
+/* Defense checklist */
+.checklist { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
+
+.check-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.9rem;
 }
 
-.list li {
-  padding: 0.4rem 0.6rem;
+.check-item.ok { background: rgba(34,197,94,0.08); }
+.check-item.missing { background: rgba(239,68,68,0.08); }
+
+.check-icon { font-size: 1rem; }
+.check-item.ok .check-icon { color: var(--success); }
+.check-item.missing .check-icon { color: var(--error); }
+
+/* Command hints */
+.cmd-hint {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  padding: 0.75rem;
   background: var(--surface2);
-  border-radius: 6px;
+  border-radius: 8px;
   font-size: 0.85rem;
-  color: var(--text);
+  margin-top: 1rem;
+}
+
+.cmd-label { color: var(--muted); }
+.cmd-hint code { background: var(--bg); padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 0.82rem; }
+
+/* Agents grid */
+.agents-grid { display: flex; flex-direction: column; gap: 1.5rem; }
+
+.agent-family { }
+.agent-family-title { font-size: 0.85rem; font-weight: 600; color: var(--primary-light); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; }
+
+.agent-card {
+  display: inline-block;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.6rem 0.9rem;
+  margin: 0 0.4rem 0.4rem 0;
 }
 
-.list li.empty { color: var(--muted); font-style: italic; background: none; padding: 0; }
+.agent-title { font-weight: 600; font-size: 0.88rem; }
+.agent-summary { font-size: 0.78rem; color: var(--muted); }
 
 .footer {
   text-align: center;
+  padding: 2rem 0 1rem;
   color: var(--muted);
-  font-size: 0.8rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--border);
-  margin-top: 1rem;
+  font-size: 0.82rem;
 }
 `;
 }