Sync Dream QA composer debug UI

README.md

@@ -81,6 +81,22 @@ python app.py
 
 Open `http://127.0.0.1:7860`.
 
+## Local Space Mirror
+
+For pre-merge UI review, run the same `app.py` entrypoint with the local Space mirror wrapper:
+
+```bash
+.venv/bin/python scripts/local_space_mirror.py
+```
+
+Open `http://127.0.0.1:7862`, then verify the Gradio config in another terminal:
+
+```bash
+.venv/bin/python scripts/smoke_local_space_mirror.py
+```
+
+Use this path before merging Hugging Face Space PRs so UI changes can be reviewed locally. Details: `docs/local-space-mirror.md`.
+
 ## Optional Ollama Models
 
 ```bash

docs/local-space-mirror.md

@@ -0,0 +1,56 @@
+# Local Space Mirror
+
+Use this when you want to review Dream QA changes before they are merged into the Hugging Face Space.
+
+The mirror does not copy the app into a second implementation. It imports the same `app.py` entrypoint and therefore uses the same `dream_customs.ui.app.build_demo()` path as the Space. Missing Modal endpoint secrets fall back to deterministic demo behavior, just like the public app.
+
+## Start
+
+```bash
+.venv/bin/python scripts/local_space_mirror.py
+```
+
+Open:
+
+```text
+http://127.0.0.1:7862
+```
+
+The script prints a small manifest before starting Gradio:
+
+- `app_file` should be `app.py`.
+- default text, vision, and voice backends should be `modal`.
+- endpoint/token fields are only reported as configured or not configured; values are not printed.
+
+## Verify
+
+In another terminal:
+
+```bash
+.venv/bin/python scripts/smoke_local_space_mirror.py
+```
+
+The smoke checks `/config` for the current Dream QA app title, composer CSS markers, debug panel marker, and modal backend defaults.
+
+## Optional Runtime Secrets
+
+If you want the local mirror to call the same private Modal routes as the configured Space, export these in your shell before starting the mirror:
+
+```bash
+export DREAM_CUSTOMS_TEXT_ENDPOINT=...
+export DREAM_CUSTOMS_VISION_ENDPOINT=...
+export DREAM_CUSTOMS_ASR_ENDPOINT=...
+export DREAM_CUSTOMS_HOSTED_TOKEN=...
+```
+
+Do not commit these values, paste them into docs, or include them in screenshots. Without them, the app remains usable through the deterministic fallback route.
+
+## When To Use
+
+Run this before creating or merging a Hugging Face Space PR whenever a change affects:
+
+- Gradio UI layout or CSS.
+- Stepper state.
+- Image, voice, or text input behavior.
+- Debug/runtime panels.
+- Default backend behavior.

dream_customs/ui/app.py

@@ -70,6 +70,8 @@ VOICE_JS = r"""
     }
     button.dataset.bound = "true";
 
+    const messageFor = (key, fallback) => button.dataset[key] || fallback;
+
     const setStatus = (message, mode) => {
       if (status) {
         status.textContent = message;
@@ -94,23 +96,15 @@ VOICE_JS = r"""
     button.addEventListener("click", async () => {
       const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       if (!Recognition) {
-        setStatus("This browser cannot transcribe voice here. You can still type the dream.", "error");
+        setStatus(messageFor("unsupported", "This browser cannot transcribe voice here. You can still type the dream."), "error");
         textarea.focus();
         return;
       }
 
-      try {
-        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
-          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-          stream.getTracks().forEach((track) => track.stop());
-        }
-      } catch (error) {
-        setStatus("Microphone permission was not granted. Allow recording and try again.", "error");
-        return;
-      }
+      setStatus(messageFor("checking", "Checking microphone permission..."), "listening");
 
       const recognition = new Recognition();
-      recognition.lang = "en-US";
+      recognition.lang = button.dataset.language === "zh" ? "zh-CN" : "en-US";
       recognition.interimResults = true;
       recognition.continuous = false;
       recognition.maxAlternatives = 1;
@@ -118,7 +112,7 @@ VOICE_JS = r"""
       let latestTranscript = "";
 
       recognition.onstart = () => {
-        setStatus("Listening. Say the dream fragment when you are ready.", "listening");
+        setStatus(messageFor("listening", "Listening. Say the dream fragment when you are ready."), "listening");
       };
 
       recognition.onresult = (event) => {
@@ -133,17 +127,17 @@ VOICE_JS = r"""
 
       recognition.onerror = (event) => {
         const message = event.error === "not-allowed"
-          ? "Microphone permission was denied. Allow recording and try again."
-          : "I did not catch that. Tap the microphone again if you want to retry.";
+          ? messageFor("permission", "Microphone permission was denied. Allow recording and try again.")
+          : messageFor("empty", "I did not catch that. Tap the microphone again if you want to retry.");
         setStatus(message, "error");
       };
 
       recognition.onend = () => {
         if (latestTranscript) {
           appendTranscript(latestTranscript);
-          setStatus("Added to the dream note.", "done");
+          setStatus(messageFor("done", "Added to the dream note."), "done");
         } else if (button.dataset.mode === "listening") {
-          setStatus("No speech detected. Tap again if you want to retry.", "idle");
+          setStatus(messageFor("empty", "No speech detected. Tap again if you want to retry."), "idle");
         }
       };
 
@@ -151,8 +145,130 @@ VOICE_JS = r"""
     });
   };
 
-  bindVoiceButton();
-  const observer = new MutationObserver(bindVoiceButton);
+  const bindAttachmentButton = () => {
+    const button = document.querySelector(".dc-attach-button");
+    const composer = button?.closest(".dc-composer");
+
+    if (!button || !composer || button.dataset.bound === "true") {
+      return;
+    }
+    button.dataset.bound = "true";
+
+    const localizeImagePopover = () => {
+      const control = composer.querySelector(".dc-attach-control");
+      const popover = composer.querySelector(".dc-image-popover");
+      if (!control || !popover) {
+        return;
+      }
+
+      const copy = {
+        imageLabel: control.dataset.imageLabel || "Image clue",
+        upload: control.dataset.upload || "Upload image",
+        paste: control.dataset.paste || "Paste from Clipboard",
+      };
+      composer.dataset.imageLanguage = control.dataset.language || "en";
+      const sourceButtons = popover.querySelectorAll('[data-testid="source-select"] button');
+      const clipboardSelected = sourceButtons.length > 1
+        && sourceButtons[sourceButtons.length - 1].classList.contains("selected");
+      const primaryCopy = clipboardSelected ? copy.paste : copy.upload;
+
+      const label = popover.querySelector('[data-testid="block-label"]');
+      if (label) {
+        let labelText = label.querySelector(".dc-image-label-copy");
+        if (!labelText) {
+          labelText = document.createElement("span");
+          labelText.className = "dc-image-label-copy";
+          label.appendChild(labelText);
+        }
+        Array.from(label.childNodes).forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = "";
+          }
+        });
+        labelText.textContent = copy.imageLabel;
+      }
+
+      const uploadWrap = popover.querySelector(".upload-container button .wrap");
+      if (uploadWrap) {
+        Array.from(uploadWrap.childNodes).forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = "";
+          }
+        });
+        let uploadText = uploadWrap.querySelector(".dc-image-upload-copy");
+        if (!uploadText) {
+          uploadText = document.createElement("strong");
+          uploadText.className = "dc-image-upload-copy";
+          uploadWrap.appendChild(uploadText);
+        }
+        uploadText.textContent = primaryCopy;
+      }
+
+      const uploadButton = popover.querySelector(".upload-container button");
+      uploadButton?.setAttribute("aria-label", primaryCopy);
+
+      if (sourceButtons[0]) {
+        sourceButtons[0].setAttribute("aria-label", copy.upload);
+      }
+      if (sourceButtons[sourceButtons.length - 1]) {
+        sourceButtons[sourceButtons.length - 1].setAttribute("aria-label", copy.paste);
+      }
+
+      const replaceText = (root) => {
+        Array.from(root.childNodes).forEach((node) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.textContent || "";
+            if (text.includes("Paste from Clipboard") || text.includes("从剪贴板粘贴")) {
+              node.textContent = text.replace("Paste from Clipboard", copy.paste).replace("从剪贴板粘贴", copy.paste);
+            }
+          } else if (node.nodeType === Node.ELEMENT_NODE) {
+            replaceText(node);
+          }
+        });
+      };
+      replaceText(popover);
+    };
+
+    const setOpen = (open) => {
+      localizeImagePopover();
+      composer.classList.toggle("dc-image-open", open);
+      button.setAttribute("aria-expanded", open ? "true" : "false");
+    };
+
+    button.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const shouldOpen = !composer.classList.contains("dc-image-open");
+      setOpen(shouldOpen);
+      if (shouldOpen) {
+        const uploadInput = composer.querySelector(".dc-image-popover input[type='file']");
+        uploadInput?.focus();
+      }
+    });
+
+    composer.addEventListener("click", localizeImagePopover);
+    localizeImagePopover();
+
+    document.addEventListener("click", (event) => {
+      if (!composer.contains(event.target)) {
+        setOpen(false);
+      }
+    });
+
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    });
+  };
+
+  const bindComposerControls = () => {
+    bindVoiceButton();
+    bindAttachmentButton();
+  };
+
+  bindComposerControls();
+  const observer = new MutationObserver(bindComposerControls);
   observer.observe(document.body, { childList: true, subtree: true });
 }
 """
@@ -335,13 +451,20 @@ def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
     active_step = _active_step_for_status(status)
     step_html = []
     for index, label in enumerate(steps, start=1):
-        classes = []
+        classes = ["dc-step"]
         if index < active_step:
             classes.append("is-complete")
         if index == active_step:
             classes.append("is-active")
-        class_attr = f' class="{" ".join(classes)}"' if classes else ""
-        step_html.append(f"<span{class_attr}><strong>{index}</strong>{label}</span>")
+        aria_current = ' aria-current="step"' if index == active_step else ""
+        step_html.append(
+            f'<span class="{" ".join(classes)}"{aria_current}><strong>{index}</strong>{label}</span>'
+        )
+        if index < len(steps):
+            line_classes = ["dc-stepper-line"]
+            if index < active_step:
+                line_classes.append("is-complete")
+            step_html.append(f'<i class="{" ".join(line_classes)}" aria-hidden="true"></i>')
     return f"""
 <header class="dc-hero">
   <div class="dc-hero-top">
@@ -349,7 +472,7 @@ def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
     <div class="dc-brand-lockup">
       <div>
         <h1>{copy['title']}</h1>
-        <p class="dc-brand-subtitle">{copy['brand_subtitle']}</p>
+        <p class="dc-brand-subtitle">{copy['subtitle']}</p>
       </div>
     </div>
     <div class="dc-sun-mark" aria-hidden="true">☀</div>
@@ -374,7 +497,18 @@ def _mic_html(language: str = DEFAULT_LANGUAGE) -> str:
     copy = copy_for(language)
     return f"""
 <div class="dc-mic-control">
-  <button type="button" class="dc-mic-button" aria-label="{escape(copy['mic_idle'])}">
+  <button
+    type="button"
+    class="dc-mic-button"
+    aria-label="{escape(copy['mic_idle'])}"
+    data-language="{escape(language)}"
+    data-checking="{escape('正在请求麦克风权限...' if language == 'zh' else 'Checking microphone permission...')}"
+    data-unsupported="{escape(copy['mic_unsupported'])}"
+    data-permission="{escape(copy['mic_permission'])}"
+    data-listening="{escape(copy['mic_listening'])}"
+    data-done="{escape(copy['mic_done'])}"
+    data-empty="{escape(copy['mic_empty'])}"
+  >
     <span class="dc-mic-glyph" aria-hidden="true"></span>
   </button>
   <div class="dc-mic-status" aria-live="polite">{escape(copy['mic_idle'])}</div>
@@ -382,6 +516,24 @@ def _mic_html(language: str = DEFAULT_LANGUAGE) -> str:
 """.strip()
 
 
+def _attachment_html(language: str = DEFAULT_LANGUAGE) -> str:
+    copy = copy_for(language)
+    label = escape(copy["image_accordion"])
+    return f"""
+<div
+  class="dc-attach-control"
+  data-language="{escape(language)}"
+  data-image-label="{escape(copy['image_label'])}"
+  data-upload="{escape(copy['image_upload'])}"
+  data-paste="{escape(copy['image_paste'])}"
+>
+  <button type="button" class="dc-attach-button" aria-label="{label}" aria-expanded="false">
+    <span aria-hidden="true">+</span>
+  </button>
+</div>
+""".strip()
+
+
 def _field_tip_html(language: str = DEFAULT_LANGUAGE) -> str:
     return f"<p class=\"dc-field-tip\">{escape(copy_for(language)['field_tip'])}</p>"
 
@@ -424,7 +576,7 @@ def build_demo() -> gr.Blocks:
     initial = _load_view(initial_view)
     initial_copy = copy_for(DEFAULT_LANGUAGE)
 
-    with gr.Blocks(css=CSS, title=APP_TITLE) as demo:
+    with gr.Blocks(css=CSS, js=VOICE_JS, title=APP_TITLE) as demo:
         session_state = gr.State(initial_state)
         view_state = gr.State(initial_view)
 
@@ -445,21 +597,23 @@ def build_demo() -> gr.Blocks:
                                 elem_classes=["dc-dream-text"],
                             )
                             mic_html = gr.HTML(_mic_html(DEFAULT_LANGUAGE))
-                            with gr.Accordion(
-                                initial_copy["image_accordion"],
-                                open=False,
-                                elem_classes=["dc-attachment-drawer"],
-                            ) as image_drawer:
-                                image_input = gr.Image(label=initial_copy["image_label"], type="filepath", height=160)
+                            attachment_html = gr.HTML(_attachment_html(DEFAULT_LANGUAGE))
+                            image_input = gr.Image(
+                                label=initial_copy["image_label"],
+                                sources=["upload", "clipboard"],
+                                type="filepath",
+                                height=180,
+                                elem_classes=["dc-image-popover"],
+                            )
                             audio_input = gr.Audio(
                                 label=initial_copy["voice_label"],
-                                sources=["microphone", "upload"],
+                                sources=["upload"],
                                 type="filepath",
                                 format="wav",
                                 elem_classes=["dc-voice-input"],
                                 visible=False,
                             )
-                            field_tip_html = gr.HTML(_field_tip_html(DEFAULT_LANGUAGE))
+                        field_tip_html = gr.HTML(_field_tip_html(DEFAULT_LANGUAGE))
                         with gr.Row(elem_classes=["dc-submit-row"]):
                             example_button = gr.Button(initial_copy["example_button"], variant="secondary")
                             submit_button = gr.Button(initial_copy["submit_button"], variant="primary")
@@ -491,6 +645,13 @@ def build_demo() -> gr.Blocks:
                             show_copy_button=True,
                             elem_classes=["dc-hidden-text"],
                         )
+                    with gr.Accordion(initial_copy["debug_title"], open=False, elem_classes=["dc-debug-panel"]) as debug_panel:
+                        debug_help_html = gr.HTML(_debug_help_html(DEFAULT_LANGUAGE))
+                        debug_json = gr.Code(
+                            label=initial_copy["debug_state_label"],
+                            value=json.dumps(initial.get("debug", {}), ensure_ascii=False, indent=2),
+                            language="json",
+                        )
 
                 with gr.Column(elem_classes=["dc-side-panel"]):
                     language = gr.Radio(
@@ -503,6 +664,27 @@ def build_demo() -> gr.Blocks:
                     side_stamp_html = gr.HTML(_side_stamp_html(DEFAULT_LANGUAGE))
                     with gr.Accordion("Advanced", open=False, elem_classes=["dc-dev"]):
                         dev_help_html = gr.HTML(_dev_help_html(DEFAULT_LANGUAGE))
+                        with gr.Group(elem_classes=["dc-dev-tuning"]):
+                            text_temperature = gr.Number(
+                                label="Text temperature",
+                                value=DEFAULT_TEXT_TEMPERATURE,
+                                precision=2,
+                            )
+                            vision_temperature = gr.Number(
+                                label="Image temperature",
+                                value=DEFAULT_VISION_TEMPERATURE,
+                                precision=2,
+                            )
+                            text_max_tokens = gr.Number(
+                                label="Text max tokens",
+                                value=DEFAULT_TEXT_MAX_TOKENS,
+                                precision=0,
+                            )
+                            vision_max_tokens = gr.Number(
+                                label="Image max tokens",
+                                value=DEFAULT_VISION_MAX_TOKENS,
+                                precision=0,
+                            )
                         text_backend = gr.Dropdown(
                             label="Text generation",
                             choices=[
@@ -570,41 +752,6 @@ def build_demo() -> gr.Blocks:
                                 value=DEFAULT_ASR_LATENCY_BUDGET_MS,
                                 precision=0,
                             )
-                            text_temperature = gr.Slider(
-                                label="Text temperature",
-                                minimum=0,
-                                maximum=0.7,
-                                step=0.05,
-                                value=DEFAULT_TEXT_TEMPERATURE,
-                            )
-                            vision_temperature = gr.Slider(
-                                label="Image temperature",
-                                minimum=0,
-                                maximum=0.7,
-                                step=0.05,
-                                value=DEFAULT_VISION_TEMPERATURE,
-                            )
-                            text_max_tokens = gr.Slider(
-                                label="Text max tokens",
-                                minimum=64,
-                                maximum=1200,
-                                step=1,
-                                value=DEFAULT_TEXT_MAX_TOKENS,
-                            )
-                            vision_max_tokens = gr.Slider(
-                                label="Image max tokens",
-                                minimum=64,
-                                maximum=800,
-                                step=1,
-                                value=DEFAULT_VISION_MAX_TOKENS,
-                            )
-            with gr.Accordion(initial_copy["debug_title"], open=False, elem_classes=["dc-debug-panel"]) as debug_panel:
-                debug_help_html = gr.HTML(_debug_help_html(DEFAULT_LANGUAGE))
-                debug_json = gr.Code(
-                    label=initial_copy["debug_state_label"],
-                    value=json.dumps(initial.get("debug", {}), ensure_ascii=False, indent=2),
-                    language="json",
-                )
 
         outputs = [
             session_state,
@@ -688,7 +835,7 @@ def build_demo() -> gr.Blocks:
                 _section_title_html(1, copy["dream_label"]),
                 gr.update(label=copy["dream_label"], placeholder=copy["dream_placeholder"]),
                 _mic_html(selected_language),
-                gr.update(label=copy["image_accordion"]),
+                _attachment_html(selected_language),
                 gr.update(label=copy["image_label"]),
                 _field_tip_html(selected_language),
                 gr.update(value=copy["example_button"]),
@@ -722,7 +869,7 @@ def build_demo() -> gr.Blocks:
                 dream_section_html,
                 dream_text,
                 mic_html,
-                image_drawer,
+                attachment_html,
                 image_input,
                 field_tip_html,
                 example_button,

dream_customs/ui/copy.py

@@ -33,6 +33,8 @@ APP_COPY = {
         ),
         "image_accordion": "＋",
         "image_label": "Image clue",
+        "image_upload": "Upload image",
+        "image_paste": "Paste from Clipboard",
         "question_kicker": "Question",
         "question_title": "What do you most want to understand in this dream?",
         "question_body": "Answer in one or two lines, or skip and get a Today Tip from the clues already here.",
@@ -87,6 +89,8 @@ APP_COPY = {
         ),
         "image_accordion": "＋",
         "image_label": "图片线索",
+        "image_upload": "上传图片",
+        "image_paste": "从剪贴板粘贴",
         "question_kicker": "追问",
         "question_title": "在这个梦里，你最想理解的是什么呢？",
         "question_body": "回答一两句就好；也可以跳过，直接得到一个基于现有线索的今日小 Tips。",

dream_customs/ui/styles.py

@@ -262,7 +262,7 @@ body,
 }
 
 .dc-workspace-grid {
-  align-items: stretch !important;
+  align-items: start !important;
   display: grid !important;
   gap: 18px !important;
   grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
@@ -939,6 +939,11 @@ a.built-with[href*="gradio.app"] {
   padding: 10px !important;
 }
 
+.dc-flow-column .dc-debug-panel {
+  align-self: stretch;
+  width: 100%;
+}
+
 .dc-debug-panel > button {
   color: var(--dc-ink) !important;
   font-size: 0.92rem !important;
@@ -1199,33 +1204,40 @@ body,
 }
 
 .dc-stepper {
-  align-items: start;
-  display: grid;
+  align-items: flex-start;
+  display: flex;
   gap: 0;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
   margin: clamp(28px, 5vw, 58px) auto 0;
   max-width: 920px;
   position: relative;
 }
 
-.dc-stepper::before {
+.dc-stepper-line {
   background: #9cadb8;
-  content: "";
+  border-radius: 999px;
+  display: block;
+  flex: 1 1 70px;
   height: 3px;
-  left: 12%;
-  position: absolute;
-  right: 12%;
-  top: 25px;
+  margin-top: clamp(24px, 3.4vw, 35px);
+  min-width: 34px;
+  transition: background-color 180ms ease, box-shadow 180ms ease;
+}
+
+.dc-stepper-line.is-complete {
+  background: var(--dqa-sage);
+  box-shadow: 0 0 0 1px rgba(79, 138, 88, 0.14);
 }
 
 .dc-stepper span {
   color: #667989;
   display: grid;
+  flex: 0 0 clamp(72px, 13vw, 128px);
   font-size: clamp(1rem, 2.3vw, 1.45rem);
   gap: 10px;
   justify-items: center;
+  min-width: 0;
   position: relative;
-  z-index: 1;
+  text-align: center;
 }
 
 .dc-stepper strong {
@@ -1514,6 +1526,699 @@ button.secondary {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.dc-stage .dc-composer {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  min-height: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  position: relative;
+}
+
+.dc-stage > .styler {
+  background: transparent !important;
+}
+
+.dc-stage .dc-composer .form {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+.dc-stage .dc-composer .dc-section-title {
+  color: var(--dqa-ink) !important;
+  margin: 0 0 14px;
+}
+
+.dc-stage .dc-composer .dc-section-title strong {
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel .dc-section-title,
+.dc-side-panel .dc-section-title strong {
+  color: var(--dqa-ink) !important;
+  opacity: 1 !important;
+}
+
+.dc-shell,
+.dc-stage,
+.dc-side-panel,
+.dc-dev,
+.dc-debug-panel {
+  color-scheme: light;
+}
+
+.dc-side-panel {
+  background: rgba(255, 253, 248, 0.96) !important;
+  border-color: var(--dqa-line) !important;
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel > .styler,
+.dc-side-panel .form,
+.dc-side-panel .block,
+.dc-side-panel .wrap,
+.dc-side-panel .container,
+.dc-side-panel .input-container {
+  background: transparent !important;
+  border-color: rgba(217, 226, 220, 0.88) !important;
+  box-shadow: none !important;
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel .block:has(input[type="radio"]),
+.dc-side-panel .wrap:has(input[type="radio"]) {
+  background: transparent !important;
+}
+
+.dc-side-panel label,
+.dc-side-panel [data-testid="block-label"],
+.dc-side-panel [data-testid="block-info"] {
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel label:has(input[type="radio"]),
+.dc-side-panel .wrap label {
+  background: rgba(255, 253, 248, 0.96) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 12px !important;
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel label:has(input[type="radio"]:checked) {
+  background: var(--dqa-sage-soft) !important;
+  border-color: rgba(79, 138, 88, 0.42) !important;
+  color: var(--dqa-sage-deep) !important;
+}
+
+.dc-side-panel input,
+.dc-side-panel select,
+.dc-side-panel button,
+.dc-side-panel .dropdown,
+.dc-side-panel .svelte-1gfkn6j,
+.dc-side-panel .svelte-1hfxrpf,
+.dc-side-panel .svelte-1b6s6s {
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel select,
+.dc-side-panel .wrap:has(select),
+.dc-side-panel .container:has(select),
+.dc-side-panel [role="listbox"],
+.dc-side-panel [aria-haspopup="listbox"] {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border-color: var(--dqa-line) !important;
+  border-radius: 12px !important;
+  color: var(--dqa-ink) !important;
+}
+
+.dc-side-panel svg,
+.dc-side-panel img {
+  color: var(--dqa-muted) !important;
+  opacity: 0.86;
+}
+
+.dc-side-panel .dc-dev,
+.dc-side-panel .dc-dev > .label-wrap,
+.dc-side-panel .dc-dev > button,
+.dc-side-panel button[aria-expanded] {
+  background: rgba(255, 253, 248, 0.96) !important;
+  border-color: var(--dqa-line) !important;
+  color: var(--dqa-muted) !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 16px !important;
+  box-shadow: none !important;
+  padding: 20px 22px 18px !important;
+}
+
+.dc-side-panel .form:has(input[role="listbox"]) {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) .wrap,
+.dc-side-panel .block:has(input[role="listbox"]) .container,
+.dc-side-panel .block:has(input[role="listbox"]) .wrap-inner,
+.dc-side-panel .block:has(input[role="listbox"]) .secondary-wrap,
+.dc-side-panel .block:has(input[role="listbox"]) .input-container,
+.dc-side-panel .block:has(input[role="listbox"]) input[role="listbox"] {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) .wrap {
+  min-height: 34px !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) input[role="listbox"] {
+  font-size: 1rem !important;
+  min-height: 30px !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) * {
+  --input-border-width: 0px;
+  --block-border-width: 0px;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) .wrap,
+.dc-side-panel .block:has(input[role="listbox"]) .container,
+.dc-side-panel .block:has(input[role="listbox"]) .wrap-inner,
+.dc-side-panel .block:has(input[role="listbox"]) .secondary-wrap,
+.dc-side-panel .block:has(input[role="listbox"]) .input-container,
+.dc-side-panel .block:has(input[role="listbox"]) input[role="listbox"] {
+  border: 0 !important;
+  border-color: transparent !important;
+  outline: 0 !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) .icon-wrap {
+  pointer-events: none !important;
+  transition: color 160ms ease, transform 160ms ease;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]) .dropdown-arrow {
+  color: var(--dqa-muted) !important;
+  transition: color 160ms ease, transform 160ms ease;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+.dc-side-panel .block:has(> .container input[role="listbox"][aria-expanded="true"]) > .container .dropdown-arrow {
+  color: var(--dqa-sage-deep) !important;
+  transform: rotate(180deg) !important;
+}
+
+.dc-side-panel .block:has(input[role="listbox"]:hover) .dropdown-arrow,
+.dc-side-panel .block:has(input[role="listbox"]:focus) .dropdown-arrow,
+.dc-side-panel .block:has(input[role="listbox"]) .icon-wrap:hover .dropdown-arrow {
+  color: var(--dqa-sage-deep) !important;
+}
+
+.dc-side-panel .dc-dev {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 20px !important;
+  box-shadow: none !important;
+  color: var(--dqa-ink) !important;
+  padding: 14px !important;
+}
+
+.dc-side-panel .dc-dev > button {
+  align-items: center !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 14px !important;
+  box-shadow: none !important;
+  color: var(--dqa-ink) !important;
+  font-size: 1rem !important;
+  font-weight: 680 !important;
+  min-height: 46px !important;
+  padding: 0 4px !important;
+}
+
+.dc-side-panel .dc-dev > button:hover,
+.dc-side-panel .dc-dev > button[aria-expanded="true"] {
+  background: var(--dqa-sage-soft) !important;
+  color: var(--dqa-sage-deep) !important;
+}
+
+.dc-side-panel .dc-dev-help {
+  color: #60717a !important;
+  display: grid !important;
+  font-size: 0.92rem !important;
+  gap: 8px !important;
+  line-height: 1.5 !important;
+  margin: 8px 0 14px !important;
+}
+
+.dc-side-panel .dc-dev-help strong {
+  color: var(--dqa-ink) !important;
+  font-size: 0.94rem !important;
+  font-weight: 760 !important;
+  line-height: 1.42 !important;
+}
+
+.dc-side-panel .dc-dev-help span {
+  color: #60717a !important;
+  opacity: 1 !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 14px !important;
+  box-shadow: none !important;
+  margin: 8px 0 !important;
+  padding: 12px 14px !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) label,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) [data-testid="block-label"] {
+  color: var(--dqa-ink) !important;
+  font-size: 0.84rem !important;
+  font-weight: 680 !important;
+  margin-bottom: 8px !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .wrap,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .container,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .wrap-inner,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .secondary-wrap,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .input-container,
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) input[role="listbox"] {
+  min-height: 32px !important;
+  padding: 0 !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) input[role="listbox"] {
+  color: var(--dqa-ink) !important;
+  font-size: 0.94rem !important;
+  font-weight: 560 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  width: 100% !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .wrap-inner {
+  align-items: center !important;
+  display: flex !important;
+  gap: 8px !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .secondary-wrap {
+  flex: 1 1 auto !important;
+  max-width: calc(100% - 38px) !important;
+  min-width: 0 !important;
+  overflow: hidden !important;
+}
+
+.dc-side-panel .dc-dev .block:has(input[role="listbox"]) .icon-wrap {
+  flex: 0 0 28px !important;
+  height: 28px !important;
+  width: 28px !important;
+}
+
+.dc-side-panel .dc-dev-tuning {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 16px !important;
+  box-shadow: none !important;
+  display: grid !important;
+  gap: 0 !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 6px 0 12px !important;
+  overflow: hidden !important;
+  padding: 6px !important;
+}
+
+.dc-side-panel .dc-dev-tuning > .styler,
+.dc-side-panel .dc-dev-tuning .form {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+  display: grid !important;
+  gap: 6px !important;
+  grid-column: 1 / -1 !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  width: 100% !important;
+}
+
+.dc-side-panel .dc-dev-tuning .block {
+  background: rgba(255, 255, 255, 0.58) !important;
+  border: 1px solid rgba(217, 226, 220, 0.72) !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  min-width: 0 !important;
+  padding: 9px 10px !important;
+}
+
+.dc-side-panel .dc-dev-tuning .wrap.hide {
+  display: none !important;
+  height: 0 !important;
+  min-height: 0 !important;
+}
+
+.dc-side-panel .dc-dev-tuning .container {
+  min-height: 0 !important;
+  padding: 0 !important;
+}
+
+.dc-side-panel .dc-dev-tuning label,
+.dc-side-panel .dc-dev-tuning [data-testid="block-label"] {
+  color: var(--dqa-muted) !important;
+  font-size: 0.74rem !important;
+  font-weight: 700 !important;
+  line-height: 1.25 !important;
+  margin-bottom: 0 !important;
+}
+
+.dc-side-panel .dc-dev-tuning input {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  color: var(--dqa-ink) !important;
+  font-size: 0.92rem !important;
+  font-weight: 700 !important;
+  min-height: 30px !important;
+  padding: 0 !important;
+}
+
+.dc-side-panel .dc-dev-advanced {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 14px !important;
+  box-shadow: none !important;
+  margin-top: 12px !important;
+}
+
+.dc-side-panel .dc-dev-advanced > button {
+  color: var(--dqa-ink) !important;
+  font-size: 0.94rem !important;
+  font-weight: 650 !important;
+  min-height: 42px !important;
+  padding: 0 12px !important;
+}
+
+.gradio-container [role="listbox"],
+.gradio-container .options,
+.gradio-container .dropdown-options {
+  background: rgba(255, 253, 248, 0.99) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 16px 38px rgba(30, 42, 48, 0.12) !important;
+  color: var(--dqa-ink) !important;
+  overflow: hidden !important;
+}
+
+.gradio-container [role="option"],
+.gradio-container .option,
+.gradio-container .item {
+  background: transparent !important;
+  color: var(--dqa-ink) !important;
+}
+
+.gradio-container [role="option"]:hover,
+.gradio-container [role="option"][aria-selected="true"],
+.gradio-container [role="option"].selected,
+.gradio-container .option:hover,
+.gradio-container .option.selected,
+.gradio-container .item:hover,
+.gradio-container .item.selected {
+  background: var(--dqa-sage-soft) !important;
+  color: var(--dqa-ink) !important;
+}
+
+.gradio-container [role="option"]:focus,
+.gradio-container .option:focus,
+.gradio-container .item:focus {
+  background: rgba(233, 243, 231, 0.78) !important;
+  color: var(--dqa-ink) !important;
+  outline: 2px solid rgba(79, 138, 88, 0.34) !important;
+  outline-offset: -2px;
+}
+
+.dc-stage .dc-dream-text,
+.dc-stage .dc-dream-text .wrap,
+.dc-stage .dc-dream-text .container,
+.dc-stage .dc-dream-text .input-container,
+.dc-stage .dc-dream-text .form,
+.dc-stage .dc-dream-text > div {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+}
+
+.dc-stage .dc-dream-text [data-testid="block-label"],
+.dc-stage .dc-dream-text [data-testid="block-info"],
+.dc-stage .dc-dream-text .block-label {
+  display: none !important;
+}
+
+.dc-stage .dc-dream-text textarea {
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 30px !important;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.82),
+    0 18px 38px rgba(30, 42, 48, 0.1) !important;
+  color: var(--dqa-ink) !important;
+  min-height: 320px !important;
+  overflow: hidden !important;
+  padding: 28px 96px 82px 78px !important;
+  resize: none !important;
+}
+
+.dc-attach-control,
+.dc-mic-control {
+  bottom: 24px !important;
+  position: absolute;
+  z-index: 18;
+}
+
+.dc-attach-control {
+  left: 24px;
+}
+
+.dc-mic-control {
+  display: block !important;
+  height: 52px !important;
+  right: 24px !important;
+  width: 52px !important;
+}
+
+.dc-stage .dc-attach-control .dc-attach-button,
+.dc-stage .dc-mic-control .dc-mic-button {
+  align-items: center !important;
+  background: rgba(255, 253, 248, 0.98) !important;
+  border: 1px solid rgba(7, 60, 67, 0.22) !important;
+  border-radius: 999px !important;
+  box-sizing: border-box !important;
+  box-shadow: 0 10px 22px rgba(7, 60, 67, 0.12) !important;
+  color: var(--dc-teal-dark) !important;
+  display: inline-flex !important;
+  height: 52px !important;
+  justify-content: center !important;
+  line-height: 1 !important;
+  max-height: 52px !important;
+  min-height: 52px !important;
+  padding: 0 !important;
+  width: 52px !important;
+}
+
+.dc-stage .dc-attach-control .dc-attach-button {
+  cursor: pointer;
+  font-size: 1.6rem !important;
+  font-weight: 720 !important;
+  opacity: 1 !important;
+}
+
+.dc-stage .dc-attach-control .dc-attach-button span {
+  color: var(--dc-teal-dark) !important;
+  opacity: 1 !important;
+}
+
+.dc-stage .dc-attach-control .dc-attach-button:hover,
+.dc-stage .dc-attach-control .dc-attach-button[aria-expanded="true"],
+.dc-stage .dc-mic-control .dc-mic-button:hover {
+  border-color: rgba(234, 107, 44, 0.42) !important;
+  color: var(--dc-coral-dark) !important;
+  transform: translateY(-1px);
+}
+
+.dc-stage .dc-mic-control .dc-mic-status {
+  bottom: 62px;
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+}
+
+.dc-image-popover {
+  bottom: 88px;
+  background: rgba(255, 253, 248, 0.99) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 26px !important;
+  border-style: solid !important;
+  box-shadow: 0 18px 42px rgba(30, 42, 48, 0.16) !important;
+  color: var(--dqa-ink) !important;
+  height: 220px !important;
+  left: 24px;
+  margin: 0 !important;
+  max-width: calc(100% - 48px);
+  opacity: 0;
+  overflow: hidden !important;
+  pointer-events: none;
+  position: absolute !important;
+  transform: translateY(8px) scale(0.98);
+  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
+  visibility: hidden;
+  width: min(420px, calc(100% - 48px));
+  z-index: 20;
+}
+
+.dc-composer.dc-image-open .dc-image-popover {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  visibility: visible;
+}
+
+.dc-image-popover .wrap,
+.dc-image-popover .container,
+.dc-image-popover .upload-container,
+.dc-image-popover .image-container,
+.dc-image-popover [data-testid="image"],
+.dc-image-popover [data-testid="file-upload"] {
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.dc-image-popover [data-testid="block-label"] {
+  align-items: center !important;
+  background: rgba(238, 247, 236, 0.96) !important;
+  border: 1px solid rgba(88, 142, 94, 0.2) !important;
+  border-radius: 999px !important;
+  box-shadow: none !important;
+  color: var(--dqa-sage-deep) !important;
+  display: inline-flex !important;
+  font-family: inherit !important;
+  font-size: 0.84rem !important;
+  font-weight: 720 !important;
+  gap: 7px !important;
+  left: 16px !important;
+  line-height: 1 !important;
+  padding: 8px 12px !important;
+  top: 14px !important;
+}
+
+.dc-image-popover [data-testid="block-label"] svg {
+  color: var(--dqa-sage-deep) !important;
+  height: 16px !important;
+  width: 16px !important;
+}
+
+.dc-image-popover .image-container {
+  height: 100% !important;
+  overflow: hidden !important;
+}
+
+.dc-image-popover .upload-container {
+  height: 100% !important;
+  padding: 18px 18px 64px !important;
+}
+
+.dc-image-popover .upload-container button {
+  align-items: center !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-radius: 22px !important;
+  box-shadow: none !important;
+  color: var(--dqa-ink) !important;
+  display: flex !important;
+  justify-content: center !important;
+  min-height: 130px !important;
+  width: 100% !important;
+}
+
+.dc-image-popover .upload-container button:hover {
+  background: rgba(238, 247, 236, 0.56) !important;
+}
+
+.dc-image-popover .upload-container .wrap {
+  align-items: center !important;
+  color: var(--dqa-ink) !important;
+  display: flex !important;
+  flex-direction: column !important;
+  font-size: 0 !important;
+  gap: 12px !important;
+  justify-content: center !important;
+}
+
+.dc-image-popover .upload-container .icon-wrap,
+.dc-image-popover .upload-container svg {
+  color: var(--dqa-sage-deep) !important;
+  height: 32px !important;
+  width: 32px !important;
+}
+
+.dc-image-popover .upload-container .or {
+  display: none !important;
+}
+
+.dc-image-upload-copy {
+  color: var(--dqa-ink) !important;
+  display: block !important;
+  font-size: 1rem !important;
+  font-weight: 760 !important;
+  letter-spacing: 0 !important;
+}
+
+.dc-image-popover [data-testid="source-select"] {
+  align-items: center !important;
+  background: transparent !important;
+  border: 0 !important;
+  border-top: 0 !important;
+  bottom: 16px !important;
+  box-shadow: none !important;
+  display: flex !important;
+  gap: 12px !important;
+  justify-content: center !important;
+  left: 0 !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+}
+
+.dc-image-popover [data-testid="source-select"]::before,
+.dc-image-popover [data-testid="source-select"]::after {
+  display: none !important;
+}
+
+.dc-image-popover [data-testid="source-select"] button {
+  align-items: center !important;
+  background: rgba(255, 253, 248, 0.92) !important;
+  border: 1px solid var(--dqa-line) !important;
+  border-radius: 999px !important;
+  box-shadow: none !important;
+  color: var(--dqa-muted) !important;
+  display: inline-flex !important;
+  height: 42px !important;
+  justify-content: center !important;
+  min-height: 42px !important;
+  padding: 0 !important;
+  width: 42px !important;
+}
+
+.dc-image-popover [data-testid="source-select"] button:hover,
+.dc-image-popover [data-testid="source-select"] button.selected {
+  background: var(--dqa-sage-soft) !important;
+  border-color: rgba(88, 142, 94, 0.26) !important;
+  color: var(--dqa-sage-deep) !important;
+}
+
+.dc-image-popover [aria-label="Capture from camera"] {
+  display: none !important;
+}
+
 @media (max-width: 900px) {
   .dc-shell {
     padding: 0;
@@ -1544,10 +2249,10 @@ button.secondary {
     margin-top: 36px;
   }
 
-  .dc-stepper::before {
-    left: 10%;
-    right: 10%;
-    top: 22px;
+  .dc-stepper-line {
+    flex-basis: 26px;
+    margin-top: 24px;
+    min-width: 20px;
   }
 
   .dc-stepper strong {
@@ -1573,11 +2278,23 @@ button.secondary {
     right: 20px;
   }
 
-  .dc-attachment-drawer {
+  .dc-attach-control {
     bottom: 22px;
     left: 20px;
   }
 
+  .dc-stage .dc-dream-text textarea {
+    border-radius: 24px !important;
+    min-height: 300px !important;
+    padding: 24px 78px 78px 70px !important;
+  }
+
+  .dc-image-popover {
+    bottom: 84px;
+    left: 20px;
+    width: min(360px, calc(100% - 40px));
+  }
+
   .dqa-tip-page {
     border-radius: 0;
   }

modal_backend/dream_customs_modal.py

@@ -35,7 +35,7 @@ health_image = (
 
 image = (
     modal.Image.debian_slim(python_version="3.11")
-    .apt_install("git")
+    .apt_install("ffmpeg", "git")
     .pip_install(
         "accelerate",
         "einops",

scripts/local_space_mirror.py

@@ -0,0 +1,142 @@
+#!/usr/bin/env python3
+"""Run the Dream QA Hugging Face Space app locally for pre-merge review."""
+
+from __future__ import annotations
+
+import argparse
+import json
+import os
+import sys
+from pathlib import Path
+
+
+ROOT = Path(__file__).resolve().parents[1]
+SPACE_ID = "build-small-hackathon/dream-customs"
+DEFAULT_RUNTIME_ENV_JSON = Path("/tmp/dream-customs-runtime.json")
+RUNTIME_ENV_KEYS = {
+    "DREAM_CUSTOMS_TEXT_ENDPOINT",
+    "DREAM_CUSTOMS_VISION_ENDPOINT",
+    "DREAM_CUSTOMS_ASR_ENDPOINT",
+    "DREAM_CUSTOMS_HOSTED_TOKEN",
+}
+
+
+def _repo_root_on_path() -> None:
+    root = str(ROOT)
+    if root not in sys.path:
+        sys.path.insert(0, root)
+
+
+def _configured_env() -> dict:
+    return {
+        "space_id": os.getenv("SPACE_ID", SPACE_ID),
+        "text_endpoint_configured": bool(os.getenv("DREAM_CUSTOMS_TEXT_ENDPOINT", "").strip()),
+        "vision_endpoint_configured": bool(os.getenv("DREAM_CUSTOMS_VISION_ENDPOINT", "").strip()),
+        "asr_endpoint_configured": bool(os.getenv("DREAM_CUSTOMS_ASR_ENDPOINT", "").strip()),
+        "hosted_token_configured": bool(os.getenv("DREAM_CUSTOMS_HOSTED_TOKEN", "").strip()),
+    }
+
+
+def load_runtime_env_json(path: Path) -> dict:
+    if not path.exists():
+        return {"loaded": False, "path": str(path), "reason": "missing"}
+    try:
+        data = json.loads(path.read_text(encoding="utf-8"))
+    except (OSError, json.JSONDecodeError) as exc:
+        return {"loaded": False, "path": str(path), "reason": exc.__class__.__name__}
+
+    loaded_keys = []
+    for key in sorted(RUNTIME_ENV_KEYS):
+        value = str(data.get(key, "")).strip()
+        if value:
+            os.environ[key] = value
+            loaded_keys.append(key)
+    return {
+        "loaded": bool(loaded_keys),
+        "path": str(path),
+        "configured_keys": loaded_keys,
+    }
+
+
+def mirror_manifest(host: str, port: int) -> dict:
+    _repo_root_on_path()
+    from dream_customs.defaults import DEFAULT_ASR_BACKEND, DEFAULT_TEXT_BACKEND, DEFAULT_VISION_BACKEND
+
+    return {
+        "mode": "local-space-mirror",
+        "space_id": SPACE_ID,
+        "url": f"http://{host}:{port}",
+        "app_file": "app.py",
+        "default_backends": {
+            "text": DEFAULT_TEXT_BACKEND,
+            "vision": DEFAULT_VISION_BACKEND,
+            "asr": DEFAULT_ASR_BACKEND,
+        },
+        "env": _configured_env(),
+        "notes": [
+            "Uses the same app.py/build_demo path as the Hugging Face Space.",
+            "Missing hosted endpoint secrets fall back to deterministic demo behavior.",
+            "Do not print or store endpoint URLs or tokens in logs.",
+        ],
+    }
+
+
+def parse_args(argv: list[str] | None = None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("--host", default=os.getenv("GRADIO_SERVER_NAME", "127.0.0.1"))
+    parser.add_argument("--port", type=int, default=int(os.getenv("GRADIO_SERVER_PORT", "7862")))
+    parser.add_argument("--share", action="store_true", help="Create a public Gradio share link.")
+    parser.add_argument(
+        "--manifest-only",
+        action="store_true",
+        help="Print the local mirror manifest without starting Gradio.",
+    )
+    parser.add_argument(
+        "--runtime-env-json",
+        type=Path,
+        default=Path(os.getenv("DREAM_CUSTOMS_RUNTIME_ENV_JSON", DEFAULT_RUNTIME_ENV_JSON)),
+        help=(
+            "Load hosted endpoint/token secrets from a local JSON file before launching. "
+            "Only configuration booleans are printed."
+        ),
+    )
+    parser.add_argument(
+        "--no-runtime-env-json",
+        action="store_true",
+        help="Do not auto-load the default local runtime env JSON.",
+    )
+    return parser.parse_args(argv)
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(argv)
+    os.environ["GRADIO_SERVER_NAME"] = args.host
+    os.environ["GRADIO_SERVER_PORT"] = str(args.port)
+    os.environ.setdefault("SPACE_ID", SPACE_ID)
+    os.environ.setdefault("GRADIO_ANALYTICS_ENABLED", "False")
+
+    runtime_env = {"loaded": False, "reason": "disabled"}
+    if not args.no_runtime_env_json:
+        runtime_env = load_runtime_env_json(args.runtime_env_json)
+
+    manifest = mirror_manifest(args.host, args.port)
+    manifest["runtime_env_json"] = runtime_env
+    print(json.dumps(manifest, ensure_ascii=False, indent=2), flush=True)
+    if args.manifest_only:
+        return 0
+
+    _repo_root_on_path()
+    from app import demo
+
+    demo.launch(
+        server_name=args.host,
+        server_port=args.port,
+        show_api=False,
+        show_error=True,
+        share=args.share,
+    )
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

scripts/smoke_local_space_mirror.py

@@ -0,0 +1,105 @@
+#!/usr/bin/env python3
+"""Verify a running local Dream QA Space mirror."""
+
+from __future__ import annotations
+
+import argparse
+import json
+from typing import Any
+from urllib.request import urlopen
+
+
+REQUIRED_CSS_MARKERS = [
+    ".dc-stepper",
+    ".dc-mic-button",
+    ".dc-attach-button",
+    ".dc-image-popover",
+    ".dc-debug-panel",
+]
+
+REQUIRED_LABELS = [
+    "Dream note",
+    "Language",
+    "Text generation",
+    "Image understanding",
+    "Voice input",
+    "Runtime state",
+]
+
+
+def _component_labels(config: dict[str, Any]) -> set[str]:
+    labels = set()
+    for component in config.get("components", []):
+        props = component.get("props") or {}
+        label = props.get("label")
+        if isinstance(label, str):
+            labels.add(label)
+    return labels
+
+
+def _component_values(config: dict[str, Any]) -> dict[str, Any]:
+    values = {}
+    for component in config.get("components", []):
+        props = component.get("props") or {}
+        label = props.get("label")
+        if isinstance(label, str):
+            values[label] = props.get("value")
+    return values
+
+
+def inspect_config(config: dict[str, Any]) -> dict[str, Any]:
+    css = config.get("css") or ""
+    labels = _component_labels(config)
+    values = _component_values(config)
+    missing_css = [marker for marker in REQUIRED_CSS_MARKERS if marker not in css]
+    missing_labels = [label for label in REQUIRED_LABELS if label not in labels]
+    backend_defaults = {
+        "Text generation": values.get("Text generation"),
+        "Image understanding": values.get("Image understanding"),
+        "Voice input": values.get("Voice input"),
+    }
+    backend_failures = {
+        label: value for label, value in backend_defaults.items() if value != "modal"
+    }
+    title = config.get("title")
+    failures = {}
+    if title != "Dream QA":
+        failures["title"] = title
+    if missing_css:
+        failures["missing_css"] = missing_css
+    if missing_labels:
+        failures["missing_labels"] = missing_labels
+    if backend_failures:
+        failures["backend_defaults"] = backend_failures
+    return {
+        "title": title,
+        "component_count": len(config.get("components", [])),
+        "backend_defaults": backend_defaults,
+        "missing_css": missing_css,
+        "missing_labels": missing_labels,
+        "passes": not failures,
+        "failures": failures,
+    }
+
+
+def fetch_config(base_url: str, timeout: float = 20.0) -> dict[str, Any]:
+    with urlopen(f"{base_url.rstrip('/')}/config", timeout=timeout) as response:
+        return json.load(response)
+
+
+def parse_args(argv: list[str] | None = None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("--url", default="http://127.0.0.1:7862")
+    parser.add_argument("--timeout", type=float, default=20.0)
+    return parser.parse_args(argv)
+
+
+def main(argv: list[str] | None = None) -> int:
+    args = parse_args(argv)
+    result = inspect_config(fetch_config(args.url, timeout=args.timeout))
+    print(json.dumps(result, ensure_ascii=False, indent=2))
+    return 0 if result["passes"] else 1
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

tests/test_local_space_mirror.py

@@ -0,0 +1,98 @@
+import json
+
+from scripts.local_space_mirror import load_runtime_env_json, mirror_manifest
+from scripts.smoke_local_space_mirror import inspect_config
+
+
+def test_local_space_mirror_manifest_matches_space_entrypoint():
+    manifest = mirror_manifest("127.0.0.1", 7862)
+
+    assert manifest["mode"] == "local-space-mirror"
+    assert manifest["space_id"] == "build-small-hackathon/dream-customs"
+    assert manifest["app_file"] == "app.py"
+    assert manifest["url"] == "http://127.0.0.1:7862"
+    assert manifest["default_backends"] == {
+        "text": "modal",
+        "vision": "modal",
+        "asr": "modal",
+    }
+    assert manifest["env"]["text_endpoint_configured"] is False
+    assert manifest["env"]["vision_endpoint_configured"] is False
+    assert manifest["env"]["asr_endpoint_configured"] is False
+    assert manifest["env"]["hosted_token_configured"] is False
+    serialized_env = json.dumps(manifest["env"]).lower()
+    assert "https://" not in serialized_env
+    assert "secret" not in serialized_env
+
+
+def test_local_space_mirror_loads_runtime_env_json_without_printing_values(tmp_path, monkeypatch):
+    for key in [
+        "DREAM_CUSTOMS_TEXT_ENDPOINT",
+        "DREAM_CUSTOMS_VISION_ENDPOINT",
+        "DREAM_CUSTOMS_ASR_ENDPOINT",
+        "DREAM_CUSTOMS_HOSTED_TOKEN",
+    ]:
+        monkeypatch.delenv(key, raising=False)
+    runtime_json = tmp_path / "runtime.json"
+    runtime_json.write_text(
+        json.dumps(
+            {
+                "DREAM_CUSTOMS_TEXT_ENDPOINT": "https://example.test/text",
+                "DREAM_CUSTOMS_VISION_ENDPOINT": "https://example.test/vision",
+                "DREAM_CUSTOMS_ASR_ENDPOINT": "https://example.test/asr",
+                "DREAM_CUSTOMS_HOSTED_TOKEN": "super-secret-token",
+                "UNRELATED": "ignored",
+            }
+        ),
+        encoding="utf-8",
+    )
+
+    load_result = load_runtime_env_json(runtime_json)
+    manifest = mirror_manifest("127.0.0.1", 7862)
+
+    assert load_result["loaded"] is True
+    assert "UNRELATED" not in load_result["configured_keys"]
+    assert manifest["env"]["text_endpoint_configured"] is True
+    assert manifest["env"]["vision_endpoint_configured"] is True
+    assert manifest["env"]["asr_endpoint_configured"] is True
+    assert manifest["env"]["hosted_token_configured"] is True
+    serialized = json.dumps(manifest, ensure_ascii=False)
+    assert "https://example.test" not in serialized
+    assert "super-secret-token" not in serialized
+
+
+def test_local_space_mirror_config_smoke_requires_composer_debug_markers():
+    config = {
+        "title": "Dream QA",
+        "css": ".dc-stepper .dc-mic-button .dc-attach-button .dc-image-popover .dc-debug-panel",
+        "components": [
+            {"props": {"label": "Dream note"}},
+            {"props": {"label": "Language"}},
+            {"props": {"label": "Text generation", "value": "modal"}},
+            {"props": {"label": "Image understanding", "value": "modal"}},
+            {"props": {"label": "Voice input", "value": "modal"}},
+            {"props": {"label": "Runtime state"}},
+        ],
+    }
+
+    result = inspect_config(config)
+
+    assert result["passes"] is True
+    assert result["backend_defaults"]["Text generation"] == "modal"
+
+
+def test_local_space_mirror_config_smoke_fails_on_stale_ui():
+    config = {
+        "title": "Dream QA",
+        "css": ".dc-stepper",
+        "components": [
+            {"props": {"label": "Dream note"}},
+            {"props": {"label": "Text generation", "value": "demo"}},
+        ],
+    }
+
+    result = inspect_config(config)
+
+    assert result["passes"] is False
+    assert ".dc-mic-button" in result["failures"]["missing_css"]
+    assert result["failures"]["backend_defaults"]["Text generation"] == "demo"

tests/test_ui_actions.py

@@ -6,6 +6,7 @@ from dream_customs.ui.actions import answer_to_card_action, initial_mobile_state
 import dream_customs.ui.app as ui_app
 from dream_customs.ui.app import _reset
 from dream_customs.ui.copy import DEFAULT_MOOD, PROCESSING_NOTE
+from dream_customs.ui.styles import CSS
 
 
 def test_mobile_defaults_to_modal_backends():
@@ -18,16 +19,21 @@ def test_mobile_defaults_to_modal_backends():
 
 def test_runtime_settings_are_collapsed_for_public_flow():
     source = inspect.getsource(ui_app.build_demo)
+    flow_column_source = source.split('with gr.Column(elem_classes=["dc-flow-column"]):', 1)[1].split(
+        'with gr.Column(elem_classes=["dc-side-panel"]):', 1
+    )[0]
 
     assert 'gr.Accordion("Advanced", open=False' in source
     assert 'with gr.Accordion(initial_copy["debug_title"], open=False' in source
+    assert 'with gr.Accordion(initial_copy["debug_title"], open=False' in flow_column_source
 
 
 def test_voice_input_keeps_modal_asr_component_but_uses_inline_mic_button():
     source = inspect.getsource(ui_app.build_demo)
 
     assert "audio_input = gr.Audio(" in source
-    assert 'sources=["microphone", "upload"]' in source
+    assert 'sources=["upload"]' in source
+    assert 'sources=["microphone", "upload"]' not in source
     assert 'type="filepath"' in source
     assert "visible=False" in source
     assert "mic_html = gr.HTML(_mic_html(DEFAULT_LANGUAGE))" in source
@@ -38,20 +44,94 @@ def test_voice_input_keeps_modal_asr_component_but_uses_inline_mic_button():
 def test_image_upload_is_composer_plus_drawer():
     source = inspect.getsource(ui_app.build_demo)
 
-    assert 'initial_copy["image_accordion"]' in source
-    assert "open=False" in source
-    assert 'elem_classes=["dc-attachment-drawer"]' in source
-    assert 'image_input = gr.Image(label=initial_copy["image_label"]' in source
+    assert "attachment_html = gr.HTML(_attachment_html(DEFAULT_LANGUAGE))" in source
+    assert 'elem_classes=["dc-image-popover"]' in source
+    assert 'image_input = gr.Image(' in source
+    assert 'sources=["upload", "clipboard"]' in source
+    assert "gr.Accordion(" not in source.split("image_input = gr.Image(")[0].split("with gr.Group(elem_classes=[\"dc-composer\"]):")[-1]
+
+
+def test_image_popover_uses_unified_upload_clipboard_ui():
+    assert "data-upload" in ui_app._attachment_html("en")
+    assert "data-paste" in ui_app._attachment_html("zh")
+    assert "上传图片" in ui_app._attachment_html("zh")
+    assert ".dc-image-popover [data-testid=\"source-select\"]" in CSS
+    assert "border-top: 0 !important;" in CSS
+    assert '[aria-label="Capture from camera"]' in CSS
+    assert "display: none !important;" in CSS
+    assert ".dc-image-upload-copy" in CSS
+    assert ".dc-image-label-copy" in inspect.getsource(ui_app)
+    assert "clipboardSelected ? copy.paste : copy.upload" in inspect.getsource(ui_app)
+
+
+def test_composer_scripts_are_attached_to_blocks():
+    source = inspect.getsource(ui_app.build_demo)
+
+    assert "with gr.Blocks(css=CSS, js=VOICE_JS, title=APP_TITLE)" in source
+    assert "mic_html = gr.HTML(_mic_html(DEFAULT_LANGUAGE))" in source
+    assert "attachment_html = gr.HTML(_attachment_html(DEFAULT_LANGUAGE))" in source
 
 
 def test_hero_stepper_tracks_app_status():
     ask_html = ui_app._hero_html(status="ask")
     tip_html = ui_app._hero_html(status="tip")
 
-    assert '<span class="is-complete"><strong>1</strong>' in ask_html
-    assert '<span class="is-active"><strong>2</strong>' in ask_html
-    assert '<span class="is-complete"><strong>3</strong>' in tip_html
-    assert '<span class="is-active"><strong>4</strong>' in tip_html
+    assert '<span class="dc-step is-complete"><strong>1</strong>' in ask_html
+    assert '<i class="dc-stepper-line is-complete" aria-hidden="true"></i>' in ask_html
+    assert '<span class="dc-step is-active" aria-current="step"><strong>2</strong>' in ask_html
+    assert '<span class="dc-step is-complete"><strong>3</strong>' in tip_html
+    assert '<span class="dc-step is-active" aria-current="step"><strong>4</strong>' in tip_html
+    assert tip_html.count("dc-stepper-line is-complete") == 3
+
+
+def test_hero_subtitle_explains_app_instead_of_legacy_name():
+    hero_html = ui_app._hero_html()
+
+    assert "grounded Today Tip" in hero_html
+    assert "Dream Customs" not in hero_html
+
+
+def test_side_panel_dropdown_hover_stays_readable():
+    assert '.dc-side-panel .dc-section-title strong' in CSS
+    assert '.gradio-container [role="option"]:hover' in CSS
+    assert 'background: var(--dqa-sage-soft) !important;' in CSS
+    assert 'color: var(--dqa-ink) !important;' in CSS
+    assert '.dc-side-panel .block:has(input[role="listbox"])' in CSS
+    assert 'resize: none !important;' in CSS
+    assert 'pointer-events: none !important;' in CSS
+    assert '> .container input[role="listbox"][aria-expanded="true"]) > .container .dropdown-arrow' in CSS
+    assert '.dc-side-panel .block:has(.wrap-inner.show_options) .dropdown-arrow' not in CSS
+    assert '.dc-side-panel .block:has(.options) .dropdown-arrow' not in CSS
+    assert 'transform: rotate(180deg) !important;' in CSS
+    assert '.dc-side-panel .block:has(input[role="listbox"]) .wrap-inner' in CSS
+    assert '.dc-side-panel .block:has(input[role="listbox"]) .secondary-wrap' in CSS
+    assert '.dc-side-panel .form:has(input[role="listbox"])' in CSS
+    assert '--input-border-width: 0px;' in CSS
+    assert '--block-border-width: 0px;' in CSS
+
+
+def test_advanced_panel_uses_compact_readable_controls():
+    assert '.dc-side-panel .dc-dev-help span' in CSS
+    assert 'color: #60717a !important;' in CSS
+    assert '.dc-side-panel .dc-dev .block:has(input[role="listbox"])' in CSS
+    assert 'padding: 12px 14px !important;' in CSS
+    assert '.dc-side-panel .dc-dev .block:has(input[role="listbox"]) input[role="listbox"]' in CSS
+    assert 'font-size: 0.94rem !important;' in CSS
+    assert '.dc-side-panel .dc-dev > button' in CSS
+    assert 'min-height: 46px !important;' in CSS
+    assert '.dc-side-panel .dc-dev-tuning' in CSS
+    assert 'background: rgba(255, 253, 248, 0.98) !important;' in CSS
+    assert 'overflow: hidden !important;' in CSS
+    assert '.dc-side-panel .dc-dev-tuning > .styler' in CSS
+    assert 'background: transparent !important;' in CSS
+    assert '.dc-flow-column .dc-debug-panel' in CSS
+    assert 'align-items: start !important;' in CSS
+    source = inspect.getsource(ui_app.build_demo)
+    assert 'with gr.Group(elem_classes=["dc-dev-tuning"])' in source
+    assert "text_temperature = gr.Number(" in source
+    assert "text_temperature = gr.Slider(" not in source
+    assert source.index("text_temperature = gr.Number(") < source.index("text_backend = gr.Dropdown(")
+    assert source.index("text_temperature = gr.Number(") < source.index('with gr.Accordion("Advanced endpoints"')
 
 
 def test_processing_note_is_story_copy_not_backend_jargon():