six-degrees 0.7.0 → 1.0.0

package/.next/standalone/app/components/settings/UsageSection.js

@@ -19,7 +19,7 @@ import Link from 'next/link';
 import { Section, Body, LINE } from '../ui';
 import {
   AUTO, PEOPLE_PER_SEARCH, DANGER_AT, REPORTED_MONTH, LEVELS, usageLevel, warningParts, estimate,
-  barMax, pacificText, whenText, untilText, agoText, hoursText,
+  barMax, pacificText, whenText, untilText, agoText, hoursText, INVITE_CAPS, REPORTED_WEEKLY_INVITES,
 } from '../../../lib/usage';
 import { RESTRICTED_AT, RISKY_DAILY, SAFE_LIMITS } from '../../../lib/search-risk';
 import { paceOf, searchesPerHour } from '../../../lib/scan-pace';
@@ -100,6 +100,51 @@ function Meter({ title, used, of, max, color, ticks = [], band, children }) {
   );
 }
 
+/**
+ * Auto's connection requests (lib/auto-connect.js): the last 24 hours and the
+ * last 7 days, each against its cap, one bar under the other. Its own caps,
+ * not the search budget: a request is the one thing Six Degrees sends.
+ */
+function InviteMeter({ day, week, freesAt, weekFreesAt, now }) {
+  const known = Number.isFinite(day) && Number.isFinite(week);
+  const bars = [
+    { label: 'Last 24 hours', used: day, cap: INVITE_CAPS.day },
+    { label: 'Last 7 days', used: week, cap: INVITE_CAPS.week },
+  ];
+  const left = known ? Math.max(0, Math.min(INVITE_CAPS.day - day, INVITE_CAPS.week - week)) : null;
+  return (
+    <div style={{ marginTop: 18 }} data-usage="invites">
+      <div style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #e8e8ee)' }}>Connection requests (Auto)</div>
+      {bars.map((b) => (
+        <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
+          <span style={{ flex: '0 0 88px', fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)' }}>{b.label}</span>
+          <div style={{ position: 'relative', flex: 1, height: 10, borderRadius: 5, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)' }}>
+            <div style={{
+              position: 'absolute', top: 0, bottom: 0, left: 0, borderRadius: 5, transition: 'width 0.4s ease',
+              width: Number.isFinite(b.used) ? at(b.used, Math.max(b.cap, b.used)) : 0,
+              background: b.used >= b.cap ? '#ff6b6b' : 'linear-gradient(90deg, #FFD700, #FF6B35)',
+            }} />
+          </div>
+          <span style={{ flex: '0 0 auto', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums', minWidth: 58, textAlign: 'right' }}>
+            <b style={{ fontSize: 15, color: 'var(--sd-fg-1, #fff)' }}>{count(b.used)}</b> of {b.cap}
+          </span>
+        </div>
+      ))}
+      <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 6 }}>
+        {!known ? null
+          : freesAt ? <>Auto&rsquo;s {INVITE_CAPS.day} a day are used. The next one frees {whenAndUntil(freesAt, now)}.</>
+          : weekFreesAt ? <>Auto&rsquo;s {INVITE_CAPS.week} a week are used. The next one frees {whenAndUntil(weekFreesAt, now)}.</>
+          : <>{plural(left, 'request')} left for Auto now.</>}
+        <div style={small}>
+          Each press of Auto sends one request from the scanner&rsquo;s Chrome, without a note, and opens their
+          profile once (a profile view). It stops at {INVITE_CAPS.day} in any 24 hours and {INVITE_CAPS.week} in any 7 days.
+          LinkedIn doesn&rsquo;t publish its invitation limit; people commonly report about {REPORTED_WEEKLY_INVITES} a week.
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Row({ label, children }) {
   return (
     <div style={{ display: 'flex', gap: '4px 16px', flexWrap: 'wrap', padding: '10px 0', borderTop: LINE, fontSize: 13 }}>
@@ -260,6 +305,8 @@ export default function UsageSection() {
         </div>
       </Meter>
 
+      <InviteMeter day={u.invitesToday} week={u.invitesWeek} freesAt={u.invitesFreeAt} weekFreesAt={u.invitesWeekFreeAt} now={now} />
+
       <div style={{ marginTop: 22 }}>
         <Row label="Speed">
           {pace.label}: about {searchesPerHour(limits.pace)} searches an hour at most while a scan runs.
@@ -301,8 +348,8 @@ export default function UsageSection() {
       </div>
 
       <div style={{ ...small, marginTop: 14, paddingTop: 12, borderTop: LINE }}>
-        Where these numbers come from: Six Degrees writes down every search and profile view it makes on your
-        LinkedIn account, on this computer, and counts them here. Searches you make yourself on linkedin.com
+        Where these numbers come from: Six Degrees writes down every search, profile view and Auto request it makes
+        on your LinkedIn account, on this computer, and counts them here. Searches you make yourself on linkedin.com
         aren&rsquo;t in it, and LinkedIn shows no count of its own. The {RESTRICTED_AT} searches and the 20 to 25
         profile views are what happened to one real account, not safe limits. Change the budget on the
         {' '}<Link href="/setup" style={link}>Scan page</Link>, under Fine-tune the scanner. Nothing here is sent anywhere.

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

@@ -107,13 +107,12 @@ html:has([data-field-question]) {
   border-radius: 3px;
 }
 
-/* Where the scan status bar sits: just under the header (app/components/ScanStatusBar.js). */
-:root { --scan-bar-top: 94px; }
-@media (max-width: 767px) { :root { --scan-bar-top: 66px; } }
 
 /* The notch's running dot (app/components/ScanStatusBar.js). */
 @keyframes notch-pulse { 50% { opacity: 0.35; } }
 @media (prefers-reduced-motion: no-preference) { .notch-pulse { animation: notch-pulse 1.6s ease-in-out infinite; } }
+@keyframes notch-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .notch-in { animation: notch-in 0.25s ease-out; } }
 
 /* The Social tab's CRM (app/social/Crm.js): the list and the person side by
    side, stacked on a phone. In Pipeline the board takes the whole width and

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

@@ -0,0 +1,220 @@
+'use client';
+
+// Insights: your network ranked by power, and the boards that read it
+// (Blake, 2026-10-03: "stats and insights … data and insights based off their
+// circles … almost no moral tie to the person … base it off value like
+// richest person or highest power people … an intro perspective look at the
+// data of what we have"). Mock-up B, "The Power Index", is the page; mock-up
+// C, the scrolling report, is its Report view.
+//
+// Its views sit in the notch under the header, as every page's do
+// (lib/island.js setNotchTabs): People, Kingmakers, Gatekeepers, Companies,
+// Industries and Report. Every number comes from lib/insights-board.js, which
+// says where each came from; nothing here is estimated and nothing is about
+// money.
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import AppHeader from '../components/AppHeader';
+import OnboardingGate from '../components/OnboardingGate';
+import { useUser } from '../components/UserProvider';
+import useRequests from '../components/useRequests';
+import { setNotchTabs } from '../../lib/island';
+import { loadNetwork } from '../../lib/network';
+import { loadCsvNetwork } from '../../lib/csv';
+import { loadScanNotes, NO_SCAN_NOTES } from '../../lib/scraper-client';
+import { hasRequest } from '../../lib/requests-client';
+import { networkLevel } from '../../lib/level';
+import { IS_DEMO } from '../../lib/demo';
+import {
+  boardBase, powerIndex, kingmakers, gatekeepers, hiddenGiants, tierByRarity, untapped,
+  companyPower, industries, titleLadder, coverage, howSure, reachSummary,
+} from '../../lib/insights-board';
+import PeopleView from '../components/insights/PeopleView';
+import { KingmakersBoard, GatekeepersBoard, CompaniesBoard, IndustriesBoard } from '../components/insights/Boards';
+import Report from '../components/insights/Report';
+import { fmt, useIsMobile, TITLE } from '../components/insights/parts';
+
+const VIEWS = ['people', 'kingmakers', 'gatekeepers', 'companies', 'industries', 'report'];
+const LABELS = { people: 'People', kingmakers: 'Kingmakers', gatekeepers: 'Gatekeepers', companies: 'Companies', industries: 'Industries', report: 'Report' };
+
+export default function InsightsPage() {
+  // Suspense because the page reads the address's ?view= (useSearchParams),
+  // which Next requires to sit inside one for the page to build (TRAPS §41).
+  return <OnboardingGate><Suspense><InsightsInner /></Suspense></OnboardingGate>;
+}
+
+function InsightsInner() {
+  const { userId } = useUser();
+  const isMobile = useIsMobile();
+  const asked = useSearchParams().get('view');
+  const [view, setView] = useState(() => (VIEWS.includes(asked) ? asked : 'people'));
+  const [net, setNet] = useState(null);   // { degree1, degree2, degree3, notes, source, budget }
+  const [failed, setFailed] = useState(null);
+
+  useEffect(() => {
+    if (IS_DEMO || !userId) return;
+    let live = true;
+    (async () => {
+      try {
+        // The sample (this window) or a kept CSV import, else your own network:
+        // lib/csv.js openNetworkSource, the one rule every page opens on.
+        const local = await loadCsvNetwork();
+        if (local) {
+          if (live) setNet({ degree1: local.degree1 || [], degree2: local.degree2 || [], degree3: [], notes: NO_SCAN_NOTES, source: local.source || 'csv', budget: null });
+          return;
+        }
+        // Your daily search budget and speed, for what scanning the next circles would take:
+        // ?usage only reads the scanner's files (no checks, no Python, nothing written).
+        const usage = fetch('/api/scraper?usage').then((r) => (r.ok ? r.json() : null)).catch(() => null);
+        const [n, notes, used] = await Promise.all([loadNetwork(userId), loadScanNotes(), usage]);
+        const limits = used?.limits;
+        if (live) setNet({ ...n, notes, source: 'own', budget: limits ? { daily: limits.daily, pace: limits.pace } : null });
+      } catch (e) {
+        if (live) setFailed(e.message || 'The network couldn’t be loaded.');
+      }
+    })();
+    return () => { live = false; };
+  }, [userId]);
+
+  // The quick part first: the ranking and the boards that read circles.
+  const base = useMemo(() => (net ? boardBase(net) : null), [net]);
+  const data = useMemo(() => {
+    if (!base) return null;
+    const index = powerIndex(base);
+    return {
+      index, reach: reachSummary(base), kings: kingmakers(base), gates: gatekeepers(base), hidden: hiddenGiants(base),
+      grid: tierByRarity(base), cover: coverage(base, net.budget || {}), sure: howSure(index),
+    };
+  }, [base, net]);
+  // Companies and titles read every headline (about half a second on 7,000
+  // people), so they follow once the table is on screen.
+  const [slow, setSlow] = useState(null);
+  useEffect(() => {
+    if (!base) return undefined;
+    const t = setTimeout(() => {
+      const companies = companyPower(base);
+      setSlow({ base, companies, industries: industries(companies), ladder: titleLadder(base) });
+    }, 30);
+    return () => clearTimeout(t);
+  }, [base]);
+  const heavy = slow && slow.base === base ? slow : null;
+
+  const requests = useRequests();
+  const isAsked = useCallback((row) => hasRequest(row, requests), [requests]);
+  const open = useMemo(() => (base ? untapped(base, isAsked) : null), [base, isAsked]);
+
+  const pick = useCallback((v) => {
+    setView(v);
+    try {
+      const u = new URL(window.location.href);
+      if (v === 'people') u.searchParams.delete('view'); else u.searchParams.set('view', v);
+      window.history.replaceState(null, '', u.pathname + u.search);
+    } catch { /* the address stays */ }
+    window.scrollTo(0, 0);
+  }, []);
+
+  // The views in the notch, with how many each ranks.
+  useEffect(() => {
+    if (!data || data.index.total === 0) { setNotchTabs(null); return undefined; }
+    const count = {
+      people: data.index.total, kingmakers: data.kings.scanned, gatekeepers: data.gates.list.length,
+      companies: heavy?.companies.count, industries: heavy?.industries.list.length,
+    };
+    setNotchTabs({
+      items: VIEWS.map((key) => ({
+        key,
+        label: count[key] ? <>{LABELS[key]}<small style={{ fontSize: 10.5, opacity: 0.65, fontWeight: 600 }}>{fmt(count[key])}</small></> : LABELS[key],
+      })),
+      current: view, onPick: pick,
+    });
+    return () => setNotchTabs(null);
+  }, [data, heavy, view, pick]);
+
+  const level = useMemo(() => (net ? networkLevel(net.degree1, net.degree2) : null), [net]);
+  const csvMode = Boolean(net && net.source !== 'own');
+
+  if (IS_DEMO) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, color: 'var(--sd-fg-2, #ccc)', fontFamily: 'var(--sd-font)' }}>
+        <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, color: 'var(--sd-fg-1, #fff)' }}>Not part of the demo</h1>
+        <p style={{ fontSize: 13, margin: 0 }}>The public demo includes the Network Circle and Degrees views only.</p>
+        <Link href="/" style={{ fontSize: 13, color: 'var(--sd-fg-3, #888)', textDecoration: 'none' }}>&larr; Back to the network</Link>
+      </div>
+    );
+  }
+
+  const shared = { data, heavy, open, net, source: net?.source, isMobile, onView: pick };
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', fontFamily: 'var(--sd-font)' }}>
+      <AppHeader active="insights" csvMode={csvMode} level={level} isMobile={isMobile} />
+      {/* Room for the notch, which hangs under the header with the views in it */}
+      <main style={{ maxWidth: view === 'report' ? 920 : 1400, margin: '0 auto', padding: isMobile ? '52px 12px 0' : '58px 30px 0' }}>
+        {failed ? <Message title="The network couldn’t be loaded" body={failed} />
+          : !data ? <Message title="Reading your network…" />
+          : data.index.total === 0 ? <Empty source={net.source} />
+          : view === 'people' ? <PeopleView {...shared} requests={requests} />
+          : view === 'kingmakers' ? <KingmakersBoard {...shared} />
+          : view === 'gatekeepers' ? <GatekeepersBoard {...shared} />
+          : view === 'companies' ? <CompaniesBoard {...shared} />
+          : view === 'industries' ? <IndustriesBoard {...shared} />
+          : <Report {...shared} />}
+        <Footer net={net} data={data} isMobile={isMobile} />
+      </main>
+    </div>
+  );
+}
+
+function Message({ title, body }) {
+  return (
+    <div style={{ padding: '80px 0', textAlign: 'center' }}>
+      <div style={{ fontSize: 17, fontWeight: 700 }}>{title}</div>
+      {body && <div style={{ fontSize: 13, color: 'var(--sd-fg-3, #888)', marginTop: 8 }}>{body}</div>}
+    </div>
+  );
+}
+
+/** No one to rank yet: where people come from. */
+function Empty({ source }) {
+  return (
+    <div style={{ maxWidth: 560, margin: '60px auto', textAlign: 'center' }}>
+      <h1 style={TITLE}>The Power Index</h1>
+      <p style={{ fontSize: 15, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.6, margin: '12px 0 22px' }}>
+        Nothing to rank yet. Once your connections are in, everyone within two steps of you shows here, ranked by power,
+        with who holds the doors and what’s still closed.
+      </p>
+      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
+        {source === 'own' && (
+          <Link href="/setup" style={{ padding: '10px 16px', borderRadius: 8, fontWeight: 700, fontSize: 13.5, textDecoration: 'none', color: '#000', background: 'linear-gradient(135deg, #00ff88, #1abc9c)' }}>
+            Scan your connections →
+          </Link>
+        )}
+        <Link href="/import" style={{ padding: '10px 16px', borderRadius: 8, fontWeight: 700, fontSize: 13.5, textDecoration: 'none', color: 'var(--sd-fg-1, #fff)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)' }}>
+          Import a CSV
+        </Link>
+      </div>
+      <p style={{ fontSize: 12.5, color: 'var(--sd-fg-4, #6f7a88)', marginTop: 18 }}>
+        Or look around first: the <Link href="/" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>map’s welcome screen</Link> opens a sample network where every person is invented.
+      </p>
+    </div>
+  );
+}
+
+/** The rule every screen with a tier says, and which network this is. */
+function Footer({ net, data, isMobile }) {
+  const what = !net || !data?.index.total ? null
+    : net.source === 'sample' ? 'The sample network: every person in it is invented.'
+    : net.source === 'csv' ? `Your CSV import: ${fmt(data?.reach.d1)} connections, no circles.`
+    : data ? `Counted from your ${fmt(data.reach.d1)} connections and the ${fmt(data.reach.circles)} circle${data.reach.circles === 1 ? '' : 's'} you’ve scanned.` : null;
+  return (
+    <footer style={{
+      margin: '36px 0 0', padding: '18px 0 34px', borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
+      display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', gap: isMobile ? 8 : 20,
+      color: 'var(--sd-fg-4, #6f7a88)', fontSize: 11.5, lineHeight: 1.5,
+    }}>
+      <div><b style={{ color: 'var(--sd-fg-2, #b8c4c4)' }}>Power ranks reachability, not people.</b> A tier is a statement about network position, not human worth.</div>
+      {what && <div>{what}</div>}
+    </footer>
+  );
+}

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

@@ -4,8 +4,6 @@ import { Suspense, useEffect, useState, useRef, useMemo, useCallback } from 'rea
 import { useSearchParams } from 'next/navigation';
 import { fillsCircles, loadScanNotes, NO_SCAN_NOTES } from '../lib/scraper-client';
 import useScanner from './components/useScanner';
-import useRequests from './components/useRequests';
-import { requestCount } from '../lib/requests-client';
 import { loadNetwork } from '../lib/network';
 import { resolveView } from './components/views';
 import { peopleByDegree } from '../lib/degrees';
@@ -105,7 +103,6 @@ function HomeInner() {
   const [scanNotes, setScanNotes] = useState(NO_SCAN_NOTES);
   const shapeRef = useRef('');
   // Everyone with a request out, shared with every view (lib/requests-client.js).
-  const pendingCount = requestCount(useRequests());
 
   useEffect(() => {
     if (!userId) return;
@@ -305,20 +302,7 @@ function HomeInner() {
             </button>
           </div>
         )}
-      >
-        {/* Pending count badge — in header: everyone with a request out, once each (lib/requests-client.js) */}
-        {isDegreesMode && !csvMode && pendingCount > 0 && (
-          <Link href="/queue" style={{
-            padding: '5px 12px', borderRadius: 16, fontSize: 12, fontWeight: 600, textDecoration: 'none',
-            background: 'rgba(255,107,53,0.12)', color: 'var(--sd-orange, #FF6B35)',
-            border: '1px solid rgba(255,107,53,0.25)',
-            display: 'inline-flex', alignItems: 'center', gap: 5,
-          }}>
-            <span style={{ fontSize: 10 }}>⏳</span>
-            {pendingCount} Pending
-          </Link>
-        )}
-      </AppHeader>
+      />
 
       <div style={{ display: 'flex', height: isMobile ? 'calc(100vh - 70px)' : 'calc(100vh - 130px)', position: 'relative' }}>
         <FilterPanel

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

@@ -19,6 +19,10 @@ import { localPhoto } from '../../lib/photos';
 import { reachIndex } from '../../lib/reach';
 import { loadScanNotes } from '../../lib/scraper-client';
 import { TIER_COLORS } from '../../lib/themes';
+import ConnectChoice, { secondaryLook } from '../components/AutoConnect';
+
+// Add, standing second to Auto: LinkedIn's blue, as an outline.
+const BLUE_OUTLINE = { color: '#5aa9e6', line: 'rgba(0,119,181,0.75)' };
 
 
 // Who to reach first: power, +1 when the company their score is built on is a
@@ -342,6 +346,7 @@ function QueueInner() {
             reach={reach}
             onSend={(r) => markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {})}
             onUndo={(r) => undoRequest(r).catch(() => {})}
+            canAuto={!IS_DEMO}
           />
         </div>
       )}
@@ -600,12 +605,16 @@ function QueueInner() {
                         {sentIds.has(r.id) ? (
                           <span style={{ padding: '3px 6px', borderRadius: 3, fontSize: 8, fontWeight: 700, background: 'rgba(255,107,53,0.15)', color: 'var(--sd-orange, #FF6B35)', flexShrink: 0 }}>Sent</span>
                         ) : (
-                          <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {});
-                            }}
-                            style={{ padding: '3px 6px', borderRadius: 3, fontSize: 8, fontWeight: 700, background: '#0077B5', color: '#fff', textDecoration: 'none', flexShrink: 0 }}>Add</a>
+                          // Auto first, then Add as an outline (components/AutoConnect.js).
+                          <ConnectChoice person={r} canAuto={!IS_DEMO} size="row" connect={(second) => (
+                            <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {});
+                              }}
+                              style={second ? { ...secondaryLook('row', BLUE_OUTLINE), padding: '3px 6px', fontSize: 8 }
+                                : { padding: '3px 6px', borderRadius: 3, fontSize: 8, fontWeight: 700, background: '#0077B5', color: '#fff', textDecoration: 'none', flexShrink: 0 }}>Add</a>
+                          )} />
                         )}
                       </div>
                     ))}
@@ -670,18 +679,21 @@ function QueueInner() {
                       background: 'rgba(255,107,53,0.15)', color: 'var(--sd-orange, #FF6B35)', flexShrink: 0,
                     }}>⏳ Sent</span>
                   ) : (
-                    <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        // Opens LinkedIn, and marks the request sent everywhere.
-                        markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {});
-                      }}
-                      style={{
-                        padding: '4px 8px', borderRadius: 4, fontSize: 9, fontWeight: 700,
-                        background: '#0077B5', color: '#fff', textDecoration: 'none', flexShrink: 0,
-                      }}>
-                      Add
-                    </a>
+                    // Auto first, the better pick; Add beside it as an outline (components/AutoConnect.js).
+                    <ConnectChoice person={r} canAuto={!IS_DEMO} size="row" connect={(second) => (
+                      <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          // Opens LinkedIn, and marks the request sent everywhere.
+                          markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {});
+                        }}
+                        style={second ? secondaryLook('row', BLUE_OUTLINE) : {
+                          padding: '4px 8px', borderRadius: 4, fontSize: 9, fontWeight: 700,
+                          background: '#0077B5', color: '#fff', textDecoration: 'none', flexShrink: 0,
+                        }}>
+                        Add
+                      </a>
+                    )} />
                   )}
                 </div>
               ))}

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

@@ -5,7 +5,8 @@ import { useSearchParams } from 'next/navigation';
 import OnboardingGate from '../components/OnboardingGate';
 import Link from 'next/link';
 import { stopScrape, pickedPerson, scanRequest, HIDE_CHROME_KEY } from '../../lib/scraper-client';
-import { setupStep, askForField } from '../../lib/scanner-setup';
+import { setupStep, askForField, appManagementStep } from '../../lib/scanner-setup';
+import { saveSettings } from '../../lib/settings-client';
 import { RISK_POINTS } from '../../lib/scan-risk';
 import { IS_DEMO } from '../../lib/demo';
 import { circleScanCost } from '../../lib/reach';
@@ -35,6 +36,7 @@ const ACTION_LABELS = {
   'auto-bridge-retry': 'Mapping 2nd degree, hidden ones included',
   resume: 'Carrying on with one paused list',
   'resume-all': 'Carrying on with every paused list',
+  connect: 'Sending a connection request (Auto)',
 };
 
 export default function SetupPage() {
@@ -81,6 +83,8 @@ function SetupInner() {
   // loads, null when it couldn't be read. And the answer given here, if any.
   const [settings, setSettings] = useState(undefined);
   const [field, setField] = useState(null);
+  // Step 1's App Management item, answered here ('done' or 'skipped'), if it was.
+  const [appAnswer, setAppAnswer] = useState(null);
   // Someone sent here to have their circle scanned (Bridge Chains, the Degrees
   // panel's Ready to scan): /setup?scan=<id>. Nothing starts until it's confirmed.
   // The router's search params rather than window.location: every way here is a
@@ -142,6 +146,15 @@ function SetupInner() {
     window.scrollTo(0, 0);
   }
 
+  // Done or Skip on the App Management item: it goes at once, and the answer is
+  // kept so it isn't offered again. If that can't be saved it still goes for
+  // now and comes back next time, which is all it costs (as Skip for now does,
+  // app/components/FieldStep.js).
+  async function answerAppManagement(answer) {
+    setAppAnswer(answer);
+    await saveSettings({ appManagement: answer });
+  }
+
   // "I understand": when, kept with your settings so it travels with a copy.
   async function acceptRisk() {
     setError(null);
@@ -211,6 +224,10 @@ function SetupInner() {
   // Your field, asked once when your connections are in, before who they know
   // (lib/scanner-setup.js askForField); left out while that isn't known (null).
   const askField = IS_DEMO || field ? false : askForField(s, settings);
+  // On a Mac, macOS may ask about App Management when the scanner starts Chrome
+  // (lib/scanner-setup.js appManagementStep): offered once, under step 1, and
+  // never part of whether step 1 is done.
+  const appMgmt = IS_DEMO || appAnswer ? false : appManagementStep(s, settings);
   // Step 4, honestly: the first circle shows in minutes, the rest takes days.
   const pace = li?.limits?.pace;
   const firstCircle = durationText(firstCircleSeconds(pace));
@@ -256,7 +273,7 @@ function SetupInner() {
             You launch it; it does the reading; you watch it go.
           </div>
           <div style={{ display: 'flex', gap: '8px 18px', flexWrap: 'wrap', marginTop: 16 }}>
-            {['Never posts or messages anyone', 'Never sees your password', 'Nothing leaves this Mac', 'Stops the moment you say'].map((t) => (
+            {['Never posts or messages anyone; sends a request only when you press Auto', 'Never sees your password', 'Nothing leaves this Mac', 'Stops the moment you say'].map((t) => (
               <span key={t} style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #cfe8dc)', display: 'flex', alignItems: 'center', gap: 6 }}>
                 <span style={{ color: 'var(--sd-green, #00ff88)', fontWeight: 900 }}>✓</span>{t}
               </span>
@@ -374,6 +391,10 @@ function SetupInner() {
               more={s && step1.chrome && (
                 <Launch href={step1.chrome.href} quiet={Boolean(step1.button)}>{step1.chrome.label}</Launch>
               )} />
+            {/* Blake, 2026-10-04: "shouldnt we have in the onboarding for scan … a button where the
+                user is basically brought to the app management and enables it like Flow does".
+                Optional, so it sits under the step and never holds it up. */}
+            {appMgmt && <AppManagementItem item={appMgmt} onAnswer={answerAppManagement} />}
           </StepRow>
           <StepRow n={2} label="Sign in" state={stateOf(2, !!c.signedIn)}>
             <Mission title="Sign in to LinkedIn, once" time="You do this part" done={!!c.signedIn}
@@ -523,11 +544,23 @@ function SetupInner() {
             </div>
           )}
 
+          {/* ---- In progress: everyone whose scan stopped partway, with Resume (Blake, 2026-10-03:
+               "some sort of in progress ones in the scanner as well to see all the ones they stopped
+               and would like to resume"). Right after step 4, where someone who just stopped a scan
+               looks; it was folded away in Fine-tune, and nobody found it. Under Stop while a scan
+               runs, so Stop stays right under the step. Only there while someone is. ---- */}
+          <PausedList
+            paused={s?.paused || []}
+            disabled={!canSearch}
+            onResume={(p) => run('resume', { id: p.id })}
+            onResumeAll={() => run('resume-all', { maxBridges: batch })}
+          />
+
           {/* Everything you might want to change, out of the way until you do */}
           <details style={{ margin: '18px 0 4px', borderRadius: 10, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.02)' }}>
             <summary style={{ padding: '12px 16px', cursor: 'pointer', fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-2, #cfd8d8)' }}>
               Fine-tune the scanner
-              <span style={{ fontWeight: 500, color: 'var(--sd-fg-4, #778)', marginLeft: 8 }}>daily budget, how much of each list, the hidden window, paused lists</span>
+              <span style={{ fontWeight: 500, color: 'var(--sd-fg-4, #778)', marginLeft: 8 }}>daily budget, how much of each list, the hidden window</span>
             </summary>
             <div style={{ padding: '4px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
                 <BudgetBox li={li} disabled={busy} onSetLimits={(l) => run('set-limits', l)} />
@@ -586,12 +619,6 @@ function SetupInner() {
                 </Btn>
                 <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginLeft: 10 }}>People whose list was hidden last time, in case they&rsquo;ve opened it.</span>
               </div>
-              <PausedList
-                paused={s?.paused || []}
-                disabled={!canSearch}
-                onResume={(p) => run('resume', { id: p.id })}
-                onResumeAll={() => run('resume-all', { maxBridges: batch })}
-              />
             </div>
           </details>
 
@@ -664,7 +691,7 @@ function ScanOne({ pick, pages, setPages, li, running, s, canSearch, busy, onSta
           {circle === 'scanned' && (
             <div style={{ color: 'var(--sd-gold, #FFD700)', fontSize: 12.5, marginTop: 6 }}>
               Their circle is already scanned. This reads their whole list again from page 1; to carry on
-              from where a read stopped, use Resume on their card or in the Paused list below.
+              from where a read stopped, use Resume on their card or under In progress below.
             </div>
           )}
           {circle === 'hidden' && (
@@ -792,15 +819,46 @@ function Mission({ title, time, body, launch, more, done = false, children }) {
   );
 }
 
+/**
+ * Step 1's optional item on a Mac (lib/scanner-setup.js appManagementStep):
+ * why macOS may ask about App Management while scanning, the button that opens
+ * that pane, and Done or Skip, either of which puts it away for good.
+ */
+function AppManagementItem({ item, onAnswer }) {
+  return (
+    <section aria-labelledby="app-management-title" data-app-management style={{
+      marginTop: 10, padding: '14px 18px', borderRadius: 14,
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.025)',
+      border: '1px dashed rgba(var(--sd-ink, 255, 255, 255), 0.16)',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
+        <span id="app-management-title" style={{ fontSize: 16, fontWeight: 800 }}>{item.title}</span>
+        <span style={{ fontSize: 12, color: 'var(--sd-fg-2, #8fd9b6)', marginLeft: 'auto' }}>Optional, once</span>
+      </div>
+      <div style={{ fontSize: 13.5, color: 'var(--sd-fg-3, #9fb0bb)', lineHeight: 1.6, margin: '6px 0 12px', maxWidth: 600 }}>{item.text}</div>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+        <Launch href={item.href} quiet>Open App Management</Launch>
+        <Btn onClick={() => onAnswer('done')}>Done</Btn>
+        <Btn onClick={() => onAnswer('skipped')}>Skip</Btn>
+      </div>
+      <div style={{ fontSize: 12, color: 'var(--sd-fg-4, #778)', marginTop: 10 }}>It&rsquo;s in {item.where}.</div>
+    </section>
+  );
+}
+
 /**
  * The big go button. `quiet` once that step is done, so the next thing to do
- * stands out. With `href`, a link that looks the same, opened outside the app
- * (the desktop app sends it to the browser): Chrome's download.
+ * stands out. With `href`, a link that looks the same: a web address (Chrome's
+ * download) opens outside the app, which the desktop app sends to the browser.
+ * A System Settings address (App Management) opens in place: a browser then
+ * asks to open System Settings without leaving an empty tab behind, and the
+ * desktop app opens System Settings itself (desktop/main.mjs).
  */
 function Launch({ children, onClick, disabled, quiet = false, href }) {
   if (href) {
+    const web = /^https?:/i.test(href);
     return (
-      <a className="launch-go" href={href} target="_blank" rel="noreferrer" style={{
+      <a className="launch-go" href={href} {...(web ? { target: '_blank', rel: 'noreferrer' } : {})} style={{
         ...launchLook(false, quiet), textDecoration: 'none',
       }}>
         <span aria-hidden="true" style={{ fontSize: quiet ? 11 : 13 }}>▶</span>{children}

package/.next/standalone/install.sh

@@ -9,12 +9,13 @@
 #   3. copies "Six Degrees.app" into /Applications (or ~/Applications)
 #   4. opens it
 #
-# Why a script and not just the .dmg: the app is not signed with a paid Apple
-# developer certificate, so a .dmg downloaded in a browser makes macOS refuse the
-# first launch until you approve it in System Settings. A file fetched with curl
-# is not marked as "downloaded from the internet", so installed this way it
-# simply opens. The .dmg on the Releases page still works; it just needs that
-# one approval.
+# Why a script as well as the .dmg: one line that picks the right build for this
+# Mac, checks it against the published checksums, installs it and opens it, and
+# running it again updates. Until 0.8.0 the app wasn't signed, and this was also
+# the way around macOS's first-launch block (a file fetched with curl isn't
+# marked as downloaded from the internet). Since then the app is signed by Blake
+# Burford and notarized by Apple (docs/brain/DESKTOP.md D4), so the .dmg opens
+# like any Mac app too.
 #
 # Your data is never touched: it lives in ~/.six-degrees, not in the app, so
 # running this again later is also how you update.