Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,461 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import plotly.graph_objects as go
+import pandas as pd
+
+# ── Page config ───────────────────────────────────────────────────────────────
+st.set_page_config(
+    page_title="T2.3 · Grid Outage Forecaster",
+    page_icon="⚡",
+    layout="wide",
+)
+
+# ── Custom CSS ─────────────────────────────────────────────────────────────────
+st.markdown("""
+<style>
+  [data-testid="stAppViewContainer"] { background: #0f1117; color: #e8eaf6; }
+  [data-testid="stSidebar"] { background: #1a1d27; }
+  .metric-card {
+    background: #1a1d27; border: 1px solid #2e3350; border-radius: 10px;
+    padding: 14px 18px; text-align: center;
+  }
+  .metric-val { font-size: 1.6rem; font-weight: 800; color: #6366f1; }
+  .metric-lbl { font-size: 11px; color: #8892b0; text-transform: uppercase; letter-spacing: .05em; }
+  .badge {
+    display: inline-block; padding: 2px 8px; border-radius: 4px;
+    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
+  }
+  .badge-high    { background: #7f1d1d; color: #fca5a5; }
+  .badge-medium  { background: #78350f; color: #fcd34d; }
+  .badge-low     { background: #14532d; color: #86efac; }
+  .badge-on      { background: #14532d; color: #86efac; }
+  .badge-off     { background: #3f3f46; color: #a1a1aa; }
+  .badge-critical{ background: #1e3a8a; color: #93c5fd; }
+  .badge-comfort { background: #4a1d96; color: #c4b5fd; }
+  .badge-luxury  { background: #374151; color: #9ca3af; }
+  .ap-card {
+    background: #1a1d27; border: 1px solid #2e3350; border-radius: 8px;
+    padding: 12px 14px; margin-bottom: 8px;
+  }
+  .ap-card.off { opacity: .6; border-color: #3f3f46; }
+  .ap-name { font-weight: 600; font-size: 14px; color: #e8eaf6; margin-bottom: 4px; }
+  .ap-meta { display: flex; gap: 6px; margin-bottom: 4px; }
+  .ap-shed { font-size: 10px; color: #9ca3af; margin-top: 3px; }
+  .ap-right { text-align: right; font-size: 12px; color: #8892b0; }
+  .ap-rev { color: #22c55e; font-weight: 600; font-size: 13px; }
+  .sms-box {
+    background: #22263a; border: 1px solid #2e3350; border-radius: 8px;
+    padding: 14px; margin-bottom: 10px; font-family: monospace; font-size: 13px;
+    line-height: 1.6; color: #e8eaf6;
+  }
+  .plan-header {
+    background: #1a1d27; border: 1px solid #2e3350; border-radius: 8px;
+    padding: 12px 16px; margin-bottom: 12px;
+  }
+  .section-title { font-size: 1rem; font-weight: 600; color: #e8eaf6; margin-bottom: 10px; }
+  h1, h2, h3 { color: #e8eaf6 !important; }
+  .stSelectbox label, .stSlider label { color: #8892b0 !important; }
+  div[data-testid="metric-container"] {
+    background: #1a1d27; border: 1px solid #2e3350; border-radius: 8px; padding: 8px;
+  }
+</style>
+""", unsafe_allow_html=True)
+
+# ── Embedded Data ─────────────────────────────────────────────────────────────
+FORECAST = [
+    {"hour_offset":0,"timestamp":"2024-06-29 00:00","hour":0,"p_outage":0.2708,"p_outage_low":0.1908,"p_outage_high":0.3508,"expected_duration_min":89.8,"risk_level":"HIGH"},
+    {"hour_offset":1,"timestamp":"2024-06-29 01:00","hour":1,"p_outage":0.2554,"p_outage_low":0.1754,"p_outage_high":0.3354,"expected_duration_min":83.2,"risk_level":"HIGH"},
+    {"hour_offset":2,"timestamp":"2024-06-29 02:00","hour":2,"p_outage":0.2169,"p_outage_low":0.1369,"p_outage_high":0.2969,"expected_duration_min":85.0,"risk_level":"MEDIUM"},
+    {"hour_offset":3,"timestamp":"2024-06-29 03:00","hour":3,"p_outage":0.2554,"p_outage_low":0.1754,"p_outage_high":0.3354,"expected_duration_min":85.0,"risk_level":"HIGH"},
+    {"hour_offset":4,"timestamp":"2024-06-29 04:00","hour":4,"p_outage":0.2602,"p_outage_low":0.1802,"p_outage_high":0.3402,"expected_duration_min":78.8,"risk_level":"HIGH"},
+    {"hour_offset":5,"timestamp":"2024-06-29 05:00","hour":5,"p_outage":0.2503,"p_outage_low":0.1703,"p_outage_high":0.3303,"expected_duration_min":85.0,"risk_level":"HIGH"},
+    {"hour_offset":6,"timestamp":"2024-06-29 06:00","hour":6,"p_outage":0.24,  "p_outage_low":0.16,  "p_outage_high":0.32,  "expected_duration_min":83.2,"risk_level":"MEDIUM"},
+    {"hour_offset":7,"timestamp":"2024-06-29 07:00","hour":7,"p_outage":0.2208,"p_outage_low":0.1408,"p_outage_high":0.3008,"expected_duration_min":78.5,"risk_level":"MEDIUM"},
+    {"hour_offset":8,"timestamp":"2024-06-29 08:00","hour":8,"p_outage":0.2208,"p_outage_low":0.1408,"p_outage_high":0.3008,"expected_duration_min":78.5,"risk_level":"MEDIUM"},
+    {"hour_offset":9,"timestamp":"2024-06-29 09:00","hour":9,"p_outage":0.198, "p_outage_low":0.118, "p_outage_high":0.278, "expected_duration_min":86.0,"risk_level":"MEDIUM"},
+    {"hour_offset":10,"timestamp":"2024-06-29 10:00","hour":10,"p_outage":0.24, "p_outage_low":0.16, "p_outage_high":0.32, "expected_duration_min":71.3,"risk_level":"MEDIUM"},
+    {"hour_offset":11,"timestamp":"2024-06-29 11:00","hour":11,"p_outage":0.2531,"p_outage_low":0.1731,"p_outage_high":0.3331,"expected_duration_min":73.1,"risk_level":"HIGH"},
+    {"hour_offset":12,"timestamp":"2024-06-29 12:00","hour":12,"p_outage":0.2457,"p_outage_low":0.1657,"p_outage_high":0.3257,"expected_duration_min":76.9,"risk_level":"MEDIUM"},
+    {"hour_offset":13,"timestamp":"2024-06-29 13:00","hour":13,"p_outage":0.263, "p_outage_low":0.183, "p_outage_high":0.343, "expected_duration_min":68.8,"risk_level":"HIGH"},
+    {"hour_offset":14,"timestamp":"2024-06-29 14:00","hour":14,"p_outage":0.2582,"p_outage_low":0.1782,"p_outage_high":0.3382,"expected_duration_min":72.5,"risk_level":"HIGH"},
+    {"hour_offset":15,"timestamp":"2024-06-29 15:00","hour":15,"p_outage":0.2194,"p_outage_low":0.1394,"p_outage_high":0.2994,"expected_duration_min":76.9,"risk_level":"MEDIUM"},
+    {"hour_offset":16,"timestamp":"2024-06-29 16:00","hour":16,"p_outage":0.2688,"p_outage_low":0.1888,"p_outage_high":0.3488,"expected_duration_min":83.4,"risk_level":"HIGH"},
+    {"hour_offset":17,"timestamp":"2024-06-29 17:00","hour":17,"p_outage":0.309, "p_outage_low":0.229, "p_outage_high":0.389, "expected_duration_min":84.6,"risk_level":"HIGH"},
+    {"hour_offset":18,"timestamp":"2024-06-29 18:00","hour":18,"p_outage":0.3353,"p_outage_low":0.2553,"p_outage_high":0.4153,"expected_duration_min":84.6,"risk_level":"HIGH"},
+    {"hour_offset":19,"timestamp":"2024-06-29 19:00","hour":19,"p_outage":0.3408,"p_outage_low":0.2608,"p_outage_high":0.4208,"expected_duration_min":76.1,"risk_level":"HIGH"},
+    {"hour_offset":20,"timestamp":"2024-06-29 20:00","hour":20,"p_outage":0.3353,"p_outage_low":0.2553,"p_outage_high":0.4153,"expected_duration_min":99.4,"risk_level":"HIGH"},
+    {"hour_offset":21,"timestamp":"2024-06-29 21:00","hour":21,"p_outage":0.3466,"p_outage_low":0.2666,"p_outage_high":0.4266,"expected_duration_min":100.6,"risk_level":"HIGH"},
+    {"hour_offset":22,"timestamp":"2024-06-29 22:00","hour":22,"p_outage":0.2834,"p_outage_low":0.2034,"p_outage_high":0.3634,"expected_duration_min":102.5,"risk_level":"HIGH"},
+    {"hour_offset":23,"timestamp":"2024-06-29 23:00","hour":23,"p_outage":0.2596,"p_outage_low":0.1796,"p_outage_high":0.3396,"expected_duration_min":106.9,"risk_level":"HIGH"},
+]
+
+SMS = [
+    "UMURIRO FORECAST 24H: Risk=HIGH at 0h,1h,3h. Shed: Standing+TV. Est.save: 12,418RWF. Stay alert!",
+    "PLAN: Turn OFF Standing+TV during risk hrs (0h,1h,3h). Keep dryer+clippers+lights ON. Generator ready?",
+    "If no signal by 13h, use YESTERDAY plan. Risk valid 6h. Call 0788-GRID for live update. Good business!",
+]
+
+# ── Appliance plan generators ─────────────────────────────────────────────────
+def salon_appliances(hour, risk):
+    open_ = 7 <= hour <= 20
+    peak  = 9 <= hour <= 17
+    scale = 1.0 if peak else (0.75 if open_ else 0.0)
+    if not open_:
+        return [
+            {"name":"Hair Dryer (2×)",       "category":"critical","state":"OFF","watts":2400,"revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Electric Clippers (3×)","category":"critical","state":"OFF","watts":120, "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"LED Lights",            "category":"critical","state":"ON", "watts":20,  "revenue_rwf":0},
+            {"name":"Standing Fan",          "category":"comfort", "state":"OFF","watts":0,   "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"TV / Display",          "category":"comfort", "state":"OFF","watts":0,   "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Music System",          "category":"luxury",  "state":"OFF","watts":0,   "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Neon Sign",             "category":"luxury",  "state":"OFF","watts":0,   "revenue_rwf":0,"shed_reason":"Business closed"},
+        ]
+    shed_lux  = risk in ("HIGH","MEDIUM")
+    shed_com  = risk == "HIGH"
+    return [
+        {"name":"Hair Dryer (2×)",       "category":"critical","state":"ON", "watts":2400,"revenue_rwf":round(2133*scale)},
+        {"name":"Electric Clippers (3×)","category":"critical","state":"ON", "watts":120, "revenue_rwf":round(1422*scale)},
+        {"name":"LED Lights",            "category":"critical","state":"ON", "watts":80,  "revenue_rwf":round(711*scale)},
+        {"name":"Standing Fan",  "category":"comfort","state":"OFF" if shed_com else "ON","watts":0 if shed_com else 75, "revenue_rwf":0 if shed_com else round(285*scale),  **({"shed_reason":"HIGH risk — comfort shed"} if shed_com else {})},
+        {"name":"TV / Display",  "category":"comfort","state":"OFF" if shed_com else "ON","watts":0 if shed_com else 150,"revenue_rwf":0 if shed_com else round(142*scale),  **({"shed_reason":"HIGH risk — comfort shed"} if shed_com else {})},
+        {"name":"Music System",  "category":"luxury", "state":"OFF" if shed_lux else "ON","watts":0 if shed_lux else 80, "revenue_rwf":0, **({"shed_reason":"Risk ≥ MEDIUM — luxury shed"} if shed_lux else {})},
+        {"name":"Neon Sign",     "category":"luxury", "state":"OFF" if shed_lux else "ON","watts":0 if shed_lux else 40, "revenue_rwf":0, **({"shed_reason":"Risk ≥ MEDIUM — luxury shed"} if shed_lux else {})},
+    ]
+
+def cold_appliances(hour, risk):
+    open_ = 6 <= hour <= 20
+    peak  = 8 <= hour <= 18
+    scale = 1.0 if peak else (0.6 if open_ else 0.0)
+    fridge_rev = round(1850*scale) if open_ else 0
+    pump_rev   = round(1100*scale) if open_ else 0
+    light_rev  = round(740*scale)  if open_ else 0
+    fan_rev    = round(296*scale)  if open_ else 0
+    tv_rev     = round(148*scale)  if open_ else 0
+    shed_com = risk == "HIGH"
+    shed_fan = shed_com or not open_
+    shed_tv  = shed_com or not open_
+    return [
+        {"name":"Commercial Refrigerator","category":"critical","state":"ON", "watts":350,"revenue_rwf":fridge_rev or 200,**({"shed_reason":"After-hours — standby mode"} if not open_ else {})},
+        {"name":"Water Pump",   "category":"critical","state":"ON"  if open_ else "OFF","watts":750 if open_ else 0,"revenue_rwf":pump_rev, **({"shed_reason":"After-hours — pump off"} if not open_ else {})},
+        {"name":"LED Lights",   "category":"critical","state":"ON"  if open_ else "OFF","watts":80  if open_ else 0,"revenue_rwf":light_rev,**({"shed_reason":"After-hours — lights off"} if not open_ else {})},
+        {"name":"Standing Fan", "category":"comfort", "state":"OFF" if shed_fan else "ON","watts":0 if shed_fan else 75, "revenue_rwf":0 if shed_fan else fan_rev,**({"shed_reason":"HIGH risk — comfort shed" if shed_com else "After-hours"} if shed_fan else {})},
+        {"name":"TV / Display", "category":"comfort", "state":"OFF" if shed_tv  else "ON","watts":0 if shed_tv  else 150,"revenue_rwf":0 if shed_tv  else tv_rev, **({"shed_reason":"HIGH risk — comfort shed" if shed_com else "After-hours"} if shed_tv  else {})},
+        {"name":"Backup Battery Charger","category":"luxury","state":"ON" if (risk=="LOW" and open_) else "OFF","watts":200 if (risk=="LOW" and open_) else 0,"revenue_rwf":0,**({"shed_reason":"Risk ≥ MEDIUM — luxury shed"} if not (risk=="LOW" and open_) else {})},
+    ]
+
+def tailor_appliances(hour, risk):
+    open_ = 8 <= hour <= 18
+    peak  = 9 <= hour <= 16
+    scale = 1.0 if peak else (0.6 if open_ else 0.0)
+    if not open_:
+        return [
+            {"name":"Sewing Machine (2×)","category":"critical","state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Overlocker",         "category":"critical","state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"LED Lights",         "category":"critical","state":"ON", "watts":20, "revenue_rwf":0},
+            {"name":"Iron Press",         "category":"comfort", "state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Standing Fan",       "category":"comfort", "state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"Music System",       "category":"luxury",  "state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+            {"name":"TV / Display",       "category":"luxury",  "state":"OFF","watts":0,  "revenue_rwf":0,"shed_reason":"Business closed"},
+        ]
+    shed_lux = risk in ("HIGH","MEDIUM")
+    shed_com = risk == "HIGH"
+    shed_iron= risk == "HIGH"
+    return [
+        {"name":"Sewing Machine (2×)","category":"critical","state":"ON","watts":180,"revenue_rwf":round(590*scale)},
+        {"name":"Overlocker",         "category":"critical","state":"ON","watts":100,"revenue_rwf":round(310*scale)},
+        {"name":"LED Lights",         "category":"critical","state":"ON","watts":80, "revenue_rwf":round(180*scale)},
+        {"name":"Iron Press",   "category":"comfort","state":"OFF" if shed_iron else "ON","watts":0 if shed_iron else 1000,"revenue_rwf":0 if shed_iron else round(260*scale),**({"shed_reason":"HIGH risk — heavy load shed"} if shed_iron else {})},
+        {"name":"Standing Fan", "category":"comfort","state":"OFF" if shed_com  else "ON","watts":0 if shed_com  else 75,  "revenue_rwf":0 if shed_com  else round(120*scale),**({"shed_reason":"HIGH risk — comfort shed"}  if shed_com  else {})},
+        {"name":"Music System", "category":"luxury", "state":"OFF" if shed_lux  else "ON","watts":0 if shed_lux  else 80,  "revenue_rwf":0,**({"shed_reason":"Risk ≥ MEDIUM — luxury shed"} if shed_lux else {})},
+        {"name":"TV / Display", "category":"luxury", "state":"OFF" if shed_lux  else "ON","watts":0 if shed_lux  else 150, "revenue_rwf":0,**({"shed_reason":"Risk ≥ MEDIUM — luxury shed"} if shed_lux else {})},
+    ]
+
+PLANS = {
+    "salon": {
+        "label": "💇 Beauty Salon",
+        "summary": {"total_revenue_plan_rwf":93850,"total_revenue_naive_rwf":101790,"net_benefit_rwf":12418,"hours_with_shed":24},
+        "fn": salon_appliances,
+    },
+    "cold_room": {
+        "label": "🧊 Cold Room",
+        "summary": {"total_revenue_plan_rwf":118000,"total_revenue_naive_rwf":125000,"net_benefit_rwf":18000,"hours_with_shed":16},
+        "fn": cold_appliances,
+    },
+    "tailor": {
+        "label": "🧵 Tailor Shop",
+        "summary": {"total_revenue_plan_rwf":42000,"total_revenue_naive_rwf":48000,"net_benefit_rwf":3600,"hours_with_shed":14},
+        "fn": tailor_appliances,
+    },
+}
+
+RISK_COLOR = {"HIGH": "#ef4444", "MEDIUM": "#f97316", "LOW": "#22c55e"}
+
+# ── Sidebar ───────────────────────────────────────────────────────────────────
+with st.sidebar:
+    st.markdown("## ⚡ Grid Outage Forecaster")
+    st.markdown("<span style='color:#8892b0;font-size:12px'>T2.3 · AIMS KTT Hackathon 2026 · Kigali, Rwanda</span>", unsafe_allow_html=True)
+    st.divider()
+
+    st.markdown("### Model Metrics")
+    st.metric("Brier Score", "0.176")
+    st.metric("MAE (min)", "61.2")
+    st.metric("Avg Lead Time", "2.79h")
+    st.divider()
+
+    st.markdown("### Business")
+    biz_key = st.radio(
+        "Select business",
+        options=list(PLANS.keys()),
+        format_func=lambda k: PLANS[k]["label"],
+        label_visibility="collapsed",
+    )
+    st.divider()
+
+    biz = PLANS[biz_key]
+    s = biz["summary"]
+    st.markdown("### Plan Summary")
+    st.metric("Net Benefit (RWF)", f"{s['net_benefit_rwf']:,}")
+    st.metric("Expected Rev (RWF)", f"{s['total_revenue_plan_rwf']:,}")
+    high_h = sum(1 for f in FORECAST if f["risk_level"] == "HIGH")
+    st.metric("HIGH Risk Hours", high_h)
+    st.metric("Hours with Shed", s["hours_with_shed"])
+
+# ── Main tabs ─────────────────────────────────────────────────────────────────
+tab_forecast, tab_plan, tab_sms, tab_about = st.tabs(
+    ["📈 Forecast", "🔌 Appliance Plan", "📱 SMS Digest", "ℹ️ About"]
+)
+
+# ══ FORECAST TAB ══════════════════════════════════════════════════════════════
+with tab_forecast:
+    st.markdown("### 24-Hour Outage Probability Forecast")
+
+    hours       = [f["hour"] for f in FORECAST]
+    p_out       = [f["p_outage"] for f in FORECAST]
+    p_low       = [f["p_outage_low"] for f in FORECAST]
+    p_high      = [f["p_outage_high"] for f in FORECAST]
+    risk_levels = [f["risk_level"] for f in FORECAST]
+    bar_colors  = [RISK_COLOR[r] for r in risk_levels]
+
+    fig = go.Figure()
+
+    # Risk background zones (coloured bar under chart)
+    for f in FORECAST:
+        col = {"HIGH":"rgba(239,68,68,.10)","MEDIUM":"rgba(249,115,22,.07)","LOW":"rgba(34,197,94,.04)"}[f["risk_level"]]
+        fig.add_vrect(x0=f["hour"]-.5, x1=f["hour"]+.5, fillcolor=col, line_width=0, layer="below")
+
+    # Uncertainty band
+    fig.add_trace(go.Scatter(
+        x=hours + hours[::-1],
+        y=p_high + p_low[::-1],
+        fill="toself", fillcolor="rgba(99,102,241,.18)",
+        line=dict(color="rgba(0,0,0,0)"),
+        hoverinfo="skip", name="Uncertainty band",
+    ))
+
+    # Main line
+    fig.add_trace(go.Scatter(
+        x=hours, y=p_out,
+        mode="lines+markers",
+        line=dict(color="#6366f1", width=2.5),
+        marker=dict(color=bar_colors, size=8, line=dict(color="#0f1117", width=1)),
+        name="P(outage)",
+        hovertemplate="Hour %{x}:00<br>P(outage)=%{y:.1%}<extra></extra>",
+    ))
+
+    # HIGH threshold line
+    fig.add_hline(y=0.25, line=dict(color="#ef4444", dash="dash", width=1),
+                  annotation_text="HIGH threshold", annotation_position="top left",
+                  annotation_font_color="#ef4444")
+
+    fig.update_layout(
+        paper_bgcolor="#1a1d27", plot_bgcolor="#1a1d27",
+        font=dict(color="#e8eaf6", size=12),
+        xaxis=dict(title="Hour of day", gridcolor="#2e3350", tickvals=list(range(0,24,2))),
+        yaxis=dict(title="P(outage)", gridcolor="#2e3350", tickformat=".0%", range=[0, 0.55]),
+        legend=dict(orientation="h", y=1.08, bgcolor="rgba(0,0,0,0)"),
+        margin=dict(l=10, r=10, t=10, b=10),
+        height=320,
+    )
+    st.plotly_chart(fig, use_container_width=True)
+
+    # ── Hour grid ─────────────────────────────────────────────────────────────
+    st.markdown("### Hourly Risk — click a cell to drill into plan")
+    cols = st.columns(12)
+    for i, f in enumerate(FORECAST):
+        col_idx = i % 12
+        with cols[col_idx]:
+            risk = f["risk_level"]
+            color = RISK_COLOR[risk]
+            pct   = f"{f['p_outage']*100:.0f}%"
+            st.markdown(f"""
+            <div style='background:#1a1d27;border:1px solid #2e3350;border-radius:6px;
+                 padding:6px 4px;text-align:center;margin-bottom:4px;'>
+              <div style='font-size:10px;color:#8892b0'>{f["hour"]}h</div>
+              <div style='font-size:14px;font-weight:700;color:{color}'>{pct}</div>
+              <div style='margin-top:2px'><span class='badge badge-{risk.lower()}'>{risk}</span></div>
+            </div>""", unsafe_allow_html=True)
+
+    cols2 = st.columns(12)
+    for i, f in enumerate(FORECAST):
+        with cols2[i % 12]:
+            pass  # second row of 12 hours already handled above
+
+    # Second row (hours 12–23)
+    st.markdown("")
+
+# ══ PLAN TAB ══════════════════════════════════════════════════════════════════
+with tab_plan:
+    st.markdown("### 🔌 Appliance Plan")
+
+    hour_idx = st.slider(
+        "Select hour",
+        min_value=0, max_value=23, value=0,
+        format="%d:00",
+    )
+
+    fc = FORECAST[hour_idx]
+    appliances = biz["fn"](hour_idx, fc["risk_level"])
+    risk = fc["risk_level"]
+
+    # Hour info header
+    risk_color = RISK_COLOR[risk]
+    st.markdown(f"""
+    <div class='plan-header'>
+      <b>Hour {hour_idx}</b> &nbsp;·&nbsp; {fc['timestamp'].split()[1]}
+      &nbsp;&nbsp;<span class='badge badge-{risk.lower()}'>{risk}</span>
+      &nbsp;&nbsp;P(outage) = <b>{fc['p_outage']*100:.1f}%</b>
+      &nbsp;&nbsp;Exp. duration = <b>{fc['expected_duration_min']:.0f} min</b>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Appliance cards in 2 columns
+    left_col, right_col = st.columns(2)
+    for i, ap in enumerate(appliances):
+        target = left_col if i % 2 == 0 else right_col
+        is_off = ap["state"] == "OFF"
+        opacity = "opacity:.65;" if is_off else ""
+        shed = f"<div class='ap-shed'>⚠ {ap['shed_reason']}</div>" if "shed_reason" in ap else ""
+        rev_html = f"<div class='ap-rev'>{ap['revenue_rwf']:,} RWF/h</div>" if ap["state"] == "ON" and ap["revenue_rwf"] > 0 else "<div style='color:#6b7280'>—</div>"
+        with target:
+            st.markdown(f"""
+            <div class='ap-card{"" if not is_off else " off"}' style='{opacity}'>
+              <div style='display:flex;justify-content:space-between;align-items:flex-start'>
+                <div>
+                  <div class='ap-name'>{ap['name']}</div>
+                  <div class='ap-meta'>
+                    <span class='badge badge-{ap['category']}'>{ap['category']}</span>
+                    <span class='badge badge-{ap['state'].lower()}'>{ap['state']}</span>
+                  </div>
+                  {shed}
+                </div>
+                <div class='ap-right'>
+                  <div style='font-size:11px;color:#8892b0'>{ap['watts']}W</div>
+                  {rev_html}
+                </div>
+              </div>
+            </div>""", unsafe_allow_html=True)
+
+    st.markdown("""
+    <div style='background:#1a1d27;border:1px solid #2e3350;border-radius:8px;
+         padding:12px;font-size:12px;color:#8892b0;margin-top:8px;'>
+      <b style='color:#e8eaf6'>Shedding Logic:</b>
+      Luxury → Comfort → Critical (never shed during peak unless P &gt; 0.50).
+      Within category: lowest revenue shed first. Critical always ON during business peak hours.
+    </div>""", unsafe_allow_html=True)
+
+# ══ SMS TAB ═══════════════════════════════════════════════════════════════════
+with tab_sms:
+    st.markdown("### 📱 Morning Digest — Feature Phone SMS")
+    st.markdown("<span style='color:#8892b0;font-size:12px'>Sent at 06:30 CAT. Max 3 messages × 160 chars. Works on any GSM phone. No internet required. Language: Kinyarwanda/English mix for maximum reach.</span>", unsafe_allow_html=True)
+    st.markdown("")
+
+    for i, msg in enumerate(SMS):
+        st.markdown(f"""
+        <div class='sms-box'>
+          <div style='display:flex;justify-content:space-between;margin-bottom:6px'>
+            <span style='font-size:11px;font-weight:700;color:#6366f1'>SMS {i+1}/3</span>
+            <span style='font-size:10px;color:#8892b0'>{len(msg)}/160 chars</span>
+          </div>
+          {msg}
+        </div>""", unsafe_allow_html=True)
+
+    st.markdown("""
+    <div class='sms-box' style='border-color:#6366f1;margin-top:16px;'>
+      <div style='font-size:12px;font-weight:700;color:#6366f1;margin-bottom:8px'>🔕 Offline Fallback Protocol</div>
+      <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+        <b style='color:#e8eaf6'>If no internet refresh by 13:00:</b> Device shows last cached plan with
+        a red ⚠️ staleness banner. Risk budget: plan valid for <b style='color:#f97316'>6 hours</b>
+        from generation time. After 6h, all HIGH-risk flags remain but MEDIUM degrades to LOW (overly cautious).
+        Maximum acceptable staleness: <b style='color:#ef4444'>8 hours</b>.
+        Owner sees: "PLAN STALE — use generator, call 0788-GRID."
+      </div>
+    </div>
+    <div class='sms-box' style='border-color:#22c55e;margin-top:10px;'>
+      <div style='font-size:12px;font-weight:700;color:#22c55e;margin-bottom:8px'>🔊 Illiteracy Adaptation — Voice + LED Relay</div>
+      <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+        <b style='color:#e8eaf6'>Design choice: Colored LED relay board</b> (3 LEDs per appliance slot).<br>
+        🟢 GREEN = ON safe &nbsp;·&nbsp; 🟡 YELLOW = shed if load high &nbsp;·&nbsp; 🔴 RED = OFF now.<br>
+        Board connects via GPIO to a ≈USD 8 ESP32 running cached plan. No reading required.
+        Physical override switch lets owner override any LED. $8 hardware cost, zero ongoing data cost.
+      </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+# ══ ABOUT TAB ═════════════════════════════════════════════════════════════════
+with tab_about:
+    st.markdown("### Technical Notes")
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.markdown("""
+        <div class='sms-box'>
+          <div style='font-size:12px;font-weight:700;color:#6366f1;margin-bottom:6px'>Model</div>
+          <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+            <b style='color:#e8eaf6'>LightGBM</b> classifier for P(outage) + regressor for E[duration | outage].<br>
+            Features: lagged load (1h, 2h, 24h, 48h), rolling stats, weather (temp, humidity, rain, wind),
+            temporal (hour, DOW, month, peak flags, rainy season). Training: 150-day window.
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        st.markdown("""
+        <div class='sms-box' style='margin-top:10px'>
+          <div style='font-size:12px;font-weight:700;color:#6366f1;margin-bottom:6px'>Hardest Trade-off</div>
+          <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+            Chose LightGBM over Prophet: faster retrain, handles irregular time steps,
+            natively supports tabular weather features. Trade-off: less interpretable
+            seasonality decomposition. Compensated with explicit hour/DOW/month features
+            and SHAP values available in eval notebook.
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+    with col2:
+        st.markdown("""
+        <div class='sms-box'>
+          <div style='font-size:12px;font-weight:700;color:#6366f1;margin-bottom:6px'>Performance</div>
+          <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+            Brier score: <b style='color:#22c55e'>0.1756</b> (naïve base rate = ~0.212)<br>
+            Duration MAE: <b style='color:#22c55e'>61.2 min</b><br>
+            Avg lead time on true outages: <b style='color:#22c55e'>2.79h</b><br>
+            Inference latency: <b style='color:#22c55e'>&lt;300ms CPU</b><br>
+            Retraining time: <b style='color:#22c55e'>&lt;10 min</b>
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        st.markdown("""
+        <div class='sms-box' style='margin-top:10px'>
+          <div style='font-size:12px;font-weight:700;color:#6366f1;margin-bottom:6px'>Constraints Met</div>
+          <div style='font-size:12px;color:#8892b0;line-height:1.7'>
+            ✅ CPU-only &nbsp;·&nbsp; ✅ &lt;10 min retrain &nbsp;·&nbsp; ✅ &lt;300ms serve<br>
+            ✅ Feature phone SMS digest &nbsp;·&nbsp; ✅ Offline fallback protocol<br>
+            ✅ Illiteracy adaptation &nbsp;·&nbsp; ✅ 3 business archetypes<br>
+            ✅ Critical-before-luxury rule
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+    st.markdown("""
+    <div style='text-align:center;color:#8892b0;font-size:11px;padding:20px 0 10px'>
+      T2.3 · Grid Outage Forecaster + Appliance Prioritizer · AIMS KTT Hackathon 2026 · CPU-only
+    </div>""", unsafe_allow_html=True)