six-degrees 0.7.0 → 1.0.0

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

@@ -35,6 +35,7 @@ import { useRouter } from 'next/navigation';
 import { circleIndex, MAX_DEGREE } from '../../lib/circle';
 import { localPhoto } from '../../lib/photos';
 import { reachIndex, reachState, circleState, readyByCircle, circleScanCost, scanBars } from '../../lib/reach';
+import { stoppedLine } from '../../lib/in-progress';
 import { reachSegments, RING } from '../../lib/dot-rings';
 import { ringLayout, chainTree, dotRadius, previewBand, tierBandLayout, circleActivity } from '../../lib/chain-layout';
 import { noteCircle } from '../../lib/notifications';
@@ -42,7 +43,7 @@ import { useUser } from './UserProvider';
 import { redundancy } from '../../lib/brokerage';
 import { keyFor, score } from '../../lib/separation';
 import { hasRequest } from '../../lib/requests-client';
-import { watchScanner, scannerNow, isCircleScan } from '../../lib/scraper-client';
+import { watchScanner, scannerNow, isCircleScan, beginScrape, scraperStatus, notReadyMessage, busyReason, resumePoint } from '../../lib/scraper-client';
 import useRequests from './useRequests';
 import { TIER_COLORS } from '../../lib/themes';
 
@@ -1111,6 +1112,17 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   const next = ordinal(depth + 1);
   const yours = person.degree === 1;
   const state = yours ? circleState(person, reach) : null;
+  // Read partway with nothing saved yet (everyone on those pages was already
+  // yours): that isn't a list that has been read, so it says it stopped, with
+  // the card's Resume (Blake, 2026-10-03: "the ones they stopped and would like
+  // to resume"). Where it stopped is the card's own answer, asked of the server
+  // (GET /api/scraper?resume=<id>): the map's scan notes don't say how far a
+  // list got. Undefined while it's asked.
+  const stopped = useStoppedAt(state === 'scanned' && !scanning ? person.id : null);
+  // Why Resume didn't start, kept here: a start greys this to "Scanning…" for a
+  // moment even when it's refused, and the button's own state would go with it.
+  const [problem, setProblem] = useState(null);
+  if (state === 'scanned' && !scanning && stopped === undefined) return null;   // never "has been read" by mistake
   const cost = circleScanCost();
   let title;
   let body;
@@ -1118,6 +1130,10 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   if (scanning) {
     title = `Scanning ${first}’s circle now`;
     body = 'Their people appear here as the scan saves them, every 10 pages.';
+  } else if (stopped) {
+    title = `${first}’s scan stopped partway`;
+    body = `${stoppedLine(stopped)}. Everyone on those pages was already one of your connections, so nobody new is here yet. Resume carries on from page ${stopped.nextPage}.`;
+    if (canScan) action = <ResumeHere person={person} stopped={stopped} problem={problem} setProblem={setProblem} />;
   } else if (state === 'hidden') {
     title = `${first} keeps their connections hidden`;
     body = 'LinkedIn doesn’t show their list, so there is no circle to scan.';
@@ -1149,7 +1165,7 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   return (
     <div role="status" style={{
       position: 'absolute', left: '50%', top, transform: 'translateX(-50%)', width: 'min(360px, calc(100% - 32px))',
-      background: 'color-mix(in srgb, var(--sd-bg) 94%, transparent)', border: `1px solid ${state === 'hidden' ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : 'rgba(0,255,136,0.25)'}`,
+      background: 'color-mix(in srgb, var(--sd-bg) 94%, transparent)', border: `1px solid ${state === 'hidden' ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : stopped && !scanning ? 'rgba(255,215,0,0.4)' : 'rgba(0,255,136,0.25)'}`,
       borderRadius: 12, padding: '14px 16px', textAlign: 'center',
     }}>
       <div style={{ fontSize: 13, fontWeight: 800, color: state === 'hidden' ? 'var(--sd-fg-3, #aaa)' : 'var(--sd-fg-1, #fff)', marginBottom: 6 }}>
@@ -1161,6 +1177,63 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   );
 }
 
+/**
+ * Where Resume would carry on with one of your connections ({ nextPage,
+ * pagesRead }), null when there's nothing to carry on with, undefined while
+ * it's asked; and never asked for null. Asked again whenever `id` comes back,
+ * as it does when a scan of theirs ends.
+ */
+function useStoppedAt(id) {
+  const [got, setGot] = useState({ id: null, resume: undefined });
+  useEffect(() => {
+    if (!id) return undefined;
+    let live = true;
+    resumePoint(id).then((r) => { if (live) setGot({ id, resume: r }); }, () => { if (live) setGot({ id, resume: null }); });
+    return () => { live = false; };
+  }, [id]);
+  if (!id) return null;
+  return got.id === id ? got.resume : undefined;
+}
+
+/**
+ * Resume for a circle that stopped partway, from the map: what the card's
+ * Resume does (Sidebar.js CreateClusterCard), the same check first, carrying on
+ * from the page it stopped at, never page 1 again. Once it starts, the empty
+ * circle says it's being scanned. Greyed out, saying why, while another scan runs.
+ */
+function ResumeHere({ person, stopped, problem, setProblem }) {
+  const busy = useSyncExternalStore(watchScanner, () => busyReason(scannerNow()), () => null);
+  const [checking, setChecking] = useState(false);
+  async function go() {
+    setProblem(null);
+    setChecking(true);
+    const blocked = notReadyMessage(await scraperStatus().catch(() => null));
+    setChecking(false);
+    if (blocked) {
+      setProblem(`${blocked} Open the Scan page to finish setting the scanner up.`);
+      return;
+    }
+    try {
+      await beginScrape('resume', { id: person.id });
+    } catch (e) {
+      setProblem(e.message || 'Could not start the scan.');
+    }
+  }
+  const off = Boolean(busy) || checking;
+  return (
+    <>
+      <button type="button" onClick={go} disabled={off} style={{
+        ...primary, border: 'none', cursor: off ? 'not-allowed' : 'pointer', opacity: off ? 0.45 : 1,
+      }}>Resume from page {stopped.nextPage}</button>
+      {(busy || problem) && (
+        <div style={{ fontSize: 10.5, color: problem ? '#ff8080' : 'var(--sd-fg-3, #888)', marginTop: 8 }}>
+          {problem || `${busy}. One scan at a time: this one can start when it finishes.`}
+        </div>
+      )}
+    </>
+  );
+}
+
 const crumb = { background: 'none', border: 'none', color: '#8fb8d6', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: 0 };
 const note = {
   fontSize: 11, padding: '6px 10px', borderRadius: 8, border: '1px solid', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.6)', pointerEvents: 'auto',

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

@@ -34,9 +34,16 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
   const what = (d) => DEGREE_IS[mode]?.[d];
   // Separation: your connections are the ways in, and all of them stay, whatever their tier.
   const waysIn = mode === 'separation';
+  // Degrees and Separation draw no one past the 2nd degree: the 3rd, the people
+  // company scans find, is on Network Circle. Its dot says so instead of "no one
+  // yet", which read as locked (Blake, 2026-10-03: "the 3rd one is locked even
+  // though … we have 3rd degrees unlocked by now").
+  const elsewhere = (d) => d === 3 && (mode === 'degrees' || mode === 'separation');
   const emptyTitle = (d, t) => (waysIn && d === 1
     ? 'Every connection stays a way in here, whatever their tier: the tiers choose who is ranked'
-    : `No ${t ? `${t}-Tier ` : 'one '}at ${DEGREE_NAMES[d]} degree yet`);
+    : elsewhere(d)
+      ? `${t ? `${t}-Tier at 3rd degree` : '3rd degree'}, the people company scans find, isn't drawn here. Network Circle shows ${t ? 'them' : 'it'}.`
+      : `No ${t ? `${t}-Tier ` : 'one '}at ${DEGREE_NAMES[d]} degree yet`);
   return (
     <div style={{ marginBottom: 18 }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>

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

@@ -10,6 +10,7 @@ import { useState } from 'react';
 import Link from 'next/link';
 import { limitQuestion, limitNote, SAFE_LIMITS } from '../../lib/search-risk';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
+import { inProgressSummary } from '../../lib/in-progress';
 
 const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
@@ -125,33 +126,57 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
   );
 }
 
+/**
+ * Everyone whose list was only partly read: the Scan page's In progress card,
+ * with Resume for each and Resume all. Blake, 2026-10-03: "we need to have some
+ * sort of in progress ones in the scanner as well to see all the ones they
+ * stopped and would like to resume". It used to be folded away in Fine-tune the
+ * scanner, where nobody who had just stopped a scan would look; now it stands
+ * on its own right after step 4, and only while someone is stopped partway.
+ * Each name opens their circle on the map (/?chain=<id>, the link Watch it fill
+ * in uses), to see how far it got.
+ */
 export function PausedList({ paused = [], onResume, onResumeAll, disabled }) {
   const [showAll, setShowAll] = useState(false);
   if (!paused.length) return null;
-  const legacy = paused.filter((p) => p.legacy).length;
   const shown = showAll ? paused : paused.slice(0, 8);
   return (
-    <div style={{ borderRadius: 8, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderBottom: LINE, flexWrap: 'wrap' }}>
-        <div style={{ flex: 1, minWidth: 200 }}>
-          <b style={{ fontSize: 13.5 }}>Paused: {paused.length} {paused.length === 1 ? 'list' : 'lists'} with more to read</b>
-          <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 2 }}>
-            Each carries on from the page it stopped at{legacy ? `; ${legacy} were read to page 10 before whole lists were read` : ''}.
+    <section aria-labelledby="in-progress-title" style={{
+      margin: '20px 0 4px', borderRadius: 14, overflow: 'hidden',
+      border: '1px solid rgba(255,215,0,0.3)', background: 'rgba(255,215,0,0.035)',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px 14px', borderBottom: LINE, flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: 220 }}>
+          <h2 id="in-progress-title" style={{ fontSize: 17, fontWeight: 800, margin: 0, display: 'flex', alignItems: 'center', gap: 9 }}>
+            {/* The pause sign the person card shows by a name that stopped partway (Sidebar.js StoppedPartway). */}
+            <span aria-hidden="true" style={{ display: 'inline-flex', gap: 2 }}>
+              <span style={{ width: 3, height: 12, borderRadius: 1, background: 'var(--sd-gold, #FFD700)' }} />
+              <span style={{ width: 3, height: 12, borderRadius: 1, background: 'var(--sd-gold, #FFD700)' }} />
+            </span>
+            In progress
+          </h2>
+          <div style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 4, lineHeight: 1.5 }}>
+            {inProgressSummary(paused)}
           </div>
         </div>
-        <button onClick={onResumeAll} disabled={disabled} style={{ ...btn, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' : 'linear-gradient(135deg, #3498DB, #9B59B6)' }}>
+        <button onClick={onResumeAll} disabled={disabled} style={{ ...btn, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' : 'linear-gradient(135deg, #3498DB, #9B59B6)', ...(disabled ? {} : { color: '#fff' }) }}>
           Resume all
         </button>
       </div>
       <div>
         {shown.map((p) => (
-          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
+          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 18px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
             <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[p.tier] || '#667', flexShrink: 0 }} />
             <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
+              <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                <Link href={`/?chain=${encodeURIComponent(p.id)}`} title={`See ${p.name}’s circle on the map`} style={{
+                  color: 'var(--sd-fg-1, #fff)', textDecoration: 'underline', textDecorationColor: 'rgba(var(--sd-ink, 255, 255, 255), 0.35)', textUnderlineOffset: 3,
+                }}>{p.name}</Link>
+              </div>
               <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)' }}>
                 Read to page {p.pagesRead} · carries on at {p.nextPage}
-                {p.at ? ` · ${day(p.at)}` : ''}
+                {/* Kept whole: on a phone "Oct" and "3" landed on two lines. */}
+                {p.at ? <> <span style={{ whiteSpace: 'nowrap' }}>· {day(p.at)}</span></> : ''}
                 {p.unclear >= 2 ? ' · came back unclear twice, so it waits at the back of Resume all' : ''}
               </div>
             </div>
@@ -162,11 +187,11 @@ export function PausedList({ paused = [], onResume, onResumeAll, disabled }) {
         ))}
       </div>
       {paused.length > 8 && (
-        <button onClick={() => setShowAll(!showAll)} style={{ ...linkBtn, padding: '10px 14px' }}>
+        <button onClick={() => setShowAll(!showAll)} style={{ ...linkBtn, padding: '10px 18px' }}>
           {showAll ? 'Show fewer' : `Show all ${paused.length}`}
         </button>
       )}
-    </div>
+    </section>
   );
 }
 

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

@@ -13,6 +13,7 @@ import { buildQuest, XP_SEND, STAGE_SIZE } from '../../lib/quest';
 import { initialsFor } from '../../lib/tiers';
 import { localPhoto } from '../../lib/photos';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
+import ConnectChoice from './AutoConnect';
 
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
@@ -49,7 +50,8 @@ function Ring({ progress, size = 86, color = '#FF6B35', children }) {
   );
 }
 
-export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo }) {
+// canAuto: Auto beside every invite (components/AutoConnect.js; Blake, 2026-10-03), on your own network.
+export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo, canAuto = false }) {
   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);
@@ -57,6 +59,11 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
 
   async function send(person, cluster) {
     await onSend(person);
+    cheer(person, cluster);
+  }
+
+  // The points and the circle's progress, for an invite sent by hand or by Auto.
+  function cheer(person, cluster) {
     const done = cluster.done + 1;
     const first = String(cluster.bridge.name || '').split(/[\s,]+/)[0];
     setToast(done >= cluster.targets.length
@@ -119,12 +126,17 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
                 <div style={{ fontSize: 11.5, color: 'var(--sd-fg-2, #aab7b7)', margin: '10px 0' }}>
                   via <b style={{ color: TIER[cluster.bridge.tier] }}>{cluster.bridge.name}</b> · their circle {cluster.done}/{cluster.targets.length} this stage
                 </div>
-                <div style={{ display: 'flex', gap: 8 }}>
-                  {person.profile_url && (
-                    <a href={person.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>Open on LinkedIn</a>
-                  )}
-                  <button onClick={() => send(person, cluster)} style={btnHot}>I sent an invite · +{XP_SEND[person.tier] || 2}</button>
-                </div>
+                <ConnectChoice person={person} canAuto={canAuto} size="quest" onSent={(p) => cheer(p, cluster)} connect={(second) => {
+                  const by = (
+                    <>
+                      {person.profile_url && (
+                        <a href={person.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>Open on LinkedIn</a>
+                      )}
+                      <button onClick={() => send(person, cluster)} style={second ? btnGhost : btnHot}>I sent an invite · +{XP_SEND[person.tier] || 2}</button>
+                    </>
+                  );
+                  return second ? by : <div style={{ display: 'flex', gap: 8 }}>{by}</div>;
+                }} />
               </div>
             ))}
           </div>
@@ -186,10 +198,19 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
                   <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name} <span style={{ color: TIER[p.tier], fontSize: 11 }}>{p.tier}</span></div>
                   <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.headline}</div>
                 </div>
-                {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
-                {sent
-                  ? <button onClick={() => onUndo(p)} style={{ ...btnGhost, color: 'var(--sd-green, #00ff88)' }}>Sent ✓ (undo)</button>
-                  : <button onClick={() => send(p, expanded)} style={btnHot}>Sent · +{XP_SEND[p.tier] || 2}</button>}
+                {sent ? (
+                  <>
+                    {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
+                    <button onClick={() => onUndo(p)} style={{ ...btnGhost, color: 'var(--sd-green, #00ff88)' }}>Sent ✓ (undo)</button>
+                  </>
+                ) : (
+                  <ConnectChoice person={p} canAuto={canAuto} size="quest" onSent={(x) => cheer(x, expanded)} connect={(second) => (
+                    <>
+                      {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
+                      <button onClick={() => send(p, expanded)} style={second ? btnGhost : btnHot}>Sent · +{XP_SEND[p.tier] || 2}</button>
+                    </>
+                  )} />
+                )}
               </div>
             );
           })}

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

@@ -13,7 +13,7 @@
 // (lib/island.js). It only reports: the pacing and the caps live in the scanner
 // (scripts/scrape.py, lib/linkedin-limits.js).
 
-import { useEffect, useState, useSyncExternalStore } from 'react';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { watchScanner, scannerNow, stopScrape } from '../../lib/scraper-client';
@@ -35,6 +35,7 @@ const WHAT = {
   photos: 'Saving photos',
   messages: 'Reading your messages list',
   'messages-full': 'Reading your whole messages history',
+  connect: 'Sending a connection request',
 };
 
 // Green while there's plenty left, amber past 60%, red past 90%.
@@ -59,6 +60,7 @@ export default function ScanStatusBar() {
   // be swapped for a new one, or wrap to two rows.
   const pathname = usePathname();
   const [top, setTop] = useState(null);
+  const barRef = useRef(null);
   const [centre, setCentre] = useState(null);
   useEffect(() => {
     let header = null;
@@ -82,7 +84,13 @@ export default function ScanStatusBar() {
     };
     const later = () => { if (!queued) queued = requestAnimationFrame(measure); };
     later();
-    const mo = new MutationObserver(later);
+    // Measuring waits for the next frame, which drew the notch once over the
+    // blank page: hidden here, before that frame is painted, the moment the
+    // header goes (and shown again the moment it's back).
+    const mo = new MutationObserver(() => {
+      if (barRef.current) barRef.current.style.visibility = document.querySelector('header') ? '' : 'hidden';
+      later();
+    });
     mo.observe(document.body, { childList: true, subtree: true });
     window.addEventListener('resize', later);
     return () => { cancelAnimationFrame(queued); ro?.disconnect(); mo.disconnect(); window.removeEventListener('resize', later); };
@@ -98,6 +106,11 @@ export default function ScanStatusBar() {
     return () => setNotchShown(false);
   }, [showing]);
   if (!status && !tabs) return null;
+  // Only with a page under it: between tabs the next page has no header until
+  // it has loaded, and the notch would hang over a blank screen (Blake,
+  // 2026-10-03: "the notch is seen the whole time as the screen blanks out
+  // loading to the next … have it appear with the section"). It fades in with it.
+  if (top == null) return null;
 
   const p = job?.progress;
   const step = p?.kind === 'batch' && p.total ? `${p.current || p.done || 0} of ${p.total}`
@@ -118,10 +131,12 @@ export default function ScanStatusBar() {
 
   return (
     <div
+      ref={barRef}
       data-glass-panel="bar"
+      className="notch-in"
       onMouseLeave={() => setOpen(false)}
       style={{
-        position: 'fixed', left, top: top ?? 'var(--scan-bar-top, 94px)', transform: 'translateX(-50%)', zIndex: 60,
+        position: 'fixed', left, top, transform: 'translateX(-50%)', zIndex: 60,
         maxWidth: 'calc(100vw - 16px)',
         padding: expanded && status ? '4px 6px 10px' : '4px 6px 5px',
         borderRadius: '0 0 14px 14px', border: `1px solid ${running ? 'rgba(0,255,136,0.25)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`, borderTop: 'none',

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

@@ -57,9 +57,17 @@ export default function ScanTrail({ inset }) {
   useEffect(() => {
     const el = boxRef.current;
     if (!el) return undefined;
-    const ro = new ResizeObserver(() => setRoom(Math.max(8, Math.floor(el.clientWidth / STEP) - 4)));
+    // On a computer the tabs sit on this same line (AppHeader): the dots stop short of them.
+    const fit = () => {
+      const box = el.getBoundingClientRect();
+      const tabs = document.getElementById('main-tabs')?.getBoundingClientRect();
+      const width = tabs && tabs.left > box.left ? Math.min(box.width, tabs.left - box.left - 12) : box.width;
+      setRoom(Math.max(8, Math.floor(width / STEP) - 4));
+    };
+    const ro = new ResizeObserver(fit);
     ro.observe(el);
-    return () => ro.disconnect();
+    window.addEventListener('resize', fit);
+    return () => { ro.disconnect(); window.removeEventListener('resize', fit); };
   }, []);
 
   const { pages } = shown;
@@ -69,7 +77,9 @@ export default function ScanTrail({ inset }) {
   for (let i = first; i < pages; i++) dots.push(i);
   const title = `${shown.label}: ${pages === 0 ? 'starting' : `${pages.toLocaleString('en-US')} page${pages === 1 ? '' : 's'} read`}. Open the Scan page`;
   return (
-    <div ref={boxRef} aria-hidden={!shown.on} style={{ position: 'absolute', left: inset, right: inset, bottom: -4, height: 7, pointerEvents: 'none' }}>
+    // Above the page under the header: the dots straddle its line, and a page
+    // drawn after the header (Paths' panel) covered their lower half.
+    <div ref={boxRef} aria-hidden={!shown.on} style={{ position: 'absolute', left: inset, right: inset, bottom: -4, height: 7, pointerEvents: 'none', zIndex: 5 }}>
       <style>{CSS}</style>
       <Link href="/setup" title={title} tabIndex={shown.on ? 0 : -1} className="scan-trail" style={{
         position: 'absolute', left: 0, top: 0, height: 7, display: 'flex', alignItems: 'center', gap: STEP - 5,

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

@@ -380,28 +380,13 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
       flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
       background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', overflow: 'hidden',
     }}>
-      {/* ── Header: what this is, how many, and what it can't say ── */}
+      {/* ── Top: the search box, and on a phone what it ranks ── */}
       <div style={{ padding: `${notch ? 48 : 14}px ${SIDE}px 8px`, flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: isMobile ? 'baseline' : 'center', gap: 10, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
-          <h2 title={RANK_NOTE} style={{
-            margin: 0, fontSize: 18, fontWeight: 800,
-            background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
-            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
-          }}>Separation</h2>
-          <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #aaa)', ...(isMobile ? {} : { flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }}>
-            {isMobile
-              ? `${plural(summary.people, 'person', 'people')} · ${fmt(summary.byTier.S)} S · ${fmt(summary.multi)} with 2+ ways`
-              : `${plural(summary.people, 'person', 'people')} two steps away · ${fmt(summary.byTier.S)} S-tier · ${fmt(summary.multi)} reachable 2+ ways · through ${fmt(summary.bridges)} of your connections`}
-          </span>
-          {!isMobile && searchBox}
-        </div>
-        {/* The whole population at a glance: one segment per tier, to scale. */}
-        <div aria-hidden="true" style={{ display: 'flex', gap: 1, height: 6, borderRadius: 3, overflow: 'hidden', margin: '8px 0 6px', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
-          {TIERS.filter((t) => summary.byTier[t] > 0).map((t) => (
-            <div key={t} style={{ flex: summary.byTier[t], background: tierColors[t] || '#555' }} />
-          ))}
-        </div>
-        {/* On a computer the line says it on its own; what it ranks is the title's tooltip (RANK_NOTE). */}
+        {/* Blake, 2026-10-03: no title, count line or tier strip up here ("remove this
+            line of text … and the actual line of visual of the tiers"); the map and the
+            slider say it. The search box keeps the row. */}
+        {!isMobile && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{searchBox}</div>}
+        {/* What it ranks, on a phone, where there's room under the search box. */}
         {isMobile && (
           <div style={{ fontSize: 11, color: 'var(--sd-fg-4, #777)', lineHeight: 1.4 }}>Ranks reachability, not people · lists scanned so far</div>
         )}
@@ -710,7 +695,6 @@ const MAP_CSS = `
   .sepmap .in { animation: none; }
 }
 `;
-const RANK_NOTE = 'Ranked by each person’s own score (title, company, headline). It ranks reachability, not people. From the lists scanned so far.';
 const HALO = { paintOrder: 'stroke', stroke: 'var(--sd-bg)', strokeWidth: 3, strokeLinejoin: 'round' };
 const at = (x, y) => ({ transform: `translate(${x}px, ${y}px)` });