six-degrees 0.4.3 → 0.4.5

package/.next/standalone/app/layout.js

@@ -20,6 +20,7 @@ export const metadata = {
 import UserProvider from './components/UserProvider';
 import StaleServerBanner from './components/StaleServerBanner';
 import ScanStatusBar from './components/ScanStatusBar';
+import SocialAutoSync from './components/SocialAutoSync';
 
 export default function RootLayout({ children }) {
   return (
@@ -33,6 +34,8 @@ export default function RootLayout({ children }) {
           <StaleServerBanner />
           {/* While a scan runs: what it's doing and today's budget, with Stop. */}
           <ScanStatusBar />
+          {/* The Social tab's once-a-day messages sync, when switched on. */}
+          <SocialAutoSync />
         </UserProvider>
       </body>
     </html>

package/.next/standalone/app/page.js

@@ -8,6 +8,7 @@ import useRequests from './components/useRequests';
 import { requestCount } from '../lib/requests-client';
 import { loadNetwork } from '../lib/network';
 import { VIEWS, resolveView } from './components/views';
+import AutoScanButton from './components/AutoScanButton';
 import { peopleByDegree, tierCountsOf } from '../lib/degrees';
 import Sidebar from './components/Sidebar';
 import FilterPanel from './components/FilterPanel';
@@ -153,6 +154,19 @@ function HomeInner() {
 
   // Followed once: Bridge Chains has opened it, so leaving that view and coming
   // back, or reloading, starts from the overview.
+  // A card's Insights → Separation, filtered to that person's circle ("Show them", "S only").
+  const [separationPreset, setSeparationPreset] = useState(null);
+  const showInSeparation = useCallback((preset) => {
+    setSeparationPreset({ ...preset, id: `${preset.query}|${preset.tier || ''}|${preset.rarity || ''}|${Math.random()}` });
+    setMode('degrees');
+    setVisualMode('separation');
+  }, []);
+  // A card's Insights → that person's circle in Bridge Chains.
+  const openCircle = useCallback((id) => {
+    setChainOpen(id);
+    setMode('degrees');
+    setVisualMode('chain');
+  }, []);
   const chainOpened = useCallback(() => {
     setChainOpen(null);
     try { window.history.replaceState(null, '', window.location.pathname); } catch { /* the link stays */ }
@@ -284,6 +298,17 @@ function HomeInner() {
             >
               Paths
             </Link>}
+            {!IS_DEMO && <Link
+              href="/social"
+              title="Experimental: what your own LinkedIn data says about your relationships"
+              style={{
+                padding: isMobile ? '6px 10px' : '8px 16px', borderRadius: 6, border: 'none', fontSize: isMobile ? 11 : 13, fontWeight: 600,
+                background: 'rgba(255,255,255,0.06)', color: '#FFD700', textDecoration: 'none',
+                display: 'flex', alignItems: 'center', gap: 4,
+              }}
+            >
+              Social<span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>beta</span>
+            </Link>}
             {!IS_DEMO && !csvMode && <Link
               href="/scores"
               style={{
@@ -318,6 +343,7 @@ function HomeInner() {
             >
               Scan
             </Link>}
+            {!IS_DEMO && !csvMode && <AutoScanButton isMobile={isMobile} />}
           </div>
           {/* Settings — also in CSV/sample mode and on phones, so updates stay reachable */}
           {!IS_DEMO && <Link
@@ -499,6 +525,7 @@ function HomeInner() {
             canScan,
             chainOpen,
             onChainOpened: chainOpened,
+            preset: separationPreset,
           };
           return <View {...viewProps} />;
         })()}
@@ -514,6 +541,8 @@ function HomeInner() {
           onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
           onSelect={(node) => { setSelected(node || null); }}
           onSwitchMode={(newMode) => { setMode(newMode); setFilter('all'); }}
+          onOpenCircle={openCircle}
+          onShowInSeparation={showInSeparation}
           onFocusNode={(nodeId) => { if (focusNodeRef.current) focusNodeRef.current(nodeId); }}
           csvSource={IS_DEMO ? 'sample' : csvMode ? csvSource : null}
           scanNotes={scanNotes}

package/.next/standalone/app/scores/page.js

@@ -12,6 +12,7 @@ import Link from 'next/link';
 import OnboardingGate from '../components/OnboardingGate';
 import SectorSection from '../components/settings/SectorSection';
 import TierSection from '../components/settings/TierSection';
+import NetworkHealthSection from '../components/settings/NetworkHealthSection';
 import CompanyScores from '../components/CompanyScores';
 import { Body, LINE, FONT } from '../components/ui';
 import { IS_DEMO } from '../../lib/demo';
@@ -60,7 +61,9 @@ function ScoresInner() {
           How someone’s power score is worked out, and the three things you can change about it:{' '}
           <a href="#sector" style={jump}>your field</a>, <a href="#tiers" style={jump}>how tiers are graded</a> and{' '}
           <a href="#companies" style={jump}>any company&rsquo;s score</a>. A change here rescores everyone.
+          {' '}First, <a href="#health" style={jump}>how your network holds together</a>.
         </Body>
+        <NetworkHealthSection />
         <SectorSection onSaved={saved} />
         <TierSection onSaved={saved} />
         <div id="companies" style={{ marginTop: 28 }}>

package/.next/standalone/app/setup/page.js

@@ -444,7 +444,7 @@ function SetupInner() {
                 </label>
                 <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', cursor: running ? 'default' : 'pointer' }}>
                   <input type="checkbox" checked={experimental} disabled={running} style={{ marginTop: 3 }}
-                    onChange={(e) => setExperimental(e.target.checked)} />
+                    onChange={(e) => { setExperimental(e.target.checked); window.dispatchEvent(new Event('six-degrees:experimental')); }} />
                   <span>
                     <b style={{ color: '#FFD700' }}>Experimental:</b> all-day pacing. Up to 10 pages in a sitting,
                     then a 45-minute rest; searches only from 9:00 to 19:00; at the daily budget it waits for it to

package/.next/standalone/app/social/page.js

@@ -0,0 +1,281 @@
+'use client';
+
+// Social (experimental): what your own LinkedIn data says about your
+// relationships (lib/linkedin-export.js). Two sources, both yours:
+//   - the export LinkedIn emails you (Settings → Data privacy → Get a copy of
+//     your data), read here in the browser: full history, no traffic to LinkedIn;
+//   - an experimental live sync (the scanner's --messages): your messages list,
+//     read once in your own Chrome, by hand or once a day.
+// Kept on this computer: dates, who wrote last and counts. Never message text.
+
+import { useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import OnboardingGate from '../components/OnboardingGate';
+import { useUser } from '../components/UserProvider';
+import { loadNetwork } from '../../lib/network';
+import { readTable, messageStats, careerChapters, postingEffect, invitationSplit, warmthOf, repliesWaiting } from '../../lib/linkedin-export';
+import { mergeSocial } from '../../lib/galaxy-lab';
+import { keyFor } from '../../lib/separation';
+import { runScrape, watchScanner, scannerNow } from '../../lib/scraper-client';
+import { Body, LINE, FONT } from '../components/ui';
+import { IS_DEMO } from '../../lib/demo';
+
+const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const WARMTH = { warm: ['Warm', '#ff9f43'], cool: ['Cool', '#3498DB'], dormant: ['Dormant', '#8899aa'], never: ['Never messaged', '#556'] };
+const FILES = { 'connections.csv': 'first name', 'messages.csv': 'conversation id', 'invitations.csv': 'direction', 'positions.csv': 'company name', 'shares.csv': 'date' };
+const day = (t) => (t ? new Date(t).toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' }) : '');
+const slug = (u) => String(u || '').replace(/\/+$/, '').split('/').pop();
+
+export default function SocialPage() {
+  return <OnboardingGate><SocialInner /></OnboardingGate>;
+}
+
+function SocialInner() {
+  const { userId } = useUser();
+  const [social, setSocial] = useState(undefined);
+  const [net, setNet] = useState(null);
+  const [keepEmails, setKeepEmails] = useState(false);
+  const [note, setNote] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [job, setJob] = useState(() => scannerNow());
+
+  const reload = () => fetch('/api/social').then((r) => r.json()).then((d) => setSocial(d.social || null)).catch(() => setSocial(null));
+  useEffect(() => { reload(); }, []);
+  useEffect(() => watchScanner(() => setJob(scannerNow())), []);
+  useEffect(() => {
+    if (!userId) return undefined;
+    let live = true;
+    loadNetwork(userId).then((n) => { if (live) setNet(n); }).catch(() => {});
+    return () => { live = false; };
+  }, [userId]);
+
+  // Everyone you know, by profile: name and tier for the lists below.
+  const byKey = useMemo(() => {
+    const m = new Map();
+    for (const r of [...(net?.degree1 || []), ...(net?.degree2 || [])]) if (!m.has(keyFor(r))) m.set(keyFor(r), r);
+    return m;
+  }, [net]);
+
+  async function importFolder(list) {
+    setBusy(true);
+    setNote(null);
+    try {
+      const found = {};
+      for (const f of Array.from(list || [])) {
+        const name = f.name.toLowerCase();
+        if (FILES[name] && !found[name]) found[name] = readTable(await f.text(), FILES[name]);
+      }
+      if (!Object.keys(found).length) throw new Error('That folder doesn’t have LinkedIn’s export files in it (Connections.csv, messages.csv and so on).');
+      const conns = found['connections.csv'] || [];
+      const stats = found['messages.csv'] ? messageStats(found['messages.csv']) : { asOf: null, people: new Map() };
+      const people = {};
+      for (const [url, v] of stats.people) people[url] = { last: v.last, lastFromThem: v.lastFromThem, total: v.total, recent: v.recent };
+      if (keepEmails) {
+        for (const c of conns) {
+          const e = c['email address'];
+          if (!e) continue;
+          const k = keyFor({ profile_url: c.url });
+          people[k] = { ...(people[k] || {}), email: e };
+        }
+      }
+      const asOf = stats.asOf || Date.now();
+      const body = {
+        asOf,
+        people,
+        chapters: careerChapters(found['positions.csv'] || [], conns, asOf),
+        posts: found['shares.csv'] ? postingEffect(found['shares.csv'], conns) : null,
+        invites: found['invitations.csv'] ? invitationSplit(found['invitations.csv']) : null,
+        emails: keepEmails,
+      };
+      const r = await fetch('/api/social', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'It couldn’t be saved.');
+      setNote({ good: true, text: `Read ${Object.keys(found).length} of LinkedIn’s files: ${stats.people.size.toLocaleString()} people you’ve messaged one to one.` });
+      await reload();
+    } catch (e) {
+      setNote({ good: false, text: e.message });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function syncNow() {
+    setNote(null);
+    try {
+      const end = await runScrape('messages');
+      setNote(end?.exitCode === 0 ? { good: true, text: 'Your messages list is read.' } : { good: false, text: 'The sync stopped before it finished. The Scan page has the log.' });
+      await reload();
+    } catch (e) {
+      setNote({ good: false, text: e.message });
+    }
+  }
+
+  async function setAuto(on) {
+    await fetch('/api/social', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ autoSync: on }) });
+    reload();
+  }
+
+  async function forget() {
+    await fetch('/api/social', { method: 'DELETE' });
+    setNote({ good: true, text: 'Forgotten. Nothing from your export or messages is kept here now.' });
+    reload();
+  }
+
+  // What each person's messages say, the export and the live sync together, and
+  // "now" for warmth: the newest thing the data knows, so an older export reads as it was.
+  const { merged, asOf } = useMemo(() => mergeSocial(social), [social]);
+
+  const warmth = useMemo(() => {
+    const counts = { warm: 0, cool: 0, dormant: 0, never: 0 };
+    for (const c of net?.degree1 || []) counts[warmthOf(merged.get(keyFor(c)), asOf)] += 1;
+    return counts;
+  }, [net, merged, asOf]);
+
+  const waiting = useMemo(() => {
+    const stats = { asOf, people: new Map([...merged].filter(([, v]) => v.lastFromThem != null)) };
+    const list = repliesWaiting(stats).map((w) => ({ ...w, person: byKey.get(w.url) }));
+    for (const [k, v] of merged) {
+      if (v.unread > 0 && !list.some((w) => w.url === k)) list.push({ url: k, unread: v.unread, person: byKey.get(k) });
+    }
+    const rank = (w) => ({ S: 0, A: 1 }[w.person?.tier] ?? 2);
+    return list.sort((a, b) => rank(a) - rank(b) || (a.days ?? 0) - (b.days ?? 0)).slice(0, 15);
+  }, [merged, asOf, byKey]);
+
+  if (IS_DEMO) return <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#aaa', padding: 40, fontFamily: FONT }}>Not part of the demo.</div>;
+  const running = job?.running;
+  const box = { padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', marginTop: 10 };
+  const h2 = { fontSize: 16, margin: '24px 0 6px' };
+
+  return (
+    <div style={{ minHeight: '100vh', background: '#0a0a1a', color: '#fff', fontFamily: FONT }}>
+      <header style={{ padding: '16px 24px', borderBottom: LINE, display: 'flex', alignItems: 'center', gap: 16 }}>
+        <Link href="/" style={{ color: '#888', textDecoration: 'none', fontSize: 13, fontWeight: 600, padding: '6px 14px', borderRadius: 6, background: 'rgba(255,255,255,0.06)', border: LINE }}>← Back to Map</Link>
+        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: '#FFD700' }}>Social <span style={{ fontSize: 12, color: '#8b9a9a', fontWeight: 600 }}>experimental</span></h1>
+      </header>
+      <main style={{ maxWidth: 980, margin: '0 auto', padding: '8px 24px 64px' }}>
+        <Body style={{ marginTop: 16 }}>
+          Who you&rsquo;re warm with, who&rsquo;s waiting on a reply, and how each chapter of your career built your network,
+          from your own LinkedIn data. Only dates, who wrote last and counts are kept on this computer, never what a
+          message says.
+        </Body>
+
+        <h2 style={h2}>Your LinkedIn export</h2>
+        <div style={box}>
+          <Body style={{ margin: 0 }}>
+            On LinkedIn: <i>Settings → Data privacy → Get a copy of your data</i>, pick the larger archive, and unzip the
+            file it emails you. Then choose that folder here. It&rsquo;s read in this window; nothing goes to LinkedIn.
+          </Body>
+          <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: '#b8c4c4', marginTop: 10 }}>
+            <input type="checkbox" checked={keepEmails} onChange={(e) => setKeepEmails(e.target.checked)} style={{ marginTop: 3 }} />
+            <span>Also keep email addresses from it, on this computer only, for one-click email.</span>
+          </label>
+          <div style={{ marginTop: 10, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+            <label style={{ padding: '7px 14px', borderRadius: 8, background: 'rgba(52,152,219,0.18)', color: '#cfe6f7', cursor: busy ? 'default' : 'pointer', fontSize: 13 }}>
+              {busy ? 'Reading…' : social ? 'Choose a newer export' : 'Choose the export folder'}
+              <input type="file" webkitdirectory="" directory="" multiple disabled={busy} style={{ display: 'none' }} onChange={(e) => importFolder(e.target.files)} />
+            </label>
+            {social && <span style={{ fontSize: 12, color: '#8b9a9a' }}>From an export up to {day(social.asOf)}{social.liveAt ? ` · messages synced ${day(Date.parse(social.liveAt))}` : ''}</span>}
+            {social && <button onClick={forget} style={{ background: 'none', border: 'none', color: '#ff9b9b', cursor: 'pointer', fontSize: 12 }}>Forget it</button>}
+          </div>
+        </div>
+
+        <h2 style={h2}>Live messages sync <span style={{ fontSize: 11, color: '#FFD700' }}>experimental</span></h2>
+        <div style={box}>
+          <Body style={{ margin: 0 }}>
+            Reads your messages list once, in your own Chrome: who each one-to-one conversation is with, when it was last
+            active and whether it&rsquo;s unread. It uses no search budget and never opens or keeps a message&rsquo;s text.
+          </Body>
+          <div style={{ marginTop: 10, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
+            <button onClick={syncNow} disabled={running} style={{ padding: '7px 14px', borderRadius: 8, border: 'none', background: running ? '#333' : 'rgba(0,255,136,0.15)', color: running ? '#777' : '#00ff88', cursor: running ? 'default' : 'pointer', fontSize: 13 }}>
+              {running ? 'The scanner is busy' : 'Sync messages now'}
+            </button>
+            <label style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12.5, color: '#b8c4c4' }}>
+              <input type="checkbox" checked={social?.autoSync === true} onChange={(e) => setAuto(e.target.checked)} />
+              Once a day while the app is open (daytime only)
+            </label>
+          </div>
+        </div>
+        {note && <div style={{ marginTop: 10, fontSize: 13, color: note.good ? '#00ff88' : '#ff9b9b' }}>{note.text}</div>}
+
+        {social && (
+          <>
+            <h2 style={h2}>Warmth</h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 10 }}>
+              {Object.entries(WARMTH).map(([k, [label, color]]) => (
+                <div key={k} style={{ ...box, marginTop: 0 }}>
+                  <div style={{ fontSize: 22, fontWeight: 700, color }}>{(warmth[k] || 0).toLocaleString()}</div>
+                  <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>{label}</div>
+                </div>
+              ))}
+            </div>
+            <div style={{ fontSize: 11.5, color: '#778', marginTop: 6 }}>
+              Of your connections. Warm: messaged in the last 30 days, or 3+ messages in 90. Cool: within a year. Dormant: longer ago.
+            </div>
+
+            <h2 style={h2}>Waiting on you</h2>
+            <div style={{ ...box, padding: 0 }}>
+              {waiting.length === 0 && <div style={{ padding: 12, fontSize: 13, color: '#8b9a9a' }}>No one is waiting on a reply.</div>}
+              {waiting.map((w) => (
+                <div key={w.url} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)', fontSize: 13 }}>
+                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[w.person?.tier] || '#556', flexShrink: 0 }} />
+                  <span style={{ flex: 1, minWidth: 0 }}>
+                    <b>{w.person?.name || slug(w.url)}</b>
+                    {w.person?.company ? <span style={{ color: '#8b9a9a' }}> · {w.person.company}</span> : null}
+                  </span>
+                  <span style={{ color: '#b8c4c4' }}>{w.unread ? `${w.unread} unread` : `wrote ${w.days} days before your export`}</span>
+                  <a href={w.url} target="_blank" rel="noreferrer" style={{ color: '#3498DB', textDecoration: 'none' }}>Open ↗</a>
+                </div>
+              ))}
+            </div>
+
+            {social.chapters?.length > 0 && (
+              <>
+                <h2 style={h2}>Career chapters</h2>
+                <div style={{ ...box, padding: 0 }}>
+                  {social.chapters.map((c) => {
+                    const warm = (c.people || []).filter((u) => ['warm', 'cool'].includes(warmthOf(merged.get(keyFor({ profile_url: u })), asOf))).length;
+                    return (
+                      <div key={`${c.company}-${c.from}`} style={{ display: 'flex', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)', fontSize: 13, alignItems: 'baseline' }}>
+                        <span style={{ flex: 1 }}><b>{c.company}</b> <span style={{ color: '#8b9a9a' }}>{c.title} · {new Date(c.from).getFullYear()}–{c.to ? new Date(c.to).getFullYear() : 'now'}</span></span>
+                        <span style={{ color: '#b8c4c4' }}>{c.made.toLocaleString()} connections made</span>
+                        <span style={{ color: '#ff9f43', minWidth: 90, textAlign: 'right' }}>{c.made ? `${Math.round((100 * warm) / c.made)}% still in touch` : ''}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
+
+            {social.posts?.posts?.length > 0 && (
+              <>
+                <h2 style={h2}>Does posting work?</h2>
+                <div style={box}>
+                  <div style={{ fontSize: 13 }}>
+                    In the week after a post you made <b>{social.posts.afterPosts.toFixed(1)}</b> new connections on average; a usual week, <b>{social.posts.usualWeek.toFixed(1)}</b>.
+                  </div>
+                  <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>What came after a post, not proof it came from it.</div>
+                  {[...social.posts.posts].sort((a, b) => b.week - a.week).slice(0, 3).map((p) => (
+                    <div key={p.t} style={{ fontSize: 12.5, color: '#b8c4c4', marginTop: 6 }}>
+                      {day(p.t)}: {p.week} new connections that week {p.link ? <a href={p.link} target="_blank" rel="noreferrer" style={{ color: '#3498DB', textDecoration: 'none' }}>Post ↗</a> : null}
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+
+            {social.invites?.total > 0 && (
+              <>
+                <h2 style={h2}>Who reaches out</h2>
+                <div style={box}>
+                  <span style={{ fontSize: 13 }}>
+                    {social.invites.incoming.toLocaleString()} requests came to you and you sent {social.invites.outgoing.toLocaleString()}
+                    {' '}({Math.round((100 * social.invites.incoming) / social.invites.total)}% came to you), as far as your export shows.
+                  </span>
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </main>
+    </div>
+  );
+}

package/.next/standalone/lib/experimental-client.js

@@ -0,0 +1,38 @@
+// The experimental all-day Auto-Bridge (Auto scan), as the header button and
+// the status bar see it. The switch is the Scan page's checkbox, kept in this
+// browser (its useRemembered: JSON under six-degrees-experimental-auto); the page
+// announces a change with the 'six-degrees:experimental' event.
+
+import { beginScrape } from './scraper-client';
+
+const KEY = 'six-degrees-experimental-auto';
+
+export function watchAllDay(change) {
+  window.addEventListener('storage', change);
+  window.addEventListener('six-degrees:experimental', change);
+  return () => {
+    window.removeEventListener('storage', change);
+    window.removeEventListener('six-degrees:experimental', change);
+  };
+}
+
+export function allDayNow() {
+  try { return localStorage.getItem(KEY) === 'true'; } catch { return false; }
+}
+
+const remembered = (key, fallback) => {
+  try { const v = localStorage.getItem(key); return v === null ? fallback : JSON.parse(v); } catch { return fallback; }
+};
+
+/** Start Auto scan with the Scan page's remembered choices (order, pages, finish), 10 people, S and A first. */
+export function startAutoScan() {
+  const order = remembered('six-degrees-bridge-order', 'newest');
+  return beginScrape('auto-bridge', {
+    experimental: true,
+    maxBridges: 10,
+    order,
+    tiers: order === 'score' ? ['S', 'A'] : [],
+    maxPages: remembered('six-degrees-bridge-pages-v2', 100),
+    deeper: remembered('six-degrees-bridge-finish', true),
+  });
+}

package/.next/standalone/lib/galaxy-export.js

@@ -0,0 +1,152 @@
+// Save the Galaxy as a picture, or record its replay as a video (the physics
+// lab, experimental). The Galaxy registers its <svg> here while it's on screen;
+// the lab's buttons call these. Nothing leaves the computer: the file is saved
+// like any other download.
+
+import { clockNow, setClock, play, pause } from './galaxy-lab.js';
+
+let current = null;   // { svg, stamp: () => text or null, legend: () => [[label, colour]] }
+
+export function registerGalaxy(entry) {
+  current = entry;
+  return () => { if (current === entry) current = null; };
+}
+
+export const galaxyShown = () => current != null;
+
+// The lab's highlight rules live in the page's CSS, which a picture of the
+// <svg> alone doesn't carry, so they ride along inside it.
+const EXPORT_CSS = `
+.lab-focus .gn:not(.lit), .lab-focus .gl:not(.lit) { opacity: 0.06; }
+.lab-focus .gl.lit { stroke-opacity: 0.7; }
+.lab-focus .dot-rings, .lab-focus .catalyst-ring { opacity: 0.15; }
+.lab-find .gn:not(.found), .lab-find .gl:not(.found) { opacity: 0.07; }
+.lab-find .gn.found { stroke: #fff; stroke-width: 2px; }
+`;
+
+function svgImage(svg) {
+  const clone = svg.cloneNode(true);
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  // The page's font, which the <svg> inherits on screen but not in a file.
+  clone.setAttribute('font-family', getComputedStyle(svg).fontFamily || 'system-ui, sans-serif');
+  const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+  style.textContent = EXPORT_CSS;
+  clone.insertBefore(style, clone.firstChild);
+  const xml = new XMLSerializer().serializeToString(clone);
+  const img = new Image();
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(xml)}`;
+  return img.decode().then(() => img);
+}
+
+// One frame: the Galaxy, its date while a replay runs, the legend, and a small credit.
+async function drawFrame(ctx, w, h) {
+  const img = await svgImage(current.svg);
+  ctx.fillStyle = '#0a0a1a';
+  ctx.fillRect(0, 0, w, h);
+  ctx.drawImage(img, 0, 0, w, h);
+  const scale = w / current.svg.clientWidth;
+  ctx.save();
+  ctx.scale(scale, scale);
+  const cw = w / scale;
+  const ch = h / scale;
+  const stamp = current.stamp();
+  if (stamp) {
+    ctx.font = '600 15px -apple-system, system-ui, sans-serif';
+    const tw = ctx.measureText(stamp).width;
+    ctx.fillStyle = 'rgba(10,15,30,0.85)';
+    ctx.beginPath();
+    ctx.roundRect?.(cw / 2 - tw / 2 - 16, ch - 52, tw + 32, 32, 16);
+    ctx.fill();
+    ctx.fillStyle = '#e6edf5';
+    ctx.textAlign = 'center';
+    ctx.fillText(stamp, cw / 2, ch - 31);
+  }
+  ctx.textAlign = 'left';
+  ctx.font = '11px -apple-system, system-ui, sans-serif';
+  let x = 20;
+  for (const [label, colour] of current.legend()) {
+    ctx.fillStyle = colour;
+    ctx.beginPath();
+    ctx.arc(x + 4, ch - 24, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = '#9aa';
+    ctx.fillText(label, x + 12, ch - 20);
+    x += 20 + ctx.measureText(label).width;
+  }
+  ctx.textAlign = 'right';
+  ctx.fillStyle = 'rgba(255,255,255,0.35)';
+  ctx.fillText('Six Degrees', cw - 16, 24);
+  ctx.restore();
+}
+
+function save(blob, name) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  // Anything appended to <body> is position: fixed (TRAPS §29). Gone at once.
+  a.style.position = 'fixed';
+  a.style.left = '-9999px';
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60000);
+}
+
+const today = () => new Date().toISOString().slice(0, 10);
+
+function canvasFor(scale) {
+  const w = Math.round(current.svg.clientWidth * scale);
+  const h = Math.round(current.svg.clientHeight * scale);
+  const canvas = document.createElement('canvas');
+  canvas.width = w;
+  canvas.height = h;
+  return { canvas, ctx: canvas.getContext('2d'), w, h };
+}
+
+/** The Galaxy as it is on screen, at twice the size, as a PNG. */
+export async function savePicture() {
+  if (!current) throw new Error('Open the Galaxy first.');
+  const { canvas, ctx, w, h } = canvasFor(2);
+  await drawFrame(ctx, w, h);
+  const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
+  save(blob, `six-degrees-galaxy-${today()}.png`);
+}
+
+export const canRecord = () => typeof window !== 'undefined' && typeof window.MediaRecorder !== 'undefined'
+  && typeof HTMLCanvasElement !== 'undefined' && typeof HTMLCanvasElement.prototype.captureStream === 'function';
+
+/**
+ * Plays the replay from the start and records it: a video the length of the
+ * replay, at 12 frames a second. Resolves when it's saved.
+ */
+export async function recordReplay() {
+  if (!current) throw new Error('Open the Galaxy first.');
+  if (!canRecord()) throw new Error('This window can’t record video.');
+  const { canvas, ctx, w, h } = canvasFor(1);
+  const type = ['video/mp4;codecs=avc1', 'video/webm;codecs=vp9', 'video/webm', 'video/mp4'].find((t) => MediaRecorder.isTypeSupported(t));
+  if (!type) throw new Error('This window can’t record video.');
+  await drawFrame(ctx, w, h);
+  const recorder = new MediaRecorder(canvas.captureStream(12), { mimeType: type, videoBitsPerSecond: 6_000_000 });
+  const chunks = [];
+  recorder.ondataavailable = (e) => { if (e.data.size) chunks.push(e.data); };
+  const done = new Promise((resolve) => { recorder.onstop = resolve; });
+  recorder.start(250);
+  pause();
+  setClock({ at: clockNow().min });
+  play();
+  let drawing = false;
+  await new Promise((resolve) => {
+    const tick = setInterval(async () => {
+      if (drawing) return;
+      drawing = true;
+      try { await drawFrame(ctx, w, h); } finally { drawing = false; }
+      if (!clockNow().playing) { clearInterval(tick); setTimeout(resolve, 600); }
+    }, 1000 / 12);
+  });
+  await drawFrame(ctx, w, h);
+  recorder.stop();
+  await done;
+  const ext = type.startsWith('video/mp4') ? 'mp4' : 'webm';
+  save(new Blob(chunks, { type: type.split(';')[0] }), `six-degrees-replay-${today()}.${ext}`);
+}