version-history-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bimanshu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# version-history-widget
+
+Zero-dependency version history for web projects. Every change gets a titled,
+restorable snapshot, and a floating "Versions" widget on the live site lets
+anyone browse, search, and restore with one click.
+
+Two modes:
+
+- **Project mode** — multi-file sites/apps. Snapshots live in `.versions/`.
+- **Single-file mode** — one HTML file. Snapshots live inside the file itself.
+
+## Install
+
+```bash
+npm install --save-dev version-history-widget
+```
+
+Or use without installing:
+
+```bash
+npx version-history-widget init
+```
+
+## Project mode
+
+```bash
+npx vh init                 # sets up .versions/, injects the widget, saves version 1
+npx vh record "Title" -d "what changed and why"
+npx vh restore 4            # safety-snapshots current state, then restores version 4
+npx vh list [query]         # list versions, optionally filtered
+```
+
+Serve it so the restore button works:
+
+```bash
+node .versions/serve.js       # standalone static server with restore endpoint
+```
+
+Or mount the middleware in your own dev server:
+
+```js
+// Express
+app.use(require('./.versions/middleware.js')());
+
+// Vite
+export default {
+  plugins: [{
+    name: 'version-history',
+    configureServer(server) {
+      server.middlewares.use(require('./.versions/middleware.js')());
+    },
+  }],
+};
+```
+
+## Single-file mode
+
+```bash
+npx vh-singlefile init page.html
+npx vh-singlefile record page.html "Title" -d "details"
+npx vh-singlefile list page.html [query]
+```
+
+Restoring is handled entirely in the browser by the injected widget — no
+server needed.
+
+## How it works
+
+- No runtime dependencies — only Node's built-in `fs`, `path`, `http`, and
+  `child_process`.
+- Every snapshot stores full file contents plus a generated diff, so restores
+  are exact and history is human-readable.
+- The widget (`widget.js`) is vanilla JS + inline CSS, scoped under `vh-`
+  class names so it never collides with your site's styles.
+
+## Customizing the widget UI
+
+All of the widget's markup and styling live in `widget.js` as a single
+template string. Open it directly and edit the `css` variable (colors,
+spacing, fonts) or the HTML-building functions for layout changes — there's
+no build step, so changes take effect on next reload.
+
+## License
+
+MIT

package/middleware.js

@@ -0,0 +1,24 @@
+/* Connect/Express/Vite-compatible middleware: serves /.versions/* and handles POST /__vh/restore/:id
+   Express:  app.use(require('./.versions/middleware.js')())
+   Vite:     plugins:[{ name:'vh', configureServer(s){ s.middlewares.use(require('./.versions/middleware.js')()) } }]
+   Next:     use serve.js alongside, or add a route handler that calls require('./.versions/vh.js').restore(id) */
+const fs = require('fs'), path = require('path');
+module.exports = function (opts = {}) {
+  const root = path.resolve(opts.root || process.env.VH_ROOT || process.cwd()), vdir = path.join(root, '.versions');
+  const types = { '.js': 'text/javascript', '.json': 'application/json', '.diff': 'text/plain' };
+  return function (req, res, next) {
+    const url = (req.url || '').split('?')[0];
+    if (req.method === 'POST' && url.startsWith('/__vh/restore/')) {
+      const id = Number(url.split('/').pop());
+      try { const out = require(path.join(vdir, 'vh.js')).restore(id); res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); return res.end(out); }
+      catch (e) { res.statusCode = 500; return res.end(String(e.stderr || e.message)); }
+    }
+    if (url.startsWith('/.versions/')) {
+      const f = path.join(vdir, url.slice('/.versions/'.length));
+      if (!f.startsWith(vdir) || !fs.existsSync(f) || fs.statSync(f).isDirectory()) { res.statusCode = 404; return res.end(); }
+      res.setHeader('Content-Type', types[path.extname(f)] || 'application/octet-stream'); res.setHeader('Cache-Control', 'no-store');
+      return fs.createReadStream(f).pipe(res);
+    }
+    next && next();
+  };
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "version-history-widget",
+  "version": "0.1.0",
+  "description": "Zero-dependency version history for web projects: snapshots every change and adds a floating widget to browse, search, and restore any version.",
+  "keywords": ["version history", "undo", "snapshot", "restore", "dev-tool", "widget"],
+  "license": "MIT",
+  "author": "bimanshu <bimanshuvatsa@gmail.com>",
+  "engines": { "node": ">=14" },
+  "main": "./middleware.js",
+  "bin": {
+    "vh": "./vh.js",
+    "vh-singlefile": "./singlefile.js"
+  },
+  "files": [
+    "vh.js",
+    "widget.js",
+    "middleware.js",
+    "serve.js",
+    "singlefile.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bimanshu/version-history-widget.git"
+  },
+  "homepage": "https://github.com/bimanshu/version-history-widget#readme",
+  "bugs": {
+    "url": "https://github.com/bimanshu/version-history-widget/issues"
+  }
+}

package/serve.js

@@ -0,0 +1,14 @@
+/* Static-site-agnostic dev server with the restore endpoint. Zero deps.
+   node .versions/serve.js [port] [dir]   — serves the project folder (default: parent of .versions, port 4173) */
+const http = require('http'), fs = require('fs'), path = require('path');
+const port = Number(process.argv[2]) || 4173, root = path.resolve(process.argv[3] || path.join(__dirname, '..'));
+process.env.VH_ROOT = root;
+const vh = require(path.join(__dirname, 'middleware.js'))({ root });
+const types = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml', '.ico': 'image/x-icon' };
+http.createServer((req, res) => vh(req, res, () => {
+  let f = path.join(root, decodeURIComponent(req.url.split('?')[0]));
+  if (fs.existsSync(f) && fs.statSync(f).isDirectory()) f = path.join(f, 'index.html');
+  if (!f.startsWith(root) || !fs.existsSync(f)) { res.statusCode = 404; return res.end('Not found'); }
+  res.setHeader('Content-Type', types[path.extname(f)] || 'application/octet-stream'); res.setHeader('Cache-Control', 'no-store');
+  fs.createReadStream(f).pipe(res);
+})).listen(port, () => console.log('version-history server: http://localhost:' + port + '  (root: ' + root + ')'));

package/singlefile.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+/* Single-file mode: embeds version history inside one HTML file. Zero deps.
+   node singlefile.js init  page.html                          — inject store + widget, save version 1
+   node singlefile.js record page.html "Title" [-d "details" | -f file]
+   node singlefile.js list   page.html [query]                  */
+const fs = require('fs'), path = require('path');
+const STORE = /<script type="application\/json" id="vh-store">([\s\S]*?)<\/script>/;
+const [cmd, file, ...args] = process.argv.slice(2);
+if (!cmd || !file) { console.log(fs.readFileSync(__filename, 'utf8').split('*/')[0].split('\n').slice(1).join('\n')); process.exit(0); }
+let html = fs.readFileSync(file, 'utf8');
+const m = html.match(STORE), versions = m ? JSON.parse(m[1].replace(/<\\\/script/g, '</script')) : [];
+const bare = () => html.replace(/<script type="application\/json" id="vh-store">[\s\S]*?<\/script>\n?/, '').replace(/<script id="vh-widget">[\s\S]*?<\/script>\n?/, '');
+const write = v => {
+  let out = bare();
+  const store = '<script type="application/json" id="vh-store">' + JSON.stringify(v).replace(/<\/script/g, '<\\/script') + '</script>';
+  const widget = '<script id="vh-widget">' + fs.readFileSync(path.join(__dirname, 'widget.js'), 'utf8') + '</script>';
+  out = /<\/body>/i.test(out) ? out.replace(/<\/body>/i, store + '\n' + widget + '\n</body>') : out + store + widget;
+  fs.writeFileSync(file, out);
+};
+if (cmd === 'init') {
+  if (versions.length) { console.log('Already initialised (' + versions.length + ' versions).'); process.exit(0); }
+  versions.push({ id: 1, title: 'Initial version', time: new Date().toISOString(), details: 'State of the file when version history was enabled.', html: bare() });
+  write(versions); console.log('version-history ready in ' + file + '. Saved version 1.');
+} else if (cmd === 'record') {
+  const title = args[0]; if (!title) { console.error('usage: singlefile record page.html "Title" [-d details]'); process.exit(1); }
+  const di = args.indexOf('-d'), fi = args.indexOf('-f'), details = di >= 0 ? args[di + 1] : fi >= 0 ? fs.readFileSync(args[fi + 1], 'utf8') : '';
+  const snap = bare(); if (versions.length && versions[versions.length - 1].html === snap) { console.log('No changes since last version — nothing saved.'); process.exit(0); }
+  const id = versions.length ? versions[versions.length - 1].id + 1 : 1;
+  versions.push({ id, title, time: new Date().toISOString(), details, html: snap }); write(versions);
+  console.log('Saved as version ' + id + ': ' + title);
+} else if (cmd === 'list') {
+  const q = (args[0] || '').toLowerCase();
+  for (const v of versions) if (!q || v.title.toLowerCase().includes(q) || (v.details || '').toLowerCase().includes(q)) console.log(String(v.id).padStart(3) + '  ' + v.time.slice(0, 16).replace('T', ' ') + '  ' + v.title);
+}

package/vh.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+/* version-history CLI (project mode). Zero dependencies.
+   node vh.js init                       — set up .versions/, inject widget, snapshot as version 1
+   node vh.js record "Title" [-d "details" | -f details.txt]   — snapshot changed files as a new version
+   node vh.js restore <id>               — snapshot current state, then restore version <id>
+   node vh.js list [query]               — list versions (optionally filtered by title/details)
+   Env: VH_ROOT (project root, default cwd) */
+const fs = require('fs'), path = require('path');
+const ROOT = path.resolve(process.env.VH_ROOT || process.cwd());
+const VDIR = path.join(ROOT, '.versions'), SNAP = path.join(VDIR, 'snapshots'), MAN = path.join(VDIR, 'manifest.json');
+const IGNORE = new Set(['node_modules', '.git', '.versions', 'dist', 'build', '.next', '.nuxt', 'coverage', '.cache']);
+const MAX = 2 * 1024 * 1024;
+
+const readMan = () => fs.existsSync(MAN) ? JSON.parse(fs.readFileSync(MAN, 'utf8')) : [];
+const writeMan = m => fs.writeFileSync(MAN, JSON.stringify(m, null, 2));
+
+function walk(dir, out = {}) {
+  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+    if (IGNORE.has(e.name) || e.name.startsWith('.env')) continue;
+    const p = path.join(dir, e.name);
+    if (e.isDirectory()) walk(p, out);
+    else if (e.isFile() && fs.statSync(p).size <= MAX) out[path.relative(ROOT, p).split(path.sep).join('/')] = fs.readFileSync(p);
+  }
+  return out;
+}
+
+/* Reconstruct full file state at version id by replaying snapshots. */
+function stateAt(id, man) {
+  const files = {};
+  for (const v of man) {
+    if (v.id > id) break;
+    for (const d of v.deleted || []) delete files[d];
+    for (const f of v.files || []) files[f] = fs.readFileSync(path.join(SNAP, String(v.id), f));
+  }
+  return files;
+}
+
+function lineDiff(a, b) {           // small LCS diff, unified-ish output
+  const A = a.split('\n'), B = b.split('\n');
+  if (A.length * B.length > 4e6) return '(diff too large to display)';
+  const n = A.length, m = B.length, dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) dp[i][j] = A[i] === B[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+  const out = []; let i = 0, j = 0;
+  while (i < n && j < m) { if (A[i] === B[j]) { i++; j++; } else if (dp[i + 1][j] >= dp[i][j + 1]) out.push('- ' + A[i++]); else out.push('+ ' + B[j++]); }
+  while (i < n) out.push('- ' + A[i++]); while (j < m) out.push('+ ' + B[j++]);
+  return out.join('\n');
+}
+
+function snapshot(title, details, prevState) {
+  const man = readMan(), id = man.length ? man[man.length - 1].id + 1 : 1;
+  const cur = walk(ROOT), files = [], deleted = [], diffs = [];
+  for (const f of Object.keys(cur)) {
+    const old = prevState[f];
+    if (!old || !old.equals(cur[f])) {
+      files.push(f);
+      const dest = path.join(SNAP, String(id), f); fs.mkdirSync(path.dirname(dest), { recursive: true }); fs.writeFileSync(dest, cur[f]);
+      const isText = !/\.(png|jpe?g|gif|webp|ico|woff2?|ttf|pdf|zip)$/i.test(f);
+      diffs.push('### ' + f + (old ? '' : ' (new)') + '\n' + (isText ? lineDiff(old ? old.toString('utf8') : '', cur[f].toString('utf8')) : '(binary)'));
+    }
+  }
+  for (const f of Object.keys(prevState)) if (!cur[f]) { deleted.push(f); diffs.push('### ' + f + ' (deleted)'); }
+  fs.mkdirSync(path.join(SNAP, String(id)), { recursive: true });
+  fs.writeFileSync(path.join(SNAP, String(id), 'changes.diff'), diffs.join('\n\n'));
+  const bundle = {}; for (const f of Object.keys(cur)) bundle[f] = cur[f].toString('base64');
+  fs.writeFileSync(path.join(SNAP, String(id), 'files.json'), JSON.stringify({ id, title, files: bundle }));
+  man.push({ id, title, time: new Date().toISOString(), details, files, deleted });
+  writeMan(man);
+  return { id, changed: files.length + deleted.length };
+}
+
+function injectWidget() {
+  const cands = ['index.html', 'public/index.html', 'src/index.html', 'app/layout.tsx', 'app/layout.jsx', 'src/app/layout.tsx', 'pages/_document.tsx', 'pages/_document.jsx']
+    .map(f => path.join(ROOT, f)).filter(fs.existsSync);
+  for (const f of cands) {
+    let s = fs.readFileSync(f, 'utf8'); if (s.includes('.versions/widget.js')) return f;
+    const tag = '<script src="/.versions/widget.js"></script>';
+    if (/<\/body>/i.test(s)) s = s.replace(/<\/body>/i, tag + '\n</body>');
+    else if (/<\/head>/i.test(s)) s = s.replace(/<\/head>/i, tag + '\n</head>');
+    else continue;
+    fs.writeFileSync(f, s); return f;
+  }
+  return null;
+}
+
+const cmd = process.argv[2], args = process.argv.slice(3);
+if (cmd === 'init') {
+  fs.mkdirSync(SNAP, { recursive: true });
+  for (const f of ['widget.js', 'vh.js', 'serve.js', 'middleware.js']) { const src = path.join(__dirname, f); if (fs.existsSync(src) && src !== path.join(VDIR, f)) fs.copyFileSync(src, path.join(VDIR, f)); }
+  if (!fs.existsSync(MAN)) writeMan([]);
+  const gi = path.join(ROOT, '.gitignore'); const line = '.versions/snapshots/';
+  if (!fs.existsSync(gi) || !fs.readFileSync(gi, 'utf8').includes(line)) fs.appendFileSync(gi, '\n' + line + '\n');
+  const where = injectWidget();
+  const r = readMan().length ? null : snapshot('Initial version', 'State of the project when version history was enabled.', {});
+  console.log('version-history ready.' + (where ? ' Widget injected into ' + path.relative(ROOT, where) + '.' : ' Could not find an entry HTML — add <script src="/.versions/widget.js"></script> manually.') + (r ? ' Saved version 1.' : ''));
+  console.log('Serve with restore endpoint: node .versions/serve.js   (or mount .versions/middleware.js in your dev server)');
+} else if (cmd === 'record') {
+  const title = args[0]; if (!title) { console.error('usage: vh record "Title" [-d "details" | -f file]'); process.exit(1); }
+  const di = args.indexOf('-d'), fi = args.indexOf('-f');
+  const details = di >= 0 ? args[di + 1] : fi >= 0 ? fs.readFileSync(args[fi + 1], 'utf8') : '';
+  const man = readMan(), prev = man.length ? stateAt(man[man.length - 1].id, man) : {};
+  const r = snapshot(title, details, prev);
+  console.log(r.changed ? 'Saved as version ' + r.id + ': ' + title : 'No changes since last version — nothing saved.');
+  if (!r.changed) { const m = readMan(); m.pop(); writeMan(m); fs.rmSync(path.join(SNAP, String(r.id)), { recursive: true, force: true }); }
+} else if (cmd === 'restore') {
+  const id = Number(args[0]), man = readMan(), target = man.find(v => v.id === id);
+  if (!target) { console.error('No version ' + args[0]); process.exit(1); }
+  const cur = man[man.length - 1], prev = stateAt(cur.id, man);
+  snapshot('Snapshot before restoring "' + target.title + '"', 'Automatic safety snapshot taken before restore.', prev);
+  const want = stateAt(id, readMan()), have = walk(ROOT);
+  for (const f of Object.keys(have)) if (!want[f]) fs.rmSync(path.join(ROOT, f));
+  for (const f of Object.keys(want)) { const p = path.join(ROOT, f); fs.mkdirSync(path.dirname(p), { recursive: true }); fs.writeFileSync(p, want[f]); }
+  injectWidget();
+  const r = snapshot('Restored "' + target.title + '"', 'Restored the state saved as version ' + id + '.', stateAt(readMan().slice(-1)[0].id, readMan()));
+  console.log('Restored version ' + id + ' (recorded as version ' + r.id + ').');
+} else if (cmd === 'list') {
+  const q = (args[0] || '').toLowerCase();
+  for (const v of readMan()) if (!q || v.title.toLowerCase().includes(q) || (v.details || '').toLowerCase().includes(q)) console.log(String(v.id).padStart(3) + '  ' + v.time.slice(0, 16).replace('T', ' ') + '  ' + v.title);
+} else { console.log(fs.readFileSync(__filename, 'utf8').split('*/')[0].split('\n').slice(1).join('\n')); }
+module.exports = { restore: id => { const { execFileSync } = require('child_process'); return execFileSync(process.execPath, [__filename, 'restore', String(id)], { cwd: ROOT, env: process.env }).toString(); } };

package/widget.js

@@ -0,0 +1,84 @@
+/* version-history widget - vanilla JS, no deps. Reads #vh-store (single-file) or /.versions/manifest.json (project). */
+(function () {
+  if (window.__vhLoaded) return; window.__vhLoaded = true;
+  var Z = 2147483647, MODE = document.getElementById('vh-store') ? 'single' : 'project';
+  var css = '\
+.vh-pill{position:fixed;right:16px;bottom:16px;z-index:' + Z + ';font:13px/1 system-ui,sans-serif;background:#111;color:#fff;border:0;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}\
+.vh-panel{position:fixed;right:16px;bottom:56px;width:440px;max-width:calc(100vw - 32px);max-height:70vh;z-index:' + Z + ';background:#fff;color:#111;border:1px solid #ddd;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);font:13px/1.4 system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}\
+.vh-head{display:flex;gap:8px;padding:10px;border-bottom:1px solid #eee;align-items:center}\
+.vh-search{flex:1;padding:8px 10px;border:1px solid #ccc;border-radius:8px;font:inherit;outline:none}.vh-search:focus{border-color:#111}\
+.vh-clear{border:0;background:#eee;border-radius:6px;padding:6px 8px;cursor:pointer}\
+.vh-list{overflow:auto;padding:6px}\
+.vh-row{border-bottom:1px solid #f0f0f0;padding:8px 6px}\
+.vh-top{display:flex;align-items:center;gap:8px;margin-top:6px}\
+.vh-title{display:block;font-weight:600;line-height:1.35}.vh-title mark{background:#fff3a3;padding:0}\
+.vh-time{flex:1;color:#777;font-size:11px;white-space:nowrap}\
+.vh-btn{border:1px solid #ccc;background:#fafafa;border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;font-size:12px}\
+.vh-btn:disabled{opacity:.4;cursor:default}.vh-btn.vh-restore{background:#111;color:#fff;border-color:#111}\
+.vh-cur{color:#0a7d34;font-size:11px}.vh-tag{color:#777;font-size:11px;font-style:italic}\
+.vh-details{display:none;margin-top:8px;padding:10px;background:#f7f7f7;border-radius:8px;white-space:pre-wrap;color:#333}\
+.vh-details.vh-open{display:block}.vh-empty{padding:20px;text-align:center;color:#777}\
+.vh-note{padding:8px 10px;font-size:12px;background:#fff8e1;border-top:1px solid #eee;display:none}';
+  var st = document.createElement('style'); st.textContent = css; document.head.appendChild(st);
+
+  var versions = [], pill, panel, open = false, openDetails = null, query = '';
+
+  function load(cb) {
+    if (MODE === 'single') { try { versions = JSON.parse(document.getElementById('vh-store').textContent || '[]'); } catch (e) { versions = []; } cb(); }
+    else fetch('/.versions/manifest.json', { cache: 'no-store' }).then(function (r) { return r.json(); }).then(function (m) { versions = m; cb(); }).catch(function () { versions = []; cb(); });
+  }
+  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function hl(text, q) { if (!q) return esc(text); var out = esc(text); q.split(/\s+/).filter(Boolean).forEach(function (w) { out = out.replace(new RegExp('(' + w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi'), '<mark>$1</mark>'); }); return out; }
+  function matches(v, q) { var words = q.toLowerCase().split(/\s+/).filter(Boolean); if (!words.length) return { ok: true }; var t = v.title.toLowerCase(), d = (v.details || '').toLowerCase(); var ok = words.every(function (w) { return t.indexOf(w) >= 0 || d.indexOf(w) >= 0; }); return { ok: ok, inTitleOnly: words.some(function (w) { return t.indexOf(w) >= 0; }) }; }
+  function fmt(t) { var d = new Date(t); return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) + ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }); }
+
+  function render() {
+    var list = panel.querySelector('.vh-list'); list.innerHTML = '';
+    var cur = versions.length ? versions[versions.length - 1].id : null, shown = 0;
+    versions.slice().reverse().forEach(function (v) {
+      var m = matches(v, query); if (!m.ok) return; shown++;
+      var row = document.createElement('div'); row.className = 'vh-row';
+      row.innerHTML = '<span class="vh-title">' + hl(v.title, query) + (query && !m.inTitleOnly ? ' <span class="vh-tag">match in details</span>' : '') + (v.id === cur ? ' <span class="vh-cur">\u25CF current</span>' : '') + '</span><div class="vh-top">' +
+        '<span class="vh-time">' + esc(fmt(v.time)) + '</span>' +
+        '<button class="vh-btn vh-det">Details \u25BE</button>' +
+        '<button class="vh-btn vh-restore"' + (v.id === cur ? ' disabled' : '') + '>Restore</button></div>' +
+        '<div class="vh-details' + (openDetails === v.id ? ' vh-open' : '') + '">' + hl(v.details || '(no details)', query) + '</div>';
+      row.querySelector('.vh-det').onclick = function () { openDetails = openDetails === v.id ? null : v.id; render(); };
+      row.querySelector('.vh-restore').onclick = function () { if (confirm('Restore "' + v.title + '"? Current state will be saved first.')) restore(v); };
+      list.appendChild(row);
+    });
+    if (!shown) list.innerHTML = '<div class="vh-empty">' + (query ? 'No versions match "' + esc(query) + '"' : 'No versions yet') + '</div>';
+    pill.textContent = 'Versions \u00B7 ' + versions.length;
+  }
+
+  function restore(v) {
+    if (MODE === 'single') {
+      var snap = versions[versions.length - 1], now = new Date().toISOString();
+      var html = document.documentElement.outerHTML.replace(/<script type="application\/json" id="vh-store">[\s\S]*?<\/script>/, '');
+      versions.push({ id: versions.length + 1, title: 'Snapshot before restoring "' + v.title + '"', time: now, details: 'Automatic safety snapshot taken before restore.', html: html });
+      versions.push({ id: versions.length + 1, title: 'Restored "' + v.title + '"', time: now, details: 'Restored the state saved as version ' + v.id + '.', html: v.html });
+      var store = '<script type="application/json" id="vh-store">' + JSON.stringify(versions).replace(/<\/script/g, '<\\/script') + '<\/script>';
+      var out = v.html.replace(/<\/body>/i, store + '</body>');
+      document.open(); document.write(out); document.close(); return;
+    }
+    fetch('/__vh/restore/' + v.id, { method: 'POST' }).then(function (r) { if (!r.ok) throw 0; location.reload(); }).catch(function () {
+      fetch('/.versions/snapshots/' + v.id + '/files.json', { cache: 'no-store' }).then(function (r) { return r.blob(); }).then(function (b) {
+        var a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'snapshot-' + v.id + '.json'; a.click();
+      }).catch(function () { });
+      var n = panel.querySelector('.vh-note'); n.style.display = 'block'; n.textContent = 'No live restore endpoint here. Run locally:  node .versions/vh.js restore ' + v.id;
+    });
+  }
+
+  function build() {
+    pill = document.createElement('button'); pill.className = 'vh-pill'; pill.textContent = 'Versions'; pill.onclick = toggle; document.body.appendChild(pill);
+    panel = document.createElement('div'); panel.className = 'vh-panel'; panel.style.display = 'none';
+    panel.innerHTML = '<div class="vh-head"><input class="vh-search" placeholder="Search versions\u2026"><button class="vh-clear" title="Clear">\u00D7</button></div><div class="vh-list"></div><div class="vh-note"></div>';
+    var inp = panel.querySelector('.vh-search'); inp.oninput = function () { query = inp.value; render(); };
+    panel.querySelector('.vh-clear').onclick = function () { inp.value = ''; query = ''; render(); inp.focus(); };
+    document.addEventListener('keydown', function (e) { if (e.key !== 'Escape' || !open) return; if (query) { inp.value = ''; query = ''; render(); } else toggle(); });
+    document.body.appendChild(panel);
+  }
+  function toggle() { open = !open; if (open) load(function () { panel.style.display = 'flex'; render(); panel.querySelector('.vh-search').focus(); }); else panel.style.display = 'none'; }
+  function init() { build(); load(render); }
+  if (document.body) init(); else document.addEventListener('DOMContentLoaded', init);
+})();