Add Phase 1 MVP: D&D text-adventure server

FastAPI + Postgres backend with fastapi-users auth, games/characters
CRUD, and a WebSocket chat endpoint where an x.ai Grok DM narrates
play, rolls dice, and maintains character sheets via tool calls.
React + Tailwind frontend covers registration/login, game list and
creation, participation-code join flow, character viewer, and a
real-time chat session view. Docker Compose skeleton (Postgres +
backend) included; Caddy/frontend container wiring is deferred to
the deploy milestone.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/CharacterCard.tsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router-dom";
+
+import { Character } from "../api/characters";
+
+export default function CharacterCard({ character }: { character: Character }) {
+  return (
+    <Link
+      to={`/characters/${character.id}`}
+      className="block rounded-lg border border-slate-800 bg-slate-900 p-4 hover:border-amber-500"
+    >
+      <h2 className="text-lg font-semibold text-slate-100">{character.name}</h2>
+      <p className="text-sm text-slate-400">
+        {character.race ?? "?"} · {character.char_class ?? "?"} · Stufe {character.level}
+      </p>
+    </Link>
+  );
+}

frontend/src/components/GameCard.tsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+
+import { Game } from "../api/games";
+
+export default function GameCard({ game }: { game: Game }) {
+  const created = new Date(game.created_at).toLocaleString("de-DE");
+
+  return (
+    <Link
+      to={`/games/${game.id}`}
+      className="block rounded-lg border border-slate-800 bg-slate-900 p-4 hover:border-amber-500"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <h2 className="text-lg font-semibold text-slate-100">{game.name}</h2>
+        {game.participation_code && (
+          <span className="shrink-0 rounded bg-amber-500/20 px-2 py-1 font-mono text-xs text-amber-300">
+            Code: {game.participation_code}
+          </span>
+        )}
+      </div>
+      <p className="mt-1 text-sm text-slate-400">{game.description}</p>
+      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
+        <span>Erstellt: {created}</span>
+        <span>Von: {game.creator_name}</span>
+        <span>
+          {game.player_count} Spieler
+          {game.player_names.length > 0 && `: ${game.player_names.join(", ")}`}
+        </span>
+      </div>
+    </Link>
+  );
+}

frontend/src/components/Navbar.tsx

@@ -0,0 +1,34 @@
+import { Link, useNavigate } from "react-router-dom";
+
+import { useAuth } from "../hooks/useAuth";
+
+export default function Navbar() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  if (!user) return null;
+
+  function handleLogout() {
+    logout();
+    navigate("/login");
+  }
+
+  return (
+    <nav className="flex items-center justify-between border-b border-slate-800 bg-slate-900 px-4 py-3">
+      <div className="flex gap-4">
+        <Link to="/games" className="font-semibold text-slate-100 hover:text-amber-400">
+          Spiele
+        </Link>
+        <Link to="/characters" className="font-semibold text-slate-100 hover:text-amber-400">
+          Charaktere
+        </Link>
+      </div>
+      <div className="flex items-center gap-3 text-sm text-slate-400">
+        <span>{user.name}</span>
+        <button onClick={handleLogout} className="rounded bg-slate-800 px-3 py-1 hover:bg-slate-700">
+          Abmelden
+        </button>
+      </div>
+    </nav>
+  );
+}

frontend/src/components/SendMessageForm.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+export default function SendMessageForm({
+  onSend,
+  disabled,
+}: {
+  onSend: (content: string) => Promise<void>;
+  disabled?: boolean;
+}) {
+  const [content, setContent] = useState("");
+  const [sending, setSending] = useState(false);
+
+  async function handleSend() {
+    const trimmed = content.trim();
+    if (!trimmed || sending) return;
+    setSending(true);
+    try {
+      await onSend(trimmed);
+      setContent("");
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="flex gap-2 border-t border-slate-800 p-3">
+      <textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        disabled={disabled || sending}
+        placeholder="Was tust du?"
+        rows={2}
+        className="flex-1 resize-none rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400 disabled:opacity-50"
+      />
+      <button
+        type="button"
+        onClick={handleSend}
+        disabled={disabled || sending || !content.trim()}
+        className="shrink-0 self-end rounded bg-amber-500 px-4 py-2 font-semibold text-slate-950 hover:bg-amber-400 disabled:opacity-50"
+      >
+        {sending ? "…" : "Senden"}
+      </button>
+    </div>
+  );
+}

frontend/src/components/TranscriptPane.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+
+import { Message } from "../api/games";
+
+function senderLabel(message: Message): string {
+  if (message.sender_type === "dm") return "Dungeon Master";
+  if (message.sender_type === "system") return "System";
+  if (message.character_name) return `${message.player_name} (${message.character_name})`;
+  return message.player_name ?? "Spieler";
+}
+
+export default function TranscriptPane({ messages }: { messages: Message[] }) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [messages]);
+
+  return (
+    <div className="flex h-full flex-col gap-3 overflow-y-auto p-4">
+      {messages.map((m) => (
+        <div key={m.id} className={m.sender_type === "system" ? "text-red-400 italic" : m.sender_type === "dm" ? "text-slate-100" : "text-slate-300"}>
+          <span
+            className={
+              m.sender_type === "dm"
+                ? "font-semibold text-amber-400"
+                : m.sender_type === "system"
+                  ? "font-semibold text-red-400"
+                  : "font-semibold text-sky-400"
+            }
+          >
+            {senderLabel(m)}:
+          </span>{" "}
+          <span className="whitespace-pre-wrap">{m.content}</span>
+        </div>
+      ))}
+      <div ref={bottomRef} />
+    </div>
+  );
+}