six-degrees 0.6.0 → 0.7.0

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

@@ -36,7 +36,9 @@ import { circleIndex, MAX_DEGREE } from '../../lib/circle';
 import { localPhoto } from '../../lib/photos';
 import { reachIndex, reachState, circleState, readyByCircle, circleScanCost, scanBars } from '../../lib/reach';
 import { reachSegments, RING } from '../../lib/dot-rings';
-import { ringLayout, chainTree, dotRadius, previewBand, tierBandLayout } from '../../lib/chain-layout';
+import { ringLayout, chainTree, dotRadius, previewBand, tierBandLayout, circleActivity } from '../../lib/chain-layout';
+import { noteCircle } from '../../lib/notifications';
+import { useUser } from './UserProvider';
 import { redundancy } from '../../lib/brokerage';
 import { keyFor, score } from '../../lib/separation';
 import { hasRequest } from '../../lib/requests-client';
@@ -175,6 +177,17 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   const index = useMemo(() => circleIndex(all1, all2), [all1, all2]);
   const reach = useMemo(() => reachIndex(all1, all2, scanNotes), [all1, all2, scanNotes]);
   const readyCount = useMemo(() => readyByCircle(reach), [reach]);
+  // The notifications, by the circle each is about: the busiest circles go on the inner ring.
+  const { userId } = useUser();
+  const [notes, setNotes] = useState([]);
+  useEffect(() => {
+    if (!userId) return undefined;
+    let live = true;
+    fetch(`/api/notifications?userId=${encodeURIComponent(userId)}`).then((r) => r.json())
+      .then((d) => { if (live) setNotes((d.notifications || []).map((n) => ({ circle: noteCircle(n), seen: !!n.seen }))); })
+      .catch(() => {});
+    return () => { live = false; };
+  }, [userId]);
   const twoWays = useMemo(() => redundancy(fullDegree2 || degree2, fullDegree1 || connections), [fullDegree2, degree2, fullDegree1, connections]);
   const rowById = useMemo(() => {
     const m = new Map();
@@ -240,7 +253,12 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
     }
     return withCircle.has(b.unlocked_from_bridge_id);
   };
-  const roots = bridges.filter((b) => !linked(b));
+  // The inner ring holds the circles with the most going on (lib/chain-layout.js
+  // circleActivity): notifications about them, people in them ready to scan,
+  // clusters formed from them since. The biggest first among the rest.
+  const activity = circleActivity(bridges, { notes, ready: readyCount, chained });
+  const roots = bridges.filter((b) => !linked(b))
+    .sort((a, b) => activity.get(b.id).score - activity.get(a.id).score);
   // Bridges round you: one ring while they fit, more once there are many, each
   // ring far enough from the last for the names under it.
   const bridgeLayout = ringLayout(roots.length, {
@@ -248,7 +266,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   });
   const bridgePos = roots.map((b, i) => {
     const p = bridgeLayout.points[i];
-    return { ...b, x: cx + p.x, y: cy + p.y, angle: p.angle, clusterSize: (bridgeMap[b.id] || []).length, chains: chained.get(b.id) || 0 };
+    return { ...b, x: cx + p.x, y: cy + p.y, angle: p.angle, clusterSize: (bridgeMap[b.id] || []).length, chains: chained.get(b.id) || 0, activity: activity.get(b.id) };
   });
   // More than one ring: the counts under each name wait for a hover.
   const crowded = bridgeLayout.rings.length > 1;
@@ -339,8 +357,8 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
 
         {/* Their circle, previewed on hover, in a wedge that grows rows as it fills */}
         {hovBridge && (
-          <CirclePreview bridge={hovBridge} members={membersOf(hovBridge, index)} reach={reach}
-            cx={cx} cy={cy} maxR={maxR} still={still} band={band} />
+          <CirclePreview key={hovBridge.id} bridge={hovBridge} members={membersOf(hovBridge, index)} reach={reach}
+            cx={cx} cy={cy} maxR={maxR} still={still} band={band} circleOf={(id) => bridgeMap[id] || []} />
         )}
 
         {/* Bridge nodes — hover to preview their circle, click to open it */}
@@ -357,7 +375,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
               style={{ cursor: 'pointer' }}>
               <title>{bridgeTitle(b, ready, scanBars(b, reach))}</title>
               {/* Glow */}
-              <circle cx={b.x} cy={b.y} r={isHov ? 21 : 18} fill={`${TIER_COLORS[b.tier]}${isHov ? '14' : '08'}`} />
+              <circle className="sd-dot" cx={b.x} cy={b.y} r={isHov ? 21 : 18} fill={`${TIER_COLORS[b.tier]}${isHov ? '14' : '08'}`} />
               {/* The ring, tight on the dot: one bar for each person you added through
                   this circle. Orange: scanned since, with a cluster of their own.
                   Green: ready for a scan. Nobody yet: one faint line. */}
@@ -371,9 +389,9 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
                 ))}
               </g>
               {/* Node */}
-              <circle cx={b.x} cy={b.y} r={isHov ? 13 : 11}
+              <circle className="sd-dot" cx={b.x} cy={b.y} r={isHov ? 13 : 11}
                 fill={localPhoto(b.profile_image_url) ? '#1a1a2e' : TIER_COLORS[b.tier]}
-                stroke={isHov ? '#fff' : TIER_COLORS[b.tier]}
+                stroke={isHov ? 'var(--sd-fg-1, #fff)' : TIER_COLORS[b.tier]}
                 strokeWidth={isHov ? 2.5 : 2} />
               {/* Photo */}
               {localPhoto(b.profile_image_url) && (
@@ -384,22 +402,30 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
                 </>
               )}
               {!localPhoto(b.profile_image_url) && (
-                <text x={b.x} y={b.y + 4} textAnchor="middle" fill={b.tier === 'S' ? '#000' : '#fff'}
+                <text x={b.x} y={b.y + 4} textAnchor="middle" fill={b.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)'}
                   fontSize={11} fontWeight={700}>{b.name?.charAt(0)}</text>
               )}
-              {/* How many in their circle are waiting for a scan: a small outlined number, top right */}
-              {ready > 0 && (
-                <g pointerEvents="none">
-                  <circle cx={b.x + 14} cy={b.y - 14} r={6} fill="var(--sd-bg)" stroke={GREEN} strokeWidth={1.2} />
-                  <text x={b.x + 14} y={b.y - 11.4} textAnchor="middle" fill={GREEN} fontSize={ready > 9 ? 6 : 7} fontWeight={800}>{ready > 99 ? '99+' : ready}</text>
-                </g>
-              )}
+              {/* The circle's notifications, top right (Blake, 2026-10-02: "the circle degree
+                  outline on the top right with the number of notifications for that cluster"):
+                  new notifications about it and the people in it ready to scan. Gold when
+                  there's news, green when it's only people ready. */}
+              {(() => {
+                const news = (b.activity?.unread || 0) + ready;
+                if (!news) return null;
+                const tone = b.activity?.unread ? 'var(--sd-gold, #FFD700)' : 'var(--sd-green, #00ff88)';   // deeper on a light look
+                return (
+                  <g pointerEvents="none">
+                    <circle cx={b.x + 14} cy={b.y - 14} r={6} fill="var(--sd-bg)" stroke={tone} strokeWidth={1.2} />
+                    <text x={b.x + 14} y={b.y - 11.4} textAnchor="middle" fill={tone} fontSize={news > 9 ? 6 : 7} fontWeight={800}>{news > 99 ? '99+' : news}</text>
+                  </g>
+                );
+              })()}
               {/* Name + count */}
-              <text x={b.x} y={b.y + (isHov ? 24 : 22)} textAnchor="middle" fill="#fff" fontSize={9} fontWeight={600}>
+              <text x={b.x} y={b.y + (isHov ? 24 : 22)} textAnchor="middle" fill="var(--sd-fg-1, #fff)" fontSize={9} fontWeight={600}>
                 {b.name?.split(' ')[0]}
               </text>
               {(!crowded || isHov) && (
-                <text x={b.x} y={b.y + (isHov ? 34 : 32)} textAnchor="middle" fill={isHov ? '#bbb' : '#888'} fontSize={7}>
+                <text x={b.x} y={b.y + (isHov ? 34 : 32)} textAnchor="middle" fill={isHov ? 'var(--sd-fg-2, #bbb)' : 'var(--sd-fg-3, #888)'} fontSize={7}>
                   {b.clusterSize} · {sCount > 0 ? sCount + 'S ' : ''}{aCount > 0 ? aCount + 'A' : ''}
                 </text>
               )}
@@ -409,7 +435,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
 
         {/* Center: YOU */}
         <circle cx={cx} cy={cy} r={22} fill="var(--sd-bg)" stroke="#FFD700" strokeWidth={3} />
-        <text x={cx} y={cy + 4} textAnchor="middle" fill="#FFD700" fontSize={11} fontWeight={800}>
+        <text x={cx} y={cy + 4} textAnchor="middle" fill="var(--sd-gold, #FFD700)" fontSize={11} fontWeight={800}>
           {userName?.split(' ')[0] || 'YOU'}
         </text>
       </g>
@@ -422,41 +448,35 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
         onOut={() => setZoom(z => Math.max(0.4, (z ?? homeZoom) - 0.3))}
       />
 
-      {/* Depth tracker */}
-      <div style={{
-        position: 'absolute', bottom: 16, left: 12,
-        background: 'rgba(0,0,0,0.75)', borderRadius: 10, padding: '10px 14px',
-        backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.06)',
-        maxWidth: 'calc(100vw - 80px)',
-      }}>
-        <div style={{ fontSize: 9, fontWeight: 700, color: '#666', letterSpacing: 1.5, marginBottom: 8 }}>DEGREES OF SEPARATION</div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          {[1, 2, 3, 4, 5, 6].map(d => (
-            <div key={d} style={{ textAlign: 'center' }}>
-              <div style={{
-                width: 28, height: 28, borderRadius: '50%', fontSize: 11, fontWeight: 800,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                background: d <= 2 ? DEGREE_COLORS[d] : 'rgba(255,255,255,0.04)',
-                color: d <= 2 ? '#000' : '#333',
-                border: d <= 2 ? 'none' : '1px solid rgba(255,255,255,0.08)',
-                boxShadow: d <= 2 ? `0 0 6px ${DEGREE_COLORS[d]}30` : 'none',
-              }}>D{d}</div>
-              <div style={{ fontSize: 7, color: d <= 2 ? '#aaa' : '#333', marginTop: 3 }}>
-                {d === 1 ? connections.length : d === 2 ? totalD2 : '—'}
-              </div>
+      {/* Depth tracker: just the dots, no box (Blake, 2026-10-03: the box grew with
+          a theme's font and stopped fitting; "just have the dots there instead so
+          its more clean looking"). What they add up to is the tooltip. */}
+      <div
+        title={[
+          `${roots.length} bridges${bridges.length > roots.length ? ` + ${bridges.length - roots.length} along their chains` : ''} · ${d2S} S + ${d2A} A at 2nd degree`,
+          twoWays > 0 ? `${Math.round(twoWays * 100)}% of your 2nd degree you reach two or more ways` : null,
+          'The inner ring: the circles with the most going on (notifications, people ready to scan, clusters formed since)',
+          'Click a bridge to open their circle, then anyone in it to open theirs',
+        ].filter(Boolean).join('\n')}
+        style={{ position: 'absolute', bottom: 16, left: 16, display: 'flex', alignItems: 'flex-end', gap: 12 }}>
+        {[1, 2, 3, 4, 5, 6].map((d) => {
+          const lit = d <= 2;
+          const n = d === 1 ? connections.length : d === 2 ? totalD2 : null;
+          return (
+            <div key={d} title={lit ? `${d === 1 ? '1st degree: your bridges' : '2nd degree: the people in their circles'} (${n.toLocaleString('en-US')})` : `${d}th degree: further along a chain, as your scans reach it`}
+              style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+              <span className={lit ? 'sd-dot-html' : undefined} style={{
+                width: 11, height: 11, borderRadius: '50%',
+                background: lit ? DEGREE_COLORS[d] : 'transparent',
+                border: lit ? 'none' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.22)',
+                boxShadow: lit ? `0 0 8px ${DEGREE_COLORS[d]}80` : 'none',
+              }} />
+              <span style={{ fontSize: 9.5, fontWeight: 700, color: lit ? 'var(--sd-fg-2, #c8cdd8)' : 'var(--sd-fg-5, #556)', fontVariantNumeric: 'tabular-nums', textShadow: HALO_TEXT }}>
+                {lit ? n.toLocaleString('en-US') : `D${d}`}
+              </span>
             </div>
-          ))}
-        </div>
-        <div style={{ fontSize: 9, color: '#555', marginTop: 8 }}>
-          {roots.length} bridges{bridges.length > roots.length ? ` + ${bridges.length - roots.length} along their chains` : ''} · {d2S} S + {d2A} A at 2nd degree
-        </div>
-        {twoWays > 0 && (
-          <div style={{ fontSize: 9, color: '#555', marginTop: 4 }}
-            title="The share of everyone you reach through a circle that more than one of your connections reaches">
-            {Math.round(twoWays * 100)}% of your 2nd degree you reach two or more ways
-          </div>
-        )}
-        <div style={{ fontSize: 8, color: '#444', marginTop: 4 }}>Click a bridge to open their circle, then anyone in it to open theirs</div>
+          );
+        })}
       </div>
     </div>
   );
@@ -465,6 +485,8 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
 /** What a bridge's ring and number mean, in words, for its tooltip. */
 function bridgeTitle(b, ready, bars) {
   const parts = [];
+  const notes = b.activity?.notes || 0;
+  if (notes) parts.push(`${notes} notification${notes === 1 ? '' : 's'} about their circle${b.activity.unread ? `, ${b.activity.unread} new` : ''}`);
   if (ready) parts.push(`${ready} in ${firstName(b)}’s circle ${ready === 1 ? 'is' : 'are'} ready for a scan`);
   if (b.chains) parts.push(`${b.chains} scanned since, with ${b.chains === 1 ? 'a cluster' : 'clusters'} of their own`);
   if (bars != null) parts.push(bars === 5 ? 'their whole list is scanned' : `about ${bars * 20}% of their list is scanned`);
@@ -472,7 +494,34 @@ function bridgeTitle(b, ready, bars) {
 }
 
 /** A bridge's circle on hover: the people you reached through it first, then their S, A and B. */
-function CirclePreview({ bridge, members, reach, cx, cy, maxR, still, band }) {
+// The preview grows out of the bridge when you hover it (Blake, 2026-10-03: "the
+// d2,3,4 clusters emerging out of the circle in the preview to show the grow but
+// make it quick and snappy"): their circle's people shoot out to their places,
+// then anyone among them whose own circle is scanned sprouts it (3rd degree),
+// then theirs (4th). Under half a second in all; still with Reduce Motion.
+const PREVIEW_CSS = `
+@keyframes pvEmerge { from { transform: translate(var(--fx), var(--fy)) scale(0.2); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
+@keyframes pvFade { from { opacity: 0; } }
+.pv-dot { transform-box: fill-box; transform-origin: center; animation: pvEmerge .24s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: var(--d, 0ms); }
+.pv-d3 { animation-duration: .22s; animation-delay: calc(150ms + var(--d, 0ms)); }
+.pv-d4 { animation-duration: .2s; animation-delay: calc(270ms + var(--d, 0ms)); }
+.pv-line { animation: pvFade .3s ease-out both; animation-delay: var(--d, 0ms); }
+@media (prefers-reduced-motion: reduce) { .pv-dot, .pv-line { animation: none; } }
+`;
+const SPROUT = 14;   // the most of a circle's own circle drawn round them
+const SPROUT_4 = 8;
+
+/** Where someone's own circle sprouts round their dot: an arc facing away from the middle. */
+function sprout(n, x, y, cx, cy, r) {
+  const out = Math.atan2(y - cy, x - cx);
+  const spread = Math.min(Math.PI * 1.1, 0.5 + n * 0.16);
+  return Array.from({ length: n }, (_, i) => {
+    const a = out - spread / 2 + (n === 1 ? spread / 2 : (i * spread) / (n - 1));
+    return { x: x + Math.cos(a) * r, y: y + Math.sin(a) * r };
+  });
+}
+
+function CirclePreview({ bridge, members, reach, cx, cy, maxR, still, band, circleOf = () => [] }) {
   const shown = members.filter((m) => m.degree === 1 || m.tier === 'S' || m.tier === 'A' || m.tier === 'B');
   // Beyond every ring of bridges (lib/chain-layout.js previewBand).
   const { inner, outer } = band;
@@ -480,8 +529,12 @@ function CirclePreview({ bridge, members, reach, cx, cy, maxR, still, band }) {
   const layout = ringLayout(shown.length, {
     inner, outer, spacing: 11, minSpacing: 3.5, start: bridge.angle - sweep / 2, sweep,
   });
+  // Spread the start of each dot over a tenth of a second, wherever it sits.
+  const stagger = (j) => `${Math.round((j / Math.max(1, shown.length)) * 110)}ms`;
+  const from = (x, y, ox, oy) => ({ '--fx': `${(ox - x).toFixed(1)}px`, '--fy': `${(oy - y).toFixed(1)}px` });
   return (
     <g>
+      <style>{PREVIEW_CSS}</style>
       <circle cx={cx} cy={cy} r={inner} fill="none" stroke={`${DEGREE_COLORS[2]}06`} strokeWidth={1} />
       {shown.map((d2, j) => {
         const p = layout.points[j];
@@ -490,21 +543,44 @@ function CirclePreview({ bridge, members, reach, cx, cy, maxR, still, band }) {
         const state = reachState(d2, reach);
         const nr = Math.min(dotRadius(layout.spacing, d2.tier), 5) * (state ? 1.3 : 1);
         const color = state === 'hidden' ? HIDDEN : TIER_COLORS[d2.tier] || '#555';
+        // Their own circle, if it's scanned: the 3rd degree, and inside it the 4th.
+        const own = d2.degree === 1 ? circleOf(d2.id) : [];
+        const third = own.slice(0, SPROUT);
+        const thirdAt = sprout(third.length, x2, y2, cx, cy, nr + 9);
         return (
           <g key={'pv-' + d2.id}>
             {(state || shown.length <= 40) && (
-              <line x1={bridge.x} y1={bridge.y} x2={x2} y2={y2}
+              <line className="pv-line" style={{ '--d': stagger(j) }} x1={bridge.x} y1={bridge.y} x2={x2} y2={y2}
                 stroke={state ? GREEN : color} strokeWidth={0.5} strokeOpacity={state ? 0.35 : 0.15} />
             )}
-            {state === 'ready' && <Halo x={x2} y={y2} r={nr * 2.3} still={still} />}
-            <circle cx={x2} cy={y2} r={nr}
-              fill={color} fillOpacity={state ? 0.95 : 0.45}
-              stroke={state && state !== 'hidden' ? GREEN : color} strokeWidth={state ? 1 : 0.5} strokeOpacity={state ? 1 : 0.25} />
-            {(d2.tier === 'S' || state) && shown.length <= 60 && (
-              <text x={x2} y={y2 + nr + 9} textAnchor="middle" fill={state && state !== 'hidden' ? GREEN : '#aaa'} fontSize={7}>
-                {firstName(d2)}
-              </text>
-            )}
+            <g className="pv-dot" style={{ '--d': stagger(j), ...from(x2, y2, bridge.x, bridge.y) }}>
+              {state === 'ready' && <Halo x={x2} y={y2} r={nr * 2.3} still={still} />}
+              <circle className="sd-dot" cx={x2} cy={y2} r={nr}
+                fill={color} fillOpacity={state ? 0.95 : 0.45}
+                stroke={state && state !== 'hidden' ? GREEN : color} strokeWidth={state ? 1 : 0.5} strokeOpacity={state ? 1 : 0.25} />
+              {(d2.tier === 'S' || state) && shown.length <= 60 && (
+                <text x={x2} y={y2 + nr + 9} textAnchor="middle" fill={state && state !== 'hidden' ? GREEN : 'var(--sd-fg-3, #aaa)'} fontSize={7}>
+                  {firstName(d2)}
+                </text>
+              )}
+            </g>
+            {third.map((k, i) => {
+              const t = thirdAt[i];
+              const fourth = k.degree === 1 ? circleOf(k.id).slice(0, SPROUT_4) : [];
+              const fourthAt = sprout(fourth.length, t.x, t.y, x2, y2, 6);
+              return (
+                <g key={'p3-' + k.id}>
+                  <line className="pv-line" style={{ '--d': `calc(150ms + ${stagger(j)})` }} x1={x2} y1={y2} x2={t.x} y2={t.y}
+                    stroke={TIER_COLORS[k.tier] || '#555'} strokeWidth={0.4} strokeOpacity={0.3} />
+                  <circle className="pv-dot pv-d3" style={{ '--d': `${i * 8}ms`, ...from(t.x, t.y, x2, y2) }}
+                    cx={t.x} cy={t.y} r={1.8} fill={TIER_COLORS[k.tier] || '#555'} fillOpacity={0.85} />
+                  {fourth.map((f, q) => (
+                    <circle key={'p4-' + f.id} className="pv-dot pv-d4" style={{ '--d': `${q * 6}ms`, ...from(fourthAt[q].x, fourthAt[q].y, t.x, t.y) }}
+                      cx={fourthAt[q].x} cy={fourthAt[q].y} r={1.1} fill={TIER_COLORS[f.tier] || '#555'} fillOpacity={0.75} />
+                  ))}
+                </g>
+              );
+            })}
           </g>
         );
       })}
@@ -527,7 +603,7 @@ function Lock({ x, y, s }) {
   return (
     <g transform={`translate(${x} ${y}) scale(${s})`} pointerEvents="none">
       <path d="M-1.9 -0.6 V-1.8 A1.9 1.9 0 0 1 1.9 -1.8 V-0.6" fill="none" stroke="#d6d6de" strokeWidth={0.9} />
-      <rect x={-2.6} y={-0.7} width={5.2} height={3.9} rx={0.8} fill="#d6d6de" />
+      <rect x={-2.6} y={-0.7} width={5.2} height={3.9} rx={0.8} fill="var(--sd-fg-2, #d6d6de)" />
     </g>
   );
 }
@@ -535,7 +611,7 @@ function Lock({ x, y, s }) {
 function ZoomButtons({ onIn, onReset, onOut }) {
   const round = (dim) => ({
     width: 32, height: 32, borderRadius: '50%', border: 'none', cursor: 'pointer',
-    background: dim ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.1)', color: dim ? '#666' : '#fff',
+    background: dim ? 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', color: dim ? 'var(--sd-fg-4, #666)' : 'var(--sd-fg-1, #fff)',
     fontSize: dim ? 10 : 18, fontWeight: 700,
     display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(8px)',
   });
@@ -683,7 +759,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
             <circle cx={p.x} cy={p.y} r={r * 1.2} fill="none" stroke={color} strokeWidth={Math.max(0.6, r * 0.45)}
               strokeDasharray={`${Math.max(0.8, r * 0.55)} ${Math.max(0.6, r * 0.45)}`} />
           ) : (
-            <circle cx={p.x} cy={p.y} r={r} fill={color} fillOpacity={f.reached ? 1 : 0.85}
+            <circle className="sd-dot" cx={p.x} cy={p.y} r={r} fill={color} fillOpacity={f.reached ? 1 : 0.85}
               stroke={f.reached && f.reached !== 'hidden' ? GREEN : 'none'} strokeWidth={f.reached ? Math.max(0.8, r * 0.3) : 0} />
           )}
           {f.reached === 'hidden' && <Lock x={p.x} y={p.y - r * 0.1} s={r / 4.2} />}
@@ -692,7 +768,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           )}
           {(f.reached || (roomy && row.tier === 'S')) && (
             <text x={p.x} y={above ? p.y - r - 4 / k : p.y + r + 10 / k} textAnchor="middle" fontSize={8.5 / k} fontWeight={f.reached ? 700 : 400}
-              fill={f.reached === 'hidden' ? '#999' : f.reached ? GREEN : '#aaa'} pointerEvents="none"
+              fill={f.reached === 'hidden' ? 'var(--sd-fg-3, #999)' : f.reached ? GREEN : 'var(--sd-fg-3, #aaa)'} pointerEvents="none"
               stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">
               {firstName(row)}
             </text>
@@ -794,7 +870,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           {/* A faint band behind each tier's dots, in its colour */}
           {layout.bands.map((band) => (
             <circle key={band.tier} r={(band.inner + band.outer) / 2} fill="none"
-              stroke={TIER_COLORS[band.tier] || '#555'} strokeOpacity={0.07}
+              stroke={TIER_COLORS[band.tier] || 'var(--sd-fg-5, #555)'} strokeOpacity={0.07}
               strokeWidth={Math.max(1 / k, band.outer - band.inner + layout.spacing)} pointerEvents="none" />
           ))}
           {dots}
@@ -813,17 +889,17 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
                 <circle r={c.radius} fill="var(--sd-bg)" fillOpacity={0.9} stroke={color} strokeOpacity={lit ? 0.7 : 0.25} strokeWidth={1 / k} />
                 {/* Their people, each joined to the middle of the cluster */}
                 {clusterPaths(c).map(([tier, { spokes }]) => (
-                  <path key={'s' + tier} d={spokes} fill="none" stroke={TIER_COLORS[tier] || '#555'}
+                  <path key={'s' + tier} d={spokes} fill="none" stroke={TIER_COLORS[tier] || 'var(--sd-fg-5, #555)'}
                     strokeWidth={0.7} strokeOpacity={lit ? 0.6 : 0.38} />
                 ))}
                 {clusterPaths(c).map(([tier, { dots: d }]) => (
-                  <path key={tier} d={d} fill={TIER_COLORS[tier] || '#555'} fillOpacity={lit ? 1 : 0.9} />
+                  <path className="sd-dot" key={tier} d={d} fill={TIER_COLORS[tier] || 'var(--sd-fg-5, #555)'} fillOpacity={lit ? 1 : 0.9} />
                 ))}
-                <circle r={LINK_HUB} fill={color} stroke={hovLink === j ? '#fff' : 'var(--sd-bg)'} strokeWidth={1.5} />
+                <circle className="sd-dot" r={LINK_HUB} fill={color} stroke={hovLink === j ? 'var(--sd-fg-1, #fff)' : 'var(--sd-bg)'} strokeWidth={1.5} />
                 {row.id === scanningId && (
                   <circle r={c.radius + 4} fill="none" stroke={DEGREE_COLORS[3]} strokeWidth={1 / k} strokeDasharray={`${3 / k} ${2 / k}`} />
                 )}
-                <text y={c.radius + 12 / k} textAnchor="middle" fill="#fff" fontSize={10 / k} fontWeight={700}
+                <text y={c.radius + 12 / k} textAnchor="middle" fill="var(--sd-fg-1, #fff)" fontSize={10 / k} fontWeight={700}
                   stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">{firstName(row)}’s circle</text>
                 <text y={c.radius + 23 / k} textAnchor="middle" fill={color} fontSize={8 / k}
                   stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">
@@ -856,7 +932,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
                 {seg(o, o.r + 1, p, LINK_HUB + 1, 'b')}
                 {/* Their own dot inside the cluster they were met through */}
                 {o.inCluster && (
-                  <circle cx={o.x} cy={o.y} r={o.r} fill={TIER_COLORS[link.row.tier] || '#555'} stroke={GREEN} strokeWidth={1.4} />
+                  <circle className="sd-dot" cx={o.x} cy={o.y} r={o.r} fill={TIER_COLORS[link.row.tier] || 'var(--sd-fg-5, #555)'} stroke={GREEN} strokeWidth={1.4} />
                 )}
               </g>
             );
@@ -864,25 +940,25 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           {/* The one under the pointer, on top */}
           {hp && (
             <>
-              <line x1={0} y1={0} x2={hp.x} y2={hp.y} stroke={TIER_COLORS[hovered.tier] || '#888'} strokeWidth={1.6 / k} strokeOpacity={0.8} />
+              <line x1={0} y1={0} x2={hp.x} y2={hp.y} stroke={TIER_COLORS[hovered.tier] || 'var(--sd-fg-3, #888)'} strokeWidth={1.6 / k} strokeOpacity={0.8} />
               <circle cx={hp.x} cy={hp.y} r={dotRadius(layout.spacing, hovered.tier) * (facts[hover].reached ? 1.4 : 1) + 2 / k}
                 fill="none" stroke="#fff" strokeWidth={1.6 / k} />
             </>
           )}
           {/* The person in the middle, with the halo if their own circle is ready to scan */}
           {reachState(person, reach) === 'ready' && <Halo x={0} y={0} r={40} still={still} />}
-          <circle r={28} fill="var(--sd-bg)" stroke={TIER_COLORS[person.tier] || '#888'} strokeWidth={hover === 'center' ? 4 : 3} filter="url(#focusGlow)" />
+          <circle r={28} fill="var(--sd-bg)" stroke={TIER_COLORS[person.tier] || 'var(--sd-fg-3, #888)'} strokeWidth={hover === 'center' ? 4 : 3} filter="url(#focusGlow)" />
           {localPhoto(person.profile_image_url) ? (
             <>
               <clipPath id="focus-clip"><circle r={24} /></clipPath>
               <image href={localPhoto(person.profile_image_url)} x={-24} y={-24} width={48} height={48} clipPath="url(#focus-clip)" />
             </>
           ) : (
-            <text y={5} textAnchor="middle" fill={TIER_COLORS[person.tier] || '#888'} fontSize={16} fontWeight={800}>
+            <text y={5} textAnchor="middle" fill={TIER_COLORS[person.tier] || 'var(--sd-fg-3, #888)'} fontSize={16} fontWeight={800}>
               {person.name?.charAt(0)}
             </text>
           )}
-          <text y={40} textAnchor="middle" fill="#fff" fontSize={11} fontWeight={700} pointerEvents="none">{person.name}</text>
+          <text y={40} textAnchor="middle" fill="var(--sd-fg-1, #fff)" fontSize={11} fontWeight={700} pointerEvents="none">{person.name}</text>
         </g>
         {hovered && (
           <Tip x={cx + view.x + hp.x * k} y={cy + view.y + hp.y * k} w={dims.w}
@@ -908,28 +984,28 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', pointerEvents: 'auto' }}>
           <button type="button" onClick={() => onBack(depth - 1)} style={{
             padding: '8px 16px', borderRadius: 8, border: 'none', cursor: 'pointer',
-            background: 'rgba(255,255,255,0.1)', color: '#ddd', fontSize: 12, fontWeight: 700,
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.1)', color: 'var(--sd-fg-1, #ddd)', fontSize: 12, fontWeight: 700,
           }}>
             ← {depth === 1 ? 'All bridges' : `${firstName(trail[depth - 2])}’s circle`}
           </button>
-          <nav aria-label="Trail" style={{ fontSize: 11, color: '#777', display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
+          <nav aria-label="Trail" style={{ fontSize: 11, color: 'var(--sd-fg-4, #777)', display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
             <button type="button" onClick={() => onBack(0)} style={crumb}>All bridges</button>
             {trail.map((row, i) => (
               <span key={row.id} style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
                 <span aria-hidden="true">›</span>
                 {i === depth - 1
-                  ? <span style={{ color: '#fff', fontWeight: 700 }}>{row.name}</span>
+                  ? <span style={{ color: 'var(--sd-fg-1, #fff)', fontWeight: 700 }}>{row.name}</span>
                   : <button type="button" onClick={() => onBack(i + 1)} style={crumb}>{row.name}</button>}
               </span>
             ))}
           </nav>
         </div>
-        <div style={{ fontSize: 11, color: '#999' }}>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #999)' }}>
           {firstName(person)}’s circle · {members.length.toLocaleString('en-US')} {members.length === 1 ? 'person' : 'people'}
           {' · '}{ordinal(depth + 1)} degree{depth > 1 ? ', counted along this chain' : ''}
         </div>
         {scanningThem && members.length > 0 && (
-          <div role="status" style={{ ...note, borderColor: 'rgba(52,152,219,0.4)', color: '#cfe6f7' }}>
+          <div role="status" style={{ ...note, borderColor: 'rgba(52,152,219,0.4)', color: 'var(--sd-fg-1, #cfe6f7)' }}>
             Scanning {firstName(person)}’s circle now. More people appear here as it saves, every 10 pages.
           </div>
         )}
@@ -940,30 +1016,23 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           scanning={scanningThem} canScan={canScan} onSelect={onSelect} top={cy + 64} />
       )}
 
-      {/* What's in this circle */}
+      {/* What's in this circle: dots and counts, no box, as the depth tracker */}
       {members.length > 0 && (
-        <div style={{
-          position: 'absolute', bottom: 20, left: 20, maxWidth: 'calc(100% - 110px)',
-          background: 'rgba(0,0,0,0.75)', borderRadius: 10, padding: '10px 14px',
-          backdropFilter: 'blur(8px)', fontSize: 10, color: '#888', lineHeight: 1.6,
-        }}>
-          <div style={{ fontSize: 9, fontWeight: 700, color: '#666', letterSpacing: 1, marginBottom: 6 }}>IN THIS CIRCLE</div>
+        <div title={`Click anyone for their circle${ready > 0 && canScan ? ', or someone ready to scan theirs' : ''} · drag to move · scroll to zoom`}
+          style={{
+            position: 'absolute', bottom: 18, left: 18, maxWidth: 'calc(100% - 110px)',
+            display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '6px 14px',
+            fontSize: 10.5, color: 'var(--sd-fg-3, #aab)', textShadow: HALO_TEXT,
+          }}>
           {byTier.map(([t, n]) => (
-            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <div style={{ width: 6, height: 6, borderRadius: '50%', background: TIER_COLORS[t] }} />
-              <span style={{ color: TIER_COLORS[t], fontWeight: 600, width: 40 }}>{t}-Tier</span>
-              <span>{n.toLocaleString('en-US')}</span>
-            </div>
+            <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+              <span className="sd-dot-html" style={{ width: 8, height: 8, borderRadius: '50%', background: TIER_COLORS[t], boxShadow: `0 0 6px ${TIER_COLORS[t]}66` }} />
+              <span style={{ color: TIER_COLORS[t], fontWeight: 700 }}>{t}</span>
+              <span style={{ fontVariantNumeric: 'tabular-nums' }}>{n.toLocaleString('en-US')}</span>
+            </span>
           ))}
-          {(added > 0 || asked > 0) && (
-            <div style={{ marginTop: 6 }}>
-              {added > 0 && <div><span style={{ color: GREEN }}>● </span>you added {added}{ready ? `, ${ready} ready to scan` : ''}{hidden ? `, ${hidden} hidden` : ''}</div>}
-              {asked > 0 && <div><span style={{ color: '#FFD700' }}>◌ </span>{asked} {asked === 1 ? 'request' : 'requests'} out</div>}
-            </div>
-          )}
-          <div style={{ marginTop: 6, color: '#555' }}>
-            Click anyone for their circle{ready > 0 && canScan ? ', or someone ready to scan theirs' : ''} · drag to move · scroll to zoom
-          </div>
+          {added > 0 && <span><span style={{ color: GREEN }}>●</span> you added {added}{ready ? `, ${ready} ready to scan` : ''}{hidden ? `, ${hidden} hidden` : ''}</span>}
+          {asked > 0 && <span><span style={{ color: 'var(--sd-gold, #FFD700)' }}>◌</span> {asked} {asked === 1 ? 'request' : 'requests'} out</span>}
         </div>
       )}
 
@@ -972,6 +1041,9 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
   );
 }
 
+// Words over the map without a box: a soft halo in the theme's background (lib/themes.js).
+const HALO_TEXT = '0 0 3px var(--sd-bg), 0 0 6px var(--sd-bg), 0 0 1px var(--sd-bg)';
+
 // A link's cluster draws at most this many of their people; the count beside it is the whole circle.
 const LINK_DOTS = 290;
 // The middle of a cluster, where its first ring starts, and a link's own dot inside one.
@@ -1019,10 +1091,10 @@ function Tip({ x, y, w, lines, accent }) {
   const top = Math.max(6, y - height - 12);
   return (
     <g pointerEvents="none">
-      <rect x={left} y={top} width={width} height={height} rx={6} fill="rgba(0,0,0,0.92)" stroke={accent || '#555'} strokeWidth={0.6} />
+      <rect x={left} y={top} width={width} height={height} rx={6} fill="var(--sd-surface, rgba(0,0,0,0.92))" stroke={accent || 'var(--sd-fg-5, #555)'} strokeWidth={0.6} />
       {lines.map((line, i) => (
         <text key={i} x={left + width / 2} y={top + 16 + i * 12} textAnchor="middle"
-          fill={i === 0 ? '#fff' : i === 2 ? accent || '#aaa' : '#999'} fontSize={i === 0 ? 10.5 : 9} fontWeight={i === 0 ? 700 : 400}>
+          fill={i === 0 ? 'var(--sd-fg-1, #fff)' : i === 2 ? accent || 'var(--sd-fg-3, #aaa)' : 'var(--sd-fg-3, #999)'} fontSize={i === 0 ? 10.5 : 9} fontWeight={i === 0 ? 700 : 400}>
           {line}
         </text>
       ))}
@@ -1059,7 +1131,7 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
       action = (
         <>
           <Link href={scanPageFor(person)} style={primary}>Scan {first}’s circle →</Link>
-          <div style={{ fontSize: 10.5, color: '#888', marginTop: 8 }}>
+          <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #888)', marginTop: 8 }}>
             {cost.profileViews} profile view, then one LinkedIn search per page of their list (up to {cost.searches}, about {cost.minutes} min).
             It starts only once you confirm it on the Scan page.
           </div>
@@ -1077,13 +1149,13 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   return (
     <div role="status" style={{
       position: 'absolute', left: '50%', top, transform: 'translateX(-50%)', width: 'min(360px, calc(100% - 32px))',
-      background: 'color-mix(in srgb, var(--sd-bg) 94%, transparent)', border: `1px solid ${state === 'hidden' ? 'rgba(255,255,255,0.12)' : 'rgba(0,255,136,0.25)'}`,
+      background: 'color-mix(in srgb, var(--sd-bg) 94%, transparent)', border: `1px solid ${state === 'hidden' ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : 'rgba(0,255,136,0.25)'}`,
       borderRadius: 12, padding: '14px 16px', textAlign: 'center',
     }}>
-      <div style={{ fontSize: 13, fontWeight: 800, color: state === 'hidden' ? '#aaa' : '#fff', marginBottom: 6 }}>
+      <div style={{ fontSize: 13, fontWeight: 800, color: state === 'hidden' ? 'var(--sd-fg-3, #aaa)' : 'var(--sd-fg-1, #fff)', marginBottom: 6 }}>
         {state === 'hidden' && <span aria-hidden="true">🔒 </span>}{title}
       </div>
-      <div style={{ fontSize: 11.5, color: '#9aa', lineHeight: 1.55, marginBottom: action ? 12 : 0 }}>{body}</div>
+      <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #9aa)', lineHeight: 1.55, marginBottom: action ? 12 : 0 }}>{body}</div>
       {action}
     </div>
   );
@@ -1091,7 +1163,7 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
 
 const crumb = { background: 'none', border: 'none', color: '#8fb8d6', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: 0 };
 const note = {
-  fontSize: 11, padding: '6px 10px', borderRadius: 8, border: '1px solid', background: 'rgba(0,0,0,0.6)', pointerEvents: 'auto',
+  fontSize: 11, padding: '6px 10px', borderRadius: 8, border: '1px solid', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.6)', pointerEvents: 'auto',
 };
 const primary = {
   display: 'inline-block', padding: '9px 16px', borderRadius: 8, textDecoration: 'none', fontSize: 12.5, fontWeight: 800,
@@ -1099,5 +1171,5 @@ const primary = {
 };
 const secondary = {
   padding: '8px 14px', borderRadius: 8, cursor: 'pointer', fontSize: 12, fontWeight: 700,
-  border: '1px solid rgba(255,255,255,0.18)', background: 'rgba(255,255,255,0.06)', color: '#ddd',
+  border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.18)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-1, #ddd)',
 };