six-degrees 0.7.0 → 1.0.0

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

@@ -0,0 +1,266 @@
+'use client';
+
+// Insights → People: the Power Index. Everyone within two steps of you, each
+// once, ranked by power, with the filters above it and the rail of boards
+// beside it (mock-up B). The table shows a hundred rows at a time (25 on a
+// phone), so a network of thousands stays quick; ranks are the whole list's,
+// so a filter never renumbers anyone.
+
+import { memo, useDeferredValue, useMemo, useState } from 'react';
+import { filterIndex, bandText } from '../../../lib/insights-board';
+import { hasRequest } from '../../../lib/requests-client';
+import { shortName, TIERS } from '../../../lib/separation';
+import { RARITY, toggle } from '../../../lib/rarity';
+import Avatar from '../Avatar';
+import { TIER_COLORS } from '../../../lib/themes';
+import {
+  fmt, one, TierChip, DegreeChip, RarityTag, PersonCell, Src, Hero, OpenCircle, ScanCircle, AskButton,
+  LINE, SOFT_LINE, CARD_BG, ELLIPSIS,
+} from './parts';
+import Rail from './Rail';
+
+export const PAGE = 100;
+const COLS = '58px minmax(0,1.55fr) 148px minmax(0,1.45fr) 118px 100px';
+
+export default function PeopleView({ data, heavy, open, net, source, isMobile, onView, requests }) {
+  const { index } = data;
+  const [degree, setDegree] = useState('all');
+  const [tiers, setTiers] = useState(() => new Set());
+  const [rarities, setRarities] = useState(() => new Set());
+  const [query, setQuery] = useState('');
+  const q = useDeferredValue(query);
+  // A hundred rows at a time on a computer, twenty-five on a phone, where the boards sit under the table.
+  const step = isMobile ? 25 : PAGE;
+  const [pages, setPages] = useState(1);
+  const shown = pages * step;
+  const filtering = degree !== 'all' || tiers.size > 0 || rarities.size > 0 || q.trim() !== '';
+  const list = useMemo(() => (filtering ? filterIndex(index, { degree, tiers, rarities, query: q }) : index.people),
+    [index, filtering, degree, tiers, rarities, q]);
+  const bandAt = useMemo(() => new Map(index.bands.map((b) => [b.start, b])), [index]);
+  // A new filter starts from the top again.
+  const filterKey = `${degree}|${[...tiers].join()}|${[...rarities].join()}|${q}`;
+  const [lastKey, setLastKey] = useState(filterKey);
+  if (lastKey !== filterKey) { setLastKey(filterKey); setPages(1); }
+
+  const rows = list.slice(0, shown);
+  const left = list.length - rows.length;
+  const next = list[rows.length];
+  const sameTieLeft = next && rows.length && rows[rows.length - 1].score === next.score
+    ? list.slice(rows.length).filter((p) => p.score === next.score).length : 0;
+  const scoped = source === 'own';
+  // No 2nd degree (a CSV import, or nothing scanned yet): no degree or rarity to filter by.
+  const second = index.counts.degree[2] > 0;
+
+  // "All →" on Hidden giants: the table, narrowed to them.
+  const showHidden = () => { setDegree(2); setTiers(new Set(['S'])); setRarities(new Set(['only'])); setQuery(''); window.scrollTo(0, 0); };
+
+  const filters = (
+    <div style={{
+      display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 14, flexWrap: 'wrap', padding: isMobile ? '8px 10px' : '10px 12px',
+      border: `1px solid ${LINE}`, borderRadius: 12, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.025)', marginBottom: 14,
+    }}>
+      {second && (
+        <Group label="Degree" isMobile={isMobile}>
+          {[['all', 'All', index.total], [1, '1st', index.counts.degree[1]], [2, '2nd', index.counts.degree[2]]].map(([k, label, n]) => (
+            <Chip key={k} on={degree === k} onClick={() => setDegree(k)} count={n}>{label}</Chip>
+          ))}
+        </Group>
+      )}
+      <Group label="Tier" isMobile={isMobile}>
+        {TIERS.map((t) => (
+          <Chip key={t} on={tiers.has(t)} onClick={() => setTiers((s) => toggle(s, t))} count={index.counts.tiers[t]} title={`${t} tier`}>
+            <TierChip tier={t} size={16} />
+          </Chip>
+        ))}
+      </Group>
+      {second && (
+        <Group label="Rarity" isMobile={isMobile}>
+          {RARITY.map((r) => (
+            <Chip key={r.key} on={rarities.has(r.key)} onClick={() => setRarities((s) => toggle(s, r.key))} count={index.counts.rarity[r.key]}
+              title={`${r.label}: ${r.range} mutual connection${r.range === '1' ? '' : 's'}`}>
+              <i className="sd-dot-html" style={{ width: 7, height: 7, borderRadius: '50%', background: r.color, display: 'inline-block' }} />{r.label}
+            </Chip>
+          ))}
+        </Group>
+      )}
+      <input type="search" value={query} onChange={(e) => setQuery(e.target.value)} aria-label="Search a name, company, or who knows them"
+        placeholder="Search a name or company" style={{
+          marginLeft: isMobile ? 0 : 'auto', width: isMobile ? '100%' : 240, height: isMobile ? 40 : 32, padding: '0 12px', borderRadius: 8, outline: 'none',
+          fontSize: isMobile ? 16 : 12.5, color: 'var(--sd-fg-1, #fff)', border: `1px solid ${LINE}`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)',
+        }} />
+    </div>
+  );
+
+  return (
+    <>
+      <Hero title="The Power Index" isMobile={isMobile}>
+        {second
+          ? <>Everyone within two steps of you, ranked by power: <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{fmt(index.total)}</b> people, each once.</>
+          : <>Your connections, ranked by power: <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{fmt(index.total)}</b> people.{' '}
+            {source === 'csv' ? 'A CSV import has no circles, so the people one step further out aren’t here.' : 'Scan their circles to add the people one step further out.'}</>}
+      </Hero>
+      {filters}
+      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0,1fr) 370px', gap: 16, alignItems: 'start' }}>
+        <div style={{ border: `1px solid ${LINE}`, borderRadius: 14, background: CARD_BG, overflow: 'hidden', minWidth: 0 }}>
+          {!isMobile && (
+            <div style={{ display: 'grid', gridTemplateColumns: COLS, gap: 10, 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 }}>
+              <span>Rank</span><span>Person</span><span>Power</span><span>Way in</span><span>Rarity</span><span />
+            </div>
+          )}
+          {rows.length === 0 && (
+            <div style={{ padding: '28px 16px', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>Nobody matches these filters.</div>
+          )}
+          {rows.map((p, i) => {
+            const band = !filtering ? bandAt.get(i) : null;
+            return (
+              <div key={p.key}>
+                {band && <Band band={band} isMobile={isMobile} />}
+                <Row p={p} isMobile={isMobile} scoped={scoped} csv={source === 'csv'} asked={p.degree === 2 && hasRequest(p.row, requests)} />
+              </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: 8 }}>
+                {sameTieLeft ? `${fmt(sameTieLeft)} more at ${one(next.score)}, ${fmt(left)} in all` : `${fmt(left)} to go`}
+              </span>
+            </button>
+          )}
+          <Src style={{ padding: '10px 16px 14px', marginTop: 0 }}>{index.source}</Src>
+        </div>
+        <Rail data={data} heavy={heavy} open={open} source={source} onView={onView} onHidden={showHidden} isMobile={isMobile} net={net} />
+      </div>
+    </>
+  );
+}
+
+function Group({ label, children, isMobile }) {
+  // On a phone each group is one row that scrolls sideways, rather than four rows of chips.
+  return (
+    <div style={{ display: 'flex', gap: 5, alignItems: 'center', flexWrap: isMobile ? 'nowrap' : 'wrap', minWidth: 0, ...(isMobile ? { overflowX: 'auto', width: '100%', scrollbarWidth: 'none' } : null) }}>
+      <span style={{ fontSize: 10.5, color: 'var(--sd-fg-4, #6f7a88)', textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: 700, marginRight: 3 }}>{label}</span>
+      {children}
+    </div>
+  );
+}
+
+function Chip({ on, onClick, count, children, title }) {
+  return (
+    <button type="button" aria-pressed={on} onClick={onClick} title={title} style={{
+      fontSize: 12, padding: '4px 9px', borderRadius: 16, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5, whiteSpace: 'nowrap',
+      border: `1px solid ${on ? 'rgba(var(--sd-ink, 255, 255, 255), 0.55)' : LINE}`,
+      background: on ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+      color: on ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-2, #b8c4c4)', fontWeight: on ? 700 : 500,
+    }}>
+      {children}
+      {count != null && <small style={{ color: 'var(--sd-fg-4, #6f7a88)', fontSize: 11 }}>{fmt(count)}</small>}
+    </button>
+  );
+}
+
+/** A tie of many: how many share the score, and the working most of them share. */
+function Band({ band, isMobile }) {
+  const t = bandText(band);
+  const mixed = band.yours > 0 && band.yours < band.count;
+  return (
+    <div style={{
+      display: 'flex', alignItems: isMobile ? 'flex-start' : 'center', gap: 12, padding: isMobile ? '10px 12px' : '10px 16px',
+      background: 'linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,215,0,0.02))',
+      borderTop: '1px solid rgba(255,215,0,0.22)', borderBottom: '1px solid rgba(255,215,0,0.22)',
+    }}>
+      <span style={{ fontSize: 15, fontWeight: 800, color: 'var(--sd-gold, #FFD700)', fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>#{fmt(band.rank)}=</span>
+      <span style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #e9edf3)', lineHeight: 1.45 }}>
+        <b>{t.head}</b> {t.rest}{' '}
+        <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}>{mixed ? 'Yours first, then most ways in.' : band.yours ? 'All yours.' : 'Most ways in first.'}</span>
+      </span>
+    </div>
+  );
+}
+
+/** One person: rank, who, power, way in, rarity and what to do. */
+const Row = memo(function Row({ p, isMobile, scoped, csv, asked }) {
+  const rank = `#${fmt(p.rank)}${p.tied ? '=' : ''}`;
+  const podium = p.rank <= 5;
+  const power = (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0 }}>
+      <b style={{ fontSize: isMobile ? 16 : 17, fontWeight: 800, minWidth: 30, textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--sd-fg-1, #fff)' }}>{one(p.score)}</b>
+      <TierChip tier={p.tier} />
+      {!isMobile && p.boost > 0 && (
+        <span title="Added for a strong circle: their scanned circle holds many S and A people (lib/scoring.js bridge boost, up to +2)" style={{
+          fontSize: 10, fontWeight: 700, color: 'var(--sd-green, #00ff88)', background: 'rgba(0,255,136,0.08)', border: '1px solid rgba(0,255,136,0.28)',
+          padding: '1px 6px', borderRadius: 10, whiteSpace: 'nowrap',
+        }}>+{p.boost} circle</span>
+      )}
+    </span>
+  );
+  const way = <Way p={p} max={isMobile ? 1 : 2} csv={csv} />;
+  const rarity = p.degree === 1
+    ? <span style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', whiteSpace: 'nowrap' }}>Your connection</span>
+    : <RarityTag rarity={p.rarity} count={!isMobile} small={isMobile} />;
+  const action = <Action p={p} scoped={scoped} asked={asked} compact={isMobile} />;
+
+  if (isMobile) {
+    return (
+      <div style={{ display: 'grid', gridTemplateColumns: '40px minmax(0,1fr) 66px', columnGap: 8, rowGap: 6, padding: '10px 12px', borderBottom: `1px solid ${SOFT_LINE}` }}>
+        <span style={{ gridRow: '1 / span 2', paddingTop: 9, fontSize: 11.5, fontWeight: 700, color: podium ? 'var(--sd-gold, #FFD700)' : 'var(--sd-fg-3, #8b9a9a)', whiteSpace: 'nowrap' }}>{rank}</span>
+        <PersonCell row={p.row} size={32} chip={false} />
+        <span style={{ justifySelf: 'end' }}>{power}</span>
+        <div style={{ gridColumn: '2 / span 2', display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+          <span style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0, flex: 1, overflow: 'hidden', fontSize: 12, color: 'var(--sd-fg-2, #b8c4c4)' }}>{way}</span>
+          {p.degree === 2 && rarity}
+          {action}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: COLS, gap: 10, padding: '0 16px', alignItems: 'center', minHeight: 56, borderBottom: `1px solid ${SOFT_LINE}` }}>
+      <span style={{ fontSize: 13, fontWeight: 700, color: podium ? 'var(--sd-gold, #FFD700)' : 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums' }}>{rank}</span>
+      <PersonCell row={p.row} chip={false} />
+      {power}
+      <span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, fontSize: 12, color: 'var(--sd-fg-2, #b8c4c4)' }}>{way}</span>
+      <span style={{ minWidth: 0 }}>{rarity}</span>
+      <span style={{ justifySelf: 'end' }}>{action}</span>
+    </div>
+  );
+});
+
+/** Yours: their circle. 2nd degree: who of yours knows them, best first. */
+function Way({ p, max = 2, csv }) {
+  if (p.degree === 1) {
+    const c = p.circle;
+    // A CSV import has no circles to scan: the chip says enough.
+    if (csv) return <DegreeChip degree={1} />;
+    const text = c.state === 'scanned'
+      ? <span style={{ whiteSpace: 'nowrap' }}>Circle {fmt(c.size)} · <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{fmt(c.S + c.A)}</b> S+A</span>
+      : <span style={{ color: 'var(--sd-fg-4, #6f7a88)', fontSize: 11.5, whiteSpace: 'nowrap' }}>{c.state === 'hidden' ? 'Their list is hidden' : 'Circle not scanned'}</span>;
+    return <><DegreeChip degree={1} />{text}</>;
+  }
+  const named = p.routes.filter((r) => r.bridge);
+  const extra = p.routes.length - Math.min(max, named.length);
+  return (
+    <>
+      <DegreeChip degree={2} />
+      <span style={{ display: 'flex', gap: 8, minWidth: 0, overflow: 'hidden' }} title={p.routes.map((r) => (r.bridge ? r.bridge.name : 'a connection the app can’t name')).join('\n')}>
+        {named.slice(0, max).map((r) => (
+          <span key={r.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>
+            <Avatar person={r.bridge} size={18} tierColors={TIER_COLORS} />{shortName(r.bridge.name)}
+          </span>
+        ))}
+        {!named.length && <span style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', ...ELLIPSIS }}>a connection the app can’t name</span>}
+        {extra > 0 && <span style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', whiteSpace: 'nowrap' }}>+{fmt(extra)}</span>}
+      </span>
+    </>
+  );
+}
+
+function Action({ p, scoped, asked, compact }) {
+  if (p.degree === 2) return <AskButton row={p.row} bridgeId={p.routes[0]?.id ?? p.row.source_connection_id} asked={asked} compact={compact} canAuto={scoped} />;
+  if (p.circle.state === 'scanned') return <OpenCircle id={p.row.id} compact={compact} />;
+  if (p.circle.state === 'todo' && scoped) return <ScanCircle id={p.row.id} compact={compact} />;
+  return null;
+}

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

@@ -0,0 +1,156 @@
+'use client';
+
+// The cards beside the Power Index: Untapped, Kingmakers, Gatekeepers,
+// Hidden giants, Company power, How sure, and Richest?, the honest answer to
+// a question the app can't answer (it never sees money). Each card's top five,
+// and a link to its board.
+
+import { shortName } from '../../../lib/separation';
+import Avatar from '../Avatar';
+import { TIER_COLORS } from '../../../lib/themes';
+import { fmt, one, pc, Card, CardHead, MiniRow, TierChip, Src, NeedsCircles, ELLIPSIS } from './parts';
+
+export default function Rail({ data, heavy, open, source, onView, onHidden }) {
+  const { kings, gates, hidden, sure } = data;
+  const circles = kings.scanned > 0;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
+      {/* The four boards that read circles; with none scanned, one card says so once. */}
+      {!circles ? (
+        <Card>
+          <CardHead title="Kingmakers, Gatekeepers, Hidden giants, Untapped" sub="Who stands behind your connections, read from their circles" />
+          <NeedsCircles source={source} compact />
+        </Card>
+      ) : (
+        <>
+          <Untapped open={open} />
+
+          <Card>
+            <CardHead title="Kingmakers" sub="Most S and A people behind them" more="Board →" onMore={() => onView('kingmakers')} />
+            {kings.list.slice(0, 5).map((k, i) => (
+              <MiniRow key={k.row.id} first={i === 0} rank={i + 1} value={fmt(k.SA)} label="S+A behind"
+                left={<Who row={k.row} sub={<><TierChip tier={k.row.tier} size={15} /><span style={ELLIPSIS}>circle of {fmt(k.size)}</span></>} />} />
+            ))}
+          </Card>
+
+          <Card>
+            <CardHead title="Gatekeepers" sub={`S and A who reach you through one connection only. Top three: ${pc(gates.top3Share)} of your S and A reach.`}
+              more="Board →" onMore={() => onView('gatekeepers')} />
+            {gates.list.slice(0, 5).map((g, i) => (
+              <MiniRow key={g.row.id} first={i === 0} rank={i + 1} value={fmt(g.onlySA)} valueColor="var(--sd-green, #00ff88)" label="S+A only via them"
+                left={<Who row={g.row} sub={<><TierChip tier={g.row.tier} size={15} /><span style={ELLIPSIS}>circle of {fmt(g.size)}</span></>} />} />
+            ))}
+          </Card>
+
+          <Card>
+            <CardHead title={`Hidden giants · ${fmt(hidden.count)}`} sub="S-tier with one way in: the connection who knows them is the only door you have."
+              more={hidden.count ? 'All →' : null} onMore={onHidden} />
+            {hidden.count === 0 ? <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', padding: '2px 0 6px' }}>None yet: every S-tier person you can reach has two or more ways in.</div>
+              : hidden.list.slice(0, 4).map((h, i) => (
+                <MiniRow key={h.key} first={i === 0} value={one(h.score)} label={h.from === 'linkedin' ? '1 mutual (LinkedIn)' : '1 way in (scans)'}
+                  left={<Who row={h.row} sub={<span style={ELLIPSIS}>{[h.row.company, h.via ? `only via ${shortName(h.via.name)}` : 'only via a connection the app can’t name'].filter(Boolean).join(' · ')}</span>} />} />
+              ))}
+            {hidden.count > 0 && <Src>{fmt(hidden.fromLinkedIn)} from LinkedIn’s own mutual count, {fmt(hidden.fromScans)} from the ways in your scans saw, which can only go up.</Src>}
+          </Card>
+        </>
+      )}
+
+      <Card>
+        <CardHead title="Company power" sub="Everyone there now, power added up" more={heavy ? 'Board →' : null} onMore={() => onView('companies')} />
+        {!heavy ? <Counting /> : heavy.companies.list.slice(0, 5).map((c, i) => (
+          <MiniRow key={c.name} first={i === 0} rank={i + 1} value={fmt(Math.round(c.total))} label="total power"
+            left={<span style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+              <Logo name={c.name} />
+              <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+                <b style={{ fontSize: 12.5, fontWeight: 650, ...ELLIPSIS }}>{c.name}</b>
+                <span style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', ...ELLIPSIS }}>
+                  <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
+                </span>
+              </span>
+            </span>} />
+        ))}
+      </Card>
+
+      <Card>
+        <CardHead title="How sure" sub="How much of this ranking rests on a guess" />
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
+          <b style={{ fontSize: 26, fontWeight: 850, color: sure.share >= 50 ? 'var(--sd-orange, #FF6B35)' : 'var(--sd-fg-1, #fff)' }}>{pc(sure.share)}</b>
+          <span style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.4 }}>
+            of these scores lean on an estimate{sure.tie ? <>{sure.share >= 50 ? ', which is why' : '. At the top,'} <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{fmt(sure.tie.count)}</b> people share {one(sure.tie.score)}</> : null}.
+          </span>
+        </div>
+        <Src>{fmt(sure.company + sure.both)} with a company no list knows, {fmt(sure.title + sure.both)} with a title the app couldn’t read. Score the companies you know on the Scores tab and the top of the list separates.</Src>
+      </Card>
+
+      <Richest heavy={heavy} />
+    </div>
+  );
+}
+
+function Untapped({ open }) {
+  return (
+    <Card style={{ padding: '14px 16px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+        <b style={{ fontSize: 30, fontWeight: 850, color: 'var(--sd-orange, #FF6B35)', fontVariantNumeric: 'tabular-nums' }}>{fmt(open?.total)}</b>
+        <span style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.45 }}>
+          <b style={{ color: 'var(--sd-fg-1, #fff)' }}>Untapped:</b> S and A people in your 2nd degree with no request out. {fmt(open?.S)} of them S. Requests marked sent so far: {fmt(open?.asked)}.
+        </span>
+      </div>
+    </Card>
+  );
+}
+
+/** "Richest?": the app never sees money, and says so; power at big companies is what it can count. */
+function Richest({ heavy }) {
+  return (
+    <Card dashed>
+      <CardHead title="Richest?" />
+      <p style={{ fontSize: 12.5, color: 'var(--sd-fg-1, #e9edf3)', margin: '6px 0 8px', lineHeight: 1.5 }}>
+        Six Degrees doesn’t know anyone’s money. LinkedIn shows titles and companies, not wealth. The closest honest measure is
+        power: who runs the biggest companies you can reach.
+      </p>
+      {!heavy ? <Counting /> : (
+        <div style={{ display: 'flex', gap: 10 }}>
+          <Stat n={heavy.companies.big.people} text={`people whose score rests on a company scored 8 or more (Fortune 500 scale)${heavy.companies.big.people ? `, at ${fmt(heavy.companies.big.companies)} compan${heavy.companies.big.companies === 1 ? 'y' : 'ies'}` : ''}`} />
+          <Stat n={heavy.ladder.rungs.find((r) => r.key === 'csuite').total} text="C-suite and founders within two steps, by their headline" />
+        </div>
+      )}
+      <Src>{heavy ? heavy.companies.bigSource : null}</Src>
+    </Card>
+  );
+}
+
+function Stat({ n, text }) {
+  return (
+    <div style={{ flex: 1, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', borderRadius: 9, padding: '8px 10px', minWidth: 0 }}>
+      <b style={{ fontSize: 20, fontWeight: 800, display: 'block', fontVariantNumeric: 'tabular-nums' }}>{fmt(n)}</b>
+      <span style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.35, display: 'block' }}>{text}</span>
+    </div>
+  );
+}
+
+function Who({ row, sub }) {
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+      <Avatar person={row} size={26} tierColors={TIER_COLORS} />
+      <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <b style={{ fontSize: 12.5, fontWeight: 650, ...ELLIPSIS }}>{row.name}</b>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', minWidth: 0 }}>{sub}</span>
+      </span>
+    </span>
+  );
+}
+
+export function Logo({ name, size = 26 }) {
+  const letters = String(name || '').split(/\s+/).filter(Boolean).map((w) => w[0]).join('').slice(0, 2).toUpperCase();
+  return (
+    <span style={{
+      width: size, height: size, borderRadius: 7, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', flexShrink: 0,
+      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 800, color: 'var(--sd-fg-2, #b8c4c4)',
+    }}>{letters}</span>
+  );
+}
+
+function Counting() {
+  return <div style={{ fontSize: 12, color: 'var(--sd-fg-4, #6f7a88)', padding: '4px 0 6px' }}>Counting…</div>;
+}