loaderup 0.1.3__tar.gz → 0.1.4__tar.gz

{loaderup-0.1.3 → loaderup-0.1.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: loaderup
-Version: 0.1.3
+Version: 0.1.4
 Summary: Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-based target registration.
 Author: Mahdi Haroun
 License: MIT
@@ -33,7 +33,7 @@ Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-bas
 
 - Python `>=3.12`
 - `uv` (recommended package manager)
-- `k6` (optional but recommended for real load runs)
+- `k6` 
 
 ## Install
 
@@ -47,7 +47,7 @@ uv pip install -e .
 python -m loader.main
 ```
 
-Server starts on `http://127.0.0.1:8000` by default.
+Server starts on `http://127.0.0.1:5050` by default.
 
 ## Run via CLI
 
@@ -55,7 +55,7 @@ Server starts on `http://127.0.0.1:8000` by default.
 python -m loaderup.cli up --app loader.main:app --targets loader.demo_registry_target --reload
 ```
 
-This command opens the dashboard automatically at `http://127.0.0.1:8000/`.
+This command opens the dashboard automatically at `http://127.0.0.1:5050/`.
 Use `--no-open-browser` if you want to disable auto-open.
 
 You can also use fallback-friendly forms like:
@@ -64,10 +64,75 @@ You can also use fallback-friendly forms like:
 python -m loaderup.cli up --app main:app --targets demo_registry_targets --reload
 ```
 
+## Using the decorator with FastAPI
+
+Create your FastAPI app as usual:
+
+```python
+# main.py
+from fastapi import FastAPI
+
+app = FastAPI()
+
+
+@app.get("/")
+def home():
+    return {"message": "ok"}
+
+
+@app.post("/users")
+def create_user(payload: dict):
+    return {"id": 1, **payload}
+```
+
+Then create a module with the load targets you want LoaderUp to test. The decorated functions do not need to call your route handlers; importing this module registers the target metadata.
+
+```python
+# targets.py
+from loaderup import load_target
+
+
+@load_target(
+    name="home page",
+    method="GET",
+    path="/",
+    expected_status=200,
+    tags=["public"],
+)
+def home_page():
+    pass
+
+
+@load_target(
+    name="create user",
+    method="POST",
+    path="/users",
+    payload_example={"name": "Ada"},
+    expected_status=200,
+    tags=["users"],
+)
+def create_user():
+    pass
+```
+
+Start LoaderUp and tell it to import the target module:
+
+```bash
+python -m loaderup.cli up --app main:app --targets targets --reload
+```
+
+Run all decorator-registered targets against your FastAPI app:
+
+```bash
+curl -X POST http://127.0.0.1:5050/run/registry \
+  -H 'Content-Type: application/json' \
+  -d '{"base_url":"http://127.0.0.1:5050","vus":10,"duration_seconds":30}'
+```
+
 ## Health check
 
 ```bash
-curl http://127.0.0.1:8000/health
+curl http://127.0.0.1:5050/health
 ```
 
 ## Dashboard
@@ -75,7 +140,7 @@ curl http://127.0.0.1:8000/health
 Open:
 
 ```bash
-http://127.0.0.1:8000/
+http://127.0.0.1:5050/
 ```
 
 Dashboard includes:

loaderup-0.1.4/README.md

@@ -0,0 +1,130 @@
+# LoaderUp
+
+Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-based target registration.
+
+## Requirements
+
+- Python `>=3.12`
+- `uv` (recommended package manager)
+- `k6` 
+
+## Install
+
+```bash
+uv pip install -e .
+```
+
+## Run API directly
+
+```bash
+python -m loader.main
+```
+
+Server starts on `http://127.0.0.1:5050` by default.
+
+## Run via CLI
+
+```bash
+python -m loaderup.cli up --app loader.main:app --targets loader.demo_registry_target --reload
+```
+
+This command opens the dashboard automatically at `http://127.0.0.1:5050/`.
+Use `--no-open-browser` if you want to disable auto-open.
+
+You can also use fallback-friendly forms like:
+
+```bash
+python -m loaderup.cli up --app main:app --targets demo_registry_targets --reload
+```
+
+## Using the decorator with FastAPI
+
+Create your FastAPI app as usual:
+
+```python
+# main.py
+from fastapi import FastAPI
+
+app = FastAPI()
+
+
+@app.get("/")
+def home():
+    return {"message": "ok"}
+
+
+@app.post("/users")
+def create_user(payload: dict):
+    return {"id": 1, **payload}
+```
+
+Then create a module with the load targets you want LoaderUp to test. The decorated functions do not need to call your route handlers; importing this module registers the target metadata.
+
+```python
+# targets.py
+from loaderup import load_target
+
+
+@load_target(
+    name="home page",
+    method="GET",
+    path="/",
+    expected_status=200,
+    tags=["public"],
+)
+def home_page():
+    pass
+
+
+@load_target(
+    name="create user",
+    method="POST",
+    path="/users",
+    payload_example={"name": "Ada"},
+    expected_status=200,
+    tags=["users"],
+)
+def create_user():
+    pass
+```
+
+Start LoaderUp and tell it to import the target module:
+
+```bash
+python -m loaderup.cli up --app main:app --targets targets --reload
+```
+
+Run all decorator-registered targets against your FastAPI app:
+
+```bash
+curl -X POST http://127.0.0.1:5050/run/registry \
+  -H 'Content-Type: application/json' \
+  -d '{"base_url":"http://127.0.0.1:5050","vus":10,"duration_seconds":30}'
+```
+
+## Health check
+
+```bash
+curl http://127.0.0.1:5050/health
+```
+
+## Dashboard
+
+Open:
+
+```bash
+http://127.0.0.1:5050/
+```
+
+Dashboard includes:
+
+- live status + progress stream
+- metrics cards + quick chart bars
+- saved run history (persisted in `artifacts/history/runs.jsonl`)
+- React-based multi-tab control center (`Run Now`, `Live`, `Registered Targets`, `History`)
+
+## Notes
+
+- Registry targets are loaded when the module is imported.
+- Use `/run/targets` to submit explicit targets.
+- Use `/run/registry` to run all decorator-registered targets.

{loaderup-0.1.3 → loaderup-0.1.4}/agents/analyzer.py

@@ -1,4 +1,5 @@
 import json
+from datetime import datetime
 from typing import Any, Dict, Tuple
 from loader.models import SummaryMetrics
 
@@ -121,3 +122,81 @@ def parse_k6_diagnostics(stdout_text: str, stderr_text: str = "") -> list[dict[s
         diagnostics.append(data)
 
     return diagnostics
+
+
+def _to_dt(value: str) -> datetime | None:
+    text = str(value or "").strip()
+    if not text:
+        return None
+    if text.endswith("Z"):
+        text = text[:-1] + "+00:00"
+    try:
+        return datetime.fromisoformat(text)
+    except ValueError:
+        return None
+
+
+def _p95(values: list[float]) -> float | None:
+    if not values:
+        return None
+    ordered = sorted(values)
+    idx = max(0, min(len(ordered) - 1, int(0.95 * (len(ordered) - 1))))
+    return float(ordered[idx])
+
+
+def parse_k6_latency_timeseries(stream_path: str) -> list[dict[str, Any]]:
+    buckets: dict[int, list[float]] = {}
+    start_time: datetime | None = None
+
+    with open(stream_path, "r", encoding="utf-8") as handle:
+        for line in handle:
+            line = line.strip()
+            if not line:
+                continue
+
+            try:
+                entry = json.loads(line)
+            except json.JSONDecodeError:
+                continue
+
+            if entry.get("type") != "Point" or entry.get("metric") != "http_req_duration":
+                continue
+
+            data = entry.get("data")
+            if not isinstance(data, dict):
+                continue
+
+            value = data.get("value")
+            if not isinstance(value, (int, float)):
+                continue
+
+            t = _to_dt(data.get("time", ""))
+            if not t:
+                continue
+
+            if start_time is None:
+                start_time = t
+
+            second = int((t - start_time).total_seconds()) + 1
+            if second < 1:
+                second = 1
+
+            buckets.setdefault(second, []).append(float(value))
+
+    if not buckets:
+        return []
+
+    points: list[dict[str, Any]] = []
+    for second in sorted(buckets):
+        values = buckets[second]
+        avg = sum(values) / len(values)
+        points.append(
+            {
+                "second": second,
+                "avg_ms": float(avg),
+                "p95_ms": _p95(values),
+                "count": len(values),
+            }
+        )
+
+    return points

{loaderup-0.1.3 → loaderup-0.1.4}/agents/runner.py

@@ -7,12 +7,15 @@ async def run_k6(script_path: str, job_id: str) -> dict:
     out_dir.mkdir(parents=True, exist_ok=True)
 
     summary_path = out_dir / "summary.json"
+    metrics_stream_path = out_dir / "metrics.jsonl"
 
     process = await asyncio.create_subprocess_exec(
         "k6",
         "run",
         "--summary-export",
         str(summary_path),
+        "--out",
+        f"json={metrics_stream_path}",
         script_path,
         stdout=asyncio.subprocess.PIPE,
         stderr=asyncio.subprocess.PIPE,
@@ -35,6 +38,7 @@ async def run_k6(script_path: str, job_id: str) -> dict:
 
     return {
         "summary_path": str(summary_path),
+        "metrics_stream_path": str(metrics_stream_path),
         "stdout": stdout_text,
         "stderr": stderr_text,
-    }
+    }

{loaderup-0.1.3 → loaderup-0.1.4}/loader/demo_registry_target.py

@@ -1,7 +1,7 @@
 # demo_registry_targets.py
 
 from loaderup import load_target
-"""
+'''
 @load_target(
     name="home",
     method="GET",
@@ -11,7 +11,7 @@ from loaderup import load_target
 )
 def home():
     pass
-
+'''
 @load_target(
     name="home",
     method="POST",
@@ -22,4 +22,3 @@ def home():
 def gg():
     pass
 
-"""

{loaderup-0.1.3 → loaderup-0.1.4}/loader/main.py

@@ -147,4 +147,4 @@ async def get_run_history(limit: int = 20):
 if __name__ == "__main__":
     import uvicorn
 
-    uvicorn.run(app, host="0.0.0.0", port=8000)
+    uvicorn.run(app, host="0.0.0.0", port=5050)

{loaderup-0.1.3 → loaderup-0.1.4}/loader/models.py

@@ -74,6 +74,13 @@ class TargetMetric(BaseModel):
     note: Optional[str] = None
 
 
+class LatencySeriesPoint(BaseModel):
+    second: int
+    avg_ms: Optional[float] = None
+    p95_ms: Optional[float] = None
+    count: int = 0
+
+
 class JobResult(BaseModel):
     config: Optional[RunConfig] = None
     k6_script_path: Optional[str] = None
@@ -84,6 +91,7 @@ class JobResult(BaseModel):
     target_metrics: List[TargetMetric] = Field(default_factory=list)
     raw_summary: Optional[Dict[str, Any]] = None
     status_diagnostics: List[Dict[str, Any]] = Field(default_factory=list)
+    latency_timeseries: List[LatencySeriesPoint] = Field(default_factory=list)
 
 
 class Job(BaseModel):

{loaderup-0.1.3 → loaderup-0.1.4}/loader/pipeline.py

@@ -3,7 +3,11 @@ from loader.history import persist_job
 from loader.store import get_job, update_job, push_event, close_queue
 from agents.generator import build_k6_script, save_k6_script
 from agents.runner import run_k6
-from agents.analyzer import parse_k6_summary, parse_k6_diagnostics
+from agents.analyzer import (
+    parse_k6_summary,
+    parse_k6_diagnostics,
+    parse_k6_latency_timeseries,
+)
 
 
 async def set_status(job, status: JobStatus, message: str):
@@ -85,6 +89,9 @@ async def run_targets_pipeline(job_id: str, config: RunConfig):
         metrics, raw_summary = parse_k6_summary(run_output["summary_path"])
         job.result.metrics = metrics
         job.result.raw_summary = raw_summary
+        stream_path = run_output.get("metrics_stream_path")
+        if stream_path:
+            job.result.latency_timeseries = parse_k6_latency_timeseries(stream_path)
         update_job(job)
 
         await push_event(

{loaderup-0.1.3 → loaderup-0.1.4}/loader/web/assets/app.js

@@ -4,9 +4,9 @@ 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 NAV = ["Run Now", "Live Runs", "Registry", "History", "History Plot"];
 const BODY_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
-const UI_VERSION = "20260418o";
+const UI_VERSION = "20260423a";
 
 const METRIC_NAMES = {
   total_requests: "Total Requests",
@@ -19,6 +19,11 @@ const METRIC_NAMES = {
   checks_pass_rate: "Checks Pass Rate",
 };
 
+const LATENCY_SERIES = [
+  { key: "avg_http_req_duration_ms", title: "Average", lineClass: "avg" },
+  { key: "p95_http_req_duration_ms", title: "P95", lineClass: "p95" },
+];
+
 const defaultTarget = () => ({
   name: "home",
   method: "GET",
@@ -37,6 +42,43 @@ function metricValue(key, value) {
   return String(value);
 }
 
+function formatMs(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return "n/a";
+  return `${n.toFixed(1)} ms`;
+}
+
+function buildSelectedRunLatencyPoints(run, latencyMetricKey = "avg_http_req_duration_ms") {
+  const field = latencyMetricKey === "p95_http_req_duration_ms" ? "p95_ms" : "avg_ms";
+  const raw = Array.isArray(run?.result?.latency_timeseries) ? run.result.latency_timeseries : [];
+
+  const fromSeries = raw
+    .map((point) => {
+      const second = Number(point?.second);
+      const latency = Number(point?.[field]);
+      if (!Number.isFinite(second) || !Number.isFinite(latency)) return null;
+      return {
+        job_id: run?.job_id,
+        duration: second,
+        latency,
+        vus: Number(run?.result?.config?.vus),
+        status: run?.status || "pending",
+      };
+    })
+    .filter(Boolean)
+    .sort((a, b) => a.duration - b.duration);
+
+  if (fromSeries.length) return fromSeries;
+  return [];
+}
+
+function buildLinePath(points, xFor, yFor) {
+  if (!points.length) return "";
+  return points
+    .map((point, index) => `${index === 0 ? "M" : "L"}${xFor(point.duration).toFixed(2)},${yFor(point.latency).toFixed(2)}`)
+    .join(" ");
+}
+
 function barItems(metrics = {}) {
   return [
     ["Checks", (metrics.checks_pass_rate || 0) * 100],
@@ -291,7 +333,7 @@ function TopBar({ tab, health, activeRuns, reloadAll }) {
 
 function RunNow({ registryTargets, onRunStart }) {
   const [mode, setMode] = useState("registry");
-  const [baseUrl, setBaseUrl] = useState("http://127.0.0.1:8000");
+  const [baseUrl, setBaseUrl] = useState("http://127.0.0.1:5050");
   const [vus, setVus] = useState(10);
   const [duration, setDuration] = useState(30);
   const [targets, setTargets] = useState([defaultTarget()]);
@@ -1018,6 +1060,283 @@ function History({ runs, refresh, selectedRun, setSelectedRun, onRunAgain, rerun
   `;
 }
 
+function HistoryPlot({ runs, refresh, selectedRun, setSelectedRun }) {
+  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const [visibleSeries, setVisibleSeries] = useState({ avg: true, p95: true });
+  const plotWrapRef = useRef(null);
+  const selectedJobId = selectedRun?.job_id || null;
+
+  const avgPoints = useMemo(() => buildSelectedRunLatencyPoints(selectedRun, "avg_http_req_duration_ms"), [selectedRun]);
+  const p95Points = useMemo(() => buildSelectedRunLatencyPoints(selectedRun, "p95_http_req_duration_ms"), [selectedRun]);
+  const allPoints = useMemo(
+    () => [
+      ...avgPoints.map((point) => ({ ...point, series: "avg_http_req_duration_ms", lineClass: "avg" })),
+      ...p95Points.map((point) => ({ ...point, series: "p95_http_req_duration_ms", lineClass: "p95" })),
+    ],
+    [avgPoints, p95Points]
+  );
+
+  const pointsByJob = useMemo(
+    () =>
+      allPoints.reduce((acc, point) => {
+        if (!acc[point.job_id]) acc[point.job_id] = {};
+        acc[point.job_id][point.series] = point;
+        return acc;
+      }, {}),
+    [allPoints]
+  );
+
+  const selectedPointSet = useMemo(() => pointsByJob[selectedRun?.job_id] || null, [pointsByJob, selectedRun]);
+  const selectedPoint = useMemo(
+    () => selectedPointSet?.avg_http_req_duration_ms || selectedPointSet?.p95_http_req_duration_ms || null,
+    [selectedPointSet]
+  );
+
+  const visibleAllPoints = useMemo(
+    () => allPoints.filter((point) => !!visibleSeries[point.lineClass] && point.job_id === selectedJobId),
+    [allPoints, visibleSeries, selectedJobId]
+  );
+
+  const visibleAvgPoints = useMemo(
+    () => (visibleSeries.avg ? avgPoints.filter((point) => point.job_id === selectedJobId) : []),
+    [avgPoints, visibleSeries.avg, selectedJobId]
+  );
+  const visibleP95Points = useMemo(
+    () => (visibleSeries.p95 ? p95Points.filter((point) => point.job_id === selectedJobId) : []),
+    [p95Points, visibleSeries.p95, selectedJobId]
+  );
+
+  function toggleSeries(lineClass) {
+    setVisibleSeries((prev) => ({ ...prev, [lineClass]: !prev[lineClass] }));
+    setHoveredPoint(null);
+  }
+
+  useEffect(() => {
+    setHoveredPoint(null);
+  }, [selectedRun?.job_id]);
+
+  function updateHover(point, event) {
+    if (!plotWrapRef.current) return;
+    const rect = plotWrapRef.current.getBoundingClientRect();
+    const x = Math.max(12, Math.min(rect.width - 12, event.clientX - rect.left + 12));
+    const y = Math.max(8, Math.min(rect.height - 8, event.clientY - rect.top - 10));
+    setHoveredPoint({ point, x, y });
+  }
+
+  const width = 860;
+  const height = 420;
+  const margin = { top: 26, right: 26, bottom: 50, left: 68 };
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.top - margin.bottom;
+
+  const xValues = visibleAllPoints.map((point) => point.duration);
+  const yValues = visibleAllPoints.map((point) => point.latency);
+
+  const xMinRaw = xValues.length ? Math.min(...xValues) : 0;
+  const xMaxRaw = xValues.length ? Math.max(...xValues) : 1;
+  const yMinRaw = yValues.length ? Math.min(...yValues) : 0;
+  const yMaxRaw = yValues.length ? Math.max(...yValues) : 1;
+
+  const xPad = Math.max((xMaxRaw - xMinRaw) * 0.12, 1);
+  const yPad = Math.max((yMaxRaw - yMinRaw) * 0.16, 4);
+
+  const xMin = xMinRaw - xPad;
+  const xMax = xMaxRaw + xPad;
+  const yMin = Math.max(0, yMinRaw - yPad);
+  const yMax = yMaxRaw + yPad;
+
+  const xFor = (v) => margin.left + ((v - xMin) / Math.max(0.0001, xMax - xMin)) * innerWidth;
+  const yFor = (v) => margin.top + (1 - (v - yMin) / Math.max(0.0001, yMax - yMin)) * innerHeight;
+
+  const yTicks = 5;
+  const xTicks = 5;
+
+  const yGrid = Array.from({ length: yTicks + 1 }, (_, i) => {
+    const ratio = i / yTicks;
+    const value = yMin + (yMax - yMin) * (1 - ratio);
+    const y = margin.top + innerHeight * ratio;
+    return { value, y };
+  });
+
+  const xGrid = Array.from({ length: xTicks + 1 }, (_, i) => {
+    const ratio = i / xTicks;
+    const value = xMin + (xMax - xMin) * ratio;
+    const x = margin.left + innerWidth * ratio;
+    return { value, x };
+  });
+
+  const avgLinePath = buildLinePath(visibleAvgPoints, xFor, yFor);
+  const p95LinePath = buildLinePath(visibleP95Points, xFor, yFor);
+  const runLookup = useMemo(
+    () =>
+      runs.reduce((acc, run) => {
+        acc[run.job_id] = run;
+        return acc;
+      }, {}),
+    [runs]
+  );
+
+  return html`
+    <div className="history-plot-layout">
+      <section className="card history-plot-main">
+        <div className="toolbar">
+          <h3>Duration vs Latency</h3>
+          <span className="pill">${visibleAllPoints.length}/${allPoints.length} points</span>
+        </div>
+        <p className="muted">Selected run only. X axis: elapsed second in this run. Y axis: latency (ms).</p>
+        <div className="plot-legend" aria-label="Latency series legend">
+          ${LATENCY_SERIES.map((item) => html`
+            <button
+              key=${item.key}
+              className=${`legend-chip ${visibleSeries[item.lineClass] ? "on" : "off"}`}
+              onClick=${() => toggleSeries(item.lineClass)}
+              aria-pressed=${visibleSeries[item.lineClass] ? "true" : "false"}
+              title=${visibleSeries[item.lineClass] ? `Hide ${item.title}` : `Show ${item.title}`}
+            >
+              <span className=${`legend-dot ${item.lineClass}`}></span>
+              ${item.title}
+            </button>
+          `)}
+        </div>
+
+        ${visibleAllPoints.length
+          ? html`
+              <div className="history-plot-wrap" ref=${plotWrapRef}>
+                <svg className="history-plot" viewBox=${`0 0 ${width} ${height}`} role="img" aria-label="Run duration vs latency chart">
+                  <defs>
+                    <filter id="point-glow" x="-80%" y="-80%" width="260%" height="260%">
+                      <feDropShadow dx="0" dy="0" stdDeviation="4" floodColor="#18a9c2" floodOpacity="0.62" />
+                    </filter>
+                  </defs>
+
+                  ${yGrid.map((tick, idx) => html`
+                    <g key=${`y-${idx}`}>
+                      <line x1=${margin.left} x2=${width - margin.right} y1=${tick.y} y2=${tick.y} className="plot-grid-line" />
+                      <text x=${margin.left - 12} y=${tick.y + 4} textAnchor="end" className="plot-axis-label">${tick.value.toFixed(0)}</text>
+                    </g>
+                  `)}
+
+                  ${xGrid.map((tick, idx) => html`
+                    <g key=${`x-${idx}`}>
+                      <line x1=${tick.x} x2=${tick.x} y1=${margin.top} y2=${height - margin.bottom} className="plot-grid-line vertical" />
+                      <text x=${tick.x} y=${height - margin.bottom + 22} textAnchor="middle" className="plot-axis-label">${tick.value.toFixed(0)}s</text>
+                    </g>
+                  `)}
+
+                  <line x1=${margin.left} x2=${width - margin.right} y1=${height - margin.bottom} y2=${height - margin.bottom} className="plot-axis" />
+                  <line x1=${margin.left} x2=${margin.left} y1=${margin.top} y2=${height - margin.bottom} className="plot-axis" />
+
+                  ${avgLinePath && html`<path d=${avgLinePath} fill="none" className="plot-line avg" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />`}
+                  ${p95LinePath && html`<path d=${p95LinePath} fill="none" className="plot-line p95" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />`}
+
+                  ${visibleAllPoints.map((point, idx) => {
+                    const selected = point.job_id === selectedRun?.job_id;
+                    const run = runLookup[point.job_id];
+                    return html`
+                      <g
+                        key=${`${point.job_id}-${point.series}-${point.duration}-${idx}`}
+                        className=${`plot-point-group ${selected ? "selected" : ""}`}
+                        onClick=${() => run && setSelectedRun(run)}
+                        onMouseEnter=${(event) => updateHover(point, event)}
+                        onMouseMove=${(event) => updateHover(point, event)}
+                        onMouseLeave=${() => setHoveredPoint(null)}
+                      >
+                        <circle
+                          cx=${xFor(point.duration)}
+                          cy=${yFor(point.latency)}
+                          r=${selected ? 8 : 5.2}
+                          className=${`plot-point ${point.lineClass}`}
+                          filter=${selected ? "url(#point-glow)" : undefined}
+                        />
+                      </g>
+                    `;
+                  })}
+
+                  <text x=${width / 2} y=${height - 10} textAnchor="middle" className="plot-title-label">Elapsed Time (s)</text>
+                  <text
+                    x="18"
+                    y=${height / 2}
+                    transform=${`rotate(-90 18 ${height / 2})`}
+                    textAnchor="middle"
+                    className="plot-title-label"
+                  >
+                    Latency (ms)
+                  </text>
+                </svg>
+                ${hoveredPoint && html`
+                  <div className="plot-tooltip" style=${{ left: `${hoveredPoint.x}px`, top: `${hoveredPoint.y}px` }}>
+                    <div><strong>${hoveredPoint.point.job_id}</strong></div>
+                    <div>Duration: ${hoveredPoint.point.duration}s</div>
+                    ${visibleSeries.avg && html`<div>Average: ${formatMs(runLookup[hoveredPoint.point.job_id]?.result?.metrics?.avg_http_req_duration_ms)}</div>`}
+                    ${visibleSeries.p95 && html`<div>P95: ${formatMs(runLookup[hoveredPoint.point.job_id]?.result?.metrics?.p95_http_req_duration_ms)}</div>`}
+                  </div>
+                `}
+              </div>
+            `
+          : html`
+              <div className="item muted">
+                ${selectedRun
+                  ? "This run has no per-second latency series yet (or both series are hidden). Re-run this test after backend restart to render line data."
+                  : "Select a history run from the right menu to render its own plot."}
+              </div>
+            `}
+
+        <div className="plot-run-summary">
+          <div className="item">
+            <div className="n">Selected Run</div>
+            <div className="v">${selectedPoint ? selectedPoint.job_id : "None"}</div>
+          </div>
+          <div className="item">
+            <div className="n">Duration</div>
+            <div className="v">${selectedRun?.result?.config?.duration_seconds ? `${selectedRun.result.config.duration_seconds}s` : "n/a"}</div>
+          </div>
+          <div className="item">
+            <div className="n">Average</div>
+            <div className="v">${selectedPointSet ? formatMs(selectedPointSet.avg_http_req_duration_ms?.latency) : "n/a"}</div>
+          </div>
+          <div className="item">
+            <div className="n">P95</div>
+            <div className="v">${selectedPointSet ? formatMs(selectedPointSet.p95_http_req_duration_ms?.latency) : "n/a"}</div>
+          </div>
+          <div className="item">
+            <div className="n">Virtual Users</div>
+            <div className="v">${selectedPoint && Number.isFinite(selectedPoint.vus) ? selectedPoint.vus : "n/a"}</div>
+          </div>
+        </div>
+      </section>
+
+      <aside className="card history-runs-panel">
+        <div className="toolbar">
+          <h3>History Runs</h3>
+          <button className="ghost" onClick=${refresh}>Refresh Runs</button>
+        </div>
+        <p className="muted">Scrollable run menu. Click one to focus the chart.</p>
+        <div className="list">
+          ${runs.length
+            ? runs.map((run) => {
+                const active = run.job_id === selectedRun?.job_id;
+                return html`
+                  <button
+                    key=${run.job_id}
+                    className=${`item run-focus-btn ${active ? "active" : ""}`}
+                    onClick=${() => setSelectedRun(run)}
+                  >
+                    <div className="toolbar">
+                      <strong>${run.job_id}</strong>
+                      ${statusPill(run.status)}
+                    </div>
+                    <div className="muted">duration=${run?.result?.config?.duration_seconds ?? "n/a"}s, vus=${run?.result?.config?.vus ?? "n/a"}</div>
+                    <div className="muted">avg=${formatMs(run?.result?.metrics?.avg_http_req_duration_ms)}, p95=${formatMs(run?.result?.metrics?.p95_http_req_duration_ms)}</div>
+                  </button>
+                `;
+              })
+            : html`<div className="item muted">No history runs yet. Start a run first.</div>`}
+        </div>
+      </aside>
+    </div>
+  `;
+}
+
 function App() {
   const [tab, setTab] = useState("Run Now");
   const [health, setHealth] = useState({ status: "checking", k6_installed: false });
@@ -1222,6 +1541,7 @@ function App() {
           ${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} selectedRun=${historyActiveRun} setSelectedRun=${setHistoryActiveRun} onRunAgain=${rerunHistoryRun} rerunBusy=${historyRerunBusy} rerunError=${historyRerunError} />`}
+          ${tab === "History Plot" && html`<${HistoryPlot} runs=${historyRuns} refresh=${loadHistory} selectedRun=${historyActiveRun} setSelectedRun=${setHistoryActiveRun} />`}
         </div>
       </div>
     </div>

{loaderup-0.1.3 → loaderup-0.1.4}/loader/web/assets/styles.css

@@ -399,6 +399,191 @@ textarea {
   border-color: rgba(15, 124, 144, 0.44);
 }
 
+.run-focus-btn {
+  width: 100%;
+  text-align: left;
+  display: block;
+  background: linear-gradient(180deg, #152130, #121c28);
+}
+
+.run-focus-btn.active {
+  border-color: rgba(24, 169, 194, 0.7);
+  box-shadow: 0 0 0 1px rgba(24, 169, 194, 0.26), 0 14px 24px rgba(0, 0, 0, 0.24);
+}
+
+.plot-legend {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0.3rem 0 0.2rem;
+  flex-wrap: wrap;
+}
+
+.legend-chip {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 1px solid var(--line);
+  background: rgba(14, 24, 36, 0.85);
+  border-radius: 999px;
+  padding: 0.24rem 0.5rem;
+  font-size: 0.75rem;
+  color: #c8d9eb;
+  box-shadow: none;
+}
+
+.legend-chip:hover {
+  transform: none;
+  box-shadow: none;
+  border-color: rgba(148, 179, 209, 0.65);
+}
+
+.legend-chip.off {
+  opacity: 0.55;
+}
+
+.legend-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+}
+
+.legend-dot.avg {
+  background: #22cce3;
+}
+
+.legend-dot.p95 {
+  background: #f5a164;
+}
+
+.history-plot-wrap {
+  margin-top: 0.35rem;
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(13, 22, 33, 0.82), rgba(12, 20, 30, 0.96));
+  overflow: hidden;
+}
+
+.history-plot {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.plot-grid-line {
+  stroke: rgba(156, 176, 200, 0.18);
+  stroke-width: 1;
+}
+
+.plot-grid-line.vertical {
+  stroke: rgba(156, 176, 200, 0.1);
+}
+
+.plot-axis {
+  stroke: rgba(180, 205, 232, 0.56);
+  stroke-width: 1.2;
+}
+
+.plot-axis-label {
+  fill: #a9bfd7;
+  font-size: 11px;
+  font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
+}
+
+.plot-title-label {
+  fill: #c8d9eb;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.plot-point-group {
+  cursor: pointer;
+}
+
+.plot-line.avg {
+  stroke: #22cce3;
+}
+
+.plot-line.p95 {
+  stroke: #f5a164;
+}
+
+.plot-point {
+  stroke: rgba(12, 20, 32, 0.84);
+  stroke-width: 2;
+  transition: transform 120ms ease, fill 120ms ease;
+}
+
+.plot-point.avg {
+  fill: #18a9c2;
+}
+
+.plot-point.p95 {
+  fill: #f08d53;
+}
+
+.plot-point-group:hover .plot-point {
+  fill: #ffc88f;
+}
+
+.plot-point-group.selected .plot-point.avg {
+  fill: #18d4ec;
+}
+
+.plot-point-group.selected .plot-point.p95 {
+  fill: #ffc88f;
+}
+
+.plot-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  pointer-events: none;
+  z-index: 4;
+  min-width: 180px;
+  max-width: min(280px, 70vw);
+  border: 1px solid rgba(173, 202, 231, 0.35);
+  border-radius: 12px;
+  padding: 0.45rem 0.56rem;
+  background: rgba(8, 16, 24, 0.94);
+  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.32);
+  color: #dceafb;
+  font-size: 0.77rem;
+  line-height: 1.45;
+}
+
+.plot-run-summary {
+  margin-top: 0.8rem;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.62rem;
+}
+
+.history-plot-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 0.9rem;
+  align-items: start;
+}
+
+.history-plot-main {
+  min-width: 0;
+}
+
+.history-runs-panel {
+  position: sticky;
+  top: 1rem;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+}
+
+.history-runs-panel .list {
+  overflow-y: auto;
+  padding-right: 0.18rem;
+}
+
 .metrics {
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
 }
@@ -547,6 +732,23 @@ pre {
   .grid-3 {
     grid-template-columns: 1fr;
   }
+
+  .history-plot-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .history-runs-panel {
+    position: static;
+    max-height: none;
+  }
+
+  .history-runs-panel .list {
+    max-height: 360px;
+  }
+
+  .plot-run-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (max-width: 760px) {
@@ -574,6 +776,10 @@ pre {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .plot-run-summary {
+    grid-template-columns: 1fr;
+  }
+
   .topbar,
   .card,
   .kpi-card {

{loaderup-0.1.3 → loaderup-0.1.4}/loader/web/index.html

@@ -7,10 +7,10 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/assets/styles.css?v=20260418o">
+  <link rel="stylesheet" href="/assets/styles.css?v=20260423a">
 </head>
 <body>
   <div id="root"></div>
-  <script type="module" src="/assets/app.js?v=20260418o"></script>
+  <script type="module" src="/assets/app.js?v=20260423a"></script>
 </body>
 </html>

{loaderup-0.1.3 → loaderup-0.1.4}/loaderup/cli.py

@@ -174,7 +174,7 @@ def build_parser():
         help="Comma-separated Python modules to import for decorators, e.g. demo_registry_targets",
     )
     up_parser.add_argument("--host", default="127.0.0.1")
-    up_parser.add_argument("--port", type=int, default=8000)
+    up_parser.add_argument("--port", type=int, default=5050)
     up_parser.add_argument("--reload", action="store_true")
     up_parser.add_argument(
         "--open-browser",

{loaderup-0.1.3 → loaderup-0.1.4}/loaderup.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: loaderup
-Version: 0.1.3
+Version: 0.1.4
 Summary: Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-based target registration.
 Author: Mahdi Haroun
 License: MIT
@@ -33,7 +33,7 @@ Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-bas
 
 - Python `>=3.12`
 - `uv` (recommended package manager)
-- `k6` (optional but recommended for real load runs)
+- `k6` 
 
 ## Install
 
@@ -47,7 +47,7 @@ uv pip install -e .
 python -m loader.main
 ```
 
-Server starts on `http://127.0.0.1:8000` by default.
+Server starts on `http://127.0.0.1:5050` by default.
 
 ## Run via CLI
 
@@ -55,7 +55,7 @@ Server starts on `http://127.0.0.1:8000` by default.
 python -m loaderup.cli up --app loader.main:app --targets loader.demo_registry_target --reload
 ```
 
-This command opens the dashboard automatically at `http://127.0.0.1:8000/`.
+This command opens the dashboard automatically at `http://127.0.0.1:5050/`.
 Use `--no-open-browser` if you want to disable auto-open.
 
 You can also use fallback-friendly forms like:
@@ -64,10 +64,75 @@ You can also use fallback-friendly forms like:
 python -m loaderup.cli up --app main:app --targets demo_registry_targets --reload
 ```
 
+## Using the decorator with FastAPI
+
+Create your FastAPI app as usual:
+
+```python
+# main.py
+from fastapi import FastAPI
+
+app = FastAPI()
+
+
+@app.get("/")
+def home():
+    return {"message": "ok"}
+
+
+@app.post("/users")
+def create_user(payload: dict):
+    return {"id": 1, **payload}
+```
+
+Then create a module with the load targets you want LoaderUp to test. The decorated functions do not need to call your route handlers; importing this module registers the target metadata.
+
+```python
+# targets.py
+from loaderup import load_target
+
+
+@load_target(
+    name="home page",
+    method="GET",
+    path="/",
+    expected_status=200,
+    tags=["public"],
+)
+def home_page():
+    pass
+
+
+@load_target(
+    name="create user",
+    method="POST",
+    path="/users",
+    payload_example={"name": "Ada"},
+    expected_status=200,
+    tags=["users"],
+)
+def create_user():
+    pass
+```
+
+Start LoaderUp and tell it to import the target module:
+
+```bash
+python -m loaderup.cli up --app main:app --targets targets --reload
+```
+
+Run all decorator-registered targets against your FastAPI app:
+
+```bash
+curl -X POST http://127.0.0.1:5050/run/registry \
+  -H 'Content-Type: application/json' \
+  -d '{"base_url":"http://127.0.0.1:5050","vus":10,"duration_seconds":30}'
+```
+
 ## Health check
 
 ```bash
-curl http://127.0.0.1:8000/health
+curl http://127.0.0.1:5050/health
 ```
 
 ## Dashboard
@@ -75,7 +140,7 @@ curl http://127.0.0.1:8000/health
 Open:
 
 ```bash
-http://127.0.0.1:8000/
+http://127.0.0.1:5050/
 ```
 
 Dashboard includes:

{loaderup-0.1.3 → loaderup-0.1.4}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "loaderup"
-version = "0.1.3"
+version = "0.1.4"
 description = "Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-based target registration."
 readme = "README.md"
 requires-python = ">=3.12"

loaderup-0.1.3/README.md

@@ -1,65 +0,0 @@
-# LoaderUp
-
-Lightweight load-testing API and CLI built around FastAPI, k6, and decorator-based target registration.
-
-## Requirements
-
-- Python `>=3.12`
-- `uv` (recommended package manager)
-- `k6` (optional but recommended for real load runs)
-
-## Install
-
-```bash
-uv pip install -e .
-```
-
-## Run API directly
-
-```bash
-python -m loader.main
-```
-
-Server starts on `http://127.0.0.1:8000` by default.
-
-## Run via CLI
-
-```bash
-python -m loaderup.cli up --app loader.main:app --targets loader.demo_registry_target --reload
-```
-
-This command opens the dashboard automatically at `http://127.0.0.1:8000/`.
-Use `--no-open-browser` if you want to disable auto-open.
-
-You can also use fallback-friendly forms like:
-
-```bash
-python -m loaderup.cli up --app main:app --targets demo_registry_targets --reload
-```
-
-## Health check
-
-```bash
-curl http://127.0.0.1:8000/health
-```
-
-## Dashboard
-
-Open:
-
-```bash
-http://127.0.0.1:8000/
-```
-
-Dashboard includes:
-
-- live status + progress stream
-- metrics cards + quick chart bars
-- saved run history (persisted in `artifacts/history/runs.jsonl`)
-- React-based multi-tab control center (`Run Now`, `Live`, `Registered Targets`, `History`)
-
-## Notes
-
-- Registry targets are loaded when the module is imported.
-- Use `/run/targets` to submit explicit targets.
-- Use `/run/registry` to run all decorator-registered targets.