six-degrees 0.4.11 → 0.5.0

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

@@ -0,0 +1,162 @@
+'use client';
+
+// The right panel while a circle is open in Bridge Chains (Blake, 2026-10-02:
+// "when im in a d2 cluster in the bridges and i open up the people panel it
+// should show the cluster of whoever im in"). Who is in their circle, strongest
+// first, with the people you added from it at the top: the ones whose own
+// circle is the next link in the chain.
+
+import { useMemo, useState } from 'react';
+import Link from 'next/link';
+import Avatar from './Avatar';
+import { circleIndex } from '../../lib/circle';
+import { reachIndex, reachState } from '../../lib/reach';
+import { score1 } from '../../lib/separation';
+import { TIER_ORDER } from '../../lib/tiers';
+
+const PAGE = 60;
+const rank = (a, b) => TIER_ORDER.indexOf(a.tier) - TIER_ORDER.indexOf(b.tier)
+  || score1(b) - score1(a)
+  || String(a.name || '').localeCompare(String(b.name || ''));
+const first = (name) => String(name || '').trim().split(/\s+/)[0] || 'Their';
+
+const rowStyle = {
+  display: 'flex', alignItems: 'center', gap: 9, width: '100%', padding: '7px 8px', borderRadius: 8, boxSizing: 'border-box',
+  background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)',
+  color: '#fff', cursor: 'pointer', textAlign: 'left', font: 'inherit', textDecoration: 'none',
+};
+
+/** One person: opens their card, or (with `href`) goes there instead. */
+function Row({ person, tierColors, note, noteColor, onSelect, href, label }) {
+  const body = (
+    <>
+      <Avatar person={person} size={26} tierColors={tierColors} />
+      <span style={{ flex: 1, minWidth: 0 }}>
+        <span style={{ display: 'block', fontSize: 12, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {person.name}
+          <span style={{ fontSize: 10, color: tierColors[person.tier] || '#888', fontWeight: 800, marginLeft: 6 }}>{person.tier}</span>
+        </span>
+        <span style={{ display: 'block', fontSize: 10.5, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {[person.title, person.company].filter(Boolean).join(' · ') || ' '}
+        </span>
+      </span>
+      {note && <span style={{ fontSize: 10, fontWeight: 700, color: noteColor || '#888', whiteSpace: 'nowrap' }}>{note}</span>}
+    </>
+  );
+  return href
+    ? <Link href={href} aria-label={label} style={{ ...rowStyle, borderColor: 'rgba(0,255,136,0.2)' }}>{body}</Link>
+    : <button type="button" onClick={() => onSelect?.(person)} style={rowStyle}>{body}</button>;
+}
+
+export default function CirclePanel({ person, connections = [], degree2 = [], scanNotes, tierColors, onSelect, onToggle, canScan = true }) {
+  const [tier, setTier] = useState(null);
+  const [query, setQuery] = useState('');
+  const [shown, setShown] = useState(PAGE);
+  const index = useMemo(() => circleIndex(connections, degree2), [connections, degree2]);
+  const reach = useMemo(() => reachIndex(connections, degree2, scanNotes), [connections, degree2, scanNotes]);
+  const members = useMemo(() => [...(index.circles.get(person.id) || [])].sort(rank), [index, person.id]);
+  const added = useMemo(() => [...(index.introduced.get(person.id) || [])].sort(rank), [index, person.id]);
+  const counts = useMemo(() => {
+    const c = Object.fromEntries(TIER_ORDER.map((t) => [t, 0]));
+    for (const m of members) if (c[m.tier] != null) c[m.tier] += 1;
+    return c;
+  }, [members]);
+  const q = query.trim().toLowerCase();
+  const list = members.filter((m) => (!tier || m.tier === tier)
+    && (q.length < 2 || [m.name, m.title, m.company].some((v) => String(v || '').toLowerCase().includes(q))));
+  const color = tierColors[person.tier] || '#888';
+  const stateNote = (p) => {
+    const s = reachState(p, reach);
+    return s === 'ready' ? ['ready to scan', '#00ff88'] : s === 'scanned' ? ['circle scanned', '#74B9FF'] : s === 'hidden' ? ['list hidden', '#888'] : [null];
+  };
+
+  return (
+    <div>
+      <button onClick={onToggle} style={{
+        display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
+        color: '#888', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
+      }}>
+        <span style={{ fontSize: 16 }}>&larr;</span> Close
+      </button>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
+        <Avatar person={person} size={38} tierColors={tierColors} />
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: '#888', textTransform: 'uppercase' }}>You&rsquo;re in</div>
+          <h3 style={{ fontSize: 16, fontWeight: 800, margin: 0, color }}>{first(person.name)}&rsquo;s circle</h3>
+        </div>
+      </div>
+      <div style={{ fontSize: 11.5, color: '#999', marginBottom: 12 }}>
+        {[person.title, person.company].filter(Boolean).join(' · ')}
+        <button type="button" onClick={() => onSelect?.(person)} style={{
+          display: 'block', marginTop: 6, padding: 0, background: 'none', border: 'none', color: '#74B9FF',
+          fontSize: 11, fontWeight: 700, cursor: 'pointer',
+        }}>Open {first(person.name)}&rsquo;s card →</button>
+      </div>
+
+      {/* The same count as the map: the people you added from here were in it too. */}
+      <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1 }}>{(members.length + added.length).toLocaleString('en-US')}</div>
+      <div style={{ fontSize: 11, color: '#888', marginBottom: 10 }}>
+        {members.length + added.length === 1 ? 'person' : 'people'} in their circle{added.length ? ` · you added ${added.length} of them` : ''}
+      </div>
+
+      {/* Tier chips: tap one to see just them. */}
+      <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', marginBottom: 10 }}>
+        {TIER_ORDER.map((t) => (
+          <button key={t} type="button" aria-pressed={tier === t} disabled={!counts[t]}
+            onClick={() => { setTier(tier === t ? null : t); setShown(PAGE); }}
+            style={{
+              padding: '4px 9px', borderRadius: 12, fontSize: 11, fontWeight: 700, cursor: counts[t] ? 'pointer' : 'default',
+              border: `1px solid ${tier === t ? tierColors[t] : 'rgba(255,255,255,0.1)'}`,
+              background: tier === t ? `${tierColors[t]}26` : 'rgba(255,255,255,0.03)',
+              color: counts[t] ? tierColors[t] : '#444',
+            }}>
+            {t} <span style={{ color: '#aaa', fontWeight: 600 }}>{counts[t]}</span>
+          </button>
+        ))}
+      </div>
+
+      <input type="search" value={query} placeholder={`Search ${first(person.name)}’s circle`}
+        onChange={(e) => { setQuery(e.target.value); setShown(PAGE); }}
+        style={{
+          width: '100%', padding: '8px 12px', borderRadius: 8, fontSize: 12, marginBottom: 14, boxSizing: 'border-box',
+          border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.05)', color: '#fff', outline: 'none',
+        }} />
+
+      {added.length > 0 && !tier && q.length < 2 && (
+        <div style={{ marginBottom: 14 }}>
+          <div style={{ fontSize: 10, fontWeight: 700, color: '#00ff88', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
+            You added from here ({added.length})
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+            {added.map((p) => {
+              const [note, noteColor] = stateNote(p);
+              return note === 'ready to scan' && canScan
+                ? <Row key={p.id} person={p} tierColors={tierColors} note="Scan… →" noteColor="#00ff88"
+                    href={`/setup?scan=${encodeURIComponent(p.id)}`} label={`Scan ${p.name}’s circle: opens the Scan page to confirm`} />
+                : <Row key={p.id} person={p} tierColors={tierColors} note={note} noteColor={noteColor} onSelect={onSelect} />;
+            })}
+          </div>
+        </div>
+      )}
+
+      <div style={{ fontSize: 10, fontWeight: 700, color: '#888', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
+        {tier ? `${tier} tier in their circle` : added.length ? 'Everyone else in their circle' : 'Everyone in their circle'} ({list.length.toLocaleString('en-US')})
+      </div>
+      {list.length === 0 ? (
+        <div style={{ fontSize: 11.5, color: '#888', lineHeight: 1.5 }}>
+          {members.length === 0 ? 'Their circle isn’t scanned yet.' : 'No one here matches.'}
+        </div>
+      ) : (
+        <div role="list" style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+          {list.slice(0, shown).map((m) => <Row key={m.id} person={m} tierColors={tierColors} onSelect={onSelect} />)}
+          {list.length > shown && (
+            <button type="button" onClick={() => setShown((n) => n + PAGE * 3)} style={{
+              background: 'none', border: 'none', color: '#888', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: '6px 0', textAlign: 'left',
+            }}>Show more ({(list.length - shown).toLocaleString('en-US')} left)</button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-// The Scores tab's company scores (app/scores): every company in your network, the score it carries into
+// Settings → Scores → company scores (app/settings): every company in your network, the score it carries into
 // people's power, where that score comes from, and a control to set your own.
 // Setting a score rescores everyone (app/api/company-scores → lib/scoring.js).
 
@@ -61,7 +61,7 @@ export function ScorePicker({ company, onSet, compact }) {
 
 export default function CompanyScores({ onRescored, version = 0 }) {
   const { companies, error, setScore, reload } = useCompanyScores();
-  // A save beside the list (your sector or tiers, on the Scores tab) rescores
+  // A save beside the list (your sector or tiers, in Settings) rescores
   // everyone: `version` changes, and the list is read again, keeping what you
   // searched and filtered.
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 'use client';
 
 // The Scan page's one question before the first scan: what field you're in.
-// The same picks as Scores → Your sector (SectorPicker), saved the same way
+// The same picks as Settings → Scores → Your field (SectorPicker), saved the same way
 // (lib/settings-client.js), so the first scan is already scored with them.
 // Optional: Skip for now carries on without one. Either answer is kept
 // (`fieldAsked`, lib/sector-focus.js), so it's asked once; when it's asked at
@@ -53,7 +53,7 @@ export default function FieldStep({ onDone }) {
       <h2 id="field-question" style={{ fontSize: 18, fontWeight: 700, margin: '6px 0 4px' }}>What field are you in?</h2>
       <Body style={{ marginTop: 0, marginBottom: 14 }}>
         Pick up to three. Companies in your field count for more when your network is scored, so the people there rank
-        higher. You can change it anytime on the Scores tab.
+        higher. You can change it anytime in Settings.
       </Body>
 
       <SectorPicker sectors={sectors} onChange={setSectors} disabled={Boolean(saving)} />
@@ -82,13 +82,13 @@ export default function FieldStep({ onDone }) {
 /** What was answered, above the scan's steps: where it went, and where to change it. */
 export function FieldAnswer({ sectors }) {
   if (!sectors.length) {
-    return <Status>No field for now. You can pick one anytime on <Link href="/scores#sector" style={link}>Scores</Link>.</Status>;
+    return <Status>No field for now. You can pick one anytime in <Link href="/settings#sector" style={link}>Settings</Link>.</Status>;
   }
   // The labels have commas of their own ("Tech, Software & AI"), so a dot separates them.
   return (
     <Status tone="ok">
       Your field: {sectors.map((k) => sectorByKey(k).label).join(' · ')}. Your first scan is scored with it. Change it
-      anytime on <Link href="/scores#sector" style={link}>Scores</Link>.
+      anytime in <Link href="/settings#sector" style={link}>Settings</Link>.
     </Status>
   );
 }

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { viewsForMode } from './views';
 import GalaxyLab, { NamesSwitch } from './GalaxyLab';
+import { TIERS, GRID_DEGREES, showing, showingIn, toggleCell, toggleTier, toggleDegree, showAllTiers } from '../../lib/tier-grid';
 
 function useIsMobile() {
   const [m, setM] = useState(false);
@@ -13,19 +13,124 @@ function useIsMobile() {
 const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 
-export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilterChange, visualMode, onVisualModeChange, tierCounts, bridgeTierCounts, degrees = [1], onDegreesChange, degreeCounts = {}, hiddenTiers = [], onHiddenTiersChange }) {
+const DEGREE_NAMES = ['', '1st', '2nd', '3rd', '4th', '5th', '6th'];
+// What each degree is, per tab: Network Circle draws people; Degrees draws bridges and their circles.
+const DEGREE_IS = {
+  network: { 1: 'your connections', 2: 'people in a scanned circle', 3: 'people found by a company scan' },
+  degrees: { 1: 'your bridges', 2: 'people in their circles' },
+  paths: { 1: 'your connections', 2: 'people in a scanned circle', 3: 'people found by a company scan' },
+};
+
+/**
+ * Tiers down, six degrees across: tap a tier to hide or show it, a dot to show
+ * that degree for that tier, a number at the top for that degree in every tier.
+ * The same in Network Circle, Degrees and Paths (lib/tier-grid.js).
+ */
+export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
+  const total = showing(grid, counts);
+  const dot = isMobile ? 21 : 23;
+  const anyAt = (d) => TIERS.some((t) => (counts[t]?.[d] || 0) > 0);
+  const what = (d) => DEGREE_IS[mode]?.[d];
+  return (
+    <div style={{ marginBottom: 18 }}>
+      <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
+        <div style={{ flex: 1, fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, textTransform: 'uppercase' }}>
+          Tiers
+        </div>
+        {/* A degree, for every tier at once */}
+        <div style={{ display: 'flex', gap: 3 }}>
+          {GRID_DEGREES.map((d) => {
+            const any = anyAt(d);
+            const on = any && TIERS.every((t) => grid.hidden.includes(t) || !(counts[t]?.[d] > 0) || grid.degrees[t].includes(d));
+            return (
+              <button key={d} type="button" disabled={!any} aria-pressed={on}
+                title={any ? `${DEGREE_NAMES[d]} degree${what(d) ? `: ${what(d)}` : ''}. Tap to ${on ? 'hide' : 'show'} it for every tier` : `Nobody at ${DEGREE_NAMES[d]} degree yet`}
+                onClick={() => onChange(toggleDegree(grid, d, counts))}
+                style={{
+                  width: dot, height: 18, padding: 0, border: 'none', background: 'none', cursor: any ? 'pointer' : 'default',
+                  fontSize: 10, fontWeight: 800, color: !any ? '#333' : on ? '#cfe6f7' : '#778',
+                }}>
+                {d}
+              </button>
+            );
+          })}
+        </div>
+        <div style={{ width: 44 }} />
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {TIERS.map((t) => {
+          const off = grid.hidden.includes(t);
+          const n = showingIn(grid, counts, t);
+          const color = TIER_COLORS[t];
+          return (
+            <div key={t} style={{
+              display: 'flex', alignItems: 'center', borderRadius: 8,
+              background: off ? 'rgba(255,255,255,0.02)' : `${color}14`,
+              borderLeft: `3px solid ${off ? 'transparent' : color}`,
+            }}>
+              <button type="button" aria-pressed={!off} title={off ? `Show ${t}-Tier` : `Hide ${t}-Tier`}
+                onClick={() => onChange(toggleTier(grid, t, counts))}
+                style={{
+                  flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 8, padding: '12px 6px 12px 10px',
+                  border: 'none', background: 'none', cursor: 'pointer', color: off ? '#555' : color, textAlign: 'left',
+                }}>
+                <span style={{ width: 11, height: 11, borderRadius: '50%', background: color, opacity: off ? 0.2 : 1, flexShrink: 0 }} />
+                <span style={{ fontSize: 13.5, fontWeight: 700, whiteSpace: 'nowrap', textDecoration: off ? 'line-through' : 'none' }}>{t}-Tier</span>
+              </button>
+              <div style={{ display: 'flex', gap: 3 }}>
+                {GRID_DEGREES.map((d) => {
+                  const people = counts[t]?.[d] || 0;
+                  const on = !off && people > 0 && grid.degrees[t].includes(d);
+                  return (
+                    <button key={d} type="button" disabled={!people} aria-pressed={on}
+                      aria-label={`${t}-Tier at ${DEGREE_NAMES[d]} degree`}
+                      title={people
+                        ? `${people.toLocaleString('en-US')} ${t}-Tier at ${DEGREE_NAMES[d]} degree. Tap to ${on ? 'hide' : 'show'} them`
+                        : `No ${t}-Tier at ${DEGREE_NAMES[d]} degree yet`}
+                      onClick={() => onChange(toggleCell(grid, t, d, counts))}
+                      style={{
+                        width: dot, height: dot, padding: 0, borderRadius: '50%', boxSizing: 'border-box',
+                        cursor: people ? 'pointer' : 'default', fontSize: 10, fontWeight: 800, lineHeight: 1,
+                        border: !people ? '1px dashed rgba(255,255,255,0.1)' : on ? `1.5px solid ${color}` : `1.5px solid ${color}70`,
+                        background: on ? color : 'transparent',
+                        color: !people ? 'rgba(255,255,255,0.12)' : on ? '#0a0a1a' : `${color}b0`,
+                        opacity: off && people ? 0.45 : 1,
+                      }}>
+                      {d}
+                    </button>
+                  );
+                })}
+              </div>
+              <div style={{ width: 44, textAlign: 'right', paddingRight: 8, fontSize: 10.5, color: off || !n ? '#445' : '#889', fontVariantNumeric: 'tabular-nums' }}>
+                {n.toLocaleString('en-US')}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
+        <div style={{ fontSize: 10, color: '#667', lineHeight: 1.4 }}>
+          Tap a tier to hide it, or a dot to show that degree.
+        </div>
+        <div style={{ fontSize: 10.5, color: '#889', whiteSpace: 'nowrap', marginLeft: 8 }}>
+          {total.toLocaleString('en-US')} showing
+          {grid.hidden.length > 0 && (
+            <button type="button" onClick={() => onChange(showAllTiers(grid))} style={{
+              marginLeft: 8, padding: '2px 8px', borderRadius: 10, fontSize: 10, cursor: 'pointer',
+              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.05)', color: '#aab',
+            }}>All tiers</button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function FilterPanel({ collapsed, onToggle, mode, visualMode, grid, gridCounts = {}, onGridChange }) {
   const isMobile = useIsMobile();
   const isDegreesMode = mode === 'degrees';
-  // Network Circle: each tier switches on and off, so the noisy ones (C, D) can go
-  // while the rest stay. Degrees keeps one tier at a time.
-  const toggles = !isDegreesMode && !!onHiddenTiersChange;
-  // Same source of truth the renderer uses, so the menu can never offer a
-  // view that does not exist or miss one that does.
-  const modes = viewsForMode(isDegreesMode ? 'degrees' : 'network');
-  const counts = isDegreesMode ? (bridgeTierCounts || {}) : (tierCounts || {});
-  const allCount = isDegreesMode
-    ? Object.values(bridgeTierCounts || {}).reduce((s, v) => s + v, 0)
-    : Object.values(tierCounts || {}).reduce((s, v) => s + v, 0);
 
   if (collapsed) {
     return (
@@ -80,178 +185,11 @@ export default function FilterPanel({ collapsed, onToggle, mode, filter, onFilte
           <span style={{ fontSize: 16 }}>›</span> Close
         </button>
 
-        {/* Visual Mode */}
-        <div style={{ marginBottom: 18 }}>
-          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
-            Visual
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-            {modes.map(m => (
-              <button
-                key={m.key}
-                onClick={() => onVisualModeChange && onVisualModeChange(m.key)}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px',
-                  borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%', textAlign: 'left',
-                  background: visualMode === m.key ? 'rgba(52,152,219,0.15)' : 'rgba(255,255,255,0.03)',
-                  color: visualMode === m.key ? '#3498DB' : '#888',
-                  transition: 'all 0.15s',
-                }}
-              >
-                <span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>{m.icon}</span>
-                <div>
-                  <div style={{ fontSize: 11, fontWeight: 600 }}>{m.label}</div>
-                  <div style={{ fontSize: 8, color: '#555', marginTop: 1 }}>{m.desc}</div>
-                </div>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Tier Filters */}
-        {/* Network Circle: which degrees to draw. Any mix, never none: 2nd and
-            3rd without your own connections shows who's valuable outside them. */}
-        {!isDegreesMode && onDegreesChange && (
-          <div style={{ marginBottom: 18 }}>
-            <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
-              Degree
-            </div>
-            <div style={{ display: 'flex', gap: 6 }}>
-              {[[1, '1st', 'Your connections'], [2, '2nd', 'In a scanned circle'], [3, '3rd', 'Found by a company scan']].map(([d, label, what]) => {
-                const on = degrees.includes(d);
-                const count = degreeCounts[d] || 0;
-                const last = on && degrees.length === 1;
-                return (
-                  <button
-                    key={d}
-                    title={`${what}: ${count.toLocaleString()}${last ? ' (keep at least one)' : ''}`}
-                    aria-pressed={on}
-                    disabled={last || (!on && !count)}
-                    onClick={() => onDegreesChange(on ? degrees.filter((x) => x !== d) : [...degrees, d].sort())}
-                    style={{
-                      flex: 1, padding: '7px 4px', borderRadius: 8, fontSize: 11.5, fontWeight: 700,
-                      cursor: last || (!on && !count) ? 'default' : 'pointer',
-                      border: on ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(255,255,255,0.08)',
-                      background: on ? 'rgba(52,152,219,0.18)' : 'rgba(255,255,255,0.03)',
-                      color: on ? '#cfe6f7' : count ? '#888' : '#444',
-                    }}
-                  >
-                    {label}
-                    <div style={{ fontSize: 9.5, fontWeight: 500, opacity: 0.8, marginTop: 2 }}>{count.toLocaleString()}</div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        )}
-
-        {!isDegreesMode && visualMode === 'galaxy' && <NamesSwitch />}
+        {/* Which tiers, at which degrees: the same grid in Network Circle and in Degrees */}
+        <TierGrid grid={grid} counts={gridCounts} onChange={onGridChange} mode={isDegreesMode ? 'degrees' : 'network'} isMobile={isMobile} />
 
-        <div style={{ marginBottom: 18 }}>
-          {/* In Degrees these chips filter by the tier of the connection who
-              introduces you, not the person reached — Separation has its own
-              "Their tier" chips for that, so the two must not read alike. */}
-          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
-            {isDegreesMode ? 'Filter by bridge tier' : 'Filter'}
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-            {/* All button */}
-            <button
-              onClick={() => (toggles ? onHiddenTiersChange([]) : onFilterChange && onFilterChange('all'))}
-              style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '7px 10px', borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%',
-                background: (toggles ? !hiddenTiers.length : filter === 'all') ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.03)',
-                color: (toggles ? !hiddenTiers.length : filter === 'all') ? '#fff' : '#888',
-              }}
-            >
-              <span style={{ fontSize: 11, fontWeight: 600 }}>All</span>
-              <span style={{ fontSize: 10, color: '#555' }}>{allCount}</span>
-            </button>
-            {/* Tier buttons */}
-            {toggles && (
-              <div style={{ fontSize: 10, color: '#667', margin: '2px 2px 4px' }}>Click a tier to hide or show it</div>
-            )}
-            {toggles && ['S', 'A', 'B', 'C', 'D'].map(t => {
-              const on = !hiddenTiers.includes(t);
-              const last = on && hiddenTiers.length >= 4;
-              return (
-                <button
-                  key={t}
-                  aria-pressed={on}
-                  title={last ? 'Keep at least one tier showing' : on ? `Hide ${t}-Tier` : `Show ${t}-Tier`}
-                  onClick={() => !last && onHiddenTiersChange(on ? [...hiddenTiers, t] : hiddenTiers.filter(x => x !== t))}
-                  style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '7px 10px', borderRadius: 6, border: 'none', cursor: last ? 'default' : 'pointer', width: '100%',
-                    background: on ? `${TIER_COLORS[t]}14` : 'rgba(255,255,255,0.02)',
-                    color: on ? TIER_COLORS[t] : '#555',
-                    borderLeft: on ? `3px solid ${TIER_COLORS[t]}` : '3px solid transparent',
-                  }}
-                >
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: TIER_COLORS[t], opacity: on ? 1 : 0.2 }} />
-                    <span style={{ fontSize: 11, fontWeight: 600, textDecoration: on ? 'none' : 'line-through' }}>{t}-Tier</span>
-                    {!on && <span style={{ fontSize: 9.5, color: '#667' }}>hidden</span>}
-                  </div>
-                  <span style={{ fontSize: 10, color: '#555' }}>{counts[t] || 0}</span>
-                </button>
-              );
-            })}
-            {!toggles && ['S', 'A', 'B', 'C', 'D'].map(t => (
-              <button
-                key={t}
-                onClick={() => onFilterChange && onFilterChange(t)}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '7px 10px', borderRadius: 6, border: 'none', cursor: 'pointer', width: '100%',
-                  background: filter === t ? `${TIER_COLORS[t]}20` : 'rgba(255,255,255,0.03)',
-                  color: filter === t ? TIER_COLORS[t] : '#888',
-                  borderLeft: filter === t ? `3px solid ${TIER_COLORS[t]}` : '3px solid transparent',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <div style={{
-                    width: 8, height: 8, borderRadius: '50%',
-                    background: TIER_COLORS[t], opacity: filter === t ? 1 : 0.4,
-                  }} />
-                  <span style={{ fontSize: 11, fontWeight: 600 }}>{t}-Tier</span>
-                </div>
-                <span style={{ fontSize: 10, color: '#555' }}>{counts[t] || 0}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* The Galaxy's physics lab (experimental): sliders and a replay, on a computer. */}
-        {!isDegreesMode && visualMode === 'galaxy' && !isMobile && <GalaxyLab />}
-
-        {/* Stats */}
-        <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
-          <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>
-            Stats
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
-            {Object.entries(counts).filter(([k]) => ['S', 'A', 'B'].includes(k)).map(([tier, count]) => (
-              <div key={tier} style={{
-                padding: '6px 8px', borderRadius: 6,
-                background: `${TIER_COLORS[tier]}10`,
-                textAlign: 'center',
-              }}>
-                <div style={{ fontSize: 16, fontWeight: 800, color: TIER_COLORS[tier] }}>{count}</div>
-                <div style={{ fontSize: 8, color: '#555' }}>{tier}-Tier</div>
-              </div>
-            ))}
-            <div style={{
-              padding: '6px 8px', borderRadius: 6,
-              background: 'rgba(255,255,255,0.04)',
-              textAlign: 'center',
-            }}>
-              <div style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>{allCount}</div>
-              <div style={{ fontSize: 8, color: '#555' }}>Total</div>
-            </div>
-          </div>
-        </div>
+        {/* Network Circle's Galaxy: the physics that lays it out is what this panel is for. */}
+        {!isDegreesMode && visualMode === 'galaxy' && (isMobile ? <NamesSwitch /> : <GalaxyLab />)}
       </div>
     </div>
   );

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

@@ -6,7 +6,7 @@ import { localPhoto } from '../../lib/photos';
 import { recentre } from '../../lib/galaxy';
 import { reachIndex, readyByCircle, scanBars } from '../../lib/reach';
 import { ringSegments, RING } from '../../lib/dot-rings';
-import { LAB_DEFAULTS, labNow, watchLab, effectiveLab, clockNow, watchClock, setClock, stopReplay, bornTimes, reachCounts, colourScheme, findMatches, loadSocial, chapterAt } from '../../lib/galaxy-lab';
+import { LAB_DEFAULTS, labNow, watchLab, effectiveLab, clockNow, watchClock, setClock, stopReplay, bornTimes, reachCounts, colourScheme, findMatches, loadSocial, chapterAt, heatColour } from '../../lib/galaxy-lab';
 import { registerGalaxy } from '../../lib/galaxy-export';
 
 // Connection fields are attacker-reachable: /api/ingest and /api/update-images
@@ -23,6 +23,7 @@ function esc(value) {
 // The id of the node at the centre, you. Not a connection's id (those come from
 // the database), and never shown.
 const CENTER_ID = '__center__';
+const HEAT_GLOWS = 700;   // glows drawn under Colour by → Heat, hottest first
 
 // Builds the avatar tooltip through the DOM rather than a string, so no value
 // can break out of the attribute it is written into. Only a photo saved on this
@@ -510,6 +511,30 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     }
   });
 
+  // Heat (Colour by → Heat): a soft glow behind the hotter dots, screen-blended
+  // so the glows add up where powerful people cluster, like a thermal camera.
+  // The hottest HEAT_GLOWS only, so a big network stays smooth.
+  let heatFn = scheme?.heat || null;
+  const heatDefs = svg.select('defs').size() ? svg.select('defs') : svg.append('defs');
+  for (let k = 0; k <= 5; k++) {
+    if (heatDefs.select(`#heat-glow-${k}`).size()) continue;
+    const grad = heatDefs.append('radialGradient').attr('id', `heat-glow-${k}`);
+    grad.append('stop').attr('offset', '0').attr('stop-color', heatColour(k / 5)).attr('stop-opacity', 0.14 + 0.06 * k);
+    grad.append('stop').attr('offset', '1').attr('stop-color', heatColour(k / 5)).attr('stop-opacity', 0);
+  }
+  const heatG = g.append('g').attr('class', 'heat-glow').style('pointer-events', 'none').style('mix-blend-mode', 'screen');
+  let heatDots = heatG.selectAll('circle');
+  const drawHeat = () => {
+    const hot = heatFn
+      ? nodes.filter(n => n.id !== CENTER_ID && heatFn(n) >= 0.5).sort((a, b) => heatFn(b) - heatFn(a)).slice(0, HEAT_GLOWS)
+      : [];
+    heatDots = heatG.selectAll('circle').data(hot, d => d.id).join('circle')
+      .attr('r', d => nodeRadius(d) * 2.5 + 12 + 30 * heatFn(d))
+      .attr('fill', d => `url(#heat-glow-${Math.round(heatFn(d) * 5)})`)
+      .attr('cx', d => d.x || 0).attr('cy', d => d.y || 0)
+      .style('display', d => (clockAt == null || bornById.get(d.id) <= clockAt ? null : 'none'));
+  };
+
   // forceLink has already swapped each link's ids for the nodes themselves, so
   // the colour is one step away. It used to search every node for every link:
   // about 1.8 s at 30,000 people.
@@ -612,8 +637,12 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     g.classed('lab-focus', true);
   };
 
+  // Moving from one dot to the next shouldn't flash the whole Galaxy back on in
+  // between: the dimming lifts a moment after the pointer leaves, unless it lands on another.
+  let unlight = null;
   node.on('mouseover', function (event, d) {
     easeRadius(this, nodeRadius(d) * 1.5);
+    clearTimeout(unlight);
     if (L.on && L.branch && d.id !== CENTER_ID) lightBranch(d);
     if (d.profile_image_url && d.id !== CENTER_ID) {
       const size = Math.max(48, nodeRadius(d) * 5);
@@ -642,7 +671,8 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     }
   }).on('mouseout', function (event, d) {
     easeRadius(this, nodeRadius(d));
-    g.classed('lab-focus', false);
+    clearTimeout(unlight);
+    unlight = setTimeout(() => g.classed('lab-focus', false), 120);
     tooltip.style('opacity', 0);
     photoTooltip.style('opacity', 0);
   });
@@ -686,6 +716,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     catalystRings.attr('cx', d => d.x).attr('cy', d => d.y);
     dotRings.attr('transform', d => `translate(${d.x},${d.y})`);
     labels.attr('x', d => d.x).attr('y', d => d.y);
+    if (heatFn) heatDots.attr('cx', d => d.x).attr('cy', d => d.y);
     placeRing();
   });
 
@@ -735,7 +766,12 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   const dated = d1.map(n => bornById.get(n.id)).filter(Number.isFinite);
   const range = { min: dated.length ? dated.reduce((m, t) => Math.min(m, t)) : null, max: dated.length ? dated.reduce((m, t) => Math.max(m, t)) : null, of: d1.length };
   let clockAt = null;
-  const showBorn = () => labels.style('display', d => (clockAt == null || bornById.get(d.id) <= clockAt ? null : 'none'));
+  const showBorn = () => {
+    const born = d => (clockAt == null || bornById.get(d.id) <= clockAt ? null : 'none');
+    labels.style('display', born);
+    if (heatFn) heatDots.style('display', born);
+  };
+  drawHeat();
   const setTime = (at) => {
     if (!L.on) at = null;
     clockAt = at;
@@ -763,6 +799,8 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // A new colour scheme (Colour by): recolour the dots, lines and names in place.
   const setColours = (next) => {
     colourOf = next.of;
+    heatFn = next.heat || null;
+    drawHeat();
     node.attr('fill', d => d.id === CENTER_ID ? '#fff' : colourOf(d));
     link.attr('stroke', d => colourOf(d.target) || '#333');
     drawLabels();