Feat: Gedächtnis-Tab überarbeitet — Sigma.js-Graph (skaliert), Liste als Default + gruppiert

Graph: reagraph (three.js, schwer, hing Renderer) → Sigma.js v3 + graphology (graph-optimiertes WebGL,
skaliert auf tausende Knoten), im App-Look: Kategorie-Farben, Knotengröße nach Verknüpfungen,
Hover-Highlight (Nachbarn hervor, Rest dimmt), Legende. Liste ist jetzt Default + nach Kategorie
gruppierte Sektionen (statt flacher Wand). reagraph deinstalliert → leichteres Bundle.

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

frontend/src/views/MemoryView.tsx

@@ -9,7 +9,7 @@ import { useDialog } from "@/lib/useDialog"
 import { cn } from "@/lib/utils"
 import { GraphErrorBoundary } from "./GraphErrorBoundary"
 
-// reagraph + three.js sind schwer → erst laden, wenn der Graph-Tab geöffnet wird.
+// Sigma/graphology nur laden, wenn der Graph-Tab geöffnet wird (Code-Splitting).
 const GraphView = lazy(() => import("./GraphView").then((m) => ({ default: m.GraphView })))
 
 const CATEGORIES = ["identity", "knowledge", "rules", "events"]
@@ -48,7 +48,7 @@ export function MemoryView() {
   const [category, setCategory] = useState("knowledge")
   const [deduping, setDeduping] = useState(false)
   const [copied, setCopied] = useState(false)
-  const [view, setView] = useState<"liste" | "graph">("graph")
+  const [view, setView] = useState<"liste" | "graph">("liste")
   const [showAdd, setShowAdd] = useState(false)
 
   const qc = useQueryClient()
@@ -80,6 +80,14 @@ export function MemoryView() {
     return { nodes: ns, edges: g.edges.filter((e) => ids.has(e.source) && ids.has(e.target)) }
   }, [graph, q])
 
+  // Liste nach Kategorie gruppieren (skaliert: klare Sektionen statt einer flachen Wand).
+  const grouped = useMemo(() => {
+    const g: Record<string, (typeof items)[number][]> = {}
+    items.forEach((m) => { (g[m.category] ??= []).push(m) })
+    return g
+  }, [items])
+  const otherItems = useMemo(() => items.filter((m) => !CATEGORIES.includes(m.category)), [items])
+
   async function add() {
     if (!content.trim()) return
     await api("/api/memory", { method: "POST", body: JSON.stringify({ content, category, source: "ui" }) })
@@ -277,42 +285,56 @@ export function MemoryView() {
             })}
           </div>
 
-          <div className="space-y-3">
-            {items.length === 0 ? (
-              <div className="text-xs text-muted-foreground border border-dashed border-border/60 rounded-2xl p-12 text-center">
-                Keine Einträge für die aktuellen Filterkriterien gefunden.
-              </div>
-            ) : items.map((m) => {
-              const conf = CAT_CONFIG[m.category] || DEFAULT_CAT
-              const Icon = conf.icon
-              const isAuto = AUTO_SOURCES.has(m.source)
-              return (
-                <div key={m.id} className={cn("flex items-start justify-between gap-4 p-4 rounded-xl border border-l-4 bg-card/45 backdrop-blur-md border-border/60 shadow-md shadow-black/5 hover:border-primary/20 transition-all group",
-                  BORDER_CLASSES[m.category] || "border-l-muted")}>
-                  <div className="flex items-start gap-3 flex-1 min-w-0">
-                    <span className={cn("flex items-center gap-1 px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider font-mono shrink-0", conf.bg, conf.text)}>
-                      <Icon className="h-3 w-3" /><span className="hidden sm:inline">{conf.label}</span>
-                    </span>
-                    <span className="text-xs text-foreground leading-relaxed break-words whitespace-pre-wrap flex-1">{m.content}</span>
+          {items.length === 0 ? (
+            <div className="text-xs text-muted-foreground border border-dashed border-border/60 rounded-2xl p-12 text-center">
+              Keine Einträge für die aktuellen Filterkriterien gefunden.
+            </div>
+          ) : (
+            <div className="space-y-5">
+              {[...CATEGORIES, "__other"].map((c) => {
+                const list = c === "__other" ? otherItems : (grouped[c] || [])
+                if (!list.length) return null
+                const conf = CAT_CONFIG[c] || DEFAULT_CAT
+                const Icon = conf.icon
+                return (
+                  <div key={c}>
+                    {/* Sektions-Kopf je Kategorie */}
+                    <div className="flex items-center gap-2 mb-2 px-1">
+                      <Icon className={cn("h-3.5 w-3.5", conf.text)} />
+                      <span className={cn("text-[11px] font-bold uppercase tracking-wider", conf.text)}>{conf.label}</span>
+                      <span className="text-[10px] font-mono text-muted-foreground/60 bg-card/50 rounded px-1.5 py-0.5">{list.length}</span>
+                      <div className="ml-1 h-px flex-1 bg-border/30" />
+                    </div>
+                    <div className="space-y-2">
+                      {list.map((m) => {
+                        const isAuto = AUTO_SOURCES.has(m.source)
+                        return (
+                          <div key={m.id} className={cn("flex items-start justify-between gap-4 p-3.5 rounded-xl border border-l-4 bg-card/45 backdrop-blur-md border-border/60 hover:border-primary/20 transition-all group",
+                            BORDER_CLASSES[m.category] || "border-l-muted")}>
+                            <span className="text-xs text-foreground leading-relaxed break-words whitespace-pre-wrap flex-1 min-w-0">{m.content}</span>
+                            <div className="flex items-center gap-2 shrink-0">
+                              {typeof m.score === "number" && (
+                                <span className="text-[9px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded" title="Relevanz der semantischen Suche">{Math.round(m.score * 100)}%</span>
+                              )}
+                              <span className={cn("flex items-center gap-1 text-[9px] font-mono px-1.5 py-0.5 rounded",
+                                isAuto ? "text-emerald-400 bg-emerald-500/10" : "text-muted-foreground/60 bg-background/20")}
+                                title={isAuto ? "Automatisch gelernt" : "Manuell angelegt"}>
+                                {isAuto && <Sparkles className="h-2.5 w-2.5" />}{m.source}
+                              </span>
+                              <button onClick={() => del(m.id)} title="Eintrag löschen"
+                                className="h-7 w-7 rounded-lg flex items-center justify-center border border-border/40 text-muted-foreground hover:text-red-400 hover:bg-red-500/5 transition-all opacity-0 group-hover:opacity-100">
+                                <Trash2 className="h-3.5 w-3.5" />
+                              </button>
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
                   </div>
-                  <div className="flex items-center gap-3 shrink-0">
-                    {typeof m.score === "number" && (
-                      <span className="text-[9px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded uppercase tracking-wider" title="Relevanz der semantischen Suche">{Math.round(m.score * 100)}%</span>
-                    )}
-                    <span className={cn("flex items-center gap-1 text-[9px] font-mono px-1.5 py-0.5 rounded uppercase tracking-wider",
-                      isAuto ? "text-emerald-400 bg-emerald-500/10" : "text-muted-foreground/60 bg-background/20")}
-                      title={isAuto ? "Automatisch gelernt" : "Manuell angelegt"}>
-                      {isAuto && <Sparkles className="h-2.5 w-2.5" />}{m.source}
-                    </span>
-                    <button onClick={() => del(m.id)} title="Eintrag löschen"
-                      className="h-7 w-7 rounded-lg flex items-center justify-center border border-border/40 text-muted-foreground hover:text-red-400 hover:bg-red-500/5 transition-all opacity-0 group-hover:opacity-100">
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </button>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
+                )
+              })}
+            </div>
+          )}
         </>
       )}