swarm-ui: one subdirectory per ui/ component

Per mara's PR review request: Panel/StatusChip/Table each move into
their own subdir (ui/panel/, ui/status-chip/, ui/table/) colocating
the component with its stylesheet, matching shell/ (Shell.tsx +
Shell.css already lived this way). Import paths in App.tsx and
swarm-ui.css updated to match; no behavior change.

npm run build + typecheck both clean.

frontend/packages/swarm-ui/src/App.tsx

@@ -4,7 +4,7 @@
 // page lands as a content change, not a structural one.
 import { Route, Switch } from 'wouter-preact';
 import { Shell } from './shell/Shell.js';
-import { Panel } from './ui/Panel.js';
+import { Panel } from './ui/panel/Panel.js';
 
 function Home() {
   return (

frontend/packages/swarm-ui/src/swarm-ui.css

@@ -1,5 +1,5 @@
 @import "@hive/shared/base.css";
 @import "./shell/Shell.css";
-@import "./ui/Panel.css";
-@import "./ui/StatusChip.css";
-@import "./ui/Table.css";
+@import "./ui/panel/Panel.css";
+@import "./ui/status-chip/StatusChip.css";
+@import "./ui/table/Table.css";

frontend/packages/swarm-ui/src/ui/panel/Panel.css

@@ -0,0 +1,15 @@
+.ui-panel {
+  border: 1px solid var(--border);
+  border-radius: 0.5em;
+  background: var(--bg-elev);
+}
+.ui-panel-title {
+  margin: 0;
+  padding: 0.75em 1em;
+  font-size: 1em;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border);
+}
+.ui-panel-body {
+  padding: 1em;
+}

frontend/packages/swarm-ui/src/ui/panel/Panel.tsx

@@ -0,0 +1,14 @@
+// <Panel> — the one generic container primitive every route needs: a
+// bordered surface with an optional title, no other opinions. Not a
+// card-with-actions/footer/whatever kit — those get added the first
+// time a real page actually needs one, not speculatively ahead of it.
+import type { ComponentChildren } from 'preact';
+
+export function Panel({ title, children }: { title?: string; children: ComponentChildren }) {
+  return (
+    <section class="ui-panel">
+      {title ? <h2 class="ui-panel-title">{title}</h2> : null}
+      <div class="ui-panel-body">{children}</div>
+    </section>
+  );
+}

frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.css

@@ -0,0 +1,21 @@
+.ui-chip {
+  display: inline-block;
+  padding: 0.15em 0.6em;
+  border-radius: 1em;
+  font-size: 0.85em;
+  line-height: 1.4;
+  background: var(--purple-dim);
+  color: var(--fg);
+}
+.ui-chip-neutral {
+  color: var(--muted);
+}
+.ui-chip-positive {
+  color: var(--green);
+}
+.ui-chip-warning {
+  color: var(--amber);
+}
+.ui-chip-negative {
+  color: var(--red);
+}

frontend/packages/swarm-ui/src/ui/status-chip/StatusChip.tsx

@@ -0,0 +1,11 @@
+// <StatusChip> — a small labelled state indicator. Generic over
+// `tone` rather than a fixed status vocabulary (`online`/`offline`/…)
+// because the first real caller (the hive roster) starts with a
+// single static "configured" tone and grows real online/stale/offline
+// states once a status rollup lands server-side — same component,
+// richer data later, no rebuild.
+export type ChipTone = 'neutral' | 'positive' | 'warning' | 'negative';
+
+export function StatusChip({ tone = 'neutral', label }: { tone?: ChipTone; label: string }) {
+  return <span class={'ui-chip ui-chip-' + tone}>{label}</span>;
+}

frontend/packages/swarm-ui/src/ui/table/Table.css

@@ -0,0 +1,18 @@
+.ui-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.ui-table th {
+  text-align: left;
+  font-weight: 600;
+  color: var(--muted);
+  padding: 0.5em 0.75em;
+  border-bottom: 1px solid var(--border);
+}
+.ui-table td {
+  padding: 0.5em 0.75em;
+  border-bottom: 1px solid var(--border);
+}
+.ui-table tr:last-child td {
+  border-bottom: none;
+}

frontend/packages/swarm-ui/src/ui/table/Table.tsx

@@ -0,0 +1,43 @@
+// <Table> — a generic column-defined table, the shape the hive roster
+// (name / domain / status chip, one row per hive) needs. Columns own
+// their own cell rendering rather than this component knowing about
+// any particular row shape, so it stays reusable for the swarm-wide
+// agent roster later without a rewrite.
+import type { ComponentChildren } from 'preact';
+
+export interface TableColumn<T> {
+  key: string;
+  header: string;
+  render: (row: T) => ComponentChildren;
+}
+
+export function Table<T>({
+  columns,
+  rows,
+  rowKey,
+}: {
+  columns: TableColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => string;
+}) {
+  return (
+    <table class="ui-table">
+      <thead>
+        <tr>
+          {columns.map((c) => (
+            <th key={c.key}>{c.header}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={rowKey(row)}>
+            {columns.map((c) => (
+              <td key={c.key}>{c.render(row)}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}