feat(2.0): Phase 0 — Greenfield-Skeleton (FastAPI + React/shadcn)

Backend: FastAPI mit /api/health + /api/models (read-only aus llama-swap config, Logik aus v1 portiert). Frontend: Vite + React + Tailwind v4 + shadcn-Style App-Shell mit Cmd+K, Dark-default, PWA-Manifest; Modelle-View live aus /api/models. Deploy-Geruest (systemd-Unit :9001, build/deploy- Skripte, NOPASSWD-sudoers, kein Klartext-Passwort). Verifiziert: Backend-Endpunkte + Frontend-Build + gerenderte Shell. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-24 22:17:45 +02:00
commit b805c294eb
30 changed files with 3972 additions and 0 deletions
@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react"
+import { Command as CommandIcon } from "lucide-react"
+import { NAV, type ViewId } from "@/nav"
+import { CommandPalette } from "@/components/CommandPalette"
+import { ModelsView } from "@/views/ModelsView"
+import { Placeholder } from "@/views/Placeholder"
+import { api, type Health } from "@/lib/api"
+import { cn } from "@/lib/utils"
+
+export default function App() {
+  const [view, setView] = useState<ViewId>("models")
+  const [health, setHealth] = useState<Health | null>(null)
+
+  useEffect(() => {
+    const load = () => api<Health>("/api/health").then(setHealth).catch(() => setHealth(null))
+    load()
+    const t = setInterval(load, 10000)
+    return () => clearInterval(t)
+  }, [])
+
+  const active = NAV.find((n) => n.id === view)!
+
+  return (
+    <div className="flex h-full">
+      <CommandPalette onNavigate={setView} />
+
+      {/* 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>
+          </div>
+        </div>
+        <nav className="flex-1 space-y-1 px-3 py-2">
+          {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",
+                view === item.id
+                  ? "bg-primary/15 text-primary"
+                  : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+              )}
+            >
+              <item.icon className="h-4 w-4" />
+              {item.label}
+            </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>
+          ) : (
+            <span className="flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-red-500" /> Backend offline
+            </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>
+          <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>
+        </header>
+
+        <main className="flex-1 overflow-y-auto p-6">
+          {view === "models" && <ModelsView />}
+          {view !== "models" && <Placeholder title={active.label} hint={active.hint} />}
+        </main>
+      </div>
+    </div>
+  )
+}