design-share 0.1.0 → 0.2.0

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.0</string>
+  <string>0.1.1</string>
   <key>CFBundleShortVersionString</key>
-  <string>0.1.0</string>
+  <string>0.1.1</string>
   <key>CFBundleExecutable</key>
   <string>DesignShare</string>
   <key>CFBundlePackageType</key>

package/package.json

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

@@ -15,10 +15,13 @@ const state = {
   selected: null,          // { user, branch }
   viewport: 'desktop',
   commentMode: false,
-  pendingPin: null,        // { xPct, yPct }
+  pendingPin: null,        // { xPct, yPct, selector?, elementLabel?, relX?, relY?, route? }
   focusedComment: null,
   previewStatus: null,
   frameUrl: null,
+  bridge: false,           // true when the injected inspector answered from inside the iframe
+  route: '/',
+  railFilter: '',
 };
 
 const VIEWPORTS = [
@@ -79,62 +82,81 @@ function renderRail() {
 
   const sections = el('rail-sections');
   const frag = document.createDocumentFragment();
+  const filter = (state.railFilter || '').trim().toLowerCase();
+
+  // One section per person. Shared branches render bright; branches that
+  // exist on origin without being shared render dim under the same author.
+  const people = new Map(); // slug -> { slug, name, items: [{user, branch, time, shared}] }
+  const person = (slug, name) => {
+    if (!people.has(slug)) people.set(slug, { slug, name, items: [] });
+    return people.get(slug);
+  };
 
   const shares = b.shares.slice().sort((x, y) => (y.updatedAt || 0) - (x.updatedAt || 0));
-  const byUser = new Map();
   for (const s of shares) {
-    if (!byUser.has(s.user)) byUser.set(s.user, { name: s.name, items: [] });
-    byUser.get(s.user).items.push(s);
+    person(s.user, s.name).items.push({
+      user: s.user, branch: s.branch, shared: true,
+      time: b.heads[s.branch] ? b.heads[s.branch].time : s.updatedAt / 1000,
+    });
+  }
+  for (const o of b.otherBranches) {
+    const slug = slugify(o.author);
+    person(slug, people.has(slug) ? people.get(slug).name : (o.author || 'someone'))
+      .items.push({ user: slug, branch: o.branch, shared: false, time: o.time });
   }
 
-  // Me first
-  const order = [...byUser.keys()].sort((x, y) => (x === b.me.slug ? -1 : y === b.me.slug ? 1 : 0));
-
-  const ownShared = byUser.has(b.me.slug) && byUser.get(b.me.slug).items.some((s) => s.branch === b.ownBranch);
+  const me = people.get(b.me.slug);
+  const ownShared = !!(me && me.items.some((i) => i.branch === b.ownBranch && i.shared));
   if (b.ownBranch && !ownShared) {
-    const label = document.createElement('div');
-    label.className = 'rail-section-label';
-    label.textContent = 'you';
-    frag.appendChild(label);
-    frag.appendChild(branchRow({
-      user: b.me.slug, branch: b.ownBranch, own: true,
+    const mine = person(b.me.slug, b.me.name);
+    mine.items = mine.items.filter((i) => i.branch !== b.ownBranch);
+    mine.items.unshift({
+      user: b.me.slug, branch: b.ownBranch, shared: true, own: true,
       time: b.heads[b.ownBranch] ? b.heads[b.ownBranch].time : null,
-    }));
-    const cta = document.createElement('button');
-    cta.className = 'share-cta';
-    cta.innerHTML = `${icons.plus}  share ${escapeHtml(b.ownBranch)} with the board`;
-    cta.onclick = async () => {
-      await api('/api/share', { branch: b.ownBranch });
-      toast('Shared with the team board');
-      refresh();
-    };
-    frag.appendChild(cta);
+    });
   }
 
-  for (const user of order) {
-    const group = byUser.get(user);
+  const latest = (p) => Math.max(...p.items.map((i) => i.time || 0), 0);
+  const order = [...people.values()].sort((x, y) => {
+    if (x.slug === b.me.slug) return -1;
+    if (y.slug === b.me.slug) return 1;
+    const xs = x.items.some((i) => i.shared), ys = y.items.some((i) => i.shared);
+    if (xs !== ys) return xs ? -1 : 1;
+    return latest(y) - latest(x);
+  });
+
+  let shown = 0;
+  for (const p of order) {
+    const items = p.items.filter((i) =>
+      !filter || i.branch.toLowerCase().includes(filter) || p.name.toLowerCase().includes(filter));
+    if (!items.length) continue;
+    shown += items.length;
+
     const label = document.createElement('div');
     label.className = 'rail-section-label';
-    label.textContent = user === b.me.slug ? `${group.name} (you)` : group.name;
+    label.textContent = p.slug === b.me.slug ? `${p.name} (you)` : p.name;
     frag.appendChild(label);
-    for (const s of group.items) {
-      frag.appendChild(branchRow({
-        user: s.user, branch: s.branch,
-        time: b.heads[s.branch] ? b.heads[s.branch].time : s.updatedAt / 1000,
-      }));
+    for (const i of items) {
+      frag.appendChild(branchRow({ user: i.user, branch: i.branch, time: i.time, dim: !i.shared }));
+    }
+    if (p.slug === b.me.slug && b.ownBranch && !ownShared && (!filter || b.ownBranch.toLowerCase().includes(filter))) {
+      const cta = document.createElement('button');
+      cta.className = 'share-cta';
+      cta.innerHTML = `${icons.plus}  share ${escapeHtml(b.ownBranch)} with the board`;
+      cta.onclick = async () => {
+        await api('/api/share', { branch: b.ownBranch });
+        toast('Shared with the team board');
+        refresh();
+      };
+      frag.appendChild(cta);
     }
   }
 
-  if (b.otherBranches.length) {
-    const label = document.createElement('div');
-    label.className = 'rail-section-label';
-    label.textContent = 'other branches';
-    frag.appendChild(label);
-    for (const o of b.otherBranches.slice(0, 12)) {
-      frag.appendChild(branchRow({
-        user: slugify(o.author), branch: o.branch, time: o.time, dim: true,
-      }));
-    }
+  if (!shown) {
+    const empty = document.createElement('div');
+    empty.className = 'empty-note';
+    empty.textContent = filter ? 'Nothing matches this filter.' : 'No branches yet.';
+    frag.appendChild(empty);
   }
 
   sections.replaceChildren(frag);
@@ -183,6 +205,7 @@ async function select(user, branch) {
   state.pendingPin = null;
   state.focusedComment = null;
   state.frameUrl = null;
+  state.bridge = false;
   location.hash = `#/u/${encodeURIComponent(user)}/${encodeURIComponent(branch)}`;
   el('frame').hidden = true;
   el('frame').src = 'about:blank';
@@ -228,7 +251,9 @@ function renderStage() {
   }
 
   const share = b.shares.find((s) => s.user === sel.user && s.branch === sel.branch);
-  const authorName = share ? share.name : (sel.user === b.me.slug ? b.me.name : sel.user);
+  const authorName = share ? share.name
+    : sel.user === b.me.slug ? b.me.name
+    : (b.heads[sel.branch] && b.heads[sel.branch].author) || sel.user;
   const head = b.heads[sel.branch];
   el('stage-title').textContent = sel.branch;
   el('stage-meta').textContent = `${authorName}${head ? ' · updated ' + timeAgo(head.time) : ''}${sel.user === b.me.slug && sel.branch === b.ownBranch ? ' · your working copy' : ''}`;
@@ -263,19 +288,78 @@ function renderStage() {
   }
 
   const cm = el('btn-comment-mode');
-  cm.innerHTML = `${icons.message} <span>${state.commentMode ? 'Click to place pin' : 'Comment'}</span>`;
+  cm.innerHTML = `${icons.message} <span>${state.commentMode ? 'Click an element to pin' : 'Comment'}</span>`;
   cm.classList.toggle('active-mode', state.commentMode);
-  el('pin-layer').classList.toggle('capture', state.commentMode);
+  // The in-page inspector handles hover + capture when present; the overlay
+  // only captures clicks as a fallback for previews the proxy could not reach.
+  el('pin-layer').classList.toggle('capture', state.commentMode && !state.bridge);
+  sendToFrame({ ds: 'mode', comment: state.commentMode });
 
   renderPins();
 }
 
+function sendToFrame(msg) {
+  const frame = el('frame');
+  if (frame.contentWindow) {
+    try { frame.contentWindow.postMessage(msg, '*'); } catch { /* not ready */ }
+  }
+}
+
+function pushCommentsToFrame() {
+  const sel = state.selected;
+  if (!sel || !state.bridge) return;
+  const items = branchComments(sel.branch).map((c, i) => ({
+    id: c.id,
+    n: i + 1,
+    selector: c.selector || null,
+    relX: c.relX,
+    relY: c.relY,
+    xPct: c.xPct,
+    yPct: c.yPct,
+    resolved: !!c.resolvedAt,
+  }));
+  sendToFrame({ ds: 'comments', items, focusedId: state.focusedComment });
+}
+
+window.addEventListener('message', (e) => {
+  const frame = el('frame');
+  if (e.source !== frame.contentWindow) return;
+  const d = e.data || {};
+  if (d.ds === 'ready') {
+    state.bridge = true;
+    state.route = d.route || '/';
+    sendToFrame({ ds: 'mode', comment: state.commentMode });
+    pushCommentsToFrame();
+    renderStage();
+  } else if (d.ds === 'pin') {
+    state.pendingPin = {
+      xPct: d.xPct, yPct: d.yPct,
+      selector: d.selector, elementLabel: d.elementLabel,
+      relX: d.relX, relY: d.relY, route: d.route,
+    };
+    const composer = el('composer');
+    composer.hidden = false;
+    const wrap = el('frame-wrap');
+    composer.style.left = Math.min(d.clientX, wrap.clientWidth - 260) + 'px';
+    composer.style.top = Math.min(d.clientY + 14, wrap.clientHeight - 120) + 'px';
+    el('composer-text').value = '';
+    el('composer-text').focus();
+  } else if (d.ds === 'pin-click') {
+    state.focusedComment = d.id;
+    renderComments();
+    pushCommentsToFrame();
+    const card = document.querySelector(`[data-comment="${d.id}"]`);
+    if (card) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }
+});
+
 /* ---------- pins ---------- */
 
 function renderPins() {
   const layer = el('pin-layer');
   layer.querySelectorAll('.pin').forEach((p) => p.remove());
   const sel = state.selected;
+  if (state.bridge) { pushCommentsToFrame(); return; }
   if (!sel || el('frame').hidden) return;
   const comments = branchComments(sel.branch);
   comments.forEach((c, i) => {
@@ -317,12 +401,17 @@ async function postComment() {
   const sel = state.selected;
   if (!text || !sel || !state.pendingPin) return;
   const rect = el('pin-layer').getBoundingClientRect();
+  const pin = state.pendingPin;
   await api('/api/comments', {
     targetUser: sel.user,
     branch: sel.branch,
-    route: state.frameUrl ? new URL(state.frameUrl).pathname : '/',
-    xPct: state.pendingPin.xPct,
-    yPct: state.pendingPin.yPct,
+    route: pin.route || state.route || '/',
+    xPct: pin.xPct,
+    yPct: pin.yPct,
+    selector: pin.selector || null,
+    elementLabel: pin.elementLabel || null,
+    relX: pin.relX,
+    relY: pin.relY,
     viewportLabel: state.viewport,
     viewportW: Math.round(rect.width),
     viewportH: Math.round(rect.height),
@@ -400,6 +489,7 @@ function commentCard(c, num) {
       <span class="comment-num">${num}</span>
     </div>
     <div class="comment-text">${escapeHtml(c.text)}</div>
+    ${c.elementLabel ? `<div class="comment-anchor">${escapeHtml(c.elementLabel)}</div>` : ''}
     <div class="comment-meta">
       <span>${timeAgo(c.createdAt / 1000)}</span>
       ${c.viewportLabel ? `<span>· ${escapeHtml(c.viewportLabel)}</span>` : ''}
@@ -443,6 +533,7 @@ function commentCard(c, num) {
     if (e.target === reply || e.target.tagName === 'BUTTON') return;
     state.focusedComment = c.id;
     renderPins();
+    pushCommentsToFrame();
     document.querySelectorAll('.comment-card').forEach((x) => x.classList.remove('focused'));
     card.classList.add('focused');
   };
@@ -514,6 +605,16 @@ function parseHash() {
 }
 
 (async function boot() {
+  // Each iframe navigation starts a fresh document; assume no inspector until
+  // the injected script announces itself again.
+  el('frame').addEventListener('load', () => {
+    state.bridge = false;
+    setTimeout(() => renderStage(), 300);
+  });
+  el('branch-filter').addEventListener('input', (e) => {
+    state.railFilter = e.target.value;
+    renderRail();
+  });
   renderViewportSeg();
   await refresh();
   const target = parseHash();

package/public/index.html

@@ -13,6 +13,10 @@
       <span class="logo-mark"></span>
       <span id="repo-name" class="repo-name">…</span>
     </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>
+      <input id="branch-filter" placeholder="Filter people or branches" spellcheck="false" autocomplete="off">
+    </div>
     <div id="rail-sections"></div>
     <div class="rail-foot">
       <div id="sync-status" class="sync-status"></div>

package/public/inspect.js

@@ -0,0 +1,233 @@
+/* design-share in-page inspector.
+   Injected into previews by the daemon proxy. Draws the hover highlight and
+   tooltip during comment mode, anchors pins to real elements, and talks to
+   the dashboard through postMessage. Inert when not framed by the dashboard. */
+(function () {
+  'use strict';
+  if (window.top === window || window.__designShareInspector) return;
+  window.__designShareInspector = true;
+
+  var Z = 2147483000;
+  var commentMode = false;
+  var comments = [];
+  var focusedId = null;
+
+  /* ---------- chrome (highlight box, tooltip, pin layer) ---------- */
+
+  var css = [
+    '.__ds-box{position:fixed;pointer-events:none;z-index:' + Z + ';border:1.5px solid #2f7cf6;',
+    'border-radius:3px;background:rgba(47,124,246,0.06);display:none;box-sizing:border-box;}',
+    '.__ds-tip{position:fixed;pointer-events:none;z-index:' + (Z + 2) + ';background:#16161a;color:#fff;',
+    'font:12px/1.45 -apple-system,BlinkMacSystemFont,sans-serif;padding:6px 10px;border-radius:7px;',
+    'max-width:340px;box-shadow:0 4px 16px rgba(0,0,0,0.3);display:none;white-space:nowrap;',
+    'overflow:hidden;text-overflow:ellipsis;}',
+    '.__ds-tip b{font-weight:600;color:#9ec2ff;}',
+    '.__ds-pin{position:fixed;z-index:' + (Z + 1) + ';width:20px;height:20px;border-radius:50% 50% 50% 0;',
+    'transform:translate(-3px,-17px) rotate(-45deg);background:#2f7cf6;color:#fff;border:2px solid #fff;',
+    'box-shadow:0 1px 4px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;',
+    'font:600 10px -apple-system,sans-serif;cursor:pointer;}',
+    '.__ds-pin>span{transform:rotate(45deg);}',
+    '.__ds-pin.__ds-resolved{background:#2da562;opacity:0.55;}',
+    '.__ds-pin.__ds-focused{outline:2px solid #2f7cf6;outline-offset:2px;}',
+    '.__ds-comment-cursor,.__ds-comment-cursor *{cursor:crosshair !important;}',
+  ].join('');
+  var style = document.createElement('style');
+  style.textContent = css;
+  document.documentElement.appendChild(style);
+
+  var box = document.createElement('div');
+  box.className = '__ds-box';
+  var tip = document.createElement('div');
+  tip.className = '__ds-tip';
+  document.documentElement.appendChild(box);
+  document.documentElement.appendChild(tip);
+  var pinLayer = document.createElement('div');
+  document.documentElement.appendChild(pinLayer);
+
+  /* ---------- element naming, selectors ---------- */
+
+  var FRIENDLY = {
+    p: 'paragraph', a: 'link', img: 'image', button: 'button', input: 'input',
+    textarea: 'input', select: 'input', ul: 'list', ol: 'list', li: 'list item',
+    nav: 'navigation', svg: 'icon', video: 'video', form: 'form', table: 'table',
+    label: 'label', header: 'header', footer: 'footer', section: 'section',
+  };
+  function friendlyName(el) {
+    var t = el.tagName.toLowerCase();
+    if (/^h[1-6]$/.test(t)) return 'heading';
+    return FRIENDLY[t] || t;
+  }
+
+  function labelFor(el) {
+    var name = friendlyName(el);
+    var text = (el.innerText || el.getAttribute('alt') || el.getAttribute('aria-label') || '')
+      .replace(/\s+/g, ' ').trim();
+    if (text.length > 42) text = text.slice(0, 42) + '…';
+    return { name: name, text: text };
+  }
+
+  function cssPath(el) {
+    if (el.id) return '#' + CSS.escape(el.id);
+    var parts = [];
+    var node = el;
+    while (node && node.nodeType === 1 && node !== document.body && parts.length < 6) {
+      var tag = node.tagName.toLowerCase();
+      if (node.id) { parts.unshift('#' + CSS.escape(node.id)); break; }
+      var index = 1, sib = node;
+      while ((sib = sib.previousElementSibling)) {
+        if (sib.tagName === node.tagName) index++;
+      }
+      parts.unshift(tag + ':nth-of-type(' + index + ')');
+      node = node.parentElement;
+    }
+    return parts.join(' > ');
+  }
+
+  function isOurs(el) {
+    return el && el.className && typeof el.className === 'string' && el.className.indexOf('__ds-') !== -1;
+  }
+
+  /* ---------- hover highlight ---------- */
+
+  var hoverEl = null;
+
+  function showHighlight(el, x, y) {
+    var r = el.getBoundingClientRect();
+    box.style.display = 'block';
+    box.style.left = r.left + 'px';
+    box.style.top = r.top + 'px';
+    box.style.width = r.width + 'px';
+    box.style.height = r.height + 'px';
+
+    var info = labelFor(el);
+    tip.innerHTML = '<b>' + info.name + '</b>' + (info.text ? ': “' + escapeHtml(info.text) + '”' : '');
+    tip.style.display = 'block';
+    var tw = tip.offsetWidth, th = tip.offsetHeight;
+    var tx = Math.min(Math.max(8, x + 12), window.innerWidth - tw - 8);
+    var ty = y + 16 + th > window.innerHeight - 8 ? y - th - 10 : y + 16;
+    tip.style.left = tx + 'px';
+    tip.style.top = ty + 'px';
+  }
+
+  function hideHighlight() {
+    box.style.display = 'none';
+    tip.style.display = 'none';
+    hoverEl = null;
+  }
+
+  function escapeHtml(s) {
+    return s.replace(/[&<>"]/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
+    });
+  }
+
+  document.addEventListener('mousemove', function (e) {
+    if (!commentMode) return;
+    var el = e.target;
+    if (isOurs(el) || el === document.body || el === document.documentElement) { hideHighlight(); return; }
+    hoverEl = el;
+    showHighlight(el, e.clientX, e.clientY);
+  }, true);
+
+  document.addEventListener('mouseleave', hideHighlight, true);
+
+  /* ---------- click to pin ---------- */
+
+  ['click', 'mousedown', 'mouseup'].forEach(function (type) {
+    document.addEventListener(type, function (e) {
+      if (!commentMode) return;
+      if (isOurs(e.target)) return; // pins stay clickable
+      e.preventDefault();
+      e.stopPropagation();
+      if (type !== 'click') return;
+      var el = hoverEl || e.target;
+      var r = el.getBoundingClientRect();
+      var info = labelFor(el);
+      parent.postMessage({
+        ds: 'pin',
+        selector: cssPath(el),
+        elementLabel: info.name + (info.text ? ': “' + info.text + '”' : ''),
+        relX: r.width ? (e.clientX - r.left) / r.width : 0.5,
+        relY: r.height ? (e.clientY - r.top) / r.height : 0.5,
+        xPct: (e.clientX / window.innerWidth) * 100,
+        yPct: (e.clientY / window.innerHeight) * 100,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        route: location.pathname,
+      }, '*');
+      hideHighlight();
+    }, true);
+  });
+
+  /* ---------- pins anchored to elements ---------- */
+
+  function renderPins() {
+    pinLayer.innerHTML = '';
+    comments.forEach(function (c) {
+      if (c.resolved && c.id !== focusedId) return;
+      var x = null, y = null;
+      var el = null;
+      if (c.selector) {
+        try { el = document.querySelector(c.selector); } catch (err) { el = null; }
+      }
+      if (el) {
+        var r = el.getBoundingClientRect();
+        if (r.width || r.height) {
+          x = r.left + (c.relX == null ? 0.5 : c.relX) * r.width;
+          y = r.top + (c.relY == null ? 0.5 : c.relY) * r.height;
+        }
+      }
+      if (x == null && c.xPct != null) {
+        x = (c.xPct / 100) * window.innerWidth;
+        y = (c.yPct / 100) * window.innerHeight;
+      }
+      if (x == null) return;
+      var pin = document.createElement('div');
+      pin.className = '__ds-pin' + (c.resolved ? ' __ds-resolved' : '') + (c.id === focusedId ? ' __ds-focused' : '');
+      pin.style.left = x + 'px';
+      pin.style.top = y + 'px';
+      pin.innerHTML = '<span>' + c.n + '</span>';
+      pin.addEventListener('click', function (e) {
+        e.stopPropagation();
+        parent.postMessage({ ds: 'pin-click', id: c.id }, '*');
+      });
+      pinLayer.appendChild(pin);
+    });
+  }
+
+  var repaintQueued = false;
+  function queueRepaint() {
+    if (repaintQueued) return;
+    repaintQueued = true;
+    requestAnimationFrame(function () { repaintQueued = false; renderPins(); });
+  }
+  window.addEventListener('scroll', queueRepaint, true);
+  window.addEventListener('resize', queueRepaint);
+  setInterval(queueRepaint, 900);
+
+  /* ---------- bridge ---------- */
+
+  window.addEventListener('message', function (e) {
+    var d = e.data || {};
+    if (d.ds === 'mode') {
+      commentMode = !!d.comment;
+      document.documentElement.classList.toggle('__ds-comment-cursor', commentMode);
+      if (!commentMode) hideHighlight();
+    } else if (d.ds === 'comments') {
+      comments = d.items || [];
+      focusedId = d.focusedId || null;
+      renderPins();
+    }
+  });
+
+  function announce() {
+    parent.postMessage({ ds: 'ready', route: location.pathname }, '*');
+  }
+  announce();
+  // The parent resets its bridge flag on iframe load, which fires after the
+  // first announce. Announce again once the page is fully loaded.
+  window.addEventListener('load', announce);
+  window.addEventListener('popstate', announce);
+  var push = history.pushState;
+  history.pushState = function () { push.apply(this, arguments); announce(); };
+})();

package/public/style.css

@@ -67,6 +67,29 @@ button { font: inherit; cursor: pointer; }
 
 .repo-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
+.rail-filter {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 2px 12px 4px;
+  padding: 4px 9px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-3);
+  background: #fff;
+}
+.rail-filter:focus-within { border-color: #c9c9cf; color: var(--text-2); }
+.rail-filter input {
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text);
+  width: 100%;
+}
+.rail-filter input::placeholder { color: var(--text-3); }
+
 #rail-sections { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
 
 .rail-section-label {
@@ -370,6 +393,19 @@ button { font: inherit; cursor: pointer; }
 .comment-text { font-size: 12.5px; color: var(--text); }
 .comment-meta { font-size: 11px; color: var(--text-3); margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
 
+.comment-anchor {
+  margin-top: 5px;
+  font-size: 11px;
+  color: var(--text-2);
+  background: #f6f6f7;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 3px 7px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .chip {
   display: inline-flex;
   align-items: center;

package/src/previews.js

@@ -4,6 +4,7 @@ import http from 'node:http';
 import net from 'node:net';
 import { spawn } from 'node:child_process';
 import { git, tryGit } from './git.js';
+import { startInjectingProxy } from './proxy.js';
 
 const URL_RE = /(https?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0):\d+[^\s'"]*)/;
 const START_TIMEOUT_MS = 90_000;
@@ -125,6 +126,25 @@ export class PreviewManager {
     return this.start(key, { cwd: wt, commit, worktree: wt });
   }
 
+  // Comments need to see inside the preview, so the dashboard never talks to
+  // the dev server directly. Each preview gets a proxy that injects the
+  // inspector script. If the proxy fails, fall back to the direct URL: the
+  // preview still works, only element pinning degrades.
+  attachProxy(rec, targetUrl) {
+    if (rec.targetUrl) return;
+    rec.targetUrl = targetUrl;
+    startInjectingProxy(targetUrl)
+      .then(({ server, url }) => {
+        rec.proxyServer = server;
+        rec.url = url;
+        rec.status = 'ready';
+      })
+      .catch(() => {
+        rec.url = targetUrl;
+        rec.status = 'ready';
+      });
+  }
+
   record(key) {
     let rec = this.previews.get(key);
     if (!rec) {
@@ -138,6 +158,8 @@ export class PreviewManager {
     const rec = this.record(key);
     rec.status = 'starting';
     rec.url = null;
+    rec.targetUrl = null;
+    if (rec.proxyServer) { try { rec.proxyServer.close(); } catch { /* gone */ } rec.proxyServer = null; }
     rec.error = null;
     rec.log = '';
     rec.commit = commit;
@@ -156,8 +178,7 @@ export class PreviewManager {
       const dir = path.resolve(cwd, cfg.dir || '.');
       const server = http.createServer((req, res) => serveStatic(dir, req, res));
       server.listen(0, '127.0.0.1', () => {
-        rec.url = `http://localhost:${server.address().port}/`;
-        rec.status = 'ready';
+        this.attachProxy(rec, `http://localhost:${server.address().port}/`);
       });
       rec.server = server;
       return rec;
@@ -176,11 +197,11 @@ export class PreviewManager {
     const onData = (buf) => {
       const text = stripAnsi(buf.toString());
       rec.log = (rec.log + text).slice(-8000);
-      if (!rec.url) {
+      if (!rec.targetUrl) {
         const m = text.match(URL_RE);
         if (m) {
-          rec.url = m[1].replace('0.0.0.0', 'localhost').replace('127.0.0.1', 'localhost');
-          rec.status = 'ready';
+          const targetUrl = m[1].replace('0.0.0.0', 'localhost').replace('127.0.0.1', 'localhost');
+          this.attachProxy(rec, targetUrl);
         }
       }
     };
@@ -214,6 +235,9 @@ export class PreviewManager {
       if (rec.server) {
         try { rec.server.close(); } catch { /* gone */ }
       }
+      if (rec.proxyServer) {
+        try { rec.proxyServer.close(); } catch { /* gone */ }
+      }
     }
   }
 }

package/src/proxy.js

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import net from 'node:net';
+import http from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const INSPECT_PATH = '/__design-share__/inspect.js';
+const INSPECT_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', 'public', 'inspect.js');
+const INJECT_TAG = `<script src="${INSPECT_PATH}"></script>`;
+
+// Sits in front of a preview dev server on its own port. Mirrors every path
+// 1:1 so absolute asset URLs keep working, injects the inspector script into
+// HTML responses, and pipes websocket upgrades straight through so hot module
+// reload keeps working.
+export function startInjectingProxy(targetUrl) {
+  const target = new URL(targetUrl);
+
+  const server = http.createServer((req, res) => {
+    if (req.url === INSPECT_PATH) {
+      res.writeHead(200, { 'Content-Type': 'text/javascript; charset=utf-8', 'Cache-Control': 'no-store' });
+      return res.end(fs.readFileSync(INSPECT_FILE));
+    }
+
+    const headers = { ...req.headers, host: target.host };
+    delete headers['accept-encoding']; // keep HTML plain so injection is trivial
+
+    const upstream = http.request({
+      hostname: target.hostname,
+      port: target.port,
+      path: req.url,
+      method: req.method,
+      headers,
+    }, (up) => {
+      const type = up.headers['content-type'] || '';
+      const outHeaders = { ...up.headers };
+
+      // Point same-host redirects back at the proxy
+      if (outHeaders.location) {
+        outHeaders.location = outHeaders.location.replace(target.host, `localhost:${server.address().port}`);
+      }
+
+      if (type.includes('text/html')) {
+        const chunks = [];
+        up.on('data', (c) => chunks.push(c));
+        up.on('end', () => {
+          let body = Buffer.concat(chunks).toString('utf8');
+          if (body.includes('</body>')) {
+            body = body.replace('</body>', `${INJECT_TAG}</body>`);
+          } else if (body.includes('</html>')) {
+            body = body.replace('</html>', `${INJECT_TAG}</html>`);
+          } else {
+            body += INJECT_TAG;
+          }
+          delete outHeaders['content-length'];
+          delete outHeaders['content-encoding'];
+          res.writeHead(up.statusCode, outHeaders);
+          res.end(body);
+        });
+      } else {
+        res.writeHead(up.statusCode, outHeaders);
+        up.pipe(res);
+      }
+    });
+
+    upstream.on('error', () => {
+      res.writeHead(502, { 'Content-Type': 'text/plain' });
+      res.end('preview process is not responding');
+    });
+    req.pipe(upstream);
+  });
+
+  // Raw tcp passthrough for websockets (vite/next HMR)
+  server.on('upgrade', (req, socket, head) => {
+    const conn = net.connect(Number(target.port), target.hostname, () => {
+      const headerLines = Object.entries(req.headers)
+        .map(([k, v]) => `${k}: ${k === 'host' ? target.host : v}`)
+        .join('\r\n');
+      conn.write(`${req.method} ${req.url} HTTP/1.1\r\n${headerLines}\r\n\r\n`);
+      if (head && head.length) conn.write(head);
+      socket.pipe(conn);
+      conn.pipe(socket);
+    });
+    const drop = () => { socket.destroy(); conn.destroy(); };
+    conn.on('error', drop);
+    socket.on('error', drop);
+  });
+
+  return new Promise((resolve, reject) => {
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      resolve({ server, url: `http://localhost:${server.address().port}/` });
+    });
+  });
+}

package/src/server.js

@@ -128,6 +128,10 @@ export class DesignShareServer {
             route: body.route || '/',
             xPct: body.xPct,
             yPct: body.yPct,
+            selector: typeof body.selector === 'string' ? body.selector.slice(0, 500) : null,
+            elementLabel: typeof body.elementLabel === 'string' ? body.elementLabel.slice(0, 200) : null,
+            relX: typeof body.relX === 'number' ? body.relX : null,
+            relY: typeof body.relY === 'number' ? body.relY : null,
             viewportLabel: body.viewportLabel || 'desktop',
             viewportW: body.viewportW,
             viewportH: body.viewportH,