six-degrees 0.3.0 → 0.4.0

package/.next/standalone/app/components/Sidebar.js

@@ -1,14 +1,25 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
-import { runScrape, scraperStatus, notReadyMessage } from '../../lib/scraper-client';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import Link from 'next/link';
+import { beginScrape, scraperStatus, notReadyMessage, resumePoint, scansCircleOf, isCircleScan, busyReason } from '../../lib/scraper-client';
+import useScanner from './useScanner';
+import useRequests from './useRequests';
+import TheirCircle from './TheirCircle';
+import { hasRequest, markRequested, undoRequest } from '../../lib/requests-client';
 import { useUser } from './UserProvider';
 import { routeIndex, routesFor } from '../../lib/separation';
 import { topCompanies } from '../../lib/scoring';
+import { reachIndex, reachState, circleState, readyToScan, circleScanCost } from '../../lib/reach';
 import Avatar from './Avatar';
+import { localPhoto } from '../../lib/photos';
 
-export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending }) {
+export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending, scanNotes, csvSource = null }) {
   const isDegreesMode = mode === 'degrees';
+  // 'sample' or 'csv' while the sample or a CSV import is open in this window,
+  // null for your own network. Only your own can be scanned: the scanner looks
+  // the person up in the database, and these two never reach it.
+  const canScan = !csvSource;
   const { userId, userProfile: ctxProfile } = useUser();
   const userProfile = ctxProfile || { name: 'User', sectors: [], goals: [] };
   const [searchQuery, setSearchQuery] = useState('');
@@ -26,9 +37,13 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
   }, [degree2]);
   // Who reaches whom, from the FULL lists this panel is given — so every route
   // shows even while a tier chip is narrowing the view, and a person picked in
-  // Chains, Revolver or Galaxy gets every route too.
+  // Chains or Galaxy gets every route too.
   const routeIdx = useMemo(() => routeIndex(degree2), [degree2]);
   const bridgeById = useMemo(() => new Map(connections.map(c => [c.id, c])), [connections]);
+  // Who you've asked, shared with every view: a request sent here shows in
+  // Separation, the circle and the Outlink queue at once (lib/requests-client.js).
+  const requests = useRequests();
+  const isRequested = useCallback((row) => hasRequest(row, requests), [requests]);
 
   if (selected) {
     const isBridge = selected.degree === 1 && bridgeMap[selected.id];
@@ -86,9 +101,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         </div>
         {/* Profile photo + name */}
         <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
-          {selected.profile_image_url ? (
+          {localPhoto(selected.profile_image_url) ? (
             <img
-              src={selected.profile_image_url}
+              src={localPhoto(selected.profile_image_url)}
               alt={selected.name}
               style={{ width: 52, height: 52, borderRadius: '50%', objectFit: 'cover', border: `2px solid ${tierColors[selected.tier] || '#555'}`, flexShrink: 0 }}
               onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }}
@@ -97,7 +112,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           <div style={{
             width: 52, height: 52, borderRadius: '50%', flexShrink: 0,
             background: tierColors[selected.tier] || '#555',
-            display: selected.profile_image_url ? 'none' : 'flex',
+            display: localPhoto(selected.profile_image_url) ? 'none' : 'flex',
             alignItems: 'center', justifyContent: 'center',
             fontSize: 20, fontWeight: 700, color: selected.tier === 'S' ? '#000' : '#fff',
           }}>
@@ -114,6 +129,16 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           </div>
         </div>
 
+        {/* Their circle, out to six degrees: who they know, who you added from
+            it, and who those people know (TheirCircle.js). Your connections only:
+            a 2nd-degree person's circle isn't yours to scan until they accept. */}
+        {selected.degree === 1 && (
+          <TheirCircle
+            person={selected} connections={connections} degree2={degree2}
+            tierColors={tierColors} onSelect={onSelect} isRequested={isRequested} canScan={canScan}
+          />
+        )}
+
         {selected.is_catalyst && (
           <div style={{
             background: 'rgba(0,255,136,0.08)', border: '1px solid rgba(0,255,136,0.3)',
@@ -239,8 +264,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
                   >
-                    {m.profile_image_url ? (
-                      <img src={m.profile_image_url} alt="" style={{
+                    {localPhoto(m.profile_image_url) ? (
+                      <img src={localPhoto(m.profile_image_url)} alt="" style={{
                         width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                         border: `1px solid ${tierColors[m.tier] || '#555'}`,
                       }} onError={e => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }} />
@@ -248,7 +273,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     <div style={{
                       width: 22, height: 22, borderRadius: '50%', flexShrink: 0, fontSize: 9, fontWeight: 700,
                       background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : '#fff',
-                      display: m.profile_image_url ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
+                      display: localPhoto(m.profile_image_url) ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
                     }}>{m.name?.charAt(0)}</div>
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <div style={{ fontSize: 10, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</div>
@@ -294,61 +319,67 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           </button>
         )}
 
-        {/* Connect to Unlock — for ALL degree-2 connections */}
-        {(selected.degree === 2 || selected.source_connection_id) && selected.degree !== 1 && selected.unlock_status !== 'unlocked' && (
-          <div style={{
-            background: 'rgba(255,215,0,0.06)', border: '1px solid rgba(255,215,0,0.25)',
-            borderRadius: 10, padding: 16, marginTop: 16, textAlign: 'center',
-          }}>
-            <div style={{ fontSize: 10, color: '#FFD700', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>
-              {selected.unlock_status === 'pending' ? 'CONNECTION PENDING' : 'LOCKED PATH'}
-            </div>
-            <div style={{ fontSize: 13, color: '#ccc', marginBottom: 12 }}>
-              {selected.unlock_status === 'pending'
-                ? `Waiting for ${selected.name} to accept. Run a scan to check.`
-                : `Connect with ${selected.name} to unlock their network and extend your 6 degrees.`
-              }
-            </div>
+        {/* Connect to Unlock — for ALL degree-2 connections. A request sent here
+            is the person's, everywhere at once (lib/requests-client.js). */}
+        {(selected.degree === 2 || selected.source_connection_id) && selected.degree !== 1 && selected.unlock_status !== 'unlocked' && (() => {
+          const asked = isRequested(selected);
+          return (
             <div style={{
-              width: '100%', height: 60, background: 'rgba(255,255,255,0.03)',
-              borderRadius: 8, border: '1px dashed rgba(255,255,255,0.1)',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontSize: 11, color: '#444', marginBottom: 12,
+              background: 'rgba(255,215,0,0.06)', border: `1px ${asked ? 'dashed' : 'solid'} rgba(255,215,0,${asked ? 0.45 : 0.25})`,
+              borderRadius: 10, padding: 16, marginTop: 16, textAlign: 'center',
             }}>
-              {selected.unlock_status === 'pending' ? '[ Cluster Pending... ]' : '[ Hidden Network ]'}
+              <div style={{ fontSize: 10, color: '#FFD700', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>
+                {asked ? 'REQUEST SENT' : 'LOCKED PATH'}
+              </div>
+              <div style={{ fontSize: 13, color: '#ccc', marginBottom: 12 }}>
+                {asked
+                  ? `Waiting for ${selected.name} to accept. The next scan of your own connections notices when they do.`
+                  : `Connect with ${selected.name} to unlock their network and extend your six degrees.`
+                }
+              </div>
+              <div style={{
+                width: '100%', height: 60, background: 'rgba(255,255,255,0.03)',
+                borderRadius: 8, border: '1px dashed rgba(255,255,255,0.1)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                fontSize: 11, color: '#444', marginBottom: 12,
+              }}>
+                {asked ? '[ Cluster Pending... ]' : '[ Hidden Network ]'}
+              </div>
+              {asked ? (
+                <button
+                  onClick={() => { undoRequest(selected).catch(() => {}); }}
+                  style={{
+                    background: 'none', border: 'none', color: '#888', fontSize: 11, fontWeight: 600, cursor: 'pointer',
+                  }}
+                >
+                  Didn&apos;t send it? Undo
+                </button>
+              ) : (
+                <a href={selected.profile_url} target="_blank" rel="noopener noreferrer"
+                  style={{
+                    display: 'block', padding: '10px 16px',
+                    background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
+                    color: '#000', borderRadius: 8, textDecoration: 'none',
+                    fontWeight: 700, fontSize: 13,
+                  }}
+                  onClick={() => {
+                    // Opens their profile to connect, and marks the request
+                    // sent, through the bridge whose circle you found them in.
+                    markRequested(selected, { bridgeId: selected.source_connection_id }).catch(() => {});
+                  }}
+                >
+                  Connect to Unlock Path
+                </a>
+              )}
             </div>
-            {selected.unlock_status !== 'pending' && (
-              <a href={selected.profile_url} target="_blank" rel="noopener noreferrer"
-                style={{
-                  display: 'block', padding: '10px 16px',
-                  background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
-                  color: '#000', borderRadius: 8, textDecoration: 'none',
-                  fontWeight: 700, fontSize: 13,
-                }}
-                onClick={() => {
-                  // Mark as pending in unlock system
-                  fetch('/api/unlock', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ connectionId: selected.id }),
-                  }).catch(() => {});
-                  // Sync to outreach/pending system (Outlink)
-                  fetch('/api/outreach', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ action: 'mark-sent', connectionId: selected.id, profileUrl: selected.profile_url, userId }),
-                  }).catch(() => {});
-                }}
-              >
-                Connect to Unlock Path
-              </a>
-            )}
-          </div>
-        )}
+          );
+        })()}
 
         {/* Create Cluster — for D1 connections OR accepted D2 (promoted, ready to bridge for D3) */}
         {(selected.degree === 1 || selected.outreach_status === 'accepted') && (
-          <CreateClusterCard selected={selected} degree2={degree2} />
+          canScan
+            ? <CreateClusterCard key={selected.id} selected={selected} degree2={degree2} />
+            : <ScansNeedYourNetwork csvSource={csvSource} style={{ marginTop: 16 }} />
         )}
 
         {selected.profile_url && (
@@ -381,8 +412,10 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           Your bridge connections and who they unlock.
         </p>
 
-        {/* Auto-Bridge button */}
-        <AutoBridgeButton connections={connections} degree2={degree2} />
+        {/* Who to scan next: people you reached, whose own circle is next */}
+        {canScan
+          ? <ReadyToScan connections={connections} degree2={degree2} scanNotes={scanNotes} tierColors={tierColors} />
+          : <ScansNeedYourNetwork csvSource={csvSource} style={{ marginBottom: 16 }} />}
 
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
           <StatBox label="Degree-2 Found" value={degree2.length} />
@@ -435,8 +468,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
                     onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                   >
-                    {m.profile_image_url ? (
-                      <img src={m.profile_image_url} alt="" style={{ width: 24, height: 24, borderRadius: '50%', objectFit: 'cover' }} />
+                    {localPhoto(m.profile_image_url) ? (
+                      <img src={localPhoto(m.profile_image_url)} alt="" style={{ width: 24, height: 24, borderRadius: '50%', objectFit: 'cover' }} />
                     ) : (
                       <div style={{ width: 24, height: 24, borderRadius: '50%', background: tierColors[m.tier] || '#555', fontSize: 9, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{m.name?.charAt(0)}</div>
                     )}
@@ -471,8 +504,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                     border: '1px solid rgba(255,107,53,0.12)',
                   }}>
                     {/* Photo */}
-                    {p.profile_image_url ? (
-                      <img src={p.profile_image_url} alt="" style={{
+                    {localPhoto(p.profile_image_url) ? (
+                      <img src={localPhoto(p.profile_image_url)} alt="" style={{
                         width: 32, height: 32, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                         border: `2px solid ${tierColors[p.tier] || '#555'}`,
                       }} onError={e => { e.target.style.display = 'none'; }} />
@@ -653,8 +686,8 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                 onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
                 onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
               >
-                {c.profile_image_url ? (
-                  <img src={c.profile_image_url} alt="" style={{
+                {localPhoto(c.profile_image_url) ? (
+                  <img src={localPhoto(c.profile_image_url)} alt="" style={{
                     width: 24, height: 24, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                     border: `1.5px solid ${tierColors[c.tier] || '#555'}`,
                   }} onError={e => { e.target.style.display = 'none'; }} />
@@ -683,6 +716,11 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         {(() => {
           // Track per-tier rank numbering
           const tierRankCounter = {};
+          // Counted once. It used to be counted again for every person in the
+          // list: 900 million steps at 30,000 people, about 20 s on every render
+          // of the page while nothing was selected (opening the Filter panel, say).
+          const tierCounts = {};
+          allRanked.forEach(r => { tierCounts[r.tier] = (tierCounts[r.tier] || 0) + 1; });
           return allRanked.map((c, i) => {
           const prevTier = i > 0 ? allRanked[i - 1].tier : null;
           const showHeader = c.tier !== prevTier;
@@ -690,8 +728,6 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           tierRankCounter[c.tier] = (tierRankCounter[c.tier] || 0) + 1;
           const tierRank = tierRankCounter[c.tier];
           const tierNames = { S: 'S-Tier — Elite', A: 'A-Tier — High Value', B: 'B-Tier — Notable', C: 'C-Tier — Standard', D: 'D-Tier — Entry' };
-          const tierCounts = {};
-          allRanked.forEach(r => { tierCounts[r.tier] = (tierCounts[r.tier] || 0) + 1; });
           return (
           <div key={c.id}>
             {showHeader && (
@@ -723,9 +759,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
               #{tierRank}
             </span>
             {/* Profile photo or initial */}
-            {c.profile_image_url ? (
+            {localPhoto(c.profile_image_url) ? (
               <img
-                src={c.profile_image_url}
+                src={localPhoto(c.profile_image_url)}
                 alt=""
                 style={{ width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                   border: `1.5px solid ${tierColors[c.tier] || '#555'}` }}
@@ -735,7 +771,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
             <div style={{
               width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
               background: tierColors[c.tier] || '#555',
-              display: c.profile_image_url ? 'none' : 'flex',
+              display: localPhoto(c.profile_image_url) ? 'none' : 'flex',
               alignItems: 'center', justifyContent: 'center',
               fontSize: 12, fontWeight: 700, color: c.tier === 'S' ? '#000' : '#fff',
             }}>
@@ -916,146 +952,181 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
   );
 }
 
+// Scan one person's circle, or carry on with it.
+//
+// LinkedIn lists someone else's connections in its own order, with no dates,
+// so anyone new can turn up on any page: Rescan reads the whole list again from
+// page 1. Resume carries on from the page the last read stopped at, for a list
+// that was only partly read. Both show when there is something to resume.
+//
+// Whether a scan is running comes from the scanner (useScanner), not from this
+// card: close the card mid-scan and open it again and the scan is still here,
+// and every other card greys its buttons out until it ends.
 function CreateClusterCard({ selected, degree2 }) {
-  const { userId } = useUser();
-  const [status, setStatus] = useState('idle'); // idle, checking, scraping, done, error, offline
-  const [log, setLog] = useState([]);
-  const hasCluster = degree2?.some(d => d.source_connection_id === selected.id);
+  const scan = useScanner();
+  const [checking, setChecking] = useState(false);
+  const [problem, setProblem] = useState(null);      // why a scan didn't start: { text, offline }
+  const [resume, setResume] = useState(undefined);   // where Resume carries on; null: nothing to resume
   const clusterCount = degree2?.filter(d => d.source_connection_id === selected.id).length || 0;
-
-  if (hasCluster && status === 'idle') {
-    return (
-      <div style={{
-        background: 'rgba(0,255,136,0.06)', border: '1px solid rgba(0,255,136,0.2)',
-        borderRadius: 10, padding: 16, marginTop: 16, textAlign: 'center',
-      }}>
-        <div style={{ fontSize: 10, color: '#00ff88', fontWeight: 700, letterSpacing: 1, marginBottom: 4 }}>
-          CLUSTER ACTIVE
-        </div>
-        <div style={{ fontSize: 13, color: '#aaa' }}>
-          {clusterCount} connections mapped in 6 Degrees
-        </div>
-        <button
-          onClick={startScrape}
-          style={{
-            marginTop: 10, padding: '8px 16px', borderRadius: 6, border: 'none', cursor: 'pointer',
-            background: 'rgba(0,255,136,0.12)', color: '#00ff88', fontWeight: 600, fontSize: 11,
-          }}
-        >
-          Rescan Cluster
-        </button>
-      </div>
-    );
-  }
-
-  async function startScrape() {
-    setStatus('checking');
-    setLog(['Checking the scanner...']);
+  const hasCluster = clusterCount > 0;
+
+  const mine = scan.running && scansCircleOf(scan, selected);
+  const busy = scan.running && !mine ? busyReason(scan) : null;
+  const last = scan.finished.find((j) => scansCircleOf(j, selected));
+
+  // Every read moves where Resume would carry on, so ask again whenever one ends.
+  const lastEnded = scan.finished[0]?.startedAt ?? null;
+  useEffect(() => {
+    let live = true;
+    resumePoint(selected.id).then((r) => { if (live) setResume(r); }, () => { if (live) setResume(null); });
+    return () => { live = false; };
+  }, [selected.id, lastEnded]);
+
+  async function start(action) {
+    setProblem(null);
+    setChecking(true);
     const blocked = notReadyMessage(await scraperStatus().catch(() => null));
+    setChecking(false);
     if (blocked) {
-      setStatus('offline');
-      setLog([blocked]);
+      setProblem({ text: blocked, offline: true });
       return;
     }
-
-    setStatus('scraping');
-    setLog(['Mapping the circle behind ' + selected.name + '...']);
-
     try {
-      const final = await runScrape('bridge', { name: selected.name, onLog: setLog });
-      if (final.exitCode === 0) {
-        setStatus('done');
-        setLog(prev => [...prev, 'Done. Refresh to see the cluster.']);
-      } else {
-        setStatus('error');
-      }
-    } catch {
-      setStatus('error');
-      setLog(['Failed to start the scan']);
+      await beginScrape(action, action === 'resume' ? { id: selected.id } : { name: selected.name, id: selected.id });
+    } catch (e) {
+      setProblem({ text: e.message || 'Could not start the scan.' });
     }
   }
 
+  const read = hasCluster || Boolean(resume);
+  const accent = hasCluster ? '#00ff88' : '#9B59B6';
+  const off = Boolean(busy) || checking;
+  const button = (primary) => ({
+    flex: 1, padding: '11px 8px', borderRadius: 8, fontWeight: 700, fontSize: primary ? 13 : 12,
+    cursor: off ? 'not-allowed' : 'pointer', opacity: off ? 0.45 : 1,
+    ...(primary
+      ? { border: 'none', background: 'linear-gradient(135deg, #9B59B6, #3498DB)', color: '#fff' }
+      : { border: `1px solid ${accent}55`, background: `${accent}14`, color: accent }),
+  });
+
   return (
-    <div style={{
-      background: 'rgba(155,89,182,0.08)', border: '1px solid rgba(155,89,182,0.3)',
+    <div id="scan-box" style={{
+      background: hasCluster ? 'rgba(0,255,136,0.06)' : 'rgba(155,89,182,0.08)',
+      border: `1px solid ${hasCluster ? 'rgba(0,255,136,0.2)' : 'rgba(155,89,182,0.3)'}`,
       borderRadius: 10, padding: 16, marginTop: 16,
     }}>
-      <div style={{ fontSize: 10, color: '#9B59B6', fontWeight: 700, letterSpacing: 1, marginBottom: 6, textAlign: 'center' }}>
-        CREATE CLUSTER
+      <div style={{ fontSize: 10, color: accent, fontWeight: 700, letterSpacing: 1, marginBottom: 4, textAlign: 'center' }}>
+        {hasCluster ? 'CLUSTER ACTIVE' : 'CREATE CLUSTER'}
       </div>
-      <div style={{ fontSize: 12, color: '#ccc', marginBottom: 12, textAlign: 'center' }}>
-        Scan {selected.name}&apos;s connections to map their network
+      <div style={{ fontSize: 12, color: '#aaa', marginBottom: 12, textAlign: 'center' }}>
+        {hasCluster
+          ? `${clusterCount} connections mapped in Six Degrees`
+          : <>Scan {selected.name}&apos;s connections to map their network</>}
       </div>
 
-      {status === 'idle' && (
-        <button
-          onClick={startScrape}
-          style={{
-            width: '100%', padding: '12px', borderRadius: 8, border: 'none', cursor: 'pointer',
-            background: 'linear-gradient(135deg, #9B59B6, #3498DB)',
-            color: '#fff', fontWeight: 700, fontSize: 14,
-          }}
-        >
-          Scan {selected.name}&apos;s Network
-        </button>
-      )}
-
-      {status === 'offline' && (
+      {mine ? (
+        <ScanLog title={scan.pending ? 'Starting…' : `Scanning ${selected.name}’s circle…`} log={scan.log} />
+      ) : problem?.offline ? (
         <>
           <div style={{ padding: '10px', borderRadius: 8, background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', color: '#ff5050', fontSize: 12, marginBottom: 8, textAlign: 'center' }}>
             Scanner offline
           </div>
           <div style={{ fontSize: 10, color: '#888', textAlign: 'center', marginBottom: 8 }}>
-            Open the <strong>Scan</strong> page to finish setting the scanner up
+            {problem.text} Open the <strong>Scan</strong> page to finish setting the scanner up.
           </div>
-          <button onClick={() => { setStatus('idle'); }} style={{
+          <button onClick={() => setProblem(null)} style={{
             width: '100%', padding: '10px', borderRadius: 8, border: 'none', cursor: 'pointer',
             background: 'rgba(255,255,255,0.1)', color: '#aaa', fontWeight: 600, fontSize: 12,
           }}>
             Retry
           </button>
         </>
-      )}
-
-      {(status === 'checking' || status === 'scraping') && (
-        <div>
-          <div style={{
-            padding: '10px', borderRadius: 8, background: 'rgba(155,89,182,0.1)',
-            border: '1px solid rgba(155,89,182,0.3)', marginBottom: 8,
-          }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#9B59B6', animation: 'pulse 1s infinite' }} />
-              <span style={{ fontSize: 11, fontWeight: 600, color: '#9B59B6' }}>Scanning...</span>
+      ) : (
+        <>
+          {last && <LastRead job={last} />}
+          <div style={{ display: 'flex', gap: 8 }}>
+            {resume && (
+              <button onClick={() => start('resume')} disabled={off} style={button(true)}>
+                Resume from page {resume.nextPage}
+              </button>
+            )}
+            <button onClick={() => start('bridge')} disabled={off} style={button(!resume && !hasCluster)}>
+              {read ? 'Rescan from the start' : <>Scan {selected.name}&apos;s Network</>}
+            </button>
+          </div>
+          {resume && (
+            <div style={{ fontSize: 10, color: '#888', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
+              Read to page {resume.pagesRead} so far. Resume carries on from page {resume.nextPage}. LinkedIn
+              lists their connections in its own order, not by date, so Rescan reads them all again from page 1.
+            </div>
+          )}
+          {hasCluster && resume === null && (
+            <div style={{ fontSize: 10, color: '#888', marginTop: 8, lineHeight: 1.45, textAlign: 'center' }}>
+              Their whole list has been read. LinkedIn doesn&apos;t date other people&apos;s connections, so a
+              rescan reads it all again to find anyone new.
             </div>
-            <div style={{ fontFamily: 'monospace', fontSize: 10, color: '#888', maxHeight: 100, overflow: 'auto' }}>
-              {log.map((l, i) => <div key={i}>{l}</div>)}
+          )}
+          {busy && (
+            <div style={{ fontSize: 10, color: '#bbb', marginTop: 8, textAlign: 'center' }}>
+              {busy}. One scan at a time: this one can start when it finishes.
             </div>
-          </div>
-        </div>
+          )}
+          {problem && (
+            <div style={{ fontSize: 11, color: '#ff8080', marginTop: 8, textAlign: 'center' }}>{problem.text}</div>
+          )}
+        </>
       )}
+    </div>
+  );
+}
 
-      {status === 'done' && (
-        <div style={{
-          padding: '10px', borderRadius: 8, background: 'rgba(0,255,136,0.1)',
-          border: '1px solid rgba(0,255,136,0.3)', color: '#00ff88', fontSize: 12, fontWeight: 600, textAlign: 'center',
-        }}>
-          Cluster created! Refresh the page to see it.
-        </div>
-      )}
+// In place of the Scan buttons while the sample or a CSV import is open. Both
+// live in this window only, so a scan could only fail: the scanner looks the
+// person up in the database, and says "Bridge '…' not found in database".
+function ScansNeedYourNetwork({ csvSource, style }) {
+  return (
+    <div style={{
+      padding: '10px 12px', borderRadius: 8, fontSize: 11, color: '#999', lineHeight: 1.5, textAlign: 'center',
+      background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', ...style,
+    }}>
+      {csvSource === 'sample'
+        ? 'Scanning needs your own network: everyone in the sample is invented.'
+        : 'Scanning needs your own network: a CSV import lives only in this window. Close it (× at the top) and open Scan.'}
+    </div>
+  );
+}
 
-      {status === 'error' && (
-        <>
-          <div style={{ padding: '10px', borderRadius: 8, background: 'rgba(255,80,80,0.1)', border: '1px solid rgba(255,80,80,0.3)', color: '#ff5050', fontSize: 12, textAlign: 'center', marginBottom: 8 }}>
-            Scan failed — connections may be private
-          </div>
-          <button onClick={() => { setStatus('idle'); setLog([]); }} style={{
-            width: '100%', padding: '10px', borderRadius: 8, border: 'none', cursor: 'pointer',
-            background: 'rgba(255,255,255,0.1)', color: '#aaa', fontWeight: 600, fontSize: 12,
-          }}>
-            Try Again
-          </button>
-        </>
-      )}
+/** A running scan's log, newest at the bottom. */
+function ScanLog({ title, log, small = false }) {
+  return (
+    <div style={{
+      padding: '10px', borderRadius: 8, background: 'rgba(155,89,182,0.1)', border: '1px solid rgba(155,89,182,0.3)',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+        <div style={{ width: small ? 6 : 8, height: small ? 6 : 8, borderRadius: '50%', background: '#9B59B6', animation: 'pulse 1s infinite' }} />
+        <span style={{ fontSize: 11, fontWeight: 600, color: '#9B59B6' }}>{title}</span>
+      </div>
+      <div style={{ fontFamily: 'monospace', fontSize: small ? 9 : 10, color: '#888', maxHeight: small ? 80 : 100, overflow: 'auto' }}>
+        {log.slice(-40).map((l, i) => <div key={i}>{l}</div>)}
+      </div>
+    </div>
+  );
+}
+
+/** How a scan this page watched ended. */
+function LastRead({ job, who = null }) {
+  const ok = job.exitCode === 0;
+  const why = !ok && Array.isArray(job.failure) && job.failure.length ? job.failure[job.failure.length - 1] : null;
+  return (
+    <div style={{
+      padding: '8px 10px', borderRadius: 8, marginBottom: 10, fontSize: 11, textAlign: 'center', lineHeight: 1.4,
+      background: ok ? 'rgba(0,255,136,0.08)' : 'rgba(255,80,80,0.08)',
+      border: `1px solid ${ok ? 'rgba(0,255,136,0.25)' : 'rgba(255,80,80,0.25)'}`,
+      color: ok ? '#00ff88' : '#ff8080',
+    }}>
+      {ok
+        ? `${who ? `${who}’s circle` : 'The scan'} finished. What it found is on the map.`
+        : `${who ? `${who}’s scan` : 'The scan'} stopped before the end${why ? `: ${why}` : '.'}`}
     </div>
   );
 }
@@ -1076,8 +1147,8 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
           style={{ cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}
         >
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            {cs.bridge.profile_image_url ? (
-              <img src={cs.bridge.profile_image_url} alt="" style={{
+            {localPhoto(cs.bridge.profile_image_url) ? (
+              <img src={localPhoto(cs.bridge.profile_image_url)} alt="" style={{
                 width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                 border: `1.5px solid ${tierColors[cs.bridge.tier] || '#555'}`,
               }} onError={e => { e.target.style.display = 'none'; }} />
@@ -1120,8 +1191,8 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
         {(cs.sTier.length > 0 || cs.aTier.length > 0) && (
           <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 8 }}>
             {[...cs.sTier, ...cs.aTier].slice(0, 4).map(m => (
-              m.profile_image_url ? (
-                <img key={m.id} src={m.profile_image_url} alt={m.name}
+              localPhoto(m.profile_image_url) ? (
+                <img key={m.id} src={localPhoto(m.profile_image_url)} alt={m.name}
                   style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover',
                     border: `1.5px solid ${tierColors[m.tier] || '#555'}` }}
                   onError={(e) => { e.target.style.display = 'none'; }}
@@ -1171,8 +1242,8 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
               onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
               onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
             >
-              {m.profile_image_url ? (
-                <img src={m.profile_image_url} alt="" style={{
+              {localPhoto(m.profile_image_url) ? (
+                <img src={localPhoto(m.profile_image_url)} alt="" style={{
                   width: 20, height: 20, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                   border: `1px solid ${tierColors[m.tier] || '#555'}`,
                 }} onError={(e) => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }} />
@@ -1180,7 +1251,7 @@ function ClusterCard({ cs, rank, tierColors, onSelect }) {
               <div style={{
                 width: 20, height: 20, borderRadius: '50%', flexShrink: 0, fontSize: 8, fontWeight: 700,
                 background: tierColors[m.tier] || '#555', color: m.tier === 'S' ? '#000' : '#fff',
-                display: m.profile_image_url ? 'none' : 'flex',
+                display: localPhoto(m.profile_image_url) ? 'none' : 'flex',
                 alignItems: 'center', justifyContent: 'center',
               }}>{m.name?.charAt(0)}</div>
               <div style={{ minWidth: 0, flex: 1 }}>
@@ -1277,122 +1348,130 @@ function generateInsights(person, user, allConnections, degree2, routes = []) {
   return insights.slice(0, 5); // Max 5 insights
 }
 
-function AutoBridgeButton({ connections, degree2 }) {
-  const [status, setStatus] = useState('idle');
-  const [log, setLog] = useState([]);
-  const [target, setTarget] = useState(null);
-
-  // Find the top S-tier person without a cluster
-  const bridgedIds = new Set(degree2.map(d => d.source_connection_id).filter(Boolean));
-  const unbridged = (connections || [])
-    .filter(c => (c.tier === 'S' || c.tier === 'A') && !bridgedIds.has(c.id))
-    .sort((a, b) => (parseFloat(b.power_score) || 0) - (parseFloat(a.power_score) || 0));
-
-  if (unbridged.length === 0 && status === 'idle') {
-    return (
-      <div style={{
-        padding: '10px', borderRadius: 8, marginBottom: 16,
-        background: 'rgba(0,255,136,0.06)', border: '1px solid rgba(0,255,136,0.2)',
-        color: '#00ff88', fontSize: 11, fontWeight: 600, textAlign: 'center',
-      }}>
-        All S/A-tier bridges mapped
-      </div>
-    );
-  }
-
-  async function startAutoBridge() {
-    const next = unbridged[0];
-    if (!next) return;
-    setTarget(next);
-    setStatus('checking');
-    setLog([`Scanning ${next.name}'s network...`]);
-
-    const blocked = notReadyMessage(await scraperStatus().catch(() => null));
-    if (blocked) {
-      setStatus('offline');
-      setLog([blocked]);
-      return;
-    }
+// Who to scan next, in the Degrees panel. It replaced "Auto-Bridge Next", which
+// started a scan of the top unmapped S/A connection in one click, by name, with
+// no cost shown, and offered hidden lists again after every run.
+//
+// This lists everyone you reached through a circle whose own circle can be
+// scanned now (lib/reach.js), strongest first, with the circle you found them
+// in and what a scan asks of LinkedIn. Each opens the Scan page with them
+// picked, and nothing starts until it's confirmed there, beside the budget and
+// the cooldown. Hidden lists stay in view, greyed, so nobody seems forgotten.
+// It's also the way to them from a keyboard or a screen reader: the orbs in
+// Bridge Chains aren't.
+function ReadyToScan({ connections, degree2, scanNotes, tierColors }) {
+  const scan = useScanner();
+  const [all, setAll] = useState(false);
+  const reach = useMemo(() => reachIndex(connections, degree2, scanNotes), [connections, degree2, scanNotes]);
+  const ready = useMemo(() => readyToScan(connections, reach), [connections, reach]);
+  const hidden = useMemo(() => connections.filter((c) => reachState(c, reach) === 'hidden'), [connections, reach]);
+  // Everyone else whose circle isn't scanned: the Scan page's batches.
+  const others = useMemo(
+    () => connections.filter((c) => reachState(c, reach) === null && circleState(c, reach) === 'todo').length,
+    [connections, reach],
+  );
+  const byId = useMemo(() => new Map(connections.map((c) => [c.id, c])), [connections]);
+  const cost = circleScanCost();
 
-    setStatus('scraping');
-    try {
-      const final = await runScrape('bridge', { name: next.name, onLog: setLog });
-      setStatus(final.exitCode === 0 ? 'done' : 'error');
-    } catch {
-      setStatus('error');
-    }
-  }
+  const circle = scan.running && isCircleScan(scan);
+  const busy = scan.running && !circle ? busyReason(scan) : null;
+  const last = scan.finished.find(isCircleScan);
+  const shown = all ? ready : ready.slice(0, 5);
+  const origin = (p) => byId.get(p.unlocked_from_bridge_id)?.name || p.unlocked_from_name;
+  const first = (name) => String(name || '').trim().split(/\s+/)[0];
 
   return (
     <div style={{
-      background: 'rgba(155,89,182,0.08)', border: '1px solid rgba(155,89,182,0.2)',
+      background: 'rgba(0,255,136,0.05)', border: '1px solid rgba(0,255,136,0.2)',
       borderRadius: 10, padding: 14, marginBottom: 16,
     }}>
-      {status === 'idle' && (
-        <>
-          <div style={{ fontSize: 11, color: '#9B59B6', fontWeight: 700, marginBottom: 6 }}>
-            {unbridged.length} bridges unmapped
-          </div>
-          <div style={{ fontSize: 11, color: '#aaa', marginBottom: 8 }}>
-            Next: <strong>{unbridged[0]?.name}</strong> ({unbridged[0]?.tier}-tier, {parseFloat(unbridged[0]?.power_score).toFixed(1)})
-          </div>
-          <button onClick={startAutoBridge} style={{
-            width: '100%', padding: '10px', borderRadius: 8, border: 'none', cursor: 'pointer',
-            background: 'linear-gradient(135deg, #9B59B6, #FF6B35)',
-            color: '#fff', fontWeight: 700, fontSize: 13,
-          }}>
-            Auto-Bridge Next
-          </button>
-        </>
-      )}
+      <div style={{ fontSize: 12, fontWeight: 800, color: '#00ff88', marginBottom: 4 }}>
+        Ready to scan ({ready.length})
+      </div>
+      <div style={{ fontSize: 10.5, color: '#999', lineHeight: 1.5, marginBottom: 10 }}>
+        People you added through a circle whose own circle isn&apos;t scanned yet. Scanning one
+        brings in who they know: 3rd degree, through the circle you found them in.
+      </div>
 
-      {status === 'offline' && (
-        <>
-          <div style={{ padding: '8px', borderRadius: 6, background: 'rgba(255,80,80,0.1)', color: '#ff5050', fontSize: 11, marginBottom: 6, textAlign: 'center' }}>
-            Scanner offline
-          </div>
-          <button onClick={() => setStatus('idle')} style={{
-            width: '100%', padding: '8px', borderRadius: 6, border: 'none', cursor: 'pointer',
-            background: 'rgba(255,255,255,0.1)', color: '#aaa', fontSize: 11,
-          }}>Retry</button>
-        </>
+      {circle ? (
+        <div style={{ marginBottom: 10 }}>
+          <ScanLog small title={scan.pending ? 'Starting…' : `Scanning ${scan.target?.name || 'a circle'}…`} log={scan.log} />
+        </div>
+      ) : last && <LastRead job={last} who={last.target?.name} />}
+
+      {ready.length === 0 ? (
+        <div style={{ fontSize: 11, color: '#aaa', lineHeight: 1.5 }}>
+          Nobody yet. When someone you asked from a circle accepts, ↻ <b>Check for new</b> brings
+          them into your connections, and they show here.
+        </div>
+      ) : (
+        <div role="list" style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          {shown.map((p) => {
+            const now = circle && scansCircleOf(scan, p);
+            const from = origin(p);
+            return (
+              <Link key={p.id} role="listitem" href={`/setup?scan=${encodeURIComponent(p.id)}`}
+                aria-label={`Scan ${p.name}’s circle: opens the Scan page to confirm`}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', borderRadius: 8,
+                  textDecoration: 'none', color: '#fff',
+                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(0,255,136,0.18)',
+                }}>
+                <span style={{ width: 8, height: 8, borderRadius: '50%', flexShrink: 0, background: tierColors[p.tier] || '#888', boxShadow: '0 0 0 2px rgba(0,255,136,0.45)' }} />
+                <span style={{ flex: 1, minWidth: 0 }}>
+                  <span style={{ fontSize: 12, fontWeight: 700 }}>{p.name}</span>
+                  <span style={{ fontSize: 10, color: tierColors[p.tier] || '#888', fontWeight: 700, marginLeft: 6 }}>{p.tier}</span>
+                  {from && (
+                    <span style={{ display: 'block', fontSize: 10, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      was in {first(from)}&apos;s circle
+                    </span>
+                  )}
+                </span>
+                <span style={{ fontSize: 10.5, fontWeight: 700, color: '#00ff88', whiteSpace: 'nowrap' }}>
+                  {now ? 'Scanning…' : 'Scan… →'}
+                </span>
+              </Link>
+            );
+          })}
+          {ready.length > 5 && (
+            <button type="button" onClick={() => setAll((v) => !v)} style={{
+              background: 'none', border: 'none', color: '#888', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: '2px 0', textAlign: 'left',
+            }}>
+              {all ? 'Show fewer' : `Show all ${ready.length}`}
+            </button>
+          )}
+        </div>
       )}
 
-      {(status === 'checking' || status === 'scraping') && (
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-            <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#9B59B6', animation: 'pulse 1s infinite' }} />
-            <span style={{ fontSize: 11, fontWeight: 600, color: '#9B59B6' }}>Scanning {target?.name}...</span>
-          </div>
-          <div style={{ fontFamily: 'monospace', fontSize: 9, color: '#777', maxHeight: 80, overflow: 'auto' }}>
-            {log.map((l, i) => <div key={i}>{l}</div>)}
-          </div>
+      {ready.length > 0 && (
+        <div style={{ fontSize: 10, color: '#888', lineHeight: 1.5, marginTop: 8 }}>
+          Each scan: {cost.profileViews} profile view, then one LinkedIn search for every page of their
+          list, up to {cost.searches} pages (about {cost.minutes} min for a whole list). Nothing starts
+          until you confirm it on the Scan page.
         </div>
       )}
 
-      {status === 'done' && (
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ padding: '8px', borderRadius: 6, background: 'rgba(0,255,136,0.1)', color: '#00ff88', fontSize: 11, fontWeight: 600, marginBottom: 6 }}>
-            {target?.name}&rsquo;s bridge mapped! Refresh to see.
-          </div>
-          <button onClick={() => { setStatus('idle'); setTarget(null); setLog([]); }} style={{
-            width: '100%', padding: '8px', borderRadius: 6, border: 'none', cursor: 'pointer',
-            background: 'linear-gradient(135deg, #9B59B6, #FF6B35)',
-            color: '#fff', fontWeight: 600, fontSize: 11,
-          }}>Bridge Next</button>
+      {hidden.length > 0 && (
+        <div style={{ marginTop: 10, fontSize: 10.5, color: '#777', lineHeight: 1.6 }}>
+          {hidden.slice(0, 3).map((p) => (
+            <div key={p.id} style={{ opacity: 0.7 }}>
+              <span aria-hidden="true">🔒</span> {p.name} <span style={{ color: '#666' }}>· their list is hidden</span>
+            </div>
+          ))}
+          {hidden.length > 3 && <div style={{ opacity: 0.7 }}>🔒 and {hidden.length - 3} more with hidden lists</div>}
         </div>
       )}
 
-      {status === 'error' && (
-        <>
-          <div style={{ padding: '8px', borderRadius: 6, background: 'rgba(255,80,80,0.1)', color: '#ff5050', fontSize: 11, marginBottom: 6, textAlign: 'center' }}>
-            Failed — connections may be private
-          </div>
-          <button onClick={() => { setStatus('idle'); setTarget(null); setLog([]); }} style={{
-            width: '100%', padding: '8px', borderRadius: 6, border: 'none', cursor: 'pointer',
-            background: 'rgba(255,255,255,0.1)', color: '#aaa', fontSize: 11,
-          }}>Try Next</button>
-        </>
+      {others > 0 && (
+        <div style={{ fontSize: 10.5, color: '#888', lineHeight: 1.5, marginTop: 10 }}>
+          {others.toLocaleString('en-US')} of your other connections aren&apos;t scanned yet.{' '}
+          <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>Map them in batches on the Scan page →</Link>
+        </div>
+      )}
+      {busy && (
+        <div style={{ fontSize: 10, color: '#bbb', marginTop: 8 }}>
+          {busy}. One scan at a time.
+        </div>
       )}
     </div>
   );