codebase-onboarder 0.1.0

package/public/js/heatmap.js

@@ -0,0 +1,185 @@
+export function initHeatmap(canvas, files = []) {
+  const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+  if (!gl) {
+    console.warn('WebGL not supported, falling back to Canvas 2D (not implemented)');
+    return { update: () => {}, destroy: () => {} };
+  }
+
+  const vsSource = `
+    attribute vec2 aVertexPosition;
+    attribute vec3 aColor;
+    varying vec3 vColor;
+    void main() {
+      gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+      vColor = aColor;
+    }
+  `;
+
+  const fsSource = `
+    precision mediump float;
+    varying vec3 vColor;
+    void main() {
+      gl_FragColor = vec4(vColor, 1.0);
+    }
+  `;
+
+  function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.error(gl.getShaderInfoLog(shader));
+      gl.deleteShader(shader);
+      return null;
+    }
+    return shader;
+  }
+
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
+  const program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+
+  const positionLocation = gl.getAttribLocation(program, 'aVertexPosition');
+  const colorLocation = gl.getAttribLocation(program, 'aColor');
+
+  const positionBuffer = gl.createBuffer();
+  const colorBuffer = gl.createBuffer();
+
+  let fileRects = [];
+  let cols, rows;
+
+  function resize() {
+    const rect = canvas.parentElement.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    if (files.length) update(files);
+  }
+
+  function getRiskColor(risk) {
+    if (risk <= 33) return [76/255, 175/255, 80/255]; // Green
+    if (risk <= 66) return [255/255, 193/255, 7/255]; // Yellow
+    return [244/255, 67/255, 54/255]; // Red
+  }
+
+  function update(newFiles) {
+    files = newFiles.sort((a, b) => a.path.localeCompare(b.path));
+    const count = files.length;
+    if (count === 0) return;
+
+    cols = Math.ceil(Math.sqrt(count * (canvas.width / canvas.height)));
+    rows = Math.ceil(count / cols);
+    
+    const tileW = 2.0 / cols;
+    const tileH = 2.0 / rows;
+
+    const positions = new Float32Array(count * 12);
+    const colors = new Float32Array(count * 18);
+
+    fileRects = [];
+
+    for (let i = 0; i < count; i++) {
+      const c = i % cols;
+      const r = Math.floor(i / cols);
+      
+      const x = -1.0 + c * tileW;
+      const y = 1.0 - r * tileH;
+      
+      const padX = tileW * 0.05;
+      const padY = tileH * 0.05;
+      
+      const px1 = x + padX; const py1 = y - padY;
+      const px2 = x + tileW - padX; const py2 = y - tileH + padY;
+
+      fileRects.push({ file: files[i], x: px1, y: py1, w: px2-px1, h: py2-py1 });
+
+      const pIdx = i * 12;
+      positions.set([
+        px1, py1, px2, py1, px1, py2,
+        px1, py2, px2, py1, px2, py2
+      ], pIdx);
+
+      const color = getRiskColor(files[i].risk || 0);
+      const cIdx = i * 18;
+      for (let j = 0; j < 6; j++) {
+        colors.set(color, cIdx + j * 3);
+      }
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+
+    render(count);
+  }
+
+  function render(count) {
+    gl.clearColor(0.1, 0.1, 0.1, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    gl.useProgram(program);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.enableVertexAttribArray(positionLocation);
+    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+    gl.enableVertexAttribArray(colorLocation);
+    gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);
+
+    gl.drawArrays(gl.TRIANGLES, 0, count * 6);
+  }
+
+  canvas.addEventListener('mousemove', e => {
+    if (fileRects.length === 0) return;
+    const rect = canvas.getBoundingClientRect();
+    const nx = ((e.clientX - rect.left) / canvas.width) * 2 - 1;
+    const ny = -(((e.clientY - rect.top) / canvas.height) * 2 - 1);
+    
+    let hovered = null;
+    for (const fr of fileRects) {
+      if (nx >= fr.x && nx <= fr.x + fr.w && ny <= fr.y && ny >= fr.y - fr.h) {
+        hovered = fr.file;
+        break;
+      }
+    }
+
+    const tooltip = document.getElementById('heatmapTooltip');
+    if (tooltip) {
+      if (hovered) {
+        tooltip.textContent = `${hovered.path} (Risk: ${hovered.risk || 0})`;
+        tooltip.style.left = e.clientX + 10 + 'px';
+        tooltip.style.top = e.clientY + 10 + 'px';
+        tooltip.hidden = false;
+      } else {
+        tooltip.hidden = true;
+      }
+    }
+  });
+
+  canvas.addEventListener('click', () => {
+    const tooltip = document.getElementById('heatmapTooltip');
+    if (tooltip && !tooltip.hidden && fileRects.length) {
+      // Find currently hovered file
+      const rect = canvas.getBoundingClientRect();
+      // Dispatch click for the hovered file if available
+      canvas.dispatchEvent(new CustomEvent('heatmap-node-click', {
+        detail: { path: tooltip.textContent.split(' ')[0] },
+        bubbles: true
+      }));
+    }
+  });
+
+  window.addEventListener('resize', resize);
+  resize();
+
+  return {
+    update,
+    destroy: () => window.removeEventListener('resize', resize)
+  };
+}

package/public/js/highlight.js

@@ -0,0 +1,122 @@
+// Hand-rolled syntax highlighting — a single left-to-right scanner, no
+// regex tokenizing, so highlighting is linear-time even on pathological
+// input (an earlier master-regex version could stall on real files).
+// Runs in Node (tests) and the browser.
+
+import { escapeHtml } from './html.js';
+
+const KEYWORDS = {
+  js: 'const let var function return import export from default if else for while do class extends new await async try catch finally throw typeof instanceof of in switch case break continue yield static get set super this null undefined true false void delete',
+  py: 'def class return import from as if elif else for while in not and or is None True False try except finally raise with lambda pass break continue yield global nonlocal assert async await del',
+  go: 'func package import return if else for range var const type struct interface map chan go defer select switch case break continue fallthrough default nil true false iota',
+  c: 'int void char float double long short unsigned signed const static return if else for while do switch case break continue struct union enum typedef sizeof include define extern volatile register goto',
+};
+
+export function langOf(path) {
+  const ext = (path.match(/\.([A-Za-z0-9]+)$/) || [, ''])[1].toLowerCase();
+  if (['js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'json'].includes(ext)) return 'js';
+  if (['py', 'pyi'].includes(ext)) return 'py';
+  if (ext === 'go') return 'go';
+  if (['c', 'h', 'cpp', 'cc', 'java', 'rs', 'rb', 'php', 'cs', 'swift', 'kt', 'css'].includes(ext)) return 'c';
+  return null; // markdown, yaml, toml, plain text — shown unadorned
+}
+
+const isWordStart = (c) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || c === '_' || c === '$';
+const isWordPart = (c) => isWordStart(c) || (c >= '0' && c <= '9');
+const isDigit = (c) => c >= '0' && c <= '9';
+
+export function highlightCode(source, lang) {
+  if (!lang || !KEYWORDS[lang]) return escapeHtml(source);
+  const kw = new Set(KEYWORDS[lang].split(' '));
+  const hashComment = lang === 'py';
+  const out = [];
+  let plain = '';
+
+  const flushPlain = () => {
+    if (plain) { out.push(escapeHtml(plain)); plain = ''; }
+  };
+  const emit = (cls, text) => {
+    flushPlain();
+    out.push(`<span class="${cls}">${escapeHtml(text)}</span>`);
+  };
+
+  const n = source.length;
+  let i = 0;
+  while (i < n) {
+    const c = source[i];
+
+    // Line comments: # for python, // elsewhere.
+    if ((hashComment && c === '#') || (!hashComment && c === '/' && source[i + 1] === '/')) {
+      let j = source.indexOf('\n', i);
+      if (j === -1) j = n;
+      emit('tok-com', source.slice(i, j));
+      i = j;
+      continue;
+    }
+
+    // Block comments (and preprocessor lines for the C family).
+    if (!hashComment && c === '/' && source[i + 1] === '*') {
+      const end = source.indexOf('*/', i + 2);
+      const j = end === -1 ? n : end + 2;
+      emit('tok-com', source.slice(i, j));
+      i = j;
+      continue;
+    }
+    if (lang === 'c' && c === '#' && (i === 0 || source[i - 1] === '\n')) {
+      let j = source.indexOf('\n', i);
+      if (j === -1) j = n;
+      emit('tok-com', source.slice(i, j));
+      i = j;
+      continue;
+    }
+
+    // Strings. Python triple quotes first; backticks are multiline in js/go.
+    if (lang === 'py' && (source.startsWith("'''", i) || source.startsWith('"""', i))) {
+      const q = source.slice(i, i + 3);
+      const end = source.indexOf(q, i + 3);
+      const j = end === -1 ? n : end + 3;
+      emit('tok-str', source.slice(i, j));
+      i = j;
+      continue;
+    }
+    if (c === "'" || c === '"' || (c === '`' && lang !== 'py' && lang !== 'c')) {
+      const multiline = c === '`' || lang === 'py';
+      let j = i + 1;
+      while (j < n) {
+        const d = source[j];
+        if (d === '\\') { j += 2; continue; }
+        if (d === c) { j++; break; }
+        if (d === '\n' && !multiline) break; // unterminated: stop at the line end
+        j++;
+      }
+      emit('tok-str', source.slice(i, j));
+      i = j;
+      continue;
+    }
+
+    // Words → keywords when the language claims them.
+    if (isWordStart(c)) {
+      let j = i + 1;
+      while (j < n && isWordPart(source[j])) j++;
+      const w = source.slice(i, j);
+      if (kw.has(w)) emit('tok-kw', w);
+      else plain += w;
+      i = j;
+      continue;
+    }
+
+    // Numbers.
+    if (isDigit(c)) {
+      let j = i + 1;
+      while (j < n && (isDigit(source[j]) || source[j] === '.' || source[j] === '_')) j++;
+      emit('tok-num', source.slice(i, j));
+      i = j;
+      continue;
+    }
+
+    plain += c;
+    i++;
+  }
+  flushPlain();
+  return out.join('');
+}

package/public/js/html.js

@@ -0,0 +1,50 @@
+// Escaping at the boundary — one implementation, used everywhere.
+//
+// Onboarder renders content it does not control: file and folder names from a
+// repository that may have been cloned from an arbitrary git URL, READMEs,
+// GitHub API fields, and model output. All of it reaches the DOM as HTML
+// strings, and a good deal of it lands inside attributes
+// (`title="…"`, `data-path="…"`). So quotes matter as much as angle brackets:
+// a file named `x" onmouseover="…` closes the attribute and opens a handler,
+// and double quotes are legal in filenames on macOS and Linux.
+//
+// This used to be five near-copies — four of which escaped only & < > — with
+// the attribute call sites quietly relying on the one that didn't. Now there
+// is one function and it escapes all five characters.
+//
+// Single pass, one regex, one lookup per match: strictly cheaper than the
+// chain of four .replace() calls it replaces, which matters because the
+// syntax highlighter runs this over every token of every file.
+
+const ESCAPES = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+const NEEDS_ESCAPE = /[&<>"']/g;
+
+/**
+ * Make a string safe to interpolate into HTML — as text, or inside a
+ * double- or single-quoted attribute value.
+ */
+export function escapeHtml(s) {
+  return String(s ?? '').replace(NEEDS_ESCAPE, (c) => ESCAPES[c]);
+}
+
+// Whitespace and C0/C1 control characters, which browsers ignore when they
+// parse a URL scheme — so `java\tscript:alert(1)` is a live javascript: URL.
+const URL_NOISE = /[\s\u0000-\u001F\u007F-\u009F]/g;
+
+/**
+ * A URL safe to put in an href. Anything that isn't plainly http(s) comes back
+ * empty, which keeps `javascript:`, `data:` and `vbscript:` out of the DOM
+ * even when the surrounding markup is assembled by hand.
+ */
+export function safeUrl(url) {
+  const raw = String(url ?? '').trim();
+  if (!/^https?:\/\//i.test(raw.replace(URL_NOISE, ''))) return '';
+  return escapeHtml(raw);
+}

package/public/js/insightsView.js

@@ -0,0 +1,236 @@
+// GitHub Insights & Pulse View.
+// Renders 52-week contribution heatmap, contributor leaderboard, punchcard, and release timeline.
+
+import { escapeHtml } from './html.js';
+
+export function renderInsights(container, { scan, facts, history }) {
+  if (!container) return;
+
+  const commits = history?.commits || [];
+  const authorMap = new Map();
+  const dayHourMatrix = Array.from({ length: 7 }, () => Array(24).fill(0));
+  const dayCounts = new Map();
+
+  // Process commit dates & authors
+  for (const c of commits) {
+    const { key, name } = authorIdentity(c.author);
+    if (!authorMap.has(key)) {
+      authorMap.set(key, { name, commits: 0, additions: 0, deletions: 0, firstDate: c.date, lastDate: c.date, files: new Set() });
+    }
+    const a = authorMap.get(key);
+    a.commits++;
+    if (c.date < a.firstDate) a.firstDate = c.date;
+    if (c.date > a.lastDate) a.lastDate = c.date;
+
+    const d = new Date(c.date || Date.now());
+    if (!isNaN(d.getTime())) {
+      const day = d.getDay(); // 0 = Sun, 6 = Sat
+      const hour = d.getHours();
+      dayHourMatrix[day][hour]++;
+
+      const ymd = d.toISOString().slice(0, 10);
+      dayCounts.set(ymd, (dayCounts.get(ymd) || 0) + 1);
+    }
+  }
+
+  const sortedAuthors = [...authorMap.values()].sort((a, b) => b.commits - a.commits);
+  const totalCommits = commits.length || 1;
+
+  container.innerHTML = `
+    <div class="insights-layout">
+      <section class="insights-hero">
+        <div class="insights-stat-card">
+          <span class="isc-num">${commits.length}</span>
+          <span class="isc-lbl">Total Commits</span>
+        </div>
+        <div class="insights-stat-card">
+          <span class="isc-num">${sortedAuthors.length}</span>
+          <span class="isc-lbl">Contributors</span>
+        </div>
+        <div class="insights-stat-card">
+          <span class="isc-num">${scan.files?.length || 0}</span>
+          <span class="isc-lbl">Tracked Files</span>
+        </div>
+        <div class="insights-stat-card">
+          <span class="isc-num">${scan.stats?.edgeCount || 0}</span>
+          <span class="isc-lbl">Graph Dependencies</span>
+        </div>
+      </section>
+
+      <!-- 52-Week Contribution Calendar Heatmap -->
+      <section class="insights-section">
+        <div class="section-head">
+          <h3>Contribution Activity</h3>
+          <span class="section-sub">Commit frequency over the past year</span>
+        </div>
+        <div class="heatmap-card">
+          ${renderCalendarHeatmap(dayCounts)}
+        </div>
+      </section>
+
+      <div class="insights-grid-2">
+        <!-- Contributor Leaderboard -->
+        <section class="insights-section">
+          <div class="section-head">
+            <h3>Top Contributors</h3>
+            <span class="section-sub">Ranked by total commit contributions</span>
+          </div>
+          <div class="contrib-list">
+            ${sortedAuthors.slice(0, 10).map((a, idx) => `
+              <div class="contrib-item">
+                <div class="contrib-rank">#${idx + 1}</div>
+                <div class="contrib-avatar">${escapeHtml(a.name.slice(0, 2).toUpperCase())}</div>
+                <div class="contrib-info">
+                  <div class="contrib-name">${escapeHtml(a.name)}</div>
+                  <div class="contrib-meta">${a.commits} commit${a.commits === 1 ? '' : 's'} (${Math.round((a.commits / totalCommits) * 100)}%)</div>
+                </div>
+                <div class="contrib-bar-wrap">
+                  <div class="contrib-bar" style="width: ${Math.round((a.commits / totalCommits) * 100)}%"></div>
+                </div>
+              </div>
+            `).join('') || '<p class="insights-empty">No git history available</p>'}
+          </div>
+        </section>
+
+        <!-- Commit Punchcard -->
+        <section class="insights-section">
+          <div class="section-head">
+            <h3>Commit Punch Card</h3>
+            <span class="section-sub">Activity by day of week &amp; time of day</span>
+          </div>
+          <div class="punchcard-card">
+            ${renderPunchcardSvg(dayHourMatrix)}
+          </div>
+        </section>
+      </div>
+    </div>
+  `;
+}
+
+// gitHistory shapes commit.author as { name, email }; a bare string is also
+// tolerated so older cached payloads don't break the view. Commits are grouped
+// by email when present — the same person with two name spellings is one
+// contributor, like shared/analyzer/history.js does server-side.
+function authorIdentity(author) {
+  if (author && typeof author === 'object') {
+    const name = author.name || author.email || 'Anonymous';
+    return { key: author.email || name, name };
+  }
+  const name = author || 'Anonymous';
+  return { key: name, name };
+}
+
+
+function renderCalendarHeatmap(dayCounts) {
+  const weeks = 52;
+  const daysPerWeek = 7;
+  const cellSize = 12;
+  const cellGap = 3;
+
+  const now = new Date();
+  const cells = [];
+  const oneDayMs = 24 * 60 * 60 * 1000;
+
+  // Align to end on current day
+  const endDay = new Date(now);
+  const startDay = new Date(endDay.getTime() - (weeks * 7) * oneDayMs);
+
+  let maxCount = 1;
+  for (const c of dayCounts.values()) if (c > maxCount) maxCount = c;
+
+  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  for (let w = 0; w < weeks; w++) {
+    for (let d = 0; d < 7; d++) {
+      const cur = new Date(startDay.getTime() + (w * 7 + d) * oneDayMs);
+      const ymd = cur.toISOString().slice(0, 10);
+      const count = dayCounts.get(ymd) || 0;
+      let level = 0;
+      if (count > 0) level = Math.min(4, Math.ceil((count / maxCount) * 4));
+
+      const x = w * (cellSize + cellGap) + 30;
+      const y = d * (cellSize + cellGap) + 20;
+
+      cells.push(`
+        <rect class="cal-cell lvl-${level}" x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" rx="2">
+          <title>${ymd}: ${count} commit${count === 1 ? '' : 's'}</title>
+        </rect>
+      `);
+    }
+  }
+
+  const svgWidth = weeks * (cellSize + cellGap) + 40;
+  const svgHeight = 7 * (cellSize + cellGap) + 30;
+
+  return `
+    <div class="cal-scroll-wrap">
+      <svg class="cal-heatmap-svg" viewBox="0 0 ${svgWidth} ${svgHeight}" style="max-width: 100%; height: auto;">
+        <text class="cal-label" x="5" y="42">Mon</text>
+        <text class="cal-label" x="5" y="72">Wed</text>
+        <text class="cal-label" x="5" y="102">Fri</text>
+        ${cells.join('')}
+      </svg>
+      <div class="cal-legend">
+        <span>Less</span>
+        <span class="cal-cell-legend lvl-0"></span>
+        <span class="cal-cell-legend lvl-1"></span>
+        <span class="cal-cell-legend lvl-2"></span>
+        <span class="cal-cell-legend lvl-3"></span>
+        <span class="cal-cell-legend lvl-4"></span>
+        <span>More</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderPunchcardSvg(matrix) {
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const cellW = 20;
+  const cellH = 20;
+  const padLeft = 40;
+  const padTop = 20;
+  let max = 1;
+
+  for (let d = 0; d < 7; d++) {
+    for (let h = 0; h < 24; h++) {
+      if (matrix[d][h] > max) max = matrix[d][h];
+    }
+  }
+
+  const dots = [];
+  for (let d = 0; d < 7; d++) {
+    for (let h = 0; h < 24; h++) {
+      const val = matrix[d][h];
+      if (val === 0) continue;
+      const r = Math.max(2, Math.min(8, (val / max) * 8));
+      const cx = padLeft + h * cellW + cellW / 2;
+      const cy = padTop + d * cellH + cellH / 2;
+      dots.push(`
+        <circle cx="${cx}" cy="${cy}" r="${r}" class="punch-dot">
+          <title>${days[d]} ${h}:00 - ${val} commit${val === 1 ? '' : 's'}</title>
+        </circle>
+      `);
+    }
+  }
+
+  const hoursHeader = [0, 4, 8, 12, 16, 20].map((h) => `
+    <text class="punch-lbl" x="${padLeft + h * cellW + cellW / 2}" y="12" text-anchor="middle">${h}h</text>
+  `).join('');
+
+  const daysHeader = days.map((day, idx) => `
+    <text class="punch-lbl" x="5" y="${padTop + idx * cellH + cellH / 2 + 4}">${day}</text>
+  `).join('');
+
+  const svgW = padLeft + 24 * cellW + 10;
+  const svgH = padTop + 7 * cellH + 10;
+
+  return `
+    <div class="cal-scroll-wrap">
+      <svg class="punch-svg" viewBox="0 0 ${svgW} ${svgH}">
+        ${hoursHeader}
+        ${daysHeader}
+        ${dots.join('')}
+      </svg>
+    </div>
+  `;
+}