ui/components.py

"""
ui/components.py
----------------
Reusable Gradio component builders for AutoDevAgent.

Each function returns a configured Gradio component (or group of
components) that can be assembled into the main app.py layout.

Components built here:
  - build_hitl_panel()       Human-in-the-Loop panel — shown when max
                             retries is hit. Displays the failed code,
                             the last error, 2-3 fix options, and an
                             inline code editor.
  - build_reflection_panel() Self-reflection display — shows the
                             debug agent's structured reasoning per
                             iteration ("saw X, thought Y, did Z").
  - build_iteration_counter() Live iteration + token + time display.
  - build_model_switcher()   Toggle between Llama 8B and 70B.
  - build_language_selector() Language radio with auto-detect badge.

Design:
  - All components are built with Gradio's Blocks API.
  - State is managed via gr.State objects passed through event handlers.
  - Components are returned as named dicts so app.py can wire them
    into event handlers without importing internals.

Usage:
    import gradio as gr
    from ui.components import build_hitl_panel, build_reflection_panel

    with gr.Blocks() as demo:
        hitl   = build_hitl_panel()
        reflex = build_reflection_panel()
"""

import gradio as gr
from typing import Any


# ------------------------------------------------------------------ #
#  Human-in-the-Loop Panel                                            #
# ------------------------------------------------------------------ #

def build_hitl_panel() -> dict[str, Any]:
    """
    Build the Human-in-the-Loop panel shown when max retries is hit.

    Layout:
      ┌────────────────────────────────────────┐
      │  ⚠ Max retries reached                 │
      │  Last error: <error text>              │
      │                                        │
      │  Fix options:                          │
      │  ○ Option 1 description                │
      │  ○ Option 2 description                │
      │  ○ Option 3 description                │
      │                                        │
      │  Or edit the code directly:            │
      │  [code editor textbox]                 │
      │                                        │
      │  [Apply fix]  [Resubmit edited code]   │
      └────────────────────────────────────────┘

    Returns:
        Dict with keys:
          - "panel":          gr.Group — the whole panel
          - "error_display":  gr.Textbox — shows the last error
          - "options_radio":  gr.Radio — 2-3 fix options
          - "code_editor":    gr.Code — inline code editor
          - "apply_btn":      gr.Button — apply chosen fix option
          - "resubmit_btn":   gr.Button — resubmit edited code
    """
    with gr.Group(visible=False) as panel:
        gr.Markdown("### ⚠ Max retries reached — Human input needed")

        with gr.Row():
            gr.Markdown(
                "The agent could not fix the code automatically. "
                "Choose a fix strategy or edit the code directly below."
            )

        error_display = gr.Textbox(
            label="Last error",
            lines=4,
            interactive=False,
            elem_id="hitl_error_display",
        )

        options_radio = gr.Radio(
            choices=[],
            label="Suggested fix strategies",
            value=None,
            elem_id="hitl_options_radio",
        )

        gr.Markdown("**Or edit the code directly:**")

        code_editor = gr.Code(
            label="Code editor",
            language="python",
            lines=20,
            interactive=True,
            elem_id="hitl_code_editor",
        )

        with gr.Row():
            apply_btn = gr.Button(
                value="Apply selected fix",
                variant="primary",
                size="sm",
            )
            resubmit_btn = gr.Button(
                value="Resubmit edited code",
                variant="secondary",
                size="sm",
            )

    return {
        "panel":         panel,
        "error_display": error_display,
        "options_radio": options_radio,
        "code_editor":   code_editor,
        "apply_btn":     apply_btn,
        "resubmit_btn":  resubmit_btn,
    }


def update_hitl_panel(
    hitl_components: dict[str, Any],
    error_msg: str,
    options: list[str],
    broken_code: str,
) -> None:
    """
    Populate the HITL panel with the current error state.

    Called from app.py when the pipeline returns AWAITING_HUMAN status.
    Updates the error display, radio options, and code editor in place.

    Args:
        hitl_components: Dict returned by build_hitl_panel().
        error_msg:       The last error message from the executor.
        options:         List of 2-3 fix option strings from DebugAgent.
        broken_code:     The most recent failing code to pre-populate
                         the inline editor.
    """
    hitl_components["error_display"].value  = error_msg
    hitl_components["options_radio"].choices = options
    hitl_components["options_radio"].value   = None
    hitl_components["code_editor"].value     = broken_code
    hitl_components["panel"].visible         = True


# ------------------------------------------------------------------ #
#  Clarification Panel                                               #
# ------------------------------------------------------------------ #

def build_clarification_panel() -> dict[str, Any]:
    """
    Build the clarification panel shown when the agent needs more info.

    Layout:
      ┌────────────────────────────────────────┐
      │  🤔 Task needs clarification           │
      │  <agent's question>                    │
      │  [user input textbox]                  │
      │  [Submit Clarification]                │
      └────────────────────────────────────────┘

    Returns:
        Dict with keys:
            - "panel":       gr.Group  — container (visible=False by default)
            - "question_md": gr.Markdown — displays the agent's question
            - "answer_input": gr.Textbox — user types their clarification
            - "submit_btn":  gr.Button  — submits the clarification
    """
    with gr.Group(visible=False, elem_id="clarification_panel") as panel:
        gr.Markdown("### 🤔 Task needs clarification")
        question_md = gr.Markdown(
            value="",
            elem_id="clarification_question",
        )
        answer_input = gr.Textbox(
            label="Your clarification",
            placeholder="Type your answer here...",
            lines=2,
            elem_id="clarification_answer",
        )
        with gr.Row():
            submit_btn = gr.Button(
                value="Submit Clarification ▶",
                variant="primary",
                size="sm",
                elem_id="clarification_submit_btn",
            )

    return {
        "panel":        panel,
        "question_md":  question_md,
        "answer_input": answer_input,
        "submit_btn":   submit_btn,
    }


# ------------------------------------------------------------------ #
#  Self-Reflection Panel                                              #
# ------------------------------------------------------------------ #

def build_reflection_panel() -> dict[str, Any]:
    """
    Build the self-reflection panel displayed during each debug iteration.

    Shows the debug agent's structured reasoning before each rewrite:
      - What I saw:     the exact error observed
      - What I think:   the agent's hypothesis for the root cause
      - What I will do: the specific change the agent will make

    Returns:
        Dict with keys:
          - "panel":        gr.Accordion — collapsible wrapper
          - "saw_box":      gr.Textbox — what the agent observed
          - "think_box":    gr.Textbox — the agent's hypothesis
          - "do_box":       gr.Textbox — the planned fix
          - "iteration_md": gr.Markdown — current iteration label
    """
    with gr.Accordion(
        label="Self-reflection (debug agent reasoning)",
        open=False,
        visible=False,
    ) as panel:

        iteration_md = gr.Markdown("**Iteration:** —")

        with gr.Row():
            saw_box = gr.Textbox(
                label="What I saw",
                lines=2,
                interactive=False,
                elem_id="reflection_saw",
            )

        with gr.Row():
            think_box = gr.Textbox(
                label="What I think caused it",
                lines=2,
                interactive=False,
                elem_id="reflection_think",
            )

        with gr.Row():
            do_box = gr.Textbox(
                label="What I will change",
                lines=2,
                interactive=False,
                elem_id="reflection_do",
            )

    return {
        "panel":        panel,
        "saw_box":      saw_box,
        "think_box":    think_box,
        "do_box":       do_box,
        "iteration_md": iteration_md,
    }


def update_reflection_panel(
    reflection_components: dict[str, Any],
    what_i_saw: str,
    what_i_think: str,
    what_i_will_do: str,
    iteration: int,
    max_retries: int,
) -> None:
    """
    Populate the reflection panel with the latest debug iteration data.

    Args:
        reflection_components: Dict returned by build_reflection_panel().
        what_i_saw:            The error or wrong output observed.
        what_i_think:          The agent's hypothesis.
        what_i_will_do:        The planned fix.
        iteration:             Current iteration number (1-based).
        max_retries:           Configured max retries for the label.
    """
    reflection_components["iteration_md"].value = (
        f"**Iteration:** {iteration} / {max_retries}"
    )
    reflection_components["saw_box"].value    = what_i_saw
    reflection_components["think_box"].value  = what_i_think
    reflection_components["do_box"].value     = what_i_will_do
    reflection_components["panel"].visible    = True
    reflection_components["panel"].open       = True


# ------------------------------------------------------------------ #
#  Iteration Counter + Observability Strip                            #
# ------------------------------------------------------------------ #

def build_stats_strip() -> dict[str, Any]:
    """
    Build the live stats strip showing iteration count, exec time,
    and Groq token usage.

    Displayed as a compact row of metric cards beneath the main output.

    Returns:
        Dict with keys:
          - "iterations_md": gr.Markdown — debug iteration count
          - "exec_time_md":  gr.Markdown — execution time in seconds
          - "tokens_md":     gr.Markdown — total Groq tokens used
          - "warning_md":    gr.Markdown — rate limit warning (hidden by default)
    """
    with gr.Row(elem_id="stats_strip"):
        iterations_md = gr.Markdown(
            value="**Iterations:** 0",
            elem_id="stats_iterations",
        )
        exec_time_md = gr.Markdown(
            value="**Time:** 0.0s",
            elem_id="stats_exec_time",
        )
        tokens_md = gr.Markdown(
            value="**Tokens:** 0",
            elem_id="stats_tokens",
        )
        warning_md = gr.Markdown(
            value="",
            visible=False,
            elem_id="stats_warning",
        )

    return {
        "iterations_md": iterations_md,
        "exec_time_md":  exec_time_md,
        "tokens_md":     tokens_md,
        "warning_md":    warning_md,
    }


def update_stats_strip(
    stats_components: dict[str, Any],
    iterations: int,
    exec_time: float,
    total_tokens: int,
    rate_limit_warning: bool = False,
) -> None:
    """
    Update the stats strip with current pipeline run metrics.

    Args:
        stats_components:   Dict returned by build_stats_strip().
        iterations:         Number of debug iterations completed.
        exec_time:          Total wall-clock time in seconds.
        total_tokens:       Total Groq tokens used this run.
        rate_limit_warning: If True, show a rate limit warning.
    """
    stats_components["iterations_md"].value = f"**Iterations:** {iterations}"
    stats_components["exec_time_md"].value  = f"**Time:** {exec_time:.1f}s"
    stats_components["tokens_md"].value     = f"**Tokens:** {total_tokens:,}"

    if rate_limit_warning:
        stats_components["warning_md"].value   = (
            "⚠ Approaching Groq rate limit — consider switching to llama3-8b"
        )
        stats_components["warning_md"].visible = True
    else:
        stats_components["warning_md"].visible = False


# ------------------------------------------------------------------ #
#  Model Switcher                                                      #
# ------------------------------------------------------------------ #

def build_model_switcher() -> dict[str, Any]:
    """
    Build the model switcher toggle between Llama 3.1 8B and 70B.

    8B is faster and cheaper — good for simple tasks and when
    approaching rate limits. 70B gives higher quality for complex tasks.

    Returns:
        Dict with keys:
          - "radio": gr.Radio — model selection
    """
    radio = gr.Radio(
        choices=["llama3-8b-8192", "llama3-70b-8192"],
        value="llama3-70b-8192",
        label="Model",
        info="8B is faster · 70B is more capable",
        elem_id="model_switcher",
    )
    return {"radio": radio}


# ------------------------------------------------------------------ #
#  Language Selector with Auto-detect Badge                           #
# ------------------------------------------------------------------ #

def build_language_selector() -> dict[str, Any]:
    """
    Build the language selector radio with auto-detect status display.

    The auto-detect badge shows the detected language and confidence
    so the user knows whether to trust the pre-selection.

    Returns:
        Dict with keys:
          - "radio":      gr.Radio — Python / SQL selector
          - "badge_md":   gr.Markdown — auto-detect result badge
    """
    with gr.Group():
        radio = gr.Radio(
            choices=["python", "sql"],
            value="python",
            label="Language",
            elem_id="language_selector",
        )
        badge_md = gr.Markdown(
            value="",
            visible=False,
            elem_id="language_badge",
        )

    return {
        "radio":    radio,
        "badge_md": badge_md,
    }


def update_language_badge(
    selector_components: dict[str, Any],
    detected_language: str,
    confidence: str,
    reason: str,
) -> None:
    """
    Update the auto-detect badge after detection runs.

    Args:
        selector_components: Dict returned by build_language_selector().
        detected_language:   The detected language string.
        confidence:          'high', 'medium', or 'low'.
        reason:              One-sentence explanation of the detection.
    """
    emoji = {"high": "🟢", "medium": "🟡", "low": "🔴"}.get(confidence, "⚪")
    selector_components["badge_md"].value = (
        f"{emoji} Auto-detected: **{detected_language}** "
        f"({confidence} confidence) — {reason}"
    )
    selector_components["badge_md"].visible   = True
    selector_components["radio"].value        = detected_language