dsh-error-atlas 0.11.2 → 0.11.25

package/client.js

@@ -19,6 +19,13 @@ const NS = 'error-atlas'
     const POLL_MS = 6000
     const FOV = Math.PI / 3.3
     const CLOUD_RADIUS = 34
+      // Program hubs orbit outside the error cloud, tethered to it by their links,
+      // so a program reads as a satellite instead of another node in the ball.
+      const SATELLITE_RADIUS = 46
+      // Above this many nodes the exact O(n²) repulsion is replaced by a grid: the
+      // pair count would otherwise freeze the panel while the atlas settles.
+      const GRID_THRESHOLD = 400
+      const REPULSION_CUTOFF = 30
     // Per-frame yaw at 100% on the slider. The slider spans a wide range on
     // purpose: the low end is a calm drift and the top end is unmistakably
     // spinning, so moving the control is visible without staring at it. One
@@ -197,7 +204,7 @@ const NS = 'error-atlas'
     // Bumped on every client change so the panel itself can prove which bundle is
     // live. The chip next to the title shows it; if it is stale the page is running
     // an older bundle and no amount of editing here will be visible.
-    const BUILD = 'V33'
+    const BUILD = 'V51'
 
     const ZH = {
       nav: '错误星图',
@@ -237,13 +244,26 @@ const NS = 'error-atlas'
       exported: '已导出',
       exportFailed: '导出失败',
       spin: '自转',
+      scale: '大小',
+      halo: '光晕',
+      flow: '光点',
+      spread: '间距',
+      nodeColors: '节点',
+      linkColors: '线条',
+      linkCore: '核心辐条',
+      linkHub: '枢纽辐条',
+      linkProject: '程序系绳',
+      linkLesson: '教训线',
+      linkStale: '失效教训',
+      style: '外观',
       pause: '暂停',
       resume: '继续',
       clear: '清空',
       clearConfirm: '清空全部运行时错误记录？此操作不可撤销。\n（青色的「开发错误」与紫色的「任务复盘」都是保留的，不会被清空）',
       recent: '最近错误',
       recentSub: 'RECENT EVENTS',
-      hint: '拖拽旋转 · 滚轮缩放 · 点击节点查看',
+            hint: '拖拽旋转 · 滚轮缩放 · 点击节点以其为中心',
+      focused: '已以「{name}」为中心',
       hintPaused: '已暂停 · 拖拽仍可环视 · 点「继续」恢复自转',
       count: '次数',
       lastSeen: '最近',
@@ -344,13 +364,26 @@ const NS = 'error-atlas'
       exported: 'Exported',
       exportFailed: 'Export failed',
       spin: 'Spin',
+      scale: 'Size',
+      halo: 'Glow',
+      flow: 'Pulse',
+      spread: 'Spread',
+      nodeColors: 'Nodes',
+      linkColors: 'Lines',
+      linkCore: 'Core spokes',
+      linkHub: 'Hub spokes',
+      linkProject: 'Program tethers',
+      linkLesson: 'Lesson wires',
+      linkStale: 'Failed lessons',
+      style: 'Look',
       pause: 'Pause',
       resume: 'Resume',
       clear: 'Clear',
       clearConfirm: 'Clear every runtime error record? This cannot be undone.\n(cyan dev errors and violet retrospectives are kept.)',
       recent: 'Recent errors',
       recentSub: 'RECENT EVENTS',
-      hint: 'drag to rotate · wheel to zoom · click a node',
+            hint: 'drag to rotate · wheel to zoom · click a node to orbit it',
+      focused: 'orbiting “{name}”',
       hintPaused: 'Paused · you can still orbit · click Resume',
       count: 'Count',
       lastSeen: 'Last',
@@ -542,6 +575,8 @@ const NS = 'error-atlas'
       'attribute float aAlpha;',
       'uniform mat4 uVP;',
       'uniform float uFocal;',
+      'uniform float uRefDist;',
+      'uniform float uMaxSize;',
       'uniform float uSizeMul;',
       'uniform float uAlphaMul;',
       'varying vec3 vColor;',
@@ -550,14 +585,16 @@ const NS = 'error-atlas'
       '  vec4 clip = uVP * vec4(aPosition, 1.0);',
       '  gl_Position = clip;',
       '  float w = max(0.01, clip.w);',
-      '  gl_PointSize = max(1.5, aSize * uSizeMul * uFocal / w);',
+      '  gl_PointSize = clamp(aSize * uSizeMul * uFocal / max(uRefDist, 1.0), 1.5, uMaxSize);',
       '  float fog = clamp(2.4 - w * 0.009, 0.08, 1.0);',
       '  vAlpha = aAlpha * uAlphaMul * fog;',
       '  vColor = aColor;',
       '}',
     ].join('\n')
 
-    const NODE_FS = [
+    // A soft radial falloff, kept separate from the solid node core: this is the glow
+    // that makes a dense atlas read as a nebula instead of a pile of dots.
+    const HALO_FS = [
       'precision mediump float;',
       'varying vec3 vColor;',
       'varying float vAlpha;',
@@ -565,9 +602,28 @@ const NS = 'error-atlas'
       '  vec2 p = gl_PointCoord - vec2(0.5);',
       '  float r = length(p) * 2.0;',
       '  if (r >= 1.0) discard;',
-      '  float core = pow(1.0 - r, 1.9);',
-      '  float spark = pow(max(0.0, 1.0 - r * 1.9), 6.0);',
-      '  gl_FragColor = vec4(vColor * (core * 0.85 + spark), vAlpha * core);',
+      '  float g = pow(1.0 - r, 2.1);',
+      '  vec3 tint = mix(vColor, vec3(1.0), 0.25);',
+      '  gl_FragColor = vec4(tint * g * 1.35, vAlpha * g);',
+      '}',
+    ].join('\n')
+
+    const NODE_FS = [
+      'precision mediump float;',
+      'varying vec3 vColor;',
+      'varying float vAlpha;',
+      'void main() {',
+      '  vec2 p = gl_PointCoord - vec2(0.5);',
+      '  float r = length(p) * 2.0;',
+      // The solid core only fills the middle of the sprite: a point-sized dot with a
+      // crisp rim reads as a node, while a disc that fills the whole quad reads as a ball.
+      '  float q = r * 1.75;',
+      '  if (q >= 1.0) discard;',
+      '  float edge = smoothstep(1.0, 0.86, q);',
+      '  float lit = 0.6 + 0.4 * (1.0 - q * q);',
+      '  float core = edge * lit;',
+      '  float spark = pow(max(0.0, 1.0 - q * 2.0), 8.0) * 0.45;',
+      '  gl_FragColor = vec4(vColor * (core + spark), vAlpha * edge * 0.9);',
       '}',
     ].join('\n')
 
@@ -629,6 +685,61 @@ const NS = 'error-atlas'
     // ─────────────────────────────────────────────────────────────────────────
     // renderer: force layout + WebGL draw + label/hit projection
     // ─────────────────────────────────────────────────────────────────────────
+    function hashOf(id) {
+      let hash = 2166136261
+      for (let k = 0; k < id.length; k += 1) {
+        hash = ((hash ^ id.charCodeAt(k)) * 16777619) >>> 0
+      }
+      return hash
+    }
+
+    // The stage grows with the atlas: 240 nodes keep the old 34 unit core, 2400 need
+    // a wider one, otherwise the islands melt back into a single ball.
+    function cloudRadiusFor(n) {
+      return CLOUD_RADIUS * Math.max(1, Math.sqrt(Math.max(1, n) / 240))
+    }
+
+    /** Orbit radius for the program satellites: close enough to read as part of the map. */
+    function satelliteRadiusFor(cloud) {
+      return Math.max(SATELLITE_RADIUS, cloud * 1.45)
+    }
+
+    /** Deterministic orbit slot for a hub, so a refresh never reshuffles the map. */
+    function hubSlot(node, islandRadius, satRadius) {
+      const hash = hashOf(node.id)
+      if (node.kind === 'sessionhub') {
+        const angle = ((hash % 997) / 997) * Math.PI * 2
+        const tilt = (((hash >>> 10) % 991) / 991) * 0.9 - 0.45
+        const ring = islandRadius * (0.92 + ((hash >>> 20) % 100) / 420)
+        return [
+          Math.cos(angle) * Math.cos(tilt) * ring,
+          Math.sin(tilt) * ring,
+          Math.sin(angle) * Math.cos(tilt) * ring,
+        ]
+      }
+      if (node.kind === 'toolhub') {
+        const angle = ((hash % 991) / 991) * Math.PI * 2
+        const ring = islandRadius * 0.34
+        return [
+          Math.cos(angle) * ring,
+          (((hash >>> 8) % 100) / 100 - 0.5) * ring * 0.5,
+          Math.sin(angle) * ring,
+        ]
+      }
+      if (node.kind === 'project') {
+        const angle = ((hash % 997) / 997) * Math.PI * 2
+        const tilt = (((hash >>> 10) % 991) / 991) * 1.15 - 0.575
+        const ring = satRadius * (0.9 + ((hash >>> 20) % 100) / 500)
+        return [
+          Math.cos(angle) * Math.cos(tilt) * ring,
+          Math.sin(tilt) * ring,
+          Math.sin(angle) * Math.cos(tilt) * ring,
+        ]
+      }
+      return [0, 0, 0]
+    }
+
+
     function createRenderer(canvas, labelHost, handlers) {
       const gl =
         canvas.getContext('webgl', { antialias: true, alpha: true, premultipliedAlpha: false, powerPreference: 'high-performance' }) ||
@@ -637,6 +748,7 @@ const NS = 'error-atlas'
       if (!gl) return null
 
       const nodeProgram = createProgram(gl, NODE_VS, NODE_FS)
+      const haloProgram = typeof HALO_FS === 'string' ? createProgram(gl, NODE_VS, HALO_FS) : null
       const linkProgram = createProgram(gl, LINK_VS, LINK_FS)
 
       const nodeLoc = {
@@ -646,9 +758,23 @@ const NS = 'error-atlas'
         alpha: gl.getAttribLocation(nodeProgram, 'aAlpha'),
         uVP: gl.getUniformLocation(nodeProgram, 'uVP'),
         uFocal: gl.getUniformLocation(nodeProgram, 'uFocal'),
+        uRefDist: gl.getUniformLocation(nodeProgram, 'uRefDist'),
+        uMaxSize: gl.getUniformLocation(nodeProgram, 'uMaxSize'),
         uSizeMul: gl.getUniformLocation(nodeProgram, 'uSizeMul'),
         uAlphaMul: gl.getUniformLocation(nodeProgram, 'uAlphaMul'),
       }
+      const haloLoc = {
+        position: gl.getAttribLocation(haloProgram, 'aPosition'),
+        color: gl.getAttribLocation(haloProgram, 'aColor'),
+        size: gl.getAttribLocation(haloProgram, 'aSize'),
+        alpha: gl.getAttribLocation(haloProgram, 'aAlpha'),
+        uVP: gl.getUniformLocation(haloProgram, 'uVP'),
+        uFocal: gl.getUniformLocation(haloProgram, 'uFocal'),
+        uRefDist: gl.getUniformLocation(haloProgram, 'uRefDist'),
+        uMaxSize: gl.getUniformLocation(haloProgram, 'uMaxSize'),
+        uSizeMul: gl.getUniformLocation(haloProgram, 'uSizeMul'),
+        uAlphaMul: gl.getUniformLocation(haloProgram, 'uAlphaMul'),
+      }
       const linkLoc = {
         position: gl.getAttribLocation(linkProgram, 'aPosition'),
         color: gl.getAttribLocation(linkProgram, 'aColor'),
@@ -681,6 +807,11 @@ const NS = 'error-atlas'
         links: [],
         count: 0,
         pos: new Float32Array(0),
+        anchor: new Float32Array(0),
+        islandHub: new Int32Array(0),
+        degree: new Int32Array(0),
+        anchored: new Uint8Array(0),
+        cloudRadius: CLOUD_RADIUS,
         vel: new Float32Array(0),
         mass: new Float32Array(0),
         color: new Float32Array(0),
@@ -707,6 +838,14 @@ const NS = 'error-atlas'
         pitch: -0.14,
         dist: 96,
         targetDist: 96,
+        scale: 1,
+        halo: 1,
+        flowScale: 1,
+        // How far apart the nodes sit. Positions only: node and pulse diameters keep
+        // their own dials, so the wire lengths can breathe without resizing anything.
+        spread: 1,
+        focus: new Float32Array(3),
+        focusTarget: new Float32Array(3),
         selected: null,
         hovered: null,
         neighbors: new Set(),
@@ -730,8 +869,13 @@ const NS = 'error-atlas'
         raf: 0,
         disposed: false,
         alphaDirty: true,
+        // Colour filters: node kinds and link roles the user has switched off.
+        hiddenKinds: new Set(),
+        hiddenLinks: new Set(),
+        linkRoles: [],
         signature: null,
         needsFit: true,
+        fitDist: 96,
         clock: 0,
         // Search is a client-side lens over the snapshot: matching nodes keep their
         // light, everything else fades so the shape of an answer is visible at once.
@@ -770,35 +914,191 @@ const NS = 'error-atlas'
         const pos = state.pos
         const mass = state.mass
         const size = state.size
+        const nodes = state.nodes
         let seed = 1337
         const rand = () => {
           seed = (seed * 1664525 + 1013904223) >>> 0
           return seed / 4294967296
         }
+
+        const cloud = cloudRadiusFor(n)
+        const satRadius = satelliteRadiusFor(cloud)
+        // Each window needs room: 34 units of arc per island, capped so the satellites
+        // always stay outside the ring.
+        let sessionCount = 0
+        for (let i = 0; i < n; i += 1) if (nodes[i].kind === 'sessionhub') sessionCount += 1
+        const islandRadius = Math.min(satRadius * 0.9, Math.max(cloud * 0.74, (sessionCount * 34) / (Math.PI * 2)))
+        state.cloudRadius = cloud
+        state.anchor = new Float32Array(n * 3)
+        state.anchored = new Uint8Array(n)
+
+        const degree = new Int32Array(n)
+        for (let k = 0; k < state.pairs.length; k += 2) {
+          degree[state.pairs[k]] += 1
+          degree[state.pairs[k + 1]] += 1
+        }
+        state.degree = degree
+
+        const islandHub = new Int32Array(n).fill(-1)
+        state.islandHub = islandHub
+        const hubIndex = new Map()
+        for (let i = 0; i < n; i += 1) if (nodes[i].kind === 'sessionhub') hubIndex.set(nodes[i].id, i)
+
+        const hubAnchors = new Map()
+        for (let i = 0; i < n; i += 1) {
+          const node = nodes[i]
+          if (isHubNode(node.kind) && node.kind !== 'project') hubAnchors.set(node.id, hubSlot(node, islandRadius, satRadius))
+        }
+
+        // A failure belongs to the session window it happened in. That island anchor is
+        // weak on purpose: the hub springs still decide the shape, the anchor only keeps
+        // one island from bleeding into the next one.
+        const islandOf = new Map()
+        for (const link of state.links) {
+          const a = nodes[link.a]
+          const b = nodes[link.b]
+          if (!a || !b) continue
+          if (a.kind === 'sessionhub' && !isHubNode(b.kind) && !islandOf.has(b.id)) islandOf.set(b.id, a.id)
+          else if (b.kind === 'sessionhub' && !isHubNode(a.kind) && !islandOf.has(a.id)) islandOf.set(a.id, b.id)
+        }
+
+        // A retrospective has no direct window link: it borrows the island of the failures it
+        // wrote a lesson about, so the learning stays next to the mistakes it came from.
+        for (const link of state.links) {
+          const a = nodes[link.a]
+          const b = nodes[link.b]
+          if (!a || !b) continue
+          if (islandOf.has(a.id) && !islandOf.has(b.id) && !isHubNode(b.kind)) islandOf.set(b.id, islandOf.get(a.id))
+          else if (islandOf.has(b.id) && !islandOf.has(a.id) && !isHubNode(a.kind)) islandOf.set(a.id, islandOf.get(b.id))
+        }
+
+
+        // A program satellite is placed on the side of the map where its own failures are:
+        // average the islands of the errors it is linked to and park it on that heading.
+        // A hash angle put a program next to the cluster on one refresh and opposite it on
+        // the next, which is why "docs" and "dsh-error-atlas" looked stranded.
+        const projectPull = new Map()
+        for (const link of state.links) {
+          const a = nodes[link.a]
+          const b = nodes[link.b]
+          if (!a || !b) continue
+          const project = a.kind === 'project' ? a : b.kind === 'project' ? b : null
+          if (!project) continue
+          const other = project === a ? b : a
+          if (isHubNode(other.kind)) continue
+          const island = islandOf.get(other.id)
+          const base = island ? hubAnchors.get(island) : null
+          if (!base) continue
+          const acc = projectPull.get(project.id) || [0, 0, 0]
+          acc[0] += base[0]
+          acc[1] += base[1]
+          acc[2] += base[2]
+          projectPull.set(project.id, acc)
+        }
+        // Programs whose failures share one window would all land on the same heading, so
+        // their headings are fanned out around that direction instead of stacking.
+        const wanted = []
+        for (const [id, acc] of projectPull) {
+          const horizontal = Math.hypot(acc[0], acc[2])
+          if (horizontal < 1e-3) continue
+          wanted.push({ id, angle: Math.atan2(acc[2], acc[0]), y: acc[1] })
+        }
+        wanted.sort((left, right) => left.angle - right.angle)
+        const taken = []
+        const angularGap = (a, b) => Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b)))
+        for (const item of wanted) {
+          let angle = item.angle
+          let step = 1
+          while (taken.some((other) => angularGap(other, angle) < 0.36)) {
+            const swing = Math.ceil(step / 2) * 0.42
+            angle = item.angle + (step % 2 === 1 ? swing : -swing)
+            step += 1
+          }
+          taken.push(angle)
+          const ring = satRadius * (0.94 + (hashOf(item.id) % 60) / 600)
+          hubAnchors.set(item.id, [Math.cos(angle) * ring, item.y * 0.06, Math.sin(angle) * ring])
+        }
+
+        // A program with no linked failure yet still gets its place on the ring, so it never
+        // collapses into the cloud just because it has nothing to point at.
+        for (let i = 0; i < n; i += 1) {
+          const node = nodes[i]
+          if (node.kind === 'project' && !hubAnchors.has(node.id)) hubAnchors.set(node.id, hubSlot(node, islandRadius, satRadius))
+        }
+
+        // Anchors inside one island are spread with a golden-angle spiral, so the island is
+        // a volume and not a ring of equidistant failures.
+        const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5))
+        const islandLeaves = new Map()
+        for (const islandId of islandOf.values()) islandLeaves.set(islandId, (islandLeaves.get(islandId) || 0) + 1)
+        const islandSeen = new Map()
+        state.islandMode = islandOf.size > 0
+
         for (let i = 0; i < n; i += 1) {
-          const node = state.nodes[i]
+          const node = nodes[i]
           const isRoot = node.kind === 'root'
           const isHub = isHubNode(node.kind)
           mass[i] = isRoot ? 60 : isHub ? 9 : 1
           size[i] = isRoot
             ? 11
             : isHub
-              ? 5.5 + Math.min(7, Math.sqrt(node.count || 1) * 1.6)
-              : 2.4 + Math.min(4.5, Math.sqrt(node.count || 1) * 1.3)
+              ? 4.2 + Math.min(4.6, Math.sqrt(node.count || 1) * 1.15)
+              : 1.5 + Math.min(2.6, Math.sqrt(node.count || 1) * 0.82)
           if (isRoot) {
             pos[i * 3] = 0
             pos[i * 3 + 1] = 0
             pos[i * 3 + 2] = 0
+            state.anchored[i] = 1
             continue
           }
+          if (hubAnchors.has(node.id)) {
+            const [ax, ay, az] = hubAnchors.get(node.id)
+            state.anchor[i * 3] = ax
+            state.anchor[i * 3 + 1] = ay
+            state.anchor[i * 3 + 2] = az
+            state.anchored[i] = 1
+          } else {
+            const island = islandOf.get(node.id)
+            const base = island ? hubAnchors.get(island) : null
+            if (base) {
+              // Spread a window's failures through the volume of its own island instead of
+              // stacking every anchor on one point: a single point turns the island into a
+              // repulsion bomb and the failures end up pinned to the clamp shell.
+              const total = islandLeaves.get(island) || 1
+              const seen = islandSeen.get(island) || 0
+              islandSeen.set(island, seen + 1)
+              const u = (seen + 0.5) / total
+              const radius = cloud * 0.30 * Math.cbrt(u)
+              const phi = Math.acos(1 - 2 * u)
+              const theta = GOLDEN_ANGLE * seen
+              state.anchor[i * 3] = base[0] + radius * Math.sin(phi) * Math.cos(theta)
+              state.anchor[i * 3 + 1] = base[1] + radius * Math.cos(phi)
+              state.anchor[i * 3 + 2] = base[2] + radius * Math.sin(phi) * Math.sin(theta)
+            } else {
+              const radius = cloud * 0.4 * Math.cbrt(rand())
+              const phi = Math.acos(1 - 2 * rand())
+              const theta = 2 * Math.PI * rand()
+              state.anchor[i * 3] = radius * Math.sin(phi) * Math.cos(theta)
+              state.anchor[i * 3 + 1] = radius * Math.cos(phi)
+              state.anchor[i * 3 + 2] = radius * Math.sin(phi) * Math.sin(theta)
+            }
+            const owner = island ? hubIndex.get(island) : undefined
+            if (owner !== undefined) islandHub[i] = owner
+          }
           const kept = previous && previous.get(node.id)
-          if (kept) {
+          if (kept && state.anchored[i] === 0) {
             pos[i * 3] = kept[0]
             pos[i * 3 + 1] = kept[1]
             pos[i * 3 + 2] = kept[2]
             continue
           }
-          const radius = isHub ? 6 + rand() * 10 : 18 + Math.pow(rand(), 0.65) * 34
+          if (state.anchored[i]) {
+            pos[i * 3] = state.anchor[i * 3]
+            pos[i * 3 + 1] = state.anchor[i * 3 + 1]
+            pos[i * 3 + 2] = state.anchor[i * 3 + 2]
+            continue
+          }
+          const radius = cloud * (0.25 + rand() * 0.55)
           const theta = rand() * Math.PI * 2
           const phi = Math.acos(2 * rand() - 1)
           pos[i * 3] = radius * Math.sin(phi) * Math.cos(theta)
@@ -806,8 +1106,11 @@ const NS = 'error-atlas'
           pos[i * 3 + 2] = radius * Math.sin(phi) * Math.sin(theta)
         }
         state.vel.fill(0)
-        state.warmup = previous ? 70 : 210
-        state.simBudget = previous ? 100 : 70
+        // Big atlases settle with fewer, shorter passes: the layout has to be usable at
+        // 2400 nodes, and a 210 frame warm-up there would stall the first paint for seconds.
+        const warm = Math.max(40, Math.min(210, Math.round(90000 / Math.max(1, n))))
+        state.warmup = previous ? Math.min(60, warm) : warm
+        state.simBudget = previous ? 60 : Math.max(24, Math.min(70, Math.round(48000 / Math.max(1, n))))
       }
 
       function simulate() {
@@ -816,36 +1119,104 @@ const NS = 'error-atlas'
         const pos = state.pos
         const vel = state.vel
         const mass = state.mass
-        const repulsion = 95
-
-        for (let i = 0; i < n; i += 1) {
-          const ix = i * 3
-          const px = pos[ix]
-          const py = pos[ix + 1]
-          const pz = pos[ix + 2]
-          let fx = 0
-          let fy = 0
-          let fz = 0
-          for (let j = i + 1; j < n; j += 1) {
-            const jx = j * 3
-            let dx = px - pos[jx]
-            let dy = py - pos[jx + 1]
-            let dz = pz - pos[jx + 2]
-            let d2 = dx * dx + dy * dy + dz * dz
-            if (d2 < 0.02) {
-              d2 = 0.02
-              dx += 0.01
-              dy += 0.01
-              dz += 0.01
+        const nodes = state.nodes
+        // With islands the anchors decide the shape, so repulsion only has to stop nodes
+        // from overlapping; 95 was calibrated for one sparse cloud and pins dense islands
+        // to their clamp shell. Without sessions keep the old value.
+        const repulsion = state.islandMode ? 30 : 95
+
+        if (n > GRID_THRESHOLD) {
+          // Uniform grid: only nearby pairs repel. The far field is covered by the island
+          // anchors, so truncating the 1/d² tail does not collapse the layout.
+          const cell = REPULSION_CUTOFF
+          const buckets = new Map()
+          for (let i = 0; i < n; i += 1) {
+            const ix = i * 3
+            const key =
+              Math.floor(pos[ix] / cell) + ',' + Math.floor(pos[ix + 1] / cell) + ',' + Math.floor(pos[ix + 2] / cell)
+            const list = buckets.get(key)
+            if (list) list.push(i)
+            else buckets.set(key, [i])
+          }
+          for (let i = 0; i < n; i += 1) {
+            const ix = i * 3
+            const px = pos[ix]
+            const py = pos[ix + 1]
+            const pz = pos[ix + 2]
+            const bx = Math.floor(px / cell)
+            const by = Math.floor(py / cell)
+            const bz = Math.floor(pz / cell)
+            let fx = 0
+            let fy = 0
+            let fz = 0
+            for (let ox = -1; ox <= 1; ox += 1) {
+              for (let oy = -1; oy <= 1; oy += 1) {
+                for (let oz = -1; oz <= 1; oz += 1) {
+                  const list = buckets.get(bx + ox + ',' + (by + oy) + ',' + (bz + oz))
+                  if (!list) continue
+                  for (let m = 0; m < list.length; m += 1) {
+                    const j = list[m]
+                    if (j <= i) continue
+                    const jx = j * 3
+                    let dx = px - pos[jx]
+                    let dy = py - pos[jx + 1]
+                    let dz = pz - pos[jx + 2]
+                    let d2 = dx * dx + dy * dy + dz * dz
+                    if (d2 > REPULSION_CUTOFF * REPULSION_CUTOFF) continue
+                    if (d2 < 0.02) {
+                      d2 = 0.02
+                      dx += 0.01
+                      dy += 0.01
+                      dz += 0.01
+                    }
+                    // Two failures of the same window share one island and are expected to
+                    // sit close: full repulsion would push the whole island onto its clamp
+                    // shell. Strangers keep the full push, which is what separates islands.
+                    const soft = state.islandHub[i] >= 0 && state.islandHub[i] === state.islandHub[j] ? 0.3 : 1
+                    const inv = (repulsion * soft) / (d2 * Math.sqrt(d2))
+                    fx += dx * inv
+                    fy += dy * inv
+                    fz += dz * inv
+                  }
+                }
+              }
+            }
+            vel[ix] += fx / mass[i]
+            vel[ix + 1] += fy / mass[i]
+            vel[ix + 2] += fz / mass[i]
+          }
+        } else {
+          for (let i = 0; i < n; i += 1) {
+            const ix = i * 3
+            const px = pos[ix]
+            const py = pos[ix + 1]
+            const pz = pos[ix + 2]
+            let fx = 0
+            let fy = 0
+            let fz = 0
+            for (let j = i + 1; j < n; j += 1) {
+              const jx = j * 3
+              let dx = px - pos[jx]
+              let dy = py - pos[jx + 1]
+              let dz = pz - pos[jx + 2]
+              let d2 = dx * dx + dy * dy + dz * dz
+              if (d2 < 0.02) {
+                d2 = 0.02
+                dx += 0.01
+                dy += 0.01
+                dz += 0.01
+              }
+              // As in the grid path: siblings inside one island tolerate each other.
+              const soft = state.islandHub[i] >= 0 && state.islandHub[i] === state.islandHub[j] ? 0.3 : 1
+              const inv = (repulsion * soft) / (d2 * Math.sqrt(d2))
+              fx += dx * inv
+              fy += dy * inv
+              fz += dz * inv
             }
-            const inv = repulsion / (d2 * Math.sqrt(d2))
-            fx += dx * inv
-            fy += dy * inv
-            fz += dz * inv
+            vel[ix] += fx / mass[i]
+            vel[ix + 1] += fy / mass[i]
+            vel[ix + 2] += fz / mass[i]
           }
-          vel[ix] += fx / mass[i]
-          vel[ix + 1] += fy / mass[i]
-          vel[ix + 2] += fz / mass[i]
         }
 
         const pairs = state.pairs
@@ -859,7 +1230,34 @@ const NS = 'error-atlas'
           const dy = pos[jx + 1] - pos[ix + 1]
           const dz = pos[jx + 2] - pos[ix + 2]
           const d = Math.sqrt(dx * dx + dy * dy + dz * dz) || 0.01
-          const force = (d - 11) * 0.05
+          // Not every edge means the same thing: a failure is pulled tight to its window,
+          // loosely to its tool, and only tethered to the core.
+          const ka = nodes[i].kind
+          const kb = nodes[j].kind
+          let target = 12
+          let stiffness = 0.02
+          if (state.links[k] && state.links[k].lesson) {
+            target = 18
+            stiffness = 0.02
+          } else if (ka === 'sessionhub' || kb === 'sessionhub') {
+            target = 10
+            stiffness = 0.07
+          } else if (ka === 'project' || kb === 'project') {
+            target = 13
+            stiffness = 0.03
+          } else if (ka === 'root' || kb === 'root') {
+            target = 14
+            stiffness = 0.004
+          }
+          // A hub with hundreds of links must not be dragged inward by all of them at
+          // once, or the program satellites sink into the error cloud.
+          // Only satellites need the degree damping: a window hub is the spine of its island,
+          // and weakening those links lets the island flatten onto its clamp shell.
+          if (ka === 'project' || kb === 'project') {
+            const hubDegree = Math.max(state.degree[i] || 0, state.degree[j] || 0)
+            if (hubDegree > 12) stiffness *= 12 / hubDegree
+          }
+          const force = (d - target) * stiffness
           const ux = (dx / d) * force
           const uy = (dy / d) * force
           const uz = (dz / d) * force
@@ -871,6 +1269,16 @@ const NS = 'error-atlas'
           vel[jx + 2] -= uz / mass[j]
         }
 
+        // Island anchors: hubs are pinned on their slot, failures are held loosely so the
+        // hub springs still decide the local shape.
+        for (let i = 0; i < n; i += 1) {
+          const ix = i * 3
+          const k = state.anchored[i] ? 0.16 : 0.8
+          vel[ix] += (state.anchor[ix] - pos[ix]) * k
+          vel[ix + 1] += (state.anchor[ix + 1] - pos[ix + 1]) * k
+          vel[ix + 2] += (state.anchor[ix + 2] - pos[ix + 2]) * k
+        }
+
         for (let i = 0; i < n; i += 1) {
           const ix = i * 3
           let vx = (vel[ix] - pos[ix] * 0.0016) * 0.8
@@ -903,7 +1311,7 @@ const NS = 'error-atlas'
         // Without this the repulsion drifts the whole cloud past the camera and the
         // graph silently leaves the screen. When a DSH core node exists it *is* the
         // anchor, so the cloud is never recentred away from it.
-        const hasRoot = state.nodes.some((node) => node.kind === 'root')
+        const hasRoot = nodes.some((node) => node.kind === 'root')
         let cx = 0
         let cy = 0
         let cz = 0
@@ -917,9 +1325,11 @@ const NS = 'error-atlas'
           cy /= n
           cz /= n
         }
+        const cloud = state.cloudRadius || CLOUD_RADIUS
         for (let i = 0; i < n; i += 1) {
           const ix = i * 3
-          if (state.nodes[i].kind === 'root') {
+          const kind = nodes[i].kind
+          if (kind === 'root') {
             pos[ix] = 0
             pos[ix + 1] = 0
             pos[ix + 2] = 0
@@ -932,8 +1342,9 @@ const NS = 'error-atlas'
           let py = pos[ix + 1] - cy
           let pz = pos[ix + 2] - cz
           const r = Math.sqrt(px * px + py * py + pz * pz)
-          if (r > CLOUD_RADIUS) {
-            const s = CLOUD_RADIUS / r
+          const limit = kind === 'project' ? satelliteRadiusFor(cloud) * 1.3 : isHubNode(kind) ? cloud * 1.35 : cloud * 1.12
+          if (r > limit) {
+            const s = limit / r
             px *= s
             py *= s
             pz *= s
@@ -944,10 +1355,49 @@ const NS = 'error-atlas'
           pos[ix] = px
           pos[ix + 1] = py
           pos[ix + 2] = pz
+
+          const owner = state.islandHub[i]
+          if (owner >= 0 && owner !== i) {
+            const ox = owner * 3
+            let dx = pos[ix] - pos[ox]
+            let dy = pos[ix + 1] - pos[ox + 1]
+            let dz = pos[ix + 2] - pos[ox + 2]
+            const d = Math.sqrt(dx * dx + dy * dy + dz * dz)
+            const reach = cloud * 0.42
+            if (d > reach) {
+              const s = reach / d
+              pos[ix] = pos[ox] + dx * s
+              pos[ix + 1] = pos[ox + 1] + dy * s
+              pos[ix + 2] = pos[ox + 2] + dz * s
+              vel[ix] *= 0.4
+              vel[ix + 1] *= 0.4
+              vel[ix + 2] *= 0.4
+            }
+          }
         }
       }
 
       /** Frame the whole cloud, so nothing starts outside the viewport. */
+      function scaling(out, k) {
+        out[0] = k
+        out[1] = 0
+        out[2] = 0
+        out[3] = 0
+        out[4] = 0
+        out[5] = k
+        out[6] = 0
+        out[7] = 0
+        out[8] = 0
+        out[9] = 0
+        out[10] = k
+        out[11] = 0
+        out[12] = 0
+        out[13] = 0
+        out[14] = 0
+        out[15] = 1
+        return out
+      }
+
       function fitView() {
         const n = state.count
         if (n === 0) return
@@ -961,10 +1411,11 @@ const NS = 'error-atlas'
         const width = Math.max(1, canvas.clientWidth || 900)
         const height = Math.max(1, canvas.clientHeight || 600)
         const focal = 0.5 * height / Math.tan(FOV / 2)
-        const fitted = (maxR * 1.32 * focal) / (Math.min(width, height) * 0.4)
+        const fitted = (maxR * state.spread * 1.32 * focal) / (Math.min(width, height) * 0.4)
         const dist = Math.max(48, Math.min(300, fitted))
         state.dist = dist
         state.targetDist = dist
+        state.fitDist = dist
       }
 
       function computeMatrices(width, height) {
@@ -978,8 +1429,17 @@ const NS = 'error-atlas'
         const ry = rotationY(new Float32Array(16), state.yaw)
         const rx = rotationX(new Float32Array(16), state.pitch)
         multiply(spin, ry, rx)
+        // Pull the orbit centre onto the picked node before spinning, so the camera
+        // circles that node instead of the middle of the whole cloud.
+        const focus = translation(new Float32Array(16), -state.focus[0], -state.focus[1], -state.focus[2])
+        const centred = new Float32Array(16)
+        multiply(centred, spin, focus)
+        // Spreading is a pure scale about the orbit centre: after the focus translation
+        // the centre is the origin, so scaling here widens every wire without moving
+        // the node the camera is circling.
+        multiply(centred, scaling(new Float32Array(16), state.spread), centred)
         const t = translation(new Float32Array(16), 0, 0, -state.dist)
-        multiply(view, t, spin)
+        multiply(view, t, centred)
         const vp = new Float32Array(16)
         multiply(vp, proj, view)
         return vp
@@ -1012,7 +1472,7 @@ const NS = 'error-atlas'
           depth[i] = cw
           sx[i] = (cx / cw * 0.5 + 0.5) * width
           sy[i] = (0.5 - cy / cw * 0.5) * height
-          radii[i] = (state.size[i] * focal) / cw * 0.5 + 2
+          radii[i] = (state.size[i] * state.scale * focal) / cw * 0.5 + 2
         }
       }
 
@@ -1101,12 +1561,11 @@ const NS = 'error-atlas'
           const by = pos[to3 + 1]
           const bz = pos[to3 + 2]
           const ease = t * t * (3 - 2 * t)
-          // A pulse rides the pipe itself: only a hair of bow, so it always reads as
-          // travelling on the drawn line rather than floating beside it.
-          const lift = Math.sin(Math.PI * t) * 0.16
-          state.flowPos[i * 3] = ax + (bx - ax) * ease + lift * 0.3
-          state.flowPos[i * 3 + 1] = ay + (by - ay) * ease + lift
-          state.flowPos[i * 3 + 2] = az + (bz - az) * ease + lift * 0.25
+          // No bow at all: the link is a straight line, so the pulse has to be a point
+          // on that line, otherwise it visibly floats off the wire.
+          state.flowPos[i * 3] = ax + (bx - ax) * ease
+          state.flowPos[i * 3 + 1] = ay + (by - ay) * ease
+          state.flowPos[i * 3 + 2] = az + (bz - az) * ease
 
           const fresh = state.learnRetros.has(edge.retroId) ? state.learnBoost : 0
           let dim = 1
@@ -1152,7 +1611,7 @@ const NS = 'error-atlas'
           uploadLinks()
           gl.useProgram(linkProgram)
           gl.uniformMatrix4fv(linkLoc.uVP, false, vp)
-          gl.uniform1f(linkLoc.uAlphaMul, 0.85)
+          gl.uniform1f(linkLoc.uAlphaMul, 0.68)
           gl.bindBuffer(gl.ARRAY_BUFFER, linkBuffers.position)
           gl.enableVertexAttribArray(linkLoc.position)
           gl.vertexAttribPointer(linkLoc.position, 3, gl.FLOAT, false, 0, 0)
@@ -1171,7 +1630,8 @@ const NS = 'error-atlas'
           gl.useProgram(nodeProgram)
           gl.uniformMatrix4fv(nodeLoc.uVP, false, vp)
           gl.uniform1f(nodeLoc.uFocal, focalDevice)
-          gl.uniform1f(nodeLoc.uSizeMul, 1.0)
+          gl.uniform1f(nodeLoc.uRefDist, state.fitDist || 96)
+          gl.uniform1f(nodeLoc.uSizeMul, state.flowScale)
           gl.uniform1f(nodeLoc.uAlphaMul, 1.0)
           gl.bindBuffer(gl.ARRAY_BUFFER, flowBuffers.position)
           gl.enableVertexAttribArray(nodeLoc.position)
@@ -1193,6 +1653,7 @@ const NS = 'error-atlas'
           gl.useProgram(nodeProgram)
           gl.uniformMatrix4fv(nodeLoc.uVP, false, vp)
           gl.uniform1f(nodeLoc.uFocal, focalDevice)
+          gl.uniform1f(nodeLoc.uRefDist, state.fitDist || 96)
           gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.position)
           gl.enableVertexAttribArray(nodeLoc.position)
           gl.vertexAttribPointer(nodeLoc.position, 3, gl.FLOAT, false, 0, 0)
@@ -1206,12 +1667,54 @@ const NS = 'error-atlas'
           gl.enableVertexAttribArray(nodeLoc.alpha)
           gl.vertexAttribPointer(nodeLoc.alpha, 1, gl.FLOAT, false, 0, 0)
 
-          gl.uniform1f(nodeLoc.uSizeMul, 3.2)
-          gl.uniform1f(nodeLoc.uAlphaMul, 0.075)
-          gl.drawArrays(gl.POINTS, 0, state.count)
-
-          gl.uniform1f(nodeLoc.uSizeMul, 1.0)
+          gl.uniform1f(nodeLoc.uMaxSize, 44.0)
+          gl.uniform1f(nodeLoc.uSizeMul, state.scale)
           gl.uniform1f(nodeLoc.uAlphaMul, 0.95)
+
+          if (haloProgram && state.halo > 0.02) {
+            gl.useProgram(haloProgram)
+            gl.uniformMatrix4fv(haloLoc.uVP, false, vp)
+            gl.uniform1f(haloLoc.uFocal, focalDevice)
+            gl.uniform1f(haloLoc.uRefDist, state.fitDist || 96)
+            gl.uniform1f(haloLoc.uMaxSize, 420.0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.position)
+            gl.enableVertexAttribArray(haloLoc.position)
+            gl.vertexAttribPointer(haloLoc.position, 3, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.color)
+            gl.enableVertexAttribArray(haloLoc.color)
+            gl.vertexAttribPointer(haloLoc.color, 3, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.size)
+            gl.enableVertexAttribArray(haloLoc.size)
+            gl.vertexAttribPointer(haloLoc.size, 1, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.alpha)
+            gl.enableVertexAttribArray(haloLoc.alpha)
+            gl.vertexAttribPointer(haloLoc.alpha, 1, gl.FLOAT, false, 0, 0)
+            // Two additive layers make a bulb, not an airbrush: a tight bright corona
+            // plus a wide faint spill.
+            gl.uniform1f(haloLoc.uSizeMul, (1.0 + 1.7 * state.halo) * state.scale)
+            gl.uniform1f(haloLoc.uAlphaMul, 0.42 * Math.min(1.3, state.halo))
+            gl.drawArrays(gl.POINTS, 0, state.count)
+            gl.uniform1f(haloLoc.uSizeMul, (2.3 + 4.4 * state.halo) * state.scale)
+            gl.uniform1f(haloLoc.uAlphaMul, 0.13 * Math.min(1.5, state.halo))
+            gl.drawArrays(gl.POINTS, 0, state.count)
+
+            // Attribute state is global in WebGL1, so the node pass has to re-bind its
+            // own pointers after the halo program used the same buffers.
+            gl.useProgram(nodeProgram)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.position)
+            gl.enableVertexAttribArray(nodeLoc.position)
+            gl.vertexAttribPointer(nodeLoc.position, 3, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.color)
+            gl.enableVertexAttribArray(nodeLoc.color)
+            gl.vertexAttribPointer(nodeLoc.color, 3, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.size)
+            gl.enableVertexAttribArray(nodeLoc.size)
+            gl.vertexAttribPointer(nodeLoc.size, 1, gl.FLOAT, false, 0, 0)
+            gl.bindBuffer(gl.ARRAY_BUFFER, nodeBuffers.alpha)
+            gl.enableVertexAttribArray(nodeLoc.alpha)
+            gl.vertexAttribPointer(nodeLoc.alpha, 1, gl.FLOAT, false, 0, 0)
+          }
+
           gl.drawArrays(gl.POINTS, 0, state.count)
         }
 
@@ -1227,6 +1730,10 @@ const NS = 'error-atlas'
         for (const node of state.labelNodes) {
           const el = state.labels.get(node.id)
           if (!el) continue
+          if (state.hiddenKinds.has(node.kind)) {
+            el.style.opacity = '0'
+            continue
+          }
           const idx = state.byId.get(node.id)
           if (idx === undefined || state.depth[idx] <= 0) {
             el.style.opacity = '0'
@@ -1288,6 +1795,8 @@ const NS = 'error-atlas'
         }
         // frame-rate independent easing: 0.08 per 60Hz frame
         state.dist += (state.targetDist - state.dist) * (1 - Math.pow(0.92, dt))
+          const focusEase = 1 - Math.pow(0.86, dt)
+          for (let k = 0; k < 3; k += 1) state.focus[k] += (state.focusTarget[k] - state.focus[k]) * focusEase
 
         if (state.alphaDirty) {
           const sel = state.selected
@@ -1299,6 +1808,7 @@ const NS = 'error-atlas'
             else if (state.neighbors.has(id)) state.alpha[i] = 0.85
             else state.alpha[i] = 0.1
             if (matches) state.alpha[i] = matches.has(id) ? Math.max(state.alpha[i], 0.95) : state.alpha[i] * 0.12
+            if (state.hiddenKinds.size > 0 && state.hiddenKinds.has(state.nodes[i].kind)) state.alpha[i] = 0
           }
           state.alphaDirty = false
         }
@@ -1347,10 +1857,12 @@ const NS = 'error-atlas'
         nodes.forEach((node, index) => {
           byId.set(node.id, index)
         })
+        state.indexById = byId
         const links = []
         const pairs = []
         const linkColor = []
         const linkAlpha = []
+        const linkRoles = []
         for (const link of rawLinks) {
           const a = byId.get(link && link.s)
           const b = byId.get(link && link.t)
@@ -1366,13 +1878,22 @@ const NS = 'error-atlas'
             const lc = stale ? STALE_COLOR : KIND_COLOR.retro || [0.78, 0.62, 1]
             linkColor.push(lc[0], lc[1], lc[2], lc[0], lc[1], lc[2])
             linkAlpha.push(stale ? 0.66 : 0.46, stale ? 0.66 : 0.46)
+            linkRoles.push(stale ? 'stale' : 'lesson')
             continue
           }
           const ca = KIND_COLOR[nodes[a].kind] || [1, 1, 1]
           const cb = KIND_COLOR[nodes[b].kind] || [1, 1, 1]
           linkColor.push((ca[0] + cb[0]) * 0.5, (ca[1] + cb[1]) * 0.5, (ca[2] + cb[2]) * 0.5)
           linkColor.push((ca[0] + cb[0]) * 0.5, (ca[1] + cb[1]) * 0.5, (ca[2] + cb[2]) * 0.5)
-          linkAlpha.push(0.2, 0.2)
+          // The tether to a satellite is drawn a little brighter than a hub spoke:
+          // it is the only thing that tells you which ball the program belongs to.
+          // Spokes to the core are the most numerous edges in the graph, so they stay
+          // dim: the islands should be readable before the web around the core is.
+          const satelliteEdge = nodes[a].kind === 'project' || nodes[b].kind === 'project'
+          const rootSpoke = nodes[a].kind === 'root' || nodes[b].kind === 'root'
+          const alpha = satelliteEdge ? 0.34 : rootSpoke ? 0.16 : 0.26
+          linkAlpha.push(alpha, alpha)
+          linkRoles.push(satelliteEdge ? 'project' : rootSpoke ? 'core' : 'hub')
         }
 
         const count = nodes.length
@@ -1417,6 +1938,8 @@ const NS = 'error-atlas'
         state.linkVerts = new Float32Array(links.length * 6)
         state.linkColor = new Float32Array(linkColor)
         state.linkAlpha = new Float32Array(linkAlpha)
+        state.linkBaseAlpha = Float32Array.from(linkAlpha)
+        state.linkRoles = linkRoles
         state.sx = new Float32Array(count)
         state.sy = new Float32Array(count)
         state.depth = new Float32Array(count)
@@ -1427,7 +1950,7 @@ const NS = 'error-atlas'
           state.color[i * 3] = color[0]
           state.color[i * 3 + 1] = color[1]
           state.color[i * 3 + 2] = color[2]
-          state.baseAlpha[i] = isHubNode(nodes[i].kind) ? 1 : 0.92
+          state.baseAlpha[i] = isHubNode(nodes[i].kind) ? 0.94 : 0.74
           state.alpha[i] = state.baseAlpha[i]
         }
         for (let i = 0; i < count; i += 1) {
@@ -1530,6 +2053,28 @@ const NS = 'error-atlas'
         return best >= 0 ? state.nodes[best] : null
       }
 
+      /** Circle the camera around one node: its position becomes the orbit centre. */
+      function focusOn(node) {
+        if (!node || !state.indexById) return false
+        const index = state.indexById.get(node.id)
+        if (index === undefined) return false
+        state.focusTarget[0] = state.pos[index * 3]
+        state.focusTarget[1] = state.pos[index * 3 + 1]
+        state.focusTarget[2] = state.pos[index * 3 + 2]
+        // Close in until the picked node is clearly the subject: small nodes pull the
+        // camera quite close, hubs stay a little further out so their satellites fit.
+        const size = state.size[index] || 4
+        state.targetDist = Math.max(12, Math.min(state.targetDist, 26 + size * 1.7))
+        return true
+      }
+
+      function clearFocus() {
+                state.focusTarget[0] = 0
+        state.focusTarget[1] = 0
+        state.focusTarget[2] = 0
+        state.targetDist = state.fitDist || 96
+      }
+
       function resetView() {
         state.yaw = 0.55
         state.pitch = -0.14
@@ -1537,6 +2082,7 @@ const NS = 'error-atlas'
         state.warmup = 120
         state.simBudget = 0
         state.needsFit = true
+        clearFocus()
       }
 
       function relayout() {
@@ -1585,7 +2131,11 @@ const NS = 'error-atlas'
           /* ignore */
         }
         if (state.moved > 6) return
-        const node = hitTest(event.clientX, event.clientY)
+                const node = hitTest(event.clientX, event.clientY)
+        // Where you click is what you orbit: the picked node becomes the camera centre,
+        // and a click on empty space returns the camera to the middle of the cloud.
+        if (node) focusOn(node)
+        else clearFocus()
         if (handlers && typeof handlers.onPick === 'function') handlers.onPick(node)
       }
 
@@ -1604,8 +2154,8 @@ const NS = 'error-atlas'
 
       function onWheel(event) {
         event.preventDefault()
-        const factor = Math.exp((event.deltaY || 0) * 0.0012)
-        state.targetDist = Math.max(28, Math.min(340, state.targetDist * factor))
+        const factor = Math.exp((event.deltaY || 0) * 0.0021)
+        state.targetDist = Math.max(12, Math.min(420, state.targetDist * factor))
       }
 
       function onContextMenu(event) {
@@ -1632,10 +2182,43 @@ const NS = 'error-atlas'
         setQuery,
         setLabels,
         hitTest,
-        resetView,
+                resetView,
+        focusOn,
+        clearFocus,
         relayout,
         // Test hook only: lets a headless harness inspect the live render state.
         __state: () => state,
+                setScale(value) {
+          state.scale = Math.max(0.08, Math.min(3, Number(value) || 1))
+        },
+
+        setHalo(value) {
+          state.halo = Math.max(0, Math.min(4, Number(value) || 0))
+        },
+
+        setFlowScale(value) {
+          state.flowScale = Math.max(0.2, Math.min(4, Number(value) || 1))
+        },
+
+        setSpread(value) {
+          state.spread = Math.max(0.35, Math.min(2.4, Number(value) || 1))
+        },
+
+        setFilters(nodeKinds, linkRoles) {
+          state.hiddenKinds = new Set(Array.isArray(nodeKinds) ? nodeKinds : [])
+          state.hiddenLinks = new Set(Array.isArray(linkRoles) ? linkRoles : [])
+          state.alphaDirty = true
+          const base = state.linkBaseAlpha
+          if (base && state.linkAlpha) {
+            for (let i = 0; i < state.linkRoles.length; i += 1) {
+              const off = state.hiddenLinks.has(state.linkRoles[i]) ? 0 : 1
+              state.linkAlpha[i * 2] = base[i * 2] * off
+              state.linkAlpha[i * 2 + 1] = base[i * 2 + 1] * off
+            }
+            uploadLinks()
+          }
+        },
+
         setSpin(value) {
           const next = Number(value)
           if (!Number.isFinite(next)) return
@@ -1734,6 +2317,41 @@ const NS = 'error-atlas'
 .dshea-stat-label { font-size: 9px; letter-spacing: 0.16em; color: rgba(236, 238, 243, 0.42); text-transform: uppercase; }
 .dshea-spacer { flex: 1 1 auto; }
 .dshea-actions { display: flex; align-items: center; gap: 7px; }
+.dshea-colors { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border: 1px solid rgba(255, 122, 132, 0.16); border-radius: 999px; }
+.dshea-colors-label { font: 600 8px/1 ui-monospace, monospace; letter-spacing: 0.14em; color: var(--dsw-alias-label-tertiary, #8a8f98); margin-right: 2px; }
+.dshea-colors-count { font: 600 8px/1 ui-monospace, monospace; color: rgba(255, 255, 255, 0.32); margin-right: 2px; }
+.dshea-chip {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border: 1px solid var(--chip);
+  border-radius: 50%;
+  background: transparent;
+  opacity: 0.34;
+  cursor: pointer;
+  transition: opacity 120ms ease, box-shadow 120ms ease;
+}
+.dshea-chip.is-on { opacity: 1; background: var(--chip); border-color: var(--chip); box-shadow: 0 0 6px var(--chip); }
+.dshea-chip:not(.is-on) { border-style: dashed; opacity: 0.28; }
+.dshea-chip:hover { opacity: 0.85; }
+.dshea-style {
+  display: none;
+  position: absolute;
+  top: 52px;
+  right: 14px;
+  z-index: 6;
+  flex-direction: column;
+  gap: 9px;
+  min-width: 240px;
+  padding: 12px 14px;
+  border: 1px solid rgba(255, 122, 132, 0.28);
+  border-radius: 10px;
+  background: rgba(10, 8, 10, 0.94);
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
+}
+.dshea-style.is-open { display: flex; }
+.dshea-style .dshea-spin { justify-content: space-between; }
+.dshea-style .dshea-range { flex: 1 1 auto; margin: 0 8px; }
 .dshea-btn {
   appearance: none;
   border: 1px solid rgba(255, 255, 255, 0.14);
@@ -2092,8 +2710,57 @@ const NS = 'error-atlas'
       const [data, setData] = useState(() => withDev(null))
       const [failure, setFailure] = useState(null)
       const [selectedId, setSelectedId] = useState(null)
+      const [focusedLabel, setFocusedLabel] = useState(null)
       const [hoveredNode, setHoveredNode] = useState(null)
       const [showLog, setShowLog] = useState(true)
+      const [scale, setScale] = useState(() => {
+        try {
+          const raw = Number(window.localStorage.getItem('dsh-error-atlas-scale'))
+          return Number.isFinite(raw) && raw >= 10 && raw <= 300 ? raw : 100
+        } catch {
+          return 100
+        }
+      })
+      const [flowScale, setFlowScale] = useState(() => {
+        try {
+          const raw = Number(window.localStorage.getItem('dsh-error-atlas-flow'))
+          return Number.isFinite(raw) && raw >= 20 && raw <= 400 ? raw : 100
+        } catch {
+          return 100
+        }
+      })
+      const [spread, setSpread] = useState(() => {
+        try {
+          const raw = Number(window.localStorage.getItem('dsh-error-atlas-spread'))
+          return Number.isFinite(raw) && raw >= 35 && raw <= 240 ? raw : 100
+        } catch {
+          return 100
+        }
+      })
+      const readFilters = (key) => {
+        try {
+          const raw = window.localStorage.getItem(key)
+          const list = raw ? JSON.parse(raw) : []
+          return Array.isArray(list) ? list.filter((item) => typeof item === 'string') : []
+        } catch {
+          return []
+        }
+      }
+      const [offKinds, setOffKinds] = useState(() => readFilters('dsh-error-atlas-off-kinds'))
+      const [offLinks, setOffLinks] = useState(() => readFilters('dsh-error-atlas-off-links'))
+      const offKindsRef = useRef(offKinds)
+      const offLinksRef = useRef(offLinks)
+      offKindsRef.current = offKinds
+      offLinksRef.current = offLinks
+      const [styleOpen, setStyleOpen] = useState(false)
+      const [halo, setHalo] = useState(() => {
+        try {
+          const raw = Number(window.localStorage.getItem('dsh-error-atlas-halo'))
+          return Number.isFinite(raw) && raw >= 0 && raw <= 400 ? raw : 100
+        } catch {
+          return 100
+        }
+      })
       const [spin, setSpin] = useState(() => {
         try {
           const saved = Number(window.localStorage.getItem('dsh-error-atlas-spin'))
@@ -2217,10 +2884,11 @@ const NS = 'error-atlas'
         try {
           renderer = createRenderer(canvas, labelHost, {
             onHover: (node) => setHoveredNode(node || null),
-            onPick: (node) => {
+                  onPick: (node) => {
               const next = node ? node.id : null
               setSelectedId(next)
               setHoveredNode(node || null)
+              setFocusedLabel(node ? String(node.label || node.name || node.id).slice(0, 30) : null)
             },
             onOpen: (node) => {
               const id = sessionIdOf(node)
@@ -2271,6 +2939,11 @@ const NS = 'error-atlas'
       useEffect(() => {
         const renderer = rendererRef.current
         if (renderer) renderer.setSpin(spin / 100)
+          if (renderer) renderer.setScale(scale / 100)
+          if (renderer) renderer.setHalo(halo / 100)
+          if (renderer) renderer.setFlowScale(flowScale / 100)
+          if (renderer) renderer.setSpread(spread / 100)
+          if (renderer) renderer.setFilters(offKindsRef.current, offLinksRef.current)
       }, [spin])
 
       useEffect(() => {
@@ -2303,6 +2976,76 @@ const NS = 'error-atlas'
         setPaused(next)
       }, [])
 
+      const toggleKind = useCallback((kind) => {
+        const next = offKindsRef.current.includes(kind)
+          ? offKindsRef.current.filter((item) => item !== kind)
+          : offKindsRef.current.concat(kind)
+        setOffKinds(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-off-kinds', JSON.stringify(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setFilters(next, offLinksRef.current)
+      }, [])
+
+      const toggleLink = useCallback((role) => {
+        const next = offLinksRef.current.includes(role)
+          ? offLinksRef.current.filter((item) => item !== role)
+          : offLinksRef.current.concat(role)
+        setOffLinks(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-off-links', JSON.stringify(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setFilters(offKindsRef.current, next)
+      }, [])
+
+      const onSpread = useCallback((value) => {
+        const next = Math.max(35, Math.min(240, Number(value) || 100))
+        setSpread(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-spread', String(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setSpread(next / 100)
+      }, [])
+
+      const onFlowScale = useCallback((value) => {
+        const next = Math.max(20, Math.min(400, Number(value) || 100))
+        setFlowScale(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-flow', String(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setFlowScale(next / 100)
+      }, [])
+
+      const onHalo = useCallback((value) => {
+        const next = Math.max(0, Math.min(400, Number(value) || 0))
+        setHalo(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-halo', String(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setHalo(next / 100)
+      }, [])
+
+      const onScale = useCallback((value) => {
+        const next = Math.max(10, Math.min(300, Number(value) || 100))
+        setScale(next)
+        try {
+          window.localStorage.setItem('dsh-error-atlas-scale', String(next))
+        } catch {
+          /* storage is best effort */
+        }
+        if (rendererRef.current) rendererRef.current.setScale(next / 100)
+      }, [])
+
       const onSpin = useCallback((value) => {
         const next = Number(value)
         if (!Number.isFinite(next)) return
@@ -2460,6 +3203,25 @@ const NS = 'error-atlas'
 
       const rateLabel = paused ? '0.0°/s' : ((spin / 100) * SPIN_DEG_PER_SEC).toFixed(1) + '°/s'
 
+      const chipRow = (label, items, off, onToggle) =>
+        h(
+          'div',
+          { className: 'dshea-colors', title: label },
+          h('span', { className: 'dshea-colors-label' }, label),
+          h('span', { className: 'dshea-colors-count' }, items.length - off.length + '/' + items.length),
+          items.map(([value, color, name]) =>
+            h('button', {
+              key: value,
+              type: 'button',
+              className: 'dshea-chip' + (off.includes(value) ? '' : ' is-on'),
+              style: { '--chip': color },
+              title: (off.includes(value) ? '✕ ' : '✓ ') + (name || value),
+              onClick: () => onToggle(value),
+              'aria-pressed': off.includes(value) ? 'false' : 'true',
+            }),
+          ),
+        )
+
       const header = h(
         'div',
         { className: 'dshea-header' },
@@ -2486,6 +3248,33 @@ const NS = 'error-atlas'
         h(
           'div',
           { className: 'dshea-actions' },
+          chipRow(
+            COPY.nodeColors,
+            [
+              ['agent', '#ff4453', 'AGENT'],
+              ['tool', '#ffb570', 'TOOL'],
+              ['exit', '#ffd68f', 'EXIT'],
+              ['config', '#d89eff', 'CONFIG'],
+              ['sessionhub', '#ffd9e4', 'SESSION'],
+              ['project', '#7fd4ff', 'PROJECT'],
+              ['dev', '#7ff3e0', 'DEV'],
+              ['retro', '#c7a4ff', 'RETRO'],
+            ],
+            offKinds,
+            toggleKind,
+          ),
+          chipRow(
+            COPY.linkColors,
+            [
+              ['core', '#b4514f', COPY.linkCore],
+              ['hub', '#c98b62', COPY.linkHub],
+              ['project', '#7fd4ff', COPY.linkProject],
+              ['lesson', '#c7a4ff', COPY.linkLesson],
+              ['stale', '#ff5b4d', COPY.linkStale],
+            ],
+            offLinks,
+            toggleLink,
+          ),
           h('button', { type: 'button', className: 'dshea-btn', onClick: onRefresh, disabled: busy }, COPY.refresh),
           h('input', {
             type: 'search',
@@ -2515,24 +3304,14 @@ const NS = 'error-atlas'
             paused ? COPY.resume : COPY.pause,
           ),
           h(
-            'label',
-            { className: 'dshea-spin' },
-            h('span', { className: 'dshea-spin-label' }, COPY.spin),
-            h('input', {
-              type: 'range',
-              min: 0,
-              max: 100,
-              step: 1,
-              value: spin,
-              className: 'dshea-range',
-              // Both handlers on purpose: `onChange` is React's normal range
-              // path, `onInput` keeps the control alive even if an intermediate
-              // layer swallows the synthetic change event.
-              onChange: (event) => onSpin(event.target.value),
-              onInput: (event) => onSpin(event.target.value),
-            }),
-            h('span', { className: 'dshea-spin-value' }, Math.round(spin) + '%'),
-            h('span', { className: 'dshea-spin-rate' }, rateLabel),
+            'button',
+            {
+              type: 'button',
+              className: 'dshea-btn dshea-style-btn' + (styleOpen ? ' is-on' : ''),
+              onClick: () => setStyleOpen((open) => !open),
+              'aria-expanded': styleOpen ? 'true' : 'false',
+            },
+            COPY.style,
           ),
           h(
             'label',
@@ -2567,6 +3346,95 @@ const NS = 'error-atlas'
         ),
       )
 
+      const stylePanel = h(
+        'div',
+        { className: styleOpen ? 'dshea-style is-open' : 'dshea-style' },
+                    h(
+              'label',
+              { className: 'dshea-spin' },
+              h('span', { className: 'dshea-spin-label' }, COPY.spin),
+              h('input', {
+                type: 'range',
+                min: 0,
+                max: 100,
+                step: 1,
+                value: spin,
+                className: 'dshea-range',
+                // Both handlers on purpose: `onChange` is React's normal range
+                // path, `onInput` keeps the control alive even if an intermediate
+                // layer swallows the synthetic change event.
+                onChange: (event) => onSpin(event.target.value),
+                onInput: (event) => onSpin(event.target.value),
+              }),
+              h('span', { className: 'dshea-spin-value' }, Math.round(spin) + '%'),
+              h('span', { className: 'dshea-spin-rate' }, rateLabel),
+            ),
+            h(
+              'label',
+              { className: 'dshea-spin dshea-size' },
+              h('span', { className: 'dshea-spin-label' }, COPY.scale),
+              h('input', {
+                type: 'range',
+                min: 10,
+                max: 300,
+                step: 5,
+                value: scale,
+                className: 'dshea-range',
+                onChange: (event) => onScale(event.target.value),
+                onInput: (event) => onScale(event.target.value),
+              }),
+              h('span', { className: 'dshea-spin-value' }, Math.round(scale) + '%'),
+            ),
+            h(
+              'label',
+              { className: 'dshea-spin dshea-halo' },
+              h('span', { className: 'dshea-spin-label' }, COPY.halo),
+              h('input', {
+                type: 'range',
+                min: 0,
+                max: 400,
+                step: 5,
+                value: halo,
+                className: 'dshea-range',
+                onChange: (event) => onHalo(event.target.value),
+                onInput: (event) => onHalo(event.target.value),
+              }),
+              h('span', { className: 'dshea-spin-value' }, Math.round(halo) + '%'),
+            ),
+        h(
+          'label',
+          { className: 'dshea-spin dshea-spread' },
+          h('span', { className: 'dshea-spin-label' }, COPY.spread),
+          h('input', {
+            type: 'range',
+            min: 35,
+            max: 240,
+            step: 5,
+            value: spread,
+            className: 'dshea-range',
+            onChange: (event) => onSpread(event.target.value),
+            onInput: (event) => onSpread(event.target.value),
+          }),
+          h('span', { className: 'dshea-spin-value' }, Math.round(spread) + '%'),
+        ),
+        h(
+          'label',
+          { className: 'dshea-spin dshea-flow' },
+          h('span', { className: 'dshea-spin-label' }, COPY.flow),
+          h('input', {
+            type: 'range',
+            min: 20,
+            max: 400,
+            step: 5,
+            value: flowScale,
+            className: 'dshea-range',
+            onChange: (event) => onFlowScale(event.target.value),
+            onInput: (event) => onFlowScale(event.target.value),
+          }),
+          h('span', { className: 'dshea-spin-value' }, Math.round(flowScale) + '%'),
+        ),
+      )
+
       const legend = h(
         'div',
         { className: 'dshea-legend' },
@@ -2584,6 +3452,7 @@ const NS = 'error-atlas'
       // The hint carries the two honesty notes: how much of the graph is truncated and
       // how many signatures the noise rules are hiding, plus the navigation gesture.
       const hintBits = []
+      if (focusedLabel) hintBits.push(fill(COPY.focused, { name: focusedLabel }))
       if (stats && stats.truncated > 0) {
         hintBits.push(fill(COPY.truncatedHint, { shown: stats.shown, cut: stats.truncated }))
       }
@@ -2784,7 +3653,7 @@ const NS = 'error-atlas'
         switchButton(COPY.memoryInject, injectOn, { inject: !injectOn }),
       )
 
-      return h('div', { className: 'dshea-root' }, header, stage, trendRow, memoryRow, boardView, logStrip)
+      return h('div', { className: 'dshea-root' }, header, stylePanel, stage, trendRow, memoryRow, boardView, logStrip)
     }
 
     function statCell(label, value) {