From 1e51bdec7cc5f7d85c84e95e19124bee27a8e73d Mon Sep 17 00:00:00 2001
From: th <th@skilleven.de>
Date: Sat, 18 Apr 2026 16:10:04 +0200
Subject: [PATCH] =?UTF-8?q?v2.0.5=20=E2=80=94=20Read=20feature=20(mobile?=
 =?UTF-8?q?=20zen=20reader=20on=20the=20relay)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 config.php                  |   2 +-
 electron/package.json       |   2 +-
 public/index.php            | 156 +++++++++++++++++++++++++--
 public/js/modules/board.js  |   1 +
 public/js/modules/detail.js |  40 +++++++
 relay/inc/bootstrap.php     |  33 ++++++
 relay/inc/routes/read.php   | 182 +++++++++++++++++++++++++++++++
 relay/index.php             |   8 +-
 relay/ui/app.js             | 198 +++++++++++++++++++++++++++++++++-
 relay/ui/layout.php         |  21 ++++
 relay/ui/style.css          | 207 ++++++++++++++++++++++++++++++++++++
 src/Database.php            |   7 ++
 12 files changed, 840 insertions(+), 17 deletions(-)
 create mode 100644 relay/inc/routes/read.php

diff --git a/config.php b/config.php
index 99029b7..4af454d 100644
--- a/config.php
+++ b/config.php
@@ -1,7 +1,7 @@
 <?php
 
 define('APP_NAME', 'hyprcrd');
-define('APP_VERSION', '2.0.4');
+define('APP_VERSION', '2.0.5');
 
 // APP_DEBUG: gates verbose error responses (curl traces, upstream bodies).
 // Off by default; enable via env for local troubleshooting only.
diff --git a/electron/package.json b/electron/package.json
index 345658e..69a7490 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hyprcrd",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "hyprcrd — self-hosted card manager",
   "main": "main.js",
   "scripts": {
diff --git a/public/index.php b/public/index.php
index 613595c..ef454b3 100644
--- a/public/index.php
+++ b/public/index.php
@@ -283,6 +283,97 @@ if (str_starts_with($route, '/api/')) {
         return implode(',', array_unique($tags));
     }
 
+    // Read-later push helpers — called after card insert/update when
+    // cards.read_push is 1, or when the user toggles it off and we need
+    // to wipe the remote copy. Failures are logged and swallowed so
+    // relay trouble never blocks a local save.
+    function pushCardToRelayRead(array $card, PDO $db): void {
+        $relayUrl  = $db->query("SELECT value FROM settings WHERE key = 'relay_url'")->fetchColumn();
+        $relayKey  = $db->query("SELECT value FROM settings WHERE key = 'relay_key'")->fetchColumn();
+        $relayUser = $db->query("SELECT value FROM settings WHERE key = 'relay_username'")->fetchColumn();
+        if (!$relayUrl || !$relayKey || !$relayUser) return;
+
+        $relayUid = $card['relay_uid'] ?? null;
+        if (!$relayUid) {
+            $relayUid = bin2hex(random_bytes(16));
+            $db->prepare('UPDATE cards SET relay_uid = ? WHERE id = ?')->execute([$relayUid, $card['id']]);
+        }
+
+        $body = (string)($card['body'] ?? '');
+        // Hero = first uploads/<hex>.<ext> reference. All inline images
+        // get pushed as attachments so the reader can resolve them.
+        preg_match_all('#uploads/([a-f0-9]+\.[a-z0-9]+)#i', $body, $matches);
+        $imageFilenames = array_unique(array_map('strtolower', $matches[1] ?? []));
+        $heroFilename = $imageFilenames[0] ?? '';
+
+        $payload = json_encode([
+            'relay_uid'     => $relayUid,
+            'title'         => hyprcrdRelayEncrypt((string)($card['title'] ?? ''), $relayKey),
+            'body'          => hyprcrdRelayEncrypt($body, $relayKey),
+            'hero_filename' => $heroFilename,
+        ]);
+        $ch = curl_init(rtrim($relayUrl, '/') . '/api/read');
+        curl_setopt_array($ch, [
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_POST => true,
+            CURLOPT_POSTFIELDS => $payload,
+            CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
+            CURLOPT_TIMEOUT => 10,
+        ]);
+        hyprcrdApplySafeCurlOpts($ch);
+        $resp = curl_exec($ch);
+        $status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+        if ($status < 200 || $status >= 300) {
+            @error_log('[hyprcrd] read push failed: HTTP ' . $status . ' ' . substr((string)$resp, 0, 200));
+            return; // don't bother uploading images if the item didn't land
+        }
+
+        // Upload referenced images as read-attachments (encrypted blob,
+        // same envelope format as collab-attachments).
+        $uploadDir = UPLOAD_DIR;
+        foreach ($imageFilenames as $fn) {
+            $filePath = $uploadDir . '/' . $fn;
+            if (!is_file($filePath)) continue;
+            $bytes = file_get_contents($filePath);
+            if ($bytes === false) continue;
+            $attPayload = json_encode([
+                'relay_uid' => $relayUid,
+                'filename'  => $fn,
+                'data'      => hyprcrdRelayEncrypt(base64_encode($bytes), $relayKey),
+            ]);
+            $ach = curl_init(rtrim($relayUrl, '/') . '/api/read-attachments');
+            curl_setopt_array($ach, [
+                CURLOPT_RETURNTRANSFER => true,
+                CURLOPT_POST => true,
+                CURLOPT_POSTFIELDS => $attPayload,
+                CURLOPT_HTTPHEADER => ['Content-Type: application/json', 'X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
+                CURLOPT_TIMEOUT => 30,
+            ]);
+            hyprcrdApplySafeCurlOpts($ach);
+            curl_exec($ach);
+            curl_close($ach);
+        }
+    }
+
+    function deleteCardFromRelayRead(string $relayUid, PDO $db): void {
+        if ($relayUid === '') return;
+        $relayUrl  = $db->query("SELECT value FROM settings WHERE key = 'relay_url'")->fetchColumn();
+        $relayKey  = $db->query("SELECT value FROM settings WHERE key = 'relay_key'")->fetchColumn();
+        $relayUser = $db->query("SELECT value FROM settings WHERE key = 'relay_username'")->fetchColumn();
+        if (!$relayUrl || !$relayKey || !$relayUser) return;
+        $ch = curl_init(rtrim($relayUrl, '/') . '/api/read/' . urlencode($relayUid));
+        curl_setopt_array($ch, [
+            CURLOPT_RETURNTRANSFER => true,
+            CURLOPT_CUSTOMREQUEST => 'DELETE',
+            CURLOPT_HTTPHEADER => ['X-Relay-User: ' . $relayUser, 'X-Relay-Key: ' . $relayKey],
+            CURLOPT_TIMEOUT => 10,
+        ]);
+        hyprcrdApplySafeCurlOpts($ch);
+        curl_exec($ch);
+        curl_close($ch);
+    }
+
     // Plugin route handlers (registered by plugin backend.php files).
     // Each handler is responsible for calling exit() on a match.
     PluginManager::instance()->dispatchRoute($route, $method);
@@ -294,7 +385,8 @@ if (str_starts_with($route, '/api/')) {
         if ($title === '') { http_response_code(400); echo json_encode(['error' => 'title is required']); exit; }
         $pos = $input['position'] ?? 0;
         $body = $input['body'] ?? '';
-        $db->prepare('INSERT INTO cards (title, body, color, bucket_id, parent_id, position, tags, due_date, scratchpad) VALUES (:title, :body, :color, :bucket_id, :parent_id, :position, :tags, :due_date, :scratchpad)')->execute([
+        $readPush = !empty($input['read_push']) ? 1 : 0;
+        $db->prepare('INSERT INTO cards (title, body, color, bucket_id, parent_id, position, tags, due_date, scratchpad, read_push) VALUES (:title, :body, :color, :bucket_id, :parent_id, :position, :tags, :due_date, :scratchpad, :read_push)')->execute([
             'title' => $title, 'body' => $body, 'color' => validColor($input['color'] ?? null),
             'bucket_id' => validInt($input['bucket_id'] ?? null, null),
             'parent_id' => validInt($input['parent_id'] ?? null, null),
@@ -302,8 +394,16 @@ if (str_starts_with($route, '/api/')) {
             'tags' => extractTags($body),
             'due_date' => $input['due_date'] ?? null,
             'scratchpad' => $input['scratchpad'] ?? null,
+            'read_push' => $readPush,
         ]);
-        echo json_encode($db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . $db->lastInsertId())->fetch());
+        $saved = $db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . $db->lastInsertId())->fetch();
+        if ($readPush && $saved) {
+            pushCardToRelayRead($saved, $db);
+            // relay_uid may have been generated inside the push helper;
+            // re-read so the client sees it on the response.
+            $saved = $db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . (int)$saved['id'])->fetch();
+        }
+        echo json_encode($saved);
         exit;
     }
 
@@ -323,17 +423,21 @@ if (str_starts_with($route, '/api/')) {
     }
 
     if ($route === '/api/cards/meta' && $method === 'GET') {
-        echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, c.relay_uid, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
+        echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, c.relay_uid, c.read_push, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
         exit;
     }
 
     if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'DELETE') {
-        // CalDAV tombstone for synced cards
-        $card = $db->prepare('SELECT caldav_uid FROM cards WHERE id = :id');
+        // CalDAV tombstone for synced cards, plus a read-list wipe so the
+        // mobile reader stops showing cards that no longer exist locally.
+        $card = $db->prepare('SELECT caldav_uid, relay_uid, read_push FROM cards WHERE id = :id');
         $card->execute(['id' => $m[1]]);
-        $uid = $card->fetchColumn();
-        if ($uid) {
-            $db->prepare('INSERT OR REPLACE INTO caldav_tombstones (caldav_uid, card_id) VALUES (?, ?)')->execute([$uid, $m[1]]);
+        $cardRow = $card->fetch();
+        if ($cardRow && !empty($cardRow['caldav_uid'])) {
+            $db->prepare('INSERT OR REPLACE INTO caldav_tombstones (caldav_uid, card_id) VALUES (?, ?)')->execute([$cardRow['caldav_uid'], $m[1]]);
+        }
+        if ($cardRow && (int)($cardRow['read_push'] ?? 0) === 1 && !empty($cardRow['relay_uid'])) {
+            deleteCardFromRelayRead((string)$cardRow['relay_uid'], $db);
         }
         $db->prepare('DELETE FROM cards WHERE id = :id')->execute(['id' => $m[1]]);
         echo json_encode(['ok' => true]); exit;
@@ -367,10 +471,41 @@ if (str_starts_with($route, '/api/')) {
         foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id', 'due_date', 'scratchpad'] as $f) {
             if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $input[$f]; }
         }
+        if (array_key_exists('read_push', $input)) {
+            $fields[] = 'read_push = :read_push';
+            $params['read_push'] = !empty($input['read_push']) ? 1 : 0;
+        }
         if (array_key_exists('body', $input)) { $fields[] = 'tags = :tags'; $params['tags'] = extractTags($input['body']); }
+        // Snapshot the previous read_push / relay_uid before the write so we
+        // can detect a toggle-off and remove the remote copy afterwards.
+        // The history-tracking block above only loads $old when a tracked
+        // field changed; we need it unconditionally when read_push is in
+        // play, so backfill here if missing.
+        $prevRead = null; $prevRelayUid = null;
+        if (array_key_exists('read_push', $input) && !isset($old)) {
+            $snap = $db->prepare('SELECT read_push, relay_uid FROM cards WHERE id = :id');
+            $snap->execute(['id' => $m[1]]);
+            $old = $snap->fetch() ?: null;
+        }
+        if (isset($old) && $old) { $prevRead = (int)($old['read_push'] ?? 0); $prevRelayUid = $old['relay_uid'] ?? null; }
         if ($fields) { $fields[] = 'updated_at = datetime("now")'; $db->prepare('UPDATE cards SET ' . implode(', ', $fields) . ' WHERE id = :id')->execute($params); }
         $card = $db->prepare('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = :id');
-        $card->execute(['id' => $m[1]]); echo json_encode($card->fetch()); exit;
+        $card->execute(['id' => $m[1]]); $savedCard = $card->fetch();
+        // Relay sync:
+        //  - if card currently wants to be in the read list, push (idempotent
+        //    upsert keeps the remote copy in sync on every edit).
+        //  - if the user just toggled it off, clean up remotely.
+        if ($savedCard) {
+            $nowRead = (int)($savedCard['read_push'] ?? 0);
+            if ($nowRead === 1) {
+                pushCardToRelayRead($savedCard, $db);
+                // Re-read to surface any newly-generated relay_uid on the wire.
+                $card->execute(['id' => $m[1]]); $savedCard = $card->fetch();
+            } elseif ($prevRead === 1 && $prevRelayUid) {
+                deleteCardFromRelayRead($prevRelayUid, $db);
+            }
+        }
+        echo json_encode($savedCard); exit;
     }
 
     // Plugins
@@ -2224,6 +2359,9 @@ if (str_starts_with($route, '/api/')) {
                     <button id="detail-zen" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Zen mode\nFull-screen distraction-free reading.\nDrag edges to resize.">
                         <i class="ph ph-corners-out text-sm"></i>
                     </button>
+                    <button id="detail-read-toggle" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Read later\nPush this card to your relay account so you can read it in the distraction-free mobile reader.">
+                        <i id="detail-read-icon" class="ph ph-book-open text-sm"></i><span id="detail-read-label" class="font-pixel text-[10px]">Read</span>
+                    </button>
                     <div class="flex-1"></div>
                     <button id="split-right-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" data-help="Split view\nShows cards sharing tags, links,\nor content with this card.">
                         <i class="ph ph-split-horizontal text-sm"></i><span class="font-pixel text-[10px]">Split</span>
diff --git a/public/js/modules/board.js b/public/js/modules/board.js
index 3be02d8..a73846c 100644
--- a/public/js/modules/board.js
+++ b/public/js/modules/board.js
@@ -486,6 +486,7 @@ export function renderCardHtml(c, inGroup = false, recent = []) {
             <div class="mt-auto pt-2 flex items-center gap-2 text-[10px] ${hasCover ? 'text-t-text' : 'text-t-dim'} font-pixel">
                 ${c.due_date ? `<span class="due-pill" style="background:${overdue ? 'var(--t-danger)' : cardColor};"><i class="ph ph-clock-countdown" style="font-size:9px;"></i>${c.due_date}</span>` : `<span class="flex items-center gap-1"><i class="ph ph-clock text-xs"></i>${(c.updated_at || c.created_at || '').substring(0, 10)}</span>`}
                 ${c.bucket_name ? `<span class="flex items-center gap-1"><i class="ph ph-folder text-xs"></i>${esc(c.bucket_name)}</span>` : ''}
+                ${Number(c.read_push) ? '<span class="flex items-center gap-1 text-t-accent" title="On your relay\'s Read list"><i class="ph ph-book-open text-xs"></i></span>' : ''}
             </div>
         </div>
     </div>`;
diff --git a/public/js/modules/detail.js b/public/js/modules/detail.js
index e35e97a..3ab29e0 100644
--- a/public/js/modules/detail.js
+++ b/public/js/modules/detail.js
@@ -570,10 +570,50 @@ function updateDoneButton(card) {
     if (label) label.textContent = isDone ? 'Undone' : 'Done';
 }
 
+function updateReadButton(card) {
+    const isOn = !!Number(card?.read_push || 0);
+    const btn = $('detail-read-toggle');
+    const icon = $('detail-read-icon');
+    const label = $('detail-read-label');
+    if (!btn) return;
+    // Off state reuses the neutral control-bar style; on state inverts
+    // (accent-filled tile with dark text) so "this card sits on the relay
+    // right now" is visually unmistakable, matching typical toggle UIs.
+    btn.classList.toggle('bg-t-accent', isOn);
+    btn.classList.toggle('border-t-accent', isOn);
+    btn.classList.toggle('text-t-bg', isOn);
+    btn.classList.toggle('text-t-muted', !isOn);
+    btn.classList.toggle('hover:border-t-accent', !isOn);
+    btn.classList.toggle('hover:text-t-accent', !isOn);
+    if (icon) icon.className = (isOn ? 'ph-fill ph-book-open' : 'ph ph-book-open') + ' text-sm';
+    if (label) label.textContent = isOn ? 'On relay' : 'Read';
+    btn.title = isOn
+        ? 'On relay — click to remove from your Read list'
+        : 'Push this card to your relay\'s Read list for distraction-free mobile reading';
+}
+
+$('detail-read-toggle')?.addEventListener('click', async () => {
+    const card = state.viewingCard;
+    if (!card) return;
+    const next = Number(card.read_push || 0) ? 0 : 1;
+    try {
+        const updated = await api(`api/cards/${card.id}`, { method: 'PATCH', body: { read_push: next } });
+        if (updated && !updated.error) {
+            card.read_push = updated.read_push;
+            card.relay_uid = updated.relay_uid;
+            const c = state.cards.find(x => x.id == card.id);
+            if (c) { c.read_push = updated.read_push; c.relay_uid = updated.relay_uid; }
+            updateReadButton(card);
+            window._renderBoard?.();
+        }
+    } catch (_) { /* network error: silently ignore */ }
+});
+
 function showContent(card) {
     $('detail-color').style.background = card.color;
     titleEl.textContent = card.title;
     updateDoneButton(card);
+    updateReadButton(card);
     const doneCorner = $('detail-done-corner');
     if (doneCorner) doneCorner.classList.toggle('hidden', !(card.tags || '').split(',').includes('done'));
     bodyEl.innerHTML = renderMd(card.body);
diff --git a/relay/inc/bootstrap.php b/relay/inc/bootstrap.php
index 1e900f8..7ef7350 100644
--- a/relay/inc/bootstrap.php
+++ b/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,
diff --git a/relay/inc/routes/read.php b/relay/inc/routes/read.php
new file mode 100644
index 0000000..b44adb1
--- /dev/null
+++ b/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;
+}
diff --git a/relay/index.php b/relay/index.php
index ecf2f8f..fc017ad 100644
--- a/relay/index.php
+++ b/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);
 }
diff --git a/relay/ui/app.js b/relay/ui/app.js
index ec755b3..8e5ce0d 100644
--- a/relay/ui/app.js
+++ b/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();
+    }
+});
diff --git a/relay/ui/layout.php b/relay/ui/layout.php
index 23e37b6..28db37c 100644
--- a/relay/ui/layout.php
+++ b/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">
diff --git a/relay/ui/style.css b/relay/ui/style.css
index cab2c70..6a3a925 100644
--- a/relay/ui/style.css
+++ b/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; }
+}
diff --git a/src/Database.php b/src/Database.php
index 5d62087..8d9f856 100644
--- a/src/Database.php
+++ b/src/Database.php
@@ -124,6 +124,13 @@ class Database
         if (!in_array('relay_uid', $colNames)) {
             self::$pdo->exec('ALTER TABLE cards ADD COLUMN relay_uid TEXT DEFAULT NULL');
         }
+        // Read-later push: when 1, saves propagate the card to the relay's
+        // /api/read endpoint so the user can read it in the mobile-friendly
+        // zen reader. Explicitly NOT tag-based (so reading-mode is
+        // independent of whatever tags the user already organises by).
+        if (!in_array('read_push', $colNames)) {
+            self::$pdo->exec('ALTER TABLE cards ADD COLUMN read_push INTEGER NOT NULL DEFAULT 0');
+        }
 
         // Relay pushed message IDs (skip on own poll)
         self::$pdo->exec('