six-degrees 0.7.0 → 1.0.0

package/.next/standalone/app/components/Sidebar.js

@@ -1,8 +1,9 @@
 'use client';
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useSyncExternalStore } from 'react';
 import Link from 'next/link';
-import { beginScrape, scraperStatus, notReadyMessage, resumePoint, scansCircleOf, isCircleScan, busyReason } from '../../lib/scraper-client';
+import { beginScrape, scraperStatus, notReadyMessage, resumePoint, scansCircleOf, isCircleScan, busyReason, watchScanner, scannerNow } from '../../lib/scraper-client';
+import { scanBoxTitle, stoppedLine } from '../../lib/in-progress';
 import useScanner from './useScanner';
 import useRequests from './useRequests';
 import TheirCircle from './TheirCircle';
@@ -17,6 +18,7 @@ import Avatar from './Avatar';
 import NoteDetail from './NoteDetail';
 import CirclePanel from './CirclePanel';
 import { localPhoto } from '../../lib/photos';
+import ConnectChoice, { secondaryLook } from './AutoConnect';
 
 export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending, scanNotes, csvSource = null, onOpenCircle, onShowInSeparation, note = null, onCloseNote, circle = null }) {
   const isDegreesMode = mode === 'degrees';
@@ -54,6 +56,12 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
   // Separation, the circle and the Outlink queue at once (lib/requests-client.js).
   const requests = useRequests();
   const isRequested = useCallback((row) => hasRequest(row, requests), [requests]);
+  // Where Resume would carry on with the person open, asked once for the whole
+  // card: the line by their name and the scan box below both show it. Only for
+  // whoever gets a scan box (the same test as below). Above the early returns,
+  // so the hook order never changes.
+  const scansHere = Boolean(selected) && canScan && (selected.degree === 1 || selected.outreach_status === 'accepted');
+  const { resume, scanning: scanningThem } = useResume(scansHere ? selected : null);
 
   // A notification someone clicked takes the panel over until they go back (app/components/NoteDetail.js).
   if (note) {
@@ -151,6 +159,9 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
           </div>
         </div>
 
+        {/* Their scan stopped partway: said by their name, where it's seen without scrolling. */}
+        {scansHere && resume && <StoppedPartway resume={resume} scanning={scanningThem} />}
+
         {/* Their circle, out to six degrees: who they know, who you added from
             it, and who those people know (TheirCircle.js). Your connections only:
             a 2nd-degree person's circle isn't yours to scan until they accept. */}
@@ -224,9 +235,15 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                   <div style={row}>
                     <span style={label}>Scanned</span>
                     <span style={{ flex: 1 }}>{scanned}</span>
-                    {i.bars !== 5 && canScan && (
+                    {/* Stopped partway: carry on from that page, the line by their name's own
+                        Resume. The Scan page's Scan one circle reads the list again from page 1,
+                        which spends the searches already spent; that stays for anyone else. */}
+                    {i.bars !== 5 && canScan && (scansHere && resume ? (
+                      <button type="button" style={act} title={`Resume from page ${resume.nextPage}`}
+                        onClick={() => resumeInScanBox(scanningThem)}>Resume →</button>
+                    ) : (resume === null || i.bars == null || !scansHere) && (
                       <a href={`/setup?scan=${encodeURIComponent(selected.id)}`} style={act}>{i.bars == null ? 'Scan →' : 'Finish →'}</a>
-                    )}
+                    ))}
                   </div>
                   {(() => {
                     const since = selected.connected_date ? new Date(selected.connected_date) : null;
@@ -468,21 +485,27 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
                   Didn&apos;t send it? Undo
                 </button>
               ) : (
-                <a href={selected.profile_url} target="_blank" rel="noopener noreferrer"
-                  style={{
-                    display: 'block', padding: '10px 16px',
-                    background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
-                    color: '#000', borderRadius: 8, textDecoration: 'none',
-                    fontWeight: 700, fontSize: 13,
-                  }}
-                  onClick={() => {
-                    // Opens their profile to connect, and marks the request
-                    // sent, through the bridge whose circle you found them in.
-                    markRequested(selected, { bridgeId: selected.source_connection_id }).catch(() => {});
-                  }}
-                >
-                  Connect to Unlock Path
-                </a>
+                // Auto first, the better pick; Connect beside it as an outline
+                // (AutoConnect.js; Blake, 2026-10-03). Your own network only.
+                <ConnectChoice person={selected} canAuto={canScan} size="card" connect={(second) => (
+                  <a href={selected.profile_url} target="_blank" rel="noopener noreferrer"
+                    title={second ? 'Opens their LinkedIn profile, to connect yourself' : undefined}
+                    style={second ? { ...secondaryLook('card'), flex: 1 } : {
+                      display: 'block', padding: '10px 16px',
+                      background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
+                      color: '#000', borderRadius: 8, textDecoration: 'none',
+                      fontWeight: 700, fontSize: 13,
+                    }}
+                    onClick={() => {
+                      // Opens their profile to connect, and marks the request
+                      // sent, through the bridge whose circle you found them in.
+                      markRequested(selected, { bridgeId: selected.source_connection_id }).catch(() => {});
+                    }}
+                  >
+                    {/* Beside Auto there's room for one word (a 320 px panel). */}
+                    {second ? 'Connect' : 'Connect to Unlock Path'}
+                  </a>
+                )} />
               )}
             </div>
           );
@@ -491,7 +514,7 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
         {/* Create Cluster — for D1 connections OR accepted D2 (promoted, ready to bridge for D3) */}
         {(selected.degree === 1 || selected.outreach_status === 'accepted') && (
           canScan
-            ? <CreateClusterCard key={selected.id} selected={selected} degree2={degree2} />
+            ? <CreateClusterCard key={selected.id} selected={selected} degree2={degree2} resume={resume} />
             : <ScansNeedYourNetwork csvSource={csvSource} style={{ marginTop: 16 }} />
         )}
 
@@ -1075,6 +1098,87 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
   );
 }
 
+const noWatch = () => () => {};
+
+/**
+ * Where Resume would carry on with this person ({ nextPage, pagesRead, legacy };
+ * null when there is nothing to carry on with; undefined until known), and
+ * whether their circle is being scanned right now. One question to the server
+ * for the whole card (GET /api/scraper?resume=<id>), asked again whenever a
+ * scan ends, since every read moves it. Only those two facts are taken from the
+ * scanner, never its whole answer: that changes every time a running scan's log
+ * grows, and this panel would redraw with it.
+ */
+function useResume(person) {
+  const id = person?.id ?? null;
+  const subscribe = id ? watchScanner : noWatch;
+  const lastEnded = useSyncExternalStore(subscribe, () => scannerNow().finished[0]?.startedAt ?? null, () => null);
+  const scanning = useSyncExternalStore(subscribe, () => {
+    const now = scannerNow();
+    return Boolean(now.running && person && scansCircleOf(now, person));
+  }, () => false);
+  const [got, setGot] = useState({ id: null, resume: undefined });
+  useEffect(() => {
+    if (!id) return undefined;
+    let live = true;
+    resumePoint(id).then((r) => { if (live) setGot({ id, resume: r }); }, () => { if (live) setGot({ id, resume: null }); });
+    return () => { live = false; };
+  }, [id, lastEnded]);
+  // Another person's answer never shows on this one's card while theirs is asked.
+  return { resume: id && got.id === id ? got.resume : undefined, scanning: Boolean(id) && scanning };
+}
+
+/**
+ * Resume, from anywhere on the card: bring the scan box into view and press its
+ * own Resume, so the same checks run and the scan's log or any problem shows
+ * where it's seen. While their scan runs (or Resume is greyed out) it only
+ * brings the box into view, which says why.
+ */
+function resumeInScanBox(scanning = false) {
+  const box = document.getElementById('scan-box');
+  if (!box) return;
+  box.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  box.animate?.([{ boxShadow: '0 0 0 3px rgba(255,215,0,0.75)' }, { boxShadow: '0 0 0 0 rgba(255,215,0,0)' }], { duration: 1600 });
+  if (!scanning) box.querySelector('button[data-resume]:not([disabled])')?.click();
+}
+
+/**
+ * The line by their name when the read of their list stopped partway (Blake,
+ * 2026-10-03: "if someone was scanned but not finished it needs to show that in
+ * their profile card"). The scan box is far down the card, so this says it where
+ * it's seen, and Resume here presses the box's own Resume: the same checks, and
+ * the box, brought into view, is where the scan's log and any problem show.
+ * While their scan runs it says so, and only takes you to the box.
+ */
+function StoppedPartway({ resume, scanning }) {
+  const gold = 'var(--sd-gold, #FFD700)';
+  return (
+    <button type="button" onClick={() => resumeInScanBox(scanning)}
+      aria-label={scanning ? 'Scanning their circle now: go to the scan' : `${stoppedLine(resume)}. Resume from page ${resume.nextPage}`}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 9, width: '100%', boxSizing: 'border-box', margin: '-6px 0 16px',
+        padding: '8px 11px', borderRadius: 8, cursor: 'pointer', textAlign: 'left', font: 'inherit',
+        background: 'rgba(255,215,0,0.07)', border: '1px solid rgba(255,215,0,0.32)', color: 'var(--sd-fg-2, #ddd)',
+      }}>
+      {/* A pause sign while stopped; a pulsing dot while it runs. */}
+      {scanning ? (
+        // ScanLog's keyframes: the box below shows its log while their scan runs.
+        <span aria-hidden="true" className="scanlog-dot" style={{ width: 8, height: 8, borderRadius: '50%', background: gold, flexShrink: 0, animation: 'scanlogPulse 1s ease-in-out infinite' }} />
+      ) : (
+        <span aria-hidden="true" style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+          <span style={{ width: 3, height: 10, borderRadius: 1, background: gold }} />
+          <span style={{ width: 3, height: 10, borderRadius: 1, background: gold }} />
+        </span>
+      )}
+      <span style={{ flex: 1, minWidth: 0, fontSize: 11.5, lineHeight: 1.35 }}>
+        <b style={{ color: gold }}>{scanning ? 'Scanning their circle now' : `${stoppedLine(resume)}.`}</b>
+        {!scanning && <span style={{ color: 'var(--sd-fg-3, #999)' }}> Their list isn&apos;t finished.</span>}
+      </span>
+      <span style={{ fontSize: 11.5, fontWeight: 800, color: gold, whiteSpace: 'nowrap' }}>{scanning ? 'See it ↓' : 'Resume ↓'}</span>
+    </button>
+  );
+}
+
 // Scan one person's circle, or carry on with it.
 //
 // LinkedIn lists someone else's connections in its own order, with no dates,
@@ -1085,11 +1189,18 @@ function PathBox({ routes, selected, tierColors, onSelect }) {
 // Whether a scan is running comes from the scanner (useScanner), not from this
 // card: close the card mid-scan and open it again and the scan is still here,
 // and every other card greys its buttons out until it ends.
-function CreateClusterCard({ selected, degree2 }) {
+//
+// `resume` is where Resume carries on (useResume, asked once for the card),
+// null when there is nothing to resume, undefined until it's known. A read that
+// stopped partway is the first thing the box says: SCAN IN PROGRESS, in gold,
+// with Resume as the main button (Blake, 2026-10-03: "if someone was scanned but
+// not finished it needs to show that in their profile card ... showing resume
+// scanner in that actual card"). It used to sit under CLUSTER ACTIVE, which
+// reads as done.
+function CreateClusterCard({ selected, degree2, resume }) {
   const scan = useScanner();
   const [checking, setChecking] = useState(false);
   const [problem, setProblem] = useState(null);      // why a scan didn't start: { text, offline }
-  const [resume, setResume] = useState(undefined);   // where Resume carries on; null: nothing to resume
   const clusterCount = degree2?.filter(d => d.source_connection_id === selected.id).length || 0;
   const hasCluster = clusterCount > 0;
 
@@ -1097,14 +1208,6 @@ function CreateClusterCard({ selected, degree2 }) {
   const busy = scan.running && !mine ? busyReason(scan) : null;
   const last = scan.finished.find((j) => scansCircleOf(j, selected));
 
-  // Every read moves where Resume would carry on, so ask again whenever one ends.
-  const lastEnded = scan.finished[0]?.startedAt ?? null;
-  useEffect(() => {
-    let live = true;
-    resumePoint(selected.id).then((r) => { if (live) setResume(r); }, () => { if (live) setResume(null); });
-    return () => { live = false; };
-  }, [selected.id, lastEnded]);
-
   async function start(action) {
     setProblem(null);
     setChecking(true);
@@ -1122,27 +1225,32 @@ function CreateClusterCard({ selected, degree2 }) {
   }
 
   const read = hasCluster || Boolean(resume);
-  const accent = hasCluster ? '#00ff88' : '#9B59B6';
+  // Gold while a read is stopped partway, green once a circle is in, purple before.
+  const accent = resume ? '#FFD700' : hasCluster ? '#00ff88' : '#9B59B6';
+  // Gold words vanish on a light look; the theme's own gold reads on either.
+  const ink = resume ? 'var(--sd-gold, #FFD700)' : accent;
   const off = Boolean(busy) || checking;
   const button = (primary) => ({
     flex: 1, padding: '11px 8px', borderRadius: 8, fontWeight: 700, fontSize: primary ? 13 : 12,
     cursor: off ? 'not-allowed' : 'pointer', opacity: off ? 0.45 : 1,
     ...(primary
       ? { border: 'none', background: 'linear-gradient(135deg, #9B59B6, #3498DB)', color: '#fff' }
-      : { border: `1px solid ${accent}55`, background: `${accent}14`, color: accent }),
+      : { border: `1px solid ${accent}55`, background: `${accent}14`, color: ink }),
   });
 
   return (
     <div id="scan-box" style={{
-      background: hasCluster ? 'rgba(0,255,136,0.06)' : 'rgba(155,89,182,0.08)',
-      border: `1px solid ${hasCluster ? 'rgba(0,255,136,0.2)' : 'rgba(155,89,182,0.3)'}`,
+      background: resume ? 'rgba(255,215,0,0.06)' : hasCluster ? 'rgba(0,255,136,0.06)' : 'rgba(155,89,182,0.08)',
+      border: `1px solid ${resume ? 'rgba(255,215,0,0.32)' : hasCluster ? 'rgba(0,255,136,0.2)' : 'rgba(155,89,182,0.3)'}`,
       borderRadius: 10, padding: 16, marginTop: 16,
     }}>
-      <div style={{ fontSize: 10, color: accent, fontWeight: 700, letterSpacing: 1, marginBottom: 4, textAlign: 'center' }}>
-        {hasCluster ? 'CLUSTER ACTIVE' : 'CREATE CLUSTER'}
+      <div style={{ fontSize: 10, color: ink, fontWeight: 700, letterSpacing: 1, marginBottom: 4, textAlign: 'center' }}>
+        {scanBoxTitle({ resume, hasCluster })}
       </div>
       <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #aaa)', marginBottom: 12, textAlign: 'center' }}>
-        {hasCluster
+        {resume
+          ? (hasCluster ? `${clusterCount} connections mapped so far` : 'Their list is only partly read')
+          : hasCluster
           ? `${clusterCount} connections mapped in Six Degrees`
           : <>Scan {selected.name}&apos;s connections to map their network</>}
       </div>
@@ -1169,7 +1277,8 @@ function CreateClusterCard({ selected, degree2 }) {
           {last && <LastRead job={last} />}
           <div style={{ display: 'flex', gap: 8 }}>
             {resume && (
-              <button onClick={() => start('resume')} disabled={off} style={button(true)}>
+              // data-resume: the line by their name presses this one (StoppedPartway).
+              <button data-resume onClick={() => start('resume')} disabled={off} style={button(true)}>
                 Resume from page {resume.nextPage}
               </button>
             )}

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

@@ -0,0 +1,275 @@
+'use client';
+
+// Insights → Kingmakers, Gatekeepers, Companies and Industries: each board in
+// full, a hundred rows at a time. The numbers are lib/insights-board.js's,
+// with where they came from under each.
+
+import { useState } from 'react';
+import Avatar from '../Avatar';
+import { TIER_COLORS } from '../../../lib/themes';
+import { shortName } from '../../../lib/separation';
+import {
+  fmt, one, pc, Hero, PersonCell, Src, NeedsCircles, OpenCircle, Bars, Card, LINE, SOFT_LINE, CARD_BG, ELLIPSIS,
+} from './parts';
+import { Logo } from './Rail';
+import { PAGE } from './PeopleView';
+
+/** A board's table: the header row on a computer, the rows, and Show more. */
+function Table({ cols, head, right = [], rows, render, isMobile, source }) {
+  const step = isMobile ? 25 : PAGE;
+  const [pages, setPages] = useState(1);
+  const shown = pages * step;
+  const list = rows.slice(0, shown);
+  const left = rows.length - list.length;
+  return (
+    <div style={{ border: `1px solid ${LINE}`, borderRadius: 14, background: CARD_BG, overflow: 'hidden' }}>
+      {!isMobile && (
+        <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, padding: '0 16px', alignItems: 'center', height: 36, borderBottom: `1px solid ${LINE}`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.02)', fontSize: 10.5, color: 'var(--sd-fg-4, #6f7a88)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 700 }}>
+          {head.map((h, i) => <span key={i} style={{ textAlign: right.includes(i) ? 'right' : undefined }}>{h}</span>)}
+        </div>
+      )}
+      {list.map((r, i) => (
+        <div key={r.key ?? i} style={isMobile
+          ? { padding: '10px 12px', borderBottom: `1px solid ${SOFT_LINE}` }
+          : { display: 'grid', gridTemplateColumns: cols, gap: 12, padding: '0 16px', alignItems: 'center', minHeight: 54, borderBottom: `1px solid ${SOFT_LINE}` }}>
+          {render(r, i)}
+        </div>
+      ))}
+      {left > 0 && (
+        <button type="button" onClick={() => setPages((n) => n + 1)} style={{ display: 'block', width: '100%', textAlign: 'left', padding: '12px 16px', border: 'none', borderBottom: `1px solid ${LINE}`, background: 'transparent', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: 'var(--sd-blue, #3498DB)' }}>
+          Show {fmt(Math.min(step, left))} more → <span style={{ color: 'var(--sd-fg-4, #6f7a88)', fontWeight: 400, marginLeft: 6 }}>{fmt(left)} to go</span>
+        </button>
+      )}
+      <Src style={{ padding: '10px 16px 14px', marginTop: 0 }}>{source}</Src>
+    </div>
+  );
+}
+
+const Rank = ({ n, isMobile }) => <span style={{ fontSize: isMobile ? 11.5 : 13, fontWeight: 700, color: n <= 3 ? 'var(--sd-gold, #FFD700)' : 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums' }}>#{fmt(n)}</span>;
+const Num = ({ children, color, big }) => <b style={{ fontSize: big ? 16 : 13.5, fontWeight: big ? 800 : 700, color: color || 'var(--sd-fg-1, #fff)', fontVariantNumeric: 'tabular-nums', display: 'block', textAlign: 'right' }}>{children}</b>;
+const Mute = ({ children, right }) => <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums', ...(right ? { display: 'block', textAlign: 'right' } : null) }}>{children}</span>;
+
+/** S and A behind someone, as one bar with the letters on it. */
+function SABar({ S, A, max }) {
+  return <Bars max={max} parts={[
+    { value: S, color: TIER_COLORS.S, label: 'S', ink: TIER_COLORS.S, title: `${fmt(S)} S` },
+    { value: A, color: TIER_COLORS.A, label: 'A', ink: TIER_COLORS.A, title: `${fmt(A)} A` },
+  ]} />;
+}
+
+// ── Kingmakers ──────────────────────────────────────────────────────────────
+
+export function KingmakersBoard({ data, source, isMobile }) {
+  const { kings } = data;
+  const cols = '52px minmax(0,1.5fr) 80px 56px 56px minmax(0,1.3fr) 70px 100px';
+  const max = kings.list[0]?.SA || 1;
+  return (
+    <>
+      <Hero title="Kingmakers" isMobile={isMobile}>
+        Your connections by the S and A people in their circle: the doors with the most power behind them. A title says what someone holds; a circle says what they can open.
+      </Hero>
+      {kings.scanned === 0 ? <Card><NeedsCircles source={source} /></Card> : (
+        <Table isMobile={isMobile} cols={cols} rows={kings.list.map((k) => ({ ...k, key: k.row.id }))} source={kings.source}
+          head={['Rank', 'Connection', 'Circle', 'S', 'A', 'Behind them', 'S+A', '']} right={[2, 3, 4, 6]}
+          render={(k, i) => (isMobile ? (
+            <div style={{ display: 'grid', gridTemplateColumns: '36px minmax(0,1fr) auto', gap: 8, alignItems: 'center' }}>
+              <Rank n={i + 1} isMobile />
+              <PersonCell row={k.row} size={30} />
+              <Num big>{fmt(k.SA)}</Num>
+              <span />
+              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><SABar S={k.S} A={k.A} max={max} /><Mute>of {fmt(k.size)}</Mute></span>
+              <OpenCircle id={k.row.id} compact />
+            </div>
+          ) : (
+            <>
+              <Rank n={i + 1} />
+              <PersonCell row={k.row} />
+              <Mute right>{fmt(k.size)}</Mute>
+              <Num color={TIER_COLORS.S}>{fmt(k.S)}</Num>
+              <Num color={TIER_COLORS.A}>{fmt(k.A)}</Num>
+              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><SABar S={k.S} A={k.A} max={max} /><Mute>{pc(100 * k.share)}</Mute></span>
+              <Num big>{fmt(k.SA)}</Num>
+              <span style={{ justifySelf: 'end' }}><OpenCircle id={k.row.id} /></span>
+            </>
+          ))} />
+      )}
+    </>
+  );
+}
+
+// ── Gatekeepers ─────────────────────────────────────────────────────────────
+
+export function GatekeepersBoard({ data, source, isMobile }) {
+  const { gates, kings } = data;
+  const cols = '52px minmax(0,1.6fr) 70px 110px 76px minmax(0,1fr) 100px';
+  const others = Math.max(0, 100 - gates.top3Share);
+  return (
+    <>
+      <Hero title="Gatekeepers" isMobile={isMobile}>
+        {kings.scanned === 0 ? 'Who your S and A reach hangs on: the people who reach you through one connection only.'
+          : <><b style={{ color: 'var(--sd-fg-1, #fff)' }}>{pc(gates.onlyShare)}</b> of the S and A people you can reach have one way in. Three connections carry <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{pc(gates.top3Share)}</b> of your S and A reach.</>}
+      </Hero>
+      {kings.scanned === 0 ? <Card><NeedsCircles source={source} /></Card> : (
+        <>
+          <div style={{ marginBottom: 14 }}>
+            <div style={{ display: 'flex', gap: 2, height: 30, borderRadius: 8, overflow: 'hidden' }}>
+              {gates.top3.map((g, i) => (
+                <span key={g.row.id} title={`${g.row.name}: ${pc(g.share)} of your S and A reach`} style={{ width: `${g.share}%`, background: ['#00ff88', '#00c46a', '#00984f'][i], display: 'flex', alignItems: 'center', paddingLeft: 10, overflow: 'hidden' }}>
+                  <em style={{ fontStyle: 'normal', fontSize: 12, fontWeight: 750, color: '#00170b', whiteSpace: 'nowrap' }}>{shortName(g.row.name)} {pc(g.share)}</em>
+                </span>
+              ))}
+              <span style={{ width: `${others}%`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', display: 'flex', alignItems: 'center', paddingLeft: 10, overflow: 'hidden' }}>
+                <em style={{ fontStyle: 'normal', fontSize: 12, fontWeight: 600, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>{fmt(Math.max(0, gates.list.length - 3))} others {pc(others)}</em>
+              </span>
+            </div>
+          </div>
+          <Table isMobile={isMobile} cols={cols} rows={gates.list.map((g) => ({ ...g, key: g.row.id }))} source={gates.source}
+            head={['Rank', 'Connection', 'Circle', 'Only via them', 'Of them S', 'Share of your S and A reach', '']} right={[2, 3, 4]}
+            render={(g, i) => (isMobile ? (
+              <div style={{ display: 'grid', gridTemplateColumns: '36px minmax(0,1fr) auto', gap: 8, alignItems: 'center' }}>
+                <Rank n={i + 1} isMobile />
+                <PersonCell row={g.row} size={30} />
+                <span style={{ textAlign: 'right' }}><Num big color="var(--sd-green, #00ff88)">{fmt(g.onlySA)}</Num><div style={{ fontSize: 10, color: 'var(--sd-fg-4, #6f7a88)' }}>only via them</div></span>
+                <span />
+                <Mute>{fmt(g.onlyS)} S · circle of {fmt(g.size)} · {pc((100 * g.credit) / Math.max(1, gates.totalSA))} of your reach</Mute>
+                <OpenCircle id={g.row.id} compact />
+              </div>
+            ) : (
+              <>
+                <Rank n={i + 1} />
+                <PersonCell row={g.row} />
+                <Mute right>{fmt(g.size)}</Mute>
+                <Num big color="var(--sd-green, #00ff88)">{fmt(g.onlySA)}</Num>
+                <Num color={TIER_COLORS.S}>{fmt(g.onlyS)}</Num>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <Bars max={gates.top3[0]?.credit || 1} parts={[{ value: g.credit, color: 'var(--sd-green, #00ff88)' }]} height={8} />
+                  <Mute>{pc((100 * g.credit) / Math.max(1, gates.totalSA))}</Mute>
+                </span>
+                <span style={{ justifySelf: 'end' }}><OpenCircle id={g.row.id} /></span>
+              </>
+            ))} />
+        </>
+      )}
+    </>
+  );
+}
+
+// ── Companies ───────────────────────────────────────────────────────────────
+
+const SCORE_FROM = { yours: 'your score', known: 'curated list', data: 'public dataset', estimate: 'estimated' };
+
+export function CompaniesBoard({ heavy, isMobile }) {
+  const cols = '52px minmax(0,1.6fr) 96px 56px 56px 96px minmax(0,1.2fr) 92px';
+  if (!heavy) return <><Hero title="Company power" isMobile={isMobile}>Every company within two steps of you, with everyone’s power added up.</Hero><Card><div style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>Counting…</div></Card></>;
+  const { companies } = heavy;
+  return (
+    <>
+      <Hero title="Company power" isMobile={isMobile}>
+        <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{fmt(companies.count)}</b> companies someone within two steps of you works at now, with everyone’s power added up: where the power you can reach sits.
+      </Hero>
+      <Table isMobile={isMobile} cols={cols} rows={companies.list.map((c) => ({ ...c, key: c.name }))} source={`${companies.source} ${companies.bigSource}`}
+        head={['Rank', 'Company', 'People', 'S', 'A', 'Total power', 'Ways in', 'Score']} right={[2, 3, 4, 5, 7]}
+        render={(c, i) => {
+          const ways = (
+            <span style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0, overflow: 'hidden' }} title={c.bridges.map((b) => `${b.bridge.name}: ${fmt(b.people)} there`).join('\n')}>
+              <Mute>{fmt(c.waysIn)}</Mute>
+              {c.bridges.slice(0, 2).map((b) => (
+                <span key={b.bridge.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11.5, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>
+                  <Avatar person={b.bridge} size={16} tierColors={TIER_COLORS} />{shortName(b.bridge.name)}
+                </span>
+              ))}
+              {c.d1 > 0 && <span style={{ fontSize: 11, color: 'var(--sd-green, #7dffc0)', whiteSpace: 'nowrap' }}>{fmt(c.d1)} yours</span>}
+            </span>
+          );
+          const name = (
+            <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+              <Logo name={c.name} size={30} />
+              <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                <b style={{ fontSize: 13.5, fontWeight: 650, ...ELLIPSIS }}>{c.name}</b>
+                <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', minWidth: 0 }}>
+                  <i className="sd-dot-html" style={{ width: 7, height: 7, borderRadius: '50%', background: c.industry.color, flexShrink: 0 }} />
+                  <span style={ELLIPSIS}>{c.industry.label}</span>
+                </span>
+              </span>
+            </span>
+          );
+          return isMobile ? (
+            <div style={{ display: 'grid', gridTemplateColumns: '36px minmax(0,1fr) auto', gap: 8, alignItems: 'center' }}>
+              <Rank n={i + 1} isMobile />
+              {name}
+              <span style={{ textAlign: 'right' }}><Num big>{fmt(Math.round(c.total))}</Num><div style={{ fontSize: 10, color: 'var(--sd-fg-4, #6f7a88)' }}>total power</div></span>
+              <span />
+              <Mute><span style={{ color: TIER_COLORS.S }}>{fmt(c.S)} S</span> · <span style={{ color: TIER_COLORS.A }}>{fmt(c.A)} A</span> · {fmt(c.people)} people · {fmt(c.waysIn)} ways in</Mute>
+              <Mute>{one(c.score).replace(/\.0$/, '')}/10</Mute>
+            </div>
+          ) : (
+            <>
+              <Rank n={i + 1} />
+              {name}
+              <Mute right>{fmt(c.people)}</Mute>
+              <Num color={TIER_COLORS.S}>{fmt(c.S)}</Num>
+              <Num color={TIER_COLORS.A}>{fmt(c.A)}</Num>
+              <Num big>{fmt(Math.round(c.total))}</Num>
+              {ways}
+              <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
+                <Num>{one(c.score).replace(/\.0$/, '')}/10</Num>
+                <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #6f7a88)', whiteSpace: 'nowrap' }}>{SCORE_FROM[c.scoreSource]}</span>
+              </span>
+            </>
+          );
+        }} />
+    </>
+  );
+}
+
+// ── Industries ──────────────────────────────────────────────────────────────
+
+export function IndustriesBoard({ heavy, isMobile }) {
+  const cols = 'minmax(0,1.5fr) 90px 90px 64px 64px minmax(0,1.4fr) 100px';
+  if (!heavy) return <><Hero title="Industries" isMobile={isMobile}>Where the power you can reach sits, by industry.</Hero><Card><div style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>Counting…</div></Card></>;
+  const { industries } = heavy;
+  const top = industries.list[0];
+  const max = Math.max(1, ...industries.list.map((e) => e.share));
+  return (
+    <>
+      <Hero title="Industries" isMobile={isMobile}>
+        Where the power you can reach sits.{top ? <> <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{top.label}</b> holds {pc(top.share)} of your S and A.</> : null}
+      </Hero>
+      <Table isMobile={isMobile} cols={cols} rows={industries.list} source={industries.source}
+        head={['Industry', 'Companies', 'People', 'S', 'A', 'Share of your S and A', 'Total power']} right={[1, 2, 3, 4, 6]}
+        render={(e) => {
+          const label = (
+            <span style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+              <i className="sd-dot-html" style={{ width: 11, height: 11, borderRadius: 3, background: e.color, flexShrink: 0 }} />
+              <b style={{ fontSize: 13.5, fontWeight: 650, ...ELLIPSIS }}>{e.label}</b>
+            </span>
+          );
+          const bar = (
+            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Bars max={max} parts={[{ value: e.share, color: e.color, ink: e.color }]} height={10} />
+              <Mute>{pc(e.share)}</Mute>
+            </span>
+          );
+          return isMobile ? (
+            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 6, alignItems: 'center' }}>
+              {label}
+              <Num big>{pc(e.share)}</Num>
+              <Mute>{fmt(e.companies)} companies · {fmt(e.people)} people · <span style={{ color: TIER_COLORS.S }}>{fmt(e.S)} S</span> · <span style={{ color: TIER_COLORS.A }}>{fmt(e.A)} A</span></Mute>
+              <span />
+            </div>
+          ) : (
+            <>
+              {label}
+              <Mute right>{fmt(e.companies)}</Mute>
+              <Mute right>{fmt(e.people)}</Mute>
+              <Num color={TIER_COLORS.S}>{fmt(e.S)}</Num>
+              <Num color={TIER_COLORS.A}>{fmt(e.A)}</Num>
+              {bar}
+              <Num big>{fmt(e.total)}</Num>
+            </>
+          );
+        }} />
+    </>
+  );
+}
+