Refine setup wizard UX spec rendering and tests

Co-authored-by: fderuiter <127706008+fderuiter@users.noreply.github.com>

Author: Copilot

packages/plugins-streamlit/src/imednet_streamlit/pages/setup_wizard.py

@@ -27,8 +27,7 @@
     "Export / Save",
 )
 
-_STATE_TRANSITION_DIAGRAM = """```text
-[Step 1: Scan & Profile]
+_STATE_TRANSITION_DIAGRAM = """[Step 1: Scan & Profile]
   ├─ Scan button → discovered_schema, validation_report=None
   └─ Next (enabled when forms discovered) → Step 2
 
@@ -57,7 +56,7 @@
 Global transitions:
 - Numbered nav buttons jump to any step (1..5)
 - wizard_step is clamped to range 1..5 on every transition
-```"""
+"""
 
 _SESSION_STATE_WIREFRAME = "\n".join(
     [
@@ -119,7 +118,7 @@
 def _render_design_specification() -> None:
     st.markdown("### Wizard UX design specification")
     st.markdown("#### Flowchart / state transitions")
-    st.markdown(_STATE_TRANSITION_DIAGRAM)
+    st.code(_STATE_TRANSITION_DIAGRAM, language="text")
     st.markdown("#### Wireframe mapped to session state")
     st.markdown(_SESSION_STATE_WIREFRAME)
     st.markdown("#### UX review: Streamlit multi-page alignment")
@@ -555,7 +554,8 @@ def _step_export(study_key: str) -> None:
 
 def render_page() -> None:
     st.title("🧭 Study Setup Wizard")
-    _render_design_specification()
+    with st.expander("UX Design Specification", expanded=False):
+        _render_design_specification()
 
     if not st.session_state.get("_imednet_connected"):
         st.info("Please connect from the sidebar to configure and publish a study mapping.")

tests/unit/streamlit/test_pages_setup_wizard.py

@@ -29,6 +29,14 @@ def metric(self, label: str, value: Any, **kwargs: Any) -> None:
         self._parent.metric(label, value, **kwargs)
 
 
+class _FakeContextManager:
+    def __enter__(self) -> "_FakeContextManager":
+        return self
+
+    def __exit__(self, exc_type: Any, exc: Any, tb: Any) -> None:
+        return None
+
+
 class _FakeStreamlit:
     def __init__(self) -> None:
         self.session_state: dict[str, Any] = {
@@ -48,6 +56,8 @@ def __init__(self) -> None:
         self.error_calls: list[str] = []
         self.titles: list[str] = []
         self.markdown_calls: list[str] = []
+        self.code_calls: list[str] = []
+        self.expander_calls: list[tuple[str, bool]] = []
 
     def title(self, value: str) -> None:
         self.titles.append(value)
@@ -61,6 +71,13 @@ def markdown(self, value: str) -> None:
     def caption(self, value: str) -> None:
         return None
 
+    def expander(self, label: str, *, expanded: bool = False) -> _FakeContextManager:
+        self.expander_calls.append((label, expanded))
+        return _FakeContextManager()
+
+    def code(self, body: str, *, language: str = "") -> None:
+        self.code_calls.append(body)
+
     def progress(self, value: float) -> None:
         return None
 
@@ -143,6 +160,8 @@ def _run_setup_wizard(
         "subheader",
         "markdown",
         "caption",
+        "expander",
+        "code",
         "progress",
         "success",
         "warning",
@@ -267,6 +286,8 @@ def test_setup_wizard_renders_design_specification_sections() -> None:
     _run_setup_wizard(fake_st)
 
     joined_markdown = "\n".join(fake_st.markdown_calls)
+    assert ("UX Design Specification", False) in fake_st.expander_calls
+    assert any("Step 1: Scan & Profile" in body for body in fake_st.code_calls)
     assert "Flowchart / state transitions" in joined_markdown
     assert "Wireframe mapped to session state" in joined_markdown
     assert "UX review: Streamlit multi-page alignment" in joined_markdown