design-share 0.2.0 → 0.3.0

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,6 +1,6 @@
 {
   "name": "design-share",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",

package/public/app.js

@@ -7,8 +7,68 @@ 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>',
 };
 
+/* ---------- 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,
@@ -188,12 +248,22 @@ function branchRow({ user, branch, time, dim, own }) {
   else if (isOwnServing && prev && prev.status === 'ready') dotCls = 'live';
 
   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>`;
   btn.onclick = () => select(user, branch);
+  if (pr) {
+    btn.querySelector('.pr-link').onclick = (e) => {
+      e.stopPropagation();
+      window.open(pr.url, '_blank');
+    };
+  }
   return btn;
 }
 
@@ -287,6 +357,8 @@ function renderStage() {
     el('loading-log').textContent = ps && ps.logTail ? ps.logTail.trim() : '';
   }
 
+  renderRequestButton();
+
   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);
@@ -345,11 +417,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' });
+    }
   }
 });
 
@@ -451,6 +525,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';
@@ -531,11 +633,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;
 }
@@ -568,6 +669,12 @@ document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     if (!el('composer').hidden) closeComposer();
     else if (state.commentMode) { state.commentMode = false; renderStage(); }
+    else if (state.focusedComment) {
+      state.focusedComment = null;
+      renderComments();
+      renderPins();
+      pushCommentsToFrame();
+    }
   }
 });
 
@@ -615,6 +722,10 @@ function parseHash() {
     state.railFilter = e.target.value;
     renderRail();
   });
+  el('btn-request').onclick = (e) => { e.stopPropagation(); toggleRequestPopover(); };
+  document.addEventListener('click', (e) => {
+    if (!el('request-popover').hidden && !e.target.closest('.request-wrap')) toggleRequestPopover(false);
+  });
   renderViewportSeg();
   await refresh();
   const target = parseHash();

package/public/index.html

@@ -31,6 +31,10 @@
       </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>

package/public/style.css

@@ -123,6 +123,78 @@ button { font: inherit; cursor: pointer; }
 .branch-row .meta { font-size: 11px; color: var(--text-3); flex: none; }
 .branch-row.dim { color: var(--text-2); }
 
+.pr-link {
+  font-size: 10.5px;
+  color: var(--text-3);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 0 6px;
+  line-height: 16px;
+  flex: none;
+  background: #fff;
+}
+.pr-link:hover { color: var(--accent); border-color: var(--accent); }
+
+.badge.review { color: var(--amber); border-color: #ecd9b8; background: #fdf8ee; }
+
+.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; }

package/src/github.js

@@ -0,0 +1,24 @@
+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.
+export function listOpenPRs(repoRoot) {
+  return new Promise((resolve) => {
+    execFile('gh', [
+      'pr', 'list', '--state', 'open', '--limit', '200',
+      '--json', 'number,url,headRefName,title',
+    ], { cwd: repoRoot, timeout: 15_000 }, (err, stdout) => {
+      if (err) return resolve({});
+      try {
+        const byBranch = {};
+        for (const pr of JSON.parse(stdout)) {
+          byBranch[pr.headRefName] = { number: pr.number, url: pr.url, title: pr.title };
+        }
+        resolve(byBranch);
+      } catch {
+        resolve({});
+      }
+    });
+  });
+}

package/src/server.js

@@ -5,6 +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';
 
 const PUBLIC_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'public');
 const SYNC_INTERVAL_MS = 15_000;
@@ -36,6 +37,11 @@ export class DesignShareServer {
     this.port = port;
     this.server = null;
     this.timers = [];
+    this.prs = {};
+  }
+
+  async refreshPRs() {
+    this.prs = await listOpenPRs(this.repo.root);
   }
 
   async branchHeads() {
@@ -83,7 +89,10 @@ 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: {
         hasRemote: this.store.hasRemote,
         lastSync: this.store.lastSync,
@@ -138,9 +147,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);
@@ -202,6 +229,8 @@ export class DesignShareServer {
             () => tryGit(this.repo.root, ['fetch', '--quiet', 'origin']),
             FETCH_INTERVAL_MS,
           ));
+          this.refreshPRs();
+          this.timers.push(setInterval(() => this.refreshPRs(), 180_000));
           resolve(port);
         });
       };

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) => {