widget_lib.py

"""Shared widget library for the AI Command Center.

Provides reusable UI primitives:
- confidence_meter: semi-circular gauge for signal confidence
- status_pill: colored status badge (ACTIVE/IDLE/ERROR)
- glass_card: styled container with title, value, subtitle
- mini_sparkline: inline Plotly sparkline chart
- progress_ring: circular progress indicator
- tooltip: hover tooltip helper
"""
from __future__ import annotations

from typing import Any

import streamlit as st


# ============================================================
# Theme colors (mirrors jarvis_theme.py COLORS dict)
# ============================================================
COLORS = {
    "bg": "#0E1117",
    "card": "#161B22",
    "border": "#30363D",
    "text": "#E6EDF3",
    "muted": "#8B949E",
    "accent": "#58A6FF",
    "green": "#3FB950",
    "red": "#F85149",
    "yellow": "#D29922",
    "chart_up": "#3FB950",
    "chart_down": "#F85149",
}


# ============================================================
# Confidence Meter
# ============================================================
def confidence_meter(value: float, label: str = "Confidence") -> None:
    """Render a semi-circular gauge for confidence (0-100)."""
    clamped = max(0.0, min(100.0, float(value)))
    if clamped < 40:
        color = COLORS["red"]
    elif clamped < 70:
        color = COLORS["yellow"]
    else:
        color = COLORS["green"]

    html = f"""
    <div style="display:flex; flex-direction:column; align-items:center; gap:2px;">
      <svg width="160" height="90" viewBox="0 0 160 90">
        <defs>
          <linearGradient id="cg" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="{COLORS['red']}"/>
            <stop offset="50%" stop-color="{COLORS['yellow']}"/>
            <stop offset="100%" stop-color="{COLORS['green']}"/>
          </linearGradient>
        </defs>
        <path d="M 20 80 A 60 60 0 0 1 140 80"
              fill="none" stroke="#1a2332" stroke-width="10" stroke-linecap="round"/>
        <path d="M 20 80 A 60 60 0 0 1 140 80"
              fill="none" stroke="url(#cg)" stroke-width="10" stroke-linecap="round"
              stroke-dasharray="{clamped * 1.88:.1f} 188"/>
        <text x="80" y="65" text-anchor="middle"
              fill="{color}" font-size="22" font-weight="700" font-family="monospace">
          {clamped:.0f}%
        </text>
      </svg>
      <span style="color:{COLORS['muted']}; font-size:10px; letter-spacing:1px; text-transform:uppercase;">
        {label}
      </span>
    </div>
    """
    st.markdown(html, unsafe_allow_html=True)


# ============================================================
# Status Pill
# ============================================================
def status_pill(status: str, label: str = "") -> None:
    """Render a small colored status badge."""
    status_upper = (status or "UNKNOWN").upper().strip()
    color_map = {
        "ACTIVE": COLORS["green"],
        "ONLINE": COLORS["green"],
        "CONNECTED": COLORS["green"],
        "RUNNING": COLORS["green"],
        "IDLE": COLORS["yellow"],
        "PAUSED": COLORS["yellow"],
        "PENDING": COLORS["yellow"],
        "OFFLINE": COLORS["red"],
        "ERROR": COLORS["red"],
        "DISCONNECTED": COLORS["red"],
        "FAILED": COLORS["red"],
        "UNKNOWN": COLORS["muted"],
    }
    c = color_map.get(status_upper, COLORS["muted"])
    display = label or status_upper
    html = (
        f'<span style="'
        f'background:{c}22; border:1px solid {c}66; border-radius:20px;'
        f'padding:2px 10px; font-size:11px; font-weight:600; color:{c};'
        f'letter-spacing:0.5px;">{display}</span>'
    )
    st.markdown(html, unsafe_allow_html=True)


# ============================================================
# Glass Card
# ============================================================
def glass_card(title: str, value: str, subtitle: str = "",
               accent: str = COLORS["accent"], height: int | None = None) -> None:
    """Render a styled glass card container."""
    h = f"height:{height}px;" if height else ""
    sub = (
        f'<div style="color:{COLORS["muted"]}; font-size:11px; margin-top:4px;">{subtitle}</div>'
        if subtitle else ""
    )
    html = f"""
    <div class="glass-card" style="{h} display:flex; flex-direction:column; justify-content:center;">
      <div class="card-title">{title}</div>
      <div class="card-value" style="color:{accent};">{value}</div>
      {sub}
    </div>
    """
    st.markdown(html, unsafe_allow_html=True)


# ============================================================
# Mini Sparkline
# ============================================================
def mini_sparkline(data: list[float], label: str = "",
                   color: str = COLORS["accent"],
                   height: int = 50) -> None:
    """Render a compact inline Plotly sparkline (no axes, no legend)."""
    try:
        import plotly.graph_objects as go
    except Exception:
        st.caption(label)
        return

    if not data or len(data) < 2:
        st.caption(label or "No data")
        return

    fig = go.Figure(
        go.Scatter(
            y=data,
            mode="lines",
            line=dict(color=color, width=1.5),
            fill="tozeroy",
            fillcolor=color + "18",
            hoverinfo="skip",
        )
    )
    fig.update_layout(
        template="plotly_dark",
        paper_bgcolor="rgba(0,0,0,0)",
        plot_bgcolor="rgba(0,0,0,0)",
        height=height,
        margin=dict(l=0, r=0, t=0, b=0),
        showlegend=False,
        xaxis=dict(visible=False, fixedrange=True),
        yaxis=dict(visible=False, fixedrange=True),
    )
    st.plotly_chart(fig, use_container_width=True,
                    config={"displayModeBar": False})


# ============================================================
# Progress Ring
# ============================================================
def progress_ring(value: float, label: str = "", size: int = 80) -> None:
    """Render a circular SVG progress indicator (0-100)."""
    clamped = max(0.0, min(100.0, float(value)))
    r = 34
    cx = 40
    cy = 40
    circ = 2 * 3.14159 * r
    offset = circ * (1 - clamped / 100)

    if clamped < 40:
        stroke = COLORS["red"]
    elif clamped < 70:
        stroke = COLORS["yellow"]
    else:
        stroke = COLORS["green"]

    html = f"""
    <div style="display:flex; flex-direction:column; align-items:center; gap:2px;">
      <svg width="{size}" height="{size}" viewBox="0 0 80 80">
        <circle cx="{cx}" cy="{cy}" r="{r}"
                fill="none" stroke="#1a2332" stroke-width="7"/>
        <circle cx="{cx}" cy="{cy}" r="{r}"
                fill="none" stroke="{stroke}" stroke-width="7"
                stroke-linecap="round"
                stroke-dasharray="{circ:.1f}"
                stroke-dashoffset="{offset:.1f}"
                transform="rotate(-90 {cx} {cy})"
                style="transition: stroke-dashoffset 0.6s ease;"/>
        <text x="{cx}" y="{cy + 5}" text-anchor="middle"
              fill="{stroke}" font-size="16" font-weight="700" font-family="monospace">
          {clamped:.0f}
        </text>
      </svg>
      <span style="color:{COLORS['muted']}; font-size:10px; letter-spacing:0.5px;">{label}</span>
    </div>
    """
    st.markdown(html, unsafe_allow_html=True)


# ============================================================
# Tooltip
# ============================================================
def tooltip(text: str, title: str = "") -> None:
    """Render a hover tooltip hint."""
    html = f"""
    <span style="border-bottom:1px dotted {COLORS['muted']}; cursor:help;"
          title="{title}">{text}</span>
    """
    st.markdown(html, unsafe_allow_html=True)