Moving app to gradio to avoid flickering issues

.gitignore

@@ -5,4 +5,5 @@ requirements.md
 DEPLOY.md
 *.Rproj
 .Rproj.user/
-nul
+nul
+CLAUDE.md

.streamlit/config.toml

@@ -1,7 +0,0 @@
-[server]
-headless = true
-fileWatcherType = "none"
-runOnSave = false
-
-[browser]
-gatherUsageStats = false

Dockerfile

@@ -18,9 +18,7 @@ COPY --chown=user:user . .
 
 EXPOSE 7860
 
-CMD ["streamlit", "run", "app.py", \
-     "--server.port=7860", \
-     "--server.address=0.0.0.0", \
-     "--server.enableXsrfProtection=false", \
-     "--server.enableCORS=false", \
-     "--browser.gatherUsageStats=false"]
+ENV GRADIO_SERVER_NAME="0.0.0.0"
+ENV GRADIO_SERVER_PORT="7860"
+
+CMD ["python", "app.py"]

README.md

@@ -10,7 +10,7 @@ pinned: false
 
 # Time Series Visualizer + AI Chart Interpreter
 
-A Streamlit app for Miami University Business Analytics students to upload CSV
+A Gradio app for Miami University Business Analytics students to upload CSV
 time-series data, create publication-quality charts, and get AI-powered chart
 interpretation.
 

app.py

@@ -1,14 +1,15 @@
 """
 Time Series Visualizer + AI Chart Interpreter
 =============================================
-Main Streamlit application.  Run with:
+Main Gradio application.  Run with:
 
-    streamlit run app.py --server.port=7860
+    python app.py
 """
 
 from __future__ import annotations
 
 import hashlib
+import io
 from pathlib import Path
 
 from dotenv import load_dotenv
@@ -17,17 +18,19 @@ load_dotenv()
 import matplotlib
 matplotlib.use("Agg")
 
+import numpy as np
 import pandas as pd
-import streamlit as st
+import gradio as gr
 
 from src.ui_theme import (
-    apply_miami_theme,
+    MiamiTheme,
+    get_miami_css,
     get_miami_mpl_style,
     get_palette_colors,
     render_palette_preview,
 )
 from src.cleaning import (
-    read_csv_upload,
+    detect_delimiter,
     suggest_date_columns,
     suggest_numeric_columns,
     clean_dataframe,
@@ -42,7 +45,6 @@ from src.diagnostics import (
     compute_summary_stats,
     compute_acf_pacf,
     compute_decomposition,
-    compute_rolling_stats,
     compute_yoy_change,
     compute_multi_series_summary,
 )
@@ -63,7 +65,7 @@ from src.plotting import (
 from src.ai_interpretation import (
     check_api_key_available,
     interpret_chart,
-    render_interpretation,
+    render_interpretation_markdown,
 )
 from src.querychat_helpers import (
     check_querychat_available,
@@ -80,10 +82,11 @@ _DEMO_FILES = {
     "Manufacturing Employment by State (wide, monthly)": _DATA_DIR / "demo_manufacturing_wide.csv",
     "Manufacturing Employment by State (long, monthly)": _DATA_DIR / "demo_manufacturing_long.csv",
 }
+_DEMO_CHOICES = ["(none)"] + list(_DEMO_FILES.keys())
 
 _CHART_TYPES = [
     "Line with Markers",
-    "Line – Colored Markers",
+    "Line \u2013 Colored Markers",
     "Seasonal Plot",
     "Seasonal Sub-series",
     "ACF / PACF",
@@ -94,1117 +97,1100 @@ _CHART_TYPES = [
 ]
 
 _PALETTE_NAMES = ["Set2", "Dark2", "Set1", "Paired", "Pastel1", "Pastel2", "Accent"]
-_VIEW_SPECS = [
-    ("Single Series", "single"),
-    ("Few Series (Panel)", "panel"),
-    ("Many Series (Spaghetti)", "spaghetti"),
-]
-_VIEW_LABELS = [label for label, _ in _VIEW_SPECS]
-_VIEW_SLUG_BY_LABEL = dict(_VIEW_SPECS)
-_VIEW_LABEL_BY_SLUG = {slug: label for label, slug in _VIEW_SPECS}
-_ANALYSIS_STATE_KEYS = [
-    "tab_a_y", "dr_mode", "dr_n", "dr_custom",
-    "chart_type_a", "pal_a", "color_by_a", "period_a", "window_a", "lag_a", "decomp_a",
-    "_single_df_plot", "_single_fig", "_single_active_y", "_single_chart_type",
-    "_single_input_key", "_single_stats",
-    "panel_cols", "panel_chart", "panel_shared", "pal_b", "_panel_fig",
-    "_panel_input_key", "_panel_summary_df",
-    "spag_cols", "spag_alpha", "spag_topn", "spag_highlight", "spag_median", "pal_c", "_spag_fig",
-    "_spag_input_key", "_spag_summary_df",
-]
+_STYLE_DICT = get_miami_mpl_style()
+
+# ---------------------------------------------------------------------------
+# State helpers
+# ---------------------------------------------------------------------------
+
+def _make_empty_state() -> dict:
+    return {
+        "raw_df_original": None,
+        "cleaned_df": None,
+        "cleaning_report": None,
+        "freq_info": None,
+        "date_col": None,
+        "y_cols": None,
+        "setup_applied": False,
+        "single_png": None,
+        "panel_png": None,
+        "spag_png": None,
+        "qc": None,
+    }
 
 
 # ---------------------------------------------------------------------------
-# Helpers
+# Formatting helpers
 # ---------------------------------------------------------------------------
 
-def _df_hash(df: pd.DataFrame) -> str:
-    """Fast hash of a DataFrame for cache-key / change-detection."""
-    return hashlib.md5(
-        pd.util.hash_pandas_object(df).values.tobytes()
-    ).hexdigest()
+def _format_cleaning_report_md(report: CleaningReport) -> str:
+    lines = [
+        "| Metric | Value |", "|:--|:--|",
+        f"| **Rows before** | {report.rows_before:,} |",
+        f"| **Rows after** | {report.rows_after:,} |",
+        f"| **Duplicates found** | {report.duplicates_found:,} |",
+    ]
+    if report.missing_before:
+        lines += ["", "**Missing values:**", "| Column | Before | After |", "|:--|:--|:--|"]
+        for col in report.missing_before:
+            lines.append(f"| {col} | {report.missing_before[col]} | {report.missing_after.get(col, 0)} |")
+    if report.parsing_warnings:
+        lines += ["", "**Warnings:**"]
+        for w in report.parsing_warnings:
+            lines.append(f"- {w}")
+    return "\n".join(lines)
+
+
+def _fmt(val, fmt_str):
+    return fmt_str.format(val) if pd.notna(val) else "N/A"
+
+
+def _format_summary_stats_md(stats) -> str:
+    lines = [
+        "| Statistic | Value |", "|:--|:--|",
+        f"| **Count** | {stats.count:,} |",
+        f"| **Missing** | {stats.missing_count} ({stats.missing_pct:.1f}%) |",
+        f"| **Mean** | {stats.mean_val:,.2f} |",
+        f"| **Std Dev** | {stats.std_val:,.2f} |",
+        f"| **Min** | {stats.min_val:,.2f} |",
+        f"| **25th %ile** | {stats.p25:,.2f} |",
+        f"| **Median** | {stats.median_val:,.2f} |",
+        f"| **75th %ile** | {stats.p75:,.2f} |",
+        f"| **Max** | {stats.max_val:,.2f} |",
+        f"| **Trend slope** | {_fmt(stats.trend_slope, '{:,.4f}')} |",
+        f"| **Trend p-value** | {_fmt(stats.trend_pvalue, '{:.4f}')} |",
+        f"| **ADF statistic** | {_fmt(stats.adf_statistic, '{:.4f}')} |",
+        f"| **ADF p-value** | {_fmt(stats.adf_pvalue, '{:.4f}')} |",
+        "",
+        f"*Date range: {stats.date_start.date()} to {stats.date_end.date()} ({stats.date_span_days:,} days)*",
+    ]
+    return "\n".join(lines)
+
+
+def _format_multi_summary_md(summary_df: pd.DataFrame) -> str:
+    lines = [
+        "| Variable | Count | Mean | Std | Min | Max | Trend Slope | ADF p |",
+        "|:--|--:|--:|--:|--:|--:|--:|--:|",
+    ]
+    for _, row in summary_df.iterrows():
+        adf = f"{row['adf_pvalue']:.4f}" if pd.notna(row['adf_pvalue']) else "N/A"
+        slope = f"{row['trend_slope']:,.4f}" if pd.notna(row['trend_slope']) else "N/A"
+        lines.append(
+            f"| {row['variable']} | {row['count']:,} | {row['mean']:,.2f} | "
+            f"{row['std']:,.2f} | {row['min']:,.2f} | {row['max']:,.2f} | "
+            f"{slope} | {adf} |"
+        )
+    return "\n".join(lines)
 
 
-def _load_demo(path: Path) -> pd.DataFrame:
-    return pd.read_csv(path)
+# ---------------------------------------------------------------------------
+# Data helpers
+# ---------------------------------------------------------------------------
 
+def _read_file_to_df(file_path: str) -> tuple[pd.DataFrame, str]:
+    with open(file_path, "rb") as f:
+        raw = f.read()
+    delim = detect_delimiter(raw)
+    text = raw.decode("utf-8", errors="replace")
+    df = pd.read_csv(io.StringIO(text), sep=delim)
+    return df, delim
+
+
+def _apply_date_filter(df, date_col, mode, n_years, custom_start, custom_end):
+    if mode == "Last N years" and n_years:
+        cutoff = df[date_col].max() - pd.DateOffset(years=int(n_years))
+        df = df[df[date_col] >= cutoff]
+    elif mode == "Custom":
+        try:
+            if custom_start and str(custom_start).strip():
+                df = df[df[date_col] >= pd.to_datetime(custom_start)]
+        except (ValueError, TypeError):
+            pass
+        try:
+            if custom_end and str(custom_end).strip():
+                df = df[df[date_col] <= pd.to_datetime(custom_end)]
+        except (ValueError, TypeError):
+            pass
+    return df
+
+
+def _generate_single_chart(df_plot, date_col, active_y, chart_type, palette_colors,
+                           color_by, period_label, window_size, lag_val, decomp_model,
+                           freq_info):
+    """Generate a single chart figure.  Returns ``(fig, error_msg)``."""
+    try:
+        if chart_type == "Line with Markers":
+            return plot_line_with_markers(
+                df_plot, date_col, active_y,
+                title=f"{active_y} over Time",
+                style_dict=_STYLE_DICT, palette_colors=palette_colors,
+            ), None
+
+        elif "Colored Markers" in chart_type and color_by:
+            return plot_line_colored_markers(
+                df_plot, date_col, active_y,
+                color_by=color_by, palette_colors=palette_colors,
+                title=f"{active_y} colored by {color_by}",
+                style_dict=_STYLE_DICT,
+            ), None
+
+        elif chart_type == "Seasonal Plot":
+            return plot_seasonal(
+                df_plot, date_col, active_y,
+                period=period_label or "month",
+                palette_name_colors=palette_colors,
+                title=f"Seasonal Plot - {active_y}",
+                style_dict=_STYLE_DICT,
+            ), None
+
+        elif chart_type == "Seasonal Sub-series":
+            return plot_seasonal_subseries(
+                df_plot, date_col, active_y,
+                period=period_label or "month",
+                title=f"Seasonal Sub-series - {active_y}",
+                style_dict=_STYLE_DICT, palette_colors=palette_colors,
+            ), None
+
+        elif chart_type == "ACF / PACF":
+            series = df_plot[active_y].dropna()
+            acf_vals, acf_ci, pacf_vals, pacf_ci = compute_acf_pacf(series)
+            return plot_acf_pacf(
+                acf_vals, acf_ci, pacf_vals, pacf_ci,
+                title=f"ACF / PACF - {active_y}",
+                style_dict=_STYLE_DICT,
+            ), None
+
+        elif chart_type == "Decomposition":
+            period_int = None
+            if freq_info:
+                period_int = {"Monthly": 12, "Quarterly": 4, "Weekly": 52, "Daily": 365}.get(freq_info.label)
+            result = compute_decomposition(
+                df_plot, date_col, active_y,
+                model=decomp_model or "additive", period=period_int,
+            )
+            return plot_decomposition(
+                result,
+                title=f"Decomposition - {active_y} ({decomp_model})",
+                style_dict=_STYLE_DICT,
+            ), None
+
+        elif chart_type == "Rolling Mean Overlay":
+            w = int(window_size) if window_size else 12
+            return plot_rolling_overlay(
+                df_plot, date_col, active_y,
+                window=w,
+                title=f"Rolling {w}-pt Mean - {active_y}",
+                style_dict=_STYLE_DICT, palette_colors=palette_colors,
+            ), None
+
+        elif chart_type == "Year-over-Year Change":
+            yoy_result = compute_yoy_change(df_plot, date_col, active_y)
+            yoy_df = pd.DataFrame({
+                "date": yoy_result[date_col],
+                "abs_change": yoy_result["yoy_abs_change"],
+                "pct_change": yoy_result["yoy_pct_change"],
+            }).dropna()
+            return plot_yoy_change(
+                df_plot, date_col, active_y, yoy_df,
+                title=f"Year-over-Year Change - {active_y}",
+                style_dict=_STYLE_DICT,
+            ), None
+
+        elif chart_type == "Lag Plot":
+            lag = int(lag_val) if lag_val else 1
+            return plot_lag(
+                df_plot[active_y],
+                lag=lag,
+                title=f"Lag-{lag} Plot - {active_y}",
+                style_dict=_STYLE_DICT,
+            ), None
+
+    except Exception as exc:
+        return None, str(exc)
+
+    return None, "Unknown chart type"
 
-def _scalar_query_param(value):
-    """Return the first item for multi-valued query params."""
-    if isinstance(value, list):
-        return value[0] if value else None
-    return value
 
+# ---------------------------------------------------------------------------
+# HTML fragments
+# ---------------------------------------------------------------------------
 
-def _initial_view_label() -> str:
-    """Resolve initial view from query params when available."""
-    requested = _scalar_query_param(st.query_params.get("view"))
-    return _VIEW_LABEL_BY_SLUG.get(requested, _VIEW_LABELS[0])
+_DEVELOPER_CARD = """
+<div class="dev-card">
+    <div class="dev-row">
+        <svg class="dev-avatar" viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+            <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37c.69-1.198 1.97-2.015 3.526-2.015h3.884c1.556 0 2.835.817 3.526 2.014A7 7 0 0 0 8 1"/>
+        </svg>
+        <div>
+            <div class="dev-name">Fadel M. Megahed</div>
+            <div class="dev-role">
+                Raymond E. Glos Professor, Farmer School of Business<br>
+                Miami University
+            </div>
+        </div>
+    </div>
+    <div class="dev-links">
+        <a class="dev-link" href="mailto:fmegahed@miamioh.edu">
+            <svg viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.708 2.825L15 11.105zM14.247 12.6 9.114 8.98 8 9.67 6.886 8.98 1.753 12.6A1 1 0 0 0 2 13h12a1 1 0 0 0 .247-.4zM1 11.105l4.708-2.897L1 5.383z"/></svg>
+            Email</a>
+        <a class="dev-link" href="https://www.linkedin.com/in/fadel-megahed-289046b4/" target="_blank">
+            <svg viewBox="0 0 16 16"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.475 0 16 .513 16 1.146v13.708c0 .633-.525 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zM4.943 13.5V6H2.542v7.5zM3.743 4.927c.837 0 1.358-.554 1.358-1.248-.015-.709-.521-1.248-1.342-1.248-.821 0-1.358.54-1.358 1.248 0 .694.521 1.248 1.327 1.248zm4.908 8.573V9.359c0-.22.016-.44.08-.598.176-.44.576-.897 1.248-.897.88 0 1.232.676 1.232 1.667v4.0h2.401V9.247c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193h.016V6H6.35c.03.7 0 7.5 0 7.5z"/></svg>
+            LinkedIn</a>
+        <a class="dev-link" href="https://miamioh.edu/fsb/directory/?up=/directory/megahefm" target="_blank">
+            <svg viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1.018 7.5h2.49a14 14 0 0 1 .535-3.55A6 6 0 0 0 1.018 7.5m0 1h2.49c.05 1.24.217 2.44.535 3.55a6 6 0 0 1-3.025-3.55m11.964 0a6 6 0 0 1-3.025 3.55c.318-1.11.485-2.31.535-3.55zm0-1a6 6 0 0 0-3.025-3.55c.318 1.11.485 2.31.535 3.55zM8 1.016q.347.372.643.812C9.157 2.6 9.545 3.71 9.757 5H6.243c.212-1.29.6-2.4 1.114-3.172Q7.653 1.388 8 1.016M8 15q-.347-.372-.643-.812C6.843 13.4 6.455 12.29 6.243 11h3.514c-.212 1.29-.6 2.4-1.114 3.172A6 6 0 0 1 8 14.984M5.494 7.5a13 13 0 0 0 0 1h5.012a13 13 0 0 0 0-1z"/></svg>
+            Website</a>
+        <a class="dev-link" href="https://github.com/fmegahed/" target="_blank">
+            <svg viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/></svg>
+            GitHub</a>
+    </div>
+</div>
+"""
 
+_WELCOME_MD = """
+# Time Series Visualizer
+*ISA 444 \u00b7 Miami University \u00b7 Farmer School of Business*
+
+---
+
+### Get Started in 3 Steps
+
+<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin:1rem 0;">
+<div class="step-card">
+  <div class="step-number">1</div>
+  <div class="step-title">Load Data</div>
+  <div class="step-desc">Upload a CSV from the sidebar or pick one of the built-in demo datasets.</div>
+</div>
+<div class="step-card">
+  <div class="step-number">2</div>
+  <div class="step-title">Pick Columns</div>
+  <div class="step-desc">Select a date column and one or more numeric value columns. The app auto-detects sensible defaults.</div>
+</div>
+<div class="step-card">
+  <div class="step-number">3</div>
+  <div class="step-title">Explore</div>
+  <div class="step-desc">Choose from 9+ chart types, view summary statistics, and get AI-powered chart interpretation.</div>
+</div>
+</div>
+
+---
+
+### Features
+
+| | |
+|:--|:--|
+| **Smart Import** | Auto-detect delimiters, dates, and numeric formats |
+| **9+ Chart Types** | Line, seasonal, ACF/PACF, decomposition, lag, and more |
+| **Multi-Series** | Panel (small multiples) and spaghetti plots |
+| **AI Insights** | GPT vision analyzes your charts and returns structured interpretation |
+| **QueryChat** | Natural-language data filtering powered by DuckDB |
+
+### Good to Know
+
+**Privacy** \u2014 All data processing happens in-memory.
+No data is stored on disk. Only chart images (never raw data) are sent to
+OpenAI when you click *Interpret Chart with AI*.
+
+**Demo Datasets** \u2014 Three built-in FRED datasets are available in the
+sidebar: Ohio Unemployment Rate (single series), Manufacturing Employment
+for five states in wide format, and the same data in long/stacked format.
+"""
 
-def _reset_all_state() -> None:
-    """Clear all session/query state and rerun."""
-    for key in list(st.session_state.keys()):
-        del st.session_state[key]
-    st.query_params.clear()
-    st.rerun()
 
+# ---------------------------------------------------------------------------
+# Event handlers
+# ---------------------------------------------------------------------------
 
-def _sync_view_query_param() -> None:
-    """Write current active view to URL query params."""
-    active = st.session_state.get("active_view")
-    if active in _VIEW_SLUG_BY_LABEL:
-        st.query_params["view"] = _VIEW_SLUG_BY_LABEL[active]
+def _process_new_data(df: pd.DataFrame, delim: str | None = None):
+    """Shared logic for file upload and demo select.
+
+    Returns a tuple of values matching ``_DATA_LOAD_OUTPUTS``.
+    """
+    state = _make_empty_state()
+    state["raw_df_original"] = df
+
+    all_cols = list(df.columns)
+    date_suggestions = suggest_date_columns(df)
+    default_date = date_suggestions[0] if date_suggestions else all_cols[0]
+
+    is_long, auto_group, auto_value = detect_long_format(df, default_date)
+    fmt = "Long" if is_long else "Wide"
+
+    other_cols = [c for c in all_cols if c != default_date]
+    string_cols = [
+        c for c in other_cols
+        if df[c].dtype == object or pd.api.types.is_string_dtype(df[c])
+    ]
+    numeric_cols = [
+        c for c in other_cols if pd.api.types.is_numeric_dtype(df[c])
+    ]
+
+    group_default = (
+        auto_group if auto_group and auto_group in string_cols
+        else (string_cols[0] if string_cols else None)
+    )
+    value_options = [c for c in numeric_cols if c != group_default] if group_default else numeric_cols
+    value_default = (
+        auto_value if auto_value and auto_value in value_options
+        else (value_options[0] if value_options else None)
+    )
 
+    # Compute initial y_cols
+    if is_long and group_default and value_default:
+        try:
+            effective = pivot_long_to_wide(df, default_date, group_default, value_default)
+            available_y = [c for c in effective.columns if c != default_date]
+        except Exception:
+            available_y = list(numeric_cols)
+    else:
+        numeric_suggest = suggest_numeric_columns(df)
+        available_y = [c for c in numeric_suggest if c != default_date]
+
+    default_y = available_y[:4] if available_y else []
+    delim_text = f"Detected delimiter: `{repr(delim)}`" if delim else ""
+
+    return (
+        state,                                                           # app_state
+        gr.Column(visible=True),                                         # setup_col
+        gr.Dropdown(choices=all_cols, value=default_date),               # date_col_dd
+        gr.Radio(value=fmt),                                             # format_radio
+        gr.Column(visible=is_long),                                      # long_col
+        gr.Dropdown(choices=string_cols, value=group_default),           # group_col_dd
+        gr.Dropdown(choices=value_options, value=value_default),         # value_col_dd
+        gr.CheckboxGroup(choices=available_y, value=default_y),          # y_cols_cbg
+        delim_text,                                                      # delim_md
+        gr.Column(visible=True),                                         # welcome_col
+        gr.Column(visible=False),                                        # analysis_col
+    )
 
-def _clear_analysis_state(reset_querychat: bool = False) -> None:
-    """Clear per-view chart controls/outputs."""
-    for key in _ANALYSIS_STATE_KEYS:
-        st.session_state.pop(key, None)
-    if reset_querychat:
-        st.session_state["qc"] = None
-        st.session_state["qc_hash"] = None
-        st.session_state["enable_querychat"] = False
 
+def on_file_upload(file_obj, state):
+    if file_obj is None:
+        empty = _make_empty_state()
+        return (
+            empty,
+            gr.Column(visible=False), gr.Dropdown(), gr.Radio(),
+            gr.Column(visible=False), gr.Dropdown(), gr.Dropdown(),
+            gr.CheckboxGroup(choices=[], value=[]), "",
+            gr.Column(visible=True), gr.Column(visible=False),
+        )
+    path = file_obj if isinstance(file_obj, str) else str(file_obj)
+    df, delim = _read_file_to_df(path)
+    return _process_new_data(df, delim)
+
+
+def on_demo_select(choice, state):
+    if choice == "(none)" or choice is None:
+        return (
+            state,
+            gr.Column(), gr.Dropdown(), gr.Radio(),
+            gr.Column(), gr.Dropdown(), gr.Dropdown(),
+            gr.CheckboxGroup(), "",
+            gr.Column(), gr.Column(),
+        )
+    demo_path = _DEMO_FILES[choice]
+    df = pd.read_csv(demo_path)
+    return _process_new_data(df, None)
+
+
+def on_format_change(fmt):
+    return gr.Column(visible=(fmt == "Long"))
+
+
+def on_long_cols_change(date_col, group_col, value_col, state):
+    raw_df = state.get("raw_df_original")
+    if raw_df is None or not group_col or not value_col:
+        return gr.CheckboxGroup()
+    try:
+        effective = pivot_long_to_wide(raw_df, date_col, group_col, value_col)
+        available = [c for c in effective.columns if c != date_col]
+        return gr.CheckboxGroup(choices=available, value=available[:4])
+    except Exception:
+        return gr.CheckboxGroup(choices=[], value=[])
+
+
+def on_apply_setup(state, date_col, data_format, group_col, value_col,
+                   y_cols, dup_action, missing_action, freq_override):
+    if not y_cols:
+        return (
+            state,
+            gr.Column(visible=True), gr.Column(visible=False),
+            "*Select at least one value column.*", "",
+            gr.Dropdown(), gr.Dropdown(),
+            None, "", "",
+            gr.CheckboxGroup(), None, "", "",
+            gr.CheckboxGroup(), gr.Dropdown(), None, "", "",
+        )
 
-def _on_view_change() -> None:
-    """Reset chart/data-filter state when users switch analysis views."""
-    active = st.session_state.get("active_view")
-    prev = st.session_state.get("_prev_active_view")
-    if prev and prev != active:
-        _clear_analysis_state(reset_querychat=True)
-    st.session_state["_prev_active_view"] = active
-    _sync_view_query_param()
+    raw_df = state.get("raw_df_original")
+    if raw_df is None:
+        return (
+            state,
+            gr.Column(visible=True), gr.Column(visible=False),
+            "*No data loaded.*", "",
+            gr.Dropdown(), gr.Dropdown(),
+            None, "", "",
+            gr.CheckboxGroup(), None, "", "",
+            gr.CheckboxGroup(), gr.Dropdown(), None, "", "",
+        )
 
+    # Pivot if long format
+    if data_format == "Long" and group_col and value_col:
+        effective_df = pivot_long_to_wide(raw_df, date_col, group_col, value_col)
+    else:
+        effective_df = raw_df
 
-@st.cache_data(show_spinner=False)
-def _clean_pipeline(_raw_hash, raw_df, date_col, y_cols, dup_action, missing_action):
-    cleaned, report = clean_dataframe(raw_df, date_col, list(y_cols),
-                                       dup_action=dup_action,
-                                       missing_action=missing_action)
+    # Clean
+    cleaned, report = clean_dataframe(
+        effective_df, date_col, list(y_cols),
+        dup_action=dup_action, missing_action=missing_action,
+    )
     freq = detect_frequency(cleaned, date_col)
     cleaned = add_time_features(cleaned, date_col)
-    return cleaned, report, freq
-
 
-@st.fragment
-def _querychat_fragment(cleaned_df, date_col, y_cols, freq_label):
-    current_hash = _df_hash(cleaned_df) + str(y_cols)
-    if st.session_state.qc_hash != current_hash:
-        st.session_state.qc = create_querychat(
-            cleaned_df, name="uploaded_data",
-            date_col=date_col, y_cols=y_cols,
-            freq_label=freq_label,
-        )
-        st.session_state.qc_hash = current_hash
-    st.session_state.qc.ui()
-
-
-@st.fragment
-def _data_quality_fragment(report: CleaningReport | None) -> None:
-    if report is None:
-        return
-    with st.expander("Data Quality Report", expanded=False):
-        _render_cleaning_report(report)
-
-
-@st.fragment
-def _single_chart_fragment(working_df, date_col, y_cols, freq_info, style_dict):
-    if len(y_cols) == 1:
-        st.session_state["tab_a_y"] = y_cols[0]
-    elif st.session_state.get("tab_a_y") not in y_cols:
-        st.session_state["tab_a_y"] = y_cols[0]
-
-    with st.form("single_chart_form", border=False):
-        if len(y_cols) == 1:
-            active_y = y_cols[0]
-            st.caption(f"Value column: `{active_y}`")
-        else:
-            active_y = st.selectbox("Select value column", y_cols, key="tab_a_y")
-
-        dr_mode = st.radio(
-            "Date range",
-            ["All", "Last N years", "Custom"],
-            horizontal=True,
-            key="dr_mode",
+    if freq_override and freq_override.strip():
+        freq = FrequencyInfo(
+            label=freq_override.strip(),
+            median_delta=freq.median_delta,
+            is_regular=freq.is_regular,
         )
 
-        df_plot = working_df.copy()
-        n_years = st.session_state.get("dr_n", 5)
-        sel = st.session_state.get("dr_custom")
-
-        if dr_mode == "Last N years":
-            n_years = st.slider("Years", 1, 20, 5, key="dr_n")
-            cutoff = df_plot[date_col].max() - pd.DateOffset(years=n_years)
-            df_plot = df_plot[df_plot[date_col] >= cutoff]
-        elif dr_mode == "Custom":
-            d_min = df_plot[date_col].min().date()
-            d_max = df_plot[date_col].max().date()
-            sel = st.slider("Date range", d_min, d_max, (d_min, d_max), key="dr_custom")
-            df_plot = df_plot[
-                (df_plot[date_col].dt.date >= sel[0])
-                & (df_plot[date_col].dt.date <= sel[1])
-            ]
-
-        chart_type = st.selectbox("Chart type", _CHART_TYPES, key="chart_type_a")
-        palette_name = st.selectbox("Color palette", _PALETTE_NAMES, key="pal_a")
-        palette_colors = get_palette_colors(palette_name, max(12, len(y_cols)))
-        swatch_fig = render_palette_preview(palette_colors[:8])
-        st.pyplot(swatch_fig, width="stretch")
-
-        color_by = None
-        if "Colored Markers" in chart_type:
-            if "month" in working_df.columns:
-                color_by = st.selectbox(
-                    "Color by",
-                    ["month", "quarter", "year", "day_of_week"],
-                    key="color_by_a",
-                )
-            else:
-                other_cols = [c for c in working_df.columns if c not in (date_col, active_y)][:5]
-                if other_cols:
-                    color_by = st.selectbox("Color by", other_cols, key="color_by_a")
-
-        period_label = "month"
-        window_size = 12
-        lag_val = 1
-        decomp_model = "additive"
-
-        if chart_type in ("Seasonal Plot", "Seasonal Sub-series"):
-            period_label = st.selectbox("Period", ["month", "quarter"], key="period_a")
-        if chart_type == "Rolling Mean Overlay":
-            window_size = st.slider("Window", 2, 52, 12, key="window_a")
-        if chart_type == "Lag Plot":
-            lag_val = st.slider("Lag", 1, 52, 1, key="lag_a")
-        if chart_type == "Decomposition":
-            decomp_model = st.selectbox("Model", ["additive", "multiplicative"], key="decomp_a")
-
-        update_single = st.form_submit_button("Update chart", use_container_width=True)
-
-    input_key = (
-        _df_hash(working_df), active_y, dr_mode, n_years, sel,
-        chart_type, palette_name, color_by, period_label, window_size, lag_val, decomp_model,
-        freq_info.label if freq_info else None,
-    )
-    should_compute = update_single or st.session_state.get("_single_fig") is None
-
-    if should_compute:
-        fig = None
-        stats = None
-
-        if df_plot.empty:
-            st.warning("No data in selected range.")
-        else:
-            try:
-                if chart_type == "Line with Markers":
-                    fig = plot_line_with_markers(
-                        df_plot, date_col, active_y,
-                        title=f"{active_y} over Time",
-                        style_dict=style_dict, palette_colors=palette_colors,
-                    )
-
-                elif "Colored Markers" in chart_type and color_by is not None:
-                    fig = plot_line_colored_markers(
-                        df_plot, date_col, active_y,
-                        color_by=color_by, palette_colors=palette_colors,
-                        title=f"{active_y} colored by {color_by}",
-                        style_dict=style_dict,
-                    )
-
-                elif chart_type == "Seasonal Plot":
-                    fig = plot_seasonal(
-                        df_plot, date_col, active_y,
-                        period=period_label,
-                        palette_name_colors=palette_colors,
-                        title=f"Seasonal Plot - {active_y}",
-                        style_dict=style_dict,
-                    )
-
-                elif chart_type == "Seasonal Sub-series":
-                    fig = plot_seasonal_subseries(
-                        df_plot, date_col, active_y,
-                        period=period_label,
-                        title=f"Seasonal Sub-series - {active_y}",
-                        style_dict=style_dict, palette_colors=palette_colors,
-                    )
-
-                elif chart_type == "ACF / PACF":
-                    series = df_plot[active_y].dropna()
-                    acf_vals, acf_ci, pacf_vals, pacf_ci = compute_acf_pacf(series)
-                    fig = plot_acf_pacf(
-                        acf_vals, acf_ci, pacf_vals, pacf_ci,
-                        title=f"ACF / PACF - {active_y}",
-                        style_dict=style_dict,
-                    )
-
-                elif chart_type == "Decomposition":
-                    period_int = None
-                    if freq_info and freq_info.label == "Monthly":
-                        period_int = 12
-                    elif freq_info and freq_info.label == "Quarterly":
-                        period_int = 4
-                    elif freq_info and freq_info.label == "Weekly":
-                        period_int = 52
-                    elif freq_info and freq_info.label == "Daily":
-                        period_int = 365
-
-                    result = compute_decomposition(
-                        df_plot, date_col, active_y,
-                        model=decomp_model, period=period_int,
-                    )
-                    fig = plot_decomposition(
-                        result,
-                        title=f"Decomposition - {active_y} ({decomp_model})",
-                        style_dict=style_dict,
-                    )
-
-                elif chart_type == "Rolling Mean Overlay":
-                    fig = plot_rolling_overlay(
-                        df_plot, date_col, active_y,
-                        window=window_size,
-                        title=f"Rolling {window_size}-pt Mean - {active_y}",
-                        style_dict=style_dict, palette_colors=palette_colors,
-                    )
-
-                elif chart_type == "Year-over-Year Change":
-                    yoy_result = compute_yoy_change(df_plot, date_col, active_y)
-                    yoy_df = pd.DataFrame({
-                        "date": yoy_result[date_col],
-                        "abs_change": yoy_result["yoy_abs_change"],
-                        "pct_change": yoy_result["yoy_pct_change"],
-                    }).dropna()
-                    fig = plot_yoy_change(
-                        df_plot, date_col, active_y, yoy_df,
-                        title=f"Year-over-Year Change - {active_y}",
-                        style_dict=style_dict,
-                    )
-
-                elif chart_type == "Lag Plot":
-                    fig = plot_lag(
-                        df_plot[active_y],
-                        lag=lag_val,
-                        title=f"Lag-{lag_val} Plot - {active_y}",
-                        style_dict=style_dict,
-                    )
-
-            except Exception as exc:
-                st.error(f"Chart error: {exc}")
-
-            if fig is not None:
-                stats = compute_summary_stats(df_plot, date_col, active_y)
-
-        st.session_state["_single_input_key"] = input_key
-        st.session_state["_single_df_plot"] = df_plot if not df_plot.empty else None
-        st.session_state["_single_fig"] = fig
-        st.session_state["_single_active_y"] = active_y if not df_plot.empty else None
-        st.session_state["_single_chart_type"] = chart_type if not df_plot.empty else None
-        st.session_state["_single_stats"] = stats
-
-    fig = st.session_state.get("_single_fig")
-    if fig is not None:
-        st.pyplot(fig, width="stretch")
+    state["cleaned_df"] = cleaned
+    state["cleaning_report"] = report
+    state["freq_info"] = freq
+    state["date_col"] = date_col
+    state["y_cols"] = list(y_cols)
+    state["setup_applied"] = True
+    state["single_png"] = None
+    state["panel_png"] = None
+    state["spag_png"] = None
+
+    # Create QueryChat instance if available
+    if check_querychat_available():
+        try:
+            state["qc"] = create_querychat(
+                cleaned, name="uploaded_data",
+                date_col=date_col, y_cols=list(y_cols),
+                freq_label=freq.label,
+            )
+        except Exception:
+            state["qc"] = None
     else:
-        st.info("Choose options above, then click `Update chart`.")
+        state["qc"] = None
+
+    quality_md = _format_cleaning_report_md(report)
+    freq_text = f"Frequency: **{freq.label}** ({'regular' if freq.is_regular else 'irregular'})"
+
+    # Color-by choices
+    color_by_choices = []
+    if "month" in cleaned.columns:
+        color_by_choices = ["month", "quarter", "year", "day_of_week"]
+
+    y_list = list(y_cols)
+    panel_default = y_list[:4] if len(y_list) >= 2 else y_list
+    highlight_choices = ["(none)"] + y_list
+
+    return (
+        state,                                                              # 0  app_state
+        gr.Column(visible=False),                                           # 1  welcome_col
+        gr.Column(visible=True),                                            # 2  analysis_col
+        quality_md,                                                         # 3  quality_md
+        freq_text,                                                          # 4  freq_info_md
+        # Single series tab
+        gr.Dropdown(choices=y_list, value=y_list[0]),                       # 5  single_y_dd
+        gr.Dropdown(choices=color_by_choices,
+                    value=color_by_choices[0] if color_by_choices else None),# 6  color_by_dd
+        None,                                                               # 7  single_plot
+        "",                                                                 # 8  single_stats_md
+        "",                                                                 # 9  single_interp_md
+        # Panel tab
+        gr.CheckboxGroup(choices=y_list, value=panel_default),              # 10 panel_cols_cbg
+        None,                                                               # 11 panel_plot
+        "",                                                                 # 12 panel_summary_md
+        "",                                                                 # 13 panel_interp_md
+        # Spaghetti tab
+        gr.CheckboxGroup(choices=y_list, value=y_list),                     # 14 spag_cols_cbg
+        gr.Dropdown(choices=highlight_choices, value="(none)"),              # 15 spag_highlight_dd
+        None,                                                               # 16 spag_plot
+        "",                                                                 # 17 spag_summary_md
+        "",                                                                 # 18 spag_interp_md
+    )
 
 
-@st.fragment
-def _single_insights_fragment(freq_info, date_col):
-    df_plot = st.session_state.get("_single_df_plot")
-    active_y = st.session_state.get("_single_active_y")
-    chart_type = st.session_state.get("_single_chart_type")
-    fig = st.session_state.get("_single_fig")
-    stats = st.session_state.get("_single_stats")
+# ---- Visibility toggles ----
 
-    if df_plot is None or active_y is None or stats is None:
-        return
+def on_dr_mode_change(mode):
+    return (
+        gr.Column(visible=(mode == "Last N years")),
+        gr.Column(visible=(mode == "Custom")),
+    )
 
-    with st.expander("Summary Statistics", expanded=False):
-        _render_summary_stats(stats)
 
-    _render_ai_interpretation(
-        fig, chart_type, freq_info, df_plot, date_col, active_y, "interpret_a",
+def on_chart_type_change(chart_type):
+    return (
+        gr.Column(visible=("Colored Markers" in chart_type)),
+        gr.Column(visible=(chart_type in ("Seasonal Plot", "Seasonal Sub-series"))),
+        gr.Column(visible=(chart_type == "Rolling Mean Overlay")),
+        gr.Column(visible=(chart_type == "Lag Plot")),
+        gr.Column(visible=(chart_type == "Decomposition")),
     )
 
 
-@st.fragment
-def _panel_chart_fragment(working_df, date_col, y_cols, style_dict):
-    if len(y_cols) < 2:
-        st.info("Select 2+ value columns in the sidebar to use panel plots.")
-        st.session_state["_panel_fig"] = None
-        st.session_state["_panel_summary_df"] = None
-        return
+def on_palette_change(pal_name):
+    colors = get_palette_colors(pal_name, 8)
+    return render_palette_preview(colors)
 
-    st.subheader("Panel Plot (Small Multiples)")
 
-    if "panel_cols" not in st.session_state:
-        st.session_state["panel_cols"] = y_cols[:4]
-    else:
-        st.session_state["panel_cols"] = [c for c in st.session_state["panel_cols"] if c in y_cols]
-
-    with st.form("panel_chart_form", border=False):
-        panel_cols = st.multiselect("Columns to plot", y_cols, key="panel_cols")
-
-        pc1, pc2 = st.columns(2)
-        with pc1:
-            panel_chart = st.selectbox("Chart type", ["line", "bar"], key="panel_chart")
-        with pc2:
-            if "panel_shared" not in st.session_state:
-                st.session_state["panel_shared"] = True
-            shared_y = st.checkbox("Shared Y axis", key="panel_shared")
-
-        palette_name_b = st.selectbox("Color palette", _PALETTE_NAMES, key="pal_b")
-        update_panel = st.form_submit_button("Update chart", use_container_width=True)
-
-    input_key = (_df_hash(working_df), tuple(panel_cols), panel_chart, shared_y, palette_name_b)
-    should_compute = update_panel or st.session_state.get("_panel_fig") is None
-
-    if should_compute:
-        fig_panel = None
-        summary_df = None
-        if panel_cols:
-            palette_b = get_palette_colors(palette_name_b, len(panel_cols))
-            try:
-                fig_panel = plot_panel(
-                    working_df, date_col, panel_cols,
-                    chart_type=panel_chart,
-                    shared_y=shared_y,
-                    title="Panel Comparison",
-                    style_dict=style_dict,
-                    palette_colors=palette_b,
-                )
-                summary_df = compute_multi_series_summary(working_df, date_col, panel_cols)
-            except Exception as exc:
-                st.error(f"Panel chart error: {exc}")
+# ---- Single series ----
 
-        st.session_state["_panel_input_key"] = input_key
-        st.session_state["_panel_fig"] = fig_panel
-        st.session_state["_panel_summary_df"] = summary_df
+def on_single_update(state, y_col, dr_mode, dr_n, dr_start, dr_end,
+                     chart_type, palette_name, color_by, period,
+                     window, lag, decomp_model):
+    cleaned_df = state.get("cleaned_df")
+    date_col = state.get("date_col")
+    freq_info = state.get("freq_info")
 
-    fig_panel = st.session_state.get("_panel_fig")
-    if fig_panel is not None:
-        st.pyplot(fig_panel, width="stretch")
-    else:
-        st.info("Choose panel options above, then click `Update chart`.")
-
-
-@st.fragment
-def _panel_insights_fragment(working_df, date_col, freq_info):
-    panel_cols = st.session_state.get("panel_cols") or []
-    fig_panel = st.session_state.get("_panel_fig")
-    panel_chart = st.session_state.get("panel_chart", "line")
-    summary_df = st.session_state.get("_panel_summary_df")
-
-    if not panel_cols or fig_panel is None or summary_df is None:
-        return
-
-    with st.expander("Per-series Summary", expanded=False):
-        st.dataframe(
-            summary_df.style.format({
-                "mean": "{:,.2f}",
-                "std": "{:,.2f}",
-                "min": "{:,.2f}",
-                "max": "{:,.2f}",
-                "trend_slope": "{:,.4f}",
-                "adf_pvalue": "{:.4f}",
-            }),
-            width="stretch",
-        )
+    if cleaned_df is None or not y_col:
+        return state, None, "*No data. Apply setup first.*"
 
-    _render_ai_interpretation(
-        fig_panel, f"Panel ({panel_chart})", freq_info,
-        working_df, date_col, ", ".join(panel_cols), "interpret_b",
-    )
+    palette_colors = get_palette_colors(palette_name, 12)
+    df_plot = _apply_date_filter(cleaned_df.copy(), date_col, dr_mode, dr_n, dr_start, dr_end)
 
+    if df_plot.empty:
+        return state, None, "*No data in selected range.*"
 
-@st.fragment
-def _spaghetti_chart_fragment(working_df, date_col, y_cols, style_dict):
-    if len(y_cols) < 2:
-        st.info("Select 2+ value columns in the sidebar to use spaghetti plots.")
-        st.session_state["_spag_fig"] = None
-        st.session_state["_spag_summary_df"] = None
-        return
+    fig, err = _generate_single_chart(
+        df_plot, date_col, y_col, chart_type, palette_colors,
+        color_by, period, window, lag, decomp_model, freq_info,
+    )
 
-    st.subheader("Spaghetti Plot")
+    if err:
+        return state, None, f"**Chart error:** {err}"
 
-    if "spag_cols" not in st.session_state:
-        st.session_state["spag_cols"] = list(y_cols)
-    else:
-        st.session_state["spag_cols"] = [c for c in st.session_state["spag_cols"] if c in y_cols]
-
-    with st.form("spag_chart_form", border=False):
-        spag_cols = st.multiselect("Columns to include", y_cols, key="spag_cols")
-
-        sc1, sc2, sc3 = st.columns(3)
-        with sc1:
-            alpha_val = st.slider("Alpha", 0.05, 1.0, 0.15, 0.05, key="spag_alpha")
-        with sc2:
-            top_n = st.number_input("Highlight top N", 0, len(spag_cols), 0, key="spag_topn")
-            top_n = top_n if top_n > 0 else None
-        with sc3:
-            highlight = st.selectbox(
-                "Highlight series",
-                ["(none)"] + spag_cols,
-                key="spag_highlight",
-            )
-            highlight_col = highlight if highlight != "(none)" else None
+    # Summary stats
+    stats = compute_summary_stats(df_plot, date_col, y_col)
+    stats_md = _format_summary_stats_md(stats)
 
-        show_median = st.checkbox("Show Median + IQR band", key="spag_median")
-        palette_name_c = st.selectbox("Color palette", _PALETTE_NAMES, key="pal_c")
-        update_spag = st.form_submit_button("Update chart", use_container_width=True)
+    # Store PNG for AI interpretation
+    state["single_png"] = fig_to_png_bytes(fig) if fig else None
 
-    input_key = (
-        _df_hash(working_df), tuple(spag_cols), alpha_val, top_n, highlight_col,
-        show_median, palette_name_c,
-    )
-    should_compute = update_spag or st.session_state.get("_spag_fig") is None
-
-    if should_compute:
-        fig_spag = None
-        spag_summary = None
-        if spag_cols:
-            palette_c = get_palette_colors(palette_name_c, len(spag_cols))
-            try:
-                fig_spag = plot_spaghetti(
-                    working_df, date_col, spag_cols,
-                    alpha=alpha_val,
-                    highlight_col=highlight_col,
-                    top_n=top_n,
-                    show_median_band=show_median,
-                    title="Spaghetti Plot",
-                    style_dict=style_dict,
-                    palette_colors=palette_c,
-                )
-                spag_summary = compute_multi_series_summary(working_df, date_col, spag_cols)
-            except Exception as exc:
-                st.error(f"Spaghetti chart error: {exc}")
+    return state, fig, stats_md
 
-        st.session_state["_spag_input_key"] = input_key
-        st.session_state["_spag_fig"] = fig_spag
-        st.session_state["_spag_summary_df"] = spag_summary
 
-    fig_spag = st.session_state.get("_spag_fig")
-    if fig_spag is not None:
-        st.pyplot(fig_spag, width="stretch")
-    else:
-        st.info("Choose spaghetti options above, then click `Update chart`.")
-
-
-@st.fragment
-def _spaghetti_insights_fragment(working_df, date_col, freq_info):
-    spag_cols = st.session_state.get("spag_cols") or []
-    fig_spag = st.session_state.get("_spag_fig")
-    spag_summary = st.session_state.get("_spag_summary_df")
-
-    if not spag_cols or fig_spag is None or spag_summary is None:
-        return
-
-    with st.expander("Per-series Summary", expanded=False):
-        st.dataframe(
-            spag_summary.style.format({
-                "mean": "{:,.2f}",
-                "std": "{:,.2f}",
-                "min": "{:,.2f}",
-                "max": "{:,.2f}",
-                "trend_slope": "{:,.4f}",
-                "adf_pvalue": "{:.4f}",
-            }),
-            width="stretch",
-        )
+def on_single_interpret(state):
+    png = state.get("single_png")
+    if not png:
+        return "*Generate a chart first, then click Interpret.*"
+    if not check_api_key_available():
+        return "*Set `OPENAI_API_KEY` to enable AI interpretation.*"
 
-    _render_ai_interpretation(
-        fig_spag, "Spaghetti Plot", freq_info,
-        working_df, date_col, ", ".join(spag_cols), "interpret_c",
-    )
+    freq_info = state.get("freq_info")
+    metadata = {
+        "chart_type": "single series",
+        "frequency_label": freq_info.label if freq_info else "Unknown",
+        "y_column": state.get("y_cols", [""])[0],
+    }
+    interp = interpret_chart(png, metadata)
+    return render_interpretation_markdown(interp)
 
 
-def _render_cleaning_report(report: CleaningReport) -> None:
-    """Show a data-quality card."""
-    c1, c2, c3 = st.columns(3)
-    c1.metric("Rows before", f"{report.rows_before:,}")
-    c2.metric("Rows after", f"{report.rows_after:,}")
-    c3.metric("Duplicates found", f"{report.duplicates_found:,}")
+# ---- Panel ----
 
-    if report.missing_before:
-        with st.expander("Missing values"):
-            cols = list(report.missing_before.keys())
-            mc1, mc2 = st.columns(2)
-            with mc1:
-                st.write("**Before cleaning**")
-                for c in cols:
-                    st.write(f"- {c}: {report.missing_before[c]}")
-            with mc2:
-                st.write("**After cleaning**")
-                for c in cols:
-                    st.write(f"- {c}: {report.missing_after.get(c, 0)}")
+def on_panel_update(state, panel_cols, panel_chart, shared_y, palette_name):
+    cleaned_df = state.get("cleaned_df")
+    date_col = state.get("date_col")
 
-    if report.parsing_warnings:
-        with st.expander("Parsing warnings"):
-            for w in report.parsing_warnings:
-                st.warning(w)
-
-
-def _render_summary_stats(stats) -> None:
-    """Render SummaryStats as metric cards (flat, no nesting)."""
-    row1 = st.columns(4)
-    row1[0].metric("Count", f"{stats.count:,}")
-    row1[1].metric("Missing", f"{stats.missing_count} ({stats.missing_pct:.1f}%)")
-    row1[2].metric("Mean", f"{stats.mean_val:,.2f}")
-    row1[3].metric("Std Dev", f"{stats.std_val:,.2f}")
-
-    row2 = st.columns(4)
-    row2[0].metric("Min", f"{stats.min_val:,.2f}")
-    row2[1].metric("25th %ile", f"{stats.p25:,.2f}")
-    row2[2].metric("Median", f"{stats.median_val:,.2f}")
-    row2[3].metric("75th %ile / Max", f"{stats.p75:,.2f} / {stats.max_val:,.2f}")
-
-    row3 = st.columns(4)
-    row3[0].metric(
-        "Trend slope",
-        f"{stats.trend_slope:,.4f}" if pd.notna(stats.trend_slope) else "N/A",
-        help="Slope from OLS on a numeric index.",
-    )
-    row3[1].metric(
-        "Trend p-value",
-        f"{stats.trend_pvalue:.4f}" if pd.notna(stats.trend_pvalue) else "N/A",
-    )
-    row3[2].metric(
-        "ADF statistic",
-        f"{stats.adf_statistic:.4f}" if pd.notna(stats.adf_statistic) else "N/A",
-        help="Augmented Dickey-Fuller test statistic.",
-    )
-    row3[3].metric(
-        "ADF p-value",
-        f"{stats.adf_pvalue:.4f}" if pd.notna(stats.adf_pvalue) else "N/A",
-        help="p < 0.05 suggests the series is stationary.",
-    )
-    st.caption(
-        f"Date range: {stats.date_start.date()} to {stats.date_end.date()} "
-        f"({stats.date_span_days:,} days)"
-    )
+    if cleaned_df is None or not panel_cols or len(panel_cols) < 2:
+        return state, None, "*Select 2+ columns and apply setup first.*"
 
+    palette_colors = get_palette_colors(palette_name, len(panel_cols))
 
-def _render_ai_interpretation(fig, chart_type_label, freq_info, df_plot,
-                               date_col, y_label, button_key):
-    """Reusable AI Chart Interpretation block for any tab."""
-    with st.expander("AI Chart Interpretation", expanded=False):
-        st.caption(
-            "The chart image (PNG) is sent to OpenAI for interpretation. "
-            "Do not include sensitive data in your charts."
+    try:
+        fig = plot_panel(
+            cleaned_df, date_col, list(panel_cols),
+            chart_type=panel_chart, shared_y=shared_y,
+            title="Panel Comparison",
+            style_dict=_STYLE_DICT, palette_colors=palette_colors,
         )
-        if not check_api_key_available():
-            st.warning("Set `OPENAI_API_KEY` to enable AI interpretation.")
-        elif fig is not None:
-            if st.button("Interpret Chart with AI", key=button_key):
-                with st.spinner("Analyzing chart..."):
-                    png = fig_to_png_bytes(fig)
-                    date_range_str = (
-                        f"{df_plot[date_col].min().date()} to "
-                        f"{df_plot[date_col].max().date()}"
-                    )
-                    metadata = {
-                        "chart_type": chart_type_label,
-                        "frequency_label": freq_info.label if freq_info else "Unknown",
-                        "date_range": date_range_str,
-                        "y_column": y_label,
-                    }
-                    interp = interpret_chart(png, metadata)
-                    render_interpretation(interp)
-
+        summary_df = compute_multi_series_summary(cleaned_df, date_col, list(panel_cols))
+        summary_md = _format_multi_summary_md(summary_df)
+        state["panel_png"] = fig_to_png_bytes(fig)
+        return state, fig, summary_md
+    except Exception as exc:
+        return state, None, f"**Panel chart error:** {exc}"
+
+
+def on_panel_interpret(state):
+    png = state.get("panel_png")
+    if not png:
+        return "*Generate a panel chart first, then click Interpret.*"
+    if not check_api_key_available():
+        return "*Set `OPENAI_API_KEY` to enable AI interpretation.*"
+
+    freq_info = state.get("freq_info")
+    metadata = {
+        "chart_type": "panel (small multiples)",
+        "frequency_label": freq_info.label if freq_info else "Unknown",
+        "y_column": ", ".join(state.get("y_cols", [])),
+    }
+    interp = interpret_chart(png, metadata)
+    return render_interpretation_markdown(interp)
+
+
+# ---- Spaghetti ----
+
+def on_spag_update(state, spag_cols, alpha, topn, highlight, show_median, palette_name):
+    cleaned_df = state.get("cleaned_df")
+    date_col = state.get("date_col")
+
+    if cleaned_df is None or not spag_cols or len(spag_cols) < 2:
+        return state, None, "*Select 2+ columns and apply setup first.*"
+
+    highlight_col = highlight if highlight and highlight != "(none)" else None
+    top_n = int(topn) if topn and int(topn) > 0 else None
+    palette_colors = get_palette_colors(palette_name, len(spag_cols))
+
+    try:
+        fig = plot_spaghetti(
+            cleaned_df, date_col, list(spag_cols),
+            alpha=float(alpha),
+            highlight_col=highlight_col,
+            top_n=top_n,
+            show_median_band=bool(show_median),
+            title="Spaghetti Plot",
+            style_dict=_STYLE_DICT, palette_colors=palette_colors,
+        )
+        summary_df = compute_multi_series_summary(cleaned_df, date_col, list(spag_cols))
+        summary_md = _format_multi_summary_md(summary_df)
+        state["spag_png"] = fig_to_png_bytes(fig)
+        return state, fig, summary_md
+    except Exception as exc:
+        return state, None, f"**Spaghetti chart error:** {exc}"
+
+
+def on_spag_interpret(state):
+    png = state.get("spag_png")
+    if not png:
+        return "*Generate a spaghetti chart first, then click Interpret.*"
+    if not check_api_key_available():
+        return "*Set `OPENAI_API_KEY` to enable AI interpretation.*"
+
+    freq_info = state.get("freq_info")
+    metadata = {
+        "chart_type": "spaghetti (overlay)",
+        "frequency_label": freq_info.label if freq_info else "Unknown",
+        "y_column": ", ".join(state.get("y_cols", [])),
+    }
+    interp = interpret_chart(png, metadata)
+    return render_interpretation_markdown(interp)
 
-# ---------------------------------------------------------------------------
-# Page config
-# ---------------------------------------------------------------------------
-st.set_page_config(
-    page_title="Time Series Visualizer",
-    page_icon="\U0001f4c8",
-    layout="wide",
-)
-apply_miami_theme()
-style_dict = get_miami_mpl_style()
 
 # ---------------------------------------------------------------------------
-# Session state initialisation
+# Build the Gradio app
 # ---------------------------------------------------------------------------
-for key in [
-    "raw_df", "raw_df_original", "cleaned_df", "cleaning_report", "freq_info",
-    "date_col", "y_cols", "qc", "qc_hash",
-    "_upload_id", "_upload_delim", "_clean_key",
-    "_prev_data_format", "_prev_pivot_key", "_prev_active_view",
-    "setup_applied", "_last_applied_settings_key",
-]:
-    if key not in st.session_state:
-        st.session_state[key] = None
-if st.session_state["setup_applied"] is None:
-    st.session_state["setup_applied"] = False
 
-# ---------------------------------------------------------------------------
-# Sidebar — Data input
-# ---------------------------------------------------------------------------
-with st.sidebar:
-    st.markdown(
-        """
-        <div style="text-align:center; margin-bottom:0.5rem;">
-            <span style="font-size:1.6rem; font-weight:800; color:#C41230;">
-                Time Series Visualizer
-            </span><br>
-            <span style="font-size:0.82rem; color:#000;">
-                ISA 444 &middot; Miami University
-            </span>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-    # st.divider()
-    st.subheader("Vibe-Coded By")
-    st.markdown(
-        """
-        <div class="dev-card">
-            <div class="dev-row">
-                <svg class="dev-avatar" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
-                    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37c.69-1.198 1.97-2.015 3.526-2.015h3.884c1.556 0 2.835.817 3.526 2.014A7 7 0 0 0 8 1"/>
-                </svg>
-                <div>
-                    <div class="dev-name">Fadel M. Megahed</div>
-                    <div class="dev-role">
-                        Raymond E. Glos Professor, Farmer School of Business<br>
-                        Miami University
-                    </div>
-                </div>
-            </div>
-            <div class="dev-links">
-                <a class="dev-link" href="mailto:fmegahed@miamioh.edu">
-                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.708 2.825L15 11.105zM14.247 12.6 9.114 8.98 8 9.67 6.886 8.98 1.753 12.6A1 1 0 0 0 2 13h12a1 1 0 0 0 .247-.4zM1 11.105l4.708-2.897L1 5.383z"/>
-                    </svg>
-                    Email
-                </a>
-                <a class="dev-link" href="https://www.linkedin.com/in/fadel-megahed-289046b4/" target="_blank">
-                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                        <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.475 0 16 .513 16 1.146v13.708c0 .633-.525 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zM4.943 13.5V6H2.542v7.5zM3.743 4.927c.837 0 1.358-.554 1.358-1.248-.015-.709-.521-1.248-1.342-1.248-.821 0-1.358.54-1.358 1.248 0 .694.521 1.248 1.327 1.248zm4.908 8.573V9.359c0-.22.016-.44.08-.598.176-.44.576-.897 1.248-.897.88 0 1.232.676 1.232 1.667v4.0h2.401V9.247c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193h.016V6H6.35c.03.7 0 7.5 0 7.5z"/>
-                    </svg>
-                    LinkedIn
-                </a>
-                <a class="dev-link" href="https://miamioh.edu/fsb/directory/?up=/directory/megahefm" target="_blank">
-                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7-7a7 7 0 0 0-2.468.45c.303.393.58.825.82 1.3A5.5 5.5 0 0 1 7 3.5zm2 0v2.5a5.5 5.5 0 0 1 1.648-.75 7 7 0 0 0-.82-1.3A7 7 0 0 0 9 1m3.97 3.06a6.5 6.5 0 0 0-1.71-.9c.21.53.36 1.1.44 1.69h2.21a7 7 0 0 0-.94-.79M15 8a7 7 0 0 0-.33-2h-2.34a6.5 6.5 0 0 1 0 4h2.34c.22-.64.33-1.32.33-2m-1.03 3.94a7 7 0 0 0 .94-.79h-2.21a6.5 6.5 0 0 1-.44 1.69c.62-.22 1.2-.53 1.71-.9M9 15a7 7 0 0 0 1.648-.75c.24-.48.517-.91.82-1.3A7 7 0 0 0 9 15m-2 0v-2.5a5.5 5.5 0 0 1-1.648.75c.24.48.517.91.82 1.3A7 7 0 0 0 7 15M4.03 11.94a6.5 6.5 0 0 0 1.71.9A6.5 6.5 0 0 1 5.3 11.15H3.09c.25.3.58.57.94.79M1 8c0 .68.11 1.36.33 2h2.34a6.5 6.5 0 0 1 0-4H1.33A7 7 0 0 0 1 8m1.03-3.94c.36.37.78.68 1.24.9a6.5 6.5 0 0 1 .44-1.69H2.06a7 7 0 0 0-.03.79"/>
-                    </svg>
-                    Website
-                </a>
-                <a class="dev-link" href="https://github.com/fmegahed/" target="_blank">
-                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
-                    </svg>
-                    GitHub
-                </a>
-            </div>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-    st.caption("v0.2.0 &middot; Last updated Feb 2026")
-    st.divider()
-    st.header("Data Input")
+with gr.Blocks(
+    title="Time Series Visualizer",
+) as demo:
+
+    app_state = gr.State(_make_empty_state())
+
+    # ===================================================================
+    # Sidebar
+    # ===================================================================
+    with gr.Sidebar():
+        gr.HTML(
+            '<div class="app-title">'
+            '<span class="title-text">Time Series Visualizer</span><br>'
+            '<span class="subtitle-text">ISA 444 &middot; Miami University</span>'
+            '</div>'
+        )
+        gr.Markdown("**Vibe-Coded By**")
+        gr.HTML(_DEVELOPER_CARD)
+        gr.Markdown("v0.2.0 &middot; Last updated Feb 2026", elem_classes=["caption"])
 
-    uploaded = st.file_uploader("Upload a CSV file", type=["csv", "tsv", "txt"], key="csv_upload")
+        gr.Markdown("---")
+        gr.Markdown("### Data Input")
 
-    demo_choice = st.selectbox(
-        "Or load a demo dataset",
-        ["(none)"] + list(_DEMO_FILES.keys()),
-        key="demo_select",
-    )
-    if st.button("Reset all", key="reset_sidebar", use_container_width=True):
-        _reset_all_state()
-
-    # Load data
-    def _on_new_data(df: pd.DataFrame) -> None:
-        """Store new dataset and clear stale format/pivot keys."""
-        st.session_state.raw_df_original = df
-        st.session_state.raw_df = df
-        st.session_state.cleaned_df = None
-        st.session_state.cleaning_report = None
-        st.session_state.freq_info = None
-        st.session_state.date_col = None
-        st.session_state.y_cols = None
-        st.session_state._clean_key = None
-        st.session_state["setup_applied"] = False
-        st.session_state["_last_applied_settings_key"] = None
-        # Clear format-related keys so auto-detection runs fresh
-        for _k in ("sidebar_data_format", "sidebar_group_col",
-                    "sidebar_value_col", "sidebar_y_cols",
-                    "_prev_data_format", "_prev_pivot_key",
-                    "sidebar_dup_action", "sidebar_missing_action", "sidebar_freq_override"):
-            st.session_state.pop(_k, None)
-        _clear_analysis_state(reset_querychat=True)
-        st.session_state["active_view"] = _VIEW_LABELS[0]
-        st.session_state["_prev_active_view"] = st.session_state["active_view"]
-        _sync_view_query_param()
-
-    if uploaded is not None:
-        file_id = (uploaded.name, uploaded.size)
-        if st.session_state.get("_upload_id") != file_id:
-            df_raw, delim = read_csv_upload(uploaded)
-            _on_new_data(df_raw)
-            st.session_state._upload_delim = delim
-            st.session_state._upload_id = file_id
-        st.caption(f"Detected delimiter: `{repr(st.session_state._upload_delim)}`")
-    elif demo_choice != "(none)":
-        demo_key = ("demo", demo_choice)
-        if st.session_state.get("_upload_id") != demo_key:
-            _on_new_data(_load_demo(_DEMO_FILES[demo_choice]))
-            st.session_state._upload_id = demo_key
-    # else: keep whatever was already in session state
-
-    raw_df_orig: pd.DataFrame | None = st.session_state.raw_df_original
-    raw_df: pd.DataFrame | None = st.session_state.raw_df
-
-    if raw_df_orig is not None:
-        st.divider()
-        st.subheader("Column and Cleaning Setup")
-        st.caption("Batch changes below, then click `Apply setup`.")
-
-        date_suggestions = suggest_date_columns(raw_df_orig)
-        all_cols = list(raw_df_orig.columns)
-        default_date_idx = all_cols.index(date_suggestions[0]) if date_suggestions else 0
-
-        if "sidebar_date_col" not in st.session_state:
-            st.session_state["sidebar_date_col"] = all_cols[default_date_idx]
-        if "sidebar_dup_action" not in st.session_state:
-            st.session_state["sidebar_dup_action"] = "keep_last"
-        if "sidebar_missing_action" not in st.session_state:
-            st.session_state["sidebar_missing_action"] = "interpolate"
-        if "sidebar_freq_override" not in st.session_state:
-            st.session_state["sidebar_freq_override"] = ""
-
-        with st.form("sidebar_setup_form", border=False):
-            date_col = st.selectbox("Date column", all_cols, key="sidebar_date_col")
-            is_long, auto_group, auto_value = detect_long_format(raw_df_orig, date_col)
-
-            if "sidebar_data_format" not in st.session_state:
-                st.session_state["sidebar_data_format"] = "Long" if is_long else "Wide"
-
-            data_format = st.radio(
-                "Data format",
-                ["Wide", "Long"],
-                key="sidebar_data_format",
-                horizontal=True,
+        file_upload = gr.File(
+            label="Upload a CSV file",
+            file_types=[".csv", ".tsv", ".txt"],
+            type="filepath",
+        )
+        demo_dd = gr.Dropdown(
+            label="Or load a demo dataset",
+            choices=_DEMO_CHOICES,
+            value="(none)",
+        )
+        reset_btn = gr.Button("Reset all", variant="secondary", size="sm")
+        delim_md = gr.Markdown("")
+
+        # ---- Setup controls (hidden until data loaded) ----
+        with gr.Column(visible=False) as setup_col:
+            gr.Markdown("---")
+            gr.Markdown("### Column & Cleaning Setup")
+            gr.Markdown("*Configure below, then click **Apply setup**.*")
+
+            date_col_dd = gr.Dropdown(label="Date column", choices=[])
+            format_radio = gr.Radio(
+                label="Data format", choices=["Wide", "Long"], value="Wide",
             )
 
-            if st.session_state.get("_prev_data_format") != data_format:
-                st.session_state.pop("sidebar_y_cols", None)
-                st.session_state["_prev_data_format"] = data_format
-
-            group_col = None
-            value_col_sel = None
-            if data_format == "Long":
-                other_cols = [c for c in all_cols if c != date_col]
-                string_cols = [
-                    c for c in other_cols
-                    if raw_df_orig[c].dtype == object
-                    or pd.api.types.is_string_dtype(raw_df_orig[c])
-                ]
-                numeric_cols = [
-                    c for c in other_cols
-                    if pd.api.types.is_numeric_dtype(raw_df_orig[c])
-                ]
-
-                if string_cols:
-                    if "sidebar_group_col" not in st.session_state:
-                        st.session_state["sidebar_group_col"] = (
-                            auto_group if auto_group and auto_group in string_cols
-                            else string_cols[0]
-                        )
-                    group_col = st.selectbox("Group column", string_cols, key="sidebar_group_col")
-                else:
-                    st.warning("No categorical columns available for long-format grouping.")
+            with gr.Column(visible=False) as long_col:
+                group_col_dd = gr.Dropdown(label="Group column", choices=[])
+                value_col_dd = gr.Dropdown(label="Value column", choices=[])
 
-                value_options = [c for c in numeric_cols if c != group_col] if group_col else numeric_cols
+            y_cols_cbg = gr.CheckboxGroup(label="Value column(s)", choices=[])
 
-                if value_options:
-                    if "sidebar_value_col" not in st.session_state:
-                        st.session_state["sidebar_value_col"] = (
-                            auto_value if auto_value and auto_value in value_options
-                            else value_options[0]
-                        )
-                    value_col_sel = st.selectbox("Value column", value_options, key="sidebar_value_col")
-                else:
-                    st.warning("No numeric value column available for long-format pivoting.")
-
-                pivot_key = (group_col, value_col_sel)
-                if st.session_state.get("_prev_pivot_key") != pivot_key:
-                    st.session_state.pop("sidebar_y_cols", None)
-                    st.session_state["_prev_pivot_key"] = pivot_key
-
-                if group_col and value_col_sel:
-                    effective_df = pivot_long_to_wide(
-                        raw_df_orig, date_col, group_col, value_col_sel,
-                    )
-                    n_groups = raw_df_orig[group_col].nunique()
-                    st.caption(f"Pivot preview: **{n_groups}** groups from `{group_col}`")
-                    available_y = [c for c in effective_df.columns if c != date_col]
-                else:
-                    effective_df = raw_df_orig
-                    available_y = []
-            else:
-                effective_df = raw_df_orig
-                numeric_suggestions = suggest_numeric_columns(raw_df_orig)
-                available_y = [c for c in numeric_suggestions if c != date_col]
-
-            if "sidebar_y_cols" in st.session_state:
-                st.session_state["sidebar_y_cols"] = [
-                    c for c in st.session_state["sidebar_y_cols"] if c in available_y
-                ]
-            if "sidebar_y_cols" not in st.session_state:
-                st.session_state["sidebar_y_cols"] = available_y[:4] if available_y else []
-            y_cols = st.multiselect("Value column(s)", available_y, key="sidebar_y_cols")
-
-            st.markdown("##### Cleaning Options")
-            dup_action = st.selectbox(
-                "Duplicate dates",
-                ["keep_last", "keep_first", "drop_all"],
-                key="sidebar_dup_action",
+            gr.Markdown("**Cleaning options**")
+            dup_dd = gr.Dropdown(
+                label="Duplicate dates",
+                choices=["keep_last", "keep_first", "drop_all"],
+                value="keep_last",
             )
-            missing_action = st.selectbox(
-                "Missing values",
-                ["interpolate", "ffill", "drop"],
-                key="sidebar_missing_action",
+            missing_dd = gr.Dropdown(
+                label="Missing values",
+                choices=["interpolate", "ffill", "drop"],
+                value="interpolate",
             )
-            freq_override = st.text_input(
-                "Override frequency label (optional)",
-                help="e.g. Daily, Weekly, Monthly, Quarterly, Yearly",
-                key="sidebar_freq_override",
+            freq_tb = gr.Textbox(
+                label="Override frequency label (optional)",
+                placeholder="e.g. Daily, Weekly, Monthly",
             )
-            apply_setup = st.form_submit_button("Apply setup", use_container_width=True)
-
-        if apply_setup:
-            st.session_state.raw_df = effective_df
-            st.session_state.date_col = date_col
-            st.session_state.y_cols = y_cols
-
-            settings_key = (
-                st.session_state._upload_id,
-                date_col,
-                data_format,
-                st.session_state.get("sidebar_group_col"),
-                st.session_state.get("sidebar_value_col"),
-                tuple(y_cols),
-                dup_action,
-                missing_action,
-                freq_override.strip(),
-            )
-            if st.session_state.get("_last_applied_settings_key") != settings_key:
-                _clear_analysis_state(reset_querychat=True)
-            st.session_state["_last_applied_settings_key"] = settings_key
-            st.session_state["setup_applied"] = True
-
-            if y_cols:
-                cleaned_df, report, freq_info = _clean_pipeline(
-                    _df_hash(effective_df), effective_df, date_col, tuple(y_cols),
-                    dup_action, missing_action,
-                )
-                if freq_override.strip():
-                    freq_info = FrequencyInfo(
-                        label=freq_override.strip(),
-                        median_delta=freq_info.median_delta,
-                        is_regular=freq_info.is_regular,
-                    )
-
-                st.session_state.cleaned_df = cleaned_df
-                st.session_state.cleaning_report = report
-                st.session_state.freq_info = freq_info
-                st.session_state._clean_key = (
-                    date_col, tuple(y_cols), dup_action, missing_action,
-                    st.session_state._upload_id,
-                )
-            else:
-                st.session_state.cleaned_df = None
-                st.session_state.cleaning_report = None
-                st.session_state.freq_info = None
-                st.session_state._clean_key = None
-                st.session_state.qc = None
-                st.session_state.qc_hash = None
-
-        if not st.session_state.get("setup_applied"):
-            st.info("Configure columns and cleaning options, then click `Apply setup`.")
-
-        if st.session_state.get("setup_applied") and st.session_state.get("y_cols"):
-            cleaned_df = st.session_state.cleaned_df
-            date_col = st.session_state.date_col
-            y_cols = st.session_state.y_cols
-            freq_info = st.session_state.freq_info
-
-            st.success("Setup applied. Continue in the main panel to choose an analysis view.")
-            if freq_info is not None:
-                st.caption(f"Frequency: **{freq_info.label}** "
-                           f"({'regular' if freq_info.is_regular else 'irregular'})")
+            apply_btn = gr.Button("Apply setup", variant="primary")
+            freq_info_md = gr.Markdown("")
 
+        # ---- QueryChat placeholder ----
+        with gr.Column(visible=False) as qc_col:
+            gr.Markdown("---")
+            gr.Markdown("### QueryChat")
             if check_querychat_available():
-                st.divider()
-                st.subheader("QueryChat")
-                enable_qc = st.toggle(
-                    "Enable QueryChat filtering",
-                    key="enable_querychat",
-                    help="Use natural-language prompts to filter the dataset (e.g., 'last 5 years'); chart views then use the filtered data.",
+                gr.Markdown(
+                    "QueryChat natural-language filtering is available. "
+                    "Use the chat below to filter your dataset."
                 )
-                if enable_qc and cleaned_df is not None and freq_info is not None:
-                    _querychat_fragment(cleaned_df, date_col, y_cols, freq_info.label)
-                else:
-                    st.session_state.qc = None
-                    st.session_state.qc_hash = None
             else:
-                st.divider()
-                st.info(
-                    "Set `OPENAI_API_KEY` to enable QueryChat "
-                    "(natural-language data filtering)."
+                gr.Markdown(
+                    "*Set `OPENAI_API_KEY` and install `querychat[gradio]` "
+                    "to enable natural-language data filtering.*"
                 )
-    # st.divider()
-    # st.caption(
-    #     "**Privacy:** All processing is in-memory. "
-    #     "If you click **Interpret Chart with AI**, the chart image is sent to OpenAI — "
-    #     "do not include sensitive data in your charts. "
-    #     "QueryChat protects your privacy by only passing metadata (not your data) to OpenAI."
-    # )
 
-# ---------------------------------------------------------------------------
-# Main area — guard
-# ---------------------------------------------------------------------------
-cleaned_df: pd.DataFrame | None = st.session_state.cleaned_df
-date_col: str | None = st.session_state.date_col
-y_cols: list[str] | None = st.session_state.y_cols
-freq_info: FrequencyInfo | None = st.session_state.freq_info
-report: CleaningReport | None = st.session_state.cleaning_report
-
-if cleaned_df is None or not y_cols:
-    st.title("Time Series Visualizer")
-    st.caption("ISA 444 · Miami University · Farmer School of Business")
-
-    st.markdown("")  # spacer
-
-    # --- Getting started steps as visual cards ---
-    st.markdown("#### Get Started in 3 Steps")
-    c1, c2, c3 = st.columns(3)
-    with c1:
-        st.markdown(
-            '<div style="background:#F5F5F5; border-radius:8px; padding:1rem; '
-            'border-left:4px solid #C41230; height:100%;">'
-            '<div style="font-size:1.6rem; font-weight:700; color:#C41230;">1</div>'
-            '<div style="font-weight:600; margin:0.3rem 0 0.2rem;">Load Data</div>'
-            '<div style="font-size:0.82rem; color:#444;">'
-            'Upload a CSV from the sidebar or pick one of the built-in demo datasets.'
-            '</div></div>',
-            unsafe_allow_html=True,
-        )
-    with c2:
-        st.markdown(
-            '<div style="background:#F5F5F5; border-radius:8px; padding:1rem; '
-            'border-left:4px solid #C41230; height:100%;">'
-            '<div style="font-size:1.6rem; font-weight:700; color:#C41230;">2</div>'
-            '<div style="font-weight:600; margin:0.3rem 0 0.2rem;">Pick Columns</div>'
-            '<div style="font-size:0.82rem; color:#444;">'
-            'Select a date column and one or more numeric value columns. '
-            'The app auto-detects sensible defaults.'
-            '</div></div>',
-            unsafe_allow_html=True,
-        )
-    with c3:
-        st.markdown(
-            '<div style="background:#F5F5F5; border-radius:8px; padding:1rem; '
-            'border-left:4px solid #C41230; height:100%;">'
-            '<div style="font-size:1.6rem; font-weight:700; color:#C41230;">3</div>'
-            '<div style="font-weight:600; margin:0.3rem 0 0.2rem;">Explore</div>'
-            '<div style="font-size:0.82rem; color:#444;">'
-            'Choose from 9+ chart types, view summary statistics, '
-            'and get AI-powered chart interpretation.'
-            '</div></div>',
-            unsafe_allow_html=True,
-        )
+    # ===================================================================
+    # Welcome screen
+    # ===================================================================
+    with gr.Column(visible=True) as welcome_col:
+        gr.Markdown(_WELCOME_MD)
+
+    # ===================================================================
+    # Analysis panel (hidden until setup applied)
+    # ===================================================================
+    with gr.Column(visible=False) as analysis_col:
+        with gr.Accordion("Data Quality Report", open=False):
+            quality_md = gr.Markdown("")
+
+        with gr.Tabs():
+            # ---------------------------------------------------------------
+            # Tab: Single Series
+            # ---------------------------------------------------------------
+            with gr.Tab("Single Series"):
+                with gr.Row():
+                    with gr.Column(scale=1, min_width=280):
+                        single_y_dd = gr.Dropdown(label="Value column", choices=[])
+                        dr_mode_radio = gr.Radio(
+                            label="Date range",
+                            choices=["All", "Last N years", "Custom"],
+                            value="All",
+                        )
+                        with gr.Column(visible=False) as dr_n_col:
+                            dr_n_slider = gr.Slider(
+                                label="Years", minimum=1, maximum=20,
+                                value=5, step=1,
+                            )
+                        with gr.Column(visible=False) as dr_custom_col:
+                            dr_start_tb = gr.Textbox(label="Start date", placeholder="YYYY-MM-DD")
+                            dr_end_tb = gr.Textbox(label="End date", placeholder="YYYY-MM-DD")
+
+                        single_chart_dd = gr.Dropdown(
+                            label="Chart type", choices=_CHART_TYPES,
+                            value=_CHART_TYPES[0],
+                        )
+                        single_pal_dd = gr.Dropdown(
+                            label="Color palette", choices=_PALETTE_NAMES,
+                            value=_PALETTE_NAMES[0],
+                        )
+                        single_swatch = gr.Plot(label="Palette preview", show_label=False)
+
+                        with gr.Column(visible=False) as color_by_col:
+                            color_by_dd = gr.Dropdown(
+                                label="Color by",
+                                choices=["month", "quarter", "year", "day_of_week"],
+                            )
+                        with gr.Column(visible=False) as period_col:
+                            period_dd = gr.Dropdown(
+                                label="Period", choices=["month", "quarter"],
+                                value="month",
+                            )
+                        with gr.Column(visible=False) as window_col:
+                            window_slider = gr.Slider(
+                                label="Window", minimum=2, maximum=52,
+                                value=12, step=1,
+                            )
+                        with gr.Column(visible=False) as lag_col:
+                            lag_slider = gr.Slider(
+                                label="Lag", minimum=1, maximum=52,
+                                value=1, step=1,
+                            )
+                        with gr.Column(visible=False) as decomp_col:
+                            decomp_dd = gr.Dropdown(
+                                label="Model",
+                                choices=["additive", "multiplicative"],
+                                value="additive",
+                            )
+                        single_update_btn = gr.Button("Update chart", variant="primary")
+
+                    with gr.Column(scale=3):
+                        single_plot = gr.Plot(label="Chart")
+                        with gr.Accordion("Summary Statistics", open=False):
+                            single_stats_md = gr.Markdown("")
+                        with gr.Accordion("AI Chart Interpretation", open=False):
+                            gr.Markdown(
+                                "*The chart image (PNG) is sent to OpenAI for "
+                                "interpretation. Do not include sensitive data.*"
+                            )
+                            single_interp_btn = gr.Button(
+                                "Interpret Chart with AI", variant="secondary",
+                            )
+                            single_interp_md = gr.Markdown("")
+
+            # ---------------------------------------------------------------
+            # Tab: Few Series (Panel)
+            # ---------------------------------------------------------------
+            with gr.Tab("Few Series (Panel)"):
+                with gr.Row():
+                    with gr.Column(scale=1, min_width=280):
+                        panel_cols_cbg = gr.CheckboxGroup(
+                            label="Columns to plot", choices=[],
+                        )
+                        panel_chart_dd = gr.Dropdown(
+                            label="Chart type", choices=["line", "bar"],
+                            value="line",
+                        )
+                        panel_shared_cb = gr.Checkbox(
+                            label="Shared Y axis", value=True,
+                        )
+                        panel_pal_dd = gr.Dropdown(
+                            label="Color palette", choices=_PALETTE_NAMES,
+                            value=_PALETTE_NAMES[0],
+                        )
+                        panel_update_btn = gr.Button("Update chart", variant="primary")
+
+                    with gr.Column(scale=3):
+                        panel_plot = gr.Plot(label="Panel Chart")
+                        with gr.Accordion("Per-series Summary", open=False):
+                            panel_summary_md = gr.Markdown("")
+                        with gr.Accordion("AI Chart Interpretation", open=False):
+                            gr.Markdown(
+                                "*The chart image (PNG) is sent to OpenAI for "
+                                "interpretation. Do not include sensitive data.*"
+                            )
+                            panel_interp_btn = gr.Button(
+                                "Interpret Chart with AI", variant="secondary",
+                            )
+                            panel_interp_md = gr.Markdown("")
+
+            # ---------------------------------------------------------------
+            # Tab: Many Series (Spaghetti)
+            # ---------------------------------------------------------------
+            with gr.Tab("Many Series (Spaghetti)"):
+                with gr.Row():
+                    with gr.Column(scale=1, min_width=280):
+                        spag_cols_cbg = gr.CheckboxGroup(
+                            label="Columns to include", choices=[],
+                        )
+                        spag_alpha_slider = gr.Slider(
+                            label="Alpha (opacity)",
+                            minimum=0.05, maximum=1.0, value=0.15, step=0.05,
+                        )
+                        spag_topn_num = gr.Number(
+                            label="Highlight top N (0 = none)", value=0,
+                            minimum=0, precision=0,
+                        )
+                        spag_highlight_dd = gr.Dropdown(
+                            label="Highlight series",
+                            choices=["(none)"], value="(none)",
+                        )
+                        spag_median_cb = gr.Checkbox(
+                            label="Show Median + IQR band", value=False,
+                        )
+                        spag_pal_dd = gr.Dropdown(
+                            label="Color palette", choices=_PALETTE_NAMES,
+                            value=_PALETTE_NAMES[0],
+                        )
+                        spag_update_btn = gr.Button("Update chart", variant="primary")
+
+                    with gr.Column(scale=3):
+                        spag_plot = gr.Plot(label="Spaghetti Chart")
+                        with gr.Accordion("Per-series Summary", open=False):
+                            spag_summary_md = gr.Markdown("")
+                        with gr.Accordion("AI Chart Interpretation", open=False):
+                            gr.Markdown(
+                                "*The chart image (PNG) is sent to OpenAI for "
+                                "interpretation. Do not include sensitive data.*"
+                            )
+                            spag_interp_btn = gr.Button(
+                                "Interpret Chart with AI", variant="secondary",
+                            )
+                            spag_interp_md = gr.Markdown("")
+
+    # ===================================================================
+    # Event wiring
+    # ===================================================================
+
+    _DATA_LOAD_OUTPUTS = [
+        app_state, setup_col, date_col_dd, format_radio, long_col,
+        group_col_dd, value_col_dd, y_cols_cbg, delim_md,
+        welcome_col, analysis_col,
+    ]
+
+    file_upload.change(
+        on_file_upload,
+        inputs=[file_upload, app_state],
+        outputs=_DATA_LOAD_OUTPUTS,
+    )
 
-    st.markdown("")  # spacer
-
-    # --- Features and privacy ---
-    f1, f2 = st.columns(2)
-    with f1:
-        st.markdown("#### Features")
-        st.markdown(
-            "| | |\n"
-            "|:--|:--|\n"
-            "| **Smart Import** | Auto-detect delimiters, dates, and numeric formats |\n"
-            "| **9+ Chart Types** | Line, seasonal, ACF/PACF, decomposition, lag, and more |\n"
-            "| **Multi-Series** | Panel (small multiples) and spaghetti plots |\n"
-            "| **AI Insights** | GPT vision analyzes your charts and returns structured interpretation |\n"
-            "| **QueryChat** | Natural-language data filtering powered by DuckDB |"
-        )
-    with f2:
-        st.markdown("#### Good to Know")
-        st.info(
-            "**Privacy** — All data processing happens in-memory. "
-            "No data is stored on disk. Only chart images (never raw data) "
-            "are sent to OpenAI when you click *Interpret Chart with AI*.",
-            icon="\U0001f512",
-        )
-        st.info(
-            "**Demo Datasets** — Three built-in FRED datasets are available in the sidebar: "
-            "Ohio Unemployment Rate (single series), Manufacturing Employment for five "
-            "states in wide format, and the same data in long/stacked format. "
-            "All sourced from the Federal Reserve Economic Data (FRED).",
-            icon="\U0001f4ca",
+    demo_dd.change(
+        on_demo_select,
+        inputs=[demo_dd, app_state],
+        outputs=_DATA_LOAD_OUTPUTS,
+    )
+
+    # Reset via page reload
+    reset_btn.click(fn=None, js="() => { window.location.reload(); }")
+
+    # Format toggle
+    format_radio.change(
+        on_format_change,
+        inputs=[format_radio],
+        outputs=[long_col],
+    )
+
+    # Long-format column changes update y_cols
+    for _comp in [group_col_dd, value_col_dd]:
+        _comp.change(
+            on_long_cols_change,
+            inputs=[date_col_dd, group_col_dd, value_col_dd, app_state],
+            outputs=[y_cols_cbg],
         )
 
-    st.stop()
+    # Apply setup
+    _APPLY_OUTPUTS = [
+        app_state,             # 0
+        welcome_col,           # 1
+        analysis_col,          # 2
+        quality_md,            # 3
+        freq_info_md,          # 4
+        # Single
+        single_y_dd,           # 5
+        color_by_dd,           # 6
+        single_plot,           # 7
+        single_stats_md,       # 8
+        single_interp_md,      # 9
+        # Panel
+        panel_cols_cbg,        # 10
+        panel_plot,            # 11
+        panel_summary_md,      # 12
+        panel_interp_md,       # 13
+        # Spaghetti
+        spag_cols_cbg,         # 14
+        spag_highlight_dd,     # 15
+        spag_plot,             # 16
+        spag_summary_md,       # 17
+        spag_interp_md,        # 18
+    ]
+
+    apply_btn.click(
+        on_apply_setup,
+        inputs=[
+            app_state, date_col_dd, format_radio, group_col_dd,
+            value_col_dd, y_cols_cbg, dup_dd, missing_dd, freq_tb,
+        ],
+        outputs=_APPLY_OUTPUTS,
+    )
 
-# If QueryChat is active, use its filtered df
-if st.session_state.qc is not None:
-    working_df = get_filtered_pandas_df(st.session_state.qc)
-    # Fall back if filtered df is empty or missing expected columns
-    required = {date_col} | set(y_cols)
-    if working_df.empty or not required.issubset(working_df.columns):
-        working_df = cleaned_df
-else:
-    working_df = cleaned_df
+    # Date range mode visibility
+    dr_mode_radio.change(
+        on_dr_mode_change,
+        inputs=[dr_mode_radio],
+        outputs=[dr_n_col, dr_custom_col],
+    )
+
+    # Chart type conditional controls
+    single_chart_dd.change(
+        on_chart_type_change,
+        inputs=[single_chart_dd],
+        outputs=[color_by_col, period_col, window_col, lag_col, decomp_col],
+    )
+
+    # Palette swatch preview
+    single_pal_dd.change(on_palette_change, [single_pal_dd], [single_swatch])
+
+    # Initialise swatch on load
+    demo.load(on_palette_change, [single_pal_dd], [single_swatch])
+
+    # ---- Single series chart + stats ----
+    single_update_btn.click(
+        on_single_update,
+        inputs=[
+            app_state, single_y_dd, dr_mode_radio, dr_n_slider,
+            dr_start_tb, dr_end_tb, single_chart_dd, single_pal_dd,
+            color_by_dd, period_dd, window_slider, lag_slider, decomp_dd,
+        ],
+        outputs=[app_state, single_plot, single_stats_md],
+    )
+
+    single_interp_btn.click(
+        on_single_interpret,
+        inputs=[app_state],
+        outputs=[single_interp_md],
+    )
+
+    # ---- Panel chart + stats ----
+    panel_update_btn.click(
+        on_panel_update,
+        inputs=[app_state, panel_cols_cbg, panel_chart_dd, panel_shared_cb, panel_pal_dd],
+        outputs=[app_state, panel_plot, panel_summary_md],
+    )
+
+    panel_interp_btn.click(
+        on_panel_interpret,
+        inputs=[app_state],
+        outputs=[panel_interp_md],
+    )
+
+    # ---- Spaghetti chart + stats ----
+    spag_update_btn.click(
+        on_spag_update,
+        inputs=[
+            app_state, spag_cols_cbg, spag_alpha_slider, spag_topn_num,
+            spag_highlight_dd, spag_median_cb, spag_pal_dd,
+        ],
+        outputs=[app_state, spag_plot, spag_summary_md],
+    )
+
+    spag_interp_btn.click(
+        on_spag_interpret,
+        inputs=[app_state],
+        outputs=[spag_interp_md],
+    )
 
-# Data quality report
-_data_quality_fragment(report)
 
 # ---------------------------------------------------------------------------
-# View selector
+# Launch
 # ---------------------------------------------------------------------------
-if "active_view" not in st.session_state:
-    st.session_state["active_view"] = _initial_view_label()
-if st.session_state.get("_prev_active_view") is None:
-    st.session_state["_prev_active_view"] = st.session_state["active_view"]
-
-st.subheader("Explore: Choose Analysis View")
-st.caption("Switching views resets chart controls and filtered data for a clean start.")
-view_col, reset_col = st.columns([6, 1])
-with view_col:
-    active_view = st.radio(
-        "Analysis view",
-        _VIEW_LABELS,
-        key="active_view",
-        horizontal=True,
-        on_change=_on_view_change,
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        theme=MiamiTheme(),
+        css=get_miami_css(),
     )
-with reset_col:
-    if st.button("Reset all", key="reset_main", use_container_width=True):
-        _reset_all_state()
-
-# ===================================================================
-# Tab A — Single Series
-# ===================================================================
-if active_view == "Single Series":
-    _single_chart_fragment(working_df, date_col, y_cols, freq_info, style_dict)
-    _single_insights_fragment(freq_info, date_col)
-
-# ===================================================================
-# Tab B — Few Series (Panel)
-# ===================================================================
-elif active_view == "Few Series (Panel)":
-    _panel_chart_fragment(working_df, date_col, y_cols, style_dict)
-    _panel_insights_fragment(working_df, date_col, freq_info)
-
-# ===================================================================
-# Tab C — Many Series (Spaghetti)
-# ===================================================================
-else:
-    _spaghetti_chart_fragment(working_df, date_col, y_cols, style_dict)
-    _spaghetti_insights_fragment(working_df, date_col, freq_info)

requirements.txt

@@ -1,11 +1,11 @@
-streamlit==1.54.0
+gradio>=6.0.0
 pandas==2.3.3
 numpy==2.4.2
 matplotlib==3.10.8
 statsmodels==0.14.6
 scipy==1.17.0
 openai==2.2.0
-querychat[streamlit]==0.5.1
+querychat[gradio]==0.5.1
 duckdb==1.4.4
 palettable==3.3.3
 pydantic==2.12.5

src/ai_interpretation.py

@@ -7,7 +7,7 @@ Pydantic structured output.
 Provides:
     - Pydantic models for structured chart analysis results
     - Vision-based chart interpretation via OpenAI's GPT-5.2 model
-    - Streamlit rendering of interpretation results
+    - Markdown rendering of interpretation results (framework-agnostic)
 """
 
 from __future__ import annotations
@@ -19,7 +19,6 @@ from typing import Literal
 
 import openai
 from pydantic import BaseModel, ConfigDict
-import streamlit as st
 
 
 # ---------------------------------------------------------------------------
@@ -184,7 +183,7 @@ def interpret_chart(
 
 
 # ---------------------------------------------------------------------------
-# Streamlit rendering
+# Markdown rendering (framework-agnostic)
 # ---------------------------------------------------------------------------
 
 _DIRECTION_EMOJI = {
@@ -201,69 +200,75 @@ _SEVERITY_COLOR = {
 }
 
 
-def render_interpretation(interp: ChartInterpretation) -> None:
-    """Render a :class:`ChartInterpretation` as a styled Streamlit card.
+def render_interpretation_markdown(interp: ChartInterpretation) -> str:
+    """Render a :class:`ChartInterpretation` as a Markdown string.
 
-    Uses ``st.markdown``, ``st.expander``, and related widgets to lay out
-    the interpretation in an easy-to-read format with sections for trend,
-    seasonality, stationarity, anomalies, key observations, summary, and
-    recommendations.
+    Returns a formatted multi-section Markdown document suitable for
+    display in ``gr.Markdown`` or any other Markdown renderer.
     """
+    lines: list[str] = []
 
-    st.markdown("### AI Chart Interpretation")
-    st.markdown(
-        f"**Detected chart type:** {interp.chart_type_detected}"
-    )
+    lines.append("### AI Chart Interpretation")
+    lines.append(f"**Detected chart type:** {interp.chart_type_detected}")
+    lines.append("")
 
     # ---- Summary ----------------------------------------------------------
-    st.markdown("---")
-    st.markdown(f"**Summary:** {interp.summary}")
+    lines.append("---")
+    lines.append(f"**Summary:** {interp.summary}")
+    lines.append("")
 
     # ---- Key observations -------------------------------------------------
-    with st.expander("Key Observations", expanded=True):
-        for obs in interp.key_observations:
-            st.markdown(f"- {obs}")
+    lines.append("#### Key Observations")
+    for obs in interp.key_observations:
+        lines.append(f"- {obs}")
+    lines.append("")
 
     # ---- Trend ------------------------------------------------------------
-    with st.expander("Trend Analysis"):
-        arrow = _DIRECTION_EMOJI.get(interp.trend.direction, "")
-        st.markdown(
-            f"**Direction:** {interp.trend.direction.capitalize()} {arrow}"
-        )
-        st.markdown(interp.trend.description)
+    lines.append("#### Trend Analysis")
+    arrow = _DIRECTION_EMOJI.get(interp.trend.direction, "")
+    lines.append(f"**Direction:** {interp.trend.direction.capitalize()} {arrow}")
+    lines.append("")
+    lines.append(interp.trend.description)
+    lines.append("")
 
     # ---- Seasonality ------------------------------------------------------
-    with st.expander("Seasonality"):
-        status = "Detected" if interp.seasonality.detected else "Not detected"
-        st.markdown(f"**Status:** {status}")
-        if interp.seasonality.period:
-            st.markdown(f"**Period:** {interp.seasonality.period}")
-        st.markdown(interp.seasonality.description)
+    lines.append("#### Seasonality")
+    status = "Detected" if interp.seasonality.detected else "Not detected"
+    lines.append(f"**Status:** {status}")
+    if interp.seasonality.period:
+        lines.append(f"**Period:** {interp.seasonality.period}")
+    lines.append("")
+    lines.append(interp.seasonality.description)
+    lines.append("")
 
     # ---- Stationarity -----------------------------------------------------
-    with st.expander("Stationarity"):
-        label = (
-            "Likely stationary"
-            if interp.stationarity.likely_stationary
-            else "Likely non-stationary"
-        )
-        st.markdown(f"**Assessment:** {label}")
-        st.markdown(interp.stationarity.description)
+    lines.append("#### Stationarity")
+    label = (
+        "Likely stationary"
+        if interp.stationarity.likely_stationary
+        else "Likely non-stationary"
+    )
+    lines.append(f"**Assessment:** {label}")
+    lines.append("")
+    lines.append(interp.stationarity.description)
+    lines.append("")
 
     # ---- Anomalies --------------------------------------------------------
-    with st.expander("Anomalies"):
-        if not interp.anomalies:
-            st.markdown("No anomalies detected.")
-        else:
-            for anomaly in interp.anomalies:
-                color = _SEVERITY_COLOR.get(anomaly.severity, "gray")
-                st.markdown(
-                    f"- **[{anomaly.approximate_location}]** "
-                    f":{color}[{anomaly.severity.upper()}] "
-                    f"-- {anomaly.description}"
-                )
+    lines.append("#### Anomalies")
+    if not interp.anomalies:
+        lines.append("No anomalies detected.")
+    else:
+        for anomaly in interp.anomalies:
+            lines.append(
+                f"- **[{anomaly.approximate_location}]** "
+                f"*{anomaly.severity.upper()}* "
+                f"-- {anomaly.description}"
+            )
+    lines.append("")
 
     # ---- Recommendations --------------------------------------------------
-    with st.expander("Recommended Next Steps"):
-        for rec in interp.recommendations:
-            st.markdown(f"1. {rec}")
+    lines.append("#### Recommended Next Steps")
+    for i, rec in enumerate(interp.recommendations, 1):
+        lines.append(f"{i}. {rec}")
+
+    return "\n".join(lines)

src/querychat_helpers.py

@@ -2,7 +2,7 @@
 QueryChat initialization and filtered DataFrame helpers.
 
 Provides convenience wrappers around the ``querychat`` library for
-natural-language filtering of time-series DataFrames inside a Streamlit
+natural-language filtering of time-series DataFrames inside a Gradio
 app.  All functions degrade gracefully when the package or an API key
 is unavailable.
 """
@@ -13,10 +13,9 @@ import os
 from typing import List, Optional
 
 import pandas as pd
-import streamlit as st
 
 try:
-    from querychat.streamlit import QueryChat as _QueryChat
+    from querychat.gradio import QueryChat as _QueryChat
 
     _QUERYCHAT_AVAILABLE = True
 except ImportError:  # pragma: no cover
@@ -78,7 +77,7 @@ def create_querychat(
     if not _QUERYCHAT_AVAILABLE:
         raise RuntimeError(
             "The 'querychat' package is not installed. "
-            "Install it with: pip install 'querychat[streamlit]'"
+            "Install it with: pip install 'querychat[gradio]'"
         )
 
     if y_cols is None:
@@ -125,7 +124,7 @@ def create_querychat(
 # Filtered DataFrame extraction
 # ---------------------------------------------------------------------------
 
-def get_filtered_pandas_df(qc) -> pd.DataFrame:
+def get_filtered_pandas_df(qc, state_dict=None) -> pd.DataFrame:
     """Extract the currently filtered DataFrame from a QueryChat instance.
 
     The underlying ``qc.df()`` may return a *narwhals* DataFrame rather
@@ -136,6 +135,9 @@ def get_filtered_pandas_df(qc) -> pd.DataFrame:
     ----------
     qc:
         A QueryChat instance previously created via :func:`create_querychat`.
+    state_dict:
+        The Gradio state dictionary from ``qc.ui()``.  Required for the
+        Gradio variant of QueryChat.
 
     Returns
     -------
@@ -143,12 +145,22 @@ def get_filtered_pandas_df(qc) -> pd.DataFrame:
         The filtered data as a pandas DataFrame.
     """
     try:
-        result = qc.df()
+        if state_dict is not None:
+            result = qc.df(state_dict)
+        else:
+            result = qc.df()
 
         # narwhals (or polars) DataFrames expose .to_pandas()
         if hasattr(result, "to_pandas"):
             return result.to_pandas()
 
+        # narwhals also has .to_native() which may give pandas directly
+        if hasattr(result, "to_native"):
+            native = result.to_native()
+            if isinstance(native, pd.DataFrame):
+                return native
+            return pd.DataFrame(native)
+
         # Already a pandas DataFrame
         if isinstance(result, pd.DataFrame):
             return result
@@ -159,7 +171,7 @@ def get_filtered_pandas_df(qc) -> pd.DataFrame:
         # If anything goes wrong, surface the unfiltered data so the app
         # can continue to function.
         try:
-            raw = qc.df()
+            raw = qc.df() if state_dict is None else qc.df(state_dict)
             if isinstance(raw, pd.DataFrame):
                 return raw
         except Exception:  # noqa: BLE001

src/ui_theme.py

@@ -1,10 +1,11 @@
 """
 ui_theme.py
 -----------
-Miami University branded theme and styling utilities for Streamlit apps.
+Miami University branded theme and styling utilities.
 
 Provides:
-    - CSS injection for Streamlit components (buttons, sidebar, metrics, cards)
+    - Gradio theme subclass (MiamiTheme) with Miami branding
+    - Custom CSS string for elements beyond theme control
     - Matplotlib rcParams styled with Miami branding
     - ColorBrewer palette loading via palettable with graceful fallback
     - Color-swatch preview figure generation
@@ -15,9 +16,11 @@ from __future__ import annotations
 import itertools
 from typing import Dict, List, Optional
 
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
 import matplotlib.figure
 import matplotlib.pyplot as plt
-import streamlit as st
 
 # ---------------------------------------------------------------------------
 # Brand constants — Miami University (Ohio) official palette
@@ -36,139 +39,197 @@ _HOVER_RED = "#9E0E26"
 
 
 # ---------------------------------------------------------------------------
-# Streamlit CSS injection
+# Gradio theme
 # ---------------------------------------------------------------------------
-def apply_miami_theme() -> None:
-    """Inject Miami-branded CSS into the active Streamlit page.
-
-    Styles affected:
-        * Primary buttons  -- Miami Red background with white text
-        * Card containers  -- subtle border and rounded corners
-        * Sidebar header   -- Miami Red accent bar
-        * Metric cards     -- light background with left red accent
+
+_miami_red_palette = colors.Color(
+    c50="#fff5f6",
+    c100="#ffe0e4",
+    c200="#ffc7ce",
+    c300="#ffa3ad",
+    c400="#ff6b7d",
+    c500="#C41230",
+    c600="#a30f27",
+    c700="#850c1f",
+    c800="#6b0a19",
+    c900="#520714",
+    c950="#3d0510",
+    name="miami_red",
+)
+
+
+class MiamiTheme(Base):
+    """Gradio theme subclass with Miami University branding."""
+
+    def __init__(self, **kwargs):
+        super().__init__(
+            primary_hue=_miami_red_palette,
+            secondary_hue=colors.gray,
+            neutral_hue=colors.gray,
+            spacing_size=sizes.spacing_md,
+            radius_size=sizes.radius_sm,
+            text_size=sizes.text_md,
+            font=(
+                fonts.GoogleFont("Source Sans Pro"),
+                fonts.Font("ui-sans-serif"),
+                fonts.Font("system-ui"),
+                fonts.Font("sans-serif"),
+            ),
+            font_mono=(
+                fonts.Font("ui-monospace"),
+                fonts.Font("SFMono-Regular"),
+                fonts.Font("monospace"),
+            ),
+            **kwargs,
+        )
+        super().set(
+            # Buttons
+            button_primary_background_fill="*primary_500",
+            button_primary_background_fill_hover="*primary_700",
+            button_primary_text_color="white",
+            button_primary_border_color="*primary_500",
+            # Block titles
+            block_title_text_weight="600",
+            block_title_text_color="*primary_500",
+            # Body
+            body_text_color="*neutral_900",
+            # Sidebar accent
+            block_border_width="1px",
+            block_border_color="*neutral_200",
+            # Checkbox / Radio
+            checkbox_background_color_selected="*primary_500",
+            checkbox_border_color_selected="*primary_500",
+        )
+
+
+def get_miami_css() -> str:
+    """Return custom CSS for elements that ``gr.themes.Base`` cannot control.
+
+    This string is passed to ``gr.Blocks(css=...)`` alongside the
+    :class:`MiamiTheme`.
     """
-    css = f"""
-    <style>
-        /* ---- Primary buttons ---- */
-        .stButton > button[kind="primary"],
-        .stButton > button {{
-            background-color: {MIAMI_RED};
-            color: {_WHITE};
-            border: none;
-            border-radius: 6px;
-            padding: 0.5rem 1.25rem;
-            font-weight: 600;
-            transition: background-color 0.2s ease;
-        }}
-        .stButton > button:hover {{
-            background-color: {_HOVER_RED};
-            color: {_WHITE};
-            border: none;
-        }}
-        .stButton > button:active,
-        .stButton > button:focus {{
-            background-color: {_HOVER_RED};
-            color: {_WHITE};
-            box-shadow: none;
-        }}
-
-        /* ---- Expander card borders (box-shadow to avoid layout shift) ---- */
-        div[data-testid="stExpander"] {{
-            box-shadow: 0 0 0 1px {_BORDER_GRAY};
-            border-radius: 8px;
-        }}
-
-        /* ---- Sidebar header accent ---- */
-        section[data-testid="stSidebar"] > div:first-child {{
-            border-top: 4px solid {MIAMI_RED};
-        }}
-        section[data-testid="stSidebar"] h1,
-        section[data-testid="stSidebar"] h2,
-        section[data-testid="stSidebar"] h3 {{
-            color: {MIAMI_RED};
-        }}
-
-        /* ---- Metric cards (inset shadow for left accent, no layout impact) ---- */
-        div[data-testid="stMetric"] {{
-            background-color: {_LIGHT_GRAY};
-            box-shadow: inset 4px 0 0 0 {MIAMI_RED};
-            border-radius: 6px;
-            padding: 0.6rem 0.75rem 0.6rem 1rem;
-        }}
-        div[data-testid="stMetric"] label {{
-            color: {_BLACK};
-            font-size: 0.78rem;
-        }}
-        div[data-testid="stMetric"] div[data-testid="stMetricValue"] {{
-            color: {_BLACK};
-            font-weight: 700;
-            font-size: 0.95rem;
-        }}
-
-        /* ---- Sidebar developer card ---- */
-        .dev-card {{
-            padding: 0;
-            background: transparent;
-        }}
-        .dev-row {{
-            display: flex;
-            gap: 0.5rem;
-            align-items: flex-start;
-        }}
-        .dev-avatar {{
-            width: 28px;
-            height: 28px;
-            min-width: 28px;
-            fill: {_BLACK};
-        }}
-        .dev-name {{
-            font-weight: 600;
-            color: {_BLACK};
-            font-size: 0.82rem;
-            line-height: 1.3;
-        }}
-        .dev-role {{
-            font-size: 0.7rem;
-            color: #6c757d;
-            line-height: 1.3;
-        }}
-        .dev-links {{
-            display: flex;
-            gap: 0.3rem;
-            flex-wrap: wrap;
-            margin-top: 0.35rem;
-        }}
-        .dev-link,
-        .dev-link:visited,
-        .dev-link:link {{
-            display: inline-flex;
-            align-items: center;
-            gap: 0.2rem;
-            padding: 0.15rem 0.4rem;
-            border: 1px solid {MIAMI_RED};
-            border-radius: 4px;
-            font-size: 0.65rem;
-            color: {MIAMI_RED} !important;
-            text-decoration: none;
-            background: {_WHITE};
-            line-height: 1.4;
-            white-space: nowrap;
-        }}
-        .dev-link svg {{
-            width: 11px;
-            height: 11px;
-            fill: {MIAMI_RED};
-        }}
-        .dev-link:hover {{
-            background-color: {MIAMI_RED};
-            color: {_WHITE} !important;
-        }}
-        .dev-link:hover svg {{
-            fill: {_WHITE};
-        }}
-    </style>
+    return f"""
+    /* ---- Sidebar header accent ---- */
+    .sidebar > .panel {{
+        border-top: 4px solid {MIAMI_RED} !important;
+    }}
+
+    /* ---- Developer card ---- */
+    .dev-card {{
+        padding: 0;
+        background: transparent;
+    }}
+    .dev-row {{
+        display: flex;
+        gap: 0.5rem;
+        align-items: flex-start;
+    }}
+    .dev-avatar {{
+        width: 28px;
+        height: 28px;
+        min-width: 28px;
+        fill: {_BLACK};
+    }}
+    .dev-name {{
+        font-weight: 600;
+        color: {_BLACK};
+        font-size: 0.82rem;
+        line-height: 1.3;
+    }}
+    .dev-role {{
+        font-size: 0.7rem;
+        color: #6c757d;
+        line-height: 1.3;
+    }}
+    .dev-links {{
+        display: flex;
+        gap: 0.3rem;
+        flex-wrap: wrap;
+        margin-top: 0.35rem;
+    }}
+    .dev-link,
+    .dev-link:visited,
+    .dev-link:link {{
+        display: inline-flex;
+        align-items: center;
+        gap: 0.2rem;
+        padding: 0.15rem 0.4rem;
+        border: 1px solid {MIAMI_RED};
+        border-radius: 4px;
+        font-size: 0.65rem;
+        color: {MIAMI_RED} !important;
+        text-decoration: none;
+        background: {_WHITE};
+        line-height: 1.4;
+        white-space: nowrap;
+    }}
+    .dev-link svg {{
+        width: 11px;
+        height: 11px;
+        fill: {MIAMI_RED};
+    }}
+    .dev-link:hover {{
+        background-color: {MIAMI_RED};
+        color: {_WHITE} !important;
+    }}
+    .dev-link:hover svg {{
+        fill: {_WHITE};
+    }}
+
+    /* ---- Metric-like stat cards ---- */
+    .stat-card {{
+        background-color: {_LIGHT_GRAY};
+        box-shadow: inset 4px 0 0 0 {MIAMI_RED};
+        border-radius: 6px;
+        padding: 0.6rem 0.75rem 0.6rem 1rem;
+    }}
+    .stat-card .stat-label {{
+        color: {_BLACK};
+        font-size: 0.78rem;
+    }}
+    .stat-card .stat-value {{
+        color: {_BLACK};
+        font-weight: 700;
+        font-size: 0.95rem;
+    }}
+
+    /* ---- Step cards on welcome screen ---- */
+    .step-card {{
+        background: {_LIGHT_GRAY};
+        border-radius: 8px;
+        padding: 1rem;
+        border-left: 4px solid {MIAMI_RED};
+        height: 100%;
+    }}
+    .step-card .step-number {{
+        font-size: 1.6rem;
+        font-weight: 700;
+        color: {MIAMI_RED};
+    }}
+    .step-card .step-title {{
+        font-weight: 600;
+        margin: 0.3rem 0 0.2rem;
+    }}
+    .step-card .step-desc {{
+        font-size: 0.82rem;
+        color: #444;
+    }}
+
+    /* ---- App title in sidebar ---- */
+    .app-title {{
+        text-align: center;
+        margin-bottom: 0.5rem;
+    }}
+    .app-title .title-text {{
+        font-size: 1.6rem;
+        font-weight: 800;
+        color: {MIAMI_RED};
+    }}
+    .app-title .subtitle-text {{
+        font-size: 0.82rem;
+        color: {_BLACK};
+    }}
     """
-    st.markdown(css, unsafe_allow_html=True)
 
 
 # ---------------------------------------------------------------------------
@@ -359,7 +420,7 @@ def render_palette_preview(
     Returns
     -------
     matplotlib.figure.Figure
-        A Figure instance ready to be passed to ``st.pyplot()`` or saved.
+        A Figure instance ready to be passed to ``gr.Plot`` or saved.
     """
     n = len(colors)
     fig_width = max(swatch_width * n, 2.0)
@@ -384,5 +445,5 @@ def render_palette_preview(
     ax.set_aspect("equal")
     ax.axis("off")
     fig.subplots_adjust(left=0, right=1, top=1, bottom=0)
-    plt.close(fig)  # prevent display in non-Streamlit contexts
+    plt.close(fig)  # prevent display in non-Gradio contexts
     return fig