AgentWall
A paged wall of agent and service tiles with search and a status filter.
No agents are running.
In context
Props
| Prop | Type | Required | Default |
|---|---|---|---|
members | AgentWallMember[] | Yes | — |
columns | number | undefined | No | 5 |
rows | number | undefined | No | 4 |
title | ReactNode | No | — |
actions | ReactNode | No | — |
filterMode | "hide" | "dim" | undefined | No | hide |
orb | "auto" | "css" | undefined | No | auto |
look | "orb" | "avatar" | undefined | No | orb |
emptyText | string | undefined | No | No agents match. |
page | number | undefined | No | — |
defaultPage | number | undefined | No | 1 |
onPageChange | ((page: number) => void) | undefined | No | — |
statusFilter | AgentWallStatusFilter | undefined | No | — |
defaultStatusFilter | AgentWallStatusFilter | undefined | No | all |
onStatusFilterChange | ((filter: AgentWallStatusFilter) => void) | undefined | No | — |
query | string | undefined | No | — |
defaultQuery | string | undefined | No | |
onQueryChange | ((query: string) => void) | undefined | No | — |
selectedId | string | null | undefined | No | — |
defaultSelectedId | string | null | undefined | No | null |
onSelectedChange | ((id: string | null) => void) | undefined | No | — |
Statuses
A tile is active, idle, stalled, failure, ghost or offline. A service that reports trouble or stops answering is failure; an agent that has gone quiet is a ghost, faded and not a failure. The host decides when a ghost leaves members. Each tile wears a persona orb (agentPersona(kind, status)), or look="avatar" for an illustrated face; a CSS look-alike replaces the orb without WebGL or under reduced motion.
AgentTile
AgentTile is the single tile the wall repeats, exported on its own: an orb, a name, Project > Path, a status dot and one line of activity. It is a fixed size, so long text is cut with an ellipsis. Pass onSelect to make it a button.
data-rebar-* attributes
data-rebar-component="agent-wall" with data-rebar-filter-mode; parts header, toolbar, grid, empty, pages. Each tile is data-rebar-component="agent-tile" with data-rebar-status, data-rebar-kind, and data-rebar-dimmed/data-rebar-selected when set; its parts are orb, name, status, project, activity.
Migrating to Ant Design
Not codemod-covered. Ant Design has no status-wall component; compose its Card/Avatar/Badge/Pagination against the same members array.