tink-harness 1.9.6 → 1.9.8

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "tink",
   "description": "A small harness layer for Claude Code and Codex.",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "author": {
     "name": "dotori"
   }

package/CHANGELOG.md

@@ -6,6 +6,28 @@ All notable changes to Tink are tracked here.
 
 No unreleased changes yet.
 
+## [1.9.8] - 2026-06-11
+
+### Added
+
+- Galaxy-styled harness map background: a slowly rotating 4-arm spiral of 760 particles (pink-to-cyan, screen-blended), 7 colored nebula glows, a breathing core glow, and a deeper space gradient — inspired by a Three.js galaxy reference while keeping the SVG map fully interactive.
+- Neural signal pulses: glowing dots travel along every edge from source to target (3.2-7.4s, staggered), so connections read like firing synapses.
+
+### Changed
+
+- Signal pulses follow the map state: they hide with core mode/filters, dim in focus mode, and stay bright only on edges related to the selected node. Clicking the galaxy background clears the selection. prefers-reduced-motion disables rotation and pulses.
+
+## [1.9.7] - 2026-06-10
+
+### Added
+
+- The harness map now looks like a planetary system: usage/evidence/score satellites orbit their harness slowly (28-63s per revolution, alternating directions) along dashed orbit rings, top harnesses get a Saturn-style ring, and a starfield with twinkling stars sits behind the graph.
+- Selecting a node now dims and blurs everything unrelated (focus mode); clicking the background clears the selection and restores the detail panel.
+
+### Fixed
+
+- Dragging the map no longer triggers text selection on labels and captions (user-select disabled on the map panel).
+
 ## [1.9.6] - 2026-06-10
 
 ### Added

package/VERSIONING.md

@@ -1,6 +1,6 @@
 # Versioning
 
-Current version: `1.9.6`
+Current version: `1.9.8`
 
 Tink follows semver from `1.0.0` onward.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tink-harness",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "description": "Self-growing harnesses for Claude Code and Codex.",
   "license": "MIT",
   "type": "module",

package/templates/tink/tools/render-harness-health-report.mjs

@@ -618,8 +618,7 @@ function buildGraphLayout(summary) {
       glow: score >= 50 || radius >= 20
     };
   });
-  const augmented = [...positioned];
-  const virtualEdges = [];
+  const orbitSystems = [];
   for (const node of positioned.filter((item) => item.type === 'harness')) {
     const harnessId = shortLabel(node.id);
     const harness = harnessById.get(harnessId);
@@ -627,38 +626,25 @@ function buildGraphLayout(summary) {
     const uses = Number(harness.signals?.uses || 0);
     const evidenceCount = (harness.evidence_handles || []).length;
     const factorCount = (harness.candidate_score?.factors || []).length;
-    const satellites = [
-      ...Array.from({ length: Math.min(14, Math.ceil(uses / 2)) }, (_, index) => ({ kind: 'signal', index, total: Math.min(14, Math.ceil(uses / 2)), radius: 2.8 + Math.min(3.5, uses / 12) })),
-      ...Array.from({ length: Math.min(6, evidenceCount) }, (_, index) => ({ kind: 'evidence', index, total: Math.min(6, evidenceCount), radius: 3.5 })),
-      ...Array.from({ length: Math.min(5, factorCount) }, (_, index) => ({ kind: 'score', index, total: Math.min(5, factorCount), radius: 3.8 }))
-    ];
-    satellites.forEach((satellite, offset) => {
-      const seed = hashString(`${node.id}:${satellite.kind}:${satellite.index}`);
-      const angle = ((seed % 6283) / 1000) + offset * 0.45;
-      const distance = node.radius + 24 + (seed % 42);
-      const child = {
-        id: `${satellite.kind}:${harnessId}:${satellite.index}`,
-        type: satellite.kind,
-        label: satellite.kind,
-        weight: 1,
-        x: clamp(node.x + Math.cos(angle) * distance, 25, 1065),
-        y: clamp(node.y + Math.sin(angle) * distance, 25, 655),
-        radius: satellite.radius,
-        color: TYPE_COLORS[satellite.kind] || TYPE_COLORS.unknown,
-        glow: satellite.kind === 'score'
-      };
-      augmented.push(child);
-      virtualEdges.push({
-        source: node.id,
-        target: child.id,
-        type: satellite.kind,
-        count: 1
-      });
-    });
+    const seed = hashString(node.id);
+    const rings = [
+      { kind: 'signal', count: Math.min(10, Math.ceil(uses / 2)), distance: node.radius + 18, dotRadius: 2.4 },
+      { kind: 'evidence', count: Math.min(6, evidenceCount), distance: node.radius + 29, dotRadius: 2.9 },
+      { kind: 'score', count: Math.min(5, factorCount), distance: node.radius + 40, dotRadius: 3.2 }
+    ]
+      .filter((ring) => ring.count > 0)
+      .map((ring, ringIndex) => ({
+        ...ring,
+        duration: (28 + ((seed >> (ringIndex * 3)) % 36)).toFixed(0),
+        reverse: ringIndex % 2 === 1,
+        phase: ((seed >> (ringIndex * 5)) % 628) / 100
+      }));
+    if (rings.length) {
+      orbitSystems.push({ parentId: node.id, x: node.x, y: node.y, rings });
+    }
   }
-  const byId = new Map(augmented.map((node) => [node.id, node]));
-  const filteredEdges = getRenderableEdges(edges);
-  const drawnEdges = [...filteredEdges, ...virtualEdges]
+  const byId = new Map(positioned.map((node) => [node.id, node]));
+  const drawnEdges = getRenderableEdges(edges)
     .map((edge) => ({
       ...edge,
       sourceNode: byId.get(edge.source),
@@ -667,15 +653,70 @@ function buildGraphLayout(summary) {
     .filter((edge) => edge.sourceNode && edge.targetNode)
     .slice(0, 240);
 
-  return { nodes: augmented, edges: drawnEdges };
+  return { nodes: positioned, edges: drawnEdges, orbitSystems };
 }
 
 function renderGraphCanvas(summary, copy) {
-  const { nodes, edges } = buildGraphLayout(summary);
+  const { nodes, edges, orbitSystems } = buildGraphLayout(summary);
   const strongest = nodes
     .filter((node) => node.type === 'harness')
     .sort((a, b) => Number(b.weight || 0) - Number(a.weight || 0))
     .slice(0, 8);
+  const stars = Array.from({ length: 110 }, (_, index) => {
+    const seed = hashString(`star:${index}`);
+    return {
+      x: seed % 1090,
+      y: (seed >> 4) % 680,
+      r: (0.5 + ((seed >> 8) % 12) / 10).toFixed(1),
+      opacity: (0.1 + ((seed >> 6) % 45) / 100).toFixed(2),
+      twinkle: index % 4 === 0,
+      delay: seed % 5000
+    };
+  });
+  const GALAXY = { count: 760, arms: 4, radius: 360, spin: 2.3, power: 2.4, cx: 545, cy: 340, flatten: 0.6 };
+  const lerpChannel = (from, to, t) => Math.round(from + (to - from) * t);
+  const galaxyDots = Array.from({ length: GALAXY.count }, (_, index) => {
+    const s1 = (hashString(`gal:${index}:a`) % 10000) / 10000;
+    const s2 = (hashString(`gal:${index}:b`) % 10000) / 10000;
+    const s3 = (hashString(`gal:${index}:c`) % 10000) / 10000;
+    const s4 = (hashString(`gal:${index}:d`) % 10000) / 10000;
+    const radius = Math.pow(s1, GALAXY.power) * GALAXY.radius;
+    const t = radius / GALAXY.radius;
+    const branchAngle = ((index % GALAXY.arms) / GALAXY.arms) * Math.PI * 2;
+    const spinAngle = t * GALAXY.spin;
+    const randomX = (s2 - 0.5) * 0.42 * radius;
+    const randomY = (s3 - 0.5) * 0.42 * radius;
+    const totalAngle = branchAngle + spinAngle;
+    // inside #FF66FF -> outside #66FFFF, like the reference galaxy
+    const color = `rgb(${lerpChannel(255, 102, t)}, ${lerpChannel(102, 255, t)}, 255)`;
+    return {
+      x: (GALAXY.cx + (Math.cos(totalAngle) * radius + randomX)).toFixed(1),
+      y: (GALAXY.cy + (Math.sin(totalAngle) * radius + randomY) * GALAXY.flatten).toFixed(1),
+      r: (0.5 + s4 * 1.1).toFixed(1),
+      color,
+      opacity: (0.12 + s4 * 0.34).toFixed(2)
+    };
+  });
+  const nebulae = Array.from({ length: 7 }, (_, index) => {
+    const seed = hashString(`nebula:${index}`);
+    return {
+      id: index,
+      hue: seed % 360,
+      x: 80 + (seed % 930),
+      y: 60 + ((seed >> 5) % 560),
+      r: 70 + ((seed >> 3) % 150),
+      opacity: (0.05 + ((seed >> 7) % 8) / 100).toFixed(2)
+    };
+  });
+  const pulses = edges.slice(0, 120).map((edge, index) => {
+    const seed = hashString(`pulse:${edge.source}:${edge.target}:${index}`);
+    return {
+      path: `M ${edge.sourceNode.x.toFixed(1)},${edge.sourceNode.y.toFixed(1)} L ${edge.targetNode.x.toFixed(1)},${edge.targetNode.y.toFixed(1)}`,
+      dur: (3.2 + (seed % 42) / 10).toFixed(1),
+      begin: -((seed >> 4) % 7000),
+      index
+    };
+  });
   const mapTitle = copy.knowledgeGraph || copy.harnessMap || 'Harness map';
   const mapEyebrow = copy.harnessMap && copy.harnessMap !== mapTitle ? copy.harnessMap : '';
   return `
@@ -700,9 +741,26 @@ function renderGraphCanvas(summary, copy) {
       </div>
       <svg class="graph-canvas" viewBox="0 0 1090 680" role="img" aria-label="Harness health graph">
         <defs>
-          <radialGradient id="graph-bg-grad" cx="50%" cy="42%" r="75%">
-            <stop offset="0%" style="stop-color: #16181D"/>
-            <stop offset="100%" style="stop-color: #0C0D10"/>
+          <radialGradient id="graph-bg-grad" cx="50%" cy="42%" r="80%">
+            <stop offset="0%" style="stop-color: #0B0E1A"/>
+            <stop offset="60%" style="stop-color: #05060F"/>
+            <stop offset="100%" style="stop-color: #000005"/>
+          </radialGradient>
+          <radialGradient id="galaxy-core-grad" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" style="stop-color: #FFFFFF; stop-opacity: 0.55"/>
+            <stop offset="35%" style="stop-color: #C9B8FF; stop-opacity: 0.18"/>
+            <stop offset="100%" style="stop-color: #C9B8FF; stop-opacity: 0"/>
+          </radialGradient>
+          ${nebulae.map((nebula) => `
+            <radialGradient id="nebula-grad-${nebula.id}" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" style="stop-color: hsl(${nebula.hue}, 80%, 60%); stop-opacity: 0.6"/>
+              <stop offset="100%" style="stop-color: hsl(${nebula.hue}, 80%, 60%); stop-opacity: 0"/>
+            </radialGradient>
+          `).join('')}
+          <radialGradient id="pulse-grad" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" style="stop-color: #FFFFFF; stop-opacity: 1"/>
+            <stop offset="45%" style="stop-color: #9DC4FF; stop-opacity: 0.85"/>
+            <stop offset="100%" style="stop-color: #5B8DEF; stop-opacity: 0"/>
           </radialGradient>
           ${Object.entries(TYPE_COLORS).map(([type, color]) => `
             <radialGradient id="node-grad-${escapeAttr(type)}" cx="32%" cy="28%" r="78%">
@@ -713,6 +771,20 @@ function renderGraphCanvas(summary, copy) {
           `).join('')}
         </defs>
         <rect class="graph-bg" width="1090" height="680" fill="url(#graph-bg-grad)"/>
+        <g class="starfield" aria-hidden="true">
+          ${stars.map((star) => `
+            <circle cx="${star.x}" cy="${star.y}" r="${star.r}" fill="#FFFFFF" opacity="${star.opacity}"${star.twinkle ? ` class="star-twinkle" style="--twinkle-delay: ${star.delay}ms"` : ''}/>
+          `).join('')}
+        </g>
+        <g class="galaxy-layer" aria-hidden="true">
+          ${nebulae.map((nebula) => `
+            <circle class="nebula" cx="${nebula.x}" cy="${nebula.y}" r="${nebula.r}" fill="url(#nebula-grad-${nebula.id})" opacity="${nebula.opacity}"/>
+          `).join('')}
+          <g class="galaxy-spiral">
+            ${galaxyDots.map((dot) => `<circle cx="${dot.x}" cy="${dot.y}" r="${dot.r}" fill="${dot.color}" opacity="${dot.opacity}"/>`).join('')}
+          </g>
+          <circle class="galaxy-core" cx="${GALAXY.cx}" cy="${GALAXY.cy}" r="120" fill="url(#galaxy-core-grad)"/>
+        </g>
         <g id="graph-viewport">
         <g class="edges">
         ${edges.map((edge, index) => `
@@ -731,6 +803,32 @@ function renderGraphCanvas(summary, copy) {
             />
           `).join('')}
         </g>
+        <g class="pulses" aria-hidden="true">
+          ${pulses.map((pulse) => `
+            <g class="pulse-wrap" data-pulse-index="${pulse.index}">
+              <circle class="edge-pulse" r="2.6" fill="url(#pulse-grad)" opacity="0">
+                <animateMotion dur="${pulse.dur}s" begin="${pulse.begin}ms" repeatCount="indefinite" path="${escapeAttr(pulse.path)}"/>
+                <animate attributeName="opacity" values="0;0.95;0.95;0" keyTimes="0;0.12;0.85;1" dur="${pulse.dur}s" begin="${pulse.begin}ms" repeatCount="indefinite"/>
+              </circle>
+            </g>
+          `).join('')}
+        </g>
+        <g class="orbits" aria-hidden="true">
+          ${orbitSystems.map((system) => `
+            <g class="orbit-system" data-parent="${escapeAttr(system.parentId)}" transform="translate(${system.x.toFixed(1)} ${system.y.toFixed(1)})">
+              ${system.rings.map((ring) => {
+                const dots = Array.from({ length: ring.count }, (_, dotIndex) => {
+                  const angle = ring.phase + (dotIndex * Math.PI * 2) / ring.count;
+                  return `<circle class="orbit-dot" cx="${(Math.cos(angle) * ring.distance).toFixed(1)}" cy="${(Math.sin(angle) * ring.distance).toFixed(1)}" r="${ring.dotRadius}" fill="url(#node-grad-${escapeAttr(ring.kind)})"/>`;
+                }).join('');
+                return `
+                  <circle class="orbit-ring" cx="0" cy="0" r="${ring.distance.toFixed(1)}"/>
+                  <g class="orbit-spin${ring.reverse ? ' is-reverse' : ''}" style="--orbit-dur: ${ring.duration}s">${dots}</g>
+                `;
+              }).join('')}
+            </g>
+          `).join('')}
+        </g>
         <g class="nodes">
           ${nodes.map((node, index) => {
             const seed = hashString(node.id);
@@ -740,6 +838,9 @@ function renderGraphCanvas(summary, copy) {
             const floatY = (((seed >> 3) % 7) - 3).toFixed(1);
             return `
             <g class="node-float" style="--float-dur: ${floatDuration}s; --float-delay: ${floatDelay}ms; --float-x: ${floatX}px; --float-y: ${floatY}px">
+            ${node.type === 'harness' && node.radius >= 15 ? `
+              <ellipse class="planet-ring" cx="${node.x.toFixed(1)}" cy="${node.y.toFixed(1)}" rx="${(node.radius * 1.75).toFixed(1)}" ry="${(node.radius * 0.5).toFixed(1)}" transform="rotate(-16 ${node.x.toFixed(1)} ${node.y.toFixed(1)})"/>
+            ` : ''}
             <circle
               class="graph-node ${node.type === 'harness' ? 'is-interactive' : ''}"
               style="--enter-delay: ${Math.min(index * 9, 1100)}ms"
@@ -1358,14 +1459,42 @@ function renderScript(harnesses, copy) {
       const setFilterStatus = (value) => {
         if (filterStatus) filterStatus.textContent = value;
       };
+      const graphCanvas = document.querySelector('.graph-canvas');
+      const orbitSystems = Array.from(document.querySelectorAll('.orbit-system'));
+      const pulseWraps = Array.from(document.querySelectorAll('.pulse-wrap'));
+      const defaultSelectedPanel = selectedPanel ? selectedPanel.innerHTML : '';
+      function syncPulses() {
+        const hasSelection = graphCanvas && graphCanvas.classList.contains('has-selection');
+        pulseWraps.forEach((wrap) => {
+          const edge = edges[Number(wrap.dataset.pulseIndex)];
+          if (!edge) return;
+          const hidden = edge.classList.contains('is-hidden') || edge.classList.contains('is-filtered-out');
+          wrap.classList.toggle('is-hidden', hidden);
+          wrap.classList.toggle('is-dimmed', Boolean(hasSelection && !edge.classList.contains('is-related')));
+        });
+      }
+      function syncOrbits() {
+        const hasSelection = graphCanvas && graphCanvas.classList.contains('has-selection');
+        orbitSystems.forEach((system) => {
+          const parent = nodeById(system.dataset.parent);
+          const hidden = !parent || parent.classList.contains('is-hidden') || parent.classList.contains('is-filtered-out');
+          system.classList.toggle('is-hidden', hidden);
+          const related = parent && (parent.classList.contains('is-selected') || parent.classList.contains('is-related'));
+          system.classList.toggle('is-dimmed', Boolean(hasSelection && !related));
+        });
+        syncPulses();
+      }
       function clearSelection() {
         nodes.forEach((item) => item.classList.remove('is-selected', 'is-related'));
         edges.forEach((item) => item.classList.remove('is-related'));
         cards.forEach((item) => item.classList.remove('is-selected'));
+        if (graphCanvas) graphCanvas.classList.remove('has-selection');
+        syncOrbits();
       }
       function selectNode(node) {
         clearSelection();
         node.classList.add('is-selected');
+        if (graphCanvas) graphCanvas.classList.add('has-selection');
         const id = node.dataset.nodeId;
         const item = byHarnessId.get(id);
         edges.forEach((edge) => {
@@ -1393,6 +1522,7 @@ function renderScript(harnesses, copy) {
         } else if (selectedPanel) {
           selectedPanel.innerHTML = '<p class="eyebrow">' + esc(copy.selected) + '</p><h2>' + esc(node.dataset.nodeLabel) + '</h2><p>' + esc(id) + '</p><dl><div><dt>' + esc(copy.type) + '</dt><dd>' + esc(displayValue(node.dataset.nodeType)) + '</dd></div><div><dt>' + esc(copy.weight) + '</dt><dd>' + esc(node.dataset.nodeWeight) + '</dd></div></dl>';
         }
+        syncOrbits();
       }
       function selectHarness(id) {
         const node = nodeById('harness:' + id);
@@ -1410,7 +1540,9 @@ function renderScript(harnesses, copy) {
         nodes.forEach((node) => node.classList.toggle('is-hidden', mode === 'core' && node.dataset.core !== 'true'));
         const visibleIds = new Set(nodes.filter((node) => !node.classList.contains('is-hidden')).map((node) => node.dataset.nodeId));
         edges.forEach((edge) => edge.classList.toggle('is-hidden', mode === 'core' && (!visibleIds.has(edge.dataset.source) || !visibleIds.has(edge.dataset.target))));
+        document.querySelectorAll('.orbit-system').forEach((system) => system.classList.toggle('is-mode-hidden', mode === 'core'));
         setStatus(mode === 'core' ? copy.coreMode : copy.showingAll);
+        syncOrbits();
       }
       function filterRecommendation(value, button) {
         const alreadyActive = button.classList.contains('active-filter');
@@ -1424,6 +1556,7 @@ function renderScript(harnesses, copy) {
           cards.forEach((card) => card.classList.remove('is-filtered-out'));
           setStatus(copy.showingAll);
           setFilterStatus(copy.showingAll);
+          syncOrbits();
           return;
         }
         button.classList.add('active-filter');
@@ -1438,6 +1571,7 @@ function renderScript(harnesses, copy) {
         const label = recLabelByFilter[value] || value;
         setStatus(copy.filteredTo + ': ' + label);
         setFilterStatus(copy.filteredTo + ': ' + label);
+        syncOrbits();
       }
       interactiveNodes.forEach((node) => {
         node.addEventListener('click', () => selectNode(node));
@@ -1520,12 +1654,24 @@ function renderScript(harnesses, copy) {
           panState.y = event.clientY;
           applyView();
         });
+        let suppressClick = false;
         const endPan = () => {
+          suppressClick = Boolean(panState && panState.moved);
           panState = null;
           graphSvg.classList.remove('is-panning');
         };
         graphSvg.addEventListener('pointerup', endPan);
         graphSvg.addEventListener('pointercancel', endPan);
+        graphSvg.addEventListener('click', (event) => {
+          if (suppressClick) {
+            suppressClick = false;
+            return;
+          }
+          if (event.target.classList.contains('graph-bg') || event.target.closest('.starfield') || event.target.closest('.galaxy-layer')) {
+            clearSelection();
+            if (selectedPanel && defaultSelectedPanel) selectedPanel.innerHTML = defaultSelectedPanel;
+          }
+        });
         graphSvg.addEventListener('dblclick', (event) => {
           event.preventDefault();
           resetView();
@@ -2193,6 +2339,103 @@ function renderStyles() {
       transition: opacity 160ms ease, transform 160ms ease;
     }
 
+    .map-panel,
+    .graph-canvas,
+    .graph-canvas text {
+      user-select: none;
+      -webkit-user-select: none;
+      -webkit-user-drag: none;
+    }
+
+    .star-twinkle {
+      animation: star-twinkle 3.4s ease-in-out var(--twinkle-delay, 0ms) infinite alternate;
+    }
+
+    @keyframes star-twinkle {
+      from { opacity: 0.08; }
+      to { opacity: 0.6; }
+    }
+
+    .galaxy-layer { pointer-events: none; }
+
+    .nebula { mix-blend-mode: screen; }
+
+    .galaxy-spiral {
+      transform-origin: 545px 340px;
+      transform-box: view-box;
+      animation: galaxy-rotate 420s linear infinite;
+      mix-blend-mode: screen;
+    }
+
+    @keyframes galaxy-rotate {
+      to { transform: rotate(360deg); }
+    }
+
+    .galaxy-core {
+      mix-blend-mode: screen;
+      animation: core-breathe 9s ease-in-out infinite alternate;
+    }
+
+    @keyframes core-breathe {
+      from { opacity: 0.5; }
+      to { opacity: 0.9; }
+    }
+
+    .pulse-wrap { transition: opacity 260ms ease; }
+    .pulse-wrap.is-hidden { opacity: 0; }
+    .pulse-wrap.is-dimmed { opacity: 0.08; }
+
+    .edge-pulse {
+      filter: drop-shadow(0 0 4px rgba(157, 196, 255, 0.9));
+    }
+
+    .orbit-ring {
+      fill: none;
+      stroke: var(--text-secondary);
+      stroke-opacity: 0.14;
+      stroke-width: 0.7;
+      stroke-dasharray: 2 5;
+    }
+
+    .orbit-spin {
+      animation: orbit-rotate var(--orbit-dur, 40s) linear infinite;
+    }
+
+    .orbit-spin.is-reverse { animation-direction: reverse; }
+
+    @keyframes orbit-rotate {
+      to { transform: rotate(360deg); }
+    }
+
+    .orbit-dot { opacity: 0.85; }
+
+    .orbit-system {
+      transition: opacity 260ms ease;
+    }
+
+    .orbit-system.is-hidden,
+    .orbit-system.is-mode-hidden { opacity: 0; pointer-events: none; }
+    .orbit-system.is-dimmed { opacity: 0.08; }
+
+    .planet-ring {
+      fill: none;
+      stroke: var(--text-secondary);
+      stroke-opacity: 0.4;
+      stroke-width: 1.4;
+      pointer-events: none;
+    }
+
+    .graph-canvas.has-selection .graph-node:not(.is-selected):not(.is-related) {
+      opacity: 0.14;
+      filter: blur(1.2px);
+    }
+
+    .graph-canvas.has-selection .graph-edge:not(.is-related) { opacity: 0.05; }
+
+    .graph-canvas.has-selection .planet-ring { stroke-opacity: 0.1; }
+
+    .graph-canvas.has-selection .labels text { opacity: 0.18; transition: opacity 220ms ease; }
+
     .map-controls-row {
       display: flex;
       gap: var(--space-2);
@@ -2300,8 +2543,13 @@ function renderStyles() {
       .graph-node,
       .graph-edge,
       .graph-canvas text,
+      .orbit-spin,
+      .star-twinkle,
+      .galaxy-spiral,
+      .galaxy-core,
       .page.is-active { animation: none; }
       .graph-node { transition: none; }
+      .pulses { display: none; }
     }
 
     .map-caption {