six-degrees 0.7.0 → 1.0.0

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

@@ -0,0 +1,382 @@
+'use client';
+
+// Insights → Report (mock-up C): the same numbers as the boards, as a page you
+// scroll, one section each: a big number, one line that says what it means,
+// a picture of it, and where it came from. Nothing here is computed apart
+// from lib/insights-board.js.
+
+import Link from 'next/link';
+import Avatar from '../Avatar';
+import { TIER_COLORS } from '../../../lib/themes';
+import { shortName } from '../../../lib/separation';
+import { RARITY } from '../../../lib/rarity';
+import { DECIDES } from '../../../lib/insights-board';
+import { fmt, one, pc, TierChip, Bars, NeedsCircles, LINE, CARD_BG, ELLIPSIS } from './parts';
+
+const TIERS = ['S', 'A', 'B', 'C', 'D'];
+const today = () => new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
+
+function Section({ id, no, big, bigStyle, head, lede, children, src, isMobile, last }) {
+  return (
+    <section id={id} style={{ padding: isMobile ? '34px 0 30px' : '44px 0 40px', borderBottom: last ? 'none' : `1px solid ${LINE}`, scrollMarginTop: 80 }}>
+      <div style={{ fontSize: 12, fontWeight: 800, color: 'var(--sd-fg-4, #6f7a88)', letterSpacing: 1.5, marginBottom: 8 }}>{String(no).padStart(2, '0')}</div>
+      <div style={{ fontSize: isMobile ? 56 : 84, lineHeight: 0.95, fontWeight: 850, letterSpacing: isMobile ? -2 : -3, fontVariantNumeric: 'tabular-nums', overflowWrap: 'anywhere', ...bigStyle }}>{big}</div>
+      <h2 style={{ fontSize: isMobile ? 21 : 26, lineHeight: 1.2, margin: '12px 0 8px', fontWeight: 750, letterSpacing: -0.4, maxWidth: 720, color: 'var(--sd-fg-1, #fff)' }}>{head}</h2>
+      {lede && <p style={{ fontSize: 15, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.55, margin: '0 0 20px', maxWidth: 700 }}>{lede}</p>}
+      {children}
+      {src && <div style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', marginTop: 16, lineHeight: 1.5, maxWidth: 760 }}>{src}</div>}
+    </section>
+  );
+}
+
+const W = ({ children }) => <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{children}</b>;
+const Key = ({ color, children }) => (
+  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
+    <i style={{ width: 9, height: 9, borderRadius: 3, background: color, display: 'inline-block' }} />{children}
+  </span>
+);
+
+/** A row of a bar chart: label, bar, number. */
+function BarRow({ label, parts, max, value, cols = '170px 1fr 64px', bold, isMobile }) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '118px 1fr 54px' : cols, gap: 12, alignItems: 'center', margin: '7px 0' }}>
+      <span style={{ fontSize: 13, color: bold ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-2, #b8c4c4)', fontWeight: bold ? 650 : 400, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, ...ELLIPSIS }}>{label}</span>
+      <Bars parts={parts} max={max} />
+      <b style={{ fontSize: 13.5, fontWeight: 750, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{value}</b>
+    </div>
+  );
+}
+
+const tierParts = (counts) => TIERS.map((t) => ({ value: counts[t] || 0, color: TIER_COLORS[t], ink: TIER_COLORS[t], label: t, title: `${fmt(counts[t])} ${t}` }));
+
+export default function Report({ data, heavy, open, net, source, isMobile }) {
+  const { reach, kings, gates, hidden, grid, cover, sure } = data;
+  const circles = kings.scanned > 0;
+  const own = source === 'own';
+  const S = reach.tiers.d1.S + reach.tiers.d2.S;
+  const A = reach.tiers.d1.A + reach.tiers.d2.A;
+  const k0 = kings.list[0];
+  const g0 = gates.list[0];
+  const toc = [
+    ['reach', 'Reach'], ['power', 'Power'], ['titles', 'Titles'],
+    ...(circles ? [['kingmakers', 'Kingmakers'], ['gatekeepers', 'Gatekeepers'], ['hidden', 'Hidden giants'], ['untapped', 'Untapped']] : [['kingmakers', 'Circles']]),
+    ['companies', 'Company power'], ['richest', 'Richest?'], ['sure', 'How sure'], ['left', 'What’s left'],
+  ];
+  const sec = { isMobile };
+  // Sections are numbered as they're shown: with no circles, one section stands in for the four that read them.
+  let count = 0;
+  const no = () => ++count;
+  return (
+    <div>
+      {/* ── Cover ── */}
+      <div style={{ padding: isMobile ? '24px 0 24px' : '30px 0 30px', borderBottom: `1px solid ${LINE}` }}>
+        <div style={{ fontSize: 12, letterSpacing: 1.6, textTransform: 'uppercase', color: 'var(--sd-fg-3, #8b9a9a)', fontWeight: 700 }}>Network report · {today()}</div>
+        <h1 style={{ fontSize: isMobile ? 40 : 58, lineHeight: 1.02, margin: '12px 0', fontWeight: 850, letterSpacing: isMobile ? -1 : -1.5, color: 'var(--sd-fg-1, #fff)' }}>
+          Your network,<br />
+          <em style={{ fontStyle: 'normal', background: 'linear-gradient(135deg, var(--sd-gold, #FFD700), var(--sd-orange, #FF6B35) 55%, var(--sd-purple, #9B59B6))', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>by power.</em>
+        </h1>
+        <p style={{ fontSize: 16, color: 'var(--sd-fg-2, #b8c4c4)', margin: 0, lineHeight: 1.5, maxWidth: 620 }}>
+          {source === 'csv'
+            ? <>What your {fmt(reach.d1)} connections add up to: where the power is, and what a scan of their circles would open.</>
+            : <>What your {fmt(reach.d1)} connections and the {fmt(reach.circles)} circle{reach.circles === 1 ? '' : 's'} you’ve scanned add up to: where the power is, who holds the doors, and what’s still closed.</>}
+        </p>
+        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 12, marginTop: 28 }}>
+          <CoverStat n={reach.total} label={circles ? 'people within two steps' : 'connections'} />
+          <CoverStat n={S} label="S-tier in reach" color={TIER_COLORS.S} />
+          {circles
+            ? <CoverStat n={open?.total} label="S and A not asked" color="var(--sd-orange, #FF6B35)" />
+            : <CoverStat n={heavy ? heavy.companies.count : null} label="companies they work at" />}
+          <CoverStat n={reach.circles} label={`circle${reach.circles === 1 ? '' : 's'} scanned of ${fmt(reach.d1)}`} />
+        </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 24 }}>
+          {toc.map(([id, label]) => (
+            <a key={id} href={`#${id}`} style={{ fontSize: 12, color: 'var(--sd-fg-2, #b8c4c4)', padding: '5px 10px', borderRadius: 16, border: `1px solid ${LINE}`, background: CARD_BG, textDecoration: 'none' }}>{label}</a>
+          ))}
+        </div>
+      </div>
+
+      {/* ── 01 Reach ── */}
+      <Section id="reach" no={no()} {...sec} big={fmt(reach.total)} head={circles ? 'people within two steps of you.' : 'connections, and no circles yet.'}
+        lede={circles
+          ? <>Your {fmt(reach.d1)} connections, and everyone in the {fmt(reach.circles)} circle{reach.circles === 1 ? '' : 's'} you’ve scanned so far. Each circle added about <W>{fmt(cover.perCircle)}</W> people you didn’t already reach.</>
+          : source === 'csv'
+            ? 'A CSV import is your connections only: LinkedIn’s export has no circles. A scan of their circles adds the people one step further out.'
+            : <>Your {fmt(reach.d1)} connections. Their circles add the people one step further out, once they’re scanned.</>}
+        src={`${reach.source}${reach.sharedRows ? ` ${fmt(reach.sharedRows)} times, someone turned up in another circle as well; they count once here.` : ''}`}>
+        <div style={{ display: 'flex', gap: 2, height: 22, borderRadius: 6, overflow: 'hidden' }}>
+          <span style={{ width: `${(100 * reach.d1) / Math.max(1, reach.total)}%`, background: 'var(--sd-green, #00ff88)' }} />
+          <span style={{ width: `${(100 * reach.d2) / Math.max(1, reach.total)}%`, background: 'var(--sd-orange, #FF6B35)' }} />
+        </div>
+        <div style={{ display: 'flex', gap: 22, marginTop: 10, fontSize: 13, color: 'var(--sd-fg-2, #b8c4c4)', flexWrap: 'wrap' }}>
+          <Key color="var(--sd-green, #00ff88)"><W>{fmt(reach.d1)}</W> your connections</Key>
+          {circles && <Key color="var(--sd-orange, #FF6B35)"><W>{fmt(reach.d2)}</W> in the circles you’ve scanned</Key>}
+          {reach.d3 > 0 && <Key color="var(--sd-fg-5, #556)"><W>{fmt(reach.d3)}</W> more from company scans, not counted here</Key>}
+        </div>
+      </Section>
+
+      {/* ── 02 Power ── */}
+      <Section id="power" no={no()} {...sec} big={fmt(S)} bigStyle={{ color: TIER_COLORS.S }}
+        head={reach.tiers.d2.S > reach.tiers.d1.S ? 'of them are S-tier, and most sit one step out.' : 'of them are S-tier.'}
+        lede={circles
+          ? <><W>{fmt(reach.tiers.d2.S)}</W> S-tier people are in your 2nd degree against <W>{fmt(reach.tiers.d1.S)}</W> among your own connections. Another {fmt(A)} are A.</>
+          : <>That’s {pc((100 * reach.tiers.d1.S) / Math.max(1, reach.d1))} of your {fmt(reach.d1)} connections. Another {fmt(A)} are A.</>}
+        src="Tiers as Scores → Tiers sets them: on your network’s curve unless you chose the fixed scale. A tier is a statement about network position, not human worth.">
+        <BarRow {...sec} label="Your connections" parts={tierParts(reach.tiers.d1)} value={`${fmt(reach.tiers.d1.S)} S`} cols="150px 1fr 80px" />
+        {circles && <BarRow {...sec} label="Your 2nd degree" parts={tierParts(reach.tiers.d2)} value={`${fmt(reach.tiers.d2.S)} S`} cols="150px 1fr 80px" />}
+      </Section>
+
+      {/* ── 03 Titles ── */}
+      <Section id="titles" no={no()} {...sec} big={heavy ? fmt(heavy.ladder.decide) : '…'}
+        head={heavy && heavy.ladder.rungs.find((r) => r.key === 'owner').total ? 'run something: C-suite, founders, owners and VPs.' : 'run something: C-suite, founders and VPs.'}
+        lede={heavy ? (() => {
+          const r = Object.fromEntries(heavy.ladder.rungs.map((x) => [x.key, x]));
+          return <>{fmt(r.csuite.total)} C-suite and founders, {fmt(r.vp.total)} VPs, partners and GMs{r.owner.total ? `, ${fmt(r.owner.total)} owners` : ''}. {fmt(heavy.ladder.decideYours)} of them are already your connections.</>;
+        })() : 'Reading every headline…'}
+        src={heavy?.ladder.source}>
+        {heavy && (() => {
+          const rungs = heavy.ladder.rungs.filter((r) => r.total);
+          const max = Math.max(1, ...rungs.map((r) => r.total));
+          return rungs.map((r) => {
+            const top = DECIDES.includes(r.key);
+            return <BarRow key={r.key} {...sec} label={r.label} bold={top} max={max} value={fmt(r.total)}
+              parts={[{ value: r.total, color: top ? 'var(--sd-fg-1, #e8ecf2)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.4)' }]} />;
+          });
+        })()}
+      </Section>
+
+      {/* ── Kingmakers, Gatekeepers, Hidden giants and Untapped read circles; with none, one section says so ── */}
+      {!circles ? (
+        <Section id="kingmakers" no={no()} {...sec} big="No circles" bigStyle={{ fontSize: isMobile ? 40 : 56, letterSpacing: -1.5, color: 'var(--sd-fg-3, #8b9a9a)' }}
+          head="Kingmakers, Gatekeepers, Hidden giants and Untapped read your connections’ circles.">
+          <NeedsCircles source={source} />
+        </Section>
+      ) : (<>
+      {/* ── Kingmakers ── */}
+      <Section id="kingmakers" no={no()} {...sec} big={fmt(k0.SA)} bigStyle={{ color: TIER_COLORS.S }}
+        head={<>S and A people sit behind {k0.row.name}. Your biggest door is {k0.row.tier}-tier.</>}
+        lede={<>{k0.row.name}’s circle holds {fmt(k0.S)} S and {fmt(k0.A)} A, of {fmt(k0.size)} people. A title says what someone holds; a circle says what they can open.</>}
+        src={`${kings.source} A strong circle adds up to 2 to someone’s own score.`}>
+          <>
+            {kings.list.slice(0, 6).map((k) => (
+              <BarRow key={k.row.id} {...sec} cols="230px 1fr 50px" max={k0.SA} value={fmt(k.SA)}
+                label={<><Avatar person={k.row} size={22} tierColors={TIER_COLORS} /><span style={ELLIPSIS}>{k.row.name}</span><TierChip tier={k.row.tier} size={16} /></>}
+                parts={[{ value: k.S, color: TIER_COLORS.S, ink: TIER_COLORS.S, label: 'S' }, { value: k.A, color: TIER_COLORS.A, ink: TIER_COLORS.A, label: 'A' }]} />
+            ))}
+            <div style={{ display: 'flex', gap: 16, fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 10 }}>
+              <Key color={TIER_COLORS.S}>S behind them</Key><Key color={TIER_COLORS.A}>A behind them</Key>
+            </div>
+          </>
+      </Section>
+
+      {/* ── Gatekeepers ── */}
+      <Section id="gatekeepers" no={no()} {...sec} big={pc(gates.onlyShare)} bigStyle={{ color: 'var(--sd-green, #00ff88)' }}
+        head="of the S and A people you can reach have one way in."
+        lede={g0 ? <>Your reach hangs on a few people. Three connections carry <W>{pc(gates.top3Share)}</W> of it, and if {g0.row.name} disappeared from LinkedIn tomorrow, <W>{fmt(g0.onlySA)}</W> S and A people would drop off your map.</> : null}
+        src={gates.source}>
+          <>
+            <div style={{ display: 'flex', gap: 2, height: 34, borderRadius: 8, overflow: 'hidden' }}>
+              {gates.top3.map((g, i) => (
+                <span key={g.row.id} 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)}</em>
+                </span>
+              ))}
+              <span style={{ flex: 1, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', display: 'flex', alignItems: 'center', paddingLeft: 10 }}>
+                <em style={{ fontStyle: 'normal', fontSize: 12, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>{fmt(Math.max(0, gates.list.length - 3))} others</em>
+              </span>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 10, marginTop: 14 }}>
+              {gates.list.slice(0, 3).map((g) => (
+                <div key={g.row.id} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '10px 12px', border: `1px solid ${LINE}`, borderRadius: 10, background: CARD_BG, fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.35 }}>
+                  <Avatar person={g.row} size={30} tierColors={TIER_COLORS} />
+                  <span><b style={{ color: 'var(--sd-green, #00ff88)', fontSize: 16 }}>{fmt(g.onlySA)}</b> S and A only through <W>{g.row.name}</W></span>
+                </div>
+              ))}
+            </div>
+          </>
+      </Section>
+
+      {/* ── Hidden giants ── */}
+      <Section id="hidden" no={no()} {...sec} big={fmt(hidden.count)} bigStyle={{ color: 'var(--sd-cyan, #00E5FF)' }}
+        head="hidden giants: S-tier, one way in." lede="The connection who knows them is the only door you have."
+        src={hidden.source}>
+          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 10 }}>
+            {hidden.list.slice(0, 6).map((h) => (
+              <div key={h.key} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 14px', border: `1px solid ${LINE}`, borderRadius: 12, background: CARD_BG, minWidth: 0 }}>
+                <Avatar person={h.row} size={36} tierColors={TIER_COLORS} />
+                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  <b style={{ fontSize: 14, ...ELLIPSIS }}>{h.row.name}</b>
+                  <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', ...ELLIPSIS }}>{h.row.company || h.row.headline}</span>
+                  <span style={{ fontSize: 11.5, color: 'var(--sd-fg-2, #b8c4c4)', ...ELLIPSIS }}>
+                    only via {h.via ? h.via.name : 'a connection the app can’t name'} · {h.from === 'linkedin' ? '1 mutual connection (LinkedIn)' : '1 way in (your scans)'}
+                  </span>
+                </div>
+                <em style={{ fontStyle: 'normal', fontWeight: 800, fontSize: 17, color: TIER_COLORS.S }}>{one(h.score)}</em>
+              </div>
+            ))}
+          </div>
+      </Section>
+
+      {/* ── Untapped ── */}
+      <Section id="untapped" no={no()} {...sec} big={fmt(open?.total)} bigStyle={{ color: 'var(--sd-orange, #FF6B35)' }}
+        head={open?.askedSA === 0 ? 'S and A people you haven’t asked. That’s all of them.' : 'S and A people you haven’t asked.'}
+        lede={<><W>{fmt(grid.grid.S.warm)}</W> of the S-tier are warm, with 31 or more mutual connections: the easiest asks you have. <W>{fmt(grid.grid.S.only)}</W> are the hidden giants above.</>}
+        src={`${open?.source} ${grid.source}`}>
+        <RarityGrid grid={grid.grid} isMobile={isMobile} />
+      </Section>
+      </>)}
+
+      {/* ── 08 Company power ── */}
+      <Section id="companies" no={no()} {...sec} big={heavy?.companies.list[0]?.name || '…'} bigStyle={{ fontSize: isMobile ? 38 : 56, letterSpacing: -1.5, color: 'var(--sd-fg-1, #fff)' }}
+        head="holds the most power you can reach."
+        lede={heavy?.companies.list[0] ? (() => {
+          const c = heavy.companies.list[0];
+          const ind = heavy.industries.list[0];
+          return <>{fmt(c.people)} people work there, {fmt(c.S)} of them S-tier, with <W>{fmt(c.waysIn)}</W> way{c.waysIn === 1 ? '' : 's'} in.{ind ? <> By industry, <W>{ind.label}</W> holds {pc(ind.share)} of your S and A.</> : null}</>;
+        })() : null}
+        src={heavy ? `${heavy.companies.source} ${heavy.industries.source}` : null}>
+        {heavy && (() => {
+          const cos = heavy.companies.list.slice(0, 5);
+          const max = cos[0]?.total || 1;
+          return (
+            <>
+              {cos.map((c) => (
+                <BarRow key={c.name} {...sec} cols="190px 1fr 64px" max={max} value={fmt(Math.round(c.total))} label={c.name}
+                  parts={[{ value: c.total, color: 'var(--sd-gold, #FFD700)', title: `${fmt(c.S)} S, ${fmt(c.people)} people` }]} />
+              ))}
+              <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap', marginTop: 14, fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)' }}>
+                {heavy.industries.list.slice(0, 4).map((e) => <Key key={e.key} color={e.color}>{e.label} <W>{pc(e.share)}</W></Key>)}
+              </div>
+            </>
+          );
+        })()}
+      </Section>
+
+      {/* ── 09 Richest? ── */}
+      <Section id="richest" no={no()} {...sec} big="Richest?" bigStyle={{ fontSize: isMobile ? 40 : 56, letterSpacing: -1.5, color: 'var(--sd-gold, #FFD700)' }}
+        head="The app can’t know, and won’t guess."
+        lede="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."
+        src={heavy?.companies.bigSource}>
+        <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 18px', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {['Net worth', 'Pay', 'Company revenue', 'Funding raised'].map((x) => (
+            <li key={x} style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', padding: '5px 10px', borderRadius: 16, border: '1px solid rgba(255,80,80,0.3)', background: 'rgba(255,80,80,0.05)', textDecoration: 'line-through' }}>{x}</li>
+          ))}
+        </ul>
+        {heavy && (
+          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 10 }}>
+            <Dashed n={heavy.companies.big.people} text="people whose score rests on a company scored 8 or more, Fortune 500 scale" />
+            <Dashed n={heavy.ladder.rungs.find((r) => r.key === 'csuite').total} text="C-suite and founders within two steps, by their headline" />
+            <Dashed n={data.index.people.filter((p) => p.score >= 8).length} text="people at 8 power or more" />
+          </div>
+        )}
+      </Section>
+
+      {/* ── 10 How sure ── */}
+      <Section id="sure" no={no()} {...sec} big={pc(sure.share)} bigStyle={{ color: sure.share >= 50 ? 'var(--sd-orange, #FF6B35)' : 'var(--sd-fg-1, #fff)' }}
+        head="of these scores lean on an estimate."
+        lede={heavy ? <>{fmt(heavy.companies.estimated)} of {fmt(heavy.companies.count)} companies here are ones no list knows and you haven’t scored, so they score from how many of your people work there.{sure.tie ? <> {sure.share >= 50 ? 'That’s why' : 'At the top,'} <W>{fmt(sure.tie.count)}</W> people tie at {one(sure.tie.score)}.</> : null} Score the companies you know on the Scores tab and the top of every list separates.</> : null}
+        src={sure.source}>
+        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 10 }}>
+          <Plain n={heavy ? heavy.companies.estimated : null} text={`compan${heavy?.companies.estimated === 1 ? 'y' : 'ies'} estimated`} />
+          <Plain n={sure.title + sure.both} text="titles the app couldn’t read" />
+          <Plain n={sure.tie?.count ?? 0} text={sure.tie ? `people tied at ${one(sure.tie.score)}, the top tie` : 'no big tie at the top'} />
+        </div>
+      </Section>
+
+      {/* ── 11 What's left ── */}
+      <Section id="left" no={no()} {...sec} last big={fmt(cover.todoS)} bigStyle={{ color: TIER_COLORS.S }}
+        head={`S-tier circle${cover.todoS === 1 ? ' is' : 's are'} still closed.`}
+        lede={source === 'csv'
+          ? 'A CSV import is your connections only. Scanning your own network opens their circles.'
+          : <>You’ve scanned {fmt(cover.scanned)} of {fmt(cover.total)} circles, {fmt(cover.byTier.S.scanned)} of them S-tier{cover.hidden ? `, and ${fmt(cover.hidden)} keep their list hidden` : ''}. {cover.strongest.length ? <>The next {cover.strongest.length === 1 ? 'strongest is' : `${cover.strongest.length} strongest are`} below: up to {fmt(cover.nextSearches)} searches, about {fmt(cover.nextDays)} day{cover.nextDays === 1 ? '' : 's'} at {fmt(cover.daily)} a day.</> : null}</>}
+        src={source === 'csv' ? null : <>{cover.source} Lists read to the end: {fmt(cover.lists.full)}; stopped partway: {fmt(cover.lists.partial)}; not recorded: {fmt(cover.lists.unknown)}.</>}>
+        {TIERS.map((t) => {
+          const c = cover.byTier[t];
+          return (
+            <div key={t} style={{ display: 'grid', gridTemplateColumns: '30px 1fr 90px', gap: 12, alignItems: 'center', margin: '5px 0' }}>
+              <TierChip tier={t} />
+              <Bars max={c.total || 1} height={12} parts={[{ value: c.scanned, color: TIER_COLORS[t] }, { value: c.hidden, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.25)' }]} />
+              <span style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}><W>{fmt(c.scanned)}</W> of {fmt(c.total)}</span>
+            </div>
+          );
+        })}
+        {cover.strongest.length > 0 && source !== 'csv' && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
+            {cover.strongest.map((p) => {
+              const chip = <><Avatar person={p} size={22} tierColors={TIER_COLORS} />{p.name}<span style={{ color: 'var(--sd-fg-4, #6f7a88)' }}>{one(p.power_score)}</span></>;
+              const style = { display: 'inline-flex', gap: 7, alignItems: 'center', fontSize: 12.5, padding: '5px 11px 5px 5px', borderRadius: 18, border: `1px solid ${LINE}`, background: CARD_BG, color: 'var(--sd-fg-1, #fff)', textDecoration: 'none' };
+              return own
+                ? <Link key={p.id} href={`/setup?scan=${encodeURIComponent(p.id)}`} title={`Scan ${p.name}’s circle: opens the Scan page to confirm`} style={style}>{chip}</Link>
+                : <span key={p.id} style={style}>{chip}</span>;
+            })}
+          </div>
+        )}
+        {own && (
+          <Link href="/setup" style={{ display: 'inline-flex', fontSize: 13, fontWeight: 750, color: '#000', background: 'linear-gradient(135deg, #00ff88, #1abc9c)', padding: '8px 14px', borderRadius: 8, marginTop: 16, textDecoration: 'none' }}>
+            Open Scan →
+          </Link>
+        )}
+      </Section>
+    </div>
+  );
+}
+
+function CoverStat({ n, label, color }) {
+  return (
+    <div style={{ borderLeft: `2px solid ${LINE}`, padding: '2px 0 2px 14px' }}>
+      <b style={{ display: 'block', fontSize: 30, fontWeight: 800, color: color || 'var(--sd-fg-1, #fff)', fontVariantNumeric: 'tabular-nums' }}>{n == null ? 'None' : fmt(n)}</b>
+      <span style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)' }}>{label}</span>
+    </div>
+  );
+}
+
+function Dashed({ n, text }) {
+  return (
+    <div style={{ padding: 14, border: '1px dashed rgba(255,215,0,0.35)', borderRadius: 12, background: 'rgba(255,215,0,0.035)' }}>
+      <b style={{ fontSize: 28, fontWeight: 800, display: 'block', fontVariantNumeric: 'tabular-nums' }}>{fmt(n)}</b>
+      <span style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.4, display: 'block', marginTop: 2 }}>{text}</span>
+    </div>
+  );
+}
+
+function Plain({ n, text }) {
+  return (
+    <div style={{ padding: 14, border: `1px solid ${LINE}`, borderRadius: 12, background: CARD_BG }}>
+      <b style={{ fontSize: 26, fontWeight: 800, display: 'block', fontVariantNumeric: 'tabular-nums' }}>{n == null ? '…' : fmt(n)}</b>
+      <span style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.4 }}>{text}</span>
+    </div>
+  );
+}
+
+/** S and A by rarity: the cells shaded by how many, the hidden giants and the warm S marked. */
+function RarityGrid({ grid, isMobile }) {
+  const max = Math.max(1, ...['S', 'A'].flatMap((t) => RARITY.map((r) => grid[t][r.key])));
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: `34px repeat(5, minmax(0, 1fr))`, gap: 4 }}>
+      <div />
+      {RARITY.map((r) => (
+        <div key={r.key} style={{ fontSize: isMobile ? 10 : 11.5, color: 'var(--sd-fg-3, #8b9a9a)', textAlign: 'center', paddingBottom: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
+          <i className="sd-dot-html" style={{ width: 8, height: 8, borderRadius: '50%', background: r.color, flexShrink: 0 }} />{isMobile ? r.range : r.label}
+        </div>
+      ))}
+      {['S', 'A'].map((t) => (
+        <div key={t} style={{ display: 'contents' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}><TierChip tier={t} /></div>
+          {RARITY.map((r) => {
+            const v = grid[t][r.key];
+            const hot = t === 'S' && r.key === 'only';
+            const warm = t === 'S' && r.key === 'warm';
+            return (
+              <div key={r.key} title={`${fmt(v)} ${t}-tier, ${r.label.toLowerCase()} (${r.range} mutual)`} style={{
+                height: 44, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
+                background: `rgba(0, 229, 255, ${(0.06 + 0.45 * Math.sqrt(v / max)).toFixed(3)})`, color: 'var(--sd-fg-1, #eaf6f8)',
+                // An outline, not a shadow: Analyst takes every shadow off, and these mark the hidden giants and the warm S.
+                outline: hot ? `2px solid ${TIER_COLORS.S}` : warm ? '2px solid #FF7043' : 'none', outlineOffset: -2,
+              }}>{fmt(v)}</div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+

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>
+  );
+}