feat(ui): audio journal and photo correction to maintain conistency

app.py

@@ -831,26 +831,9 @@ def scoreboard_md(session_id: str) -> str:
     return "\n".join(lines)
 
 
-def _wall_buttons(session_id: str, team_id: str):
+def _task_id_list(session_id: str) -> list[str]:
     s = SESSION_STORE.get(session_id) or {}
-    tasks = (s.get("game") or {}).get("tasks", [])[:12]
-    wall = rooms.task_wall_state(session_id, team_id)
-    updates, ids = [], []
-    for i in range(12):
-        if i < len(tasks):
-            t = tasks[i]
-            tid = t["task_id"]
-            ids.append(tid)
-            done = wall.get(tid, False)
-            mark = "✓" if done else "○"
-            updates.append(gr.update(
-                value=f"{mark}  {t.get('title', 'Task')}   ·   {t.get('points', 0)} pts",
-                visible=True,
-                variant="primary" if done else "secondary",
-            ))
-        else:
-            updates.append(gr.update(visible=False))
-    return updates, ids
+    return [t["task_id"] for t in (s.get("game") or {}).get("tasks", [])[:12]]
 
 
 def _task_by_id(session_id: str, task_id: str) -> dict:
@@ -1079,11 +1062,23 @@ def poll_tick(session_id, screen, team_id, player_name, is_host, poll_state):
             play_timer, play_status, wait_status, win_score, timer_update, new_state)
 
 
-def wall_tick(session_id, screen, team_id, taskids):
+def play_tick(session_id, screen, team_id, taskids, cur_task):
+    """On the play screen keep the task-id list current and, on first entry
+    (no task open yet), open the first task in place. This covers both the host
+    (who clicks Start) and guests (who auto-transition to play on the poll), so
+    the detail view is always populated without a separate landing screen.
+
+    Returns the full detail-open tuple plus the refreshed ``s_taskids``."""
     if screen != "play" or not session_id:
-        return [gr.update()] * 12 + [taskids]
-    updates, ids = _wall_buttons(session_id, team_id)
-    return updates + [json.dumps(ids)]
+        return (gr.update(),) * _N_DETAIL_OUTPUTS + (taskids,)
+    ids = _task_id_list(session_id)
+    ids_json = json.dumps(ids)
+    if not cur_task and ids:
+        # First time on the play screen for this client: open task 1.
+        return _open_task(session_id, team_id, ids[0]) + (ids_json,)
+    # Already viewing a task — leave the detail view untouched (don't reset the
+    # player's in-progress photo/transcript every tick), just sync the id list.
+    return (gr.update(),) * _N_DETAIL_OUTPUTS + (ids_json,)
 
 
 # ── Screen-action handlers ────────────────────────────────────────────────
@@ -1211,18 +1206,17 @@ def do_leave():
 
 # Number of outputs produced by _open_task / consumed by DETAIL_OPEN_OUTPUTS.
 # 17 fixed slots + 12 task-tab buttons.
-_N_DETAIL_OUTPUTS = 20 + 12
+_N_DETAIL_OUTPUTS = 19 + 12
 
 
 def _open_task(session_id, team_id, tid):
-    """Render the full task-detail view for one task. Shared by the wall cards,
-    the horizontal task tabs, and the prev/next arrows so every entry point
-    produces an identical, consistent detail screen."""
+    """Render the full task-detail view for one task. Shared by the play-screen
+    entry, the horizontal task tabs, and the prev/next arrows so every entry
+    point produces an identical, consistent detail screen."""
     can = rooms.can_complete(session_id, team_id, tid)
     return (
         tid,
-        gr.update(visible=False),  # wall view
-        gr.update(visible=True),   # detail view
+        gr.update(visible=True),   # detail view (always shown on the play screen)
         task_detail_md(session_id, team_id, tid),
         task_hint_html(session_id, team_id, tid),
         task_safety_html(session_id, team_id, tid),
@@ -1365,9 +1359,11 @@ def do_complete(session_id, team_id, task_id):
     if rooms.can_complete(session_id, team_id, task_id):
         complete_task(session_id, task_id, team_id)
         gr.Info("Task completed — nice work! 🎉")
-        return gr.update(visible=True), gr.update(visible=False), "✅ Task completed — nice work!"
+        # Re-render the same task so its tab shows ✓ and the completed state
+        # is reflected in place (there's no wall to return to).
+        return _open_task(session_id, team_id, task_id)
     gr.Warning("Add a photo or voice journal first to complete this task.")
-    return gr.update(), gr.update(visible=True), "🔒 Add a photo or journal first."
+    return (gr.update(),) * _N_DETAIL_OUTPUTS
 
 
 def do_finish(session_id, team_id):
@@ -1688,16 +1684,11 @@ with gr.Blocks(title="CityQuest · AI") as demo:
         gr.HTML("<div class='section-label' style='margin-top:14px'>Teams</div>")
         play_status = gr.HTML("")
 
-        with gr.Group(visible=True) as g_wall:
-            gr.HTML("<div class='section-label' style='margin-top:14px'>Task wall — tap a task to open it</div>")
-            with gr.Group(elem_classes=["cq-wall"]):
-                task_btn = [gr.Button("", visible=False, elem_classes=["cq-tcard"]) for _ in range(12)]
-            play_finish = gr.Button("🏁 Finish & wait for others", variant="primary",
-                                    elem_id="play-finish")
-
-        with gr.Group(visible=False, elem_classes=["cq-reveal"]) as g_detail:
-            # Horizontal task tabs — tap any to switch tasks in place (replaces
-            # the old "← Back to task wall" round-trip).
+        # The play screen lands directly in the task detail; the horizontal task
+        # tabs below are the only task switcher (the old vertical task wall was
+        # a redundant second copy of the same list, so it's gone).
+        with gr.Group(visible=True, elem_classes=["cq-reveal"]) as g_detail:
+            # Horizontal task tabs — tap any to switch tasks in place.
             with gr.Row(elem_classes=["task-tab-row"]):
                 detail_tab_btn = [gr.Button("", visible=False, size="sm",
                                             elem_classes=["task-tab"]) for _ in range(12)]
@@ -1710,39 +1701,36 @@ with gr.Blocks(title="CityQuest · AI") as demo:
             detail_md = gr.Markdown("")
             detail_hint = gr.HTML("")
             detail_safety = gr.HTML("")
-            with gr.Row():
-                with gr.Column():
-                    # Collapsed by default — most players add a photo, not a
-                    # recording, so this stays out of the way until tapped.
-                    with gr.Accordion("🎙️ Voice journal", open=False,
-                                      elem_classes=["voice-journal-accordion"]):
-                        # show_recording_waveform=False makes Gradio use the native
-                        # browser <audio> player instead of wavesurfer.js. wavesurfer
-                        # decodes the whole clip and paints a waveform on the main
-                        # thread (decodeAudioData), which on weaker laptops blocks
-                        # long enough to trigger the browser's "Page Unresponsive"
-                        # dialog. We don't need the waveform, so turn it off.
-                        d_audio = gr.Audio(sources=["microphone", "upload"], type="filepath",
-                                           format="wav", show_label=False,
-                                           elem_classes=["cq-audio"],
-                                           waveform_options=gr.WaveformOptions(
-                                               show_recording_waveform=False))
-                        d_lang = gr.Dropdown(
-                            ["en", "fr", "de", "it", "es", "pt", "el", "nl", "pl",
-                             "zh", "ja", "ko", "vi", "ar"],
-                            value="en", label="Spoken language")
-                        with gr.Row():
-                            d_transcribe = gr.Button("Transcribe", variant="secondary",
-                                                     elem_id="td-transcribe",
-                                                     elem_classes=["btn-secondary-action"])
-                            d_savejournal = gr.Button("Save journal", variant="secondary",
-                                                      elem_id="td-savejournal",
-                                                      elem_classes=["btn-primary-action"])
-                        d_transcript = gr.Textbox(label="Your notes", lines=3,
-                                                  placeholder="Transcribe your audio, or type a note…")
-                        d_journal_log = gr.Markdown("")
-                with gr.Column():
-                    gr.HTML("<div class='section-label'>Photos &amp; taglines</div>")
+            with gr.Row(equal_height=True):
+                with gr.Column(elem_classes=["proof-col"]):
+                    gr.HTML("<div class='section-label'>🎙️ Voice journal</div>")
+                    # show_recording_waveform=False makes Gradio use the native
+                    # browser <audio> player instead of wavesurfer.js. wavesurfer
+                    # decodes the whole clip and paints a waveform on the main
+                    # thread (decodeAudioData), which on weaker laptops blocks
+                    # long enough to trigger the browser's "Page Unresponsive"
+                    # dialog. We don't need the waveform, so turn it off.
+                    d_audio = gr.Audio(sources=["microphone", "upload"], type="filepath",
+                                       format="wav", show_label=False,
+                                       elem_classes=["cq-audio"],
+                                       waveform_options=gr.WaveformOptions(
+                                           show_recording_waveform=False))
+                    d_lang = gr.Dropdown(
+                        ["en", "fr", "de", "it", "es", "pt", "el", "nl", "pl",
+                         "zh", "ja", "ko", "vi", "ar"],
+                        value="en", label="Spoken language")
+                    d_transcript = gr.Textbox(label="Your notes", lines=3,
+                                              placeholder="Transcribe your audio, or type a note…")
+                    with gr.Row():
+                        d_transcribe = gr.Button("Transcribe", variant="secondary",
+                                                 elem_id="td-transcribe",
+                                                 elem_classes=["btn-secondary-action"])
+                        d_savejournal = gr.Button("Save journal", variant="secondary",
+                                                  elem_id="td-savejournal",
+                                                  elem_classes=["btn-primary-action"])
+                    d_journal_log = gr.Markdown("")
+                with gr.Column(elem_classes=["proof-col"]):
+                    gr.HTML("<div class='section-label'>📸 Photos &amp; taglines</div>")
                     d_photo = gr.Image(type="filepath", show_label=False, height=170)
                     d_tagline = gr.Textbox(label="Caption", placeholder="A caption for this photo")
                     d_addphoto = gr.Button("Add photo", variant="secondary",
@@ -1806,8 +1794,6 @@ with gr.Blocks(title="CityQuest · AI") as demo:
               outputs=nav_groups + [s_screen, lobby_code, lobby_roster, lobby_start, lobby_hint,
                                     play_timer, play_status, wait_status, win_scoreboard,
                                     poll, s_poll_state])
-    poll.tick(wall_tick, inputs=[s_session, s_screen, s_team, s_taskids],
-              outputs=task_btn + [s_taskids])
 
     # ── Navigation ────────────────────────────────────────────────────────
     create_inputs = [c_name, c_type, c_city, c_area, c_teams, c_duration, c_players]
@@ -1857,16 +1843,18 @@ with gr.Blocks(title="CityQuest · AI") as demo:
         outputs=nav_groups + [s_screen, play_timer, play_status, lobby_prep]
     ).then(_btn_on, None, [lobby_start])
 
-    # ── Task wall / tabs → detail ─────────────────────────────────────────
-    # Order must match _open_task's return tuple (17 fixed + 12 tab buttons).
-    detail_open_outputs = [s_task, g_wall, g_detail, detail_md, detail_hint, detail_safety,
+    # ── Task tabs → detail ────────────────────────────────────────────────
+    # Order must match _open_task's return tuple (19 fixed + 12 tab buttons).
+    detail_open_outputs = [s_task, g_detail, detail_md, detail_hint, detail_safety,
                            d_gallery, d_proof, d_complete, completion_instruction,
                            d_transcript, d_audio, d_tagline, d_ask_a, d_capture_status,
                            d_journal_log, task_position_label,
                            d_points, d_hint_log, d_ask_btn] + detail_tab_btn
-    # Both the wall cards and the in-detail task tabs index into s_taskids.
-    for i, tb in enumerate(task_btn):
-        tb.click(open_task_factory(i), inputs=[s_session, s_team, s_taskids], outputs=detail_open_outputs)
+    # Keep the task-id list fresh and auto-open the first task when a client
+    # first reaches the play screen (host via Start, guests via poll).
+    poll.tick(play_tick, inputs=[s_session, s_screen, s_team, s_taskids, s_task],
+              outputs=detail_open_outputs + [s_taskids])
+    # The in-detail horizontal task tabs index into s_taskids.
     for i, dtb in enumerate(detail_tab_btn):
         dtb.click(open_task_factory(i), inputs=[s_session, s_team, s_taskids], outputs=detail_open_outputs)
     prev_task_btn.click(go_adjacent_factory(-1), inputs=[s_session, s_team, s_taskids, s_task],
@@ -1905,11 +1893,10 @@ with gr.Blocks(title="CityQuest · AI") as demo:
         on_get_hint, inputs=[d_ask_q, s_session, s_team, s_task],
         outputs=[d_ask_a, d_points, d_ask_btn, d_hint_log]
     )
+    # After completing, re-render the same task in place so the ✓ shows on its
+    # tab and the completed state is reflected (no wall to bounce back to).
     d_complete.click(do_complete, inputs=[s_session, s_team, s_task],
-                     outputs=[g_wall, g_detail, d_capture_status])
-
-    play_finish.click(do_finish, inputs=[s_session, s_team],
-                      outputs=nav_groups + [s_screen, wait_status])
+                     outputs=detail_open_outputs)
 
     # ── Wait-lobby actions ────────────────────────────────────────────────
     wait_funny_recap.click(_btn_off, None, [wait_funny_recap]).then(

app/ui/theme.py

@@ -699,6 +699,15 @@ ul.options[role="listbox"] li {
     transform: scale(1.02) !important;
 }
 
+/* ── Proof columns: voice journal & photos read as matching side-by-side
+   panels (same surface, padding, and header) ── */
+.proof-col {
+    background: var(--paper) !important;
+    border: 1px solid var(--line) !important;
+    border-radius: 12px !important;
+    padding: 14px !important;
+}
+
 /* ── In-game guide (hints) ── */
 .guide-header {
     font-size: 1rem !important;