six-degrees 0.6.0 → 0.7.0

package/.next/standalone/app/components/settings/DataSection.js

@@ -3,13 +3,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Section, Body, Mono, Status, Btn, LINE } from '../ui';
 
-// Settings → Your data: where the network is kept, what it takes up, and how to
-// carry it to another computer. The server does the work (app/api/data/…,
-// lib/data-export.js, lib/data-import.js); this section only asks, on a click.
+// Settings → Your data: where the network is kept, what it takes up, its
+// backups, and how to carry it to another computer. The server does the work
+// (app/api/data/…, lib/backups.js, lib/data-export.js, lib/data-import.js);
+// this section only asks, on a click.
 //
-// An import is checked and staged by its click, then replaces the network the
-// next time Six Degrees starts, after a copy of what was here is kept. So the
-// last word this section says about an import is always how to restart.
+// An import, and a restore from a backup (which is an import of it), is
+// checked and staged by its click, then replaces the network the next time Six
+// Degrees starts, after a copy of what was here is kept. So the last word this
+// section says about either is always how to restart.
 
 const MB = 1024 * 1024;
 const DAY_MS = 24 * 3600 * 1000;
@@ -32,15 +34,23 @@ function when(value, withTime = true) {
   return d.toLocaleString(undefined, withTime ? { dateStyle: 'medium', timeStyle: 'short' } : { dateStyle: 'medium' });
 }
 
-// The README's steps for putting back what an import replaced. A link the
-// person clicks (it opens in their browser), never a request the page makes.
-const UNDO_HELP = 'https://github.com/blakeb056/six-degrees#undo-an-import';
+/** What a backup is, in a few words (lib/backups.js describeBackups). */
+function backupLabel(b) {
+  if (b.kind === 'daily') return 'Daily';
+  if (b.kind === 'before-update') return b.version ? `Before version ${b.version}` : 'Before a new version';
+  if (b.kind === 'before-import') return 'Before an import or a restore';
+  return b.byHand ? 'Put here by hand' : 'Made by you';
+}
 
-const BACKUP_KIND = {
-  auto: 'before a new version',
-  import: 'before an import',
-  manual: 'made by hand',
-};
+/** What is in it, when that isn't the whole network with its photos. */
+function backupHolds(b) {
+  if (!b.restorable) return 'not a backup Six Degrees can restore';
+  if (b.format === 'sixdegrees') return 'network, photos and files';
+  if (b.withFiles) return 'network, with its photos and files beside it';
+  if (b.kind === 'before-update') return 'network only (made before backups had photos)';
+  if (b.kind === 'before-import') return 'network only (it had no photos or files to keep)';
+  return 'network only';
+}
 
 /** The server's answer, or an Error carrying its message (and its data, for the caller). */
 async function answer(res, fallback) {
@@ -50,24 +60,94 @@ async function answer(res, fallback) {
 }
 
 const row = { display: 'flex', gap: 10, marginTop: 12, flexWrap: 'wrap', alignItems: 'center' };
-const small = { fontSize: 12, color: '#667', marginTop: 10 };
-const subhead = { fontSize: 14, fontWeight: 650, margin: '26px 0 4px', color: '#e8e8ee' };
-const check = { display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 12, fontSize: 13, color: '#c8d0d0', lineHeight: 1.5, cursor: 'pointer' };
+const small = { fontSize: 12, color: 'var(--sd-fg-4, #667)', marginTop: 10 };
+const subhead = { fontSize: 14, fontWeight: 650, margin: '26px 0 4px', color: 'var(--sd-fg-1, #e8e8ee)' };
+const check = { display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 12, fontSize: 13, color: 'var(--sd-fg-2, #c8d0d0)', lineHeight: 1.5, cursor: 'pointer' };
 
 function Fact({ label, children }) {
   return (
     <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', padding: '7px 0', borderTop: LINE, fontSize: 13.5 }}>
-      <span style={{ color: '#8b9a9a' }}>{label}</span>
-      <span style={{ color: '#e8e8ee', textAlign: 'right' }}>{children}</span>
+      <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}>{label}</span>
+      <span style={{ color: 'var(--sd-fg-1, #e8e8ee)', textAlign: 'right' }}>{children}</span>
     </div>
   );
 }
 
-function UndoLink() {
+/** The newest backup's line: when, and whether it passed the importer's checks. */
+function LastBackup({ status }) {
+  const last = status?.last;
+  const failed = status?.failed;
+  // A backup that couldn't be made after the newest one that was: that comes first (TRAPS §7).
+  const failedSince = failed && (!last || Date.parse(failed.at) > Date.parse(last.at));
   return (
-    <a href={UNDO_HELP} target="_blank" rel="noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>
-      Undo an import
-    </a>
+    <>
+      {failedSince && (
+        <Status tone="bad">
+          The last backup didn’t work ({when(failed.at)}): {failed.message.replace(/\.$/, '')}.
+          {!last && ' There’s no backup yet.'}
+        </Status>
+      )}
+      {last ? (
+        last.verified ? (
+          <Status tone={failedSince ? undefined : 'ok'}>
+            Last backup: {when(last.at)}, verified{last.people != null ? ` (${people(last.people)})` : ''}.
+          </Status>
+        ) : (
+          <Status tone="bad">
+            Last backup: {when(last.at)}, but it didn’t pass its check, so it can’t be restored: {last.problem}
+            {' '}Click Back up now to make a new one.
+          </Status>
+        )
+      ) : !failedSince && (
+        <Status>No backup yet. One is made each day Six Degrees is open with a network in it.</Status>
+      )}
+    </>
+  );
+}
+
+/** An import or a restore that waits for the next start, and how to restart. */
+function Pending({ pending, info, busy, restarting, onRestart, onCancel }) {
+  const what = pending.restoredFrom
+    ? <>The backup <Mono>{pending.restoredFrom}</Mono></>
+    : <>The network in the copy{pending.exportedAt ? ` saved ${when(pending.exportedAt, false)}` : ''}</>;
+  return (
+    <Status>
+      <div style={{ fontWeight: 650 }}>{pending.restoredFrom ? 'A restore is waiting to finish.' : 'An import is waiting to finish.'}</div>
+      <div>
+        {what}
+        {' '}({people(pending.people)}{pending.photos ? `, ${plural(pending.photos, 'photo')}` : ''}
+        {pending.fromVersion ? `, from Six Degrees ${pending.fromVersion}` : ''})
+        {pending.replacedPeople > 0
+          ? ` replaces the ${people(pending.replacedPeople)} here the next time Six Degrees starts. A copy of what’s here now is kept in backups first, so it can be undone.`
+          : ' becomes the network here the next time Six Degrees starts.'}
+        {' '}Your LinkedIn search budget and any pause on scanning are kept.
+      </div>
+      {pending.error && (
+        <div style={{ color: 'var(--sd-red, #ff7676)', marginTop: 6 }}>
+          The last try stopped: {pending.error.replace(/\.$/, '')}. It tries again the next time Six Degrees starts.
+        </div>
+      )}
+      {restarting ? (
+        <div style={{ marginTop: 8 }}>Restarting… this page comes back in a few seconds.</div>
+      ) : (
+        <>
+          <div style={{ marginTop: 8 }}>{info.restart.how}</div>
+          {info.restart.command && <div style={{ marginTop: 6 }}><Mono>{info.restart.command}</Mono></div>}
+          <div style={row}>
+            {info.restart.canRestart && (
+              <Btn primary onClick={onRestart} disabled={!!busy}>
+                {busy === 'restart' ? 'Restarting…' : 'Restart now'}
+              </Btn>
+            )}
+            {!pending.started && (
+              <Btn onClick={onCancel} disabled={!!busy}>
+                {busy === 'cancel' ? 'Cancelling…' : pending.restoredFrom ? 'Cancel the restore' : 'Cancel the import'}
+              </Btn>
+            )}
+          </div>
+        </>
+      )}
+    </Status>
   );
 }
 
@@ -76,6 +156,9 @@ export default function DataSection() {
   const [loadError, setLoadError] = useState(null);
   const [busy, setBusy] = useState(null);
   const [folderNote, setFolderNote] = useState(null);
+  const [backupNote, setBackupNote] = useState(null);
+  const [rowNote, setRowNote] = useState(null);
+  const [confirming, setConfirming] = useState(null);
   const [exportNote, setExportNote] = useState(null);
   const [importNote, setImportNote] = useState(null);
   const [photos, setPhotos] = useState(true);
@@ -131,6 +214,61 @@ export default function DataSection() {
     }
   }
 
+  async function backUpNow() {
+    setBusy('backup');
+    setBackupNote(null);
+    setRowNote(null);
+    try {
+      const d = await answer(await fetch('/api/data/backup', { method: 'POST' }), 'The backup could not be made.');
+      await load();
+      const b = d.backup;
+      setBackupNote({
+        tone: 'ok',
+        text: `Backed up ${people(b.people)}${b.photos ? ` and ${plural(b.photos, 'photo')}` : ''} (${size(b.bytes)}), and checked it. This one stays until you delete it.`,
+      });
+    } catch (e) {
+      await load();
+      setBackupNote({ tone: 'bad', text: e.message });
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  // The server opens it (the page has no way to reach Finder itself). Where it
+  // can't (no file browser on this computer), the answer names the file.
+  async function revealBackup(name) {
+    setBusy(`reveal:${name}`);
+    setRowNote(null);
+    try {
+      await answer(await fetch('/api/data/reveal', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ backup: name }),
+      }), 'The backup could not be shown.');
+    } catch (e) {
+      setRowNote({ name, tone: 'bad', text: e.message });
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function restoreBackup(name) {
+    setBusy(`restore:${name}`);
+    setRowNote(null);
+    setBackupNote(null);
+    try {
+      await answer(await fetch('/api/data/restore', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, replace: info.people }),
+      }), 'The backup could not be restored.');
+      setConfirming(null);
+      await load();
+    } catch (e) {
+      // The network changed since this page asked: show the new count to agree to.
+      if (e.data?.needsConfirm) await load();
+      setRowNote({ name, tone: 'bad', text: e.message });
+    } finally {
+      setBusy(null);
+    }
+  }
+
   async function exportNow() {
     setBusy('export');
     setExportNote(null);
@@ -140,7 +278,7 @@ export default function DataSection() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ photos, social }),
       });
-      if (!res.ok) await answer(res, 'The copy could not be made.');
+      if (!res.ok) await answer(res, 'The backup file could not be made.');
       const blob = await res.blob();
       const name = /filename="([^"]+)"/.exec(res.headers.get('content-disposition') || '')?.[1] || 'Six Degrees backup.sixdegrees';
       const url = URL.createObjectURL(blob);
@@ -182,7 +320,7 @@ export default function DataSection() {
     try {
       const headers = { 'Content-Type': 'application/octet-stream', 'X-Six-Degrees-Size': String(file.size) };
       if (info.people > 0) headers['X-Six-Degrees-Replace'] = String(info.people);
-      await answer(await fetch('/api/data/import', { method: 'POST', headers, body: file }), 'The file could not be imported.');
+      await answer(await fetch('/api/data/import', { method: 'POST', headers, body: file }), 'The file could not be restored.');
       setFile(null);
       setConfirmed(false);
       if (picker.current) picker.current.value = '';
@@ -202,14 +340,17 @@ export default function DataSection() {
   async function cancelImport() {
     setBusy('cancel');
     setImportNote(null);
+    setBackupNote(null);
+    // A restore's answer goes where it was asked for, under Backups.
+    const say = info.pending?.restoredFrom ? setBackupNote : setImportNote;
     try {
-      await answer(await fetch('/api/data/import', { method: 'DELETE' }), 'The import could not be cancelled.');
+      await answer(await fetch('/api/data/import', { method: 'DELETE' }), 'It could not be cancelled.');
       // Read the folder again first, so "Cancelled" never shows beside a
       // waiting import that is already gone.
       await load();
-      setImportNote({ tone: 'ok', text: 'Cancelled. The network here stays as it is.' });
+      say({ tone: 'ok', text: 'Cancelled. The network here stays as it is.' });
     } catch (e) {
-      setImportNote({ tone: 'bad', text: e.message });
+      say({ tone: 'bad', text: e.message });
     } finally {
       setBusy(null);
     }
@@ -236,7 +377,7 @@ export default function DataSection() {
         await wait(1000);
       }
       setRestarting(false);
-      setImportNote({ tone: 'bad', text: 'Six Degrees didn’t come back. Quit it and open it again: the import finishes as it starts.' });
+      setImportNote({ tone: 'bad', text: 'Six Degrees didn’t come back. Quit it and open it again: it finishes as it starts.' });
     } catch (e) {
       setImportNote({ tone: 'bad', text: e.message });
     } finally {
@@ -257,9 +398,15 @@ export default function DataSection() {
   const inCopy = info.photosInCopy || info.photos;
   const backups = info.backups || [];
   const backupBytes = backups.reduce((n, b) => n + (b.bytes || 0), 0);
+  const status = info.backupStatus || {};
+  const keep = status.keep || {};
   const tooBig = Boolean(file && file.size > info.maxImportBytes);
   const replaces = info.people > 0;
   const last = info.lastImport;
+  const finder = info.platform === 'darwin' ? 'Show in Finder' : 'Show in folder';
+  const pendingBox = pending && (
+    <Pending pending={pending} info={info} busy={busy} restarting={restarting} onRestart={restartNow} onCancel={cancelImport} />
+  );
 
   return (
     <Section
@@ -285,37 +432,89 @@ export default function DataSection() {
         </Fact>
       </div>
 
+      <h3 style={subhead}>Backups</h3>
+      <LastBackup status={status} />
+      <div style={row}>
+        <Btn onClick={backUpNow} disabled={!!busy || restarting || info.people === 0}>
+          {busy === 'backup' ? 'Backing up…' : 'Back up now'}
+        </Btn>
+        {info.people === 0 && <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>There’s no network here to back up yet.</span>}
+      </div>
+      {backupNote && <Status tone={backupNote.tone}>{backupNote.text}</Status>}
+      {pending?.restoredFrom && pendingBox}
+      <Body style={small}>
+        Each backup is your whole network with its photos, your settings and the scanner’s notes, checked as it’s
+        made. Six Degrees makes one each day it’s open and before a new version first opens your data. It keeps the
+        last {keep.daily ?? 7} daily backups, {keep['before-update'] ?? 3} from before new versions, and
+        {' '}{keep['before-import'] ?? 3} from before an import or a restore (those for at least {status.floorDays ?? 30} days).
+        Backups you make with Back up now stay until you delete them. The Social tab’s messages and notes are never
+        in them, so deleting those there deletes them everywhere. Backups are on this computer only, so to keep one safe
+        if the computer is lost, copy it somewhere else.
+      </Body>
+
       {backups.length > 0 && (
-        <details style={{ marginTop: 10, fontSize: 13, color: '#8b9a9a' }}>
-          <summary style={{ cursor: 'pointer' }}>The backups</summary>
-          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto auto', gap: '6px 14px', marginTop: 8 }}>
-            {backups.map((b) => (
-              <div key={b.name} style={{ display: 'contents' }}>
-                <span style={{ wordBreak: 'break-all', color: '#c8d0d0' }}>
-                  {b.name}{b.folder ? '/' : ''}
-                  <span style={{ color: '#667' }}> · {b.folder ? 'its photos and files' : BACKUP_KIND[b.kind] || b.kind}</span>
-                </span>
-                <span>{when(b.modifiedAt)}</span>
-                <span style={{ textAlign: 'right' }}>{size(b.bytes)}</span>
-              </div>
-            ))}
+        <details style={{ marginTop: 10, fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>
+          <summary style={{ cursor: 'pointer' }}>The backups ({count(backups.length)})</summary>
+          <div style={{ marginTop: 6 }}>
+            {backups.map((b) => {
+              const asking = confirming === b.name;
+              const note = rowNote?.name === b.name ? rowNote : null;
+              return (
+                <div key={b.name} style={{ padding: '10px 0', borderTop: LINE }}>
+                  <div style={{ display: 'flex', gap: 10, justifyContent: 'space-between', flexWrap: 'wrap' }}>
+                    <span style={{ color: 'var(--sd-fg-1, #e8e8ee)', fontWeight: 600 }}>
+                      {backupLabel(b)} <span style={{ fontWeight: 400, color: 'var(--sd-fg-3, #8b9a9a)' }}>· {when(b.at)}</span>
+                    </span>
+                    <span>{size(b.bytes)}</span>
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--sd-fg-4, #667)', marginTop: 2 }}>
+                    {/* Only the file name may break anywhere: it has no spaces, and a phone is narrower than it. */}
+                    <span style={{ wordBreak: 'break-all' }}>{b.name}{b.folder ? '/' : ''}</span> · {backupHolds(b)}
+                  </div>
+                  {asking ? (
+                    <Status>
+                      {replaces
+                        ? `Replace the ${people(info.people)} here with the network in this backup?`
+                        : 'Restore the network in this backup?'}
+                      {' '}It’s checked first, and finishes when Six Degrees restarts. What’s here now is kept in backups
+                      first, so this can be undone. Your LinkedIn search budget and any pause on scanning are kept.
+                      {b.format === 'database' && !b.withFiles && ' This backup holds the network only, so the photos and the scanner’s notes here now stay with it.'}
+                      <div style={row}>
+                        <Btn primary onClick={() => restoreBackup(b.name)} disabled={!!busy}>
+                          {busy === `restore:${b.name}` ? 'Checking the backup…' : 'Restore it'}
+                        </Btn>
+                        <Btn onClick={() => { setConfirming(null); setRowNote(null); }} disabled={busy === `restore:${b.name}`}>Cancel</Btn>
+                      </div>
+                    </Status>
+                  ) : (
+                    <div style={{ ...row, marginTop: 8 }}>
+                      {b.restorable && (
+                        <Btn onClick={() => { setConfirming(b.name); setRowNote(null); }} disabled={!!busy || restarting || Boolean(pending)}>
+                          Restore
+                        </Btn>
+                      )}
+                      <Btn onClick={() => revealBackup(b.name)} disabled={busy === `reveal:${b.name}`}>
+                        {busy === `reveal:${b.name}` ? 'Opening…' : finder}
+                      </Btn>
+                    </div>
+                  )}
+                  {note && <Status tone={note.tone}>{note.text}</Status>}
+                </div>
+              );
+            })}
           </div>
         </details>
       )}
-      <Body style={small}>
-        Backups are copies of your network from before a new version or an import. The newest five from new
-        versions are kept; copies from before an import stay until you delete them.
-      </Body>
       <Body style={small}>
         The folder can’t be moved from here. A database that a sync service (iCloud Drive, Dropbox) copies while
         it’s open can be damaged, and this folder also holds your LinkedIn sign-in, which should never be synced.
-        To use your network on another computer, save a copy below and import it there.
+        To use your network on another computer, export a backup file below and restore it there.
       </Body>
 
       <h3 style={subhead}>Move your network to another computer</h3>
       <Body>
-        Save a copy here, then on the new computer install Six Degrees, open Settings → Your data and import the
-        copy. Sign in to LinkedIn again there before you scan: your sign-in never goes into a copy.
+        Export a backup file here, then on the new computer install Six Degrees, open Settings → Your data and
+        restore from it. Sign in to LinkedIn again there before you scan: your sign-in never goes into a backup.
       </Body>
       <label style={check}>
         <input type="checkbox" checked={photos} onChange={(e) => setPhotos(e.target.checked)} style={{ marginTop: 3 }} />
@@ -334,73 +533,37 @@ export default function DataSection() {
       </label>
       <div style={row}>
         <Btn primary onClick={exportNow} disabled={!!busy || restarting || info.people === 0}>
-          {busy === 'export' ? 'Saving…' : 'Save a copy of my network'}
+          {busy === 'export' ? 'Saving…' : 'Export backup file…'}
         </Btn>
-        {info.people === 0 && <span style={{ fontSize: 13, color: '#8b9a9a' }}>There’s no network here to save yet.</span>}
+        {info.people === 0 && <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>There’s no network here to save yet.</span>}
       </div>
       {exportNote && <Status tone={exportNote.tone}>{exportNote.text}</Status>}
       <Body style={small}>
-        The copy holds the names, headlines and photos of the people in your network. Keep it private: don’t
-        post it or share it, and delete it once it has been imported. A network opened from a LinkedIn CSV lives
-        only in its browser tab, so it isn’t in the copy; import the CSV again on the new computer. With the
-        Social tab included, the copy also holds your CRM notes and any messages you keep, so it&rsquo;s as private
+        The file holds the names, headlines and photos of the people in your network. Keep it private: don’t
+        post it or share it, and delete it once it has been restored. A LinkedIn CSV import kept on this computer
+        goes into the file too, and opens on the new one. With the
+        Social tab included, the file also holds your CRM notes and any messages you keep, so it&rsquo;s as private
         as your inbox.
       </Body>
 
       <h3 style={subhead}>Bring in a network from another computer</h3>
-      {pending ? (
-        <Status>
-          <div style={{ fontWeight: 650 }}>An import is waiting to finish.</div>
-          <div>
-            The network in the copy{pending.exportedAt ? ` saved ${when(pending.exportedAt, false)}` : ''}
-            {' '}({people(pending.people)}{pending.photos ? `, ${plural(pending.photos, 'photo')}` : ''}
-            {pending.fromVersion ? `, from Six Degrees ${pending.fromVersion}` : ''})
-            {pending.replacedPeople > 0
-              ? ` replaces the ${people(pending.replacedPeople)} here the next time Six Degrees starts. A copy of what’s here now is kept in backups first, so the import can be undone.`
-              : ' becomes the network here the next time Six Degrees starts.'}
-            {' '}Your LinkedIn search budget and any pause on scanning are kept.
-          </div>
-          {pending.error && (
-            <div style={{ color: '#ff7676', marginTop: 6 }}>
-              The last try stopped: {pending.error.replace(/\.$/, '')}. It tries again the next time Six Degrees starts.
-            </div>
-          )}
-          {restarting ? (
-            <div style={{ marginTop: 8 }}>Restarting… this page comes back in a few seconds.</div>
-          ) : (
-            <>
-              <div style={{ marginTop: 8 }}>{info.restart.how}</div>
-              {info.restart.command && <div style={{ marginTop: 6 }}><Mono>{info.restart.command}</Mono></div>}
-              <div style={row}>
-                {info.restart.canRestart && (
-                  <Btn primary onClick={restartNow} disabled={!!busy}>
-                    {busy === 'restart' ? 'Restarting…' : 'Restart now'}
-                  </Btn>
-                )}
-                {!pending.started && (
-                  <Btn onClick={cancelImport} disabled={!!busy}>
-                    {busy === 'cancel' ? 'Cancelling…' : 'Cancel the import'}
-                  </Btn>
-                )}
-              </div>
-            </>
-          )}
-        </Status>
+      {pending && !pending.restoredFrom ? pendingBox : pending ? (
+        <Body>A restore is waiting to finish (under Backups, above). Restart, or cancel it, before restoring anything else.</Body>
       ) : (
         <>
           <Body>
-            Pick the copy you saved on the other computer (a .sixdegrees file). It replaces the network here; the
-            two networks are never merged. Your LinkedIn search budget and any pause on scanning are kept, with the
-            other computer’s searches added.
+            Pick the backup file you exported on the other computer (a .sixdegrees file). It replaces the network
+            here; the two networks are never merged. Your LinkedIn search budget and any pause on scanning are kept,
+            with the other computer’s searches added.
           </Body>
           <input ref={picker} type="file" accept=".sixdegrees" onChange={choose} style={{ display: 'none' }} />
           <div style={row}>
-            <Btn onClick={() => picker.current?.click()} disabled={!!busy}>Choose a file…</Btn>
-            {file && <span style={{ fontSize: 13, color: '#c8d0d0', wordBreak: 'break-all' }}>{file.name} · {size(file.size)}</span>}
+            <Btn onClick={() => picker.current?.click()} disabled={!!busy}>Restore from a file…</Btn>
+            {file && <span style={{ fontSize: 13, color: 'var(--sd-fg-2, #c8d0d0)', wordBreak: 'break-all' }}>{file.name} · {size(file.size)}</span>}
           </div>
           {tooBig && (
             <Status tone="bad">
-              That file is {size(file.size)}. This copy can import files up to {size(info.maxImportBytes)}.
+              That file is {size(file.size)}. This copy can restore files up to {size(info.maxImportBytes)}.
             </Status>
           )}
           {file && replaces && !tooBig && (
@@ -412,11 +575,13 @@ export default function DataSection() {
               </span>
             </label>
           )}
-          <div style={row}>
-            <Btn primary onClick={importNow} disabled={!file || tooBig || (replaces && !confirmed) || !!busy}>
-              {busy === 'import' ? 'Checking the file…' : 'Import'}
-            </Btn>
-          </div>
+          {file && (
+            <div style={row}>
+              <Btn primary onClick={importNow} disabled={tooBig || (replaces && !confirmed) || !!busy}>
+                {busy === 'import' ? 'Checking the file…' : 'Restore'}
+              </Btn>
+            </div>
+          )}
         </>
       )}
       {importNote && <Status tone={importNote.tone}>{importNote.text}</Status>}
@@ -424,21 +589,23 @@ export default function DataSection() {
       {last && !pending && (
         info.importIsRecent ? (
           <Status tone="ok">
-            Imported {when(last.appliedAt)}: {people(last.people)}
-            {last.exportedAt ? ` from the copy saved ${when(last.exportedAt, false)}` : ''}.
+            {last.restoredFrom ? 'Restored' : 'Imported'} {when(last.appliedAt)}: {people(last.people)}
+            {last.restoredFrom
+              ? <> from the backup <Mono>{last.restoredFrom}</Mono></>
+              : last.exportedAt ? ` from the copy saved ${when(last.exportedAt, false)}` : ''}.
             {last.keptDatabase && (
               <>
                 {' '}What was here before is kept in <Mono>{last.keptDatabase}</Mono>
                 {last.keptFiles ? ', with its photos and files beside it' : ''}.
                 {last.keptAsIs && ' It couldn’t be read, so it was kept exactly as it was.'}
-                {' '}To go back to it, see <UndoLink />.
+                {' '}To go back to it, restore it from the backups above.
               </>
             )}
           </Status>
         ) : (
           <Body style={small}>
-            Last import: {when(last.appliedAt)} ({people(last.people)}).
-            {last.keptDatabase && <> What was here before is kept in <Mono>{last.keptDatabase}</Mono> (<UndoLink />).</>}
+            Last {last.restoredFrom ? 'restore' : 'import'}: {when(last.appliedAt)} ({people(last.people)}).
+            {last.keptDatabase && <> What was here before is kept in <Mono>{last.keptDatabase}</Mono>, under Backups above.</>}
           </Body>
         )
       )}

package/.next/standalone/app/components/settings/NetworkHealthSection.js

@@ -29,7 +29,7 @@ export default function NetworkHealthSection() {
     return () => { live = false; };
   }, [userId]);
 
-  const box = { padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)' };
+  const box = { padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)' };
   return (
     <section id="health" style={{ marginTop: 20 }}>
       <h2 style={{ fontSize: 16, margin: '0 0 6px' }}>Network health</h2>
@@ -41,22 +41,22 @@ export default function NetworkHealthSection() {
       {health && health.circles > 0 && (
         <>
           {health.early && (
-            <div style={{ fontSize: 12.5, color: '#FFD700', margin: '4px 0 10px' }}>
+            <div style={{ fontSize: 12.5, color: 'var(--sd-gold, #FFD700)', margin: '4px 0 10px' }}>
               An early estimate: {health.circles} {health.circles === 1 ? 'circle' : 'circles'} scanned. These get sharper as you scan more.
             </div>
           )}
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 10 }}>
             <div style={box}>
               <div style={{ fontSize: 22, fontWeight: 700 }}>{pct(health.twoWays)}</div>
-              <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>of your 2nd degree you reach two or more ways</div>
-              <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>Higher is safer: lose one connection and they&rsquo;re still reachable.</div>
+              <div style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)' }}>of your 2nd degree you reach two or more ways</div>
+              <div style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #778)', marginTop: 4 }}>Higher is safer: lose one connection and they&rsquo;re still reachable.</div>
             </div>
             <div style={box}>
               <div style={{ fontSize: 22, fontWeight: 700 }}>{Math.round(health.effective.size).toLocaleString()}</div>
-              <div style={{ fontSize: 12.5, color: '#b8c4c4' }}>
+              <div style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)' }}>
                 effective reach of your {health.effective.n.toLocaleString()} connections ({pct(health.effective.efficiency)} non-overlapping)
               </div>
-              <div style={{ fontSize: 11.5, color: '#778', marginTop: 4 }}>
+              <div style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #778)', marginTop: 4 }}>
                 From {health.effective.ties.toLocaleString()} {health.effective.ties === 1 ? 'tie' : 'ties'} between your connections seen in circle scans so far,
                 so it can only come down as you scan more.
               </div>
@@ -64,17 +64,17 @@ export default function NetworkHealthSection() {
           </div>
           {health.top.length > 0 && (
             <div style={{ ...box, marginTop: 10, padding: 0 }}>
-              <div style={{ padding: '10px 14px', fontSize: 12.5, color: '#b8c4c4', borderBottom: LINE }}>Your connections who reach the most people no one else does</div>
+              <div style={{ padding: '10px 14px', fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)', borderBottom: LINE }}>Your connections who reach the most people no one else does</div>
               {health.top.map((b, k) => (
-                <div key={b.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: k < health.top.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none', fontSize: 13 }}>
-                  <span style={{ width: 22, color: '#778' }}>#{k + 1}</span>
+                <div key={b.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: k < health.top.length - 1 ? '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)' : 'none', fontSize: 13 }}>
+                  <span style={{ width: 22, color: 'var(--sd-fg-4, #778)' }}>#{k + 1}</span>
                   <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[b.tier] || '#667', flexShrink: 0 }} />
                   <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    <b>{b.name}</b>{b.company ? <span style={{ color: '#8b9a9a' }}> · {b.company}</span> : null}
+                    <b>{b.name}</b>{b.company ? <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}> · {b.company}</span> : null}
                   </span>
-                  <span style={{ color: '#b8c4c4', whiteSpace: 'nowrap' }}>{b.circle.toLocaleString()} in circle</span>
-                  <span style={{ color: '#00ff88', whiteSpace: 'nowrap' }}>{b.only.toLocaleString()} only them ({pct(b.share)})</span>
-                  <Link href={`/?chain=${encodeURIComponent(b.id)}`} style={{ color: '#3498DB', textDecoration: 'none', whiteSpace: 'nowrap' }}>Explore →</Link>
+                  <span style={{ color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>{b.circle.toLocaleString()} in circle</span>
+                  <span style={{ color: 'var(--sd-green, #00ff88)', whiteSpace: 'nowrap' }}>{b.only.toLocaleString()} only them ({pct(b.share)})</span>
+                  <Link href={`/?chain=${encodeURIComponent(b.id)}`} style={{ color: 'var(--sd-blue, #3498DB)', textDecoration: 'none', whiteSpace: 'nowrap' }}>Explore →</Link>
                 </div>
               ))}
             </div>