six-degrees 0.7.0 → 0.8.0

package/.next/standalone/app/components/insights/parts.js

@@ -0,0 +1,239 @@
+'use client';
+
+// The small pieces the Insights tab is built from: tier chips with their
+// letter on them (C and D are two greys too close to tell apart by colour),
+// rarity tags, the 1st / 2nd chip, the person cell, cards and the line under
+// a number that says where it came from. Colours are the look's own: the
+// theme's dot colours (lib/themes.js TIER_COLORS, a live object) and the
+// --sd-* variables, so a light look reads as well as the dark ones.
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Avatar from '../Avatar';
+import { TIER_COLORS, luminance } from '../../../lib/themes';
+import { RARITY } from '../../../lib/rarity';
+import { roleLine } from '../../../lib/insights-board';
+import { markRequested } from '../../../lib/requests-client';
+import ConnectChoice, { secondaryLook } from '../AutoConnect';
+
+export const fmt = (n) => Number(n || 0).toLocaleString('en-US');
+export const one = (x) => (Math.round(Number(x || 0) * 10) / 10).toFixed(1);
+export const pc = (x) => `${Math.round(Number(x) || 0)}%`;
+export const RARITY_BY_KEY = Object.fromEntries(RARITY.map((r) => [r.key, r]));
+export const LINE = 'rgba(var(--sd-ink, 255, 255, 255), 0.08)';
+export const SOFT_LINE = 'rgba(var(--sd-ink, 255, 255, 255), 0.05)';
+export const CARD_BG = 'rgba(var(--sd-ink, 255, 255, 255), 0.035)';
+
+export function useIsMobile() {
+  const [m, setM] = useState(false);
+  useEffect(() => {
+    const check = () => setM(window.innerWidth < 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+  return m;
+}
+
+/** Black or white, whichever reads on a colour. */
+export function inkOn(hex) {
+  try { return luminance(hex) > 0.36 ? '#000' : '#fff'; } catch { return '#000'; }
+}
+export const tierColor = (tier) => TIER_COLORS[tier] || '#888888';
+
+/** A tier as a filled chip with its letter. */
+export function TierChip({ tier, size = 20 }) {
+  if (!tier) return null;
+  const c = tierColor(tier);
+  return (
+    <span aria-label={`${tier} tier`} style={{
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+      minWidth: size, height: size, padding: '0 4px', borderRadius: Math.round(size / 4),
+      background: c, color: inkOn(c), fontSize: Math.round(size * 0.56), fontWeight: 800, lineHeight: 1,
+    }}>{tier}</span>
+  );
+}
+
+/** "1st" or "2nd". */
+export function DegreeChip({ degree }) {
+  const first = degree === 1;
+  return (
+    <span style={{
+      fontSize: 10.5, fontWeight: 700, padding: '2px 6px', borderRadius: 4, letterSpacing: 0.2, flexShrink: 0, whiteSpace: 'nowrap',
+      background: first ? 'rgba(0,255,136,0.1)' : 'rgba(255,107,53,0.1)',
+      border: `1px solid ${first ? 'rgba(0,255,136,0.3)' : 'rgba(255,107,53,0.3)'}`,
+      color: first ? 'var(--sd-green, #7dffc0)' : 'var(--sd-orange, #ffab8a)',
+    }}>{first ? '1st' : '2nd'}</span>
+  );
+}
+
+/** How rare the way in is, and the count: "+" where it's the ways your scans saw (a floor). */
+export function RarityTag({ rarity, count = true, small = false }) {
+  if (!rarity) return null;
+  const r = RARITY_BY_KEY[rarity.key];
+  const title = rarity.from === 'linkedin'
+    ? `${fmt(rarity.count)} mutual connection${rarity.count === 1 ? '' : 's'}, LinkedIn’s own count`
+    : `${fmt(rarity.count)} way${rarity.count === 1 ? '' : 's'} in seen in your scans, which can only go up`;
+  return (
+    <span title={title} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: small ? 11 : 11.5, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>
+      <i className="sd-dot-html" style={{ width: 8, height: 8, borderRadius: '50%', background: r.color, flexShrink: 0 }} />
+      {r.label}
+      {count && <span style={{ color: 'var(--sd-fg-4, #6f7a88)', fontSize: 10.5 }}>{fmt(rarity.count)}{rarity.from === 'linkedin' ? '' : '+'}</span>}
+    </span>
+  );
+}
+
+/** Face, name, tier and the role their score is built on. */
+export function PersonCell({ row, size = 34, chip = true, sub }) {
+  const { title, company } = roleLine(row);
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+      <Avatar person={row} size={size} tierColors={TIER_COLORS} />
+      <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <b style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #fff)', ...ELLIPSIS }}>{row?.name || 'Someone'}</b>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', minWidth: 0 }}>
+          {chip && <TierChip tier={row?.tier} size={15} />}
+          <span style={ELLIPSIS}>{sub ?? [title, company].filter(Boolean).join(' · ')}</span>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export const ELLIPSIS = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 };
+
+/** The page's title, in the tab's own colours (plain ink on Analyst, which takes gradients off). */
+export const TITLE = {
+  margin: 0, fontSize: 34, fontWeight: 850, letterSpacing: -0.6, lineHeight: 1.1,
+  background: 'linear-gradient(135deg, var(--sd-gold, #FFD700) 10%, var(--sd-orange, #FF6B35) 60%, var(--sd-purple, #9B59B6))',
+  WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent',
+};
+
+/** A board's title and the one line under it. */
+export function Hero({ title, children, isMobile, right }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'flex-end', gap: isMobile ? 10 : 24, marginBottom: 16 }}>
+      <div style={{ minWidth: 0 }}>
+        <h1 style={{ ...TITLE, fontSize: isMobile ? 27 : 34 }}>{title}</h1>
+        <p style={{ margin: '5px 0 0', color: 'var(--sd-fg-2, #b8c4c4)', fontSize: isMobile ? 13 : 14, lineHeight: 1.45 }}>{children}</p>
+      </div>
+      {right}
+    </div>
+  );
+}
+
+/** A card, as the rail and the boards draw them. */
+export function Card({ children, style, dashed = false, id }) {
+  return (
+    <section id={id} style={{
+      border: dashed ? '1px dashed rgba(255,215,0,0.35)' : `1px solid ${LINE}`, borderRadius: 14,
+      background: dashed ? 'rgba(255,215,0,0.04)' : CARD_BG, padding: '13px 14px 10px', minWidth: 0, ...style,
+    }}>{children}</section>
+  );
+}
+
+/** A card's title, its line under it, and a link to its board. */
+export function CardHead({ title, sub, more, onMore }) {
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
+        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 750, color: 'var(--sd-fg-1, #fff)' }}>{title}</h3>
+        {more && <button type="button" onClick={onMore} style={LINK_BTN}>{more}</button>}
+      </div>
+      {sub && <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', margin: '2px 0 6px', lineHeight: 1.4 }}>{sub}</div>}
+    </>
+  );
+}
+
+export const LINK_BTN = { background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontSize: 11.5, color: 'var(--sd-blue, #3498DB)', whiteSpace: 'nowrap', fontWeight: 600 };
+
+/** Where a number came from, under it. */
+export function Src({ children, style }) {
+  if (!children) return null;
+  return <div style={{ fontSize: 11, color: 'var(--sd-fg-4, #6f7a88)', lineHeight: 1.5, marginTop: 6, ...style }}>{children}</div>;
+}
+
+/** A row in a rail card: rank, who, and a number on the right with what it counts. */
+export function MiniRow({ rank, left, value, valueColor, label, first }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 0', borderTop: first ? 'none' : `1px solid ${SOFT_LINE}` }}>
+      {rank != null && <span style={{ width: 14, fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', fontWeight: 700, flexShrink: 0 }}>{rank}</span>}
+      <span style={{ flex: 1, minWidth: 0 }}>{left}</span>
+      <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', textAlign: 'right', flexShrink: 0 }}>
+        <b style={{ fontSize: 15, fontWeight: 800, color: valueColor || 'var(--sd-fg-1, #fff)', fontVariantNumeric: 'tabular-nums' }}>{value}</b>
+        {label && <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #6f7a88)', whiteSpace: 'nowrap' }}>{label}</span>}
+      </span>
+    </div>
+  );
+}
+
+/** A board that needs circles, on a network with none yet. */
+export function NeedsCircles({ source, compact = false }) {
+  const csv = source === 'csv';
+  return (
+    <div style={{ fontSize: compact ? 12 : 13, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.5, padding: compact ? '4px 0 6px' : '6px 0' }}>
+      {csv
+        ? 'A CSV import is your connections only: LinkedIn’s export has no circles. Scan your own network to see who stands behind your connections.'
+        : 'Scan a few circles to see who stands behind your connections.'}
+      {!csv && source === 'own' && <> <Link href="/setup" style={{ color: 'var(--sd-green, #00ff88)', fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap' }}>Open Scan →</Link></>}
+    </div>
+  );
+}
+
+const ACT = {
+  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, padding: '6px 11px',
+  borderRadius: 7, whiteSpace: 'nowrap', textDecoration: 'none', cursor: 'pointer', flexShrink: 0,
+};
+const OUTLINE = { ...ACT, color: 'var(--sd-blue, #3498DB)', border: '1px solid rgba(52,152,219,0.4)', background: 'rgba(52,152,219,0.06)' };
+
+/** Their circle in Bridge Chains: the link every page uses (/?chain=<id>). */
+export function OpenCircle({ id, compact }) {
+  return <Link href={`/?chain=${encodeURIComponent(id)}`} style={{ ...OUTLINE, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }}>Open circle</Link>;
+}
+
+/** The Scan page's "Scan one circle" for them (/setup?scan=<id>): it says the cost and asks first. */
+export function ScanCircle({ id, compact }) {
+  return <Link href={`/setup?scan=${encodeURIComponent(id)}`} style={{ ...OUTLINE, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }} title="Opens the Scan page with them picked: it says what the scan costs and starts nothing until you press it">Scan circle</Link>;
+}
+
+/**
+ * Ask: what the person card's Connect does. Their LinkedIn profile opens in
+ * a new tab to send the request there, and it's marked sent through the
+ * connection who is your best way in (lib/requests-client.js), everywhere at once.
+ * On your own network Auto stands first, the better pick, and Ask steps back
+ * to an outline beside it, as everywhere else Connect is offered
+ * (components/AutoConnect.js; Blake, 2026-10-03: "wherever its available").
+ */
+export function AskButton({ row, bridgeId, asked, compact, canAuto = false }) {
+  if (asked) {
+    return <span title="A request is marked sent. The next check of your own connections notices when they accept." style={{ ...ACT, cursor: 'default', color: 'var(--sd-fg-4, #6f7a88)', border: `1px dashed ${LINE}`, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }}>Asked</span>;
+  }
+  if (!row?.profile_url) return null;
+  const size = compact ? { padding: '4px 9px', fontSize: 11 } : null;
+  const ask = (second) => (
+    <a href={row.profile_url} target="_blank" rel="noopener noreferrer"
+      title="Opens their LinkedIn profile in a new tab to send the request there, and marks it sent here"
+      onClick={() => { markRequested(row, { bridgeId }).catch(() => {}); }}
+      style={second
+        ? { ...ACT, ...secondaryLook(compact ? 'row' : 'table'), ...size }
+        : { ...ACT, color: '#000', border: 'none', background: 'linear-gradient(135deg, #FF6B35, #FFD700)', ...size }}>
+      Ask
+    </a>
+  );
+  return <ConnectChoice person={row} canAuto={canAuto} size={compact ? 'row' : 'table'} connect={ask} />;
+}
+
+/** A horizontal bar made of parts: [{ value, color, label? }] over `max`. */
+export function Bars({ parts, max, height = 14, gap = 2 }) {
+  const total = Math.max(1, max || parts.reduce((t, p) => t + p.value, 0));
+  return (
+    <span style={{ display: 'flex', gap, height, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', borderRadius: 4, overflow: 'hidden', minWidth: 0, flex: 1 }}>
+      {parts.filter((p) => p.value > 0).map((p, i) => (
+        <span key={i} title={p.title} style={{
+          width: `${(100 * p.value) / total}%`, background: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 10, fontWeight: 800, color: inkOn(p.ink || '#888888'), overflow: 'hidden', whiteSpace: 'nowrap',
+        }}>{p.label && (100 * p.value) / total >= 5 ? p.label : ''}</span>
+      ))}
+    </span>
+  );
+}

package/.next/standalone/app/components/settings/UsageSection.js

@@ -19,7 +19,7 @@ import Link from 'next/link';
 import { Section, Body, LINE } from '../ui';
 import {
   AUTO, PEOPLE_PER_SEARCH, DANGER_AT, REPORTED_MONTH, LEVELS, usageLevel, warningParts, estimate,
-  barMax, pacificText, whenText, untilText, agoText, hoursText,
+  barMax, pacificText, whenText, untilText, agoText, hoursText, INVITE_CAPS, REPORTED_WEEKLY_INVITES,
 } from '../../../lib/usage';
 import { RESTRICTED_AT, RISKY_DAILY, SAFE_LIMITS } from '../../../lib/search-risk';
 import { paceOf, searchesPerHour } from '../../../lib/scan-pace';
@@ -100,6 +100,51 @@ function Meter({ title, used, of, max, color, ticks = [], band, children }) {
   );
 }
 
+/**
+ * Auto's connection requests (lib/auto-connect.js): the last 24 hours and the
+ * last 7 days, each against its cap, one bar under the other. Its own caps,
+ * not the search budget: a request is the one thing Six Degrees sends.
+ */
+function InviteMeter({ day, week, freesAt, weekFreesAt, now }) {
+  const known = Number.isFinite(day) && Number.isFinite(week);
+  const bars = [
+    { label: 'Last 24 hours', used: day, cap: INVITE_CAPS.day },
+    { label: 'Last 7 days', used: week, cap: INVITE_CAPS.week },
+  ];
+  const left = known ? Math.max(0, Math.min(INVITE_CAPS.day - day, INVITE_CAPS.week - week)) : null;
+  return (
+    <div style={{ marginTop: 18 }} data-usage="invites">
+      <div style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #e8e8ee)' }}>Connection requests (Auto)</div>
+      {bars.map((b) => (
+        <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
+          <span style={{ flex: '0 0 88px', fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)' }}>{b.label}</span>
+          <div style={{ position: 'relative', flex: 1, height: 10, borderRadius: 5, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)' }}>
+            <div style={{
+              position: 'absolute', top: 0, bottom: 0, left: 0, borderRadius: 5, transition: 'width 0.4s ease',
+              width: Number.isFinite(b.used) ? at(b.used, Math.max(b.cap, b.used)) : 0,
+              background: b.used >= b.cap ? '#ff6b6b' : 'linear-gradient(90deg, #FFD700, #FF6B35)',
+            }} />
+          </div>
+          <span style={{ flex: '0 0 auto', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums', minWidth: 58, textAlign: 'right' }}>
+            <b style={{ fontSize: 15, color: 'var(--sd-fg-1, #fff)' }}>{count(b.used)}</b> of {b.cap}
+          </span>
+        </div>
+      ))}
+      <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 6 }}>
+        {!known ? null
+          : freesAt ? <>Auto&rsquo;s {INVITE_CAPS.day} a day are used. The next one frees {whenAndUntil(freesAt, now)}.</>
+          : weekFreesAt ? <>Auto&rsquo;s {INVITE_CAPS.week} a week are used. The next one frees {whenAndUntil(weekFreesAt, now)}.</>
+          : <>{plural(left, 'request')} left for Auto now.</>}
+        <div style={small}>
+          Each press of Auto sends one request from the scanner&rsquo;s Chrome, without a note, and opens their
+          profile once (a profile view). It stops at {INVITE_CAPS.day} in any 24 hours and {INVITE_CAPS.week} in any 7 days.
+          LinkedIn doesn&rsquo;t publish its invitation limit; people commonly report about {REPORTED_WEEKLY_INVITES} a week.
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function Row({ label, children }) {
   return (
     <div style={{ display: 'flex', gap: '4px 16px', flexWrap: 'wrap', padding: '10px 0', borderTop: LINE, fontSize: 13 }}>
@@ -260,6 +305,8 @@ export default function UsageSection() {
         </div>
       </Meter>
 
+      <InviteMeter day={u.invitesToday} week={u.invitesWeek} freesAt={u.invitesFreeAt} weekFreesAt={u.invitesWeekFreeAt} now={now} />
+
       <div style={{ marginTop: 22 }}>
         <Row label="Speed">
           {pace.label}: about {searchesPerHour(limits.pace)} searches an hour at most while a scan runs.
@@ -301,8 +348,8 @@ export default function UsageSection() {
       </div>
 
       <div style={{ ...small, marginTop: 14, paddingTop: 12, borderTop: LINE }}>
-        Where these numbers come from: Six Degrees writes down every search and profile view it makes on your
-        LinkedIn account, on this computer, and counts them here. Searches you make yourself on linkedin.com
+        Where these numbers come from: Six Degrees writes down every search, profile view and Auto request it makes
+        on your LinkedIn account, on this computer, and counts them here. Searches you make yourself on linkedin.com
         aren&rsquo;t in it, and LinkedIn shows no count of its own. The {RESTRICTED_AT} searches and the 20 to 25
         profile views are what happened to one real account, not safe limits. Change the budget on the
         {' '}<Link href="/setup" style={link}>Scan page</Link>, under Fine-tune the scanner. Nothing here is sent anywhere.

package/.next/standalone/app/globals.css

@@ -107,13 +107,12 @@ html:has([data-field-question]) {
   border-radius: 3px;
 }
 
-/* Where the scan status bar sits: just under the header (app/components/ScanStatusBar.js). */
-:root { --scan-bar-top: 94px; }
-@media (max-width: 767px) { :root { --scan-bar-top: 66px; } }
 
 /* The notch's running dot (app/components/ScanStatusBar.js). */
 @keyframes notch-pulse { 50% { opacity: 0.35; } }
 @media (prefers-reduced-motion: no-preference) { .notch-pulse { animation: notch-pulse 1.6s ease-in-out infinite; } }
+@keyframes notch-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .notch-in { animation: notch-in 0.25s ease-out; } }
 
 /* The Social tab's CRM (app/social/Crm.js): the list and the person side by
    side, stacked on a phone. In Pipeline the board takes the whole width and

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/page.js

@@ -4,8 +4,6 @@ import { Suspense, useEffect, useState, useRef, useMemo, useCallback } from 'rea
 import { useSearchParams } from 'next/navigation';
 import { fillsCircles, 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 { peopleByDegree } from '../lib/degrees';
@@ -105,7 +103,6 @@ function HomeInner() {
   const [scanNotes, setScanNotes] = useState(NO_SCAN_NOTES);
   const shapeRef = useRef('');
   // Everyone with a request out, shared with every view (lib/requests-client.js).
-  const pendingCount = requestCount(useRequests());
 
   useEffect(() => {
     if (!userId) return;
@@ -305,20 +302,7 @@ function HomeInner() {
             </button>
           </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={{
-            padding: '5px 12px', borderRadius: 16, fontSize: 12, fontWeight: 600, textDecoration: 'none',
-            background: 'rgba(255,107,53,0.12)', color: 'var(--sd-orange, #FF6B35)',
-            border: '1px solid rgba(255,107,53,0.25)',
-            display: 'inline-flex', alignItems: 'center', gap: 5,
-          }}>
-            <span style={{ fontSize: 10 }}>⏳</span>
-            {pendingCount} Pending
-          </Link>
-        )}
-      </AppHeader>
+      />
 
       <div style={{ display: 'flex', height: isMobile ? 'calc(100vh - 70px)' : 'calc(100vh - 130px)', position: 'relative' }}>
         <FilterPanel