six-degrees 0.3.0 → 0.4.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-// Settings → Your sector. Up to three sectors you work in: one of the twelve
+// Scores → Your sector (app/scores; it was Settings → Your sector). Up to three sectors you work in: one of the twelve
 // broad industries, or a narrower sector from the app's directory (Dental,
 // Real Estate, Software & SaaS…). Companies in them count for more when your
 // scanned network is scored, like setting their scores by hand on Paths →
@@ -10,17 +10,19 @@
 // Before you save, the page asks the app what would change (a dry run that
 // writes nothing). Saving stores the choice with your network and rescores
 // everyone, the way a company score change does. Suggestions come from the
-// people you've scanned (/api/settings/sector-suggestions).
+// people you've scanned (/api/settings/sector-suggestions). The picks
+// themselves are SectorPicker.js, which the Scan page's question about your
+// field, before the first scan, shows too.
 
-import { useEffect, useMemo, useRef, useState } from 'react';
-import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
 import { Section, Body, Status, Btn, LINE } from '../ui';
-import { INDUSTRIES } from '../../../lib/companies';
-import { MAX_SECTORS, sameFocus, focusFingerprint } from '../../../lib/sector-focus';
-import { DIRECTORY, SECTOR_KEYS, sectorByKey } from '../../../lib/sector-directory';
+import SectorPicker from './SectorPicker';
+import { sameFocus, focusFingerprint } from '../../../lib/sector-focus';
+import { DIRECTORY, sectorByKey } from '../../../lib/sector-directory';
 import { SECTOR_BONUS } from '../../../lib/scoring';
 import { TIER_COLORS_CLASSIC } from '../../../lib/tiers';
 import { csvNetworkSource } from '../../../lib/csv';
+import { saveSettings } from '../../../lib/settings-client';
 
 const STRENGTH_LABEL = { lean: 'Lean', strong: 'Strong' };
 // What says the reader has taken over the page (see the jump to #sector).
@@ -28,33 +30,10 @@ const READER_INPUT = ['wheel', 'touchstart', 'keydown', 'pointerdown'];
 const DEGREE = { 1: '1st', 2: '2nd', 3: '3rd' };
 const plural = (n, one, many = `${one}s`) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
 
-// Each industry's narrower sectors, in the directory's order.
-const SECTORS_OF = new Map(INDUSTRIES.map((g) => [g.key, DIRECTORY.filter((s) => s.group === g.key)]));
-const GROUP_OF = new Map(DIRECTORY.map((s) => [s.key, s.group]));
-// What the search box looks through: each sector's name, its words, jobs and
-// companies, as they read (without the list's "(s)" and "$" marks), so
-// "recruiter" finds HR & Recruiting.
-const SEARCHABLE = DIRECTORY.map((s) => ({
-  sector: s,
-  label: s.label.toLowerCase(),
-  words: [...s.words, ...(s.roles || []), ...(s.names || []), ...s.companies].map((w) => ` ${w.replace(/\(s\)$|\$$/, '').toLowerCase()}`),
-}));
-// A sector of work every company has (HR & Recruiting, Legal…) counts firms in
-// that line, not every company that employs someone doing it.
-const FUNCTION_TITLE = 'Counts firms in this line of work, not every company with someone in the job';
+// The sectors that are work every kind of company has (HR & Recruiting, Legal…), for the notes below.
 const FUNCTIONS = DIRECTORY.filter((s) => s.kind === 'function').map((s) => s.label);
 const listed = (labels) => (labels.length > 1 ? `${labels.slice(0, -1).join(', ')} and ${labels.at(-1)}` : labels.join(''));
 
-/** Sectors (and whole industries) whose name has the query, or a word or company that starts with it. */
-function searchSectors(query) {
-  const q = query.trim().toLowerCase().replace(/\s+/g, ' ');
-  if (!q) return null;
-  return {
-    industries: INDUSTRIES.filter((g) => g.label.toLowerCase().includes(q)),
-    sectors: SEARCHABLE.filter((s) => s.label.includes(q) || s.words.some((w) => w.includes(` ${q}`))).map((s) => s.sector),
-  };
-}
-
 /** "120 people move up a tier and 4 move down." (or "moved", after a save) */
 function tierLine(up, down, past) {
   const [goes, go] = past ? ['moved', 'moved'] : ['moves', 'move'];
@@ -64,7 +43,7 @@ function tierLine(up, down, past) {
   return up ? `${plural(up, 'person', 'people')} ${verb(up)} up a tier.` : `${plural(down, 'person', 'people')} ${verb(down)} down a tier.`;
 }
 
-export default function SectorSection() {
+export default function SectorSection({ onSaved } = {}) {
   const [saved, setSaved] = useState(null);
   const [draft, setDraft] = useState(null);
   const [preview, setPreview] = useState(null);
@@ -72,9 +51,6 @@ export default function SectorSection() {
   const [result, setResult] = useState(null);
   const [loadError, setLoadError] = useState(null);
   const [suggest, setSuggest] = useState({ loading: true });
-  const [query, setQuery] = useState('');
-  // Industries shown open; those holding a saved pick start open.
-  const [open, setOpen] = useState(() => new Set());
   // A CSV import or the sample network held in this window. This section only
   // renders in the browser (the page waits in OnboardingGate), so reading
   // sessionStorage here can't disagree with a server render.
@@ -92,7 +68,6 @@ export default function SectorSection() {
         const focus = d.settings?.sectorFocus || { sectors: [], strength: 'lean' };
         setSaved(focus);
         setDraft(focus);
-        setOpen(new Set(focus.sectors.map((k) => GROUP_OF.get(k) || k)));
       })
       .catch((e) => { if (!off) setLoadError(e.message); });
     // Suggestions read every scanned row, so they load on their own and never hold up the rest.
@@ -103,7 +78,7 @@ export default function SectorSection() {
     return () => { off = true; clearTimeout(timer.current); };
   }, []);
 
-  // Links to /settings#sector (the profile's card, Paths → Scores) arrive
+  // Links to /scores#sector (the profile's card, the old /settings#sector) arrive
   // before this section has loaded, so the browser's own jump to it finds
   // nothing. Jump once it's here, then keep it in place while what loads above
   // it (Updates) pushes it down: the browser only holds steady what's already
@@ -128,8 +103,6 @@ export default function SectorSection() {
     return stop;
   }, [draft, loadError]);
 
-  const results = useMemo(() => searchSectors(query), [query]);
-
   // Every change asks for a fresh dry run, a moment after the last click.
   // Only the newest answer is kept.
   function change(next) {
@@ -154,55 +127,20 @@ export default function SectorSection() {
     }, 250);
   }
 
-  function toggle(key) {
-    const on = draft.sectors.includes(key);
-    if (!on && draft.sectors.length >= MAX_SECTORS) return;
-    const sectors = on ? draft.sectors.filter((k) => k !== key) : SECTOR_KEYS.filter((k) => k === key || draft.sectors.includes(k));
-    // A sector picked from the suggestions or a search shows up in its industry too.
-    if (!on && GROUP_OF.has(key)) setOpen((was) => new Set(was).add(GROUP_OF.get(key)));
-    change({ ...draft, sectors });
-  }
-
-  function flip(group) {
-    setOpen((was) => {
-      const next = new Set(was);
-      if (next.has(group)) next.delete(group); else next.add(group);
-      return next;
-    });
-  }
-
   async function save() {
     setSaving(true);
     setResult(null);
     clearTimeout(timer.current);
     ticket.current++;
-    try {
-      const r = await fetch('/api/settings', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings: { sectorFocus: draft } }),
-      });
-      const d = await r.json();
-      if (d.settings) { setSaved(d.settings.sectorFocus); setDraft(d.settings.sectorFocus); setPreview(null); }
-      if (!r.ok) { setResult({ tone: 'bad', text: d.error || 'Could not save.' }); return; }
-      setResult({ tone: 'ok', text: savedLine(d.settings.sectorFocus, d.effects?.sectorFocus) });
-    } catch {
-      setResult({ tone: 'bad', text: 'Could not reach the app. Reload this page to see what is saved.' });
-    } finally {
-      setSaving(false);
-    }
+    const d = await saveSettings({ sectorFocus: draft });
+    setSaving(false);
+    if (d.settings) { setSaved(d.settings.sectorFocus); setDraft(d.settings.sectorFocus); setPreview(null); }
+    if (d.error) { setResult({ tone: 'bad', text: d.error }); return; }
+    setResult({ tone: 'ok', text: savedLine(d.settings.sectorFocus, d.effects?.sectorFocus) });
+    onSaved?.();
   }
 
   const changed = draft && saved && !sameFocus(draft, saved);
-  const full = draft && draft.sectors.length >= MAX_SECTORS;
-  // One chip for any pick: an industry or a sector, wherever it's shown.
-  const chip = (key, label, { note, title } = {}) => {
-    const on = draft.sectors.includes(key);
-    return (
-      <Chip key={key} color={sectorByKey(key).color} on={on} blocked={!on && full} disabled={saving} title={title}
-        onClick={() => toggle(key)}>
-        {label}{note && <span style={{ fontWeight: 400, color: on ? '#dfe7e7' : '#8b9a9a' }}>{note}</span>}
-      </Chip>
-    );
-  };
 
   return (
     <Section id="sector" title="Your sector"
@@ -212,82 +150,8 @@ export default function SectorSection() {
 
       {draft && (
         <>
-          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
-            <span style={{ fontSize: 13, color: '#8b9a9a' }}>Your picks ({draft.sectors.length} of {MAX_SECTORS}):</span>
-            {!draft.sectors.length && <span style={{ fontSize: 13, color: '#667' }}>none yet</span>}
-            {draft.sectors.map((k) => {
-              const s = sectorByKey(k);
-              return (
-                <button key={k} type="button" disabled={saving} onClick={() => toggle(k)} aria-label={`Remove ${s.label}`}
-                  style={{
-                    display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, fontSize: 12.5,
-                    fontWeight: 600, color: '#fff', background: `${s.color}33`, border: `1px solid ${s.color}`, cursor: 'pointer',
-                  }}>
-                  {s.label} <span aria-hidden="true" style={{ color: '#cfd8d8' }}>×</span>
-                </button>
-              );
-            })}
-          </div>
-
-          <Suggestions state={suggest} chip={chip} />
-
-          <label htmlFor="sector-search" style={{ display: 'block', fontSize: 13, color: '#8b9a9a', margin: '16px 0 6px' }}>
-            Find a sector
-          </label>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <input id="sector-search" type="search" value={query} onChange={(e) => setQuery(e.target.value)}
-              placeholder="Try dentist, bakery or Stripe"
-              autoComplete="off" spellCheck={false}
-              style={{
-                flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 7, fontSize: 14, color: '#fff',
-                background: 'rgba(255,255,255,0.05)', border: LINE, outline: 'none',
-              }} />
-            {query && <Btn onClick={() => setQuery('')}>Clear</Btn>}
-          </div>
-
-          {results ? (
-            <div style={{ marginTop: 10 }} aria-live="polite">
-              {results.industries.length + results.sectors.length === 0 ? (
-                <Body style={{ fontSize: 12.5 }}>
-                  Nothing in the list matches &ldquo;{query.trim()}&rdquo;. Try a job title, a kind of business or a company, or clear
-                  the search and pick one of the twelve broad industries.
-                </Body>
-              ) : (
-                <div role="group" aria-label="Sectors that match your search" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                  {results.industries.map((g) => chip(g.key, g.label, { note: ' · the whole industry' }))}
-                  {results.sectors.map((s) => chip(s.key, s.label, { title: s.kind === 'function' ? FUNCTION_TITLE : `In ${sectorByKey(s.group).label}` }))}
-                </div>
-              )}
-            </div>
-          ) : (
-            <div style={{ marginTop: 10 }}>
-              {INDUSTRIES.map((g) => {
-                const sectors = SECTORS_OF.get(g.key);
-                const isOpen = open.has(g.key);
-                const inside = sectors.filter((s) => draft.sectors.includes(s.key)).length;
-                return (
-                  <div key={g.key} style={{ borderTop: LINE, padding: '8px 0' }}>
-                    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
-                      {chip(g.key, g.label, { title: 'The whole industry: companies its sectors place, or whose name or the well-known list says so' })}
-                      <button type="button" aria-expanded={isOpen} aria-controls={`sectors-${g.key}`} onClick={() => flip(g.key)}
-                        style={{
-                          padding: '4px 6px', fontSize: 12.5, color: inside ? '#9fd3ff' : '#8b9a9a', background: 'none', border: 'none',
-                          cursor: 'pointer',
-                        }}>
-                        {isOpen ? '▾' : '▸'} {plural(sectors.length, 'sector')}{inside ? ` · ${inside} picked` : ''}
-                      </button>
-                    </div>
-                    {isOpen && (
-                      <div id={`sectors-${g.key}`} role="group" aria-label={`Sectors in ${g.label}`}
-                        style={{ display: 'flex', flexWrap: 'wrap', gap: 8, margin: '8px 0 2px 14px' }}>
-                        {sectors.map((s) => chip(s.key, s.label, s.kind === 'function' ? { title: FUNCTION_TITLE } : undefined))}
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          )}
+          <SectorPicker sectors={draft.sectors} onChange={(sectors) => change({ ...draft, sectors })} disabled={saving}
+            suggest={suggest} />
 
           <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
             <span style={{ fontSize: 13, color: '#8b9a9a' }}>How much:</span>
@@ -321,7 +185,7 @@ export default function SectorSection() {
 
           <ul style={{ margin: '16px 0 0', paddingLeft: 18, fontSize: 12.5, color: '#778', lineHeight: 1.7 }}>
             <li>Tiers rank how reachable someone is through your network, not the people themselves.</li>
-            <li>A company score you set on <Link href="/paths?tab=scores" style={{ color: '#3498DB' }}>Paths → Scores</Link> always wins. Your sector never changes it.</li>
+            <li>A company score you set on <a href="#companies" style={{ color: '#3498DB' }}>Company scores</a>, below, always wins. Your sector never changes it.</li>
             <li>If you scan highest tier first, people in your sectors come up sooner. Scanning newest first, the default, doesn&rsquo;t go by tier.</li>
             <li>
               An industry includes its sectors. It counts a company in any of its sectors (Healthcare &amp; Biotech counts a
@@ -352,44 +216,6 @@ export default function SectorSection() {
   );
 }
 
-/** A pick you can turn on and off: an industry or a sector, with its industry's colour. */
-function Chip({ color, on, blocked, disabled, title, onClick, children }) {
-  return (
-    <button type="button" aria-pressed={on} disabled={blocked || disabled} onClick={onClick}
-      title={blocked ? `Up to ${MAX_SECTORS} sectors. Turn one off first.` : title}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, maxWidth: '100%',
-        fontSize: 12.5, fontWeight: 600, textAlign: 'left', cursor: blocked ? 'not-allowed' : 'pointer',
-        color: on ? '#fff' : blocked ? '#556' : '#b8c4c4',
-        background: on ? `${color}33` : 'rgba(255,255,255,0.04)',
-        border: on ? `1px solid ${color}` : LINE,
-      }}>
-      <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, opacity: blocked ? 0.4 : 1, flexShrink: 0 }} />
-      <span>{children}</span>
-    </button>
-  );
-}
-
-/** "Suggested from your network": the directory's sectors most of your scanned people work in. */
-function Suggestions({ state, chip }) {
-  const note = { fontSize: 12.5, marginTop: 10 };
-  if (state.loading) return <Body style={note}>Looking through your network for suggestions…</Body>;
-  if (state.error) return <Body style={note}>Couldn&rsquo;t load suggestions ({state.error}). You can still pick below.</Body>;
-  if (!state.scored) return <Body style={note}>Suggestions appear here once you&rsquo;ve scanned your network.</Body>;
-  if (!state.list.length) return <Body style={note}>None of the list&rsquo;s sectors stands out among the people you&rsquo;ve scanned yet.</Body>;
-  return (
-    <div style={{ marginTop: 14 }}>
-      <div style={{ fontSize: 13, color: '#8b9a9a', marginBottom: 6 }}>Suggested from your network</div>
-      <div role="group" aria-label="Suggested from your network" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-        {state.list.map((s) => chip(s.key, s.label, {
-          note: `: ${plural(s.people, 'person', 'people')} at ${plural(s.companies, 'company', 'companies')}`,
-          title: `In ${sectorByKey(s.group).label}`,
-        }))}
-      </div>
-    </div>
-  );
-}
-
 /** "Saved: …. Rescored your network (N people). …" */
 function savedLine(focus, effect) {
   // The labels have commas of their own ("Tech, Software & AI"), so a dot

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

@@ -0,0 +1,99 @@
+'use client';
+
+// Scores → Tiers (app/scores; it was Settings → Tiers). How the S to D rings are drawn: on your network's curve
+// (your top 3% are S, and so on down), or on the fixed scale, the same lines
+// for everyone. The curve only lifts, so a network full of companies the
+// curated list knows keeps its tiers. The model is lib/scoring.js (CURVE,
+// curvedTier); saving rescores everyone, as a new sector focus does, and says
+// how many people changed tier (lib/settings-effects.js).
+
+import { useEffect, useState } from 'react';
+import { Section, Body, Status, LINE } from '../ui';
+import { CURVE, CURVE_FLOOR } from '../../../lib/scoring';
+import { csvNetworkSource } from '../../../lib/csv';
+import { saveSettings } from '../../../lib/settings-client';
+
+const pct = (x) => `${Math.round(x * 100)}%`;
+const [S, A, B] = CURVE.map(([, share]) => share);
+const plural = (n, one, many) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+
+const OPTIONS = [
+  {
+    key: 'curve',
+    label: "On your network's curve",
+    note: `Your top ${pct(S)} are S, the next ${pct(A - S)} A and the next ${pct(B - A)} B, so any network has a top, even one full of companies the app doesn't know. It only lifts: nobody drops a tier because their network is strong, and nobody under ${CURVE_FLOOR} is lifted into S or A.`,
+  },
+  {
+    key: 'fixed',
+    label: 'On the fixed scale',
+    note: 'The same lines for everyone: S from 7.5, A from 5.5, B from 4, C from 2.5. Easy to compare from one network to another, but a network outside well-known companies has almost nobody in S or A.',
+  },
+];
+
+export default function TierSection({ onSaved } = {}) {
+  const [saved, setSaved] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [result, setResult] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  // A CSV import or the sample network held in this window: neither is changed
+  // by this (a CSV is always graded on its own curve; the sample keeps its
+  // tiers). This section only renders in the browser (OnboardingGate), so
+  // reading sessionStorage here can't disagree with a server render.
+  const [onScreen] = useState(() => (typeof window === 'undefined' ? null : csvNetworkSource()));
+
+  useEffect(() => {
+    let off = false;
+    fetch('/api/settings')
+      .then((r) => r.json().then((d) => (r.ok ? d : Promise.reject(new Error(d.error || 'Could not load how tiers are graded.')))))
+      .then((d) => { if (!off) setSaved(d.settings?.tierScale || 'curve'); })
+      .catch((e) => { if (!off) setLoadError(e.message); });
+    return () => { off = true; };
+  }, []);
+
+  async function choose(key) {
+    if (saving || key === saved) return;
+    setSaving(true);
+    setResult(null);
+    const { settings, effects, error } = await saveSettings({ tierScale: key });
+    if (settings) setSaved(settings.tierScale);
+    if (error) setResult({ tone: 'bad', text: error });
+    else {
+      const e = effects?.tierScale;
+      setResult({ tone: 'ok', text: e ? `Saved. ${plural(e.moved, 'person', 'people')} changed tier.` : 'Saved.' });
+      onSaved?.();
+    }
+    setSaving(false);
+  }
+
+  return (
+    <Section id="tiers" title="Tiers" intro="How the S to D rings are drawn. A tier says where someone sits in your network, not what they're worth.">
+      {loadError && <Status tone="bad">{loadError}</Status>}
+      {saved && (
+        <div role="radiogroup" aria-label="How tiers are graded" style={{ display: 'grid', gap: 8 }}>
+          {OPTIONS.map((o) => {
+            const on = saved === o.key;
+            return (
+              <button key={o.key} type="button" role="radio" aria-checked={on} disabled={saving} onClick={() => choose(o.key)} style={{
+                textAlign: 'left', padding: '12px 14px', borderRadius: 8, cursor: saving ? 'wait' : on ? 'default' : 'pointer', color: '#fff',
+                background: on ? 'rgba(155,89,182,0.14)' : 'rgba(255,255,255,0.03)',
+                border: on ? '1px solid rgba(155,89,182,0.6)' : LINE,
+              }}>
+                <div style={{ fontSize: 14, fontWeight: 650 }}>{on ? '● ' : '○ '}{o.label}{o.key === 'curve' ? ' (recommended)' : ''}</div>
+                <Body style={{ marginTop: 4 }}>{o.note}</Body>
+              </button>
+            );
+          })}
+        </div>
+      )}
+      {onScreen && (
+        <Body style={{ color: '#FFD700', marginTop: 10 }}>
+          {onScreen === 'sample'
+            ? 'The sample network open in this window keeps its own tiers (they’re the same either way).'
+            : 'The CSV import open in this window is always graded on its own curve.'}{' '}
+          This applies to networks you&rsquo;ve scanned.
+        </Body>
+      )}
+      {result && <Status tone={result.tone}>{result.text}</Status>}
+    </Section>
+  );
+}

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

@@ -0,0 +1,12 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import { watchRequests, requestsNow, REQUESTS_UNKNOWN } from '../../lib/requests-client';
+
+/**
+ * Who you've sent a request to, shared by every view (lib/requests-client.js).
+ * Pass the answer to hasRequest(row, state) and requestCount(state).
+ */
+export default function useRequests() {
+  return useSyncExternalStore(watchRequests, requestsNow, () => REQUESTS_UNKNOWN);
+}

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

@@ -0,0 +1,13 @@
+'use client';
+
+import { useSyncExternalStore } from 'react';
+import { watchScanner, scannerNow, SCANNER_UNKNOWN } from '../../lib/scraper-client';
+
+/**
+ * What the scanner is running, shared by every Scan button on the page: one
+ * answer, asked once (lib/scraper-client.js). Any button that starts a scan
+ * greys out while `running`, and says why with busyReason().
+ */
+export default function useScanner() {
+  return useSyncExternalStore(watchScanner, scannerNow, () => SCANNER_UNKNOWN);
+}

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

@@ -13,7 +13,6 @@
 import ForceGraph from './ForceGraph';
 import OrbitGraph from './OrbitGraph';
 import ChainView from './ChainView';
-import BridgeRing from './BridgeRing';
 import GridView from './GridView';
 import ListView from './ListView';
 import RingsView from './RingsView';
@@ -31,18 +30,17 @@ export const VIEWS = {
   orbit:    { component: OrbitGraph, modes: ['network', 'degrees'], label: 'Orbit',         icon: '🪐', desc: 'Tier orbits + circle dots; in Degrees, every mapped circle fanned out', allDegree2: true },
   separation: { component: SeparationView, modes: ['degrees'],    label: 'Separation',    icon: '🏆', desc: 'Every 2nd degree, ranked · every way in' },
   chain:    { component: ChainView,  modes: ['degrees'],            label: 'Bridge Chains', icon: '🔗', desc: 'Degree paths' },
-  revolver: { component: BridgeRing, modes: ['degrees'],            label: 'Revolver',      icon: '🎯', desc: 'Rotary dial · spin to switch' },
   rings:    { component: RingsView,  modes: ['network', 'degrees'], label: 'Pyramid',       icon: '🔺', desc: 'Tier hierarchy' },
   list:     { component: ListView,   modes: ['network', 'degrees'], label: 'List',          icon: '☰', desc: 'Ranked power list' },
   grid:     { component: GridView,   modes: ['network', 'degrees'], label: 'Grid',          icon: '▦', desc: 'Cards' },
 };
 
 /**
- * The order they appear in the menu. Separation is the first Degrees view, so
- * it is also where resolveView lands when the chosen view isn't a Degrees one
+ * The order they appear in the menu. Orbit is the first Degrees view, so it is
+ * also where resolveView lands when the chosen view isn't a Degrees one
  * (Galaxy, say, carried over from Network Circle).
  */
-const ORDER = ['galaxy', 'orbit', 'separation', 'chain', 'revolver', 'rings', 'list'];
+const ORDER = ['galaxy', 'orbit', 'separation', 'chain', 'rings', 'list'];
 
 export function viewsForMode(mode) {
   return ORDER

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

@@ -19,6 +19,13 @@ body:has(> div > [data-map]) {
   overflow: hidden;
 }
 
+/* The Scan page's field question holds Continue and Skip for now at the foot
+   of the window (app/components/FieldStep.js). Without this, a pick reached
+   with Tab can stop behind them. */
+html:has([data-field-question]) {
+  scroll-padding-bottom: 80px;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
 }

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

@@ -125,7 +125,7 @@ function HeroSection() {
           transition: 'all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s',
           letterSpacing: '-0.03em',
         }}>
-          6 Degrees of<br />Separation
+          Six Degrees of<br />Separation
         </h1>
 
         {/* Subtitle */}
@@ -315,7 +315,7 @@ function GalaxySection() {
 }
 
 // ═══════════════════════════════════════════════════════════════
-// BRIDGE CHAINS — 6 degrees visualization
+// BRIDGE CHAINS — six degrees visualization
 // ═══════════════════════════════════════════════════════════════
 function ChainSection() {
   const [ref, inView] = useInView();
@@ -474,6 +474,9 @@ function ScoringSection() {
             </div>
           ))}
         </div>
+        <p style={{ textAlign: 'center', fontSize: 12, color: '#555', marginTop: 24 }}>
+          These are the fixed scale&rsquo;s lines. By default tiers are graded on your own network&rsquo;s curve: your top 3% are S, the next 12% A.
+        </p>
       </div>
     </section>
   );
@@ -615,7 +618,7 @@ function TechSection() {
               // The model in lib/scoring.js: a product, so a title counts for more at a bigger company.
               { sym: 'T', label: 'Title', desc: 'C-suite 10, VP 9, Director 7.5, Manager 6.5', note: 'Multiplied by the company', color: TIER.S },
               { sym: 'C', label: 'Company', desc: 'Well-known 7–10, else estimated from your network', note: 'Weight 0.5 to 1.0', color: TIER.A },
-              { sym: 'R + B', label: 'Reach & bridge', desc: 'Investor, YC, an audience in the millions; a strong circle', note: 'Up to +1.5 and +1', color: TIER.B },
+              { sym: 'R + B', label: 'Reach & bridge', desc: 'Investor, YC, an audience in the millions; a strong circle', note: 'Up to +1.5 and +2', color: TIER.B },
             ].map((item, i) => (
               <div key={i} style={{
                 padding: 16, borderRadius: 12, background: `${item.color}08`,