|
|
@@ -1,791 +0,0 @@
|
|
|
-<!doctype html>
|
|
|
-<html lang="en">
|
|
|
-<head>
|
|
|
-<meta charset="utf-8">
|
|
|
-<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
-<title>fleetflow</title>
|
|
|
-<!--
|
|
|
- ff-dashboard.html - the machine-wide, multi-run, multi-repo fleetflow surface.
|
|
|
-
|
|
|
- Sibling of ff-monitor.html, NOT a replacement: ff-monitor is the single-run page
|
|
|
- a run dir serves next to its own status.json, and in-flight sessions depend on it
|
|
|
- unchanged. This page polls ONE aggregate document (api/aggregate.json, built on
|
|
|
- demand by ff-serve.py) covering every run the configured roots can see, plus the
|
|
|
- archived history of runs whose directories have already been deleted.
|
|
|
-
|
|
|
- CARD LANGUAGE is deliberately shared with the summon session picker
|
|
|
- (~/.claude/skills/summon/assets/picker-widget.html): same header shape
|
|
|
- (colour dot / name / tags / action icons), same title+summary block, same bar
|
|
|
- strip, same icon-chip stat row, same mono path footer. Two surfaces that both
|
|
|
- answer "what is running and what did it cost" should not look like two products.
|
|
|
- Summon runs inside the chat widget host, so it can use that host's CSS variables
|
|
|
- and the Tabler icon webfont; this page is served standalone under a strict
|
|
|
- zero-dependency rule, so the variables are redeclared below and the icons are
|
|
|
- inline SVG. Keep them visually in step - if one changes, change both.
|
|
|
-
|
|
|
- LOAD-BEARING VISUAL RULE, inherited from ff-monitor: the `stalled` pip is amber
|
|
|
- and NOT animated. A frozen pip beside pulsing ones is the entire tell that a lane
|
|
|
- is wedged rather than working. Animating it would destroy the only signal that
|
|
|
- distinguishes them. Same for the state dot on a card.
|
|
|
-
|
|
|
- Zero dependencies, no build step, light+dark via prefers-color-scheme.
|
|
|
--->
|
|
|
-<style>
|
|
|
- :root { color-scheme: light dark;
|
|
|
- /* Names mirror the summon widget host's token set so the two surfaces can be
|
|
|
- diffed by eye; values are this page's own (it has no host to inherit from). */
|
|
|
- --bg:#fafaf8; --surface-1:#f2f1ed; --surface-2:#fff;
|
|
|
- --border:#e4e2dd; --border-strong:#d3d1c7; --border-accent:#378add;
|
|
|
- --text-primary:#1a1a17; --text-secondary:#5c5a54; --text-muted:#8a887f;
|
|
|
- --text-accent:#2f6fb0;
|
|
|
- --run:#378add; --ok:#1d9e75; --bad:#e24b4a; --warn:#c8871b; --idle:#d3d1c7;
|
|
|
- --bg-success:#e2f4ec; --text-success:#0f6e56;
|
|
|
- --bg-bad:#fbe6e5; --bg-warn:#fbf0dc;
|
|
|
- --radius:8px;
|
|
|
- --font-mono:ui-monospace, "Cascadia Code", Consolas, monospace; }
|
|
|
- @media (prefers-color-scheme: dark) { :root {
|
|
|
- --bg:#1c1c1a; --surface-1:#222220; --surface-2:#262624;
|
|
|
- --border:#3a3936; --border-strong:#4a4945; --border-accent:#5aa0e6;
|
|
|
- --text-primary:#ececea; --text-secondary:#b6b4ac; --text-muted:#8f8d85;
|
|
|
- --text-accent:#78b4f0;
|
|
|
- --warn:#e0a233; --idle:#444441;
|
|
|
- --bg-success:#183a30; --text-success:#5fc9a4;
|
|
|
- --bg-bad:#3d2020; --bg-warn:#3a2f1a; } }
|
|
|
- * { box-sizing:border-box; margin:0; }
|
|
|
- body { background:var(--bg); color:var(--text-primary);
|
|
|
- font:13px/1.5 "Segoe UI", "Helvetica Neue", ui-sans-serif, sans-serif; }
|
|
|
- .mono { font-family:var(--font-mono); }
|
|
|
- button, input, select { font:inherit; color:inherit; }
|
|
|
- svg.i { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;
|
|
|
- stroke-linecap:round; stroke-linejoin:round; flex:none; }
|
|
|
-
|
|
|
- /* ── top bar ─────────────────────────────────────────────────────────── */
|
|
|
- .top { position:sticky; top:0; z-index:20; background:var(--surface-2);
|
|
|
- border-bottom:1px solid var(--border); padding:9px 14px;
|
|
|
- display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
|
|
|
- .brand { display:flex; align-items:center; gap:8px; flex:none; }
|
|
|
- .brand svg { width:22px; height:22px; flex:none; }
|
|
|
- .brand b { font-size:15px; font-weight:600; letter-spacing:-.015em; }
|
|
|
- .brand .live { width:7px; height:7px; border-radius:50%; background:var(--ok);
|
|
|
- box-shadow:0 0 0 3px var(--bg-success); }
|
|
|
- .brand .live.off { background:var(--bad); box-shadow:0 0 0 3px var(--bg-bad); }
|
|
|
- .totals { color:var(--text-secondary); font-size:12px; display:flex; gap:9px;
|
|
|
- flex-wrap:wrap; }
|
|
|
- .totals b { color:var(--text-primary); font-weight:600; }
|
|
|
- .stamp { margin-left:auto; color:var(--text-muted); font-size:11px; }
|
|
|
-
|
|
|
- .banner { display:none; background:var(--bad); color:#fff; padding:7px 14px; font-size:12px; }
|
|
|
- .banner.on { display:block; }
|
|
|
- .banner.warnstyle { background:var(--warn); color:#1a1a17; }
|
|
|
-
|
|
|
- .wrap { display:grid; grid-template-columns:300px 1fr; align-items:start; }
|
|
|
- @media (max-width:900px) { .wrap { grid-template-columns:1fr; }
|
|
|
- aside { border-right:none !important; border-bottom:1px solid var(--border);
|
|
|
- position:static !important; max-height:none !important; } }
|
|
|
-
|
|
|
- /* ── sidebar ─────────────────────────────────────────────────────────── */
|
|
|
- aside { border-right:1px solid var(--border); padding:10px 9px 30px;
|
|
|
- max-height:calc(100vh - 46px); overflow-y:auto; position:sticky; top:46px; }
|
|
|
- .ctl { display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }
|
|
|
- .fieldwrap { position:relative; display:flex; align-items:center; }
|
|
|
- .fieldwrap svg.i { position:absolute; left:8px; color:var(--text-muted); }
|
|
|
- .ctl input, .ctl select { width:100%; padding:6px 8px; border:1px solid var(--border);
|
|
|
- border-radius:6px; background:var(--bg); }
|
|
|
- .ctl input { padding-left:28px; }
|
|
|
- .ctl-row { display:flex; gap:6px; }
|
|
|
- .ctl-row select { flex:1; min-width:0; }
|
|
|
- .chips { display:flex; gap:4px; flex-wrap:wrap; }
|
|
|
- .fchip { font-size:11px; padding:2px 8px; border-radius:20px; cursor:pointer;
|
|
|
- border:1px solid var(--border); background:transparent; color:var(--text-secondary);
|
|
|
- display:inline-flex; align-items:center; gap:5px; }
|
|
|
- .fchip.on { background:var(--surface-1); border-color:var(--border-strong);
|
|
|
- color:var(--text-primary); font-weight:600; }
|
|
|
- .fchip .sq { width:7px; height:7px; }
|
|
|
- .treectl { display:flex; gap:4px; align-items:center; padding:2px 2px 6px;
|
|
|
- border-bottom:1px solid var(--border); margin-bottom:7px; }
|
|
|
- .tbtn { border:0; background:transparent; color:var(--text-muted); cursor:pointer;
|
|
|
- font-size:11px; padding:3px 6px; border-radius:5px; display:inline-flex;
|
|
|
- align-items:center; gap:4px; }
|
|
|
- .tbtn:hover { background:var(--surface-1); color:var(--text-accent); }
|
|
|
- .tbtn .cnt { margin-left:auto; }
|
|
|
-
|
|
|
- .repo { margin-bottom:3px; }
|
|
|
- .repo-h { width:100%; text-align:left; background:none; border:0; cursor:pointer;
|
|
|
- font-size:11px; color:var(--text-secondary); padding:4px 5px; border-radius:6px;
|
|
|
- display:flex; gap:6px; align-items:center; }
|
|
|
- .repo-h:hover { background:var(--surface-1); }
|
|
|
- .repo-h .nm { font-weight:600; overflow:hidden; text-overflow:ellipsis;
|
|
|
- white-space:nowrap; letter-spacing:.01em; }
|
|
|
- .repo-h .dot { width:8px; height:8px; border-radius:50%; flex:none; }
|
|
|
- .repo-h .n { margin-left:auto; color:var(--text-muted); font-size:10px; flex:none; }
|
|
|
- .repo-h svg.i { width:12px; height:12px; color:var(--text-muted);
|
|
|
- transition:transform .12s; }
|
|
|
- .repo.collapsed svg.chev { transform:rotate(-90deg); }
|
|
|
- .repo.collapsed .runs { display:none; }
|
|
|
- .runs { padding:1px 0 5px 5px; }
|
|
|
- .runrow { width:100%; text-align:left; background:none; border:1px solid transparent;
|
|
|
- border-radius:6px; padding:5px 7px; cursor:pointer; display:block; }
|
|
|
- .runrow:hover { background:var(--surface-1); }
|
|
|
- .runrow.on { background:var(--surface-1); border-color:var(--border-accent); }
|
|
|
- .runrow .rl { display:flex; align-items:center; gap:6px; }
|
|
|
- .runrow .nm { font-weight:600; font-size:12px; overflow:hidden;
|
|
|
- text-overflow:ellipsis; white-space:nowrap; }
|
|
|
- .runrow .rs { margin-left:auto; font-size:10px; color:var(--text-muted); flex:none; }
|
|
|
- .runrow.archived .nm { color:var(--text-muted); }
|
|
|
-
|
|
|
- /* ── pips: the shared language with ff-monitor.html ───────────────────── */
|
|
|
- .sq-row { display:flex; gap:3px; flex-wrap:wrap; }
|
|
|
- .sq { width:8px; height:8px; border-radius:1.5px; background:var(--idle); flex:none; }
|
|
|
- .sq.running { background:var(--run); animation:pulse 1.1s ease-in-out infinite; }
|
|
|
- .sq.done { background:var(--ok); } .sq.failed { background:var(--bad); }
|
|
|
- .sq.stalled { background:var(--warn); } /* amber and NOT animated - see header */
|
|
|
- @keyframes pulse { 50% { opacity:.3 } }
|
|
|
-
|
|
|
- /* ── right pane ──────────────────────────────────────────────────────── */
|
|
|
- main { padding:13px 15px 46px; min-width:0; }
|
|
|
- .rhead { background:var(--surface-2); border:1px solid var(--border);
|
|
|
- border-radius:12px; padding:14px 16px; margin-bottom:12px; }
|
|
|
- .rhead-r { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
|
|
|
- .rhead h2 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
|
|
|
- .rhead .path { color:var(--text-muted); font-size:11px; word-break:break-all;
|
|
|
- display:flex; align-items:center; gap:5px; margin-top:5px; }
|
|
|
-
|
|
|
- /* column chart - the top-of-pane summary of where the tokens actually went */
|
|
|
- .chart { margin:13px 0 3px; }
|
|
|
- .chart-h { display:flex; align-items:baseline; gap:8px; font-size:10px;
|
|
|
- color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em;
|
|
|
- margin-bottom:5px; }
|
|
|
- .chart-h .pk { margin-left:auto; text-transform:none; letter-spacing:0;
|
|
|
- font-family:var(--font-mono); }
|
|
|
- .cols-chart { display:flex; align-items:flex-end; gap:3px; height:74px;
|
|
|
- border-bottom:1px solid var(--border); padding-bottom:1px; }
|
|
|
- .bar { flex:1; min-width:3px; border-radius:2px 2px 0 0; min-height:2px;
|
|
|
- position:relative; cursor:default; transition:filter .1s; }
|
|
|
- .bar:hover { filter:brightness(1.25); }
|
|
|
- .bar.failed { outline:1.5px solid var(--bad); outline-offset:-1.5px; }
|
|
|
- .bar.stalled { outline:1.5px solid var(--warn); outline-offset:-1.5px; }
|
|
|
- .bar.running { animation:pulse 1.4s ease-in-out infinite; }
|
|
|
- .chart-x { display:flex; gap:3px; margin-top:4px; font-size:9px;
|
|
|
- color:var(--text-muted); font-family:var(--font-mono); }
|
|
|
- .chart-x span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
|
|
|
- white-space:nowrap; text-align:center; }
|
|
|
-
|
|
|
- .stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }
|
|
|
- .stat b { display:block; font-size:19px; font-weight:600; letter-spacing:-.02em; }
|
|
|
- .stat span { font-size:10px; color:var(--text-muted); text-transform:uppercase;
|
|
|
- letter-spacing:.06em; }
|
|
|
- .stat.warn b { color:var(--warn); } .stat.bad b { color:var(--bad); }
|
|
|
- .stat.ok b { color:var(--ok); }
|
|
|
- .note { color:var(--text-muted); font-size:11px; margin-top:9px; line-height:1.5; }
|
|
|
-
|
|
|
- .phase { margin-bottom:13px; }
|
|
|
- .phase-h { display:flex; align-items:center; gap:8px; padding:2px 2px 7px;
|
|
|
- font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
|
|
|
- .phase-h .n { margin-left:auto; font-family:var(--font-mono); }
|
|
|
- .deck { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:11px; }
|
|
|
-
|
|
|
- /* ── lane card - shape matched to the summon picker ──────────────────── */
|
|
|
- .card { background:var(--surface-2); border:1px solid var(--border);
|
|
|
- border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
|
|
|
- .card.is-stalled { border-color:var(--warn); }
|
|
|
- .card.is-failed { border-color:var(--bad); }
|
|
|
- .hd { display:flex; align-items:center; gap:6px; min-width:0; flex-wrap:wrap; row-gap:5px; }
|
|
|
- .hd .dot { width:8px; height:8px; border-radius:50%; flex:none; }
|
|
|
- .hd .dot.running { animation:pulse 1.1s ease-in-out infinite; }
|
|
|
- .proj { font-size:12px; color:var(--text-secondary); font-weight:500; min-width:0;
|
|
|
- overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
|
- .tag { font-size:10px; border-radius:5px; padding:0 5px; border:1px solid var(--border);
|
|
|
- color:var(--text-muted); flex:none; }
|
|
|
- .tag.run { background:var(--bg-success); color:var(--text-success); border:0; font-weight:600; }
|
|
|
- .tag.stall { background:var(--bg-warn); color:var(--warn); border:0; font-weight:600; }
|
|
|
- .tag.fail { background:var(--bg-bad); color:var(--bad); border:0; font-weight:600; }
|
|
|
- .ttl { font-size:15px; font-weight:500; line-height:1.3; }
|
|
|
- .sum { font-size:12px; color:var(--text-secondary); line-height:1.5;
|
|
|
- display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
|
|
|
- overflow:hidden; word-break:break-word; }
|
|
|
- /* token composition strip. NOT a fabricated activity timeline: this page has no
|
|
|
- per-lane time series, and inventing one would look like data. It is the real
|
|
|
- fresh/cached/output split, which is the number that actually explains cost. */
|
|
|
- .mix { display:flex; height:5px; border-radius:3px; overflow:hidden;
|
|
|
- background:var(--surface-1); }
|
|
|
- .mix i { display:block; }
|
|
|
- .statrow { display:flex; flex-wrap:wrap; gap:4px; }
|
|
|
- .chip { font-size:11px; color:var(--text-secondary); background:var(--surface-1);
|
|
|
- border-radius:6px; padding:2px 7px; display:inline-flex; align-items:center;
|
|
|
- gap:4px; white-space:nowrap; }
|
|
|
- .chip svg.i { color:var(--text-muted); }
|
|
|
- .chip.warn { background:var(--bg-warn); color:var(--warn); }
|
|
|
- .chip.warn svg.i { color:var(--warn); }
|
|
|
- .dir { font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
|
|
|
- white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex;
|
|
|
- align-items:center; gap:5px; }
|
|
|
- .errline { color:var(--bad); font-size:11px; font-family:var(--font-mono);
|
|
|
- white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
|
-
|
|
|
- .empty { color:var(--text-muted); padding:32px 4px; text-align:center; line-height:1.7; }
|
|
|
- table.hist { width:100%; border-collapse:collapse; font-size:12px; }
|
|
|
- table.hist th { text-align:left; font-size:10px; text-transform:uppercase;
|
|
|
- letter-spacing:.06em; color:var(--text-muted); font-weight:500;
|
|
|
- padding:4px 8px 6px; border-bottom:1px solid var(--border); }
|
|
|
- table.hist td { padding:6px 8px; border-bottom:1px solid var(--border); }
|
|
|
- table.hist td.num { text-align:right; font-family:var(--font-mono); }
|
|
|
-</style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div class="top">
|
|
|
- <div class="brand">
|
|
|
- <!-- LOGO SLOT. A conical (Erlenmeyer) flask: this dashboard is the front door
|
|
|
- to the *.lab services, and the flask is that namespace's mark. Swap the
|
|
|
- <path> set below to change the logo; nothing else references it. -->
|
|
|
- <svg viewBox="0 0 24 24" aria-hidden="true">
|
|
|
- <defs><linearGradient id="ffg" x1="0" y1="0" x2="1" y2="1">
|
|
|
- <stop offset="0" stop-color="#378add"/><stop offset="1" stop-color="#1d9e75"/>
|
|
|
- </linearGradient></defs>
|
|
|
- <path d="M9.5 2.5v6.2L3.8 18.4A2.4 2.4 0 0 0 5.9 22h12.2a2.4 2.4 0 0 0 2.1-3.6L14.5 8.7V2.5"
|
|
|
- fill="none" stroke="url(#ffg)" stroke-width="1.8"
|
|
|
- stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
- <path d="M8.2 2.5h7.6" stroke="url(#ffg)" stroke-width="1.8" stroke-linecap="round"/>
|
|
|
- <path d="M6.6 15.2h10.8l2.8 4.8A1.6 1.6 0 0 1 18.8 22H5.2a1.6 1.6 0 0 1-1.4-2z"
|
|
|
- fill="url(#ffg)" stroke="none" opacity=".85"/>
|
|
|
- </svg>
|
|
|
- <b>fleetflow</b><span class="live" id="dot" title="aggregator status"></span>
|
|
|
- </div>
|
|
|
- <div class="totals" id="totals">connecting…</div>
|
|
|
- <span class="stamp mono" id="stamp"></span>
|
|
|
-</div>
|
|
|
-<div class="banner" id="banner"></div>
|
|
|
-<div class="wrap">
|
|
|
- <aside>
|
|
|
- <div class="ctl">
|
|
|
- <div class="fieldwrap">
|
|
|
- <svg class="i" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M21 21l-5.2-5.2"/></svg>
|
|
|
- <input id="filter" placeholder="filter run, repo, or path…" autocomplete="off">
|
|
|
- </div>
|
|
|
- <div class="ctl-row">
|
|
|
- <select id="sort" title="sort runs">
|
|
|
- <option value="state">Sort: status</option>
|
|
|
- <option value="recent">Sort: most recent</option>
|
|
|
- <option value="tokens">Sort: most tokens</option>
|
|
|
- <option value="cost">Sort: most cost</option>
|
|
|
- <option value="lanes">Sort: most lanes</option>
|
|
|
- <option value="elapsed">Sort: longest</option>
|
|
|
- <option value="name">Sort: name</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="chips" id="statechips"></div>
|
|
|
- </div>
|
|
|
- <div class="treectl">
|
|
|
- <button class="tbtn" id="bExpand" title="Expand every repo">
|
|
|
- <svg class="i" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/><path d="M7 4l5 5 5-5"/></svg>expand</button>
|
|
|
- <button class="tbtn" id="bCollapse" title="Collapse every repo">
|
|
|
- <svg class="i" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5"/><path d="M7 20l5-5 5 5"/></svg>collapse</button>
|
|
|
- <span class="tbtn cnt" id="navcount"></span>
|
|
|
- </div>
|
|
|
- <div id="nav"></div>
|
|
|
- </aside>
|
|
|
- <main id="main"><div class="empty">loading…</div></main>
|
|
|
-</div>
|
|
|
-
|
|
|
-<script>
|
|
|
-"use strict";
|
|
|
-const POLL_MS = 3000;
|
|
|
-
|
|
|
-/* ── formatting ──────────────────────────────────────────────────────────── */
|
|
|
-const fmt = s => s == null ? "—"
|
|
|
- : s >= 86400 ? Math.floor(s/86400)+"d"+String(Math.floor(s%86400/3600)).padStart(2,"0")+"h"
|
|
|
- : s >= 3600 ? Math.floor(s/3600)+"h"+String(Math.floor(s%3600/60)).padStart(2,"0")+"m"
|
|
|
- : s >= 60 ? Math.floor(s/60)+"m"+String(s%60).padStart(2,"0")+"s" : s+"s";
|
|
|
-const tok = n => !n ? "—" : n >= 1e9 ? (n/1e9).toFixed(2)+"B" : n >= 1e6 ? (n/1e6).toFixed(1)+"M"
|
|
|
- : n >= 1e3 ? (n/1e3).toFixed(1)+"k" : String(n);
|
|
|
-const usd = v => v == null ? "—" : v >= 100 ? "$"+v.toFixed(0) : "$"+v.toFixed(2);
|
|
|
-const nf = n => (n||0).toLocaleString("en-US");
|
|
|
-const esc = t => (t||"").replace(/[&<>"]/g, c => ({"&":"&","<":"<",">":">",'"':"""}[c]));
|
|
|
-
|
|
|
-/* Inline SVG instead of an icon webfont - this page is served standalone under a
|
|
|
- strict no-external-assets rule. Same glyph vocabulary as the summon picker's
|
|
|
- Tabler set, so the two surfaces read as one family. */
|
|
|
-const ICO = {
|
|
|
- clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
|
|
|
- cpu:'<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/>',
|
|
|
- tool:'<path d="M7 10a4 4 0 1 1 3.5-5.9L8 6.5 9.5 9.5 12.5 11l2.4-2.5A4 4 0 0 1 10 12l-4.5 7A2 2 0 0 1 2.5 16z"/>',
|
|
|
- git:'<circle cx="12" cy="12" r="3"/><path d="M3 12h6M15 12h6"/>',
|
|
|
- coin:'<circle cx="12" cy="12" r="9"/><path d="M15 9.5A3 3 0 0 0 12 8h-1a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-1a3 3 0 0 1-3-1.5M12 6v12"/>',
|
|
|
- folder:'<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
|
|
|
- layers:'<path d="M12 3l9 5-9 5-9-5z"/><path d="M3 14l9 5 9-5"/>',
|
|
|
- activity:'<path d="M3 12h4l3 8 4-16 3 8h4"/>',
|
|
|
- chev:'<path d="M6 9l6 6 6-6"/>',
|
|
|
- alert:'<path d="M12 9v4M12 17h.01"/><path d="M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/>',
|
|
|
- file:'<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>',
|
|
|
- db:'<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/>',
|
|
|
-};
|
|
|
-const ico = (n, cls) => `<svg class="i ${cls||""}" viewBox="0 0 24 24" aria-hidden="true">${ICO[n]||""}</svg>`;
|
|
|
-const chip = (icon, val, lbl, cls) =>
|
|
|
- `<span class="chip ${cls||""}">${ico(icon)}${val}${lbl?`<span style="color:var(--text-muted)">${lbl}</span>`:""}</span>`;
|
|
|
-
|
|
|
-/* Per-brain identity (letter + colour) and per-repo accent, both matching the
|
|
|
- summon picker's palette so the same project reads the same colour on both. */
|
|
|
-const BRAIN = { glm:["G","#7f77dd"], codex:["C","#0f6e56"], sonnet:["S","#d85a30"],
|
|
|
- opus:["O","#ba7517"], haiku:["H","#d4537e"], fable:["F","#378add"],
|
|
|
- grok:["X","#534ab7"], native:["N","#6a8caf"] };
|
|
|
-const PAL = ["#7F77DD","#1D9E75","#D85A30","#378ADD","#BA7517","#D4537E","#534AB7","#0F6E56","#993C1D"];
|
|
|
-const repoColor = n => { let h = 0; n = n || ""; for (let i=0;i<n.length;i++) h = (h*31 + n.charCodeAt(i))>>>0;
|
|
|
- return PAL[h % PAL.length]; };
|
|
|
-const brainOf = b => BRAIN[b] || ["?", "#888780"];
|
|
|
-const STATE_COLOR = { running:"var(--run)", stalled:"var(--warn)", done:"var(--ok)",
|
|
|
- failed:"var(--bad)", unknown:"var(--idle)" };
|
|
|
-
|
|
|
-/* ── state ───────────────────────────────────────────────────────────────── */
|
|
|
-let doc = null, misses = 0, filter = "";
|
|
|
-let selected = decodeURIComponent(location.hash.slice(1) || "");
|
|
|
-let sortMode = localStorage.getItem("ff.sort") || "state";
|
|
|
-let stateFilter = new Set(JSON.parse(localStorage.getItem("ff.states") || "[]"));
|
|
|
-let collapsed = new Set(JSON.parse(localStorage.getItem("ff.collapsed") || "[]"));
|
|
|
-const openCards = new Set();
|
|
|
-
|
|
|
-const runKey = r => (r.repo || "") + "|" + (r.run || "");
|
|
|
-const histKey = h => "hist:" + (h.repo || "") + "|" + (h.run || "");
|
|
|
-const inflight = s => s === "running" || s === "stalled";
|
|
|
-/* A cached run's clocks must keep ticking without re-reading it: ff-aggregate
|
|
|
- stamps read_at per run, so `age` is exactly how stale this card's numbers are. */
|
|
|
-const ageOf = r => Math.max(0, (doc?.generated_at || 0) - (r.read_at || doc?.generated_at || 0));
|
|
|
-const save = () => { localStorage.setItem("ff.sort", sortMode);
|
|
|
- localStorage.setItem("ff.states", JSON.stringify([...stateFilter]));
|
|
|
- localStorage.setItem("ff.collapsed", JSON.stringify([...collapsed])); };
|
|
|
-
|
|
|
-/* ── polling ─────────────────────────────────────────────────────────────── */
|
|
|
-async function tick() {
|
|
|
- let d = null;
|
|
|
- try {
|
|
|
- const res = await fetch("api/aggregate.json?t=" + Date.now(), { cache:"no-store" });
|
|
|
- if (res.ok) d = await res.json();
|
|
|
- } catch (e) { d = null; }
|
|
|
-
|
|
|
- if (!d || !Array.isArray(d.runs)) {
|
|
|
- misses++;
|
|
|
- // Never let a dead aggregator masquerade as a quiet fleet. The grid stays
|
|
|
- // (losing it on one dropped poll would be worse) but it is explicitly
|
|
|
- // labelled stale, with the age of what is on screen.
|
|
|
- if (misses >= 2) {
|
|
|
- document.getElementById("dot").className = "live off";
|
|
|
- const age = doc ? fmt(Math.floor(Date.now()/1000) - doc.generated_at) : null;
|
|
|
- banner(doc
|
|
|
- ? `aggregator unreachable — everything below is a frozen snapshot from ${age} ago, not live`
|
|
|
- : "aggregator unreachable — is the fleetflow service running? (process-compose: process start fleetflow)");
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
- misses = 0; doc = d;
|
|
|
- document.getElementById("dot").className = "live";
|
|
|
- // Three distinct unhealthy states, and conflating any two of them is how the
|
|
|
- // predecessor page lied: (1) still building — normal, wait; (2) built but going
|
|
|
- // stale — the rebuild is wedged even though the server answers; (3) partial —
|
|
|
- // some roots unreadable. Only (1) is benign.
|
|
|
- if (d.building && !d.runs.length)
|
|
|
- banner("building the first aggregate — a cold scan of every root takes a few "
|
|
|
- + "minutes; this fills in on its own", true);
|
|
|
- else if (d.build_error)
|
|
|
- banner(`aggregate rebuild failed: ${d.build_error} — showing the last good result`);
|
|
|
- else if (d.age_s != null && d.age_s > Math.max(90, (d.ttl_s || 10) * 8) && !d.building)
|
|
|
- banner(`aggregate is ${fmt(d.age_s)} old and no rebuild is running — the server is up `
|
|
|
- + `but its build step is not completing`);
|
|
|
- else if (d.error && !d.building) banner(d.error);
|
|
|
- else {
|
|
|
- // Only a whole ROOT failing is worth a banner — that means a drive is gone and
|
|
|
- // runs are silently missing. Individual unreadable subdirectories are permanent
|
|
|
- // facts of this filesystem, and a banner that is always on is one nobody reads.
|
|
|
- const roots = (d.errors || []).filter(e => e.scope === "root");
|
|
|
- if (roots.length) banner(`${roots.length} configured root(s) unreadable — runs there `
|
|
|
- + `are missing, not absent: ` + roots.map(e => esc(e.path)).join(", "));
|
|
|
- else clearBanner();
|
|
|
- }
|
|
|
- render();
|
|
|
-}
|
|
|
-function banner(msg, warn) {
|
|
|
- const b = document.getElementById("banner");
|
|
|
- b.textContent = msg; b.className = "banner on" + (warn ? " warnstyle" : "");
|
|
|
-}
|
|
|
-function clearBanner() { document.getElementById("banner").className = "banner"; }
|
|
|
-
|
|
|
-/* ── render ──────────────────────────────────────────────────────────────── */
|
|
|
-function render() {
|
|
|
- const t = doc.totals || {};
|
|
|
- document.getElementById("totals").innerHTML =
|
|
|
- `<span><b>${t.live_runs || 0}</b> live</span><span><b>${t.runs || 0}</b> runs</span>` +
|
|
|
- `<span><b>${t.repos || 0}</b> repos</span><span><b>${t.lanes || 0}</b> lanes</span>` +
|
|
|
- `<span><b>${tok(t.tokens_total)}</b> tokens</span>` +
|
|
|
- `<span><b>${t.history_runs || 0}</b> archived</span>`;
|
|
|
- document.getElementById("stamp").textContent =
|
|
|
- new Date((doc.generated_at || 0) * 1000).toLocaleTimeString() +
|
|
|
- (doc.age_s != null ? ` · ${fmt(doc.age_s)} old` : "") +
|
|
|
- (doc.building ? " · rebuilding…" : "") +
|
|
|
- (doc.build_ms != null ? ` · ${doc.build_ms}ms` : "") +
|
|
|
- ((doc.errors || []).length ? ` · ${doc.errors.length} dir(s) skipped` : "");
|
|
|
- document.getElementById("stamp").title =
|
|
|
- (doc.errors || []).map(e => `${e.path}: ${e.error}`).join("\n") || "";
|
|
|
- renderChips(); renderNav(); renderDetail();
|
|
|
-}
|
|
|
-
|
|
|
-const STATES = [["running","live"],["stalled","stalled"],["failed","failed"],["done","done"]];
|
|
|
-function renderChips() {
|
|
|
- const counts = {};
|
|
|
- doc.runs.forEach(r => { const s = r.summary?.state || "unknown";
|
|
|
- counts[s] = (counts[s] || 0) + 1; });
|
|
|
- document.getElementById("statechips").innerHTML = STATES.map(([k, label]) =>
|
|
|
- `<button class="fchip ${stateFilter.has(k) ? "on" : ""}" data-s="${k}"
|
|
|
- title="show only ${label} runs"><span class="sq ${k}"></span>${label}
|
|
|
- <span style="color:var(--text-muted)">${counts[k] || 0}</span></button>`).join("");
|
|
|
- document.querySelectorAll(".fchip").forEach(b => b.onclick = () => {
|
|
|
- const s = b.dataset.s;
|
|
|
- stateFilter.has(s) ? stateFilter.delete(s) : stateFilter.add(s);
|
|
|
- save(); render();
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function matches(text) { return !filter || text.toLowerCase().includes(filter); }
|
|
|
-function passesState(r) {
|
|
|
- return !stateFilter.size || stateFilter.has(r.summary?.state || "unknown");
|
|
|
-}
|
|
|
-function sortRuns(list) {
|
|
|
- const rank = { stalled:0, running:1, failed:2, done:3, unknown:4 };
|
|
|
- const x = list.slice();
|
|
|
- const S = r => r.summary || {};
|
|
|
- if (sortMode === "tokens") x.sort((a,b) => (S(b).tokens_total||0)-(S(a).tokens_total||0));
|
|
|
- else if (sortMode === "cost") x.sort((a,b) => (S(b).cost_usd||0)-(S(a).cost_usd||0));
|
|
|
- else if (sortMode === "lanes") x.sort((a,b) => (S(b).lane_count||0)-(S(a).lane_count||0));
|
|
|
- else if (sortMode === "elapsed") x.sort((a,b) => (S(b).elapsed_s||0)-(S(a).elapsed_s||0));
|
|
|
- else if (sortMode === "recent") x.sort((a,b) => (S(b).started||0)-(S(a).started||0));
|
|
|
- else if (sortMode === "name") x.sort((a,b) => (a.run||"").localeCompare(b.run||""));
|
|
|
- else x.sort((a,b) => (rank[S(a).state] ?? 9) - (rank[S(b).state] ?? 9)
|
|
|
- || (S(b).started||0) - (S(a).started||0));
|
|
|
- return x;
|
|
|
-}
|
|
|
-
|
|
|
-function renderNav() {
|
|
|
- const groups = new Map();
|
|
|
- let shown = 0;
|
|
|
- for (const r of sortRuns(doc.runs)) {
|
|
|
- if (!passesState(r)) continue;
|
|
|
- if (!matches(r.run + " " + (r.repo_label || "") + " " + r.repo)) continue;
|
|
|
- const g = r.repo_label || r.repo;
|
|
|
- if (!groups.has(g)) groups.set(g, []);
|
|
|
- groups.get(g).push(r); shown++;
|
|
|
- }
|
|
|
- let html = "";
|
|
|
- for (const [label, runs] of groups) {
|
|
|
- const live = runs.filter(r => inflight(r.summary?.state)).length;
|
|
|
- const isC = collapsed.has(label);
|
|
|
- html += `<div class="repo ${isC ? "collapsed" : ""}" data-g="${esc(label)}">
|
|
|
- <button class="repo-h" data-toggle="${esc(label)}">
|
|
|
- ${ico("chev","chev")}
|
|
|
- <span class="dot" style="background:${repoColor(label)}"></span>
|
|
|
- <span class="nm">${esc(label)}</span>
|
|
|
- <span class="n">${live ? live + " live" : runs.length}</span>
|
|
|
- </button>
|
|
|
- <div class="runs">${runs.map(runRow).join("")}</div></div>`;
|
|
|
- }
|
|
|
- // History is a peer group in the same tree, not a separate screen: a run that was
|
|
|
- // live an hour ago and cleaned since should be one click away. Runs still on disk
|
|
|
- // are suppressed so nothing appears twice while it is both live and archived.
|
|
|
- const onDisk = new Set(doc.runs.map(r => runKey(r).toLowerCase()));
|
|
|
- const hist = (doc.history || []).filter(h =>
|
|
|
- !onDisk.has((h.repo + "|" + h.run).toLowerCase()) &&
|
|
|
- matches(h.run + " " + (h.repo_label || "") + " " + h.repo) &&
|
|
|
- (!stateFilter.size || stateFilter.has(h.state)));
|
|
|
- if (hist.length) {
|
|
|
- const isC = collapsed.has(" history");
|
|
|
- html += `<div class="repo ${isC ? "collapsed" : ""}">
|
|
|
- <button class="repo-h" data-toggle="�history">${ico("chev","chev")}
|
|
|
- ${ico("db")}<span class="nm">history · cleaned up</span>
|
|
|
- <span class="n">${hist.length}</span></button>
|
|
|
- <div class="runs">${hist.map(h => `
|
|
|
- <button class="runrow archived ${selected === histKey(h) ? "on" : ""}"
|
|
|
- data-k="${esc(histKey(h))}">
|
|
|
- <div class="rl"><span class="sq ${h.state}"></span>
|
|
|
- <span class="nm mono">${esc(h.run)}</span>
|
|
|
- <span class="rs">${tok(h.tokens_total)}</span></div>
|
|
|
- <div class="rl" style="margin-top:2px"><span class="rs" style="margin-left:14px">
|
|
|
- ${esc(h.repo_label||"")} · ${h.lane_count} lanes · ${usd(h.cost_usd)}</span></div>
|
|
|
- </button>`).join("")}</div></div>`;
|
|
|
- }
|
|
|
- document.getElementById("nav").innerHTML = html ||
|
|
|
- `<div class="empty" style="padding:18px 4px">no runs match</div>`;
|
|
|
- document.getElementById("navcount").textContent =
|
|
|
- `${shown}${hist.length ? " + " + hist.length : ""} shown`;
|
|
|
-
|
|
|
- document.querySelectorAll("[data-toggle]").forEach(b => b.onclick = () => {
|
|
|
- const g = b.dataset.toggle;
|
|
|
- collapsed.has(g) ? collapsed.delete(g) : collapsed.add(g);
|
|
|
- save(); renderNav();
|
|
|
- });
|
|
|
- document.querySelectorAll(".runrow").forEach(b => b.onclick = () => {
|
|
|
- selected = b.dataset.k; location.hash = encodeURIComponent(selected); render();
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-function runRow(r) {
|
|
|
- const s = r.summary || {}, k = runKey(r), age = ageOf(r);
|
|
|
- const pips = (r.lanes || []).slice(0, 44).map(l => `<div class="sq ${l.state}"></div>`).join("");
|
|
|
- const label = r.error ? `<span style="color:var(--bad)">unreadable</span>`
|
|
|
- : s.state === "stalled" ? `<span style="color:var(--warn)">${fmt((s.idle_s||0)+age)} silent</span>`
|
|
|
- : s.state === "running" ? `${s.counts?.running || 0} running`
|
|
|
- : tok(s.tokens_total);
|
|
|
- return `<button class="runrow ${selected === k ? "on" : ""}" data-k="${esc(k)}">
|
|
|
- <div class="rl"><span class="nm mono">${esc(r.run)}</span><span class="rs">${label}</span></div>
|
|
|
- <div class="sq-row" style="margin-top:4px">${pips}</div></button>`;
|
|
|
-}
|
|
|
-
|
|
|
-/* ── column chart ────────────────────────────────────────────────────────── */
|
|
|
-/* One column per item, height proportional to value. This is the chart that makes
|
|
|
- the cross-brain cost story visible at a glance: a codex lane at 5.4M next to a
|
|
|
- GLM lane at 42.6k is a 100x column, not two numbers you have to compare by eye. */
|
|
|
-function columnChart(items, { label, sub, showX }) {
|
|
|
- if (!items.length) return "";
|
|
|
- const max = Math.max(...items.map(i => i.value), 1);
|
|
|
- const peak = items.reduce((a,b) => b.value > a.value ? b : a, items[0]);
|
|
|
- const bars = items.map(i => {
|
|
|
- const h = i.value > 0 ? Math.max(3, Math.round(i.value / max * 72)) : 2;
|
|
|
- return `<div class="bar ${i.state||""}" style="height:${h}px;background:${i.color};
|
|
|
- ${i.value ? "" : "opacity:.25;"}"
|
|
|
- title="${esc(i.name)} — ${tok(i.value)} tokens · ${esc(i.state||"")}"></div>`;
|
|
|
- }).join("");
|
|
|
- const xs = showX && items.length <= 26
|
|
|
- ? `<div class="chart-x">${items.map(i =>
|
|
|
- `<span title="${esc(i.name)}">${esc(i.name)}</span>`).join("")}</div>` : "";
|
|
|
- return `<div class="chart">
|
|
|
- <div class="chart-h"><span>${esc(label)}</span>
|
|
|
- ${sub ? `<span style="text-transform:none;letter-spacing:0">${esc(sub)}</span>` : ""}
|
|
|
- <span class="pk">peak ${esc(peak.name)} · ${tok(peak.value)}</span></div>
|
|
|
- <div class="cols-chart">${bars}</div>${xs}</div>`;
|
|
|
-}
|
|
|
-
|
|
|
-/* ── detail pane ─────────────────────────────────────────────────────────── */
|
|
|
-function renderDetail() {
|
|
|
- const m = document.getElementById("main");
|
|
|
- if (!doc.runs.length && !(doc.history || []).length) {
|
|
|
- m.innerHTML = doc.building
|
|
|
- ? `<div class="empty">scanning for runs…<br><span class="mono">${esc((doc.roots||[]).join(" · "))}</span></div>`
|
|
|
- : `<div class="empty">no fleetflow runs found under:<br><span class="mono">
|
|
|
- ${esc((doc.roots||[]).join(" · ") || "(no roots)")}</span><br>
|
|
|
- roots come from <span class="mono">${esc(doc.roots_source || "?")}</span></div>`;
|
|
|
- return;
|
|
|
- }
|
|
|
- if (selected.startsWith("hist:")) {
|
|
|
- const h = (doc.history || []).find(x => histKey(x) === selected);
|
|
|
- if (h) { m.innerHTML = historyCard(h); return; }
|
|
|
- }
|
|
|
- const r = doc.runs.find(x => runKey(x) === selected);
|
|
|
- m.innerHTML = r ? runDetail(r) : overview();
|
|
|
-}
|
|
|
-
|
|
|
-function overview() {
|
|
|
- const live = doc.runs.filter(r => inflight(r.summary?.state));
|
|
|
- const byTok = doc.runs.slice().sort((a,b) =>
|
|
|
- (b.summary?.tokens_total||0) - (a.summary?.tokens_total||0)).slice(0, 30);
|
|
|
- const cost = doc.runs.reduce((a,r) => a + (r.summary?.cost_usd || 0), 0);
|
|
|
- const chart = columnChart(byTok.map(r => ({
|
|
|
- name: r.run, value: r.summary?.tokens_total || 0,
|
|
|
- color: repoColor(r.repo_label || r.repo), state: r.summary?.state })),
|
|
|
- { label:"tokens per run · top 30", showX:false });
|
|
|
- return `<div class="rhead">
|
|
|
- <div class="rhead-r"><h2>${live.length ? live.length + " run" + (live.length>1?"s":"") + " in flight" : "fleet idle"}</h2>
|
|
|
- <span class="tag">${doc.totals.runs} runs · ${doc.totals.repos} repos</span></div>
|
|
|
- ${chart}
|
|
|
- <div class="stats mono">
|
|
|
- <div class="stat ${live.length?"ok":""}"><b>${live.length}</b><span>live</span></div>
|
|
|
- <div class="stat"><b>${doc.totals.lanes||0}</b><span>lanes</span></div>
|
|
|
- <div class="stat"><b>${tok(doc.totals.tokens_total)}</b><span>tokens</span></div>
|
|
|
- <div class="stat"><b>${usd(cost)}</b><span>cost*</span></div>
|
|
|
- <div class="stat"><b>${doc.totals.history_runs||0}</b><span>archived</span></div>
|
|
|
- </div>
|
|
|
- <div class="note">* summed from lanes that price their own turn — codex and grok
|
|
|
- report none, so real spend is higher. Pick a run on the left for its lane grid.</div>
|
|
|
- </div>` + (live.length ? `<div class="phase"><div class="phase-h mono"><span>in flight</span>
|
|
|
- <span class="n">${live.length}</span></div>
|
|
|
- <div class="deck">${live.map(runCard).join("")}</div></div>` : "");
|
|
|
-}
|
|
|
-
|
|
|
-/* Run-level card, same shape as a lane card so the two nest visually. */
|
|
|
-function runCard(r) {
|
|
|
- const s = r.summary || {}, age = ageOf(r), col = repoColor(r.repo_label || r.repo);
|
|
|
- return `<div class="card ${s.state==="stalled"?"is-stalled":s.state==="failed"?"is-failed":""}">
|
|
|
- <div class="hd"><span class="dot ${s.state}" style="background:${STATE_COLOR[s.state]||col}"></span>
|
|
|
- <span class="proj">${esc(r.repo_label || "")}</span>${stateTag(s.state, (s.idle_s||0)+age)}</div>
|
|
|
- <div class="ttl mono">${esc(r.run)}</div>
|
|
|
- <div class="sq-row">${(r.lanes||[]).map(l =>
|
|
|
- `<div class="sq ${l.state}" title="${esc(l.id)}"></div>`).join("")}</div>
|
|
|
- <div class="statrow">
|
|
|
- ${chip("layers", s.lane_count||0, "lanes")}
|
|
|
- ${chip("clock", fmt((s.elapsed_s||0) + (inflight(s.state)?age:0)))}
|
|
|
- ${chip("activity", tok(s.tokens_total), "tok")}
|
|
|
- ${chip("coin", usd(s.cost_usd))}
|
|
|
- </div>
|
|
|
- <div class="dir" title="${esc(r.repo)}">${ico("folder")}${esc(r.repo)}</div>
|
|
|
- </div>`;
|
|
|
-}
|
|
|
-
|
|
|
-function stateTag(state, idle) {
|
|
|
- if (state === "running") return `<span class="tag run">running</span>`;
|
|
|
- if (state === "stalled") return `<span class="tag stall">stalled ${fmt(idle)}</span>`;
|
|
|
- if (state === "failed") return `<span class="tag fail">failed</span>`;
|
|
|
- if (state === "done") return `<span class="tag">done</span>`;
|
|
|
- return "";
|
|
|
-}
|
|
|
-
|
|
|
-function runDetail(r) {
|
|
|
- if (r.error) {
|
|
|
- return `<div class="rhead"><div class="rhead-r"><h2>${esc(r.run)}</h2></div>
|
|
|
- <div class="path mono">${ico("folder")}${esc(r.repo)}</div>
|
|
|
- <div class="note" style="color:var(--bad)">${ico("alert")} could not read this run: ${esc(r.error)}</div>
|
|
|
- <div class="note">It may be mid-cleanup, on an offline drive, or have a torn journal
|
|
|
- write. It will reappear on its own if it comes back.</div></div>`;
|
|
|
- }
|
|
|
- const s = r.summary || {}, age = ageOf(r), lanes = r.lanes || [];
|
|
|
- const stalledN = s.counts?.stalled || 0, failedN = s.counts?.failed || 0;
|
|
|
- const runningN = s.counts?.running || 0;
|
|
|
- const uncovered = lanes.filter(l => inflight(l.state) && !l.live_signal).length;
|
|
|
-
|
|
|
- const chart = columnChart(lanes.map(l => ({
|
|
|
- name: l.id, value: l.tokens_total || 0, color: brainOf(l.brain)[1], state: l.state })),
|
|
|
- { label:"tokens per lane", sub:(s.brains||[]).join(" + "), showX:true });
|
|
|
-
|
|
|
- const head = `<div class="rhead">
|
|
|
- <div class="rhead-r"><h2 class="mono">${esc(r.run)}</h2>
|
|
|
- ${stateTag(s.state, (s.idle_s||0)+age)}
|
|
|
- ${(s.brains||[]).map(b => `<span class="tag" style="border-color:${brainOf(b)[1]};
|
|
|
- color:${brainOf(b)[1]};display:inline-flex;align-items:center;gap:4px;padding:1px 6px">
|
|
|
- ${brandMark(b, brainOf(b)[1])}${esc(b)}</span>`).join("")}</div>
|
|
|
- <div class="path mono">${ico("folder")}${esc(r.repo)}</div>
|
|
|
- <div class="sq-row" style="margin-top:9px">${lanes.map(l =>
|
|
|
- `<div class="sq ${l.state}" title="${esc(l.id)} — ${esc(l.state)}"></div>`).join("")}</div>
|
|
|
- ${chart}
|
|
|
- <div class="stats mono">
|
|
|
- <div class="stat"><b>${s.lane_count||0}</b><span>lanes</span></div>
|
|
|
- <div class="stat"><b>${fmt((s.elapsed_s||0)+(inflight(s.state)?age:0))}</b><span>elapsed</span></div>
|
|
|
- <div class="stat"><b>${tok(s.tokens_total)}</b><span>tokens</span></div>
|
|
|
- <div class="stat"><b>${tok(s.tokens_out)}</b><span>output</span></div>
|
|
|
- <div class="stat"><b>${usd(s.cost_usd)}</b><span>cost${s.cost_partial?"*":""}</span></div>
|
|
|
- ${runningN ? `<div class="stat ok"><b>${runningN}</b><span>running</span></div>` : ""}
|
|
|
- ${stalledN ? `<div class="stat warn"><b>${stalledN}</b><span>stalled</span></div>` : ""}
|
|
|
- ${failedN ? `<div class="stat bad"><b>${failedN}</b><span>failed</span></div>` : ""}
|
|
|
- </div>
|
|
|
- ${s.cost_partial ? `<div class="note">* self-reported cost covers ${s.cost_lanes}/${s.lane_count}
|
|
|
- lanes — codex and grok workers do not price their own turn, so the true spend is higher.
|
|
|
- Token counts cover every lane and are the comparable figure.</div>` : ""}
|
|
|
- ${uncovered ? `<div class="note">${ico("alert")} ${uncovered} in-flight lane(s) emit no live
|
|
|
- stream (grok, or claude lanes spawned without --worktree). For those the stall detector
|
|
|
- reports “cannot tell”, never “healthy”.</div>` : ""}
|
|
|
- </div>`;
|
|
|
-
|
|
|
- const phases = [];
|
|
|
- lanes.forEach(l => { const p = l.phase || "build"; if (!phases.includes(p)) phases.push(p); });
|
|
|
- return head + phases.map(p => {
|
|
|
- const pl = lanes.filter(l => (l.phase || "build") === p);
|
|
|
- return `<div class="phase">
|
|
|
- <div class="phase-h mono"><span>${esc(p)}</span>
|
|
|
- <div class="sq-row">${pl.map(l => `<div class="sq ${l.state}"></div>`).join("")}</div>
|
|
|
- <span class="n">${pl.filter(l => !inflight(l.state)).length}/${pl.length}</span></div>
|
|
|
- <div class="deck">${pl.map(l => laneCard(l, age)).join("")}</div></div>`;
|
|
|
- }).join("");
|
|
|
-}
|
|
|
-
|
|
|
-function laneCard(l, age) {
|
|
|
- const [, col] = brainOf(l.brain);
|
|
|
- const live = inflight(l.state) ? age : 0;
|
|
|
- const tot = Math.max(1, l.tokens_total || 0);
|
|
|
- const pct = v => ((v || 0) / tot * 100).toFixed(1) + "%";
|
|
|
- return `<div class="card ${l.state==="stalled"?"is-stalled":l.state==="failed"?"is-failed":""}">
|
|
|
- <div class="hd">
|
|
|
- <span class="dot ${l.state}" style="background:${STATE_COLOR[l.state]||col}"></span>
|
|
|
- ${brandMark(l.brain, col)}
|
|
|
- <span class="proj" style="color:${col};font-weight:600">${esc(l.brain)}</span>
|
|
|
- <span class="tag">${esc(l.phase || "build")}</span>
|
|
|
- ${inflight(l.state) && !l.live_signal ? `<span class="tag" title="no live stream — for this
|
|
|
- lane the stall detector reports "cannot tell", never "healthy"">no stream</span>` : ""}
|
|
|
- ${stateTag(l.state, l.last_activity_s + live)}
|
|
|
- </div>
|
|
|
- <div class="ttl mono">${esc(l.id)}</div>
|
|
|
- <div class="sum">${esc(l.activity || "working")}</div>
|
|
|
- <div class="mix" title="${tok(l.tokens_in)} fresh in · ${tok(l.tokens_cached)} cached · ${tok(l.tokens_out)} out">
|
|
|
- <i style="width:${pct(l.tokens_in)};background:${col}"></i>
|
|
|
- <i style="width:${pct(l.tokens_cached)};background:${col};opacity:.35"></i>
|
|
|
- <i style="width:${pct(l.tokens_out)};background:var(--ok)"></i>
|
|
|
- </div>
|
|
|
- <div class="statrow">
|
|
|
- ${l.stalled
|
|
|
- ? chip("clock", fmt(l.last_activity_s + live), "silent", "warn")
|
|
|
- : chip("clock", fmt(l.elapsed_s + live))}
|
|
|
- ${chip("tool", nf(l.tools), "tools")}
|
|
|
- ${chip("git", nf(l.commits), "commits")}
|
|
|
- ${chip("activity", tok(l.tokens_total), "tok")}
|
|
|
- ${chip("coin", usd(l.cost_usd))}
|
|
|
- </div>
|
|
|
- ${l.last_commit ? `<div class="dir" title="${esc(l.last_commit)}">${ico("git")}${esc(l.last_commit)}</div>` : ""}
|
|
|
- ${l.err_tail ? `<div class="errline" title="${esc(l.err_tail)}">${esc(l.err_tail)}</div>` : ""}
|
|
|
- <div class="dir">${ico("file")}${esc((l.artifact || "pending").split(/[\\/]/).pop())}</div>
|
|
|
- </div>`;
|
|
|
-}
|
|
|
-
|
|
|
-function historyCard(h) {
|
|
|
- const when = h.archived_at ? new Date(h.archived_at * 1000).toLocaleString() : "—";
|
|
|
- // A run can be archived and STILL on disk (ff-archive called directly rather than
|
|
|
- // by ff-clean). Claiming its files are gone when they are not would send someone
|
|
|
- // hunting for a directory that is right there.
|
|
|
- const onDisk = doc.runs.some(r => runKey(r).toLowerCase() === (h.repo + "|" + h.run).toLowerCase());
|
|
|
- const fate = onDisk
|
|
|
- ? `its run directory is still on disk — the live card has the full lane detail.`
|
|
|
- : `this run's directory has been cleaned up. Lane prompts, diffs, and transcripts
|
|
|
- are gone; this is the surviving index.`;
|
|
|
- const chart = columnChart((h.lanes || []).map(l => ({
|
|
|
- name: l.id, value: l.tokens_total || 0, color: brainOf(l.brain)[1], state: l.state })),
|
|
|
- { label:"tokens per lane", sub:(h.brains||[]).join(" + "), showX:true });
|
|
|
- return `<div class="rhead">
|
|
|
- <div class="rhead-r"><h2 class="mono">${esc(h.run)}</h2>
|
|
|
- <span class="tag">archived</span>${stateTag(h.state, 0)}
|
|
|
- ${(h.brains||[]).map(b => `<span class="tag" style="border-color:${brainOf(b)[1]};
|
|
|
- color:${brainOf(b)[1]}">${esc(b)}</span>`).join("")}</div>
|
|
|
- <div class="path mono">${ico("folder")}${esc(h.repo)}</div>
|
|
|
- ${chart}
|
|
|
- <div class="stats mono">
|
|
|
- <div class="stat"><b>${h.lane_count||0}</b><span>lanes</span></div>
|
|
|
- <div class="stat"><b>${fmt(h.elapsed_s)}</b><span>elapsed</span></div>
|
|
|
- <div class="stat"><b>${tok(h.tokens_total)}</b><span>tokens</span></div>
|
|
|
- <div class="stat"><b>${tok(h.tokens_out)}</b><span>output</span></div>
|
|
|
- <div class="stat"><b>${usd(h.cost_usd)}</b><span>cost${h.cost_partial?"*":""}</span></div>
|
|
|
- </div>
|
|
|
- <div class="note">archived ${esc(when)} — ${fate}
|
|
|
- ${h.cost_partial ? `Cost covers ${h.cost_lanes}/${h.lane_count} lanes (codex/grok report
|
|
|
- none), so the real spend is higher.` : ""}</div>
|
|
|
- </div>
|
|
|
- <table class="hist mono"><thead><tr><th>lane</th><th>brain</th><th>phase</th><th>state</th>
|
|
|
- <th class="num">elapsed</th><th class="num">tokens</th><th class="num">out</th>
|
|
|
- <th class="num">commits</th><th class="num">cost</th></tr></thead><tbody>
|
|
|
- ${(h.lanes||[]).map(l => `<tr><td>${esc(l.id)}</td>
|
|
|
- <td style="color:${brainOf(l.brain)[1]}">${esc(l.brain)}</td>
|
|
|
- <td>${esc(l.phase||"build")}</td>
|
|
|
- <td><span class="sq ${l.state}" style="display:inline-block"></span> ${esc(l.state)}</td>
|
|
|
- <td class="num">${fmt(l.elapsed_s)}</td><td class="num">${tok(l.tokens_total)}</td>
|
|
|
- <td class="num">${tok(l.tokens_out)}</td><td class="num">${l.commits||"—"}</td>
|
|
|
- <td class="num">${usd(l.cost_usd)}</td></tr>`).join("")}
|
|
|
- </tbody></table>`;
|
|
|
-}
|
|
|
-
|
|
|
-/* ── wiring ──────────────────────────────────────────────────────────────── */
|
|
|
-document.getElementById("filter").addEventListener("input", e => {
|
|
|
- filter = e.target.value.trim().toLowerCase(); if (doc) render();
|
|
|
-});
|
|
|
-const sortEl = document.getElementById("sort");
|
|
|
-sortEl.value = sortMode;
|
|
|
-sortEl.addEventListener("change", e => { sortMode = e.target.value; save(); if (doc) render(); });
|
|
|
-document.getElementById("bExpand").onclick = () => { collapsed.clear(); save(); if (doc) renderNav(); };
|
|
|
-document.getElementById("bCollapse").onclick = () => {
|
|
|
- doc.runs.forEach(r => collapsed.add(r.repo_label || r.repo));
|
|
|
- collapsed.add(" history"); save(); renderNav();
|
|
|
-};
|
|
|
-window.addEventListener("hashchange", () => {
|
|
|
- selected = decodeURIComponent(location.hash.slice(1) || ""); if (doc) render();
|
|
|
-});
|
|
|
-tick();
|
|
|
-setInterval(tick, POLL_MS);
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|
0xDarkMatter