six-degrees 0.4.0 → 0.4.2

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

@@ -1,9 +1,11 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { localPhoto } from '../../lib/photos';
 import { recentre } from '../../lib/galaxy';
+import { reachIndex, readyByCircle, scanBars } from '../../lib/reach';
+import { ringSegments, RING } from '../../lib/dot-rings';
 
 // Connection fields are attacker-reachable: /api/ingest and /api/update-images
 // accept writes, and a page on any other site can POST to this app on localhost.
@@ -57,7 +59,21 @@ const RING_CSS = `
   .galaxy-ring-pulse { animation: none; opacity: 0.8; }
 }`;
 
-export default function ForceGraph({ connections, onSelect, tierColors, focusNodeRef, userName, selectedId = null }) {
+export default function ForceGraph({ connections, onSelect, tierColors, focusNodeRef, userName, selectedId = null, scanNotes, fullDegree1, fullDegree2 }) {
+  // The ring round a connection's dot (design C): how much of their circle is
+  // scanned, and how many in it are ready to scan (lib/reach.js).
+  const marks = useMemo(() => {
+    const reach = reachIndex(fullDegree1 || connections, fullDegree2 || [], scanNotes || {});
+    const ready = readyByCircle(reach);
+    const out = new Map();
+    for (const c of connections) {
+      if ((c.degree || 1) !== 1) continue;
+      const bars = scanBars(c, reach);
+      const r = ready.get(c.id) || 0;
+      if (bars != null || r) out.set(c.id, { bars, ready: r });
+    }
+    return out;
+  }, [connections, fullDegree1, fullDegree2, scanNotes]);
   const svgRef = useRef(null);
   const ringRef = useRef(null);
   const sceneRef = useRef(null);  // The scene on screen: { resize, select }
@@ -123,7 +139,7 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     const saved = transform ? recentre(transform, setFor, size) : null;
 
     const select = (d) => onSelectRef.current?.(d);
-    const scene = renderNetworkMode(svg, ringRef.current, size, connections, select, tierColors, focusNodeRef, saved, viewRef, userName);
+    const scene = renderNetworkMode(svg, ringRef.current, size, connections, select, tierColors, focusNodeRef, saved, viewRef, userName, marks);
     sceneRef.current = scene;
     scene.select(selectedIdRef.current);
 
@@ -145,7 +161,7 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     // why onSelect is not a dependency. The size is read through sizeRef: a new
     // size re-fits the view rather than rebuilding.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connections, tierColors, measured]);
+  }, [connections, tierColors, measured, marks]);
 
   return (
     <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
@@ -200,14 +216,15 @@ function easeRadius(el, r) {
 // Graph coordinates put you at 0,0, whatever the size of the box; the zoom
 // transform places that in the box. So a new size only moves the view, and a
 // rebuild can start from the view as it was.
-function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, focusNodeRef, savedTransform, viewRef, userName) {
+function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, focusNodeRef, savedTransform, viewRef, userName, marks = new Map()) {
   const centerNode = {
     id: CENTER_ID, name: userName || 'You', tier: 'center', degree: 0,
     power_score: 10, fx: 0, fy: 0,
   };
 
   const nodes = [centerNode, ...connections.map(c => ({
-    id: c.id, name: c.name, tier: c.tier, degree: 1,
+    id: c.id, name: c.name, tier: c.tier, degree: c.degree || 1, source_connection_id: c.source_connection_id,
+    unlocked_from_bridge_id: c.unlocked_from_bridge_id,
     power_score: parseFloat(c.power_score) || 1,
     company: c.company, role: c.role, headline: c.headline,
     profile_url: c.profile_url, profile_image_url: localPhoto(c.profile_image_url),
@@ -219,15 +236,59 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   }))];
   const nodeById = new Map(nodes.map(n => [n.id, n]));
 
-  const links = connections.map(c => ({ source: CENTER_ID, target: c.id }));
+  // Who hangs off whom. Your connections hang off you; someone in a circle off
+  // the connection whose circle it is, when that one is drawn too; and with
+  // more than your connections drawn (Filter → Degree), someone you added
+  // through a circle off the one they came from, so a chain reads as a chain.
+  const drawnD1 = new Set(connections.filter(c => (c.degree || 1) === 1).map(c => c.id));
+  const multi = connections.some(c => (c.degree || 1) > 1);
+  const parentOf = new Map();
+  for (const n of nodes) {
+    if (n.id === CENTER_ID) continue;
+    const from = n.unlocked_from_bridge_id;
+    if (n.degree === 1 && multi && from != null && from !== n.id && drawnD1.has(from)) parentOf.set(n.id, from);
+    else if (n.degree === 2 && drawnD1.has(n.source_connection_id)) parentOf.set(n.id, n.source_connection_id);
+  }
+  // How far along the chain: 1 for your connections, one more past each person
+  // you came through, to 6.
+  const bandMemo = new Map();
+  const bandOf = (n, seen = new Set()) => {
+    if (n.id === CENTER_ID) return 0;
+    if (bandMemo.has(n.id)) return bandMemo.get(n.id);
+    const p = parentOf.get(n.id);
+    let b = n.degree >= 3 ? 3 : n.degree;
+    if (p != null && !seen.has(n.id)) { seen.add(n.id); b = bandOf(nodeById.get(p), seen) + 1; }
+    b = Math.min(b, 6);
+    bandMemo.set(n.id, b);
+    return b;
+  };
+  const links = connections.map(c => {
+    const via = parentOf.get(c.id) ?? CENTER_ID;
+    return { source: via, target: c.id, near: via !== CENTER_ID };
+  });
 
   const tierRadius = (tier) => {
     switch (tier) { case 'S': return 150; case 'A': return 250; case 'B': return 350; case 'C': return 450; default: return 520; }
   };
+  // More than one band drawn: a band for each step along the chain, the first
+  // (your connections) a tighter ring, each sorted by tier with S nearest, close
+  // enough to read as layers and far enough apart not to clump. One band alone
+  // keeps the roomier tier rings.
+  const TIERS = ['S', 'A', 'B', 'C', 'D'];
+  const SLOTS = [[115, 135, 155, 175, 192], [265, 300, 335, 370, 398], [465, 500, 535, 565, 590], [660, 690, 720, 745, 765]];
+  const bands = [...new Set(nodes.filter(n => n.id !== CENTER_ID).map(n => bandOf(n)))].sort((a, b) => a - b);
+  const layered = multi && bands.length > 1;
+  const radiusOf = (d) => {
+    if (!layered) return tierRadius(d.tier);
+    const slot = Math.min(bands.indexOf(bandOf(d)), SLOTS.length - 1);
+    const t = TIERS.indexOf(d.tier);
+    return SLOTS[slot][t < 0 ? 4 : t];
+  };
 
   const nodeRadius = (d) => {
     if (d.id === CENTER_ID) return 18;
-    return Math.max(3, Math.min(12, (d.power_score || 1) * 1.3));
+    const r = Math.max(3, Math.min(12, (d.power_score || 1) * 1.3));
+    return d.degree > 1 ? Math.max(2.5, r * 0.75) : r;   // further out, a little smaller
   };
 
   // A phone. Judged by the window, as the page judges it, not by the graph's
@@ -235,6 +296,37 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   const isMobileGraph = window.innerWidth < 768;
 
   const g = svg.append('g');
+
+  // Faint S–D guide rings where each tier settles (the radial force below), so
+  // the tier bands read at a glance. Not on a phone, whose layout has no rings.
+  // Once the layout settles they move to where each tier's dots actually sit
+  // (the median distance out), which the other forces push past that radius.
+  const guideRings = new Map();
+  if (!isMobileGraph && layered) {
+    // In bands: a faint ring and a label for each step along the chain instead.
+    const guides = g.append('g').attr('class', 'degree-guides').style('pointer-events', 'none');
+    const names = ['', '1st', '2nd', '3rd', '4th', '5th', '6th'];
+    bands.slice(0, SLOTS.length).forEach((b, slot) => {
+      const r = SLOTS[slot][2];
+      guides.append('circle').attr('r', r).attr('fill', 'none').attr('stroke', '#8899aa')
+        .attr('stroke-opacity', 0.12).attr('stroke-width', 1).attr('stroke-dasharray', '2 4');
+      guides.append('text').attr('x', 0).attr('y', -SLOTS[slot][4] - 8).attr('text-anchor', 'middle')
+        .attr('font-size', 10).attr('font-weight', 700).attr('fill', '#8899aa').attr('fill-opacity', 0.55)
+        .text(names[b] || `${b}th`);
+    });
+  } else if (!isMobileGraph) {
+    const guides = g.append('g').attr('class', 'tier-guides').style('pointer-events', 'none');
+    for (const tier of ['S', 'A', 'B', 'C', 'D']) {
+      const r = tierRadius(tier);
+      const ring = guides.append('circle').attr('r', r).attr('fill', 'none')
+        .attr('stroke', tierColors[tier] || '#666').attr('stroke-opacity', 0.16).attr('stroke-width', 1)
+        .attr('stroke-dasharray', '2 4');
+      const label = guides.append('text').attr('x', 0).attr('y', -r - 4).attr('text-anchor', 'middle')
+        .attr('font-size', 10).attr('font-weight', 700).attr('fill', tierColors[tier] || '#666').attr('fill-opacity', 0.5)
+        .text(tier);
+      guideRings.set(tier, { ring, label });
+    }
+  }
   // Where the view is going while a transition takes it there. A resize part-way
   // through re-fits the destination, and a rebuild starts from it, rather than
   // from a point along the way.
@@ -330,11 +422,20 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   }
 
   const simulation = d3.forceSimulation(nodes)
-    .force('link', d3.forceLink(links).id(d => d.id).distance(d => tierRadius(d.target.tier || 'D')).strength(isMobileGraph ? 0 : 0.1))
+    .force('link', d3.forceLink(links).id(d => d.id).distance(d => (d.near ? Math.max(40, radiusOf(d.target) - radiusOf(d.source)) : radiusOf(d.target))).strength(isMobileGraph ? 0 : layered ? 0.06 : 0.1))
     .force('charge', d3.forceManyBody().strength(isMobileGraph ? 0 : (d => d.id === CENTER_ID ? -300 : -15)))
     .force('center', isMobileGraph ? null : d3.forceCenter(0, 0))
     .force('collision', isMobileGraph ? null : d3.forceCollide().radius(d => nodeRadius(d) + 2))
-    .force('radial', isMobileGraph ? null : d3.forceRadial(d => d.id === CENTER_ID ? 0 : tierRadius(d.tier), 0, 0).strength(0.3));
+    .force('radial', isMobileGraph ? null : d3.forceRadial(d => d.id === CENTER_ID ? 0 : radiusOf(d), 0, 0).strength(layered ? 0.45 : 0.3));
+  simulation.on('end.guides', () => {
+    for (const [tier, { ring, label }] of guideRings) {
+      const out = nodes.filter((n) => n.tier === tier && n.id !== CENTER_ID).map((n) => Math.hypot(n.x || 0, n.y || 0)).sort((x, y) => x - y);
+      if (!out.length) { ring.attr('opacity', 0); label.attr('opacity', 0); continue; }
+      const r = out[Math.floor(out.length / 2)];
+      ring.attr('r', r).attr('opacity', 1);
+      label.attr('y', -r - 4).attr('opacity', 1);
+    }
+  });
 
   // forceLink has already swapped each link's ids for the nodes themselves, so
   // the colour is one step away. It used to search every node for every link:
@@ -344,7 +445,10 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     .attr('stroke-opacity', 0.15).attr('stroke-width', 0.5);
 
   // Catalyst outer glow rings (rendered behind the nodes)
-  const catalysts = nodes.filter(n => n.is_catalyst);
+  // A catalyst is the green outline on their dot (design C, with the scan
+  // bars round it); the dashed glow ring that used to sit here hid the bars,
+  // so it's only drawn for a catalyst with no bars.
+  const catalysts = nodes.filter(n => n.is_catalyst && marks.get(n.id)?.bars == null);
   if (catalysts.length) {
     const defs = svg.select('defs').size() ? svg.select('defs') : svg.append('defs');
     if (!defs.select('#catalyst-glow-nm').size()) {
@@ -361,9 +465,34 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
       .attr('class', 'catalyst-ring');
   }
 
+  // Design C round a connection's dot: five thin bars for how much of their
+  // circle is scanned, and a small badge for how many in it are ready to scan.
+  const ringed = nodes.filter((n) => marks.has(n.id));
+  const dotRings = g.append('g').attr('class', 'dot-rings').style('pointer-events', 'none')
+    .selectAll('g').data(ringed).join('g')
+    .attr('transform', d => `translate(${d.x || 0},${d.y || 0})`);
+  dotRings.each(function (d) {
+    const { bars, ready } = marks.get(d.id);
+    const r = nodeRadius(d) + 3.5;
+    const el = d3.select(this);
+    if (bars != null) {
+      for (const seg of ringSegments(r)) {
+        el.append('path').attr('d', seg.d).attr('fill', 'none').attr('stroke-linecap', 'round')
+          .attr('stroke-width', 1.6).attr('stroke', seg.i < bars ? RING.filled : RING.empty);
+      }
+    }
+    if (ready > 0) {
+      const at = r * 0.72;
+      el.append('circle').attr('cx', at).attr('cy', at).attr('r', 5.5).attr('fill', RING.badge);
+      el.append('text').attr('x', at).attr('y', at + 2.5).attr('text-anchor', 'middle')
+        .attr('font-size', 7).attr('font-weight', 700).attr('fill', '#fff').text(ready > 9 ? '9+' : ready);
+    }
+  });
+
   const node = g.append('g').selectAll('circle').data(nodes).join('circle')
     .attr('r', nodeRadius)
     .attr('fill', d => d.id === CENTER_ID ? '#fff' : tierColors[d.tier] || '#666')
+    .attr('fill-opacity', d => (d.degree >= 3 ? 0.55 : d.degree === 2 ? 0.75 : 1))
     .attr('stroke', d => {
       if (d.id === CENTER_ID) return '#FFD700';
       if (d.is_catalyst) return '#00ff88';
@@ -425,7 +554,9 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   setupDrag(node, simulation, CENTER_ID);
 
   const labels = g.append('g').selectAll('text')
-    .data(nodes.filter(n => n.id === CENTER_ID || n.tier === 'S' || n.is_catalyst))
+    // Names for you, your S-tier connections and catalysts; further out (the
+    // Degree filter) only on hover, or hundreds of S-tier names pile up.
+    .data(nodes.filter(n => n.id === CENTER_ID || (n.degree === 1 && (n.tier === 'S' || n.is_catalyst))))
     .join('text')
     .text(d => d.is_catalyst && d.tier !== 'S' ? d.name + ' ⚡' : d.name)
     .attr('font-size', d => d.id === CENTER_ID ? 14 : 10)
@@ -444,6 +575,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     link.attr('x1', d => d.source.x).attr('y1', d => d.source.y).attr('x2', d => d.target.x).attr('y2', d => d.target.y);
     node.attr('cx', d => d.x).attr('cy', d => d.y);
     catalystRings.attr('cx', d => d.x).attr('cy', d => d.y);
+    dotRings.attr('transform', d => `translate(${d.x},${d.y})`);
     labels.attr('x', d => d.x).attr('y', d => d.y);
     placeRing();
   });

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

@@ -7,6 +7,7 @@
 // files the scanner writes.
 
 import { useState } from 'react';
+import { limitQuestion, limitNote, SAFE_LIMITS } from '../../lib/search-risk';
 
 const LINE = '1px solid rgba(255,255,255,0.1)';
 const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
@@ -59,6 +60,13 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
   const today = li.unreadable ? '?' : li.searchesToday;
   const views = li.unreadable ? '?' : li.profilesToday;
   const set = (change) => onSetLimits({ ...limits, ...change });
+  // A budget past what LinkedIn has put up with is asked about first (lib/search-risk.js).
+  const ask = (change) => {
+    const q = limitQuestion(limits, { ...limits, ...change });
+    if (q && !window.confirm(q)) return;
+    set(change);
+  };
+  const note = limitNote(limits);
   return (
     <div style={{ padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#b8c4c4' }}>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 14 }}>
@@ -77,10 +85,10 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
       </div>
       <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginTop: 10 }}>
         <span>Budget:</span>
-        <select value={limits.daily} disabled={disabled} onChange={(e) => set({ daily: Number(e.target.value) })} style={sel}>
+        <select value={limits.daily} disabled={disabled} onChange={(e) => ask({ daily: Number(e.target.value) })} style={sel}>
           {DAILY.map((n) => <option key={n} value={n}>{n} a day</option>)}
         </select>
-        <select value={limits.monthly} disabled={disabled} onChange={(e) => set({ monthly: Number(e.target.value) })} style={sel}>
+        <select value={limits.monthly} disabled={disabled} onChange={(e) => ask({ monthly: Number(e.target.value) })} style={sel}>
           {MONTHLY.map((n) => <option key={n} value={n}>{n ? `${n} a month` : 'no monthly cap (Premium)'}</option>)}
         </select>
         <select value={limits.profiles} disabled={disabled} onChange={(e) => set({ profiles: Number(e.target.value) })} style={sel}>
@@ -91,8 +99,17 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
         Every page of someone&rsquo;s connections is one search. LinkedIn limits a free account&rsquo;s people
         searches by the month (it doesn&rsquo;t say how many; reports put it around 250–350), resetting on the 1st.
         When a budget is used, a scan saves what it read and stops; the next one carries on from the same page.
-        {limits.daily > 100 && <b style={{ color: '#FFD700' }}> {limits.daily} a day can use up a free account&rsquo;s month in a day or two.</b>}
       </div>
+      {note && (
+        <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', color: '#FFD700', lineHeight: 1.6 }}>
+          <b style={{ flex: 1, minWidth: 200 }}>{note}</b>
+          <button
+            onClick={() => set(SAFE_LIMITS)}
+            disabled={disabled}
+            style={{ ...sel, cursor: disabled ? 'not-allowed' : 'pointer', color: '#FFD700', borderColor: 'rgba(255,215,0,0.4)' }}
+          >Back to {SAFE_LIMITS.daily} a day, {SAFE_LIMITS.monthly} a month</button>
+        </div>
+      )}
       <div style={{ marginTop: 6, color: '#778', lineHeight: 1.6 }}>
         Each circle scan opens the person&rsquo;s profile once, which is one profile view. Profile views are what
         LinkedIn restricted an account for, after about 20 in an hour. The scanner opens at most one a minute, and

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

@@ -213,49 +213,108 @@ const OrbitGraph = forwardRef(function OrbitGraph(
     const links = [];
     let sceneRadius = TIER_RING_RADIUS.B + 70;
     if (degreesMode) {
-      // One ring of the people you've mapped, biggest circle first, each given
-      // an equal wedge. Their circle fans outward in arcs: the most powerful
-      // closest to them, dot size and colour by their own power and tier.
-      const ordered = [...d1Nodes].sort((a, b) =>
-        (clusters.get(b.id)?.length || 0) - (clusters.get(a.id)?.length || 0));
+      // Someone you added through a circle, whose own circle is scanned, sits in
+      // the fan of the circle they came from, and their people fan out behind
+      // them a band further out, and theirs behind them, to 6th degree (Blake,
+      // 2026-09-29: Orbit stopped at each connection's 2nd degree).
+      const nestedIn = new Map();
+      const nested = new Set();
+      for (const d of d1Nodes) {
+        const from = d.connection?.unlocked_from_bridge_id;
+        if (from == null || from === d.id || !d1NodeById.has(from)) continue;
+        nested.add(d.id);
+        const list = nestedIn.get(from);
+        if (list) list.push(d); else nestedIn.set(from, [d]);
+      }
+      // Everyone reachable from someone on the ring is drawn in a fan; anyone
+      // else (a loop of introductions) goes on the ring.
+      const onRing = d1Nodes.filter((d) => !nested.has(d.id));
+      const inFans = new Set();
+      const walk = (d) => { for (const p of nestedIn.get(d.id) || []) if (!inFans.has(p.id)) { inFans.add(p.id); walk(p); } };
+      onRing.forEach(walk);
+      for (const d of d1Nodes) if (nested.has(d.id) && !inFans.has(d.id)) onRing.push(d);
+      const behind = new Map();
+      const reachOf = (d, stack = new Set()) => {
+        if (behind.has(d.id)) return behind.get(d.id);
+        if (stack.has(d.id)) return 0;
+        stack.add(d.id);
+        let count = clusters.get(d.id)?.length || 0;
+        for (const p of nestedIn.get(d.id) || []) count += 1 + reachOf(p, stack);
+        stack.delete(d.id);
+        behind.set(d.id, count);
+        return count;
+      };
+
+      // One ring of the people you've mapped, biggest reach first, each given
+      // a wedge; their circle fans outward in arcs, the most powerful closest.
+      const ordered = [...onRing].sort((a, b) => reachOf(b) - reachOf(a));
       const n = Math.max(1, ordered.length);
       const R = Math.max(140, n * 9);
       // Room in proportion to how many are behind each person (square-rooted,
       // so one huge circle can't take the whole ring): big circles spread into
       // fans instead of shooting out as thin spikes.
-      const weight = (d) => Math.sqrt((clusters.get(d.id)?.length || 0) + 4);
+      const weight = (d) => Math.sqrt(reachOf(d) + 4);
       const total = ordered.reduce((sum, d) => sum + weight(d), 0) || 1;
-      let cursor = -Math.PI / 2;
-      ordered.forEach((b) => {
-        const share = (weight(b) / total) * Math.PI * 2;
-        const angle = cursor + share / 2;
-        cursor += share;
-        const wedge = Math.min(share * 0.88, 1.6);
-        b.x = b.fx = Math.cos(angle) * R;
-        b.y = b.fy = Math.sin(angle) * R;
-        b.hub = true;
-        b.r = 9 + Math.min(10, (clusters.get(b.id)?.length || 0) / 40);
-        const people = [...(clusters.get(b.id) || [])]
-          .sort((p, q) => (Number(q.power_score) || 0) - (Number(p.power_score) || 0));
+
+      // `owner`'s people in rows across `wedge`, from rStart out; someone they
+      // added gets their own narrower fan behind them. Returns the outer edge.
+      const placeFan = (owner, angle, wedge, rStart, depth) => {
+        const people = [
+          ...(clusters.get(owner.id) || []).map((c) => ({ c })),
+          ...(nestedIn.get(owner.id) || []).filter((p) => inFans.has(p.id)).map((p) => ({ added: p, c: p.connection })),
+        ].sort((p, q) => (Number(q.c?.power_score) || 0) - (Number(p.c?.power_score) || 0));
+        const far = depth > 2;
+        const step = far ? 8 : 9;
+        const subs = [];
         let placed = 0;
-        let r = R + b.r + 16;
+        let r = rStart;
         while (placed < people.length) {
-          const fit = Math.max(1, Math.floor((r * wedge) / 9));
+          const fit = Math.max(1, Math.floor((r * wedge) / step));
           const row = people.slice(placed, placed + fit);
-          row.forEach((c, j) => {
+          row.forEach((p, j) => {
             const a = angle + (row.length === 1 ? 0 : (j / (row.length - 1) - 0.5) * wedge);
+            const x = Math.cos(a) * r;
+            const y = Math.sin(a) * r;
+            if (p.added) {
+              const d = p.added;
+              d.x = d.fx = x; d.y = d.fy = y;
+              d.hub = false; d.added = true;
+              d.r = 5 + Math.min(5, reachOf(d) / 60);
+              subs.push({ d, a });
+              return;
+            }
             const node = {
-              id: c.id, kind: 'd2', tier: c.tier || 'D',
-              r: 1.8 + Math.min(10, Number(c.power_score) || 0) * 0.32,
-              connection: c, x: Math.cos(a) * r, y: Math.sin(a) * r,
+              id: p.c.id, kind: 'd2', depth, tier: p.c.tier || 'D',
+              r: (far ? 1.3 : 1.8) + Math.min(10, Number(p.c.power_score) || 0) * (far ? 0.24 : 0.32),
+              connection: p.c, x, y,
             };
             node.fx = node.x; node.fy = node.y;
             d2Nodes.push(node);
+            if (owner.added) links.push({ source: owner, target: node, faint: true });
           });
           placed += row.length;
-          r += 9;
+          r += step;
         }
-        sceneRadius = Math.max(sceneRadius, r + 10);
+        let edge = r;
+        for (const { d, a } of subs) {
+          if (depth >= 6 || !reachOf(d)) continue;
+          const sub = Math.min(wedge * 0.6, Math.max(0.12, (Math.min(reachOf(d), 60) * 8) / (r + 24)));
+          edge = Math.max(edge, placeFan(d, a, sub, r + 24, depth + 1));
+        }
+        return edge;
+      };
+
+      let cursor = -Math.PI / 2;
+      ordered.forEach((b) => {
+        const share = (weight(b) / total) * Math.PI * 2;
+        const angle = cursor + share / 2;
+        cursor += share;
+        const wedge = Math.min(share * 0.88, 1.6);
+        b.x = b.fx = Math.cos(angle) * R;
+        b.y = b.fy = Math.sin(angle) * R;
+        b.hub = true;
+        b.r = 9 + Math.min(10, (clusters.get(b.id)?.length || 0) / 40);
+        sceneRadius = Math.max(sceneRadius, placeFan(b, angle, wedge, R + b.r + 16, 2) + 10);
       });
     }
     for (const [bridgeId, cluster] of degreesMode ? [] : clusters) {
@@ -324,7 +383,8 @@ const OrbitGraph = forwardRef(function OrbitGraph(
     }
 
     const link = linksLayer.selectAll('line').data(links).join('line')
-      .attr('stroke', 'rgba(255,255,255,0.08)').attr('stroke-width', 1);
+      .attr('stroke', (l) => (l.faint ? 'rgba(0,255,136,0.12)' : 'rgba(255,255,255,0.08)'))
+      .attr('stroke-width', (l) => (l.faint ? 0.5 : 1));
 
     const node = nodesLayer.selectAll('g').data(renderNodes, (d) => d.id).join('g')
       .attr('cursor', 'pointer');
@@ -333,7 +393,7 @@ const OrbitGraph = forwardRef(function OrbitGraph(
       const g = select(this);
 
       if (d.kind === 'd2') {
-        g.attr('opacity', degreesMode ? 0.85 : 0.55);
+        g.attr('opacity', degreesMode ? (d.depth > 2 ? 0.6 : 0.85) : 0.55);
         g.append('circle').attr('class', 'og-base').attr('r', d.r)
           .attr('fill', TIER_COLORS[d.tier] || TIER_COLORS.D);
         return;   // selection ring is created on demand, see applySelection
@@ -347,8 +407,10 @@ const OrbitGraph = forwardRef(function OrbitGraph(
       // selecting promotes it — the tooltip carries the detail, so nothing is
       // hidden, it is just not all shouted at once.
       if (!isUser && !d.hub) {
-        g.attr('opacity', 0.75);
-        g.append('circle').attr('class', 'og-base').attr('r', d.r).attr('fill', color);
+        g.attr('opacity', d.added ? 1 : 0.75);
+        // Someone you added through a circle: green-ringed, with their own fan behind them.
+        g.append('circle').attr('class', 'og-base').attr('r', d.r).attr('fill', color)
+          .attr('stroke', d.added ? '#00ff88' : 'none').attr('stroke-width', d.added ? 1.5 : 0);
         return;   // selection ring is created on demand, see applySelection
       }
 

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

@@ -11,6 +11,7 @@ import { useUser } from './UserProvider';
 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 Avatar from './Avatar';
 import { localPhoto } from '../../lib/photos';
 
@@ -39,6 +40,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
   // shows even while a tier chip is narrowing the view, and a person picked in
   // Chains or Galaxy gets every route too.
   const routeIdx = useMemo(() => routeIndex(degree2), [degree2]);
+  // 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 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).
@@ -139,6 +143,39 @@ 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);
+          const first = selected.name?.split(' ')[0] || 'them';
+          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>
+              )}
+            </div>
+          );
+        })()}
+
         {selected.is_catalyst && (
           <div style={{
             background: 'rgba(0,255,136,0.08)', border: '1px solid rgba(0,255,136,0.3)',

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

@@ -27,7 +27,7 @@ import SeparationView from './SeparationView';
  */
 export const VIEWS = {
   galaxy:   { component: ForceGraph, modes: ['network'],            label: 'Galaxy',        icon: '🌌', desc: 'Force-directed layout' },
-  orbit:    { component: OrbitGraph, modes: ['network', 'degrees'], label: 'Orbit',         icon: '🪐', desc: 'Tier orbits + circle dots; in Degrees, every mapped circle fanned out', allDegree2: true },
+  orbit:    { component: OrbitGraph, modes: ['degrees'],            label: 'Orbit',         icon: '🪐', desc: 'Tier orbits + circle dots; in Degrees, every mapped circle fanned out', allDegree2: true },
   separation: { component: SeparationView, modes: ['degrees'],    label: 'Separation',    icon: '🏆', desc: 'Every 2nd degree, ranked · every way in' },
   chain:    { component: ChainView,  modes: ['degrees'],            label: 'Bridge Chains', icon: '🔗', desc: 'Degree paths' },
   rings:    { component: RingsView,  modes: ['network', 'degrees'], label: 'Pyramid',       icon: '🔺', desc: 'Tier hierarchy' },
@@ -36,11 +36,13 @@ export const VIEWS = {
 };
 
 /**
- * The order they appear in the menu. Orbit is the first Degrees view, so it is
- * also where resolveView lands when the chosen view isn't a Degrees one
- * (Galaxy, say, carried over from Network Circle).
+ * The order they appear in the menu. Bridge Chains is the first Degrees view, so
+ * it is also where resolveView lands when the chosen view isn't a Degrees one
+ * (Galaxy, say, carried over from Network Circle); then Separation, then Orbit.
+ * Orbit is a Degrees view only: in Network Circle it was slow and said nothing
+ * the Galaxy doesn't (OrbitGraph still has that branch until Orbit is redrawn).
  */
-const ORDER = ['galaxy', 'orbit', 'separation', 'chain', 'rings', 'list'];
+const ORDER = ['galaxy', 'chain', 'separation', 'orbit', 'rings', 'list'];
 
 export function viewsForMode(mode) {
   return ORDER