308 lines
13 KiB
Python
308 lines
13 KiB
Python
from __future__ import annotations
|
|
|
|
from html import escape
|
|
|
|
def monitoring_page_html(device_hostname: str = "") -> str:
|
|
host_suffix = f" ({escape(device_hostname)})" if device_hostname else ""
|
|
return """<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>ScreenJob Monitor</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-slate-950 text-slate-100 min-h-screen">
|
|
<div class="max-w-7xl mx-auto p-4 md:p-8 space-y-6">
|
|
<header class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold tracking-tight">ScreenJob Monitor<span class="text-slate-400 text-base md:text-lg font-medium">__MONITOR_HOST__</span></h1>
|
|
<p class="text-slate-400 text-sm">Read-only monitoring for active and historical tasks.</p>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row gap-2 md:items-center">
|
|
<input id="tokenInput" type="password" placeholder="SCREENJOB_TOKEN" class="bg-slate-900 border border-slate-700 rounded px-3 py-2 text-sm w-72" />
|
|
<button id="saveTokenBtn" class="bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-semibold px-4 py-2 rounded">Connect</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid grid-cols-2 md:grid-cols-6 gap-3" id="stats"></section>
|
|
|
|
<section class="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
|
<div class="lg:col-span-2 bg-slate-900/70 border border-slate-800 rounded-xl p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="font-semibold">Jobs</h2>
|
|
<button id="refreshBtn" class="text-xs bg-slate-800 px-2 py-1 rounded">Refresh</button>
|
|
</div>
|
|
<div id="jobList" class="space-y-2 max-h-[62vh] overflow-auto"></div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-3 bg-slate-900/70 border border-slate-800 rounded-xl p-4 space-y-3">
|
|
<h2 class="font-semibold">Job Detail</h2>
|
|
<pre id="jobDetail" class="bg-slate-950 border border-slate-800 rounded p-3 text-xs overflow-auto max-h-[24vh]"></pre>
|
|
<h3 class="font-semibold text-sm">Latest Visual</h3>
|
|
<div class="bg-slate-950 border border-slate-800 rounded p-2">
|
|
<img id="latestVisual" alt="Latest visual update" class="max-h-[24vh] w-full object-contain rounded" />
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-semibold text-sm">Live Events</h3>
|
|
<label for="eventsViewToggle" class="flex items-center gap-2 text-xs text-slate-300 cursor-pointer select-none">
|
|
<span>Raw</span>
|
|
<input id="eventsViewToggle" type="checkbox" class="accent-cyan-400 h-4 w-4" />
|
|
<span>Beautiful</span>
|
|
</label>
|
|
</div>
|
|
<div id="events" class="bg-slate-950 border border-slate-800 rounded p-3 text-xs overflow-auto max-h-[36vh] space-y-1"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const tokenInput = document.getElementById("tokenInput");
|
|
const saveTokenBtn = document.getElementById("saveTokenBtn");
|
|
const refreshBtn = document.getElementById("refreshBtn");
|
|
const jobListEl = document.getElementById("jobList");
|
|
const jobDetailEl = document.getElementById("jobDetail");
|
|
const eventsEl = document.getElementById("events");
|
|
const statsEl = document.getElementById("stats");
|
|
const latestVisualEl = document.getElementById("latestVisual");
|
|
const eventsViewToggle = document.getElementById("eventsViewToggle");
|
|
|
|
const state = {
|
|
token: localStorage.getItem("screenjob_token") || "",
|
|
jobs: [],
|
|
selectedJobId: null,
|
|
ws: null,
|
|
wsReconnectTimer: null,
|
|
eventsViewMode: localStorage.getItem("screenjob_events_view_mode") === "beautiful" ? "beautiful" : "raw"
|
|
};
|
|
const manuallyClosedSockets = new WeakSet();
|
|
tokenInput.value = state.token;
|
|
|
|
function authHeaders() {
|
|
return { "Authorization": "Bearer " + state.token };
|
|
}
|
|
|
|
async function api(path, opts = {}) {
|
|
if (!state.token) throw new Error("Token required");
|
|
const headers = Object.assign({}, authHeaders(), opts.headers || {});
|
|
const response = await fetch(path, Object.assign({}, opts, { headers }));
|
|
if (!response.ok) throw new Error(await response.text());
|
|
return response.json();
|
|
}
|
|
|
|
function renderStats(stats) {
|
|
const cards = [
|
|
["Total Jobs", stats.total_jobs || 0],
|
|
["Running", stats.running_jobs || 0],
|
|
["Completed", stats.completed_jobs || 0],
|
|
["Failed", stats.failed_jobs || 0],
|
|
["Cancelled", stats.cancelled_jobs || 0],
|
|
["Total Cost (USD)", Number(stats.total_estimated_cost || 0).toFixed(4)]
|
|
];
|
|
statsEl.innerHTML = cards.map(([name, val]) => `
|
|
<div class="bg-slate-900/70 border border-slate-800 rounded-xl p-3">
|
|
<div class="text-slate-400 text-xs">${name}</div>
|
|
<div class="text-lg font-semibold">${val}</div>
|
|
</div>
|
|
`).join("");
|
|
}
|
|
|
|
function renderJobs() {
|
|
jobListEl.innerHTML = state.jobs.map((job) => {
|
|
const active = job.job_id === state.selectedJobId;
|
|
return `
|
|
<button data-job-id="${job.job_id}" class="w-full text-left p-3 rounded border ${active ? "border-cyan-400 bg-slate-800" : "border-slate-800 bg-slate-950"} hover:bg-slate-800">
|
|
<div class="flex items-center justify-between">
|
|
<span class="font-medium">${job.job_id}</span>
|
|
<span class="text-xs px-2 py-0.5 rounded bg-slate-700">${job.status}</span>
|
|
</div>
|
|
<div class="text-xs text-slate-400 mt-1">${job.model}</div>
|
|
<div class="text-xs text-slate-300 mt-1 line-clamp-2">${job.objective}</div>
|
|
<div class="text-xs text-slate-500 mt-1">$${Number((job.usage && job.usage.estimated_cost_usd) || 0).toFixed(6)}</div>
|
|
</button>
|
|
`;
|
|
}).join("");
|
|
for (const btn of jobListEl.querySelectorAll("button[data-job-id]")) {
|
|
btn.addEventListener("click", () => {
|
|
state.selectedJobId = btn.getAttribute("data-job-id");
|
|
renderJobs();
|
|
refreshJobDetail();
|
|
});
|
|
}
|
|
}
|
|
|
|
function pushEventLine(obj) {
|
|
if (!obj || !obj.job_id || !obj.event_type) return;
|
|
const line = document.createElement("div");
|
|
const ts = obj.ts || "-";
|
|
const step = (obj.step ?? "-");
|
|
if (state.eventsViewMode === "raw") {
|
|
line.className = "border-b border-slate-800 pb-1";
|
|
line.textContent = `[${ts}] ${obj.job_id} step=${step} ${obj.event_type} ${JSON.stringify(obj.payload || {})}`;
|
|
} else {
|
|
const typeColors = {
|
|
info: "bg-sky-900/50 text-sky-200 border border-sky-800",
|
|
warning: "bg-amber-900/40 text-amber-200 border border-amber-800",
|
|
error: "bg-rose-900/40 text-rose-200 border border-rose-800",
|
|
visual_update: "bg-emerald-900/40 text-emerald-200 border border-emerald-800",
|
|
tool_call: "bg-violet-900/40 text-violet-200 border border-violet-800",
|
|
tool_result: "bg-indigo-900/40 text-indigo-200 border border-indigo-800"
|
|
};
|
|
const dt = new Date(ts);
|
|
const tsText = Number.isNaN(dt.getTime()) ? ts : dt.toLocaleString();
|
|
const payload = obj.payload || {};
|
|
|
|
line.className = "rounded-lg border border-slate-800 bg-slate-900/80 p-2 space-y-2";
|
|
const header = document.createElement("div");
|
|
header.className = "flex flex-wrap items-center gap-2";
|
|
|
|
const typePill = document.createElement("span");
|
|
typePill.className = `px-2 py-0.5 rounded text-[10px] font-semibold ${typeColors[obj.event_type] || "bg-slate-800 text-slate-200 border border-slate-700"}`;
|
|
typePill.textContent = obj.event_type;
|
|
|
|
const stepPill = document.createElement("span");
|
|
stepPill.className = "px-2 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 border border-slate-700";
|
|
stepPill.textContent = `step ${step}`;
|
|
|
|
const tsSpan = document.createElement("span");
|
|
tsSpan.className = "text-[10px] text-slate-400";
|
|
tsSpan.textContent = tsText;
|
|
|
|
header.appendChild(typePill);
|
|
header.appendChild(stepPill);
|
|
header.appendChild(tsSpan);
|
|
|
|
const jobLine = document.createElement("div");
|
|
jobLine.className = "text-[11px] text-slate-300 font-medium";
|
|
jobLine.textContent = obj.job_id;
|
|
|
|
const body = document.createElement("pre");
|
|
body.className = "bg-slate-950 border border-slate-800 rounded p-2 text-[11px] text-slate-200 overflow-auto";
|
|
body.textContent = JSON.stringify(payload, null, 2);
|
|
|
|
line.appendChild(header);
|
|
line.appendChild(jobLine);
|
|
line.appendChild(body);
|
|
}
|
|
eventsEl.prepend(line);
|
|
while (eventsEl.childNodes.length > 400) {
|
|
eventsEl.removeChild(eventsEl.lastChild);
|
|
}
|
|
}
|
|
|
|
function scheduleWsReconnect() {
|
|
if (state.wsReconnectTimer || !state.token) return;
|
|
state.wsReconnectTimer = setTimeout(() => {
|
|
state.wsReconnectTimer = null;
|
|
connectWs();
|
|
}, 1200);
|
|
}
|
|
|
|
function updateLatestVisualFromEvent(ev) {
|
|
if (!ev || ev.event_type !== "visual_update") return;
|
|
if (!state.selectedJobId || ev.job_id !== state.selectedJobId) return;
|
|
const imagePath = ev.payload && ev.payload.image_meta && ev.payload.image_meta.path;
|
|
if (!imagePath) return;
|
|
const q = encodeURIComponent(imagePath);
|
|
latestVisualEl.src = `/api/jobs/${state.selectedJobId}/artifact?path=${q}&token=${encodeURIComponent(state.token)}`;
|
|
}
|
|
|
|
async function refreshJobs() {
|
|
const payload = await api("/api/jobs?limit=100");
|
|
state.jobs = payload.jobs || [];
|
|
if (!state.selectedJobId && state.jobs.length > 0) state.selectedJobId = state.jobs[0].job_id;
|
|
renderJobs();
|
|
}
|
|
|
|
async function refreshStats() {
|
|
const payload = await api("/api/stats");
|
|
renderStats(payload);
|
|
}
|
|
|
|
async function refreshJobDetail() {
|
|
if (!state.selectedJobId) return;
|
|
const [job, events] = await Promise.all([
|
|
api(`/api/jobs/${state.selectedJobId}`),
|
|
api(`/api/jobs/${state.selectedJobId}/events?limit=120`)
|
|
]);
|
|
jobDetailEl.textContent = JSON.stringify(job, null, 2);
|
|
eventsEl.innerHTML = "";
|
|
const list = (events.events || []).slice().reverse();
|
|
for (const ev of list) pushEventLine(ev);
|
|
const visual = list.find((ev) => ev.event_type === "visual_update");
|
|
if (visual) updateLatestVisualFromEvent(visual);
|
|
}
|
|
|
|
function connectWs() {
|
|
if (!state.token) return;
|
|
if (state.ws && (state.ws.readyState === WebSocket.OPEN || state.ws.readyState === WebSocket.CONNECTING)) {
|
|
return;
|
|
}
|
|
const scheme = location.protocol === "https:" ? "wss" : "ws";
|
|
const ws = new WebSocket(`${scheme}://${location.host}/ws?token=${encodeURIComponent(state.token)}`);
|
|
state.ws = ws;
|
|
ws.onmessage = async (event) => {
|
|
try {
|
|
const payload = JSON.parse(event.data);
|
|
if (!payload || payload.event_type === "connected") return;
|
|
pushEventLine(payload);
|
|
updateLatestVisualFromEvent(payload);
|
|
if (!state.selectedJobId || payload.job_id === state.selectedJobId) {
|
|
await refreshJobDetail();
|
|
}
|
|
await refreshJobs();
|
|
await refreshStats();
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
};
|
|
ws.onclose = () => {
|
|
if (state.ws === ws) state.ws = null;
|
|
if (manuallyClosedSockets.has(ws)) {
|
|
manuallyClosedSockets.delete(ws);
|
|
return;
|
|
}
|
|
scheduleWsReconnect();
|
|
};
|
|
}
|
|
|
|
async function fullRefresh() {
|
|
await refreshJobs();
|
|
await refreshStats();
|
|
await refreshJobDetail();
|
|
}
|
|
|
|
async function connect() {
|
|
state.token = tokenInput.value.trim();
|
|
localStorage.setItem("screenjob_token", state.token);
|
|
if (state.ws) {
|
|
manuallyClosedSockets.add(state.ws);
|
|
try { state.ws.close(); } catch (_) {}
|
|
state.ws = null;
|
|
}
|
|
if (state.wsReconnectTimer) {
|
|
clearTimeout(state.wsReconnectTimer);
|
|
state.wsReconnectTimer = null;
|
|
}
|
|
await fullRefresh();
|
|
connectWs();
|
|
}
|
|
|
|
function syncEventsViewToggle() {
|
|
eventsViewToggle.checked = state.eventsViewMode === "beautiful";
|
|
}
|
|
|
|
saveTokenBtn.addEventListener("click", () => connect().catch((err) => alert(err.message)));
|
|
refreshBtn.addEventListener("click", () => fullRefresh().catch((err) => alert(err.message)));
|
|
eventsViewToggle.addEventListener("change", () => {
|
|
state.eventsViewMode = eventsViewToggle.checked ? "beautiful" : "raw";
|
|
localStorage.setItem("screenjob_events_view_mode", state.eventsViewMode);
|
|
refreshJobDetail().catch((err) => alert(err.message));
|
|
});
|
|
syncEventsViewToggle();
|
|
if (state.token) connect().catch(() => {});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
""".replace("__MONITOR_HOST__", host_suffix)
|