six-degrees 0.7.0 → 0.8.0

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

@@ -0,0 +1,286 @@
+'use client';
+
+// Auto, next to every Connect: one connection request, sent for you from the
+// scanner's Chrome, without a note.
+//
+// Blake, 2026-10-03: "auto add and basically adds the person for them in the
+// card or wherever its available", then "i just want it next to connect button
+// but say auto and makes it the better pick visually". So Auto comes first and
+// wears the look Connect had (the gold-to-orange gradient), and the page's own
+// Connect, which opens their profile for you to connect yourself, steps back to
+// an outline beside it.
+//
+// One press, one person: it starts the scanner's `connect` job
+// (app/api/scraper/route.js, scripts/scrape.py connect_person) and says how it
+// went. It waits its turn like every Scan button (greyed out, with the reason,
+// while anything else runs). Before the first one ever it asks once, and the
+// answer is a setting (lib/auto-connect.js); the server refuses until it's
+// given. A request LinkedIn showed as pending is marked as sent by the server,
+// through the same store as Connect (lib/requests.js), and shown everywhere
+// here a moment after "Request sent" (lib/requests-client.js sawRequested).
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import useScanner from './useScanner';
+import { beginScrape, busyReason } from '../../lib/scraper-client';
+import { sawRequested } from '../../lib/requests-client';
+import { AUTO_EXPLAIN, AUTO_CONFIRM, INVITE_CAPS, connectOutcome } from '../../lib/auto-connect';
+
+export const AUTO_GRADIENT = 'linear-gradient(135deg, #FFD700, #FF6B35)';
+
+// How long "Request sent" shows before the card turns to its pending state.
+const SENT_SHOWN_MS = 2500;
+
+// Whether the one-time question has been answered yes, asked of the app once per page.
+let acceptedHere = false;
+
+async function autoAccepted() {
+  if (acceptedHere) return true;
+  try {
+    const r = await fetch('/api/settings', { cache: 'no-store' });
+    const d = await r.json();
+    acceptedHere = Boolean(d?.settings?.autoConnectAccepted);
+  } catch {
+    acceptedHere = false;   // can't tell: ask, which is harmless
+  }
+  return acceptedHere;
+}
+
+async function saveAccepted() {
+  const r = await fetch('/api/settings', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ settings: { autoConnectAccepted: new Date().toISOString() } }),
+  });
+  if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'Your answer couldn’t be saved.');
+  acceptedHere = true;
+}
+
+/** Auto's state for one person: press it, the one-time question, how it went. */
+function useAutoConnect(person, onSent) {
+  const scan = useScanner();
+  const [asking, setAsking] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState(null);     // { ok, text } once a press has an answer
+  const ours = useRef(new Set());                   // jobs this button started (by startedAt)
+  const shownJob = useRef(null);
+
+  const mine = scan.running && scan.action === 'connect' && Boolean(person?.id) && scan.target?.id === person.id;
+  const busy = scan.running && !mine && !sending ? busyReason(scan) : null;
+
+  const done = (r) => {
+    setResult(r);
+    if (r.marks) setTimeout(() => { sawRequested(person); onSent?.(person); }, SENT_SHOWN_MS);
+  };
+
+  // A request to this person started elsewhere (another window, or before a
+  // reload) that this page watched end: say how it went here too.
+  const last = (scan.finished || []).find((j) => j.action === 'connect' && j.target?.id === person?.id);
+  useEffect(() => {
+    if (!last || ours.current.has(last.startedAt) || shownJob.current === last.startedAt) return;
+    shownJob.current = last.startedAt;
+    done(connectOutcome(last));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [last?.startedAt]);
+
+  async function send() {
+    setAsking(false);
+    setSending(true);
+    setResult(null);
+    try {
+      const { startedAt, ended } = await beginScrape('connect', { id: person.id, name: person.name });
+      ours.current.add(startedAt);
+      shownJob.current = startedAt;
+      done(connectOutcome(await ended));
+    } catch (err) {
+      if (err.details?.needsAutoAcceptance) {
+        acceptedHere = false;
+        setAsking(true);
+      } else {
+        setResult({ ok: false, text: err.message });
+      }
+    } finally {
+      setSending(false);
+    }
+  }
+
+  async function press() {
+    if (sending || mine || busy) return;
+    setResult(null);
+    if (await autoAccepted()) send();
+    else setAsking(true);
+  }
+
+  async function confirm() {
+    try {
+      await saveAccepted();
+      send();
+    } catch (err) {
+      setAsking(false);
+      setResult({ ok: false, text: err.message });
+    }
+  }
+
+  return {
+    press, confirm, cancel: () => setAsking(false), dismiss: () => setResult(null),
+    asking, sending: sending || mine, busy, result,
+  };
+}
+
+/** The question before Auto's first request ever. Into <body>: a blurred panel would trap a fixed overlay (TheirCircle.js). */
+function AutoAsk({ onSend, onCancel }) {
+  const sendRef = useRef(null);
+  useEffect(() => {
+    sendRef.current?.focus();
+    const onKey = (e) => { if (e.key === 'Escape') onCancel(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onCancel]);
+  return createPortal(
+    <div role="dialog" aria-modal="true" aria-label="Auto sends connection requests" onClick={onCancel} style={{
+      position: 'fixed', inset: 0, zIndex: 400, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.72)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
+    }}>
+      <div data-auto-ask onClick={(e) => e.stopPropagation()} style={{
+        width: 'min(420px, 100%)', boxSizing: 'border-box', borderRadius: 14, padding: '20px 20px 16px',
+        background: 'var(--sd-surface, #12111c)', border: '1px solid rgba(255,215,0,0.28)',
+        boxShadow: '0 18px 60px rgba(0,0,0,0.5)', textAlign: 'left',
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
+          <span style={{
+            padding: '3px 9px', borderRadius: 6, background: AUTO_GRADIENT, color: '#000', fontWeight: 800, fontSize: 12,
+          }}>Auto</span>
+          <span style={{ fontSize: 15, fontWeight: 750, color: 'var(--sd-fg-1, #fff)' }}>Before the first one</span>
+        </div>
+        <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6, color: 'var(--sd-fg-2, #d6dbe4)' }}>{AUTO_CONFIRM}</p>
+        <p style={{ margin: '10px 0 0', fontSize: 12, lineHeight: 1.55, color: 'var(--sd-fg-3, #8b9a9a)' }}>
+          It never adds a note, and stops at {INVITE_CAPS.day} in any 24 hours and {INVITE_CAPS.week} in any 7 days.
+          This is asked once.
+        </p>
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 16 }}>
+          <button type="button" onClick={onCancel} style={{
+            padding: '9px 16px', borderRadius: 8, fontSize: 13, fontWeight: 650, cursor: 'pointer',
+            background: 'transparent', color: 'var(--sd-fg-2, #ccc)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.18)',
+          }}>Cancel</button>
+          <button ref={sendRef} type="button" onClick={onSend} style={{
+            padding: '9px 18px', borderRadius: 8, fontSize: 13, fontWeight: 800, cursor: 'pointer',
+            background: AUTO_GRADIENT, color: '#000', border: 'none',
+          }}>Send it</button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// minWidth: room for "Sending…", so the row doesn't jump when it changes.
+const SIZES = {
+  card: { padding: '10px 18px', fontSize: 13, radius: 8, minWidth: 104 },
+  quest: { padding: '7px 14px', fontSize: 12.5, radius: 8, minWidth: 92 },
+  row: { padding: '4px 9px', fontSize: 9.5, radius: 4, minWidth: 0 },
+  // Insights' Power Index rows: the size of the table's other buttons (Open circle, Scan circle).
+  table: { padding: '6px 11px', fontSize: 12, radius: 7, minWidth: 0 },
+};
+
+/** The Auto button itself: the gradient, the better pick. */
+function AutoButton({ auto, size, label = 'Auto' }) {
+  const s = SIZES[size] || SIZES.card;
+  // Also while "Request sent" shows, before the card turns to its pending state.
+  const off = auto.sending || Boolean(auto.busy) || Boolean(auto.result?.marks);
+  const title = auto.busy ? `${auto.busy}. Auto waits for it to finish.` : AUTO_EXPLAIN;
+  return (
+    <button type="button" data-auto-connect onClick={(e) => { e.stopPropagation(); auto.press(); }} disabled={off} title={title}
+      aria-label={auto.sending ? 'Sending the request' : `${label}: ${AUTO_EXPLAIN}`}
+      style={{
+        padding: s.padding, borderRadius: s.radius, fontSize: s.fontSize, fontWeight: 800, border: 'none', minWidth: s.minWidth,
+        background: AUTO_GRADIENT, color: '#000', cursor: off ? 'not-allowed' : 'pointer', opacity: auto.busy ? 0.45 : 1,
+        whiteSpace: 'nowrap', flexShrink: 0, boxShadow: off ? 'none' : '0 2px 12px rgba(255,140,50,0.28)',
+      }}>
+      {auto.sending ? 'Sending…' : label}
+    </button>
+  );
+}
+
+const resultColor = (r) => (r.ok ? 'var(--sd-green, #00ff88)' : 'var(--sd-coral, #ff8a7a)');
+
+/**
+ * Auto and the page's Connect, side by side: Auto first, as the better pick.
+ * `connect(secondary)` draws the page's own Connect, told whether it now stands
+ * second (an outline) or alone (as it always looked). Without Auto (`canAuto`
+ * false: the sample, a CSV, someone with no profile on file) Connect stands
+ * alone. `size`: 'card' (the person card: a line under it says what Auto does),
+ * 'quest' (Outlink's move cards), 'table' (Insights' rows) or 'row' (a list row: the line is the
+ * button's tooltip, and how it went shows in a small note under the buttons).
+ */
+export default function ConnectChoice({ person, canAuto = true, size = 'card', connect, onSent, style }) {
+  const available = canAuto && Boolean(person?.id) && Boolean(person?.profile_url);
+  if (!available) return connect(false);
+  // Keyed by person: a card reused for the next person starts fresh, never
+  // showing the last one's result as theirs.
+  return <WithAuto key={person.id} person={person} size={size} connect={connect} onSent={onSent} style={style} />;
+}
+
+function WithAuto({ person, size, connect, onSent, style }) {
+  const auto = useAutoConnect(person, onSent);
+  const ask = auto.asking && <AutoAsk onSend={auto.confirm} onCancel={auto.cancel} />;
+
+  if (size === 'row' || size === 'table') {
+    return (
+      <span style={{ position: 'relative', display: 'inline-flex', gap: 4, alignItems: 'center', flexShrink: 0, ...style }}
+        onClick={(e) => e.stopPropagation()}>
+        <AutoButton auto={auto} size={size} />
+        {connect(true)}
+        {auto.result && (
+          <span role="status" style={{
+            position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 20, width: 230, boxSizing: 'border-box',
+            padding: '7px 24px 7px 9px', borderRadius: 7, fontSize: 11, lineHeight: 1.45, fontWeight: 600, textAlign: 'left',
+            color: resultColor(auto.result), background: 'var(--sd-surface, #14131d)',
+            border: `1px solid ${auto.result.ok ? 'rgba(0,255,136,0.35)' : 'rgba(255,138,122,0.4)'}`, boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
+          }}>
+            {auto.result.text}
+            <button type="button" aria-label="Close" onClick={auto.dismiss} style={{
+              position: 'absolute', top: 3, right: 4, background: 'none', border: 'none', cursor: 'pointer',
+              color: 'var(--sd-fg-3, #888)', fontSize: 12, lineHeight: 1,
+            }}>×</button>
+          </span>
+        )}
+        {ask}
+      </span>
+    );
+  }
+
+  const card = size === 'card';
+  return (
+    <div style={style}>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'stretch', flexWrap: 'wrap' }}>
+        <AutoButton auto={auto} size={size} />
+        {connect(true)}
+      </div>
+      {card && (
+        <div style={{ fontSize: 11, lineHeight: 1.5, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 8 }}>
+          {auto.busy ? `${auto.busy}. Auto waits for it to finish.` : AUTO_EXPLAIN}
+        </div>
+      )}
+      {auto.result && (
+        <div role="status" style={{ fontSize: 12, lineHeight: 1.5, fontWeight: 650, marginTop: 8, color: resultColor(auto.result) }}>
+          {auto.result.text}
+        </div>
+      )}
+      {ask}
+    </div>
+  );
+}
+
+/**
+ * The page's Connect when it stands second to Auto: the same link, as an
+ * outline. `color` and `line` keep a page's own colour (Outlink's blue Add).
+ */
+export function secondaryLook(size = 'card', { color = 'var(--sd-gold, #FFD700)', line = 'rgba(255,215,0,0.5)' } = {}) {
+  const s = SIZES[size] || SIZES.card;
+  return {
+    padding: s.padding, borderRadius: s.radius, fontSize: s.fontSize, fontWeight: 700,
+    background: 'transparent', color, border: `1px solid ${line}`,
+    textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap', boxSizing: 'border-box',
+    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+  };
+}

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>
             );
           })}