Update src/ui/components.py

src/ui/components.py

@@ -192,6 +192,76 @@ def render_stage_tracker(current_stage: int) -> None:
     st.markdown("")
 
 
+# ──────────────────────────────────────────────────────────────────────────────
+# Mode selector — prominent pill toggle in main area
+# ──────────────────────────────────────────────────────────────────────────────
+
+def render_mode_selector() -> str:
+    """
+    Render a prominent two-button mode toggle in the main content area.
+    Persists selection in st.session_state["output_mode"].
+    Returns the selected mode value string (matches OutputMode.value).
+    """
+    # Bootstrap default
+    if "output_mode" not in st.session_state:
+        st.session_state["output_mode"] = "Audio Transcript"
+
+    current = st.session_state["output_mode"]
+
+    st.markdown("""
+<style>
+  .mode-toggle-wrap {
+    display: flex; gap: 12px; margin: 0.4rem 0 1.2rem 0;
+  }
+  .mode-btn {
+    flex: 1; padding: 0.65rem 1rem; border-radius: 10px;
+    font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 500;
+    text-align: center; cursor: pointer; transition: all 0.2s;
+    border: 1.5px solid var(--border);
+    background: var(--bg-card); color: var(--text-muted);
+  }
+  .mode-btn.active {
+    background: linear-gradient(135deg, rgba(124,106,247,0.18), rgba(124,106,247,0.06));
+    border-color: #7c6af7; color: #c4baff;
+  }
+</style>
+""", unsafe_allow_html=True)
+
+    col_t, col_p = st.columns(2)
+
+    with col_t:
+        transcript_active = current == "Audio Transcript"
+        if st.button(
+            "🎙️ Audio Transcript",
+            use_container_width=True,
+            type="primary" if transcript_active else "secondary",
+            key="mode_btn_transcript",
+        ):
+            st.session_state["output_mode"] = "Audio Transcript"
+            st.rerun()
+
+    with col_p:
+        podcast_active = current == "Podcast (2 Speakers)"
+        if st.button(
+            "🎭 Podcast — 2 Speakers",
+            use_container_width=True,
+            type="primary" if podcast_active else "secondary",
+            key="mode_btn_podcast",
+        ):
+            st.session_state["output_mode"] = "Podcast (2 Speakers)"
+            st.rerun()
+
+    # Visual label showing what's active
+    icon = "🎙️" if current == "Audio Transcript" else "🎭"
+    st.markdown(
+        f"<p style='font-size:0.8rem; color:#8b8fa8; margin: -0.6rem 0 0.8rem 0;'>"
+        f"{icon} Active: <strong style='color:#c4baff'>{current}</strong></p>",
+        unsafe_allow_html=True,
+    )
+
+    return st.session_state["output_mode"]
+
+
 # ──────────────────────────────────────────────────────────────────────────────
 # Reusable card primitives
 # ──────────────────────────────────────────────────────────────────────────────
@@ -223,4 +293,4 @@ def script_box(text: str) -> None:
     st.markdown(
         f"<div class='script-display'>{text}</div>",
         unsafe_allow_html=True,
-    )
+    )