six-degrees 0.4.11 → 0.5.0

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

@@ -1,371 +1,19 @@
 'use client';
 
-// Social (experimental): what your own LinkedIn data says about your
-// relationships (lib/linkedin-export.js). Two sources, both yours:
-//   - the export LinkedIn emails you (Settings → Data privacy → Get a copy of
-//     your data), read here in the browser: full history, no traffic to LinkedIn;
-//   - an experimental live sync (the scanner's --messages): your messages list,
-//     read once in your own Chrome, by hand or once a day.
-// Kept on this computer: dates, who wrote last and counts, the names of people
-// who aren't your connections, and the messages themselves (and the notes sent
-// with requests) only if you turn on Keep my messages, in a file of their own
-// that switching it off deletes. The CRM (Crm.js) is the main section: everyone
-// you've been in touch with, and your own stage, tags, notes and follow-ups.
+// Social is part of Outlink now (Blake, 2026-10-02): the CRM, your LinkedIn
+// export and the messages sit under Outlink → Messages & follow-ups
+// (app/social/SocialHub.js). Old links land there.
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect } from 'react';
 import Link from 'next/link';
-import OnboardingGate from '../components/OnboardingGate';
-import { useUser } from '../components/UserProvider';
-import { loadNetwork } from '../../lib/network';
-import {
-  readTable, messageStats, careerChapters, postingEffect, invitationSplit, warmthOf, buildConversations, conversationSummary, buildInvitations,
-} from '../../lib/linkedin-export';
-import { mergeSocial } from '../../lib/galaxy-lab';
-import { keyFor } from '../../lib/separation';
-import { runScrape, watchScanner, scannerNow } from '../../lib/scraper-client';
-import { Body, LINE, FONT } from '../components/ui';
-import { IS_DEMO } from '../../lib/demo';
-import Crm from './Crm';
-
-const WARMTH = { warm: ['Warm', '#ff9f43'], cool: ['Cool', '#3498DB'], dormant: ['Dormant', '#8899aa'], never: ['Never messaged', '#556'] };
-const FILES = { 'connections.csv': 'first name', 'messages.csv': 'conversation id', 'invitations.csv': 'direction', 'positions.csv': 'company name', 'shares.csv': 'date' };
-const day = (t) => (t ? new Date(t).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }) : '');
-// Messages go to the server in parts of about this many characters: a request
-// here can carry 10 MB, and a character can take up to 3 bytes.
-const PART_CHARS = 2_500_000;
-
-/** An import's messages, in parts that each fit in one request. */
-async function sendMessages(conversations) {
-  const parts = [];
-  let cur = {};
-  let size = 0;
-  for (const c of conversations) {
-    for (const m of c.messages) {
-      const n = JSON.stringify(m).length + 2;
-      if (size + n > PART_CHARS && size > 0) { parts.push(cur); cur = {}; size = 0; }
-      if (!cur[c.id]) { cur[c.id] = { title: c.title || '', messages: [] }; size += c.id.length + (c.title || '').length + 40; }
-      cur[c.id].messages.push(m);
-      size += n;
-    }
-  }
-  parts.push(cur);
-  for (let i = 0; i < parts.length; i++) {
-    const r = await fetch('/api/social/messages', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ part: i, parts: parts.length, threads: parts[i] }) });
-    if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'The messages couldn’t be saved.');
-  }
-}
-
-/** The notes sent with requests, when the messages are kept: they ride in the same file and go with it. */
-async function sendInviteNotes(invitations) {
-  const invites = {};
-  for (const i of invitations) if (i.note) invites[i.id] = i.note;
-  const r = await fetch('/api/social/messages', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ invites }) });
-  if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'The requests’ notes couldn’t be saved.');
-}
-
-export default function SocialPage() {
-  return <OnboardingGate><SocialInner /></OnboardingGate>;
-}
-
-function SocialInner() {
-  const { userId } = useUser();
-  const [social, setSocial] = useState(undefined);
-  const [net, setNet] = useState(null);
-  const [keepEmails, setKeepEmails] = useState(false);
-  const [note, setNote] = useState(null);
-  const [busy, setBusy] = useState(false);
-  const [job, setJob] = useState(() => scannerNow());
-  const [switching, setSwitching] = useState(false);
-  const [listToken, setListToken] = useState(0);
-  const [crmToken, setCrmToken] = useState(0);
-  // The last export's messages.csv and Invitations.csv, in this window only, so
-  // turning Keep my messages on right after an import needn't ask for the folder again.
-  const lastMessages = useRef(null);
-  const lastInvites = useRef(null);
-  const keep = social?.keepMessages === true;
-
-  // The Conversations list reads again whenever this does (listToken).
-  const reload = () => fetch('/api/social').then((r) => r.json()).then((d) => setSocial(d.social || null)).catch(() => setSocial(null))
-    .finally(() => setListToken((n) => n + 1));
-  useEffect(() => { reload(); }, []);
-  useEffect(() => watchScanner(() => setJob(scannerNow())), []);
-  useEffect(() => {
-    if (!userId) return undefined;
-    let live = true;
-    loadNetwork(userId).then((n) => { if (live) setNet(n); }).catch(() => {});
-    return () => { live = false; };
-  }, [userId]);
-
-  async function importFolder(list) {
-    setBusy(true);
-    setNote(null);
-    try {
-      const found = {};
-      for (const f of Array.from(list || [])) {
-        const name = f.name.toLowerCase();
-        if (FILES[name] && !found[name]) found[name] = readTable(await f.text(), FILES[name]);
-      }
-      if (!Object.keys(found).length) throw new Error('That folder doesn’t have LinkedIn’s export files in it (Connections.csv, messages.csv and so on).');
-      const conns = found['connections.csv'] || [];
-      const stats = found['messages.csv'] ? messageStats(found['messages.csv']) : { asOf: null, people: new Map() };
-      // The words are read out of messages.csv only when Keep my messages is on.
-      const built = found['messages.csv'] ? buildConversations(found['messages.csv'], { keepText: keep }) : null;
-      const invitations = found['invitations.csv'] ? buildInvitations(found['invitations.csv'], { keepText: keep }) : null;
-      lastMessages.current = found['messages.csv'] || null;
-      lastInvites.current = found['invitations.csv'] || null;
-      const people = {};
-      for (const [url, v] of stats.people) people[url] = { last: v.last, lastFromThem: v.lastFromThem, total: v.total, recent: v.recent };
-      if (keepEmails) {
-        for (const c of conns) {
-          const e = c['email address'];
-          if (!e) continue;
-          const k = keyFor({ profile_url: c.url });
-          people[k] = { ...(people[k] || {}), email: e };
-        }
-      }
-      const asOf = stats.asOf || Date.now();
-      const body = {
-        asOf,
-        people,
-        conversations: built ? built.conversations.map(conversationSummary) : [],
-        chapters: careerChapters(found['positions.csv'] || [], conns, asOf),
-        posts: found['shares.csv'] ? postingEffect(found['shares.csv'], conns) : null,
-        invites: found['invitations.csv'] ? invitationSplit(found['invitations.csv']) : null,
-        // One record per request, without the notes: those go with the messages, below.
-        invitations: (invitations || []).map(({ note, ...rest }) => rest),
-        // Names as the export spells them, so people who aren't connections can be listed.
-        names: built ? built.names : {},
-        emails: keepEmails,
-      };
-      const r = await fetch('/api/social', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'It couldn’t be saved.');
-      if (built && keep) await sendMessages(built.conversations);
-      if (invitations && keep) await sendInviteNotes(invitations);
-      const odd = built ? [
-        built.drafts ? `${built.drafts.toLocaleString()} unsent ${built.drafts === 1 ? 'draft' : 'drafts'} left out` : '',
-        built.skipped ? `${built.skipped.toLocaleString()} ${built.skipped === 1 ? 'row' : 'rows'} with no conversation or date left out` : '',
-      ].filter(Boolean) : [];
-      setNote({
-        good: true,
-        text: `Read ${Object.keys(found).length} of LinkedIn’s files: ${stats.people.size.toLocaleString()} people you’ve messaged one to one`
-          + (built ? `, ${built.conversations.length.toLocaleString()} conversations${keep ? ', their messages kept on this computer' : ''}` : '')
-          + (invitations ? `, ${invitations.length.toLocaleString()} connection requests` : '')
-          + `.${odd.length ? ` (${odd.join('; ')}.)` : ''}`,
-      });
-      await reload();
-    } catch (e) {
-      setNote({ good: false, text: e.message });
-    } finally {
-      setBusy(false);
-    }
-  }
-
-  // The daily sync reads the top of the list; `full` scrolls until the whole
-  // history has loaded (scripts/scrape.py --full-history), at the same pace.
-  async function syncNow(full = false) {
-    setNote(null);
-    try {
-      const end = await runScrape(full ? 'messages-full' : 'messages');
-      setNote(end?.exitCode === 0
-        ? { good: true, text: full ? 'Your whole messages history is read.' : 'Your messages list is read.' }
-        : { good: false, text: 'The sync stopped before it finished. The Scan page has the log.' });
-      await reload();
-    } catch (e) {
-      setNote({ good: false, text: e.message });
-    }
-  }
-
-  async function setAuto(on) {
-    await fetch('/api/social', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ autoSync: on }) });
-    reload();
-  }
-
-  // Keep my messages. On: from now on the export's and the sync's words are
-  // kept, and if an export was read in this window, its messages are kept now.
-  // Off, once you've said so: the kept messages are deleted.
-  async function setKeep(on) {
-    if (!on && !window.confirm('Delete the messages kept on this computer? The list of conversations stays; the messages themselves are deleted.')) return;
-    setSwitching(true);
-    setNote(null);
-    try {
-      if (!on) await fetch('/api/social/messages', { method: 'DELETE' });
-      const r = await fetch('/api/social', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ keepMessages: on }) });
-      if (!r.ok) throw new Error('The switch couldn’t be saved.');
-      if (on && (lastMessages.current || lastInvites.current)) {
-        if (lastMessages.current) await sendMessages(buildConversations(lastMessages.current, { keepText: true }).conversations);
-        if (lastInvites.current) await sendInviteNotes(buildInvitations(lastInvites.current, { keepText: true }));
-        setNote({ good: true, text: 'Your messages are kept on this computer now.' });
-      } else if (on) {
-        setNote({ good: true, text: 'On. Choose your export folder again, or sync your messages, to bring the messages in.' });
-      } else {
-        setNote({ good: true, text: 'Off. The kept messages are deleted.' });
-      }
-    } catch (e) {
-      setNote({ good: false, text: e.message });
-    } finally {
-      setSwitching(false);
-      reload();
-    }
-  }
-
-  // Forget it: the export's and the sync's findings, and the messages. Your CRM
-  // notes are your own work, so they're a question of their own, asked after.
-  async function forget() {
-    await fetch('/api/social', { method: 'DELETE' });
-    lastMessages.current = null;
-    lastInvites.current = null;
-    let text = 'Forgotten. Nothing from your export or messages is kept here now, the messages themselves included.';
-    if (window.confirm('Also delete your CRM: the stages, tags, notes and follow-up dates you added? This can’t be undone. Cancel keeps them.')) {
-      await fetch('/api/social/crm', { method: 'DELETE' });
-      setCrmToken((n) => n + 1);
-      text += ' Your CRM notes are deleted too.';
-    } else {
-      text += ' Your CRM notes are kept.';
-    }
-    setNote({ good: true, text });
-    reload();
-  }
-
-  // What each person's messages say, the export and the live sync together, and
-  // "now" for warmth: the newest thing the data knows, so an older export reads as it was.
-  const { merged, asOf } = useMemo(() => mergeSocial(social), [social]);
-
-  const warmth = useMemo(() => {
-    const counts = { warm: 0, cool: 0, dormant: 0, never: 0 };
-    for (const c of net?.degree1 || []) counts[warmthOf(merged.get(keyFor(c)), asOf)] += 1;
-    return counts;
-  }, [net, merged, asOf]);
-
-  if (IS_DEMO) return <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#aaa', padding: 40, fontFamily: FONT }}>Not part of the demo.</div>;
-  const running = job?.running;
-  const box = { padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', marginTop: 10 };
-  const h2 = { fontSize: 16, margin: '24px 0 6px' };
+import { useRouter } from 'next/navigation';
 
+export default function SocialMoved() {
+  const router = useRouter();
+  useEffect(() => { router.replace('/queue?view=messages'); }, [router]);
   return (
-    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#fff', fontFamily: FONT }}>
-      <header style={{ padding: '16px 24px', borderBottom: LINE, display: 'flex', alignItems: 'center', gap: 16 }}>
-        <Link href="/" style={{ color: '#888', textDecoration: 'none', fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6, background: 'rgba(255,255,255,0.06)', border: LINE }}>← Back to Map</Link>
-        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: '#FFD700' }}>Social <span style={{ fontSize: 12, color: '#8b9a9a', fontWeight: 600 }}>experimental</span></h1>
-      </header>
-      <main style={{ maxWidth: 1180, margin: '0 auto', padding: '8px 16px 64px' }}>
-        <Body style={{ marginTop: 16 }}>
-          Everyone you&rsquo;ve been in touch with on LinkedIn, connections or not: who&rsquo;s waiting on you, who
-          hasn&rsquo;t answered, what you&rsquo;ve sent and received, and your own notes and follow-ups on each, from
-          your own LinkedIn data. Only dates, who wrote last, counts and names are kept on this computer, and what
-          messages say only if you turn on <i>Keep my messages</i> below.
-        </Body>
-
-        <h2 style={h2}>Your LinkedIn export</h2>
-        <div style={box}>
-          <Body style={{ margin: 0 }}>
-            On LinkedIn: <i>Settings → Data privacy → Get a copy of your data</i>, pick the larger archive, and unzip the
-            file it emails you. Then choose that folder here. It&rsquo;s read in this window; nothing goes to LinkedIn.
-          </Body>
-          <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', marginTop: 10 }}>
-            <input type="checkbox" checked={keepEmails} onChange={(e) => setKeepEmails(e.target.checked)} style={{ marginTop: 3 }} />
-            <span>Also keep email addresses from it, on this computer only, for one-click email.</span>
-          </label>
-          <div style={{ marginTop: 10, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
-            <label style={{ padding: '7px 14px', borderRadius: 8, background: 'rgba(52,152,219,0.18)', color: '#cfe6f7', cursor: busy ? 'default' : 'pointer', fontSize: 13 }}>
-              {busy ? 'Reading…' : social ? 'Choose a newer export' : 'Choose the export folder'}
-              <input type="file" webkitdirectory="" directory="" multiple disabled={busy} style={{ display: 'none' }} onChange={(e) => importFolder(e.target.files)} />
-            </label>
-            {social && <span style={{ fontSize: 12, color: '#8b9a9a' }}>From an export up to {day(social.asOf)}{social.liveAt ? ` · messages synced ${day(Date.parse(social.liveAt))}` : ''}</span>}
-            {social && <button onClick={forget} style={{ background: 'none', border: 'none', color: '#ff9b9b', cursor: 'pointer', fontSize: 12 }}>Forget it</button>}
-          </div>
-        </div>
-
-        <h2 style={h2}>Live messages sync <span style={{ fontSize: 11, color: '#FFD700' }}>experimental</span></h2>
-        <div style={box}>
-          <Body style={{ margin: 0 }}>
-            Reads your messages list once, in your own Chrome: who each conversation is with, connections or not, when it
-            was last active, whether it&rsquo;s unread and who wrote last. It uses no search budget and opens no
-            conversation. The newest message&rsquo;s words are kept only if <i>Keep my messages</i> is on. The daily sync
-            reads the top of the list; <i>Read my whole history</i> keeps scrolling until no more conversations load
-            (at most 60 scrolls, about 1,000 conversations), at the same slow, fixed pace, so it takes a few minutes.
-          </Body>
-          <div style={{ marginTop: 10, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
-            <button onClick={() => syncNow(false)} disabled={running} style={{ padding: '7px 14px', borderRadius: 8, border: 'none', background: running ? '#333' : 'rgba(0,255,136,0.15)', color: running ? '#777' : '#00ff88', cursor: running ? 'default' : 'pointer', fontSize: 13 }}>
-              {running ? 'The scanner is busy' : 'Sync messages now'}
-            </button>
-            <button onClick={() => syncNow(true)} disabled={running} style={{ padding: '7px 14px', borderRadius: 8, border: LINE, background: 'none', color: running ? '#777' : '#cfe6f7', cursor: running ? 'default' : 'pointer', fontSize: 13 }}>
-              Read my whole history
-            </button>
-            <label style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12.5, color: '#b8c4c4' }}>
-              <input type="checkbox" checked={social?.autoSync === true} onChange={(e) => setAuto(e.target.checked)} />
-              Once a day while the app is open (daytime only)
-            </label>
-          </div>
-        </div>
-        {note && <div style={{ marginTop: 10, fontSize: 13, color: note.good ? '#00ff88' : '#ff9b9b' }}>{note.text}</div>}
-
-        <h2 style={h2}>People</h2>
-        <Crm net={net} asOf={social ? asOf : null} keep={keep} onKeep={setKeep} switching={switching || busy} token={listToken} crmToken={crmToken} />
-
-        {social && (
-          <>
-            <h2 style={h2}>Warmth</h2>
-            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 10 }}>
-              {Object.entries(WARMTH).map(([k, [label, color]]) => (
-                <div key={k} style={{ ...box, marginTop: 0 }}>
-                  <div style={{ fontSize: 22, fontWeight: 700, color }}>{(warmth[k] || 0).toLocaleString()}</div>
-                  <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>{label}</div>
-                </div>
-              ))}
-            </div>
-            <div style={{ fontSize: 11.5, color: '#778', marginTop: 6 }}>
-              Of your connections. Warm: messaged in the last 30 days, or 3+ messages in 90. Cool: within a year. Dormant: longer ago.
-            </div>
-
-            {social.chapters?.length > 0 && (
-              <>
-                <h2 style={h2}>Career chapters</h2>
-                <div style={{ ...box, padding: 0 }}>
-                  {social.chapters.map((c) => {
-                    const warm = (c.people || []).filter((u) => ['warm', 'cool'].includes(warmthOf(merged.get(keyFor({ profile_url: u })), asOf))).length;
-                    return (
-                      <div key={`${c.company}-${c.from}`} style={{ display: 'flex', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)', fontSize: 13, alignItems: 'baseline' }}>
-                        <span style={{ flex: 1 }}><b>{c.company}</b> <span style={{ color: '#8b9a9a' }}>{c.title} · {new Date(c.from).getFullYear()}–{c.to ? new Date(c.to).getFullYear() : 'now'}</span></span>
-                        <span style={{ color: '#b8c4c4' }}>{c.made.toLocaleString()} connections made</span>
-                        <span style={{ color: '#ff9f43', minWidth: 90, textAlign: 'right' }}>{c.made ? `${Math.round((100 * warm) / c.made)}% still in touch` : ''}</span>
-                      </div>
-                    );
-                  })}
-                </div>
-              </>
-            )}
-
-            {social.posts?.posts?.length > 0 && (
-              <>
-                <h2 style={h2}>Does posting work?</h2>
-                <div style={box}>
-                  <div style={{ fontSize: 13 }}>
-                    In the week after a post you made <b>{social.posts.afterPosts.toFixed(1)}</b> new connections on average; a usual week, <b>{social.posts.usualWeek.toFixed(1)}</b>.
-                  </div>
-                  <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>What came after a post, not proof it came from it.</div>
-                  {[...social.posts.posts].sort((a, b) => b.week - a.week).slice(0, 3).map((p) => (
-                    <div key={p.t} style={{ fontSize: 12.5, color: '#b8c4c4', marginTop: 6 }}>
-                      {day(p.t)}: {p.week} new connections that week {p.link ? <a href={p.link} target="_blank" rel="noreferrer" style={{ color: '#3498DB', textDecoration: 'none' }}>Post ↗</a> : null}
-                    </div>
-                  ))}
-                </div>
-              </>
-            )}
-
-            {social.invites?.total > 0 && (
-              <>
-                <h2 style={h2}>Who reaches out</h2>
-                <div style={box}>
-                  <span style={{ fontSize: 13 }}>
-                    {social.invites.incoming.toLocaleString()} requests came to you and you sent {social.invites.outgoing.toLocaleString()}
-                    {' '}({Math.round((100 * social.invites.incoming) / social.invites.total)}% came to you), as far as your export shows.
-                  </span>
-                </div>
-              </>
-            )}
-          </>
-        )}
-      </main>
+    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#aab', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>
+      Social is part of <Link href="/queue?view=messages" style={{ color: '#FF6B35', marginLeft: 4 }}>Outlink</Link> now.
     </div>
   );
 }

package/.next/standalone/lib/chain-layout.js

@@ -17,19 +17,19 @@ function capacity(radius, spacing, sweep) {
   return Math.max(1, sweep >= TAU - 1e-9 ? Math.floor(arc / spacing) : Math.floor(arc / spacing) + 1);
 }
 
-/** The rings from `inner` outwards, `spacing` apart, until `n` dots fit. */
-function ringsFor(n, inner, spacing, sweep) {
+/** The rings from `inner` outwards, `gap` apart (at least `spacing`), until `n` dots fit. */
+function ringsFor(n, inner, spacing, sweep, gap = spacing) {
   const radii = [];
   let room = 0;
-  for (let r = inner; room < n; r += spacing) {
+  for (let r = inner; room < n; r += Math.max(spacing, gap)) {
     radii.push(r);
     room += capacity(r, spacing, sweep);
   }
   return radii;
 }
 
-const outerOf = (n, inner, spacing, sweep) => {
-  const radii = ringsFor(n, inner, spacing, sweep);
+const outerOf = (n, inner, spacing, sweep, gap) => {
+  const radii = ringsFor(n, inner, spacing, sweep, gap);
   return radii[radii.length - 1];
 };
 
@@ -46,43 +46,44 @@ const outerOf = (n, inner, spacing, sweep) => {
  * neighbouring rings don't line up in spokes.
  *
  * `start` and `sweep` fill an arc instead of the whole circle, each ring from
- * its middle outwards.
+ * its middle outwards. `ringGap` keeps the rings at least that far apart, for
+ * dots that carry a name under them and need the room.
  *
  * @returns {{ spacing: number, inner: number, rings: { radius: number, count: number }[],
  *   points: { x: number, y: number, angle: number, ring: number }[] }}
  */
 export function ringLayout(n, {
   inner, outer, spacing, minSpacing = spacing / 3, innerMin = inner,
-  start = -Math.PI / 2, sweep = TAU,
+  start = -Math.PI / 2, sweep = TAU, ringGap = 0,
 } = {}) {
   const count = Math.max(0, Math.floor(n) || 0);
   if (!count) return { spacing, inner, rings: [], points: [] };
 
   let s = spacing;
   let r0 = inner;
-  if (outerOf(count, r0, s, sweep) > outer) {
+  if (outerOf(count, r0, s, sweep, ringGap) > outer) {
     // Start further in, as far as innerMin, before closing anything up.
-    if (outerOf(count, innerMin, s, sweep) <= outer) {
+    if (outerOf(count, innerMin, s, sweep, ringGap) <= outer) {
       let lo = innerMin, hi = inner;
       for (let i = 0; i < 24; i++) {
         const mid = (lo + hi) / 2;
-        if (outerOf(count, mid, s, sweep) <= outer) lo = mid; else hi = mid;
+        if (outerOf(count, mid, s, sweep, ringGap) <= outer) lo = mid; else hi = mid;
       }
       r0 = lo;
     } else {
       r0 = innerMin;
       let lo = minSpacing, hi = spacing;
-      if (outerOf(count, r0, lo, sweep) <= outer) {
+      if (outerOf(count, r0, lo, sweep, ringGap) <= outer) {
         for (let i = 0; i < 24; i++) {
           const mid = (lo + hi) / 2;
-          if (outerOf(count, r0, mid, sweep) <= outer) lo = mid; else hi = mid;
+          if (outerOf(count, r0, mid, sweep, ringGap) <= outer) lo = mid; else hi = mid;
         }
       }
       s = lo;
     }
   }
 
-  const radii = ringsFor(count, r0, s, sweep);
+  const radii = ringsFor(count, r0, s, sweep, ringGap);
   const caps = radii.map((r) => capacity(r, s, sweep));
   const room = caps.reduce((a, b) => a + b, 0);
 
@@ -162,8 +163,9 @@ const TIER_BANDS = ['S', 'A', 'B', 'C', 'D'];
  *
  * @returns {{ spacing: number, edge: number, bands: { tier: string, inner: number, outer: number }[],
  *   points: { x: number, y: number, angle: number, slot: number }[] }}
+ * `start` is the angle each ring's first dot sits at (the top, unless told).
  */
-export function tierBandLayout(rows, { inner, outer, spacing, minSpacing = spacing / 3, gap = spacing }) {
+export function tierBandLayout(rows, { inner, outer, spacing, minSpacing = spacing / 3, gap = spacing, start = -Math.PI / 2 }) {
   const groups = TIER_BANDS.map((tier) => ({ tier, idx: [] }));
   rows.forEach((row, i) => {
     const t = TIER_BANDS.indexOf(row?.tier);
@@ -175,7 +177,7 @@ export function tierBandLayout(rows, { inner, outer, spacing, minSpacing = spaci
     const bands = [];
     let r = inner;
     for (const g of used) {
-      const l = ringLayout(g.idx.length, { inner: r, outer: Infinity, spacing: s, minSpacing: s });
+      const l = ringLayout(g.idx.length, { inner: r, outer: Infinity, spacing: s, minSpacing: s, start });
       g.idx.forEach((rowIndex, j) => {
         const p = l.points[j];
         points[rowIndex] = { x: p.x, y: p.y, angle: p.angle, slot: TAU / l.rings[p.ring].count };
@@ -201,28 +203,96 @@ export function tierBandLayout(rows, { inner, outer, spacing, minSpacing = spaci
 }
 
 /**
- * The people behind each person in an opened circle: their own circle, drawn
- * as a fan of small dots beyond `from`, centred on that person's angle and no
- * wider than their slot (at most a sixth of the circle), so each fan sits
- * behind its own person. At most `cap` dots a fan and about `total` in all, so
- * a big network stays quick; `more` is how many weren't drawn.
+ * The chains that lead on from an opened circle (Blake, 2026-10-02: "once they
+ * are clicked on and can view the cluster i want any scanned d2,3,4 or whatever
+ * to be show inside with lines out of the d1 leading to the d2s").
  *
- * @param {{ angle: number, slot: number, count: number }[]} anchors
- * @returns {({ points: { x: number, y: number }[], more: number } | null)[]}
+ * `parents[i]` is the index of the link that introduced link i, or -1 when the
+ * person in the middle did. The links one step on sit on a ring at `from`, each
+ * as near its own angle in `angles` as it can get (where that person's dot is
+ * in the circle), or fanned about `toward` without one; each later step sits `hop` further out,
+ * as near the angle of the link it came from as it can get without touching a
+ * neighbour on its own ring (`spacing` apart). So a chain reads outwards from
+ * the middle: the bridge, someone met through them, someone met through *them*.
+ *
+ * @param {number[]} parents
+ * @returns {{ rings: { radius: number, count: number, depth: number }[],
+ *   points: { x: number, y: number, angle: number, radius: number, depth: number, parent: number }[] }}
  */
-export function outerFans(anchors, { from, spacing = 7, cap = 40, total = 1200 } = {}) {
-  const fans = anchors.filter((a) => a?.count > 0).length;
-  const each = Math.max(6, Math.min(cap, Math.floor(total / Math.max(1, fans))));
-  return anchors.map((a) => {
-    if (!(a?.count > 0)) return null;
-    const n = Math.min(a.count, each);
-    // Only as wide as the dots need at `spacing`, never wider than their slot:
-    // more rows once it's full, so a small fan stays a tight cluster.
-    const room = Math.min(a.slot || TAU, TAU / 6);
-    const width = Math.min(room, Math.max((spacing * 3) / from, (n * spacing) / from));
-    const l = ringLayout(n, {
-      inner: from, outer: Infinity, spacing, minSpacing: spacing, start: a.angle - width / 2, sweep: width,
+export function chainTree(parents = [], { from = 0, hop = 60, spacing = 46, toward = 0, angles = [] } = {}) {
+  const n = parents.length;
+  const parent = parents.map((p, i) => (Number.isInteger(p) && p >= 0 && p < n && p !== i ? p : -1));
+
+  // How many steps out each one is. A loop (it shouldn't happen) is cut where
+  // it closes, so everyone still gets a place.
+  const depth = new Array(n).fill(0);
+  for (let i = 0; i < n; i++) {
+    const trail = [];
+    let k = i;
+    while (k >= 0 && !depth[k] && !trail.includes(k)) { trail.push(k); k = parent[k]; }
+    if (k >= 0 && !depth[k]) { parent[trail[trail.length - 1]] = -1; k = -1; }
+    let d = k >= 0 ? depth[k] + 1 : 1;
+    for (let j = trail.length - 1; j >= 0; j--) depth[trail[j]] = d++;
+  }
+
+  const points = new Array(n);
+  const rings = [];
+  for (let d = 1; d <= Math.max(0, ...depth); d++) {
+    const here = [];
+    for (let i = 0; i < n; i++) if (depth[i] === d) here.push(i);
+    const radius = from + (d - 1) * hop;
+    const placed = spread(here.map((i) => (parent[i] < 0 ? (Number.isFinite(angles[i]) ? angles[i] : toward) : points[parent[i]].angle)),
+      Math.min(spacing / Math.max(1, radius), TAU / here.length));
+    here.forEach((i, j) => {
+      const angle = placed[j];
+      points[i] = { x: radius * Math.cos(angle), y: radius * Math.sin(angle), angle, radius, depth: d, parent: parent[i] };
     });
-    return { points: l.points.map(({ x, y }) => ({ x, y })), more: a.count - n };
+    rings.push({ radius, count: here.length, depth: d });
+  }
+  return { rings, points };
+}
+
+/**
+ * Angles as near the ones asked for as they can be while staying `sep` apart:
+ * neighbours that would touch move apart by the same amount each way, so two
+ * people met through the same person sit either side of them. Comes back in
+ * the order given.
+ */
+function spread(wanted, sep) {
+  const m = wanted.length;
+  if (m < 2) return wanted.slice();
+  const turn = (a) => ((a % TAU) + TAU) % TAU;
+  const order = wanted.map((a, i) => i).sort((i, j) => turn(wanted[i]) - turn(wanted[j]) || i - j);
+  // Start counting just after the widest empty stretch, so no group straddles the join.
+  let cut = 0;
+  let widest = -1;
+  order.forEach((i, k) => {
+    const next = order[(k + 1) % m];
+    const gap = turn(turn(wanted[next]) - turn(wanted[i])) || (m > 1 && k === m - 1 ? TAU : 0);
+    if (gap > widest) { widest = gap; cut = (k + 1) % m; }
   });
+  const seq = order.slice(cut).concat(order.slice(0, cut));
+  const first = turn(wanted[seq[0]]);
+  const at = seq.map((i) => first + turn(turn(wanted[i]) - first));
+
+  // Least movement that keeps them `sep` apart: take the spacing out, pool any
+  // neighbours left out of order to their average, put the spacing back.
+  const blocks = [];
+  at.forEach((a, k) => {
+    blocks.push({ sum: a - k * sep, count: 1 });
+    while (blocks.length > 1 && blocks[blocks.length - 2].sum / blocks[blocks.length - 2].count > blocks[blocks.length - 1].sum / blocks[blocks.length - 1].count) {
+      const last = blocks.pop();
+      blocks[blocks.length - 1].sum += last.sum;
+      blocks[blocks.length - 1].count += last.count;
+    }
+  });
+  let placed = blocks.flatMap((b) => new Array(b.count).fill(b.sum / b.count)).map((q, k) => q + k * sep);
+  // Round the join too: if the last has come back round onto the first, share the ring evenly.
+  if (placed[m - 1] - placed[0] > TAU - sep) {
+    const mid = (placed[0] + placed[m - 1]) / 2;
+    placed = placed.map((_, k) => mid + (k - (m - 1) / 2) * (TAU / m));
+  }
+  const out = new Array(m);
+  seq.forEach((i, k) => { out[i] = placed[k]; });
+  return out;
 }

package/.next/standalone/lib/degrees.js

@@ -22,9 +22,3 @@ export function peopleByDegree(degree1 = [], degree2 = [], degree3 = []) {
   };
   return { 1: take(degree1, 1), 2: take(degree2, 2), 3: take(degree3, 3) };
 }
-
-export function tierCountsOf(rows = []) {
-  const counts = {};
-  for (const row of rows) counts[row.tier] = (counts[row.tier] || 0) + 1;
-  return counts;
-}

package/.next/standalone/lib/dot-rings.js

@@ -18,4 +18,29 @@ export function ringSegments(r) {
   });
 }
 
+/**
+ * The ring round a bridge in Bridge Chains (Blake, 2026-10-02: "the bars on the
+ * ring should signify how many dots in the clusters are ready to be scanned
+ * and new clusters formed"). One bar for each person you added through that
+ * circle: the ones scanned since, with a cluster of their own (`formed`),
+ * then the ones waiting for a scan (`ready`). Past `max` bars the two kinds
+ * share them in proportion, each keeping at least one.
+ *
+ * @returns {{ d: string, kind: 'formed' | 'ready' }[]}
+ */
+export function reachSegments(r, { formed = 0, ready = 0 } = {}, max = 12) {
+  const total = Math.max(0, formed) + Math.max(0, ready);
+  if (!total) return [];
+  const n = Math.min(total, max);
+  let nFormed = formed > 0 ? Math.max(1, Math.round((n * formed) / total)) : 0;
+  if (ready > 0 && nFormed >= n) nFormed = n - 1;
+  const gap = n === 1 ? 0.5 : Math.min(GAP, ((2 * Math.PI) / n) * 0.35);
+  const span = (2 * Math.PI) / n - gap;
+  const p = (a) => `${(r * Math.cos(a)).toFixed(2)} ${(r * Math.sin(a)).toFixed(2)}`;
+  return Array.from({ length: n }, (_, i) => {
+    const a0 = -Math.PI / 2 + gap / 2 + i * (span + gap);
+    return { kind: i < nFormed ? 'formed' : 'ready', d: `M${p(a0)} A${r} ${r} 0 ${span > Math.PI ? 1 : 0} 1 ${p(a0 + span)}` };
+  });
+}
+
 export const RING = { filled: '#1abc9c', empty: 'rgba(255,255,255,0.16)', badge: '#7F77DD' };