six-degrees 0.6.0 → 0.8.0

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';
@@ -17,6 +23,7 @@ import { useRouter } from 'next/navigation';
 import AppTabs from './AppTabs';
 import AutoScanButton from './AutoScanButton';
 import ScanTrail from './ScanTrail';
+import ClusterSpinner from './ClusterSpinner';
 import useScanner from './useScanner';
 import { useUser } from './UserProvider';
 import { scraperStatus, beginScrape, notReadyMessage, busyReason } from '../../lib/scraper-client';
@@ -35,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' };
 
 /**
@@ -52,27 +64,32 @@ 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(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={{
             width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', flexShrink: 0,
-            background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 14 : 16, textDecoration: 'none',
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-3, #888)', fontSize: isMobile ? 14 : 16, textDecoration: 'none',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}>{'⚙︎'}</Link>}
           {own && <NotificationBell isMobile={isMobile} onOpen={onOpenNote} openId={openNoteId} />}
@@ -121,7 +138,7 @@ function NotificationBell({ isMobile, onOpen, openId }) {
     <div style={{ position: 'relative' }}>
       <button onClick={() => setOpen(!open)} title="Notifications" aria-label={unseen ? `Notifications, ${unseen} new` : 'Notifications'} style={{
         width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', border: 'none', cursor: 'pointer',
-        background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 12 : 14,
+        background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-3, #888)', fontSize: isMobile ? 12 : 14,
         display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
       }}>
         🔔
@@ -136,41 +153,41 @@ function NotificationBell({ isMobile, onOpen, openId }) {
       {open && (
         <div style={{
           position: 'absolute', top: 40, right: 0, width: 320, maxHeight: 400,
-          background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(255,255,255,0.1)',
+          background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
           borderRadius: 12, overflow: 'hidden', zIndex: 100,
           backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
           boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
         }}>
-          <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <span style={{ fontWeight: 700, fontSize: 14 }}>Notifications</span>
             {unseen > 0 && (
               <button onClick={() => {
                 fetch('/api/notifications', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'mark-all-seen' }) });
                 setNotes((prev) => prev.map((n) => ({ ...n, seen: true })));
-              }} style={{ background: 'none', border: 'none', color: '#3498DB', fontSize: 11, cursor: 'pointer', fontWeight: 600 }}>
+              }} style={{ background: 'none', border: 'none', color: 'var(--sd-blue, #3498DB)', fontSize: 11, cursor: 'pointer', fontWeight: 600 }}>
                 Mark all read
               </button>
             )}
           </div>
           <div style={{ overflowY: 'auto', maxHeight: 340 }}>
             {notes.length === 0 ? (
-              <div style={{ padding: 20, textAlign: 'center', color: '#555', fontSize: 12 }}>No notifications yet</div>
+              <div style={{ padding: 20, textAlign: 'center', color: 'var(--sd-fg-5, #555)', fontSize: 12 }}>No notifications yet</div>
             ) : notes.slice(0, 20).map((n) => (
               <div key={n.id} role="button" tabIndex={0}
                 onClick={() => show(n)}
                 onKeyDown={(e) => { if (e.key === 'Enter') show(n); }}
-                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = n.seen ? 'transparent' : 'rgba(255,215,0,0.04)'; }}
                 style={{
-                  padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer',
+                  padding: '10px 16px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)', cursor: 'pointer',
                   background: n.seen ? 'transparent' : 'rgba(255,215,0,0.04)',
                 }}>
                 <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                   <span style={{ fontSize: 16 }}>{n.icon || '📌'}</span>
                   <div style={{ flex: 1 }}>
-                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? '#888' : '#fff' }}>{n.title}<span style={{ color: '#556', marginLeft: 6 }}>›</span></div>
-                    {n.message && <div style={{ fontSize: 10, color: '#666', marginTop: 2 }}>{n.message}</div>}
-                    <div style={{ fontSize: 9, color: '#444', marginTop: 3 }}>{new Date(n.created_at).toLocaleDateString()}</div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? 'var(--sd-fg-3, #888)' : 'var(--sd-fg-1, #fff)' }}>{n.title}<span style={{ color: 'var(--sd-fg-5, #556)', marginLeft: 6 }}>›</span></div>
+                    {n.message && <div style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', marginTop: 2 }}>{n.message}</div>}
+                    <div style={{ fontSize: 9, color: 'var(--sd-fg-5, #444)', marginTop: 3 }}>{new Date(n.created_at).toLocaleDateString()}</div>
                   </div>
                 </div>
               </div>
@@ -194,6 +211,7 @@ function RefreshButton({ isMobile }) {
   const busy = busyReason(scan);
   return (
     <button
+      className="cluster-host"
       onClick={async () => {
         try {
           const blocked = notReadyMessage(await scraperStatus());
@@ -206,7 +224,7 @@ function RefreshButton({ isMobile }) {
           );
           if (!ok) return;
           await beginScrape('refresh');
-          alert('Checking for new connections — watch it on the Scan page.');
+          alert('Checking for new connections. Watch it on the Scan page.');
         } catch (e) {
           alert(e.message);
         }
@@ -218,12 +236,14 @@ function RefreshButton({ isMobile }) {
         // Words, not a bare ↻ (Blake, 2026-10-02: "make it easier to check for new
         // connections"), and the same words as the Scan page's button.
         height: isMobile ? 28 : 32, padding: isMobile ? '0 10px' : '0 14px', borderRadius: 16,
-        border: '1px solid rgba(0,255,136,0.3)', cursor: busy ? 'not-allowed' : 'pointer', opacity: busy ? 0.45 : 1,
-        background: 'rgba(0,255,136,0.08)', color: '#bff5d9', fontSize: isMobile ? 11 : 12.5, fontWeight: 700,
+        // Its own check running stays bright, its cluster building; something else running greys it.
+        border: '1px solid rgba(0,255,136,0.3)', cursor: checking ? 'progress' : busy ? 'not-allowed' : 'pointer', opacity: busy && !checking ? 0.45 : 1,
+        background: 'rgba(0,255,136,0.08)', color: 'var(--sd-fg-1, #bff5d9)', fontSize: isMobile ? 11 : 12.5, fontWeight: 700,
         display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', flexShrink: 0,
       }}
     >
-      <span aria-hidden="true" style={{ fontSize: isMobile ? 12 : 14 }}>↻</span>
+      {/* A cluster forming: built once on hover, round and round while it checks */}
+      <ClusterSpinner size={isMobile ? 12 : 14} live={checking} />
       {checking ? 'Checking…' : isMobile ? 'New' : 'Check for new'}
     </button>
   );

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

@@ -11,15 +11,19 @@ import Link from 'next/link';
 import { IS_DEMO } from '../../lib/demo';
 
 const MODES = [
-  { key: 'network', label: 'Network Circle', short: 'Circle', on: { background: '#fff', color: '#000' }, off: { background: 'transparent', color: '#888' } },
-  { key: 'degrees', label: 'Degrees', on: { background: 'linear-gradient(135deg, #FFD700, #FF6B35)', color: '#000' }, off: { background: 'rgba(255,255,255,0.12)', color: '#fff' } },
-  { key: 'separation', label: 'Separation', on: { background: 'linear-gradient(135deg, #00E5FF, #FFD700 55%, #FF7043)', color: '#000' }, off: { background: 'rgba(255,255,255,0.12)', color: '#fff' } },
+  { key: 'network', label: 'Network Circle', short: 'Circle', on: { background: '#fff', color: '#000' }, off: { background: 'transparent', color: 'var(--sd-fg-3, #888)' } },
+  { key: 'degrees', label: 'Degrees', on: { background: 'linear-gradient(135deg, #FFD700, #FF6B35)', color: '#000' }, off: { background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)', color: 'var(--sd-fg-1, #fff)' } },
+  { key: 'separation', label: 'Separation', on: { background: 'linear-gradient(135deg, #00E5FF, #FFD700 55%, #FF7043)', color: '#000' }, off: { background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)', color: 'var(--sd-fg-1, #fff)' } },
 ];
 const PAGES = [
-  { key: 'paths', href: '/paths', label: 'Paths', color: '#00ff88', on: 'linear-gradient(135deg, #00ff88, #3498DB)', demo: true },
+  { 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: '#FF6B35', on: 'linear-gradient(135deg, #FF6B35, #FFD700)', own: true },
-  { key: 'scan', href: '/setup', label: 'Scan', color: '#666', on: 'linear-gradient(135deg, #00ff88, #1abc9c)', own: true },
+  { 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 },
 ];
 
 /**
@@ -33,7 +37,7 @@ export default function AppTabs({ active, isMobile = false, csvMode = false, onM
   const pad = isMobile ? '6px 10px' : '8px 16px';
   const base = { padding: pad, borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600, textDecoration: 'none' };
   return (
-    <div id="main-tabs" style={{ display: 'flex', gap: isMobile ? 2 : 4, background: 'rgba(255,255,255,0.08)', borderRadius: 8, padding: isMobile ? 2 : 3, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
+    <div id="main-tabs" data-glass-panel="bar" style={{ display: 'flex', gap: isMobile ? 2 : 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 8, padding: isMobile ? 2 : 3, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
       {MODES.map((m) => {
         const style = { ...base, cursor: 'pointer', ...(active === m.key ? m.on : m.off) };
         const label = isMobile && m.short ? m.short : m.label;
@@ -47,7 +51,7 @@ export default function AppTabs({ active, isMobile = false, csvMode = false, onM
         return (
           <Link key={p.key} href={p.href} title={p.title} aria-current={on ? 'page' : undefined} style={{
             ...base, display: 'flex', alignItems: 'center', gap: 4,
-            background: on ? p.on : 'rgba(255,255,255,0.06)', color: on ? '#000' : p.color,
+            background: on ? p.on : 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: on ? '#000' : p.color,
           }}>
             {p.label}{p.badge && <span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>{p.badge}</span>}
           </Link>

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/AutoScanButton.js

@@ -22,7 +22,7 @@ export default function AutoScanButton({ isMobile = false }) {
   };
   if (mine) {
     return (
-      <Link href="/setup" title="Auto scan is running: see it on the Scan page" style={{ ...style, background: 'rgba(0,255,136,0.15)', color: '#00ff88', border: '1px solid rgba(0,255,136,0.45)' }}>
+      <Link href="/setup" title="Auto scan is running: see it on the Scan page" style={{ ...style, background: 'rgba(0,255,136,0.15)', color: 'var(--sd-green, #00ff88)', border: '1px solid rgba(0,255,136,0.45)' }}>
         <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#00ff88' }} />Auto scan
       </Link>
     );
@@ -33,7 +33,7 @@ export default function AutoScanButton({ isMobile = false }) {
       onClick={() => { setStarting(true); startAutoScan().catch(() => setStarting(false)); }}
       disabled={busy}
       title={busy ? 'The scanner is busy: one scan at a time' : 'Start the all-day Auto-Bridge (experimental)'}
-      style={{ ...style, cursor: busy ? 'default' : 'pointer', background: 'rgba(255,255,255,0.04)', color: busy ? '#555' : '#8b9a9a', border: '1px solid rgba(255,215,0,0.25)' }}
+      style={{ ...style, cursor: busy ? 'default' : 'pointer', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: busy ? 'var(--sd-fg-5, #555)' : 'var(--sd-fg-3, #8b9a9a)', border: '1px solid rgba(255,215,0,0.25)' }}
     >
       <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#556' }} />Auto scan
     </button>

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

@@ -16,7 +16,7 @@ export default function Avatar({ person, size = 32, tierColors = FALLBACK }) {
   const c = tierColors[person?.tier] || '#666';
   const photo = localPhoto(person?.profile_image_url);
   return (
-    <span style={{
+    <span className="sd-dot-html" style={{
       position: 'relative', display: 'inline-block', width: size, height: size, flexShrink: 0,
       borderRadius: '50%', boxShadow: `0 0 0 ${size >= 24 ? 2 : 1}px ${c}`,
     }}>