v2.0.5 — Read feature (mobile zen reader on the relay)

Per-card opt-in push to the relay for distraction-free mobile reading.
Not tag-based: a real cards.read_push column so the reading state
stays independent of whatever tags the user organises by.

hyprcrd
- cards.read_push column (0/1, default 0) via Database migration.
- POST /api/cards + PATCH /api/cards/{id} accept read_push; save hook
  posts the card (title+body, encrypted) and referenced images
  to the relay's /api/read endpoint. First inline image is flagged
  as the hero. Toggle-off / DELETE wipes the remote copy.
- Detail-bar toggle button ("Read" → "On relay") with filled book
  icon + inverted accent background when active; outline book icon
  in the bottom meta row of the board card when read_push=1.

relay
- read_items + read_attachments tables, encrypted under the
  inter-tenant key like messages (dual-format envelope).
- Client API: POST /api/read, DELETE /api/read/{uid}, POST
  /api/read-attachments. Session API: GET /api/read (list),
  GET /api/read/{uid} (single decrypted), GET /api/read-attachments/
  {uid}/{filename} (serves decrypted image bytes).
- Payload size caps raised to 15MB (attachments) / 2MB (items).
- New nav tab + view: list with thumbnails, click opens a zen reader
  overlay. Reader caps article width at 680px, bumps type to 17px/1.7,
  renders a minimal markdown subset (headings, lists, code fences,
  blockquotes, links, inline images), rewrites uploads/ references
  to the session-authed image endpoint. Escape closes the reader.
- Mobile-first: wider touch targets, tighter padding at ≤640px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

relay/inc/bootstrap.php

@@ -381,6 +381,39 @@ $db->exec('CREATE TABLE IF NOT EXISTS collab_card_locks (
 )');
 $db->exec('CREATE INDEX IF NOT EXISTS idx_collab_card_locks_expires ON collab_card_locks(expires_at)');
 
+// Read-later items: cards the tenant opted into sending to the relay for
+// distraction-free reading in the mobile zen view. Stored at-rest under the
+// inter-tenant key (same pattern as messages). Hard-deleted on removal —
+// no offline-sync need, the hyprcrd client is the source of truth.
+$db->exec('CREATE TABLE IF NOT EXISTS read_items (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    tenant_id INTEGER NOT NULL,
+    relay_uid TEXT NOT NULL,
+    title TEXT NOT NULL DEFAULT "",
+    body TEXT NOT NULL DEFAULT "",
+    hero_filename TEXT,
+    created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE (tenant_id, relay_uid),
+    FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
+)');
+$db->exec('CREATE INDEX IF NOT EXISTS idx_read_items_tenant_updated ON read_items(tenant_id, updated_at DESC)');
+
+// Read attachments (inline images referenced by read items). Encrypted blobs
+// scoped to a tenant + read_item. The reader UI serves these through a
+// session endpoint so the browser sees decrypted bytes.
+$db->exec('CREATE TABLE IF NOT EXISTS read_attachments (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    tenant_id INTEGER NOT NULL,
+    relay_uid TEXT NOT NULL,
+    filename TEXT NOT NULL,
+    data TEXT NOT NULL,
+    created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE (tenant_id, relay_uid, filename),
+    FOREIGN KEY (tenant_id) REFERENCES tenants(id) ON DELETE CASCADE
+)');
+$db->exec('CREATE INDEX IF NOT EXISTS idx_read_att_lookup ON read_attachments(tenant_id, relay_uid)');
+
 $db->exec('CREATE TABLE IF NOT EXISTS sessions (
     id TEXT PRIMARY KEY,
     tenant_id INTEGER NOT NULL,

relay/inc/routes/read.php

@@ -0,0 +1,182 @@
+<?php
+// Read-later routes:
+//   POST   /api/read                        (client API: upsert an item)
+//   DELETE /api/read/{uid}                  (client or session: remove)
+//   GET    /api/read                        (session: list own items)
+//   GET    /api/read/{uid}                  (session: one item, decrypted)
+//   POST   /api/read-attachments            (client API: upload image blob)
+//   GET    /api/read-attachments/{uid}/{fn} (session: serve decrypted bytes)
+//
+// Encryption mirrors messages / collab-cards: client encrypts with their
+// own secret, relay decrypts with senderSecret, re-encrypts under the
+// inter-tenant key for at-rest storage, decrypts again for the session
+// UI. Hard delete — no tombstones (no offline-sync requirement, the
+// hyprcrd client is the source of truth).
+
+if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
+
+// Session tenant is set by routes/public.php earlier in the chain;
+// client-API auth is lazy so we don't hit authClient() when the session
+// alone suffices.
+
+$clientTenant = $clientTenant ?? authClient($db);
+
+// ── Client API: upsert an item ────────────────────────────────────
+
+if ($route === '/api/read' && $method === 'POST') {
+    if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
+    if (empty($clientTenant['secret_encrypted'])) {
+        jsonResponse(['error' => 'sender has no client secret set'], 400);
+    }
+    $input = json_decode(file_get_contents('php://input'), true) ?: [];
+    $relayUid      = trim((string)($input['relay_uid'] ?? ''));
+    $encTitle      = (string)($input['title'] ?? '');
+    $encBody       = (string)($input['body'] ?? '');
+    $heroFilename  = trim((string)($input['hero_filename'] ?? ''));
+    if ($relayUid === '' || $encBody === '') {
+        jsonResponse(['error' => 'relay_uid and body required'], 400);
+    }
+    // Hero filename follows the hyprcrd upload naming scheme; empty is
+    // valid (no inline images).
+    if ($heroFilename !== '' && !preg_match('/^[a-f0-9]{8,64}\.[a-z0-9]{1,8}$/', $heroFilename)) {
+        jsonResponse(['error' => 'invalid hero_filename'], 400);
+    }
+
+    $senderSecret = masterDecrypt($clientTenant['secret_encrypted'], $MASTER_KEY);
+    if (!$senderSecret) jsonResponse(['error' => 'sender secret unavailable'], 500);
+    $interKey = getInterTenantKey($db, $MASTER_KEY);
+    if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
+
+    $plainTitle = clientDecrypt($encTitle, $senderSecret);
+    $plainBody  = clientDecrypt($encBody, $senderSecret);
+    if ($plainBody === '') jsonResponse(['error' => 'body decrypt failed'], 400);
+
+    $storedTitle = clientEncrypt($plainTitle, $interKey);
+    $storedBody  = clientEncrypt($plainBody, $interKey);
+
+    $db->prepare("
+        INSERT INTO read_items (tenant_id, relay_uid, title, body, hero_filename, updated_at)
+        VALUES (:t, :u, :ti, :bo, :hf, datetime('now'))
+        ON CONFLICT(tenant_id, relay_uid) DO UPDATE SET
+            title         = excluded.title,
+            body          = excluded.body,
+            hero_filename = excluded.hero_filename,
+            updated_at    = excluded.updated_at
+    ")->execute([
+        't'  => $clientTenant['id'],
+        'u'  => $relayUid,
+        'ti' => $storedTitle,
+        'bo' => $storedBody,
+        'hf' => $heroFilename !== '' ? $heroFilename : null,
+    ]);
+    jsonResponse(['ok' => true, 'relay_uid' => $relayUid]);
+}
+
+// ── DELETE /api/read/{uid} ────────────────────────────────────────
+
+if (preg_match('#^/api/read/([a-zA-Z0-9_-]+)$#', $route, $m) && $method === 'DELETE') {
+    $tenant = $clientTenant ?: $sessionTenant;
+    if (!$tenant) jsonResponse(['error' => 'unauthorized'], 401);
+    $uid = $m[1];
+    $db->prepare('DELETE FROM read_attachments WHERE tenant_id = :t AND relay_uid = :u')
+        ->execute(['t' => $tenant['id'], 'u' => $uid]);
+    $db->prepare('DELETE FROM read_items WHERE tenant_id = :t AND relay_uid = :u')
+        ->execute(['t' => $tenant['id'], 'u' => $uid]);
+    jsonResponse(['ok' => true]);
+}
+
+// ── Session: list own items (for the relay UI) ────────────────────
+
+if ($route === '/api/read' && $method === 'GET' && $sessionTenant) {
+    $interKey = getInterTenantKey($db, $MASTER_KEY);
+    if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
+    $stmt = $db->prepare('
+        SELECT relay_uid, title, hero_filename, created_at, updated_at, length(body) AS body_len
+        FROM read_items WHERE tenant_id = :t
+        ORDER BY updated_at DESC
+        LIMIT 200
+    ');
+    $stmt->execute(['t' => $sessionTenant['id']]);
+    $out = [];
+    foreach ($stmt->fetchAll() as $row) {
+        $out[] = [
+            'relay_uid'     => $row['relay_uid'],
+            'title'         => clientDecrypt($row['title'] ?? '', $interKey),
+            'hero_filename' => $row['hero_filename'],
+            'created_at'    => $row['created_at'],
+            'updated_at'    => $row['updated_at'],
+        ];
+    }
+    jsonResponse(['items' => $out]);
+}
+
+// ── Session: one item with body ───────────────────────────────────
+
+if (preg_match('#^/api/read/([a-zA-Z0-9_-]+)$#', $route, $m) && $method === 'GET' && $sessionTenant) {
+    $uid = $m[1];
+    $interKey = getInterTenantKey($db, $MASTER_KEY);
+    if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
+    $stmt = $db->prepare('SELECT relay_uid, title, body, hero_filename, created_at, updated_at FROM read_items WHERE tenant_id = :t AND relay_uid = :u');
+    $stmt->execute(['t' => $sessionTenant['id'], 'u' => $uid]);
+    $row = $stmt->fetch();
+    if (!$row) jsonResponse(['error' => 'not found'], 404);
+    jsonResponse([
+        'relay_uid'     => $row['relay_uid'],
+        'title'         => clientDecrypt($row['title'] ?? '', $interKey),
+        'body'          => clientDecrypt($row['body'] ?? '', $interKey),
+        'hero_filename' => $row['hero_filename'],
+        'created_at'    => $row['created_at'],
+        'updated_at'    => $row['updated_at'],
+    ]);
+}
+
+// ── Client API: upload inline image blob ──────────────────────────
+
+if ($route === '/api/read-attachments' && $method === 'POST') {
+    if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
+    if (empty($clientTenant['secret_encrypted'])) {
+        jsonResponse(['error' => 'sender has no client secret set'], 400);
+    }
+    $input = json_decode(file_get_contents('php://input'), true) ?: [];
+    $relayUid = (string)($input['relay_uid'] ?? '');
+    $filename = (string)($input['filename'] ?? '');
+    $data     = (string)($input['data'] ?? '');
+    if (!$relayUid || !$filename || !$data) jsonResponse(['error' => 'relay_uid, filename, data required'], 400);
+    if (!preg_match('/^[a-f0-9]{8,64}\.[a-z0-9]{1,8}$/', $filename)) jsonResponse(['error' => 'invalid filename'], 400);
+
+    $senderSecret = masterDecrypt($clientTenant['secret_encrypted'], $MASTER_KEY);
+    if (!$senderSecret) jsonResponse(['error' => 'sender secret unavailable'], 500);
+    $interKey = getInterTenantKey($db, $MASTER_KEY);
+    if (!$interKey) jsonResponse(['error' => 'relay super-shared key not set'], 500);
+
+    $plain = clientDecrypt($data, $senderSecret);
+    if ($plain === '') jsonResponse(['error' => 'attachment decrypt failed'], 400);
+    $stored = clientEncrypt($plain, $interKey);
+
+    $db->prepare('INSERT INTO read_attachments (tenant_id, relay_uid, filename, data) VALUES (:t, :u, :f, :d)
+        ON CONFLICT(tenant_id, relay_uid, filename) DO UPDATE SET data = excluded.data')
+        ->execute(['t' => $clientTenant['id'], 'u' => $relayUid, 'f' => $filename, 'd' => $stored]);
+    jsonResponse(['ok' => true]);
+}
+
+// ── Session: serve decrypted image bytes ──────────────────────────
+
+if (preg_match('#^/api/read-attachments/([a-zA-Z0-9_-]+)/([a-f0-9]+\.[a-z0-9]{1,8})$#', $route, $m) && $method === 'GET' && $sessionTenant) {
+    $uid = $m[1];
+    $filename = $m[2];
+    $interKey = getInterTenantKey($db, $MASTER_KEY);
+    if (!$interKey) { http_response_code(500); exit; }
+    $stmt = $db->prepare('SELECT data FROM read_attachments WHERE tenant_id = :t AND relay_uid = :u AND filename = :f');
+    $stmt->execute(['t' => $sessionTenant['id'], 'u' => $uid, 'f' => $filename]);
+    $enc = $stmt->fetchColumn();
+    if (!$enc) { http_response_code(404); exit; }
+    $b64 = clientDecrypt($enc, $interKey);
+    $bytes = base64_decode($b64, true);
+    if ($bytes === false) { http_response_code(500); exit; }
+    $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
+    $mimes = ['png' => 'image/png', 'jpg' => 'image/jpeg', 'jpeg' => 'image/jpeg', 'gif' => 'image/gif', 'webp' => 'image/webp'];
+    header('Content-Type: ' . ($mimes[$ext] ?? 'application/octet-stream'));
+    header('Cache-Control: private, max-age=3600');
+    echo $bytes;
+    exit;
+}

relay/index.php

@@ -69,8 +69,11 @@ if (str_starts_with($route, '/api/')) {
     // Attachment routes handle binary blobs; everything else is JSON metadata.
     // A ~150KB image becomes a ~275KB envelope after base64 + GCM framing,
     // so 256KB would silently drop any non-trivial image on collab pushes.
-    $isAttachmentRoute = in_array($route, ['/api/attachments', '/api/attachments/upload', '/api/collab-attachments'], true);
-    $sizeLimit = $isAttachmentRoute ? 15728640 : 262144;
+    $isAttachmentRoute = in_array($route, ['/api/attachments', '/api/attachments/upload', '/api/collab-attachments', '/api/read-attachments'], true);
+    // Read items carry the full card body (markdown), which can be much
+    // longer than a chat message — raise the JSON-metadata cap for the
+    // read endpoint too.
+    $sizeLimit = $isAttachmentRoute ? 15728640 : ($route === '/api/read' ? 2097152 : 262144);
     if ($contentLength > $sizeLimit) jsonResponse(['error' => 'payload too large'], 413);
 
     // Each route file contains its handlers as if-blocks that exit on
@@ -85,6 +88,7 @@ if (str_starts_with($route, '/api/')) {
     require __DIR__ . '/inc/routes/collab-cards.php';
     require __DIR__ . '/inc/routes/collab-locks.php';
     require __DIR__ . '/inc/routes/shopping.php';
+    require __DIR__ . '/inc/routes/read.php';
 
     jsonResponse(['error' => 'not found'], 404);
 }

relay/ui/app.js

@@ -68,17 +68,18 @@ function showView(name) {
     if (me && me.password_changed === false && !['setup', 'login', 'change-password'].includes(name)) {
         name = 'change-password';
     }
-    ['setup', 'login', 'change-password', 'compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].forEach(v => {
+    ['setup', 'login', 'change-password', 'compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].forEach(v => {
         $('view-' + v)?.classList.add('hidden');
     });
     $('view-' + name)?.classList.remove('hidden');
 
-    if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(name)) {
+    if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(name)) {
         $('nav-buttons').classList.remove('hidden');
         $('nav-compose').classList.toggle('active', name === 'compose');
         $('nav-inbox')?.classList.toggle('active', name === 'inbox');
         $('nav-chat')?.classList.toggle('active', name === 'chat');
         $('nav-shopping')?.classList.toggle('active', name === 'shopping');
+        $('nav-read')?.classList.toggle('active', name === 'read');
         $('nav-account').classList.toggle('active', name === 'account');
         $('nav-admin').classList.toggle('active', name === 'admin');
         $('nav-burger')?.classList.remove('hidden');
@@ -119,9 +120,14 @@ function showView(name) {
     } else {
         stopShoppingPoll();
     }
+    if (name === 'read') {
+        loadReadList();
+        // Close any open article when switching into the list view.
+        closeReader();
+    }
     // Remember the active view so a page reload lands back here
     // instead of defaulting to compose every time.
-    if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(name)) {
+    if (['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(name)) {
         try { localStorage.setItem('relay-last-view', name); } catch {}
     }
     if (name === 'admin') {
@@ -278,7 +284,7 @@ function routePostLogin(status) {
         toast('set your client secret to start using the relay');
     } else {
         const last = localStorage.getItem('relay-last-view') || 'compose';
-        showView(['compose', 'inbox', 'account', 'admin', 'chat', 'shopping'].includes(last) ? last : 'compose');
+        showView(['compose', 'inbox', 'account', 'admin', 'chat', 'shopping', 'read'].includes(last) ? last : 'compose');
     }
 }
 
@@ -1179,3 +1185,187 @@ document.addEventListener('keydown', e => {
         if (document.activeElement?.id === 'compose-body' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); sendCompose(); }
     }
 });
+
+// ── Read view: list + zen reader ──────────────────────────────────
+//
+// The hyprcrd client pushes cards here when the user toggles "Read later"
+// on a card. This view renders the list, and the reader overlay renders
+// the markdown in a mobile-first, distraction-free column. Images in the
+// body are rewritten to the relay's session-authed image endpoint.
+
+let readCurrentUid = null;
+
+async function loadReadList() {
+    const list = $('read-items');
+    const empty = $('read-empty');
+    if (!list) return;
+    list.innerHTML = '';
+    try {
+        const res = await api('api/read');
+        const items = res?.items || [];
+        if (!items.length) {
+            empty.classList.remove('hidden');
+            return;
+        }
+        empty.classList.add('hidden');
+        list.innerHTML = items.map(it => {
+            const title = it.title?.trim() || '(untitled)';
+            const thumb = it.hero_filename
+                ? `<div class="read-item-thumb" style="background-image:url('api/read-attachments/${encodeURIComponent(it.relay_uid)}/${encodeURIComponent(it.hero_filename)}');"></div>`
+                : `<div class="read-item-thumb read-item-thumb-placeholder"><i class="ph ph-book-open"></i></div>`;
+            return `
+                <li class="read-item" data-uid="${escapeHtml(it.relay_uid)}">
+                    ${thumb}
+                    <div class="read-item-body">
+                        <div class="read-item-title">${escapeHtml(title)}</div>
+                        <div class="read-item-meta">${escapeHtml(formatRelTime(it.updated_at))}</div>
+                    </div>
+                </li>`;
+        }).join('');
+        list.querySelectorAll('.read-item').forEach(el => {
+            el.addEventListener('click', () => openReader(el.dataset.uid));
+        });
+    } catch (e) {
+        list.innerHTML = `<li style="color:var(--danger);font-size:12px;">Failed to load: ${escapeHtml(e.message)}</li>`;
+    }
+}
+
+async function openReader(uid) {
+    const reader = $('read-reader');
+    const article = $('read-article');
+    if (!reader || !article) return;
+    readCurrentUid = uid;
+    article.innerHTML = '<p style="color:var(--dim);">loading…</p>';
+    reader.classList.remove('hidden');
+    reader.scrollTop = 0;
+    try {
+        const res = await api('api/read/' + encodeURIComponent(uid));
+        if (res?.error) throw new Error(res.error);
+        article.innerHTML = renderReadArticle(res);
+    } catch (e) {
+        article.innerHTML = `<p style="color:var(--danger);">Failed to load: ${escapeHtml(e.message)}</p>`;
+    }
+}
+
+function closeReader() {
+    readCurrentUid = null;
+    $('read-reader')?.classList.add('hidden');
+}
+
+function renderReadArticle(item) {
+    const title = item.title?.trim() || '(untitled)';
+    const rawBody = item.body || '';
+    // Hero: first uploads/<hex>.<ext> reference in body. Rewrite to the
+    // session-authed relay endpoint so the <img src> resolves server-side
+    // against the tenant's own read_attachments rows.
+    const uid = encodeURIComponent(item.relay_uid);
+    const bodyForRender = rawBody.replace(
+        /uploads\/([a-f0-9]+\.[a-z0-9]+)/gi,
+        (_m, fn) => `api/read-attachments/${uid}/${encodeURIComponent(fn)}`
+    );
+    const hero = item.hero_filename
+        ? `<img class="read-hero" src="api/read-attachments/${uid}/${encodeURIComponent(item.hero_filename)}" alt="">`
+        : '';
+    const date = item.updated_at ? formatRelTime(item.updated_at) : '';
+    return `
+        ${hero}
+        <h1 class="read-title">${escapeHtml(title)}</h1>
+        <div class="read-date">${escapeHtml(date)}</div>
+        ${renderMarkdown(bodyForRender)}
+    `;
+}
+
+// Tiny inline markdown renderer. Covers the cases hyprcrd cards actually
+// use: paragraphs, headings, bold/italic, inline code, links, bullet +
+// numbered lists, blockquotes, hr, fenced code blocks, inline images.
+// We do NOT pull a full library in — this matches the UI's existing
+// minimal-deps stance (fonts + phosphor, nothing else).
+function renderMarkdown(src) {
+    if (!src) return '';
+    const placeholders = [];
+    const stash = (html) => { placeholders.push(html); return `\u0000${placeholders.length - 1}\u0000`; };
+
+    // Fenced code
+    src = src.replace(/```(\w+)?\n([\s\S]*?)```/g, (_m, _lang, code) =>
+        stash(`<pre><code>${escapeHtml(code)}</code></pre>`));
+    // Inline code
+    src = src.replace(/`([^`\n]+)`/g, (_m, c) => stash(`<code>${escapeHtml(c)}</code>`));
+
+    // Escape remaining HTML
+    src = escapeHtml(src);
+
+    // Restore stashed code first (before we mangle further)
+    src = src.replace(/\u0000(\d+)\u0000/g, (_m, i) => placeholders[Number(i)]);
+
+    // Images: ![alt](url)
+    src = src.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_m, alt, url) =>
+        `<img src="${escapeAttr(url)}" alt="${escapeAttr(alt)}">`);
+    // Links: [text](url)
+    src = src.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, url) =>
+        `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${text}</a>`);
+
+    // Headings (## etc.), line-anchored
+    src = src.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+    src = src.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+    src = src.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+
+    // HR
+    src = src.replace(/^---+$/gm, '<hr>');
+
+    // Blockquotes: consecutive "> " lines collapse into one <blockquote>
+    src = src.replace(/(^|\n)((?:> [^\n]*\n?)+)/g, (_m, pre, block) => {
+        const inner = block.replace(/^> ?/gm, '').trim();
+        return `${pre}<blockquote>${inner.replace(/\n/g, '<br>')}</blockquote>\n`;
+    });
+
+    // Lists: grouped runs of "- " / "* " / "N." items
+    src = src.replace(/(^|\n)((?:[-*]\s+[^\n]+\n?)+)/g, (_m, pre, block) => {
+        const items = block.trim().split(/\n/).map(l => l.replace(/^[-*]\s+/, '')).map(i => `<li>${i}</li>`).join('');
+        return `${pre}<ul>${items}</ul>\n`;
+    });
+    src = src.replace(/(^|\n)((?:\d+\.\s+[^\n]+\n?)+)/g, (_m, pre, block) => {
+        const items = block.trim().split(/\n/).map(l => l.replace(/^\d+\.\s+/, '')).map(i => `<li>${i}</li>`).join('');
+        return `${pre}<ol>${items}</ol>\n`;
+    });
+
+    // Bold + italic (do bold first to avoid partial capture)
+    src = src.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+    src = src.replace(/(?<!\w)\*([^*\n]+)\*(?!\w)/g, '<em>$1</em>');
+
+    // Paragraphs: wrap any run of non-block-level lines. Block-level tags
+    // we've already emitted stay as-is.
+    const blocks = src.split(/\n{2,}/);
+    return blocks.map(b => {
+        const t = b.trim();
+        if (!t) return '';
+        if (/^<(h[1-6]|ul|ol|pre|blockquote|hr|img)/.test(t)) return t;
+        return `<p>${t.replace(/\n/g, '<br>')}</p>`;
+    }).join('\n');
+}
+
+function escapeAttr(s) {
+    return String(s ?? '').replace(/["&<>]/g, c => ({ '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+}
+
+$('read-back')?.addEventListener('click', closeReader);
+$('read-delete')?.addEventListener('click', async () => {
+    if (!readCurrentUid) return;
+    if (!await relayConfirm('Remove this item from your read list?', { okLabel: 'Remove', danger: true })) return;
+    const uid = readCurrentUid;
+    try {
+        await api('api/read/' + encodeURIComponent(uid), { method: 'DELETE' });
+        closeReader();
+        loadReadList();
+        toast('removed');
+    } catch (e) {
+        toast(e.message || 'failed', true);
+    }
+});
+
+// Browser back should close the reader first, then leave the view.
+window.addEventListener('keydown', e => {
+    if (e.key === 'Escape' && readCurrentUid) {
+        e.preventDefault();
+        closeReader();
+    }
+});

relay/ui/layout.php

@@ -28,6 +28,7 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
         <button id="nav-inbox" class="nav-btn" onclick="showView('inbox')"><i class="ph ph-tray"></i> inbox</button>
         <button id="nav-chat" class="nav-btn" onclick="showView('chat')"><i class="ph ph-chat-circle-dots"></i> chat</button>
         <button id="nav-shopping" class="nav-btn" onclick="showView('shopping')"><i class="ph ph-shopping-cart"></i> shopping</button>
+        <button id="nav-read" class="nav-btn" onclick="showView('read')"><i class="ph ph-book-open"></i> read</button>
         <button id="nav-account" class="nav-btn" onclick="showView('account')"><i class="ph ph-user-circle"></i> account</button>
         <button id="nav-admin" class="nav-btn hidden" onclick="showView('admin')"><i class="ph ph-users"></i> users</button>
         <button class="nav-btn danger" onclick="doLogout()"><i class="ph ph-sign-out"></i> logout</button>
@@ -234,6 +235,26 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
     </div>
 </div>
 
+<!-- ── Read view: list + zen reader ── -->
+<div id="view-read" class="hidden">
+    <div id="read-list" class="read-wrap">
+        <div id="read-empty" class="read-empty hidden">
+            <i class="ph ph-book-open read-empty-icon"></i>
+            <p>No items yet. Toggle <strong>Read later</strong> on a card in hyprcrd to send it here.</p>
+        </div>
+        <ul id="read-items" class="read-items"></ul>
+    </div>
+    <!-- Zen reader overlay -->
+    <div id="read-reader" class="read-reader hidden">
+        <div class="read-reader-bar">
+            <button id="read-back" class="read-reader-btn" aria-label="back"><i class="ph ph-arrow-left"></i></button>
+            <span class="spacer"></span>
+            <button id="read-delete" class="read-reader-btn read-reader-btn-danger" aria-label="delete" title="delete from read list"><i class="ph ph-trash"></i></button>
+        </div>
+        <article id="read-article" class="read-article"></article>
+    </div>
+</div>
+
 <!-- ── Chat view ── -->
 <div id="view-chat" class="hidden">
     <div class="chat-layout">

relay/ui/style.css

@@ -839,3 +839,210 @@ header .nav-btn .ph { font-size:11px; vertical-align:-1px; margin-right:2px; }
     .auth-form h2 { font-size: 16px; margin-bottom: 8px; }
     .auth-form .auth-icon { font-size: 44px; }
 }
+
+/* ─────────────────────────────────────────────────────────────────
+ * Read view — list + distraction-free zen reader. Mobile-first; the
+ * article width is capped tight for comfortable line-lengths and the
+ * type scale is larger than anywhere else in the UI because this is
+ * meant for actual reading, not scanning.
+ * ───────────────────────────────────────────────────────────────── */
+
+.read-wrap {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 24px 16px 48px;
+}
+
+.read-empty {
+    text-align: center;
+    padding: 64px 24px;
+    color: var(--dim);
+    font-size: 13px;
+    line-height: 1.6;
+}
+.read-empty-icon { font-size: 48px; display: block; margin: 0 auto 16px; color: var(--muted); }
+
+.read-items {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.read-item {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 14px 16px;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+    display: flex;
+    gap: 14px;
+    align-items: center;
+}
+.read-item:hover { border-color: var(--accent); background: var(--raised); }
+.read-item-thumb {
+    width: 64px; height: 64px; flex-shrink: 0;
+    border-radius: var(--radius);
+    background: var(--bg) center/cover no-repeat;
+    border: 1px solid var(--border);
+}
+.read-item-thumb-placeholder {
+    display: flex; align-items: center; justify-content: center;
+    color: var(--dim);
+    font-size: 24px;
+}
+.read-item-body { flex: 1; min-width: 0; }
+.read-item-title {
+    color: var(--bright);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.read-item-meta {
+    font-family: var(--pixel);
+    font-size: 9px;
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Reader overlay: covers the main content area; header stays visible
+ * so the user can navigate back via the burger / nav buttons. */
+.read-reader {
+    position: fixed;
+    inset: 56px 0 0 0;
+    background: var(--bg);
+    z-index: 80;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+.read-reader-bar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: color-mix(in srgb, var(--bg) 92%, transparent);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-bottom: 1px solid var(--border);
+    z-index: 2;
+}
+.read-reader-btn {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text);
+    width: 36px; height: 36px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 16px;
+    transition: border-color 0.15s, color 0.15s;
+}
+.read-reader-btn:hover { border-color: var(--accent); color: var(--accent); }
+.read-reader-btn-danger:hover { border-color: var(--danger); color: var(--danger); }
+
+.read-article {
+    max-width: 680px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 24px 20px 96px;
+    font-size: 17px;
+    line-height: 1.7;
+    color: var(--text);
+}
+.read-article .read-hero {
+    display: block;
+    width: 100%;
+    max-height: 360px;
+    object-fit: cover;
+    border-radius: var(--radius-lg);
+    margin-bottom: 24px;
+    background: var(--surface);
+}
+.read-article h1.read-title {
+    font-family: var(--mono);
+    font-size: 26px;
+    line-height: 1.25;
+    font-weight: 700;
+    color: var(--bright);
+    margin-bottom: 6px;
+}
+.read-article .read-date {
+    font-family: var(--pixel);
+    font-size: 10px;
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 28px;
+}
+.read-article h1, .read-article h2, .read-article h3 {
+    color: var(--bright);
+    line-height: 1.3;
+    margin-top: 28px;
+    margin-bottom: 12px;
+}
+.read-article h2 { font-size: 20px; }
+.read-article h3 { font-size: 17px; }
+.read-article p { margin: 0 0 16px; }
+.read-article a { color: var(--accent); text-decoration: underline; }
+.read-article ul, .read-article ol { padding-left: 24px; margin: 0 0 16px; }
+.read-article li { margin-bottom: 6px; }
+.read-article code {
+    font-family: var(--mono);
+    font-size: 0.9em;
+    background: var(--surface);
+    padding: 1px 5px;
+    border-radius: 3px;
+}
+.read-article pre {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 14px 16px;
+    overflow-x: auto;
+    margin: 0 0 16px;
+}
+.read-article pre code { background: none; padding: 0; }
+.read-article blockquote {
+    border-left: 3px solid var(--accent);
+    padding-left: 14px;
+    color: var(--muted);
+    margin: 0 0 16px;
+}
+.read-article img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+    margin: 12px 0;
+}
+.read-article hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 28px 0;
+}
+.read-article table {
+    border-collapse: collapse;
+    margin: 0 0 16px;
+    width: 100%;
+}
+.read-article th, .read-article td {
+    border: 1px solid var(--border);
+    padding: 8px 10px;
+    text-align: left;
+}
+
+/* Mobile: pad tighter, bump touch targets */
+@media (max-width: 640px) {
+    .read-article { font-size: 16px; padding: 20px 16px 96px; }
+    .read-article h1.read-title { font-size: 22px; }
+    .read-reader { inset: 52px 0 0 0; }
+    .read-reader-btn { width: 40px; height: 40px; font-size: 18px; }
+    .read-item-thumb { width: 52px; height: 52px; }
+}