app.py

import streamlit as st
import asyncio
import aiohttp
import time
import pandas as pd

# ==========================================
# 🏔️ TUWAIQ | طويـق — Mobile-First v3
# ==========================================

st.set_page_config(
    page_title="Tuwaiq | طويق AI",
    page_icon="🏔️",
    layout="centered",          # ← centered = no wide overflow on mobile
    initial_sidebar_state="collapsed"
)

# ── Language & Ops State  (default = English) ───────────────
if 'lang' not in st.session_state:
    st.session_state.lang = 'en'
if 'show_ops' not in st.session_state:
    st.session_state.show_ops = False

def toggle_lang():
    st.session_state.lang = 'en' if st.session_state.lang == 'ar' else 'ar'

def open_ops():
    st.session_state.show_ops = True

# ── Dictionary ──────────────────────────────────────────────
D = {
    'en': {
        'title':          'TUWAIQ | طويـق',
        'sub':            'Advanced Performance Intelligence — AI Swarm Platform',
        'ops':            'Operations Room',
        'target':         'Target URL',
        'swarm':          'Swarm Size',
        'launch':         'LAUNCH SWARM',
        'main_btn':       'START NOW',
        'side_desc':      'Swarm Intelligence AI to simulate thousands of real users, stress test networks, and gather OSINT performance intelligence in seconds.',
        'status_online':  'ONLINE',
        'mission_reports':'Mission Reports',
        'metric_time':    'Attack Time',
        'metric_success': 'Successful Hits',
        'metric_fail':    'Connection Fails',
        'metric_avg':     'Avg Response',
        'tab_logs':       'Operations Log',
        'tab_charts':     'Performance',
        'chart_title':    'Server Response Fluctuations During Attack',
        'success_msg':    'Swarm withdrawn — intelligence reports received.',
        'lang_btn':       'العربية',
        'intel_label':    'Platform Intel',
        'badge':          'AI SWARM PLATFORM',
        'standby':        'SYSTEM STANDBY',
    },
    'ar': {
        'title':          'TUWAIQ | طويـق',
        'sub':            'منصة استخبارات واختبار الأداء — AI Swarm Intelligence',
        'ops':            'غرفة العمليات',
        'target':         'الرابط المستهدف',
        'swarm':          'حجم السرب',
        'launch':         'إطلاق السرب',
        'main_btn':       'ابدأ الآن',
        'side_desc':      'نظام ذكاء اصطناعي يعتمد على الأسراب لمحاكاة آلاف المستخدمين بدقة، واختبار الشبكات، وجمع استخبارات الأداء في ثوانٍ.',
        'status_online':  'ONLINE',
        'mission_reports':'تقارير المهمة',
        'metric_time':    'زمن التنفيذ',
        'metric_success': 'اختراقات ناجحة',
        'metric_fail':    'فشل الاتصال',
        'metric_avg':     'متوسط الاستجابة',
        'tab_logs':       'سجل العمليات',
        'tab_charts':     'تحليل الأداء',
        'chart_title':    'تذبذب استجابة الخادم أثناء الهجوم',
        'success_msg':    'تم سحب السرب بنجاح — تقارير الاستخبارات وصلت.',
        'lang_btn':       'English',
        'intel_label':    'منصة المعلومات',
        'badge':          'AI SWARM PLATFORM',
        'standby':        'SYSTEM STANDBY',
    }
}
T = D[st.session_state.lang]

# ── Hide sidebar + Streamlit chrome ────────────────────────
st.markdown("""
<style>
[data-testid="collapsedControl"],
#MainMenu, footer, header { display:none!important; }
</style>
""", unsafe_allow_html=True)

# ── SVG Robot icon (cyan/purple, no emoji) ──────────────────
ROBOT_SVG = """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="72" height="72">
  <defs>
    <linearGradient id="rg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%"   stop-color="#00d4ff"/>
      <stop offset="100%" stop-color="#7b61ff"/>
    </linearGradient>
  </defs>
  <!-- antenna -->
  <line x1="32" y1="6" x2="32" y2="14" stroke="url(#rg)" stroke-width="2" stroke-linecap="round"/>
  <circle cx="32" cy="5" r="2.5" fill="#00d4ff"/>
  <!-- head -->
  <rect x="16" y="14" width="32" height="22" rx="5" fill="none" stroke="url(#rg)" stroke-width="2"/>
  <!-- eyes -->
  <circle cx="25" cy="24" r="4" fill="none" stroke="#00d4ff" stroke-width="1.5"/>
  <circle cx="25" cy="24" r="1.8" fill="#00d4ff" opacity=".7"/>
  <circle cx="39" cy="24" r="4" fill="none" stroke="#7b61ff" stroke-width="1.5"/>
  <circle cx="39" cy="24" r="1.8" fill="#7b61ff" opacity=".7"/>
  <!-- mouth -->
  <rect x="24" y="31" width="16" height="2.5" rx="1.2" fill="url(#rg)" opacity=".6"/>
  <!-- neck -->
  <rect x="29" y="36" width="6" height="4" rx="1" fill="url(#rg)" opacity=".5"/>
  <!-- body -->
  <rect x="14" y="40" width="36" height="20" rx="5" fill="none" stroke="url(#rg)" stroke-width="2"/>
  <!-- chest light -->
  <rect x="26" y="46" width="12" height="7" rx="2" fill="none" stroke="#00d4ff" stroke-width="1.2" opacity=".5"/>
  <rect x="29" y="48.5" width="6" height="2" rx="1" fill="#00d4ff" opacity=".4"/>
  <!-- arms -->
  <rect x="4"  y="41" width="8" height="14" rx="3" fill="none" stroke="url(#rg)" stroke-width="1.8"/>
  <rect x="52" y="41" width="8" height="14" rx="3" fill="none" stroke="url(#rg)" stroke-width="1.8"/>
  <!-- legs -->
  <rect x="19" y="60" width="9" height="4" rx="2" fill="url(#rg)" opacity=".4"/>
  <rect x="36" y="60" width="9" height="4" rx="2" fill="url(#rg)" opacity=".4"/>
</svg>
"""

# ── Full CSS ────────────────────────────────────────────────
st.markdown("""
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&family=Cairo:wght@400;700;900&display=swap" rel="stylesheet">

<style>
:root {
    --bg:        #03050d;
    --panel:     #070c18;
    --border:    #0f1e36;
    --border-hi: #1a3a6e;
    --accent:    #00d4ff;
    --accent2:   #7b61ff;
    --success:   #00ff88;
    --text:      #c8d8f0;
    --muted:     #3d5278;
    --mono:      'Share Tech Mono', monospace;
    --head:      'Rajdhani', sans-serif;
    --ar:        'Cairo', sans-serif;
}

html, body, [class*="css"] {
    font-family: var(--ar), var(--head), sans-serif !important;
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* prevent horizontal scroll on mobile */
.main .block-container {
    max-width: 100% !important;
    padding: 0 16px !important;
    overflow-x: hidden !important;
}

/* scanline */
.stApp::before {
    content:""; position:fixed; inset:0;
    background: repeating-linear-gradient(
        0deg,transparent,transparent 2px,
        rgba(0,212,255,.012) 2px,rgba(0,212,255,.012) 4px
    );
    pointer-events:none; z-index:9999;
}
.stApp {
    background-color: var(--bg) !important;
    background-image:
        radial-gradient(ellipse 80% 40% at 50% 0%,   rgba(0,100,200,.13) 0%,transparent 65%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(123,97,255,.09) 0%,transparent 60%);
    background-attachment: fixed;
}

/* ── BADGE ── */
.tw-badge {
    display: block;
    font-family: var(--mono);
    font-size: .6rem;
    color: var(--accent);
    background: rgba(0,212,255,.07);
    border: 1px solid rgba(0,212,255,.22);
    padding: 3px 14px;
    border-radius: 2px;
    letter-spacing: 4px;
    text-align: center;
    width: fit-content;
    margin: 20px auto 10px;
}

/* ── TITLE ── */
.tw-title {
    font-family: var(--head), sans-serif;
    font-size: clamp(1.8rem, 7vw, 3rem);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(90deg,#fff 0%,var(--accent) 50%,var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 6px;
    line-height: 1.1;
}
.tw-sub {
    font-family: var(--mono);
    font-size: clamp(.52rem, 2vw, .7rem);
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 4px 0 0;
    line-height: 1.5;
}
.tw-line {
    height:1px;
    background:linear-gradient(90deg,transparent,#00d4ff,#7b61ff,transparent);
    opacity:.35; margin:10px 0 0;
}

/* ── HEADER RIGHT ── */
.hdr-right {
    display:flex; align-items:center;
    justify-content:flex-end;
    gap:10px; padding-top:20px;
}
.status-pill {
    display:flex; align-items:center; gap:5px;
    font-family:var(--mono); font-size:.6rem;
    color:var(--success); letter-spacing:2px;
    border:1px solid rgba(0,255,136,.25);
    border-radius:2px; padding:4px 8px;
    background:rgba(0,255,136,.04);
}
.sdot {
    width:6px;height:6px;border-radius:50%;
    background:var(--success);flex-shrink:0;
    animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ── RING ── */
.ring-wrap {
    position:relative; width:190px; height:190px;
    margin:36px auto 24px;
}
.ring1,.ring2 {
    position:absolute; border-radius:50%;
    top:0;left:0;
}
.ring1 {
    width:190px;height:190px;
    border:1.5px solid rgba(0,212,255,.1);
    border-top:2.5px solid #00d4ff;
    border-right:2.5px solid #7b61ff;
    animation:spinR 7s linear infinite;
}
.ring2 {
    width:136px;height:136px;
    top:27px;left:27px;
    border:1px solid rgba(123,97,255,.1);
    border-bottom:2px solid #7b61ff;
    animation:spinR 4.5s linear infinite reverse;
}
.ring-center {
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    animation:pf 2.5s ease-in-out infinite;
}
@keyframes spinR{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pf{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
              50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* ── STANDBY LABEL ── */
.standby-label {
    font-family:var(--mono);font-size:.63rem;
    color:var(--muted);letter-spacing:5px;
    text-transform:uppercase;text-align:center;
    display:block;margin-bottom:16px;
}
.standby-desc {
    font-size:.85rem;color:var(--muted);
    text-align:center;line-height:1.75;
    margin:14px auto 0;max-width:360px;
}

/* ── PULSE BUTTON ── */
div[data-testid="stButton"]:has(button[key="start_now"]) button {
    background: linear-gradient(90deg,rgba(0,212,255,.14),rgba(123,97,255,.14)) !important;
    border: 2px solid #00d4ff !important;
    color: #fff !important;
    font-family: var(--mono) !important;
    font-size: .95rem !important;
    letter-spacing: 5px !important;
    padding: 14px 0 !important;
    border-radius: 50px !important;
    animation: pulseGlow 1.8s ease-in-out infinite !important;
}
@keyframes pulseGlow {
    0%   {box-shadow:0 0  0  0   rgba(0,212,255,.7);}
    50%  {box-shadow:0 0 28px 8px rgba(0,212,255,.25);}
    100% {box-shadow:0 0  0  0   rgba(0,212,255,0);}
}
div[data-testid="stButton"]:has(button[key="start_now"]) button:hover {
    background:linear-gradient(90deg,rgba(0,212,255,.28),rgba(123,97,255,.28))!important;
}

/* ── STATS CARDS ── */
.stats-row {
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:10px;margin:32px 0 0;
}
.stat-card {
    background:rgba(0,212,255,.03);
    border:1px solid var(--border);
    border-top:1px solid var(--border-hi);
    border-radius:4px;padding:14px 16px;
    text-align:center;
}
.stat-label {
    font-family:var(--mono);font-size:.55rem;
    color:var(--accent);letter-spacing:3px;
    text-transform:uppercase;margin-bottom:5px;display:block;
}
.stat-val {
    font-family:var(--head),sans-serif;
    font-size:1.4rem;color:#fff;font-weight:700;
}

/* ── DIVIDER ── */
.tw-divider {
    display:flex;align-items:center;gap:10px;
    margin:28px 0 20px;
}
.tw-divider-line{flex:1;height:1px;background:var(--border);}
.tw-divider-text {
    font-family:var(--mono);font-size:.6rem;
    color:var(--accent);letter-spacing:3px;
    text-transform:uppercase;white-space:nowrap;
}

/* ── OPS PANEL ── */
.ops-panel {
    background:rgba(7,12,24,.88);
    border:1px solid var(--border-hi);
    border-top:2px solid var(--accent);
    border-radius:8px;
    padding:20px 18px 24px;
    margin-bottom:20px;
}
.ops-title {
    font-family:var(--mono);font-size:.68rem;
    color:var(--accent);letter-spacing:3px;
    text-transform:uppercase;margin-bottom:12px;
}
.intel-box {
    background:rgba(0,212,255,.03);
    border-left:2px solid var(--accent);
    border-radius:3px;padding:10px 14px;
    margin-bottom:18px;font-size:.82rem;
    color:#7a9ac0;line-height:1.7;
}

/* ── INPUTS ── */
div[data-testid="stTextInput"] input {
    background:rgba(0,212,255,.04)!important;
    border:1px solid var(--border-hi)!important;
    border-radius:4px!important;
    color:var(--text)!important;
    font-family:var(--mono)!important;
    font-size:.82rem!important;
}
div[data-testid="stTextInput"] input:focus {
    border-color:var(--accent)!important;
    box-shadow:0 0 14px rgba(0,212,255,.15)!important;
}
div[data-testid="stSlider"] > div > div > div{background:var(--accent)!important;}

/* ── BUTTONS ── */
.stButton > button {
    background:transparent!important;
    border:1px solid var(--accent)!important;
    border-radius:3px!important;
    color:var(--accent)!important;
    font-family:var(--mono)!important;
    font-size:.7rem!important;
    letter-spacing:2px!important;
    text-transform:uppercase!important;
    transition:all .2s!important;
}
.stButton > button:hover {
    background:rgba(0,212,255,.1)!important;
    box-shadow:0 0 16px rgba(0,212,255,.2)!important;
}
.stButton > button[kind="primary"] {
    background:linear-gradient(90deg,rgba(0,212,255,.13),rgba(123,97,255,.13))!important;
    border:1px solid var(--accent)!important;
    color:#fff!important;font-size:.74rem!important;
}
.stButton > button[kind="primary"]:hover {
    background:linear-gradient(90deg,rgba(0,212,255,.28),rgba(123,97,255,.28))!important;
    box-shadow:0 0 24px rgba(0,212,255,.28)!important;
}

/* ── METRICS ── */
div[data-testid="stMetric"] {
    background:rgba(0,212,255,.03)!important;
    border:1px solid var(--border)!important;
    border-radius:4px!important;padding:14px 10px!important;
    position:relative;overflow:hidden;transition:all .25s;
}
div[data-testid="stMetric"]::before {
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.7;
}
div[data-testid="stMetric"]:hover{transform:translateY(-2px);}
div[data-testid="stMetricLabel"] {
    color:var(--muted)!important;font-family:var(--mono)!important;
    font-size:.58rem!important;letter-spacing:2px!important;text-transform:uppercase!important;
}
div[data-testid="stMetricValue"] {
    color:#fff!important;font-family:var(--head),sans-serif!important;
    font-size:1.7rem!important;font-weight:700!important;
}

/* ── TABS ── */
.stTabs [data-baseweb="tab-list"] {
    background:transparent!important;
    border-bottom:1px solid var(--border)!important;gap:0!important;
}
.stTabs [data-baseweb="tab"] {
    background:transparent!important;border-radius:0!important;
    color:var(--muted)!important;font-family:var(--mono)!important;
    font-size:.65rem!important;letter-spacing:2px!important;
    text-transform:uppercase!important;padding:10px 18px!important;
    border-bottom:2px solid transparent!important;transition:all .2s!important;
}
.stTabs [data-baseweb="tab"]:hover{color:var(--accent)!important;}
.stTabs [data-baseweb="tab"][aria-selected="true"] {
    color:var(--accent)!important;
    border-bottom:2px solid var(--accent)!important;
    background:rgba(0,212,255,.04)!important;
}
.stTabs [data-baseweb="tab-panel"]{padding-top:16px!important;}

/* ── MISC ── */
div[data-testid="stDataFrame"]{border:1px solid var(--border)!important;border-radius:4px!important;}
div[data-testid="stAlert"]{border-radius:4px!important;font-family:var(--mono)!important;font-size:.76rem!important;}
hr{border-color:var(--border)!important;margin:20px 0!important;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}
</style>
""", unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# HEADER
# ═══════════════════════════════════════════════════
col_title, col_right = st.columns([3, 1])

with col_title:
    # badge centered above title
    st.markdown(f"<span class='tw-badge'>{T['badge']}</span>", unsafe_allow_html=True)
    st.markdown(f"<h1 class='tw-title'>{T['title']}</h1>", unsafe_allow_html=True)
    st.markdown(f"<p class='tw-sub'>{T['sub']}</p>", unsafe_allow_html=True)

with col_right:
    st.markdown("<div style='height:20px'></div>", unsafe_allow_html=True)
    st.button(f"🌐 {T['lang_btn']}", on_click=toggle_lang, use_container_width=True, key="lang_btn")
    st.markdown(f"""
    <div class="status-pill" style="margin-top:8px;justify-content:center;">
        <span class="sdot"></span>{T['status_online']}
    </div>
    """, unsafe_allow_html=True)

st.markdown("<div class='tw-line'></div>", unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# HERO
# ═══════════════════════════════════════════════════

# spinning rings + SVG robot
st.markdown(f"""
<div style="text-align:center;padding:44px 0 0;">
    <div class="ring-wrap">
        <div class="ring1"></div>
        <div class="ring2"></div>
        <div class="ring-center">{ROBOT_SVG}</div>
    </div>
    <span class="standby-label">◦ {T['standby']} ◦</span>
</div>
""", unsafe_allow_html=True)

# pulse button
btn_col = st.columns([1, 3, 1])
with btn_col[1]:
    clicked = st.button(f"  {T['main_btn']}  ", use_container_width=True,
                        key="start_now", on_click=open_ops)

# auto-scroll JS — fires when show_ops becomes True
if st.session_state.show_ops:
    st.markdown("""
    <script>
        window.setTimeout(function(){
            var el = document.getElementById('ops-anchor');
            if(el){ el.scrollIntoView({behavior:'smooth',block:'start'}); }
        }, 120);
    </script>
    """, unsafe_allow_html=True)

st.markdown(f"<p class='standby-desc'>{T['side_desc']}</p>", unsafe_allow_html=True)

# 4-stat cards (2×2 grid on mobile)
st.markdown(f"""
<div class="stats-row">
    <div class="stat-card">
        <span class="stat-label">MAX SWARM</span>
        <div class="stat-val">2,000</div>
    </div>
    <div class="stat-card">
        <span class="stat-label">ENGINE</span>
        <div class="stat-val">ASYNC</div>
    </div>
    <div class="stat-card">
        <span class="stat-label">PROTOCOL</span>
        <div class="stat-val">HTTP</div>
    </div>
    <div class="stat-card">
        <span class="stat-label">MODE</span>
        <div class="stat-val">OSINT</div>
    </div>
</div>
""", unsafe_allow_html=True)


# ═══════════════════════════════════════════════════
# OPS PANEL
# ═══════════════════════════════════════════════════
if st.session_state.show_ops:

    # anchor for auto-scroll
    st.markdown("<div id='ops-anchor' style='height:44px'></div>", unsafe_allow_html=True)

    st.markdown(f"""
    <div class="tw-divider">
        <div class="tw-divider-line"></div>
        <span class="tw-divider-text">◈ {T['ops']} ◈</span>
        <div class="tw-divider-line"></div>
    </div>
    <div class="ops-panel">
        <div class="ops-title">◈ {T['intel_label']}</div>
        <div class="intel-box">{T['side_desc']}</div>
    </div>
    """, unsafe_allow_html=True)

    target_url = st.text_input(f"🎯 {T['target']}", value="https://example.com", key="target_url")
    swarm_size = st.slider(f"🤖 {T['swarm']}", min_value=10, max_value=2000,
                           value=200, step=10, key="swarm_size")

    st.markdown("<div style='height:6px'></div>", unsafe_allow_html=True)
    launch_btn = st.button(T['launch'], use_container_width=True, type="primary", key="launch")

    # ── Core Engine ─────────────────────────────────
    async def agent_task(session, agent_id, url, lang):
        try:
            t0 = time.time()
            async with session.get(url, timeout=10) as resp:
                await resp.read()
                lat = round(time.time() - t0, 2)
                ok  = "Success" if lang == 'en' else "نجاح"
                return {"Agent": f"Agent-{agent_id:04d}", "Status": resp.status,
                        "Latency (s)": lat, "Result": f"OK  {ok}"}
        except Exception:
            fail = "Failed" if lang == 'en' else "فشل"
            return {"Agent": f"Agent-{agent_id:04d}", "Status": 500,
                    "Latency (s)": 0, "Result": f"ERR {fail}"}

    async def launch_swarm(url, size, lang):
        async with aiohttp.ClientSession() as session:
            tasks = [agent_task(session, i, url, lang) for i in range(1, size + 1)]
            return await asyncio.gather(*tasks)

    # ── Results ─────────────────────────────────────
    if launch_btn:
        if not target_url.startswith("http"):
            st.error("URL must start with http:// or https://"
                     if st.session_state.lang == 'en'
                     else "الرابط يجب أن يبدأ بـ http:// أو https://")
        else:
            spin = (f"Deploying {swarm_size} agents to {target_url} ..."
                    if st.session_state.lang == 'en'
                    else f"جاري نشر {swarm_size} وكيل نحو {target_url} ...")
            with st.spinner(spin):
                t0      = time.time()
                results = asyncio.run(launch_swarm(target_url, swarm_size, st.session_state.lang))
                total   = round(time.time() - t0, 2)

            df       = pd.DataFrame(results)
            ok_key   = "OK  Success" if st.session_state.lang == 'en' else "OK  نجاح"
            err_key  = "ERR Failed"  if st.session_state.lang == 'en' else "ERR فشل"
            s_cnt    = len(df[df["Result"] == ok_key])
            f_cnt    = len(df[df["Result"] == err_key])
            avg_lat  = round(df[df["Result"] == ok_key]["Latency (s)"].mean(), 2) if s_cnt > 0 else 0

            st.success(T['success_msg'])

            st.markdown(f"""
            <div class="tw-divider" style="margin-top:24px">
                <div class="tw-divider-line"></div>
                <span class="tw-divider-text">◈ {T['mission_reports']} ◈</span>
                <div class="tw-divider-line"></div>
            </div>
            """, unsafe_allow_html=True)

            c1, c2, c3, c4 = st.columns(4)
            with c1: st.metric(T['metric_time'],    f"{total} s")
            with c2: st.metric(T['metric_success'], s_cnt)
            with c3: st.metric(T['metric_fail'],    f_cnt)
            with c4: st.metric(T['metric_avg'],     f"{avg_lat} s")

            st.divider()

            tab1, tab2 = st.tabs([T['tab_logs'], T['tab_charts']])
            with tab1:
                st.dataframe(df, use_container_width=True, height=400)
            with tab2:
                if s_cnt > 0:
                    st.markdown(
                        f"<p style='font-family:var(--mono);font-size:.66rem;"
                        f"color:#00d4ff;letter-spacing:2px;'>◈ {T['chart_title']}</p>",
                        unsafe_allow_html=True)
                    st.area_chart(
                        df[df["Result"] == ok_key]["Latency (s)"].reset_index(drop=True),
                        color="#00d4ff")
                else:
                    st.warning("No successful data to chart."
                               if st.session_state.lang == 'en'
                               else "لا توجد بيانات ناجحة.")

# ── Footer ───────────────────────────────────────────────────
st.markdown("""
<div style="text-align:center;padding:48px 0 20px;
            font-family:'Share Tech Mono',monospace;
            font-size:.58rem;color:#1a3a6e;letter-spacing:2px;">
    DEVELOPED IN KSA &nbsp;◦&nbsp; @DEVSAUDI &nbsp;◦&nbsp; TUWAIQ AI SWARM
</div>
""", unsafe_allow_html=True)