projview 1.0.0 → 1.2.0

package/README.md

@@ -1,9 +1,9 @@
 # projview
 
 a fast, zero-config local viewer for **markdown** + **mermaid** files. run it in
-any directory, get a soft-dark cartoonish localhost view of every `.md` / `.mmd`
-under it - rendered diagrams, search, live reload - close it and nothing's left
-behind.
+any directory, get a quiet localhost view - light or dark, following your OS - of
+every `.md` / `.mmd` (plus `.json` / `.yaml`) under it: rendered diagrams, search,
+live reload. close it and nothing's left behind.
 
 that's the product. point it at a docs folder, read comfortably, ctrl-c, gone.
 
@@ -33,10 +33,13 @@ projview /path/to/notes --no-open
 
 | | |
 | --- | --- |
-| tree nav | every `.md` / `.mmd` under the root (skips `node_modules`, `dist`, dot-dirs) |
+| tree nav | every `.md` / `.mmd` / `.json` / `.yml` / `.yaml` under the root (skips `node_modules`, `dist`, dot-dirs, lockfiles) |
 | rendering | markdown + syntax-highlighted code + **mermaid diagrams** (with pan/zoom) |
+| data files | JSON pretty-printed (literals kept exact), YAML shown as written - both with line numbers + indent guides |
 | search | `⌘K` palette - fuzzy filenames + full-text content with line snippets |
 | live reload | edit a file, the browser updates |
+| source editor | `edit` (or press `e`) opens the raw text beside a live preview; `⌘S` saves to disk. local runs only - read-only when exposed on a network |
+| history | the last 5 earlier versions of each file - from any change, not just projview's editor - to view and restore. kept until projview stops, or across runs with `--persist` |
 | ephemeral | in-memory by default; nothing written to disk, nothing left behind |
 
 see [samples/architecture.md](samples/architecture.md) for a mermaid demo.

package/docs/README.md

@@ -16,6 +16,9 @@ faults. use this tree while iterating on the tool.
 | diagrams | [architecture](diagrams/architecture.mmd) | standalone valid flowchart |
 | diagrams | [sequence](diagrams/sequence.mmd) | standalone valid sequence |
 | diagrams | [broken diagram](diagrams/broken-diagram.mmd) | **invalid mermaid** - error card test |
+| data | [minified json](data/minified.json) | one-line JSON -> pretty-printed, big int kept exact |
+| data | [not-strict json](data/not-strict.jsonc.json) | JSONC with comments - shown as-is with a notice |
+| data | [values.yaml](data/values.yaml) | helm-style YAML - indent guides, block scalar, multi-doc |
 | reference | [api](reference/api.md) | long doc - TOC + scroll-spy |
 | reference | [glossary](reference/glossary.md) | cross-links + external links |
 | edge | [syntax stress](edge-cases/syntax-stress.md) | gnarly markdown + inline broken fence |

package/docs/data/minified.json

@@ -0,0 +1 @@
+{"name":"lgtm","version":"2.4.1","replicas":3,"bigId":12345678901234567890,"enabled":true,"labels":{"app.kubernetes.io/name":"lgtm","tier":"observability"},"ports":[{"name":"http","port":3000},{"name":"grpc","port":9095}],"empty":{},"tags":[],"note":"commas, colons: and {braces} inside strings stay put"}

package/docs/data/not-strict.jsonc.json

@@ -0,0 +1,4 @@
+{
+  // comments make this JSONC, not JSON - shown as-is with a note
+  "compilerOptions": { "strict": true },
+}

package/docs/data/values.yaml

@@ -0,0 +1,36 @@
+# a helm-style values file - indentation is meaning, so it's shown as written
+replicaCount: 2
+
+image:
+  repository: ghcr.io/example/alloy
+  tag: "v1.4.2"
+  pullPolicy: IfNotPresent
+
+resources:
+  limits:
+    cpu: 500m
+    memory: 512Mi
+  requests:
+    cpu: 100m
+    memory: 128Mi
+
+config: |
+  logging {
+    level = "info"
+  }
+
+  discovery.kubernetes "pods" {
+    role = "pod"
+  }
+
+tolerations:
+  - key: dedicated
+    operator: Equal
+    value: observability
+    effect: NoSchedule
+---
+# second document in the same file
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ .Release.Name }}-extra

package/docs/reference/api.md

@@ -5,7 +5,8 @@ and scroll-spy (the active section should track as you scroll).
 
 ## overview
 
-projview exposes a tiny HTTP surface. It never writes your files - the only
+projview exposes a tiny HTTP surface. The only file it writes is one you save
+from the source editor (`PUT /api/source`, loopback only); otherwise the only
 state it records is its own usage events (views / searches) into the store.
 
 ## endpoints
@@ -20,6 +21,36 @@ flag (false when projview is exposed on a non-loopback host).
 Renders a single file to HTML on demand. Query param `p` is the relative path.
 Records a `view` usage event.
 
+### GET /api/source · PUT /api/source
+
+`GET ?p=<path>` returns `{ path, content, mtime }` - the raw text the editor
+opens. `PUT` saves `{ path, content, mtime, force? }`:
+
+| response | when |
+| --- | --- |
+| `200 { path, mtime }` | saved |
+| `400` | not a previewable file, outside the root, or under a hidden dir |
+| `403` | bound to a non-loopback host, or the `Host` header isn't a local name |
+| `409 { mtime }` | the file changed on disk since `mtime` - resend with `force: true` to overwrite |
+
+### POST /api/preview
+
+Renders `{ path, content }` - unsaved editor text - exactly as `/api/file` would
+render that file, and returns `{ html }`. Never writes; `400` for a path that
+isn't a previewable type.
+
+### GET /api/versions · GET /api/versions/:id
+
+`GET ?p=<path>` lists a file's earlier versions, newest first:
+`{ path, limit, versions: [{ id, file, mtime, replacedAt, size }] }`.
+`GET /api/versions/:id` returns one with its `content`.
+
+A version is the text a file had just before it changed - whether the change
+came from projview's editor or anywhere else (an IDE, `git pull`, an agent). The
+newest 5 are kept per file, in the same store as comments: gone when projview
+stops by default, kept across runs with `--persist` or a `--store-url`. Files over
+5 MB aren't versioned. Restoring is an ordinary `PUT /api/source` of the old text.
+
 ### GET /api/events
 
 Server-sent events stream: `change` / `tree` for live reload, `comments` when a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "projview",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Ephemeral local previewer for markdown + mermaid files in any directory",
   "type": "module",
   "bin": {

package/public/comments.js

@@ -54,7 +54,7 @@ drawer.innerHTML =
    <div class="cmt-composer-slot"></div>
    <div class="cmt-list"></div>`;
 
-const chip = cre('button', 'cmt-selchip', '💬 comment');
+const chip = cre('button', 'cmt-selchip', 'comment');
 chip.hidden = true;
 
 document.body.append(fab, drawer, chip);
@@ -203,7 +203,7 @@ contentEl.addEventListener('click', (e) => {
   }
 });
 
-// A hover "💬" at the end of every heading -> comment on that section.
+// A hover "+ comment" at the end of every heading -> comment on that section.
 function addHeadingAffordances() {
   if (!state.writable) return;
   for (const h of contentEl.querySelectorAll('h1, h2, h3')) {
@@ -301,7 +301,7 @@ function renderComposer() {
 function renderList() {
   listEl.replaceChildren();
   if (!current.length) {
-    listEl.append(cre('div', 'cmt-empty', '💭<br>no comments yet' + (state.writable ? '<br><small>select text, hover a heading, or “+ note”</small>' : '')));
+    listEl.append(cre('div', 'cmt-empty', 'no comments yet' + (state.writable ? '<br><small>select text, hover a heading, or “+ note”</small>' : '')));
     return;
   }
   for (const c of current) {
@@ -377,7 +377,7 @@ function updateBadge() {
 
 function anchorLabel(a, quoteOverride) {
   if (!a) return 'file';
-  if (a.type === 'file') return '📄 whole file';
+  if (a.type === 'file') return 'whole file';
   if (a.type === 'heading') {
     const el = document.getElementById(a.id);
     return '§ ' + (quoteOverride || (el ? el.textContent : a.id));

package/public/editor.js

@@ -0,0 +1,306 @@
+/* source editor: swap the rendered page for its raw text, save back to disk.
+ * Loopback-only like comments (state.writable). Saves carry the mtime the file
+ * had when it was opened, so a change made elsewhere is never silently clobbered. */
+
+import { $, esc } from './dom.js';
+import { state } from './store.js';
+import { openFile } from './viewer.js';
+import { toast } from './toast.js';
+import { runMermaid } from './mermaid.js';
+import { fileKind } from './icons.js';
+import { showHistory } from './history.js';
+
+const contentEl = $('content');
+const breadcrumbEl = $('breadcrumb');
+
+let session = null;   // { path, mtime, original, crlf, textarea, noticeEl } while editing
+
+export const isEditing = (p) => !!session && (p === undefined || session.path === p);
+const isDirty = () => !!session && session.textarea.value !== session.original;
+
+// Called by the viewer before it navigates away: false keeps the editor open.
+export function confirmLeave() {
+  if (!isDirty()) { session = null; document.body.classList.remove('editing'); return true; }
+  if (!confirm('discard unsaved changes?')) return false;
+  session = null;
+  document.body.classList.remove('editing');
+  return true;
+}
+
+// md / mmd render to something other than their source, so they get a raw view too.
+export const hasRawView = (p) => ['md', 'mmd'].includes(fileKind(p));
+
+// Called after every render: the view switcher in the breadcrumb bar.
+// md / mmd: rendered | raw | edit | history. json / yaml (already shown as
+// source): edit | history. "edit" only where this client may write.
+export function onFileShown(p) {
+  if (!p) return;
+  const views = [...(hasRawView(p) ? ['rendered', 'raw'] : []), ...(state.writable ? ['edit'] : []), 'history'];
+  const wrap = document.createElement('div');
+  wrap.className = 'view-switch';
+  for (const v of views) {
+    const btn = document.createElement('button');
+    btn.dataset.view = v;
+    btn.textContent = v;
+    if (v === 'edit') btn.title = 'edit source (e)';
+    btn.addEventListener('click', () => switchView(p, v));
+    wrap.appendChild(btn);
+  }
+  breadcrumbEl.appendChild(wrap);
+  markView(hasRawView(p) ? state.view : null);
+}
+
+function markView(v) {
+  for (const b of breadcrumbEl.querySelectorAll('.view-switch button')) b.classList.toggle('on', b.dataset.view === v);
+}
+
+function switchView(p, v) {
+  if (v === 'edit') { if (!session) startEditing(p); return; }
+  if (session && !confirmLeave()) return;
+  if (v === 'history') { markView('history'); showHistory(p); return; }   // never sticky
+  state.view = v;
+  openFile(p);
+}
+
+// Live reload saw this file change while it was open in the editor.
+export function onDiskChange() {
+  if (!session || session.saving) return;   // our own save's change event - not a conflict
+  showNotice('this file changed on disk since you opened it', [
+    ['reload', () => { session.original = session.textarea.value; startEditing(session.path); }],
+    ['keep mine', () => hideNotice()]
+  ]);
+}
+
+async function startEditing(p) {
+  let data;
+  try {
+    const res = await fetch(`/api/source?p=${encodeURIComponent(p)}`);
+    if (!res.ok) throw new Error();
+    data = await res.json();
+  } catch {
+    toast(`couldn't load ${p} for editing`);
+    return;
+  }
+  // only a consistently CRLF file is written back as CRLF; a mixed one is saved as LF
+  const crlf = data.content.includes('\r\n') && !/(^|[^\r])\n/.test(data.content);
+  const text = crlf ? data.content.replace(/\r\n/g, '\n') : data.content;
+
+  contentEl.innerHTML =
+    `<div class="editor">` +
+      `<div class="editor-bar">` +
+        `<span class="editor-name">${esc(p.split('/').pop())}</span>` +
+        `<span class="editor-dirty" hidden>unsaved</span>` +
+        `<span class="editor-spacer"></span>` +
+        `<span class="editor-hint">⌘S save · esc cancel · ctrl-m tab focus</span>` +
+        `<button class="editor-btn" data-act="cancel">cancel</button>` +
+        `<button class="editor-btn primary" data-act="save">save</button>` +
+      `</div>` +
+      `<div class="editor-notice" hidden></div>` +
+      `<div class="editor-panes" style="--split:${readSplit()}%">` +
+        `<textarea class="editor-text" spellcheck="false" autocomplete="off" autocapitalize="off"></textarea>` +
+        `<div class="editor-divider" role="separator" aria-orientation="vertical" aria-label="resize editor and preview" tabindex="0" title="drag to resize · double-click to reset"></div>` +
+        `<div class="editor-preview markdown-body"></div>` +
+      `</div>` +
+    `</div>`;
+  const textarea = contentEl.querySelector('.editor-text');
+  textarea.value = text;
+  session = { path: p, mtime: data.mtime, original: text, crlf, textarea, noticeEl: contentEl.querySelector('.editor-notice') };
+  document.body.classList.add('editing');
+  markView('edit');
+
+  const dirtyEl = contentEl.querySelector('.editor-dirty');
+  const previewEl = contentEl.querySelector('.editor-preview');
+  textarea.addEventListener('input', () => { dirtyEl.hidden = !isDirty(); schedulePreview(p, textarea, previewEl); });
+  textarea.addEventListener('scroll', () => syncScroll(textarea, previewEl));
+  wireDivider(contentEl.querySelector('.editor-panes'), contentEl.querySelector('.editor-divider'));
+  renderPreview(p, textarea, previewEl);
+  textarea.addEventListener('keydown', onKey);
+  contentEl.querySelector('[data-act="save"]').addEventListener('click', () => save());
+  contentEl.querySelector('[data-act="cancel"]').addEventListener('click', cancel);
+  textarea.focus();
+  textarea.setSelectionRange(0, 0);
+}
+
+/* ---------- live preview (right pane) ---------- */
+
+let previewTimer = 0;
+let previewSeq = 0;
+
+function schedulePreview(p, textarea, previewEl) {
+  clearTimeout(previewTimer);
+  previewTimer = setTimeout(() => renderPreview(p, textarea, previewEl), 250);
+}
+
+// Rendered by the server exactly as the viewer renders the file, but from the
+// unsaved text - nothing is written. Out-of-order responses are dropped.
+async function renderPreview(p, textarea, previewEl) {
+  const seq = ++previewSeq;
+  let html;
+  try {
+    const res = await fetch('/api/preview', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path: p, content: textarea.value })
+    });
+    if (!res.ok) throw new Error();
+    ({ html } = await res.json());
+  } catch {
+    return;   // keep the last good preview
+  }
+  if (seq !== previewSeq || !previewEl.isConnected) return;
+  previewEl.innerHTML = html;
+  await runMermaid();
+  syncScroll(textarea, previewEl);
+}
+
+// Proportional: the preview sits at the same fraction of its height as the source.
+function syncScroll(textarea, previewEl) {
+  const max = textarea.scrollHeight - textarea.clientHeight;
+  const frac = max > 0 ? textarea.scrollTop / max : 0;
+  previewEl.scrollTop = frac * (previewEl.scrollHeight - previewEl.clientHeight);
+}
+
+/* ---------- resizable split ---------- */
+
+const SPLIT_KEY = 'pv-editor-split';
+const clampSplit = (n) => Math.min(80, Math.max(20, n));
+
+function readSplit() {
+  try { const n = Number(localStorage.getItem(SPLIT_KEY)); return n ? clampSplit(n) : 50; } catch { return 50; }
+}
+function saveSplit(n) {
+  try { localStorage.setItem(SPLIT_KEY, String(Math.round(n))); } catch { /* not persisted - fine */ }
+}
+
+function wireDivider(panes, divider) {
+  let split = readSplit();
+  const set = (n) => { split = clampSplit(n); panes.style.setProperty('--split', `${split}%`); };
+  divider.addEventListener('pointerdown', (e) => {
+    e.preventDefault();
+    divider.setPointerCapture(e.pointerId);
+    panes.classList.add('resizing');
+    const move = (ev) => {
+      const r = panes.getBoundingClientRect();
+      set(((ev.clientX - r.left) / r.width) * 100);
+    };
+    const up = () => {
+      divider.removeEventListener('pointerup', up);
+      divider.removeEventListener('pointercancel', up);
+      divider.removeEventListener('pointermove', move);
+      panes.classList.remove('resizing');
+      saveSplit(split);
+    };
+    divider.addEventListener('pointermove', move);
+    divider.addEventListener('pointerup', up, { once: true });
+    divider.addEventListener('pointercancel', up, { once: true });
+  });
+  divider.addEventListener('dblclick', () => { set(50); saveSplit(50); });
+  divider.addEventListener('keydown', (e) => {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    e.preventDefault();
+    set(split + (e.key === 'ArrowLeft' ? -5 : 5));
+    saveSplit(split);
+  });
+}
+
+/* ---------- keys ---------- */
+
+let tabMovesFocus = false;
+
+function onKey(e) {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') { e.preventDefault(); save(); return; }
+  if (e.key === 'Escape') { e.preventDefault(); cancel(); return; }
+  // ctrl-m toggles Tab between indenting and moving focus (so the keyboard can leave)
+  if (e.ctrlKey && e.key.toLowerCase() === 'm') {
+    e.preventDefault();
+    tabMovesFocus = !tabMovesFocus;
+    toast(tabMovesFocus ? 'tab moves focus (ctrl-m to indent)' : 'tab indents (ctrl-m to move focus)');
+    return;
+  }
+  if (e.key === 'Tab' && !tabMovesFocus && !e.metaKey && !e.ctrlKey && !e.altKey) {
+    // two spaces, never a tab character - YAML forbids tabs for indentation
+    e.preventDefault();
+    const ta = e.target;
+    if (e.shiftKey) { dedentLine(ta); return; }
+    ta.setRangeText('  ', ta.selectionStart, ta.selectionEnd, 'end');
+    ta.dispatchEvent(new Event('input'));
+  }
+}
+
+function dedentLine(ta) {
+  const start = ta.value.lastIndexOf('\n', ta.selectionStart - 1) + 1;
+  const strip = ta.value.slice(start, start + 2).match(/^ {1,2}/)?.[0].length || 0;
+  if (!strip) return;
+  const caret = ta.selectionStart;
+  ta.setRangeText('', start, start + strip, 'preserve');
+  ta.setSelectionRange(Math.max(start, caret - strip), Math.max(start, caret - strip));
+  ta.dispatchEvent(new Event('input'));
+}
+
+async function save(force = false) {
+  if (!session) return;
+  const { path, crlf, textarea } = session;
+  const content = crlf ? textarea.value.replace(/\n/g, '\r\n') : textarea.value;
+  let res;
+  session.saving = true;
+  try {
+    res = await fetch('/api/source', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path, content, mtime: session.mtime, force })
+    });
+  } catch {
+    session.saving = false;
+    toast('save failed - is projview still running?');
+    return;
+  }
+  session.saving = false;
+  if (res.status === 409) {
+    showNotice('this file changed on disk since you opened it', [
+      ['overwrite', () => save(true)],
+      ['reload theirs', () => { session.original = session.textarea.value; startEditing(path); }]
+    ]);
+    return;
+  }
+  if (!res.ok) {
+    const { error } = await res.json().catch(() => ({}));
+    toast(error || `save failed (${res.status})`);
+    return;
+  }
+  session = null;
+  document.body.classList.remove('editing');
+  toast(`saved ${path.split('/').pop()}`);
+  openFile(path);
+}
+
+function cancel() {
+  if (!session) return;
+  const p = session.path;
+  if (confirmLeave()) openFile(p);
+}
+
+function showNotice(msg, actions) {
+  const el = session.noticeEl;
+  el.replaceChildren(document.createTextNode(msg));
+  for (const [label, fn] of actions) {
+    const b = document.createElement('button');
+    b.className = 'editor-btn';
+    b.textContent = label;
+    b.addEventListener('click', fn);
+    el.appendChild(b);
+  }
+  el.hidden = false;
+}
+
+function hideNotice() { if (session) session.noticeEl.hidden = true; }
+
+// "e" opens the editor on the current page, unless the user is typing somewhere
+document.addEventListener('keydown', (e) => {
+  if (e.key !== 'e' || e.metaKey || e.ctrlKey || e.altKey || session) return;
+  if (e.target.closest?.('input, textarea, [contenteditable]') || !state.writable || !state.currentPath) return;
+  if (!$('palette').hidden || !$('zoom').hidden) return;
+  e.preventDefault();
+  startEditing(state.currentPath);
+});
+
+window.addEventListener('beforeunload', (e) => { if (isDirty()) e.preventDefault(); });

package/public/history.js

@@ -0,0 +1,162 @@
+/* history view: the file's earlier versions (newest first), each viewable as the
+ * file would render, and restorable. Versions are kept by the server whenever a
+ * file changes - from projview's editor or anywhere else. Restoring is an
+ * ordinary save, so the text it replaces becomes a version too. */
+
+import { $, esc } from './dom.js';
+import { state } from './store.js';
+import { openFile } from './viewer.js';
+import { runMermaid } from './mermaid.js';
+import { toast } from './toast.js';
+
+const contentEl = $('content');
+
+let open = null;   // { path, selected, mtime } while the history view is showing - mtime of the file as shown
+
+export const isHistory = (p) => !!open && (p === undefined || open.path === p);
+
+// The viewer calls this before rendering anything else.
+export function leaveHistory() {
+  open = null;
+  document.body.classList.remove('history');
+}
+
+export async function showHistory(p) {
+  open = { path: p, selected: 'current' };
+  document.body.classList.add('history');
+  await refreshHistory();
+}
+
+// Re-list (live reload calls this when the file changes while history is open).
+export async function refreshHistory() {
+  if (!open) return;
+  const p = open.path;
+  let data, mtime = null;
+  try {
+    const [res, src] = await Promise.all([
+      fetch(`/api/versions?p=${encodeURIComponent(p)}`),
+      state.writable ? fetch(`/api/source?p=${encodeURIComponent(p)}`) : null
+    ]);
+    if (!res.ok) throw new Error();
+    data = await res.json();
+    if (src?.ok) ({ mtime } = await src.json());
+  } catch {
+    toast(`couldn't load history for ${p}`);
+    return;
+  }
+  if (!isHistory(p)) return;
+  open.mtime = mtime;   // restore checks the file is still what "current" showed
+  const keep = state.persistent ? 'kept across runs' : 'kept until projview stops';
+  const rows = [{ id: 'current', label: 'current', when: null }, ...data.versions.map((v) => { const when = v.mtime ?? v.replacedAt; return { id: v.id, label: clock(when), sub: ago(when), when, size: v.size }; })];
+  if (!rows.some((r) => r.id === open.selected)) open.selected = 'current';
+
+  contentEl.innerHTML =
+    `<div class="history-view">` +
+      `<div class="history-bar">` +
+        `<span class="history-name">${esc(p.split('/').pop())}</span>` +
+        `<span class="history-hint">last ${data.limit} earlier versions · ${keep}</span>` +
+      `</div>` +
+      `<div class="history-panes">` +
+        `<div class="history-list" aria-label="versions">` +
+          rows.map((r) =>
+            `<button class="history-item" data-id="${esc(r.id)}"${r.when ? ` title="${esc(new Date(r.when).toLocaleString())}"` : ''}>` +
+              `<span class="hi-label">${esc(r.label)}${r.sub ? `<small>${esc(r.sub)}</small>` : ''}</span>` +
+              (r.size != null ? `<span class="hi-size">${fmtSize(r.size)}</span>` : '') +
+            `</button>`).join('') +
+          (data.versions.length ? '' : `<p class="history-empty">no earlier versions yet - they appear here as the file changes</p>`) +
+        `</div>` +
+        `<div class="history-pane">` +
+          `<div class="history-pane-bar"></div>` +
+          `<div class="history-preview markdown-body"></div>` +
+        `</div>` +
+      `</div>` +
+    `</div>`;
+  for (const b of contentEl.querySelectorAll('.history-item')) b.addEventListener('click', () => select(b.dataset.id));
+  await select(open.selected);
+}
+
+async function select(id) {
+  if (!open) return;
+  const p = open.path;
+  open.selected = id;
+  for (const b of contentEl.querySelectorAll('.history-item')) {
+    if (b.dataset.id === id) b.setAttribute('aria-current', 'true'); else b.removeAttribute('aria-current');
+  }
+  const bar = contentEl.querySelector('.history-pane-bar');
+  const preview = contentEl.querySelector('.history-preview');
+
+  let html, version = null;
+  try {
+    if (id === 'current') {
+      ({ html } = await (await fetch(`/api/file?p=${encodeURIComponent(p)}`)).json());
+    } else {
+      version = await (await fetch(`/api/versions/${encodeURIComponent(id)}`)).json();
+      ({ html } = await (await fetch('/api/preview', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ path: p, content: version.content })
+      })).json());
+    }
+  } catch {
+    toast('couldn’t load that version');
+    return;
+  }
+  if (!isHistory(p) || open.selected !== id) return;   // moved on while loading
+
+  bar.replaceChildren();
+  const label = document.createElement('span');
+  label.textContent = version ? `version from ${new Date(version.mtime ?? version.replacedAt).toLocaleString()}` : 'the file as it is now';
+  bar.appendChild(label);
+  if (version && state.writable) {
+    const btn = document.createElement('button');
+    btn.className = 'editor-btn primary';
+    btn.textContent = 'restore this version';
+    btn.addEventListener('click', () => restore(p, version));
+    bar.appendChild(btn);
+  }
+  preview.innerHTML = html;
+  await runMermaid();
+}
+
+async function restore(p, version) {
+  if (!confirm('restore this version? the current text is kept in history, so this can be undone.')) return;
+  try {
+    // the mtime from when history loaded: if the file changed since, the save is
+    // refused (409) instead of overwriting a change the user never saw
+    const res = await fetch('/api/source', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ path: p, content: version.content, mtime: open?.mtime })
+    });
+    if (res.status === 409) {
+      toast('the file changed since you opened history - check the new list and try again');
+      refreshHistory();
+      return;
+    }
+    if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || res.status);
+  } catch (err) {
+    toast(`restore failed - ${err.message}`);
+    return;
+  }
+  toast('restored - the replaced text is in history');
+  openFile(p);
+}
+
+// 14:02:31 today, else a short date + time
+function clock(ts) {
+  const d = new Date(ts);
+  const today = d.toDateString() === new Date().toDateString();
+  return today
+    ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    : d.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+
+function ago(ts) {
+  const s = Math.round((Date.now() - ts) / 1000);
+  if (s < 60) return 'just now';
+  if (s < 3600) return `${Math.round(s / 60)} min ago`;
+  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+  return new Date(ts).toLocaleDateString();
+}
+
+const fmtSize = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);

package/public/icons.js

@@ -4,4 +4,10 @@ export const SVG_FOLDER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentC
 export const SVG_FILE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>`;
 export const SVG_DIAGRAM = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.6"/><circle cx="6" cy="12" r="2.6"/><circle cx="18" cy="19" r="2.6"/><line x1="8.4" y1="10.7" x2="15.6" y2="6.3"/><line x1="8.4" y1="13.3" x2="15.6" y2="17.7"/></svg>`;
 
-export const fileIcon = (ext) => (ext === '.mmd' ? SVG_DIAGRAM : SVG_FILE);
+export const SVG_DATA = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>`;
+
+// The client's one list of previewable types: ext -> kind (null if not previewable).
+const KINDS = { '.md': 'md', '.mmd': 'mmd', '.json': 'data', '.yml': 'data', '.yaml': 'data' };
+export const fileKind = (name) => KINDS[(name.match(/\.[^./]+$/)?.[0] || '').toLowerCase()] || null;
+
+export const fileIcon = (name) => ({ mmd: SVG_DIAGRAM, data: SVG_DATA }[fileKind(name)] || SVG_FILE);