checkpoint-cli 0.1.2 → 0.1.4

package/dist/index.js

@@ -79,31 +79,360 @@ function requireAuth() {
     }
 }
 /* ── Checkpoint Tracking Script (injected into HTML responses) ── */
-function trackingScript(checkpointOrigin) {
+function trackingScript() {
     return `
 <script data-checkpoint>
 (function(){
-  var origin=${JSON.stringify(checkpointOrigin)};
-  function report(){
+  var lastPath='';
+  var pickMode=false;
+  var pickClickHandler=null;
+  var pickEscHandler=null;
+
+  function getMetrics(){
+    var de=document.documentElement;
+    return {
+      scrollX:window.scrollX||window.pageXOffset||0,
+      scrollY:window.scrollY||window.pageYOffset||0,
+      docWidth:de.scrollWidth||0,
+      docHeight:de.scrollHeight||0,
+      viewWidth:de.clientWidth||window.innerWidth||0,
+      viewHeight:de.clientHeight||window.innerHeight||0
+    };
+  }
+
+  function clampPercent(v){
+    if(v<0) return 0;
+    if(v>100) return 100;
+    return v;
+  }
+
+  function cssEscape(value){
+    try{
+      if(window.CSS&&typeof window.CSS.escape==='function'){
+        return window.CSS.escape(value);
+      }
+    }catch(e){}
+    return String(value).replace(/[^a-zA-Z0-9_-]/g,'\\\\$&');
+  }
+
+  function shortText(value){
+    if(!value) return '';
+    return String(value).replace(/\\s+/g,' ').trim().slice(0,120);
+  }
+
+  function elementSelector(el){
+    if(!el||!el.tagName) return '';
+    var tag=el.tagName.toLowerCase();
+    if(el.id) return '#'+cssEscape(el.id);
+    var cls=(el.className&&typeof el.className==='string')
+      ? el.className.trim().split(/\\s+/).filter(Boolean).slice(0,3)
+      : [];
+    if(cls.length>0) return tag+'.'+cls.map(cssEscape).join('.');
+    return tag;
+  }
+
+  function getSelectorChain(el){
+    var out=[];
+    var seen={};
+    function push(selector,score){
+      if(!selector||seen[selector]) return;
+      seen[selector]=true;
+      out.push({selector:selector,score:score});
+    }
+    var current=el;
+    var depth=0;
+    while(current&&current.nodeType===1&&depth<5){
+      var sel=elementSelector(current);
+      if(sel){
+        var score=Math.max(0.2,1-(depth*0.18));
+        push(sel,score);
+      }
+      if(current.parentElement){
+        var parentSel=elementSelector(current.parentElement);
+        if(parentSel&&sel){
+          push(parentSel+' > '+sel,Math.max(0.2,0.88-(depth*0.15)));
+        }
+      }
+      current=current.parentElement;
+      depth++;
+    }
+    return out.slice(0,10);
+  }
+
+  function getSiblingPath(el){
+    var path=[];
+    var current=el;
+    var steps=0;
+    while(current&&current.parentElement&&steps<8){
+      var parent=current.parentElement;
+      var index=0;
+      var children=parent.children;
+      for(var i=0;i<children.length;i++){
+        if(children[i]===current){
+          index=i;
+          break;
+        }
+      }
+      path.unshift(index);
+      current=parent;
+      steps++;
+    }
+    return path;
+  }
+
+  function getDomFingerprint(el){
+    if(!el||!el.tagName) return null;
+    var classes=(el.className&&typeof el.className==='string')
+      ? el.className.trim().split(/\\s+/).filter(Boolean).slice(0,6)
+      : [];
+    return {
+      tag:el.tagName.toLowerCase(),
+      id:el.id||null,
+      classes:classes,
+      sibling_path:getSiblingPath(el)
+    };
+  }
+
+  function getContainerHint(el){
+    if(!el||typeof el.closest!=='function') return null;
+    var container=el.closest('main,article,section,form,nav,[role="main"],[data-testid],[id]');
+    if(!container||!container.tagName) return null;
+    var classes=(container.className&&typeof container.className==='string')
+      ? container.className.trim().split(/\\s+/).filter(Boolean).slice(0,4)
+      : [];
+    return {
+      selector:elementSelector(container),
+      tag:container.tagName.toLowerCase(),
+      id:container.id||null,
+      classes:classes
+    };
+  }
+
+  function buildCoordFallback(clientX,clientY,metrics){
+    var safeViewW=metrics.viewWidth||1;
+    var safeViewH=metrics.viewHeight||1;
+    var docX=clientX+metrics.scrollX;
+    var docY=clientY+metrics.scrollY;
+    return {
+      x_percent:clampPercent((clientX/safeViewW)*100),
+      y_percent:clampPercent((clientY/safeViewH)*100),
+      scroll_x:metrics.scrollX,
+      scroll_y:metrics.scrollY,
+      viewport_width:safeViewW,
+      viewport_height:safeViewH,
+      doc_width:metrics.docWidth||safeViewW,
+      doc_height:metrics.docHeight||safeViewH,
+      doc_x_percent:clampPercent((docX/(metrics.docWidth||safeViewW))*100),
+      doc_y_percent:clampPercent((docY/(metrics.docHeight||safeViewH))*100)
+    };
+  }
+
+  function buildAnchorPayload(el,clientX,clientY){
+    var metrics=getMetrics();
+    var textSelf='';
+    var textParent='';
     try{
+      textSelf=shortText(el&&el.textContent);
+      textParent=shortText(el&&el.parentElement&&el.parentElement.textContent);
+    }catch(e){}
+    return {
+      selector_chain:getSelectorChain(el),
+      dom_fingerprint:getDomFingerprint(el),
+      text_context:{
+        self:textSelf,
+        parent:textParent
+      },
+      container_hint:getContainerHint(el),
+      coord_fallback:buildCoordFallback(clientX,clientY,metrics)
+    };
+  }
+
+  function resolveFromFingerprint(fingerprint){
+    if(!fingerprint) return null;
+    if(fingerprint.id){
+      var byId=document.getElementById(fingerprint.id);
+      if(byId) return byId;
+    }
+    var tag=fingerprint.tag||'*';
+    var selector=tag;
+    if(Array.isArray(fingerprint.classes)&&fingerprint.classes.length>0){
+      selector+= '.'+fingerprint.classes.map(cssEscape).join('.');
+    }
+    try{
+      var nodes=document.querySelectorAll(selector);
+      if(nodes&&nodes.length>0) return nodes[0];
+    }catch(e){}
+    return null;
+  }
+
+  function resolveAnchor(payload){
+    if(!payload||typeof payload!=='object') return null;
+    var element=null;
+    if(Array.isArray(payload.selector_chain)){
+      for(var i=0;i<payload.selector_chain.length;i++){
+        var candidate=payload.selector_chain[i];
+        if(!candidate||typeof candidate.selector!=='string') continue;
+        try{
+          var found=document.querySelector(candidate.selector);
+          if(found){
+            element=found;
+            break;
+          }
+        }catch(e){}
+      }
+    }
+    if(!element&&payload.container_hint&&typeof payload.container_hint.selector==='string'){
+      try{
+        element=document.querySelector(payload.container_hint.selector);
+      }catch(e){}
+    }
+    if(!element){
+      element=resolveFromFingerprint(payload.dom_fingerprint);
+    }
+    if(!element) return null;
+    var rect=element.getBoundingClientRect();
+    var clientX=rect.left+Math.max(1,Math.min(rect.width-1,rect.width*0.5));
+    var clientY=rect.top+Math.max(1,Math.min(rect.height-1,rect.height*0.5));
+    var metrics=getMetrics();
+    return buildCoordFallback(clientX,clientY,metrics);
+  }
+
+  function setPickMode(enabled){
+    var next=!!enabled;
+    if(pickMode===next) return;
+    pickMode=next;
+    document.documentElement.style.cursor=pickMode?'crosshair':'';
+    if(document.body){
+      document.body.style.cursor=pickMode?'crosshair':'';
+    }
+    if(!pickMode){
+      if(pickClickHandler){
+        window.removeEventListener('click',pickClickHandler,true);
+        pickClickHandler=null;
+      }
+      if(pickEscHandler){
+        window.removeEventListener('keydown',pickEscHandler,true);
+        pickEscHandler=null;
+      }
+      return;
+    }
+    pickClickHandler=function(ev){
+      try{
+        if(!pickMode) return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        if(typeof ev.stopImmediatePropagation==='function'){
+          ev.stopImmediatePropagation();
+        }
+        var target=ev.target&&ev.target.nodeType===1?ev.target:null;
+        if(!target) return;
+        var payload=buildAnchorPayload(target,ev.clientX,ev.clientY);
+        window.parent.postMessage({
+          type:'checkpoint:pickResult',
+          path:location.pathname+location.search+location.hash,
+          anchorPayload:payload,
+          point:{
+            xPercent:payload.coord_fallback&&typeof payload.coord_fallback.x_percent==='number'?payload.coord_fallback.x_percent:50,
+            yPercent:payload.coord_fallback&&typeof payload.coord_fallback.y_percent==='number'?payload.coord_fallback.y_percent:50,
+            scrollY:payload.coord_fallback&&typeof payload.coord_fallback.scroll_y==='number'?payload.coord_fallback.scroll_y:0,
+            viewHeight:payload.coord_fallback&&typeof payload.coord_fallback.viewport_height==='number'?payload.coord_fallback.viewport_height:0
+          }
+        },'*');
+      }catch(e){}
+      setPickMode(false);
+    };
+    pickEscHandler=function(ev){
+      if(ev.key==='Escape'){
+        setPickMode(false);
+      }
+    };
+    window.addEventListener('click',pickClickHandler,true);
+    window.addEventListener('keydown',pickEscHandler,true);
+  }
+
+  function reportNav(){
+    try{
+      var p=location.pathname+location.search+location.hash;
+      if(p!==lastPath){
+        lastPath=p;
+        window.parent.postMessage({
+          type:'checkpoint:navigate',
+          path:p
+        },'*');
+        reportScroll();
+      }
+    }catch(e){}
+  }
+  var scrollTick=false;
+  function reportScroll(){
+    try{
+      var metrics=getMetrics();
       window.parent.postMessage({
-        type:'checkpoint:navigate',
-        path:location.pathname+location.search
-      },origin);
+        type:'checkpoint:scroll',
+        scrollX:metrics.scrollX,
+        scrollY:metrics.scrollY,
+        docWidth:metrics.docWidth,
+        docHeight:metrics.docHeight,
+        viewWidth:metrics.viewWidth,
+        viewHeight:metrics.viewHeight
+      },'*');
     }catch(e){}
   }
-  report();
+  function onScroll(){
+    if(!scrollTick){
+      scrollTick=true;
+      requestAnimationFrame(function(){
+        reportScroll();
+        scrollTick=false;
+      });
+    }
+  }
+  reportNav();
+  reportScroll();
   var _ps=history.pushState,_rs=history.replaceState;
-  history.pushState=function(){_ps.apply(this,arguments);report();};
-  history.replaceState=function(){_rs.apply(this,arguments);report();};
-  window.addEventListener('popstate',report);
+  history.pushState=function(){_ps.apply(this,arguments);reportNav();};
+  history.replaceState=function(){_rs.apply(this,arguments);reportNav();};
+  window.addEventListener('popstate',reportNav);
+  window.addEventListener('hashchange',reportNav);
+  window.addEventListener('scroll',onScroll,{passive:true});
+  window.addEventListener('resize',reportScroll);
+  window.addEventListener('message',function(e){
+    try{
+      if(e.data&&e.data.type==='checkpoint:scrollTo'&&typeof e.data.y==='number'){
+        window.scrollTo({top:e.data.y,behavior:'smooth'});
+      }
+      if(e.data&&e.data.type==='checkpoint:pickMode'){
+        setPickMode(!!e.data.enabled);
+      }
+      if(e.data&&e.data.type==='checkpoint:resolveAnchors'&&Array.isArray(e.data.items)){
+        var positions=[];
+        for(var i=0;i<e.data.items.length;i++){
+          var item=e.data.items[i];
+          if(!item||typeof item.id!=='string') continue;
+          var coordFallback=resolveAnchor(item.anchorPayload);
+          if(coordFallback){
+            positions.push({
+              id:item.id,
+              found:true,
+              coordFallback:coordFallback
+            });
+          }
+        }
+        window.parent.postMessage({
+          type:'checkpoint:anchorsResolved',
+          path:location.pathname+location.search+location.hash,
+          positions:positions
+        },'*');
+      }
+    }catch(ex){}
+  });
+  setInterval(reportNav,500);
 })();
 </script>`.trim();
 }
 /* ── Injection Proxy ── */
 function startInjectionProxy(targetPort) {
-    const APP_URL = (0, config_js_1.getAppUrl)();
-    const SCRIPT = trackingScript(APP_URL);
+    const SCRIPT = trackingScript();
     return new Promise((resolve, reject) => {
         const server = http_1.default.createServer((req, res) => {
             const fwdHeaders = { ...req.headers, host: `localhost:${targetPort}` };
@@ -361,13 +690,22 @@ function loginWithBrowser() {
                 const refresh_token = url.searchParams.get('refresh_token');
                 if (access_token && refresh_token) {
                     // Success page
-                    res.writeHead(200, { 'Content-Type': 'text/html' });
+                    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
                     res.end(`
             <html>
-              <body style="font-family: system-ui; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #0a0e17; color: #f1f3f5;">
-                <div style="text-align: center;">
-                  <h1 style="font-size: 24px;">✓ Logged in to Checkpoint</h1>
-                  <p style="color: #9ca3af;">You can close this tab and return to your terminal.</p>
+              <body style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #13120A; color: #f0ede6;">
+                <div style="text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px;">
+                  <svg width="32" height="32" viewBox="0 0 256 256" fill="none">
+                    <circle cx="128" cy="128" r="112" fill="#22c55e"/>
+                    <polyline points="88,136 112,160 168,104" stroke="#13120A" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                  </svg>
+                  <h1 style="font-size: 20px; font-weight: 500; margin: 0; color: #f0ede6;">Logged in to Checkpoint</h1>
+                  <p style="color: #9e9889; margin: 0; font-size: 14px;">You can close this tab and return to your terminal.</p>
+                  <div style="margin-top: 8px; padding-top: 24px; border-top: 1px dashed rgba(73,67,58,0.3);">
+                    <p style="color: #9e9889; margin: 0px 0 24px; font-size: 13px;">Start sharing your localhost for feedback:</p>
+                    <code style="padding: 8px 12px; background: #1D1B15; border: 1px solid rgba(73,67,58,0.4); border-radius: 6px; font-family: 'JetBrains Mono','Fira Code','SF Mono',monospace; font-size: 13px; color: #9e9889;">checkpoint start -p <span style="color: #ff5700;">&lt;port&gt;</span></code>
+                    <p style="text-align: center; margin-top: 24px; font-size: 13px; color: #9e9889;">or <a href="${(0, config_js_1.getAppUrl)()}" style="color: #ff5700; text-decoration: none;">Go to Dashboard</a></p>
+                  </div>
                 </div>
               </body>
             </html>
@@ -376,13 +714,18 @@ function loginWithBrowser() {
                     resolve({ access_token, refresh_token });
                 }
                 else {
-                    res.writeHead(400, { 'Content-Type': 'text/html' });
+                    res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
                     res.end(`
             <html>
-              <body style="font-family: system-ui; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #0a0e17; color: #f1f3f5;">
-                <div style="text-align: center;">
-                  <h1 style="font-size: 24px; color: #ef4444;">Login failed</h1>
-                  <p style="color: #9ca3af;">Missing tokens. Please try again.</p>
+              <body style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #13120A; color: #f0ede6;">
+                <div style="text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px;">
+                  <svg width="48" height="48" viewBox="0 0 256 256" fill="none">
+                    <circle cx="128" cy="128" r="112" fill="#ef4444"/>
+                    <line x1="96" y1="96" x2="160" y2="160" stroke="#13120A" stroke-width="16" stroke-linecap="round"/>
+                    <line x1="160" y1="96" x2="96" y2="160" stroke="#13120A" stroke-width="16" stroke-linecap="round"/>
+                  </svg>
+                  <h1 style="font-size: 20px; font-weight: 500; margin: 0; color: #f0ede6;">Login failed</h1>
+                  <p style="color: #9e9889; margin: 0; font-size: 14px;">Missing tokens. Please try again.</p>
                 </div>
               </body>
             </html>
@@ -405,10 +748,13 @@ function loginWithBrowser() {
             const callbackUrl = `http://localhost:${addr.port}/callback`;
             const APP_URL = (0, config_js_1.getAppUrl)();
             const loginUrl = `${APP_URL}/cli/auth?callback=${encodeURIComponent(callbackUrl)}`;
-            console.log(chalk_1.default.gray(`  Opening browser...`));
             console.log(`  ${chalk_1.default.cyan(loginUrl)}`);
             console.log('');
-            openBrowser(loginUrl);
+            const rl = readline_1.default.createInterface({ input: process.stdin, output: process.stdout });
+            rl.question(chalk_1.default.gray('  Press ENTER to open the browser...'), () => {
+                rl.close();
+                openBrowser(loginUrl);
+            });
         });
         // Timeout after 5 minutes
         setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "checkpoint-cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Share your localhost with reviewers — get visual feedback directly on the page",
   "keywords": [
     "checkpoint",