checkpoint-cli 0.4.1 → 0.5.1

package/dist/index.js

@@ -271,6 +271,19 @@ function launchNgrok(port) {
         } });
     });
 }
+async function getUserWorkspaceId(sb, userId) {
+    const { data: membership, error } = await sb
+        .from('workspace_members')
+        .select('workspace_id')
+        .eq('user_id', userId)
+        .order('created_at', { ascending: true })
+        .limit(1)
+        .maybeSingle();
+    if (error) {
+        throw error;
+    }
+    return membership?.workspace_id ?? null;
+}
 async function registerTunnel(sb, opts) {
     if (!isValidUrl(opts.tunnelUrl)) {
         console.log(chalk_1.default.yellow('  ⚠ Invalid tunnel URL'));
@@ -283,24 +296,32 @@ async function registerTunnel(sb, opts) {
     }
     const APP_URL = (0, config_js_1.getAppUrl)();
     const userId = userData.user.id;
+    const workspaceId = await getUserWorkspaceId(sb, userId);
+    if (!workspaceId) {
+        console.log(chalk_1.default.yellow('  ⚠ No workspace membership found. Complete setup in the dashboard first.'));
+        return null;
+    }
     // Try to find an existing tunnel with the same name for this user
     const { data: existing } = await sb
         .from('tunnels')
         .select('id, share_id')
         .eq('user_id', userId)
+        .eq('workspace_id', workspaceId)
         .eq('name', opts.name)
         .order('created_at', { ascending: false })
         .limit(1)
         .single();
     if (existing) {
         // Reconnect: reuse the same share_id, update the tunnel URL
+        const now = new Date().toISOString();
         const { error } = await sb
             .from('tunnels')
             .update({
             tunnel_url: opts.tunnelUrl,
             local_port: opts.port,
             status: 'active',
-            last_seen_at: new Date().toISOString(),
+            activated_at: now,
+            last_seen_at: now,
         })
             .eq('id', existing.id);
         if (error) {
@@ -310,8 +331,32 @@ async function registerTunnel(sb, opts) {
         console.log(chalk_1.default.green('  ✓ Reconnected to existing tunnel') + chalk_1.default.gray(` (${opts.name})`));
         return { shareUrl: `${APP_URL}/share/${existing.share_id}`, tunnelId: existing.id };
     }
+    // Check plan limits before creating a new tunnel
+    const { data: subscription } = await sb
+        .from('subscriptions')
+        .select('status, billing_plans(name)')
+        .eq('workspace_id', workspaceId)
+        .maybeSingle();
+    const isActiveSub = subscription?.status === 'active' || subscription?.status === 'trialing';
+    const planName = subscription?.billing_plans?.name?.toLowerCase() ?? '';
+    const isPro = planName.includes('pro') || planName.includes('enterprise');
+    const FREE_TUNNEL_LIMIT = 1;
+    if (!isActiveSub || !isPro) {
+        const { count } = await sb
+            .from('tunnels')
+            .select('id', { count: 'exact', head: true })
+            .eq('workspace_id', workspaceId);
+        if ((count ?? 0) >= FREE_TUNNEL_LIMIT) {
+            console.log('');
+            console.log(chalk_1.default.red(`  ✗ Tunnel limit reached (${FREE_TUNNEL_LIMIT} tunnels on the Free plan).`));
+            console.log(chalk_1.default.gray('  Upgrade to Pro for unlimited tunnels: ') + chalk_1.default.cyan(`${(0, config_js_1.getAppUrl)()}/dashboard/settings?tab=billing`));
+            console.log('');
+            return null;
+        }
+    }
     // No existing tunnel — create a new one
     const shareId = generateShareId();
+    const now = new Date().toISOString();
     const { data, error } = await sb.from('tunnels').insert({
         name: opts.name,
         local_port: opts.port,
@@ -319,7 +364,9 @@ async function registerTunnel(sb, opts) {
         share_id: shareId,
         status: 'active',
         user_id: userId,
-        last_seen_at: new Date().toISOString(),
+        workspace_id: workspaceId,
+        activated_at: now,
+        last_seen_at: now,
     }).select('id').single();
     if (error || !data) {
         console.log(chalk_1.default.yellow(`  ⚠ Could not register: ${error?.message ?? 'unknown'}`));
@@ -362,35 +409,60 @@ function openBrowser(url) {
 }
 function loginWithBrowser() {
     return new Promise((resolve, reject) => {
-        const server = http_1.default.createServer((req, res) => {
+        const server = http_1.default.createServer(async (req, res) => {
             const url = new URL(req.url || '/', `http://localhost`);
             if (url.pathname === '/callback') {
-                const access_token = url.searchParams.get('access_token');
-                const refresh_token = url.searchParams.get('refresh_token');
-                if (access_token && refresh_token) {
-                    // Success page
-                    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-                    res.end(`
-            <html>
-              <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>
+                const code = url.searchParams.get('code');
+                if (code) {
+                    try {
+                        const APP_URL = (0, config_js_1.getAppUrl)();
+                        const exchangeRes = await fetch(`${APP_URL}/api/cli/auth-code?code=${encodeURIComponent(code)}`);
+                        if (!exchangeRes.ok)
+                            throw new Error('Code exchange failed');
+                        const { access_token, refresh_token } = await exchangeRes.json();
+                        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+                        res.end(`
+              <html>
+                <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="${APP_URL}" style="color: #ff5700; text-decoration: none;">Go to Dashboard</a></p>
+                    </div>
                   </div>
-                </div>
-              </body>
-            </html>
-          `);
-                    server.close();
-                    resolve({ access_token, refresh_token });
+                </body>
+              </html>
+            `);
+                        server.close();
+                        resolve({ access_token, refresh_token });
+                    }
+                    catch {
+                        res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' });
+                        res.end(`
+              <html>
+                <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;">Code exchange failed. Please try again.</p>
+                  </div>
+                </body>
+              </html>
+            `);
+                        server.close();
+                        reject(new Error('Code exchange failed'));
+                    }
                 }
                 else {
                     res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
@@ -404,13 +476,13 @@ function loginWithBrowser() {
                     <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>
+                  <p style="color: #9e9889; margin: 0; font-size: 14px;">Missing auth code. Please try again.</p>
                 </div>
               </body>
             </html>
           `);
                     server.close();
-                    reject(new Error('Missing tokens in callback'));
+                    reject(new Error('Missing auth code in callback'));
                 }
             }
             else {
@@ -431,15 +503,18 @@ function loginWithBrowser() {
             console.log('');
             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);
+                // Keep stdin open so the HTTP server stays alive to receive the callback.
+                // Pause instead of closing so the event loop doesn't drain.
+                rl.close();
+                process.stdin.resume();
             });
         });
-        // Timeout after 5 minutes
+        // Timeout after 10 minutes
         setTimeout(() => {
             server.close();
-            reject(new Error('Login timed out (5 minutes). Please try again.'));
-        }, 5 * 60 * 1000);
+            reject(new Error('Login timed out (10 minutes). Please try again.'));
+        }, 10 * 60 * 1000);
     });
 }
 /* ── CLI ── */
@@ -447,7 +522,7 @@ const program = new commander_1.Command();
 program
     .name('checkpoint')
     .description('Share your localhost with reviewers — get visual feedback directly on the page.\n\nQuick start:\n  1. checkpoint login          Sign in to your Checkpoint account\n  2. checkpoint start -p 3000  Start tunneling and get a share link\n\nReuse a tunnel name to keep the same share URL and preserve all comments.')
-    .version('0.4.1');
+    .version('0.5.1');
 // ── checkpoint login ──
 program
     .command('login')
@@ -636,8 +711,36 @@ program
         console.log(chalk_1.default.red('  Session expired. Run `checkpoint login` again.'));
         process.exit(1);
     }
+    const workspaceId = await getUserWorkspaceId(sb, userData.user.id);
+    if (!workspaceId) {
+        console.log(chalk_1.default.red('  Failed: no workspace membership found. Complete setup in the dashboard first.'));
+        process.exit(1);
+    }
+    // Check plan limits
+    const { data: subscription } = await sb
+        .from('subscriptions')
+        .select('status, billing_plans(name)')
+        .eq('workspace_id', workspaceId)
+        .maybeSingle();
+    const isActiveSub = subscription?.status === 'active' || subscription?.status === 'trialing';
+    const planName = subscription?.billing_plans?.name?.toLowerCase() ?? '';
+    const isPro = planName.includes('pro') || planName.includes('enterprise');
+    const FREE_TUNNEL_LIMIT = 1;
+    if (!isActiveSub || !isPro) {
+        const { count } = await sb
+            .from('tunnels')
+            .select('id', { count: 'exact', head: true })
+            .eq('workspace_id', workspaceId);
+        if ((count ?? 0) >= FREE_TUNNEL_LIMIT) {
+            console.log(chalk_1.default.red(`  ✗ Tunnel limit reached (${FREE_TUNNEL_LIMIT} tunnels on the Free plan).`));
+            console.log(chalk_1.default.gray('  Upgrade to Pro for unlimited tunnels: ') + chalk_1.default.cyan(`${(0, config_js_1.getAppUrl)()}/dashboard/settings?tab=billing`));
+            console.log('');
+            process.exit(1);
+        }
+    }
     const APP_URL = (0, config_js_1.getAppUrl)();
     const shareId = generateShareId();
+    const now = new Date().toISOString();
     const { data, error } = await sb.from('tunnels').insert({
         name: opts.name,
         local_port: parseInt(opts.port, 10),
@@ -645,7 +748,9 @@ program
         share_id: shareId,
         status: 'active',
         user_id: userData.user.id,
-        last_seen_at: new Date().toISOString(),
+        workspace_id: workspaceId,
+        activated_at: now,
+        last_seen_at: now,
     }).select('id').single();
     if (error || !data) {
         console.log(chalk_1.default.red(`  Failed: ${error?.message ?? 'unknown error'}`));

package/dist/tracking-script-minimal.js

@@ -14,7 +14,6 @@ function buildMinimalTrackingScript() {
   var lastMouseX=0;
   var lastMouseY=0;
   var inspectBox=null;
-  var inspectLabel=null;
   var pickShield=null;
   var lastPath='';
   var mutationTick=false;
@@ -147,6 +146,214 @@ function buildMinimalTrackingScript() {
     return path.slice(-12);
   }
 
+  function withFrameworkSuffix(path,framework){
+    var safePath=Array.isArray(path)?path.slice(0):[];
+    if(framework) safePath.push('@fw:'+framework);
+    return safePath.slice(-16);
+  }
+
+  function getVueComponentFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        if(current.__vueParentComponent) return current.__vueParentComponent;
+        if(current.__vue__) return current.__vue__;
+        if(current.__vnode&&current.__vnode.component) return current.__vnode.component;
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getVueComponentName(instance){
+    try{
+      if(!instance) return '';
+      if(instance.type){
+        var t=instance.type;
+        if(typeof t.name==='string'&&t.name) return t.name;
+        if(typeof t.__name==='string'&&t.__name) return t.__name;
+        if(typeof t.displayName==='string'&&t.displayName) return t.displayName;
+      }
+      if(instance.$options&&typeof instance.$options.name==='string'&&instance.$options.name){
+        return instance.$options.name;
+      }
+    }catch(e){}
+    return '';
+  }
+
+  function getVueSourceFile(instance){
+    try{
+      if(!instance) return '';
+      if(instance.type&&typeof instance.type.__file==='string'&&instance.type.__file) return instance.type.__file;
+      if(instance.$options&&typeof instance.$options.__file==='string'&&instance.$options.__file) return instance.$options.__file;
+    }catch(e){}
+    return '';
+  }
+
+  function getVueOwnerPath(instance){
+    var path=[];
+    var current=instance;
+    var steps=0;
+    while(current&&steps<24){
+      var name=getVueComponentName(current);
+      var keyVal='';
+      try{
+        if(current.vnode&&current.vnode.key!=null) keyVal=String(current.vnode.key);
+        else if(current.$vnode&&current.$vnode.key!=null) keyVal=String(current.$vnode.key);
+      }catch(e){}
+      if(name) path.push(keyVal?name+'#'+keyVal:name);
+      current=current.parent||current.$parent||null;
+      steps++;
+    }
+    path.reverse();
+    return path.slice(-12);
+  }
+
+  function getVueInstanceKey(instance){
+    try{
+      if(!instance) return '';
+      if(instance.vnode&&instance.vnode.key!=null) return String(instance.vnode.key);
+      if(instance.$vnode&&instance.$vnode.key!=null) return String(instance.$vnode.key);
+    }catch(e){}
+    return '';
+  }
+
+  function getSvelteMetaFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        if(current.__svelte_meta) return current.__svelte_meta;
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function basename(path){
+    if(!path) return '';
+    try{
+      var clean=String(path).split(/[\\/]/).pop()||'';
+      return clean;
+    }catch(e){}
+    return '';
+  }
+
+  function withoutExt(name){
+    if(!name) return '';
+    return String(name).replace(/\.[^.]+$/,'');
+  }
+
+  function getAngularComponentFromElement(el){
+    var ngApi=null;
+    try{ ngApi=window.ng||null; }catch(e){ ngApi=null; }
+    if(!ngApi||typeof ngApi.getComponent!=='function') return null;
+    var current=el;
+    var depth=0;
+    while(current&&depth<8){
+      try{
+        var comp=ngApi.getComponent(current);
+        if(comp) return { component:comp, host:current };
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    return null;
+  }
+
+  function getAngularOwnerPath(el){
+    var ngApi=null;
+    try{ ngApi=window.ng||null; }catch(e){ ngApi=null; }
+    if(!ngApi||typeof ngApi.getComponent!=='function') return [];
+    var path=[];
+    var current=el;
+    var depth=0;
+    while(current&&depth<12){
+      try{
+        var comp=ngApi.getComponent(current);
+        if(comp&&comp.constructor&&comp.constructor.name){
+          path.push(String(comp.constructor.name));
+        }
+      }catch(e){}
+      current=current.parentElement;
+      depth++;
+    }
+    path.reverse();
+    return path.slice(-12);
+  }
+
+  function getFrameworkContextFromElement(el){
+    if(!el||el.nodeType!==1) return null;
+
+    var fiber=getReactFiberNode(el);
+    if(fiber){
+      var reactPath=getReactOwnerPathFromFiber(fiber);
+      var reactSource=getSourceDebugInfo(fiber);
+      return {
+        framework:'react',
+        component_name:getReactFiberName(fiber)||'',
+        owner_path:withFrameworkSuffix(reactPath,'react'),
+        source_file:reactSource&&reactSource.fileName?String(reactSource.fileName):'',
+        source_line:reactSource&&typeof reactSource.lineNumber==='number'?reactSource.lineNumber:undefined,
+        source_column:reactSource&&typeof reactSource.columnNumber==='number'?reactSource.columnNumber:undefined,
+        instance_key:fiber&&fiber.key!=null?String(fiber.key):''
+      };
+    }
+
+    var vueInstance=getVueComponentFromElement(el);
+    if(vueInstance){
+      var vueFile=getVueSourceFile(vueInstance);
+      return {
+        framework:'vue',
+        component_name:getVueComponentName(vueInstance)||withoutExt(basename(vueFile))||'',
+        owner_path:withFrameworkSuffix(getVueOwnerPath(vueInstance),'vue'),
+        source_file:vueFile||'',
+        source_line:undefined,
+        source_column:undefined,
+        instance_key:getVueInstanceKey(vueInstance)||''
+      };
+    }
+
+    var svelteMeta=getSvelteMetaFromElement(el);
+    if(svelteMeta){
+      var sLoc=svelteMeta.loc||null;
+      var sFile=sLoc&&sLoc.file?String(sLoc.file):'';
+      var sName=withoutExt(basename(sFile));
+      return {
+        framework:'svelte',
+        component_name:sName||'SvelteComponent',
+        owner_path:withFrameworkSuffix(sName?[sName]:[],'svelte'),
+        source_file:sFile||'',
+        source_line:sLoc&&typeof sLoc.line==='number'?sLoc.line:undefined,
+        source_column:sLoc&&typeof sLoc.column==='number'?sLoc.column:undefined,
+        instance_key:''
+      };
+    }
+
+    var ngMatch=getAngularComponentFromElement(el);
+    if(ngMatch&&ngMatch.component){
+      var ngName=(ngMatch.component.constructor&&ngMatch.component.constructor.name)
+        ? String(ngMatch.component.constructor.name)
+        : 'AngularComponent';
+      return {
+        framework:'angular',
+        component_name:ngName,
+        owner_path:withFrameworkSuffix(getAngularOwnerPath(el),'angular'),
+        source_file:'',
+        source_line:undefined,
+        source_column:undefined,
+        instance_key:''
+      };
+    }
+
+    return null;
+  }
+
   function getExplicitAnchorId(el){
     if(!el||typeof el.closest!=='function') return '';
     var holder=el.closest('[data-checkpoint-anchor]');
@@ -156,22 +363,26 @@ function buildMinimalTrackingScript() {
 
   function getSourceAnchorFromElement(el){
     if(!el||el.nodeType!==1) return null;
-    var fiber=getReactFiberNode(el);
-    var ownerPath=getReactOwnerPathFromFiber(fiber);
-    var source=getSourceDebugInfo(fiber);
-    var component=getReactFiberName(fiber);
     var explicitId=getExplicitAnchorId(el);
-    var reactKey=fiber&&fiber.key!=null?String(fiber.key):'';
-    var hasData=!!(explicitId||component||ownerPath.length>0||source||reactKey);
+    var context=getFrameworkContextFromElement(el);
+    var hasData=!!(
+      explicitId||
+      (context&&(
+        context.component_name||
+        (Array.isArray(context.owner_path)&&context.owner_path.length>0)||
+        context.source_file||
+        context.instance_key
+      ))
+    );
     if(!hasData) return null;
     return {
       explicit_id:explicitId||undefined,
-      component_name:component||undefined,
-      owner_path:ownerPath,
-      source_file:source&&source.fileName?String(source.fileName):undefined,
-      source_line:source&&typeof source.lineNumber==='number'?source.lineNumber:undefined,
-      source_column:source&&typeof source.columnNumber==='number'?source.columnNumber:undefined,
-      react_key:reactKey||undefined,
+      component_name:context&&context.component_name?context.component_name:undefined,
+      owner_path:context&&Array.isArray(context.owner_path)?context.owner_path:[],
+      source_file:context&&context.source_file?context.source_file:undefined,
+      source_line:context&&typeof context.source_line==='number'?context.source_line:undefined,
+      source_column:context&&typeof context.source_column==='number'?context.source_column:undefined,
+      react_key:context&&context.instance_key?context.instance_key:undefined,
       host_tag:el&&el.tagName?String(el.tagName).toLowerCase():undefined
     };
   }
@@ -249,17 +460,16 @@ function buildMinimalTrackingScript() {
       if(explicit===sourceAnchor.explicit_id) score+=2400;
       else if(explicit) score-=200;
     }
-    var fiber=getReactFiberNode(el);
-    var component=getReactFiberName(fiber);
-    var source=getSourceDebugInfo(fiber);
-    var ownerPath=getReactOwnerPathFromFiber(fiber);
+    var context=getFrameworkContextFromElement(el);
+    var component=context&&context.component_name?context.component_name:'';
+    var ownerPath=context&&Array.isArray(context.owner_path)?context.owner_path:[];
     if(sourceAnchor.component_name&&component===sourceAnchor.component_name) score+=240;
-    if(sourceAnchor.react_key&&fiber&&fiber.key!=null&&String(fiber.key)===sourceAnchor.react_key) score+=360;
+    if(sourceAnchor.react_key&&context&&context.instance_key&&String(context.instance_key)===sourceAnchor.react_key) score+=360;
     score+=ownerSuffixScore(ownerPath,sourceAnchor.owner_path||[]);
-    if(sourceAnchor.source_file&&source&&String(source.fileName||'')===String(sourceAnchor.source_file)){
+    if(sourceAnchor.source_file&&context&&context.source_file&&String(context.source_file||'')===String(sourceAnchor.source_file)){
       score+=420;
-      if(typeof sourceAnchor.source_line==='number'&&source.lineNumber===sourceAnchor.source_line) score+=420;
-      if(typeof sourceAnchor.source_column==='number'&&source.columnNumber===sourceAnchor.source_column) score+=80;
+      if(typeof sourceAnchor.source_line==='number'&&context.source_line===sourceAnchor.source_line) score+=420;
+      if(typeof sourceAnchor.source_column==='number'&&context.source_column===sourceAnchor.source_column) score+=80;
     }
     if(sourceAnchor.host_tag&&el.tagName&&String(el.tagName).toLowerCase()===sourceAnchor.host_tag) score+=40;
     return score;
@@ -451,19 +661,6 @@ function buildMinimalTrackingScript() {
     return { coordFallback:null, strategy:'none', matchedSelector:null, status:'none' };
   }
 
-              function getInspectLabelText(target){
-                if(!target||!target.tagName) return '';
-                var tag=String(target.tagName).toLowerCase();
-                var id=target.id?('#'+target.id):'';
-                var cls='';
-                try{
-                  var classes=(target.className&&typeof target.className==='string')
-                    ? target.className.trim().split(/\s+/).filter(Boolean).slice(0,3)
-                    : [];
-                  if(classes.length>0) cls='.'+classes.join('.');
-                }catch(e){}
-                return shortText(tag+id+cls);
-              }
 
   function ensureInspectUi(){
     if(!document.body) return;
@@ -483,31 +680,10 @@ inspectBox.style.border='2px solid #F26522';
       inspectBox.style.display='none';
       document.body.appendChild(inspectBox);
     }
-    if(!inspectLabel){
-      inspectLabel=document.createElement('div');
-      inspectLabel.style.position='fixed';
-      inspectLabel.style.left='0';
-      inspectLabel.style.top='0';
-      inspectLabel.style.padding='6px 8px';
-      inspectLabel.style.maxWidth='420px';
-      inspectLabel.style.borderRadius='8px';
-      inspectLabel.style.border='1px solid rgba(148,163,184,0.45)';
-      inspectLabel.style.background='rgba(15,23,42,0.96)';
-      inspectLabel.style.color='#e2e8f0';
-      inspectLabel.style.font='12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace';
-      inspectLabel.style.whiteSpace='nowrap';
-      inspectLabel.style.wordBreak='break-word';
-      inspectLabel.style.pointerEvents='none';
-      inspectLabel.style.zIndex='2147483647';
-      inspectLabel.style.display='none';
-      inspectLabel.style.boxShadow='0 6px 20px rgba(0,0,0,0.35)';
-      document.body.appendChild(inspectLabel);
-    }
   }
 
   function hideInspectUi(){
-    if(inspectBox) inspectBox.style.display='none';
-    if(inspectLabel) inspectLabel.style.display='none';
+              if(inspectBox) inspectBox.style.display='none';
   }
 
   function ensurePickShield(){
@@ -534,7 +710,7 @@ inspectBox.style.border='2px solid #F26522';
 
   function renderInspectAt(x,y){
     ensureInspectUi();
-    if(!inspectBox||!inspectLabel){
+                if(!inspectBox){
       return;
     }
     var target=getElementAtPoint(x,y);
@@ -552,18 +728,6 @@ inspectBox.style.border='2px solid #F26522';
     inspectBox.style.top=Math.max(0,rect.top)+'px';
     inspectBox.style.width=Math.max(1,rect.width)+'px';
     inspectBox.style.height=Math.max(1,rect.height)+'px';
-    inspectLabel.textContent=getInspectLabelText(target);
-    inspectLabel.style.display='block';
-
-    var vw=window.innerWidth||document.documentElement.clientWidth||0;
-    var vh=window.innerHeight||document.documentElement.clientHeight||0;
-    var lr=inspectLabel.getBoundingClientRect();
-    var left=x+12;
-    var top=y+12;
-    if(left+lr.width>vw-8) left=Math.max(8,x-lr.width-12);
-    if(top+lr.height>vh-8) top=Math.max(8,y-lr.height-12);
-    inspectLabel.style.left=left+'px';
-    inspectLabel.style.top=top+'px';
   }
 
   function postPickResult(target,clientX,clientY){

package/package.json

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