design-share 0.2.2 → 0.3.1

package/README.md

@@ -62,3 +62,7 @@ Quitting with Ctrl+C in the terminal is respected as a deliberate stop. Closing
 ## Requirements
 
 Node 18 or newer, git, and a repo with an origin remote (solo local mode works without one).
+
+---
+
+Built by [Callebe](https://github.com/callebe01). If design-share saves your team some friction, you can [buy me a coffee](https://buymeacoffee.com/callebe).

package/bin/design-share.js

@@ -1,5 +1,12 @@
 #!/usr/bin/env node
-import { run } from '../src/cli.js';
+const major = Number(process.versions.node.split('.')[0]);
+if (major < 18) {
+  console.error(`\n  design-share needs Node 18 or newer. You are on ${process.versions.node}.`);
+  console.error('  Update at https://nodejs.org and run npx design-share again.\n');
+  process.exit(1);
+}
+
+const { run } = await import('../src/cli.js');
 
 run(process.argv.slice(2)).catch((err) => {
   console.error(`\n  \x1b[31m✕\x1b[0m ${err.message}`);

package/dist/DesignShare.app/Contents/Info.plist

@@ -9,9 +9,9 @@
   <key>CFBundleIdentifier</key>
   <string>com.design-share.menubar</string>
   <key>CFBundleVersion</key>
-  <string>0.1.1</string>
+  <string>0.3.0</string>
   <key>CFBundleShortVersionString</key>
-  <string>0.1.1</string>
+  <string>0.3.0</string>
   <key>CFBundleExecutable</key>
   <string>DesignShare</string>
   <key>CFBundlePackageType</key>

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "design-share",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Live branch previews and pinned comments for design teams. Zero config, no server, git is the backend.",
   "keywords": ["design", "preview", "branches", "collaboration", "cli"],
   "license": "MIT",
+  "funding": "https://buymeacoffee.com/callebe",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/callebe01/design-share.git"
+  },
+  "homepage": "https://github.com/callebe01/design-share#readme",
   "type": "module",
   "bin": {
     "design-share": "bin/design-share.js"

package/public/app.js

@@ -7,8 +7,124 @@ const icons = {
   message: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>',
   check: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>',
   plus: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+  eye: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>',
 };
 
+/* ---------- PR panel (read only) ---------- */
+
+function renderPrChip() {
+  const chip = el('pr-chip');
+  const sel = state.selected;
+  const pr = sel && state.board.prs ? state.board.prs[sel.branch] : null;
+  chip.hidden = !pr;
+  if (pr) {
+    const open = !el('pr-panel').hidden;
+    chip.innerHTML = `PR #${pr.number} <span class="chev">${open ? '▴' : '▾'}</span>`;
+    chip.title = pr.title || '';
+  } else {
+    el('pr-panel').hidden = true;
+  }
+}
+
+async function togglePrPanel(force) {
+  const panel = el('pr-panel');
+  const show = force !== undefined ? force : panel.hidden;
+  if (!show) { panel.hidden = true; renderPrChip(); return; }
+  const sel = state.selected;
+  if (!sel) return;
+  panel.innerHTML = '<div class="pr-loading"><div class="spinner"></div></div>';
+  panel.hidden = false;
+  renderPrChip();
+  const r = await fetch(`/api/pr?branch=${encodeURIComponent(sel.branch)}`).then((x) => x.json());
+  if (panel.hidden) return; // closed while loading
+  if (!r.pr) {
+    panel.innerHTML = '<div class="pr-loading">Could not load the PR right now.</div>';
+    return;
+  }
+  const pr = r.pr;
+  const stateCls = pr.state === 'OPEN' ? 'live' : pr.state === 'MERGED' ? 'merged' : 'closed';
+  panel.innerHTML = `
+    <div class="pr-head">
+      <span class="dot ${stateCls}"></span>
+      <span class="pr-title">${escapeHtml(pr.title)}</span>
+      <span class="pr-num">#${pr.number}</span>
+      <a class="pr-open" href="${escapeHtml(pr.url)}" target="_blank" rel="noopener">Open on GitHub</a>
+    </div>
+    <div class="pr-byline">${escapeHtml(pr.author)} · ${escapeHtml(pr.state.toLowerCase())} · ${timeAgo(Date.parse(pr.createdAt) / 1000)}</div>
+    ${pr.body ? `<div class="pr-body">${escapeHtml(pr.body)}</div>` : '<div class="pr-body dim-note">No description.</div>'}
+    ${pr.comments.length ? `
+      <div class="pr-comments-label">Comments (${pr.comments.length})</div>
+      ${pr.comments.map((c) => `
+        <div class="pr-comment">
+          <div class="pr-comment-head">
+            <span class="avatar">${escapeHtml((c.author || '?').slice(0, 1))}</span>
+            <b>${escapeHtml(c.author)}</b>
+            <span class="pr-comment-time">${timeAgo(Date.parse(c.createdAt) / 1000)}</span>
+          </div>
+          <div class="pr-comment-body">${escapeHtml(c.body)}</div>
+        </div>`).join('')}` : '<div class="dim-note" style="margin-top:8px">No comments on the PR yet.</div>'}
+  `;
+}
+
+/* ---------- review requests ---------- */
+
+function branchRequests(branch) {
+  if (!state.board) return [];
+  return (state.board.requests || [])
+    .filter((r) => r.branch === branch)
+    .sort((a, b) => b.updatedAt - a.updatedAt);
+}
+
+function openRequestForMe(branch) {
+  const me = state.board.me.slug;
+  return branchRequests(branch).find((r) => r.toUser === me && !r.resolvedAt);
+}
+
+function renderRequestButton() {
+  const b = state.board;
+  const sel = state.selected;
+  const btn = el('btn-request');
+  const roster = (b.users || []).filter((u) => u.user !== b.me.slug);
+  const visible = !!sel && roster.length > 0;
+  btn.hidden = !visible;
+  if (visible) btn.innerHTML = `${icons.eye} <span>Request review</span>`;
+}
+
+function toggleRequestPopover(force) {
+  const pop = el('request-popover');
+  const show = force !== undefined ? force : pop.hidden;
+  if (!show) { pop.hidden = true; return; }
+  const b = state.board;
+  const sel = state.selected;
+  if (!sel) return;
+  const roster = (b.users || [])
+    .filter((u) => u.user !== b.me.slug)
+    .sort((x, y) => (y.lastSeen || 0) - (x.lastSeen || 0));
+  pop.innerHTML = '';
+  const head = document.createElement('div');
+  head.className = 'popover-head';
+  head.textContent = `Ask someone to review ${sel.branch}`;
+  pop.appendChild(head);
+  for (const u of roster) {
+    const already = branchRequests(sel.branch).some((r) => r.toUser === u.user && !r.resolvedAt && r.fromUser === b.me.slug);
+    const row = document.createElement('button');
+    row.className = 'popover-row';
+    row.innerHTML = `
+      <span class="avatar">${escapeHtml((u.name || u.user).slice(0, 1))}</span>
+      <span class="popover-name">${escapeHtml(u.name || u.user)}</span>
+      <span class="popover-meta">${already ? 'asked' : timeAgo((u.lastSeen || 0) / 1000)}</span>`;
+    row.disabled = already;
+    row.onclick = async () => {
+      await api('/api/requests', { branch: sel.branch, toUser: u.user, toName: u.name });
+      toggleRequestPopover(false);
+      toast(`Asked ${u.name || u.user} to review ${sel.branch}`);
+      refresh();
+    };
+    pop.appendChild(row);
+  }
+  pop.hidden = false;
+}
+
 const el = (id) => document.getElementById(id);
 const state = {
   board: null,
@@ -189,9 +305,11 @@ function branchRow({ user, branch, time, dim, own }) {
 
   const unresolved = openCount(branch);
   const pr = b.prs && b.prs[branch];
+  const askedMe = openRequestForMe(branch);
   btn.innerHTML = `
     <span class="dot ${dotCls}"></span>
     <span class="branch-label">${escapeHtml(branch)}</span>
+    ${askedMe ? `<span class="badge review" title="${escapeHtml((askedMe.fromName || askedMe.fromUser) + ' asked for your review')}">review</span>` : ''}
     ${unresolved ? `<span class="badge">${unresolved}</span>` : ''}
     ${pr ? `<span class="pr-link" title="${escapeHtml(`PR #${pr.number}: ${pr.title || ''}`)}">#${pr.number}</span>` : ''}
     <span class="meta">${timeAgo(time)}</span>`;
@@ -209,6 +327,7 @@ function branchRow({ user, branch, time, dim, own }) {
 
 async function select(user, branch) {
   state.selected = { user, branch };
+  el('pr-panel').hidden = true;
   state.commentMode = false;
   state.pendingPin = null;
   state.focusedComment = null;
@@ -295,6 +414,9 @@ function renderStage() {
     el('loading-log').textContent = ps && ps.logTail ? ps.logTail.trim() : '';
   }
 
+  renderRequestButton();
+  renderPrChip();
+
   const cm = el('btn-comment-mode');
   cm.innerHTML = `${icons.message} <span>${state.commentMode ? 'Click an element to pin' : 'Comment'}</span>`;
   cm.classList.toggle('active-mode', state.commentMode);
@@ -353,11 +475,13 @@ window.addEventListener('message', (e) => {
     el('composer-text').value = '';
     el('composer-text').focus();
   } else if (d.ds === 'pin-click') {
-    state.focusedComment = d.id;
+    state.focusedComment = state.focusedComment === d.id ? null : d.id;
     renderComments();
     pushCommentsToFrame();
-    const card = document.querySelector(`[data-comment="${d.id}"]`);
-    if (card) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    if (state.focusedComment) {
+      const card = document.querySelector(`[data-comment="${d.id}"]`);
+      if (card) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
   }
 });
 
@@ -459,6 +583,34 @@ function renderComments() {
   el('comments-count').textContent = open.length ? `${open.length} open` : '';
 
   const frag = document.createDocumentFragment();
+
+  const me = state.board.me.slug;
+  for (const r of branchRequests(sel.branch).filter((x) => !x.resolvedAt)) {
+    const card = document.createElement('div');
+    card.className = 'request-card' + (r.toUser === me ? ' for-me' : '');
+    if (r.toUser === me) {
+      card.innerHTML = `<span class="request-text"><b>${escapeHtml(r.fromName || r.fromUser)}</b> asked for your review</span>
+        <span class="request-meta">${timeAgo(r.createdAt / 1000)}</span>`;
+      const done = document.createElement('button');
+      done.className = 'btn small';
+      done.textContent = 'Mark reviewed';
+      done.onclick = async () => { await api(`/api/requests/${r.id}/resolve`, { how: 'done' }); refresh(); };
+      card.appendChild(done);
+    } else if (r.fromUser === me) {
+      card.innerHTML = `<span class="request-text">You asked <b>${escapeHtml(r.toName || r.toUser)}</b> to review</span>
+        <span class="request-meta">${timeAgo(r.createdAt / 1000)}</span>`;
+      const cancel = document.createElement('button');
+      cancel.className = 'link-btn';
+      cancel.textContent = 'Cancel';
+      cancel.onclick = async () => { await api(`/api/requests/${r.id}/resolve`, { how: 'cancelled' }); refresh(); };
+      card.appendChild(cancel);
+    } else {
+      card.innerHTML = `<span class="request-text"><b>${escapeHtml(r.fromName || r.fromUser)}</b> asked <b>${escapeHtml(r.toName || r.toUser)}</b> to review</span>
+        <span class="request-meta">${timeAgo(r.createdAt / 1000)}</span>`;
+    }
+    frag.appendChild(card);
+  }
+
   if (!comments.length) {
     const d = document.createElement('div');
     d.className = 'empty-note';
@@ -539,11 +691,10 @@ function commentCard(c, num) {
 
   card.onclick = (e) => {
     if (e.target === reply || e.target.tagName === 'BUTTON') return;
-    state.focusedComment = c.id;
+    state.focusedComment = state.focusedComment === c.id ? null : c.id;
+    renderComments();
     renderPins();
     pushCommentsToFrame();
-    document.querySelectorAll('.comment-card').forEach((x) => x.classList.remove('focused'));
-    card.classList.add('focused');
   };
   return card;
 }
@@ -575,7 +726,14 @@ el('btn-retry').onclick = () => pollPreview();
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     if (!el('composer').hidden) closeComposer();
+    else if (!el('pr-panel').hidden) togglePrPanel(false);
     else if (state.commentMode) { state.commentMode = false; renderStage(); }
+    else if (state.focusedComment) {
+      state.focusedComment = null;
+      renderComments();
+      renderPins();
+      pushCommentsToFrame();
+    }
   }
 });
 
@@ -623,6 +781,26 @@ function parseHash() {
     state.railFilter = e.target.value;
     renderRail();
   });
+  const setRailCollapsed = (collapsed) => {
+    document.getElementById('app').classList.toggle('rail-collapsed', collapsed);
+    el('btn-expand').hidden = !collapsed;
+    try { localStorage.setItem('ds-rail-collapsed', collapsed ? '1' : ''); } catch { /* private mode */ }
+  };
+  el('btn-collapse').onclick = () => setRailCollapsed(true);
+  el('btn-expand').onclick = () => setRailCollapsed(false);
+  try { if (localStorage.getItem('ds-rail-collapsed') === '1') setRailCollapsed(true); } catch { /* private mode */ }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === '[' && !isTyping()) {
+      setRailCollapsed(!document.getElementById('app').classList.contains('rail-collapsed'));
+    }
+  });
+
+  el('btn-request').onclick = (e) => { e.stopPropagation(); toggleRequestPopover(); };
+  el('pr-chip').onclick = (e) => { e.stopPropagation(); togglePrPanel(); };
+  document.addEventListener('click', (e) => {
+    if (!el('request-popover').hidden && !e.target.closest('.request-wrap')) toggleRequestPopover(false);
+    if (!el('pr-panel').hidden && !e.target.closest('#pr-panel') && !e.target.closest('#pr-chip')) togglePrPanel(false);
+  });
   renderViewportSeg();
   await refresh();
   const target = parseHash();

package/public/index.html

@@ -12,6 +12,9 @@
     <div class="rail-head">
       <span class="logo-mark"></span>
       <span id="repo-name" class="repo-name">…</span>
+      <button id="btn-collapse" class="icon-btn" title="Collapse sidebar [">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+      </button>
     </div>
     <div class="rail-filter">
       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
@@ -20,20 +23,33 @@
     <div id="rail-sections"></div>
     <div class="rail-foot">
       <div id="sync-status" class="sync-status"></div>
+      <a class="coffee-link" href="https://buymeacoffee.com/callebe" target="_blank" rel="noopener">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>
+        buy me a coffee
+      </a>
     </div>
   </aside>
 
   <main id="stage">
     <header id="stage-head">
       <div class="stage-title-wrap">
+        <button id="btn-expand" class="icon-btn" title="Show sidebar [" hidden>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
         <span id="stage-title" class="stage-title">pick a branch</span>
         <span id="stage-meta" class="stage-meta"></span>
+        <button id="pr-chip" class="pr-chip" hidden></button>
       </div>
       <div class="stage-actions">
         <div class="seg" id="viewport-seg"></div>
+        <div class="request-wrap">
+          <button class="btn ghost" id="btn-request"></button>
+          <div id="request-popover" hidden></div>
+        </div>
         <button class="btn" id="btn-comment-mode"></button>
       </div>
     </header>
+    <div id="pr-panel" hidden></div>
     <div id="frame-area">
       <div id="frame-wrap">
         <div id="frame-empty" class="frame-state">

package/public/style.css

@@ -65,7 +65,23 @@ button { font: inherit; cursor: pointer; }
   background: #fff;
 }
 
-.repo-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.repo-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-3);
+  flex: none;
+}
+.icon-btn:hover { color: var(--text); background: #f2f2f4; }
+
+#app.rail-collapsed #rail { display: none; }
 
 .rail-filter {
   display: flex;
@@ -135,6 +151,135 @@ button { font: inherit; cursor: pointer; }
 }
 .pr-link:hover { color: var(--accent); border-color: var(--accent); }
 
+.badge.review { color: var(--amber); border-color: #ecd9b8; background: #fdf8ee; }
+
+.pr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+  color: var(--text-2);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 0 8px;
+  line-height: 17px;
+  background: #fff;
+  cursor: pointer;
+  flex: none;
+}
+.pr-chip:hover { color: var(--text); border-color: #d0d0d5; }
+.pr-chip .chev { font-size: 8px; color: var(--text-3); }
+
+#pr-panel {
+  position: absolute;
+  top: 46px;
+  left: 14px;
+  width: min(560px, calc(100% - 28px));
+  max-height: 55vh;
+  overflow-y: auto;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0 0 10px 10px;
+  border-top: 0;
+  box-shadow: var(--shadow);
+  padding: 12px 14px;
+  z-index: 15;
+}
+#stage { position: relative; }
+
+.pr-loading { display: flex; justify-content: center; padding: 18px; color: var(--text-3); font-size: 12px; }
+.pr-head { display: flex; align-items: center; gap: 8px; }
+.pr-head .dot.merged { background: #8250df; }
+.pr-head .dot.closed { background: var(--red); }
+.pr-title { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
+.pr-num { font-size: 11.5px; color: var(--text-3); flex: none; }
+.pr-open { font-size: 11.5px; flex: none; color: var(--text-2); text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 2px 8px; }
+.pr-open:hover { color: var(--text); border-color: #d0d0d5; }
+.pr-byline { font-size: 11.5px; color: var(--text-3); margin: 4px 0 8px; }
+.pr-body {
+  font-size: 12.5px;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 9px 11px;
+  background: #fafafa;
+  max-height: 220px;
+  overflow-y: auto;
+}
+.dim-note { font-size: 12px; color: var(--text-3); }
+.pr-comments-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin: 12px 0 6px;
+}
+.pr-comment { border-top: 1px solid var(--border); padding: 8px 0; }
+.pr-comment-head { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 3px; }
+.pr-comment-time { font-size: 10.5px; color: var(--text-3); }
+.pr-comment-body { font-size: 12.5px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
+
+.request-wrap { position: relative; }
+#request-popover {
+  position: absolute;
+  top: 32px;
+  right: 0;
+  width: 240px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  padding: 6px;
+  z-index: 20;
+}
+.popover-head {
+  font-size: 11px;
+  color: var(--text-3);
+  padding: 5px 8px 7px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.popover-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius);
+  padding: 6px 8px;
+  font-size: 12.5px;
+  color: var(--text);
+  text-align: left;
+}
+.popover-row:hover:not(:disabled) { background: #f2f2f4; }
+.popover-row:disabled { opacity: 0.5; cursor: default; }
+.popover-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.popover-meta { font-size: 10.5px; color: var(--text-3); flex: none; }
+
+.request-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-2);
+  background: #fafafa;
+}
+.request-card.for-me { border-color: #ecd9b8; background: #fdf8ee; color: var(--text); }
+.request-card .request-text { flex: 1; min-width: 120px; }
+.request-card .request-meta { font-size: 10.5px; color: var(--text-3); }
+
 .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
 .dot.live { background: var(--green); }
 .dot.idle { background: #d4d4d8; }
@@ -164,9 +309,19 @@ button { font: inherit; cursor: pointer; }
 }
 .share-cta:hover { color: var(--text); border-color: #d0d0d5; }
 
-.rail-foot { border-top: 1px solid var(--border); padding: 8px 16px; }
+.rail-foot { border-top: 1px solid var(--border); padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
 .sync-status { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
 .sync-status .dot { width: 6px; height: 6px; }
+.coffee-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10.5px;
+  color: var(--text-3);
+  text-decoration: none;
+  width: fit-content;
+}
+.coffee-link:hover { color: var(--text-2); }
 
 /* ---------- stage ---------- */
 
@@ -247,12 +402,17 @@ button { font: inherit; cursor: pointer; }
   max-width: 100%;
   background: var(--panel);
   transition: max-width 0.18s ease;
+  min-height: 100%;
+}
+#frame-wrap.vw-tablet,
+#frame-wrap.vw-mobile {
+  margin: 0 auto;
+  box-shadow: var(--shadow);
   border-left: 1px solid var(--border);
   border-right: 1px solid var(--border);
-  min-height: 100%;
 }
-#frame-wrap.vw-tablet { max-width: 834px; margin: 0 auto; box-shadow: var(--shadow); }
-#frame-wrap.vw-mobile { max-width: 390px; margin: 0 auto; box-shadow: var(--shadow); }
+#frame-wrap.vw-tablet { max-width: 834px; }
+#frame-wrap.vw-mobile { max-width: 390px; }
 
 #frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
 

package/src/github.js

@@ -3,6 +3,37 @@ import { execFile } from 'node:child_process';
 // PR links come from the gh CLI so no tokens are stored or handled: gh uses
 // whoever is already logged in. Machines without gh (or without auth) simply
 // return an empty map and the dashboard shows no PR links.
+// Read only PR detail for the header panel: description plus conversation.
+export function prDetail(repoRoot, number) {
+  return new Promise((resolve) => {
+    execFile('gh', [
+      'pr', 'view', String(number),
+      '--json', 'number,title,body,state,author,url,createdAt,comments',
+    ], { cwd: repoRoot, timeout: 15_000 }, (err, stdout) => {
+      if (err) return resolve(null);
+      try {
+        const d = JSON.parse(stdout);
+        resolve({
+          number: d.number,
+          title: d.title,
+          body: d.body || '',
+          state: d.state,
+          url: d.url,
+          author: (d.author && d.author.login) || '',
+          createdAt: d.createdAt,
+          comments: (d.comments || []).map((c) => ({
+            author: (c.author && c.author.login) || '',
+            body: c.body || '',
+            createdAt: c.createdAt,
+          })),
+        });
+      } catch {
+        resolve(null);
+      }
+    });
+  });
+}
+
 export function listOpenPRs(repoRoot) {
   return new Promise((resolve) => {
     execFile('gh', [

package/src/server.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { tryGit } from './git.js';
 import { currentBranch } from './detect.js';
 import { serveStatic } from './previews.js';
-import { listOpenPRs } from './github.js';
+import { listOpenPRs, prDetail } from './github.js';
 
 const PUBLIC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'public');
 const SYNC_INTERVAL_MS = 15_000;
@@ -89,6 +89,8 @@ export class DesignShareServer {
       heads,
       otherBranches: others,
       comments: Object.values(state.comments || {}),
+      users: Object.values(state.users || {}),
+      requests: Object.values(state.requests || {}),
       previews: this.previews.statuses(),
       prs: this.prs,
       sync: {
@@ -108,6 +110,19 @@ export class DesignShareServer {
         if (req.method === 'GET' && p === '/api/board') {
           return json(res, 200, await this.board());
         }
+        if (req.method === 'GET' && p === '/api/pr') {
+          const branch = url.searchParams.get('branch') || '';
+          const pr = this.prs[branch];
+          if (!pr) return json(res, 200, { pr: null });
+          this._prDetailCache = this._prDetailCache || new Map();
+          const cached = this._prDetailCache.get(pr.number);
+          if (cached && Date.now() - cached.at < 120_000) {
+            return json(res, 200, { pr: cached.data });
+          }
+          const data = await prDetail(this.repo.root, pr.number);
+          if (data) this._prDetailCache.set(pr.number, { at: Date.now(), data });
+          return json(res, 200, { pr: data });
+        }
         if (req.method === 'POST' && p === '/api/share') {
           const body = await readBody(req);
           const branch = body.branch || (await currentBranch(this.repo.root));
@@ -145,9 +160,27 @@ export class DesignShareServer {
             commit,
             text: String(body.text || '').slice(0, 4000),
           });
+          this.store.autoResolveRequests(body.branch);
           this.syncSoon();
           return json(res, 200, { ok: true, id });
         }
+        if (req.method === 'POST' && p === '/api/requests') {
+          const body = await readBody(req);
+          const id = this.store.requestReview({
+            branch: String(body.branch || ''),
+            toUser: String(body.toUser || ''),
+            toName: String(body.toName || body.toUser || ''),
+          });
+          this.syncSoon();
+          return json(res, 200, { ok: true, id });
+        }
+        const reqResolveMatch = p.match(/^\/api\/requests\/([a-z0-9]+)\/resolve$/);
+        if (req.method === 'POST' && reqResolveMatch) {
+          const body = await readBody(req);
+          this.store.resolveRequest(reqResolveMatch[1], body.how);
+          this.syncSoon();
+          return json(res, 200, { ok: true });
+        }
         const replyMatch = p.match(/^\/api\/comments\/([a-z0-9]+)\/replies$/);
         if (req.method === 'POST' && replyMatch) {
           const body = await readBody(req);

package/src/state.js

@@ -5,7 +5,7 @@ const REF = 'refs/design-share/state';
 const REMOTE_REF = 'refs/design-share/remote';
 
 export function emptyState() {
-  return { version: 1, shares: {}, comments: {} };
+  return { version: 1, shares: {}, comments: {}, users: {}, requests: {} };
 }
 
 export function newId() {
@@ -45,6 +45,18 @@ export function mergeStates(a, b) {
       out.comments[k] = ca || cb;
     }
   }
+  const userKeys = new Set([...Object.keys(a.users || {}), ...Object.keys(b.users || {})]);
+  for (const k of userKeys) {
+    const ua = (a.users || {})[k];
+    const ub = (b.users || {})[k];
+    out.users[k] = ua && ub ? ((ua.lastSeen || 0) >= (ub.lastSeen || 0) ? ua : ub) : (ua || ub);
+  }
+  const reqKeys = new Set([...Object.keys(a.requests || {}), ...Object.keys(b.requests || {})]);
+  for (const k of reqKeys) {
+    const ra = (a.requests || {})[k];
+    const rb = (b.requests || {})[k];
+    out.requests[k] = ra && rb ? newer(ra, rb) : (ra || rb);
+  }
   return out;
 }
 
@@ -93,8 +105,22 @@ export class StateStore {
     await git(this.repoRoot, ['update-ref', REF, commit]);
   }
 
+  // Presence: mark this user as someone who runs design-share so the
+  // review request picker only offers reachable people. Throttled so it
+  // does not force a push on every sync cycle.
+  stampPresence() {
+    const now = Date.now();
+    const u = (this.state.users || {})[this.identity.slug];
+    if (u && now - (u.lastSeen || 0) < 60 * 60 * 1000) return;
+    this.mutate((s) => {
+      s.users = s.users || {};
+      s.users[this.identity.slug] = { user: this.identity.slug, name: this.identity.name, lastSeen: now };
+    });
+  }
+
   // Fetch remote state, merge, persist locally, push if anything moved.
   async sync() {
+    this.stampPresence();
     try {
       let remoteState = null;
       if (this.hasRemote) {
@@ -175,6 +201,59 @@ export class StateStore {
     return id;
   }
 
+  requestReview({ branch, toUser, toName }) {
+    const id = newId();
+    const now = Date.now();
+    this.mutate((s) => {
+      s.requests = s.requests || {};
+      // One open request per branch per person: refresh an existing one.
+      const existing = Object.values(s.requests).find(
+        (r) => r.branch === branch && r.toUser === toUser && !r.resolvedAt,
+      );
+      const key = existing ? existing.id : id;
+      s.requests[key] = {
+        id: key,
+        branch,
+        fromUser: this.identity.slug,
+        fromName: this.identity.name,
+        toUser,
+        toName,
+        createdAt: existing ? existing.createdAt : now,
+        updatedAt: now,
+        resolvedAt: null,
+        resolvedBy: null,
+      };
+    });
+    return id;
+  }
+
+  resolveRequest(requestId, how) {
+    const now = Date.now();
+    this.mutate((s) => {
+      const r = (s.requests || {})[requestId];
+      if (!r) return;
+      r.resolvedAt = now;
+      r.resolvedBy = this.identity.slug;
+      r.resolvedHow = how || 'done';
+      r.updatedAt = now;
+    });
+  }
+
+  // A comment from the requested person is the review happening; close the loop.
+  autoResolveRequests(branch) {
+    const now = Date.now();
+    this.mutate((s) => {
+      for (const r of Object.values(s.requests || {})) {
+        if (r.branch === branch && r.toUser === this.identity.slug && !r.resolvedAt) {
+          r.resolvedAt = now;
+          r.resolvedBy = this.identity.slug;
+          r.resolvedHow = 'commented';
+          r.updatedAt = now;
+        }
+      }
+    });
+  }
+
   reply(commentId, text) {
     const now = Date.now();
     this.mutate((s) => {