@kabmo-labs/kabmo 0.0.1 → 0.2.0

package/src/client/components/common/brand-wordmark/Mark.tsx

@@ -0,0 +1,62 @@
+/**
+ * The `K` of the wordmark: the app icon itself.
+ *
+ * The wordmark used to spell its leading letter in the UI font and colour it
+ * orange, which made the K a coloured character rather than the brand mark.
+ * This is `public/icon.svg` — the same rounded green tile, the same three
+ * strokes at the same 7/64 weight, the same orange upper arm — drawn inline so
+ * the word starts with the logo.
+ *
+ * **The tile is sized to the cap band, not to the line box.** The icon's ink is
+ * 41 of its 64 units tall (0.64), so a tile of `1.5625 × cap` puts the K's own
+ * height exactly on the cap height — the letter does not shrink when it gains
+ * its plate. That makes the plate taller than the cap band, and a plate whose
+ * bottom sits on the baseline would lift the K half that difference; the
+ * `vertical-align` below shifts the whole box down by the overhang so the ink's
+ * bottom lands on the baseline and its top on the cap line. Both numbers are
+ * derived from the same two constants (`1.5625 = 1 / 0.64`, overhang
+ * `(1.5625 − 1) / 2`), so they cannot drift apart.
+ *
+ * Both are expressed in `cap`, which is the font's own cap height — the mark
+ * then aligns on every face the stack resolves to, and not just on the one this
+ * was measured against. `0.7046em` is that cap height on the current stack
+ * (10.5688px at 15px, 11.2734 at 16, 16.9102 at 24 — 0.70459 each) and the
+ * class carries it as the fallback for engines without the unit; an unsupported
+ * inline declaration is dropped, so the class applies there.
+ *
+ * `inline-block` is not decoration: Tailwind's preflight makes every `svg`
+ * `display: block`, and a block box inside the wordmark's inline flow breaks the
+ * word onto its own line.
+ *
+ * **The `a` is tucked into the plate by `0.28em` of negative right margin**, so
+ * the word reads as a lockup rather than a plate with a word after it. The limit
+ * is the icon's lower arm, which ends 2.1px inside the plate at 15px: measured
+ * at five depths, `-0.20em` left 2.12px of clearance to that stroke and
+ * `-0.28em` leaves 0.93px — the deepest value that still keeps the letter off
+ * the arm's round cap, while putting its ink 3.8px inside a 16.5px plate.
+ *
+ * The tile and cream are `--color-brand-tile` / `--color-brand-cream`, not theme
+ * tokens: the icon is the same mark in every palette, and on a dark canvas a
+ * themed plate would be a hole rather than a plate. They are set as inline
+ * `style` declarations rather than presentation attributes, because a `var()`
+ * in a presentation attribute is not resolved (measured: the rect computed to
+ * black and the stem to `none`).
+ */
+export function BrandMark({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      className={`inline-block h-[1.1009em] w-auto flex-none [vertical-align:-0.1982em] ${className}`}
+      style={{ height: '1.5625cap', verticalAlign: '-0.28125cap', marginRight: '-0.28em' }}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect width="64" height="64" rx="14" style={{ fill: 'var(--color-brand-tile)' }} />
+      <g fill="none" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 15v34" style={{ stroke: 'var(--color-brand-cream)' }} />
+        <path d="M20 32 42 15" style={{ stroke: 'var(--color-brand)' }} />
+        <path d="M20 32 42 49" style={{ stroke: 'var(--color-brand-cream)' }} />
+      </g>
+    </svg>
+  );
+}

package/src/client/components/common/brand-wordmark/index.test.tsx

@@ -70,24 +70,46 @@ describe('BrandWordmark', () => {
     expect([...runs.keys()]).toEqual(['K', 'ab', 'mo']);
   });
 
-  test('each run carries its own colour class', () => {
+  test('each run carries its own colour', () => {
     const runs = runsOf(mount());
-    // The K takes the icon's accent token, never a themed colour: the logo does
-    // not change hue with the palette, and the K is the letter that carries it.
-    expect(runs.get('K')?.className).toContain('text-brand');
+    // The K is the app icon, so its colours live on the SVG's own paint: the
+    // green plate, the cream strokes and the brand's orange upper arm.
+    const mark = runs.get('K')?.parentElement?.querySelector('svg');
+    expect(mark).toBeTruthy();
+    expect(mark?.getAttribute('aria-hidden')).toBe('true');
+    const tile = mark?.querySelector('rect');
+    expect(tile?.getAttribute('style')).toContain('--color-brand-tile');
+    const strokes = [...(mark?.querySelectorAll('path') ?? [])].map((p) => p.getAttribute('style'));
+    expect(strokes).toEqual([
+      'stroke: var(--color-brand-cream);',
+      'stroke: var(--color-brand);',
+      'stroke: var(--color-brand-cream);',
+    ]);
+    expect(runs.get('K')?.className).toContain('sr-only');
     // `ab` keeps the previous wordmark's gradient, as a gradient (not a fill).
     expect(runs.get('ab')?.className).toContain('bg-clip-text');
     expect(runs.get('ab')?.className).toContain('bg-gradient-to-r');
-    expect(runs.get('ab')?.className).toContain('from-orange-600');
-    expect(runs.get('ab')?.className).toContain('to-amber-500');
+    expect(runs.get('ab')?.className).toContain('from-amber-500');
+    expect(runs.get('ab')?.className).toContain('to-orange-600');
     // `mo` stays surface ink, which is what keeps it legible on dark palettes.
     expect(runs.get('mo')?.className).toContain('text-ink');
   });
 
+  test('the gradient span pays for the b overhang and mo is spaced off it', () => {
+    const runs = runsOf(mount());
+    // `background-clip: text` clips to the span's box, and the b's right
+    // sidebearing is negative — without the padding its last pixels vanish.
+    const ab = runs.get('ab')!;
+    expect(ab.style.paddingRight).toBe('0.06em');
+    expect(ab.style.marginRight).toBe('-0.06em');
+    // b→m is the tight pair in this face; the margin makes it match a→b.
+    expect(runs.get('mo')!.style.marginLeft).toBe('0.02em');
+  });
+
   test('a caller sets the size and cannot drop the wordmark classes', () => {
     const root = mount('text-2xl').firstElementChild as HTMLElement;
     expect(root.className).toContain('text-2xl');
-    expect(root.className).toContain('tracking-tighter');
+    expect(root.className).toContain('tracking-tight');
     expect(root.className).toContain('font-extrabold');
   });
 });

package/src/client/components/common/brand-wordmark/index.tsx

@@ -10,26 +10,48 @@
  * The word is drawn in three runs, each with its own colour, and the split is
  * deliberate rather than decorative:
  *
- * - **`K`** takes the icon's own accent (`--color-brand`, the orange of the
- *   logo's upper arm). It is the letter that carries the mark, so it uses the
- *   mark's colour exactly — a themed token here would make the K change hue
- *   with the palette while the icon never does.
- * - **`ab`** keeps the gradient the previous wordmark used for its leading run
- *   (`orange-600 → amber-500`), so the word still reads as a continuation of the
- *   product it was renamed from.
+ * - **`K`** is the icon's mark, not a letter: `BrandMark` draws the logo's three
+ *   strokes (ink stem and lower arm, `--color-brand` upper arm) so the word
+ *   begins with the same shape the app icon and the favicon carry.
+ * - **`ab`** keeps the previous wordmark's gradient (`amber-500 → orange-600`),
+ *   run from light to dark so the brightest end sits against the icon's dark
+ *   green plate: the `a` is tucked into that plate, and a dark `a` on dark green
+ *   is the one place the lockup would lose a letter. The warm end still lands
+ *   where the word returns to ink.
  * - **`mo`** is plain surface ink, the colour the trailing run has always had.
  *   Ink is what keeps that run legible on every palette, dark ones included.
  *
+ * Two measurements are encoded in the render, and both fix a letter that was
+ * being cut rather than merely crowded:
+ *
+ * - **`ab` carries a right padding of `0.06em` and an equal negative margin.**
+ *   `background-clip: text` clips the gradient to the span's box, and the `b`'s
+ *   right sidebearing is NEGATIVE — the glyph's ink ends past its advance — so
+ *   the last 2-3 px of the `b` were clipped away at 15px and the letter read as
+ *   if `m` were covering it. Measured on the live wordmark at 4x: the span's box
+ *   ended 0.5px past the `b`'s ink with the clip and 3px past it once padded, so
+ *   the padding pays for the overhang and the negative margin cancels it from
+ *   the layout. A tracked-out `tracking-tight` (`-0.025em`) was part of the same
+ *   crowding: at `-0.05em` the ink gap between `b` and `m` measured 0.017em.
+ * - **`mo` carries `margin-left: 0.02em`.** With the tracking loosened, `a`→`b`
+ *   measures 0.063em of ink gap while `b`→`m` measures 0.043em — the pair reads
+ *   tight because `m`'s left stem is a full vertical beside `b`'s bowl. The
+ *   margin brings the second gap to 0.063em, the same as the first, and leaves
+ *   `m`→`o` (0.042em, the font's own spacing) alone.
+ *
  * `className` carries the SIZE (each surface sets its own) and nothing else: the
  * colour split and the tracking are the brand and are not a per-call-site
  * decision.
  */
+import { BrandMark } from '@/client/components/common/brand-wordmark/Mark';
+
 export function BrandWordmark({ className = 'text-[15px]' }: { className?: string }) {
   return (
-    <span className={`font-extrabold tracking-tighter ${className}`}>
-      <span className="text-brand">K</span>
-      <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500">ab</span>
-      <span className="text-ink">mo</span>
+    <span className={`font-extrabold tracking-tight ${className}`}>
+      <BrandMark />
+      <span className="sr-only">K</span>
+      <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-600" style={{ paddingRight: '0.06em', marginRight: '-0.06em' }}>ab</span>
+      <span className="text-ink" style={{ marginLeft: '0.02em' }}>mo</span>
     </span>
   );
 }

package/src/client/components/common/brand-wordmark/wordmark-svg.test.ts

@@ -0,0 +1,88 @@
+/**
+ * The README wordmark (`public/kabmo-wordmark.svg`).
+ *
+ * It is a standalone asset — no app stylesheet, no font, no component — so a
+ * README can embed it from any renderer. That independence is exactly why it
+ * needs a test: nothing else in the repository reads the file, and every
+ * property below is one a hand edit would break silently.
+ *
+ * The numbers are the app's own, measured from `BrandWordmark`: a 100-unit cap
+ * height, the plate at `1.5625 x cap` (the icon's ink is 0.64 of its tile, so
+ * the K keeps its proportions), the `a` tucked 0.28em into the plate, the
+ * `b`→`m` gap widened 0.02em, and `tracking-tight` at -0.025em.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SOURCE = readFileSync(join(import.meta.dir, '../../../../../public/kabmo-wordmark.svg'), 'utf8');
+
+function attr(name: string): string {
+  const match = SOURCE.match(new RegExp(`${name}="([^"]+)"`));
+  if (!match) throw new Error(`missing ${name}`);
+  return match[1];
+}
+
+describe('public/kabmo-wordmark.svg', () => {
+  test('is a self-contained, accessible image', () => {
+    expect(SOURCE.startsWith('<?xml')).toBe(true);
+    expect(SOURCE).toContain('xmlns="http://www.w3.org/2000/svg"');
+    // A README's <img> gets its accessible name from the SVG itself when the
+    // renderer honours it; `alt` on the <img> is the other half, and both say
+    // the same thing.
+    expect(attr('role')).toBe('img');
+    expect(attr('aria-label')).toBe('Kabmo');
+    expect(SOURCE).toContain('<title>Kabmo</title>');
+    // No external dependency: a font reference or a fetched resource would fail
+    // in a renderer that sandboxes images. (The xmlns URI is a namespace name,
+    // never fetched, so it is not a dependency.)
+    expect(SOURCE).not.toMatch(/@font-face|(?:href|src)="https?:|url\(['"]?https?:/);
+  });
+
+  test('draws the icon plate at the size the K needs', () => {
+    const viewBox = attr('viewBox').split(/\s+/).map(Number);
+    expect(viewBox).toHaveLength(4);
+    const plate = SOURCE.match(/<rect width="([\d.]+)" height="([\d.]+)" y="([-\d.]+)"/);
+    expect(plate).toBeTruthy();
+    const [, w, h, y] = plate!.map(Number);
+    // 1.5625 x a 100-unit cap: the icon's ink is 41 of its 64 units, so this is
+    // the tile that puts the K exactly on the cap height.
+    expect(w).toBe(156.25);
+    expect(h).toBe(156.25);
+    // The ink (41/64 of the tile) is centred on the cap band, whose top is at
+    // -100 in this coordinate system.
+    const inkTop = y + (h - 100) / 2;
+    expect(Math.abs(inkTop + 100)).toBeLessThan(0.02);
+    // The viewBox is the artwork's own bounds, so a renderer adds no padding.
+    expect(Math.abs(viewBox[1] - y)).toBeLessThan(0.02);
+    expect(viewBox[3]).toBeCloseTo(156.25, 1);
+  });
+
+  test('keeps the brand colours, with one ink that works on any README', () => {
+    expect(SOURCE).toContain('fill="#0b5d3b"');       // plate
+    expect(SOURCE).toContain('stroke="#f7f4ea"');     // stem + lower arm
+    expect(SOURCE).toContain('stroke="#f26522"');     // upper arm
+    expect(SOURCE).toContain('stop-color="#f59e0b"'); // a, the light end
+    expect(SOURCE).toContain('stop-color="#ea580c"'); // b, the dark end
+    // One ink, not a media query. A README embeds this as an image, and inside
+    // an image `prefers-color-scheme` follows the CONTAINER only in Chromium —
+    // WebKit resolves it from the OS. Measured: GitHub dark on a light OS
+    // rendered #141310 on #0d1117 (1.02:1) in WebKit. #7e7a72 holds 4.27 on
+    // white and 4.43 on GitHub dark, so it needs no switch at all.
+    expect(SOURCE).toContain('.kabmo-mo { fill: #7e7a72; }');
+    // No media rule at all: the ink must not depend on how the renderer
+    // resolves a colour scheme, which differs between engines inside an image.
+    expect(SOURCE).not.toContain('@media');
+    expect(SOURCE).toContain('fill="#7e7a72"');
+  });
+
+  test('outlines the word, so no font is required', () => {
+    // Three strokes plus two outlined runs: `ab` and `mo`.
+    expect(SOURCE.match(/<path /g)?.length).toBe(5);
+    expect(SOURCE).toContain('fill="url(#kabmo-ab)"');
+    expect(SOURCE).toContain('class="kabmo-mo"');
+    // Outlines are curves, not text elements a renderer could re-flow.
+    expect(SOURCE).not.toContain('<text');
+  });
+});

package/src/client/components/common/header-controls/MoreMenu.tsx

@@ -0,0 +1,136 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone header's `⋯` menu: the two controls that do not need a slot.
+ *
+ * Reload and sign-out are rare actions, and each costs 36px of a header that is
+ * already sharing 320–412px between the wordmark, the session title and the
+ * four controls that ARE used mid-conversation (context, panel, and whatever a
+ * plugin contributes). Behind `⋯` they still cost 36px — but 36px ONCE, for
+ * both, against 72px standing in the row.
+ *
+ * This is the same answer the sidebar toolbar reached when its row ran out of
+ * room (`ToolbarOverflowMenu`): hiding a control outright makes it unreachable
+ * at one width, and letting the row overflow hides it behind a scroll with
+ * nothing on screen to say so. A menu keeps it one click away and names it in
+ * words rather than as a glyph.
+ *
+ * ## Sign-out confirms HERE, not in the row it came from
+ *
+ * `SignOutButton` is a two-press control because it sits a pixel from reload.
+ * A menu already costs an open and a click, so the confirmation is the first
+ * row press: the row turns into `Click again to sign out` and the second press
+ * ends the session. The safety property is unchanged — one stray click still
+ * cannot sign the user out — and focus never leaves the menu.
+ */
+
+import { Ellipsis, Lock, LockOpen, RefreshCw } from 'lucide-preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+import { logout, useAuthEnabled, useAuthState } from '@/client/hooks/ui/auth';
+
+const ROW_CLASS =
+  'w-full text-left px-3 py-2 flex items-center gap-2 transition-colors text-ink/75 hover:bg-ink/5 hover:text-ink cursor-pointer';
+
+export function HeaderMoreMenu() {
+  const authEnabled = useAuthEnabled();
+  const authState = useAuthState();
+  const [open, setOpen] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(rootRef, () => setOpen(false));
+
+  const canSignOut = authEnabled && authState !== 'required';
+  // The open flag is mirrored into a ref so the Escape listener can be bound
+  // ONCE, at mount. Binding it from an effect keyed on `open` lost the first
+  // keypress after the click that opened the menu — the effect had not run yet
+  // — and a menu that swallows Escape intermittently is worse than one that
+  // never does, because the user cannot tell which they are looking at.
+  const openRef = useRef(open);
+  openRef.current = open;
+
+  // A menu left open while the session ends elsewhere would offer an action for
+  // a session that no longer exists — the same rule `SignOutButton` applies.
+  useEffect(() => {
+    if (!canSignOut) setConfirming(false);
+  }, [canSignOut]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape' || !openRef.current) return;
+      setOpen(false);
+      setConfirming(false);
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  const signOut = async () => {
+    if (busy) return;
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    setBusy(true);
+    // `logout` reloads into the login screen; a failure still leaves no usable
+    // session, so there is nothing to recover here.
+    await logout();
+  };
+
+  return (
+    <div className="relative" ref={rootRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
+          open ? 'bg-ink/10 text-ink' : 'text-ink hover:bg-ink/5 active:bg-ink/10'
+        }`}
+        title="More actions"
+        aria-label="More actions"
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        <Ellipsis size={18} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1 w-44 bg-paper border border-ink/15 rounded-xl shadow-lg z-50 py-1 text-xs"
+        >
+          <button
+            type="button"
+            role="menuitem"
+            onClick={() => {
+              setOpen(false);
+              window.location.reload();
+            }}
+            className={ROW_CLASS}
+          >
+            <RefreshCw size={14} />
+            <span>Reload page</span>
+          </button>
+
+          {canSignOut && (
+            <button
+              type="button"
+              role="menuitem"
+              onClick={signOut}
+              disabled={busy}
+              className={ROW_CLASS}
+              aria-expanded={confirming}
+              data-confirming={confirming ? 'true' : undefined}
+            >
+              {confirming ? <LockOpen size={14} /> : <Lock size={14} />}
+              <span>{confirming ? 'Click again to sign out' : 'Sign out'}</span>
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/common/header-controls/index.test.tsx

@@ -157,7 +157,26 @@ function controlNames(): string[] {
   return names;
 }
 
-async function mount(layout: 'desktop' | 'mobile', props: { editor?: boolean; switch?: boolean } = {}): Promise<void> {
+/**
+ * Mount the cluster at a chosen viewport width.
+ *
+ * The width is load-bearing since the phone folds two controls into `⋯` only
+ * while the row cannot hold them (`MOBILE_FULL_ROW_PX`), so a case that does
+ * not say where it is mounted is asserting a layout nobody chose. happy-dom
+ * resolves `matchMedia` against `innerWidth`, so setting it is the same signal
+ * a real resize raises.
+ */
+async function mount(
+  layout: 'desktop' | 'mobile',
+  props: { editor?: boolean; switch?: boolean; width?: number } = {},
+): Promise<void> {
+  // happy-dom resolves `matchMedia` against `innerWidth`, so writing it is the
+  // same signal a real resize raises.
+  Object.defineProperty(window, 'innerWidth', {
+    value: props.width ?? 1024,
+    configurable: true,
+    writable: true,
+  });
   container = document.createElement('div');
   document.body.appendChild(container);
   await act(async () => {
@@ -205,12 +224,42 @@ describe('HeaderControls', () => {
     ]);
   });
 
-  test('mobile draws the same controls in the same order, minus the desktop-only pair', async () => {
-    await mount('mobile');
+  test('a narrow phone draws the row, minus the desktop-only pair', async () => {
+    await mount('mobile', { width: 390 });
 
     // Install is desktop-only by decision: a phone's browser never fires the
     // prompt (iOS has its own guide), so the control is not part of the phone's
     // row. The editor column does not exist on the phone at all.
+    //
+    // At 390px reload and sign-out are rows of the `⋯` menu rather than
+    // standing in the row: that is what pays for the wordmark and the session
+    // title (see `HeaderControls`' own doc).
+    expect(controlNames()).toEqual([
+      'Demo Stats',
+      'Context usage',
+      'Open Right Panel',
+      'More actions',
+    ]);
+  });
+
+  test('a narrow phone folds reload and sign-out into the ⋯ menu', async () => {
+    await mount('mobile', { width: 360 });
+
+    // Below `MOBILE_FULL_ROW_PX` the row cannot hold them beside a full-width
+    // picker, so they are rows of the `⋯` menu instead.
+    expect(controlNames()).toEqual([
+      'Demo Stats',
+      'Context usage',
+      'Open Right Panel',
+      'More actions',
+    ]);
+  });
+
+  test('a phone wide enough for the whole row draws every control, no menu', async () => {
+    // 500px is past both thresholds (400 open, 436 with the lock), so nothing
+    // is folded: the fold is a width, not a device class.
+    await mount('mobile', { width: 500 });
+
     expect(controlNames()).toEqual([
       'Demo Stats',
       'Reload page',
@@ -226,15 +275,32 @@ describe('HeaderControls', () => {
     render(null, container);
     container.remove();
 
-    await mount('mobile');
+    await mount('mobile', { width: 500 });
     const mobile = controlNames();
 
-    const shared = ['Reload page', 'Context usage', 'Sign out'];
-    const positions = (names: string[]) => shared.map((name) => names.indexOf(name));
-    expect(positions(desktop)).toEqual([2, 3, 4]);
-    expect(positions(mobile)).toEqual([1, 2, 3]);
-    // Each list is ordered, which is the property that was wrong.
-    expect(positions(desktop)).toEqual([...positions(desktop)].sort((a, b) => a - b));
-    expect(positions(mobile)).toEqual([...positions(mobile)].sort((a, b) => a - b));
+    // Context before the panel on both — the two controls a user presses while
+    // reading a run.
+    expect(desktop.indexOf('Context usage')).toBeLessThan(desktop.indexOf('Toggle Right Panel'));
+    expect(mobile.indexOf('Context usage')).toBeLessThan(mobile.indexOf('Open Right Panel'));
+  });
+
+  test('the folded controls stay one click away, not absent', async () => {
+    await mount('mobile', { width: 360 });
+
+    expect(controlNames()).not.toContain('Reload page');
+    expect(controlNames()).not.toContain('Sign out');
+
+    const trigger = container.querySelector('button[aria-label="More actions"]') as HTMLElement;
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    await act(async () => {
+      trigger.click();
+    });
+
+    const menu = container.querySelector('[role="menu"]');
+    expect(menu).toBeTruthy();
+    expect(menu!.textContent).toContain('Reload page');
+    expect(menu!.textContent).toContain('Sign out');
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
   });
 });

package/src/client/components/common/header-controls/index.tsx

@@ -4,10 +4,29 @@ import { ReloadPageButton } from '@/client/components/common/ReloadPageButton';
 import { SignOutButton } from '@/client/components/common/SignOutButton';
 import { ContextUsageButton } from '@/client/components/common/context-usage-button';
 import { HeaderPanelButtons } from '@/client/components/common/header-panel-buttons';
+import { HeaderMoreMenu } from '@/client/components/common/header-controls/MoreMenu';
+import { useAuthEnabled, useAuthState } from '@/client/hooks/ui/auth';
+import { useViewportAtLeast } from '@/client/hooks/ui/media-query';
 import { withChord } from '@/client/lib/ui/with-chord';
 
 export type HeaderLayout = 'desktop' | 'mobile';
 
+/**
+ * The narrowest phone header that still holds every control in the row.
+ *
+ * Measured against the real header, with a long session title so the picker is
+ * at its 150px cap and cannot absorb the difference:
+ *
+ * - open instance, reload in the row: the picker reaches 150px at **400px**;
+ * - with a UI password, reload + lock: at **436px**.
+ *
+ * Below those the picker would start truncating the session title to pay for a
+ * control that is pressed once a session, so those two move into `⋯` instead.
+ * A wider phone or a rotated one gets them back — the fold is not a device
+ * class, it is the width at which the row stops fitting.
+ */
+const MOBILE_FULL_ROW_PX = { without: 400, withSignOut: 436 } as const;
+
 interface HeaderControlsProps {
   layout: HeaderLayout;
   sessionId: string | null;
@@ -40,14 +59,30 @@ const ICON_SIZE: Record<HeaderLayout, number> = { desktop: 16, mobile: 18 };
  *
  *   1. Install (PWA)            — desktop only
  *   2. Plugin header slots
- *   3. Reload page
+ *   3. Reload page              — desktop; behind `⋯` on a phone
  *   4. Context usage
- *   5. Sign out (the lock)
+ *   5. Sign out (the lock)      — desktop; behind `⋯` on a phone
  *   6. Editor toggle            — desktop only
  *   7. Right panel
+ *   8. More actions (`⋯`)       — phone only, in the slot the two moved controls
+ *                                  left behind
  *
  * The dev-only layout switch sits AFTER that list: it is not part of the
  * product's navbar and must not push a listed control out of the agreed order.
+ *
+ * ## Why a narrow phone folds two of them into a menu
+ *
+ * The row is 320–412px wide and already shares it with the wordmark, the slash
+ * and the session title — the only functional thing in the left group. Reload
+ * and sign-out are rare (a reload is Cmd/Ctrl+R; a sign-out happens once a
+ * session), while context and the right panel are read and pressed mid-turn.
+ * Measured with a UI password set and all four standing in the row, the title
+ * got 89px at 390 and 19px at 320 — one letter and an ellipsis.
+ *
+ * The fold is therefore a WIDTH, not a layout: `MOBILE_FULL_ROW_PX` is the
+ * narrowest header that still fits every control beside a full 150px picker,
+ * and above it the phone draws the same row the desktop does. Nothing is
+ * permanently unreachable, and nothing is hidden at a width that can hold it.
  */
 export function HeaderControls({
   layout,
@@ -60,14 +95,27 @@ export function HeaderControls({
 }: HeaderControlsProps) {
   const iconClass = ICON_BUTTON_CLASS[layout];
   const size = ICON_SIZE[layout];
+  const authEnabled = useAuthEnabled();
+  const authState = useAuthState();
+  const signOutShown = authEnabled && authState !== 'required';
+  // Called unconditionally: a hook inside the ternary below would run in a
+  // different order on the two layouts.
+  const wideRow = useViewportAtLeast(signOutShown ? MOBILE_FULL_ROW_PX.withSignOut : MOBILE_FULL_ROW_PX.without);
+  const wideEnoughForAll = layout === 'desktop' || wideRow;
+  // A phone folds the two rare controls only while the row cannot hold them.
+  const folded = layout === 'mobile' && !wideEnoughForAll;
 
   return (
     <div className="flex items-center space-x-1">
       {layout === 'desktop' && <PWAInstallButton />}
       <HeaderPanelButtons layout={layout} />
-      <ReloadPageButton size={size} className={iconClass} />
+      {/* The cluster's ORDER is fixed; what changes on a narrow phone is that
+          reload and sign-out move behind `⋯`, which sits in the slot they
+          left. Nothing is hidden at a width that can hold it: measured, the
+          row fits every control at 400px open and 436px with the lock. */}
+      {(layout === 'desktop' || !folded) && <ReloadPageButton size={size} className={iconClass} />}
       <ContextUsageButton sessionId={sessionId} layout={layout} />
-      <SignOutButton size={size} className={iconClass} />
+      {(layout === 'desktop' || !folded) && <SignOutButton size={size} className={iconClass} />}
       {layout === 'desktop' && onToggleEditor && (
         <button
           type="button"
@@ -102,6 +150,7 @@ export function HeaderControls({
           {showRightPanel ? <PanelRightClose size={size} /> : <PanelRight size={size} />}
         </button>
       )}
+      {folded && <HeaderMoreMenu />}
       {layout === 'desktop' && onSwitchToMobile && (
         <button
           type="button"

package/src/client/components/common/session-state-provider/index.test.ts

@@ -25,7 +25,8 @@ import { h, render } from 'preact';
 import { act } from 'preact/test-utils';
 import { SessionStateProvider } from '@/client/components/common/session-state-provider/index';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
-import { flushSession } from '@/shared/lib/workspace/session-state/store';
+import { adoptPendingSession } from '@/client/hooks/chat/omp/pending-sessions';
+import { flushSession, forgetSession } from '@/shared/lib/workspace/session-state/store';
 
 const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
 /** The runner's own globals, restored on teardown — deleting them would strip natives (Event/CustomEvent) every later file needs. */const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
@@ -139,4 +140,24 @@ describe('SessionStateProvider on a pending session', () => {
     expect(calls.some((c) => c.url === '/api/sessions/real-9/state' && c.method === 'GET')).toBe(true);
     expect(calls.some((c) => c.method === 'POST')).toBe(false);
   });
+
+  test('a spawn adoption carries the panels the user opened onto the real id', async () => {
+    // The reported bug: open a new chat, open some right-panel views, send the
+    // first prompt — the spawn renames the session and everything the user had
+    // opened closed again. The provider migrates the pending slot in its OWN
+    // effect, which Preact runs AFTER its children's: each `useSessionState`
+    // copy had already re-read the (still empty) adopted slot, landed on its
+    // fallback, and never re-read because `ready` does not move across an
+    // adoption.
+    const pending = 'new-test-adopt';
+    const el = await mountPending(pending);
+    (el.querySelector('button') as HTMLButtonElement).click();
+    await act(async () => {});
+
+    adoptPendingSession(pending, 'omp-adopted', 1);
+    await switchTo(el, 'omp-adopted');
+
+    expect(el.textContent).toContain('git');
+    forgetSession('omp-adopted');
+  });
 });