nestjs-profiler 1.0.22 → 1.0.25

package/views/code-quality.html

@@ -0,0 +1,573 @@
+<div id="cqRoot">
+
+  <!-- ── Idle state (default, visible until JS runs) ──────────────────────── -->
+  <div id="cqIdle" class="bg-white rounded-xl border border-gray-200 shadow-sm p-12">
+    <div class="max-w-lg mx-auto text-center">
+      <div class="flex justify-center mb-5">
+        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center shadow-lg">
+          <svg class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+          </svg>
+        </div>
+      </div>
+      <h2 class="text-xl font-bold text-gray-900 mb-2">Code Quality Analysis</h2>
+      <p class="text-sm text-gray-500 mb-2">Runs <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs font-mono">eslint --format json</code> and <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs font-mono">tsc --noEmit</code> on your project and surfaces every issue with rule explanations and fix hints.</p>
+      <p class="text-xs text-gray-400 mb-6">Requires ESLint and/or TypeScript to be configured in your project.</p>
+      <button onclick="window.__cqRun && window.__cqRun(true)"
+        class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-700 hover:to-indigo-700 text-white shadow-md transition-all">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        Run Analysis
+      </button>
+    </div>
+  </div>
+
+  <!-- ── Loading state ─────────────────────────────────────────────────────── -->
+  <div id="cqLoading" class="hidden bg-white rounded-xl border border-gray-200 shadow-sm p-12">
+    <div class="max-w-lg mx-auto text-center">
+      <div class="flex justify-center mb-5">
+        <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center shadow-lg">
+          <svg class="w-8 h-8 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+          </svg>
+        </div>
+      </div>
+      <h2 class="text-lg font-bold text-gray-800 mb-1">Analysing your codebase…</h2>
+      <p id="cqLoadLabel" class="text-sm text-gray-500 mb-6">Starting ESLint</p>
+      <div class="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
+        <div id="cqProgressBar" class="h-2 rounded-full bg-gradient-to-r from-violet-500 to-indigo-500 transition-all duration-700 ease-out" style="width:0%"></div>
+      </div>
+      <div class="mt-4 flex justify-between text-xs text-gray-400">
+        <span id="cqStep1">ESLint</span>
+        <span id="cqStep2">TypeScript</span>
+        <span id="cqStep3">Processing results</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Error state ────────────────────────────────────────────────────────── -->
+  <div id="cqError" class="hidden bg-red-50 border border-red-200 rounded-xl p-8 text-center">
+    <svg class="w-10 h-10 text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+    <p class="text-red-700 font-semibold mb-1">Analysis failed</p>
+    <p id="cqErrorMsg" class="text-red-500 text-sm mb-4"></p>
+    <button onclick="window.__cqRun && window.__cqRun(true)"
+      class="px-4 py-2 text-sm font-medium rounded-lg bg-red-100 hover:bg-red-200 text-red-700">
+      Try again
+    </button>
+  </div>
+
+  <!-- ── Results state ──────────────────────────────────────────────────────── -->
+  <div id="cqResults" class="hidden space-y-6">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+      <div>
+        <h2 class="text-xl font-bold text-gray-900">Code Quality Report</h2>
+        <p id="cqScanMeta" class="text-xs text-gray-400 mt-0.5"></p>
+      </div>
+      <div class="flex items-center gap-2">
+        <!-- View toggle -->
+        <div class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 text-xs font-medium">
+          <button id="btnByFile" onclick="setView('file')"
+            class="px-3 py-1.5 rounded-md transition-all bg-white shadow text-gray-800">
+            By File
+          </button>
+          <button id="btnByRule" onclick="setView('rule')"
+            class="px-3 py-1.5 rounded-md transition-all text-gray-500 hover:text-gray-700">
+            By Rule
+          </button>
+        </div>
+        <button onclick="window.__cqRun && window.__cqRun(true)"
+          class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 bg-white hover:bg-gray-50 text-gray-600">
+          <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+          Re-run
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Summary cards ── -->
+    <div id="cqSummaryCards" class="grid grid-cols-2 sm:grid-cols-5 gap-3"></div>
+
+    <!-- ── Sections: ESLint + TSC ── -->
+    <div id="cqSections" class="space-y-6"></div>
+
+    <!-- ── All-clear ── -->
+    <div id="cqAllClear" class="hidden bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-10 text-center">
+      <div class="flex justify-center mb-4">
+        <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
+          <svg class="w-9 h-9 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+      </div>
+      <p class="text-green-800 font-bold text-lg">No issues found</p>
+      <p class="text-green-600 text-sm mt-1">Your codebase passed all checks. Great job!</p>
+    </div>
+
+  </div>
+</div>
+
+<style>
+  .cq-file-header { cursor: pointer; user-select: none; }
+  .cq-file-header:hover { background-color: #f8fafc; }
+  .cq-messages { display: none; }
+  .cq-messages.open { display: table-row-group; }
+  .cq-chevron { transition: transform 0.2s; }
+  .cq-chevron.open { transform: rotate(90deg); }
+  .rule-badge { font-family: ui-monospace, monospace; }
+  .sev-error   { background:#fef2f2; color:#dc2626; }
+  .sev-warning { background:#fffbeb; color:#d97706; }
+  .sev-info    { background:#eff6ff; color:#2563eb; }
+</style>
+
+<script>
+  // ── State machine ─────────────────────────────────────────────────────────
+  function cqHideAll() {
+    ['cqIdle','cqLoading','cqError','cqResults'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.classList.add('hidden');
+    });
+  }
+  function showIdle()    { cqHideAll(); document.getElementById('cqIdle')?.classList.remove('hidden'); }
+  function showLoading() { cqHideAll(); document.getElementById('cqLoading')?.classList.remove('hidden'); }
+  function showError(msg){ cqHideAll(); document.getElementById('cqError')?.classList.remove('hidden'); const el = document.getElementById('cqErrorMsg'); if(el) el.textContent = msg; }
+  function showResults(d){ cqHideAll(); document.getElementById('cqResults')?.classList.remove('hidden'); renderAll(d); }
+
+  // ── Progress ──────────────────────────────────────────────────────────────
+  let _pt = null, _pi = 0;
+  const _steps = [
+    { pct:20, label:'Running ESLint…',           step:'cqStep1' },
+    { pct:55, label:'Running TypeScript check…',  step:'cqStep2' },
+    { pct:85, label:'Processing results…',        step:'cqStep3' },
+  ];
+  function startProgress() {
+    _pi = 0; setPct(0, 'Starting analysis…');
+    _pt = setInterval(() => {
+      if (_pi >= _steps.length) { clearInterval(_pt); return; }
+      const s = _steps[_pi++];
+      setPct(s.pct, s.label);
+      document.querySelectorAll('#cqLoading .flex.justify-between span').forEach(el => el.classList.remove('text-violet-600','font-semibold'));
+      const active = document.getElementById(s.step);
+      if (active) active.classList.add('text-violet-600','font-semibold');
+    }, 1800);
+    window.__cqProgressTimer = _pt;
+  }
+  function setPct(pct, label) {
+    const bar = document.getElementById('cqProgressBar');
+    const lbl = document.getElementById('cqLoadLabel');
+    if (bar) bar.style.width = pct + '%';
+    if (lbl) lbl.textContent = label;
+  }
+  function finishProgress(cb) {
+    clearInterval(_pt);
+    setPct(100, 'Done!');
+    setTimeout(cb, 400);
+  }
+
+  // ── View toggle ───────────────────────────────────────────────────────────
+  let _currentView = 'file';
+  let _lastData = null;
+  function setView(v) {
+    _currentView = v;
+    document.getElementById('btnByFile').className = v === 'file'
+      ? 'px-3 py-1.5 rounded-md transition-all bg-white shadow text-gray-800'
+      : 'px-3 py-1.5 rounded-md transition-all text-gray-500 hover:text-gray-700';
+    document.getElementById('btnByRule').className = v === 'rule'
+      ? 'px-3 py-1.5 rounded-md transition-all bg-white shadow text-gray-800'
+      : 'px-3 py-1.5 rounded-md transition-all text-gray-500 hover:text-gray-700';
+    if (_lastData) renderSections(_lastData);
+  }
+
+  // ── Main render ───────────────────────────────────────────────────────────
+  function renderAll(data) {
+    _lastData = data;
+    renderSummaryCards(data);
+    renderSections(data);
+    renderMeta(data);
+
+    const eslintIssues = (data.eslint?.totalErrors || 0) + (data.eslint?.totalWarnings || 0);
+    const tscIssues    = (data.tsc?.totalErrors || 0) + (data.tsc?.totalWarnings || 0);
+    document.getElementById('cqAllClear').classList.toggle('hidden', eslintIssues + tscIssues > 0);
+  }
+
+  function renderMeta(data) {
+    const meta = document.getElementById('cqScanMeta');
+    if (!meta) return;
+    const time = new Date(data.scannedAt).toLocaleTimeString();
+    const age  = Math.round((Date.now() - data.scannedAt) / 1000);
+    const ageLabel = age < 60 ? `${age}s ago` : `${Math.round(age/60)}m ago`;
+    meta.innerHTML = `Scanned at ${time}` + (data.fromCache
+      ? ` <span class="ml-2 inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500">
+           <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+           Cached · ${ageLabel}</span>`
+      : ` <span class="ml-2 inline-flex items-center gap-1 px-1.5 py-0.5 text-xs rounded-full bg-green-100 text-green-700">Fresh scan</span>`);
+  }
+
+  function renderSummaryCards(data) {
+    const eslint = data.eslint || {};
+    const tsc    = data.tsc    || {};
+    const totalErrors   = (eslint.totalErrors   || 0) + (tsc.totalErrors   || 0);
+    const totalWarnings = (eslint.totalWarnings  || 0) + (tsc.totalWarnings || 0);
+    const totalIssues   = totalErrors + totalWarnings;
+    const totalFixable  = eslint.totalFixable || 0;
+    const filesAffected = eslint.filesAffected || 0;
+
+    const card = (label, value, sub, cls) => `
+      <div class="rounded-xl border p-4 ${cls}">
+        <div class="text-3xl font-extrabold mb-0.5">${value}</div>
+        <div class="text-xs font-semibold uppercase tracking-widest">${label}</div>
+        ${sub ? `<div class="text-xs opacity-60 mt-0.5">${sub}</div>` : ''}
+      </div>`;
+
+    document.getElementById('cqSummaryCards').innerHTML = [
+      card('Total Issues',    totalIssues,   '',                    totalIssues   > 0 ? 'bg-red-50 border-red-200 text-red-700'      : 'bg-gray-50 border-gray-200 text-gray-700'),
+      card('Errors',          totalErrors,   'must fix',            totalErrors   > 0 ? 'bg-rose-50 border-rose-200 text-rose-700'   : 'bg-gray-50 border-gray-200 text-gray-700'),
+      card('Warnings',        totalWarnings, 'should fix',          totalWarnings > 0 ? 'bg-amber-50 border-amber-200 text-amber-700': 'bg-gray-50 border-gray-200 text-gray-700'),
+      card('Auto-fixable',    totalFixable,  'eslint --fix',        totalFixable  > 0 ? 'bg-violet-50 border-violet-200 text-violet-700':'bg-gray-50 border-gray-200 text-gray-700'),
+      card('Files Affected',  filesAffected, 'with lint issues',    filesAffected > 0 ? 'bg-indigo-50 border-indigo-200 text-indigo-700':'bg-gray-50 border-gray-200 text-gray-700'),
+    ].join('');
+  }
+
+  function renderSections(data) {
+    const container = document.getElementById('cqSections');
+    if (!container) return;
+    container.innerHTML = '';
+    if (data.eslint?.available) {
+      container.innerHTML += renderEslintSection(data.eslint);
+    } else if (data.eslint) {
+      container.innerHTML += renderUnavailableSection('ESLint', data.eslint.error, '10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4');
+    }
+    if (data.tsc?.available) {
+      container.innerHTML += renderTscSection(data.tsc);
+    } else if (data.tsc) {
+      container.innerHTML += renderUnavailableSection('TypeScript', data.tsc.error, 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4');
+    }
+    attachToggleListeners();
+  }
+
+  // ── ESLint section ────────────────────────────────────────────────────────
+  function renderEslintSection(eslint) {
+    const hasIssues = (eslint.totalErrors + eslint.totalWarnings) > 0;
+    const body = _currentView === 'rule'
+      ? renderByRule(eslint)
+      : renderByFile(eslint.results || []);
+
+    return `
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <div class="px-5 py-4 border-b border-gray-100 bg-gradient-to-r from-violet-50 to-indigo-50 flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center">
+              <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+              </svg>
+            </div>
+            <div>
+              <h3 class="text-sm font-bold text-gray-800">ESLint</h3>
+              <p class="text-xs text-gray-500">${eslint.totalErrors} errors · ${eslint.totalWarnings} warnings · ${eslint.totalFixable} fixable</p>
+            </div>
+          </div>
+          ${eslint.totalFixable > 0 ? `
+          <div class="flex items-center gap-1.5 text-xs bg-violet-100 text-violet-700 px-2.5 py-1 rounded-full font-medium">
+            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+            ${eslint.totalFixable} auto-fixable — run <code class="font-mono">eslint --fix</code>
+          </div>` : ''}
+        </div>
+        ${hasIssues ? body : '<div class="p-8 text-center text-sm text-green-600 font-medium">✓ No ESLint issues found</div>'}
+      </div>`;
+  }
+
+  function renderByFile(results) {
+    if (!results.length) return '';
+    return `
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 text-xs text-gray-500 uppercase tracking-wider">
+            <tr>
+              <th class="px-4 py-2.5 text-left w-8"></th>
+              <th class="px-4 py-2.5 text-left">File</th>
+              <th class="px-4 py-2.5 text-center w-20">Errors</th>
+              <th class="px-4 py-2.5 text-center w-24">Warnings</th>
+              <th class="px-4 py-2.5 text-center w-20">Fixable</th>
+            </tr>
+          </thead>
+          ${results.map((r, i) => renderFileRow(r, i)).join('')}
+        </table>
+      </div>`;
+  }
+
+  function renderFileRow(r, i) {
+    const rowId = `cq-file-${i}`;
+    const fixable = r.fixableErrorCount + r.fixableWarningCount;
+    return `
+      <tbody>
+        <tr class="cq-file-header border-t border-gray-100" onclick="toggleFile('${rowId}')">
+          <td class="px-4 py-3 text-gray-400">
+            <svg id="chev-${rowId}" class="cq-chevron w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </td>
+          <td class="px-4 py-3">
+            <div class="flex items-center gap-1.5 group/fp">
+              <span class="font-mono text-xs text-gray-700 font-semibold">${escHtml(r.filePath)}</span>
+              <button onclick="event.stopPropagation(); cqCopy('${escHtml(r.filePath)}', this)"
+                class="opacity-0 group-hover/fp:opacity-100 transition-opacity p-0.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-600"
+                title="Copy file path">
+                <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+              </button>
+            </div>
+          </td>
+          <td class="px-4 py-3 text-center">
+            ${r.errorCount > 0 ? `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">${r.errorCount}</span>` : '<span class="text-gray-300 text-xs">—</span>'}
+          </td>
+          <td class="px-4 py-3 text-center">
+            ${r.warningCount > 0 ? `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">${r.warningCount}</span>` : '<span class="text-gray-300 text-xs">—</span>'}
+          </td>
+          <td class="px-4 py-3 text-center">
+            ${fixable > 0 ? `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-violet-100 text-violet-700">⚡ ${fixable}</span>` : '<span class="text-gray-300 text-xs">—</span>'}
+          </td>
+        </tr>
+      </tbody>
+      <tbody id="${rowId}" class="cq-messages">
+        ${r.messages.map(m => renderMessage(m)).join('')}
+        <tr class="border-t border-gray-50"><td colspan="5" class="py-1"></td></tr>
+      </tbody>`;
+  }
+
+  function renderMessage(m) {
+    const sevClass = m.severity === 2 ? 'sev-error' : 'sev-warning';
+    const sevLabel = m.severity === 2 ? 'error' : 'warn';
+    const ruleLink = m.ruleId
+      ? (m.ruleId.includes('/') || m.ruleId.includes('@')
+          ? `https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/${m.ruleId.split('/').pop()}.md`
+          : `https://eslint.org/docs/rules/${m.ruleId}`)
+      : null;
+
+    return `
+      <tr class="bg-gray-50 hover:bg-gray-100 border-t border-gray-100">
+        <td class="pl-8 py-2.5" colspan="2">
+          <div class="flex items-start gap-2">
+            <span class="inline-block text-xs font-bold px-1.5 py-0.5 rounded ${sevClass} shrink-0 mt-0.5">${sevLabel}</span>
+            <div>
+              <span class="text-sm text-gray-700">${escHtml(m.message)}</span>
+              ${m.suggestions?.length ? `<div class="text-xs text-blue-600 mt-0.5">💡 ${escHtml(m.suggestions[0].desc)}</div>` : ''}
+            </div>
+          </div>
+        </td>
+        <td class="px-4 py-2.5 text-center font-mono text-xs text-gray-400 whitespace-nowrap">
+          ${m.line}:${m.column}
+        </td>
+        <td class="px-4 py-2.5 text-center">
+          ${m.fixable ? '<span class="text-xs text-violet-600 font-medium">⚡ fixable</span>' : ''}
+        </td>
+        <td class="px-4 py-2.5">
+          ${m.ruleId ? `<a href="${ruleLink}" target="_blank" class="rule-badge text-xs px-2 py-0.5 rounded bg-indigo-50 text-indigo-600 hover:bg-indigo-100 hover:underline">${escHtml(m.ruleId)}</a>` : ''}
+        </td>
+      </tr>`;
+  }
+
+  function renderByRule(eslint) {
+    const rules = eslint.topRules || [];
+    if (!rules.length) return '';
+    return `
+      <div class="overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 text-xs text-gray-500 uppercase tracking-wider">
+            <tr>
+              <th class="px-4 py-2.5 text-left">Rule</th>
+              <th class="px-4 py-2.5 text-center w-20">Count</th>
+              <th class="px-4 py-2.5 text-center w-24">Severity</th>
+              <th class="px-4 py-2.5 text-left">Files</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100">
+            ${rules.map(r => {
+              const sevClass = r.severity === 2 ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700';
+              const sevLabel = r.severity === 2 ? 'error' : 'warning';
+              const ruleLink = r.ruleId.includes('/') || r.ruleId.includes('@')
+                ? `https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/${r.ruleId.split('/').pop()}.md`
+                : `https://eslint.org/docs/rules/${r.ruleId}`;
+              return `
+                <tr class="hover:bg-gray-50">
+                  <td class="px-4 py-3">
+                    <a href="${ruleLink}" target="_blank"
+                      class="rule-badge text-xs px-2 py-1 rounded bg-indigo-50 text-indigo-700 hover:bg-indigo-100 hover:underline font-semibold">
+                      ${escHtml(r.ruleId)}
+                    </a>
+                  </td>
+                  <td class="px-4 py-3 text-center">
+                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-700 font-bold text-sm">${r.count}</span>
+                  </td>
+                  <td class="px-4 py-3 text-center">
+                    <span class="inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${sevClass}">${sevLabel}</span>
+                  </td>
+                  <td class="px-4 py-3">
+                    <div class="flex flex-wrap gap-1">
+                      ${(r.files || []).slice(0, 4).map(f => `<span class="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded font-mono">${escHtml(f.split('/').pop())}</span>`).join('')}
+                      ${r.files?.length > 4 ? `<span class="text-xs text-gray-400">+${r.files.length - 4} more</span>` : ''}
+                    </div>
+                  </td>
+                </tr>`;
+            }).join('')}
+          </tbody>
+        </table>
+      </div>`;
+  }
+
+  // ── TypeScript section ────────────────────────────────────────────────────
+  function renderTscSection(tsc) {
+    const errors   = (tsc.errors || []).filter(e => e.severity === 'error');
+    const warnings = (tsc.errors || []).filter(e => e.severity === 'warning');
+    const hasIssues = errors.length + warnings.length > 0;
+
+    // Group by file
+    const byFile = {};
+    (tsc.errors || []).forEach(e => {
+      if (!byFile[e.filePath]) byFile[e.filePath] = [];
+      byFile[e.filePath].push(e);
+    });
+
+    return `
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <div class="px-5 py-4 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-cyan-50 flex items-center gap-3">
+          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600 flex items-center justify-center">
+            <svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+          </div>
+          <div>
+            <h3 class="text-sm font-bold text-gray-800">TypeScript</h3>
+            <p class="text-xs text-gray-500">${errors.length} errors · ${warnings.length} warnings</p>
+          </div>
+        </div>
+        ${hasIssues ? `
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-50 text-xs text-gray-500 uppercase tracking-wider">
+              <tr>
+                <th class="px-4 py-2.5 text-left">File</th>
+                <th class="px-4 py-2.5 text-center w-20">Line</th>
+                <th class="px-4 py-2.5 text-center w-24">Severity</th>
+                <th class="px-4 py-2.5 text-center w-24">Code</th>
+                <th class="px-4 py-2.5 text-left">Message</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+              ${(tsc.errors || []).map(e => `
+                <tr class="hover:bg-gray-50">
+                  <td class="px-4 py-2.5 max-w-xs">
+                    <div class="flex items-center gap-1.5 group/fp">
+                      <span class="font-mono text-xs text-gray-600 truncate" title="${escHtml(e.filePath)}">${escHtml(e.filePath)}</span>
+                      <button onclick="cqCopy('${escHtml(e.filePath)}', this)"
+                        class="opacity-0 group-hover/fp:opacity-100 transition-opacity shrink-0 p-0.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-600"
+                        title="Copy file path">
+                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                        </svg>
+                      </button>
+                    </div>
+                  </td>
+                  <td class="px-4 py-2.5 text-center font-mono text-xs text-gray-500">${e.line}:${e.column}</td>
+                  <td class="px-4 py-2.5 text-center">
+                    <span class="inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${e.severity === 'error' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}">
+                      ${e.severity}
+                    </span>
+                  </td>
+                  <td class="px-4 py-2.5 text-center">
+                    <a href="https://typescript.tv/errors/#${e.code.toLowerCase()}" target="_blank"
+                      class="rule-badge text-xs px-2 py-0.5 rounded bg-blue-50 text-blue-600 hover:bg-blue-100 hover:underline font-semibold">
+                      ${escHtml(e.code)}
+                    </a>
+                  </td>
+                  <td class="px-4 py-2.5 text-gray-700 text-sm">${escHtml(e.message)}</td>
+                </tr>`).join('')}
+            </tbody>
+          </table>
+        </div>` : '<div class="p-8 text-center text-sm text-green-600 font-medium">✓ No TypeScript errors found</div>'}
+      </div>`;
+  }
+
+  function renderUnavailableSection(name, error, iconPath) {
+    return `
+      <div class="bg-gray-50 rounded-xl border border-dashed border-gray-300 p-6 flex items-center gap-4">
+        <div class="w-10 h-10 rounded-lg bg-gray-200 flex items-center justify-center shrink-0">
+          <svg class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M${iconPath}"/>
+          </svg>
+        </div>
+        <div>
+          <p class="text-sm font-semibold text-gray-500">${name} not available</p>
+          <p class="text-xs text-gray-400 mt-0.5">${escHtml(error || 'Tool not found or not configured')}</p>
+        </div>
+      </div>`;
+  }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  function toggleFile(id) {
+    const body  = document.getElementById(id);
+    const chevron = document.getElementById('chev-' + id);
+    if (!body) return;
+    const open = body.classList.toggle('open');
+    if (chevron) chevron.classList.toggle('open', open);
+  }
+
+  function attachToggleListeners() { /* handled by onclick in HTML */ }
+
+  function escHtml(s) {
+    if (s == null) return '';
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function cqCopy(text, btn) {
+    navigator.clipboard.writeText(text).then(() => {
+      const orig = btn.innerHTML;
+      btn.innerHTML = `<svg class="w-3.5 h-3.5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+      </svg>`;
+      setTimeout(() => { btn.innerHTML = orig; }, 1500);
+    });
+  }
+
+  // ── Fetch & cache ─────────────────────────────────────────────────────────
+  if (!window.__cqCache) window.__cqCache = null;
+
+  if (window.__cqAbort) { window.__cqAbort.abort(); window.__cqAbort = null; }
+  if (window.__cqProgressTimer) { clearInterval(window.__cqProgressTimer); window.__cqProgressTimer = null; }
+
+  async function runCheck(force = false) {
+    if (!force && window.__cqCache) { showResults(window.__cqCache); return; }
+
+    showLoading();
+    startProgress();
+
+    const ctrl = new AbortController();
+    window.__cqAbort = ctrl;
+
+    try {
+      const url  = force ? '/__profiler/api/code-quality?force=true' : '/__profiler/api/code-quality';
+      const res  = await fetch(url, { signal: ctrl.signal });
+      const data = await res.json();
+      window.__cqCache = data;
+      window.__cqAbort = null;
+      finishProgress(() => showResults(data));
+    } catch(e) {
+      if (e.name === 'AbortError') return;
+      showError(e.message || 'Could not reach /__profiler/api/code-quality');
+    }
+  }
+
+  window.__cqRun = (force = false) => runCheck(force);
+
+  try { runCheck(false); } catch(e) { showError('Failed to start: ' + e.message); }
+</script>

package/views/dashboard.html

@@ -51,6 +51,17 @@
     {{{ emptyState }}}
 
     <script>
+        function filterRows(term) {
+            const body = document.getElementById('tableBody');
+            if (!body) return;
+            const lower = (term || '').toLowerCase();
+            Array.from(body.rows).forEach(row => {
+                const urlCell = row.cells[1];
+                const text = urlCell ? urlCell.textContent.toLowerCase() : '';
+                row.style.display = (!lower || text.includes(lower)) ? '' : 'none';
+            });
+        }
+
         function toggleSort() {
             const table = document.getElementById('tableBody');
             const rows = Array.from(table.rows);
@@ -67,6 +78,19 @@
                 desc.classList.remove('text-indigo-600', 'opacity-100'); desc.classList.add('opacity-50');
             }
         }
+
+        // Wire search input
+        const searchInput = document.getElementById('search');
+        if (searchInput) {
+            searchInput.addEventListener('input', () => filterRows(searchInput.value));
+
+            // Pre-fill from ?search= query param (used by links from summary page)
+            const preSearch = new URLSearchParams(window.location.search).get('search');
+            if (preSearch) {
+                searchInput.value = preSearch;
+                filterRows(preSearch);
+            }
+        }
     </script>
 
 

package/views/detail.html

@@ -57,6 +57,8 @@
         </div>
 
         {{{ cacheSection }}}
+
+        {{{ httpCallsSection }}}
     </div>
 
     <!-- Sidebar: Meta Info -->