feat: World Builder, Item Forge, Quest Designer + sidebar navigation

- World Builder: AI-generated worlds with regions, landmarks, conflicts, cultures
- Item Forge: AI magic item generator with rarity-colored headers, mechanical/lore sections
- Quest Designer: AI quest generator with step-through navigation, choices, twist, reward
- Sidebar now navigates to dedicated full-screen views for every tool
- Bento dashboard cards have 'Expand' buttons opening detail views
- Back arrow (←) in title bar returns to dashboard
- Dashboard grid expanded to 5 rows to accommodate Item Forge
- All three new tools also work in compact dashboard mode
- Full production build clean

src/App.tsx

@@ -11,6 +11,7 @@ import {
   Sparkles,
   Timer,
   Calendar,
+  Wand2,
 } from "lucide-react";
 import { useState } from "react";
 import { Dashboard } from "./components/Dashboard";
@@ -22,6 +23,9 @@ import { EncounterBuilder } from "./components/EncounterBuilder";
 import { InitiativeTracker } from "./components/InitiativeTracker";
 import { RandomTables } from "./components/RandomTables";
 import { CalendarWidget } from "./components/CalendarWidget";
+import { WorldBuilder } from "./components/WorldBuilder";
+import { ItemForge } from "./components/ItemForge";
+import { QuestDesigner } from "./components/QuestDesigner";
 
 export type View =
   | "dashboard"
@@ -35,11 +39,13 @@ export type View =
   | "tables"
   | "calendar"
   | "quest"
+  | "items"
   | "settings";
 
 const navItems: { icon: typeof Map; label: string; view: View }[] = [
   { icon: Map, label: "World", view: "world" },
   { icon: User, label: "NPCs", view: "npcs" },
+  { icon: Wand2, label: "Items", view: "items" },
   { icon: Swords, label: "Encounter", view: "encounter" },
   { icon: Dice5, label: "Dice", view: "dice" },
   { icon: ScrollText, label: "Session", view: "session" },
@@ -65,27 +71,11 @@ function renderView(view: View): React.ReactNode {
     case "settings":
       return <SettingsPanel />;
     case "world":
-      return (
+      return <WorldBuilder />;
-        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)]">
-          <div className="text-center">
-            <Map size={64} className="mx-auto mb-4 opacity-30" />
-            <p className="text-lg font-heading">World Map</p>
-            <p className="text-sm mt-2">Interactive map canvas coming soon</p>
-            <p className="text-xs mt-1 opacity-60">react-konva integration pending</p>
-          </div>
-        </div>
-      );
     case "quest":
-      return (
+      return <QuestDesigner />;
-        <div className="flex items-center justify-center h-full text-[var(--color-text-dim)]">
+    case "items":
-          <div className="text-center">
+      return <ItemForge />;
-            <Sparkles size={64} className="mx-auto mb-4 opacity-30" />
-            <p className="text-lg font-heading">Quest Designer</p>
-            <p className="text-sm mt-2">Branching flowchart coming soon</p>
-            <p className="text-xs mt-1 opacity-60">react-flow integration pending</p>
-          </div>
-        </div>
-      );
     case "sound":
       return (
         <div className="flex items-center justify-center h-full text-[var(--color-text-dim)]">
@@ -165,6 +155,17 @@ export default function App() {
         >
           <Sparkles size={18} />
         </button>
+        <button
+          onClick={() => setView("quest")}
+          className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${
+            view === "quest"
+              ? "bg-[var(--color-bg-card)] text-[var(--color-gold-bright)]"
+              : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-card)]"
+          }`}
+          title="Quest Designer"
+        >
+          <Sparkles size={16} />
+        </button>
         <button
           onClick={() => setView("calendar")}
           className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors cursor-pointer ${

src/components/Dashboard.tsx

@@ -9,6 +9,7 @@ import {
   Volume2,
   Calendar,
   Maximize2,
+  Wand2,
 } from "lucide-react";
 import { BentoCard } from "./BentoCard";
 import type { View } from "../App";
@@ -19,17 +20,18 @@ interface DashboardProps {
 
 export function Dashboard({ onNavigate }: DashboardProps) {
   return (
-    <div className="grid grid-cols-4 grid-rows-4 gap-3 p-4 h-full bg-[var(--color-bg-deep)]">
+    <div className="grid grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
       {/* World Map — 2×2 */}
-      <BentoCard title="World Map" icon={<Map size={16} />} span="col-span-2 row-span-2">
+      <BentoCard title="World Builder" icon={<Map size={16} />} span="col-span-2 row-span-2">
-        <div className="flex flex-col items-center justify-center h-full text-[var(--color-text-dim)] text-sm gap-2">
+        <div className="flex flex-col h-full">
-          <Map size={48} className="opacity-30" />
+          <div className="flex-1 overflow-hidden">
-          <p>Map canvas coming soon</p>
+            <WorldBuilder />
+          </div>
           <button
             onClick={() => onNavigate("world")}
-            className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs flex items-center gap-1 cursor-pointer transition-colors"
+            className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs flex items-center justify-center gap-1 cursor-pointer transition-colors mt-1 pt-2 border-t border-[var(--color-border-subtle)]"
           >
-            <Maximize2 size={12} /> Open full view
+            <Maximize2 size={12} /> Expand
           </button>
         </div>
       </BentoCard>
@@ -96,14 +98,15 @@ export function Dashboard({ onNavigate }: DashboardProps) {
 
       {/* Quest Designer — 2×1 */}
       <BentoCard title="Quest Designer" icon={<Sparkles size={16} />} span="col-span-2 row-span-1">
-        <div className="flex flex-col items-center justify-center h-full text-[var(--color-text-dim)] text-sm gap-2">
+        <div className="flex flex-col h-full">
-          <Sparkles size={32} className="opacity-30" />
+          <div className="flex-1 overflow-hidden">
-          <p>Quest flowchart coming soon</p>
+            <QuestDesigner />
+          </div>
           <button
             onClick={() => onNavigate("quest")}
-            className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs flex items-center gap-1 cursor-pointer transition-colors"
+            className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs flex items-center justify-center gap-1 cursor-pointer transition-colors mt-1 pt-2 border-t border-[var(--color-border-subtle)]"
           >
-            <Maximize2 size={12} /> Open
+            <Maximize2 size={12} /> Expand
           </button>
         </div>
       </BentoCard>
@@ -160,6 +163,21 @@ export function Dashboard({ onNavigate }: DashboardProps) {
           <p>Soundboard coming soon</p>
         </div>
       </BentoCard>
+
+      {/* Item Forge — 2×1 */}
+      <BentoCard title="Item Forge" icon={<Wand2 size={16} />} span="col-span-2 row-span-1">
+        <div className="flex flex-col h-full">
+          <div className="flex-1 overflow-hidden">
+            <ItemForge />
+          </div>
+          <button
+            onClick={() => onNavigate("items")}
+            className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs flex items-center justify-center gap-1 cursor-pointer transition-colors mt-1 pt-2 border-t border-[var(--color-border-subtle)]"
+          >
+            <Maximize2 size={12} /> Expand
+          </button>
+        </div>
+      </BentoCard>
     </div>
   );
 }
@@ -172,3 +190,6 @@ import { EncounterBuilder } from "./EncounterBuilder";
 import { InitiativeTracker } from "./InitiativeTracker";
 import { RandomTables } from "./RandomTables";
 import { CalendarWidget } from "./CalendarWidget";
+import { WorldBuilder } from "./WorldBuilder";
+import { QuestDesigner } from "./QuestDesigner";
+import { ItemForge } from "./ItemForge";

src/components/ItemForge.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+interface ItemResponse {
+  name: string;
+  rarity: string;
+  type: string;
+  description: string;
+  mechanical: string;
+  lore: string;
+}
+
+const RARITIES = ["Common", "Uncommon", "Rare", "Very Rare", "Legendary", "Artifact"];
+const TYPES = ["Weapon", "Armor", "Potion", "Scroll", "Wondrous Item", "Ring", "Wand", "Staff"];
+
+export function ItemForge() {
+  const [rarity, setRarity] = useState("Rare");
+  const [itemType, setItemType] = useState("Wondrous Item");
+  const [prompt, setPrompt] = useState("");
+  const [item, setItem] = useState<ItemResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function generate() {
+    setLoading(true);
+    setError("");
+    setItem(null);
+    try {
+      const result = await invoke<string>("generate", {
+        req: {
+          prompt: `Create a D&D 5e magic item with the following specifications:
+Rarity: ${rarity}
+Type: ${itemType}
+${prompt ? `Additional details: ${prompt}` : ""}
+
+Provide the response as a JSON object with exactly these keys:
+- "name": the item's evocative name
+- "rarity": "${rarity}"
+- "type": "${itemType}"
+- "description": a vivid 2-3 sentence physical description
+- "mechanical": the item's game mechanics (what it does, charges, etc.)
+- "lore": a 1-2 sentence piece of lore or history about the item`,
+          system: "You are a creative D&D item designer. Always respond with valid JSON only.",
+          temperature: 0.85,
+          max_tokens: 500,
+        },
+      });
+      const jsonMatch = result.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        setItem(JSON.parse(jsonMatch[0]) as ItemResponse);
+      } else {
+        setError("LLM did not return valid JSON.\n" + result);
+      }
+    } catch (e) {
+      setError(String(e));
+    }
+    setLoading(false);
+  }
+
+  const rarityColor: Record<string, string> = {
+    Common: "var(--color-text-secondary)",
+    Uncommon: "#1eff00",
+    Rare: "#0070dd",
+    "Very Rare": "#a335ee",
+    Legendary: "#ff8000",
+    Artifact: "#e6cc80",
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-2">
+        <div className="flex flex-col gap-1">
+          <label className="text-[var(--color-text-secondary)] text-[10px] font-medium">Rarity</label>
+          <select
+            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-xs cursor-pointer"
+            value={rarity}
+            onChange={(e) => setRarity(e.target.value)}
+          >
+            {RARITIES.map((r) => <option key={r} value={r}>{r}</option>)}
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-[var(--color-text-secondary)] text-[10px] font-medium">Type</label>
+          <select
+            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-xs cursor-pointer"
+            value={itemType}
+            onChange={(e) => setItemType(e.target.value)}
+          >
+            {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+          </select>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="text-[var(--color-text-secondary)] text-[10px] font-medium">
+          Additional details (optional)
+        </label>
+        <input
+          className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="e.g. a flame dagger that grants fire resistance..."
+          onKeyDown={(e) => e.key === "Enter" && generate()}
+        />
+      </div>
+
+      <button
+        onClick={generate}
+        disabled={loading}
+        className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
+      >
+        {loading ? "⚔ Forging…" : "⚔ Forge Item"}
+      </button>
+
+      {error && (
+        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs">
+          {error}
+        </div>
+      )}
+
+      {item && (
+        <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-4 flex flex-col gap-3">
+          <div className="flex items-start justify-between">
+            <div>
+              <h3 className="font-heading text-lg font-bold" style={{ color: rarityColor[item.rarity] || "var(--color-gold-bright)" }}>
+                {item.name}
+              </h3>
+              <div className="flex gap-2 text-xs text-[var(--color-text-dim)]">
+                <span>{item.rarity}</span>
+                <span>•</span>
+                <span>{item.type}</span>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <span className="text-[var(--color-text-secondary)] text-[10px] font-medium uppercase tracking-wider">Description</span>
+            <p className="text-[var(--color-text-primary)] text-sm mt-0.5 leading-relaxed">{item.description}</p>
+          </div>
+
+          <div className="rounded-lg bg-[var(--color-bg-deep)] border border-[var(--color-border-glass)] p-3">
+            <span className="text-[var(--color-gold-bright)] text-[10px] font-medium uppercase tracking-wider">Mechanics</span>
+            <p className="text-[var(--color-text-primary)] text-sm mt-0.5">{item.mechanical}</p>
+          </div>
+
+          <div>
+            <span className="text-[var(--color-text-secondary)] text-[10px] font-medium uppercase tracking-wider">Lore</span>
+            <p className="text-[var(--color-text-secondary)] text-sm mt-0.5 italic">{item.lore}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/QuestDesigner.tsx

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+interface QuestStep {
+  title: string;
+  description: string;
+  choice?: string;
+}
+
+interface QuestResponse {
+  title: string;
+  hook: string;
+  steps: QuestStep[];
+  twist: string;
+  reward: string;
+}
+
+export function QuestDesigner() {
+  const [theme, setTheme] = useState("");
+  const [level, setLevel] = useState(5);
+  const [quest, setQuest] = useState<QuestResponse | null>(null);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function generate() {
+    setLoading(true);
+    setError("");
+    setQuest(null);
+    setCurrentStep(0);
+    try {
+      const result = await invoke<string>("generate", {
+        req: {
+          prompt: `Design a D&D quest for level ${level} characters.
+${theme ? `Theme: ${theme}` : ""}
+
+Provide the response as a JSON object with exactly these keys:
+- "title": a catchy quest name
+- "hook": 1-2 sentences describing how the party gets involved
+- "steps": an array of 3-5 quest steps, each with "title" and "description" (2-3 sentences each), and optionally "choice" (a meaningful decision the party faces)
+- "twist": a surprise revelation or complication
+- "reward": what the party gains on completion`,
+          system: "You are a creative D&D quest designer. Always respond with valid JSON only.",
+          temperature: 0.85,
+          max_tokens: 700,
+        },
+      });
+      const jsonMatch = result.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        setQuest(JSON.parse(jsonMatch[0]) as QuestResponse);
+      } else {
+        setError("LLM did not return valid JSON.\n" + result);
+      }
+    } catch (e) {
+      setError(String(e));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <div className="grid grid-cols-3 gap-2">
+          <div className="col-span-2 flex flex-col gap-1">
+            <label className="text-[var(--color-text-secondary)] text-[10px] font-medium">Quest Theme</label>
+            <input
+              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm"
+              value={theme}
+              onChange={(e) => setTheme(e.target.value)}
+              placeholder="e.g. haunted forest, political intrigue, dragon's lair..."
+              onKeyDown={(e) => e.key === "Enter" && generate()}
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <label className="text-[var(--color-text-secondary)] text-[10px] font-medium">Party Level</label>
+            <input
+              type="number"
+              min={1}
+              max={20}
+              value={level}
+              onChange={(e) => setLevel(parseInt(e.target.value) || 1)}
+              className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm font-mono"
+            />
+          </div>
+        </div>
+        <button
+          onClick={generate}
+          disabled={loading}
+          className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
+        >
+          {loading ? "✨ Designing…" : "✨ Design Quest"}
+        </button>
+      </div>
+
+      {error && (
+        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs">
+          {error}
+        </div>
+      )}
+
+      {quest && (
+        <div className="flex flex-col gap-3">
+          {/* Quest title & hook */}
+          <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-4">
+            <h3 className="font-heading text-[var(--color-gold-bright)] text-lg font-bold mb-1">
+              {quest.title}
+            </h3>
+            <p className="text-[var(--color-text-secondary)] text-sm italic leading-relaxed">
+              {quest.hook}
+            </p>
+          </div>
+
+          {/* Steps - step-through view */}
+          {quest.steps?.length > 0 && (
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <h4 className="text-[var(--color-text-secondary)] text-xs font-medium">
+                  Quest Steps
+                </h4>
+                <div className="flex gap-1">
+                  {quest.steps.map((_, i) => (
+                    <button
+                      key={i}
+                      onClick={() => setCurrentStep(i)}
+                      className={`w-6 h-6 rounded-full text-[10px] font-mono flex items-center justify-center cursor-pointer transition-colors ${
+                        i === currentStep
+                          ? "bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)]"
+                          : i < currentStep
+                            ? "bg-[var(--color-success)]/20 text-[var(--color-success)]"
+                            : "bg-[var(--color-bg-surface)] text-[var(--color-text-dim)] border border-[var(--color-border-subtle)]"
+                      }`}
+                    >
+                      {i + 1}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-4">
+                <h5 className="text-[var(--color-text-primary)] text-sm font-semibold mb-1">
+                  Step {currentStep + 1}: {quest.steps[currentStep].title}
+                </h5>
+                <p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
+                  {quest.steps[currentStep].description}
+                </p>
+                {quest.steps[currentStep].choice && (
+                  <div className="mt-2 rounded-lg bg-[var(--color-bg-deep)] border-l-2 border-[var(--color-gold-bright)] px-3 py-2">
+                    <span className="text-[var(--color-gold-bright)] text-[10px] font-medium uppercase tracking-wider">Choice</span>
+                    <p className="text-[var(--color-text-primary)] text-sm mt-0.5">{quest.steps[currentStep].choice}</p>
+                  </div>
+                )}
+                <div className="flex justify-between mt-3">
+                  <button
+                    onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+                    disabled={currentStep === 0}
+                    className="text-[var(--color-text-dim)] hover:text-[var(--color-text-primary)] text-xs cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                  >
+                    ← Previous
+                  </button>
+                  <button
+                    onClick={() => setCurrentStep(Math.min(quest.steps.length - 1, currentStep + 1))}
+                    disabled={currentStep === quest.steps.length - 1}
+                    className="text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] text-xs cursor-pointer disabled:opacity-30 disabled:cursor-default"
+                  >
+                    Next →
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Twist */}
+          {quest.twist && (
+            <div className="rounded-lg border-l-2 border-[var(--color-danger)] bg-[var(--color-bg-surface)] px-4 py-3">
+              <span className="text-[var(--color-danger)] text-[10px] font-medium uppercase tracking-wider">Twist</span>
+              <p className="text-[var(--color-text-primary)] text-sm mt-0.5">{quest.twist}</p>
+            </div>
+          )}
+
+          {/* Reward */}
+          {quest.reward && (
+            <div className="rounded-lg border-l-2 border-[var(--color-gold-bright)] bg-[var(--color-bg-surface)] px-4 py-3">
+              <span className="text-[var(--color-gold-bright)] text-[10px] font-medium uppercase tracking-wider">Reward</span>
+              <p className="text-[var(--color-text-primary)] text-sm mt-0.5">{quest.reward}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/WorldBuilder.tsx

@@ -0,0 +1,159 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+interface WorldResponse {
+  name: string;
+  description: string;
+  regions: string[];
+  landmarks: string[];
+  conflicts: string[];
+  cultures: string[];
+}
+
+export function WorldBuilder() {
+  const [theme, setTheme] = useState("high fantasy");
+  const [world, setWorld] = useState<WorldResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  async function generate() {
+    setLoading(true);
+    setError("");
+    setWorld(null);
+    try {
+      const result = await invoke<string>("generate", {
+        req: {
+          prompt: `Create a detailed fantasy world with the theme: "${theme}".
+
+Provide the response as a JSON object with exactly these keys:
+- "name": the world's name
+- "description": a 2-3 sentence overview
+- "regions": an array of 3-4 region names with brief descriptions
+- "landmarks": an array of 2-3 notable landmarks
+- "conflicts": an array of 2-3 major conflicts or tensions
+- "cultures": an array of 2-3 distinct cultures or peoples`,
+          system: "You are a creative world-building DM. Always respond with valid JSON only.",
+          temperature: 0.9,
+          max_tokens: 600,
+        },
+      });
+      const jsonMatch = result.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        setWorld(JSON.parse(jsonMatch[0]) as WorldResponse);
+      } else {
+        setError("LLM did not return valid JSON.\n" + result);
+      }
+    } catch (e) {
+      setError(String(e));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <label className="text-[var(--color-text-secondary)] text-xs font-medium">
+          World Theme
+        </label>
+        <input
+          className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-2 text-[var(--color-text-primary)] placeholder-[var(--color-text-dim)] focus:outline-none focus:border-[var(--color-gold-bright)] text-sm"
+          value={theme}
+          onChange={(e) => setTheme(e.target.value)}
+          placeholder="e.g. high fantasy, dark post-apocalyptic, steampunk..."
+          onKeyDown={(e) => e.key === "Enter" && generate()}
+        />
+        <button
+          onClick={generate}
+          disabled={loading}
+          className="rounded-lg bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-4 py-2 text-sm font-semibold hover:bg-[var(--color-gold-muted)] transition-colors cursor-pointer disabled:opacity-50"
+        >
+          {loading ? "✨ Generating…" : "✨ Generate World"}
+        </button>
+      </div>
+
+      {error && (
+        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs overflow-x-auto">
+          {error}
+        </div>
+      )}
+
+      {world && (
+        <div className="flex flex-col gap-3">
+          {/* World name and description */}
+          <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-4">
+            <h3 className="font-heading text-[var(--color-gold-bright)] text-lg font-bold mb-1">
+              {world.name}
+            </h3>
+            <p className="text-[var(--color-text-primary)] text-sm leading-relaxed">
+              {world.description}
+            </p>
+          </div>
+
+          {/* Regions */}
+          {world.regions?.length > 0 && (
+            <div>
+              <h4 className="text-[var(--color-text-secondary)] text-xs font-medium mb-1.5">
+                🏔 Regions
+              </h4>
+              <div className="flex flex-col gap-1.5">
+                {world.regions.map((r, i) => (
+                  <div key={i} className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] px-3 py-2 text-sm text-[var(--color-text-primary)]">
+                    {r}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Landmarks */}
+          {world.landmarks?.length > 0 && (
+            <div>
+              <h4 className="text-[var(--color-text-secondary)] text-xs font-medium mb-1.5">
+                🏛 Landmarks
+              </h4>
+              <div className="flex flex-wrap gap-1.5">
+                {world.landmarks.map((l, i) => (
+                  <span key={i} className="rounded-full bg-[var(--color-gold-glow)] text-[var(--color-gold-bright)] px-3 py-1 text-xs">
+                    {l}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Conflicts */}
+          {world.conflicts?.length > 0 && (
+            <div>
+              <h4 className="text-[var(--color-text-secondary)] text-xs font-medium mb-1.5">
+                ⚔ Conflicts
+              </h4>
+              <div className="flex flex-col gap-1.5">
+                {world.conflicts.map((c, i) => (
+                  <div key={i} className="rounded-lg bg-[var(--color-bg-surface)] border-l-2 border-[var(--color-danger)] px-3 py-2 text-sm text-[var(--color-text-primary)]">
+                    {c}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Cultures */}
+          {world.cultures?.length > 0 && (
+            <div>
+              <h4 className="text-[var(--color-text-secondary)] text-xs font-medium mb-1.5">
+                👥 Cultures
+              </h4>
+              <div className="flex flex-wrap gap-1.5">
+                {world.cultures.map((c, i) => (
+                  <span key={i} className="rounded-full bg-[var(--color-bg-surface)] border border-[var(--color-info)]/30 text-[var(--color-info)] px-3 py-1 text-xs">
+                    {c}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}