@mattli/dotmd 0.1.0

package/dist/dashboard/views.js

@@ -0,0 +1,694 @@
+import os from "os";
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function displayPath(p) {
+    return p.replace(os.homedir(), "~");
+}
+function timeAgo(dateStr) {
+    const now = Date.now();
+    const then = new Date(dateStr + "Z").getTime();
+    const diff = now - then;
+    const minutes = Math.floor(diff / 60000);
+    if (minutes < 1)
+        return "just now";
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}
+function renderDiffHtml(diff, maxLines) {
+    const allLines = diff.split("\n").filter((l) => !l.startsWith("Index:") && !l.startsWith("====") && !l.startsWith("---") && !l.startsWith("+++") && !l.startsWith("@@") && !l.startsWith("\\ No newline"));
+    const lines = maxLines ? allLines.slice(0, maxLines) : allLines;
+    let html = `<pre class="text-xs font-mono overflow-x-auto">`;
+    for (const line of lines) {
+        if (line.startsWith("+")) {
+            html += `<div class="diff-add">${escapeHtml(line)}</div>`;
+        }
+        else if (line.startsWith("-")) {
+            html += `<div class="diff-del">${escapeHtml(line)}</div>`;
+        }
+        else {
+            html += `<div>${escapeHtml(line)}</div>`;
+        }
+    }
+    if (maxLines && allLines.length > maxLines) {
+        html += `<div class="text-gray-400">... truncated</div>`;
+    }
+    html += `</pre>`;
+    return html;
+}
+const fixedCategoryLabels = {
+    global: "Claude Code Global",
+    memory: "Claude Code Memory",
+    custom: "Other",
+};
+function getCategoryLabel(cat) {
+    if (fixedCategoryLabels[cat])
+        return fixedCategoryLabels[cat];
+    if (cat.startsWith("project:"))
+        return cat.slice("project:".length);
+    return cat;
+}
+function getCategorySortKey(cat) {
+    if (cat === "global")
+        return 0;
+    if (cat === "memory")
+        return 1;
+    if (cat.startsWith("project:"))
+        return 2;
+    return 3;
+}
+function buildTree(files) {
+    const root = { name: "~", fullPath: "~", children: new Map() };
+    for (const file of files) {
+        const display = displayPath(file.path);
+        // Split "~/.claude/CLAUDE.md" into ["~", ".claude", "CLAUDE.md"]
+        const parts = display.split("/").filter(Boolean);
+        let current = root;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            const isFile = i === parts.length - 1;
+            const pathSoFar = parts.slice(0, i + 1).join("/");
+            if (!current.children.has(part)) {
+                current.children.set(part, {
+                    name: part,
+                    fullPath: pathSoFar,
+                    children: new Map(),
+                });
+            }
+            const node = current.children.get(part);
+            if (isFile) {
+                node.file = file;
+            }
+            current = node;
+        }
+    }
+    return compressTree(root);
+}
+function compressTree(node) {
+    // Collapse single-child directory chains: a/ -> b/ -> file becomes a/b/ -> file
+    for (const [key, child] of node.children) {
+        const compressed = compressTree(child);
+        node.children.set(key, compressed);
+    }
+    // If this node is a directory (no file) with exactly one child, merge them.
+    // Handles both dir-to-dir chains and dir-with-single-file.
+    // "development" + "dotmd" becomes "development/dotmd"
+    // "briefing" + "CLAUDE.md" becomes "briefing/CLAUDE.md" (displayed as a file link)
+    if (!node.file && node.children.size === 1) {
+        const [, only] = [...node.children.entries()][0];
+        if (only.file && only.children.size === 0) {
+            // Single file child — merge into this node as a file
+            node.name = node.name + "/" + only.name;
+            node.fullPath = only.fullPath;
+            node.file = only.file;
+            node.children = new Map();
+        }
+        else if (!only.file && only.children.size > 0) {
+            // Single directory child — merge names
+            node.name = node.name + "/" + only.name;
+            node.fullPath = only.fullPath;
+            node.children = only.children;
+        }
+    }
+    return node;
+}
+function renderTree(node, lastUpdated, unseenChanges, depth = 0) {
+    let html = "";
+    // Sort: files first, then directories
+    const entries = [...node.children.values()].sort((a, b) => {
+        const aIsDir = a.children.size > 0 && !a.file;
+        const bIsDir = b.children.size > 0 && !b.file;
+        if (aIsDir && !bIsDir)
+            return 1;
+        if (!aIsDir && bIsDir)
+            return -1;
+        return a.name.localeCompare(b.name);
+    });
+    for (const child of entries) {
+        const isDir = child.children.size > 0;
+        const indent = depth * 20;
+        if (child.file) {
+            // File node
+            const updateTime = lastUpdated.get(child.file.id);
+            const isUnseen = unseenChanges.has(child.file.id);
+            const dot = isUnseen
+                ? `<span class="inline-block w-2 h-2 bg-yellow-400 rounded-full"></span>`
+                : "";
+            const timestamp = updateTime
+                ? `<span class="text-xs text-gray-400">${timeAgo(updateTime)}</span>`
+                : "";
+            const rightSide = (timestamp || dot)
+                ? `<div class="flex items-center gap-2">${timestamp}${dot}</div>`
+                : "";
+            html += `
+        <a href="/files/${child.file.id}" class="flex items-center justify-between px-4 py-2 rounded-lg hover:bg-blue-50 transition-colors" style="padding-left: ${indent + 16}px">
+          <span class="font-mono text-sm">${escapeHtml(child.name)}</span>
+          ${rightSide}
+        </a>`;
+        }
+        else if (isDir) {
+            // Directory node
+            const childCount = countFiles(child);
+            html += `
+        <div data-tree-dir data-path="${escapeHtml(child.fullPath)}">
+          <button type="button" data-tree-toggle class="w-full flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors text-left" style="padding-left: ${indent + 16}px">
+            <span data-tree-arrow class="text-gray-400 text-xs transition-transform">&#9660;</span>
+            <span class="font-mono text-sm font-medium text-gray-700">${escapeHtml(child.name)}/</span>
+            <span class="text-xs text-gray-400">${childCount} file${childCount === 1 ? "" : "s"}</span>
+          </button>
+          <div data-tree-children>
+            ${renderTree(child, lastUpdated, unseenChanges, depth + 1)}
+          </div>
+        </div>`;
+        }
+    }
+    return html;
+}
+function countFiles(node) {
+    let count = 0;
+    if (node.file)
+        count++;
+    for (const child of node.children.values()) {
+        count += countFiles(child);
+    }
+    return count;
+}
+function renderCategoryView(files, lastUpdated, unseenChanges) {
+    const groups = {};
+    for (const file of files) {
+        if (!groups[file.category])
+            groups[file.category] = [];
+        groups[file.category].push(file);
+    }
+    const sortedCategories = Object.keys(groups).sort((a, b) => getCategorySortKey(a) - getCategorySortKey(b) || a.localeCompare(b));
+    let html = "";
+    for (const cat of sortedCategories) {
+        const catFiles = groups[cat];
+        if (!catFiles || catFiles.length === 0)
+            continue;
+        html += `<div class="mb-8">`;
+        html += `<h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">${escapeHtml(getCategoryLabel(cat))}</h2>`;
+        html += `<div class="space-y-2">`;
+        for (const file of catFiles) {
+            const updateTime = lastUpdated.get(file.id);
+            const isUnseen = unseenChanges.has(file.id);
+            const dot = isUnseen
+                ? `<span class="inline-block w-2 h-2 bg-yellow-400 rounded-full"></span>`
+                : "";
+            const timestamp = updateTime
+                ? `<span class="text-xs text-gray-400">${timeAgo(updateTime)}</span>`
+                : "";
+            const rightSide = (timestamp || dot)
+                ? `<div class="flex items-center gap-2">${timestamp}${dot}</div>`
+                : "";
+            html += `
+        <a href="/files/${file.id}" class="block bg-white rounded-lg border border-gray-200 px-4 py-3 hover:border-blue-300 transition-colors">
+          <div class="flex items-center justify-between">
+            <span class="font-mono text-sm">${escapeHtml(displayPath(file.path))}</span>
+            ${rightSide}
+          </div>
+        </a>`;
+        }
+        html += `</div></div>`;
+    }
+    return html;
+}
+export function fileListPage(files, lastUpdated, unseenChanges) {
+    if (files.length === 0) {
+        return `
+      <div class="text-center py-16">
+        <h2 class="text-xl font-semibold mb-2">No tracked files</h2>
+        <p class="text-gray-500">Run <code class="bg-gray-100 px-2 py-1 rounded">dotmd init</code> to get started.</p>
+      </div>`;
+    }
+    const tree = buildTree(files);
+    const treeHtml = renderTree(tree, lastUpdated, unseenChanges);
+    const categoryHtml = renderCategoryView(files, lastUpdated, unseenChanges);
+    return `
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">Tracked Files</h1>
+      <div class="flex bg-gray-100 rounded-lg p-0.5">
+        <button id="view-tree" type="button" class="px-3 py-1 rounded-md text-sm font-medium bg-white shadow-sm text-gray-900">Tree</button>
+        <button id="view-category" type="button" class="px-3 py-1 rounded-md text-sm font-medium text-gray-500">Group</button>
+      </div>
+    </div>
+    <div id="tree-view" class="bg-white border border-gray-200 rounded-lg py-2">
+      ${treeHtml}
+    </div>
+    <div id="category-view" class="hidden">
+      ${categoryHtml}
+    </div>
+    <script>
+    (function() {
+      var treeBtn = document.getElementById('view-tree');
+      var catBtn = document.getElementById('view-category');
+      var treeView = document.getElementById('tree-view');
+      var catView = document.getElementById('category-view');
+
+      // --- Collapsed state ---
+      var COLLAPSED_KEY = 'dotmd-collapsed';
+      var VIEW_KEY = 'dotmd-view';
+
+      function getCollapsed() {
+        try { return JSON.parse(localStorage.getItem(COLLAPSED_KEY) || '[]'); }
+        catch(e) { return []; }
+      }
+      function saveCollapsed(arr) {
+        localStorage.setItem(COLLAPSED_KEY, JSON.stringify(arr));
+      }
+
+      function showTree() {
+        treeView.classList.remove('hidden');
+        catView.classList.add('hidden');
+        treeBtn.classList.add('bg-white', 'shadow-sm', 'text-gray-900');
+        treeBtn.classList.remove('text-gray-500');
+        catBtn.classList.remove('bg-white', 'shadow-sm', 'text-gray-900');
+        catBtn.classList.add('text-gray-500');
+        localStorage.setItem(VIEW_KEY, 'tree');
+      }
+      function showCategory() {
+        catView.classList.remove('hidden');
+        treeView.classList.add('hidden');
+        catBtn.classList.add('bg-white', 'shadow-sm', 'text-gray-900');
+        catBtn.classList.remove('text-gray-500');
+        treeBtn.classList.remove('bg-white', 'shadow-sm', 'text-gray-900');
+        treeBtn.classList.add('text-gray-500');
+        localStorage.setItem(VIEW_KEY, 'category');
+      }
+
+      treeBtn.addEventListener('click', showTree);
+      catBtn.addEventListener('click', showCategory);
+
+      // Restore view preference
+      if (localStorage.getItem(VIEW_KEY) === 'category') {
+        showCategory();
+      }
+
+      // Collapsible tree directories
+      var collapsed = getCollapsed();
+
+      document.querySelectorAll('[data-tree-toggle]').forEach(function(btn) {
+        var dir = btn.closest('[data-tree-dir]');
+        var dirPath = dir.getAttribute('data-path');
+        var children = dir.querySelector('[data-tree-children]');
+        var arrow = btn.querySelector('[data-tree-arrow]');
+
+        // Restore collapsed state
+        if (collapsed.indexOf(dirPath) !== -1) {
+          children.classList.add('hidden');
+          arrow.style.transform = 'rotate(-90deg)';
+        }
+
+        btn.addEventListener('click', function() {
+          var isHidden = children.classList.contains('hidden');
+          var current = getCollapsed();
+          if (isHidden) {
+            children.classList.remove('hidden');
+            arrow.style.transform = '';
+            current = current.filter(function(p) { return p !== dirPath; });
+          } else {
+            children.classList.add('hidden');
+            arrow.style.transform = 'rotate(-90deg)';
+            current.push(dirPath);
+          }
+          saveCollapsed(current);
+        });
+      });
+    })();
+    </script>`;
+}
+export function fileDetailPage(file, snapshots, hasMore = false) {
+    const latest = snapshots[0];
+    let html = `
+    <div class="mb-6">
+      <a href="javascript:history.back()" class="text-blue-600 hover:underline text-sm">&larr; Back</a>
+    </div>
+    <h1 class="text-xl font-bold mb-1 font-mono">${escapeHtml(displayPath(file.path))}</h1>
+    <p class="text-sm text-gray-500 mb-6">${file.category} &middot; tracked since ${file.first_seen_at}</p>`;
+    // Current content
+    if (latest) {
+        html += `
+      <div class="mb-8">
+        <div class="flex items-center justify-between mb-3">
+          <h2 class="text-lg font-semibold">Current Content</h2>
+          <button
+            onclick="fetch('/api/open/${file.id}', { method: 'POST' }).then(r => r.json()).then(d => { if (d.error) alert(d.error); })"
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+            Open in Editor
+          </button>
+        </div>
+        <div class="bg-white border border-gray-200 rounded-lg p-4 overflow-x-auto">
+          <pre class="text-sm font-mono whitespace-pre-wrap">${escapeHtml(latest.content)}</pre>
+        </div>
+      </div>`;
+    }
+    // Change history
+    if (snapshots.length > 0) {
+        html += `<h2 class="text-lg font-semibold mb-3">Change History</h2>`;
+        html += `<div class="space-y-4">`;
+        for (const snap of snapshots) {
+            if (snap.diff) {
+                const lines = snap.diff.split("\n");
+                const added = lines.filter((l) => l.startsWith("+") && !l.startsWith("+++")).length;
+                const removed = lines.filter((l) => l.startsWith("-") && !l.startsWith("---")).length;
+                const stats = [];
+                if (added)
+                    stats.push(`<span class="text-green-600">+${added}</span>`);
+                if (removed)
+                    stats.push(`<span class="text-red-500">-${removed}</span>`);
+                html += `
+        <div data-diff-card class="bg-white border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <span class="text-sm">${stats.join(" / ")}</span>
+              <span data-diff-toggle class="text-xs text-gray-400">Show diff</span>
+            </div>
+            <span class="text-sm text-gray-500">${timeAgo(snap.created_at)}</span>
+          </div>
+          <div data-diff-content class="hidden mt-3">
+            ${renderDiffHtml(snap.diff)}
+          </div>
+        </div>`;
+            }
+            else {
+                html += `
+        <div class="bg-white border border-gray-200 rounded-lg p-4">
+          <div class="flex items-center justify-between">
+            <span class="text-sm text-gray-400 italic">Initial snapshot</span>
+            <span class="text-sm text-gray-500">${timeAgo(snap.created_at)}</span>
+          </div>
+        </div>`;
+            }
+        }
+        html += `</div>`;
+        if (hasMore) {
+            html += `
+      <div id="load-more-wrap" class="text-center mt-6">
+        <button id="load-more" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">Load More</button>
+      </div>`;
+        }
+        html += `<script>
+    function initDiffCards(root) {
+      root.querySelectorAll('[data-diff-card]').forEach(function(card) {
+        if (card._diffInit) return;
+        card._diffInit = true;
+        card.addEventListener('click', function(e) {
+          if (e.target.closest('a')) return;
+          var content = card.querySelector('[data-diff-content]');
+          var label = card.querySelector('[data-diff-toggle]');
+          var isHidden = content.classList.contains('hidden');
+          content.classList.toggle('hidden');
+          label.textContent = isHidden ? 'Hide diff' : 'Show diff';
+        });
+      });
+    }
+    initDiffCards(document);
+
+    (function() {
+      var PAGE_SIZE = 50;
+      var FILE_ID = ${file.id};
+      var offset = PAGE_SIZE;
+      var btn = document.getElementById('load-more');
+      var wrap = document.getElementById('load-more-wrap');
+      var container = document.querySelector('.space-y-4');
+      if (!btn) return;
+
+      btn.addEventListener('click', function() {
+        btn.textContent = 'Loading...';
+        btn.disabled = true;
+        fetch('/api/files/' + FILE_ID + '?limit=' + (PAGE_SIZE + 1) + '&offset=' + offset)
+          .then(function(r) { return r.json(); })
+          .then(function(data) {
+            var snapshots = data.snapshots;
+            var hasMore = snapshots.length > PAGE_SIZE;
+            if (hasMore) snapshots.pop();
+
+            snapshots.forEach(function(snap) {
+              var div = document.createElement('div');
+              if (snap.diff) {
+                var lines = snap.diff.split('\\n');
+                var added = lines.filter(function(l) { return l.charAt(0) === '+' && !l.startsWith('+++'); }).length;
+                var removed = lines.filter(function(l) { return l.charAt(0) === '-' && !l.startsWith('---'); }).length;
+                var stats = [];
+                if (added) stats.push('<span class="text-green-600">+' + added + '</span>');
+                if (removed) stats.push('<span class="text-red-500">-' + removed + '</span>');
+
+                div.setAttribute('data-diff-card', '');
+                div.className = 'bg-white border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors';
+                div.innerHTML = '<div class="flex items-center justify-between">' +
+                  '<div class="flex items-center gap-3">' +
+                  '<span class="text-sm">' + stats.join(' / ') + '</span>' +
+                  '<span data-diff-toggle class="text-xs text-gray-400">Show diff</span>' +
+                  '</div>' +
+                  '<span class="text-xs text-gray-400">' + timeAgo(snap.created_at) + '</span>' +
+                  '</div>' +
+                  '<div data-diff-content class="hidden mt-3"><pre class="text-xs font-mono overflow-x-auto">' + renderDiff(snap.diff) + '</pre></div>';
+              } else {
+                div.className = 'bg-white border border-gray-200 rounded-lg p-4';
+                div.innerHTML = '<div class="flex items-center justify-between">' +
+                  '<span class="text-sm text-gray-400 italic">Initial snapshot</span>' +
+                  '<span class="text-xs text-gray-400">' + timeAgo(snap.created_at) + '</span>' +
+                  '</div>';
+              }
+              container.appendChild(div);
+            });
+
+            initDiffCards(container);
+            offset += PAGE_SIZE;
+
+            if (hasMore) {
+              btn.textContent = 'Load More';
+              btn.disabled = false;
+            } else {
+              wrap.remove();
+            }
+          });
+      });
+
+      function escapeHtml(s) {
+        var d = document.createElement('div');
+        d.textContent = s;
+        return d.innerHTML;
+      }
+
+      function timeAgo(dateStr) {
+        var now = Date.now();
+        var then = new Date(dateStr + 'Z').getTime();
+        var diff = now - then;
+        var minutes = Math.floor(diff / 60000);
+        if (minutes < 1) return 'just now';
+        if (minutes < 60) return minutes + 'm ago';
+        var hours = Math.floor(minutes / 60);
+        if (hours < 24) return hours + 'h ago';
+        var days = Math.floor(hours / 24);
+        return days + 'd ago';
+      }
+
+      function renderDiff(diff) {
+        return diff.split('\\n')
+          .filter(function(l) { return l.indexOf('Index:') !== 0 && l.indexOf('====') !== 0 && l.indexOf('---') !== 0 && l.indexOf('+++') !== 0 && l.indexOf('@@') !== 0 && l.indexOf('\\ No newline') !== 0; })
+          .map(function(l) {
+            var escaped = escapeHtml(l);
+            if (l.charAt(0) === '+') return '<div class="diff-add">' + escaped + '</div>';
+            if (l.charAt(0) === '-') return '<div class="diff-del">' + escaped + '</div>';
+            return '<div>' + escaped + '</div>';
+          }).join('');
+      }
+    })();
+    </script>`;
+    }
+    return html;
+}
+export function timelinePage(changes, unseenChanges = new Set(), hasMore = false) {
+    if (changes.length === 0) {
+        return `
+      <div class="text-center py-16">
+        <h2 class="text-xl font-semibold mb-2">No changes recorded</h2>
+        <p class="text-gray-500">Changes will appear here after your next <code class="bg-gray-100 px-2 py-1 rounded">dotmd scan</code>.</p>
+      </div>`;
+    }
+    let html = `<h1 class="text-2xl font-bold mb-6">Timeline</h1>`;
+    html += `<div class="space-y-4">`;
+    for (const change of changes) {
+        if (change.diff) {
+            const lines = change.diff.split("\n");
+            const added = lines.filter((l) => l.startsWith("+") && !l.startsWith("+++")).length;
+            const removed = lines.filter((l) => l.startsWith("-") && !l.startsWith("---")).length;
+            const stats = [];
+            if (added)
+                stats.push(`<span class="text-green-600">+${added}</span>`);
+            if (removed)
+                stats.push(`<span class="text-red-500">-${removed}</span>`);
+            html += `
+      <div data-diff-card class="bg-white border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3 flex-wrap">
+            <a href="/files/${change.file_id}" class="font-mono text-sm text-blue-600 hover:underline">${escapeHtml(displayPath(change.path))}</a>
+            <span class="text-sm">${stats.join(" / ")}</span>
+            <span data-diff-toggle class="text-xs text-gray-400">Show diff</span>
+          </div>
+          <div class="flex items-center gap-2 flex-shrink-0">
+            <span class="text-xs text-gray-400">${timeAgo(change.created_at)}</span>
+            ${unseenChanges.has(change.id) ? `<span class="inline-block w-2 h-2 bg-yellow-400 rounded-full"></span>` : ""}
+          </div>
+        </div>
+        <div data-diff-content class="hidden mt-3">
+          ${renderDiffHtml(change.diff)}
+        </div>
+      </div>`;
+        }
+        else {
+            html += `
+      <div class="bg-white border border-gray-200 rounded-lg p-4">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3 flex-wrap">
+            <a href="/files/${change.file_id}" class="font-mono text-sm text-blue-600 hover:underline">${escapeHtml(displayPath(change.path))}</a>
+            <span class="text-sm text-gray-400 italic">Initial snapshot</span>
+          </div>
+          <div class="flex items-center gap-2 flex-shrink-0">
+            <span class="text-xs text-gray-400">${timeAgo(change.created_at)}</span>
+            ${unseenChanges.has(change.id) ? `<span class="inline-block w-2 h-2 bg-yellow-400 rounded-full"></span>` : ""}
+          </div>
+        </div>
+      </div>`;
+        }
+    }
+    html += `</div>`;
+    if (hasMore) {
+        html += `
+    <div id="load-more-wrap" class="text-center mt-6">
+      <button id="load-more" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">Load More</button>
+    </div>`;
+    }
+    html += `<script>
+  function initDiffCards(root) {
+    root.querySelectorAll('[data-diff-card]').forEach(function(card) {
+      if (card._diffInit) return;
+      card._diffInit = true;
+      card.addEventListener('click', function(e) {
+        if (e.target.closest('a')) return;
+        var content = card.querySelector('[data-diff-content]');
+        var label = card.querySelector('[data-diff-toggle]');
+        var isHidden = content.classList.contains('hidden');
+        content.classList.toggle('hidden');
+        label.textContent = isHidden ? 'Hide diff' : 'Show diff';
+      });
+    });
+  }
+  initDiffCards(document);
+
+  (function() {
+    var PAGE_SIZE = 50;
+    var offset = PAGE_SIZE;
+    var btn = document.getElementById('load-more');
+    var wrap = document.getElementById('load-more-wrap');
+    var container = document.querySelector('.space-y-4');
+    if (!btn) return;
+
+    btn.addEventListener('click', function() {
+      btn.textContent = 'Loading...';
+      btn.disabled = true;
+      fetch('/api/timeline?limit=' + (PAGE_SIZE + 1) + '&offset=' + offset)
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+          var changes = data.changes;
+          var unseenIds = new Set(data.unseenIds || []);
+          var hasMore = changes.length > PAGE_SIZE;
+          if (hasMore) changes.pop();
+
+          changes.forEach(function(change) {
+            var div = document.createElement('div');
+            var dot = unseenIds.has(change.id) ? '<span class="inline-block w-2 h-2 bg-yellow-400 rounded-full"></span>' : '';
+            if (change.diff) {
+              var lines = change.diff.split('\\n');
+              var added = lines.filter(function(l) { return l.charAt(0) === '+' && !l.startsWith('+++'); }).length;
+              var removed = lines.filter(function(l) { return l.charAt(0) === '-' && !l.startsWith('---'); }).length;
+              var stats = [];
+              if (added) stats.push('<span class="text-green-600">+' + added + '</span>');
+              if (removed) stats.push('<span class="text-red-500">-' + removed + '</span>');
+
+              div.setAttribute('data-diff-card', '');
+              div.className = 'bg-white border border-gray-200 rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors';
+              div.innerHTML = '<div class="flex items-center justify-between">' +
+                '<div class="flex items-center gap-3 flex-wrap">' +
+                '<a href="/files/' + change.file_id + '" class="font-mono text-sm text-blue-600 hover:underline">' + escapeHtml(change.path) + '</a>' +
+                '<span class="text-sm">' + stats.join(' / ') + '</span>' +
+                '<span data-diff-toggle class="text-xs text-gray-400">Show diff</span>' +
+                '</div>' +
+                '<div class="flex items-center gap-2 flex-shrink-0">' +
+                '<span class="text-xs text-gray-400">' + timeAgo(change.created_at) + '</span>' +
+                dot +
+                '</div></div>' +
+                '<div data-diff-content class="hidden mt-3"><pre class="text-xs font-mono overflow-x-auto">' + renderDiff(change.diff) + '</pre></div>';
+            } else {
+              div.className = 'bg-white border border-gray-200 rounded-lg p-4';
+              div.innerHTML = '<div class="flex items-center justify-between">' +
+                '<div class="flex items-center gap-3 flex-wrap">' +
+                '<a href="/files/' + change.file_id + '" class="font-mono text-sm text-blue-600 hover:underline">' + escapeHtml(change.path) + '</a>' +
+                '<span class="text-sm text-gray-400 italic">Initial snapshot</span>' +
+                '</div>' +
+                '<div class="flex items-center gap-2 flex-shrink-0">' +
+                '<span class="text-xs text-gray-400">' + timeAgo(change.created_at) + '</span>' +
+                dot +
+                '</div></div>';
+            }
+            container.appendChild(div);
+          });
+
+          initDiffCards(container);
+          offset += PAGE_SIZE;
+
+          if (hasMore) {
+            btn.textContent = 'Load More';
+            btn.disabled = false;
+          } else {
+            wrap.remove();
+          }
+        });
+    });
+
+    function escapeHtml(s) {
+      var d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    function timeAgo(dateStr) {
+      var now = Date.now();
+      var then = new Date(dateStr + 'Z').getTime();
+      var diff = now - then;
+      var minutes = Math.floor(diff / 60000);
+      if (minutes < 1) return 'just now';
+      if (minutes < 60) return minutes + 'm ago';
+      var hours = Math.floor(minutes / 60);
+      if (hours < 24) return hours + 'h ago';
+      var days = Math.floor(hours / 24);
+      return days + 'd ago';
+    }
+
+    function renderDiff(diff) {
+      return diff.split('\\n')
+        .filter(function(l) { return l.indexOf('Index:') !== 0 && l.indexOf('====') !== 0 && l.indexOf('---') !== 0 && l.indexOf('+++') !== 0 && l.indexOf('@@') !== 0 && l.indexOf('\\ No newline') !== 0; })
+        .map(function(l) {
+          var escaped = escapeHtml(l);
+          if (l.charAt(0) === '+') return '<div class="diff-add">' + escaped + '</div>';
+          if (l.charAt(0) === '-') return '<div class="diff-del">' + escaped + '</div>';
+          return '<div>' + escaped + '</div>';
+        }).join('');
+    }
+  })();
+  </script>`;
+    return html;
+}
+//# sourceMappingURL=views.js.map