six-degrees 0.6.0 → 0.8.0

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

@@ -1,15 +1,17 @@
 'use client';
 
-import { useState, useRef } from 'react';
-import { parseConnectionsCsv, saveCsvNetwork, ConnectionsCsvError, CSV_USER } from '../../lib/csv';
+import { useState, useRef, useEffect } from 'react';
+import {
+  parseConnectionsCsv, saveCsvNetwork, ConnectionsCsvError, CSV_USER, keptBehindScan, closeCsvNetwork, REMOVE_CSV_QUESTION,
+} from '../../lib/csv';
 import { setUser } from '../../lib/user';
 import Link from 'next/link';
 import { TIER_COLORS } from '../../lib/themes';
 
 
 const card = {
-  background: 'rgba(255,255,255,0.03)',
-  border: '1px solid rgba(255,255,255,0.08)',
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+  border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
   borderRadius: 16,
   padding: 24,
 };
@@ -19,20 +21,36 @@ export default function ImportPage() {
   const [error, setError] = useState('');
   const [result, setResult] = useState(null);
   const [busy, setBusy] = useState(false);
+  // A CSV kept here that the map doesn't show, because you have scanned your
+  // own connections (lib/csv.js openNetworkSource).
+  const [behindScan, setBehindScan] = useState(null);
   const inputRef = useRef(null);
 
-  function handleText(text) {
+  useEffect(() => {
+    let off = false;
+    keptBehindScan().then((k) => { if (!off) setBehindScan(k); });
+    return () => { off = true; };
+  }, []);
+
+  async function handleText(text) {
     setBusy(true);
     setError('');
     try {
       const { connections, skipped } = parseConnectionsCsv(text);
-      if (!saveCsvNetwork(connections)) {
-        setError('That network is too large to hold in this window. LinkedIn allows up to 30,000 connections and this app holds that many, so please report it with your connection count: github.com/blakeb056/six-degrees/issues');
+      // Kept in the data folder (lib/csv-store.js), so it's still here after
+      // the window closes. If it can't be kept, nothing opens: a map that
+      // vanished on the next start would look kept when it wasn't.
+      const saved = await saveCsvNetwork(connections);
+      if (!saved.ok) {
+        setError(saved.error);
         setBusy(false);
         return;
       }
-      // Local-only identity so the app opens without creating an account.
-      setUser(CSV_USER.id, CSV_USER.name);
+      const behind = await keptBehindScan();
+      setBehindScan(behind);
+      // Local-only identity so the app opens without creating an account,
+      // unless the map opens on your scanned network instead.
+      if (!behind) setUser(CSV_USER.id, CSV_USER.name);
       const tiers = {};
       connections.forEach((c) => { tiers[c.tier] = (tiers[c.tier] || 0) + 1; });
       setResult({ count: connections.length, skipped, tiers });
@@ -58,32 +76,36 @@ export default function ImportPage() {
           <h1 style={{ fontSize: 38, fontWeight: 800, margin: '0 0 8px' }}>
             {result.count.toLocaleString()} connections mapped
           </h1>
-          <p style={{ color: 'rgba(255,255,255,0.45)', margin: '0 0 28px', lineHeight: 1.6 }}>
+          <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.45)', margin: '0 0 28px', lineHeight: 1.6 }}>
             Scored on seniority and company, sorted into tiers.
             {result.skipped > 0 && ` ${result.skipped} row${result.skipped === 1 ? '' : 's'} skipped (blank or duplicate).`}
           </p>
 
           <div style={{ ...card, marginBottom: 20 }}>
-            <div style={{ fontSize: 11, fontWeight: 700, color: '#666', letterSpacing: 2, marginBottom: 14 }}>YOUR TIERS</div>
+            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-4, #666)', letterSpacing: 2, marginBottom: 14 }}>YOUR TIERS</div>
             {['S', 'A', 'B', 'C', 'D'].map((t) => {
               const n = result.tiers[t] || 0;
               const pct = result.count ? (n / result.count) * 100 : 0;
               return (
                 <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                   <span style={{ width: 16, color: TIER_COLORS[t], fontWeight: 800 }}>{t}</span>
-                  <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.05)', overflow: 'hidden' }}>
+                  <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', overflow: 'hidden' }}>
                     <div style={{ width: `${pct}%`, height: '100%', background: TIER_COLORS[t], borderRadius: 4 }} />
                   </div>
-                  <span style={{ width: 46, textAlign: 'right', color: 'rgba(255,255,255,0.6)', fontSize: 13 }}>{n}</span>
+                  <span style={{ width: 46, textAlign: 'right', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.6)', fontSize: 13 }}>{n}</span>
                 </div>
               );
             })}
           </div>
 
+          {behindScan && <BehindScan onRemoved={() => { setBehindScan(null); setResult(null); }} />}
           <Link href="/" style={primaryBtn}>See your galaxy →</Link>
-          <p style={{ color: '#555', fontSize: 12, marginTop: 18, lineHeight: 1.6 }}>
-            Nothing was uploaded or saved: this lives only in this window (or browser tab), and closing it clears it.
-          </p>
+          {!behindScan && (
+            <p style={{ color: 'var(--sd-fg-5, #555)', fontSize: 12, marginTop: 18, lineHeight: 1.6 }}>
+              Kept on this computer, in your data folder, so it&rsquo;s still here after you close the window. Nothing was
+              sent anywhere. To remove it, click &times; next to Your CSV at the top of the map.
+            </p>
+          )}
         </div>
       </div>
     );
@@ -95,11 +117,13 @@ export default function ImportPage() {
         <h1 style={{ fontSize: 40, fontWeight: 800, margin: '0 0 10px', letterSpacing: -1 }}>
           Map <span style={{ background: 'linear-gradient(135deg,#FFD700,#9B59B6,#3498DB)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>your</span> network
         </h1>
-        <p style={{ color: 'rgba(255,255,255,0.45)', margin: '0 0 30px', lineHeight: 1.6, fontSize: 16 }}>
-          Drop LinkedIn&rsquo;s official <code style={code}>Connections.csv</code> below. It is read in your browser,
-          scored, and drawn as a galaxy — no account, no upload, nothing stored.
+        <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.45)', margin: '0 0 30px', lineHeight: 1.6, fontSize: 16 }}>
+          Drop LinkedIn&rsquo;s official <code style={code}>Connections.csv</code> below. It is read on this computer,
+          scored, drawn as a galaxy, and kept in your data folder. No account, and nothing leaves this computer.
         </p>
 
+        {behindScan && <BehindScan onRemoved={() => setBehindScan(null)} />}
+
         <div
           onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
           onDragLeave={() => setDragging(false)}
@@ -109,7 +133,7 @@ export default function ImportPage() {
             ...card,
             padding: '48px 24px', textAlign: 'center', cursor: 'pointer', marginBottom: 16,
             borderStyle: 'dashed',
-            borderColor: dragging ? '#FFD700' : 'rgba(255,255,255,0.12)',
+            borderColor: dragging ? '#FFD700' : 'rgba(var(--sd-ink, 255, 255, 255), 0.12)',
             background: dragging ? 'rgba(255,215,0,0.05)' : card.background,
             transition: 'all 0.15s ease',
           }}
@@ -118,7 +142,7 @@ export default function ImportPage() {
           <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 6 }}>
             {busy ? 'Reading…' : 'Drop Connections.csv here'}
           </div>
-          <div style={{ color: '#666', fontSize: 13 }}>or click to choose the file</div>
+          <div style={{ color: 'var(--sd-fg-4, #666)', fontSize: 13 }}>or click to choose the file</div>
           <input
             ref={inputRef} type="file" accept=".csv,text/csv" style={{ display: 'none' }}
             onChange={(e) => handleFile(e.target.files?.[0])}
@@ -132,10 +156,10 @@ export default function ImportPage() {
         )}
 
         <div style={{ ...card, marginBottom: 16 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#666', letterSpacing: 2, marginBottom: 14 }}>HOW TO GET THE FILE</div>
-          <ol style={{ margin: 0, paddingLeft: 20, color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 2 }}>
-            <li>LinkedIn → <strong style={{ color: '#fff' }}>Settings &amp; Privacy → Data privacy → Get a copy of your data</strong></li>
-            <li>Pick <strong style={{ color: '#fff' }}>Connections</strong> and request the archive</li>
+          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-4, #666)', letterSpacing: 2, marginBottom: 14 }}>HOW TO GET THE FILE</div>
+          <ol style={{ margin: 0, paddingLeft: 20, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.6)', fontSize: 14, lineHeight: 2 }}>
+            <li>LinkedIn → <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Settings &amp; Privacy → Data privacy → Get a copy of your data</strong></li>
+            <li>Pick <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Connections</strong> and request the archive</li>
             <li>LinkedIn emails a download link, usually within ~10 minutes</li>
             <li>Unzip it and drop <code style={code}>Connections.csv</code> above</li>
           </ol>
@@ -143,42 +167,74 @@ export default function ImportPage() {
 
         <div style={{ ...card, marginBottom: 16 }}>
           <div style={{ fontSize: 11, fontWeight: 700, color: '#2ecc71', letterSpacing: 2, marginBottom: 10 }}>PRIVATE BY DESIGN</div>
-          <p style={{ margin: 0, color: 'rgba(255,255,255,0.55)', fontSize: 14, lineHeight: 1.7 }}>
-            Your file never leaves this browser. It is parsed locally, held for this tab only, and never written to any
-            database. The <strong style={{ color: '#fff' }}>Email Address column is ignored entirely</strong>.
+          <p style={{ margin: 0, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.55)', fontSize: 14, lineHeight: 1.7 }}>
+            Your file never leaves this computer. It is read here, and only what the map needs (names, positions,
+            companies, profile links and when you connected) is kept, in your data folder, apart from any network you
+            scan. The <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Email Address column is ignored entirely</strong>.
           </p>
         </div>
 
         <div style={{ ...card, borderColor: 'rgba(255,215,0,0.15)' }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#FFD700', letterSpacing: 2, marginBottom: 10 }}>HONEST CAVEAT</div>
-          <p style={{ margin: '0 0 12px', color: 'rgba(255,255,255,0.55)', fontSize: 14, lineHeight: 1.7 }}>
+          <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--sd-gold, #FFD700)', letterSpacing: 2, marginBottom: 10 }}>HONEST CAVEAT</div>
+          <p style={{ margin: '0 0 12px', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.55)', fontSize: 14, lineHeight: 1.7 }}>
             LinkedIn&rsquo;s export contains no profile photos, so everyone renders as initials on a tier-colored circle.
-            It also only covers people you are <em>already</em> connected to — so <strong style={{ color: '#fff' }}>Degrees</strong> and
-            the <strong style={{ color: '#fff' }}>Outlink queue</strong> stay empty, because those map the people you
+            It also only covers people you are <em>already</em> connected to, so <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Degrees</strong> and
+            the <strong style={{ color: 'var(--sd-fg-1, #fff)' }}>Outlink queue</strong> stay empty, because those map the people you
             haven&rsquo;t met yet.
           </p>
-          <p style={{ margin: 0, color: '#666', fontSize: 13, lineHeight: 1.7 }}>
-            Want those? Run the local scanner — it captures 2nd-degree circles and real photos.{' '}
-            <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>See setup →</Link>
+          <p style={{ margin: 0, color: 'var(--sd-fg-4, #666)', fontSize: 13, lineHeight: 1.7 }}>
+            Want those? Run the local scanner: it captures 2nd-degree circles and real photos.{' '}
+            <Link href="/setup" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>See setup →</Link>
           </p>
         </div>
 
         <div style={{ textAlign: 'center', marginTop: 26 }}>
-          <Link href="/" style={{ color: '#555', fontSize: 13, textDecoration: 'none' }}>← Back</Link>
+          <Link href="/" style={{ color: 'var(--sd-fg-5, #555)', fontSize: 13, textDecoration: 'none' }}>← Back</Link>
         </div>
       </div>
     </div>
   );
 }
 
+// A CSV kept here that the map doesn't show: your scan wins (lib/csv.js
+// openNetworkSource). The file is never deleted for you, so this says it's
+// there and offers to remove it.
+function BehindScan({ onRemoved }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  async function remove() {
+    if (!window.confirm(REMOVE_CSV_QUESTION)) return;
+    setBusy(true);
+    setError('');
+    const closed = await closeCsvNetwork('csv');
+    setBusy(false);
+    if (closed.ok) onRemoved();
+    else setError(closed.error);
+  }
+  return (
+    <div style={{ ...card, padding: '14px 18px', marginBottom: 16, display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
+      <span style={{ flex: '1 1 260px', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.65)', fontSize: 14, lineHeight: 1.6 }}>
+        Your map shows the network you scanned. A CSV import is still kept on this computer.
+      </span>
+      <button onClick={remove} disabled={busy} style={{
+        padding: '8px 14px', borderRadius: 8, cursor: busy ? 'default' : 'pointer', font: 'inherit', fontSize: 13, fontWeight: 700,
+        border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)', background: 'transparent', color: 'var(--sd-fg-1, #fff)',
+      }}>
+        {busy ? 'Removing…' : 'Remove it'}
+      </button>
+      {error && <div style={{ width: '100%', color: '#ff8080', fontSize: 13, lineHeight: 1.6 }}>{error}</div>}
+    </div>
+  );
+}
+
 const wrap = {
-  minHeight: '100vh', background: 'var(--sd-page)', color: '#fff', padding: '56px 24px',
+  minHeight: '100vh', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', padding: '56px 24px',
   fontFamily: 'var(--sd-font)',
   display: 'flex', justifyContent: 'center',
 };
 
 const code = {
-  background: 'rgba(255,255,255,0.07)', padding: '2px 6px', borderRadius: 5,
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)', padding: '2px 6px', borderRadius: 5,
   fontSize: 13, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
 };
 

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

@@ -0,0 +1,220 @@
+'use client';
+
+// Insights: your network ranked by power, and the boards that read it
+// (Blake, 2026-10-03: "stats and insights … data and insights based off their
+// circles … almost no moral tie to the person … base it off value like
+// richest person or highest power people … an intro perspective look at the
+// data of what we have"). Mock-up B, "The Power Index", is the page; mock-up
+// C, the scrolling report, is its Report view.
+//
+// Its views sit in the notch under the header, as every page's do
+// (lib/island.js setNotchTabs): People, Kingmakers, Gatekeepers, Companies,
+// Industries and Report. Every number comes from lib/insights-board.js, which
+// says where each came from; nothing here is estimated and nothing is about
+// money.
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import AppHeader from '../components/AppHeader';
+import OnboardingGate from '../components/OnboardingGate';
+import { useUser } from '../components/UserProvider';
+import useRequests from '../components/useRequests';
+import { setNotchTabs } from '../../lib/island';
+import { loadNetwork } from '../../lib/network';
+import { loadCsvNetwork } from '../../lib/csv';
+import { loadScanNotes, NO_SCAN_NOTES } from '../../lib/scraper-client';
+import { hasRequest } from '../../lib/requests-client';
+import { networkLevel } from '../../lib/level';
+import { IS_DEMO } from '../../lib/demo';
+import {
+  boardBase, powerIndex, kingmakers, gatekeepers, hiddenGiants, tierByRarity, untapped,
+  companyPower, industries, titleLadder, coverage, howSure, reachSummary,
+} from '../../lib/insights-board';
+import PeopleView from '../components/insights/PeopleView';
+import { KingmakersBoard, GatekeepersBoard, CompaniesBoard, IndustriesBoard } from '../components/insights/Boards';
+import Report from '../components/insights/Report';
+import { fmt, useIsMobile, TITLE } from '../components/insights/parts';
+
+const VIEWS = ['people', 'kingmakers', 'gatekeepers', 'companies', 'industries', 'report'];
+const LABELS = { people: 'People', kingmakers: 'Kingmakers', gatekeepers: 'Gatekeepers', companies: 'Companies', industries: 'Industries', report: 'Report' };
+
+export default function InsightsPage() {
+  // Suspense because the page reads the address's ?view= (useSearchParams),
+  // which Next requires to sit inside one for the page to build (TRAPS §41).
+  return <OnboardingGate><Suspense><InsightsInner /></Suspense></OnboardingGate>;
+}
+
+function InsightsInner() {
+  const { userId } = useUser();
+  const isMobile = useIsMobile();
+  const asked = useSearchParams().get('view');
+  const [view, setView] = useState(() => (VIEWS.includes(asked) ? asked : 'people'));
+  const [net, setNet] = useState(null);   // { degree1, degree2, degree3, notes, source, budget }
+  const [failed, setFailed] = useState(null);
+
+  useEffect(() => {
+    if (IS_DEMO || !userId) return;
+    let live = true;
+    (async () => {
+      try {
+        // The sample (this window) or a kept CSV import, else your own network:
+        // lib/csv.js openNetworkSource, the one rule every page opens on.
+        const local = await loadCsvNetwork();
+        if (local) {
+          if (live) setNet({ degree1: local.degree1 || [], degree2: local.degree2 || [], degree3: [], notes: NO_SCAN_NOTES, source: local.source || 'csv', budget: null });
+          return;
+        }
+        // Your daily search budget and speed, for what scanning the next circles would take:
+        // ?usage only reads the scanner's files (no checks, no Python, nothing written).
+        const usage = fetch('/api/scraper?usage').then((r) => (r.ok ? r.json() : null)).catch(() => null);
+        const [n, notes, used] = await Promise.all([loadNetwork(userId), loadScanNotes(), usage]);
+        const limits = used?.limits;
+        if (live) setNet({ ...n, notes, source: 'own', budget: limits ? { daily: limits.daily, pace: limits.pace } : null });
+      } catch (e) {
+        if (live) setFailed(e.message || 'The network couldn’t be loaded.');
+      }
+    })();
+    return () => { live = false; };
+  }, [userId]);
+
+  // The quick part first: the ranking and the boards that read circles.
+  const base = useMemo(() => (net ? boardBase(net) : null), [net]);
+  const data = useMemo(() => {
+    if (!base) return null;
+    const index = powerIndex(base);
+    return {
+      index, reach: reachSummary(base), kings: kingmakers(base), gates: gatekeepers(base), hidden: hiddenGiants(base),
+      grid: tierByRarity(base), cover: coverage(base, net.budget || {}), sure: howSure(index),
+    };
+  }, [base, net]);
+  // Companies and titles read every headline (about half a second on 7,000
+  // people), so they follow once the table is on screen.
+  const [slow, setSlow] = useState(null);
+  useEffect(() => {
+    if (!base) return undefined;
+    const t = setTimeout(() => {
+      const companies = companyPower(base);
+      setSlow({ base, companies, industries: industries(companies), ladder: titleLadder(base) });
+    }, 30);
+    return () => clearTimeout(t);
+  }, [base]);
+  const heavy = slow && slow.base === base ? slow : null;
+
+  const requests = useRequests();
+  const isAsked = useCallback((row) => hasRequest(row, requests), [requests]);
+  const open = useMemo(() => (base ? untapped(base, isAsked) : null), [base, isAsked]);
+
+  const pick = useCallback((v) => {
+    setView(v);
+    try {
+      const u = new URL(window.location.href);
+      if (v === 'people') u.searchParams.delete('view'); else u.searchParams.set('view', v);
+      window.history.replaceState(null, '', u.pathname + u.search);
+    } catch { /* the address stays */ }
+    window.scrollTo(0, 0);
+  }, []);
+
+  // The views in the notch, with how many each ranks.
+  useEffect(() => {
+    if (!data || data.index.total === 0) { setNotchTabs(null); return undefined; }
+    const count = {
+      people: data.index.total, kingmakers: data.kings.scanned, gatekeepers: data.gates.list.length,
+      companies: heavy?.companies.count, industries: heavy?.industries.list.length,
+    };
+    setNotchTabs({
+      items: VIEWS.map((key) => ({
+        key,
+        label: count[key] ? <>{LABELS[key]}<small style={{ fontSize: 10.5, opacity: 0.65, fontWeight: 600 }}>{fmt(count[key])}</small></> : LABELS[key],
+      })),
+      current: view, onPick: pick,
+    });
+    return () => setNotchTabs(null);
+  }, [data, heavy, view, pick]);
+
+  const level = useMemo(() => (net ? networkLevel(net.degree1, net.degree2) : null), [net]);
+  const csvMode = Boolean(net && net.source !== 'own');
+
+  if (IS_DEMO) {
+    return (
+      <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, color: 'var(--sd-fg-2, #ccc)', fontFamily: 'var(--sd-font)' }}>
+        <h1 style={{ fontSize: 20, fontWeight: 700, margin: 0, color: 'var(--sd-fg-1, #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>
+        <Link href="/" style={{ fontSize: 13, color: 'var(--sd-fg-3, #888)', textDecoration: 'none' }}>&larr; Back to the network</Link>
+      </div>
+    );
+  }
+
+  const shared = { data, heavy, open, net, source: net?.source, isMobile, onView: pick };
+  return (
+    <div style={{ minHeight: '100vh', background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', fontFamily: 'var(--sd-font)' }}>
+      <AppHeader active="insights" csvMode={csvMode} level={level} isMobile={isMobile} />
+      {/* Room for the notch, which hangs under the header with the views in it */}
+      <main style={{ maxWidth: view === 'report' ? 920 : 1400, margin: '0 auto', padding: isMobile ? '52px 12px 0' : '58px 30px 0' }}>
+        {failed ? <Message title="The network couldn’t be loaded" body={failed} />
+          : !data ? <Message title="Reading your network…" />
+          : data.index.total === 0 ? <Empty source={net.source} />
+          : view === 'people' ? <PeopleView {...shared} requests={requests} />
+          : view === 'kingmakers' ? <KingmakersBoard {...shared} />
+          : view === 'gatekeepers' ? <GatekeepersBoard {...shared} />
+          : view === 'companies' ? <CompaniesBoard {...shared} />
+          : view === 'industries' ? <IndustriesBoard {...shared} />
+          : <Report {...shared} />}
+        <Footer net={net} data={data} isMobile={isMobile} />
+      </main>
+    </div>
+  );
+}
+
+function Message({ title, body }) {
+  return (
+    <div style={{ padding: '80px 0', textAlign: 'center' }}>
+      <div style={{ fontSize: 17, fontWeight: 700 }}>{title}</div>
+      {body && <div style={{ fontSize: 13, color: 'var(--sd-fg-3, #888)', marginTop: 8 }}>{body}</div>}
+    </div>
+  );
+}
+
+/** No one to rank yet: where people come from. */
+function Empty({ source }) {
+  return (
+    <div style={{ maxWidth: 560, margin: '60px auto', textAlign: 'center' }}>
+      <h1 style={TITLE}>The Power Index</h1>
+      <p style={{ fontSize: 15, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.6, margin: '12px 0 22px' }}>
+        Nothing to rank yet. Once your connections are in, everyone within two steps of you shows here, ranked by power,
+        with who holds the doors and what’s still closed.
+      </p>
+      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
+        {source === 'own' && (
+          <Link href="/setup" style={{ padding: '10px 16px', borderRadius: 8, fontWeight: 700, fontSize: 13.5, textDecoration: 'none', color: '#000', background: 'linear-gradient(135deg, #00ff88, #1abc9c)' }}>
+            Scan your connections →
+          </Link>
+        )}
+        <Link href="/import" style={{ padding: '10px 16px', borderRadius: 8, fontWeight: 700, fontSize: 13.5, textDecoration: 'none', color: 'var(--sd-fg-1, #fff)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)' }}>
+          Import a CSV
+        </Link>
+      </div>
+      <p style={{ fontSize: 12.5, color: 'var(--sd-fg-4, #6f7a88)', marginTop: 18 }}>
+        Or look around first: the <Link href="/" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>map’s welcome screen</Link> opens a sample network where every person is invented.
+      </p>
+    </div>
+  );
+}
+
+/** The rule every screen with a tier says, and which network this is. */
+function Footer({ net, data, isMobile }) {
+  const what = !net || !data?.index.total ? null
+    : net.source === 'sample' ? 'The sample network: every person in it is invented.'
+    : net.source === 'csv' ? `Your CSV import: ${fmt(data?.reach.d1)} connections, no circles.`
+    : data ? `Counted from your ${fmt(data.reach.d1)} connections and the ${fmt(data.reach.circles)} circle${data.reach.circles === 1 ? '' : 's'} you’ve scanned.` : null;
+  return (
+    <footer style={{
+      margin: '36px 0 0', padding: '18px 0 34px', borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
+      display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', gap: isMobile ? 8 : 20,
+      color: 'var(--sd-fg-4, #6f7a88)', fontSize: 11.5, lineHeight: 1.5,
+    }}>
+      <div><b style={{ color: 'var(--sd-fg-2, #b8c4c4)' }}>Power ranks reachability, not people.</b> A tier is a statement about network position, not human worth.</div>
+      {what && <div>{what}</div>}
+    </footer>
+  );
+}

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

@@ -244,7 +244,7 @@ function GalaxySection() {
           </h2>
           <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.5)', lineHeight: 1.7, marginTop: 20, maxWidth: 440 }}>
             Every connection orbits you by power tier. S-Tier innermost, D-Tier outermost.
-            A living galaxy of influence — zoom, filter, and explore your entire professional universe.
+            A living galaxy of influence. Zoom, filter, and explore your entire professional universe.
           </p>
           {/* Tier legend */}
           <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
@@ -321,7 +321,7 @@ function ChainSection() {
   const [ref, inView] = useInView();
   const degrees = [
     // The sample's counts; it maps two degrees.
-    { d: 1, label: 'Your Connections', desc: 'Direct network — scored & tiered', color: '#3498DB', count: SAMPLE_STATS.degree1 },
+    { d: 1, label: 'Your Connections', desc: 'Direct network, scored & tiered', color: '#3498DB', count: SAMPLE_STATS.degree1 },
     { d: 2, label: 'Bridge Connections', desc: 'Friends of your bridges', color: '#9B59B6', count: SAMPLE_STATS.degree2 },
     { d: 3, label: 'Extended Reach', desc: 'Bridged from promoted D2s', color: '#FFD700', count: null },
     { d: 4, label: 'Industry Layer', desc: 'Company & sector intelligence', color: '#FF6B35', count: null },
@@ -515,7 +515,7 @@ function FeaturesGrid() {
     {
       title: 'Bridge Clusters',
       subtitle: 'Deep Network Mining',
-      desc: 'Select any D1 connection as a bridge. Automatically discover and score all their connections — your D2 layer.',
+      desc: 'Select any D1 connection as a bridge. Automatically discover and score all their connections: your D2 layer.',
       color: '#9B59B6',
       icon: '🔗',
       stat: `${SAMPLE_STATS.bridges} bridges in the sample`,
@@ -700,7 +700,7 @@ function TheorySection() {
             proximity, and shared experience.
           </p>
           <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.45)', lineHeight: 1.8, marginTop: 16, maxWidth: 560, margin: '16px auto 0' }}>
-            Six degrees of separation isn&rsquo;t just a theory &mdash; it&rsquo;s the architecture of human connection.
+            Six degrees of separation isn&rsquo;t just a theory. It&rsquo;s the architecture of human connection.
             Every string vibrates with potential. Every bridge shortens the distance.
           </p>
 
@@ -712,7 +712,7 @@ function TheorySection() {
             opacity: inView ? 1 : 0, transition: 'opacity 1.5s ease 0.5s',
           }}>
             &ldquo;Everyone is connected to everyone else by six degrees or fewer.
-            The question isn&rsquo;t <em>if</em> &mdash; it&rsquo;s <em>through whom</em>.&rdquo;
+            The question isn&rsquo;t <em>if</em>, it&rsquo;s <em>through whom</em>.&rdquo;
           </div>
         </div>
       </div>

package/.next/standalone/app/layout.js

@@ -22,12 +22,14 @@ import StaleServerBanner from './components/StaleServerBanner';
 import ScanStatusBar from './components/ScanStatusBar';
 import SocialAutoSync from './components/SocialAutoSync';
 import ThemeLoader from './components/ThemeLoader';
+import LiquidGlass from './components/LiquidGlass';
+import ThemeDefs from './components/ThemeDefs';
 
-const THEME_FIRST = `try{var t=JSON.parse(localStorage.getItem('six-degrees-theme-vars')||'null');if(t&&t.vars){var r=document.documentElement;for(var k in t.vars){var v=String(t.vars[k]);if(/^--sd-[a-z0-9-]+$/.test(k)&&!/[;{}<>]/.test(v))r.style.setProperty(k,v)}var a=t.attrs||{};if(/^[a-z]+$/.test(a.theme||''))r.dataset.theme=a.theme;if(/^[a-z]+$/.test(a.backdrop||''))r.dataset.backdrop=a.backdrop}}catch(e){}`;
+const THEME_FIRST = `try{var t=JSON.parse(localStorage.getItem('six-degrees-theme-vars')||'null');if(t&&t.vars){var r=document.documentElement;for(var k in t.vars){var v=String(t.vars[k]);if(/^--sd-[a-z0-9-]+$/.test(k)&&!/[;{}<>]/.test(v))r.style.setProperty(k,v)}var a=t.attrs||{};['theme','backdrop','mode','buttons','dots'].forEach(function(n){if(/^[a-z]+$/.test(a[n]||''))r.dataset[n]=a[n]});r.style.colorScheme=a.mode==='light'?'light':'dark'}}catch(e){}`;
 
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" data-backdrop="none" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
+    <html lang="en" data-backdrop="none" data-mode="dark" data-buttons="soft" data-dots="solid" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
       <head>
         {/* The theme (lib/theme-store.js), on the page before it paints. Only
             --sd- variables, and only values with nothing that could end one. */}
@@ -35,6 +37,8 @@ export default function RootLayout({ children }) {
       </head>
       <body style={{ margin: 0, padding: 0, background: 'var(--sd-bg, #0a0a1a)' }}>
         <ThemeLoader />
+        <LiquidGlass />
+        <ThemeDefs />
         <UserProvider>
           {children}
           {/* Says so when the files on disk have moved past what this server