Cockpit header and agent detail: information architecture and responsiveness

Context

Operator inspection, 2026-08-22 ~14:45Z, with screenshots and an explicit brief: "information architecture and responsiveness for the header and agent profile view need severe work. … it is not 'make chips smaller' — which items should be in there? in which order? the ~730px wide error label between buttons feels unprofessional. the 2nd wake label gets cut off. on big resolutions both labels could be below each other (vertical space is there); smaller widths matter too. challenge the content of the label messages too." Measured the same hour in the running cockpit (dev 1cd9d3fd38).

The Problem (measured)

Agent detail (.fm-agent-detail, 280–295 px rail):

1. The identity/status column is squeezed to 107 px (48 px avatar + padding left), so every state line wraps mid-phrase to two lines ("wake: not / reported", "Runtime: not / wired" — six 2-line rows). The break is layout-internal: it happens at ANY rail width.
2. The "Pop out detail" shell tool overlaps content: the button (63 px, itself clipped to "Pop out de…") renders at x≈201 over the identity block — elementFromPoint at its left edge hits the name text.
3. Three vocabularies in one flat prose stack: liveness (active, wake:, throttle: — italic), wiring (Runtime/Repository/Roster: not wired), and a dangling provenance line (— fleet:listAgents) — while .fm-freshness already exists as THE state-pill language. Then every axis is told twice: each drawer section below (Thought stream / Current lane / Repository / Pull requests) spends three lines re-stating the same fact ("not observed — source not wired" + "awaiting live feed").

Header (.agent-top-toolbar, 1280 px): 4. Structure: logo 30 + label 69 + instance switcher 200 + one unstructured 877 px middle (view switcher + spine banner 478 px + Reconnect + wake chip 265 px, clipped mid-word + Start fleet) + theme 49. Ellipsis + T5 titles exist, but there is no declared item set, order, or collapse behavior — the banner sits between buttons, the wake chip truncates at "Failed to fe", and nothing defines the minimum honest form. 5. The label content itself is the IA defect: the banner packs five facts into one inline sentence (endpoint · state · consequence · instruction · shell command — 127.0.0.1:8083/fleet — Fleet server offline — showing the static roster · start it: npm run ai:fleet-server). Remediation commands and endpoints are detail/tooltip content, not chrome.

The Architectural Reality

• apps/agentos/view/fleet/AgentDetail.mjs + resources/scss/src/apps/agentos/fleet/AgentDetail.scss (the S1 .fm-freshness vocabulary lives there and in MailboxPane — one language, currently unused by the header stack of the same pane).
• The spine banner (.fm-spine-banner) + wake telltale render in the cockpit control bar (FleetCockpit.mjs syncControlBar region); both already carry honest T5 titles.
• Container-query infrastructure exists (FleetCockpit.scss: container-name: fm-cockpit; container-type: inline-size) and is unused by these surfaces.
• Prior art: #15848 (CLOSED — witnessed the 571–970 px header band once), #17543 / PR #17544 (the token-layer pass these surfaces now sit on), the drawer-shell mount-agnostic pane contract.

The Fix (design-first — AC-1 sketch gate, the #17329 precedent)

Answer the operator's questions in a §04 sketch BEFORE code:

1. Header item set + order (content-first): exactly four classes — identity/context (logo · instance), view (Overview/Focus/Review), state (TWO axes: fleet connection, wake channel — as status words/pills, never prose sentences), primary action (Start fleet; Reconnect contextual when offline). Everything else (endpoint, consequence, remediation command) moves to titles/popover/detail surfaces.
2. Label content rewrite: banner → ● Fleet offline · Reconnect (endpoint + consequence in the title; the npm run command in the detail surface); wake → a wake off-class pill with the failure reason in the title (T5 pattern stays).
3. Responsive plan with a declared collapse order (container queries): wide → the two state lines stacked vertically inside the 50 px band (the operator's observation: the vertical space is there); mid → two pills side by side; narrow → two dots with titles. State sits right-aligned before the actions, never between buttons.
4. Detail identity header = one grid row (avatar ≤32 px, name + family chip, handle); the pop-out toggle moves into pane chrome (icon-only under a container width), never overlapping content.
5. Detail state = ONE label/value ledger in the .fm-freshness vocabulary (axis · state word, labels nowrap), provenance as pill/title — each fact told once; the drawer sections keep only their own content and a one-line section provenance pill.
6. Tokens/rhythm §04 throughout; zero CSS-in-JS; both themes.

Decision Record impact: none — aligned-with the §04 bar and #17269's chrome tier.

Acceptance Criteria

• AC-1: §04 design sketch (header + detail, incl. the label-content rewrite and the collapse order) posted and reviewed BEFORE implementation (operator or peer §04 read).
• Header renders the four item classes in the declared order; state never sits between action buttons; at container widths ≥ wide the two state lines stack vertically; the declared collapse order holds at 1280 / 1024 / 900 / 730 with computed receipts — no mid-word clipping anywhere; full truth stays reachable via T5 titles.
• No header label carries an endpoint or shell command inline; remediation lives in title/popover/detail.
• Agent detail: no state line wraps mid-phrase at rail widths 240–360 px; no control overlaps content (computed receipts); the pop-out toggle lives in pane chrome.
• Every liveness/wiring axis renders once, in the .fm-freshness vocabulary; the drawer sections drop the per-section "not observed" boilerplate in favor of a one-line provenance pill.
• Token-governed in both themes; npm run check-theme-surfaces green.

Out of Scope

South panes' content design (#17268) · the boot-truth fix (#17547) · new data sources or verbs · the release video (#17266, sequenced after #17268 per the 2026-08-22 status answer).

Related

Epic #14560 (parent) · #17268 · #14805 · #17543 / PR #17544 · #13448 · #17547 · #15848 (prior header-band witness, closed)

Live latest-open sweep: latest 20 open issues checked 2026-08-22T14:56Z — no equivalent (#17547 = boot truth, adjacent). A2A window (10 newest, all read-states, 14:57Z): no competing claim. Local exact sweep: 5 hits — #15848/#14310/#14771 CLOSED, #13448 (epic, related), #15097 (unrelated).

Origin Session ID: 14acab5a-4b6c-4987-91c7-f683e39baa55

Retrieval Hint: query_raw_memories("cockpit header information architecture collapse order agent detail freshness ledger overlap pop out")