vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: split agent status badge into technical status + free-text message

Browse source 
mara: 'separate technical status from agent provided status string' —
the agents page's status column concatenated the freshness label with
the agent's own free-text status_text into one Badge pill, meant for a
short discrete label, not a full sentence. Long status strings blew
the row out and made the table look messy.

Now two columns: 'status' is just the freshness badge (fresh/stale/
never reported/not in swarm identity) plus relative time, unchanged in
meaning; 'message' is the agent's own status string as plain prose in
its own capped-width, wrapping cell (Table's new cellClass, ui-table-
prose), not a badge. A stopped agent (status_text always null per the
wire contract) shows an em dash there instead of a stale message.

Verified against a static render of the built CSS (real dark theme,
real Badge/table classes, the exact long strings from the screenshot
mara attached) — wraps cleanly within the column instead of
overflowing. Typecheck + build clean.
This commit is contained in:
iris 2026-09-02 20:53:11 +02:00
commit 675fc72e01
3 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/packages/swarm-ui/src/ui/table/Table.css
View file

@ -26,3 +26,12 @@
text-align: center;
padding: 1.25em 0.75em;
}
/* A cell holding free-form prose (an operator- or agent-provided string,
not a short discrete label) rather than open-ended growth that drags
the whole table wider — caps the column and wraps within it instead. */
.ui-table-prose {
max-width: 32em;
white-space: normal;
word-break: break-word;
}

8
frontend/packages/swarm-ui/src/ui/table/Table.tsx
View file

@ -20,6 +20,10 @@ export interface TableColumn<T> {
// can pass real markup instead of forking a second table primitive.
header: ComponentChildren;
render: (row: T) => ComponentChildren;
/** Extra class on this column's `<td>` — e.g. `ui-table-prose` for a
* free-text cell that should cap its width and wrap instead of
* dragging the whole table wider. Omit for the default cell styling. */
cellClass?: string;
/**
* ARIA sort state for this column's `<th>` — `'ascending'` /
* `'descending'` while this is the active sort column, `'none'` while
@ -72,7 +76,9 @@ export function Table<T>({
rows.map((row) => (
<tr key={rowKey(row)}>
{columns.map((c) => (
<td key={c.key}>{c.render(row)}</td>
<td key={c.key} class={c.cellClass}>
{c.render(row)}
</td>
))}
</tr>
))