six-degrees 0.5.0 → 0.6.0

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

@@ -2,13 +2,12 @@
 
 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 { 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 AutoScanButton from './components/AutoScanButton';
 import { peopleByDegree } from '../lib/degrees';
 import { NETWORK_GRID, DEGREES_GRID, shows, gridCounts } from '../lib/tier-grid';
 import Sidebar from './components/Sidebar';
@@ -21,7 +20,9 @@ import { useUser } from './components/UserProvider';
 import { IS_DEMO, loadDemoNetwork } from '../lib/demo';
 import { hasCsvNetwork, loadCsvNetwork, clearCsvNetwork } from '../lib/csv';
 import Link from 'next/link';
-import AppTabs from './components/AppTabs';
+import AppHeader from './components/AppHeader';
+import { networkLevel } from '../lib/level';
+import { TIER_COLORS } from '../lib/themes';   // the theme's dot colours, filled before anything draws
 
 // One shared empty list, so "no 2nd-degree data" is the same value every render.
 const NO_DEGREE2 = [];
@@ -38,13 +39,6 @@ function statsFor(d1, d2) {
   return { total: d1.length, tiers: tierCounts, d2Total: d2.length, d2Tiers: d2TierCounts };
 }
 
-const TIER_COLORS = {
-  S: '#FFD700',
-  A: '#9B59B6',
-  B: '#3498DB',
-  C: '#95A5A6',
-  D: '#BDC3C7',
-};
 
 export default function Home() {
   // Suspense because HomeInner reads the address's ?chain= (useSearchParams),
@@ -99,10 +93,11 @@ function HomeInner() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const [filterPanelCollapsed, setFilterPanelCollapsed] = useState(true);
   const [visualMode, setVisualMode] = useState(() => (chainOpen ? 'chain' : linkedMode === 'degrees' ? 'chain' : linkedMode === 'separation' ? 'separation' : 'galaxy'));
-  const [notifications, setNotifications] = useState([]);
-  const [showNotifs, setShowNotifs] = useState(false);
-  // A notification opened in the right panel (app/components/NoteDetail.js).
+  // A notification opened in the right panel (app/components/NoteDetail.js);
+  // one picked on another page arrives as /?note=<id> (app/components/AppHeader.js).
   const [openNote, setOpenNote] = useState(null);
+  const linkedNote = params.get('note');
+  const openNoteHere = useCallback((n) => { setOpenNote(n); setSidebarCollapsed(false); }, []);
   const [csvMode, setCsvMode] = useState(false);
   const [csvSource, setCsvSource] = useState('csv');
   // What the scanner noted: hidden lists, and lists read with nothing new in
@@ -138,8 +133,6 @@ function HomeInner() {
     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(() => {});
     }
   }, [userId]);
 
@@ -188,7 +181,7 @@ function HomeInner() {
 
   // What the views draw. Memoised because the graph views rebuild their whole
   // scene when these change identity: computed inline, every re-render — a click,
-  // the sidebar opening, notifications arriving — reset the galaxy's layout. The
+  // the sidebar opening, a notification arriving — reset the galaxy's layout. The
   // empty list in network mode was a new [] each time, which was enough on its own.
   // Network Circle draws the degrees picked in the Filter panel, each person
   // once, at the nearest degree they're found (lib/degrees.js).
@@ -196,30 +189,42 @@ function HomeInner() {
   const grid = isDegreesMode ? grids.degrees : grids.network;
   // Degrees draws your connections (the bridges among them) and their circles;
   // Network Circle draws whoever the grid shows, at any degree.
+  // Separation ranks the people two steps away, and every connection is a way
+  // in to them whatever its tier, so there the tiers pick who's ranked and never
+  // which connections lead to them (Blake, 2026-10-03: hiding a tier took the
+  // purple A-tier mutuals off the map; "the filter should only apply to the output").
+  const isSeparation = mode === 'separation';
   const filtered = useMemo(() => {
+    if (isSeparation) return connections;
     if (isDegreesMode) return connections.filter((c) => shows(grid, c.tier, 1));
     return [1, 2, 3].flatMap((d) => (byDegree[d] || []).filter((c) => shows(grid, c.tier, d)));
-  }, [isDegreesMode, connections, byDegree, grid]);
+  }, [isSeparation, isDegreesMode, connections, byDegree, grid]);
   // Lookups built once per load. Every click re-renders this component, and the
   // three places below used to scan one list inside another — degree1.find per
   // 2nd-degree row, degree2.some per connection — about 16M comparisons, twice
   // a click, at 20k rows.
   const d1ById = useMemo(() => new Map(degree1.map(c => [c.id, c])), [degree1]);
+  // Your level, in the round button at the top right (lib/level.js).
+  const level = useMemo(() => networkLevel(degree1, degree2), [degree1, degree2]);
   const bridgeIds = useMemo(
     () => new Set(degree2.map(d => d.source_connection_id).filter(Boolean)),
     [degree2],
   );
-  // A 2nd-degree row shows when its own tier does at 2nd degree, and the bridge
-  // it came through shows at 1st.
+  // A 2nd-degree row shows when its own tier does at 2nd degree, and (in
+  // Degrees, not Separation) the bridge it came through shows at 1st.
   const filteredD2 = useMemo(() => {
     if (!isDegreesMode) return NO_DEGREE2;
+    if (isSeparation) return degree2.filter((c) => shows(grid, c.tier, 2));
     return degree2.filter((c) => shows(grid, c.tier, 2) && shows(grid, d1ById.get(c.source_connection_id)?.tier, 1));
-  }, [isDegreesMode, grid, d1ById, degree2]);
+  }, [isDegreesMode, isSeparation, grid, d1ById, degree2]);
   // How many people stand behind each dot of the grid. In Degrees, 1st degree
-  // counts the bridges, since those are the connections it draws.
-  const panelCounts = useMemo(() => gridCounts(isDegreesMode
-    ? { 1: degree1.filter((c) => bridgeIds.has(c.id)), 2: byDegree[2] }
-    : byDegree), [isDegreesMode, degree1, bridgeIds, byDegree]);
+  // counts the bridges, since those are the connections it draws; Separation
+  // only ranks the 2nd.
+  const panelCounts = useMemo(() => gridCounts(isSeparation
+    ? { 2: byDegree[2] }
+    : isDegreesMode
+      ? { 1: degree1.filter((c) => bridgeIds.has(c.id)), 2: byDegree[2] }
+      : byDegree), [isSeparation, isDegreesMode, degree1, bridgeIds, byDegree]);
   const selectHandler = useCallback((node) => {
     setSelected(node);
     if (node) { setSidebarCollapsed(false); setOpenNote(null); }
@@ -244,7 +249,7 @@ function HomeInner() {
 
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: '#fff' }}>
         <div style={{ fontSize: 24, fontWeight: 700 }}>Loading Six Degrees…</div>
         <div style={{ fontSize: 14, color: '#888', marginTop: 8 }}>Mapping your LinkedIn network</div>
       </div>
@@ -255,157 +260,46 @@ function HomeInner() {
   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' }}>
-            Six Degrees
-          </h1>
-          <AppTabs
-            active={mode}
-            isMobile={isMobile}
-            csvMode={csvMode}
-            onMode={(m) => { setMode(m); setSelected(null); setVisualMode(m === 'network' ? 'galaxy' : m === 'degrees' ? 'chain' : 'separation'); }}
-            after={!IS_DEMO && !csvMode ? <AutoScanButton isMobile={isMobile} /> : null}
-          >
-            {/* Which network you are looking at, and the way back out of it.
-                Loading the sample used to be a one-way door: it lives in
-                sessionStorage, and nothing in the UI cleared it. */}
-            {csvMode && (
-              <div style={{
-                display: 'flex', alignItems: 'center', gap: 6,
-                marginLeft: isMobile ? 4 : 10, padding: isMobile ? '4px 8px' : '5px 10px',
-                borderRadius: 999, background: 'rgba(255,255,255,0.05)',
-                border: '1px solid rgba(255,255,255,0.12)',
-              }}>
-                <span style={{
-                  width: 6, height: 6, borderRadius: '50%',
-                  background: csvSource === 'sample' ? '#9B59B6' : '#2ecc71',
-                }} />
-                <span style={{ fontSize: isMobile ? 10 : 12, color: 'rgba(255,255,255,0.65)', whiteSpace: 'nowrap' }}>
-                  {csvSource === 'sample' ? 'Sample network' : 'Your CSV'}
-                </span>
-                <button
-                  onClick={() => { clearCsvNetwork(); window.location.href = '/'; }}
-                  title={csvSource === 'sample' ? 'Leave the sample network' : 'Clear this import'}
-                  style={{
-                    border: 'none', background: 'transparent', cursor: 'pointer',
-                    color: '#888', fontSize: isMobile ? 13 : 15, lineHeight: 1,
-                    padding: '0 0 0 2px',
-                  }}
-                >
-                  &times;
-                </button>
-              </div>
-            )}
-          </AppTabs>
-          {/* Settings — also in CSV/sample mode and on phones, so updates stay reachable */}
-          {!IS_DEMO && <Link
-            href="/settings"
-            title="Settings"
-            aria-label="Settings"
-            style={{
-              width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', flexShrink: 0,
-              background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 14 : 16, textDecoration: 'none',
-              display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: isMobile ? 4 : 8,
-            }}
-          >
-            {'\u2699\uFE0E'}
-          </Link>}
-          {/* Notification bell */}
-          {!IS_DEMO && !csvMode && <div style={{ position: 'relative', marginLeft: isMobile ? 4 : 8 }}>
+    <div data-map style={{ height: '100vh', overflow: 'hidden', background: 'var(--sd-page)', color: '#fff', fontFamily: 'var(--sd-font)' }}>
+      <AppHeader
+        active={mode}
+        isMobile={isMobile}
+        csvMode={csvMode}
+        onMode={(m) => { setMode(m); setSelected(null); setVisualMode(m === 'network' ? 'galaxy' : m === 'degrees' ? 'chain' : 'separation'); }}
+        level={level}
+        onOpenNote={openNoteHere}
+        openNoteId={linkedNote}
+        // Which network you are looking at, and the way back out of it. Loading
+        // the sample used to be a one-way door: it lives in sessionStorage, and
+        // nothing in the UI cleared it.
+        chips={csvMode && (
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 6,
+            marginLeft: isMobile ? 4 : 10, padding: isMobile ? '4px 8px' : '5px 10px',
+            borderRadius: 999, background: 'rgba(255,255,255,0.05)',
+            border: '1px solid rgba(255,255,255,0.12)',
+          }}>
+            <span style={{
+              width: 6, height: 6, borderRadius: '50%',
+              background: csvSource === 'sample' ? '#9B59B6' : '#2ecc71',
+            }} />
+            <span style={{ fontSize: isMobile ? 10 : 12, color: 'rgba(255,255,255,0.65)', whiteSpace: 'nowrap' }}>
+              {csvSource === 'sample' ? 'Sample network' : 'Your CSV'}
+            </span>
             <button
-              onClick={() => setShowNotifs(!showNotifs)}
+              onClick={() => { clearCsvNetwork(); window.location.href = '/'; }}
+              title={csvSource === 'sample' ? 'Leave the sample network' : 'Clear this import'}
               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: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
+                border: 'none', background: 'transparent', cursor: 'pointer',
+                color: '#888', fontSize: isMobile ? 13 : 15, lineHeight: 1,
+                padding: '0 0 0 2px',
               }}
             >
-              🔔
-              {notifications.filter(n => !n.seen).length > 0 && (
-                <span style={{
-                  position: 'absolute', top: -2, right: -2, width: 16, height: 16, borderRadius: '50%',
-                  background: '#ff5050', color: '#fff', fontSize: 9, fontWeight: 700,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                }}>
-                  {notifications.filter(n => !n.seen).length}
-                </span>
-              )}
+              &times;
             </button>
-            {showNotifs && (
-              <div style={{
-                position: 'absolute', top: 40, right: 0, width: 320, maxHeight: 400,
-                background: 'rgba(10,10,26,0.98)', border: '1px solid rgba(255,255,255,0.1)',
-                borderRadius: 12, overflow: 'hidden', zIndex: 100,
-                backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
-                boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
-              }}>
-                <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <span style={{ fontWeight: 700, fontSize: 14 }}>Notifications</span>
-                  {notifications.filter(n => !n.seen).length > 0 && (
-                    <button onClick={() => {
-                      fetch('/api/notifications', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'mark-all-seen' }) });
-                      setNotifications(prev => prev.map(n => ({ ...n, seen: true })));
-                    }} style={{ background: 'none', border: 'none', color: '#3498DB', fontSize: 11, cursor: 'pointer', fontWeight: 600 }}>
-                      Mark all read
-                    </button>
-                  )}
-                </div>
-                <div style={{ overflowY: 'auto', maxHeight: 340 }}>
-                  {notifications.length === 0 ? (
-                    <div style={{ padding: 20, textAlign: 'center', color: '#555', fontSize: 12 }}>No notifications yet</div>
-                  ) : notifications.slice(0, 20).map(n => (
-                    <div key={n.id} role="button" tabIndex={0}
-                      onClick={() => {
-                        // Open it in the right panel, and count it as read.
-                        if (!n.seen) {
-                          fetch('/api/notifications', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'mark-seen', id: n.id }) }).catch(() => {});
-                          setNotifications(prev => prev.map(x => (x.id === n.id ? { ...x, seen: true } : x)));
-                        }
-                        setOpenNote(n); setShowNotifs(false); setSidebarCollapsed(false);
-                      }}
-                      onKeyDown={(e) => { if (e.key === 'Enter') e.currentTarget.click(); }}
-                      onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
-                      onMouseLeave={(e) => { e.currentTarget.style.background = n.seen ? 'transparent' : 'rgba(255,215,0,0.04)'; }}
-                      style={{
-                      padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer',
-                      background: n.seen ? 'transparent' : 'rgba(255,215,0,0.04)',
-                    }}>
-                      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                        <span style={{ fontSize: 16 }}>{n.icon || '📌'}</span>
-                        <div style={{ flex: 1 }}>
-                          <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? '#888' : '#fff' }}>{n.title}<span style={{ color: '#556', marginLeft: 6 }}>›</span></div>
-                          {n.message && <div style={{ fontSize: 10, color: '#666', marginTop: 2 }}>{n.message}</div>}
-                          <div style={{ fontSize: 9, color: '#444', marginTop: 3 }}>{new Date(n.created_at).toLocaleDateString()}</div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>}
-          {/* 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',
-            background: 'linear-gradient(135deg, #FFD700, #FF6B35)', color: '#000', fontWeight: 800, fontSize: isMobile ? 11 : 14,
-            textDecoration: 'none', marginLeft: isMobile ? 6 : 12, flexShrink: 0,
-          }}>
-            {(() => {
-              const sCount = degree1.filter(c => c.tier === 'S').length;
-              const aCount = degree1.filter(c => c.tier === 'A').length;
-              const bCount = degree1.filter(c => c.tier === 'B').length;
-              const clusters = degree1.filter(c => bridgeIds.has(c.id)).length;
-              const d2S = degree2.filter(c => c.tier === 'S').length;
-              const np = (sCount*100)+(aCount*40)+(bCount*15)+(clusters*200)+(d2S*50)+degree1.length;
-              return Math.floor(Math.sqrt(np / 10));
-            })()}
-          </a>
-        </div>
-
+          </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={{
@@ -418,13 +312,13 @@ function HomeInner() {
             {pendingCount} Pending
           </Link>
         )}
-      </header>
+      </AppHeader>
 
       <div style={{ display: 'flex', height: isMobile ? 'calc(100vh - 70px)' : 'calc(100vh - 130px)', position: 'relative' }}>
         <FilterPanel
           collapsed={filterPanelCollapsed}
           onToggle={() => setFilterPanelCollapsed(!filterPanelCollapsed)}
-          mode={isDegreesMode ? 'degrees' : 'network'}
+          mode={isSeparation ? 'separation' : isDegreesMode ? 'degrees' : 'network'}
           visualMode={view.key}
           grid={grid}
           gridCounts={panelCounts}
@@ -536,7 +430,8 @@ function networkShape(d1, d2) {
 // 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.
+// does. Its own component so the scanner's answer, which changes every second or
+// two while a scan runs, re-renders it and not the whole map.
 function NetworkRefresh({ onChange, live }) {
   const scan = useScanner();
   const ended = scan.finished.find(CHANGES_NETWORK)?.startedAt ?? null;
@@ -552,44 +447,3 @@ function NetworkRefresh({ onChange, live }) {
   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,7 +1,7 @@
 'use client';
 
 import { Suspense, useEffect, useState } from 'react';
-import AppTabs from '../components/AppTabs';
+import AppHeader from '../components/AppHeader';
 import { setNotchTabs } from '../../lib/island';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { runScrape, scraperStatus, notReadyMessage, busyReason } from '../../lib/scraper-client';
@@ -15,8 +15,8 @@ import useScanner from '../components/useScanner';
 import Link from 'next/link';
 import { companyOf, getSeniority } from '../../lib/companies';
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 // Map and Companies (Blake, 2026-10-02: companies are worth more than industries,
 // and an industry's detail opens from a company's card). Whether the map's bubbles
 // are companies or people is a switch in its Filters panel.
@@ -240,8 +240,8 @@ function PathsInner() {
     return (
       <div style={{
         minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-        gap: 12, background: '#0a0a1a', color: 'rgba(255,255,255,0.7)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        gap: 12, background: 'var(--sd-page)', color: 'rgba(255,255,255,0.7)',
+        fontFamily: 'var(--sd-font)',
       }}>
         <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, color: '#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>
@@ -251,31 +251,18 @@ function PathsInner() {
   }
 
   if (loading) {
-    return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>Loading...</div>;
+    return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: '#fff' }}>Loading...</div>;
   }
 
   return (
     <div style={{
-      height: '100vh', background: '#0a0a1a', color: '#fff',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      height: '100vh', background: 'var(--sd-page)', color: '#fff',
+      fontFamily: 'var(--sd-font)',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
       {/* The same header as every page: the app's tabs, Paths lit; Map, People,
           Industries and Companies sit in the notch under it. */}
-      <header style={{ padding: '20px 30px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-          <Link href="/" style={{ textDecoration: 'none' }}>
-            <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
-              Six Degrees
-            </h1>
-          </Link>
-          <AppTabs active="paths" csvMode={localOnly} />
-          <Link href="/settings" title="Settings" aria-label="Settings" style={{
-            width: 32, height: 32, borderRadius: '50%', flexShrink: 0, background: 'rgba(255,255,255,0.06)', color: '#888',
-            fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}>⚙</Link>
-        </div>
-      </header>
+      <AppHeader active="paths" csvMode={localOnly} />
       {selectedCompany && (
         <div style={{ padding: '10px 24px', borderBottom: '1px solid rgba(255,255,255,0.08)', flexShrink: 0 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>

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

@@ -9,6 +9,8 @@ import OnboardingGate from '../components/OnboardingGate';
 import { useUser } from '../components/UserProvider';
 import { sectorByKey } from '../../lib/sector-labels';
 import Link from 'next/link';
+import { networkPower as powerOf, levelOf } from '../../lib/level';
+import { TIER_COLORS } from '../../lib/themes';
 import NetworkHealthSection from '../components/settings/NetworkHealthSection';
 
 const LEVEL_NAMES = {
@@ -74,10 +76,9 @@ function ProfileInner() {
       d1.forEach(c => { if (c.company) companies[c.company] = (companies[c.company] || 0) + 1; });
       const topCompanies = Object.entries(companies).sort((a, b) => b[1] - a[1]).slice(0, 10);
 
-      // Network Power
-      const networkPower = (tiers.S * 100) + (tiers.A * 40) + (tiers.B * 15) + (tiers.C * 5) + (tiers.D * 1)
-        + (clusters * 200) + (catalysts * 150) + (d2Tiers.S * 50) + d1.length;
-      const level = Math.floor(Math.sqrt(networkPower / 10));
+      // Network Power, and the level the header's round button shows (lib/level.js)
+      const networkPower = powerOf(d1, d2);
+      const level = levelOf(networkPower);
       const currentLevelPower = level * level * 10;
       const nextLevelPower = (level + 1) * (level + 1) * 10;
       const xpProgress = ((networkPower - currentLevelPower) / (nextLevelPower - currentLevelPower)) * 100;
@@ -115,10 +116,10 @@ function ProfileInner() {
   if (IS_DEMO) {
     return (
       <div style={{
-        minHeight: '100vh', background: '#0a0a1a', color: 'rgba(255,255,255,0.7)',
+        minHeight: '100vh', background: 'var(--sd-page)', color: 'rgba(255,255,255,0.7)',
         display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
         gap: 12, textAlign: 'center', padding: 24,
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontFamily: 'var(--sd-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>
@@ -129,13 +130,13 @@ function ProfileInner() {
 
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>
+      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: '#fff' }}>
         Loading profile...
       </div>
     );
   }
 
-  const tierColors = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+  const tierColors = TIER_COLORS;   // the theme's (lib/themes.js)
   const s = stats;
 
   // Milestones
@@ -154,8 +155,8 @@ function ProfileInner() {
 
   return (
     <div style={{
-      height: '100vh', background: '#0a0a1a', color: '#fff',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      height: '100vh', background: 'var(--sd-page)', color: '#fff',
+      fontFamily: 'var(--sd-font)',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
       {/* Header */}

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

@@ -2,7 +2,7 @@
 
 import { Suspense, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import AppTabs from '../components/AppTabs';
+import AppHeader from '../components/AppHeader';
 import SocialHub from '../social/SocialHub';
 import { setNotchTabs } from '../../lib/island';
 import { loadNetwork } from '../../lib/network';
@@ -18,8 +18,8 @@ import { keyFor } from '../../lib/separation';
 import { localPhoto } from '../../lib/photos';
 import { reachIndex } from '../../lib/reach';
 import { loadScanNotes } from '../../lib/scraper-client';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 // Who to reach first: power, +1 when the company their score is built on is a
 // top one by the model's own scores (TOP_COMPANY: the curated list's major
@@ -159,8 +159,8 @@ function QueueInner() {
   if (IS_DEMO) {
     return (
       <div style={{
-        minHeight: '100vh', background: '#0a0a1a', color: 'rgba(255,255,255,0.7)',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        minHeight: '100vh', background: 'var(--sd-page)', color: 'rgba(255,255,255,0.7)',
+        fontFamily: 'var(--sd-font)',
         display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10,
         textAlign: 'center', padding: 24,
       }}>
@@ -254,31 +254,18 @@ function QueueInner() {
   }
 
   if (loading) {
-    return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>Loading...</div>;
+    return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--sd-page)', color: '#fff' }}>Loading...</div>;
   }
 
   return (
     <div style={{
-      height: '100vh', background: '#0a0a1a', color: '#fff',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      height: '100vh', background: 'var(--sd-page)', color: '#fff',
+      fontFamily: 'var(--sd-font)',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
       {/* The same header as every page: the app's tabs, Outlink lit. Circles, To add,
           Pending and Messages & follow-ups sit in the notch under it. */}
-      <header style={{ padding: '20px 30px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-          <Link href="/" style={{ textDecoration: 'none' }}>
-            <h1 style={{ fontSize: 28, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
-              Six Degrees
-            </h1>
-          </Link>
-          <AppTabs active="outlink" />
-          <Link href="/settings" title="Settings" aria-label="Settings" style={{
-            width: 32, height: 32, borderRadius: '50%', flexShrink: 0, background: 'rgba(255,255,255,0.06)', color: '#888',
-            fontSize: 16, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}>⚙</Link>
-        </div>
-      </header>
+      <AppHeader active="outlink" />
       {(view === 'recs' || view === 'pending') && (
       <div style={{ padding: '10px 24px', borderBottom: '1px solid rgba(255,255,255,0.08)', flexShrink: 0 }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>

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

@@ -18,7 +18,7 @@ export default function ScoresMoved() {
     router.replace(at === '#health' ? '/profile?view=insights' : `/settings${at || '#scoring'}`);
   }, [router]);
   return (
-    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#aab', fontFamily: FONT, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>
+    <div style={{ minHeight: '100vh', background: 'var(--sd-page)', color: '#aab', fontFamily: FONT, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>
       Scores are in <Link href="/settings#scoring" style={{ color: '#3498DB', marginLeft: 4 }}>Settings</Link> now.
     </div>
   );