six-degrees 0.4.0 → 0.4.1

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

@@ -32,7 +32,8 @@ import { useRouter } from 'next/navigation';
 import { circleIndex } from '../../lib/circle';
 import { localPhoto } from '../../lib/photos';
 import { reachIndex, reachState, circleState, readyByCircle, circleScanCost } from '../../lib/reach';
-import { ringLayout, dotRadius } from '../../lib/chain-layout';
+import { ringLayout, dotRadius, previewBand, tierBandLayout, outerFans } from '../../lib/chain-layout';
+import { exclusiveReach, redundancy } from '../../lib/brokerage';
 import { keyFor, score } from '../../lib/separation';
 import { hasRequest } from '../../lib/requests-client';
 import { watchScanner, scannerNow, isCircleScan } from '../../lib/scraper-client';
@@ -138,6 +139,9 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   const index = useMemo(() => circleIndex(all1, all2), [all1, all2]);
   const reach = useMemo(() => reachIndex(all1, all2, scanNotes), [all1, all2, scanNotes]);
   const readyCount = useMemo(() => readyByCircle(reach), [reach]);
+  // Who only this bridge reaches, across every circle scanned (lib/brokerage.js).
+  const exclusive = useMemo(() => exclusiveReach(fullDegree2 || degree2, fullDegree1 || connections), [fullDegree2, degree2, fullDegree1, connections]);
+  const twoWays = useMemo(() => redundancy(fullDegree2 || degree2, fullDegree1 || connections), [fullDegree2, degree2, fullDegree1, connections]);
   const rowById = useMemo(() => {
     const m = new Map();
     for (const r of all2) m.set(r.id, r);
@@ -271,7 +275,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
         {/* 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} />
+            cx={cx} cy={cy} maxR={maxR} still={still} band={previewBand(maxR, bridgeLayout.rings)} />
         )}
 
         {/* Bridge nodes — hover to preview their circle, click to open it */}
@@ -325,6 +329,12 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
               <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>
+              {exclusive.get(b.id)?.only > 0 && (
+                <text x={b.x} y={b.y + (isHov ? 43 : 41)} textAnchor="middle" fill="#00ff88" fillOpacity={0.75} fontSize={6.5}>
+                  {exclusive.get(b.id).only.toLocaleString()} only here
+                  <title>{`${exclusive.get(b.id).only.toLocaleString()} of the people in ${b.name?.split(' ')[0]}’s circle are reached by none of your other connections`}</title>
+                </text>
+              )}
             </g>
           );
         })}
@@ -372,6 +382,12 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
         <div style={{ fontSize: 9, color: '#555', marginTop: 8 }}>
           {bridges.length} bridges · {d2S} S + {d2A} A at 2nd degree
         </div>
+        {twoWays > 0 && (
+          <div style={{ fontSize: 9, color: '#555', marginTop: 4 }}
+            title="The share of everyone you reach through a circle that more than one of your connections reaches">
+            {Math.round(twoWays * 100)}% of your 2nd degree you reach two or more ways
+          </div>
+        )}
         <div style={{ fontSize: 8, color: '#444', marginTop: 4 }}>Click a bridge to open their circle, then anyone in it to open theirs</div>
       </div>
     </div>
@@ -379,13 +395,13 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
 }
 
 /** 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 }) {
+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');
-  // Beyond the ring of bridges, inside the window at the overview's zoom.
-  const inner = maxR * 0.66;
-  const sweep = Math.min(Math.PI * 0.9, Math.max(Math.PI * 0.2, (shown.length * 11) / (maxR * 0.75)));
+  // Beyond every ring of bridges (lib/chain-layout.js previewBand).
+  const { inner, outer } = band;
+  const sweep = Math.min(Math.PI * 0.9, Math.max(Math.PI * 0.2, (shown.length * 11) / inner));
   const layout = ringLayout(shown.length, {
-    inner, outer: maxR * 0.8, spacing: 11, minSpacing: 3.5, start: bridge.angle - sweep / 2, sweep,
+    inner, outer, spacing: 11, minSpacing: 3.5, start: bridge.angle - sweep / 2, sweep,
   });
   return (
     <g>
@@ -473,10 +489,25 @@ 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;
-  const layout = useMemo(() => ringLayout(members.length, {
-    inner: maxR * 0.55, innerMin: 62, outer: maxR * 0.94,
-    spacing: Math.max(14, Math.min(24, maxR * 0.085)), minSpacing: 4,
-  }), [members.length, maxR]);
+  // 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
+  // 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),
+    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]);
 
   // 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.
@@ -608,10 +639,33 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           <filter id="focusGlow"><feGaussianBlur stdDeviation="4" result="blur" /><feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
         </defs>
         <g transform={`translate(${cx + view.x} ${cy + view.y}) scale(${k})`}>
-          {/* Ring guides, one per ring of dots */}
-          {layout.rings.map((ring) => (
-            <circle key={ring.radius} r={ring.radius} fill="none" stroke={`${DEGREE_COLORS[2]}10`} strokeWidth={1 / k} />
+          {/* A faint band behind each tier's dots, in its colour */}
+          {layout.bands.map((band) => (
+            <circle key={band.tier} r={(band.inner + band.outer) / 2} fill="none"
+              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];
+            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} />
+                ))}
+                {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} />
+                ))}
+                {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>
+                )}
+              </g>
+            );
+          })}
           {dots}
           {/* The one under the pointer, on top */}
           {hp && (

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

@@ -12,7 +12,7 @@ function useIsMobile() {
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 
-export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilterChange, visualMode, onVisualModeChange, tierCounts, bridgeTierCounts }) {
+export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilterChange, visualMode, onVisualModeChange, tierCounts, bridgeTierCounts, degrees = [1], onDegreesChange, degreeCounts = {} }) {
   const isMobile = useIsMobile();
   const isDegreesMode = mode === 'degrees';
   // Same source of truth the renderer uses, so the menu can never offer a
@@ -105,6 +105,42 @@ export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilte
         </div>
 
         {/* Tier Filters */}
+        {/* Network Circle: which degrees to draw. Any mix, never none: 2nd and
+            3rd without your own connections shows who's valuable outside them. */}
+        {!isDegreesMode && onDegreesChange && (
+          <div style={{ marginBottom: 18 }}>
+            <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
+              Degree
+            </div>
+            <div style={{ display: 'flex', gap: 6 }}>
+              {[[1, '1st', 'Your connections'], [2, '2nd', 'In a scanned circle'], [3, '3rd', 'Found by a company scan']].map(([d, label, what]) => {
+                const on = degrees.includes(d);
+                const count = degreeCounts[d] || 0;
+                const last = on && degrees.length === 1;
+                return (
+                  <button
+                    key={d}
+                    title={`${what}: ${count.toLocaleString()}${last ? ' (keep at least one)' : ''}`}
+                    aria-pressed={on}
+                    disabled={last || (!on && !count)}
+                    onClick={() => onDegreesChange(on ? degrees.filter((x) => x !== d) : [...degrees, d].sort())}
+                    style={{
+                      flex: 1, padding: '7px 4px', borderRadius: 8, fontSize: 11.5, fontWeight: 700,
+                      cursor: last || (!on && !count) ? 'default' : 'pointer',
+                      border: on ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(255,255,255,0.08)',
+                      background: on ? 'rgba(52,152,219,0.18)' : 'rgba(255,255,255,0.03)',
+                      color: on ? '#cfe6f7' : count ? '#888' : '#444',
+                    }}
+                  >
+                    {label}
+                    <div style={{ fontSize: 9.5, fontWeight: 500, opacity: 0.8, marginTop: 2 }}>{count.toLocaleString()}</div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
         <div style={{ marginBottom: 18 }}>
           {/* In Degrees these chips filter by the tier of the connection who
               introduces you, not the person reached — Separation has its own

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

@@ -207,7 +207,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   };
 
   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,
     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,7 +219,14 @@ 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 }));
+  // Your connections hang off you; someone further out (Filter → Degree) off the
+  // connection whose circle they're in, when that one is drawn too, so they
+  // gather near them.
+  const drawnD1 = new Set(connections.filter(c => (c.degree || 1) === 1).map(c => c.id));
+  const links = connections.map(c => {
+    const via = (c.degree || 1) > 1 && drawnD1.has(c.source_connection_id) ? c.source_connection_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; }
@@ -227,7 +234,8 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
 
   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 +243,25 @@ 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) {
+    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 +357,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 ? 45 : tierRadius(d.target.tier || 'D'))).strength(isMobileGraph ? 0 : 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));
+  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:
@@ -364,6 +400,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   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 +462,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)

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/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

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

@@ -8,6 +8,7 @@ import useRequests from './components/useRequests';
 import { requestCount } from '../lib/requests-client';
 import { loadNetwork } from '../lib/network';
 import { VIEWS, resolveView } from './components/views';
+import { peopleByDegree, tierCountsOf } from '../lib/degrees';
 import Sidebar from './components/Sidebar';
 import FilterPanel from './components/FilterPanel';
 import OnboardingGate from './components/OnboardingGate';
@@ -68,6 +69,10 @@ function HomeInner() {
   const isMobile = useIsMobile();
   const [degree1, setDegree1] = useState([]);
   const [degree2, setDegree2] = useState([]);
+  // People found only by company scans: 3rd degree in Network Circle's filter.
+  const [degree3, setDegree3] = useState([]);
+  // Which degrees Network Circle draws: your connections alone until you pick more.
+  const [degrees, setDegrees] = useState([1]);
   const [selected, setSelected] = useState(null);
   const focusNodeRef = useRef(null);
   const [filter, setFilter] = useState('all');
@@ -102,7 +107,7 @@ function HomeInner() {
       // imported in this tab (1st-degree only, never persisted), or Supabase.
       const csv = hasCsvNetwork() ? loadCsvNetwork() : null;
       if (csv) { setCsvMode(true); setCsvSource(csv.source || 'csv'); }
-      const { degree1: d1, degree2: d2 } = IS_DEMO
+      const { degree1: d1, degree2: d2, degree3: d3 = [] } = IS_DEMO
         ? await loadDemoNetwork()
         : csv
         ? csv
@@ -112,6 +117,7 @@ function HomeInner() {
 
       setDegree1(d1);
       setDegree2(d2);
+      setDegree3(d3 || []);
       shapeRef.current = networkShape(d1, d2);
       setStats(statsFor(d1, d2));
       setLoading(false);
@@ -131,8 +137,9 @@ function HomeInner() {
   const reload = useCallback(async () => {
     if (IS_DEMO || hasCsvNetwork() || !userId) return;
     try {
-      const [{ degree1: d1, degree2: d2 }, notes] = await Promise.all([loadNetwork(userId), loadScanNotes()]);
+      const [{ degree1: d1, degree2: d2, degree3: d3 = [] }, notes] = await Promise.all([loadNetwork(userId), loadScanNotes()]);
       setScanNotes((prev) => (JSON.stringify(prev) === JSON.stringify(notes) ? prev : notes));
+      setDegree3((prev) => (prev.length === (d3 || []).length ? prev : d3 || []));
       const shape = networkShape(d1, d2);
       if (shape === shapeRef.current) return;
       shapeRef.current = shape;
@@ -156,9 +163,16 @@ function HomeInner() {
   // scene when these change identity: computed inline, every re-render — a click,
   // the sidebar opening, notifications arriving — reset the galaxy's layout. The
   // empty list in network mode was a new [] each time, which was enough on its own.
+  // Network Circle draws the degrees picked in the Filter panel, each person
+  // once, at the nearest degree they're found (lib/degrees.js).
+  const byDegree = useMemo(() => peopleByDegree(degree1, degree2, degree3), [degree1, degree2, degree3]);
+  const networkRows = useMemo(
+    () => (isDegreesMode ? connections : degrees.flatMap((d) => byDegree[d] || [])),
+    [isDegreesMode, connections, degrees, byDegree],
+  );
   const filtered = useMemo(
-    () => (filter === 'all' ? connections : connections.filter(c => c.tier === filter)),
-    [connections, filter],
+    () => (filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter)),
+    [networkRows, filter],
   );
   // Lookups built once per load. Every click re-renders this component, and the
   // three places below used to scan one list inside another — degree1.find per
@@ -218,7 +232,7 @@ function HomeInner() {
               {isMobile ? 'Circle' : 'Network Circle'}
             </button>
             <button
-              onClick={() => { setMode('degrees'); setSelected(null); setFilter('all'); setVisualMode('separation'); }}
+              onClick={() => { setMode('degrees'); setSelected(null); setFilter('all'); setVisualMode('chain'); }}
               style={{
                 padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600, cursor: 'pointer',
                 background: mode === 'degrees' ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'rgba(255,255,255,0.12)',
@@ -419,9 +433,12 @@ function HomeInner() {
           mode={mode}
           filter={filter}
           onFilterChange={setFilter}
-          visualMode={visualMode}
+          visualMode={view.key}
           onVisualModeChange={setVisualMode}
-          tierCounts={stats?.tiers || {}}
+          tierCounts={isDegreesMode ? stats?.tiers || {} : tierCountsOf(networkRows)}
+          degrees={degrees}
+          onDegreesChange={setDegrees}
+          degreeCounts={{ 1: byDegree[1].length, 2: byDegree[2].length, 3: byDegree[3].length }}
           bridgeTierCounts={bridgeTierCounts}
         />
         {/* Visualization — switches based on visualMode */}

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

@@ -43,6 +43,8 @@ function PathsInner() {
   useEffect(() => { if (asked === 'scores') router.replace('/scores#companies'); }, [asked, router]);
   // Bumped when company scores change, so the network reloads with new tiers.
   const [reloadKey, setReloadKey] = useState(0);
+  // The sample or a CSV import: they live only in this tab, so a company scan could only fail.
+  const [localOnly, setLocalOnly] = useState(false);
 
   useEffect(() => {
     if (IS_DEMO) return;
@@ -52,6 +54,7 @@ function PathsInner() {
       // in this tab, not the database. Keep the sample's 2nd degree: without it
       // the company map has no links and nobody is "reachable".
       const csv = hasCsvNetwork() ? loadCsvNetwork() : null;
+      setLocalOnly(Boolean(csv));
       let d1 = [], d2 = [], d3 = [];
       if (csv) {
         d1 = csv.degree1;
@@ -118,7 +121,7 @@ function PathsInner() {
   }
 
   async function scanFullCompany() {
-    if (IS_DEMO) return;
+    if (IS_DEMO || localOnly) return;
     if (!selectedCompany) return;
     // Company scans shipped in 0.1.0 without ever having been run against live
     // LinkedIn (docs/brain/PHASES.md). Say so once per browser before the first
@@ -262,6 +265,9 @@ function PathsInner() {
               <span style={{ fontSize: 11, color: '#888' }}>
                 {connectedCount}/{companyPeople.length} connected
               </span>
+              {localOnly ? (
+                <span style={{ marginLeft: 'auto', fontSize: 11, color: '#888' }}>Scanning needs your own network</span>
+              ) : (
               <button onClick={scanFullCompany} disabled={scanning || Boolean(busy)}
                 title={busy ? `${busy}. One scan at a time.` : undefined}
                 style={{
@@ -271,6 +277,7 @@ function PathsInner() {
                 }}>
                 {scanning ? 'Scanning...' : busy ? 'Scanner busy' : '+ Scan Full Company'}
               </button>
+              )}
               <span
                 title="Not yet tested against live LinkedIn. Results may be incomplete."
                 style={{

package/.next/standalone/db/schema.js

@@ -134,6 +134,20 @@ CREATE TABLE IF NOT EXISTS company_scores (
 
 -- Small key/value facts about this install, e.g. which scoring model the
 -- stored scores were computed with.
+-- Two of your own connections who know each other, seen when a circle scan
+-- found one of them in the other's list (they're dropped from that circle,
+-- being yours already). By profile URL, the smaller first, so a pair is one
+-- row whichever circle showed it. No extra LinkedIn traffic: the scan read
+-- them anyway. For clustering and communities later (lib/ties.js).
+CREATE TABLE IF NOT EXISTS connection_ties (
+  id       TEXT,                 -- lib/db.js gives every row one
+  user_id  TEXT NOT NULL,
+  a_url    TEXT NOT NULL,
+  b_url    TEXT NOT NULL,
+  seen_at  TEXT DEFAULT (datetime('now')),
+  PRIMARY KEY (user_id, a_url, b_url)
+);
+
 CREATE TABLE IF NOT EXISTS app_meta (
   key    TEXT PRIMARY KEY,
   value  TEXT