UI: Redesign active roles overview to slot-centric list in Dashboard and ModelsView

frontend/src/views/ModelsView.tsx

@@ -788,6 +788,54 @@ function Cockpit() {
         </div>
       </div>
 
+      {/* ZONE B.5: Slot-Belegung */}
+      <div className="rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md p-5 shadow-lg shadow-black/10 space-y-3.5">
+        <div className="text-xs font-bold uppercase tracking-wider text-muted-foreground px-1">
+          Gateway Steckplatz-Belegung (Slot-Zuweisung)
+        </div>
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+          {["fast", "heavy", "coder", "reasoning", "vision", "scout"].map((role) => {
+            const m = models.find((x) => x.role === role)
+            const isWarm = m ? running.includes(m.name) : false
+
+            return (
+              <div 
+                key={role}
+                onClick={() => setActiveRoleForAssign(role)}
+                className={cn(
+                  "rounded-xl border p-3 flex flex-col justify-between gap-2.5 transition-all cursor-pointer select-none text-left bg-background/25 hover:border-primary/45 hover:bg-background/40 group min-h-[90px]",
+                  isWarm 
+                    ? "border-emerald-500/40 shadow-sm shadow-emerald-500/5" 
+                    : m 
+                      ? "border-primary/20 bg-primary/5" 
+                      : "border-border/30 border-dashed opacity-75"
+                )}
+              >
+                <div className="flex items-center justify-between">
+                  <span className={cn("text-[9px] font-bold uppercase tracking-wider font-mono px-1.5 py-0.5 rounded border",
+                    role === "fast" ? "bg-cyan-500/10 text-cyan-400 border-cyan-500/20" :
+                    role === "heavy" ? "bg-amber-500/10 text-amber-400 border-amber-500/20" :
+                    role === "coder" ? "bg-violet-500/10 text-violet-400 border-violet-500/20" :
+                    role === "reasoning" ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/20" :
+                    role === "vision" ? "bg-pink-500/10 text-pink-400 border-pink-500/20" :
+                    "bg-teal-500/10 text-teal-400 border-teal-500/20"
+                  )}>{role}</span>
+                  {isWarm && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />}
+                </div>
+                
+                <div className="text-[10px] font-mono font-medium truncate text-foreground/90 pr-1 font-space" title={m?.name}>
+                  {m ? m.name.split("/").pop()?.replace(/\.gguf$/i, "") : "nicht zugewiesen"}
+                </div>
+                
+                <div className="text-[8px] text-primary/70 group-hover:text-primary font-bold uppercase tracking-wider transition-colors font-space">
+                  Ändern ➔
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
       {/* ZONE C: Library list cards & Upgrade Radar */}
       <div className="space-y-4">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-1">