six-degrees 0.7.0 → 1.0.0

package/.next/standalone/app/api/scraper/route.js

@@ -1,6 +1,7 @@
 import { spawn } from 'node:child_process';
 import { existsSync, readFileSync, mkdirSync, mkdtempSync, rmSync } from 'node:fs';
 import path from 'node:path';
+import { release as osRelease } from 'node:os';
 import { projectRoot, dataDir } from '../../../lib/paths';
 import { resolveProfile, networkCounts } from '../../../lib/profile';
 import { scanProgress, mappingNow } from '../../../lib/scan-progress';
@@ -9,13 +10,16 @@ import { pausedList, readProgress, readUnclear } from '../../../lib/paused';
 import { getDb, backUpDailyIfDue } from '../../../lib/db-client';
 import { db as notesDb } from '../../../lib/db';
 import { scanDoneNotification } from '../../../lib/notifications';
-import { registerScanState } from '../../../lib/scan-state';
+import { registerScanState, runningNow } from '../../../lib/scan-state';
 import { pendingImport } from '../../../lib/data-import';
 import { waitingPhotoCount } from '../../../lib/photos';
 import { readSettings } from '../../../lib/settings';
 import { riskAccepted, touchesLinkedIn, RISK_REFUSAL } from '../../../lib/scan-risk';
 import { reachIndex, circleState } from '../../../lib/reach';
-import { chromeInstalled, signedInFrom, SIGNED_IN_FILE, CHROME_REFUSAL } from '../../../lib/scanner-setup';
+import { chromeInstalled, signedInFrom, macosVersion, SIGNED_IN_FILE, CHROME_REFUSAL } from '../../../lib/scanner-setup';
+import { installKind } from '../../../lib/release';
+import { AUTO_REFUSAL, connectResultIn, connectMarks, inviteRefusal, personRefusal } from '../../../lib/auto-connect';
+import { markSentRows, awardXP, whose, requestStanding } from '../../../lib/requests';
 import {
   pythonLooker, thisHostKey, scannerCommand, installSteps, downloadedPython, downloadVerified,
   placeDownloadedPython, sweepSetupLeftovers, megabytes, SETUP_WORK_PREFIX, ScannerSetupError,
@@ -51,6 +55,8 @@ const state = registerScanState({
   failure: null,   // the last lines of stderr from a run that failed — its reason
   pages: 0,        // pages the running scan has read: the dots along the header's line (app/components/ScanTrail.js)
   found: [],       // how many people each of those pages found: the Scan page's cluster (app/components/ScanRadar.js)
+  invitee: null,   // Auto's person: { id, name, profileUrl, userId, bridgeId }, looked up here (connectTarget)
+  outcome: null,   // how Auto's request went: the scanner's "Connect result: …" line (lib/auto-connect.js)
 });
 
 // A page read, as scripts/scrape.py prints it: "  Page 3... " as a circle or a
@@ -122,6 +128,9 @@ function push(line) {
     }
     const got = t.match(PAGE_FOUND);
     if (got && state.found.length) state.found[state.found.length - 1] = Number(got[1]);
+    // Auto's one line saying how the request went (scrape.py main, --connect).
+    const result = state.action === 'connect' && connectResultIn(t);
+    if (result) state.outcome = result;
   }
   if (state.log.length > MAX_LOG) state.log.splice(0, state.log.length - MAX_LOG);
 }
@@ -378,6 +387,12 @@ async function status() {
       signedIn: signedIn(),
       // The one-time "I understand" before the first scan (lib/scan-risk.js).
       riskAccepted: scanRisk(),
+      // Step 1's App Management item (lib/scanner-setup.js appManagementStep):
+      // which macOS, so its button opens the pane where that version keeps it,
+      // and whether this is the Mac app, the name macOS asks about. null off a Mac.
+      mac: process.platform === 'darwin'
+        ? { version: macosVersion(process.platform, osRelease()), app: installKind(process.env, projectRoot()) === 'mac-app' }
+        : null,
     },
     network,
     photosWaiting,
@@ -529,8 +544,48 @@ const ACTIONS = {
   // 1,000 conversations at most), for the Social tab's "Read my whole history".
   'messages-full': { flag: '--messages --full-history', label: 'Reading your whole messages history' },
   photos:        { flag: '--save-photos', label: 'Saving profile photos to this computer' },
+  // Auto (Blake, 2026-10-03): one connection request, without a note, to one
+  // person pressed on a card. By id, looked up here (connectTarget); the URL
+  // and name that reach the command line come from the database, never the page.
+  connect:       { flag: '--connect', label: 'Sending a connection request to' },
 };
 
+/**
+ * Auto's person, by id: { person: { id, name, profileUrl, userId, bridgeId } },
+ * or why not: { error, status }. Anyone in your network on this computer with a
+ * LinkedIn profile who isn't already one of your connections (no copy of them
+ * at degree 1) and has no request out. The URL is checked like every other
+ * that reaches a command line.
+ */
+function connectTarget(id) {
+  try {
+    const me = resolveProfile({ create: false });
+    const db = getDb();
+    const row = me && db.prepare(
+      'SELECT id, name, degree, profile_url, source_connection_id FROM linkedin_connections WHERE id = ? AND user_id = ?',
+    ).get(String(id ?? ''), me.id);
+    if (!row) return personRefusal(null);
+    const why = personRefusal(row, requestStanding(db, { profileUrl: row.profile_url, userId: me.id }));
+    if (why) return why;
+    const profileUrl = cleanProfileUrl(row.profile_url);
+    if (!profileUrl) return { status: 400, error: `${row.name || 'Their'} LinkedIn profile address on file can’t be used.` };
+    return {
+      person: {
+        id: row.id, name: cleanName(row.name) || null, profileUrl, userId: me.id,
+        // Who you'd be asking through: the connection whose circle they're in.
+        bridgeId: row.degree === 2 ? row.source_connection_id ?? null : null,
+      },
+    };
+  } catch {
+    return personRefusal(null);
+  }
+}
+
+/** Auto's one-time yes (lib/auto-connect.js), given on the page that first offers it. */
+function autoAccepted() {
+  try { return Boolean(readSettings(getDb()).autoConnectAccepted); } catch { return false; }
+}
+
 /** Only a plain linkedin.com/in/ profile URL becomes an argument. */
 function cleanProfileUrl(raw) {
   const url = String(raw ?? '').trim();
@@ -651,6 +706,15 @@ export async function POST(request) {
   if (!Object.hasOwn(ACTIONS, action)) {
     return Response.json({ error: `Unknown action '${action}'` }, { status: 400 });
   }
+  // Auto: who, by id, and whether a request can go to them at all, before
+  // anything else is asked. Then its own one-time yes (the page asks it).
+  let invitee = null;
+  if (action === 'connect') {
+    const found = connectTarget(body.id);
+    if (found.error) return Response.json({ error: found.error }, { status: found.status });
+    invitee = found.person;
+    if (!autoAccepted()) return Response.json({ error: AUTO_REFUSAL, needsAutoAcceptance: true }, { status: 409 });
+  }
   // Nothing opens LinkedIn before the one-time "I understand" on the Scan page,
   // whichever button asked (lib/scan-risk.js).
   if (touchesLinkedIn(action) && !scanRisk()) {
@@ -707,12 +771,14 @@ export async function POST(request) {
   // never reaches the command line (a name or the URL looked up for it does),
   // and anything not shaped like one of our ids is dropped.
   const hintId = typeof body.id === 'string' && /^[\w-]{1,64}$/.test(body.id) ? body.id : null;
-  const target = name || profileUrl ? { id: hintId, name: name || person?.name || null } : null;
+  const target = invitee ? { id: invitee.id, name: invitee.name }
+    : name || profileUrl ? { id: hintId, name: name || person?.name || null } : null;
   // Nothing that searches LinkedIn starts during a cooldown; the scanner checks
   // too, this just says so before a process is spawned.
   // The 1st-degree scans aren't searches, but they open LinkedIn with automation too.
+  // Auto's request too: a pause after LinkedIn pushed back holds everything.
   const searches = spec.searches || action.startsWith('auto-bridge')
-    || ['bridge', 'rescrape', 'company', 'full', 'refresh'].includes(action);
+    || ['bridge', 'rescrape', 'company', 'full', 'refresh', 'connect'].includes(action);
   // A staged import replaces the network at the next start, so anything scanned
   // now would land in the copy that is about to be set aside. Setting the
   // scanner up touches no network data.
@@ -723,7 +789,15 @@ export async function POST(request) {
   if (searches && cooldown) {
     return Response.json({ error: `Scanning is paused until ${new Date(cooldown.until).toLocaleString()}: ${cooldown.reason}.`, cooldown }, { status: 409 });
   }
+  // Auto's caps (15 in any 24 hours, 80 in any 7 days) and the profile view it
+  // takes, said before a process starts; the scanner checks them again.
+  if (invitee) {
+    const capped = inviteRefusal(linkedinState(dataDir()));
+    if (capped) return Response.json({ error: capped }, { status: 409 });
+  }
   if (state.running) {
+    // One thing at a time: Auto waits for a scan like any other job.
+    if (invitee) return Response.json({ error: `${runningNow(state.action)}. Press Auto again once it has finished.`, action: state.action }, { status: 409 });
     return Response.json({ error: 'Something is already running.', action: state.action }, { status: 409 });
   }
 
@@ -759,7 +833,8 @@ export async function POST(request) {
       // "-" can then never be read as a flag of its own. Anyone found by
       // id is --bridge-url, which carries on where their last read stopped
       // unless told to start at page 1.
-      ...(name ? [`${spec.flag}=${name}`] : profileUrl ? [`--bridge-url=${profileUrl}`] : spec.flag.split(' ')),
+      ...(invitee ? [`--connect=${invitee.profileUrl}`, ...(invitee.name ? [`--connect-name=${invitee.name}`] : [])]
+        : name ? [`${spec.flag}=${name}`] : profileUrl ? [`--bridge-url=${profileUrl}`] : spec.flag.split(' ')),
       ...(profileUrl && action === 'bridge' && !deeper ? ['--from-start'] : []),
       ...(maxBridges && (action.startsWith('auto-bridge') || action === 'resume-all') ? [`--max-bridges=${maxBridges}`] : []),
       ...(tiers.length && action.startsWith('auto-bridge') ? [`--tiers=${tiers.join(',')}`] : []),
@@ -793,6 +868,8 @@ export async function POST(request) {
   state.found = [];
   state.stderrTail = [];
   state.failure = null;
+  state.invitee = invitee;
+  state.outcome = null;
   forgetChecks();
 
   // Name the profile outright. The scraper would otherwise ask the app which one
@@ -810,7 +887,29 @@ export async function POST(request) {
     SIX_DEGREES_FROM_APP: '1',
   };
 
+  /**
+   * Auto: a request LinkedIn showed as pending (or one already pending there)
+   * is marked as sent through the same store as the Connect button
+   * (lib/requests.js), before the job is seen to end, so every view that looks
+   * next finds it; its XP follows. Anything else marks nothing (TRAPS §7).
+   */
+  function markAutoSent() {
+    const who = state.invitee;
+    if (state.action !== 'connect' || !who || who.marked || !connectMarks(state.outcome)) return;
+    who.marked = true;
+    try {
+      const { saved, xp, user } = markSentRows(getDb(), {
+        connectionId: who.id, profileUrl: who.profileUrl, userId: who.userId, bridgeId: who.bridgeId,
+      });
+      if (saved) Promise.resolve(awardXP(whose(user), xp)).catch(() => {});
+      push('Marked as sent in Six Degrees.');
+    } catch (err) {
+      push(`Sent on LinkedIn, but it couldn’t be marked as sent here: ${err.message}`);
+    }
+  }
+
   function finish(code) {
+    markAutoSent();
     // A failure must say why. stderr is filtered while running because pip and
     // Playwright are noisy there, and that filter once swallowed the only line
     // explaining a failed scan, leaving just "exit 1". On a failure, show the
@@ -834,6 +933,8 @@ export async function POST(request) {
     state.exitCode = code;
     state.recent = [{
       action: state.action, target: state.target, startedAt: state.startedAt, exitCode: code, failure: state.failure,
+      // How Auto's request went, for the button that started it (lib/auto-connect.js connectOutcome).
+      ...(state.action === 'connect' ? { outcome: state.outcome } : {}),
     }, ...state.recent].slice(0, 5);
     // A scan that finished leaves a notification ("Scan done: …"); a stop or a failure doesn't.
     const done = scanDoneNotification({ action: state.action, target: state.target, exitCode: code, stopped, log: state.log.slice(-12), userId: profileId || null });

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

@@ -10,6 +10,12 @@
 // The row is a grid of 1fr | auto | 1fr: the two sides share what's left
 // equally, so the tabs sit in the middle whatever is beside them. A window too
 // narrow for that lets the sides shrink to fit before anything overlaps.
+//
+// On a computer the tabs sit on the header's bottom line, so the notch that
+// hangs under the line (ScanStatusBar) hangs from the tabs themselves (Blake,
+// 2026-10-03: "lower the section of buttons right to the line so the notch is
+// touching"). They're moved down, not laid out lower, so the header keeps its
+// height and every page under it stays where it was.
 
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import Link from 'next/link';
@@ -36,6 +42,11 @@ function useIsMobile() {
   return m;
 }
 
+// The header's padding top and bottom, and the gap under the row: the tabs
+// move down by the last two to reach the line.
+const PAD_Y = 20;
+const ROW_GAP = 8;
+
 const TITLE = { fontWeight: 700, margin: 0, whiteSpace: 'nowrap', background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' };
 
 /**
@@ -53,22 +64,27 @@ export default function AppHeader({ active, isMobile: mobileProp, csvMode = fals
   const mobileSeen = useIsMobile();
   const isMobile = mobileProp ?? mobileSeen;
   const own = !IS_DEMO && !csvMode;   // scanning and notifications are for your own network
+  const tabs = (
+    <AppTabs active={active} isMobile={isMobile} csvMode={csvMode} onMode={onMode}
+      after={own ? <AutoScanButton isMobile={isMobile} /> : null}>
+      {chips}
+    </AppTabs>
+  );
   return (
     <header style={{
-      position: 'relative', padding: isMobile ? '10px 12px' : '20px 30px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', flexShrink: 0,
+      position: 'relative', padding: isMobile ? '10px 12px' : `${PAD_Y}px 30px`, borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', flexShrink: 0,
       // Clear, or frosted glass on a glass theme (lib/themes.js).
       background: 'var(--sd-header)', backdropFilter: 'var(--sd-header-blur)', WebkitBackdropFilter: 'var(--sd-header-blur)',
     }}>
       <div style={isMobile
         ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 6, marginBottom: 4 }
-        : { display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 16, marginBottom: 8 }}>
+        : { display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', gap: 16, marginBottom: ROW_GAP }}>
         <Link href="/" style={{ textDecoration: 'none', justifySelf: 'start' }}>
           <Brand style={{ ...TITLE, fontSize: isMobile ? 16 : 28 }}>Six Degrees</Brand>
         </Link>
-        <AppTabs active={active} isMobile={isMobile} csvMode={csvMode} onMode={onMode}
-          after={own ? <AutoScanButton isMobile={isMobile} /> : null}>
-          {chips}
-        </AppTabs>
+        {isMobile ? tabs : (
+          <div style={{ alignSelf: 'end', position: 'relative', top: ROW_GAP + PAD_Y, zIndex: 2 }}>{tabs}</div>
+        )}
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', justifySelf: 'end', gap: isMobile ? 4 : 8 }}>
           {/* Settings: also in CSV or sample mode and on phones, so updates stay reachable */}
           {!IS_DEMO && <Link href="/settings" title="Settings" aria-label="Settings" style={{

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

@@ -17,6 +17,10 @@ const MODES = [
 ];
 const PAGES = [
   { key: 'paths', href: '/paths', label: 'Paths', color: 'var(--sd-green, #00ff88)', on: 'linear-gradient(135deg, #00ff88, #3498DB)', demo: true },
+  // Your network ranked by power, and the boards that read it (Blake, 2026-10-03:
+  // "stats and insights … based off their circles"). Purple to gold, its own colour.
+  // The sample and a CSV import have something to rank too, so it isn't `own`.
+  { key: 'insights', href: '/insights', label: 'Insights', color: 'var(--sd-purple, #c39bd3)', on: 'linear-gradient(135deg, #9B59B6, #FFD700)' },
   // Social is part of Outlink now (Messages & follow-ups); /social forwards there.
   { key: 'outlink', href: '/queue', label: 'Outlink', color: 'var(--sd-orange, #FF6B35)', on: 'linear-gradient(135deg, #FF6B35, #FFD700)', own: true },
   { key: 'scan', href: '/setup', label: 'Scan', color: 'var(--sd-fg-4, #666)', on: 'linear-gradient(135deg, #00ff88, #1abc9c)', own: true },

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',
+  };
+}