claude-chrome-parallel 3.0.3 → 3.4.0

package/assets/demo.svg

@@ -1,173 +1,278 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 380">
-  <defs>
-    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1a1a2e"/>
-      <stop offset="100%" style="stop-color:#16213e"/>
-    </linearGradient>
-    <linearGradient id="successGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#00b894"/>
-      <stop offset="100%" style="stop-color:#00cec9"/>
-    </linearGradient>
-    <linearGradient id="errorGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#e74c3c"/>
-      <stop offset="100%" style="stop-color:#c0392b"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Background -->
-  <rect width="800" height="380" fill="url(#bgGrad)"/>
-
-  <!-- Title -->
-  <text x="400" y="30" text-anchor="middle" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold">
-    Chrome Extension vs Claude Chrome Parallel
-  </text>
-
-  <!-- LEFT SIDE: Chrome Extension (Failing) -->
-  <g transform="translate(25, 50)">
-    <!-- Header -->
-    <rect x="0" y="0" width="360" height="28" rx="8" ry="8" fill="#2d3436"/>
-    <circle cx="14" cy="14" r="5" fill="#e74c3c"/>
-    <circle cx="30" cy="14" r="5" fill="#f39c12"/>
-    <circle cx="46" cy="14" r="5" fill="#27ae60"/>
-    <text x="180" y="18" text-anchor="middle" fill="#b2bec3" font-family="monospace" font-size="11">Chrome Extension</text>
-
-    <!-- Terminal body -->
-    <rect x="0" y="28" width="360" height="270" fill="#0d1117"/>
-    <rect x="0" y="288" width="360" height="10" rx="0" ry="0" fill="#2d3436"/>
-
-    <!-- Session 1 - Starts, completes -->
-    <text x="10" y="50" fill="#6c5ce7" font-family="monospace" font-size="11">$ claude "Screenshot github.com"</text>
-
-    <!-- Session 1 progress bar -->
-    <rect x="10" y="58" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;150;150;150;150;150;150;150;150;150" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="10" y="85" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓ Session 1 completed</tspan>
-      <animate attributeName="opacity" values="0;0;0;1;1;1;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 2 - Tries to start, gets error -->
-    <text x="10" y="115" fill="#6c5ce7" font-family="monospace" font-size="11">
-      <tspan>$ claude "Screenshot google.com"</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 2 attempting -->
-    <text x="10" y="135" fill="#fdcb6e" font-family="monospace" font-size="11">
-      <tspan>Connecting to browser...</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;1;0;0;0;0;0" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Error box -->
-    <g>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-      <rect x="10" y="145" width="340" height="55" rx="4" fill="#2d1b1b"/>
-      <text x="20" y="167" fill="#e74c3c" font-family="monospace" font-size="12" font-weight="bold">
-        ✗ Error: Session Detached
-      </text>
-      <text x="20" y="187" fill="#e17055" font-family="monospace" font-size="10">
-        Target closed. Another session took control.
-      </text>
-    </g>
-
-    <!-- Blinking cursor at bottom -->
-    <rect x="10" y="215" width="8" height="14" fill="#fff">
-      <animate attributeName="opacity" values="1;0;1" dur="1s" repeatCount="indefinite"/>
-    </rect>
-
-    <!-- Status -->
-    <text x="180" y="270" text-anchor="middle" fill="#e74c3c" font-family="system-ui" font-size="13" font-weight="bold">
-      ❌ Only 1 session at a time
-    </text>
-  </g>
-
-  <!-- VS Divider -->
-  <text x="400" y="200" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="22" font-weight="bold">VS</text>
-
-  <!-- RIGHT SIDE: Claude Chrome Parallel (Success) -->
-  <g transform="translate(415, 50)">
-    <!-- Header -->
-    <rect x="0" y="0" width="360" height="28" rx="8" ry="8" fill="#2d3436"/>
-    <circle cx="14" cy="14" r="5" fill="#e74c3c"/>
-    <circle cx="30" cy="14" r="5" fill="#f39c12"/>
-    <circle cx="46" cy="14" r="5" fill="#27ae60"/>
-    <text x="180" y="18" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="11" font-weight="bold">Claude Chrome Parallel</text>
-
-    <!-- Terminal body -->
-    <rect x="0" y="28" width="360" height="270" fill="#0d1117"/>
-    <rect x="0" y="288" width="360" height="10" rx="0" ry="0" fill="#2d3436"/>
-
-    <!-- ALL 5 SESSIONS START SIMULTANEOUSLY -->
-
-    <!-- Session 1 -->
-    <text x="10" y="50" fill="#a29bfe" font-family="monospace" font-size="11">Session 1: github.com</text>
-    <rect x="150" y="40" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;20;50;80;110;130;130;130;130;130" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="290" y="50" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 2 -->
-    <text x="10" y="75" fill="#a29bfe" font-family="monospace" font-size="11">Session 2: google.com</text>
-    <rect x="150" y="65" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;25;55;85;100;120;120;120;120;120" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="280" y="75" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 3 -->
-    <text x="10" y="100" fill="#a29bfe" font-family="monospace" font-size="11">Session 3: amazon.com</text>
-    <rect x="150" y="90" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;30;60;90;120;140;140;140;140;140" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="300" y="100" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 4 -->
-    <text x="10" y="125" fill="#a29bfe" font-family="monospace" font-size="11">Session 4: naver.com</text>
-    <rect x="150" y="115" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;15;45;75;95;110;110;110;110;110" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="270" y="125" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Session 5 -->
-    <text x="10" y="150" fill="#a29bfe" font-family="monospace" font-size="11">Session 5: twitter.com</text>
-    <rect x="150" y="140" width="0" height="12" rx="2" fill="url(#successGrad)">
-      <animate attributeName="width" values="0;0;22;52;82;112;125;125;125;125;125" dur="10s" repeatCount="indefinite"/>
-    </rect>
-    <text x="285" y="150" fill="#00b894" font-family="monospace" font-size="11">
-      <tspan>✓</tspan>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-    </text>
-
-    <!-- Result summary box -->
-    <g>
-      <animate attributeName="opacity" values="0;0;0;0;0;0;0;1;1;1;1" dur="10s" repeatCount="indefinite"/>
-      <rect x="10" y="170" width="340" height="70" rx="6" fill="#1a3a1a"/>
-      <text x="180" y="195" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="12" font-weight="bold">
-        All 5 sessions completed in parallel!
-      </text>
-      <text x="180" y="215" text-anchor="middle" fill="#55efc4" font-family="monospace" font-size="11">
-        Total: 1.4s (Sequential would take 7.0s)
-      </text>
-      <text x="180" y="232" text-anchor="middle" fill="#81ecec" font-family="system-ui" font-size="11">
-        ⚡ 5x faster
-      </text>
-    </g>
-
-    <!-- Status -->
-    <text x="180" y="270" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="13" font-weight="bold">
-      ✅ 20+ concurrent sessions
-    </text>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 480">
+  <defs>
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0d1117"/>
+      <stop offset="100%" style="stop-color:#161b22"/>
+    </linearGradient>
+    <linearGradient id="successGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#00b894"/>
+      <stop offset="100%" style="stop-color:#00cec9"/>
+    </linearGradient>
+    <linearGradient id="authGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#e17055"/>
+      <stop offset="100%" style="stop-color:#e74c3c"/>
+    </linearGradient>
+    <linearGradient id="taskGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#636e72"/>
+      <stop offset="100%" style="stop-color:#74b9ff"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="800" height="480" fill="url(#bgGrad)" rx="12"/>
+
+  <!-- Title -->
+  <text x="400" y="30" text-anchor="middle" fill="#fff" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold">
+    Playwright MCP vs CCP — 5 Authenticated Sites
+  </text>
+  <text x="400" y="48" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="11">
+    AWS Billing + Stripe Dashboard + Vercel Usage + GitHub Actions + Slack Messages
+  </text>
+
+  <!-- ═══════════════════════════════════════════════════════ -->
+  <!-- LEFT SIDE: Playwright MCP (Sequential + Auth overhead) -->
+  <!-- ═══════════════════════════════════════════════════════ -->
+  <g transform="translate(20, 65)">
+    <!-- Header -->
+    <rect x="0" y="0" width="370" height="24" rx="6" fill="#2d3436"/>
+    <circle cx="14" cy="12" r="4" fill="#e74c3c"/>
+    <circle cx="28" cy="12" r="4" fill="#f39c12"/>
+    <circle cx="42" cy="12" r="4" fill="#27ae60"/>
+    <text x="185" y="16" text-anchor="middle" fill="#b2bec3" font-family="monospace" font-size="10" font-weight="bold">Playwright MCP</text>
+
+    <!-- Terminal body -->
+    <rect x="0" y="24" width="370" height="340" fill="#0d1117" rx="0"/>
+    <rect x="0" y="354" width="370" height="10" rx="0" ry="6" fill="#2d3436"/>
+
+    <!-- Legend -->
+    <rect x="10" y="32" width="8" height="8" fill="url(#authGrad)" rx="1"/>
+    <text x="22" y="40" fill="#e17055" font-family="monospace" font-size="9">Login (30-60s each)</text>
+    <rect x="160" y="32" width="8" height="8" fill="url(#taskGrad)" rx="1"/>
+    <text x="172" y="40" fill="#74b9ff" font-family="monospace" font-size="9">Task (~3s each)</text>
+
+    <!-- Site 1: AWS — auth then task, sequential -->
+    <text x="10" y="62" fill="#b2bec3" font-family="monospace" font-size="10">AWS Billing</text>
+    <!-- Auth bar (long) -->
+    <rect x="90" y="53" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;30;60;90;120;150;180;180;180;180;180;180;180;180;180;180;180;180;180" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="62" fill="#fff" font-family="monospace" font-size="8" opacity="0.8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0.8;0.8;0.8;0.8;0.8;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <!-- Task bar (short) -->
+    <rect x="272" y="53" width="0" height="10" rx="2" fill="url(#taskGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;15;15;15;15;15;15;15;15;15;15;15;15" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="295" y="62" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>ok</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 2: Stripe — starts after AWS finishes -->
+    <text x="10" y="86" fill="#b2bec3" font-family="monospace" font-size="10">
+      <tspan>Stripe</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="90" y="77" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;30;60;90;120;150;150;150;150;150;150" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="86" fill="#fff" font-family="monospace" font-size="8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0.8;0.8;0.8;0.8;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="242" y="77" width="0" height="10" rx="2" fill="url(#taskGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;15;15;15;15;15" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="265" y="86" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>ok</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 3: Vercel — waiting... -->
+    <text x="10" y="110" fill="#b2bec3" font-family="monospace" font-size="10">
+      <tspan>Vercel</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <rect x="90" y="101" width="0" height="10" rx="2" fill="url(#authGrad)">
+      <animate attributeName="width" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;30;60;90" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="92" y="110" fill="#fff" font-family="monospace" font-size="8">
+      <tspan>login...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.8;0.8;0.8" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 4: GitHub — not started yet -->
+    <text x="10" y="134" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>GitHub</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Site 5: Slack — not started yet -->
+    <text x="10" y="158" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>Slack</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Waiting dots -->
+    <text x="90" y="134" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>waiting...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+    <text x="90" y="158" fill="#636e72" font-family="monospace" font-size="10">
+      <tspan>waiting...</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0.5" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Memory usage (climbing) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="185" width="350" height="48" rx="4" fill="#1a1a1a"/>
+      <text x="20" y="201" fill="#e74c3c" font-family="monospace" font-size="9" font-weight="bold">Memory Usage</text>
+      <!-- Memory bar growing -->
+      <rect x="20" y="210" width="0" height="14" rx="2" fill="#e74c3c" opacity="0.6">
+        <animate attributeName="width" values="0;40;60;80;100;120;140;160;180;200;220;240;260;280;280;300;300;320;320;320" dur="20s" repeatCount="indefinite"/>
+      </rect>
+      <text x="20" y="220" fill="#fff" font-family="monospace" font-size="8">
+        <animate attributeName="textContent" values="200MB;400MB;600MB;800MB;1.0GB;1.2GB;1.4GB;1.6GB;1.8GB;2.0GB" dur="20s" repeatCount="indefinite"/>
+      </text>
+      <!-- Show text separately with animation -->
+      <text x="25" y="220" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">
+        <tspan>2.5 GB</tspan>
+        <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+      <text x="180" y="220" fill="#e17055" font-family="monospace" font-size="8">
+        <tspan>(5 browser processes)</tspan>
+        <animate attributeName="opacity" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+    </g>
+
+    <!-- Elapsed time (counting up) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <text x="10" y="260" fill="#636e72" font-family="monospace" font-size="10">Elapsed:</text>
+      <text x="72" y="260" fill="#fdcb6e" font-family="monospace" font-size="10" font-weight="bold">
+        <tspan>still running...</tspan>
+        <animate attributeName="opacity" values="0;0;1;1;1;1;1;1;0.5;1;1;1;1;1;0.5;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      </text>
+    </g>
+
+    <!-- Bottom status -->
+    <text x="185" y="310" text-anchor="middle" fill="#e74c3c" font-family="system-ui" font-size="12" font-weight="bold">
+      Sequential + Login per site
+    </text>
+    <text x="185" y="328" text-anchor="middle" fill="#636e72" font-family="monospace" font-size="10">
+      ~250s for 5 sites (50s auth x 5 + tasks)
+    </text>
+    <text x="185" y="346" text-anchor="middle" fill="#e17055" font-family="monospace" font-size="10">
+      ~500MB RAM per browser instance
+    </text>
+  </g>
+
+  <!-- ═══════════════════════════════════════════════ -->
+  <!-- RIGHT SIDE: CCP (Parallel + Zero auth + Light) -->
+  <!-- ═══════════════════════════════════════════════ -->
+  <g transform="translate(410, 65)">
+    <!-- Header -->
+    <rect x="0" y="0" width="370" height="24" rx="6" fill="#2d3436"/>
+    <circle cx="14" cy="12" r="4" fill="#e74c3c"/>
+    <circle cx="28" cy="12" r="4" fill="#f39c12"/>
+    <circle cx="42" cy="12" r="4" fill="#27ae60"/>
+    <text x="185" y="16" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="10" font-weight="bold">CCP (Claude Chrome Parallel)</text>
+
+    <!-- Terminal body -->
+    <rect x="0" y="24" width="370" height="340" fill="#0d1117"/>
+    <rect x="0" y="354" width="370" height="10" rx="0" ry="6" fill="#2d3436"/>
+
+    <!-- Legend -->
+    <text x="10" y="40" fill="#636e72" font-family="monospace" font-size="9">No login needed — already authenticated</text>
+
+    <!-- ALL 5 start simultaneously -->
+    <text x="10" y="62" fill="#a29bfe" font-family="monospace" font-size="10">AWS Billing</text>
+    <rect x="110" y="53" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;40;80;120;120;120;120;120;120;120;120;120;120;120;120;120;120;120;120" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="235" y="62" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.8s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="82" fill="#a29bfe" font-family="monospace" font-size="10">Stripe</text>
+    <rect x="110" y="73" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;35;75;110;110;110;110;110;110;110;110;110;110;110;110;110;110;110;110" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="225" y="82" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.5s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="102" fill="#a29bfe" font-family="monospace" font-size="10">Vercel</text>
+    <rect x="110" y="93" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;45;90;130;130;130;130;130;130;130;130;130;130;130;130;130;130;130;130" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="245" y="102" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 3.1s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="122" fill="#a29bfe" font-family="monospace" font-size="10">GitHub</text>
+    <rect x="110" y="113" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;30;65;100;100;100;100;100;100;100;100;100;100;100;100;100;100;100;100" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="215" y="122" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.3s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <text x="10" y="142" fill="#a29bfe" font-family="monospace" font-size="10">Slack</text>
+    <rect x="110" y="133" width="0" height="10" rx="2" fill="url(#successGrad)">
+      <animate attributeName="width" values="0;0;38;78;115;115;115;115;115;115;115;115;115;115;115;115;115;115;115;115" dur="20s" repeatCount="indefinite"/>
+    </rect>
+    <text x="230" y="142" fill="#00b894" font-family="monospace" font-size="9">
+      <tspan>done 2.6s</tspan>
+      <animate attributeName="opacity" values="0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+    </text>
+
+    <!-- Result box appears fast -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="160" width="350" height="55" rx="6" fill="#0a2e0a" stroke="#00b894" stroke-width="1"/>
+      <text x="185" y="180" text-anchor="middle" fill="#00b894" font-family="system-ui" font-size="13" font-weight="bold">
+        All 5 sites done in 3.1s
+      </text>
+      <text x="185" y="200" text-anchor="middle" fill="#55efc4" font-family="monospace" font-size="11">
+        Zero logins. Zero waiting. All parallel.
+      </text>
+    </g>
+
+    <!-- Memory usage (small and stable) -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="10" y="230" width="350" height="48" rx="4" fill="#1a1a1a"/>
+      <text x="20" y="246" fill="#00b894" font-family="monospace" font-size="9" font-weight="bold">Memory Usage</text>
+      <rect x="20" y="255" width="60" height="14" rx="2" fill="#00b894" opacity="0.5"/>
+      <text x="25" y="265" fill="#fff" font-family="monospace" font-size="8" font-weight="bold">~300 MB</text>
+      <text x="100" y="265" fill="#55efc4" font-family="monospace" font-size="8">(1 Chrome + 5 lightweight contexts)</text>
+    </g>
+
+    <!-- Speed comparison callout -->
+    <g>
+      <animate attributeName="opacity" values="0;0;0;0;0;0;1;1;1;1;1;1;1;1;1;1;1;1;1;1" dur="20s" repeatCount="indefinite"/>
+      <rect x="30" y="290" width="310" height="50" rx="8" fill="#0a2e0a" stroke="#00cec9" stroke-width="2"/>
+      <text x="185" y="313" text-anchor="middle" fill="#00cec9" font-family="system-ui" font-size="20" font-weight="bold">
+        80x faster
+      </text>
+      <text x="185" y="332" text-anchor="middle" fill="#81ecec" font-family="monospace" font-size="10">
+        3.1s vs ~250s  |  300MB vs 2.5GB
+      </text>
+    </g>
+  </g>
+
+  <!-- Bottom comparison bar -->
+  <g transform="translate(0, 440)">
+    <rect x="20" y="0" width="760" height="30" rx="6" fill="#161b22" stroke="#2d3436" stroke-width="1"/>
+    <text x="120" y="20" text-anchor="middle" fill="#e74c3c" font-family="monospace" font-size="10">Playwright: ~250s | 2.5GB</text>
+    <text x="400" y="20" text-anchor="middle" fill="#636e72" font-family="system-ui" font-size="11" font-weight="bold">vs</text>
+    <text x="650" y="20" text-anchor="middle" fill="#00b894" font-family="monospace" font-size="10">CCP: ~3s | 300MB | already logged in</text>
+  </g>
+</svg>

package/dist/cdp/client.d.ts

@@ -30,6 +30,9 @@ export declare class CDPClient {
     private targetDestroyedListeners;
     private reconnectAttempts;
     private autoLaunch;
+    private cookieSourceCache;
+    private cookieDataCache;
+    private static readonly COOKIE_CACHE_TTL;
     constructor(options?: CDPClientOptions);
     /**
      * Get current connection state
@@ -104,12 +107,32 @@ export declare class CDPClient {
      * Close a browser context and all its pages
      */
     closeBrowserContext(context: BrowserContext): Promise<void>;
+    /**
+     * Check if a hostname is localhost
+     */
+    private isLocalhost;
+    /**
+     * Calculate domain match score between two URLs
+     * Higher score = better match
+     */
+    private domainMatchScore;
+    /**
+     * Find an authenticated page with cookies to copy from
+     * Returns the targetId of a page that has cookies in Chrome's default context
+     * @param targetDomain Optional domain to prioritize when selecting cookie source
+     */
+    findAuthenticatedPageTargetId(targetDomain?: string): Promise<string | null>;
+    /**
+     * Copy all cookies from authenticated page to destination page
+     * Uses raw WebSocket CDP connection to bypass Puppeteer's context isolation
+     */
+    copyCookiesViaCDP(sourceTargetId: string, destPage: Page): Promise<number>;
     /**
      * Create a new page with default viewport
      * @param url Optional URL to navigate to
-     * @param context Optional browser context for session isolation
+     * @param context Optional browser context for session isolation (null/undefined = use Chrome's default context with cookies)
      */
-    createPage(url?: string, context?: BrowserContext): Promise<Page>;
+    createPage(url?: string, context?: BrowserContext | null): Promise<Page>;
     /**
      * Get all page targets
      */
@@ -134,6 +157,10 @@ export declare class CDPClient {
      * Find target by ID
      */
     findTarget(targetId: string): Target | undefined;
+    /**
+     * Trigger garbage collection on a page (best-effort)
+     */
+    triggerGC(page: Page): Promise<void>;
     /**
      * Close a page by target ID
      */
@@ -142,6 +169,37 @@ export declare class CDPClient {
      * Check if connected
      */
     isConnected(): boolean;
+    /**
+     * Get the port this client is connected to
+     */
+    getPort(): number;
+    /**
+     * Create a CDPClient instance for a specific port
+     */
+    static createForPort(port: number, options?: CDPClientOptions): CDPClient;
 }
 export declare function getCDPClient(options?: CDPClientOptions): CDPClient;
+/**
+ * Factory for managing multiple CDPClient instances (one per Chrome port)
+ */
+export declare class CDPClientFactory {
+    private clients;
+    /**
+     * Get an existing client for the given port, or create a new one
+     */
+    getOrCreate(port: number, options?: CDPClientOptions): CDPClient;
+    /**
+     * Get an existing client for the given port, or undefined if not found
+     */
+    get(port: number): CDPClient | undefined;
+    /**
+     * Get all managed client instances
+     */
+    getAll(): CDPClient[];
+    /**
+     * Disconnect all managed clients
+     */
+    disconnectAll(): Promise<void>;
+}
+export declare function getCDPClientFactory(): CDPClientFactory;
 //# sourceMappingURL=client.d.ts.map

package/dist/cdp/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/cdp/client.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/cdp/client.ts"],"names":[],"mappings":"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"}