six-degrees 0.4.1 → 0.4.3

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,7 +216,7 @@ 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,
@@ -208,6 +224,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: 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,18 +236,54 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   }))];
   const nodeById = new Map(nodes.map(n => [n.id, n]));
 
-  // 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.
+  // 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 = (c.degree || 1) > 1 && drawnD1.has(c.source_connection_id) ? c.source_connection_id : CENTER_ID;
+    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;
@@ -249,7 +302,19 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // 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) {
+  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);
@@ -357,11 +422,11 @@ 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 => (d.near ? 45 : 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);
@@ -380,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()) {
@@ -397,6 +465,30 @@ 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')
@@ -483,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/OrbitGraph.js

@@ -213,49 +213,121 @@ 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);
+        // Their people go behind this fan, centred on it (not on wherever the
+        // person they came through sits), side by side in the order those people
+        // sit, so no fan spills into the next one's space; a line runs back to
+        // each. Wider than the wedge, they close up to fit it.
+        let edge = r;
+        const next = subs.filter(({ d }) => depth < 6 && reachOf(d)).sort((x, y) => x.a - y.a);
+        if (next.length) {
+          const from = r + 24;
+          const gap = 10 / from;
+          const want = next.map(({ d }) => Math.max(0.12, (Math.min(reachOf(d), 60) * 8) / from));
+          const need = want.reduce((sum, w) => sum + w, 0) + gap * (next.length - 1);
+          const scale = need > wedge ? wedge / need : 1;
+          let at = angle - (need * scale) / 2;
+          next.forEach(({ d }, k) => {
+            const w = want[k] * scale;
+            edge = Math.max(edge, placeFan(d, at + w / 2, w, from, depth + 1));
+            at += w + gap * scale;
+          });
+        }
+        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 +396,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 +406,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 +420,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/ScanStatusBar.js

@@ -0,0 +1,82 @@
+'use client';
+
+// The scan status bar: while a scan runs, every page shows what it's doing,
+// for whom, how far it's got, and today's LinkedIn budget, with Stop. Stop
+// saves what was read, and the Scan page's Resume carries on from that page.
+// It sits just under the header's tabs (Network Circle, Degrees…), on every
+// page, the Scan page too (Blake, 2026-09-29). It only reports: the
+// pacing and the caps live in the scanner (scripts/scrape.py, lib/linkedin-limits.js).
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { watchScanner, scannerNow, stopScrape } from '../../lib/scraper-client';
+
+const WHAT = {
+  full: 'Scanning your network',
+  refresh: 'Checking for new connections',
+  bridge: 'Scanning a circle',
+  resume: 'Carrying on with a circle',
+  'resume-all': 'Carrying on with circles',
+  'auto-bridge': 'Auto-Bridge',
+  'auto-bridge-retry': 'Auto-Bridge',
+  rescrape: 'Re-scanning a circle',
+  login: 'Signing in to LinkedIn',
+  setup: 'Setting up the scanner',
+  company: 'Scanning a company',
+  photos: 'Saving photos',
+};
+
+// Green while there's plenty left, amber past 60%, red past 90%.
+const tone = (used, cap) => (!cap ? '#8b9a9a' : used / cap >= 0.9 ? '#ff6b6b' : used / cap >= 0.6 ? '#FFD700' : '#00ff88');
+
+export default function ScanStatusBar() {
+  const [job, setJob] = useState(() => scannerNow());
+  const [stopping, setStopping] = useState(false);
+  useEffect(() => watchScanner(() => {
+    const now = scannerNow();
+    setJob(now);
+    if (!now.running) setStopping(false);
+  }), []);
+  if (!job?.running) return null;
+
+  const p = job.progress;
+  const step = p?.kind === 'batch' && p.total ? `${p.current || p.done || 0} of ${p.total}`
+    : p?.kind === 'walk' && p.total ? `${(p.done || 0).toLocaleString()} of ${p.total.toLocaleString()} read`
+    : p?.kind === 'saving' ? 'saving' : null;
+  const b = job.budget;
+  const last = [...(job.log || [])].reverse().find((l) => l && l.trim())?.trim();
+
+  return (
+    <div role="status" aria-live="polite" style={{
+      position: 'fixed', left: '50%', top: 'var(--scan-bar-top, 94px)', transform: 'translateX(-50%)', zIndex: 60,
+      maxWidth: 'calc(100vw - 32px)', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'nowrap', whiteSpace: 'nowrap',
+      padding: '8px 12px', borderRadius: 12, fontSize: 12, color: '#cfd8d8',
+      background: 'rgba(14,16,32,0.94)', border: '1px solid rgba(0,255,136,0.25)',
+    }}>
+      <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#00ff88', flexShrink: 0 }} />
+      <b style={{ color: '#fff' }}>{WHAT[job.action] || 'Scanning'}</b>
+      {job.target?.name && <span>{job.target.name}</span>}
+      {step && <span style={{ color: '#8b9a9a' }}>{step}</span>}
+      {b && (
+        <span style={{ color: tone(b.searches, b.cap) }} title="Searches on your LinkedIn account in the last 24 hours, and your daily budget">
+          {b.searches}{b.cap ? ` of ${b.cap}` : ''} searches today
+        </span>
+      )}
+      {last && (
+        <span style={{ color: '#667', flex: '0 1 240px', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={last}>
+          {last}
+        </span>
+      )}
+      <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>Details</Link>
+      <button
+        onClick={async () => { setStopping(true); try { await stopScrape(); } catch { setStopping(false); } }}
+        disabled={stopping}
+        title="Stops after saving what's been read; Resume on the Scan page carries on from the same page"
+        style={{
+          padding: '4px 10px', borderRadius: 8, fontSize: 12, cursor: stopping ? 'default' : 'pointer',
+          background: 'rgba(255,107,107,0.12)', color: '#ff9b9b', border: '1px solid rgba(255,107,107,0.35)',
+        }}
+      >{stopping ? 'Stopping…' : 'Stop'}</button>
+    </div>
+  );
+}

package/.next/standalone/app/globals.css

@@ -38,3 +38,7 @@ html:has([data-field-question]) {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 3px;
 }
+
+/* Where the scan status bar sits: just under the header (app/components/ScanStatusBar.js). */
+:root { --scan-bar-top: 94px; }
+@media (max-width: 767px) { :root { --scan-bar-top: 66px; } }

package/.next/standalone/app/layout.js

@@ -19,6 +19,7 @@ export const metadata = {
 
 import UserProvider from './components/UserProvider';
 import StaleServerBanner from './components/StaleServerBanner';
+import ScanStatusBar from './components/ScanStatusBar';
 
 export default function RootLayout({ children }) {
   return (
@@ -30,6 +31,8 @@ export default function RootLayout({ children }) {
               is running. Every page, because the answer to "did my update
               work?" should not require finding the right screen. */}
           <StaleServerBanner />
+          {/* While a scan runs: what it's doing and today's budget, with Stop. */}
+          <ScanStatusBar />
         </UserProvider>
       </body>
     </html>

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

@@ -73,6 +73,8 @@ function HomeInner() {
   const [degree3, setDegree3] = useState([]);
   // Which degrees Network Circle draws: your connections alone until you pick more.
   const [degrees, setDegrees] = useState([1]);
+  // Tiers switched off in Network Circle's Filter panel (C and D make a lot of noise).
+  const [hiddenTiers, setHiddenTiers] = useState([]);
   const [selected, setSelected] = useState(null);
   const focusNodeRef = useRef(null);
   const [filter, setFilter] = useState('all');
@@ -170,10 +172,10 @@ function HomeInner() {
     () => (isDegreesMode ? connections : degrees.flatMap((d) => byDegree[d] || [])),
     [isDegreesMode, connections, degrees, byDegree],
   );
-  const filtered = useMemo(
-    () => (filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter)),
-    [networkRows, filter],
-  );
+  const filtered = useMemo(() => {
+    if (!isDegreesMode) return hiddenTiers.length ? networkRows.filter(c => !hiddenTiers.includes(c.tier)) : networkRows;
+    return filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter);
+  }, [isDegreesMode, networkRows, filter, hiddenTiers]);
   // 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
   // 2nd-degree row, degree2.some per connection — about 16M comparisons, twice
@@ -438,6 +440,8 @@ function HomeInner() {
           tierCounts={isDegreesMode ? stats?.tiers || {} : tierCountsOf(networkRows)}
           degrees={degrees}
           onDegreesChange={setDegrees}
+          hiddenTiers={hiddenTiers}
+          onHiddenTiersChange={setHiddenTiers}
           degreeCounts={{ 1: byDegree[1].length, 2: byDegree[2].length, 3: byDegree[3].length }}
           bridgeTierCounts={bridgeTierCounts}
         />

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

@@ -65,6 +65,8 @@ function SetupInner() {
   const [pages, setPages] = useRemembered('six-degrees-bridge-pages-v2', 100);
   // Also finish people mapped before, from the page each one's read stopped at.
   const [finish, setFinish] = useRemembered('six-degrees-bridge-finish', true);
+  // Experimental Auto-Bridge: all-day pacing and LinkedIn's own data (scripts/scrape.py --experimental).
+  const [experimental, setExperimental] = useRemembered('six-degrees-experimental-auto', false);
   const [error, setError] = useState(null);
   const logRef = useRef(null);
   // What's saved, for the question about your field: undefined while it
@@ -440,6 +442,16 @@ function SetupInner() {
                   <input type="checkbox" checked={finish} onChange={(e) => setFinish(e.target.checked)} disabled={running} />
                   Also finish people already mapped, from the page each one stopped at
                 </label>
+                <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', cursor: running ? 'default' : 'pointer' }}>
+                  <input type="checkbox" checked={experimental} disabled={running} style={{ marginTop: 3 }}
+                    onChange={(e) => setExperimental(e.target.checked)} />
+                  <span>
+                    <b style={{ color: '#FFD700' }}>Experimental:</b> all-day pacing. Up to 10 pages in a sitting,
+                    then a 45-minute rest; searches only from 9:00 to 19:00; at the daily budget it waits for it to
+                    free up instead of stopping; and it saves every page. It also reads LinkedIn&rsquo;s own data beside
+                    the page text, to fill gaps and measure how the two compare. It keeps running while the app is open.
+                  </span>
+                </label>
                 <div style={{ fontSize: 12, color: '#FFD700', lineHeight: 1.6 }}>
                   Every page is a LinkedIn search, so it rests 20 seconds before each one and a
                   minute after every 10, and a long list can take
@@ -449,7 +461,7 @@ function SetupInner() {
                   what it read and stops, and carries on from that page next time. Keep batches small.
                 </div>
               <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
-                <Btn onClick={() => run('auto-bridge', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish })} disabled={!canSearch || (order === 'score' && !tiers.length)} primary>
+                <Btn onClick={() => run('auto-bridge', { maxBridges: batch, tiers: order === 'score' ? tiers : [], order, maxPages: pages, deeper: finish, experimental })} disabled={!canSearch || (order === 'score' && !tiers.length)} primary>
                   {running && s.action === 'auto-bridge' ? 'Mapping…' : 'Map 2nd degree'}
                 </Btn>
                 <select

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

@@ -0,0 +1,21 @@
+// The thin ring of five bars round a person's dot: how much of their circle is
+// scanned (lib/reach.js scanBars). Blake's pick, design C: thin bars, a
+// catalyst's green outline on the dot itself, a small count badge.
+//
+// Plain path strings, so the Galaxy (d3) and Bridge Chains (React) draw the
+// same shape. Bars run clockwise from the top.
+
+const GAP = 0.32;     // radians between bars
+
+/** Five arcs of radius r around (0, 0): [{ d, i }] */
+export function ringSegments(r) {
+  const span = (2 * Math.PI - 5 * GAP) / 5;
+  return Array.from({ length: 5 }, (_, i) => {
+    const a0 = -Math.PI / 2 + GAP / 2 + i * (span + GAP);
+    const a1 = a0 + span;
+    const p = (a) => `${(r * Math.cos(a)).toFixed(2)} ${(r * Math.sin(a)).toFixed(2)}`;
+    return { i, d: `M${p(a0)} A${r} ${r} 0 0 1 ${p(a1)}` };
+  });
+}
+
+export const RING = { filled: '#1abc9c', empty: 'rgba(255,255,255,0.16)', badge: '#7F77DD' };

package/.next/standalone/lib/reach.js

@@ -45,6 +45,10 @@ export function reachIndex(connections = [], degree2 = [], notes = {}) {
   for (const url of notes?.read || []) {
     if (url) read.add(keyFor({ profile_url: url }));
   }
+  const lists = new Map();
+  for (const [url, list] of Object.entries(notes?.lists || {})) {
+    if (url && list) lists.set(keyFor({ profile_url: url }), list);
+  }
   const reachedFrom = new Map();
   for (const row of connections || []) {
     const from = row?.unlocked_from_bridge_id;
@@ -53,7 +57,7 @@ export function reachIndex(connections = [], degree2 = [], notes = {}) {
     if (!list) reachedFrom.set(from, (list = []));
     list.push(row);
   }
-  return { scanned, read, hidden, reachedFrom };
+  return { scanned, read, hidden, reachedFrom, lists };
 }
 
 /**
@@ -111,3 +115,20 @@ export function circleScanCost(pages = 100) {
     minutes: searches >= 100 ? 55 : Math.max(5, Math.round(searches * 0.55)),
   };
 }
+
+/**
+ * How much of someone's circle is scanned, as 0–5 bars for the ring round
+ * their dot; null for no ring (not scanned, or their list is hidden).
+ * A list read to the end is 5. Part-read, it's the pages read against
+ * LinkedIn's own count of the list (about 10 a page), 1 to 4; with no count
+ * (read before the scanner kept one), 2.
+ */
+export function scanBars(person, reach) {
+  const state = circleState(person, reach);
+  const list = person?.profile_url ? reach.lists?.get(keyFor(person)) : null;
+  if (state === 'hidden') return null;
+  if (!list) return state === 'scanned' ? 2 : null;
+  if (!list.more) return 5;
+  if (!list.total) return 2;
+  return Math.max(1, Math.min(4, Math.round((5 * Math.min(1, (list.pages * 10) / list.total)))));
+}

package/.next/standalone/lib/scraper-client.js

@@ -148,6 +148,7 @@ function take(s) {
     target: running ? s.target ?? null : starting ? now.target : null,
     startedAt: running ? s.startedAt ?? null : null,
     progress: running ? s.progress ?? null : null,
+    budget: running ? s.budget ?? null : null,
     log: running && Array.isArray(s.log) ? s.log : [],
     finished,
   });