six-degrees 0.3.0 → 0.4.0

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

@@ -0,0 +1,300 @@
+'use client';
+
+// Their circle, at the top of a profile card (Blake, 2026-09-28).
+//
+// The person in the middle; their scanned circle round them (D2); the people
+// in it you connected with ringed in green, with their own circles fanning out
+// behind them (D3), and so on out to D6. A request still out is a dotted dot.
+// Each dot is coloured by its tier. Rarity (lib/rarity.js) is a filter beside
+// the tier's rather than a mark on every dot (while it's counted from your
+// scans, most people read as rare, and a ring on nearly everything says
+// nothing): the two work together, so "S" and "Only way in" lights exactly the
+// rare finds in this circle and dims the rest. Tap the map for the large one,
+// where a dot opens that person's card.
+
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { circleIndex, circleRings, circleLayout, requestedByDefault } from '../../lib/circle';
+import { keyFor, routeIndex } from '../../lib/separation';
+import { RARITY, rarityOf, passes, countByRarity, toggle, rarityInfo } from '../../lib/rarity';
+import { scoreGuess } from '../../lib/score-guess';
+
+const CLASSIC = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIERS = ['S', 'A', 'B', 'C', 'D'];
+const GREEN = '#00ff88';
+
+export default function TheirCircle({ person, connections = [], degree2 = [], tierColors = CLASSIC, onSelect, isRequested = requestedByDefault, canScan = true }) {
+  const index = useMemo(() => circleIndex(connections, degree2), [connections, degree2]);
+  const ways = useMemo(() => routeIndex(degree2), [degree2]);
+  const { rings, totals } = useMemo(() => circleRings(person, index, { isRequested }), [person, index, isRequested]);
+  const [tiers, setTiers] = useState(() => new Set());
+  const [rarities, setRarities] = useState(() => new Set());
+  const [big, setBig] = useState(false);
+
+  // Each dot's tier and rarity. Your own connections have no rarity: you're
+  // already in.
+  const people = useMemo(() => rings.flatMap((ring) => ring.people.map((p) => {
+    const yours = p.state === 'connected' || p.row.degree === 1;
+    const r = yours ? null : rarityOf(p.row, ways.get(keyFor(p.row))?.size || 1);
+    return { key: p.key, tier: p.row.tier, rarity: r?.key ?? null, mutuals: r };
+  })), [rings, ways]);
+  const facts = useMemo(() => new Map(people.map((p) => [p.key, p])), [people]);
+  const filter = useMemo(() => ({ tiers, rarities }), [tiers, rarities]);
+  const shown = useMemo(() => people.filter((p) => passes(p, filter)).length, [people, filter]);
+
+  // How complete the ways-in count is: circles scanned out of your connections.
+  const scanned = useMemo(() => connections.filter((c) => index.circles.has(c.id)).length, [connections, index]);
+  const fromLinkedIn = people.some((p) => p.mutuals?.from === 'linkedin');
+  // A score the headline gave nothing to read for: say so, and point at the
+  // scan, which is what can firm it up (lib/score-guess.js).
+  const guess = useMemo(() => scoreGuess(person), [person]);
+
+  if (!person) return null;
+  // With the sample or a CSV import open there is no scan box below to point
+  // at (Sidebar.js says why in its place), so this only says what is known.
+  if (!rings.length) {
+    const first = person.name?.split(' ')[0] || 'them';
+    return (
+      <div style={guess ? { ...box, borderColor: 'rgba(255,215,0,0.28)' } : box}>
+        <Label>Their circle</Label>
+        {guess ? (
+          <>
+            <div style={{ fontSize: 11.5, color: '#d8ccb0', lineHeight: 1.5, marginBottom: canScan ? 9 : 0 }}>
+              <b style={{ color: '#FFD700' }}>Their score is a guess.</b> {guess.reason}
+              {canScan && <> Scanning {first}&apos;s circle shows who you can reach through them, and a strong
+                circle adds up to +2 to their score.</>}
+            </div>
+            {canScan && (
+              <button type="button" onClick={toScanBox} style={{
+                width: '100%', padding: '8px 10px', borderRadius: 8, cursor: 'pointer', fontSize: 12, fontWeight: 700,
+                border: '1px solid rgba(255,215,0,0.4)', background: 'rgba(255,215,0,0.08)', color: '#FFD700',
+              }}>
+                Scan their circle ↓
+              </button>
+            )}
+          </>
+        ) : canScan ? (
+          <div style={{ fontSize: 11, color: '#999', lineHeight: 1.5 }}>
+            Not scanned yet. Scan {first}&apos;s circle below to see who they know, and
+            everyone you reach through them after that.
+          </div>
+        ) : (
+          <div style={{ fontSize: 11, color: '#999', lineHeight: 1.5 }}>Not scanned.</div>
+        )}
+      </div>
+    );
+  }
+
+  const byTier = Object.fromEntries(TIERS.map((t) => [t, people.filter((p) => p.tier === t).length]));
+  const byRarity = countByRarity(people);
+  const filtering = tiers.size > 0 || rarities.size > 0;
+
+  const chips = (
+    <Filters
+      tierColors={tierColors} byTier={byTier} byRarity={byRarity}
+      tiers={tiers} rarities={rarities}
+      onTier={(t) => setTiers((s) => toggle(s, t))} onRarity={(r) => setRarities((s) => toggle(s, r))}
+      onClear={() => { setTiers(new Set()); setRarities(new Set()); }}
+    />
+  );
+  const note = (
+    <div style={{ fontSize: 9.5, color: '#777', lineHeight: 1.45, marginTop: 6 }}>
+      Rarity is how many mutual connections lead to someone. It never changes a score.{' '}
+      {fromLinkedIn
+        ? 'LinkedIn’s own count where a scan saved it; otherwise the ways in from your scans.'
+        : `Counted from the ${scanned} ${scanned === 1 ? 'circle' : 'circles'} you’ve scanned, so it can only go up as you scan more.`}
+    </div>
+  );
+
+  return (
+    <div style={box}>
+      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
+        <Label>Their circle</Label>
+        <button type="button" onClick={() => setBig(true)} style={linkButton} aria-label="Open the large map">
+          Enlarge ⤢
+        </button>
+      </div>
+      <button type="button" onClick={() => setBig(true)} aria-label={`${person.name}'s circle: open the large map`} style={{
+        display: 'block', width: '100%', padding: 0, border: 'none', background: 'none', cursor: 'zoom-in',
+      }}>
+        <RingMap person={person} rings={rings} facts={facts} filter={filter} tierColors={tierColors} size={240} />
+      </button>
+      <RingCounts rings={rings} totals={totals} shown={filtering ? shown : null} />
+      {chips}
+      {note}
+      {big && (
+        <Enlarged onClose={() => setBig(false)} title={`${person.name}’s circle`}>
+          <RingMap person={person} rings={rings} facts={facts} filter={filter} tierColors={tierColors} size={640} labels
+            onPick={(row) => { setBig(false); onSelect?.(row); }} />
+          <RingCounts rings={rings} totals={totals} shown={filtering ? shown : null} />
+          {chips}
+          <Legend />
+          {note}
+        </Enlarged>
+      )}
+    </div>
+  );
+}
+
+function RingMap({ person, rings, facts, filter, tierColors, size, labels = false, onPick }) {
+  const layout = useMemo(() => circleLayout(rings, size), [rings, size]);
+  const c = layout.center;
+  const k = size / 240;
+  return (
+    <svg viewBox={`0 0 ${size} ${size}`} width="100%" style={{ display: 'block', maxWidth: size, margin: '0 auto' }}
+      role="img" aria-label={`${person.name}'s circle, ${rings.length} ${rings.length === 1 ? 'ring' : 'rings'}`}>
+      {layout.rings.map((ring) => (
+        <g key={ring.degree}>
+          <circle cx={c.x} cy={c.y} r={ring.radius} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={0.6 * k} />
+          <text x={c.x} y={c.y - ring.radius - ring.dotR - 3 * k} textAnchor="middle" fontSize={6.5 * k} fill="#666" fontWeight={700}>
+            D{ring.degree}
+          </text>
+        </g>
+      ))}
+      {layout.spokes.map((s, i) => (
+        <line key={i} x1={s.x1} y1={s.y1} x2={s.x2} y2={s.y2} stroke="rgba(0,255,136,0.35)" strokeWidth={0.7 * k} />
+      ))}
+      {layout.rings.map((ring) => ring.items.map((it) => {
+        const f = facts.get(it.key);
+        const on = passes(f, filter);
+        const color = tierColors[it.row.tier] || '#888';
+        const r = it.state === 'connected' ? ring.dotR * 1.7 : ring.dotR;
+        const tip = [
+          `${it.row.name} · ${it.row.tier}-tier${it.row.power_score != null ? ` · ${Number(it.row.power_score).toFixed(1)}` : ''}`,
+          it.state === 'connected' ? 'You added them' : it.state === 'requested' ? 'Request sent' : null,
+          f?.mutuals ? `${rarityInfo(f.rarity)?.label}: ${f.mutuals.count} mutual${f.mutuals.count === 1 ? '' : 's'}${f.mutuals.from === 'scans' ? ' (from your scans)' : ''}` : null,
+        ].filter(Boolean).join('\n');
+        return (
+          <g key={it.key} opacity={on ? 1 : 0.12} style={onPick ? { cursor: 'pointer' } : undefined}
+            onClick={onPick ? (e) => { e.stopPropagation(); onPick(it.row); } : undefined}>
+            <title>{tip}</title>
+            {it.state === 'requested' ? (
+              <circle cx={it.x} cy={it.y} r={r * 1.25} fill="none" stroke={color} strokeWidth={Math.max(0.5, r * 0.45)}
+                strokeDasharray={`${Math.max(0.6, r * 0.55)} ${Math.max(0.5, r * 0.45)}`} />
+            ) : (
+              <circle cx={it.x} cy={it.y} r={r} fill={color}
+                stroke={it.state === 'connected' ? GREEN : 'none'} strokeWidth={Math.max(0.6, r * 0.3)} />
+            )}
+            {labels && it.state === 'connected' && (
+              <text x={it.x} y={it.y - r - 3} textAnchor="middle" fontSize={9} fill={GREEN} fontWeight={700}>
+                {String(it.row.name || '').split(' ')[0]}
+              </text>
+            )}
+          </g>
+        );
+      }))}
+      <circle cx={c.x} cy={c.y} r={7 * k} fill={tierColors[person.tier] || '#888'} stroke="#fff" strokeWidth={0.8 * k} />
+      <text x={c.x} y={c.y + 2.4 * k} textAnchor="middle" fontSize={6.5 * k} fontWeight={800} fill={person.tier === 'S' ? '#000' : '#fff'}>
+        {String(person.name || '?').charAt(0)}
+      </text>
+    </svg>
+  );
+}
+
+function RingCounts({ rings, totals, shown }) {
+  return (
+    <div style={{ fontSize: 10.5, color: '#aaa', marginTop: 6, lineHeight: 1.5 }}>
+      {rings.map((r) => `D${r.degree} ${r.people.length.toLocaleString('en-US')}`).join(' · ')}
+      {totals.connected > 0 && <span style={{ color: GREEN }}> · you added {totals.connected}</span>}
+      {totals.requested > 0 && <span style={{ color: '#FFD700' }}> · {totals.requested} {totals.requested === 1 ? 'request' : 'requests'} out</span>}
+      {shown != null && <span style={{ color: '#fff' }}> · {shown.toLocaleString('en-US')} shown</span>}
+    </div>
+  );
+}
+
+function Filters({ tierColors, byTier, byRarity, tiers, rarities, onTier, onRarity, onClear }) {
+  const chip = (on, color) => ({
+    height: 22, padding: '0 7px', borderRadius: 11, cursor: 'pointer', fontSize: 10, fontWeight: 700,
+    whiteSpace: 'nowrap', border: `1px solid ${on ? color : 'rgba(255,255,255,0.1)'}`,
+    background: on ? `${color}22` : 'rgba(255,255,255,0.03)', color: on ? color : '#999',
+  });
+  return (
+    <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
+        <span style={rowLabel}>Tier</span>
+        {TIERS.map((t) => (
+          <button key={t} type="button" aria-pressed={tiers.has(t)} onClick={() => onTier(t)} style={chip(tiers.has(t), tierColors[t] || '#888')}>
+            {t} <span style={{ fontWeight: 500, opacity: 0.8 }}>{byTier[t]}</span>
+          </button>
+        ))}
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
+        <span style={rowLabel}>Rarity</span>
+        {RARITY.map((r) => (
+          <button key={r.key} type="button" aria-pressed={rarities.has(r.key)} onClick={() => onRarity(r.key)}
+            title={`${r.label}: ${r.range} mutual connection${r.range === '1' ? '' : 's'}`} style={chip(rarities.has(r.key), r.color)}>
+            {r.label} <span style={{ fontWeight: 500, opacity: 0.8 }}>{byRarity[r.key]}</span>
+          </button>
+        ))}
+        {(tiers.size > 0 || rarities.size > 0) && (
+          <button type="button" onClick={onClear} style={linkButton}>Clear</button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Legend() {
+  const item = (swatch, text) => (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginRight: 12, whiteSpace: 'nowrap' }}>{swatch}{text}</span>
+  );
+  return (
+    <div style={{ fontSize: 10.5, color: '#999', marginTop: 8, lineHeight: 1.8 }}>
+      {item(<svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#FFD700" /></svg>, 'colour = tier')}
+      {item(<svg width="12" height="12"><circle cx="6" cy="6" r="4" fill="#9B59B6" stroke={GREEN} strokeWidth="1.5" /></svg>, 'you added them')}
+      {item(<svg width="12" height="12"><circle cx="6" cy="6" r="4.2" fill="none" stroke="#3498DB" strokeWidth="1.4" strokeDasharray="2 1.6" /></svg>, 'request sent')}
+    </div>
+  );
+}
+
+// Rendered into <body>, not the card: the side panel's backdrop blur makes it
+// the containing block for anything position: fixed inside it, so an overlay
+// there only ever covered the panel. Fixed, so it can't change the page's
+// size (TRAPS §29).
+function Enlarged({ title, onClose, children }) {
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+  return createPortal(
+    <div role="dialog" aria-modal="true" aria-label={title} onClick={onClose} style={{
+      position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(0,0,0,0.78)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
+    }}>
+      <div onClick={(e) => e.stopPropagation()} style={{
+        width: 'min(720px, 100%)', maxHeight: '100%', overflowY: 'auto', boxSizing: 'border-box',
+        background: '#0f0c05', border: '1px solid rgba(255,215,0,0.18)', borderRadius: 14, padding: 16,
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+          <div style={{ fontSize: 14, fontWeight: 800, color: '#fff' }}>{title}</div>
+          <button type="button" onClick={onClose} style={{ ...linkButton, fontSize: 12 }}>Close ✕</button>
+        </div>
+        <div style={{ fontSize: 10.5, color: '#888', marginBottom: 8 }}>Click a dot to open that person.</div>
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// The card's scan box (Sidebar.js CreateClusterCard, id "scan-box"): bring it
+// into view, flash it, and put the keyboard on its button.
+function toScanBox() {
+  const scanBox = document.getElementById('scan-box');
+  if (!scanBox) return;
+  scanBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  scanBox.animate?.([{ boxShadow: '0 0 0 3px rgba(255,215,0,0.75)' }, { boxShadow: '0 0 0 0 rgba(255,215,0,0)' }], { duration: 1600 });
+  scanBox.querySelector('button:not([disabled])')?.focus({ preventScroll: true });
+}
+
+function Label({ children }) {
+  return <div style={{ fontSize: 10, fontWeight: 700, color: '#FF6B35', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>{children}</div>;
+}
+
+const box = {
+  background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)',
+  borderRadius: 10, padding: 10, marginBottom: 16,
+};
+const rowLabel = { fontSize: 9, color: '#666', textTransform: 'uppercase', letterSpacing: 0.5, width: 38, flexShrink: 0 };
+const linkButton = { background: 'none', border: 'none', color: '#888', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: 0 };

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

@@ -0,0 +1,202 @@
+'use client';
+
+// The sector picks, wherever you choose your field: Scores → Your sector
+// (SectorSection.js) and the Scan page's question before the first scan
+// (app/components/FieldStep.js). Your picks so far, then a search box, or the
+// twelve broad industries, each opening to its narrower sectors from the
+// directory (lib/sector-directory.js). Up to three picks. It only picks:
+// saving is the page's (lib/settings-client.js).
+
+import { useMemo, useState } from 'react';
+import { Body, Btn, LINE } from '../ui';
+import { INDUSTRIES } from '../../../lib/companies';
+import { MAX_SECTORS } from '../../../lib/sector-focus';
+import { DIRECTORY, SECTOR_KEYS, sectorByKey } from '../../../lib/sector-directory';
+
+const plural = (n, one, many = `${one}s`) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+
+// Each industry's narrower sectors, in the directory's order.
+const SECTORS_OF = new Map(INDUSTRIES.map((g) => [g.key, DIRECTORY.filter((s) => s.group === g.key)]));
+const GROUP_OF = new Map(DIRECTORY.map((s) => [s.key, s.group]));
+// What the search box looks through: each sector's name, its words, jobs and
+// companies, as they read (without the list's "(s)" and "$" marks), so
+// "recruiter" finds HR & Recruiting.
+const SEARCHABLE = DIRECTORY.map((s) => ({
+  sector: s,
+  label: s.label.toLowerCase(),
+  words: [...s.words, ...(s.roles || []), ...(s.names || []), ...s.companies].map((w) => ` ${w.replace(/\(s\)$|\$$/, '').toLowerCase()}`),
+}));
+// A sector of work every company has (HR & Recruiting, Legal…) counts firms in
+// that line, not every company that employs someone doing it.
+const FUNCTION_TITLE = 'Counts firms in this line of work, not every company with someone in the job';
+
+/** Sectors (and whole industries) whose name has the query, or a word or company that starts with it. */
+function searchSectors(query) {
+  const q = query.trim().toLowerCase().replace(/\s+/g, ' ');
+  if (!q) return null;
+  return {
+    industries: INDUSTRIES.filter((g) => g.label.toLowerCase().includes(q)),
+    sectors: SEARCHABLE.filter((s) => s.label.includes(q) || s.words.some((w) => w.includes(` ${q}`))).map((s) => s.sector),
+  };
+}
+
+/**
+ * `sectors` are the picks (keys), `onChange(sectors)` gets the new list.
+ * `suggest` is "Suggested from your network" as Scores loads it
+ * (/api/settings/sector-suggestions); left out, there are none to show.
+ */
+export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
+  const [query, setQuery] = useState('');
+  // Industries shown open; those holding a pick start open.
+  const [open, setOpen] = useState(() => new Set(sectors.map((k) => GROUP_OF.get(k) || k)));
+
+  const results = useMemo(() => searchSectors(query), [query]);
+
+  function toggle(key) {
+    const on = sectors.includes(key);
+    if (!on && sectors.length >= MAX_SECTORS) return;
+    const next = on ? sectors.filter((k) => k !== key) : SECTOR_KEYS.filter((k) => k === key || sectors.includes(k));
+    // A sector picked from the suggestions or a search shows up in its industry too.
+    if (!on && GROUP_OF.has(key)) setOpen((was) => new Set(was).add(GROUP_OF.get(key)));
+    onChange(next);
+  }
+
+  function flip(group) {
+    setOpen((was) => {
+      const next = new Set(was);
+      if (next.has(group)) next.delete(group); else next.add(group);
+      return next;
+    });
+  }
+
+  const full = sectors.length >= MAX_SECTORS;
+  // One chip for any pick: an industry or a sector, wherever it's shown.
+  const chip = (key, label, { note, title } = {}) => {
+    const on = sectors.includes(key);
+    return (
+      <Chip key={key} color={sectorByKey(key).color} on={on} blocked={!on && full} disabled={disabled} title={title}
+        onClick={() => toggle(key)}>
+        {label}{note && <span style={{ fontWeight: 400, color: on ? '#dfe7e7' : '#8b9a9a' }}>{note}</span>}
+      </Chip>
+    );
+  };
+
+  return (
+    <>
+      <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
+        <span style={{ fontSize: 13, color: '#8b9a9a' }}>Your picks ({sectors.length} of {MAX_SECTORS}):</span>
+        {!sectors.length && <span style={{ fontSize: 13, color: '#667' }}>none yet</span>}
+        {sectors.map((k) => {
+          const s = sectorByKey(k);
+          return (
+            <button key={k} type="button" disabled={disabled} onClick={() => toggle(k)} aria-label={`Remove ${s.label}`}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, fontSize: 12.5,
+                fontWeight: 600, color: '#fff', background: `${s.color}33`, border: `1px solid ${s.color}`, cursor: 'pointer',
+              }}>
+              {s.label} <span aria-hidden="true" style={{ color: '#cfd8d8' }}>×</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {suggest && <Suggestions state={suggest} chip={chip} />}
+
+      <label htmlFor="sector-search" style={{ display: 'block', fontSize: 13, color: '#8b9a9a', margin: '16px 0 6px' }}>
+        Find a sector
+      </label>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <input id="sector-search" type="search" value={query} onChange={(e) => setQuery(e.target.value)}
+          placeholder="Try dentist, bakery or Stripe"
+          autoComplete="off" spellCheck={false}
+          style={{
+            flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 7, fontSize: 14, color: '#fff',
+            background: 'rgba(255,255,255,0.05)', border: LINE, outline: 'none',
+          }} />
+        {query && <Btn onClick={() => setQuery('')}>Clear</Btn>}
+      </div>
+
+      {results ? (
+        <div style={{ marginTop: 10 }} aria-live="polite">
+          {results.industries.length + results.sectors.length === 0 ? (
+            <Body style={{ fontSize: 12.5 }}>
+              Nothing in the list matches &ldquo;{query.trim()}&rdquo;. Try a job title, a kind of business or a company, or clear
+              the search and pick one of the twelve broad industries.
+            </Body>
+          ) : (
+            <div role="group" aria-label="Sectors that match your search" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+              {results.industries.map((g) => chip(g.key, g.label, { note: ' · the whole industry' }))}
+              {results.sectors.map((s) => chip(s.key, s.label, { title: s.kind === 'function' ? FUNCTION_TITLE : `In ${sectorByKey(s.group).label}` }))}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div style={{ marginTop: 10 }}>
+          {INDUSTRIES.map((g) => {
+            const inIndustry = SECTORS_OF.get(g.key);
+            const isOpen = open.has(g.key);
+            const inside = inIndustry.filter((s) => sectors.includes(s.key)).length;
+            return (
+              <div key={g.key} style={{ borderTop: LINE, padding: '8px 0' }}>
+                <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
+                  {chip(g.key, g.label, { title: 'The whole industry: companies its sectors place, or whose name or the well-known list says so' })}
+                  <button type="button" aria-expanded={isOpen} aria-controls={`sectors-${g.key}`} onClick={() => flip(g.key)}
+                    style={{
+                      padding: '4px 6px', fontSize: 12.5, color: inside ? '#9fd3ff' : '#8b9a9a', background: 'none', border: 'none',
+                      cursor: 'pointer',
+                    }}>
+                    {isOpen ? '▾' : '▸'} {plural(inIndustry.length, 'sector')}{inside ? ` · ${inside} picked` : ''}
+                  </button>
+                </div>
+                {isOpen && (
+                  <div id={`sectors-${g.key}`} role="group" aria-label={`Sectors in ${g.label}`}
+                    style={{ display: 'flex', flexWrap: 'wrap', gap: 8, margin: '8px 0 2px 14px' }}>
+                    {inIndustry.map((s) => chip(s.key, s.label, s.kind === 'function' ? { title: FUNCTION_TITLE } : undefined))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}
+
+/** A pick you can turn on and off: an industry or a sector, with its industry's colour. */
+function Chip({ color, on, blocked, disabled, title, onClick, children }) {
+  return (
+    <button type="button" aria-pressed={on} disabled={blocked || disabled} onClick={onClick}
+      title={blocked ? `Up to ${MAX_SECTORS} sectors. Turn one off first.` : title}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, maxWidth: '100%',
+        fontSize: 12.5, fontWeight: 600, textAlign: 'left', cursor: blocked ? 'not-allowed' : 'pointer',
+        color: on ? '#fff' : blocked ? '#556' : '#b8c4c4',
+        background: on ? `${color}33` : 'rgba(255,255,255,0.04)',
+        border: on ? `1px solid ${color}` : LINE,
+      }}>
+      <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, opacity: blocked ? 0.4 : 1, flexShrink: 0 }} />
+      <span>{children}</span>
+    </button>
+  );
+}
+
+/** "Suggested from your network": the directory's sectors most of your scanned people work in. */
+function Suggestions({ state, chip }) {
+  const note = { fontSize: 12.5, marginTop: 10 };
+  if (state.loading) return <Body style={note}>Looking through your network for suggestions…</Body>;
+  if (state.error) return <Body style={note}>Couldn&rsquo;t load suggestions ({state.error}). You can still pick below.</Body>;
+  if (!state.scored) return <Body style={note}>Suggestions appear here once you&rsquo;ve scanned your network.</Body>;
+  if (!state.list.length) return <Body style={note}>None of the list&rsquo;s sectors stands out among the people you&rsquo;ve scanned yet.</Body>;
+  return (
+    <div style={{ marginTop: 14 }}>
+      <div style={{ fontSize: 13, color: '#8b9a9a', marginBottom: 6 }}>Suggested from your network</div>
+      <div role="group" aria-label="Suggested from your network" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+        {state.list.map((s) => chip(s.key, s.label, {
+          note: `: ${plural(s.people, 'person', 'people')} at ${plural(s.companies, 'company', 'companies')}`,
+          title: `In ${sectorByKey(s.group).label}`,
+        }))}
+      </div>
+    </div>
+  );
+}