npm - @bis-code/study-dash - Versions diffs - 0.2.0 → 0.2.2 - Mend

@bis-code/study-dash 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/.claude-plugin/plugin.json +1 -1
package/README.md +148 -0
package/package.json +1 -1
package/server/dist/bundle.mjs +1035 -17
package/server/dist/dashboard/server.js +7 -19
package/server/dist/dashboard/server.js.map +1 -1
package/server/package.json +1 -1

package/server/dist/bundle.mjs CHANGED Viewed

@@ -919,9 +919,6 @@ function registerExerciseTools(server2, svc, sessions2, notify2) {
 // src/dashboard/server.ts
 import http from "node:http";
-import { readFileSync as readFileSync2 } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, join as join2 } from "node:path";
 // src/dashboard/api.ts
 function writeJSON(res, data, status = 200) {
@@ -1066,25 +1063,1046 @@ function handleSearch(qaSvc2) {
   };
 }
-// src/dashboard/server.ts
-var __filename = fileURLToPath(import.meta.url);
-var __dirname = dirname(__filename);
-var staticDir = join2(__dirname, "static");
-function loadStatic(name) {
+// src/dashboard/static/index.html
+var static_default = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>StudyDash</title>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/yaml.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/typescript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/rust.min.js"></script>
+</head>
+<body>
+  <!-- Desktop sidebar (hidden on mobile) -->
+  <div id="desktop-sidebar">
+    <div class="sidebar-inner">
+      <h1 style="font-size:18px;font-weight:700;color:var(--accent);margin-bottom:12px;">StudyDash</h1>
+      <div id="sidebar-subjects" class="subject-switcher"></div>
+      <div class="progress-bar" style="margin-bottom:14px;">
+        <div id="sidebar-progress-fill" class="progress-fill" style="width:0%"></div>
+        <span id="sidebar-progress-text" class="progress-text">0 / 0 topics</span>
+      </div>
+      <div id="sidebar-phases"></div>
+    </div>
+    <div class="sidebar-footer">
+      <span class="sse-dot disconnected" id="sse-dot"></span>
+      <kbd>Ctrl+K</kbd> Search
+    </div>
+  </div>
+  <div class="page-container">
+    <!-- ==================== PAGE: HOME ==================== -->
+    <div id="page-home" class="page active">
+      <div class="page-header">
+        <h1>StudyDash</h1>
+      </div>
+      <div id="home-subjects" class="subject-switcher"></div>
+      <div class="progress-bar">
+        <div id="home-progress-fill" class="progress-fill" style="width:0%"></div>
+        <span id="home-progress-text" class="progress-text">0 / 0 topics</span>
+      </div>
+      <div id="home-stats" class="stats-grid"></div>
+      <div class="section-divider">Recently Active</div>
+      <div id="home-recent"></div>
+    </div>
+    <!-- ==================== PAGE: TOPICS ==================== -->
+    <div id="page-topics" class="page">
+      <div class="page-header">
+        <h1>Topics</h1>
+      </div>
+      <div id="topics-subjects" class="subject-switcher"></div>
+      <div id="topics-phases"></div>
+    </div>
+    <!-- ==================== PAGE: TOPIC DETAIL ==================== -->
+    <div id="page-topic" class="page">
+      <button class="back-btn" onclick="showPage('topics')">&larr; Back to Topics</button>
+      <div class="topic-title-row">
+        <h2 id="topic-name"></h2>
+        <span id="topic-status" class="badge"></span>
+      </div>
+      <p id="topic-desc" class="topic-desc"></p>
+      <div class="tabs">
+        <button class="tab-btn active" data-tab="qa" onclick="switchTab('qa')">Q&amp;A</button>
+        <button class="tab-btn" data-tab="viz" onclick="switchTab('viz')">Visualize</button>
+        <button class="tab-btn" data-tab="exercises" onclick="switchTab('exercises')">Exercises</button>
+        <button class="tab-btn" data-tab="resources" onclick="switchTab('resources')">Resources</button>
+      </div>
+      <div id="tab-qa" class="tab-panel active"></div>
+      <div id="tab-viz" class="tab-panel"></div>
+      <div id="tab-exercises" class="tab-panel"></div>
+      <div id="tab-resources" class="tab-panel"></div>
+    </div>
+    <!-- ==================== PAGE: SEARCH ==================== -->
+    <div id="page-search" class="page">
+      <div class="page-header">
+        <h1>Search</h1>
+      </div>
+      <div class="search-bar">
+        <input type="text" id="search-input" placeholder="Search questions, answers, notes..." autocomplete="off">
+      </div>
+      <div id="search-results"></div>
+    </div>
+  </div>
+  <!-- Mobile bottom nav -->
+  <nav class="mobile-nav">
+    <button class="nav-btn active" data-page="home" onclick="showPage('home')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+      Home
+    </button>
+    <button class="nav-btn" data-page="topics" onclick="showPage('topics')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+      Topics
+    </button>
+    <button class="nav-btn" data-page="search" onclick="showPage('search')">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      Search
+    </button>
+  </nav>
+  <!-- Search modal (desktop Ctrl+K) -->
+  <div id="search-modal" class="modal hidden">
+    <div class="modal-backdrop" onclick="closeSearchModal()"></div>
+    <div class="modal-content">
+      <input id="modal-search-input" type="text" placeholder="Search questions, answers, notes..." autocomplete="off">
+      <div id="modal-search-results" class="modal-results"></div>
+    </div>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>
+`;
+// src/dashboard/static/app.js
+var app_default = `// StudyDash \u2014 Dashboard Application
+// Connects to the learn-cc API and renders a responsive learning dashboard.
+// --- Markdown config ---
+marked.setOptions({
+  highlight: function(code, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code, { language: lang }).value;
+    }
+    return hljs.highlightAuto(code).value;
+  },
+  breaks: true,
+  gfm: true,
+});
+// --- State ---
+const state = {
+  subjects: [],
+  activeSubject: null,
+  phases: [],
+  activeTopic: null,
+  activeTab: 'qa',
+  topicData: null,
+  topicViz: [],
+  topicExercises: [],
+  searchTimeout: null,
+  vizIndex: 0,
+  vizStep: 0,
+};
+// --- API Helper ---
+async function api(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error(\`API error: \${res.status}\`);
+  return res.json();
+}
+// --- Sanitize viz HTML ---
+function sanitizeVizHtml(html) {
+  const allowed = ['div', 'span', 'small', 'br', 'code', 'strong', 'em'];
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  // Remove all script tags
+  tmp.querySelectorAll('script').forEach(el => el.remove());
+  // Walk all elements, remove disallowed tags, strip non-class/style attributes
+  const walk = (node) => {
+    const children = [...node.children];
+    for (const child of children) {
+      if (!allowed.includes(child.tagName.toLowerCase())) {
+        child.replaceWith(...child.childNodes);
+      } else {
+        [...child.attributes].forEach(attr => {
+          if (attr.name !== 'class' && attr.name !== 'style') child.removeAttribute(attr.name);
+        });
+        walk(child);
+      }
+    }
+  };
+  walk(tmp);
+  return tmp.innerHTML;
+}
+// --- Escape HTML for text content in templates ---
+function escapeHtml(str) {
+  if (!str) return '';
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+// --- Format time ---
+function formatTime(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-US', {
+    month: 'short', day: 'numeric', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+}
+function truncate(text, max) {
+  if (!text) return '';
+  if (text.length <= max) return escapeHtml(text);
+  return escapeHtml(text.substring(0, max)) + '...';
+}
+// --- On load ---
+document.addEventListener('DOMContentLoaded', async () => {
+  try {
+    state.subjects = await api('/api/subjects');
+  } catch {
+    state.subjects = [];
+  }
+  if (state.subjects.length > 0) {
+    state.activeSubject = state.subjects[0];
+    await loadSubject();
+  }
+  renderAllSubjectSwitchers();
+  renderHome();
+  connectSSE();
+});
+// --- SSE ---
+function connectSSE() {
+  const dot = document.getElementById('sse-dot');
+  let evtSource;
+  function connect() {
+    evtSource = new EventSource('/api/events');
+    evtSource.onopen = () => {
+      if (dot) { dot.classList.remove('disconnected'); dot.classList.add('connected'); }
+    };
+    evtSource.onmessage = async (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'update') {
+          await refresh();
+        }
+      } catch { /* ignore parse errors */ }
+    };
+    evtSource.onerror = () => {
+      if (dot) { dot.classList.remove('connected'); dot.classList.add('disconnected'); }
+      evtSource.close();
+      setTimeout(connect, 3000);
+    };
+  }
+  connect();
+}
+async function refresh() {
+  // Re-fetch subjects
+  try {
+    state.subjects = await api('/api/subjects');
+  } catch { /* keep existing */ }
+  if (state.activeSubject) {
+    // Refresh the active subject from the new list
+    const updated = state.subjects.find(s => s.id === state.activeSubject.id);
+    if (updated) state.activeSubject = updated;
+    await loadSubject();
+  }
+  renderAllSubjectSwitchers();
+  // Re-render current view
+  const activePage = document.querySelector('.page.active');
+  if (activePage) {
+    const pageId = activePage.id.replace('page-', '');
+    if (pageId === 'home') renderHome();
+    else if (pageId === 'topics') renderTopicsPage();
+    else if (pageId === 'topic' && state.activeTopic) await selectTopic(state.activeTopic);
+  }
+}
+// --- Subject management ---
+async function loadSubject() {
+  if (!state.activeSubject) return;
+  try {
+    state.phases = await api(\`/api/subjects/\${state.activeSubject.id}/phases\`);
+  } catch {
+    state.phases = [];
+  }
+  renderSidebar();
+}
+async function switchSubject(id) {
+  const subject = state.subjects.find(s => s.id === id);
+  if (!subject) return;
+  state.activeSubject = subject;
+  state.activeTopic = null;
+  state.topicData = null;
+  await loadSubject();
+  renderAllSubjectSwitchers();
+  renderHome();
+  renderTopicsPage();
+  // If on topic detail page, go back to topics
+  const activePage = document.querySelector('.page.active');
+  if (activePage && activePage.id === 'page-topic') {
+    showPage('topics');
+  }
+}
+function renderAllSubjectSwitchers() {
+  const containers = ['home-subjects', 'topics-subjects', 'sidebar-subjects'];
+  containers.forEach(id => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    if (state.subjects.length === 0) {
+      el.innerHTML = '';
+      return;
+    }
+    el.innerHTML = state.subjects.map(s =>
+      \`<button class="subject-btn \${state.activeSubject && state.activeSubject.id === s.id ? 'active' : ''}"
+              onclick="switchSubject(\${s.id})">\${escapeHtml(s.name)}</button>\`
+    ).join('');
+  });
+}
+// --- Progress ---
+function renderProgress() {
+  if (!state.activeSubject) return;
+  const p = state.activeSubject.progress || {};
+  const total = p.total_topics || 0;
+  const done = p.done || 0;
+  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+  const text = \`\${done} / \${total} topics\`;
+  // Home progress
+  const hFill = document.getElementById('home-progress-fill');
+  const hText = document.getElementById('home-progress-text');
+  if (hFill) hFill.style.width = pct + '%';
+  if (hText) hText.textContent = text;
+  // Sidebar progress
+  const sFill = document.getElementById('sidebar-progress-fill');
+  const sText = document.getElementById('sidebar-progress-text');
+  if (sFill) sFill.style.width = pct + '%';
+  if (sText) sText.textContent = text;
+}
+// --- Sidebar ---
+function renderSidebar() {
+  renderProgress();
+  const container = document.getElementById('sidebar-phases');
+  if (!container) return;
+  if (state.phases.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No phases yet</p></div>';
+    return;
+  }
+  container.innerHTML = state.phases.map(phase => {
+    const topics = phase.topics || [];
+    const doneCount = topics.filter(t => t.status === 'done').length;
+    return \`
+      <div class="phase-group">
+        <div class="phase-header" onclick="togglePhase(this)">
+          \${escapeHtml(phase.name)}
+          <span style="font-size:10px;color:var(--text-muted)">\${doneCount}/\${topics.length}</span>
+          <span class="chevron">&#9660;</span>
+        </div>
+        <div class="phase-topics">
+          \${topics.map(t => \`
+            <div class="topic-item \${state.activeTopic === t.id ? 'active' : ''}"
+                 onclick="selectTopic(\${t.id})"
+                 data-topic-id="\${t.id}">
+              <span class="status-dot \${escapeHtml(t.status)}"></span>
+              <span>\${escapeHtml(t.name)}</span>
+            </div>
+          \`).join('')}
+        </div>
+      </div>\`;
+  }).join('');
+}
+function togglePhase(el) {
+  el.classList.toggle('collapsed');
+  el.nextElementSibling.classList.toggle('collapsed');
+}
+// --- Home page ---
+function renderHome() {
+  renderProgress();
+  const statsEl = document.getElementById('home-stats');
+  const recentEl = document.getElementById('home-recent');
+  if (state.subjects.length === 0) {
+    if (statsEl) statsEl.innerHTML = '';
+    if (recentEl) recentEl.innerHTML = \`
+      <div class="empty-state">
+        <p>Welcome to StudyDash!</p>
+        <p>Start by creating a subject with <code>/learn</code></p>
+      </div>\`;
+    return;
+  }
+  const p = state.activeSubject ? (state.activeSubject.progress || {}) : {};
+  if (statsEl) {
+    statsEl.innerHTML = \`
+      <div class="stat-card">
+        <div class="stat-value">\${p.done || 0}</div>
+        <div class="stat-label">Topics Done</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value green">\${p.total_entries || 0}</div>
+        <div class="stat-label">Q&amp;A Entries</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value yellow">\${p.total_exercises || 0}</div>
+        <div class="stat-label">Exercises</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value purple">\${p.total_viz || 0}</div>
+        <div class="stat-label">Visualizations</div>
+      </div>\`;
+  }
+  // Show recently active topics (in_progress first, then by updated_at)
+  if (recentEl) {
+    const allTopics = state.phases.flatMap(ph => (ph.topics || []).map(t => ({ ...t, phaseName: ph.name })));
+    const active = allTopics
+      .filter(t => t.status !== 'todo')
+      .sort((a, b) => {
+        if (a.status === 'in_progress' && b.status !== 'in_progress') return -1;
+        if (b.status === 'in_progress' && a.status !== 'in_progress') return 1;
+        return new Date(b.updated_at || 0) - new Date(a.updated_at || 0);
+      })
+      .slice(0, 5);
+    if (active.length === 0) {
+      recentEl.innerHTML = \`<div class="empty-state"><p>No active topics yet. Import a curriculum with <code>/learn import</code></p></div>\`;
+    } else {
+      recentEl.innerHTML = active.map(t => \`
+        <div class="exercise-card" style="cursor:pointer" onclick="selectTopic(\${t.id})">
+          <div class="exercise-header">
+            <span class="exercise-title">\${escapeHtml(t.name)}</span>
+            <span class="badge \${escapeHtml(t.status)}">\${escapeHtml(t.status.replace('_', ' '))}</span>
+          </div>
+          <div class="exercise-desc">\${escapeHtml(t.phaseName)}</div>
+        </div>
+      \`).join('');
+    }
+  }
+}
+// --- Topics page ---
+function renderTopicsPage() {
+  const container = document.getElementById('topics-phases');
+  if (!container) return;
+  if (state.phases.length === 0) {
+    container.innerHTML = \`<div class="empty-state"><p>No topics yet.</p><p>Import a curriculum with <code>/learn import</code></p></div>\`;
+    return;
+  }
+  container.innerHTML = state.phases.map(phase => {
+    const topics = phase.topics || [];
+    return \`
+      <div class="phase-group">
+        <div class="phase-header" onclick="togglePhase(this)">
+          \${escapeHtml(phase.name)}
+          <span class="chevron">&#9660;</span>
+        </div>
+        <div class="phase-topics">
+          \${topics.map(t => \`
+            <div class="topic-item \${state.activeTopic === t.id ? 'active' : ''}"
+                 onclick="selectTopic(\${t.id})">
+              <span class="status-dot \${escapeHtml(t.status)}"></span>
+              \${escapeHtml(t.name)}
+              <span class="topic-count"></span>
+            </div>
+          \`).join('')}
+        </div>
+      </div>\`;
+  }).join('');
+}
+// --- Topic selection ---
+async function selectTopic(id) {
+  state.activeTopic = id;
+  state.activeTab = 'qa';
+  // Fetch topic detail, viz, and exercises in parallel
+  try {
+    const [topicData, viz, exercises] = await Promise.all([
+      api(\`/api/topics/\${id}\`),
+      api(\`/api/topics/\${id}/viz\`).catch(() => []),
+      api(\`/api/topics/\${id}/exercises\`).catch(() => []),
+    ]);
+    state.topicData = topicData;
+    state.topicViz = viz || [];
+    state.topicExercises = exercises || [];
+  } catch {
+    state.topicData = null;
+    state.topicViz = [];
+    state.topicExercises = [];
+  }
+  // Update sidebar active state
+  document.querySelectorAll('.topic-item').forEach(el => {
+    el.classList.toggle('active', parseInt(el.dataset?.topicId) === id);
+  });
+  showPage('topic');
+  renderTopicDetail();
+  switchTab('qa');
+}
+function renderTopicDetail() {
+  const data = state.topicData;
+  if (!data) return;
+  document.getElementById('topic-name').textContent = data.name || '';
+  const statusEl = document.getElementById('topic-status');
+  statusEl.textContent = (data.status || '').replace('_', ' ');
+  statusEl.className = \`badge \${data.status || ''}\`;
+  document.getElementById('topic-desc').textContent = data.description || '';
+}
+// --- Tab switching ---
+function switchTab(tab) {
+  state.activeTab = tab;
+  document.querySelectorAll('#page-topic .tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.tab === tab);
+  });
+  document.querySelectorAll('#page-topic .tab-panel').forEach(panel => {
+    panel.classList.toggle('active', panel.id === \`tab-\${tab}\`);
+  });
+  // Render tab content
+  if (tab === 'qa') renderQATab();
+  else if (tab === 'viz') renderVizTab();
+  else if (tab === 'exercises') renderExercisesTab();
+  else if (tab === 'resources') renderResourcesTab();
+}
+// --- Q&A Tab ---
+function renderQATab() {
+  const container = document.getElementById('tab-qa');
+  if (!container) return;
+  const entries = state.topicData?.entries || [];
+  if (entries.length === 0) {
+    container.innerHTML = \`<div class="empty-state"><p>No Q&amp;A entries yet</p><p>Ask questions in Claude to see them here</p></div>\`;
+    return;
+  }
+  // Group entries into Q&A cards by question_id
+  const questionMap = new Map();
+  const groups = [];
+  entries.forEach(e => {
+    if (e.kind === 'question') {
+      const group = { question: e, answers: [] };
+      questionMap.set(e.id, group);
+      groups.push(group);
+    } else if (e.question_id && questionMap.has(e.question_id)) {
+      questionMap.get(e.question_id).answers.push(e);
+    } else {
+      groups.push({ standalone: e });
+    }
+  });
+  // marked.parse is used intentionally for markdown rendering (same as go-learn)
+  container.innerHTML = groups.map(g => {
+    if (g.standalone) {
+      const e = g.standalone;
+      return \`
+        <div class="entry-card">
+          <div class="entry-header">
+            <span class="entry-kind \${escapeHtml(e.kind)}">\${escapeHtml(e.kind)}</span>
+            <span>\${formatTime(e.created_at)}</span>
+          </div>
+          <div class="entry-body">\${marked.parse(e.content || '')}</div>
+        </div>\`;
+    }
+    const q = g.question;
+    let html = \`<div class="qa-card">\`;
+    html += \`
+      <div class="qa-question">
+        <div class="entry-header">
+          <span class="entry-kind question">question</span>
+          <span>\${formatTime(q.created_at)}</span>
+        </div>
+        <div class="entry-body">\${marked.parse(q.content || '')}</div>
+      </div>\`;
+    g.answers.forEach(a => {
+      html += \`
+        <div class="qa-answer">
+          <div class="entry-header">
+            <span class="entry-kind \${escapeHtml(a.kind)}">\${escapeHtml(a.kind)}</span>
+            <span>\${formatTime(a.created_at)}</span>
+          </div>
+          <div class="entry-body">\${marked.parse(a.content || '')}</div>
+        </div>\`;
+    });
+    html += \`</div>\`;
+    return html;
+  }).join('');
+}
+// --- Visualize Tab ---
+function renderVizTab() {
+  const container = document.getElementById('tab-viz');
+  if (!container) return;
+  const vizList = state.topicViz;
+  if (!vizList || vizList.length === 0) {
+    container.innerHTML = \`<div class="empty-state"><p>No visualizations yet</p><p>Visualizations will appear here as you learn</p></div>\`;
+    return;
+  }
+  // Reset viz state
+  state.vizIndex = 0;
+  state.vizStep = 0;
+  renderVizSelector(container);
+}
+function renderVizSelector(container) {
+  if (!container) container = document.getElementById('tab-viz');
+  if (!container) return;
+  const vizList = state.topicViz;
+  if (!vizList || vizList.length === 0) return;
+  let html = \`<div class="viz-selector">\`;
+  vizList.forEach((v, i) => {
+    html += \`<button class="viz-select-btn \${i === state.vizIndex ? 'active' : ''}" onclick="selectViz(\${i})">\${escapeHtml(v.title)}</button>\`;
+  });
+  html += \`</div>\`;
+  html += \`<div id="viz-stage-container"></div>\`;
+  container.innerHTML = html;
+  renderVizStage();
+}
+function selectViz(index) {
+  state.vizIndex = index;
+  state.vizStep = 0;
+  // Update selector buttons
+  document.querySelectorAll('.viz-select-btn').forEach((btn, i) => {
+    btn.classList.toggle('active', i === index);
+  });
+  renderVizStage();
+}
+function renderVizStage() {
+  const stageContainer = document.getElementById('viz-stage-container');
+  if (!stageContainer) return;
+  const viz = state.topicViz[state.vizIndex];
+  if (!viz) return;
+  let steps;
   try {
-    return readFileSync2(join2(staticDir, name), "utf-8");
+    steps = typeof viz.steps_json === 'string' ? JSON.parse(viz.steps_json) : viz.steps_json;
   } catch {
-    return "";
+    stageContainer.innerHTML = \`<div class="empty-state"><p>Invalid visualization data</p></div>\`;
+    return;
+  }
+  if (!steps || steps.length === 0) {
+    stageContainer.innerHTML = \`<div class="empty-state"><p>No steps in this visualization</p></div>\`;
+    return;
+  }
+  const step = steps[state.vizStep] || steps[0];
+  const totalSteps = steps.length;
+  // sanitizeVizHtml strips dangerous content, allowing only safe tags with class/style
+  stageContainer.innerHTML = \`
+    <div class="viz-stage">
+      <div class="viz-canvas">\${sanitizeVizHtml(step.html || step.canvas || '')}</div>
+      \${step.description || step.desc ? \`<div class="viz-description">\${sanitizeVizHtml(step.description || step.desc || '')}</div>\` : ''}
+      <div class="viz-controls">
+        <button onclick="vizPrev()" \${state.vizStep === 0 ? 'disabled' : ''}>Prev</button>
+        <span class="viz-step-label">Step \${state.vizStep + 1} / \${totalSteps}</span>
+        <button onclick="vizNext()" \${state.vizStep >= totalSteps - 1 ? 'disabled' : ''}>Next</button>
+      </div>
+    </div>\`;
+}
+function vizPrev() {
+  if (state.vizStep > 0) {
+    state.vizStep--;
+    renderVizStage();
   }
 }
-var indexHtml = loadStatic("index.html");
-var appJs = loadStatic("app.js");
-var stylesCss = loadStatic("styles.css");
+function vizNext() {
+  const viz = state.topicViz[state.vizIndex];
+  if (!viz) return;
+  let steps;
+  try {
+    steps = typeof viz.steps_json === 'string' ? JSON.parse(viz.steps_json) : viz.steps_json;
+  } catch { return; }
+  if (state.vizStep < (steps?.length || 1) - 1) {
+    state.vizStep++;
+    renderVizStage();
+  }
+}
+// --- Exercises Tab ---
+function renderExercisesTab() {
+  const container = document.getElementById('tab-exercises');
+  if (!container) return;
+  const exercises = state.topicExercises;
+  if (!exercises || exercises.length === 0) {
+    container.innerHTML = \`<div class="empty-state"><p>No exercises yet</p><p>Exercises are generated when you complete topics</p></div>\`;
+    return;
+  }
+  container.innerHTML = exercises.map((ex, i) => {
+    const results = ex.results || [];
+    const passed = results.filter(r => r.passed).length;
+    const total = results.length;
+    const hasPassed = total > 0 && passed === total;
+    let detailHtml = '';
+    // Quiz type
+    if (ex.type === 'quiz' && ex.quiz_json) {
+      let quiz;
+      try {
+        quiz = typeof ex.quiz_json === 'string' ? JSON.parse(ex.quiz_json) : ex.quiz_json;
+      } catch { quiz = null; }
+      if (quiz && Array.isArray(quiz)) {
+        detailHtml += \`<h4>Questions</h4>\`;
+        detailHtml += quiz.map((q, qi) => \`
+          <div class="quiz-question" data-exercise="\${i}" data-question="\${qi}">
+            <p>\${marked.parse(q.question || q.text || '')}</p>
+            \${(q.options || q.choices || []).map((opt, oi) => \`
+              <div class="quiz-option" data-exercise="\${i}" data-question="\${qi}" data-option="\${oi}" onclick="selectQuizOption(this)">
+                \${escapeHtml(opt)}
+              </div>
+            \`).join('')}
+          </div>
+        \`).join('');
+        detailHtml += \`
+          <div class="exercise-actions">
+            <button class="exercise-action-btn btn-primary" onclick="submitQuiz(\${ex.id}, \${i})">Submit Answers</button>
+          </div>\`;
+      }
+    }
+    // Coding type \u2014 test cases
+    if (ex.type === 'coding' || ex.type === 'project' || ex.type === 'assignment') {
+      if (results.length > 0) {
+        detailHtml += \`<h4>Test Results</h4>\`;
+        detailHtml += results.map(r => \`
+          <div class="test-case">
+            <div class="test-case-header">
+              <span class="test-status \${r.passed ? 'pass' : 'fail'}"></span>
+              \${escapeHtml(r.test_name)}
+            </div>
+            \${r.output ? \`<div class="test-case-body">\${truncate(r.output, 300)}</div>\` : ''}
+          </div>
+        \`).join('');
+        detailHtml += \`
+          <div class="exercise-progress">
+            <span>\${passed}/\${total} tests</span>
+            <div class="exercise-progress-bar">
+              <div class="exercise-progress-fill \${hasPassed ? 'green' : 'yellow'}" style="width:\${total > 0 ? Math.round(passed / total * 100) : 0}%"></div>
+            </div>
+          </div>\`;
+      }
+      detailHtml += \`
+        <div class="exercise-actions">
+          <button class="exercise-action-btn btn-primary" onclick="runExercise(\${ex.id}, \${i})">Run Tests</button>
+        </div>\`;
+    }
+    return \`
+      <div class="exercise-card expandable" id="exercise-\${i}">
+        <div class="exercise-header" onclick="toggleExercise(\${i})">
+          <span class="exercise-title">\${escapeHtml(ex.title)}</span>
+          <span class="exercise-type \${escapeHtml(ex.type)}">\${escapeHtml(ex.type)}</span>
+          <span class="exercise-expand-icon">&#9660;</span>
+        </div>
+        <div class="exercise-desc">\${escapeHtml(ex.description || '')}</div>
+        <div class="exercise-meta">
+          \${ex.difficulty ? \`<span>Difficulty: \${escapeHtml(ex.difficulty)}</span>\` : ''}
+          \${ex.est_minutes ? \`<span>\${ex.est_minutes} min</span>\` : ''}
+          \${ex.source ? \`<span>Source: \${escapeHtml(ex.source)}</span>\` : ''}
+          \${ex.status ? \`<span>Status: \${escapeHtml(ex.status)}</span>\` : ''}
+        </div>
+        <div class="exercise-detail" id="exercise-detail-\${i}">
+          \${detailHtml}
+        </div>
+      </div>\`;
+  }).join('');
+}
+function toggleExercise(index) {
+  const detail = document.getElementById(\`exercise-detail-\${index}\`);
+  if (detail) detail.classList.toggle('open');
+}
+function selectQuizOption(el) {
+  const questionEl = el.closest('.quiz-question');
+  if (questionEl) {
+    questionEl.querySelectorAll('.quiz-option').forEach(opt => opt.classList.remove('selected'));
+  }
+  el.classList.add('selected');
+}
+async function submitQuiz(exerciseId, cardIndex) {
+  const card = document.getElementById(\`exercise-\${cardIndex}\`);
+  if (!card) return;
+  const answers = [];
+  card.querySelectorAll('.quiz-question').forEach(q => {
+    const selected = q.querySelector('.quiz-option.selected');
+    if (selected) {
+      answers.push(parseInt(selected.dataset.option));
+    } else {
+      answers.push(-1);
+    }
+  });
+  try {
+    const result = await fetch(\`/api/exercises/\${exerciseId}/submit\`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ answers }),
+    });
+    const data = await result.json();
+    if (data.results) {
+      data.results.forEach((r, i) => {
+        const questionEl = card.querySelectorAll('.quiz-question')[i];
+        if (!questionEl) return;
+        questionEl.querySelectorAll('.quiz-option').forEach((opt, oi) => {
+          opt.classList.remove('selected');
+          if (oi === r.correct_index) opt.classList.add('correct');
+          else if (oi === answers[i] && !r.passed) opt.classList.add('incorrect');
+        });
+      });
+    }
+    if (data.score !== undefined) {
+      const actionsEl = card.querySelector('.exercise-actions');
+      if (actionsEl) {
+        const scoreDiv = document.createElement('div');
+        scoreDiv.style.cssText = \`margin-top:8px;font-size:14px;font-weight:600;color:\${data.passed ? 'var(--green)' : 'var(--yellow)'}\`;
+        scoreDiv.textContent = \`Score: \${data.score}/\${data.total}\${data.passed ? ' - Passed!' : ''}\`;
+        actionsEl.appendChild(scoreDiv);
+      }
+    }
+  } catch (err) {
+    console.error('Submit quiz error:', err);
+  }
+}
+async function runExercise(exerciseId, cardIndex) {
+  const btn = document.querySelector(\`#exercise-\${cardIndex} .btn-primary\`);
+  if (btn) { btn.textContent = 'Running...'; btn.disabled = true; }
+  try {
+    const res = await fetch(\`/api/exercises/\${exerciseId}/run\`, { method: 'POST' });
+    const data = await res.json();
+    if (data.results && state.topicExercises[cardIndex]) {
+      state.topicExercises[cardIndex].results = data.results;
+    }
+    renderExercisesTab();
+    // Re-open the card
+    const detail = document.getElementById(\`exercise-detail-\${cardIndex}\`);
+    if (detail) detail.classList.add('open');
+  } catch (err) {
+    console.error('Run exercise error:', err);
+    if (btn) { btn.textContent = 'Run Tests'; btn.disabled = false; }
+  }
+}
+// --- Resources Tab ---
+function renderResourcesTab() {
+  const container = document.getElementById('tab-resources');
+  if (!container) return;
+  const data = state.topicData;
+  if (!data) {
+    container.innerHTML = \`<div class="empty-state"><p>No resources available</p></div>\`;
+    return;
+  }
+  const entries = data.entries || [];
+  const questions = entries.filter(e => e.kind === 'question').length;
+  const answers = entries.filter(e => e.kind === 'answer').length;
+  const notes = entries.filter(e => e.kind === 'note').length;
+  container.innerHTML = \`
+    \${data.description ? \`<div class="exercise-card"><div style="padding:4px 0"><strong>Description</strong></div><p class="exercise-desc">\${escapeHtml(data.description)}</p></div>\` : ''}
+    <div class="exercise-card">
+      <div style="padding:4px 0"><strong>Content Summary</strong></div>
+      <div class="exercise-meta" style="margin-top:8px">
+        <span>Questions: \${questions}</span>
+        <span>Answers: \${answers}</span>
+        <span>Notes: \${notes}</span>
+        <span>Visualizations: \${state.topicViz.length}</span>
+        <span>Exercises: \${state.topicExercises.length}</span>
+      </div>
+    </div>\`;
+}
+// --- Navigation ---
+function showPage(page) {
+  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+  const target = document.getElementById(\`page-\${page}\`);
+  if (target) target.classList.add('active');
+  document.querySelectorAll('.nav-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.page === page);
+  });
+  if (page === 'home') renderHome();
+  else if (page === 'topics') renderTopicsPage();
+  else if (page === 'search') document.getElementById('search-input')?.focus();
+}
+// --- Search ---
+const searchInput = document.getElementById('search-input');
+if (searchInput) {
+  searchInput.addEventListener('input', (e) => {
+    clearTimeout(state.searchTimeout);
+    state.searchTimeout = setTimeout(() => doSearch(e.target.value, 'search-results'), 200);
+  });
+}
+const modalSearchInput = document.getElementById('modal-search-input');
+if (modalSearchInput) {
+  modalSearchInput.addEventListener('input', (e) => {
+    clearTimeout(state.searchTimeout);
+    state.searchTimeout = setTimeout(() => doSearch(e.target.value, 'modal-search-results'), 200);
+  });
+}
+async function doSearch(query, resultsContainerId) {
+  const container = document.getElementById(resultsContainerId);
+  if (!container) return;
+  if (!query || !query.trim()) {
+    container.innerHTML = '';
+    return;
+  }
+  try {
+    const results = await api(\`/api/search?q=\${encodeURIComponent(query)}\`);
+    if (!results || results.length === 0) {
+      container.innerHTML = '<div class="search-no-results">No results found</div>';
+      return;
+    }
+    container.innerHTML = results.map(r => \`
+      <div class="search-result-item" onclick="closeSearchModal(); selectTopic(\${r.topic_id})">
+        <div class="search-result-meta">
+          <span class="entry-kind \${escapeHtml(r.kind)}">\${escapeHtml(r.kind)}</span>
+        </div>
+        <div class="search-result-content">\${truncate(r.content, 150)}</div>
+      </div>
+    \`).join('');
+  } catch {
+    container.innerHTML = '<div class="search-no-results">Search failed</div>';
+  }
+}
+function openSearchModal() {
+  const modal = document.getElementById('search-modal');
+  if (modal) {
+    modal.classList.remove('hidden');
+    const input = document.getElementById('modal-search-input');
+    if (input) { input.value = ''; input.focus(); }
+    const results = document.getElementById('modal-search-results');
+    if (results) results.innerHTML = '';
+  }
+}
+function closeSearchModal() {
+  const modal = document.getElementById('search-modal');
+  if (modal) modal.classList.add('hidden');
+}
+// --- Keyboard shortcuts ---
+document.addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault();
+    openSearchModal();
+  }
+  if (e.key === 'Escape') {
+    closeSearchModal();
+  }
+});
+`;
+// src/dashboard/static/styles.css
+var styles_default = "/* ===== CSS VARIABLES (Dark Theme) ===== */\n:root {\n  --bg: #0d1117;\n  --bg-secondary: #161b22;\n  --bg-tertiary: #21262d;\n  --border: #30363d;\n  --text: #e6edf3;\n  --text-muted: #8b949e;\n  --accent: #58a6ff;\n  --green: #3fb950;\n  --yellow: #d29922;\n  --red: #f85149;\n  --purple: #bc8cff;\n  --radius: 8px;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;\n  background: var(--bg);\n  color: var(--text);\n  min-height: 100vh;\n  overflow-x: hidden;\n}\n\n.hidden { display: none !important; }\n\n/* ===== MOBILE NAV ===== */\n.mobile-nav {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--bg-secondary);\n  border-top: 1px solid var(--border);\n  display: flex;\n  z-index: 100;\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n.nav-btn {\n  flex: 1;\n  padding: 10px 4px;\n  background: none;\n  border: none;\n  color: var(--text-muted);\n  font-size: 10px;\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 3px;\n  transition: color 0.15s;\n}\n\n.nav-btn.active { color: var(--accent); }\n.nav-btn svg { width: 22px; height: 22px; }\n\n/* ===== PAGES ===== */\n.page { display: none; padding: 16px 16px 80px; }\n.page.active { display: block; }\n\n/* ===== HEADER ===== */\n.page-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.page-header h1 {\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--accent);\n}\n\n/* ===== SUBJECT SWITCHER ===== */\n.subject-switcher {\n  display: flex;\n  gap: 6px;\n  margin-bottom: 14px;\n  overflow-x: auto;\n  padding-bottom: 4px;\n  -webkit-overflow-scrolling: touch;\n}\n\n.subject-btn {\n  padding: 6px 14px;\n  background: var(--bg-tertiary);\n  border: 1px solid var(--border);\n  border-radius: 16px;\n  color: var(--text-muted);\n  font-size: 13px;\n  cursor: pointer;\n  font-family: inherit;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.subject-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,0.1); }\n\n/* ===== PROGRESS BAR ===== */\n.progress-bar {\n  position: relative;\n  height: 26px;\n  background: var(--bg-tertiary);\n  border-radius: 13px;\n  overflow: hidden;\n  margin-bottom: 16px;\n}\n\n.progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--green), var(--accent));\n  border-radius: 13px;\n  transition: width 0.5s ease;\n}\n\n.progress-text {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* ===== STATS GRID ===== */\n.stats-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n.stat-card {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 14px;\n  text-align: center;\n}\n\n.stat-value {\n  font-size: 24px;\n  font-weight: 700;\n  color: var(--accent);\n}\n\n.stat-value.green { color: var(--green); }\n.stat-value.yellow { color: var(--yellow); }\n.stat-value.purple { color: var(--purple); }\n\n.stat-label {\n  font-size: 11px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n/* ===== SECTION DIVIDER ===== */\n.section-divider {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--text-muted);\n  margin: 16px 0 10px;\n}\n\n/* ===== PHASE TREE (Topics page) ===== */\n.phase-group { margin-bottom: 8px; }\n\n.phase-header {\n  padding: 10px 14px;\n  font-size: 12px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  user-select: none;\n}\n\n.phase-header:hover { color: var(--text); }\n\n.phase-header .chevron {\n  transition: transform 0.2s;\n  font-size: 14px;\n}\n\n.phase-header.collapsed .chevron { transform: rotate(-90deg); }\n\n.phase-topics { padding: 4px 0; }\n.phase-topics.collapsed { display: none; }\n\n.topic-item {\n  padding: 10px 14px 10px 20px;\n  font-size: 14px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--text-muted);\n  border-left: 3px solid transparent;\n  transition: all 0.15s;\n}\n\n.topic-item:active { background: var(--bg-tertiary); }\n.topic-item.active { background: var(--bg-tertiary); color: var(--text); border-left-color: var(--accent); }\n\n.status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.status-dot.done { background: var(--green); }\n.status-dot.in_progress { background: var(--yellow); }\n.status-dot.todo { background: var(--bg-tertiary); border: 1.5px solid var(--text-muted); }\n\n.topic-count {\n  margin-left: auto;\n  font-size: 11px;\n  color: var(--text-muted);\n}\n\n/* ===== BACK BUTTON ===== */\n.back-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: none;\n  border: none;\n  color: var(--accent);\n  font-size: 14px;\n  font-family: inherit;\n  cursor: pointer;\n  margin-bottom: 12px;\n  padding: 4px 0;\n}\n\n/* ===== TOPIC DETAIL ===== */\n.topic-title-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 6px;\n  flex-wrap: wrap;\n}\n\n.topic-title-row h2 { font-size: 18px; font-weight: 600; }\n\n.badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 3px 10px;\n  border-radius: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.badge.todo { background: var(--bg-tertiary); color: var(--text-muted); }\n.badge.in_progress { background: rgba(210,153,34,0.15); color: var(--yellow); }\n.badge.done { background: rgba(63,185,80,0.15); color: var(--green); }\n\n.topic-desc {\n  color: var(--text-muted);\n  font-size: 13px;\n  margin-bottom: 14px;\n  line-height: 1.4;\n}\n\n/* ===== TABS ===== */\n.tabs {\n  display: flex;\n  gap: 4px;\n  margin-bottom: 16px;\n  overflow-x: auto;\n  padding-bottom: 4px;\n  -webkit-overflow-scrolling: touch;\n}\n\n.tab-btn {\n  padding: 7px 14px;\n  background: transparent;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  color: var(--text-muted);\n  cursor: pointer;\n  font-size: 13px;\n  font-family: inherit;\n  white-space: nowrap;\n  flex-shrink: 0;\n  transition: all 0.15s;\n}\n\n.tab-btn:hover { color: var(--text); background: var(--bg-tertiary); }\n.tab-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,0.1); }\n\n.tab-panel { display: none; }\n.tab-panel.active { display: block; }\n\n/* ===== Q&A CARDS ===== */\n.qa-card {\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n\n.qa-question { background: var(--bg-secondary); border-bottom: 1px solid var(--border); }\n.qa-answer { background: var(--bg-secondary); }\n.qa-answer + .qa-answer { border-top: 1px solid var(--border); }\n\n.entry-card {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  overflow: hidden;\n  margin-bottom: 14px;\n}\n\n.entry-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  background: var(--bg-tertiary);\n  font-size: 11px;\n  color: var(--text-muted);\n  border-bottom: 1px solid var(--border);\n}\n\n.entry-kind {\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.entry-kind.question { color: var(--accent); }\n.entry-kind.answer { color: var(--green); }\n.entry-kind.note { color: var(--purple); }\n\n.entry-body {\n  padding: 14px;\n  font-size: 14px;\n  line-height: 1.6;\n  background: var(--bg-secondary);\n}\n\n.entry-body p { margin-bottom: 10px; }\n.entry-body p:last-child { margin-bottom: 0; }\n\n.entry-body h1, .entry-body h2, .entry-body h3 {\n  margin-top: 16px;\n  margin-bottom: 8px;\n}\n\n.entry-body h1:first-child, .entry-body h2:first-child, .entry-body h3:first-child {\n  margin-top: 0;\n}\n\n.entry-body code {\n  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;\n  font-size: 13px;\n}\n\n.entry-body :not(pre) > code {\n  background: var(--bg-tertiary);\n  padding: 2px 5px;\n  border-radius: 4px;\n  font-size: 12px;\n}\n\n.entry-body pre {\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  padding: 12px;\n  overflow-x: auto;\n  margin: 8px 0;\n  -webkit-overflow-scrolling: touch;\n}\n\n.entry-body pre code {\n  background: none;\n  padding: 0;\n  font-size: 12px;\n  color: var(--text);\n}\n\n.entry-body ul, .entry-body ol {\n  padding-left: 24px;\n  margin-bottom: 12px;\n}\n\n.entry-body li { margin-bottom: 4px; }\n\n.entry-body blockquote {\n  border-left: 3px solid var(--accent);\n  padding-left: 16px;\n  color: var(--text-muted);\n  margin: 12px 0;\n}\n\n.entry-body table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 12px 0;\n}\n\n.entry-body th, .entry-body td {\n  border: 1px solid var(--border);\n  padding: 8px 12px;\n  text-align: left;\n}\n\n.entry-body th {\n  background: var(--bg-tertiary);\n  font-weight: 600;\n}\n\n/* ===== VIZ PANEL ===== */\n.viz-selector {\n  display: flex;\n  gap: 6px;\n  margin-bottom: 14px;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  padding-bottom: 4px;\n}\n\n.viz-select-btn {\n  padding: 7px 12px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  color: var(--text-muted);\n  cursor: pointer;\n  font-size: 12px;\n  font-family: inherit;\n  white-space: nowrap;\n  flex-shrink: 0;\n  transition: all 0.15s;\n}\n\n.viz-select-btn:hover { color: var(--text); border-color: var(--text-muted); }\n.viz-select-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,0.1); }\n\n.viz-stage {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  overflow: hidden;\n}\n\n.viz-canvas {\n  padding: 20px 12px;\n  min-height: 140px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.viz-description {\n  padding: 14px;\n  border-top: 1px solid var(--border);\n  font-size: 13px;\n  line-height: 1.6;\n}\n\n.viz-description code {\n  background: var(--bg-tertiary);\n  padding: 2px 5px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  color: var(--accent);\n}\n\n.viz-controls {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 10px;\n  border-top: 1px solid var(--border);\n  background: var(--bg-tertiary);\n}\n\n.viz-controls button {\n  padding: 8px 18px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  color: var(--text);\n  cursor: pointer;\n  font-size: 13px;\n  font-family: inherit;\n  transition: all 0.15s;\n}\n\n.viz-controls button:hover:not(:disabled) {\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n.viz-controls button:disabled { opacity: 0.3; cursor: default; }\n\n.viz-step-label { font-size: 12px; color: var(--text-muted); min-width: 80px; text-align: center; }\n\n/* Viz primitives */\n.viz-box {\n  padding: 10px 14px;\n  border-radius: 8px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n}\n\n.viz-box-label {\n  font-size: 10px;\n  color: var(--text-muted);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-weight: 400;\n}\n\n.viz-arrow { font-size: 20px; color: var(--accent); }\n\n.box-blue { background: rgba(88,166,255,0.15); border: 1px solid var(--accent); color: var(--accent); }\n.box-green { background: rgba(63,185,80,0.15); border: 1px solid var(--green); color: var(--green); }\n.box-yellow { background: rgba(210,153,34,0.15); border: 1px solid var(--yellow); color: var(--yellow); }\n.box-purple { background: rgba(188,140,255,0.15); border: 1px solid var(--purple); color: var(--purple); }\n\n.viz-slot {\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--border);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  transition: all 0.3s ease;\n}\n\n.viz-slot.filled {\n  background: rgba(88,166,255,0.2);\n  border-color: var(--accent);\n  color: var(--accent);\n}\n\n.viz-slot.empty { color: var(--text-muted); }\n\n.viz-select-case {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  font-size: 12px;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  transition: all 0.3s ease;\n  min-width: 200px;\n}\n\n.viz-select-case.selected {\n  border-color: var(--green);\n  background: rgba(63,185,80,0.1);\n  color: var(--green);\n}\n\n.viz-select-case.waiting { color: var(--text-muted); }\n\n.viz-flow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n/* ===== EXERCISE CARDS ===== */\n.exercise-card {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  padding: 14px;\n  margin-bottom: 10px;\n}\n\n.exercise-card.expandable { cursor: pointer; }\n.exercise-card.expandable:active { background: var(--bg-tertiary); }\n\n.exercise-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 6px;\n  gap: 8px;\n}\n\n.exercise-title { font-weight: 600; font-size: 14px; }\n\n.exercise-type {\n  font-size: 10px;\n  padding: 3px 8px;\n  border-radius: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.exercise-type.coding { background: rgba(88,166,255,0.15); color: var(--accent); }\n.exercise-type.quiz { background: rgba(188,140,255,0.15); color: var(--purple); }\n.exercise-type.project { background: rgba(210,153,34,0.15); color: var(--yellow); }\n.exercise-type.assignment { background: rgba(248,81,73,0.15); color: var(--red); }\n\n.exercise-desc {\n  color: var(--text-muted);\n  font-size: 13px;\n  line-height: 1.5;\n  margin-bottom: 10px;\n}\n\n.exercise-meta {\n  display: flex;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--text-muted);\n  flex-wrap: wrap;\n}\n\n.exercise-expand-icon {\n  font-size: 12px;\n  color: var(--text-muted);\n  transition: transform 0.2s;\n  flex-shrink: 0;\n}\n\n.exercise-detail {\n  display: none;\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--border);\n}\n\n.exercise-detail.open { display: block; }\n\n.exercise-detail h4 {\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--text-muted);\n  margin-bottom: 8px;\n  margin-top: 14px;\n}\n\n.exercise-detail h4:first-child { margin-top: 0; }\n\n.exercise-detail p, .exercise-detail li {\n  font-size: 13px;\n  line-height: 1.6;\n  color: var(--text);\n}\n\n.exercise-detail ul { padding-left: 18px; margin-bottom: 8px; }\n.exercise-detail li { margin-bottom: 4px; }\n\n.exercise-detail pre {\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  padding: 12px;\n  overflow-x: auto;\n  margin: 8px 0;\n  -webkit-overflow-scrolling: touch;\n}\n\n.exercise-detail code {\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  font-size: 12px;\n}\n\n.exercise-detail :not(pre) > code {\n  background: var(--bg-tertiary);\n  padding: 1px 5px;\n  border-radius: 3px;\n  color: var(--accent);\n}\n\n.exercise-detail pre code {\n  background: none;\n  padding: 0;\n  color: var(--text);\n}\n\n/* Test cases */\n.test-case {\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  margin-bottom: 8px;\n  overflow: hidden;\n}\n\n.test-case-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  background: var(--bg-tertiary);\n  border-bottom: 1px solid var(--border);\n}\n\n.test-status {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.test-status.pass { background: var(--green); }\n.test-status.fail { background: var(--red); }\n.test-status.pending { background: var(--bg-tertiary); border: 1.5px solid var(--text-muted); }\n\n.test-case-body {\n  padding: 10px 12px;\n  font-size: 12px;\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n/* Quiz questions */\n.quiz-question {\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  padding: 14px;\n  margin-bottom: 10px;\n}\n\n.quiz-question p { font-size: 14px; margin-bottom: 10px; }\n\n.quiz-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  margin-bottom: 4px;\n  border: 1px solid var(--border);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.15s;\n}\n\n.quiz-option:hover { border-color: var(--accent); background: rgba(88,166,255,0.05); }\n.quiz-option.selected { border-color: var(--accent); background: rgba(88,166,255,0.1); color: var(--accent); }\n.quiz-option.correct { border-color: var(--green); background: rgba(63,185,80,0.1); color: var(--green); }\n.quiz-option.incorrect { border-color: var(--red); background: rgba(248,81,73,0.1); color: var(--red); }\n\n/* Action buttons */\n.exercise-actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 14px;\n  flex-wrap: wrap;\n}\n\n.exercise-action-btn {\n  padding: 10px 16px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  border: none;\n  flex: 1;\n  min-width: 120px;\n  text-align: center;\n}\n\n.btn-primary { background: var(--accent); color: #0d1117; }\n.btn-secondary { background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text); }\n.btn-success { background: rgba(63,185,80,0.15); border: 1px solid var(--green); color: var(--green); }\n\n/* Exercise progress bar */\n.exercise-progress {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 12px;\n  padding: 10px 12px;\n  background: var(--bg);\n  border-radius: 6px;\n  font-size: 12px;\n}\n\n.exercise-progress-bar {\n  flex: 1;\n  height: 6px;\n  background: var(--bg-tertiary);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.exercise-progress-fill { height: 100%; border-radius: 3px; }\n.exercise-progress-fill.green { background: var(--green); }\n.exercise-progress-fill.yellow { background: var(--yellow); }\n\n/* ===== SEARCH ===== */\n.search-bar {\n  position: relative;\n  margin-bottom: 16px;\n}\n\n.search-bar input {\n  width: 100%;\n  padding: 12px 16px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  color: var(--text);\n  font-size: 14px;\n  font-family: inherit;\n  outline: none;\n}\n\n.search-bar input:focus { border-color: var(--accent); }\n.search-bar input::placeholder { color: var(--text-muted); }\n\n.search-result-item {\n  padding: 12px 14px;\n  cursor: pointer;\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  margin-bottom: 8px;\n  background: var(--bg-secondary);\n  transition: background 0.1s;\n}\n\n.search-result-item:hover { background: var(--bg-tertiary); }\n\n.search-result-meta {\n  font-size: 11px;\n  color: var(--text-muted);\n  margin-bottom: 4px;\n  display: flex;\n  gap: 8px;\n}\n\n.search-result-content {\n  font-size: 13px;\n  color: var(--text);\n  line-height: 1.5;\n  max-height: 60px;\n  overflow: hidden;\n}\n\n.search-no-results {\n  padding: 32px 20px;\n  text-align: center;\n  color: var(--text-muted);\n}\n\n/* Search modal (desktop) */\n.modal {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 15vh;\n}\n\n.modal-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0,0,0,0.6);\n  backdrop-filter: blur(4px);\n}\n\n.modal-content {\n  position: relative;\n  width: 600px;\n  max-width: 90vw;\n  max-height: 500px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 16px 48px rgba(0,0,0,0.4);\n}\n\n.modal-content input {\n  width: 100%;\n  padding: 16px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--border);\n  color: var(--text);\n  font-size: 16px;\n  outline: none;\n  font-family: inherit;\n}\n\n.modal-content input::placeholder { color: var(--text-muted); }\n\n.modal-results {\n  overflow-y: auto;\n  max-height: 400px;\n}\n\n/* ===== EMPTY STATES ===== */\n.empty-state {\n  text-align: center;\n  padding: 48px 16px;\n  color: var(--text-muted);\n}\n\n.empty-state p { margin-bottom: 8px; }\n\n.empty-state code {\n  background: var(--bg-tertiary);\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 12px;\n}\n\n/* ===== KEYBOARD SHORTCUTS ===== */\nkbd {\n  background: var(--bg-tertiary);\n  border: 1px solid var(--border);\n  border-radius: 4px;\n  padding: 2px 6px;\n  font-size: 11px;\n  font-family: inherit;\n  color: var(--text-muted);\n}\n\n/* ===== SCROLLBAR ===== */\n::-webkit-scrollbar { width: 8px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }\n::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }\n\n/* ===== SSE STATUS ===== */\n.sse-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  display: inline-block;\n}\n\n.sse-dot.connected { background: var(--green); }\n.sse-dot.disconnected { background: var(--red); }\n\n/* ===== DESKTOP LAYOUT ===== */\n@media (min-width: 769px) {\n  .mobile-nav { display: none; }\n  body { display: flex; height: 100vh; overflow: hidden; }\n\n  #desktop-sidebar {\n    display: flex !important;\n    width: 300px;\n    min-width: 300px;\n    background: var(--bg-secondary);\n    border-right: 1px solid var(--border);\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  #desktop-sidebar .sidebar-inner {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px;\n  }\n\n  #desktop-sidebar .sidebar-footer {\n    padding: 12px 16px;\n    border-top: 1px solid var(--border);\n    font-size: 12px;\n    color: var(--text-muted);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .page-container {\n    flex: 1;\n    overflow-y: auto;\n    padding: 32px 48px;\n  }\n\n  .page { padding: 0 0 32px; }\n}\n\n@media (max-width: 768px) {\n  #desktop-sidebar { display: none !important; }\n  .page-container { display: contents; }\n}\n";
+// src/dashboard/server.ts
 var STATIC_FILES = {
-  "/": { content: indexHtml, contentType: "text/html; charset=utf-8" },
-  "/index.html": { content: indexHtml, contentType: "text/html; charset=utf-8" },
-  "/app.js": { content: appJs, contentType: "application/javascript; charset=utf-8" },
-  "/styles.css": { content: stylesCss, contentType: "text/css; charset=utf-8" }
+  "/": { content: static_default, contentType: "text/html; charset=utf-8" },
+  "/index.html": { content: static_default, contentType: "text/html; charset=utf-8" },
+  "/app.js": { content: app_default, contentType: "application/javascript; charset=utf-8" },
+  "/styles.css": { content: styles_default, contentType: "text/css; charset=utf-8" }
 };
 var DashboardServer = class {
   constructor(curriculumSvc2, qaSvc2, vizSvc2, exerciseSvc2, port2) {