round13: manuelle vs. echte Aenderungen trennen, Scan-Uebersicht ueber Navigation persistieren, ausgeblendete Dienste als Tab, Suche ueber Geraetenamen

apps/backend/src/db/client.ts

@@ -53,6 +53,8 @@ export function ensureSchema(): void {
       url TEXT NOT NULL,
       https INTEGER NOT NULL DEFAULT 0,
       visible INTEGER NOT NULL DEFAULT 1,
+      display_name_edited_manually INTEGER NOT NULL DEFAULT 0,
+      category_edited_manually INTEGER NOT NULL DEFAULT 0,
       port INTEGER NOT NULL,
       favicon TEXT,
       description TEXT,
@@ -123,6 +125,11 @@ export function ensureSchema(): void {
   // sich am bisherigen Verhalten nichts unerwartet ändert.
   ensureColumn("services", "visible", "INTEGER NOT NULL DEFAULT 1");
   ensureColumn("categories", "color", "TEXT");
+  // Für Datenbanken vor Einführung der Unterscheidung "manuell angepasst" vs.
+  // "vom Scan abweichend" bei displayName/category (siehe schema.ts). Default
+  // 0 (nicht manuell bearbeitet) ist für Bestandsdaten die richtige Annahme.
+  ensureColumn("services", "display_name_edited_manually", "INTEGER NOT NULL DEFAULT 0");
+  ensureColumn("services", "category_edited_manually", "INTEGER NOT NULL DEFAULT 0");
 }
 
 function ensureColumn(table: string, column: string, definition: string): void {

apps/backend/src/db/repositories/services.ts

@@ -91,6 +91,14 @@ export function createService(input: ServiceCreateInput): Service {
  * Für automatische Scan-Ergebnisse siehe upsertServiceFromScan() unten – die
  * NIEMALS displayName, category, favorite, order, alias, icon, hostname, url,
  * https oder visible eines bereits bekannten Dienstes überschreibt.
+ *
+ * Ein PATCH mit displayName/category markiert das jeweilige Feld standardmäßig
+ * als "manuell bearbeitet" (displayNameEditedManually/categoryEditedManually),
+ * damit ein späterer Scan-Vorschlag, der davon abweicht, in der Änderungs-
+ * übersicht klar als "weicht nur wegen deiner manuellen Anpassung ab" markiert
+ * werden kann statt als echte inhaltliche Änderung. Beim Übernehmen eines
+ * Scan-Vorschlags wird die jeweilige *EditedManually-Flag explizit auf false
+ * gesetzt (siehe ScannerPage/DevicesPage "Übernehmen"-Button).
  */
 export function updateService(id: string, input: ServiceUpdateInput): Service | null {
   const existing = getService(id);
@@ -98,12 +106,18 @@ export function updateService(id: string, input: ServiceUpdateInput): Service |
 
   db.update(services)
     .set({
-      ...(input.displayName !== undefined && { displayName: input.displayName }),
+      ...(input.displayName !== undefined && {
+        displayName: input.displayName,
+        displayNameEditedManually: input.displayNameEditedManually ?? true,
+      }),
       ...(input.hostname !== undefined && { hostname: input.hostname }),
       ...(input.url !== undefined && { url: input.url }),
       ...(input.https !== undefined && { https: input.https }),
       ...(input.port !== undefined && { port: input.port }),
-      ...(input.category !== undefined && { category: input.category }),
+      ...(input.category !== undefined && {
+        category: input.category,
+        categoryEditedManually: input.categoryEditedManually ?? true,
+      }),
       ...(input.icon !== undefined && { icon: input.icon }),
       ...(input.favicon !== undefined && { favicon: input.favicon }),
       ...(input.description !== undefined && { description: input.description }),
@@ -163,6 +177,14 @@ export interface ScanNameChange {
   field: "displayName" | "category";
   current: string | null;
   suggested: string;
+  /**
+   * true, wenn der aktuell gespeicherte Wert vom Scan-Vorschlag nur deshalb
+   * abweicht, weil der Nutzer ihn zuvor manuell angepasst hat (siehe
+   * displayNameEditedManually/categoryEditedManually). Solche Änderungen sind
+   * erwartbar/harmlos und sollten in der UI klar von echten inhaltlichen
+   * Änderungen getrennt dargestellt werden.
+   */
+  manualOverride: boolean;
 }
 
 export interface ScanUpsertResult {
@@ -201,6 +223,10 @@ export function upsertServiceFromScan(input: ServiceScanInput): ScanUpsertResult
   const timestamp = nowIso();
 
   if (existing) {
+    // Rohzeile inkl. der *EditedManually-Flags laden, die mapRow() bewusst
+    // nicht nach außen gibt (nur intern für den Vergleich hier relevant).
+    const existingRow = db.select().from(services).where(eq(services.id, existing.id)).get()!;
+
     db.update(services)
       .set({
         favicon: input.favicon ?? existing.favicon,
@@ -216,6 +242,7 @@ export function upsertServiceFromScan(input: ServiceScanInput): ScanUpsertResult
         field: "displayName",
         current: existing.displayName,
         suggested: input.suggestedDisplayName,
+        manualOverride: existingRow.displayNameEditedManually,
       });
     }
     if (
@@ -227,6 +254,7 @@ export function upsertServiceFromScan(input: ServiceScanInput): ScanUpsertResult
         field: "category",
         current: existing.category,
         suggested: input.suggestedCategory,
+        manualOverride: existingRow.categoryEditedManually,
       });
     }
 

apps/backend/src/db/schema.ts

@@ -42,6 +42,17 @@ export const services = sqliteTable("services", {
   https: integer("https", { mode: "boolean" }).notNull().default(false),
   // Ausgeblendete Dienste erscheinen nicht in der Suche, bleiben aber im Adminbereich.
   visible: integer("visible", { mode: "boolean" }).notNull().default(true),
+  // Wird true, sobald displayName/category einmal manuell über die Admin-UI
+  // gesetzt wurden (siehe updateService). Dient dazu, bei einem erneuten Scan
+  // zu erkennen: weicht der Wert vom Scan-Vorschlag ab, WEIL der Nutzer ihn
+  // manuell angepasst hat (harmlos, nur zur Info) oder weil sich der
+  // tatsächlich erkannte Wert geändert hat (echte Änderung)?
+  displayNameEditedManually: integer("display_name_edited_manually", { mode: "boolean" })
+    .notNull()
+    .default(false),
+  categoryEditedManually: integer("category_edited_manually", { mode: "boolean" })
+    .notNull()
+    .default(false),
 
   // Bei jedem Scan aktualisierbar
   port: integer("port").notNull(),

apps/frontend/src/hooks/usePersistedState.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+
+/**
+ * Wie useState, aber der Wert überlebt zusätzlich das Verlassen und erneute
+ * Betreten einer Seite (z. B. Scanner -> Geräte -> zurück zu Scanner), ohne
+ * dass ein laufender Scan erneut ausgeführt werden muss. Nutzt sessionStorage
+ * (pro Browser-Tab, weg nach Schließen des Tabs - bewusst kein dauerhafter
+ * Speicher, da es sich um vorübergehende "wartet auf Bestätigung"-Zustände
+ * handelt, keine echten Nutzdaten).
+ */
+export function usePersistedState<T>(key: string, initial: T): [T, (value: T | ((prev: T) => T)) => void] {
+  const storageKey = `launchpad:${key}`;
+
+  const [state, setState] = useState<T>(() => {
+    try {
+      const raw = sessionStorage.getItem(storageKey);
+      return raw !== null ? (JSON.parse(raw) as T) : initial;
+    } catch {
+      return initial;
+    }
+  });
+
+  const setPersisted = useCallback(
+    (value: T | ((prev: T) => T)) => {
+      setState((prev) => {
+        const next = typeof value === "function" ? (value as (p: T) => T)(prev) : value;
+        try {
+          sessionStorage.setItem(storageKey, JSON.stringify(next));
+        } catch {
+          // z. B. Speicher voll oder Privatmodus - dann bleibt der Zustand
+          // wenigstens für den Rest dieser Sitzung im Memory erhalten.
+        }
+        return next;
+      });
+    },
+    [storageKey]
+  );
+
+  return [state, setPersisted];
+}

apps/frontend/src/routes/HomePage.tsx

@@ -5,6 +5,7 @@ import { SearchInput, StatusBadge, ResultsList, FavoritesBar, Favicon, Button }
 import { rankServices, type SearchResult } from "@launchpad/shared";
 import { useServices } from "../hooks/useServices.js";
 import { useBookmarks } from "../hooks/useBookmarks.js";
+import { useDevices } from "../hooks/useDevices.js";
 import { useBackendHealth } from "../hooks/useBackendHealth.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useCategories } from "../hooks/useCategories.js";
@@ -92,6 +93,7 @@ export function HomePage() {
   const { health, error: healthError } = useBackendHealth();
   const { data: services, isLoading: servicesLoading, isError: servicesError } = useServices();
   const { data: bookmarks, isLoading: bookmarksLoading } = useBookmarks();
+  const { data: devices } = useDevices();
   const { data: categories } = useCategories();
   const { data: recentVisits } = useRecentVisits();
   const { data: readLaterItems } = useReadLater();
@@ -138,15 +140,20 @@ export function HomePage() {
   // Ausgeblendete Dienste (z. B. Fehlerseiten/nicht erreichbare Scan-Treffer,
   // siehe Admin -> Dienste) tauchen in der Suche nicht auf.
   const allItems: SearchResult[] = useMemo(() => {
+    const deviceHostnameById = new Map((devices ?? []).map((d) => [d.id, d.hostname]));
     const visibleServices: SearchResult[] = (services ?? [])
       .filter((s) => s.visible)
-      .map((s) => ({ ...s, kind: "service" as const }));
+      .map((s) => ({
+        ...s,
+        kind: "service" as const,
+        deviceHostname: deviceHostnameById.get(s.deviceId) ?? null,
+      }));
     const bookmarkItems: SearchResult[] = (bookmarks ?? []).map((b) => ({
       ...b,
       kind: "bookmark" as const,
     }));
     return [...visibleServices, ...bookmarkItems];
-  }, [services, bookmarks]);
+  }, [services, bookmarks, devices]);
 
   const results = useMemo(() => rankServices(allItems, query), [allItems, query]);
 

apps/frontend/src/routes/admin/DevicesPage.tsx

@@ -63,6 +63,8 @@ interface ScanNameChange {
   field: "displayName" | "category";
   current: string | null;
   suggested: string;
+  /** true = weicht nur ab, weil der Wert zuvor manuell bearbeitet wurde. */
+  manualOverride: boolean;
 }
 
 interface ScanResult {
@@ -184,8 +186,10 @@ function NameChangesReview({
   const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const applyMutation = useMutation({
-    mutationFn: (change: ScanNameChange) =>
-      patchService(change.serviceId, { [change.field]: change.suggested }),
+    mutationFn: (change: ScanNameChange) => {
+      const resetFlag = change.field === "displayName" ? "displayNameEditedManually" : "categoryEditedManually";
+      return patchService(change.serviceId, { [change.field]: change.suggested, [resetFlag]: false });
+    },
     onSuccess: (_data, change) => {
       setHandled((prev) => new Set(prev).add(`${change.serviceId}:${change.field}`));
       queryClient.invalidateQueries({ queryKey: ["services"] });
@@ -199,14 +203,13 @@ function NameChangesReview({
 
   const fieldLabel = (field: ScanNameChange["field"]) =>
     field === "displayName" ? "Name" : "Kategorie";
+  const manual = remaining.filter((c) => c.manualOverride);
+  const real = remaining.filter((c) => !c.manualOverride);
 
-  return (
-    <div className="mt-2 rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
-      <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
-        {remaining.length} erkannte Änderung(en) weichen vom gespeicherten Wert ab:
-      </p>
+  function renderList(list: ScanNameChange[]) {
+    return (
       <ul className="space-y-1">
-        {remaining.map((c) => (
+        {list.map((c) => (
           <li key={`${c.serviceId}:${c.field}`} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {c.serviceHostname}:{c.servicePort} – {fieldLabel(c.field)}: „{c.current ?? "–"}" → „{c.suggested}"
@@ -231,7 +234,28 @@ function NameChangesReview({
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
+    );
+  }
+
+  return (
+    <div className="mt-2 space-y-2">
+      {real.length > 0 ? (
+        <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
+          <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
+            {real.length} erkannte Änderung(en) weichen vom gespeicherten Wert ab:
+          </p>
+          {renderList(real)}
+        </div>
+      ) : null}
+      {manual.length > 0 ? (
+        <div className="rounded-xl border border-black/10 bg-black/[0.02] p-3 text-xs dark:border-white/10 dark:bg-white/[0.02]">
+          <p className="mb-2 font-medium text-black/60 dark:text-white/60">
+            {manual.length} Abweichung(en), weil du diesen Wert bereits manuell angepasst hast:
+          </p>
+          {renderList(manual)}
+        </div>
+      ) : null}
+      <button onClick={onDone} className="text-black/40 underline dark:text-white/40">
         Hinweis schließen
       </button>
     </div>

apps/frontend/src/routes/admin/ScannerPage.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button } from "@launchpad/ui";
 import type { Device, Service } from "@launchpad/shared";
 import { useDevices } from "../../hooks/useDevices.js";
+import { usePersistedState } from "../../hooks/usePersistedState.js";
 import { AdminPageHeader } from "./AdminPageHeader.js";
 
 interface DeviceChange {
@@ -62,6 +62,8 @@ interface ScanNameChange {
   field: "displayName" | "category";
   current: string | null;
   suggested: string;
+  /** true = weicht nur ab, weil der Wert zuvor manuell bearbeitet wurde (siehe unten). */
+  manualOverride: boolean;
 }
 
 async function patchService(id: string, patch: Record<string, unknown>) {
@@ -91,100 +93,128 @@ async function scanDeviceById(id: string) {
   };
 }
 
+function nameChangeKey(c: ScanNameChange): string {
+  return `${c.serviceId}:${c.field}`;
+}
+
+/**
+ * Übernimmt einen Namens-/Kategorie-Vorschlag des Scanners. Setzt dabei
+ * explizit die *EditedManually-Flag auf false zurück, damit der Dienst
+ * danach wieder als "vom Scan" statt "manuell angepasst" gilt.
+ */
+function acceptNameChange(c: ScanNameChange) {
+  const resetFlag = c.field === "displayName" ? "displayNameEditedManually" : "categoryEditedManually";
+  return patchService(c.serviceId, { [c.field]: c.suggested, [resetFlag]: false });
+}
+
 function NameChangesReview({
   nameChanges,
-  onDone,
+  onResolve,
 }: {
   nameChanges: ScanNameChange[];
-  onDone: () => void;
+  onResolve: (key: string) => void;
 }) {
   const queryClient = useQueryClient();
-  const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const applyMutation = useMutation({
-    mutationFn: (change: ScanNameChange) =>
-      patchService(change.serviceId, { [change.field]: change.suggested }),
+    mutationFn: acceptNameChange,
     onSuccess: (_data, change) => {
-      setHandled((prev) => new Set(prev).add(`${change.serviceId}:${change.field}`));
+      onResolve(nameChangeKey(change));
       queryClient.invalidateQueries({ queryKey: ["services"] });
     },
   });
 
-  const remaining = nameChanges.filter((c) => !handled.has(`${c.serviceId}:${c.field}`));
-  if (remaining.length === 0) return null;
+  if (nameChanges.length === 0) return null;
 
   const fieldLabel = (field: ScanNameChange["field"]) => (field === "displayName" ? "Name" : "Kategorie");
+  const manual = nameChanges.filter((c) => c.manualOverride);
+  const real = nameChanges.filter((c) => !c.manualOverride);
 
-  return (
-    <div className="mt-3 rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
-      <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
-        {remaining.length} erkannte Änderung(en) über alle gescannten Geräte hinweg weichen vom
-        gespeicherten Wert ab:
-      </p>
+  function renderList(list: ScanNameChange[]) {
+    return (
       <ul className="max-h-60 space-y-1 overflow-y-auto">
-        {remaining.map((c) => (
-          <li key={`${c.serviceId}:${c.field}`} className="flex items-center justify-between gap-2">
+        {list.map((c) => (
+          <li key={nameChangeKey(c)} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {c.serviceHostname}:{c.servicePort} – {fieldLabel(c.field)}: „{c.current ?? "–"}" → „
               {c.suggested}"
             </span>
             <div className="flex gap-1">
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setHandled((prev) => new Set(prev).add(`${c.serviceId}:${c.field}`))}
-              >
+              <Button size="sm" variant="ghost" onClick={() => onResolve(nameChangeKey(c))}>
                 Behalten
               </Button>
-              <Button size="sm" variant="primary" onClick={() => applyMutation.mutate(c)} disabled={applyMutation.isPending}>
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={() => applyMutation.mutate(c)}
+                disabled={applyMutation.isPending}
+              >
                 Übernehmen
               </Button>
             </div>
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
-        Hinweis schließen
-      </button>
+    );
+  }
+
+  return (
+    <div className="mt-3 space-y-3">
+      {real.length > 0 ? (
+        <div className="rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
+          <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
+            {real.length} erkannte Änderung(en) weichen vom gespeicherten Wert ab:
+          </p>
+          {renderList(real)}
+        </div>
+      ) : null}
+      {manual.length > 0 ? (
+        <div className="rounded-xl border border-black/10 bg-black/[0.02] p-3 text-xs dark:border-white/10 dark:bg-white/[0.02]">
+          <p className="mb-2 font-medium text-black/60 dark:text-white/60">
+            {manual.length} Abweichung(en), weil du diesen Wert bereits manuell angepasst hast – der
+            Scan schlägt lediglich erneut den automatisch erkannten Wert vor, es hat sich nichts am
+            Dienst selbst geändert:
+          </p>
+          {renderList(manual)}
+        </div>
+      ) : null}
     </div>
   );
 }
 
 function StaleServicesReview({
   staleServices,
-  onDone,
+  onResolve,
 }: {
   staleServices: Service[];
-  onDone: () => void;
+  onResolve: (id: string) => void;
 }) {
   const queryClient = useQueryClient();
-  const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const deleteMutation = useMutation({
     mutationFn: (id: string) => deleteServiceRequest(id),
     onSuccess: (_data, id) => {
-      setHandled((prev) => new Set(prev).add(id));
+      onResolve(id);
       queryClient.invalidateQueries({ queryKey: ["services"] });
     },
   });
 
-  const remaining = staleServices.filter((s) => !handled.has(s.id));
-  if (remaining.length === 0) return null;
+  if (staleServices.length === 0) return null;
 
   return (
     <div className="mt-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
       <p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
-        {remaining.length} Dienst(e) über alle gescannten Geräte hinweg nicht mehr gefunden (Port
+        {staleServices.length} Dienst(e) über alle gescannten Geräte hinweg nicht mehr gefunden (Port
         nicht mehr offen):
       </p>
       <ul className="max-h-60 space-y-1 overflow-y-auto">
-        {remaining.map((s) => (
+        {staleServices.map((s) => (
           <li key={s.id} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {s.displayName} ({s.hostname}:{s.port})
             </span>
             <div className="flex gap-1">
-              <Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(s.id))}>
+              <Button size="sm" variant="ghost" onClick={() => onResolve(s.id)}>
                 Behalten
               </Button>
               <Button
@@ -199,98 +229,95 @@ function StaleServicesReview({
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
-        Hinweis schließen
-      </button>
     </div>
   );
 }
 
 function DeviceChangesReview({
   deviceChanges,
-  onDone,
+  onResolve,
 }: {
   deviceChanges: DeviceChange[];
-  onDone: () => void;
+  onResolve: (key: string) => void;
 }) {
   const queryClient = useQueryClient();
-  const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const applyMutation = useMutation({
     mutationFn: (change: DeviceChange) => patchDevice(change.deviceId, { [change.field]: change.suggested }),
     onSuccess: (_data, change) => {
-      setHandled((prev) => new Set(prev).add(`${change.deviceId}:${change.field}`));
+      onResolve(`${change.deviceId}:${change.field}`);
       queryClient.invalidateQueries({ queryKey: ["devices"] });
     },
   });
 
-  const remaining = deviceChanges.filter((c) => !handled.has(`${c.deviceId}:${c.field}`));
-  if (remaining.length === 0) return null;
+  if (deviceChanges.length === 0) return null;
 
   const fieldLabel = (field: DeviceChange["field"]) => (field === "hostname" ? "Name" : "IP");
 
   return (
     <div className="mt-3 rounded-xl border border-blue-500/30 bg-blue-500/5 p-3 text-xs">
       <p className="mb-2 font-medium text-blue-700 dark:text-blue-400">
-        {remaining.length} Geräte-Änderung(en) weichen von den gespeicherten Werten ab:
+        {deviceChanges.length} Geräte-Änderung(en) weichen von den gespeicherten Werten ab:
       </p>
       <ul className="max-h-60 space-y-1 overflow-y-auto">
-        {remaining.map((c) => (
+        {deviceChanges.map((c) => (
           <li key={`${c.deviceId}:${c.field}`} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {c.deviceHostname} – {fieldLabel(c.field)}: „{c.current}" → „{c.suggested}"
             </span>
             <div className="flex gap-1">
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => setHandled((prev) => new Set(prev).add(`${c.deviceId}:${c.field}`))}
-              >
+              <Button size="sm" variant="ghost" onClick={() => onResolve(`${c.deviceId}:${c.field}`)}>
                 Behalten
               </Button>
-              <Button size="sm" variant="primary" onClick={() => applyMutation.mutate(c)} disabled={applyMutation.isPending}>
+              <Button
+                size="sm"
+                variant="primary"
+                onClick={() => applyMutation.mutate(c)}
+                disabled={applyMutation.isPending}
+              >
                 Übernehmen
               </Button>
             </div>
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
-        Hinweis schließen
-      </button>
     </div>
   );
 }
 
-function StaleDevicesReview({ staleDevices, onDone }: { staleDevices: Device[]; onDone: () => void }) {
+function StaleDevicesReview({
+  staleDevices,
+  onResolve,
+}: {
+  staleDevices: Device[];
+  onResolve: (id: string) => void;
+}) {
   const queryClient = useQueryClient();
-  const [handled, setHandled] = useState<Set<string>>(new Set());
 
   const deleteMutation = useMutation({
     mutationFn: (id: string) => deleteDeviceRequest(id),
     onSuccess: (_data, id) => {
-      setHandled((prev) => new Set(prev).add(id));
+      onResolve(id);
       queryClient.invalidateQueries({ queryKey: ["devices"] });
     },
   });
 
-  const remaining = staleDevices.filter((d) => !handled.has(d.id));
-  if (remaining.length === 0) return null;
+  if (staleDevices.length === 0) return null;
 
   return (
     <div className="mt-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 text-xs">
       <p className="mb-2 font-medium text-amber-700 dark:text-amber-400">
-        {remaining.length} Gerät(e), die die FritzBox früher gemeldet hatte, diesmal aber nicht
+        {staleDevices.length} Gerät(e), die die FritzBox früher gemeldet hatte, diesmal aber nicht
         mehr:
       </p>
       <ul className="space-y-1">
-        {remaining.map((d) => (
+        {staleDevices.map((d) => (
           <li key={d.id} className="flex items-center justify-between gap-2">
             <span className="text-black/70 dark:text-white/70">
               {d.hostname} ({d.ip})
             </span>
             <div className="flex gap-1">
-              <Button size="sm" variant="ghost" onClick={() => setHandled((prev) => new Set(prev).add(d.id))}>
+              <Button size="sm" variant="ghost" onClick={() => onResolve(d.id)}>
                 Behalten
               </Button>
               <Button
@@ -305,9 +332,6 @@ function StaleDevicesReview({ staleDevices, onDone }: { staleDevices: Device[];
           </li>
         ))}
       </ul>
-      <button onClick={onDone} className="mt-2 text-black/40 underline dark:text-white/40">
-        Hinweis schließen
-      </button>
     </div>
   );
 }
@@ -315,22 +339,41 @@ function StaleDevicesReview({ staleDevices, onDone }: { staleDevices: Device[];
 export function ScannerPage() {
   const queryClient = useQueryClient();
   const { data: devices } = useDevices();
-  const [bulkStatus, setBulkStatus] = useState<string | null>(null);
-  const [bulkRunning, setBulkRunning] = useState(false);
-  const [bulkStaleServices, setBulkStaleServices] = useState<Service[]>([]);
-  const [bulkNameChanges, setBulkNameChanges] = useState<ScanNameChange[]>([]);
-  const [staleDevices, setStaleDevices] = useState<Device[]>([]);
-  const [deviceChanges, setDeviceChanges] = useState<DeviceChange[]>([]);
+
+  const [bulkStatus, setBulkStatus] = usePersistedState<string | null>("scanner:bulkStatus", null);
+  const [bulkRunning, setBulkRunning] = usePersistedState<boolean>("scanner:bulkRunning", false);
+  const [bulkStaleServices, setBulkStaleServices] = usePersistedState<Service[]>(
+    "scanner:bulkStaleServices",
+    []
+  );
+  const [bulkNameChanges, setBulkNameChanges] = usePersistedState<ScanNameChange[]>(
+    "scanner:bulkNameChanges",
+    []
+  );
+  const [staleDevices, setStaleDevices] = usePersistedState<Device[]>("scanner:staleDevices", []);
+  const [deviceChanges, setDeviceChanges] = usePersistedState<DeviceChange[]>(
+    "scanner:deviceChanges",
+    []
+  );
+  const [fritzboxSummary, setFritzboxSummary] = usePersistedState<
+    { found: number; uniqueDevices: number } | null
+  >("scanner:fritzboxSummary", null);
+  const [fritzboxError, setFritzboxError] = usePersistedState<string | null>(
+    "scanner:fritzboxError",
+    null
+  );
 
   const fritzboxMutation = useMutation({
     mutationFn: scanFritzBox,
     onSuccess: (result) => {
+      setFritzboxSummary({ found: result.found, uniqueDevices: result.uniqueDevices });
+      setFritzboxError(null);
       setStaleDevices(result.staleDevices);
       setDeviceChanges(result.deviceChanges);
       queryClient.invalidateQueries({ queryKey: ["devices"] });
       queryClient.invalidateQueries({ queryKey: ["logs"] });
-      return result;
     },
+    onError: (error: Error) => setFritzboxError(error.message),
   });
 
   async function scanAllDevices() {
@@ -356,12 +399,6 @@ export function ScannerPage() {
       }
     }
 
-    // "updated" zählt jeden bereits bekannten Dienst, dessen Favicon/Beschreibung
-    // aufgefrischt wurde - das ist normal und keine "Änderung" im Sinne von
-    // Namens-/Kategorie-Anpassungen. Deshalb hier NICHT mit anzeigen, um nicht
-    // den Eindruck zu erwecken, es sei bereits etwas Wichtiges verändert
-    // worden. Echte Änderungen/verschwundene Dienste stehen explizit unten in
-    // den Listen und müssen einzeln bestätigt werden.
     void updated;
     const pending = allNameChanges.length + allStale.length;
     setBulkStatus(
@@ -403,25 +440,25 @@ export function ScannerPage() {
           >
             {fritzboxMutation.isPending ? "Scanne …" : "FritzBox jetzt scannen"}
           </Button>
-          {fritzboxMutation.isSuccess ? (
+          {fritzboxSummary ? (
             <p className="mt-2 text-sm text-emerald-600 dark:text-emerald-400">
-              {fritzboxMutation.data.found} Eintrag/Einträge von der FritzBox,{" "}
-              {fritzboxMutation.data.uniqueDevices} eindeutige Geräte
-              {fritzboxMutation.data.found !== fritzboxMutation.data.uniqueDevices
+              {fritzboxSummary.found} Eintrag/Einträge von der FritzBox,{" "}
+              {fritzboxSummary.uniqueDevices} eindeutige Geräte
+              {fritzboxSummary.found !== fritzboxSummary.uniqueDevices
                 ? " (mehrere Einträge desselben Geräts wurden zusammengeführt)"
                 : ""}
               .
             </p>
           ) : null}
-          {fritzboxMutation.isError ? (
-            <p className="mt-2 text-sm text-red-500">{(fritzboxMutation.error as Error).message}</p>
-          ) : null}
-          {deviceChanges.length > 0 ? (
-            <DeviceChangesReview deviceChanges={deviceChanges} onDone={() => setDeviceChanges([])} />
-          ) : null}
-          {staleDevices.length > 0 ? (
-            <StaleDevicesReview staleDevices={staleDevices} onDone={() => setStaleDevices([])} />
-          ) : null}
+          {fritzboxError ? <p className="mt-2 text-sm text-red-500">{fritzboxError}</p> : null}
+          <DeviceChangesReview
+            deviceChanges={deviceChanges}
+            onResolve={(key) => setDeviceChanges((prev) => prev.filter((c) => `${c.deviceId}:${c.field}` !== key))}
+          />
+          <StaleDevicesReview
+            staleDevices={staleDevices}
+            onResolve={(id) => setStaleDevices((prev) => prev.filter((d) => d.id !== id))}
+          />
         </div>
 
         <div className="rounded-2xl border border-black/10 p-5 dark:border-white/10">
@@ -442,15 +479,14 @@ export function ScannerPage() {
           {bulkStatus ? (
             <p className="mt-2 text-sm text-black/50 dark:text-white/50">{bulkStatus}</p>
           ) : null}
-          {bulkNameChanges.length > 0 ? (
-            <NameChangesReview nameChanges={bulkNameChanges} onDone={() => setBulkNameChanges([])} />
-          ) : null}
-          {bulkStaleServices.length > 0 ? (
-            <StaleServicesReview
-              staleServices={bulkStaleServices}
-              onDone={() => setBulkStaleServices([])}
-            />
-          ) : null}
+          <NameChangesReview
+            nameChanges={bulkNameChanges}
+            onResolve={(key) => setBulkNameChanges((prev) => prev.filter((c) => nameChangeKey(c) !== key))}
+          />
+          <StaleServicesReview
+            staleServices={bulkStaleServices}
+            onResolve={(id) => setBulkStaleServices((prev) => prev.filter((s) => s.id !== id))}
+          />
         </div>
       </div>
     </div>

apps/frontend/src/routes/admin/ServicesPage.tsx

@@ -426,6 +426,7 @@ export function ServicesPage() {
   const [localOrder, setLocalOrder] = useState<Service[] | null>(null);
   const [sortColumn, setSortColumn] = useState<SortColumn>(null);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+  const [activeTab, setActiveTab] = useState<"visible" | "hidden">("visible");
 
   const macByDeviceId = useMemo(() => {
     const map: Record<string, string | null> = {};
@@ -456,10 +457,15 @@ export function ServicesPage() {
 
   const baseList = localOrder ?? services ?? [];
   const hiddenCount = services?.filter((s) => !s.visible).length ?? 0;
+  const visibleCount = services ? services.length - hiddenCount : 0;
+  const tabFilteredBase = useMemo(
+    () => baseList.filter((s) => (activeTab === "visible" ? s.visible : !s.visible)),
+    [baseList, activeTab]
+  );
 
   const list = useMemo(() => {
-    if (!sortColumn) return baseList;
-    const sorted = [...baseList].sort((a, b) => {
+    if (!sortColumn) return tabFilteredBase;
+    const sorted = [...tabFilteredBase].sort((a, b) => {
       let cmp = 0;
       switch (sortColumn) {
         case "displayName":
@@ -491,7 +497,7 @@ export function ServicesPage() {
       return sortDirection === "asc" ? cmp : -cmp;
     });
     return sorted;
-  }, [baseList, sortColumn, sortDirection, ipByDeviceId]);
+  }, [tabFilteredBase, sortColumn, sortDirection, ipByDeviceId]);
 
   function handleHeaderClick(column: SortColumn) {
     if (sortColumn === column) {
@@ -539,13 +545,32 @@ export function ServicesPage() {
     <div>
       <AdminPageHeader
         title="Dienste"
-        description={
-          hiddenCount > 0
-            ? `Spaltenköpfe anklickbar zum Sortieren; Drag & Drop (⠿⠿) nur in der Standard-Reihenfolge. Name, Kategorie, Alias, IP/Port/Protokoll und Reihenfolge bleiben bei erneuten Scans erhalten. ${hiddenCount} Dienst(e) sind aktuell in der Suche ausgeblendet (🙈).`
-            : "Spaltenköpfe anklickbar zum Sortieren; Drag & Drop (⠿⠿) nur in der Standard-Reihenfolge. Name, Kategorie, Alias, IP/Port/Protokoll und Reihenfolge bleiben bei erneuten Scans erhalten."
-        }
+        description="Spaltenköpfe anklickbar zum Sortieren; Drag & Drop (⠿⠿) nur in der Standard-Reihenfolge. Name, Kategorie, Alias, IP/Port/Protokoll und Reihenfolge bleiben bei erneuten Scans erhalten."
       />
 
+      <div className="mb-4 flex gap-1 border-b border-black/10 dark:border-white/10">
+        <button
+          onClick={() => setActiveTab("visible")}
+          className={`px-3 py-2 text-sm font-medium ${
+            activeTab === "visible"
+              ? "border-b-2 border-black text-black dark:border-white dark:text-white"
+              : "text-black/40 hover:text-black/70 dark:text-white/40 dark:hover:text-white/70"
+          }`}
+        >
+          Sichtbar ({visibleCount})
+        </button>
+        <button
+          onClick={() => setActiveTab("hidden")}
+          className={`px-3 py-2 text-sm font-medium ${
+            activeTab === "hidden"
+              ? "border-b-2 border-black text-black dark:border-white dark:text-white"
+              : "text-black/40 hover:text-black/70 dark:text-white/40 dark:hover:text-white/70"
+          }`}
+        >
+          🙈 Ausgeblendet ({hiddenCount})
+        </button>
+      </div>
+
       {sortColumn ? (
         <div className="mb-3">
           <Button size="sm" variant="ghost" onClick={() => setSortColumn(null)}>
@@ -600,8 +625,9 @@ export function ServicesPage() {
         </div>
       ) : (
         <p className="text-sm text-black/40 dark:text-white/40">
-          Noch keine Dienste vorhanden. Scanne ein Gerät unter „Geräte“, um automatisch welche
-          zu finden, oder importiere eine Liste oben.
+          {activeTab === "hidden"
+            ? "Keine ausgeblendeten Dienste."
+            : "Noch keine Dienste vorhanden. Scanne ein Gerät unter „Geräte“, um automatisch welche zu finden, oder importiere eine Liste oben."}
         </p>
       )}
     </div>