@alexkroman1/aai 0.8.2 → 0.8.4

package/templates/solo-rpg/client.tsx

@@ -0,0 +1,698 @@
+import "@alexkroman1/aai/ui/styles.css";
+import { useState } from "preact/hooks";
+import {
+  ChatView,
+  SidebarLayout,
+  StartScreen,
+  mount,
+  useToolResult,
+} from "@alexkroman1/aai/ui";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type Disposition = "hostile" | "distrustful" | "neutral" | "friendly" | "loyal";
+
+interface NPC {
+  id: string;
+  name: string;
+  description: string;
+  disposition: Disposition;
+  bond: number;
+  agenda: string;
+  status: "active" | "background" | "deceased";
+}
+
+interface ClockData {
+  id: string;
+  name: string;
+  clockType: "threat" | "progress" | "scheme";
+  segments: number;
+  filled: number;
+  triggerDescription: string;
+}
+
+interface StoryInfo {
+  structureType: string;
+  currentAct: number;
+  totalActs: number;
+  centralConflict: string;
+  thematicThread: string;
+  storyComplete: boolean;
+  currentPhase: string;
+}
+
+interface SessionLogEntry {
+  scene: number;
+  summary: string;
+  location: string;
+}
+
+interface GameState {
+  initialized: boolean;
+  phase: string;
+  settingGenre: string;
+  settingTone: string;
+  settingArchetype: string;
+  settingDescription: string;
+  playerName: string;
+  characterConcept: string;
+  edge: number; heart: number; iron: number; shadow: number; wits: number;
+  health: number; spirit: number; supply: number;
+  momentum: number; maxMomentum: number;
+  currentLocation: string;
+  currentSceneContext: string;
+  timeOfDay: string;
+  chaosFactor: number;
+  crisisMode: boolean;
+  gameOver: boolean;
+  sceneCount: number;
+  npcs: NPC[];
+  clocks: ClockData[];
+  storyBlueprint: StoryInfo | null;
+  kidMode: boolean;
+  sessionLog: SessionLogEntry[];
+}
+
+const INITIAL: GameState = {
+  initialized: false,
+  phase: "genre",
+  settingGenre: "", settingTone: "", settingArchetype: "",
+  settingDescription: "",
+  playerName: "", characterConcept: "",
+  edge: 1, heart: 1, iron: 1, shadow: 1, wits: 1,
+  health: 5, spirit: 5, supply: 5,
+  momentum: 2, maxMomentum: 10,
+  currentLocation: "", currentSceneContext: "", timeOfDay: "",
+  chaosFactor: 5, crisisMode: false, gameOver: false,
+  sceneCount: 0,
+  npcs: [], clocks: [],
+  storyBlueprint: null,
+  kidMode: false,
+  sessionLog: [],
+};
+
+// ── Color Palette ────────────────────────────────────────────────────────────
+const C = {
+  bg: "#0a0a0c",
+  surface: "#0f0f12",
+  surfaceLight: "#16161b",
+  border: "#1e1e26",
+  borderLight: "#2a2a36",
+  accent: "#c9a84c",       // gold
+  accentDim: "#8a7232",
+  accentGlow: "rgba(201,168,76,0.15)",
+  text: "#e0dcd0",
+  textMuted: "rgba(224,220,208,0.5)",
+  textDim: "rgba(224,220,208,0.25)",
+  health: "#8b3030",
+  healthBright: "#c44040",
+  spirit: "#3a5a8a",
+  spiritBright: "#5a8acd",
+  supply: "#4a6a3a",
+  supplyBright: "#6a9a4a",
+  chaos: {
+    low: "#3a6a3a",
+    mid: "#8a7a3a",
+    high: "#8a4a2a",
+    critical: "#8b2020",
+  },
+  disposition: {
+    hostile: "#c44040",
+    distrustful: "#c47a30",
+    neutral: "#888888",
+    friendly: "#4a9a4a",
+    loyal: "#c9a84c",
+  },
+  threat: "#8b2020",
+  progress: "#3a7a9a",
+  scheme: "#7a4a8a",
+};
+
+// ── Disposition Icons ────────────────────────────────────────────────────────
+const DISP_ICON: Record<Disposition, string> = {
+  hostile: "\u2620", distrustful: "\u26A0", neutral: "\u25CB",
+  friendly: "\u2665", loyal: "\u2726",
+};
+
+// ── Time Labels ──────────────────────────────────────────────────────────────
+const TIME_LABELS: Record<string, string> = {
+  early_morning: "Dawn", morning: "Morning", midday: "Midday",
+  afternoon: "Afternoon", evening: "Dusk", late_evening: "Twilight",
+  night: "Night", deep_night: "Witching Hour",
+};
+
+// ── Genre Labels ─────────────────────────────────────────────────────────────
+const GENRE_LABELS: Record<string, string> = {
+  dark_fantasy: "Dark Fantasy", high_fantasy: "High Fantasy",
+  science_fiction: "Sci-Fi", horror_mystery: "Horror / Mystery",
+  steampunk: "Steampunk", cyberpunk: "Cyberpunk",
+  urban_fantasy: "Urban Fantasy", victorian_crime: "Victorian Crime",
+  historical_roman: "Historical", fairy_tale: "Fairy Tale",
+  slice_of_life_90s: "Slice of Life", outdoor_survival: "Survival",
+};
+
+// ── Phase Labels ─────────────────────────────────────────────────────────────
+const PHASE_LABELS: Record<string, string> = {
+  setup: "Act I", confrontation: "Act II", climax: "Act III",
+  ki_introduction: "Ki", sho_development: "Sho",
+  ten_twist: "Ten", ketsu_resolution: "Ketsu",
+};
+
+// ── Components ───────────────────────────────────────────────────────────────
+
+function ResourceBar({ label, current, max, color, colorBright, icon }: {
+  label: string; current: number; max: number; color: string; colorBright: string; icon: string;
+}) {
+  const pips = [];
+  for (let i = 0; i < max; i++) {
+    const filled = i < current;
+    pips.push(
+      <div
+        key={i}
+        style={{
+          width: "18px", height: "10px", borderRadius: "2px",
+          background: filled
+            ? `linear-gradient(135deg, ${color}, ${colorBright})`
+            : "rgba(255,255,255,0.03)",
+          border: `1px solid ${filled ? colorBright : "rgba(255,255,255,0.06)"}`,
+          boxShadow: filled ? `0 0 4px ${color}66` : "none",
+          transition: "all 0.4s ease",
+        }}
+      />,
+    );
+  }
+  return (
+    <div style={{ marginBottom: "8px" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "3px" }}>
+        <span style={{ fontSize: "10px", color: C.textDim, letterSpacing: "0.05em" }}>
+          {icon} {label}
+        </span>
+        <span style={{ fontSize: "11px", fontWeight: 700, color: current > 0 ? colorBright : C.threat }}>
+          {current}
+        </span>
+      </div>
+      <div style={{ display: "flex", gap: "2px" }}>{pips}</div>
+    </div>
+  );
+}
+
+function MomentumTrack({ momentum, max }: { momentum: number; max: number }) {
+  const range: number[] = [];
+  for (let i = -6; i <= 10; i++) range.push(i);
+  return (
+    <div style={{ marginBottom: "8px" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "3px" }}>
+        <span style={{ fontSize: "10px", color: C.textDim, letterSpacing: "0.05em" }}>Momentum</span>
+        <span style={{
+          fontSize: "11px", fontWeight: 700,
+          color: momentum > 0 ? C.spiritBright : momentum < 0 ? C.healthBright : C.textMuted,
+        }}>
+          {momentum > 0 ? "+" : ""}{momentum}
+        </span>
+      </div>
+      <div style={{ display: "flex", gap: "1px" }}>
+        {range.map((v) => (
+          <div
+            key={v}
+            style={{
+              flex: 1, height: "6px", borderRadius: "1px",
+              background:
+                v > max ? "rgba(255,255,255,0.01)"
+                  : v <= momentum && v > 0 ? C.spiritBright
+                    : v >= momentum && v < 0 ? C.healthBright
+                      : v === 0 ? "rgba(255,255,255,0.12)"
+                        : "rgba(255,255,255,0.03)",
+              boxShadow:
+                (v <= momentum && v > 0) ? `0 0 3px ${C.spirit}` :
+                  (v >= momentum && v < 0) ? `0 0 3px ${C.health}` : "none",
+              transition: "all 0.3s ease",
+            }}
+          />
+        ))}
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between", marginTop: "1px" }}>
+        <span style={{ fontSize: "7px", color: C.textDim }}>-6</span>
+        <span style={{ fontSize: "7px", color: C.textDim }}>0</span>
+        <span style={{ fontSize: "7px", color: C.textDim }}>+10</span>
+      </div>
+    </div>
+  );
+}
+
+function ChaosGauge({ chaos }: { chaos: number }) {
+  const pct = ((chaos - 3) / 6) * 100;
+  const color = chaos <= 4 ? C.chaos.low : chaos <= 6 ? C.chaos.mid : chaos <= 8 ? C.chaos.high : C.chaos.critical;
+  const label = chaos <= 4 ? "Calm" : chaos <= 6 ? "Tense" : chaos <= 8 ? "Volatile" : "Critical";
+  return (
+    <div style={{ marginBottom: "8px" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "3px" }}>
+        <span style={{ fontSize: "10px", color: C.textDim, letterSpacing: "0.05em" }}>Chaos</span>
+        <span style={{ fontSize: "9px", fontWeight: 600, color, textTransform: "uppercase", letterSpacing: "0.08em" }}>
+          {label} ({chaos})
+        </span>
+      </div>
+      <div style={{ height: "4px", borderRadius: "2px", background: "rgba(255,255,255,0.04)", overflow: "hidden" }}>
+        <div style={{
+          height: "100%", width: `${pct}%`, borderRadius: "2px",
+          background: `linear-gradient(90deg, ${C.chaos.low}, ${color})`,
+          boxShadow: `0 0 6px ${color}66`,
+          transition: "width 0.5s ease, background 0.5s ease",
+        }} />
+      </div>
+    </div>
+  );
+}
+
+function StatPip({ label, value }: { label: string; value: number }) {
+  return (
+    <div style={{ textAlign: "center" }}>
+      <div style={{ fontSize: "8px", color: C.textDim, textTransform: "uppercase", letterSpacing: "0.1em" }}>
+        {label}
+      </div>
+      <div style={{
+        fontSize: "18px", fontWeight: 700, color: C.accent, lineHeight: 1,
+        textShadow: `0 0 8px ${C.accentGlow}`,
+      }}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function ClockDisplay({ clock }: { clock: ClockData }) {
+  const typeColor = clock.clockType === "threat" ? C.threat :
+    clock.clockType === "progress" ? C.progress : C.scheme;
+  const segments = [];
+  for (let i = 0; i < clock.segments; i++) {
+    segments.push(
+      <div
+        key={i}
+        style={{
+          width: "10px", height: "10px", borderRadius: "50%",
+          background: i < clock.filled
+            ? typeColor
+            : "rgba(255,255,255,0.04)",
+          border: `1px solid ${i < clock.filled ? typeColor : "rgba(255,255,255,0.08)"}`,
+          boxShadow: i < clock.filled ? `0 0 4px ${typeColor}66` : "none",
+          transition: "all 0.3s ease",
+        }}
+      />,
+    );
+  }
+  const isFull = clock.filled >= clock.segments;
+  return (
+    <div style={{
+      marginBottom: "8px", padding: "6px 8px",
+      borderRadius: "4px", background: "rgba(255,255,255,0.015)",
+      border: `1px solid ${isFull ? typeColor : "rgba(255,255,255,0.04)"}`,
+      opacity: isFull ? 0.5 : 1,
+    }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
+        <span style={{ fontSize: "10px", fontWeight: 600, color: C.text }}>{clock.name}</span>
+        <span style={{
+          fontSize: "8px", padding: "1px 4px", borderRadius: "2px",
+          background: `${typeColor}22`, color: typeColor, textTransform: "uppercase",
+          letterSpacing: "0.06em", border: `1px solid ${typeColor}44`,
+        }}>
+          {clock.clockType}
+        </span>
+      </div>
+      <div style={{ display: "flex", gap: "3px", flexWrap: "wrap" }}>{segments}</div>
+    </div>
+  );
+}
+
+function NpcCard({ npc }: { npc: NPC }) {
+  const dispColor = C.disposition[npc.disposition] || C.textMuted;
+  const icon = DISP_ICON[npc.disposition] || "\u25CB";
+  return (
+    <div style={{
+      marginBottom: "6px", padding: "6px 8px",
+      borderRadius: "4px", background: "rgba(255,255,255,0.015)",
+      borderLeft: `2px solid ${dispColor}`,
+    }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <span style={{ fontSize: "11px", fontWeight: 600, color: C.text }}>{npc.name}</span>
+        <span style={{ fontSize: "10px", color: dispColor }}>{icon}</span>
+      </div>
+      {npc.agenda && (
+        <div style={{ fontSize: "9px", color: C.textMuted, marginTop: "2px", fontStyle: "italic" }}>
+          {npc.agenda}
+        </div>
+      )}
+      <div style={{ display: "flex", gap: "8px", marginTop: "3px" }}>
+        <span style={{ fontSize: "8px", color: C.textDim }}>
+          {npc.disposition}
+        </span>
+        {npc.bond !== 0 && (
+          <span style={{ fontSize: "8px", color: npc.bond > 0 ? C.supplyBright : C.healthBright }}>
+            bond {npc.bond > 0 ? "+" : ""}{npc.bond}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StoryArc({ story }: { story: StoryInfo }) {
+  const pct = story.totalActs > 0 ? ((story.currentAct - 1) / story.totalActs) * 100 : 0;
+  const phaseLabel = PHASE_LABELS[story.currentPhase] || story.currentPhase;
+  return (
+    <div style={{ marginBottom: "8px" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "3px" }}>
+        <span style={{ fontSize: "10px", color: C.textDim, letterSpacing: "0.05em" }}>Story Arc</span>
+        <span style={{ fontSize: "9px", color: C.accent }}>
+          {phaseLabel} ({story.currentAct}/{story.totalActs})
+        </span>
+      </div>
+      <div style={{ height: "3px", borderRadius: "2px", background: "rgba(255,255,255,0.04)", overflow: "hidden" }}>
+        <div style={{
+          height: "100%", width: `${pct}%`, borderRadius: "2px",
+          background: `linear-gradient(90deg, ${C.accentDim}, ${C.accent})`,
+          transition: "width 0.5s ease",
+        }} />
+      </div>
+      {story.storyComplete && (
+        <div style={{
+          fontSize: "8px", color: C.accent, textTransform: "uppercase",
+          letterSpacing: "0.1em", marginTop: "3px", textAlign: "center",
+        }}>
+          Story Complete
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Sidebar ──────────────────────────────────────────────────────────────────
+
+function Sidebar({ game }: { game: GameState }) {
+  return (
+    <div style={{
+      height: "100%", overflowY: "auto", background: C.bg,
+      fontFamily: "'Crimson Text', 'Georgia', serif",
+    }}>
+      <style>
+        {`
+          @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');
+          .et-section { border-bottom: 1px solid ${C.border}; padding: 10px 12px; }
+          .et-section:last-child { border-bottom: none; }
+          .et-label {
+            font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
+            color: ${C.textDim}; margin-bottom: 6px; font-family: sans-serif;
+          }
+          .et-gold { color: ${C.accent}; text-shadow: 0 0 8px ${C.accentGlow}; }
+          .et-crisis-pulse { animation: crisisPulse 2s ease-in-out infinite; }
+          @keyframes crisisPulse {
+            0%,100% { opacity: 0.6; } 50% { opacity: 1; }
+          }
+          .et-scroll::-webkit-scrollbar { width: 3px; }
+          .et-scroll::-webkit-scrollbar-thumb { background: ${C.borderLight}; border-radius: 3px; }
+          .et-scroll::-webkit-scrollbar-track { background: transparent; }
+        `}
+      </style>
+
+      {/* Header */}
+      <div class="et-section" style={{ textAlign: "center", paddingTop: "16px", paddingBottom: "12px" }}>
+        <div style={{
+          fontSize: "8px", letterSpacing: "0.3em", color: C.textDim,
+          textTransform: "uppercase", fontFamily: "sans-serif",
+        }}>
+          Solo RPG
+        </div>
+        {game.initialized ? (
+          <>
+            <div class="et-gold" style={{ fontSize: "16px", fontWeight: 700, marginTop: "4px" }}>
+              {game.playerName}
+            </div>
+            {game.characterConcept && (
+              <div style={{ fontSize: "11px", color: C.textMuted, fontStyle: "italic", marginTop: "2px" }}>
+                {game.characterConcept}
+              </div>
+            )}
+            {game.settingGenre && (
+              <div style={{
+                fontSize: "8px", color: C.accentDim, marginTop: "4px",
+                textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "sans-serif",
+              }}>
+                {GENRE_LABELS[game.settingGenre] || game.settingGenre}
+              </div>
+            )}
+          </>
+        ) : (
+          <div style={{ fontSize: "11px", color: C.textDim, marginTop: "8px", fontStyle: "italic" }}>
+            Creating your story...
+          </div>
+        )}
+      </div>
+
+      {/* Pre-init placeholder */}
+      {!game.initialized && (
+        <div class="et-section" style={{ textAlign: "center", padding: "32px 12px" }}>
+          <div style={{ fontSize: "36px", opacity: 0.08 }}>{"\u2726"}</div>
+          <div style={{
+            fontSize: "10px", color: C.textDim, marginTop: "10px",
+            lineHeight: 1.7, fontStyle: "italic",
+          }}>
+            Choose your world.<br />Shape your character.<br />Begin your tale.
+          </div>
+        </div>
+      )}
+
+      {game.initialized && (
+        <>
+          {/* Crisis / Game Over Banner */}
+          {(game.crisisMode || game.gameOver) && (
+            <div class="et-section et-crisis-pulse" style={{
+              textAlign: "center", padding: "8px 12px",
+              background: `${C.threat}15`, borderBottom: `1px solid ${C.threat}33`,
+            }}>
+              <div style={{
+                fontSize: "10px", fontWeight: 700, color: C.healthBright,
+                textTransform: "uppercase", letterSpacing: "0.15em", fontFamily: "sans-serif",
+              }}>
+                {game.gameOver ? (game.kidMode ? "In Trouble" : "Finale") :
+                  (game.kidMode ? "In Trouble" : "Crisis")}
+              </div>
+            </div>
+          )}
+
+          {/* Stats */}
+          <div class="et-section">
+            <div class="et-label">Attributes</div>
+            <div style={{ display: "flex", justifyContent: "space-between", padding: "0 4px" }}>
+              <StatPip label="Edge" value={game.edge} />
+              <StatPip label="Heart" value={game.heart} />
+              <StatPip label="Iron" value={game.iron} />
+              <StatPip label="Shadow" value={game.shadow} />
+              <StatPip label="Wits" value={game.wits} />
+            </div>
+          </div>
+
+          {/* Resources */}
+          <div class="et-section">
+            <ResourceBar label="Health" current={game.health} max={5} color={C.health} colorBright={C.healthBright} icon={"\u2665"} />
+            <ResourceBar label="Spirit" current={game.spirit} max={5} color={C.spirit} colorBright={C.spiritBright} icon={"\u25C6"} />
+            <ResourceBar label="Supply" current={game.supply} max={5} color={C.supply} colorBright={C.supplyBright} icon={"\u25A0"} />
+            <MomentumTrack momentum={game.momentum} max={game.maxMomentum} />
+            <ChaosGauge chaos={game.chaosFactor} />
+          </div>
+
+          {/* Location & Time */}
+          <div class="et-section">
+            <div class="et-label">Location</div>
+            <div class="et-gold" style={{ fontSize: "13px", fontWeight: 600 }}>
+              {game.currentLocation || "Unknown"}
+            </div>
+            {game.currentSceneContext && (
+              <div style={{ fontSize: "10px", color: C.textMuted, marginTop: "3px", fontStyle: "italic", lineHeight: 1.4 }}>
+                {game.currentSceneContext}
+              </div>
+            )}
+            {game.timeOfDay && (
+              <div style={{
+                fontSize: "9px", color: C.accentDim, marginTop: "4px",
+                textTransform: "uppercase", letterSpacing: "0.08em", fontFamily: "sans-serif",
+              }}>
+                {TIME_LABELS[game.timeOfDay] || game.timeOfDay}
+              </div>
+            )}
+          </div>
+
+          {/* Story Arc */}
+          {game.storyBlueprint && (
+            <div class="et-section">
+              <StoryArc story={game.storyBlueprint} />
+            </div>
+          )}
+
+          {/* Clocks */}
+          {game.clocks.length > 0 && (
+            <div class="et-section">
+              <div class="et-label">Clocks</div>
+              {game.clocks.map((clock) => (
+                <ClockDisplay key={clock.id || clock.name} clock={clock} />
+              ))}
+            </div>
+          )}
+
+          {/* NPCs */}
+          {game.npcs.filter(n => n.status !== "deceased").length > 0 && (
+            <div class="et-section">
+              <div class="et-label">Characters</div>
+              {game.npcs.filter(n => n.status === "active").map((npc) => (
+                <NpcCard key={npc.id} npc={npc} />
+              ))}
+              {game.npcs.filter(n => n.status === "background").length > 0 && (
+                <>
+                  <div style={{
+                    fontSize: "8px", color: C.textDim, textTransform: "uppercase",
+                    letterSpacing: "0.1em", margin: "6px 0 4px", fontFamily: "sans-serif",
+                  }}>
+                    Known
+                  </div>
+                  {game.npcs.filter(n => n.status === "background").map((npc) => (
+                    <div key={npc.id} style={{
+                      fontSize: "10px", color: C.textMuted, marginBottom: "2px",
+                      paddingLeft: "8px", borderLeft: `1px solid ${C.border}`,
+                    }}>
+                      {npc.name}
+                      <span style={{ fontSize: "8px", color: C.textDim, marginLeft: "4px" }}>
+                        {npc.disposition}
+                      </span>
+                    </div>
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Session Log */}
+          {game.sessionLog.length > 0 && (
+            <div class="et-section">
+              <div class="et-label">Chronicle</div>
+              {game.sessionLog.slice(-5).map((entry, i) => (
+                <div
+                  key={i}
+                  style={{
+                    fontSize: "10px", color: C.textDim,
+                    fontStyle: "italic", lineHeight: 1.5, marginBottom: "4px",
+                    paddingLeft: "8px", borderLeft: `1px solid ${C.border}`,
+                  }}
+                >
+                  <span style={{ color: C.textMuted, fontStyle: "normal", fontSize: "8px" }}>
+                    {entry.scene}.{" "}
+                  </span>
+                  {entry.summary}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Scene Counter */}
+          <div class="et-section" style={{ textAlign: "center", padding: "8px 12px" }}>
+            <span style={{ fontSize: "8px", color: C.textDim, letterSpacing: "0.15em", fontFamily: "sans-serif" }}>
+              {game.kidMode ? "\u2726 " : ""}SCENE {game.sceneCount}{game.kidMode ? " \u2726" : ""}
+            </span>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ── App ──────────────────────────────────────────────────────────────────────
+
+function SoloRPGApp() {
+  const [game, setGame] = useState<GameState>(structuredClone(INITIAL));
+
+  // Merge a full-state result into the game
+  const mergeState = (result: any, prev: GameState): GameState => ({
+    initialized: result.initialized ?? prev.initialized,
+    phase: result.phase ?? prev.phase,
+    settingGenre: result.settingGenre ?? prev.settingGenre,
+    settingTone: result.settingTone ?? prev.settingTone,
+    settingArchetype: result.settingArchetype ?? prev.settingArchetype,
+    settingDescription: result.settingDescription ?? prev.settingDescription,
+    playerName: result.playerName ?? prev.playerName,
+    characterConcept: result.characterConcept ?? prev.characterConcept,
+    edge: result.edge ?? result.stats?.edge ?? prev.edge,
+    heart: result.heart ?? result.stats?.heart ?? prev.heart,
+    iron: result.iron ?? result.stats?.iron ?? prev.iron,
+    shadow: result.shadow ?? result.stats?.shadow ?? prev.shadow,
+    wits: result.wits ?? result.stats?.wits ?? prev.wits,
+    health: result.health ?? prev.health,
+    spirit: result.spirit ?? prev.spirit,
+    supply: result.supply ?? prev.supply,
+    momentum: result.momentum ?? prev.momentum,
+    maxMomentum: result.maxMomentum ?? prev.maxMomentum,
+    currentLocation: result.currentLocation ?? prev.currentLocation,
+    currentSceneContext: result.currentSceneContext ?? prev.currentSceneContext,
+    timeOfDay: result.timeOfDay ?? prev.timeOfDay,
+    chaosFactor: result.chaosFactor ?? prev.chaosFactor,
+    crisisMode: result.crisisMode ?? prev.crisisMode,
+    gameOver: result.gameOver ?? prev.gameOver,
+    sceneCount: result.sceneCount ?? prev.sceneCount,
+    npcs: result.npcs ?? prev.npcs,
+    clocks: result.clocks ?? prev.clocks,
+    storyBlueprint: result.storyBlueprint ?? prev.storyBlueprint,
+    kidMode: result.kidMode ?? prev.kidMode,
+    sessionLog: result.sessionLog ?? prev.sessionLog,
+  });
+
+  useToolResult((toolName, result: any) => {
+    // setup_character and update_state both return full state
+    if ((toolName === "setup_character" || toolName === "update_state") && result.success) {
+      setGame((prev) => mergeState(result, prev));
+    }
+
+    // action_roll auto-applies consequences — sync sidebar
+    if (toolName === "action_roll" && result.currentHealth !== undefined) {
+      setGame((prev) => ({
+        ...prev,
+        health: result.currentHealth,
+        spirit: result.currentSpirit ?? prev.spirit,
+        supply: result.currentSupply ?? prev.supply,
+        momentum: result.currentMomentum ?? prev.momentum,
+        chaosFactor: result.chaosFactor ?? prev.chaosFactor,
+        crisisMode: result.crisisMode ?? prev.crisisMode,
+        gameOver: result.gameOver ?? prev.gameOver,
+        sceneCount: result.sceneCount ?? prev.sceneCount,
+      }));
+    }
+
+    // burn_momentum resets momentum
+    if (toolName === "burn_momentum" && result.burned) {
+      setGame((prev) => ({ ...prev, momentum: result.newMomentum }));
+    }
+
+    // load_game restores full state
+    if (toolName === "load_game" && result.loaded) {
+      setGame((prev) => mergeState(result, prev));
+    }
+  });
+
+  return (
+    <StartScreen
+      icon={<span style={{ fontSize: "28px", color: C.accent }}>{"\u2726"}</span>}
+      title="Solo RPG"
+      subtitle="A Narrative Solo-RPG Engine"
+      buttonText="Begin Your Story"
+    >
+      <SidebarLayout sidebar={<Sidebar game={game} />} width="260px" side="right">
+        <ChatView />
+      </SidebarLayout>
+    </StartScreen>
+  );
+}
+
+mount(SoloRPGApp, {
+  title: "Solo RPG",
+  theme: {
+    bg: C.bg,
+    primary: C.accent,
+    text: C.text,
+    surface: C.surface,
+    border: C.border,
+  },
+});