loaderup 0.1.0__py3-none-any.whl

loader/web/assets/app.js

@@ -0,0 +1,773 @@
+import React, { useEffect, useMemo, useRef, useState } from "https://esm.sh/react@18.3.1";
+import { createRoot } from "https://esm.sh/react-dom@18.3.1/client";
+import htm from "https://esm.sh/htm@3.1.1";
+
+const html = htm.bind(React.createElement);
+
+const NAV = ["Run Now", "Live Runs", "Registry", "History"];
+const BODY_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
+const UI_VERSION = "20260418d";
+
+const METRIC_NAMES = {
+  total_requests: "Total Requests",
+  avg_http_req_duration_ms: "Avg Latency",
+  med_http_req_duration_ms: "Median",
+  p90_http_req_duration_ms: "P90",
+  p95_http_req_duration_ms: "P95",
+  max_http_req_duration_ms: "Max",
+  http_req_failed_rate: "Failure Rate",
+  checks_pass_rate: "Checks Pass Rate",
+};
+
+const defaultTarget = () => ({
+  name: "home",
+  method: "GET",
+  path: "/",
+  expected_status: 200,
+  weight: 1,
+  tagsRaw: "public",
+  headersRaw: "",
+  payloadRaw: "",
+});
+
+function metricValue(key, value) {
+  if (value === null || value === undefined) return "n/a";
+  if (typeof value === "number" && key.endsWith("_rate")) return `${(value * 100).toFixed(2)}%`;
+  if (typeof value === "number") return Number.isInteger(value) ? `${value}` : value.toFixed(2);
+  return String(value);
+}
+
+function barItems(metrics = {}) {
+  return [
+    ["Checks", (metrics.checks_pass_rate || 0) * 100],
+    ["Failures", (metrics.http_req_failed_rate || 0) * 100],
+    ["P95", (metrics.p95_http_req_duration_ms || 0) / 10],
+    ["Avg", (metrics.avg_http_req_duration_ms || 0) / 10],
+  ].map(([k, v]) => [k, Math.max(0, Math.min(100, Number(v) || 0))]);
+}
+
+function statusPill(status) {
+  const s = status || "pending";
+  return html`<span className=${`pill ${s}`}>${s}</span>`;
+}
+
+function methodUsesBody(method) {
+  return BODY_METHODS.has(String(method || "").toUpperCase());
+}
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, message: "" };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, message: error?.message || "Unknown UI error" };
+  }
+
+  componentDidCatch(error) {
+    console.error("LoaderUp UI error:", error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return html`
+        <div className="main">
+          <section className="card">
+            <h3>Dashboard error</h3>
+            <p className="muted">A rendering error occurred. Please refresh the page.</p>
+            <pre>${this.state.message}</pre>
+          </section>
+        </div>
+      `;
+    }
+    return this.props.children;
+  }
+}
+
+function Sidebar({ tab, setTab, health, stats }) {
+  return html`
+    <aside className="sidebar">
+      <div className="brand">
+        <h1>LoaderUp</h1>
+        <p>Control Center</p>
+      </div>
+
+      <nav className="nav">
+        ${NAV.map((item) => html`
+          <button key=${item} className=${tab === item ? "active" : ""} onClick=${() => setTab(item)}>
+            ${item}
+          </button>
+        `)}
+      </nav>
+
+      <div className="sidebar-meta">
+        <div className="meta-chip">API: ${health.status || "unknown"}</div>
+        <div className="meta-chip">k6: ${health.k6_installed ? "ready" : "missing"}</div>
+        <div className="meta-chip">Registry: ${stats.registry}</div>
+        <div className="meta-chip">History: ${stats.history}</div>
+      </div>
+    </aside>
+  `;
+}
+
+function TopBar({ tab, health, activeRuns, reloadAll }) {
+  return html`
+    <header className="topbar">
+      <div>
+        <h2>${tab}</h2>
+        <p>Loaderup workflow: configure, run, watch, and compare.</p>
+      </div>
+      <div className="topbar-right">
+        <span className="pill">UI v${UI_VERSION}</span>
+        ${statusPill(health.status === "ok" ? "ok" : "offline")}
+        <span className="pill">Active: ${activeRuns}</span>
+        <button className="ghost" onClick=${reloadAll}>Refresh Data</button>
+      </div>
+    </header>
+  `;
+}
+
+function RunNow({ registryTargets, onRunStart }) {
+  const [mode, setMode] = useState("registry");
+  const [baseUrl, setBaseUrl] = useState("http://127.0.0.1:8000");
+  const [vus, setVus] = useState(10);
+  const [duration, setDuration] = useState(30);
+  const [targets, setTargets] = useState([defaultTarget()]);
+  const [registryPayloads, setRegistryPayloads] = useState({});
+  const [registryHeaders, setRegistryHeaders] = useState({});
+  const [snapshotEditors, setSnapshotEditors] = useState({});
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    const nextPayloads = {};
+    const nextHeaders = {};
+    for (const target of registryTargets || []) {
+      const key = `${target.method}:${target.path}:${target.name}`;
+      nextPayloads[key] = target.payload_example ? JSON.stringify(target.payload_example, null, 2) : "";
+      nextHeaders[key] = target.headers ? JSON.stringify(target.headers, null, 2) : "";
+    }
+    setRegistryPayloads(nextPayloads);
+    setRegistryHeaders(nextHeaders);
+    setSnapshotEditors({});
+  }, [registryTargets]);
+
+  function updateTarget(i, key, value) {
+    setTargets((prev) => prev.map((target, idx) => (idx === i ? { ...target, [key]: value } : target)));
+  }
+
+  function buildTargetsPayload() {
+    return targets.map((target) => {
+      const payload = target.payloadRaw.trim() ? JSON.parse(target.payloadRaw) : null;
+      if (payload !== null && (typeof payload !== "object" || Array.isArray(payload))) {
+        throw new Error(`Payload for '${target.name}' must be a JSON object`);
+      }
+      const headers = parseHeaders(target.headersRaw, target.name);
+      return {
+        name: target.name.trim(),
+        method: target.method,
+        path: target.path.trim(),
+        expected_status: Number(target.expected_status),
+        weight: Number(target.weight),
+        tags: target.tagsRaw.split(",").map((s) => s.trim()).filter(Boolean),
+        payload_example: methodUsesBody(target.method) ? payload : null,
+        headers,
+      };
+    });
+  }
+
+  function parseHeaders(raw, label) {
+    const text = (raw || "").trim();
+    if (!text) return {};
+
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      throw new Error(`Invalid headers JSON for '${label}'`);
+    }
+
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+      throw new Error(`Headers for '${label}' must be a JSON object`);
+    }
+
+    return Object.fromEntries(Object.entries(parsed).map(([k, v]) => [k, String(v)]));
+  }
+
+  function prettifyJson(raw, label) {
+    const text = (raw || "").trim();
+    if (!text) return "";
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      throw new Error(`Invalid JSON payload for '${label}'`);
+    }
+  }
+
+  function buildRegistryTargetsPayload() {
+    const safeTargets = Array.isArray(registryTargets) ? registryTargets.filter(Boolean) : [];
+    return safeTargets.map((target) => {
+      const key = `${target.method}:${target.path}:${target.name}`;
+      const raw = (registryPayloads[key] || "").trim();
+      const headers = parseHeaders(registryHeaders[key], target.name);
+
+      let payload = target.payload_example ?? null;
+      if (raw) {
+        let parsed;
+        try {
+          parsed = JSON.parse(raw);
+        } catch {
+          throw new Error(`Invalid JSON payload for '${target.name}'`);
+        }
+        if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+          throw new Error(`Payload for '${target.name}' must be a JSON object`);
+        }
+        payload = parsed;
+      }
+
+      if (String(target.method).toUpperCase() === "POST" && payload === null) {
+        throw new Error(`POST target '${target.name}' requires a JSON payload`);
+      }
+
+      return {
+        name: target.name,
+        method: target.method,
+        path: target.path,
+        expected_status: Number(target.expected_status),
+        weight: Number(target.weight || 1),
+        tags: Array.isArray(target.tags) ? target.tags : [],
+        payload_example: methodUsesBody(target.method) ? payload : null,
+        headers,
+      };
+    });
+  }
+
+  async function startRun(e) {
+    e.preventDefault();
+    setError("");
+    setBusy(true);
+    try {
+      const body = {
+        base_url: baseUrl.trim(),
+        vus: Number(vus),
+        duration_seconds: Number(duration),
+      };
+      let endpoint = "/run/targets";
+      if (mode === "manual") {
+        body.targets = buildTargetsPayload();
+        if (!body.targets.length) throw new Error("At least one target is required");
+      } else {
+        body.targets = buildRegistryTargetsPayload();
+        if (!body.targets.length) throw new Error("No registry targets available");
+      }
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.detail || "Could not start run");
+      onRunStart(data);
+    } catch (err) {
+      setError(err.message || "Unknown error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return html`
+    <div className="grid-2">
+      <section className="card">
+        <div className="toolbar">
+          <h3>Execution Config</h3>
+          <span className="muted">Fast launch setup</span>
+        </div>
+        <form onSubmit=${startRun}>
+          <div className="grid-3">
+            <label>Mode
+              <select value=${mode} onChange=${(e) => setMode(e.target.value)}>
+                <option value="registry">Registry Targets</option>
+                <option value="manual">Manual Targets</option>
+              </select>
+            </label>
+            <label>Virtual Users
+              <input type="number" min="1" value=${vus} onInput=${(e) => setVus(e.target.value)} />
+            </label>
+            <label>Duration (sec)
+              <input type="number" min="1" value=${duration} onInput=${(e) => setDuration(e.target.value)} />
+            </label>
+          </div>
+          <label>Base URL
+            <input type="url" value=${baseUrl} onInput=${(e) => setBaseUrl(e.target.value)} required />
+          </label>
+
+          ${mode === "manual" && html`
+            <div className="toolbar" style=${{ marginTop: "0.65rem" }}>
+              <strong>Manual Targets</strong>
+              <button type="button" className="ghost" onClick=${() => setTargets((p) => [...p, defaultTarget()])}>Add Target</button>
+            </div>
+            <div className="targets">
+              ${targets.map((target, i) => html`
+                <div className="item" key=${i}>
+                  <div className="grid-3">
+                    <label>Name<input value=${target.name} onInput=${(e) => updateTarget(i, "name", e.target.value)} /></label>
+                    <label>Method
+                      <select value=${target.method} onChange=${(e) => updateTarget(i, "method", e.target.value)}>
+                        <option value="GET">GET</option>
+                        <option value="POST">POST</option>
+                        <option value="PUT">PUT</option>
+                        <option value="PATCH">PATCH</option>
+                        <option value="DELETE">DELETE</option>
+                      </select>
+                    </label>
+                    <label>Path<input value=${target.path} onInput=${(e) => updateTarget(i, "path", e.target.value)} /></label>
+                  </div>
+                  <div className="grid-3">
+                    <label>Expected<input type="number" value=${target.expected_status} onInput=${(e) => updateTarget(i, "expected_status", e.target.value)} /></label>
+                    <label>Weight<input type="number" step="0.1" value=${target.weight} onInput=${(e) => updateTarget(i, "weight", e.target.value)} /></label>
+                    <label>Tags<input value=${target.tagsRaw} onInput=${(e) => updateTarget(i, "tagsRaw", e.target.value)} /></label>
+                  </div>
+                  <label>
+                    <div className="inline-actions">
+                      <span>Headers JSON</span>
+                      <button
+                        type="button"
+                        className="ghost mini-btn"
+                        onClick=${() => {
+                          try {
+                            updateTarget(i, "headersRaw", prettifyJson(target.headersRaw, target.name));
+                            setError("");
+                          } catch (err) {
+                            setError(err.message || "Invalid JSON");
+                          }
+                        }}
+                      >
+                        Pretty
+                      </button>
+                    </div>
+                    <textarea
+                      value=${target.headersRaw}
+                      onInput=${(e) => updateTarget(i, "headersRaw", e.target.value)}
+                      placeholder='{"Authorization": "Bearer ..."}'
+                    />
+                  </label>
+                  <label>
+                    <div className="inline-actions">
+                      <span>Payload JSON</span>
+                      <button
+                        type="button"
+                        className="ghost mini-btn"
+                        disabled=${!methodUsesBody(target.method)}
+                        onClick=${() => {
+                          try {
+                            updateTarget(i, "payloadRaw", prettifyJson(target.payloadRaw, target.name));
+                            setError("");
+                          } catch (err) {
+                            setError(err.message || "Invalid JSON");
+                          }
+                        }}
+                      >
+                        Pretty
+                      </button>
+                    </div>
+                    <textarea
+                      value=${target.payloadRaw}
+                      disabled=${!methodUsesBody(target.method)}
+                      onInput=${(e) => updateTarget(i, "payloadRaw", e.target.value)}
+                      placeholder=${methodUsesBody(target.method) ? '{"key": "value"}' : "This method does not use a request body"}
+                    />
+                  </label>
+                  <button type="button" className="danger" onClick=${() => setTargets((p) => p.filter((_, idx) => idx !== i))}>Remove</button>
+                </div>
+              `)}
+            </div>
+          `}
+          <div className="toolbar" style=${{ marginTop: "0.7rem" }}>
+            <span className="muted">Once started, follow progress in Live Runs.</span>
+            <button className="primary" disabled=${busy} type="submit">${busy ? "Starting..." : "Start Run"}</button>
+          </div>
+        </form>
+        ${error && html`<pre>${error}</pre>`}
+      </section>
+
+      <section className="card">
+        <h3>Registry Snapshot</h3>
+        <p className="muted">Loaded decorator targets available for immediate execution.</p>
+        <div className="list">
+          ${registryTargets.length
+            ? registryTargets.map((target) => html`
+                <div className="item" key=${`${target.method}:${target.path}:${target.name}`}>
+                  ${(() => {
+                    const key = `${target.method}:${target.path}:${target.name}`;
+                    const canHaveBody = methodUsesBody(target.method);
+                    const isOpen = !!snapshotEditors[key];
+                    return html`
+                  <div className="toolbar">
+                    <strong>${target.name}</strong>
+                    <span className="pill">${target.method}</span>
+                  </div>
+                  <div><code>${target.path}</code></div>
+                  <div className="muted">expected=${target.expected_status}, tags=${(target.tags || []).join(", ") || "none"}</div>
+                  <div className="toolbar" style=${{ marginTop: "0.55rem" }}>
+                    <button
+                      type="button"
+                      className="ghost"
+                      onClick=${() => setSnapshotEditors((prev) => ({ ...prev, [key]: !prev[key] }))}
+                    >
+                      ${isOpen ? "Hide API request editor" : "Modify API request body & headers"}
+                    </button>
+                  </div>
+                  ${isOpen && html`
+                    <div className="targets">
+                      <label>
+                        <div className="inline-actions">
+                          <span>Request JSON</span>
+                          <button
+                            type="button"
+                            className="ghost mini-btn"
+                            disabled=${!canHaveBody}
+                            onClick=${() => {
+                              try {
+                                setRegistryPayloads((prev) => ({
+                                  ...prev,
+                                  [key]: prettifyJson(prev[key] || "", target.name),
+                                }));
+                                setError("");
+                              } catch (err) {
+                                setError(err.message || "Invalid JSON");
+                              }
+                            }}
+                          >
+                            Pretty
+                          </button>
+                        </div>
+                        <textarea
+                          value=${registryPayloads[key] || ""}
+                          disabled=${!canHaveBody}
+                          onInput=${(e) => setRegistryPayloads((prev) => ({ ...prev, [key]: e.target.value }))}
+                          placeholder=${canHaveBody ? '{"key": "value"}' : "This method does not use a request body"}
+                        />
+                      </label>
+                      ${!canHaveBody && html`<div className="muted">Body is only used for POST/PUT/PATCH/DELETE.</div>`}
+                      <label>
+                        <div className="inline-actions">
+                          <span>Headers JSON</span>
+                          <button
+                            type="button"
+                            className="ghost mini-btn"
+                            onClick=${() => {
+                              try {
+                                setRegistryHeaders((prev) => ({
+                                  ...prev,
+                                  [key]: prettifyJson(prev[key] || "", target.name),
+                                }));
+                                setError("");
+                              } catch (err) {
+                                setError(err.message || "Invalid JSON");
+                              }
+                            }}
+                          >
+                            Pretty
+                          </button>
+                        </div>
+                        <textarea
+                          value=${registryHeaders[key] || ""}
+                          onInput=${(e) => setRegistryHeaders((prev) => ({ ...prev, [key]: e.target.value }))}
+                          placeholder='{"Authorization": "Bearer ..."}'
+                        />
+                      </label>
+                    </div>
+                  `}
+                    `;
+                  })()}
+                </div>
+              `)
+            : html`<div className="item muted">No registered targets.</div>`}
+        </div>
+      </section>
+    </div>
+  `;
+}
+
+function LiveRuns({ activeJob, setActiveJob, activeRuns, logs, result, error, refreshActive }) {
+  const bars = useMemo(() => barItems(result?.metrics), [result]);
+
+  return html`
+    <div className="grid-2">
+      <section className="card">
+        <div className="toolbar">
+          <h3>Current and Recent Runs</h3>
+          <button className="ghost" onClick=${refreshActive}>Refresh</button>
+        </div>
+        <div className="list">
+          ${activeRuns.length
+            ? activeRuns.map((run) => html`
+                <div className="item" key=${run.job_id}>
+                  <div className="toolbar">
+                    <strong>${run.job_id}</strong>
+                    ${statusPill(run.status)}
+                  </div>
+                  <div className="muted">targets=${run.result?.config?.targets?.length ?? 0}, vus=${run.result?.config?.vus ?? "n/a"}</div>
+                  <button className="ghost" onClick=${() => setActiveJob(run)}>View</button>
+                </div>
+              `)
+            : html`<div className="item muted">No runs available.</div>`}
+        </div>
+
+        <h4 style=${{ marginTop: "0.9rem" }}>Live Progress</h4>
+        <div className="log">
+          ${logs.length ? logs.map((line, idx) => html`<div className="item" key=${idx}>${line}</div>`) : html`<div className="item muted">No live stream events yet.</div>`}
+        </div>
+      </section>
+
+      <section className="card">
+        <div className="toolbar">
+          <h3>Run Details</h3>
+          ${activeJob ? statusPill(activeJob.status) : null}
+        </div>
+        <p className="muted">${activeJob ? activeJob.job_id : "Select a run to inspect"}</p>
+
+        <div className="metrics">
+          ${Object.entries(METRIC_NAMES).map(([key, label]) => html`
+            <div className="item metric" key=${key}>
+              <div className="n">${label}</div>
+              <div className="v">${metricValue(key, result?.metrics?.[key])}</div>
+            </div>
+          `)}
+        </div>
+
+        <h4 style=${{ marginTop: "0.9rem" }}>Quick Trends</h4>
+        <div className="bars">
+          ${bars.map(([label, value]) => html`
+            <div className="vbar" key=${label}>
+              <div className="vbar-track">
+                <div className="vbar-fill" style=${{ height: `${value.toFixed(1)}%` }}></div>
+              </div>
+              <div className="vbar-meta">
+                <span>${label}</span>
+                <strong>${value.toFixed(1)}%</strong>
+              </div>
+            </div>
+          `)}
+        </div>
+
+        ${error && html`<pre>${error}</pre>`}
+        <h4 style=${{ marginTop: "0.9rem" }}>Raw Result</h4>
+        <pre>${JSON.stringify(result || { message: "No result yet" }, null, 2)}</pre>
+      </section>
+    </div>
+  `;
+}
+
+function RegistryPage({ targets, refresh }) {
+  const safeTargets = Array.isArray(targets) ? targets.filter(Boolean) : [];
+  return html`
+    <section className="card">
+      <div className="toolbar">
+        <h3>Registered Targets</h3>
+        <button className="ghost" onClick=${refresh}>Refresh Registry</button>
+      </div>
+      <p className="muted">These targets are discoverable by <code>/run/registry</code>.</p>
+      <div className="list">
+        ${safeTargets.length
+          ? safeTargets.map((target) => html`
+              <div className="item" key=${`${target.method}:${target.path}:${target.name}`}>
+                <div className="toolbar">
+                  <strong>${target.name}</strong>
+                  <span className="pill">${target.method}</span>
+                </div>
+                <div><code>${target.path}</code></div>
+                <div className="muted">status=${target.expected_status}, weight=${target.weight}, tags=${(target.tags || []).join(", ") || "none"}</div>
+              </div>
+            `)
+          : html`<div className="item muted">No targets found.</div>`}
+      </div>
+    </section>
+  `;
+}
+
+function History({ runs, refresh }) {
+  return html`
+    <section className="card">
+      <div className="toolbar">
+        <h3>Saved Run History</h3>
+        <button className="ghost" onClick=${refresh}>Refresh History</button>
+      </div>
+      <div className="list">
+        ${runs.length
+          ? runs.map((run) => html`
+              <div className="item" key=${run.job_id}>
+                <div className="toolbar">
+                  <strong>${run.job_id}</strong>
+                  ${statusPill(run.status)}
+                </div>
+                <div className="muted">vus=${run.result?.config?.vus ?? "n/a"}, duration=${run.result?.config?.duration_seconds ?? "n/a"}s, targets=${run.result?.config?.targets?.length ?? 0}</div>
+                <div className="muted">avg=${metricValue("avg_http_req_duration_ms", run.result?.metrics?.avg_http_req_duration_ms)} ms, failed=${metricValue("http_req_failed_rate", run.result?.metrics?.http_req_failed_rate)}</div>
+              </div>
+            `)
+          : html`<div className="item muted">No persisted runs found.</div>`}
+      </div>
+    </section>
+  `;
+}
+
+function App() {
+  const [tab, setTab] = useState("Run Now");
+  const [health, setHealth] = useState({ status: "checking", k6_installed: false });
+  const [registryTargets, setRegistryTargets] = useState([]);
+  const [historyRuns, setHistoryRuns] = useState([]);
+  const [activeRuns, setActiveRuns] = useState([]);
+
+  const [activeJob, setActiveJob] = useState(null);
+  const [logs, setLogs] = useState([]);
+  const [result, setResult] = useState(null);
+  const [streamError, setStreamError] = useState("");
+
+  const streamRef = useRef(null);
+
+  async function loadHealth() {
+    try {
+      const response = await fetch("/health");
+      setHealth(await response.json());
+    } catch {
+      setHealth({ status: "offline", k6_installed: false });
+    }
+  }
+
+  async function loadRegistry() {
+    try {
+      const response = await fetch("/registry/targets");
+      const data = await response.json();
+      const targets = Array.isArray(data.targets) ? data.targets.filter(Boolean) : [];
+      setRegistryTargets(targets);
+    } catch {
+      setRegistryTargets([]);
+    }
+  }
+
+  async function loadHistory() {
+    try {
+      const response = await fetch("/runs/history?limit=30");
+      const data = await response.json();
+      const runs = Array.isArray(data.runs) ? data.runs.filter(Boolean) : [];
+      setHistoryRuns(runs);
+    } catch {
+      setHistoryRuns([]);
+    }
+  }
+
+  async function loadActive() {
+    try {
+      const response = await fetch("/runs/active?limit=20");
+      const data = await response.json();
+      const runs = Array.isArray(data.runs) ? data.runs.filter(Boolean) : [];
+      setActiveRuns(runs);
+      if (!activeJob && runs.length) {
+        setActiveJob(runs[0]);
+        if (runs[0].result) setResult(runs[0].result);
+      }
+    } catch {
+      setActiveRuns([]);
+    }
+  }
+
+  async function reloadAll() {
+    await Promise.all([loadHealth(), loadRegistry(), loadHistory(), loadActive()]);
+  }
+
+  function closeStream() {
+    if (streamRef.current) {
+      streamRef.current.close();
+      streamRef.current = null;
+    }
+  }
+
+  function startStreaming(runMeta) {
+    closeStream();
+    setTab("Live Runs");
+    setActiveJob(runMeta);
+    setLogs([]);
+    setResult(null);
+    setStreamError("");
+
+    const source = new EventSource(runMeta.stream_url);
+    streamRef.current = source;
+
+    source.onmessage = (event) => {
+      const payload = JSON.parse(event.data);
+      if (payload.type === "progress") {
+        setLogs((prev) => [...prev.slice(-40), payload.message || "progress"]);
+        setActiveJob((prev) => (prev ? { ...prev, status: payload.status || prev.status } : prev));
+      } else if (payload.type === "error") {
+        setStreamError(payload.message || "Run failed");
+        setActiveJob((prev) => (prev ? { ...prev, status: "failed" } : prev));
+        loadHistory();
+      } else if (payload.type === "done") {
+        setResult(payload.result || null);
+        setActiveJob((prev) => (prev ? { ...prev, status: "done", result: payload.result } : prev));
+        setLogs((prev) => [...prev.slice(-40), "Run completed successfully"]);
+        loadHistory();
+      }
+    };
+
+    source.onerror = async () => {
+      try {
+        const response = await fetch(runMeta.result_url);
+        if (response.ok) {
+          const job = await response.json();
+          setActiveJob(job);
+          setResult(job.result || null);
+          if (job.error) setStreamError(job.error);
+        }
+      } catch {
+        setStreamError("Stream disconnected and result fetch failed");
+      }
+    };
+  }
+
+  useEffect(() => {
+    reloadAll();
+    return () => closeStream();
+  }, []);
+
+  useEffect(() => {
+    if (!activeJob) return;
+    setResult(activeJob.result || null);
+  }, [activeJob]);
+
+  const stats = useMemo(
+    () => ({
+      registry: registryTargets.length,
+      history: historyRuns.length,
+      active: activeRuns.length,
+    }),
+    [registryTargets, historyRuns, activeRuns]
+  );
+
+  return html`
+    <div className="app-shell">
+      <${Sidebar} tab=${tab} setTab=${setTab} health=${health} stats=${stats} />
+
+      <div className="main">
+        <${TopBar} tab=${tab} health=${health} activeRuns=${stats.active} reloadAll=${reloadAll} />
+
+        <div className="page">
+          <div className="kpi-row">
+            <div className="kpi-card"><div className="label">Registered Targets</div><div className="value">${stats.registry}</div></div>
+            <div className="kpi-card"><div className="label">Active Memory Runs</div><div className="value">${stats.active}</div></div>
+            <div className="kpi-card"><div className="label">Persisted Runs</div><div className="value">${stats.history}</div></div>
+            <div className="kpi-card"><div className="label">Runtime</div><div className="value">${health.k6_installed ? "k6 Ready" : "k6 Missing"}</div></div>
+          </div>
+
+          ${tab === "Run Now" && html`<${RunNow} registryTargets=${registryTargets} onRunStart=${startStreaming} />`}
+          ${tab === "Live Runs" && html`<${LiveRuns} activeJob=${activeJob} setActiveJob=${setActiveJob} activeRuns=${activeRuns} logs=${logs} result=${result} error=${streamError} refreshActive=${loadActive} />`}
+          ${tab === "Registry" && html`<${RegistryPage} targets=${registryTargets} refresh=${loadRegistry} />`}
+          ${tab === "History" && html`<${History} runs=${historyRuns} refresh=${loadHistory} />`}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+createRoot(document.getElementById("root")).render(html`<${ErrorBoundary}><${App} /></${ErrorBoundary}>`);