swarm-ui: restructure the agent card into status, terminal, subagents and settings, with badge controls for internet, permissions and allowed domains

frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css

@@ -0,0 +1,26 @@
+/* <BadgePopover> — the box a badge opens under itself. */
+.ui-badge-popover {
+  display: inline-block;
+}
+.ui-badge-popover-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.4em;
+  padding: 0.5em 0.75em;
+  max-width: min(32em, 90vw);
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.ui-badge-popover-help {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9em;
+}
+.ui-badge-popover-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.3em;
+}

frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.tsx

@@ -0,0 +1,57 @@
+// <BadgePopover> — a badge that shows a value and, when clicked, opens a
+// popover under it holding the control that changes the value: a list of
+// checkboxes, a choice of modes, the entries behind a count. The control sits
+// next to the thing it changes instead of in a dialog away from it.
+//
+// A click on the badge toggles the popover; a click outside it or Escape
+// closes it (`Popover` does that).
+import { useRef, useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import { Badge, type BadgeTone } from "@hive/shared/badge.js";
+import { Popover } from "../popover/Popover.js";
+import "./BadgePopover.css";
+
+export function BadgePopover({
+  label,
+  value,
+  tone,
+  title,
+  popoverLabel,
+  children,
+}: {
+  /** Dim prefix of the badge, e.g. "permissions". */
+  label?: ComponentChildren;
+  /** What the badge says, e.g. "7 granted". */
+  value: ComponentChildren;
+  tone?: BadgeTone;
+  /** Tooltip on the badge: what clicking it does. */
+  title?: string;
+  /** `aria-label` of the floating box. */
+  popoverLabel: string;
+  children: ComponentChildren;
+}) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  return (
+    <>
+      <span class="ui-badge-popover" ref={anchorRef}>
+        <Badge
+          label={label}
+          value={value}
+          tone={tone}
+          title={title}
+          expanded={open}
+          onClick={() => setOpen((o) => !o)}
+        />
+      </span>
+      <Popover
+        open={open}
+        onClose={() => setOpen(false)}
+        anchorRef={anchorRef}
+        label={popoverLabel}
+      >
+        <div class="ui-badge-popover-body">{children}</div>
+      </Popover>
+    </>
+  );
+}