six-degrees 0.2.0

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

@@ -0,0 +1,166 @@
+'use client';
+
+const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIERS = ['S', 'A', 'B', 'C', 'D'];
+
+export default function GridView({ connections, degree2 = [], onSelect, mode }) {
+  const isDegreesMode = mode === 'degrees';
+
+  if (isDegreesMode) {
+    const bridgeMap = {};
+    degree2.forEach(d2 => {
+      if (!d2.source_connection_id) return;
+      if (!bridgeMap[d2.source_connection_id]) bridgeMap[d2.source_connection_id] = [];
+      bridgeMap[d2.source_connection_id].push(d2);
+    });
+
+    const clusters = Object.entries(bridgeMap).map(([bridgeId, members]) => {
+      const bridge = connections.find(c => c.id === bridgeId);
+      if (!bridge) return null;
+      const sCount = members.filter(m => m.tier === 'S').length;
+      const aCount = members.filter(m => m.tier === 'A').length;
+      return { bridge, members, sCount, aCount, total: members.length };
+    }).filter(Boolean).sort((a, b) => (b.sCount * 3 + b.aCount * 2 + b.total) - (a.sCount * 3 + a.aCount * 2 + a.total));
+
+    return (
+      <div style={{ flex: 1, overflow: 'auto', padding: 20, background: '#0a0a1a' }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12, maxWidth: 1200, margin: '0 auto' }}>
+          {clusters.map(cl => (
+            <div key={cl.bridge.id} onClick={() => onSelect && onSelect(cl.bridge)}
+              style={{
+                padding: 16, borderRadius: 12, cursor: 'pointer',
+                background: 'rgba(255,255,255,0.03)',
+                border: `1px solid ${TIER_COLORS[cl.bridge.tier] || '#333'}30`,
+                borderLeft: `4px solid ${TIER_COLORS[cl.bridge.tier] || '#555'}`,
+                transition: 'all 0.15s',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
+                {cl.bridge.profile_image_url ? (
+                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                    width: 40, height: 40, borderRadius: '50%', objectFit: 'cover',
+                    border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
+                  }} onError={e => { e.target.style.display = 'none'; }} />
+                ) : (
+                  <div style={{
+                    width: 40, height: 40, borderRadius: '50%', fontSize: 16, fontWeight: 700,
+                    background: TIER_COLORS[cl.bridge.tier], color: '#000',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  }}>{cl.bridge.name?.charAt(0)}</div>
+                )}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>{cl.bridge.name}</div>
+                  <div style={{ fontSize: 9, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {cl.bridge.headline?.substring(0, 40)}
+                  </div>
+                </div>
+                <span style={{ fontSize: 12, fontWeight: 800, color: TIER_COLORS[cl.bridge.tier] }}>{cl.bridge.tier}</span>
+              </div>
+              <div style={{ display: 'flex', gap: 6, fontSize: 10 }}>
+                {cl.sCount > 0 && <span style={{ color: '#FFD700', fontWeight: 600 }}>{cl.sCount}S</span>}
+                {cl.aCount > 0 && <span style={{ color: '#9B59B6', fontWeight: 600 }}>{cl.aCount}A</span>}
+                <span style={{ color: '#666' }}>{cl.total} total</span>
+              </div>
+              <div style={{ display: 'flex', marginTop: 8 }}>
+                {cl.members.slice(0, 8).map((m, i) => (
+                  <div key={m.id} style={{
+                    width: 22, height: 22, borderRadius: '50%', fontSize: 8, fontWeight: 700,
+                    background: m.profile_image_url ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
+                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    border: '2px solid #0a0a1a', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
+                    overflow: 'hidden',
+                  }}>
+                    {m.profile_image_url ? (
+                      <img src={m.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    ) : m.name?.charAt(0)}
+                  </div>
+                ))}
+                {cl.total > 8 && <span style={{ fontSize: 9, color: '#555', marginLeft: 4, alignSelf: 'center' }}>+{cl.total - 8}</span>}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Network Circle — group by tier, render as sections with grid cards
+  const tierGroups = {};
+  TIERS.forEach(t => { tierGroups[t] = []; });
+  connections.forEach(c => {
+    const t = c.tier || 'D';
+    if (tierGroups[t]) tierGroups[t].push(c);
+  });
+  // Sort each group by power score
+  TIERS.forEach(t => {
+    tierGroups[t].sort((a, b) => (parseFloat(b.power_score) || 0) - (parseFloat(a.power_score) || 0));
+  });
+
+  return (
+    <div style={{ flex: 1, overflow: 'auto', padding: 20, background: '#0a0a1a' }}>
+      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
+        {TIERS.map(tier => {
+          const people = tierGroups[tier];
+          if (people.length === 0) return null;
+          return (
+            <div key={tier} style={{ marginBottom: 24 }}>
+              {/* Tier header */}
+              <div style={{
+                display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0 10px',
+                borderBottom: `2px solid ${TIER_COLORS[tier]}30`, marginBottom: 10,
+              }}>
+                <div style={{
+                  width: 10, height: 10, borderRadius: '50%', background: TIER_COLORS[tier],
+                }} />
+                <span style={{ fontSize: 15, fontWeight: 800, color: TIER_COLORS[tier] }}>{tier}-Tier</span>
+                <span style={{ fontSize: 12, color: '#555' }}>{people.length}</span>
+              </div>
+              {/* Cards grid */}
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 8 }}>
+                {people.map(c => (
+                  <div key={c.id} onClick={() => onSelect && onSelect(c)}
+                    style={{
+                      padding: 10, borderRadius: 8, cursor: 'pointer',
+                      background: 'rgba(255,255,255,0.03)',
+                      border: `1px solid ${TIER_COLORS[tier]}20`,
+                      transition: 'all 0.15s',
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      {c.profile_image_url ? (
+                        <img src={c.profile_image_url} alt="" style={{
+                          width: 32, height: 32, borderRadius: '50%', objectFit: 'cover',
+                          border: `2px solid ${TIER_COLORS[tier]}`,
+                        }} onError={e => { e.target.style.display = 'none'; }} />
+                      ) : (
+                        <div style={{
+                          width: 32, height: 32, borderRadius: '50%', fontSize: 12, fontWeight: 700,
+                          background: TIER_COLORS[tier], color: tier === 'S' ? '#000' : '#fff',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>{c.name?.charAt(0)}</div>
+                      )}
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 11, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
+                        <div style={{ fontSize: 8, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 30)}</div>
+                      </div>
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, alignItems: 'center' }}>
+                      <span style={{ fontSize: 10, fontWeight: 700, color: TIER_COLORS[tier] }}>{parseFloat(c.power_score || 0).toFixed(1)}</span>
+                      <div style={{ flex: 1, marginLeft: 8, height: 3, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
+                        <div style={{ height: '100%', borderRadius: 2, background: TIER_COLORS[tier], width: `${Math.min(100, (parseFloat(c.power_score) || 0) * 10)}%` }} />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,143 @@
+'use client';
+
+// The Scan page's view of what LinkedIn allows: the search budget, the cooldown
+// lock, and everyone whose list was only partly read, with a way back into each.
+// TRAPS §35. The numbers come from /api/scraper (lib/linkedin-limits.js,
+// lib/paused.js), which reads the same files the scanner writes.
+
+import { useState } from 'react';
+
+const LINE = '1px solid rgba(255,255,255,0.1)';
+const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const DAILY = [25, 50, 100, 200, 500];
+const MONTHLY = [100, 250, 500, 1000, 0];
+
+const when = (ms) => new Date(ms).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+const day = (ms) => new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+
+export function CooldownBanner({ cooldown, onLift, disabled }) {
+  const [asking, setAsking] = useState(false);
+  if (!cooldown) return null;
+  return (
+    <div role="status" style={{
+      padding: '12px 14px', borderRadius: 8, fontSize: 13, lineHeight: 1.6,
+      background: 'rgba(255,80,80,0.08)', border: '1px solid rgba(255,80,80,0.35)', color: '#f3c9c9',
+    }}>
+      <b style={{ color: '#ff8080' }}>Scanning is paused until {when(cooldown.until)}.</b>{' '}
+      {cooldown.reason}. Nothing that searches LinkedIn will run until then, so the account can recover.
+      <div style={{ marginTop: 8, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
+        {!asking ? (
+          <button onClick={() => setAsking(true)} disabled={disabled} style={linkBtn}>Lift it early…</button>
+        ) : (
+          <>
+            <span style={{ fontSize: 12.5 }}>Only if people search works normally for you on linkedin.com right now.</span>
+            <button onClick={() => { setAsking(false); onLift(); }} style={{ ...linkBtn, color: '#ff8080' }}>Yes, lift it</button>
+            <button onClick={() => setAsking(false)} style={linkBtn}>Keep it</button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const pct = (used, cap) => (cap ? Math.min(100, Math.round((used / cap) * 100)) : 0);
+
+function Bar({ used, cap }) {
+  const p = pct(used, cap);
+  return (
+    <div style={{ height: 5, borderRadius: 3, background: 'rgba(255,255,255,0.07)', overflow: 'hidden', marginTop: 4 }}>
+      <div style={{ height: '100%', width: `${p}%`, background: p >= 100 ? '#ff6b6b' : p >= 75 ? '#FFD700' : '#3498DB' }} />
+    </div>
+  );
+}
+
+export function BudgetBox({ li, onSetLimits, disabled }) {
+  if (!li) return null;
+  const { limits } = li;
+  const today = li.unreadable ? '?' : li.searchesToday;
+  return (
+    <div style={{ padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#b8c4c4' }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 14 }}>
+        <div>
+          <div><b style={{ color: '#fff' }}>{today}</b> of {limits.daily || 'no limit'} searches in the last 24 hours</div>
+          <Bar used={li.searchesToday || 0} cap={limits.daily} />
+        </div>
+        <div>
+          <div><b style={{ color: '#fff' }}>{li.searchesMonth}</b> of {limits.monthly || 'no limit'} this month · resets {day(li.monthResets)}</div>
+          <Bar used={li.searchesMonth} cap={limits.monthly} />
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginTop: 10 }}>
+        <span>Budget:</span>
+        <select value={limits.daily} disabled={disabled} onChange={(e) => onSetLimits({ daily: Number(e.target.value), monthly: limits.monthly })} style={sel}>
+          {DAILY.map((n) => <option key={n} value={n}>{n} a day</option>)}
+        </select>
+        <select value={limits.monthly} disabled={disabled} onChange={(e) => onSetLimits({ daily: limits.daily, monthly: Number(e.target.value) })} style={sel}>
+          {MONTHLY.map((n) => <option key={n} value={n}>{n ? `${n} a month` : 'no monthly cap (Premium)'}</option>)}
+        </select>
+        <span style={{ color: '#778' }}>{li.profilesToday} profile views today</span>
+      </div>
+      <div style={{ marginTop: 8, color: '#778', lineHeight: 1.6 }}>
+        Every page of someone&rsquo;s connections is one search. LinkedIn limits a free account&rsquo;s people
+        searches by the month (it doesn&rsquo;t say how many; reports put it around 250–350), resetting on the 1st.
+        When a budget is used, a scan saves what it read and stops; the next one carries on from the same page.
+        {limits.daily > 100 && <b style={{ color: '#FFD700' }}> {limits.daily} a day can use up a free account&rsquo;s month in a day or two.</b>}
+      </div>
+    </div>
+  );
+}
+
+export function PausedList({ paused = [], onResume, onResumeAll, disabled }) {
+  const [showAll, setShowAll] = useState(false);
+  if (!paused.length) return null;
+  const legacy = paused.filter((p) => p.legacy).length;
+  const shown = showAll ? paused : paused.slice(0, 8);
+  return (
+    <div style={{ borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderBottom: LINE, flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: 200 }}>
+          <b style={{ fontSize: 13.5 }}>Paused — {paused.length} {paused.length === 1 ? 'list' : 'lists'} with more to read</b>
+          <div style={{ fontSize: 12, color: '#8b9a9a', marginTop: 2 }}>
+            Each carries on from the page it stopped at{legacy ? `; ${legacy} were read to page 10 before whole lists were read` : ''}.
+          </div>
+        </div>
+        <button onClick={onResumeAll} disabled={disabled} style={{ ...btn, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', background: disabled ? 'rgba(255,255,255,0.06)' : 'linear-gradient(135deg, #3498DB, #9B59B6)' }}>
+          Resume all
+        </button>
+      </div>
+      <div>
+        {shown.map((p) => (
+          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[p.tier] || '#667', flexShrink: 0 }} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
+              <div style={{ fontSize: 11.5, color: '#8b9a9a' }}>
+                Read to page {p.pagesRead} · carries on at {p.nextPage}
+                {p.at ? ` · ${day(p.at)}` : ''}
+                {p.unclear >= 2 ? ' · came back unclear twice, so it waits at the back of Resume all' : ''}
+              </div>
+            </div>
+            <button onClick={() => onResume(p)} disabled={disabled} style={{ ...btn, padding: '6px 12px', fontSize: 12, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer' }}>
+              Resume
+            </button>
+          </div>
+        ))}
+      </div>
+      {paused.length > 8 && (
+        <button onClick={() => setShowAll(!showAll)} style={{ ...linkBtn, padding: '10px 14px' }}>
+          {showAll ? 'Show fewer' : `Show all ${paused.length}`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+const btn = {
+  padding: '8px 14px', borderRadius: 7, fontSize: 13, fontWeight: 700, cursor: 'pointer',
+  border: LINE, background: 'rgba(255,255,255,0.08)', color: '#fff',
+};
+const linkBtn = { background: 'none', border: 'none', color: '#8fb8d6', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, padding: 0 };
+const sel = {
+  padding: '6px 8px', borderRadius: 6, fontSize: 12.5, fontWeight: 600,
+  background: 'rgba(255,255,255,0.08)', color: '#fff', border: LINE,
+};

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

@@ -0,0 +1,148 @@
+'use client';
+
+const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+
+export default function ListView({ connections, degree2 = [], onSelect, mode }) {
+  const isDegreesMode = mode === 'degrees';
+
+  if (isDegreesMode) {
+    // Bridge clusters ranked list
+    const bridgeMap = {};
+    degree2.forEach(d2 => {
+      if (!d2.source_connection_id) return;
+      if (!bridgeMap[d2.source_connection_id]) bridgeMap[d2.source_connection_id] = [];
+      bridgeMap[d2.source_connection_id].push(d2);
+    });
+
+    const clusters = Object.entries(bridgeMap).map(([bridgeId, members]) => {
+      const bridge = connections.find(c => c.id === bridgeId);
+      if (!bridge) return null;
+      const sCount = members.filter(m => m.tier === 'S').length;
+      const aCount = members.filter(m => m.tier === 'A').length;
+      const value = sCount * 3 + aCount * 2 + members.length;
+      return { bridge, members, sCount, aCount, total: members.length, value };
+    }).filter(Boolean).sort((a, b) => b.value - a.value);
+
+    return (
+      <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: '#0a0a1a' }}>
+        <div style={{ maxWidth: 800, margin: '0 auto' }}>
+          {/* Table header */}
+          <div style={{
+            display: 'grid', gridTemplateColumns: '40px 1fr 50px 50px 50px 80px',
+            gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: '#555',
+            borderBottom: '1px solid rgba(255,255,255,0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
+          }}>
+            <span>#</span><span>Bridge</span><span>S</span><span>A</span><span>Total</span><span>Value</span>
+          </div>
+          {clusters.map((cl, i) => (
+            <div key={cl.bridge.id} onClick={() => onSelect && onSelect(cl.bridge)}
+              style={{
+                display: 'grid', gridTemplateColumns: '40px 1fr 50px 50px 50px 80px',
+                gap: 8, padding: '10px 12px', alignItems: 'center', cursor: 'pointer',
+                borderBottom: '1px solid rgba(255,255,255,0.04)',
+                transition: 'background 0.1s',
+              }}
+              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+            >
+              <span style={{ fontSize: 12, fontWeight: 700, color: '#444' }}>{i + 1}</span>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                {cl.bridge.profile_image_url ? (
+                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                    width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
+                    border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
+                  }} onError={e => { e.target.style.display = 'none'; }} />
+                ) : (
+                  <div style={{
+                    width: 28, height: 28, borderRadius: '50%', flexShrink: 0, fontSize: 10, fontWeight: 700,
+                    background: TIER_COLORS[cl.bridge.tier], color: '#000',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  }}>{cl.bridge.name?.charAt(0)}</div>
+                )}
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {cl.bridge.name}
+                  </div>
+                  <div style={{ fontSize: 9, color: TIER_COLORS[cl.bridge.tier], fontWeight: 600 }}>{cl.bridge.tier}-Tier</div>
+                </div>
+              </div>
+              <span style={{ fontSize: 13, fontWeight: 800, color: '#FFD700' }}>{cl.sCount}</span>
+              <span style={{ fontSize: 13, fontWeight: 700, color: '#9B59B6' }}>{cl.aCount}</span>
+              <span style={{ fontSize: 12, color: '#888' }}>{cl.total}</span>
+              <div>
+                <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
+                  <div style={{
+                    height: '100%', borderRadius: 3,
+                    background: `linear-gradient(90deg, ${TIER_COLORS[cl.bridge.tier]}, #FF6B35)`,
+                    width: `${Math.min(100, (cl.value / Math.max(clusters[0]?.value || 1, 1)) * 100)}%`,
+                  }} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Network Circle — ranked power list
+  const sorted = [...connections].sort((a, b) => (parseFloat(b.power_score) || 0) - (parseFloat(a.power_score) || 0));
+  const maxScore = parseFloat(sorted[0]?.power_score) || 10;
+
+  return (
+    <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: '#0a0a1a' }}>
+      <div style={{ maxWidth: 800, margin: '0 auto' }}>
+        {/* Table header */}
+        <div style={{
+          display: 'grid', gridTemplateColumns: '40px 36px 1fr 60px 120px',
+          gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: '#555',
+          borderBottom: '1px solid rgba(255,255,255,0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
+        }}>
+          <span>#</span><span></span><span>Name</span><span>Score</span><span>Power</span>
+        </div>
+        {sorted.map((c, i) => (
+          <div key={c.id} onClick={() => onSelect && onSelect(c)}
+            style={{
+              display: 'grid', gridTemplateColumns: '40px 36px 1fr 60px 120px',
+              gap: 8, padding: '8px 12px', alignItems: 'center', cursor: 'pointer',
+              borderBottom: '1px solid rgba(255,255,255,0.04)',
+              background: i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent',
+              transition: 'background 0.1s',
+            }}
+            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
+            onMouseLeave={e => e.currentTarget.style.background = i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent'}
+          >
+            <span style={{ fontSize: 12, fontWeight: 700, color: i < 3 ? TIER_COLORS[c.tier] : '#444' }}>{i + 1}</span>
+            {c.profile_image_url ? (
+              <img src={c.profile_image_url} alt="" style={{
+                width: 28, height: 28, borderRadius: '50%', objectFit: 'cover',
+                border: `2px solid ${TIER_COLORS[c.tier]}`,
+              }} onError={e => { e.target.style.display = 'none'; }} />
+            ) : (
+              <div style={{
+                width: 28, height: 28, borderRadius: '50%', fontSize: 10, fontWeight: 700,
+                background: TIER_COLORS[c.tier], color: c.tier === 'S' ? '#000' : '#fff',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}>{c.name?.charAt(0)}</div>
+            )}
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
+              <div style={{ fontSize: 9, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 45)}</div>
+            </div>
+            <div style={{ textAlign: 'center' }}>
+              <span style={{ fontSize: 13, fontWeight: 800, color: TIER_COLORS[c.tier] }}>{parseFloat(c.power_score || 0).toFixed(1)}</span>
+              <div style={{ fontSize: 8, color: '#555' }}>{c.tier}</div>
+            </div>
+            <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
+              <div style={{
+                height: '100%', borderRadius: 3,
+                background: TIER_COLORS[c.tier],
+                width: `${(parseFloat(c.power_score || 0) / maxScore) * 100}%`,
+              }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { TIER_COLORS_CLASSIC as TIER_COLORS } from '../../lib/tiers';
+
+// How much of your 1st degree has had its circle opened.
+//
+// Three states, not two — and the distinction is the whole point. "Hidden"
+// means that person keeps their connections private, so it will never move.
+// Counting them as incomplete would mean the bar can never reach the end and
+// would push someone to keep scraping at a network that has nothing left to
+// give. A network whose every reachable circle is open reads as done here.
+
+const BATCH = 25;
+
+const BAR = { height: 10, borderRadius: 6 };
+const CARD = {
+  background: 'rgba(52,152,219,0.06)', borderRadius: 12, padding: 20, marginBottom: 24,
+  border: '1px solid rgba(52,152,219,0.2)',
+};
+
+export function computeMapping(degree1 = [], degree2 = [], skips = []) {
+  const mappedIds = new Set(degree2.map((c) => c.source_connection_id).filter(Boolean));
+  const hiddenUrls = new Set(skips.map((s) => s.profileUrl).filter(Boolean));
+
+  const state = (c) => {
+    if (mappedIds.has(c.id)) return 'mapped';
+    if (c.profile_url && hiddenUrls.has(c.profile_url)) return 'hidden';
+    return 'todo';
+  };
+
+  const counts = { mapped: 0, hidden: 0, todo: 0 };
+  const byTier = {};
+  for (const c of degree1) {
+    const s = state(c);
+    counts[s] += 1;
+    const t = c.tier || 'D';
+    byTier[t] = byTier[t] || { mapped: 0, hidden: 0, todo: 0, total: 0 };
+    byTier[t][s] += 1;
+    byTier[t].total += 1;
+  }
+
+  const total = degree1.length;
+  // Hidden is not failure, so it counts as resolved. Otherwise the bar can
+  // never fill on any real network.
+  const resolved = counts.mapped + counts.hidden;
+  return {
+    ...counts,
+    total,
+    resolved,
+    percent: total ? Math.round((resolved / total) * 100) : 0,
+    batches: Math.ceil(counts.todo / BATCH),
+    byTier,
+  };
+}
+
+export default function MappingProgress({ degree1 = [], degree2 = [], skips = [] }) {
+  const m = computeMapping(degree1, degree2, skips);
+  if (!m.total) return null;
+
+  const pct = (n) => (m.total ? (n / m.total) * 100 : 0);
+  const done = m.todo === 0;
+
+  return (
+    <div style={CARD}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
+        <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: '#3498DB' }}>
+          2nd-degree mapping
+        </h3>
+        <span style={{ fontSize: 12, color: done ? '#00ff88' : '#8b9a9a', fontWeight: 600 }}>
+          {done ? 'Everything reachable is mapped' : `${m.percent}%`}
+        </span>
+      </div>
+
+      <div style={{ ...BAR, display: 'flex', overflow: 'hidden', background: 'rgba(255,255,255,0.06)' }}>
+        <div style={{ width: `${pct(m.mapped)}%`, background: '#00ff88' }} />
+        <div style={{ width: `${pct(m.hidden)}%`, background: 'rgba(255,255,255,0.22)' }} />
+      </div>
+
+      <div style={{ display: 'flex', gap: 16, marginTop: 10, fontSize: 12, flexWrap: 'wrap' }}>
+        <Key color="#00ff88" label="mapped" value={m.mapped} />
+        <Key color="rgba(255,255,255,0.35)" label="hidden" value={m.hidden} />
+        <Key color="rgba(255,255,255,0.12)" label="to go" value={m.todo} />
+        <span style={{ color: '#667', marginLeft: 'auto' }}>of {m.total}</span>
+      </div>
+
+      {m.hidden > 0 && (
+        <p style={{ fontSize: 11.5, color: '#667', margin: '10px 0 0', lineHeight: 1.6 }}>
+          Hidden means they keep their connections private — that will not change, and it
+          does not count against you.
+        </p>
+      )}
+
+      {!done && (
+        <p style={{ fontSize: 11.5, color: '#8b9a9a', margin: '10px 0 0', lineHeight: 1.6 }}>
+          {m.todo} left — about <b>{m.batches} {m.batches === 1 ? 'batch' : 'batches'}</b> of {BATCH}.
+          Run one, leave it a while, run another. Long unbroken runs are what gets an
+          account restricted.
+        </p>
+      )}
+
+      <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 7 }}>
+        {['S', 'A', 'B', 'C', 'D']
+          .filter((t) => m.byTier[t]?.total)
+          .map((t) => {
+            const row = m.byTier[t];
+            return (
+              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11 }}>
+                <span style={{ width: 14, color: TIER_COLORS[t], fontWeight: 700 }}>{t}</span>
+                <div style={{
+                  flex: 1, height: 5, borderRadius: 3, display: 'flex',
+                  overflow: 'hidden', background: 'rgba(255,255,255,0.06)',
+                }}>
+                  <div style={{ width: `${(row.mapped / row.total) * 100}%`, background: TIER_COLORS[t] }} />
+                  <div style={{ width: `${(row.hidden / row.total) * 100}%`, background: 'rgba(255,255,255,0.22)' }} />
+                </div>
+                <span style={{ color: '#667', width: 62, textAlign: 'right' }}>
+                  {row.mapped}/{row.total}
+                </span>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+function Key({ color, label, value }) {
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8b9a9a' }}>
+      <span style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
+      <b style={{ color: '#e2e8f0' }}>{value}</b> {label}
+    </span>
+  );
+}

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { useUser } from './UserProvider';
+
+// Holds a page back until we know whose network to show.
+//
+// This used to be a "what's your name?" form. On a one-person app that question
+// only ever produced duplicate profiles — see lib/profile.js — so the profile is
+// now resolved by the server and there is nothing to ask. First-run choices
+// (scan, CSV, sample) live on the welcome screen: app/components/EmptyState.js.
+export default function OnboardingGate({ children }) {
+  const { userId, ready } = useUser();
+
+  if (ready && userId) return children;
+
+  return (
+    <div style={{
+      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
+      background: '#0a0a1a', color: '#fff', padding: 24, textAlign: 'center',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    }}>
+      {!ready ? (
+        <div style={{ fontSize: 18, fontWeight: 600 }}>Loading…</div>
+      ) : (
+        <div style={{ maxWidth: 420 }}>
+          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>
+            Can’t reach 6 Degrees’ local server
+          </div>
+          <div style={{ color: '#888', fontSize: 14, lineHeight: 1.6 }}>
+            The page loaded but the app behind it is not answering. If you started it
+            from a terminal, check that window for an error, then reload this page.
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}