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

swarm-ui: an agent's settings and AGENTS.md show placeholders while they load

Browse source 
BadgeSkeleton is the twin of Badge: the real Badge frame, as tall as an
interactive one (the settings values are buttons), with a placeholder for its
value. Permissions, resource caps, internet and allowed domains use it in place of
their "loading…" text, the details popover shows lines of text, and the
AGENTS.md editor a block, in place of theirs. SkeletonLines is a few stacked
lines for such blocks.
This commit is contained in:
iris 2026-11-06 17:27:55 +01:00
commit a9f0d61daa
1 changed files with 106 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -9,7 +9,8 @@ import { useRef, useState } from "preact/hooks";
import type { ComponentChildren } from "preact";
import { AgentListSkeleton } from "../agent/roster/AgentCardSkeleton.js";
import { Card } from "../ui/card/Card.js";
import { SkeletonRegion } from "../ui/skeleton/Skeleton.js";
import { SkeletonLines, SkeletonRegion } from "../ui/skeleton/Skeleton.js";
import { BadgeSkeleton } from "../ui/skeleton/BadgeSkeleton.js";
import { FilterableView } from "../ui/filterable-view/FilterableView.js";
import {
MultiselectFilter,
@ -492,6 +493,15 @@ export function ComponentsPage() {
<AgentListSkeleton count={2} />
</SkeletonRegion>
</Sample>
<Sample label="badge placeholders">
<div style={{ display: "flex", gap: "0.5em" }}>
<BadgeSkeleton what="the permissions" />
<BadgeSkeleton what="the resource caps" width="9em" />
</div>
</Sample>
<Sample label="text placeholder">
<SkeletonLines label="the details" />
</Sample>
<Sample label="table placeholder">
<TableSkeleton columns={TABLE_COLUMNS} label="the rows" />
</Sample>