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

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.

frontend/packages/swarm-ui/src/ui/skeleton/Skeleton.tsx

@@ -46,3 +46,25 @@ export function SkeletonRegion({
     </div>
   );
 }
+
+const LINE_WIDTHS = ["90%", "75%", "85%", "60%"];
+
+/** A few lines of text, for a block of prose or a list still loading. */
+export function SkeletonLines({
+  label,
+  count = 3,
+}: {
+  /** What is loading, as a screen reader says it. */
+  label: string;
+  count?: number;
+}) {
+  return (
+    <SkeletonRegion label={label}>
+      <div class="ui-skeleton-lines">
+        {Array.from({ length: count }, (_, i) => (
+          <Skeleton key={i} width={LINE_WIDTHS[i % LINE_WIDTHS.length]} />
+        ))}
+      </div>
+    </SkeletonRegion>
+  );
+}