six-degrees 0.4.10 → 0.5.0

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

@@ -0,0 +1,308 @@
+'use client';
+
+// Paths → People: the Paths map with people in place of companies (Blake,
+// 2026-10-02, mock-up 3b). One bubble per connection of yours, sized by the
+// cluster behind them, coloured by their sector and grouped like the company
+// map; a white centre for the share of their cluster you can only reach
+// through them, a gold ring for the S tier inside, and a line between two
+// connections whose clusters share people. Point at one for their numbers;
+// click to open their cluster in Bridge Chains.
+//
+// Laid out once per filter change and drawn as plain SVG, as the company map
+// is (TRAPS §29). The numbers come from lib/people-map.js.
+
+import { useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from 'd3';
+import { peopleMap } from '../../lib/people-map';
+import { companyOf, industryOf, industryByKey, INDUSTRIES, UNKNOWN_INDUSTRY } from '../../lib/companies';
+import { jitter, Seg, useSize, SidePanel, panelHeading } from './PathsAnalyzer';
+import { TierGrid } from './FilterPanel';
+import { useLivePhysics, HeatDefs, HeatGlow, PHYSICS_OFF } from './MapControls';
+import { makeGrid, shows, gridCounts } from '../../lib/tier-grid';
+import { heatBy, heatColour } from '../../lib/galaxy-lab';
+import { clusterStrength } from '../../lib/map-heat';
+
+const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const LINE = '1px solid rgba(255,255,255,0.1)';
+const UNSCANNED = '#3a3f55';
+const MAX_BUBBLES = 400;
+const ALL_INDUSTRIES = [...INDUSTRIES, UNKNOWN_INDUSTRY];
+const fmt = (n) => Number(n || 0).toLocaleString('en-US');
+
+// What a bubble's size follows.
+const SIZE_BY = {
+  value: { label: 'Cluster value', of: (p) => p.value, k: 2 },
+  size: { label: 'Cluster size', of: (p) => p.size, k: 2.6 },
+  s: { label: 'S tier inside', of: (p) => p.S, k: 6 },
+};
+
+/**
+ * `top` (Paths' "Bubbles are" switch), `look` (its Colour and Physics) and the
+ * `colourBy` and `physics` they set come from PathsAnalyzer, shared with the company map.
+ */
+export default function PeopleMap({ d1 = [], d2 = [], top = null, look = null, colourBy = 'sector', physics = PHYSICS_OFF }) {
+  const router = useRouter();
+  const [sizeBy, setSizeBy] = useState('value');
+  const [who, setWho] = useState('scanned');          // 'scanned' | 'all'
+  // Their own tier, on the same grid as Network Circle; everyone here is 1st degree.
+  const [grid, setGrid] = useState(() => makeGrid([1]));
+  const [hidden, setHidden] = useState(() => new Set());
+  const [query, setQuery] = useState('');
+  const [panelOpen, setPanelOpen] = useState(true);
+  const [labels, setLabels] = useState('top');        // 'top' | 'all' | 'none'
+
+  const model = useMemo(() => peopleMap(d1, d2), [d1, d2]);
+  const counts = useMemo(() => gridCounts({ 1: model.people.filter((p) => who === 'all' || p.size > 0).map((p) => p.person) }), [model, who]);
+  // Each connection's sector, from where they work (inferred, as on the company map).
+  const sectorOf = useMemo(() => {
+    const m = new Map();
+    for (const p of model.people) m.set(p.id, industryOf(companyOf(p.person), p.person.headline));
+    return m;
+  }, [model]);
+  const scannedCount = useMemo(() => model.people.filter((p) => p.size > 0).length, [model]);
+
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return model.people.filter((p) => (who === 'all' || p.size > 0)
+      && shows(grid, p.person.tier, 1)
+      && !hidden.has(sectorOf.get(p.id).key)
+      && (!q || String(p.person.name || '').toLowerCase().includes(q)))
+      .sort((a, b) => b.value - a.value || b.size - a.size);
+  }, [model, who, grid, hidden, query, sectorOf]);
+
+  const sectors = useMemo(() => {
+    const counts = new Map();
+    for (const p of model.people) {
+      if (who !== 'all' && !p.size) continue;
+      const k = sectorOf.get(p.id).key;
+      counts.set(k, (counts.get(k) || 0) + 1);
+    }
+    return ALL_INDUSTRIES.filter((i) => counts.get(i.key)).map((i) => ({ ...i, count: counts.get(i.key) })).sort((a, b) => b.count - a.count);
+  }, [model, who, sectorOf]);
+
+  return (
+    <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+      <SidePanel open={panelOpen} onToggle={() => setPanelOpen((o) => !o)}>
+        {top}
+        <div style={panelHeading}>Filter</div>
+        <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Find a person"
+          style={{ width: '100%', boxSizing: 'border-box', padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: 13, marginBottom: 8 }} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          <Seg value={who} onChange={setWho} options={[['scanned', `Scanned (${fmt(scannedCount)})`], ['all', `All (${fmt(model.people.length)})`]]} />
+        </div>
+        <div style={{ marginTop: 12 }}>
+          <TierGrid grid={grid} counts={counts} onChange={setGrid} mode="paths" />
+        </div>
+        <div style={panelHeading}>Sectors</div>
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+          {sectors.map((i) => {
+            const off = hidden.has(i.key);
+            return (
+              <button key={i.key} title={off ? 'Show on the map' : 'Hide from the map'}
+                onClick={() => setHidden((h) => { const n = new Set(h); if (n.has(i.key)) n.delete(i.key); else n.add(i.key); return n; })}
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', borderRadius: 14, cursor: 'pointer',
+                  border: `1px solid ${i.color}55`, background: off ? 'transparent' : `${i.color}14`, color: '#cfd8d8', fontSize: 11.5, opacity: off ? 0.4 : 1 }}>
+                <span style={{ width: 7, height: 7, borderRadius: '50%', background: i.color }} />
+                {i.label} <span style={{ color: '#778' }}>{fmt(i.count)}</span>
+              </button>
+            );
+          })}
+        </div>
+        <div style={{ fontSize: 10.5, color: '#667', marginTop: 6 }}>Inferred from where each connection works.</div>
+        <div style={panelHeading}>Read the map</div>
+        <div style={{ fontSize: 11, color: '#8b9a9a', marginBottom: 4 }}>Bubble size</div>
+        <Seg value={sizeBy} onChange={setSizeBy} options={Object.entries(SIZE_BY).map(([k, v]) => [k, v.label])} />
+        <div style={{ fontSize: 11, color: '#8b9a9a', margin: '10px 0 4px' }}>Names</div>
+        <Seg value={labels} onChange={setLabels} options={[['top', 'Biggest'], ['all', 'All'], ['none', 'None']]} />
+        {look}
+      </SidePanel>
+      {/* Room at the top for the notch's Map / Companies, so it never covers a label */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', paddingTop: 40, boxSizing: 'border-box' }}>
+      <Bubbles people={shown} links={model.links} sizeBy={SIZE_BY[sizeBy]} sectorOf={sectorOf} rank={model.rank} names={labels}
+        colourBy={colourBy} physics={physics}
+        onOpen={(id) => router.push(`/?chain=${encodeURIComponent(id)}`)} />
+      </div>
+    </div>
+  );
+}
+
+function Bubbles({ people, links, sizeBy, sectorOf, rank, onOpen, names = 'top', colourBy = 'sector', physics = PHYSICS_OFF }) {
+  const wrap = useRef(null);
+  const { w, h } = useSize(wrap);
+  const [hover, setHover] = useState(null);
+
+  // Sectors on a ring, each person pulled to their sector and to the people
+  // whose clusters overlap theirs, then frozen: the same as the company map.
+  const layout = useMemo(() => {
+    const list = people.slice(0, MAX_BUBBLES);
+    const ids = new Set(list.map((p) => p.id));
+    const keys = [...new Set(list.map((p) => sectorOf.get(p.id).key))];
+    const R = 260;
+    const anchor = new Map(keys.map((k, i) => {
+      const a = (i / Math.max(1, keys.length)) * Math.PI * 2 - Math.PI / 2;
+      return [k, { x: Math.cos(a) * R, y: Math.sin(a) * R }];
+    }));
+    const nodes = list.map((p) => {
+      const at = anchor.get(sectorOf.get(p.id).key);
+      return {
+        id: p.id, p, sector: sectorOf.get(p.id),
+        r: p.size ? 4 + Math.sqrt(Math.max(0, sizeBy.of(p))) * sizeBy.k : 3,
+        x: at.x + (jitter(String(p.id)) - 0.5) * 40, y: at.y + (jitter(`${p.id}#`) - 0.5) * 40,
+        ax: at.x, ay: at.y,   // where their sector sits, for live physics
+      };
+    });
+    const edges = links.filter((l) => ids.has(l.a) && ids.has(l.b)).map((l) => ({ source: l.a, target: l.b, weight: l.shared, k: Math.min(0.25, 0.02 * l.shared) }));
+    const sim = forceSimulation(nodes)
+      .force('x', forceX((d) => anchor.get(d.sector.key).x).strength(0.12))
+      .force('y', forceY((d) => anchor.get(d.sector.key).y).strength(0.12))
+      .force('collide', forceCollide((d) => d.r + 3))
+      .force('charge', forceManyBody().strength(-25))
+      .force('link', forceLink(edges).id((d) => d.id).strength((e) => e.k).distance(60))
+      .stop();
+    for (let i = 0; i < 320; i++) sim.tick();
+    const xs = nodes.flatMap((n) => [n.x - n.r, n.x + n.r]);
+    const ys = nodes.flatMap((n) => [n.y - n.r, n.y + n.r]);
+    const box = nodes.length
+      ? { x: Math.min(...xs) - 60, y: Math.min(...ys) - 40, w: Math.max(...xs) - Math.min(...xs) + 120, h: Math.max(...ys) - Math.min(...ys) + 80 }
+      : { x: -300, y: -300, w: 600, h: 600 };
+    const labels = keys.map((k) => {
+      const ns = nodes.filter((n) => n.sector.key === k);
+      const cx = ns.reduce((sum, n) => sum + n.x, 0) / ns.length;
+      const cy = ns.reduce((sum, n) => sum + n.y, 0) / ns.length;
+      const len = Math.hypot(cx, cy) || 1;
+      const ux = cx / len, uy = cy / len;
+      const reach = Math.max(...ns.map((n) => (n.x - cx) * ux + (n.y - cy) * uy + n.r));
+      return { key: k, x: cx + ux * (reach + 16), y: cy + uy * (reach + 16) + 4, anchor: ux > 0.35 ? 'start' : ux < -0.35 ? 'end' : 'middle', ind: industryByKey(k) };
+    });
+    for (const l of labels) {
+      const wText = l.ind.label.length * 7.5;
+      const x0 = l.anchor === 'start' ? l.x : l.anchor === 'end' ? l.x - wText : l.x - wText / 2;
+      const right = Math.max(box.x + box.w, x0 + wText + 10);
+      box.x = Math.min(box.x, x0 - 10); box.w = right - box.x;
+      const bottom = Math.max(box.y + box.h, l.y + 12);
+      box.y = Math.min(box.y, l.y - 18); box.h = bottom - box.y;
+    }
+    box.h += Math.max(60, box.h * 0.1);
+    return { nodes, edges, box, labels, cut: Math.max(0, people.length - list.length) };
+  }, [people, links, sizeBy, sectorOf]);
+  const { drag, clicked } = useLivePhysics(layout, physics);
+  // Heat: how strong each cluster is, person for person; not scanned is the coldest.
+  const heat = useMemo(() => heatBy(layout.nodes, (n) => clusterStrength(n.p)), [layout]);
+  const hot = colourBy === 'heat';
+
+  const hovered = hover ? layout.nodes.find((n) => n.id === hover) : null;
+  const neighbours = useMemo(() => {
+    if (!hover) return null;
+    const s = new Set([hover]);
+    for (const e of layout.edges) {
+      if (e.source.id === hover) s.add(e.target.id);
+      if (e.target.id === hover) s.add(e.source.id);
+    }
+    return s;
+  }, [hover, layout]);
+  const labelled = useMemo(() => new Set(names === 'none' ? [] : layout.nodes.filter((n) => n.p.size).slice(0, names === 'all' ? Infinity : 28).map((n) => n.id)), [layout, names]);
+
+  // Where a node is on screen (the SVG fits its box to the window, centred).
+  const scale = w && h ? Math.min(w / layout.box.w, h / layout.box.h) : 1;
+  const ox = (w - layout.box.w * scale) / 2;
+  const oy = (h - layout.box.h * scale) / 2;
+  const onScreen = (n) => ({ x: ox + (n.x - layout.box.x) * scale, y: oy + (n.y - layout.box.y) * scale, r: n.r * scale });
+
+  return (
+    <div ref={wrap} style={{ flex: 1, minHeight: 360, position: 'relative' }}>
+      {w > 0 && (
+        <svg width={w} height={h} viewBox={`${layout.box.x} ${layout.box.y} ${layout.box.w} ${layout.box.h}`} style={{ display: 'block', touchAction: drag ? 'none' : undefined }}>
+          {hot && <HeatDefs id="pplheat" />}
+          {hot && <HeatGlow id="pplheat" nodes={layout.nodes.filter((n) => n.p.size)} heat={heat} />}
+          <g>
+            {layout.edges.map((e, i) => {
+              const on = hover && (e.source.id === hover || e.target.id === hover);
+              return (
+                <line key={i} x1={e.source.x} y1={e.source.y} x2={e.target.x} y2={e.target.y}
+                  stroke={on ? '#FF6B35' : '#8fa6c0'} strokeOpacity={on ? 0.8 : hover ? 0.03 : 0.09}
+                  strokeWidth={on ? 1 + Math.log2(1 + e.weight) : 0.4 + Math.log2(1 + e.weight) * 0.4} />
+              );
+            })}
+          </g>
+          {layout.labels.map((l) => (
+            <text key={l.key} x={l.x} y={l.y} textAnchor={l.anchor} fontSize={13} fontWeight={800} fill={l.ind.color} opacity={0.85}>
+              {l.ind.label}
+            </text>
+          ))}
+          {layout.nodes.map((n) => {
+            const { p } = n;
+            const dim = neighbours && !neighbours.has(n.id);
+            return (
+              <g key={n.id} transform={`translate(${n.x},${n.y})`} style={{ cursor: drag ? 'grab' : p.size ? 'pointer' : 'default' }} opacity={dim ? 0.18 : 1}
+                onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)}
+                onPointerDown={drag ? (ev) => drag(ev, n) : undefined}
+                onClick={() => { if (clicked() && p.size) onOpen(n.id); }}>
+                <circle r={n.r} fill={!p.size ? UNSCANNED : hot ? heatColour(heat(n)) : n.sector.color} fillOpacity={p.size ? 0.92 : 0.6}
+                  stroke={hover === n.id ? '#fff' : p.S ? TIER.S : 'rgba(0,0,0,0.35)'}
+                  strokeWidth={hover === n.id ? 2.5 : p.S ? Math.min(4, 1 + p.S / 40) : 0.6} />
+                {/* The share of their cluster only they can open, as an inner disc */}
+                {p.size > 0 && p.only > 0 && <circle r={n.r * Math.sqrt(p.share) * 0.85} fill="#fff" fillOpacity={0.3} />}
+                {(labelled.has(n.id) || hover === n.id) && (
+                  <text y={n.r + 11} textAnchor="middle" fontSize={10} fill="#e6edf0" style={{ pointerEvents: 'none' }}
+                    paintOrder="stroke" stroke="rgba(0,0,0,0.6)" strokeWidth={3}>{p.person.name}</text>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+      )}
+      {hovered && <Card n={hovered} at={onScreen(hovered)} w={w} rank={rank(hovered.id)} />}
+      <div style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, color: '#778', lineHeight: 1.6, pointerEvents: 'none' }}>
+        Bubble = one of your connections, sized by {sizeBy.label.toLowerCase()} (value: S tier counts 3, A tier 2, everyone else 1){hot ? '; colour = how strong their cluster is, person for person, cold to white hot' : ''};
+        white centre = the share of their cluster only they can open; gold ring = S tier inside.<br />
+        A line = two of your connections whose clusters share people. Grey = not scanned yet.
+        {layout.cut ? ` Showing the ${MAX_BUBBLES} largest of ${fmt(layout.cut + MAX_BUBBLES)}.` : ''}
+      </div>
+    </div>
+  );
+}
+
+/** Someone's numbers, beside their bubble. */
+function Card({ n, at, w, rank }) {
+  const { p } = n;
+  const width = 280;
+  const left = at.x + at.r + 14 + width > w ? Math.max(8, at.x - at.r - 14 - width) : at.x + at.r + 14;
+  const role = [p.person.role, companyOf(p.person)].filter(Boolean).join(' @ ') || p.person.headline || '';
+  return (
+    <div style={{
+      position: 'absolute', left, top: Math.max(8, at.y - 70), width, pointerEvents: 'none', zIndex: 5,
+      padding: '12px 14px', borderRadius: 12, background: 'rgba(8,10,22,0.96)', border: `1px solid ${n.sector.color}99`,
+      boxShadow: '0 12px 40px rgba(0,0,0,0.6)', fontSize: 12, lineHeight: 1.45, color: '#ddd',
+    }}>
+      <div style={{ fontSize: 15, fontWeight: 800, color: '#fff' }}>{p.person.name}</div>
+      <div style={{ fontSize: 11.5, color: '#8a8fa8' }}>
+        {role}{p.person.tier ? ` · ${p.person.tier}-tier` : ''} · {n.sector.label}
+      </div>
+      {p.size ? (
+        <>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 10px', margin: '10px 0 8px' }}>
+            <Stat value={fmt(p.value)} label="cluster value" color="#FFD700" />
+            <Stat value={fmt(p.size)} label="people in their cluster" />
+            <Stat value={`${fmt(p.S)} S · ${fmt(p.A)} A`} label="the strongest among them" color="#FFD700" />
+            <Stat value={`${fmt(p.only)} (${Math.round(p.share * 100)}%)`} label="only through them" color="#00E5FF" />
+          </div>
+          <div style={{ fontSize: 11.5, color: '#aab' }}>
+            {rank === 1 ? 'The most valuable cluster you’ve scanned. ' : rank != null ? `Worth more than ${Math.round(rank * 100)}% of the clusters you’ve scanned. ` : ''}Click to open it in Bridge Chains.
+          </div>
+        </>
+      ) : (
+        <div style={{ fontSize: 11.5, color: '#aab', marginTop: 8 }}>Their circle isn’t scanned yet, so there’s no cluster to size.</div>
+      )}
+    </div>
+  );
+}
+
+function Stat({ value, label, color = '#fff' }) {
+  return (
+    <div>
+      <div style={{ fontSize: 15, fontWeight: 800, color }}>{value}</div>
+      <div style={{ fontSize: 10.5, color: '#8a8fa8' }}>{label}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+'use client';
+
+// The Scan page's radar (Blake, 2026-10-02: "making the scan button more
+// gamified, having the slow medium high scan option"). A round Scan button in
+// the middle of a radar: the sweep turns while a scan runs, the outer arc is
+// today's searches against the budget, and beside it the three speeds with
+// what each means for the rest of today's budget. Speed only changes searches
+// an hour (lib/scan-pace.js); the daily budget is still the cap.
+
+import { PACES, PACE_NAMES, paceOf, paceSeconds, searchesPerHour, durationText } from '../../lib/scan-pace';
+
+const SIZE = 236;
+const C = SIZE / 2;
+const CSS = `
+@keyframes radarSweep { to { transform: rotate(360deg); } }
+@keyframes radarPing { 0% { opacity: .9; r: 3; } 100% { opacity: 0; r: 11; } }
+.radar-sweep { transform-origin: ${C}px ${C}px; animation: radarSweep 2.6s linear infinite; }
+.radar-ping { animation: radarPing 2.6s ease-out infinite; }
+.radar-go { transition: transform .15s ease, box-shadow .2s ease; }
+.radar-go:not(:disabled):hover { transform: scale(1.04); box-shadow: 0 0 34px rgba(0,255,136,.45); }
+.radar-go:not(:disabled):active { transform: scale(.97); }
+@media (prefers-reduced-motion: reduce) { .radar-sweep, .radar-ping { animation: none; } }
+`;
+
+// A few fixed blips, so the radar looks alive without inventing anything about anyone.
+const BLIPS = [[0.62, 0.7], [0.38, 2.1], [0.8, 3.3], [0.5, 4.4], [0.72, 5.6]];
+
+function arc(r, from, to) {
+  const p = (a) => `${(C + r * Math.cos(a)).toFixed(2)} ${(C + r * Math.sin(a)).toFixed(2)}`;
+  const large = to - from > Math.PI ? 1 : 0;
+  return `M${p(from)} A${r} ${r} 0 ${large} 1 ${p(to)}`;
+}
+
+export default function ScanRadar({ li, running, scanning, disabled, label, sublabel, onScan, onPace }) {
+  const pace = li?.limits?.pace || 'fast';
+  const daily = li?.limits?.daily || 0;
+  const used = li?.unreadable ? daily : li?.searchesToday || 0;
+  const left = daily ? Math.max(0, daily - used) : null;
+  const share = daily ? Math.min(1, used / daily) : 0;
+  const tone = share >= 0.9 ? '#ff6b6b' : share >= 0.6 ? '#FFD700' : '#00ff88';
+  const top = -Math.PI / 2;
+  const R = C - 10;
+
+  return (
+    <div style={{ display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap', padding: '14px 16px', borderRadius: 14,
+      border: '1px solid rgba(0,255,136,0.18)', background: 'radial-gradient(circle at 20% 50%, rgba(0,255,136,0.06), rgba(255,255,255,0.02) 60%)' }}>
+      <style>{CSS}</style>
+      <div style={{ position: 'relative', width: SIZE, height: SIZE, flexShrink: 0 }}>
+        <svg width={SIZE} height={SIZE} aria-hidden="true" style={{ position: 'absolute', inset: 0 }}>
+          <defs>
+            <radialGradient id="radarBg"><stop offset="0" stopColor="#0f2a22" /><stop offset="1" stopColor="#0a0a1a" /></radialGradient>
+            <linearGradient id="radarBeam" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0" stopColor="#00ff88" stopOpacity="0" /><stop offset="1" stopColor="#00ff88" stopOpacity="0.45" />
+            </linearGradient>
+          </defs>
+          <circle cx={C} cy={C} r={R} fill="url(#radarBg)" stroke="rgba(0,255,136,0.25)" />
+          {[0.33, 0.66].map((k) => <circle key={k} cx={C} cy={C} r={R * k} fill="none" stroke="rgba(0,255,136,0.14)" strokeDasharray="2 5" />)}
+          <line x1={C - R} y1={C} x2={C + R} y2={C} stroke="rgba(0,255,136,0.1)" />
+          <line x1={C} y1={C - R} x2={C} y2={C + R} stroke="rgba(0,255,136,0.1)" />
+          {/* The sweep: turning while a scan runs, resting otherwise */}
+          <g className={running ? 'radar-sweep' : undefined} opacity={running ? 1 : 0.35}>
+            <path d={`M${C} ${C} L${C + R} ${C} A${R} ${R} 0 0 0 ${C + R * Math.cos(-0.55)} ${C + R * Math.sin(-0.55)} Z`} fill="url(#radarBeam)" />
+            <line x1={C} y1={C} x2={C + R} y2={C} stroke="#00ff88" strokeOpacity={0.8} strokeWidth={1.5} />
+          </g>
+          {BLIPS.map(([k, a], i) => (
+            <g key={i}>
+              <circle cx={C + R * k * Math.cos(a)} cy={C + R * k * Math.sin(a)} r={2.4} fill="#00ff88" opacity={running ? 0.9 : 0.35} />
+              {running && <circle className="radar-ping" style={{ animationDelay: `${(a / (2 * Math.PI)) * 2.6}s` }}
+                cx={C + R * k * Math.cos(a)} cy={C + R * k * Math.sin(a)} r={3} fill="none" stroke="#00ff88" />}
+            </g>
+          ))}
+          {/* Today's searches against the budget, round the edge */}
+          <path d={arc(R + 5, top, top + 2 * Math.PI - 0.001)} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={5} />
+          {share > 0 && <path d={arc(R + 5, top, top + 2 * Math.PI * share - 0.001)} fill="none" stroke={tone} strokeWidth={5} strokeLinecap="round" />}
+        </svg>
+        <button type="button" className="radar-go" onClick={onScan} disabled={disabled}
+          style={{
+            position: 'absolute', left: C - 62, top: C - 62, width: 124, height: 124, borderRadius: '50%', cursor: disabled ? 'not-allowed' : 'pointer',
+            border: `2px solid ${disabled ? 'rgba(255,255,255,0.12)' : '#00ff88'}`,
+            background: disabled ? 'rgba(20,24,40,0.92)' : 'radial-gradient(circle at 50% 35%, #134d3a, #0b2a22 70%)',
+            color: disabled ? '#667' : '#eafff5', boxShadow: disabled ? 'none' : '0 0 22px rgba(0,255,136,0.25)',
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, padding: 8,
+          }}>
+          <span style={{ fontSize: 22, fontWeight: 900, letterSpacing: 2 }}>{scanning ? '•••' : 'SCAN'}</span>
+          <span style={{ fontSize: 11, fontWeight: 700, opacity: 0.85, lineHeight: 1.25, textAlign: 'center' }}>{label}</span>
+          {sublabel && <span style={{ fontSize: 10, opacity: 0.6, textAlign: 'center' }}>{sublabel}</span>}
+        </button>
+      </div>
+
+      <div style={{ flex: 1, minWidth: 260 }}>
+        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: '#6b7090', textTransform: 'uppercase', marginBottom: 8 }}>Speed</div>
+        <div role="radiogroup" aria-label="Scan speed" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
+          {PACE_NAMES.map((name) => {
+            const p = PACES[name];
+            const on = pace === name;
+            const color = name === 'slow' ? '#00E5FF' : name === 'medium' ? '#FFD700' : '#FF7043';
+            return (
+              <button key={name} type="button" role="radio" aria-checked={on} disabled={running || !onPace}
+                onClick={() => onPace?.(name)}
+                title={`${p.pagePause} s before each page, ${p.chunkCooldown / 60} min more after every 10, profiles ${p.profileGap} s apart`}
+                style={{
+                  padding: '10px 8px', borderRadius: 10, cursor: running ? 'not-allowed' : 'pointer', textAlign: 'left',
+                  border: `1.5px solid ${on ? color : 'rgba(255,255,255,0.1)'}`, background: on ? `${color}1a` : 'rgba(255,255,255,0.03)',
+                  color: '#ddd',
+                }}>
+                <div style={{ fontSize: 14, fontWeight: 800, color: on ? color : '#ccd' }}>{p.label}</div>
+                <div style={{ fontSize: 11, color: '#8a8fa8', marginTop: 2 }}>~{searchesPerHour(name)} searches an hour</div>
+                <div style={{ fontSize: 10.5, color: '#6b7090', marginTop: 1 }}>{p.pagePause} s between pages</div>
+              </button>
+            );
+          })}
+        </div>
+        <div style={{ marginTop: 10, fontSize: 12.5, color: '#b8c4c4', lineHeight: 1.6 }}>
+          {!li
+            ? <>Today&rsquo;s searches show here once the scanner can read them.</>
+            : left == null
+            ? <>No daily cap is set.</>
+            : <><b style={{ color: tone }}>{left}</b> of {daily} searches left today
+              {left > 0 && <> · at {paceOf(pace).label}, {durationText(paceSeconds(pace, left))} to use them</>}.</>}
+        </div>
+        <div style={{ marginTop: 4, fontSize: 11.5, color: '#778', lineHeight: 1.55 }}>
+          Fast is how the scanner has always run; Medium and Slow only add waiting, so fewer searches an hour reach
+          LinkedIn. Your daily budget stays the cap at every speed: slower spreads it out, it doesn&rsquo;t shrink it.
+          Slower lowers the odds of a check from LinkedIn; it can&rsquo;t promise there won&rsquo;t be one.
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,8 @@
 'use client';
 
-// The notch: a small pill hanging from the bottom of the header, centred, on
+// The notch: a small bar hanging from the bottom of the header, under its tab
+// buttons. It holds the page's own buttons (its views or sub-tabs, set through
+// lib/island.js setNotchTabs) and, beside them, what the app is doing. On
 // every page (Blake, 2026-09-29: "a notch ui of the thing scanning"). It stays
 // out of the way: nothing at all while nothing runs; a tiny dimmed "Auto scan"
 // when the all-day mode is on but idle; while a scan runs, what it's doing and
@@ -15,7 +17,7 @@ import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { watchScanner, scannerNow, stopScrape } from '../../lib/scraper-client';
 import { watchAllDay, allDayNow } from '../../lib/experimental-client';
-import { watchActivities, activitiesNow, noActivities } from '../../lib/island';
+import { watchActivities, activitiesNow, noActivities, watchNotchTabs, notchTabsNow, noNotchTabs, setNotchShown } from '../../lib/island';
 
 const WHAT = {
   full: 'Scanning your network',
@@ -31,6 +33,7 @@ const WHAT = {
   company: 'Scanning a company',
   photos: 'Saving photos',
   messages: 'Reading your messages list',
+  'messages-full': 'Reading your whole messages history',
 };
 
 // Green while there's plenty left, amber past 60%, red past 90%.
@@ -43,6 +46,8 @@ export default function ScanStatusBar() {
   const [pinned, setPinned] = useState(false);
   const allDay = useSyncExternalStore(watchAllDay, allDayNow, () => false);
   const others = useSyncExternalStore(watchActivities, activitiesNow, noActivities);
+  // The page's own buttons (its views or sub-tabs), when it has any.
+  const tabs = useSyncExternalStore(watchNotchTabs, notchTabsNow, noNotchTabs);
   useEffect(() => watchScanner(() => {
     const now = scannerNow();
     setJob(now);
@@ -53,6 +58,7 @@ export default function ScanStatusBar() {
   // be swapped for a new one, or wrap to two rows.
   const pathname = usePathname();
   const [top, setTop] = useState(null);
+  const [centre, setCentre] = useState(null);
   useEffect(() => {
     let header = null;
     let ro = null;
@@ -68,6 +74,10 @@ export default function ScanStatusBar() {
       }
       const at = header ? Math.round(header.getBoundingClientRect().bottom) : null;
       setTop((was) => (was === at ? was : at));
+      // Under the header's tab buttons when the page has them, else the window's middle.
+      const group = document.getElementById('main-tabs')?.getBoundingClientRect();
+      const mid = group && group.width ? Math.round(group.left + group.width / 2) : null;
+      setCentre((was) => (was === mid ? was : mid));
     };
     const later = () => { if (!queued) queued = requestAnimationFrame(measure); };
     later();
@@ -79,7 +89,14 @@ export default function ScanStatusBar() {
 
   const running = !!job?.running;
   const other = others[others.length - 1] || null;
-  if (!running && !other && !allDay) return null;
+  const status = running || other || allDay;
+  // Pages with a heading at the top leave room for the notch while it's showing.
+  const showing = Boolean(status || tabs);
+  useEffect(() => {
+    setNotchShown(showing);
+    return () => setNotchShown(false);
+  }, [showing]);
+  if (!status && !tabs) return null;
 
   const p = job?.progress;
   const step = p?.kind === 'batch' && p.total ? `${p.current || p.done || 0} of ${p.total}`
@@ -95,42 +112,70 @@ export default function ScanStatusBar() {
   const label = running ? (WHAT[job.action] || 'Scanning') : other ? other.label : 'Auto scan';
   const short = running ? step : other ? other.detail : null;
 
+  // Kept inside the window: centred under the tab buttons, but never off an edge.
+  const left = centre != null ? `clamp(170px, ${centre}px, calc(100vw - 170px))` : '50%';
+
   return (
     <div
-      role="status"
-      aria-live="polite"
-      onMouseEnter={() => setOpen(true)}
       onMouseLeave={() => setOpen(false)}
       style={{
-        position: 'fixed', left: '50%', top: top ?? 'var(--scan-bar-top, 94px)', transform: 'translateX(-50%)', zIndex: 60,
-        maxWidth: 'calc(100vw - 32px)', minWidth: running || other ? 180 : 0,
-        padding: expanded ? '8px 14px 10px' : '4px 12px 6px',
-        borderRadius: '0 0 16px 16px', borderTop: 'none',
-        border: `1px solid ${running ? 'rgba(0,255,136,0.25)' : 'rgba(255,255,255,0.1)'}`,
+        position: 'fixed', left, top: top ?? 'var(--scan-bar-top, 94px)', transform: 'translateX(-50%)', zIndex: 60,
+        maxWidth: 'calc(100vw - 16px)',
+        padding: expanded && status ? '4px 6px 10px' : '4px 6px 5px',
+        borderRadius: '0 0 14px 14px', border: `1px solid ${running ? 'rgba(0,255,136,0.25)' : 'rgba(255,255,255,0.1)'}`, borderTop: 'none',
         background: 'rgba(8,10,22,0.96)', color: '#cfd8d8', fontSize: 12,
-        opacity: running || other || expanded ? 1 : 0.55,
+        opacity: tabs || running || other || expanded ? 1 : 0.55,
         boxShadow: running ? '0 6px 20px rgba(0,0,0,0.35)' : 'none',
         transition: 'padding 0.18s ease, opacity 0.18s ease',
       }}
     >
-      <button
-        onClick={() => setPinned((v) => !v)}
-        aria-expanded={expanded}
-        title={expanded ? 'Close' : 'Open'}
-        style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', background: 'none', border: 'none', color: 'inherit', font: 'inherit', cursor: 'pointer', padding: 0, whiteSpace: 'nowrap' }}
-      >
-        <span className={running ? 'notch-pulse' : undefined} style={{ width: 7, height: 7, borderRadius: '50%', background: dot, flexShrink: 0 }} />
-        <b style={{ color: running || other ? '#fff' : '#b8c4c4', fontWeight: 600 }}>{label}</b>
-        {short && <span style={{ color: '#8b9a9a' }}>{short}</span>}
-        {!running && !other && expanded && <span style={{ color: '#8b9a9a' }}>ready · press Auto scan beside Scan to start</span>}
-      </button>
-      {fraction != null && (
-        <div style={{ height: 2, marginTop: 5, borderRadius: 2, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, overflowX: 'auto' }}>
+        {tabs && (
+          <div role="tablist" aria-label="View" style={{ display: 'flex', gap: 2 }}>
+            {tabs.items.map((t) => {
+              const on = t.key === tabs.current;
+              return (
+                <button
+                  key={t.key} role="tab" aria-selected={on} title={t.title}
+                  onClick={() => tabs.onPick(t.key)}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 8, border: 'none',
+                    cursor: 'pointer', whiteSpace: 'nowrap', fontSize: 12, fontWeight: 600,
+                    background: on ? 'rgba(52,152,219,0.22)' : 'transparent', color: on ? '#cfe6f7' : '#8b9aa8',
+                  }}
+                >
+                  {t.icon && <span aria-hidden="true">{t.icon}</span>}
+                  {t.label}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        {tabs && status && <span aria-hidden="true" style={{ width: 1, alignSelf: 'stretch', margin: '3px 4px', background: 'rgba(255,255,255,0.12)' }} />}
+        {status && (
+          <button
+            onMouseEnter={() => setOpen(true)}
+            onClick={() => setPinned((v) => !v)}
+            aria-expanded={expanded}
+            title={expanded ? 'Close' : 'Open'}
+            style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'none', border: 'none', color: 'inherit', font: 'inherit', cursor: 'pointer', padding: '5px 8px', whiteSpace: 'nowrap' }}
+          >
+            <span className={running ? 'notch-pulse' : undefined} style={{ width: 7, height: 7, borderRadius: '50%', background: dot, flexShrink: 0 }} />
+            <span role="status" aria-live="polite" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <b style={{ color: running || other ? '#fff' : '#b8c4c4', fontWeight: 600 }}>{label}</b>
+              {short && <span style={{ color: '#8b9a9a' }}>{short}</span>}
+            </span>
+            {!running && !other && expanded && <span style={{ color: '#8b9a9a' }}>ready · press Auto scan beside Scan to start</span>}
+          </button>
+        )}
+      </div>
+      {status && fraction != null && (
+        <div style={{ height: 2, margin: '3px 6px 0', borderRadius: 2, background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
           <div style={{ width: `${Math.round(fraction * 100)}%`, height: '100%', background: running ? '#00ff88' : '#3498DB', transition: 'width 0.4s ease' }} />
         </div>
       )}
       {expanded && running && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '8px 8px 0', flexWrap: 'wrap' }}>
           {job.target?.name && <span>{job.target.name}</span>}
           {b && (
             <span style={{ color: tone(b.searches, b.cap) }} title="Searches on your LinkedIn account in the last 24 hours, and your daily budget">
@@ -152,7 +197,7 @@ export default function ScanStatusBar() {
           >{stopping ? 'Stopping…' : 'Stop'}</button>
         </div>
       )}
-      {expanded && !running && other?.detail && <div style={{ marginTop: 6, color: '#8b9a9a' }}>{other.detail}</div>}
+      {expanded && !running && other?.detail && <div style={{ margin: '6px 8px 0', color: '#8b9a9a' }}>{other.detail}</div>}
     </div>
   );
 }