Add initial Portal version

src/components/ui/card.tsx

@@ -0,0 +1,37 @@
+export function Card({
+  children,
+  className = "",
+  interactive = false,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  interactive?: boolean;
+}) {
+  return (
+    <div
+      className={`
+        rounded-xl border border-border bg-surface-1 p-6
+        ${interactive ? "card-interactive cursor-pointer" : ""}
+        ${className}
+      `}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h3
+      className={`text-xs font-semibold uppercase tracking-wider text-text-muted mb-3 ${className}`}
+    >
+      {children}
+    </h3>
+  );
+}

src/components/ui/language-switcher.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { useRouter, usePathname } from "@/i18n/navigation";
+import { useState, useRef, useEffect } from "react";
+
+const LOCALE_LABELS: Record<string, string> = {
+  de: "DE",
+  fr: "FR",
+  it: "IT",
+  en: "EN",
+};
+
+const LOCALE_NAMES: Record<string, string> = {
+  de: "Deutsch",
+  fr: "Français",
+  it: "Italiano",
+  en: "English",
+};
+
+export function LanguageSwitcher() {
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
+
+  function switchLocale(next: string) {
+    setOpen(false);
+    router.replace(pathname, { locale: next as any });
+  }
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="
+          flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium
+          text-text-secondary hover:text-text-primary hover:bg-surface-2
+          transition-colors cursor-pointer
+        "
+      >
+        <span className="font-mono">{LOCALE_LABELS[locale]}</span>
+        <svg
+          className={`w-3 h-3 transition-transform ${open ? "rotate-180" : ""}`}
+          viewBox="0 0 12 12"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path d="M3 4.5L6 7.5L9 4.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 w-32 rounded-lg border border-border bg-surface-1 shadow-xl shadow-black/30 overflow-hidden z-50">
+          {Object.entries(LOCALE_NAMES).map(([code, name]) => (
+            <button
+              key={code}
+              onClick={() => switchLocale(code)}
+              className={`
+                w-full px-3 py-2 text-left text-xs transition-colors cursor-pointer
+                flex items-center justify-between
+                ${
+                  code === locale
+                    ? "bg-surface-3 text-accent font-medium"
+                    : "text-text-secondary hover:bg-surface-2 hover:text-text-primary"
+                }
+              `}
+            >
+              <span>{name}</span>
+              <span className="font-mono text-text-muted">
+                {LOCALE_LABELS[code]}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/ui/status-badge.tsx

@@ -0,0 +1,29 @@
+const phaseStyles: Record<string, string> = {
+  Running:
+    "bg-success/10 text-success border-success/20",
+  Provisioning:
+    "bg-warning/10 text-warning border-warning/20",
+  Pending:
+    "bg-text-muted/10 text-text-secondary border-border",
+  Error:
+    "bg-error/10 text-error border-error/20",
+  Deleting:
+    "bg-text-muted/10 text-text-muted border-border",
+};
+
+export function StatusBadge({ phase }: { phase: string }) {
+  const style = phaseStyles[phase] ?? phaseStyles.Pending;
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${style}`}
+    >
+      {phase === "Running" && (
+        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-success" />
+      )}
+      {phase === "Provisioning" && (
+        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
+      )}
+      {phase}
+    </span>
+  );
+}