sitedrift 0.3.5 → 0.3.7

package/assets/viewer.css

@@ -133,7 +133,11 @@ button:focus-visible, summary:focus-visible {
   border-bottom: 1px solid var(--line);
 }
 .compact-side { min-inline-size: 0; display: flex; align-items: center; gap: 6px; }
+.app.solo .compact-side { cursor: pointer; }
+.compact-favicon { display: block; flex: 0 0 auto; inline-size: 16px; block-size: 16px; border-radius: 4px; }
+.compact-copy { min-inline-size: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
 .compact-title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
+.compact-origin { min-inline-size: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
 .compact-controls { display: flex; align-items: center; gap: 8px; justify-self: center; }
 
 .caret {
@@ -323,6 +327,10 @@ button[data-action="notes"] {
 .status-err { color: #fff; background: var(--err); }
 .compact-side .status-badge { block-size: 16px; }
 
+@media (width <= 600px) {
+  .compact-origin { display: none; }
+}
+
 .meta-diff {
   display: none;
   align-items: center;

package/assets/viewer.html

@@ -105,7 +105,7 @@
       <button class="caret" data-action="compact" title="Expand review chrome" aria-label="Expand review chrome">
         <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m3 10 5-5 5 5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
-      <div class="compact-side" data-compact-side="dev"><span class="pill dev">DEV</span><span class="compact-title" data-compact-title="dev">Loading…</span><span class="status-badge"></span></div>
+      <div class="compact-side" data-compact-side="dev"><span class="pill dev">DEV</span><img class="compact-favicon" data-compact-favicon="dev" alt=""><span class="compact-copy"><span class="compact-title" data-compact-title="dev">Loading…</span><span class="compact-origin" data-compact-origin="dev"></span></span><span class="status-badge"></span></div>
       <div class="compact-controls">
         <div class="modes" role="group" aria-label="View mode">
           <button data-mode="split">Split</button>
@@ -120,7 +120,7 @@
           <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M15.5 6.5V3m0 0H12m3.5 0-2.2 2.2A6 6 0 1 0 15.8 11" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </div>
-      <div class="compact-side" data-compact-side="live"><span class="pill live">LIVE</span><span class="compact-title" data-compact-title="live">Loading…</span><span class="status-badge"></span></div>
+      <div class="compact-side" data-compact-side="live"><span class="pill live">LIVE</span><img class="compact-favicon" data-compact-favicon="live" alt=""><span class="compact-copy"><span class="compact-title" data-compact-title="live">Loading…</span><span class="compact-origin" data-compact-origin="live"></span></span><span class="status-badge"></span></div>
       <button class="icon" data-action="notes" title="Review notes" aria-label="Review notes">
         <svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3.5h10a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 15 13.5H9L5 17v-3.5A1.5 1.5 0 0 1 3.5 12V5A1.5 1.5 0 0 1 5 3.5Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
       </button>

package/assets/viewer.js

@@ -30,10 +30,10 @@
     const settleTimers = { dev: [], live: [] };
     const frameState = { dev: { y: 0, max: 0 }, live: { y: 0, max: 0 } };
     let order = params.get('swap') === '1' ? ['live', 'dev'] : ['dev', 'live'];
-    let syncScroll = queryOrStoredBool('scroll', 'site-compare-scroll', false);
+    let syncScroll = queryOrStoredBool('scroll', 'site-compare-scroll', !!config.hosted);
     let scrollMode = params.get('scrollMode') || localStorage.getItem('site-compare-scroll-mode') || 'exact';
     if (!['exact', 'ratio'].includes(scrollMode)) scrollMode = 'exact';
-    let mirrorLinks = queryOrStoredBool('mirror', 'site-compare-mirror', false);
+    let mirrorLinks = queryOrStoredBool('mirror', 'site-compare-mirror', !!config.hosted);
     let mobileMode = (params.get('mode') || localStorage.getItem('site-compare-mode')) === 'mobile';
     let compactMode = queryOrStoredBool('compact', 'site-compare-compact', !!config.hosted);
     const storedView = localStorage.getItem('site-compare-view');
@@ -54,6 +54,7 @@
     let dockMode = queryOrStoredBool('dock', 'site-compare-dock', true);
     let scrollOwner = null;
     const meta = { dev: null, live: null };
+    const statusDetails = { dev: {}, live: {} };
     const apiHeaders = {
       authorization: 'Bearer ' + config.token,
       'content-type': 'application/json',
@@ -87,72 +88,12 @@
         : config[side] + normalizeRoute(route);
     }
     function framePost(side, type, data = {}) {
-      if (config.hosted) {
-        const win = frame(side).contentWindow;
-        const scrolling = frame(side).contentDocument?.scrollingElement;
-        if (type === 'scroll' && scrolling) scrolling.scrollTop = Number(data.y) || 0;
-        if (type === 'reload') win?.location.reload();
-        return;
-      }
       frame(side).contentWindow?.postMessage(
         { source: 'sitedrift-parent', side, type, ...data },
         config.hosted ? '*' : config.frameOrigins[side],
       );
     }
 
-    function hostedSnapshot(side) {
-      if (!config.hosted) return;
-      const iframe = frame(side);
-      const doc = iframe.contentDocument;
-      const win = iframe.contentWindow;
-      if (!doc || !win) return;
-      const q = (selector) => doc.querySelector(selector);
-      const images = [...doc.querySelectorAll('img')];
-      const title = (doc.title || '').trim();
-      const description = q('meta[name="description"]')?.content?.trim() || '';
-      const canonical = q('link[rel="canonical"]')?.href || '';
-      const checks = [
-        ['Title present', !!title],
-        ['Title 30–60 chars', title.length >= 30 && title.length <= 60, String(title.length)],
-        ['Meta description', !!description],
-        ['Description 70–160', description.length >= 70 && description.length <= 160, String(description.length)],
-        ['Exactly one H1', doc.querySelectorAll('h1').length === 1, `${doc.querySelectorAll('h1').length} found`],
-        ['Canonical link', !!q('link[rel="canonical"]')],
-        ['Viewport meta', !!q('meta[name="viewport"]')],
-        ['html lang', !!doc.documentElement.lang],
-        ['Open Graph title', !!q('meta[property="og:title"]')],
-        ['Open Graph image', !!q('meta[property="og:image"]')],
-        ['Not noindex', !(q('meta[name="robots"]')?.content || '').toLowerCase().includes('noindex')],
-        ['Favicon', !!q('link[rel~="icon"]')],
-        ['Images have alt', images.every((image) => image.hasAttribute('alt')), `${images.filter((image) => !image.hasAttribute('alt')).length} missing`],
-      ].map(([label, ok, note]) => ({ label, ok, note }));
-      const url = new URL(iframe.src);
-      const route = (url.pathname.slice(proxyPath(side).length) || '/') + url.search + url.hash;
-      renderMetadata(side, {
-        route,
-        meta: {
-          title,
-          description,
-          canonical,
-          heading: q('h1')?.textContent?.trim() || '',
-          siteName: q('meta[property="og:site_name"]')?.content?.trim() || '',
-          icon: q('link[rel~="icon"]')?.href || '',
-          checks,
-        },
-      });
-      fetchStatus(side, route);
-      const reportScroll = () => {
-        const root = doc.scrollingElement || doc.documentElement;
-        frameState[side] = {
-          y: Number(win.scrollY) || 0,
-          max: Math.max(0, root.scrollHeight - win.innerHeight),
-        };
-        syncFrom(side);
-      };
-      win.addEventListener('scroll', reportScroll, { passive: true });
-      reportScroll();
-    }
-
     function statusBadges(side) {
       return [
         document.querySelector('.label[data-label="' + side + '"] .status-badge'),
@@ -160,6 +101,31 @@
       ].filter(Boolean);
     }
 
+    function formatMs(value) {
+      return Number.isFinite(value) && value >= 0 ? `${Math.round(value)} ms` : '';
+    }
+
+    function formatBytes(value) {
+      if (!Number.isFinite(value) || value <= 0) return '';
+      if (value < 1024) return `${Math.round(value)} B`;
+      if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+      return `${(value / 1024 / 1024).toFixed(1)} MB`;
+    }
+
+    function statusTitle(side, status) {
+      const detail = statusDetails[side];
+      const lines = [`${side.toUpperCase()} returned ${status || 'an error'}`];
+      if (detail.requestMs) lines.push(`Status check: ${formatMs(detail.requestMs)}`);
+      if (detail.response) lines.push(`Document response: ${formatMs(detail.response)}`);
+      if (detail.dom) lines.push(`DOM ready: ${formatMs(detail.dom)}`);
+      if (detail.load) lines.push(`Window load: ${formatMs(detail.load)}`);
+      const size = formatBytes(detail.transfer || detail.decoded);
+      if (size) lines.push(`${detail.transfer ? 'Transferred' : 'Decoded size'}: ${size}`);
+      if (detail.type) lines.push(`Content-Type: ${detail.type}`);
+      if (detail.cache) lines.push(`Cache-Control: ${detail.cache}`);
+      return lines.join('\n');
+    }
+
     function setStatusBadge(side, status) {
       const cls = status >= 200 && status < 300 ? 'status-ok'
         : status >= 300 && status < 400 ? 'status-warn'
@@ -168,6 +134,8 @@
       for (const badge of statusBadges(side)) {
         badge.className = 'status-badge show ' + cls;
         badge.textContent = text;
+        badge.title = statusTitle(side, status);
+        badge.setAttribute('aria-label', badge.title.replaceAll('\n', '. '));
       }
     }
 
@@ -175,15 +143,26 @@
       for (const badge of statusBadges(side)) {
         badge.className = 'status-badge';
         badge.textContent = '';
+        badge.removeAttribute('title');
+        badge.removeAttribute('aria-label');
       }
     }
 
     function fetchStatus(side, route) {
       const url = statusUrl(side, route);
+      const started = performance.now();
       const read = (method) => fetch(url, { method, cache: 'no-store', redirect: 'manual' });
       read('HEAD')
         .then((res) => (res.status === 405 || res.status === 501 ? read('GET') : res))
-        .then((res) => setStatusBadge(side, res.status || (res.type === 'opaqueredirect' ? 302 : 0)))
+        .then((res) => {
+          statusDetails[side] = {
+            ...statusDetails[side],
+            requestMs: performance.now() - started,
+            type: res.headers.get('content-type') || '',
+            cache: res.headers.get('cache-control') || '',
+          };
+          setStatusBadge(side, res.status || (res.type === 'opaqueredirect' ? 302 : 0));
+        })
         .catch(() => setStatusBadge(side, 0));
     }
 
@@ -299,14 +278,26 @@
       let canonicalPath = canonical;
       try { canonicalPath = new URL(canonical).pathname; } catch {}
       meta[side] = { title, description, canonicalPath, heading };
+      statusDetails[side] = { ...statusDetails[side], ...(source.timing || {}) };
       label.querySelector('.page-heading').textContent = heading;
       label.querySelector('.page-heading').title = title || heading;
       updateDocTitle();
-      document.querySelector('[data-compact-title="' + side + '"]').textContent = heading;
+      const compactTitle = document.querySelector('[data-compact-title="' + side + '"]');
+      compactTitle.textContent = heading;
+      compactTitle.title = title || heading;
+      const compactOrigin = document.querySelector('[data-compact-origin="' + side + '"]');
+      compactOrigin.textContent = new URL(config[side]).host + route;
+      compactOrigin.title = config[side] + route;
       label.querySelector('.origin').textContent = config[side] + route;
       const fav = label.querySelector('.favicon');
       fav.onerror = () => { fav.onerror = null; fav.src = '/icon.svg'; };
       fav.src = faviconSrc;
+      const compactFav = document.querySelector('[data-compact-favicon="' + side + '"]');
+      compactFav.onerror = () => {
+        compactFav.onerror = null;
+        compactFav.src = config.hosted ? '/__sitedrift/assets/icon.svg' : '/icon.svg';
+      };
+      compactFav.src = faviconSrc;
       label.querySelector('.open-side').href = direct(side, route);
       const card = label.querySelector('.seo-card');
       const sourceRow = element('div', 'seo-source');
@@ -407,10 +398,14 @@
         label.querySelector('.pill').textContent = side.toUpperCase();
         label.querySelector('.page-heading').textContent = 'Loading…';
         document.querySelector('[data-compact-title="' + side + '"]').textContent = 'Loading…';
+        document.querySelector('[data-compact-origin="' + side + '"]').textContent =
+          new URL(config[side]).host + route;
+        document.querySelector('[data-compact-favicon="' + side + '"]').removeAttribute('src');
         label.querySelector('.origin').textContent = config[side] + route;
         label.querySelector('.favicon').src = '/__' + side + '/favicon.ico';
         label.querySelector('.open-side').href = direct(side, route);
         meta[side] = null;
+        statusDetails[side] = {};
         clearStatusBadge(side);
       }
       renderMetaDiff();
@@ -561,16 +556,16 @@
         setLinkedScroll(side, frameState[side].y + delta);
       } else if (message.type === 'navigate') {
         go(message.route);
+      } else if (message.type === 'dismiss') {
+        closePopovers();
       } else if (message.type === 'key') {
         runFrameKey(message.key, side, message);
       }
     });
-    if (config.hosted) {
-      for (const side of ['dev', 'live']) {
-        frame(side).addEventListener('load', () => hostedSnapshot(side));
-      }
-    }
 
+    function closePopovers() {
+      for (const details of document.querySelectorAll('details[open]')) details.removeAttribute('open');
+    }
     scrollButton.addEventListener('click', () => {
       syncScroll = !syncScroll;
       scrollButton.classList.toggle('active', syncScroll);
@@ -661,6 +656,14 @@
       renderModes();
     }
     for (const button of modeButtons) button.addEventListener('click', () => setMode(button.dataset.mode));
+    for (const identity of document.querySelectorAll('.compact-side')) {
+      identity.addEventListener('click', () => {
+        if (viewMode !== 'solo') return;
+        focusSide = identity.dataset.compactSide === 'dev' ? 'live' : 'dev';
+        app.dataset.focus = focusSide;
+        renderModes();
+      });
+    }
     for (const slider of overlaySliders) slider.addEventListener('input', () => {
       if (viewMode !== 'overlay') setMode('overlay');
       if (overlayBlend === 'difference') setOverlayBlend('opacity');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sitedrift",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Catch the drift between dev and live — frame your local site and production side-by-side on the same route, locked scroll, with a difference-blend overlay. Zero runtime dependencies.",
   "type": "module",
   "bin": {

package/src/frame-content.mjs

@@ -11,6 +11,14 @@ export function frameBridge(side, prefix = `/__${side}`) {
       const title=(document.title||'').trim();
       const description=q('meta[name="description"]')?.content?.trim()||'';
       const canonical=q('link[rel="canonical"]')?.href||'';
+      const navigation=performance.getEntriesByType('navigation')[0];
+      const timing=navigation?{
+        response:Math.round(navigation.responseEnd),
+        dom:Math.round(navigation.domContentLoadedEventEnd),
+        load:Math.round(navigation.loadEventEnd||navigation.duration),
+        transfer:Number(navigation.transferSize)||0,
+        decoded:Number(navigation.decodedBodySize)||0
+      }:null;
       const checks=[
         ['Title present',!!title],['Title 30–60 chars',title.length>=30&&title.length<=60,title.length+''],
         ['Meta description',!!description],['Description 70–160',description.length>=70&&description.length<=160,description.length+''],
@@ -23,7 +31,7 @@ export function frameBridge(side, prefix = `/__${side}`) {
         ['Images have alt',imgs.every((img)=>img.hasAttribute('alt')),imgs.filter((img)=>!img.hasAttribute('alt')).length+' missing']
       ].map(([label,ok,note])=>({label,ok,note}));
       send('ready',{route:route(),meta:{title,description,canonical,heading:q('h1')?.textContent?.trim()||'',
-        siteName:q('meta[property="og:site_name"]')?.content?.trim()||'',icon:q('link[rel~="icon"]')?.href||'',checks}});
+        siteName:q('meta[property="og:site_name"]')?.content?.trim()||'',icon:q('link[rel~="icon"]')?.href||'',checks,timing}});
       send('scroll',{y:scrollY,max:Math.max(0,root().scrollHeight-innerHeight)});
     };
     addEventListener('message',(event)=>{
@@ -43,6 +51,7 @@ export function frameBridge(side, prefix = `/__${side}`) {
       if(linked&&!typing&&!event.metaKey&&!event.ctrlKey&&!event.altKey)send('key',{key:event.key,shift:event.shiftKey,y:scrollY,height:innerHeight,max:Math.max(0,root().scrollHeight-innerHeight)});
     },true);
     addEventListener('click',(event)=>{
+      send('dismiss');
       if(!mirror||event.defaultPrevented||event.button!==0||event.metaKey||event.ctrlKey||event.shiftKey||event.altKey)return;
       const link=event.target.closest('a[href]');if(!link||link.target==='_blank'||link.hasAttribute('download'))return;
       const url=new URL(link.href,location.href);if(url.origin!==location.origin||!url.pathname.startsWith(prefix))return;

package/src/viewer.mjs

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 
 // Bumped when the viewer assets change; busts the ?v= cache and reported in
 // /health so the `site compare` wrapper knows when to restart the server.
-export const VIEWER_VERSION = 29;
+export const VIEWER_VERSION = 30;
 
 function readAsset(path) {
   try {