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,61 @@
+import { useEffect, useState } from "react"
+import { Command } from "cmdk"
+import { NAV, type ViewId } from "@/nav"
+
+export function CommandPalette({ onNavigate }: { onNavigate: (v: ViewId) => void }) {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault()
+        setOpen((o) => !o)
+      }
+    }
+    document.addEventListener("keydown", onKey)
+    return () => document.removeEventListener("keydown", onKey)
+  }, [])
+
+  return (
+    <Command.Dialog
+      open={open}
+      onOpenChange={setOpen}
+      label="Befehlspalette"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[12vh]"
+      onClick={() => setOpen(false)}
+    >
+      <div
+        className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Command.Input
+          autoFocus
+          placeholder="Springe zu… (Modelle, Routing, System …)"
+          className="w-full border-b border-border bg-transparent px-4 py-3 text-sm outline-none placeholder:text-muted-foreground"
+        />
+        <Command.List className="max-h-80 overflow-y-auto p-2">
+          <Command.Empty className="px-3 py-6 text-center text-sm text-muted-foreground">
+            Nichts gefunden.
+          </Command.Empty>
+          <Command.Group heading="Bereiche" className="px-1 py-1 text-xs text-muted-foreground">
+            {NAV.map((item) => (
+              <Command.Item
+                key={item.id}
+                value={`${item.label} ${item.hint}`}
+                onSelect={() => {
+                  onNavigate(item.id)
+                  setOpen(false)
+                }}
+                className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground aria-selected:bg-accent aria-selected:text-accent-foreground"
+              >
+                <item.icon className="h-4 w-4 text-primary" />
+                <span>{item.label}</span>
+                <span className="ml-auto truncate text-xs text-muted-foreground">{item.hint}</span>
+              </Command.Item>
+            ))}
+          </Command.Group>
+        </Command.List>
+      </div>
+    </Command.Dialog>
+  )
+}
@@ -0,0 +1,38 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type Variant = "default" | "outline" | "ghost"
+type Size = "default" | "sm" | "icon"
+
+const variants: Record<Variant, string> = {
+  default: "bg-primary text-primary-foreground hover:opacity-90",
+  outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+  ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
+}
+const sizes: Record<Size, string> = {
+  default: "h-9 px-4 py-2 text-sm",
+  sm: "h-8 px-3 text-xs",
+  icon: "h-9 w-9",
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant
+  size?: Size
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Button.displayName = "Button"