Name the neighbours, from inside the system

A system view could say everything about the star it was inside and nothing
about where that star was. The four nearest catalogue stars are now named
around the edge of it, each with its distance, each a button that flies there
— so a chain of neighbours can be walked without pulling back out to the field
between hops.

These are bearings, not sky positions, and that is the one deliberate
compromise here. A true direction was tried first and does not work: at this
field of view the visible cone is about 30 degrees, so on average one
neighbour in fifteen falls inside the frame — measured, not guessed, at one
label of four in Sol and none at all after a small orbit. What survives the
ring is the half of the direction a viewer can act on, which way to turn to
face it, and the ring reads as instrument rather than as scene because it sits
at a fixed radius. Real distance was never an option: Proxima is 268 000 AU
from Sol, thirteen far planes out, so the distance goes on the type line.

Proximity is answered by a new pure module rather than by a scan. A uniform
grid over the catalogue answers both "the k nearest to this star" and "every
star within n parsecs", the second being what the jump-link graph in the next
PR is built from — one scan per node, and the quadratic would show. Its spec
pins the grid against a brute-force sweep of a pseudo-random cloud, because a
spatial index is an optimisation and never a different answer.

Where the ring meets the HUD, the HUD wins: placement is given the boxes the
readout, the strip and the object card occupy, and slides a name along the
ring until it clears them, or drops it rather than print it half hidden. That
rule is a pure function with its own spec.

Four defects found while verifying this, three of them older than it:

The dock's flex column was pointer-events-auto and as wide as its strip, so
an invisible band above the strip swallowed every click in it — including,
but not only, a neighbour's. The column is transparent now and each surface
opts back in.

The ring was sized against the frame's height alone, which on a phone held
upright put it a viewport and a half wide: no neighbour was reachable on any
portrait screen. It is sized against the shorter side.

Picking a search result reopened the readout, which on a narrow viewport is a
sheet over most of the scene — reopening it onto whatever was just flown to.
Below sm it now folds away.

A selectable label's two lines are adjacent spans, so it announced as
"Sirius2.64 pc"; it carries an explicit label saying what it does.

Verified: build clean, 558/558 unit, 7/7 end-to-end including a new spec that
flies Sol to Barnard's Star by its label, design detector clean, screenshots
at 1440x900 and 390x844 in Sol and Proxima Centauri, and the keyboard path
walked: both names are in the tab order, focusable, with the accent ring.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jxMkwA2rbicdGxHosecYi

src/app/features/galaxy-system/galaxy-system-scene.component.ts

@@ -26,7 +26,9 @@ import { DEFAULT_HUD_DISPLAY, HudDisplay, HudDockComponent, HudReadout } from '.
 import { StarmapHudComponent } from './starmap-hud.component';
 import { SystemObjectCardComponent } from './system-object-card.component';
 import { colorIndexToRgb, StarFieldRenderer, starRenderBudgetFromUrl } from './star-field-renderer';
+import { StarNeighbourhood } from '../../shared/astro/star-neighbourhood';
 import { HostStarRings } from './host-star-rings';
+import { ReservedBox, ringPlacement } from './label-ring';
 import { LabeledPoint, LabelSide, StarLabelOverlay } from './star-label-overlay';
 import { SystemOrbitsRenderer } from './system-orbits-renderer';
 
@@ -54,6 +56,21 @@ const LABEL_MIN_SEPARATION_NDC = 0.12;
 const LABEL_EDGE_NDC = 0.7;
 /** How far right of its point a label's text reaches, in aspect-scaled NDC (~135px at 1440). */
 const LABEL_REACH_NDC = 0.3;
+/** How many neighbouring stars are named from inside a system. */
+const NEIGHBOUR_COUNT = 4;
+/**
+ * How far out from the centre of the view a neighbour's name sits, as a fraction of the frame's
+ * half-height. Clear of the scale rail at the top and the dock at the bottom.
+ */
+const NEIGHBOUR_RING_NDC = 0.74;
+/**
+ * How far in front of the camera a neighbour's name is planted, in AU. Any depth projects to
+ * the same place on the ring, but not to the same stability: unprojecting at the middle of the
+ * depth buffer lands ~0.008 AU from the eye, where a hundredth of a degree of camera drift
+ * swings the label across the screen. Out here the same drift moves it by a pixel.
+ */
+const NEIGHBOUR_DEPTH_AU = 500;
+
 /** Radius of the selection arcs, in pixels — the leader line starts at their rim. */
 const SELECTION_RADIUS_PX = 14;
 const HUD_ACCENT = 0x4dd7ff;
@@ -195,6 +212,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private readonly labelHostRef = viewChild.required<ElementRef<HTMLDivElement>>('labelHost');
   private readonly leaderRef = viewChild.required<ElementRef<SVGLineElement>>('leader');
   private readonly objectCardRef = viewChild<SystemObjectCardComponent, ElementRef<HTMLElement>>(SystemObjectCardComponent, { read: ElementRef });
+  private readonly dockRef = viewChild<HudDockComponent, ElementRef<HTMLElement>>(HudDockComponent, { read: ElementRef });
 
   private readonly raycaster = new THREE.Raycaster();
   private readonly galaxyGroup = new THREE.Group();
@@ -228,6 +246,19 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private rig?: CameraRigController;
   private starField?: StarFieldRenderer;
   private hostRings?: HostStarRings;
+  /** Proximity over the whole catalogue, built once; the neighbour labels are one query on it. */
+  private neighbourhood?: StarNeighbourhood;
+  /** The current system's neighbours, resolved on arrival: id, name, distance and bearing. */
+  private neighbours: readonly { star: StarRecord; distancePc: number; direction: THREE.Vector3 }[] = [];
+  /**
+   * The HUD boxes the ring prints around, read on the label pass rather than per frame: each
+   * read is a forced layout, and the panels move when a tab is switched, not between frames.
+   */
+  private reserved: readonly ReservedBox[] = [];
+  /** Scratch for the per-frame ring maths, so holding the ring still allocates nothing. */
+  private readonly ringBearing = new THREE.Vector3();
+  private readonly ringInverse = new THREE.Quaternion();
+  private readonly ringPoint = new THREE.Vector3();
   private deepSky?: DeepSkyRenderer;
   private deepSkyLabels: readonly LabeledPoint[] = [];
   /** Stars with at least one catalogued body, which are the ones the map can be flown into. */
@@ -373,6 +404,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     ]);
     this.stars = stars;
     this.starsById = new Map(stars.map((star) => [star.id, star]));
+    this.neighbourhood = new StarNeighbourhood(stars);
     this.bodies = bodies;
     this.exoplanets = exoplanets;
     // Which stars can be flown into: those with catalogued bodies of their own, plus the Sun.
@@ -420,7 +452,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       this.deepSkyLabels = this.deepSky.labelPoints(DEEP_SKY_LABEL_COUNT);
     }
 
-    this.labelOverlay = new StarLabelOverlay(scene);
+    // A neighbour's label offers to fly there, and goes through the store like every other way
+    // of choosing a star — so a label click, a search hit and an in-scene click are one path.
+    this.labelOverlay = new StarLabelOverlay(scene, (starId) => this.navigationStore.selectStar(starId));
     this.labelHostRef().nativeElement.appendChild(this.labelOverlay.domElement);
     this.applyDisplay(this.display());
     const { width, height } = canvas.getBoundingClientRect();
@@ -467,6 +501,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       this.systemRenderer?.update(dateToJulianDate());
     }
     this.updateSelectionMark(camera);
+    this.updateNeighbourRing(camera);
     this.labelOverlay?.render(camera);
   }
 
@@ -685,6 +720,134 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    * Moons are left out entirely: they sit within a marker's width of their planet at system
    * framing, so their labels could only ever print on top of it.
    */
+  /**
+   * Names the stars nearest the one the camera is inside, each on the side of the view its own
+   * lies on. It is the one thing a system view cannot otherwise say: which way its neighbours
+   * are, and how far. Each is a button that flies there, so a chain of neighbours can be walked
+   * without pulling back out to the field between hops.
+   *
+   * These are bearings, not sky positions, and are drawn as such: a ring of names at a fixed
+   * radius from the centre of the frame, which reads as instrument rather than as scene. The
+   * true position cannot be drawn — the nearest star to the Sun is 268 000 AU away, thirteen
+   * times the far plane — and a true *direction* is worse than useless here: at this field of
+   * view, three neighbours in four fall outside the frame entirely, so the view would name
+   * whichever happened to be in front and stay silent about the rest. What survives the ring is
+   * the half of the direction that a viewer can act on: which way to turn to face it.
+   */
+  /** Resolves the current system's neighbours once, on arrival. Cleared outside a system. */
+  private resolveNeighbours(): void {
+    const origin = this.currentStarId === null ? undefined : this.starsById.get(this.currentStarId);
+    if (!origin || !this.neighbourhood) {
+      this.neighbours = [];
+      return;
+    }
+    this.neighbours = this.neighbourhood
+      .nearest(origin.id, NEIGHBOUR_COUNT)
+      .flatMap((neighbour) => {
+        const star = this.starsById.get(neighbour.id);
+        return star
+          ? [
+              {
+                star,
+                distancePc: neighbour.distancePc,
+                // A unit vector in the catalogue's parsec frame, which is the same direction in
+                // the system's AU frame: only the scale between the two differs.
+                direction: new THREE.Vector3(star.x - origin.x, star.y - origin.y, star.z - origin.z).normalize()
+              }
+            ]
+          : [];
+      });
+  }
+
+  /** Re-reads the HUD surfaces the ring has to print around, as boxes relative to the canvas. */
+  private refreshReservedBoxes(): void {
+    const canvas = this.canvasRef().nativeElement.getBoundingClientRect();
+    const panels = [
+      this.dockRef()?.nativeElement.querySelector('[role="tabpanel"]'),
+      this.dockRef()?.nativeElement.querySelector('[role="tablist"]')?.parentElement,
+      this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]')
+    ];
+    this.reserved = panels.flatMap((panel) => {
+      if (!panel) {
+        return [];
+      }
+      const box = panel.getBoundingClientRect();
+      return [{ left: box.left - canvas.left, top: box.top - canvas.top, right: box.right - canvas.left, bottom: box.bottom - canvas.top }];
+    });
+  }
+
+  /**
+   * Where a neighbour's name sits: on the ring, at the bearing its own direction lands on —
+   * moved along the ring where a HUD panel already holds that place. `null` where the whole
+   * neighbourhood of that bearing is covered.
+   */
+  private neighbourRingPosition(camera: THREE.PerspectiveCamera, direction: THREE.Vector3): THREE.Vector3 | null {
+    const bearing = this.ringBearing.copy(direction).applyQuaternion(this.ringInverse.copy(camera.quaternion).invert());
+    // A neighbour behind the camera keeps the side it is on, which is still the way to turn to
+    // bring it round.
+    const angle = Math.atan2(bearing.y, bearing.x);
+    const canvas = this.canvasRef().nativeElement;
+    const placed = ringPlacement(angle, NEIGHBOUR_RING_NDC, { width: canvas.clientWidth, height: canvas.clientHeight }, this.reserved);
+    if (!placed) {
+      return null;
+    }
+    const along = this.ringPoint.set(placed.x, placed.y, 0.5).unproject(camera).sub(camera.position).normalize();
+    return along.multiplyScalar(NEIGHBOUR_DEPTH_AU).add(camera.position);
+  }
+
+  /**
+   * Names the stars nearest the one the camera is inside, each on the side of the view its own
+   * lies on. It is the one thing a system view cannot otherwise say: which way its neighbours
+   * are, and how far. Each is a button that flies there, so a chain of neighbours can be walked
+   * without pulling back out to the field between hops.
+   *
+   * These are bearings, not sky positions, and are drawn as such: a ring of names at a fixed
+   * radius from the centre of the frame, which reads as instrument rather than as scene. The
+   * true position cannot be drawn — the nearest star to the Sun is 268 000 AU away, thirteen
+   * times the far plane — and a true *direction* is worse than useless here: at this field of
+   * view three neighbours in four fall outside the frame, so the view would name whichever
+   * happened to be in front and stay silent about the rest. What survives is the half of the
+   * direction a viewer can act on: which way to turn to face it.
+   */
+  private neighbourLabels(camera: THREE.PerspectiveCamera): LabeledPoint[] {
+    this.refreshReservedBoxes();
+    return this.neighbours.flatMap(({ star, distancePc, direction }) => {
+      const position = this.neighbourRingPosition(camera, direction);
+      if (!position) {
+        return [];
+      }
+      return [{
+        // Namespaced, so a star's ghost and the same star's own label in the galaxy view are
+        // never the one DOM node being asked to be two different things.
+        id: `neighbour:${star.id}`,
+        name: star.name,
+        kind: formatParsecs(distancePc),
+        tone: 'ghost' as const,
+        selectStarId: star.id,
+        x: position.x,
+        y: position.y,
+        z: position.z
+      }];
+    });
+  }
+
+  /**
+   * Holds the ring still. The names are placed relative to the camera, so between label passes
+   * — five a second — any camera movement would drag them off the ring and snap them back. This
+   * runs every frame and costs four vector operations.
+   */
+  private updateNeighbourRing(camera: THREE.PerspectiveCamera): void {
+    if (!this.systemGroup.visible || this.neighbours.length === 0) {
+      return;
+    }
+    for (const { star, direction } of this.neighbours) {
+      const position = this.neighbourRingPosition(camera, direction);
+      if (position) {
+        this.labelOverlay?.moveLabel(`neighbour:${star.id}`, position.x, position.y, position.z);
+      }
+    }
+  }
+
   private updateSystemLabels(camera: THREE.PerspectiveCamera): void {
     const renderer = this.systemRenderer;
     if (!renderer) {
@@ -723,7 +886,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
 
     points.sort((a, b) => b.semiMajorAxisAu - a.semiMajorAxisAu);
-    this.labelOverlay?.update(this.spreadLabels(points, camera, null));
+    // Bodies first, so a neighbour's name never takes the space one of this system's own would
+    // have had: `spreadLabels` keeps whichever candidate it reaches first.
+    this.labelOverlay?.update(this.spreadLabels([...points, ...this.neighbourLabels(camera)], camera, null));
   }
 
   /** Refreshes the readout panel for whichever scale the view is currently at. */
@@ -1044,6 +1209,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
 
     this.rig!.flyTo({ position: viewDirection.multiplyScalar(framingDistance), target: new THREE.Vector3(0, 0, 0) }, SETTLE_DURATION_SECONDS, () => {
       this.currentStarId = star.id;
+      this.resolveNeighbours();
       this.navigationStore.setViewLevel('system');
       onComplete();
     });
@@ -1088,12 +1254,14 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
 
     if (isSwitchingSystems) {
       this.currentStarId = null;
+      this.resolveNeighbours();
       onComplete();
       return;
     }
 
     this.rig!.flyTo({ position: GALAXY_OVERVIEW_POSITION.clone(), target: GALAXY_OVERVIEW_TARGET.clone() }, RETURN_DURATION_SECONDS, () => {
       this.currentStarId = null;
+      this.resolveNeighbours();
       this.navigationStore.setViewLevel('galaxy');
       onComplete();
     });