distyll 0.1.0

package/site/script.js

@@ -0,0 +1,82 @@
+(function () {
+  'use strict';
+
+  // Terminal animation
+  var terminalLines = [
+    { text: '<span class="prompt">$</span> <span class="cmd">distyll scan src/</span>', delay: 0 },
+    { text: '', delay: 400 },
+    { text: '<span class="dim">Scanning 24 files (JS/TS)...</span>', delay: 600 },
+    { text: '', delay: 800 },
+    { text: '<span class="file">src/api/handler.ts</span>', delay: 1000 },
+    { text: '  <span class="warn">warning</span>  <span class="dim">unnecessary-try-catch</span>  Try-catch wraps synchronous pure function <span class="dim">(line 14)</span>', delay: 1200 },
+    { text: '  <span class="warn">warning</span>  <span class="dim">single-use-wrapper</span>   formatResponse() called once, adds no logic <span class="dim">(line 31)</span>', delay: 1400 },
+    { text: '', delay: 1600 },
+    { text: '<span class="file">src/utils/helpers.ts</span>', delay: 1800 },
+    { text: '  <span class="err">error</span>    <span class="dim">verbose-comments</span>    Comment restates code: "increment counter by one" <span class="dim">(line 8)</span>', delay: 2000 },
+    { text: '  <span class="warn">warning</span>  <span class="dim">redundant-else-return</span> Else block after early return is unnecessary <span class="dim">(line 22)</span>', delay: 2200 },
+    { text: '  <span class="warn">warning</span>  <span class="dim">single-option-object</span> Options param has only 1 property used <span class="dim">(line 45)</span>', delay: 2400 },
+    { text: '', delay: 2600 },
+    { text: '<span class="dim">──────────────────────────────────────</span>', delay: 2800 },
+    { text: '<span class="accent">Slop Score: 34/100</span>  <span class="dim">|</span>  <span class="warn">5 findings</span>  <span class="dim">|</span>  <span class="ok">2 files clean</span>', delay: 3000 },
+    { text: '<span class="dim">Run</span> <span class="cmd">distyll scan --fix</span> <span class="dim">to auto-apply suggested fixes</span>', delay: 3200 },
+  ];
+
+  var terminalBody = document.getElementById('terminal-output');
+
+  function runAnimation() {
+    if (!terminalBody) return;
+    terminalBody.innerHTML = '';
+    terminalLines.forEach(function (item, i) {
+      setTimeout(function () {
+        var div = document.createElement('div');
+        div.className = 'terminal-line';
+        div.innerHTML = item.text || '&nbsp;';
+        div.style.animationDelay = '0s';
+        terminalBody.appendChild(div);
+        terminalBody.scrollTop = terminalBody.scrollHeight;
+      }, item.delay);
+    });
+  }
+
+  // Run animation on load
+  runAnimation();
+
+  // Re-run when terminal scrolls into view
+  var observer = new IntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.isIntersecting) {
+        runAnimation();
+      }
+    });
+  }, { threshold: 0.5 });
+
+  var terminalEl = document.querySelector('.terminal');
+  if (terminalEl) observer.observe(terminalEl);
+
+  // Copy to clipboard
+  document.querySelectorAll('.install-cmd').forEach(function (el) {
+    el.addEventListener('click', function () {
+      var text = el.getAttribute('data-cmd') || 'npm install -g distyll';
+      navigator.clipboard.writeText(text).then(function () {
+        el.classList.add('copied');
+        var icon = el.querySelector('.copy-icon');
+        if (icon) icon.textContent = 'Copied!';
+        setTimeout(function () {
+          el.classList.remove('copied');
+          if (icon) icon.textContent = 'Copy';
+        }, 2000);
+      });
+    });
+  });
+
+  // Smooth scroll for nav links
+  document.querySelectorAll('a[href^="#"]').forEach(function (link) {
+    link.addEventListener('click', function (e) {
+      var target = document.querySelector(link.getAttribute('href'));
+      if (target) {
+        e.preventDefault();
+        target.scrollIntoView({ behavior: 'smooth' });
+      }
+    });
+  });
+})();

package/site/style.css

@@ -0,0 +1,516 @@
+:root {
+  --bg: #0b0f1a;
+  --bg-card: #131927;
+  --bg-terminal: #0d1117;
+  --text: #e2e8f0;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --accent: #6366f1;
+  --accent-light: #818cf8;
+  --accent-glow: rgba(99, 102, 241, 0.15);
+  --green: #22c55e;
+  --yellow: #eab308;
+  --red: #ef4444;
+  --cyan: #22d3ee;
+  --border: #1e293b;
+  --radius: 12px;
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--accent-light); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+/* NAV */
+nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: rgba(11, 15, 26, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+}
+
+nav .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+}
+
+.logo {
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.logo span { color: var(--accent-light); }
+
+nav ul {
+  list-style: none;
+  display: flex;
+  gap: 28px;
+}
+
+nav ul a {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+nav ul a:hover { color: var(--text); text-decoration: none; }
+
+/* HERO */
+.hero {
+  padding: 140px 0 80px;
+  text-align: center;
+}
+
+.hero h1 {
+  font-size: clamp(2rem, 5vw, 3.25rem);
+  font-weight: 800;
+  line-height: 1.15;
+  max-width: 720px;
+  margin: 0 auto 16px;
+  letter-spacing: -0.02em;
+}
+
+.hero h1 .highlight {
+  background: linear-gradient(135deg, var(--accent-light), var(--cyan));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero .subtitle {
+  font-size: 1.2rem;
+  color: var(--text-muted);
+  max-width: 540px;
+  margin: 0 auto 40px;
+}
+
+.cta-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 28px;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.btn:hover { transform: translateY(-1px); text-decoration: none; }
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+  box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.btn-primary:hover { box-shadow: 0 0 32px var(--accent-glow); }
+
+.btn-outline {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+
+.btn-outline:hover { border-color: var(--text-dim); color: var(--text); }
+
+.install-cmd {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 20px;
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-top: 24px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.install-cmd:hover { border-color: var(--accent); }
+
+.install-cmd code { color: var(--green); }
+
+.install-cmd .copy-icon {
+  color: var(--text-dim);
+  transition: color 0.2s;
+}
+
+.install-cmd:hover .copy-icon { color: var(--accent-light); }
+
+.install-cmd.copied .copy-icon { color: var(--green); }
+
+/* TERMINAL */
+.terminal-wrapper {
+  max-width: 700px;
+  margin: 48px auto 0;
+}
+
+.terminal {
+  background: var(--bg-terminal);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  text-align: left;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+
+.terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #161b22;
+  border-bottom: 1px solid var(--border);
+}
+
+.terminal-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.terminal-dot.red { background: #ff5f57; }
+.terminal-dot.yellow { background: #febc2e; }
+.terminal-dot.green { background: #28c840; }
+
+.terminal-title {
+  flex: 1;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.terminal-body {
+  padding: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.82rem;
+  line-height: 1.7;
+  min-height: 260px;
+}
+
+.terminal-body .prompt { color: var(--green); }
+.terminal-body .cmd { color: var(--text); }
+.terminal-body .dim { color: var(--text-dim); }
+.terminal-body .file { color: var(--cyan); }
+.terminal-body .warn { color: var(--yellow); }
+.terminal-body .err { color: var(--red); }
+.terminal-body .accent { color: var(--accent-light); }
+.terminal-body .ok { color: var(--green); }
+
+.terminal-line {
+  opacity: 0;
+  animation: fadeInLine 0.15s forwards;
+  white-space: pre;
+}
+
+@keyframes fadeInLine {
+  to { opacity: 1; }
+}
+
+/* SECTION COMMON */
+section {
+  padding: 80px 0;
+}
+
+section h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 12px;
+}
+
+section .section-sub {
+  text-align: center;
+  color: var(--text-muted);
+  max-width: 560px;
+  margin: 0 auto 48px;
+  font-size: 1.05rem;
+}
+
+/* FEATURES */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+}
+
+.feature-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  transition: border-color 0.2s;
+}
+
+.feature-card:hover { border-color: var(--accent); }
+
+.feature-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--accent-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  margin-bottom: 16px;
+}
+
+.feature-card h3 {
+  font-size: 1.05rem;
+  margin-bottom: 8px;
+}
+
+.feature-card p {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+/* HOW IT WORKS */
+.steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 32px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.step {
+  text-align: center;
+  position: relative;
+}
+
+.step-number {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--accent-glow);
+  border: 2px solid var(--accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--accent-light);
+  margin-bottom: 16px;
+}
+
+.step code {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  color: var(--green);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 14px;
+  margin: 12px auto 0;
+  max-width: 240px;
+}
+
+.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
+.step p { color: var(--text-muted); font-size: 0.9rem; }
+
+/* COMPARISON TABLE */
+.comparison-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.comparison {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+
+.comparison th,
+.comparison td {
+  padding: 14px 18px;
+  text-align: center;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+
+.comparison th {
+  font-weight: 600;
+  color: var(--text);
+  background: var(--bg-card);
+}
+
+.comparison th:first-child,
+.comparison td:first-child {
+  text-align: left;
+  font-weight: 500;
+}
+
+.comparison td { color: var(--text-muted); }
+
+.comparison .check { color: var(--green); font-size: 1.1rem; }
+.comparison .cross { color: var(--text-dim); font-size: 1.1rem; }
+.comparison .partial { color: var(--yellow); font-size: 0.85rem; }
+
+.comparison tr:hover td { background: rgba(99, 102, 241, 0.04); }
+
+.comparison th.highlight-col,
+.comparison td.highlight-col {
+  background: var(--accent-glow);
+}
+
+/* PRICING */
+.pricing-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.price-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 32px 28px;
+  display: flex;
+  flex-direction: column;
+}
+
+.price-card.featured {
+  border-color: var(--accent);
+  box-shadow: 0 0 24px var(--accent-glow);
+  position: relative;
+}
+
+.price-badge {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 14px;
+  border-radius: 20px;
+}
+
+.price-card h3 {
+  font-size: 1.15rem;
+  margin-bottom: 4px;
+}
+
+.price-card .price {
+  font-size: 2.25rem;
+  font-weight: 800;
+  margin: 12px 0 4px;
+}
+
+.price-card .price span {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+
+.price-card .price-desc {
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  margin-bottom: 20px;
+}
+
+.price-card ul {
+  list-style: none;
+  flex: 1;
+  margin-bottom: 24px;
+}
+
+.price-card ul li {
+  padding: 6px 0;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.price-card ul li::before {
+  content: "\2713";
+  color: var(--green);
+  margin-right: 10px;
+  font-weight: 700;
+}
+
+.price-card .btn { width: 100%; justify-content: center; }
+
+/* FOOTER */
+footer {
+  border-top: 1px solid var(--border);
+  padding: 40px 0;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 0.85rem;
+}
+
+footer .footer-links {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+
+footer .footer-links a { color: var(--text-muted); font-size: 0.85rem; }
+
+/* MOBILE */
+@media (max-width: 768px) {
+  nav ul { display: none; }
+
+  .hero { padding: 110px 0 60px; }
+  .hero h1 { font-size: 1.75rem; }
+
+  section { padding: 60px 0; }
+  section h2 { font-size: 1.5rem; }
+
+  .features-grid { grid-template-columns: 1fr; }
+  .steps { grid-template-columns: 1fr; gap: 24px; }
+  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }
+
+  .terminal-body { font-size: 0.72rem; padding: 14px; min-height: 200px; }
+
+  .cta-row { flex-direction: column; }
+}

package/src/cache.ts

@@ -0,0 +1,114 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface CacheEntry {
+  timestamp: string;
+  ref?: string;
+  branch?: string;
+  score: number;
+  totalFindings: number;
+  fileCount: number;
+}
+
+interface CacheData {
+  entries: CacheEntry[];
+}
+
+const CACHE_DIR = '.distyll';
+const CACHE_FILE = 'cache.json';
+const MAX_ENTRIES = 100;
+
+function getCachePath(repoRoot: string): string {
+  return path.join(repoRoot, CACHE_DIR, CACHE_FILE);
+}
+
+function ensureCacheDir(repoRoot: string): void {
+  const dir = path.join(repoRoot, CACHE_DIR);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+}
+
+export function loadCache(repoRoot: string): CacheData {
+  const cachePath = getCachePath(repoRoot);
+  try {
+    const raw = fs.readFileSync(cachePath, 'utf-8');
+    const parsed = JSON.parse(raw);
+    if (parsed && Array.isArray(parsed.entries)) {
+      return parsed;
+    }
+  } catch {
+    // Cache doesn't exist or is corrupt — start fresh
+  }
+  return { entries: [] };
+}
+
+export function saveScore(
+  repoRoot: string,
+  score: number,
+  totalFindings: number,
+  fileCount: number,
+  ref?: string,
+  branch?: string
+): void {
+  ensureCacheDir(repoRoot);
+
+  const cache = loadCache(repoRoot);
+  const entry: CacheEntry = {
+    timestamp: new Date().toISOString(),
+    ref,
+    branch,
+    score,
+    totalFindings,
+    fileCount,
+  };
+
+  cache.entries.push(entry);
+
+  // Keep only the last MAX_ENTRIES
+  if (cache.entries.length > MAX_ENTRIES) {
+    cache.entries = cache.entries.slice(-MAX_ENTRIES);
+  }
+
+  const cachePath = getCachePath(repoRoot);
+  fs.writeFileSync(cachePath, JSON.stringify(cache, null, 2), 'utf-8');
+}
+
+export interface TrendSummary {
+  current: number;
+  previous: number | null;
+  delta: number | null;
+  direction: 'improving' | 'worsening' | 'stable' | 'first-scan';
+  history: { timestamp: string; score: number }[];
+}
+
+export function getTrend(repoRoot: string, currentScore: number): TrendSummary {
+  const cache = loadCache(repoRoot);
+  const history = cache.entries.map((e) => ({ timestamp: e.timestamp, score: e.score }));
+
+  if (cache.entries.length === 0) {
+    return {
+      current: currentScore,
+      previous: null,
+      delta: null,
+      direction: 'first-scan',
+      history,
+    };
+  }
+
+  const lastEntry = cache.entries[cache.entries.length - 1];
+  const delta = currentScore - lastEntry.score;
+
+  let direction: TrendSummary['direction'];
+  if (delta < -2) direction = 'improving';
+  else if (delta > 2) direction = 'worsening';
+  else direction = 'stable';
+
+  return {
+    current: currentScore,
+    previous: lastEntry.score,
+    delta,
+    direction,
+    history,
+  };
+}