six-degrees 0.4.10 → 0.5.0

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

@@ -19,21 +19,24 @@
 //   circle fills in as the scanner saves (app/page.js, NetworkRefresh). A dot
 //   ready for a scan goes to the Scan page with them picked instead: their
 //   circle is empty until it's scanned.
-// - People you reached through a circle are marked by lib/reach.js: a soft
-//   breathing halo when their own circle is ready for a scan (still, with
-//   Reduce Motion on), greyed with a lock when their list is hidden. Each
-//   bridge says how many are ready. The glow this replaced looked for them
-//   inside the circle they came from, and accepting takes them out of it
-//   (lib/promote.js), so it never showed. Backlog 2.4.
+// - Chains are drawn inside 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").
+//   Anyone you met through this circle whose own circle has been scanned sits
+//   outside the tier bands with their cluster round them and a line from the
+//   person in the middle; anyone met through *their* circle sits a step beyond,
+//   and so on (lib/chain-layout.js chainTree). They aren't bridges on the
+//   overview: that shows the people you connected with yourself, and says how
+//   many chains lead on from each.
 
 import { useState, useRef, useEffect, useMemo, useSyncExternalStore } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { circleIndex } from '../../lib/circle';
+import { circleIndex, MAX_DEGREE } from '../../lib/circle';
 import { localPhoto } from '../../lib/photos';
 import { reachIndex, reachState, circleState, readyByCircle, circleScanCost, scanBars } from '../../lib/reach';
-import { ringSegments, RING } from '../../lib/dot-rings';
-import { ringLayout, dotRadius, previewBand, tierBandLayout, outerFans } from '../../lib/chain-layout';
+import { reachSegments, RING } from '../../lib/dot-rings';
+import { ringLayout, chainTree, dotRadius, previewBand, tierBandLayout } from '../../lib/chain-layout';
 import { redundancy } from '../../lib/brokerage';
 import { keyFor, score } from '../../lib/separation';
 import { hasRequest } from '../../lib/requests-client';
@@ -89,6 +92,30 @@ function membersOf(person, index) {
   return [...take(index.introduced.get(person.id)), ...take(index.circles.get(person.id))];
 }
 
+/**
+ * The chains that lead on from `person`: everyone you met through their circle
+ * whose own circle has been scanned, then the same from each of those, biggest
+ * circle first. `parent` is an index into the list, or -1 for `person`; `step`
+ * is how many links out. Nobody already on the trail, nobody twice.
+ */
+function chainsFrom(person, index, skip = [], maxStep = MAX_DEGREE) {
+  const out = [];
+  const seen = new Set([person.id, ...skip]);
+  const size = (row) => (index.circles.get(row.id)?.length || 0) + (index.introduced.get(row.id)?.length || 0);
+  const walk = (from, parent, step) => {
+    if (step > maxStep) return;
+    const next = (index.introduced.get(from.id) || []).filter((row) => size(row) > 0 && !seen.has(row.id))
+      .sort((a, b) => size(b) - size(a) || String(a.name || '').localeCompare(String(b.name || '')));
+    next.forEach((row) => seen.add(row.id));
+    for (const row of next) {
+      out.push({ row, parent, step });
+      walk(row, out.length - 1, step + 1);
+    }
+  };
+  walk(person, -1, 1);
+  return out;
+}
+
 /** The trail to open for a link: the circle they came from, then them. */
 function trailTo(id, rows) {
   if (!id) return [];
@@ -98,10 +125,11 @@ function trailTo(id, rows) {
   return from != null && rows.some((r) => r.id === from) ? [from, id] : [id];
 }
 
-export default function ChainView({ connections, degree2 = [], onSelect, userName, fullDegree1, fullDegree2, scanNotes, canScan = true, chainOpen = null, onChainOpened }) {
+export default function ChainView({ connections, degree2 = [], onSelect, userName, fullDegree1, fullDegree2, scanNotes, canScan = true, chainOpen = null, onChainOpened, onCircle }) {
   const containerRef = useRef(null);
   const [hovered, setHovered] = useState(null);
-  const [zoom, setZoom] = useState(1.3);
+  // The overview's zoom: null until it's changed, which means "fit" (homeZoom below).
+  const [zoomSet, setZoom] = useState(null);
   const [dims, setDims] = useState({ w: 800, h: 600 });
   // Every row, whatever the tier filter: a circle opened from a bridge the
   // filter shows is drawn whole, and so is anyone's circle opened from it.
@@ -162,6 +190,10 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
     trail.push(row);
   }
   const focused = trail.length > 0;
+  // Whose circle is open, for the right panel (page.js → Sidebar → CirclePanel).
+  const inCircle = trail.length ? trail[trail.length - 1] : null;
+  useEffect(() => { onCircle?.(inCircle); }, [inCircle, onCircle]);
+  useEffect(() => () => onCircle?.(null), [onCircle]);
 
   // Esc goes back one circle, unless it's closing something else (the card's
   // large map) or leaving a text box.
@@ -191,14 +223,39 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   const cy = dims.h / 2;
   const maxR = Math.min(cx, cy) - 30;
 
-  // Bridges round you: one ring while they fit, more once there are many.
-  const bridgeLayout = ringLayout(bridges.length, {
-    inner: maxR * 0.55, innerMin: maxR * 0.4, outer: maxR * 0.62, spacing: 46, minSpacing: 20,
+  // Someone met through another bridge's circle isn't a bridge of their own
+  // here: they're a link in that bridge's chain, shown inside its circle.
+  const withCircle = new Set(bridges.map((b) => b.id));
+  const chained = new Map();
+  for (const b of bridges) {
+    if (withCircle.has(b.unlocked_from_bridge_id)) chained.set(b.unlocked_from_bridge_id, (chained.get(b.unlocked_from_bridge_id) || 0) + 1);
+  }
+  // (A loop in who-introduced-whom shouldn't happen; if one does, they all stay here.)
+  const bridgeById = new Map(bridges.map((b) => [b.id, b]));
+  const linked = (b) => {
+    const seen = new Set([b.id]);
+    for (let from = b.unlocked_from_bridge_id; withCircle.has(from); from = bridgeById.get(from).unlocked_from_bridge_id) {
+      if (seen.has(from)) return false;
+      seen.add(from);
+    }
+    return withCircle.has(b.unlocked_from_bridge_id);
+  };
+  const roots = bridges.filter((b) => !linked(b));
+  // Bridges round you: one ring while they fit, more once there are many, each
+  // ring far enough from the last for the names under it.
+  const bridgeLayout = ringLayout(roots.length, {
+    inner: maxR * 0.55, innerMin: maxR * 0.4, outer: maxR * 0.62, spacing: 46, minSpacing: 20, ringGap: 62,
   });
-  const bridgePos = bridges.map((b, i) => {
+  const bridgePos = roots.map((b, i) => {
     const p = bridgeLayout.points[i];
-    return { ...b, x: cx + p.x, y: cy + p.y, angle: p.angle, clusterSize: (bridgeMap[b.id] || []).length };
+    return { ...b, x: cx + p.x, y: cy + p.y, angle: p.angle, clusterSize: (bridgeMap[b.id] || []).length, chains: chained.get(b.id) || 0 };
   });
+  // More than one ring: the counts under each name wait for a hover.
+  const crowded = bridgeLayout.rings.length > 1;
+  // Where a hovered circle is previewed, and the zoom at which that still fits the window.
+  const band = previewBand(maxR, bridgeLayout.rings);
+  const homeZoom = Math.max(0.6, Math.min(1.3, Math.min(cx, cy) / (band.outer + 8)));
+  const zoom = zoomSet ?? homeZoom;
 
   // Touch rotary dial on the overview: drag a finger round the circle to pick a bridge.
   const bridgeAnglesRef = useRef([]);
@@ -257,7 +314,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
           key={trail.map((r) => r.id).join('>')}
           trail={trail} index={index} reach={reach} dims={dims} requests={requests}
           scanningId={scanningId} still={still} canScan={canScan}
-          onOpen={(id) => setPath(trail.map((r) => r.id).concat(id))}
+          onOpen={(ids) => setPath(trail.map((r) => r.id).concat(ids))}
           onBack={(depth) => setPath(trail.slice(0, depth).map((r) => r.id))}
           onSelect={onSelect}
         />
@@ -275,13 +332,15 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
     <div ref={containerRef} style={{ flex: 1, background: '#0a0a1a', position: 'relative', overflow: 'hidden' }}>
       <svg width={dims.w} height={dims.h}>
       <g transform={`translate(${cx * (1 - zoom)}, ${cy * (1 - zoom)}) scale(${zoom})`}>
-        {/* Ring guide */}
-        <circle cx={cx} cy={cy} r={maxR * 0.55} fill="none" stroke={`${DEGREE_COLORS[1]}10`} strokeWidth={1} />
+        {/* A guide line for every ring of bridges */}
+        {bridgeLayout.rings.map((ring) => (
+          <circle key={'ring-' + ring.radius} cx={cx} cy={cy} r={ring.radius} fill="none" stroke={`${DEGREE_COLORS[1]}10`} strokeWidth={1} />
+        ))}
 
         {/* Their circle, previewed on hover, in a wedge that grows rows as it fills */}
         {hovBridge && (
           <CirclePreview bridge={hovBridge} members={membersOf(hovBridge, index)} reach={reach}
-            cx={cx} cy={cy} maxR={maxR} still={still} band={previewBand(maxR, bridgeLayout.rings)} />
+            cx={cx} cy={cy} maxR={maxR} still={still} band={band} />
         )}
 
         {/* Bridge nodes — hover to preview their circle, click to open it */}
@@ -296,24 +355,21 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
               onMouseEnter={() => setHovered(b.id)}
               onMouseLeave={() => setHovered(null)}
               style={{ cursor: 'pointer' }}>
+              <title>{bridgeTitle(b, ready, scanBars(b, reach))}</title>
               {/* Glow */}
-              <circle cx={b.x} cy={b.y} r={isHov ? 20 : 16}
-                fill={`${TIER_COLORS[b.tier]}08`}
-                stroke={`${TIER_COLORS[b.tier]}${isHov ? '60' : '25'}`} strokeWidth={1} />
-              {/* How much of their circle is scanned: five thin bars (design C) */}
-              {(() => {
-                const bars = scanBars(b, reach);
-                if (bars == null) return null;
-                return (
-                  <g transform={`translate(${b.x} ${b.y})`} pointerEvents="none">
-                    {ringSegments((isHov ? 20 : 16) + 3.5).map((seg) => (
-                      <path key={seg.i} d={seg.d} fill="none" strokeLinecap="round" strokeWidth={1.6}
-                        stroke={seg.i < bars ? RING.filled : RING.empty} />
-                    ))}
-                    <title>{bars === 5 ? 'Their whole list is scanned' : `About ${bars * 20}% of their list is scanned`}</title>
-                  </g>
-                );
-              })()}
+              <circle cx={b.x} cy={b.y} r={isHov ? 21 : 18} fill={`${TIER_COLORS[b.tier]}${isHov ? '14' : '08'}`} />
+              {/* The ring, tight on the dot: one bar for each person you added through
+                  this circle. Orange: scanned since, with a cluster of their own.
+                  Green: ready for a scan. Nobody yet: one faint line. */}
+              <g transform={`translate(${b.x} ${b.y})`} pointerEvents="none">
+                {b.chains + ready === 0 && (
+                  <circle r={(isHov ? 13 : 11) + 3.6} fill="none" stroke={RING.empty} strokeWidth={1} />
+                )}
+                {reachSegments((isHov ? 13 : 11) + 3.6, { formed: b.chains, ready }).map((seg, i) => (
+                  <path key={i} d={seg.d} fill="none" strokeLinecap="round" strokeWidth={2}
+                    stroke={seg.kind === 'ready' ? GREEN : DEGREE_COLORS[2]} />
+                ))}
+              </g>
               {/* Node */}
               <circle cx={b.x} cy={b.y} r={isHov ? 13 : 11}
                 fill={localPhoto(b.profile_image_url) ? '#1a1a2e' : TIER_COLORS[b.tier]}
@@ -331,24 +387,22 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
                 <text x={b.x} y={b.y + 4} textAnchor="middle" fill={b.tier === 'S' ? '#000' : '#fff'}
                   fontSize={11} fontWeight={700}>{b.name?.charAt(0)}</text>
               )}
-              {/* People you reached through their circle, ready for a scan of their own */}
+              {/* How many in their circle are waiting for a scan: a small outlined number, top right */}
               {ready > 0 && (
-                <g>
-                  <title>{`${ready} you reached through ${firstName(b)}’s circle ${ready === 1 ? 'is' : 'are'} ready for a scan`}</title>
-                  <rect x={b.x + 7} y={b.y - 21} width={ready > 9 ? 40 : 34} height={11} rx={5.5}
-                    fill="rgba(0,255,136,0.16)" stroke={GREEN} strokeWidth={0.6} />
-                  <text x={b.x + 7 + (ready > 9 ? 20 : 17)} y={b.y - 13} textAnchor="middle" fill={GREEN} fontSize={7} fontWeight={800}>
-                    {ready} ready
-                  </text>
+                <g pointerEvents="none">
+                  <circle cx={b.x + 14} cy={b.y - 14} r={6} fill="#0a0a1a" stroke={GREEN} strokeWidth={1.2} />
+                  <text x={b.x + 14} y={b.y - 11.4} textAnchor="middle" fill={GREEN} fontSize={ready > 9 ? 6 : 7} fontWeight={800}>{ready > 99 ? '99+' : ready}</text>
                 </g>
               )}
               {/* Name + count */}
               <text x={b.x} y={b.y + (isHov ? 24 : 22)} textAnchor="middle" fill="#fff" fontSize={9} fontWeight={600}>
                 {b.name?.split(' ')[0]}
               </text>
-              <text x={b.x} y={b.y + (isHov ? 34 : 32)} textAnchor="middle" fill="#888" fontSize={7}>
-                {b.clusterSize} · {sCount > 0 ? sCount + 'S ' : ''}{aCount > 0 ? aCount + 'A' : ''}
-              </text>
+              {(!crowded || isHov) && (
+                <text x={b.x} y={b.y + (isHov ? 34 : 32)} textAnchor="middle" fill={isHov ? '#bbb' : '#888'} fontSize={7}>
+                  {b.clusterSize} · {sCount > 0 ? sCount + 'S ' : ''}{aCount > 0 ? aCount + 'A' : ''}
+                </text>
+              )}
             </g>
           );
         })}
@@ -363,9 +417,9 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
 
       {/* Zoom controls, clear of the Galaxy switch below them */}
       <ZoomButtons
-        onIn={() => setZoom(z => Math.min(3, z + 0.3))}
-        onReset={() => setZoom(1.3)}
-        onOut={() => setZoom(z => Math.max(0.4, z - 0.3))}
+        onIn={() => setZoom(z => Math.min(3, (z ?? homeZoom) + 0.3))}
+        onReset={() => setZoom(null)}
+        onOut={() => setZoom(z => Math.max(0.4, (z ?? homeZoom) - 0.3))}
       />
 
       {/* Depth tracker */}
@@ -394,7 +448,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
           ))}
         </div>
         <div style={{ fontSize: 9, color: '#555', marginTop: 8 }}>
-          {bridges.length} bridges · {d2S} S + {d2A} A at 2nd degree
+          {roots.length} bridges{bridges.length > roots.length ? ` + ${bridges.length - roots.length} along their chains` : ''} · {d2S} S + {d2A} A at 2nd degree
         </div>
         {twoWays > 0 && (
           <div style={{ fontSize: 9, color: '#555', marginTop: 4 }}
@@ -408,6 +462,15 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   );
 }
 
+/** What a bridge's ring and number mean, in words, for its tooltip. */
+function bridgeTitle(b, ready, bars) {
+  const parts = [];
+  if (ready) parts.push(`${ready} in ${firstName(b)}’s circle ${ready === 1 ? 'is' : 'are'} ready for a scan`);
+  if (b.chains) parts.push(`${b.chains} scanned since, with ${b.chains === 1 ? 'a cluster' : 'clusters'} of their own`);
+  if (bars != null) parts.push(bars === 5 ? 'their whole list is scanned' : `about ${bars * 20}% of their list is scanned`);
+  return parts.length ? parts.join(' · ') : `${firstName(b)}’s circle`;
+}
+
 /** A bridge's circle on hover: the people you reached through it first, then their S, A and B. */
 function CirclePreview({ bridge, members, reach, cx, cy, maxR, still, band }) {
   const shown = members.filter((m) => m.degree === 1 || m.tier === 'S' || m.tier === 'A' || m.tier === 'B');
@@ -494,8 +557,17 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
   const person = trail[trail.length - 1];
   const depth = trail.length;               // the person's degree along the chain: a bridge is 1
   const members = useMemo(() => membersOf(person, index), [person, index]);
-  const [hover, setHover] = useState(null); // a member's index, 'center', or null
-  const [view, setView] = useState({ k: 1, x: 0, y: 0 });
+  // The chains that lead on from here. Each link stays a dot in the circle it
+  // was met through; the cluster their scan formed sits outside, joined to
+  // that dot, so you can see where each path came from.
+  const trailKey = trail.map((r) => r.id).join('>');
+  const links = useMemo(
+    () => chainsFrom(person, index, trailKey.split('>'), Math.max(0, MAX_DEGREE - 1 - depth)),
+    [person, index, trailKey, depth],
+  );
+  const [hover, setHover] = useState(null); // a member's index, 'center', 'L' + a link's index, or null
+  // null until it's moved or zoomed: the fit worked out below.
+  const [viewSet, setViewSet] = useState(null);
   const drag = useRef(null);
   const svgRef = useRef(null);
   const router = useRouter();
@@ -503,25 +575,74 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
   const cx = dims.w / 2;
   const cy = dims.h / 2;
   const maxR = Math.min(cx, cy) - 30;
-  // Whose own circle is known, drawn behind them (their people, one degree
-  // further out): anyone you're connected to whose circle was scanned, or who
-  // introduced you to someone.
-  const behind = useMemo(() => members.map((row) => (row.degree === 1 ? membersOf(row, index) : [])), [members, index]);
-  const hasFans = behind.some((people) => people.length > 0);
-  // Tier bands round them, S nearest, like Network Circle's orbits; with fans
+  // Chains fan out to the side on a wide window, below on a tall one; the people
+  // you added sit on that side of the circle, so each line is short.
+  const toward = dims.w >= dims.h ? 0 : Math.PI / 2;
+  const hasChains = links.length > 0;
+  // Tier bands round them, S nearest, like Network Circle's orbits; with chains
   // to draw, the bands leave the outside of the circle for them.
   const layout = useMemo(() => tierBandLayout(members, {
-    inner: Math.max(62, maxR * 0.3), outer: maxR * (hasFans ? 0.72 : 0.94),
+    inner: Math.max(62, maxR * 0.3), outer: maxR * (hasChains ? 0.72 : 0.94),
     spacing: Math.max(14, Math.min(24, maxR * 0.085)), minSpacing: 4, gap: Math.max(10, maxR * 0.04),
-  }), [members, maxR, hasFans]);
-  const fans = useMemo(() => {
-    if (!hasFans) return [];
-    const placed = outerFans(
-      members.map((row, i) => ({ angle: layout.points[i].angle, slot: layout.points[i].slot, count: behind[i].length })),
-      { from: layout.edge + layout.spacing * 1.5 },
-    );
-    return placed.map((f, i) => f && { ...f, i, people: behind[i].slice(0, f.points.length) }).filter(Boolean);
-  }, [members, behind, hasFans, layout]);
+    start: hasChains ? toward : -Math.PI / 2,
+  }), [members, maxR, hasChains, toward]);
+
+  // Each link's people (anyone met through their circle first, so the next
+  // links of the chain are among the dots drawn) and the disc they need. The
+  // same size of dot for all of them, so a bigger circle is a bigger disc.
+  const sizes = useMemo(() => links.map(({ row }) => {
+    const people = membersOf(row, index);
+    const l = ringLayout(Math.min(people.length, LINK_DOTS), CLUSTER);
+    return { people, radius: (l.rings[l.rings.length - 1]?.radius || LINK_INNER) + 6 };
+  }), [links, index]);
+  // Where each cluster sits: straight out from its person's dot in the circle;
+  // further along a chain, straight out from the cluster before.
+  const tree = useMemo(() => {
+    if (!links.length) return null;
+    const widest = Math.max(...sizes.map((c) => c.radius));
+    const at = new Map(members.map((row, i) => [row.id, i]));
+    return chainTree(links.map((l) => l.parent), {
+      from: layout.edge + layout.spacing + widest + 22, hop: widest * 2 + 46, spacing: widest * 2 + 26, toward,
+      angles: links.map((l) => (l.parent < 0 ? layout.points[at.get(l.row.id)]?.angle : undefined)),
+    });
+  }, [links, sizes, members, layout, toward]);
+  // The dots of each cluster, its first ring starting on the side that faces
+  // outwards, where the next link of the chain will be.
+  const clusters = useMemo(() => sizes.map((c, j) => ({
+    ...c,
+    points: ringLayout(Math.min(c.people.length, LINK_DOTS), { ...CLUSTER, start: tree.points[j].angle }).points,
+  })), [sizes, tree]);
+  // The dot each path comes from: the link's own dot, in the big circle or in
+  // the cluster of whoever you met them through. `back` is who that was.
+  const origins = useMemo(() => {
+    const at = new Map(members.map((row, i) => [row.id, i]));
+    return links.map((link) => {
+      if (link.parent < 0) {
+        const p = layout.points[at.get(link.row.id)];
+        return p ? { x: p.x, y: p.y, r: dotRadius(layout.spacing, link.row.tier) * 1.4, back: { x: 0, y: 0, r: 30 } } : { x: 0, y: 0, r: 30, back: null };
+      }
+      const hub = tree.points[link.parent];
+      const i = clusters[link.parent].people.findIndex((row) => row.id === link.row.id);
+      const pt = clusters[link.parent].points[i] || { x: 0, y: 0 };
+      return { x: hub.x + pt.x, y: hub.y + pt.y, r: KID_DOT, inCluster: true, back: { x: hub.x, y: hub.y, r: LINK_HUB } };
+    });
+  }, [links, members, layout, tree, clusters]);
+  // Fit the bands and every chain in the window to start with.
+  const fit = useMemo(() => {
+    if (!tree) return { k: 1, x: 0, y: 0 };
+    const box = { l: -layout.edge, r: layout.edge, t: -layout.edge, b: layout.edge };
+    tree.points.forEach((p, j) => {
+      const r = clusters[j].radius;
+      box.l = Math.min(box.l, p.x - r - 30); box.r = Math.max(box.r, p.x + r + 30);
+      box.t = Math.min(box.t, p.y - r - 8); box.b = Math.max(box.b, p.y + r + 30);
+    });
+    // Room at the top for the trail, and a little at every other edge.
+    const pad = { side: 70, top: 96, bottom: 30 };
+    const k = Math.max(0.35, Math.min(1, (dims.w - pad.side * 2) / (box.r - box.l), (dims.h - pad.top - pad.bottom) / (box.b - box.t)));
+    return { k, x: (-(box.l + box.r) / 2) * k, y: (-(box.t + box.b) / 2) * k + (pad.top - pad.bottom) / 2 };
+  }, [tree, clusters, layout, dims.w, dims.h]);
+  const view = viewSet ?? fit;
+  const setView = (next) => setViewSet((v) => (typeof next === 'function' ? next(v ?? fit) : next));
 
   // What each dot is: someone you reached (ready, hidden, scanned) or a
   // 2nd-degree row, maybe with a request out; and how big their own circle is.
@@ -543,11 +664,14 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
   const dots = useMemo(() => {
     const few = members.length <= 60;
     const roomy = layout.spacing * k >= 26;
+    // The people you added sit side by side, so their names take turns above and below.
+    let named = 0;
     return members.map((row, i) => {
       const p = layout.points[i];
       const f = facts[i];
       const r = dotRadius(layout.spacing, row.tier) * (f.reached ? 1.4 : 1);
       const color = f.reached === 'hidden' ? HIDDEN : TIER_COLORS[row.tier] || '#555';
+      const above = f.reached ? named++ % 2 === 1 : false;
       return (
         <g key={row.id}>
           {(few || f.reached) && (
@@ -567,7 +691,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
             <circle cx={p.x} cy={p.y} r={r * 2} fill="none" stroke={DEGREE_COLORS[3]} strokeWidth={1 / k} strokeDasharray={`${3 / k} ${2 / k}`} />
           )}
           {(f.reached || (roomy && row.tier === 'S')) && (
-            <text x={p.x} y={p.y + r + 10 / k} textAnchor="middle" fontSize={8.5 / k} fontWeight={f.reached ? 700 : 400}
+            <text x={p.x} y={above ? p.y - r - 4 / k : p.y + r + 10 / k} textAnchor="middle" fontSize={8.5 / k} fontWeight={f.reached ? 700 : 400}
               fill={f.reached === 'hidden' ? '#999' : f.reached ? GREEN : '#aaa'} pointerEvents="none"
               stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">
               {firstName(row)}
@@ -586,6 +710,10 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
     const wx = (clientX - rect.left - cx - view.x) / k;
     const wy = (clientY - rect.top - cy - view.y) / k;
     if (Math.hypot(wx, wy) <= 30) return 'center';
+    if (tree) {
+      const j = tree.points.findIndex((p, i) => Math.hypot(p.x - wx, p.y - wy) <= Math.max(16, clusters[i].radius));
+      if (j >= 0) return 'L' + j;
+    }
     const near = Math.max(layout.spacing * 0.6, 10 / k);
     let best = null;
     let bestD = near;
@@ -620,6 +748,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
     if (!d || d.moved) return;
     const hit = hitAt(e.clientX, e.clientY);
     if (hit === 'center') onSelect?.(person);
+    else if (typeof hit === 'string') onOpen(chainTo(Number(hit.slice(1))));
     else if (hit != null && goesToScan(hit)) router.push(scanPageFor(members[hit]));
     else if (hit != null) onOpen(members[hit].id);
   };
@@ -633,6 +762,15 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
     zoomBy(Math.exp(-e.deltaY * 0.0015), { x: e.clientX - rect.left - cx, y: e.clientY - rect.top - cy });
   };
 
+  // From the person in the middle out to link j: the ids to open, nearest first.
+  const chainTo = (j) => {
+    const ids = [];
+    for (let i = j; i >= 0; i = links[i].parent) ids.unshift(links[i].row.id);
+    return ids;
+  };
+  const hovLink = typeof hover === 'string' && hover[0] === 'L' ? Number(hover.slice(1)) : -1;
+  const litLinks = hovLink >= 0 ? new Set(chainTo(hovLink)) : null;
+
   const ready = facts.filter((f) => f.reached === 'ready').length;
   const hidden = facts.filter((f) => f.reached === 'hidden').length;
   const added = facts.filter((f) => f.reached).length;
@@ -659,28 +797,70 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
               stroke={TIER_COLORS[band.tier] || '#555'} strokeOpacity={0.07}
               strokeWidth={Math.max(1 / k, band.outer - band.inner + layout.spacing)} pointerEvents="none" />
           ))}
-          {/* Behind anyone whose circle is known: their people, a faint line to each */}
-          {fans.map((fan) => {
-            const a = layout.points[fan.i];
-            const last = fan.points[fan.points.length - 1];
+          {dots}
+          {/* The chains that lead on from here. Every cluster is the circle of one
+              person you added and then scanned; the line to it starts at that
+              person's own dot, so you can see where the path came from. */}
+          {tree && links.map((link, j) => {
+            const p = tree.points[j];
+            const c = clusters[j];
+            const row = link.row;
+            const lit = litLinks?.has(row.id);
+            const color = DEGREE_COLORS[depth + link.step] || DEGREE_COLORS[6];
             return (
-              <g key={'fan-' + members[fan.i].id} pointerEvents="none">
-                {fan.points.map((p, j) => (
-                  <line key={'l' + j} x1={a.x} y1={a.y} x2={p.x} y2={p.y}
-                    stroke={GREEN} strokeOpacity={0.12} strokeWidth={0.5 / k} />
+              <g key={'lk-' + row.id} transform={`translate(${p.x} ${p.y})`} pointerEvents="none"
+                opacity={litLinks && !lit ? 0.45 : 1}>
+                <circle r={c.radius} fill="#0a0a1a" fillOpacity={0.9} stroke={color} strokeOpacity={lit ? 0.7 : 0.25} strokeWidth={1 / k} />
+                {/* Their people, each joined to the middle of the cluster */}
+                {clusterPaths(c).map(([tier, { spokes }]) => (
+                  <path key={'s' + tier} d={spokes} fill="none" stroke={TIER_COLORS[tier] || '#555'}
+                    strokeWidth={0.7} strokeOpacity={lit ? 0.6 : 0.38} />
                 ))}
-                {fan.points.map((p, j) => (
-                  <circle key={'d' + j} cx={p.x} cy={p.y} r={2.2}
-                    fill={TIER_COLORS[fan.people[j]?.tier] || '#555'} fillOpacity={0.75} />
+                {clusterPaths(c).map(([tier, { dots: d }]) => (
+                  <path key={tier} d={d} fill={TIER_COLORS[tier] || '#555'} fillOpacity={lit ? 1 : 0.9} />
                 ))}
-                {fan.more > 0 && last && (
-                  <text x={last.x * 1.06} y={last.y * 1.06} textAnchor="middle" fontSize={8 / k} fill="#8b9a9a"
-                    stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">+{fan.more.toLocaleString()}</text>
+                <circle r={LINK_HUB} fill={color} stroke={hovLink === j ? '#fff' : '#0a0a1a'} strokeWidth={1.5} />
+                {row.id === scanningId && (
+                  <circle r={c.radius + 4} fill="none" stroke={DEGREE_COLORS[3]} strokeWidth={1 / k} strokeDasharray={`${3 / k} ${2 / k}`} />
+                )}
+                <text y={c.radius + 12 / k} textAnchor="middle" fill="#fff" fontSize={10 / k} fontWeight={700}
+                  stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">{firstName(row)}’s circle</text>
+                <text y={c.radius + 23 / k} textAnchor="middle" fill={color} fontSize={8 / k}
+                  stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">
+                  {c.people.length.toLocaleString('en-US')} · {ordinal(depth + link.step + 1)} degree
+                </text>
+              </g>
+            );
+          })}
+          {/* The paths, on top of the clusters they cross: from whoever you met
+              them through, to their own dot, and on out to the cluster their scan formed. */}
+          {tree && links.map((link, j) => {
+            const o = origins[j];
+            const p = tree.points[j];
+            const lit = litLinks?.has(link.row.id);
+            const color = DEGREE_COLORS[depth + link.step] || DEGREE_COLORS[6];
+            const seg = (a, ra, b, rb, key) => {
+              const len = Math.hypot(b.x - a.x, b.y - a.y);
+              if (len <= ra + rb) return null;
+              const ux = (b.x - a.x) / len;
+              const uy = (b.y - a.y) / len;
+              return (
+                <line key={key} x1={a.x + ux * ra} y1={a.y + uy * ra} x2={b.x - ux * rb} y2={b.y - uy * rb}
+                  stroke={color} strokeLinecap="round" strokeWidth={(lit ? 2.6 : 1.8) / k}
+                  strokeOpacity={litLinks && !lit ? 0.3 : lit ? 1 : 0.85} />
+              );
+            };
+            return (
+              <g key={'ln-' + link.row.id} pointerEvents="none">
+                {o.back && seg(o.back, o.back.r, o, o.r + 1, 'a')}
+                {seg(o, o.r + 1, p, LINK_HUB + 1, 'b')}
+                {/* Their own dot inside the cluster they were met through */}
+                {o.inCluster && (
+                  <circle cx={o.x} cy={o.y} r={o.r} fill={TIER_COLORS[link.row.tier] || '#555'} stroke={GREEN} strokeWidth={1.4} />
                 )}
               </g>
             );
           })}
-          {dots}
           {/* The one under the pointer, on top */}
           {hp && (
             <>
@@ -708,14 +888,23 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           <Tip x={cx + view.x + hp.x * k} y={cy + view.y + hp.y * k} w={dims.w}
             lines={tipFor(hovered, facts[hover], scanningId, depth, goesToScan(hover))} accent={facts[hover].reached ? GREEN : TIER_COLORS[hovered.tier]} />
         )}
+        {hovLink >= 0 && (
+          <Tip x={cx + view.x + tree.points[hovLink].x * k} y={cy + view.y + (tree.points[hovLink].y - clusters[hovLink].radius) * k} w={dims.w}
+            lines={[`${links[hovLink].row.name}’s circle`,
+              `${clusters[hovLink].people.length.toLocaleString('en-US')} people · ${ordinal(depth + links[hovLink].step + 1)} degree`,
+              `You met ${firstName(links[hovLink].row)} through ${firstName(links[hovLink].parent >= 0 ? links[links[hovLink].parent].row : person)}’s circle, then scanned`,
+              'Click to open it']}
+            accent={DEGREE_COLORS[depth + links[hovLink].step] || DEGREE_COLORS[6]} />
+        )}
         {hover === 'center' && (
           <Tip x={cx + view.x} y={cy + view.y - 28 * k} w={dims.w} lines={[person.name, 'Open their card']} accent={TIER_COLORS[person.tier]} />
         )}
       </svg>
 
       {/* The way back: one circle at a time, or straight to any on the trail.
-          Clear of the Filters tab at the left edge. */}
-      <div style={{ position: 'absolute', top: 14, left: 64, right: 64, pointerEvents: 'none', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
+          Clear of the Filters tab at the left edge, and under the notch that
+          holds the view buttons at the top of the map. */}
+      <div style={{ position: 'absolute', top: 54, left: 64, right: 64, pointerEvents: 'none', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', pointerEvents: 'auto' }}>
           <button type="button" onClick={() => onBack(depth - 1)} style={{
             padding: '8px 16px', borderRadius: 8, border: 'none', cursor: 'pointer',
@@ -778,11 +967,36 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
         </div>
       )}
 
-      <ZoomButtons onIn={() => zoomBy(1.35)} onReset={() => setView({ k: 1, x: 0, y: 0 })} onOut={() => zoomBy(1 / 1.35)} />
+      <ZoomButtons onIn={() => zoomBy(1.35)} onReset={() => setViewSet(null)} onOut={() => zoomBy(1 / 1.35)} />
     </>
   );
 }
 
+// A link's cluster draws at most this many of their people; the count beside it is the whole circle.
+const LINK_DOTS = 290;
+// The middle of a cluster, where its first ring starts, and a link's own dot inside one.
+const LINK_HUB = 5;
+const LINK_INNER = 15;
+const KID_DOT = 4.6;
+const CLUSTER = { inner: LINK_INNER, outer: Infinity, spacing: 7.5, minSpacing: 7.5 };
+
+/**
+ * A cluster as two paths per tier, however many people: the dots, and a line
+ * from the middle of the cluster out to each of them.
+ */
+function clusterPaths(cluster) {
+  const paths = {};
+  cluster.points.forEach((pt, i) => {
+    const tier = cluster.people[i]?.tier || 'D';
+    const q = tier === 'S' ? 3.1 : tier === 'A' ? 2.8 : 2.5;
+    const len = Math.hypot(pt.x, pt.y) || 1;
+    const at = (paths[tier] ||= { dots: '', spokes: '' });
+    at.dots += `M${(pt.x - q).toFixed(1)},${pt.y.toFixed(1)}a${q},${q} 0 1,0 ${2 * q},0a${q},${q} 0 1,0 ${-2 * q},0`;
+    at.spokes += `M${((pt.x / len) * LINK_HUB).toFixed(1)},${((pt.y / len) * LINK_HUB).toFixed(1)}L${pt.x.toFixed(1)},${pt.y.toFixed(1)}`;
+  });
+  return Object.entries(paths);
+}
+
 /** The lines of a dot's tooltip. `toScan`: a click goes to the Scan page with them picked. */
 function tipFor(row, f, scanningId, depth, toScan) {
   const first = firstName(row);