frontend/scripts/app.js

(function () {
  if (window.__EPIC_ERRANDS_V2_APP_STARTED__) return;
  window.__EPIC_ERRANDS_V2_APP_STARTED__ = true;

  const ASSET_BASE = window.EPIC_ASSET_BASE || "assets/";
  const ASSET_MANIFEST = window.EPIC_ASSET_MANIFEST || {};
  const API_BASE = window.EPIC_API_BASE || "";
  const EMBEDDED_SPACE_MODE = Boolean(window.EPIC_EMBEDDED_SPACE_MODE);
  const GRADIO_API_PREFIX = window.EPIC_GRADIO_API_PREFIX || "/gradio_api";
  const root = document.getElementById("app");

  const themeToToken = {
    classroom: "storybook",
    questbook: "atelier",
    comic: "comic",
  };

  const themes = {
    classroom: {
      label: "Classroom",
      token: "storybook",
      parentTitle: "Classroom Captain",
      kidTitle: "Star Student",
      goalNoun: "Quest",
      rewardNoun: "Badge",
      waitingCopy: "Waiting for Classroom Captain approval.",
    },
    questbook: {
      label: "Questbook",
      token: "atelier",
      parentTitle: "Quest Keeper",
      kidTitle: "Young Adventurer",
      goalNoun: "Quest",
      rewardNoun: "Crest",
      waitingCopy: "Waiting for Quest Keeper approval.",
    },
    comic: {
      label: "Comic",
      token: "comic",
      parentTitle: "Comic Editor",
      kidTitle: "Panel Hero",
      goalNoun: "Mission",
      rewardNoun: "Starburst",
      waitingCopy: "Waiting for Comic Editor approval.",
    },
  };

  const assets = {
    "clean-room": {
      questbook: {
        image: "generated-v2/clean-room-questbook-d35e6ee10c.png",
        audio: "generated-v2/clean-room-questbook-01493f395c.wav",
      },
      classroom: {
        image: "generated-v2/clean-room-classroom-c5cb506427.png",
        audio: "generated-v2/clean-room-classroom-cf6f43d6ce.wav",
      },
      comic: {
        image: "generated-v2/clean-room-comic-9bce2b2b21.png",
        audio: "generated-v2/clean-room-comic-88b770a8dc.wav",
      },
    },
    "project-outline": {
      questbook: {
        image: "generated-v2/project-outline-questbook-e1d5ced2e8.png",
        audio: "generated-v2/project-outline-questbook-bddf03af1a.wav",
      },
      classroom: {
        image: "generated-v2/project-outline-classroom-3783f10bae.png",
        audio: "generated-v2/project-outline-classroom-70a886be5a.wav",
      },
      comic: {
        image: "generated-v2/project-outline-comic-4f9eaa443a.png",
        audio: "generated-v2/project-outline-comic-ef3f180846.wav",
      },
    },
    "read-20": {
      questbook: {
        image: "generated-v2/read-20-questbook-39aac8ba25.png",
        audio: "generated-v2/read-20-questbook-5805518930.wav",
      },
      classroom: {
        image: "generated-v2/read-20-classroom-7c13f43782.png",
        audio: "generated-v2/read-20-classroom-cca67b8288.wav",
      },
      comic: {
        image: "generated-v2/read-20-comic-b5ae2d561a.png",
        audio: "generated-v2/read-20-comic-7ec8c91bf8.wav",
      },
    },
  };

  const addElementsBaseThemeImages = {
    classroom: "base-theme-images/classroom-base-theme-1024.png",
    questbook: "base-theme-images/questbook-base-theme-1024.png",
    comic: "base-theme-images/comic-base-theme-1024.png",
  };

  const addElementsPhase1Variants = {
    "clean-room": {
      classroom: {
        image: "add-elements/phase1-classroom.png",
        source_goal: "Clean up my room before dinner",
      },
    },
    "project-outline": {
      questbook: {
        image: "add-elements/phase1-questbook.png",
        source_goal: "Finish my class project outline",
      },
    },
    "read-20": {
      comic: {
        image: "add-elements/phase1-comic.png",
        source_goal: "Read for 20 minutes",
      },
    },
  };

  const addElementsPhase2Variants = {
    "clean-room": {
      classroom: {
        image: "add-elements/phase2-classroom.png",
        source_goal: "Clean up my room before dinner",
        parent_reference_id: "parent-mom-demo",
        child_reference_id: "child-boy-demo",
      },
    },
    "project-outline": {
      questbook: {
        image: "add-elements/phase2-questbook.png",
        source_goal: "Finish my class project outline",
        parent_reference_id: "parent-dad-demo",
        child_reference_id: "child-girl-demo",
      },
    },
    "read-20": {
      comic: {
        image: "add-elements/phase2-comic.png",
        source_goal: "Read for 20 minutes",
        parent_reference_id: "parent-dad-demo",
        child_reference_id: "child-boy-demo",
      },
    },
  };

  const seededUploads = {
    parent_photo_refs: [
      {
        id: "parent-dad-demo",
        kind: "parent_photo",
        asset_ref: "Dad reference portrait",
        preview_ref: "reference-seeds/parent-reference-photo.png",
        privacy_scope: "session_only",
        created_at: "local-demo",
      },
      {
        id: "parent-mom-demo",
        kind: "parent_photo",
        asset_ref: "Mom reference portrait",
        preview_ref: "reference-seeds/placeholder-female-parent-720.png",
        privacy_scope: "session_only",
        created_at: "local-demo",
      },
    ],
    child_photo_refs: [
      {
        id: "child-boy-demo",
        kind: "child_photo",
        asset_ref: "Boy reference portrait",
        preview_ref: "reference-seeds/kid-reference-photo.png",
        privacy_scope: "session_only",
        created_at: "local-demo",
      },
      {
        id: "child-girl-demo",
        kind: "child_photo",
        asset_ref: "Girl reference portrait",
        preview_ref: "reference-seeds/placeholder-girl-720.png",
        privacy_scope: "session_only",
        created_at: "local-demo",
      },
    ],
    custom_image_reference_refs: [],
    parent_reference_audio_ref: {
      id: "parent-audio-demo",
      kind: "parent_reference_audio",
      asset_ref: "Parent reference audio sample",
      preview_ref: "reference-seeds/parent-reference-audio.m4a",
      privacy_scope: "session_only",
      created_at: "local-demo",
    },
  };

  const defaultGenerationReferenceIds = ["parent-dad-demo", "child-girl-demo"];

  const seedGoalSpecs = [
    {
      id: "goal-seed-clean-room",
      ordinary_goal: "Clean up my room before dinner",
      theme_id_at_creation: "questbook",
      selected_generation_reference_ids: defaultGenerationReferenceIds,
      audio_used_parent_reference: true,
      kid_completion_state: "completed",
      parent_reward_state: "waiting_for_approval",
    },
    {
      id: "goal-seed-project-outline",
      ordinary_goal: "Finish my class project outline",
      theme_id_at_creation: "questbook",
      selected_generation_reference_ids: defaultGenerationReferenceIds,
      audio_used_parent_reference: true,
      kid_completion_state: "not_started",
      parent_reward_state: "not_reviewed",
    },
    {
      id: "goal-seed-read-20",
      ordinary_goal: "Read for 20 minutes",
      theme_id_at_creation: "questbook",
      selected_generation_reference_ids: defaultGenerationReferenceIds,
      audio_used_parent_reference: true,
      kid_completion_state: "not_started",
      parent_reward_state: "not_reviewed",
    },
  ];

  const qualityMode = {
    id: "quality",
    label: "Quality",
    status: "enabled",
    text_model_id: "nvidia/NVIDIA-Nemotron-3-Nano-4B-GGUF",
    text_runtime: "llama.cpp",
    text_format: "GGUF",
    text_quantization: "Q4_K_M",
    image_model_id: "black-forest-labs/FLUX.2-klein-9B",
    image_runtime: "Diffusers",
    image_format: "safetensors",
    image_precision: "bf16",
    image_output_size_px: 1024,
    audio_model_id: "openbmb/VoxCPM2",
    audio_runtime: "voxcpm",
    audio_format: "safetensors",
    audio_precision: "bf16",
  };

  const speedMode = {
    id: "speed",
    label: "Speed",
    status: "disabled_planned",
    image_output_size_px: 720,
  };

  const icons = {
    home: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1v-9.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>',
    wand: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m14 4 6 6M3 21 17 7l-3-3L3 15v6Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M5 3v3M3.5 4.5h3M20 16v3M18.5 17.5h3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
    kid: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 12a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM5.5 20c.7-3.8 2.9-5.8 6.5-5.8s5.8 2 6.5 5.8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
    settings: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z" stroke="currentColor" stroke-width="2"/><path d="M19 12a7.1 7.1 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5l-.3 3a7 7 0 0 0-1.7 1L5.1 6l-2 3.5 2 1.5a7.1 7.1 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 3h5l.3-3a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>',
    lab: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 3h6M10 3v5l-5 9a3 3 0 0 0 2.6 4.5h8.8A3 3 0 0 0 19 17l-5-9V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.5 16h9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
    check: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m5 12.5 4.2 4L19 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    x: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>',
    sound: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10v4h4l5 4V6l-5 4H4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M16 9.5c.8.7 1.2 1.5 1.2 2.5s-.4 1.8-1.2 2.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
    play: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5Z" fill="currentColor"/></svg>',
    pause: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 5h3v14H7V5Zm7 0h3v14h-3V5Z" fill="currentColor"/></svg>',
    plus: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>',
  };

  let state = makeFallbackState();

  function makeFallbackState() {
    const seedGoals = seedGoalSpecs.map((spec) => {
      const goal = createGoal(
        spec.ordinary_goal,
        spec.theme_id_at_creation,
        spec.id,
        spec.selected_generation_reference_ids,
        spec.audio_used_parent_reference
      );
      goal.review_state = "accepted";
      goal.kid_completion_state = spec.kid_completion_state;
      goal.parent_reward_state = spec.parent_reward_state;
      return goal;
    });
    const fallback = {
      active_tab: "home",
      active_theme_id: "questbook",
      generation_mode: "quality",
      available_generation_modes: [qualityMode, speedMode],
      parent_profile: {
        display_name: "Parent",
        photo_refs: seededUploads.parent_photo_refs,
        reference_audio_ref: seededUploads.parent_reference_audio_ref,
        reference_audio_optional: true,
      },
      children: [{ id: "child-1", display_name: "Kid", photo_refs: seededUploads.child_photo_refs }],
      custom_image_reference_refs: [],
      uploads: {
        parent_photo_refs: seededUploads.parent_photo_refs,
        child_photo_refs: seededUploads.child_photo_refs,
        custom_image_reference_refs: [],
        parent_reference_audio_ref: seededUploads.parent_reference_audio_ref,
      },
      generation_references: [],
      goal_draft: {
        ordinary_goal: "Finish my class project outline",
        selected_generation_reference_ids: defaultGenerationReferenceIds,
        generation_mode: "quality",
      },
      pending_review_goal: null,
      kid_modal_goal_id: null,
      goals: seedGoals,
      accepted_goals: seedGoals,
      selected_goal_id: seedGoals[0].id,
      diy: buildLocalDiyState("questbook", seedGoals[0].ordinary_goal, defaultGenerationReferenceIds),
      generation_status: {
        state: "ready",
        message: "Hosted deterministic generation is ready.",
        backend_transport: "browser_fallback",
        fallback_used: true,
      },
    };
    syncGenerationReferences(fallback);
    return fallback;
  }

  function asset(path) {
    if (/^(data:|https?:|blob:)/.test(String(path || ""))) return path;
    if (ASSET_MANIFEST[path]) return ASSET_MANIFEST[path];
    return `${ASSET_BASE}${path}`;
  }

  function escapeHtml(value) {
    return String(value)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function theme() {
    return themes[state.active_theme_id] || themes.questbook;
  }

  function assetKey(goalText) {
    const text = String(goalText || "").toLowerCase();
    if (text.includes("read")) return "read-20";
    if (text.includes("project") || text.includes("outline")) return "project-outline";
    return "clean-room";
  }

  function referenceKind(refId) {
    const lowered = String(refId || "").toLowerCase();
    if (["parent", "dad", "mom"].some((token) => lowered.includes(token))) return "parent_photo";
    if (["child", "kid", "boy", "girl"].some((token) => lowered.includes(token))) return "child_photo";
    return "custom_image_reference";
  }

  function hasParentChildRefs(referenceIds) {
    const kinds = new Set((referenceIds || []).map(referenceKind));
    return kinds.has("parent_photo") && kinds.has("child_photo");
  }

  function mediaAssetsFor(key, themeId, referenceIds) {
    const variant = { ...(assets[key][themeId] || assets[key].questbook) };
    const imageProvenance = {
      image_fallback_source: "generated_v2_fixture",
      add_elements_cache_hit: false,
      add_elements_contract: "not_applied",
      base_theme_image_ref: addElementsBaseThemeImages[themeId],
    };
    if (hasParentChildRefs(referenceIds)) {
      const addElements = addElementsPhase2Variants[key]?.[themeId];
      if (addElements) {
        variant.image = addElements.image;
        Object.assign(imageProvenance, {
          image_fallback_source: "cached_flux2_add_elements_phase2",
          add_elements_cache_hit: true,
          add_elements_phase: "phase2",
          add_elements_contract: "base_theme_plus_parent_child_goal",
          add_elements_source_goal: addElements.source_goal,
          add_elements_reference_ids: [addElements.parent_reference_id, addElements.child_reference_id],
        });
      } else {
        Object.assign(imageProvenance, {
          add_elements_contract: "base_theme_plus_parent_child_goal",
          add_elements_cache_miss_reason: "no_exact_cached_phase2_theme_goal_match",
        });
      }
      return { variant, imageProvenance };
    }
    if (!(referenceIds || []).length) {
      const addElements = addElementsPhase1Variants[key]?.[themeId];
      if (addElements) {
        variant.image = addElements.image;
        Object.assign(imageProvenance, {
          image_fallback_source: "cached_flux2_add_elements_phase1",
          add_elements_cache_hit: true,
          add_elements_phase: "phase1",
          add_elements_contract: "base_theme_plus_goal_no_people",
          add_elements_source_goal: addElements.source_goal,
        });
      }
    }
    return { variant, imageProvenance };
  }

  function titleFor(goalText, themeId) {
    if (themeId === "comic") return "Mission: Everyday Hero";
    if (themeId === "classroom") return "Quest: Ready to Shine";
    return "Quest: Small Brave Step";
  }

  function rewardFor(themeId) {
    if (themeId === "comic") return "Starburst";
    if (themeId === "classroom") return "Badge";
    return "Crest";
  }

  function narrationFor(goalText, themeId) {
    if (themeId === "comic") return `Zoom in on the next win: ${goalText}. Finish it, then call in your victory.`;
    if (themeId === "classroom") return `Take one clear school-day step and finish: ${goalText}.`;
    return `The questbook opens to today's errand: ${goalText}.`;
  }

  function createGoal(ordinaryGoal, themeId, id, referenceIds, audioUsedParentReference) {
    const normalizedTheme = themes[themeId] ? themeId : "questbook";
    const key = assetKey(ordinaryGoal);
    const selectedRefs = referenceIds || [];
    const { variant, imageProvenance } = mediaAssetsFor(key, normalizedTheme, selectedRefs);
    const referenceSignature = (referenceIds || []).join(",");
    return {
      id: id || `goal-${Date.now()}`,
      ordinary_goal: ordinaryGoal,
      generation_mode: "quality",
      theme_id_at_creation: normalizedTheme,
      selected_generation_reference_ids: selectedRefs,
      generated_title: titleFor(ordinaryGoal, normalizedTheme),
      generated_narration: narrationFor(ordinaryGoal, normalizedTheme),
      generated_reward_label: rewardFor(normalizedTheme),
      overlay_text: {
        text: ordinaryGoal,
        theme_style_id: normalizedTheme,
        position: "bottom",
        max_lines: 3,
        is_app_owned: true,
        mutates_image_pixels: false,
        mutates_audio: false,
      },
      media: {
        image_asset_ref: variant.image,
        image_output_size_px: 1024,
        image_mutable_from_review: false,
        audio_asset_ref: variant.audio,
        audio_enabled: true,
        audio_used_parent_reference: Boolean(audioUsedParentReference),
        audio_mutable_from_review: false,
      },
      provenance: {
        text_model_id: qualityMode.text_model_id,
        text_runtime: qualityMode.text_runtime,
        text_format: qualityMode.text_format,
        text_quantization: qualityMode.text_quantization,
        image_model_id: qualityMode.image_model_id,
        image_runtime: qualityMode.image_runtime,
        image_format: qualityMode.image_format,
        image_precision: qualityMode.image_precision,
        audio_model_id: qualityMode.audio_model_id,
        audio_runtime: qualityMode.audio_runtime,
        audio_format: qualityMode.audio_format,
        audio_precision: qualityMode.audio_precision,
        fallback_used: true,
        trace_id: `local-v2-${key}-${normalizedTheme}-quality-media-${referenceSignature || "no-refs"}`,
        ...imageProvenance,
      },
      review_state: "pending",
      kid_completion_state: "not_started",
      parent_reward_state: "not_reviewed",
    };
  }

  function buildTrace(goal) {
    return {
      pipeline: ["plain_goal", "text_step", "image_step", "audio_step", "composed_card"],
      plain_goal: goal.ordinary_goal,
      selected_theme_id: goal.theme_id_at_creation,
      selected_generation_reference_ids: goal.selected_generation_reference_ids,
      generation_mode: "quality",
      text_step: {
        model: qualityMode.text_model_id,
        runtime: qualityMode.text_runtime,
        fallback_used: true,
      },
      image_step: {
        model: qualityMode.image_model_id,
        runtime: qualityMode.image_runtime,
        output_size_px: qualityMode.image_output_size_px,
        result_asset_ref: goal.media.image_asset_ref,
        image_fallback_source: goal.provenance.image_fallback_source,
        add_elements_cache_hit: goal.provenance.add_elements_cache_hit,
        add_elements_contract: goal.provenance.add_elements_contract,
        base_theme_image_ref: goal.provenance.base_theme_image_ref,
      },
      audio_step: {
        model: qualityMode.audio_model_id,
        runtime: qualityMode.audio_runtime,
        result_asset_ref: goal.media.audio_asset_ref,
      },
      composed_card_step: {
        overlay_text: goal.overlay_text.text,
        mutates_image_pixels: false,
      },
      quality_model_contract: qualityMode,
      image_output_size_px: 1024,
      fallback_used: true,
      save_to_app_status: "coming_soon",
    };
  }

  function buildLocalDiyState(themeId, ordinaryGoal, referenceIds) {
    const selectedRefs = referenceIds && referenceIds.length
      ? referenceIds
      : defaultGenerationReferenceIds;
    const preview = createGoal(ordinaryGoal, themeId, "diy-preview", selectedRefs);
    return {
      isolated_surface: true,
      workflow_draft: {
        ordinary_goal: ordinaryGoal,
        selected_theme_id: themes[themeId] ? themeId : "questbook",
        selected_generation_reference_ids: selectedRefs,
        text_step: { model: qualityMode.text_model_id, runtime: qualityMode.text_runtime },
        image_step: { model: qualityMode.image_model_id, output_size_px: qualityMode.image_output_size_px },
        audio_step: { model: qualityMode.audio_model_id, runtime: qualityMode.audio_runtime },
        composed_card_step: { overlay_text: preview.overlay_text.text },
      },
      preview,
      trace_json: buildTrace(preview),
      save_to_app_status: "coming_soon",
    };
  }

  function normalizeGoal(goal) {
    return {
      ...goal,
      selected_generation_reference_ids: goal.selected_generation_reference_ids || [],
      overlay_text: {
        text: goal.overlay_text?.text || goal.ordinary_goal || "",
        theme_style_id: goal.overlay_text?.theme_style_id || goal.theme_id_at_creation || "questbook",
        position: goal.overlay_text?.position || "bottom",
        max_lines: goal.overlay_text?.max_lines || 3,
        is_app_owned: true,
        mutates_image_pixels: false,
        mutates_audio: false,
      },
      media: {
        image_asset_ref: goal.media?.image_asset_ref || assets["clean-room"].questbook.image,
        image_output_size_px: goal.media?.image_output_size_px || 1024,
        image_mutable_from_review: false,
        audio_asset_ref: goal.media?.audio_asset_ref || assets["clean-room"].questbook.audio,
        audio_enabled: true,
        audio_used_parent_reference: Boolean(goal.media?.audio_used_parent_reference),
        audio_mutable_from_review: false,
      },
      provenance: goal.provenance || { ...qualityMode, fallback_used: true },
      review_state: goal.review_state || "pending",
      kid_completion_state: goal.kid_completion_state || "not_started",
      parent_reward_state: goal.parent_reward_state || "not_reviewed",
    };
  }

  function syncStateAliases(targetState = state) {
    const parent = targetState.parent_profile || {};
    const child = (targetState.children || [])[0] || { photo_refs: [] };
    const existingUploads = targetState.uploads || {};
    const hasAudioUpload = Object.prototype.hasOwnProperty.call(existingUploads, "parent_reference_audio_ref");
    targetState.uploads = {
      parent_photo_refs: existingUploads.parent_photo_refs?.length ? existingUploads.parent_photo_refs : parent.photo_refs || [],
      child_photo_refs: existingUploads.child_photo_refs?.length ? existingUploads.child_photo_refs : child.photo_refs || [],
      custom_image_reference_refs: existingUploads.custom_image_reference_refs || targetState.custom_image_reference_refs || [],
      parent_reference_audio_ref: hasAudioUpload
        ? existingUploads.parent_reference_audio_ref
        : parent.reference_audio_ref || parent.parent_reference_audio_ref || null,
    };
    targetState.parent_profile = {
      display_name: parent.display_name || "Parent",
      photo_refs: targetState.uploads.parent_photo_refs,
      reference_audio_ref: targetState.uploads.parent_reference_audio_ref,
      reference_audio_optional: true,
    };
    targetState.children = [
      {
        id: child.id || "child-1",
        display_name: child.display_name || "Kid",
        photo_refs: targetState.uploads.child_photo_refs,
      },
    ];
    targetState.custom_image_reference_refs = targetState.uploads.custom_image_reference_refs;
    targetState.accepted_goals = (targetState.accepted_goals || targetState.goals || []).map(normalizeGoal);
    targetState.goals = targetState.accepted_goals;
    if (!targetState.selected_goal_id && targetState.accepted_goals[0]) targetState.selected_goal_id = targetState.accepted_goals[0].id;
    syncGenerationReferences(targetState);
  }

  function normalizeBootstrap(payload) {
    const fallback = makeFallbackState();
    const nextState = {
      ...fallback,
      ...payload,
      active_tab: "home",
      active_theme_id: themes[payload.active_theme_id] ? payload.active_theme_id : fallback.active_theme_id,
      goal_draft: {
        ...fallback.goal_draft,
        ...(payload.goal_draft || {}),
      },
      diy: payload.diy || fallback.diy,
      generation_status: payload.generation_status || fallback.generation_status,
    };
    syncStateAliases(nextState);
    return nextState;
  }

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  function gradioEndpointFor(path) {
    if (path === "/api/bootstrap") return "epic_bootstrap";
    if (path === "/api/generate-goal") return "epic_generate_goal";
    if (path === "/api/diy-preview") return "epic_diy_preview";
    return "";
  }

  function parseSseData(text) {
    const lines = String(text || "").split(/\r?\n/);
    const eventLine = lines.find((line) => line.startsWith("event: error"));
    const dataLine = lines.find((line) => line.startsWith("data: "));
    if (!dataLine) throw new Error("Gradio response did not include data.");
    const parsed = JSON.parse(dataLine.slice(6));
    if (eventLine) throw new Error(Array.isArray(parsed) ? parsed.join(" ") : String(parsed));
    const value = Array.isArray(parsed) ? parsed[0] : parsed;
    return typeof value === "string" ? JSON.parse(value) : value;
  }

  async function gradioApiJson(apiName, payload = {}) {
    const callResponse = await fetch(`${GRADIO_API_PREFIX}/call/${apiName}`, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ data: [JSON.stringify(payload || {})] }),
    });
    if (!callResponse.ok) throw new Error(`Gradio call failed: ${callResponse.status}`);
    const callBody = await callResponse.json();
    if (!callBody.event_id) throw new Error("Gradio call did not return an event id.");
    const eventResponse = await fetch(`${GRADIO_API_PREFIX}/call/${apiName}/${callBody.event_id}`);
    if (!eventResponse.ok) throw new Error(`Gradio event failed: ${eventResponse.status}`);
    return parseSseData(await eventResponse.text());
  }

  async function apiJson(path, options = {}) {
    const gradioEndpoint = EMBEDDED_SPACE_MODE ? gradioEndpointFor(path) : "";
    if (gradioEndpoint) {
      const payload = options.body ? JSON.parse(options.body) : {};
      return gradioApiJson(gradioEndpoint, payload);
    }
    const response = await fetch(`${API_BASE}${path}`, options);
    if (!response.ok) throw new Error(`Request failed: ${response.status}`);
    return response.json();
  }

  function counts() {
    const pendingReview = state.pending_review_goal ? 1 : 0;
    const activeGoals = state.accepted_goals.filter((goal) => goal.parent_reward_state !== "approved_reward_given").length;
    const awaiting = state.accepted_goals.filter((goal) => goal.parent_reward_state === "waiting_for_approval").length;
    const approved = state.accepted_goals.filter((goal) => goal.parent_reward_state === "approved_reward_given").length;
    return { pendingReview, activeGoals, awaiting, approved };
  }

  function selectedGoal() {
    return state.accepted_goals.find((goal) => goal.id === state.selected_goal_id) || state.accepted_goals[0] || null;
  }

  function kidModalGoal() {
    return state.accepted_goals.find((goal) => goal.id === state.kid_modal_goal_id) || null;
  }

  function setTheme(themeId) {
    if (!themes[themeId]) return;
    state.active_theme_id = themeId;
    document.documentElement.dataset.theme = themeToToken[themeId];
    render();
  }

  function toggleThemeChoice(themeId) {
    if (!themes[themeId]) return;
    setTheme(state.active_theme_id === themeId && themeId !== "questbook" ? "questbook" : themeId);
  }

  function shortRefLabel(ref) {
    if (!ref) return "Reference";
    return String(ref.asset_ref || uploadLabel(ref.kind)).replace(/\s+reference\s+portrait/i, "").replace(/\s+sample/i, "");
  }

  function selectTab(tabId) {
    if (tabId === "diy") {
      openDiySurface();
      return;
    }
    state.active_tab = tabId;
    render();
  }

  function openDiySurface() {
    state.active_tab = "diy";
    render();
  }

  async function updateDiyPreview() {
    const draft = state.diy?.workflow_draft || {
      ordinary_goal: state.goal_draft.ordinary_goal || "Clean up my room before dinner",
      selected_theme_id: state.active_theme_id,
      selected_generation_reference_ids: state.goal_draft.selected_generation_reference_ids,
    };
    try {
      state.diy = await apiJson("/api/diy-preview", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          ordinary_goal: draft.ordinary_goal,
          selected_theme_id: draft.selected_theme_id,
          selected_generation_reference_ids: draft.selected_generation_reference_ids,
        }),
      });
    } catch (error) {
      state.diy = buildLocalDiyState(
        draft.selected_theme_id,
        draft.ordinary_goal,
        draft.selected_generation_reference_ids
      );
      state.diy.trace_json.local_preview_api = "unavailable_using_embedded_fallback";
    }
    render();
  }

  function setDiyTheme(themeId) {
    if (!themes[themeId]) return;
    state.diy = state.diy || buildLocalDiyState(state.active_theme_id, state.goal_draft.ordinary_goal, state.goal_draft.selected_generation_reference_ids);
    state.diy.workflow_draft.selected_theme_id = themeId;
    updateDiyPreview();
  }

  const uploadActions = {
    parent_photo: "upload-parent-photo",
    child_photo: "upload-child-photo",
    parent_reference_audio: "upload-parent-audio",
    custom_image_reference: "upload-custom-image-reference",
  };

  const removeActions = {
    parent_photo: "remove-parent-photo",
    child_photo: "remove-child-photo",
    parent_reference_audio: "remove-parent-audio",
    custom_image_reference: "remove-custom-image-reference",
  };

  function uploadLabel(kind) {
    if (kind === "parent_photo") return "Parent photo";
    if (kind === "child_photo") return "Child photo";
    if (kind === "parent_reference_audio") return "Parent audio";
    return "Custom reference";
  }

  function fileToUploadRef(kind, file) {
    const ref = {
      id: `${kind}-${Date.now()}-${Math.random().toString(16).slice(2, 7)}`,
      kind,
      asset_ref: file?.name || `${kind}-session-demo`,
      preview_ref: file ? URL.createObjectURL(file) : null,
      privacy_scope: "session_only",
      created_at: new Date().toISOString(),
    };
    return ref;
  }

  function addUpload(kind, file) {
    const ref = fileToUploadRef(kind, file);
    if (kind === "parent_photo") state.uploads.parent_photo_refs.push(ref);
    if (kind === "child_photo") state.uploads.child_photo_refs.push(ref);
    if (kind === "custom_image_reference") state.uploads.custom_image_reference_refs.push(ref);
    if (kind === "parent_reference_audio") state.uploads.parent_reference_audio_ref = ref;
    syncStateAliases();
    render();
  }

  function removeUpload(kind, id) {
    const refs = [
      ...state.uploads.parent_photo_refs,
      ...state.uploads.child_photo_refs,
      ...state.uploads.custom_image_reference_refs,
      state.uploads.parent_reference_audio_ref,
    ].filter(Boolean);
    const removed = refs.find((ref) => ref.kind === kind && (!id || ref.id === id));
    if (removed?.preview_ref?.startsWith("blob:")) URL.revokeObjectURL(removed.preview_ref);
    if (kind === "parent_photo") state.uploads.parent_photo_refs = state.uploads.parent_photo_refs.filter((ref) => ref.id !== id);
    if (kind === "child_photo") state.uploads.child_photo_refs = state.uploads.child_photo_refs.filter((ref) => ref.id !== id);
    if (kind === "custom_image_reference") state.uploads.custom_image_reference_refs = state.uploads.custom_image_reference_refs.filter((ref) => ref.id !== id);
    if (kind === "parent_reference_audio") state.uploads.parent_reference_audio_ref = null;
    syncStateAliases();
    render();
  }

  function syncGenerationReferences(targetState = state) {
    const refs = [
      ...targetState.uploads.parent_photo_refs,
      ...targetState.uploads.child_photo_refs,
      ...targetState.uploads.custom_image_reference_refs,
    ];
    targetState.generation_references = refs.map((ref) => ({
      id: `gen-${ref.id}`,
      source: ref.kind,
      upload_ref_id: ref.id,
      selected: targetState.goal_draft.selected_generation_reference_ids.includes(ref.id),
    }));
  }

  function toggleGenerationReference(refId) {
    const selected = state.goal_draft.selected_generation_reference_ids;
    state.goal_draft.selected_generation_reference_ids = selected.includes(refId)
      ? selected.filter((item) => item !== refId)
      : [...selected, refId];
    syncGenerationReferences();
    render();
  }

  async function generateGoal() {
    const goalText = state.goal_draft.ordinary_goal.trim();
    if (!goalText) return;
    const started = performance.now();
    state.generation_status = {
      state: "generating",
      message: EMBEDDED_SPACE_MODE
        ? "Generating through the hosted Gradio backend..."
        : "Generating through the local app backend...",
      backend_transport: EMBEDDED_SPACE_MODE ? "gradio_blocks_named_api" : "fastapi_route",
      fallback_used: null,
    };
    render();
    try {
      const [generated] = await Promise.all([
        apiJson("/api/generate-goal", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          ordinary_goal: goalText,
          ui_theme_id: state.active_theme_id,
          selected_generation_reference_ids: state.goal_draft.selected_generation_reference_ids,
          audio_used_parent_reference: Boolean(state.uploads.parent_reference_audio_ref),
        }),
        }),
        sleep(500),
      ]);
      state.pending_review_goal = normalizeGoal(generated);
      state.generation_status = {
        state: "success",
        message: `Generated through ${state.pending_review_goal.provenance.backend_transport || "app backend"}; fallback_used=${String(Boolean(state.pending_review_goal.provenance.fallback_used))}.`,
        backend_transport: state.pending_review_goal.provenance.backend_transport || "app_backend",
        fallback_used: Boolean(state.pending_review_goal.provenance.fallback_used),
        latency_ms: Math.round(performance.now() - started),
      };
    } catch (error) {
      state.pending_review_goal = createGoal(
        goalText,
        state.active_theme_id,
        `goal-review-${Date.now()}`,
        state.goal_draft.selected_generation_reference_ids,
        Boolean(state.uploads.parent_reference_audio_ref)
      );
      state.pending_review_goal.provenance.backend_transport = "browser_fallback";
      state.pending_review_goal.provenance.fallback_reason = String(error?.message || error || "backend unavailable");
      state.generation_status = {
        state: "fallback",
        message: "Hosted backend was unavailable, so this preview used browser fallback.",
        backend_transport: "browser_fallback",
        fallback_used: true,
        latency_ms: Math.round(performance.now() - started),
      };
    }
    state.active_tab = "parent_goals";
    render();
  }

  function acceptGoal() {
    if (!state.pending_review_goal) return;
    const accepted = {
      ...state.pending_review_goal,
      review_state: "accepted",
      kid_completion_state: "not_started",
      parent_reward_state: "not_reviewed",
    };
    state.accepted_goals.unshift(accepted);
    state.goals = state.accepted_goals;
    state.selected_goal_id = accepted.id;
    state.pending_review_goal = null;
    state.active_tab = "kid_goals";
    render();
  }

  function cancelGoal() {
    state.pending_review_goal = null;
    state.active_tab = "parent_goals";
    render();
  }

  function updateOverlay(text) {
    if (!state.pending_review_goal) return;
    state.pending_review_goal.overlay_text.text = text;
  }

  function completeGoal(goalId) {
    const goal = state.accepted_goals.find((item) => item.id === goalId);
    if (!goal) return;
    goal.kid_completion_state = "completed";
    goal.parent_reward_state = "waiting_for_approval";
    render();
  }

  function approveGoal(goalId) {
    const goal = state.accepted_goals.find((item) => item.id === goalId);
    if (!goal) return;
    goal.kid_completion_state = "completed";
    goal.parent_reward_state = "approved_reward_given";
    render();
  }

  function openKidGoalCard(goalId) {
    const goal = state.accepted_goals.find((item) => item.id === goalId);
    if (!goal) return;
    state.selected_goal_id = goal.id;
    state.kid_modal_goal_id = goal.id;
    state.active_tab = "kid_goals";
    render();
  }

  function closeKidGoalCard() {
    state.kid_modal_goal_id = null;
    render();
  }

  function setAudioButtonState(button, isPlaying) {
    if (!button) return;
    const icon = button.querySelector("[data-audio-icon]");
    button.setAttribute("aria-pressed", String(isPlaying));
    button.setAttribute("aria-label", isPlaying ? "Pause audio" : "Play audio");
    if (icon) icon.innerHTML = isPlaying ? icons.pause : icons.play;
  }

  function toggleAudio(button) {
    const shell = button.closest(".audio-shell");
    const audio = shell?.querySelector("audio");
    if (!audio) return;
    document.querySelectorAll(".audio-shell audio").forEach((item) => {
      if (item !== audio) {
        item.pause();
        setAudioButtonState(item.closest(".audio-shell")?.querySelector(".audio-toggle"), false);
      }
    });
    if (audio.paused) {
      audio.play()
        .then(() => setAudioButtonState(button, true))
        .catch(() => setAudioButtonState(button, false));
    } else {
      audio.pause();
      setAudioButtonState(button, false);
    }
  }

  function flourishCorners() {
    const flourish = '<svg viewBox="0 0 60 60" fill="none"><path d="M8 52c16-3 19-10 20-22 1 12 5 19 24 22M8 8c16 3 19 10 20 22 1-12 5-19 24-22" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
    return `
      <span class="corner-flourish tl">${flourish}</span>
      <span class="corner-flourish tr">${flourish}</span>
      <span class="corner-flourish bl">${flourish}</span>
      <span class="corner-flourish br">${flourish}</span>
    `;
  }

  function shellHeader() {
    return `
      <div class="app-head">
        <div class="wordmark" aria-label="Epic Errands">
          <span class="display">Epic Errands</span>
          <span class="sub">${escapeHtml(theme().parentTitle)} / ${escapeHtml(theme().kidTitle)}</span>
        </div>
      </div>
    `;
  }

  function navHtml() {
    const c = counts();
    const tabs = [
      ["home", "Home", icons.home, ""],
      ["parent_goals", "Parent", icons.wand, c.pendingReview + c.awaiting ? c.pendingReview + c.awaiting : ""],
      ["kid_goals", "Kid", icons.kid, c.activeGoals || ""],
      ["settings", "Settings", icons.settings, ""],
      ["diy", "DIY", icons.lab, ""],
    ];
    return `
      <nav class="mobile-tabs" data-design-id="mobile-tab-nav" aria-label="Primary">
        ${tabs
          .map(([id, label, icon, badge]) => `
            <button class="tab-btn" type="button" data-action="select-tab" data-tab="${id}" aria-pressed="${state.active_tab === id}">
              ${icon}<span>${escapeHtml(label)}</span>${badge ? `<b>${escapeHtml(badge)}</b>` : ""}
            </button>
          `)
          .join("")}
      </nav>
    `;
  }

  function themePickerHtml() {
    return `
      <section class="panel" data-design-id="app-theme-picker">
        <div class="panel-head">
          <h2>App Styling</h2>
          <span>${escapeHtml(theme().label)}</span>
        </div>
        <div class="theme-image-grid">
          ${Object.entries(themes)
            .map(([id, item]) => `
              <button class="theme-image-btn" type="button" data-action="select-theme" data-theme="${id}" aria-pressed="${state.active_theme_id === id}">
                <img src="${escapeHtml(asset(addElementsBaseThemeImages[id] || assets["project-outline"][id]?.image || assets["project-outline"].questbook.image))}" alt="">
                <span>${escapeHtml(item.label)}</span>
              </button>
            `)
            .join("")}
        </div>
      </section>
    `;
  }

  function audioControlHtml(src, label, id) {
    return `
      <div class="audio-shell" data-design-id="audio-play-hook">
        <button class="audio-toggle" type="button" data-action="toggle-audio" aria-pressed="false" aria-label="Play ${escapeHtml(label)}">
          <span class="audio-toggle__icon" data-audio-icon>${icons.play}</span>
        </button>
        <span class="audio-label">${escapeHtml(label)}</span>
        <audio class="visually-hidden-audio" preload="metadata" src="${escapeHtml(asset(src))}" data-audio-id="${escapeHtml(id || src)}"></audio>
      </div>
    `;
  }

  function uploadPanel(title, designId, kind, refs, accept) {
    const items = refs.length
      ? refs
          .map((ref, index) => `
            <div class="upload-chip${kind === "parent_reference_audio" ? " upload-chip--stack" : ""}">
              <div class="upload-chip__row">
                <span class="upload-chip__main">
                  ${ref.preview_ref && kind !== "parent_reference_audio" ? `<img class="upload-thumb" src="${escapeHtml(asset(ref.preview_ref))}" alt="">` : ""}
                  <span>${escapeHtml(ref.asset_ref || `${title} ${index + 1}`)}</span>
                </span>
                <button class="icon-mini" type="button" data-action="${removeActions[kind]}" data-kind="${kind}" data-id="${ref.id}" aria-label="Remove ${escapeHtml(title)}">${icons.x}</button>
              </div>
              ${ref.preview_ref && kind === "parent_reference_audio" ? audioControlHtml(ref.preview_ref, ref.asset_ref || title, ref.id) : ""}
            </div>
          `)
          .join("")
      : `<p class="empty-line">Session only</p>`;
    return `
      <section class="panel" data-design-id="${designId}">
        <div class="panel-head">
          <h2>${escapeHtml(title)}</h2>
          <label class="btn-ghost compact upload-trigger" data-action="${uploadActions[kind]}">
            ${icons.plus}<span>Add</span>
            <input class="visually-hidden-file" type="file" data-upload-kind="${kind}" accept="${escapeHtml(accept)}">
          </label>
        </div>
        <div class="upload-list">${items}</div>
      </section>
    `;
  }

  function photoUploadPanel(title, designId, kind, refs, accept) {
    const items = refs.length
      ? refs
          .map((ref, index) => `
            <div class="photo-token">
              <div class="photo-token__frame">
                ${ref.preview_ref ? `<img src="${escapeHtml(asset(ref.preview_ref))}" alt="${escapeHtml(ref.asset_ref || `${title} ${index + 1}`)}">` : `<span>${escapeHtml(uploadLabel(kind).slice(0, 1))}</span>`}
                <button class="icon-mini photo-token__remove" type="button" data-action="${removeActions[kind]}" data-kind="${kind}" data-id="${ref.id}" aria-label="Remove ${escapeHtml(ref.asset_ref || title)}">${icons.x}</button>
              </div>
              <span>${escapeHtml(shortRefLabel(ref))}</span>
            </div>
          `)
          .join("")
      : `<p class="empty-line">Session only</p>`;
    return `
      <section class="panel" data-design-id="${designId}">
        <div class="panel-head">
          <h2>${escapeHtml(title)}</h2>
          <label class="btn-ghost compact upload-trigger" data-action="${uploadActions[kind]}">
            ${icons.plus}<span>Add</span>
            <input class="visually-hidden-file" type="file" data-upload-kind="${kind}" accept="${escapeHtml(accept)}">
          </label>
        </div>
        <div class="photo-token-grid">${items}</div>
      </section>
    `;
  }

  function generationReferencesHtml() {
    const refs = [
      ...state.uploads.parent_photo_refs,
      ...state.uploads.child_photo_refs,
      ...state.uploads.custom_image_reference_refs,
    ];
    return `
      <section class="panel" data-design-id="generation-reference-picker">
        <div class="panel-head">
          <h2>Generation References</h2>
          <span>${refs.length ? `${refs.length} available` : "Optional"}</span>
        </div>
        <div class="reference-avatar-grid">
          ${refs.length
            ? refs
                .map((ref) => `
                  <button class="reference-avatar" type="button" data-action="select-generation-reference" data-ref-id="${ref.id}" aria-pressed="${state.goal_draft.selected_generation_reference_ids.includes(ref.id)}">
                    ${ref.preview_ref ? `<img src="${escapeHtml(asset(ref.preview_ref))}" alt="${escapeHtml(ref.asset_ref || uploadLabel(ref.kind))}">` : `<span class="reference-avatar__initial">${escapeHtml(uploadLabel(ref.kind).slice(0, 1))}</span>`}
                    <span>${escapeHtml(shortRefLabel(ref))}</span>
                    <small>${state.goal_draft.selected_generation_reference_ids.includes(ref.id) ? "Selected" : "Tap"}</small>
                  </button>
                `)
                .join("")
            : `<p class="empty-line">Parent photo, child photo, or custom image can be added above.</p>`}
        </div>
      </section>
    `;
  }

  function generationModeHtml() {
    return `
      <section class="panel" data-design-id="generation-mode-control">
        <div class="panel-head">
          <h2>Generation Mode</h2>
          <span>Quality selected</span>
        </div>
        <div class="mode-row">
          <button class="mode-btn" type="button" data-mode="quality" aria-pressed="true">
            <b>Quality</b>
            <span>1024 x 1024</span>
          </button>
          <button class="mode-btn" type="button" data-mode="speed" disabled aria-disabled="true">
            <b>Speed</b>
            <span>720 x 720 planned</span>
          </button>
        </div>
      </section>
    `;
  }

  function generationStatusHtml() {
    const status = state.generation_status;
    if (!status || status.state === "ready") return "";
    const label = status.state === "fallback" ? "Fallback" : "Backend";
    return `
      <div class="statusbar generation-status" data-generation-status="${escapeHtml(status.state)}">
        <span class="statusbar__dot"></span>
        <div class="statusbar__info">
          <b>${escapeHtml(label)}</b>
          ${escapeHtml(status.message)}
          ${status.latency_ms ? `<small>${escapeHtml(status.latency_ms)}ms</small>` : ""}
        </div>
      </div>
    `;
  }

  function homeHtml() {
    const c = counts();
    const current = selectedGoal();
    return `
      <section class="lead compact-lead">
        <h1>${escapeHtml(theme().goalNoun)} Board</h1>
        <p>${escapeHtml(theme().kidTitle)} has ${c.activeGoals} active ${c.activeGoals === 1 ? "card" : "cards"}.</p>
      </section>
      <section class="summary-grid" data-design-id="home-status-summary">
        <div class="summary-tile"><b>${c.pendingReview}</b><span>Review</span></div>
        <div class="summary-tile"><b>${c.awaiting}</b><span>Waiting</span></div>
        <div class="summary-tile"><b>${c.approved}</b><span>Rewards</span></div>
      </section>
      <section class="panel current-goal" data-design-id="current-kid-goal-shortcut">
        <div class="panel-head">
          <h2>Current Kid Card</h2>
          <button class="btn-ghost compact" type="button" data-action="open-kid-goal">${icons.kid}<span>Open</span></button>
        </div>
        ${current ? goalMiniHtml(current) : `<p class="empty-line">No active kid card yet.</p>`}
      </section>
    `;
  }

  function settingsHtml() {
    const audioRefs = state.uploads.parent_reference_audio_ref ? [state.uploads.parent_reference_audio_ref] : [];
    return `
      ${themePickerHtml()}
      ${photoUploadPanel("Parent Photos", "parent-details-panel", "parent_photo", state.uploads.parent_photo_refs, "image/*")}
      ${uploadPanel("Parent Reference Audio", "parent-details-panel", "parent_reference_audio", audioRefs, "audio/*")}
      ${photoUploadPanel("Child Photos", "children-details-panel", "child_photo", state.uploads.child_photo_refs, "image/*")}
      ${photoUploadPanel("Custom Image Reference", "custom-image-reference-panel", "custom_image_reference", state.uploads.custom_image_reference_refs, "image/*")}
      ${generationModeHtml()}
      <div class="statusbar">
        <span class="statusbar__dot"></span>
        <div class="statusbar__info"><b>Audio enabled.</b> Parent reference audio is optional.</div>
      </div>
    `;
  }

  function parentGoalsHtml() {
    const isGenerating = state.generation_status?.state === "generating";
    return `
      <section class="panel" data-design-id="create-goal-form">
        <div class="panel-head">
          <h2>Create ${escapeHtml(theme().goalNoun)}</h2>
          <span>Quality</span>
        </div>
        <label class="field">
          <span class="lab">Ordinary goal</span>
          <textarea class="field__input goal-textarea" data-field="goal-draft">${escapeHtml(state.goal_draft.ordinary_goal)}</textarea>
        </label>
        ${generationReferencesHtml()}
        <button class="btn-primary" type="button" data-action="generate-goal" ${isGenerating ? "disabled" : ""}>
          ${icons.wand}<span>${isGenerating ? "Generating..." : "Generate Goal"}</span>
        </button>
        ${generationStatusHtml()}
      </section>
      ${state.pending_review_goal ? reviewGoalHtml(state.pending_review_goal) : ""}
      ${approvalQueueHtml()}
    `;
  }

  function reviewGoalHtml(goal) {
    return `
      <section class="review-panel" data-design-id="review-goal-panel">
        <div class="panel-head">
          <h2>Review Goal</h2>
          <span>${escapeHtml(goal.media.image_output_size_px)} x ${escapeHtml(goal.media.image_output_size_px)}</span>
        </div>
        <div class="media-square">
          <img src="${asset(goal.media.image_asset_ref)}" alt="${escapeHtml(goal.generated_title)} generated image">
          <div class="goal-overlay editable" data-design-id="editable-goal-overlay" contenteditable="true" role="textbox" aria-label="Editable goal overlay">${escapeHtml(goal.overlay_text.text)}</div>
        </div>
        <div class="copy-block">
          <h3>${escapeHtml(goal.generated_title)}</h3>
          <p>${escapeHtml(goal.generated_narration)}</p>
          <b>${escapeHtml(goal.generated_reward_label)}</b>
        </div>
        ${audioControlHtml(goal.media.audio_asset_ref, "Generated narration", `review-${goal.id}`)}
        <details class="provenance">
          <summary>Provenance</summary>
          <p>${escapeHtml(goal.provenance.text_model_id)} / ${escapeHtml(goal.provenance.image_model_id)} / ${escapeHtml(goal.provenance.audio_model_id)}</p>
          <p>${escapeHtml(goal.provenance.image_fallback_source || "generated_v2_fixture")} / ${escapeHtml(goal.provenance.add_elements_contract || "not_applied")}</p>
          <p>fallback_used=${escapeHtml(String(goal.provenance.fallback_used))}</p>
        </details>
        <div class="review-actions">
          <button class="btn-ghost" type="button" data-action="cancel-goal">${icons.x}<span>Cancel</span></button>
          <button class="btn-primary" type="button" data-action="accept-goal">${icons.check}<span>Accept</span></button>
        </div>
      </section>
    `;
  }

  function approvalQueueHtml() {
    const rows = state.accepted_goals;
    return `
      <section class="panel" data-design-id="parent-approval-queue">
        <div class="panel-head">
          <h2>Reward Queue</h2>
          <span>${counts().awaiting} waiting</span>
        </div>
        <div class="parent-list">
          ${rows
            .map((goal) => {
              const waiting = goal.parent_reward_state === "waiting_for_approval";
              const approved = goal.parent_reward_state === "approved_reward_given";
              return `
                <article class="parent-row">
                  <div>
                    <div class="parent-row__title">${escapeHtml(goal.generated_title)}</div>
                    <div class="parent-row__meta">${escapeHtml(goal.ordinary_goal)} - ${escapeHtml(goal.generated_reward_label)}</div>
                  </div>
                  <div class="parent-actions">
                    ${waiting ? `<span class="parent-row__status">Waiting</span>` : ""}
                    <button class="btn-ghost" type="button" data-action="approve-goal" data-goal-id="${goal.id}" ${waiting ? "" : "disabled"}>
                      ${icons.check}<span>${approved ? "Approved" : "Approve"}</span>
                    </button>
                  </div>
                </article>
              `;
            })
            .join("")}
        </div>
      </section>
    `;
  }

  function goalMiniHtml(goal) {
    const isSelected = selectedGoal()?.id === goal.id;
    return `
      <button class="mini-goal" type="button" data-action="open-goal-card" data-goal-id="${goal.id}" aria-pressed="${isSelected}">
        <img src="${asset(goal.media.image_asset_ref)}" alt="${escapeHtml(goal.generated_title)} thumbnail">
        <span>
          <b>${escapeHtml(goal.generated_title)}</b>
          <small>${escapeHtml(goal.ordinary_goal)}</small>
        </span>
      </button>
    `;
  }

  function kidGoalsHtml() {
    const modalGoal = kidModalGoal();
    return `
      <section class="panel" data-design-id="kid-goal-thumbnail-grid">
        <div class="panel-head">
          <h2>${escapeHtml(theme().kidTitle)}</h2>
          <span>${state.accepted_goals.length} cards</span>
        </div>
        <div class="thumb-grid">
          ${state.accepted_goals.length ? state.accepted_goals.map(goalMiniHtml).join("") : `<p class="empty-line">No accepted goals yet.</p>`}
        </div>
      </section>
      ${modalGoal ? kidGoalModalHtml(modalGoal) : ""}
    `;
  }

  function kidGoalModalHtml(goal) {
    const waiting = goal.parent_reward_state === "waiting_for_approval";
    const approved = goal.parent_reward_state === "approved_reward_given";
    return `
      <div class="kid-modal" data-design-id="kid-goal-card-modal" role="presentation">
        <section class="kid-card kid-card-modal no-generated-steps" data-design-id="kid-goal-card" role="dialog" aria-modal="true" aria-labelledby="kid-goal-title">
          <button class="icon-mini kid-modal__close" type="button" data-action="close-kid-goal" aria-label="Close goal card">${icons.x}</button>
          <div class="media-square">
            <img src="${asset(goal.media.image_asset_ref)}" alt="${escapeHtml(goal.generated_title)} generated image">
            <div class="goal-overlay readonly" data-design-id="read-only-goal-overlay">${escapeHtml(goal.overlay_text.text)}</div>
          </div>
          <div class="copy-block">
            <h3 id="kid-goal-title">${escapeHtml(goal.generated_title)}</h3>
            <p>${escapeHtml(goal.generated_narration)}</p>
            <b>${escapeHtml(goal.generated_reward_label)}</b>
          </div>
          ${audioControlHtml(goal.media.audio_asset_ref, "Goal narration", `kid-${goal.id}`)}
          <button class="btn-primary" type="button" data-action="complete-goal" data-goal-id="${goal.id}" ${waiting || approved ? "disabled" : ""}>
            ${icons.check}<span>${approved ? "Reward Given" : waiting ? "Waiting" : "I Did It"}</span>
          </button>
          ${waiting ? `<p class="state-note"><strong>${escapeHtml(themes[goal.theme_id_at_creation].parentTitle)}:</strong> ${escapeHtml(themes[goal.theme_id_at_creation].waitingCopy)}</p>` : ""}
        </section>
      </div>
    `;
  }

  function diyRedirectHtml() {
    return `
      <section class="panel diy-frame-panel" data-design-id="diy-workflow-embed">
        <div class="panel-head">
          <h2>DIY Lab</h2>
          <span>Workflow canvas</span>
        </div>
        <div class="diy-frame-wrap">
          <iframe class="diy-workflow-frame" src="/diy-workflow/" title="Epic Errands DIY workflow canvas" loading="lazy"></iframe>
        </div>
      </section>
    `;
  }

  function stepHtml(label, step) {
    return `
      <div class="diy-step">
        <b>${escapeHtml(label)}</b>
        <span>${escapeHtml(step.model || step.result_asset_ref || step.overlay_text || "Ready")}</span>
        <small>${escapeHtml(step.runtime || step.output_size_px || step.fallback_used || "")}</small>
      </div>
    `;
  }

  function diyInlineHtml() {
    state.diy = state.diy || buildLocalDiyState(state.active_theme_id, state.goal_draft.ordinary_goal, state.goal_draft.selected_generation_reference_ids);
    const draft = state.diy.workflow_draft;
    const preview = state.diy.preview;
    const trace = state.diy.trace_json || {};
    return `
      <div class="diy-topline">
        <button class="btn-ghost compact" type="button" data-action="back-main-app">${icons.home}<span>Main App</span></button>
        <span class="empty-line">Isolated surface</span>
      </div>
      <section class="panel diy-native-panel" data-design-id="diy-workflow-native-link">
        <div class="panel-head">
          <h1>DIY Lab</h1>
          <span>Embedded Space mode</span>
        </div>
        <p class="empty-line diy-native-note">
          The workflow mirror opens inside this Space so the private hosted app does not navigate into a recursive Gradio frame.
        </p>
      </section>
      <section class="panel" data-design-id="diy-workflow-mirror">
        <div class="panel-head">
          <h2>V2 Preview Inputs</h2>
          <span>${escapeHtml(themes[draft.selected_theme_id]?.label || themes.questbook.label)}</span>
        </div>
        <label class="field">
          <span class="lab">Workflow draft</span>
          <textarea class="field__input goal-textarea" data-field="diy-goal">${escapeHtml(draft.ordinary_goal)}</textarea>
        </label>
        <div class="segmented small">
          ${Object.entries(themes)
            .map(([id, item]) => `
              <button class="seg-btn" type="button" data-action="diy-theme" data-theme="${id}" aria-pressed="${draft.selected_theme_id === id}">
                <span>${escapeHtml(item.label)}</span>
              </button>
            `)
            .join("")}
        </div>
        <div class="diy-ref-list" aria-label="Selected generation references">
          ${draft.selected_generation_reference_ids.map((ref) => `<span>${escapeHtml(ref)}</span>`).join("")}
        </div>
        <button class="btn-ghost" type="button" data-action="update-diy-preview">${icons.wand}<span>Update Preview</span></button>
      </section>
      <section class="panel">
        <div class="panel-head">
          <h2>Pipeline</h2>
          <span>Quality</span>
        </div>
        <div class="diy-step-grid">
          ${stepHtml("Text / Quest JSON", trace.text_step || {})}
          ${stepHtml("Image Request / Result", trace.image_step || {})}
          ${stepHtml("Audio Request / Result", trace.audio_step || {})}
          ${stepHtml("Composed Card", trace.composed_card_step || {})}
        </div>
      </section>
      ${preview ? `
        <section class="kid-card diy-preview">
          <div class="media-square">
            <img src="${asset(preview.media.image_asset_ref)}" alt="${escapeHtml(preview.generated_title)} DIY preview">
            <div class="goal-overlay readonly">${escapeHtml(preview.overlay_text.text)}</div>
          </div>
          <div class="copy-block">
            <h3>${escapeHtml(preview.generated_title)}</h3>
            <p>${escapeHtml(preview.generated_narration)}</p>
            <b>${escapeHtml(preview.generated_reward_label)}</b>
          </div>
          ${audioControlHtml(preview.media.audio_asset_ref, "Preview narration", "diy-preview")}
        </section>
      ` : ""}
      <section class="panel" data-design-id="diy-save-back-notice">
        <div class="panel-head">
          <h2>Trace</h2>
          <button class="btn-ghost compact" type="button" data-action="save-to-app" disabled>Coming soon</button>
        </div>
        <details class="provenance" open>
          <summary>Model details</summary>
          <p>${escapeHtml(JSON.stringify(trace.quality_mode || trace.quality_model_contract || {}, null, 2))}</p>
        </details>
        <pre class="trace-json">${escapeHtml(JSON.stringify(trace, null, 2))}</pre>
      </section>
    `;
  }

  function currentScreenHtml() {
    if (state.active_tab === "settings") return settingsHtml();
    if (state.active_tab === "parent_goals") return parentGoalsHtml();
    if (state.active_tab === "kid_goals") return kidGoalsHtml();
    if (state.active_tab === "diy") return diyRedirectHtml();
    return homeHtml();
  }

  function renderShell() {
    root.innerHTML = `
      <article class="card ornate v2-shell">
        ${flourishCorners()}
        <div class="card-inner app-shell">
          <div data-shell-region="header"></div>
          <div data-shell-region="nav"></div>
          <main class="app-screen" data-shell-region="screen" data-active-tab="${escapeHtml(state.active_tab)}"></main>
        </div>
      </article>
    `;
  }

  function render() {
    if (!root) return;
    document.documentElement.dataset.theme = themeToToken[state.active_theme_id];
    if (!root.querySelector('[data-shell-region="screen"]')) renderShell();
    root.querySelector('[data-shell-region="header"]').innerHTML = shellHeader();
    root.querySelector('[data-shell-region="nav"]').innerHTML = navHtml();
    const screen = root.querySelector('[data-shell-region="screen"]');
    screen.dataset.activeTab = state.active_tab;
    screen.innerHTML = currentScreenHtml();
  }

  document.addEventListener("click", (event) => {
    const button = event.target.closest("[data-action]");
    if (!button || button.disabled) return;
    const action = button.dataset.action;
    if (action === "select-tab") selectTab(button.dataset.tab);
    if (action === "select-theme") toggleThemeChoice(button.dataset.theme);
    if (Object.values(removeActions).includes(action)) removeUpload(button.dataset.kind, button.dataset.id);
    if (action === "select-generation-reference") toggleGenerationReference(button.dataset.refId);
    if (action === "generate-goal") generateGoal();
    if (action === "accept-goal") acceptGoal();
    if (action === "cancel-goal") cancelGoal();
    if (action === "toggle-audio") toggleAudio(button);
    if (action === "open-diy-surface") openDiySurface();
    if (action === "back-main-app") selectTab("home");
    if (action === "diy-theme") setDiyTheme(button.dataset.theme);
    if (action === "update-diy-preview") updateDiyPreview();
    if (action === "open-kid-goal") selectTab("kid_goals");
    if (action === "open-goal-card") openKidGoalCard(button.dataset.goalId);
    if (action === "close-kid-goal") closeKidGoalCard();
    if (action === "complete-goal") completeGoal(button.dataset.goalId);
    if (action === "approve-goal") approveGoal(button.dataset.goalId);
  });

  document.addEventListener("change", (event) => {
    const input = event.target.closest("[data-upload-kind]");
    if (!input || !input.files || !input.files[0]) return;
    addUpload(input.dataset.uploadKind, input.files[0]);
    input.value = "";
  });

  document.addEventListener("input", (event) => {
    const field = event.target.closest("[data-field]");
    if (!field) return;
    if (field.dataset.field === "goal-draft") state.goal_draft.ordinary_goal = field.value;
    if (field.dataset.field === "diy-goal") {
      state.diy = state.diy || buildLocalDiyState(state.active_theme_id, state.goal_draft.ordinary_goal, state.goal_draft.selected_generation_reference_ids);
      state.diy.workflow_draft.ordinary_goal = field.value;
    }
  });

  document.addEventListener("ended", (event) => {
    const audio = event.target.closest(".audio-shell audio");
    if (!audio) return;
    setAudioButtonState(audio.closest(".audio-shell")?.querySelector(".audio-toggle"), false);
  }, true);

  document.addEventListener("blur", (event) => {
    const overlay = event.target.closest('[data-design-id="editable-goal-overlay"]');
    if (overlay) updateOverlay(overlay.textContent.trim());
  }, true);

  async function init() {
    try {
      state = normalizeBootstrap(await apiJson("/api/bootstrap"));
    } catch (error) {
      state = makeFallbackState();
    }
    setTheme(state.active_theme_id);
  }

  init();
})();