Welle 2 · Docker-Dienste unter Arcane einzeln: Stacks, Zustand, Gesundheit, Update-Stand; neue Stacks unter „Neu entdeckt“

Statt „Arcane (Docker) · 11 Images“ zeigt das Homelab-Cockpit je Stack jeden Container mit Zustand, Healthcheck und
Update-Stand („Update verfügbar“, „lokal gebaut“ für NerdQuiz und Rippy, „aktuell“). Der Wächter meldet gelb, wenn
ein Container ungesund ist oder ständig neu startet; beendete Container sind kein Befund. Neue Stacks erscheinen unter
„Neu entdeckt“ (eigenes Register, nur „Übernehmen“), Lucy meldet sie einmal.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/homelab/DockerDienste.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen, within } from "@testing-library/react"
+import type { DockerContainer, DockerLage } from "@/lib/typen"
+import { DockerDienste } from "./DockerDienste"
+
+const c = (name: string, mehr: Partial<DockerContainer> = {}): DockerContainer => ({
+  id: name, name, stack: "rippy", dienst: name.split("-")[1] ?? name, image: `${name}:latest`, zustand: "running",
+  status: "Up 3 hours", gesund: null, update: "aktuell", aktuell: null, neu: null, ...mehr,
+})
+
+const lage: DockerLage = {
+  verfuegbar: true, grund: null,
+  stacks: [
+    { name: "deploy", container: [c("nerdquiz", { stack: "deploy", gesund: true, update: "lokal" })] },
+    { name: "rippy", container: [
+      c("rippy-postgres-1", { image: "postgres:16-alpine", update: "neu" }),
+      c("rippy-worker-1", { gesund: false }),
+    ] },
+  ],
+}
+
+describe("DockerDienste", () => {
+  it("zeigt je Stack Zustand, Gesundheit und Update-Stand", () => {
+    render(<DockerDienste lage={lage} />)
+    const deploy = screen.getByRole("region", { name: "Stack deploy" })
+    expect(within(deploy).getByText("läuft, gesund")).toBeInTheDocument()
+    expect(within(deploy).getByText("lokal gebaut")).toBeInTheDocument()
+    const rippy = screen.getByRole("region", { name: "Stack rippy" })
+    expect(within(rippy).getByText("2 von 2 laufen · 1 mit Update")).toBeInTheDocument()
+    expect(within(rippy).getByText("Update verfügbar")).toBeInTheDocument()
+    expect(within(rippy).getByText("ungesund")).toHaveClass("text-rot-text")
+  })
+
+  it("zeigt nichts ohne Arcane", () => {
+    const { container } = render(<DockerDienste lage={{ verfuegbar: false, grund: "Arcane antwortet gerade nicht.", stacks: [] }} />)
+    expect(container).toBeEmptyDOMElement()
+  })
+})

frontend/src/components/homelab/DockerDienste.tsx

@@ -0,0 +1,74 @@
+import { cn } from "cn"
+import { Geraetesymbol } from "@/components/cockpit/Geraetesymbol"
+import { geraetebild, type Punktzustand } from "@/lib/geraetebild"
+import type { DockerContainer, DockerLage } from "@/lib/typen"
+
+// Docker-Dienste unter Arcane einzeln (Ausbauplan Welle 2, Punkt 8, seit 25.09.2026): je Stack die Container mit
+// Zustand, Gesundheit und Update-Stand — statt nur „Arcane (Docker) · 11 Images“.
+
+const UPDATE: Record<DockerContainer["update"], { text: string; klasse: string }> = {
+  neu: { text: "Update verfügbar", klasse: "text-cyan-text" },
+  lokal: { text: "lokal gebaut", klasse: "text-text-3" },
+  aktuell: { text: "aktuell", klasse: "text-text-3" },
+  unbekannt: { text: "Update-Stand unklar", klasse: "text-bernstein" },
+}
+
+function punkt(c: DockerContainer): Punktzustand {
+  if (c.zustand === "restarting" || c.gesund === false) return "rot"
+  if (c.zustand === "running") return "ok"
+  return "aus"
+}
+
+function zustandText(c: DockerContainer): string {
+  if (c.gesund === false) return "ungesund"
+  if (c.zustand === "restarting") return "startet immer wieder neu"
+  if (c.zustand === "running") return c.gesund ? "läuft, gesund" : "läuft"
+  if (c.zustand === "exited") return "beendet"
+  if (c.zustand === "paused") return "angehalten"
+  return c.zustand
+}
+
+/** Aus „ghcr.io/getarcaneapp/manager:latest“ wird „manager“ — für das Logo. */
+const imageName = (image: string | null) => (image ?? "").split("/").at(-1)?.split(":")[0] ?? ""
+
+function Zeile({ c }: { c: DockerContainer }) {
+  const u = UPDATE[c.update] ?? UPDATE.unbekannt
+  return (
+    <li className="flex min-w-0 items-center gap-3 border-t border-white/[0.06] py-2.5 first:border-t-0">
+      <Geraetesymbol bild={geraetebild({ art: "container", name: c.dienst ?? imageName(c.image) })} groesse="sm" punkt={punkt(c)} />
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-[14.5px] font-medium">{c.name}</span>
+        <span className="truncate text-[12.5px] text-text-3">{c.image}</span>
+      </span>
+      <span className="flex shrink-0 flex-col items-end text-right">
+        <span className={cn("text-[13px]", punkt(c) === "rot" ? "text-rot-text" : "text-text-2")}>{zustandText(c)}</span>
+        <span className={cn("text-[12px]", u.klasse)}>{u.text}</span>
+      </span>
+    </li>
+  )
+}
+
+export function DockerDienste({ lage }: { lage: DockerLage }) {
+  if (!lage.verfuegbar || lage.stacks.length === 0) return null
+  return (
+    <div className="grid gap-3 md:grid-cols-2 2xl:grid-cols-3">
+      {lage.stacks.map((s) => {
+        const laufen = s.container.filter((c) => c.zustand === "running").length
+        const neu = s.container.filter((c) => c.update === "neu").length
+        return (
+          <section key={s.name} aria-label={`Stack ${s.name}`} className="flaeche-innen flex min-w-0 flex-col rounded-2xl px-4 py-3">
+            <div className="flex items-baseline justify-between gap-3 pb-1">
+              <h3 className="m-0 truncate text-[15px] font-semibold">{s.name}</h3>
+              <span className="shrink-0 text-[12.5px] text-text-3">
+                {laufen} von {s.container.length} laufen{neu ? ` · ${neu} mit Update` : ""}
+              </span>
+            </div>
+            <ul className="m-0 list-none p-0">
+              {s.container.map((c) => <Zeile key={c.id} c={c} />)}
+            </ul>
+          </section>
+        )
+      })}
+    </div>
+  )
+}

frontend/src/components/homelab/NeuEntdeckt.tsx

@@ -5,7 +5,7 @@ import { Geraetesymbol } from "@/components/cockpit/Geraetesymbol"
 import { Panel } from "@/components/cockpit/Panel"
 import { Button } from "@/components/ui/button"
 import { geraetebild } from "@/lib/geraetebild"
-import type { NeuesGeraet, NeuWahl } from "@/lib/typen"
+import type { NeuerStack, NeuesGeraet, NeuWahl } from "@/lib/typen"
 import { flugplanZeit } from "@/lib/zeit"
 
 // „Neu entdeckt“ (Ausbauplan Welle 2, Punkt 7, seit 25.09.2026): Geräte, die der Orchestrator noch nicht kennt, mit
@@ -76,24 +76,47 @@ const FRAGE: Record<NeuWahl, { titel: string; text: string; knopf: string }> = {
   },
 }
 
-export function NeuEntdeckt({ geraete, gesperrt, onWahl }: {
+/** Ein neuer Docker-Stack: nur „Übernehmen“ — Etiketten gibt es unter Arcane nicht. */
+function StackKarte({ s, gesperrt, onWahl }: { s: NeuerStack; gesperrt: boolean; onWahl: (w: NeuWahl) => void }) {
+  return (
+    <li className="flaeche-innen flex flex-col gap-3 rounded-2xl p-4">
+      <div className="flex items-start gap-3">
+        <Geraetesymbol bild={geraetebild({ art: "container", name: s.name })} groesse="md" punkt="ok" />
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="text-[15px] font-semibold break-words">Docker-Stack {s.name}</span>
+          <span className="text-[13px] text-text-3">
+            unter Arcane{s.erstmals ? ` · entdeckt ${flugplanZeit(new Date(s.erstmals * 1000).toISOString()).toLowerCase()}` : ""}
+          </span>
+        </div>
+      </div>
+      <p className="m-0 text-sm break-words text-text-2">Container: {s.container.join(", ") || "–"}</p>
+      <Button size="sm" className="self-start" disabled={gesperrt} onClick={() => onWahl("beobachten")}>Übernehmen</Button>
+    </li>
+  )
+}
+
+export function NeuEntdeckt({ geraete, stacks = [], gesperrt, onWahl }: {
   geraete: NeuesGeraet[]
+  /** Neue Docker-Stacks unter Arcane (seit 25.09.2026). */
+  stacks?: NeuerStack[]
   gesperrt: boolean
   onWahl: (id: string, wahl: NeuWahl) => void
 }) {
   const [frage, setFrage] = useState<{ g: NeuesGeraet; wahl: NeuWahl } | null>(null)
-  if (geraete.length === 0) return null
+  const anzahl = geraete.length + stacks.length
+  if (anzahl === 0) return null
   return (
     <Panel titel="Neu entdeckt" id="neu">
       <p className={cn("-mt-2 text-[15px] text-text-2")}>
-        {geraete.length === 1 ? "Ein Gerät kennt" : `${geraete.length} Geräte kennt`} der Orchestrator noch nicht. Entscheide,
-        ob er {geraete.length === 1 ? "es" : "sie"} nur beobachtet oder auch aktualisieren darf.
+        {anzahl === 1 ? "Eins kennt" : `${anzahl} kennt`} der Orchestrator noch nicht. Entscheide, ob er
+        {anzahl === 1 ? " es" : " sie"} nur beobachtet oder auch aktualisieren darf.
       </p>
       <ul className="m-0 grid list-none gap-3 p-0 md:grid-cols-2">
         {geraete.map((g) => (
           <Karte key={g.id} g={g} gesperrt={gesperrt}
             onWahl={(wahl) => (wahl === "beobachten" ? onWahl(g.id, wahl) : setFrage({ g, wahl }))} />
         ))}
+        {stacks.map((s) => <StackKarte key={s.id} s={s} gesperrt={gesperrt} onWahl={(wahl) => onWahl(s.id, wahl)} />)}
       </ul>
       <Bestaetigen
         offen={!!frage}