six-degrees 0.4.3 → 0.4.5

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

@@ -0,0 +1,275 @@
+'use client';
+
+// The Galaxy's physics lab (experimental), in the Filter panel: Obsidian-style
+// sliders for the forces that lay the Galaxy out, and a replay of your network
+// growing by the date you connected. Everything moves the Galaxy in place;
+// lib/galaxy-lab.js holds the settings and the clock.
+
+import { useState, useSyncExternalStore } from 'react';
+import {
+  LAB_DEFAULTS, CLUSTERS, labNow, setLab, watchLab,
+  clockNow, setClock, watchClock, play, pause, stopReplay,
+  layoutsNow, watchLayouts, saveLayout, applyLayout, forgetLayout, milestones,
+} from '../../lib/galaxy-lab';
+import { savePicture, recordReplay, canRecord } from '../../lib/galaxy-export';
+
+const noLayouts = [];
+
+const DAY = 86400000;
+
+const FORCES = [
+  { key: 'gravity', label: 'Gravity', min: 0, max: 3, step: 0.01, fmt: (v) => v.toFixed(2), hint: 'Pulls every dot in towards you.' },
+  { key: 'rings', label: 'Rings', min: 0, max: 5, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How hard each tier holds its ring. At 0 the Galaxy finds its own shape.' },
+  { key: 'push', label: 'Push', min: 0, max: 300, step: 1, fmt: (v) => String(v), hint: 'How hard dots push each other apart.' },
+  { key: 'pull', label: 'Pull', min: 0, max: 15, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How hard each person pulls the people who came through them.' },
+  { key: 'distance', label: 'Distance', min: 0.05, max: 6, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How far out those people sit.' },
+];
+const DISPLAY = [
+  { key: 'dotSize', label: 'Dot size', min: 0.2, max: 8, step: 0.05, fmt: (v) => `${v.toFixed(2)}×` },
+  { key: 'lines', label: 'Lines', min: 0, max: 20, step: 0.1, fmt: (v) => `${v.toFixed(1)}×` },
+];
+
+const heading = { fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, margin: '12px 0 6px', textTransform: 'uppercase' };
+const small = { fontSize: 10, color: '#667', lineHeight: 1.4 };
+
+function Slider({ spec, value }) {
+  return (
+    <label title={spec.hint} style={{ display: 'block', marginBottom: 7 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#aab' }}>
+        <span>{spec.label}</span>
+        <span style={{ color: value === LAB_DEFAULTS[spec.key] ? '#556' : '#cfe6f7', fontVariantNumeric: 'tabular-nums' }}>{spec.fmt(value)}</span>
+      </div>
+      <input
+        type="range" min={spec.min} max={spec.max} step={spec.step} value={value}
+        onChange={(e) => setLab({ [spec.key]: Number(e.target.value) })}
+        style={{ width: '100%', accentColor: '#3498DB' }}
+      />
+    </label>
+  );
+}
+
+function Choice({ options, value, onPick }) {
+  return (
+    <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
+      {options.map(([v, label]) => (
+        <button key={v} onClick={() => onPick(v)} aria-pressed={value === v} style={{
+          flex: 1, padding: '5px 4px', borderRadius: 6, fontSize: 10.5, fontWeight: 600, cursor: 'pointer',
+          border: value === v ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(255,255,255,0.08)',
+          background: value === v ? 'rgba(52,152,219,0.18)' : 'rgba(255,255,255,0.03)',
+          color: value === v ? '#cfe6f7' : '#888',
+        }}>{label}</button>
+      ))}
+    </div>
+  );
+}
+
+/** Filter → Names: every name on the Galaxy on or off, with or without the lab. */
+export function NamesSwitch() {
+  const lab = useSyncExternalStore(watchLab, labNow, () => LAB_DEFAULTS);
+  return (
+    <div style={{ marginBottom: 18 }}>
+      <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>Names</div>
+      <Choice value={lab.labels} options={[[true, 'On'], [false, 'Off']]} onPick={(v) => setLab({ labels: v })} />
+    </div>
+  );
+}
+
+const month = (t) => new Date(t).toLocaleDateString(undefined, { month: 'short', year: 'numeric' });
+
+export default function GalaxyLab() {
+  const lab = useSyncExternalStore(watchLab, labNow, () => LAB_DEFAULTS);
+  const clock = useSyncExternalStore(watchClock, clockNow, clockNow);
+  const layouts = useSyncExternalStore(watchLayouts, layoutsNow, () => noLayouts);
+  const [name, setName] = useState('');
+  const [busy, setBusy] = useState(null);     // 'picture' | 'video' while saving
+  const [note, setNote] = useState(null);
+  const recordable = useSyncExternalStore(() => () => {}, canRecord, () => false);
+  const marks = clock.min != null && clock.max > clock.min
+    ? milestones(clock.social).filter((m) => m.t >= clock.min && m.t <= clock.max) : [];
+  const run = async (what, job) => {
+    setBusy(what);
+    setNote(null);
+    try { await job(); } catch (e) { setNote(e.message || 'That didn’t work.'); } finally { setBusy(null); }
+  };
+  const canReplay = clock.min != null && clock.max != null && clock.max > clock.min;
+  const preset = FORCES.every((f) => lab[f.key] === LAB_DEFAULTS[f.key]) ? 'rings'
+    : Object.entries(CLUSTERS).every(([k, v]) => lab[k] === v) ? 'clusters' : null;
+
+  return (
+    <div style={{ marginBottom: 18, padding: '10px 10px 8px', borderRadius: 8, border: '1px solid rgba(212,175,55,0.25)', background: 'rgba(212,175,55,0.04)' }}>
+      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
+        <input
+          type="checkbox" checked={lab.on}
+          onChange={(e) => { if (!e.target.checked) { stopReplay(); setClock({ find: '' }); } setLab({ on: e.target.checked }); }}
+          style={{ accentColor: '#D4AF37' }}
+        />
+        <span style={{ fontSize: 11.5, fontWeight: 700, color: '#e6d7a0' }}>Physics lab</span>
+        <span style={{ fontSize: 9, fontWeight: 700, color: '#D4AF37', border: '1px solid rgba(212,175,55,0.4)', borderRadius: 4, padding: '0 4px' }}>EXPERIMENTAL</span>
+      </label>
+      {!lab.on && (
+        <div style={{ ...small, marginTop: 6 }}>
+          Sliders for the forces that lay the Galaxy out, colours by company or warmth, find, a branch that lights
+          up on hover, and a replay of your network growing that you can save as a video.
+        </div>
+      )}
+
+      {lab.on && (
+        <>
+          <div style={heading}>Find</div>
+          <input
+            type="search" value={clock.find} placeholder="A name, company or role"
+            onChange={(e) => setClock({ find: e.target.value })}
+            onKeyDown={(e) => { if (e.key === 'Enter') setClock({ fly: clock.fly + 1 }); }}
+            style={{
+              width: '100%', boxSizing: 'border-box', padding: '6px 9px', borderRadius: 6, fontSize: 11.5,
+              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.25)', color: '#dde',
+            }}
+          />
+          {clock.find.trim().length >= 2 && (
+            <div style={{ ...small, marginTop: 4 }}>
+              {clock.found ? `${clock.found.toLocaleString()} found · Enter flies to the best one` : 'No one on screen matches.'}
+            </div>
+          )}
+
+          <div style={heading}>Layout</div>
+          <Choice
+            value={preset}
+            options={[['rings', 'Rings'], ['clusters', 'Clusters']]}
+            onPick={(v) => setLab(v === 'rings' ? { ...Object.fromEntries(FORCES.map((f) => [f.key, LAB_DEFAULTS[f.key]])), sizeBy: 'power' } : CLUSTERS)}
+          />
+          <div style={{ ...small, marginBottom: 6 }}>
+            {preset === 'clusters'
+              ? 'No rings: each connection pulls their circle round them, and a dot grows with everyone behind it.'
+              : 'Drag a dot to see what it pulls with it. Try Rings at 0 and Pull up.'}
+          </div>
+
+          <div style={heading}>Forces</div>
+          {FORCES.map((f) => <Slider key={f.key} spec={f} value={lab[f.key]} />)}
+
+          <div style={heading}>Display</div>
+          {DISPLAY.map((f) => <Slider key={f.key} spec={f} value={lab[f.key]} />)}
+          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Size dots by</div>
+          <Choice value={lab.sizeBy} options={[['power', 'Power score'], ['reach', 'Who hangs off them']]} onPick={(v) => setLab({ sizeBy: v })} />
+          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Colour by</div>
+          <Choice
+            value={lab.colourBy}
+            options={[['tier', 'Tier'], ['degree', 'Degree'], ['company', 'Company'], ['warmth', 'Warmth']]}
+            onPick={(v) => setLab({ colourBy: v })}
+          />
+          {lab.colourBy === 'warmth' && clock.social === null && (
+            <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>
+              Warmth comes from the Social tab: import your LinkedIn export there first. Until then it&rsquo;s by tier.
+            </div>
+          )}
+          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Which names{lab.labels ? '' : ' (Names is off)'}</div>
+          <Choice value={lab.names === 'all' ? 'all' : 'key'} options={[['key', 'S + catalysts'], ['all', 'All 1st']]} onPick={(v) => setLab({ names: v })} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#aab', cursor: 'pointer' }}>
+            <input type="checkbox" checked={lab.branch} onChange={(e) => setLab({ branch: e.target.checked })} style={{ accentColor: '#3498DB' }} />
+            Light up a branch on hover
+          </label>
+
+          <div style={heading}>Replay</div>
+          {canReplay ? (
+            <>
+              <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 6 }}>
+                <button onClick={() => (clock.playing ? pause() : play())} style={{
+                  padding: '5px 12px', borderRadius: 6, fontSize: 11, fontWeight: 700, cursor: 'pointer',
+                  border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: '#cfe6f7',
+                }}>{clock.playing ? '❚❚ Pause' : '▶ Replay'}</button>
+                {clock.at != null && (
+                  <button onClick={stopReplay} style={{
+                    padding: '5px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
+                    border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aaa',
+                  }}>Show all</button>
+                )}
+                <span style={{ marginLeft: 'auto', fontSize: 10.5, color: '#aab', fontVariantNumeric: 'tabular-nums' }}>
+                  {month(clock.at ?? clock.max)}
+                </span>
+              </div>
+              <div style={{ position: 'relative' }}>
+                <input
+                  type="range" min={clock.min} max={clock.max} step={DAY} value={clock.at ?? clock.max}
+                  onChange={(e) => { pause(); setClock({ at: Number(e.target.value) }); }}
+                  style={{ width: '100%', accentColor: '#3498DB' }}
+                  aria-label="Time"
+                />
+                {/* Milestones from the Social tab: a job start (gold) or a post (blue). */}
+                <div style={{ position: 'absolute', left: 7, right: 7, top: -3, height: 6, pointerEvents: 'none' }}>
+                  {marks.map((m) => (
+                    <span key={`${m.kind}-${m.t}`} title={`${m.label} · ${month(m.t)}`} style={{
+                      position: 'absolute', left: `${((m.t - clock.min) / (clock.max - clock.min)) * 100}%`,
+                      width: m.kind === 'job' ? 3 : 2, height: m.kind === 'job' ? 8 : 5, borderRadius: 1, transform: 'translateX(-50%)',
+                      background: m.kind === 'job' ? '#D4AF37' : '#74B9FF', opacity: m.kind === 'job' ? 0.95 : 0.7,
+                    }} />
+                  ))}
+                </div>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', ...small }}>
+                <span>{month(clock.min)}</span><span>{month(clock.max)}</span>
+              </div>
+              <div style={{ fontSize: 11, color: '#aab', margin: '8px 0 4px' }}>Length</div>
+              <Choice value={lab.speed} options={[[5, '5 s'], [15, '15 s'], [30, '30 s'], [60, '1 min']]} onPick={(v) => setLab({ speed: v })} />
+              <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#aab', cursor: 'pointer' }}>
+                <input type="checkbox" checked={lab.loop} onChange={(e) => setLab({ loop: e.target.checked })} style={{ accentColor: '#3498DB' }} />
+                Loop
+              </label>
+              <div style={{ ...small, marginTop: 4 }}>
+                Your connections appear on the day you connected; their circles come with them.
+                {marks.length > 0 ? ' Gold marks are your job starts and blue ones your posts, from the Social tab.' : ''}
+              </div>
+              {recordable && (
+                <button disabled={!!busy} onClick={() => run('video', recordReplay)} style={{
+                  marginTop: 8, width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600,
+                  cursor: busy ? 'default' : 'pointer', border: '1px solid rgba(231,76,60,0.5)',
+                  background: 'rgba(231,76,60,0.12)', color: '#f5b7b1',
+                }}>{busy === 'video' ? '● Recording…' : '● Record the replay as a video'}</button>
+              )}
+            </>
+          ) : (
+            <div style={small}>
+              Nothing to replay: the connections on screen have no &ldquo;connected on&rdquo; dates. A LinkedIn CSV or a
+              network scan has them; the sample network doesn&rsquo;t.
+            </div>
+          )}
+
+          <div style={heading}>Saved layouts</div>
+          {layouts.length > 0 && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
+              {layouts.map((l) => (
+                <span key={l.name} style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 12, border: '1px solid rgba(52,152,219,0.4)', background: 'rgba(52,152,219,0.1)' }}>
+                  <button onClick={() => applyLayout(l.name)} style={{ padding: '3px 4px 3px 9px', border: 'none', background: 'none', color: '#cfe6f7', fontSize: 10.5, cursor: 'pointer' }}>{l.name}</button>
+                  <button onClick={() => forgetLayout(l.name)} aria-label={`Forget ${l.name}`} title="Forget this layout" style={{ padding: '3px 8px 3px 3px', border: 'none', background: 'none', color: '#667', fontSize: 11, cursor: 'pointer' }}>×</button>
+                </span>
+              ))}
+            </div>
+          )}
+          <form onSubmit={(e) => { e.preventDefault(); saveLayout(name); setName(''); }} style={{ display: 'flex', gap: 4 }}>
+            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name this layout" maxLength={40} style={{
+              flex: 1, minWidth: 0, padding: '5px 8px', borderRadius: 6, fontSize: 11,
+              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.25)', color: '#dde',
+            }} />
+            <button type="submit" disabled={!name.trim()} style={{
+              padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: name.trim() ? 'pointer' : 'default',
+              border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: name.trim() ? '#cfe6f7' : '#667',
+            }}>Save</button>
+          </form>
+
+          <div style={heading}>Share</div>
+          <button disabled={!!busy} onClick={() => run('picture', savePicture)} style={{
+            width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: busy ? 'default' : 'pointer',
+            border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: '#cfe6f7',
+          }}>{busy === 'picture' ? 'Saving…' : 'Save a picture of the Galaxy'}</button>
+          <div style={{ ...small, marginTop: 4 }}>
+            A PNG of what&rsquo;s on screen, at twice the size. It shows real names, so check it before you post it.
+          </div>
+          {note && <div style={{ ...small, color: '#e67e73', marginTop: 4 }}>{note}</div>}
+
+          <button onClick={() => { stopReplay(); setClock({ find: '' }); setLab(null); }} style={{
+            marginTop: 10, width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
+            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aaa',
+          }}>Reset to today&rsquo;s layout</button>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -7,9 +7,10 @@
 // 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 } from 'react';
+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',
@@ -24,6 +25,7 @@ const WHAT = {
   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%.
@@ -32,12 +34,29 @@ const tone = (used, cap) => (!cap ? '#8b9a9a' : used / cap >= 0.9 ? '#ff6b6b' :
 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);
   }), []);
-  if (!job?.running) return null;
+  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}`
@@ -47,12 +66,7 @@ export default function ScanStatusBar() {
   const last = [...(job.log || [])].reverse().find((l) => l && l.trim())?.trim();
 
   return (
-    <div role="status" aria-live="polite" style={{
-      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)', border: '1px solid rgba(0,255,136,0.25)',
-    }}>
+    <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>}

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>
+  );
+}