six-degrees 0.6.0 → 0.7.0

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

@@ -2,28 +2,44 @@
 
 // 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.
+// the middle, the last 24 hours' searches against the budget round the edge,
+// and beside it the three speeds with what each means for the rest of the
+// budget. Speed only changes searches an hour (lib/scan-pace.js); the daily
+// budget is still the cap.
+//
+// While a scan runs the Scan button is a hub and the people it finds gather
+// round it as a cluster, as the map draws one (Blake, 2026-10-03: "for the
+// scanner its a cluster and shows the dots building every page adds to the
+// ring so it fits our theme and style"): a dot for each person each page
+// found, filling the rings from the inside out, each page's batch in the next
+// of the theme's gold, purple and blue (the header's dots, page for page). Only
+// what the scanner has said: how many each page found, nothing about who.
 
+import { useSyncExternalStore } from 'react';
 import { PACES, PACE_NAMES, paceOf, paceSeconds, searchesPerHour, durationText } from '../../lib/scan-pace';
+import { ringLayout } from '../../lib/chain-layout';
+import { TIER_COLORS } from '../../lib/themes';
+import { watchScanner, scannerNow, SCANNER_UNKNOWN } from '../../lib/scraper-client';
 
 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; }
+@keyframes clusterTurn { to { transform: rotate(360deg); } }
+@keyframes clusterIn { from { opacity: 0; transform: scale(0.2); } }
+@keyframes clusterHub { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
+.cluster-turn { transform-origin: ${C}px ${C}px; animation: clusterTurn 90s linear infinite; }
+.cluster-dot { transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; }
+.cluster-dot.fresh circle { animation: clusterIn .45s cubic-bezier(.2,.9,.3,1.3) both; transform-box: fill-box; transform-origin: center; }
+.cluster-hub { animation: clusterHub 1.8s ease-in-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; } }
+@media (prefers-reduced-motion: reduce) { .cluster-turn, .cluster-dot.fresh circle, .cluster-hub { animation: none; } .cluster-dot { transition: 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]];
+// Past this many, the newest are drawn and the count says the rest.
+const MAX_DOTS = 420;
+const INNER = 72;   // the first ring, just clear of the Scan button
 
 function arc(r, from, to) {
   const p = (a) => `${(C + r * Math.cos(a)).toFixed(2)} ${(C + r * Math.sin(a)).toFixed(2)}`;
@@ -31,7 +47,22 @@ function arc(r, from, to) {
   return `M${p(from)} A${r} ${r} 0 ${large} 1 ${p(to)}`;
 }
 
+/** Where each person found so far sits round the hub, and which page found them. */
+function clusterDots(found, R) {
+  const total = found.reduce((a, b) => a + b, 0);
+  const n = Math.min(total, MAX_DOTS);
+  if (!n) return { dots: [], total };
+  const page = [];
+  for (let i = found.length - 1; i >= 0 && page.length < n; i--) for (let k = 0; k < found[i] && page.length < n; k++) page.push(i);
+  page.reverse();   // oldest first, so they take the inner rings
+  const { points } = ringLayout(n, { inner: INNER, outer: R - 8, spacing: 9, minSpacing: 3.2 });
+  const last = found.length - 1;
+  return { dots: points.map((pt, i) => ({ x: C + pt.x, y: C + pt.y, page: page[i], fresh: page[i] === last })), total };
+}
+
 export default function ScanRadar({ li, running, scanning, disabled, label, sublabel, onScan, onPace }) {
+  const scan = useSyncExternalStore(watchScanner, scannerNow, () => SCANNER_UNKNOWN);
+  const found = running ? scan.found || [] : [];
   const pace = li?.limits?.pace || 'fast';
   const daily = li?.limits?.daily || 0;
   const used = li?.unreadable ? daily : li?.searchesToday || 0;
@@ -40,15 +71,17 @@ export default function ScanRadar({ li, running, scanning, disabled, label, subl
   const tone = share >= 0.9 ? '#ff6b6b' : share >= 0.6 ? '#FFD700' : '#00ff88';
   const top = -Math.PI / 2;
   const R = C - 10;
+  const colours = [TIER_COLORS.S, TIER_COLORS.A, TIER_COLORS.B];
+  const { dots, total } = clusterDots(found, R);
 
   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%)' }}>
+      border: '1px solid rgba(0,255,136,0.18)', background: 'radial-gradient(circle at 20% 50%, rgba(0,255,136,0.06), rgba(var(--sd-ink, 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>
+            <radialGradient id="radarBg"><stop offset="0" stopColor="color-mix(in srgb, var(--sd-bg, #0a0a1a) 80%, #00ff88)" /><stop offset="1" stopColor="var(--sd-bg, #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>
@@ -57,38 +90,49 @@ export default function ScanRadar({ li, running, scanning, disabled, label, subl
           {[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>
+          {/* The cluster: a dot for each person each page found, round the Scan button.
+              Before any, the rings it will fill. */}
+          {!dots.length && [INNER, (INNER + R) / 2, R - 8].map((r) => (
+            <circle key={r} cx={C} cy={C} r={r} fill="none" stroke="rgba(0,255,136,0.13)" strokeDasharray="2 6" />
           ))}
-          {/* 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} />
+          {running && !dots.length && <circle className="cluster-hub" cx={C} cy={C} r={INNER - 6} fill="none" stroke="#00ff88" strokeOpacity={0.6} />}
+          {dots.length > 0 && (
+            <g className="cluster-turn">
+              {/* Every dot joined to the hub, faintly, as the map joins a circle to its connection */}
+              <path d={dots.map((d) => `M${C} ${C}L${d.x.toFixed(1)} ${d.y.toFixed(1)}`).join('')} stroke="#fff" strokeOpacity={0.05} strokeWidth={0.6} />
+              {dots.map((d, i) => (
+                <g key={i} className={`cluster-dot${d.fresh ? ' fresh' : ''}`} style={{ transform: `translate(${d.x}px, ${d.y}px)` }}>
+                  <circle className="sd-dot" r={d.fresh ? 3 : 2.5} fill={colours[d.page % colours.length]} opacity={d.fresh ? 1 : 0.85}
+                    style={d.fresh ? { filter: `drop-shadow(0 0 3px ${colours[d.page % colours.length]})` } : undefined} />
+                </g>
+              ))}
+            </g>
+          )}
+          {/* The last 24 hours' searches against the budget, round the edge */}
+          <path d={arc(R + 5, top, top + 2 * Math.PI - 0.001)} fill="none" stroke="rgba(var(--sd-ink, 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)',
+            border: `2px solid ${disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : '#00ff88'}`,
+            background: disabled ? 'var(--sd-card, rgba(20,24,40,0.92))' : 'radial-gradient(circle at 50% 35%, #134d3a, #0b2a22 70%)',
+            color: disabled ? 'var(--sd-fg-4, #667)' : 'var(--sd-fg-1, #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>}
+          {sublabel && <span style={{ fontSize: 10, opacity: 0.6, textAlign: 'center', textWrap: 'balance' }}>{sublabel}</span>}
         </button>
+        {running && found.length > 0 && (
+          <div style={{ position: 'absolute', left: 0, right: 0, bottom: -18, textAlign: 'center', fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-2, #9fe8c4)', fontVariantNumeric: 'tabular-nums' }}>
+            {total.toLocaleString('en-US')} found · {found.length} page{found.length === 1 ? '' : 's'}
+          </div>
+        )}
       </div>
 
       <div style={{ flex: 1, minWidth: 260 }}>
-        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: '#6b7090', textTransform: 'uppercase', marginBottom: 8 }}>Speed</div>
+        <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: 'var(--sd-fg-4, #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];
@@ -100,25 +144,26 @@ export default function ScanRadar({ li, running, scanning, disabled, label, subl
                 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',
+                  border: `1.5px solid ${on ? color : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`, background: on ? `${color}1a` : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+                  color: 'var(--sd-fg-1, #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>
+                <div style={{ fontSize: 14, fontWeight: 800, color: on ? color : 'var(--sd-fg-2, #ccd)' }}>{p.label}</div>
+                <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8a8fa8)', marginTop: 2 }}>~{searchesPerHour(name)} searches an hour</div>
+                <div style={{ fontSize: 10.5, color: 'var(--sd-fg-4, #6b7090)', marginTop: 1 }}>{p.pagePause} s between pages</div>
               </button>
             );
           })}
         </div>
-        <div style={{ marginTop: 10, fontSize: 12.5, color: '#b8c4c4', lineHeight: 1.6 }}>
+        <div style={{ marginTop: 10, fontSize: 12.5, color: 'var(--sd-fg-2, #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
+            // The budget counts a rolling 24 hours (lib/linkedin-limits.js usage), not since midnight.
+            : <><b style={{ color: tone }}>{left}</b> of {daily} searches left, counting the last 24 hours
               {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 }}>
+        <div style={{ marginTop: 4, fontSize: 11.5, color: 'var(--sd-fg-4, #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.

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

@@ -6,9 +6,10 @@
 // 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
-// how far it's got. Hover or click it to open it: who, today's LinkedIn budget,
-// the latest line, Details and Stop. Stop saves what was read, and the Scan
-// page's Resume carries on from that page. Other long jobs can show here too
+// how far it's got. Hover or click it to open it: who, the LinkedIn budget over
+// the last 24 hours (a link to Settings → LinkedIn usage), the latest line,
+// Details and Stop. Stop saves what was read, and the Scan page's Resume
+// carries on from that page. Other long jobs can show here too
 // (lib/island.js). It only reports: the pacing and the caps live in the scanner
 // (scripts/scrape.py, lib/linkedin-limits.js).
 
@@ -117,13 +118,14 @@ export default function ScanStatusBar() {
 
   return (
     <div
+      data-glass-panel="bar"
       onMouseLeave={() => setOpen(false)}
       style={{
         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,
+        borderRadius: '0 0 14px 14px', border: `1px solid ${running ? 'rgba(0,255,136,0.25)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`, borderTop: 'none',
+        background: 'var(--sd-surface, rgba(8,10,22,0.96))', color: 'var(--sd-fg-2, #cfd8d8)', fontSize: 12,
         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',
@@ -141,7 +143,7 @@ export default function ScanStatusBar() {
                   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',
+                    background: on ? 'rgba(52,152,219,0.22)' : 'transparent', color: on ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-3, #8b9aa8)',
                   }}
                 >
                   {t.icon && <span aria-hidden="true">{t.icon}</span>}
@@ -151,7 +153,7 @@ export default function ScanStatusBar() {
             })}
           </div>
         )}
-        {tabs && status && <span aria-hidden="true" style={{ width: 1, alignSelf: 'stretch', margin: '3px 4px', background: 'rgba(255,255,255,0.12)' }} />}
+        {tabs && status && <span aria-hidden="true" style={{ width: 1, alignSelf: 'stretch', margin: '3px 4px', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' }} />}
         {status && (
           <button
             onMouseEnter={() => setOpen(true)}
@@ -162,42 +164,44 @@ export default function ScanStatusBar() {
           >
             <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>}
+              <b style={{ color: running || other ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-2, #b8c4c4)', fontWeight: 600 }}>{label}</b>
+              {short && <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}>{short}</span>}
             </span>
-            {!running && !other && expanded && <span style={{ color: '#8b9a9a' }}>ready · press Auto scan beside Scan to start</span>}
+            {!running && !other && expanded && <span style={{ color: 'var(--sd-fg-3, #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={{ height: 2, margin: '3px 6px 0', borderRadius: 2, background: 'rgba(var(--sd-ink, 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, margin: '8px 8px 0', flexWrap: 'wrap' }}>
           {job.target?.name && <span>{job.target.name}</span>}
+          {/* A rolling 24 hours, as the budget counts them (lib/linkedin-limits.js usage), not
+              since midnight; it opens Settings → LinkedIn usage for the rest. */}
           {b && (
-            <span style={{ color: tone(b.searches, b.cap) }} title="Searches on your LinkedIn account in the last 24 hours, and your daily budget">
-              {b.searches}{b.cap ? ` of ${b.cap}` : ''} searches today
-            </span>
+            <Link href="/settings#usage" style={{ color: tone(b.searches, b.cap), textDecoration: 'none' }} title="Searches on your LinkedIn account in the last 24 hours, and your daily budget. Open LinkedIn usage">
+              {b.searches}{b.cap ? ` of ${b.cap}` : ''} searches in the last 24 hours
+            </Link>
           )}
           {last && (
-            <span style={{ color: '#667', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={last}>{last}</span>
+            <span style={{ color: 'var(--sd-fg-4, #667)', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={last}>{last}</span>
           )}
-          <Link href="/setup" style={{ color: '#3498DB', textDecoration: 'none' }}>Details</Link>
+          <Link href="/setup" style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none' }}>Details</Link>
           <button
             onClick={async () => { setStopping(true); try { await stopScrape(); } catch { setStopping(false); } }}
             disabled={stopping}
             title="Stops after saving what's been read; Resume on the Scan page carries on from the same page"
             style={{
               padding: '3px 10px', borderRadius: 8, fontSize: 12, cursor: stopping ? 'default' : 'pointer',
-              background: 'rgba(255,107,107,0.12)', color: '#ff9b9b', border: '1px solid rgba(255,107,107,0.35)',
+              background: 'rgba(255,107,107,0.12)', color: 'var(--sd-fg-2, #ff9b9b)', border: '1px solid rgba(255,107,107,0.35)',
             }}
           >{stopping ? 'Stopping…' : 'Stop'}</button>
         </div>
       )}
-      {expanded && !running && other?.detail && <div style={{ margin: '6px 8px 0', color: '#8b9a9a' }}>{other.detail}</div>}
+      {expanded && !running && other?.detail && <div style={{ margin: '6px 8px 0', color: 'var(--sd-fg-3, #8b9a9a)' }}>{other.detail}</div>}
     </div>
   );
 }

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

@@ -4,7 +4,7 @@
 // scanner reads, collecting from the left (Blake, 2026-10-03: "for every page
 // it collects then small dots start collecting on the left side of the line on
 // the lower header line giving that active feel"). The map's own colours, in
-// the order of the name's gradient: gold, purple, blue. The newest one glows;
+// the order of the name's gradient: gold, purple, blue (the theme's S, A and B). The newest one glows;
 // a pulsing seed sits at the start until the first page is in. It's on every
 // tab, since the header is, and a click opens the Scan page.
 //
@@ -15,8 +15,10 @@
 import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import useScanner from './useScanner';
+import { TIER_COLORS } from '../../lib/themes';
 
-const COLOURS = ['#FFD700', '#9B59B6', '#3498DB'];
+// The theme's S, A and B dots, in that order (the Scan page's cluster uses the same, page for page).
+const colours = () => [TIER_COLORS.S, TIER_COLORS.A, TIER_COLORS.B];
 const STEP = 9;        // a dot and its gap
 const LINGER_MS = 4000;
 
@@ -73,10 +75,11 @@ export default function ScanTrail({ inset }) {
         position: 'absolute', left: 0, top: 0, height: 7, display: 'flex', alignItems: 'center', gap: STEP - 5,
         pointerEvents: shown.on ? 'auto' : 'none', opacity: shown.on ? 1 : 0, textDecoration: 'none',
       }}>
-        {first > 0 && <span style={{ fontSize: 9, fontWeight: 700, color: '#889', marginRight: 2, fontVariantNumeric: 'tabular-nums' }}>+{first.toLocaleString('en-US')}</span>}
+        {first > 0 && <span style={{ fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-3, #889)', marginRight: 2, fontVariantNumeric: 'tabular-nums' }}>+{first.toLocaleString('en-US')}</span>}
         {dots.map((i) => {
-          const c = COLOURS[i % COLOURS.length];
-          return <span key={i} className={`dot${i === pages - 1 ? ' newest' : ''}`} style={{ width: 5, height: 5, borderRadius: '50%', background: c, color: c, flexShrink: 0 }} />;
+          const cs = colours();
+          const c = cs[i % cs.length];
+          return <span key={i} className={`dot sd-dot-html${i === pages - 1 ? ' newest' : ''}`} style={{ width: 5, height: 5, borderRadius: '50%', background: c, color: c, flexShrink: 0 }} />;
         })}
         {shown.on && <span className="seed" style={{ width: 5, height: 5, borderRadius: '50%', background: '#00ff88', flexShrink: 0 }} />}
       </Link>