loki-mode 7.10.1 → 7.12.0

package/autonomy/run.sh

@@ -4121,6 +4121,69 @@ generate_proof_of_run() {
     return 0
 }
 
+# print_ttfv_next_steps: R7 zero-config first-run "what next / go deeper"
+# message. The wording MUST match what actually ran, so it branches on the mode:
+#   - brief: a one-line brief ran on the lightweight profile (council off,
+#            simple tier, capped iterations). Proof contains diffs, cost, time
+#            (council verdicts are absent because the council was disabled).
+#   - repo:  a no-arg in-repo run analyzed the codebase and ran at full depth
+#            (council on). Proof contains diffs, cost, time, and council
+#            verdicts.
+# This function only prints; the caller owns the TTY gate. Never fails the run.
+# Usage: print_ttfv_next_steps <mode> <result>
+print_ttfv_next_steps() {
+    local mode="${1:-}"
+    local result="${2:-0}"
+    local loki_dir="${TARGET_DIR:-.}/.loki"
+    local proofs_dir="$loki_dir/proofs"
+
+    echo ""
+    echo "============================================================"
+    if [ "$result" = "0" ]; then
+        echo "  First pass complete. Here is what you have:"
+    else
+        echo "  First pass ended early. Here is what was produced:"
+    fi
+    echo "============================================================"
+    echo ""
+    echo "  What I did:"
+    if [ "$mode" = "brief" ]; then
+        echo "    - Worked from your one-line brief on a fast, lightweight first"
+        echo "      pass (council off, simple tier, capped iterations)."
+        echo "    - Generated a proof-of-run (diffs, cost, time)."
+    else
+        echo "    - Analyzed your codebase and generated a PRD, then ran a full"
+        echo "      first pass (council on, full RARV-C depth)."
+        echo "    - Generated a proof-of-run (diffs, cost, time, council verdicts)."
+    fi
+    echo ""
+    echo "  See the visible artifact (proof-of-run):"
+    if [ -d "$proofs_dir" ]; then
+        local latest
+        latest=$(ls -1t "$proofs_dir" 2>/dev/null | head -1)
+        if [ -n "$latest" ]; then
+            echo "    loki proof open $latest"
+            echo "    (or open $proofs_dir/$latest/index.html)"
+        else
+            echo "    loki proof list"
+        fi
+    else
+        echo "    loki proof list"
+    fi
+    echo ""
+    if [ "$mode" = "brief" ]; then
+        echo "  Go deeper (full RARV-C depth, council-gated):"
+        echo "    loki start                 # continue / harden this project"
+        echo "    loki start ./prd.md        # build from a full PRD"
+    else
+        echo "  Next steps:"
+        echo "    loki start ./prd.md        # build from a full PRD"
+        echo "    loki start \"<one line>\"    # fast first pass from a brief"
+    fi
+    echo ""
+    return 0
+}
+
 track_iteration_complete() {
     local iteration="$1"
     local exit_code="${2:-0}"
@@ -8416,6 +8479,28 @@ BUDGETUPD_EOF
 BUDGETUPD_EOF
     fi
 
+    # Anti-surprise-cost warn (R3): when spend crosses 80% of the cap but is
+    # still under 100%, log a warning and emit an event. Does NOT pause: the
+    # warn is the transparency the user wants BEFORE the hard cap stops them.
+    # Read-time classification only; budget.json schema is unchanged.
+    local warn
+    warn=$(python3 -c "
+import sys
+try:
+    cost = float(sys.argv[1]); limit = float(sys.argv[2])
+    print(1 if (limit > 0 and 0.80 * limit <= cost < limit) else 0)
+except (ValueError, IndexError):
+    print(0)
+" "$current_cost" "$BUDGET_LIMIT" 2>/dev/null || echo "0")
+    if [[ "$warn" == "1" ]]; then
+        log_warn "BUDGET WARNING: \$${current_cost} is at or above 80% of cap \$${BUDGET_LIMIT}. Run continues; hard-stop at 100%."
+        emit_event_json "budget_warning" \
+            "limit=${BUDGET_LIMIT}" \
+            "current=${current_cost}" \
+            "threshold_percent=80" \
+            "iteration=${ITERATION_COUNT:-0}"
+    fi
+
     return 1
 }
 
@@ -13313,6 +13398,15 @@ main() {
         generate_proof_of_run "$result" || true
     fi
 
+    # R7 (zero-config first run): "what next / go deeper" framing. Only when the
+    # CLI flagged this as a TTFV first run and stdout is a TTY, so it stays
+    # silent in CI / pipes and never fires for normal PRD runs. The wording
+    # branches on the mode (brief = lightweight first pass; repo = full-depth
+    # codebase analysis) so the message always matches what actually ran.
+    if [ -n "${LOKI_TTFV:-}" ] && [ -t 1 ]; then
+        print_ttfv_next_steps "${LOKI_TTFV}" "$result" || true
+    fi
+
     # Create PR from agent branch if branch protection was enabled
     create_session_pr
     audit_agent_action "session_stop" "Session ended" "result=$result,iterations=$ITERATION_COUNT"

package/dashboard/__init__.py

@@ -7,7 +7,7 @@ Modules:
     control: Session control API (start/stop/pause/resume)
 """
 
-__version__ = "7.10.1"
+__version__ = "7.12.0"
 
 # Expose the control app for easy import
 try:

package/dashboard/server.py

@@ -459,6 +459,7 @@ async def _push_loki_state_loop() -> None:
     """
     last_mtime: float = 0.0
     _last_skill_hash: str = ""  # Track skill-session state changes
+    _last_budget_status: str = ""  # Track budget-status transitions (R3)
     while True:
         try:
             if not manager.active_connections:
@@ -469,6 +470,26 @@ async def _push_loki_state_loop() -> None:
             state_file = loki_dir / "dashboard-state.json"
             _session_file = loki_dir / "session.json"
 
+            # R3 anti-surprise-cost: proactively push a budget_status message
+            # when spend crosses a threshold (ok -> warn -> exceeded), so a user
+            # who is not watching the terminal sees the 80% warning in any open
+            # dashboard page BEFORE the hard stop at 100%. Reuses the existing
+            # WebSocket broadcast path (manager.broadcast); no second channel.
+            # Sent on transition (independent of the dashboard-state.json mtime
+            # gate) because budget can cross 80% while that file is unchanged.
+            try:
+                _budget = _compute_budget_snapshot(loki_dir)
+                _bstatus = _budget.get("status", "none")
+                if _bstatus in ("warn", "exceeded") and _bstatus != _last_budget_status:
+                    await manager.broadcast({
+                        "type": "budget_status",
+                        "data": _budget,
+                    })
+                # Track every status so a return to ok/none re-arms the warn push.
+                _last_budget_status = _bstatus
+            except (OSError, ValueError, KeyError):
+                pass
+
             _broadcast_sent = False
 
             if state_file.exists():
@@ -4551,6 +4572,214 @@ async def get_budget():
     }
 
 
+# Budget warn threshold: surface a "warn" status before the hard cap so users
+# are not surprised by a bill. Matches the runtime warn in run.sh
+# check_budget_limit() and budget.ts (warn at 80%, hard-stop at 100%).
+_BUDGET_WARN_FRACTION = 0.80
+
+
+def _budget_status(used: float, limit: Optional[float]) -> str:
+    """Classify budget usage. Read-time only; no state mutation.
+
+    Returns one of: "none" (no limit set), "ok" (<80%), "warn" (>=80% and
+    <100%), "exceeded" (>=100%). The warn band is the anti-surprise wedge:
+    the user sees it BEFORE the hard cap pauses the run.
+    """
+    if limit is None or limit <= 0:
+        return "none"
+    if used >= limit:
+        return "exceeded"
+    if used >= _BUDGET_WARN_FRACTION * limit:
+        return "warn"
+    return "ok"
+
+
+def _compute_budget_snapshot(loki_dir: _Path) -> dict:
+    """Read-time budget snapshot shared by /api/cost/timeline and the WS push.
+
+    Single source of truth so the proactive WebSocket broadcast and the pull
+    endpoint never disagree. "used" is the current run's spend (sum of the live
+    .loki/metrics/efficiency/iteration-*.json records, mirroring
+    check_budget_limit in run.sh). The cap comes from budget.json, falling back
+    to the LOKI_BUDGET_LIMIT env var. No state is mutated.
+    """
+    efficiency_dir = loki_dir / "metrics" / "efficiency"
+    budget_file = loki_dir / "metrics" / "budget.json"
+
+    current_total = 0.0
+    if efficiency_dir.exists():
+        for eff_file in sorted(efficiency_dir.glob("iteration-*.json")):
+            data = _safe_json_read(eff_file, default=None)
+            if not isinstance(data, dict):
+                continue
+            inp = data.get("input_tokens", 0) or 0
+            out = data.get("output_tokens", 0) or 0
+            model = str(data.get("model", "sonnet")).lower()
+            cost = data.get("cost_usd")
+            if cost is None:
+                cost = _calculate_model_cost(model, inp, out)
+            else:
+                try:
+                    cost = float(cost)
+                except (TypeError, ValueError):
+                    cost = 0.0
+            current_total += cost
+
+    budget_limit = None
+    if budget_file.exists():
+        bdata = _safe_json_read(budget_file, default=None)
+        if isinstance(bdata, dict):
+            budget_limit = bdata.get("limit") or bdata.get("budget_limit")
+    if budget_limit is None:
+        env_limit = os.environ.get("LOKI_BUDGET_LIMIT", "")
+        if env_limit:
+            try:
+                budget_limit = float(env_limit)
+            except ValueError:
+                budget_limit = None
+    if budget_limit is not None:
+        try:
+            budget_limit = float(budget_limit)
+        except (TypeError, ValueError):
+            budget_limit = None
+
+    used = round(current_total, 6)
+    if budget_limit is not None and budget_limit > 0:
+        remaining = max(0.0, budget_limit - used)
+        percent_used = round((used / budget_limit) * 100, 2)
+    else:
+        remaining = None
+        percent_used = None
+    status = _budget_status(used, budget_limit)
+
+    return {
+        "limit": budget_limit,
+        "used": used,
+        "remaining": round(remaining, 6) if remaining is not None else None,
+        "percent_used": percent_used,
+        "status": status,
+        "warn_threshold_percent": int(_BUDGET_WARN_FRACTION * 100),
+        "exceeded": status == "exceeded",
+    }
+
+
+@app.get("/api/cost/timeline")
+async def get_cost_timeline():
+    """Cost over time: intra-run per-iteration series + per-run history.
+
+    Two honest series, distinct sources (see docs/R3-COST-OBSERVABILITY-DESIGN.md):
+      - current_run: from .loki/metrics/efficiency/iteration-*.json. This dir is
+        wiped at the start of every run (run.sh), so it only ever holds the
+        CURRENT run's iterations. Used for the intra-run cumulative line.
+      - runs: from .loki/proofs/<run_id>/proof.json (persistent, one per run).
+        This is the real per-run/per-project "cost over time" history.
+
+    Budget status is computed at read time (no budget.json schema change) and
+    classifies into ok/warn/exceeded so the UI can warn at 80% before the cap.
+    Cost is never fabricated: when nothing was recorded, cost_recorded is False
+    and totals are honestly null rather than a misleading $0.00.
+    """
+    loki_dir = _get_loki_dir()
+    efficiency_dir = loki_dir / "metrics" / "efficiency"
+
+    # --- current run: per-iteration series from efficiency/ -----------------
+    iterations: list = []
+    current_total = 0.0
+    cost_recorded = False
+    if efficiency_dir.exists():
+        records = []
+        for eff_file in sorted(efficiency_dir.glob("iteration-*.json")):
+            data = _safe_json_read(eff_file, default=None)
+            if not isinstance(data, dict):
+                continue
+            records.append(data)
+        # Sort by numeric iteration when present, else by filename order.
+        def _iter_key(d):
+            try:
+                return int(d.get("iteration", 0))
+            except (TypeError, ValueError):
+                return 0
+        records.sort(key=_iter_key)
+        cumulative = 0.0
+        for data in records:
+            cost_recorded = True
+            inp = data.get("input_tokens", 0) or 0
+            out = data.get("output_tokens", 0) or 0
+            model = str(data.get("model", "sonnet")).lower()
+            cost = data.get("cost_usd")
+            if cost is None:
+                cost = _calculate_model_cost(model, inp, out)
+            else:
+                try:
+                    cost = float(cost)
+                except (TypeError, ValueError):
+                    cost = 0.0
+            cumulative += cost
+            iterations.append({
+                "iteration": data.get("iteration"),
+                "timestamp": data.get("timestamp"),
+                "model": model,
+                "phase": data.get("phase", "unknown"),
+                "provider": data.get("provider"),
+                "input_tokens": inp,
+                "output_tokens": out,
+                "cost_usd": round(cost, 6),
+                "cumulative_usd": round(cumulative, 6),
+            })
+        current_total = cumulative
+
+    # --- per-run history: from .loki/proofs/*/proof.json --------------------
+    runs: list = []
+    project_total = 0.0
+    proofs_dir = _proofs_dir()
+    try:
+        entries = sorted(proofs_dir.iterdir())
+    except (OSError, FileNotFoundError):
+        entries = []
+    for entry in entries:
+        if not entry.is_dir():
+            continue
+        data = _safe_json_read(entry / "proof.json", default=None)
+        if not isinstance(data, dict):
+            continue
+        run_cost = (data.get("cost") or {}).get("usd")
+        run_cost_num = None
+        if run_cost is not None:
+            try:
+                run_cost_num = float(run_cost)
+                project_total += run_cost_num
+            except (TypeError, ValueError):
+                run_cost_num = None
+        runs.append({
+            "run_id": data.get("run_id", entry.name),
+            "generated_at": data.get("generated_at"),
+            "model": (data.get("provider") or {}).get("model"),
+            "cost_usd": round(run_cost_num, 6) if run_cost_num is not None else None,
+            "files_changed": (data.get("files_changed") or {}).get("count"),
+            "final_verdict": (data.get("council") or {}).get("final_verdict"),
+        })
+    runs.sort(key=lambda x: (x.get("generated_at") or ""), reverse=True)
+
+    # --- budget block (read-time status; no mutation) -----------------------
+    # Shared snapshot so the pull endpoint and the proactive WS push agree.
+    # Budget "used" is the current run's spend (mirrors check_budget_limit,
+    # which sums the live efficiency dir against the cap). The per-project
+    # history total is reported separately as project_total_usd.
+    budget = _compute_budget_snapshot(loki_dir)
+
+    return {
+        "current_run": {
+            "iterations": iterations,
+            "total_usd": round(current_total, 6) if cost_recorded else None,
+            "cost_recorded": cost_recorded,
+        },
+        "runs": runs,
+        "runs_count": len(runs),
+        "project_total_usd": round(project_total, 6) if runs else 0.0,
+        "budget": budget,
+    }
+
+
 # =============================================================================
 # Pricing API
 # =============================================================================
@@ -6428,6 +6657,19 @@ async def serve_favicon():
     return Response(status_code=404)
 
 
+# Serve the self-contained cost + observability panel (R3). Zero-build
+# standalone page that fetches /api/cost/timeline. Mirrors the proofs.html
+# pattern: works without the SPA build.
+@app.get("/cost", include_in_schema=False)
+async def serve_cost_panel():
+    """Serve the standalone cost + observability HTML panel."""
+    if STATIC_DIR:
+        cost_path = os.path.join(STATIC_DIR, "cost.html")
+        if os.path.isfile(cost_path):
+            return FileResponse(cost_path, media_type="text/html")
+    return Response(status_code=404)
+
+
 # Serve index.html or standalone HTML for root
 @app.get("/", include_in_schema=False)
 async def serve_index():

package/dashboard/static/cost.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<!--
+  Loki Mode - Cost + observability panel (R3, zero-build standalone).
+
+  Self-contained: all CSS + JS inlined, no external resources. Fetches
+  /api/cost/timeline and renders project total, a budget gauge that warns at
+  80% (before the hard cap at 100%), per-run cost history, model-routing
+  breakdown, and an inline-SVG cumulative-cost line for the current run.
+
+  Anti-surprise-cost wedge: cost is shown transparently. Uncollected cost is
+  shown as "not recorded", never a fabricated $0.00.
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Loki Mode - Cost and Observability</title>
+<style>
+  :root {
+    --bg: #0f1115; --panel: #171a21; --panel-2: #1d2129; --border: #2a2f3a;
+    --text: #e7e9ee; --muted: #9aa1ad; --faint: #6b7280; --accent: #6f7bf7;
+    --green: #34d399; --red: #f87171; --amber: #fbbf24;
+    --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
+    --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.5; }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .wrap { max-width: 960px; margin: 0 auto; padding: 40px 20px 80px; }
+  .head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
+  h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.3px; margin: 0; }
+  h2 { font-size: 15px; font-weight: 600; color: var(--muted); margin: 30px 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .head a { font-size: 13px; }
+  .sub { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
+  .cards { display: flex; gap: 14px; flex-wrap: wrap; }
+  .card { flex: 1 1 200px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
+  .card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
+  .card .val { font-family: var(--mono); font-size: 26px; font-weight: 650; margin-top: 6px; }
+  .card .note { color: var(--faint); font-size: 12px; margin-top: 4px; }
+  .gauge { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-top: 14px; }
+  .gauge .top { display: flex; justify-content: space-between; align-items: baseline; }
+  .gauge .pct { font-family: var(--mono); font-weight: 650; font-size: 18px; }
+  .bar { position: relative; height: 14px; background: var(--panel-2); border-radius: 8px; margin: 12px 0 6px; overflow: hidden; }
+  .bar .fill { height: 100%; border-radius: 8px; transition: width .3s; }
+  .bar .warnline { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--amber); left: 80%; }
+  .fill.ok { background: var(--green); }
+  .fill.warn { background: var(--amber); }
+  .fill.exceeded { background: var(--red); }
+  .status { font-size: 13px; margin-top: 8px; }
+  .status.ok { color: var(--green); }
+  .status.warn { color: var(--amber); }
+  .status.exceeded { color: var(--red); }
+  .status.none { color: var(--muted); }
+  .cap-note { color: var(--faint); font-size: 12px; margin-top: 6px; }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
+  th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
+  td.num, th.num { text-align: right; font-family: var(--mono); }
+  .badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); }
+  .b-approve { color: var(--green); border-color: rgba(52,211,153,0.4); }
+  .b-reject { color: var(--red); border-color: rgba(248,113,113,0.4); }
+  .b-concern { color: var(--amber); border-color: rgba(251,191,36,0.4); }
+  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
+  .empty { color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: center; }
+  .empty code { font-family: var(--mono); color: var(--text); background: var(--panel-2); padding: 2px 6px; border-radius: 5px; }
+  .mono { font-family: var(--mono); }
+  .muted { color: var(--muted); }
+  svg { display: block; width: 100%; height: 140px; }
+  .modelrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
+  .modelrow .name { width: 130px; font-size: 13px; }
+  .modelrow .mbar { flex: 1; height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; }
+  .modelrow .mbar .mfill { height: 100%; background: var(--accent); border-radius: 6px; }
+  .modelrow .mval { width: 90px; text-align: right; font-family: var(--mono); font-size: 13px; }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="head">
+    <h1>Cost and Observability</h1>
+    <a href="/">Back to dashboard</a>
+  </div>
+  <p class="sub">Transparent cost: per-run and per-project spend, model routing, token burn, and budget caps that warn before they stop. No surprise bills.</p>
+  <div id="content"><p class="sub">Loading...</p></div>
+</div>
+<script>
+(function () {
+  "use strict";
+  function esc(s) {
+    s = (s === null || s === undefined) ? "" : String(s);
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  function fmtUsd(n) {
+    if (n === null || n === undefined) return "not recorded";
+    n = Number(n);
+    if (!isFinite(n)) return "not recorded";
+    var s = n.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+    if (s.indexOf(".") === -1) s += ".00";
+    else if (s.split(".")[1].length === 1) s += "0";
+    return "$" + s;
+  }
+  function badgeClass(v) {
+    v = String(v || "").toUpperCase();
+    if (v.indexOf("APPROVE") === 0 || v === "PASS" || v === "PASSED") return "b-approve";
+    if (v.indexOf("REJECT") === 0 || v.indexOf("BLOCK") === 0 || v === "FAIL") return "b-reject";
+    if (v.indexOf("CONCERN") === 0) return "b-concern";
+    return "";
+  }
+  function statusText(st) {
+    if (st === "exceeded") return "Budget cap reached. The run is paused to prevent a surprise bill.";
+    if (st === "warn") return "Approaching budget cap (80% or more used). Warning only, the run continues.";
+    if (st === "ok") return "Within budget.";
+    return "No budget cap set. Set LOKI_BUDGET_LIMIT to cap spend.";
+  }
+
+  function renderBudget(b) {
+    if (!b) return "";
+    var html = '<h2>Budget</h2>';
+    if (b.limit === null || b.limit === undefined) {
+      html += '<div class="panel"><div class="status none">' + statusText("none") + '</div>' +
+        '<div class="cap-note">When a cap is set, Loki warns at 80% and hard-stops at 100%.</div></div>';
+      return html;
+    }
+    var pct = (b.percent_used === null || b.percent_used === undefined) ? 0 : Number(b.percent_used);
+    var fillPct = Math.max(0, Math.min(100, pct));
+    var st = esc(b.status || "ok");
+    html += '<div class="gauge">' +
+      '<div class="top"><span class="muted">' + fmtUsd(b.used) + ' of ' + fmtUsd(b.limit) + ' used</span>' +
+      '<span class="pct">' + pct.toFixed(1) + '%</span></div>' +
+      '<div class="bar"><div class="fill ' + st + '" style="width:' + fillPct + '%"></div>' +
+      '<div class="warnline" title="80% warn threshold"></div></div>' +
+      '<div class="status ' + st + '">' + statusText(b.status) + '</div>' +
+      '<div class="cap-note">Remaining: ' + fmtUsd(b.remaining) +
+      '. Warns at ' + esc(b.warn_threshold_percent) + '%, hard-stops at 100%.</div>' +
+      '</div>';
+    return html;
+  }
+
+  function renderModelBreakdown(runs) {
+    // Aggregate per-run cost by model for routing visibility.
+    var byModel = {};
+    var total = 0;
+    for (var i = 0; i < runs.length; i++) {
+      var m = runs[i].model || "unknown";
+      var c = runs[i].cost_usd;
+      if (c === null || c === undefined) continue;
+      c = Number(c);
+      if (!isFinite(c)) continue;
+      byModel[m] = (byModel[m] || 0) + c;
+      total += c;
+    }
+    var keys = Object.keys(byModel);
+    if (keys.length === 0) return "";
+    keys.sort(function (a, b) { return byModel[b] - byModel[a]; });
+    var html = '<h2>Model routing (by spend)</h2><div class="panel">';
+    for (var k = 0; k < keys.length; k++) {
+      var name = keys[k];
+      var val = byModel[name];
+      var w = total > 0 ? (val / total * 100) : 0;
+      html += '<div class="modelrow"><span class="name mono">' + esc(name) + '</span>' +
+        '<span class="mbar"><span class="mfill" style="width:' + w.toFixed(1) + '%"></span></span>' +
+        '<span class="mval">' + fmtUsd(val) + '</span></div>';
+    }
+    html += '</div>';
+    return html;
+  }
+
+  function renderCurrentRun(cr) {
+    var html = '<h2>Current run (cost over iterations)</h2>';
+    if (!cr || !cr.cost_recorded || !cr.iterations || cr.iterations.length === 0) {
+      html += '<div class="empty">No iteration cost recorded for the current run yet.' +
+        ' Cost appears once a run produces efficiency records.</div>';
+      return html;
+    }
+    var its = cr.iterations;
+    // Inline SVG cumulative line.
+    var W = 900, H = 140, pad = 8;
+    var maxCum = 0;
+    for (var i = 0; i < its.length; i++) {
+      var cv = Number(its[i].cumulative_usd) || 0;
+      if (cv > maxCum) maxCum = cv;
+    }
+    if (maxCum <= 0) maxCum = 1;
+    var pts = [];
+    for (var j = 0; j < its.length; j++) {
+      var x = its.length === 1 ? W / 2 : pad + (j / (its.length - 1)) * (W - 2 * pad);
+      var y = H - pad - ((Number(its[j].cumulative_usd) || 0) / maxCum) * (H - 2 * pad);
+      pts.push(x.toFixed(1) + "," + y.toFixed(1));
+    }
+    var poly = '<svg viewBox="0 0 ' + W + ' ' + H + '" preserveAspectRatio="none">' +
+      '<polyline fill="none" stroke="#6f7bf7" stroke-width="2" points="' + pts.join(" ") + '"/>' +
+      '</svg>';
+    html += '<div class="panel"><div class="muted" style="font-size:13px;margin-bottom:6px;">' +
+      'Cumulative spend this run: <span class="mono">' + fmtUsd(cr.total_usd) + '</span></div>' +
+      poly + '</div>';
+    // Per-iteration table.
+    var rows = "";
+    for (var r = 0; r < its.length; r++) {
+      var it = its[r];
+      rows += '<tr><td class="num mono">' + esc(it.iteration) + '</td>' +
+        '<td class="mono">' + esc(it.model) + '</td>' +
+        '<td>' + esc(it.phase) + '</td>' +
+        '<td class="num">' + esc(it.input_tokens) + '</td>' +
+        '<td class="num">' + esc(it.output_tokens) + '</td>' +
+        '<td class="num mono">' + fmtUsd(it.cost_usd) + '</td>' +
+        '<td class="num mono">' + fmtUsd(it.cumulative_usd) + '</td></tr>';
+    }
+    html += '<table style="margin-top:14px;"><thead><tr>' +
+      '<th class="num">Iter</th><th>Model</th><th>Phase</th>' +
+      '<th class="num">Input tok</th><th class="num">Output tok</th>' +
+      '<th class="num">Cost</th><th class="num">Cumulative</th>' +
+      '</tr></thead><tbody>' + rows + '</tbody></table>';
+    return html;
+  }
+
+  function renderRuns(runs) {
+    var html = '<h2>Run history (per-run cost)</h2>';
+    if (!runs || runs.length === 0) {
+      html += '<div class="empty">No completed runs yet. Per-run cost history' +
+        ' comes from proof-of-run artifacts (<code>.loki/proofs/</code>).</div>';
+      return html;
+    }
+    var rows = "";
+    for (var i = 0; i < runs.length; i++) {
+      var p = runs[i];
+      var verdict = p.final_verdict ?
+        '<span class="badge ' + badgeClass(p.final_verdict) + '">' + esc(p.final_verdict) + '</span>' : '';
+      rows += '<tr><td class="mono">' + esc(p.run_id) + '</td>' +
+        '<td class="muted">' + esc(p.generated_at || "") + '</td>' +
+        '<td class="mono">' + esc(p.model || "") + '</td>' +
+        '<td class="num">' + (p.files_changed === null || p.files_changed === undefined ? "" : esc(p.files_changed)) + '</td>' +
+        '<td>' + verdict + '</td>' +
+        '<td class="num mono">' + fmtUsd(p.cost_usd) + '</td></tr>';
+    }
+    html += '<table><thead><tr>' +
+      '<th>Run</th><th>When</th><th>Model</th><th class="num">Files</th>' +
+      '<th>Verdict</th><th class="num">Cost</th>' +
+      '</tr></thead><tbody>' + rows + '</tbody></table>';
+    return html;
+  }
+
+  function render(d) {
+    var c = document.getElementById("content");
+    var b = d.budget || {};
+    var cards = '<div class="cards">' +
+      '<div class="card"><div class="label">Project total</div>' +
+        '<div class="val">' + fmtUsd(d.project_total_usd) + '</div>' +
+        '<div class="note">' + esc(d.runs_count) + ' run(s) recorded</div></div>' +
+      '<div class="card"><div class="label">Current run</div>' +
+        '<div class="val">' + fmtUsd(d.current_run ? d.current_run.total_usd : null) + '</div>' +
+        '<div class="note">' + (d.current_run && d.current_run.iterations ? d.current_run.iterations.length : 0) + ' iteration(s)</div></div>' +
+      '<div class="card"><div class="label">Budget status</div>' +
+        '<div class="val ' + esc(b.status || "none") + '" style="font-size:20px;text-transform:capitalize;">' + esc(b.status || "none") + '</div>' +
+        '<div class="note">' + (b.limit ? fmtUsd(b.used) + ' / ' + fmtUsd(b.limit) : "no cap set") + '</div></div>' +
+      '</div>';
+    c.innerHTML = cards +
+      renderBudget(d.budget) +
+      renderCurrentRun(d.current_run) +
+      renderModelBreakdown(d.runs || []) +
+      renderRuns(d.runs);
+  }
+  function renderError(msg) {
+    document.getElementById("content").innerHTML =
+      '<div class="empty">Could not load cost data. ' + esc(msg || "") + "</div>";
+  }
+  fetch("/api/cost/timeline", { headers: { "Accept": "application/json" } })
+    .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
+    .then(function (d) { render(d || {}); })
+    .catch(function (e) { renderError(e && e.message); });
+})();
+</script>
+</body>
+</html>