Bookmark editor · preserve the user's next edit

type Bookmark = {id: string; title: string; url: string; created_at: number; version: number};
export {}; // This file is loaded as an ES module in index.html.
type Page = {items: Bookmark[]; nextCursor: string | null};
type Pending = {key: string; title: string; revision: number; expectedVersion: number; generation: number};
const get = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
const title = get<HTMLInputElement>('title');
const save = get<HTMLButtonElement>('save');
const status = get<HTMLParagraphElement>('edit-status');
const headers = {Authorization: 'Bearer alice-local-token'};

function bookmark(value: unknown): Bookmark {
  const x = value as Partial<Bookmark> | null;
  if (!x || typeof x.id !== 'string' || typeof x.title !== 'string' || typeof x.url !== 'string' ||
      !Number.isSafeInteger(x.version) || Number(x.version) < 1 || !Number.isSafeInteger(x.created_at)) {
    throw new Error('Invalid bookmark response');
  }
  return x as Bookmark;
}
function page(value: unknown): Page {
  const x = value as Partial<Page> | null;
  if (!x || !Array.isArray(x.items) || (x.nextCursor !== null && typeof x.nextCursor !== 'string')) {
    throw new Error('Invalid list response');
  }
  return {items: x.items.map(bookmark), nextCursor: x.nextCursor};
}

let confirmed: Bookmark | null = null;
let draft = '';
let revision = 0;
let generation = 0; // changes on select/dispose; server versions are a separate ordering
let pending: Pending | null = null;
let saving = false;
let conflict = false;
let editorController: AbortController | null = null;
let opener: HTMLButtonElement | null = null;

function paintEditor(message?: string): void {
  get('editor').hidden = confirmed === null;
  if (!confirmed) return;
  title.value = draft;
  get('confirmed').textContent = `Server: ${confirmed.title} · version ${confirmed.version}`;
  save.disabled = saving || conflict || !draft.trim() || (!pending && draft === confirmed.title);
  save.textContent = saving ? 'Saving…' : pending ? 'Retry save' : 'Save title';
  get('resolve').hidden = !conflict;
  if (message !== undefined) status.textContent = message;
}

function openEditor(row: Bookmark, source: HTMLButtonElement): void {
  editorController?.abort();
  editorController = new AbortController();
  generation++;
  confirmed = row;
  draft = row.title;
  revision = 0;
  pending = null;
  saving = false;
  conflict = false;
  opener = source;
  paintEditor('Ready to edit.');
  title.focus();
}

function closeEditor(): void {
  generation++;
  editorController?.abort();
  confirmed = null;
  pending = null;
  saving = false;
  paintEditor();
  if (opener?.isConnected) opener.focus();
  else get('search').focus();
}

title.addEventListener('input', () => {
  draft = title.value;
  revision++;
  paintEditor(conflict ? 'Conflict. Your draft is retained. Choose the server version before saving.' :
              saving ? 'Saving the earlier edit. Your newer draft is retained.' : 'Unsaved changes.');
});

get('edit-form').addEventListener('submit', async event => {
  event.preventDefault();
  if (!confirmed || saving || conflict || !draft.trim()) return;
  // Retrying an uncertain result reuses A's exact payload and key, even after B is typed.
  pending ??= {key: crypto.randomUUID(), title: draft, revision, expectedVersion: confirmed.version, generation};
  const mutation = pending;
  const id = confirmed.id;
  saving = true;
  paintEditor('Saving…');
  try {
    const response = await fetch(`/api/bookmarks/${encodeURIComponent(id)}`, {
      method: 'PATCH', signal: editorController?.signal,
      headers: {...headers, 'Content-Type': 'application/json', 'Idempotency-Key': mutation.key},
      body: JSON.stringify({title: mutation.title, expectedVersion: mutation.expectedVersion})
    });
    const body: unknown = await response.json();
    if (generation !== mutation.generation || pending?.key !== mutation.key || !confirmed) return;
    if (response.status === 409) {
      const current = bookmark((body as {current: unknown}).current);
      if (current.id !== id) throw new Error('Mismatched bookmark response');
      if (current.version >= confirmed.version) confirmed = current;
      pending = null;
      saving = false;
      conflict = true;
      paintEditor('Conflict. Your draft is retained. Review the server copy, then keep your draft.');
      get('resolve').focus();
      return;
    }
    if (!response.ok) throw new Error(`Save failed (${response.status}).`);
    const current = bookmark(body);
    if (current.id !== id) throw new Error('Mismatched bookmark response');
    if (current.version >= confirmed.version) confirmed = current;
    if (revision === mutation.revision) draft = confirmed.title;
    pending = null;
    saving = false;
    paintEditor(draft === confirmed.title ? 'Saved.' : 'Earlier edit saved. Your newer draft is unsaved.');
  } catch (error) {
    if (generation !== mutation.generation || !confirmed) return;
    saving = false;
    paintEditor('Save outcome unavailable. Your draft is retained. Retry uses the same mutation.');
  }
});

get('resolve').addEventListener('click', () => {
  conflict = false;
  paintEditor('Draft retained. Save will use the displayed server version.');
  title.focus();
});
get('close').addEventListener('click', closeEditor);
get('refresh').addEventListener('click', async () => {
  if (!confirmed) return;
  const mine = generation, id = confirmed.id;
  try {
    const response = await fetch(`/api/bookmarks/${encodeURIComponent(id)}`, {headers, signal: editorController?.signal});
    if (!response.ok) throw new Error('Refresh failed');
    const current = bookmark(await response.json());
    if (mine !== generation || !confirmed || current.id !== id) return;
    const dirty = draft !== confirmed.title;
    if (current.version > confirmed.version) {
      confirmed = current;
      if (!dirty && !pending) draft = current.title;
      paintEditor('Server copy refreshed. Unsaved edits are retained.');
    } else {
      paintEditor('Server copy unchanged. Unsaved edits are retained.');
    }
  } catch {
    if (mine === generation && confirmed) paintEditor('Refresh failed. Your draft is retained; try Refresh again.');
  }
});

let searchGeneration = 0;
let listController: AbortController | null = null;
let nextCursor: string | null = null;
let currentQuery = '';
let rows: Bookmark[] = [];
let failedAppend = false;
async function search(append = false): Promise<void> {
  listController?.abort();
  listController = new AbortController();
  const mine = ++searchGeneration;
  if (!append) {
    currentQuery = get<HTMLInputElement>('search').value;
    // Rows and their cursor belong to one query. A failed new search must never
    // leave an old continuation usable with the new query.
    rows = [];
    nextCursor = null;
    get('results').replaceChildren();
    get('more').hidden = true;
  }
  const params = new URLSearchParams({q: currentQuery, limit: '2'});
  if (append && nextCursor) params.set('cursor', nextCursor);
  get('list-status').textContent = 'Loading…';
  get('retry-list').hidden = true;
  get<HTMLButtonElement>('more').disabled = true;
  try {
    const response = await fetch(`/api/bookmarks?${params}`, {headers, signal: listController.signal});
    if (!response.ok) throw new Error(`Search failed (${response.status})`);
    const data = page(await response.json());
    if (mine !== searchGeneration) return;
    const combined = append ? [...rows, ...data.items] : data.items;
    rows = Array.from(new Map(combined.map(row => [row.id, row])).values());
    nextCursor = data.nextCursor;
    const list = get('results');
    list.replaceChildren();
    for (const row of rows) {
      const item = document.createElement('li');
      const button = document.createElement('button');
      button.textContent = `Edit ${row.title}`;
      button.addEventListener('click', () => openEditor(row, button));
      item.append(button);
      list.append(item);
    }
    get('list-status').textContent = rows.length ? `${rows.length} bookmarks loaded.` : 'No bookmarks found.';
    get('more').hidden = nextCursor === null;
  } catch {
    if (mine !== searchGeneration) return;
    failedAppend = append;
    get('list-status').textContent = 'Search failed. Retry to load bookmarks.';
    get('retry-list').hidden = false;
  } finally {
    if (mine === searchGeneration) get<HTMLButtonElement>('more').disabled = false;
  }
}
get('search-form').addEventListener('submit', event => {event.preventDefault(); void search();});
get('more').addEventListener('click', () => {void search(true);});
get('retry-list').addEventListener('click', () => {void search(failedAppend);});
window.addEventListener('pagehide', () => {generation++; searchGeneration++; editorController?.abort(); listController?.abort();});
void search();

"""Loopback teaching server. Tokens below are demonstration identities, not login."""
import argparse
import base64
import binascii
from contextlib import contextmanager
import hashlib
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
import json
from pathlib import Path
import re
import sqlite3
import unicodedata
from urllib.parse import parse_qs, urlparse

ROOT = Path(__file__).parent
TOKENS = {"Bearer alice-local-token": "alice", "Bearer bob-local-token": "bob"}


@contextmanager
def connect(path):
    db = sqlite3.connect(path, timeout=3)
    db.row_factory = sqlite3.Row
    try:
        with db:
            yield db
    finally:
        db.close()


def initialize(path):
    with connect(path) as db:
        db.executescript((ROOT / "schema.sql").read_text())
        db.executemany("INSERT OR IGNORE INTO bookmarks VALUES(?,?,?,?,?,?)", [
            ("a", "alice", "Alpha", "https://example.com/a", 100, 1),
            ("b", "alice", "Beta", "https://example.com/b", 100, 1),
            ("c", "alice", "Gamma", "https://example.com/c", 99, 1),
            ("secret", "bob", "Bob private", "https://example.com/private", 101, 1),
        ])


def record(row):
    return {k: row[k] for k in ("id", "title", "url", "created_at", "version")}


def handler(path):
    class Handler(BaseHTTPRequestHandler):
        def log_message(self, *args):
            pass

        def reply(self, status, body):
            data = json.dumps(body).encode()
            self.send_response(status)
            self.send_header("Content-Type", "application/json")
            self.send_header("Content-Length", str(len(data)))
            self.send_header("Cache-Control", "no-store")
            self.end_headers()
            try:
                self.wfile.write(data)
            except (BrokenPipeError, ConnectionResetError):
                pass  # client disposal does not roll back an already committed mutation

        def owner(self):
            return TOKENS.get(self.headers.get("Authorization"))

        def do_GET(self):
            parsed = urlparse(self.path)
            if not parsed.path.startswith("/api/"):
                files = {"/": ("web/index.html", "text/html"),
                         "/app.js": ("web/app.js", "text/javascript"),
                         "/style.css": ("web/style.css", "text/css")}
                entry = files.get(parsed.path)
                if entry is None:
                    return self.reply(404, {"error": "not found"})
                source = ROOT / entry[0]
                if not source.exists():
                    return self.reply(503, {"error": "run node build.mjs first"})
                data = source.read_bytes()
                self.send_response(200)
                self.send_header("Content-Type", entry[1])
                self.send_header("Content-Length", str(len(data)))
                self.send_header("Content-Security-Policy", "default-src 'self'; connect-src 'self'; style-src 'self'; script-src 'self'")
                self.end_headers()
                self.wfile.write(data)
                return
            owner = self.owner()
            if owner is None:
                return self.reply(401, {"error": "local demo token required"})
            with connect(path) as db:
                if parsed.path == "/api/bookmarks":
                    params = parse_qs(parsed.query)
                    try:
                        limit = int(params.get("limit", ["2"])[0])
                        query = params.get("q", [""])[0]
                        if not 1 <= limit <= 50 or len(query) > 200:
                            raise ValueError()
                        cursor = params.get("cursor", [None])[0]
                        args = [owner, query]
                        sql = "SELECT * FROM bookmarks WHERE owner_id=? AND instr(lower(title),lower(?))>0"
                        if cursor:
                            if len(cursor) > 1000:
                                raise ValueError()
                            stamp, ident = json.loads(base64.urlsafe_b64decode(cursor.encode()))
                            if type(stamp) is not int or abs(stamp) > 2**53 - 1 or not isinstance(ident, str):
                                raise ValueError()
                            sql += " AND (created_at,id)<(?,?)"
                            args += [stamp, ident]
                        sql += " ORDER BY created_at DESC,id DESC LIMIT ?"
                        args += [limit + 1]
                        rows = db.execute(sql, args).fetchall()
                    except (ValueError, TypeError, json.JSONDecodeError, UnicodeError, binascii.Error):
                        return self.reply(400, {"error": "invalid query or cursor"})
                    page = rows[:limit]
                    next_cursor = None
                    if len(rows) > limit:
                        last = page[-1]
                        next_cursor = base64.urlsafe_b64encode(json.dumps([last["created_at"], last["id"]]).encode()).decode()
                    return self.reply(200, {"items": [record(row) for row in page], "nextCursor": next_cursor})
                ident = parsed.path.removeprefix("/api/bookmarks/")
                row = db.execute("SELECT * FROM bookmarks WHERE id=? AND owner_id=?", (ident, owner)).fetchone()
                return self.reply(200, record(row)) if row else self.reply(404, {"error": "not found"})

        def do_PATCH(self):
            owner = self.owner()
            if owner is None:
                return self.reply(401, {"error": "local demo token required"})
            if not self.path.startswith("/api/bookmarks/"):
                return self.reply(404, {"error": "not found"})
            ident = self.path.removeprefix("/api/bookmarks/")
            key = self.headers.get("Idempotency-Key", "")
            try:
                length = int(self.headers.get("Content-Length", "0"))
                if not 0 < length <= 4096 or not re.fullmatch(r"[A-Za-z0-9-]{1,80}", key):
                    raise ValueError()
                body = json.loads(self.rfile.read(length))
                if not isinstance(body, dict) or set(body) != {"title", "expectedVersion"}:
                    raise ValueError()
                title, expected = body["title"], body["expectedVersion"]
                if not isinstance(title, str) or not title.strip() or len(title) > 200 or type(expected) is not int or not 1 <= expected < 2**53 - 1:
                    raise ValueError()
                title.encode("utf-8")  # reject lone surrogates before SQLite binding
                if any(unicodedata.category(ch) == "Cc" for ch in title):
                    raise ValueError("single-line title cannot contain control characters")
            except (ValueError, TypeError, UnicodeError, json.JSONDecodeError):
                return self.reply(400, {"error": "valid single-line Unicode title, integer expectedVersion and mutation key required"})
            fingerprint = hashlib.sha256(json.dumps([ident, title, expected]).encode()).hexdigest()
            try:
                with connect(path) as db:
                    db.execute("BEGIN IMMEDIATE")
                    row = db.execute("SELECT * FROM bookmarks WHERE id=? AND owner_id=?", (ident, owner)).fetchone()
                    if row is None:
                        status, result = 404, {"error": "not found"}
                    else:
                        old = db.execute("SELECT * FROM mutations WHERE owner_id=? AND mutation_id=?", (owner, key)).fetchone()
                        if old and old["fingerprint"] != fingerprint:
                            status, result = 409, {"error": "mutation key reused with different payload", "current": record(row)}
                        elif old:
                            status, result = 200, json.loads(old["response"])
                        else:
                            changed = db.execute("UPDATE bookmarks SET title=?,version=version+1 WHERE id=? AND owner_id=? AND version=?",
                                                 (title, ident, owner, expected)).rowcount
                            if not changed:
                                status, result = 409, {"error": "version conflict", "current": record(row)}
                            else:
                                status = 200
                                result = record(db.execute("SELECT * FROM bookmarks WHERE id=? AND owner_id=?", (ident, owner)).fetchone())
                                db.execute("INSERT INTO mutations VALUES(?,?,?,?)", (owner, key, fingerprint, json.dumps(result)))
                # Every outcome is chosen under the transaction; none writes to a
                # potentially slow socket until the transaction and connection end.
                return self.reply(status, result)
            except sqlite3.OperationalError as exc:
                code = getattr(exc, "sqlite_errorcode", None)
                busy = code is not None and (code & 0xff) in (sqlite3.SQLITE_BUSY, sqlite3.SQLITE_LOCKED)
                if busy or (code is None and str(exc) in ("database is locked", "database table is locked")):
                    return self.reply(503, {"error": "store busy; retry the same mutation key"})
                return self.reply(500, {"error": "store operation failed"})
    return Handler


def serve(path, port=8765):
    initialize(path)
    return ThreadingHTTPServer(("127.0.0.1", port), handler(path))


if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("--db", default=str(ROOT / "bookmarks.sqlite3"))
    parser.add_argument("--port", type=int, default=8765)
    args = parser.parse_args()
    server = serve(args.db, args.port)
    print(f"Bookmark editor: http://127.0.0.1:{server.server_port}", flush=True)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass
    finally:
        server.server_close()

PRAGMA foreign_keys=ON;
CREATE TABLE IF NOT EXISTS bookmarks (
  id TEXT PRIMARY KEY,
  owner_id TEXT NOT NULL,
  title TEXT NOT NULL CHECK(length(title) BETWEEN 1 AND 200 AND instr(title,char(0))=0),
  url TEXT NOT NULL,
  created_at INTEGER NOT NULL,
  version INTEGER NOT NULL DEFAULT 1 CHECK(version > 0)
);
CREATE INDEX IF NOT EXISTS bookmarks_owner_created_id ON bookmarks(owner_id,created_at DESC,id DESC);
CREATE TABLE IF NOT EXISTS mutations (
  owner_id TEXT NOT NULL,
  mutation_id TEXT NOT NULL,
  fingerprint TEXT NOT NULL,
  response TEXT NOT NULL,
  PRIMARY KEY(owner_id,mutation_id)
);

"""Reproducible query measurement; numbers are local observations, not SLOs."""
import json
from pathlib import Path
import platform
import sqlite3
from statistics import median
import tempfile
from time import perf_counter


def measure():
    with tempfile.TemporaryDirectory() as folder:
        db = sqlite3.connect(Path(folder) / "profile.db")
        db.executescript((Path(__file__).parent / "schema.sql").read_text())
        db.execute("DROP INDEX bookmarks_owner_created_id")
        db.executemany("INSERT INTO bookmarks VALUES(?,?,?,?,?,?)", (
            (f"{i:07}", "alice" if i < 90000 else f"tenant{i % 1000}", f"Bookmark {i}", "https://example.com", i // 10, 1)
            for i in range(100000)))
        db.commit()
        sql = "SELECT id,title,version FROM bookmarks WHERE owner_id=? AND (created_at,id)<(?,?) ORDER BY created_at DESC,id DESC LIMIT 50"
        args = ("alice", 8000, "0080000")
        result = {"python": platform.python_version(), "sqlite": sqlite3.sqlite_version, "rows": 100000,
                  "workload": "90% Alice; tied timestamp groups of ten; page limit 50; 15 warm queries"}
        baseline = None
        for label in ("before", "after"):
            if label == "after":
                db.execute("CREATE INDEX bookmarks_owner_created_id ON bookmarks(owner_id,created_at DESC,id DESC)")
                db.execute("ANALYZE")
            plan = [row[-1] for row in db.execute("EXPLAIN QUERY PLAN " + sql, args)]
            timings = []
            for _ in range(15):
                start = perf_counter()
                rows = db.execute(sql, args).fetchall()
                timings.append((perf_counter() - start) * 1000)
            if baseline is None:
                baseline = rows
            assert rows == baseline and len(rows) == 50
            result[label] = {"median_ms": round(median(timings), 3), "plan": plan}
        db.close()
        return result


if __name__ == "__main__":
    print(json.dumps(measure(), indent=2))