[ZacxDev]

Targets main. It builds on the session switcher on Terminal views (#393, merged as 3cce631).

The operator asked for three changes to the bottom bar: icons instead of each view's text label, the pin moved into a three-dots menu, and less padding so more of the session pills show.

What changed

• The view button is an icon. Clock = Recent, bell = Waiting, pin = Pins, grid = All. It is a 44×44 target around a 32px face.

  • The server renders all four icons. The inline script toggles hidden before paint, so a stored view shows its own icon with no flash and no shift.
  • Each icon is role=img with an aria-label and a title. The button keeps its Showing <view> sessions; choose a view name and title.
  • The view menu keeps its words and shows each view's icon beside them.

• The pin moved into a ⋯ menu. The standalone pin button is gone. #switcher-more-btn, at the bar's right end after the search, opens a popover role=menu (#switcher-more).

  • It uses popovertarget, so it opens without script.
  • It is placed above its button and closes once used.
  • Escape closes it and returns focus to the ⋯; Tab also closes it. An arrow key on the button opens it.
  • The pin form is unchanged: same action, fields, view=switcher, back, htmx answer and out-of-band rows. There is still one #switcher-pin per page.
  • The item is role=menuitem with data-pinned. It no longer uses aria-pressed, which ARIA does not allow on menuitem.
  • Pages with no page session get no ⋯.

• Tighter bar, 44×44 targets kept (operator decision). The view, search and ⋯ buttons stay w-11 h-11. The room comes from three places:

  • the pinned bar has no inset beyond env(safe-area-inset-left/right/bottom);
  • the bar's row has no gaps (each 44px box already sets its 32px face 6px in);
  • pills use px-2/gap-1.

  switcherHeight/switcherRoom are unchanged. Pills still show their whole label, and the row still scrolls sideways.

Measured at 390px (the shown row's clientWidth)

page	main before this PR	this PR
Terminal view (bar spans the screen)	182px	258px
agent chat page (bar inside its pane)	174px	226px

Tests

• internal/ui/switcher_compact_test.go has 3 tests:
  • each view's icon and its accessible name;
  • the ⋯ menu holds the pin form, with its action, fields and back;
  • no standalone pin, and no ⋯ when there is no page session.
• A 390×844 e2e test in composer-switcher.spec.ts covers:
  • the row width (≥ 210; it was 174 before this PR);
  • the icon changing with the view while the button stays put;
  • ⋯ → Pin → this session appears in the Pins view, then Unpin.
• Red before the change (c0ee49c, whose bar is the same as main's before this PR), green here.
• pins.spec.ts asserts the Terminal view's row is ≥ 240px.
• go test ./internal/ui/ ./internal/api/ against a fresh private Postgres 16: 3305 PASS, 0 FAIL, 0 SKIP.
• go vet ./... and gofmt are clean, and make css-check matches.
• e2e: 129 passed, 0 failed across 9 specs, then pins and composer-switcher again after the last comment edits (18 passed).
  • Per spec: layout 4, pins 10, switcher-search 10, composer-switcher 8, agents-switcher 18, cls 21, cls-long-transcript 43, terminal 9, terminal-overflow 6.
  • CLS is 0 or 0.00026 everywhere outside the positive controls.

Not verified

• No e2e test covers the ⋯ menu's keys (an arrow on the button to open it, Escape, Tab).
• The no-script path (opening the popover, then the form post and its 303 to back) was not run in a browser. A Go test covers the 303.
• The bar no longer shows whether this session is pinned until you open ⋯. The Pins view still shows it.

🤖 Generated with Claude Code

[ZacxDev]

Round 0 (requirements & deletion): requirement questioned (Q1, forcing: user). Ledger: requirements 9 (unattributed 2) · deletion candidates 3.

D1 — the ⋯ menu's ArrowUp/ArrowDown/Home/End roving-focus handlers (internal/ui/switcher.go:1004-1007): the menu holds one item, so every key focuses the same item; keep Escape/Tab/focus-return
D2 — TestTheBarIsTight (internal/ui/switcher_compact_test.go:298): Tailwind class-name assertions already pinned as whole strings in switcher_test.go and measured behaviourally by the e2e row-width checks
D3 — the stray console.log(`PINNED-ROW-…`) measurement line in e2e/tests/pins.spec.ts:296
Q1 — The bar's icon buttons are now 40px wide (switcherIconButtonClass), below the app-wide 44×44 tap-target rule that e2e/tests/layout.spec.ts enforces. Does the ask to reduce padding on the buttons waive that rule for this bar, or should the 44px hit targets stay and the room come from gaps, the inset or overlapping hit areas? · forcing: user

[ZacxDev]

Q1=answered: keep 44×44 hit targets on the bar's icon buttons; take the room from the side inset, gaps and pill padding instead

[ZacxDev]

Round 1 (nine-axis checklist): 0 🔴, 0 🟡, 3 🟢. No 🔴, so the ladder ends; the 🟢s are recorded open here rather than fixed in this PR.

1. no-script ⋯ popover opens at viewport (0,0), not above its button (m-0, switcher_pin.go:107)
2. Shift+Tab from the ⋯ item lands on the search, skipping the ⋯ (Tab handler hides first, switcher.go:1009)
3. composer-switcher.spec.ts:361 "drawn before paint" is a retrying attribute check, not a pre-paint measurement