six-degrees 0.3.0 → 0.4.0-beta.1

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

@@ -1,7 +1,10 @@
 'use client';
 
 import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
-import { scraperStatus, startScrape, notReadyMessage } from '../lib/scraper-client';
+import { scraperStatus, beginScrape, notReadyMessage, busyReason } 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 Sidebar from './components/Sidebar';
@@ -59,9 +62,10 @@ function HomeInner() {
   const [visualMode, setVisualMode] = useState('galaxy');
   const [notifications, setNotifications] = useState([]);
   const [showNotifs, setShowNotifs] = useState(false);
-  const [pending, setPending] = useState([]);
   const [csvMode, setCsvMode] = useState(false);
   const [csvSource, setCsvSource] = useState('csv');
+  // Everyone with a request out, shared with every view (lib/requests-client.js).
+  const pendingCount = requestCount(useRequests());
 
   useEffect(() => {
     if (!userId) return;
@@ -93,8 +97,6 @@ function HomeInner() {
     if (!IS_DEMO && !hasCsvNetwork()) {
       // Fetch notifications
       fetch(`/api/notifications?userId=${userId}`).then(r => r.json()).then(d => setNotifications(d.notifications || [])).catch(() => {});
-      // Fetch pending outreach
-      fetch(`/api/outreach?userId=${userId}`).then(r => r.json()).then(d => setPending(d.pending || [])).catch(() => {});
     }
   }, [userId]);
 
@@ -215,6 +217,16 @@ function HomeInner() {
             >
               Paths
             </Link>}
+            {!IS_DEMO && !csvMode && <Link
+              href="/scores"
+              style={{
+                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600,
+                background: 'rgba(255,255,255,0.06)', color: '#FFD700', textDecoration: 'none',
+                display: 'flex', alignItems: 'center', gap: 4,
+              }}
+            >
+              Scores
+            </Link>}
             {!IS_DEMO && !csvMode && <Link
               href="/queue"
               style={{
@@ -316,28 +328,7 @@ function HomeInner() {
             )}
           </div>}
           {/* Refresh button — checks connections + notifies */}
-          {!IS_DEMO && !csvMode && <button
-            onClick={async () => {
-              try {
-                const status = await scraperStatus();
-                const blocked = notReadyMessage(status);
-                if (blocked) { alert(blocked); return; }
-                if (status.running) { alert('The scanner is already busy.'); return; }
-                await startScrape('refresh');
-                alert('Checking for new connections — watch it on the Scan page.');
-              } catch (e) {
-                alert(e.message);
-              }
-            }}
-            title="Refresh connections + bridges"
-            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,
-              display: isMobile ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: 8,
-            }}
-          >
-            ↻
-          </button>}
+          {!IS_DEMO && !csvMode && <RefreshButton isMobile={isMobile} />}
           {/* Profile icon — top right */}
           <a href={IS_DEMO ? '/launch' : csvMode ? '/import' : '/profile'} style={{
             width: isMobile ? 30 : 36, height: isMobile ? 30 : 36, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -356,8 +347,8 @@ function HomeInner() {
           </a>
         </div>
 
-        {/* Pending count badge — in header */}
-        {isDegreesMode && pending.length > 0 && (
+        {/* 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: '#FF6B35',
@@ -365,7 +356,7 @@ function HomeInner() {
             display: 'inline-flex', alignItems: 'center', gap: 5,
           }}>
             <span style={{ fontSize: 10 }}>⏳</span>
-            {pending.length} Pending
+            {pendingCount} Pending
           </Link>
         )}
       </header>
@@ -428,6 +419,10 @@ function HomeInner() {
             selectedId: selected?.id ?? null,
             tierColors: TIER_COLORS,
             focusNodeRef,
+            // Every row, whatever the filters: rarity counts the ways in across
+            // all your scanned circles, and "already connected" needs everyone.
+            fullDegree1: degree1,
+            fullDegree2: degree2,
           };
           return <View {...viewProps} />;
         })()}
@@ -440,32 +435,10 @@ function HomeInner() {
           mode={mode}
           collapsed={sidebarCollapsed}
           filter={filter}
-          pending={pending}
           onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
           onSelect={(node) => { setSelected(node || null); }}
           onSwitchMode={(newMode) => { setMode(newMode); setFilter('all'); }}
           onFocusNode={(nodeId) => { if (focusNodeRef.current) focusNodeRef.current(nodeId); }}
-          onMarkSent={async (person) => {
-            if (IS_DEMO) return;
-            const id = person.id;
-            const url = person.profile_url;
-            await fetch('/api/outreach', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ action: 'mark-sent', connectionId: id, profileUrl: url }),
-            });
-            setPending(prev => [...prev, person]);
-          }}
-          onUndoPending={async (person) => {
-            if (IS_DEMO) return;
-            const id = person.id;
-            await fetch('/api/outreach', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ action: 'undo', connectionId: id }),
-            });
-            setPending(prev => prev.filter(p => p.id !== id));
-          }}
         />
 
         {/* Galaxy experimental toggle — bottom right, Degrees mode only.
@@ -501,3 +474,34 @@ function HomeInner() {
     </div>
   );
 }
+
+// Its own component so the scanner's answer, which changes every second or two
+// while a scan runs, re-renders this button and not the whole map.
+function RefreshButton({ isMobile }) {
+  const scan = useScanner();
+  const busy = busyReason(scan);
+  return (
+    <button
+      onClick={async () => {
+        try {
+          const blocked = notReadyMessage(await scraperStatus());
+          if (blocked) { alert(blocked); return; }
+          await beginScrape('refresh');
+          alert('Checking for new connections — watch it on the Scan page.');
+        } catch (e) {
+          alert(e.message);
+        }
+      }}
+      disabled={Boolean(busy)}
+      title={busy ? `${busy}. One scan at a time.` : 'Refresh connections + bridges'}
+      style={{
+        width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', border: 'none',
+        cursor: busy ? 'not-allowed' : 'pointer', opacity: busy ? 0.4 : 1,
+        background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 12 : 14,
+        display: isMobile ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: 8,
+      }}
+    >
+      ↻
+    </button>
+  );
+}

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

@@ -1,20 +1,20 @@
 'use client';
 
 import { Suspense, useEffect, useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { runScrape, scraperStatus, notReadyMessage } from '../../lib/scraper-client';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { runScrape, scraperStatus, notReadyMessage, busyReason } from '../../lib/scraper-client';
 import { loadNetwork } from '../../lib/network';
 import { IS_DEMO } from '../../lib/demo';
 import { hasCsvNetwork, loadCsvNetwork } from '../../lib/csv';
 import OnboardingGate from '../components/OnboardingGate';
 import PathsAnalyzer from '../components/PathsAnalyzer';
-import CompanyScores from '../components/CompanyScores';
 import { useUser } from '../components/UserProvider';
+import useScanner from '../components/useScanner';
 import Link from 'next/link';
 import { companyOf, getSeniority } from '../../lib/companies';
 
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
-const TABS = [['map', 'Map'], ['industries', 'Industries'], ['companies', 'Companies'], ['scores', 'Scores']];
+const TABS = [['map', 'Map'], ['industries', 'Industries'], ['companies', 'Companies']];
 
 export default function PathsPage() {
   // Suspense because PathsInner reads the address's ?tab= (useSearchParams),
@@ -32,11 +32,14 @@ function PathsInner() {
   const [d2Data, setD2Data] = useState([]);
   const [d3Data, setD3Data] = useState([]);
   // Map and Industries are the analyzer; Companies is the list it grew from.
-  // A link can open a tab (/paths?tab=scores, from Settings → Your sector).
+  // A link can open a tab (/paths?tab=companies). Company scores have a tab of
+  // their own now (app/scores): an old link to /paths?tab=scores goes there.
   // The router's search params rather than window.location: on a click from
   // another page the address bar only changes after this page has rendered.
   const asked = useSearchParams().get('tab');
   const [tab, setTab] = useState(() => (TABS.some(([k]) => k === asked) ? asked : 'map'));
+  const router = useRouter();
+  useEffect(() => { if (asked === 'scores') router.replace('/scores#companies'); }, [asked, router]);
   // Bumped when company scores change, so the network reloads with new tiers.
   const [reloadKey, setReloadKey] = useState(0);
 
@@ -92,6 +95,9 @@ function PathsInner() {
 
   const [scanning, setScanning] = useState(false);
   const [scanLog, setScanLog] = useState([]);
+  // Anything else the scanner runs (a profile card's scan, say) greys this out too.
+  const scan = useScanner();
+  const busy = !scanning && scan.running ? busyReason(scan) : null;
 
   function enrichPeople(people) {
     const d1Urls = new Set(d1Data.map(c => c.profile_url));
@@ -255,13 +261,14 @@ function PathsInner() {
               <span style={{ fontSize: 11, color: '#888' }}>
                 {connectedCount}/{companyPeople.length} connected
               </span>
-              <button onClick={scanFullCompany} disabled={scanning}
+              <button onClick={scanFullCompany} disabled={scanning || Boolean(busy)}
+                title={busy ? `${busy}. One scan at a time.` : undefined}
                 style={{
-                  marginLeft: 'auto', padding: '5px 12px', borderRadius: 6, border: 'none', cursor: scanning ? 'not-allowed' : 'pointer',
-                  background: scanning ? '#333' : 'rgba(0,255,136,0.15)', color: scanning ? '#555' : '#00ff88',
+                  marginLeft: 'auto', padding: '5px 12px', borderRadius: 6, border: 'none', cursor: scanning || busy ? 'not-allowed' : 'pointer',
+                  background: scanning || busy ? '#333' : 'rgba(0,255,136,0.15)', color: scanning || busy ? '#555' : '#00ff88',
                   fontSize: 11, fontWeight: 600,
                 }}>
-                {scanning ? 'Scanning...' : '+ Scan Full Company'}
+                {scanning ? 'Scanning...' : busy ? 'Scanner busy' : '+ Scan Full Company'}
               </button>
               <span
                 title="Not yet tested against live LinkedIn. Results may be incomplete."
@@ -275,9 +282,7 @@ function PathsInner() {
         </div>
       </header>
 
-      {!selectedCompany && tab === 'scores' ? (
-        <CompanyScores onRescored={() => setReloadKey((k) => k + 1)} />
-      ) : !selectedCompany && tab !== 'companies' ? (
+      {!selectedCompany && tab !== 'companies' ? (
         <PathsAnalyzer d1={d1Data} d2={d2Data} d3={d3Data} tab={tab}
           onOpenCompany={(co) => selectCompany({ ...co, sCount: co.S, aCount: co.A })} />
       ) : (

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

@@ -33,7 +33,7 @@ function ProfileInner() {
   const [notifications, setNotifications] = useState([]);
   const [queueStats, setQueueStats] = useState({ total: 0, sent: 0, accepted: 0 });
   const [mapping, setMapping] = useState({ degree1: [], degree2: [], skips: [] });
-  // "Your Sectors" is what you picked in Settings → Your sector. (users.sectors,
+  // "Your Sectors" is what you picked in Scores → Your sector. (users.sectors,
   // which this card used to show, is never written by anything; the Sidebar
   // and Outlink still read it as free text.) null while it loads; a load that
   // fails says so rather than showing "none picked" (TRAPS §7).
@@ -376,8 +376,8 @@ function ProfileInner() {
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
             <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0 }}>Your Sectors</h3>
-            <Link href="/settings#sector" style={{ fontSize: 11, color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>
-              {sectorFocus?.sectors?.length ? 'Change' : sectorFocus && !sectorFocus.failed ? 'Pick in Settings' : 'Settings'} &rarr;
+            <Link href="/scores#sector" style={{ fontSize: 11, color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>
+              {sectorFocus?.sectors?.length ? 'Change' : sectorFocus && !sectorFocus.failed ? 'Pick on Scores' : 'Scores'} &rarr;
             </Link>
           </div>
           {!sectorFocus ? (

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { loadNetwork } from '../../lib/network';
 import { IS_DEMO } from '../../lib/demo';
 import OutlinkQuest from '../components/OutlinkQuest';
@@ -8,6 +8,9 @@ import OnboardingGate from '../components/OnboardingGate';
 import { useUser } from '../components/UserProvider';
 import { rowCompanyScore, TOP_COMPANY } from '../../lib/scoring';
 import Link from 'next/link';
+import useRequests from '../components/useRequests';
+import { hasRequest, markRequested, undoRequest } from '../../lib/requests-client';
+import { keyFor } from '../../lib/separation';
 
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
@@ -38,8 +41,12 @@ function QueueInner() {
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState('all');
   const [selected, setSelected] = useState(new Set());
-  const [sentIds, setSentIds] = useState(new Set());
-  const [pendingList, setPendingList] = useState([]);
+  // Requests out come from the one list every view shares (lib/requests-client.js),
+  // per person, so a request sent on the map shows here and one sent here shows
+  // there. What this page loads is only the rows to draw them with.
+  const requests = useRequests();
+  const [serverPending, setServerPending] = useState([]);
+  const [bridgeById, setBridgeById] = useState({});
   // Circles is the game (lib/quest.js); the list and Pending are still here.
   const [view, setView] = useState('quest'); // quest | recs | pending
   const [added, setAdded] = useState([]);
@@ -80,13 +87,8 @@ function QueueInner() {
       const bridgeById = {};
       d1.forEach(c => { bridgeById[c.id] = c; });
 
-      // Pre-load sent IDs
-      const sentSet = new Set((pendingRes.pending || []).map(p => p.id));
-      setSentIds(sentSet);
-      setPendingList((pendingRes.pending || []).map(p => ({
-        ...p,
-        bridge: bridgeById[p.source_connection_id] || null,
-      })));
+      setServerPending(pendingRes.pending || []);
+      setBridgeById(bridgeById);
 
       const recommendations = d2
         .filter(c => (c.tier === 'S' || c.tier === 'A' || c.tier === 'B') && !d1Urls.has(c.profile_url))
@@ -104,6 +106,24 @@ function QueueInner() {
     load();
   }, [userId]);
 
+  // Every row of anyone with a request out (a person's copies all count), and
+  // the people themselves, once each, for the Pending tab.
+  const sentIds = useMemo(
+    () => new Set([...serverPending, ...recs].filter((r) => hasRequest(r, requests)).map((r) => r.id)),
+    [serverPending, recs, requests],
+  );
+  const pendingList = useMemo(() => {
+    const seen = new Set();
+    const out = [];
+    for (const r of [...serverPending, ...recs]) {
+      const key = keyFor(r);
+      if (seen.has(key) || !hasRequest(r, requests)) continue;
+      seen.add(key);
+      out.push({ ...r, bridge: bridgeById[r.source_connection_id] || r.bridge || null });
+    }
+    return out;
+  }, [serverPending, recs, requests, bridgeById]);
+
   // Demo builds: this page is excluded from the public demo
   if (IS_DEMO) {
     return (
@@ -303,22 +323,8 @@ function QueueInner() {
             sentIds={sentIds}
             added={added}
             mappedIds={mappedIds}
-            onSend={async (r) => {
-              try {
-                await fetch('/api/outreach', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({ action: 'mark-sent', connectionId: r.id, profileUrl: r.profile_url, userId }) });
-                setSentIds(prev => new Set([...prev, r.id]));
-                setPendingList(prev => (prev.some(x => x.id === r.id) ? prev : [...prev, r]));
-              } catch {}
-            }}
-            onUndo={async (r) => {
-              try {
-                await fetch('/api/outreach', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({ action: 'undo', connectionId: r.id, userId }) });
-                setSentIds(prev => { const next = new Set(prev); next.delete(r.id); return next; });
-                setPendingList(prev => prev.filter(x => x.id !== r.id));
-              } catch {}
-            }}
+            onSend={(r) => markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {})}
+            onUndo={(r) => undoRequest(r).catch(() => {})}
           />
         </div>
       )}
@@ -391,14 +397,7 @@ function QueueInner() {
                           style={{ padding: '4px 8px', borderRadius: 4, fontSize: 9, fontWeight: 700, background: '#0077B5', color: '#fff', textDecoration: 'none' }}>
                           View
                         </a>
-                        <button onClick={async () => {
-                          await fetch('/api/outreach', {
-                            method: 'POST', headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ action: 'undo', connectionId: p.id }),
-                          });
-                          setPendingList(prev => prev.filter(x => x.id !== p.id));
-                          setSentIds(prev => { const next = new Set(prev); next.delete(p.id); return next; });
-                        }} style={{
+                        <button onClick={() => { undoRequest(p).catch(() => {}); }} style={{
                           padding: '4px 8px', borderRadius: 4, fontSize: 9, fontWeight: 600,
                           background: 'rgba(255,255,255,0.06)', color: '#666', border: 'none', cursor: 'pointer',
                         }}>Undo</button>
@@ -585,13 +584,9 @@ function QueueInner() {
                           <span style={{ padding: '3px 6px', borderRadius: 3, fontSize: 8, fontWeight: 700, background: 'rgba(255,107,53,0.15)', color: '#FF6B35', flexShrink: 0 }}>Sent</span>
                         ) : (
                           <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
-                            onClick={async (e) => {
+                            onClick={(e) => {
                               e.stopPropagation();
-                              try {
-                                await fetch('/api/outreach', { method: 'POST', headers: { 'Content-Type': 'application/json' },
-                                  body: JSON.stringify({ action: 'mark-sent', connectionId: r.id, profileUrl: r.profile_url }) });
-                                setSentIds(prev => new Set([...prev, r.id]));
-                              } catch {}
+                              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>
                         )}
@@ -659,17 +654,10 @@ function QueueInner() {
                     }}>⏳ Sent</span>
                   ) : (
                     <a href={r.profile_url} target="_blank" rel="noopener noreferrer"
-                      onClick={async (e) => {
+                      onClick={(e) => {
                         e.stopPropagation();
-                        // Mark as sent in DB after opening LinkedIn
-                        try {
-                          await fetch('/api/outreach', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ action: 'mark-sent', connectionId: r.id, profileUrl: r.profile_url }),
-                          });
-                          setSentIds(prev => new Set([...prev, r.id]));
-                        } catch {}
+                        // 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,

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

@@ -0,0 +1,72 @@
+'use client';
+
+// Scores: how a power score is worked out, and everything you can change about
+// it, in one place (Blake, 2026-09-28: "maybe this should be its own tab").
+// Your field (the sector focus), how tiers are graded, and every company's
+// score. The first two used to live in Settings and the company scores in
+// Paths → Scores; the old links forward here (app/settings/page.js,
+// app/paths/page.js).
+
+import { useState } from 'react';
+import Link from 'next/link';
+import OnboardingGate from '../components/OnboardingGate';
+import SectorSection from '../components/settings/SectorSection';
+import TierSection from '../components/settings/TierSection';
+import CompanyScores from '../components/CompanyScores';
+import { Body, LINE, FONT } from '../components/ui';
+import { IS_DEMO } from '../../lib/demo';
+
+export default function ScoresPage() {
+  return <OnboardingGate><ScoresInner /></OnboardingGate>;
+}
+
+const jump = { color: '#3498DB', textDecoration: 'none', fontWeight: 600 };
+
+function ScoresInner() {
+  // Saving your sector or tiers rescores everyone; the company list below reads
+  // its scores again when this changes.
+  const [saves, setSaves] = useState(0);
+  const saved = () => setSaves((n) => n + 1);
+  if (IS_DEMO) {
+    return (
+      <div style={{
+        minHeight: '100vh', background: '#0a0a1a', color: 'rgba(255,255,255,0.7)',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        gap: 12, textAlign: 'center', padding: 24, fontFamily: FONT,
+      }}>
+        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: '#fff' }}>Not part of the demo</h2>
+        <p style={{ margin: 0, fontSize: 13 }}>The public demo includes the Network Circle and Degrees views only.</p>
+        <Link href="/" style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', textDecoration: 'none' }}>&larr; Back to the network</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#fff', fontFamily: FONT }}>
+      <header style={{ padding: '16px 24px', borderBottom: LINE, display: 'flex', alignItems: 'center', gap: 16 }}>
+        <Link href="/" style={{
+          display: 'flex', alignItems: 'center', gap: 6, color: '#888', textDecoration: 'none',
+          fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6,
+          background: 'rgba(255,255,255,0.06)', border: LINE,
+        }}>← Back to Map</Link>
+        <h1 style={{
+          fontSize: 22, fontWeight: 700, margin: 0,
+          background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)',
+          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
+        }}>Scores</h1>
+      </header>
+      <main style={{ maxWidth: 980, margin: '0 auto', padding: '8px 24px 64px' }}>
+        <Body style={{ marginTop: 16 }}>
+          How someone&rsquo;s power score is worked out, and the three things you can change about it:{' '}
+          <a href="#sector" style={jump}>your field</a>, <a href="#tiers" style={jump}>how tiers are graded</a> and{' '}
+          <a href="#companies" style={jump}>any company&rsquo;s score</a>. A change here rescores everyone.
+        </Body>
+        <SectorSection onSaved={saved} />
+        <TierSection onSaved={saved} />
+        <div id="companies" style={{ marginTop: 28 }}>
+          <CompanyScores version={saves} />
+        </div>
+      </main>
+    </div>
+  );
+}

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

@@ -2,9 +2,9 @@
 
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import OnboardingGate from '../components/OnboardingGate';
 import UpdatePanel from '../components/UpdatePanel';
-import SectorSection from '../components/settings/SectorSection';
 import DataSection from '../components/settings/DataSection';
 import { Section, Body, Mono, LINE, FONT } from '../components/ui';
 import { IS_DEMO } from '../../lib/demo';
@@ -28,6 +28,13 @@ const KIND_LABEL = {
 function SettingsInner() {
   const [info, setInfo] = useState(null);
   const [error, setError] = useState(null);
+  const router = useRouter();
+  // Your field and tiers moved to the Scores tab (app/scores): old links to
+  // /settings#sector and /settings#tiers go there.
+  useEffect(() => {
+    const at = window.location.hash;
+    if (at === '#sector' || at === '#tiers') router.replace(`/scores${at}`);
+  }, [router]);
 
   useEffect(() => {
     fetch('/api/settings')
@@ -71,8 +78,13 @@ function SettingsInner() {
         {error && <Body style={{ color: '#ff7676', marginTop: 16 }}>{error}</Body>}
 
         <UpdatePanel />
-        <SectorSection />
-
+        <Section id="scoring" title="Your field and tiers">
+          <Body>
+            They&rsquo;re on the <Link href="/scores" style={{ color: '#3498DB' }}>Scores</Link> tab now, beside every
+            company&rsquo;s score: <Link href="/scores#sector" style={{ color: '#3498DB' }}>your field</Link> and{' '}
+            <Link href="/scores#tiers" style={{ color: '#3498DB' }}>how tiers are graded</Link>.
+          </Body>
+        </Section>
         <DataSection />
 
         <Section id="about" title="About this copy">

package/.next/standalone/db/schema.js

@@ -60,6 +60,7 @@ CREATE TABLE IF NOT EXISTS linkedin_connections (
   unlocked_from_bridge_id TEXT,
   unlocked_from_name      TEXT,
   outreach_status         TEXT,
+  mutual_count            INTEGER,            -- LinkedIn's count of mutual connections (2nd degree), when a scan read one
   scanned_company         TEXT,
   score_why               TEXT,
   user_id                 TEXT,