From 285aa0b2b2da949524a910e5fdfcbe816ca23deb Mon Sep 17 00:00:00 2001
From: timkjr <timkjr@k-lab.lan>
Date: Mon, 26 Oct 2026 21:35:04 -0500
Subject: [PATCH] fix(tabs): keep the plain wrap when the strip scrolls, add a
 browser test

Review follow-up for the L-shaped header strip:

- _syncTabStripCorner() keeps the plain wrap when the plain strip is
  already past --tab-strip-max-height, checked before .tabs-corner goes
  on: the float scrolled with the tabs while the toolbar stayed put, so a
  scrolled strip put tabs under #headerRight, and a re-render of a
  scrolled two-rows strip sized the float from the scrolled frame. The
  "- scrollTop" in contentTop is gone (always 0 now).
- A strip just under its max-height that passes it once the float is in
  falls back to the plain wrap as well.
- test/tab-strip-corner.browser.test.ts (real Chromium, real header and
  styles.css), listed in BROWSER_TEST_GLOBS.
- src/web/CLAUDE.md Tab layouts entry describes the L-shaped classic strip.
---
 config/test-suites.ts                 |   1 +
 src/web/CLAUDE.md                     |   2 +-
 src/web/public/app.js                 |  15 +-
 src/web/public/styles.css             |   5 +-
 test/tab-strip-corner.browser.test.ts | 227 ++++++++++++++++++++++++++
 5 files changed, 244 insertions(+), 6 deletions(-)
 create mode 100644 test/tab-strip-corner.browser.test.ts

diff --git a/config/test-suites.ts b/config/test-suites.ts
index d66abd58..40745032 100644
--- a/config/test-suites.ts
+++ b/config/test-suites.ts
@@ -27,6 +27,7 @@ export const BROWSER_TEST_GLOBS = [
   'test/tab-focus.browser.test.ts',
   'test/session-sidebar-ux.browser.test.ts',
   'test/header-divider.browser.test.ts',
+  'test/tab-strip-corner.browser.test.ts',
   'test/header-host-sensors.browser.test.ts',
   'test/session-options-responsive.browser.test.ts',
   'test/inline-rename.test.ts',
diff --git a/src/web/CLAUDE.md b/src/web/CLAUDE.md
index 1c884dfc..1d02a363 100644
--- a/src/web/CLAUDE.md
+++ b/src/web/CLAUDE.md
@@ -38,7 +38,7 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 **Session list layout: header strip or left sidebar** (`sessionListLayout`, default `header`; per-device via `displayKeys`, also in `SettingsUpdateSchema`): the list can move into a collapsible `<aside>` (Alt+B, `toggleSessionSidebar`) or, via `tabOrientation`, a resizable vertical `#tabRail` (desktop/tablet only). ⚠️ There is ONE `#sessionTabs`, MOVED between hosts, never a second list: `applySessionListLayout()` runs first, then `applyTabOrientation()`, both BEFORE `applyTabWrapSettings()`, and both arm/disarm `_startSidebarRichClock()`. ⚠️ Axis decisions use `_isVerticalTabList()`, never `isSessionSidebarActive()` alone. ⚠️ Rich rows share one gate, `isRichTabRows()`; rich CSS pairs sidebar+rail with comma-grouped selectors, never `:is()`, and card rules stay rail-scoped. ⚠️ Rail sort (`tabRailSort`, default `activity`) is the flex `order` property only, never a DOM reorder; the arrow-key walk and the phone swipe follow computed `order`. ⚠️ Leaving sidebar mode clears `_sidebarFilter`; the handheld overlay drawer is `inert` when closed, the docked rail never. ⚠️ The rail's **Search sessions** box (`setTabRailSearch`, in memory only) and the sidebar filter share ONE row filter, `_applyTabListFilter()` over the pure `CodemanTabSearch` (constants.js): classes only, never a reorder or layout write; the rail matches the name, the sidebar name + folder. ⚠️ A session row with a tab alert (`tabAlerts`, red or yellow) is never hidden by either box: it goes in as `keep: true`, counts toward its group (which stays on screen) but not toward `matchCount`. ⚠️ Escape in the rail box is claimed by the global capture-phase Escape branch (the box's own `onkeydown` runs after it, too late to stop `closeAllPanels()`), and a filter change that shows or hides anything redraws the connector lines, since a keystroke re-renders nothing; a floating window finds its parent tab only through `_paintedSessionTab()` (a hidden row's rect is all zero but truthy, which drew connectors from the viewport's corner). While it runs `_projectTabGroups()` projects every group open (a collapsed group's rows are not in the DOM) and `toggleTabGroupCollapsed()` refuses, leaving the stored collapse untouched; drag stays on during a search (owner decision), a drop landing between the visible neighbours; `applyTabOrientation()` clears it off the rail. Tests: `test/tab-rail-search.test.ts`, `test/tab-rail-search.browser.test.ts`. → [architecture-invariants#session-list-layout-header-strip-vs-left-sidebar](../../docs/architecture-invariants.md#session-list-layout-header-strip-vs-left-sidebar)
 
-**Tab layouts** (`tabArrangement`, per-device, default `classic`; `state`/`case`/`ledger` are opt-in; Discussion #426): `state` (option C) splits the list into needs you / waiting / working / idle (idle is `quiet`: its heading stays as the row's anchor but draws no label; `tabStateOrder: 'urgent-last'` flips the order, needs you at the bottom): rows in the desktop header strip with left-aligned labels in a measured column (the brand sits over the strip's corner, so the rows after the first start under "Codeman"), sections in the flat rail and the sidebar, inline dividers on the tablet strip, group order with no headings on phones. `case` (option A) wraps each case's tabs in one `.tab-cluster` box and hides the `-<case>` of a generated name (`.tab-name-case`). `ledger` (option B) is a CSS-only grid on the desktop header strip. `classic` is the old strip. Pure cores: `CodemanTabTriage` and `CodemanTabClusters` (constants.js). ⚠️ `state` is the flex `order` property plus `aria-hidden` heading/break elements reconciled in place by `_syncTabTriageChrome()` after BOTH render paths, never a DOM reorder (a state change is an incremental pass). ⚠️ `case` boxes ARE a DOM grouping, so the incremental path rebuilds whenever `_tabClusterLayout().key` changes; membership follows `_mobileOverviewCaseFor()` like the home screens. ⚠️ Drag only reorders within a group or box (`_isTabDropAcrossGroups()`). ⚠️ Named groups in the vertical rail win over both groupings. ⚠️ `classic` must leave no trace (no headings, no inline order, no boxes, no name split), and the ledger must not change the markup. ⚠️ Grouping is a render layer: `sessionOrder`, Alt+[ / Alt+], Ctrl+Tab and Alt+1..9 keep the canonical order, and only the phone swipe walks the drawn order (`nextSession({ visual: true })` through `_stripSessionOrder()`, the same `_visibleTabRows()` walk the strip's arrow keys use); an active session the list does not draw steps in at the first or last row, and an empty drawn list goes nowhere rather than falling back to a hidden session (`test/session-swipe-gesture.test.ts`). Tests: `test/tab-triage.test.ts`, `test/tab-clusters.test.ts`. → [architecture-invariants#tab-layouts-by-state-by-case-ledger](../../docs/architecture-invariants.md#tab-layouts-by-state-by-case-ledger)
+**Tab layouts** (`tabArrangement`, per-device, default `classic`; `state`/`case`/`ledger` are opt-in; Discussion #426): `state` (option C) splits the list into needs you / waiting / working / idle (idle is `quiet`: its heading stays as the row's anchor but draws no label; `tabStateOrder: 'urgent-last'` flips the order, needs you at the bottom): rows in the desktop header strip with left-aligned labels in a measured column (the brand sits over the strip's corner, so the rows after the first start under "Codeman"), sections in the flat rail and the sidebar, inline dividers on the tablet strip, group order with no headings on phones. `case` (option A) wraps each case's tabs in one `.tab-cluster` box and hides the `-<case>` of a generated name (`.tab-name-case`). `ledger` (option B) is a CSS-only grid on the desktop header strip. `classic` is the old strip; once it wraps on desktop it is L-shaped via `_syncTabStripCorner()` (the toolbar sits over its top-right corner and later rows run the full width under it, a strip already past its max-height keeps the plain wrap): ⚠️ `.tabs-corner` comes off before the wrap is measured, and the strip is `display: block` in that state, so flex-only rules do not apply to it there (`test/tab-strip-corner.browser.test.ts`). Pure cores: `CodemanTabTriage` and `CodemanTabClusters` (constants.js). ⚠️ `state` is the flex `order` property plus `aria-hidden` heading/break elements reconciled in place by `_syncTabTriageChrome()` after BOTH render paths, never a DOM reorder (a state change is an incremental pass). ⚠️ `case` boxes ARE a DOM grouping, so the incremental path rebuilds whenever `_tabClusterLayout().key` changes; membership follows `_mobileOverviewCaseFor()` like the home screens. ⚠️ Drag only reorders within a group or box (`_isTabDropAcrossGroups()`). ⚠️ Named groups in the vertical rail win over both groupings. ⚠️ `classic` must leave no trace (no headings, no inline order, no boxes, no name split), and the ledger must not change the markup. ⚠️ Grouping is a render layer: `sessionOrder`, Alt+[ / Alt+], Ctrl+Tab and Alt+1..9 keep the canonical order, and only the phone swipe walks the drawn order (`nextSession({ visual: true })` through `_stripSessionOrder()`, the same `_visibleTabRows()` walk the strip's arrow keys use); an active session the list does not draw steps in at the first or last row, and an empty drawn list goes nowhere rather than falling back to a hidden session (`test/session-swipe-gesture.test.ts`). Tests: `test/tab-triage.test.ts`, `test/tab-clusters.test.ts`. → [architecture-invariants#tab-layouts-by-state-by-case-ledger](../../docs/architecture-invariants.md#tab-layouts-by-state-by-case-ledger)
 
 **Header stats styles** (`headerStatsStyle`, per-device, desktop only, default `compact`; Discussion #426 option G): `tiles` / `compact` (two pills, a ring beside every value) / `classic` (as before), keyed on `data-header-stats` (pre-paint + `applyHeaderStatsStyle()`), forced to `classic` below 768px and in a solo window. ⚠️ The clustered styles MOVE `#connectionIndicator` into `#headerSystemStats` and `#planUsageChip` right after it; `classic` moves them back to comment anchors. ⚠️ WS joins the pill only while System Stats is shown. ⚠️ The extra parts (stat rings, tile words, plan rings, meters) are always rendered and hidden by default in CSS, which is what keeps `classic` unchanged; tile words are derived beside the connection descriptor, never added to it (`test/connection-indicator.test.ts` pins its shape). ⚠️ A tile is a three-row grid (label, value, bar) with pixel line-heights and the bundled JetBrains Mono; never lay the bar over a fixed-height tile (a taller system mono put the value on top of it). The WS tile's grid lives on the inner `.connection-tile`, because JS writes the indicator's `display` inline. Tests: `test/header-stats-style.test.ts`. → [architecture-invariants#header-stats-styles](../../docs/architecture-invariants.md#header-stats-styles)
 
diff --git a/src/web/public/app.js b/src/web/public/app.js
index 15f4ab3e..4acf9029 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -6996,7 +6996,12 @@ class CodemanApp {
       container.style.removeProperty('--tab-corner-width');
       container.style.removeProperty('--tab-corner-height');
     };
-    if (!on) {
+    // A strip past its max-height scrolls, and the float would scroll its tabs
+    // under the toolbar, which stays put: keep the plain wrap. The plain strip
+    // is measured here (updateTabOverflowMode took .tabs-corner off), before
+    // the class goes on; toggling it on a scrolled strip lets scroll anchoring
+    // move the strip.
+    if (!on || container.scrollHeight > container.clientHeight + 1) {
       off();
       return;
     }
@@ -7021,8 +7026,9 @@ class CodemanApp {
     const style = getComputedStyle(container);
     const strip = container.getBoundingClientRect();
     const box = right.getBoundingClientRect();
-    // The float sits in the strip's scrolled content, at its padding edge.
-    const contentTop = strip.top + parseFloat(style.paddingTop) - container.scrollTop;
+    // The float sits at the strip's content padding edge (the plain strip did
+    // not scroll, so scrollTop is 0).
+    const contentTop = strip.top + parseFloat(style.paddingTop);
     const contentLeft = strip.left + container.clientLeft + parseFloat(style.paddingLeft);
     const contentRight = strip.left + container.clientLeft + container.clientWidth - parseFloat(style.paddingRight);
     // A first tab that cannot fit beside the toolbar would drop the whole first
@@ -7040,6 +7046,9 @@ class CodemanApp {
     if (container.style.getPropertyValue('--tab-corner-height') !== height) {
       container.style.setProperty('--tab-corner-height', height);
     }
+    // A plain strip just under its max-height can pass it once the float is in:
+    // fall back to the plain strip, which fit.
+    if (container.scrollHeight > container.clientHeight + 1) off();
   }
 
   /**
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index a72465a2..1f27ea32 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -621,8 +621,9 @@ body {
    and only the rows beside the toolbar stop short of it. A flex line cannot
    be shortened on its own, so the strip lays its tabs out inline, around a
    float the size of the toolbar's box (measured into --tab-corner-width and
-   --tab-corner-height). The strip scrolls, so it contains the float and is
-   never shorter than the toolbar it now holds up. Inline tabs space their
+   --tab-corner-height). The strip is a scroll container, so it contains the
+   float and is never shorter than the toolbar it now holds up; a strip that
+   would actually scroll keeps the plain wrap instead. Inline tabs space their
    rows with a bottom margin (the old row-gap, lineage's included); the strip
    carries no font size of its own, so the whitespace between tabs is 0 wide. */
 .header:has(> .session-tabs-host > .session-tabs.tabs-corner) > .header-right {
diff --git a/test/tab-strip-corner.browser.test.ts b/test/tab-strip-corner.browser.test.ts
new file mode 100644
index 00000000..ba3065aa
--- /dev/null
+++ b/test/tab-strip-corner.browser.test.ts
@@ -0,0 +1,227 @@
+/**
+ * @fileoverview Real-Chromium coverage for the L-shaped header strip (`_syncTabStripCorner()`, app.js).
+ *
+ * What DOM emulation cannot answer: whether the float the strip measures really keeps every tab out from under
+ * the toolbar, whether the rows below it really run the header's full width, and when the strip falls back to
+ * the plain wrap. The real `<header>` from index.html, the shipping styles.css, constants.js and app.js are
+ * loaded into a page; `updateTabOverflowMode()` runs for real on a bare app instance.
+ *
+ * Port: none (page.route on a fake origin, no server).
+ */
+
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { chromium, type Browser, type Page } from 'playwright';
+
+const dir = resolve(import.meta.dirname, '../src/web/public');
+const read = (name: string) => readFileSync(resolve(dir, name), 'utf8');
+const styles = read('styles.css');
+const header = /<header class="header">[\s\S]*?<\/header>/.exec(read('index.html'))![0];
+const ORIGIN = 'http://app.test/';
+
+type Rect = { left: number; right: number; top: number; bottom: number };
+
+describe('L-shaped header tab strip (real Chromium)', () => {
+  let browser: Browser;
+  let p: Page;
+  beforeAll(async () => {
+    browser = await chromium.launch();
+  });
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  /** Open the real header with `tabs` classic tabs; `twoRows` is the manual two-rows setting. */
+  async function open(options: { tabs: number; width?: number; height?: number; twoRows?: boolean }) {
+    p = await browser.newPage({
+      viewport: { width: options.width ?? 1400, height: options.height ?? 700 },
+      deviceScaleFactor: 1,
+    });
+    await p.route(ORIGIN, (route) =>
+      route.fulfill({
+        contentType: 'text/html',
+        body:
+          '<!doctype html><html data-header-stats="compact" data-tab-orientation="horizontal" data-session-list="header">' +
+          `<head><style>${styles}</style></head><body>${header}</body></html>`,
+      })
+    );
+    await p.goto(ORIGIN);
+    await p.addScriptTag({
+      content:
+        'var MobileDetection = { isTouchDevice: () => false, getDeviceType: () => "desktop" }, KeyboardHandler = {}, ' +
+        'SwipeHandler = {}, VoiceInput = {}, DeepgramProvider = {}, NotificationManager = function(){};\n' +
+        read('constants.js') +
+        '\n' +
+        read('app.js') +
+        '\nwindow.CodemanApp = CodemanApp;',
+    });
+    await p.evaluate(
+      ({ tabs, twoRows }) => {
+        const w = window as any;
+        const app = Object.create(w.CodemanApp.prototype);
+        app.$ = (id: string) => document.getElementById(id);
+        app.sessions = new Map();
+        app.loadAppSettingsFromStorage = () => ({ tabTwoRows: twoRows });
+        app.getDefaultSettings = () => ({});
+        app.isSessionSidebarActive = () => false;
+        app.updateConnectionLines = () => undefined;
+        const strip = document.getElementById('sessionTabs')!;
+        if (twoRows) strip.classList.add('tabs-two-rows');
+        for (let i = 1; i <= tabs; i++) {
+          const id = `s${i}`;
+          app.sessions.set(id, { id, name: `session-${i}` });
+          strip.insertAdjacentHTML(
+            'beforeend',
+            `<div class="session-tab" data-id="${id}" role="tab"><span class="tab-name">session-${i}</span></div>`
+          );
+        }
+        w.__app = app;
+      },
+      { tabs: options.tabs, twoRows: !!options.twoRows }
+    );
+    await relayout();
+  }
+
+  const settled = () => p.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+  const relayout = async () => {
+    await p.evaluate(() => (window as any).__app.updateTabOverflowMode());
+    await settled();
+  };
+  const cornered = () => p.evaluate(() => document.getElementById('sessionTabs')!.classList.contains('tabs-corner'));
+  const toolbar = () =>
+    p.evaluate(() => document.getElementById('headerRight')!.getBoundingClientRect().toJSON()) as Promise<Rect>;
+  /** The visible part of each tab: the strip clips what it scrolls or overflows. */
+  const visibleTabs = () =>
+    p.evaluate(() => {
+      const strip = document.getElementById('sessionTabs')!.getBoundingClientRect();
+      return [...document.querySelectorAll('#sessionTabs > .session-tab')]
+        .map((el) => {
+          const r = el.getBoundingClientRect();
+          return {
+            left: Math.max(r.left, strip.left),
+            right: Math.min(r.right, strip.right),
+            top: Math.max(r.top, strip.top),
+            bottom: Math.min(r.bottom, strip.bottom),
+          };
+        })
+        .filter((r) => r.right > r.left && r.bottom > r.top);
+    }) as Promise<Rect[]>;
+  const overlapping = async () => {
+    const b = await toolbar();
+    return (await visibleTabs()).filter(
+      (r) => r.left < b.right && r.right > b.left && r.top < b.bottom && r.bottom > b.top
+    );
+  };
+
+  it('puts a wrapped classic desktop strip around the toolbar, with no tab under it', async () => {
+    await open({ tabs: 40 });
+    expect(await p.evaluate(() => document.getElementById('sessionTabs')!.classList.contains('tabs-auto-wrap'))).toBe(
+      true
+    );
+    expect(await cornered()).toBe(true);
+    expect(await overlapping()).toEqual([]);
+    await p.close();
+  });
+
+  it('runs a row below the toolbar past its left edge', async () => {
+    await open({ tabs: 40 });
+    const b = await toolbar();
+    const below = (await visibleTabs()).filter((r) => r.top >= b.bottom);
+    expect(below.length).toBeGreaterThan(0);
+    expect(Math.max(...below.map((r) => r.right))).toBeGreaterThan(b.left);
+    await p.close();
+  });
+
+  it('keeps the plain wrap when the first tab is too wide for the room beside the toolbar', async () => {
+    await open({ tabs: 40 });
+    await p.evaluate(() => {
+      const head = document.querySelector('.header')!.getBoundingClientRect();
+      const right = document.getElementById('headerRight')!.getBoundingClientRect();
+      const first = document.querySelector<HTMLElement>('#sessionTabs > .session-tab')!;
+      first.style.minWidth = first.style.width = `${Math.round(head.width - right.width / 2)}px`;
+    });
+    await relayout();
+    expect(await cornered()).toBe(false);
+    expect(await overlapping()).toEqual([]);
+    await p.close();
+  });
+
+  it('leaves a strip that fits on one row unwrapped and plain', async () => {
+    await open({ tabs: 3 });
+    expect(await p.evaluate(() => document.getElementById('sessionTabs')!.classList.contains('tabs-auto-wrap'))).toBe(
+      false
+    );
+    expect(await cornered()).toBe(false);
+    await p.close();
+  });
+
+  for (const arrangement of ['tabs-triage', 'tabs-clusters', 'tabs-ledger']) {
+    it(`never corners the ${arrangement} arrangement`, async () => {
+      await open({ tabs: 40 });
+      await p.evaluate((cls) => document.getElementById('sessionTabs')!.classList.add(cls), arrangement);
+      await relayout();
+      expect(await cornered()).toBe(false);
+      await p.close();
+    });
+  }
+
+  it('never corners a strip outside #sessionTabsHost', async () => {
+    await open({ tabs: 40 });
+    await p.evaluate(() => {
+      const elsewhere = document.createElement('div');
+      elsewhere.style.width = '600px';
+      document.body.appendChild(elsewhere);
+      elsewhere.appendChild(document.getElementById('sessionTabs')!);
+      document.getElementById('sessionTabs')!.classList.add('tabs-two-rows');
+    });
+    await relayout();
+    expect(await cornered()).toBe(false);
+    await p.close();
+  });
+
+  it('keeps the plain wrap for a wrapped strip past its max-height, so scrolling never puts tabs under the toolbar', async () => {
+    await open({ tabs: 50, width: 1100, height: 500 });
+    expect(await p.evaluate(() => document.getElementById('sessionTabs')!.classList.contains('tabs-auto-wrap'))).toBe(
+      true
+    );
+    expect(await cornered()).toBe(false);
+    await p.evaluate(() => (document.getElementById('sessionTabs')!.scrollTop = 60));
+    await settled();
+    expect(await overlapping()).toEqual([]);
+    await p.close();
+  });
+
+  it('keeps the plain wrap for a scrolled two-rows strip across a re-render', async () => {
+    await open({ tabs: 50, width: 1100, height: 500, twoRows: true });
+    await p.evaluate(() => (document.getElementById('sessionTabs')!.scrollTop = 60));
+    await relayout();
+    expect(await cornered()).toBe(false);
+    expect(await overlapping()).toEqual([]);
+    await p.evaluate(() => (document.getElementById('sessionTabs')!.scrollTop = 0));
+    await settled();
+    expect(await overlapping()).toEqual([]);
+    await p.close();
+  });
+
+  it('re-sizes the corner when the toolbar is narrowed with --header-right-width', async () => {
+    await open({ tabs: 40 });
+    const width = () =>
+      p.evaluate(() =>
+        parseFloat(document.getElementById('sessionTabs')!.style.getPropertyValue('--tab-corner-width'))
+      );
+    const before = await width();
+    await p.evaluate(() => {
+      const root = document.documentElement;
+      root.setAttribute('data-header-right-width', 'set');
+      root.style.setProperty('--header-right-width', '300px');
+    });
+    await relayout();
+    expect(await cornered()).toBe(true);
+    const after = await width();
+    expect(after).toBeLessThan(before);
+    expect(Math.abs(after - ((await toolbar()).width + 8))).toBeLessThan(16);
+    expect(await overlapping()).toEqual([]);
+    await p.close();
+  });
+});