relay: surface shared-bucket activity in compose sidebar

Relay UI already shows a tenant's inbox + sent mails. Add a parallel
view for collaborative bucket cards the logged-in tenant is a member
of, so activity on shared boards is visible without needing the hyprcrd
client open.

New `GET /api/collab-inbox` endpoint (session-auth only) decrypts
payloads with the inter-tenant key and returns title + preview + author
+ bucket metadata. UI restructures the compose view into editor + right
sidebar stacking inbox → shared → sent, and polls all three on the
existing 15s tick.

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

relay/ui/app.js

@@ -93,6 +93,7 @@ function showView(name) {
         loadTenants().then(() => populateRecipientPicker());
         loadInbox();
         loadOutbox();
+        loadCollabInbox();
         startInboxPoll();
         $('compose-body')?.focus();
     } else {
@@ -126,7 +127,11 @@ function startInboxPoll() {
     stopInboxPoll();
     inboxPollHandle = setInterval(() => {
         if (inboxBusy) return;
-        if (!$('view-compose')?.classList.contains('hidden')) { loadInbox({ quiet: true }); loadOutbox({ quiet: true }); }
+        if (!$('view-compose')?.classList.contains('hidden')) {
+            loadInbox({ quiet: true });
+            loadOutbox({ quiet: true });
+            loadCollabInbox({ quiet: true });
+        }
     }, 15000);
 }
 function stopInboxPoll() {
@@ -594,6 +599,42 @@ async function loadOutbox({ quiet = false } = {}) {
     `).join('');
 }
 
+// ── Shared buckets / collab inbox ──
+let lastCollabJson = '';
+async function loadCollabInbox({ quiet = false } = {}) {
+    const list = $('shared-list');
+    const countEl = $('shared-count');
+    if (!list) return;
+    const res = await api('api/collab-inbox');
+    const items = res?.items || [];
+    const json = JSON.stringify(items.map(c => c.card_uid + ':' + c.updated_at));
+    if (quiet && json === lastCollabJson) return;
+    lastCollabJson = json;
+    if (countEl) countEl.textContent = items.length;
+    if (!items.length) {
+        list.innerHTML = `
+            <div class="empty-state">
+                <i class="ph ph-users-three icon"></i>
+                <div class="label">no shared bucket activity</div>
+                <div class="hint">Cards from collaborative buckets that you're a member of will appear here.</div>
+            </div>`;
+        return;
+    }
+    list.innerHTML = items.map(c => `
+        <div class="inbox-item">
+            <div class="content">
+                <div class="from">
+                    <span class="shared-bucket-chip" style="border-left:3px solid ${escapeHtml(c.bucket_color || '#38bdf8')};padding-left:6px;">${escapeHtml(c.bucket_name || c.bucket_uid)}</span>
+                    <span style="color:var(--dim);margin-left:6px;">${c.mine ? 'you' : escapeHtml(c.author_username || '—')}</span>
+                </div>
+                <div class="title">${c.title ? escapeHtml(c.title) : '<span style="color:var(--dim);font-style:italic;font-weight:normal;">(untitled)</span>'}</div>
+                ${c.preview ? `<div style="color:var(--dim);font-size:11px;margin-top:2px;">${escapeHtml(c.preview)}</div>` : ''}
+            </div>
+            <div class="meta">${escapeHtml(formatRelTime(c.updated_at))}</div>
+        </div>
+    `).join('');
+}
+
 async function deleteMessage(id, btn, source) {
     inboxBusy = true;
     // Inline confirmation: replace the trash button with yes/no.

relay/ui/layout.php

@@ -105,16 +105,22 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
         </div>
         <div id="compose-status" class="compose-status-bar"></div>
     </div>
-    <div id="inbox-section" class="section">
-        <h2><i class="ph ph-tray"></i> your inbox <span class="count" id="inbox-count">0</span>
-            <span style="flex:1"></span>
-            <button id="inbox-delete-all" class="btn btn-danger hidden" style="padding:3px 10px;font-size:9px;" onclick="deleteAllMessages()"><i class="ph ph-trash"></i> delete all</button>
-        </h2>
-        <div id="inbox-list"></div>
-    </div>
-    <div id="outbox-section" class="section">
-        <h2><i class="ph ph-paper-plane-tilt"></i> sent <span class="count" id="outbox-count">0</span></h2>
-        <div id="outbox-list"></div>
+    <div id="compose-sidebar" class="compose-sidebar">
+        <div id="inbox-section" class="section">
+            <h2><i class="ph ph-tray"></i> your inbox <span class="count" id="inbox-count">0</span>
+                <span style="flex:1"></span>
+                <button id="inbox-delete-all" class="btn btn-danger hidden" style="padding:3px 10px;font-size:9px;" onclick="deleteAllMessages()"><i class="ph ph-trash"></i> delete all</button>
+            </h2>
+            <div id="inbox-list"></div>
+        </div>
+        <div id="shared-section" class="section">
+            <h2><i class="ph ph-users-three"></i> shared buckets <span class="count" id="shared-count">0</span></h2>
+            <div id="shared-list"></div>
+        </div>
+        <div id="outbox-section" class="section">
+            <h2><i class="ph ph-paper-plane-tilt"></i> sent <span class="count" id="outbox-count">0</span></h2>
+            <div id="outbox-list"></div>
+        </div>
     </div>
 </div>
 

relay/ui/style.css

@@ -687,13 +687,19 @@ header .nav-btn .ph { font-size:11px; vertical-align:-1px; margin-right:2px; }
         border-radius: var(--radius);
     }
 
-    /* Compose view: 2-column grid */
+    /* Compose view: 2 columns. Left is the compose editor. Right is a
+       sidebar with inbox → shared → sent stacked vertically. */
     #view-compose:not(.hidden) {
         display: grid !important;
         grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
         gap: 24px;
         align-items: start;
     }
+    #compose-sidebar {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
 
     /* Cards: depth via shadow + larger padding */
     .compose-card,