six-degrees 0.6.0 → 0.8.0

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

@@ -0,0 +1,360 @@
+'use client';
+
+// Settings → LinkedIn usage: how close this LinkedIn account is to the line,
+// in one look, the way Claude's usage page shows a plan's limits (neo's
+// handoff, 2026-10-03; Blake's 1.0 list, item 3). Until now the only view of
+// it was the budget box folded away in the Scan page's "Fine-tune the
+// scanner", and an account was restricted once after 373 searches in 24 hours
+// (TRAPS §16). The notch and that box link here.
+//
+// Every number is counted from the scanner's own record on this computer
+// (GET /api/scraper?usage, lib/linkedin-limits.js linkedinUsage) or is a rule
+// that says where it came from (lib/usage.js). LinkedIn publishes no limits and
+// shows no count of its own, so nothing here claims to be LinkedIn's number.
+// The page only reads; its one button is the Scan page's own "Back to 50 a
+// day, 250 a month".
+
+import { useCallback, useEffect, useState } from 'react';
+import Link from 'next/link';
+import { Section, Body, LINE } from '../ui';
+import {
+  AUTO, PEOPLE_PER_SEARCH, DANGER_AT, REPORTED_MONTH, LEVELS, usageLevel, warningParts, estimate,
+  barMax, pacificText, whenText, untilText, agoText, hoursText, INVITE_CAPS, REPORTED_WEEKLY_INVITES,
+} from '../../../lib/usage';
+import { RESTRICTED_AT, RISKY_DAILY, SAFE_LIMITS } from '../../../lib/search-risk';
+import { paceOf, searchesPerHour } from '../../../lib/scan-pace';
+
+// Looked at again while the page is open, as the Scan page's own checks are.
+const REFRESH_MS = 30 * 1000;
+
+const count = (n) => (Number.isFinite(n) ? n.toLocaleString('en-US') : '?');
+const plural = (n, one, many = `${one}s`) => `${count(n)} ${n === 1 ? one : many}`;
+const link = { color: 'var(--sd-blue, #3498DB)', textDecoration: 'none', fontWeight: 600 };
+const small = { fontSize: 12, color: 'var(--sd-fg-4, #778)', lineHeight: 1.6, marginTop: 4 };
+
+function Pill({ level }) {
+  const l = LEVELS[level] || LEVELS.unknown;
+  return (
+    <span role="status" style={{
+      display: 'inline-flex', alignItems: 'center', gap: 7, padding: '4px 11px', borderRadius: 999,
+      fontSize: 12.5, fontWeight: 700, color: l.color, background: `${l.color}1f`, border: `1px solid ${l.color}55`, whiteSpace: 'nowrap',
+    }}>
+      <span style={{ width: 7, height: 7, borderRadius: '50%', background: l.color }} />
+      {l.label}
+    </span>
+  );
+}
+
+/** Where on the bar a number sits, as a percentage. */
+const at = (n, max) => `${Math.max(0, Math.min(100, (n / max) * 100))}%`;
+
+/**
+ * One meter: a heading with the count, a bar with its marks (and a shaded
+ * range), the marks' numbers under it, then what they mean.
+ */
+function Meter({ title, used, of, max, color, ticks = [], band, children }) {
+  return (
+    <div style={{ marginTop: 18 }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
+        <span style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #e8e8ee)' }}>{title}</span>
+        <span style={{ marginLeft: 'auto', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums' }}>
+          <b style={{ fontSize: 17, color: 'var(--sd-fg-1, #fff)' }}>{count(used)}</b>{of ? ` ${of}` : ''}
+        </span>
+      </div>
+      <div style={{ position: 'relative', height: 10, borderRadius: 5, marginTop: 7, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)' }}>
+        {band && (
+          <div title={band.title} style={{
+            position: 'absolute', top: 0, bottom: 0, left: at(band.from, max), width: `calc(${at(band.to, max)} - ${at(band.from, max)})`,
+            background: 'repeating-linear-gradient(135deg, rgba(255,215,0,0.28) 0 4px, rgba(255,215,0,0.08) 4px 8px)',
+          }} />
+        )}
+        <div style={{
+          position: 'absolute', top: 0, bottom: 0, left: 0, width: Number.isFinite(used) ? at(used, max) : 0,
+          borderRadius: 5, background: color, transition: 'width 0.4s ease',
+        }} />
+        {ticks.map((t) => (
+          <div key={t.at} title={t.title} style={{
+            position: 'absolute', top: -3, bottom: -3, left: at(t.at, max), width: 2, marginLeft: -1, borderRadius: 1,
+            background: t.color || 'rgba(var(--sd-ink, 255, 255, 255), 0.55)',
+          }} />
+        ))}
+      </div>
+      {(ticks.length > 0 || band) && (
+        <div aria-hidden="true" style={{ position: 'relative', height: 16, marginTop: 3, fontSize: 10.5, color: 'var(--sd-fg-4, #778)', fontVariantNumeric: 'tabular-nums' }}>
+          {/* The shaded range's ends, where no mark already says the number */}
+          {(band ? [band.from, band.to] : []).filter((n) => !ticks.some((t) => t.at === n))
+            .map((n) => ({ at: n, label: String(n), color: 'rgba(255,215,0,0.75)' }))
+            .concat(ticks).map((t) => {
+            const p = (t.at / max) * 100;
+            return (
+              <span key={t.at} style={{
+                position: 'absolute', left: `${Math.min(100, p)}%`, whiteSpace: 'nowrap', color: t.color || undefined,
+                transform: p > 94 ? 'translateX(-100%)' : p < 4 ? 'none' : 'translateX(-50%)',
+              }}>{t.label}</span>
+            );
+          })}
+        </div>
+      )}
+      <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 2 }}>{children}</div>
+    </div>
+  );
+}
+
+/**
+ * Auto's connection requests (lib/auto-connect.js): the last 24 hours and the
+ * last 7 days, each against its cap, one bar under the other. Its own caps,
+ * not the search budget: a request is the one thing Six Degrees sends.
+ */
+function InviteMeter({ day, week, freesAt, weekFreesAt, now }) {
+  const known = Number.isFinite(day) && Number.isFinite(week);
+  const bars = [
+    { label: 'Last 24 hours', used: day, cap: INVITE_CAPS.day },
+    { label: 'Last 7 days', used: week, cap: INVITE_CAPS.week },
+  ];
+  const left = known ? Math.max(0, Math.min(INVITE_CAPS.day - day, INVITE_CAPS.week - week)) : null;
+  return (
+    <div style={{ marginTop: 18 }} data-usage="invites">
+      <div style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #e8e8ee)' }}>Connection requests (Auto)</div>
+      {bars.map((b) => (
+        <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
+          <span style={{ flex: '0 0 88px', fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)' }}>{b.label}</span>
+          <div style={{ position: 'relative', flex: 1, height: 10, borderRadius: 5, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)' }}>
+            <div style={{
+              position: 'absolute', top: 0, bottom: 0, left: 0, borderRadius: 5, transition: 'width 0.4s ease',
+              width: Number.isFinite(b.used) ? at(b.used, Math.max(b.cap, b.used)) : 0,
+              background: b.used >= b.cap ? '#ff6b6b' : 'linear-gradient(90deg, #FFD700, #FF6B35)',
+            }} />
+          </div>
+          <span style={{ flex: '0 0 auto', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', fontVariantNumeric: 'tabular-nums', minWidth: 58, textAlign: 'right' }}>
+            <b style={{ fontSize: 15, color: 'var(--sd-fg-1, #fff)' }}>{count(b.used)}</b> of {b.cap}
+          </span>
+        </div>
+      ))}
+      <div style={{ fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 6 }}>
+        {!known ? null
+          : freesAt ? <>Auto&rsquo;s {INVITE_CAPS.day} a day are used. The next one frees {whenAndUntil(freesAt, now)}.</>
+          : weekFreesAt ? <>Auto&rsquo;s {INVITE_CAPS.week} a week are used. The next one frees {whenAndUntil(weekFreesAt, now)}.</>
+          : <>{plural(left, 'request')} left for Auto now.</>}
+        <div style={small}>
+          Each press of Auto sends one request from the scanner&rsquo;s Chrome, without a note, and opens their
+          profile once (a profile view). It stops at {INVITE_CAPS.day} in any 24 hours and {INVITE_CAPS.week} in any 7 days.
+          LinkedIn doesn&rsquo;t publish its invitation limit; people commonly report about {REPORTED_WEEKLY_INVITES} a week.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, children }) {
+  return (
+    <div style={{ display: 'flex', gap: '4px 16px', flexWrap: 'wrap', padding: '10px 0', borderTop: LINE, fontSize: 13 }}>
+      <span style={{ flex: '0 0 150px', color: 'var(--sd-fg-1, #e8e8ee)', fontWeight: 600 }}>{label}</span>
+      <span style={{ flex: '1 1 280px', color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6 }}>{children}</span>
+    </div>
+  );
+}
+
+/** "in 2 h 5 min (Sat, Oct 3, 5:20 PM)" */
+const whenAndUntil = (ms, now) => `${untilText(ms, now)} (${whenText(ms)})`;
+
+export default function UsageSection() {
+  const [u, setU] = useState(null);
+  const [error, setError] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(() => fetch('/api/scraper?usage=1', { cache: 'no-store' })
+    .then((r) => r.json().then((d) => (r.ok && !d.error ? d : Promise.reject(new Error(d.error || 'The usage could not be read.')))))
+    .then((d) => { setU(d); setError(null); })
+    .catch((e) => setError(e.message)), []);
+
+  useEffect(() => {
+    load();
+    const timer = setInterval(load, REFRESH_MS);
+    return () => clearInterval(timer);
+  }, [load]);
+
+  const backToSafe = async () => {
+    setSaving(true);
+    try {
+      const r = await fetch('/api/scraper', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'set-limits', ...SAFE_LIMITS }),
+      });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).error || 'The budget could not be saved.');
+      await load();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!u) {
+    return (
+      <Section id="usage" title="LinkedIn usage">
+        <Body>{error ? `${error}` : 'Counting…'}</Body>
+      </Section>
+    );
+  }
+
+  // The server's clock, the one the windows were counted on.
+  const now = u.now;
+  const { limits = {} } = u;
+  const day = u.searchesToday;
+  const level = usageLevel({ cooldown: u.cooldown, searchesDay: day, lastPushback: u.lastPushback, searchesSincePushback: u.searchesSincePushback, now });
+  // The level's warning, then the budget's own when it invites trouble whatever has been
+  // used; the 373 said once between them (lib/usage.js warningParts).
+  const warnings = warningParts(level, { searchesDay: day, cooldown: u.cooldown, lastPushback: u.lastPushback, now }, limits);
+  const aboveSafe = limits.daily > SAFE_LIMITS.daily || limits.monthly === 0 || limits.monthly > SAFE_LIMITS.monthly;
+  const left = estimate({ leftDay: u.leftToday, leftMonth: u.leftMonth, paused: Boolean(u.cooldown) });
+  const pace = paceOf(limits.pace);
+  const push = u.lastPushback;
+
+  // The 24-hour bar's colour is its count's own level, so a pause elsewhere doesn't redden it.
+  const dayLevel = usageLevel({ searchesDay: day });
+  const dayTicks = [
+    { at: SAFE_LIMITS.daily, label: String(SAFE_LIMITS.daily), title: 'The default budget' },
+    { at: RISKY_DAILY, label: String(RISKY_DAILY), title: 'Above this is risky', color: '#FF8C42' },
+    { at: RESTRICTED_AT, label: String(RESTRICTED_AT), title: 'A real account was restricted here', color: '#ff6b6b' },
+  ];
+  if (limits.daily && !dayTicks.some((t) => t.at === limits.daily)) {
+    dayTicks.push({ at: limits.daily, label: `${limits.daily} yours`, title: 'Your daily budget', color: 'var(--sd-blue, #3498DB)' });
+  }
+  const dayMax = barMax(day, dayTicks.map((t) => t.at));
+
+  const month = u.searchesMonth;
+  const monthTicks = limits.monthly ? [{ at: limits.monthly, label: `${limits.monthly} yours`, title: 'Your monthly budget', color: 'var(--sd-blue, #3498DB)' }] : [];
+  const monthMax = barMax(month, [REPORTED_MONTH[1], limits.monthly || 0]);
+  const monthColor = limits.monthly && month >= limits.monthly ? '#ff6b6b' : month >= REPORTED_MONTH[0] ? '#FFD700' : '#3498DB';
+
+  const week = u.searchesWeek;
+  const weekMax = barMax(week, [AUTO.week]);
+
+  const views = u.profilesToday;
+  const viewsMax = Math.max(limits.profiles || 1, Number(views) || 0);
+
+  return (
+    <Section id="usage" title="LinkedIn usage">
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+        <Pill level={level} />
+        <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', flex: '1 1 260px', lineHeight: 1.5 }}>
+          What Six Degrees has asked of your LinkedIn account from this computer, and how close that is to the line.
+        </span>
+      </div>
+
+      {warnings.length > 0 && (
+        <div style={{
+          marginTop: 14, padding: '11px 14px', borderRadius: 8, fontSize: 13, lineHeight: 1.6,
+          color: 'var(--sd-fg-2, #e3d9c4)', background: `${(LEVELS[level] || LEVELS.unknown).color}14`,
+          border: `1px solid ${(LEVELS[level] || LEVELS.unknown).color}55`,
+        }}>
+          {warnings.map((text, i) => <div key={i} style={{ marginTop: i ? 6 : 0 }}>{text}</div>)}
+          {aboveSafe && (
+            <button onClick={backToSafe} disabled={saving} style={{
+              marginTop: 9, padding: '6px 12px', borderRadius: 7, fontSize: 12.5, fontWeight: 650,
+              cursor: saving ? 'not-allowed' : 'pointer', background: 'rgba(255,215,0,0.08)',
+              color: 'var(--sd-gold, #FFD700)', border: '1px solid rgba(255,215,0,0.4)',
+            }}>{saving ? 'Saving…' : `Back to ${SAFE_LIMITS.daily} a day, ${SAFE_LIMITS.monthly} a month`}</button>
+          )}
+        </div>
+      )}
+      {error && <Body style={{ color: 'var(--sd-red, #ff7676)' }}>{error}</Body>}
+
+      <Meter title="Searches in the last 24 hours" used={day} of={limits.daily ? `of ${limits.daily} a day` : 'no daily cap'}
+        max={dayMax} color={(LEVELS[dayLevel] || LEVELS.unknown).color} ticks={dayTicks}>
+        {u.unreadable ? null : limits.daily
+          ? (u.dayFreesAt
+            ? <>Your {limits.daily} a day are used. The next one frees {whenAndUntil(u.dayFreesAt, now)}.</>
+            : <>{plural(u.leftToday, 'search', 'searches')} left under your budget{u.cooldown ? ', once the pause ends' : ''}.</>)
+          : <>No daily cap is set, so only the monthly one stops a scan.</>}
+        {u.dayClearAt && <> All clear {whenAndUntil(u.dayClearAt, now)}, when the newest of these turns 24 hours old.</>}
+        <div style={small}>
+          {SAFE_LIMITS.daily} is the default budget. Over {RISKY_DAILY} is risky: the budget picker asks first.
+          {' '}{RESTRICTED_AT} is where a real account was restricted, on Sep 28, 2026, with searches run back to back.
+          {' '}{DANGER_AT} (60% of that) or more shows as too close.
+        </div>
+      </Meter>
+
+      <Meter title="Searches this month" used={month} of={limits.monthly ? `of ${limits.monthly} a month` : 'no monthly cap'}
+        max={monthMax} color={monthColor} ticks={monthTicks}
+        band={{ from: REPORTED_MONTH[0], to: REPORTED_MONTH[1], title: 'The range people report for a free account' }}>
+        LinkedIn&rsquo;s month resets {pacificText(u.monthResets)} ({whenText(u.monthResets)} here).
+        {!limits.monthly ? <> No monthly cap is set (Premium).</>
+          : Number.isFinite(u.leftMonth) && <> {plural(u.leftMonth, 'search', 'searches')} left under your budget.</>}
+        <div style={small}>
+          The shaded {REPORTED_MONTH[0]} to {REPORTED_MONTH[1]} is the range people report for a free account&rsquo;s
+          monthly search limit. LinkedIn doesn&rsquo;t publish one, so it&rsquo;s a guide, not a fact.
+          Every page of someone&rsquo;s connections is one search.
+        </div>
+      </Meter>
+
+      <Meter title="Searches in the last 7 days" used={week} of={`against Auto scan's ${AUTO.week}`}
+        max={weekMax} color={week >= AUTO.week ? '#FFD700' : '#3498DB'}
+        ticks={[{ at: AUTO.week, label: String(AUTO.week), title: 'Auto scan stops here' }]}>
+        Auto scan stops at {AUTO.week} in any 7 days. A scan you start yourself stops only at your daily and monthly budget.
+      </Meter>
+
+      <Meter title="Profile views in the last 24 hours" used={views} of={`of ${limits.profiles} a day`}
+        max={viewsMax} color={views >= limits.profiles ? '#ff6b6b' : '#9B59B6'}>
+        {u.profilesFreeAt
+          ? <>Your {limits.profiles} a day are used. The next one frees {whenAndUntil(u.profilesFreeAt, now)}.</>
+          : Number.isFinite(views) && <>{plural(u.profilesLeftToday, 'view', 'views')} left.</>}
+        <div style={small}>
+          Each circle scan opens the person&rsquo;s profile once. Profile views are what got an account restricted on
+          Sep 9, 2026, after about 20 to 25 in an hour; at {pace.label} the scanner opens at most one every {pace.profileGap} seconds.
+        </div>
+      </Meter>
+
+      <InviteMeter day={u.invitesToday} week={u.invitesWeek} freesAt={u.invitesFreeAt} weekFreesAt={u.invitesWeekFreeAt} now={now} />
+
+      <div style={{ marginTop: 22 }}>
+        <Row label="Speed">
+          {pace.label}: about {searchesPerHour(limits.pace)} searches an hour at most while a scan runs.
+          {Number.isFinite(u.searchesLastHour) && <> In the last hour: {plural(u.searchesLastHour, 'search', 'searches')}.</>}
+          {' '}<Link href="/setup" style={link}>Change it on the Scan page</Link>
+        </Row>
+        <Row label="Can still map">
+          {u.unreadable
+            ? <>Can&rsquo;t tell until the record of searches can be read.</>
+            : !left
+            ? <>No cap is set, so there&rsquo;s no count of what&rsquo;s left.</>
+            : u.cooldown
+            ? <>No one until the pause ends.</>
+            : left.searches === 0
+            ? <>No one for now: your {left.by === 'day' ? 'daily' : 'monthly'} budget is used.</>
+            : <>
+              About {count(left.people)} people: {plural(left.searches, 'search', 'searches')} left under your
+              {' '}{left.by === 'day' ? 'daily' : 'monthly'} budget, at about {PEOPLE_PER_SEARCH} people a search.
+              <span style={{ color: 'var(--sd-fg-4, #778)' }}> An estimate: a page of results shows up to 10 people, and the last page of a list is usually short.</span>
+            </>}
+        </Row>
+        <Row label="Last pushback">
+          {!push
+            ? <>None on record on this computer.</>
+            : <>
+              {push.at ? <>{whenText(push.at)} ({agoText(push.at, now)}): </> : null}{push.reason}.
+              {push.active && <> Scanning is paused until {whenText(push.pausedUntil)}.</>}
+              {push.liftedAt && <> You lifted the pause {whenText(push.liftedAt)}; it would have run until {whenText(push.pausedUntil)}.</>}
+              {!push.active && !push.liftedAt && push.pausedUntil && <> The pause ended {whenText(push.pausedUntil)}.</>}
+              {u.searchesSincePushback > 0 && <> {plural(u.searchesSincePushback, 'search', 'searches')} since.</>}
+            </>}
+        </Row>
+        <Row label="Auto scan">
+          However high your budget is set, Auto scan keeps under its own limits: {AUTO.day} searches in any 24 hours,
+          {' '}{AUTO.week} in any 7 days, only from {hoursText(AUTO.hours)} on this computer&rsquo;s clock,
+          {' '}{AUTO.sittingRest === 3600 ? 'an hour’s rest' : `a ${AUTO.sittingRest / 60}-minute rest`} after every {AUTO.sitting} searches,
+          {' '}and {AUTO.pushbackRest / 86400} days off after any check from LinkedIn.
+        </Row>
+      </div>
+
+      <div style={{ ...small, marginTop: 14, paddingTop: 12, borderTop: LINE }}>
+        Where these numbers come from: Six Degrees writes down every search, profile view and Auto request it makes
+        on your LinkedIn account, on this computer, and counts them here. Searches you make yourself on linkedin.com
+        aren&rsquo;t in it, and LinkedIn shows no count of its own. The {RESTRICTED_AT} searches and the 20 to 25
+        profile views are what happened to one real account, not safe limits. Change the budget on the
+        {' '}<Link href="/setup" style={link}>Scan page</Link>, under Fine-tune the scanner. Nothing here is sent anywhere.
+        {' '}Counted {whenText(now)}.
+      </div>
+    </Section>
+  );
+}

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

@@ -4,7 +4,7 @@
 // (UpdatePanel uses them). The Scan page still keeps its own private copies;
 // new screens should use these rather than adding another.
 
-export const LINE = '1px solid rgba(255,255,255,0.1)';
+export const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 // The theme's font (lib/themes.js), Standard's until one is applied.
 export const FONT = 'var(--sd-font)';
 
@@ -21,7 +21,7 @@ export function Section({ id, title, intro, children }) {
 
 export function Body({ children, style }) {
   return (
-    <div style={{ fontSize: 13.5, color: '#8b9a9a', lineHeight: 1.6, marginTop: 4, ...style }}>
+    <div style={{ fontSize: 13.5, color: 'var(--sd-fg-3, #8b9a9a)', lineHeight: 1.6, marginTop: 4, ...style }}>
       {children}
     </div>
   );
@@ -29,7 +29,7 @@ export function Body({ children, style }) {
 
 export function Mono({ children }) {
   return (
-    <code style={{ background: 'rgba(255,255,255,0.08)', padding: '1px 5px', borderRadius: 4, wordBreak: 'break-all' }}>
+    <code style={{ background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', padding: '1px 5px', borderRadius: 4, wordBreak: 'break-all' }}>
       {children}
     </code>
   );
@@ -38,8 +38,8 @@ export function Mono({ children }) {
 /** The answer to an action, where it can't be missed. tone: 'ok' | 'bad' | undefined. */
 export function Status({ children, tone }) {
   const color = tone === 'ok' ? '#00ff88' : tone === 'bad' ? '#ff7676' : '#e8e8ee';
-  const bg = tone === 'ok' ? 'rgba(0,255,136,0.08)' : tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(255,255,255,0.05)';
-  const border = tone === 'ok' ? 'rgba(0,255,136,0.3)' : tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(255,255,255,0.12)';
+  const bg = tone === 'ok' ? 'rgba(0,255,136,0.08)' : tone === 'bad' ? 'rgba(255,80,80,0.08)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.05)';
+  const border = tone === 'ok' ? 'rgba(0,255,136,0.3)' : tone === 'bad' ? 'rgba(255,80,80,0.3)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.12)';
   return (
     <div role="status" style={{
       marginTop: 10, padding: '10px 14px', borderRadius: 8, fontSize: 13.5, lineHeight: 1.6,
@@ -51,12 +51,12 @@ export function Status({ children, tone }) {
 export function Btn({ children, onClick, disabled, primary, tone, type = 'button' }) {
   const bg = tone === 'bad' ? 'rgba(255,80,80,0.15)'
     : primary ? 'linear-gradient(135deg, #9B59B6, #3498DB)'
-    : 'rgba(255,255,255,0.08)';
+    : 'rgba(var(--sd-ink, 255, 255, 255), 0.08)';
   return (
     <button type={type} onClick={onClick} disabled={disabled} style={{
       padding: '9px 18px', borderRadius: 7, fontSize: 13.5, fontWeight: 650,
-      color: disabled ? '#667' : '#fff', border: LINE,
-      background: disabled ? 'rgba(255,255,255,0.05)' : bg,
+      color: disabled ? 'var(--sd-fg-4, #667)' : 'var(--sd-fg-1, #fff)', border: LINE,
+      background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.05)' : bg,
       cursor: disabled ? 'not-allowed' : 'pointer',
     }}>{children}</button>
   );

package/.next/standalone/app/globals.css

@@ -21,7 +21,7 @@
 
 body {
   background: var(--sd-bg);
-  color: #fff;
+  color: var(--sd-fg-1, #fff);
   font-family: var(--sd-font);
 }
 
@@ -103,17 +103,16 @@ html:has([data-field-question]) {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(var(--sd-ink, 255, 255, 255), 0.15);
   border-radius: 3px;
 }
 
-/* Where the scan status bar sits: just under the header (app/components/ScanStatusBar.js). */
-:root { --scan-bar-top: 94px; }
-@media (max-width: 767px) { :root { --scan-bar-top: 66px; } }
 
 /* The notch's running dot (app/components/ScanStatusBar.js). */
 @keyframes notch-pulse { 50% { opacity: 0.35; } }
 @media (prefers-reduced-motion: no-preference) { .notch-pulse { animation: notch-pulse 1.6s ease-in-out infinite; } }
+@keyframes notch-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: no-preference) { .notch-in { animation: notch-in 0.25s ease-out; } }
 
 /* The Social tab's CRM (app/social/Crm.js): the list and the person side by
    side, stacked on a phone. In Pipeline the board takes the whole width and
@@ -125,3 +124,160 @@ html:has([data-field-question]) {
   .crm-grid { grid-template-columns: minmax(0, 1fr); }
   .crm-board { grid-template-columns: minmax(0, 1fr); }
 }
+
+/* ---- How a look draws its buttons (lib/themes.js BUTTONS; html[data-buttons]) ----
+   Buttons carry their own colours inline, so a look adds what they don't set:
+   shadow, frost, glow, outline, and the corner where a look has its own shape.
+   Round buttons (50%) stay round. The tab row's links count as buttons. */
+/* Flat: Obsidian, Paper. No depth, a quiet hover. */
+html[data-buttons="flat"] :is(button, #main-tabs > a) { box-shadow: none !important; text-shadow: none !important; }
+html[data-buttons="flat"] :is(button, #main-tabs > a):not(:disabled):hover { filter: brightness(1.12); }
+html[data-buttons="flat"] :is(button, select, input[type="search"], input[type="text"], #main-tabs > a):not([style*="border-radius: 50%"]) { border-radius: 5px !important; }
+
+/* Square: Analyst. Crisp corners, hairline borders, no depth. */
+html[data-buttons="square"] :is(button, select, input[type="search"], input[type="text"], #main-tabs, #main-tabs > a):not([style*="border-radius: 50%"]) { border-radius: 2px !important; }
+html[data-buttons="square"] :is(button, #main-tabs > a) { box-shadow: none !important; letter-spacing: 0.02em; }
+html[data-buttons="square"] :is(button, #main-tabs > a):not(:disabled):hover { outline: 1px solid color-mix(in srgb, var(--sd-accent) 70%, transparent); outline-offset: -1px; }
+
+/* Frosted: Glass, as Apple's Liquid Glass (WWDC25 "Meet Liquid Glass"; HIG →
+   Materials). Not a frosted blur: glass that bends light at its edges (the
+   lensing comes from app/components/LiquidGlass.js, as --lg-lens), with a
+   specular rim lit from the top left, a bright top edge, and a soft shadow
+   under it. Panels full of words use the "regular" glass: a dark tint under
+   the blur so the words read (lib/themes.js --sd-panel). Controls are capsules
+   of clearer glass; the tab bar is one capsule with plain segments in it,
+   never glass on glass. */
+html[data-buttons="frosted"] [data-glass-panel] {
+  position: relative;
+  isolation: isolate;
+  -webkit-backdrop-filter: var(--sd-panel-blur) var(--lg-lens, ) !important;
+  backdrop-filter: var(--sd-panel-blur) var(--lg-lens, ) !important;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0)) !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.25) !important;
+}
+html[data-buttons="frosted"] [data-glass-panel="bar"] { border-radius: 999px !important; }
+html[data-buttons="frosted"] .glass-rim, html[data-buttons="frosted"] [data-glass-panel]::before,
+html[data-buttons="frosted"] :is(button, #main-tabs > a):not(.radar-go):not(#main-tabs *)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.22));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+/* Controls: capsules of clear glass that spring when pressed. */
+html[data-buttons="frosted"] :is(button):not(.radar-go):not(#main-tabs *) {
+  position: relative;
+  isolation: isolate;
+  -webkit-backdrop-filter: blur(4px) saturate(170%);
+  backdrop-filter: blur(4px) saturate(170%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.24) !important;
+}
+html[data-buttons="frosted"] :is(button, select, input[type="search"], input[type="text"]):not([style*="border-radius: 50%"]):not(.radar-go):not(#main-tabs *) { border-radius: 14px !important; }
+html[data-buttons="frosted"] :is(button):not(:disabled):not(#main-tabs *):hover { filter: brightness(1.14); }
+@media (prefers-reduced-motion: no-preference) {
+  html[data-buttons="frosted"] :is(button):not(#main-tabs *) { transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s; }
+  html[data-buttons="frosted"] :is(button):not(:disabled):not(#main-tabs *):active { transform: scale(1.04); }
+}
+/* The tab bar's segments: the picked one is a lit thumb inside the glass. */
+html[data-buttons="frosted"] #main-tabs > :is(a, button) { border-radius: 999px !important; }
+html[data-buttons="frosted"] #main-tabs > :is(a, button)[aria-current="page"],
+html[data-buttons="frosted"] #main-tabs > button[style*="background: rgb(255, 255, 255)"] {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
+}
+/* Reduce Transparency: solid panels, no lensing. More contrast: a darker tint and a plain rim. */
+@media (prefers-reduced-transparency: reduce) {
+  html[data-buttons="frosted"] [data-glass-panel] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(28, 28, 36, 0.97) !important; }
+}
+@media (prefers-contrast: more) {
+  html[data-buttons="frosted"] [data-glass-panel] { background-color: rgba(10, 10, 14, 0.85) !important; }
+  html[data-buttons="frosted"] [data-glass-panel]::before { background: rgba(255, 255, 255, 0.6); }
+}
+
+/* Neon: Synthwave. A glow in the accent, brighter on hover. */
+html[data-buttons="neon"] :is(button, #main-tabs > a):not(:disabled) {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-accent) 55%, transparent), 0 0 12px color-mix(in srgb, var(--sd-accent) 26%, transparent) !important;
+  text-shadow: 0 0 8px color-mix(in srgb, var(--sd-accent) 45%, transparent);
+}
+html[data-buttons="neon"] :is(button, #main-tabs > a):not(:disabled):hover {
+  box-shadow: 0 0 0 1px var(--sd-accent), 0 0 20px color-mix(in srgb, var(--sd-accent) 50%, transparent) !important;
+}
+
+/* Bold: High contrast. A clear outline on every control, and a thick focus ring. */
+html[data-buttons="bold"] :is(button, select, input[type="search"], input[type="text"], #main-tabs > a) { outline: 1.5px solid rgba(var(--sd-ink, 255, 255, 255), 0.55); outline-offset: -1.5px; font-weight: 700; }
+html[data-buttons="bold"] :is(button, a, select, input):focus-visible { outline: 3px solid var(--sd-accent) !important; outline-offset: 2px; }
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-buttons="soft"]) :is(button, #main-tabs > a) { transition: box-shadow 0.15s, filter 0.15s, outline-color 0.15s; }
+}
+
+/* ---- Analyst: nothing decorative (lib/themes.js) ----
+   An analysis tool's restraint: no gradients, glows or shadows anywhere, the
+   name in plain ink, the picked tab and the main buttons a flat accent, and
+   every number in even columns. Only in this look; the colours inline stay
+   the same in every other. */
+html[data-theme="analyst"] body { font-variant-numeric: tabular-nums; }
+html[data-theme="analyst"] [style*="box-shadow"] { box-shadow: none !important; }
+html[data-theme="analyst"] [style*="text-shadow"] { text-shadow: none !important; }
+html[data-theme="analyst"] header h1, html[data-theme="analyst"] header :is(span, a) > h1, html[data-theme="analyst"] [style*="-webkit-text-fill-color"] {
+  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--sd-fg-1, #111) !important;
+}
+html[data-theme="analyst"] :is(button, a)[style*="gradient"] { background: var(--sd-accent) !important; color: #fff !important; border-color: transparent !important; }
+html[data-theme="analyst"] div[style*="radial-gradient"], html[data-theme="analyst"] div[style*="linear-gradient(1"] { background-image: none !important; }
+html[data-theme="analyst"] [style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
+html[data-theme="analyst"] :is(.galaxy-ring-pulse, .cluster-hub, .seed) { animation: none !important; }
+
+/* ---- A look's dots, on every map (Blake, 2026-10-03: "liquid glass for even
+   path dots etc all things of nature … the same for the others") ----
+   The Galaxy paints its own (app/components/ForceGraph.js); everywhere else a
+   dot is .sd-dot (SVG) or .sd-dot-html, and takes its look's style here, with
+   app/components/ThemeDefs.js's filters: Degrees' bridges, clusters and hover
+   previews, Separation, Paths' bubbles, the Scan cluster, circle previews, the
+   header's scan dots, Check for new's spinner, legends, tier dots, avatars. */
+html[data-dots="droplet"] :is(.sd-dot, .pv-d3, .pv-d4) { filter: url(#sd-droplet); }
+html[data-dots="glow"] :is(.sd-dot, .pv-d3, .pv-d4) { filter: url(#sd-glow); }
+html[data-dots="plain"] .sd-dot:is(:not([stroke]), [stroke="none"]) { stroke: #2b2b2b; stroke-width: 0.8px; stroke-opacity: 0.75; }
+html[data-dots="droplet"] .sd-dot-html {
+  background-image: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 22%, rgba(255, 255, 255, 0) 55%) !important;
+  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35) !important;
+}
+html[data-dots="glow"] .sd-dot-html { filter: saturate(1.25) brightness(1.08) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
+html[data-dots="plain"] .sd-dot-html { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6) !important; }
+
+/* ---- Each look's panels, tab bar, notch and the map's tooltips ----
+   [data-glass-panel] marks the side panels, the tab bar and the notch; the
+   tooltips are the Galaxy's .graph-tooltip. Glass's are above. */
+/* Obsidian: graphite panels with fine borders, no depth, square-ish tooltips */
+html[data-theme="obsidian"] [data-glass-panel] { box-shadow: none !important; border-color: #363636 !important; }
+html[data-theme="obsidian"] [data-glass-panel="side"] { border-right: 1px solid #363636 !important; border-left: 1px solid #363636 !important; }
+html[data-theme="obsidian"] #main-tabs { background: #262626 !important; box-shadow: inset 0 0 0 1px #363636; }
+html[data-theme="obsidian"] .graph-tooltip { background: #262626 !important; border: 1px solid #3f3f3f !important; border-radius: 4px !important; color: #dcddde !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
+/* Synthwave: neon edges in the accent */
+html[data-theme="synthwave"] [data-glass-panel] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sd-accent) 45%, transparent), 0 0 26px color-mix(in srgb, var(--sd-accent) 16%, transparent) !important; }
+html[data-theme="synthwave"] #main-tabs { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sd-accent) 55%, transparent), 0 0 18px color-mix(in srgb, var(--sd-accent) 22%, transparent); }
+html[data-theme="synthwave"] .graph-tooltip { background: rgba(36, 16, 63, 0.94) !important; border: 1px solid var(--sd-accent) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--sd-accent) 35%, transparent); color: #fff5ff !important; }
+/* Space: deep panels with a cool rim of starlight */
+html[data-theme="space"] [data-glass-panel] { box-shadow: inset 0 1px 0 rgba(205, 218, 255, 0.14), inset 0 0 0 1px rgba(150, 170, 255, 0.1), 0 18px 50px rgba(0, 0, 0, 0.5) !important; }
+html[data-theme="space"] .graph-tooltip { background: rgba(8, 10, 28, 0.94) !important; border: 1px solid rgba(150, 170, 255, 0.28) !important; color: #eef2ff !important; }
+/* High contrast: hard outlines everywhere */
+html[data-theme="contrast"] [data-glass-panel] { box-shadow: inset 0 0 0 1.5px #ffffff !important; }
+html[data-theme="contrast"] .graph-tooltip { background: #000 !important; border: 1.5px solid #fff !important; color: #fff !important; }
+/* Daylight: white panels with soft, layered shadows, as light Mac apps draw them */
+html[data-theme="daylight"] [data-glass-panel] { box-shadow: 0 0 0 1px rgba(18, 22, 40, 0.07), 0 1px 2px rgba(18, 22, 40, 0.06), 0 10px 30px rgba(18, 22, 40, 0.08) !important; }
+html[data-theme="daylight"] #main-tabs { background: #ffffff !important; }
+/* Paper: ruled, flat, warm */
+html[data-theme="paper"] [data-glass-panel] { box-shadow: inset 0 0 0 1px #d8cdb8 !important; }
+html[data-theme="paper"] #main-tabs { background: #efe7d6 !important; }
+/* Analyst: grey, flat, hairlines */
+html[data-theme="analyst"] [data-glass-panel] { box-shadow: inset 0 0 0 1px #d0d0d0 !important; }
+html[data-theme="analyst"] #main-tabs { background: #ececec !important; }
+/* Light looks: the map's tooltip is a light card with ink words */
+html[data-mode="light"] .graph-tooltip { background: rgba(255, 255, 255, 0.98) !important; color: #11141c !important; border: 1px solid rgba(18, 22, 40, 0.12) !important; box-shadow: 0 6px 20px rgba(18, 22, 40, 0.14); }
+html[data-theme="paper"] .graph-tooltip { background: #fbf8f1 !important; border-color: #d8cdb8 !important; font-family: var(--sd-font); }
+html[data-theme="analyst"] .graph-tooltip { border-radius: 2px !important; box-shadow: none; }
+/* Glass: the tooltip is a pane of glass too */
+html[data-buttons="frosted"] .graph-tooltip { background: rgba(18, 18, 30, 0.45) !important; -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.35); }