six-degrees 0.4.11 → 0.5.0

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

@@ -1,13 +1,16 @@
 'use client';
 
-// The Galaxy's physics lab (experimental), in the Filter panel: Obsidian-style
-// sliders for the forces that lay the Galaxy out, and a replay of your network
-// growing by the date you connected. Everything moves the Galaxy in place;
-// lib/galaxy-lab.js holds the settings and the clock.
+// The Galaxy's physics, the main thing in Network Circle's Filters panel
+// (Blake, 2026-10-02: "having the physics tab being the main function"):
+// Obsidian-style sliders for the forces that lay the Galaxy out, and a replay
+// of your network growing by the date you connected. Everything moves the
+// Galaxy in place; lib/galaxy-lab.js holds the settings and the clock. It began
+// as an experimental box with its own on switch; now it is always on, and sits
+// flush in the panel.
 
 import { useState, useSyncExternalStore } from 'react';
 import {
-  LAB_DEFAULTS, CLUSTERS, labNow, setLab, watchLab,
+  LAB_DEFAULTS, CLUSTERS, ORBIT, layoutOf, labNow, setLab, watchLab,
   clockNow, setClock, watchClock, play, pause, stopReplay,
   layoutsNow, watchLayouts, saveLayout, applyLayout, forgetLayout, milestones,
 } from '../../lib/galaxy-lab';
@@ -95,29 +98,16 @@ export default function GalaxyLab() {
     try { await job(); } catch (e) { setNote(e.message || 'That didn’t work.'); } finally { setBusy(null); done(); }
   };
   const canReplay = clock.min != null && clock.max != null && clock.max > clock.min;
-  const preset = FORCES.every((f) => lab[f.key] === LAB_DEFAULTS[f.key]) ? 'rings'
-    : Object.entries(CLUSTERS).every(([k, v]) => lab[k] === v) ? 'clusters' : null;
+  const preset = layoutOf(lab);
 
   return (
-    <div style={{ marginBottom: 18, padding: '10px 10px 8px', borderRadius: 8, border: '1px solid rgba(212,175,55,0.25)', background: 'rgba(212,175,55,0.04)' }}>
-      <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
-        <input
-          type="checkbox" checked={lab.on}
-          onChange={(e) => { if (!e.target.checked) { stopReplay(); setClock({ find: '' }); } setLab({ on: e.target.checked }); }}
-          style={{ accentColor: '#D4AF37' }}
-        />
-        <span style={{ fontSize: 11.5, fontWeight: 700, color: '#e6d7a0' }}>Physics lab</span>
-        <span style={{ fontSize: 9, fontWeight: 700, color: '#D4AF37', border: '1px solid rgba(212,175,55,0.4)', borderRadius: 4, padding: '0 4px' }}>EXPERIMENTAL</span>
-      </label>
-      {!lab.on && (
-        <div style={{ ...small, marginTop: 6 }}>
-          Sliders for the forces that lay the Galaxy out, colours by company or warmth, find, a branch that lights
-          up on hover, and a replay of your network growing that you can save as a video.
-        </div>
-      )}
+    <div style={{ marginBottom: 18, borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
+      <div style={{ fontSize: 13.5, fontWeight: 700, color: '#dde' }}>Physics</div>
+      <div style={{ ...small, marginTop: 3 }}>The forces that lay the Galaxy out. Everything here moves it in place.</div>
+
+          <div style={heading}>Names</div>
+          <Choice value={lab.labels} options={[[true, 'On'], [false, 'Off']]} onPick={(v) => setLab({ labels: v })} />
 
-      {lab.on && (
-        <>
           <div style={heading}>Find</div>
           <input
             type="search" value={clock.find} placeholder="A name, company or role"
@@ -137,13 +127,15 @@ export default function GalaxyLab() {
           <div style={heading}>Layout</div>
           <Choice
             value={preset}
-            options={[['rings', 'Rings'], ['clusters', 'Clusters']]}
-            onPick={(v) => setLab(v === 'rings' ? { ...Object.fromEntries(FORCES.map((f) => [f.key, LAB_DEFAULTS[f.key]])), sizeBy: 'power' } : CLUSTERS)}
+            options={[['rings', 'Rings'], ['orbit', 'Orbit'], ['clusters', 'Clusters']]}
+            onPick={(v) => setLab(v === 'rings' ? { ...Object.fromEntries(FORCES.map((f) => [f.key, LAB_DEFAULTS[f.key]])), sizeBy: 'power' } : v === 'orbit' ? ORBIT : CLUSTERS)}
           />
           <div style={{ ...small, marginBottom: 6 }}>
             {preset === 'clusters'
               ? 'No rings: each connection pulls their circle round them, and a dot grows with everyone behind it.'
-              : 'Drag a dot to see what it pulls with it. Try Rings at 0 and Pull up.'}
+              : preset === 'orbit'
+                ? 'Each tier on its own orbit, S nearest you, with each connection’s circle tucked in behind them. Drag a bridge and its circle follows.'
+                : 'Drag a dot to see what it pulls with it. Try Rings at 0 and Pull up.'}
           </div>
 
           <div style={heading}>Forces</div>
@@ -156,9 +148,14 @@ export default function GalaxyLab() {
           <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Colour by</div>
           <Choice
             value={lab.colourBy}
-            options={[['tier', 'Tier'], ['degree', 'Degree'], ['company', 'Company'], ['warmth', 'Warmth']]}
+            options={[['tier', 'Tier'], ['heat', 'Heat'], ['degree', 'Degree'], ['company', 'Company'], ['warmth', 'Warmth']]}
             onPick={(v) => setLab({ colourBy: v })}
           />
+          {lab.colourBy === 'heat' && (
+            <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>
+              Power as a thermal map: the higher someone&rsquo;s score among the people showing, the hotter, and the hottest glow. Where the glow pools, powerful people cluster.
+            </div>
+          )}
           {lab.colourBy === 'warmth' && clock.social === null && (
             <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>
               Warmth comes from the Social tab: import your LinkedIn export there first. Until then it&rsquo;s by tier.
@@ -271,8 +268,6 @@ export default function GalaxyLab() {
             marginTop: 10, width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
             border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aaa',
           }}>Reset to today&rsquo;s layout</button>
-        </>
-      )}
     </div>
   );
 }

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

@@ -1,8 +1,8 @@
 'use client';
 
-// The Scores tab: the one-time offer to keep the curated list's old scores as
+// Settings → Scores: the one-time offer to keep the curated list's old scores as
 // your own, after the list was made neutral (lib/legacy-offer.js decides who
-// sees it and what "keep" writes). It sits at the top of the Scores tab until
+// sees it and what "keep" writes). It sits at the top of the company scores until
 // it's answered, then never shows again. Not while a CSV import or the sample
 // is on screen: those aren't scored on the server, so the offer isn't theirs.
 

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

@@ -0,0 +1,154 @@
+'use client';
+
+// Paths' two maps (companies and people) read the way Network Circle does
+// (Blake, 2026-10-02: "the paths should have the same filter as network circle
+// even with phyics as well if they want to enable them and change color heat
+// mapping"): colour by sector or by heat, and physics you can switch on, then
+// drag bubbles and move the forces. Off, the layout is computed once and stays
+// still, as it always has.
+
+import { useEffect, useRef, useState } from 'react';
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from 'd3';
+import { heatColour } from '../../lib/galaxy-lab';
+import { Seg, panelHeading } from './PathsAnalyzer';
+
+export const PHYSICS_OFF = Object.freeze({ live: false, spread: 1, pull: 1, links: 1 });
+
+const hint = { fontSize: 10.5, color: '#667', lineHeight: 1.45, marginTop: 6 };
+const SLIDERS = [
+  { key: 'spread', label: 'Spread', min: 0.2, max: 4, step: 0.05, tip: 'How hard bubbles push each other apart.' },
+  { key: 'pull', label: 'Pull to their group', min: 0, max: 4, step: 0.05, tip: 'How hard each bubble keeps to its sector. At 0 they find their own shape.' },
+  { key: 'links', label: 'Pull along lines', min: 0, max: 6, step: 0.05, tip: 'How hard two bubbles joined by a line pull together.' },
+];
+
+/** The panel's Colour and Physics sections. */
+export function MapLook({ colourBy, onColourBy, physics, onPhysics, heatHint }) {
+  return (
+    <>
+      <div style={panelHeading}>Colour</div>
+      <Seg value={colourBy} onChange={onColourBy} options={[['sector', 'Sector'], ['heat', 'Heat']]} />
+      {colourBy === 'heat' && <div style={hint}>{heatHint}</div>}
+
+      <div style={panelHeading}>Physics</div>
+      <Seg value={physics.live ? 'on' : 'off'} onChange={(v) => onPhysics({ ...physics, live: v === 'on' })} options={[['off', 'Still'], ['on', 'Live']]} />
+      {physics.live ? (
+        <div style={{ marginTop: 8 }}>
+          {SLIDERS.map((s) => (
+            <label key={s.key} title={s.tip} style={{ display: 'block', marginBottom: 6 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#aab' }}>
+                <span>{s.label}</span>
+                <span style={{ color: physics[s.key] === PHYSICS_OFF[s.key] ? '#556' : '#cfe6f7', fontVariantNumeric: 'tabular-nums' }}>{physics[s.key].toFixed(2)}×</span>
+              </div>
+              <input type="range" min={s.min} max={s.max} step={s.step} value={physics[s.key]}
+                onChange={(e) => onPhysics({ ...physics, [s.key]: Number(e.target.value) })}
+                style={{ width: '100%', accentColor: '#3498DB' }} />
+            </label>
+          ))}
+          <div style={hint}>Drag a bubble and the ones joined to it follow. Click still opens it.</div>
+          <button type="button" onClick={() => onPhysics({ ...PHYSICS_OFF, live: true })} style={{
+            marginTop: 6, padding: '4px 10px', borderRadius: 6, fontSize: 10.5, cursor: 'pointer',
+            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aab',
+          }}>Reset the forces</button>
+        </div>
+      ) : (
+        <div style={hint}>Live lets the bubbles move: drag them, and change the forces that lay the map out.</div>
+      )}
+    </>
+  );
+}
+
+/**
+ * The map's layout, moving: a simulation on the layout's own nodes (each with
+ * `ax`, `ay`, where its group sits) and lines (each with `k`, its pull), the
+ * same forces the still layout settled under, redrawn once a frame while it moves.
+ * Returns `drag(event, node)` for a bubble's pointer-down, and `clicked()`,
+ * false right after a drag so letting go doesn't open the bubble.
+ */
+export function useLivePhysics(layout, physics) {
+  const [, setFrame] = useState(0);
+  const sim = useRef(null);
+  const moved = useRef(false);
+  useEffect(() => {
+    if (!physics.live || !layout.nodes.length) return undefined;
+    let raf = 0;
+    const s = forceSimulation(layout.nodes)
+      .force('x', forceX((d) => d.ax).strength(0.12 * physics.pull))
+      .force('y', forceY((d) => d.ay).strength(0.12 * physics.pull))
+      .force('collide', forceCollide((d) => d.r + 3).iterations(2))
+      .force('charge', forceManyBody().strength(-25 * physics.spread))
+      // Each line's own pull from the still layout (`k`), so at 1× nothing moves until you drag.
+      .force('link', forceLink(layout.edges).id((d) => d.id)
+        .strength((e) => (e.k ?? 0.1) * physics.links).distance(60 * Math.sqrt(physics.spread)))
+      .alpha(0.15)
+      .on('tick', () => {
+        if (!raf) raf = requestAnimationFrame(() => { raf = 0; setFrame((f) => f + 1); });
+      });
+    sim.current = s;
+    return () => { s.stop(); cancelAnimationFrame(raf); sim.current = null; };
+  }, [layout, physics.live, physics.spread, physics.pull, physics.links]);
+
+  const drag = (ev, node) => {
+    const s = sim.current;
+    if (!s) return;
+    const svg = ev.currentTarget.ownerSVGElement;
+    const ctm = svg?.getScreenCTM();
+    if (!ctm) return;
+    const inv = ctm.inverse();
+    const at = (e) => {
+      const pt = svg.createSVGPoint();
+      pt.x = e.clientX; pt.y = e.clientY;
+      return pt.matrixTransform(inv);
+    };
+    const start = { x: ev.clientX, y: ev.clientY };
+    moved.current = false;
+    const move = (e) => {
+      if (Math.hypot(e.clientX - start.x, e.clientY - start.y) > 3) moved.current = true;
+      const p = at(e);
+      node.fx = p.x; node.fy = p.y;
+    };
+    const up = () => {
+      node.fx = null; node.fy = null;
+      s.alphaTarget(0);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    const p = at(ev);
+    node.fx = p.x; node.fy = p.y;
+    // Gently: the spacing between bubbles isn't scaled by the heat, the pulls are,
+    // so a calm drag keeps them from piling up while they follow.
+    s.alphaTarget(0.08).restart();
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  const clicked = () => {
+    if (!moved.current) return true;
+    moved.current = false;
+    return false;
+  };
+  return { drag: physics.live ? drag : null, clicked };
+}
+
+/** Radial glows for Heat, one per step of the ramp; `id` keeps two maps' apart. */
+export function HeatDefs({ id }) {
+  return (
+    <defs>
+      {[0, 1, 2, 3, 4, 5].map((k) => (
+        <radialGradient key={k} id={`${id}-${k}`}>
+          <stop offset="0" stopColor={heatColour(k / 5)} stopOpacity={0.16 + 0.07 * k} />
+          <stop offset="1" stopColor={heatColour(k / 5)} stopOpacity={0} />
+        </radialGradient>
+      ))}
+    </defs>
+  );
+}
+
+/** The glow behind the hotter bubbles, screen-blended so it pools where they cluster. */
+export function HeatGlow({ id, nodes, heat }) {
+  return (
+    <g style={{ mixBlendMode: 'screen', pointerEvents: 'none' }}>
+      {nodes.filter((n) => heat(n) >= 0.5).map((n) => (
+        <circle key={n.id} cx={n.x} cy={n.y} r={n.r * 1.9 + 18} fill={`url(#${id}-${Math.round(heat(n) * 5)})`} />
+      ))}
+    </g>
+  );
+}

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

@@ -0,0 +1,118 @@
+'use client';
+
+// A notification, opened in the right panel (Blake, 2026-10-02: "if it is
+// [clicked] then it should take over the right panel and show a more detailed
+// version of the notifications telling you what person added back from who and
+// that they are a value person if the score is s"). Who it's about comes from
+// lib/notifications.js noteSubject; everything shown is on file already.
+
+import Avatar from './Avatar';
+import { noteSubject } from '../../lib/notifications';
+
+const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const VALUE = {
+  S: 'S-tier: one of the most valuable people in your network to know.',
+  A: 'A-tier: a strong person to know.',
+};
+const ago = (when) => {
+  const t = new Date(String(when || '').replace(' ', 'T') + (String(when || '').includes('Z') ? '' : 'Z')).getTime();
+  if (!Number.isFinite(t)) return '';
+  const m = Math.round((Date.now() - t) / 60000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m} min ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h} h ago`;
+  return new Date(t).toLocaleDateString();
+};
+const btn = {
+  padding: '8px 12px', borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: 'pointer', textAlign: 'left',
+  border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.05)', color: '#ddd',
+};
+
+export default function NoteDetail({ note, connections = [], degree2 = [], onBack, onSelect, onOpenCircle, onShowInSeparation }) {
+  const { person, via, people } = noteSubject(note, connections, degree2);
+  const tier = person?.tier;
+  const score = Number.parseFloat(person?.power_score);
+  const prestige = Number(person?.company_prestige_score);
+  const addedBack = ['added_back', 'request_accepted', 'connection_accepted'].includes(note?.type);
+  const hasCircle = person && degree2.some((r) => r.source_connection_id === person.id);
+
+  return (
+    <div>
+      <button type="button" onClick={onBack} style={{ background: 'none', border: 'none', color: '#aaa', cursor: 'pointer', fontSize: 12, padding: 0, marginBottom: 12 }}>
+        ← Back
+      </button>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
+        <span style={{ fontSize: 22 }}>{note?.icon || '📌'}</span>
+        <div style={{ minWidth: 0 }}>
+          <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', lineHeight: 1.35 }}>{note?.title}</div>
+          <div style={{ fontSize: 11, color: '#777', marginTop: 3 }}>{ago(note?.created_at)}</div>
+        </div>
+      </div>
+
+      {person && (
+        <div style={{ marginTop: 16, padding: 14, borderRadius: 12, border: `1px solid ${(TIER[tier] || '#555')}55`, background: `${TIER[tier] || '#555'}10` }}>
+          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+            <Avatar person={person} size={44} />
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 15, fontWeight: 800 }}>{person.name}</div>
+              <div style={{ fontSize: 11.5, color: '#aab', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.headline || person.company || ''}</div>
+              <div style={{ fontSize: 11.5, fontWeight: 800, color: TIER[tier] || '#aaa', marginTop: 2 }}>
+                {tier ? `${tier}-tier` : 'Not scored yet'}{Number.isFinite(score) ? ` · ${score.toFixed(1)}` : ''}
+              </div>
+            </div>
+          </div>
+          {addedBack && (
+            <div style={{ marginTop: 12, fontSize: 12.5, color: '#ddd', lineHeight: 1.5 }}>
+              <b>{person.name.split(' ')[0]}</b> added you back
+              {via ? <>. You met through <b style={{ color: TIER[via.tier] || '#fff' }}>{via.name}</b>.</> : '.'}
+            </div>
+          )}
+          {!addedBack && via && (
+            <div style={{ marginTop: 12, fontSize: 12.5, color: '#ddd' }}>
+              {person.degree === 2 ? 'In the circle of ' : 'You met through '}<b>{via.name}</b>.
+            </div>
+          )}
+          {VALUE[tier] && <div style={{ marginTop: 8, fontSize: 12.5, fontWeight: 700, color: TIER[tier] }}>{VALUE[tier]}</div>}
+          {prestige >= 8 && (
+            <div style={{ marginTop: 6, fontSize: 12, color: '#cfd3e6' }}>Works at a top company{person.company ? `, ${person.company}` : ''} (its score: {prestige}).</div>
+          )}
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 14 }}>
+            <button type="button" style={btn} onClick={() => onSelect?.(person)}>Open {person.name.split(' ')[0]}’s card →</button>
+            {(hasCircle || person.degree === 1) && onOpenCircle && (
+              <button type="button" style={btn} onClick={() => onOpenCircle(person.id)}>
+                {hasCircle ? `Open ${person.name.split(' ')[0]}’s circle in Bridge Chains →` : `${person.name.split(' ')[0]}’s circle: not scanned yet`}
+              </button>
+            )}
+            {person.degree === 2 && onShowInSeparation && (
+              <button type="button" style={btn} onClick={() => onShowInSeparation({ query: person.name })}>Show in Separation →</button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {people.length > 1 && (
+        <div style={{ marginTop: 16 }}>
+          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: '#6b7090', textTransform: 'uppercase', marginBottom: 8 }}>Who</div>
+          {people.slice(0, 12).map((p) => (
+            <button key={p.id} type="button" onClick={() => onSelect?.(p)} style={{ ...btn, display: 'flex', gap: 10, alignItems: 'center', width: '100%', marginBottom: 6, fontWeight: 600 }}>
+              <Avatar person={p} size={26} />
+              <span style={{ minWidth: 0, flex: 1 }}>
+                <span style={{ display: 'block', color: '#fff' }}>{p.name}</span>
+                <span style={{ display: 'block', fontSize: 10.5, color: '#8a8fa8', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.company || p.headline || ''}</span>
+              </span>
+              <span style={{ fontSize: 11, fontWeight: 800, color: TIER[p.tier] || '#aaa' }}>{p.tier}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {note?.message && (
+        <div style={{ marginTop: 14, fontSize: 12, color: '#999', lineHeight: 1.55 }}>{note.message}</div>
+      )}
+      {!person && !people.length && (
+        <div style={{ marginTop: 10, fontSize: 11.5, color: '#667' }}>Nothing more on file about this one.</div>
+      )}
+    </div>
+  );
+}