six-degrees 0.6.0 → 0.8.0

package/.next/standalone/lib/scan-risk.js

@@ -0,0 +1,44 @@
+// Saying yes to the scanner's risk, once, before it first touches LinkedIn.
+//
+// The Scan page used to carry the risk as a grey line at the bottom. Now the
+// first scan waits for an explicit "I understand" to three plain points, kept
+// as a setting (app_meta, lib/settings.js) so it travels with a copy of the
+// data. The server checks it too, so no button anywhere (the header's Check for
+// new, a Scan button in a panel) can start a first scan without it.
+//
+// Someone who scanned before this existed has seen the risk and chosen it: the
+// scanner's own Chrome profile in the data folder is the sign, since only the
+// scanner makes one, and it never travels in a copy. They aren't asked again.
+//
+// No Node imports: the Scan page reads the points from here too.
+
+export const RISK_POINTS = [
+  'It runs your own LinkedIn account automatically, in a Chrome window on this computer.',
+  'LinkedIn’s User Agreement doesn’t allow automated tools, and LinkedIn may restrict accounts that use them. The safe limits, 50 searches a day and 250 a month, stay on unless you change them.',
+  'Nothing leaves your computer. There is no account with us and nothing is uploaded.',
+];
+
+export const RISK_REFUSAL = 'Before the first scan, open the Scan page and confirm you understand what scanning risks.';
+
+// The scanner's actions that never open LinkedIn: installing its Python and
+// packages, and saving photos already linked from it (no browser, no search).
+const OFF_LINKEDIN = new Set(['install', 'setup', 'photos']);
+
+export const touchesLinkedIn = (action) => !OFF_LINKEDIN.has(String(action));
+
+/** When the risk was accepted (ISO time), or null; set from the Scan page. */
+export const SCAN_RISK_SETTING = {
+  default: null,
+  parse(value) {
+    if (value === null) return null;
+    if (typeof value !== 'string' || Number.isNaN(Date.parse(value))) {
+      throw new Error('When the scanning risk was accepted is a date and time.');
+    }
+    return new Date(value).toISOString();
+  },
+};
+
+/** @param {{ acceptedAt?: string | null, scannedBefore?: boolean }} state */
+export function riskAccepted({ acceptedAt = null, scannedBefore = false } = {}) {
+  return Boolean(acceptedAt) || scannedBefore;
+}

package/.next/standalone/lib/scan-state.js

@@ -41,6 +41,7 @@ export function runningNow(job) {
     case 'setup': return 'The scanner is being set up';
     case 'login': return 'The LinkedIn sign-in window is open';
     case 'photos': return 'Profile photos are being saved';
+    case 'connect': return 'A connection request is being sent';
     default: return 'A scan is running';
   }
 }

package/.next/standalone/lib/scanner-setup.js

@@ -1,12 +1,71 @@
 // What the Scan page's first step says and offers, from the checks GET
-// /api/scraper reports (app/api/scraper/route.js, lib/scanner-python.js), and
-// whether it asks for your field before that (askForField).
+// /api/scraper reports (app/api/scraper/route.js, lib/scanner-python.js),
+// whether it asks for your field once your connections are in (askForField),
+// and two answers the server gives that step: is Google Chrome here
+// (chromeInstalled), and are you signed in to LinkedIn (signedInFrom).
 // Plain data in, plain data out: the page draws it, and
 // tests/scanner-setup.test.mjs checks every state without a browser. No Node
 // imports here; the page runs in the browser.
 
 const MB = 1024 * 1024;
 
+// The scanner drives Google Chrome (scripts/scrape.py, channel "chrome"), so a
+// computer without it can set up the scanner's Python and still never scan.
+// It used to be a red box above the steps while step 1 said Ready; now step 1
+// isn't done without it, and the server refuses anything that opens LinkedIn
+// with the same words (app/api/scraper/route.js).
+export const CHROME_DOWNLOAD = 'https://www.google.com/chrome/';
+export const CHROME_MISSING = 'The scanner works in Google Chrome, and Chrome isn’t on this computer.';
+export const CHROME_BUTTON = 'Install Google Chrome, then come back';
+export const CHROME_REFUSAL = `${CHROME_MISSING} ${CHROME_BUTTON}.`;
+
+/**
+ * Is Google Chrome where Playwright's "chrome" channel looks for it (Chromium
+ * doesn't count)? `exists` is the file check (existsSync on the server), so
+ * this runs in a test with no Chrome at all.
+ *
+ * SIX_DEGREES_TEST_CHROME=found or =missing answers for the computer, for
+ * tests and for checking the Scan page's states by eye: the route's tests then
+ * don't depend on whether the machine running them has Chrome. Nothing in the
+ * app sets it; any other value is ignored.
+ */
+export function chromeInstalled({ platform, env = {}, exists }) {
+  const forced = env.SIX_DEGREES_TEST_CHROME;
+  if (forced === 'found') return true;
+  if (forced === 'missing') return false;
+  if (platform === 'darwin') return exists('/Applications/Google Chrome.app');
+  if (platform === 'linux') return exists('/opt/google/chrome/chrome');
+  // On Windows, for this user, then for everyone.
+  if (platform === 'win32') {
+    return [env.LOCALAPPDATA, env.PROGRAMFILES, env['PROGRAMFILES(X86)']]
+      .filter(Boolean)
+      .some((root) => exists(`${String(root).replace(/[\\/]+$/, '')}\\Google\\Chrome\\Application\\chrome.exe`));
+  }
+  return true; // elsewhere Playwright resolves the channel itself
+}
+
+// The scanner's note that LinkedIn's session was confirmed (scripts/scrape.py
+// SIGNED_IN_FILE): { signedIn, at }, written when the li_at cookie is seen past
+// any sign-in wall, and set to false while it waits for you to sign in.
+export const SIGNED_IN_FILE = 'signed-in.json';
+
+/**
+ * Step 2's "Signed in". It used to be "Chrome's cookie file exists", which is
+ * true the moment the scanner's window first opens, so opening LinkedIn and
+ * closing the window without signing in ticked the step. Now the scanner's own
+ * note says it (`note`, the parsed SIGNED_IN_FILE, or null when there is none
+ * or it can't be read), and only while its Chrome profile is still there
+ * (`profile`): deleting that signs you out.
+ *
+ * A data folder from before the note existed has none, and there the old
+ * check stands (`cookies`), so nobody already signed in is told they're signed
+ * out; the next scan writes the note.
+ */
+export function signedInFrom({ note, profile, cookies }) {
+  if (note && typeof note === 'object' && typeof note.signedIn === 'boolean') return note.signedIn && Boolean(profile);
+  return Boolean(cookies);
+}
+
 /** "Python 3.9.6 is too old…": why a Python this computer has won't do, or ''. */
 function whyNotThisPython(found) {
   if (!found?.version) return 'This computer has no Python the scanner can use.';
@@ -40,10 +99,11 @@ function ownPythonNote(own, { done, button }) {
 }
 
 /**
- * Step 1, "Set up the scanner": { done, text, button, note }, where button is
- * { action: 'install'|'setup', label } or null (nothing to press), and note is
- * a line to show above the step when the Python inside the app didn't work
- * (ownPythonNote), or null.
+ * Step 1, "Set up the scanner": { done, text, button, note, chrome }, where
+ * button is { action: 'install'|'setup', label } or null (nothing to press),
+ * note is a line to show above the step when the Python inside the app didn't
+ * work (ownPythonNote), or null, and chrome is { label, href } when Google
+ * Chrome isn't on this computer (the way to get it), or null.
  *
  *   ready        the app's own Python (nothing to install), one named by
  *                SIX_DEGREES_PYTHON, or the scanner's environment / a Python
@@ -53,10 +113,24 @@ function ownPythonNote(own, { done, button }) {
  *   setup        none, but a standalone Python for this computer is pinned:
  *                "Set up the scanner" downloads it, then installs
  *   neither      no Python and nothing to download for this computer
+ *
+ * Any of them without Chrome isn't done: the Python's part is said first if
+ * there is one, then Chrome's. Only a definite "no Chrome" counts; a status
+ * that couldn't say (none yet, or an older server's) leaves it out.
  */
 export function setupStep(status) {
   const step = stepOnly(status);
-  return { ...step, note: ownPythonNote(status?.checks?.ownPython, step) };
+  const note = ownPythonNote(status?.checks?.ownPython, step);
+  if (status?.checks?.chrome !== false) return { ...step, note, chrome: null };
+  return {
+    ...step,
+    done: false,
+    // "Ready" or "Installed." would read as finished: with the Python done,
+    // Chrome is all the step says.
+    text: step.done ? CHROME_MISSING : `${step.text} ${CHROME_MISSING}`,
+    note,
+    chrome: { label: CHROME_BUTTON, href: CHROME_DOWNLOAD },
+  };
 }
 
 function stepOnly(status) {
@@ -105,19 +179,27 @@ function stepOnly(status) {
 }
 
 /**
- * Whether the Scan page asks for your field first (app/components/FieldStep.js):
- * once, before the first scan. Never to someone who already has a network, has
- * picked a sector (Scores → Your sector), or answered or skipped the question
- * before (`fieldAsked`). `status` is GET /api/scraper's answer (null while it
- * loads), `settings` GET /api/settings' `settings` (undefined while it loads,
- * null when it couldn't be read). null means not known yet: the page waits,
- * rather than show the steps and then swap them for the question.
+ * Whether the Scan page asks for your field (app/components/FieldStep.js):
+ * once, when your own connections are in (step 3) and before who they know is
+ * mapped, under "Your galaxy is ready". It used to stand in front of step 1,
+ * one more thing between someone new and their first scan; asked here, it
+ * rescores people they can already see.
+ *
+ * Never before step 3, never once a 2nd-degree or company scan is in (that
+ * network's owner is past onboarding), never while a scan runs, and never to
+ * someone who has picked a sector (Scores → Your sector) or answered or
+ * skipped it before (`fieldAsked`, saved either way). So whoever has only
+ * their 1st degree mapped, someone from before this moved included, is asked
+ * once. `status` is GET /api/scraper's answer (null while it loads), `settings`
+ * GET /api/settings' `settings` (undefined while it loads, null when it
+ * couldn't be read). null means not known yet: the page leaves the question
+ * out until it is, rather than show it and take it away.
  */
 export function askForField(status, settings) {
   if (!status) return null;
   const n = status.network;
   // No counts means the app couldn't be asked; a scan running is past asking.
-  if (!n || n.first || n.second || n.third || status.running) return false;
+  if (!n || !n.first || n.second || n.third || status.running) return false;
   if (settings === undefined) return null;
   return Boolean(settings && !settings.fieldAsked && !settings.sectorFocus?.sectors?.length);
 }

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

@@ -8,6 +8,7 @@
 // Now they all call this, which talks to /api/scraper on the app itself.
 
 import { runningNow } from './scan-state.js';
+import { CHROME_REFUSAL } from './scanner-setup.js';
 
 export async function scraperStatus() {
   const r = await fetch('/api/scraper');
@@ -38,7 +39,13 @@ export async function startScrape(action, name, extra = {}) {
     body: JSON.stringify(scanRequest(action, { ...(name ? { name } : {}), ...extra })),
   });
   const d = await r.json().catch(() => ({}));
-  if (!r.ok) throw new Error(d.error || 'Could not start the scanner.');
+  if (!r.ok) {
+    // The answer's flags travel with the error (needsAutoAcceptance, say), so a
+    // button can tell a question to ask from a reason to show.
+    const err = new Error(d.error || 'Could not start the scanner.');
+    err.details = d;
+    throw err;
+  }
   return d;
 }
 
@@ -54,12 +61,13 @@ export async function resumePoint(id) {
 }
 
 /** Nothing noted: before the first answer, and for the sample or a CSV. */
-export const NO_SCAN_NOTES = Object.freeze({ skips: [], read: [] });
+export const NO_SCAN_NOTES = Object.freeze({ skips: [], read: [], lists: {} });
 
 /**
  * What the scanner noted, for lib/reach.js: `skips`, the hidden lists
- * ([{ profileUrl, … }]), and `read`, the profile URLs of every list it has
- * read. Never throws: with no answer (the app restarting, say) nothing is
+ * ([{ profileUrl, … }]), `read`, the profile URLs of every list it has
+ * read, and `lists`, how far each was read ({ url: { pages, more, total } }).
+ * Never throws: with no answer (the app restarting, say) nothing is
  * noted, so a hidden list shows as ready rather than anyone going missing.
  */
 export async function loadScanNotes() {
@@ -67,7 +75,11 @@ export async function loadScanNotes() {
     const r = await fetch('/api/scraper?reach=1');
     if (!r.ok) return NO_SCAN_NOTES;
     const d = await r.json();
-    return { skips: Array.isArray(d.skips) ? d.skips : [], read: Array.isArray(d.read) ? d.read : [] };
+    // `lists` is how far each list was read, for the rings round a dot
+    // (lib/reach.js scanBars). Dropped here until 10/3, every scanned
+    // connection drew 2 of 5 bars, "partly read", even with the whole list in.
+    const lists = d.lists && typeof d.lists === 'object' && !Array.isArray(d.lists) ? d.lists : {};
+    return { skips: Array.isArray(d.skips) ? d.skips : [], read: Array.isArray(d.read) ? d.read : [], lists };
   } catch {
     return NO_SCAN_NOTES;
   }
@@ -88,9 +100,10 @@ export function notReadyMessage(status) {
   if (!c.dependencies) {
     // With no Python and nothing to download for this computer, Scan can't help yet.
     if (!c.python && !c.download) return 'No Python 3.10 to 3.14 is installed on this machine.';
-    return 'The scanner is not set up yet — open Scan to set it up.';
+    return 'The scanner is not set up yet. Open Scan to set it up.';
   }
-  if (!c.chrome) return 'Google Chrome is not installed.';
+  // The words the Scan page and the server use (lib/scanner-setup.js).
+  if (!c.chrome) return CHROME_REFUSAL;
   return null;
 }
 
@@ -121,7 +134,7 @@ const QUIET_MS = 5000;
 /** Before the first answer, and on the server, where nothing is asked. */
 export const SCANNER_UNKNOWN = Object.freeze({
   known: false, running: false, pending: false, action: null, target: null,
-  startedAt: null, progress: null, pages: 0, log: [], finished: [],
+  startedAt: null, progress: null, pages: 0, found: [], log: [], finished: [],
 });
 
 const listeners = new Set();
@@ -165,6 +178,7 @@ function take(s) {
     startedAt: running ? s.startedAt ?? null : null,
     progress: running ? s.progress ?? null : null,
     pages: running ? Number(s.pages) || 0 : 0,   // pages read so far (app/api/scraper/route.js)
+    found: running && Array.isArray(s.found) ? s.found.map(Number).filter(Number.isFinite) : [],   // people each page found
     budget: running ? s.budget ?? null : null,
     log: running && Array.isArray(s.log) ? s.log : [],
     finished,
@@ -271,6 +285,17 @@ export function isCircleScan(job) {
   return Boolean(job?.target) && ['bridge', 'rescrape', 'resume'].includes(job.action);
 }
 
+/**
+ * Does this job add people to circles on the map while it runs: one person's
+ * circle, or a batch of them (Map 2nd degree, every paused list)? The map
+ * looks again every so often while one does, with Bridge Chains open
+ * (app/page.js NetworkRefresh), so the Scan page's "Watch it fill in" shows
+ * the circle filling in, not as it was when the page opened.
+ */
+export function fillsCircles(job) {
+  return isCircleScan(job) || ['auto-bridge', 'auto-bridge-retry', 'resume-all'].includes(job?.action);
+}
+
 /**
  * Is this job, running or finished, a read of this person's circle? By id when
  * both have one: two connections can share a name. Else by name.
@@ -300,6 +325,8 @@ export function busyReason(job = now) {
     case 'full':
     case 'refresh':
       return 'Your own connections are being scanned';
+    case 'connect':
+      return who ? `A request to ${who} is being sent` : 'A connection request is being sent';
     default:
       return runningNow(job.action);
   }

package/.next/standalone/lib/search-risk.js

@@ -28,10 +28,14 @@ export function limitQuestion(from = {}, to = {}) {
   return null;
 }
 
-/** The note under the picker while the budget is risky; null when it isn't. */
-export function limitNote({ daily, monthly } = {}) {
+/**
+ * The note under the picker while the budget is risky; null when it isn't.
+ * `restriction: false` leaves out the 373 sentence, for Settings → LinkedIn
+ * usage when its own warning has just said it (lib/usage.js warningParts).
+ */
+export function limitNote({ daily, monthly } = {}, { restriction = true } = {}) {
   if (!riskyLimits({ daily, monthly })) return null;
-  const parts = [`A real account was restricted after ${RESTRICTED_AT} searches in 24 hours.`];
+  const parts = restriction ? [`A real account was restricted after ${RESTRICTED_AT} searches in 24 hours.`] : [];
   if (riskyDaily(daily)) parts.push(`${daily} a day can use up a free account's month in a day or two.`);
   if (monthly === 0) parts.push('With no monthly cap, nothing but the daily budget stops a long run.');
   return parts.join(' ');

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

@@ -1,17 +1,19 @@
 // Saving settings from the browser: POST /api/settings with only the settings
 // that change (lib/settings.js keeps the rest as stored). Scores → Your sector
 // and Tiers save through it, and so does the Scan page's question about your
-// field before the first scan (app/components/FieldStep.js).
+// field before the first scan (app/components/FieldStep.js), and the look and
+// the Galaxy's saved layouts (lib/synced-setting.js).
 
 /**
+ * `keepalive` lets a save sent as the page goes away still arrive.
  * @returns { settings, effects, error }: `settings` as saved, also when the
  *   save landed but the work it set in motion failed (lib/settings-effects.js);
  *   `effects` what that work reported; `error` a message fit to show, or null.
  */
-export async function saveSettings(patch) {
+export async function saveSettings(patch, { keepalive = false } = {}) {
   try {
     const r = await fetch('/api/settings', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings: patch }),
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings: patch }), keepalive,
     });
     const d = await r.json();
     return { settings: d.settings || null, effects: d.effects || null, error: r.ok ? null : d.error || 'Could not save.' };

package/.next/standalone/lib/settings.js

@@ -13,6 +13,10 @@
 import { SECTOR_FOCUS_SETTING, FIELD_ASKED_SETTING } from './sector-focus.js';
 import { TIER_SCALE_SETTING } from './scoring.js';
 import { TITLE_RANKING_SETTING } from './title-ranking.js';
+import { SCAN_RISK_SETTING } from './scan-risk.js';
+import { AUTO_ACCEPTED_SETTING } from './auto-connect.js';
+import { THEME_SETTING } from './themes.js';
+import { GALAXY_LAYOUTS_SETTING } from './galaxy-layouts.js';
 
 export const SETTINGS = {
   // Scores → Your sector: industries whose companies count for more (lib/sector-focus.js).
@@ -23,6 +27,15 @@ export const SETTINGS = {
   tierScale: TIER_SCALE_SETTING,
   // Scores → Titles: how much each kind of title counts, and roles you're looking for (lib/title-ranking.js).
   titleRanking: TITLE_RANKING_SETTING,
+  // The Scan page's "I understand" before the first scan: when it was given (lib/scan-risk.js).
+  scanRiskAccepted: SCAN_RISK_SETTING,
+  // Auto's one-time question before its first connection request: when it was answered yes (lib/auto-connect.js).
+  autoConnectAccepted: AUTO_ACCEPTED_SETTING,
+  // Settings → Appearance: the look (lib/themes.js). Here so it travels with a
+  // backup or a restore; the browser keeps a copy to paint with first (lib/theme-store.js).
+  theme: THEME_SETTING,
+  // The Galaxy's saved layouts (lib/galaxy-layouts.js), here for the same reason.
+  galaxyLayouts: GALAXY_LAYOUTS_SETTING,
 };
 
 const KEY = 'settings';

package/.next/standalone/lib/social-store.js

@@ -14,8 +14,9 @@
 //
 // Two files so that turning Keep my messages off, or Forget it, deletes the
 // words by deleting one file, and so the everyday file the Galaxy and the
-// Social tab read stays small however many messages there are. "Save a copy of my network" carries
-// them when its Social box is ticked (lib/data-folder.js SOCIAL_FILE).
+// Social tab read stays small however many messages there are. "Export backup file…" carries
+// them when its Social box is ticked (lib/data-folder.js SOCIAL_FILE); the backups Six Degrees
+// makes by itself never do, so deleting them here deletes them everywhere (lib/backups.js).
 
 import { readFileSync, writeFileSync, renameSync, rmSync, statSync } from 'node:fs';
 import path from 'node:path';

package/.next/standalone/lib/synced-setting.js

@@ -0,0 +1,46 @@
+// A choice kept with the network (lib/settings.js), so it travels with a
+// backup, an export and a restore, while the browser keeps a copy of it to
+// read before the page paints (the look) or before the server answers. The
+// look and the Galaxy's saved layouts work this way (lib/theme-store.js,
+// lib/galaxy-lab.js). No imports: pure, so the tests can pin it.
+
+/**
+ * What to use once the server has answered, and whether to save the browser's
+ * copy to it.
+ *
+ * - The server has one (`saved`): it wins. A restore or an import brings its
+ *   own look, and another window of the app (the Mac app and a browser tab
+ *   keep separate copies) may have changed it.
+ * - The server has none (null: never saved on this network, as for everyone
+ *   before this was kept there): the browser's copy stands, and is saved once,
+ *   unless it is only the default.
+ *
+ * @returns {{ use, save: boolean, changed: boolean }}
+ */
+export function reconcileSaved({ saved, cached, isDefault, same }) {
+  if (saved === null || saved === undefined) return { use: cached, save: !isDefault(cached), changed: false };
+  return { use: saved, save: false, changed: !same(saved, cached) };
+}
+
+/**
+ * Save at most once per `wait` ms, the last value winning: a colour picker
+ * changes the look many times a second while it's dragged. `flush()` sends a
+ * waiting save now (the page is going away: otherwise the network's older
+ * value would win when it opens again). `save(value, { now })` is told which.
+ */
+export function laterSaver(save, wait = 400) {
+  let timer = null;
+  let next;
+  const send = (now) => {
+    clearTimeout(timer);
+    timer = null;
+    Promise.resolve(save(next, { now })).catch(() => { /* kept in this browser; saved with the next change */ });
+  };
+  const later = (value) => {
+    next = value;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => send(false), wait);
+  };
+  later.flush = () => { if (timer) send(true); };
+  return later;
+}

package/.next/standalone/lib/theme-store.js

@@ -1,13 +1,17 @@
-// The theme in use, in this browser (lib/themes.js has what a theme is). Read
-// once when the page loads, before anything draws, so the dots, your dot and
-// the map's lines come out in its colours; changed from Settings → Appearance.
+// The theme in use (lib/themes.js has what a theme is). Read once when the
+// page loads, before anything draws, so the dots, your dot and the map's lines
+// come out in its colours; changed from Settings → Appearance.
 //
-// Kept in localStorage, like the Galaxy's sliders: a look belongs to the
-// screen it's on. The CSS variables are kept beside it, ready made, for the
-// script in app/layout.js that puts them on the page before it paints, so a
-// theme never flashes the standard colours first.
+// Saved with the network's settings (lib/settings.js 'theme'), so a backup, an
+// export or a restore carries the look with it. localStorage keeps a copy, the
+// one read before the page paints: the CSS variables are kept beside it, ready
+// made, for the script in app/layout.js that puts them on the page first, so a
+// theme never flashes the standard colours. Once the server answers
+// (app/components/ThemeLoader.js), its look wins (lib/synced-setting.js).
 
-import { cleanTheme, resolveTheme, themeVars, themeAttrs, TIER_COLORS, MAP_LOOK } from './themes.js';
+import { cleanTheme, resolveTheme, themeVars, themeAttrs, isLight, TIER_COLORS, MAP_LOOK } from './themes.js';
+import { saveSettings } from './settings-client.js';
+import { reconcileSaved, laterSaver } from './synced-setting.js';
 
 const KEY = 'six-degrees-theme';
 export const VARS_KEY = 'six-degrees-theme-vars';
@@ -24,12 +28,16 @@ function read() {
 function apply(next) {
   const theme = resolveTheme(next);
   Object.assign(TIER_COLORS, theme.tiers);
-  Object.assign(MAP_LOOK, { you: theme.you, lines: theme.lines, line: theme.line, bg: theme.bg });
+  const light = isLight(theme);
+  Object.assign(MAP_LOOK, { you: theme.you, lines: theme.lines, line: theme.line, bg: theme.bg, dots: theme.dots, light, text: light ? '#11141c' : '#ffffff' });
   if (typeof document === 'undefined') return;
   const vars = themeVars(next);
   const root = document.documentElement;
+  // A light look's words and borders go when a dark one comes: they fall back to the dark values.
+  for (const k of [...root.style]) if (k.startsWith('--sd-') && !(k in vars)) root.style.removeProperty(k);
   for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
   Object.assign(root.dataset, themeAttrs(next));
+  root.style.colorScheme = light ? 'light' : 'dark';
   try { localStorage.setItem(VARS_KEY, JSON.stringify({ vars, attrs: themeAttrs(next) })); } catch { /* it's applied anyway */ }
 }
 
@@ -48,13 +56,37 @@ if (typeof window !== 'undefined') {
 export const themeNow = () => choice;
 export const serverTheme = () => DEFAULT;
 
-export function setTheme(next) {
+const same = (a, b) => JSON.stringify(cleanTheme(a)) === JSON.stringify(cleanTheme(b));
+const saveLater = laterSaver((theme, { now }) => saveSettings({ theme }, { keepalive: now }));
+// A look picked just before a reload is saved on the way out, or the
+// network's older one would replace it as the page opens again.
+if (typeof window !== 'undefined') window.addEventListener('pagehide', () => saveLater.flush());
+
+function choose(next) {
   choice = cleanTheme(next);
   try { localStorage.setItem(KEY, JSON.stringify(choice)); } catch { /* this visit only */ }
   apply(choice);
   listeners.forEach((f) => f());
 }
 
+export function setTheme(next) {
+  choose(next);
+  saveLater(choice);
+}
+
+/**
+ * The look saved with the network (GET /api/settings 'theme'), once the page
+ * has it: it replaces this browser's copy, or, when the network has none yet,
+ * this browser's look is saved to it once.
+ */
+export function adoptSavedTheme(saved) {
+  const { use: next, save, changed } = reconcileSaved({
+    saved: saved == null ? null : cleanTheme(saved), cached: choice, isDefault: (t) => same(t, DEFAULT), same,
+  });
+  if (save) saveSettings({ theme: choice });
+  if (changed) choose(next);
+}
+
 export function watchTheme(f) {
   listeners.add(f);
   return () => listeners.delete(f);