six-degrees 0.4.11 → 0.5.0

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

@@ -1,737 +0,0 @@
-'use client';
-
-/**
- * Orbit — the galaxy from the v2 build, ported.
- *
- * Different from the original Galaxy view in three ways that matter:
- *  - Tiers are *orbits*. Higher leverage sits closer to you, so distance from
- *    the centre means something rather than being wherever the force settled.
- *  - Second-degree people render as small dots fanned in an arc just outside
- *    the connection who leads to them, so a bridge with a big circle behind it
- *    reads as a cluster at a glance.
- *  - Drag a 1st-degree node and it stays where you drop it if it is a bridge;
- *    leaves re-settle. Double-click releases it.
- *
- * Imperative D3 over a ref'd <svg>: React renders the shell, d3-selection owns
- * everything inside it, so the simulation mutates positions without React churn.
- */
-
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import useRequests from './useRequests';
-import { hasRequest } from '../../lib/requests-client';
-import {
-  drag,
-  forceCollide,
-  forceLink,
-  forceManyBody,
-  forceRadial,
-  forceSimulation,
-  select,
-  zoom,
-  zoomIdentity,
-  zoomTransform,
-} from 'd3';
-import { TIER_COLORS, TIER_ORDER, TIER_RING_RADIUS, initialsFor } from '../../lib/tiers';
-import { localPhoto } from '../../lib/photos';
-
-const GOLDEN_ANGLE = 2.399963;
-const LABEL_ZOOM_THRESHOLD = 1.1;
-const USER_RADIUS = 26;
-const HUB_FALLBACK = 14;      // hubs to show when no circle has been mapped yet
-const STANDARD_RADIUS = 4.5;  // context nodes: one circle each, nothing more
-
-function safeId(id) {
-  return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
-}
-
-// Every string here came from a scraped web page. TRAPS §11.
-function escapeHtml(s) {
-  return String(s ?? '').replace(/[&<>"']/g, (c) =>
-    c === '&' ? '&amp;' : c === '<' ? '&lt;' : c === '>' ? '&gt;' : c === '"' ? '&quot;' : '&#39;'
-  );
-}
-
-function useIsMobile() {
-  const [mobile, setMobile] = useState(false);
-  useEffect(() => {
-    const check = () => setMobile(window.innerWidth < 768);
-    check();
-    window.addEventListener('resize', check);
-    return () => window.removeEventListener('resize', check);
-  }, []);
-  return mobile;
-}
-
-const OrbitGraph = forwardRef(function OrbitGraph(
-  { connections = [], degree2 = [], onSelect, userName = 'You', userImage = null, selectedId = null, mode = 'network' },
-  ref
-) {
-  const containerRef = useRef(null);
-  const svgRef = useRef(null);
-  const tooltipRef = useRef(null);
-  const onSelectRef = useRef(onSelect);
-  const selectedIdRef = useRef(selectedId);
-  const zoomKRef = useRef(1);
-  const savedTransformRef = useRef(null);
-  const applySelectionRef = useRef(() => {});
-  const applyRequestsRef = useRef(() => {});
-  const focusNodeRef = useRef(() => {});
-  const [size, setSize] = useState({ w: 0, h: 0 });
-  const isMobile = useIsMobile();
-
-  // The parent recomputes these arrays on every render, so depending on their
-  // identity rebuilds the whole scene constantly — and a rebuild that happens
-  // before the simulation's first frame means it never ticks at all. With a
-  // small network that settled in the gaps and looked fine; at 749 nodes and
-  // 598 links every node stayed at 0,0. Depend on what is actually in them.
-  const signature = useMemo(
-    () => `${connections.length}:${degree2.length}:` +
-          `${connections.map((c) => c.id).join(',')}|${degree2.map((c) => c.id).join(',')}`,
-    [connections, degree2]
-  );
-  const dataRef = useRef({ connections, degree2 });
-
-  useImperativeHandle(ref, () => ({ focusNode: (id) => focusNodeRef.current(id) }), []);
-
-  useEffect(() => { onSelectRef.current = onSelect; }, [onSelect]);
-
-  // Declared before the scene effect so it has already run when that rebuilds.
-  useEffect(() => { dataRef.current = { connections, degree2 }; }, [connections, degree2]);
-
-  // Measure synchronously first — first paint must not wait on ResizeObserver.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return undefined;
-    const measure = () => {
-      const rect = el.getBoundingClientRect();
-      setSize((prev) => {
-        const w = Math.round(rect.width);
-        const h = Math.round(rect.height);
-        return prev.w === w && prev.h === h ? prev : { w, h };
-      });
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    window.addEventListener('resize', measure);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener('resize', measure);
-    };
-  }, []);
-
-  // Selection restyles existing nodes; it never rebuilds the simulation.
-  useEffect(() => {
-    selectedIdRef.current = selectedId;
-    applySelectionRef.current(selectedId);
-  }, [selectedId]);
-
-  // So do requests you've sent (lib/requests-client.js): a request sent from
-  // any view rings that person's dots here at once.
-  const requests = useRequests();
-  const requestsRef = useRef(requests);
-  useEffect(() => {
-    requestsRef.current = requests;
-    applyRequestsRef.current(requests);
-  }, [requests]);
-
-  useEffect(() => {
-    const svgEl = svgRef.current;
-    if (!svgEl || size.w < 40 || size.h < 40) return undefined;
-
-    const width = size.w;
-    const height = size.h;
-
-    // ---- nodes & links ---------------------------------------------------
-    const { connections: liveConnections, degree2: liveDegree2 } = dataRef.current;
-    // In Degrees the subject is the circles, so only the people you've mapped
-    // are drawn, each with room for everyone behind them.
-    const degreesMode = mode === 'degrees';
-    const mappedIds = new Set(liveDegree2.map((c) => c.source_connection_id).filter(Boolean));
-    const visibleD1 = degreesMode ? liveConnections.filter((c) => mappedIds.has(c.id)) : liveConnections;
-    const d1ById = new Map(visibleD1.map((c) => [c.id, c]));
-    const visibleD2 = liveDegree2.filter(
-      (c) => c.source_connection_id && d1ById.has(c.source_connection_id)
-    );
-
-    // Only draw rings for tiers actually on screen — the filter lives upstream.
-    const activeTiers = new Set(visibleD1.map((c) => c.tier).filter(Boolean));
-
-    // Three weights, not one.
-    //
-    // Drawing all 754 connections at full weight — glow, avatar, clip path,
-    // label — is both the lag and the mess: nothing stands out because
-    // everything is equally loud. The people whose circle you have opened are
-    // the subject; everyone else is context. A hub is someone with a mapped
-    // circle, falling back to the strongest people when nothing is mapped yet,
-    // so the view is never empty of structure on a fresh network.
-    const bridgeIds = new Set(liveDegree2.map((c) => c.source_connection_id).filter(Boolean));
-    const hubIds = bridgeIds.size
-      ? new Set(visibleD1.filter((c) => bridgeIds.has(c.id)).map((c) => c.id))
-      : new Set(
-          [...visibleD1]
-            .sort((a, b) => (Number(b.power_score) || 0) - (Number(a.power_score) || 0))
-            .slice(0, HUB_FALLBACK)
-            .map((c) => c.id)
-        );
-
-    const userNode = {
-      id: '__user__', kind: 'user', tier: null, r: USER_RADIUS,
-      targetRadius: 0, connection: null, x: 0, y: 0, fx: 0, fy: 0,
-    };
-
-    const tierIndex = { S: 0, A: 0, B: 0, C: 0, D: 0 };
-    const d1Nodes = [];
-    const d1NodeById = new Map();
-    const d1AngleById = new Map();
-    for (const c of visibleD1) {
-      const tier = c.tier || 'D';
-      const angle = (tierIndex[tier] = (tierIndex[tier] || 0) + 1, (tierIndex[tier] - 1) * GOLDEN_ANGLE);
-      const ring = TIER_RING_RADIUS[tier] || TIER_RING_RADIUS.D;
-      const isHub = hubIds.has(c.id);
-      const n = {
-        id: c.id, kind: 'd1', hub: isHub, tier,
-        r: isHub ? 7 + Number(c.power_score || 0) * 1.1 : STANDARD_RADIUS,
-        targetRadius: ring, connection: c,
-        x: Math.cos(angle) * ring, y: Math.sin(angle) * ring,
-      };
-      d1Nodes.push(n);
-      d1NodeById.set(c.id, n);
-      d1AngleById.set(c.id, angle);
-    }
-
-    // Group each bridge's circle so it can be fanned beside them.
-    const clusters = new Map();
-    for (const c of visibleD2) {
-      const key = c.source_connection_id;
-      const list = clusters.get(key);
-      if (list) list.push(c);
-      else clusters.set(key, [c]);
-    }
-
-    const d2Nodes = [];
-    const links = [];
-    let sceneRadius = TIER_RING_RADIUS.B + 70;
-    if (degreesMode) {
-      // Someone you added through a circle, whose own circle is scanned, sits in
-      // the fan of the circle they came from, and their people fan out behind
-      // them a band further out, and theirs behind them, to 6th degree (Blake,
-      // 2026-09-29: Orbit stopped at each connection's 2nd degree).
-      const nestedIn = new Map();
-      const nested = new Set();
-      for (const d of d1Nodes) {
-        const from = d.connection?.unlocked_from_bridge_id;
-        if (from == null || from === d.id || !d1NodeById.has(from)) continue;
-        nested.add(d.id);
-        const list = nestedIn.get(from);
-        if (list) list.push(d); else nestedIn.set(from, [d]);
-      }
-      // Everyone reachable from someone on the ring is drawn in a fan; anyone
-      // else (a loop of introductions) goes on the ring.
-      const onRing = d1Nodes.filter((d) => !nested.has(d.id));
-      const inFans = new Set();
-      const walk = (d) => { for (const p of nestedIn.get(d.id) || []) if (!inFans.has(p.id)) { inFans.add(p.id); walk(p); } };
-      onRing.forEach(walk);
-      for (const d of d1Nodes) if (nested.has(d.id) && !inFans.has(d.id)) onRing.push(d);
-      const behind = new Map();
-      const reachOf = (d, stack = new Set()) => {
-        if (behind.has(d.id)) return behind.get(d.id);
-        if (stack.has(d.id)) return 0;
-        stack.add(d.id);
-        let count = clusters.get(d.id)?.length || 0;
-        for (const p of nestedIn.get(d.id) || []) count += 1 + reachOf(p, stack);
-        stack.delete(d.id);
-        behind.set(d.id, count);
-        return count;
-      };
-
-      // One ring of the people you've mapped, biggest reach first, each given
-      // a wedge; their circle fans outward in arcs, the most powerful closest.
-      const ordered = [...onRing].sort((a, b) => reachOf(b) - reachOf(a));
-      const n = Math.max(1, ordered.length);
-      const R = Math.max(140, n * 9);
-      // Room in proportion to how many are behind each person (square-rooted,
-      // so one huge circle can't take the whole ring): big circles spread into
-      // fans instead of shooting out as thin spikes.
-      const weight = (d) => Math.sqrt(reachOf(d) + 4);
-      const total = ordered.reduce((sum, d) => sum + weight(d), 0) || 1;
-
-      // `owner`'s people in rows across `wedge`, from rStart out; someone they
-      // added gets their own narrower fan behind them. Returns the outer edge.
-      const placeFan = (owner, angle, wedge, rStart, depth) => {
-        const people = [
-          ...(clusters.get(owner.id) || []).map((c) => ({ c })),
-          ...(nestedIn.get(owner.id) || []).filter((p) => inFans.has(p.id)).map((p) => ({ added: p, c: p.connection })),
-        ].sort((p, q) => (Number(q.c?.power_score) || 0) - (Number(p.c?.power_score) || 0));
-        const far = depth > 2;
-        const step = far ? 8 : 9;
-        const subs = [];
-        let placed = 0;
-        let r = rStart;
-        while (placed < people.length) {
-          const fit = Math.max(1, Math.floor((r * wedge) / step));
-          const row = people.slice(placed, placed + fit);
-          row.forEach((p, j) => {
-            const a = angle + (row.length === 1 ? 0 : (j / (row.length - 1) - 0.5) * wedge);
-            const x = Math.cos(a) * r;
-            const y = Math.sin(a) * r;
-            if (p.added) {
-              const d = p.added;
-              d.x = d.fx = x; d.y = d.fy = y;
-              d.hub = false; d.added = true;
-              d.r = 5 + Math.min(5, reachOf(d) / 60);
-              subs.push({ d, a });
-              return;
-            }
-            const node = {
-              id: p.c.id, kind: 'd2', depth, tier: p.c.tier || 'D',
-              r: (far ? 1.3 : 1.8) + Math.min(10, Number(p.c.power_score) || 0) * (far ? 0.24 : 0.32),
-              connection: p.c, x, y,
-            };
-            node.fx = node.x; node.fy = node.y;
-            d2Nodes.push(node);
-            if (owner.added) links.push({ source: owner, target: node, faint: true });
-          });
-          placed += row.length;
-          r += step;
-        }
-        // Their people go behind this fan, centred on it (not on wherever the
-        // person they came through sits), side by side in the order those people
-        // sit, so no fan spills into the next one's space; a line runs back to
-        // each. Wider than the wedge, they close up to fit it.
-        let edge = r;
-        const next = subs.filter(({ d }) => depth < 6 && reachOf(d)).sort((x, y) => x.a - y.a);
-        if (next.length) {
-          const from = r + 24;
-          const gap = 10 / from;
-          const want = next.map(({ d }) => Math.max(0.12, (Math.min(reachOf(d), 60) * 8) / from));
-          const need = want.reduce((sum, w) => sum + w, 0) + gap * (next.length - 1);
-          const scale = need > wedge ? wedge / need : 1;
-          let at = angle - (need * scale) / 2;
-          next.forEach(({ d }, k) => {
-            const w = want[k] * scale;
-            edge = Math.max(edge, placeFan(d, at + w / 2, w, from, depth + 1));
-            at += w + gap * scale;
-          });
-        }
-        return edge;
-      };
-
-      let cursor = -Math.PI / 2;
-      ordered.forEach((b) => {
-        const share = (weight(b) / total) * Math.PI * 2;
-        const angle = cursor + share / 2;
-        cursor += share;
-        const wedge = Math.min(share * 0.88, 1.6);
-        b.x = b.fx = Math.cos(angle) * R;
-        b.y = b.fy = Math.sin(angle) * R;
-        b.hub = true;
-        b.r = 9 + Math.min(10, (clusters.get(b.id)?.length || 0) / 40);
-        sceneRadius = Math.max(sceneRadius, placeFan(b, angle, wedge, R + b.r + 16, 2) + 10);
-      });
-    }
-    for (const [bridgeId, cluster] of degreesMode ? [] : clusters) {
-      const bridgeNode = d1NodeById.get(bridgeId);
-      if (!bridgeNode) continue;
-      const baseAngle = d1AngleById.get(bridgeId) ?? 0;
-      const ring = bridgeNode.targetRadius;
-      const fanStep = Math.min(0.15, 1.5 / Math.max(1, cluster.length));
-      cluster.forEach((c, j) => {
-        const angle = baseAngle + (j - (cluster.length - 1) / 2) * fanStep;
-        const radius = ring + 46 + (j % 3) * 13;
-        const n = {
-          id: c.id, kind: 'd2', tier: c.tier || 'D', r: 3.5,
-          targetRadius: ring + 60, connection: c,
-          x: Math.cos(angle) * radius, y: Math.sin(angle) * radius,
-        };
-        d2Nodes.push(n);
-        links.push({ source: n, target: bridgeNode });
-      });
-    }
-
-    const simNodes = [userNode, ...d1Nodes, ...d2Nodes];
-    // Paint order: faint D2 first, then D1, the user on top.
-    const renderNodes = [...d2Nodes, ...d1Nodes, userNode];
-
-    // ---- static scene ----------------------------------------------------
-    const svg = select(svgEl);
-    svg.selectAll('*').remove();
-
-    const defs = svg.append('defs');
-    const grad = defs.append('radialGradient').attr('id', 'og-user-grad');
-    grad.append('stop').attr('offset', '0%').attr('stop-color', '#f8fafc');
-    grad.append('stop').attr('offset', '55%').attr('stop-color', '#c7d2fe');
-    grad.append('stop').attr('offset', '100%').attr('stop-color', '#818cf8');
-    defs.append('filter').attr('id', 'og-blur')
-      .attr('x', '-75%').attr('y', '-75%').attr('width', '250%').attr('height', '250%')
-      .append('feGaussianBlur').attr('stdDeviation', 6);
-
-    const viewport = svg.append('g').attr('class', 'viewport');
-    const ringsLayer = viewport.append('g');
-    const spokesLayer = viewport.append('g');
-    const linksLayer = viewport.append('g');
-    const nodesLayer = viewport.append('g');
-
-    const hubNodes = d1Nodes.filter((d) => d.hub);
-    const spoke = spokesLayer.selectAll('line').data(hubNodes, (d) => d.id).join('line')
-      .attr('stroke', (d) => TIER_COLORS[d.tier] || TIER_COLORS.D)
-      .attr('stroke-opacity', 0.09)
-      .attr('stroke-width', 0.5);
-
-    if (degreesMode && d1Nodes.length) {
-      const R = Math.hypot(d1Nodes[0].x, d1Nodes[0].y);
-      ringsLayer.append('circle').attr('r', R).attr('fill', 'none')
-        .attr('stroke', '#FF6B35').attr('stroke-opacity', 0.18).attr('stroke-width', 1)
-        .attr('stroke-dasharray', '3 7');
-    }
-    for (const tier of degreesMode ? [] : TIER_ORDER) {
-      if (!activeTiers.has(tier)) continue;
-      ringsLayer.append('circle')
-        .attr('r', TIER_RING_RADIUS[tier])
-        .attr('fill', 'none')
-        .attr('stroke', TIER_COLORS[tier])
-        .attr('stroke-opacity', 0.14)
-        .attr('stroke-width', 1)
-        .attr('stroke-dasharray', '3 7');
-    }
-
-    const link = linksLayer.selectAll('line').data(links).join('line')
-      .attr('stroke', (l) => (l.faint ? 'rgba(0,255,136,0.12)' : 'rgba(255,255,255,0.08)'))
-      .attr('stroke-width', (l) => (l.faint ? 0.5 : 1));
-
-    const node = nodesLayer.selectAll('g').data(renderNodes, (d) => d.id).join('g')
-      .attr('cursor', 'pointer');
-
-    node.each(function build(d) {
-      const g = select(this);
-
-      if (d.kind === 'd2') {
-        g.attr('opacity', degreesMode ? (d.depth > 2 ? 0.6 : 0.85) : 0.55);
-        g.append('circle').attr('class', 'og-base').attr('r', d.r)
-          .attr('fill', TIER_COLORS[d.tier] || TIER_COLORS.D);
-        return;   // selection ring is created on demand, see applySelection
-      }
-
-      const isUser = d.kind === 'user';
-      const conn = d.connection;
-      const color = isUser ? '#818cf8' : (TIER_COLORS[d.tier] || TIER_COLORS.D);
-
-      // Context: one circle, no avatar, no initials, no label. Hovering or
-      // selecting promotes it — the tooltip carries the detail, so nothing is
-      // hidden, it is just not all shouted at once.
-      if (!isUser && !d.hub) {
-        g.attr('opacity', d.added ? 1 : 0.75);
-        // Someone you added through a circle: green-ringed, with their own fan behind them.
-        g.append('circle').attr('class', 'og-base').attr('r', d.r).attr('fill', color)
-          .attr('stroke', d.added ? '#00ff88' : 'none').attr('stroke-width', d.added ? 1.5 : 0);
-        return;   // selection ring is created on demand, see applySelection
-      }
-
-      if (isUser || d.tier === 'S' || d.tier === 'A') {
-        g.append('circle').attr('r', d.r * 1.8).attr('fill', color)
-          .attr('opacity', 0.25).attr('filter', 'url(#og-blur)');
-      }
-
-      if (conn && conn.is_catalyst) {
-        g.append('circle').attr('r', d.r + 3).attr('fill', 'none')
-          .attr('stroke', TIER_COLORS.S).attr('stroke-width', 1).attr('stroke-opacity', 0.9);
-        g.append('text').text('⚡').attr('x', d.r * 0.85).attr('y', -d.r * 0.7)
-          .attr('font-size', 9).attr('text-anchor', 'middle').style('pointer-events', 'none');
-      }
-
-      // Initials always render; an avatar draws on top and removes itself on
-      // error, so a dead image never leaves an empty circle.
-      g.append('circle').attr('class', 'og-base').attr('r', d.r)
-        .attr('fill', isUser ? 'url(#og-user-grad)' : color);
-
-      const name = isUser ? userName : (conn?.name ?? '');
-      g.append('text').attr('class', 'og-initials').text(initialsFor(name))
-        .attr('text-anchor', 'middle').attr('dy', '0.35em')
-        .attr('font-size', d.r * 0.8).attr('font-weight', 700)
-        .attr('fill', '#0b0b16').style('pointer-events', 'none');
-
-      // Only a photo saved on this computer (lib/photos.js).
-      const imageUrl = localPhoto(isUser ? userImage : conn?.profile_image_url);
-      if (imageUrl) {
-        const clipId = `og-clip-${safeId(d.id)}`;
-        defs.append('clipPath').attr('id', clipId).append('circle').attr('r', d.r);
-        g.append('image')
-          .attr('href', imageUrl)
-          .attr('x', -d.r).attr('y', -d.r)
-          .attr('width', d.r * 2).attr('height', d.r * 2)
-          .attr('clip-path', `url(#${clipId})`)
-          .attr('preserveAspectRatio', 'xMidYMid slice')
-          .on('error', function onErr() { select(this).remove(); });
-      }
-
-      g.append('circle').attr('class', 'og-sel').attr('r', d.r + 5)
-        .attr('fill', 'none').attr('stroke', '#ffffff').attr('stroke-width', 1.5)
-        .style('opacity', 0);
-
-      if (isUser) {
-        g.append('text').text(userName).attr('y', d.r + 18)
-          .attr('text-anchor', 'middle').attr('font-size', 12).attr('font-weight', 600)
-          .attr('fill', '#e2e8f0').attr('paint-order', 'stroke')
-          .attr('stroke', 'rgba(5,5,16,0.85)').attr('stroke-width', 3)
-          .style('pointer-events', 'none');
-      } else {
-        g.append('text').attr('class', 'og-label').text(conn?.name ?? '')
-          .attr('y', d.r + 13).attr('text-anchor', 'middle').attr('font-size', 10)
-          .attr('fill', '#cbd5e1').attr('paint-order', 'stroke')
-          .attr('stroke', 'rgba(5,5,16,0.8)').attr('stroke-width', 3)
-          .style('pointer-events', 'none').style('opacity', 0)
-          .style('transition', 'opacity 160ms ease');
-      }
-    });
-
-    // ---- labels ----------------------------------------------------------
-    const labels = node.select('text.og-label');
-    let hoveredId = null;
-    // S-tier and catalysts stay labelled so the map is scannable zoomed out.
-    // Hubs carry their name; context nodes have no label element at all, which
-    // is most of what was removed.
-    const alwaysLabeled = (d) => d.hub === true;
-    const refreshLabels = () => {
-      labels.style('opacity', (d) =>
-        alwaysLabeled(d) ||
-        zoomKRef.current > LABEL_ZOOM_THRESHOLD ||
-        d.id === hoveredId ||
-        d.id === selectedIdRef.current ? 1 : 0
-      );
-    };
-
-    // ---- interaction -----------------------------------------------------
-    node.on('click', (event, d) => {
-      if (event.defaultPrevented) return;
-      event.stopPropagation();
-      onSelectRef.current?.(d.connection);
-    });
-    svg.on('click', () => onSelectRef.current?.(null));
-
-    const tip = tooltipRef.current;
-    const moveTip = (event) => {
-      const el = containerRef.current;
-      if (!tip || !el) return;
-      const rect = el.getBoundingClientRect();
-      tip.style.left = `${Math.min(event.clientX - rect.left + 14, rect.width - 190)}px`;
-      tip.style.top = `${Math.max(event.clientY - rect.top - 8, 8)}px`;
-    };
-    const showTip = (event, d) => {
-      if (!tip || !d.connection) return;
-      const c = d.connection;
-      const meta = [c.role || c.headline, c.company].filter(Boolean).map(String);
-      tip.innerHTML =
-        `<div style="font-weight:600;color:#f1f5f9">${escapeHtml(c.name)}</div>` +
-        (meta.length ? `<div style="color:#94a3b8;margin-top:1px">${escapeHtml(meta.join(' · '))}</div>` : '') +
-        `<div style="margin-top:3px;color:${TIER_COLORS[c.tier] || TIER_COLORS.D}">` +
-        `${escapeHtml(c.tier || '?')} · power ${Number(c.power_score || 0).toFixed(1)}` +
-        `${c.is_catalyst ? ' · ⚡ catalyst' : ''}</div>`;
-      tip.style.opacity = '1';
-      moveTip(event);
-    };
-    const hideTip = () => { if (tip) tip.style.opacity = '0'; };
-
-    if (!isMobile) {
-      node
-        .on('mouseenter', (event, d) => { hoveredId = d.id; refreshLabels(); showTip(event, d); })
-        .on('mousemove', (event) => moveTip(event))
-        .on('mouseleave', () => { hoveredId = null; refreshLabels(); hideTip(); });
-    }
-
-    // ---- positions -------------------------------------------------------
-    const ticked = () => {
-      link
-        .attr('x1', (l) => l.source.x ?? 0).attr('y1', (l) => l.source.y ?? 0)
-        .attr('x2', (l) => l.target.x ?? 0).attr('y2', (l) => l.target.y ?? 0);
-      spoke
-        .attr('x1', 0).attr('y1', 0)
-        .attr('x2', (d) => d.x ?? 0).attr('y2', (d) => d.y ?? 0);
-      node.attr('transform', (d) => `translate(${d.x ?? 0},${d.y ?? 0})`);
-    };
-
-    let sim = null;
-    if (isMobile || degreesMode) {
-      ticked();      // static layouts: golden-angle on phones, wedges in Degrees
-    } else {
-      const simulation = forceSimulation(simNodes)
-        // A 2nd-degree person belongs to their bridge, not to a ring. Giving
-        // them their own radial target fought the link holding them to that
-        // bridge, and the result was dots strewn across everyone else's space.
-        // Zero here lets the link force gather each circle around its own hub.
-        .force('radial', forceRadial((d) => d.targetRadius, 0, 0)
-          .strength((d) => (d.kind === 'd1' ? 0.9 : 0)))
-        .force('collide', forceCollide((d) => d.r + 2.5))
-        .force('charge', forceManyBody().strength(-18))
-        .on('tick', ticked);
-      if (links.length > 0) {
-        simulation.force('link', forceLink(links).distance(26).strength(0.7));
-      }
-      sim = simulation;
-
-      // Place everyone at their computed starting positions right away. The
-      // simulation ticks on requestAnimationFrame, which does not run in a
-      // background or hidden tab — without this the whole graph sits stacked at
-      // the origin until the tab is looked at.
-      ticked();
-
-      const dragBehavior = drag()
-        .on('start', (event, d) => {
-          if (!event.active) simulation.alphaTarget(0.3).restart();
-          d.fx = d.x; d.fy = d.y;
-        })
-        .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
-        .on('end', (event, d) => {
-          if (!event.active) simulation.alphaTarget(0);
-          // Bridges stay where you drop them; leaves re-settle.
-          const isBridge = d.connection?.circle_power !== null && d.connection?.circle_power !== undefined;
-          if (!isBridge) { d.fx = null; d.fy = null; }
-        });
-      node.filter((d) => d.kind === 'd1').call(dragBehavior);
-      node.on('dblclick', (event, d) => {
-        if (d.kind !== 'd1') return;
-        event.stopPropagation();
-        d.fx = null; d.fy = null;
-        simulation.alphaTarget(0.2).restart();
-        window.setTimeout(() => simulation.alphaTarget(0), 400);
-      });
-    }
-
-    // ---- zoom & pan ------------------------------------------------------
-    const zoomBehavior = zoom().scaleExtent([0.15, 3]).on('zoom', (event) => {
-      viewport.attr('transform', event.transform.toString());
-      // Persist only user-driven camera moves; saving the programmatic initial
-      // transform would pin the view to stale dimensions across resizes.
-      if (event.sourceEvent) savedTransformRef.current = event.transform;
-      if (event.transform.k !== zoomKRef.current) {
-        zoomKRef.current = event.transform.k;
-        refreshLabels();
-      }
-    });
-    svg.call(zoomBehavior).on('dblclick.zoom', null);
-
-    const fitK = Math.max(0.15, Math.min(3, Math.min(width, height) / (sceneRadius * 2)));
-    const initialTransform =
-      savedTransformRef.current ?? zoomIdentity.translate(width / 2, height / 2).scale(fitK);
-    svg.call(zoomBehavior.transform, initialTransform);
-
-    // ---- selection -------------------------------------------------------
-    applySelectionRef.current = (id) => {
-      // Hubs keep a permanent ring; everyone else gets one only while selected.
-      // Creating 1,400 invisible rings up front was most of the element count.
-      nodesLayer.selectAll('circle.og-sel-temp').remove();
-      node.select('circle.og-sel').style('opacity', (d) => (d.id === id ? 1 : 0));
-      node.select('circle.og-base').attr('r', (d) => (d.id === id && d.kind !== 'user' ? d.r + 1.5 : d.r));
-      if (id) {
-        node.filter((d) => d.id === id && !d.hub && d.kind !== 'user')
-          .append('circle')
-          .attr('class', 'og-sel-temp')
-          .attr('r', (d) => d.r + 3)
-          .attr('fill', 'none')
-          .attr('stroke', '#ffffff')
-          .attr('stroke-width', 1.2);
-      }
-      refreshLabels();
-    };
-    applySelectionRef.current(selectedIdRef.current);
-
-    // ---- requests you've sent ---------------------------------------------
-    // A dashed gold ring on every 2nd-degree dot you've asked, in step with
-    // the shared list, without rebuilding the scene.
-    applyRequestsRef.current = (state) => {
-      nodesLayer.selectAll('circle.og-asked').remove();
-      node.filter((d) => d.kind === 'd2' && hasRequest(d.connection, state))
-        .append('circle')
-        .attr('class', 'og-asked')
-        .attr('r', (d) => d.r + 2.2)
-        .attr('fill', 'none')
-        .attr('stroke', '#FFD700')
-        .attr('stroke-width', 1)
-        .attr('stroke-dasharray', '2 1.6')
-        .style('pointer-events', 'none');
-    };
-    applyRequestsRef.current(requestsRef.current);
-
-    // ---- fly-to ----------------------------------------------------------
-    const nodeById = new Map(renderNodes.map((n) => [n.id, n]));
-    focusNodeRef.current = (id) => {
-      const target = nodeById.get(id);
-      if (!target) return;
-      const tx = target.x ?? 0;
-      const ty = target.y ?? 0;
-      const start = zoomTransform(svgEl);
-      const end = zoomIdentity.translate(width / 2, height / 2).scale(2.5).translate(-tx, -ty);
-      const t0 = performance.now();
-      const flyDur = 650;
-      const fly = (t) => {
-        const p = Math.min(1, (t - t0) / flyDur);
-        const e = 1 - Math.pow(1 - p, 3);
-        zoomBehavior.transform(svg, zoomIdentity
-          .translate(start.x + (end.x - start.x) * e, start.y + (end.y - start.y) * e)
-          .scale(start.k + (end.k - start.k) * e));
-        if (p < 1) requestAnimationFrame(fly);
-      };
-      requestAnimationFrame(fly);
-      // rAF is throttled in background tabs; make sure the camera still lands.
-      window.setTimeout(() => zoomBehavior.transform(svg, end), flyDur + 80);
-
-      onSelectRef.current?.(target.connection);
-      selectedIdRef.current = id;
-      applySelectionRef.current(id);
-
-      const pulse = nodesLayer.append('circle')
-        .attr('cx', tx).attr('cy', ty).attr('r', target.r + 2)
-        .attr('fill', 'none').attr('stroke', '#ffffff').attr('stroke-width', 2)
-        .attr('opacity', 0.9);
-      const p0 = performance.now();
-      const pulseDur = 700;
-      const puls = (t) => {
-        const p = Math.min(1, (t - p0) / pulseDur);
-        pulse.attr('r', target.r + 2 + 26 * p).attr('opacity', 0.9 * (1 - p));
-        if (p < 1) requestAnimationFrame(puls);
-        else pulse.remove();
-      };
-      requestAnimationFrame(puls);
-      window.setTimeout(() => pulse.remove(), pulseDur + 100);
-    };
-
-    return () => {
-      sim?.stop();
-      applySelectionRef.current = () => {};
-      applyRequestsRef.current = () => {};
-      focusNodeRef.current = () => {};
-      svg.on('.zoom', null);
-      svg.on('click', null);
-      svg.selectAll('*').remove();
-    };
-  }, [signature, userName, userImage, isMobile, size, mode]);
-
-  return (
-    <div
-      ref={containerRef}
-      // The view area is a flex column, so a percentage height resolves
-      // against nothing and collapses to zero. Flex into the space instead,
-      // the way the other views do.
-      style={{ position: 'relative', flex: 1, minHeight: 0, width: '100%' }}
-    >
-      <svg
-        ref={svgRef}
-        style={{ display: 'block', height: '100%', width: '100%', touchAction: 'none', userSelect: 'none' }}
-        role="img"
-        aria-label="Your network as an orbital galaxy — closer orbits are higher-leverage tiers"
-      />
-      <div
-        ref={tooltipRef}
-        aria-hidden
-        style={{
-          position: 'absolute', zIndex: 20, maxWidth: 190, pointerEvents: 'none',
-          padding: '6px 10px', fontSize: 11.5, lineHeight: 1.45, borderRadius: 8,
-          background: 'rgba(10,10,26,0.92)', border: '1px solid rgba(255,255,255,0.12)',
-          backdropFilter: 'blur(8px)', opacity: 0, transition: 'opacity 150ms ease',
-          left: 0, top: 0,
-        }}
-      />
-    </div>
-  );
-});
-
-export default OrbitGraph;