phase0: wallabag-compat API + PWA frontend

- Wallabag v2 API compatible (OAuth2, entries CRUD, tags) - Express + SQLite (better-sqlite3), zero extra deps - Gated web UI with session auth - PWA: service worker, manifest, offline support - Mobile-first design, dark mode, FAB + modal
2026-05-02 22:35:27 +00:00 · 2026-05-02 22:35:27 +00:00 · 1adf88d195
commit 1adf88d195
13 changed files with 1925 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,15 @@
+PORT=3000
+DATABASE_PATH=./data/bagg.sqlite
+
+# Initial admin user (created on first run if not exists)
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=changeme
+
+# OAuth2 client credentials for iOS/Safari Wallabag app
+# Set these in the iOS app settings:
+#   Server URL: https://your-domain
+#   Username/Password: your credentials above
+#   Client ID: bagg_ios
+#   Client Secret: bagg_secret
+ADMIN_CLIENT_ID=bagg_ios
+ADMIN_CLIENT_SECRET=bagg_secret
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+node_modules/
+data/
+*.sqlite
+*.sqlite-wal
+*.sqlite-shm
+.env
--- a/23
+++ b/23
@ -0,0 +1,23 @@
+FROM node:22-bookworm-slim
+
+# Build tools for better-sqlite3 native compilation
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3 make g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install --omit=dev
+
+COPY . .
+
+RUN mkdir -p /data
+
+ENV PORT=3000
+ENV DATABASE_PATH=/data/bagg.sqlite
+ENV NODE_ENV=production
+
+EXPOSE 3000
+
+CMD ["node", "server.js"]
--- a/db.js
+++ b/db.js
@ -0,0 +1,383 @@
+'use strict';
+
+const Database = require('better-sqlite3');
+const crypto = require('crypto');
+const path = require('path');
+
+const DB_PATH = process.env.DATABASE_PATH || path.join(__dirname, 'data', 'bagg.sqlite');
+
+// Ensure data dir exists
+const fs = require('fs');
+fs.mkdirSync(path.dirname(DB_PATH), { recursive: true });
+
+const db = new Database(DB_PATH);
+
+db.pragma('journal_mode = WAL');
+db.pragma('foreign_keys = ON');
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+db.exec(`
+CREATE TABLE IF NOT EXISTS users (
+  id            INTEGER PRIMARY KEY AUTOINCREMENT,
+  username      TEXT    NOT NULL UNIQUE,
+  password_hash TEXT    NOT NULL,
+  salt          TEXT    NOT NULL,
+  created_at    INTEGER NOT NULL DEFAULT (unixepoch()),
+  updated_at    INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS web_sessions (
+  id         INTEGER PRIMARY KEY AUTOINCREMENT,
+  token      TEXT    NOT NULL UNIQUE,
+  user_id    INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  expires_at INTEGER NOT NULL,
+  created_at INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS oauth_clients (
+  id            INTEGER PRIMARY KEY AUTOINCREMENT,
+  client_id     TEXT    NOT NULL UNIQUE,
+  client_secret TEXT    NOT NULL,
+  created_at    INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS oauth_tokens (
+  id            INTEGER PRIMARY KEY AUTOINCREMENT,
+  access_token  TEXT    NOT NULL UNIQUE,
+  refresh_token TEXT    UNIQUE,
+  user_id       INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  expires_at    INTEGER NOT NULL,
+  created_at    INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE TABLE IF NOT EXISTS entries (
+  id              INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id         INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  url             TEXT    NOT NULL,
+  hashed_url      TEXT    NOT NULL,
+  title           TEXT,
+  content         TEXT,
+  domain_name     TEXT,
+  preview_picture TEXT,
+  language        TEXT,
+  reading_time    INTEGER NOT NULL DEFAULT 0,
+  is_archived     INTEGER NOT NULL DEFAULT 0,
+  is_starred      INTEGER NOT NULL DEFAULT 0,
+  published_at    INTEGER,
+  archived_at     INTEGER,
+  starred_at      INTEGER,
+  created_at      INTEGER NOT NULL DEFAULT (unixepoch()),
+  updated_at      INTEGER NOT NULL DEFAULT (unixepoch())
+);
+
+CREATE INDEX IF NOT EXISTS idx_entries_user_id     ON entries(user_id);
+CREATE INDEX IF NOT EXISTS idx_entries_is_archived ON entries(user_id, is_archived);
+CREATE INDEX IF NOT EXISTS idx_entries_is_starred  ON entries(user_id, is_starred);
+CREATE INDEX IF NOT EXISTS idx_entries_hashed_url  ON entries(user_id, hashed_url);
+
+CREATE TABLE IF NOT EXISTS tags (
+  id      INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  label   TEXT    NOT NULL,
+  slug    TEXT    NOT NULL,
+  UNIQUE(user_id, slug)
+);
+
+CREATE TABLE IF NOT EXISTS entries_tags (
+  entry_id INTEGER NOT NULL REFERENCES entries(id) ON DELETE CASCADE,
+  tag_id   INTEGER NOT NULL REFERENCES tags(id)    ON DELETE CASCADE,
+  PRIMARY KEY (entry_id, tag_id)
+);
+`);
+
+// ── Seed: create default user + client from env ───────────────────────────────
+
+function hashPassword(password, salt) {
+  return crypto.scryptSync(password, salt, 64).toString('hex');
+}
+
+function verifyPassword(password, hash, salt) {
+  return crypto.timingSafeEqual(
+    Buffer.from(hashPassword(password, salt), 'hex'),
+    Buffer.from(hash, 'hex')
+  );
+}
+
+function randomToken() {
+  return crypto.randomBytes(32).toString('hex');
+}
+
+function slugify(str) {
+  return str.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+// Seed admin user if ADMIN_USERNAME/ADMIN_PASSWORD set and no users exist
+const adminUsername = process.env.ADMIN_USERNAME;
+const adminPassword = process.env.ADMIN_PASSWORD;
+
+if (adminUsername && adminPassword) {
+  const existing = db.prepare('SELECT id FROM users WHERE username = ?').get(adminUsername);
+  if (!existing) {
+    const salt = crypto.randomBytes(16).toString('hex');
+    const hash = hashPassword(adminPassword, salt);
+    db.prepare('INSERT OR IGNORE INTO users (username, password_hash, salt) VALUES (?, ?, ?)')
+      .run(adminUsername, hash, salt);
+    console.log(`[db] Created admin user: ${adminUsername}`);
+  }
+}
+
+// Seed default OAuth2 client
+const clientId     = process.env.ADMIN_CLIENT_ID     || 'bagg_ios';
+const clientSecret = process.env.ADMIN_CLIENT_SECRET || 'bagg_secret';
+db.prepare('INSERT OR IGNORE INTO oauth_clients (client_id, client_secret) VALUES (?, ?)')
+  .run(clientId, clientSecret);
+
+// ── User queries ──────────────────────────────────────────────────────────────
+
+function getUserByUsername(username) {
+  return db.prepare('SELECT * FROM users WHERE username = ?').get(username);
+}
+
+function getUserById(id) {
+  return db.prepare('SELECT id, username, created_at FROM users WHERE id = ?').get(id);
+}
+
+// ── Web session queries ───────────────────────────────────────────────────────
+
+function createWebSession(userId) {
+  const token = randomToken();
+  const expiresAt = Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 30; // 30 days
+  db.prepare('INSERT INTO web_sessions (token, user_id, expires_at) VALUES (?, ?, ?)')
+    .run(token, userId, expiresAt);
+  return token;
+}
+
+function getWebSession(token) {
+  const now = Math.floor(Date.now() / 1000);
+  return db.prepare(
+    'SELECT * FROM web_sessions WHERE token = ? AND expires_at > ?'
+  ).get(token, now);
+}
+
+function deleteWebSession(token) {
+  db.prepare('DELETE FROM web_sessions WHERE token = ?').run(token);
+}
+
+// ── OAuth client queries ──────────────────────────────────────────────────────
+
+function getOAuthClient(clientId, clientSecret) {
+  return db.prepare(
+    'SELECT * FROM oauth_clients WHERE client_id = ? AND client_secret = ?'
+  ).get(clientId, clientSecret);
+}
+
+// ── OAuth token queries ───────────────────────────────────────────────────────
+
+function createOAuthToken(accessToken, refreshToken, userId) {
+  const expiresAt = Math.floor(Date.now() / 1000) + 3600;
+  db.prepare(
+    'INSERT INTO oauth_tokens (access_token, refresh_token, user_id, expires_at) VALUES (?, ?, ?, ?)'
+  ).run(accessToken, refreshToken, userId, expiresAt);
+}
+
+function getTokenByAccessToken(token) {
+  const now = Math.floor(Date.now() / 1000);
+  return db.prepare(
+    'SELECT * FROM oauth_tokens WHERE access_token = ? AND expires_at > ?'
+  ).get(token, now);
+}
+
+function getTokenByRefreshToken(token) {
+  return db.prepare(
+    'SELECT * FROM oauth_tokens WHERE refresh_token = ?'
+  ).get(token);
+}
+
+function rotateOAuthToken(oldId, newAccess, newRefresh) {
+  const expiresAt = Math.floor(Date.now() / 1000) + 3600;
+  db.prepare('DELETE FROM oauth_tokens WHERE id = ?').run(oldId);
+  db.prepare(
+    'INSERT INTO oauth_tokens (access_token, refresh_token, user_id, expires_at) SELECT ?, ?, user_id, ? FROM oauth_tokens WHERE id = ?'
+  ).run(newAccess, newRefresh, expiresAt, oldId);
+  // oldId is gone, re-insert with the user_id from the deleted row -- use a different approach
+}
+
+// Fix: keep user_id available before deletion
+function rotateOAuthTokenFix(oldToken) {
+  const expiresAt = Math.floor(Date.now() / 1000) + 3600;
+  const newAccess  = randomToken();
+  const newRefresh = randomToken();
+  db.prepare('DELETE FROM oauth_tokens WHERE id = ?').run(oldToken.id);
+  db.prepare(
+    'INSERT INTO oauth_tokens (access_token, refresh_token, user_id, expires_at) VALUES (?, ?, ?, ?)'
+  ).run(newAccess, newRefresh, oldToken.user_id, expiresAt);
+  return { access_token: newAccess, refresh_token: newRefresh };
+}
+
+// ── Entry queries ─────────────────────────────────────────────────────────────
+
+function hashUrl(url) {
+  return crypto.createHash('sha1').update(url).digest('hex');
+}
+
+function extractDomain(url) {
+  try { return new URL(url).hostname.replace(/^www\./, ''); } catch { return null; }
+}
+
+const GET_ENTRIES = db.prepare(`
+  SELECT * FROM entries
+  WHERE user_id = :userId
+    AND (:archive IS NULL OR is_archived = :archive)
+    AND (:starred IS NULL OR is_starred = :starred)
+  ORDER BY
+    CASE WHEN :sort = 'created'  AND :order = 'desc' THEN created_at END DESC,
+    CASE WHEN :sort = 'created'  AND :order = 'asc'  THEN created_at END ASC,
+    CASE WHEN :sort = 'updated'  AND :order = 'desc' THEN updated_at END DESC,
+    CASE WHEN :sort = 'updated'  AND :order = 'asc'  THEN updated_at END ASC,
+    CASE WHEN :sort = 'id'       AND :order = 'desc' THEN id END DESC,
+    CASE WHEN :sort = 'id'       AND :order = 'asc'  THEN id END ASC,
+    created_at DESC
+  LIMIT :limit OFFSET :offset
+`);
+
+const COUNT_ENTRIES = db.prepare(`
+  SELECT COUNT(*) as count FROM entries
+  WHERE user_id = :userId
+    AND (:archive IS NULL OR is_archived = :archive)
+    AND (:starred IS NULL OR is_starred = :starred)
+`);
+
+function getEntries(userId, { page = 1, perPage = 30, archive, starred, sort = 'created', order = 'desc' } = {}) {
+  const archiveVal = archive !== undefined ? (archive === '1' || archive === 1 ? 1 : 0) : null;
+  const starredVal = starred !== undefined ? (starred === '1' || starred === 1 ? 1 : 0) : null;
+  const params = {
+    userId,
+    archive: archiveVal,
+    starred: starredVal,
+    sort,
+    order,
+    limit: +perPage,
+    offset: (+page - 1) * +perPage
+  };
+  const items = GET_ENTRIES.all(params);
+  const { count } = COUNT_ENTRIES.get(params);
+  return { items, total: count };
+}
+
+function getEntryById(id, userId) {
+  return db.prepare('SELECT * FROM entries WHERE id = ? AND user_id = ?').get(id, userId);
+}
+
+function entryExistsByUrl(url, userId) {
+  const hash = hashUrl(url);
+  return db.prepare('SELECT id FROM entries WHERE hashed_url = ? AND user_id = ?').get(hash, userId);
+}
+
+function createEntry(userId, { url, title, content, is_archived = 0, is_starred = 0, tags }) {
+  const domain = extractDomain(url);
+  const hash = hashUrl(url);
+  const now = Math.floor(Date.now() / 1000);
+  const result = db.prepare(`
+    INSERT INTO entries (user_id, url, hashed_url, title, content, domain_name, is_archived, is_starred, created_at, updated_at)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(userId, url, hash, title || null, content || null, domain, +!!is_archived, +!!is_starred, now, now);
+  return getEntryById(result.lastInsertRowid, userId);
+}
+
+function updateEntry(id, userId, fields) {
+  const entry = getEntryById(id, userId);
+  if (!entry) return null;
+
+  const now = Math.floor(Date.now() / 1000);
+  const updates = [];
+  const values = [];
+
+  if (fields.title    !== undefined) { updates.push('title = ?');       values.push(fields.title); }
+  if (fields.content  !== undefined) { updates.push('content = ?');     values.push(fields.content); }
+  if (fields.language !== undefined) { updates.push('language = ?');    values.push(fields.language); }
+  if (fields.is_archived !== undefined) {
+    updates.push('is_archived = ?');
+    values.push(+!!fields.is_archived);
+    updates.push('archived_at = ?');
+    values.push(fields.is_archived ? now : null);
+  }
+  if (fields.is_starred !== undefined) {
+    updates.push('is_starred = ?');
+    values.push(+!!fields.is_starred);
+    updates.push('starred_at = ?');
+    values.push(fields.is_starred ? now : null);
+  }
+  if (updates.length === 0) return entry;
+
+  updates.push('updated_at = ?');
+  values.push(now);
+  values.push(id, userId);
+
+  db.prepare(`UPDATE entries SET ${updates.join(', ')} WHERE id = ? AND user_id = ?`).run(...values);
+  return getEntryById(id, userId);
+}
+
+function deleteEntry(id, userId) {
+  return db.prepare('DELETE FROM entries WHERE id = ? AND user_id = ?').run(id, userId).changes > 0;
+}
+
+// ── Tag queries ───────────────────────────────────────────────────────────────
+
+function getTagsForEntry(entryId) {
+  return db.prepare(`
+    SELECT t.* FROM tags t
+    JOIN entries_tags et ON et.tag_id = t.id
+    WHERE et.entry_id = ?
+  `).all(entryId);
+}
+
+function getAllTags(userId) {
+  return db.prepare('SELECT * FROM tags WHERE user_id = ? ORDER BY label').all(userId);
+}
+
+function getOrCreateTag(userId, label) {
+  const slug = slugify(label);
+  const existing = db.prepare('SELECT * FROM tags WHERE user_id = ? AND slug = ?').get(userId, slug);
+  if (existing) return existing;
+  const result = db.prepare('INSERT INTO tags (user_id, label, slug) VALUES (?, ?, ?)').run(userId, label, slug);
+  return { id: result.lastInsertRowid, user_id: userId, label, slug };
+}
+
+function addTagToEntry(entryId, tagId) {
+  db.prepare('INSERT OR IGNORE INTO entries_tags (entry_id, tag_id) VALUES (?, ?)').run(entryId, tagId);
+}
+
+function removeTagFromEntry(entryId, tagId) {
+  return db.prepare('DELETE FROM entries_tags WHERE entry_id = ? AND tag_id = ?').run(entryId, tagId).changes > 0;
+}
+
+// ── Exports ───────────────────────────────────────────────────────────────────
+
+module.exports = {
+  hashPassword,
+  verifyPassword,
+  randomToken,
+  getUserByUsername,
+  getUserById,
+  createWebSession,
+  getWebSession,
+  deleteWebSession,
+  getOAuthClient,
+  createOAuthToken,
+  getTokenByAccessToken,
+  getTokenByRefreshToken,
+  rotateOAuthTokenFix,
+  getEntries,
+  getEntryById,
+  entryExistsByUrl,
+  createEntry,
+  updateEntry,
+  deleteEntry,
+  getTagsForEntry,
+  getAllTags,
+  getOrCreateTag,
+  addTagToEntry,
+  removeTagFromEntry,
+  hashUrl,
+};
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,36 @@
+services:
+  app:
+    image: node:22-bookworm-slim
+    working_dir: /app
+    environment:
+      PORT: "3000"
+      DATABASE_PATH: /data/bagg.sqlite
+      NODE_ENV: production
+      ADMIN_USERNAME: ${ADMIN_USERNAME:-admin}
+      ADMIN_PASSWORD: ${ADMIN_PASSWORD:-changeme_please}
+      ADMIN_CLIENT_ID: ${ADMIN_CLIENT_ID:-bagg_ios}
+      ADMIN_CLIENT_SECRET: ${ADMIN_CLIENT_SECRET:-bagg_secret}
+    labels:
+      fibe.gg/repo_url: https://git-next.fibe.live/viktorvsk/bagg
+      fibe.gg/source_mount: /app
+      fibe.gg/start_command: >
+        sh -c "apt-get update -qq && apt-get install -y --no-install-recommends python3 make g++ 2>/dev/null;
+        npm install --omit=dev --silent &&
+        node server.js"
+      fibe.gg/expose: external:3000
+      fibe.gg/production: "false"
+      fibe.gg/healthcheck_path: /api/v1/version
+      fibe.gg/healthcheck_interval: 15s
+      fibe.gg/healthcheck_timeout: 5s
+      fibe.gg/healthcheck_retries: "5"
+      fibe.gg/healthcheck_start_period: 90s
+    volumes:
+      - bagg-data:/data
+
+volumes:
+  bagg-data:
+
+x-fibe.gg:
+  metadata:
+    description: Wallabag-compatible read-later service with PWA frontend
+    category: Web
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
+{
+  "name": "bagg",
+  "version": "0.1.0",
+  "description": "Wallabag-compatible read-later service",
+  "main": "server.js",
+  "engines": { "node": ">=20" },
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.6.0",
+    "express": "^4.19.2"
+  }
+}
--- a/public/app.js
+++ b/public/app.js
@ -0,0 +1,383 @@
+'use strict';
+
+// ── Theme ─────────────────────────────────────────────────────────────────────
+
+const savedTheme = localStorage.getItem('bagg_theme');
+if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);
+
+function isDark() {
+  const t = document.documentElement.getAttribute('data-theme');
+  if (t === 'dark') return true;
+  if (t === 'light') return false;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function applyThemeIcons() {
+  const dark = isDark();
+  document.getElementById('icon-sun').style.display  = dark ? 'block' : 'none';
+  document.getElementById('icon-moon').style.display = dark ? 'none'  : 'block';
+}
+
+document.getElementById('btn-theme').addEventListener('click', () => {
+  const next = isDark() ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', next);
+  localStorage.setItem('bagg_theme', next);
+  applyThemeIcons();
+});
+
+applyThemeIcons();
+
+// ── Offline detection ─────────────────────────────────────────────────────────
+
+const offlineBanner = document.getElementById('offline-banner');
+function updateOnlineStatus() {
+  offlineBanner.classList.toggle('show', !navigator.onLine);
+}
+window.addEventListener('online',  updateOnlineStatus);
+window.addEventListener('offline', updateOnlineStatus);
+updateOnlineStatus();
+
+// ── Toast ─────────────────────────────────────────────────────────────────────
+
+function showToast(msg, duration = 2500) {
+  const el = document.createElement('div');
+  el.className = 'toast';
+  el.textContent = msg;
+  document.getElementById('toasts').appendChild(el);
+  setTimeout(() => el.remove(), duration);
+}
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+const state = {
+  filter: 'all',   // all | unread | starred | archived
+  page: 1,
+  pages: 1,
+  total: 0,
+  entries: [],
+  loading: false,
+};
+
+// ── Logout ────────────────────────────────────────────────────────────────────
+
+document.getElementById('btn-logout').addEventListener('click', async () => {
+  await fetch('/web/logout', { method: 'POST' });
+  location.href = '/login.html';
+});
+
+// ── Tab switching ─────────────────────────────────────────────────────────────
+
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    state.filter = btn.dataset.filter;
+    state.page = 1;
+    loadEntries();
+  });
+});
+
+// ── API helpers ───────────────────────────────────────────────────────────────
+
+async function apiFetch(path, opts = {}) {
+  const r = await fetch(path, {
+    headers: { 'Content-Type': 'application/json', ...(opts.headers || {}) },
+    ...opts,
+  });
+  if (r.status === 204) return null;
+  const data = await r.json();
+  if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`);
+  return data;
+}
+
+// ── Load entries ──────────────────────────────────────────────────────────────
+
+async function loadEntries() {
+  if (state.loading) return;
+  state.loading = true;
+  renderEntries();
+
+  const params = new URLSearchParams({ page: state.page, perPage: 50 });
+  if (state.filter === 'unread')   { params.set('archive', '0'); }
+  if (state.filter === 'archived') { params.set('archive', '1'); }
+  if (state.filter === 'starred')  { params.set('starred', '1'); }
+
+  try {
+    const data = await apiFetch(`/web/api/entries?${params}`);
+    state.entries = data.items;
+    state.page    = data.page;
+    state.pages   = data.pages;
+    state.total   = data.total;
+  } catch (e) {
+    showToast('Failed to load entries');
+  }
+
+  state.loading = false;
+  renderEntries();
+}
+
+// ── Render ────────────────────────────────────────────────────────────────────
+
+function timeAgo(isoStr) {
+  const secs = Math.floor((Date.now() - new Date(isoStr)) / 1000);
+  if (secs < 60)    return 'just now';
+  if (secs < 3600)  return `${Math.floor(secs / 60)}m ago`;
+  if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
+  if (secs < 86400 * 30) return `${Math.floor(secs / 86400)}d ago`;
+  return new Date(isoStr).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function faviconUrl(domain) {
+  if (!domain) return null;
+  return `https://www.google.com/s2/favicons?sz=32&domain=${encodeURIComponent(domain)}`;
+}
+
+function entryHTML(e) {
+  const domain = e.domain_name || '';
+  const title  = e.title || e.url;
+  const fav    = faviconUrl(domain);
+  const favHTML = fav
+    ? `<img src="${fav}" alt="" loading="lazy" onerror="this.style.display='none'">`
+    : domain.slice(0, 2).toUpperCase();
+
+  return `
+  <div class="entry-card ${e.is_archived ? 'archived' : ''}" data-id="${e.id}">
+    <div class="entry-favicon">${favHTML}</div>
+    <div class="entry-body">
+      <div class="entry-title"
+           title="${escHtml(title)}"
+           onclick="window.open('${escHtml(e.url)}','_blank','noopener')"
+           style="cursor:pointer"
+      >${escHtml(title)}</div>
+      <div class="entry-meta">
+        ${domain ? `<span class="entry-domain">${escHtml(domain)}</span>` : ''}
+        <span>${timeAgo(e.created_at)}</span>
+        ${e.reading_time > 0 ? `<span>${e.reading_time} min</span>` : ''}
+      </div>
+    </div>
+    <div class="entry-actions">
+      <button class="action-btn ${e.is_starred ? 'active-star' : ''}"
+              data-action="star" data-id="${e.id}"
+              title="${e.is_starred ? 'Unstar' : 'Star'}"
+              aria-label="${e.is_starred ? 'Unstar' : 'Star'}">
+        <svg width="15" height="15" fill="${e.is_starred ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
+        </svg>
+      </button>
+      <button class="action-btn ${e.is_archived ? 'active-archive' : ''}"
+              data-action="archive" data-id="${e.id}"
+              title="${e.is_archived ? 'Unarchive' : 'Archive'}"
+              aria-label="${e.is_archived ? 'Unarchive' : 'Archive'}">
+        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/>
+        </svg>
+      </button>
+      <button class="action-btn danger"
+              data-action="delete" data-id="${e.id}"
+              title="Delete" aria-label="Delete">
+        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/>
+        </svg>
+      </button>
+    </div>
+  </div>`;
+}
+
+function renderEntries() {
+  const container = document.getElementById('entries-container');
+
+  if (state.loading) {
+    container.innerHTML = `<div class="loading"><div class="spinner"></div><p>Loading…</p></div>`;
+    return;
+  }
+
+  if (state.entries.length === 0) {
+    const msgs = {
+      all:      ['No links saved yet.', 'Tap + to save your first link.'],
+      unread:   ['Nothing to read.',    'Links you haven\'t archived appear here.'],
+      starred:  ['No starred links.',   'Star important links to find them quickly.'],
+      archived: ['Nothing archived.',   'Archived links live here.'],
+    };
+    const [title, sub] = msgs[state.filter] || msgs.all;
+    container.innerHTML = `
+      <div class="empty-state">
+        <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
+        </svg>
+        <p>${title}</p>
+        <small>${sub}</small>
+      </div>`;
+    return;
+  }
+
+  let html = '<div class="entries-list">' + state.entries.map(entryHTML).join('') + '</div>';
+
+  if (state.pages > 1) {
+    html += `
+      <div class="pagination">
+        <button class="page-btn" id="btn-prev" ${state.page <= 1 ? 'disabled' : ''}>Prev</button>
+        <span class="page-info">${state.page} / ${state.pages}</span>
+        <button class="page-btn" id="btn-next" ${state.page >= state.pages ? 'disabled' : ''}>Next</button>
+      </div>`;
+  }
+
+  container.innerHTML = html;
+
+  // Pagination
+  container.querySelector('#btn-prev')?.addEventListener('click', () => { state.page--; loadEntries(); });
+  container.querySelector('#btn-next')?.addEventListener('click', () => { state.page++; loadEntries(); });
+
+  // Entry actions (event delegation)
+  container.addEventListener('click', handleEntryAction);
+}
+
+function escHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+// ── Entry actions ─────────────────────────────────────────────────────────────
+
+async function handleEntryAction(e) {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+
+  const id     = +btn.dataset.id;
+  const action = btn.dataset.action;
+  const entry  = state.entries.find(en => en.id === id);
+  if (!entry) return;
+
+  if (action === 'star') {
+    try {
+      const updated = await apiFetch(`/web/api/entries/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ is_starred: entry.is_starred ? 0 : 1 }),
+      });
+      Object.assign(entry, updated);
+      renderEntries();
+    } catch { showToast('Failed to update'); }
+  }
+
+  if (action === 'archive') {
+    try {
+      const updated = await apiFetch(`/web/api/entries/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ is_archived: entry.is_archived ? 0 : 1 }),
+      });
+      Object.assign(entry, updated);
+      // Remove from current view if filter doesn't match
+      if (state.filter === 'unread'   &&  updated.is_archived) state.entries = state.entries.filter(en => en.id !== id);
+      if (state.filter === 'archived' && !updated.is_archived) state.entries = state.entries.filter(en => en.id !== id);
+      renderEntries();
+      showToast(updated.is_archived ? 'Archived' : 'Moved to unread');
+    } catch { showToast('Failed to update'); }
+  }
+
+  if (action === 'delete') {
+    if (!confirm('Delete this link?')) return;
+    try {
+      await apiFetch(`/web/api/entries/${id}`, { method: 'DELETE' });
+      state.entries = state.entries.filter(en => en.id !== id);
+      renderEntries();
+      showToast('Deleted');
+    } catch { showToast('Failed to delete'); }
+  }
+}
+
+// ── Add link modal ────────────────────────────────────────────────────────────
+
+const modalAdd    = document.getElementById('modal-add');
+const inputUrl    = document.getElementById('input-url');
+const inputTitle  = document.getElementById('input-title');
+
+document.getElementById('btn-add').addEventListener('click', () => {
+  modalAdd.classList.add('open');
+  inputUrl.value   = '';
+  inputTitle.value = '';
+  setTimeout(() => inputUrl.focus(), 50);
+});
+
+document.getElementById('btn-modal-cancel').addEventListener('click', closeModal);
+
+modalAdd.addEventListener('click', e => {
+  if (e.target === modalAdd) closeModal();
+});
+
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') closeModal();
+});
+
+function closeModal() {
+  modalAdd.classList.remove('open');
+}
+
+document.getElementById('btn-modal-save').addEventListener('click', saveLink);
+
+inputUrl.addEventListener('keydown', e => { if (e.key === 'Enter') saveLink(); });
+
+async function saveLink() {
+  const url   = inputUrl.value.trim();
+  const title = inputTitle.value.trim();
+  if (!url) { inputUrl.focus(); return; }
+
+  // Basic URL sanity
+  try { new URL(url); } catch {
+    showToast('Invalid URL');
+    inputUrl.focus();
+    return;
+  }
+
+  const btn = document.getElementById('btn-modal-save');
+  btn.disabled = true;
+  btn.textContent = 'Saving…';
+
+  try {
+    const entry = await apiFetch('/web/api/entries', {
+      method: 'POST',
+      body: JSON.stringify({ url, title: title || undefined }),
+    });
+    closeModal();
+    showToast('Saved!');
+    // Prepend to list if on 'all' or 'unread' filter
+    if (state.filter === 'all' || state.filter === 'unread') {
+      state.entries.unshift(entry);
+      state.total++;
+      renderEntries();
+    }
+  } catch (e) {
+    if (e.message?.includes('Already')) {
+      showToast('Already saved');
+      closeModal();
+    } else {
+      showToast('Failed to save');
+    }
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Save';
+  }
+}
+
+// ── Service Worker ────────────────────────────────────────────────────────────
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js').catch(() => {});
+}
+
+// ── PWA install prompt ────────────────────────────────────────────────────────
+
+let deferredPrompt = null;
+window.addEventListener('beforeinstallprompt', e => {
+  e.preventDefault();
+  deferredPrompt = e;
+  // Show subtle install hint after a delay
+  setTimeout(() => {
+    if (deferredPrompt) showToast('Tip: add bagg to your home screen', 4000);
+  }, 8000);
+});
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+
+loadEntries();
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>bagg</title>
+  <link rel="stylesheet" href="/style.css">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#2563eb" id="theme-color-meta">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="bagg">
+  <link rel="apple-touch-icon" href="/icons/icon-192.png">
+</head>
+<body>
+
+<div class="offline-banner" id="offline-banner">You're offline — showing cached data</div>
+
+<div id="app">
+  <nav class="navbar">
+    <div class="navbar-inner">
+      <span class="nav-brand">bagg</span>
+      <button class="nav-btn" id="btn-theme" title="Toggle theme" aria-label="Toggle theme">
+        <svg id="icon-sun" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        <svg id="icon-moon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+      <button class="nav-btn" id="btn-logout" title="Sign out" aria-label="Sign out">
+        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+      </button>
+    </div>
+  </nav>
+
+  <div class="tabs">
+    <div class="tabs-inner">
+      <button class="tab-btn active" data-filter="all">All</button>
+      <button class="tab-btn" data-filter="unread">Unread</button>
+      <button class="tab-btn" data-filter="starred">Starred</button>
+      <button class="tab-btn" data-filter="archived">Archived</button>
+    </div>
+  </div>
+
+  <main class="content">
+    <div id="entries-container">
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Loading…</p>
+      </div>
+    </div>
+  </main>
+</div>
+
+<!-- FAB -->
+<button class="fab" id="btn-add" title="Save a link" aria-label="Save a link">
+  <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+</button>
+
+<!-- Add link modal -->
+<div class="modal-overlay" id="modal-add" role="dialog" aria-modal="true" aria-label="Save a link">
+  <div class="modal">
+    <h2>Save a link</h2>
+    <label for="input-url">URL</label>
+    <input
+      type="url"
+      id="input-url"
+      placeholder="https://example.com/article"
+      inputmode="url"
+      autocomplete="url"
+      autocapitalize="none"
+      autocorrect="off"
+    >
+    <label for="input-title">Title <span style="color:var(--text3);font-weight:400">(optional)</span></label>
+    <input
+      type="text"
+      id="input-title"
+      placeholder="Leave empty to use page title"
+    >
+    <div class="modal-actions">
+      <button class="btn-secondary" id="btn-modal-cancel">Cancel</button>
+      <button class="btn-primary-sm" id="btn-modal-save">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- Toast container -->
+<div class="toast-container" id="toasts"></div>
+
+<script src="/app.js"></script>
+</body>
+</html>
--- a/public/login.html
+++ b/public/login.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign in — bagg</title>
+  <link rel="stylesheet" href="/style.css">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#2563eb">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="bagg">
+</head>
+<body>
+<div class="login-page">
+  <div class="login-card">
+    <h1>bagg</h1>
+    <p class="tagline">Read later, actually.</p>
+
+    <div id="error-msg" class="login-error" style="display:none">
+      Wrong username or password.
+    </div>
+
+    <form method="post" action="/web/login">
+      <label for="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        name="username"
+        autocomplete="username"
+        autocapitalize="none"
+        autocorrect="off"
+        spellcheck="false"
+        required
+        autofocus
+      >
+
+      <label for="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        name="password"
+        autocomplete="current-password"
+        required
+      >
+
+      <button type="submit" class="btn-primary">Sign in</button>
+    </form>
+  </div>
+</div>
+
+<script>
+  if (location.search.includes('error=1')) {
+    document.getElementById('error-msg').style.display = 'block';
+  }
+  // Detect dark mode pref stored in localStorage
+  const theme = localStorage.getItem('bagg_theme');
+  if (theme) document.documentElement.setAttribute('data-theme', theme);
+</script>
+</body>
+</html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,33 @@
+{
+  "name": "bagg",
+  "short_name": "bagg",
+  "description": "Read later, actually.",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "background_color": "#f8f8f6",
+  "theme_color": "#2563eb",
+  "icons": [
+    {
+      "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%232563eb'/%3E%3Cpath d='M30 20h40a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5H30a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5z' fill='white' opacity='.9'/%3E%3Cline x1='35' y1='38' x2='65' y2='38' stroke='%232563eb' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='35' y1='50' x2='65' y2='50' stroke='%232563eb' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='35' y1='62' x2='52' y2='62' stroke='%232563eb' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "screenshots": [],
+  "categories": ["productivity", "utilities"],
+  "prefer_related_applications": false
+}
--- a/public/style.css
+++ b/public/style.css
@ -0,0 +1,513 @@
+/* ── Variables ─────────────────────────────────────────────────────────────── */
+:root {
+  --bg:        #f8f8f6;
+  --bg2:       #ffffff;
+  --bg3:       #eeecea;
+  --border:    #e0ddd8;
+  --text:      #1a1916;
+  --text2:     #6b6860;
+  --text3:     #9b9890;
+  --accent:    #2563eb;
+  --accent-h:  #1d4ed8;
+  --danger:    #dc2626;
+  --star:      #f59e0b;
+  --radius:    10px;
+  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
+  --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
+  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --transition: .15s ease;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg:     #141413;
+    --bg2:    #1e1e1c;
+    --bg3:    #2a2a28;
+    --border: #333330;
+    --text:   #f0ede8;
+    --text2:  #9b9890;
+    --text3:  #6b6860;
+    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
+  }
+}
+
+[data-theme="dark"] {
+  --bg:     #141413;
+  --bg2:    #1e1e1c;
+  --bg3:    #2a2a28;
+  --border: #333330;
+  --text:   #f0ede8;
+  --text2:  #9b9890;
+  --text3:  #6b6860;
+  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
+}
+
+/* ── Reset ─────────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; -webkit-text-size-adjust: 100%; }
+body {
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100dvh;
+  line-height: 1.5;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+button {
+  font-family: var(--font);
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+input {
+  font-family: var(--font);
+  font-size: 1rem;
+  background: var(--bg2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: .5rem .75rem;
+  outline: none;
+  width: 100%;
+  transition: border-color var(--transition);
+}
+input:focus { border-color: var(--accent); }
+
+/* ── Login Page ────────────────────────────────────────────────────────────── */
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: 1.5rem;
+}
+
+.login-card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  box-shadow: var(--shadow-lg);
+  padding: 2.5rem 2rem;
+  width: 100%;
+  max-width: 360px;
+}
+
+.login-card h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: -.03em;
+  margin-bottom: .25rem;
+}
+
+.login-card .tagline {
+  color: var(--text2);
+  font-size: .9rem;
+  margin-bottom: 2rem;
+}
+
+.login-card label {
+  display: block;
+  font-size: .85rem;
+  font-weight: 500;
+  color: var(--text2);
+  margin-bottom: .35rem;
+  margin-top: 1rem;
+}
+
+.login-card label:first-of-type { margin-top: 0; }
+
+.btn-primary {
+  display: block;
+  width: 100%;
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--radius);
+  padding: .65rem 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  transition: background var(--transition);
+  margin-top: 1.5rem;
+}
+.btn-primary:hover { background: var(--accent-h); }
+
+.login-error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--danger);
+  border-radius: var(--radius);
+  padding: .6rem .85rem;
+  font-size: .875rem;
+  margin-bottom: 1rem;
+}
+
+[data-theme="dark"] .login-error {
+  background: #3b1515;
+  border-color: #7f1d1d;
+}
+
+/* ── App Layout ────────────────────────────────────────────────────────────── */
+#app { display: flex; flex-direction: column; min-height: 100dvh; }
+
+.navbar {
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 0 1rem;
+}
+
+.navbar-inner {
+  max-width: 720px;
+  margin: 0 auto;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+}
+
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.1rem;
+  letter-spacing: -.03em;
+  color: var(--text);
+  flex: 1;
+}
+
+.nav-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text2);
+  transition: background var(--transition), color var(--transition);
+}
+.nav-btn:hover { background: var(--bg3); color: var(--text); }
+
+/* ── Filter tabs ───────────────────────────────────────────────────────────── */
+.tabs {
+  background: var(--bg2);
+  border-bottom: 1px solid var(--border);
+  padding: 0 1rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.tabs::-webkit-scrollbar { display: none; }
+
+.tabs-inner {
+  max-width: 720px;
+  margin: 0 auto;
+  display: flex;
+  gap: 0;
+}
+
+.tab-btn {
+  padding: .65rem 1rem;
+  font-size: .875rem;
+  font-weight: 500;
+  color: var(--text2);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  transition: color var(--transition), border-color var(--transition);
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* ── Entry list ────────────────────────────────────────────────────────────── */
+.content {
+  flex: 1;
+  padding: .75rem 1rem;
+  max-width: 720px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.entries-list {
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+}
+
+.entry-card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: .85rem 1rem;
+  display: flex;
+  align-items: flex-start;
+  gap: .75rem;
+  box-shadow: var(--shadow);
+  transition: box-shadow var(--transition);
+  position: relative;
+}
+.entry-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
+.entry-card.archived { opacity: .55; }
+
+.entry-favicon {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--bg3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: .65rem;
+  color: var(--text3);
+  overflow: hidden;
+}
+.entry-favicon img { width: 100%; height: 100%; object-fit: cover; }
+
+.entry-body { flex: 1; min-width: 0; }
+
+.entry-title {
+  font-size: .9375rem;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.35;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: .2rem;
+}
+
+.entry-meta {
+  font-size: .78rem;
+  color: var(--text3);
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  flex-wrap: wrap;
+}
+
+.entry-domain { color: var(--accent); font-weight: 500; }
+
+.entry-actions {
+  display: flex;
+  align-items: center;
+  gap: .15rem;
+  flex-shrink: 0;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text3);
+  transition: background var(--transition), color var(--transition);
+  font-size: .8rem;
+}
+.action-btn:hover { background: var(--bg3); color: var(--text); }
+.action-btn.active-star { color: var(--star); }
+.action-btn.active-archive { color: var(--accent); }
+.action-btn.danger:hover { color: var(--danger); background: #fef2f2; }
+
+[data-theme="dark"] .action-btn.danger:hover { background: #3b1515; }
+
+/* ── Empty state ───────────────────────────────────────────────────────────── */
+.empty-state {
+  text-align: center;
+  padding: 4rem 1rem;
+  color: var(--text3);
+}
+.empty-state svg { margin-bottom: 1rem; opacity: .4; }
+.empty-state p { font-size: 1rem; }
+.empty-state small { font-size: .85rem; }
+
+/* ── Loading ───────────────────────────────────────────────────────────────── */
+.loading {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--text3);
+}
+.spinner {
+  width: 28px; height: 28px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+  margin: 0 auto 1rem;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── FAB ───────────────────────────────────────────────────────────────────── */
+.fab {
+  position: fixed;
+  bottom: calc(1.5rem + env(safe-area-inset-bottom));
+  right: 1.5rem;
+  width: 52px;
+  height: 52px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 4px 14px rgba(37,99,235,.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+  transition: background var(--transition), transform var(--transition);
+  z-index: 200;
+}
+.fab:hover { background: var(--accent-h); transform: scale(1.05); }
+.fab:active { transform: scale(.96); }
+
+/* ── Modal ─────────────────────────────────────────────────────────────────── */
+.modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.45);
+  z-index: 300;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.modal-overlay.open { display: flex; }
+
+.modal {
+  background: var(--bg2);
+  border-radius: 16px 16px 0 0;
+  padding: 1.5rem 1.25rem;
+  width: 100%;
+  max-width: 540px;
+  animation: slide-up .22s ease;
+}
+
+@media (min-width: 540px) {
+  .modal-overlay { align-items: center; padding: 1rem; }
+  .modal { border-radius: 16px; }
+}
+
+@keyframes slide-up {
+  from { transform: translateY(24px); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+}
+
+.modal h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  gap: .75rem;
+  margin-top: 1.25rem;
+}
+
+.btn-secondary {
+  flex: 1;
+  padding: .6rem 1rem;
+  background: var(--bg3);
+  border-radius: var(--radius);
+  font-size: .9375rem;
+  font-weight: 500;
+  text-align: center;
+  transition: background var(--transition);
+}
+.btn-secondary:hover { background: var(--border); }
+
+.btn-primary-sm {
+  flex: 1;
+  padding: .6rem 1rem;
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--radius);
+  font-size: .9375rem;
+  font-weight: 600;
+  text-align: center;
+  transition: background var(--transition);
+}
+.btn-primary-sm:hover { background: var(--accent-h); }
+
+.modal label {
+  display: block;
+  font-size: .85rem;
+  font-weight: 500;
+  color: var(--text2);
+  margin-bottom: .4rem;
+  margin-top: .9rem;
+}
+.modal label:first-of-type { margin-top: 0; }
+
+/* ── Toast ─────────────────────────────────────────────────────────────────── */
+.toast-container {
+  position: fixed;
+  bottom: calc(5rem + env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .5rem;
+  pointer-events: none;
+}
+
+.toast {
+  background: var(--text);
+  color: var(--bg);
+  padding: .6rem 1.1rem;
+  border-radius: 100px;
+  font-size: .875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  animation: toast-in .2s ease;
+  pointer-events: auto;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Offline banner ────────────────────────────────────────────────────────── */
+.offline-banner {
+  display: none;
+  background: var(--text);
+  color: var(--bg);
+  text-align: center;
+  font-size: .8rem;
+  padding: .4rem;
+  font-weight: 500;
+}
+.offline-banner.show { display: block; }
+
+/* ── Pagination ────────────────────────────────────────────────────────────── */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: .5rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.page-btn {
+  padding: .45rem .9rem;
+  border-radius: 8px;
+  font-size: .875rem;
+  font-weight: 500;
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  color: var(--text2);
+  transition: background var(--transition), color var(--transition);
+}
+.page-btn:hover:not(:disabled) { background: var(--bg3); color: var(--text); }
+.page-btn:disabled { opacity: .4; cursor: default; }
+.page-info { font-size: .8rem; color: var(--text3); }
--- a/public/sw.js
+++ b/public/sw.js
@ -0,0 +1,72 @@
+const CACHE_NAME = 'bagg-v1';
+const STATIC_ASSETS = [
+  '/login.html',
+  '/style.css',
+  '/app.js',
+  '/manifest.json',
+];
+
+// ── Install: cache static assets ─────────────────────────────────────────────
+self.addEventListener('install', e => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+// ── Activate: clean old caches ────────────────────────────────────────────────
+self.addEventListener('activate', e => {
+  e.waitUntil(
+    caches.keys().then(keys =>
+      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+// ── Fetch strategy ────────────────────────────────────────────────────────────
+self.addEventListener('fetch', e => {
+  const { request } = e;
+  const url = new URL(request.url);
+
+  // Skip non-GET and cross-origin requests
+  if (request.method !== 'GET' || url.origin !== location.origin) return;
+
+  // API requests: network-first, no cache
+  if (url.pathname.startsWith('/web/api/') || url.pathname.startsWith('/api/')) {
+    e.respondWith(fetch(request).catch(() => new Response('{"error":"offline"}', {
+      headers: { 'Content-Type': 'application/json' }
+    })));
+    return;
+  }
+
+  // Static assets: cache-first
+  if (STATIC_ASSETS.includes(url.pathname) || url.pathname.startsWith('/icons/')) {
+    e.respondWith(
+      caches.match(request).then(cached => cached || fetch(request).then(res => {
+        if (res.ok) {
+          const clone = res.clone();
+          caches.open(CACHE_NAME).then(c => c.put(request, clone));
+        }
+        return res;
+      }))
+    );
+    return;
+  }
+
+  // Navigation (HTML pages): network-first, fallback to cache
+  if (request.mode === 'navigate') {
+    e.respondWith(
+      fetch(request)
+        .then(res => {
+          if (res.ok) {
+            const clone = res.clone();
+            caches.open(CACHE_NAME).then(c => c.put(request, clone));
+          }
+          return res;
+        })
+        .catch(() => caches.match(request).then(cached => cached || caches.match('/login.html')))
+    );
+    return;
+  }
+});
--- a/server.js
+++ b/server.js
@ -0,0 +1,297 @@
+'use strict';
+
+const express = require('express');
+const path    = require('path');
+const crypto  = require('crypto');
+const db      = require('./db');
+
+const app  = express();
+const PORT = process.env.PORT || 3000;
+
+// ── Middleware ────────────────────────────────────────────────────────────────
+
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+app.use(express.static(path.join(__dirname, 'public')));
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function parseCookies(header = '') {
+  return Object.fromEntries(
+    header.split(';')
+      .map(c => c.trim().split('='))
+      .filter(p => p.length === 2)
+      .map(([k, v]) => [k.trim(), decodeURIComponent(v.trim())])
+  );
+}
+
+function formatEntry(row) {
+  const tags = db.getTagsForEntry(row.id);
+  return {
+    id: row.id,
+    uid: null,
+    title: row.title || row.url,
+    url: row.url,
+    hashed_url: row.hashed_url,
+    origin_url: null,
+    is_archived: row.is_archived,
+    is_starred: row.is_starred,
+    content: row.content,
+    created_at: new Date(row.created_at * 1000).toISOString(),
+    updated_at: new Date(row.updated_at * 1000).toISOString(),
+    published_at: row.published_at ? new Date(row.published_at * 1000).toISOString() : null,
+    published_by: null,
+    starred_at: row.starred_at ? new Date(row.starred_at * 1000).toISOString() : null,
+    archived_at: row.archived_at ? new Date(row.archived_at * 1000).toISOString() : null,
+    annotations: [],
+    mimetype: null,
+    language: row.language || null,
+    reading_time: row.reading_time || 0,
+    domain_name: row.domain_name || null,
+    preview_picture: row.preview_picture || null,
+    tags: tags.map(t => ({ id: t.id, label: t.label, slug: t.slug })),
+    _links: { self: { href: `/api/v1/entries/${row.id}` } }
+  };
+}
+
+// ── API auth middleware ───────────────────────────────────────────────────────
+
+function apiAuth(req, res, next) {
+  const auth = req.headers.authorization || '';
+  if (!auth.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'unauthorized', error_description: 'Missing or invalid token' });
+  }
+  const tokenData = db.getTokenByAccessToken(auth.slice(7));
+  if (!tokenData) {
+    return res.status(401).json({ error: 'unauthorized', error_description: 'Token invalid or expired' });
+  }
+  req.userId = tokenData.user_id;
+  next();
+}
+
+// ── Web session auth middleware ───────────────────────────────────────────────
+
+function webAuth(req, res, next) {
+  const cookies = parseCookies(req.headers.cookie);
+  const session = cookies.bagg_session ? db.getWebSession(cookies.bagg_session) : null;
+  if (!session) {
+    return res.redirect('/login.html');
+  }
+  req.userId   = session.user_id;
+  req.user     = db.getUserById(session.user_id);
+  req.sessionToken = cookies.bagg_session;
+  next();
+}
+
+// ── Wallabag API: auth ────────────────────────────────────────────────────────
+
+app.get('/api/v1/version', (req, res) => {
+  res.json({ major: 2, minor: 6, patch: 0 });
+});
+
+app.post('/api/v1/oauth/v2/token', (req, res) => {
+  const { grant_type, username, password, client_id, client_secret, refresh_token } = req.body;
+
+  if (grant_type === 'password') {
+    const user = username ? db.getUserByUsername(username) : null;
+    if (!user || !db.verifyPassword(password, user.password_hash, user.salt)) {
+      return res.status(401).json({ error: 'invalid_credentials', error_description: 'Bad credentials' });
+    }
+    const client = db.getOAuthClient(client_id, client_secret);
+    if (!client) {
+      return res.status(401).json({ error: 'invalid_client', error_description: 'Unknown client' });
+    }
+    const access  = crypto.randomBytes(32).toString('hex');
+    const refresh = crypto.randomBytes(32).toString('hex');
+    db.createOAuthToken(access, refresh, user.id);
+    return res.json({ access_token: access, expires_in: 3600, token_type: 'bearer', scope: 'deposit', refresh_token: refresh });
+  }
+
+  if (grant_type === 'refresh_token') {
+    const old = refresh_token ? db.getTokenByRefreshToken(refresh_token) : null;
+    if (!old) {
+      return res.status(401).json({ error: 'invalid_grant', error_description: 'Refresh token not found' });
+    }
+    const { access_token, refresh_token: new_refresh } = db.rotateOAuthTokenFix(old);
+    return res.json({ access_token, expires_in: 3600, token_type: 'bearer', scope: 'deposit', refresh_token: new_refresh });
+  }
+
+  res.status(400).json({ error: 'unsupported_grant_type' });
+});
+
+// ── Wallabag API: entries ─────────────────────────────────────────────────────
+
+app.get('/api/v1/entries', apiAuth, (req, res) => {
+  const { page = 1, perPage = 30, archive, starred, sort = 'created', order = 'desc' } = req.query;
+  const { items, total } = db.getEntries(req.userId, { page, perPage, archive, starred, sort, order });
+  const pages = Math.max(1, Math.ceil(total / +perPage));
+
+  res.json({
+    _embedded: { items: items.map(formatEntry) },
+    _links: {
+      self:  { href: `/api/v1/entries?page=${page}` },
+      first: { href: `/api/v1/entries?page=1` },
+      last:  { href: `/api/v1/entries?page=${pages}` },
+      ...(+page < pages ? { next: { href: `/api/v1/entries?page=${+page + 1}` } } : {}),
+      ...(+page > 1     ? { prev: { href: `/api/v1/entries?page=${+page - 1}` } } : {})
+    },
+    page: +page,
+    limit: +perPage,
+    pages,
+    total
+  });
+});
+
+// Must be before /:id to avoid "exists" being parsed as an ID
+app.get('/api/v1/entries/exists', apiAuth, (req, res) => {
+  const { url, urls } = req.query;
+  if (urls) {
+    // Batch check
+    const list = Array.isArray(urls) ? urls : [urls];
+    const result = {};
+    for (const u of list) {
+      const exists = db.entryExistsByUrl(u, req.userId);
+      result[u] = exists ? { id: exists.id } : false;
+    }
+    return res.json(result);
+  }
+  if (!url) return res.status(400).json({ error: 'Missing url parameter' });
+  const exists = db.entryExistsByUrl(url, req.userId);
+  res.json(exists ? { id: exists.id } : false);
+});
+
+app.get('/api/v1/entries/:id', apiAuth, (req, res) => {
+  const entry = db.getEntryById(+req.params.id, req.userId);
+  if (!entry) return res.status(404).json({ error: 'Not Found' });
+  res.json(formatEntry(entry));
+});
+
+app.post('/api/v1/entries', apiAuth, (req, res) => {
+  const { url, title, content, tags, archive, starred } = req.body;
+  if (!url) return res.status(400).json({ error: 'url is required' });
+
+  const entry = db.createEntry(req.userId, { url, title, content, is_archived: archive, is_starred: starred });
+
+  // Handle tags
+  if (tags && Array.isArray(tags)) {
+    for (const label of tags) {
+      if (typeof label === 'string' && label.trim()) {
+        const tag = db.getOrCreateTag(req.userId, label.trim());
+        db.addTagToEntry(entry.id, tag.id);
+      }
+    }
+  }
+
+  res.status(200).json(formatEntry(db.getEntryById(entry.id, req.userId)));
+});
+
+app.patch('/api/v1/entries/:id', apiAuth, (req, res) => {
+  const updated = db.updateEntry(+req.params.id, req.userId, req.body);
+  if (!updated) return res.status(404).json({ error: 'Not Found' });
+  res.json(formatEntry(updated));
+});
+
+app.delete('/api/v1/entries/:id', apiAuth, (req, res) => {
+  const deleted = db.deleteEntry(+req.params.id, req.userId);
+  if (!deleted) return res.status(404).json({ error: 'Not Found' });
+  res.status(204).send();
+});
+
+// ── Wallabag API: tags ────────────────────────────────────────────────────────
+
+app.get('/api/v1/tags', apiAuth, (req, res) => {
+  const tags = db.getAllTags(req.userId);
+  res.json(tags.map(t => ({ id: t.id, label: t.label, slug: t.slug })));
+});
+
+app.post('/api/v1/entry/:id/tags', apiAuth, (req, res) => {
+  const entry = db.getEntryById(+req.params.id, req.userId);
+  if (!entry) return res.status(404).json({ error: 'Not Found' });
+  const { tags } = req.body;
+  const created = [];
+  if (Array.isArray(tags)) {
+    for (const label of tags) {
+      if (typeof label === 'string' && label.trim()) {
+        const tag = db.getOrCreateTag(req.userId, label.trim());
+        db.addTagToEntry(entry.id, tag.id);
+        created.push({ id: tag.id, label: tag.label, slug: tag.slug });
+      }
+    }
+  }
+  res.json(created);
+});
+
+app.delete('/api/v1/entry/:id/tag/:tagId', apiAuth, (req, res) => {
+  const removed = db.removeTagFromEntry(+req.params.id, +req.params.tagId);
+  if (!removed) return res.status(404).json({ error: 'Not Found' });
+  res.status(204).send();
+});
+
+// ── Web UI: auth endpoints ────────────────────────────────────────────────────
+
+app.post('/web/login', express.urlencoded({ extended: false }), (req, res) => {
+  const { username, password } = req.body;
+  const user = username ? db.getUserByUsername(username) : null;
+  if (!user || !db.verifyPassword(password, user.password_hash, user.salt)) {
+    return res.redirect('/login.html?error=1');
+  }
+  const token = db.createWebSession(user.id);
+  res.setHeader('Set-Cookie', `bagg_session=${encodeURIComponent(token)}; HttpOnly; SameSite=Strict; Path=/; Max-Age=${60 * 60 * 24 * 30}`);
+  res.redirect('/');
+});
+
+app.post('/web/logout', webAuth, (req, res) => {
+  db.deleteWebSession(req.sessionToken);
+  res.setHeader('Set-Cookie', 'bagg_session=; HttpOnly; SameSite=Strict; Path=/; Max-Age=0');
+  res.redirect('/login.html');
+});
+
+// ── Web UI: protected API (for frontend JS) ───────────────────────────────────
+
+app.get('/web/api/me', webAuth, (req, res) => {
+  res.json({ id: req.user.id, username: req.user.username });
+});
+
+app.get('/web/api/entries', webAuth, (req, res) => {
+  const { page = 1, perPage = 50, archive, starred, sort = 'created', order = 'desc' } = req.query;
+  const { items, total } = db.getEntries(req.userId, { page, perPage, archive, starred, sort, order });
+  const pages = Math.max(1, Math.ceil(total / +perPage));
+  res.json({
+    items: items.map(formatEntry),
+    page: +page, pages, total, perPage: +perPage
+  });
+});
+
+app.post('/web/api/entries', webAuth, express.json(), (req, res) => {
+  const { url, title } = req.body;
+  if (!url) return res.status(400).json({ error: 'url is required' });
+  const existing = db.entryExistsByUrl(url, req.userId);
+  if (existing) return res.status(409).json({ error: 'Already saved', id: existing.id });
+  const entry = db.createEntry(req.userId, { url, title });
+  res.status(201).json(formatEntry(entry));
+});
+
+app.patch('/web/api/entries/:id', webAuth, express.json(), (req, res) => {
+  const updated = db.updateEntry(+req.params.id, req.userId, req.body);
+  if (!updated) return res.status(404).json({ error: 'Not Found' });
+  res.json(formatEntry(updated));
+});
+
+app.delete('/web/api/entries/:id', webAuth, (req, res) => {
+  const deleted = db.deleteEntry(+req.params.id, req.userId);
+  if (!deleted) return res.status(404).json({ error: 'Not Found' });
+  res.status(204).send();
+});
+
+// ── Web UI: serve index for client-side routing ───────────────────────────────
+
+app.get('/', webAuth, (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+// ── Start ─────────────────────────────────────────────────────────────────────
+
+app.listen(PORT, '0.0.0.0', () => {
+  console.log(`[bagg] listening on :${PORT}`);
+  console.log(`[bagg] client_id=${process.env.ADMIN_CLIENT_ID || 'bagg_ios'}`);
+});