fix(tabs): route the lineage spine between the state labels and the tabs

With tabArrangement 'state' (the default) and lineage lines on (the desktop
default), the spine ran straight through the WORKING / WAITING / NEEDS YOU
label of every row it passed. #538's
`.session-tabs.tabs-triage:is(.tabs-auto-wrap, .tabs-two-rows)` pads the
strip by the label gutter and pulls each label to the strip's edge with a
negative margin; it outranks #544's `.lineage-tree.tabs-auto-wrap`
`padding-left: 20px`, so the spine channel disappeared, and the spine,
anchored at the strip's left edge (computeLineageTree), sat in the label
column.

The channel now opens BETWEEN the label column and the tabs: with lineage,
the state strip pads by gutter + --lineage-spine-channel, every label keeps
its column at the edge (still under the brand) and hands the channel back
after itself, and the lead label still starts right after the brand.
computeLineageTree takes the channel's left edge as `spineLeft`, which
session-lineage.js reads back from the padding the CSS laid out (content edge
minus the channel), so the two cannot drift; without it, or where the channel
is the padding itself (classic, ledger, case), the spine stays at the strip's
edge exactly as before. The spine's clamp now only considers tabs in rows the
spine can run beside (every row after the first), so a first row that starts
left of the channel (a quiet idle group right after the brand) no longer
drags the spine back over the labels.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/web/public/constants.js

@@ -316,6 +316,11 @@ function computeTabScrollLeft(input) {
 // (`.session-tabs.lineage-tree`: a wider row gap, bottom padding for the last
 // row's gap, and the spine channel on the left of a wrapped strip).
 //
+// The channel is at the strip's left edge, except where a tab arrangement puts
+// something there: grouped by state, the edge holds the label column and the
+// channel opens between the labels and the tabs. session-lineage.js measures it
+// and passes its left edge as `spineLeft`; without one it is the strip's edge.
+//
 // Rows come from computeLineageRows() over EVERY tab in the strip, not only the
 // endpoints: a row's gap sits under its TALLEST tab (the active tab is 2px
 // taller), or siblings in one row would hang their bus at different heights.
@@ -440,9 +445,11 @@ function lineagePolylinePath(points, radius) {
 /**
  * Routes from one parent tab to each of its children.
  *
- * input: { parent, children: [{ id, rect }], strip?, tabs?, orientation?, lane?,
- *          laneCount?, radius? }. `tabs` is every tab rect in the strip (rows are
- *          derived from it); `lane`/`laneCount` separate families drawn together.
+ * input: { parent, children: [{ id, rect }], strip?, tabs?, spineLeft?,
+ *          orientation?, lane?, laneCount?, radius? }. `tabs` is every tab rect in
+ *          the strip (rows are derived from it); `spineLeft` is the left edge of the
+ *          spine channel (default: the strip's left edge); `lane`/`laneCount`
+ *          separate families drawn together.
  * Returns { routes: [{ id, points, d, endX, endY }] } or null.
  */
 function computeLineageTree(input) {
@@ -509,9 +516,19 @@ function computeLineageTree(input) {
   };
   const pRow = rowOf(parent);
   const gp = gapUnder(pRow);
-  const tabLefts = (input?.tabs || []).map(lineageRect).filter(Boolean).map((r) => r.left);
-  const minLeft = Math.min(parent.left, ...visible.map((c) => c.rect.left), ...tabLefts);
-  const spineBase = strip ? strip.left : minLeft - LINEAGE_SPINE_INSET_PX * 2;
+  // The spine runs from one row's gap to another's, so it only ever passes BESIDE
+  // rows after the first, and only their tabs bound it. The first row may start
+  // left of the channel (grouped by state it starts after the brand and a label
+  // of its own width), and clamping to it would pull the spine back over the
+  // label column.
+  const lowerLefts = [parent, ...visible.map((c) => c.rect), ...(input?.tabs || []).map(lineageRect)]
+    .filter((r) => r && rowOf(r) > 0)
+    .map((r) => r.left);
+  const minLeft = lowerLefts.length ? Math.min(...lowerLefts) : Math.min(parent.left, ...visible.map((c) => c.rect.left));
+  const channelLeft = Number(input?.spineLeft);
+  const spineBase = strip
+    ? Math.max(strip.left, Number.isFinite(channelLeft) ? channelLeft : strip.left)
+    : minLeft - LINEAGE_SPINE_INSET_PX * 2;
   const spineX = Math.min(spineBase + LINEAGE_SPINE_INSET_PX + lane * LINEAGE_SPINE_STEP_PX, minLeft - 2);
 
   for (const { id, rect } of visible) {

src/web/public/session-lineage.js

@@ -260,7 +260,19 @@ Object.assign(CodemanApp.prototype, {
     // The header strip's rows come from EVERY tab in it (computeTree hangs a row's
     // gap under its tallest tab), web tabs included. The rail needs none.
     const tabRects = [];
+    let spineLeft;
     if (orientation === 'horizontal') {
+      // Where the spine channel is: the reserved --lineage-spine-channel just left
+      // of the strip's content edge. Usually that is the strip's own left edge,
+      // but grouped by state the label column comes first (styles.css), and a
+      // spine at the edge ran through every label. Read back from the padding
+      // the CSS laid out, so geometry and stylesheet cannot disagree.
+      const style = typeof getComputedStyle === 'function' ? getComputedStyle(strip) : null;
+      const channel = style ? parseFloat(style.getPropertyValue('--lineage-spine-channel')) : NaN;
+      if (Number.isFinite(channel)) {
+        const inset = (parseFloat(style.borderLeftWidth) || 0) + (parseFloat(style.paddingLeft) || 0);
+        spineLeft = stripRect.left + inset - channel;
+      }
       for (const tab of strip.querySelectorAll('.session-tab')) {
         const id = tab.getAttribute('data-id');
         const key = id ? 'tab:' + id : null;
@@ -292,6 +304,7 @@ Object.assign(CodemanApp.prototype, {
         children: children.map((c) => ({ id: c.edge.childId, rect: c.rect })),
         strip: stripRect,
         tabs: tabRects,
+        spineLeft,
         orientation,
         lane,
         laneCount,

src/web/public/styles.css

@@ -20734,7 +20734,7 @@ html .toolbar .btn-git-status[aria-expanded='true'] {
    line's cross size is clamped at zero. A margin on the items spaces a group
    boundary and a group's own continuation line alike, and the break, which
    carries none, adds nothing. The last row's margin replaces the bottom
-   padding (with lineage, part of its room). The gap is --lineage-row-gap
+   padding (with lineage, part of its room, below). The gap is --lineage-row-gap
    while lineage lines are routed through it (`.session-tabs.lineage-tree`,
    near the top of this file). */
 .session-tabs-host > .session-tabs.tabs-triage:is(.tabs-auto-wrap, .tabs-two-rows) {
@@ -20747,10 +20747,6 @@ html .toolbar .btn-git-status[aria-expanded='true'] {
   margin-bottom: var(--lineage-row-gap, 4px);
 }
 
-.session-tabs-host > .session-tabs.tabs-triage.lineage-tree:is(.tabs-auto-wrap, .tabs-two-rows) {
-  padding-bottom: calc(var(--lineage-bottom-room) - var(--lineage-row-gap));
-}
-
 .session-tabs-host > .session-tabs.tabs-triage:is(.tabs-auto-wrap, .tabs-two-rows) > .tab-triage-head {
   justify-content: flex-start;
   width: var(--tab-triage-gutter, 92px);
@@ -20771,6 +20767,31 @@ html .toolbar .btn-git-status[aria-expanded='true'] {
   height: 0;
 }
 
+/* Lineage lines (session-lineage.js): the spine channel (the 20px the lineage
+   rule reserves on the left of a wrapped strip) opens BETWEEN the label column
+   and the tabs, not at the strip's edge. At the edge it was the label column
+   itself: the gutter padding replaced the channel and the spine ran through
+   every label it passed. session-lineage.js reads the channel's position back
+   from this padding (the content edge minus --lineage-spine-channel), so the
+   two cannot drift apart. Labels keep their column under the brand, and the
+   lead row, which the spine never runs alongside, still starts right after
+   the brand. */
+.session-tabs-host > .session-tabs.tabs-triage.lineage-tree:is(.tabs-auto-wrap, .tabs-two-rows) {
+  padding-left: calc(var(--tab-triage-gutter, 92px) + var(--lineage-spine-channel));
+  /* The last row's margin is part of the bottom routing room. */
+  padding-bottom: calc(var(--lineage-bottom-room) - var(--lineage-row-gap));
+}
+
+.session-tabs-host > .session-tabs.tabs-triage.lineage-tree:is(.tabs-auto-wrap, .tabs-two-rows) > .tab-triage-head {
+  margin-left: calc(-1 * (var(--tab-triage-gutter, 92px) + var(--lineage-spine-channel)));
+  margin-right: var(--lineage-spine-channel);
+}
+
+.session-tabs-host > .session-tabs.tabs-triage.lineage-tree:is(.tabs-auto-wrap, .tabs-two-rows) > .tab-triage-head--lead {
+  margin-left: calc(var(--tab-triage-brand, 100px) - var(--tab-triage-gutter, 92px) - var(--lineage-spine-channel));
+  margin-right: 0;
+}
+
 /* Side rail and sidebar: each heading is a section row above its rows. */
 html[data-tab-orientation='vertical'] .tab-rail .session-tabs.tabs-triage > .tab-triage-head,
 html[data-session-list='sidebar'] .session-sidebar .session-tabs.tabs-triage > .tab-triage-head {

test/session-lineage-lines.test.ts

@@ -23,6 +23,7 @@ type TreeInput = {
   children: Array<{ id: string; rect: Rect | null }>;
   strip?: Rect;
   tabs?: Rect[];
+  spineLeft?: number;
   orientation?: 'horizontal' | 'vertical';
   lane?: number;
   laneCount?: number;
@@ -81,6 +82,41 @@ function wrappedStrip() {
   return { strip, rows, all: rows.flat() };
 }
 
+/**
+ * The header strip grouped by state (tabArrangement 'state', the default): a label
+ * column 85px wide at the strip's left edge, then the 20px spine channel, then the
+ * tabs; rows 42px apart. The first row starts beside the brand (83px) with its own
+ * label, so its first tab sits at `leadLeft` from the strip's edge.
+ */
+function stateRowsStrip({ leadLeft = 160 } = {}) {
+  const strip: Rect = { left: 12, top: 6, width: 1300, height: 0 };
+  const gutter = 85;
+  const channel = 20;
+  const labels: Rect[] = [];
+  const rows: Rect[][] = [];
+  let top = 8;
+  for (const [i, widths] of [
+    [120, 110, 130],
+    [150, 120, 140, 110],
+    [140, 120, 200],
+    [130, 120],
+  ].entries()) {
+    let left = i === 0 ? strip.left + leadLeft : strip.left + gutter + channel;
+    // A label is a line of text inside its row: lead after the brand, the rest in
+    // the column, each narrower than the column (its widest label + 10px).
+    labels.push({ left: i === 0 ? strip.left + 83 : strip.left, top: top + 10, width: i === 0 ? 70 : 60, height: 10 });
+    const cells: Rect[] = [];
+    for (const w of widths) {
+      cells.push(tab(left, top, w));
+      left += w + 2;
+    }
+    rows.push(cells);
+    top += 30 + 12;
+  }
+  strip.height = top - 6 + 2;
+  return { strip, gutter, channel, labels, rows, all: rows.flat() };
+}
+
 /** Does an axis-aligned segment pass through the INSIDE of a rect (touching an edge is fine)? */
 function crossesRect([x1, y1]: Point, [x2, y2]: Point, r: Rect): boolean {
   const eps = 0.5;
@@ -285,6 +321,56 @@ describe('lineage tree geometry: header strip', () => {
     expect(geom.routes.map((r) => r.id)).toEqual(['ok']);
   });
 
+  it('runs the spine between the state labels and the tabs, never through a label', () => {
+    // tabArrangement 'state': a label column at the strip's left edge, the spine
+    // channel after it, the tabs after that. The first row starts beside the
+    // brand with a label of its own width. The spine used to sit at the strip's
+    // edge, which grouped by state is the label column.
+    const helper = loadLineageHelper();
+    const { strip, gutter, channel, labels, rows, all } = stateRowsStrip();
+    const parent = rows[2][2];
+    const children = [rows[0][1], rows[1][0], rows[1][2], rows[3][0], rows[3][1]].map((rect, i) => ({
+      id: `c${i}`,
+      rect,
+    }));
+    const geom = helper.computeTree({ parent, children, strip, tabs: all, spineLeft: strip.left + gutter })!;
+
+    expect(geom.routes).toHaveLength(children.length);
+    const spineX = geom.routes.find((r) => r.id === 'c3')!.points[2][0];
+    expect(spineX).toBe(strip.left + gutter + helper.SPINE_INSET_PX);
+    // Right of the label column (the first row's label, beside the brand, is never
+    // passed: the spine only runs beside the rows under it), left of the tabs.
+    expect(spineX).toBeGreaterThan(Math.max(...labels.slice(1).map((r) => r.left + r.width)));
+    expect(spineX).toBeLessThan(strip.left + gutter + channel);
+    for (const route of geom.routes) {
+      for (let i = 1; i < route.points.length; i++) {
+        for (const r of [...all, ...labels]) {
+          expect(crossesRect(route.points[i - 1], route.points[i], r), `${route.id} segment ${i}`).toBe(false);
+        }
+      }
+    }
+  });
+
+  it('keeps the spine in its channel when the first row starts left of it', () => {
+    // A quiet first group (idle, no label) puts the first row's first tab just
+    // after the brand, left of the channel. The spine never runs beside the first
+    // row, so that tab must not drag it back over the label column.
+    const helper = loadLineageHelper();
+    const { strip, gutter, labels, rows, all } = stateRowsStrip({ leadLeft: 80 });
+    expect(rows[0][0].left).toBeLessThan(strip.left + gutter + helper.SPINE_INSET_PX);
+    const geom = helper.computeTree({
+      parent: rows[0][1],
+      children: [{ id: 'low', rect: rows[3][1] }],
+      strip,
+      tabs: all,
+      spineLeft: strip.left + gutter,
+    })!;
+    const spineX = geom.routes[0].points[2][0];
+
+    expect(spineX).toBe(strip.left + gutter + helper.SPINE_INSET_PX);
+    expect(spineX).toBeGreaterThan(Math.max(...labels.slice(1).map((r) => r.left + r.width)));
+  });
+
   it('still draws when no strip rect is supplied (clipping is opt-in)', () => {
     const helper = loadLineageHelper();
     const geom = helper.computeTree({ parent: tab(0), children: [{ id: 'far', rect: tab(9000, 46) }] })!;
@@ -465,10 +551,17 @@ function fakeNode(tag: string): FakeNode {
  * Load session-lineage.js for real, on a one-row strip where every session is a
  * 120px tab, 140px apart. The colour memo is plain state on the app instance.
  */
-function loadLineageApp(sessions: Record<string, string | null>, status: Record<string, string> = {}) {
+function loadLineageApp(
+  sessions: Record<string, string | null>,
+  status: Record<string, string> = {},
+  layout: { rect?: (i: number) => Rect; style?: Record<string, string> } = {}
+) {
   function CodemanApp(this: unknown) {}
   const ids = Object.keys(sessions);
-  const rect = (i: number) => ({ left: i * 140, top: 4, width: 120, height: 30, right: i * 140 + 120, bottom: 34 });
+  const rect = (i: number) => {
+    const r = layout.rect ? layout.rect(i) : { left: i * 140, top: 4, width: 120, height: 30 };
+    return { ...r, right: r.left + r.width, bottom: r.top + r.height };
+  };
   const stripClasses = new Set<string>();
   const listeners: Record<string, (e: { propertyName: string }) => void> = {};
   const strip = {
@@ -491,6 +584,15 @@ function loadLineageApp(sessions: Record<string, string | null>, status: Record<
     CodemanApp,
     MobileDetection: { getDeviceType: () => 'desktop' },
     CSS: { escape: (v: string) => v },
+    // The strip's computed style, when a test lays one out (the spine channel).
+    ...(layout.style
+      ? {
+          getComputedStyle: () => ({
+            ...layout.style,
+            getPropertyValue: (name: string) => layout.style![name] ?? '',
+          }),
+        }
+      : {}),
     document: {
       documentElement: { getAttribute: () => 'horizontal' },
       getElementById: (id: string) => (id === 'sessionTabs' ? strip : null),
@@ -636,6 +738,31 @@ describe('lineage routing room', () => {
   });
 });
 
+describe('lineage spine channel, read back from the laid-out strip', () => {
+  // Two rows inside the fake 50px strip: w1 and a on the first, b on the second,
+  // so b's route takes the spine.
+  const rows = (i: number): Rect => (i < 2 ? tab(200 + i * 140, 2, 120, 14) : tab(125, 28, 120, 14));
+  const spineOf = (style?: Record<string, string>) => {
+    const { app } = loadLineageApp({ w1: null, a: 'w1', b: 'w1' }, {}, { rect: rows, style });
+    const families = draw(app, 'w1');
+    const d = family(families, 'w1').paths.find((p) => p.attrs['data-child-tab'] === 'b')!.attrs.d;
+    // The spine is the one x the route visits left of every tab.
+    return Math.min(...[...d.matchAll(/[MLQ] (-?[\d.]+)/g)].map((m) => Number(m[1])));
+  };
+
+  it('opens the channel just left of the content edge the CSS laid out', () => {
+    // Grouped by state: an 85px label column, then the 20px channel.
+    const spine = spineOf({ '--lineage-spine-channel': ' 20px', paddingLeft: '105px', borderLeftWidth: '0px' });
+    expect(spine).toBe(85 + 6);
+  });
+
+  it('keeps the strip edge when the channel is the padding itself, or not reserved', () => {
+    expect(spineOf({ '--lineage-spine-channel': '20px', paddingLeft: '20px', borderLeftWidth: '0px' })).toBe(6);
+    expect(spineOf({ '--lineage-spine-channel': '', paddingLeft: '4px', borderLeftWidth: '0px' })).toBe(6);
+    expect(spineOf()).toBe(6);
+  });
+});
+
 describe('lineage redraw after a selection resizes tabs', () => {
   it('redraws when a size transition in the strip ends, and only for size properties', () => {
     // The active tab reveals its icons by transitioning padding, so it keeps

test/tab-triage.test.ts

@@ -468,6 +468,36 @@ describe('tab grouping wiring (static)', () => {
     );
   });
 
+  it('opens the lineage spine channel between the label column and the tabs', () => {
+    // The gutter padding used to replace the lineage channel, so the spine ran
+    // through every label. With lineage lines, the strip pads by both, every label
+    // keeps its column at the edge and gives the channel back after itself, and
+    // the first row's label still starts right after the brand.
+    const lineage = '.session-tabs-host > .session-tabs.tabs-triage.lineage-tree:is(.tabs-auto-wrap, .tabs-two-rows)';
+    const rule = (selector: string) => {
+      const start = css.indexOf(`${selector} {`);
+      expect(start, selector).toBeGreaterThan(-1);
+      return css.slice(start, css.indexOf('}', start));
+    };
+    expect(rule(lineage)).toContain(
+      'padding-left: calc(var(--tab-triage-gutter, 92px) + var(--lineage-spine-channel));'
+    );
+    const head = rule(`${lineage} > .tab-triage-head`);
+    expect(head).toContain('margin-left: calc(-1 * (var(--tab-triage-gutter, 92px) + var(--lineage-spine-channel)));');
+    expect(head).toContain('margin-right: var(--lineage-spine-channel);');
+    const lead = rule(`${lineage} > .tab-triage-head--lead`);
+    expect(lead).toContain(
+      'margin-left: calc(var(--tab-triage-brand, 100px) - var(--tab-triage-gutter, 92px) - var(--lineage-spine-channel));'
+    );
+    expect(lead).toContain('margin-right: 0;');
+    // The lead rule must come after the head rule it overrides (equal specificity).
+    expect(css.indexOf(`${lineage} > .tab-triage-head--lead {`)).toBeGreaterThan(
+      css.indexOf(`${lineage} > .tab-triage-head {`)
+    );
+    // session-lineage.js reads the channel's position back from that padding.
+    expect(read('session-lineage.js')).toContain("getPropertyValue('--lineage-spine-channel')");
+  });
+
   it('lets the rows after the first start under the brand, labels left-aligned', () => {
     expect(css).toMatch(
       /\.header:has\(> \.session-tabs-host > \.session-tabs\.tabs-triage:is\(\.tabs-auto-wrap, \.tabs-two-rows\)\) > \.header-brand \{\s*position: absolute;/