six-degrees 0.3.0 → 0.4.0

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

@@ -1,9 +1,13 @@
 'use client';
 
-import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
-import { scraperStatus, startScrape, notReadyMessage } from '../lib/scraper-client';
+import { Suspense, useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { scraperStatus, beginScrape, notReadyMessage, busyReason, isCircleScan, 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 { VIEWS, resolveView } from './components/views';
 import Sidebar from './components/Sidebar';
 import FilterPanel from './components/FilterPanel';
 import OnboardingGate from './components/OnboardingGate';
@@ -16,6 +20,18 @@ import Link from 'next/link';
 // One shared empty list, so "no 2nd-degree data" is the same value every render.
 const NO_DEGREE2 = [];
 
+// A job that changes the network. Setting the scanner up and signing in don't.
+const CHANGES_NETWORK = (job) => Boolean(job) && !['install', 'setup', 'login'].includes(job.action);
+
+/** Counts for the header and panels, from the two lists. */
+function statsFor(d1, d2) {
+  const tierCounts = {};
+  d1.forEach(c => { tierCounts[c.tier] = (tierCounts[c.tier] || 0) + 1; });
+  const d2TierCounts = {};
+  d2.forEach(c => { d2TierCounts[c.tier] = (d2TierCounts[c.tier] || 0) + 1; });
+  return { total: d1.length, tiers: tierCounts, d2Total: d2.length, d2Tiers: d2TierCounts };
+}
+
 const TIER_COLORS = {
   S: '#FFD700',
   A: '#9B59B6',
@@ -25,9 +41,13 @@ const TIER_COLORS = {
 };
 
 export default function Home() {
+  // Suspense because HomeInner reads the address's ?chain= (useSearchParams),
+  // which Next requires to sit inside one for the page to build.
   return (
     <OnboardingGate>
-      <HomeInner />
+      <Suspense>
+        <HomeInner />
+      </Suspense>
     </OnboardingGate>
   );
 }
@@ -51,17 +71,28 @@ function HomeInner() {
   const [selected, setSelected] = useState(null);
   const focusNodeRef = useRef(null);
   const [filter, setFilter] = useState('all');
-  const [mode, setMode] = useState('network');
+  // A link to someone's circle in Bridge Chains, /?chain=<id> (the Scan page's
+  // "watch it fill in"), opens Degrees on it. 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, and the map opened on the Galaxy.
+  const linkedChain = useSearchParams().get('chain');
+  const [chainOpen, setChainOpen] = useState(linkedChain);
+  const [mode, setMode] = useState(() => (chainOpen ? 'degrees' : 'network'));
   const [loading, setLoading] = useState(true);
   const [stats, setStats] = useState(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const [filterPanelCollapsed, setFilterPanelCollapsed] = useState(true);
-  const [visualMode, setVisualMode] = useState('galaxy');
+  const [visualMode, setVisualMode] = useState(() => (chainOpen ? 'chain' : 'galaxy'));
   const [notifications, setNotifications] = useState([]);
   const [showNotifs, setShowNotifs] = useState(false);
-  const [pending, setPending] = useState([]);
   const [csvMode, setCsvMode] = useState(false);
   const [csvSource, setCsvSource] = useState('csv');
+  // What the scanner noted: hidden lists, and lists read with nothing new in
+  // them. With the network, they say who is ready for a circle scan (lib/reach.js).
+  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;
@@ -81,23 +112,43 @@ function HomeInner() {
 
       setDegree1(d1);
       setDegree2(d2);
-
-      const tierCounts = {};
-      d1.forEach(c => { tierCounts[c.tier] = (tierCounts[c.tier] || 0) + 1; });
-      const d2TierCounts = {};
-      d2.forEach(c => { d2TierCounts[c.tier] = (d2TierCounts[c.tier] || 0) + 1; });
-      setStats({ total: d1.length, tiers: tierCounts, d2Total: d2.length, d2Tiers: d2TierCounts });
+      shapeRef.current = networkShape(d1, d2);
+      setStats(statsFor(d1, d2));
       setLoading(false);
     }
     load();
     if (!IS_DEMO && !hasCsvNetwork()) {
+      loadScanNotes().then(setScanNotes);
       // 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]);
 
+  // The network again, after a scan: circles fill in while they're scanned
+  // (Blake, 2026-09-28: "the d3 dots as it builds more in"). Only a real change
+  // is published, because the graph views rebuild their scene whenever these
+  // lists change identity (TRAPS §29).
+  const reload = useCallback(async () => {
+    if (IS_DEMO || hasCsvNetwork() || !userId) return;
+    try {
+      const [{ degree1: d1, degree2: d2 }, notes] = await Promise.all([loadNetwork(userId), loadScanNotes()]);
+      setScanNotes((prev) => (JSON.stringify(prev) === JSON.stringify(notes) ? prev : notes));
+      const shape = networkShape(d1, d2);
+      if (shape === shapeRef.current) return;
+      shapeRef.current = shape;
+      setDegree1(d1);
+      setDegree2(d2);
+      setStats(statsFor(d1, d2));
+    } catch { /* the app restarting, say: keep what's on screen */ }
+  }, [userId]);
+
+  // Followed once: Bridge Chains has opened it, so leaving that view and coming
+  // back, or reloading, starts from the overview.
+  const chainOpened = useCallback(() => {
+    setChainOpen(null);
+    try { window.history.replaceState(null, '', window.location.pathname); } catch { /* the link stays */ }
+  }, []);
+
   const isDegreesMode = mode === 'degrees';
   const connections = degree1;
 
@@ -136,22 +187,24 @@ function HomeInner() {
   if (loading) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>
-        <div style={{ fontSize: 24, fontWeight: 700 }}>Loading 6 Degrees of Separation...</div>
+        <div style={{ fontSize: 24, fontWeight: 700 }}>Loading Six Degrees…</div>
         <div style={{ fontSize: 14, color: '#888', marginTop: 8 }}>Mapping your LinkedIn network</div>
       </div>
     );
   }
 
-  // Resolved once, because two places care: the renderer below, and the Galaxy
+  // Resolved once, because two places care: the renderer below, and the Orbit
   // toggle, which hides over Separation.
   const view = resolveView(visualMode, mode);
+  // Scanning and the Scan page belong to your own network, not the sample or a CSV.
+  const canScan = !IS_DEMO && !csvMode;
 
   return (
     <div data-map style={{ height: '100vh', overflow: 'hidden', background: '#0a0a1a', color: '#fff', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' }}>
       <header style={{ padding: isMobile ? '10px 12px' : '20px 30px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: isMobile ? 4 : 8, flexWrap: isMobile ? 'wrap' : 'nowrap', gap: isMobile ? 6 : 0 }}>
           <h1 style={{ fontSize: isMobile ? 16 : 28, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
-            6 Degrees
+            Six Degrees
           </h1>
           <div style={{ display: 'flex', gap: isMobile ? 2 : 4, background: 'rgba(255,255,255,0.08)', borderRadius: 8, padding: isMobile ? 2 : 3, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
             <button
@@ -215,6 +268,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={{
@@ -315,29 +378,8 @@ function HomeInner() {
               </div>
             )}
           </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>}
+          {/* Refresh button — Check for new, once you say yes; notifies */}
+          {!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 +398,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 +407,7 @@ function HomeInner() {
             display: 'inline-flex', alignItems: 'center', gap: 5,
           }}>
             <span style={{ fontSize: 10 }}>⏳</span>
-            {pending.length} Pending
+            {pendingCount} Pending
           </Link>
         )}
       </header>
@@ -428,6 +470,14 @@ 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,
+            scanNotes,
+            canScan,
+            chainOpen,
+            onChainOpened: chainOpened,
           };
           return <View {...viewProps} />;
         })()}
@@ -440,38 +490,20 @@ 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));
-          }}
+          csvSource={IS_DEMO ? 'sample' : csvMode ? csvSource : null}
+          scanNotes={scanNotes}
+          canScan={canScan}
         />
+        {canScan && <NetworkRefresh onChange={reload} live={view.key === 'chain'} />}
 
-        {/* Galaxy experimental toggle — bottom right, Degrees mode only.
-            Hidden over Separation: Galaxy isn't a Degrees view, so from there
-            the toggle could only fall back to Separation itself, and on a
-            phone it sat on top of the score column. */}
+        {/* Orbit, one tap from Bridge Chains — bottom right, Degrees mode only.
+            It used to say "Galaxy" and show Orbit: the Galaxy is a Network
+            Circle view, so asking for it here fell back to Orbit. Hidden over
+            Separation, where on a phone it sat on top of the score column. */}
         {isDegreesMode && view.key !== 'separation' && (
           <div style={{
             position: 'absolute', bottom: 20, right: 20, zIndex: 20,
@@ -479,19 +511,19 @@ function HomeInner() {
             background: 'rgba(0,0,0,0.7)', borderRadius: 20, padding: '6px 14px',
             backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.08)',
           }}>
-            <span style={{ fontSize: 10, color: '#666' }}>🧪 Galaxy</span>
+            <span style={{ fontSize: 10, color: '#666' }}>{VIEWS.orbit.icon} {VIEWS.orbit.label}</span>
             <div
-              onClick={() => setVisualMode(visualMode === 'galaxy' ? 'chain' : 'galaxy')}
+              onClick={() => setVisualMode(view.key === 'orbit' ? 'chain' : 'orbit')}
               style={{
                 width: 32, height: 18, borderRadius: 9, cursor: 'pointer',
-                background: visualMode === 'galaxy' ? '#FF6B35' : 'rgba(255,255,255,0.15)',
+                background: view.key === 'orbit' ? '#FF6B35' : 'rgba(255,255,255,0.15)',
                 position: 'relative', transition: 'background 0.2s',
               }}
             >
               <div style={{
                 width: 14, height: 14, borderRadius: '50%', background: '#fff',
                 position: 'absolute', top: 2,
-                left: visualMode === 'galaxy' ? 16 : 2,
+                left: view.key === 'orbit' ? 16 : 2,
                 transition: 'left 0.2s',
               }} />
             </div>
@@ -501,3 +533,80 @@ function HomeInner() {
     </div>
   );
 }
+
+/**
+ * A cheap fingerprint of the network: who is in it, at which degree and in
+ * whose circle, and how they're marked. Equal fingerprints mean nothing a view
+ * draws has changed.
+ */
+function networkShape(d1, d2) {
+  let h = 0x811c9dc5;
+  const mix = (text) => {
+    for (let i = 0; i < text.length; i++) h = Math.imul(h ^ text.charCodeAt(i), 0x01000193);
+  };
+  for (const r of [...d1, ...d2]) {
+    mix(`${r.id}|${r.degree}|${r.source_connection_id ?? ''}|${r.unlocked_from_bridge_id ?? ''}|${r.tier}|${r.power_score}|${r.unlock_status ?? ''}|${r.profile_image_url ?? ''};`);
+  }
+  return `${d1.length}:${d2.length}:${h >>> 0}`;
+}
+
+// Looks at the network again when a scan has changed it: once when any scan
+// ends, and every 20 seconds while a circle is being scanned with Bridge Chains
+// open, since the scanner saves every 10 pages and the circle fills in as it
+// does. Its own component for the same reason as RefreshButton below.
+function NetworkRefresh({ onChange, live }) {
+  const scan = useScanner();
+  const ended = scan.finished.find(CHANGES_NETWORK)?.startedAt ?? null;
+  const filling = live && scan.running && isCircleScan(scan);
+  useEffect(() => {
+    if (ended != null) onChange();
+  }, [ended, onChange]);
+  useEffect(() => {
+    if (!filling) return undefined;
+    const timer = setInterval(onChange, 20000);
+    return () => clearInterval(timer);
+  }, [filling, onChange]);
+  return null;
+}
+
+// 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.
+//
+// It asks first, as a company scan does, and says what it will do and what it
+// costs: one click on a small icon used to open a Chrome window on LinkedIn
+// with no word of what it was about to do.
+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; }
+          const ok = window.confirm(
+            'Check for new connections?\n\nThis opens a Chrome window on your LinkedIn connections ' +
+            'list and reads it from the newest, stopping once it reaches people already saved. It ' +
+            'usually takes under a minute. It reads your own list, not a search, so it doesn’t ' +
+            'use your search budget, but like any scan it is LinkedIn traffic from your account.',
+          );
+          if (!ok) 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.` : 'Check for new connections'}
+      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,21 @@
 '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';
+import { localPhoto } from '../../lib/photos';
 
 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 +33,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 +96,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 +262,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 +283,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 })} />
       ) : (
@@ -461,8 +467,8 @@ function PathPersonRow({ p, level, companyPeople, d1Data, selectedCompany }) {
         }}>{p.connected ? '✓' : '🔒'}</div>
 
         {/* Photo */}
-        {(p.profile_image_url || p.imageUrl) ? (
-          <img src={p.profile_image_url || p.imageUrl} alt="" style={{
+        {localPhoto(p.profile_image_url || p.imageUrl) ? (
+          <img src={localPhoto(p.profile_image_url || p.imageUrl)} alt="" style={{
             width: 26, height: 26, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
           }} onError={e => e.target.style.display = 'none'} />
         ) : (

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 ? (