six-degrees 0.3.0 → 0.4.0

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { localPhoto } from '../../lib/photos';
+
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
 
@@ -38,8 +40,8 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
               onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
-                {cl.bridge.profile_image_url ? (
-                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                {localPhoto(cl.bridge.profile_image_url) ? (
+                  <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{
                     width: 40, height: 40, borderRadius: '50%', objectFit: 'cover',
                     border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
                   }} onError={e => { e.target.style.display = 'none'; }} />
@@ -67,13 +69,13 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                 {cl.members.slice(0, 8).map((m, i) => (
                   <div key={m.id} style={{
                     width: 22, height: 22, borderRadius: '50%', fontSize: 8, fontWeight: 700,
-                    background: m.profile_image_url ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
+                    background: localPhoto(m.profile_image_url) ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
                     color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                     border: '2px solid #0a0a1a', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
                     overflow: 'hidden',
                   }}>
-                    {m.profile_image_url ? (
-                      <img src={m.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    {localPhoto(m.profile_image_url) ? (
+                      <img src={localPhoto(m.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                     ) : m.name?.charAt(0)}
                   </div>
                 ))}
@@ -131,8 +133,8 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                     onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      {c.profile_image_url ? (
-                        <img src={c.profile_image_url} alt="" style={{
+                      {localPhoto(c.profile_image_url) ? (
+                        <img src={localPhoto(c.profile_image_url)} alt="" style={{
                           width: 32, height: 32, borderRadius: '50%', objectFit: 'cover',
                           border: `2px solid ${TIER_COLORS[tier]}`,
                         }} onError={e => { e.target.style.display = 'none'; }} />

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

@@ -1,6 +1,6 @@
 'use client';
 
-// Paths → Scores: the one-time offer to keep the curated list's old scores as
+// The Scores tab: the one-time offer to keep the curated list's old scores as
 // your own, after the list was made neutral (lib/legacy-offer.js decides who
 // sees it and what "keep" writes). It sits at the top of the Scores tab until
 // it's answered, then never shows again. Not while a CSV import or the sample

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

@@ -1,9 +1,10 @@
 'use client';
 
-// The Scan page's view of what LinkedIn allows: the search budget, the cooldown
-// lock, and everyone whose list was only partly read, with a way back into each.
-// TRAPS §35. The numbers come from /api/scraper (lib/linkedin-limits.js,
-// lib/paused.js), which reads the same files the scanner writes.
+// The Scan page's view of what LinkedIn allows: the search budget and the cap
+// on profile views, the cooldown lock, and everyone whose list was only partly
+// read, with a way back into each. TRAPS §16, §35. The numbers come from
+// /api/scraper (lib/linkedin-limits.js, lib/paused.js), which reads the same
+// files the scanner writes.
 
 import { useState } from 'react';
 
@@ -11,6 +12,7 @@ const LINE = '1px solid rgba(255,255,255,0.1)';
 const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const DAILY = [25, 50, 100, 200, 500];
 const MONTHLY = [100, 250, 500, 1000, 0];
+const PROFILES = [10, 25, 50, 100];
 
 const when = (ms) => new Date(ms).toLocaleString(undefined, { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
 const day = (ms) => new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
@@ -55,6 +57,8 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
   if (!li) return null;
   const { limits } = li;
   const today = li.unreadable ? '?' : li.searchesToday;
+  const views = li.unreadable ? '?' : li.profilesToday;
+  const set = (change) => onSetLimits({ ...limits, ...change });
   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 }}>
@@ -66,16 +70,22 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
           <div><b style={{ color: '#fff' }}>{li.searchesMonth}</b> of {limits.monthly || 'no limit'} this month · resets {day(li.monthResets)}</div>
           <Bar used={li.searchesMonth} cap={limits.monthly} />
         </div>
+        <div>
+          <div><b style={{ color: '#fff' }}>{views}</b> of {limits.profiles} profile views today</div>
+          <Bar used={li.unreadable ? limits.profiles : li.profilesToday} cap={limits.profiles} />
+        </div>
       </div>
       <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', marginTop: 10 }}>
         <span>Budget:</span>
-        <select value={limits.daily} disabled={disabled} onChange={(e) => onSetLimits({ daily: Number(e.target.value), monthly: limits.monthly })} style={sel}>
+        <select value={limits.daily} disabled={disabled} onChange={(e) => set({ 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) => onSetLimits({ daily: limits.daily, monthly: Number(e.target.value) })} style={sel}>
+        <select value={limits.monthly} disabled={disabled} onChange={(e) => set({ 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>
-        <span style={{ color: '#778' }}>{li.profilesToday} profile views today</span>
+        <select value={limits.profiles} disabled={disabled} onChange={(e) => set({ profiles: Number(e.target.value) })} style={sel}>
+          {PROFILES.map((n) => <option key={n} value={n}>{n} profile views a day</option>)}
+        </select>
       </div>
       <div style={{ marginTop: 8, color: '#778', lineHeight: 1.6 }}>
         Every page of someone&rsquo;s connections is one search. LinkedIn limits a free account&rsquo;s people
@@ -83,6 +93,11 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
         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>
+      <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
+        once today&rsquo;s are used, a scan stops before the next profile and tries that person next time.
+      </div>
     </div>
   );
 }

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { localPhoto } from '../../lib/photos';
+
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 export default function ListView({ connections, degree2 = [], onSelect, mode }) {
@@ -47,8 +49,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             >
               <span style={{ fontSize: 12, fontWeight: 700, color: '#444' }}>{i + 1}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
-                {cl.bridge.profile_image_url ? (
-                  <img src={cl.bridge.profile_image_url} alt="" style={{
+                {localPhoto(cl.bridge.profile_image_url) ? (
+                  <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{
                     width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                     border: `2px solid ${TIER_COLORS[cl.bridge.tier]}`,
                   }} onError={e => { e.target.style.display = 'none'; }} />
@@ -113,8 +115,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             onMouseLeave={e => e.currentTarget.style.background = i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent'}
           >
             <span style={{ fontSize: 12, fontWeight: 700, color: i < 3 ? TIER_COLORS[c.tier] : '#444' }}>{i + 1}</span>
-            {c.profile_image_url ? (
-              <img src={c.profile_image_url} alt="" style={{
+            {localPhoto(c.profile_image_url) ? (
+              <img src={localPhoto(c.profile_image_url)} alt="" style={{
                 width: 28, height: 28, borderRadius: '50%', objectFit: 'cover',
                 border: `2px solid ${TIER_COLORS[c.tier]}`,
               }} onError={e => { e.target.style.display = 'none'; }} />

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { TIER_COLORS_CLASSIC as TIER_COLORS } from '../../lib/tiers';
+import { reachIndex, circleState } from '../../lib/reach';
 
 // How much of your 1st degree has had its circle opened.
 //
@@ -19,13 +20,11 @@ const CARD = {
 };
 
 export function computeMapping(degree1 = [], degree2 = [], skips = []) {
-  const mappedIds = new Set(degree2.map((c) => c.source_connection_id).filter(Boolean));
-  const hiddenUrls = new Set(skips.map((s) => s.profileUrl).filter(Boolean));
-
+  // One rule for whose circle is open, hidden or still to do: lib/reach.js.
+  const reach = reachIndex(degree1, degree2, { skips });
   const state = (c) => {
-    if (mappedIds.has(c.id)) return 'mapped';
-    if (c.profile_url && hiddenUrls.has(c.profile_url)) return 'hidden';
-    return 'todo';
+    const s = circleState(c, reach);
+    return s === 'scanned' ? 'mapped' : s;
   };
 
   const counts = { mapped: 0, hidden: 0, todo: 0 };

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

@@ -24,7 +24,7 @@ export default function OnboardingGate({ children }) {
       ) : (
         <div style={{ maxWidth: 420 }}>
           <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>
-            Can’t reach 6 Degrees’ local server
+            Can’t reach Six Degrees’ local server
           </div>
           <div style={{ color: '#888', fontSize: 14, lineHeight: 1.6 }}>
             The page loaded but the app behind it is not answering. If you started it

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

@@ -17,6 +17,8 @@
  */
 
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useRequests from './useRequests';
+import { hasRequest } from '../../lib/requests-client';
 import {
   drag,
   forceCollide,
@@ -30,6 +32,7 @@ import {
   zoomTransform,
 } from 'd3';
 import { TIER_COLORS, TIER_ORDER, TIER_RING_RADIUS, initialsFor } from '../../lib/tiers';
+import { localPhoto } from '../../lib/photos';
 
 const GOLDEN_ANGLE = 2.399963;
 const LABEL_ZOOM_THRESHOLD = 1.1;
@@ -71,6 +74,7 @@ const OrbitGraph = forwardRef(function OrbitGraph(
   const zoomKRef = useRef(1);
   const savedTransformRef = useRef(null);
   const applySelectionRef = useRef(() => {});
+  const applyRequestsRef = useRef(() => {});
   const focusNodeRef = useRef(() => {});
   const [size, setSize] = useState({ w: 0, h: 0 });
   const isMobile = useIsMobile();
@@ -122,6 +126,15 @@ const OrbitGraph = forwardRef(function OrbitGraph(
     applySelectionRef.current(selectedId);
   }, [selectedId]);
 
+  // So do requests you've sent (lib/requests-client.js): a request sent from
+  // any view rings that person's dots here at once.
+  const requests = useRequests();
+  const requestsRef = useRef(requests);
+  useEffect(() => {
+    requestsRef.current = requests;
+    applyRequestsRef.current(requests);
+  }, [requests]);
+
   useEffect(() => {
     const svgEl = svgRef.current;
     if (!svgEl || size.w < 40 || size.h < 40) return undefined;
@@ -362,7 +375,8 @@ const OrbitGraph = forwardRef(function OrbitGraph(
         .attr('font-size', d.r * 0.8).attr('font-weight', 700)
         .attr('fill', '#0b0b16').style('pointer-events', 'none');
 
-      const imageUrl = isUser ? userImage : (conn?.profile_image_url ?? null);
+      // Only a photo saved on this computer (lib/photos.js).
+      const imageUrl = localPhoto(isUser ? userImage : conn?.profile_image_url);
       if (imageUrl) {
         const clipId = `og-clip-${safeId(d.id)}`;
         defs.append('clipPath').attr('id', clipId).append('circle').attr('r', d.r);
@@ -545,6 +559,23 @@ const OrbitGraph = forwardRef(function OrbitGraph(
     };
     applySelectionRef.current(selectedIdRef.current);
 
+    // ---- requests you've sent ---------------------------------------------
+    // A dashed gold ring on every 2nd-degree dot you've asked, in step with
+    // the shared list, without rebuilding the scene.
+    applyRequestsRef.current = (state) => {
+      nodesLayer.selectAll('circle.og-asked').remove();
+      node.filter((d) => d.kind === 'd2' && hasRequest(d.connection, state))
+        .append('circle')
+        .attr('class', 'og-asked')
+        .attr('r', (d) => d.r + 2.2)
+        .attr('fill', 'none')
+        .attr('stroke', '#FFD700')
+        .attr('stroke-width', 1)
+        .attr('stroke-dasharray', '2 1.6')
+        .style('pointer-events', 'none');
+    };
+    applyRequestsRef.current(requestsRef.current);
+
     // ---- fly-to ----------------------------------------------------------
     const nodeById = new Map(renderNodes.map((n) => [n.id, n]));
     focusNodeRef.current = (id) => {
@@ -591,6 +622,7 @@ const OrbitGraph = forwardRef(function OrbitGraph(
     return () => {
       sim?.stop();
       applySelectionRef.current = () => {};
+      applyRequestsRef.current = () => {};
       focusNodeRef.current = () => {};
       svg.on('.zoom', null);
       svg.on('click', null);

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

@@ -11,6 +11,7 @@ import { useMemo, useState } from 'react';
 import Link from 'next/link';
 import { buildQuest, XP_SEND, STAGE_SIZE } from '../../lib/quest';
 import { initialsFor } from '../../lib/tiers';
+import { localPhoto } from '../../lib/photos';
 
 const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const LINE = '1px solid rgba(255,255,255,0.1)';
@@ -24,8 +25,8 @@ function Face({ person, size = 36, ring }) {
         display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.34, fontWeight: 800,
         border: `2px solid ${ring || color}`,
       }}>{initialsFor(person?.name || '?')}</div>
-      {person?.profile_image_url && (
-        <img src={person.profile_image_url} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }}
+      {localPhoto(person?.profile_image_url) && (
+        <img src={localPhoto(person.profile_image_url)} alt="" onError={(e) => { e.currentTarget.style.display = 'none'; }}
           style={{ position: 'absolute', inset: 0, width: size, height: size, borderRadius: '50%', objectFit: 'cover', border: `2px solid ${ring || color}` }} />
       )}
     </div>
@@ -47,8 +48,8 @@ function Ring({ progress, size = 86, color = '#FF6B35', children }) {
   );
 }
 
-export default function OutlinkQuest({ recs, sentIds, added, mappedIds, onSend, onUndo }) {
-  const quest = useMemo(() => buildQuest({ recs, sentIds, added, mappedIds }), [recs, sentIds, added, mappedIds]);
+export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo }) {
+  const quest = useMemo(() => buildQuest({ recs, sentIds, added, mappedIds, reach }), [recs, sentIds, added, mappedIds, reach]);
   const [open, setOpen] = useState(null);         // bridge id of the expanded cluster
   const [toast, setToast] = useState(null);
   const { level } = quest;

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

@@ -505,7 +505,7 @@ function Section({ title, children }) {
 }
 
 // The company's score in people's power, where it comes from, and a control
-// to set it (Paths → Scores has every company).
+// to set it (the Scores tab has every company).
 function CompanyScoreLine({ name }) {
   const { companies, setScore } = useCompanyScores();
   const c = companies?.find((x) => x.name === name);

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { localPhoto } from '../../lib/photos';
 
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
@@ -58,8 +59,8 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                       boxShadow: hoveredId === cl.bridge.id ? `0 0 20px ${TIER_COLORS[cl.bridge.tier]}60` : `0 0 10px ${TIER_COLORS[cl.bridge.tier]}20`,
                       transition: 'box-shadow 0.2s',
                     }}>
-                      {cl.bridge.profile_image_url ? (
-                        <img src={cl.bridge.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                      {localPhoto(cl.bridge.profile_image_url) ? (
+                        <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                       ) : (
                         <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                           background: TIER_COLORS[cl.bridge.tier], color: cl.bridge.tier === 'S' ? '#000' : '#fff', fontSize: 20, fontWeight: 800 }}>
@@ -95,13 +96,13 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                               <div style={{
                                 width: size, height: size, borderRadius: '50%',
                                 border: `2px solid ${TIER_COLORS[tier]}`,
-                                overflow: 'hidden', background: p.profile_image_url ? '#111' : TIER_COLORS[tier],
+                                overflow: 'hidden', background: localPhoto(p.profile_image_url) ? '#111' : TIER_COLORS[tier],
                                 transition: 'transform 0.15s, box-shadow 0.15s',
                                 transform: isHov ? 'scale(1.3)' : 'scale(1)',
                                 boxShadow: isHov ? `0 0 12px ${TIER_COLORS[tier]}60` : 'none',
                               }}>
-                                {p.profile_image_url ? (
-                                  <img src={p.profile_image_url} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                                {localPhoto(p.profile_image_url) ? (
+                                  <img src={localPhoto(p.profile_image_url)} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                                     onError={e => { e.target.style.display = 'none'; e.target.parentElement.style.background = TIER_COLORS[tier]; }} />
                                 ) : (
                                   <span style={{ display: 'flex', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center',
@@ -202,7 +203,7 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                         width: size, height: size, borderRadius: '50%',
                         border: `2px solid ${TIER_COLORS[tier]}`,
                         overflow: 'hidden',
-                        background: c.profile_image_url ? '#111' : TIER_COLORS[tier],
+                        background: localPhoto(c.profile_image_url) ? '#111' : TIER_COLORS[tier],
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                         transition: 'transform 0.15s, box-shadow 0.15s',
                         transform: isHovered ? 'scale(1.3)' : 'scale(1)',
@@ -210,8 +211,8 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
                         zIndex: isHovered ? 10 : 1,
                         position: 'relative',
                       }}>
-                        {c.profile_image_url ? (
-                          <img src={c.profile_image_url} alt="" style={{
+                        {localPhoto(c.profile_image_url) ? (
+                          <img src={localPhoto(c.profile_image_url)} alt="" style={{
                             width: '100%', height: '100%', objectFit: 'cover',
                           }} onError={e => {
                             e.target.style.display = 'none';

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

@@ -20,7 +20,10 @@
 // appearing cannot feed a resize loop.
 
 import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
-import { separationPeople, compareWaysIn, summitLayout, shortName, TIERS } from '../../lib/separation';
+import { separationPeople, compareWaysIn, summitLayout, shortName, TIERS, keyFor, routeIndex } from '../../lib/separation';
+import { RARITY, rarityOf, rarityInfo, toggle } from '../../lib/rarity';
+import { hasRequest } from '../../lib/requests-client';
+import useRequests from './useRequests';
 import { initialsFor } from '../../lib/tiers';
 import Avatar from './Avatar';
 
@@ -63,7 +66,7 @@ function subline(person) {
   return person.headline || person.role || person.company || '';
 }
 
-export default function SeparationView({ connections = [], degree2 = [], onSelect, userName, selectedId, tierColors = CLASSIC }) {
+export default function SeparationView({ connections = [], degree2 = [], fullDegree1 = connections, fullDegree2 = degree2, onSelect, userName, selectedId, tierColors = CLASSIC }) {
   const isMobile = useIsMobile();
   const ROW_H = isMobile ? 68 : 56;
   const K = isMobile ? 5 : 10;
@@ -73,6 +76,9 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
   const q = useDeferredValue(query.trim().toLowerCase());
   const [sort, setSort] = useState('power');     // 'power' | 'ways'
   const [tier, setTier] = useState('all');
+  // Rarity beside the tier (lib/rarity.js): any bands switched on; none is everyone.
+  const [rarities, setRarities] = useState(() => new Set());
+  const requests = useRequests();
   const [scrollY, setScrollY] = useState(0);
   const [box, setBox] = useState({ w: 0, h: 800 });
   // The scroll element lives in state as well as a ref: the ResizeObserver
@@ -90,11 +96,35 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
     () => (sort === 'ways' ? [...model.people].sort(compareWaysIn) : model.people),
     [model, sort],
   );
+  // How rare the way in to each person is, counted across every circle you've
+  // scanned (not only the ones a bridge-tier filter leaves): never a score.
+  const waysAll = useMemo(() => routeIndex(fullDegree2), [fullDegree2]);
+  const rarityBy = useMemo(() => {
+    const m = new Map();
+    for (const p of model.people) m.set(p.key, rarityOf(p.person, waysAll.get(p.key)?.size || p.waysIn));
+    return m;
+  }, [model, waysAll]);
+  const byRarity = useMemo(() => {
+    const out = Object.fromEntries(RARITY.map((r) => [r.key, 0]));
+    for (const r of rarityBy.values()) out[r.key]++;
+    return out;
+  }, [rarityBy]);
+  const matches = useCallback((p, text) => (tier === 'all' || p.tier === tier)
+    && (!rarities.size || rarities.has(rarityBy.get(p.key)?.key))
+    && (!text || p.haystack.includes(text)), [tier, rarities, rarityBy]);
   const visible = useMemo(() => {
-    if (!q && tier === 'all') return ordered;
-    return ordered.filter((p) => (tier === 'all' || p.tier === tier) && (!q || p.haystack.includes(q)));
-  }, [ordered, q, tier]);
-  const top = useMemo(() => visible.slice(0, K), [visible, K]);
+    if (!q && tier === 'all' && !rarities.size) return ordered;
+    return ordered.filter((p) => matches(p, q));
+  }, [ordered, q, tier, rarities, matches]);
+
+  // Who you've already asked, or already know. The map is "who to ask next",
+  // so it moves on past them: send requests to its ten and the next ten come
+  // up. The list still shows everyone, marked.
+  const d1Keys = useMemo(() => new Set(fullDegree1.map(keyFor)), [fullDegree1]);
+  const statusOf = useCallback((p) => (d1Keys.has(p.key) ? 'connected' : hasRequest(p.person, requests) ? 'asked' : null),
+    [d1Keys, requests]);
+  const top = useMemo(() => visible.filter((p) => !statusOf(p)).slice(0, K), [visible, K, statusOf]);
+  const askedShown = useMemo(() => visible.reduce((n, p) => n + (statusOf(p) ? 1 : 0), 0), [visible, statusOf]);
   const selectedKey = selectedId != null ? model.rowToKey.get(selectedId) ?? null : null;
 
   // onSelect is read through a ref so the row and map callbacks never change
@@ -157,12 +187,14 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
 
   const changeQuery = (v) => { setQuery(v); toTop(); };
   const changeTier = (t) => { setTier(t); toTop(); };
+  const changeRarity = (r) => { setRarities((set) => toggle(set, r)); toTop(); };
+  const clearAll = () => { setQuery(''); setTier('all'); setRarities(new Set()); toTop(); };
   const changeSort = (s) => { setSort(s); toTop(); };
   const onSearchKey = (e) => {
     if (e.key === 'Enter') {
       // Read the live text, not the deferred copy the list is still catching up to.
       const live = query.trim().toLowerCase();
-      const first = ordered.find((p) => (tier === 'all' || p.tier === tier) && (!live || p.haystack.includes(live)));
+      const first = ordered.find((p) => matches(p, live));
       if (first) onPick(first);
     } else if (e.key === 'Escape') {
       if (query) changeQuery('');
@@ -171,7 +203,7 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
   };
 
   const { summary } = model;
-  const filtered = !!q || tier !== 'all';
+  const filtered = !!q || tier !== 'all' || rarities.size > 0;
   const youLabel = !userName || /^you$/i.test(String(userName).trim()) ? 'You' : initialsFor(userName);
   const rows = visible.slice(start, end);
 
@@ -276,6 +308,23 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
               </button>
             );
           })}
+          <span title={RARITY_NOTE} style={{ fontSize: 10, color: '#666', whiteSpace: 'nowrap', flexShrink: 0, textTransform: 'uppercase', letterSpacing: 0.5, marginLeft: 6, cursor: 'help' }}>Rarity</span>
+          {RARITY.map((r) => {
+            const on = rarities.has(r.key);
+            return (
+              <button key={r.key} type="button" aria-pressed={on} onClick={() => changeRarity(r.key)}
+                title={`${r.label}: ${r.range} mutual connection${r.range === '1' ? '' : 's'}. ${RARITY_NOTE}`} style={{
+                  height: isMobile ? 40 : 30, padding: '0 10px', borderRadius: 15, cursor: 'pointer', flexShrink: 0,
+                  fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap',
+                  border: `1px solid ${on ? r.color : 'rgba(255,255,255,0.1)'}`,
+                  background: on ? `${r.color}22` : 'rgba(255,255,255,0.03)',
+                  color: on ? r.color : '#999',
+                }}>
+                {r.label}
+                <span style={{ marginLeft: 5, fontWeight: 500, color: on ? r.color : '#666', opacity: 0.85 }}>{fmt(byRarity[r.key])}</span>
+              </button>
+            );
+          })}
         </div>
       </div>
 
@@ -290,9 +339,10 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
             <div style={{ height: mapBlockH, boxSizing: 'border-box', paddingTop: 10 }}>
               <div style={{ height: captionH - 10, overflow: 'hidden' }}>
                 <div style={{ fontSize: 12, fontWeight: 700, color: '#ddd', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                  Top {fmt(top.length)} of {fmt(visible.length)}{filtered ? ' shown' : ''} · every way in drawn
+                  Top {fmt(top.length)} you haven’t asked, of {fmt(visible.length)}{filtered ? ' shown' : ''} · every way in drawn
                 </div>
                 <div style={{ fontSize: 10, color: '#777', marginTop: 2, whiteSpace: isMobile ? 'normal' : 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: 1.35 }}>
+                  {askedShown > 0 && <span style={{ color: '#FFD700' }}>{fmt(askedShown)} asked or connected, so it moved on · </span>}
                   <span style={{ color: ORANGE }}>solid orange</span> = top-scored bridge · dashed = other routes · dot size = ways in
                 </div>
               </div>
@@ -335,6 +385,8 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
               tierColors={tierColors}
               onPick={onPick}
               q={q}
+              status={statusOf(p)}
+              rarity={rarityBy.get(p.key)}
             />
           ))}
 
@@ -342,9 +394,9 @@ export default function SeparationView({ connections = [], degree2 = [], onSelec
             <div style={{ position: 'absolute', top: 40, left: 0, right: 0, textAlign: 'center', color: '#888', fontSize: 13, padding: '0 16px' }}>
               {q
                 ? <>No one matches ‘{query.trim()}’. Search covers names, headlines, companies and who knows them.</>
-                : <>No {tier}-tier people here.</>}
+                : <>No one here with those filters.</>}
               <div style={{ marginTop: 12 }}>
-                <button type="button" onClick={() => { setQuery(''); setTier('all'); toTop(); }} style={{
+                <button type="button" onClick={clearAll} style={{
                   padding: '8px 16px', borderRadius: 8, cursor: 'pointer', fontSize: 12, fontWeight: 700,
                   border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.06)', color: '#fff',
                 }}>Clear</button>
@@ -495,7 +547,33 @@ function Via({ p, route, tierColors, compact }) {
   );
 }
 
-const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors, onPick, q }) {
+/** "Request sent" or "Connected", and how rare the way in is. */
+function Tags({ status, rarity }) {
+  const info = rarity ? rarityInfo(rarity.key) : null;
+  return (
+    <>
+      {status === 'asked' && (
+        <span title="You sent a request. It shows everywhere in the app." style={{
+          flexShrink: 0, fontSize: 9, fontWeight: 800, color: '#FFD700', border: '1px dashed rgba(255,215,0,0.6)', borderRadius: 4, padding: '0 4px',
+        }}>Request sent</span>
+      )}
+      {status === 'connected' && (
+        <span title="Already one of your connections" style={{
+          flexShrink: 0, fontSize: 9, fontWeight: 800, color: '#00ff88', border: '1px solid rgba(0,255,136,0.5)', borderRadius: 4, padding: '0 4px',
+        }}>Connected</span>
+      )}
+      {info && status !== 'connected' && (
+        <span title={`${rarity.count} mutual connection${rarity.count === 1 ? '' : 's'}${rarity.from === 'scans' ? ' (from your scans, so it can only go up)' : ''}. ${RARITY_NOTE}`} style={{
+          flexShrink: 0, fontSize: 9, fontWeight: 700, color: info.color, border: `1px solid ${info.color}55`, borderRadius: 4, padding: '0 4px',
+        }}>{info.label}</span>
+      )}
+    </>
+  );
+}
+
+const RARITY_NOTE = 'Rarity is how many mutual connections lead to them: few is a rare way in, many is warm (likely to accept). It never changes a score or a tier.';
+
+const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors, onPick, q, status, rarity }) {
   const { person } = p;
   const c = tierColors[p.tier] || '#888';
   const route = pickRoute(p, q);
@@ -532,8 +610,11 @@ const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors,
 
       {isMobile ? (
         <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? '#888' : '#fff' }}>
-            {person.name}{member && <span style={{ fontSize: 10, color: '#666', fontWeight: 400 }}> · out of network</span>}
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+            <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? '#888' : '#fff', minWidth: 0 }}>
+              {person.name}{member && <span style={{ fontSize: 10, color: '#666', fontWeight: 400 }}> · out of network</span>}
+            </span>
+            <Tags status={status} rarity={rarity} />
           </span>
           <Via p={p} route={route} tierColors={tierColors} compact />
           <span style={{ ...ellipsis, fontSize: 10, color: '#666' }}>{subline(person)}</span>
@@ -544,6 +625,7 @@ const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors,
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
               <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? '#888' : '#fff' }}>{person.name}</span>
               <span style={{ flexShrink: 0, fontSize: 9, fontWeight: 800, color: c, border: `1px solid ${c}55`, borderRadius: 4, padding: '0 4px' }}>{p.tier}</span>
+              <Tags status={status} rarity={rarity} />
               {member && <span style={{ flexShrink: 0, fontSize: 10, color: '#666' }}>out of network</span>}
             </div>
             <div style={{ ...ellipsis, fontSize: 10, color: '#777', marginTop: 2 }}>{subline(person)}</div>