feat(header): branch label, truncation priority, and icon-only actions below lg

[tlgimenes]

UI-only header/branch fixes (split out of #5215).

• Branch button always shows the current branch (truncated), and now yields its width before the centered address bar — it sits in its own min-w-0 shrink slot, while the fixed publish/⋯ actions never clip and remain what rightRef measures (so the tab-count budget is unaffected).
• Below lg (< 1024px) the header collapses to icon-only + tooltip: the branch button, the primary action button (icon keyed off button.action — GitPullRequest / RefreshCw01 / AlertTriangle / CheckCircle / MessageCircle01), the side Publish (Upload01), and the Develop/Live toggle (Code01 / Globe01). Loading pills → spinner-only; plain status pills keep their text. Desktop unchanged.

Layout/presentational only — no logic. tsc + oxlint clean.

---

The problem, for anyone not on a big monitor

The panel header collapsed its controls on viewport media queries (lg, 1024px). But the header doesn't span the viewport — it lives inside one panel. So screen width tells you almost nothing about the room it actually has:

Situation	Screen	Main panel header
Chat closed	1074px	826px
Chat open	1180px	605px

That second row is the bug. At a 1180px screen the viewport rule says "plenty of room, show every label" — while the strip is actually 605px and out of space. The labels stayed full-width, the tab budget got squeezed, and view tabs fell into the ⋯ overflow menu earlier than they needed to.

It also meant the same screen behaved differently depending on where you dragged the splitter, which is impossible to reason about — and it's why this looked fine on a wide monitor and bad on a laptop.

Reported as: "the screen is 882px wide and I'm still seeing the chat and preview labels."

What changed

PanelHeader now declares @container/panel-header and every control inside queries its own panel's width:

Control	Collapses below	Was
Chat, system tabs (Preview/Code), Library, Tasks, CMS	768px of header	viewport 768px / none
Dynamic tabs (files, pinned views, expanded tools)	576px of header	viewport 768px
Branch pill, branch picker, Develop/Live, Publish	768px of header	viewport 1024px
Preview's URL group (CMS · refresh · page select · open-in-new-tab)	448px of header	JS measurement, ~668px

Two tiers rather than one, because the icon has to carry the button once the label goes. Chat/Preview/Code/Library/Tasks have fixed, distinctive icons and collapse first. Dynamic tabs can resolve to a generic fallback glyph (resolve-tab-icon.ts), so several open files would become mutually indistinguishable — they hold their text longest.

Small screens keep the Preview controls much longer: the old JS rule hid the whole URL group below ~668px of header; it now survives to 448px.

Tabs finally have tooltips

HeaderTabButton had no Tooltip at all, while its own docstring claimed "every button is wrapped in a Tooltip." Below md the tabs were already collapsing to bare icons — so on a small screen you got an unlabelled icon with nothing identifying it but aria-label. That's the part that actually hurt. Tooltips are now real, which is what makes collapsing labels safe in the first place.

preview.tsx wrapped one of these in its own Tooltip; that's replaced by a tooltip prop so the two don't nest.

Screenshots

1440px, chat closed — header 1192px, everything labelled.

1000px, chat closed — header ~752px, labels collapsed to icon + tooltip, page selector still there.

1180px, chat open — header 605px. The point of the PR: a large screen where the panel is narrow, so the strip collapses. Under the old rule this showed full labels and ran out of room.

Trade-off worth a reviewer's opinion

The URL group's 448px cutoff is deliberately later than the old ~668px. Between roughly 448 and 530px the page selector has less than HEADER_W.middle (232px) and degrades toward a bare chevron instead of showing the page name — measured 220px at a 530px header, 150px at 460px.

That squish is the accepted cost of keeping the controls reachable on narrow panels; the old code hid them instead. Documented at the call site. Easy to move to 576px (@xl) if it reads badly in practice.

Dead code removed

headerLayout no longer returns showPageSelector — CSS owns that now, so keeping it would be dead. maxTabs stays in JS, because it changes which items render in the bar vs the overflow popover and CSS can't express that. Its tests were inverted rather than appended to, plus one asserting the field doesn't come back. HEADER_W.middle's docstring no longer claims to gate the centre's visibility.

Testing

• bun run check clean across all workspaces; bun run lint 0 errors; bun run fmt applied.
• 1029 unit tests pass (apps/web layouts, sandbox, chat).
• Verified in the running app by driving the container's inline size directly and sweeping the thresholds:

Forced header	Chat label	Centre group
820, 780	shown	visible (397, 379px)
767	collapsed	visible (361px)
700	collapsed	visible (361px)
530	collapsed	visible (220px — into the squish band)
460	collapsed	visible (150px)
447	collapsed	hidden

• Confirmed all four right-cluster components (BranchPill, BranchPicker, DevAgentControl, HeaderActions) render only inside a PanelHeader, so the container always resolves. Outside one the query finds no container and the label simply stays — the safe direction.
• Mobile (MobileTaskWorkspace) doesn't render the branch selector or publish actions at all; Preview's inline fallback bar declares the same container so its queries still work on that path.

Also in here: the CMS toggle gets its own icon

Edit05 was doing double duty as the new-chat affordance (task-groups-list.tsx, shell-breadcrumb.tsx) and the header's CMS toggle — two unrelated actions, one pencil-square. That collision matters more once the label collapses and the icon is the only thing identifying the button. Now PuzzlePiece01 (the page-builder "blocks" metaphor, unused elsewhere), applied to both entry points: the toolbar button and the ⋯ menu fallback.

🤖 Generated with Claude Code

---

Summary by cubic

Collapses the header by panel container width using @container/panel-header, keeps the current branch visible (truncated), and switches key actions/toggles to icon-only with tooltips at small widths. Also centers the page selector in the mobile preview toolbar and lowers the Preview URL group cutoff to 384px so controls stay usable longer.

• UI Improvements

  • Branch sits in its own min-w-0 slot before the centered address bar; right-side actions stay shrink-0 and are the only area measured by rightRef, so tab count is unaffected.
  • Container queries drive collapse: branch picker/pill, primary action, side Publish, and Develop/Live go icon-only below 768px; tab/chat labels collapse with tooltips (system tabs at 768px, dynamic tabs at 576px); Preview URL group hides below 384px. JS now only decides maxTabs (1–3); page selector visibility is CSS-driven.
  • Icons and tooltips: primary action uses state icons (GitPullRequest, RefreshCw01, AlertTriangle, CheckCircle, MessageCircle01); side Publish uses Upload01; Develop/Live use Code01/Globe01; CMS toggle switches to PuzzlePiece01. Tabs now have tooltips; loading pills are spinner-only, while plain status pills keep text.

• Bug Fixes

  • Mobile preview toolbar declares @container/panel-header and centers the page selector between the CMS toggle (left) and ⋯ (right).
  • Branch picker opens focused on the current branch and marks it with a check.

^{Written for commit 6b8827c. Summary will update on new commits.}