Recompose AgentCard for responsive information hierarchy

Context

Operator verdict (2026-07-18): the current Fleet Manager AgentCard is not good enough for a flagship product, and poor Fleet Manager UX blocks v13.2. This child turns the broad signal on #14805 into one executable design-and-implementation lane.

The card's content contract is mostly sound. The defect is composition: hierarchy, ordering, responsive behavior, and the visual weight allocated to each item. #15512 / PR #15534 remains a valid accessibility invariant, not visual closure.

Grace has already preserved the settled invariants and proposed three materially different directions:

• composition invariants
• Scan-column / Identity-card / Signal-forward directions

This ticket owns rendering, challenging, selecting, and implementing the responsive product shape.

Live latest-open sweep: checked the newest 20 open issues plus targeted AgentCard/mobile/responsive searches and recent A2A claims at 2026-07-18T21:14:13.496Z; no equivalent open lane exists.

The Problem

A Neural Link inspection of the mounted production card found:

• the card root is 294 × 117.5 px;
• only 149.95 px remains for identity, lane, and source truth;
• the fixed controls rail consumes 57.05 px;
• the power control is 48 × 48 px and visually dominates that rail;
• the lane row is a single 11 px, nowrap/ellipsis line; lane-count and telltale siblings take additional fixed width when present;
• the three trailing source-truth markers are each about 78 px wide at 9 px type, so they wrap into three tiny rows inside the 149.95 px body; and
• responsiveness currently exists only at the outer FleetGrid viewport breakpoints (3/2/1 columns). AgentCard has no internal narrow/regular/wide composition.

This fails on both desktop density and a plausible mobile/narrow Fleet Manager:

• A long lane title followed by a two-digit “more lanes” count can collapse to a meaningless prefix.
• The largest visual object is not necessarily the highest-value or highest-frequency operator fact.
• The three source facts are technically present but visually too small and too fragmented to scan.
• The ordering reflects item insertion, not a demonstrated operator task hierarchy.
• Viewport-only breakpoints cannot express a card's real width inside docking, multi-window, or future mobile compositions.

The Architectural Reality

• AgentCard semantics remain governed by apps/agentos/design/CARD-CONTRACT.md, #14592, #14598, and the #15512 accessibility invariant.
• Avatar invariant (operator, 2026-07-18): profile pictures are a successful part of the current card. Every direction preserves a clearly visible avatar as the fast-recognition and fleet-individuality anchor. Responsive modes may scale it proportionately; they must not remove it, replace it with a weaker fallback when the image is available, or visually bury it.
• The open design axes are hierarchy, density, control placement, information grouping, and width-state behavior.
• ADR 0029 keeps cards layout-blind with respect to docking mechanics. Responsive behavior belongs in the card composition/SCSS, driven by its own available width or an equivalent component-scoped signal—not by viewport width alone.
• #14618 is the existing visual-baseline harness and must carry the selected shape.
• This is a design-first lane. Static alternatives are evidence, not authority; the operator selects the product direction before implementation.

The Fix

1. Capture the rejected card at real fleet density with long names, long lanes, two-digit lane counts, telltales, lifecycle variants, and mixed source health.
2. Render Grace's three directions as genuinely distinct responsive compositions.
3. Have @neo-kimi-phoebe challenge the directions specifically from narrow/mobile information hierarchy, task ordering, and control-footprint perspectives; refinements or a materially better fourth direction are welcome.
4. Validate every candidate at narrow, regular, and roomy card widths, in both themes and realistic states.
5. Route the evidence to @tobiu for the aesthetic/product selection.
6. Fold the chosen anatomy into CARD-CONTRACT.md, implement it in AgentCard/SCSS, and refresh #14618 baselines.

Contract Ledger

Acceptance Criteria

• Three materially different compositions are rendered at representative narrow (~280–294 px), regular (~360–480 px), and roomy (~720 px) card widths; they vary hierarchy/grouping/control placement, not just spacing or color.
• @neo-kimi-phoebe contributes an independent narrow/mobile design challenge before operator selection.
• @tobiu selects the product direction before implementation is treated as merge-ready.
• The selected card responds to its own available width (or an equivalent component-scoped signal); resizing/docking it does not depend solely on viewport media queries.
• A narrow-card falsifier uses two long lane names sharing the same first seven characters plus a +7 or larger count. The visible/touch-accessible result still distinguishes the current lane without hover-only disclosure.
• Every direction retains a clearly visible profile avatar at narrow, regular, and roomy card widths; scaling may change, but no mode removes or visually demotes it.
• Lifecycle controls retain accessible pointer/keyboard hit targets while no inactive control or rail consumes disproportionate card width or visual hierarchy.
• Source-truth facts are readable and ordered by an explicit operator-task rationale; the selected shape has no 9 px three-row abbreviation wall.
• Full source/state/lane truth remains accessible on touch devices; hover-only controls or tooltips are insufficient.
• The render matrix covers long agent/model/lane names, 2-digit lane counts, telltales, pending/rejected controls, healthy/degraded/not-wired source combinations, and both themes.
• CARD-CONTRACT.md and #14618 baselines are updated to the selected composition.
• Existing state-text, state-honesty, token-only, durable-id, keyboard, and screen-reader contracts remain green.
• Cross-family review plus operator visual signoff before merge.

Release Gate

The AgentCard portion of #14805 is not complete—and v13.2 is not visually releasable—until the selected composition passes the matrix above. A semantically correct but ugly or narrow-width-useless card does not satisfy this ticket.

Out of Scope

• Adding new AgentCard data fields or changing DTO ownership.
• Reopening the #15512 / PR #15534 accessibility decision.
• Demo-tour/product separation (#15535).
• Docking-engine changes.
• The settled time-neutral fleet-start label. #15254 / PR #15255 already established Start fleet; remaining live-product drift is routed on the fleet-start surface, not hidden inside this card ticket.

Avoided Traps

• Shrinking fonts or abbreviating harder to fit the current anatomy.
• Viewport media queries as the only responsive mechanism.
• Icon-only mystery controls or hover-only truth.
• Hiding information without a touch/keyboard-accessible detail route.
• Treating “all fields are present” as evidence that hierarchy and ordering are good.
• Picking a static mock before rendering realistic fleet density.

Related

Parent: #14805
Fleet Manager epic: #14560
Density evidence: #14592
Original card implementation: #14598
Visual baseline harness: #14618
Accessibility sibling: #15512 / PR #15534
Operator verdict: https://github.com/neomjs/neo/issues/14805#issuecomment-5012889788

Origin Session ID: ad71d4c3-3e37-4a17-8df7-8415509def84

Retrieval Hint: Fleet Manager AgentCard responsive mobile container width information hierarchy lane truncation controls source health