From eee4063c43e619a33c48fd0408bb9dc2dd45cc92 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 27 Oct 2026 23:02:18 -0700
Subject: [PATCH 01/19] feat(graph): define shared geometry for item wire paths

---
 docs/architecture/schematic-connections.md    |  25 +++
 .../lib/__tests__/edgeRouteGeometry.test.ts   | 177 +++++++++++++++
 packages/web/src/lib/edgeRouteGeometry.ts     | 204 ++++++++++++++++++
 3 files changed, 406 insertions(+)
 create mode 100644 packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
 create mode 100644 packages/web/src/lib/edgeRouteGeometry.ts

diff --git a/docs/architecture/schematic-connections.md b/docs/architecture/schematic-connections.md
index 9b140821..602785c4 100644
--- a/docs/architecture/schematic-connections.md
+++ b/docs/architecture/schematic-connections.md
@@ -115,3 +115,28 @@ spacing, readable names or a useful hierarchy.
 
 This is a reviewable candidate path. It does not close dynamic LOD, hosted parity,
 release/deployment work, or the remaining item-level visual problems.
+
+## Detailed item wiring continuation (#220)
+
+The first item-wiring increment starts from dev
+`007148f1a526b8ef028222a429b346a67e5c3c2c`. `edgeRouteGeometry.ts` defines the
+shared display path, final-segment arrow, distance along the route and pointer
+projection needed by the D3 path/hitbox/arrow/label consumers. Consecutive
+coincident points do not produce broken paths; a nonzero closed loop retains
+its travel and direction. Label placement fits an entire label on one segment,
+keeps text upright, retains original icon direction and returns no placement
+when cards or previous labels leave no clear slot. Equal-distance pointer hits
+prefer the prior leg so dragging does not jump across a nearby return wire.
+
+This foundation is not yet connected to the item renderer and does not establish
+routed item acceptance. Next, adapt all four geometry consumers together, then
+add bounded routing/admission, named boundary connections, exact deferred counts
+and accessible original relationships. Routing and obstacle searches belong to
+bounded updates after layout or scope changes, not every camera/simulation tick.
+Preserve edit/Grow, pointer hitboxes, label dragging and canonical positions.
+
+On 2026-10-28, Node22.18 ran the nine pure geometry cases serially in the existing
+clean-installed partial probe: 9 passed, no skips, 0.69s (8ms test bodies).
+Cases cover elbows, reversed segments, closed loops, duplicate/invalid points,
+nearest-leg dragging, ties, long labels and rotated obstacle footprints. This
+is scoped helper evidence, not a full-tree browser/database/performance result.
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
new file mode 100644
index 00000000..ff05a127
--- /dev/null
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -0,0 +1,177 @@
+import { describe, expect, it } from 'vitest';
+import {
+  createEdgeRoute,
+  edgeRouteLabel,
+  pointOnEdgeRoute,
+  projectEdgeRoutePointer,
+} from '../edgeRouteGeometry';
+
+const elbow = () =>
+  createEdgeRoute([
+    { x: 0, y: 0 },
+    { x: 200, y: 0 },
+    { x: 200, y: 100 },
+  ])!;
+
+describe('item wire geometry', () => {
+  it('uses the actual final segment for the target arrow and distance along every bend', () => {
+    const route = elbow();
+    expect(route.path).toBe('M0,0 L200,0 L200,100');
+    expect(route.target).toEqual({ x: 200, y: 100, angle: 90 });
+    expect(pointOnEdgeRoute(route, 0.5)).toEqual({
+      x: 150,
+      y: 0,
+      angle: 0,
+      t: 0.5,
+    });
+    expect(pointOnEdgeRoute(route, 5 / 6)).toEqual({
+      x: 200,
+      y: 50,
+      angle: 90,
+      t: 5 / 6,
+    });
+    expect(pointOnEdgeRoute(route, 2)).toMatchObject({
+      x: 200,
+      y: 100,
+      angle: 90,
+    });
+    expect(pointOnEdgeRoute(route, -1)).toMatchObject({ x: 0, y: 0, angle: 0 });
+  });
+
+  it('removes duplicate/straight knots without mutating source coordinates or removing a return leg', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 0, y: 0 },
+      { x: 40, y: 0 },
+      { x: 100, y: 0 },
+      { x: 40, y: 0 },
+    ];
+    const before = structuredClone(points);
+    const route = createEdgeRoute(points)!;
+    expect(route.path).toBe('M0,0 L100,0 L40,0');
+    expect(route.length).toBe(160);
+    expect(route.target.angle).toBe(180);
+    expect(points).toEqual(before);
+    expect(route.points[0]).not.toBe(points[0]);
+  });
+
+  it('keeps self-loop travel and original direction when endpoints coincide', () => {
+    const points = [
+      { x: 10, y: 10 },
+      { x: 110, y: 10 },
+      { x: 110, y: 110 },
+      { x: 10, y: 110 },
+      { x: 10, y: 10 },
+    ];
+    const route = createEdgeRoute(points)!;
+    expect(route.length).toBe(400);
+    expect(route.target).toEqual({ x: 10, y: 10, angle: -90 });
+    expect(pointOnEdgeRoute(route, 0.5)).toMatchObject({ x: 110, y: 110 });
+    expect(createEdgeRoute([...points].reverse())!.target.angle).toBe(180);
+  });
+
+  it('rejects unpaintable or nonfinite routes instead of emitting broken paths/hitboxes', () => {
+    for (const points of [
+      [],
+      [{ x: 4, y: 4 }],
+      [
+        { x: 4, y: 4 },
+        { x: 4, y: 4 },
+      ],
+      [
+        { x: 0, y: 0 },
+        { x: NaN, y: 1 },
+      ],
+      [
+        { x: -1e308, y: 0 },
+        { x: 1e308, y: 0 },
+      ],
+    ]) {
+      expect(createEdgeRoute(points)).toBeNull();
+    }
+  });
+
+  it('slides against the nearest routed segment, not the source-target diagonal', () => {
+    const route = elbow();
+    expect(projectEdgeRoutePointer(route, { x: 210, y: 60 })).toBeCloseTo(
+      260 / 300
+    );
+    expect(projectEdgeRoutePointer(route, { x: 90, y: -20 })).toBeCloseTo(
+      90 / 300
+    );
+    expect(projectEdgeRoutePointer(route, { x: -100, y: 0 })).toBe(0);
+    expect(projectEdgeRoutePointer(route, { x: 200, y: 200 })).toBe(1);
+  });
+
+  it('keeps a dragged label on its prior leg when two nearby legs are equally close', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 200, y: 0 },
+      { x: 200, y: 40 },
+      { x: 0, y: 40 },
+    ])!;
+    expect(projectEdgeRoutePointer(route, { x: 100, y: 20 }, 0.2)).toBeCloseTo(
+      100 / 440
+    );
+    expect(projectEdgeRoutePointer(route, { x: 100, y: 20 }, 0.8)).toBeCloseTo(
+      340 / 440
+    );
+    expect(projectEdgeRoutePointer(route, { x: NaN, y: 0 }, 0.8)).toBe(0.8);
+  });
+
+  it('fits whole labels on a segment away from bends and retains original arrow orientation', () => {
+    const route = createEdgeRoute([
+      { x: 200, y: 100 },
+      { x: 0, y: 100 },
+      { x: 0, y: 0 },
+    ])!;
+    const label = edgeRouteLabel(route, {
+      dims: { width: 80, height: 20 },
+      t: 0.65,
+    })!;
+    expect(label.rotation).toBe(0);
+    expect(label.iconRotation).toBe(180);
+    expect(label.x).toBeGreaterThanOrEqual(48);
+    expect(label.y).toBe(78);
+    expect(label.t).toBeCloseTo(152 / 300);
+  });
+
+  it('moves labels away from cards/earlier labels and explicitly defers when none fit', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 400, y: 0 },
+    ])!;
+    const dims = { width: 80, height: 20 };
+    const label = edgeRouteLabel(route, {
+      dims,
+      obstacles: [{ x: 200, y: -22, width: 140, height: 40 }],
+    })!;
+    expect(Math.abs(label.x - 200)).toBeGreaterThanOrEqual(118);
+    expect(
+      edgeRouteLabel(route, {
+        dims,
+        obstacles: [{ x: 200, y: -22, width: 1000, height: 1000 }],
+      })
+    ).toBeNull();
+    expect(
+      edgeRouteLabel(elbow(), { dims: { width: 250, height: 20 } })
+    ).toBeNull();
+  });
+
+  it('uses the rotated label footprint when avoiding obstacles on a vertical segment', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 0, y: 400 },
+    ])!;
+    const label = edgeRouteLabel(route, {
+      dims: { width: 100, height: 20 },
+      obstacles: [{ x: 22, y: 240, width: 20, height: 20 }],
+    })!;
+    expect(label.rotation).toBe(90);
+    expect(label.x).toBeCloseTo(22);
+    expect(Math.abs(label.y - 240)).toBeGreaterThanOrEqual(68);
+    expect(
+      edgeRouteLabel(route, { dims: { width: NaN, height: 20 } })
+    ).toBeNull();
+  });
+});
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
new file mode 100644
index 00000000..7146446e
--- /dev/null
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -0,0 +1,204 @@
+import type { Dims, ObstacleBox, Point } from './edgeLabelLayout';
+
+export interface EdgeRouteSegment {
+  source: Point;
+  target: Point;
+  length: number;
+  start: number;
+  end: number;
+  angle: number;
+}
+
+export interface EdgeRouteGeometry {
+  points: readonly Point[];
+  segments: readonly EdgeRouteSegment[];
+  length: number;
+  path: string;
+  target: Point & { angle: number };
+}
+
+const finitePoint = (point: Point) =>
+  Number.isFinite(point.x) && Number.isFinite(point.y);
+const clamp = (value: number, low: number, high: number) =>
+  Math.max(low, Math.min(high, value));
+const fraction = (value: number) =>
+  clamp(Number.isFinite(value) ? value : 0.5, 0, 1);
+
+export function createEdgeRoute(
+  input: readonly Point[]
+): EdgeRouteGeometry | null {
+  if (input.some(point => !finitePoint(point))) return null;
+  const points: Point[] = [];
+  for (const point of input) {
+    const last = points.at(-1);
+    if (last?.x === point.x && last.y === point.y) continue;
+    const previous = points.at(-2);
+    if (previous && last) {
+      const ax = last.x - previous.x,
+        ay = last.y - previous.y;
+      const bx = point.x - last.x,
+        by = point.y - last.y;
+      if (ax * by === ay * bx && ax * bx + ay * by > 0) points.pop();
+    }
+    points.push({ ...point });
+  }
+  if (points.length < 2) return null;
+  const segments: EdgeRouteSegment[] = [];
+  let length = 0;
+  for (let i = 1; i < points.length; i++) {
+    const source = points[i - 1],
+      target = points[i];
+    const dx = target.x - source.x,
+      dy = target.y - source.y;
+    const size = Math.hypot(dx, dy);
+    const end = length + size;
+    if (!Number.isFinite(end) || size === 0) return null;
+    segments.push({
+      source,
+      target,
+      length: size,
+      start: length,
+      end,
+      angle: (Math.atan2(dy, dx) * 180) / Math.PI,
+    });
+    length = end;
+  }
+  const last = segments[segments.length - 1];
+  return {
+    points,
+    segments,
+    length,
+    path: points
+      .map((point, i) => `${i ? 'L' : 'M'}${point.x},${point.y}`)
+      .join(' '),
+    target: { ...last.target, angle: last.angle },
+  };
+}
+
+export function pointOnEdgeRoute(route: EdgeRouteGeometry, value: number) {
+  const t = fraction(value),
+    distance = t * route.length;
+  const segment =
+    route.segments.find(part => distance < part.end) ??
+    route.segments[route.segments.length - 1];
+  const local = clamp((distance - segment.start) / segment.length, 0, 1);
+  return {
+    x: segment.source.x + (segment.target.x - segment.source.x) * local,
+    y: segment.source.y + (segment.target.y - segment.source.y) * local,
+    angle: segment.angle,
+    t,
+  };
+}
+
+export function projectEdgeRoutePointer(
+  route: EdgeRouteGeometry,
+  pointer: Point,
+  previousT = 0.5
+) {
+  const previous = fraction(previousT);
+  if (!finitePoint(pointer)) return previous;
+  let bestT = previous,
+    bestDistance = Infinity;
+  for (const segment of route.segments) {
+    const dx = segment.target.x - segment.source.x;
+    const dy = segment.target.y - segment.source.y;
+    const along = clamp(
+      ((pointer.x - segment.source.x) * (dx / segment.length) +
+        (pointer.y - segment.source.y) * (dy / segment.length)) /
+        segment.length,
+      0,
+      1
+    );
+    const x = segment.source.x + along * dx;
+    const y = segment.source.y + along * dy;
+    const distance = Math.hypot(pointer.x - x, pointer.y - y);
+    const t = (segment.start + along * segment.length) / route.length;
+    if (
+      distance < bestDistance - 1e-9 ||
+      (Math.abs(distance - bestDistance) <= 1e-9 &&
+        Math.abs(t - previous) < Math.abs(bestT - previous))
+    ) {
+      bestDistance = distance;
+      bestT = t;
+    }
+  }
+  return bestT;
+}
+
+export function edgeRouteLabel(
+  route: EdgeRouteGeometry,
+  options: {
+    dims: Dims;
+    t?: number;
+    offset?: number;
+    padding?: number;
+    obstacles?: readonly ObstacleBox[];
+  }
+) {
+  const { dims, obstacles = [] } = options;
+  const offset = options.offset ?? 22,
+    padding = options.padding ?? 8;
+  if (
+    ![dims.width, dims.height, offset, padding].every(Number.isFinite) ||
+    dims.width <= 0 ||
+    dims.height <= 0 ||
+    padding < 0
+  )
+    return null;
+  const desired = fraction(options.t ?? 0.5) * route.length;
+  const candidates: Array<{
+    x: number;
+    y: number;
+    t: number;
+    rotation: number;
+    iconRotation: number;
+  }> = [];
+  for (const segment of route.segments) {
+    const margin = dims.width / 2 + padding;
+    if (segment.length < 2 * margin) continue;
+    const low = segment.start + margin,
+      high = segment.end - margin;
+    const flipped = segment.angle > 90 || segment.angle < -90;
+    const rotation = flipped
+      ? segment.angle + (segment.angle > 90 ? -180 : 180)
+      : segment.angle;
+    const radians = (rotation * Math.PI) / 180;
+    const width =
+      Math.abs(Math.cos(radians)) * dims.width +
+      Math.abs(Math.sin(radians)) * dims.height;
+    const height =
+      Math.abs(Math.sin(radians)) * dims.width +
+      Math.abs(Math.cos(radians)) * dims.height;
+    for (const distance of new Set([
+      clamp(desired, low, high),
+      (low + high) / 2,
+      low,
+      high,
+    ])) {
+      const point = pointOnEdgeRoute(route, distance / route.length);
+      const x = point.x + Math.sin(radians) * offset;
+      const y = point.y - Math.cos(radians) * offset;
+      if (
+        obstacles.some(
+          box =>
+            Math.abs(x - box.x) < (width + box.width) / 2 + padding &&
+            Math.abs(y - box.y) < (height + box.height) / 2 + padding
+        )
+      )
+        continue;
+      candidates.push({
+        x,
+        y,
+        t: distance / route.length,
+        rotation,
+        iconRotation: flipped ? 180 : 0,
+      });
+    }
+  }
+  candidates.sort(
+    (a, b) =>
+      Math.abs(a.t * route.length - desired) -
+        Math.abs(b.t * route.length - desired) || a.t - b.t
+  );
+  return candidates[0] ?? null;
+}

From 1d2d9f8f7ecb41a31b670cd143cf9bf3ca9c628a Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 27 Oct 2026 23:08:48 -0700
Subject: [PATCH 02/19] fix(graph): keep offset labels on their routed leg

---
 ...-28-offset-label-drag-needs-offset-path.md | 47 +++++++++++
 .agents/issues/INDEX.md                       |  1 +
 docs/architecture/schematic-connections.md    | 11 ++-
 .../lib/__tests__/edgeRouteGeometry.test.ts   | 28 +++++++
 packages/web/src/lib/edgeRouteGeometry.ts     | 84 +++++++++++--------
 5 files changed, 136 insertions(+), 35 deletions(-)
 create mode 100644 .agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md

diff --git a/.agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md b/.agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md
new file mode 100644
index 00000000..e65076a1
--- /dev/null
+++ b/.agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md
@@ -0,0 +1,47 @@
+# Project dragged labels onto their displayed offset path
+
+2026-10-28 UTC, detailed item-wiring preparation for #220. Existing guidance
+was searched through `.agents/issues/INDEX.md`, `edgeLabelLayout.ts` and the
+schematic lessons. This is a controlled helper regression found before D3
+integration, not an observed failure in a deployed item router.
+
+The independent review of `eee4063c43e619a33c48fd0408bb9dc2dd45cc92` asked for
+an offset-label drag case beside a close return wire. The helper initially
+projected the pointer onto the wire centerline. On a U-shaped route whose
+horizontal legs are 40 units apart, the lower leg's upright label is offset22
+units upward. Its center is18 units from the upper wire and22 from its own.
+Nearest-wire projection therefore selects the wrong leg even with the prior
+fraction available as a tie-breaker: the distances are not tied.
+
+Command, supported Node22.18, existing clean-installed partial probe, one worker:
+
+```sh
+node node_modules/vitest/vitest.mjs run --root packages/web \
+  src/lib/__tests__/edgeRouteGeometry.test.ts --maxWorkers=1 --no-file-parallelism
+```
+
+Before correction: 9 passed, 1 failed, exit1, 0.713s. The executed new assertion
+expected `340 / 440 = 0.772727...` but received `100 / 440 = 0.227272...`.
+It passed a requested offset22 while the earlier helper ignored that extra
+argument. The production API was then extended explicitly, not the assertion
+relaxed. After correction: 10 passed, no skips, exit0, 0.691s (8ms test bodies).
+Scoped strict ES2020 TypeScript checking of helper and test also passed. Source
+and test were copied unchanged into the probe; this is not full-tree acceptance.
+
+Corrective rule: use the same upright perpendicular displacement for pointer
+projection and label painting. At D3 drag start, retain where inside the label
+the pointer grabbed it, then project the adjusted label center onto the offset
+route. Preserve icon rotation around the icon's own center. Keep the direct
+wire projection available for wire hit testing; it has different geometry.
+
+The review also found repeated route scans and candidate sorting in placement.
+Interpolate each candidate directly on its current segment and retain the best
+candidate in one pass. Placement now has O(segments × obstacles + segments)
+work with at most four candidates per segment. Runtime callers still need
+explicit bounds and a suitable update cadence. A null sampled placement means
+no tested slot was clear, not that every mathematical position is obstructed.
+
+The regression lives in `edgeRouteGeometry.test.ts`. No browser/database/image
+suite ran locally, no canonical positions changed, and no item-renderer
+acceptance is claimed. Carry this finding with the D3 consumer fix and its
+actual pointer/browser gates through normal review.
diff --git a/.agents/issues/INDEX.md b/.agents/issues/INDEX.md
index 6238360f..f00d08c9 100644
--- a/.agents/issues/INDEX.md
+++ b/.agents/issues/INDEX.md
@@ -2,6 +2,7 @@
 
 | Symptom | Canonical lesson and regression |
 | --- | --- |
+| A dragged offset label jumps to a nearby return wire despite a prior-leg tie-breaker | [Project onto the displayed offset path](../inbox/2026-10-28-offset-label-drag-needs-offset-path.md); close-return-leg geometry negative and correction |
 | Extra graph-fixture batches can continue while timeout cleanup deletes their graph | [Keep additional edges inside tracked seeding](../inbox/2026-10-28-fixture-extras-must-share-cancellation.md); delayed edge-response owned-fixture regression |
 | A clean schematic metric passes while wires are invisible, or a new relationship button makes an old member locator ambiguous | [Require actual paint and distinct controls](../inbox/2026-10-28-schematic-gates-must-see-painted-wires.md); actual overview bounds/paint/direction checks and opacity-zero negative control |
 | Open bus lists disagree with live groups, failed routing searches multiply work, or hidden-link counts omit a partition | [Resolve live memberships and cap the whole invocation](../inbox/2026-10-28-bus-views-need-live-membership-and-total-budgets.md); relationship/live-update regressions, budget negative, CI text-bound failure |
diff --git a/docs/architecture/schematic-connections.md b/docs/architecture/schematic-connections.md
index 602785c4..e0ad2c6a 100644
--- a/docs/architecture/schematic-connections.md
+++ b/docs/architecture/schematic-connections.md
@@ -125,7 +125,8 @@ projection needed by the D3 path/hitbox/arrow/label consumers. Consecutive
 coincident points do not produce broken paths; a nonzero closed loop retains
 its travel and direction. Label placement fits an entire label on one segment,
 keeps text upright, retains original icon direction and returns no placement
-when cards or previous labels leave no clear slot. Equal-distance pointer hits
+when no sampled slot clears cards or previous labels. This is conservative
+admission, not proof that every possible position is obstructed. Equal-distance pointer hits
 prefer the prior leg so dragging does not jump across a nearby return wire.
 
 This foundation is not yet connected to the item renderer and does not establish
@@ -140,3 +141,11 @@ clean-installed partial probe: 9 passed, no skips, 0.69s (8ms test bodies).
 Cases cover elbows, reversed segments, closed loops, duplicate/invalid points,
 nearest-leg dragging, ties, long labels and rotated obstacle footprints. This
 is scoped helper evidence, not a full-tree browser/database/performance result.
+
+Independent foundation review also required offset-aware dragging beside close
+return wires. The executed negative selected fraction100/440 instead of340/440;
+matching projection to the displayed offset corrected it. All ten cases passed
+serially in0.691s and scoped strict ES2020 types passed. Candidate interpolation
+now stays on its current segment and keeps only the best placement, avoiding
+repeated route scans/sorting. The [canonical lesson](../../.agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md)
+records the negative, correction and runtime integration limits.
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
index ff05a127..6e6f71f8 100644
--- a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -119,6 +119,34 @@ describe('item wire geometry', () => {
     expect(projectEdgeRoutePointer(route, { x: NaN, y: 0 }, 0.8)).toBe(0.8);
   });
 
+  it('drags an offset label along its rendered lane when the neighboring wire is closer', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 200, y: 0 },
+      { x: 200, y: 40 },
+      { x: 0, y: 40 },
+    ])!;
+    const label = edgeRouteLabel(route, {
+      dims: { width: 60, height: 20 },
+      t: 340 / 440,
+    })!;
+    expect(label).toMatchObject({
+      x: 100,
+      y: 18,
+      rotation: 0,
+      iconRotation: 180,
+    });
+    expect(projectEdgeRoutePointer(route, label, label.t)).toBeCloseTo(
+      100 / 440
+    );
+    expect(
+      projectEdgeRoutePointer(route, label, label.t, { offset: 22 })
+    ).toBeCloseTo(340 / 440);
+    expect(
+      projectEdgeRoutePointer(route, { x: 80, y: 18 }, label.t, { offset: 22 })
+    ).toBeCloseTo(360 / 440);
+  });
+
   it('fits whole labels on a segment away from bends and retains original arrow orientation', () => {
     const route = createEdgeRoute([
       { x: 200, y: 100 },
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 7146446e..02257596 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -17,12 +17,22 @@ export interface EdgeRouteGeometry {
   target: Point & { angle: number };
 }
 
+export interface EdgeRouteLabel {
+  x: number;
+  y: number;
+  t: number;
+  rotation: number;
+  iconRotation: number;
+}
+
 const finitePoint = (point: Point) =>
   Number.isFinite(point.x) && Number.isFinite(point.y);
 const clamp = (value: number, low: number, high: number) =>
   Math.max(low, Math.min(high, value));
 const fraction = (value: number) =>
   clamp(Number.isFinite(value) ? value : 0.5, 0, 1);
+const upright = (angle: number) =>
+  angle > 90 ? angle - 180 : angle < -90 ? angle + 180 : angle;
 
 export function createEdgeRoute(
   input: readonly Point[]
@@ -30,9 +40,9 @@ export function createEdgeRoute(
   if (input.some(point => !finitePoint(point))) return null;
   const points: Point[] = [];
   for (const point of input) {
-    const last = points.at(-1);
+    const last = points[points.length - 1];
     if (last?.x === point.x && last.y === point.y) continue;
-    const previous = points.at(-2);
+    const previous = points[points.length - 2];
     if (previous && last) {
       const ax = last.x - previous.x,
         ay = last.y - previous.y;
@@ -93,24 +103,29 @@ export function pointOnEdgeRoute(route: EdgeRouteGeometry, value: number) {
 export function projectEdgeRoutePointer(
   route: EdgeRouteGeometry,
   pointer: Point,
-  previousT = 0.5
+  previousT = 0.5,
+  options: { offset?: number } = {}
 ) {
   const previous = fraction(previousT);
-  if (!finitePoint(pointer)) return previous;
+  const offset = options.offset ?? 0;
+  if (!finitePoint(pointer) || !Number.isFinite(offset)) return previous;
   let bestT = previous,
     bestDistance = Infinity;
   for (const segment of route.segments) {
     const dx = segment.target.x - segment.source.x;
     const dy = segment.target.y - segment.source.y;
+    const angle = (upright(segment.angle) * Math.PI) / 180;
+    const sx = segment.source.x + Math.sin(angle) * offset;
+    const sy = segment.source.y - Math.cos(angle) * offset;
     const along = clamp(
-      ((pointer.x - segment.source.x) * (dx / segment.length) +
-        (pointer.y - segment.source.y) * (dy / segment.length)) /
+      ((pointer.x - sx) * (dx / segment.length) +
+        (pointer.y - sy) * (dy / segment.length)) /
         segment.length,
       0,
       1
     );
-    const x = segment.source.x + along * dx;
-    const y = segment.source.y + along * dy;
+    const x = sx + along * dx;
+    const y = sy + along * dy;
     const distance = Math.hypot(pointer.x - x, pointer.y - y);
     const t = (segment.start + along * segment.length) / route.length;
     if (
@@ -146,22 +161,15 @@ export function edgeRouteLabel(
   )
     return null;
   const desired = fraction(options.t ?? 0.5) * route.length;
-  const candidates: Array<{
-    x: number;
-    y: number;
-    t: number;
-    rotation: number;
-    iconRotation: number;
-  }> = [];
+  let best: EdgeRouteLabel | null = null;
+  let bestDistance = Infinity;
   for (const segment of route.segments) {
     const margin = dims.width / 2 + padding;
     if (segment.length < 2 * margin) continue;
     const low = segment.start + margin,
       high = segment.end - margin;
     const flipped = segment.angle > 90 || segment.angle < -90;
-    const rotation = flipped
-      ? segment.angle + (segment.angle > 90 ? -180 : 180)
-      : segment.angle;
+    const rotation = upright(segment.angle);
     const radians = (rotation * Math.PI) / 180;
     const width =
       Math.abs(Math.cos(radians)) * dims.width +
@@ -175,9 +183,15 @@ export function edgeRouteLabel(
       low,
       high,
     ])) {
-      const point = pointOnEdgeRoute(route, distance / route.length);
-      const x = point.x + Math.sin(radians) * offset;
-      const y = point.y - Math.cos(radians) * offset;
+      const local = (distance - segment.start) / segment.length;
+      const x =
+        segment.source.x +
+        (segment.target.x - segment.source.x) * local +
+        Math.sin(radians) * offset;
+      const y =
+        segment.source.y +
+        (segment.target.y - segment.source.y) * local -
+        Math.cos(radians) * offset;
       if (
         obstacles.some(
           box =>
@@ -186,19 +200,21 @@ export function edgeRouteLabel(
         )
       )
         continue;
-      candidates.push({
-        x,
-        y,
-        t: distance / route.length,
-        rotation,
-        iconRotation: flipped ? 180 : 0,
-      });
+      const delta = Math.abs(distance - desired);
+      if (
+        delta < bestDistance ||
+        (delta === bestDistance && distance / route.length < best!.t)
+      ) {
+        bestDistance = delta;
+        best = {
+          x,
+          y,
+          t: distance / route.length,
+          rotation,
+          iconRotation: flipped ? 180 : 0,
+        };
+      }
     }
   }
-  candidates.sort(
-    (a, b) =>
-      Math.abs(a.t * route.length - desired) -
-        Math.abs(b.t * route.length - desired) || a.t - b.t
-  );
-  return candidates[0] ?? null;
+  return best;
 }

From d9a0a5855612290b7c765999440b0d1d55b36333 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 27 Oct 2026 23:17:37 -0700
Subject: [PATCH 03/19] refactor(graph): share item wire paths across render
 consumers

---
 docs/architecture/schematic-connections.md    |  23 +-
 .../InteractiveGraphVisualization.tsx         | 263 +++++++-----------
 .../interactions/core-matrix.spec.ts          |   9 +-
 3 files changed, 129 insertions(+), 166 deletions(-)

diff --git a/docs/architecture/schematic-connections.md b/docs/architecture/schematic-connections.md
index e0ad2c6a..dc3ba5af 100644
--- a/docs/architecture/schematic-connections.md
+++ b/docs/architecture/schematic-connections.md
@@ -129,10 +129,11 @@ when no sampled slot clears cards or previous labels. This is conservative
 admission, not proof that every possible position is obstructed. Equal-distance pointer hits
 prefer the prior leg so dragging does not jump across a nearby return wire.
 
-This foundation is not yet connected to the item renderer and does not establish
-routed item acceptance. Next, adapt all four geometry consumers together, then
-add bounded routing/admission, named boundary connections, exact deferred counts
-and accessible original relationships. Routing and obstacle searches belong to
+The next committed increment connects this geometry to the D3 path, hitbox,
+arrow and label consumers. It still supplies straight border-to-border paths;
+this does not establish routed item acceptance. Next add bounded routing and
+admission, named boundary connections, exact deferred counts and accessible
+original relationships. Routing and obstacle searches belong to
 bounded updates after layout or scope changes, not every camera/simulation tick.
 Preserve edit/Grow, pointer hitboxes, label dragging and canonical positions.
 
@@ -149,3 +150,17 @@ serially in0.691s and scoped strict ES2020 types passed. Candidate interpolation
 now stays on its current segment and keeps only the best placement, avoiding
 repeated route scans/sorting. The [canonical lesson](../../.agents/inbox/2026-10-28-offset-label-drag-needs-offset-path.md)
 records the negative, correction and runtime integration limits.
+
+The D3 adaptation caches label dimensions after initial text sizing, reuses the
+path for paint and hit testing, places arrows from its final segment and slides
+labels along its displayed offset. Culling composes with route/label visibility
+instead of revealing deferred geometry. Label dragging updates only that label
+against cached obstacles. The interaction diagnostic clicks the actual path
+midpoint; the center of a bent path's bounding box need not lie on the path.
+
+Scoped web typecheck initially rejected a D3 nullable-style overload; the callback
+form corrected it, and the same check passed in3.66s. Scoped lint returned
+0 errors and298 warnings in the existing large renderer; no warning-free claim.
+These checks used the partial probe and are not actual browser acceptance.
+All original runtime/visual/durability gates and new item-wiring cases remain
+required before this branch can be integrated or #220 closed.
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 3b92e8c2..9c64f325 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -49,7 +49,8 @@ import { RelationshipType, RELATIONSHIP_OPTIONS, getRelationshipConfig } from '.
 import { useAdaptiveQuality } from '../hooks/useAdaptiveQuality';
 import { nodeLifeClasses, nodeGlowFilter, isActiveStatus, isCompletedStatus, edgeFlowClass } from '../lib/nodeAnimations';
 import { mergeSimulationNodes, mergeSimulationEdges } from '../lib/graphDataMerge';
-import { edgeLabelPlacement, clearSegment, slideTFromPointer, chooseLabelT } from '../lib/edgeLabelLayout';
+import type { ObstacleBox } from '../lib/edgeLabelLayout';
+import { createEdgeRoute, edgeRouteLabel, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
 import { PerfMeter, DriftMeter } from '../lib/perfMeter';
 import { separateCards } from '../lib/separateCards';
 import { DEFAULT_PHYSICS, collisionRadius, linkDistance, linkMaxDistance, linkStrength } from '../lib/physicsConfig';
@@ -2159,6 +2160,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       const info = parallelInfo.get(e.id);
       e._pIndex = info ? info.index : 0;
       e._pTotal = info ? info.total : 1;
+      const label = getRelationshipConfig(e.type as RelationshipType)?.label || '';
+      e._labelDims = { width: label.length * 7 + 34, height: 22 };
+      e._labelIconCenter = { x: 0, y: 0 };
     });
     const liveScale = svg.node() ? d3.zoomTransform(svg.node() as Element).k : 1;
     // Arrow opacity routed through the edge LOD module: hidden direction → 0,
@@ -2176,7 +2180,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .selectAll('.edge')
       .data(visibleEdges)
       .enter()
-      .append('line')
+      .append('path')
+      .attr('fill', 'none')
+      .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .attr('class', (d: WorkItemEdge) => {
         let classes = 'edge';
         // After force-link binding, source/target are node objects at runtime
@@ -2256,10 +2262,13 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .selectAll('.edge-clickable')
       .data(visibleEdges)
       .enter()
-      .append('line')
+      .append('path')
       .attr('class', 'edge-clickable')
+      .attr('fill', 'none')
+      .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .attr('stroke', 'transparent')
       .attr('stroke-width', 12)
+      .style('pointer-events', 'stroke')
       .style('cursor', 'pointer')
       .on('click', (event: MouseEvent, d: WorkItemEdge) => {
         event.stopPropagation();
@@ -3356,10 +3365,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     const arrowElements = g.append('g')
       .attr('class', 'arrows-group')
       .selectAll('.arrow')
-      .data(validatedEdges)
+      .data(visibleEdges)
       .enter()
       .append('path')
       .attr('class', 'arrow')
+      .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .attr('d', 'M-16,-8 L0,0 L-16,8 L-8,0 Z')
       .attr('fill', (d: WorkItemEdge) => {
         // Use the relationship color for consistency with edge stroke
@@ -3385,6 +3395,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .enter()
       .append('g')
       .attr('class', 'edge-label-group')
+      .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .style('opacity', (d: any) => labelVisibility(liveScale, d._pTotal || 1))
       .style('pointer-events', (d: any) => labelVisibility(liveScale, d._pTotal || 1) > 0 ? 'all' : 'none')
       .style('cursor', 'pointer')
@@ -3491,6 +3502,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
 
     // Size and position elements after text is rendered
     setTimeout(() => {
+      if (simulationRef.current !== simulation) return;
       edgeLabelGroups.each(function(d: WorkItemEdge) {
         const group = d3.select(this);
         const textElement = group.select('.edge-label').node() as SVGTextElement;
@@ -3503,6 +3515,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           const paddingRight = 8;
           const totalWidth = paddingLeft + iconWidth + spacing + bbox.width + paddingRight;
           const totalHeight = Math.max(22, bbox.height + 8);
+          (d as any)._labelDims = { width: totalWidth, height: totalHeight };
+          (d as any)._labelIconCenter = { x: -totalWidth / 2 + paddingLeft + 7, y: 0 };
           
           // Update rectangle size and center it
           group.select('.edge-label-bg')
@@ -3524,6 +3538,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
             .attr('dominant-baseline', 'middle');
         }
       });
+      updateEdgePositions(true);
     }, 150);
 
     // Node click handling with edge creation
@@ -3819,174 +3834,104 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     });
 
     let labelAvoidCounter = 0;
-    const updateEdgePositions = (forceAvoid = false) => {
-      // Dot mode (extreme zoom-out): all edges/arrows/labels are hidden, so there
-      // is nothing to position — skip the whole 1400-edge per-tick pass.
-      if (dotModeRef.current && !forceAvoid) {
+    let nodeLabelObstacles: ObstacleBox[] = [];
+    const labelRects = new Map<string, ObstacleBox>();
+    const applyLabel = (element: SVGGElement, d: any, placement: EdgeRouteLabel | null) => {
+      d._routeLabel = placement;
+      const label = d3.select(element);
+      label.style('display', () => placement ? edgeDisplay(d) : 'none');
+      if (!placement) {
+        labelRects.delete(d.id);
         return;
       }
-      // Live zoom scale drives the LOD-aware parallel-edge fan-out (collapses to
-      // the centre line when zoomed out) and arrow sizing.
+      d.labelT = placement.t;
+      label.attr('transform', `translate(${placement.x},${placement.y}) rotate(${placement.rotation})`);
+      const center = d._labelIconCenter;
+      label.select('.edge-label-icon').attr('transform', placement.iconRotation
+        ? `rotate(${placement.iconRotation}, ${center.x}, ${center.y})` : null);
+      const angle = placement.rotation * Math.PI / 180;
+      labelRects.set(d.id, {
+        x: placement.x, y: placement.y,
+        width: Math.abs(Math.cos(angle)) * d._labelDims.width + Math.abs(Math.sin(angle)) * d._labelDims.height,
+        height: Math.abs(Math.sin(angle)) * d._labelDims.width + Math.abs(Math.cos(angle)) * d._labelDims.height
+      });
+    };
+    const updateEdgePositions = (forceAvoid = false) => {
+      if (dotModeRef.current && !forceAvoid) return;
       const liveK = svg.node() ? d3.zoomTransform(svg.node() as Element).k : 1;
-
-      // Border-to-border anchors: the edge starts/ends where the center line
-      // crosses each card's border, not at the buried center. Computed once per
-      // edge per tick (shared datum) so line, hitbox and arrow agree. The anchor
-      // slides around the border as the nodes move — shortest border path. For
-      // parallel edges, shift the whole anchored line perpendicular to itself by
-      // perpendicularOffset so siblings don't overlap.
-      linkElements.each(function (d: any) {
+      linkElements.each(function(d: any) {
         const ep = edgeBorderEndpoints(
           { x: d.source.x || 0, y: d.source.y || 0 }, getNodeDimensions(d.source),
           { x: d.target.x || 0, y: d.target.y || 0 }, getNodeDimensions(d.target)
         );
         if ((d._pTotal || 1) > 1) {
           const off = perpendicularOffset(d._pIndex || 0, d._pTotal, liveK);
-          if (off !== 0) {
-            const lx = ep.x2 - ep.x1;
-            const ly = ep.y2 - ep.y1;
-            const len = Math.hypot(lx, ly) || 1;
-            const px = -ly / len;
-            const py = lx / len;
-            ep.x1 += px * off; ep.y1 += py * off;
-            ep.x2 += px * off; ep.y2 += py * off;
-          }
+          const dx = ep.x2 - ep.x1, dy = ep.y2 - ep.y1;
+          const length = Math.hypot(dx, dy) || 1;
+          ep.x1 -= dy / length * off; ep.y1 += dx / length * off;
+          ep.x2 -= dy / length * off; ep.y2 += dx / length * off;
         }
-        d._ep = ep;
+        d._route = createEdgeRoute([{ x: ep.x1, y: ep.y1 }, { x: ep.x2, y: ep.y2 }]);
+      });
+      linkElements.attr('d', (d: any) => d._route?.path ?? null);
+      clickableEdges.attr('d', (d: any) => d._route?.path ?? null);
+      applyEdgeDisplays();
+      if (simplifiedRef.current && !forceAvoid) return;
+      arrowElements.attr('transform', (d: any) => {
+        const route = d._route as EdgeRouteGeometry | null;
+        if (!route) return null;
+        const target = route.target;
+        const size = arrowVisibility(liveK, d._pTotal || 1).scale;
+        return `translate(${target.x},${target.y}) rotate(${target.angle}) scale(${size})`;
       });
-
-      // Update visible edge positions
-      linkElements
-        .attr('x1', (d: any) => d._ep.x1)
-        .attr('y1', (d: any) => d._ep.y1)
-        .attr('x2', (d: any) => d._ep.x2)
-        .attr('y2', (d: any) => d._ep.y2);
-
-      // Update clickable edge positions
-      clickableEdges
-        .attr('x1', (d: any) => d._ep.x1)
-        .attr('y1', (d: any) => d._ep.y1)
-        .attr('x2', (d: any) => d._ep.x2)
-        .attr('y2', (d: any) => d._ep.y2);
-
-      // Simplified (dense + zoomed out): arrows and edge labels are hidden
-      // (data-simplify CSS), so skip their per-tick positioning entirely — at
-      // 1400 edges that arrow transform + label placement pass is the bulk of
-      // the remaining per-tick cost in the whole-graph view. forceAvoid (the
-      // one-shot settle pass) still runs so labels are correct when you zoom in.
-      if (simplifiedRef.current && !forceAvoid) {
-        return;
-      }
-
-      // Arrow sits at the TARGET border, pointing into the node. Parallel edges
-      // get a smaller arrow head (arrowVisibility.scale) so crowded siblings stay
-      // legible; lone edges keep the default size.
-      arrowElements
-        .attr('transform', (d: any) => {
-          const ep = d._ep;
-          const angle = Math.atan2(ep.y2 - ep.y1, ep.x2 - ep.x1) * 180 / Math.PI;
-          const size = arrowVisibility(liveK, d._pTotal || 1).scale;
-          return `translate(${ep.x2},${ep.y2}) rotate(${angle}) scale(${size})`;
-        });
-
-      // Edge labels: auto-centered in the clear span between the two node
-      // cards, pushed off ALL node cards once the simulation settles, and
-      // slidable by the user (d.labelT persists because the data merge keeps
-      // edge object identity stable; d.labelTUser pins a manual slide).
       labelAvoidCounter++;
-      // forceAvoid lets a one-shot caller (layout settle / pinned graphs that
-      // don't tick) run a full label de-overlap pass on demand.
       const runAvoidance = forceAvoid || (simulation.alpha() < 0.1 && labelAvoidCounter % 15 === 0);
-      const obstacles = runAvoidance
-        ? (simulation.nodes() as any[]).map((n: any) => {
-            const dims = getNodeDimensions(n);
-            return { x: n.x || 0, y: n.y || 0, width: dims.width, height: dims.height };
-          })
-        : null;
-
-      // Labels placed earlier in this pass become obstacles for later ones,
-      // so labels avoid each other as well as every node card.
-      const placedLabels: Array<{ x: number; y: number; width: number; height: number }> = [];
-      edgeLabelGroups
-        .attr('transform', function(d: any) {
-          const source = { x: d.source.x || 0, y: d.source.y || 0 };
-          const target = { x: d.target.x || 0, y: d.target.y || 0 };
-          const sourceDims = getNodeDimensions(d.source);
-          const targetDims = getNodeDimensions(d.target);
-
-          let labelW = 60;
-          let labelH = 20;
-          if (obstacles) {
-            const bbox = (this as SVGGElement).getBBox();
-            labelW = bbox.width || 60;
-            labelH = bbox.height || 20;
-            if (!d.labelTUser) {
-              d.labelT = chooseLabelT({
-                source, target, sourceDims, targetDims,
-                obstacles: obstacles.concat(placedLabels),
-                labelDims: { width: labelW, height: labelH }
-              });
-            }
-          }
-
-          const placement = edgeLabelPlacement({ source, target, sourceDims, targetDims, t: d.labelT });
-          // Fan parallel-edge labels off the centre line to match their shifted
-          // paths (same perpendicular offset as the line above).
-          let labelX = placement.x;
-          let labelY = placement.y;
-          if ((d._pTotal || 1) > 1) {
-            const off = perpendicularOffset(d._pIndex || 0, d._pTotal, liveK);
-            if (off !== 0) {
-              const lx = target.x - source.x;
-              const ly = target.y - source.y;
-              const len = Math.hypot(lx, ly) || 1;
-              labelX += (-ly / len) * off;
-              labelY += (lx / len) * off;
-            }
-          }
-          if (obstacles) {
-            placedLabels.push({ x: labelX, y: labelY, width: labelW + 8, height: labelH + 8 });
-          }
-          // edgeLabelPlacement keeps text upright by stripping 180° when the edge
-          // points "backward" — which leaves the directional label icon pointing
-          // the wrong way after a flip. Carry that lost 180° on the icon so its
-          // arrow tracks the real edge direction (and flips when the edge flips).
-          // CRITICAL: rotate around the ICON's own centre — a bare rotate(180)
-          // pivots on the group origin (0,0), which threw the icon across onto the
-          // label text (overlap) and left it upside-down. The icon is a 14×14
-          // foreignObject at (x,y), so its centre is (x+7, y+7).
-          const trueAngle = (Math.atan2(target.y - source.y, target.x - source.x) * 180) / Math.PI;
-          const iconFlipped = trueAngle > 90 || trueAngle < -90;
-          const iconSel = d3.select(this).select('.edge-label-icon');
-          if (iconFlipped) {
-            const ix = parseFloat(iconSel.attr('x') || '-7');
-            const iy = parseFloat(iconSel.attr('y') || '-7');
-            iconSel.attr('transform', `rotate(180, ${ix + 7}, ${iy + 7})`);
-          } else {
-            iconSel.attr('transform', null);
-          }
-          return `translate(${labelX},${labelY}) rotate(${placement.rotation})`;
-        });
+      if (runAvoidance) nodeLabelObstacles = (simulation.nodes() as any[]).map(n => ({
+        x: n.x || 0, y: n.y || 0, ...getNodeDimensions(n)
+      }));
+      const placed: ObstacleBox[] = [];
+      edgeLabelGroups.each(function(d: any) {
+        const route = d._route as EdgeRouteGeometry | null;
+        const placement = route && (runAvoidance || !d._labelBlocked)
+          ? edgeRouteLabel(route, {
+              dims: d._labelDims, t: d.labelT,
+              obstacles: runAvoidance ? nodeLabelObstacles.concat(placed) : []
+            }) : null;
+        if (runAvoidance) d._labelBlocked = !placement;
+        applyLabel(this, d, placement);
+        const box = labelRects.get(d.id);
+        if (box) placed.push(box);
+      });
     };
 
-    // Let users slide a label along its edge, within the clear span.
     edgeLabelGroups
       .style('cursor', 'grab')
       .call(d3.drag<any, any>()
-        // Locked (phone) → reject so the gesture pans instead of sliding the label.
         .filter((event: any) => !interactionLockedRef.current && !event.ctrlKey && !event.button)
-        .on('start', (event) => {
+        .on('start', (event, d: any) => {
           event.sourceEvent?.stopPropagation();
+          const [x, y] = d3.pointer(event, g.node() as any);
+          d._labelGrab = d._routeLabel
+            ? { x: x - d._routeLabel.x, y: y - d._routeLabel.y }
+            : { x: 0, y: 0 };
         })
         .on('drag', function(event, d: any) {
-          const [px, py] = d3.pointer(event, g.node() as any);
-          const source = { x: d.source.x || 0, y: d.source.y || 0 };
-          const target = { x: d.target.x || 0, y: d.target.y || 0 };
-          const segment = clearSegment(source, target, getNodeDimensions(d.source), getNodeDimensions(d.target));
-          d.labelT = slideTFromPointer({ x: px, y: py }, source, target, segment);
-          d.labelTUser = true;
-          updateEdgePositions();
-        }));
+          if (!d._route || !d._labelGrab) return;
+          const [x, y] = d3.pointer(event, g.node() as any);
+          const t = projectEdgeRoutePointer(d._route, {
+            x: x - d._labelGrab.x, y: y - d._labelGrab.y
+          }, d.labelT, { offset: 22 });
+          const placement = edgeRouteLabel(d._route, {
+            dims: d._labelDims, t,
+            obstacles: nodeLabelObstacles.concat([...labelRects].filter(([id]) => id !== d.id).map(([, box]) => box))
+          });
+          if (placement) {
+            d.labelTUser = true;
+            d._labelBlocked = false;
+            applyLabel(this, d, placement);
+          }
+        })
+        .on('end', (_event, d: any) => { delete d._labelGrab; }));
 
     // Simulation tick. Order matters: nodes move first, then every line,
     // arrow and label re-anchors to the nodes' new positions — edges can
@@ -4041,13 +3986,17 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     const CULL_MIN_SCALE = 0.5;
     let cullCounter = 0;
     let cullActive = false;
+    const edgeDisplay = (d: any) => !d._route || (cullActive && d.source?._culled && d.target?._culled) ? 'none' : null;
+    const applyEdgeDisplays = () => {
+      linkElements.style('display', edgeDisplay);
+      clickableEdges.style('display', edgeDisplay);
+      arrowElements.style('display', edgeDisplay);
+      edgeLabelGroups.style('display', (d: any) => d._routeLabel ? edgeDisplay(d) : 'none');
+    };
     const clearCull = () => {
       nodeElements.style('display', null);
-      linkElements.style('display', null);
-      clickableEdges.style('display', null);
-      arrowElements.style('display', null);
-      edgeLabelGroups.style('display', null);
       cullActive = false;
+      applyEdgeDisplays();
     };
     const applyViewportCull = () => {
       const svgEl = svg.node();
@@ -4069,11 +4018,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         d._culled = !visible;
         return visible ? null : 'none';
       });
-      const edgeDisplay = (d: any) => (d.source?._culled && d.target?._culled ? 'none' : null);
-      linkElements.style('display', edgeDisplay);
-      clickableEdges.style('display', edgeDisplay);
-      arrowElements.style('display', edgeDisplay);
-      edgeLabelGroups.style('display', edgeDisplay);
+      applyEdgeDisplays();
     };
 
     simulation.on('tick', () => {
diff --git a/tests/diagnostics/interactions/core-matrix.spec.ts b/tests/diagnostics/interactions/core-matrix.spec.ts
index 47de5a8a..a84cb8f7 100644
--- a/tests/diagnostics/interactions/core-matrix.spec.ts
+++ b/tests/diagnostics/interactions/core-matrix.spec.ts
@@ -118,10 +118,13 @@ test.describe('core interaction matrix @geometry', () => {
     // 6. Click an edge → relationship editor opens
     await page.waitForTimeout(500);
     const edgeBox = await page.evaluate(() => {
-      const e = document.querySelector('.graph-container svg .edge-clickable, .graph-container svg .edge') as SVGLineElement | null;
+      const e = document.querySelector('.graph-container svg .edge-clickable, .graph-container svg .edge') as SVGGeometryElement | null;
       if (!e) return null;
-      const r = e.getBoundingClientRect();
-      return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+      const matrix = e.getScreenCTM();
+      if (!matrix || e.getTotalLength() === 0) return null;
+      const point = e.getPointAtLength(e.getTotalLength() / 2);
+      const screen = new DOMPoint(point.x, point.y).matrixTransform(matrix);
+      return { x: screen.x, y: screen.y };
     });
     if (edgeBox) {
       await page.mouse.click(edgeBox.x, edgeBox.y);

From 9931b3ce70c4c0a49d596c9aa1f32398216abf93 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 27 Oct 2026 23:45:56 -0700
Subject: [PATCH 04/19] fix(graph): preserve hidden label sizing and opposite
 wire lanes

---
 ...28-hidden-labels-need-valid-measurement.md |  52 +++
 .agents/issues/INDEX.md                       |   1 +
 .github/workflows/ci.yml                      |   5 +
 docs/architecture/schematic-connections.md    |  19 ++
 .../InteractiveGraphVisualization.tsx         |  79 ++---
 .../components/RelationshipEditorWindow.tsx   |   4 +
 .../lib/__tests__/edgeRouteGeometry.test.ts   |  17 +
 packages/web/src/lib/edgeRouteGeometry.ts     |  19 ++
 tests/diagnostics/layout/geometry.spec.ts     |  16 +-
 tests/e2e/graph/item-wire-consumers.spec.ts   | 300 ++++++++++++++++++
 tests/lib/runner/unified-cli.test.mjs         |   6 +-
 tests/sequences/unified.config.mjs            |   7 +-
 12 files changed, 458 insertions(+), 67 deletions(-)
 create mode 100644 .agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
 create mode 100644 tests/e2e/graph/item-wire-consumers.spec.ts

diff --git a/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
new file mode 100644
index 00000000..3353f71d
--- /dev/null
+++ b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
@@ -0,0 +1,52 @@
+# Keep conservative label geometry when hidden SVG measurement is empty
+
+2026-10-28 UTC, independent review of item-wire source
+`d9a0a5855612290b7c765999440b0d1d55b36333` for #220 / PR #221. Existing
+guidance was searched in the symptom index and the offset-label lesson. This
+was a source-review finding, not a reproduced deployed/browser incident.
+
+The first placement pass can hide an edge-label group before its delayed
+150ms sizing callback runs. Accepting an empty `getBBox()` then replaces a
+conservative text estimate with padding alone (36 units), allowing a long
+label to be admitted using an undersized obstacle/background. Initialize text,
+icon and background from one conservative cache, and replace that cache only
+when both measured dimensions are positive. Hidden labels must not become
+small merely because they are not currently measurable.
+
+The same review found a line-only diagnostic reading `x1.baseVal` after the
+renderer changed to SVG paths. Read actual path endpoints through
+`getPointAtLength` and transform them through `getScreenCTM`. Searching for
+remaining `SVGLineElement` / `x1.baseVal` consumers found this one diagnostic.
+
+A separate source audit found that directed perpendicular offsets put reverse
+edges on the same lane: reversing both the direction and lane sign cancels the
+separation. Use a canonical unordered endpoint direction to define lane sides,
+while preserving the original route direction for arrows and editing.
+
+Dated local commands used supported Node22.18, nice10, one worker, in the
+existing clean-installed partial probe (not full-tree acceptance):
+
+```sh
+node node_modules/vitest/vitest.mjs run --root packages/web \
+  src/lib/__tests__/edgeRouteGeometry.test.ts --maxWorkers=1 --no-file-parallelism
+node node_modules/typescript/bin/tsc --noEmit -p packages/web/tsconfig.json
+node node_modules/@playwright/test/cli.js test tests/e2e/graph/item-wire-consumers.spec.ts --list
+node --test --test-concurrency=1 tests/lib/runner/unified-cli.test.mjs
+```
+
+Results: 11 geometry cases passed in0.722s (9ms bodies); scoped web types passed
+in3.72s; two browser cases discovered, **not executed locally**; 32 CLI harness
+cases passed in4.56s without a browser. Scoped flat-config lint over both
+components/helper/test passed with0 errors and314 warnings. An initial lint
+invocation from the uninstalled worktree failed to resolve a legacy config;
+the corrected command ran from the probe's web package with
+`ESLINT_USE_FLAT_CONFIG=true`. That setup error is not a source lint result.
+
+The new blocking `item-wires` sequence is enrolled in PR/full profiles and CI
+after smoke, before longer suites, with one browser worker and zero retries.
+It exercises actual SVG paint/hitboxes/arrows, pointer dragging, wire/label
+editing and initially hidden label sizing, retains PNG/JSON, rejects writes,
+compares original graph data and uses owned fixture cleanup. CI execution and
+artifact review remain required. The route is still straight; these changes
+do not establish bounded obstacle routing, visible detail budgets, complete
+spaghetti detection or closure of #220.
diff --git a/.agents/issues/INDEX.md b/.agents/issues/INDEX.md
index f00d08c9..79e829a6 100644
--- a/.agents/issues/INDEX.md
+++ b/.agents/issues/INDEX.md
@@ -2,6 +2,7 @@
 
 | Symptom | Canonical lesson and regression |
 | --- | --- |
+| Hidden item labels acquire tiny backgrounds, reverse wires share a lane, or line-only diagnostics fail after path conversion | [Preserve conservative dimensions and shared path consumers](../inbox/2026-10-28-hidden-labels-need-valid-measurement.md); item-wire browser sequence and opposite-direction lane regression |
 | A dragged offset label jumps to a nearby return wire despite a prior-leg tie-breaker | [Project onto the displayed offset path](../inbox/2026-10-28-offset-label-drag-needs-offset-path.md); close-return-leg geometry negative and correction |
 | Extra graph-fixture batches can continue while timeout cleanup deletes their graph | [Keep additional edges inside tracked seeding](../inbox/2026-10-28-fixture-extras-must-share-cancellation.md); delayed edge-response owned-fixture regression |
 | A clean schematic metric passes while wires are invisible, or a new relationship button makes an old member locator ambiguous | [Require actual paint and distinct controls](../inbox/2026-10-28-schematic-gates-must-see-painted-wires.md); actual overview bounds/paint/direction checks and opacity-zero negative control |
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ee4ff567..f92f6d60 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -197,6 +197,11 @@ jobs:
         env:
           TEST_URL: http://localhost:3127
           CI: true
+      - name: Item wire consumer acceptance
+        run: xvfb-run --auto-servernum node tests/run-unified.mjs --sequence item-wires --out test-artifacts/ci-item-wires
+        env:
+          TEST_URL: http://localhost:3127
+          CI: true
       - name: New-user quality gate (headed under virtual display)
         run: xvfb-run --auto-servernum node tests/run-unified.mjs --sequence new-user --out test-artifacts/ci-new-user
         env:
diff --git a/docs/architecture/schematic-connections.md b/docs/architecture/schematic-connections.md
index dc3ba5af..f46bf9bb 100644
--- a/docs/architecture/schematic-connections.md
+++ b/docs/architecture/schematic-connections.md
@@ -164,3 +164,22 @@ form corrected it, and the same check passed in3.66s. Scoped lint returned
 These checks used the partial probe and are not actual browser acceptance.
 All original runtime/visual/durability gates and new item-wiring cases remain
 required before this branch can be integrated or #220 closed.
+
+Review of the first consumer commit (`d9a0a58`) found empty measurement of
+initially hidden labels and a line-only geometry diagnostic. The correction
+initializes all label parts from conservative dimensions and accepts only
+positive text measurements; diagnostics now read actual SVG path endpoints.
+Opposite-direction parallel edges share a canonical lane normal so they stay
+separate while their arrows retain direction. Wire and label clicks open the
+same original relationship editor, whose controls now have accessible names.
+
+Two real-browser cases are registered as blocking `item-wires` acceptance in
+CI immediately after smoke (one worker, zero retries), retaining actual
+paint/hitbox/arrow geometry and screenshots, pointer drag/edit behavior, hidden
+label dimensions and unchanged graph data. Local discovery found both cases;
+they have not run locally. The partial probe passed11 geometry cases in0.722s,
+32 CLI harness cases in4.56s and scoped types; scoped lint reports0 errors,
+314 warnings across the two components/helper/test. The
+[review lesson](../../.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md)
+records the evidence and limits. These are straight item paths preparing the
+bounded routing increment, not completion of #220.
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 9c64f325..725f4f53 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -50,7 +50,7 @@ import { useAdaptiveQuality } from '../hooks/useAdaptiveQuality';
 import { nodeLifeClasses, nodeGlowFilter, isActiveStatus, isCompletedStatus, edgeFlowClass } from '../lib/nodeAnimations';
 import { mergeSimulationNodes, mergeSimulationEdges } from '../lib/graphDataMerge';
 import type { ObstacleBox } from '../lib/edgeLabelLayout';
-import { createEdgeRoute, edgeRouteLabel, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
+import { createParallelEdgeRoute, edgeRouteLabel, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
 import { PerfMeter, DriftMeter } from '../lib/perfMeter';
 import { separateCards } from '../lib/separateCards';
 import { DEFAULT_PHYSICS, collisionRadius, linkDistance, linkMaxDistance, linkStrength } from '../lib/physicsConfig';
@@ -2161,8 +2161,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       e._pIndex = info ? info.index : 0;
       e._pTotal = info ? info.total : 1;
       const label = getRelationshipConfig(e.type as RelationshipType)?.label || '';
-      e._labelDims = { width: label.length * 7 + 34, height: 22 };
-      e._labelIconCenter = { x: 0, y: 0 };
+      e._labelDims = { width: label.length * 7 + 36, height: 22 };
+      e._labelIconCenter = { x: -e._labelDims.width / 2 + 13, y: 0 };
     });
     const liveScale = svg.node() ? d3.zoomTransform(svg.node() as Element).k : 1;
     // Arrow opacity routed through the edge LOD module: hidden direction → 0,
@@ -2172,6 +2172,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
 
     // Debug: Log edge visibility
 
+    const openEdgeEditor = (event: MouseEvent, edge: WorkItemEdge) => {
+      event.stopPropagation();
+      event.preventDefault();
+      setSelectedEdge(edge);
+      setShowRelationshipWindow(true);
+      setEditingEdge({ edge, position: { x: event.clientX, y: event.clientY } });
+      setDragOffset({ x: 0, y: 0 });
+    };
+
     // Create edges FIRST (so they render under nodes)
     const edgesGroup = g.append('g').attr('class', 'edges-group');
     
@@ -2270,31 +2279,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('stroke-width', 12)
       .style('pointer-events', 'stroke')
       .style('cursor', 'pointer')
-      .on('click', (event: MouseEvent, d: WorkItemEdge) => {
-        event.stopPropagation();
-        
-        // Position dialog to the side of the edge to avoid obstructing the glow
-        const offset = 100; // Distance from edge
-        const dialogWidth = 300; // Estimated dialog width
-        const dialogHeight = 200; // Estimated dialog height
-        
-        // Calculate position to the right side, but check boundaries
-        let x = event.clientX + offset;
-        let y = event.clientY - dialogHeight / 2;
-        
-        // If dialog would go off right edge, position to the left
-        if (x + dialogWidth > window.innerWidth - 20) {
-          x = event.clientX - offset - dialogWidth;
-        }
-        
-        // Keep dialog within vertical bounds
-        if (y < 20) y = 20;
-        if (y + dialogHeight > window.innerHeight - 20) {
-          y = window.innerHeight - dialogHeight - 20;
-        }
-        
-        setSelectedEdge(d);
-      })
+      .on('click', openEdgeEditor)
       .on('mouseover', function(event: MouseEvent, d: WorkItemEdge) {
         // Highlight the corresponding visible edge
         linkElements
@@ -3399,19 +3384,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .style('opacity', (d: any) => labelVisibility(liveScale, d._pTotal || 1))
       .style('pointer-events', (d: any) => labelVisibility(liveScale, d._pTotal || 1) > 0 ? 'all' : 'none')
       .style('cursor', 'pointer')
-      .on('click', function(event: MouseEvent, d: WorkItemEdge) {
-        event.stopPropagation();
-        event.preventDefault(); // Prevent any default behavior
-        
-        // Open the editor, remembering WHERE the edge was clicked so the
-        // window can position itself away from the edge it edits
-        setShowRelationshipWindow(true);
-        setEditingEdge({
-          edge: d,
-          position: { x: event.clientX, y: event.clientY }
-        });
-        setDragOffset({ x: 0, y: 0 }); // Reset drag offset
-      });
+      .on('click', openEdgeEditor);
 
     // Nodes always stack ABOVE edge labels/arrows — labels were stealing
     // clicks from node controls (the + icon) when they drifted over a card.
@@ -3421,8 +3394,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     edgeLabelGroups
       .append('text')
       .attr('class', 'edge-label')
-      .attr('x', 0)
-      .attr('text-anchor', 'middle')
+      .attr('x', (d: any) => -d._labelDims.width / 2 + 28)
+      .attr('text-anchor', 'start')
       .attr('dominant-baseline', 'middle')
       .style('font-size', '10px')
       .style('font-weight', '600')
@@ -3441,7 +3414,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('class', 'edge-label-icon')
       .attr('width', 14)
       .attr('height', 14)
-      .attr('x', -7) // Will be adjusted after measuring text
+      .attr('x', (d: any) => -d._labelDims.width / 2 + 6)
       .attr('y', -7)
       .style('pointer-events', 'none')
       .each(function(d: WorkItemEdge) {
@@ -3473,6 +3446,10 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     edgeLabelGroups
       .insert('rect', ':first-child') // Insert before other elements
       .attr('class', 'edge-label-bg')
+      .attr('width', (d: any) => d._labelDims.width)
+      .attr('height', (d: any) => d._labelDims.height)
+      .attr('x', (d: any) => -d._labelDims.width / 2)
+      .attr('y', (d: any) => -d._labelDims.height / 2)
       .attr('rx', 8)
       .attr('ry', 8)
       .style('fill', (d: WorkItemEdge) => {
@@ -3509,6 +3486,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         
         if (textElement) {
           const bbox = textElement.getBBox();
+          if (!(bbox.width > 0 && bbox.height > 0)) return;
           const iconWidth = 14;
           const spacing = 8;
           const paddingLeft = 6;
@@ -3864,14 +3842,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           { x: d.source.x || 0, y: d.source.y || 0 }, getNodeDimensions(d.source),
           { x: d.target.x || 0, y: d.target.y || 0 }, getNodeDimensions(d.target)
         );
-        if ((d._pTotal || 1) > 1) {
-          const off = perpendicularOffset(d._pIndex || 0, d._pTotal, liveK);
-          const dx = ep.x2 - ep.x1, dy = ep.y2 - ep.y1;
-          const length = Math.hypot(dx, dy) || 1;
-          ep.x1 -= dy / length * off; ep.y1 += dx / length * off;
-          ep.x2 -= dy / length * off; ep.y2 += dx / length * off;
-        }
-        d._route = createEdgeRoute([{ x: ep.x1, y: ep.y1 }, { x: ep.x2, y: ep.y2 }]);
+        const offset = perpendicularOffset(d._pIndex || 0, d._pTotal || 1, liveK);
+        d._route = createParallelEdgeRoute(
+          { id: d.source.id, x: ep.x1, y: ep.y1 },
+          { id: d.target.id, x: ep.x2, y: ep.y2 }, offset
+        );
       });
       linkElements.attr('d', (d: any) => d._route?.path ?? null);
       clickableEdges.attr('d', (d: any) => d._route?.path ?? null);
diff --git a/packages/web/src/components/RelationshipEditorWindow.tsx b/packages/web/src/components/RelationshipEditorWindow.tsx
index 5121836d..7dfe8334 100644
--- a/packages/web/src/components/RelationshipEditorWindow.tsx
+++ b/packages/web/src/components/RelationshipEditorWindow.tsx
@@ -289,6 +289,8 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
   return createPortal(
     <div 
       ref={windowRef}
+      role="dialog"
+      aria-label={isEditingMode ? 'Edit relationship' : 'Create relationship'}
       className="fixed bg-white/5 backdrop-blur-xl border border-white/20 rounded-xl shadow-lg overflow-hidden z-50"
       style={{
         left: `${position.x}px`,
@@ -314,12 +316,14 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
         <div className="flex items-center space-x-1">
           <button
             onClick={() => setIsExpanded(!isExpanded)}
+            aria-label={isExpanded ? 'Collapse relationship editor' : 'Expand relationship editor'}
             className="p-1 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
           >
             {isExpanded ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
           </button>
           <button
             onClick={onClose}
+            aria-label="Close relationship editor"
             className="p-1 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
           >
             <X className="h-3 w-3" />
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
index 6e6f71f8..f1fbb43c 100644
--- a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import {
   createEdgeRoute,
+  createParallelEdgeRoute,
   edgeRouteLabel,
   pointOnEdgeRoute,
   projectEdgeRoutePointer,
@@ -14,6 +15,22 @@ const elbow = () =>
   ])!;
 
 describe('item wire geometry', () => {
+  it('keeps opposite directed wires on distinct lanes without reversing their arrows', () => {
+    const a = { id: 'a', x: 0, y: 0 },
+      b = { id: 'b', x: 400, y: 0 };
+    const forward = createParallelEdgeRoute(a, b, -6)!;
+    const reverse = createParallelEdgeRoute(b, a, 6)!;
+    expect(forward.points).toEqual([
+      { x: 0, y: -6 },
+      { x: 400, y: -6 },
+    ]);
+    expect(reverse.points).toEqual([
+      { x: 400, y: 6 },
+      { x: 0, y: 6 },
+    ]);
+    expect(forward.target.angle).toBe(0);
+    expect(reverse.target.angle).toBe(180);
+  });
   it('uses the actual final segment for the target arrow and distance along every bend', () => {
     const route = elbow();
     expect(route.path).toBe('M0,0 L200,0 L200,100');
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 02257596..54451402 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -100,6 +100,25 @@ export function pointOnEdgeRoute(route: EdgeRouteGeometry, value: number) {
   };
 }
 
+export function createParallelEdgeRoute(
+  source: Point & { id: string },
+  target: Point & { id: string },
+  offset: number
+) {
+  const dx = target.x - source.x,
+    dy = target.y - source.y;
+  const length = Math.hypot(dx, dy);
+  if (!Number.isFinite(offset) || !Number.isFinite(length) || length === 0)
+    return null;
+  const signed = offset * (source.id < target.id ? 1 : -1);
+  const x = (-dy / length) * signed,
+    y = (dx / length) * signed;
+  return createEdgeRoute([
+    { x: source.x + x, y: source.y + y },
+    { x: target.x + x, y: target.y + y },
+  ]);
+}
+
 export function projectEdgeRoutePointer(
   route: EdgeRouteGeometry,
   pointer: Point,
diff --git a/tests/diagnostics/layout/geometry.spec.ts b/tests/diagnostics/layout/geometry.spec.ts
index 992fc554..4c6a4d27 100644
--- a/tests/diagnostics/layout/geometry.spec.ts
+++ b/tests/diagnostics/layout/geometry.spec.ts
@@ -75,16 +75,12 @@ async function readGeometry(page: Page): Promise<{ edges: EdgeGeom[] }> {
       const s = nodeById[sId], t = nodeById[tId];
       if (!s || !t) return;
 
-      // The rendered edge endpoints (screen coords)
-      const le = e as SVGLineElement;
-      const r = le.getBoundingClientRect();
-      // endpoints from attributes mapped to screen via the line's CTM is messy;
-      // instead compare the edge's own bbox extremes to the node centers.
-      const x1 = le.x1.baseVal.value, y1 = le.y1.baseVal.value, x2 = le.x2.baseVal.value, y2 = le.y2.baseVal.value;
-      // map svg-userspace endpoint to screen using the element CTM
-      const m = le.getScreenCTM();
-      const p1 = m ? new DOMPoint(x1, y1).matrixTransform(m) : { x: r.left, y: r.top };
-      const p2 = m ? new DOMPoint(x2, y2).matrixTransform(m) : { x: r.right, y: r.bottom };
+      const path = e as SVGGeometryElement;
+      const matrix = path.getScreenCTM();
+      if (!matrix) throw new Error('Rendered edge has no screen transform');
+      const start = path.getPointAtLength(0), end = path.getPointAtLength(path.getTotalLength());
+      const p1 = new DOMPoint(start.x, start.y).matrixTransform(matrix);
+      const p2 = new DOMPoint(end.x, end.y).matrixTransform(matrix);
 
       const len = Math.hypot(t.cx - s.cx, t.cy - s.cy);
       const ux = (t.cx - s.cx) / (len || 1), uy = (t.cy - s.cy) / (len || 1);
diff --git a/tests/e2e/graph/item-wire-consumers.spec.ts b/tests/e2e/graph/item-wire-consumers.spec.ts
new file mode 100644
index 00000000..c75eb18a
--- /dev/null
+++ b/tests/e2e/graph/item-wire-consumers.spec.ts
@@ -0,0 +1,300 @@
+import { test as base, expect } from '@playwright/test';
+import { writeFile } from 'node:fs/promises';
+import { login, TEST_USERS } from '../../lib/auth';
+import { gql } from '../../lib/graphRequest';
+import {
+  ownedGraphIdsFixture,
+  type OwnedGraphs,
+} from '../../lib/ownedGraphIdsFixture';
+
+const test = base.extend<{ ownedGraphIds: OwnedGraphs }>({
+  ownedGraphIds: [ownedGraphIdsFixture, { timeout: 60000 }],
+});
+test.use({ viewport: { width: 1440, height: 900 }, actionTimeout: 10000 });
+
+test('item wire paths, hitboxes, arrows and dragged labels retain original relationships @item-wires', async ({
+  page,
+  ownedGraphIds,
+}, info) => {
+  test.setTimeout(90000);
+  await login(page, TEST_USERS.ADMIN);
+  const seeded = await ownedGraphIds.seed({
+    size: 2,
+    spacing: 600,
+    edgeFactor: 0,
+    namePrefix: 'Item wire consumers',
+    additionalEdges: [{ sourceIndex: 1, targetIndex: 0, type: 'BLOCKS' }],
+  });
+  const snapshot = async () => {
+    const result = await gql(
+      page,
+      'query($id:ID!){workItems(where:{graph:{id:$id}}){id title positionX positionY metadata} edges(where:{source:{graph:{id:$id}}}){id type source{id} target{id}}}',
+      { id: seeded.graphId }
+    );
+    result.workItems.sort((a: { id: string }, b: { id: string }) =>
+      a.id.localeCompare(b.id)
+    );
+    result.edges.sort((a: { id: string }, b: { id: string }) =>
+      a.id.localeCompare(b.id)
+    );
+    return result;
+  };
+  const before = await snapshot();
+  expect(before.edges).toHaveLength(2);
+  const writes: string[] = [],
+    errors: string[] = [];
+  page.on('pageerror', error => errors.push(error.message));
+  await page.route('**/api/graphql', async route => {
+    const body = route.request().postDataJSON();
+    if (/^\s*mutation\b/.test(body?.query ?? '')) {
+      writes.push(body.operationName || 'mutation');
+      await route.abort('blockedbyclient');
+    } else await route.continue();
+  });
+  await page.evaluate(id => {
+    localStorage.setItem('currentGraphId', id);
+    localStorage.setItem('graphdone:viewMode', 'graph');
+  }, seeded.graphId);
+  const loaded = page.waitForResponse(response => {
+    if (!response.url().endsWith('/api/graphql')) return false;
+    const body = response.request().postDataJSON();
+    return (
+      body?.operationName === 'GetEdges' &&
+      body.variables?.where?.OR?.some(
+        (part: { source?: { graph?: { id?: string } } }) =>
+          part.source?.graph?.id === seeded.graphId
+      )
+    );
+  });
+  const [, response] = await Promise.all([page.goto('/'), loaded]);
+  expect(response.ok()).toBe(true);
+  expect((await response.json()).errors).toBeUndefined();
+  await expect(page.locator('.graph-container .node')).toHaveCount(2);
+  await page
+    .getByRole('button', { name: 'Zoom to fit — frame all nodes', exact: true })
+    .click();
+  const labels = page.locator('.graph-container .edge-label-group:visible');
+  await expect(labels).toHaveCount(2);
+  await expect
+    .poll(() =>
+      page.evaluate(() => (window as any).__layoutMetrics?.()?.atRest)
+    )
+    .toBe(true);
+
+  const capture = async (name: string) => {
+    const geometry = await page.locator('.graph-container').evaluate(host => {
+      const rows = Array.from(
+        host.querySelectorAll<SVGPathElement>('.edges-group .edge')
+      ).map(path => {
+        const id = path.getAttribute('data-edge-id')!;
+        const hitbox = Array.from(
+          host.querySelectorAll<SVGPathElement>('.edge-clickable')
+        ).find(el => el.getAttribute('data-edge-id') === id)!;
+        const arrow = Array.from(
+          host.querySelectorAll<SVGPathElement>('.arrows-group .arrow')
+        ).find(el => el.getAttribute('data-edge-id') === id)!;
+        const length = path.getTotalLength();
+        const end = path.getPointAtLength(length),
+          near = path.getPointAtLength(Math.max(0, length - 0.1));
+        const matrix = arrow.transform.baseVal.consolidate()?.matrix;
+        const style = getComputedStyle(path),
+          hitStyle = getComputedStyle(hitbox);
+        const arrowStyle = getComputedStyle(arrow);
+        return {
+          id,
+          tag: path.tagName,
+          path: path.getAttribute('d'),
+          hitPath: hitbox.getAttribute('d'),
+          length,
+          painted:
+            style.display !== 'none' &&
+            style.visibility !== 'hidden' &&
+            Number(style.opacity) > 0 &&
+            Number(style.strokeOpacity) > 0 &&
+            parseFloat(style.strokeWidth) > 0,
+          hit:
+            hitStyle.display !== 'none' && hitStyle.pointerEvents === 'stroke',
+          arrowVisible:
+            arrowStyle.display !== 'none' && Number(arrowStyle.opacity) > 0,
+          end: { x: end.x, y: end.y },
+          tangent: Math.atan2(end.y - near.y, end.x - near.x),
+          arrow: matrix
+            ? {
+                x: matrix.e,
+                y: matrix.f,
+                angle: Math.atan2(matrix.b, matrix.a),
+              }
+            : null,
+        };
+      });
+      return rows.sort((a, b) => a.id.localeCompare(b.id));
+    });
+    expect(geometry.map(row => row.id)).toEqual(
+      before.edges.map((edge: { id: string }) => edge.id)
+    );
+    for (const row of geometry) {
+      expect(row.tag).toBe('path');
+      expect(row.path).toBeTruthy();
+      expect(row.hitPath).toBe(row.path);
+      expect(row.length).toBeGreaterThan(1);
+      expect(row.painted).toBe(true);
+      expect(row.hit).toBe(true);
+      expect(row.arrowVisible).toBe(true);
+      expect(row.arrow).toBeTruthy();
+      expect(row.arrow!.x).toBeCloseTo(row.end.x, 2);
+      expect(row.arrow!.y).toBeCloseTo(row.end.y, 2);
+      expect(Math.cos(row.arrow!.angle - row.tangent)).toBeCloseTo(1, 4);
+    }
+    const json = info.outputPath(`${name}.json`),
+      png = info.outputPath(`${name}.png`);
+    await writeFile(json, JSON.stringify(geometry, null, 2));
+    await page.screenshot({ path: png });
+    await info.attach(`${name}-geometry`, {
+      path: json,
+      contentType: 'application/json',
+    });
+    await info.attach(name, { path: png, contentType: 'image/png' });
+  };
+  await capture('initial-item-wires');
+  const label = labels.first();
+  const edgeId = await label.getAttribute('data-edge-id');
+  const initialT = await label.evaluate(el => (el as any).__data__.labelT);
+  const box = await label.boundingBox();
+  expect(box).toBeTruthy();
+  await page.mouse.move(
+    box!.x + box!.width / 2 + 4,
+    box!.y + box!.height / 2 + 3
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    box!.x + box!.width / 2 + 74,
+    box!.y + box!.height / 2 + 3,
+    { steps: 8 }
+  );
+  await page.mouse.up();
+  await expect
+    .poll(() =>
+      label.evaluate(
+        (el, prior) => Math.abs((el as any).__data__.labelT - prior),
+        initialT
+      )
+    )
+    .toBeGreaterThan(0.02);
+  await expect(label).toBeVisible();
+  await expect(
+    page.getByRole('dialog', { name: 'Edit relationship', exact: true })
+  ).toHaveCount(0);
+  await capture('dragged-item-label');
+  const click = await page
+    .locator('.graph-container .edge-clickable')
+    .evaluateAll((elements, id) => {
+      const path = elements.find(
+        el => el.getAttribute('data-edge-id') === id
+      )! as SVGPathElement;
+      const point = path.getPointAtLength(path.getTotalLength() * 0.35);
+      const screen = new DOMPoint(point.x, point.y).matrixTransform(
+        path.getScreenCTM()!
+      );
+      const hit = document.elementFromPoint(screen.x, screen.y);
+      return {
+        x: screen.x,
+        y: screen.y,
+        id: hit?.getAttribute('data-edge-id'),
+        clickable: hit?.classList.contains('edge-clickable'),
+      };
+    }, edgeId);
+  expect(click.id).toBe(edgeId);
+  expect(click.clickable).toBe(true);
+  await page.mouse.click(click.x, click.y);
+  const editor = page.getByRole('dialog', {
+    name: 'Edit relationship',
+    exact: true,
+  });
+  await expect(
+    editor.getByRole('button', { name: 'Flip Direction', exact: true })
+  ).toBeVisible();
+  await editor
+    .getByRole('button', { name: 'Close relationship editor', exact: true })
+    .click();
+  await expect(editor).toHaveCount(0);
+  await label.click();
+  await expect(editor).toBeVisible();
+  await editor
+    .getByRole('button', { name: 'Close relationship editor', exact: true })
+    .click();
+  expect(await snapshot()).toEqual(before);
+  expect(writes).toEqual([]);
+  expect(errors).toEqual([]);
+});
+
+test('initially hidden item labels retain full conservative sizing @item-wires', async ({
+  page,
+  ownedGraphIds,
+}, info) => {
+  test.setTimeout(90000);
+  await login(page, TEST_USERS.ADMIN);
+  const seeded = await ownedGraphIds.seed({
+    size: 2,
+    spacing: 240,
+    edgeFactor: 0,
+    namePrefix: 'Hidden item labels',
+  });
+  const read = async () => {
+    const data = await gql(
+      page,
+      'query($id:ID!){workItems(where:{graph:{id:$id}}){id positionX positionY} edges(where:{source:{graph:{id:$id}}}){id}}',
+      { id: seeded.graphId }
+    );
+    data.workItems.sort((a: { id: string }, b: { id: string }) =>
+      a.id.localeCompare(b.id)
+    );
+    return data;
+  };
+  const before = await read(),
+    writes: string[] = [];
+  await page.route('**/api/graphql', async route => {
+    const body = route.request().postDataJSON();
+    if (/^\s*mutation\b/.test(body?.query ?? '')) {
+      writes.push(body.operationName || 'mutation');
+      await route.abort('blockedbyclient');
+    } else await route.continue();
+  });
+  await page.evaluate(id => {
+    localStorage.setItem('currentGraphId', id);
+    localStorage.setItem('graphdone:viewMode', 'graph');
+  }, seeded.graphId);
+  await page.goto('/');
+  await expect(page.locator('.graph-container .node')).toHaveCount(2);
+  const label = page.locator('.graph-container .edge-label-group');
+  await expect(label).toHaveCount(1);
+  await expect(label).toBeHidden();
+  await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 250)));
+  const sizing = await label.evaluate(el => {
+    const text = el.querySelector('.edge-label')!.textContent!;
+    return {
+      text,
+      width: (el as any).__data__._labelDims.width,
+      backgroundWidth: Number(
+        el.querySelector('.edge-label-bg')!.getAttribute('width')
+      ),
+      display: getComputedStyle(el).display,
+    };
+  });
+  expect(sizing.width).toBeGreaterThanOrEqual(sizing.text.length * 7 + 34);
+  expect(sizing.backgroundWidth).toBe(sizing.width);
+  expect(sizing.display).toBe('none');
+  const json = info.outputPath('hidden-label-sizing.json'),
+    png = info.outputPath('hidden-label-sizing.png');
+  await writeFile(json, JSON.stringify(sizing, null, 2));
+  await page.screenshot({ path: png });
+  await info.attach('hidden-label-sizing', {
+    path: json,
+    contentType: 'application/json',
+  });
+  await info.attach('hidden-label-sizing', {
+    path: png,
+    contentType: 'image/png',
+  });
+  expect(await read()).toEqual(before);
+  expect(writes).toEqual([]);
+});
diff --git a/tests/lib/runner/unified-cli.test.mjs b/tests/lib/runner/unified-cli.test.mjs
index c94fa828..b4845bae 100644
--- a/tests/lib/runner/unified-cli.test.mjs
+++ b/tests/lib/runner/unified-cli.test.mjs
@@ -46,7 +46,7 @@ test('disposable Git fixture commits do not spawn background maintenance', t =>
   assert.deepEqual(events.filter(event => event.event === 'child_start' && event.argv?.includes('maintenance')), []);
 });
 
-for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets']) {
+for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets']) {
   test(`CLI forwards failure-only tracing without retries for ${sequence}`, t => {
     const { dir, run } = fixture(t);
     const report = { suites: [{ specs: [{ title: 'fixture', ok: true,
@@ -67,8 +67,8 @@ for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'schematic-vis
       const workflow = readFileSync(join(root, '.github/workflows/ci.yml'), 'utf8');
       assert.equal(workflow.split('run: node tests/run-unified.mjs --sequence schematic-visual --out test-artifacts/ci-schematic-visual').length, 2);
     }
-    if (sequence === 'nested-lod' || sequence === 'semantic-lod' || sequence === 'layout-recovery' || sequence === 'router-navigation') {
-      const spec = sequence === 'nested-lod' ? 'tests/e2e/graph/nested-semantic-lod.spec.ts' : sequence === 'semantic-lod' ? 'tests/e2e/graph/semantic-lod.spec.ts' : sequence === 'layout-recovery' ? 'tests/e2e/graph/layout-recovery.spec.ts' : 'tests/e2e/auth/router-navigation.spec.ts';
+    if (sequence === 'item-wires' || sequence === 'nested-lod' || sequence === 'semantic-lod' || sequence === 'layout-recovery' || sequence === 'router-navigation') {
+      const spec = sequence === 'item-wires' ? 'tests/e2e/graph/item-wire-consumers.spec.ts' : sequence === 'nested-lod' ? 'tests/e2e/graph/nested-semantic-lod.spec.ts' : sequence === 'semantic-lod' ? 'tests/e2e/graph/semantic-lod.spec.ts' : sequence === 'layout-recovery' ? 'tests/e2e/graph/layout-recovery.spec.ts' : 'tests/e2e/auth/router-navigation.spec.ts';
       assert.ok(args.includes(spec));
       assert.equal(SEQUENCES[sequence].blocking, true);
       const workflow = readFileSync(join(root, '.github/workflows/ci.yml'), 'utf8');
diff --git a/tests/sequences/unified.config.mjs b/tests/sequences/unified.config.mjs
index ded11d3b..f7757427 100644
--- a/tests/sequences/unified.config.mjs
+++ b/tests/sequences/unified.config.mjs
@@ -35,6 +35,9 @@ export const SEQUENCES = {
   'nested-lod': { adapter: 'playwright', title: 'Nested semantic LOD acceptance', args: [
     'tests/e2e/graph/nested-semantic-lod.spec.ts', `--project=${PW}`, '--headed', '--workers=1', '--retries=0', '--trace=retain-on-failure',
   ], blocking: true },
+  'item-wires': { adapter: 'playwright', title: 'Item wire consumer acceptance', args: [
+    'tests/e2e/graph/item-wire-consumers.spec.ts', `--project=${PW}`, '--headed', '--workers=1', '--retries=0', '--trace=retain-on-failure',
+  ], blocking: true },
   'schematic-visual': { adapter: 'playwright', title: 'Schematic fixture visual acceptance', args: [
     '--config=playwright.schematic.config.ts', '--workers=1', '--retries=0', '--trace=retain-on-failure',
   ], blocking: true },
@@ -65,8 +68,8 @@ export const SEQUENCES = {
 
 export const PROFILES = {
   smoke: ['unit-web', 'smoke', 'e2e-auth'],
-  pr: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets'],
-  full: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets', 'diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
+  pr: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets'],
+  full: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets', 'diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
   report: ['diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
   live: ['live-journey'],
 };

From 93fe6d248774b343f1d34b083c693f2f6f73089c Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 27 Oct 2026 23:52:19 -0700
Subject: [PATCH 05/19] test(graph): require stable camera and painted item
 wires

---
 ...28-hidden-labels-need-valid-measurement.md |  12 ++
 .../components/RelationshipEditorWindow.tsx   |   1 +
 tests/e2e/graph/item-wire-consumers.spec.ts   | 161 ++++++++++++++++--
 3 files changed, 162 insertions(+), 12 deletions(-)

diff --git a/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
index 3353f71d..bef3ec9f 100644
--- a/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
+++ b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
@@ -50,3 +50,15 @@ compares original graph data and uses owned fixture cleanup. CI execution and
 artifact review remain required. The route is still straight; these changes
 do not establish bounded obstacle routing, visible detail budgets, complete
 spaghetti detection or closure of #220.
+
+Independent review of `9931b3c` required stronger browser oracles before
+acceptance: pinned physics can be at rest while the450ms Fit transition is
+still moving the camera, and paint checks must inspect ancestors and actual
+stroke/fill. The correction waits for both `atRest` and `cameraReady`, rejects
+hidden ancestors/absent paint, and deliberately hides wire and arrow groups or
+removes a wire stroke to prove rejection. It also compares route endpoints to
+the original API-directed cards and checks the editor's original direction and
+selected type. Relationship type buttons expose their selected state through
+`aria-pressed`. Local discovery still finds2 cases and scoped web types pass;
+actual browser acceptance is pending. These were source-review findings,
+not locally executed browser negatives.
diff --git a/packages/web/src/components/RelationshipEditorWindow.tsx b/packages/web/src/components/RelationshipEditorWindow.tsx
index 7dfe8334..17b68d7c 100644
--- a/packages/web/src/components/RelationshipEditorWindow.tsx
+++ b/packages/web/src/components/RelationshipEditorWindow.tsx
@@ -375,6 +375,7 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
                   return (
                     <button
                       key={option.type}
+                      aria-pressed={isSelected}
                       onClick={() => handleRelationshipTypeChange(option.type)}
                       className={`
                         group relative p-3 rounded-lg border transition-all duration-200
diff --git a/tests/e2e/graph/item-wire-consumers.spec.ts b/tests/e2e/graph/item-wire-consumers.spec.ts
index c75eb18a..389412aa 100644
--- a/tests/e2e/graph/item-wire-consumers.spec.ts
+++ b/tests/e2e/graph/item-wire-consumers.spec.ts
@@ -77,12 +77,43 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
   await expect(labels).toHaveCount(2);
   await expect
     .poll(() =>
-      page.evaluate(() => (window as any).__layoutMetrics?.()?.atRest)
+      page.evaluate(() => {
+        const metrics = (window as any).__layoutMetrics?.();
+        return metrics?.atRest === true && metrics?.cameraReady === true;
+      })
     )
     .toBe(true);
 
   const capture = async (name: string) => {
     const geometry = await page.locator('.graph-container').evaluate(host => {
+      const visible = (element: Element) => {
+        for (
+          let current: Element | null = element;
+          current;
+          current = current.parentElement
+        ) {
+          const style = getComputedStyle(current);
+          if (
+            style.display === 'none' ||
+            style.visibility !== 'visible' ||
+            Number(style.opacity) === 0
+          )
+            return false;
+        }
+        return true;
+      };
+      const cards = Array.from(host.querySelectorAll<SVGGElement>('.node')).map(
+        node => {
+          const rect = node.querySelector('.node-bg')!.getBoundingClientRect();
+          return {
+            id: (node as any).__data__.id as string,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+          };
+        }
+      );
       const rows = Array.from(
         host.querySelectorAll<SVGPathElement>('.edges-group .edge')
       ).map(path => {
@@ -97,6 +128,13 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
         const end = path.getPointAtLength(length),
           near = path.getPointAtLength(Math.max(0, length - 0.1));
         const matrix = arrow.transform.baseVal.consolidate()?.matrix;
+        const start = path.getPointAtLength(0);
+        const screenStart = new DOMPoint(start.x, start.y).matrixTransform(
+          path.getScreenCTM()!
+        );
+        const screenEnd = new DOMPoint(end.x, end.y).matrixTransform(
+          path.getScreenCTM()!
+        );
         const style = getComputedStyle(path),
           hitStyle = getComputedStyle(hitbox);
         const arrowStyle = getComputedStyle(arrow);
@@ -107,16 +145,22 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
           hitPath: hitbox.getAttribute('d'),
           length,
           painted:
-            style.display !== 'none' &&
-            style.visibility !== 'hidden' &&
-            Number(style.opacity) > 0 &&
+            visible(path) &&
+            style.stroke !== 'none' &&
             Number(style.strokeOpacity) > 0 &&
             parseFloat(style.strokeWidth) > 0,
-          hit:
-            hitStyle.display !== 'none' && hitStyle.pointerEvents === 'stroke',
+          hit: visible(hitbox) && hitStyle.pointerEvents === 'stroke',
           arrowVisible:
-            arrowStyle.display !== 'none' && Number(arrowStyle.opacity) > 0,
+            visible(arrow) &&
+            ((arrowStyle.fill !== 'none' &&
+              Number(arrowStyle.fillOpacity) > 0) ||
+              (arrowStyle.stroke !== 'none' &&
+                Number(arrowStyle.strokeOpacity) > 0 &&
+                parseFloat(arrowStyle.strokeWidth) > 0)) &&
+            arrow.getTotalLength() > 0,
           end: { x: end.x, y: end.y },
+          screenStart: { x: screenStart.x, y: screenStart.y },
+          screenEnd: { x: screenEnd.x, y: screenEnd.y },
           tangent: Math.atan2(end.y - near.y, end.x - near.x),
           arrow: matrix
             ? {
@@ -127,19 +171,42 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
             : null,
         };
       });
-      return rows.sort((a, b) => a.id.localeCompare(b.id));
+      return { cards, rows: rows.sort((a, b) => a.id.localeCompare(b.id)) };
     });
-    expect(geometry.map(row => row.id)).toEqual(
+    expect(geometry.rows.map(row => row.id)).toEqual(
       before.edges.map((edge: { id: string }) => edge.id)
     );
-    for (const row of geometry) {
+    for (const row of geometry.rows) {
+      const original = before.edges.find(
+        (edge: { id: string }) => edge.id === row.id
+      )!;
+      for (const [id, point] of [
+        [original.source.id, row.screenStart],
+        [original.target.id, row.screenEnd],
+      ] as const) {
+        const card = geometry.cards.find(card => card.id === id)!;
+        expect(card).toBeTruthy();
+        expect(point.x).toBeGreaterThanOrEqual(card.x - 0.01);
+        expect(point.x).toBeLessThanOrEqual(card.x + card.width + 0.01);
+        expect(point.y).toBeGreaterThanOrEqual(card.y - 0.01);
+        expect(point.y).toBeLessThanOrEqual(card.y + card.height + 0.01);
+        expect(
+          Math.min(
+            Math.abs(point.x - card.x),
+            Math.abs(point.x - card.x - card.width),
+            Math.abs(point.y - card.y),
+            Math.abs(point.y - card.y - card.height)
+          ),
+          'Wire must meet the original directed endpoint'
+        ).toBeLessThan(0.01);
+      }
       expect(row.tag).toBe('path');
       expect(row.path).toBeTruthy();
       expect(row.hitPath).toBe(row.path);
       expect(row.length).toBeGreaterThan(1);
-      expect(row.painted).toBe(true);
+      expect(row.painted, 'Item wire must be painted').toBe(true);
       expect(row.hit).toBe(true);
-      expect(row.arrowVisible).toBe(true);
+      expect(row.arrowVisible, 'Item arrow must be painted').toBe(true);
       expect(row.arrow).toBeTruthy();
       expect(row.arrow!.x).toBeCloseTo(row.end.x, 2);
       expect(row.arrow!.y).toBeCloseTo(row.end.y, 2);
@@ -156,6 +223,58 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
     await info.attach(name, { path: png, contentType: 'image/png' });
   };
   await capture('initial-item-wires');
+  for (const negative of [
+    {
+      selector: '.edges-group',
+      property: 'opacity',
+      value: '0',
+      error: 'Item wire must be painted',
+    },
+    {
+      selector: '.edges-group .edge',
+      property: 'stroke',
+      value: 'none',
+      error: 'Item wire must be painted',
+    },
+    {
+      selector: '.arrows-group',
+      property: 'display',
+      value: 'none',
+      error: 'Item arrow must be painted',
+    },
+  ]) {
+    const target = page
+      .locator(`.graph-container ${negative.selector}`)
+      .first();
+    const original = await target.evaluate((element, change) => {
+      const style = (element as SVGElement).style;
+      const original = {
+        value: style.getPropertyValue(change.property),
+        priority: style.getPropertyPriority(change.property),
+      };
+      style.setProperty(change.property, change.value);
+      return original;
+    }, negative);
+    try {
+      await expect(capture('invisible-item-negative')).rejects.toThrow(
+        negative.error
+      );
+    } finally {
+      await target.evaluate(
+        (element, restore) => {
+          const style = (element as SVGElement).style;
+          if (restore.value)
+            style.setProperty(
+              restore.property,
+              restore.value,
+              restore.priority
+            );
+          else style.removeProperty(restore.property);
+        },
+        { property: negative.property, ...original }
+      );
+    }
+  }
   const label = labels.first();
   const edgeId = await label.getAttribute('data-edge-id');
   const initialT = await label.evaluate(el => (el as any).__data__.labelT);
@@ -213,12 +332,30 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
   await expect(
     editor.getByRole('button', { name: 'Flip Direction', exact: true })
   ).toBeVisible();
+  const original = before.edges.find(
+    (edge: { id: string }) => edge.id === edgeId
+  )!;
+  const title = (id: string) =>
+    before.workItems.find((node: { id: string }) => node.id === id)!.title;
+  const assertOriginalEditor = async () => {
+    await expect(
+      editor.getByText(
+        `Editing relationship: ${title(original.source.id)} → ${title(original.target.id)}`,
+        { exact: true }
+      )
+    ).toBeVisible();
+    await expect(editor.getByRole('button', { pressed: true })).toHaveText(
+      original.type === 'DEPENDS_ON' ? 'Depends On' : 'Blocks'
+    );
+  };
+  await assertOriginalEditor();
   await editor
     .getByRole('button', { name: 'Close relationship editor', exact: true })
     .click();
   await expect(editor).toHaveCount(0);
   await label.click();
   await expect(editor).toBeVisible();
+  await assertOriginalEditor();
   await editor
     .getByRole('button', { name: 'Close relationship editor', exact: true })
     .click();

From 6ac0f4836e5a20aa7834a722bd03a48b830b1b54 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 00:12:51 -0700
Subject: [PATCH 06/19] test(graph): exercise empty hidden-label measurements
 explicitly

---
 ...28-hidden-labels-need-valid-measurement.md | 23 +++++++++++++++++++
 tests/e2e/graph/item-wire-consumers.spec.ts   | 18 +++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
index bef3ec9f..24de23b6 100644
--- a/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
+++ b/.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md
@@ -62,3 +62,26 @@ selected type. Relationship type buttons expose their selected state through
 `aria-pressed`. Local discovery still finds2 cases and scoped web types pass;
 actual browser acceptance is pending. These were source-review findings,
 not locally executed browser negatives.
+
+On2026-10-28, exact source `93fe6d2` CI40646515194 failed the hidden-size case:
+expected at least104, received94.90625. The other item-wire case passed,
+including paint negatives and actual dragging/editing. Chromium had returned
+valid measured text dimensions smaller than the conservative estimate; the
+assertion incorrectly assumed hidden SVG always measures zero. This is a test
+precondition defect, not evidence that valid94.90625-unit geometry clips text.
+The amended case deliberately returns an empty box only for hidden edge text,
+counts that branch and retains the full-size/background/visibility assertions.
+
+The owner then requested a visible headed browser. A single installed Chrome,
+one worker, zero retries, on isolated preview28917/API28918 and the previously
+owned Neo4j28687 exercised the regression. With only the positive-measurement
+production guard removed from the disposable preview, the actual case failed
+with width36 versus104, after confirming an empty measurement. Restoring the
+unchanged production guard made both item-wire cases pass in21.9s. Traces,
+screenshots and logs are retained under `item-hidden-negative` and
+`item-wires-headed-positive` in the20261027 evidence directory. This reused a
+matching dependency installation for scoped preview evidence; it is not a
+clean-install/full-tree acceptance run. The source PR remains subject to fresh
+CI and independent review. The owner's further feedback about clipping,
+overlap, tiny text and wasteful cards requires broader visual acceptance;
+passing these two interaction cases does not resolve that feedback.
diff --git a/tests/e2e/graph/item-wire-consumers.spec.ts b/tests/e2e/graph/item-wire-consumers.spec.ts
index 389412aa..94d44c39 100644
--- a/tests/e2e/graph/item-wire-consumers.spec.ts
+++ b/tests/e2e/graph/item-wire-consumers.spec.ts
@@ -400,6 +400,22 @@ test('initially hidden item labels retain full conservative sizing @item-wires',
     localStorage.setItem('currentGraphId', id);
     localStorage.setItem('graphdone:viewMode', 'graph');
   }, seeded.graphId);
+  await page.addInitScript(() => {
+    const measure = SVGGraphicsElement.prototype.getBBox;
+    (window as any).__hiddenLabelMeasurements = 0;
+    SVGGraphicsElement.prototype.getBBox = function (...args) {
+      const group = this.closest('.edge-label-group');
+      if (
+        this.matches('text.edge-label') &&
+        group &&
+        getComputedStyle(group).display === 'none'
+      ) {
+        (window as any).__hiddenLabelMeasurements++;
+        return new DOMRect();
+      }
+      return measure.apply(this, args);
+    };
+  });
   await page.goto('/');
   await expect(page.locator('.graph-container .node')).toHaveCount(2);
   const label = page.locator('.graph-container .edge-label-group');
@@ -410,6 +426,7 @@ test('initially hidden item labels retain full conservative sizing @item-wires',
     const text = el.querySelector('.edge-label')!.textContent!;
     return {
       text,
+      emptyMeasurements: (window as any).__hiddenLabelMeasurements,
       width: (el as any).__data__._labelDims.width,
       backgroundWidth: Number(
         el.querySelector('.edge-label-bg')!.getAttribute('width')
@@ -417,6 +434,7 @@ test('initially hidden item labels retain full conservative sizing @item-wires',
       display: getComputedStyle(el).display,
     };
   });
+  expect(sizing.emptyMeasurements).toBeGreaterThan(0);
   expect(sizing.width).toBeGreaterThanOrEqual(sizing.text.length * 7 + 34);
   expect(sizing.backgroundWidth).toBe(sizing.width);
   expect(sizing.display).toBe('none');

From 351749f62b9dc9a8760fc150ecc9547cd2f020ae Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 07:18:40 -0700
Subject: [PATCH 07/19] feat(graph): reserve readable adaptive card and label
 geometry

---
 ...readable-symbols-need-reserved-geometry.md |  16 +
 .agents/issues/INDEX.md                       |   2 +
 .../InteractiveGraphVisualization.tsx         | 657 +++++-------------
 .../SemanticRelationshipBrowser.tsx           |   7 +-
 .../lib/__tests__/edgeRouteGeometry.test.ts   |  73 ++
 .../lib/__tests__/graphSymbolLayout.test.ts   |  89 +++
 packages/web/src/lib/edgeRouteGeometry.ts     | 139 +++-
 packages/web/src/lib/graphSymbolLayout.ts     | 138 ++++
 8 files changed, 594 insertions(+), 527 deletions(-)
 create mode 100644 .agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
 create mode 100644 packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
 create mode 100644 packages/web/src/lib/graphSymbolLayout.ts

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
new file mode 100644
index 00000000..e378896d
--- /dev/null
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -0,0 +1,16 @@
+# Readable graph symbols need one reserved geometry model
+
+2026-10-28: the owner reported clipped relationship labels, overlaps, tiny task/feature text and wasted card space during a headed review. Issue #222 tracks the correction; #220 still owns full item routing and buses.
+
+Evidence from an owned two-item, two-opposite-relationship fixture:
+- Before correction, computed opacity was 0.707107 on both the label group and text: the effective text opacity was 0.5.
+- The old card renderer used fixed type dimensions and duplicated character-count wrapping. Enlarging title glyphs at lower zoom did not reserve matching width/height.
+- New focused geometry tests initially failed on exact equality of a rotated arrow coordinate (`-1.3322676295501878e-15` versus `0`). Using approximate equality for that coordinate preserves the actual geometric assertion.
+- `vitest run src/lib/__tests__/graphSymbolLayout.test.ts src/lib/__tests__/edgeRouteGeometry.test.ts --maxWorkers=1`: 18 passed, 2026-10-28. Scoped web TypeScript passed after correcting D3 nullable overloads and removed transform arguments. These checks reused an owned dependency fixture, not a clean full-tree install.
+- Headed inspection at approximately 0.72 zoom showed a compact card footprint 136.41 by 32.98 screen pixels with title ink inside it. This is small-fixture evidence only.
+
+Cause: text layout, title scaling, card dimensions, route endpoints and label admission were separate decisions. Labels also ignored other wires and arrowheads, and group/child opacity compounded.
+
+Corrective rule: measure text and reserve its displayed footprint before drawing. Cards and routes consume the same current presentation geometry; secondary rows retreat before readable primary text. Admit a complete label only when its footprint clears cards, labels, wires and arrows; expose original relationships when the drawing cannot display all labels. A small attractive fixture cannot establish large-graph acceptance: test thousands of real loaded items through zoom-out and return-to-detail, with explicit resource budgets and no viewing-induced writes.
+
+Limits: current item paths are still straight and can cross. This checkpoint does not establish full label/UI obstacle handling, all phone/zoom interactions, bounded thousands-of-item performance, or complete schematic routing. Strict browser regressions, deliberate negative controls, CI and independent review remain required in #222. Preserve earlier failed logs and never count skipped or cancelled tests as passes.
diff --git a/.agents/issues/INDEX.md b/.agents/issues/INDEX.md
index 79e829a6..97d281a9 100644
--- a/.agents/issues/INDEX.md
+++ b/.agents/issues/INDEX.md
@@ -46,3 +46,5 @@
 | MCP tool calls succeed but the stdio client reports JSON parse errors from startup, CPU or consistency messages | [Successful MCP calls do not prove a clean stdio protocol](../inbox/2026-10-23-mcp-stdio-diagnostics.md); `packages/mcp-server/tests/neo4j-contract.test.ts` checks real subprocess traffic and stderr diagnostics |
 | `dev` has an owner-authorized admin exemption; a review-rule blocker or docs-only change tempts skipping validation | [Dev admin integration playbook](../playbooks/dev-admin-integration.md); [dated authorization and merge evidence](../inbox/2026-10-23-dev-admin-integration.md). Admin authority is not a non-author approval; verify final branch CI before closeout |
 | A federation upgrade removes UUID findings but breaks Neo4j schema generation; an override leaves the old lock resolution | [Validate federation consumers and installed UUID paths](../inbox/2026-10-27-federation-consumers-bound-uuid-upgrades.md); `tests/lib/dependencies/uuid.test.mjs` |
+
+| Tiny card text, wasted space, clipped or wire-overlapped labels after zoom | [Reserve the displayed symbol footprint](../inbox/2026-10-28-readable-symbols-need-reserved-geometry.md); `graphSymbolLayout.test.ts`, `edgeRouteGeometry.test.ts`; issue #222 requires actual browser and thousands-of-item evidence |
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 725f4f53..d504c307 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -2,6 +2,8 @@ import { skipBackgroundPoll } from '../lib/hostedUsage';
 import { QuickEditSurface } from './QuickEditSurface';
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { SemanticGraphOverview } from './SemanticGraphOverview';
+import { SemanticRelationshipBrowser } from './SemanticRelationshipBrowser';
+import { indexSemanticRelationships, type RelationshipScope } from '../lib/semanticRelationships';
 import { LayoutSaveStatus } from './LayoutSaveStatus';
 import ReactDOM from 'react-dom/client';
 import { createPortal } from 'react-dom';
@@ -50,8 +52,9 @@ import { useAdaptiveQuality } from '../hooks/useAdaptiveQuality';
 import { nodeLifeClasses, nodeGlowFilter, isActiveStatus, isCompletedStatus, edgeFlowClass } from '../lib/nodeAnimations';
 import { mergeSimulationNodes, mergeSimulationEdges } from '../lib/graphDataMerge';
 import type { ObstacleBox } from '../lib/edgeLabelLayout';
-import { createParallelEdgeRoute, edgeRouteLabel, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
+import { createParallelEdgeRoute, edgeRouteLabel, edgeRouteArrowBounds, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
 import { PerfMeter, DriftMeter } from '../lib/perfMeter';
+import { graphItemLayout, measureGraphText, edgeLabelDimensions, GRAPH_FONT_FAMILY, ITEM_TITLE_SIZE, ITEM_TITLE_LINE, ITEM_HEADER_HEIGHT, EDGE_LABEL_SIZE } from '../lib/graphSymbolLayout';
 import { separateCards } from '../lib/separateCards';
 import { DEFAULT_PHYSICS, collisionRadius, linkDistance, linkMaxDistance, linkStrength } from '../lib/physicsConfig';
 import { computeCompactLayout, isHierarchicalLayout, parseLayoutMode, LAYOUT_MODE_STORAGE_KEY, type LayoutMode } from '../lib/layoutAlgorithms';
@@ -106,7 +109,6 @@ const getSmoothedOpacity = (scale: number, threshold: number, fadeRange: number
 // zoom IN to read a label, counter-scale the title/type so their ON-SCREEN size
 // never drops below a readable floor within the working band. Beyond the band
 // the existing LOD opacity cull still hides them for overview/perf.
-const TITLE_BASE_PX = 14; // matches .node-title-text font-size
 const TYPE_BASE_PX = 13;  // matches .node-type-text font-size
 const LEGIBLE_FLOOR_PX = 12; // smallest on-screen size we keep text at
 const LEGIBLE_MAX_BOOST = 1.9; // cap the counter-scale so text never balloons
@@ -128,18 +130,38 @@ const legibilityTransform = (cy: number, basePx: number, k: number) => {
 
 // The legibility boost must never let text escape its card. The full title
 // remains available in the editor; at overview zoom the card is the boundary.
-function fittedTitleTransform(element: SVGGElement, k: number): string {
+function fittedTitleTransform(element: SVGGElement): string {
   const cy = Number(element.getAttribute('data-cy')) || 0;
-  const card = element.parentElement?.querySelector('.node-bg');
-  const box = element.getBBox();
-  const width = Number(card?.getAttribute('width')) || 170;
-  const height = Number(card?.getAttribute('height')) || 110;
-  const top = -height / 2 + 34;
-  const bottom = height / 2 - 32;
-  const availableHeight = Math.max(1, 2 * Math.min(cy - top, bottom - cy));
-  const boost = Math.min(legibilityScale(TITLE_BASE_PX, k),
-    (width - 16) / Math.max(1, box.width), availableHeight / Math.max(1, box.height));
-  return `translate(0,${cy}) scale(${boost}) translate(0,${-cy})`;
+  const scale = Number(element.getAttribute('data-title-scale')) || 1;
+  return `translate(0,${cy}) scale(${scale}) translate(0,${-cy})`;
+}
+
+function renderItemTitle(element: SVGGElement, item: WorkItem, layout: ReturnType<typeof graphItemLayout>) {
+  const node = d3.select(element);
+  node.selectAll('.node-title-group').remove();
+  const group = node.append('g').attr('class', 'node-title-group').attr('data-cy', layout.titleCenterY).attr('data-title-scale', layout.titleScale);
+  group.append('title').text(item.title);
+  layout.title.forEach((line, index) => {
+    group.append('text').attr('class', 'node-title-text').attr('x', 0).attr('y', layout.titleY + index * ITEM_TITLE_LINE)
+      .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').text(line)
+      .style('font-family', GRAPH_FONT_FAMILY).style('font-size', `${ITEM_TITLE_SIZE}px`).style('font-weight', '600')
+      .style('fill', isCompletedStatus(item.status) ? '#b9c7d7' : '#f1f5f9').style('pointer-events', 'none');
+  });
+  group.attr('transform', fittedTitleTransform(group.node()!));
+}
+
+function renderItemMetadata(element: SVGGElement, item: WorkItem, layout: ReturnType<typeof graphItemLayout>) {
+  const group = d3.select(element);
+  group.selectAll('.node-meta').remove();
+  const meta = group.append('g').attr('class', 'node-meta').style('pointer-events', 'none').style('display', () => layout.compact ? 'none' : null);
+  const status = getStatusConfig(item.status as WorkItemStatus);
+  const priority = Math.round((item.priority || 0) * 100);
+  meta.append('circle').attr('cx', -layout.width / 2 + 17).attr('cy', layout.footerY).attr('r', 3.5).attr('fill', status.hexColor);
+  meta.append('text').attr('class', 'status-percentage-text').attr('x', -layout.width / 2 + 28).attr('y', layout.footerY)
+    .attr('dominant-baseline', 'middle').text(status.label).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '12px').style('font-weight', '500').style('fill', '#dbe5ee');
+  meta.append('text').attr('class', 'priority-percentage-text').attr('x', layout.width / 2 - 14).attr('y', layout.footerY)
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle').text(`P ${priority}%`).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '12px').style('font-weight', '500').style('fill', '#b9c7d7')
+    .append('title').text(`Priority ${priority}%`);
 }
 
 // Hex color → normalized 0..1 RGB for SVG feColorMatrix glow filters.
@@ -458,6 +480,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
   }, [selectedNode, onNodeSelected]);
   const lastSelectedNodeRef = useRef<any>(null); // Track last selected node for centering
   const [selectedEdge, setSelectedEdge] = useState<WorkItemEdge | null>(null);
+  const [itemLabelCount, setItemLabelCount] = useState(0);
+  const [itemRelationshipScope, setItemRelationshipScope] = useState<RelationshipScope | null>(null);
+  useEffect(() => { setItemRelationshipScope(null); setItemLabelCount(0); }, [currentGraph?.id]);
   const [createNodePosition, setCreateNodePosition] = useState<{ x: number; y: number; z: number } | undefined>(undefined);
   const [currentTransform, setCurrentTransform] = useState({ x: 0, y: 0, scale: 1 });
   const [editingEdge, setEditingEdge] = useState<{ edge: WorkItemEdge; position: { x: number; y: number } } | null>(null);
@@ -1141,11 +1166,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         .style('opacity', getSmoothedOpacity(scale, LOD_THRESHOLDS.FAR));
       (g.selectAll('.node-title-text') as any)
         .style('visibility', 'visible')
-        .style('opacity', getSmoothedOpacity(scale, TITLE_VISIBLE_SCALE));
+        .style('opacity', scale >= 0.3 ? 1 : 0);
       (g.selectAll('.node-title-group') as any)
         .attr('transform', function(this: any) {
           const cy = +(this.getAttribute('data-cy')) || 0;
-          return fittedTitleTransform(this as SVGGElement, scale);
+          return fittedTitleTransform(this as SVGGElement);
         });
       (g.selectAll('.node-description-text') as any)
         .style('visibility', 'visible')
@@ -1567,58 +1592,16 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     return undefined;
   };
 
-  // Helper function to calculate node dimensions (shared between init and update)
-  const getNodeDimensions = useCallback((d: WorkItem) => {
-    // Larger base dimensions by type - increased for 3-line support
-    const baseDimensions = (() => {
-      switch (d.type) {
-        case 'EPIC': return { width: 200, height: 120 };
-        case 'MILESTONE': return { width: 190, height: 115 };
-        case 'FEATURE': return { width: 180, height: 110 };
-        case 'OUTCOME': return { width: 185, height: 115 };
-        case 'TASK': return { width: 170, height: 105 };
-        case 'BUG': return { width: 165, height: 100 };
-        case 'IDEA': return { width: 160, height: 95 };
-        default: return { width: 170, height: 105 };
-      }
-    })();
-
-    // Use base width for consistent layout
-    const width = baseDimensions.width;
-
-    // Calculate actual text wrapping based on word breaks - up to 3 lines
-    const maxCharsPerLine = Math.floor(width / 8); // ~8px per character for more conservative wrapping
-    const words = d.title.split(' ');
-    let lines = 1;
-    let currentLineLength = 0;
-
-    for (const word of words) {
-      const wordLength = word.length;
-      // Check if adding this word would exceed line length
-      if (currentLineLength + wordLength + 1 > maxCharsPerLine && currentLineLength > 0) {
-        lines++;
-        currentLineLength = wordLength;
-        if (lines >= 3) break; // Maximum 3 lines
-      } else {
-        currentLineLength += wordLength + (currentLineLength > 0 ? 1 : 0); // +1 for space
-      }
-    }
+  const itemRelationshipIndex = useMemo(() => indexSemanticRelationships(workItems, workItemEdges), [workItems, workItemEdges]);
 
-    lines = Math.min(lines, 3); // Maximum 3 lines
-
-    // Height is the SUM of the content rows, not a guess: title bar (28) +
-    // gap (12) + title lines (16 each) + description row (22 when present) +
-    // status/priority block (42) anchored at the bottom. A fixed base height
-    // let long titles overlap the status row.
-    const contentHeight = 28 + 12 + lines * 16 + (d.description ? 22 : 6) + 42;
-    const finalHeight = Math.max(baseDimensions.height, contentHeight);
-
-    return {
-      width: width,
-      height: finalHeight,
-      titleLines: lines,
-      maxCharsPerLine: maxCharsPerLine
-    };
+  const itemPresentationScaleRef = useRef(1);
+  const itemLayoutCache = useRef(new WeakMap<object, { title: string; type: string; description: unknown; subgraphId: unknown; scale: number; layout: ReturnType<typeof graphItemLayout> }>());
+  const getNodeDimensions = useCallback((d: WorkItem) => {
+    const cached = itemLayoutCache.current.get(d);
+    if (cached && cached.title === d.title && cached.type === d.type && cached.description === d.description && cached.subgraphId === d.subgraphId && cached.scale === itemPresentationScaleRef.current) return cached.layout;
+    const layout = graphItemLayout(d, measureGraphText, itemPresentationScaleRef.current);
+    itemLayoutCache.current.set(d, { title: d.title, type: d.type, description: d.description, subgraphId: d.subgraphId, scale: itemPresentationScaleRef.current, layout });
+    return layout;
   }, []);
 
   // Smart data update function - only reinitializes when necessary, preserves camera position
@@ -1697,82 +1680,12 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       const updatedNode = nodes.find(n => n.id === d.id);
       if (!updatedNode) return;
 
-      // Update title text elements (must mirror the creation path exactly,
-      // or cards shift layout on every poll — incl. the legibility-floor group)
-      nodeGroup.selectAll('.node-title-group').remove();
-      nodeGroup.selectAll('.node-title-text').remove();
-      const maxCharsPerLine = getNodeDimensions(updatedNode).maxCharsPerLine;
-      const maxLines = 3;
-      let lines: string[] = [];
-      const words = updatedNode.title.split(' ');
-      let currentLine = '';
-
-      for (const word of words) {
-        const testLine = currentLine ? `${currentLine} ${word}` : word;
-        if (testLine.length > maxCharsPerLine && currentLine) {
-          lines.push(currentLine);
-          currentLine = word;
-          if (lines.length >= maxLines) break;
-        } else {
-          currentLine = testLine;
-        }
-      }
-      if (currentLine && lines.length < maxLines) {
-        lines.push(currentLine);
-      }
-      if (lines.length === 0) {
-        lines.push(updatedNode.title.substring(0, maxCharsPerLine - 3) + '...');
-      }
-
       const dimensions = getNodeDimensions(updatedNode);
-      const titleBarHeight = 28;
-      const startY = -dimensions.height / 2 + titleBarHeight + 18;
-      const liveK = svgRef.current ? d3.zoomTransform(svgRef.current).k : 1;
-      const titleCy = startY + ((lines.length - 1) * 16) / 2;
-      const titleGroup = nodeGroup.append('g')
-        .attr('class', 'node-title-group')
-        .attr('data-cy', titleCy)
-        .attr('transform', legibilityTransform(titleCy, TITLE_BASE_PX, liveK));
-      lines.forEach((line, index) => {
-        titleGroup.append('text')
-          .attr('class', 'node-title-text')
-          .attr('x', 0)
-          .attr('y', startY + (index * 16))
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle')
-          .text(line)
-          .style('opacity', getSmoothedOpacity(liveK, TITLE_VISIBLE_SCALE))
-          .style('font-size', '14px')
-          .style('font-weight', '600')
-          .style('fill', () => {
-            const isCompleted = updatedNode.status === 'COMPLETED' || updatedNode.status === 'Completed' || updatedNode.status === 'Done' || updatedNode.status === 'DONE';
-            return isCompleted ? '#9ca3af' : '#ffffff';
-          })
-          .style('pointer-events', 'none');
-      });
-
-      titleGroup.attr('transform', function() { return fittedTitleTransform(this as SVGGElement, liveK); });
-
-      // Saved state must update on the canvas without rebuilding the graph.
-      const status = getStatusConfig(updatedNode.status as WorkItemStatus);
-      const completion = getStatusCompletionPercentage(updatedNode.status as WorkItemStatus);
-      nodeGroup.select('.status-percentage-text').text(status.label).style('fill', status.hexColor);
-      nodeGroup.select('.status-progress-fill').attr('width', 40 * completion / 100).attr('fill', status.hexColor);
-      nodeGroup.select('.status-icon-svg path').attr('d', getStatusIconSvgPath(updatedNode.status)).attr('stroke', status.hexColor);
-      const priority = updatedNode.priority || 0;
-      const priorityColor = priority >= .8 ? '#ef4444' : priority >= .6 ? '#f97316' : priority >= .4 ? '#eab308' : priority >= .2 ? '#3b82f6' : '#6b7280';
-      nodeGroup.select('.priority-percentage-text').text(`${Math.round(priority * 100)}%`).style('fill', priorityColor);
-      nodeGroup.select('.priority-progress-fill').attr('width', 40 * priority).attr('fill', priorityColor);
-      nodeGroup.select('.priority-icon-svg path').attr('d', getPriorityIconSvgPath(priority)).attr('stroke', priorityColor);
+      renderItemTitle(this as SVGGElement, updatedNode, dimensions);
+      renderItemMetadata(this as SVGGElement, updatedNode, dimensions);
       const completed = isCompletedStatus(updatedNode.status);
       nodeGroup.select('.node-bg').attr('class', `node-bg ${nodeLifeClasses(updatedNode.status)}`)
         .attr('fill', completed ? '#374151' : '#1f2937');
-      nodeGroup.selectAll('.completion-indicator').data(completed ? [updatedNode] : []).join('text')
-        .attr('class', 'completion-indicator').attr('text-anchor', 'middle').attr('dominant-baseline', 'central')
-        .attr('x', 0)
-          .attr('y', (d: any) => getNodeDimensions(d).height / 2 - 13)
-          .attr('font-size', '18').attr('font-weight', '900').attr('fill', '#10b981').attr('stroke', '#10b981')
-        .attr('stroke-width', '1').attr('pointer-events', 'none').text('✓');
 
       // Update node type badge text
       nodeGroup.select('.node-type-text')
@@ -1781,18 +1694,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           return config.label.toUpperCase();
         });
 
-      // Update description — mirror the build path's honest preview exactly
-      // (width-responsive truncation + ellipsis), or the card text mutates on
-      // the next data poll.
-      nodeGroup.select('.node-description-text')
-        .text(() => {
-          if (!updatedNode.description) return '';
-          const maxLength = Math.floor(getNodeDimensions(updatedNode).width / 6.5);
-          const oneLine = updatedNode.description.replace(/\s+/g, ' ').trim();
-          return oneLine.length > maxLength
-            ? oneLine.slice(0, Math.max(1, maxLength - 1)).trimEnd() + '…'
-            : oneLine;
-        });
+      nodeGroup.select('.node-description-text').text(dimensions.description);
     });
 
     // Physics is one-shot: it settles a graph, then stays idle. A routine
@@ -2029,7 +1931,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     // Imported or previously saved coordinates can already intersect. Pins
     // prevent any collision force from fixing that. Repair once before paint,
     // then persist the repaired snapshot through the normal settle queue.
-    const repairedCards = separateCards(nodes, getNodeDimensions);
+    const repairedCards = separateCards(nodes, node => graphItemLayout(node, measureGraphText));
     nodes.forEach((node: any) => {
       if (repairedCards.has(node.id) && node.fx != null) {
         node.fx = node.x;
@@ -2161,8 +2063,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       e._pIndex = info ? info.index : 0;
       e._pTotal = info ? info.total : 1;
       const label = getRelationshipConfig(e.type as RelationshipType)?.label || '';
-      e._labelDims = { width: label.length * 7 + 36, height: 22 };
-      e._labelIconCenter = { x: -e._labelDims.width / 2 + 13, y: 0 };
+      e._labelDims = edgeLabelDimensions(measureGraphText(label, EDGE_LABEL_SIZE));
+      e._labelIconCenter = { x: -e._labelDims.width / 2 + 15, y: 0 };
     });
     const liveScale = svg.node() ? d3.zoomTransform(svg.node() as Element).k : 1;
     // Arrow opacity routed through the edge LOD module: hidden direction → 0,
@@ -2608,7 +2510,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       });
 
     // Colored title bar at top (like Monopoly property cards)
-    const titleBarHeight = 28;
+    const titleBarHeight = ITEM_HEADER_HEIGHT;
     nodeElements.append('rect')
       .attr('class', 'node-title-bar')
       .attr('x', (d: WorkItem) => -getNodeDimensions(d).width / 2 + 2)
@@ -2650,7 +2552,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('dominant-baseline', 'central')
       .text((d: WorkItem) => d.type)
       .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.FAR ? 1 : 0)
-      .style('font-size', '13px')
+      .style('font-size', '12px')
+      .style('font-family', GRAPH_FONT_FAMILY)
       .style('font-weight', '700')
       .style('fill', (d: WorkItem) => {
         const config = getTypeConfig(d.type as WorkItemType);
@@ -3023,114 +2926,19 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         return `▸ ${n} nodes · ${e} edges`;
       });
 
-    // Node title section - with text wrapping
-    nodeElements.each(function(d: WorkItem) {
-      const nodeGroup = d3.select(this);
-      const dimensions = getNodeDimensions(d);
-      const { maxCharsPerLine } = dimensions;
-      
-      // Split title into lines with proper word wrapping - 3-line maximum
-      const words = d.title.split(' ');
-      const lines: string[] = [];
-      let currentLine = '';
-      let hasMoreText = false;
-      
-      for (let i = 0; i < words.length; i++) {
-        const word = words[i];
-        const testLine = currentLine + (currentLine ? ' ' : '') + word;
-        
-        // Check if this line would be too long
-        if (testLine.length <= maxCharsPerLine) {
-          currentLine = testLine;
-        } else {
-          // Need to wrap to next line
-          if (lines.length < 2) {
-            // Can still add another line (we allow up to 3 lines)
-            lines.push(currentLine || word); // Handle case where first word is too long
-            currentLine = currentLine ? word : '';
-          } else {
-            // Already have 2 lines, this would be fourth line - truncate
-            hasMoreText = true;
-            break;
-          }
-        }
-      }
-      
-      // Add the final line
-      if (currentLine) {
-        if (hasMoreText && lines.length === 2) {
-          // Truncate third line with ellipsis
-          const availableSpace = maxCharsPerLine - 3; // Reserve space for "..."
-          const truncated = currentLine.length > availableSpace 
-            ? currentLine.substring(0, availableSpace) + '...'
-            : currentLine + '...';
-          lines.push(truncated);
-        } else {
-          lines.push(currentLine);
-        }
-      }
-      
-      // Ensure we always have at least one line
-      if (lines.length === 0) {
-        lines.push(d.title.substring(0, maxCharsPerLine - 3) + '...');
-      }
-      
-      // Create text elements for each line, inside a group that the legibility
-      // floor counter-scales as a unit (font + line-spacing together → readable
-      // when zoomed out, no overlap). data-cy = the title block's vertical center
-      // so the scale grows about the title, not the node origin. (PR-4)
-      const startY = -dimensions.height / 2 + titleBarHeight + 18;
-      const liveK = svgRef.current ? d3.zoomTransform(svgRef.current).k : 1;
-      const titleCy = startY + ((lines.length - 1) * 16) / 2;
-      const titleGroup = nodeGroup.append('g')
-        .attr('class', 'node-title-group')
-        .attr('data-cy', titleCy)
-        .attr('transform', legibilityTransform(titleCy, TITLE_BASE_PX, liveK));
-      lines.forEach((line, index) => {
-        titleGroup.append('text')
-          .attr('class', 'node-title-text')
-          .attr('x', 0)
-          .attr('y', startY + (index * 16))
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'middle')
-          .text(line)
-          .style('opacity', getSmoothedOpacity(liveK, TITLE_VISIBLE_SCALE))
-          .style('font-size', '14px')
-          .style('font-weight', '600')
-          .style('fill', () => {
-            const isCompleted = d.status === 'COMPLETED' || d.status === 'Completed' || d.status === 'Done' || d.status === 'DONE';
-            return isCompleted ? '#9ca3af' : '#ffffff';
-          })
-          .style('pointer-events', 'none');
-      });
-      titleGroup.attr('transform', function() { return fittedTitleTransform(this as SVGGElement, liveK); });
-
-    });
+    nodeElements.each(function(d: WorkItem) { renderItemTitle(this, d, getNodeDimensions(d)); });
 
     // Description section - bigger and more readable
     nodeElements.append('text')
       .attr('class', 'node-description-text')
       .attr('x', 0)
-      .attr('y', (d: WorkItem) => {
-        const dimensions = getNodeDimensions(d);
-        const titleLinesHeight = dimensions.titleLines * 16;
-        return -dimensions.height / 2 + titleBarHeight + 18 + titleLinesHeight + 8;
-      })
+      .attr('y', (d: WorkItem) => getNodeDimensions(d).descriptionY)
       .attr('text-anchor', 'middle')
       .attr('dominant-baseline', 'middle')
-      .text((d: WorkItem) => {
-        if (!d.description) return '';
-        // Honest preview: truncate with an ellipsis instead of silently hiding
-        // long descriptions (the old behavior made content vanish with no cue).
-        // The ⛶ expand icon / inspector show the full contents (PR-3/PR-4).
-        const maxLength = Math.floor(getNodeDimensions(d).width / 6.5);
-        const oneLine = d.description.replace(/\s+/g, ' ').trim();
-        return oneLine.length > maxLength
-          ? oneLine.slice(0, Math.max(1, maxLength - 1)).trimEnd() + '…'
-          : oneLine;
-      })
+      .text((d: WorkItem) => getNodeDimensions(d).description)
       .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
-      .style('font-size', '11px')
+      .style('font-size', '12px')
+      .style('font-family', GRAPH_FONT_FAMILY)
       .style('font-weight', '400')
       .style('fill', (d: WorkItem) => {
         const isCompleted = d.status === 'COMPLETED' || d.status === 'Completed' || d.status === 'Done' || d.status === 'DONE';
@@ -3138,212 +2946,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       })
       .style('pointer-events', 'none');
 
-    // Status progress bar and percentage (bottom left)
-    nodeElements.each(function(d: WorkItem) {
-      const nodeGroup = d3.select(this);
-      const dimensions = getNodeDimensions(d);
-      
-      // Calculate status percentage using centralized function
-      const statusPercentage = getStatusCompletionPercentage(d.status as WorkItemStatus);
-      
-      // Get status color from centralized constants
-      const statusColor = getStatusConfig(d.status as WorkItemStatus).hexColor;
-      
-      const barWidth = 40;
-      const barHeight = 3;
-      const barX = -dimensions.width / 2 + 8;
-      const barY = dimensions.height / 2 - 15;
-      
-      // Status progress bar background
-      nodeGroup.append('rect')
-        .attr('class', 'status-progress-bg')
-        .attr('x', barX)
-        .attr('y', barY)
-        .attr('width', barWidth)
-        .attr('height', barHeight)
-        .attr('rx', 1.5)
-        .attr('fill', '#374151')
-        .style('pointer-events', 'none');
-      
-      // Status progress bar fill
-      nodeGroup.append('rect')
-        .attr('class', 'status-progress-fill')
-        .attr('x', barX)
-        .attr('y', barY)
-        .attr('width', (barWidth * statusPercentage) / 100)
-        .attr('height', barHeight)
-        .attr('rx', 1.5)
-        .attr('fill', statusColor)
-        .style('pointer-events', 'none');
-      
-      // Status icon (SVG) - using centralized icon system
-      const statusLabelX = barX + barWidth / 2 - 8;
-      const statusIconX = statusLabelX + 15; // Position after "Status" text
-      const statusConfig = getStatusConfig(d.status as any);
-      const statusIconSvg = nodeGroup.append('svg')
-        .attr('class', 'status-icon-svg')
-        .attr('x', statusIconX)
-        .attr('y', barY - 22)
-        .attr('width', 10)
-        .attr('height', 10)
-        .attr('viewBox', '0 0 24 24')
-        .style('pointer-events', 'none');
-      
-      // Add the correct icon path based on status
-      const statusIconPath = getStatusIconSvgPath(d.status as string);
-      if (statusIconPath) {
-        statusIconSvg.append('path')
-          .attr('d', statusIconPath)
-          .attr('fill', 'none')
-          .attr('stroke', statusColor)
-          .attr('stroke-width', '2')
-          .attr('stroke-linecap', 'round')
-          .attr('stroke-linejoin', 'round');
-      }
-
-      // Status label (above percentage)
-      nodeGroup.append('text')
-        .attr('class', 'status-label-text')
-        .attr('x', barX + barWidth / 2 - 8)
-        .attr('y', barY - 16)
-        .attr('text-anchor', 'middle')
-        .attr('dominant-baseline', 'middle')
-        .text('Status')
-        .style('font-size', '8px')
-        .style('font-weight', '400')
-        .style('fill', '#9ca3af')
-        .style('pointer-events', 'none');
-
-      // Status percentage text (above bar)
-      nodeGroup.append('text')
-        .attr('class', 'status-percentage-text')
-        .attr('x', barX + barWidth / 2)
-        .attr('y', barY - 4)
-        .attr('text-anchor', 'middle')
-        .attr('dominant-baseline', 'middle')
-        .text(statusConfig.label)
-        .style('font-size', '9px')
-        .style('font-weight', '500')
-        .style('fill', statusColor)
-        .style('pointer-events', 'none');
-    });
-
-    // Priority progress bar and percentage (bottom right)
     nodeElements.each(function(d: WorkItem) {
-      const nodeGroup = d3.select(this);
-      const dimensions = getNodeDimensions(d);
-      
-      const priority = d.priority || 0;
-      const priorityPercentage = Math.round(priority * 100);
-      
-      // Get priority color
-      const priorityColor = (() => {
-        if (priority >= 0.8) return '#ef4444'; // Critical - red
-        if (priority >= 0.6) return '#f97316'; // High - orange  
-        if (priority >= 0.4) return '#eab308'; // Medium - yellow
-        if (priority >= 0.2) return '#3b82f6'; // Low - blue
-        return '#6b7280'; // Minimal - gray
-      })();
-      
-      const barWidth = 40;
-      const barHeight = 3;
-      const barX = dimensions.width / 2 - 8 - barWidth;
-      const barY = dimensions.height / 2 - 15;
-      
-      // Priority progress bar background
-      nodeGroup.append('rect')
-        .attr('class', 'priority-progress-bg')
-        .attr('x', barX)
-        .attr('y', barY)
-        .attr('width', barWidth)
-        .attr('height', barHeight)
-        .attr('rx', 1.5)
-        .attr('fill', '#374151')
-        .style('pointer-events', 'none');
-      
-      // Priority progress bar fill
-      nodeGroup.append('rect')
-        .attr('class', 'priority-progress-fill')
-        .attr('x', barX)
-        .attr('y', barY)
-        .attr('width', (barWidth * priorityPercentage) / 100)
-        .attr('height', barHeight)
-        .attr('rx', 1.5)
-        .attr('fill', priorityColor)
-        .style('pointer-events', 'none');
-      
-      // Priority icon (SVG) - using correct icon based on priority value
-      const priorityLabelX = barX + barWidth / 2;
-      const priorityIconX = priorityLabelX + 18 - 2; // Position after "Priority" text, shifted left by 2
-      const prioritySvg = nodeGroup.append('svg')
-        .attr('class', 'priority-icon-svg')
-        .attr('x', priorityIconX)
-        .attr('y', barY - 22)
-        .attr('width', 10)
-        .attr('height', 10)
-        .attr('viewBox', '0 0 24 24')
-        .style('pointer-events', 'none');
-      
-      // Add correct priority icon path
-      const priorityIconPath = getPriorityIconSvgPath(priority);
-      if (priorityIconPath) {
-        prioritySvg.append('path')
-          .attr('d', priorityIconPath)
-          .attr('fill', 'none')
-          .attr('stroke', priorityColor)
-          .attr('stroke-width', '2')
-          .attr('stroke-linecap', 'round')
-          .attr('stroke-linejoin', 'round');
-      }
-
-      // Priority label (above percentage)
-      nodeGroup.append('text')
-        .attr('class', 'priority-label-text')
-        .attr('x', barX + barWidth / 2)
-        .attr('y', barY - 16)
-        .attr('text-anchor', 'middle')
-        .attr('dominant-baseline', 'middle')
-        .text('Priority')
-        .style('font-size', '8px')
-        .style('font-weight', '400')
-        .style('fill', '#9ca3af')
-        .style('pointer-events', 'none');
-
-      // Priority percentage text (above bar)
-      nodeGroup.append('text')
-        .attr('class', 'priority-percentage-text')
-        .attr('x', barX + barWidth / 2)
-        .attr('y', barY - 4)
-        .attr('text-anchor', 'middle')
-        .attr('dominant-baseline', 'middle')
-        .text(`${priorityPercentage}%`)
-        .style('font-size', '9px')
-        .style('font-weight', '500')
-        .style('fill', priorityColor)
-        .style('pointer-events', 'none');
-    });
-
-    // Add completion indicators (checkmarks) for completed nodes
-    nodeElements.each(function(d: WorkItem) {
-      const nodeGroup = d3.select(this);
-      
-      // Add checkmark for completed nodes
-      if (d.status === 'COMPLETED' || d.status === 'Completed' || d.status === 'Done' || d.status === 'DONE') {
-        nodeGroup.append('text')
-          .attr('class', 'completion-indicator')
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'central')
-          .attr('x', 0)
-          .attr('y', (d: any) => getNodeDimensions(d).height / 2 - 13)
-          .attr('font-size', '18')
-          .attr('font-weight', '900')
-          .attr('fill', '#10b981')
-          .attr('stroke', '#10b981')
-          .attr('stroke-width', '1')
-          .attr('pointer-events', 'none')
-          .text('✓');
-      }
-      
+      renderItemMetadata(this, d, getNodeDimensions(d));
     });
 
     // Create arrow symbols for middle of edges
@@ -3381,8 +2985,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .append('g')
       .attr('class', 'edge-label-group')
       .attr('data-edge-id', (d: WorkItemEdge) => d.id)
-      .style('opacity', (d: any) => labelVisibility(liveScale, d._pTotal || 1))
-      .style('pointer-events', (d: any) => labelVisibility(liveScale, d._pTotal || 1) > 0 ? 'all' : 'none')
+      .style('opacity', (d: any) => (liveScale >= 0.6 ? 1 : 0))
+      .style('pointer-events', (d: any) => (liveScale >= 0.6 ? 1 : 0) > 0 ? 'all' : 'none')
       .style('cursor', 'pointer')
       .on('click', openEdgeEditor);
 
@@ -3394,10 +2998,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     edgeLabelGroups
       .append('text')
       .attr('class', 'edge-label')
-      .attr('x', (d: any) => -d._labelDims.width / 2 + 28)
+      .attr('x', (d: any) => -d._labelDims.width / 2 + 30)
       .attr('text-anchor', 'start')
       .attr('dominant-baseline', 'middle')
-      .style('font-size', '10px')
+      .style('font-size', `${EDGE_LABEL_SIZE}px`)
+      .style('font-family', GRAPH_FONT_FAMILY)
       .style('font-weight', '600')
       .style('fill', '#ffffff')
       .style('pointer-events', 'none')
@@ -3405,16 +3010,16 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         const config = getRelationshipConfig(d.type as RelationshipType);
         return config.label;
       })
-      .style('opacity', (d: WorkItemEdge) => labelVisibility(liveScale, (d as any)._pTotal || 1));
+      .style('opacity', 1);
 
     // Add icons positioned to the left of text
     edgeLabelGroups
       .append('foreignObject')
-      .style('opacity', (d: WorkItemEdge) => labelVisibility(liveScale, (d as any)._pTotal || 1))
+      .style('opacity', 1)
       .attr('class', 'edge-label-icon')
       .attr('width', 14)
       .attr('height', 14)
-      .attr('x', (d: any) => -d._labelDims.width / 2 + 6)
+      .attr('x', (d: any) => -d._labelDims.width / 2 + 8)
       .attr('y', -7)
       .style('pointer-events', 'none')
       .each(function(d: WorkItemEdge) {
@@ -3489,10 +3094,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           if (!(bbox.width > 0 && bbox.height > 0)) return;
           const iconWidth = 14;
           const spacing = 8;
-          const paddingLeft = 6;
-          const paddingRight = 8;
-          const totalWidth = paddingLeft + iconWidth + spacing + bbox.width + paddingRight;
-          const totalHeight = Math.max(22, bbox.height + 8);
+          const paddingLeft = 8;
+          const { width: totalWidth, height: totalHeight } = edgeLabelDimensions(bbox.width, bbox.height);
           (d as any)._labelDims = { width: totalWidth, height: totalHeight };
           (d as any)._labelIconCenter = { x: -totalWidth / 2 + paddingLeft + 7, y: 0 };
           
@@ -3811,9 +3414,36 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       element.select('.long-press-feedback').remove();
     });
 
+    const updateNodePresentation = () => {
+      nodeElements.each(function(d: WorkItem) {
+        const node = d3.select(this), layout = getNodeDimensions(d);
+        node.attr('data-detail', layout.compact ? 'compact' : 'full').attr('role', layout.compact ? 'button' : 'group').attr('tabindex', layout.compact ? 0 : null).attr('aria-label', `${d.title}, ${getTypeConfig(d.type as WorkItemType).label}`);
+        node.on('keydown.compact', (event: KeyboardEvent) => {
+          if (layout.compact && event.target === this && (event.key === 'Enter' || event.key === ' ')) openQuickEdit(event, d);
+        });
+        node.select('.node-bg').attr('x', -layout.width / 2).attr('y', -layout.height / 2).attr('width', layout.width).attr('height', layout.height);
+        node.select('.node-title-bar').attr('x', -layout.width / 2 + 2).attr('y', -layout.height / 2 + 2).attr('width', layout.width - 4);
+        node.select('.node-type-text').attr('y', -layout.height / 2 + ITEM_HEADER_HEIGHT / 2 + 2);
+        for (const [selector, x, y] of [
+          ['.node-edit-icon', -layout.width / 2 + iconSize / 2 + 12, -layout.height / 2 + ITEM_HEADER_HEIGHT / 2 + 2],
+          ['.node-relationship-icon', layout.width / 2 - iconSize / 2 - 12, -layout.height / 2 + ITEM_HEADER_HEIGHT / 2 + 2],
+          ['.node-expand-icon', layout.width / 2 - iconSize / 2 - 12 - iconSize - 8, -layout.height / 2 + ITEM_HEADER_HEIGHT / 2 + 2],
+          ['.node-descend-icon', layout.width / 2 - iconSize / 2 - 8, layout.height / 2 - iconSize / 2 - 6],
+        ] as const) node.select(selector).attr('transform', `translate(${x},${y})`);
+        node.select('.node-description-text').attr('y', layout.descriptionY).text(layout.description);
+        node.select('.node-subgraph-count').attr('y', layout.height / 2 - 10);
+        renderItemTitle(this, d, layout);
+        renderItemMetadata(this, d, layout);
+        node.selectAll('.node-title-bar, .node-type-text, .node-edit-icon, .node-relationship-icon, .node-expand-icon, .node-descend-icon, .node-description-text, .node-meta, .node-subgraph-count, .node-subgraph-stack')
+          .style('display', () => layout.compact ? 'none' : null);
+      });
+    };
+
     let labelAvoidCounter = 0;
     let nodeLabelObstacles: ObstacleBox[] = [];
     const labelRects = new Map<string, ObstacleBox>();
+    let routeSegments: EdgeRouteGeometry['segments'][number][] = [];
+    let routeObstacles: ObstacleBox[] = [];
     const applyLabel = (element: SVGGElement, d: any, placement: EdgeRouteLabel | null) => {
       d._routeLabel = placement;
       const label = d3.select(element);
@@ -3823,15 +3453,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         return;
       }
       d.labelT = placement.t;
-      label.attr('transform', `translate(${placement.x},${placement.y}) rotate(${placement.rotation})`);
+      label.attr('transform', `translate(${placement.x},${placement.y}) rotate(${placement.rotation}) scale(${d._labelScale || 1})`);
       const center = d._labelIconCenter;
       label.select('.edge-label-icon').attr('transform', placement.iconRotation
         ? `rotate(${placement.iconRotation}, ${center.x}, ${center.y})` : null);
       const angle = placement.rotation * Math.PI / 180;
       labelRects.set(d.id, {
         x: placement.x, y: placement.y,
-        width: Math.abs(Math.cos(angle)) * d._labelDims.width + Math.abs(Math.sin(angle)) * d._labelDims.height,
-        height: Math.abs(Math.sin(angle)) * d._labelDims.width + Math.abs(Math.cos(angle)) * d._labelDims.height
+        width: (Math.abs(Math.cos(angle)) * d._labelDims.width + Math.abs(Math.sin(angle)) * d._labelDims.height) * (d._labelScale || 1),
+        height: (Math.abs(Math.sin(angle)) * d._labelDims.width + Math.abs(Math.cos(angle)) * d._labelDims.height) * (d._labelScale || 1)
       });
     };
     const updateEdgePositions = (forceAvoid = false) => {
@@ -3864,19 +3494,29 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       if (runAvoidance) nodeLabelObstacles = (simulation.nodes() as any[]).map(n => ({
         x: n.x || 0, y: n.y || 0, ...getNodeDimensions(n)
       }));
+      if (!runAvoidance) {
+        if (simulation.alpha() > 0.0015) { edgeLabelGroups.style('display', 'none'); setItemLabelCount(0); }
+        return;
+      }
+      routeSegments = visibleEdges.flatMap((edge: any) => edge._route?.segments ?? []);
+      routeObstacles = visibleEdges.filter((edge: any) => edge._route).map((edge: any) => edgeRouteArrowBounds(edge._route, arrowVisibility(liveK, edge._pTotal || 1).scale));
       const placed: ObstacleBox[] = [];
-      edgeLabelGroups.each(function(d: any) {
+      edgeLabelGroups.sort((a: any, b: any) => a.id.localeCompare(b.id)).each(function(d: any) {
         const route = d._route as EdgeRouteGeometry | null;
-        const placement = route && (runAvoidance || !d._labelBlocked)
+        d._labelScale = Math.max(1, 1 / liveK);
+        const offset = (d._routeLabel?.offset < 0 ? -1 : 1) * (22 * d._labelScale + 3);
+        const dims = { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale };
+        const placement = route && liveK >= 0.6 && placed.length < 32
           ? edgeRouteLabel(route, {
-              dims: d._labelDims, t: d.labelT,
-              obstacles: runAvoidance ? nodeLabelObstacles.concat(placed) : []
+              dims, t: d.labelT, offset, offsets: [offset, -offset],
+              obstacles: nodeLabelObstacles.concat(routeObstacles, placed), segments: routeSegments
             }) : null;
-        if (runAvoidance) d._labelBlocked = !placement;
+        d._labelBlocked = !placement;
         applyLabel(this, d, placement);
         const box = labelRects.get(d.id);
         if (box) placed.push(box);
       });
+      setItemLabelCount(placed.length);
     };
 
     edgeLabelGroups
@@ -3895,10 +3535,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           const [x, y] = d3.pointer(event, g.node() as any);
           const t = projectEdgeRoutePointer(d._route, {
             x: x - d._labelGrab.x, y: y - d._labelGrab.y
-          }, d.labelT, { offset: 22 });
+          }, d.labelT, { offset: d._routeLabel?.offset ?? 25 });
           const placement = edgeRouteLabel(d._route, {
-            dims: d._labelDims, t,
-            obstacles: nodeLabelObstacles.concat([...labelRects].filter(([id]) => id !== d.id).map(([, box]) => box))
+            dims: { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale }, t,
+            offset: d._routeLabel?.offset ?? 25, segments: routeSegments,
+            obstacles: nodeLabelObstacles.concat(routeObstacles, [...labelRects].filter(([id]) => id !== d.id).map(([, box]) => box))
           });
           if (placement) {
             d.labelTUser = true;
@@ -4022,7 +3663,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
                 const scale = currentTransform.k;
                 const classList = d3.select(this as any).attr('class');
                 if (classList?.includes('node-type-text')) return getSmoothedOpacity(scale, LOD_THRESHOLDS.FAR);
-                if (classList?.includes('node-title-text')) return getSmoothedOpacity(scale, TITLE_VISIBLE_SCALE);
+                if (classList?.includes('node-title-text')) return scale >= 0.3 ? 1 : 0;
                 if (classList?.includes('node-description-text')) return getSmoothedOpacity(scale, LOD_THRESHOLDS.CLOSE);
               }
             }
@@ -4127,7 +3768,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       // in) and is counter-scaled to a legibility floor so it stays readable. The
       // group transform is updated live here (the only path that runs on zoom).
       g.selectAll('.node-title-text' as any)
-        .style('opacity', getSmoothedOpacity(TITLE_VISIBLE_SCALE));
+        .style('opacity', scale >= 0.3 ? 1 : 0);
       // Counter-scale the title block to the legibility floor. Skipped on dense
       // graphs in data-simplify mode (titles hidden via CSS → no visible effect,
       // so don't walk 1000+ groups every pan frame).
@@ -4135,19 +3776,19 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         g.selectAll('.node-title-group' as any)
           .attr('transform', function(this: any) {
             const cy = +(this.getAttribute('data-cy')) || 0;
-            return fittedTitleTransform(this as SVGGElement, scale);
+            return fittedTitleTransform(this as SVGGElement);
           });
       }
       g.selectAll('.node-description-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.CLOSE));
       // Edge labels + arrows follow the edge LOD module (zoom-aware, crowd-aware).
       g.selectAll('.edge-label-group' as any)
-        .style('opacity', (d: any) => labelVisibility(scale, d?._pTotal || 1))
-        .style('pointer-events', (d: any) => labelVisibility(scale, d?._pTotal || 1) > 0 ? 'all' : 'none');
+        .style('opacity', (d: any) => (scale >= 0.6 ? 1 : 0))
+        .style('pointer-events', (d: any) => (scale >= 0.6 ? 1 : 0) > 0 ? 'all' : 'none');
       g.selectAll('.edge-label' as any)
-        .style('opacity', (d: any) => labelVisibility(scale, d?._pTotal || 1));
+        .style('opacity', 1);
       g.selectAll('.edge-label-icon' as any)
-        .style('opacity', (d: any) => labelVisibility(scale, d?._pTotal || 1));
+        .style('opacity', 1);
       g.selectAll('.arrow' as any)
         .style('opacity', (d: any) =>
           directionStrategy(scale) === 'hidden' ? 0 : arrowVisibility(scale, d?._pTotal || 1).opacity);
@@ -4162,6 +3803,13 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         });
     });
 
+    zoom.on('end.labels', event => {
+      if (simulationRef.current !== simulation) return;
+      itemPresentationScaleRef.current = event.transform.k;
+      updateNodePresentation();
+      updateEdgePositions(true);
+    });
+
     // Configure simulation for stability. Start hot only if there are
     // unpinned (new / never-placed) nodes to lay out; an already-arranged
     // graph loads pinned and stays put (snapshot-authoritative).
@@ -4203,6 +3851,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     // Fully-pinned graphs don't tick, so without this their labels would stay at
     // the default midpoint and could overlap → clean starting positions need it.
     runLabelAvoidanceRef.current = () => updateEdgePositions(true);
+    itemPresentationScaleRef.current = svg.node() ? d3.zoomTransform(svg.node()!).k : 1;
+    updateNodePresentation();
     updateEdgePositions(true);
     setTimeout(() => { if (simulationRef.current === simulation) updateEdgePositions(true); }, 500);
   }, [nodes, validatedEdges, handleNodeClick, initializeEmptyVisualization]); // Include handleNodeClick to get fresh connection state
@@ -4260,7 +3910,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       const k = d3.zoomTransform(svgRef.current).k;
       d3.select(svgRef.current).select('.main-graph-group')
         .selectAll<SVGGElement, unknown>('.node-title-group')
-        .attr('transform', function() { return fittedTitleTransform(this, k); });
+        .attr('transform', function() { return fittedTitleTransform(this); });
     }
   }, [semanticOverviewActive, currentGraph?.id]);
 
@@ -5104,7 +4754,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     // Detect a node TYPE change (same count → length checks miss it). The
     // selective path refreshes the badge text but not the card color/icon. (#30)
     const nodeSig = (nodes as any[])
-      .map((n) => `${n.id}:${n.type}`)
+      .map((n) => JSON.stringify([n.id, n.type, n.title, n.description, n.subgraphId]))
       .sort()
       .join(',');
     const nodesChanged = prevNodeSigRef.current !== '' && prevNodeSigRef.current !== nodeSig;
@@ -5448,6 +5098,31 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
   return (
     <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-overview={semanticOverviewActive || undefined} data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined} data-dots={isDotMode ? 'true' : undefined}>
       <LayoutSaveStatus queue={positionSaveQueue} />
+      {!semanticOverviewActive && workItemEdges.length > 0 && <button
+        data-graph-fit-obstacle="true"
+        className="absolute bottom-3 left-16 z-20 rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-sm text-slate-100 shadow-lg"
+        onClick={() => setItemRelationshipScope({ kind: 'all' })}
+        aria-label={`${workItemEdges.length} relationships, ${itemLabelCount} labels shown. Browse all relationships`}
+      >{workItemEdges.length} connections · {itemLabelCount} labels · Browse</button>}
+      {itemRelationshipScope && !semanticOverviewActive && <SemanticRelationshipBrowser
+        index={itemRelationshipIndex}
+        scope={itemRelationshipScope}
+        contextFor={id => itemRelationshipIndex.hierarchy.paths.get(id)?.map(key => itemRelationshipIndex.hierarchy.groups.get(key)?.label).filter(Boolean).join(' / ') || 'Ungrouped'}
+        onScope={setItemRelationshipScope}
+        onInspect={id => { setItemRelationshipScope(null); inspectOverviewItem(id, true); }}
+        onBack={() => setItemRelationshipScope(null)}
+        backLabel="Back to graph"
+        visible={true}
+        onEdit={id => {
+          const edge = workItemEdges.find(edge => edge.id === id);
+          if (!edge) return;
+          setItemRelationshipScope(null);
+          setSelectedEdge(edge);
+          setShowRelationshipWindow(true);
+          setEditingEdge({ edge, position: { x: window.innerWidth / 2, y: window.innerHeight / 2 } });
+          setDragOffset({ x: 0, y: 0 });
+        }}
+      />}
       <svg
         ref={svgRef}
         className="w-full h-full"
diff --git a/packages/web/src/components/SemanticRelationshipBrowser.tsx b/packages/web/src/components/SemanticRelationshipBrowser.tsx
index 383be72c..69d2c620 100644
--- a/packages/web/src/components/SemanticRelationshipBrowser.tsx
+++ b/packages/web/src/components/SemanticRelationshipBrowser.tsx
@@ -17,6 +17,8 @@ interface Props {
   onBack: () => void;
   focusId?: string;
   visible: boolean;
+  backLabel?: string;
+  onEdit?: (id: string) => void;
 }
 
 export function SemanticRelationshipBrowser({
@@ -28,6 +30,8 @@ export function SemanticRelationshipBrowser({
   onBack,
   focusId,
   visible,
+  backLabel = 'Back to groups',
+  onEdit,
 }: Props) {
   const [type, setType] = useState('');
   const [search, setSearch] = useState('');
@@ -164,7 +168,7 @@ export function SemanticRelationshipBrowser({
         onClick={onBack}
         className="min-h-11 text-sm text-emerald-200"
       >
-        Back to groups
+        {backLabel}
       </button>
       <h2 className="text-base font-semibold break-words">{title}</h2>
       {missingGroup && (
@@ -241,6 +245,7 @@ export function SemanticRelationshipBrowser({
             className="rounded border border-gray-700 bg-gray-900 p-3"
           >
             <p className="text-xs text-gray-300 break-all">{edge.id}</p>
+            {onEdit && <button className="min-h-11 text-sm text-emerald-200" onClick={() => onEdit(edge.id)} aria-label={`Edit relationship ${edge.id}`}>Edit relationship</button>}
             {endpoint(relationshipEndpoint(edge.source))}
             <p className="text-sm font-semibold my-1">→ {edge.type}</p>
             {endpoint(relationshipEndpoint(edge.target))}
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
index f1fbb43c..5bd221f3 100644
--- a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -3,6 +3,8 @@ import {
   createEdgeRoute,
   createParallelEdgeRoute,
   edgeRouteLabel,
+  edgeRouteArrowBounds,
+  edgeSegmentHitsBox,
   pointOnEdgeRoute,
   projectEdgeRoutePointer,
 } from '../edgeRouteGeometry';
@@ -219,4 +221,75 @@ describe('item wire geometry', () => {
       edgeRouteLabel(route, { dims: { width: NaN, height: 20 } })
     ).toBeNull();
   });
+  it('places opposite-direction labels on clear sides instead of covering the neighboring wire', () => {
+    const upper = createEdgeRoute([
+      { x: 0, y: -7 },
+      { x: 400, y: -7 },
+    ])!;
+    const lower = createEdgeRoute([
+      { x: 400, y: 7 },
+      { x: 0, y: 7 },
+    ])!;
+    const segments = [...upper.segments, ...lower.segments];
+    const dims = { width: 110, height: 26 };
+    const first = edgeRouteLabel(upper, {
+      dims,
+      offset: 25,
+      offsets: [25, -25],
+      segments,
+    })!;
+    const second = edgeRouteLabel(lower, {
+      dims,
+      offset: 25,
+      offsets: [25, -25],
+      segments,
+    })!;
+    expect(first.y).toBe(-32);
+    expect(second.y).toBe(32);
+    expect(second.offset).toBe(-25);
+    for (const label of [first, second])
+      expect(
+        segments.some(segment =>
+          edgeSegmentHitsBox(segment, { ...label, ...dims }, 8)
+        )
+      ).toBe(false);
+  });
+
+  it('reserves arrowheads and rejects diagonal wires through a label footprint', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 0, y: 300 },
+    ])!;
+    const arrow = edgeRouteArrowBounds(route);
+    expect(arrow.x).toBeCloseTo(0);
+    expect(arrow).toMatchObject({
+      y: 292,
+      width: 16,
+      height: 16,
+    });
+    const box = { x: 50, y: 50, width: 20, height: 20 };
+    expect(
+      edgeSegmentHitsBox(
+        { source: { x: 0, y: 0 }, target: { x: 100, y: 100 } },
+        box
+      )
+    ).toBe(true);
+    expect(
+      edgeSegmentHitsBox(
+        { source: { x: 0, y: 0 }, target: { x: 20, y: 100 } },
+        box
+      )
+    ).toBe(false);
+    const horizontal = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 300, y: 0 },
+    ])!;
+    const label = edgeRouteLabel(horizontal, {
+      dims: { width: 70, height: 26 },
+      t: 1,
+      offset: 25,
+      obstacles: [edgeRouteArrowBounds(horizontal)],
+    })!;
+    expect(label.x + 35).toBeLessThanOrEqual(300);
+  });
 });
diff --git a/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
new file mode 100644
index 00000000..ce227039
--- /dev/null
+++ b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest';
+import {
+  fitGraphText,
+  graphItemLayout,
+  edgeLabelDimensions,
+  ITEM_TITLE_SIZE,
+  ITEM_TITLE_LINE,
+  type TextMeasure,
+} from '../graphSymbolLayout';
+
+const measure: TextMeasure = (text, size) =>
+  Array.from(text).reduce(
+    (sum, char) =>
+      sum + (char === 'W' ? 0.95 : char === 'i' ? 0.25 : 0.6) * size,
+    0
+  );
+
+describe('graph symbol content geometry', () => {
+  it('fits unequal-width words and unbroken identifiers without losing an unmarked suffix', () => {
+    for (const value of [
+      'WWW iii WWW iii WWW',
+      'PaymentGatewayRetryReconciliationHandler'.repeat(3),
+      '付款网关验证重试与结算协调服务'.repeat(5),
+    ]) {
+      const result = fitGraphText(value, 110, ITEM_TITLE_SIZE, measure);
+      expect(result.lines.length).toBeLessThanOrEqual(3);
+      for (const line of result.lines)
+        expect(measure(line, ITEM_TITLE_SIZE)).toBeLessThanOrEqual(110);
+      if (result.truncated)
+        expect(result.lines[result.lines.length - 1]).toMatch(/…$/);
+    }
+  });
+
+  it('makes short cards compact and reserves title, description and metadata rows', () => {
+    const short = graphItemLayout({ title: 'Review', type: 'TASK' }, measure);
+    const long = graphItemLayout(
+      {
+        title: 'Review the gateway settlement reconciliation and retry policy',
+        type: 'FEATURE',
+        description:
+          'A complete readable summary with more detail available in the inspector.',
+      },
+      measure
+    );
+    expect(short.height).toBeLessThan(100);
+    expect(long.height).toBeGreaterThan(short.height);
+    expect(long.width).toBeLessThanOrEqual(300);
+    expect(long.titleY - ITEM_TITLE_SIZE / 2).toBeGreaterThan(
+      -long.height / 2 + 30
+    );
+    expect(long.descriptionY - 6).toBeGreaterThan(
+      long.titleY +
+        (long.title.length - 1) * ITEM_TITLE_LINE +
+        ITEM_TITLE_SIZE / 2
+    );
+    expect(long.footerY - 6).toBeGreaterThan(long.descriptionY + 6);
+    for (const line of long.title)
+      expect(measure(line, ITEM_TITLE_SIZE)).toBeLessThanOrEqual(
+        long.width - 28
+      );
+  });
+
+  it('reserves a separate row for subgraph navigation', () => {
+    const plain = graphItemLayout({ title: 'API', type: 'EPIC' }, measure);
+    const sheet = graphItemLayout(
+      { title: 'API', type: 'EPIC', subgraphId: 'child' },
+      measure
+    );
+    expect(sheet.height - plain.height).toBe(24);
+    expect(sheet.height / 2 - sheet.footerY).toBe(40);
+  });
+
+  it('reserves compact title width and height at readable zoom sizes', () => {
+    for (const scale of [0.3, 0.45, 0.6, 0.9]) {
+      const layout = graphItemLayout({ title: 'WWW PaymentGatewayRetryReconciliationHandler WWW', type: 'FEATURE' }, measure, scale);
+      expect(layout.compact).toBe(true);
+      expect(ITEM_TITLE_SIZE * layout.titleScale * scale).toBeGreaterThanOrEqual(12);
+      expect(layout.titleCenterY).toBe(0);
+      for (const line of layout.title)
+        expect(measure(line, ITEM_TITLE_SIZE) * layout.titleScale).toBeLessThanOrEqual(layout.width - 28);
+      expect(layout.title.length * ITEM_TITLE_LINE * layout.titleScale).toBeLessThan(layout.height);
+    }
+  });
+
+  it('rounds label ink upward and preserves horizontal and vertical padding', () => {
+    expect(edgeLabelDimensions(94.9, 18.2)).toEqual({ width: 135, height: 29 });
+    expect(edgeLabelDimensions(0, 0)).toEqual({ width: 40, height: 26 });
+  });
+});
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 54451402..bf22ed3e 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -23,6 +23,7 @@ export interface EdgeRouteLabel {
   t: number;
   rotation: number;
   iconRotation: number;
+  offset: number;
 }
 
 const finitePoint = (point: Point) =>
@@ -159,6 +160,60 @@ export function projectEdgeRoutePointer(
   return bestT;
 }
 
+export function edgeRouteArrowBounds(
+  route: EdgeRouteGeometry,
+  scale = 1
+): ObstacleBox {
+  const angle = (route.target.angle * Math.PI) / 180;
+  const points = [
+    [-16, -8],
+    [0, 0],
+    [-16, 8],
+    [-8, 0],
+  ].map(([x, y]) => ({
+    x: route.target.x + (x * Math.cos(angle) - y * Math.sin(angle)) * scale,
+    y: route.target.y + (x * Math.sin(angle) + y * Math.cos(angle)) * scale,
+  }));
+  const left = Math.min(...points.map(p => p.x)),
+    right = Math.max(...points.map(p => p.x));
+  const top = Math.min(...points.map(p => p.y)),
+    bottom = Math.max(...points.map(p => p.y));
+  return {
+    x: (left + right) / 2,
+    y: (top + bottom) / 2,
+    width: right - left,
+    height: bottom - top,
+  };
+}
+
+export function edgeSegmentHitsBox(
+  segment: Pick<EdgeRouteSegment, 'source' | 'target'>,
+  box: ObstacleBox,
+  padding = 0
+) {
+  let first = 0,
+    last = 1;
+  for (const [axis, span] of [
+    ['x', 'width'],
+    ['y', 'height'],
+  ] as const) {
+    const low = box[axis] - box[span] / 2 - padding,
+      high = box[axis] + box[span] / 2 + padding;
+    const delta = segment.target[axis] - segment.source[axis];
+    if (delta === 0) {
+      if (segment.source[axis] < low || segment.source[axis] > high)
+        return false;
+    } else {
+      const a = (low - segment.source[axis]) / delta,
+        b = (high - segment.source[axis]) / delta;
+      first = Math.max(first, Math.min(a, b));
+      last = Math.min(last, Math.max(a, b));
+      if (first > last) return false;
+    }
+  }
+  return true;
+}
+
 export function edgeRouteLabel(
   route: EdgeRouteGeometry,
   options: {
@@ -167,6 +222,8 @@ export function edgeRouteLabel(
     offset?: number;
     padding?: number;
     obstacles?: readonly ObstacleBox[];
+    segments?: readonly Pick<EdgeRouteSegment, 'source' | 'target'>[];
+    offsets?: readonly number[];
   }
 ) {
   const { dims, obstacles = [] } = options;
@@ -196,42 +253,54 @@ export function edgeRouteLabel(
     const height =
       Math.abs(Math.sin(radians)) * dims.width +
       Math.abs(Math.cos(radians)) * dims.height;
-    for (const distance of new Set([
-      clamp(desired, low, high),
-      (low + high) / 2,
-      low,
-      high,
-    ])) {
-      const local = (distance - segment.start) / segment.length;
-      const x =
-        segment.source.x +
-        (segment.target.x - segment.source.x) * local +
-        Math.sin(radians) * offset;
-      const y =
-        segment.source.y +
-        (segment.target.y - segment.source.y) * local -
-        Math.cos(radians) * offset;
-      if (
-        obstacles.some(
-          box =>
-            Math.abs(x - box.x) < (width + box.width) / 2 + padding &&
-            Math.abs(y - box.y) < (height + box.height) / 2 + padding
+    for (const candidateOffset of options.offsets ?? [offset]) {
+      if (!Number.isFinite(candidateOffset)) continue;
+      for (const distance of new Set([
+        clamp(desired, low, high),
+        (low + high) / 2,
+        low,
+        high,
+      ])) {
+        const local = (distance - segment.start) / segment.length;
+        const x =
+          segment.source.x +
+          (segment.target.x - segment.source.x) * local +
+          Math.sin(radians) * candidateOffset;
+        const y =
+          segment.source.y +
+          (segment.target.y - segment.source.y) * local -
+          Math.cos(radians) * candidateOffset;
+        if (
+          obstacles.some(
+            box =>
+              Math.abs(x - box.x) < (width + box.width) / 2 + padding &&
+              Math.abs(y - box.y) < (height + box.height) / 2 + padding
+          )
+        )
+          continue;
+        if (
+          options.segments?.some(part =>
+            edgeSegmentHitsBox(part, { x, y, width, height }, padding)
+          )
         )
-      )
-        continue;
-      const delta = Math.abs(distance - desired);
-      if (
-        delta < bestDistance ||
-        (delta === bestDistance && distance / route.length < best!.t)
-      ) {
-        bestDistance = delta;
-        best = {
-          x,
-          y,
-          t: distance / route.length,
-          rotation,
-          iconRotation: flipped ? 180 : 0,
-        };
+          continue;
+        const delta =
+          Math.abs(distance - desired) +
+          Math.abs(candidateOffset - offset) * 0.01;
+        if (
+          delta < bestDistance ||
+          (delta === bestDistance && distance / route.length < best!.t)
+        ) {
+          bestDistance = delta;
+          best = {
+            x,
+            y,
+            t: distance / route.length,
+            rotation,
+            iconRotation: flipped ? 180 : 0,
+            offset: candidateOffset,
+          };
+        }
       }
     }
   }
diff --git a/packages/web/src/lib/graphSymbolLayout.ts b/packages/web/src/lib/graphSymbolLayout.ts
new file mode 100644
index 00000000..8e14ee63
--- /dev/null
+++ b/packages/web/src/lib/graphSymbolLayout.ts
@@ -0,0 +1,138 @@
+export const GRAPH_FONT_FAMILY = 'system-ui, sans-serif';
+export const ITEM_TITLE_SIZE = 16;
+export const ITEM_TITLE_LINE = 21;
+export const ITEM_HEADER_HEIGHT = 30;
+export const EDGE_LABEL_SIZE = 12;
+export const EDGE_LABEL_HEIGHT = 26;
+
+export type TextMeasure = (
+  text: string,
+  size: number,
+  weight?: number
+) => number;
+
+export function fitGraphText(
+  text: string,
+  width: number,
+  size: number,
+  measure: TextMeasure,
+  maxLines = 3
+) {
+  let remaining = text.replace(/\s+/g, ' ').trim();
+  const lines: string[] = [];
+  while (remaining && lines.length < maxLines) {
+    if (measure(remaining, size, 600) <= width) {
+      lines.push(remaining);
+      remaining = '';
+      break;
+    }
+    const last = lines.length === maxLines - 1;
+    const chars = Array.from(remaining);
+    let low = 0,
+      high = chars.length;
+    while (low < high) {
+      const middle = Math.ceil((low + high) / 2);
+      if (
+        measure(
+          chars.slice(0, middle).join('') + (last ? '…' : ''),
+          size,
+          600
+        ) <= width
+      )
+        low = middle;
+      else high = middle - 1;
+    }
+    if (!low) return { lines: [...lines, '…'], truncated: true };
+    let take = low;
+    const prefix = chars.slice(0, low).join('');
+    const space = prefix.lastIndexOf(' ');
+    if (!last && space > 0) take = Array.from(prefix.slice(0, space)).length;
+    lines.push(chars.slice(0, take).join('').trimEnd() + (last ? '…' : ''));
+    remaining = chars.slice(take).join('').trimStart();
+  }
+  return {
+    lines: lines.length ? lines : ['Untitled'],
+    truncated: remaining.length > 0,
+  };
+}
+
+export function graphItemLayout(
+  item: {
+    title: string;
+    type: string;
+    description?: string | null;
+    subgraphId?: string | null;
+  },
+  measure: TextMeasure,
+  scale = 1
+) {
+  const compact = scale < 1;
+  const titleScale = compact
+    ? Math.max(1, 12 / (ITEM_TITLE_SIZE * Math.max(0.1, scale)))
+    : 1;
+  const width = Math.min(
+    compact ? 220 : 300,
+    Math.max(
+      190,
+      measure(item.title, ITEM_TITLE_SIZE, 600) + 28,
+      measure(item.type, 12, 700) + 108
+    )
+  );
+  const title = fitGraphText(item.title, (width - 28) / titleScale, ITEM_TITLE_SIZE, measure);
+  const description = item.description
+    ? fitGraphText(item.description, width - 28, 12, measure, 1).lines[0]
+    : '';
+  const height = compact
+    ? title.lines.length * ITEM_TITLE_LINE * titleScale + 24
+    : ITEM_HEADER_HEIGHT +
+      8 +
+      title.lines.length * ITEM_TITLE_LINE +
+      (description ? 20 : 0) +
+      8 +
+      24 +
+      (item.subgraphId ? 24 : 0);
+  const titleY = compact
+    ? -(title.lines.length - 1) * ITEM_TITLE_LINE / 2
+    : -height / 2 + ITEM_HEADER_HEIGHT + 8 + ITEM_TITLE_LINE / 2;
+  return {
+    width,
+    height,
+    compact,
+    titleScale,
+    title: title.lines,
+    truncated: title.truncated,
+    titleLines: title.lines.length,
+    maxCharsPerLine: Math.floor((width - 28) / 9),
+    titleY,
+    titleCenterY: titleY + ((title.lines.length - 1) * ITEM_TITLE_LINE) / 2,
+    description,
+    descriptionY: titleY + (title.lines.length - 1) * ITEM_TITLE_LINE + 21,
+    footerY: height / 2 - 16 - (item.subgraphId ? 24 : 0),
+  };
+}
+
+export function edgeLabelDimensions(
+  textWidth: number,
+  textHeight = EDGE_LABEL_SIZE
+) {
+  return {
+    width: Math.ceil(textWidth) + 40,
+    height: Math.max(EDGE_LABEL_HEIGHT, Math.ceil(textHeight) + 10),
+  };
+}
+
+let context: CanvasRenderingContext2D | null | undefined;
+export const measureGraphText: TextMeasure = (text, size, weight = 600) => {
+  if (context === undefined)
+    context =
+      typeof document === 'undefined'
+        ? null
+        : document.createElement('canvas').getContext('2d');
+  if (!context) return Array.from(text).length * size * 0.65;
+  context.font = `${weight} ${size}px ${GRAPH_FONT_FAMILY}`;
+  const metrics = context.measureText(text);
+  return Math.max(
+    metrics.width,
+    (metrics.actualBoundingBoxLeft || 0) + (metrics.actualBoundingBoxRight || 0)
+  );
+};

From e4f654a943456c104c8e06090405c4000b048642 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 07:32:23 -0700
Subject: [PATCH 08/19] test(graph): gate readable symbols and 2000-item zoom
 journeys

---
 ...readable-symbols-need-reserved-geometry.md |   8 +
 .github/workflows/ci.yml                      |   5 +
 .../InteractiveGraphVisualization.tsx         |  22 +-
 .../lib/__tests__/edgeRouteGeometry.test.ts   |  19 ++
 .../lib/__tests__/graphSymbolLayout.test.ts   |  21 +-
 packages/web/src/lib/edgeRouteGeometry.ts     |  10 +
 packages/web/src/lib/graphSymbolLayout.ts     |  12 +-
 tests/e2e/graph/item-symbols.spec.ts          | 190 +++++++++++++++
 tests/e2e/graph/large-graph-symbols.spec.ts   | 217 ++++++++++++++++++
 tests/e2e/graph/node-quick-edit.spec.ts       |   2 +-
 tests/e2e/graph/semantic-lod.spec.ts          |   2 +-
 tests/e2e/smoke/user-smoke.spec.ts            |   2 +-
 tests/lib/itemSymbolVisual.ts                 | 205 +++++++++++++++++
 tests/lib/runner/unified-cli.test.mjs         |  11 +-
 tests/lib/schematicOverview.ts                |   5 +-
 tests/sequences/unified.config.mjs            |   9 +-
 16 files changed, 721 insertions(+), 19 deletions(-)
 create mode 100644 tests/e2e/graph/item-symbols.spec.ts
 create mode 100644 tests/e2e/graph/large-graph-symbols.spec.ts
 create mode 100644 tests/lib/itemSymbolVisual.ts

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index e378896d..0d62b793 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -14,3 +14,11 @@ Cause: text layout, title scaling, card dimensions, route endpoints and label ad
 Corrective rule: measure text and reserve its displayed footprint before drawing. Cards and routes consume the same current presentation geometry; secondary rows retreat before readable primary text. Admit a complete label only when its footprint clears cards, labels, wires and arrows; expose original relationships when the drawing cannot display all labels. A small attractive fixture cannot establish large-graph acceptance: test thousands of real loaded items through zoom-out and return-to-detail, with explicit resource budgets and no viewing-induced writes.
 
 Limits: current item paths are still straight and can cross. This checkpoint does not establish full label/UI obstacle handling, all phone/zoom interactions, bounded thousands-of-item performance, or complete schematic routing. Strict browser regressions, deliberate negative controls, CI and independent review remain required in #222. Preserve earlier failed logs and never count skipped or cancelled tests as passes.
+
+Follow-up evidence, 2026-10-28:
+- The first rendered regression sampled before the final zoom presentation transform was applied and reported undersized labels. The oracle now waits for the actual committed presentation scale and the existing opacity transition. It does not wait for arbitrary geometry violations to disappear.
+- The second run classified a zero-area empty description element as a painted collision. The oracle now requires a positive painted footprint; real clipping and overlap remain failures.
+- Both desktop1440 and phone390 cases then passed in22.0s with one headed Chrome, zero retries and strict fixture cleanup. Four zoom stages, keyboard compact-card editing, exact relationship access and unchanged API snapshots passed. Deliberately moving a label onto a card and shrinking a card to20px each triggered the intended oracle; restoring the DOM passed again. Retained local run directories are `item-symbols-headed1`, `item-symbols-headed2`, `item-symbols-headed3` under the owned resolution evidence directory.
+- Focused geometry:19 passed. Actual unified CLI adapter/strict-evidence tests:33 passed. The added `large-symbols` sequence is headless, single-worker and zero-retry with an explicit2000-item/5000-relationship API fixture, overview clutter checks, identity/snapshot checks, detail readability and timing budgets. Discovery/enrollment is not execution; only actual CI artifacts can establish its result.
+
+Initial checkpoint351749 CI40704807354 failed the Grow smoke visible-name assertion: `text=<name>.first()` resolved the newly added non-painted SVG `<title>` tooltip. The actual API node/edge delta had passed. The selector now explicitly requires painted `.node-title-text`; node quick-edit uses the same stricter contract. The earlier CI remains a failure; this correction requires subsequent executed smoke evidence. Comprehensive40704807565 passed and does not substitute for that gate.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f92f6d60..3f0d4567 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -202,6 +202,11 @@ jobs:
         env:
           TEST_URL: http://localhost:3127
           CI: true
+      - name: Two thousand item headless zoom acceptance
+        run: node tests/run-unified.mjs --sequence large-symbols --out test-artifacts/ci-large-symbols
+        env:
+          TEST_URL: http://localhost:3127
+          CI: true
       - name: New-user quality gate (headed under virtual display)
         run: xvfb-run --auto-servernum node tests/run-unified.mjs --sequence new-user --out test-artifacts/ci-new-user
         env:
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index d504c307..dd110f96 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -145,7 +145,7 @@ function renderItemTitle(element: SVGGElement, item: WorkItem, layout: ReturnTyp
     group.append('text').attr('class', 'node-title-text').attr('x', 0).attr('y', layout.titleY + index * ITEM_TITLE_LINE)
       .attr('text-anchor', 'middle').attr('dominant-baseline', 'middle').text(line)
       .style('font-family', GRAPH_FONT_FAMILY).style('font-size', `${ITEM_TITLE_SIZE}px`).style('font-weight', '600')
-      .style('fill', isCompletedStatus(item.status) ? '#b9c7d7' : '#f1f5f9').style('pointer-events', 'none');
+      .style('fill', isCompletedStatus(item.status) ? '#b9c7d7' : '#f1f5f9').style('opacity', layout.titleVisible ? 1 : 0).style('pointer-events', 'none');
   });
   group.attr('transform', fittedTitleTransform(group.node()!));
 }
@@ -3414,7 +3414,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       element.select('.long-press-feedback').remove();
     });
 
+    let presentedScale = NaN;
     const updateNodePresentation = () => {
+      if (presentedScale === itemPresentationScaleRef.current) return;
+      presentedScale = itemPresentationScaleRef.current;
+      g.attr('data-presentation-scale', presentedScale);
       nodeElements.each(function(d: WorkItem) {
         const node = d3.select(this), layout = getNodeDimensions(d);
         node.attr('data-detail', layout.compact ? 'compact' : 'full').attr('role', layout.compact ? 'button' : 'group').attr('tabindex', layout.compact ? 0 : null).attr('aria-label', `${d.title}, ${getTypeConfig(d.type as WorkItemType).label}`);
@@ -3444,6 +3448,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     const labelRects = new Map<string, ObstacleBox>();
     let routeSegments: EdgeRouteGeometry['segments'][number][] = [];
     let routeObstacles: ObstacleBox[] = [];
+    let labelViewport: ObstacleBox | undefined;
+    let uiLabelObstacles: ObstacleBox[] = [];
     const applyLabel = (element: SVGGElement, d: any, placement: EdgeRouteLabel | null) => {
       d._routeLabel = placement;
       const label = d3.select(element);
@@ -3498,6 +3504,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         if (simulation.alpha() > 0.0015) { edgeLabelGroups.style('display', 'none'); setItemLabelCount(0); }
         return;
       }
+      const camera = d3.zoomTransform(svg.node()!);
+      const viewportRect = svg.node()!.getBoundingClientRect();
+      labelViewport = { x: (viewportRect.width / 2 - camera.x) / liveK, y: (viewportRect.height / 2 - camera.y) / liveK, width: viewportRect.width / liveK, height: viewportRect.height / liveK };
+      uiLabelObstacles = Array.from(document.querySelectorAll<HTMLElement>('[data-graph-fit-obstacle="true"], [data-lod-controls="true"]')).flatMap(element => {
+        if (getComputedStyle(element).display === 'none' || !element.getClientRects().length) return [];
+        const rect = element.getBoundingClientRect();
+        if (!rect.width || !rect.height) return [];
+        return [{ x: (rect.x + rect.width / 2 - viewportRect.x - camera.x) / liveK, y: (rect.y + rect.height / 2 - viewportRect.y - camera.y) / liveK, width: rect.width / liveK, height: rect.height / liveK }];
+      });
       routeSegments = visibleEdges.flatMap((edge: any) => edge._route?.segments ?? []);
       routeObstacles = visibleEdges.filter((edge: any) => edge._route).map((edge: any) => edgeRouteArrowBounds(edge._route, arrowVisibility(liveK, edge._pTotal || 1).scale));
       const placed: ObstacleBox[] = [];
@@ -3509,7 +3524,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         const placement = route && liveK >= 0.6 && placed.length < 32
           ? edgeRouteLabel(route, {
               dims, t: d.labelT, offset, offsets: [offset, -offset],
-              obstacles: nodeLabelObstacles.concat(routeObstacles, placed), segments: routeSegments
+              obstacles: nodeLabelObstacles.concat(uiLabelObstacles, routeObstacles, placed), segments: routeSegments, viewport: labelViewport
             }) : null;
         d._labelBlocked = !placement;
         applyLabel(this, d, placement);
@@ -3539,7 +3554,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           const placement = edgeRouteLabel(d._route, {
             dims: { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale }, t,
             offset: d._routeLabel?.offset ?? 25, segments: routeSegments,
-            obstacles: nodeLabelObstacles.concat(routeObstacles, [...labelRects].filter(([id]) => id !== d.id).map(([, box]) => box))
+            viewport: labelViewport,
+            obstacles: nodeLabelObstacles.concat(uiLabelObstacles, routeObstacles, [...labelRects].filter(([id]) => id !== d.id).map(([, box]) => box))
           });
           if (placement) {
             d.labelTUser = true;
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
index 5bd221f3..4f67fdc0 100644
--- a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -292,4 +292,23 @@ describe('item wire geometry', () => {
     })!;
     expect(label.x + 35).toBeLessThanOrEqual(300);
   });
+
+  it('admits only full label footprints within the visible viewport', () => {
+    const route = createEdgeRoute([
+      { x: 0, y: 0 },
+      { x: 300, y: 0 },
+    ])!;
+    expect(
+      edgeRouteLabel(route, {
+        dims: { width: 100, height: 26 },
+        viewport: { x: 150, y: -22, width: 120, height: 50 },
+      })
+    ).not.toBeNull();
+    expect(
+      edgeRouteLabel(route, {
+        dims: { width: 100, height: 26 },
+        viewport: { x: 150, y: -22, width: 80, height: 50 },
+      })
+    ).toBeNull();
+  });
 });
diff --git a/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
index ce227039..4138bc36 100644
--- a/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
+++ b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
@@ -72,13 +72,26 @@ describe('graph symbol content geometry', () => {
 
   it('reserves compact title width and height at readable zoom sizes', () => {
     for (const scale of [0.3, 0.45, 0.6, 0.9]) {
-      const layout = graphItemLayout({ title: 'WWW PaymentGatewayRetryReconciliationHandler WWW', type: 'FEATURE' }, measure, scale);
+      const layout = graphItemLayout(
+        {
+          title: 'WWW PaymentGatewayRetryReconciliationHandler WWW',
+          type: 'FEATURE',
+        },
+        measure,
+        scale
+      );
       expect(layout.compact).toBe(true);
-      expect(ITEM_TITLE_SIZE * layout.titleScale * scale).toBeGreaterThanOrEqual(12);
+      expect(
+        ITEM_TITLE_SIZE * layout.titleScale * scale
+      ).toBeGreaterThanOrEqual(12);
       expect(layout.titleCenterY).toBe(0);
       for (const line of layout.title)
-        expect(measure(line, ITEM_TITLE_SIZE) * layout.titleScale).toBeLessThanOrEqual(layout.width - 28);
-      expect(layout.title.length * ITEM_TITLE_LINE * layout.titleScale).toBeLessThan(layout.height);
+        expect(
+          measure(line, ITEM_TITLE_SIZE) * layout.titleScale
+        ).toBeLessThanOrEqual(layout.width - 28);
+      expect(
+        layout.title.length * ITEM_TITLE_LINE * layout.titleScale
+      ).toBeLessThan(layout.height);
     }
   });
 
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index bf22ed3e..7b23d6ed 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -224,6 +224,7 @@ export function edgeRouteLabel(
     obstacles?: readonly ObstacleBox[];
     segments?: readonly Pick<EdgeRouteSegment, 'source' | 'target'>[];
     offsets?: readonly number[];
+    viewport?: ObstacleBox;
   }
 ) {
   const { dims, obstacles = [] } = options;
@@ -270,6 +271,15 @@ export function edgeRouteLabel(
           segment.source.y +
           (segment.target.y - segment.source.y) * local -
           Math.cos(radians) * candidateOffset;
+        const viewport = options.viewport;
+        if (
+          viewport &&
+          (Math.abs(x - viewport.x) + width / 2 + padding >
+            viewport.width / 2 ||
+            Math.abs(y - viewport.y) + height / 2 + padding >
+              viewport.height / 2)
+        )
+          continue;
         if (
           obstacles.some(
             box =>
diff --git a/packages/web/src/lib/graphSymbolLayout.ts b/packages/web/src/lib/graphSymbolLayout.ts
index 8e14ee63..418d63a2 100644
--- a/packages/web/src/lib/graphSymbolLayout.ts
+++ b/packages/web/src/lib/graphSymbolLayout.ts
@@ -68,7 +68,7 @@ export function graphItemLayout(
 ) {
   const compact = scale < 1;
   const titleScale = compact
-    ? Math.max(1, 12 / (ITEM_TITLE_SIZE * Math.max(0.1, scale)))
+    ? Math.max(1, 12 / (ITEM_TITLE_SIZE * Math.max(0.3, scale)))
     : 1;
   const width = Math.min(
     compact ? 220 : 300,
@@ -78,7 +78,12 @@ export function graphItemLayout(
       measure(item.type, 12, 700) + 108
     )
   );
-  const title = fitGraphText(item.title, (width - 28) / titleScale, ITEM_TITLE_SIZE, measure);
+  const title = fitGraphText(
+    item.title,
+    (width - 28) / titleScale,
+    ITEM_TITLE_SIZE,
+    measure
+  );
   const description = item.description
     ? fitGraphText(item.description, width - 28, 12, measure, 1).lines[0]
     : '';
@@ -92,12 +97,13 @@ export function graphItemLayout(
       24 +
       (item.subgraphId ? 24 : 0);
   const titleY = compact
-    ? -(title.lines.length - 1) * ITEM_TITLE_LINE / 2
+    ? (-(title.lines.length - 1) * ITEM_TITLE_LINE) / 2
     : -height / 2 + ITEM_HEADER_HEIGHT + 8 + ITEM_TITLE_LINE / 2;
   return {
     width,
     height,
     compact,
+    titleVisible: scale >= 0.3,
     titleScale,
     title: title.lines,
     truncated: title.truncated,
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
new file mode 100644
index 00000000..dfc82b13
--- /dev/null
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -0,0 +1,190 @@
+import { test as base, expect } from '@playwright/test';
+import { login, TEST_USERS } from '../../lib/auth';
+import { gql } from '../../lib/graphRequest';
+import {
+  ownedGraphIdsFixture,
+  type OwnedGraphs,
+} from '../../lib/ownedGraphIdsFixture';
+import {
+  inspectItemSymbols,
+  readItemSymbols,
+} from '../../lib/itemSymbolVisual';
+
+const test = base.extend<{ ownedGraphIds: OwnedGraphs }>({
+  ownedGraphIds: [ownedGraphIdsFixture, { timeout: 60000 }],
+});
+test.use({ actionTimeout: 10000 });
+
+for (const width of [1440, 390])
+  test.describe(`${width}px symbols`, () => {
+    test.use({ viewport: { width, height: 900 } });
+    test('cards and labels reserve readable content through zoom @item-symbols', async ({
+      page,
+      ownedGraphIds,
+    }, info) => {
+      test.setTimeout(120000);
+      await login(page, TEST_USERS.ADMIN);
+      const seeded = await ownedGraphIds.seed({
+        size: 2,
+        spacing: 600,
+        edgeFactor: 0,
+        namePrefix: 'Readable symbols',
+        titleForIndex: index =>
+          index
+            ? 'PaymentGatewayRetryReconciliationHandler with settlement validation and WWW identifiers'
+            : 'Review',
+        additionalEdges: [{ sourceIndex: 1, targetIndex: 0, type: 'BLOCKS' }],
+      });
+      const snapshot = async () => {
+        const data = await gql(
+          page,
+          'query($id:ID!){workItems(where:{graph:{id:$id}}){id title positionX positionY} edges(where:{source:{graph:{id:$id}}}){id type source{id} target{id}}}',
+          { id: seeded.graphId }
+        );
+        data.workItems.sort((a: { id: string }, b: { id: string }) =>
+          a.id.localeCompare(b.id)
+        );
+        data.edges.sort((a: { id: string }, b: { id: string }) =>
+          a.id.localeCompare(b.id)
+        );
+        return data;
+      };
+      const before = await snapshot(),
+        writes: string[] = [],
+        errors: string[] = [];
+      page.on('pageerror', error => errors.push(error.message));
+      await page.route('**/api/graphql', async route => {
+        if (
+          /^\s*mutation\b/.test(route.request().postDataJSON()?.query ?? '')
+        ) {
+          writes.push(
+            route.request().postDataJSON().operationName ?? 'mutation'
+          );
+          await route.abort();
+        } else await route.continue();
+      });
+      await page.evaluate(id => {
+        localStorage.setItem('currentGraphId', id);
+        localStorage.setItem('graphdone:viewMode', 'graph');
+      }, seeded.graphId);
+      await page.goto('/');
+      await expect(page.locator('.graph-container .node')).toHaveCount(2);
+      await expect
+        .poll(() =>
+          page.evaluate(() => (window as any).__layoutMetrics?.()?.cameraReady)
+        )
+        .toBe(true);
+      const target = before.workItems.find(
+        (item: { id: string }) => item.id === seeded.nodeIds[1]
+      );
+      for (const scale of [0.6, 0.9, 1.2, 0.6]) {
+        await page.evaluate(
+          ({ x, y, scale }) => (window as any).miniMapZoom(x, y, scale),
+          {
+            x: width === 390 ? target.positionX : -300,
+            y: target.positionY,
+            scale,
+          }
+        );
+        await expect
+          .poll(() =>
+            page
+              .locator('.graph-container > svg')
+              .evaluate(element => (element as any).__zoom.k)
+          )
+          .toBeCloseTo(scale);
+        await expect
+          .poll(() => page.locator('.node').first().getAttribute('data-detail'))
+          .toBe(scale < 1 ? 'compact' : 'full');
+        await expect(page.locator('.main-graph-group')).toHaveAttribute(
+          'data-presentation-scale',
+          String(scale)
+        );
+        const geometry = await inspectItemSymbols(
+          page,
+          info,
+          `symbols-${width}-${scale}`
+        );
+        if (width === 1440) expect(geometry.labels.length).toBe(2);
+      }
+      const targetNode = page
+        .locator('.node')
+        .filter({
+          has: page.locator('.node-title-group > title', {
+            hasText: target.title,
+          }),
+        });
+      await targetNode.focus();
+      await page.keyboard.press('Enter');
+      await expect(
+        page.getByRole('dialog', { name: 'Edit work item', exact: true })
+      ).toBeVisible();
+      await page.keyboard.press('Escape');
+      await page
+        .getByRole('button', {
+          name: /2 relationships, .*Browse all relationships/,
+        })
+        .click();
+      await expect(
+        page.getByRole('region', { name: 'Graph relationships' })
+      ).toBeVisible();
+      await expect(
+        page.getByRole('button', { name: /^Edit relationship / })
+      ).toHaveCount(2);
+      await page
+        .getByRole('button', { name: 'Back to graph', exact: true })
+        .click();
+      if (width === 1440) {
+        const saved = await page
+          .locator('.edge-label-group:visible')
+          .first()
+          .getAttribute('transform');
+        await page
+          .locator('.edge-label-group:visible')
+          .first()
+          .evaluate(label => {
+            const node = document.querySelector('.node') as any;
+            label.setAttribute(
+              'transform',
+              `translate(${node.__data__.x},${node.__data__.y})`
+            );
+          });
+        const negative = await readItemSymbols(page);
+        expect(
+          negative.violations.some(value => value.startsWith('label-overlap:'))
+        ).toBe(true);
+        await info.attach('deliberate-overlap.json', {
+          body: JSON.stringify(negative),
+          contentType: 'application/json',
+        });
+        await page
+          .locator('.edge-label-group:visible')
+          .first()
+          .evaluate(
+            (label, transform) => label.setAttribute('transform', transform!),
+            saved
+          );
+        const original = await targetNode
+          .locator('.node-bg')
+          .getAttribute('width');
+        await targetNode
+          .locator('.node-bg')
+          .evaluate(element => element.setAttribute('width', '20'));
+        expect(
+          (await readItemSymbols(page)).violations.some(value =>
+            value.startsWith('title-clipped:')
+          )
+        ).toBe(true);
+        await targetNode
+          .locator('.node-bg')
+          .evaluate(
+            (element, value) => element.setAttribute('width', value!),
+            original
+          );
+        await inspectItemSymbols(page, info, 'restored-after-negatives');
+      }
+      expect(await snapshot()).toEqual(before);
+      expect(writes).toEqual([]);
+      expect(errors).toEqual([]);
+    });
+  });
diff --git a/tests/e2e/graph/large-graph-symbols.spec.ts b/tests/e2e/graph/large-graph-symbols.spec.ts
new file mode 100644
index 00000000..9c56af06
--- /dev/null
+++ b/tests/e2e/graph/large-graph-symbols.spec.ts
@@ -0,0 +1,217 @@
+import { test as base, expect } from '@playwright/test';
+import { login, TEST_USERS } from '../../lib/auth';
+import { gql } from '../../lib/graphRequest';
+import {
+  ownedGraphIdsFixture,
+  type OwnedGraphs,
+} from '../../lib/ownedGraphIdsFixture';
+import type { SeededGraph } from '../../lib/seedGraph';
+import { inspectItemSymbols } from '../../lib/itemSymbolVisual';
+import { inspectSchematicOverview } from '../../lib/schematicOverview';
+
+const SIZE = 2000;
+const test = base.extend<{
+  ownedGraphIds: OwnedGraphs;
+  largeGraph: SeededGraph;
+}>({
+  ownedGraphIds: [ownedGraphIdsFixture, { timeout: 180000 }],
+  largeGraph: [
+    async ({ page, ownedGraphIds }, use) => {
+      await login(page, TEST_USERS.ADMIN);
+      const seeded = await ownedGraphIds.seed({
+        size: SIZE,
+        spacing: 420,
+        edgeFactor: 1.5,
+        batchSize: 20,
+        namePrefix: 'Two thousand item zoom',
+        titleForIndex: (index, type) =>
+          `${type} ${index} ${index % 7 === 0 ? 'PaymentGatewayRetryReconciliationHandler' : 'worker'}`,
+        metadataForIndex: index => ({
+          lod: {
+            groupPath: [
+              `Subsystem ${Math.floor(index / 250)}`,
+              `Service ${Math.floor(index / 50) % 5}`,
+            ],
+          },
+        }),
+        additionalEdges: Array.from({ length: 2000 }, (_, index) => ({
+          sourceIndex: index,
+          targetIndex: (index + 17) % SIZE,
+          type: index % 2 ? 'BLOCKS' : 'ENABLES',
+        })),
+      });
+      await gql(
+        page,
+        'mutation($id:ID!){updateWorkItems(where:{graph:{id:$id},positionX:0,positionY:0},update:{positionX:1}){workItems{id}}}',
+        { id: seeded.graphId }
+      );
+      await use(seeded);
+    },
+    { timeout: 600000 },
+  ],
+});
+test.use({
+  viewport: { width: 1440, height: 900 },
+  headless: true,
+  actionTimeout: 10000,
+  video: 'on',
+});
+
+test('2000 loaded items and 5000 relationships survive overview and detail zoom @large-symbols', async ({
+  page,
+  largeGraph,
+}, info) => {
+  test.setTimeout(180000);
+  const snapshot = async () => {
+    const data = await gql(
+      page,
+      'query($id:ID!){workItems(where:{graph:{id:$id}}){id title positionX positionY metadata} edges(where:{source:{graph:{id:$id}}}){id type source{id} target{id}}}',
+      { id: largeGraph.graphId }
+    );
+    data.workItems.sort((a: { id: string }, b: { id: string }) =>
+      a.id.localeCompare(b.id)
+    );
+    data.edges.sort((a: { id: string }, b: { id: string }) =>
+      a.id.localeCompare(b.id)
+    );
+    return data;
+  };
+  const before = await snapshot();
+  expect(before.workItems).toHaveLength(SIZE);
+  expect(before.edges).toHaveLength(5000);
+  const writes: string[] = [],
+    errors: string[] = [];
+  page.on('pageerror', error => errors.push(error.message));
+  await page.route('**/api/graphql', async route => {
+    if (/^\s*mutation\b/.test(route.request().postDataJSON()?.query ?? '')) {
+      writes.push(route.request().postDataJSON().operationName ?? 'mutation');
+      await route.abort();
+    } else await route.continue();
+  });
+  await page.evaluate(id => {
+    localStorage.setItem('currentGraphId', id);
+    localStorage.setItem('graphdone:viewMode', 'graph');
+  }, largeGraph.graphId);
+  const loadStart = Date.now();
+  await page.goto('/');
+  await expect(page.locator('.graph-container .node')).toHaveCount(SIZE, {
+    timeout: 45000,
+  });
+  await expect
+    .poll(
+      () =>
+        page.evaluate(() => (window as any).__layoutMetrics?.()?.cameraReady),
+      { timeout: 15000 }
+    )
+    .toBe(true);
+  const loadedMs = Date.now() - loadStart;
+  expect(loadedMs).toBeLessThan(45000);
+  const allIds = await page
+    .locator('.node')
+    .evaluateAll(nodes => nodes.map(node => (node as any).__data__.id).sort());
+  expect(allIds).toEqual([...largeGraph.nodeIds].sort());
+  expect(
+    await page
+      .locator('.edges-group .edge')
+      .evaluateAll(edges =>
+        edges.map(edge => edge.getAttribute('data-edge-id')).sort()
+      )
+  ).toEqual(before.edges.map((edge: { id: string }) => edge.id));
+  const overview = page.locator('.semantic-overview');
+  await expect(overview).toHaveAttribute('data-active', 'true');
+  await inspectSchematicOverview(overview, info, 5000, '2000-items-fit', 8);
+  const target = before.workItems.find(
+    (item: { id: string }) => item.id === largeGraph.nodeIds[1008]
+  );
+  const timings: {
+    scale: number;
+    ms: number;
+    paintedCards?: number;
+    labels?: number;
+  }[] = [];
+  for (const scale of [1.2, 0.08, 1.2]) {
+    const start = Date.now();
+    await page.evaluate(
+      ({ x, y, scale }) => (window as any).miniMapZoom(x, y, scale),
+      { x: target.positionX, y: target.positionY, scale }
+    );
+    await expect
+      .poll(() =>
+        page
+          .locator('.graph-container > svg')
+          .evaluate(element => (element as any).__zoom.k)
+      )
+      .toBeCloseTo(scale);
+    await expect(overview).toHaveAttribute(
+      'data-active',
+      scale < 1 ? 'true' : 'false'
+    );
+    await expect(page.locator('.main-graph-group')).toHaveAttribute(
+      'data-presentation-scale',
+      String(scale)
+    );
+    const elapsed = Date.now() - start;
+    expect(
+      elapsed,
+      'Zoom must finish within five seconds on the CI runner'
+    ).toBeLessThan(5000);
+    if (scale > 1) {
+      const geometry = await inspectItemSymbols(
+        page,
+        info,
+        `2000-detail-${timings.length}`
+      );
+      expect(geometry.cards.length).toBeLessThan(100);
+      expect(geometry.labels.length).toBeGreaterThan(0);
+      expect(geometry.labels.length).toBeLessThanOrEqual(32);
+      timings.push({
+        scale,
+        ms: elapsed,
+        paintedCards: geometry.cards.length,
+        labels: geometry.labels.length,
+      });
+    } else {
+      await inspectSchematicOverview(
+        overview,
+        info,
+        5000,
+        '2000-items-zoomed-out',
+        8
+      );
+      timings.push({ scale, ms: elapsed });
+    }
+  }
+  await page
+    .getByRole('button', {
+      name: /5000 relationships, .*Browse all relationships/,
+    })
+    .click();
+  const relationships = page.getByRole('region', {
+    name: 'Graph relationships',
+  });
+  await expect(relationships).toBeVisible();
+  await relationships.getByRole('textbox').fill(before.edges[0].id);
+  await expect(
+    relationships.getByRole('button', {
+      name: `Edit relationship ${before.edges[0].id}`,
+      exact: true,
+    })
+  ).toBeVisible();
+  await page
+    .getByRole('button', { name: 'Back to graph', exact: true })
+    .click();
+  expect(await snapshot()).toEqual(before);
+  expect(writes).toEqual([]);
+  expect(errors).toEqual([]);
+  await info.attach('two-thousand-node-performance.json', {
+    body: JSON.stringify({
+      nodes: SIZE,
+      edges: 5000,
+      loadedMs,
+      timings,
+      writes,
+      errors,
+    }),
+    contentType: 'application/json',
+  });
+});
diff --git a/tests/e2e/graph/node-quick-edit.spec.ts b/tests/e2e/graph/node-quick-edit.spec.ts
index c54f393d..30db718d 100644
--- a/tests/e2e/graph/node-quick-edit.spec.ts
+++ b/tests/e2e/graph/node-quick-edit.spec.ts
@@ -46,7 +46,7 @@ test.describe('node quick-edit @quickedit', () => {
     await page.waitForTimeout(1200); // mutation + graph refresh
 
     // The graph should now show the new title somewhere.
-    await expect(page.locator('.graph-container svg').getByText(marker, { exact: false }).first()).toBeVisible({ timeout: 8000 });
+    await expect(page.locator('.graph-container .node-title-text').filter({ hasText: marker }).first()).toBeVisible({ timeout: 8000 });
 
     // Revert so the seed data is unchanged.
     if (original) {
diff --git a/tests/e2e/graph/semantic-lod.spec.ts b/tests/e2e/graph/semantic-lod.spec.ts
index 3a483779..2282f19e 100644
--- a/tests/e2e/graph/semantic-lod.spec.ts
+++ b/tests/e2e/graph/semantic-lod.spec.ts
@@ -252,7 +252,7 @@ for (const width of [1440, 390])
         const camera = (element as SVGSVGElement & { __zoom: { x: number; y: number; k: number } }).__zoom;
         return { x: camera.x, y: camera.y, k: camera.k };
       })).toEqual(fixedCamera);
-      await expect.poll(() => page.evaluate(() => (window as any).__lodVisibleTitleMeasurements)).toBeGreaterThan(0);
+      await expect.poll(() => page.evaluate(() => (window as any).__lodVisibleTitleMeasurements)).toBe(0);
       expect(await page.evaluate(() => (window as any).__lodCameraRefreshCount)).toBe(0);
       await page.evaluate(() => {
         const target = window as any;
diff --git a/tests/e2e/smoke/user-smoke.spec.ts b/tests/e2e/smoke/user-smoke.spec.ts
index 82b4c60a..2f04c6f6 100644
--- a/tests/e2e/smoke/user-smoke.spec.ts
+++ b/tests/e2e/smoke/user-smoke.spec.ts
@@ -230,7 +230,7 @@ test.describe('user smoke: the app works from a user point of view @smoke', () =
     expect(after.nodes, 'a node must be created').toBe(before.nodes + 1);
     expect(after.edges, 'a connecting edge must be created').toBe(before.edges + 1);
     // ...and the user actually sees the newly named node on the canvas.
-    await expect(page.locator(`text=${name}`).first()).toBeVisible();
+    await expect(page.locator('.node-title-text').filter({ hasText: name }).first()).toBeVisible();
 
     // Undo must walk it back: Ctrl+Z undoes the rename, then the creation.
     await page.keyboard.press('Control+z');
diff --git a/tests/lib/itemSymbolVisual.ts b/tests/lib/itemSymbolVisual.ts
new file mode 100644
index 00000000..1b3e0544
--- /dev/null
+++ b/tests/lib/itemSymbolVisual.ts
@@ -0,0 +1,205 @@
+import { expect, type Page, type TestInfo } from '@playwright/test';
+import { writeFile } from 'node:fs/promises';
+
+export async function readItemSymbols(page: Page) {
+  return page.locator('.graph-container').evaluate(host => {
+    const rect = (element: Element) => {
+      const box = element.getBoundingClientRect();
+      return { x: box.x, y: box.y, width: box.width, height: box.height };
+    };
+    const overlaps = (a: ReturnType<typeof rect>, b: ReturnType<typeof rect>) =>
+      a.x < b.x + b.width - 0.5 &&
+      a.x + a.width > b.x + 0.5 &&
+      a.y < b.y + b.height - 0.5 &&
+      a.y + a.height > b.y + 0.5;
+    const contains = (a: ReturnType<typeof rect>, b: ReturnType<typeof rect>) =>
+      b.x >= a.x - 0.5 &&
+      b.y >= a.y - 0.5 &&
+      b.x + b.width <= a.x + a.width + 0.5 &&
+      b.y + b.height <= a.y + a.height + 0.5;
+    const viewport = rect(host);
+    const visible = (element: Element) => {
+      for (
+        let current: Element | null = element;
+        current;
+        current = current.parentElement
+      ) {
+        const style = getComputedStyle(current);
+        if (
+          style.display === 'none' ||
+          style.visibility !== 'visible' ||
+          Number(style.opacity) === 0
+        )
+          return false;
+      }
+      const bounds = rect(element);
+      return (
+        bounds.width > 0 && bounds.height > 0 && overlaps(bounds, viewport)
+      );
+    };
+    const font = (element: SVGGraphicsElement) => {
+      const matrix = element.getScreenCTM()!;
+      return (
+        parseFloat(getComputedStyle(element).fontSize) *
+        Math.hypot(matrix.a, matrix.b)
+      );
+    };
+    const cards = Array.from(host.querySelectorAll<SVGGElement>('.node'))
+      .filter(visible)
+      .map(node => ({
+        id: (node as any).__data__.id as string,
+        detail: node.getAttribute('data-detail'),
+        box: rect(node.querySelector('.node-bg')!),
+        titles: Array.from(
+          node.querySelectorAll<SVGGraphicsElement>('.node-title-text')
+        )
+          .filter(visible)
+          .map(text => ({
+            text: text.textContent,
+            box: rect(text),
+            font: font(text),
+          })),
+        parts: Array.from(
+          node.querySelectorAll(
+            '.node-type-text, .node-edit-icon, .node-relationship-icon, .node-expand-icon, .node-title-text, .node-description-text, .node-meta text'
+          )
+        )
+          .filter(visible)
+          .map(part => ({ kind: part.getAttribute('class'), box: rect(part) })),
+      }));
+    const labels = Array.from(
+      host.querySelectorAll<SVGGElement>('.edge-label-group')
+    )
+      .filter(visible)
+      .map(label => {
+        const text = label.querySelector<SVGGraphicsElement>('.edge-label')!;
+        return {
+          id: (label as any).__data__.id as string,
+          box: rect(label.querySelector('rect')!),
+          text: rect(text),
+          font: font(text),
+          opacity:
+            Number(getComputedStyle(label).opacity) *
+            Number(getComputedStyle(text).opacity),
+        };
+      });
+    const arrows = Array.from(host.querySelectorAll('.arrows-group .arrow'))
+      .filter(visible)
+      .map(rect);
+    const controls = Array.from(
+      document.querySelectorAll(
+        '[data-graph-fit-obstacle="true"], [data-lod-controls="true"]'
+      )
+    )
+      .filter(visible)
+      .map(rect);
+    const segments = Array.from(
+      host.querySelectorAll<SVGPathElement>('.edges-group .edge')
+    )
+      .filter(visible)
+      .flatMap(path => {
+        const matrix = path.getScreenCTM()!;
+        const points = (path.getAttribute('d')?.match(/[ML][^ML]+/g) ?? []).map(
+          command => {
+            const [x, y] = command.slice(1).split(',').map(Number);
+            const point = new DOMPoint(x, y).matrixTransform(matrix);
+            return { x: point.x, y: point.y };
+          }
+        );
+        return points
+          .slice(1)
+          .map((target, index) => ({ source: points[index], target }));
+      });
+    const wireHits = (
+      line: (typeof segments)[number],
+      box: ReturnType<typeof rect>
+    ) => {
+      let low = 0,
+        high = 1;
+      for (const [axis, span] of [
+        ['x', 'width'],
+        ['y', 'height'],
+      ] as const) {
+        const delta = line.target[axis] - line.source[axis];
+        const min = box[axis] + 0.5,
+          max = box[axis] + box[span] - 0.5;
+        if (!delta) {
+          if (line.source[axis] < min || line.source[axis] > max) return false;
+        } else {
+          const a = (min - line.source[axis]) / delta,
+            b = (max - line.source[axis]) / delta;
+          low = Math.max(low, Math.min(a, b));
+          high = Math.min(high, Math.max(a, b));
+          if (low > high) return false;
+        }
+      }
+      return true;
+    };
+    const violations: string[] = [];
+    for (const card of cards) {
+      for (const title of card.titles) {
+        if (!contains(card.box, title.box))
+          violations.push(`title-clipped:${card.id}`);
+        if (title.font < 11.9) violations.push(`title-small:${card.id}`);
+      }
+      for (const [index, part] of card.parts.entries()) {
+        if (!contains(card.box, part.box))
+          violations.push(`card-part-clipped:${card.id}:${part.kind}`);
+        for (const other of card.parts.slice(index + 1))
+          if (overlaps(part.box, other.box))
+            violations.push(
+              `card-part-overlap:${card.id}:${part.kind}:${other.kind}`
+            );
+      }
+    }
+    for (const [index, label] of labels.entries()) {
+      if (!contains(label.box, label.text))
+        violations.push(`label-clipped:${label.id}`);
+      if (!contains(viewport, label.box))
+        violations.push(`label-offscreen:${label.id}`);
+      if (label.font < 11.9 || label.opacity < 0.99)
+        violations.push(`label-unreadable:${label.id}`);
+      if (
+        [
+          ...cards.map(card => card.box),
+          ...arrows,
+          ...controls,
+          ...labels.slice(index + 1).map(other => other.box),
+        ].some(box => overlaps(label.box, box))
+      )
+        violations.push(`label-overlap:${label.id}`);
+      if (segments.some(segment => wireHits(segment, label.box)))
+        violations.push(`label-wire-overlap:${label.id}`);
+    }
+    return { viewport, cards, labels, segments, violations };
+  });
+}
+
+export async function inspectItemSymbols(
+  page: Page,
+  info: TestInfo,
+  stage: string
+) {
+  await expect
+    .poll(async () =>
+      (await readItemSymbols(page)).labels.every(label => label.opacity >= 0.99)
+    )
+    .toBe(true);
+  const geometry = await readItemSymbols(page);
+  const json = info.outputPath(`${stage}.json`),
+    png = info.outputPath(`${stage}.png`);
+  await writeFile(json, JSON.stringify(geometry));
+  await info.attach(`${stage}.json`, {
+    path: json,
+    contentType: 'application/json',
+  });
+  await page.screenshot({ path: png });
+  await info.attach(`${stage}.png`, { path: png, contentType: 'image/png' });
+  expect(
+    geometry.cards.length,
+    'The detail view must paint useful item content'
+  ).toBeGreaterThan(0);
+  expect(geometry.cards.flatMap(card => card.titles).length).toBeGreaterThan(0);
+  expect(geometry.violations).toEqual([]);
+  return geometry;
+}
diff --git a/tests/lib/runner/unified-cli.test.mjs b/tests/lib/runner/unified-cli.test.mjs
index b4845bae..b3df7887 100644
--- a/tests/lib/runner/unified-cli.test.mjs
+++ b/tests/lib/runner/unified-cli.test.mjs
@@ -46,7 +46,7 @@ test('disposable Git fixture commits do not spawn background maintenance', t =>
   assert.deepEqual(events.filter(event => event.event === 'child_start' && event.argv?.includes('maintenance')), []);
 });
 
-for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets']) {
+for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'item-wires', 'large-symbols', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets']) {
   test(`CLI forwards failure-only tracing without retries for ${sequence}`, t => {
     const { dir, run } = fixture(t);
     const report = { suites: [{ specs: [{ title: 'fixture', ok: true,
@@ -60,6 +60,14 @@ for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'item-wires',
       assert.ok(!args.includes('tests/e2e/graph/semantic-lod.spec.ts'));
       assert.ok(!args.includes('tests/e2e/auth/router-navigation.spec.ts'));
     }
+    if (sequence === 'large-symbols') {
+      assert.ok(args.includes('tests/e2e/graph/large-graph-symbols.spec.ts'));
+      assert.ok(!args.includes('--headed'));
+      assert.equal(SEQUENCES[sequence].blocking, true);
+      for (const profile of ['pr', 'full']) assert.ok(PROFILES[profile].includes(sequence));
+      const workflow = readFileSync(join(root, '.github/workflows/ci.yml'), 'utf8');
+      assert.equal(workflow.split('run: node tests/run-unified.mjs --sequence large-symbols --out test-artifacts/ci-large-symbols').length, 2);
+    }
     if (sequence === 'schematic-visual') {
       assert.ok(args.includes('--config=playwright.schematic.config.ts'));
       assert.equal(SEQUENCES[sequence].blocking, true);
@@ -70,6 +78,7 @@ for (const sequence of ['new-user', 'semantic-lod', 'nested-lod', 'item-wires',
     if (sequence === 'item-wires' || sequence === 'nested-lod' || sequence === 'semantic-lod' || sequence === 'layout-recovery' || sequence === 'router-navigation') {
       const spec = sequence === 'item-wires' ? 'tests/e2e/graph/item-wire-consumers.spec.ts' : sequence === 'nested-lod' ? 'tests/e2e/graph/nested-semantic-lod.spec.ts' : sequence === 'semantic-lod' ? 'tests/e2e/graph/semantic-lod.spec.ts' : sequence === 'layout-recovery' ? 'tests/e2e/graph/layout-recovery.spec.ts' : 'tests/e2e/auth/router-navigation.spec.ts';
       assert.ok(args.includes(spec));
+      if (sequence === 'item-wires') assert.ok(args.includes('tests/e2e/graph/item-symbols.spec.ts'));
       assert.equal(SEQUENCES[sequence].blocking, true);
       const workflow = readFileSync(join(root, '.github/workflows/ci.yml'), 'utf8');
       const command = `run: xvfb-run --auto-servernum node tests/run-unified.mjs --sequence ${sequence} --out test-artifacts/ci-${sequence}`;
diff --git a/tests/lib/schematicOverview.ts b/tests/lib/schematicOverview.ts
index 9162efa0..7ef236d1 100644
--- a/tests/lib/schematicOverview.ts
+++ b/tests/lib/schematicOverview.ts
@@ -9,7 +9,8 @@ export async function inspectSchematicOverview(
   overview: Locator,
   info: TestInfo,
   relationships: number,
-  stage = 'overview'
+  stage = 'overview',
+  expectedCards = 2
 ) {
   const read = () =>
     overview.evaluate(host => {
@@ -98,7 +99,7 @@ export async function inspectSchematicOverview(
         },
       };
     });
-  await expect.poll(async () => (await read()).cards.length).toBe(2);
+  await expect.poll(async () => (await read()).cards.length).toBe(expectedCards);
   await expect
     .poll(async () => (await read()).routes.length)
     .toBeGreaterThan(0);
diff --git a/tests/sequences/unified.config.mjs b/tests/sequences/unified.config.mjs
index f7757427..afd2c3de 100644
--- a/tests/sequences/unified.config.mjs
+++ b/tests/sequences/unified.config.mjs
@@ -36,7 +36,10 @@ export const SEQUENCES = {
     'tests/e2e/graph/nested-semantic-lod.spec.ts', `--project=${PW}`, '--headed', '--workers=1', '--retries=0', '--trace=retain-on-failure',
   ], blocking: true },
   'item-wires': { adapter: 'playwright', title: 'Item wire consumer acceptance', args: [
-    'tests/e2e/graph/item-wire-consumers.spec.ts', `--project=${PW}`, '--headed', '--workers=1', '--retries=0', '--trace=retain-on-failure',
+    'tests/e2e/graph/item-wire-consumers.spec.ts', 'tests/e2e/graph/item-symbols.spec.ts', `--project=${PW}`, '--headed', '--workers=1', '--retries=0', '--trace=retain-on-failure',
+  ], blocking: true },
+  'large-symbols': { adapter: 'playwright', title: 'Two thousand item zoom acceptance', args: [
+    'tests/e2e/graph/large-graph-symbols.spec.ts', `--project=${PW}`, '--workers=1', '--retries=0', '--trace=retain-on-failure',
   ], blocking: true },
   'schematic-visual': { adapter: 'playwright', title: 'Schematic fixture visual acceptance', args: [
     '--config=playwright.schematic.config.ts', '--workers=1', '--retries=0', '--trace=retain-on-failure',
@@ -68,8 +71,8 @@ export const SEQUENCES = {
 
 export const PROFILES = {
   smoke: ['unit-web', 'smoke', 'e2e-auth'],
-  pr: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets'],
-  full: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets', 'diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
+  pr: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'large-symbols', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets'],
+  full: ['unit-web', 'smoke', 'e2e-auth', 'e2e-graph', 'semantic-lod', 'nested-lod', 'item-wires', 'large-symbols', 'schematic-visual', 'layout-recovery', 'router-navigation', 'mobile', 'perf-budgets', 'diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
   report: ['diagnostics', 'showcase', 'matrix', 'vlm', 'perf-scale', 'cloud-audit'],
   live: ['live-journey'],
 };

From 6d817521a4fa92c9beeedcf6bddbdc7276837c0f Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 07:50:18 -0700
Subject: [PATCH 09/19] fix(graph): bound label work and preserve visible
 interactions

---
 ...readable-symbols-need-reserved-geometry.md |   8 ++
 .../InteractiveGraphVisualization.tsx         | 120 +++++++-----------
 .../SemanticRelationshipBrowser.tsx           |  49 ++++++-
 .../components/SemanticRelationships.test.tsx |  48 +++++++
 .../lib/__tests__/edgeLabelPlacement.test.ts  |  78 ++++++++++++
 packages/web/src/lib/edgeLabelPlacement.ts    |  84 ++++++++++++
 packages/web/src/lib/edgeRouteGeometry.ts     |  41 ++++--
 tests/e2e/graph/item-symbols.spec.ts          |  23 +++-
 tests/e2e/graph/large-graph-symbols.spec.ts   |  44 ++++++-
 9 files changed, 393 insertions(+), 102 deletions(-)
 create mode 100644 packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
 create mode 100644 packages/web/src/lib/edgeLabelPlacement.ts

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 0d62b793..8515e47a 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -22,3 +22,11 @@ Follow-up evidence, 2026-10-28:
 - Focused geometry:19 passed. Actual unified CLI adapter/strict-evidence tests:33 passed. The added `large-symbols` sequence is headless, single-worker and zero-retry with an explicit2000-item/5000-relationship API fixture, overview clutter checks, identity/snapshot checks, detail readability and timing budgets. Discovery/enrollment is not execution; only actual CI artifacts can establish its result.
 
 Initial checkpoint351749 CI40704807354 failed the Grow smoke visible-name assertion: `text=<name>.first()` resolved the newly added non-painted SVG `<title>` tooltip. The actual API node/edge delta had passed. The selector now explicitly requires painted `.node-title-text`; node quick-edit uses the same stricter contract. The earlier CI remains a failure; this correction requires subsequent executed smoke evidence. Comprehensive40704807565 passed and does not substitute for that gate.
+
+
+Independent review and executed scale evidence, 2026-10-28:
+- PR223 review5684569576 identified an unreachable0.08 test zoom (the real minimap clamps at0.1), unbounded failed label placement attempts, culled labels consuming visible slots/counts, and lost Browse return focus. All four are corrected in the next checkpoint. Pure regression fixtures exercise2000 failed candidates, a total collision-check cutoff and2000 hidden candidates preceding one visible label. The production placement helper has32 labels,128 attempts and200000 obstacle/segment checks as invocation-wide limits; partial checks never admit a label.
+- Exact e4 CI40706957761 actually loaded2000 items and5000 edges and passed the eight-group overview clutter/accounting checks. Its first return-to-detail took5847ms against the5000ms gate and failed; the failure screenshot showed zero admitted labels. This remains a failure, not scale acceptance. Corrective work filters placement candidates/obstacles to the visible drawing, prevents hidden labels consuming slots, reuses presentation for unchanged items and rebuilds card content only for uncullled items. The old middle zoom target was not reached in this failed run.
+- CI timing JSON now uses retained file attachments, including the timing before a failing budget assertion. The unchanged five-second budget and minimum visible-content assertions must pass in a subsequent actual run; they were not relaxed.
+- Complete local headed smoke:6 passed in2.0min (single worker, zero retries). Corrected focus/placement desktop+phone cases:2 passed in22.0s, including Browse Back/Escape focus and compact-editor focus return. Geometry/budget cases:22 passed. Relationship UI cases:14 passed; an initial pagination regression exceeded5s because global accessibility queries scanned1250 buttons, then navigation-scoped queries passed without increasing the timeout.
+- Exact relationship access renders at most250 rows per page, with full-result search and explicit original counts. This bounds the new5000-edge browse path; pagination itself does not prove the complete large browser journey.
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index dd110f96..0dd54b99 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -52,14 +52,15 @@ import { useAdaptiveQuality } from '../hooks/useAdaptiveQuality';
 import { nodeLifeClasses, nodeGlowFilter, isActiveStatus, isCompletedStatus, edgeFlowClass } from '../lib/nodeAnimations';
 import { mergeSimulationNodes, mergeSimulationEdges } from '../lib/graphDataMerge';
 import type { ObstacleBox } from '../lib/edgeLabelLayout';
-import { createParallelEdgeRoute, edgeRouteLabel, edgeRouteArrowBounds, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
+import { createParallelEdgeRoute, edgeRouteLabel, edgeRouteArrowBounds, edgeSegmentHitsBox, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
 import { PerfMeter, DriftMeter } from '../lib/perfMeter';
 import { graphItemLayout, measureGraphText, edgeLabelDimensions, GRAPH_FONT_FAMILY, ITEM_TITLE_SIZE, ITEM_TITLE_LINE, ITEM_HEADER_HEIGHT, EDGE_LABEL_SIZE } from '../lib/graphSymbolLayout';
+import { placeItemLabels } from '../lib/edgeLabelPlacement';
 import { separateCards } from '../lib/separateCards';
 import { DEFAULT_PHYSICS, collisionRadius, linkDistance, linkMaxDistance, linkStrength } from '../lib/physicsConfig';
 import { computeCompactLayout, isHierarchicalLayout, parseLayoutMode, LAYOUT_MODE_STORAGE_KEY, type LayoutMode } from '../lib/layoutAlgorithms';
 import { edgeBorderEndpoints, minEdgeLength, clampToMinNeighbors } from '../lib/edgeGeometry';
-import { directionStrategy, arrowVisibility, labelVisibility, perpendicularOffset } from '../lib/edgeLOD';
+import { directionStrategy, arrowVisibility, perpendicularOffset } from '../lib/edgeLOD';
 import { assignParallelEdgeIndices } from '../lib/parallelEdges';
 import { isTap, touchHitSize, isCoarsePointer } from '../lib/touchInteraction';
 import { usePositionSaveQueue } from '../hooks/usePositionSaveQueue';
@@ -102,34 +103,6 @@ const getSmoothedOpacity = (scale: number, threshold: number, fadeRange: number
   return (scale - (threshold - fadeRange)) / (fadeRange * 2);
 };
 
-// PR-4 legibility floor: zoom does double duty in this app — it's both spatial
-// navigation AND the readability control (text is rendered at a fixed font size,
-// so the parent `g` zoom scales it down with everything else). Past a certain
-// zoom-out the primary label is sub-readable. Rather than forcing the user to
-// zoom IN to read a label, counter-scale the title/type so their ON-SCREEN size
-// never drops below a readable floor within the working band. Beyond the band
-// the existing LOD opacity cull still hides them for overview/perf.
-const TYPE_BASE_PX = 13;  // matches .node-type-text font-size
-const LEGIBLE_FLOOR_PX = 12; // smallest on-screen size we keep text at
-const LEGIBLE_MAX_BOOST = 1.9; // cap the counter-scale so text never balloons
-// Title appears (and gets the floor) from this zoom — lower than the old
-// title-visible threshold so the label is readable across the working band, not
-// only when zoomed all the way in. Perf-safe: dense graphs hide node text via
-// the data-simplify CSS below SIMPLIFY_SCALE (0.45) regardless of opacity.
-const TITLE_VISIBLE_SCALE = 0.4;
-const legibilityScale = (basePx: number, k: number) => {
-  if (!k || k <= 0) return 1;
-  return Math.min(LEGIBLE_MAX_BOOST, Math.max(1, LEGIBLE_FLOOR_PX / (basePx * k)));
-};
-// A scale about a stored vertical anchor (data-cy) so multi-line title blocks
-// grow/shrink as a unit (font AND line-spacing together → never overlap).
-const legibilityTransform = (cy: number, basePx: number, k: number) => {
-  const s = legibilityScale(basePx, k);
-  return `translate(0,${cy}) scale(${s}) translate(0,${-cy})`;
-};
-
-// The legibility boost must never let text escape its card. The full title
-// remains available in the editor; at overview zoom the card is the boundary.
 function fittedTitleTransform(element: SVGGElement): string {
   const cy = Number(element.getAttribute('data-cy')) || 0;
   const scale = Number(element.getAttribute('data-title-scale')) || 1;
@@ -288,7 +261,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         containerRef.current?.querySelectorAll<SVGGElement>('.node-expand-icon') ?? []
       ).find(element => element.dataset.nodeId === returnFocusId);
       trigger?.setAttribute('aria-expanded', 'false');
-      trigger?.focus({ preventScroll: true });
+      const card = trigger?.closest<SVGGElement>('.node');
+      (card?.getAttribute('data-detail') === 'compact' ? card : trigger)?.focus({ preventScroll: true });
     });
   }, []);
   const toggleExpandedNode = useCallback((n: WorkItem) => {
@@ -482,6 +456,11 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
   const [selectedEdge, setSelectedEdge] = useState<WorkItemEdge | null>(null);
   const [itemLabelCount, setItemLabelCount] = useState(0);
   const [itemRelationshipScope, setItemRelationshipScope] = useState<RelationshipScope | null>(null);
+  const itemRelationshipTriggerRef = useRef<HTMLButtonElement>(null);
+  const closeItemRelationships = useCallback(() => {
+    setItemRelationshipScope(null);
+    requestAnimationFrame(() => itemRelationshipTriggerRef.current?.focus({preventScroll:true}));
+  }, []);
   useEffect(() => { setItemRelationshipScope(null); setItemLabelCount(0); }, [currentGraph?.id]);
   const [createNodePosition, setCreateNodePosition] = useState<{ x: number; y: number; z: number } | undefined>(undefined);
   const [currentTransform, setCurrentTransform] = useState({ x: 0, y: 0, scale: 1 });
@@ -3414,12 +3393,13 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       element.select('.long-press-feedback').remove();
     });
 
-    let presentedScale = NaN;
+    const nodePresentationScales = new WeakMap<WorkItem, number>();
     const updateNodePresentation = () => {
-      if (presentedScale === itemPresentationScaleRef.current) return;
-      presentedScale = itemPresentationScaleRef.current;
+      const presentedScale = itemPresentationScaleRef.current;
       g.attr('data-presentation-scale', presentedScale);
       nodeElements.each(function(d: WorkItem) {
+        if ((cullActive && (d as any)._culled) || nodePresentationScales.get(d) === presentedScale) return;
+        nodePresentationScales.set(d, presentedScale);
         const node = d3.select(this), layout = getNodeDimensions(d);
         node.attr('data-detail', layout.compact ? 'compact' : 'full').attr('role', layout.compact ? 'button' : 'group').attr('tabindex', layout.compact ? 0 : null).attr('aria-label', `${d.title}, ${getTypeConfig(d.type as WorkItemType).label}`);
         node.on('keydown.compact', (event: KeyboardEvent) => {
@@ -3497,9 +3477,6 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       });
       labelAvoidCounter++;
       const runAvoidance = forceAvoid || (simulation.alpha() < 0.1 && labelAvoidCounter % 15 === 0);
-      if (runAvoidance) nodeLabelObstacles = (simulation.nodes() as any[]).map(n => ({
-        x: n.x || 0, y: n.y || 0, ...getNodeDimensions(n)
-      }));
       if (!runAvoidance) {
         if (simulation.alpha() > 0.0015) { edgeLabelGroups.style('display', 'none'); setItemLabelCount(0); }
         return;
@@ -3513,25 +3490,27 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         if (!rect.width || !rect.height) return [];
         return [{ x: (rect.x + rect.width / 2 - viewportRect.x - camera.x) / liveK, y: (rect.y + rect.height / 2 - viewportRect.y - camera.y) / liveK, width: rect.width / liveK, height: rect.height / liveK }];
       });
-      routeSegments = visibleEdges.flatMap((edge: any) => edge._route?.segments ?? []);
-      routeObstacles = visibleEdges.filter((edge: any) => edge._route).map((edge: any) => edgeRouteArrowBounds(edge._route, arrowVisibility(liveK, edge._pTotal || 1).scale));
-      const placed: ObstacleBox[] = [];
-      edgeLabelGroups.sort((a: any, b: any) => a.id.localeCompare(b.id)).each(function(d: any) {
-        const route = d._route as EdgeRouteGeometry | null;
+      const intersectsViewport = (box: ObstacleBox) => Math.abs(box.x - labelViewport!.x) <= (box.width + labelViewport!.width) / 2 + 8 && Math.abs(box.y - labelViewport!.y) <= (box.height + labelViewport!.height) / 2 + 8;
+      nodeLabelObstacles = (simulation.nodes() as any[]).map(n => ({ x: n.x || 0, y: n.y || 0, ...getNodeDimensions(n) })).filter(intersectsViewport);
+      const drawnEdges = visibleEdges.filter((edge: any) => edgeDisplay(edge) !== 'none');
+      routeSegments = drawnEdges.flatMap((edge: any) => edge._route?.segments ?? []).filter(segment => edgeSegmentHitsBox(segment, labelViewport!, 8));
+      routeObstacles = drawnEdges.map((edge: any) => edgeRouteArrowBounds(edge._route, arrowVisibility(liveK, edge._pTotal || 1).scale)).filter(intersectsViewport);
+      const result = placeItemLabels(edgeLabelGroups.data().map((d: any) => {
         d._labelScale = Math.max(1, 1 / liveK);
-        const offset = (d._routeLabel?.offset < 0 ? -1 : 1) * (22 * d._labelScale + 3);
-        const dims = { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale };
-        const placement = route && liveK >= 0.6 && placed.length < 32
-          ? edgeRouteLabel(route, {
-              dims, t: d.labelT, offset, offsets: [offset, -offset],
-              obstacles: nodeLabelObstacles.concat(uiLabelObstacles, routeObstacles, placed), segments: routeSegments, viewport: labelViewport
-            }) : null;
+        return {
+          id: d.id, route: d._route, eligible: liveK >= 0.6 && edgeDisplay(d) !== 'none',
+          dims: { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale },
+          t: d.labelT, offset: (d._routeLabel?.offset < 0 ? -1 : 1) * (22 * d._labelScale + 3),
+        };
+      }), { viewport: labelViewport, obstacles: nodeLabelObstacles.concat(uiLabelObstacles.filter(intersectsViewport), routeObstacles), segments: routeSegments });
+      edgeLabelGroups.each(function(d: any) {
+        const placement = result.placements.get(d.id) ?? null;
         d._labelBlocked = !placement;
         applyLabel(this, d, placement);
-        const box = labelRects.get(d.id);
-        if (box) placed.push(box);
       });
-      setItemLabelCount(placed.length);
+      g.attr('data-label-attempts', result.attempts);
+      g.attr('data-label-checks', result.checks);
+      setItemLabelCount(result.placements.size);
     };
 
     edgeLabelGroups
@@ -3718,6 +3697,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     });
 
     // Update zoom with LOD updates
+    let labelsShownAtScale = liveScale >= 0.6;
     zoom.on('zoom', (event) => {
       // D3 sets sourceEvent only for direct wheel/pointer gestures. Programmatic
       // fit/restore transforms must remain distinguishable so an automatic fit
@@ -3778,37 +3758,25 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       };
       
       // Update text opacities with smooth transitions
-      g.selectAll('.node-type-text' as any)
+      const activeNodes = nodeElements.filter((d: any) => !cullActive || !d._culled);
+      activeNodes.selectAll('.node-type-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.FAR));
       // Title appears across the working band (not only when zoomed all the way
       // in) and is counter-scaled to a legibility floor so it stays readable. The
       // group transform is updated live here (the only path that runs on zoom).
-      g.selectAll('.node-title-text' as any)
+      activeNodes.selectAll('.node-title-text' as any)
         .style('opacity', scale >= 0.3 ? 1 : 0);
-      // Counter-scale the title block to the legibility floor. Skipped on dense
-      // graphs in data-simplify mode (titles hidden via CSS → no visible effect,
-      // so don't walk 1000+ groups every pan frame).
-      if (!simplifiedRef.current) {
-        g.selectAll('.node-title-group' as any)
-          .attr('transform', function(this: any) {
-            const cy = +(this.getAttribute('data-cy')) || 0;
-            return fittedTitleTransform(this as SVGGElement);
-          });
-      }
-      g.selectAll('.node-description-text' as any)
+      activeNodes.selectAll('.node-description-text' as any)
         .style('opacity', getSmoothedOpacity(LOD_THRESHOLDS.CLOSE));
       // Edge labels + arrows follow the edge LOD module (zoom-aware, crowd-aware).
-      g.selectAll('.edge-label-group' as any)
-        .style('opacity', (d: any) => (scale >= 0.6 ? 1 : 0))
-        .style('pointer-events', (d: any) => (scale >= 0.6 ? 1 : 0) > 0 ? 'all' : 'none');
-      g.selectAll('.edge-label' as any)
-        .style('opacity', 1);
-      g.selectAll('.edge-label-icon' as any)
-        .style('opacity', 1);
-      g.selectAll('.arrow' as any)
+      if (labelsShownAtScale !== (scale >= 0.6)) {
+        labelsShownAtScale = scale >= 0.6;
+        edgeLabelGroups.style('opacity', labelsShownAtScale ? 1 : 0).style('pointer-events', labelsShownAtScale ? 'all' : 'none');
+      }
+      arrowElements.filter((d: any) => edgeDisplay(d) !== 'none')
         .style('opacity', (d: any) =>
           directionStrategy(scale) === 'hidden' ? 0 : arrowVisibility(scale, d?._pTotal || 1).opacity);
-      g.selectAll('.edge' as any)
+      linkElements.filter((d: any) => edgeDisplay(d) !== 'none')
         .style('opacity', Math.max(0.1, getSmoothedOpacity(LOD_THRESHOLDS.VERY_FAR, 0.1)))
         .attr('stroke-width', function(d: any) {
           // Don't override stroke width if this edge has an active dialog
@@ -3868,6 +3836,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     // the default midpoint and could overlap → clean starting positions need it.
     runLabelAvoidanceRef.current = () => updateEdgePositions(true);
     itemPresentationScaleRef.current = svg.node() ? d3.zoomTransform(svg.node()!).k : 1;
+    if (cullEnabled) applyViewportCull();
     updateNodePresentation();
     updateEdgePositions(true);
     setTimeout(() => { if (simulationRef.current === simulation) updateEdgePositions(true); }, 500);
@@ -5115,6 +5084,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-overview={semanticOverviewActive || undefined} data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined} data-dots={isDotMode ? 'true' : undefined}>
       <LayoutSaveStatus queue={positionSaveQueue} />
       {!semanticOverviewActive && workItemEdges.length > 0 && <button
+        ref={itemRelationshipTriggerRef}
         data-graph-fit-obstacle="true"
         className="absolute bottom-3 left-16 z-20 rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-sm text-slate-100 shadow-lg"
         onClick={() => setItemRelationshipScope({ kind: 'all' })}
@@ -5126,7 +5096,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         contextFor={id => itemRelationshipIndex.hierarchy.paths.get(id)?.map(key => itemRelationshipIndex.hierarchy.groups.get(key)?.label).filter(Boolean).join(' / ') || 'Ungrouped'}
         onScope={setItemRelationshipScope}
         onInspect={id => { setItemRelationshipScope(null); inspectOverviewItem(id, true); }}
-        onBack={() => setItemRelationshipScope(null)}
+        onBack={closeItemRelationships}
         backLabel="Back to graph"
         visible={true}
         onEdit={id => {
diff --git a/packages/web/src/components/SemanticRelationshipBrowser.tsx b/packages/web/src/components/SemanticRelationshipBrowser.tsx
index 69d2c620..6a93087d 100644
--- a/packages/web/src/components/SemanticRelationshipBrowser.tsx
+++ b/packages/web/src/components/SemanticRelationshipBrowser.tsx
@@ -33,6 +33,7 @@ export function SemanticRelationshipBrowser({
   backLabel = 'Back to groups',
   onEdit,
 }: Props) {
+  const [page, setPage] = useState(0);
   const [type, setType] = useState('');
   const [search, setSearch] = useState('');
   const [direction, setDirection] = useState<RelationshipDirection>('both');
@@ -67,6 +68,16 @@ export function SemanticRelationshipBrowser({
       ),
     [index, related, type, search]
   );
+  const pageSize = 250;
+  const pageCount = Math.max(1, Math.ceil(rows.length / pageSize));
+  const currentPage = Math.min(page, pageCount - 1);
+  const pageRows = rows.slice(
+    currentPage * pageSize,
+    (currentPage + 1) * pageSize
+  );
+  useEffect(() => {
+    setPage(0);
+  }, [scope, type, search, direction, hops]);
   const missingGroup =
     scope.kind === 'internal'
       ? !relationshipGroupLabel(index, scope.group)
@@ -237,15 +248,49 @@ export function SemanticRelationshipBrowser({
       <p role="status" className="text-sm my-3">
         {rows.length} of {related.length} relationships
       </p>
+      {pageCount > 1 && (
+        <nav
+          aria-label="Relationship pages"
+          className="flex items-center justify-between gap-2 my-3 text-sm"
+        >
+          <button
+            className="min-h-11 px-3 rounded border border-gray-600 disabled:opacity-40"
+            disabled={currentPage === 0}
+            onClick={() => setPage(currentPage - 1)}
+          >
+            Previous relationships
+          </button>
+          <span>
+            {currentPage * pageSize + 1}–
+            {Math.min(rows.length, (currentPage + 1) * pageSize)} of{' '}
+            {rows.length}
+          </span>
+          <button
+            className="min-h-11 px-3 rounded border border-gray-600 disabled:opacity-40"
+            disabled={currentPage + 1 === pageCount}
+            onClick={() => setPage(currentPage + 1)}
+          >
+            Next relationships
+          </button>
+        </nav>
+      )}
       <ul className="space-y-3">
-        {rows.map(edge => (
+        {pageRows.map(edge => (
           <li
             key={edge.id}
             data-lod-edge-id={edge.id}
             className="rounded border border-gray-700 bg-gray-900 p-3"
           >
             <p className="text-xs text-gray-300 break-all">{edge.id}</p>
-            {onEdit && <button className="min-h-11 text-sm text-emerald-200" onClick={() => onEdit(edge.id)} aria-label={`Edit relationship ${edge.id}`}>Edit relationship</button>}
+            {onEdit && (
+              <button
+                className="min-h-11 text-sm text-emerald-200"
+                onClick={() => onEdit(edge.id)}
+                aria-label={`Edit relationship ${edge.id}`}
+              >
+                Edit relationship
+              </button>
+            )}
             {endpoint(relationshipEndpoint(edge.source))}
             <p className="text-sm font-semibold my-1">→ {edge.type}</p>
             {endpoint(relationshipEndpoint(edge.target))}
diff --git a/packages/web/src/components/SemanticRelationships.test.tsx b/packages/web/src/components/SemanticRelationships.test.tsx
index b2e60ded..0cd0b80f 100644
--- a/packages/web/src/components/SemanticRelationships.test.tsx
+++ b/packages/web/src/components/SemanticRelationships.test.tsx
@@ -9,6 +9,8 @@ import {
 } from '@testing-library/react';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 import { SemanticGraphOverview } from './SemanticGraphOverview';
+import { SemanticRelationshipBrowser } from './SemanticRelationshipBrowser';
+import { indexSemanticRelationships } from '../lib/semanticRelationships';
 import type { SemanticEdge, SemanticItem } from '../lib/semanticLOD';
 
 const items: SemanticItem[] = ['Gateway', 'Queue', 'Worker', 'Inventory'].map(
@@ -391,3 +393,49 @@ it('explains when a live regrouping removes the group whose relationships are op
   fireEvent.click(screen.getByRole('button', { name: 'Back to groups' }));
   expect(screen.getByRole('region', { name: 'Graph groups' })).toBeVisible();
 });
+
+it('bounds relationship rows while retaining search, exact editing and every page', () => {
+  const many = Array.from({ length: 501 }, (_, index) => ({
+    id: `edge-${String(index).padStart(4, '0')}`,
+    source: 'n0',
+    target: 'n1',
+    type: 'BLOCKS',
+  }));
+  const edit = vi.fn();
+  render(
+    <SemanticRelationshipBrowser
+      index={indexSemanticRelationships(items, many)}
+      scope={{ kind: 'all' }}
+      contextFor={() => ''}
+      onScope={noop}
+      onInspect={noop}
+      onBack={noop}
+      onEdit={edit}
+      visible
+    />
+  );
+  expect(edgeIds()).toEqual(many.slice(0, 250).map(edge => edge.id));
+  expect(screen.getByText('501 of 501 relationships')).toBeVisible();
+  const pages = within(
+    screen.getByRole('navigation', { name: 'Relationship pages' })
+  );
+  fireEvent.click(pages.getByRole('button', { name: 'Next relationships' }));
+  expect(edgeIds()).toEqual(many.slice(250, 500).map(edge => edge.id));
+  fireEvent.click(pages.getByRole('button', { name: 'Next relationships' }));
+  expect(edgeIds()).toEqual(['edge-0500']);
+  expect(
+    pages.getByRole('button', { name: 'Next relationships' })
+  ).toBeDisabled();
+  fireEvent.change(screen.getByLabelText('Find a relationship'), {
+    target: { value: 'edge-0003' },
+  });
+  expect(edgeIds()).toEqual(['edge-0003']);
+  fireEvent.click(
+    screen.getByRole('button', { name: 'Edit relationship edge-0003' })
+  );
+  expect(edit).toHaveBeenCalledWith('edge-0003');
+  fireEvent.change(screen.getByLabelText('Find a relationship'), {
+    target: { value: '' },
+  });
+  expect(edgeIds()).toEqual(many.slice(0, 250).map(edge => edge.id));
+});
diff --git a/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts b/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
new file mode 100644
index 00000000..fab08db3
--- /dev/null
+++ b/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
@@ -0,0 +1,78 @@
+import { expect, it } from 'vitest';
+import { createEdgeRoute } from '../edgeRouteGeometry';
+import {
+  placeItemLabels,
+  ITEM_LABEL_BUDGET,
+  type ItemLabelCandidate,
+} from '../edgeLabelPlacement';
+
+const route = createEdgeRoute([
+  { x: 0, y: 0 },
+  { x: 300, y: 0 },
+])!;
+const candidate = (id: string): ItemLabelCandidate => ({
+  id,
+  route,
+  eligible: true,
+  dims: { width: 104, height: 26 },
+  t: 0.5,
+  offset: 25,
+});
+const viewport = { x: 150, y: 0, width: 600, height: 400 };
+
+it('bounds failed attempts even when every label is blocked', () => {
+  const result = placeItemLabels(
+    Array.from({ length: 2000 }, (_, index) => candidate(String(index))),
+    {
+      viewport,
+      obstacles: [{ x: 150, y: 0, width: 1000, height: 1000 }],
+      segments: [],
+    }
+  );
+  expect(result.placements.size).toBe(0);
+  expect(result.attempts).toBe(ITEM_LABEL_BUDGET.attempts);
+  expect(result.checks).toBeLessThanOrEqual(ITEM_LABEL_BUDGET.checks);
+});
+
+it('stops total obstacle work without admitting a partially checked candidate', () => {
+  const result = placeItemLabels(
+    Array.from({ length: 2000 }, (_, index) => candidate(String(index))),
+    {
+      viewport,
+      obstacles: [
+        ...Array.from({ length: 25000 }, () => ({
+          x: 10000,
+          y: 10000,
+          width: 10,
+          height: 10,
+        })),
+        { x: 150, y: 0, width: 1000, height: 1000 },
+      ],
+      segments: [],
+    }
+  );
+  expect(result.placements.size).toBe(0);
+  expect(result.checks).toBe(ITEM_LABEL_BUDGET.checks);
+  expect(result.attempts).toBeLessThan(ITEM_LABEL_BUDGET.attempts);
+});
+
+it('hidden and offscreen routes cannot consume the visible-label budget', () => {
+  const hidden = Array.from({ length: 2000 }, (_, index) => ({
+    ...candidate(`a-${index}`),
+    eligible: false,
+  }));
+  const outside = {
+    ...candidate('b'),
+    route: createEdgeRoute([
+      { x: 10000, y: 0 },
+      { x: 11000, y: 0 },
+    ])!,
+  };
+  const result = placeItemLabels([...hidden, outside, candidate('visible')], {
+    viewport,
+    obstacles: [],
+    segments: route.segments,
+  });
+  expect([...result.placements.keys()]).toEqual(['visible']);
+  expect(result.attempts).toBe(1);
+});
diff --git a/packages/web/src/lib/edgeLabelPlacement.ts b/packages/web/src/lib/edgeLabelPlacement.ts
new file mode 100644
index 00000000..9541f0c9
--- /dev/null
+++ b/packages/web/src/lib/edgeLabelPlacement.ts
@@ -0,0 +1,84 @@
+import {
+  edgeRouteLabel,
+  edgeSegmentHitsBox,
+  type EdgeRouteGeometry,
+  type EdgeRouteLabel,
+  type EdgeRouteSegment,
+} from './edgeRouteGeometry';
+import type { Dims, ObstacleBox } from './edgeLabelLayout';
+
+export interface ItemLabelCandidate {
+  id: string;
+  route: EdgeRouteGeometry | null;
+  eligible: boolean;
+  dims: Dims;
+  t: number;
+  offset: number;
+}
+
+export const ITEM_LABEL_BUDGET = {
+  labels: 32,
+  attempts: 128,
+  checks: 200000,
+} as const;
+
+export function placeItemLabels(
+  candidates: readonly ItemLabelCandidate[],
+  options: {
+    viewport: ObstacleBox;
+    obstacles: readonly ObstacleBox[];
+    segments: readonly Pick<EdgeRouteSegment, 'source' | 'target'>[];
+  }
+) {
+  const placements = new Map<string, EdgeRouteLabel>();
+  const occupied: ObstacleBox[] = [];
+  const budget = { remaining: ITEM_LABEL_BUDGET.checks as number };
+  let attempts = 0;
+  for (const candidate of [...candidates].sort((a, b) =>
+    a.id.localeCompare(b.id)
+  )) {
+    if (
+      placements.size >= ITEM_LABEL_BUDGET.labels ||
+      attempts >= ITEM_LABEL_BUDGET.attempts ||
+      budget.remaining <= 0
+    )
+      break;
+    if (
+      !candidate.eligible ||
+      !candidate.route ||
+      !candidate.route.segments.some(segment =>
+        edgeSegmentHitsBox(segment, options.viewport)
+      )
+    )
+      continue;
+    attempts++;
+    const placement = edgeRouteLabel(candidate.route, {
+      dims: candidate.dims,
+      t: candidate.t,
+      offset: candidate.offset,
+      offsets: [candidate.offset, -candidate.offset],
+      obstacles: options.obstacles.concat(occupied),
+      segments: options.segments,
+      viewport: options.viewport,
+      budget,
+    });
+    if (!placement) continue;
+    placements.set(candidate.id, placement);
+    const angle = (placement.rotation * Math.PI) / 180;
+    occupied.push({
+      x: placement.x,
+      y: placement.y,
+      width:
+        Math.abs(Math.cos(angle)) * candidate.dims.width +
+        Math.abs(Math.sin(angle)) * candidate.dims.height,
+      height:
+        Math.abs(Math.sin(angle)) * candidate.dims.width +
+        Math.abs(Math.cos(angle)) * candidate.dims.height,
+    });
+  }
+  return {
+    placements,
+    attempts,
+    checks: ITEM_LABEL_BUDGET.checks - budget.remaining,
+  };
+}
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 7b23d6ed..55716018 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -225,6 +225,7 @@ export function edgeRouteLabel(
     segments?: readonly Pick<EdgeRouteSegment, 'source' | 'target'>[];
     offsets?: readonly number[];
     viewport?: ObstacleBox;
+    budget?: { remaining: number };
   }
 ) {
   const { dims, obstacles = [] } = options;
@@ -280,20 +281,32 @@ export function edgeRouteLabel(
               viewport.height / 2)
         )
           continue;
-        if (
-          obstacles.some(
-            box =>
-              Math.abs(x - box.x) < (width + box.width) / 2 + padding &&
-              Math.abs(y - box.y) < (height + box.height) / 2 + padding
-          )
-        )
-          continue;
-        if (
-          options.segments?.some(part =>
-            edgeSegmentHitsBox(part, { x, y, width, height }, padding)
-          )
-        )
-          continue;
+        let blocked = false;
+        for (const box of obstacles) {
+          if (options.budget) {
+            if (options.budget.remaining <= 0) return best;
+            options.budget.remaining--;
+          }
+          if (
+            Math.abs(x - box.x) < (width + box.width) / 2 + padding &&
+            Math.abs(y - box.y) < (height + box.height) / 2 + padding
+          ) {
+            blocked = true;
+            break;
+          }
+        }
+        if (blocked) continue;
+        for (const part of options.segments ?? []) {
+          if (options.budget) {
+            if (options.budget.remaining <= 0) return best;
+            options.budget.remaining--;
+          }
+          if (edgeSegmentHitsBox(part, { x, y, width, height }, padding)) {
+            blocked = true;
+            break;
+          }
+        }
+        if (blocked) continue;
         const delta =
           Math.abs(distance - desired) +
           Math.abs(candidateOffset - offset) * 0.01;
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
index dfc82b13..d8c0e30c 100644
--- a/tests/e2e/graph/item-symbols.spec.ts
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -107,19 +107,18 @@ for (const width of [1440, 390])
         );
         if (width === 1440) expect(geometry.labels.length).toBe(2);
       }
-      const targetNode = page
-        .locator('.node')
-        .filter({
-          has: page.locator('.node-title-group > title', {
-            hasText: target.title,
-          }),
-        });
+      const targetNode = page.locator('.node').filter({
+        has: page.locator('.node-title-group > title', {
+          hasText: target.title,
+        }),
+      });
       await targetNode.focus();
       await page.keyboard.press('Enter');
       await expect(
         page.getByRole('dialog', { name: 'Edit work item', exact: true })
       ).toBeVisible();
       await page.keyboard.press('Escape');
+      await expect(targetNode).toBeFocused();
       await page
         .getByRole('button', {
           name: /2 relationships, .*Browse all relationships/,
@@ -134,6 +133,16 @@ for (const width of [1440, 390])
       await page
         .getByRole('button', { name: 'Back to graph', exact: true })
         .click();
+      const browse = page.getByRole('button', {
+        name: /2 relationships, .*Browse all relationships/,
+      });
+      await expect(browse).toBeFocused();
+      await page.keyboard.press('Enter');
+      await expect(
+        page.getByRole('button', { name: 'Back to graph', exact: true })
+      ).toBeFocused();
+      await page.keyboard.press('Escape');
+      await expect(browse).toBeFocused();
       if (width === 1440) {
         const saved = await page
           .locator('.edge-label-group:visible')
diff --git a/tests/e2e/graph/large-graph-symbols.spec.ts b/tests/e2e/graph/large-graph-symbols.spec.ts
index 9c56af06..65edb1c0 100644
--- a/tests/e2e/graph/large-graph-symbols.spec.ts
+++ b/tests/e2e/graph/large-graph-symbols.spec.ts
@@ -1,3 +1,4 @@
+import { writeFile } from 'node:fs/promises';
 import { test as base, expect } from '@playwright/test';
 import { login, TEST_USERS } from '../../lib/auth';
 import { gql } from '../../lib/graphRequest';
@@ -129,7 +130,7 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
     paintedCards?: number;
     labels?: number;
   }[] = [];
-  for (const scale of [1.2, 0.08, 1.2]) {
+  for (const scale of [1.2, 0.1, 1.2]) {
     const start = Date.now();
     await page.evaluate(
       ({ x, y, scale }) => (window as any).miniMapZoom(x, y, scale),
@@ -151,6 +152,15 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
       String(scale)
     );
     const elapsed = Date.now() - start;
+    const timingPath = info.outputPath(`zoom-${timings.length}-timing.json`);
+    await writeFile(
+      timingPath,
+      JSON.stringify({ nodes: SIZE, edges: 5000, loadedMs, scale, elapsed })
+    );
+    await info.attach(`zoom-${timings.length}-timing.json`, {
+      path: timingPath,
+      contentType: 'application/json',
+    });
     expect(
       elapsed,
       'Zoom must finish within five seconds on the CI runner'
@@ -164,6 +174,20 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
       expect(geometry.cards.length).toBeLessThan(100);
       expect(geometry.labels.length).toBeGreaterThan(0);
       expect(geometry.labels.length).toBeLessThanOrEqual(32);
+      const work = await page
+        .locator('.main-graph-group')
+        .evaluate(element => ({
+          attempts: Number(element.getAttribute('data-label-attempts')),
+          checks: Number(element.getAttribute('data-label-checks')),
+        }));
+      expect(work.attempts).toBeLessThanOrEqual(128);
+      expect(work.checks).toBeLessThanOrEqual(200000);
+      await expect(
+        page.getByRole('button', {
+          name: `5000 relationships, ${geometry.labels.length} labels shown. Browse all relationships`,
+          exact: true,
+        })
+      ).toBeVisible();
       timings.push({
         scale,
         ms: elapsed,
@@ -190,6 +214,13 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
     name: 'Graph relationships',
   });
   await expect(relationships).toBeVisible();
+  await expect(relationships.locator('[data-lod-edge-id]')).toHaveCount(250);
+  await relationships
+    .getByRole('button', { name: 'Next relationships' })
+    .click();
+  await expect(
+    relationships.locator('[data-lod-edge-id]').first()
+  ).toHaveAttribute('data-lod-edge-id', before.edges[250].id);
   await relationships.getByRole('textbox').fill(before.edges[0].id);
   await expect(
     relationships.getByRole('button', {
@@ -203,15 +234,20 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
   expect(await snapshot()).toEqual(before);
   expect(writes).toEqual([]);
   expect(errors).toEqual([]);
-  await info.attach('two-thousand-node-performance.json', {
-    body: JSON.stringify({
+  const performancePath = info.outputPath('two-thousand-node-performance.json');
+  await writeFile(
+    performancePath,
+    JSON.stringify({
       nodes: SIZE,
       edges: 5000,
       loadedMs,
       timings,
       writes,
       errors,
-    }),
+    })
+  );
+  await info.attach('two-thousand-node-performance.json', {
+    path: performancePath,
     contentType: 'application/json',
   });
 });

From 5d1aef80cf080156d3364e3e525bb308e861d4c1 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 08:09:16 -0700
Subject: [PATCH 10/19] feat(graph): strengthen typography and reconcile
 revealed cards

---
 ...readable-symbols-need-reserved-geometry.md |   9 ++
 .../InteractiveGraphVisualization.tsx         |  40 +++---
 .../src/components/SemanticGraphOverview.tsx  |  34 ++---
 .../lib/__tests__/graphSymbolLayout.test.ts   |  14 +--
 packages/web/src/lib/graphSymbolLayout.ts     |  28 ++---
 packages/web/src/lib/semanticLOD.ts           |   4 +-
 tests/e2e/graph/large-graph-symbols.spec.ts   | 117 +++++++++++++++---
 tests/lib/itemSymbolVisual.ts                 |   4 +-
 tests/lib/schematicOverview.ts                |  10 +-
 9 files changed, 181 insertions(+), 79 deletions(-)

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 8515e47a..4192e728 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -30,3 +30,12 @@ Independent review and executed scale evidence, 2026-10-28:
 - CI timing JSON now uses retained file attachments, including the timing before a failing budget assertion. The unchanged five-second budget and minimum visible-content assertions must pass in a subsequent actual run; they were not relaxed.
 - Complete local headed smoke:6 passed in2.0min (single worker, zero retries). Corrected focus/placement desktop+phone cases:2 passed in22.0s, including Browse Back/Escape focus and compact-editor focus return. Geometry/budget cases:22 passed. Relationship UI cases:14 passed; an initial pagination regression exceeded5s because global accessibility queries scanned1250 buttons, then navigation-scoped queries passed without increasing the timeout.
 - Exact relationship access renders at most250 rows per page, with full-result search and explicit original counts. This bounds the new5000-edge browse path; pagination itself does not prove the complete large browser journey.
+
+
+The owner's follow-up rejects tiny type and plain boxes as the visual direction. The revised contract raises full item/overview titles to18px, compact title and edge-label floors to14px, and graph controls to readable14–16px type. Overview cards reserve240x96px; controls reserve their actual two-line height. Subtle layered fills and a restrained teal heading accent distinguish groups. CSS letter spacing on item type text is neutralized so canvas measurement matches displayed header width.
+
+The6d81752 CI40709921026 large case still failed first zoom at6807ms under the original runner-wall-clock measurement. Its trace shows the timed region included Playwright selector/attribute calls with substantial snapshot/protocol costs (`call867`180338–180836ms, `call869`181294–185485ms, then separate state assertions). The corrected test records both wall time and an in-browser request-to-two-settled-animation-frame duration, with the same5000ms browser budget. This changes the measured boundary and must not be represented as the old wall-time check passing or as a proven performance gain. Both prior failures remain evidence.
+
+Independent review5684764521 also reproduced stale compact cards exposed during a held pan. Visibility reconciliation now applies current item geometry before exposing each newly visible card, bounded to changed nodes; the large gate includes a held-pan/reveal assertion. Browse focus restoration now preserves an unrelated control focused before the scheduled return.54 relevant geometry/hierarchy/relationship unit cases passed after the typography/layout change; strict final browser and CI acceptance remain required.
+
+Revised18px/14px typography passed both focused headed desktop/phone cases in23.5s, one worker and zero retries, with strict cleanup and the same deliberate clipping/overlap controls. Scoped web TypeScript passed. This does not replace the pending final large-graph, hierarchy, phone and workflow CI artifacts.
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 0dd54b99..2c95bf7d 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -131,9 +131,9 @@ function renderItemMetadata(element: SVGGElement, item: WorkItem, layout: Return
   const priority = Math.round((item.priority || 0) * 100);
   meta.append('circle').attr('cx', -layout.width / 2 + 17).attr('cy', layout.footerY).attr('r', 3.5).attr('fill', status.hexColor);
   meta.append('text').attr('class', 'status-percentage-text').attr('x', -layout.width / 2 + 28).attr('y', layout.footerY)
-    .attr('dominant-baseline', 'middle').text(status.label).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '12px').style('font-weight', '500').style('fill', '#dbe5ee');
+    .attr('dominant-baseline', 'middle').text(status.label).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '14px').style('font-weight', '500').style('fill', '#dbe5ee');
   meta.append('text').attr('class', 'priority-percentage-text').attr('x', layout.width / 2 - 14).attr('y', layout.footerY)
-    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle').text(`P ${priority}%`).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '12px').style('font-weight', '500').style('fill', '#b9c7d7')
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle').text(`P ${priority}%`).style('font-family', GRAPH_FONT_FAMILY).style('font-size', '14px').style('font-weight', '500').style('fill', '#b9c7d7')
     .append('title').text(`Priority ${priority}%`);
 }
 
@@ -459,7 +459,10 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
   const itemRelationshipTriggerRef = useRef<HTMLButtonElement>(null);
   const closeItemRelationships = useCallback(() => {
     setItemRelationshipScope(null);
-    requestAnimationFrame(() => itemRelationshipTriggerRef.current?.focus({preventScroll:true}));
+    requestAnimationFrame(() => {
+      if (document.activeElement && document.activeElement !== document.body) return;
+      itemRelationshipTriggerRef.current?.focus({preventScroll:true});
+    });
   }, []);
   useEffect(() => { setItemRelationshipScope(null); setItemLabelCount(0); }, [currentGraph?.id]);
   const [createNodePosition, setCreateNodePosition] = useState<{ x: number; y: number; z: number } | undefined>(undefined);
@@ -2531,9 +2534,10 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('dominant-baseline', 'central')
       .text((d: WorkItem) => d.type)
       .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.FAR ? 1 : 0)
-      .style('font-size', '12px')
+      .style('font-size', '14px')
       .style('font-family', GRAPH_FONT_FAMILY)
       .style('font-weight', '700')
+      .style('letter-spacing', 'normal')
       .style('fill', (d: WorkItem) => {
         const config = getTypeConfig(d.type as WorkItemType);
         return config.hexColor;
@@ -2916,7 +2920,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('dominant-baseline', 'middle')
       .text((d: WorkItem) => getNodeDimensions(d).description)
       .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
-      .style('font-size', '12px')
+      .style('font-size', '14px')
       .style('font-family', GRAPH_FONT_FAMILY)
       .style('font-weight', '400')
       .style('fill', (d: WorkItem) => {
@@ -3394,16 +3398,14 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     });
 
     const nodePresentationScales = new WeakMap<WorkItem, number>();
-    const updateNodePresentation = () => {
+    const updateNodePresentationFor = (element: SVGGElement, d: WorkItem) => {
       const presentedScale = itemPresentationScaleRef.current;
-      g.attr('data-presentation-scale', presentedScale);
-      nodeElements.each(function(d: WorkItem) {
-        if ((cullActive && (d as any)._culled) || nodePresentationScales.get(d) === presentedScale) return;
-        nodePresentationScales.set(d, presentedScale);
-        const node = d3.select(this), layout = getNodeDimensions(d);
+      if (nodePresentationScales.get(d) === presentedScale) return;
+      nodePresentationScales.set(d, presentedScale);
+        const node = d3.select(element), layout = getNodeDimensions(d);
         node.attr('data-detail', layout.compact ? 'compact' : 'full').attr('role', layout.compact ? 'button' : 'group').attr('tabindex', layout.compact ? 0 : null).attr('aria-label', `${d.title}, ${getTypeConfig(d.type as WorkItemType).label}`);
         node.on('keydown.compact', (event: KeyboardEvent) => {
-          if (layout.compact && event.target === this && (event.key === 'Enter' || event.key === ' ')) openQuickEdit(event, d);
+          if (layout.compact && event.target === element && (event.key === 'Enter' || event.key === ' ')) openQuickEdit(event, d);
         });
         node.select('.node-bg').attr('x', -layout.width / 2).attr('y', -layout.height / 2).attr('width', layout.width).attr('height', layout.height);
         node.select('.node-title-bar').attr('x', -layout.width / 2 + 2).attr('y', -layout.height / 2 + 2).attr('width', layout.width - 4);
@@ -3416,10 +3418,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         ] as const) node.select(selector).attr('transform', `translate(${x},${y})`);
         node.select('.node-description-text').attr('y', layout.descriptionY).text(layout.description);
         node.select('.node-subgraph-count').attr('y', layout.height / 2 - 10);
-        renderItemTitle(this, d, layout);
-        renderItemMetadata(this, d, layout);
+        renderItemTitle(element, d, layout);
+        renderItemMetadata(element, d, layout);
         node.selectAll('.node-title-bar, .node-type-text, .node-edit-icon, .node-relationship-icon, .node-expand-icon, .node-descend-icon, .node-description-text, .node-meta, .node-subgraph-count, .node-subgraph-stack')
           .style('display', () => layout.compact ? 'none' : null);
+    };
+    const updateNodePresentation = () => {
+      g.attr('data-presentation-scale', itemPresentationScaleRef.current);
+      nodeElements.each(function(d: WorkItem) {
+        if (!cullActive || !(d as any)._culled) updateNodePresentationFor(this, d);
       });
     };
 
@@ -3500,7 +3507,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         return {
           id: d.id, route: d._route, eligible: liveK >= 0.6 && edgeDisplay(d) !== 'none',
           dims: { width: d._labelDims.width * d._labelScale, height: d._labelDims.height * d._labelScale },
-          t: d.labelT, offset: (d._routeLabel?.offset < 0 ? -1 : 1) * (22 * d._labelScale + 3),
+          t: d.labelT, offset: (d._routeLabel?.offset < 0 ? -1 : 1) * (26 * d._labelScale + 3),
         };
       }), { viewport: labelViewport, obstacles: nodeLabelObstacles.concat(uiLabelObstacles.filter(intersectsViewport), routeObstacles), segments: routeSegments });
       edgeLabelGroups.each(function(d: any) {
@@ -3622,11 +3629,12 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       const maxGX = (width + CULL_MARGIN_PX - t.x) / t.k;
       const minGY = (-CULL_MARGIN_PX - t.y) / t.k;
       const maxGY = (height + CULL_MARGIN_PX - t.y) / t.k;
-      nodeElements.style('display', (d: any) => {
+      nodeElements.style('display', function(d: any) {
         const x = d.x ?? 0;
         const y = d.y ?? 0;
         const visible = x >= minGX && x <= maxGX && y >= minGY && y <= maxGY;
         d._culled = !visible;
+        if (visible) updateNodePresentationFor(this, d);
         return visible ? null : 'none';
       });
       applyEdgeDisplays();
diff --git a/packages/web/src/components/SemanticGraphOverview.tsx b/packages/web/src/components/SemanticGraphOverview.tsx
index 15b6a628..0ac298a6 100644
--- a/packages/web/src/components/SemanticGraphOverview.tsx
+++ b/packages/web/src/components/SemanticGraphOverview.tsx
@@ -417,9 +417,9 @@ export function SemanticGraphOverview({
       <div
         data-lod-controls="true"
         data-graph-fit-obstacle="true"
-        className="absolute left-3 top-3 right-36 md:left-16 md:right-40 flex flex-wrap items-center gap-2 pointer-events-auto text-xs"
+        className="absolute left-3 top-3 right-36 md:left-16 md:right-40 flex flex-wrap items-center gap-3 pointer-events-auto text-base"
       >
-        <label className="flex items-center gap-2 rounded bg-gray-950/95 px-2 py-1.5 text-gray-200 border border-gray-600">
+        <label className="flex min-h-11 items-center gap-3 rounded-xl bg-slate-900/95 px-3 py-2 text-slate-200 border border-slate-600 shadow-lg">
           Detail
           <select
             aria-label="Graph detail"
@@ -431,7 +431,7 @@ export function SemanticGraphOverview({
               setMode(next);
               closeBrowser();
             }}
-            className="bg-gray-900 text-white"
+            className="rounded-lg bg-slate-800 px-2 py-1 text-base font-medium text-white"
           >
             <option value="auto">Auto</option>
             <option value="overview">Overview</option>
@@ -441,7 +441,7 @@ export function SemanticGraphOverview({
         <button
           ref={groupListButton}
           aria-label={`${projection.groups.length} groups · ${items.length} items`}
-          className="rounded bg-gray-950/95 border border-gray-600 px-3 py-1 w-28 h-11 shrink-0 text-gray-100"
+          className="rounded-xl bg-slate-900/95 border border-slate-600 px-4 py-1 w-32 h-14 shrink-0 text-slate-100 shadow-lg"
           onClick={() => {
             returnFocus.current = document.activeElement as HTMLElement;
             setRelationshipScope(null);
@@ -555,7 +555,7 @@ export function SemanticGraphOverview({
                     ? 'true'
                     : undefined
                 }
-                className="absolute pointer-events-auto rounded-lg border border-emerald-700 bg-gray-950 text-left px-3 py-2 shadow-lg hover:border-emerald-300 focus:outline focus:outline-2 focus:outline-emerald-300"
+                className="absolute pointer-events-auto overflow-hidden rounded-xl border border-slate-600 bg-gradient-to-br from-slate-800 to-slate-950 text-left px-4 py-3 shadow-lg shadow-black/30 hover:border-teal-300 focus:outline focus:outline-2 focus:outline-teal-300"
                 style={{
                   left: entry.x,
                   top: entry.y,
@@ -571,17 +571,17 @@ export function SemanticGraphOverview({
                 aria-label={`${[...summary.ancestors.map(id => hierarchy.groups.get(id)!.label), summary.isDirect ? 'Direct items' : summary.label].join(' / ')}, ${summary.members.length} items, ${summary.blocked} blocked`}
                 onClick={() => openGroup(summary.id)}
               >
-                <span className="block truncate text-sm font-semibold text-emerald-100">
+                <span className="block truncate border-l-2 border-teal-400 pl-2 text-lg leading-6 font-semibold tracking-tight text-slate-50">
                   {summary.members.some(item => item.id === selectedId)
                     ? '● '
                     : ''}
                   {summary.label}
                 </span>
-                <span className="block text-xs text-gray-200">
+                <span className="mt-1 block text-sm leading-5 text-slate-200">
                   {summary.members.length} items ·{' '}
                   {summary.internalEdges.length} internal links
                 </span>
-                <span className="block truncate text-xs text-gray-300">
+                <span className="block truncate text-sm leading-5 text-slate-400">
                   {summary.ancestors.length > 0
                     ? summary.ancestors
                         .map(id => hierarchy.groups.get(id)!.label)
@@ -619,7 +619,7 @@ export function SemanticGraphOverview({
         <button
           data-graph-fit-obstacle="true"
           data-lod-controls="true"
-          className="absolute bottom-3 left-3 pointer-events-auto rounded bg-gray-950 border border-gray-600 px-3 py-1 w-36 h-11 text-xs text-gray-100"
+          className="absolute bottom-3 left-3 pointer-events-auto rounded-xl bg-slate-900/95 border border-slate-600 px-4 py-2 min-w-36 min-h-14 text-sm leading-5 text-slate-100 shadow-lg"
           aria-label={`${edges.length} relationships, ${notDrawnConnections} not drawn: ${internalConnections} internal, ${pendingConnections} awaiting endpoints, ${collapsedConnections} external connections in list`}
           onClick={() => {
             returnFocus.current = document.activeElement as HTMLElement;
@@ -688,7 +688,7 @@ export function SemanticGraphOverview({
               >
                 All groups
               </button>
-              <p className="text-xs text-gray-300 mb-3">
+              <p className="text-sm text-gray-300 mb-3">
                 {group.members.length} items · {group.internalEdges.length}{' '}
                 internal relationships · {group.blocked} blocked ·{' '}
                 {group.completed} completed · grouped by {group.basis}
@@ -697,7 +697,7 @@ export function SemanticGraphOverview({
                 {(['outgoing', 'incoming'] as const).map(direction => (
                   <button
                     key={direction}
-                    className="min-h-11 rounded border border-emerald-700 px-3 text-xs text-emerald-200"
+                    className="min-h-11 rounded border border-emerald-700 px-3 text-sm text-emerald-200"
                     onClick={() => {
                       setExpanded(new Set(effectiveExpanded));
                       setMode('overview');
@@ -803,7 +803,7 @@ export function SemanticGraphOverview({
                         <span className="block text-sm break-words">
                           {item.title}
                         </span>
-                        <span className="text-xs text-gray-400">
+                        <span className="text-sm text-gray-400">
                           {item.type} · {item.status}
                         </span>
                       </button>
@@ -816,7 +816,7 @@ export function SemanticGraphOverview({
                             `node:${item.id}`
                           )
                         }
-                        className="min-h-11 text-xs text-emerald-200 px-3"
+                        className="min-h-11 text-sm text-emerald-200 px-3"
                       >
                         Relationships
                       </button>
@@ -826,7 +826,7 @@ export function SemanticGraphOverview({
               <h3 className="mt-4 mb-2 text-sm font-semibold">
                 Relationships between groups
               </h3>
-              <ul className="space-y-2 text-xs">
+              <ul className="space-y-2 text-sm">
                 {projection.bundles
                   .filter(
                     bundle =>
@@ -865,7 +865,7 @@ export function SemanticGraphOverview({
             </>
           ) : (
             <>
-              <p className="text-xs text-gray-300 mb-3">
+              <p className="text-sm text-gray-300 mb-3">
                 {items.length} loaded items · {edges.length} loaded
                 relationships
                 {projection.pendingEdges.length > 0
@@ -899,7 +899,7 @@ export function SemanticGraphOverview({
                           entry.isDirect ? 'Direct items' : entry.label,
                         ].join(' / ')}
                       </span>
-                      <span className="text-xs text-gray-300">
+                      <span className="text-sm text-gray-300">
                         {entry.members.length} items · {entry.blocked} blocked ·{' '}
                         {entry.basis}
                       </span>
@@ -908,7 +908,7 @@ export function SemanticGraphOverview({
                 ))}
               </ul>
               {projection.diagnostics.map(message => (
-                <p key={message} className="mt-3 text-xs text-amber-200">
+                <p key={message} className="mt-3 text-sm text-amber-200">
                   {message}
                 </p>
               ))}
diff --git a/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
index 4138bc36..87806e4a 100644
--- a/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
+++ b/packages/web/src/lib/__tests__/graphSymbolLayout.test.ts
@@ -42,11 +42,11 @@ describe('graph symbol content geometry', () => {
       },
       measure
     );
-    expect(short.height).toBeLessThan(100);
+    expect(short.height).toBeLessThan(110);
     expect(long.height).toBeGreaterThan(short.height);
-    expect(long.width).toBeLessThanOrEqual(300);
+    expect(long.width).toBeLessThanOrEqual(320);
     expect(long.titleY - ITEM_TITLE_SIZE / 2).toBeGreaterThan(
-      -long.height / 2 + 30
+      -long.height / 2 + 34
     );
     expect(long.descriptionY - 6).toBeGreaterThan(
       long.titleY +
@@ -67,7 +67,7 @@ describe('graph symbol content geometry', () => {
       measure
     );
     expect(sheet.height - plain.height).toBe(24);
-    expect(sheet.height / 2 - sheet.footerY).toBe(40);
+    expect(sheet.height / 2 - sheet.footerY).toBe(42);
   });
 
   it('reserves compact title width and height at readable zoom sizes', () => {
@@ -83,7 +83,7 @@ describe('graph symbol content geometry', () => {
       expect(layout.compact).toBe(true);
       expect(
         ITEM_TITLE_SIZE * layout.titleScale * scale
-      ).toBeGreaterThanOrEqual(12);
+      ).toBeGreaterThanOrEqual(14);
       expect(layout.titleCenterY).toBe(0);
       for (const line of layout.title)
         expect(
@@ -96,7 +96,7 @@ describe('graph symbol content geometry', () => {
   });
 
   it('rounds label ink upward and preserves horizontal and vertical padding', () => {
-    expect(edgeLabelDimensions(94.9, 18.2)).toEqual({ width: 135, height: 29 });
-    expect(edgeLabelDimensions(0, 0)).toEqual({ width: 40, height: 26 });
+    expect(edgeLabelDimensions(94.9, 18.2)).toEqual({ width: 135, height: 30 });
+    expect(edgeLabelDimensions(0, 0)).toEqual({ width: 40, height: 30 });
   });
 });
diff --git a/packages/web/src/lib/graphSymbolLayout.ts b/packages/web/src/lib/graphSymbolLayout.ts
index 418d63a2..d4a743eb 100644
--- a/packages/web/src/lib/graphSymbolLayout.ts
+++ b/packages/web/src/lib/graphSymbolLayout.ts
@@ -1,9 +1,9 @@
 export const GRAPH_FONT_FAMILY = 'system-ui, sans-serif';
-export const ITEM_TITLE_SIZE = 16;
-export const ITEM_TITLE_LINE = 21;
-export const ITEM_HEADER_HEIGHT = 30;
-export const EDGE_LABEL_SIZE = 12;
-export const EDGE_LABEL_HEIGHT = 26;
+export const ITEM_TITLE_SIZE = 18;
+export const ITEM_TITLE_LINE = 24;
+export const ITEM_HEADER_HEIGHT = 34;
+export const EDGE_LABEL_SIZE = 14;
+export const EDGE_LABEL_HEIGHT = 30;
 
 export type TextMeasure = (
   text: string,
@@ -68,14 +68,14 @@ export function graphItemLayout(
 ) {
   const compact = scale < 1;
   const titleScale = compact
-    ? Math.max(1, 12 / (ITEM_TITLE_SIZE * Math.max(0.3, scale)))
+    ? Math.max(1, 14 / (ITEM_TITLE_SIZE * Math.max(0.3, scale)))
     : 1;
   const width = Math.min(
-    compact ? 220 : 300,
+    compact ? 240 : 320,
     Math.max(
-      190,
+      210,
       measure(item.title, ITEM_TITLE_SIZE, 600) + 28,
-      measure(item.type, 12, 700) + 108
+      measure(item.type, 14, 700) + 116
     )
   );
   const title = fitGraphText(
@@ -85,16 +85,16 @@ export function graphItemLayout(
     measure
   );
   const description = item.description
-    ? fitGraphText(item.description, width - 28, 12, measure, 1).lines[0]
+    ? fitGraphText(item.description, width - 28, 14, measure, 1).lines[0]
     : '';
   const height = compact
     ? title.lines.length * ITEM_TITLE_LINE * titleScale + 24
     : ITEM_HEADER_HEIGHT +
       8 +
       title.lines.length * ITEM_TITLE_LINE +
-      (description ? 20 : 0) +
+      (description ? 22 : 0) +
       8 +
-      24 +
+      28 +
       (item.subgraphId ? 24 : 0);
   const titleY = compact
     ? (-(title.lines.length - 1) * ITEM_TITLE_LINE) / 2
@@ -112,8 +112,8 @@ export function graphItemLayout(
     titleY,
     titleCenterY: titleY + ((title.lines.length - 1) * ITEM_TITLE_LINE) / 2,
     description,
-    descriptionY: titleY + (title.lines.length - 1) * ITEM_TITLE_LINE + 21,
-    footerY: height / 2 - 16 - (item.subgraphId ? 24 : 0),
+    descriptionY: titleY + (title.lines.length - 1) * ITEM_TITLE_LINE + 24,
+    footerY: height / 2 - 18 - (item.subgraphId ? 24 : 0),
   };
 }
 
diff --git a/packages/web/src/lib/semanticLOD.ts b/packages/web/src/lib/semanticLOD.ts
index 50a3ed8b..1a0efe97 100644
--- a/packages/web/src/lib/semanticLOD.ts
+++ b/packages/web/src/lib/semanticLOD.ts
@@ -379,8 +379,8 @@ function overviewSlots(
   height: number,
   obstacles: readonly OverviewObstacle[]
 ) {
-  const cardWidth = Math.min(184, Math.max(120, width - 32)),
-    cardHeight = 72;
+  const cardWidth = Math.min(240, Math.max(160, width - 32)),
+    cardHeight = 96;
   const columns = Math.max(1, Math.floor((width - 32) / (cardWidth + 16)));
   const rows = Math.max(0, Math.floor((height - 100) / (cardHeight + 24)));
   const slots: { x: number; y: number }[] = [];
diff --git a/tests/e2e/graph/large-graph-symbols.spec.ts b/tests/e2e/graph/large-graph-symbols.spec.ts
index 65edb1c0..5030523d 100644
--- a/tests/e2e/graph/large-graph-symbols.spec.ts
+++ b/tests/e2e/graph/large-graph-symbols.spec.ts
@@ -127,35 +127,53 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
   const timings: {
     scale: number;
     ms: number;
+    wallMs: number;
     paintedCards?: number;
     labels?: number;
   }[] = [];
   for (const scale of [1.2, 0.1, 1.2]) {
     const start = Date.now();
-    await page.evaluate(
-      ({ x, y, scale }) => (window as any).miniMapZoom(x, y, scale),
+    const elapsed = await page.evaluate(
+      async ({ x, y, scale }) => {
+        const start = performance.now();
+        const host = document.querySelector('.graph-container')!;
+        const svg = host.querySelector(':scope > svg') as SVGSVGElement & {
+          __zoom: { k: number };
+        };
+        const group = host.querySelector('.main-graph-group')!;
+        const overview = host.querySelector('.semantic-overview')!;
+        (window as any).miniMapZoom(x, y, scale);
+        return await new Promise<number>((resolve, reject) => {
+          let settledFrames = 0;
+          const check = () => {
+            if (performance.now() - start > 15000) {
+              reject(
+                new Error(
+                  'Zoom did not paint its requested detail within15seconds'
+                )
+              );
+              return;
+            }
+            if (
+              Math.abs(svg.__zoom.k - scale) < 0.00001 &&
+              group.getAttribute('data-presentation-scale') === String(scale) &&
+              overview.getAttribute('data-active') === String(scale < 1)
+            )
+              settledFrames++;
+            else settledFrames = 0;
+            if (settledFrames >= 2) resolve(performance.now() - start);
+            else requestAnimationFrame(check);
+          };
+          requestAnimationFrame(check);
+        });
+      },
       { x: target.positionX, y: target.positionY, scale }
     );
-    await expect
-      .poll(() =>
-        page
-          .locator('.graph-container > svg')
-          .evaluate(element => (element as any).__zoom.k)
-      )
-      .toBeCloseTo(scale);
-    await expect(overview).toHaveAttribute(
-      'data-active',
-      scale < 1 ? 'true' : 'false'
-    );
-    await expect(page.locator('.main-graph-group')).toHaveAttribute(
-      'data-presentation-scale',
-      String(scale)
-    );
-    const elapsed = Date.now() - start;
+    const wallMs = Date.now() - start;
     const timingPath = info.outputPath(`zoom-${timings.length}-timing.json`);
     await writeFile(
       timingPath,
-      JSON.stringify({ nodes: SIZE, edges: 5000, loadedMs, scale, elapsed })
+      JSON.stringify({ nodes: SIZE, edges: 5000, loadedMs, scale, elapsed, wallMs })
     );
     await info.attach(`zoom-${timings.length}-timing.json`, {
       path: timingPath,
@@ -191,6 +209,7 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
       timings.push({
         scale,
         ms: elapsed,
+        wallMs,
         paintedCards: geometry.cards.length,
         labels: geometry.labels.length,
       });
@@ -202,9 +221,67 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
         '2000-items-zoomed-out',
         8
       );
-      timings.push({ scale, ms: elapsed });
+      timings.push({ scale, ms: elapsed, wallMs });
     }
   }
+  const revealId = largeGraph.nodeIds[1011];
+  const reveal = page
+    .locator('.node')
+    .filter({
+      has: page.locator(`.node-edit-icon[data-node-id="${revealId}"]`),
+    });
+  await expect(reveal).toBeHidden();
+  const panStart = await page.evaluate(() =>
+    [
+      [1200, 300],
+      [1200, 250],
+      [1200, 600],
+    ]
+      .map(([x, y]) => ({ x, y }))
+      .find(point =>
+        document
+          .elementFromPoint(point.x, point.y)
+          ?.classList.contains('background')
+      )
+  );
+  expect(panStart).toBeTruthy();
+  await page.mouse.move(panStart!.x, panStart!.y);
+  await page.mouse.down();
+  try {
+    await page.mouse.move(panStart!.x - 1512, panStart!.y, { steps: 4 });
+    await expect(reveal).toBeVisible();
+    await expect(reveal).toHaveAttribute('data-detail', 'full');
+    const held = await reveal.evaluate(node => {
+      const card = node.querySelector('.node-bg')!.getBoundingClientRect();
+      const title = node
+        .querySelector('.node-title-group')!
+        .getBoundingClientRect();
+      return {
+        card: card.toJSON(),
+        title: title.toJSON(),
+        fit:
+          title.left >= card.left &&
+          title.right <= card.right &&
+          title.top >= card.top &&
+          title.bottom <= card.bottom,
+      };
+    });
+    expect(held.fit).toBe(true);
+    const heldPath = info.outputPath('2000-held-pan-reveal.json');
+    await writeFile(heldPath, JSON.stringify(held));
+    await info.attach('2000-held-pan-reveal.json', {
+      path: heldPath,
+      contentType: 'application/json',
+    });
+    const heldImage = info.outputPath('2000-held-pan-reveal.png');
+    await page.screenshot({ path: heldImage });
+    await info.attach('2000-held-pan-reveal.png', {
+      path: heldImage,
+      contentType: 'image/png',
+    });
+  } finally {
+    await page.mouse.up();
+  }
   await page
     .getByRole('button', {
       name: /5000 relationships, .*Browse all relationships/,
diff --git a/tests/lib/itemSymbolVisual.ts b/tests/lib/itemSymbolVisual.ts
index 1b3e0544..68af734b 100644
--- a/tests/lib/itemSymbolVisual.ts
+++ b/tests/lib/itemSymbolVisual.ts
@@ -140,7 +140,7 @@ export async function readItemSymbols(page: Page) {
       for (const title of card.titles) {
         if (!contains(card.box, title.box))
           violations.push(`title-clipped:${card.id}`);
-        if (title.font < 11.9) violations.push(`title-small:${card.id}`);
+        if (title.font < 13.9) violations.push(`title-small:${card.id}`);
       }
       for (const [index, part] of card.parts.entries()) {
         if (!contains(card.box, part.box))
@@ -157,7 +157,7 @@ export async function readItemSymbols(page: Page) {
         violations.push(`label-clipped:${label.id}`);
       if (!contains(viewport, label.box))
         violations.push(`label-offscreen:${label.id}`);
-      if (label.font < 11.9 || label.opacity < 0.99)
+      if (label.font < 13.9 || label.opacity < 0.99)
         violations.push(`label-unreadable:${label.id}`);
       if (
         [
diff --git a/tests/lib/schematicOverview.ts b/tests/lib/schematicOverview.ts
index 7ef236d1..62b53cf9 100644
--- a/tests/lib/schematicOverview.ts
+++ b/tests/lib/schematicOverview.ts
@@ -39,6 +39,11 @@ export async function inspectSchematicOverview(
           width: bounds.width,
           height: bounds.height,
           visible: visible(element),
+          titleSize: element.hasAttribute('data-lod-group')
+            ? parseFloat(
+                getComputedStyle(element.querySelector('span')!).fontSize
+              )
+            : null,
         };
       };
       const cards = Array.from(host.querySelectorAll('[data-lod-group]')).map(
@@ -99,7 +104,9 @@ export async function inspectSchematicOverview(
         },
       };
     });
-  await expect.poll(async () => (await read()).cards.length).toBe(expectedCards);
+  await expect
+    .poll(async () => (await read()).cards.length)
+    .toBe(expectedCards);
   await expect
     .poll(async () => (await read()).routes.length)
     .toBeGreaterThan(0);
@@ -111,6 +118,7 @@ export async function inspectSchematicOverview(
       'Schematic card must have visible width'
     ).toBeGreaterThan(0);
     expect(card.height).toBeGreaterThan(0);
+    expect(card.titleSize).toBeGreaterThanOrEqual(18);
     expect(card.x).toBeGreaterThanOrEqual(geometry.bounds.left);
     expect(card.x + card.width).toBeLessThanOrEqual(geometry.bounds.right);
     expect(card.y).toBeGreaterThanOrEqual(geometry.bounds.top);

From 5b16ce93020068ae251b1dc856cde5f6fc0537b0 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 08:26:54 -0700
Subject: [PATCH 11/19] Place labels in visible route spans and verify painted
 zoom readiness

---
 ...readable-symbols-need-reserved-geometry.md |   6 +-
 .../components/SemanticGraphOverview.test.tsx |  21 +++
 .../src/components/SemanticGraphOverview.tsx  |  55 +++----
 .../lib/__tests__/edgeLabelPlacement.test.ts  |  19 +++
 packages/web/src/lib/edgeRouteGeometry.ts     |  41 +++++-
 tests/e2e/graph/item-symbols.spec.ts          |  38 +++++
 tests/e2e/graph/large-graph-symbols.spec.ts   |  59 +++-----
 tests/lib/graphZoomReady.ts                   | 137 ++++++++++++++++++
 8 files changed, 304 insertions(+), 72 deletions(-)
 create mode 100644 tests/lib/graphZoomReady.ts

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 4192e728..0f7ac1a2 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -34,8 +34,12 @@ Independent review and executed scale evidence, 2026-10-28:
 
 The owner's follow-up rejects tiny type and plain boxes as the visual direction. The revised contract raises full item/overview titles to18px, compact title and edge-label floors to14px, and graph controls to readable14–16px type. Overview cards reserve240x96px; controls reserve their actual two-line height. Subtle layered fills and a restrained teal heading accent distinguish groups. CSS letter spacing on item type text is neutralized so canvas measurement matches displayed header width.
 
-The6d81752 CI40709921026 large case still failed first zoom at6807ms under the original runner-wall-clock measurement. Its trace shows the timed region included Playwright selector/attribute calls with substantial snapshot/protocol costs (`call867`180338–180836ms, `call869`181294–185485ms, then separate state assertions). The corrected test records both wall time and an in-browser request-to-two-settled-animation-frame duration, with the same5000ms browser budget. This changes the measured boundary and must not be represented as the old wall-time check passing or as a proven performance gain. Both prior failures remain evidence.
+The6d81752 CI40709921026 large case still failed first zoom at6807ms under the original runner-wall-clock measurement. Its trace shows the timed region included Playwright selector/attribute calls with substantial durations that mix application waiting and protocol/snapshot work; the trace does not isolate those costs (`call867`180338–180836ms, `call869`181294–185485ms, then separate state assertions). The corrected test records both wall time and an in-browser request-to-two-settled-animation-frame duration, with the same5000ms browser budget. This changes the measured boundary and must not be represented as the old wall-time check passing or as a proven performance gain. Both prior failures remain evidence.
 
 Independent review5684764521 also reproduced stale compact cards exposed during a held pan. Visibility reconciliation now applies current item geometry before exposing each newly visible card, bounded to changed nodes; the large gate includes a held-pan/reveal assertion. Browse focus restoration now preserves an unrelated control focused before the scheduled return.54 relevant geometry/hierarchy/relationship unit cases passed after the typography/layout change; strict final browser and CI acceptance remain required.
 
 Revised18px/14px typography passed both focused headed desktop/phone cases in23.5s, one worker and zero retries, with strict cleanup and the same deliberate clipping/overlap controls. Scoped web TypeScript passed. This does not replace the pending final large-graph, hierarchy, phone and workflow CI artifacts.
+
+Independent review5685069307 found the in-browser timer could finish while the parent CSS still hid item layers: child `data-active=false` precedes the passive parent update. The timer now requires the parent gate, actually visible bounded cards and readable titles/labels (or visible overview summaries) for two frames. A deliberate1200ms visibility mask must be included in the measured interval. Hidden overview layout/routing is skipped; projection/accounting remains available and a focused test requires fresh summaries after a hidden live update and return. These changes require subsequent executed validation; neither state attributes nor revised timing alone prove scale acceptance.
+
+Exact5d CI40713075178 passed the small item consumer/symbol cases but failed the2000-item case on zero visible labels. Its retained timing was3709ms browser/5011ms wall and its overview accounting/clutter passed; this is not full scale acceptance, and the timer at that revision had the review gap above. The route search sampled whole-segment midpoint/end positions, missing the visible middle slice of a long connection. Label candidate ranges now intersect the viewport reduced by the full rotated label footprint, then use the same bounded samples/collision checks; a10000-unit route regression covers this case.24 scoped route/overview cases and web TypeScript passed. Both updated headed desktop/phone cases passed in23.3s, including the deliberate1200ms visibility delay, after correcting the shared timing helper to allow small graphs without an overview layer. The initial negative-control run failed on that missing optional layer; its trace is retained. All local probes still reuse owned dependencies.
diff --git a/packages/web/src/components/SemanticGraphOverview.test.tsx b/packages/web/src/components/SemanticGraphOverview.test.tsx
index ab0cf4dd..e19d6a27 100644
--- a/packages/web/src/components/SemanticGraphOverview.test.tsx
+++ b/packages/web/src/components/SemanticGraphOverview.test.tsx
@@ -8,6 +8,7 @@ import {
 } from '@testing-library/react';
 import { afterEach, beforeEach, expect, it, vi } from 'vitest';
 import { SemanticGraphOverview } from './SemanticGraphOverview';
+import * as routing from '../lib/schematicRouting';
 import type { SemanticItem } from '../lib/semanticLOD';
 
 const items: SemanticItem[] = Array.from({ length: 4 }, (_, index) => ({
@@ -130,3 +131,23 @@ it('restores readable Auto summaries when returning within the overview visibili
   fireEvent.click(screen.getByRole('button', { name: 'Back to overview' }));
   expect(ids()).toEqual(before);
 });
+
+it('does no hidden overview routing and resumes the current summaries on return', () => {
+  const route = vi.spyOn(routing, 'routeSchematicConnections');
+  render(<Fixture />);
+  expect(route).toHaveBeenCalled();
+  act(() => changeScale(1.2));
+  expect(summaries()).toHaveLength(0);
+  route.mockClear();
+  act(() => replaceItems(items.slice(0, 2)));
+  act(() => changeScale(1.8));
+  expect(route).not.toHaveBeenCalled();
+  expect(
+    screen.getByRole('button', { name: '2 groups · 2 items' })
+  ).toBeVisible();
+  act(() => changeScale(0.2));
+  expect(route).toHaveBeenCalled();
+  expect(summaries()).toHaveLength(1);
+  expect(summaries()[0]).toHaveAccessibleName(/System, 2 items/);
+  route.mockRestore();
+});
diff --git a/packages/web/src/components/SemanticGraphOverview.tsx b/packages/web/src/components/SemanticGraphOverview.tsx
index 0ac298a6..80216a6f 100644
--- a/packages/web/src/components/SemanticGraphOverview.tsx
+++ b/packages/web/src/components/SemanticGraphOverview.tsx
@@ -203,6 +203,7 @@ export function SemanticGraphOverview({
     }
   }, [groupId, group]);
   const layout = useMemo(() => {
+    if (!active) return { placed: [], hidden: [] };
     if (traceProjection) {
       return placeOverviewLabels(
         traceProjection.groups.map((entry, index) => ({
@@ -272,29 +273,33 @@ export function SemanticGraphOverview({
   const groupsById = new Map(projection.groups.map(entry => [entry.id, entry]));
   const wiring = useMemo(
     () =>
-      routeSchematicConnections(
-        layout.placed,
-        (traceProjection?.bundles ?? projection.bundles).map(bundle => ({
-          id: bundle.id,
-          source: bundle.source,
-          target: bundle.target,
-          type: bundle.type,
-          edgeIds: bundle.edges.map(edge => edge.id),
-        })),
-        size.width,
-        size.height,
-        obstacles.map((rect, index) => ({
-          id: `control-${index}`,
-          x: rect.left,
-          y: rect.top,
-          width: rect.right - rect.left,
-          height: rect.bottom - rect.top,
-        })),
-        {
-          sharedEndpoint: trace?.direction === 'incoming' ? 'target' : 'source',
-        }
-      ),
+      active
+        ? routeSchematicConnections(
+            layout.placed,
+            (traceProjection?.bundles ?? projection.bundles).map(bundle => ({
+              id: bundle.id,
+              source: bundle.source,
+              target: bundle.target,
+              type: bundle.type,
+              edgeIds: bundle.edges.map(edge => edge.id),
+            })),
+            size.width,
+            size.height,
+            obstacles.map((rect, index) => ({
+              id: `control-${index}`,
+              x: rect.left,
+              y: rect.top,
+              width: rect.right - rect.left,
+              height: rect.bottom - rect.top,
+            })),
+            {
+              sharedEndpoint:
+                trace?.direction === 'incoming' ? 'target' : 'source',
+            }
+          )
+        : null,
     [
+      active,
       layout,
       projection,
       traceProjection,
@@ -304,7 +309,7 @@ export function SemanticGraphOverview({
       obstacleKey,
     ]
   );
-  const drawnConnections = wiring.routes.reduce(
+  const drawnConnections = (wiring?.routes ?? []).reduce(
     (count, bus) => count + bus.edgeIds.length,
     0
   );
@@ -498,7 +503,7 @@ export function SemanticGraphOverview({
                 <path d="M 0 0 L 10 5 L 0 10 z" fill="#94a3b8" />
               </marker>
             </defs>
-            {wiring.routes.map(bus => (
+            {wiring?.routes.map(bus => (
               <path
                 key={bus.id}
                 data-lod-bundle={bus.connections
@@ -524,7 +529,7 @@ export function SemanticGraphOverview({
                 <title>{`${groupsById.get(bus.source)!.label} → ${groupsById.get(bus.target)!.label}: ${bus.edgeIds.length} relationships · ${bus.connections.map(connection => `${connection.edgeIds.length} ${connection.type}`).join(', ')}`}</title>
               </path>
             ))}
-            {wiring.junctions.map(point => (
+            {wiring?.junctions.map(point => (
               <circle
                 key={`${point.bus}:${point.x}:${point.y}`}
                 cx={point.x}
diff --git a/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts b/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
index fab08db3..690865df 100644
--- a/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
+++ b/packages/web/src/lib/__tests__/edgeLabelPlacement.test.ts
@@ -76,3 +76,22 @@ it('hidden and offscreen routes cannot consume the visible-label budget', () =>
   expect([...result.placements.keys()]).toEqual(['visible']);
   expect(result.attempts).toBe(1);
 });
+
+it('places labels along the visible slice of a long route without changing its identity', () => {
+  const long = createEdgeRoute([
+    { x: 0, y: 0 },
+    { x: 10000, y: 0 },
+  ])!;
+  const result = placeItemLabels([{ ...candidate('long'), route: long }], {
+    viewport: { x: 9000, y: 0, width: 800, height: 400 },
+    obstacles: [{ x: 8600, y: 0, width: 300, height: 200 }],
+    segments: long.segments,
+  });
+  const label = result.placements.get('long');
+  expect(label).toBeDefined();
+  expect(label!.x).toBeGreaterThan(8800);
+  expect(label!.x + 52).toBeLessThanOrEqual(9392);
+  expect(label!.t).toBeCloseTo(label!.x / long.length);
+  expect(result.attempts).toBe(1);
+  expect(result.checks).toBeLessThan(ITEM_LABEL_BUDGET.checks);
+});
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 55716018..2b0f9107 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -257,11 +257,44 @@ export function edgeRouteLabel(
       Math.abs(Math.cos(radians)) * dims.height;
     for (const candidateOffset of options.offsets ?? [offset]) {
       if (!Number.isFinite(candidateOffset)) continue;
+      let visibleLow = low,
+        visibleHigh = high;
+      if (options.viewport) {
+        const center = {
+          x: segment.source.x + Math.sin(radians) * candidateOffset,
+          y: segment.source.y - Math.cos(radians) * candidateOffset,
+        };
+        for (const [axis, span, footprint] of [
+          ['x', 'width', width],
+          ['y', 'height', height],
+        ] as const) {
+          const half = (options.viewport[span] - footprint) / 2 - padding;
+          const delta =
+            (segment.target[axis] - segment.source[axis]) / segment.length;
+          if (
+            half < 0 ||
+            (!delta && Math.abs(center[axis] - options.viewport[axis]) > half)
+          ) {
+            visibleLow = Infinity;
+            break;
+          }
+          if (!delta) continue;
+          const a =
+            segment.start +
+            (options.viewport[axis] - half - center[axis]) / delta;
+          const b =
+            segment.start +
+            (options.viewport[axis] + half - center[axis]) / delta;
+          visibleLow = Math.max(visibleLow, Math.min(a, b));
+          visibleHigh = Math.min(visibleHigh, Math.max(a, b));
+        }
+      }
+      if (visibleLow > visibleHigh) continue;
       for (const distance of new Set([
-        clamp(desired, low, high),
-        (low + high) / 2,
-        low,
-        high,
+        clamp(desired, visibleLow, visibleHigh),
+        (visibleLow + visibleHigh) / 2,
+        visibleLow,
+        visibleHigh,
       ])) {
         const local = (distance - segment.start) / segment.length;
         const x =
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
index d8c0e30c..2e2ccb38 100644
--- a/tests/e2e/graph/item-symbols.spec.ts
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -1,5 +1,7 @@
+import { writeFile } from 'node:fs/promises';
 import { test as base, expect } from '@playwright/test';
 import { login, TEST_USERS } from '../../lib/auth';
+import { measureGraphZoom } from '../../lib/graphZoomReady';
 import { gql } from '../../lib/graphRequest';
 import {
   ownedGraphIdsFixture,
@@ -191,6 +193,42 @@ for (const width of [1440, 390])
             original
           );
         await inspectItemSymbols(page, info, 'restored-after-negatives');
+        await page.evaluate(() => {
+          const zoom = (window as any).miniMapZoom;
+          (window as any).miniMapZoom = (...args: unknown[]) => {
+            (window as any).miniMapZoom = zoom;
+            const mask = document.createElement('style');
+            mask.id = 'timing-visibility-negative';
+            mask.textContent =
+              '.nodes-group { visibility: hidden !important; }';
+            document.head.append(mask);
+            (window as any).__visibilityNegativeStarted = performance.now();
+            setTimeout(() => mask.remove(), 1200);
+            zoom(...args);
+          };
+        });
+        const visibleMs = await page.evaluate(measureGraphZoom, {
+          x: -300,
+          y: target.positionY,
+          scale: 1.2,
+        });
+        const totalMs = await page.evaluate(
+          () => performance.now() - (window as any).__visibilityNegativeStarted
+        );
+        expect(totalMs).toBeGreaterThanOrEqual(1200);
+        expect(visibleMs).toBeGreaterThanOrEqual(1200);
+        await expect(page.locator('#timing-visibility-negative')).toHaveCount(
+          0
+        );
+        const timingPath = info.outputPath('delayed-visible-content.json');
+        await writeFile(
+          timingPath,
+          JSON.stringify({ hiddenForMs: 1200, visibleMs, totalMs })
+        );
+        await info.attach('delayed-visible-content.json', {
+          path: timingPath,
+          contentType: 'application/json',
+        });
       }
       expect(await snapshot()).toEqual(before);
       expect(writes).toEqual([]);
diff --git a/tests/e2e/graph/large-graph-symbols.spec.ts b/tests/e2e/graph/large-graph-symbols.spec.ts
index 5030523d..81733f94 100644
--- a/tests/e2e/graph/large-graph-symbols.spec.ts
+++ b/tests/e2e/graph/large-graph-symbols.spec.ts
@@ -7,6 +7,7 @@ import {
   type OwnedGraphs,
 } from '../../lib/ownedGraphIdsFixture';
 import type { SeededGraph } from '../../lib/seedGraph';
+import { measureGraphZoom } from '../../lib/graphZoomReady';
 import { inspectItemSymbols } from '../../lib/itemSymbolVisual';
 import { inspectSchematicOverview } from '../../lib/schematicOverview';
 
@@ -133,47 +134,23 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
   }[] = [];
   for (const scale of [1.2, 0.1, 1.2]) {
     const start = Date.now();
-    const elapsed = await page.evaluate(
-      async ({ x, y, scale }) => {
-        const start = performance.now();
-        const host = document.querySelector('.graph-container')!;
-        const svg = host.querySelector(':scope > svg') as SVGSVGElement & {
-          __zoom: { k: number };
-        };
-        const group = host.querySelector('.main-graph-group')!;
-        const overview = host.querySelector('.semantic-overview')!;
-        (window as any).miniMapZoom(x, y, scale);
-        return await new Promise<number>((resolve, reject) => {
-          let settledFrames = 0;
-          const check = () => {
-            if (performance.now() - start > 15000) {
-              reject(
-                new Error(
-                  'Zoom did not paint its requested detail within15seconds'
-                )
-              );
-              return;
-            }
-            if (
-              Math.abs(svg.__zoom.k - scale) < 0.00001 &&
-              group.getAttribute('data-presentation-scale') === String(scale) &&
-              overview.getAttribute('data-active') === String(scale < 1)
-            )
-              settledFrames++;
-            else settledFrames = 0;
-            if (settledFrames >= 2) resolve(performance.now() - start);
-            else requestAnimationFrame(check);
-          };
-          requestAnimationFrame(check);
-        });
-      },
-      { x: target.positionX, y: target.positionY, scale }
-    );
+    const elapsed = await page.evaluate(measureGraphZoom, {
+      x: target.positionX,
+      y: target.positionY,
+      scale,
+    });
     const wallMs = Date.now() - start;
     const timingPath = info.outputPath(`zoom-${timings.length}-timing.json`);
     await writeFile(
       timingPath,
-      JSON.stringify({ nodes: SIZE, edges: 5000, loadedMs, scale, elapsed, wallMs })
+      JSON.stringify({
+        nodes: SIZE,
+        edges: 5000,
+        loadedMs,
+        scale,
+        elapsed,
+        wallMs,
+      })
     );
     await info.attach(`zoom-${timings.length}-timing.json`, {
       path: timingPath,
@@ -225,11 +202,9 @@ test('2000 loaded items and 5000 relationships survive overview and detail zoom
     }
   }
   const revealId = largeGraph.nodeIds[1011];
-  const reveal = page
-    .locator('.node')
-    .filter({
-      has: page.locator(`.node-edit-icon[data-node-id="${revealId}"]`),
-    });
+  const reveal = page.locator('.node').filter({
+    has: page.locator(`.node-edit-icon[data-node-id="${revealId}"]`),
+  });
   await expect(reveal).toBeHidden();
   const panStart = await page.evaluate(() =>
     [
diff --git a/tests/lib/graphZoomReady.ts b/tests/lib/graphZoomReady.ts
new file mode 100644
index 00000000..c34b3eb2
--- /dev/null
+++ b/tests/lib/graphZoomReady.ts
@@ -0,0 +1,137 @@
+export async function measureGraphZoom({
+  x,
+  y,
+  scale,
+}: {
+  x: number;
+  y: number;
+  scale: number;
+}) {
+  const start = performance.now();
+  const host = document.querySelector('.graph-container')!;
+  const svg = host.querySelector(':scope > svg') as SVGSVGElement & {
+    __zoom: { k: number };
+  };
+  const group = host.querySelector('.main-graph-group')!;
+  const overview = host.querySelector('.semantic-overview')!;
+  const viewport = host.getBoundingClientRect();
+  const contains = (a: DOMRect, b: DOMRect) =>
+    b.width > 0 &&
+    b.height > 0 &&
+    b.left >= a.left - 0.5 &&
+    b.right <= a.right + 0.5 &&
+    b.top >= a.top - 0.5 &&
+    b.bottom <= a.bottom + 0.5;
+  const visible = (element: Element) => {
+    for (
+      let current: Element | null = element;
+      current;
+      current = current.parentElement
+    ) {
+      const style = getComputedStyle(current);
+      if (
+        style.display === 'none' ||
+        style.visibility !== 'visible' ||
+        Number(style.opacity) < 0.99
+      )
+        return false;
+    }
+    const box = element.getBoundingClientRect();
+    return (
+      box.width > 0 &&
+      box.height > 0 &&
+      box.right > viewport.left &&
+      box.left < viewport.right &&
+      box.bottom > viewport.top &&
+      box.top < viewport.bottom
+    );
+  };
+  const readable = (element: SVGGraphicsElement) => {
+    const matrix = element.getScreenCTM();
+    return (
+      visible(element) &&
+      matrix &&
+      parseFloat(getComputedStyle(element).fontSize) *
+        Math.hypot(matrix.a, matrix.b) >=
+        13.9
+    );
+  };
+  const ready = () => {
+    if (
+      Math.abs(svg.__zoom.k - scale) >= 0.00001 ||
+      group.getAttribute('data-presentation-scale') !== String(scale) ||
+      (overview?.getAttribute('data-active') === 'true') !== scale < 1 ||
+      (host.getAttribute('data-overview') === 'true') !== scale < 1
+    )
+      return false;
+    if (scale < 1) {
+      const summaries = Array.from(
+        overview.querySelectorAll('[data-lod-group]')
+      );
+      return (
+        summaries.length > 0 &&
+        summaries.every(
+          card =>
+            visible(card) && contains(viewport, card.getBoundingClientRect())
+        )
+      );
+    }
+    const nodes = Array.from(
+      host.querySelectorAll<SVGGraphicsElement>('.node')
+    ).filter(node => node.style.display !== 'none' && visible(node));
+    if (!nodes.length || nodes.length >= 100) return false;
+    const cardsReady = nodes.some(node => {
+      const box = node.querySelector('.node-bg')!.getBoundingClientRect();
+      const titles = Array.from(
+        node.querySelectorAll<SVGGraphicsElement>('.node-title-text')
+      );
+      return (
+        node.getAttribute('data-detail') === 'full' &&
+        contains(viewport, box) &&
+        titles.length > 0 &&
+        titles.every(
+          title =>
+            readable(title) && contains(box, title.getBoundingClientRect())
+        )
+      );
+    });
+    const labels = Array.from(
+      host.querySelectorAll<SVGGraphicsElement>('.edge-label-group')
+    ).filter(label => label.style.display !== 'none' && visible(label));
+    return (
+      cardsReady &&
+      labels.length > 0 &&
+      labels.length <= 32 &&
+      labels.every(label => {
+        const box = label.querySelector('rect')!.getBoundingClientRect();
+        const text = label.querySelector<SVGGraphicsElement>('.edge-label')!;
+        return (
+          contains(viewport, box) &&
+          readable(text) &&
+          contains(box, text.getBoundingClientRect())
+        );
+      })
+    );
+  };
+  (window as any).miniMapZoom(x, y, scale);
+  return await new Promise<number>((resolve, reject) => {
+    let settledFrames = 0;
+    const check = () => {
+      if (performance.now() - start > 15000) {
+        reject(
+          new Error('Zoom did not paint readable content within 15 seconds')
+        );
+        return;
+      }
+      try {
+        settledFrames = ready() ? settledFrames + 1 : 0;
+      } catch (error) {
+        reject(error);
+        return;
+      }
+      if (settledFrames >= 2) resolve(performance.now() - start);
+      else requestAnimationFrame(check);
+    };
+    requestAnimationFrame(check);
+  });
+}

From 9c564ac30d200f397fe5ae743b698771724f7ab7 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 08:47:10 -0700
Subject: [PATCH 12/19] Keep diagonal labels clear and trace controls readable

---
 ...readable-symbols-need-reserved-geometry.md | 28 ++++++++
 .../SemanticRelationshipBrowser.tsx           | 12 ++--
 .../src/components/SemanticTraceControls.tsx  |  4 +-
 .../lib/__tests__/edgeRouteGeometry.test.ts   | 35 ++++++++++
 packages/web/src/lib/edgeRouteGeometry.ts     | 31 ++++++++-
 tests/e2e/graph/item-symbols.spec.ts          | 57 +++++++++++++---
 tests/e2e/graph/nested-semantic-lod.spec.ts   | 12 ++++
 tests/lib/itemSymbolVisual.ts                 | 68 +++++++++++--------
 tests/lib/schematicOverview.ts                | 37 ++++++++++
 9 files changed, 240 insertions(+), 44 deletions(-)

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 0f7ac1a2..2db8476b 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -43,3 +43,31 @@ Revised18px/14px typography passed both focused headed desktop/phone cases in23.
 Independent review5685069307 found the in-browser timer could finish while the parent CSS still hid item layers: child `data-active=false` precedes the passive parent update. The timer now requires the parent gate, actually visible bounded cards and readable titles/labels (or visible overview summaries) for two frames. A deliberate1200ms visibility mask must be included in the measured interval. Hidden overview layout/routing is skipped; projection/accounting remains available and a focused test requires fresh summaries after a hidden live update and return. These changes require subsequent executed validation; neither state attributes nor revised timing alone prove scale acceptance.
 
 Exact5d CI40713075178 passed the small item consumer/symbol cases but failed the2000-item case on zero visible labels. Its retained timing was3709ms browser/5011ms wall and its overview accounting/clutter passed; this is not full scale acceptance, and the timer at that revision had the review gap above. The route search sampled whole-segment midpoint/end positions, missing the visible middle slice of a long connection. Label candidate ranges now intersect the viewport reduced by the full rotated label footprint, then use the same bounded samples/collision checks; a10000-unit route regression covers this case.24 scoped route/overview cases and web TypeScript passed. Both updated headed desktop/phone cases passed in23.3s, including the deliberate1200ms visibility delay, after correcting the shared timing helper to allow small graphs without an overview layer. The initial negative-control run failed on that missing optional layer; its trace is retained. All local probes still reuse owned dependencies.
+
+Independent review5685328335 confirmed the content-aware timing fix, but found
+clear45-degree labels rejected by their own wire because collision used the
+rotated label's axis-aligned bounds. Wire collision now uses label-local axes;
+the visual oracle independently clips segments against actual SVG quadrilaterals.
+Four diagonal directions have clear/crossing pure regressions. The new headed
+negative also exposed that zero-height horizontal paths were excluded from
+painted-wire checks; stroked nonzero-length paths now count. Its first restore
+attempt selected a different path after Playwright considered the horizontal
+negative hidden; restoration now keeps a stable original path locator. Retain
+those failing controls rather than treating them as product passes.
+
+The headed trace review also found12px controls and overlap with the bottom
+Connections control. Trace/browser text is now14px, headings16px, trace height
+fits content and its bottom spacing clears the control. Overview checks enforce
+the14px floor and trace/control separation, including a deliberate8px negative.
+The complete72-item phone hierarchy/trace journey passed in43.8s with one headed
+browser, one worker, zero retries and strict cleanup;42 scoped geometry/overview/
+relationship tests and web types passed. Exact5b CI40716064148 failed its actual
+2000-item visible-content timeout with zero labels; its artifacts are retained.
+The current rotated-label correction still needs fresh scale CI and review.
+
+The corrected diagonal headed journey passed in13.4s: all four zoom stages have
+visible readable labels, the injected horizontal crossing is rejected, restoring
+the original path clears it, exact two-record browsing and the1200ms visibility
+negative pass, and the API snapshot remains unchanged. The existing horizontal
+desktop/phone cases also passed in the preceding35s batch; the batch's diagonal
+negative failure is retained separately.
diff --git a/packages/web/src/components/SemanticRelationshipBrowser.tsx b/packages/web/src/components/SemanticRelationshipBrowser.tsx
index 6a93087d..b28a914d 100644
--- a/packages/web/src/components/SemanticRelationshipBrowser.tsx
+++ b/packages/web/src/components/SemanticRelationshipBrowser.tsx
@@ -129,7 +129,7 @@ export function SemanticRelationshipBrowser({
             >
               {item.title}
             </button>
-            <p className="text-xs text-gray-300">{contextFor(id)}</p>
+            <p className="text-sm text-gray-300">{contextFor(id)}</p>
             <button
               aria-label={`Explore relationships of ${item.title}`}
               onClick={() => {
@@ -137,7 +137,7 @@ export function SemanticRelationshipBrowser({
                 setSearch('');
                 onScope({ kind: 'node', id });
               }}
-              className="min-h-11 text-xs text-emerald-200 text-left"
+              className="min-h-11 text-sm text-emerald-200 text-left"
             >
               Explore from here
             </button>
@@ -145,10 +145,10 @@ export function SemanticRelationshipBrowser({
         ) : (
           <>
             <span>{id}</span>
-            <p className="text-xs text-amber-200">Endpoint not loaded</p>
+            <p className="text-sm text-amber-200">Endpoint not loaded</p>
           </>
         )}
-        {item && <p className="text-xs text-gray-400 break-all">{id}</p>}
+        {item && <p className="text-sm text-gray-400 break-all">{id}</p>}
       </div>
     );
   };
@@ -187,7 +187,7 @@ export function SemanticRelationshipBrowser({
           This group is no longer present in the loaded graph.
         </p>
       )}
-      <p className="my-2 text-xs text-gray-300">
+      <p className="my-2 text-sm text-gray-300">
         Source → target follows the stored relationship direction.
       </p>
       {scope.kind === 'node' && (
@@ -281,7 +281,7 @@ export function SemanticRelationshipBrowser({
             data-lod-edge-id={edge.id}
             className="rounded border border-gray-700 bg-gray-900 p-3"
           >
-            <p className="text-xs text-gray-300 break-all">{edge.id}</p>
+            <p className="text-sm text-gray-300 break-all">{edge.id}</p>
             {onEdit && (
               <button
                 className="min-h-11 text-sm text-emerald-200"
diff --git a/packages/web/src/components/SemanticTraceControls.tsx b/packages/web/src/components/SemanticTraceControls.tsx
index 7ec5d3cb..db053b47 100644
--- a/packages/web/src/components/SemanticTraceControls.tsx
+++ b/packages/web/src/components/SemanticTraceControls.tsx
@@ -35,10 +35,10 @@ export function SemanticTraceControls({
       data-lod-trace="true"
       data-lod-controls="true"
       data-graph-fit-obstacle="true"
-      className="absolute left-3 right-3 bottom-16 sm:left-16 sm:right-auto sm:w-96 h-32 pointer-events-auto rounded-lg border border-emerald-700 bg-gray-950 px-3 py-2 text-xs text-gray-100"
+      className="absolute left-3 right-3 bottom-24 sm:left-16 sm:right-auto sm:w-96 min-h-36 pointer-events-auto rounded-xl border border-slate-600 bg-gradient-to-br from-slate-900 to-slate-950 px-4 py-3 text-sm text-gray-100"
     >
       <h2
-        className="truncate text-sm font-semibold text-emerald-100"
+        className="truncate text-base font-semibold text-emerald-100"
         title={label}
       >
         {selection.direction === 'incoming' ? 'Incoming' : 'Outgoing'} ·{' '}
diff --git a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
index 4f67fdc0..6bbb5373 100644
--- a/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
+++ b/packages/web/src/lib/__tests__/edgeRouteGeometry.test.ts
@@ -5,6 +5,7 @@ import {
   edgeRouteLabel,
   edgeRouteArrowBounds,
   edgeSegmentHitsBox,
+  edgeSegmentHitsRotatedBox,
   pointOnEdgeRoute,
   projectEdgeRoutePointer,
 } from '../edgeRouteGeometry';
@@ -312,3 +313,37 @@ describe('item wire geometry', () => {
     ).toBeNull();
   });
 });
+
+it.each([45, 135, -45, -135])(
+  'keeps a clear diagonal label while rejecting a real crossing at %s degrees',
+  angle => {
+    const radians = (angle * Math.PI) / 180;
+    const route = createEdgeRoute([
+      { x: -1000 * Math.cos(radians), y: -1000 * Math.sin(radians) },
+      { x: 1000 * Math.cos(radians), y: 1000 * Math.sin(radians) },
+    ])!;
+    const dims = { width: 140, height: 30 };
+    const label = edgeRouteLabel(route, {
+      dims,
+      offset: 29,
+      segments: route.segments,
+      viewport: { x: 0, y: 0, width: 600, height: 600 },
+    });
+    expect(label).not.toBeNull();
+    const box = { x: label!.x, y: label!.y, ...dims };
+    expect(
+      edgeSegmentHitsRotatedBox(route.segments[0], box, label!.rotation, 8)
+    ).toBe(false);
+    expect(
+      edgeSegmentHitsRotatedBox(
+        {
+          source: { x: box.x - 100, y: box.y },
+          target: { x: box.x + 100, y: box.y },
+        },
+        box,
+        label!.rotation,
+        8
+      )
+    ).toBe(true);
+  }
+);
diff --git a/packages/web/src/lib/edgeRouteGeometry.ts b/packages/web/src/lib/edgeRouteGeometry.ts
index 2b0f9107..268b73c4 100644
--- a/packages/web/src/lib/edgeRouteGeometry.ts
+++ b/packages/web/src/lib/edgeRouteGeometry.ts
@@ -214,6 +214,28 @@ export function edgeSegmentHitsBox(
   return true;
 }
 
+export function edgeSegmentHitsRotatedBox(
+  segment: Pick<EdgeRouteSegment, 'source' | 'target'>,
+  box: ObstacleBox,
+  rotation: number,
+  padding = 0
+) {
+  const angle = (rotation * Math.PI) / 180;
+  const local = (point: { x: number; y: number }) => {
+    const x = point.x - box.x,
+      y = point.y - box.y;
+    return {
+      x: x * Math.cos(angle) + y * Math.sin(angle),
+      y: -x * Math.sin(angle) + y * Math.cos(angle),
+    };
+  };
+  return edgeSegmentHitsBox(
+    { source: local(segment.source), target: local(segment.target) },
+    { x: 0, y: 0, width: box.width, height: box.height },
+    padding
+  );
+}
+
 export function edgeRouteLabel(
   route: EdgeRouteGeometry,
   options: {
@@ -334,7 +356,14 @@ export function edgeRouteLabel(
             if (options.budget.remaining <= 0) return best;
             options.budget.remaining--;
           }
-          if (edgeSegmentHitsBox(part, { x, y, width, height }, padding)) {
+          if (
+            edgeSegmentHitsRotatedBox(
+              part,
+              { x, y, width: dims.width, height: dims.height },
+              rotation,
+              padding
+            )
+          ) {
             blocked = true;
             break;
           }
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
index 2e2ccb38..65f417b1 100644
--- a/tests/e2e/graph/item-symbols.spec.ts
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -17,8 +17,12 @@ const test = base.extend<{ ownedGraphIds: OwnedGraphs }>({
 });
 test.use({ actionTimeout: 10000 });
 
-for (const width of [1440, 390])
-  test.describe(`${width}px symbols`, () => {
+for (const { width, diagonal } of [
+  { width: 1440, diagonal: false },
+  { width: 390, diagonal: false },
+  { width: 1440, diagonal: true },
+])
+  test.describe(`${width}px ${diagonal ? 'diagonal ' : ''}symbols`, () => {
     test.use({ viewport: { width, height: 900 } });
     test('cards and labels reserve readable content through zoom @item-symbols', async ({
       page,
@@ -28,7 +32,7 @@ for (const width of [1440, 390])
       await login(page, TEST_USERS.ADMIN);
       const seeded = await ownedGraphIds.seed({
         size: 2,
-        spacing: 600,
+        spacing: diagonal ? 400 : 600,
         edgeFactor: 0,
         namePrefix: 'Readable symbols',
         titleForIndex: index =>
@@ -37,6 +41,13 @@ for (const width of [1440, 390])
             : 'Review',
         additionalEdges: [{ sourceIndex: 1, targetIndex: 0, type: 'BLOCKS' }],
       });
+      if (diagonal)
+        await gql(
+          page,
+          'mutation($id:ID!){updateWorkItems(where:{id:$id},update:{positionX:1,positionY:1}){workItems{id}}}',
+          { id: seeded.nodeIds[1] }
+        );
+      const cameraX = diagonal ? -200 : -300;
       const snapshot = async () => {
         const data = await gql(
           page,
@@ -79,12 +90,13 @@ for (const width of [1440, 390])
       const target = before.workItems.find(
         (item: { id: string }) => item.id === seeded.nodeIds[1]
       );
+      const cameraY = diagonal ? -200 : target.positionY;
       for (const scale of [0.6, 0.9, 1.2, 0.6]) {
         await page.evaluate(
           ({ x, y, scale }) => (window as any).miniMapZoom(x, y, scale),
           {
-            x: width === 390 ? target.positionX : -300,
-            y: target.positionY,
+            x: width === 390 ? target.positionX : cameraX,
+            y: cameraY,
             scale,
           }
         );
@@ -107,7 +119,8 @@ for (const width of [1440, 390])
           info,
           `symbols-${width}-${scale}`
         );
-        if (width === 1440) expect(geometry.labels.length).toBe(2);
+        if (width === 1440 && !diagonal) expect(geometry.labels.length).toBe(2);
+        if (diagonal) expect(geometry.labels.length).toBeGreaterThan(0);
       }
       const targetNode = page.locator('.node').filter({
         has: page.locator('.node-title-group > title', {
@@ -192,6 +205,34 @@ for (const width of [1440, 390])
             (element, value) => element.setAttribute('width', value!),
             original
           );
+        if (diagonal) {
+          const path = page.locator('.edges-group .edge').first();
+          const savedPath = await path.getAttribute('d');
+          await path.evaluate(element => {
+            const label = document.querySelector<SVGGElement>(
+              '.edge-label-group:not([style*="display: none"])'
+            )!;
+            const point = new DOMPoint(0, 0).matrixTransform(label.getCTM()!);
+            const local = point.matrixTransform(
+              (element.parentElement as unknown as SVGGraphicsElement)
+                .getCTM()!
+                .inverse()
+            );
+            element.setAttribute(
+              'd',
+              `M${local.x - 100},${local.y} L${local.x + 100},${local.y}`
+            );
+          });
+          expect(
+            (await readItemSymbols(page)).violations.some(value =>
+              value.startsWith('label-wire-overlap:')
+            )
+          ).toBe(true);
+          await path.evaluate(
+            (element, value) => element.setAttribute('d', value!),
+            savedPath
+          );
+        }
         await inspectItemSymbols(page, info, 'restored-after-negatives');
         await page.evaluate(() => {
           const zoom = (window as any).miniMapZoom;
@@ -208,8 +249,8 @@ for (const width of [1440, 390])
           };
         });
         const visibleMs = await page.evaluate(measureGraphZoom, {
-          x: -300,
-          y: target.positionY,
+          x: cameraX,
+          y: cameraY,
           scale: 1.2,
         });
         const totalMs = await page.evaluate(
diff --git a/tests/e2e/graph/nested-semantic-lod.spec.ts b/tests/e2e/graph/nested-semantic-lod.spec.ts
index a4ee6fc1..0934e3cf 100644
--- a/tests/e2e/graph/nested-semantic-lod.spec.ts
+++ b/tests/e2e/graph/nested-semantic-lod.spec.ts
@@ -422,6 +422,18 @@ for (const width of [1440, 390])
         exact: true,
       });
       await expect(trace).toContainText('Outgoing · Payments');
+      const traceText = trace.locator('p').first();
+      await traceText.evaluate(element => (element.style.fontSize = '8px'));
+      try {
+        await expect(
+          inspectSchematicOverview(overview, info, before.edges.length)
+        ).rejects.toThrow('Graph summaries and controls need readable text');
+      } finally {
+        await traceText.evaluate(element =>
+          element.style.removeProperty('font-size')
+        );
+      }
+
       await inspectSchematicOverview(
         overview,
         info,
diff --git a/tests/lib/itemSymbolVisual.ts b/tests/lib/itemSymbolVisual.ts
index 68af734b..db61f087 100644
--- a/tests/lib/itemSymbolVisual.ts
+++ b/tests/lib/itemSymbolVisual.ts
@@ -18,7 +18,7 @@ export async function readItemSymbols(page: Page) {
       b.x + b.width <= a.x + a.width + 0.5 &&
       b.y + b.height <= a.y + a.height + 0.5;
     const viewport = rect(host);
-    const visible = (element: Element) => {
+    const visible = (element: Element, stroked = false) => {
       for (
         let current: Element | null = element;
         current;
@@ -34,7 +34,9 @@ export async function readItemSymbols(page: Page) {
       }
       const bounds = rect(element);
       return (
-        bounds.width > 0 && bounds.height > 0 && overlaps(bounds, viewport)
+        (stroked
+          ? bounds.width > 0 || bounds.height > 0
+          : bounds.width > 0 && bounds.height > 0) && overlaps(bounds, viewport)
       );
     };
     const font = (element: SVGGraphicsElement) => {
@@ -45,7 +47,7 @@ export async function readItemSymbols(page: Page) {
       );
     };
     const cards = Array.from(host.querySelectorAll<SVGGElement>('.node'))
-      .filter(visible)
+      .filter(element => visible(element))
       .map(node => ({
         id: (node as any).__data__.id as string,
         detail: node.getAttribute('data-detail'),
@@ -53,7 +55,7 @@ export async function readItemSymbols(page: Page) {
         titles: Array.from(
           node.querySelectorAll<SVGGraphicsElement>('.node-title-text')
         )
-          .filter(visible)
+          .filter(element => visible(element))
           .map(text => ({
             text: text.textContent,
             box: rect(text),
@@ -64,16 +66,29 @@ export async function readItemSymbols(page: Page) {
             '.node-type-text, .node-edit-icon, .node-relationship-icon, .node-expand-icon, .node-title-text, .node-description-text, .node-meta text'
           )
         )
-          .filter(visible)
+          .filter(element => visible(element))
           .map(part => ({ kind: part.getAttribute('class'), box: rect(part) })),
       }));
     const labels = Array.from(
       host.querySelectorAll<SVGGElement>('.edge-label-group')
     )
-      .filter(visible)
+      .filter(element => visible(element))
       .map(label => {
         const text = label.querySelector<SVGGraphicsElement>('.edge-label')!;
+        const background = label.querySelector<SVGGraphicsElement>('rect')!;
+        const bounds = background.getBBox();
+        const matrix = background.getScreenCTM()!;
+        const corners = [
+          [bounds.x, bounds.y],
+          [bounds.x + bounds.width, bounds.y],
+          [bounds.x + bounds.width, bounds.y + bounds.height],
+          [bounds.x, bounds.y + bounds.height],
+        ].map(([x, y]) => {
+          const point = new DOMPoint(x, y).matrixTransform(matrix);
+          return { x: point.x, y: point.y };
+        });
         return {
+          corners,
           id: (label as any).__data__.id as string,
           box: rect(label.querySelector('rect')!),
           text: rect(text),
@@ -84,19 +99,19 @@ export async function readItemSymbols(page: Page) {
         };
       });
     const arrows = Array.from(host.querySelectorAll('.arrows-group .arrow'))
-      .filter(visible)
+      .filter(element => visible(element))
       .map(rect);
     const controls = Array.from(
       document.querySelectorAll(
         '[data-graph-fit-obstacle="true"], [data-lod-controls="true"]'
       )
     )
-      .filter(visible)
+      .filter(element => visible(element))
       .map(rect);
     const segments = Array.from(
       host.querySelectorAll<SVGPathElement>('.edges-group .edge')
     )
-      .filter(visible)
+      .filter(path => visible(path, true))
       .flatMap(path => {
         const matrix = path.getScreenCTM()!;
         const points = (path.getAttribute('d')?.match(/[ML][^ML]+/g) ?? []).map(
@@ -112,26 +127,25 @@ export async function readItemSymbols(page: Page) {
       });
     const wireHits = (
       line: (typeof segments)[number],
-      box: ReturnType<typeof rect>
+      corners: { x: number; y: number }[]
     ) => {
       let low = 0,
         high = 1;
-      for (const [axis, span] of [
-        ['x', 'width'],
-        ['y', 'height'],
-      ] as const) {
-        const delta = line.target[axis] - line.source[axis];
-        const min = box[axis] + 0.5,
-          max = box[axis] + box[span] - 0.5;
-        if (!delta) {
-          if (line.source[axis] < min || line.source[axis] > max) return false;
-        } else {
-          const a = (min - line.source[axis]) / delta,
-            b = (max - line.source[axis]) / delta;
-          low = Math.max(low, Math.min(a, b));
-          high = Math.min(high, Math.max(a, b));
-          if (low > high) return false;
-        }
+      for (let index = 0; index < corners.length; index++) {
+        const a = corners[index],
+          b = corners[(index + 1) % corners.length];
+        const dx = b.x - a.x,
+          dy = b.y - a.y,
+          length = Math.hypot(dx, dy);
+        const distance = (p: { x: number; y: number }) =>
+          (dx * (p.y - a.y) - dy * (p.x - a.x)) / length;
+        const first = distance(line.source),
+          delta = distance(line.target) - first;
+        if (Math.abs(delta) < 1e-9) {
+          if (first < 0.5) return false;
+        } else if (delta > 0) low = Math.max(low, (0.5 - first) / delta);
+        else high = Math.min(high, (0.5 - first) / delta);
+        if (low > high) return false;
       }
       return true;
     };
@@ -168,7 +182,7 @@ export async function readItemSymbols(page: Page) {
         ].some(box => overlaps(label.box, box))
       )
         violations.push(`label-overlap:${label.id}`);
-      if (segments.some(segment => wireHits(segment, label.box)))
+      if (segments.some(segment => wireHits(segment, label.corners)))
         violations.push(`label-wire-overlap:${label.id}`);
     }
     return { viewport, cards, labels, segments, violations };
diff --git a/tests/lib/schematicOverview.ts b/tests/lib/schematicOverview.ts
index 62b53cf9..f4969016 100644
--- a/tests/lib/schematicOverview.ts
+++ b/tests/lib/schematicOverview.ts
@@ -34,6 +34,7 @@ export async function inspectSchematicOverview(
         const bounds = element.getBoundingClientRect();
         return {
           id: element.getAttribute('data-lod-group') ?? `control-${index}`,
+          trace: element.hasAttribute('data-lod-trace'),
           x: bounds.x,
           y: bounds.y,
           width: bounds.width,
@@ -91,7 +92,27 @@ export async function inspectSchematicOverview(
         .querySelector('[aria-label*="relationships,"]')
         ?.getAttribute('aria-label');
       const bounds = host.getBoundingClientRect();
+      const smallText = Array.from(
+        host.querySelectorAll(
+          '[data-lod-controls] span, [data-lod-controls] p, [data-lod-controls] h2, [data-lod-controls] label, [data-lod-controls] select, [data-lod-controls] button, [data-lod-group] span'
+        )
+      )
+        .filter(
+          element =>
+            visible(element) &&
+            element.getBoundingClientRect().width > 0 &&
+            Array.from(element.childNodes).some(
+              child =>
+                child.nodeType === Node.TEXT_NODE && child.textContent?.trim()
+            )
+        )
+        .filter(element => parseFloat(getComputedStyle(element).fontSize) < 14)
+        .map(element => ({
+          text: element.textContent,
+          size: getComputedStyle(element).fontSize,
+        }));
       return {
+        smallText,
         cards,
         controls,
         routes,
@@ -111,6 +132,22 @@ export async function inspectSchematicOverview(
     .poll(async () => (await read()).routes.length)
     .toBeGreaterThan(0);
   const geometry = await read();
+  expect(
+    geometry.smallText,
+    'Graph summaries and controls need readable text'
+  ).toEqual([]);
+  for (const trace of geometry.controls.filter(control => control.trace)) {
+    for (const other of geometry.controls.filter(control => !control.trace)) {
+      const overlaps =
+        trace.x < other.x + other.width &&
+        trace.x + trace.width > other.x &&
+        trace.y < other.y + other.height &&
+        trace.y + trace.height > other.y;
+      expect(overlaps, 'Trace controls must clear other graph controls').toBe(
+        false
+      );
+    }
+  }
   for (const card of geometry.cards) {
     expect(card.visible, 'Schematic card must be visible').toBe(true);
     expect(

From a378dced190a65f7f0e0414ef231e3263092b008 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 08:47:10 -0700
Subject: [PATCH 13/19] Plan relationship priority levels with per-pair
 fallback

---
 docs/architecture/dynamic-graph-lod.md     |  5 +-
 docs/architecture/schematic-connections.md | 77 ++++++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/docs/architecture/dynamic-graph-lod.md b/docs/architecture/dynamic-graph-lod.md
index 535b92b5..980a0ab8 100644
--- a/docs/architecture/dynamic-graph-lod.md
+++ b/docs/architecture/dynamic-graph-lod.md
@@ -2,7 +2,10 @@
 
 Baseline reviewed 2026-10-27 UTC; implementation status updated 2026-10-28 UTC.
 The first production-renderer overview and durable layout recovery are integrated
-into dev. The nested hierarchy continuation is under validation in #215 (section 9).
+into dev. Nested hierarchy and group wiring are accepted through #216; #215/#218/#219 are
+closed. Item geometry #221 is accepted on dev058aaa7. Readable symbols #222/#223
+remain under validation; detailed routing and relationship-priority fallback
+continue in #220 (see the schematic connection plan).
 The full dynamic LOD path remains open. Source, GitHub and localhost observations
 below describe the original reviewed base, not current branch tips.
 The stage IDs below are proposed work items, not existing GitHub issue numbers.
diff --git a/docs/architecture/schematic-connections.md b/docs/architecture/schematic-connections.md
index f46bf9bb..020e17ad 100644
--- a/docs/architecture/schematic-connections.md
+++ b/docs/architecture/schematic-connections.md
@@ -183,3 +183,80 @@ they have not run locally. The partial probe passed11 geometry cases in0.722s,
 [review lesson](../../.agents/inbox/2026-10-28-hidden-labels-need-valid-measurement.md)
 records the evidence and limits. These are straight item paths preparing the
 bounded routing increment, not completion of #220.
+
+
+## Relationship priority with connection fallback (#220, 2026-10-28)
+
+The owner wants a selectable relationship-priority level, while retaining at
+least one connection when a pair has no relationship at that level. This is the
+next bounded presentation increment after readable-symbol #222/#223; it does
+not change canonical edge types, weights, source/target IDs or hierarchy.
+The group-wiring #216 and item-geometry foundation #221 are accepted on dev;
+full item obstacle routing and buses still remain #220.
+
+Use two independent controls: **Detail** chooses semantic/item representation;
+**Relationships** chooses the amount of relationship meaning shown. Start with
+three named priority stops, with readable labels, keyboard/touch support and an
+explicit current value. A manual relationship choice must persist through zoom
+and inspection/Back. Do not make a tiny unlabeled slider or silently switch the
+owner's chosen level as the camera moves. Auto priority may be considered later,
+after the manual behavior is accepted.
+
+Proposed initial stops are **Essential**, **Dependencies**, and **All**. Treat
+type ranking as an explicit presentation policy, not a claim that business
+importance can be inferred perfectly from type. Essential promotes `BLOCKS` and
+`CONFLICTS_WITH`; Dependencies also includes `DEPENDS_ON`, `ENABLES`, `FOLLOWS`,
+`VALIDATES` and `SATISFIES`; All includes structural/reference/general relations.
+The policy needs a conservative known default for unknown imported types and
+one central mapping used by item and group projections. Containment still drives
+hierarchy regardless of the relationship stop. Do not reuse node priority or
+edge weight without a documented semantic contract.
+
+The fallback is **per connected endpoint pair**, not one arbitrary edge in the
+whole graph. For each original pair, retain relationships admitted by the
+selected level; if none qualify, retain its highest available tier. Keep ties
+with distinct directions/types in the represented connection, rather than
+silently dropping a cycle or deciding by incoming array order. Repeated copies
+can share a presentation with a count; their original IDs remain separately
+inspectable. A pair connected only by `REFERENCES` must still have a visible
+representation at Essential. Deleting the last blocker must immediately reveal
+the pair's dependency/reference fallback. Increasing detail must add meaning,
+not unexpectedly remove already represented relationships.
+
+Use priority to select the primary label/color of a shared branch or bus before
+spending route/label budgets. For `A BLOCKS B` and `B DEPENDS_ON A`, emphasize
+`A blocks B` and expose both original relations through its count/inspection.
+`A BLOCKS B` and `A DEPENDS_ON B` have different implications; filtering the
+latter by an explicit priority stop is not semantic deduplication. Never rewrite
+its arrow or state that the records are equivalent. At All, exact types and
+original directions must be available in the drawing's expanded inspection.
+Opposite blocking links and self-links remain meaningful. This is pair-local
+presentation reduction, not transitive reduction of a dependency graph.
+
+At group scale, apply the pair policy before aggregation so one blocker elsewhere
+between two groups cannot erase unrelated lower-tier member-pair coverage.
+Then aggregate represented pairs into bounded, count-preserving buses. All
+original records partition into directly represented, priority-summarized,
+internal, missing-endpoint or geometry-deferred categories with non-overlapping
+counts. Prefer a compact primary label and a count over multiple competing tiny
+labels. Inspection reveals why a representative was chosen and every original
+ID/type/direction. Missing endpoints must not masquerade as routable pairs.
+
+The fallback guarantee is a projection invariant; finite screen space still
+requires explicit geometry deferral. Do not force an illegible wire through a
+card to satisfy it or claim a hidden/deferred pair is drawn. A connected pair
+must remain reachable through a named bus/boundary representation or complete
+inspection with truthful deferred counts. Routing should prioritize blocking
+branches before contextual ones while reserving useful neighborhood coverage.
+
+Before enabling the control, test: blocker plus reverse dependency; same-direction
+non-equivalence; references-only fallback; ties/opposite directions/self-links;
+unknown types; live deletion of a winner; deterministic input reorder; monotonic
+level changes; group aggregation retaining every member-pair; selected-edge/edit
+access; zoom/Back persistence; and unchanged API snapshots. A small headed
+parallel-edge fixture should show the primary label replacing redundant visual
+labels, with all original records still accessible. Extend the2000-item gate to
+exercise the stops, meaningful coverage and conserved counts. Keep the existing
+clutter/typography budgets and deliberate spaghetti negatives. The type-tier
+mapping and control labels are proposed defaults pending visual review, not an
+implemented feature or completed acceptance claim.

From bcc0b91a3638a278f610c2785002a106b86d0eb9 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 09:11:16 -0700
Subject: [PATCH 14/19] Strengthen graph wires and workspace visual hierarchy

---
 ...readable-symbols-need-reserved-geometry.md | 22 +++++
 packages/web/src/components/CopyableId.tsx    |  2 +-
 .../web/src/components/CreateGraphModal.tsx   |  4 +-
 .../src/components/CreateWorkItemModal.tsx    |  6 +-
 packages/web/src/components/GraphSelector.tsx |  4 +-
 .../InteractiveGraphVisualization.tsx         | 32 ++++---
 .../web/src/components/MobileBottomNav.tsx    |  8 +-
 .../src/components/MobileStorageStatus.tsx    |  2 +-
 packages/web/src/components/NodeInspector.tsx |  4 +-
 .../src/components/SemanticGraphOverview.tsx  |  2 +-
 .../src/components/WorkItemDetailsModal.tsx   |  8 +-
 .../src/components/WorkItemTypeSelector.tsx   |  6 +-
 .../web/src/components/WorkspaceViewTabs.tsx  | 76 +++++++++++++++
 packages/web/src/index.css                    | 42 +++++---
 packages/web/src/lib/graphSymbolLayout.ts     |  1 +
 packages/web/src/pages/Workspace.tsx          | 96 +------------------
 packages/web/tailwind.config.js               |  2 +
 tests/e2e/graph/item-symbols.spec.ts          | 48 ++++++++++
 tests/e2e/quality/new-user-modes.spec.ts      | 14 +--
 tests/lib/itemSymbolVisual.ts                 | 47 +++++----
 20 files changed, 259 insertions(+), 167 deletions(-)
 create mode 100644 packages/web/src/components/WorkspaceViewTabs.tsx

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 2db8476b..b015177f 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -71,3 +71,25 @@ the original path clears it, exact two-record browsing and the1200ms visibility
 negative pass, and the API snapshot remains unchanged. The existing horizontal
 desktop/phone cases also passed in the preceding35s batch; the batch's diagonal
 negative failure is retained separately.
+
+The owner's next visual steering requires stronger wires, icon-based workspace
+view navigation with hover/focus labels, and firmer text across the app. The
+previous workspace CSS explicitly hid navigation SVGs below1600px and forced
+12px captions. Replace that override with44px icon controls,24px glyphs and14px
+hover/focus labels, including Escape dismissal and accessible button names.
+Body text uses500 weight, control medium600; standard small text and explicit
+10/11px utility usages now use a14px floor. Readable wire weight is one3px
+screen-space value across zoom/hover restoration, with90% stroke opacity and
+non-scaling12px hit targets. Overview buses use3.5px. This changes presentation,
+not canonical relationship strength or data.
+
+Latest serial headed checks: three item-symbol/navigation cases passed36.2s;
+desktop1440 and phone360 all-eight-view saved-work journeys passed24.6s; the
+phone390 hierarchy/trace journey passed26.0s. Types passed. Small probes reuse
+owned dependencies. The priora378 CI40719477629 completed the actual2000/5000
+stage successfully but its broader suite was still running when this visual
+checkpoint was prepared. Retain that stage metadata without claiming full-run
+or artifact acceptance; new exact-source CI remains required. Independenta378
+review also records ordinary minimap occlusion of a full card's far-right strip;
+current geometry checks establish label clearance, not universal card/overlay
+clearance during arbitrary panning.
diff --git a/packages/web/src/components/CopyableId.tsx b/packages/web/src/components/CopyableId.tsx
index a19b95de..f7c16fdf 100644
--- a/packages/web/src/components/CopyableId.tsx
+++ b/packages/web/src/components/CopyableId.tsx
@@ -32,7 +32,7 @@ export function CopyableId({ id, length = 8, label = 'ID', testId = 'copyable-id
       onClick={onCopy}
       title={`Copy ${label}: ${id}`}
       aria-label={`Copy ${label}`}
-      className="group inline-flex items-center gap-1.5 font-mono text-[11px] text-gray-400 hover:text-gray-200 rounded px-1.5 py-0.5 hover:bg-gray-700/50 transition-colors"
+      className="group inline-flex items-center gap-1.5 font-mono text-xs text-gray-400 hover:text-gray-200 rounded px-1.5 py-0.5 hover:bg-gray-700/50 transition-colors"
     >
       <span>{shortId(id, length)}</span>
       {copied
diff --git a/packages/web/src/components/CreateGraphModal.tsx b/packages/web/src/components/CreateGraphModal.tsx
index 41b2cdd5..4435660a 100644
--- a/packages/web/src/components/CreateGraphModal.tsx
+++ b/packages/web/src/components/CreateGraphModal.tsx
@@ -284,7 +284,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                     <div className={`absolute inset-0 bg-gradient-to-br ${type.bgGradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`}></div>
 
                     {type.comingSoon && (
-                      <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-[10px] text-gray-300 px-2.5 py-1 rounded-full font-medium shadow-md">
+                      <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-xs text-gray-300 px-2.5 py-1 rounded-full font-medium shadow-md">
                         Soon
                       </div>
                     )}
@@ -397,7 +397,7 @@ export function CreateGraphModal({ isOpen, onClose, parentGraphId }: CreateGraph
                   title="Template functionality coming soon!"
                   className="group p-6 border-2 rounded-2xl text-center transition-all duration-300 relative overflow-hidden border-gray-700/50 bg-gradient-to-br from-gray-800/30 to-gray-900/30 cursor-not-allowed opacity-50"
                 >
-                  <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-[10px] text-gray-300 px-2.5 py-1 rounded-full font-medium shadow-md">
+                  <div className="absolute top-3 right-3 bg-gradient-to-r from-gray-700 to-gray-600 text-xs text-gray-300 px-2.5 py-1 rounded-full font-medium shadow-md">
                     Soon
                   </div>
 
diff --git a/packages/web/src/components/CreateWorkItemModal.tsx b/packages/web/src/components/CreateWorkItemModal.tsx
index 772880ac..ea1d1665 100644
--- a/packages/web/src/components/CreateWorkItemModal.tsx
+++ b/packages/web/src/components/CreateWorkItemModal.tsx
@@ -348,7 +348,7 @@ export function CreateWorkItemModal({ isOpen, onClose, parentWorkItemId, positio
                             {relation.label}
                           </span>
                         </div>
-                        <p className="text-[10px] text-gray-400">
+                        <p className="text-xs text-gray-400">
                           {relation.description}
                         </p>
                       </button>
@@ -498,7 +498,7 @@ export function CreateWorkItemModal({ isOpen, onClose, parentWorkItemId, positio
                               </span>
                             </div>
                             {formData.status === option.value && (
-                              <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-[10px] ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
+                              <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-xs ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
                                 ✓
                               </div>
                             )}
@@ -663,7 +663,7 @@ export function CreateWorkItemModal({ isOpen, onClose, parentWorkItemId, positio
                     'accent-gray-500'
                   }`}
                 />
-                <div className={`text-[10px] text-center font-medium ${
+                <div className={`text-xs text-center font-medium ${
                   formData.priority >= 0.8 ? 'text-red-500' :
                   formData.priority >= 0.6 ? 'text-orange-500' :
                   formData.priority >= 0.4 ? 'text-yellow-500' :
diff --git a/packages/web/src/components/GraphSelector.tsx b/packages/web/src/components/GraphSelector.tsx
index 311cdd82..ae673b9c 100644
--- a/packages/web/src/components/GraphSelector.tsx
+++ b/packages/web/src/components/GraphSelector.tsx
@@ -466,7 +466,7 @@ export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph, testI
                                   </div>
                                   <div className="flex-1 min-w-0">
                                     <div className="text-xs font-medium truncate">{child.name}</div>
-                                    <div className="text-[10px] text-gray-400">{child.nodeCount || 0} nodes • {child.edgeCount || 0} edges</div>
+                                    <div className="text-xs text-gray-400">{child.nodeCount || 0} nodes • {child.edgeCount || 0} edges</div>
                                   </div>
                                 </button>
                               ))}
@@ -516,7 +516,7 @@ export function GraphSelector({ onCreateGraph, onEditGraph, onDeleteGraph, testI
       {/* Tooltip Portal */}
       {hoveredTooltip && createPortal(
         <div
-          className="fixed px-2 py-1 bg-red-600 text-white text-[10px] rounded whitespace-nowrap pointer-events-none z-[9999999999] -translate-y-1/2"
+          className="fixed px-2 py-1 bg-red-600 text-white text-xs rounded whitespace-nowrap pointer-events-none z-[9999999999] -translate-y-1/2"
           style={{
             left: hoveredTooltip.x,
             top: hoveredTooltip.y
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index 2c95bf7d..dae0acb2 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -54,7 +54,7 @@ import { mergeSimulationNodes, mergeSimulationEdges } from '../lib/graphDataMerg
 import type { ObstacleBox } from '../lib/edgeLabelLayout';
 import { createParallelEdgeRoute, edgeRouteLabel, edgeRouteArrowBounds, edgeSegmentHitsBox, projectEdgeRoutePointer, type EdgeRouteGeometry, type EdgeRouteLabel } from '../lib/edgeRouteGeometry';
 import { PerfMeter, DriftMeter } from '../lib/perfMeter';
-import { graphItemLayout, measureGraphText, edgeLabelDimensions, GRAPH_FONT_FAMILY, ITEM_TITLE_SIZE, ITEM_TITLE_LINE, ITEM_HEADER_HEIGHT, EDGE_LABEL_SIZE } from '../lib/graphSymbolLayout';
+import { graphItemLayout, measureGraphText, edgeLabelDimensions, GRAPH_FONT_FAMILY, ITEM_TITLE_SIZE, ITEM_TITLE_LINE, ITEM_HEADER_HEIGHT, EDGE_LABEL_SIZE, ITEM_WIRE_WIDTH } from '../lib/graphSymbolLayout';
 import { placeItemLabels } from '../lib/edgeLabelPlacement';
 import { separateCards } from '../lib/separateCards';
 import { DEFAULT_PHYSICS, collisionRadius, linkDistance, linkMaxDistance, linkStrength } from '../lib/physicsConfig';
@@ -691,7 +691,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
     svg.selectAll('.node-bg').style('filter', null);
     svg.selectAll('.edge')
       .style('filter', null)
-      .attr('stroke-width', (d: any) => (d.strength || 0.8) * 3); // Reset to normal thickness
+      .attr('stroke-width', ITEM_WIRE_WIDTH); // Reset to normal thickness
     
     // Apply type-specific glow to active node if nodeMenu is visible
     if (nodeMenu.visible && nodeMenu.node) {
@@ -2075,6 +2075,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .enter()
       .append('path')
       .attr('fill', 'none')
+      .attr('vector-effect', 'non-scaling-stroke')
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-linejoin', 'round')
       .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .attr('class', (d: WorkItemEdge) => {
         let classes = 'edge';
@@ -2104,14 +2107,14 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         if (editingEdge && editingEdge.edge && editingEdge.edge.id === d.id) {
           return 10; // Very thick to make it obvious
         }
-        return (d.strength || 0.8) * 3;
+        return ITEM_WIRE_WIDTH;
       })
       .attr('stroke-opacity', (d: WorkItemEdge) => {
         // Full opacity for active dialog
         if (editingEdge && editingEdge.edge && editingEdge.edge.id === d.id) {
           return 1;
         }
-        return 0.7;
+        return 0.9;
       })
       .style('filter', (d: WorkItemEdge) => {
         // Apply pulsing glow to edges with active dialogs
@@ -2145,8 +2148,8 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         const config = getRelationshipConfig(d.type as RelationshipType);
         d3.select(this)
           .style('stroke', config.hexColor)
-          .style('stroke-width', (d.strength || 0.8) * 3)
-          .style('stroke-opacity', '0.7')
+          .style('stroke-width', ITEM_WIRE_WIDTH)
+          .style('stroke-opacity', '0.9')
           .style('filter', null);
       });
     
@@ -2158,6 +2161,9 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .append('path')
       .attr('class', 'edge-clickable')
       .attr('fill', 'none')
+      .attr('vector-effect', 'non-scaling-stroke')
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-linejoin', 'round')
       .attr('data-edge-id', (d: WorkItemEdge) => d.id)
       .attr('stroke', 'transparent')
       .attr('stroke-width', 12)
@@ -2168,15 +2174,15 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         // Highlight the corresponding visible edge
         linkElements
           .filter((edge: WorkItemEdge) => edge.id === d.id)
-          .attr('stroke-width', (d: WorkItemEdge) => ((d.strength || 0.8) * 3) + 2)
+          .attr('stroke-width', ITEM_WIRE_WIDTH + 2)
           .attr('stroke-opacity', 1);
       })
       .on('mouseout', function(event: MouseEvent, d: WorkItemEdge) {
         // Reset the corresponding visible edge
         linkElements
           .filter((edge: WorkItemEdge) => edge.id === d.id)
-          .attr('stroke-width', (d: WorkItemEdge) => (d.strength || 0.8) * 3)
-          .attr('stroke-opacity', 0.7);
+          .attr('stroke-width', ITEM_WIRE_WIDTH)
+          .attr('stroke-opacity', 0.9);
       });
 
     // Create or get defs element for filters
@@ -2476,7 +2482,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         }
         // Thicker border for selected node
         if (selectedNode && selectedNode.id === d.id) {
-          return 3;
+          return ITEM_WIRE_WIDTH;
         }
         if (d.subgraphId) {
           return 2.5; // Sheet symbol — emphasize it's a container
@@ -2898,7 +2904,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .attr('x', 0)
       .attr('y', (d: WorkItem) => getNodeDimensions(d).height / 2 - 10)
       .attr('text-anchor', 'middle')
-      .style('font-size', '9px')
+      .style('font-size', '14px')
       .style('font-weight', '600')
       .style('fill', '#a5b4fc')
       .style('pointer-events', 'none')
@@ -2922,7 +2928,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
       .style('opacity', (currentTransform?.k || 1) >= LOD_THRESHOLDS.CLOSE ? 1 : 0)
       .style('font-size', '14px')
       .style('font-family', GRAPH_FONT_FAMILY)
-      .style('font-weight', '400')
+      .style('font-weight', '500')
       .style('fill', (d: WorkItem) => {
         const isCompleted = d.status === 'COMPLETED' || d.status === 'Completed' || d.status === 'Done' || d.status === 'DONE';
         return isCompleted ? '#6b7280' : '#d1d5db';
@@ -3791,7 +3797,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
           if (editingEdge && editingEdge.edge && editingEdge.edge.id === d.id) {
             return 10; // Keep thick for active dialog
           }
-          return scale >= LOD_THRESHOLDS.FAR ? 1 : Math.max(0.3, scale * 0.8);
+          return ITEM_WIRE_WIDTH;
         });
     });
 
diff --git a/packages/web/src/components/MobileBottomNav.tsx b/packages/web/src/components/MobileBottomNav.tsx
index 95e769e8..6bde84a6 100644
--- a/packages/web/src/components/MobileBottomNav.tsx
+++ b/packages/web/src/components/MobileBottomNav.tsx
@@ -77,18 +77,18 @@ export function MobileBottomNav() {
       >
         <button onClick={() => goView('cards')} className={tabActive(onWorkspace && viewMode === 'cards')}>
           <CreditCard className="h-5 w-5" strokeWidth={1.75} />
-          <span className="text-[11px] font-medium">List</span>
+          <span className="text-xs font-medium">List</span>
         </button>
         <button onClick={() => goView('graph')} className={tabActive(onWorkspace && viewMode === 'graph')}>
           <Network className="h-5 w-5" strokeWidth={1.75} />
-          <span className="text-[11px] font-medium">Graph</span>
+          <span className="text-xs font-medium">Graph</span>
         </button>
         <button
           onClick={() => setMoreOpen(true)}
           className={tabActive(moreOpen || (onWorkspace && !['cards', 'graph'].includes(viewMode)) || !onWorkspace)}
         >
           <MoreHorizontal className="h-5 w-5" strokeWidth={1.75} />
-          <span className="text-[11px] font-medium">More</span>
+          <span className="text-xs font-medium">More</span>
         </button>
         <MobileStorageStatus />
       </nav>
@@ -155,7 +155,7 @@ export function MobileBottomNav() {
                 <UserCircle className="h-7 w-7 text-gray-400 flex-shrink-0" />
                 <div className="min-w-0">
                   <div className="text-sm font-medium text-gray-100 truncate">{currentUser?.name || currentUser?.username || 'Account'}</div>
-                  {currentUser?.role && <div className="text-[11px] text-gray-400">{currentUser.role}</div>}
+                  {currentUser?.role && <div className="text-xs text-gray-400">{currentUser.role}</div>}
                 </div>
               </div>
               <button
diff --git a/packages/web/src/components/MobileStorageStatus.tsx b/packages/web/src/components/MobileStorageStatus.tsx
index 63a601e1..657a267c 100644
--- a/packages/web/src/components/MobileStorageStatus.tsx
+++ b/packages/web/src/components/MobileStorageStatus.tsx
@@ -11,6 +11,6 @@ export function MobileStorageStatus({expanded=false}:{expanded?:boolean}){
  const label=problem?'Storage needs attention':guest?'Saved on this device':paused?'Saved locally · sync paused':!state.online?'Offline · saved locally':state.pending?'Saved locally · waiting to sync':'Storage & sync';
  const Icon=problem?AlertCircle:guest?HardDrive:paused||!state.online?CloudOff:Cloud;
  return <Link to="/settings" aria-label={label+' — storage and allowance details'} data-testid="mobile-storage-status" className={expanded?'flex items-center gap-2 min-h-[44px] my-2 text-sm text-amber-100':'flex-1 flex flex-col items-center justify-center min-h-[44px] gap-0.5 text-gray-300'}>
-  <Icon aria-hidden className={`h-5 w-5 ${problem||paused?'text-amber-300':''}`}/><span className={expanded?'':'text-[11px]'}>{expanded?label:problem?'Attention':guest?'On device':paused?'Sync paused':state.pending?'Pending':'Storage'}</span>{expanded&&error&&<span className="sr-only">{error}</span>}
+  <Icon aria-hidden className={`h-5 w-5 ${problem||paused?'text-amber-300':''}`}/><span className={expanded?'':'text-xs'}>{expanded?label:problem?'Attention':guest?'On device':paused?'Sync paused':state.pending?'Pending':'Storage'}</span>{expanded&&error&&<span className="sr-only">{error}</span>}
  </Link>;
 }
diff --git a/packages/web/src/components/NodeInspector.tsx b/packages/web/src/components/NodeInspector.tsx
index edbe0198..620fdd3a 100644
--- a/packages/web/src/components/NodeInspector.tsx
+++ b/packages/web/src/components/NodeInspector.tsx
@@ -50,7 +50,7 @@ export function NodeInspector({ node, onClose, onEdit, compact = false, rootTest
       {/* Header */}
       <div className="flex items-start gap-2 p-3 border-b border-gray-700/60">
         <div className="flex-1 min-w-0">
-          <div className="text-[10px] uppercase tracking-wide" style={{ color: typeCfg.hexColor }}>{typeCfg.label}</div>
+          <div className="text-xs uppercase tracking-wide" style={{ color: typeCfg.hexColor }}>{typeCfg.label}</div>
           <div className="text-sm font-semibold text-white truncate" title={node.title}>{node.title}</div>
           <div className="mt-0.5"><CopyableId id={node.id} /></div>
         </div>
@@ -78,7 +78,7 @@ export function NodeInspector({ node, onClose, onEdit, compact = false, rootTest
               <div>
                 <div className="text-xs text-gray-500 mb-1">Tags</div>
                 <div className="flex flex-wrap gap-1">
-                  {node.tags.map((t: string) => <span key={t} className="text-[11px] bg-gray-700/60 text-gray-200 rounded px-1.5 py-0.5">{t}</span>)}
+                  {node.tags.map((t: string) => <span key={t} className="text-xs bg-gray-700/60 text-gray-200 rounded px-1.5 py-0.5">{t}</span>)}
                 </div>
               </div>
             )}
diff --git a/packages/web/src/components/SemanticGraphOverview.tsx b/packages/web/src/components/SemanticGraphOverview.tsx
index 80216a6f..85c41f82 100644
--- a/packages/web/src/components/SemanticGraphOverview.tsx
+++ b/packages/web/src/components/SemanticGraphOverview.tsx
@@ -521,7 +521,7 @@ export function SemanticGraphOverview({
                   .join(' ')}
                 fill="none"
                 stroke={busColor(bus.bus)}
-                strokeWidth="2.5"
+                strokeWidth="3.5"
                 strokeLinejoin="round"
                 strokeLinecap="round"
                 markerEnd={`url(#${markerId})`}
diff --git a/packages/web/src/components/WorkItemDetailsModal.tsx b/packages/web/src/components/WorkItemDetailsModal.tsx
index c2a1ee0a..fe6619d0 100644
--- a/packages/web/src/components/WorkItemDetailsModal.tsx
+++ b/packages/web/src/components/WorkItemDetailsModal.tsx
@@ -869,7 +869,7 @@ export function WorkItemDetailsModal({
                             }`}>{type.label}</span>
                           </div>
                           {currentNode.type === type.value && (
-                            <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-[10px] ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
+                            <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-xs ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
                               ✓
                             </div>
                           )}
@@ -929,7 +929,7 @@ export function WorkItemDetailsModal({
                             }`}>{status.label}</span>
                           </div>
                           {currentNode.status === status.value && (
-                            <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-[10px] ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
+                            <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-xs ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
                               ✓
                             </div>
                           )}
@@ -1231,7 +1231,7 @@ export function WorkItemDetailsModal({
                   <GitBranch className="h-8 w-8 text-gray-500 mx-auto" />
                 </div>
                 <p className="text-gray-400 text-xs font-medium mb-1">No connections yet</p>
-                <p className="text-gray-500 text-[10px]">Use Connect button to link nodes</p>
+                <p className="text-gray-500 text-xs">Use Connect button to link nodes</p>
               </div>
             ) : (
 
@@ -1318,7 +1318,7 @@ export function WorkItemDetailsModal({
                     </div>
                     <span className="text-xs text-gray-400 font-medium">Work Item ID</span>
                   </div>
-                  <span className="text-[10px] text-gray-400 font-mono bg-gray-700/50 px-1.5 py-0.5 rounded border border-gray-600/40">{currentNode.id}</span>
+                  <span className="text-xs text-gray-400 font-mono bg-gray-700/50 px-1.5 py-0.5 rounded border border-gray-600/40">{currentNode.id}</span>
                 </div>
               </div>
             </div>
diff --git a/packages/web/src/components/WorkItemTypeSelector.tsx b/packages/web/src/components/WorkItemTypeSelector.tsx
index 2dce79e1..70154152 100644
--- a/packages/web/src/components/WorkItemTypeSelector.tsx
+++ b/packages/web/src/components/WorkItemTypeSelector.tsx
@@ -79,7 +79,7 @@ export function WorkItemTypeSelector({
                 </div>
                 <div>
                   <span className="font-semibold text-gray-900 dark:text-gray-100 text-xs">{selectedNodeType.label}</span>
-                  <div className="text-[10px] text-gray-600 dark:text-gray-300">{selectedNodeType.description}</div>
+                  <div className="text-xs text-gray-600 dark:text-gray-300">{selectedNodeType.description}</div>
                 </div>
               </>
             ) : (
@@ -114,7 +114,7 @@ export function WorkItemTypeSelector({
                           ? 'text-emerald-400'
                           : 'text-gray-100'
                       }`}>{nodeType.label}</div>
-                      <div className={`text-[10px] mt-0.5 ${
+                      <div className={`text-xs mt-0.5 ${
                         selectedType === nodeType.value
                           ? 'text-emerald-300'
                           : 'text-gray-400'
@@ -124,7 +124,7 @@ export function WorkItemTypeSelector({
                     </div>
                   </div>
                   {selectedType === nodeType.value && (
-                    <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-[10px] ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
+                    <div className="w-5 h-5 bg-gradient-to-br from-emerald-500 to-green-600 text-white rounded-full flex items-center justify-center text-xs ml-1 flex-shrink-0 shadow-lg shadow-emerald-500/30 animate-in zoom-in duration-200">
                       ✓
                     </div>
                   )}
diff --git a/packages/web/src/components/WorkspaceViewTabs.tsx b/packages/web/src/components/WorkspaceViewTabs.tsx
new file mode 100644
index 00000000..c5d8dbf7
--- /dev/null
+++ b/packages/web/src/components/WorkspaceViewTabs.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import {
+  Activity,
+  CalendarDays,
+  Columns,
+  CreditCard,
+  GanttChartSquare,
+  LayoutDashboard,
+  Network,
+  Table,
+} from 'lucide-react';
+import type { ViewMode } from '../contexts/ViewModeContext';
+
+const views = [
+  { id: 'graph', name: 'Graph', icon: Network },
+  { id: 'dashboard', name: 'Dashboard', icon: LayoutDashboard },
+  { id: 'table', name: 'Table', icon: Table },
+  { id: 'cards', name: 'Card', icon: CreditCard },
+  { id: 'kanban', name: 'Kanban', icon: Columns },
+  { id: 'gantt', name: 'Gantt', icon: GanttChartSquare },
+  { id: 'calendar', name: 'Calendar', icon: CalendarDays },
+  { id: 'activity', name: 'Activity', icon: Activity },
+] as const;
+
+export function WorkspaceViewTabs({
+  value,
+  onChange,
+}: {
+  value: ViewMode;
+  onChange: (value: ViewMode) => void;
+}) {
+  const [tooltip, setTooltip] = useState<ViewMode | null>(null);
+  return (
+    <div
+      className="workspace-view-switcher"
+      role="group"
+      aria-label="Workspace views"
+    >
+      {views.map(({ id, name, icon: Icon }) => (
+        <button
+          key={id}
+          type="button"
+          className="workspace-view-tab"
+          aria-label={name}
+          aria-pressed={value === id}
+          aria-describedby={tooltip === id ? `workspace-view-${id}` : undefined}
+          onClick={() => onChange(id)}
+          onMouseEnter={() => setTooltip(id)}
+          onMouseLeave={event => {
+            if (document.activeElement !== event.currentTarget)
+              setTooltip(null);
+          }}
+          onFocus={() => setTooltip(id)}
+          onBlur={() => setTooltip(null)}
+          onKeyDown={event => {
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              setTooltip(null);
+            }
+          }}
+        >
+          <Icon aria-hidden="true" strokeWidth={2.25} />
+          {tooltip === id && (
+            <span
+              role="tooltip"
+              id={`workspace-view-${id}`}
+              className="workspace-view-tooltip"
+            >
+              {name}
+            </span>
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index afe12a75..f0db4734 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -109,6 +109,7 @@
      viewport, including when a long sign-in page has already scrolled. */
   body {
     @apply bg-gray-900 text-gray-100;
+    font-weight: 500;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
   }
@@ -801,7 +802,8 @@ html[data-theme="contrast"] .node-selected {
 .workspace-surface, .signin-surface {
   background-color: var(--gd-canvas);
   color: var(--gd-ink);
-  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
+  font-family: system-ui, sans-serif;
+  font-weight: 500;
   -webkit-font-smoothing: antialiased;
 }
 .signin-surface::before {
@@ -818,18 +820,29 @@ html[data-theme="contrast"] .node-selected {
 .signin-surface button[class*="bg-gradient"] { background-image: none; background-color: var(--gd-action); box-shadow: none; }
 .signin-surface button:hover { transform: none; }
 .workspace-toolbar { background: var(--gd-chrome); border-color: var(--gd-line); }
-.workspace-view-switcher { display: flex; align-items: center; gap: 2px; }
+.workspace-view-switcher {
+  display: flex; align-items: center; gap: 6px; padding: 5px;
+  border: 1px solid var(--gd-line); border-radius: 16px; background: #11182780;
+}
 .workspace-view-tab {
-  display: flex; align-items: center; justify-content: center; gap: 7px;
-  min-height: 44px; padding: 10px 9px; white-space: nowrap;
-  border-bottom: 2px solid transparent; color: var(--gd-muted);
-  transition: color 120ms, border-color 120ms;
-}
-.workspace-view-tab > svg { display: none; }
-.workspace-view-tab > div { font-size: 12px; font-weight: 500; }
-.workspace-view-tab:hover { color: var(--gd-ink); border-color: var(--gd-line); }
-.workspace-view-tab[aria-pressed="true"] { color: var(--gd-accent); border-color: var(--gd-accent); }
-@media (min-width: 1600px) { .workspace-view-tab > svg { display: block; width: 17px; height: 17px; } }
+  position: relative; display: flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px;
+  color: #bdc9d9; border: 1px solid transparent;
+  transition: color 120ms, background-color 120ms, border-color 120ms;
+}
+.workspace-view-tab > svg { display: block; width: 24px; height: 24px; }
+.workspace-view-tab:hover { color: #fff; background: #334155; }
+.workspace-view-tab[aria-pressed="true"] {
+  color: #b3ffe8; background: #25473f; border-color: #5eead4;
+  box-shadow: inset 0 -3px #5eead4;
+}
+.workspace-view-tooltip {
+  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
+  padding: 7px 12px; border: 1px solid #64748b; border-radius: 8px;
+  background: #0f172a; color: #f1f5f9; font-size: 14px; font-weight: 600;
+  line-height: 20px; white-space: nowrap; pointer-events: none; z-index: 100;
+  box-shadow: 0 6px 20px #0005;
+}
 .workspace-create { background: var(--gd-action); color: #f5f4ee; border: 1px solid #a68cff; }
 .workspace-create:hover { background: #7e63f0; }
 .project-switcher { background: var(--gd-surface); border-color: var(--gd-line); box-shadow: 0 1px 2px #0002; }
@@ -840,8 +853,8 @@ html:not([data-theme="contrast"]) .workspace-surface .graph-container .node-bg {
 .workspace-surface .graph-container .node-title-bar { fill-opacity: .55; stroke-opacity: .65; }
 .workspace-surface .graph-container .node-type-text { letter-spacing: .06em; }
 html:not([data-theme="contrast"]) .workspace-surface .graph-container .node-title-text { fill: var(--gd-ink); }
-.workspace-surface .graph-container .edge { stroke-opacity: .55; }
-.workspace-surface .graph-container .edge-label-bg { stroke-opacity: .55; }
+.workspace-surface .graph-container .edge { stroke-opacity: .9; }
+.workspace-surface .graph-container .edge-label-bg { stroke-opacity: .9; }
 .workspace-surface button:focus-visible, .signin-surface button:focus-visible {
   outline: 2px solid var(--gd-accent); outline-offset: 3px;
 }
@@ -850,7 +863,6 @@ html:not([data-theme="contrast"]) .workspace-surface .graph-container .node-titl
 .signin-headline-accent { color: #f6a280; }
 .work-illustration { display: none; width: 100%; max-width: 420px; margin-top: 28px; }
 @media (min-width: 1024px) and (min-height: 700px) { .work-illustration { display: block; } }
-.workspace-view-tab[aria-pressed="true"] { background: #302951; border-radius: 6px 6px 0 0; }
 .signin-card { border-top: 3px solid #9678ff; }
 .workspace-surface nav a[aria-current="page"] { background: #342e59; color: #e0d4ff; box-shadow: inset 3px 0 #a186ff; }
 
diff --git a/packages/web/src/lib/graphSymbolLayout.ts b/packages/web/src/lib/graphSymbolLayout.ts
index d4a743eb..4d692345 100644
--- a/packages/web/src/lib/graphSymbolLayout.ts
+++ b/packages/web/src/lib/graphSymbolLayout.ts
@@ -3,6 +3,7 @@ export const ITEM_TITLE_SIZE = 18;
 export const ITEM_TITLE_LINE = 24;
 export const ITEM_HEADER_HEIGHT = 34;
 export const EDGE_LABEL_SIZE = 14;
+export const ITEM_WIRE_WIDTH = 3;
 export const EDGE_LABEL_HEIGHT = 30;
 
 export type TextMeasure = (
diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index f94eef4a..bbc0d337 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -1,10 +1,11 @@
 import {COMPACT_WORKSPACE_QUERY} from '../hooks/useCompactWorkspace';
 import { offlineEnabled } from '../lib/offline/engine';
 import { skipBackgroundPoll, useHostedUsage } from '../lib/hostedUsage';
+import { WorkspaceViewTabs } from '../components/WorkspaceViewTabs';
 import { AgentConnection } from '../components/AgentConnection';
 import type { WorkItem } from '../types/graph';
 import { useState, useEffect, useCallback } from 'react';
-import { Plus, Share2, Users, Table, Activity, Network, CreditCard, Columns, CalendarDays, GanttChartSquare, LayoutDashboard, Database, AlertTriangle, Map, X, Minimize2, Maximize2, Edit3, Trash2, FolderPlus, ChevronLeft, ChevronRight, Lock, Unlock } from 'lucide-react';
+import { Plus, Share2, Users, Network, Database, AlertTriangle, Map, X, Minimize2, Maximize2, Edit3, Trash2, FolderPlus, ChevronLeft, ChevronRight, Lock, Unlock } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { useQuery } from '@apollo/client';
 import { SafeGraphVisualization } from '../components/SafeGraphVisualization';
@@ -169,97 +170,8 @@ export function Workspace() {
 
           {/* Center Section: View Mode Buttons — desktop/tablet only. Phones use the
               bottom tab bar (List / Graph / More) instead of this strip. */}
-          <div className="hidden xl:flex flex-1 min-w-0 justify-start xl:justify-center md:order-2 overflow-x-auto no-scrollbar -mx-3 px-3 sm:mx-0 sm:px-0">
-            <div className="workspace-view-switcher" role="group" aria-label="Workspace views">
-              <button
-                onClick={() => setViewMode('graph')}
-                aria-pressed={viewMode === 'graph'}
-                className="workspace-view-tab"
-                title="Graph View"
-              >
-                <Network className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Graph
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('dashboard')}
-                aria-pressed={viewMode === 'dashboard'}
-                className="workspace-view-tab"
-                title="Dashboard View"
-              >
-                <LayoutDashboard className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Dashboard
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('table')}
-                aria-pressed={viewMode === 'table'}
-                className="workspace-view-tab"
-                title="Table View"
-              >
-                <Table className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Table
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('cards')}
-                aria-pressed={viewMode === 'cards'}
-                className="workspace-view-tab"
-                title="Card View"
-              >
-                <CreditCard className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Card
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('kanban')}
-                aria-pressed={viewMode === 'kanban'}
-                className="workspace-view-tab"
-                title="Kanban View"
-              >
-                <Columns className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Kanban
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('gantt')}
-                aria-pressed={viewMode === 'gantt'}
-                className="workspace-view-tab"
-                title="Gantt Chart"
-              >
-                <GanttChartSquare className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Gantt
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('calendar')}
-                aria-pressed={viewMode === 'calendar'}
-                className="workspace-view-tab"
-                title="Calendar View"
-              >
-                <CalendarDays className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Calendar
-                </div>
-              </button>
-              <button
-                onClick={() => setViewMode('activity')}
-                aria-pressed={viewMode === 'activity'}
-                className="workspace-view-tab"
-                title="Activity Feed"
-              >
-                <Activity className="h-5 w-5 sm:h-7 sm:w-7 lg:h-8 lg:w-8" strokeWidth={1.5} />
-                <div className="text-[10px] sm:text-xs text-center font-medium leading-tight">
-                  Activity
-                </div>
-              </button>
-            </div>
+          <div className="hidden xl:flex flex-1 min-w-0 justify-start xl:justify-center md:order-2">
+            <WorkspaceViewTabs value={viewMode} onChange={setViewMode} />
           </div>
 
           <select aria-label="Workspace view" value={viewMode} onChange={event => setViewMode(event.target.value as typeof viewMode)} className="xl:hidden min-h-[44px] flex-1 min-w-0 rounded-lg border border-gray-600 bg-gray-800 px-3 text-base text-white">
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index 4c639461..68f866f5 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -39,6 +39,8 @@ export default {
   ],
   theme: {
     extend: {
+      fontSize: { xs: ['0.875rem', { lineHeight: '1.25rem' }] },
+      fontWeight: { normal: '500', medium: '600' },
       fontFamily: {
         sans: ['Inter', 'system-ui', 'sans-serif'],
       },
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
index 65f417b1..9f6dd181 100644
--- a/tests/e2e/graph/item-symbols.spec.ts
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -87,6 +87,54 @@ for (const { width, diagonal } of [
           page.evaluate(() => (window as any).__layoutMetrics?.()?.cameraReady)
         )
         .toBe(true);
+      if (width === 1440 && !diagonal) {
+        const navigation = page.getByRole('group', {
+          name: 'Workspace views',
+          exact: true,
+        });
+        await expect(navigation.getByRole('button')).toHaveCount(8);
+        for (const name of [
+          'Graph',
+          'Dashboard',
+          'Table',
+          'Card',
+          'Kanban',
+          'Gantt',
+          'Calendar',
+          'Activity',
+        ]) {
+          const button = navigation.getByRole('button', { name, exact: true });
+          const size = await button.boundingBox();
+          expect(size!.width).toBeGreaterThanOrEqual(44);
+          expect(size!.height).toBeGreaterThanOrEqual(44);
+          await expect(button.locator('svg')).toBeVisible();
+          expect(
+            (await button.locator('svg').boundingBox())!.width
+          ).toBeGreaterThanOrEqual(24);
+          await button.hover();
+          await expect(
+            page.getByRole('tooltip', { name, exact: true })
+          ).toBeVisible();
+        }
+        const graph = navigation.getByRole('button', {
+          name: 'Graph',
+          exact: true,
+        });
+        await graph.focus();
+        await expect(
+          page.getByRole('tooltip', { name: 'Graph', exact: true })
+        ).toBeVisible();
+        await page.keyboard.press('Escape');
+        await expect(page.getByRole('tooltip')).toHaveCount(0);
+        await expect(graph).toBeFocused();
+        await graph.evaluate(element => element.blur());
+        await page.mouse.move(8, 8);
+        expect(
+          await page
+            .locator('.workspace-surface')
+            .evaluate(element => Number(getComputedStyle(element).fontWeight))
+        ).toBeGreaterThanOrEqual(500);
+      }
       const target = before.workItems.find(
         (item: { id: string }) => item.id === seeded.nodeIds[1]
       );
diff --git a/tests/e2e/quality/new-user-modes.spec.ts b/tests/e2e/quality/new-user-modes.spec.ts
index c84912a8..e697aaad 100644
--- a/tests/e2e/quality/new-user-modes.spec.ts
+++ b/tests/e2e/quality/new-user-modes.spec.ts
@@ -5,10 +5,10 @@ const cloud = process.env.QC_BACKEND === 'cloud';
 const base = process.env.TEST_URL || 'http://localhost:3127';
 const api = process.env.QC_API_URL || 'http://localhost:8797/api/graphql';
 const modes = [
-  ['cards','List','Card View'], ['dashboard','Dashboard','Dashboard View'],
-  ['table','Table','Table View'], ['kanban','Board','Kanban View'],
-  ['gantt','Gantt','Gantt Chart'], ['calendar','Calendar','Calendar View'],
-  ['activity','Activity','Activity Feed'], ['graph','Graph','Graph View'],
+  ['cards','List','Card'], ['dashboard','Dashboard','Dashboard'],
+  ['table','Table','Table'], ['kanban','Board','Kanban'],
+  ['gantt','Gantt','Gantt'], ['calendar','Calendar','Calendar'],
+  ['activity','Activity','Activity'], ['graph','Graph','Graph'],
 ];
 for (const [width,height] of [[360,640],[844,390],[1440,900]]) {
   test(`same saved work in all modes ${width}×${height} @newuser`, async ({page},info) => {
@@ -51,9 +51,9 @@ for (const [width,height] of [[360,640],[844,390],[1440,900]]) {
       await page.goto(base);
       const navigation = page.getByTestId('mobile-bottom-nav')
         .or(page.getByRole('combobox',{name:'Workspace view'}))
-        .or(page.getByTitle('Card View',{exact:true}));
+        .or(page.getByRole('group',{name:'Workspace views'}).getByRole('button',{name:'Card',exact:true}));
       await expect(navigation.and(page.locator(':visible')).first()).toBeVisible();
-      for(const [mode,label,title] of modes) {
+      for(const [mode,label,buttonName] of modes) {
         if(await page.getByTestId('mobile-bottom-nav').isVisible()) {
           const nav=page.getByTestId('mobile-bottom-nav');
           if(mode==='cards'||mode==='graph') await nav.getByRole('button',{name:label,exact:true}).click();
@@ -62,7 +62,7 @@ for (const [width,height] of [[360,640],[844,390],[1440,900]]) {
             await page.getByRole('dialog',{name:'More navigation'}).getByRole('button',{name:label,exact:true}).click();
           }
         } else if(await page.getByRole('combobox',{name:'Workspace view'}).isVisible()) await page.getByRole('combobox',{name:'Workspace view'}).selectOption(mode);
-        else await page.getByTitle(title,{exact:true}).click();
+        else await page.getByRole('group',{name:'Workspace views'}).getByRole('button',{name:buttonName,exact:true}).click();
         await expect.poll(()=>page.evaluate(()=>localStorage.getItem('graphdone:viewMode'))).toBe(mode);
         const scope=mode==='graph'?page.locator('.graph-container'):page.getByTestId('view-content');
         await expect(scope.getByText('QC scheduled work',{exact:true}).and(page.locator(':visible')).first()).toBeVisible({timeout:15000});
diff --git a/tests/lib/itemSymbolVisual.ts b/tests/lib/itemSymbolVisual.ts
index db61f087..79ef4ec4 100644
--- a/tests/lib/itemSymbolVisual.ts
+++ b/tests/lib/itemSymbolVisual.ts
@@ -108,23 +108,32 @@ export async function readItemSymbols(page: Page) {
     )
       .filter(element => visible(element))
       .map(rect);
-    const segments = Array.from(
+    const wires = Array.from(
       host.querySelectorAll<SVGPathElement>('.edges-group .edge')
-    )
-      .filter(path => visible(path, true))
-      .flatMap(path => {
-        const matrix = path.getScreenCTM()!;
-        const points = (path.getAttribute('d')?.match(/[ML][^ML]+/g) ?? []).map(
-          command => {
-            const [x, y] = command.slice(1).split(',').map(Number);
-            const point = new DOMPoint(x, y).matrixTransform(matrix);
-            return { x: point.x, y: point.y };
-          }
-        );
-        return points
-          .slice(1)
-          .map((target, index) => ({ source: points[index], target }));
-      });
+    ).filter(path => visible(path, true));
+    const wireWidths = wires.map(path => {
+      const style = getComputedStyle(path),
+        matrix = path.getScreenCTM()!;
+      return (
+        parseFloat(style.strokeWidth) *
+        (style.vectorEffect === 'non-scaling-stroke'
+          ? 1
+          : Math.hypot(matrix.a, matrix.b))
+      );
+    });
+    const segments = wires.flatMap(path => {
+      const matrix = path.getScreenCTM()!;
+      const points = (path.getAttribute('d')?.match(/[ML][^ML]+/g) ?? []).map(
+        command => {
+          const [x, y] = command.slice(1).split(',').map(Number);
+          const point = new DOMPoint(x, y).matrixTransform(matrix);
+          return { x: point.x, y: point.y };
+        }
+      );
+      return points
+        .slice(1)
+        .map((target, index) => ({ source: points[index], target }));
+    });
     const wireHits = (
       line: (typeof segments)[number],
       corners: { x: number; y: number }[]
@@ -185,7 +194,7 @@ export async function readItemSymbols(page: Page) {
       if (segments.some(segment => wireHits(segment, label.corners)))
         violations.push(`label-wire-overlap:${label.id}`);
     }
-    return { viewport, cards, labels, segments, violations };
+    return { viewport, cards, labels, segments, wireWidths, violations };
   });
 }
 
@@ -215,5 +224,9 @@ export async function inspectItemSymbols(
   ).toBeGreaterThan(0);
   expect(geometry.cards.flatMap(card => card.titles).length).toBeGreaterThan(0);
   expect(geometry.violations).toEqual([]);
+  expect(
+    geometry.wireWidths.every(width => width >= 2.99),
+    'Painted wires must retain a three-pixel screen weight'
+  ).toBe(true);
   return geometry;
 }

From aaa2913fd9a113b0f35127953f2835d8eea9d740 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 09:27:22 -0700
Subject: [PATCH 15/19] Preserve focused icon labels across pointer hover

---
 ...readable-symbols-need-reserved-geometry.md |  9 ++++++++
 .../web/src/components/WorkspaceViewTabs.tsx  | 23 ++++++++++++-------
 tests/e2e/graph/item-symbols.spec.ts          | 10 ++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index b015177f..54afafec 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -93,3 +93,12 @@ or artifact acceptance; new exact-source CI remains required. Independenta378
 review also records ordinary minimap occlusion of a full card's far-right strip;
 current geometry checks establish label clearance, not universal card/overlay
 clearance during arbitrary panning.
+
+Independent review5685989836 reproduced a mixed-input tooltip failure: focus
+Graph, hover Dashboard, then leave Dashboard; Graph remained focused but lost
+its visible name. Track hovered and focused view IDs separately, with explicit
+Escape dismissal. The focused label returns when the other hover ends, and
+Escape hides it without moving focus. The desktop headed regression passed
+14.4s on 2026-10-28 (one worker, zero retries; retained output
+`item-symbols-headed15`); final exact-source CI and independent review remain
+required. Isolated hover and keyboard checks alone missed this interaction.
diff --git a/packages/web/src/components/WorkspaceViewTabs.tsx b/packages/web/src/components/WorkspaceViewTabs.tsx
index c5d8dbf7..28c9faca 100644
--- a/packages/web/src/components/WorkspaceViewTabs.tsx
+++ b/packages/web/src/components/WorkspaceViewTabs.tsx
@@ -29,7 +29,10 @@ export function WorkspaceViewTabs({
   value: ViewMode;
   onChange: (value: ViewMode) => void;
 }) {
-  const [tooltip, setTooltip] = useState<ViewMode | null>(null);
+  const [hovered, setHovered] = useState<ViewMode | null>(null);
+  const [focused, setFocused] = useState<ViewMode | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+  const tooltip = dismissed ? null : (hovered ?? focused);
   return (
     <div
       className="workspace-view-switcher"
@@ -45,17 +48,21 @@ export function WorkspaceViewTabs({
           aria-pressed={value === id}
           aria-describedby={tooltip === id ? `workspace-view-${id}` : undefined}
           onClick={() => onChange(id)}
-          onMouseEnter={() => setTooltip(id)}
-          onMouseLeave={event => {
-            if (document.activeElement !== event.currentTarget)
-              setTooltip(null);
+          onMouseEnter={() => {
+            setHovered(id);
+            setDismissed(false);
           }}
-          onFocus={() => setTooltip(id)}
-          onBlur={() => setTooltip(null)}
+          onMouseLeave={() => setHovered(null)}
+          onFocus={() => {
+            setFocused(id);
+            setHovered(null);
+            setDismissed(false);
+          }}
+          onBlur={() => setFocused(null)}
           onKeyDown={event => {
             if (event.key === 'Escape') {
               event.stopPropagation();
-              setTooltip(null);
+              setDismissed(true);
             }
           }}
         >
diff --git a/tests/e2e/graph/item-symbols.spec.ts b/tests/e2e/graph/item-symbols.spec.ts
index 9f6dd181..3afe2097 100644
--- a/tests/e2e/graph/item-symbols.spec.ts
+++ b/tests/e2e/graph/item-symbols.spec.ts
@@ -124,6 +124,16 @@ for (const { width, diagonal } of [
         await expect(
           page.getByRole('tooltip', { name: 'Graph', exact: true })
         ).toBeVisible();
+        await navigation
+          .getByRole('button', { name: 'Dashboard', exact: true })
+          .hover();
+        await expect(
+          page.getByRole('tooltip', { name: 'Dashboard', exact: true })
+        ).toBeVisible();
+        await page.mouse.move(8, 8);
+        await expect(
+          page.getByRole('tooltip', { name: 'Graph', exact: true })
+        ).toBeVisible();
         await page.keyboard.press('Escape');
         await expect(page.getByRole('tooltip')).toHaveCount(0);
         await expect(graph).toBeFocused();

From b33febb8c80fe28ef2960d3b799b7c9a311b4c25 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 09:57:38 -0700
Subject: [PATCH 16/19] Exercise visible card editing in adaptive graph
 journeys

---
 ...readable-symbols-need-reserved-geometry.md | 20 +++++++++++++++++++
 tests/e2e/quality/graph-motion.spec.ts        |  9 ++++++---
 tests/e2e/quality/persona-lifecycle.spec.ts   |  6 ++++--
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 54afafec..14aacd6e 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -102,3 +102,23 @@ Escape hides it without moving focus. The desktop headed regression passed
 14.4s on 2026-10-28 (one worker, zero retries; retained output
 `item-symbols-headed15`); final exact-source CI and independent review remain
 required. Isolated hover and keyboard checks alone missed this interaction.
+
+CI40726146104 on tested merge da15eb72 failed the new-user sequence with
+39 passing cases, three failing cases and an execution-evidence failure. Both
+phone motion traces stalled on a hidden `.node-edit-icon` after the real drag,
+API save and camera readiness had already passed; the small-team lifecycle
+also attempted that hidden gear. Compact cards deliberately replace header
+actions with a title-only representation. The correction targets the original
+item ID and uses the supported visible-card double-click, waits for camera
+readiness, checks the exact editor title and the updated accessible type label.
+The 17-second idle sample, frame count, one-pixel translation limit and all API
+assertions remain unchanged. The three failing journeys passed locally in 1.2 minutes
+on 2026-10-28 with one headed worker and zero retries. The full-card desktop
+SOLO-01 lifecycle also passed in 11.8s. This is a test-consumer
+correction, not a runtime change or proof of full final acceptance.
+
+The same failed CI run's actual large-symbols artifact is clean and unchanged:
+2,000 items, 5,000 relationships, 20.403s load; browser zoom 3.033/3.231/2.603s,
+wall 4.303/4.503/3.724s; three cards and one admitted label at each detail view,
+no attempted writes or page errors. Retain those successful stage artifacts
+alongside the failed overall run. The later hierarchy/mobile stages did not run.
diff --git a/tests/e2e/quality/graph-motion.spec.ts b/tests/e2e/quality/graph-motion.spec.ts
index da4d22e6..fc092764 100644
--- a/tests/e2e/quality/graph-motion.spec.ts
+++ b/tests/e2e/quality/graph-motion.spec.ts
@@ -13,7 +13,7 @@ for(const [width,height] of [[390,844],[844,390],[1440,900]]) {
   const me=(await gql(page,'{me{id}}')).me.id;
   const graph=(await gql(page,'mutation($input:[GraphCreateInput!]!){createGraphs(input:$input){graphs{id}}}',{input:[{name:`Motion QC ${width} ${Date.now()}`,type:'PROJECT',status:'ACTIVE',createdBy:me}]})).createGraphs.graphs[0].id;
   try{
-   await gql(page,'mutation($input:[WorkItemCreateInput!]!){createWorkItems(input:$input){workItems{id}}}',{input:[
+   const created=await gql(page,'mutation($input:[WorkItemCreateInput!]!){createWorkItems(input:$input){workItems{id title}}}',{input:[
     {title:'Drag this task',positionX:400,positionY:300},
     {title:'Keep this task still',positionX:750,positionY:550},
    ].map(n=>({...n,type:'TASK',status:'IN_PROGRESS',positionZ:0,graph:{connect:{where:{node:{id:graph}}}}}))});
@@ -34,7 +34,8 @@ for(const [width,height] of [[390,844],[844,390],[1440,900]]) {
     };
    });
    await page.goto('/');
-   const node=page.locator('.graph-container .node').filter({hasText:'Drag this task'});
+   const itemId=created.createWorkItems.workItems.find((item:{id:string;title:string})=>item.title==='Drag this task').id;
+   const node=page.locator('.graph-container .node').filter({has:page.locator(`[data-node-id="${itemId}"]`)});
    await expect(node).toBeVisible();
    const lock = page.getByTestId('graph-lock-toggle');
    if (await lock.isVisible()) {
@@ -56,8 +57,9 @@ for(const [width,height] of [[390,844],[844,390],[1440,900]]) {
    // keep reheating for seconds or fight the user's chosen placement.
    await expect.poll(()=>page.evaluate(()=>(window as any).__layoutMetrics?.()?.atRest),{timeout:2000}).toBe(true);
    await expect.poll(()=>page.evaluate(()=>(window as any).__layoutMetrics?.()?.cameraReady)).toBe(true);
-   await node.locator('.node-edit-icon').click();
+   await node.dblclick({timeout:10000});
    await expect(page.getByTestId('quick-edit-surface')).toBeVisible();
+   await expect(page.getByTestId('quick-title')).toHaveValue('Drag this task');
    await page.getByTestId('quick-type').getByRole('button',{name:'Idea',exact:true}).click();
    await page.keyboard.press('Escape');
    await expect.poll(async()=>{
@@ -65,6 +67,7 @@ for(const [width,height] of [[390,844],[844,390],[1440,900]]) {
     return items.find((item:any)=>item.title==='Drag this task')?.type;
    }).toBe('IDEA');
    await expect(node.locator('.node-type-text')).toHaveText(/idea/i);
+   await expect(node).toHaveAttribute('aria-label','Drag this task, Idea');
    const ready = () => page.evaluate(() => {
     const metrics = (window as any).__layoutMetrics?.();
     return metrics?.atRest === true && metrics?.cameraReady === true;
diff --git a/tests/e2e/quality/persona-lifecycle.spec.ts b/tests/e2e/quality/persona-lifecycle.spec.ts
index 1eda7c80..97e09502 100644
--- a/tests/e2e/quality/persona-lifecycle.spec.ts
+++ b/tests/e2e/quality/persona-lifecycle.spec.ts
@@ -35,9 +35,11 @@ for(const scenario of scenarios) {
    await page.getByRole('button',{name:'Create Work Item',exact:true}).click();
    await expect.poll(async()=>(await read()).length).toBe(1);
    if(scenario.id==='STUDENT-01') expect((await read())[0].dueDate).toContain('2026-09-12T23:59:59');
-   const node=page.locator('.graph-container svg .node').first();
+   const itemId=(await read())[0].id;
+   const node=page.locator('.graph-container svg .node').filter({has:page.locator(`[data-node-id="${itemId}"]`)});
    await expect(node).toBeVisible({timeout:15000});
-   await node.locator('.node-edit-icon').click();
+   await expect.poll(()=>page.evaluate(()=>(window as any).__layoutMetrics?.()?.cameraReady)).toBe(true);
+   await node.dblclick();
    const editor=page.getByTestId('quick-edit-surface');
    await expect(editor).toBeVisible();
    await expect(page.getByTestId('quick-title')).toHaveValue(scenario.input.title);

From fe8497336fdf4a73875a3765d435dd8dad2ead70 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 10:44:15 -0700
Subject: [PATCH 17/19] fix: keep graph status and connection controls in
 shared flow

---
 ...6-10-28-graph-controls-need-shared-flow.md | 49 ++++++++++
 .agents/issues/INDEX.md                       |  1 +
 .../web/src/components/GraphStatusDock.tsx    | 12 +++
 .../InteractiveGraphVisualization.tsx         | 10 +-
 .../web/src/components/LayoutSaveStatus.tsx   |  6 +-
 .../src/components/SemanticGraphOverview.tsx  | 95 ++++++++++---------
 .../SemanticRelationshipBrowser.tsx           |  3 +-
 .../src/components/SemanticTraceControls.tsx  |  2 +-
 tests/e2e/graph/item-wire-consumers.spec.ts   |  6 ++
 tests/e2e/graph/layout-recovery.spec.ts       | 19 ++++
 10 files changed, 152 insertions(+), 51 deletions(-)
 create mode 100644 .agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
 create mode 100644 packages/web/src/components/GraphStatusDock.tsx

diff --git a/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md b/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
new file mode 100644
index 00000000..49647bd1
--- /dev/null
+++ b/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
@@ -0,0 +1,49 @@
+# Graph controls need shared flow and explicit event boundaries
+
+2026-10-28, PR #223 / issue #222. CI 40731080444 tested merge
+`7eb3b6085282c53b5a48ce806bd1e35bf21424c8` from source `b33febb`.
+Its durable-layout report contains four actual passes and five actual failures,
+plus the execution-failure record. All five failures show the connection Browse
+button intercepting pointer clicks intended for layout Retry/Discard controls.
+The independently verified smoke artifact SHA-256 is
+`c52d20e7` (prefix; complete digest retained in the GitHub artifact metadata).
+Screenshots and traces are retained in the failed run. Four downstream browser
+stages were skipped; this run is not acceptance.
+
+Cause: status and connection controls independently occupied bottom-left space
+at the same z-index. Increasing text size exposed an existing ownership problem.
+A second headed regression at 1440/390 opened the relationship browser's Edit
+button, but the parent document outside-click handler immediately cleared the
+selected edge, changing the new dialog into Create relationship.
+
+Corrective rule: put status, trace and connection controls in one responsive,
+scrollable flow dock in both item and group views. Include each control's actual
+footprint in routing/label obstacles. Do not fix overlapping controls by changing
+paint order or forcing test clicks. Keep browser-panel clicks inside its event
+boundary so opening an editor cannot also trigger outside dismissal.
+
+Validation commands use one headed Chrome, one worker and zero retries:
+- `playwright test item-wire-consumers.spec.ts layout-recovery.spec.ts --grep
+  'item wire paths|reload|unavailable storage'`: three passed in 36.7s. Exact
+  browser Edit now checks original source, target and type without data writes.
+- `playwright test layout-recovery.spec.ts --grep
+  'quota-failed|retry after real|pending layout keeps'`: three passed in 42.2s.
+  The pending-layout journey also checks disjoint status/Connections bounds,
+  normal Retry/Browse/Discard clicks at 1440 and 390px, and actual API/receipt
+  state. Existing durability and camera assertions remain unchanged.
+- Web `tsc --noEmit` passed using the owned dependency fixture. This is scoped
+  evidence, not a pinned clean-install or complete CI result.
+
+Limits: the dock reserves control space, not arbitrary card-to-overlay clearance.
+Full exact-source CI, actual artifact review and final dev checks remain required.
+The separate priority feature has additional desktop/phone browser coverage;
+its success does not establish this PR's full acceptance.
+
+The first phone trace run rejected the dock container as overlapping its own
+trace child. The transparent layout container no longer declares itself as a
+second obstacle; status, trace and connection controls each retain their actual
+measured obstacle. The oracle and its overlap assertions are unchanged. The
+failed `dock-trace-phone1` artifacts are retained.
+The corrected phone hierarchy/trace journey passed in 25.3s in
+`dock-trace-phone2`, including its original overlap/readability checks and the
+8px trace-text negative. No oracle assertion was relaxed.
diff --git a/.agents/issues/INDEX.md b/.agents/issues/INDEX.md
index 97d281a9..4c6be927 100644
--- a/.agents/issues/INDEX.md
+++ b/.agents/issues/INDEX.md
@@ -2,6 +2,7 @@
 
 | Symptom | Canonical lesson and regression |
 | --- | --- |
+| Browse covers layout Retry/Discard, or original relationship Edit opens Create instead | [Share control flow and stop panel click propagation](../inbox/2026-10-28-graph-controls-need-shared-flow.md); durable layout desktop/phone and exact relationship-browser editing |
 | Hidden item labels acquire tiny backgrounds, reverse wires share a lane, or line-only diagnostics fail after path conversion | [Preserve conservative dimensions and shared path consumers](../inbox/2026-10-28-hidden-labels-need-valid-measurement.md); item-wire browser sequence and opposite-direction lane regression |
 | A dragged offset label jumps to a nearby return wire despite a prior-leg tie-breaker | [Project onto the displayed offset path](../inbox/2026-10-28-offset-label-drag-needs-offset-path.md); close-return-leg geometry negative and correction |
 | Extra graph-fixture batches can continue while timeout cleanup deletes their graph | [Keep additional edges inside tracked seeding](../inbox/2026-10-28-fixture-extras-must-share-cancellation.md); delayed edge-response owned-fixture regression |
diff --git a/packages/web/src/components/GraphStatusDock.tsx b/packages/web/src/components/GraphStatusDock.tsx
new file mode 100644
index 00000000..4a7666f1
--- /dev/null
+++ b/packages/web/src/components/GraphStatusDock.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+
+export function GraphStatusDock({ children }: { children: ReactNode }) {
+  return (
+    <div
+      data-graph-status-dock="true"
+      className="absolute bottom-3 left-16 right-3 z-20 flex max-h-[calc(100%-12rem)] flex-col items-start [&>*]:shrink-0 gap-2 overflow-y-auto pointer-events-auto sm:right-auto sm:max-w-96"
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/web/src/components/InteractiveGraphVisualization.tsx b/packages/web/src/components/InteractiveGraphVisualization.tsx
index dae0acb2..3034def3 100644
--- a/packages/web/src/components/InteractiveGraphVisualization.tsx
+++ b/packages/web/src/components/InteractiveGraphVisualization.tsx
@@ -5,6 +5,7 @@ import { SemanticGraphOverview } from './SemanticGraphOverview';
 import { SemanticRelationshipBrowser } from './SemanticRelationshipBrowser';
 import { indexSemanticRelationships, type RelationshipScope } from '../lib/semanticRelationships';
 import { LayoutSaveStatus } from './LayoutSaveStatus';
+import { GraphStatusDock } from './GraphStatusDock';
 import ReactDOM from 'react-dom/client';
 import { createPortal } from 'react-dom';
 import * as d3 from 'd3';
@@ -4858,7 +4859,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         <div className="text-center">
           <div className="w-8 h-8 border-2 border-green-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
           <div className="text-green-300 text-lg font-medium">Loading graph data...</div>
-          <LayoutSaveStatus queue={positionSaveQueue} />
+          <GraphStatusDock><LayoutSaveStatus queue={positionSaveQueue} /></GraphStatusDock>
           <div className="text-gray-400 text-sm mt-2">{layoutRecoveryReady ? 'Connecting to database...' : 'Recovering saved layout...'}</div>
         </div>
       </div>
@@ -5096,14 +5097,16 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
 
   return (
     <div ref={containerRef} className="graph-container relative w-full h-full overflow-hidden select-none" data-overview={semanticOverviewActive || undefined} data-quality={qualityTier} data-dense={isDenseGraph ? 'true' : undefined} data-simplify={isSimplified ? 'true' : undefined} data-dots={isDotMode ? 'true' : undefined}>
+      {!semanticOverviewActive && <GraphStatusDock>
       <LayoutSaveStatus queue={positionSaveQueue} />
-      {!semanticOverviewActive && workItemEdges.length > 0 && <button
+      {workItemEdges.length > 0 && <button
         ref={itemRelationshipTriggerRef}
         data-graph-fit-obstacle="true"
-        className="absolute bottom-3 left-16 z-20 rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-sm text-slate-100 shadow-lg"
+        className="max-w-full rounded-lg border border-slate-600 bg-slate-900 px-3 py-2 text-sm text-slate-100 shadow-lg"
         onClick={() => setItemRelationshipScope({ kind: 'all' })}
         aria-label={`${workItemEdges.length} relationships, ${itemLabelCount} labels shown. Browse all relationships`}
       >{workItemEdges.length} connections · {itemLabelCount} labels · Browse</button>}
+      </GraphStatusDock>}
       {itemRelationshipScope && !semanticOverviewActive && <SemanticRelationshipBrowser
         index={itemRelationshipIndex}
         scope={itemRelationshipScope}
@@ -5138,6 +5141,7 @@ export function InteractiveGraphVisualization({ onResetLayout, onNodeSelected, i
         camera={currentTransform}
         readPositions={readOverviewPositions}
         onActiveChange={handleOverviewActive}
+        layoutStatus={<LayoutSaveStatus queue={positionSaveQueue} />}
         selectedId={Array.from(selectedNodes).slice(-1)[0]}
         onBrowse={closeOverviewInspector}
         onInspect={inspectOverviewItem}
diff --git a/packages/web/src/components/LayoutSaveStatus.tsx b/packages/web/src/components/LayoutSaveStatus.tsx
index f84cf127..b18b07db 100644
--- a/packages/web/src/components/LayoutSaveStatus.tsx
+++ b/packages/web/src/components/LayoutSaveStatus.tsx
@@ -4,7 +4,7 @@ export function LayoutSaveStatus({ queue }: { queue: ReturnType<typeof usePositi
   const { state, error } = queue;
   if (!error && (!state || !(state.pending || state.acknowledged || state.storageError || state.cleanupError || state.sendError))) return null;
   return (
-    <div data-testid="layout-save-status" role="status" className="absolute bottom-3 left-3 z-20 max-w-[calc(100%-1.5rem)] rounded-lg bg-gray-950/90 px-3 py-2 text-xs text-gray-100 shadow">
+    <div data-graph-fit-obstacle="true" data-testid="layout-save-status" role="status" className="max-w-full rounded-lg bg-gray-950/90 px-3 py-2 text-xs text-gray-100 shadow">
       {error && <p>{error}</p>}
       {state && <>
         {state.pending > 0 && <p>{state.local} saved on this device; {state.pending - state.local} pending only in this tab.</p>}
@@ -15,8 +15,8 @@ export function LayoutSaveStatus({ queue }: { queue: ReturnType<typeof usePositi
         {state.cleanupError && <p className="mt-1 text-amber-200">{state.cleanupError}</p>}
         {state.sendError && <p className="mt-1 text-amber-200">{state.sendError}</p>}
         {(state.pending > 0 || state.storageError) && <div className="mt-2 flex flex-wrap gap-3">
-          <button type="button" disabled={queue.saving} onClick={() => void queue.flush()} className="min-h-8 rounded bg-blue-700 px-2 disabled:opacity-50">{state.cleanupPending && !state.unsent ? 'Retry receipt cleanup' : 'Retry layout save'}</button>
-          {state.unsent > 0 && <button type="button" disabled={queue.saving} onClick={() => void queue.discard()} className="min-h-8 rounded bg-gray-700 px-2 disabled:opacity-50">Discard unsent layout</button>}
+          <button type="button" disabled={queue.saving} onClick={() => void queue.flush()} className="min-h-11 rounded bg-blue-700 px-2 disabled:opacity-50">{state.cleanupPending && !state.unsent ? 'Retry receipt cleanup' : 'Retry layout save'}</button>
+          {state.unsent > 0 && <button type="button" disabled={queue.saving} onClick={() => void queue.discard()} className="min-h-11 rounded bg-gray-700 px-2 disabled:opacity-50">Discard unsent layout</button>}
         </div>}
       </>}
     </div>
diff --git a/packages/web/src/components/SemanticGraphOverview.tsx b/packages/web/src/components/SemanticGraphOverview.tsx
index 85c41f82..d03527ec 100644
--- a/packages/web/src/components/SemanticGraphOverview.tsx
+++ b/packages/web/src/components/SemanticGraphOverview.tsx
@@ -1,4 +1,5 @@
 import {
+  type ReactNode,
   useEffect,
   useId,
   useLayoutEffect,
@@ -6,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { GraphStatusDock } from './GraphStatusDock';
 import {
   overviewAtScale,
   placeOverviewLabels,
@@ -38,6 +40,7 @@ interface Props {
   onInspect: (id: string, beginSession: boolean) => void;
   selectedId?: string;
   onBrowse: () => void;
+  layoutStatus?: ReactNode;
   onBack: () => void;
 }
 
@@ -51,6 +54,7 @@ export function SemanticGraphOverview({
   onBack,
   selectedId,
   onBrowse,
+  layoutStatus,
 }: Props) {
   const hierarchy = useMemo(
     () => buildSemanticHierarchy(items, edges),
@@ -598,50 +602,55 @@ export function SemanticGraphOverview({
           })}
         </>
       )}
-      {active && trace && traceProjection && (
-        <SemanticTraceControls
-          selection={trace}
-          label={
-            traceProjection.focus
-              ? groupLabel(traceProjection.focus.id)
-              : undefined
-          }
-          page={traceProjection.page}
-          pages={traceProjection.pages}
-          shownNeighbors={traceProjection.shownNeighbors}
-          totalNeighbors={traceProjection.totalNeighbors}
-          hasRoom={traceProjection.hasRoom}
-          drawn={drawnConnections}
-          total={edges.length}
-          onChange={setTrace}
-          onExit={() => {
-            setTrace(null);
-            groupListButton.current?.focus();
-          }}
-        />
-      )}
       {active && (
-        <button
-          data-graph-fit-obstacle="true"
-          data-lod-controls="true"
-          className="absolute bottom-3 left-3 pointer-events-auto rounded-xl bg-slate-900/95 border border-slate-600 px-4 py-2 min-w-36 min-h-14 text-sm leading-5 text-slate-100 shadow-lg"
-          aria-label={`${edges.length} relationships, ${notDrawnConnections} not drawn: ${internalConnections} internal, ${pendingConnections} awaiting endpoints, ${collapsedConnections} external connections in list`}
-          onClick={() => {
-            returnFocus.current = document.activeElement as HTMLElement;
-            setBrowse(true);
-            setGroupId(null);
-            openRelationships({ kind: 'all' }, 'all');
-          }}
-        >
-          <span className="block">Connections</span>
-          <span
-            className={`block ${notDrawnConnections ? 'text-amber-200' : 'text-emerald-200'}`}
-          >
-            {notDrawnConnections
-              ? `${notDrawnConnections} not drawn`
-              : 'Browse all'}
-          </span>
-        </button>
+        <GraphStatusDock>
+          {layoutStatus}
+          {trace && traceProjection && (
+            <SemanticTraceControls
+              selection={trace}
+              label={
+                traceProjection.focus
+                  ? groupLabel(traceProjection.focus.id)
+                  : undefined
+              }
+              page={traceProjection.page}
+              pages={traceProjection.pages}
+              shownNeighbors={traceProjection.shownNeighbors}
+              totalNeighbors={traceProjection.totalNeighbors}
+              hasRoom={traceProjection.hasRoom}
+              drawn={drawnConnections}
+              total={edges.length}
+              onChange={setTrace}
+              onExit={() => {
+                setTrace(null);
+                groupListButton.current?.focus();
+              }}
+            />
+          )}
+          {active && (
+            <button
+              data-graph-fit-obstacle="true"
+              data-lod-controls="true"
+              className="pointer-events-auto rounded-xl bg-slate-900/95 border border-slate-600 px-4 py-2 min-w-36 min-h-14 text-sm leading-5 text-slate-100 shadow-lg"
+              aria-label={`${edges.length} relationships, ${notDrawnConnections} not drawn: ${internalConnections} internal, ${pendingConnections} awaiting endpoints, ${collapsedConnections} external connections in list`}
+              onClick={() => {
+                returnFocus.current = document.activeElement as HTMLElement;
+                setBrowse(true);
+                setGroupId(null);
+                openRelationships({ kind: 'all' }, 'all');
+              }}
+            >
+              <span className="block">Connections</span>
+              <span
+                className={`block ${notDrawnConnections ? 'text-amber-200' : 'text-emerald-200'}`}
+              >
+                {notDrawnConnections
+                  ? `${notDrawnConnections} not drawn`
+                  : 'Browse all'}
+              </span>
+            </button>
+          )}
+        </GraphStatusDock>
       )}
       {relationshipScope && (
         <SemanticRelationshipBrowser
diff --git a/packages/web/src/components/SemanticRelationshipBrowser.tsx b/packages/web/src/components/SemanticRelationshipBrowser.tsx
index b28a914d..5fbacb1e 100644
--- a/packages/web/src/components/SemanticRelationshipBrowser.tsx
+++ b/packages/web/src/components/SemanticRelationshipBrowser.tsx
@@ -160,6 +160,7 @@ export function SemanticRelationshipBrowser({
       aria-label="Graph relationships"
       data-lod-controls="true"
       data-graph-fit-obstacle="true"
+      onClick={event => event.stopPropagation()}
       onFocusCapture={event => {
         ownedFocus.current = event.target as HTMLElement;
       }}
@@ -172,7 +173,7 @@ export function SemanticRelationshipBrowser({
           onBack();
         }
       }}
-      className="absolute inset-x-3 top-28 bottom-3 sm:top-16 sm:inset-x-auto sm:left-16 sm:w-96 pointer-events-auto overflow-auto rounded-xl border border-gray-600 bg-gray-950 p-4 text-gray-100 shadow-xl"
+      className="absolute z-30 inset-x-3 top-28 bottom-3 sm:top-16 sm:inset-x-auto sm:left-16 sm:w-96 pointer-events-auto overflow-auto rounded-xl border border-gray-600 bg-gray-950 p-4 text-gray-100 shadow-xl"
     >
       <button
         ref={back}
diff --git a/packages/web/src/components/SemanticTraceControls.tsx b/packages/web/src/components/SemanticTraceControls.tsx
index db053b47..81df76b8 100644
--- a/packages/web/src/components/SemanticTraceControls.tsx
+++ b/packages/web/src/components/SemanticTraceControls.tsx
@@ -35,7 +35,7 @@ export function SemanticTraceControls({
       data-lod-trace="true"
       data-lod-controls="true"
       data-graph-fit-obstacle="true"
-      className="absolute left-3 right-3 bottom-24 sm:left-16 sm:right-auto sm:w-96 min-h-36 pointer-events-auto rounded-xl border border-slate-600 bg-gradient-to-br from-slate-900 to-slate-950 px-4 py-3 text-sm text-gray-100"
+      className="w-full min-h-36 pointer-events-auto rounded-xl border border-slate-600 bg-gradient-to-br from-slate-900 to-slate-950 px-4 py-3 text-sm text-gray-100"
     >
       <h2
         className="truncate text-base font-semibold text-emerald-100"
diff --git a/tests/e2e/graph/item-wire-consumers.spec.ts b/tests/e2e/graph/item-wire-consumers.spec.ts
index 94d44c39..a7507dd5 100644
--- a/tests/e2e/graph/item-wire-consumers.spec.ts
+++ b/tests/e2e/graph/item-wire-consumers.spec.ts
@@ -359,6 +359,12 @@ test('item wire paths, hitboxes, arrows and dragged labels retain original relat
   await editor
     .getByRole('button', { name: 'Close relationship editor', exact: true })
     .click();
+  await page.getByRole('button', { name: /Browse all relationships/ }).click();
+  const browser = page.getByRole('region', { name: 'Graph relationships' });
+  await browser.getByRole('button', { name: `Edit relationship ${edgeId}`, exact: true }).click();
+  await expect(browser).toHaveCount(0);
+  await assertOriginalEditor();
+  await editor.getByRole('button', { name: 'Close relationship editor', exact: true }).click();
   expect(await snapshot()).toEqual(before);
   expect(writes).toEqual([]);
   expect(errors).toEqual([]);
diff --git a/tests/e2e/graph/layout-recovery.spec.ts b/tests/e2e/graph/layout-recovery.spec.ts
index 677115b4..cd321b54 100644
--- a/tests/e2e/graph/layout-recovery.spec.ts
+++ b/tests/e2e/graph/layout-recovery.spec.ts
@@ -518,4 +518,23 @@ test('pending layout keeps semantic overview labels fixed during pan and zoom @l
   expect(attempts).toHaveLength(1);
   expect(rounded((await readReceipt(page, graph.graphId, nodeId)).receipt)).toEqual(rounded(latest));
   expect(await readSaved(page, graph.graphId, nodeId)).toEqual(initial);
+  for (const width of [1440, 390]) {
+    await page.setViewportSize({ width, height: 900 });
+    await expect.poll(() => page.evaluate(() => (window as any).__layoutMetrics?.()?.cameraReady)).toBe(true);
+    const status = page.getByTestId('layout-save-status');
+    const connections = page.locator('.semantic-overview').getByRole('button', { name: /relationships, .*not drawn:/ });
+    const statusBox = (await status.boundingBox())!;
+    const connectionBox = (await connections.boundingBox())!;
+    expect(statusBox.y + statusBox.height).toBeLessThanOrEqual(connectionBox.y);
+    await page.getByRole('button', { name: 'Retry layout save' }).click();
+    await expect.poll(() => attempts.length).toBe(width === 1440 ? 2 : 3);
+    expect(await readSaved(page, graph.graphId, nodeId)).toEqual(initial);
+    await connections.click();
+    await expect(page.getByRole('region', { name: 'Graph relationships' })).toBeVisible();
+    await page.getByRole('button', { name: 'Back to groups', exact: true }).click();
+    await page.getByRole('button', { name: 'Close group browser', exact: true }).click();
+  }
+  await page.getByRole('button', { name: 'Discard unsent layout' }).click();
+  await expect(page.getByTestId('layout-save-status')).toHaveCount(0);
+  expect((await readReceipt(page, graph.graphId, nodeId)).receipt).toBeUndefined();
 });

From 38a5e02d38642aaa122effe504e2f3c4c4113aad Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 10:50:19 -0700
Subject: [PATCH 18/19] fix: preserve native scrolling over graph status
 controls

---
 .../2026-10-28-graph-controls-need-shared-flow.md      | 10 ++++++++++
 packages/web/src/components/GraphStatusDock.tsx        |  1 +
 tests/e2e/graph/layout-recovery.spec.ts                | 10 ++++++++++
 3 files changed, 21 insertions(+)

diff --git a/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md b/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
index 49647bd1..20752eb2 100644
--- a/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
+++ b/.agents/inbox/2026-10-28-graph-controls-need-shared-flow.md
@@ -47,3 +47,13 @@ failed `dock-trace-phone1` artifacts are retained.
 The corrected phone hierarchy/trace journey passed in 25.3s in
 `dock-trace-phone2`, including its original overlap/readability checks and the
 8px trace-text negative. No oracle assertion was relaxed.
+
+Independent review of `fe84973` used the actual dock/status components and the
+production D3 zoom filter. A wheel over status prevented native scrolling and
+changed camera scale from 1 to 0.8705505633. Marking the shared dock with the
+existing `data-lod-controls` boundary leaves the wheel default intact and scale
+at 1. The pending-layout browser case now adds a 390×500 viewport, requires
+actual dock overflow, wheels over its status area, and verifies native scrolling
+with an unchanged camera before discarding the owned receipt.
+The complete amended pending-layout journey passed in 15.7s on 2026-10-28,
+with one headed Chrome, one worker and zero retries (`dock-native-scroll1`).
diff --git a/packages/web/src/components/GraphStatusDock.tsx b/packages/web/src/components/GraphStatusDock.tsx
index 4a7666f1..841e2c0a 100644
--- a/packages/web/src/components/GraphStatusDock.tsx
+++ b/packages/web/src/components/GraphStatusDock.tsx
@@ -4,6 +4,7 @@ export function GraphStatusDock({ children }: { children: ReactNode }) {
   return (
     <div
       data-graph-status-dock="true"
+      data-lod-controls="true"
       className="absolute bottom-3 left-16 right-3 z-20 flex max-h-[calc(100%-12rem)] flex-col items-start [&>*]:shrink-0 gap-2 overflow-y-auto pointer-events-auto sm:right-auto sm:max-w-96"
     >
       {children}
diff --git a/tests/e2e/graph/layout-recovery.spec.ts b/tests/e2e/graph/layout-recovery.spec.ts
index cd321b54..18e7c407 100644
--- a/tests/e2e/graph/layout-recovery.spec.ts
+++ b/tests/e2e/graph/layout-recovery.spec.ts
@@ -534,6 +534,16 @@ test('pending layout keeps semantic overview labels fixed during pan and zoom @l
     await page.getByRole('button', { name: 'Back to groups', exact: true }).click();
     await page.getByRole('button', { name: 'Close group browser', exact: true }).click();
   }
+  await page.setViewportSize({ width: 390, height: 500 });
+  await expect.poll(() => page.evaluate(() => (window as any).__layoutMetrics?.()?.cameraReady)).toBe(true);
+  const dock = page.locator('.semantic-overview [data-graph-status-dock]');
+  expect(await dock.evaluate(element => element.scrollHeight > element.clientHeight)).toBe(true);
+  const dockBox = (await dock.boundingBox())!;
+  const cameraBeforeScroll = await camera();
+  await page.mouse.move(dockBox.x + 15, dockBox.y + 15);
+  await page.mouse.wheel(0, 160);
+  await expect.poll(() => dock.evaluate(element => element.scrollTop)).toBeGreaterThan(0);
+  expect(await camera()).toEqual(cameraBeforeScroll);
   await page.getByRole('button', { name: 'Discard unsent layout' }).click();
   await expect(page.getByTestId('layout-save-status')).toHaveCount(0);
   expect((await readReceipt(page, graph.graphId, nodeId)).receipt).toBeUndefined();

From 69d0493df1eb48e1190a46b8ea83e3f37f13b1ee Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 28 Oct 2026 11:11:27 -0700
Subject: [PATCH 19/19] fix: give active radar charts the workspace typography
 baseline

---
 ...6-10-28-readable-symbols-need-reserved-geometry.md | 11 +++++++++++
 packages/web/src/components/RadarChart.tsx            | 10 +++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
index 14aacd6e..097f63c4 100644
--- a/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
+++ b/.agents/inbox/2026-10-28-readable-symbols-need-reserved-geometry.md
@@ -122,3 +122,14 @@ The same failed CI run's actual large-symbols artifact is clean and unchanged:
 wall 4.303/4.503/3.724s; three cards and one admitted label at each detail view,
 no attempted writes or page errors. Retain those successful stage artifacts
 alongside the failed overall run. The later hierarchy/mobile stages did not run.
+
+A final active-consumer audit found `RadarChart` bypassing the global typography
+with13px axis labels and11px,400-weight,0.7-opacity tick numbers. Dashboard's
+expanded distributions and Analytics use this component. The axis measurement
+and painted text now both use14px; tick numbers use14px/500/0.9. In the owned
+64-item Dashboard preview, all29 painted labels/numbers computed to14px/500 and
+none extended outside their SVG bounds at normal chart zoom. This is a targeted
+typography check, not a complete responsive chart-layout or manual chart-zoom
+acceptance claim. `GraphVisualization`'s legacy12px labels have no active import
+consumer beyond the unreferenced `GraphView` file; decorative illustration text
+is not application control text. Preserve the broader scope limits above.
diff --git a/packages/web/src/components/RadarChart.tsx b/packages/web/src/components/RadarChart.tsx
index ddca4190..1a8000ff 100644
--- a/packages/web/src/components/RadarChart.tsx
+++ b/packages/web/src/components/RadarChart.tsx
@@ -84,7 +84,7 @@ export function RadarChart({
         .attr('y', labelY)
         .attr('text-anchor', 'middle')
         .attr('dominant-baseline', 'middle')
-        .attr('font-size', '13px')
+        .attr('font-size', '14px')
         .attr('font-weight', '500')
         .attr('opacity', 0)
         .text(labelText);
@@ -112,7 +112,7 @@ export function RadarChart({
         .attr('y', labelY)
         .attr('text-anchor', 'middle')
         .attr('dominant-baseline', 'middle')
-        .attr('font-size', '13px')
+        .attr('font-size', '14px')
         .attr('font-weight', '500')
         .attr('fill', 'white')
         .text(labelText);
@@ -173,10 +173,10 @@ export function RadarChart({
       g.append('text')
         .attr('x', 5)
         .attr('y', -(levelFactor * level) + 3)
-        .attr('font-size', '11px')
-        .attr('font-weight', '400')
+        .attr('font-size', '14px')
+        .attr('font-weight', '500')
         .attr('fill', 'white')
-        .attr('opacity', 0.7)
+        .attr('opacity', 0.9)
         .text(`${value}`);
     }