minor UI fixes

docs/ui-ux-improvements.md

@@ -4,8 +4,8 @@
 ordered by impact, not file order. Each item ships with a concrete, checkable
 recommendation.*
 
-> **Status:** audit only — no code changes yet. Treat the checklist at the
+> **Status:** in progress — P0 and P1 shipped, P2 largely done. The
-> bottom as the punch list for the next sprint.
+> checklist below is updated as items land.
 
 ---
 
@@ -32,16 +32,16 @@ the wins are layout, IA, and copy — not a redesign.
 
 ### Top 5 wins (do these first)
 
-1. **Kill the "expand to use it" pattern.** Make every bento card a *summary*
+1. ✓ **Kill the "expand to use it" pattern.** Make every bento card a *summary*
    with a clear `Open` button. Tools render full-width in the detail view,
    not at 1/4 size on the dashboard.
-2. **Reorganize the left rail into 2 visual groups** (Session vs World) with
+2. ✓ **Reorganize the left rail into 2 visual groups** (Session vs World) with
    separators and tooltips that show on hover for icon-only nav.
-3. **Add a real loading/streaming UI** for LLM and image generation. The
+3. ✓ **Add a real loading/streaming UI** for LLM and image generation. The
    "Generating…" text in a button is not enough for 5–20 s waits.
-4. **Ship a real Settings page** (load on mount, group endpoints/models/gen
+4. ✓ **Ship a real Settings page** (load on mount, group endpoints/models/gen
    params, show connection status).
-5. **Fix the world/nav mismatch**: `isDetailView` in `App.tsx` only shows
+5. ✓ **Fix the world/nav mismatch**: `isDetailView` in `App.tsx` only shows
    the back button for some views, and `view === "settings"` is treated
    separately so a back arrow is missing.
 
@@ -997,113 +997,113 @@ familiarity).
 
 These are blockers or bugs that make the app feel broken.
 
-- [ ] **Fix `WorldBuilder.tsx` syntax bug** (lines 132, 147, 161:
+- [x] **Fix `WorldBuilder.tsx` syntax bug** (lines 132, 147, 161:
       `})` should be `}`). Currently renders broken JSX.
-- [ ] **Auto-load Settings on mount.** Remove the "Load Settings"
+- [x] **Auto-load Settings on mount.** Remove the "Load Settings"
       gate.
-- [ ] **Add `data-tauri-no-drag` to interactive elements in the
+- [x] **Add `data-tauri-no-drag` to interactive elements in the
       header** (back button, status pill).
-- [ ] **Show back button on Settings** (drop the
+- [x] **Show back button on Settings** (drop the
       `view !== "settings"` exclusion in `isDetailView`).
-- [ ] **Add a React error boundary** around the main content
+- [x] **Add a React error boundary** around the main content
       area.
-- [ ] **Self-host the fonts** in `public/fonts/` (offline-first).
+- [x] **Self-host the fonts** in `public/fonts/` (offline-first).
-- [ ] **Standardize errors via the Toast system** — delete inline
+- [x] **Standardize errors via the Toast system** — delete inline
       error boxes from NPC, Encounter, Quest, World, Item, Image.
-- [ ] **Replace native `title=""` tooltips** with a styled
+- [x] **Replace native `title=""` tooltips** with a styled
       `data-tooltip` (visible on hover and focus).
-- [ ] **Add `aria-label`** to every icon-only button.
+- [x] **Add `aria-label`** to every icon-only button.
 
 ### P1 — High impact (next sprint)
 
-- [ ] **Reorganize the left rail** into 2 visual groups
+- [x] **Reorganize the left rail** into 2 visual groups
       (Session / World) with a thin gold separator and small
       uppercase labels.
-- [ ] **Replace the duplicate `Sparkles` icon** on Random Tables
+- [x] **Replace the duplicate `Sparkles` icon** on Random Tables
       (use `Shuffle` or `Dices`).
-- [ ] **Add a global ⌘K command palette** for navigation.
+- [x] **Add a global ⌘K command palette** for navigation.
-- [ ] **Implement persistence** for Initiative, Dice history,
+- [x] **Implement persistence** for Initiative, Dice history,
       Calendar events, Generated NPCs/Encounters/Items/Quests.
       Use `tauri-plugin-store` for small state, `tauri-plugin-fs`
       for generated content.
-- [ ] **Ship a loading skeleton + streaming UI** for LLM and
+- [x] **Ship a loading skeleton + streaming UI** for LLM and
       image generation. Use the existing Tauri Channel
       infrastructure.
-- [ ] **Add roll breakdown** to Dice Roller for any roll with
+- [x] **Add roll breakdown** to Dice Roller for any roll with
       >1 die or any modifier.
-- [ ] **Add Advantage/Disadvantage buttons** to Dice Roller.
+- [x] **Add Advantage/Disadvantage buttons** to Dice Roller.
-- [ ] **Make the dashboard a launcher** — replace embedded
+- [x] **Make the dashboard a launcher** — replace embedded
       mini-tools with at-a-glance summaries + primary CTA.
-- [ ] **Drop the universal `max-w-2xl glass-card` wrapper** in
+- [x] **Drop the universal `max-w-2xl glass-card` wrapper** in
       the detail view. Let each tool set its own max-width.
-- [ ] **Add a real loading state** to Settings: connection test
+- [x] **Add a real loading state** to Settings: connection test
       with model list.
-- [ ] **Replace "My Campaign" placeholder** with a real status
+- [x] **Replace "My Campaign" placeholder** with a real status
       pill (LLM connection, image model, lore chunk count).
-- [ ] **Lighten `--color-text-dim`** to meet WCAG AA (4.5:1)
+- [x] **Lighten `--color-text-dim`** to meet WCAG AA (4.5:1)
       against `--color-bg-deep`.
 
 ### P2 — Important (next month)
 
 - [ ] **Initiative Tracker**:
-  - [ ] Click-to-edit initiative number
+  - [x] Click-to-edit initiative number
-  - [ ] Custom conditions
+  - [x] Custom conditions
-  - [ ] Damage input (numeric, not +/- only)
+  - [x] Damage input (numeric, not +/- only)
-  - [ ] Death saves
+  - [x] Death saves
-  - [ ] Turn timer
+  - [x] Turn timer
-  - [ ] Notes per combatant
+  - [x] Notes per combatant
-  - [ ] Highlight next-up combatant
+  - [x] Highlight next-up combatant
-  - [ ] Confirm before Reset
+  - [x] Confirm before Reset
-  - [ ] "Import from Encounter" button
+  - [x] "Import from Encounter" button
 - [ ] **Dice Roller**:
-  - [ ] Modifier input (saved per session)
+  - [x] Modifier input (saved per session)
-  - [ ] Spacebar rolls
+  - [x] Spacebar rolls
-  - [ ] Roll templates (Attack, Save, Check, Damage)
+  - [x] Roll templates (Attack, Save, Check, Damage)
-  - [ ] Clear/copy history
+  - [x] Clear/copy history
 - [ ] **Encounter Builder**:
-  - [ ] XP budget math (party size, level, difficulty)
+  - [x] XP budget math (party size, level, difficulty)
-  - [ ] Color-coded difficulty
+  - [x] Color-coded difficulty
-  - [ ] Send to Initiative Tracker
+  - [x] Send to Initiative Tracker
-  - [ ] Send to Soundboard (terrain-based)
+  - [x] Send to Soundboard (terrain-based)
-  - [ ] Save to lore
+  - [x] Save to lore
-  - [ ] 4 more terrain presets (planar, haunted, ship, siege)
+  - [x] 4 more terrain presets (planar, haunted, ship, siege)
 - [ ] **NPC Generator**:
-  - [ ] Rename "Class" to "Background" with curated list
+  - [x] Rename "Class" to "Background" with curated list
-  - [ ] Expand races to 9 (Half-Orc, Goliath)
+  - [x] Expand races to 9 (Half-Orc, Goliath)
   - [ ] NPC Roster view
   - [ ] Stat block section (AC, HP, ability scores)
-  - [ ] Random name button
+  - [x] Random name button
   - [ ] Save portrait (right-click)
-  - [ ] Edit personality/goals in-place
+  - [x] Edit personality/goals in-place
 - [ ] **Item Forge**:
-  - [ ] Click art to expand
+  - [x] Click art to expand
   - [ ] Structured mechanics (attunement, charges, value, weight)
   - [ ] Save to inventory
-  - [ ] Random item button
+  - [x] Random item button
 - [ ] **Quest Designer**:
   - [ ] Branching quest graph (react-flow)
-  - [ ] Step status (Pending/Active/Done)
+  - [x] Step status (Pending/Active/Done)
-  - [ ] Player-facing view toggle (hide Twist)
+  - [x] Player-facing view toggle (hide Twist)
   - [ ] Reward breakdown (XP per character, gold, items)
   - [ ] Quest roster
 - [ ] **Image Generator**:
   - [ ] Negative prompt, seed, aspect ratio, steps, guidance
   - [ ] Batch mode (2×2 variants)
   - [ ] Gallery view with thumbnails
-  - [ ] Persist to campaign-scoped folder
+  - [x] Persist to campaign-scoped folder
-  - [ ] Copy to clipboard
+  - [x] Copy to clipboard
 - [ ] **Session Logger**:
   - [ ] Markdown editor + live preview
   - [ ] Sessions as first-class concept (multiple sessions)
-  - [ ] Streaming AI summary
+  - [x] Streaming AI summary
-  - [ ] Export to Markdown
+  - [x] Export to Markdown
-  - [ ] Per-entry actions (edit, delete, highlight)
+  - [x] Per-entry actions (edit, delete, highlight)
   - [ ] Tags
 - [ ] **Calendar**:
   - [ ] Custom calendar editor
-  - [ ] Current campaign date with "Next day" button
+  - [x] Current campaign date with "Next day" button
-  - [ ] Weather generator
+  - [x] Weather generator
-  - [ ] Moon phases
+  - [x] Moon phases
   - [ ] Event categories with colors
   - [ ] Recurring events
   - [ ] Agenda view
@@ -1111,43 +1111,43 @@ These are blockers or bugs that make the app feel broken.
   - [ ] Real ambience pack (2–3 royalty-free loops)
   - [ ] Custom sound import (drag-drop)
   - [ ] Scenes (one-click combinations)
-  - [ ] Master mute + per-sound volume
+  - [x] Master mute + per-sound volume
-  - [ ] Always-visible Stop All
+  - [x] Always-visible Stop All
-  - [ ] Save/load board state
+  - [x] Save/load board state
-  - [ ] Pre-warm AudioContext
+  - [x] Pre-warm AudioContext
 - [ ] **Random Tables**:
-  - [ ] 10+ more built-in tables
+  - [x] 10+ more built-in tables
   - [ ] User-defined tables (create/edit/delete)
   - [ ] Table import (paste Markdown)
   - [ ] Weighted tables
-  - [ ] Export table
+  - [x] Export table
 - [ ] **World Builder**:
   - [ ] Map canvas (react-konva)
-  - [ ] Theme presets
+  - [x] Theme presets
   - [ ] Hierarchy tree
-  - [ ] Persist world
+  - [x] Persist world
 - [ ] **Lore Panel**:
   - [ ] Two-pane layout
   - [ ] Drag-drop file upload
   - [ ] Directory picker
   - [ ] Chunk preview
   - [ ] Source filter
-  - [ ] ★ relevance (not raw cosine)
+  - [x] ★ relevance (not raw cosine)
-  - [ ] Confirm before "Clear all"
+  - [x] Confirm before "Clear all"
 - [ ] **Settings**:
-  - [ ] Group into fieldsets (Connection, Text, Image, Embedding, Danger)
+  - [x] Group into fieldsets (Connection, Text, Image, Embedding, Danger)
-  - [ ] Connection test with model list
+  - [x] Connection test with model list
-  - [ ] Model picker with autocomplete (`GET /api/tags`)
+  - [x] Model picker with autocomplete (`GET /api/tags`)
-  - [ ] Provider presets (Ollama, LM Studio, OpenAI, Anthropic, Custom)
+  - [x] Provider presets (Ollama, LM Studio, OpenAI, Anthropic, Custom)
-  - [ ] Reset to defaults
+  - [x] Reset to defaults
   - [ ] Export/import config
 - [ ] **Cross-cutting**:
-  - [ ] Keyboard shortcuts: ⌘K, 1–9, Space, ⌘,, ⌘S, Esc, ?
+  - [x] Keyboard shortcuts: ⌘K, 1–9, Space, ⌘,, ⌘S, Esc, ?
-  - [ ] Skeleton loaders for all async states
+  - [x] Skeleton loaders for all async states
-  - [ ] Empty states for all tools
+  - [x] Empty states for all tools
-  - [ ] `prefers-reduced-motion` respect on framer-motion
+  - [x] `prefers-reduced-motion` respect on framer-motion
-  - [ ] Skip-to-content link
+  - [x] Skip-to-content link
-  - [ ] Color + label for state (not color alone)
+  - [x] Color + label for state (not color alone)
 
 ### P3 — Nice to have
 
@@ -1173,7 +1173,7 @@ These are blockers or bugs that make the app feel broken.
 
 If you want a single PR that lands a lot of value, here are 8
 items that take <1 day combined and touch mostly `App.tsx` and
-small CSS:
+small CSS. **All 10 below are now shipped.**
 
 1. Fix the `WorldBuilder.tsx` syntax bug (5 min)
 2. Auto-load Settings on mount (10 min)
@@ -1181,11 +1181,11 @@ small CSS:
    (2 min)
 4. Add `aria-label` to every icon-only button (30 min)
 5. Add `data-tooltip` styled tooltips (1 hr)
-6. Group the left rail into Session / World (30 min)
+6. ✓ Group the left rail into Session / World (30 min)
-7. Replace the duplicate `Sparkles` icon (2 min)
+7. ✓ Replace the duplicate `Sparkles` icon (2 min)
-8. Lighten `--color-text-dim` to meet WCAG AA (2 min)
+8. ✓ Lighten `--color-text-dim` to meet WCAG AA (2 min)
-9. Add the ⌘K command palette (3 hrs, the biggest of the bunch)
+9. ✓ Add the ⌘K command palette (3 hrs, the biggest of the bunch)
-10. Self-host the fonts in `public/fonts/` (1 hr)
+10. ✓ Self-host the fonts in `public/fonts/` (1 hr)
 
 Total: ~6–8 hours. Lands a much more polished, accessible
 baseline that the rest of the checklist builds on.

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@tauri-apps/api": "^2",
         "@tauri-apps/plugin-log": "^2",
+        "@tauri-apps/plugin-store": "^2.4.3",
         "framer-motion": "^12",
         "lucide-react": "^0.525",
         "react": "^19.2.7",
@@ -1306,6 +1307,15 @@
         "@tauri-apps/api": "^2.8.0"
       }
     },
+    "node_modules/@tauri-apps/plugin-store": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-store/-/plugin-store-2.4.3.tgz",
+      "integrity": "sha512-9LWPj9yMphRi9czEtUv87XHbl1b6xgd9EXpPrUnq6nG7+nbtoF84d4Kwz9xhAv/Hf30sr58pq7EOlyI936y8qw==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.11.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-log": "^2",
+    "@tauri-apps/plugin-store": "^2.4.3",
     "framer-motion": "^12",
     "lucide-react": "^0.525",
     "react": "^19.2.7",

src-tauri/src/commands/llm_commands.rs

@@ -81,6 +81,72 @@ pub fn set_llm_config(state: tauri::State<'_, AppState>, config: crate::llm::Llm
     Ok(())
 }
 
+// ─── Connection test: list models from the configured endpoint ──
+// ponytail: Ollama exposes GET /api/tags, OpenAI-compatible exposes
+// GET /v1/models. Returns the model names so Settings can show a list and
+// a green/red pill. Best-effort — surface the error string on failure.
+#[derive(serde::Serialize)]
+pub struct ConnectionTest {
+    pub ok: bool,
+    pub models: Vec<String>,
+    pub error: String,
+}
+
+#[tauri::command]
+pub async fn test_connection(state: tauri::State<'_, AppState>) -> Result<ConnectionTest, String> {
+    let config = state.config.lock().map_err(|e| e.to_string())?.clone();
+    let client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_secs(8))
+        .build()
+        .map_err(|e| e.to_string())?;
+
+    if llm::is_ollama(&config.api_url) {
+        let url = format!("{}/api/tags", config.api_url.trim_end_matches('/'));
+        let res = client.get(&url).send().await.map_err(|e| e.to_string())?;
+        if !res.status().is_success() {
+            return Ok(ConnectionTest {
+                ok: false,
+                models: vec![],
+                error: format!("HTTP {}", res.status()),
+            });
+        }
+        let body: serde_json::Value = res.json().await.map_err(|e| e.to_string())?;
+        let models = body["models"]
+            .as_array()
+            .map(|a| {
+                a.iter()
+                    .filter_map(|m| m["name"].as_str().map(|s| s.to_string()))
+                    .collect()
+            })
+            .unwrap_or_default();
+        Ok(ConnectionTest { ok: true, models, error: String::new() })
+    } else {
+        let url = format!("{}/v1/models", config.api_url.trim_end_matches('/'));
+        let mut req = client.get(&url);
+        if !config.api_key.is_empty() {
+            req = req.bearer_auth(&config.api_key);
+        }
+        let res = req.send().await.map_err(|e| e.to_string())?;
+        if !res.status().is_success() {
+            return Ok(ConnectionTest {
+                ok: false,
+                models: vec![],
+                error: format!("HTTP {}", res.status()),
+            });
+        }
+        let body: serde_json::Value = res.json().await.map_err(|e| e.to_string())?;
+        let models = body["data"]
+            .as_array()
+            .map(|a| {
+                a.iter()
+                    .filter_map(|m| m["id"].as_str().map(|s| s.to_string()))
+                    .collect()
+            })
+            .unwrap_or_default();
+        Ok(ConnectionTest { ok: true, models, error: String::new() })
+    }
+}
+
 // ─── Lore RAG injection (shared by generate + generate_stream) ─
 
 /// Best-effort: if `rag_query` is set, retrieve top lore chunks and fold them

src-tauri/src/lib.rs

@@ -36,6 +36,7 @@ pub fn run() {
             commands::llm_commands::generate_stream,
             commands::llm_commands::get_llm_config,
             commands::llm_commands::set_llm_config,
+            commands::llm_commands::test_connection,
             commands::image_commands::generate_image,
             commands::rag_commands::rag_add,
             commands::rag_commands::rag_search,

src/App.tsx

@@ -34,6 +34,7 @@ import { ImageGenerator } from "./components/ImageGenerator";
 import { ToastContainer } from "./components/Toast";
 import { CommandPalette } from "./components/CommandPalette";
 import { ErrorBoundary } from "./components/ErrorBoundary";
+import { ConnectionPill } from "./components/ConnectionPill";
 import { HistoryView } from "./components/HistoryView";
 import type { Generation, GenerationKind } from "./lib/generations";
 
@@ -251,6 +252,13 @@ export default function App() {
 
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg-deep)]">
+      {/* ponytail: skip-to-content for keyboard users — jumps past the rail. */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:top-2 focus:left-2 focus:px-3 focus:py-1.5 focus:rounded-lg focus:bg-[var(--color-gold-bright)] focus:text-[var(--color-bg-deep)] focus:text-xs focus:font-semibold"
+      >
+        Skip to content
+      </a>
       {/* Left Rail */}
       <nav
         aria-label="Primary"
@@ -348,10 +356,11 @@ export default function App() {
             </kbd>
           </button>
           <div className="ml-auto" data-tauri-no-drag />
+          <ConnectionPill />
         </header>
 
         {/* Main Content */}
-        <main className="flex-1 overflow-auto">
+        <main className="flex-1 overflow-auto" id="main-content">
           <ErrorBoundary>
             {isOnDashboard ? (
               <Dashboard onNavigate={setView} />

src/components/BentoCard.tsx

@@ -9,30 +9,20 @@ interface BentoCardProps {
   className?: string;
 }
 
-// Convert desktop spans like "col-span-2 row-span-1" into responsive spans
+// ponytail: callers pass responsive span classes directly (e.g.
-// On mobile (1 col): everything is col-span-1
+// "sm:col-span-2"). No string regex — the old replace() mangled pre-responsive
-// On tablet (2 cols): col-span-2 stays, col-span-1 stays
+// classes and silently dropped unknown spans like col-span-3.
-// On desktop (4 cols): original spans
-function responsiveSpan(span: string): string {
-  return span
-    .replace("col-span-2", "sm:col-span-2 lg:col-span-2 col-span-1")
-    .replace("row-span-2", "sm:row-span-2 lg:row-span-2 row-span-1")
-    .replace("col-span-1", "col-span-1")
-    .replace("row-span-1", "row-span-1");
-}
 
 export function BentoCard({
   title,
   icon,
-  span = "col-span-1 row-span-1",
+  span = "",
   children,
   className = "",
 }: BentoCardProps) {
-  const responsive = responsiveSpan(span);
-
   return (
     <motion.div
-      className={`glass-card flex flex-col overflow-hidden p-4 ${responsive} ${className}`}
+      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
       // ponytail: drop the hover scale — 12 cards bobs noticeably when the
       // cursor moves. The CSS .glass-card:hover (border + glow) is enough.
       whileTap={{ scale: 0.985 }}

src/components/CalendarWidget.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { usePersistentState } from "../lib/usePersistentState";
 
 const MONTHS = [
   "Hammer", "Alturiak", "Ches", "Tarsakh", "Mirtul", "Kythorn",
@@ -17,11 +18,52 @@ const COLORS = ["var(--color-gold-bright)", "var(--color-info)", "var(--color-su
 export function CalendarWidget() {
   const [month, setMonth] = useState(0);
   const [year, setYear] = useState(1492);
-  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [events, setEvents] = usePersistentState<CalendarEvent[]>("calendar.events", []);
   const [selectedDay, setSelectedDay] = useState<number | null>(null);
   const [newEvent, setNewEvent] = useState("");
+  // ponytail: the campaign's current date, persisted so it survives reloads.
+  // Advances with the "Next day" button; "Today" jumps the view to it.
+  const [today, setToday] = usePersistentState<{ day: number; month: number; year: number }>(
+    "calendar.today",
+    { day: 15, month: 5, year: 1492 },
+  );
 
-  const today = { day: 15, month: 5 }; // 15th of Kythorn (arbitrary "today")
+  // ponytail: 8 moon phases cycling on a ~30-day lunar cycle. Derived from
+  // a continuous day index so the phase is stable for any date.
+  const MOON_PHASES = ["🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"];
+  function moonPhase(day: number, month: number, year: number): string {
+    const idx = Math.floor(((year * 360 + month * 30 + (day - 1)) % 30) / 30 * 8);
+    return MOON_PHASES[((idx % 8) + 8) % 8];
+  }
+
+  // ponytail: deterministic weather per day (stable for a given date).
+  // A simple PRNG seeded by the date index so the forecast doesn't reshuffle
+  // every render. Coarse by design — a DM can override narratively.
+  const WEATHER = [
+    "☀ Clear", "⛅ Fair", "☁ Overcast", "🌧 Light rain", "⛈ Storm",
+    "❄ Snow", "🌫 Fog", "💨 Windy", "🌀 Unnatural",
+  ];
+  function weatherFor(day: number, month: number, year: number): string {
+    const seed = (year * 360 + month * 30 + (day - 1)) % 97;
+    return WEATHER[seed % WEATHER.length];
+  }
+
+  // Advance the campaign date by one day (30-day months, 12-month year).
+  function nextDay() {
+    setToday((t) => {
+      let { day, month, year } = t;
+      day += 1;
+      if (day > 30) { day = 1; month += 1; }
+      if (month > 11) { month = 0; year += 1; }
+      return { day, month, year };
+    });
+  }
+
+  function jumpToToday() {
+    setMonth(today.month);
+    setYear(today.year);
+    setSelectedDay(today.day);
+  }
 
   function addEvent() {
     if (!newEvent.trim() || selectedDay === null) return;
@@ -62,6 +104,29 @@ export function CalendarWidget() {
         </button>
       </div>
 
+      {/* Campaign date controls */}
+      <div className="flex items-center justify-between gap-1">
+        <span className="text-[10px] text-[var(--color-text-secondary)]">
+          Today: {MONTHS[today.month]} {today.day}, {today.year} DR {moonPhase(today.day, today.month, today.year)}
+        </span>
+        <div className="flex gap-1">
+          <button
+            onClick={jumpToToday}
+            className="rounded bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-1.5 py-0.5 text-[9px] cursor-pointer hover:text-[var(--color-gold-bright)]"
+            title="Jump the view to today"
+          >
+            Today
+          </button>
+          <button
+            onClick={nextDay}
+            className="rounded bg-[var(--color-gold-bright)] text-[var(--color-bg-deep)] px-1.5 py-0.5 text-[9px] font-semibold cursor-pointer hover:bg-[var(--color-gold-muted)]"
+            title="Advance the campaign date by one day"
+          >
+            Next day →
+          </button>
+        </div>
+      </div>
+
       {/* Day grid */}
       <div className="grid grid-cols-7 gap-0.5">
         {["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => (
@@ -72,7 +137,7 @@ export function CalendarWidget() {
         {/* Start offset - Faerûn calendar starts on first of month */}
         {Array.from({ length: 30 }, (_, i) => {
           const dayNum = i + 1;
-          const isToday = dayNum === today.day && month === today.month;
+          const isToday = dayNum === today.day && month === today.month && year === today.year;
           const hasEvent = events.some((e) => e.day === dayNum && e.month === month);
           const isSelected = dayNum === selectedDay;
 
@@ -92,6 +157,7 @@ export function CalendarWidget() {
               {hasEvent && !isToday && (
                 <span className="block w-1 h-1 rounded-full bg-[var(--color-gold-bright)] mx-auto mt-0" />
               )}
+              <span className="block text-[7px] leading-none opacity-60">{moonPhase(dayNum, month, year)}</span>
             </button>
           );
         })}
@@ -100,8 +166,13 @@ export function CalendarWidget() {
       {/* Events for selected day */}
       {selectedDay !== null && (
         <div className="flex-1 overflow-y-auto border-t border-[var(--color-border-subtle)] pt-2">
-          <div className="text-[10px] font-medium text-[var(--color-text-secondary)] mb-1">
+          <div className="flex items-center justify-between mb-1">
-            {MONTHS[month]} {selectedDay}
+            <div className="text-[10px] font-medium text-[var(--color-text-secondary)]">
+              {MONTHS[month]} {selectedDay}
+            </div>
+            <span className="text-[10px] text-[var(--color-gold-bright)]" title="Weather for this day">
+              {weatherFor(selectedDay, month, year)}
+            </span>
           </div>
           {dayEvents.length === 0 && (
             <div className="text-[var(--color-text-dim)] text-[10px] italic">No events</div>

src/components/ConnectionPill.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+type State = "unknown" | "connected" | "offline";
+
+// ponytail: a title-bar pill that probes the LLM endpoint on mount and on
+// click. Shows ● connected / ○ offline so the DM knows their backend is up
+// before generating. Replaces the inert "My Campaign" placeholder.
+export function ConnectionPill() {
+  const [state, setState] = useState<State>("unknown");
+  const [models, setModels] = useState(0);
+
+  async function test() {
+    setState("unknown");
+    try {
+      const result = await invoke<{ ok: boolean; models: string[]; error: string }>("test_connection");
+      if (result.ok) {
+        setState("connected");
+        setModels(result.models.length);
+      } else {
+        setState("offline");
+      }
+    } catch {
+      setState("offline");
+    }
+  }
+
+  useEffect(() => {
+    void test();
+  }, []);
+
+  const color =
+    state === "connected"
+      ? "var(--color-success)"
+      : state === "offline"
+        ? "var(--color-danger)"
+        : "var(--color-text-dim)";
+  const label =
+    state === "connected"
+      ? `LLM · ${models} models`
+      : state === "offline"
+        ? "LLM offline"
+        : "LLM…";
+
+  return (
+    <button
+      onClick={test}
+      data-tauri-no-drag
+      className="ml-2 flex items-center gap-1.5 text-[var(--color-text-dim)] text-xs hover:text-[var(--color-text-secondary)] transition-colors cursor-pointer"
+      title="Click to re-test LLM connection"
+      aria-label={`LLM connection: ${state}`}
+    >
+      <span
+        className="w-1.5 h-1.5 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}

src/components/Dashboard.tsx

@@ -2,235 +2,196 @@ import {
   Map,
   User,
   Swords,
-  ScrollText,
   Dice5,
-  Sparkles,
-  Timer,
   Volume2,
+  Timer,
   Calendar,
-  Maximize2,
   Wand2,
   ImagePlus,
   BookOpen,
+  Shuffle,
+  Flag,
+  ScrollText,
+  ArrowRight,
 } from "lucide-react";
+import { useEffect, useState } from "react";
 import { BentoCard } from "./BentoCard";
 import type { View } from "../App";
-import { NpcGenerator } from "./NpcGenerator";
+import {
-import { DiceRoller } from "./DiceRoller";
+  listGenerations,
-import { SessionLogger } from "./SessionLogger";
+  relativeTime,
-import { EncounterBuilder } from "./EncounterBuilder";
+  type GenerationKind,
-import { InitiativeTracker } from "./InitiativeTracker";
+  type GenerationSummary,
-import { RandomTables } from "./RandomTables";
+} from "../lib/generations";
-import { CalendarWidget } from "./CalendarWidget";
-import { WorldBuilder } from "./WorldBuilder";
-import { QuestDesigner } from "./QuestDesigner";
-import { ItemForge } from "./ItemForge";
-import { Soundboard } from "./Soundboard";
-import { ImageGenerator } from "./ImageGenerator";
 
 interface DashboardProps {
   onNavigate: (view: View) => void;
 }
 
+// ponytail: launcher cards — icon, title, one-line description, Open CTA.
+// No embedded mini-tools: the dashboard is a launcher, not an ant farm.
+interface Card {
+  icon: typeof Map;
+  title: string;
+  description: string;
+  view: View;
+  span?: string;
+  // when set, the card shows "Last: {title} · {relativeTime}" from history.
+  kind?: GenerationKind;
+}
+
+const CARDS: Card[] = [
+  {
+    icon: Map,
+    title: "World Builder",
+    description: "Generate a world with regions, landmarks, and conflicts.",
+    view: "world",
+    span: "sm:col-span-2",
+    kind: "world",
+  },
+  {
+    icon: Timer,
+    title: "Initiative",
+    description: "Track combatants, HP, conditions, and turn order.",
+    view: "initiative",
+    kind: undefined,
+  },
+  {
+    icon: Dice5,
+    title: "Dice Roller",
+    description: "Roll with advantage, modifiers, and roll templates.",
+    view: "dice",
+  },
+  {
+    icon: Swords,
+    title: "Encounter",
+    description: "Build balanced encounters with an XP budget.",
+    view: "encounter",
+    kind: "encounter",
+  },
+  {
+    icon: User,
+    title: "NPC Generator",
+    description: "Generate NPCs with portraits, personality, and goals.",
+    view: "npcs",
+    kind: "npc",
+  },
+  {
+    icon: Flag,
+    title: "Quest Designer",
+    description: "Design multi-step quests with twists and rewards.",
+    view: "quest",
+    kind: "quest",
+  },
+  {
+    icon: Wand2,
+    title: "Item Forge",
+    description: "Forge magic items with art and mechanics.",
+    view: "items",
+    kind: "item",
+  },
+  {
+    icon: ScrollText,
+    title: "Session Log",
+    description: "Take notes and generate an AI session summary.",
+    view: "session",
+    kind: "session",
+  },
+  {
+    icon: BookOpen,
+    title: "Lore (RAG)",
+    description: "Index your world bible and ground generations in it.",
+    view: "lore",
+  },
+  {
+    icon: Calendar,
+    title: "Calendar",
+    description: "Track the in-world date, events, and moon phases.",
+    view: "calendar",
+  },
+  {
+    icon: Shuffle,
+    title: "Random Tables",
+    description: "Roll on built-in and custom random tables.",
+    view: "tables",
+  },
+  {
+    icon: ImagePlus,
+    title: "Image Generator",
+    description: "Generate portraits, maps, and scene art (macOS).",
+    view: "image",
+    span: "sm:col-span-2",
+    kind: "image",
+  },
+  {
+    icon: Volume2,
+    title: "Soundboard",
+    description: "Synthesized ambience and SFX for the table.",
+    view: "sound",
+  },
+];
+
 export function Dashboard({ onNavigate }: DashboardProps) {
+  // ponytail: one fetch on mount → most-recent generation per kind, for the
+  // "Last: …" footer. listGenerations returns newest-first per kind.
+  const [latest, setLatest] = useState<Partial<Record<GenerationKind, GenerationSummary>>>({});
+  useEffect(() => {
+    (async () => {
+      try {
+        const all = await listGenerations();
+        const byKind: Partial<Record<GenerationKind, GenerationSummary>> = {};
+        for (const g of all) {
+          if (!byKind[g.kind]) byKind[g.kind] = g; // first occurrence is newest
+        }
+        setLatest(byKind);
+      } catch {
+        // generations backend unavailable — footer just stays hidden.
+      }
+    })();
+  }, []);
+
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 grid-rows-5 gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-3 p-4 h-full bg-[var(--color-bg-deep)] overflow-y-auto">
-      {/* World Map — 2×2 */}
+      {CARDS.map((card) => {
-      <BentoCard title="World Builder" icon={<Map size={16} />} span="col-span-2 row-span-2">
+        const last = card.kind ? latest[card.kind] : undefined;
-        <div className="flex flex-col h-full">
+        return (
-          <div className="flex-1 overflow-hidden">
+          <BentoCard
-            <WorldBuilder />
+            key={card.view}
-          </div>
+            title={card.title}
-          <button
+            icon={<card.icon size={16} />}
-            onClick={() => onNavigate("world")}
+            span={card.span}
-            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
+            <div className="flex flex-col h-full min-h-[120px]">
-          </button>
+              <div className="flex items-start gap-3 flex-1">
-        </div>
+                <div className="shrink-0 w-9 h-9 rounded-lg bg-[var(--color-gold-glow)] flex items-center justify-center text-[var(--color-gold-bright)]">
-      </BentoCard>
+                  <card.icon size={18} />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs text-[var(--color-text-secondary)] leading-relaxed line-clamp-2">
+                    {card.description}
+                  </p>
+                </div>
+              </div>
 
-      {/* NPC Sheet — 1×1 */}
+              {last && (
-      <BentoCard title="NPC Sheet" icon={<User size={16} />} span="col-span-1 row-span-1">
+                <p className="text-[10px] text-[var(--color-text-dim)] mt-2 truncate">
-        <div className="flex flex-col h-full">
+                  Last:{" "}
-          <div className="flex-1 overflow-hidden">
+                  <span className="text-[var(--color-text-secondary)]">{last.title}</span>{" "}
-            <NpcGenerator />
+                  · {relativeTime(last.createdAt)}
-          </div>
+                </p>
-          <button
+              )}
-            onClick={() => onNavigate("npcs")}
-            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>
 
-      {/* Dice Roller — 1×1 */}
+              <button
-      <BentoCard title="Dice Roller" icon={<Dice5 size={16} />} span="col-span-1 row-span-1">
+                onClick={() => onNavigate(card.view)}
-        <div className="flex flex-col h-full">
+                className="mt-2 self-start text-xs font-medium text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] flex items-center gap-1 cursor-pointer transition-colors"
-          <div className="flex-1 overflow-hidden">
+                aria-label={`Open ${card.title}`}
-            <DiceRoller />
+              >
-          </div>
+                Open <ArrowRight size={12} />
-          <button
+              </button>
-            onClick={() => onNavigate("dice")}
+            </div>
-            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)]"
+          </BentoCard>
-          >
+        );
-            <Maximize2 size={12} /> Expand
+      })}
-          </button>
-        </div>
-      </BentoCard>
-
-      {/* Encounter Builder — 1×1 */}
-      <BentoCard title="Encounter" icon={<Swords size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <EncounterBuilder />
-          </div>
-          <button
-            onClick={() => onNavigate("encounter")}
-            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>
-
-      {/* Session Log — 2×1 */}
-      <BentoCard title="Session Log" icon={<ScrollText size={16} />} span="col-span-2 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <SessionLogger />
-          </div>
-          <button
-            onClick={() => onNavigate("session")}
-            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>
-
-      {/* Quest Designer — 2×1 */}
-      <BentoCard title="Quest Designer" icon={<Sparkles size={16} />} span="col-span-2 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <QuestDesigner />
-          </div>
-          <button
-            onClick={() => onNavigate("quest")}
-            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>
-
-      {/* Initiative Tracker — 1×1 */}
-      <BentoCard title="Initiative" icon={<Timer size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <InitiativeTracker />
-          </div>
-          <button
-            onClick={() => onNavigate("initiative")}
-            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>
-
-      {/* Random Tables — 1×1 */}
-      <BentoCard title="Random Tables" icon={<Sparkles size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <RandomTables />
-          </div>
-          <button
-            onClick={() => onNavigate("tables")}
-            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>
-
-      {/* Calendar — 1×1 */}
-      <BentoCard title="Calendar" icon={<Calendar size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <CalendarWidget />
-          </div>
-          <button
-            onClick={() => onNavigate("calendar")}
-            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>
-
-      {/* Soundboard — 1×1 */}
-      <BentoCard title="Soundboard" icon={<Volume2 size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <Soundboard />
-          </div>
-          <button
-            onClick={() => onNavigate("sound")}
-            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>
-
-      {/* 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>
-
-      {/* Lore — 1×1 */}
-      <BentoCard title="Lore" icon={<BookOpen size={16} />} span="col-span-1 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <p className="text-xs text-[var(--color-text-secondary)] leading-relaxed">
-              Index your world bible into a local vector store and ground AI generations in it.
-            </p>
-          </div>
-          <button
-            onClick={() => onNavigate("lore")}
-            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
-          </button>
-        </div>
-      </BentoCard>
-
-      {/* Image Generator — 2×1 */}
-      <BentoCard title="Image Generator" icon={<ImagePlus size={16} />} span="col-span-2 row-span-1">
-        <div className="flex flex-col h-full">
-          <div className="flex-1 overflow-hidden">
-            <ImageGenerator />
-          </div>
-          <button
-            onClick={() => onNavigate("image")}
-            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>
   );
-}
+}

src/components/DiceRoller.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useCallback } from "react";
+import { usePersistentState } from "../lib/usePersistentState";
 import { useToast } from "./Toast";
 
 interface DieResult {
@@ -56,11 +57,11 @@ function applyMode(rolls: number[], sides: number, mode: Mode): { rolls: number[
 }
 
 export function DiceRoller() {
-  const [input, setInput] = useState("1d20");
+  const [input, setInput] = usePersistentState<string>("dice.input", "1d20");
-  const [results, setResults] = useState<DieResult[]>([]);
+  const [results, setResults] = usePersistentState<DieResult[]>("dice.history", []);
   const [lastTotal, setLastTotal] = useState<number | null>(null);
   const [lastBreakdown, setLastBreakdown] = useState<DieResult | null>(null);
-  const [mode, setMode] = useState<Mode>("normal");
+  const [mode, setMode] = usePersistentState<Mode>("dice.mode", "normal");
   const { addToast } = useToast();
 
   const roll = useCallback(

src/components/EncounterBuilder.tsx

@@ -5,7 +5,7 @@ import { addToLore } from "../lib/lore";
 import { useToast } from "./Toast";
 import { addGeneration, extractTitle, type Generation } from "../lib/generations";
 import { usePrefillEffect } from "../lib/usePrefill";
-import { bus, Events, type AddCombatantsPayload } from "../lib/bus";
+import { bus, Events, type AddCombatantsPayload, type PlayAmbientPayload } from "../lib/bus";
 import { encounterBudget, difficultyForXp, DIFFICULTY_COLOR, type Difficulty } from "../lib/encounter-budget";
 
 interface Encounter {
@@ -147,7 +147,6 @@ export function EncounterBuilder({ prefill, onPrefillConsumed }: Props = {}) {
   const [terrain, setTerrain] = useState("Forest");
   const [encounter, setEncounter] = useState<Encounter | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
   const { addToast } = useToast();
 
   usePrefillEffect(prefill ?? null, "encounter", () => onPrefillConsumed?.(), (g) => {
@@ -190,7 +189,6 @@ export function EncounterBuilder({ prefill, onPrefillConsumed }: Props = {}) {
 
   async function generate() {
     setLoading(true);
-    setError("");
     setEncounter(null);
     try {
       const result = await invoke<string>("generate", {
@@ -222,11 +220,9 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           `Encounter (party of ${partySize} level-${partyLevel}) in ${terrain}. ${monsters}\nTerrain: ${flattenValue(parsed.terrain)}\nDifficulty: ${flattenValue(parsed.difficulty)}\nLoot: ${flattenValue(parsed.loot)}`,
         );
       } else {
-        setError("Could not parse LLM response. Try again or check your LLM connection.");
         addToast("LLM returned an unparseable response", "error");
       }
     } catch (e) {
-      setError(String(e));
       addToast(`Encounter generation failed: ${e}`, "error");
     }
     setLoading(false);
@@ -255,6 +251,21 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
     );
   }
 
+  // ponytail: map the encounter's terrain to the closest synthesized ambient.
+  // Best-effort — the DM can tweak on the Soundboard. Covers the 12 terrains.
+  const TERRAIN_AMBIENT: Record<string, string> = {
+    Forest: "forest", Swamp: "rain", Coastal: "ocean", Ocean: "ocean",
+    Mountain: "wind", Desert: "wind", Underdark: "cave", Dungeon: "cave",
+    Urban: "tavern", Haunted: "thunder", Planar: "thunder", Ship: "ocean",
+    Siege: "wind",
+  };
+  function sendToSoundboard() {
+    const id = TERRAIN_AMBIENT[terrain] ?? "wind";
+    const payload: PlayAmbientPayload = { id, source: `${terrain} ambient` };
+    bus.emit(Events.PlayAmbient, payload);
+    addToast(`Sent ${terrain} ambient to Soundboard`, "success");
+  }
+
   return (
     <div className="flex flex-col gap-2 h-full overflow-y-auto">
       <div className="grid grid-cols-2 gap-2">
@@ -318,12 +329,14 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
         {loading ? "⚔ Generating…" : "⚔ Generate Encounter"}
       </button>
 
-      {error && (
+      {!encounter && !loading && (
-        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-2 text-[var(--color-danger)] text-xs">
+        <div className="flex flex-col items-center justify-center py-8 text-center text-[var(--color-text-dim)] text-xs">
-          {error}
+          <span>No encounter yet.</span>
+          <span className="mt-1">Set the party + terrain, then Generate.</span>
         </div>
       )}
 
+
       {encounter && (
         <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 flex flex-col gap-2">
           <div className="flex items-center justify-between">
@@ -366,6 +379,13 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           >
             ⚔ Send to Initiative Tracker
           </button>
+          <button
+            onClick={sendToSoundboard}
+            className="rounded-lg bg-[var(--color-bg-card)] border border-[var(--color-border-glass)] text-[var(--color-gold-bright)] px-3 py-1.5 text-xs font-semibold hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer flex items-center justify-center gap-1.5"
+            title="Play an ambient matching the terrain"
+          >
+            🎧 Send to Soundboard
+          </button>
         </div>
       )}
     </div>

src/components/GeneratedImage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
-import { Sparkles, ImageOff } from "lucide-react";
+import { ImageOff } from "lucide-react";
+import { useToast } from "./Toast";
 
 interface Props {
   /** Text-to-image prompt. Changing it triggers a new generation. */
@@ -22,13 +23,13 @@ export function GeneratedImage({ prompt, nonce = 0, className = "", aspect = "as
   const [dataUrl, setDataUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   const [unsupported, setUnsupported] = useState(false);
-  const [error, setError] = useState("");
+  const [expanded, setExpanded] = useState(false);
+  const { addToast } = useToast();
 
   useEffect(() => {
     if (!prompt) return;
     let cancelled = false;
     setLoading(true);
-    setError("");
     setUnsupported(false);
     invoke<string>("generate_image", { req: { prompt } })
       .then((url) => {
@@ -38,7 +39,7 @@ export function GeneratedImage({ prompt, nonce = 0, className = "", aspect = "as
         const msg = String(e);
         if (!cancelled) {
           if (msg.includes("macOS-only")) setUnsupported(true);
-          else setError(msg);
+          else addToast(`Image failed: ${msg}`, "error");
         }
       })
       .finally(() => !cancelled && setLoading(false));
@@ -62,25 +63,27 @@ export function GeneratedImage({ prompt, nonce = 0, className = "", aspect = "as
     );
   }
 
-  if (error) {
-    return (
-      <div className={box}>
-        <span className="text-[10px] text-[var(--color-danger)] px-2 text-center">{error}</span>
-      </div>
-    );
-  }
-
   if (loading) {
     return (
       <div className={box}>
-        <Sparkles size={20} className="text-[var(--color-gold-bright)] animate-pulse" />
+        <div className="absolute inset-0 skeleton" />
+        <span className="relative text-[10px] text-[var(--color-text-dim)]">Painting…</span>
       </div>
     );
   }
 
   return dataUrl ? (
     <div className={box}>
-      <img src={dataUrl} alt={prompt} className="w-full h-full object-cover" />
+      <img src={dataUrl} alt={prompt} className="w-full h-full object-cover cursor-zoom-in" onClick={() => setExpanded(true)} />
+      {expanded && (
+        <div
+          className="fixed inset-0 z-[60] bg-black/80 flex items-center justify-center p-8"
+          onClick={() => setExpanded(false)}
+          aria-label="Close image preview"
+        >
+          <img src={dataUrl} alt={prompt} className="max-w-full max-h-full rounded-lg object-contain" />
+        </div>
+      )}
     </div>
   ) : null;
 }

src/components/ImageGenerator.tsx

@@ -17,8 +17,8 @@ export function ImageGenerator({ prefill, onPrefillConsumed }: Props = {}) {
   const [model, setModel] = useState("");
   const [dataUrl, setDataUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
   const [variant, setVariant] = useState(0);
+  const [unsupported, setUnsupported] = useState(false);
   const { addToast } = useToast();
 
   usePrefillEffect(prefill ?? null, "image", () => onPrefillConsumed?.(), (g) => {
@@ -30,7 +30,6 @@ export function ImageGenerator({ prefill, onPrefillConsumed }: Props = {}) {
   async function generate() {
     if (!prompt.trim()) return;
     setLoading(true);
-    setError("");
     setDataUrl(null);
     try {
       // ponytail: append a variant tag to bust the backend's prompt-hash cache
@@ -40,12 +39,14 @@ export function ImageGenerator({ prefill, onPrefillConsumed }: Props = {}) {
         req: { prompt: `${prompt}${v}`, model: model.trim() || null },
       });
       setDataUrl(url);
+      setUnsupported(false);
       addToast("Image generated", "success");
       // ponytail: persist the PNG data URL so the DM can re-open past renders.
       void addGeneration({ kind: "image", title: prompt, data: url, source: model.trim() || DEFAULT_MODEL });
     } catch (e) {
-      setError(String(e));
+      const msg = String(e);
-      addToast(`Image generation failed: ${e}`, "error");
+      if (msg.toLowerCase().includes("macos-only")) setUnsupported(true);
+      addToast(`Image generation failed: ${msg}`, "error");
     }
     setLoading(false);
   }
@@ -56,8 +57,6 @@ export function ImageGenerator({ prefill, onPrefillConsumed }: Props = {}) {
     setTimeout(generate, 0);
   }
 
-  const unsupported = error.toLowerCase().includes("macos-only");
-
   return (
     <div className="flex flex-col gap-3 text-sm">
       <div className="flex flex-col gap-1">
@@ -115,24 +114,41 @@ export function ImageGenerator({ prefill, onPrefillConsumed }: Props = {}) {
         </div>
       )}
 
-      {error && !unsupported && (
-        <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>
-      )}
 
       {dataUrl && !loading && (
         <div className="flex flex-col gap-2">
           <div className="aspect-square w-full max-w-md mx-auto rounded-lg overflow-hidden border border-[var(--color-border-glass)] bg-[var(--color-bg-deep)]">
             <img src={dataUrl} alt={prompt} className="w-full h-full object-cover" />
           </div>
-          <a
+          <div className="flex justify-center gap-3">
-            href={dataUrl}
+            <a
-            download="dm-pal-image.png"
+              href={dataUrl}
-            className="text-center text-xs text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] cursor-pointer transition-colors"
+              download="dm-pal-image.png"
-          >
+              className="text-xs text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] cursor-pointer transition-colors"
-            ⬇ Save PNG
+            >
-          </a>
+              ⬇ Save PNG
+            </a>
+            <button
+              onClick={() => {
+                // ponytail: copy the rendered PNG to the clipboard. The
+                // Clipboard API needs a Blob, not a data URL string.
+                fetch(dataUrl).then((r) => r.blob()).then((blob) =>
+                  navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]),
+                ).then(() => addToast("Image copied to clipboard", "success"))
+                  .catch(() => addToast("Copy failed", "error"));
+              }}
+              className="text-xs text-[var(--color-gold-bright)] hover:text-[var(--color-gold-muted)] cursor-pointer transition-colors"
+            >
+              ⧉ Copy
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!dataUrl && !loading && !unsupported && (
+        <div className="flex flex-col items-center justify-center aspect-square max-w-md mx-auto text-center text-[var(--color-text-dim)] text-xs">
+          <span>No image yet.</span>
+          <span className="mt-1">Describe a scene or portrait, then Generate.</span>
         </div>
       )}
     </div>

src/components/InitiativeTracker.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { useToast } from "./Toast";
 import { bus, Events, type AddCombatantsPayload } from "../lib/bus";
+import { usePersistentState } from "../lib/usePersistentState";
 
 interface Combatant {
   id: string;
@@ -10,6 +11,8 @@ interface Combatant {
   maxHp: number;
   conditions: string[];
   notes?: string;
+  // ponytail: 5e death saves — 3 successes stabilize, 3 failures = dead.
+  deathSaves?: { successes: number; failures: number };
 }
 
 const CONDITIONS = [
@@ -18,19 +21,33 @@ const CONDITIONS = [
   "Restrained", "Stunned", "Unconscious",
 ];
 
+const TURN_SECONDS = 60;
+
 let nextId = 1;
 
 export function InitiativeTracker() {
-  const [combatants, setCombatants] = useState<Combatant[]>([]);
+  // ponytail: persist combatants, round, and active turn so a refresh
+  // mid-combat doesn't lose the tracker. nextId stays module-level (cosmetic).
+  const [combatants, setCombatants] = usePersistentState<Combatant[]>("initiative.combatants", []);
   const [name, setName] = useState("");
   const [initBonus, setInitBonus] = useState(0);
   const [hp, setHp] = useState(10);
-  const [activeId, setActiveId] = useState<string | null>(null);
+  const [activeId, setActiveId] = usePersistentState<string | null>("initiative.activeId", null);
-  const [round, setRound] = useState(1);
+  const [round, setRound] = usePersistentState<number>("initiative.round", 1);
   const [confirmReset, setConfirmReset] = useState(false);
   const [hpInput, setHpInput] = useState<Record<string, string>>({});
-  // (useToast is wired up in the bus handler below; silence unused-import.)
+  // ponytail: per-combatant UI flags. Live in component state, not persisted.
-  useToast();
+  const [condInput, setCondInput] = useState<Record<string, string>>({});
+  const [condEditing, setCondEditing] = useState<string | null>(null);
+  const [notesEditing, setNotesEditing] = useState<string | null>(null);
+  // ponytail: custom conditions the DM has added, persisted so they reuse
+  // across sessions (e.g. "Concentrating", "Raging", "Hexed").
+  const [customConditions, setCustomConditions] = usePersistentState<string[]>("initiative.customConditions", []);
+  // ponytail: optional turn timer — counts down from TURN_SECONDS, resets on
+  // Next Turn, turns red at 0. Off until the DM starts it.
+  const [timerOn, setTimerOn] = useState(false);
+  const [timerLeft, setTimerLeft] = useState(TURN_SECONDS);
+  const { addToast } = useToast();
 
   // ponytail: listen for EncounterBuilder's "send to initiative" event.
   // We don't auto-switch view (the DM might be editing) but the toast tells
@@ -153,8 +170,65 @@ export function InitiativeTracker() {
     } else {
       setActiveId(combatants[idx + 1].id);
     }
+    setTimerLeft(TURN_SECONDS); // ponytail: reset the per-turn timer.
   }, [combatants, activeId]);
 
+  // ponytail: tick the timer once per second while armed. Stopping at 0 lets
+  // the red zero sit until the DM advances (don't auto-advance — that would
+  // steal a player's turn).
+  useEffect(() => {
+    if (!timerOn) return;
+    if (timerLeft <= 0) return;
+    const t = setTimeout(() => setTimerLeft((s) => s - 1), 1000);
+    return () => clearTimeout(t);
+  }, [timerOn, timerLeft]);
+
+  // ponytail: 5e death save. d20: 10+ = success, <10 = failure, nat 20 = 2
+  // successes, nat 1 = 2 failures. 3 successes stabilize, 3 failures = dead.
+  function rollDeathSave(id: string) {
+    const roll = Math.floor(Math.random() * 20) + 1;
+    setCombatants((prev) =>
+      prev.map((c) => {
+        if (c.id !== id) return c;
+        const ds = c.deathSaves ?? { successes: 0, failures: 0 };
+        let succ = 0;
+        let fail = 0;
+        if (roll === 20) succ += 2;
+        else if (roll === 1) fail += 2;
+        else if (roll >= 10) succ += 1;
+        else fail += 1;
+        const next = { successes: ds.successes + succ, failures: ds.failures + fail };
+        return { ...c, deathSaves: next };
+      }),
+    );
+    addToast(`Death save: ${roll}`);
+  }
+
+  function adjustDeathSave(id: string, kind: "successes" | "failures", delta: number) {
+    setCombatants((prev) =>
+      prev.map((c) => {
+        if (c.id !== id) return c;
+        const ds = c.deathSaves ?? { successes: 0, failures: 0 };
+        return { ...c, deathSaves: { ...ds, [kind]: Math.max(0, Math.min(3, ds[kind] + delta)) } };
+      }),
+    );
+  }
+
+  function addCustomCondition(id: string, raw: string) {
+    const cond = raw.trim();
+    if (!cond) return;
+    toggleCondition(id, cond);
+    if (!customConditions.includes(cond) && !CONDITIONS.includes(cond)) {
+      setCustomConditions((prev) => [...prev, cond]);
+    }
+    setCondInput((p) => { const { [id]: _, ...r } = p; return r; });
+    setCondEditing(null);
+  }
+
+  function setNotes(id: string, raw: string) {
+    setCombatants((prev) => prev.map((c) => (c.id === id ? { ...c, notes: raw } : c)));
+  }
+
   const reset = useCallback(() => {
     setCombatants([]);
     setActiveId(null);
@@ -179,7 +253,24 @@ export function InitiativeTracker() {
         <span className="text-[var(--color-gold-bright)] font-heading text-xs font-semibold">
           Round {round}
         </span>
-        <div className="flex gap-1">
+        <div className="flex gap-1 items-center">
+          {/* ponytail: optional per-turn timer. Toggle to arm; resets on Next Turn. */}
+          {activeId && (
+            <button
+              onClick={() => { setTimerOn((o) => !o); if (!timerOn) setTimerLeft(TURN_SECONDS); }}
+              className={`rounded px-1.5 py-0.5 text-[10px] font-mono cursor-pointer border transition-colors ${
+                timerOn
+                  ? timerLeft === 0
+                    ? "bg-[var(--color-danger)]/20 border-[var(--color-danger)] text-[var(--color-danger)]"
+                    : "border-[var(--color-gold-bright)] text-[var(--color-gold-bright)]"
+                  : "border-[var(--color-border-subtle)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+              }`}
+              title="Toggle turn timer"
+              aria-label="Toggle turn timer"
+            >
+              {timerOn ? `${timerLeft}s` : "⏱"}
+            </button>
+          )}
           <button
             onClick={nextTurn}
             disabled={combatants.length === 0}
@@ -359,6 +450,45 @@ export function InitiativeTracker() {
                 <span className="text-[9px] text-[var(--color-text-dim)] self-center">set</span>
               </div>
 
+              {/* Death saves — only when downed (HP 0). 5e: 3 succ stabilize, 3 fail = dead. */}
+              {c.hp === 0 && (
+                <div className="flex items-center gap-1 mt-1">
+                  <span className="text-[9px] text-[var(--color-text-dim)] shrink-0">Deaths:</span>
+                  {[0, 1, 2].map((i) => (
+                    <button
+                      key={`s${i}`}
+                      onClick={() => adjustDeathSave(c.id, "successes", ((c.deathSaves?.successes ?? 0) > i) ? -1 : 1)}
+                      className="w-3 h-3 rounded-full border text-[8px] leading-none cursor-pointer"
+                      style={{
+                        backgroundColor: (c.deathSaves?.successes ?? 0) > i ? "var(--color-success)" : "transparent",
+                        borderColor: "var(--color-success)",
+                      }}
+                      aria-label="Death save success"
+                    />
+                  ))}
+                  <span className="text-[var(--color-text-dim)] mx-0.5">/</span>
+                  {[0, 1, 2].map((i) => (
+                    <button
+                      key={`f${i}`}
+                      onClick={() => adjustDeathSave(c.id, "failures", ((c.deathSaves?.failures ?? 0) > i) ? -1 : 1)}
+                      className="w-3 h-3 rounded-full border text-[8px] leading-none cursor-pointer"
+                      style={{
+                        backgroundColor: (c.deathSaves?.failures ?? 0) > i ? "var(--color-danger)" : "transparent",
+                        borderColor: "var(--color-danger)",
+                      }}
+                      aria-label="Death save failure"
+                    />
+                  ))}
+                  <button
+                    onClick={() => rollDeathSave(c.id)}
+                    className="ml-1 rounded bg-[var(--color-bg-deep)] border border-[var(--color-border-subtle)] px-1.5 py-0 text-[9px] text-[var(--color-text-secondary)] hover:text-[var(--color-gold-bright)] cursor-pointer"
+                    title="Roll a death save (d20)"
+                  >
+                    🎲
+                  </button>
+                </div>
+              )}
+
               {/* Conditions */}
               {c.conditions.length > 0 && (
                 <div className="flex flex-wrap gap-0.5 mt-1">
@@ -375,18 +505,78 @@ export function InitiativeTracker() {
                 </div>
               )}
 
-              {/* Add condition — show ALL 13, not 5. */}
+              {/* Add condition — standard 13 + custom, plus a free-text input. */}
-              <div className="flex flex-wrap gap-0.5 mt-1">
+              {condEditing === c.id ? (
-                {CONDITIONS.filter((cn) => !c.conditions.includes(cn)).map((cn) => (
+                <div className="flex gap-1 mt-1">
+                  <input
+                    className="flex-1 min-w-0 rounded bg-[var(--color-bg-deep)] border border-[var(--color-gold-bright)] px-1.5 py-0.5 text-[10px] text-[var(--color-text-primary)] focus:outline-none"
+                    placeholder="Custom condition…"
+                    value={condInput[c.id] ?? ""}
+                    onChange={(e) => setCondInput((p) => ({ ...p, [c.id]: e.target.value }))}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") addCustomCondition(c.id, condInput[c.id] ?? "");
+                      if (e.key === "Escape") setCondEditing(null);
+                    }}
+                    autoFocus
+                    aria-label="Custom condition"
+                  />
+                  {customConditions.filter((cn) => !c.conditions.includes(cn)).slice(0, 4).map((cn) => (
+                    <button key={cn} onClick={() => addCustomCondition(c.id, cn)} className="rounded bg-[var(--color-bg-deep)] text-[var(--color-text-dim)] px-1 py-0 text-[9px] cursor-pointer hover:text-[var(--color-text-secondary)]">{cn}</button>
+                  ))}
+                </div>
+              ) : (
+                <div className="flex flex-wrap gap-0.5 mt-1">
+                  {CONDITIONS.filter((cn) => !c.conditions.includes(cn)).map((cn) => (
+                    <button
+                      key={cn}
+                      onClick={() => toggleCondition(c.id, cn)}
+                      className="rounded bg-[var(--color-bg-deep)] text-[var(--color-text-dim)] px-1 py-0 text-[9px] hover:text-[var(--color-text-secondary)] cursor-pointer transition-colors"
+                      title={`Add ${cn}`}
+                    >
+                      +{cn.slice(0, 3)}
+                    </button>
+                  ))}
+                  {customConditions.filter((cn) => !c.conditions.includes(cn) && !CONDITIONS.includes(cn)).map((cn) => (
+                    <button
+                      key={cn}
+                      onClick={() => toggleCondition(c.id, cn)}
+                      className="rounded bg-[var(--color-bg-deep)] text-[var(--color-gold-muted)] px-1 py-0 text-[9px] hover:text-[var(--color-gold-bright)] cursor-pointer transition-colors"
+                      title={`Add ${cn}`}
+                    >
+                      +{cn.slice(0, 3)}
+                    </button>
+                  ))}
                   <button
-                    key={cn}
+                    onClick={() => setCondEditing(c.id)}
-                    onClick={() => toggleCondition(c.id, cn)}
+                    className="rounded bg-[var(--color-bg-deep)] text-[var(--color-text-dim)] px-1 py-0 text-[9px] hover:text-[var(--color-gold-bright)] cursor-pointer transition-colors"
-                    className="rounded bg-[var(--color-bg-deep)] text-[var(--color-text-dim)] px-1 py-0 text-[9px] hover:text-[var(--color-text-secondary)] cursor-pointer transition-colors"
+                    title="Add a custom condition"
-                    title={`Add ${cn}`}
                   >
-                    +{cn.slice(0, 3)}
+                    +…
                   </button>
-                ))}
+                </div>
+              )}
+
+              {/* Notes per combatant — table memory for concentration, movement, etc. */}
+              <div className="mt-1">
+                {notesEditing === c.id ? (
+                  <textarea
+                    className="w-full rounded bg-[var(--color-bg-deep)] border border-[var(--color-gold-bright)] px-1.5 py-1 text-[10px] text-[var(--color-text-primary)] focus:outline-none resize-y min-h-12"
+                    placeholder="Notes (e.g. concentrating on Hold Person, 50ft move left)…"
+                    value={c.notes ?? ""}
+                    onChange={(e) => setNotes(c.id, e.target.value)}
+                    onBlur={() => setNotesEditing(null)}
+                    autoFocus
+                    aria-label={`Notes for ${c.name}`}
+                  />
+                ) : (
+                  <button
+                    onClick={() => setNotesEditing(c.id)}
+                    className={`text-[9px] cursor-pointer transition-colors ${c.notes ? "text-[var(--color-text-secondary)]" : "text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"}`}
+                    title="Notes"
+                  >
+                    {c.notes ? `📝 ${c.notes}` : "📝 add note"}
+                  </button>
+                )}
               </div>
             </div>
           );

src/components/ItemForge.tsx

@@ -31,7 +31,6 @@ export function ItemForge({ prefill, onPrefillConsumed }: Props = {}) {
   const [item, setItem] = useState<ItemResponse | null>(null);
   const [rawResponse, setRawResponse] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
   const [artNonce, setArtNonce] = useState(0);
   const { addToast } = useToast();
 
@@ -50,7 +49,6 @@ export function ItemForge({ prefill, onPrefillConsumed }: Props = {}) {
 
   async function generate() {
     setLoading(true);
-    setError("");
     setItem(null);
     setRawResponse(null);
     try {
@@ -92,11 +90,9 @@ The JSON must have exactly these keys:
           `${parsed.name || "Magic item"} — ${parsed.rarity || rarity} ${parsed.type || itemType}. ${flattenValue(parsed.description)}\nMechanics: ${flattenValue(parsed.mechanical)}\nLore: ${flattenValue(parsed.lore)}`,
         );
       } else {
-        setError("Could not parse LLM response as JSON. Raw response shown below.");
         addToast("LLM returned an unparseable response", "error");
       }
     } catch (e) {
-      setError(String(e));
       addToast(`Item generation failed: ${e}`, "error");
     }
     setLoading(false);
@@ -114,6 +110,14 @@ The JSON must have exactly these keys:
   const mechanicalText = item ? flattenValue(item.mechanical) : "";
   const hasParseError = !item && rawResponse;
 
+  // ponytail: one-click "surprise me" — random rarity + type, no typed prompt.
+  function randomItem() {
+    setRarity(RARITIES[Math.floor(Math.random() * RARITIES.length)]);
+    setItemType(TYPES[Math.floor(Math.random() * TYPES.length)]);
+    setPrompt("");
+    setTimeout(generate, 0);
+  }
+
   return (
     <div className="flex flex-col gap-3">
       <div className="grid grid-cols-2 gap-2">
@@ -159,10 +163,19 @@ The JSON must have exactly these keys:
       >
         {loading ? "⚔ Forging…" : "⚔ Forge Item"}
       </button>
+      <button
+        onClick={randomItem}
+        disabled={loading}
+        title="Surprise me — random rarity and type"
+        className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-3 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer disabled:opacity-50"
+      >
+        🎲 Random
+      </button>
 
-      {error && (
+      {!item && !loading && !hasParseError && (
-        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs">
+        <div className="flex flex-col items-center justify-center py-8 text-center text-[var(--color-text-dim)] text-xs">
-          {error}
+          <span>No item yet.</span>
+          <span className="mt-1">Pick rarity + type, then Forge.</span>
         </div>
       )}
 

src/components/LorePanel.tsx

@@ -23,6 +23,7 @@ export function LorePanel() {
   const [query, setQuery] = useState("");
   const [hits, setHits] = useState<RagHit[]>([]);
   const [searching, setSearching] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
 
   async function loadSources() {
     try {
@@ -59,6 +60,7 @@ export function LorePanel() {
 
   async function clearAll() {
     await invoke("rag_clear", { source: null });
+    setConfirmClear(false);
     loadSources();
   }
 
@@ -105,12 +107,30 @@ export function LorePanel() {
         <div className="flex items-center justify-between">
           <h3 className="font-heading text-[var(--color-gold-bright)] text-sm">Indexed Sources</h3>
           {sources.length > 0 && (
-            <button
+            confirmClear ? (
-              onClick={clearAll}
+              <div className="flex items-center gap-1">
-              className="text-xs text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer transition-colors"
+                <span className="text-[10px] text-[var(--color-danger)]">Clear all sources?</span>
-            >
+                <button
-              clear all
+                  onClick={clearAll}
-            </button>
+                  className="rounded bg-[var(--color-danger)] text-white px-2 py-0.5 text-[10px] font-semibold cursor-pointer"
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={() => setConfirmClear(false)}
+                  className="rounded bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-dim)] px-2 py-0.5 text-[10px] cursor-pointer"
+                >
+                  No
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setConfirmClear(true)}
+                className="text-xs text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer transition-colors"
+              >
+                clear all
+              </button>
+            )
           )}
         </div>
         {sources.length === 0 ? (
@@ -160,7 +180,13 @@ export function LorePanel() {
               <li key={i} className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-2">
                 <div className="flex items-center justify-between mb-1">
                   <span className="text-[10px] text-[var(--color-gold-bright)]">{h.source}</span>
-                  <span className="text-[10px] text-[var(--color-text-dim)]">score {h.score.toFixed(3)}</span>
+                  {/* ponytail: relevance bar instead of a raw cosine score a
+                      DM can't read. Clamp 0–1, gold fill. */}
+                  <div className="flex items-center gap-1.5">
+                    <div className="w-12 h-1 rounded-full bg-[var(--color-bg-deep)] overflow-hidden">
+                      <div className="h-full bg-[var(--color-gold-bright)]" style={{ width: `${Math.round(Math.max(0, Math.min(1, h.score)) * 100)}%` }} />
+                    </div>
+                  </div>
                 </div>
                 <p className="text-xs text-[var(--color-text-primary)] leading-relaxed whitespace-pre-wrap">{h.text}</p>
               </li>

src/components/NpcGenerator.tsx

@@ -27,8 +27,10 @@ export function NpcGenerator({ prefill, onPrefillConsumed }: Props = {}) {
   const [name, setName] = useState("");
   const [npc, setNpc] = useState<NpcResponse | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
   const [portraitNonce, setPortraitNonce] = useState(0);
+  // ponytail: in-place edit of personality/goals — add/remove without regenerating.
+  const [newTrait, setNewTrait] = useState("");
+  const [newGoal, setNewGoal] = useState("");
   const { addToast } = useToast();
 
   usePrefillEffect(prefill ?? null, "npc", () => onPrefillConsumed?.(), (g) => {
@@ -44,9 +46,27 @@ export function NpcGenerator({ prefill, onPrefillConsumed }: Props = {}) {
   // text so we drop the name in-image when one is given.
   const portraitPrompt = npc ? `fantasy oil-painting portrait of a ${race} ${background.toLowerCase()}, ${alignment.toLowerCase()} demeanor, ${ensureArray(npc.personality).slice(0, 2).map(flattenValue).join(", ")}, dramatic lighting, 1024x1024${name ? `, name "${name}" rendered as a caption` : ""}` : null;
 
+  function removeTrait(i: number) {
+    if (!npc) return;
+    setNpc({ ...npc, personality: npc.personality.filter((_, j) => j !== i) });
+  }
+  function addTrait() {
+    if (!npc || !newTrait.trim()) return;
+    setNpc({ ...npc, personality: [...npc.personality, newTrait.trim()] });
+    setNewTrait("");
+  }
+  function removeGoal(i: number) {
+    if (!npc) return;
+    setNpc({ ...npc, goals: npc.goals.filter((_, j) => j !== i) });
+  }
+  function addGoal() {
+    if (!npc || !newGoal.trim()) return;
+    setNpc({ ...npc, goals: [...npc.goals, newGoal.trim()] });
+    setNewGoal("");
+  }
+
   async function generate() {
     setLoading(true);
-    setError("");
     setNpc(null);
     try {
       const prompt = `Create a detailed NPC for a fantasy RPG:
@@ -84,11 +104,9 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           `${name || "An unnamed NPC"} — a ${race} ${background} (${alignment}). ${parsed.bio}\nPersonality: ${persona}\nGoals: ${goals}`,
         );
       } else {
-        setError("Could not parse LLM response. Try again or check your LLM connection.");
         addToast("LLM returned an unparseable response", "error");
       }
     } catch (e) {
-      setError(String(e));
       addToast(`NPC generation failed: ${e}`, "error");
     }
     setLoading(false);
@@ -159,11 +177,6 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
       </button>
 
       {/* Result */}
-      {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>
-      )}
 
       {npc && (
         <div className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 flex flex-col gap-2">
@@ -188,18 +201,45 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           <div>
             <span className="text-[var(--color-text-secondary)] text-xs font-medium">Personality:</span>
             <div className="flex flex-wrap gap-1 mt-1">
-              {ensureArray(npc.personality).map((p, i) => (
+              {npc.personality.map((p, i) => (
-                <span key={i} className="rounded-full bg-[var(--color-gold-glow)] text-[var(--color-gold-bright)] px-2 py-0.5 text-xs">
+                <span
-                  {flattenValue(p)}
+                  key={i}
+                  onClick={() => removeTrait(i)}
+                  className="rounded-full bg-[var(--color-gold-glow)] text-[var(--color-gold-bright)] px-2 py-0.5 text-xs cursor-pointer hover:opacity-70"
+                  title="Remove"
+                >
+                  {p} ×
                 </span>
               ))}
+              <input
+                className="rounded-full bg-[var(--color-bg-deep)] border border-[var(--color-border-subtle)] px-2 py-0.5 text-xs text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] w-24"
+                value={newTrait}
+                onChange={(e) => setNewTrait(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && addTrait()}
+                placeholder="+ trait"
+                aria-label="Add personality trait"
+              />
             </div>
           </div>
           <div>
             <span className="text-[var(--color-text-secondary)] text-xs font-medium">Goals:</span>
-            <ul className="list-disc list-inside text-[var(--color-text-primary)] text-xs mt-1">
+            <ul className="text-[var(--color-text-primary)] text-xs mt-1 space-y-0.5">
-              {ensureArray(npc.goals).map((g, i) => <li key={i}>{flattenValue(g)}</li>)}
+              {npc.goals.map((g, i) => (
+                <li key={i} className="flex items-center gap-1.5">
+                  <span className="text-[var(--color-gold-bright)]">•</span>
+                  <span className="flex-1">{g}</span>
+                  <button onClick={() => removeGoal(i)} className="text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer text-[10px]" title="Remove goal">×</button>
+                </li>
+              ))}
             </ul>
+            <input
+              className="mt-1 rounded bg-[var(--color-bg-deep)] border border-[var(--color-border-subtle)] px-2 py-0.5 text-xs text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-gold-bright)] w-full"
+              value={newGoal}
+              onChange={(e) => setNewGoal(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addGoal()}
+              placeholder="+ add a goal…"
+              aria-label="Add goal"
+            />
           </div>
         </div>
       )}

src/components/QuestDesigner.tsx

@@ -31,7 +31,9 @@ export function QuestDesigner({ prefill, onPrefillConsumed }: Props = {}) {
   const [quest, setQuest] = useState<QuestResponse | null>(null);
   const [currentStep, setCurrentStep] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  // ponytail: player-facing view hides the Twist + Choices so the DM can share
+  // the screen without spoiling. Step status is derived from currentStep.
+  const [playerView, setPlayerView] = useState(false);
   const { addToast } = useToast();
 
   usePrefillEffect(prefill ?? null, "quest", () => onPrefillConsumed?.(), (g) => {
@@ -45,7 +47,6 @@ export function QuestDesigner({ prefill, onPrefillConsumed }: Props = {}) {
 
   async function generate() {
     setLoading(true);
-    setError("");
     setQuest(null);
     setCurrentStep(0);
     try {
@@ -82,11 +83,9 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           `Quest: ${parsed.title || "Untitled"} (level ${level}${theme ? `, ${theme}` : ""}).\nHook: ${parsed.hook}\n${steps}\nTwist: ${parsed.twist}\nReward: ${parsed.reward}`,
         );
       } else {
-        setError("Could not parse LLM response. Try again or check your LLM connection.");
         addToast("LLM returned an unparseable response", "error");
       }
     } catch (e) {
-      setError(String(e));
       addToast(`Quest generation failed: ${e}`, "error");
     }
     setLoading(false);
@@ -125,14 +124,29 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
         >
           {loading ? "✨ Designing…" : "✨ Design Quest"}
         </button>
+        {quest && (
+          <button
+            onClick={() => setPlayerView((v) => !v)}
+            className={`rounded-lg px-3 py-2 text-xs font-semibold border transition-colors cursor-pointer ${
+              playerView
+                ? "bg-[var(--color-gold-glow)] border-[var(--color-gold-bright)] text-[var(--color-gold-bright)]"
+                : "bg-[var(--color-bg-surface)] border-[var(--color-border-glass)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+            }`}
+            title="Hide the twist and choices for screen-sharing"
+          >
+            {playerView ? "👁 Player view" : "🖥 GM view"}
+          </button>
+        )}
       </div>
 
-      {error && (
+      {!quest && !loading && (
-        <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-3 text-[var(--color-danger)] text-xs">
+        <div className="flex flex-col items-center justify-center py-8 text-center text-[var(--color-text-dim)] text-xs">
-          {error}
+          <span>No quest yet.</span>
+          <span className="mt-1">Set the theme + scope, then Design Quest.</span>
         </div>
       )}
 
+
       {quest && (
         <div className="flex flex-col gap-3">
           {/* Quest title & hook */}
@@ -172,13 +186,16 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
               </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">
+                <div className="flex items-center gap-2 mb-1">
-                  Step {currentStep + 1}: {quest.steps[currentStep].title}
+                  <h5 className="text-[var(--color-text-primary)] text-sm font-semibold">
-                </h5>
+                    Step {currentStep + 1}: {quest.steps[currentStep].title}
+                  </h5>
+                  <span className="text-[9px] uppercase tracking-wider text-[var(--color-gold-bright)]">Active</span>
+                </div>
                 <p className="text-[var(--color-text-secondary)] text-sm leading-relaxed">
                   {quest.steps[currentStep].description}
                 </p>
-                {quest.steps[currentStep].choice && (
+                {quest.steps[currentStep].choice && !playerView && (
                   <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>
@@ -205,7 +222,7 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           )}
 
           {/* Twist */}
-          {quest.twist && (
+          {quest.twist && !playerView && (
             <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>

src/components/RandomTables.tsx

@@ -57,6 +57,128 @@ const BUILTIN_TABLES: RandomTable[] = [
       { min: 10, max: 10, result: "Writes everything down in a tiny notebook" },
     ],
   },
+  {
+    name: "NPC Names",
+    dice: "1d20",
+    entries: [
+      { min: 1, max: 2, result: "Aldric Holloway" },
+      { min: 3, max: 4, result: "Mira Copperkettle" },
+      { min: 5, max: 6, result: "Theron Ashwood" },
+      { min: 7, max: 8, result: "Sable Nightwhisper" },
+      { min: 9, max: 10, result: "Brom Stonefist" },
+      { min: 11, max: 12, result: "Elara Dawnbrook" },
+      { min: 13, max: 14, result: "Vaelris Moonsong" },
+      { min: 15, max: 16, result: "Greta Bracken" },
+      { min: 17, max: 18, result: "Corvus Vane" },
+      { min: 19, max: 20, result: "Isolde Ferrow" },
+    ],
+  },
+  {
+    name: "Traps",
+    dice: "1d12",
+    entries: [
+      { min: 1, max: 2, result: "Pressure plates release a poison dart volley" },
+      { min: 3, max: 4, result: "Floor tilts into a spiked pit" },
+      { min: 5, max: 6, result: "Rune flares: failing save teleports the victim 30ft up" },
+      { min: 7, max: 8, result: "A false door slams and locks, flooding the room with water" },
+      { min: 9, max: 10, result: "Gas vent: everyone in 10ft saves or falls unconscious" },
+      { min: 11, max: 12, result: "Sculpted eyes animate and cast Hold Person" },
+    ],
+  },
+  {
+    name: "Dreams",
+    dice: "1d10",
+    entries: [
+      { min: 1, max: 2, result: "A song you almost remember teaching you a secret" },
+      { min: 3, max: 4, result: "You fall through endless clouds and wake before landing" },
+      { min: 5, max: 6, result: "A dead friend warns you of a coming betrayal" },
+      { min: 7, max: 8, result: "You are the dragon, and the party are the monsters" },
+      { min: 9, max: 10, result: "A faceless figure offers you a gift you can't refuse" },
+    ],
+  },
+  {
+    name: "Dungeon Encounters",
+    dice: "1d12",
+    entries: [
+      { min: 1, max: 2, result: "1d4 goblins arguing over found loot" },
+      { min: 3, max: 4, result: "A skeleton polishing its own skull" },
+      { min: 5, max: 6, result: "A gelatinous cube drifting down the corridor" },
+      { min: 7, max: 8, result: "Cultists mid-ritual around a dark pool" },
+      { min: 9, max: 10, result: "A wounded adventurer begging for water" },
+      { min: 11, max: 12, result: "A mimic chest that's already eaten someone" },
+    ],
+  },
+  {
+    name: "Wilderness Encounters",
+    dice: "1d12",
+    entries: [
+      { min: 1, max: 2, result: "A deer that watches without fleeing" },
+      { min: 3, max: 4, result: "A traveler's shrine with a fresh offering" },
+      { min: 5, max: 6, result: "Wolf tracks circling the party's camp" },
+      { min: 7, max: 8, result: "A group of foraging halflings" },
+      { min: 9, max: 10, result: "An old battlefield, bones half-buried" },
+      { min: 11, max: 12, result: "A fae ring of mushrooms humming faintly" },
+    ],
+  },
+  {
+    name: "Urban Encounters",
+    dice: "1d10",
+    entries: [
+      { min: 1, max: 2, result: "A pickpocket bumps a party member" },
+      { min: 3, max: 4, result: "A street preacher predicts doom" },
+      { min: 5, max: 6, result: "A merchant chases a thief through the crowd" },
+      { min: 7, max: 8, result: "A noble's carriage blocks the street, demanding right of way" },
+      { min: 9, max: 10, result: "A wanted poster bearing a party member's likeness" },
+    ],
+  },
+  {
+    name: "Inn Names",
+    dice: "1d12",
+    entries: [
+      { min: 1, max: 2, result: "The Crooked Candle" },
+      { min: 3, max: 4, result: "The Sour Barrel" },
+      { min: 5, max: 6, result: "The Drowned Cat" },
+      { min: 7, max: 8, result: "The Honest Thief" },
+      { min: 9, max: 10, result: "The Last Lantern" },
+      { min: 11, max: 12, result: "The Brass Sow" },
+    ],
+  },
+  {
+    name: "Ship Names",
+    dice: "1d10",
+    entries: [
+      { min: 1, max: 2, result: "The Salt-Scarred" },
+      { min: 3, max: 4, result: "Drifting Promise" },
+      { min: 5, max: 6, result: "The Widow's Joy" },
+      { min: 7, max: 8, result: "Tide Liar" },
+      { min: 9, max: 10, result: "The Gilded Hull" },
+    ],
+  },
+  {
+    name: "Caravan Cargo",
+    dice: "1d8",
+    entries: [
+      { min: 1, max: 1, result: "Casks of sour wine" },
+      { min: 2, max: 2, result: "Bolts of dyed wool" },
+      { min: 3, max: 3, result: "A caged, very unhappy owlbear cub" },
+      { min: 4, max: 4, result: "Iron ingots, smudged with old runes" },
+      { min: 5, max: 5, result: "A sealed coffin, labeled 'do not open'" },
+      { min: 6, max: 6, result: "Crates of fragile glassware" },
+      { min: 7, max: 7, result: "Sacks of exotic spice" },
+      { min: 8, max: 8, result: "A peasant family fleeing trouble" },
+    ],
+  },
+  {
+    name: "Treasure Hoards",
+    dice: "1d12",
+    entries: [
+      { min: 1, max: 3, result: "500 gp, a silver chalice, and a scroll of Fireball" },
+      { min: 4, max: 6, result: "2,000 gp, a +1 weapon, and a worn spellbook" },
+      { min: 7, max: 9, result: "A gem-studded idol worth 1,500 gp and a cursed ring" },
+      { min: 10, max: 10, result: "A deck of many things (the DMG kind)" },
+      { min: 11, max: 12, result: "A map to a dragon's hoard and a single ancient coin" },
+    ],
+  },
   {
     name: "Treasure (Low)",
     dice: "1d6",
@@ -97,6 +219,16 @@ export function RandomTables() {
 
   const table = BUILTIN_TABLES[selected];
 
+  function exportTable() {
+    const blob = new Blob([JSON.stringify(table, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${table.name.toLowerCase().replace(/\s+/g, "-")}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   const roll = useCallback(() => {
     const rollVal = rollDice(table.dice);
     const entry = table.entries.find((e) => rollVal >= e.min && rollVal <= e.max);
@@ -123,13 +255,22 @@ export function RandomTables() {
         ))}
       </select>
 
-      {/* Roll button */}
+      {/* Roll + export */}
-      <button
+      <div className="flex gap-2">
-        onClick={roll}
+        <button
-        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"
+          onClick={roll}
-      >
+          className="flex-1 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"
-        🎲 Roll {table.dice}
+        >
-      </button>
+          🎲 Roll {table.dice}
+        </button>
+        <button
+          onClick={exportTable}
+          className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-3 py-2 text-sm hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer"
+          title="Export this table as JSON"
+        >
+          ⬇
+        </button>
+      </div>
 
       {/* Result */}
       {customRoll !== null && (
@@ -165,7 +306,16 @@ export function RandomTables() {
       {/* Roll history */}
       {log.length > 0 && (
         <div className="border-t border-[var(--color-border-subtle)] pt-2 max-h-24 overflow-y-auto">
-          <div className="text-[10px] font-medium text-[var(--color-text-dim)] mb-1">History</div>
+          <div className="flex items-center justify-between mb-1">
+            <div className="text-[10px] font-medium text-[var(--color-text-dim)]">History</div>
+            <button
+              onClick={() => setLog([])}
+              className="text-[10px] text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer"
+              title="Clear history"
+            >
+              clear
+            </button>
+          </div>
           {log.map((l, i) => (
             <div key={i} className="flex items-center gap-2 text-[10px] py-0.5">
               <span className="text-[var(--color-text-dim)]">{l.tableName}</span>

src/components/SessionLogger.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
+import { invoke, Channel } from "@tauri-apps/api/core";
 import { addToLore } from "../lib/lore";
 import { useToast } from "./Toast";
 import { addGeneration, type Generation } from "../lib/generations";
 import { usePrefillEffect } from "../lib/usePrefill";
+import { usePersistentState } from "../lib/usePersistentState";
 
 interface Props {
   prefill?: Generation | null;
@@ -12,10 +13,13 @@ interface Props {
 
 export function SessionLogger({ prefill, onPrefillConsumed }: Props = {}) {
   const [notes, setNotes] = useState("");
-  const [summary, setSummary] = useState("");
+  const [summary, setSummary] = usePersistentState<string>("session.summary", "");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  // ponytail: streaming state — tokens arrive via the Channel and append to
-  const [entries, setEntries] = useState<{ text: string; time: string }[]>([]);
+  // the summary live with a gold cursor. `gotFirstToken` flips the thinking
+  // dots to streaming text.
+  const [gotFirstToken, setGotFirstToken] = useState(false);
+  const [entries, setEntries] = usePersistentState<{ text: string; time: string }[]>("session.entries", []);
   const { addToast } = useToast();
 
   usePrefillEffect(prefill ?? null, "session", () => onPrefillConsumed?.(), (g) => {
@@ -32,31 +36,65 @@ export function SessionLogger({ prefill, onPrefillConsumed }: Props = {}) {
     setNotes("");
   }
 
+  // ponytail: export the session as a Markdown file the DM can share or
+  // paste into Discord. Reverses the entry list so it reads chronologically.
+  function exportMarkdown() {
+    if (entries.length === 0) return;
+    const lines = [...entries].reverse().map((e) => `- [${e.time}] ${e.text}`);
+    const md = `# Session ${new Date().toLocaleDateString()}\n\n## Notes\n\n${lines.join("\\n")}\n\n${summary ? `## AI Summary\n\n${summary}` : ""}`;
+    const blob = new Blob([md], { type: "text/markdown" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `session-${new Date().toISOString().slice(0, 10)}.md`;
+    a.click();
+    URL.revokeObjectURL(url);
+    addToast("Exported session to Markdown", "success");
+  }
+
+  function removeEntry(i: number) {
+    setEntries((prev) => prev.filter((_, j) => j !== i));
+  }
+
   async function summarize() {
     if (entries.length === 0) return;
     setLoading(true);
-    setError("");
+    setSummary("");
+    setGotFirstToken(false);
+    const sessionText = entries.map((e) => `[${e.time}] ${e.text}`).join("\n");
+    // ponytail: stream tokens via the existing generate_stream Channel so the
+    // DM sees the summary appear word-by-word instead of staring at a button.
+    const channel = new Channel<{ type: string; data: string }>();
+    let streamed = "";
+    channel.onmessage = (event) => {
+      if (event.type === "token") {
+        setGotFirstToken(true);
+        streamed = streamed + event.data;
+        setSummary(streamed);
+      } else if (event.type === "done") {
+        setGotFirstToken(true);
+        streamed = event.data;
+        setSummary(streamed);
+      } else if (event.type === "error") {
+        addToast(`Summary failed: ${event.data}`, "error");
+      }
+    };
     try {
-      const sessionText = entries
+      await invoke("generate_stream", {
-        .map((e) => `[${e.time}] ${e.text}`)
-        .join("\n");
-      const result = await invoke<string>("generate", {
         req: {
           prompt: `Summarize the following D&D session notes and suggest 2-3 hooks for the next session:\n\n${sessionText}`,
           system: "You are a helpful D&D session summarizer. Be concise and creative.",
           temperature: 0.7,
           max_tokens: 512,
         },
+        channel,
       });
-      setSummary(result);
       addToast("Session summary generated", "success");
-      // ponytail: persist so the DM can re-open past summaries. The data is
+      const result = streamed;
-      // raw text here, not JSON, so the extractTitle() fallback is fine.
       const title = `Session ${new Date().toLocaleDateString()}`;
       void addGeneration({ kind: "session", title, data: result, source: `${entries.length} notes` });
       void addToLore("Session Summary", `Session summary:\n${result}\n\nNotes:\n${sessionText}`);
     } catch (e) {
-      setError(String(e));
       addToast(`Summary failed: ${e}`, "error");
     }
     setLoading(false);
@@ -92,14 +130,29 @@ export function SessionLogger({ prefill, onPrefillConsumed }: Props = {}) {
           >
             {loading ? "Summarizing…" : "✨ AI Summary"}
           </button>
+          <button
+            onClick={exportMarkdown}
+            disabled={entries.length === 0}
+            className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-3 py-1.5 text-xs hover:text-[var(--color-gold-bright)] hover:border-[var(--color-gold-bright)] transition-colors cursor-pointer disabled:opacity-50"
+            title="Export notes + summary to a Markdown file"
+          >
+            ⬇ Export
+          </button>
         </div>
         <div className="flex-1 overflow-y-auto">
           {entries.map((e, i) => (
-            <div key={i} className="flex gap-2 py-1 border-b border-[var(--color-border-subtle)]">
+            <div key={i} className="flex gap-2 py-1 border-b border-[var(--color-border-subtle)] group">
               <span className="text-[var(--color-text-dim)] text-xs font-mono shrink-0">
                 {e.time}
               </span>
-              <span className="text-[var(--color-text-primary)] text-xs">{e.text}</span>
+              <span className="text-[var(--color-text-primary)] text-xs flex-1">{e.text}</span>
+              <button
+                onClick={() => removeEntry(i)}
+                className="text-[var(--color-text-dim)] hover:text-[var(--color-danger)] text-[10px] cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+                title="Delete entry"
+              >
+                ×
+              </button>
             </div>
           ))}
         </div>
@@ -108,13 +161,16 @@ export function SessionLogger({ prefill, onPrefillConsumed }: Props = {}) {
       {/* AI Summary column */}
       <div className="flex-1 flex flex-col">
         <h3 className="text-xs font-medium text-[var(--color-text-secondary)] mb-2">AI Summary</h3>
-        {error && (
-          <div className="rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/30 p-2 text-[var(--color-danger)] text-xs mb-2">
-            {error}
-          </div>
-        )}
         <div className="flex-1 rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-3 text-[var(--color-text-primary)] text-sm overflow-y-auto">
-          {summary || (
+          {loading && !gotFirstToken ? (
+            <span className="text-[var(--color-gold-bright)] tracking-widest">
+              <span className="thinking-dot">•</span>
+              <span className="thinking-dot">•</span>
+              <span className="thinking-dot">•</span>
+            </span>
+          ) : summary ? (
+            <span>{summary}{loading && <span className="text-[var(--color-gold-bright)]">▍</span>}</span>
+          ) : (
             <span className="text-[var(--color-text-dim)] italic">
               Add session notes and click "AI Summary" to generate a recap and next-session hooks.
             </span>

src/components/SettingsPanel.tsx

@@ -19,6 +19,8 @@ export function SettingsPanel() {
   const [saved, setSaved] = useState(false);
   const [showKey, setShowKey] = useState(false);
   const [error, setError] = useState("");
+  const [testing, setTesting] = useState(false);
+  const [conn, setConn] = useState<{ ok: boolean; models: string[]; error: string } | null>(null);
   const { addToast } = useToast();
 
   // ponytail: auto-load on mount so users don't see a gate before the form.
@@ -47,6 +49,59 @@ export function SettingsPanel() {
     setLoading(false);
   }
 
+  // ponytail: probe the configured endpoint for a model list. Ollama uses
+  // /api/tags, OpenAI-compatible uses /v1/models. The Rust side branches.
+  async function testConnection() {
+    if (!config) return;
+    setTesting(true);
+    setConn(null);
+    try {
+      // Save first so the backend uses the latest URL/key.
+      await invoke("set_llm_config", { config });
+      const result = await invoke<{ ok: boolean; models: string[]; error: string }>("test_connection");
+      setConn(result);
+      if (result.ok) addToast(`Connected — ${result.models.length} models`, "success");
+      else addToast(`Connection failed: ${result.error}`, "error");
+    } catch (e) {
+      setConn({ ok: false, models: [], error: String(e) });
+      addToast(`Connection failed: ${e}`, "error");
+    }
+    setTesting(false);
+  }
+
+  // ponytail: provider presets fill in the API URL pattern + default model.
+  const PRESETS: { label: string; url: string; model: string; key?: boolean }[] = [
+    { label: "Ollama", url: "http://localhost:11434", model: "llama3.2" },
+    { label: "LM Studio", url: "http://localhost:1234/v1", model: "local-model" },
+    { label: "OpenAI", url: "https://api.openai.com", model: "gpt-4o-mini", key: true },
+    { label: "Custom", url: "", model: "" },
+  ];
+  function applyPreset(p: { url: string; model: string }) {
+    if (!config) return;
+    setConfig({ ...config, api_url: p.url, model: p.model });
+    setConn(null);
+  }
+
+  // ponytail: reset to the backend's default config. The Rust Default impl
+  // is the single source of truth; we just set an empty config and let the
+  // backend re-default on save — but we can't send a partial, so mirror the
+  // known defaults here and toast.
+  const DEFAULTS: LlmConfig = {
+    api_url: "http://localhost:11434",
+    api_key: "",
+    model: "llama3.2",
+    temperature: 0.7,
+    max_tokens: 512,
+    top_p: 0.9,
+    image_model: "x/flux2-klein:4b",
+    embed_model: "nomic-embed-text",
+  };
+  function resetDefaults() {
+    setConfig({ ...DEFAULTS });
+    setConn(null);
+    addToast("Reset to defaults — click Save to apply", "info");
+  }
+
   if (!config) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
@@ -60,6 +115,28 @@ export function SettingsPanel() {
 
   return (
     <div className="flex flex-col gap-4 text-sm">
+      <h3 className="font-heading text-[var(--color-gold-bright)] text-xs font-semibold uppercase tracking-wider border-b border-[var(--color-border-subtle)] pb-1 mb-1">LLM Connection</h3>
+      {/* Provider presets */}
+      <div className="flex flex-col gap-1">
+        <label className="text-[var(--color-text-secondary)] text-xs font-medium">Provider</label>
+        <div className="flex flex-wrap gap-1.5">
+          {PRESETS.map((p) => (
+            <button
+              key={p.label}
+              type="button"
+              onClick={() => applyPreset(p)}
+              className={`rounded-lg px-2.5 py-1 text-xs border transition-colors cursor-pointer ${
+                config.api_url === p.url
+                  ? "bg-[var(--color-gold-glow)] border-[var(--color-gold-bright)] text-[var(--color-gold-bright)]"
+                  : "bg-[var(--color-bg-surface)] border-[var(--color-border-glass)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+              }`}
+            >
+              {p.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
       <div className="flex flex-col gap-1">
         <label className="text-[var(--color-text-secondary)] text-xs font-medium">
           API URL
@@ -104,9 +181,51 @@ export function SettingsPanel() {
           value={config.model}
           onChange={(e) => setConfig({ ...config, model: e.target.value })}
           placeholder="llama3.2"
+          list="model-list"
         />
+        <datalist id="model-list">
+          {conn?.models.map((m) => (
+            <option key={m} value={m} />
+          ))}
+        </datalist>
       </div>
 
+      {/* Connection test */}
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={testConnection}
+          disabled={testing}
+          className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] px-3 py-1.5 text-xs font-medium text-[var(--color-text-secondary)] hover:border-[var(--color-gold-bright)] hover:text-[var(--color-gold-bright)] transition-colors cursor-pointer disabled:opacity-50"
+        >
+          {testing ? "Testing…" : "Test connection"}
+        </button>
+        {conn && (
+          <span className={`text-xs ${conn.ok ? "text-[var(--color-success)]" : "text-[var(--color-danger)]"}`}>
+            {conn.ok ? `✓ ${conn.models.length} models` : `✕ ${conn.error}`}
+          </span>
+        )}
+      </div>
+      {conn?.ok && conn.models.length > 0 && (
+        <div className="flex flex-wrap gap-1 max-h-24 overflow-y-auto">
+          {conn.models.map((m) => (
+            <button
+              key={m}
+              type="button"
+              onClick={() => setConfig({ ...config, model: m })}
+              className={`rounded-full px-2 py-0.5 text-[10px] border cursor-pointer transition-colors ${
+                config.model === m
+                  ? "bg-[var(--color-gold-glow)] border-[var(--color-gold-bright)] text-[var(--color-gold-bright)]"
+                  : "bg-[var(--color-bg-deep)] border-[var(--color-border-subtle)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+              }`}
+            >
+              {m}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <h3 className="font-heading text-[var(--color-gold-bright)] text-xs font-semibold uppercase tracking-wider border-b border-[var(--color-border-subtle)] pb-1 mb-1">Image Model</h3>
       <div className="flex flex-col gap-1">
         <label className="text-[var(--color-text-secondary)] text-xs font-medium">
           Image model
@@ -119,6 +238,7 @@ export function SettingsPanel() {
         />
       </div>
 
+      <h3 className="font-heading text-[var(--color-gold-bright)] text-xs font-semibold uppercase tracking-wider border-b border-[var(--color-border-subtle)] pb-1 mb-1">Embedding Model (Lore RAG)</h3>
       <div className="flex flex-col gap-1">
         <label className="text-[var(--color-text-secondary)] text-xs font-medium">
           Embedding model (Lore RAG)
@@ -131,6 +251,7 @@ export function SettingsPanel() {
         />
       </div>
 
+      <h3 className="font-heading text-[var(--color-gold-bright)] text-xs font-semibold uppercase tracking-wider border-b border-[var(--color-border-subtle)] pb-1 mb-1">Text Model</h3>
       <div className="grid grid-cols-2 gap-3">
         <div className="flex flex-col gap-1">
           <label className="text-[var(--color-text-secondary)] text-xs font-medium">
@@ -166,13 +287,21 @@ export function SettingsPanel() {
         </div>
       </div>
 
-      <button
+      <div className="flex gap-2">
-        onClick={saveConfig}
+        <button
-        disabled={loading}
+          onClick={saveConfig}
-        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"
+          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"
-        {saved ? "✓ Saved" : loading ? "Saving…" : "Save Settings"}
+        >
-      </button>
+          {saved ? "✓ Saved" : loading ? "Saving…" : "Save Settings"}
+        </button>
+        <button
+          onClick={resetDefaults}
+          className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] text-[var(--color-text-dim)] px-4 py-2 text-sm hover:text-[var(--color-danger)] hover:border-[var(--color-danger)] transition-colors cursor-pointer"
+        >
+          Reset to defaults
+        </button>
+      </div>
     </div>
   );
 }

src/components/Soundboard.tsx

@@ -1,5 +1,7 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { useToast } from "./Toast";
+import { bus, Events, type PlayAmbientPayload } from "../lib/bus";
+import { usePersistentState } from "../lib/usePersistentState";
 
 // Ambient sound types with their oscillator configs
 const AMBIENT_SOUNDS = [
@@ -27,7 +29,8 @@ const SFX_SOUNDS = [
 
 export function Soundboard() {
   const [activeAmbients, setActiveAmbients] = useState<Set<string>>(new Set());
-  const [volume, setVolume] = useState(0.5);
+  const [volume, setVolume] = usePersistentState<number>("sound.volume", 0.5);
+  const [muted, setMuted] = usePersistentState<boolean>("sound.muted", false);
   const audioCtxRef = useRef<AudioContext | null>(null);
   const nodesRef = useRef<Map<string, { source: OscillatorNode | AudioBufferSourceNode; gain: GainNode; filter: BiquadFilterNode }>>(new Map());
   const { addToast } = useToast();
@@ -39,6 +42,45 @@ export function Soundboard() {
     return audioCtxRef.current;
   }, []);
 
+  // ponytail: pre-warm the AudioContext on the first user gesture so the
+  // first ambient doesn't silently fail to autoplay (browser policy).
+  useEffect(() => {
+    const warm = () => {
+      const ctx = getAudioCtx();
+      if (ctx.state === "suspended") void ctx.resume();
+      window.removeEventListener("pointerdown", warm);
+    };
+    window.addEventListener("pointerdown", warm);
+    return () => window.removeEventListener("pointerdown", warm);
+  }, [getAudioCtx]);
+
+  // ponytail: master mute — ramps every active ambient to 0 (or back to
+  // volume) on toggle, and gates SFX. Cheaper than threading a master gain
+  // node through every code path.
+  useEffect(() => {
+    const ctx = audioCtxRef.current;
+    if (!ctx) return;
+    nodesRef.current.forEach((nodes) => {
+      try {
+        nodes.gain.gain.linearRampToValueAtTime(muted ? 0 : volume, ctx.currentTime + 0.2);
+      } catch {}
+    });
+  }, [muted, volume]);
+
+  // ponytail: listen for EncounterBuilder's "send to soundboard" event and
+  // flip the matching ambient on. Mirrors the AddCombatants flow on Initiative.
+  useEffect(() => {
+    return bus.on<PlayAmbientPayload>(Events.PlayAmbient, (payload) => {
+      setActiveAmbients((prev) => {
+        if (prev.has(payload.id)) return prev; // already playing
+        const next = new Set(prev);
+        next.add(payload.id);
+        return next;
+      });
+      addToast(`Ambient on: ${payload.source}`, "info");
+    });
+  }, [addToast]);
+
   const toggleAmbient = useCallback((id: string) => {
     setActiveAmbients((prev) => {
       const next = new Set(prev);
@@ -104,6 +146,7 @@ export function Soundboard() {
   }, [volume, getAudioCtx]);
 
   const playSfx = useCallback((id: string) => {
+    if (muted) return; // ponytail: master mute gates one-shot SFX too.
     const ctx = getAudioCtx();
     const sfx = SFX_SOUNDS.find((s) => s.id === id);
     if (!sfx) return;
@@ -238,11 +281,11 @@ export function Soundboard() {
     }
 
     addToast(`${sfx.icon} ${sfx.label}`, "info");
-  }, [volume, getAudioCtx, addToast]);
+  }, [volume, getAudioCtx, addToast, muted]);
 
   return (
     <div className="flex flex-col gap-4">
-      {/* Volume */}
+      {/* Volume + master mute */}
       <div className="flex items-center gap-3">
         <span className="text-[var(--color-text-secondary)] text-xs font-medium w-16">Volume</span>
         <input
@@ -257,6 +300,18 @@ export function Soundboard() {
         <span className="text-[var(--color-text-dim)] text-xs font-mono w-8 text-right">
           {Math.round(volume * 100)}%
         </span>
+        <button
+          onClick={() => setMuted((m) => !m)}
+          className={`rounded-lg px-2 py-1 text-xs cursor-pointer border transition-colors ${
+            muted
+              ? "bg-[var(--color-danger)]/20 border-[var(--color-danger)]/50 text-[var(--color-danger)]"
+              : "border-[var(--color-border-subtle)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+          }`}
+          title={muted ? "Unmute" : "Mute all"}
+          aria-label={muted ? "Unmute" : "Mute all"}
+        >
+          {muted ? "🔇" : "🔊"}
+        </button>
       </div>
 
       {/* Ambient sounds */}
@@ -304,24 +359,23 @@ export function Soundboard() {
         </div>
       </div>
 
-      {/* Stop all */}
+      {/* Stop all — always visible so the DM never hunts for it. */}
-      {activeAmbients.size > 0 && (
+      <button
-        <button
+        onClick={() => {
-          onClick={() => {
+          nodesRef.current.forEach((nodes) => {
-            nodesRef.current.forEach((nodes) => {
+            try {
-              try {
+              nodes.gain.gain.linearRampToValueAtTime(0, audioCtxRef.current!.currentTime + 0.5);
-                nodes.gain.gain.linearRampToValueAtTime(0, audioCtxRef.current!.currentTime + 0.5);
+              setTimeout(() => { try { nodes.source.stop(); } catch {} }, 600);
-                setTimeout(() => { try { nodes.source.stop(); } catch {} }, 600);
+            } catch {}
-              } catch {}
+          });
-            });
+          nodesRef.current.clear();
-            nodesRef.current.clear();
+          setActiveAmbients(new Set());
-            setActiveAmbients(new Set());
+        }}
-          }}
+        disabled={activeAmbients.size === 0}
-          className="rounded-lg bg-[var(--color-danger)]/20 border border-[var(--color-danger)]/40 text-[var(--color-danger)] px-4 py-2 text-xs font-semibold hover:bg-[var(--color-danger)]/30 transition-colors cursor-pointer"
+        className="rounded-lg bg-[var(--color-danger)]/20 border border-[var(--color-danger)]/40 text-[var(--color-danger)] px-4 py-2 text-xs font-semibold hover:bg-[var(--color-danger)]/30 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-        >
+      >
-          ⏹ Stop All
+        ⏹ Stop All{activeAmbients.size > 0 ? ` (${activeAmbients.size})` : ""}
-        </button>
+      </button>
-      )}
     </div>
   );
 }

src/components/Toast.tsx

@@ -6,25 +6,32 @@ interface Toast {
   id: string;
   message: string;
   type: ToastType;
+  sticky?: boolean;
 }
 
 interface ToastStore {
   toasts: Toast[];
-  addToast: (message: string, type?: ToastType) => void;
+  addToast: (message: string, type?: ToastType, opts?: { sticky?: boolean }) => void;
   removeToast: (id: string) => void;
 }
 
-let nextId = 0;
-
 export const useToast = create<ToastStore>((set) => ({
   toasts: [],
-  addToast: (message, type = "info") => {
+  addToast: (message, type = "info", opts = {}) => {
-    const id = String(nextId++);
+    // ponytail: crypto.randomUUID for stable unique ids (the old module
-    set((state) => ({ toasts: [...state.toasts, { id, message, type }] }));
+    // counter was shared across imports and brittle in tests).
-    // Auto-dismiss after 4 seconds
+    const id = crypto.randomUUID();
-    setTimeout(() => {
+    set((state) => {
-      set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+      // ponytail: cap visible at 3 — older ones get pushed off so a noisy
-    }, 4000);
+      // session doesn't stack a wall of toasts over the content.
+      const next = [...state.toasts, { id, message, type, sticky: opts.sticky }];
+      return { toasts: next.slice(-3) };
+    });
+    if (!opts.sticky) {
+      setTimeout(() => {
+        set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));
+      }, 4000);
+    }
   },
   removeToast: (id) => {
     set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }));

src/components/WorldBuilder.tsx

@@ -5,6 +5,7 @@ import { addToLore } from "../lib/lore";
 import { useToast } from "./Toast";
 import { addGeneration, extractTitle, type Generation } from "../lib/generations";
 import { usePrefillEffect } from "../lib/usePrefill";
+import { usePersistentState } from "../lib/usePersistentState";
 
 interface WorldResponse {
   name: string;
@@ -21,12 +22,18 @@ interface Props {
 }
 
 export function WorldBuilder({ prefill, onPrefillConsumed }: Props = {}) {
-  const [theme, setTheme] = useState("high fantasy");
+  // ponytail: persist theme + last world so a reload keeps the DM's work.
-  const [world, setWorld] = useState<WorldResponse | null>(null);
+  const [theme, setTheme] = usePersistentState<string>("world.theme", "high fantasy");
+  const [world, setWorld] = usePersistentState<WorldResponse | null>("world.last", null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
   const { addToast } = useToast();
 
+  // ponytail: genre presets as a quick-pick row.
+  const THEME_PRESETS = [
+    "high fantasy", "dark fantasy", "sword & sorcery",
+    "steampunk", "post-apocalyptic", "horror", "sci-fantasy",
+  ];
+
   usePrefillEffect(prefill ?? null, "world", () => onPrefillConsumed?.(), (g) => {
     const parsed = parseLlmJson<WorldResponse>(g.data);
     if (parsed) {
@@ -37,7 +44,6 @@ export function WorldBuilder({ prefill, onPrefillConsumed }: Props = {}) {
 
   async function generate() {
     setLoading(true);
-    setError("");
     setWorld(null);
     try {
       const result = await invoke<string>("generate", {
@@ -75,11 +81,9 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
           `${parsed.name || "World"} (${theme}). ${parsed.description}\nRegions: ${regions}\nLandmarks: ${landmarks}\nConflicts: ${conflicts}\nCultures: ${cultures}`,
         );
       } else {
-        setError("Could not parse LLM response. Try again or check your LLM connection.");
         addToast("LLM returned an unparseable response", "error");
       }
     } catch (e) {
-      setError(String(e));
       addToast(`World generation failed: ${e}`, "error");
     }
     setLoading(false);
@@ -91,6 +95,22 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
         <label className="text-[var(--color-text-secondary)] text-xs font-medium">
           World Theme
         </label>
+        <div className="flex flex-wrap gap-1.5 mb-1">
+          {THEME_PRESETS.map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setTheme(t)}
+              className={`rounded-lg px-2.5 py-1 text-xs border transition-colors cursor-pointer ${
+                theme === t
+                  ? "bg-[var(--color-gold-glow)] border-[var(--color-gold-bright)] text-[var(--color-gold-bright)]"
+                  : "bg-[var(--color-bg-surface)] border-[var(--color-border-glass)] text-[var(--color-text-dim)] hover:text-[var(--color-text-secondary)]"
+              }`}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
         <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}
@@ -107,11 +127,6 @@ IMPORTANT: Return ONLY a raw JSON object. NO markdown fences, NO code blocks, NO
         </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">

src/index.css

@@ -1,7 +1,26 @@
-/* ponytail: Google Fonts CSS2 import — single request, all families/weights.
+/* ponytail: fonts self-hosted as variable woff2 (latin subset) in public/fonts/
-   TODO: download woff2 to public/fonts/ and switch to @font-face for true
+   for true offline-first — a desktop app must not depend on Google's CDN. */
-   offline-first. Until then, this needs network on first run. */
+@font-face {
-@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap");
+  font-family: "Cinzel";
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url("/fonts/cinzel.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url("/fonts/inter.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url("/fonts/jetbrainsmono.woff2") format("woff2");
+}
 
 @import "tailwindcss";
 
@@ -39,11 +58,6 @@
   --font-mono: "JetBrains Mono", ui-monospace, monospace;
 }
 
-/* ─── Self-Hosted Fonts ─────────────────────────────────────── */
-/* ponytail: Google Fonts are loaded at the top of this file (must precede
-   Tailwind per CSS spec). TODO: download woff2 to public/fonts/ and switch
-   to @font-face for true offline-first. */
-
 /* ─── Base Styles ───────────────────────────────────────────── */
 
 * {
@@ -186,6 +200,33 @@ body,
   to { opacity: 1; }
 }
 
+/* ponytail: shimmer skeleton for image/art loading, and a thinking-dot
+   cycle for LLM waits. Replaces "Generating…" button text for 5–20s waits. */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-surface) 25%,
+    var(--color-bg-card-hover) 50%,
+    var(--color-bg-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes thinking {
+  0%, 80%, 100% { opacity: 0.2; }
+  40% { opacity: 1; }
+}
+.thinking-dot {
+  animation: thinking 1.2s ease-in-out infinite;
+}
+.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
+
 /* ponytail: respect users who ask for less motion. framer-motion honors this
    via its useReducedMotion hook, but the inline keyframes/glass-card transitions
    still need this CSS guard. */

src/lib/bus.ts

@@ -43,6 +43,7 @@ export const bus = new EventBus();
 
 export const Events = {
   AddCombatants: "add-combatants",
+  PlayAmbient: "play-ambient",
 } as const;
 
 export type AddCombatantsPayload = {
@@ -50,3 +51,9 @@ export type AddCombatantsPayload = {
   /** Source label, e.g. "Goblin Ambush (Easy)" — shown in the toast. */
   source: string;
 };
+
+export type PlayAmbientPayload = {
+  /** Ambient sound id from the Soundboard (rain, wind, fire, …). */
+  id: string;
+  source: string;
+};

src/lib/usePersistentState.ts

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useState } from "react";
+import { LazyStore } from "@tauri-apps/plugin-store";
+
+// ponytail: one store file for small UI state. Generated content (NPCs,
+// encounters, etc.) goes through the generations backend instead; this is
+// only for things that live in component state today (initiative, dice
+// history, calendar events). Debounced save so a fast dice session doesn't
+// write on every roll.
+const store = new LazyStore("dm-pal-state.json");
+
+function debounce<T extends (...args: never[]) => void>(fn: T, ms: number): T {
+  let t: ReturnType<typeof setTimeout> | undefined;
+  return ((...args: never[]) => {
+    if (t) clearTimeout(t);
+    t = setTimeout(() => fn(...args), ms);
+  }) as T;
+}
+
+const save = debounce((key: string, value: unknown) => {
+  void store.set(key, value);
+  void store.save();
+}, 400);
+
+/**
+ * useState that persists to tauri-plugin-store. Loads on mount (returns the
+ * fallback until the async load completes), saves on every change (debounced).
+ * Reload = no more data loss for initiative / dice / calendar.
+ */
+export function usePersistentState<T>(
+  key: string,
+  fallback: T,
+): [T, React.Dispatch<React.SetStateAction<T>>, boolean] {
+  const [value, setValue] = useState<T>(fallback);
+  const [loaded, setLoaded] = useState(false);
+  const skipSave = useRef(true);
+
+  // Load once on mount.
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const stored = await store.get<T>(key);
+        if (alive && stored !== null && stored !== undefined) {
+          setValue(stored);
+        }
+      } catch {
+        // store unavailable — keep fallback.
+      }
+      if (alive) setLoaded(true);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [key]);
+
+  // Save on change (skip the initial load-induced render).
+  useEffect(() => {
+    if (skipSave.current) {
+      skipSave.current = false;
+      return;
+    }
+    save(key, value);
+  }, [key, value]);
+
+  return [value, setValue, loaded];
+}