six-degrees 0.6.0 → 0.7.0

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

@@ -17,6 +17,7 @@ import { useRouter } from 'next/navigation';
 import AppTabs from './AppTabs';
 import AutoScanButton from './AutoScanButton';
 import ScanTrail from './ScanTrail';
+import ClusterSpinner from './ClusterSpinner';
 import useScanner from './useScanner';
 import { useUser } from './UserProvider';
 import { scraperStatus, beginScrape, notReadyMessage, busyReason } from '../../lib/scraper-client';
@@ -54,7 +55,7 @@ export default function AppHeader({ active, isMobile: mobileProp, csvMode = fals
   const own = !IS_DEMO && !csvMode;   // scanning and notifications are for your own network
   return (
     <header style={{
-      position: 'relative', padding: isMobile ? '10px 12px' : '20px 30px', borderBottom: '1px solid rgba(255,255,255,0.1)', flexShrink: 0,
+      position: 'relative', padding: isMobile ? '10px 12px' : '20px 30px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', flexShrink: 0,
       // Clear, or frosted glass on a glass theme (lib/themes.js).
       background: 'var(--sd-header)', backdropFilter: 'var(--sd-header-blur)', WebkitBackdropFilter: 'var(--sd-header-blur)',
     }}>
@@ -72,7 +73,7 @@ export default function AppHeader({ active, isMobile: mobileProp, csvMode = fals
           {/* Settings: also in CSV or sample mode and on phones, so updates stay reachable */}
           {!IS_DEMO && <Link href="/settings" title="Settings" aria-label="Settings" style={{
             width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', flexShrink: 0,
-            background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 14 : 16, textDecoration: 'none',
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-3, #888)', fontSize: isMobile ? 14 : 16, textDecoration: 'none',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}>{'⚙︎'}</Link>}
           {own && <NotificationBell isMobile={isMobile} onOpen={onOpenNote} openId={openNoteId} />}
@@ -121,7 +122,7 @@ function NotificationBell({ isMobile, onOpen, openId }) {
     <div style={{ position: 'relative' }}>
       <button onClick={() => setOpen(!open)} title="Notifications" aria-label={unseen ? `Notifications, ${unseen} new` : 'Notifications'} style={{
         width: isMobile ? 28 : 32, height: isMobile ? 28 : 32, borderRadius: '50%', border: 'none', cursor: 'pointer',
-        background: 'rgba(255,255,255,0.06)', color: '#888', fontSize: isMobile ? 12 : 14,
+        background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-3, #888)', fontSize: isMobile ? 12 : 14,
         display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
       }}>
         🔔
@@ -136,41 +137,41 @@ function NotificationBell({ isMobile, onOpen, openId }) {
       {open && (
         <div style={{
           position: 'absolute', top: 40, right: 0, width: 320, maxHeight: 400,
-          background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(255,255,255,0.1)',
+          background: 'color-mix(in srgb, var(--sd-bg) 97%, transparent)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
           borderRadius: 12, overflow: 'hidden', zIndex: 100,
           backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
           boxShadow: '0 8px 32px rgba(0,0,0,0.5)',
         }}>
-          <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <span style={{ fontWeight: 700, fontSize: 14 }}>Notifications</span>
             {unseen > 0 && (
               <button onClick={() => {
                 fetch('/api/notifications', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'mark-all-seen' }) });
                 setNotes((prev) => prev.map((n) => ({ ...n, seen: true })));
-              }} style={{ background: 'none', border: 'none', color: '#3498DB', fontSize: 11, cursor: 'pointer', fontWeight: 600 }}>
+              }} style={{ background: 'none', border: 'none', color: 'var(--sd-blue, #3498DB)', fontSize: 11, cursor: 'pointer', fontWeight: 600 }}>
                 Mark all read
               </button>
             )}
           </div>
           <div style={{ overflowY: 'auto', maxHeight: 340 }}>
             {notes.length === 0 ? (
-              <div style={{ padding: 20, textAlign: 'center', color: '#555', fontSize: 12 }}>No notifications yet</div>
+              <div style={{ padding: 20, textAlign: 'center', color: 'var(--sd-fg-5, #555)', fontSize: 12 }}>No notifications yet</div>
             ) : notes.slice(0, 20).map((n) => (
               <div key={n.id} role="button" tabIndex={0}
                 onClick={() => show(n)}
                 onKeyDown={(e) => { if (e.key === 'Enter') show(n); }}
-                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = n.seen ? 'transparent' : 'rgba(255,215,0,0.04)'; }}
                 style={{
-                  padding: '10px 16px', borderBottom: '1px solid rgba(255,255,255,0.04)', cursor: 'pointer',
+                  padding: '10px 16px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)', cursor: 'pointer',
                   background: n.seen ? 'transparent' : 'rgba(255,215,0,0.04)',
                 }}>
                 <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                   <span style={{ fontSize: 16 }}>{n.icon || '📌'}</span>
                   <div style={{ flex: 1 }}>
-                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? '#888' : '#fff' }}>{n.title}<span style={{ color: '#556', marginLeft: 6 }}>›</span></div>
-                    {n.message && <div style={{ fontSize: 10, color: '#666', marginTop: 2 }}>{n.message}</div>}
-                    <div style={{ fontSize: 9, color: '#444', marginTop: 3 }}>{new Date(n.created_at).toLocaleDateString()}</div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: n.seen ? 'var(--sd-fg-3, #888)' : 'var(--sd-fg-1, #fff)' }}>{n.title}<span style={{ color: 'var(--sd-fg-5, #556)', marginLeft: 6 }}>›</span></div>
+                    {n.message && <div style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', marginTop: 2 }}>{n.message}</div>}
+                    <div style={{ fontSize: 9, color: 'var(--sd-fg-5, #444)', marginTop: 3 }}>{new Date(n.created_at).toLocaleDateString()}</div>
                   </div>
                 </div>
               </div>
@@ -194,6 +195,7 @@ function RefreshButton({ isMobile }) {
   const busy = busyReason(scan);
   return (
     <button
+      className="cluster-host"
       onClick={async () => {
         try {
           const blocked = notReadyMessage(await scraperStatus());
@@ -206,7 +208,7 @@ function RefreshButton({ isMobile }) {
           );
           if (!ok) return;
           await beginScrape('refresh');
-          alert('Checking for new connections — watch it on the Scan page.');
+          alert('Checking for new connections. Watch it on the Scan page.');
         } catch (e) {
           alert(e.message);
         }
@@ -218,12 +220,14 @@ function RefreshButton({ isMobile }) {
         // Words, not a bare ↻ (Blake, 2026-10-02: "make it easier to check for new
         // connections"), and the same words as the Scan page's button.
         height: isMobile ? 28 : 32, padding: isMobile ? '0 10px' : '0 14px', borderRadius: 16,
-        border: '1px solid rgba(0,255,136,0.3)', cursor: busy ? 'not-allowed' : 'pointer', opacity: busy ? 0.45 : 1,
-        background: 'rgba(0,255,136,0.08)', color: '#bff5d9', fontSize: isMobile ? 11 : 12.5, fontWeight: 700,
+        // Its own check running stays bright, its cluster building; something else running greys it.
+        border: '1px solid rgba(0,255,136,0.3)', cursor: checking ? 'progress' : busy ? 'not-allowed' : 'pointer', opacity: busy && !checking ? 0.45 : 1,
+        background: 'rgba(0,255,136,0.08)', color: 'var(--sd-fg-1, #bff5d9)', fontSize: isMobile ? 11 : 12.5, fontWeight: 700,
         display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', flexShrink: 0,
       }}
     >
-      <span aria-hidden="true" style={{ fontSize: isMobile ? 12 : 14 }}>↻</span>
+      {/* A cluster forming: built once on hover, round and round while it checks */}
+      <ClusterSpinner size={isMobile ? 12 : 14} live={checking} />
       {checking ? 'Checking…' : isMobile ? 'New' : 'Check for new'}
     </button>
   );

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

@@ -11,15 +11,15 @@ import Link from 'next/link';
 import { IS_DEMO } from '../../lib/demo';
 
 const MODES = [
-  { key: 'network', label: 'Network Circle', short: 'Circle', on: { background: '#fff', color: '#000' }, off: { background: 'transparent', color: '#888' } },
-  { key: 'degrees', label: 'Degrees', on: { background: 'linear-gradient(135deg, #FFD700, #FF6B35)', color: '#000' }, off: { background: 'rgba(255,255,255,0.12)', color: '#fff' } },
-  { key: 'separation', label: 'Separation', on: { background: 'linear-gradient(135deg, #00E5FF, #FFD700 55%, #FF7043)', color: '#000' }, off: { background: 'rgba(255,255,255,0.12)', color: '#fff' } },
+  { key: 'network', label: 'Network Circle', short: 'Circle', on: { background: '#fff', color: '#000' }, off: { background: 'transparent', color: 'var(--sd-fg-3, #888)' } },
+  { key: 'degrees', label: 'Degrees', on: { background: 'linear-gradient(135deg, #FFD700, #FF6B35)', color: '#000' }, off: { background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)', color: 'var(--sd-fg-1, #fff)' } },
+  { key: 'separation', label: 'Separation', on: { background: 'linear-gradient(135deg, #00E5FF, #FFD700 55%, #FF7043)', color: '#000' }, off: { background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)', color: 'var(--sd-fg-1, #fff)' } },
 ];
 const PAGES = [
-  { key: 'paths', href: '/paths', label: 'Paths', color: '#00ff88', on: 'linear-gradient(135deg, #00ff88, #3498DB)', demo: true },
+  { key: 'paths', href: '/paths', label: 'Paths', color: 'var(--sd-green, #00ff88)', on: 'linear-gradient(135deg, #00ff88, #3498DB)', demo: true },
   // Social is part of Outlink now (Messages & follow-ups); /social forwards there.
-  { key: 'outlink', href: '/queue', label: 'Outlink', color: '#FF6B35', on: 'linear-gradient(135deg, #FF6B35, #FFD700)', own: true },
-  { key: 'scan', href: '/setup', label: 'Scan', color: '#666', on: 'linear-gradient(135deg, #00ff88, #1abc9c)', own: true },
+  { key: 'outlink', href: '/queue', label: 'Outlink', color: 'var(--sd-orange, #FF6B35)', on: 'linear-gradient(135deg, #FF6B35, #FFD700)', own: true },
+  { key: 'scan', href: '/setup', label: 'Scan', color: 'var(--sd-fg-4, #666)', on: 'linear-gradient(135deg, #00ff88, #1abc9c)', own: true },
 ];
 
 /**
@@ -33,7 +33,7 @@ export default function AppTabs({ active, isMobile = false, csvMode = false, onM
   const pad = isMobile ? '6px 10px' : '8px 16px';
   const base = { padding: pad, borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600, textDecoration: 'none' };
   return (
-    <div id="main-tabs" style={{ display: 'flex', gap: isMobile ? 2 : 4, background: 'rgba(255,255,255,0.08)', borderRadius: 8, padding: isMobile ? 2 : 3, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
+    <div id="main-tabs" data-glass-panel="bar" style={{ display: 'flex', gap: isMobile ? 2 : 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 8, padding: isMobile ? 2 : 3, flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
       {MODES.map((m) => {
         const style = { ...base, cursor: 'pointer', ...(active === m.key ? m.on : m.off) };
         const label = isMobile && m.short ? m.short : m.label;
@@ -47,7 +47,7 @@ export default function AppTabs({ active, isMobile = false, csvMode = false, onM
         return (
           <Link key={p.key} href={p.href} title={p.title} aria-current={on ? 'page' : undefined} style={{
             ...base, display: 'flex', alignItems: 'center', gap: 4,
-            background: on ? p.on : 'rgba(255,255,255,0.06)', color: on ? '#000' : p.color,
+            background: on ? p.on : 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: on ? '#000' : p.color,
           }}>
             {p.label}{p.badge && <span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>{p.badge}</span>}
           </Link>

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

@@ -22,7 +22,7 @@ export default function AutoScanButton({ isMobile = false }) {
   };
   if (mine) {
     return (
-      <Link href="/setup" title="Auto scan is running: see it on the Scan page" style={{ ...style, background: 'rgba(0,255,136,0.15)', color: '#00ff88', border: '1px solid rgba(0,255,136,0.45)' }}>
+      <Link href="/setup" title="Auto scan is running: see it on the Scan page" style={{ ...style, background: 'rgba(0,255,136,0.15)', color: 'var(--sd-green, #00ff88)', border: '1px solid rgba(0,255,136,0.45)' }}>
         <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#00ff88' }} />Auto scan
       </Link>
     );
@@ -33,7 +33,7 @@ export default function AutoScanButton({ isMobile = false }) {
       onClick={() => { setStarting(true); startAutoScan().catch(() => setStarting(false)); }}
       disabled={busy}
       title={busy ? 'The scanner is busy: one scan at a time' : 'Start the all-day Auto-Bridge (experimental)'}
-      style={{ ...style, cursor: busy ? 'default' : 'pointer', background: 'rgba(255,255,255,0.04)', color: busy ? '#555' : '#8b9a9a', border: '1px solid rgba(255,215,0,0.25)' }}
+      style={{ ...style, cursor: busy ? 'default' : 'pointer', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: busy ? 'var(--sd-fg-5, #555)' : 'var(--sd-fg-3, #8b9a9a)', border: '1px solid rgba(255,215,0,0.25)' }}
     >
       <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#556' }} />Auto scan
     </button>

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

@@ -16,7 +16,7 @@ export default function Avatar({ person, size = 32, tierColors = FALLBACK }) {
   const c = tierColors[person?.tier] || '#666';
   const photo = localPhoto(person?.profile_image_url);
   return (
-    <span style={{
+    <span className="sd-dot-html" style={{
       position: 'relative', display: 'inline-block', width: size, height: size, flexShrink: 0,
       borderRadius: '50%', boxShadow: `0 0 0 ${size >= 24 ? 2 : 1}px ${c}`,
     }}>