feat: complete UI/UX Rework into Sleek Glassmorphic AI OS (June 2026)

frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react"
-import { Command as CommandIcon, Moon, Sun } from "lucide-react"
+import { Command as CommandIcon, Moon, Sun, ChevronLeft, ChevronRight, Cpu } from "lucide-react"
 import { NAV, type ViewId } from "@/nav"
 import { CommandPalette } from "@/components/CommandPalette"
+import { DashboardView } from "@/views/DashboardView"
 import { ModelsView } from "@/views/ModelsView"
 import { RoutingView } from "@/views/RoutingView"
 import { SystemView } from "@/views/SystemView"
@@ -9,13 +10,17 @@ import { ConnectView } from "@/views/ConnectView"
 import { MemoryView } from "@/views/MemoryView"
 import { AgentView } from "@/views/AgentView"
 import { Placeholder } from "@/views/Placeholder"
-import { api, type Health } from "@/lib/api"
+import { SystemDrawer } from "@/components/SystemDrawer"
+import { api, type Health, type UpdatesResp } from "@/lib/api"
 import { cn } from "@/lib/utils"
 
 export default function App() {
-  const [view, setView] = useState<ViewId>("models")
+  const [view, setView] = useState<ViewId>("dashboard")
   const [health, setHealth] = useState<Health | null>(null)
   const [dark, setDark] = useState(() => localStorage.getItem("mc_theme") !== "light")
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem("mc_sidebar_collapsed") === "true")
+  const [updates, setUpdates] = useState<UpdatesResp | null>(null)
+  const [drawerOpen, setDrawerOpen] = useState(false)
 
   useEffect(() => {
     const load = () => api<Health>("/api/health").then(setHealth).catch(() => setHealth(null))
@@ -24,109 +29,171 @@ export default function App() {
     return () => clearInterval(t)
   }, [])
 
+  useEffect(() => {
+    const loadUpdates = () => api<UpdatesResp>("/api/maintenance/updates").then(setUpdates).catch(() => {})
+    loadUpdates()
+    const t = setInterval(loadUpdates, 20000)
+    return () => clearInterval(t)
+  }, [])
+
   useEffect(() => {
     document.documentElement.classList.toggle("dark", dark)
     localStorage.setItem("mc_theme", dark ? "dark" : "light")
   }, [dark])
 
   const active = NAV.find((n) => n.id === view)!
+  const totalUpdates = updates ? (updates.os + updates.engine + updates.models) : 0
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full relative">
+      {/* Background Aurora Ambient Effects */}
+      <div className="fixed inset-0 -z-50 pointer-events-none overflow-hidden bg-[hsl(222,24%,7%)]">
+        <div className="absolute inset-0 opacity-25 animate-aurora bg-gradient-to-tr from-teal-500/15 via-indigo-500/10 to-purple-500/15 blur-[120px]" />
+      </div>
+
       <CommandPalette onNavigate={setView} />
+      <SystemDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
 
       {/* Sidebar */}
-      <aside className="flex w-60 shrink-0 flex-col border-r border-border bg-card/40">
-        <div className="flex items-center gap-2 px-5 py-4">
-          <div className="h-7 w-7 rounded-lg bg-primary" />
-          <div className="leading-tight">
-            <div className="text-sm font-semibold">Mission Control</div>
-            <div className="text-xs text-muted-foreground">2.0</div>
+      <aside className={cn(
+        "flex shrink-0 flex-col border-r border-border/40 bg-card/45 backdrop-blur-md transition-all duration-300 ease-in-out",
+        sidebarCollapsed ? "w-16" : "w-60"
+      )}>
+        <div className={cn("flex items-center py-4 border-b border-border/40 shrink-0", sidebarCollapsed ? "flex-col gap-3 px-2" : "justify-between px-5")}>
+          <div className="flex items-center gap-2 overflow-hidden">
+            <div className="h-7 w-7 rounded-lg bg-primary shadow-md shadow-primary/20 shrink-0" />
+            {!sidebarCollapsed && (
+              <div className="leading-tight">
+                <div className="text-sm font-semibold tracking-wide font-space">Mission Control</div>
+                <div className="text-xs text-muted-foreground">2.0</div>
+              </div>
+            )}
           </div>
+          <button 
+            onClick={() => {
+              setSidebarCollapsed(c => {
+                const next = !c
+                localStorage.setItem("mc_sidebar_collapsed", next.toString())
+                return next
+              })
+            }}
+            className="p-1 rounded-md hover:bg-accent text-muted-foreground transition-colors cursor-pointer"
+            title={sidebarCollapsed ? "Maximieren" : "Minimieren"}
+          >
+            {sidebarCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </button>
         </div>
-        <nav className="flex-1 space-y-1 px-3 py-2">
+        
+        <nav className="flex-1 space-y-1 px-3 py-4 overflow-y-auto">
           {NAV.map((item) => (
             <button
               key={item.id}
               onClick={() => setView(item.id)}
               className={cn(
-                "flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+                "flex w-full items-center rounded-md text-sm transition-all cursor-pointer",
+                sidebarCollapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2",
                 view === item.id
-                  ? "bg-primary/15 text-primary"
+                  ? "bg-primary/15 text-primary shadow-sm shadow-primary/5"
                   : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
               )}
+              title={sidebarCollapsed ? item.label : undefined}
             >
-              <item.icon className="h-4 w-4" />
-              {item.label}
+              <item.icon className="h-4.5 w-4.5 shrink-0" />
+              {!sidebarCollapsed && <span className="truncate">{item.label}</span>}
             </button>
           ))}
         </nav>
-        <div className="px-4 py-3 text-xs text-muted-foreground">
-          {health ? (
-            <span className="flex items-center gap-2">
-              <span
-                className={cn(
-                  "h-2 w-2 rounded-full",
-                  health.engine_reachable ? "bg-emerald-500" : "bg-amber-500",
-                )}
-              />
-              Engine {health.engine_reachable ? "online" : "offline"} · v{health.version}
-            </span>
+
+        <div className={cn("py-3 text-xs text-muted-foreground border-t border-border/40 shrink-0", sidebarCollapsed ? "px-2 text-center" : "px-5")}>
+          {sidebarCollapsed ? (
+            <div className="flex justify-center">
+              <span className={cn(
+                "h-2.5 w-2.5 rounded-full ring-2 ring-black/40",
+                health ? (health.engine_reachable ? "bg-emerald-500 animate-pulse" : "bg-amber-500") : "bg-red-500"
+              )} title={health ? `Engine ${health.engine_reachable ? "online" : "offline"}` : "Backend offline"} />
+            </div>
           ) : (
-            <span className="flex items-center gap-2">
-              <span className="h-2 w-2 rounded-full bg-red-500" /> Backend offline
-            </span>
+            health ? (
+              <span className="flex items-center gap-2">
+                <span className={cn("h-2 w-2 rounded-full", health.engine_reachable ? "bg-emerald-500" : "bg-amber-500")} />
+                <span className="truncate">Engine {health.engine_reachable ? "online" : "offline"} · v{health.version}</span>
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <span className="h-2 w-2 rounded-full bg-red-500" /> <span className="truncate">Backend offline</span>
+              </span>
+            )
           )}
         </div>
       </aside>
 
       {/* Main */}
       <div className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-14 shrink-0 items-center justify-between border-b border-border px-6">
-          <div className="text-sm text-muted-foreground">{active.hint}</div>
+        <header className="flex h-14 shrink-0 items-center justify-between border-b border-border/40 px-6 bg-card/20 backdrop-blur-sm">
+          <div className="text-xs font-medium text-muted-foreground tracking-wide uppercase font-sans">{active.hint}</div>
           <div className="flex items-center gap-2">
-          <a
-            href="https://git.tobisniceshomelab.ddnsfree.com/Hitonabi/mission-control-v2/src/branch/main/docs/BEDIENUNG.md"
-            target="_blank"
-            rel="noopener"
-            className="flex h-8 items-center rounded-md border border-border px-2 text-xs text-muted-foreground hover:bg-accent"
-            title="Bedien-Anleitung"
-          >
-            Hilfe
-          </a>
-          <button
-            onClick={() => setDark((d) => !d)}
-            className="flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent"
-            title="Hell/Dunkel"
-          >
-            {dark ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
-          </button>
-          <button
-            onClick={() => {
-              const ev = new KeyboardEvent("keydown", { key: "k", metaKey: true })
-              document.dispatchEvent(ev)
-            }}
-            className="flex items-center gap-2 rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent"
-          >
-            <CommandIcon className="h-3.5 w-3.5" />
-            <span>Springen</span>
-            <kbd className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px]">⌘K</kbd>
-          </button>
+            <button
+              onClick={() => setDrawerOpen(true)}
+              className="relative flex h-8 items-center rounded-md border border-border/40 bg-background/40 px-3 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground gap-1.5 transition-all cursor-pointer font-semibold"
+              title="System-Pflege öffnen"
+            >
+              <Cpu className="h-3.5 w-3.5" />
+              <span>OS & Updates</span>
+              {totalUpdates > 0 && (
+                <span className="flex h-1.5 w-1.5 relative">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-amber-500"></span>
+                </span>
+              )}
+            </button>
+
+            <a
+              href="https://git.tobisniceshomelab.ddnsfree.com/Hitonabi/mission-control-v2/src/branch/main/docs/BEDIENUNG.md"
+              target="_blank"
+              rel="noopener"
+              className="flex h-8 items-center rounded-md border border-border/40 bg-background/40 px-2.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all cursor-pointer font-semibold"
+              title="Bedien-Anleitung"
+            >
+              Hilfe
+            </a>
+
+            <button
+              onClick={() => setDark((d) => !d)}
+              className="flex h-8 w-8 items-center justify-center rounded-md border border-border/40 bg-background/40 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all cursor-pointer"
+              title="Hell/Dunkel"
+            >
+              {dark ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
+            </button>
+
+            <button
+              onClick={() => {
+                const ev = new KeyboardEvent("keydown", { key: "k", metaKey: true })
+                document.dispatchEvent(ev)
+              }}
+              className="flex items-center gap-2 rounded-md border border-border/40 bg-background/40 px-2.5 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all cursor-pointer"
+            >
+              <CommandIcon className="h-3.5 w-3.5" />
+              <span>Suchen</span>
+              <kbd className="rounded bg-muted px-1.5 py-0.5 font-mono text-[9px]">⌘K</kbd>
+            </button>
           </div>
         </header>
 
-        <main className="flex-1 overflow-y-auto p-6">
+        <main className="flex-1 overflow-y-auto p-6 scrollbar-thin">
+          {view === "dashboard" && <DashboardView />}
           {view === "models" && <ModelsView />}
           {view === "routing" && <RoutingView />}
           {view === "system" && <SystemView />}
           {view === "connect" && <ConnectView />}
           {view === "memory" && <MemoryView />}
           {view === "agent" && <AgentView />}
-          {!["models", "routing", "system", "connect", "memory", "agent"].includes(view) && (
+          {!["dashboard", "models", "routing", "system", "connect", "memory", "agent"].includes(view) && (
             <Placeholder title={active.label} hint={active.hint} />
           )}
         </main>
       </div>
+
     </div>
   )
 }
+