fix(header): settle the divider when readings change, keep density to the header layout, restore the chosen width

test/header-divider.browser.test.ts

@@ -1,4 +1,8 @@
-/** Real Chromium: dragging the header divider resizes the toolbar and wraps it onto a second line. */
+/**
+ * Real Chromium, against the real header markup from index.html and the real styles.css: dragging the divider
+ * resizes the toolbar and wraps it onto a second line, the readings shed detail as it narrows, nothing pokes
+ * out past the divider (even for content that arrives later), and none of it applies where the handle is hidden.
+ */
 import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
@@ -7,19 +11,28 @@ import { chromium, type Browser, type Page } from 'playwright';
 const dir = resolve(import.meta.dirname, '../src/web/public');
 const styles = readFileSync(resolve(dir, 'styles.css'), 'utf8');
 const controller = readFileSync(resolve(dir, 'header-divider.js'), 'utf8');
+const header = /<header class="header">[\s\S]*?<\/header>/.exec(readFileSync(resolve(dir, 'index.html'), 'utf8'))![0];
 
-const page = (root = 'data-tab-orientation="horizontal" data-session-list="header"') => `<!doctype html>
-<html ${root}><head><style>${styles}</style></head><body>
-  <div class="app"><header class="header">
-    <div class="header-brand"><span class="logo">Codeman</span></div>
-    <div class="session-tabs-host"><div class="session-tabs" id="sessionTabs"></div></div>
-    <div class="header-right" id="headerRight">
-      <div class="header-plan-usage" style="width:230px;flex:none">usage</div>
-      <div class="header-system-stats" style="width:200px;flex:none">stats</div>
-      <button class="btn-icon-header">a</button><button class="btn-icon-header">b</button>
-    </div>
-  </header></div>
-</body></html>`;
+const CHIP =
+  '<span class="pu-row"><span data-short="CL" class="pu-provider">Claude</span><span class="pu-windows">' +
+  '<span class="pu-win"><span class="pu-ring"></span><span class="pu-label">5h</span><span class="pu-val">49%</span></span>' +
+  '<span class="pu-win"><span class="pu-ring"></span><span class="pu-label">7d</span><span class="pu-val">72%</span></span>' +
+  '</span></span><span class="pu-row"><span data-short="CP" class="pu-provider">Copilot</span><span class="pu-windows">' +
+  '<span class="pu-win"><span class="pu-ring"></span><span class="pu-label">mo</span><span class="pu-val">81%</span></span></span></span>';
+
+const ORIGIN = 'http://app.test/';
+
+/** The default layout attributes, with any `name="value"` in `extra` replacing the matching default. */
+function rootAttrs(extra = '') {
+  const attrs = new Map([
+    ['data-header-stats', 'compact'],
+    ['data-tab-orientation', 'horizontal'],
+    ['data-session-list', 'header'],
+  ]);
+  for (const [, name, value] of extra.matchAll(/([\w-]+)="([^"]*)"/g)) attrs.set(name, value);
+  return [...attrs].map(([name, value]) => `${name}="${value}"`).join(' ');
+}
+type Attrs = { root?: string; body?: string };
 
 describe('header divider (real Chromium)', () => {
   let browser: Browser;
@@ -31,100 +44,213 @@ describe('header divider (real Chromium)', () => {
     await browser.close();
   });
 
-  async function open(html: string) {
-    p = await browser.newPage({ viewport: { width: 1400, height: 600 } });
-    await p.setContent(html);
+  /** Open the real header; `stored` is the width kept from an earlier visit, `chip` fills the plan-usage chip. */
+  async function open(options: { root?: string; body?: string; stored?: number; chip?: boolean; width?: number } = {}) {
+    p = await browser.newPage({ viewport: { width: options.width ?? 1400, height: 600 } });
+    await p.route(ORIGIN, (route) =>
+      route.fulfill({
+        contentType: 'text/html',
+        body: `<!doctype html><html ${rootAttrs(options.root)}><head><style>${styles}</style></head><body class="${options.body ?? ''}">${header}</body></html>`,
+      })
+    );
+    await p.goto(ORIGIN);
+    if (options.stored)
+      await p.evaluate((w) => localStorage.setItem('codeman-header-right-width', String(w)), options.stored);
+    if (options.chip) {
+      await p.evaluate((html) => {
+        const chip = document.getElementById('planUsageChip')!;
+        chip.classList.remove('header-plan-usage--hidden');
+        chip.innerHTML = html;
+      }, CHIP);
+    }
     await p.addScriptTag({ content: controller });
   }
   const box = (sel: string) => p.locator(sel).evaluate((el) => el.getBoundingClientRect().toJSON());
-
-  it('narrows the toolbar and wraps it onto a second line when dragged right, and resets on double-click', async () => {
-    await open(page());
-    const before = await box('#headerRight');
+  const settled = () => p.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))));
+  const dragTo = async (toolbarWidth: number) => {
     const handle = await box('.header-divider');
-    const y = handle.top + handle.height / 2;
-    await p.mouse.move(handle.left + 6, y);
+    const head = await box('.header');
+    await p.mouse.move(handle.left + 6, handle.top + 10);
     await p.mouse.down();
-    await p.mouse.move(handle.left + 6 + 330, y, { steps: 6 });
+    await p.mouse.move(head.right - 12 - toolbarWidth, handle.top + 10, { steps: 6 });
     await p.mouse.up();
-    const after = await box('#headerRight');
-    expect(after.width).toBeLessThan(before.width - 250);
-    expect(after.height).toBeGreaterThan(before.height + 10);
-    // setContent gives an opaque origin: storage is blocked, and the drag must still work.
-    expect(await p.evaluate(() => document.documentElement.style.getPropertyValue('--header-right-width'))).not.toBe(
-      ''
-    );
-    const tabs = await box('.session-tabs-host');
-    expect(tabs.width).toBeGreaterThan(before.width);
-
-    await p.locator('.header-divider').dblclick();
-    const reset = await box('#headerRight');
-    expect(Math.abs(reset.width - before.width)).toBeLessThan(2);
-    expect(await p.evaluate(() => document.documentElement.style.getPropertyValue('--header-right-width'))).toBe('');
-    await p.close();
-  });
-
-  it('drops usage labels, then provider names, then percentages as the toolbar narrows', async () => {
-    const chip =
-      '<div class="header-plan-usage" id="planUsageChip"><span class="pu-row"><span data-short="CL" class="pu-provider">Claude</span>' +
-      '<span class="pu-windows"><span class="pu-win"><span class="pu-ring"></span><span class="pu-label">5h</span><span class="pu-val">49%</span></span></span></span></div>';
-    await open(page('data-header-stats="compact" data-tab-orientation="horizontal" data-session-list="header"'));
-    await p.evaluate((html) => document.getElementById('headerRight')!.insertAdjacentHTML('beforeend', html), chip);
-    const visible = (sel: string) => p.locator(sel).isVisible();
-    expect(await visible('.pu-label')).toBe(true);
-    const sizes: Array<[number, string]> = [
-      [450, 'tight'],
-      [330, 'dense'],
-      [200, 'tiny'],
-    ];
-    for (const [width, density] of sizes) {
-      const handle = await box('.header-divider');
-      const header = await box('.header');
-      await p.mouse.move(handle.left + 6, handle.top + handle.height / 2);
-      await p.mouse.down();
-      await p.mouse.move(header.right - width - 12, handle.top + handle.height / 2, { steps: 5 });
-      await p.mouse.up();
-      expect(await p.evaluate(() => document.documentElement.dataset.headerDensity)).toBe(density);
-    }
-    expect(await visible('.pu-label')).toBe(false);
-    expect(await visible('.pu-val')).toBe(false);
-    expect(await p.locator('.pu-provider').evaluate((el) => getComputedStyle(el, '::after').content)).toBe('"CL"');
-    await p.close();
-  });
-
-  it('stops the divider at the widest reading so nothing pokes out past it', async () => {
-    await open(page());
-    const handle = await box('.header-divider');
-    const header = await box('.header');
-    await p.mouse.move(handle.left + 6, handle.top + handle.height / 2);
-    await p.mouse.down();
-    await p.mouse.move(header.right - 20, handle.top + handle.height / 2, { steps: 8 });
-    await p.mouse.up();
-    const right = await box('#headerRight');
-    const edge = right.left + 1;
+    await settled();
+  };
+  const readingsInside = async () => {
+    const edge = (await box('#headerRight')).left + 1;
     const lefts = await p
       .locator('#headerRight > :not(.header-divider)')
-      .evaluateAll((els) => els.map((el) => el.getBoundingClientRect().left));
-    for (const left of lefts) expect(left).toBeGreaterThanOrEqual(edge);
+      .evaluateAll((els) =>
+        els.filter((el) => (el as HTMLElement).offsetParent !== null).map((el) => el.getBoundingClientRect().left)
+      );
+    return { edge, lefts };
+  };
+  const display = (sel: string) =>
+    p
+      .locator(sel)
+      .first()
+      .evaluate((el) => getComputedStyle(el).display);
+
+  it('narrows the toolbar and wraps it when dragged right, and resets on double-click', async () => {
+    await open({ chip: true });
+    const before = await box('#headerRight');
+    await dragTo(330);
+    const after = await box('#headerRight');
+    expect(after.width).toBeLessThan(before.width - 100);
+    expect(after.height).toBeGreaterThan(before.height + 10);
+    expect((await box('.session-tabs-host')).width).toBeGreaterThan(before.width / 2);
+    expect(await p.evaluate(() => localStorage.getItem('codeman-header-right-width'))).not.toBeNull();
+    await p.locator('.header-divider').dblclick();
+    expect(Math.abs((await box('#headerRight')).width - before.width)).toBeLessThan(2);
+    expect(await p.evaluate(() => localStorage.getItem('codeman-header-right-width'))).toBeNull();
     await p.close();
   });
 
-  it('resizes from the keyboard', async () => {
-    await open(page());
+  it('resizes from the keyboard and tells the tab strip to re-measure', async () => {
+    await open({ chip: true });
+    await p.evaluate(() => {
+      (window as any).relayouts = 0;
+      (window as any).app = {
+        updateTabOverflowMode: () => (window as any).relayouts++,
+        updateConnectionLines: () => {},
+      };
+    });
     const before = await box('#headerRight');
     await p.locator('.header-divider').focus();
     await p.keyboard.press('ArrowRight');
     await p.keyboard.press('ArrowRight');
-    const after = await box('#headerRight');
-    expect(after.width).toBeLessThan(before.width - 20);
+    expect((await box('#headerRight')).width).toBeLessThan(before.width - 20);
+    expect(await p.evaluate(() => (window as any).relayouts)).toBeGreaterThanOrEqual(2);
     await p.keyboard.press('Home');
     expect(Math.abs((await box('#headerRight')).width - before.width)).toBeLessThan(2);
     await p.close();
   });
 
-  it('is hidden when the tabs live in the sidebar', async () => {
-    await open(page('data-tab-orientation="horizontal" data-session-list="sidebar"'));
-    expect(await p.locator('.header-divider').isVisible()).toBe(false);
+  it('stops the divider at the widest reading so nothing pokes out past it', async () => {
+    await open({ chip: true });
+    await dragTo(20);
+    const { edge, lefts } = await readingsInside();
+    for (const left of lefts) expect(left).toBeGreaterThanOrEqual(edge);
+    await p.close();
+  });
+
+  it('keeps a reading inside the divider when it arrives after the width was applied', async () => {
+    await open({ stored: 160 });
+    await settled();
+    await p.evaluate((html) => {
+      const chip = document.getElementById('planUsageChip')!;
+      chip.classList.remove('header-plan-usage--hidden');
+      chip.innerHTML = html;
+    }, CHIP);
+    await settled();
+    const { edge, lefts } = await readingsInside();
+    for (const left of lefts) expect(left).toBeGreaterThanOrEqual(edge);
+    await p.close();
+  });
+
+  it('keeps a wide reading that is switched on later inside the divider', async () => {
+    await open({ stored: 160 });
+    await settled();
+    await p.evaluate(() => {
+      const wide = document.createElement('div');
+      wide.id = 'lateReading';
+      wide.style.cssText = 'width:320px;flex:none;height:24px';
+      document.getElementById('headerRight')!.appendChild(wide);
+    });
+    await settled();
+    const { edge, lefts } = await readingsInside();
+    for (const left of lefts) expect(left).toBeGreaterThanOrEqual(edge);
+    expect((await box('#headerRight')).width).toBeGreaterThanOrEqual(320);
+    await p.close();
+  });
+
+  it('sheds labels, then provider names, then percentages as the toolbar narrows', async () => {
+    await open({ chip: true });
+    expect(await display('.pu-label')).not.toBe('none');
+    const seen: string[] = [];
+    for (const width of [450, 330, 200]) {
+      await dragTo(width);
+      seen.push((await p.evaluate(() => document.documentElement.dataset.headerDensity)) ?? '');
+    }
+    expect(seen).toEqual(['tight', 'dense', 'tiny']);
+    expect(await display('.pu-label')).toBe('none');
+    expect(await display('.pu-val')).toBe('none');
+    expect(
+      await p
+        .locator('.pu-provider')
+        .first()
+        .evaluate((el) => getComputedStyle(el, '::after').content)
+    ).toBe('"CL"');
+    await p.close();
+  });
+
+  for (const style of ['tiles', 'classic']) {
+    it(`follows the density steps under the ${style} style, keeping values at the narrowest step`, async () => {
+      await open({ chip: true, root: `data-header-stats="${style}"` });
+      await dragTo(330);
+      expect(
+        await p
+          .locator('.pu-provider')
+          .first()
+          .evaluate((el) => getComputedStyle(el).fontSize)
+      ).toBe('0px');
+      await dragTo(200);
+      expect(await display('.pu-val')).not.toBe('none');
+      await p.close();
+    });
+  }
+
+  for (const [name, root, body] of [
+    ['the sidebar layout', 'data-session-list="sidebar"', ''],
+    ['the vertical rail', 'data-tab-orientation="vertical"', ''],
+    ['a solo window', '', 'solo-mode'],
+  ] as const) {
+    it(`leaves a stored narrow width alone in ${name}, where the handle is hidden`, async () => {
+      await open({ chip: true, stored: 180, root, body });
+      // the stored width is read at init, which already ran inside open() before storage was set
+      await p.evaluate(() => localStorage.setItem('codeman-header-right-width', '180'));
+      await p.reload();
+      await p.addScriptTag({ content: controller });
+      await settled();
+      expect(await p.locator('.header-divider').isVisible()).toBe(false);
+      expect(await display('.stat-label')).not.toBe('none');
+      expect(await p.locator('.header-right').evaluate((el) => getComputedStyle(el).flexBasis)).not.toBe('180px');
+      await p.close();
+    });
+  }
+
+  it('does not pin the toolbar to a stored width on a narrow viewport', async () => {
+    await open({ chip: true, width: 700 });
+    await p.evaluate(() => localStorage.setItem('codeman-header-right-width', '300'));
+    await p.reload();
+    await p.addScriptTag({ content: controller });
+    await settled();
+    expect(await p.locator('.header-right').evaluate((el) => getComputedStyle(el).flexBasis)).not.toBe('300px');
+    await p.close();
+  });
+
+  it('gets the chosen width back when the window shrinks and grows again', async () => {
+    await open({ chip: true });
+    await dragTo(700);
+    const chosen = (await box('#headerRight')).width;
+    await p.setViewportSize({ width: 1000, height: 600 });
+    await settled();
+    expect((await box('#headerRight')).width).toBeLessThan(chosen);
+    await p.setViewportSize({ width: 1400, height: 600 });
+    await settled();
+    expect(Math.abs((await box('#headerRight')).width - chosen)).toBeLessThan(2);
+    await p.close();
+  });
+
+  it('clears the dragging state when the pointer capture is lost', async () => {
+    await open({ chip: true });
+    const handle = await box('.header-divider');
+    await p.mouse.move(handle.left + 6, handle.top + 10);
+    await p.mouse.down();
+    expect(await p.evaluate(() => document.body.classList.contains('header-divider-dragging'))).toBe(true);
+    await p.locator('.header-divider').evaluate((el) => el.dispatchEvent(new PointerEvent('lostpointercapture')));
+    expect(await p.evaluate(() => document.body.classList.contains('header-divider-dragging'))).toBe(false);
+    await p.mouse.up();
     await p.close();
   });
 });