Second pass

README.md

@@ -1,8 +1,8 @@
 ---
 title: FrogQuest
-emoji: ⚡
-colorFrom: purple
-colorTo: indigo
+emoji: 🐸
+colorFrom: green
+colorTo: yellow
 sdk: gradio
 sdk_version: 6.17.3
 python_version: '3.12'

app.py

@@ -1,14 +1,19 @@
-"""FrogQuest — plain Gradio (gr.Blocks) app.
+"""FrogQuest — plain Gradio (gr.Blocks) app, single-page master-detail layout.
 
-Standard HF Spaces pattern: a module-level `demo` Blocks + `demo.launch()`. The LLM/image
-modules are imported DEFENSIVELY so a bleeding-edge import error (e.g. a diffusers build
-missing Flux2KleinPipeline) surfaces in the UI instead of hanging the Space on a loading
-screen. A module-level @spaces.GPU `_warmup` guarantees ZeroGPU's startup detection even if
-those imports fail.
+Layout (one page, no onboarding gate):
+  LEFT   — hero photo (click to upload/change), hero stats, world picker + reset
+  CENTER — the selected quest's scene image, its description, and Done / Couldn't actions
+  RIGHT  — the quest log: a selectable list of quests (selected one highlighted orange)
+  BOTTOM — the "Frog Master" chat: one box that forges quests, adds tasks, and marks quests
+           done / couldn't (the LLM classifies each message into an intent — see llm.route_intent)
 
 State lives in gr.BrowserState (per-browser localStorage): the resized photo (base64), the
-chosen theme, and the validated adventure/quests JSON. The photo goes to the GPU only
-transiently during generation and is never persisted server-side.
+chosen world/theme, the validated adventure/quests JSON, the selected quest id, and a cache of
+generated scene images (JPEG data-urls). The photo goes to the GPU only transiently during
+generation and is never persisted server-side.
+
+Images generate LAZILY: selecting a quest with no cached scene generates it on the spot; Done /
+Couldn't EDIT the cached initial scene into a success / failure state (never regenerate).
 """
 from __future__ import annotations
 
@@ -26,7 +31,7 @@ import gradio as gr
 import spaces
 from PIL import Image
 
-from schema import validate_and_clamp
+from schema import THEMES, merge_quests, validate_and_clamp
 
 
 # ZeroGPU scans for a @spaces.GPU function at startup; this guarantees detection regardless
@@ -39,15 +44,16 @@ def _warmup():
 # Defensive import: never let a model-import error hang the whole app.
 MODEL_IMPORT_ERROR = None
 try:
-    from llm import generate_quests_raw
-    from images import initial_image
+    from llm import generate_quests_raw, route_intent
+    from images import edit_image, initial_image, pil_to_data_url
 except Exception:
     MODEL_IMPORT_ERROR = traceback.format_exc()
 
 
-# ----------------------------- photo helpers (PIL only) -----------------------------
+# ----------------------------- photo / image helpers (PIL only) -----------------------------
 
 PHOTO_MAX_SIDE = 512
+IMAGES_CAP_BYTES = 3_500_000  # soft cap on the cached-scene blob to stay under localStorage ~5MB
 
 
 def _resize_dataurl(pil: Image.Image, max_side: int = PHOTO_MAX_SIDE) -> str:
@@ -71,92 +77,327 @@ def _import_error_message() -> str:
     return "Model failed to load: " + (last[-1] if last else "unknown error")
 
 
-# ----------------------------- quest-card HTML -----------------------------
+def _trim_images(images: dict, keep_id) -> dict:
+    """Bound the cached-scene blob so a BrowserState write stays under localStorage's ~5MB cap.
+    Drops oldest non-selected `initial` variants first (keeping success/failure = completed
+    progress), then whole entries if still over. Mutates and returns `images`."""
+    def total() -> int:
+        return sum(len(v) for c in images.values() for v in c.values())
 
-def _card_body(q: dict) -> str:
-    badges = []
-    if q.get("is_frog"):
-        badges.append('<span class="badge frog-badge">🐸 THE FROG</span>')
-    if q.get("type") == "bonus":
-        badges.append('<span class="badge bonus-badge">✦ BONUS · OPTIONAL</span>')
-    if q.get("goal_group"):
-        badges.append(f'<span class="badge group-badge">⛓ {html.escape(str(q["goal_group"]))}</span>')
-    return (
-        '<div class="quest-body">'
-        f'<div class="quest-badges">{"".join(badges)}</div>'
-        f'<h3 class="quest-title">{html.escape(q.get("quest_title", ""))}</h3>'
-        f'<p class="quest-narrative">{html.escape(q.get("narrative", ""))}</p>'
-        f'<p class="quest-task">{html.escape(q.get("task", ""))}</p>'
-        f'<div class="quest-foot"><span class="xp">{int(q.get("xp", 0))} XP</span></div>'
-        '</div>'
-    )
+    if total() <= IMAGES_CAP_BYTES:
+        return images
+    for qid in list(images.keys()):
+        if total() <= IMAGES_CAP_BYTES:
+            break
+        if qid == keep_id:
+            continue
+        c = images[qid]
+        if "initial" in c and ("success" in c or "failure" in c):
+            del c["initial"]
+    for qid in list(images.keys()):
+        if total() <= IMAGES_CAP_BYTES:
+            break
+        if qid != keep_id:
+            del images[qid]
+    return images
 
 
-def _title_html(adventure: dict | None) -> str:
-    if not adventure:
-        return ""
-    return f'<div class="adventure-header"><h2>{html.escape(adventure.get("title", ""))}</h2></div>'
+# ----------------------------- state plumbing -----------------------------
 
+def _default_state() -> dict:
+    return {"photo": None, "theme": "fantasy", "adventure": None,
+            "quests": [], "selected_id": None, "images": {}}
 
-# ----------------------------- event handlers -----------------------------
 
-def boot(state):
-    state = state or {}
-    profile = state.get("profile") or {}
-    has_profile = bool(profile.get("photo") and profile.get("theme"))
-    return (
-        gr.update(visible=not has_profile),       # onboard_col
-        gr.update(visible=has_profile),           # app_col
-        profile.get("photo"),                     # photo_state
-        profile.get("theme") or "",               # theme_box
-        state.get("quests") or [],                # quests_state
-        state.get("adventure"),                   # adventure_state
-        _title_html(state.get("adventure")),      # adventure_title
-    )
+def _merge(browser: dict | None, **changes) -> dict:
+    """Return the browser dict with `changes` applied (other keys preserved for persistence)."""
+    b = dict(browser or _default_state())
+    b.update(changes)
+    return b
 
 
-def begin(photo_pil, theme, state):
-    if photo_pil is None:
-        raise gr.Error("Upload a photo first.")
-    if not theme:
-        raise gr.Error("Pick a theme first.")
-    photo_b64 = _resize_dataurl(photo_pil)
-    state = dict(state or {})
-    state["profile"] = {"photo": photo_b64, "theme": theme}
-    return state, photo_b64, gr.update(visible=False), gr.update(visible=True)
+def _find(quests: list, qid) -> dict | None:
+    return next((q for q in (quests or []) if q.get("id") == qid), None)
 
 
-def go_settings(photo_b64):
-    preview = _dataurl_to_pil(photo_b64) if photo_b64 else None
-    return gr.update(visible=True), gr.update(visible=False), preview
+def _art_style(theme: str) -> str:
+    return f"8-bit / 16-bit retro pixel art, {theme} palette, NES RPG style"
 
 
-def forge(todos, theme, photo_b64, state):
-    if MODEL_IMPORT_ERROR:
-        raise gr.Error(_import_error_message())
-    if not (todos or "").strip():
-        raise gr.Error("Tell the oracle your plans first.")
-    theme = theme or (state or {}).get("profile", {}).get("theme") or "cyberpunk"
-    raw = generate_quests_raw(todos, theme)
-    adventure = validate_and_clamp(raw, theme)
-    state = dict(state or {})
-    state["adventure"] = adventure["adventure"]
-    state["quests"] = adventure["quests"]
-    return adventure["quests"], adventure["adventure"], state, _title_html(adventure["adventure"])
-
-
-def _make_scene_handler(quest_id: str, scene_prompt: str):
-    def _gen(photo_b64, adventure):
+# ----------------------------- HTML builders -----------------------------
+
+def _esc(s) -> str:
+    return html.escape(str(s or ""))
+
+
+def _badges_html(q: dict) -> str:
+    badges = []
+    if q.get("is_frog"):
+        badges.append('<span class="badge frog-badge">🐸 THE FROG</span>')
+    if q.get("type") == "bonus":
+        badges.append('<span class="badge bonus-badge">✦ BONUS · OPTIONAL</span>')
+    if q.get("goal_group"):
+        badges.append(f'<span class="badge group-badge">⛓ {_esc(q["goal_group"])}</span>')
+    return f'<div class="quest-badges">{"".join(badges)}</div>' if badges else ""
+
+
+def _desc_html(quest: dict | None, adventure: dict | None, hint: str | None = None) -> str:
+    adv = ""
+    if adventure and adventure.get("title"):
+        adv = f'<div class="adventure-header"><h2>{_esc(adventure["title"])}</h2></div>'
+    if not quest:
+        body = ('<div class="fq-empty">No quest selected yet.<br>'
+                'Tell the Frog Master your plans below to forge your quest log.</div>')
+        return f'<div class="fq-desc">{adv}{body}</div>'
+
+    status = quest.get("status", "active")
+    state_cls = {"success": " state-success", "failure": " state-failure"}.get(status, "")
+    parts = [
+        adv,
+        _badges_html(quest),
+        f'<h3 class="quest-title">{_esc(quest.get("quest_title"))}</h3>',
+        f'<p class="quest-narrative">{_esc(quest.get("narrative"))}</p>',
+        f'<p class="quest-task">{_esc(quest.get("task"))}</p>',
+        f'<div class="quest-foot"><span class="xp">{int(quest.get("xp", 0))} XP</span></div>',
+    ]
+    if status in ("success", "failure") and quest.get("result_msg"):
+        parts.append(f'<p class="result-msg">{_esc(quest["result_msg"])}</p>')
+    elif hint:
+        parts.append(f'<p class="result-msg">{_esc(hint)}</p>')
+    return f'<div class="fq-desc{state_cls}">{"".join(parts)}</div>'
+
+
+def _stats_html(quests: list) -> str:
+    quests = quests or []
+    total = len(quests)
+    done = sum(1 for q in quests if q.get("status") == "success")
+    failed = sum(1 for q in quests if q.get("status") == "failure")
+    xp = sum(int(q.get("xp", 0)) for q in quests if q.get("status") == "success")
+    return (
+        '<div class="fq-stats"><h4>HERO STATS</h4>'
+        f'<div class="stat-row"><span>QUESTS</span><b>{done}/{total}</b></div>'
+        f'<div class="stat-row"><span>XP EARNED</span><b>{xp}</b></div>'
+        f'<div class="stat-row"><span>RETREATS</span><b>{failed}</b></div>'
+        '</div>'
+    )
+
+
+# ----------------------------- core actions (reused by clicks + chat) -----------------------------
+
+def select_quest(qid, photo, adventure, images, quests, browser):
+    """Select a quest: show its cached scene, or lazily generate the initial scene on first view.
+    Returns (selected_id, scene_pil_or_None, desc_html, images, browser)."""
+    images = dict(images or {})
+    quest = _find(quests, qid)
+    if quest is None:
+        return qid, None, _desc_html(None, adventure), images, _merge(browser, selected_id=qid)
+
+    cache = dict(images.get(qid) or {})
+    want = quest.get("image_state", "initial")
+    data = cache.get(want) or cache.get("initial")
+    scene = None
+    hint = None
+    if data is not None:
+        scene = _dataurl_to_pil(data)
+    else:
         if MODEL_IMPORT_ERROR:
             raise gr.Error(_import_error_message())
-        if not photo_b64:
-            raise gr.Error("Add a photo in Settings first.")
         if not adventure:
-            raise gr.Error("Forge a quest log first.")
-        pil = _dataurl_to_pil(photo_b64)
-        return initial_image(pil, adventure["art_style"], scene_prompt, int(adventure["seed"]))
-
-    return _gen
+            raise gr.Error("Forge a quest log first — tell the Frog Master your plans.")
+        if not photo:
+            hint = "Upload your photo (left) to draw this scene."
+        else:
+            pil = initial_image(_dataurl_to_pil(photo), adventure["art_style"],
+                                quest.get("initial_image_prompt", ""), int(adventure["seed"]))
+            cache["initial"] = pil_to_data_url(pil)
+            images[qid] = cache
+            images = _trim_images(images, qid)
+            scene = pil
+    return qid, scene, _desc_html(quest, adventure, hint), images, _merge(browser, selected_id=qid, images=images)
+
+
+def _apply_result(qid, quests, adventure, photo, images, browser, kind, reason):
+    """Mark a quest success/failure: EDIT its initial scene into the after-state and update text.
+    Returns (quests, images, scene_pil, desc_html, stats_html, browser)."""
+    if MODEL_IMPORT_ERROR:
+        raise gr.Error(_import_error_message())
+    quests = [dict(q) for q in (quests or [])]
+    quest = _find(quests, qid)
+    if quest is None:
+        raise gr.Error("Select a quest first.")
+    if not adventure:
+        raise gr.Error("Forge a quest log first.")
+
+    images = dict(images or {})
+    cache = dict(images.get(qid) or {})
+    if "initial" in cache:
+        init_pil = _dataurl_to_pil(cache["initial"])
+    else:
+        if not photo:
+            raise gr.Error("Upload your photo (left) and view the scene first.")
+        init_pil = initial_image(_dataurl_to_pil(photo), adventure["art_style"],
+                                 quest.get("initial_image_prompt", ""), int(adventure["seed"]))
+        cache["initial"] = pil_to_data_url(init_pil)
+
+    instruction = reason or (quest["success_edit"] if kind == "success" else quest["failure_edit"])
+    edited = edit_image(init_pil, instruction, adventure["art_style"], int(adventure["seed"]))
+    cache[kind] = pil_to_data_url(edited)
+    images[qid] = cache
+    images = _trim_images(images, qid)
+
+    quest["status"] = kind
+    quest["image_state"] = kind
+    if kind == "success":
+        quest["result_msg"] = f"⚔ VICTORY! +{quest['xp']} XP — {quest['quest_title']} conquered."
+    else:
+        msg = "🌙 Retreat for now — you'll face it another day. No shame in resting."
+        if reason:
+            msg = f"{reason.strip()}  ·  {msg}"
+        quest["result_msg"] = msg
+
+    desc = _desc_html(quest, adventure)
+    return quests, images, edited, desc, _stats_html(quests), _merge(browser, quests=quests, images=images)
+
+
+def apply_done(qid, quests, adventure, photo, images, browser):
+    if qid is None:
+        raise gr.Error("Select a quest first.")
+    return _apply_result(qid, quests, adventure, photo, images, browser, "success", None)
+
+
+def apply_couldnt(qid, quests, adventure, photo, images, browser):
+    if qid is None:
+        raise gr.Error("Select a quest first.")
+    return _apply_result(qid, quests, adventure, photo, images, browser, "failure", None)
+
+
+# ----------------------------- chat (Frog Master, full intent routing) -----------------------------
+
+def _chat_context(quests: list, selected_id) -> str:
+    if not quests:
+        return "No quest log exists yet."
+    lines = []
+    for i, q in enumerate(quests):
+        sel = " | SELECTED" if q.get("id") == selected_id else ""
+        lines.append(f"{i + 1}. id={q.get('id')} | title={q.get('quest_title')} | "
+                     f"task={q.get('task')} | status={q.get('status')}{sel}")
+    return "A quest log already exists:\n" + "\n".join(lines)
+
+
+def _resolve_target(quests: list, target: str, selected_id):
+    t = (target or "").strip().lower()
+    if t:
+        for q in quests:
+            if t in (str(q.get("id", "")).lower(), q.get("quest_title", "").lower(),
+                     q.get("task", "").lower()):
+                return q["id"]
+        for q in quests:  # substring fallback
+            if t in q.get("quest_title", "").lower() or t in q.get("task", "").lower():
+                return q["id"]
+    return selected_id
+
+
+def _do_forge(message, theme, photo, browser):
+    raw = generate_quests_raw(message, theme)
+    adv = validate_and_clamp(raw, theme)
+    quests, adventure = adv["quests"], adv["adventure"]
+    frog_id = quests[0]["id"]
+    _sel, scene, desc, images, _b = select_quest(frog_id, photo, adventure, {}, quests, browser)
+    browser2 = _merge(browser, theme=theme, adventure=adventure, quests=quests,
+                      selected_id=frog_id, images=images)
+    return quests, adventure, frog_id, images, scene, desc, _stats_html(quests), browser2
+
+
+# chat_send outputs (order): chat_input, quests_state, adventure_state, selected_id_state,
+#                            images_state, scene_image, desc_html, stats_html, browser
+def chat_send(message, quests, adventure, theme, photo, selected_id, images, browser):
+    message = (message or "").strip()
+    nochange = (gr.update(),) * 8  # everything except the cleared input
+    if not message:
+        return ("",) + nochange
+    if MODEL_IMPORT_ERROR:
+        raise gr.Error(_import_error_message())
+    theme = theme if theme in THEMES else "fantasy"
+
+    intent = route_intent(message, _chat_context(quests, selected_id))
+    kind = intent.get("intent", "unknown")
+
+    if kind == "forge" or (kind == "add_tasks" and not quests):
+        q, a, fid, im, sc, de, st, b2 = _do_forge(message, theme, photo, browser)
+        return ("", q, a, fid, im, sc, de, st, b2)
+
+    if kind == "add_tasks":
+        raw = generate_quests_raw(message, theme)
+        quests2 = merge_quests(quests, raw, theme)
+        gr.Info(f"Added {len(quests2) - len(quests)} quest(s) to your log.")
+        return ("", quests2, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+                _stats_html(quests2), _merge(browser, quests=quests2))
+
+    if kind in ("mark_done", "mark_couldnt"):
+        qid = _resolve_target(quests, intent.get("target_task", ""), selected_id)
+        if qid is None:
+            gr.Info("Which quest? Select it on the right, or name it.")
+            return ("",) + nochange
+        result_kind = "success" if kind == "mark_done" else "failure"
+        reason = intent.get("reason") or (message if kind == "mark_couldnt" else None)
+        q2, im2, sc, de, st, b2 = _apply_result(qid, quests, adventure, photo, images, browser,
+                                                 result_kind, reason)
+        return ("", q2, gr.update(), qid, im2, sc, de, st, b2)
+
+    gr.Info("Frog Master: tell me your plans to forge quests, what you finished, or what you couldn't do.")
+    return ("",) + nochange
+
+
+# ----------------------------- other handlers -----------------------------
+
+def upload_photo(pil, browser):
+    if pil is None:
+        return gr.update(), gr.update()
+    b64 = _resize_dataurl(pil)
+    return b64, _merge(browser, photo=b64)
+
+
+def change_theme(theme, adventure, images, browser):
+    """The world picker drives image generation. Changing it with an adventure present re-themes
+    art_style and clears the cached scenes so they regenerate in the new world on next select."""
+    theme = theme if theme in THEMES else "fantasy"
+    if adventure and adventure.get("theme") != theme:
+        adventure = dict(adventure)
+        adventure["theme"] = theme
+        adventure["art_style"] = _art_style(theme)
+        desc = (f'<div class="fq-desc"><p class="fq-empty">World changed to {theme.upper()}. '
+                'Reselect a quest to redraw its scene in the new style.</p></div>')
+        return adventure, {}, None, desc, _merge(browser, theme=theme, adventure=adventure, images={})
+    return gr.update(), gr.update(), gr.update(), gr.update(), _merge(browser, theme=theme)
+
+
+def reset_all():
+    d = _default_state()
+    return (d, None, None, [], None, None, {}, None,
+            _desc_html(None, None), _stats_html([]), "fantasy")
+
+
+def boot(browser):
+    """Restore everything from BrowserState on page load. Shows cached scenes only (never
+    generates) so reloads are instant; uncached scenes regenerate when the quest is clicked."""
+    b = browser or _default_state()
+    photo = b.get("photo")
+    quests = b.get("quests") or []
+    adventure = b.get("adventure")
+    images = b.get("images") or {}
+    theme = b.get("theme") or "fantasy"
+
+    quest = _find(quests, b.get("selected_id")) or (quests[0] if quests else None)
+    selected = quest["id"] if quest else None
+    scene = None
+    if quest:
+        cache = images.get(quest["id"]) or {}
+        data = cache.get(quest.get("image_state", "initial")) or cache.get("initial")
+        if data:
+            scene = _dataurl_to_pil(data)
+    photo_pil = _dataurl_to_pil(photo) if photo else None
+    return (photo_pil, photo, quests, adventure, selected, images,
+            scene, _desc_html(quest, adventure), _stats_html(quests), theme)
 
 
 # ----------------------------- UI -----------------------------
@@ -165,111 +406,132 @@ _DIR = os.path.dirname(os.path.abspath(__file__))
 with open(os.path.join(_DIR, "theme.css"), "r", encoding="utf-8") as _f:
     THEME_CSS = _f.read()
 
-HEAD = """
-<script>
-function fqSetTheme(t){
-  if(!t){ return; }
-  document.documentElement.setAttribute('data-theme', t);
-  ['cyberpunk','fantasy','space'].forEach(function(n){
-    var el = document.getElementById('theme-' + n);
-    if(el){ el.classList.toggle('selected', n === t); }
-  });
-}
-</script>
-"""
-
-with gr.Blocks(
-    css=THEME_CSS,
-    head=HEAD,
-    title="FrogQuest",
-    theme=gr.themes.Base(font=[gr.themes.GoogleFont("Press Start 2P"), "monospace"]),
-) as demo:
-    browser = gr.BrowserState(
-        {"profile": {"photo": None, "theme": None}, "adventure": None, "quests": []},
-        storage_key="frogquest",
-    )
-    photo_state = gr.State(None)        # resized photo as base64 data URL
-    quests_state = gr.State([])         # drives the quest-log render
-    adventure_state = gr.State(None)    # title / art_style / seed
-    theme_box = gr.Textbox(visible=False)  # canonical theme; .change applies the palette
+with gr.Blocks(title="FrogQuest") as demo:
+    browser = gr.BrowserState(_default_state(), storage_key="frogquest")
+    photo_state = gr.State(None)          # resized photo as base64 data URL
+    quests_state = gr.State([])           # drives the quest-log render
+    adventure_state = gr.State(None)      # title / art_style / seed / theme
+    selected_id_state = gr.State(None)    # currently selected quest id
+    images_state = gr.State({})           # {quest_id: {initial/success/failure: jpeg data-url}}
 
     gr.HTML('<div class="fq-topbar"><h1 class="fq-logo">FROG<b>QUEST</b></h1></div>')
 
-    # ---------- onboarding ----------
-    with gr.Column(visible=True) as onboard_col:
-        with gr.Group(elem_classes=["panel"]):
-            gr.HTML(
-                '<h2 class="panel-title">NEW HERO</h2>'
-                '<p class="hint">Upload a photo so you become the hero of every quest. '
-                'It stays in your browser — sent to the GPU only to draw your scenes, never stored '
-                'on a server.</p>'
-            )
+    with gr.Row(elem_classes=["fq-app-grid"]):
+        # ---------- LEFT: hero ----------
+        with gr.Column(elem_classes=["fq-left"]):
+            gr.HTML('<h2 class="panel-title">HERO</h2>')
             photo_image = gr.Image(
-                type="pil", sources=["upload"], show_label=False, height=240,
-                elem_classes=["uploader"],
+                type="pil", sources=["upload"], show_label=False, height=190,
+                elem_classes=["fq-photo"],
+            )
+            gr.HTML('<p class="hint">Click to upload / change your photo. It stays in your '
+                    'browser — sent to the GPU only to draw your scenes, never stored.</p>')
+            stats_html = gr.HTML(_stats_html([]))
+            gr.HTML('<h3 class="panel-subtitle">WORLD</h3>')
+            theme_radio = gr.Radio(
+                choices=list(THEMES), value="fantasy", show_label=False,
+                elem_classes=["fq-theme"],
             )
-            gr.HTML('<h3 class="panel-subtitle">CHOOSE YOUR WORLD</h3>')
-            with gr.Row():
-                cyber_btn = gr.Button("🌃\nCYBERPUNK", elem_id="theme-cyberpunk", elem_classes=["theme-card"])
-                fantasy_btn = gr.Button("🏰\nFANTASY", elem_id="theme-fantasy", elem_classes=["theme-card"])
-                space_btn = gr.Button("🚀\nSPACE", elem_id="theme-space", elem_classes=["theme-card"])
-            begin_btn = gr.Button("BEGIN ADVENTURE ▶", elem_classes=["pix-btn", "primary"])
-
-    # ---------- main app ----------
-    with gr.Column(visible=False) as app_col:
-        settings_btn = gr.Button("⚙ SETTINGS", elem_classes=["pix-btn", "small"])
-        with gr.Group(elem_classes=["panel"]):
-            gr.HTML('<h2 class="panel-title">TELL THE ORACLE YOUR PLANS</h2>')
-            todos_box = gr.Textbox(
-                lines=5, show_label=False, elem_classes=["compose"],
-                placeholder=("e.g. Finish the quarterly report (due Friday), reply to 3 emails, "
-                             "book dentist, start gym routine, learn one chord on guitar..."),
+            reset_btn = gr.Button("⟲ RESET", elem_classes=["pix-btn", "small"])
+
+        # ---------- CENTER: selected scene + actions ----------
+        with gr.Column(elem_classes=["fq-center"]):
+            scene_image = gr.Image(
+                show_label=False, interactive=False, container=False, height=380,
+                elem_classes=["fq-scene"],
             )
-            forge_btn = gr.Button("⚔ FORGE QUEST LOG", elem_classes=["pix-btn", "primary"])
-        adventure_title = gr.HTML("")
-
-        @gr.render(inputs=[quests_state])
-        def render_quests(quests):
-            for q in quests or []:
-                classes = ["quest-card"]
-                if q.get("is_frog"):
-                    classes.append("is-frog")
-                if q.get("type") == "bonus":
-                    classes.append("is-bonus")
-                with gr.Group(elem_classes=classes):
-                    with gr.Row():
-                        with gr.Column(scale=2, min_width=160):
-                            scene_img = gr.Image(
-                                show_label=False, interactive=False, height=200,
-                                container=False, elem_classes=["quest-art"],
-                            )
-                            gen_btn = gr.Button("GENERATE SCENE", elem_classes=["pix-btn", "small"])
-                        with gr.Column(scale=3):
-                            gr.HTML(_card_body(q))
-                    gen_btn.click(
-                        _make_scene_handler(q.get("id", ""), q.get("initial_image_prompt", "")),
-                        inputs=[photo_state, adventure_state],
-                        outputs=[scene_img],
-                    )
+            with gr.Row(elem_classes=["fq-detail"]):
+                with gr.Column(scale=3):
+                    desc_html = gr.HTML(_desc_html(None, None))
+                with gr.Column(scale=1, min_width=136, elem_classes=["fq-actions"]):
+                    done_btn = gr.Button("✓ DONE", elem_classes=["pix-btn", "btn-done"])
+                    couldnt_btn = gr.Button("✗ COULDN'T", elem_classes=["pix-btn", "btn-couldnt"])
+
+        # ---------- RIGHT: quest log ----------
+        with gr.Column(elem_classes=["fq-right"]):
+            gr.HTML('<h2 class="panel-title">QUEST LOG</h2>')
+
+            @gr.render(inputs=[quests_state, selected_id_state])
+            def render_tasklist(quests, selected):
+                if not quests:
+                    gr.HTML('<p class="hint">No quests yet.<br>Forge them with the Frog '
+                            'Master chat below.</p>')
+                    return
+                with gr.Column(elem_classes=["fq-tasklist"]):
+                    for q in quests:
+                        classes = ["fq-task-item"]
+                        if q.get("id") == selected:
+                            classes.append("selected")
+                        if q.get("is_frog"):
+                            classes.append("is-frog")
+                        if q.get("status") == "success":
+                            classes.append("done")
+                        elif q.get("status") == "failure":
+                            classes.append("failed")
+                        if q.get("status") == "success":
+                            mark = "✓"
+                        elif q.get("status") == "failure":
+                            mark = "✗"
+                        elif q.get("is_frog"):
+                            mark = "🐸"
+                        elif q.get("type") == "bonus":
+                            mark = "✦"
+                        else:
+                            mark = "•"
+                        btn = gr.Button(f"{mark} {q.get('quest_title', '')}", elem_classes=classes)
+                        btn.click(
+                            (lambda qid: (lambda photo, adv, imgs, qs, br:
+                                          select_quest(qid, photo, adv, imgs, qs, br)))(q["id"]),
+                            inputs=[photo_state, adventure_state, images_state, quests_state, browser],
+                            outputs=[selected_id_state, scene_image, desc_html, images_state, browser],
+                        )
+
+    # ---------- BOTTOM: Frog Master chat ----------
+    with gr.Row(elem_classes=["fq-chatbar"]):
+        chat_input = gr.Textbox(
+            show_label=False, lines=2, elem_classes=["compose", "fq-chat-input"],
+            placeholder="Tell the Frog Master your plans, what you finished, or what you couldn't do...",
+        )
+        send_btn = gr.Button("SEND ▶", elem_classes=["pix-btn", "primary", "fq-chat-send"])
+    gr.HTML('<p class="fq-chat-hint">e.g. "Finish the report, reply to emails, book dentist" · '
+            '"I finished the report" · "Couldn\'t do the gym — too tired"</p>')
 
     # ---------- wiring ----------
-    theme_box.change(None, theme_box, None, js="(t) => { fqSetTheme(t); }")
-    cyber_btn.click(lambda: "cyberpunk", None, theme_box)
-    fantasy_btn.click(lambda: "fantasy", None, theme_box)
-    space_btn.click(lambda: "space", None, theme_box)
-
-    begin_btn.click(begin, [photo_image, theme_box, browser], [browser, photo_state, onboard_col, app_col])
-    settings_btn.click(go_settings, [photo_state], [onboard_col, app_col, photo_image])
-    forge_btn.click(
-        forge, [todos_box, theme_box, photo_state, browser],
-        [quests_state, adventure_state, browser, adventure_title],
+    photo_image.upload(upload_photo, [photo_image, browser], [photo_state, browser])
+    theme_radio.change(
+        change_theme, [theme_radio, adventure_state, images_state, browser],
+        [adventure_state, images_state, scene_image, desc_html, browser],
+    )
+    reset_btn.click(
+        reset_all, None,
+        [browser, photo_image, photo_state, quests_state, adventure_state, selected_id_state,
+         images_state, scene_image, desc_html, stats_html, theme_radio],
+    )
+    done_btn.click(
+        apply_done, [selected_id_state, quests_state, adventure_state, photo_state, images_state, browser],
+        [quests_state, images_state, scene_image, desc_html, stats_html, browser],
+    )
+    couldnt_btn.click(
+        apply_couldnt, [selected_id_state, quests_state, adventure_state, photo_state, images_state, browser],
+        [quests_state, images_state, scene_image, desc_html, stats_html, browser],
     )
 
+    _chat_inputs = [chat_input, quests_state, adventure_state, theme_radio, photo_state,
+                    selected_id_state, images_state, browser]
+    _chat_outputs = [chat_input, quests_state, adventure_state, selected_id_state, images_state,
+                     scene_image, desc_html, stats_html, browser]
+    send_btn.click(chat_send, _chat_inputs, _chat_outputs)
+    chat_input.submit(chat_send, _chat_inputs, _chat_outputs)
+
     demo.load(
         boot, [browser],
-        [onboard_col, app_col, photo_state, theme_box, quests_state, adventure_state, adventure_title],
+        [photo_image, photo_state, quests_state, adventure_state, selected_id_state, images_state,
+         scene_image, desc_html, stats_html, theme_radio],
     )
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        css=THEME_CSS,
+        theme=gr.themes.Base(font=[gr.themes.GoogleFont("Press Start 2P"), "monospace"]),
+    )

images.py

@@ -79,8 +79,20 @@ def b64_to_pil(data_url_or_b64: str) -> Image.Image:
     return Image.open(io.BytesIO(raw)).convert("RGB")
 
 
-def pil_to_data_url(img: Image.Image) -> str:
+def pil_to_data_url(img: Image.Image, fmt: str = "JPEG", quality: int = 82) -> str:
+    """Encode a PIL image as a data URL. Defaults to JPEG (~80-200KB for a 768px scene) so the
+    quest-image cache fits in localStorage; pass fmt="PNG" for lossless when size doesn't matter.
+    """
+    fmt = (fmt or "JPEG").upper()
+    if fmt in ("JPG", "JPEG"):
+        fmt = "JPEG"
+        img = img.convert("RGB")  # JPEG has no alpha channel
+        save_kwargs = {"quality": quality}
+        mime = "jpeg"
+    else:
+        save_kwargs = {}
+        mime = fmt.lower()
     buf = io.BytesIO()
-    img.save(buf, format="PNG")
+    img.save(buf, format=fmt, **save_kwargs)
     b64 = base64.b64encode(buf.getvalue()).decode("ascii")
-    return f"data:image/png;base64,{b64}"
+    return f"data:image/{mime};base64,{b64}"

llm.py

@@ -16,7 +16,7 @@ os.environ.setdefault("HF_HUB_ENABLE_HF_TRANSFER", "1")  # MUST precede huggingf
 
 import spaces  # noqa: E402
 
-from schema import RESPONSE_SCHEMA  # noqa: E402
+from schema import INTENT_SCHEMA, RESPONSE_SCHEMA  # noqa: E402
 
 # Verified on HF (June 2026). unsloth's GGUF of NVIDIA Nemotron-3 Nano 4B (the repo actually
 # exists; the older Llama-3.1-Nemotron-Nano GGUF id 404s). Q8_0 (~4.3GB, near-fp16) over Q4_K_M:
@@ -43,6 +43,19 @@ For EVERY quest write vivid {theme}-themed, 8-bit pixel-art image instructions w
 Set adventure.art_style to one shared "8-bit / 16-bit pixel-art, {theme} palette" string applied to every image, and adventure.seed to a single integer for the whole adventure. xp 10-100 by effort. All status:"active", image_state:"initial". Echo the user's real wording in each quest.task.
 /no_think"""
 
+# Frog Master chat router. Classifies one user message into a single intent and OUTPUTS JSON ONLY.
+INTENT_SYSTEM_PROMPT = """You are FrogQuest's "Frog Master" router. Read ONE user message plus a short context describing the current quest log, and classify it into EXACTLY ONE intent. OUTPUT JSON ONLY - no prose.
+
+intent must be one of:
+- "forge": the user is describing their to-do list / plans / goals for the first time (or wants a brand-new quest log). Use this when no quest log exists yet, or they clearly want to start over.
+- "add_tasks": the user wants to ADD one or more new tasks/goals to the EXISTING quest log.
+- "mark_done": the user says they FINISHED/completed a task. Put the task they mean in target_task (match it to one of the listed quest titles or tasks; leave empty to mean the currently selected quest).
+- "mark_couldnt": the user could NOT do a task, or wants to skip/postpone it. Put the task in target_task (empty = currently selected quest) and put their explanation in reason.
+- "unknown": small talk, a question, or anything that doesn't fit the above.
+
+Only "forge" and "add_tasks" describe NEW work; if a log already exists and the user is describing more things to do, prefer "add_tasks". target_task should copy the matching quest's title or task wording when you can identify it.
+/no_think"""
+
 _llm = None
 
 
@@ -124,6 +137,33 @@ def generate_quests_raw(todos: str, theme: str) -> dict:
     return _extract_json(content)
 
 
+@spaces.GPU(duration=60)
+def route_intent(message: str, context: str) -> dict:
+    """Classify one Frog Master chat message into {intent, target_task?, reason?}.
+
+    `context` is a SHORT text summary of the current log (does a log exist + quest titles/ids/
+    status) - never images (CLAUDE.md rule). Returns the raw classification; the caller decides
+    what to do. Falls back to {"intent": "unknown"} on unparseable output.
+    """
+    llm = _get_llm()
+    user = f"Context:\n{context.strip()}\n\nUser message:\n{message.strip()}"
+    out = llm.create_chat_completion(
+        messages=[
+            {"role": "system", "content": INTENT_SYSTEM_PROMPT},
+            {"role": "user", "content": user},
+        ],
+        response_format={"type": "json_object", "schema": INTENT_SCHEMA},
+        temperature=0.0,
+        max_tokens=256,
+    )
+    parsed = _extract_json(out["choices"][0]["message"]["content"])
+    if not isinstance(parsed, dict) or parsed.get("intent") not in (
+        "forge", "add_tasks", "mark_done", "mark_couldnt", "unknown",
+    ):
+        return {"intent": "unknown"}
+    return parsed
+
+
 def _extract_json(text: str) -> dict:
     """Parse JSON from the model output, tolerating stray prose or code fences."""
     text = (text or "").strip()

schema.py

@@ -63,6 +63,23 @@ RESPONSE_SCHEMA: dict[str, Any] = {
 }
 
 
+# JSON Schema for the Frog Master chat router. The LLM classifies each user message into one
+# intent and (optionally) names a target task and/or a free-text reason. Kept tiny: the chat
+# never sees images — only a short text context (see llm.route_intent).
+INTENT_SCHEMA: dict[str, Any] = {
+    "type": "object",
+    "properties": {
+        "intent": {
+            "type": "string",
+            "enum": ["forge", "add_tasks", "mark_done", "mark_couldnt", "unknown"],
+        },
+        "target_task": {"type": "string"},
+        "reason": {"type": "string"},
+    },
+    "required": ["intent"],
+}
+
+
 def _s(value: Any, default: str = "") -> str:
     """Coerce to a stripped string."""
     if value is None:
@@ -85,6 +102,53 @@ def _slugify(text: str, fallback: str) -> str:
     return slug or fallback
 
 
+def _clean_quest(q: Any, idx: int, seen_ids: set[str], qtype: str) -> dict[str, Any]:
+    """Coerce one raw quest dict into a render-ready quest with a unique non-empty id.
+
+    `seen_ids` is mutated in place; `qtype` is the already-resolved type (so the caller owns
+    the bonus-cap accounting). Runtime state (status/image_state) is always set fresh here and
+    never trusted from the model.
+    """
+    title = _s(q.get("quest_title")) or _s(q.get("task")) or f"Quest {idx + 1}"
+    qid = _s(q.get("id"))
+    if not qid or qid in seen_ids:
+        qid = _slugify(title, f"quest-{idx + 1}")
+        base, n = qid, 2
+        while qid in seen_ids:
+            qid, n = f"{base}-{n}", n + 1
+    seen_ids.add(qid)
+
+    return {
+        "id": qid,
+        "task": _s(q.get("task")) or title,
+        "quest_title": title,
+        "narrative": _s(q.get("narrative")),
+        "type": qtype,
+        "goal_group": _s(q.get("goal_group")) or None,
+        "is_frog": bool(q.get("is_frog")),
+        "initial_image_prompt": _s(q.get("initial_image_prompt")),
+        "success_edit": _s(q.get("success_edit")) or "Show the hero victorious.",
+        "failure_edit": _s(q.get("failure_edit"))
+        or "The hero retreats safely to rest and try again another day.",
+        "xp": _clamp_int(q.get("xp"), 0, 100, 25),
+        "status": "active",
+        "image_state": "initial",
+    }
+
+
+def _resolve_type(q: Any, bonus_count: int) -> tuple[str, int]:
+    """Resolve a quest's type, demoting bonus quests to main once MAX_BONUS is reached.
+    Returns (type, new_bonus_count)."""
+    qtype = q.get("type") if isinstance(q, dict) else None
+    qtype = qtype if qtype in QUEST_TYPES else "main"
+    if qtype == "bonus":
+        if bonus_count >= MAX_BONUS:
+            qtype = "main"  # demote excess bonus quests to main
+        else:
+            bonus_count += 1
+    return qtype, bonus_count
+
+
 def validate_and_clamp(raw: Any, theme: str) -> dict[str, Any]:
     """Turn whatever the LLM returned into a safe, render-ready adventure object.
 
@@ -128,41 +192,8 @@ def validate_and_clamp(raw: Any, theme: str) -> dict[str, Any]:
             break
         if not isinstance(q, dict):
             continue
-
-        qtype = q.get("type")
-        qtype = qtype if qtype in QUEST_TYPES else "main"
-        if qtype == "bonus":
-            if bonus_count >= MAX_BONUS:
-                qtype = "main"  # demote excess bonus quests to main
-            else:
-                bonus_count += 1
-
-        title = _s(q.get("quest_title")) or _s(q.get("task")) or f"Quest {idx + 1}"
-        qid = _s(q.get("id"))
-        if not qid or qid in seen_ids:
-            qid = _slugify(title, f"quest-{idx + 1}")
-            base, n = qid, 2
-            while qid in seen_ids:
-                qid, n = f"{base}-{n}", n + 1
-        seen_ids.add(qid)
-
-        cleaned.append({
-            "id": qid,
-            "task": _s(q.get("task")) or title,
-            "quest_title": title,
-            "narrative": _s(q.get("narrative")),
-            "type": qtype,
-            "goal_group": _s(q.get("goal_group")) or None,
-            "is_frog": bool(q.get("is_frog")),
-            "initial_image_prompt": _s(q.get("initial_image_prompt")),
-            "success_edit": _s(q.get("success_edit")) or "Show the hero victorious.",
-            "failure_edit": _s(q.get("failure_edit"))
-            or "The hero retreats safely to rest and try again another day.",
-            "xp": _clamp_int(q.get("xp"), 0, 100, 25),
-            # fresh-generation runtime state (never trusted from the model)
-            "status": "active",
-            "image_state": "initial",
-        })
+        qtype, bonus_count = _resolve_type(q, bonus_count)
+        cleaned.append(_clean_quest(q, idx, seen_ids, qtype))
 
     if not cleaned:
         # Degenerate output: synthesise a single placeholder so the UI still renders.
@@ -187,3 +218,37 @@ def validate_and_clamp(raw: Any, theme: str) -> dict[str, Any]:
     cleaned.insert(0, frog)
 
     return {"adventure": adventure, "quests": cleaned}
+
+
+def merge_quests(existing: list[dict[str, Any]], raw_new: Any, theme: str) -> list[dict[str, Any]]:
+    """Append the LLM's freshly generated quests to an existing log (chat "add_tasks").
+
+    New quests are cleaned through the same id-uniqueness / bonus-cap / MAX_QUESTS rules as
+    validate_and_clamp, but the existing log's structure is preserved: the original frog stays
+    first (new quests are forced is_frog=False) and existing quests are untouched. Returns the
+    combined list (capped at MAX_QUESTS).
+    """
+    existing = list(existing or [])
+    if len(existing) >= MAX_QUESTS:
+        return existing
+
+    raw = raw_new if isinstance(raw_new, dict) else {}
+    quests_in = raw.get("quests")
+    quests_in = quests_in if isinstance(quests_in, list) else []
+
+    seen_ids = {q.get("id") for q in existing if q.get("id")}
+    bonus_count = sum(1 for q in existing if q.get("type") == "bonus")
+    base_idx = len(existing)
+
+    added: list[dict[str, Any]] = []
+    for i, q in enumerate(quests_in):
+        if len(existing) + len(added) >= MAX_QUESTS:
+            break
+        if not isinstance(q, dict):
+            continue
+        qtype, bonus_count = _resolve_type(q, bonus_count)
+        cleaned = _clean_quest(q, base_idx + i, seen_ids, qtype)
+        cleaned["is_frog"] = False  # the original frog keeps its place at the front
+        added.append(cleaned)
+
+    return existing + added

theme.css

@@ -1,26 +1,26 @@
 /* FrogQuest — 8-bit / NES-RPG pixel-art theme for plain Gradio (gr.Blocks).
-   Reuses the original static/style.css rules and adds overrides that strip Gradio's
-   default chrome so the app looks identical to the gr.Server build. */
+   Single-page master-detail layout (left = hero/stats/settings, center = selected scene +
+   actions, right = task list, bottom = Frog Master chat). Palette is the fixed "Eat That Frog"
+   green / black / red scheme; the cyberpunk/fantasy/space theme only flavors the generated
+   images, never the UI. */
 
 :root {
-  --bg: #0d0b1a;
-  --bg2: #161228;
-  --panel: #1d1733;
-  --ink: #e8e6ff;
-  --dim: #9b95c9;
-  --accent: #00e5ff;
-  --accent2: #ff2e88;
-  --gold: #ffd23f;
-  --frog: #4ade5b;
+  --bg: #0a0f0a;       /* near-black green-tinted background */
+  --bg2: #10180f;      /* raised surfaces / inputs */
+  --panel: #16241a;    /* panels & cards */
+  --ink: #eafbe2;      /* primary text */
+  --dim: #8fae84;      /* muted text */
+  --accent: #4ade5b;   /* FROG GREEN — primary actions, borders, logo */
+  --accent2: #e5484d;  /* RED — danger / couldn't */
+  --select: #ff8a1f;   /* ORANGE — currently-selected task highlight */
+  --success: #4ade5b;  /* green — done */
+  --danger: #e5484d;   /* red — couldn't */
+  --gold: #ffd23f;     /* XP / accents */
+  --frog: #4ade5b;     /* frog-quest border */
   --shadow: #000;
   --border: 4px;
 }
 
-/* ---- per-theme palettes (set on <html data-theme> by fqSetTheme) ---- */
-[data-theme="cyberpunk"] { --bg:#0d0b1a; --bg2:#161228; --panel:#1d1733; --accent:#00e5ff; --accent2:#ff2e88; --gold:#ffd23f; }
-[data-theme="fantasy"]   { --bg:#10180f; --bg2:#172414; --panel:#1d2e1a; --accent:#7bdc5a; --accent2:#ffae34; --gold:#ffe066; --ink:#eafbe2; --dim:#9ec48c; }
-[data-theme="space"]     { --bg:#070914; --bg2:#0d1124; --panel:#141a36; --accent:#7c5cff; --accent2:#36c5ff; --gold:#ffd23f; --ink:#e6ecff; --dim:#8d97c9; }
-
 /* ================= Gradio chrome neutralization ================= */
 *, *::before, *::after { box-sizing: border-box; }
 
@@ -31,17 +31,17 @@ body, gradio-app, .gradio-container {
   image-rendering: pixelated;
 }
 .gradio-container {
-  max-width: 900px !important;
+  max-width: 1240px !important;
   margin: 0 auto !important;
-  padding: 0 16px 64px !important;
+  padding: 0 16px 32px !important;
   font-size: 11px !important;
   line-height: 1.7 !important;
 }
 /* faint background grid */
 .gradio-container {
   background-image:
-    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.015) 38px 39px),
-    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.015) 38px 39px) !important;
+    repeating-linear-gradient(0deg, transparent 0 38px, rgba(120,255,120,0.02) 38px 39px),
+    repeating-linear-gradient(90deg, transparent 0 38px, rgba(120,255,120,0.02) 38px 39px) !important;
 }
 /* CRT scanlines overlay */
 body::after {
@@ -54,117 +54,185 @@ footer, .gradio-container > .main > .wrap > .contain > div > .built-with,
 .show-api, .built-with { display: none !important; }
 
 /* strip default block styling so our panels/cards control the look */
-.block, .form, .gr-box, .gr-block, .panel-fq .block, .styler,
+.block, .form, .gr-box, .gr-block, .styler,
 .gradio-container .prose { background: transparent !important; border: none !important;
   box-shadow: none !important; border-radius: 0 !important; }
 .gr-padded, .block.padded { padding: 0 !important; }
 .gap, .gradio-container .gap { gap: 0 !important; }
 
-/* ================= original pixel-art rules ================= */
+/* ================= top bar ================= */
 .fq-topbar {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 16px 4px; border-bottom: var(--border) solid var(--accent);
-  background: var(--bg2); margin-bottom: 20px;
+  padding: 14px 4px; border-bottom: var(--border) solid var(--accent);
+  background: var(--bg2); margin-bottom: 16px;
 }
 .fq-logo { margin: 0; font-size: 20px; letter-spacing: 2px; color: var(--accent);
   text-shadow: 3px 3px 0 var(--shadow); }
 .fq-logo b { color: var(--accent2); font-weight: normal; }
 
-.panel {
+/* ================= master-detail grid ================= */
+/* the wrapping gr.Row becomes a 3-column grid; its child gr.Columns are the cells */
+.fq-app-grid { display: grid !important; grid-template-columns: 248px 1fr 248px !important;
+  gap: 16px !important; align-items: start !important; flex-wrap: nowrap !important; }
+.fq-app-grid > .fq-left, .fq-app-grid > .fq-center, .fq-app-grid > .fq-right { min-width: 0 !important; }
+
+.panel, .fq-left, .fq-center, .fq-right {
   background: var(--panel) !important;
   border: var(--border) solid var(--ink) !important;
-  box-shadow: 8px 8px 0 var(--shadow) !important;
-  padding: 22px !important; margin-bottom: 22px !important;
+  box-shadow: 6px 6px 0 var(--shadow) !important;
+  padding: 16px !important;
 }
-.panel-title { margin: 0 0 14px; font-size: 13px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); }
-.panel-subtitle { margin: 18px 0 12px; font-size: 11px; color: var(--accent); }
-.hint { color: var(--dim); font-size: 10px; line-height: 1.9; }
+.panel-title { margin: 0 0 12px; font-size: 12px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); }
+.panel-subtitle { margin: 16px 0 10px; font-size: 10px; color: var(--accent); }
+.hint { color: var(--dim); font-size: 9px; line-height: 1.9; }
 
-/* ---------- buttons (Gradio <button> with elem_classes=["pix-btn"]) ---------- */
+/* ================= buttons ================= */
 button.pix-btn, .pix-btn button, .pix-btn {
-  font-family: "Press Start 2P", monospace !important; font-size: 11px !important;
+  font-family: "Press Start 2P", monospace !important; font-size: 10px !important;
   color: var(--ink) !important; cursor: pointer;
   background: var(--bg2) !important; border: var(--border) solid var(--ink) !important;
-  box-shadow: 4px 4px 0 var(--shadow) !important; padding: 12px 16px !important;
+  box-shadow: 4px 4px 0 var(--shadow) !important; padding: 12px 14px !important;
   text-transform: uppercase; border-radius: 0 !important;
   transition: transform .05s, box-shadow .05s; min-width: 0 !important;
 }
 button.pix-btn:hover, .pix-btn button:hover { background: var(--accent) !important; color: var(--bg) !important; }
 button.pix-btn:active, .pix-btn button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow) !important; }
 .pix-btn.primary, .pix-btn.primary button {
-  background: var(--accent2) !important; color: #fff !important; border-color: #fff !important;
-  width: 100% !important; font-size: 12px !important; padding: 16px !important;
+  background: var(--accent) !important; color: var(--bg) !important; border-color: #fff !important;
+  width: 100% !important; font-size: 11px !important; padding: 14px !important;
 }
 .pix-btn.primary:hover, .pix-btn.primary button:hover { background: var(--gold) !important; color: var(--bg) !important; }
-.pix-btn.small, .pix-btn.small button { font-size: 9px !important; padding: 9px 10px !important; box-shadow: 3px 3px 0 var(--shadow) !important; }
+.pix-btn.small, .pix-btn.small button { font-size: 8px !important; padding: 9px 10px !important; box-shadow: 3px 3px 0 var(--shadow) !important; }
 
-/* ---------- photo uploader (gr.Image) ---------- */
-.uploader { border: none !important; }
-.uploader .image-container, .uploader .upload-container, .uploader [data-testid="image"] {
-  min-height: 220px !important; background: var(--bg2) !important;
+/* ================= LEFT: hero photo / stats / settings ================= */
+.fq-photo .image-container, .fq-photo .upload-container, .fq-photo [data-testid="image"] {
+  min-height: 180px !important; background: var(--bg2) !important;
   border: var(--border) dashed var(--accent) !important; border-radius: 0 !important;
 }
-.uploader .image-container img { image-rendering: pixelated; object-fit: cover; }
-.uploader .wrap, .uploader .icon-wrap, .uploader .upload-text { color: var(--dim) !important;
-  font-family: "Press Start 2P", monospace !important; font-size: 9px !important; }
+.fq-photo .image-container img { image-rendering: pixelated; object-fit: cover; }
+.fq-photo .wrap, .fq-photo .icon-wrap, .fq-photo .upload-text { color: var(--dim) !important;
+  font-family: "Press Start 2P", monospace !important; font-size: 8px !important; }
+
+.fq-stats { margin: 14px 0; padding: 12px; background: var(--bg2);
+  border: 2px solid var(--dim); }
+.fq-stats h4 { margin: 0 0 8px; font-size: 9px; color: var(--accent); }
+.fq-stats .stat-row { display: flex; justify-content: space-between; font-size: 9px;
+  color: var(--ink); margin: 6px 0; }
+.fq-stats .stat-row b { color: var(--gold); }
+
+.fq-settings { margin-top: 12px; }
+
+/* world picker (gr.Radio styled to fit the pixel theme) */
+.fq-theme, .fq-theme * { color: var(--ink) !important; }
+.fq-theme .wrap { gap: 8px !important; }
+.fq-theme label, .fq-theme .wrap label {
+  background: var(--bg2) !important; border: 3px solid var(--dim) !important;
+  box-shadow: 3px 3px 0 var(--shadow) !important; border-radius: 0 !important;
+  font-family: "Press Start 2P", monospace !important; font-size: 8px !important;
+  padding: 8px 10px !important; cursor: pointer; text-transform: uppercase;
+}
+.fq-theme label:hover { border-color: var(--accent) !important; }
+.fq-theme label.selected, .fq-theme input:checked ~ * {
+  border-color: var(--select) !important; color: var(--select) !important;
+  box-shadow: 3px 3px 0 var(--select) !important;
+}
+.fq-theme input[type="radio"] { accent-color: var(--accent); }
 
-/* ---------- theme picker (3 buttons styled as cards) ---------- */
+/* theme picker (3 buttons styled as small cards) */
 .theme-card, .theme-card button {
-  font-family: "Press Start 2P", monospace !important; font-size: 9px !important;
+  font-family: "Press Start 2P", monospace !important; font-size: 8px !important;
   color: var(--ink) !important; cursor: pointer; height: 100%;
-  display: flex !important; flex-direction: column; align-items: center; gap: 10px;
-  padding: 18px 8px !important; background: var(--bg2) !important;
-  border: var(--border) solid var(--dim) !important; box-shadow: 4px 4px 0 var(--shadow) !important;
-  border-radius: 0 !important; white-space: pre-line; line-height: 1.6;
+  display: flex !important; flex-direction: column; align-items: center; gap: 6px;
+  padding: 10px 4px !important; background: var(--bg2) !important;
+  border: 3px solid var(--dim) !important; box-shadow: 3px 3px 0 var(--shadow) !important;
+  border-radius: 0 !important; white-space: pre-line; line-height: 1.5;
 }
-.theme-card:hover, .theme-card button:hover { border-color: var(--accent) !important; background: var(--bg2) !important; }
+.theme-card:hover, .theme-card button:hover { border-color: var(--accent) !important; }
 .theme-card.selected, .theme-card.selected button {
-  border-color: var(--gold) !important; background: var(--panel) !important;
-  box-shadow: 4px 4px 0 var(--accent2) !important;
+  border-color: var(--select) !important; background: var(--panel) !important;
+  box-shadow: 3px 3px 0 var(--select) !important;
 }
 
-/* ---------- compose textarea (gr.Textbox) ---------- */
-.compose textarea {
-  width: 100%; resize: vertical; font-family: "Press Start 2P", monospace !important;
-  font-size: 10px !important; line-height: 1.8 !important; color: var(--ink) !important;
-  background: var(--bg2) !important; border: var(--border) solid var(--accent) !important;
-  padding: 14px !important; box-shadow: inset 3px 3px 0 var(--shadow); border-radius: 0 !important;
+/* ================= CENTER: scene / description / actions ================= */
+.fq-scene .image-container, .fq-scene [data-testid="image"] {
+  min-height: 360px !important; background: var(--bg2) !important; border-radius: 0 !important;
+  border: var(--border) solid var(--ink) !important;
 }
-.compose textarea:focus { outline: none; border-color: var(--gold) !important; box-shadow: inset 3px 3px 0 var(--shadow) !important; }
-/* NOTE: do NOT `display:none` the .compose label — Gradio nests the <textarea> inside the
-   <label>, so hiding the label hides the whole input. show_label=False already hides the text. */
-
-/* ---------- adventure header ---------- */
-.adventure-header h2 { font-size: 14px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); margin: 6px 0; }
-
-/* ---------- quest cards ---------- */
-.quest-card {
-  background: var(--panel) !important; border: var(--border) solid var(--ink) !important;
-  box-shadow: 8px 8px 0 var(--shadow) !important; overflow: hidden; margin-bottom: 20px !important;
-  border-radius: 0 !important; padding: 0 !important;
+.fq-scene img { image-rendering: pixelated; object-fit: contain; width: 100%; }
+
+.fq-detail { display: flex; gap: 14px; align-items: stretch; margin-top: 14px; }
+.fq-desc { flex: 1; background: var(--bg2); border: var(--border) solid var(--ink);
+  box-shadow: 4px 4px 0 var(--shadow); padding: 14px 16px; min-height: 96px; }
+.fq-desc .adventure-header h2 { font-size: 13px; color: var(--gold); text-shadow: 2px 2px 0 var(--shadow); margin: 0 0 8px; }
+.fq-desc .quest-title { margin: 0 0 8px; font-size: 12px; color: var(--ink); line-height: 1.6; }
+.fq-desc .quest-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+.fq-desc .quest-narrative { margin: 0 0 10px; font-size: 9px; color: var(--dim); line-height: 1.9; }
+.fq-desc .quest-task { margin: 0 0 8px; font-size: 9px; color: var(--accent); line-height: 1.8; }
+.fq-desc .quest-task::before { content: "▸ TASK: "; color: var(--dim); }
+.fq-desc .xp { font-size: 9px; color: var(--gold); }
+.fq-desc .xp::before { content: "★ "; }
+.fq-desc.state-success { border-color: var(--success); box-shadow: 4px 4px 0 var(--success); }
+.fq-desc.state-failure { border-color: var(--danger); box-shadow: 4px 4px 0 var(--danger); }
+.fq-desc .result-msg { font-size: 10px; line-height: 1.9; }
+.fq-desc.state-success .result-msg { color: var(--success); }
+.fq-desc.state-failure .result-msg { color: var(--danger); }
+.fq-empty { color: var(--dim); font-size: 10px; line-height: 1.9; }
+
+.fq-actions { display: flex; flex-direction: column; gap: 12px; justify-content: center; min-width: 132px; }
+.btn-done, .btn-done button {
+  background: var(--success) !important; color: var(--bg) !important; border-color: #fff !important;
+  font-size: 11px !important;
 }
-.quest-card.is-frog { border-color: var(--frog) !important; box-shadow: 8px 8px 0 var(--frog) !important; }
-.quest-card.is-bonus { border-style: dashed !important; }
-
-.quest-art .image-container, .quest-art [data-testid="image"] {
-  min-height: 200px !important; background: var(--bg2) !important; border-radius: 0 !important;
-  border: none !important; border-right: var(--border) solid var(--ink) !important;
+.btn-done:hover, .btn-done button:hover { background: var(--gold) !important; }
+.btn-couldnt, .btn-couldnt button {
+  background: var(--danger) !important; color: #fff !important; border-color: #fff !important;
+  font-size: 9px !important;
 }
-.quest-art img { image-rendering: pixelated; object-fit: cover; width: 100%; }
+.btn-couldnt:hover, .btn-couldnt button:hover { background: #ff7a7e !important; color: var(--bg) !important; }
 
-.quest-body { padding: 16px 18px; }
-.quest-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
-.badge { font-size: 8px; padding: 5px 7px; border: 2px solid currentColor; display: inline-block; }
+/* ================= RIGHT: task list ================= */
+.fq-right .panel-title { margin-bottom: 12px; }
+.fq-tasklist { display: flex; flex-direction: column; gap: 10px; }
+.fq-task-item, .fq-task-item button {
+  font-family: "Press Start 2P", monospace !important; font-size: 9px !important;
+  text-align: left !important; color: var(--ink) !important; cursor: pointer;
+  background: var(--bg2) !important; border: 3px solid var(--ink) !important;
+  box-shadow: 3px 3px 0 var(--shadow) !important; padding: 11px 12px !important;
+  border-radius: 0 !important; width: 100% !important; line-height: 1.6; white-space: normal;
+}
+.fq-task-item:hover, .fq-task-item button:hover { border-color: var(--accent) !important; }
+.fq-task-item.selected, .fq-task-item.selected button {
+  border-color: var(--select) !important; box-shadow: 4px 4px 0 var(--select) !important;
+  color: var(--select) !important; background: var(--panel) !important;
+}
+.fq-task-item.is-frog, .fq-task-item.is-frog button { border-color: var(--frog) !important; }
+.fq-task-item.done, .fq-task-item.done button { opacity: 0.7; border-color: var(--success) !important; }
+.fq-task-item.failed, .fq-task-item.failed button { opacity: 0.6; border-style: dashed !important; }
+
+/* badges (reused in the description pane and task items) */
+.badge { font-size: 8px; padding: 4px 6px; border: 2px solid currentColor; display: inline-block; }
 .frog-badge { color: var(--frog); }
 .bonus-badge { color: var(--accent); }
 .group-badge { color: var(--gold); }
-.quest-title { margin: 4px 0 10px; font-size: 12px; color: var(--ink); line-height: 1.6; }
-.quest-narrative { margin: 0 0 12px; font-size: 9px; color: var(--dim); line-height: 1.9; }
-.quest-task { margin: 0 0 14px; font-size: 9px; color: var(--accent); line-height: 1.8; }
-.quest-task::before { content: "▸ TASK: "; color: var(--dim); }
-.xp { font-size: 9px; color: var(--gold); }
-.xp::before { content: "★ "; }
-
-@media (max-width: 620px) {
+
+/* ================= BOTTOM: Frog Master chat bar ================= */
+.fq-chatbar { display: flex !important; gap: 12px !important; align-items: stretch !important;
+  margin-top: 16px !important; flex-wrap: nowrap !important; }
+.fq-chatbar .fq-chat-input { flex: 1 !important; min-width: 0 !important; }
+.fq-chatbar .fq-chat-send { width: 150px !important; flex: 0 0 auto !important; }
+.compose textarea {
+  width: 100%; resize: none; font-family: "Press Start 2P", monospace !important;
+  font-size: 10px !important; line-height: 1.8 !important; color: var(--ink) !important;
+  background: var(--bg2) !important; border: var(--border) solid var(--accent) !important;
+  padding: 14px !important; box-shadow: inset 3px 3px 0 var(--shadow); border-radius: 0 !important;
+}
+.compose textarea:focus { outline: none; border-color: var(--gold) !important; box-shadow: inset 3px 3px 0 var(--shadow) !important; }
+.fq-chat-hint { color: var(--dim); font-size: 8px; margin: 8px 2px 0; line-height: 1.8; }
+
+/* ================= responsive: stack on narrow screens ================= */
+@media (max-width: 900px) {
+  .fq-app-grid { grid-template-columns: 1fr !important; }
   .fq-logo { font-size: 16px; }
+  .fq-detail { flex-direction: column; }
+  .fq-actions { flex-direction: row; min-width: 0; }
 }