Deploy public authenticated AutoML gateway

gateway_app.py

@@ -38,6 +38,7 @@ from guided_workbench import (
     approval_status_html,
     approved_research_metadata,
     candidate_cards_html,
+    candidate_display_name,
     candidate_is_executable,
     experiment_reflection_outputs,
     new_workbench_state,
@@ -54,15 +55,12 @@ from guided_workbench import (
     update_context,
     validate_state,
 )
+from studio_design import STUDIO_CSS, STUDIO_HEAD_HTML, studio_theme
 from ui_design import (
-    APP_CSS,
     AUTOMATIC_SELECTION,
-    INFERENCE_GUIDE_HTML,
     QUALITY_PRESET_CHOICES,
     RESEARCH_NOTICE_HTML,
-    RESPONSIVE_HEAD_HTML,
     STUDIO_APP_HEADER_HTML,
-    professional_theme,
 )
 from gateway_auth import (
     AuthResult,
@@ -2830,7 +2828,7 @@ def _sync_workbench_ui_state(
 def _workbench_candidate_update(state: WorkbenchState):
     candidates = (
         [
-            (candidate.name or candidate.candidate_id, candidate.candidate_id)
+            (candidate_display_name(candidate), candidate.candidate_id)
             for candidate in state.research_plan.candidates
             if candidate_is_executable(
                 state.research_plan, candidate.candidate_id
@@ -3356,15 +3354,6 @@ def clear_workbench_variants_ui(state_data):
 
 def _add_results_section(label: str = "Latest run"):
     with gr.Group(elem_classes=["results-shell"]):
-        gr.HTML(
-            f"""
-            <div class="results-heading">
-              <p class="section-kicker">Measured run record</p>
-              <h2>{html.escape(label)}</h2>
-              <p>Measured outputs remain separate from pre-run estimates.</p>
-            </div>
-            """
-        )
         status = gr.Markdown(
             "Status: _idle_",
             visible=False,
@@ -3606,27 +3595,13 @@ def create_interface() -> gr.Blocks:
 
         with gr.Tabs(visible=False, elem_id="workspace-tabs") as main_tabs:
             with gr.TabItem("Build"):
-                gr.HTML(
-                    """
-                    <section class="guided-workbench-heading studio-build-intro">
-                      <div>
-                        <p class="section-kicker">Guided research workbench</p>
-                        <h2>Design a defensible training run</h2>
-                      </div>
-                      <p>
-                        Move from data to execution while preserving the evidence,
-                        assumptions, and decisions behind every component.
-                      </p>
-                    </section>
-                    """
-                )
                 with gr.Row(
                     equal_height=False,
                     elem_classes=["guided-instrument-bench", "studio-workbench"],
                 ):
                     with gr.Column(
-                        scale=2,
-                        min_width=170,
+                        scale=1,
+                        min_width=180,
                         elem_classes=["guided-step-rail", "studio-workflow"],
                     ):
                         gr.HTML(
@@ -3654,67 +3629,9 @@ def create_interface() -> gr.Blocks:
 
                     with gr.Column(
                         scale=7,
-                        min_width=520,
+                        min_width=320,
                         elem_classes=["guided-work-canvas", "studio-primary"],
                     ):
-                        gr.HTML(
-                            """
-                            <div class="guided-canvas-heading">
-                              <div>
-                                <h2>Explore the recommended pipeline</h2>
-                                <p>Every component includes its source, compatibility, and supporting evidence.</p>
-                              </div>
-                              <span class="guided-quality-badge">All stages visible</span>
-                            </div>
-                            <div class="guided-pipeline-meta">
-                              <strong>Candidate pipeline</strong>
-                              <span>Select a stage to inspect its evidence</span>
-                            </div>
-                            """
-                        )
-                        pipeline_card_outputs = []
-                        pipeline_buttons = []
-                        with gr.Row(
-                            elem_classes=["guided-pipeline-diagram", "studio-pipeline"],
-                            equal_height=True,
-                        ):
-                            for node_id, node_label, card_html in zip(
-                                PIPELINE_NODE_IDS,
-                                (
-                                    "Input",
-                                    "Preprocessing",
-                                    "Feature Extractor",
-                                    "Post-processing",
-                                    "Model",
-                                    "Evaluation",
-                                ),
-                                initial_node_cards,
-                            ):
-                                with gr.Group(
-                                    elem_classes=[
-                                        "guided-pipeline-card-shell",
-                                        f"guided-node-{node_id}",
-                                    ]
-                                ):
-                                    pipeline_card_outputs.append(
-                                        gr.HTML(
-                                            card_html,
-                                            container=False,
-                                            padding=False,
-                                            elem_classes=[
-                                                "guided-pipeline-card-output"
-                                            ],
-                                        )
-                                    )
-                                    pipeline_buttons.append(
-                                        gr.Button(
-                                            f"Inspect {node_label} node",
-                                            elem_classes=[
-                                                "guided-pipeline-node-hitarea"
-                                            ],
-                                        )
-                                    )
-
                         with gr.Group(
                             visible=True,
                             elem_classes=["guided-step-panel"],
@@ -3873,6 +3790,49 @@ def create_interface() -> gr.Blocks:
                                 '<p>Open any node to review its selection source, '
                                 'alternatives, compatibility, and report contract.</p></div>'
                             )
+                            pipeline_card_outputs = []
+                            pipeline_buttons = []
+                            with gr.Row(
+                                elem_classes=["guided-pipeline-diagram", "studio-pipeline"],
+                                equal_height=True,
+                            ):
+                                for node_id, node_label, card_html in zip(
+                                    PIPELINE_NODE_IDS,
+                                    (
+                                        "Input",
+                                        "Preprocessing",
+                                        "Feature Extractor",
+                                        "Post-processing",
+                                        "Model",
+                                        "Evaluation",
+                                    ),
+                                    initial_node_cards,
+                                ):
+                                    with gr.Group(
+                                        elem_classes=[
+                                            "guided-pipeline-card-shell",
+                                            f"guided-node-{node_id}",
+                                        ]
+                                    ):
+                                        pipeline_card_outputs.append(
+                                            gr.HTML(
+                                                card_html,
+                                                container=False,
+                                                padding=False,
+                                                elem_classes=[
+                                                    "guided-pipeline-card-output"
+                                                ],
+                                            )
+                                        )
+                                        pipeline_buttons.append(
+                                            gr.Button(
+                                                f"Inspect {node_label} node",
+                                                elem_classes=[
+                                                    "guided-pipeline-node-hitarea"
+                                                ],
+                                            )
+                                        )
+
                             node_inspector = gr.HTML(
                                 node_inspector_html(initial_workbench),
                                 elem_classes=["guided-node-inspector-output"],
@@ -4193,25 +4153,24 @@ def create_interface() -> gr.Blocks:
                                 'prepared. The current selection can run once.</div>'
                             )
 
-                    with gr.Column(
-                        scale=3,
-                        min_width=285,
-                        elem_classes=["guided-research-panel", "studio-assistant"],
-                    ):
-                        dossier = gr.HTML(
-                            research_dossier_html(initial_workbench),
-                            elem_classes=["guided-dossier-output"],
-                        )
-                        with gr.Group(elem_classes=["guided-refinement-box"]):
-                            refinement = gr.Textbox(
-                                label="Refine the recommendation",
-                                placeholder="For example, prefer interpretability",
-                                lines=2,
-                            )
-                            refine_button = gr.Button(
-                                "Apply refinement",
-                                elem_classes=["guided-secondary-action"],
+                        with gr.Accordion(
+                            "Research assistant", open=False,
+                            elem_classes=["studio-assistant"],
+                        ):
+                            dossier = gr.HTML(
+                                research_dossier_html(initial_workbench),
+                                elem_classes=["guided-dossier-output"],
                             )
+                            with gr.Group(elem_classes=["guided-refinement-box"]):
+                                refinement = gr.Textbox(
+                                    label="Refine the recommendation",
+                                    placeholder="For example, prefer interpretability",
+                                    lines=2,
+                                )
+                                refine_button = gr.Button(
+                                    "Apply refinement",
+                                    elem_classes=["guided-secondary-action"],
+                                )
 
                 with gr.Group(elem_classes=["guided-run-bar", "studio-runbar"]):
                     with gr.Row(equal_height=True):
@@ -4253,8 +4212,8 @@ def create_interface() -> gr.Blocks:
                         variant_two_outputs = _add_results_section("Variant 2")
 
             with gr.TabItem("Models") as replay_tab:
-                with gr.Row(equal_height=False):
-                    with gr.Column(scale=2, elem_classes=["panel-card"]):
+                with gr.Row(equal_height=False, elem_classes=["studio-models"]):
+                    with gr.Column(scale=2, min_width=300, elem_classes=["studio-model-controls"]):
                         gr.HTML(
                             """
                             <div class="configuration-heading">
@@ -4269,18 +4228,19 @@ def create_interface() -> gr.Blocks:
                             interactive=False,
                         )
                         saved_model_selection = gr.State("")
-                        refresh_models = gr.Button(
-                            "Refresh Saved Models",
-                            interactive=False,
-                        )
-                        export_saved_model = gr.Button("Prepare saved model download")
+                        with gr.Row(elem_classes=["studio-model-actions"]):
+                            refresh_models = gr.Button(
+                                "Refresh models", interactive=False,
+                            )
+                            export_saved_model = gr.Button("Prepare download")
+                            saved_export_file = gr.DownloadButton(
+                                "Download package", interactive=False,
+                            )
                         saved_export_status = gr.Markdown("")
-                        saved_export_file = gr.DownloadButton(
-                            "Download saved model", interactive=False,
-                        )
                         model_upload = gr.File(
                             label="Trained Model Package (.zip)",
                             file_types=[".zip"],
+                            height=150,
                         )
                         model_info = gr.Markdown(
                             "Choose a saved model or upload a package."
@@ -4330,6 +4290,11 @@ def create_interface() -> gr.Blocks:
                         scale=3,
                         elem_classes=["inference-output"],
                     ):
+                        gr.HTML(
+                            '<div class="configuration-heading">'
+                            '<h2>Prediction results</h2>'
+                            '<p>Visual previews and the complete prediction table.</p></div>'
+                        )
                         predict_status = gr.Markdown(
                             "Ready for a model.",
                             elem_classes=["run-status"],
@@ -4371,10 +4336,10 @@ def create_interface() -> gr.Blocks:
                             )
                         predict_frame = gr.DataFrame(
                             label="Prediction",
+                            headers=["Prediction"],
+                            value=[],
                             interactive=False,
                         )
-                    with gr.Column(scale=1):
-                        gr.HTML(INFERENCE_GUIDE_HTML)
 
             with gr.TabItem("Account"):
                 with gr.Group(elem_classes=["panel-card"]):
@@ -5162,9 +5127,9 @@ if __name__ == "__main__":
         server_name="0.0.0.0",
         server_port=7860,
         show_error=False,
-        theme=professional_theme(),
-        css=APP_CSS,
-        head=RESPONSIVE_HEAD_HTML,
+        theme=studio_theme(),
+        css=STUDIO_CSS,
+        head=STUDIO_HEAD_HTML,
     )
 
 

guided_workbench.py

@@ -1407,6 +1407,16 @@ def _expected_metrics_html(candidate: CandidatePipeline) -> str:
     return "".join(cards)
 
 
+def candidate_display_name(candidate: CandidatePipeline) -> str:
+    """Readable labels for known deterministic defaults; identity stays canonical."""
+    names = {
+        "no_feature_selection_tool + no_transform_tool + autogluon_tool": "AutoGluon baseline",
+        "t_test_feature_selection_tool + no_transform_tool + autogluon_tool": "AutoGluon with feature selection",
+        "no_feature_selection_tool + pca_transform_tool + autogluon_tool": "AutoGluon with PCA",
+    }
+    return names.get(candidate.name, candidate.name or candidate.candidate_id)
+
+
 def candidate_cards_html(
     state: Mapping[str, Any] | WorkbenchState,
 ) -> str:
@@ -1470,11 +1480,14 @@ def candidate_cards_html(
             f'" data-candidate-id="{_escape(candidate.candidate_id)}">'
             f'<div class="guided-candidate-index">Candidate {index}</div>'
             f"{recommended_badge}{verification_badge}"
-            f'<h3>{_escape(candidate.name or candidate.candidate_id)}</h3>'
+            f'<h3>{_escape(candidate_display_name(candidate))}</h3>'
             '<p class="guided-candidate-rationale">'
             f'{_escape(candidate.rationale or "No rationale provided")}</p>'
             '<div class="guided-candidate-section"><h4>Estimated metric values · unmeasured</h4>'
             f'<div class="guided-estimate-grid">{_expected_metrics_html(candidate)}</div></div>'
+            '<details class="guided-candidate-details"><summary>Evidence and assessment</summary>'
+            '<h4>Registered pipeline</h4>'
+            f'<p>{_escape(candidate.name or candidate.candidate_id)}</p>'
             '<div class="guided-candidate-columns">'
             '<div><h4>Assumptions</h4>'
             f'{_list_html(candidate.assumptions)}</div>'
@@ -1485,7 +1498,7 @@ def candidate_cards_html(
             f'{_list_html(candidate.evidence_ids)}</div>'
             '<div class="guided-candidate-section"><h4>Warnings</h4>'
             f'{_list_html(candidate.warnings)}</div>'
-            f"{verification_details}"
+            f"{verification_details}</details>"
             '<p class="guided-selection-state">'
             f'{_escape("Selected · " + execution_status if selected else execution_status)}</p>'
             "</article>"
@@ -1932,7 +1945,7 @@ def review_html(state: Mapping[str, Any] | WorkbenchState) -> str:
         f'{_escape(current.dataset_name or current.upload_type)}</strong></div>'
         f'<div><small>Objective</small><strong>{_escape(current.target)}</strong></div>'
         '<div><small>Candidate</small><strong>'
-        f'{_escape(current.current_candidate.name)}</strong></div>'
+        f'{_escape(candidate_display_name(current.current_candidate))}</strong></div>'
         f'<div><small>Quality profile</small><strong>{_escape(current.preset)}</strong></div>'
         f'<div><small>Time budget</small><strong>{current.time_limit} seconds</strong></div>'
         f'<div><small>Candidate trials</small><strong>{current.trials}</strong></div>'
@@ -1952,7 +1965,7 @@ def run_plan_summary_html(
     variant_label = "variant" if run_count == 1 else "variants"
     candidate = "Selection pending"
     try:
-        candidate = current.current_candidate.name
+        candidate = candidate_display_name(current.current_candidate)
     except ValueError:
         pass
     status = "Ready" if not issues else f"{len(issues)} item(s) need attention"

studio_design.py

@@ -0,0 +1,322 @@
+"""Public Studio visual system, independent of the legacy/private application CSS."""
+
+import gradio as gr
+
+from ui_design import STUDIO_INTERACTION_HEAD_HTML
+
+def studio_theme() -> gr.Theme:
+    """System fonts and restrained defaults, without remote font requests."""
+    return gr.themes.Base(
+        primary_hue=gr.themes.colors.blue,
+        neutral_hue=gr.themes.colors.slate,
+        font=["system-ui", "sans-serif"],
+        font_mono=["ui-monospace", "monospace"],
+    ).set(
+        body_background_fill="#f7f8fa",
+        body_text_color="#18212f",
+        block_label_text_color="#18212f",
+        input_border_color="#e1e5eb",
+        button_primary_background_fill="#315fd6",
+        button_primary_background_fill_hover="#264dac",
+        button_primary_text_color="#ffffff",
+        shadow_drop="none",
+    )
+
+
+# Document-level rules belong in head: Gradio scopes launch CSS to its app root.
+STUDIO_HEAD_HTML = STUDIO_INTERACTION_HEAD_HTML + """
+<style>
+html { color-scheme: light; background: #f7f8fa; }
+body { margin: 0; background: #f7f8fa; }
+gradio-app { display: block; min-height: 100vh; }
+/* Gradio scopes media selectors beneath .contain; the root is outside it. */
+@media (max-width: 1100px) { html .gradio-container { padding: 0 24px 24px !important; } }
+@media (max-width: 800px) { html .gradio-container { padding: 0 20px 24px !important; } }
+@media (max-width: 480px) { html .gradio-container { padding: 0 16px 20px !important; } }
+</style>
+"""
+
+STUDIO_CSS = r"""
+.gradio-container {
+  --studio-canvas: #f7f8fa;
+  --studio-surface: #fff;
+  --studio-text: #18212f;
+  --studio-muted: #5c6778;
+  --studio-line: #e1e5eb;
+  --studio-action: #315fd6;
+  --body-background-fill: var(--studio-canvas);
+  --body-text-color: var(--studio-text);
+  --body-text-color-subdued: var(--studio-muted);
+  --block-background-fill: var(--studio-surface);
+  --block-border-color: var(--studio-line);
+  --block-radius: 8px;
+  --input-background-fill: var(--studio-surface);
+  --input-border-color: var(--studio-line);
+  --input-radius: 6px;
+  --button-primary-background-fill: var(--studio-action);
+  --button-primary-background-fill-hover: #264dac;
+  --button-primary-text-color: #fff;
+  --button-primary-border-color: var(--studio-action);
+  --button-secondary-background-fill: #fff;
+  --button-secondary-background-fill-hover: #f0f3f8;
+  --button-secondary-border-color: var(--studio-line);
+  --button-secondary-text-color: var(--studio-text);
+  width: 100% !important;
+  max-width: 1440px !important;
+  margin: 0 auto;
+  padding: 0 40px 32px !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--studio-text);
+  background: var(--studio-canvas);
+}
+footer { display: none !important; }
+.gradio-container .app { gap: 0; }
+.gradio-container .main.app { width: 100%; max-width: none; padding: 0; }
+.gradio-container .html-container { padding: 0 !important; }
+.gradio-container h1, .gradio-container h2, .gradio-container h3,
+.gradio-container h4 { color: var(--studio-text); font-family: inherit; letter-spacing: -.025em; }
+h1 { font-size: 22px; line-height: 1.2; font-weight: 650; }
+h2 { font-size: 28px; line-height: 1.25; font-weight: 650; }
+h3 { font-size: 22px; line-height: 1.3; font-weight: 650; }
+h4 { font-size: 14px; line-height: 1.5; font-weight: 650; }
+p { margin: 0; }
+p, li, dd { overflow-wrap: anywhere; }
+a { color: var(--studio-action); }
+button, input, textarea, select { font: inherit; }
+button { border-radius: 6px !important; box-shadow: none !important; }
+button:focus-visible, input:focus-visible, textarea:focus-visible,
+summary:focus-visible { outline: 2px solid var(--studio-action) !important; outline-offset: 3px; }
+button:disabled { cursor: not-allowed; opacity: .48; }
+.gradio-container .form { border: 0; box-shadow: none; background: transparent; gap: 16px; }
+.gradio-container .block { box-shadow: none; }
+/* Gradio 6 duplicates Group classes on its inner wrapper. Decorate once. */
+.gr-group > .gr-group { flex: 0 0 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; max-width: none; }
+.gr-group > .styler { --layout-gap: 16px !important; --form-gap-width: 16px !important; --block-radius: 6px !important; --button-border-width: 1px !important; --button-large-radius: 6px !important; --button-small-radius: 6px !important; background: transparent !important; }
+/* A hidden Gradio Group can retain nested visible children. Its step heading
+   is the authoritative visibility signal set by the existing navigation event. */
+.studio-primary > .guided-step-panel:not(:has(.guided-step-heading)) { display: none !important; }
+.account-card:not(:has(h2)) { display: none !important; }
+.gradio-container .block:has(> .html-container) { padding: 0 !important; }
+.gradio-container .block .wrap > label { border-radius: 6px; }
+.gradio-container .block .wrap:has(> .wrap-inner) { border: 1px solid var(--studio-line); border-radius: 6px; min-height: 42px; }
+.gradio-container textarea { border: 1px solid var(--studio-line) !important; border-radius: 6px; background: #fff; padding: 12px; }
+.gradio-container .html-container > .prose > :first-child { margin-top: 0; }
+.gradio-container .html-container > .prose > :last-child { margin-bottom: 0; }
+.guided-rail-note { border-top: 1px solid var(--studio-line); padding-top: 16px; font-size: 12px; color: var(--studio-muted); }
+.guided-rail-note strong { display: block; color: var(--studio-text); font-size: 12px; margin-bottom: 6px; }
+.guided-rail-note span { display: block; }
+
+.gradio-container .gap { gap: 16px; }
+.gradio-container .row { gap: 24px; }
+.gradio-container .prose { font-size: 15px; }
+.gradio-container .prose h3 { font-size: 20px; }
+.gradio-container .prose p { color: var(--studio-muted); }
+.gradio-container label > span, .gradio-container .block > .label-wrap { color: var(--studio-text); }
+.studio-product-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; }
+.studio-product-identity { display: flex; align-items: center; gap: 12px; }
+.studio-product-identity h1 { margin: 0; font-size: 20px; }
+.studio-product-identity p { color: var(--studio-muted); font-size: 12px; margin-top: 3px; }
+.studio-product-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ccd6eb; border-radius: 9px; font-size: 12px; font-weight: 750; color: var(--studio-action); background: #edf2fc; }
+.studio-product-profile { display: flex; align-items: center; gap: 10px; color: var(--studio-muted); font-size: 12px; }
+.studio-profile-badge { display: none; }
+.research-notice { display: flex; gap: 12px; border-top: 1px solid var(--studio-line); padding: 10px 0; color: var(--studio-muted); font-size: 11px; }
+.notice-title { flex: 0 0 auto; font-weight: 650; }
+#workspace-tabs { border: 0; padding: 0; background: transparent; }
+#workspace-tabs > .tab-wrapper { border-bottom: 1px solid var(--studio-line); padding: 0; margin-bottom: 28px; }
+#workspace-tabs > .tab-wrapper > .tab-container { gap: 28px; }
+#workspace-tabs > .tab-wrapper button[role="tab"] { border-radius: 0 !important; border: 0; border-bottom: 2px solid transparent; padding: 14px 2px; background: transparent; font-size: 14px; color: var(--studio-muted); }
+#workspace-tabs > .tab-wrapper button[role="tab"][aria-selected="true"] { border-bottom-color: var(--studio-action); color: var(--studio-text); font-weight: 650; }
+#workspace-tabs > .tabitem { border: 0; padding: 0; background: transparent; }
+.studio-workbench { align-items: flex-start; gap: 40px !important; }
+.studio-workflow { flex: 0 0 180px !important; min-width: 0 !important; gap: 20px !important; padding: 4px 0; }
+.guided-rail-label, .section-kicker { font-size: 11px; font-weight: 650; color: var(--studio-muted); letter-spacing: .08em; text-transform: uppercase; }
+.guided-stepper { padding: 0 !important; background: transparent !important; border: 0 !important; }
+.guided-stepper .wrap { flex-direction: column; gap: 4px; counter-reset: step; }
+.guided-stepper label { display: flex; align-items: center; gap: 12px; border: 0 !important; border-radius: 6px !important; background: transparent !important; padding: 10px 12px !important; margin: 0 !important; min-height: 42px; color: var(--studio-muted); font-size: 14px; counter-increment: step; }
+.guided-stepper label::before { content: counter(step, decimal-leading-zero); font-size: 11px; color: #7b8595; font-variant-numeric: tabular-nums; }
+.guided-stepper label:has(input:checked) { background: #eaf0fc !important; color: var(--studio-action); font-weight: 650; }
+.guided-stepper label:has(input:checked)::before { color: var(--studio-action); }
+.guided-stepper input { position: absolute; opacity: 0; width: 1px; }
+.guided-stepper label:has(input:focus-visible) { outline: 2px solid var(--studio-action); outline-offset: 2px; }
+.studio-primary { flex: 1 1 0 !important; min-width: 0 !important; }
+.guided-step-panel { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; background: var(--studio-surface) !important; padding: 28px !important; }
+.guided-step-panel > .styler { background: transparent !important; }
+.guided-step-heading { margin-bottom: 12px; }
+.guided-step-heading > span { display: block; color: var(--studio-muted); font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
+.guided-step-heading h3 { font-size: 28px; margin: 0 0 10px; }
+.guided-step-heading p { color: var(--studio-muted); max-width: 72ch; font-size: 14px; }
+.guided-research-status, .guided-approval-status, .guided-inline-error, .guided-inline-warning { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
+.guided-approval-status strong, .guided-approval-status span { display: block; }
+.guided-approval-status span { color: var(--studio-muted); margin-top: 4px; }
+.guided-inline-error { color: #ad3434; }
+.guided-inline-warning { color: #8a5a14; }
+.studio-assistant { border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: transparent !important; }
+.studio-assistant > .label-wrap { padding: 14px 16px; }
+.guided-dossier-header h2 { font-size: 22px; }
+.guided-dossier-block, .guided-inspector-contract, .guided-candidate-section { margin-top: 20px; }
+.guided-dossier-block h4, .guided-inspector-contract h4, .guided-candidate-section h4 { margin: 0 0 8px; }
+.guided-dossier-block p, .guided-dossier-block li { font-size: 14px; color: var(--studio-muted); }
+.guided-refinement-box { background: transparent !important; border: 0 !important; margin-top: 20px; }
+.guided-run-bar { margin-top: 28px; border: 0 !important; border-top: 1px solid var(--studio-line) !important; border-radius: 0 !important; padding: 20px 0 !important; background: transparent !important; }
+.guided-run-bar > .styler { background: transparent !important; }
+.guided-run-bar .row { align-items: center; }
+.guided-run-summary-output { flex: 3 1 540px !important; }
+.guided-run-bar button { flex: 1 1 160px !important; min-width: 160px !important; }
+.guided-run-summary { display: flex; align-items: flex-start; gap: 24px; font-size: 12px; }
+.guided-summary-status { min-width: 120px; }
+.guided-summary-status > span, .guided-summary-facts small { display: block; color: var(--studio-muted); font-size: 11px; margin-bottom: 5px; }
+.guided-summary-status strong { font-size: 13px; font-weight: 600; }
+.guided-summary-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; }
+.guided-summary-facts > span:first-child { max-width: 240px; }
+.guided-empty-state { padding: 24px 0; color: var(--studio-muted); }
+.guided-empty-state h3 { font-size: 16px; margin: 0 0 8px; }
+.guided-empty-copy { color: var(--studio-muted); font-size: 13px; }
+.guided-candidate-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
+.guided-plan-context { grid-column: 1 / -1; font-size: 13px; color: var(--studio-muted); }
+.guided-plan-context h4 { margin: 0; }
+.guided-plan-context ul { margin: 8px 0; padding-left: 20px; }
+.guided-candidate-card { padding: 20px; border: 1px solid var(--studio-line); border-radius: 10px; min-width: 0; background: #fff; }
+.guided-candidate-card.recommended { border-color: #9cb3ed; }
+.guided-candidate-card.selected { outline: 2px solid var(--studio-action); outline-offset: 2px; }
+.guided-candidate-index { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--studio-muted); margin-bottom: 12px; }
+.guided-candidate-card h3 { font-size: 20px; margin: 12px 0; }
+.guided-candidate-card p, .guided-candidate-card li { font-size: 13px; line-height: 1.6; }
+.guided-candidate-card ul { padding-left: 18px; }
+.guided-candidate-rationale { color: var(--studio-muted); }
+.guided-recommended-badge, .guided-verification-badge, .guided-source-badge, .guided-node-source, .guided-compatibility { display: inline-block; border: 1px solid var(--studio-line); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 600; margin: 0 4px 4px 0; }
+.guided-recommended-badge { color: var(--studio-action); background: #edf2fc; border-color: #d4dff8; }
+.guided-verification-badge.passed, .guided-compatibility.compatible { color: #267350; }
+.guided-verification-badge.rejected, .guided-compatibility.incompatible { color: #ad3434; }
+.guided-estimate-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
+.guided-estimate-grid > div { padding: 8px; background: #f7f8fa; border-radius: 6px; font-size: 12px; }
+.guided-estimate-grid strong, .guided-estimate-grid small { display: block; }
+.guided-candidate-details { margin-top: 20px; border-top: 1px solid var(--studio-line); padding-top: 12px; }
+.guided-candidate-details summary { font-size: 13px; font-weight: 600; cursor: pointer; }
+.guided-selection-state { border-top: 1px solid var(--studio-line); margin-top: 16px; padding-top: 12px; color: var(--studio-muted); }
+.studio-pipeline { gap: 8px !important; }
+.guided-pipeline-card-shell { flex: 1 1 120px !important; min-width: 120px !important; border: 1px solid var(--studio-line) !important; border-radius: 8px !important; background: #fafbfc !important; }
+.guided-pipeline-card-shell > .styler { background: transparent !important; }
+.guided-pipeline-card-content { padding: 12px; min-height: 156px; }
+.guided-node-topline { display: flex; gap: 6px; font-size: 11px; color: var(--studio-muted); }
+.guided-node-icon { display: none; }
+.guided-pipeline-card-content h4 { margin: 12px 0 6px; font-size: 13px; overflow-wrap: anywhere; }
+.guided-node-parameter, .guided-node-shape { font-size: 11px; color: var(--studio-muted); margin: 4px 0; }
+.guided-node-shape { display: none; }
+.guided-node-selected { font-size: 10px; color: var(--studio-action); }
+.guided-node-footer { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
+.guided-node-compatibility { font-size: 10px; }
+.guided-pipeline-node-hitarea { min-width: 0 !important; font-size: 11px !important; padding: 8px 4px !important; border: 0 !important; border-top: 1px solid var(--studio-line) !important; background: #fff !important; border-radius: 0 !important; }
+.guided-node-inspector { margin-top: 12px; }
+.guided-inspector-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--studio-line); }
+.guided-inspector-heading h3 { margin: 4px 0; font-size: 22px; }
+.guided-inspector-heading span { color: var(--studio-muted); font-size: 12px; }
+.guided-mapping-row, .guided-detail-row { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eef0f3; font-size: 13px; }
+.guided-workbench-heading { margin: 0 0 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
+.guided-workbench-heading h2 { margin: 6px 0 0; }
+.guided-workbench-heading > p { color: var(--studio-muted); font-size: 13px; max-width: 50ch; }
+.results-shell { border: 0 !important; background: transparent !important; }
+.guided-result-tabs > .tabitem { border: 1px solid var(--studio-line); border-radius: 8px; padding: 24px; background: #fff; }
+.guided-result-tabs .tab-container { flex-wrap: wrap; }
+.guided-snapshot-heading { margin-bottom: 20px; }
+.guided-snapshot-heading span { font-size: 11px; color: var(--studio-muted); text-transform: uppercase; letter-spacing: .06em; }
+.guided-snapshot-heading h3 { margin: 6px 0; }
+.guided-snapshot { max-width: 100%; }
+.guided-snapshot pre, .guided-snapshot code { white-space: pre-wrap; overflow-wrap: anywhere; }
+.guided-reflection-metric-grid, .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16px; margin: 16px 0; }
+.guided-reflection-metric, .metric-card { padding: 16px; border: 1px solid var(--studio-line); border-radius: 8px; }
+.candidate-comparison { overflow-x: auto; }
+.candidate-comparison table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.candidate-comparison table th, .candidate-comparison table td { border: 0 !important; border-bottom: 1px solid var(--studio-line) !important; padding: 12px !important; text-align: left; }
+.candidate-comparison table th { color: var(--studio-muted); background: #f7f8fa; font-weight: 500; }
+.studio-model-actions { gap: 8px !important; }
+.studio-model-actions button { min-width: 100px !important; font-size: 12px !important; padding: 10px 8px !important; }
+.studio-models { gap: 32px !important; }
+.studio-model-controls { padding-right: 24px; border-right: 1px solid var(--studio-line); }
+.configuration-heading { margin-bottom: 12px; }
+.configuration-heading h2 { font-size: 28px; margin: 0 0 12px; }
+.configuration-heading p { font-size: 14px; color: var(--studio-muted); }
+.inference-output { min-width: 0; }
+.visual-prediction-gallery { background: #fff; border: 1px solid var(--studio-line); border-radius: 8px; }
+.panel-card, .account-card { border: 1px solid var(--studio-line) !important; border-radius: 12px !important; padding: 28px !important; background: #fff !important; }
+.account-card { max-width: 600px; margin: 40px auto; }
+.account-card h2 { margin: 0 0 12px; }
+.account-card p { color: var(--studio-muted); }
+.run-context-card { padding: 0; }
+.run-status-strip { display: flex; align-items: center; gap: 8px; font-size: 13px; padding-bottom: 20px; }
+.run-dot { width: 7px; height: 7px; border-radius: 50%; background: #8a94a3; }
+.state-complete .run-dot { background: #267350; }
+.state-failed .run-dot { background: #ad3434; }
+.run-alias-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--studio-line); padding-bottom: 16px; }
+.run-context-label { font-size: 12px; color: var(--studio-muted); }
+.run-alias { font-size: 14px; }
+.run-id-copy { padding: 4px 8px; font-size: 11px; border: 1px solid var(--studio-line); background: #fff; }
+.run-context-list, .run-technical-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 20px 0; }
+.run-context-item { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
+.run-context-item strong { font-weight: 500; }
+.run-technical summary, .reported-metrics-detail summary { font-size: 13px; color: var(--studio-muted); cursor: pointer; }
+.workbench-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
+.workbench-metric-card { border-bottom: 1px solid var(--studio-line); padding: 16px 0; }
+.metric-label { display: block; color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; }
+.metric-value { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
+.metric-value.metric-model { font-size: 18px; }
+.guided-review-grid, .guided-inspector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 24px 0; }
+.guided-review-grid small, .guided-review-grid strong { display: block; }
+.guided-review-grid small { color: var(--studio-muted); font-size: 12px; margin-bottom: 8px; }
+.guided-review-grid strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
+.guided-provider-badge, .guided-evidence-provenance { display: inline-block; font-size: 11px; color: var(--studio-muted); margin: 4px 0; }
+.guided-dossier-heading { margin-bottom: 20px; }
+.guided-dossier-heading h3 { margin: 8px 0; }
+.guided-research-insights, .guided-evidence-grid, .guided-next-experiment-grid { display: grid; gap: 16px; margin: 20px 0; }
+.guided-research-insight, .guided-evidence-card, .guided-next-experiment-card, .guided-trace-entry { padding: 16px 0; border-top: 1px solid var(--studio-line); }
+.guided-evidence-heading h4 { margin: 0 0 8px; }
+.guided-insight-label { color: var(--studio-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
+.guided-research-icon { display: none; }
+.guided-dossier-empty h3 { font-size: 18px; margin: 0 0 6px; }
+.guided-empty-insight { padding: 20px 0; }
+.guided-provider-note, .guided-agent-intro { color: var(--studio-muted); font-size: 13px; }
+.guided-estimate > span { display: block; font-size: 11px; color: var(--studio-muted); }
+.guided-estimate strong { font-size: 16px; margin: 6px 0; }
+.guided-trace-list { padding: 0; list-style: none; }
+@media (max-width: 1100px) {
+  .studio-workbench { gap: 24px !important; }
+  .studio-workflow { flex-basis: 150px !important; }
+  .guided-step-panel { padding: 24px !important; }
+  .guided-summary-facts { gap: 12px 16px; }
+}
+@media (max-width: 800px) {
+  .studio-workbench { flex-direction: column; }
+  .studio-workflow, .studio-primary { width: 100%; flex: 1 1 auto !important; }
+  .studio-workflow { gap: 8px !important; padding: 0; }
+  .guided-rail-label { display: none; }
+  .guided-stepper .wrap { flex-direction: row; flex-wrap: wrap; gap: 4px; }
+  .guided-stepper label { flex: 0 0 auto; padding: 8px 10px !important; min-height: 40px; gap: 6px; font-size: 12px; }
+  .guided-stepper label::before { font-size: 10px; }
+  .studio-model-controls { padding-right: 0; border-right: 0; }
+  .guided-workbench-heading { display: block; }
+  .guided-workbench-heading > p { margin-top: 12px; }
+  .guided-run-summary { flex-direction: column; gap: 12px; }
+  .research-notice { font-size: 10px; }
+}
+@media (max-width: 480px) {
+  .guided-stepper .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .guided-stepper label { padding: 8px 4px !important; font-size: 11px; justify-content: center; }
+  .guided-stepper label::before { display: none; }
+  .studio-product-header { padding: 20px 0 16px; }
+  .studio-product-profile { display: none; }
+  .research-notice { display: block; }
+  .notice-title { margin-bottom: 4px; }
+  #workspace-tabs > .tab-wrapper { margin-bottom: 20px; }
+  #workspace-tabs > .tab-wrapper > .tab-container { gap: 24px; }
+  .guided-step-panel, .panel-card { padding: 20px !important; }
+  .guided-step-heading h3, .configuration-heading h2 { font-size: 24px; }
+  .guided-run-bar .row { gap: 12px; }
+  .guided-result-tabs > .tabitem { padding: 16px; }
+  .guided-mapping-row, .guided-detail-row { grid-template-columns: 1fr; gap: 4px; }
+  .guided-inspector-heading { flex-direction: column; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
+}
+"""

ui_design.py

@@ -2,6 +2,8 @@
 
 from __future__ import annotations
 
+import re
+
 import gradio as gr
 
 
@@ -6025,6 +6027,11 @@ html:not(.automl-embedded) .gradio-container:not(:has(#workspace-tabs)) {
 </script>
 """
 
+# Reuse the proven interaction fixes without importing the legacy shell layout.
+STUDIO_INTERACTION_HEAD_HTML = "\n".join(
+    re.findall(r"<script>.*?</script>", RESPONSIVE_HEAD_HTML, flags=re.DOTALL)
+)
+
 
 def professional_theme() -> gr.Theme:
     """Return a restrained, high-contrast theme built from system fonts."""