fix dream qa composer debug ui

CONTEXT.md

@@ -0,0 +1,21 @@
+# Dream QA Context
+
+Dream QA is the current product context for this hackathon app. It keeps the deployed Dream Customs repository and Space continuity while defining the user-facing experience as guided dream Q&A.
+
+## Language
+
+**Dream QA**:
+A guided dream reflection app where a user records a dream, answers or skips a gentle follow-up question, and leaves with one grounded Today Tip.
+_Avoid_: Dream Customs as the primary product name, dream permit, sealed pact
+
+**Unified composer**:
+The single input area where dream text, image clues, and voice dictation belong together as one dream intake.
+_Avoid_: Separate upload module, separate voice module, three independent forms
+
+**Today Tip**:
+The one primary final suggestion or caring note for the user's day, grounded in concrete details from the dream.
+_Avoid_: Multiple recommendations, generic wellness advice, diagnosis
+
+**Developer debug panel**:
+A collapsed support area for inspecting runtime state and backend route behavior without becoming part of the ordinary user flow.
+_Avoid_: Main user setting, visible model control path

docs/smoke/2026-06-11-composer-debug-stepper-smoke.md

@@ -0,0 +1,26 @@
+# Dream QA Composer / Debug / Stepper Smoke - 2026-06-11
+
+Goal: verify the Dream QA UI pass that moves image and voice entry into the main composer, makes the progress stepper state-driven, and adds a collapsed debug panel at the bottom of the page.
+
+## Local Runtime
+
+- Command: `GRADIO_SERVER_NAME=127.0.0.1 GRADIO_SERVER_PORT=7862 .venv/bin/python app.py`
+- URL: `http://127.0.0.1:7862`
+
+## Automated Checks
+
+- `.venv/bin/python -m pytest tests/test_ui_actions.py -q` -> 13 passed.
+- `.venv/bin/python -m pytest tests/test_app_logic.py::test_debug_settings_do_not_expose_hosted_secrets -q` -> 1 passed.
+- `.venv/bin/python -m pytest -q` -> 103 passed.
+- `.venv/bin/python scripts/evaluate_today_tip_quality.py` -> `{"case_count": 11, "failures": {}, "passes": true}`.
+- `git diff --check` -> pass.
+
+## Chrome Smoke
+
+- First screen shows one inline microphone button inside the Dream note composer.
+- The previous visible `Voice note` Gradio module is hidden from the ordinary path.
+- The image entry is a collapsed `＋` drawer inside the composer.
+- The bottom of the page shows a collapsed `Debug` panel.
+- After submitting a text dream, the stepper changes from `1 Record` active to `2 Question` active with `1 Record` complete.
+- After skipping the follow-up question, the stepper marks `1 Record`, `2 Question`, and `3 Interpret` complete, with `4 Today Tip` active.
+- Expanding `Debug` shows runtime JSON with backend state and configured flags, without exposing endpoint or token values.

dream_customs/ui/app.py

@@ -197,6 +197,7 @@ def _updates(state: str, view_json: str):
     return (
         state,
         view_json,
+        _hero_html(language, status),
         _notice_html(view),
         _question_markdown(view, language),
         view.get("card_html", ""),
@@ -324,9 +325,23 @@ def _reset(language, text_backend, vision_backend, *settings_values):
     return (*_updates(state, view_json), "", "", None, None, default_mood_for(language))
 
 
-def _hero_html(language: str = DEFAULT_LANGUAGE) -> str:
+def _active_step_for_status(status: str) -> int:
+    return {"record": 1, "error": 1, "ask": 2, "drafting": 3, "tip": 4}.get(status, 1)
+
+
+def _hero_html(language: str = DEFAULT_LANGUAGE, status: str = "record") -> str:
     copy = copy_for(language)
     steps = copy["steps"]
+    active_step = _active_step_for_status(status)
+    step_html = []
+    for index, label in enumerate(steps, start=1):
+        classes = []
+        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>")
     return f"""
 <header class="dc-hero">
   <div class="dc-hero-top">
@@ -340,10 +355,7 @@ def _hero_html(language: str = DEFAULT_LANGUAGE) -> str:
     <div class="dc-sun-mark" aria-hidden="true">☀</div>
   </div>
   <div class="dc-stepper" aria-label="Dream QA steps">
-    <span class="is-active"><strong>1</strong>{steps[0]}</span>
-    <span><strong>2</strong>{steps[1]}</span>
-    <span><strong>3</strong>{steps[2]}</span>
-    <span><strong>4</strong>{steps[3]}</span>
+    {''.join(step_html)}
   </div>
 </header>
 """.strip()
@@ -370,10 +382,6 @@ def _mic_html(language: str = DEFAULT_LANGUAGE) -> str:
 """.strip()
 
 
-def _voice_help_html(language: str = DEFAULT_LANGUAGE) -> str:
-    return f"<p class=\"dc-voice-help\">{escape(copy_for(language)['voice_help'])}</p>"
-
-
 def _field_tip_html(language: str = DEFAULT_LANGUAGE) -> str:
     return f"<p class=\"dc-field-tip\">{escape(copy_for(language)['field_tip'])}</p>"
 
@@ -402,6 +410,15 @@ def _dev_help_html(language: str = DEFAULT_LANGUAGE) -> str:
 """.strip()
 
 
+def _debug_help_html(language: str = DEFAULT_LANGUAGE) -> str:
+    return f"""
+<div class="dc-debug-help">
+  <strong>{escape(copy_for(language)['debug_title'])}</strong>
+  <span>{escape(copy_for(language)['debug_help'])}</span>
+</div>
+""".strip()
+
+
 def build_demo() -> gr.Blocks:
     initial_state, initial_view = initial_mobile_state(language=DEFAULT_LANGUAGE)
     initial = _load_view(initial_view)
@@ -427,21 +444,26 @@ def build_demo() -> gr.Blocks:
                                 value="",
                                 elem_classes=["dc-dream-text"],
                             )
-                            voice_help_html = gr.HTML(_voice_help_html(DEFAULT_LANGUAGE))
+                            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)
                             audio_input = gr.Audio(
                                 label=initial_copy["voice_label"],
                                 sources=["microphone", "upload"],
                                 type="filepath",
                                 format="wav",
                                 elem_classes=["dc-voice-input"],
+                                visible=False,
                             )
                             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")
                         processing_html = gr.HTML(_processing_html(DEFAULT_LANGUAGE))
-                        with gr.Accordion(initial_copy["image_accordion"], open=False, elem_classes=["dc-attachment-drawer"]):
-                            image_input = gr.Image(label=initial_copy["image_label"], type="filepath", height=160)
 
                     with gr.Group(visible=False, elem_classes=["dc-stage", "dc-question"]) as question_group:
                         question_markdown = gr.HTML(_question_markdown(initial, DEFAULT_LANGUAGE))
@@ -576,16 +598,18 @@ def build_demo() -> gr.Blocks:
                                 step=1,
                                 value=DEFAULT_VISION_MAX_TOKENS,
                             )
-                        debug_json = gr.Code(
-                            label="Current state",
-                            value=json.dumps(initial.get("debug", {}), ensure_ascii=False, indent=2),
-                            language="json",
-                            visible=False,
-                        )
+            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,
             view_state,
+            hero_html,
             notice,
             question_markdown,
             card_html,
@@ -663,7 +687,9 @@ def build_demo() -> gr.Blocks:
                 _notice_html({"notice": copy["notice_record"], "status": "record"}),
                 _section_title_html(1, copy["dream_label"]),
                 gr.update(label=copy["dream_label"], placeholder=copy["dream_placeholder"]),
-                _voice_help_html(selected_language),
+                _mic_html(selected_language),
+                gr.update(label=copy["image_accordion"]),
+                gr.update(label=copy["image_label"]),
                 _field_tip_html(selected_language),
                 gr.update(value=copy["example_button"]),
                 gr.update(value=copy["submit_button"]),
@@ -682,6 +708,9 @@ def build_demo() -> gr.Blocks:
                 gr.update(label=copy["mood_label"], choices=moods, value=moods[0]),
                 _side_stamp_html(selected_language),
                 _dev_help_html(selected_language),
+                gr.update(label=copy["debug_title"]),
+                _debug_help_html(selected_language),
+                gr.update(label=copy["debug_state_label"]),
             )
 
         language.change(
@@ -692,7 +721,9 @@ def build_demo() -> gr.Blocks:
                 notice,
                 dream_section_html,
                 dream_text,
-                voice_help_html,
+                mic_html,
+                image_drawer,
+                image_input,
                 field_tip_html,
                 example_button,
                 submit_button,
@@ -711,6 +742,9 @@ def build_demo() -> gr.Blocks:
                 mood,
                 side_stamp_html,
                 dev_help_html,
+                debug_panel,
+                debug_help_html,
+                debug_json,
             ],
         )
 

dream_customs/ui/copy.py

@@ -31,8 +31,8 @@ APP_COPY = {
         "processing_note": (
             "After submission, Dream QA asks one grounded question, then turns the dream into a small Today Tip."
         ),
-        "image_accordion": "Add image clue",
-        "image_label": "Upload a sketch, note, or screenshot",
+        "image_accordion": "＋",
+        "image_label": "Image clue",
         "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.",
@@ -54,6 +54,9 @@ APP_COPY = {
         "side_stamp_body": "It helps the final suggestion stay grounded in your dream.",
         "language_label": "Language",
         "runtime_help": "Advanced controls for demos and development. Most visitors can leave these unchanged.",
+        "debug_title": "Debug",
+        "debug_help": "Inspect the current session, backend route, latency budgets, and Space/Modal status without exposing secrets.",
+        "debug_state_label": "Runtime state",
         "card_title": "Today Tip",
         "error_state": "The interface state could not be read. Please start over.",
     },
@@ -82,8 +85,8 @@ APP_COPY = {
         "processing_note": (
             "提交后，梦境助手会先追问一个关键细节，再把梦境整理成一个今日小 Tips。"
         ),
-        "image_accordion": "添加图片线索",
-        "image_label": "上传草图、便签或截图",
+        "image_accordion": "＋",
+        "image_label": "图片线索",
         "question_kicker": "追问",
         "question_title": "在这个梦里，你最想理解的是什么呢？",
         "question_body": "回答一两句就好；也可以跳过，直接得到一个基于现有线索的今日小 Tips。",
@@ -105,6 +108,9 @@ APP_COPY = {
         "side_stamp_body": "有助于更准确地理解梦境。",
         "language_label": "语言",
         "runtime_help": "高级演示与开发控制。普通体验保持默认即可。",
+        "debug_title": "调试",
+        "debug_help": "查看当前会话、后端路由、延迟预算和 Space/Modal 状态；不会暴露密钥。",
+        "debug_state_label": "运行状态",
         "card_title": "今日小 Tips",
         "error_state": "界面状态读取失败，请重新开始。",
     },

dream_customs/ui/styles.py

@@ -394,15 +394,8 @@ body,
   display: none !important;
 }
 
-.dc-voice-help {
-  color: var(--dc-muted);
-  font-size: 0.86rem;
-  line-height: 1.4;
-  margin: 12px 0 6px;
-}
-
 .dc-voice-input {
-  margin-top: 0 !important;
+  display: none !important;
 }
 
 .dc-voice-input .wrap,
@@ -416,31 +409,31 @@ body,
 
 .dc-mic-control {
   align-items: end;
-  bottom: 68px;
+  bottom: 28px;
   display: grid;
   gap: 8px;
   justify-items: end;
   max-width: 280px;
   position: absolute;
-  right: 34px;
+  right: 28px;
   z-index: 8;
 }
 
 .dc-mic-button {
   align-items: center;
   background: rgba(255, 249, 238, 0.96) !important;
-  border: 2px solid var(--dc-teal) !important;
+  border: 1px solid rgba(7, 60, 67, 0.26) !important;
   border-radius: 999px !important;
-  box-shadow: 0 10px 22px rgba(7, 60, 67, 0.14);
+  box-shadow: 0 8px 18px rgba(7, 60, 67, 0.12);
   cursor: pointer;
   display: inline-flex;
-  height: 64px !important;
+  height: 48px !important;
   justify-content: center;
-  min-height: 64px !important;
-  min-width: 64px !important;
+  min-height: 48px !important;
+  min-width: 48px !important;
   padding: 0 !important;
   transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
-  width: 64px !important;
+  width: 48px !important;
 }
 
 .dc-mic-button:hover {
@@ -454,33 +447,33 @@ body,
 }
 
 .dc-mic-glyph {
-  border: 3px solid var(--dc-teal);
+  border: 2px solid var(--dc-teal);
   border-radius: 14px;
-  height: 28px;
+  height: 22px;
   position: relative;
-  width: 16px;
+  width: 13px;
 }
 
 .dc-mic-glyph::before {
-  border: 3px solid var(--dc-teal);
+  border: 2px solid var(--dc-teal);
   border-top: 0;
   border-radius: 0 0 18px 18px;
   content: "";
-  height: 15px;
-  left: -9px;
+  height: 12px;
+  left: -7px;
   position: absolute;
-  top: 15px;
-  width: 28px;
+  top: 13px;
+  width: 23px;
 }
 
 .dc-mic-glyph::after {
   background: var(--dc-teal);
-  bottom: -19px;
+  bottom: -15px;
   content: "";
-  height: 13px;
-  left: 5px;
+  height: 10px;
+  left: 4px;
   position: absolute;
-  width: 3px;
+  width: 2px;
 }
 
 .dc-mic-button[data-mode="listening"] .dc-mic-glyph,
@@ -583,10 +576,10 @@ body,
 .dc-stage .dc-mic-button {
   border-radius: 999px !important;
   font-family: "Avenir Next", "Gill Sans", sans-serif !important;
-  height: 64px !important;
-  min-height: 64px !important;
-  min-width: 64px !important;
-  width: 64px !important;
+  height: 48px !important;
+  min-height: 48px !important;
+  min-width: 48px !important;
+  width: 48px !important;
 }
 
 .dc-stage .primary button,
@@ -626,11 +619,43 @@ button.secondary {
 }
 
 .dc-attachment-drawer {
-  background: rgba(230, 221, 208, 0.52) !important;
+  background: transparent !important;
+  border: 0 !important;
+  bottom: 28px;
+  box-shadow: none !important;
+  left: 28px;
+  margin: 0;
+  max-width: min(420px, calc(100% - 96px));
+  padding: 0 !important;
+  position: absolute;
+  z-index: 9;
+}
+
+.dc-attachment-drawer > button {
+  align-items: center !important;
+  background: rgba(255, 249, 238, 0.96) !important;
+  border: 1px solid rgba(7, 60, 67, 0.26) !important;
+  border-radius: 999px !important;
+  box-shadow: 0 8px 18px rgba(7, 60, 67, 0.12);
+  color: var(--dc-teal-dark) !important;
+  display: inline-flex !important;
+  font-family: "Avenir Next", "Gill Sans", sans-serif !important;
+  font-size: 1.5rem !important;
+  height: 48px !important;
+  justify-content: center !important;
+  line-height: 1 !important;
+  min-height: 48px !important;
+  padding: 0 !important;
+  width: 48px !important;
+}
+
+.dc-attachment-drawer > div {
+  background: rgba(255, 253, 248, 0.98) !important;
   border: 1px solid var(--dc-line) !important;
-  border-radius: var(--dc-radius-sm) !important;
-  box-shadow: inset 0 1px 2px rgba(19, 41, 47, 0.05) !important;
-  margin-top: 18px;
+  border-radius: var(--dc-radius-md) !important;
+  box-shadow: var(--dc-soft-shadow);
+  margin-top: 8px;
+  padding: 12px !important;
 }
 
 .dc-row {
@@ -905,6 +930,41 @@ a.built-with[href*="gradio.app"] {
   margin-top: 10px;
 }
 
+.dc-debug-panel {
+  background: rgba(255, 253, 248, 0.94) !important;
+  border: 1px solid var(--dqa-line, var(--dc-line)) !important;
+  border-radius: 12px !important;
+  box-shadow: var(--dqa-shadow, var(--dc-soft-shadow));
+  margin-top: 18px;
+  padding: 10px !important;
+}
+
+.dc-debug-panel > button {
+  color: var(--dc-ink) !important;
+  font-size: 0.92rem !important;
+  min-height: 46px !important;
+}
+
+.dc-debug-help {
+  color: var(--dc-muted);
+  display: grid;
+  gap: 4px;
+  font-size: 0.84rem;
+  line-height: 1.5;
+  margin-bottom: 10px;
+}
+
+.dc-debug-help strong {
+  color: var(--dc-ink);
+}
+
+.dc-debug-panel textarea,
+.dc-debug-panel code,
+.dc-debug-panel pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+  font-size: 0.82rem !important;
+}
+
 @keyframes dc-mic-pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(11, 91, 100, 0.32);
@@ -1013,22 +1073,28 @@ a.built-with[href*="gradio.app"] {
 
   .dc-dream-text textarea {
     min-height: 300px !important;
-    padding-right: 20px !important;
+    padding-right: 78px !important;
     padding-bottom: 96px !important;
   }
 
   .dc-mic-control {
-    bottom: 72px;
-    left: 20px;
-    max-width: calc(100% - 40px);
+    bottom: 22px;
+    left: auto;
+    max-width: calc(100% - 112px);
     right: 20px;
   }
 
   .dc-mic-button {
-    height: 58px !important;
-    min-height: 58px !important;
-    min-width: 58px !important;
-    width: 58px !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    min-width: 48px !important;
+    width: 48px !important;
+  }
+
+  .dc-attachment-drawer {
+    bottom: 22px;
+    left: 20px;
+    max-width: calc(100% - 96px);
   }
 
   .dc-pass-topline {
@@ -1185,6 +1251,16 @@ body,
   color: #fff;
 }
 
+.dc-stepper .is-complete {
+  color: var(--dqa-sage-deep);
+}
+
+.dc-stepper .is-complete strong {
+  background: rgba(91, 138, 97, 0.18);
+  border-color: rgba(91, 138, 97, 0.42);
+  color: var(--dqa-sage-deep);
+}
+
 .dc-workspace-grid {
   display: grid !important;
   gap: 18px !important;
@@ -1493,8 +1569,13 @@ button.secondary {
   }
 
   .dc-mic-control {
-    bottom: 78px;
-    right: 28px;
+    bottom: 22px;
+    right: 20px;
+  }
+
+  .dc-attachment-drawer {
+    bottom: 22px;
+    left: 20px;
   }
 
   .dqa-tip-page {

tests/test_ui_actions.py

@@ -20,18 +20,40 @@ def test_runtime_settings_are_collapsed_for_public_flow():
     source = inspect.getsource(ui_app.build_demo)
 
     assert 'gr.Accordion("Advanced", open=False' in source
+    assert 'with gr.Accordion(initial_copy["debug_title"], open=False' in source
 
 
-def test_voice_input_uses_gradio_audio_file_for_modal_asr():
+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 'type="filepath"' in source
+    assert "visible=False" in source
+    assert "mic_html = gr.HTML(_mic_html(DEFAULT_LANGUAGE))" in source
     assert "audio_input = gr.State(None)" not in source
     assert 'value=DEFAULT_ASR_BACKEND' in source
 
 
+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
+
+
+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
+
+
 def test_processing_note_is_story_copy_not_backend_jargon():
     lowered = PROCESSING_NOTE.lower()