Update app.py

app.py

@@ -1,8 +1,12 @@
 """
-Appliance Health & Leakage Monitor — Gradio dashboard (Hugging Face Spaces ready).
+Appliance Health & Leakage Monitor — plain "government service" interface.
+
+Goal: anyone can use it first time. A clear table of every appliance (estimated vs
+actual watts + status), tick-box selection, plain-language fault labels, and a
+high-contrast status banner. The simulation engine (engine.py) is unchanged.
 
 Run locally:   python app.py
-Data:          expects data/ampds2_hourly.parquet (create with prepare_data.py)
+Data:          expects data/ampds2_hourly.parquet
 """
 import os
 import matplotlib
@@ -16,7 +20,6 @@ import engine
 
 DATA_PATH = os.environ.get("AMPDS2_PARQUET", "data/ampds2_hourly.parquet")
 
-# ---- load data once at startup so dropdowns populate immediately ----
 DF = MAINS = None
 SUBS = []
 LOAD_ERR = ""
@@ -25,114 +28,130 @@ try:
 except Exception as e:
     LOAD_ERR = str(e)
 
-CHOICES = [(f"{engine.AMPDS2_NAMES.get(c, c)} ({c})", c) for c in SUBS]
+
+def nice(code):
+    n = engine.AMPDS2_NAMES.get(code, code)
+    return n if n != code else code.replace("_", " ").title()
+
+
+CHOICES = [(nice(c), c) for c in SUBS]
+
+# ---- plain-language maps ----
+PROBLEMS = ["Working fine",
+            "Drawing too much (worn)",
+            "Drawing too little (weak)",
+            "Not running (broken)"]
+KIND = {"Drawing too much (worn)": "Over-draw",
+        "Drawing too little (weak)": "Under-draw",
+        "Not running (broken)": "Off"}
+OVER_PCT = {"Low": 25, "Medium": 60, "High": 120}
+UNDER_PCT = {"Low": 20, "Medium": 45, "High": 75}
+LEAK_W = {"None": 0, "Small": 150, "Medium": 450, "Large": 900}
+SPEED = {"Slow": 2, "Normal": 6, "Fast": 12}
+STATUS_PLAIN = {"OK": ("Normal", "s-ok"), "OVER": ("Drawing too much", "s-bad"),
+                "UNDER": ("Drawing too little", "s-warn"), "OFF": ("Not running", "s-bad"),
+                "idle": ("Not in use", "s-idle")}
+
+# Force the plain light theme (avoids the dark-mode low-contrast problem entirely).
+FORCE_LIGHT = """() => {
+  const u = new URL(window.location.href);
+  if (u.searchParams.get('__theme') !== 'light') { u.searchParams.set('__theme','light'); window.location.replace(u.href); }
+}"""
 
 CSS = """
-.kpis{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
-.card{flex:1;min-width:120px;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:10px 14px;border:1px solid #1e293b}
-.card .l{font-size:11px;letter-spacing:.05em;color:#94a3b8;text-transform:uppercase}
-.card .v{font-size:20px;font-weight:700;margin-top:2px}
-.card.bad{background:#3f1d1d;border-color:#7f1d1d}
-.card.good{background:#0f2a1a;border-color:#14532d}
-.alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
-.alert{padding:8px 12px;border-radius:8px;border-left:4px solid #64748b;background:#1e293b;color:#e2e8f0;font-size:13px}
-.alert.crit{border-left-color:#ef4444;background:#3f1d1d}
-.alert.warn{border-left-color:#f59e0b;background:#3a2c12}
-.alert.ok{border-left-color:#22c55e;background:#0f2a1a}
-.grid{width:100%;border-collapse:collapse;font-size:13px}
-.grid th,.grid td{padding:6px 10px;border-bottom:1px solid #1e293b;text-align:left;color:#e2e8f0}
-.grid th{color:#94a3b8;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
-.grid td.num{text-align:right;font-variant-numeric:tabular-nums}
-.badge{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
-.badge.ok{background:#14532d;color:#bbf7d0}
-.badge.over{background:#7f1d1d;color:#fecaca}
-.badge.off{background:#7f1d1d;color:#fecaca}
-.badge.under{background:#78350f;color:#fde68a}
-.badge.idle{background:#334155;color:#cbd5e1}
-.panel-wrap{background:#0b1220;border-radius:12px;padding:12px;border:1px solid #1e293b}
+.gradio-container{max-width:1040px !important;margin:0 auto !important;
+  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;background:#ffffff !important;}
+.govhead{background:#0b0c0c;color:#fff;padding:16px 20px;border-bottom:6px solid #1d70b8;}
+.govhead h1{margin:0;font-size:24px;font-weight:700;color:#fff;}
+.govhead .sub{color:#cfd2d4;font-size:14px;margin-top:4px;}
+.step{font-size:18px;font-weight:700;color:#0b0c0c;border-bottom:2px solid #0b0c0c;padding-bottom:4px;margin:4px 0 2px;}
+.help{color:#505a5f;font-size:14px;margin:2px 0 8px;}
+.stats{display:flex;border:1px solid #b1b4b6;margin:4px 0;}
+.stat{flex:1;padding:12px 14px;border-right:1px solid #b1b4b6;background:#ffffff;}
+.stat:last-child{border-right:none;}
+.stat .l{font-size:12px;color:#505a5f;text-transform:uppercase;letter-spacing:.03em;}
+.stat .v{font-size:22px;font-weight:700;color:#0b0c0c;margin-top:4px;}
+.banner{padding:14px 16px;border-left:6px solid #00703c;background:#f3f9f4;color:#0b0c0c;font-size:16px;margin:4px 0;}
+.banner.bad{border-left-color:#d4351c;background:#fdf2f1;}
+.banner h3{margin:0 0 6px;font-size:18px;font-weight:700;color:#0b0c0c;}
+.banner ul{margin:6px 0 0;padding-left:20px;} .banner li{margin:3px 0;}
+table.t{width:100%;border-collapse:collapse;font-size:15px;background:#fff;}
+table.t th{text-align:left;border-bottom:2px solid #0b0c0c;padding:8px 10px;font-weight:700;color:#0b0c0c;}
+table.t td{border-bottom:1px solid #b1b4b6;padding:8px 10px;color:#0b0c0c;}
+table.t td.num{text-align:right;font-variant-numeric:tabular-nums;}
+.s-ok{color:#00703c;font-weight:700;} .s-bad{color:#d4351c;font-weight:700;}
+.s-warn{color:#8a6100;font-weight:700;} .s-idle{color:#505a5f;}
+button.primary{background:#00703c !important;color:#fff !important;border:0 !important;border-radius:0 !important;font-weight:700 !important;}
+button.secondary{border-radius:0 !important;}
 """
 
-ICON = {"crit": "⚠", "warn": "▲"}
-
 
 # ----------------------------------------------------------------- HTML builders
-def kpi_html(k, leak, n_alerts):
-    leak_cls = "bad" if leak["flag"] else "good"
-    al_cls = "bad" if n_alerts else "good"
-    return f"""
-<div class="kpis">
-  <div class="card"><div class="l">Sim time</div><div class="v">{k['time']:%Y-%m-%d %H:%M}</div></div>
-  <div class="card"><div class="l">Live load</div><div class="v">{k['load_W']:.0f} W</div></div>
-  <div class="card"><div class="l">Energy (playback)</div><div class="v">{k['energy_kWh']:.1f} kWh</div></div>
-  <div class="card {leak_cls}"><div class="l">Residual / leak</div><div class="v">{leak['now']:.0f} W</div></div>
-  <div class="card {al_cls}"><div class="l">Active alerts</div><div class="v">{n_alerts}</div></div>
-  <div class="card"><div class="l">Progress</div><div class="v">{k['i']+1}/{k['n']}</div></div>
-</div>"""
-
-
-def panel_html(alerts, rows, leak):
-    if alerts:
-        items = "".join(
-            f'<div class="alert {a["severity"]}"><b>{ICON.get(a["severity"], "•")} {a["name"]}</b> '
-            f'— {a["status"]}: {a["msg"]}</div>'
-            for a in alerts)
-    else:
-        items = '<div class="alert ok">✓ All appliances within normal range · no leakage detected</div>'
-    cells = ""
+def stats_html(k, leak, n_problems):
+    leakv = f"{max(0, leak['now'] - leak['expected']):.0f} W" if leak["flag"] else "None"
+    return (f'<div class="stats">'
+            f'<div class="stat"><div class="l">Date &amp; time</div><div class="v">{k["time"]:%d %b %Y, %H:%M}</div></div>'
+            f'<div class="stat"><div class="l">Whole house now</div><div class="v">{k["load_W"]:,.0f} W</div></div>'
+            f'<div class="stat"><div class="l">Possible leak</div><div class="v">{leakv}</div></div>'
+            f'<div class="stat"><div class="l">Problems found</div><div class="v">{n_problems}</div></div>'
+            f'</div>')
+
+
+def banner_html(rows, leak):
+    issues = []
+    if leak["flag"]:
+        issues.append(f"Possible electricity leak of about {max(0, leak['now'] - leak['expected']):.0f} W "
+                      f"somewhere in the house — power being used that no appliance accounts for.")
+    for r in rows:
+        st, nm = r["status"], nice(r["code"])
+        if st == "OVER":
+            issues.append(f"{nm} is drawing too much power — about {r['live_W']:,} W "
+                          f"(normally about {r['rated_W']:,} W).")
+        elif st == "UNDER":
+            issues.append(f"{nm} is drawing less power than normal — about {r['live_W']:,} W "
+                          f"(normally about {r['rated_W']:,} W).")
+        elif st == "OFF":
+            issues.append(f"{nm} is not running, although it normally would use about {r['rated_W']:,} W.")
+    if not issues:
+        return ('<div class="banner"><h3>&#10003; System normal</h3>'
+                'All equipment is working as expected and no electricity leak was detected.</div>')
+    lis = "".join(f"<li>{x}</li>" for x in issues)
+    return f'<div class="banner bad"><h3>&#9888; {len(issues)} problem(s) detected</h3><ul>{lis}</ul></div>'
+
+
+def table_html(rows):
+    body = ""
     for r in sorted(rows, key=lambda r: -r["live_W"]):
-        st = r["status"]
-        cells += (f'<tr><td>{r["name"]}</td><td class="num">{r["live_W"]:,}</td>'
-                  f'<td class="num">{r["rated_W"]:,}</td>'
-                  f'<td><span class="badge {st.lower()}">{st}</span></td></tr>')
-    grid = (f'<table class="grid"><thead><tr><th>Appliance</th><th>Live W</th>'
-            f'<th>Rated W</th><th>Status</th></tr></thead><tbody>{cells}</tbody></table>')
-    return f'<div class="panel-wrap"><div class="alerts">{items}</div>{grid}</div>'
+        label, cls = STATUS_PLAIN.get(r["status"], (r["status"], "s-idle"))
+        body += (f'<tr><td>{nice(r["code"])}</td>'
+                 f'<td class="num">{r["rated_W"]:,}</td>'
+                 f'<td class="num">{r["live_W"]:,}</td>'
+                 f'<td class="{cls}">{label}</td></tr>')
+    return (f'<table class="t"><thead><tr><th>Equipment</th>'
+            f'<th>Estimated watts</th><th>Now using (watts)</th><th>Status</th></tr></thead>'
+            f'<tbody>{body}</tbody></table>')
 
 
-# --------------------------------------------------------------------- charts
-def chart_focus(sim, cursor):
+def chart(sim, cursor):
     code = sim.focus
-    name = engine.AMPDS2_NAMES.get(code, code)
+    name = nice(code)
     t = sim.play_index
-    L = sim.live()
-    y = L["sub"][code].to_numpy()
-    fig = Figure(figsize=(7, 3.1), dpi=100)
+    y = sim.live()["sub"][code].to_numpy()
+    fig = Figure(figsize=(7, 2.9), dpi=100)
+    fig.patch.set_facecolor("white")
     ax = fig.add_subplot(111)
-    env = sim.envelopes.get(code)
-    if env is not None:
-        pt, q10, q90 = env
-        ax.fill_between(t, q10, q90, color="#94a3b8", alpha=0.22, label="expected band (TimesFM q10–q90)")
-        ax.plot(t, pt, color="#64748b", lw=0.8, ls="--", label="expected")
-    ax.plot(t[:cursor + 1], y[:cursor + 1], color="#2563eb", lw=1.3, label="actual (live)")
+    ax.set_facecolor("white")
+    ax.plot(t[:cursor + 1], y[:cursor + 1], color="#1d70b8", lw=1.5, label="power used now")
     if sim.rated.get(code, 0) > 0:
-        ax.axhline(sim.rated[code], color="#16a34a", lw=0.8, ls=":", label=f"rated {sim.rated[code]:.0f} W")
-    ax.axvline(t[cursor], color="#111827", lw=0.8, alpha=0.6)
-    ax.set_title(f"{name} ({code}) — live draw vs expected", fontsize=10)
-    ax.set_ylabel("Power (W)", fontsize=8)
-    ax.tick_params(labelsize=7)
-    ax.legend(fontsize=6.5, loc="upper left", framealpha=0.85)
-    fig.autofmt_xdate(rotation=0, ha="center")
-    fig.tight_layout()
-    return fig
-
-
-def chart_house(sim, cursor):
-    t = sim.play_index
-    L = sim.live()
-    res = L["res"]
-    fig = Figure(figsize=(7, 3.1), dpi=100)
-    ax = fig.add_subplot(111)
-    ax.plot(t, sim.res_upper, color="#f59e0b", lw=0.8, label="normal upper band")
-    ax.plot(t, sim.res_expected, color="#94a3b8", lw=0.8, ls="--", label="expected residual")
-    ax.plot(t[:cursor + 1], res[:cursor + 1], color="#7c3aed", lw=1.3, label="residual (live)")
-    if sim.leak is not None:
-        ts = t[min(sim.leak["start"], len(t) - 1)]
-        ax.axvline(ts, color="#dc2626", lw=0.9, ls="--", label="leak injected")
-    ax.axvline(t[cursor], color="#111827", lw=0.8, alpha=0.6)
-    ax.set_title("House energy balance — residual (potential leakage)", fontsize=10)
-    ax.set_ylabel("W", fontsize=8)
-    ax.tick_params(labelsize=7)
-    ax.legend(fontsize=6.5, loc="upper left", framealpha=0.85)
+        ax.axhline(sim.rated[code], color="#0b0c0c", lw=1.0, ls="--",
+                   label=f"estimated normal ({sim.rated[code]:.0f} W)")
+    ax.axvline(t[cursor], color="#505a5f", lw=0.8)
+    ax.set_title(f"{name}: power used over time", fontsize=11, color="#0b0c0c")
+    ax.set_ylabel("Watts", fontsize=9)
+    ax.tick_params(labelsize=8, colors="#0b0c0c")
+    for s in ax.spines.values():
+        s.set_color("#b1b4b6")
+    ax.legend(fontsize=8, loc="upper left")
     fig.autofmt_xdate(rotation=0, ha="center")
     fig.tight_layout()
     return fig
@@ -140,47 +159,48 @@ def chart_house(sim, cursor):
 
 def render(sim, cursor):
     cursor = int(min(max(cursor, 0), sim.play_len - 1))
-    alerts, rows, leak = sim.detect(cursor)
+    _, rows, leak = sim.detect(cursor)
     k = sim.kpis(cursor)
-    return (kpi_html(k, leak, len(alerts)),
-            chart_focus(sim, cursor),
-            chart_house(sim, cursor),
-            panel_html(alerts, rows, leak))
+    n = sum(1 for r in rows if r["status"] in ("OVER", "UNDER", "OFF")) + (1 if leak["flag"] else 0)
+    return stats_html(k, leak, n), banner_html(rows, leak), table_html(rows), chart(sim, cursor)
 
 
 # --------------------------------------------------------------------- handlers
-def initialize(window_days, ctx_days):
+def initialize():
     if LOAD_ERR:
-        msg = (f'<div class="alert crit"><b>⚠ Data not found.</b> {LOAD_ERR}</div>')
-        return [None, 0, msg, None, None, "", "Not initialized.", gr.update()]
+        msg = f'<div class="banner bad"><h3>&#9888; System data not found</h3>{LOAD_ERR}</div>'
+        return [None, 0, gr.update(), gr.update(), "", msg, "", None,
+                "Could not load the system."]
     sim = engine.Simulator(DF, MAINS, SUBS)
-    sim.setup(int(window_days), int(ctx_days))
+    sim.setup(45, 60)
     model = engine.get_timesfm()
     cyc = [c for c in SUBS if c in engine.CYCLIC_CODES and sim.rated.get(c, 0) > 0]
-    build = list(dict.fromkeys(cyc + [sim.focus]))
-    sim.build_envelopes(build, model)
-    eng = "TimesFM 2.5" if model is not None else "statistical fallback (TimesFM unavailable)"
-    vis = render(sim, 0)
-    status = (f"Initialized · {sim.play_len} h playback ({window_days} days) · "
-              f"expected band: {eng} · focus: {engine.AMPDS2_NAMES.get(sim.focus, sim.focus)}")
-    return [sim, 0, *vis, status, gr.update(choices=sim.appliance_choices(), value=sim.focus)]
+    sim.build_envelopes(list(dict.fromkeys(cyc + [sim.focus])), model)
+    s, b, tab, fig = render(sim, 0)
+    note = ("System ready. Every appliance is listed below with its estimated normal power and what "
+            "it is using now. Set a problem on the left if you like, then press Play.")
+    choices = [(nice(c), c) for c in sorted(SUBS, key=lambda c: -sim.rated.get(c, 0))]
+    return [sim, 0,
+            gr.update(choices=choices, value=[]),
+            gr.update(choices=choices, value=sim.focus),
+            s, b, tab, fig, note]
 
 
 def on_tick(sim, cursor, speed):
     if sim is None:
         return [cursor, gr.update(), gr.update(), gr.update(), gr.update(), gr.update()]
-    nc = int(min(cursor + int(speed), sim.play_len - 1))
-    vis = render(sim, nc)
-    return [nc, *vis, gr.Timer(active=(nc < sim.play_len - 1))]
+    nc = int(min(cursor + SPEED.get(speed, 6), sim.play_len - 1))
+    s, b, tab, fig = render(sim, nc)
+    return [nc, s, b, tab, fig, gr.Timer(active=(nc < sim.play_len - 1))]
 
 
-def on_reset(sim):
+def on_reset_time(sim):
     if sim is None:
         return [0, gr.update(), gr.update(), gr.update(), gr.update()]
     return [0, *render(sim, 0)]
 
 
-def on_focus(sim, cursor, code):
+def on_chart(sim, cursor, code):
     if sim is None or code is None:
         return [sim, gr.update(), gr.update(), gr.update(), gr.update()]
     sim.focus = code
@@ -189,117 +209,127 @@ def on_focus(sim, cursor, code):
     return [sim, *render(sim, cursor)]
 
 
-def on_apply_inj(sim, cursor, code, kind, pct, start):
-    if sim is None:
+def on_apply_fault(sim, cursor, codes, problem, severity):
+    if sim is None or not codes:
         return [sim, gr.update(), gr.update(), gr.update(), gr.update()]
-    sim.set_injection(code, kind, pct, start)
+    for code in codes:
+        if problem == "Working fine":
+            sim.injections.pop(code, None)
+            sim._dirty = True
+        elif problem == "Not running (broken)":
+            sim.set_injection(code, "Off", 0, 0)
+        elif problem == "Drawing too much (worn)":
+            sim.set_injection(code, "Over-draw", OVER_PCT.get(severity, 60), 0)
+        elif problem == "Drawing too little (weak)":
+            sim.set_injection(code, "Under-draw", UNDER_PCT.get(severity, 45), 0)
     return [sim, *render(sim, cursor)]
 
 
-def on_clear_inj(sim, cursor):
+def on_reset_faults(sim, cursor):
     if sim is None:
         return [sim, gr.update(), gr.update(), gr.update(), gr.update()]
     sim.clear_injections()
     return [sim, *render(sim, cursor)]
 
 
-def on_apply_leak(sim, cursor, watts, start):
-    if sim is None:
-        return [sim, gr.update(), gr.update(), gr.update(), gr.update()]
-    sim.set_leak(watts, start)
-    return [sim, *render(sim, cursor)]
-
-
-def on_clear_leak(sim, cursor):
+def on_set_leak(sim, cursor, size):
     if sim is None:
         return [sim, gr.update(), gr.update(), gr.update(), gr.update()]
-    sim.clear_leak()
+    if size == "None":
+        sim.clear_leak()
+    else:
+        sim.set_leak(LEAK_W.get(size, 0), 0)
     return [sim, *render(sim, cursor)]
 
 
 # --------------------------------------------------------------------- layout
-with gr.Blocks(css=CSS, theme=gr.themes.Soft(primary_hue="blue"),
-               title="Appliance Health & Leakage Monitor") as demo:
+with gr.Blocks(css=CSS, theme=gr.themes.Default(primary_hue="green", neutral_hue="slate"),
+               title="Appliance Power Monitor") as demo:
     sim_state = gr.State(None)
     cursor_state = gr.State(0)
 
-    gr.Markdown("# ⚡ Appliance Health & Leakage Monitor\n"
-                "Plays back the AMPds2 records, builds a TimesFM expected band per appliance, "
-                "and alerts on over-/under-draw and whole-house leakage. Inject faults below and watch it respond.")
-    init_status = gr.Markdown("Set a window and click **Initialize** to begin." +
-                              (f"  \n⚠ **{LOAD_ERR}**" if LOAD_ERR else ""))
+    gr.HTML('<div class="govhead"><h1>Appliance Power &amp; Leak Monitor</h1>'
+            '<div class="sub">Checks each appliance against its normal power use, and watches the '
+            'whole house for unaccounted electricity (leaks).</div></div>')
 
+    gr.HTML('<div class="step">Step 1 — Load the system</div>'
+            '<div class="help">This reads the household data and works out the normal power for each appliance. '
+            'It can take up to a minute the first time.</div>')
     with gr.Row():
-        window_days = gr.Slider(7, 120, value=45, step=1, label="Playback window (days)")
-        ctx_days = gr.Slider(14, 120, value=60, step=1, label="Healthy context (days, for baselines + TimesFM)")
-        init_btn = gr.Button("Initialize", variant="primary")
-
-    kpi = gr.HTML()
-
-    with gr.Row():
-        play_btn = gr.Button("▶ Play")
-        pause_btn = gr.Button("⏸ Pause")
-        step_btn = gr.Button("⏭ Step")
-        reset_btn = gr.Button("⟲ Reset")
-        speed = gr.Slider(1, 24, value=6, step=1, label="Speed (hours / tick)")
+        load_btn = gr.Button("Load the system", variant="primary", scale=0)
+        init_status = gr.Markdown("Press **Load the system** to begin."
+                                  + (f"  \n**{LOAD_ERR}**" if LOAD_ERR else ""))
 
     with gr.Row():
+        # -------- left: simple controls --------
         with gr.Column(scale=1):
-            with gr.Group():
-                gr.Markdown("### Inject appliance fault")
-                inj_code = gr.Dropdown(choices=CHOICES, label="Appliance",
-                                       value=(CHOICES[0][1] if CHOICES else None))
-                inj_kind = gr.Radio(["Over-draw", "Under-draw", "Off"], value="Over-draw", label="Fault type")
-                inj_pct = gr.Slider(0, 200, value=40, step=5, label="Magnitude (% of rated)")
-                inj_start = gr.Slider(0, 100, value=0, step=1, label="Start at (% of timeline)")
-                with gr.Row():
-                    inj_apply = gr.Button("Apply fault", variant="primary")
-                    inj_clear = gr.Button("Clear faults")
-            with gr.Group():
-                gr.Markdown("### Inject house leakage")
-                leak_W = gr.Slider(0, 1500, value=300, step=25, label="Leakage load (W, continuous)")
-                leak_start = gr.Slider(0, 100, value=20, step=1, label="Start at (% of timeline)")
-                with gr.Row():
-                    leak_apply = gr.Button("Apply leakage", variant="primary")
-                    leak_clear = gr.Button("Clear leakage")
-            focus_dd = gr.Dropdown(choices=CHOICES, label="Chart focus appliance",
-                                   value=(CHOICES[0][1] if CHOICES else None))
+            gr.HTML('<div class="step">Step 2 — Simulate a problem (optional)</div>'
+                    '<div class="help">Tick the equipment, choose what is wrong and how bad, then Apply.</div>')
+            equip = gr.CheckboxGroup(choices=CHOICES, label="Equipment to affect")
+            problem = gr.Radio(PROBLEMS, value="Working fine", label="What is wrong with it?")
+            severity = gr.Radio(["Low", "Medium", "High"], value="Medium",
+                                label="How bad? (for over/under power)")
+            with gr.Row():
+                apply_btn = gr.Button("Apply to ticked equipment", variant="primary")
+                reset_faults_btn = gr.Button("Set all back to normal", variant="secondary")
+
+            gr.HTML('<div class="step" style="margin-top:14px">Electricity leak in the house</div>'
+                    '<div class="help">Simulate power being lost somewhere with no appliance (faulty wiring, '
+                    'an unmetered load, theft).</div>')
+            leak = gr.Radio(list(LEAK_W.keys()), value="None", label="Leak size")
+
+            gr.HTML('<div class="step" style="margin-top:14px">Run</div>'
+                    '<div class="help">Play steps through the records so you can watch the table and status change.</div>')
+            with gr.Row():
+                play_btn = gr.Button("Play", variant="primary")
+                pause_btn = gr.Button("Pause", variant="secondary")
+            with gr.Row():
+                step_btn = gr.Button("Step", variant="secondary")
+                reset_time_btn = gr.Button("Reset time", variant="secondary")
+            speed = gr.Radio(list(SPEED.keys()), value="Normal", label="Speed")
+
+        # -------- right: what you watch --------
         with gr.Column(scale=2):
-            fig_focus = gr.Plot(label="Focus appliance")
-            fig_house = gr.Plot(label="House residual / leakage")
-
-    gr.Markdown("### Alerts & appliance status")
-    panel = gr.HTML()
+            stats_box = gr.HTML()
+            banner_box = gr.HTML()
+            gr.HTML('<div class="step">Equipment status</div>')
+            table_box = gr.HTML()
+            chart_dd = gr.Dropdown(choices=CHOICES, label="Show power chart for",
+                                   value=(CHOICES[0][1] if CHOICES else None))
+            chart_box = gr.Plot(show_label=False)
 
     timer = gr.Timer(0.8, active=False)
 
-    with gr.Accordion("About / how detection works", open=False):
+    with gr.Accordion("How this works (plain English)", open=False):
         gr.Markdown(
-            "- **Expected band** is forecast once by **TimesFM 2.5** from the healthy context window "
-            "(falls back to a seasonal profile if TimesFM isn't installed).\n"
-            "- **Over/under/off** fire when an appliance's trailing ON-power deviates from its healthy "
-            "**rated** value (robust to on/off cycling). The TimesFM band is the visual evidence on the chart.\n"
-            "- **Leakage** = whole-house meter − Σ appliances. Appliance faults raise the mains too, so they "
-            "do **not** move the residual — only a true leak does. That keeps the two alert types independent.\n"
-            "- No real fault labels exist in AMPds2, so you validate by **injecting** faults and watching response.")
+            "**Estimated watts** is the appliance's normal power, learned from a healthy period of data.\n\n"
+            "**Now using** is the live power as the records play.\n\n"
+            "An appliance is flagged when its power stays clearly above its normal value (worn / drawing too much), "
+            "below it (weak), or at zero when it should be running (broken).\n\n"
+            "A **leak** is found by comparing the whole-house meter to the sum of all appliances. A faulty "
+            "appliance raises the meter by the same amount, so it does not look like a leak — only truly "
+            "unaccounted power does.\n\n"
+            "There are no real fault labels in the data, so you test the system by simulating problems above "
+            "and watching it respond.")
 
     # ---- wiring ----
-    vis_out = [kpi, fig_focus, fig_house, panel]
-    init_btn.click(initialize, [window_days, ctx_days],
-                   [sim_state, cursor_state, *vis_out, init_status, focus_dd])
+    vis = [stats_box, banner_box, table_box, chart_box]
+    load_btn.click(initialize, None,
+                   [sim_state, cursor_state, equip, chart_dd, *vis, init_status])
 
     play_btn.click(lambda: gr.Timer(active=True), None, timer)
     pause_btn.click(lambda: gr.Timer(active=False), None, timer)
-    timer.tick(on_tick, [sim_state, cursor_state, speed], [cursor_state, *vis_out, timer])
-    step_btn.click(on_tick, [sim_state, cursor_state, speed], [cursor_state, *vis_out, timer])
-    reset_btn.click(on_reset, [sim_state], [cursor_state, *vis_out])
-
-    focus_dd.change(on_focus, [sim_state, cursor_state, focus_dd], [sim_state, *vis_out])
-    inj_apply.click(on_apply_inj, [sim_state, cursor_state, inj_code, inj_kind, inj_pct, inj_start],
-                    [sim_state, *vis_out])
-    inj_clear.click(on_clear_inj, [sim_state, cursor_state], [sim_state, *vis_out])
-    leak_apply.click(on_apply_leak, [sim_state, cursor_state, leak_W, leak_start], [sim_state, *vis_out])
-    leak_clear.click(on_clear_leak, [sim_state, cursor_state], [sim_state, *vis_out])
+    timer.tick(on_tick, [sim_state, cursor_state, speed], [cursor_state, *vis, timer])
+    step_btn.click(on_tick, [sim_state, cursor_state, speed], [cursor_state, *vis, timer])
+    reset_time_btn.click(on_reset_time, [sim_state], [cursor_state, *vis])
+
+    apply_btn.click(on_apply_fault, [sim_state, cursor_state, equip, problem, severity],
+                    [sim_state, *vis])
+    reset_faults_btn.click(on_reset_faults, [sim_state, cursor_state], [sim_state, *vis])
+    leak.change(on_set_leak, [sim_state, cursor_state, leak], [sim_state, *vis])
+    chart_dd.change(on_chart, [sim_state, cursor_state, chart_dd], [sim_state, *vis])
+
+    demo.load(None, None, None, js=FORCE_LIGHT)
 
 if __name__ == "__main__":
     demo.launch()