six-degrees 0.3.0 → 0.4.0

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,12 @@ 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';
+import { localPhoto } from '../../lib/photos';
+import { reachIndex } from '../../lib/reach';
+import { loadScanNotes } from '../../lib/scraper-client';
 
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
@@ -38,12 +44,18 @@ 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([]);
   const [mappedIds, setMappedIds] = useState(() => new Set());
+  // Whose circle can be scanned next, hidden lists known (lib/reach.js).
+  const [reach, setReach] = useState(null);
   const [bridgeFilter, setBridgeFilter] = useState(null);
 
   // Default to bridge view — shows D1 person → their D2 people
@@ -68,25 +80,22 @@ function QueueInner() {
     if (IS_DEMO) return;
     if (!userId) return;
     async function load() {
-      const [net, pendingRes] = await Promise.all([
+      const [net, pendingRes, notes] = await Promise.all([
         loadNetwork(userId),
         fetch(`/api/outreach?userId=${userId}`).then(r => r.json()).catch(() => ({ pending: [] })),
+        loadScanNotes(),
       ]);
       const d1 = net.degree1;
       const d2 = net.degree2;
       setAdded(d1.filter(c => c.unlocked_from_bridge_id));
       setMappedIds(new Set(d2.map(c => c.source_connection_id).filter(Boolean)));
+      setReach(reachIndex(d1, d2, notes));
       const d1Urls = new Set(d1.map(c => c.profile_url));
       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 +113,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 +330,9 @@ 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 {}
-            }}
+            reach={reach}
+            onSend={(r) => markRequested(r, { bridgeId: r.source_connection_id }).catch(() => {})}
+            onUndo={(r) => undoRequest(r).catch(() => {})}
           />
         </div>
       )}
@@ -349,8 +363,8 @@ function QueueInner() {
                       border: '1px solid rgba(255,107,53,0.1)',
                     }}>
                       {/* Photo */}
-                      {p.profile_image_url ? (
-                        <img src={p.profile_image_url} alt="" style={{
+                      {localPhoto(p.profile_image_url) ? (
+                        <img src={localPhoto(p.profile_image_url)} alt="" style={{
                           width: 36, height: 36, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                           border: `2px solid ${TIER_COLORS[p.tier] || '#555'}`,
                         }} onError={e => { e.target.style.display = 'none'; }} />
@@ -391,14 +405,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>
@@ -437,8 +444,8 @@ function QueueInner() {
                     border: `1px solid ${TIER_COLORS[bridge.tier] || '#555'}20`,
                   }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                      {bridge.profile_image_url ? (
-                        <img src={bridge.profile_image_url} alt="" style={{
+                      {localPhoto(bridge.profile_image_url) ? (
+                        <img src={localPhoto(bridge.profile_image_url)} alt="" style={{
                           width: 36, height: 36, borderRadius: '50%', objectFit: 'cover',
                           border: `2px solid ${TIER_COLORS[bridge.tier]}`,
                         }} onError={e => { e.target.style.display = 'none'; }} />
@@ -564,8 +571,8 @@ function QueueInner() {
                         <input type="checkbox" checked={selected.has(r.id)}
                           onChange={() => toggleSelect(r.id)} onClick={e => e.stopPropagation()}
                           style={{ cursor: 'pointer', flexShrink: 0 }} />
-                        {r.profile_image_url ? (
-                          <img src={r.profile_image_url} alt="" style={{
+                        {localPhoto(r.profile_image_url) ? (
+                          <img src={localPhoto(r.profile_image_url)} alt="" style={{
                             width: 28, height: 28, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                             border: `1.5px solid ${TIER_COLORS[r.tier] || '#555'}`,
                           }} onError={e => { e.target.style.display = 'none'; }} />
@@ -585,13 +592,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>
                         )}
@@ -615,8 +618,8 @@ function QueueInner() {
                     style={{ cursor: 'pointer', flexShrink: 0 }} />
 
                   {/* Photo */}
-                  {r.profile_image_url ? (
-                    <img src={r.profile_image_url} alt="" style={{
+                  {localPhoto(r.profile_image_url) ? (
+                    <img src={localPhoto(r.profile_image_url)} alt="" style={{
                       width: 32, height: 32, borderRadius: '50%', objectFit: 'cover', flexShrink: 0,
                       border: `1.5px solid ${TIER_COLORS[r.tier] || '#555'}`,
                     }} onError={e => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'flex'; }} />
@@ -624,7 +627,7 @@ function QueueInner() {
                   <div style={{
                     width: 32, height: 32, borderRadius: '50%', flexShrink: 0, fontSize: 12, fontWeight: 700,
                     background: TIER_COLORS[r.tier] || '#555', color: r.tier === 'S' ? '#000' : '#fff',
-                    display: r.profile_image_url ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
+                    display: localPhoto(r.profile_image_url) ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center',
                   }}>{r.name?.charAt(0)}</div>
 
                   {/* Info */}
@@ -659,17 +662,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">