mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: the broadcast's loading skeleton uses the shared picker's class names

Browse source 
The archetype tiles keep their own classes; only the comment in
ArchetypePicker.css that named the old broadcast classes now names the
picker's.
This commit is contained in:
iris 2026-11-12 00:34:22 +01:00
commit bb735d2e35
4 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/packages/swarm-ui/src/agent/picker/AgentPicker.css
View file

@ -49,3 +49,17 @@
.ui-agent-picker-state-up { .ui-agent-picker-state-up {
color: var(--green); color: var(--green);
} }
/* The loading twin's card (a skeleton the caller renders in the same grid):
not a control, so no pointer. */
.ui-agent-picker-card-loading {
cursor: default;
}
/* Its name and state lines take the height of a line of text, so the card is
the height of a real one. */
.ui-agent-picker-card-loading .ui-agent-picker-name,
.ui-agent-picker-card-loading .ui-agent-picker-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 1.6em;
}

4
frontend/packages/swarm-ui/src/pages/ArchetypePicker.css
View file

@ -1,5 +1,5 @@
/* The archetype tiles, laid out and styled like the broadcast screen's agent /* The archetype tiles, laid out and styled like the agent tiles of the agent
tiles (`.ui-broadcast-grid`, `.ui-broadcast-agent`). */ picker (`.ui-agent-picker`, `.ui-agent-picker-card`). */
.ui-archetype-picker { .ui-archetype-picker {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));

13
frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.css
View file

@ -106,16 +106,3 @@
.ui-broadcast-fail .ui-broadcast-outcome-name { .ui-broadcast-fail .ui-broadcast-outcome-name {
color: var(--fg); color: var(--fg);
} }
/* The loading twin's chip: not a control, so no pointer. */
.ui-broadcast-agent-loading {
cursor: default;
}
/* Its name and state lines take the height of a line of text, so the chip is
the height of a real one. */
.ui-broadcast-agent-loading .ui-broadcast-name,
.ui-broadcast-agent-loading .ui-broadcast-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 1.6em;
}

10
frontend/packages/swarm-ui/src/pages/broadcast/BroadcastComposer.tsx
View file

@ -61,20 +61,20 @@ function storedFilter(): AgentFilter {
} }
} }
// The twin of the agent grid while the roster loads: the same grid and the // The twin of the agent grid while the agents load: the same grid and the
// same chip (border, icon, name, state) with a placeholder in each slot. // same chip (border, icon, name, state) with a placeholder in each slot.
function RosterSkeleton({ count = 6 }: { count?: number }) { function RosterSkeleton({ count = 6 }: { count?: number }) {
return ( return (
<SkeletonRegion label="the agents"> <SkeletonRegion label="the agents">
<ul class="ui-broadcast-grid" aria-hidden="true"> <ul class="ui-agent-picker" aria-hidden="true">
{Array.from({ length: count }, (_, i) => ( {Array.from({ length: count }, (_, i) => (
<li key={i}> <li key={i}>
<div class="ui-broadcast-agent ui-broadcast-agent-loading"> <div class="ui-agent-picker-card ui-agent-picker-card-loading">
<Skeleton shape="block" width="5em" height="5em" /> <Skeleton shape="block" width="5em" height="5em" />
<span class="ui-broadcast-name"> <span class="ui-agent-picker-name">
<Skeleton width="4em" /> <Skeleton width="4em" />
</span> </span>
<span class="ui-broadcast-state"> <span class="ui-agent-picker-state">
<Skeleton width="3.5em" /> <Skeleton width="3.5em" />
</span> </span>
</div> </div>