@eltonssouza/development-utility-kit 1.0.0

package/dashboard/public/app.js

@@ -0,0 +1,709 @@
+'use strict';
+
+// ── Chart instances (kept in module scope for update-in-place) ────────────────
+
+let modelsChart = null;
+let rtkChart = null;
+let pollIntervalId = null;
+
+// ── Tab engine ────────────────────────────────────────────────────────────────
+
+let activeTab = 'dashboard';
+
+/**
+ * Activate the given tab panel by ID, update URL hash and button states.
+ * Pauses/resumes the stats polling based on whether dashboard tab is active (IR-2).
+ * @param {string} tabId — 'dashboard' | 'manual' | 'docs'
+ */
+function activateTab(tabId) {
+  const validTabs = ['dashboard', 'manual', 'docs'];
+  if (!validTabs.includes(tabId)) tabId = 'dashboard';
+
+  activeTab = tabId;
+
+  // Update tab buttons
+  document.querySelectorAll('.tab-btn').forEach((btn) => {
+    const isActive = btn.dataset.tab === tabId;
+    btn.classList.toggle('active', isActive);
+    btn.setAttribute('aria-selected', String(isActive));
+  });
+
+  // Toggle panels
+  document.querySelectorAll('.tab-panel').forEach((panel) => {
+    const panelTab = panel.id.replace('panel-', '');
+    if (panelTab === tabId) {
+      panel.removeAttribute('hidden');
+      panel.classList.add('active');
+    } else {
+      panel.setAttribute('hidden', '');
+      panel.classList.remove('active');
+    }
+  });
+
+  // Pause polling when NOT on dashboard (IR-2)
+  if (tabId === 'dashboard') {
+    resumePolling();
+  } else {
+    pausePolling();
+  }
+
+  // Lazy-render panel content on first activation
+  if (tabId === 'manual') {
+    initManualPanel();
+  } else if (tabId === 'docs') {
+    initDocsPanel();
+  }
+}
+
+// ── Polling control ───────────────────────────────────────────────────────────
+
+function pausePolling() {
+  if (pollIntervalId !== null) {
+    clearInterval(pollIntervalId);
+    pollIntervalId = null;
+  }
+}
+
+function resumePolling() {
+  if (pollIntervalId === null) {
+    fetchStats();
+    pollIntervalId = setInterval(fetchStats, 5000);
+  }
+}
+
+// ── TOC builder ───────────────────────────────────────────────────────────────
+
+/**
+ * Build a TOC list from all h2 elements inside containerEl.
+ * Injects the result into tocEl.
+ * @param {Element} containerEl — content body element
+ * @param {Element} tocEl — sidebar element to populate
+ */
+function buildToc(containerEl, tocEl) {
+  if (!tocEl) return;
+  const headings = Array.from(containerEl.querySelectorAll('h2'));
+  if (headings.length === 0) {
+    tocEl.innerHTML = '';
+    return;
+  }
+
+  const ul = document.createElement('ul');
+  headings.forEach((h, idx) => {
+    // Ensure each heading has an id for anchor linking
+    if (!h.id) {
+      h.id = 'toc-heading-' + idx + '-' + h.textContent.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+    }
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.href = '#' + h.id;
+    a.textContent = h.textContent;
+    li.appendChild(a);
+    ul.appendChild(li);
+  });
+
+  tocEl.innerHTML = '';
+  tocEl.appendChild(ul);
+}
+
+// ── Markdown loader with language fallback ────────────────────────────────────
+
+/**
+ * Fetch a markdown file via /api/docs/file endpoint.
+ * Returns { content: string, fallback: boolean }.
+ * @param {string} relPath — repo-relative path
+ * @returns {Promise<{content: string, fallback: boolean}>}
+ */
+async function fetchMd(relPath) {
+  const res = await fetch('/api/docs/file?path=' + encodeURIComponent(relPath));
+  if (!res.ok) throw new Error('HTTP ' + res.status + ' for ' + relPath);
+  const content = await res.text();
+  return { content, fallback: false };
+}
+
+/**
+ * Load a markdown content file. Single-language (English-only) as of v2.0.0.
+ * @param {string} path — relative path to the .md file
+ * @returns {Promise<{content: string, fallback: boolean}>}
+ */
+async function loadMarkdown(path) {
+  return await fetchMd(path);
+}
+
+/**
+ * Render markdown string to safe HTML using marked (loaded from CDN or vendor fallback).
+ * @param {string} mdText
+ * @returns {string} HTML string
+ */
+function renderMarkdown(mdText) {
+  if (typeof marked !== 'undefined' && marked.parse) {
+    return marked.parse(mdText);
+  }
+  // Minimal fallback if marked is not available yet
+  return '<pre>' + mdText.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
+}
+
+// ── Accordion builder ─────────────────────────────────────────────────────────
+
+/**
+ * Wrap sections (h2 + following content) in accordion elements.
+ * "Quick-start" heading stays visible (not wrapped). All other h2 sections become accordions.
+ * @param {Element} containerEl
+ */
+function buildAccordions(containerEl) {
+  const children = Array.from(containerEl.childNodes);
+  const result = document.createDocumentFragment();
+  let currentAccordion = null;
+  let currentBody = null;
+  let isInsideAccordion = false;
+  let isQuickStart = false;
+
+  for (const node of children) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'H2') {
+      const text = node.textContent.trim().toLowerCase();
+      isQuickStart = text.startsWith('quick-start') || text.startsWith('quickstart');
+
+      if (isQuickStart) {
+        // Quick-start: render directly, not in accordion
+        currentAccordion = null;
+        currentBody = null;
+        isInsideAccordion = false;
+        result.appendChild(node.cloneNode(true));
+      } else {
+        // Wrap in accordion
+        currentAccordion = document.createElement('div');
+        currentAccordion.className = 'accordion';
+
+        const header = document.createElement('button');
+        header.className = 'accordion-header';
+        header.innerHTML = node.innerHTML + '<span class="accordion-chevron">▼</span>';
+
+        const body = document.createElement('div');
+        body.className = 'accordion-body';
+
+        // Capture `body` locally so each click handler toggles its own panel
+        // (without this, all handlers share the outer `currentBody` which ends up
+        // pointing at the LAST accordion — clicking any header opens only the last)
+        header.addEventListener('click', () => {
+          header.classList.toggle('open');
+          body.classList.toggle('open');
+        });
+
+        currentBody = body;
+
+        currentAccordion.appendChild(header);
+        currentAccordion.appendChild(currentBody);
+        result.appendChild(currentAccordion);
+        isInsideAccordion = true;
+      }
+    } else if (isInsideAccordion && currentBody) {
+      currentBody.appendChild(node.cloneNode(true));
+    } else {
+      result.appendChild(node.cloneNode(true));
+    }
+  }
+
+  containerEl.innerHTML = '';
+  containerEl.appendChild(result);
+}
+
+// ── Session cache for API list responses ──────────────────────────────────────
+
+function getCached(key) {
+  try {
+    const raw = sessionStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+function setCache(key, data) {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(data));
+  } catch {
+    // sessionStorage not available — silently ignore
+  }
+}
+
+// ── Manual panel ──────────────────────────────────────────────────────────────
+
+let manualInitialized = false;
+let currentScenarioPath = null;
+
+async function initManualPanel() {
+  if (manualInitialized) return;
+  manualInitialized = true;
+
+  const selectorEl = document.getElementById('manual-scenario-selector');
+  const contentBody = document.getElementById('manual-content-body');
+  const bannerEl = document.getElementById('translation-banner-manual');
+  const tocEl = document.getElementById('toc-manual');
+
+  // Load manifest (served as static file via /api/docs/file)
+  let manifest;
+  try {
+    const res = await fetch('/dashboard/public/content/manifest.json');
+    if (!res.ok) {
+      // Try direct static path
+      const res2 = await fetch('/content/manifest.json');
+      if (!res2.ok) throw new Error('Cannot load manifest');
+      manifest = await res2.json();
+    } else {
+      manifest = await res.json();
+    }
+  } catch {
+    if (contentBody) contentBody.innerHTML = '<p class="empty-state">Error loading manifest.</p>';
+    return;
+  }
+
+  if (!selectorEl) return;
+
+  selectorEl.innerHTML = '';
+  for (const entry of manifest.manual) {
+    const btn = document.createElement('button');
+    btn.className = 'scenario-btn';
+    btn.dataset.slug = entry.slug || entry.id;
+    btn.dataset.path = entry.path;
+    btn.textContent = entry.title;
+    btn.addEventListener('click', () => loadScenario(btn, manifest));
+    selectorEl.appendChild(btn);
+  }
+}
+
+async function loadScenario(btn, manifest) {
+  const contentBody = document.getElementById('manual-content-body');
+  const bannerEl = document.getElementById('translation-banner-manual');
+  const tocEl = document.getElementById('toc-manual');
+
+  // Update active button state
+  document.querySelectorAll('#manual-scenario-selector .scenario-btn').forEach((b) => b.classList.remove('active'));
+  btn.classList.add('active');
+
+  currentScenarioPath = btn.dataset.path;
+
+  if (contentBody) contentBody.innerHTML = '<div class="loading-spinner">Loading…</div>';
+  if (bannerEl) bannerEl.hidden = true;
+
+  try {
+    const { content, fallback } = await loadMarkdown(currentScenarioPath);
+    if (bannerEl) bannerEl.hidden = true;
+
+    const htmlContent = renderMarkdown(content);
+    if (contentBody) {
+      contentBody.innerHTML = htmlContent;
+      buildAccordions(contentBody);
+      buildToc(contentBody, tocEl);
+    }
+  } catch (err) {
+    if (contentBody) contentBody.innerHTML = '<p class="empty-state">Error loading content: ' + err.message + '</p>';
+  }
+}
+
+// ── Docs panel ────────────────────────────────────────────────────────────────
+
+let docsInitialized = false;
+
+async function initDocsPanel() {
+  if (docsInitialized) return;
+  docsInitialized = true;
+
+  const contentBody = document.getElementById('docs-content-body');
+  const bannerEl = document.getElementById('translation-banner-docs');
+  const tocEl = document.getElementById('toc-docs');
+
+  // Load manifest
+  let manifest;
+  try {
+    const res = await fetch('/content/manifest.json');
+    manifest = res.ok ? await res.json() : null;
+    if (!manifest) {
+      const res2 = await fetch('/dashboard/public/content/manifest.json');
+      manifest = res2.ok ? await res2.json() : null;
+    }
+    if (!manifest) throw new Error('Cannot load manifest');
+  } catch {
+    if (contentBody) contentBody.innerHTML = '<p class="empty-state">Error loading manifest.</p>';
+    return;
+  }
+
+  if (!contentBody) return;
+
+  // Build a simple nav for docs sections
+  const nav = document.createElement('div');
+  nav.className = 'scenario-selector';
+  for (const entry of manifest.docs) {
+    const btn = document.createElement('button');
+    btn.className = 'scenario-btn';
+    btn.dataset.path = entry.path;
+    btn.textContent = entry.title;
+    btn.addEventListener('click', () => loadDocsSection(btn, bannerEl, tocEl));
+    nav.appendChild(btn);
+  }
+
+  // Dynamic index sections
+  const dynamicSections = [
+    { id: 'skills-index', label: 'Skills Index', endpoint: '/api/docs/skills', cacheKey: 'kud_cache_skills', type: 'skills' },
+    { id: 'agents-index', label: 'Agents Index', endpoint: '/api/docs/agents', cacheKey: 'kud_cache_agents', type: 'agents' },
+    { id: 'adrs-timeline', label: 'ADRs Timeline', endpoint: '/api/docs/adrs', cacheKey: 'kud_cache_adrs', type: 'adrs' },
+  ];
+
+  for (const section of dynamicSections) {
+    const btn = document.createElement('button');
+    btn.className = 'scenario-btn';
+    btn.dataset.dynamicSection = section.id;
+    btn.textContent = section.label;
+    btn.addEventListener('click', () => loadDynamicSection(section, contentBody, tocEl));
+    nav.appendChild(btn);
+  }
+
+  contentBody.innerHTML = '';
+  contentBody.appendChild(nav);
+  contentBody.insertAdjacentHTML('beforeend', '<div id="docs-section-content"></div>');
+}
+
+async function loadDocsSection(btn, bannerEl, tocEl) {
+  const sectionContentEl = document.getElementById('docs-section-content');
+  if (!sectionContentEl) return;
+
+  document.querySelectorAll('#docs-content-body .scenario-btn').forEach((b) => b.classList.remove('active'));
+  btn.classList.add('active');
+
+  if (bannerEl) bannerEl.hidden = true;
+  sectionContentEl.innerHTML = '<div class="loading-spinner">Loading…</div>';
+
+  try {
+    const { content, fallback } = await loadMarkdown(btn.dataset.path);
+    if (bannerEl) bannerEl.hidden = true;
+
+    const htmlContent = renderMarkdown(content);
+    sectionContentEl.innerHTML = htmlContent;
+    buildToc(sectionContentEl, tocEl);
+  } catch (err) {
+    sectionContentEl.innerHTML = '<p class="empty-state">Error: ' + err.message + '</p>';
+  }
+}
+
+async function loadDynamicSection(section, contentBody, tocEl) {
+  const sectionContentEl = document.getElementById('docs-section-content');
+  if (!sectionContentEl) return;
+
+  document.querySelectorAll('#docs-content-body .scenario-btn').forEach((b) => b.classList.remove('active'));
+  // Mark the button active
+  contentBody.querySelectorAll('[data-dynamic-section="' + section.id + '"]').forEach((b) => b.classList.add('active'));
+
+  sectionContentEl.innerHTML = '<div class="loading-spinner">Loading…</div>';
+
+  // Use sessionStorage cache (IR-4 / NFR-005)
+  let data = getCached(section.cacheKey);
+  if (!data) {
+    try {
+      const res = await fetch(section.endpoint);
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      data = await res.json();
+      setCache(section.cacheKey, data);
+    } catch (err) {
+      sectionContentEl.innerHTML = '<p class="empty-state">Error loading ' + section.label + ': ' + err.message + '</p>';
+      return;
+    }
+  }
+
+  sectionContentEl.innerHTML = '';
+  const h2 = document.createElement('h2');
+  h2.textContent = section.label;
+  sectionContentEl.appendChild(h2);
+
+  const list = document.createElement('ul');
+  list.className = 'docs-index-list';
+
+  for (const entry of data) {
+    const li = document.createElement('li');
+    li.className = 'docs-index-item';
+
+    const header = document.createElement('div');
+    header.className = 'docs-index-item-header';
+
+    const name = document.createElement('span');
+    name.className = 'docs-index-item-name';
+    name.textContent = entry.name || entry.title || (entry.slug ? 'ADR-' + entry.number + ' ' + entry.title : 'Unknown');
+
+    header.appendChild(name);
+
+    if (entry.model) {
+      const model = document.createElement('span');
+      model.className = 'docs-index-item-model';
+      model.textContent = entry.model;
+      header.appendChild(model);
+    }
+
+    if (entry.status) {
+      const status = document.createElement('span');
+      status.className = 'docs-index-item-model';
+      status.textContent = entry.status;
+      header.appendChild(status);
+    }
+
+    const body = document.createElement('div');
+    body.className = 'docs-index-item-body';
+    body.innerHTML = '<div class="loading-spinner" style="display:none">Loading…</div><div class="content-body"></div>';
+
+    header.addEventListener('click', async () => {
+      const isOpen = body.classList.contains('open');
+      body.classList.toggle('open', !isOpen);
+
+      if (!isOpen && entry.path) {
+        const spinner = body.querySelector('.loading-spinner');
+        const innerContent = body.querySelector('.content-body');
+        if (spinner) spinner.style.display = 'block';
+        if (innerContent) innerContent.innerHTML = '';
+
+        try {
+          const res = await fetch('/api/docs/file?path=' + encodeURIComponent(entry.path));
+          if (!res.ok) throw new Error('HTTP ' + res.status);
+          const mdText = await res.text();
+          if (innerContent) innerContent.innerHTML = renderMarkdown(mdText);
+          if (spinner) spinner.style.display = 'none';
+        } catch (err) {
+          if (innerContent) innerContent.innerHTML = '<p class="empty-state">Error: ' + err.message + '</p>';
+          if (spinner) spinner.style.display = 'none';
+        }
+      }
+    });
+
+    li.appendChild(header);
+    li.appendChild(body);
+    list.appendChild(li);
+  }
+
+  sectionContentEl.appendChild(list);
+
+  if (tocEl) tocEl.innerHTML = '';
+}
+
+// ── Utility: relative date ────────────────────────────────────────────────────
+
+function relativeDate(unixSeconds) {
+  const now = Math.floor(Date.now() / 1000);
+  const diff = now - unixSeconds;
+
+  if (diff < 86400) return 'today';
+  if (diff < 172800) return 'yesterday';
+
+  const days = Math.floor(diff / 86400);
+  if (days < 7) {
+    const d = new Date(unixSeconds * 1000);
+    return d.toLocaleDateString('en-US', { weekday: 'short' });
+  }
+  const d = new Date(unixSeconds * 1000);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+function formatTokens(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'k';
+  return String(n);
+}
+
+// ── Projects card ─────────────────────────────────────────────────────────────
+
+function renderProjects(projects) {
+  const list = document.getElementById('project-list');
+  if (!projects || projects.length === 0) {
+    list.innerHTML = '<li class="empty-state">No projects in the last 30 days</li>';
+    return;
+  }
+
+  list.innerHTML = projects
+    .map(
+      (p) => `
+      <li>
+        <span class="project-name" title="${p.path || ''}">${p.name || p.path || 'unknown'}</span>
+        <span class="project-meta">
+          <span class="project-date">${relativeDate(p.last_seen)}</span>
+          <span class="project-sessions">${p.session_count} session${p.session_count !== 1 ? 's' : ''}</span>
+        </span>
+      </li>`
+    )
+    .join('');
+}
+
+// ── Models chart (pie) ────────────────────────────────────────────────────────
+
+const MODEL_COLORS = {
+  opus: '#f78166',
+  sonnet: '#58a6ff',
+  haiku: '#39d353',
+  other: '#8b949e',
+};
+
+function renderModels(models) {
+  const canvas = document.getElementById('models-chart');
+  if (!canvas) return;
+
+  const labels = [];
+  const data = [];
+  const colors = [];
+
+  for (const [key, val] of Object.entries(models || {})) {
+    if (val.count > 0) {
+      labels.push(`${key} (${val.pct}%)`);
+      data.push(val.count);
+      colors.push(MODEL_COLORS[key] || MODEL_COLORS.other);
+    }
+  }
+
+  if (labels.length === 0) {
+    labels.push('no data');
+    data.push(1);
+    colors.push('#30363d');
+  }
+
+  if (modelsChart) {
+    modelsChart.data.labels = labels;
+    modelsChart.data.datasets[0].data = data;
+    modelsChart.data.datasets[0].backgroundColor = colors;
+    modelsChart.update();
+    return;
+  }
+
+  modelsChart = new Chart(canvas, {
+    type: 'pie',
+    data: {
+      labels,
+      datasets: [
+        {
+          data,
+          backgroundColor: colors,
+          borderColor: '#161b22',
+          borderWidth: 2,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            color: '#e6edf3',
+            font: { family: 'Consolas, monospace', size: 11 },
+            boxWidth: 12,
+          },
+        },
+      },
+    },
+  });
+}
+
+// ── RTK card ──────────────────────────────────────────────────────────────────
+
+function renderRtk(rtk) {
+  const tokensEl = document.getElementById('rtk-tokens');
+  const pctEl = document.getElementById('rtk-pct');
+  const canvas = document.getElementById('rtk-chart');
+
+  if (!rtk) {
+    if (tokensEl) tokensEl.textContent = 'n/a';
+    if (pctEl) pctEl.textContent = 'n/a';
+    return;
+  }
+
+  if (tokensEl) tokensEl.textContent = formatTokens(rtk.tokens_saved || 0);
+  if (pctEl) pctEl.textContent = (rtk.savings_pct || 0).toFixed(1) + '%';
+
+  const daily = Array.isArray(rtk.daily) ? rtk.daily : [];
+  const labels = daily.map((d) => d.date);
+  const values = daily.map((d) => d.tokens_saved);
+
+  if (!canvas) return;
+
+  if (rtkChart) {
+    rtkChart.data.labels = labels;
+    rtkChart.data.datasets[0].data = values;
+    rtkChart.update();
+    return;
+  }
+
+  rtkChart = new Chart(canvas, {
+    type: 'bar',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: 'tokens saved',
+          data: values,
+          backgroundColor: '#39d353',
+          borderRadius: 3,
+        },
+      ],
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        legend: { display: false },
+      },
+      scales: {
+        x: {
+          ticks: { color: '#8b949e', font: { size: 10 } },
+          grid: { color: '#21262d' },
+        },
+        y: {
+          ticks: { color: '#8b949e', font: { size: 10 } },
+          grid: { color: '#21262d' },
+        },
+      },
+    },
+  });
+}
+
+// ── Main fetch / poll ─────────────────────────────────────────────────────────
+
+async function fetchStats() {
+  const statusEl = document.getElementById('status-msg');
+  const lastUpdatedEl = document.getElementById('last-updated');
+
+  try {
+    const res = await fetch('/api/stats');
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const data = await res.json();
+
+    renderProjects(data.projects);
+    renderModels(data.models);
+    renderRtk(data.rtk);
+
+    const now = new Date().toLocaleTimeString();
+    if (statusEl) statusEl.textContent = 'OK';
+    if (lastUpdatedEl) lastUpdatedEl.textContent = 'updated ' + now;
+  } catch (err) {
+    if (statusEl) statusEl.textContent = 'Error: ' + err.message;
+  }
+}
+
+// ── Initialization ────────────────────────────────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Restore active tab from URL hash (IR-6)
+  const hash = (window.location.hash || '#dashboard').replace('#', '');
+  const validTabs = ['dashboard', 'manual', 'docs'];
+  const initialTab = validTabs.includes(hash) ? hash : 'dashboard';
+  activateTab(initialTab);
+
+  // Tab button click handlers
+  document.querySelectorAll('.tab-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const tabId = btn.dataset.tab;
+      window.location.hash = '#' + tabId;
+      // hashchange will fire activateTab
+    });
+  });
+
+  // Re-activate tab when the URL hash changes (back/forward navigation)
+  // Only react to top-level tab hashes; ignore TOC anchors (#toc-heading-*)
+  window.addEventListener('hashchange', () => {
+    const newHash = (window.location.hash || '#dashboard').replace('#', '');
+    if (validTabs.includes(newHash)) {
+      activateTab(newHash);
+    }
+  });
+});