six-degrees 0.4.2 → 0.4.4

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

@@ -0,0 +1,96 @@
+'use client';
+
+// The scan status bar: while a scan runs, every page shows what it's doing,
+// for whom, how far it's got, and today's LinkedIn budget, with Stop. Stop
+// saves what was read, and the Scan page's Resume carries on from that page.
+// It sits just under the header's tabs (Network Circle, Degrees…), on every
+// page, the Scan page too (Blake, 2026-09-29). It only reports: the
+// pacing and the caps live in the scanner (scripts/scrape.py, lib/linkedin-limits.js).
+
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import Link from 'next/link';
+import { watchScanner, scannerNow, stopScrape } from '../../lib/scraper-client';
+import { watchAllDay, allDayNow } from '../../lib/experimental-client';
+
+const WHAT = {
+  full: 'Scanning your network',
+  refresh: 'Checking for new connections',
+  bridge: 'Scanning a circle',
+  resume: 'Carrying on with a circle',
+  'resume-all': 'Carrying on with circles',
+  'auto-bridge': 'Auto-Bridge',
+  'auto-bridge-retry': 'Auto-Bridge',
+  rescrape: 'Re-scanning a circle',
+  login: 'Signing in to LinkedIn',
+  setup: 'Setting up the scanner',
+  company: 'Scanning a company',
+  photos: 'Saving photos',
+  messages: 'Reading your messages list',
+};
+
+// Green while there's plenty left, amber past 60%, red past 90%.
+const tone = (used, cap) => (!cap ? '#8b9a9a' : used / cap >= 0.9 ? '#ff6b6b' : used / cap >= 0.6 ? '#FFD700' : '#00ff88');
+
+export default function ScanStatusBar() {
+  const [job, setJob] = useState(() => scannerNow());
+  const [stopping, setStopping] = useState(false);
+  // The Scan page's experimental all-day Auto-Bridge switch: with it on, the bar
+  // stays under the tabs even while nothing runs, so you can see the mode is on.
+  const allDay = useSyncExternalStore(watchAllDay, allDayNow, () => false);
+  useEffect(() => watchScanner(() => {
+    const now = scannerNow();
+    setJob(now);
+    if (!now.running) setStopping(false);
+  }), []);
+  const place = {
+    position: 'fixed', left: '50%', top: 'var(--scan-bar-top, 94px)', transform: 'translateX(-50%)', zIndex: 60,
+    maxWidth: 'calc(100vw - 32px)', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'nowrap', whiteSpace: 'nowrap',
+    padding: '8px 12px', borderRadius: 12, fontSize: 12, color: '#cfd8d8', background: 'rgba(14,16,32,0.94)',
+  };
+  if (!job?.running) {
+    if (!allDay) return null;
+    return (
+      <div role="status" style={{ ...place, opacity: 0.55, border: '1px solid rgba(255,255,255,0.1)' }}>
+        <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#556', flexShrink: 0 }} />
+        <b style={{ color: '#b8c4c4' }}>Auto scan</b>
+        <span style={{ color: '#8b9a9a' }}>ready · press Auto scan beside Scan to start</span>
+      </div>
+    );
+  }
+
+  const p = job.progress;
+  const step = p?.kind === 'batch' && p.total ? `${p.current || p.done || 0} of ${p.total}`
+    : p?.kind === 'walk' && p.total ? `${(p.done || 0).toLocaleString()} of ${p.total.toLocaleString()} read`
+    : p?.kind === 'saving' ? 'saving' : null;
+  const b = job.budget;
+  const last = [...(job.log || [])].reverse().find((l) => l && l.trim())?.trim();
+
+  return (
+    <div role="status" aria-live="polite" style={{ ...place, border: '1px solid rgba(0,255,136,0.25)' }}>
+      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#00ff88', flexShrink: 0 }} />
+      <b style={{ color: '#fff' }}>{WHAT[job.action] || 'Scanning'}</b>
+      {job.target?.name && <span>{job.target.name}</span>}
+      {step && <span style={{ color: '#8b9a9a' }}>{step}</span>}
+      {b && (
+        <span style={{ color: tone(b.searches, b.cap) }} title="Searches on your LinkedIn account in the last 24 hours, and your daily budget">
+          {b.searches}{b.cap ? ` of ${b.cap}` : ''} searches today
+        </span>
+      )}
+      {last && (
+        <span style={{ color: '#667', flex: '0 1 240px', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={last}>
+          {last}
+        </span>
+      )}
+      <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>Details</Link>
+      <button
+        onClick={async () => { setStopping(true); try { await stopScrape(); } catch { setStopping(false); } }}
+        disabled={stopping}
+        title="Stops after saving what's been read; Resume on the Scan page carries on from the same page"
+        style={{
+          padding: '4px 10px', borderRadius: 8, fontSize: 12, cursor: stopping ? 'default' : 'pointer',
+          background: 'rgba(255,107,107,0.12)', color: '#ff9b9b', border: '1px solid rgba(255,107,107,0.35)',
+        }}
+      >{stopping ? 'Stopping…' : 'Stop'}</button>
+    </div>
+  );
+}

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

@@ -66,7 +66,7 @@ function subline(person) {
   return person.headline || person.role || person.company || '';
 }
 
-export default function SeparationView({ connections = [], degree2 = [], fullDegree1 = connections, fullDegree2 = degree2, onSelect, userName, selectedId, tierColors = CLASSIC }) {
+export default function SeparationView({ connections = [], degree2 = [], fullDegree1 = connections, fullDegree2 = degree2, onSelect, userName, selectedId, tierColors = CLASSIC, preset = null }) {
   const isMobile = useIsMobile();
   const ROW_H = isMobile ? 68 : 56;
   const K = isMobile ? 5 : 10;
@@ -78,6 +78,14 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
   const [tier, setTier] = useState('all');
   // Rarity beside the tier (lib/rarity.js): any bands switched on; none is everyone.
   const [rarities, setRarities] = useState(() => new Set());
+  // Filters a card's Insights asked for ("Show them", "S only"): applied once each.
+  const [presetFor, setPresetFor] = useState(null);
+  if (preset && preset.id !== presetFor) {
+    setPresetFor(preset.id);
+    setQuery(preset.query || '');
+    setTier(preset.tier || 'all');
+    setRarities(new Set(preset.rarity ? [preset.rarity] : []));
+  }
   const requests = useRequests();
   const [scrollY, setScrollY] = useState(0);
   const [box, setBox] = useState({ w: 0, h: 800 });

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

@@ -12,10 +12,11 @@ import { routeIndex, routesFor } from '../../lib/separation';
 import { topCompanies } from '../../lib/scoring';
 import { reachIndex, reachState, circleState, readyToScan, circleScanCost } from '../../lib/reach';
 import { exclusiveReach, bridgeOverlap } from '../../lib/brokerage';
+import { profileInsights } from '../../lib/insights';
 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, scanNotes, csvSource = null }) {
+export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending, scanNotes, csvSource = null, onOpenCircle, onShowInSeparation }) {
   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
@@ -43,6 +44,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
   // Who only each connection reaches (lib/brokerage.js), for their card.
   const exclusive = useMemo(() => exclusiveReach(degree2, connections), [degree2, connections]);
   const overlap = useMemo(() => bridgeOverlap(degree2, connections), [degree2, connections]);
+  const insightReach = useMemo(() => reachIndex(connections, degree2, scanNotes), [connections, degree2, scanNotes]);
+  // The Insights panel on a connection's card: open or closed, kept as you move between cards.
+  const [showInsights, setShowInsights] = useState(false);
   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).
@@ -143,33 +147,91 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           />
         )}
 
-        {selected.degree !== 2 && (exclusive.get(selected.id)?.only > 0 || (overlap.get(selected.id)?.share >= 0.15 && overlap.get(selected.id)?.shared >= 3)) && (() => {
-          const ex = exclusive.get(selected.id);
-          const ov = overlap.get(selected.id);
-          // A twin only when it's real: at least 15% of either's people, and 3 of them.
-          const twin = ov && ov.share >= 0.15 && ov.shared >= 3 && connections.find((c) => c.id === ov.with);
+        {selected.degree !== 2 && (() => {
+          const i = profileInsights(selected, { degree2, exclusive, overlap, reach: insightReach });
+          if (!i) return null;
           const first = selected.name?.split(' ')[0] || 'them';
+          const twin = i.twin && connections.find((c) => c.id === i.twin.id);
+          const row = { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10, padding: '7px 0', borderTop: '1px solid rgba(255,255,255,0.05)' };
+          const label = { fontSize: 10.5, color: '#8b9a9a', minWidth: 92 };
+          const act = { background: 'none', border: 'none', padding: 0, color: '#3498DB', cursor: 'pointer', fontSize: 11.5, whiteSpace: 'nowrap' };
+          const scanned = i.bars == null ? 'Not scanned yet' : i.bars === 5 ? 'Their whole list' : `About ${i.bars * 20}% of their list`;
           return (
-            <div style={{
-              background: 'rgba(0,255,136,0.05)', border: '1px solid rgba(0,255,136,0.2)',
-              borderRadius: 8, padding: 12, marginBottom: 16,
-            }}>
-              <div style={{ fontSize: 10, color: '#00ff88', fontWeight: 700, marginBottom: 4, letterSpacing: 1 }}>
-                {ex?.only > 0 ? `ONLY THROUGH ${first.toUpperCase()}` : `${first.toUpperCase()}’S CIRCLE`}
-              </div>
-              {ex?.only > 0 && (
-                <div style={{ fontSize: 12, color: '#ccc', lineHeight: 1.5 }}>
-                  <strong style={{ color: '#00ff88' }}>{ex.only.toLocaleString()}</strong> of the {ex.total.toLocaleString()} people in {first}&rsquo;s
-                  circle are reached by none of your other connections. {first} is your only way to them.
-                </div>
-              )}
-              {twin && (
-                <div style={{ fontSize: 12, color: '#aab', lineHeight: 1.5, marginTop: ex?.only > 0 ? 6 : 0 }}>
-                  Opens the same doors as{' '}
-                  <button onClick={() => onSelect?.(twin)} style={{ background: 'none', border: 'none', padding: 0, color: '#fff', fontWeight: 700, cursor: 'pointer', fontSize: 12 }}>
-                    {twin.name}
-                  </button>
-                  : {Math.round(ov.share * 100)}% of the people either reaches, both do ({ov.shared.toLocaleString()}).
+            <div style={{ border: '1px solid rgba(52,152,219,0.25)', borderRadius: 8, marginBottom: 16, background: 'rgba(52,152,219,0.04)' }}>
+              <button onClick={() => setShowInsights((v) => !v)} aria-expanded={showInsights}
+                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 12px', background: 'none', border: 'none', cursor: 'pointer', color: '#cfe6f7' }}>
+                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1 }}>INSIGHTS</span>
+                <span style={{ fontSize: 11, color: '#8b9a9a' }}>
+                  {!showInsights && i.circle > 0 && `${i.circle.toLocaleString()} in their circle${i.only ? ` · ${i.only.toLocaleString()} only through ${first}` : ''} `}
+                  {showInsights ? '▲' : '▼'}
+                </span>
+              </button>
+              {showInsights && (
+                <div style={{ padding: '0 12px 8px', fontSize: 12, color: '#ccc' }}>
+                  <div style={row}>
+                    <span style={label}>Their circle</span>
+                    <span style={{ flex: 1 }}>{i.circle ? `${i.circle.toLocaleString()} people` : 'None scanned yet'}</span>
+                    {i.circle > 0 && onOpenCircle && <button style={act} onClick={() => onOpenCircle(selected.id)}>Explore →</button>}
+                  </div>
+                  <div style={row}>
+                    <span style={label}>Only through {first}</span>
+                    <span style={{ flex: 1 }}>
+                      {i.circle ? <><b style={{ color: '#00ff88' }}>{i.only.toLocaleString()}</b> ({Math.round(i.onlyShare * 100)}%): none of your other connections reach them</> : '—'}
+                    </span>
+                    {i.only > 0 && onShowInSeparation && (
+                      <button style={act} onClick={() => onShowInSeparation({ query: selected.name, rarity: 'only' })}>Show them →</button>
+                    )}
+                  </div>
+                  <div style={row}>
+                    <span style={label}>Closest overlap</span>
+                    <span style={{ flex: 1 }}>
+                      {twin ? <>Opens the same doors as <b style={{ color: '#fff' }}>{twin.name}</b> ({Math.round(i.twin.share * 100)}%, {i.twin.shared.toLocaleString()} people)</> : 'No one opens the same doors'}
+                    </span>
+                    {twin && <button style={act} onClick={() => onSelect?.(twin)}>Open →</button>}
+                  </div>
+                  <div style={row}>
+                    <span style={label}>Tier mix</span>
+                    <span style={{ flex: 1, display: 'flex', height: 8, borderRadius: 4, overflow: 'hidden', background: 'rgba(255,255,255,0.05)', alignSelf: 'center' }}>
+                      {i.circle > 0 && ['S', 'A', 'B', 'C', 'D'].map((t) => i.mix[t] > 0 && (
+                        <span key={t} title={`${t}: ${i.mix[t]}`} style={{ width: `${(100 * i.mix[t]) / i.circle}%`, background: tierColors[t] }} />
+                      ))}
+                    </span>
+                    <span style={{ fontSize: 10.5, color: '#8b9a9a' }}>{i.circle ? `${i.mix.S} S · ${i.mix.A} A` : ''}</span>
+                    {i.mix.S > 0 && onShowInSeparation && (
+                      <button style={act} onClick={() => onShowInSeparation({ query: selected.name, tier: 'S' })}>S only →</button>
+                    )}
+                  </div>
+                  {i.companies.length > 0 && (
+                    <div style={row}>
+                      <span style={label}>Where they work</span>
+                      <span style={{ flex: 1 }}>{i.companies.map((c) => `${c.count} at ${c.name}`).join(' · ')}</span>
+                    </div>
+                  )}
+                  <div style={row}>
+                    <span style={label}>Scanned</span>
+                    <span style={{ flex: 1 }}>{scanned}</span>
+                    {i.bars !== 5 && canScan && (
+                      <a href={`/setup?scan=${encodeURIComponent(selected.id)}`} style={act}>{i.bars == null ? 'Scan →' : 'Finish →'}</a>
+                    )}
+                  </div>
+                  {(() => {
+                    const since = selected.connected_date ? new Date(selected.connected_date) : null;
+                    const asked = (bridgeMap[selected.id] || []).filter((p) => hasRequest(p, requests)).length;
+                    if (!(since && !Number.isNaN(since.getTime())) && !asked) return null;
+                    return (
+                      <div style={row}>
+                        <span style={label}>You and {first}</span>
+                        <span style={{ flex: 1 }}>
+                          {since && !Number.isNaN(since.getTime()) ? `Connected ${since.toLocaleDateString(undefined, { month: 'short', year: 'numeric' })}` : ''}
+                          {asked ? `${since ? ' · ' : ''}${asked} request${asked === 1 ? '' : 's'} out through them` : ''}
+                        </span>
+                      </div>
+                    );
+                  })()}
+                  <div style={row}>
+                    <span style={label}>Rank</span>
+                    <span style={{ flex: 1 }}>{i.rank ? `#${i.rank} of ${i.of} by who only they reach` : 'Ranked once their circle is scanned'}</span>
+                  </div>
                 </div>
               )}
             </div>

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

@@ -0,0 +1,34 @@
+'use client';
+
+// The Social tab's "once a day" live messages sync (experimental): once per
+// app session, if it's switched on, the last sync is over a day old, it's
+// daytime and the scanner is free, read the messages list (scripts/scrape.py
+// --messages). Nothing else starts it.
+
+import { useEffect } from 'react';
+import { watchScanner, scannerNow, beginScrape } from '../../lib/scraper-client';
+import { IS_DEMO } from '../../lib/demo';
+
+let tried = false;
+
+export default function SocialAutoSync() {
+  useEffect(() => {
+    if (IS_DEMO || tried) return undefined;
+    let stop = () => {};
+    fetch('/api/social').then((r) => r.json()).then(({ social }) => {
+      if (!social?.autoSync || tried) return;
+      const last = social.liveAt ? Date.parse(social.liveAt) : 0;
+      const hour = new Date().getHours();
+      if (Date.now() - last < 24 * 3600 * 1000 || hour < 9 || hour >= 19) return;
+      stop = watchScanner(() => {
+        const now = scannerNow();
+        if (!now.known || tried) return;
+        tried = true;
+        stop();
+        if (!now.running) beginScrape('messages').catch(() => {});
+      });
+    }).catch(() => {});
+    return () => stop();
+  }, []);
+  return null;
+}

package/.next/standalone/app/components/settings/NetworkHealthSection.js

@@ -0,0 +1,85 @@
+'use client';
+
+// Network health on the Scores tab (lib/network-health.js): how much of your
+// 2nd degree you reach two or more ways, the effective size of your own
+// network from the ties scans have kept, and your top five connections by who
+// only they reach. Only your own numbers, never a percentile against others.
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { useUser } from '../UserProvider';
+import { loadNetwork } from '../../../lib/network';
+import { networkHealth } from '../../../lib/network-health';
+import { Body, LINE } from '../ui';
+
+const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const pct = (x) => `${Math.round(x * 100)}%`;
+
+export default function NetworkHealthSection() {
+  const { userId } = useUser();
+  const [health, setHealth] = useState(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    if (!userId) return undefined;
+    let live = true;
+    loadNetwork(userId)
+      .then((net) => { if (live) setHealth(networkHealth(net)); })
+      .catch(() => { if (live) setFailed(true); });
+    return () => { live = false; };
+  }, [userId]);
+
+  const box = { padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)' };
+  return (
+    <section id="health" style={{ marginTop: 20 }}>
+      <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Network health</h2>
+      {failed && <Body>Couldn&rsquo;t read your network just now.</Body>}
+      {!failed && !health && <Body>Reading your network…</Body>}
+      {health && health.circles === 0 && (
+        <Body>Scan a few of your connections&rsquo; circles (the Scan page, step 4) and this shows how your network holds together.</Body>
+      )}
+      {health && health.circles > 0 && (
+        <>
+          {health.early && (
+            <div style={{ fontSize: 12.5, color: '#FFD700', margin: '4px 0 10px' }}>
+              An early estimate: {health.circles} {health.circles === 1 ? 'circle' : 'circles'} scanned. These get sharper as you scan more.
+            </div>
+          )}
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }}>
+            <div style={box}>
+              <div style={{ fontSize: 22, fontWeight: 700 }}>{pct(health.twoWays)}</div>
+              <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>of your 2nd degree you reach two or more ways</div>
+              <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>Higher is safer: lose one connection and they&rsquo;re still reachable.</div>
+            </div>
+            <div style={box}>
+              <div style={{ fontSize: 22, fontWeight: 700 }}>{Math.round(health.effective.size).toLocaleString()}</div>
+              <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>
+                effective reach of your {health.effective.n.toLocaleString()} connections ({pct(health.effective.efficiency)} non-overlapping)
+              </div>
+              <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>
+                From {health.effective.ties.toLocaleString()} {health.effective.ties === 1 ? 'tie' : 'ties'} between your connections seen in circle scans so far,
+                so it can only come down as you scan more.
+              </div>
+            </div>
+          </div>
+          {health.top.length > 0 && (
+            <div style={{ ...box, marginTop: 10, padding: 0 }}>
+              <div style={{ padding: '10px 14px', fontSize: 12.5, color: '#b8c4c4', borderBottom: LINE }}>Your connections who reach the most people no one else does</div>
+              {health.top.map((b, k) => (
+                <div key={b.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: k < health.top.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: 13 }}>
+                  <span style={{ width: 22, color: '#778' }}>#{k + 1}</span>
+                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[b.tier] || '#667', flexShrink: 0 }} />
+                  <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <b>{b.name}</b>{b.company ? <span style={{ color: '#8b9a9a' }}> · {b.company}</span> : null}
+                  </span>
+                  <span style={{ color: '#b8c4c4', whiteSpace: 'nowrap' }}>{b.circle.toLocaleString()} in circle</span>
+                  <span style={{ color: '#00ff88', whiteSpace: 'nowrap' }}>{b.only.toLocaleString()} only them ({pct(b.share)})</span>
+                  <Link href={`/?chain=${encodeURIComponent(b.id)}`} style={{ color: '#3498DB', textDecoration: 'none', whiteSpace: 'nowrap' }}>Explore →</Link>
+                </div>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

package/.next/standalone/app/globals.css

@@ -38,3 +38,7 @@ html:has([data-field-question]) {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 3px;
 }
+
+/* Where the scan status bar sits: just under the header (app/components/ScanStatusBar.js). */
+:root { --scan-bar-top: 94px; }
+@media (max-width: 767px) { :root { --scan-bar-top: 66px; } }

package/.next/standalone/app/layout.js

@@ -19,6 +19,8 @@ export const metadata = {
 
 import UserProvider from './components/UserProvider';
 import StaleServerBanner from './components/StaleServerBanner';
+import ScanStatusBar from './components/ScanStatusBar';
+import SocialAutoSync from './components/SocialAutoSync';
 
 export default function RootLayout({ children }) {
   return (
@@ -30,6 +32,10 @@ export default function RootLayout({ children }) {
               is running. Every page, because the answer to "did my update
               work?" should not require finding the right screen. */}
           <StaleServerBanner />
+          {/* While a scan runs: what it's doing and today's budget, with Stop. */}
+          <ScanStatusBar />
+          {/* The Social tab's once-a-day messages sync, when switched on. */}
+          <SocialAutoSync />
         </UserProvider>
       </body>
     </html>

package/.next/standalone/app/page.js

@@ -8,6 +8,7 @@ import useRequests from './components/useRequests';
 import { requestCount } from '../lib/requests-client';
 import { loadNetwork } from '../lib/network';
 import { VIEWS, resolveView } from './components/views';
+import AutoScanButton from './components/AutoScanButton';
 import { peopleByDegree, tierCountsOf } from '../lib/degrees';
 import Sidebar from './components/Sidebar';
 import FilterPanel from './components/FilterPanel';
@@ -73,6 +74,8 @@ function HomeInner() {
   const [degree3, setDegree3] = useState([]);
   // Which degrees Network Circle draws: your connections alone until you pick more.
   const [degrees, setDegrees] = useState([1]);
+  // Tiers switched off in Network Circle's Filter panel (C and D make a lot of noise).
+  const [hiddenTiers, setHiddenTiers] = useState([]);
   const [selected, setSelected] = useState(null);
   const focusNodeRef = useRef(null);
   const [filter, setFilter] = useState('all');
@@ -151,6 +154,19 @@ function HomeInner() {
 
   // Followed once: Bridge Chains has opened it, so leaving that view and coming
   // back, or reloading, starts from the overview.
+  // A card's Insights → Separation, filtered to that person's circle ("Show them", "S only").
+  const [separationPreset, setSeparationPreset] = useState(null);
+  const showInSeparation = useCallback((preset) => {
+    setSeparationPreset({ ...preset, id: `${preset.query}|${preset.tier || ''}|${preset.rarity || ''}|${Math.random()}` });
+    setMode('degrees');
+    setVisualMode('separation');
+  }, []);
+  // A card's Insights → that person's circle in Bridge Chains.
+  const openCircle = useCallback((id) => {
+    setChainOpen(id);
+    setMode('degrees');
+    setVisualMode('chain');
+  }, []);
   const chainOpened = useCallback(() => {
     setChainOpen(null);
     try { window.history.replaceState(null, '', window.location.pathname); } catch { /* the link stays */ }
@@ -170,10 +186,10 @@ function HomeInner() {
     () => (isDegreesMode ? connections : degrees.flatMap((d) => byDegree[d] || [])),
     [isDegreesMode, connections, degrees, byDegree],
   );
-  const filtered = useMemo(
-    () => (filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter)),
-    [networkRows, filter],
-  );
+  const filtered = useMemo(() => {
+    if (!isDegreesMode) return hiddenTiers.length ? networkRows.filter(c => !hiddenTiers.includes(c.tier)) : networkRows;
+    return filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter);
+  }, [isDegreesMode, networkRows, filter, hiddenTiers]);
   // Lookups built once per load. Every click re-renders this component, and the
   // three places below used to scan one list inside another — degree1.find per
   // 2nd-degree row, degree2.some per connection — about 16M comparisons, twice
@@ -282,6 +298,17 @@ function HomeInner() {
             >
               Paths
             </Link>}
+            {!IS_DEMO && <Link
+              href="/social"
+              title="Experimental: what your own LinkedIn data says about your relationships"
+              style={{
+                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600,
+                background: 'rgba(255,255,255,0.06)', color: '#FFD700', textDecoration: 'none',
+                display: 'flex', alignItems: 'center', gap: 4,
+              }}
+            >
+              Social<span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>beta</span>
+            </Link>}
             {!IS_DEMO && !csvMode && <Link
               href="/scores"
               style={{
@@ -316,6 +343,7 @@ function HomeInner() {
             >
               Scan
             </Link>}
+            {!IS_DEMO && !csvMode && <AutoScanButton isMobile={isMobile} />}
           </div>
           {/* Settings — also in CSV/sample mode and on phones, so updates stay reachable */}
           {!IS_DEMO && <Link
@@ -438,6 +466,8 @@ function HomeInner() {
           tierCounts={isDegreesMode ? stats?.tiers || {} : tierCountsOf(networkRows)}
           degrees={degrees}
           onDegreesChange={setDegrees}
+          hiddenTiers={hiddenTiers}
+          onHiddenTiersChange={setHiddenTiers}
           degreeCounts={{ 1: byDegree[1].length, 2: byDegree[2].length, 3: byDegree[3].length }}
           bridgeTierCounts={bridgeTierCounts}
         />
@@ -495,6 +525,7 @@ function HomeInner() {
             canScan,
             chainOpen,
             onChainOpened: chainOpened,
+            preset: separationPreset,
           };
           return <View {...viewProps} />;
         })()}
@@ -510,6 +541,8 @@ function HomeInner() {
           onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
           onSelect={(node) => { setSelected(node || null); }}
           onSwitchMode={(newMode) => { setMode(newMode); setFilter('all'); }}
+          onOpenCircle={openCircle}
+          onShowInSeparation={showInSeparation}
           onFocusNode={(nodeId) => { if (focusNodeRef.current) focusNodeRef.current(nodeId); }}
           csvSource={IS_DEMO ? 'sample' : csvMode ? csvSource : null}
           scanNotes={scanNotes}

package/.next/standalone/app/scores/page.js

@@ -12,6 +12,7 @@ import Link from 'next/link';
 import OnboardingGate from '../components/OnboardingGate';
 import SectorSection from '../components/settings/SectorSection';
 import TierSection from '../components/settings/TierSection';
+import NetworkHealthSection from '../components/settings/NetworkHealthSection';
 import CompanyScores from '../components/CompanyScores';
 import { Body, LINE, FONT } from '../components/ui';
 import { IS_DEMO } from '../../lib/demo';
@@ -60,7 +61,9 @@ function ScoresInner() {
           How someone’s power score is worked out, and the three things you can change about it:{' '}
           <a href="#sector" style={jump}>your field</a>, <a href="#tiers" style={jump}>how tiers are graded</a> and{' '}
           <a href="#companies" style={jump}>any company&rsquo;s score</a>. A change here rescores everyone.
+          {' '}First, <a href="#health" style={jump}>how your network holds together</a>.
         </Body>
+        <NetworkHealthSection />
         <SectorSection onSaved={saved} />
         <TierSection onSaved={saved} />
         <div id="companies" style={{ marginTop: 28 }}>

package/.next/standalone/app/setup/page.js

@@ -65,6 +65,8 @@ function SetupInner() {
   const [pages, setPages] = useRemembered('six-degrees-bridge-pages-v2', 100);
   // Also finish people mapped before, from the page each one's read stopped at.
   const [finish, setFinish] = useRemembered('six-degrees-bridge-finish', true);
+  // Experimental Auto-Bridge: all-day pacing and LinkedIn's own data (scripts/scrape.py --experimental).
+  const [experimental, setExperimental] = useRemembered('six-degrees-experimental-auto', false);
   const [error, setError] = useState(null);
   const logRef = useRef(null);
   // What's saved, for the question about your field: undefined while it
@@ -440,6 +442,16 @@ function SetupInner() {
                   <input type="checkbox" checked={finish} onChange={(e) => setFinish(e.target.checked)} disabled={running} />
                   Also finish people already mapped, from the page each one stopped at
                 </label>
+                <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', cursor: running ? 'default' : 'pointer' }}>
+                  <input type="checkbox" checked={experimental} disabled={running} style={{ marginTop: 3 }}
+                    onChange={(e) => { setExperimental(e.target.checked); window.dispatchEvent(new Event('six-degrees:experimental')); }} />
+                  <span>
+                    <b style={{ color: '#FFD700' }}>Experimental:</b> all-day pacing. Up to 10 pages in a sitting,
+                    then a 45-minute rest; searches only from 9:00 to 19:00; at the daily budget it waits for it to
+                    free up instead of stopping; and it saves every page. It also reads LinkedIn&rsquo;s own data beside
+                    the page text, to fill gaps and measure how the two compare. It keeps running while the app is open.
+                  </span>
+                </label>
                 <div style={{ fontSize: 12, color: '#FFD700', lineHeight: 1.6 }}>
                   Every page is a LinkedIn search, so it rests 20 seconds before each one and a
                   minute after every 10, and a long list can take
@@ -449,7 +461,7 @@ function SetupInner() {
                   what it read and stops, and carries on from that page next time. Keep batches small.
                 </div>
               <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
-                <Btn onClick={() => run('auto-bridge', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish })} disabled={!canSearch || (order === 'score' && !tiers.length)} primary>
+                <Btn onClick={() => run('auto-bridge', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish, experimental })} disabled={!canSearch || (order === 'score' && !tiers.length)} primary>
                   {running && s.action === 'auto-bridge' ? 'Mapping…' : 'Map 2nd degree'}
                 </Btn>
                 <select