Sync wizard underline with selected pipeline tab

smoke_signal_tab.py

@@ -1608,14 +1608,24 @@ def _export_status_html(last_export=0) -> str:
     </div>"""
 
 
-# ── Main tab builder ───────────────────────────────────────────────────────────
-def smoke_signal_tab():
-    """Call this inside your gr.Blocks() Tabs to add the Smoke Signal tab."""
-
-    with gr.TabItem("◈ Smoke Signal", elem_id="ss-tab"):
-
-        # ── Wizard header ────────────────────────────────────────────────────
-        gr.HTML("""
+def _wizard_header_html(active_step: int = 1) -> str:
+    step_labels = [
+        "INGEST+PROFILE",
+        "PROFILE (OPTIONAL)",
+        "OCR",
+        "REVIEW",
+        "EXPORT",
+    ]
+    active_step = max(1, min(5, int(active_step or 1)))
+
+    step_html = []
+    for idx, label in enumerate(step_labels, start=1):
+        cls = "ss-step active" if idx == active_step else "ss-step"
+        step_html.append(f'<div class="{cls}"><span class="ss-num">{idx}</span>{label}</div>')
+        if idx < len(step_labels):
+            step_html.append('<div class="ss-connector"></div>')
+
+    return """
         <div style="background:linear-gradient(135deg,#0d1117,#161b22);padding:24px 28px 0;border-bottom:1px solid #30363d">
             <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
                 <div style="font-size:38px;line-height:1">◈</div>
@@ -1625,23 +1635,25 @@ def smoke_signal_tab():
                 </div>
             </div>
             <div class="ss-wizard">
-                <div class="ss-step active"><span class="ss-num">1</span>INGEST+PROFILE</div>
-                <div class="ss-connector"></div>
-                <div class="ss-step"><span class="ss-num">2</span>PROFILE (OPTIONAL)</div>
-                <div class="ss-connector"></div>
-                <div class="ss-step"><span class="ss-num">3</span>OCR</div>
-                <div class="ss-connector"></div>
-                <div class="ss-step"><span class="ss-num">4</span>REVIEW</div>
-                <div class="ss-connector"></div>
-                <div class="ss-step"><span class="ss-num">5</span>EXPORT</div>
+                """ + "".join(step_html) + """
             </div>
         </div>
-        """)
+        """
+
+
+# ── Main tab builder ───────────────────────────────────────────────────────────
+def smoke_signal_tab():
+    """Call this inside your gr.Blocks() Tabs to add the Smoke Signal tab."""
+
+    with gr.TabItem("◈ Smoke Signal", elem_id="ss-tab"):
+
+        # ── Wizard header ────────────────────────────────────────────────────
+        wizard_header = gr.HTML(_wizard_header_html(1))
 
         with gr.Tabs() as wizard:
 
             # ── STEP 1: INGEST ────────────────────────────────────────────────
-            with gr.TabItem("① Ingest", id="ss-ingest"):
+            with gr.TabItem("① Ingest", id="ss-ingest") as ingest_tab:
                 gr.HTML("""<div class="ss-panel-header" style="padding:20px 0 0 0">
                     <div class="ss-panel-icon">📥</div>
                     <div><p class="ss-panel-title">Source Registry</p>
@@ -1701,7 +1713,7 @@ def smoke_signal_tab():
                 # Auto-load removed — use Refresh button instead to avoid SSR hang
 
             # ── STEP 2: PROFILE ───────────────────────────────────────────────
-            with gr.TabItem("② Profile (Optional)", id="ss-profile"):
+            with gr.TabItem("② Profile (Optional)", id="ss-profile") as profile_tab:
                 gr.HTML("""<div class="ss-panel-header" style="padding:20px 0 0 0">
                     <div class="ss-panel-icon">🔍</div>
                     <div><p class="ss-panel-title">PDF Profiler</p>
@@ -1715,7 +1727,7 @@ def smoke_signal_tab():
                 profile_btn.click(run_profile, outputs=[profile_status, profile_log])
 
             # ── STEP 3: OCR ───────────────────────────────────────────────────
-            with gr.TabItem("③ OCR", id="ss-ocr"):
+            with gr.TabItem("③ OCR", id="ss-ocr") as ocr_tab:
                 gr.HTML("""<div class="ss-panel-header" style="padding:20px 0 0 0">
                     <div class="ss-panel-icon">👁</div>
                     <div><p class="ss-panel-title">OCR Engine</p>
@@ -1848,7 +1860,7 @@ def smoke_signal_tab():
                 # Review now auto-loads on tab select and after OCR run completion.
 
             # ── STEP 5: EXPORT ────────────────────────────────────────────────
-            with gr.TabItem("⑤ Export", id="ss-export"):
+            with gr.TabItem("⑤ Export", id="ss-export") as export_tab:
                 gr.HTML("""<div class="ss-panel-header" style="padding:20px 0 0 0">
                     <div class="ss-panel-icon">⬇</div>
                     <div><p class="ss-panel-title">Codex Export</p>
@@ -1878,3 +1890,9 @@ def smoke_signal_tab():
                     run_export,
                     outputs=[export_status, export_log, codex_download, gold_download],
                 )
+
+        ingest_tab.select(lambda: _wizard_header_html(1), outputs=[wizard_header])
+        profile_tab.select(lambda: _wizard_header_html(2), outputs=[wizard_header])
+        ocr_tab.select(lambda: _wizard_header_html(3), outputs=[wizard_header])
+        review_tab.select(lambda: _wizard_header_html(4), outputs=[wizard_header])
+        export_tab.select(lambda: _wizard_header_html(5), outputs=[wizard_header])