Add game end status with an end_game DM tool and automatic 0-HP detection

Games now have a status/ended_reason pair. The DM can call the new
end_game tool when the story reaches a real conclusion (victory,
defeat, or a resolved one-shot), and the backend independently ends
the game whenever a character's HP drops to 0 or below, regardless of
whether the DM narrates it. The frontend shows a banner and a
"Beendet" badge once a game ends.

HP moves from the freeform combat_stats bag into dedicated
current_hp/max_hp columns on Character, since reliably detecting 0 HP
requires a real integer rather than parsing strings like "3/10" out of
an LLM-authored key/value dict. Also fixed combat_stats to fully
replace on each upsert instead of merging, matching its documented
contract — the merge was leaving stale keys (old HP/TP text) behind
after the model stopped sending them.

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

frontend/src/api/characters.ts

@@ -14,6 +14,8 @@ export interface Character {
   level: number;
   stats: Record<string, number>;
   combat_stats: Record<string, string>;
+  current_hp: number | null;
+  max_hp: number | null;
   abilities: CharacterAbility[];
   equipment: string[];
   description: string;

frontend/src/api/games.ts

@@ -12,6 +12,8 @@ export interface Game {
   created_at: string;
   is_participant: boolean;
   my_character_id: string | null;
+  status: "active" | "ended";
+  ended_reason: string | null;
 }
 
 export interface Message {

frontend/src/components/GameCard.tsx

@@ -12,6 +12,11 @@ export default function GameCard({ game }: { game: Game }) {
     >
       <div className="flex items-start justify-between gap-4">
         <h2 className="text-lg font-semibold text-slate-100">{game.name}</h2>
+        {game.status === "ended" && (
+          <span className="shrink-0 rounded bg-slate-700 px-2 py-1 text-xs font-semibold text-slate-300">
+            Beendet
+          </span>
+        )}
         {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}

frontend/src/hooks/useGameSocket.ts

@@ -9,6 +9,7 @@ export function useGameSocket(
   onError: (detail: string) => void,
   onTyping: () => void,
   onRolling: (notation: string) => void,
+  onGameEnded: (reason: string) => void,
 ) {
   const wsRef = useRef<WebSocket | null>(null);
   const onMessageRef = useRef(onMessage);
@@ -19,6 +20,8 @@ export function useGameSocket(
   onTypingRef.current = onTyping;
   const onRollingRef = useRef(onRolling);
   onRollingRef.current = onRolling;
+  const onGameEndedRef = useRef(onGameEnded);
+  onGameEndedRef.current = onGameEnded;
 
   useEffect(() => {
     if (!gameId) return;
@@ -39,6 +42,7 @@ export function useGameSocket(
         else if (data.type === "error") onErrorRef.current(data.detail);
         else if (data.type === "typing") onTypingRef.current();
         else if (data.type === "rolling") onRollingRef.current(data.notation ?? "");
+        else if (data.type === "game_ended") onGameEndedRef.current(data.reason ?? "");
       };
       ws.onclose = () => {
         if (!intentionalClose) onErrorRef.current("connection_lost");

frontend/src/pages/CharacterDetail.tsx

@@ -87,12 +87,31 @@ export default function CharacterDetail() {
         </div>
       )}
 
-      {Object.keys(character.combat_stats).length > 0 && (
+      {(character.current_hp !== null || Object.keys(character.combat_stats).length > 0) && (
         <div className="mt-6">
           <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-slate-500">
             Kampfwerte
           </h2>
           <div className="flex flex-wrap gap-3">
+            {character.current_hp !== null && (
+              <div
+                className={`rounded-lg border px-4 py-2 text-center ${
+                  character.current_hp <= 0
+                    ? "border-red-500/50 bg-red-500/10"
+                    : "border-slate-700 bg-slate-800"
+                }`}
+              >
+                <div className="text-xs font-semibold uppercase tracking-wide text-slate-400">
+                  Trefferpunkte
+                </div>
+                <div
+                  className={`text-lg font-bold ${character.current_hp <= 0 ? "text-red-400" : "text-slate-100"}`}
+                >
+                  {character.current_hp}
+                  {character.max_hp !== null ? ` / ${character.max_hp}` : ""}
+                </div>
+              </div>
+            )}
             {Object.entries(character.combat_stats).map(([key, value]) => (
               <div
                 key={key}

frontend/src/pages/GameSession.tsx

@@ -21,11 +21,13 @@ export default function GameSession() {
   const [joinError, setJoinError] = useState<string | null>(null);
   const [isTyping, setIsTyping] = useState(false);
   const [rollingNotation, setRollingNotation] = useState<string | null>(null);
+  const [endedReason, setEndedReason] = useState<string | null>(null);
 
   async function loadGame() {
     if (!gameId) return;
     const g = await getGame(gameId);
     setGame(g);
+    setEndedReason(g.status === "ended" ? g.ended_reason : null);
     return g;
   }
 
@@ -102,6 +104,7 @@ export default function GameSession() {
     },
     () => setIsTyping(true),
     (notation) => setRollingNotation(notation),
+    (reason) => setEndedReason(reason),
   );
 
   async function handleSend(content: string) {
@@ -180,6 +183,12 @@ export default function GameSession() {
         </div>
       </div>
 
+      {endedReason && (
+        <div className="mb-3 rounded-lg border border-amber-500/50 bg-amber-500/10 px-4 py-3 text-sm text-amber-300">
+          <span className="font-semibold">Spiel beendet.</span> {endedReason}
+        </div>
+      )}
+
       <div className="flex flex-1 flex-col overflow-hidden rounded-lg border border-slate-800 bg-slate-900">
         <TranscriptPane messages={messages} typing={isTyping} rolling={rollingNotation} />
         <SendMessageForm onSend={handleSend} />