refactor(ui): extract reusable component package

src/components/ServicePanel.tsx

@@ -0,0 +1,27 @@
+import type { UiServiceGroup } from "../types";
+import { Panel } from "./Panel";
+import { ServiceRow } from "./ServiceRow";
+import { StatusStrip } from "./StatusStrip";
+
+export interface ServicePanelProps {
+  group: UiServiceGroup;
+}
+
+export function ServicePanel({ group }: ServicePanelProps) {
+  return (
+    <div
+      className="service-panel"
+      data-layout={group.layout || "list"}
+      data-model-id={group.id}
+    >
+      <Panel title={group.title}>
+        {group.summary?.length ? (
+          <StatusStrip id={`${group.id}:summary`} items={group.summary} compact />
+        ) : null}
+        {group.services.map((service) => (
+          <ServiceRow key={service.id} service={service} />
+        ))}
+      </Panel>
+    </div>
+  );
+}