Add version history with rollback and per-note created/synced info

Server (schema v2, auto-migrates): every accepted overwrite snapshots the
superseded revision into note_history (capped at 50 per note); new
GET /api/v1/notes/{id}/history endpoint; compact purges orphaned history.

Client: notes get a synced_at stamp on every confirmed server exchange;
an info footer under the editor and a Ctrl/Cmd+I panel show created/
modified/last-synced plus the revision list. Restoring a revision applies
it as a normal edit through the sync path, so rollback is non-destructive.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/db/store.ts

@@ -102,10 +102,11 @@ export async function applyServerNote(sn: ServerNote): Promise<void> {
 export async function applyServerNotes(sns: ServerNote[]): Promise<void> {
   const m = get(notes);
   const updates: Note[] = [];
+  const now = Date.now();
   for (const sn of sns) {
     const local = m.get(sn.id);
     if (local && local.dirty) continue; // push will resolve
-    updates.push({ ...sn, baseVersion: sn.version, dirty: false });
+    updates.push({ ...sn, baseVersion: sn.version, dirty: false, synced_at: now });
   }
   if (!updates.length) return;
   notes.update((map) => {
@@ -120,14 +121,14 @@ export async function markPushed(id: string, sentModifiedAt: number, version: nu
   const n = get(notes).get(id);
   if (!n) return;
   const stillSame = n.modified_at === sentModifiedAt;
-  const upd: Note = { ...n, version, baseVersion: version, dirty: stillSame ? false : n.dirty };
+  const upd: Note = { ...n, version, baseVersion: version, dirty: stillSame ? false : n.dirty, synced_at: Date.now() };
   mutate(upd);
   await idbPutNote(upd);
 }
 
 /** After a conflict: server truth replaces local; conflict copy arrives via next pull. */
 export async function replaceWithServer(sn: ServerNote): Promise<void> {
-  const upd: Note = { ...sn, baseVersion: sn.version, dirty: false };
+  const upd: Note = { ...sn, baseVersion: sn.version, dirty: false, synced_at: Date.now() };
   mutate(upd);
   await idbPutNote(upd);
 }

frontend/src/sync/engine.ts

@@ -1,5 +1,5 @@
 import { writable, get } from 'svelte/store';
-import type { PushResult, ServerNote, SyncState } from '../types';
+import type { PushResult, Revision, ServerNote, SyncState } from '../types';
 import { notes, settings, cursor, setCursor, applyServerNotes, markPushed, replaceWithServer } from '../db/store';
 
 export const syncState = writable<SyncState>('local');
@@ -66,6 +66,15 @@ async function push(): Promise<void> {
   }
 }
 
+/** Fetch a note's server-side revision history (newest first). */
+export async function fetchHistory(id: string): Promise<Revision[]> {
+  if (!configured()) throw new Error('no server configured');
+  const res = await api(`/api/v1/notes/${encodeURIComponent(id)}/history`);
+  if (!res.ok) throw new Error(`history: HTTP ${res.status}`);
+  const body: { revisions: Revision[] } = await res.json();
+  return body.revisions;
+}
+
 /** Pull-then-push; safe to interrupt at any point (SPEC §4). */
 export async function syncNow(): Promise<void> {
   if (!configured()) {

frontend/src/time.ts

@@ -0,0 +1,13 @@
+/** Absolute timestamp for metadata display, e.g. "Jul 25, 2026, 14:03". */
+export function fmtDateTime(ms: number): string {
+  return new Date(ms).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+}
+
+/** Coarse relative timestamp: "just now", "5 min ago", "3 h ago", else absolute. */
+export function fmtAgo(ms: number, now: number = Date.now()): string {
+  const d = now - ms;
+  if (d < 60_000) return 'just now';
+  if (d < 3_600_000) return `${Math.floor(d / 60_000)} min ago`;
+  if (d < 86_400_000) return `${Math.floor(d / 3_600_000)} h ago`;
+  return fmtDateTime(ms);
+}

frontend/src/types.ts

@@ -8,6 +8,17 @@ export interface Note {
   version: number; // server-assigned version of the copy we derived from (0 = never synced)
   baseVersion: number; // server version this local copy was derived from
   dirty: boolean; // locally modified, not yet pushed
+  synced_at?: number; // unix ms of last confirmed server exchange (absent = never synced)
+}
+
+/** A superseded note state kept server-side (GET /notes/{id}/history). */
+export interface Revision {
+  note_id: string;
+  version: number;
+  content: string;
+  tags: string[];
+  modified_at: number;
+  replaced_at: number;
 }
 
 export interface ServerNote {

frontend/src/ui/App.svelte

@@ -10,13 +10,17 @@
   import Preview from './Preview.svelte';
   import StatusDot from './StatusDot.svelte';
   import SettingsMenu from './SettingsMenu.svelte';
+  import NoteInfo from './NoteInfo.svelte';
   import Toast from './Toast.svelte';
+  import { fmtDateTime, fmtAgo } from '../time';
 
   let query = '';
   let selectedId: string | null = null;
   let tagFilter: string | null = null;
   let preview = false;
   let menuOpen = false;
+  let infoOpen = false;
+  let now = Date.now(); // periodic tick so "synced X ago" stays fresh
   let narrow = false;
   let mobileView: 'list' | 'editor' = 'list';
   let toast: { message: string; onAction: () => void } | null = null;
@@ -142,6 +146,9 @@
     } else if (mod && e.shiftKey && e.key.toLowerCase() === 'p') {
       e.preventDefault();
       if (selected) preview = !preview;
+    } else if (mod && !e.shiftKey && e.key.toLowerCase() === 'i') {
+      e.preventDefault();
+      if (selected) infoOpen = !infoOpen;
     } else if (mod && !e.shiftKey && e.key.toLowerCase() === 'k') {
       e.preventDefault();
       cycleTag();
@@ -161,13 +168,17 @@
     narrow = mq.matches;
     const onMq = () => (narrow = mq.matches);
     mq.addEventListener('change', onMq);
+    const tick = setInterval(() => (now = Date.now()), 30_000);
     omnibar?.focus();
     // First run: offer server config; Cancel = work locally only (SPEC §7).
     if (!localStorage.getItem('tefter-first-run-done')) {
       localStorage.setItem('tefter-first-run-done', '1');
       if (!notesArr.length && !$settings.serverUrl) menuOpen = true;
     }
-    return () => mq.removeEventListener('change', onMq);
+    return () => {
+      mq.removeEventListener('change', onMq);
+      clearInterval(tick);
+    };
   });
 </script>
 
@@ -219,6 +230,24 @@
             <p>Type to search — <kbd>Enter</kbd> creates a note when nothing matches.</p>
           </div>
         {/if}
+        {#if selected}
+          <div class="note-meta">
+            <span>Created {fmtDateTime(selected.created_at)}</span>
+            <span class="meta-sep">·</span>
+            <span>
+              {#if selected.dirty}
+                Sync pending
+              {:else if selected.synced_at}
+                Synced {fmtAgo(selected.synced_at, now)}
+              {:else}
+                Not synced
+              {/if}
+            </span>
+            <button class="meta-btn" title="Note info & version history (Ctrl+I)" on:click={() => (infoOpen = true)}>
+              History
+            </button>
+          </div>
+        {/if}
       </div>
     {/if}
   </div>
@@ -227,6 +256,10 @@
     <SettingsMenu on:close={() => (menuOpen = false)} />
   {/if}
 
+  {#if infoOpen && selected}
+    <NoteInfo note={selected} on:close={() => (infoOpen = false)} />
+  {/if}
+
   {#if toast}
     <Toast message={toast.message} actionLabel="Undo" onAction={toast.onAction} on:done={() => (toast = null)} />
   {/if}
@@ -319,6 +352,30 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .note-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px;
+    border-top: 1px solid var(--sep);
+    font-size: 11.5px;
+    color: var(--fg-dim);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .meta-sep {
+    opacity: 0.6;
+  }
+  .meta-btn {
+    margin-left: auto;
+    color: var(--accent);
+    font-size: 11.5px;
+    padding: 2px 6px;
+    border-radius: 5px;
+  }
+  .meta-btn:hover {
+    background: var(--sel-bg);
+  }
   .empty {
     flex: 1;
     display: flex;

frontend/src/ui/NoteInfo.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { get } from 'svelte/store';
+  import { settings, updateContent } from '../db/store';
+  import { fetchHistory, notifyEdit } from '../sync/engine';
+  import { noteTitle } from '../search';
+  import { fmtDateTime, fmtAgo } from '../time';
+  import type { Note, Revision } from '../types';
+
+  export let note: Note;
+
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  let revisions: Revision[] = [];
+  let loading = true;
+  let error = '';
+  let selected: Revision | null = null;
+
+  const hasServer = !!get(settings).serverUrl;
+
+  $: syncLabel = note.dirty
+    ? 'changes pending' + (note.synced_at ? ` · last synced ${fmtAgo(note.synced_at)}` : '')
+    : note.synced_at
+      ? fmtAgo(note.synced_at)
+      : 'never';
+
+  function fmtSize(chars: number): string {
+    return chars < 1024 ? `${chars} chars` : `${(chars / 1024).toFixed(1)}k chars`;
+  }
+
+  async function restore(rev: Revision) {
+    await updateContent(note.id, rev.content);
+    notifyEdit();
+    dispatch('close');
+  }
+
+  onMount(async () => {
+    if (!hasServer) {
+      loading = false;
+      return;
+    }
+    try {
+      revisions = await fetchHistory(note.id);
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      loading = false;
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="backdrop" on:click|self={() => dispatch('close')}>
+  <div class="panel">
+    <h2>{noteTitle(note.content)}</h2>
+
+    <section>
+      <h3>Info</h3>
+      <dl>
+        <dt>Created</dt>
+        <dd>{fmtDateTime(note.created_at)}</dd>
+        <dt>Modified</dt>
+        <dd>{fmtDateTime(note.modified_at)}</dd>
+        <dt>Last synced</dt>
+        <dd>{syncLabel}</dd>
+        {#if note.version > 0}
+          <dt>Server version</dt>
+          <dd>{note.version}</dd>
+        {/if}
+      </dl>
+    </section>
+
+    <section>
+      <h3>History</h3>
+      {#if !hasServer}
+        <div class="hint">Versions are recorded on the server — configure sync in Settings to get history.</div>
+      {:else if loading}
+        <div class="hint">Loading…</div>
+      {:else if error}
+        <div class="hint">Couldn’t load history: {error}</div>
+      {:else if !revisions.length}
+        <div class="hint">No older versions yet. A version is saved every time a synced note is overwritten.</div>
+      {:else}
+        <ul class="revs">
+          {#each revisions as rev (rev.version)}
+            <li>
+              <button
+                class="rev"
+                class:active={selected?.version === rev.version}
+                on:click={() => (selected = selected?.version === rev.version ? null : rev)}
+              >
+                <span class="rev-when">{fmtDateTime(rev.modified_at)}</span>
+                <span class="rev-size">{fmtSize(rev.content.length)}</span>
+              </button>
+              {#if selected?.version === rev.version}
+                <pre class="rev-preview">{rev.content}</pre>
+                <button class="btn primary" on:click={() => restore(rev)}>Restore this version</button>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+        <div class="hint">Restoring applies the old text as a new edit — nothing is lost, the current text stays in history.</div>
+      {/if}
+    </section>
+
+    <div class="actions">
+      <button class="btn" on:click={() => dispatch('close')}>Close</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 8vh;
+  }
+  .panel {
+    background: var(--bg-panel);
+    border: 1px solid var(--sep);
+    border-radius: 10px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    width: min(520px, 92vw);
+    max-height: 84vh;
+    overflow-y: auto;
+    padding: 18px 22px;
+  }
+  h2 {
+    margin: 0 0 6px;
+    font-size: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  h3 {
+    margin: 14px 0 6px;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--fg-dim);
+  }
+  dl {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 3px 14px;
+    margin: 0;
+    font-size: 13px;
+  }
+  dt {
+    color: var(--fg-dim);
+  }
+  dd {
+    margin: 0;
+  }
+  .hint {
+    font-size: 12.5px;
+    color: var(--fg-dim);
+    margin-top: 6px;
+  }
+  .revs {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .rev {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+    text-align: left;
+    padding: 5px 8px;
+    border-radius: 6px;
+    font-size: 13px;
+  }
+  .rev:hover,
+  .rev.active {
+    background: var(--sel-bg);
+  }
+  .rev-size {
+    color: var(--fg-dim);
+    white-space: nowrap;
+  }
+  .rev-preview {
+    margin: 4px 0 2px;
+    padding: 8px 10px;
+    max-height: 180px;
+    overflow: auto;
+    border: 1px solid var(--sep);
+    border-radius: 6px;
+    background: var(--bg);
+    font-family: var(--mono);
+    font-size: 12px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .btn {
+    border: 1px solid var(--sep);
+    border-radius: 6px;
+    padding: 5px 14px;
+    margin-top: 4px;
+    background: var(--bg);
+  }
+  .btn.primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+    margin-bottom: 8px;
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 10px;
+  }
+</style>