Reorder UI: extract frames (step 4) now follows transcribe + generate

Auto-extract depends on the transcript and LLM step outline, so the frames section
moves below them. Auto-extract is the primary action there; manual capture still
grabs from the player above. Renumbered: 1 Upload, 2 Transcribe, 3 Generate,
4 Capture & extract frames, 5 Build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -391,33 +391,16 @@ def build_ui() -> gr.Blocks:
         cap_url = gr.Textbox(visible=False)
         cap_time = gr.Number(visible=False)
 
-        with gr.Row():
-            with gr.Column(scale=3):
-                gr.Markdown("### 1 · Upload & preview")
-                upload = gr.File(
-                    label="Upload a video",
-                    type="filepath",
-                    file_types=[".mp4", ".mov", ".mkv", ".webm", ".avi", ".m4v", ".mpg", ".mpeg"],
-                )
-                player = gr.HTML()
-                with gr.Row():
-                    capture_btn = gr.Button("📸 Capture current frame", variant="primary")
-                    auto_btn = gr.Button("✨ Auto-extract frames")
-            with gr.Column(scale=2):
-                gr.Markdown(
-                    "### Captured frames\n"
-                    "_**Auto-extract** runs transcription + the step outline first, so frames "
-                    "anchor to the guide steps (and skip recorder intro/idle screens)._"
-                )
-                gallery = gr.Gallery(
-                    label="Frames pool — click an image to enlarge / select it",
-                    elem_id="dm-gallery",
-                    columns=3, height=320, object_fit="contain", allow_preview=False,
-                )
-                with gr.Row():
-                    delete_btn = gr.Button("🗑️ Delete selected")
-                    clear_btn = gr.Button("Clear all")
+        # 1 · Upload & preview
+        gr.Markdown("### 1 · Upload & preview")
+        upload = gr.File(
+            label="Upload a video",
+            type="filepath",
+            file_types=[".mp4", ".mov", ".mkv", ".webm", ".avi", ".m4v", ".mpg", ".mpeg"],
+        )
+        player = gr.HTML()
 
+        # 2 · Transcribe  →  3 · Generate guide
         gr.Markdown("### 2 · Transcribe → 3 · Generate guide")
         with gr.Row():
             with gr.Column():
@@ -429,7 +412,30 @@ def build_ui() -> gr.Blocks:
                 generate_btn = gr.Button("📝 Generate step-by-step guide (LLM)")
                 guide_md = gr.Markdown()
 
-        gr.Markdown("### 4 · Build the document")
+        # 4 · Capture & extract frames (after transcription + the step outline)
+        gr.Markdown(
+            "### 4 · Capture & extract frames\n"
+            "_**Auto-extract** uses the transcript + step outline (steps 2–3) to pull frames "
+            "at the guide's step moments and skip recorder intro/idle screens — it will run "
+            "those first if needed. **Capture current frame** grabs the exact moment showing "
+            "in the player above._"
+        )
+        with gr.Row():
+            with gr.Column(scale=2):
+                auto_btn = gr.Button("✨ Auto-extract frames", variant="primary")
+                capture_btn = gr.Button("📸 Capture current frame")
+            with gr.Column(scale=3):
+                gallery = gr.Gallery(
+                    label="Frames pool — click an image to enlarge / select it",
+                    elem_id="dm-gallery",
+                    columns=3, height=320, object_fit="contain", allow_preview=False,
+                )
+                with gr.Row():
+                    delete_btn = gr.Button("🗑️ Delete selected")
+                    clear_btn = gr.Button("Clear all")
+
+        # 5 · Build the document
+        gr.Markdown("### 5 · Build the document")
         with gr.Row():
             caption_chk = gr.Checkbox(value=config.ENABLE_VISION, label="Caption images with vision model")
             build_btn = gr.Button("📄 Build DOCX", variant="primary")