six-degrees 0.4.10 → 0.5.0

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

@@ -14,9 +14,11 @@ import { reachIndex, reachState, circleState, readyToScan, circleScanCost } from
 import { exclusiveReach, bridgeOverlap } from '../../lib/brokerage';
 import { profileInsights } from '../../lib/insights';
 import Avatar from './Avatar';
+import NoteDetail from './NoteDetail';
+import CirclePanel from './CirclePanel';
 import { localPhoto } from '../../lib/photos';
 
-export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending, scanNotes, csvSource = null, onOpenCircle, onShowInSeparation }) {
+export default function Sidebar({ selected, stats, tierColors, connections, degree2 = [], mode, collapsed, filter, pending = [], onToggle, onSelect, onSwitchMode, onFocusNode, onMarkSent, onUndoPending, scanNotes, csvSource = null, onOpenCircle, onShowInSeparation, note = null, onCloseNote, circle = null }) {
   const isDegreesMode = mode === 'degrees';
   // 'sample' or 'csv' while the sample or a CSV import is open in this window,
   // null for your own network. Only your own can be scanned: the scanner looks
@@ -53,6 +55,18 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
   const requests = useRequests();
   const isRequested = useCallback((row) => hasRequest(row, requests), [requests]);
 
+  // A notification someone clicked takes the panel over until they go back (app/components/NoteDetail.js).
+  if (note) {
+    return (
+      <SidebarWrapper collapsed={collapsed} onToggle={onToggle}>
+        <NoteDetail note={note} connections={connections} degree2={degree2} onBack={onCloseNote}
+          onSelect={(p) => { onCloseNote?.(); onSelect?.(p); }}
+          onOpenCircle={onOpenCircle ? (id) => { onCloseNote?.(); onOpenCircle(id); } : undefined}
+          onShowInSeparation={onShowInSeparation ? (preset) => { onCloseNote?.(); onShowInSeparation(preset); } : undefined} />
+      </SidebarWrapper>
+    );
+  }
+
   if (selected) {
     const isBridge = selected.degree === 1 && bridgeMap[selected.id];
     const bridgeConnections = bridgeMap[selected.id] || [];
@@ -494,6 +508,16 @@ export default function Sidebar({ selected, stats, tierColors, connections, degr
     );
   }
 
+  // A circle open in Bridge Chains: the panel is about whoever's circle you're in.
+  if (isDegreesMode && circle) {
+    return (
+      <SidebarWrapper collapsed={collapsed} onToggle={onToggle}>
+        <CirclePanel key={circle.id} person={circle} connections={connections} degree2={degree2} scanNotes={scanNotes}
+          tierColors={tierColors} onSelect={onSelect} onToggle={onToggle} canScan={canScan} />
+      </SidebarWrapper>
+    );
+  }
+
   if (isDegreesMode) {
     return (
       <SidebarWrapper collapsed={collapsed} onToggle={onToggle}>
@@ -1202,7 +1226,9 @@ function ScanLog({ title, log, small = false }) {
       padding: '10px', borderRadius: 8, background: 'rgba(155,89,182,0.1)', border: '1px solid rgba(155,89,182,0.3)',
     }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-        <div style={{ width: small ? 6 : 8, height: small ? 6 : 8, borderRadius: '50%', background: '#9B59B6', animation: 'pulse 1s infinite' }} />
+        {/* Its own keyframes: the 'pulse' this named was never defined anywhere, so the dot sat still. */}
+        <style>{'@keyframes scanlogPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } @media (prefers-reduced-motion: reduce) { .scanlog-dot { animation: none !important; } }'}</style>
+        <div className="scanlog-dot" style={{ width: small ? 6 : 8, height: small ? 6 : 8, borderRadius: '50%', background: '#9B59B6', animation: 'scanlogPulse 1s ease-in-out infinite' }} />
         <span style={{ fontSize: 11, fontWeight: 600, color: '#9B59B6' }}>{title}</span>
       </div>
       <div style={{ fontFamily: 'monospace', fontSize: small ? 9 : 10, color: '#888', maxHeight: small ? 80 : 100, overflow: 'auto' }}>

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

@@ -79,6 +79,7 @@ export default function DataSection() {
   const [exportNote, setExportNote] = useState(null);
   const [importNote, setImportNote] = useState(null);
   const [photos, setPhotos] = useState(true);
+  const [social, setSocial] = useState(true);
   const [file, setFile] = useState(null);
   const [confirmed, setConfirmed] = useState(false);
   const [restarting, setRestarting] = useState(false);
@@ -137,7 +138,7 @@ export default function DataSection() {
       const res = await fetch('/api/data/export', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ photos }),
+        body: JSON.stringify({ photos, social }),
       });
       if (!res.ok) await answer(res, 'The copy could not be made.');
       const blob = await res.blob();
@@ -324,6 +325,13 @@ export default function DataSection() {
           They can’t be downloaded again without a new scan.
         </span>
       </label>
+      <label style={check}>
+        <input type="checkbox" checked={social} onChange={(e) => setSocial(e.target.checked)} style={{ marginTop: 3 }} />
+        <span>
+          Include the Social tab: its findings, your CRM notes, stages and follow-ups, and any messages you keep
+          there.
+        </span>
+      </label>
       <div style={row}>
         <Btn primary onClick={exportNow} disabled={!!busy || restarting || info.people === 0}>
           {busy === 'export' ? 'Saving…' : 'Save a copy of my network'}
@@ -334,8 +342,9 @@ export default function DataSection() {
       <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. The Social
-        tab’s findings, and any messages you keep there, stay on this computer and aren’t in the copy either.
+        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
+        as your inbox.
       </Body>
 
       <h3 style={subhead}>Bring in a network from another computer</h3>

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

@@ -1,6 +1,6 @@
 'use client';
 
-// Network health on the Scores tab (lib/network-health.js): how much of your
+// Network health, in Profile → Insights (lib/network-health.js; it was on the Scores tab): how much of your
 // 2nd degree you reach two or more ways, the effective size of your own
 // network from the ties scans have kept, and your top five connections by who
 // only they reach. Only your own numbers, never a percentile against others.

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

@@ -1,6 +1,6 @@
 'use client';
 
-// Scores → Your sector (app/scores; it was Settings → Your sector). Up to three sectors you work in: one of the twelve
+// Settings → Scores → Your field (app/settings; it was a Scores tab of its own from 9/28 to 10/2). 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 →
@@ -78,7 +78,7 @@ export default function SectorSection({ onSaved } = {}) {
     return () => { off = true; clearTimeout(timer.current); };
   }, []);
 
-  // Links to /scores#sector (the profile's card, the old /settings#sector) arrive
+  // Links to /settings#sector (the profile's card, the old /scores#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

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

@@ -1,6 +1,6 @@
 'use client';
 
-// Scores → Tiers (app/scores; it was Settings → Tiers). How the S to D rings are drawn: on your network's curve
+// Settings → Scores → Tiers (app/settings; it was a Scores tab of its own from 9/28 to 10/2). 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,

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

@@ -0,0 +1,149 @@
+'use client';
+
+// Settings → Scores → Titles (Blake, 2026-10-02): how much each kind of title
+// counts, your way. Value founders, investors, or a role you're looking for
+// (outbound, hiring: "find more in that role"), and everyone with it rises.
+// Saving rescores everyone and says how many changed tier, as Tiers does.
+// The setting and its presets are lib/title-ranking.js; scoring applies it
+// (lib/scoring.js rankedPoints).
+
+import { useEffect, useRef, useState } from 'react';
+import { Section, Body, Status, Btn, LINE } from '../ui';
+import { LEVELS } from '../../../lib/scoring';
+import { RANKED_LEVELS, NO_RANKING, RANKING_PRESETS, MAX_ROLES, rankingFingerprint } from '../../../lib/title-ranking';
+import { saveSettings } from '../../../lib/settings-client';
+
+const POINTS = [10, 9.5, 9, 8.5, 8, 7.5, 7, 6.5, 6, 5.5, 5, 4.5, 4, 3, 2, 1, 0];
+const plural = (n, one, many) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
+const select = {
+  padding: '5px 8px', borderRadius: 6, fontSize: 12.5, cursor: 'pointer',
+  border: LINE, background: 'rgba(0,0,0,0.3)', color: '#fff',
+};
+
+export default function TitleSection({ onSaved } = {}) {
+  const [saved, setSaved] = useState(null);
+  const [draft, setDraft] = useState(null);
+  const [role, setRole] = useState('');
+  const [rolePoints, setRolePoints] = useState(10);
+  const [saving, setSaving] = useState(false);
+  const [result, setResult] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  const roleBox = useRef(null);
+
+  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 your title ranking.')))))
+      .then((d) => { if (!off) { const r = d.settings?.titleRanking || NO_RANKING; setSaved(r); setDraft(r); } })
+      .catch((e) => { if (!off) setLoadError(e.message); });
+    return () => { off = true; };
+  }, []);
+
+  if (!draft) return loadError ? <Status tone="bad">{loadError}</Status> : null;
+
+  const pointsOf = (key) => draft.points?.[key] ?? LEVELS[key].points;
+  const setPoints = (key, v) => {
+    const points = { ...draft.points };
+    if (v === LEVELS[key].points) delete points[key]; else points[key] = v;
+    setDraft({ ...draft, points });
+    setResult(null);
+  };
+  const addRole = () => {
+    const text = role.trim().toLowerCase().replace(/\s+/g, ' ');
+    if (text.length < 2) return;
+    const roles = [...draft.roles.filter((r) => r.text !== text), { text, points: rolePoints }];
+    setDraft({ ...draft, roles: roles.slice(-MAX_ROLES) });
+    setRole('');
+    setResult(null);
+  };
+  const dropRole = (text) => { setDraft({ ...draft, roles: draft.roles.filter((r) => r.text !== text) }); setResult(null); };
+  const preset = RANKING_PRESETS.find((p) => p.ranking && rankingFingerprint(p.ranking) === rankingFingerprint(draft))?.key ?? null;
+  const pick = (p) => {
+    setResult(null);
+    if (p.ranking) setDraft({ points: { ...p.ranking.points }, roles: [...p.ranking.roles] });
+    else roleBox.current?.focus();
+  };
+  const dirty = rankingFingerprint(draft) !== rankingFingerprint(saved);
+
+  async function save() {
+    setSaving(true);
+    setResult(null);
+    const { settings, effects, error } = await saveSettings({ titleRanking: draft });
+    if (settings) { setSaved(settings.titleRanking); setDraft(settings.titleRanking); }
+    if (error) setResult({ tone: 'bad', text: error });
+    else {
+      const e = effects?.titleRanking;
+      setResult({ tone: 'ok', text: e ? `Saved. ${plural(e.moved, 'person', 'people')} changed tier.` : 'Saved.' });
+      onSaved?.();
+    }
+    setSaving(false);
+  }
+
+  return (
+    <Section id="titles" title="Titles" intro="How much each kind of title counts towards someone's power, out of 10. Change it if you value some people more than the app does: founders, investors, or a role you're looking for.">
+      {/* Starting points */}
+      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 6 }}>
+        {RANKING_PRESETS.map((p) => (
+          <button key={p.key} type="button" onClick={() => pick(p)} aria-pressed={preset === p.key} title={p.note} style={{
+            padding: '6px 12px', borderRadius: 16, fontSize: 12.5, fontWeight: 650, cursor: 'pointer',
+            border: preset === p.key ? '1px solid rgba(155,89,182,0.7)' : LINE,
+            background: preset === p.key ? 'rgba(155,89,182,0.16)' : 'rgba(255,255,255,0.03)', color: preset === p.key ? '#fff' : '#bbb',
+          }}>{p.label}</button>
+        ))}
+      </div>
+      <Body style={{ marginBottom: 14 }}>
+        {RANKING_PRESETS.find((p) => p.key === preset)?.note || 'Your own ranking. Higher points rank higher; the company someone works at still weighs it.'}
+      </Body>
+
+      {/* The ladder */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: '6px 12px', alignItems: 'center', maxWidth: 520 }}>
+        {RANKED_LEVELS.map((key) => {
+          const mine = draft.points?.[key] != null;
+          return [
+            <div key={`${key}-l`} style={{ fontSize: 13, color: mine ? '#fff' : '#ccc', fontWeight: mine ? 700 : 500 }}>{LEVELS[key].label}</div>,
+            <select key={`${key}-s`} aria-label={`Points for ${LEVELS[key].label}`} value={pointsOf(key)} onChange={(e) => setPoints(key, Number(e.target.value))}
+              style={{ ...select, borderColor: mine ? 'rgba(155,89,182,0.7)' : undefined }}>
+              {POINTS.map((p) => <option key={p} value={p}>{p}</option>)}
+            </select>,
+            <div key={`${key}-d`} style={{ fontSize: 11, color: '#667', minWidth: 70 }}>
+              {mine ? <button type="button" onClick={() => setPoints(key, LEVELS[key].points)} style={{ background: 'none', border: 'none', color: '#9b9bd0', cursor: 'pointer', fontSize: 11, padding: 0 }}>back to {LEVELS[key].points}</button> : 'as it comes'}
+            </div>,
+          ];
+        })}
+      </div>
+
+      {/* Roles you're looking for */}
+      <div style={{ marginTop: 18, fontSize: 13.5, fontWeight: 700, color: '#eee' }}>Roles you&rsquo;re looking for</div>
+      <Body style={{ margin: '4px 0 10px' }}>
+        Anyone whose title has these words counts what you give them, whatever their level: for outbound to one role, or hiring for it. &ldquo;Account executive&rdquo; at 10 puts every account executive you can reach near the top.
+      </Body>
+      <form onSubmit={(e) => { e.preventDefault(); addRole(); }} style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+        <input ref={roleBox} value={role} onChange={(e) => setRole(e.target.value)} placeholder="e.g. head of growth, recruiter, founder"
+          maxLength={60} style={{ flex: '1 1 220px', padding: '7px 10px', borderRadius: 6, fontSize: 13, border: LINE, background: 'rgba(0,0,0,0.3)', color: '#fff' }} />
+        <select aria-label="Points for this role" value={rolePoints} onChange={(e) => setRolePoints(Number(e.target.value))} style={select}>
+          {POINTS.map((p) => <option key={p} value={p}>{p}</option>)}
+        </select>
+        <Btn type="submit" disabled={role.trim().length < 2 || draft.roles.length >= MAX_ROLES}>Add</Btn>
+      </form>
+      {draft.roles.length > 0 && (
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 }}>
+          {draft.roles.map((r) => (
+            <span key={r.text} style={{
+              display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 6px 4px 11px', borderRadius: 14, fontSize: 12.5,
+              border: '1px solid rgba(155,89,182,0.5)', background: 'rgba(155,89,182,0.12)', color: '#eee',
+            }}>
+              {r.text} <b style={{ color: '#d2b4ff' }}>{r.points}</b>
+              <button type="button" onClick={() => dropRole(r.text)} aria-label={`Remove ${r.text}`} style={{ background: 'none', border: 'none', color: '#aaa', cursor: 'pointer', fontSize: 13 }}>✕</button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 16 }}>
+        <Btn primary onClick={save} disabled={!dirty || saving}>{saving ? 'Rescoring…' : 'Save and rescore'}</Btn>
+        {dirty && <span style={{ fontSize: 12, color: '#999' }}>Not saved yet. Saving rescores everyone.</span>}
+      </div>
+      {result && <Status tone={result.tone}>{result.text}</Status>}
+    </Section>
+  );
+}

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

@@ -11,7 +11,6 @@
 // the component and adding a row.
 
 import ForceGraph from './ForceGraph';
-import OrbitGraph from './OrbitGraph';
 import ChainView from './ChainView';
 import GridView from './GridView';
 import ListView from './ListView';
@@ -19,30 +18,32 @@ import RingsView from './RingsView';
 import SeparationView from './SeparationView';
 
 /**
- * `modes` — which top-level mode the view belongs in ('network', 'degrees').
+ * `modes` — which top-level tab the view belongs in ('network', 'degrees', 'separation').
  * `allDegree2` — give it every 2nd-degree row rather than the mode-filtered
- *   set. Only Orbit wants this: it draws each bridge's circle in both modes and
- *   narrows to the bridges on screen itself. Declared here rather than hidden
- *   in a branch, because an exception you cannot see is one you break later.
+ *   set. No view wants it now (Orbit did, before it became a Galaxy layout);
+ *   declared here rather than hidden in a branch, because an exception you
+ *   cannot see is one you break later.
  */
 export const VIEWS = {
   galaxy:   { component: ForceGraph, modes: ['network'],            label: 'Galaxy',        icon: '🌌', desc: 'Force-directed layout' },
-  orbit:    { component: OrbitGraph, modes: ['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' },
-  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' },
+  // Orbit is a layout of the Galaxy now, in its Physics (Blake, 2026-10-02: "add that
+  // as a visual option instead so the person can interact with it"): lib/galaxy-lab.js ORBIT.
+  // Separation is a tab of its own (Blake, 2026-10-02), not a view inside Degrees.
+  separation: { component: SeparationView, modes: ['separation'], label: 'Separation',    icon: '🏆', desc: 'Every 2nd degree, ranked · every way in' },
+  chain:    { component: ChainView,  modes: ['degrees'],            label: 'Bridge Chains', icon: '🔗', desc: 'Your bridges, and the chains that lead on from them' },
+  // Pyramid and List left Network Circle (Blake, 2026-10-02: "the list and pyramid gone"): the
+  // Galaxy and its physics are what that tab is for. They stay in Degrees.
+  rings:    { component: RingsView,  modes: ['degrees'],            label: 'Pyramid',       icon: '🔺', desc: 'Tier hierarchy' },
+  list:     { component: ListView,   modes: ['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. Bridge Chains 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); then Separation, then Orbit.
- * Orbit is a Degrees view only: in Network Circle it was slow and said nothing
- * the Galaxy doesn't (OrbitGraph still has that branch until Orbit is redrawn).
+ * (Galaxy, say, carried over from Network Circle); then Separation.
  */
-const ORDER = ['galaxy', 'chain', 'separation', 'orbit', 'rings', 'list'];
+const ORDER = ['galaxy', 'chain', 'separation', 'rings', 'list'];
 
 export function viewsForMode(mode) {
   return ORDER

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

@@ -46,3 +46,14 @@ html:has([data-field-question]) {
 /* 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; } }
+
+/* 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
+   the person sits under it. */
+.crm-grid { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 10px; align-items: start; }
+.crm-grid > .crm-wide { grid-column: 1 / -1; }
+.crm-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; padding: 10px; overflow-x: auto; }
+@media (max-width: 760px) {
+  .crm-grid { grid-template-columns: minmax(0, 1fr); }
+  .crm-board { grid-template-columns: minmax(0, 1fr); }
+}