UI for systemd srv

web/public/sw.js

@@ -1,5 +1,5 @@
 /* Offline shell: navigations are network-first, static assets cache-first. */
-const CACHE = "homelab-shell-v3";
+const CACHE = "homelab-shell-v4";
 
 self.addEventListener("install", (e) => {
   e.waitUntil(caches.open(CACHE).then((c) => c.addAll(["/", "/index.html"])));

web/src/App.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { createClient } from "@connectrpc/connect";
 import { createConnectTransport } from "@connectrpc/connect-web";
-import { BookOpen, Gauge, Link as LinkIcon, Play } from "lucide-preact";
+import { BookOpen, Gauge, Link as LinkIcon, Play, Server } from "lucide-preact";
-import type { Item, Link } from "./gen/homelab/v1/homelab_pb";
+import type { Item, Link, Service } from "./gen/homelab/v1/homelab_pb";
 import { HomelabService } from "./gen/homelab/v1/homelab_pb";
 import { MonitorCard } from "./components/MonitorCard";
 import { ScriptCard } from "./components/ScriptCard";
+import { ServiceCard } from "./components/ServiceCard";
 import { DocsView, DocView, localDocs } from "./components/Docs";
 import { syncDocs } from "./docsStore";
 
@@ -14,6 +15,7 @@ const client = createClient(HomelabService, createConnectTransport({ baseUrl: ""
 const CATEGORIES = [
   { id: "links", label: "Links", icon: LinkIcon },
   { id: "monitor", label: "Monitor", icon: Gauge },
+  { id: "services", label: "Services", icon: Server },
   { id: "exec", label: "Exec", icon: Play },
   { id: "docs", label: "Docs", icon: BookOpen },
 ] as const;
@@ -38,25 +40,29 @@ function LinkList({ links }: { links: Link[] }) {
 }
 
 export function App() {
-  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[] }>({
+  const [content, setContent] = useState<{ links: Link[]; monitors: Item[]; exec: Item[]; services: Service[] }>({
     links: [],
     monitors: [],
     exec: [],
+    services: [],
   });
   const [category, setCategory] = useState<Category>("monitor");
   const [docs, setDocs] = useState(localDocs());
   const [openDoc, setOpenDoc] = useState<string | null>(null);
 
-  useEffect(() => {
+  const refresh = useCallback(
-    const poll = () =>
+    () =>
       client
         .listContent({})
-        .then((r) => setContent({ links: r.links, monitors: r.monitors, exec: r.exec }))
+        .then((r) => setContent({ links: r.links, monitors: r.monitors, exec: r.exec, services: r.services }))
-        .catch(() => {}); // offline: keep last state
+        .catch(() => {}), // offline: keep last state
-    poll();
+    [],
-    const id = setInterval(poll, 3000);
+  );
+  useEffect(() => {
+    refresh();
+    const id = setInterval(refresh, 3000);
     return () => clearInterval(id);
-  }, []);
+  }, [refresh]);
 
   // Docs sync + offline dirty flush, every 5s.
   useEffect(() => {
@@ -96,6 +102,11 @@ export function App() {
           </div>
         )}
         {category === "exec" && content.exec.map((it) => <ScriptCard s={it} />)}
+        {category === "services" && (
+          <div class="flex flex-col gap-3 mt-4">
+            {content.services.map((s) => <ServiceCard s={s} refresh={refresh} />)}
+          </div>
+        )}
         {category === "docs" &&
           (open ? (
             <DocView doc={open} onBack={() => setOpenDoc(null)} />

web/src/components/ServiceCard.tsx

@@ -0,0 +1,78 @@
+import { useState } from "preact/hooks";
+import { createClient } from "@connectrpc/connect";
+import { createConnectTransport } from "@connectrpc/connect-web";
+import { Container, Server } from "lucide-preact";
+import type { Service } from "../gen/homelab/v1/homelab_pb";
+import { HomelabService, ServiceKind, ServiceOp } from "../gen/homelab/v1/homelab_pb";
+
+const client = createClient(HomelabService, createConnectTransport({ baseUrl: "" }));
+
+/** Бейдж статуса: system d — active/failed/выключен (not-found = намеренно disabled, не ошибка), docker — агрегат проекта. */
+function badge(s: Service) {
+  if (s.error) return <span class="badge badge-error badge-sm" title={s.error}>ошибка</span>;
+  if (s.kind === ServiceKind.DOCKER) {
+    if (s.state === "active") return <span class="badge badge-success badge-sm">работает {s.substate}</span>;
+    if (s.state === "partial") return <span class="badge badge-warning badge-sm">частично {s.substate}</span>;
+    return <span class="badge badge-ghost badge-sm">остановлен</span>;
+  }
+  if (s.loadState === "not-found") return <span class="badge badge-ghost badge-sm">выключен</span>;
+  if (s.state === "active") return <span class="badge badge-success badge-sm">{s.substate || "активен"}</span>;
+  if (s.state === "failed") return <span class="badge badge-error badge-sm">сбой</span>;
+  return <span class="badge badge-ghost badge-sm">остановлен</span>;
+}
+
+/** Карточка сервиса: systemd-юнит или docker-проект, start/stop/restart через ServiceAction. */
+export function ServiceCard({ s, refresh }: { s: Service; refresh: () => void }) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const act = async (op: ServiceOp) => {
+    setBusy(true);
+    setError("");
+    try {
+      await client.serviceAction({ name: s.name, kind: s.kind, op });
+      refresh(); // не ждём 3s поллинга
+    } catch (e) {
+      setError(String(e).replace(/^.*real error: /, ""));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const disabled = s.kind === ServiceKind.SYSTEMD && s.loadState === "not-found";
+  const btn = (op: ServiceOp, label: string, title?: string) => (
+    <button
+      class="btn btn-xs btn-outline"
+      disabled={busy || disabled}
+      title={title}
+      onClick={() => act(op)}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div class="card bg-base-200 shadow">
+      <div class="card-body p-4 gap-2">
+        <div class="flex items-center gap-2">
+          {s.kind === ServiceKind.DOCKER ? (
+            <Container size={14} class="text-primary shrink-0" />
+          ) : (
+            <Server size={14} class="text-primary shrink-0" />
+          )}
+          <span class="font-medium text-sm flex-1 truncate">{s.name}</span>
+          {badge(s)}
+        </div>
+        {error && <div role="alert" class="alert alert-error text-sm py-2">{error}</div>}
+        <div class="flex flex-wrap gap-2 items-center">
+          {btn(ServiceOp.START, "start")}
+          {btn(ServiceOp.STOP, "stop", "docker stop: контейнер не поднимется при ребуте (unless-stopped)")}
+          {btn(ServiceOp.RESTART, "restart")}
+        </div>
+        {s.containers.length > 0 && (
+          <p class="text-xs text-base-content/50 font-mono break-all">{s.containers.join(", ")}</p>
+        )}
+      </div>
+    </div>
+  );
+}