Welle 2 · Befundliste mit Ablauf: neu, gesehen, 24 h stumm; Puffer gegen Flackern

Jeder Hinweis hat jetzt einen Zustand (neu, gesehen, stumm bis …) mit Knöpfen in beiden Cockpits; das Homelab-Cockpit
nutzt dieselbe Liste wie die KI-Box (Knöpfe gehen an den Homelab-Teil, neue Route). Stumm heißt: keine
Telegram-Erinnerungen, unten in der Liste, keine Warnleuchte — verschärft er sich von gelb auf rot, gilt stumm nicht
mehr. Ein Hinweis ist erst erledigt, wenn sein Befund drei Takte am Stück fehlt: Kurze Wackler bringen kein „Erledigt“
und gleich danach keinen neuen Alarm.

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

frontend/src/components/cockpit/Befundliste.test.tsx

@@ -0,0 +1,41 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { fireEvent, render, screen, waitFor } from "@testing-library/react"
+import { post } from "@/lib/api"
+import type { Hinweis } from "@/lib/typen"
+import { Checkliste } from "./Checkliste"
+
+vi.mock("@/lib/api", async (original) => ({ ...(await original<typeof import("@/lib/api")>()), post: vi.fn() }))
+
+// Befundliste mit Ablauf (Ausbauplan Welle 2, Punkt 10, 25.09.2026): Zustand je Hinweis und die Knöpfe dafür.
+const jetzt = Math.floor(Date.now() / 1000)
+const hinweis: Hinweis = {
+  id: "ablauf:timer:mc2-radar", stufe: "gelb", titel: "Modell-Radar ist überfällig", text: "Zuletzt vor 30 Stunden.",
+  quelle: "mc2-radar", seit: jetzt - 3600, zuletzt: jetzt - 30, aktionen: [], zustand: "neu",
+}
+
+function zeigen(h: Hinweis, basis?: string) {
+  vi.mocked(post).mockResolvedValue({ ok: true, text: "Als gesehen markiert." })
+  render(
+    <QueryClientProvider client={new QueryClient()}>
+      <Checkliste hinweise={[h]} verlauf={[]} basis={basis} />
+    </QueryClientProvider>,
+  )
+}
+
+describe("Befundliste", () => {
+  it("neue Hinweise lassen sich als gesehen markieren oder 24 h stumm schalten — im Homelab beim Homelab-Teil", async () => {
+    zeigen(hinweis, "/api/homelab/hinweise")
+    expect(screen.getByText("· neu")).toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: "24 h stumm" }))
+    await waitFor(() => expect(post).toHaveBeenCalledWith("/api/homelab/hinweise/ablauf%3Atimer%3Amc2-radar/aktion/stumm"))
+    expect(screen.getByRole("button", { name: "Gesehen" })).toBeInTheDocument()
+  })
+
+  it("stumme stehen gedämpft da und lassen sich wieder laut schalten", async () => {
+    zeigen({ ...hinweis, zustand: "stumm", stumm_bis: jetzt + 20 * 3600 })
+    expect(screen.getByText(/stumm bis/)).toBeInTheDocument()
+    expect(screen.queryByRole("button", { name: "24 h stumm" })).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole("button", { name: "Wieder melden" }))
+    await waitFor(() => expect(post).toHaveBeenCalledWith("/api/hinweise/ablauf%3Atimer%3Amc2-radar/aktion/laut"))
+  })
+})

frontend/src/components/cockpit/Checkliste.tsx

@@ -6,16 +6,17 @@ import { hinweisRueckfrage } from "@/lib/anzeige"
 import { post } from "@/lib/api"
 import { melden } from "@/lib/meldungen"
 import type { AktionsErgebnis, Hinweis, HinweisAktion, VerlaufEintrag } from "@/lib/typen"
-import { seit, vor } from "@/lib/zeit"
+import { flugplanZeit, seit, vor } from "@/lib/zeit"
 
 // Erst laden, wenn jemand ein Protokoll öffnet oder eine Rückfrage kommt — die Radix-Dialog-Kette
 // gehört nicht ins Start-Bündel.
 const Protokollfenster = lazy(() => import("./Protokollfenster").then((m) => ({ default: m.Protokollfenster })))
 const Bestaetigen = lazy(() => import("./Bestaetigen").then((m) => ({ default: m.Bestaetigen })))
 
-/** Ein offener Punkt: Titel · Leitpunkte · PRÜFEN/JETZT, darunter Text und Knöpfe. */
-function Punkt({ h }: { h: Hinweis }) {
-  const aktion = useHinweisAktion()
+/** Ein offener Punkt: Titel · Leitpunkte · PRÜFEN/JETZT, darunter Text und Knöpfe. Seit 25.09.2026 mit Zustand
+ *  (neu, gesehen, stumm bis …) und den Knöpfen dafür; stumme stehen gedämpft unten. */
+function Punkt({ h, basis }: { h: Hinweis; basis: string }) {
+  const aktion = useHinweisAktion(basis)
   const [protokoll, setProtokoll] = useState<{ titel: string; text: string } | null>(null)
   const [frage, setFrage] = useState<HinweisAktion | null>(null)
   const rot = h.stufe === "rot"
@@ -23,7 +24,7 @@ function Punkt({ h }: { h: Hinweis }) {
 
   async function protokollZeigen() {
     try {
-      const e = await post<AktionsErgebnis>(`/api/hinweise/${encodeURIComponent(h.id)}/aktion/protokoll`)
+      const e = await post<AktionsErgebnis>(`${basis}/${encodeURIComponent(h.id)}/aktion/protokoll`)
       setProtokoll({ titel: h.titel, text: e.text || e.out || e.err || "Kein Protokoll vorhanden." })
     } catch (f) {
       melden("fehler", (f as Error).message)
@@ -41,9 +42,10 @@ function Punkt({ h }: { h: Hinweis }) {
     else ausfuehren(a)
   }
 
+  const stumm = h.zustand === "stumm"
   return (
     <article className={cn("flex flex-col gap-2.5 rounded-2xl px-4 py-3.5 ring-1 ring-inset",
-      rot ? "bg-rot/[0.07] ring-rot/35" : "bg-bernstein/[0.06] ring-bernstein/30")}>
+      stumm ? "bg-white/[0.03] opacity-70 ring-white/10" : rot ? "bg-rot/[0.07] ring-rot/35" : "bg-bernstein/[0.06] ring-bernstein/30")}>
       <div className="flex items-center gap-3">
         <h3 className="min-w-0 flex-1 font-sans text-[16.5px] leading-snug font-semibold">{h.titel}</h3>
         <span className={cn("etikett shrink-0 rounded-full px-2.5 py-0.5 text-[10.5px] tracking-[0.12em] ring-1 ring-inset",
@@ -53,23 +55,40 @@ function Punkt({ h }: { h: Hinweis }) {
       </div>
       <p className="ziffern text-[13px] text-text-3">
         {seit(h.seit)} · zuletzt {vor(h.zuletzt)}
+        {h.zustand === "neu" && <span className="font-sans text-cyan-text"> · neu</span>}
+        {stumm && h.stumm_bis && (
+          <span className="font-sans"> · stumm bis {flugplanZeit(new Date(h.stumm_bis * 1000).toISOString()).toLowerCase()}</span>
+        )}
       </p>
       {h.text && <p className="text-[15px] leading-relaxed break-words text-text-2">{h.text}</p>}
-      {h.aktionen.length > 0 && (
-        <div className="flex flex-wrap gap-2.5 pt-1">
-          {h.aktionen.map((a, i) => (
-            <Button
-              key={a.id}
-              variant={i === 0 && a.id !== "protokoll" ? "default" : "outline"}
-              size="sm"
-              disabled={aktion.isPending}
-              onClick={() => klick(a)}
-            >
-              {a.label}
-            </Button>
-          ))}
-        </div>
-      )}
+      <div className="flex flex-wrap gap-2.5 pt-1">
+        {h.aktionen.map((a, i) => (
+          <Button
+            key={a.id}
+            variant={i === 0 && a.id !== "protokoll" ? "default" : "outline"}
+            size="sm"
+            disabled={aktion.isPending}
+            onClick={() => klick(a)}
+          >
+            {a.label}
+          </Button>
+        ))}
+        {h.zustand === "neu" && (
+          <Button variant="ghost" size="sm" disabled={aktion.isPending} onClick={() => ausfuehren({ id: "gesehen", label: "Gesehen" })}>
+            Gesehen
+          </Button>
+        )}
+        {h.zustand && !stumm && (
+          <Button variant="ghost" size="sm" disabled={aktion.isPending} onClick={() => ausfuehren({ id: "stumm", label: "24 h stumm" })}>
+            24 h stumm
+          </Button>
+        )}
+        {stumm && (
+          <Button variant="ghost" size="sm" disabled={aktion.isPending} onClick={() => ausfuehren({ id: "laut", label: "Wieder melden" })}>
+            Wieder melden
+          </Button>
+        )}
+      </div>
       {protokoll && (
         <Suspense fallback={null}>
           <Protokollfenster offen titel={protokoll.titel} text={protokoll.text} onSchliessen={() => setProtokoll(null)} />
@@ -95,7 +114,12 @@ function Punkt({ h }: { h: Hinweis }) {
   )
 }
 
-export function Checkliste({ hinweise, verlauf }: { hinweise: Hinweis[]; verlauf: VerlaufEintrag[] }) {
+export function Checkliste({ hinweise, verlauf, basis = "/api/hinweise" }: {
+  hinweise: Hinweis[]
+  verlauf: VerlaufEintrag[]
+  /** Wohin die Knöpfe gehen: KI-Box oder Homelab-Teil (seit 25.09.2026). */
+  basis?: string
+}) {
   const heute = new Date().toDateString()
   const erledigtHeute = verlauf.filter(
     (v) => (v.art === "erledigt" || v.art === "auto") && new Date(v.ts * 1000).toDateString() === heute,
@@ -119,7 +143,7 @@ export function Checkliste({ hinweise, verlauf }: { hinweise: Hinweis[]; verlauf
   return (
     <div className="flex flex-col gap-3">
       {hinweise.map((h) => (
-        <Punkt key={h.id} h={h} />
+        <Punkt key={h.id} h={h} basis={basis} />
       ))}
     </div>
   )