Update app.py

app.py

@@ -297,7 +297,7 @@ def generate_pipeline_code(target: str, algorithm: str, problem_type: str, test_
     try:
         return ctx.generate_pipeline_code(target, algorithm, problem_type, float(test_size))
     except Exception as exc:
-        return f"# Pipeline generation failed: {exc}"
+        return f"# Pipeline Generation Failed: {exc}"
 
 
 # Formats a training result dictionary into a concise Markdown model-evaluation summary
@@ -305,12 +305,12 @@ def _metrics_markdown(result: dict[str, Any]) -> str:
     # Extracts reported metrics and renders each metric as a Markdown bullet
     metrics = result.get("metrics", {})
     metric_lines = "\n".join(f"- **{name}**: `{value}`" for name, value in metrics.items()) or "- No metrics returned."
-    return f'''### Model evaluation
+    return f'''### Model Evaluation
 **{result.get('algorithm', 'Model')}** · `{result.get('problem_type', 'unknown')}`
 
 {metric_lines}
 
-**Training footprint:** {result.get('train_rows', 0):,} train rows · {result.get('test_rows', 0):,} test rows · {result.get('feature_columns', 0)} raw features · {result.get('fit_seconds', 0)}s fit time
+**Training Footprint:** {result.get('train_rows', 0):,} train rows · {result.get('test_rows', 0):,} test rows · {result.get('feature_columns', 0)} raw features · {result.get('fit_seconds', 0)}s fit time
 '''
 
 
@@ -363,13 +363,13 @@ def compare_models(target: str, problem_type: str, test_size: float, sid: str):
         # Extracts the best reported baseline name to build the comparison summary text
         best = comparison.get("best_algorithm")
         note = (
-            f"### Baseline comparison\nBest holdout baseline: **{best}**\n\nUse this as a starting point, then add cross-validation and hyperparameter tuning."
+            f"### Baseline Comparison:\nBest Holdout Baseline: **{best}**\n\nUse this as a starting point, then add cross-validation and hyperparameter tuning."
             if best
-            else "### Baseline comparison\nNo baseline completed successfully."
+            else "### Baseline Comparison:\nNo baseline completed successfully."
         )
         return note, frame, comparison
     except Exception as exc:
-        raise gr.Error(f"Baseline comparison failed: {exc}") from exc
+        raise gr.Error(f"Baseline Comparison Failed: {exc}") from exc
 
 # Runs the tool-calling machine-learning agent with the current dataset and modeling controls
 @spaces.GPU(duration=120)
@@ -1483,6 +1483,61 @@ html, body {
     0 0 28px rgba(255,211,122,.06) !important;
 }
 
+/* Center and evenly space the three primary ML Modeling actions only. */
+.model-action-row {
+  width: 100% !important;
+  max-width: 880px !important;
+  margin: 24px auto 0 !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  gap: clamp(28px, 4vw, 48px) !important;
+}
+
+.model-action-row > *,
+.model-action-row #train-button,
+.model-action-row #compare-button,
+.model-action-row #code-button {
+  flex: 0 1 260px !important;
+  width: 260px !important;
+  max-width: 260px !important;
+  min-width: 0 !important;
+  margin: 0 !important;
+}
+
+@media (max-width: 820px) {
+  .model-action-row {
+    gap: 16px !important;
+  }
+
+  .model-action-row > *,
+  .model-action-row #train-button,
+  .model-action-row #compare-button,
+  .model-action-row #code-button {
+    flex: 1 1 0 !important;
+    width: auto !important;
+    max-width: none !important;
+    min-width: 0 !important;
+  }
+}
+
+@media (max-width: 620px) {
+  .model-action-row {
+    flex-direction: column !important;
+    gap: 12px !important;
+    max-width: 420px !important;
+  }
+
+  .model-action-row > *,
+  .model-action-row #train-button,
+  .model-action-row #compare-button,
+  .model-action-row #code-button {
+    width: 100% !important;
+    max-width: 420px !important;
+    flex: 0 0 auto !important;
+  }
+}
+
 /* Secondary buttons */
 .gradio-container button.secondary,
 .gradio-container button:not(.primary) {
@@ -1641,21 +1696,39 @@ html, body {
   font-feature-settings: "liga" 1, "calt" 1;
 }
 
-.result-tabs [role="tablist"] {
-  gap: 7px !important;
-  margin-top: 11px !important;
+/* Agent result tabs: keep both buttons centered, equal-width, and evenly spaced. */
+#agent-result-tabs [role="tablist"] {
+  display: grid !important;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  gap: 14px !important;
+  width: 100% !important;
+  margin: 11px auto 0 !important;
   padding: 5px !important;
+  align-items: stretch !important;
+  justify-items: stretch !important;
+  justify-content: center !important;
   border-radius: 13px !important;
   background: rgba(255,255,255,.018);
 }
 
-.result-tabs button[role="tab"] {
-  border-radius: 10px !important;
+#agent-result-tabs button[role="tab"] {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  min-height: 44px !important;
+  margin: 0 !important;
   padding: 10px 13px !important;
+  flex: 1 1 0 !important;
+  text-align: center !important;
+  white-space: nowrap !important;
+  border-radius: 10px !important;
   color: #9e93a5 !important;
 }
 
-.result-tabs button[role="tab"][aria-selected="true"] {
+#agent-result-tabs button[role="tab"][aria-selected="true"] {
   color: #fff !important;
   background: rgba(255,95,135,.075) !important;
   border-color: rgba(255,95,135,.15) !important;
@@ -1703,6 +1776,122 @@ html, body {
   margin-top: 23px !important;
 }
 
+/* =========================================================
+   GRADIO FLOATING-UI / OUTPUT CLIPPING FIXES
+   - Dropdown menus use floating positioning. backdrop-filter on
+     an ancestor creates a new containing block and can shift the
+     popup by the panel's page offset.
+   - The original app-panel rule also used overflow:hidden, which
+     can clip dropdowns and first-line Markdown headings.
+   ========================================================= */
+.app-panel {
+  overflow: visible !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+#main-tabs,
+#main-tabs [role="tabpanel"],
+#main-tabs .tab-body,
+.model-controls-row,
+.model-control {
+  overflow: visible !important;
+}
+
+.model-controls-row {
+  position: relative !important;
+  z-index: 40 !important;
+}
+
+.model-control {
+  position: relative !important;
+  z-index: 41 !important;
+}
+
+.model-control:focus-within {
+  z-index: 1000 !important;
+}
+
+/* Keep Gradio/Floating-UI dropdown option panels above the rest of the model tab. */
+.gradio-container [role="listbox"] {
+  z-index: 100000 !important;
+}
+
+/* Second-pass stacking/layout fixes from browser screenshots.
+   1) Gradio 6 renders Dropdown options as a fixed <ul class="options">.
+      Give that actual popup the top layer so it paints over the slider label.
+   2) Keep the primary 01/02/03 tab rail inside the rounded app panel. */
+ul.options[role="listbox"] {
+  z-index: 2147483000 !important;
+}
+
+#target-column-dropdown,
+#problem-type-dropdown,
+#algorithm-dropdown {
+  position: relative !important;
+  z-index: 100 !important;
+}
+
+#target-column-dropdown:focus-within,
+#problem-type-dropdown:focus-within,
+#algorithm-dropdown:focus-within {
+  z-index: 2147482000 !important;
+}
+
+#holdout-test-size {
+  position: relative !important;
+  z-index: 0 !important;
+}
+
+/* Earlier styling explicitly set padding-top: 0 on .app-panel.
+   Restoring an inner top gutter prevents the tab buttons from protruding
+   above the panel's rounded top border. */
+.app-panel {
+  padding-top: 14px !important;
+}
+
+#main-tabs {
+  position: relative !important;
+  top: 0 !important;
+  margin-top: 0 !important;
+}
+
+#main-tabs [role="tablist"] {
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+  margin-top: 0 !important;
+}
+
+/* Result Markdown: prevent the first heading (Model evaluation,
+   Baseline Comparison, or an agent heading such as ML assessment)
+   from being clipped by the component's top edge. */
+.result-markdown {
+  overflow: visible !important;
+  padding-top: 10px !important;
+  padding-bottom: 4px !important;
+  min-height: 0 !important;
+}
+
+.result-markdown > div,
+.result-markdown .prose,
+.result-markdown [data-testid="markdown"] {
+  overflow: visible !important;
+}
+
+.result-markdown h1,
+.result-markdown h2,
+.result-markdown h3,
+.result-markdown h4,
+.result-markdown h5,
+.result-markdown h6 {
+  margin-top: .35rem !important;
+  margin-bottom: .65rem !important;
+  padding-top: .08em !important;
+  line-height: 1.35 !important;
+  overflow: visible !important;
+}
+
 /* Responsive refinement */
 @media (max-width: 1100px) {
   .hero-signal-grid {
@@ -1744,67 +1933,240 @@ html, body {
 }
 
 
+/* =========================================================
+   PRIMARY TAB SPACING FIX
+   Keep 01 / 02 / 03 evenly distributed across the top rail
+   on desktop while preserving the existing mobile behavior.
+   ========================================================= */
+@media (min-width: 801px) {
+  #main-tabs [role="tablist"] {
+    display: grid !important;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+    gap: 18px !important;
+    width: 100% !important;
+    align-items: center !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    margin: 0 !important;
+  }
+}
 
 
 /* =========================================================
-   ML MODELING DROPDOWN POPUP FIX
+   DATASET ACTION BUTTON STANDARDIZATION
+   Keep all three dataset actions identical in width/height.
    ========================================================= */
+#dataset-actions-row {
+  align-items: stretch !important;
+}
 
-/* Do not clip dropdown menus inside the glass/tabs layout. */
-.app-panel,
-#main-tabs,
-.tab-body {
-  overflow: visible !important;
+#dataset-actions-row #load-button,
+#dataset-actions-row #example-button,
+#dataset-actions-row #clear-button {
+  flex: 1 1 0 !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  height: 44px !important;
+  min-height: 44px !important;
+  max-height: 44px !important;
+  margin: 0 !important;
 }
 
-/* Keep the active dropdown above neighboring cards/components. */
-#target-dropdown,
-#problem-type-dropdown,
-#algorithm-dropdown {
-  position: relative !important;
-  overflow: visible !important;
+#dataset-actions-row #load-button button,
+#dataset-actions-row #example-button button,
+#dataset-actions-row #clear-button button {
+  width: 100% !important;
+  height: 44px !important;
+  min-height: 44px !important;
+  max-height: 44px !important;
+  white-space: nowrap !important;
 }
 
-#target-dropdown:focus-within,
-#problem-type-dropdown:focus-within,
-#algorithm-dropdown:focus-within {
-  z-index: 2147483000 !important;
+/* Allow the row to adapt cleanly on smaller screens without uneven controls. */
+@media (max-width: 800px) {
+  #dataset-actions-row {
+    flex-wrap: wrap !important;
+  }
+
+  #dataset-actions-row #load-button,
+  #dataset-actions-row #example-button,
+  #dataset-actions-row #clear-button {
+    flex: 1 1 100% !important;
+  }
 }
 
-/* Gradio renders the open option menu as <ul class="options">. */
-#target-dropdown ul.options,
-#problem-type-dropdown ul.options,
-#algorithm-dropdown ul.options {
-  display: block !important;
-  visibility: visible !important;
-  opacity: 1 !important;
-  pointer-events: auto !important;
-  z-index: 2147483647 !important;
-  overflow-y: auto !important;
-  max-height: 320px !important;
-  background: #17101d !important;
-  border: 1px solid rgba(255, 95, 135, .28) !important;
-  border-radius: 12px !important;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
+
+/* =========================================================
+   LAPTOP RESPONSIVE LAYOUT FIX
+   Keeps long labels inside their controls and keeps the three
+   ML Modeling action buttons aligned on one row on laptops.
+   ========================================================= */
+
+/* Dataset action row: equal controls, but allow long button text to wrap cleanly. */
+#dataset-actions-row {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  gap: 14px !important;
 }
 
-/* Ensure individual choices remain visible and clickable. */
-#target-dropdown li[data-testid="dropdown-option"],
-#problem-type-dropdown li[data-testid="dropdown-option"],
-#algorithm-dropdown li[data-testid="dropdown-option"] {
-  display: block !important;
-  visibility: visible !important;
-  opacity: 1 !important;
-  pointer-events: auto !important;
-  cursor: pointer !important;
-  color: #fff7fa !important;
-  background: #17101d !important;
+#dataset-actions-row > * {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+}
+
+#dataset-actions-row #load-button,
+#dataset-actions-row #example-button,
+#dataset-actions-row #clear-button,
+#dataset-actions-row #load-button button,
+#dataset-actions-row #example-button button,
+#dataset-actions-row #clear-button button {
+  width: 100% !important;
+  min-width: 0 !important;
+  height: auto !important;
+  max-height: none !important;
+  min-height: 56px !important;
+}
+
+#dataset-actions-row #load-button button,
+#dataset-actions-row #example-button button,
+#dataset-actions-row #clear-button button {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  line-height: 1.18 !important;
+  padding: 10px 14px !important;
+  text-align: center !important;
+}
+
+/* Primary tabs: give the long ML Modeling label more room and allow wrapping. */
+@media (min-width: 801px) {
+  #main-tabs [role="tablist"] {
+    grid-template-columns:
+      minmax(0, 0.88fr)
+      minmax(0, 1.24fr)
+      minmax(0, 0.88fr) !important;
+    gap: 14px !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    min-width: 0 !important;
+    min-height: 64px !important;
+    padding: 11px 14px !important;
+    white-space: normal !important;
+    overflow-wrap: anywhere !important;
+    word-break: normal !important;
+    line-height: 1.16 !important;
+    text-align: center !important;
+  }
+}
+
+/* ML Modeling actions: always one aligned row on laptop/desktop. */
+.model-action-row {
+  width: 100% !important;
+  max-width: none !important;
+  margin: 24px 0 0 !important;
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: stretch !important;
+  gap: 16px !important;
+}
+
+.model-action-row > * {
+  flex: 1 1 0 !important;
+  width: auto !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  margin: 0 !important;
 }
 
-#target-dropdown li[data-testid="dropdown-option"]:hover,
-#problem-type-dropdown li[data-testid="dropdown-option"]:hover,
-#algorithm-dropdown li[data-testid="dropdown-option"]:hover {
-  background: rgba(255, 95, 135, .12) !important;
+.model-action-row #train-button,
+.model-action-row #compare-button,
+.model-action-row #code-button,
+.model-action-row #train-button button,
+.model-action-row #compare-button button,
+.model-action-row #code-button button {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: auto !important;
+  min-height: 58px !important;
+  margin: 0 !important;
+}
+
+.model-action-row #train-button button,
+.model-action-row #compare-button button,
+.model-action-row #code-button button {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  line-height: 1.16 !important;
+  padding: 11px 12px !important;
+  text-align: center !important;
+}
+
+/* Laptop widths: slightly tighten text and spacing without wrapping rows. */
+@media (min-width: 801px) and (max-width: 1450px) {
+  #dataset-actions-row {
+    gap: 10px !important;
+  }
+
+  #dataset-actions-row button {
+    font-size: 12.5px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  #main-tabs [role="tablist"] {
+    gap: 10px !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    font-size: 12.5px !important;
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+
+  .model-action-row {
+    gap: 12px !important;
+  }
+
+  .model-action-row #train-button button,
+  .model-action-row #compare-button button,
+  .model-action-row #code-button button {
+    font-size: 13.5px !important;
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+}
+
+/* Tablet/mobile: stack action controls so they remain readable. */
+@media (max-width: 800px) {
+  #dataset-actions-row,
+  .model-action-row {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    gap: 12px !important;
+  }
+
+  #dataset-actions-row > *,
+  .model-action-row > * {
+    width: 100% !important;
+    max-width: none !important;
+    flex: 0 0 auto !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    white-space: normal !important;
+    line-height: 1.15 !important;
+  }
 }
 
 '''
@@ -1828,9 +2190,9 @@ def build_app():
     <div class="hero">
       <div class="hero-grid">
         <div>
-          <div class="eyebrow"><span class="eyebrow-dot"></span> Agentic Machine Learning · Model Selection + Pipeline Generation</div>
-          <h1>Agentic Machine Learning Engineer (Traditional ML)</h1>
-          <p>Load a real dataset, select the prediction target and MLalgorithm, train traditional machine learning baselines, compare models, and use a Qwen3-Coder tool-calling agent to turn findings into production-ready scikit-learn pipeline code.</p>
+          <div class="eyebrow"><span class="eyebrow-dot"></span> Agentic Machine Learning ·  (Traditional ML) Supervised Learning · Model Selection + Pipeline Generation</div>
+          <h1>Agentic Machine Learning Engineer</h1>
+          <p>Load a real dataset, select the prediction target variable (in the data) and ML algorithm, train traditional machine learning baselines, compare models (pick the best one), and use a Qwen3-Coder tool-calling agent to turn findings into production-ready scikit-learn pipeline code.</p>
           <div class="badges">
             <span class="badge badge-accent"><strong>Agent</strong> HF tool calling</span>
             <span class="badge"><strong>Model</strong> {html.escape(HF_MODEL_ID)}</span>
@@ -1881,36 +2243,68 @@ def build_app():
                                     label="Dataset file",
                                     file_types=[".csv", ".parquet", ".json", ".jsonl", ".xlsx", ".xls"],
                                 )
-                                # Groups the dataset load, example-load, and workspace-reset actions together
-                                with gr.Row():
-                                    load_btn = gr.Button("Load + Profile Dataset", variant="primary", elem_id="load-button")
-                                    example_btn = gr.Button("Load HF Dataset (Example Dataset)")
-                                    clear_btn = gr.Button("Clear Workspace")
+                                # Groups the dataset load, example-load, and workspace-reset actions together.
+                                # Equal scale/min-width values keep all three actions exactly the same width.
+                                with gr.Row(equal_height=True, elem_id="dataset-actions-row"):
+                                    load_btn = gr.Button(
+                                        "Load + Profile Dataset",
+                                        variant="primary",
+                                        elem_id="load-button",
+                                        scale=1,
+                                        min_width=0,
+                                    )
+                                    example_btn = gr.Button(
+                                        "Load HF Dataset (Example Dataset)",
+                                        elem_id="example-button",
+                                        scale=1,
+                                        min_width=0,
+                                    )
+                                    clear_btn = gr.Button(
+                                        "Clear Workspace",
+                                        elem_id="clear-button",
+                                        scale=1,
+                                        min_width=0,
+                                    )
                                 # Creates read-only dataframe components for the dataset preview and inferred schema
-                                preview = gr.Dataframe(label="Dataset Preview", interactive=False, wrap=True, elem_id="dataset-preview")
-                                schema_table = gr.Dataframe(label="Dataset Schema", interactive=False, wrap=True, elem_id="dataset-schema")
+                                preview = gr.Dataframe(label="Dataset Preview:", interactive=False, wrap=True, elem_id="dataset-preview")
+                                schema_table = gr.Dataframe(label="Dataset Schema:", interactive=False, wrap=True, elem_id="dataset-schema")
                                 gr.HTML(f'''<div class="info-note"><strong>HF sample:</strong> <code>{EXAMPLE_DATASET_REPO}</code> · target <code>{EXAMPLE_DATASET_TARGET}</code>. Public Space: do not upload confidential, regulated, proprietary, production customer, or PII data.</div>''')
 
                         # Builds the modeling tab for target selection, training, comparison, and pipeline generation
-                        with gr.Tab("02. ML Modeling", id="model-lab"):
+                        with gr.Tab("02. ML Modeling (Optional Fallback Models)", id="model-lab"):
                             with gr.Column(elem_classes=["tab-body"]):
-                                gr.HTML('''<div class="section-head"><div class="section-kicker">Supervised Learning</div><h2>Choose a Target, Algorithm, and Evaluation Setup</h2><p>Build a preprocessing + model pipeline, evaluate it on a holdout split, compare baselines, and inspect generated code.</p></div>''')
-
-                                # Groups the target, problem-type, and algorithm selectors on a single modeling row
-                                with gr.Row():
-                                    target = gr.Dropdown(label="Target column", choices=[], value=None, interactive=True, filterable=True, elem_id="target-dropdown")
+                                gr.HTML('''<div class="section-head"><div class="section-kicker">Supervised Learning</div><h2>Choose a Target Variable (Feature), Algorithm, and Evaluation Setup</h2><p>Build a preprocessing + model pipeline, evaluate it on a holdout split, compare baselines, and evaluate generated pipelines (scikit-learn pipelines).</p></div>''')
+
+                                # Groups the target, problem-type, and algorithm selectors on a single modeling row.
+                                # The CSS hooks keep Gradio's floating dropdown menus anchored to these controls.
+                                with gr.Row(elem_classes=["model-controls-row"]):
+                                    target = gr.Dropdown(
+                                        label="Target column",
+                                        choices=[],
+                                        value=None,
+                                        interactive=True,
+                                        elem_id="target-column-dropdown",
+                                        elem_classes=["model-control"],
+                                    )
                                     problem_type = gr.Dropdown(
                                         label="Problem type",
                                         choices=["Auto", "classification", "regression"],
                                         value="Auto",
                                         interactive=True,
-                                        filterable=True,
                                         elem_id="problem-type-dropdown",
+                                        elem_classes=["model-control"],
+                                    )
+                                    algorithm = gr.Dropdown(
+                                        label="Algorithm",
+                                        choices=ALL_ALGORITHMS,
+                                        value="Auto",
+                                        interactive=True,
+                                        elem_id="algorithm-dropdown",
+                                        elem_classes=["model-control"],
                                     )
-                                    algorithm = gr.Dropdown(label="Algorithm", choices=ALL_ALGORITHMS, value="Auto", interactive=True, filterable=True, elem_id="algorithm-dropdown")
 
                                 # Configures the holdout-size control used by training, comparison, and code generation
-                                test_size = gr.Slider(0.1, 0.4, value=0.2, step=0.05, label="Holdout test size")
+                                test_size = gr.Slider(0.1, 0.4, value=0.2, step=0.05, label="Holdout test size", elem_id="holdout-test-size")
 
                                 gr.HTML('''
                                 <div class="metric-strip">
@@ -1922,24 +2316,24 @@ def build_app():
                                 ''')
 
                                 # Groups the primary model-training, baseline-comparison, and pipeline-generation actions
-                                with gr.Row():
+                                with gr.Row(elem_classes=["model-action-row"]):
                                     train_btn = gr.Button("Train Selected Model", variant="primary", elem_id="train-button")
                                     compare_btn = gr.Button("Compare Baselines", variant="primary", elem_id="compare-button")
                                     code_btn = gr.Button("Generate Pipeline Code", variant="primary", elem_id="code-button")
 
                                 # Creates the components that display model summaries, metrics, importance, comparisons, code, and artifacts
-                                model_summary = gr.Markdown("")
+                                model_summary = gr.Markdown("", elem_id="model-summary", elem_classes=["result-markdown"])
                                 model_metrics = gr.JSON(label="Evaluation metrics")
-                                feature_importance = gr.Dataframe(label="Feature importance / coefficient magnitude", interactive=False, wrap=True, elem_id="feature-importance")
-                                compare_summary = gr.Markdown("")
-                                leaderboard = gr.Dataframe(label="Baseline leaderboard", interactive=False, wrap=True, elem_id="leaderboard")
-                                pipeline_code = gr.Code(label="Selected algorithm pipeline", language="python", lines=30)
-                                model_artifact = gr.File(label="Trained pipeline artifact (.joblib)", interactive=False)
+                                feature_importance = gr.Dataframe(label="Feature importance / coefficient magnitude:", interactive=False, wrap=True, elem_id="feature-importance")
+                                compare_summary = gr.Markdown("", elem_id="compare-summary", elem_classes=["result-markdown"])
+                                leaderboard = gr.Dataframe(label="Baseline Leaderboard:", interactive=False, wrap=True, elem_id="leaderboard")
+                                pipeline_code = gr.Code(label="Selected Algorithm Pipeline", language="python", lines=30)
+                                model_artifact = gr.File(label="Trained Pipeline Artifact (.joblib)", interactive=False)
 
                         # Builds the agent tab for natural-language ML tasks, generated code, and tool-trace inspection
                         with gr.Tab("03. ML Agent", id="agent"):
                             with gr.Column(elem_classes=["tab-body"]):
-                                gr.HTML('''<div class="section-head"><div class="section-kicker">Machine Learning Agent</div><h2>Turn Dataset Findings Into an ML Plan and Pipeline</h2><p>Agent can inspect the dataset, validate the target framing, train the selected model, compare baselines, and generate a grounded scikit-learn pipeline.</p></div>''')
+                                gr.HTML('''<div class="section-head"><div class="section-kicker">Machine Learning Agent</div><h2>Turn Dataset Findings Into an ML Strategy and Pipeline Code (sci-kit learn)</h2><p>Agent can inspect the dataset, validate the target framing, train the selected model, compare baselines, and generate scikit-learn pipelines.</p></div>''')
                                 # Configures the agent task prompt field with a comprehensive default machine-learning request
                                 task = gr.Textbox(
                                     label="Machine learning task",
@@ -1950,8 +2344,8 @@ def build_app():
                                 )
                                 # Creates the agent execution button and result components for answers, code, and tool traces
                                 agent_btn = gr.Button("Run Machine Learning Agent", variant="primary", elem_id="agent-button")
-                                agent_answer = gr.Markdown("")
-                                with gr.Tabs(elem_classes=["result-tabs"]):
+                                agent_answer = gr.Markdown("", elem_id="agent-answer", elem_classes=["result-markdown"])
+                                with gr.Tabs(elem_id="agent-result-tabs", elem_classes=["result-tabs"]):
                                     with gr.Tab("Recommended Pipeline"):
                                         agent_code = gr.Code(label="Generated Python", language="python", lines=28)
                                     with gr.Tab("Tool Trace"):
@@ -1970,7 +2364,7 @@ def build_app():
                     <div class="sidebar-card">
                       <h3>Agent Capabilities</h3>
                       <ol>
-                        <li>Inspect shape, types, nulls, cardinality, and examples</li>
+                        <li>Check data shapes, types, nulls, cardinality, and examples</li>
                         <li>Pick classification or regression algorithms from the selected target feature</li>
                         <li>Train and evaluate baseline models</li>
                         <li>Compare multiple algorithms using holdout metrics</li>
@@ -2009,11 +2403,11 @@ def build_app():
 
         # Keep the algorithm picker and generated pipeline aligned to the selected target
         # Synchronizes model choices and generated pipeline code whenever the target selection changes
-        target.input(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
+        target.change(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
         # Synchronizes model choices and generated pipeline code whenever the problem type changes
-        problem_type.input(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
+        problem_type.change(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
         # Regenerates pipeline code whenever the selected algorithm changes
-        algorithm.input(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])
+        algorithm.change(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])
         # Regenerates pipeline code whenever the holdout split size changes
         test_size.change(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])