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/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; }
+}