six-degrees 0.4.11 → 0.5.0

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

@@ -7,17 +7,21 @@ import useScanner from './components/useScanner';
 import useRequests from './components/useRequests';
 import { requestCount } from '../lib/requests-client';
 import { loadNetwork } from '../lib/network';
-import { VIEWS, resolveView } from './components/views';
+import { resolveView } from './components/views';
 import AutoScanButton from './components/AutoScanButton';
-import { peopleByDegree, tierCountsOf } from '../lib/degrees';
+import { peopleByDegree } from '../lib/degrees';
+import { NETWORK_GRID, DEGREES_GRID, shows, gridCounts } from '../lib/tier-grid';
 import Sidebar from './components/Sidebar';
 import FilterPanel from './components/FilterPanel';
+import { viewsForMode } from './components/views';
+import { setNotchTabs } from '../lib/island';
 import OnboardingGate from './components/OnboardingGate';
 import EmptyState from './components/EmptyState';
 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';
 
 // One shared empty list, so "no 2nd-degree data" is the same value every render.
 const NO_DEGREE2 = [];
@@ -72,27 +76,33 @@ function HomeInner() {
   const [degree2, setDegree2] = useState([]);
   // People found only by company scans: 3rd degree in Network Circle's filter.
   const [degree3, setDegree3] = useState([]);
-  // Which degrees Network Circle draws: your connections alone until you pick more.
-  const [degrees, setDegrees] = useState([1]);
-  // Tiers switched off in Network Circle's Filter panel (C and D make a lot of noise).
-  const [hiddenTiers, setHiddenTiers] = useState([]);
+  // The Filters panel's grid, one for each tab: which tiers show, at which
+  // degrees (lib/tier-grid.js). Network Circle starts with your connections
+  // alone; Degrees with everything it has.
+  const [grids, setGrids] = useState({ network: NETWORK_GRID, degrees: DEGREES_GRID });
   const [selected, setSelected] = useState(null);
   const focusNodeRef = useRef(null);
-  const [filter, setFilter] = useState('all');
   // 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 params = useSearchParams();
+  const linkedChain = params.get('chain');
+  // Another page's tab row links back here with the tab named: /?mode=separation (app/components/AppTabs.js).
+  const linkedMode = ['network', 'degrees', 'separation'].includes(params.get('mode')) ? params.get('mode') : null;
   const [chainOpen, setChainOpen] = useState(linkedChain);
-  const [mode, setMode] = useState(() => (chainOpen ? 'degrees' : 'network'));
+  // Whose circle is open in Bridge Chains right now: the right panel follows it.
+  const [chainIn, setChainIn] = useState(null);
+  const [mode, setMode] = useState(() => (chainOpen ? 'degrees' : linkedMode || '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(() => (chainOpen ? 'chain' : 'galaxy'));
+  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).
+  const [openNote, setOpenNote] = useState(null);
   const [csvMode, setCsvMode] = useState(false);
   const [csvSource, setCsvSource] = useState('csv');
   // What the scanner noted: hidden lists, and lists read with nothing new in
@@ -158,7 +168,7 @@ function HomeInner() {
   const [separationPreset, setSeparationPreset] = useState(null);
   const showInSeparation = useCallback((preset) => {
     setSeparationPreset({ ...preset, id: `${preset.query}|${preset.tier || ''}|${preset.rarity || ''}|${Math.random()}` });
-    setMode('degrees');
+    setMode('separation');
     setVisualMode('separation');
   }, []);
   // A card's Insights → that person's circle in Bridge Chains.
@@ -172,7 +182,8 @@ function HomeInner() {
     try { window.history.replaceState(null, '', window.location.pathname); } catch { /* the link stays */ }
   }, []);
 
-  const isDegreesMode = mode === 'degrees';
+  // Separation is its own tab, built on the same rows as Degrees: your bridges and their circles.
+  const isDegreesMode = mode === 'degrees' || mode === 'separation';
   const connections = degree1;
 
   // What the views draw. Memoised because the graph views rebuild their whole
@@ -182,14 +193,13 @@ function HomeInner() {
   // Network Circle draws the degrees picked in the Filter panel, each person
   // once, at the nearest degree they're found (lib/degrees.js).
   const byDegree = useMemo(() => peopleByDegree(degree1, degree2, degree3), [degree1, degree2, degree3]);
-  const networkRows = useMemo(
-    () => (isDegreesMode ? connections : degrees.flatMap((d) => byDegree[d] || [])),
-    [isDegreesMode, connections, degrees, byDegree],
-  );
+  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.
   const filtered = useMemo(() => {
-    if (!isDegreesMode) return hiddenTiers.length ? networkRows.filter(c => !hiddenTiers.includes(c.tier)) : networkRows;
-    return filter === 'all' ? networkRows : networkRows.filter(c => c.tier === filter);
-  }, [isDegreesMode, networkRows, filter, hiddenTiers]);
+    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]);
   // 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
@@ -199,21 +209,39 @@ function HomeInner() {
     () => new Set(degree2.map(d => d.source_connection_id).filter(Boolean)),
     [degree2],
   );
-  const bridgeTierCounts = useMemo(() => {
-    const counts = {};
-    degree1.forEach(c => { if (bridgeIds.has(c.id)) counts[c.tier] = (counts[c.tier] || 0) + 1; });
-    return counts;
-  }, [degree1, bridgeIds]);
+  // A 2nd-degree row shows when its own tier does at 2nd degree, and the bridge
+  // it came through shows at 1st.
   const filteredD2 = useMemo(() => {
     if (!isDegreesMode) return NO_DEGREE2;
-    if (filter === 'all') return degree2;
-    return degree2.filter(c => d1ById.get(c.source_connection_id)?.tier === filter);
-  }, [isDegreesMode, filter, d1ById, degree2]);
+    return degree2.filter((c) => shows(grid, c.tier, 2) && shows(grid, d1ById.get(c.source_connection_id)?.tier, 1));
+  }, [isDegreesMode, 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]);
   const selectHandler = useCallback((node) => {
     setSelected(node);
-    if (node) setSidebarCollapsed(false);
+    if (node) { setSidebarCollapsed(false); setOpenNote(null); }
   }, []);
 
+  // Resolved once: the renderer below and the notch's buttons both need it.
+  // (Above the loading screen's early return, because the effect is a hook.)
+  const view = resolveView(visualMode, mode);
+
+  // This tab's views live in the notch under the header (app/components/ScanStatusBar.js);
+  // the Filters panel only filters.
+  const hasNetwork = degree1.length > 0;
+  useEffect(() => {
+    if (!hasNetwork) return undefined;
+    setNotchTabs({
+      items: viewsForMode(mode).map((v) => ({ key: v.key, label: v.label, icon: v.icon, title: v.desc })),
+      current: view.key,
+      onPick: setVisualMode,
+    });
+    return () => setNotchTabs(null);
+  }, [mode, view.key, hasNetwork]);
+
   if (loading) {
     return (
       <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', background: '#0a0a1a', color: '#fff' }}>
@@ -223,9 +251,6 @@ function HomeInner() {
     );
   }
 
-  // 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;
 
@@ -236,28 +261,13 @@ function HomeInner() {
           <h1 style={{ fontSize: isMobile ? 16 : 28, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
             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
-              onClick={() => { setMode('network'); setSelected(null); setFilter('all'); setVisualMode('galaxy'); }}
-              style={{
-                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600, cursor: 'pointer',
-                background: mode === 'network' ? '#fff' : 'transparent',
-                color: mode === 'network' ? '#000' : '#888',
-              }}
-            >
-              {isMobile ? 'Circle' : 'Network Circle'}
-            </button>
-            <button
-              onClick={() => { setMode('degrees'); setSelected(null); setFilter('all'); setVisualMode('chain'); }}
-              style={{
-                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600, cursor: 'pointer',
-                background: mode === 'degrees' ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'rgba(255,255,255,0.12)',
-                color: mode === 'degrees' ? '#000' : '#fff',
-              }}
-            >
-              Degrees
-            </button>
-
+          <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. */}
@@ -288,63 +298,7 @@ function HomeInner() {
                 </button>
               </div>
             )}
-            {!IS_DEMO && <Link
-              href="/paths"
-              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: '#00ff88', textDecoration: 'none',
-                display: 'flex', alignItems: 'center', gap: 4,
-              }}
-            >
-              Paths
-            </Link>}
-            {!IS_DEMO && <Link
-              href="/social"
-              title="Experimental: what your own LinkedIn data says about your relationships"
-              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,
-              }}
-            >
-              Social<span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>beta</span>
-            </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={{
-                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600,
-                background: 'rgba(255,255,255,0.06)', color: '#FF6B35', textDecoration: 'none',
-                display: 'flex', alignItems: 'center', gap: 4,
-              }}
-            >
-              Outlink
-            </Link>}
-            {/* Named "Scan" everywhere — nav, page title, README and docs. It is
-                also the only route to 2nd-degree data, so it stays visible on
-                mobile rather than being the one thing a phone user cannot find. */}
-            {!IS_DEMO && !csvMode && <Link
-              href="/setup"
-              style={{
-                padding: isMobile ? '8px 12px' : '8px 16px', borderRadius: 6, border: 'none',
-                fontSize: 13, fontWeight: 600,
-                background: 'rgba(255,255,255,0.06)', color: '#666', textDecoration: 'none',
-                display: 'flex', alignItems: 'center', gap: 4,
-              }}
-            >
-              Scan
-            </Link>}
-            {!IS_DEMO && !csvMode && <AutoScanButton isMobile={isMobile} />}
-          </div>
+          </AppTabs>
           {/* Settings — also in CSV/sample mode and on phones, so updates stay reachable */}
           {!IS_DEMO && <Link
             href="/settings"
@@ -402,14 +356,26 @@ function HomeInner() {
                   {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} style={{
-                      padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.04)',
+                    <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}</div>
+                          <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>
@@ -458,18 +424,11 @@ function HomeInner() {
         <FilterPanel
           collapsed={filterPanelCollapsed}
           onToggle={() => setFilterPanelCollapsed(!filterPanelCollapsed)}
-          mode={mode}
-          filter={filter}
-          onFilterChange={setFilter}
+          mode={isDegreesMode ? 'degrees' : 'network'}
           visualMode={view.key}
-          onVisualModeChange={setVisualMode}
-          tierCounts={isDegreesMode ? stats?.tiers || {} : tierCountsOf(networkRows)}
-          degrees={degrees}
-          onDegreesChange={setDegrees}
-          hiddenTiers={hiddenTiers}
-          onHiddenTiersChange={setHiddenTiers}
-          degreeCounts={{ 1: byDegree[1].length, 2: byDegree[2].length, 3: byDegree[3].length }}
-          bridgeTierCounts={bridgeTierCounts}
+          grid={grid}
+          gridCounts={panelCounts}
+          onGridChange={(next) => setGrids((g) => ({ ...g, [isDegreesMode ? 'degrees' : 'network']: next }))}
         />
         {/* Visualization — switches based on visualMode */}
         {(() => {
@@ -525,6 +484,7 @@ function HomeInner() {
             canScan,
             chainOpen,
             onChainOpened: chainOpened,
+            onCircle: setChainIn,
             preset: separationPreset,
           };
           return <View {...viewProps} />;
@@ -535,12 +495,14 @@ function HomeInner() {
           tierColors={TIER_COLORS}
           connections={degree1}
           degree2={degree2}
-          mode={mode}
+          mode={isDegreesMode ? 'degrees' : 'network'}
           collapsed={sidebarCollapsed}
-          filter={filter}
           onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
           onSelect={(node) => { setSelected(node || null); }}
-          onSwitchMode={(newMode) => { setMode(newMode); setFilter('all'); }}
+          onSwitchMode={(newMode) => { setMode(newMode); }}
+          note={openNote}
+          onCloseNote={() => setOpenNote(null)}
+          circle={view.key === 'chain' ? chainIn : null}
           onOpenCircle={openCircle}
           onShowInSeparation={showInSeparation}
           onFocusNode={(nodeId) => { if (focusNodeRef.current) focusNodeRef.current(nodeId); }}
@@ -550,35 +512,6 @@ function HomeInner() {
         />
         {canScan && <NetworkRefresh onChange={reload} live={view.key === 'chain'} />}
 
-        {/* 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,
-            display: 'flex', alignItems: 'center', gap: 8,
-            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' }}>{VIEWS.orbit.icon} {VIEWS.orbit.label}</span>
-            <div
-              onClick={() => setVisualMode(view.key === 'orbit' ? 'chain' : 'orbit')}
-              style={{
-                width: 32, height: 18, borderRadius: 9, cursor: 'pointer',
-                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: view.key === 'orbit' ? 16 : 2,
-                transition: 'left 0.2s',
-              }} />
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { Suspense, useEffect, useState } from 'react';
+import AppTabs from '../components/AppTabs';
+import { setNotchTabs } from '../../lib/island';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { runScrape, scraperStatus, notReadyMessage, busyReason } from '../../lib/scraper-client';
 import { loadNetwork } from '../../lib/network';
@@ -15,7 +17,10 @@ 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']];
+// 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.
+const TABS = [['map', 'Map'], ['companies', 'Companies']];
 
 export default function PathsPage() {
   // Suspense because PathsInner reads the address's ?tab= (useSearchParams),
@@ -32,15 +37,24 @@ function PathsInner() {
   const [d1Data, setD1Data] = useState([]);
   const [d2Data, setD2Data] = useState([]);
   const [d3Data, setD3Data] = useState([]);
-  // Map and Industries are the analyzer; Companies is the list it grew from.
+  // Map is the analyzer; Companies is the list it grew from.
   // 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.
+  // their own (app/scores), and now live in Settings: 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.
+  // Old links still land: ?tab=people opens the map with people as the bubbles; ?tab=industries the map.
   const asked = useSearchParams().get('tab');
   const [tab, setTab] = useState(() => (TABS.some(([k]) => k === asked) ? asked : 'map'));
+  const initialShow = asked === 'people' ? 'people' : 'companies';
   const router = useRouter();
-  useEffect(() => { if (asked === 'scores') router.replace('/scores#companies'); }, [asked, router]);
+  useEffect(() => { if (asked === 'scores') router.replace('/settings#companies'); }, [asked, router]);
+  // Map and Companies in the notch under the tabs, as the
+  // map page's views are; not while one company is open (its own bar shows).
+  useEffect(() => {
+    if (selectedCompany) { setNotchTabs(null); return undefined; }
+    setNotchTabs({ items: TABS.map(([key, label]) => ({ key, label })), current: tab, onPick: setTab });
+    return () => setNotchTabs(null);
+  }, [tab, selectedCompany]);
   // Bumped when company scores change, so the network reloads with new tiers.
   const [reloadKey, setReloadKey] = useState(0);
   // The sample or a CSV import: they live only in this tab, so a company scan could only fail.
@@ -246,28 +260,25 @@ function PathsInner() {
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       display: 'flex', flexDirection: 'column', overflow: 'hidden',
     }}>
-      <header style={{ padding: '14px 24px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0 }}>
+      {/* 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>
+      {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 }}>
-          <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: '1px solid rgba(255,255,255,0.1)',
-          }}><span style={{ fontSize: 16 }}>&larr;</span> Map</Link>
-          <h1 style={{
-            fontSize: 20, fontWeight: 700, margin: 0,
-            background: 'linear-gradient(135deg, #00ff88, #3498DB)',
-            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
-          }}>Paths</h1>
-          {!selectedCompany && (
-            <div style={{ display: 'flex', gap: 4, marginLeft: 8, padding: 3, borderRadius: 8, background: 'rgba(255,255,255,0.05)' }}>
-              {TABS.map(([k, label]) => (
-                <button key={k} onClick={() => setTab(k)} style={{
-                  padding: '5px 12px', borderRadius: 6, border: 'none', cursor: 'pointer', fontSize: 12.5, fontWeight: 700,
-                  background: tab === k ? 'linear-gradient(135deg, #00ff88, #3498DB)' : 'transparent', color: tab === k ? '#000' : '#aab',
-                }}>{label}</button>
-              ))}
-            </div>
-          )}
           {selectedCompany && (
             <>
               <button onClick={() => { setSelectedCompany(null); setCompanyPeople([]); }}
@@ -301,10 +312,11 @@ function PathsInner() {
             </>
           )}
         </div>
-      </header>
+        </div>
+      )}
 
       {!selectedCompany && tab !== 'companies' ? (
-        <PathsAnalyzer d1={d1Data} d2={d2Data} d3={d3Data} tab={tab}
+        <PathsAnalyzer d1={d1Data} d2={d2Data} d3={d3Data} initialShow={initialShow}
           onOpenCompany={(co) => selectCompany({ ...co, sCount: co.S, aCount: co.A })} />
       ) : (
       <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px' }}>

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Suspense, useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { loadNetwork } from '../../lib/network';
 import MappingProgress from '../components/MappingProgress';
 import { IS_DEMO } from '../../lib/demo';
@@ -8,6 +9,7 @@ import OnboardingGate from '../components/OnboardingGate';
 import { useUser } from '../components/UserProvider';
 import { sectorByKey } from '../../lib/sector-labels';
 import Link from 'next/link';
+import NetworkHealthSection from '../components/settings/NetworkHealthSection';
 
 const LEVEL_NAMES = {
   1: 'Observer', 11: 'Connector', 31: 'Networker', 51: 'Strategist', 76: 'Architect',
@@ -22,18 +24,25 @@ function getLevelName(level) {
 }
 
 export default function ProfilePage() {
-  return <OnboardingGate><ProfileInner /></OnboardingGate>;
+  // useSearchParams (which view) needs a Suspense boundary to build.
+  return <Suspense fallback={null}><OnboardingGate><ProfileInner /></OnboardingGate></Suspense>;
 }
 
 function ProfileInner() {
   const { userId, userName, userProfile } = useUser();
+  // Profile, or Insights: how your network holds together (Blake, 2026-10-02:
+  // "having the insights button into profile having network health"). A link
+  // can open Insights: /profile?view=insights (Settings, the old Scores tab).
+  const router = useRouter();
+  const view = useSearchParams().get('view') === 'insights' ? 'insights' : 'profile';
+  const showView = (v) => router.replace(v === 'insights' ? '/profile?view=insights' : '/profile', { scroll: false });
   const profile = userProfile || { name: userName || 'User', headline: '', sectors: [], goals: [] };
   const [stats, setStats] = useState(null);
   const [loading, setLoading] = useState(true);
   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 Scores → Your sector. (users.sectors,
+  // "Your Sectors" is what you picked in Settings → Scores → Your field. (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).
@@ -163,9 +172,27 @@ function ProfileInner() {
           background: 'linear-gradient(135deg, #FFD700, #9B59B6, #3498DB)',
           WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
         }}>Profile</h1>
+        {/* Profile, or Insights: network health, built from your own scans */}
+        <div role="tablist" aria-label="Profile or Insights" style={{ display: 'flex', gap: 3, marginLeft: 8, padding: 3, borderRadius: 9, background: 'rgba(255,255,255,0.06)' }}>
+          {[['profile', 'Profile'], ['insights', 'Insights']].map(([k, label]) => (
+            <button key={k} type="button" role="tab" aria-selected={view === k} onClick={() => showView(k)} style={{
+              padding: '6px 14px', borderRadius: 7, border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 700,
+              background: view === k ? 'linear-gradient(135deg, #FFD700, #FF6B35)' : 'transparent', color: view === k ? '#000' : '#aab',
+            }}>{k === 'insights' ? '✦ ' : ''}{label}</button>
+          ))}
+        </div>
       </header>
 
       <div style={{ flex: 1, overflow: 'auto', padding: '30px 20px' }}>
+      {view === 'insights' ? (
+        <div style={{ maxWidth: 820, margin: '0 auto' }}>
+          <div style={{ fontSize: 13, color: '#8a8fa8', lineHeight: 1.6 }}>
+            How your network holds together, from the circles you&rsquo;ve scanned. Only your own numbers, never a
+            comparison with anyone else&rsquo;s.
+          </div>
+          <NetworkHealthSection />
+        </div>
+      ) : (
       <div style={{ maxWidth: 700, margin: '0 auto' }}>
 
         {/* === LEVEL CARD === */}
@@ -376,8 +403,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="/scores#sector" style={{ fontSize: 11, color: '#3498DB', textDecoration: 'none', fontWeight: 600 }}>
-              {sectorFocus?.sectors?.length ? 'Change' : sectorFocus && !sectorFocus.failed ? 'Pick on Scores' : 'Scores'} &rarr;
+            <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>
           </div>
           {!sectorFocus ? (
@@ -409,6 +436,7 @@ function ProfileInner() {
         </div>
 
       </div>
+      )}
       </div>
     </div>
   );