diff --git a/config/test-suites.ts b/config/test-suites.ts
index c403421d..ae974542 100644
--- a/config/test-suites.ts
+++ b/config/test-suites.ts
@@ -28,6 +28,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/docs/architecture-invariants.md b/docs/architecture-invariants.md
index 74497c44..ebba7973 100644
--- a/docs/architecture-invariants.md
+++ b/docs/architecture-invariants.md
@@ -1047,6 +1047,8 @@ Tests: `test/terminal-touch-tap.test.ts`, `test/session-swipe-gesture.test.ts` (
 
 **Ledger.** CSS only, on `.tabs-ledger` inside `@media (min-width: 768px)` and the header host: the flat list on an auto-fill column grid with equal cells, mono type and a 3px status bar (`--ledger-bar`: yellow for a waiting alert, red for an action alert or an error, muted for stopped, exited and web tabs) instead of the dot. ⚠️ It must not change the markup (pinned: the ledger's innerHTML equals classic's); the rail, the sidebar and narrower strips show the plain list.
 
+**Classic, wrapped: the L-shaped strip.** Once a classic desktop strip in the header host wraps (`tabs-auto-wrap`, or the manual `tabs-two-rows`), `_syncTabStripCorner()` (app.js) adds `.tabs-corner`: `#headerRight` goes `position: absolute` over the strip's top-right corner and the strip runs the header's full width, so only the row(s) beside the toolbar stop short of it and every later row uses the width under it. A flex line cannot be shortened on its own, so in that state the strip is `display: block` with `inline-flex` tabs flowing around a `::before` float sized from the toolbar's box (`--tab-corner-width` / `--tab-corner-height`); the old `row-gap` (lineage's `--lineage-row-gap` included) becomes the tabs' bottom margin and the bottom padding shrinks by the same amount, so row spacing and lineage routing room are unchanged. ⚠️ `updateTabOverflowMode()` removes `.tabs-corner` BEFORE it measures the wrap (the corner takes the toolbar out of the header's flow, which widens the strip), so the wrap is still judged against the one-row layout and an unwrapped strip looks exactly as before. ⚠️ Flex-only rules do not apply to the strip in that state. ⚠️ A strip that already scrolls (past `--tab-strip-max-height`) keeps the plain wrap, checked on the plain strip before the class goes on: the float scrolls with the tabs while the toolbar stays put, and toggling the class on a scrolled strip lets scroll anchoring move it; a strip pushed past the max-height by the float itself falls back too. A first tab too wide for the room beside the toolbar also falls back (the whole first line would drop below the toolbar). A `ResizeObserver` on the toolbar re-decides wrap and corner and redraws the connection lines when a reading or the header divider resizes it without a tab render. Scope: classic arrangement, desktop, header host only; state/case/ledger, the sidebar and the vertical rail never get the class (`applySessionListLayout()` drops it when the strip moves). Tests: `test/tab-strip-corner.browser.test.ts` (browser suite).
+
 With `classic` nothing is left behind: no headings, no breaks, no inline order, no boxes, no name split, no arrangement class. A stale cached mobile-overview.js degrades every grouping to the flat strip. Tests: `test/tab-triage.test.ts`, `test/tab-clusters.test.ts`.
 
 ### Header stats styles
diff --git a/src/web/CLAUDE.md b/src/web/CLAUDE.md
index b6aae1eb..c04ac9c4 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 f7cefd1e..255132a6 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -5950,7 +5950,7 @@ class CodemanApp {
     // tabs-auto-wrap is measured, not derived from settings — updateTabOverflowMode()
     // drops it in sidebar mode, but drop it here too so nothing paints wrapped
     // for a frame before the next measure.
-    if (sidebar) tabsEl.classList.remove('tabs-auto-wrap');
+    if (sidebar) tabsEl.classList.remove('tabs-auto-wrap', 'tabs-corner');
     // Collapse/expand changes whether the filter is reachable, so re-evaluate it
     // here too — not only at the render tails.
     this.applySidebarFilter(this._sidebarFilter);
@@ -6941,7 +6941,14 @@ class CodemanApp {
   updateTabOverflowMode() {
     const container = this.$('sessionTabs');
     if (!container) return;
+    // The corner takes the toolbar out of the header's flow, which widens the
+    // strip, so it goes before the wrap is measured and comes back once decided.
+    container.classList.remove('tabs-corner');
+    this._decideTabOverflow(container);
+    this._syncTabStripCorner(container);
+  }
 
+  _decideTabOverflow(container) {
     // Lineage routing room (session-lineage.js) changes the strip's padding and
     // row gap, so it is decided before the wrap is measured below.
     this._syncLineageGutter?.();
@@ -7003,6 +7010,87 @@ class CodemanApp {
     container.classList.toggle('tabs-auto-wrap', shouldWrap);
   }
 
+  /**
+   * L-shaped header strip: once the classic strip wraps, the toolbar
+   * (#headerRight) sits over the strip's top-right corner (styles.css,
+   * `.tabs-corner`) and the rows under the first one run the header's full
+   * width beneath it. The strip keeps the toolbar's corner clear with a float
+   * sized here, from the toolbar's own box, so a toolbar that wraps onto more
+   * lines (header-divider.js) or gains a reading keeps every tab out from
+   * under it. The grouped arrangements (state, case, ledger) lay their rows
+   * out themselves and keep the plain strip.
+   */
+  _syncTabStripCorner(container) {
+    const right = this.$('headerRight');
+    const on =
+      !!right &&
+      container.offsetParent !== null &&
+      !!container.parentElement?.classList.contains('session-tabs-host') &&
+      (container.classList.contains('tabs-auto-wrap') || container.classList.contains('tabs-two-rows')) &&
+      !container.classList.contains('tabs-triage') &&
+      !container.classList.contains('tabs-clusters') &&
+      !container.classList.contains('tabs-ledger') &&
+      MobileDetection.getDeviceType() === 'desktop';
+    const off = () => {
+      container.classList.remove('tabs-corner');
+      container.style.removeProperty('--tab-corner-width');
+      container.style.removeProperty('--tab-corner-height');
+    };
+    // 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;
+    }
+    container.classList.add('tabs-corner');
+    if (!this._tabCornerObserver && typeof ResizeObserver !== 'undefined') {
+      let frame = 0;
+      // A toolbar that changes size (a reading arrives, the divider settles)
+      // moves the tabs without a render: re-decide the wrap and the corner, and
+      // redraw the lineage routes that follow the tabs.
+      this._tabCornerObserver = new ResizeObserver(() => {
+        if (frame) return;
+        frame = requestAnimationFrame(() => {
+          frame = 0;
+          const strip = this.$('sessionTabs');
+          if (!strip || !/\btabs-(corner|auto-wrap|two-rows)\b/.test(strip.className)) return;
+          this.updateTabOverflowMode();
+          this.updateConnectionLines?.();
+        });
+      });
+      this._tabCornerObserver.observe(right);
+    }
+    const style = getComputedStyle(container);
+    const strip = container.getBoundingClientRect();
+    const box = right.getBoundingClientRect();
+    // 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
+    // line below it and leave an empty band: keep the plain strip instead.
+    const firstTab = container.querySelector(':scope > .session-tab');
+    if (firstTab && box.left - 8 - contentLeft < firstTab.offsetWidth + 2) {
+      off();
+      return;
+    }
+    const width = `${Math.max(0, Math.ceil(contentRight - box.left + 8))}px`;
+    const height = `${Math.max(0, Math.ceil(box.bottom - contentTop))}px`;
+    if (container.style.getPropertyValue('--tab-corner-width') !== width) {
+      container.style.setProperty('--tab-corner-width', width);
+    }
+    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();
+  }
+
   /**
    * True when a case cluster in the header strip wraps inside its own box: a case
    * wider than the whole strip (styles.css caps a box at the strip's width). The
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index e73007cd..cd9039c0 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -616,6 +616,45 @@ body {
   padding-left: var(--lineage-spine-channel);
 }
 
+/* L-shaped strip (`_syncTabStripCorner()`, app.js): a wrapped classic strip
+   runs the header's full width, the toolbar sits over its top-right corner,
+   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 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 {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.75rem;
+}
+
+.session-tabs-host > .session-tabs.tabs-corner {
+  display: block;
+  font-size: 0;
+  padding-bottom: 0;
+}
+
+.session-tabs-host > .session-tabs.tabs-corner::before {
+  content: '';
+  float: right;
+  width: var(--tab-corner-width, 0px);
+  height: var(--tab-corner-height, 0px);
+}
+
+.session-tabs-host > .session-tabs.tabs-corner > .session-tab {
+  display: inline-flex;
+  vertical-align: top;
+  margin: 0 2px var(--lineage-row-gap, 4px) 0;
+}
+
+.session-tabs-host > .session-tabs.lineage-tree.tabs-corner {
+  padding-bottom: calc(var(--lineage-bottom-room) - var(--lineage-row-gap));
+}
+
 .session-tabs::-webkit-scrollbar {
   width: 4px;
   height: 0;
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();
+  });
+});