dash QOL
This commit is contained in:
Dobromir Popov
@@ -39,12 +39,41 @@
|
||||
.form-row { display:flex; gap:8px; }
|
||||
.form-row button { white-space:nowrap; }
|
||||
.error-msg { color:var(--bad); font-size:12px; min-height:16px; }
|
||||
.keybox { word-break:break-all; background:var(--bg); border:1px solid var(--border);
|
||||
.keybox { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
|
||||
position:relative;
|
||||
word-break:break-all; background:var(--bg); border:1px solid var(--border);
|
||||
border-radius:6px; padding:4px 8px; margin:4px 0; font-size:11px; }
|
||||
.key-text { cursor:text; flex:1 1 auto; min-width:12rem; }
|
||||
.copy-tooltip {
|
||||
position:absolute; right:8px; top:-26px;
|
||||
background:var(--panel); border:1px solid var(--border); color:var(--ok);
|
||||
padding:2px 8px; border-radius:4px; font-size:11px;
|
||||
pointer-events:none; z-index:1; white-space:nowrap;
|
||||
}
|
||||
.tabs { display:flex; gap:10px; margin-bottom:8px; }
|
||||
.tabs a { color:var(--dim); cursor:pointer; }
|
||||
.tabs a.active { color:var(--accent); border-bottom:1px solid var(--accent); }
|
||||
.dashboard-tabs { display:flex; gap:10px; padding:10px 20px 0; border-bottom:1px solid var(--border); }
|
||||
.dashboard-tabs button { border:0; border-bottom:1px solid transparent; border-radius:0;
|
||||
background:transparent; color:var(--dim); padding:5px 0 8px; }
|
||||
.dashboard-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
|
||||
.wide { grid-column:1 / -1; }
|
||||
section[hidden] { display:none !important; }
|
||||
.chat-shell { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(320px, 0.65fr); gap:12px; }
|
||||
.chat-pane { display:flex; flex-direction:column; gap:10px; min-width:0; }
|
||||
.chat-panel { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:10px; }
|
||||
.chat-controls { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
|
||||
.chat-controls label { display:flex; flex-direction:column; gap:4px; color:var(--dim); }
|
||||
.chat-controls select { min-width:220px; }
|
||||
.chat-history { display:flex; flex-direction:column; gap:8px; min-height:220px; max-height:420px; overflow:auto; }
|
||||
.chat-message { border:1px solid #21262d; border-radius:6px; padding:8px 10px; background:#10151d; }
|
||||
.chat-role { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
|
||||
.chat-role-user { color:var(--accent); }
|
||||
.chat-role-assistant { color:var(--ok); }
|
||||
.chat-role-error { color:var(--bad); }
|
||||
.chat-compose { display:flex; flex-direction:column; gap:8px; }
|
||||
.chat-compose textarea { min-height:112px; resize:vertical; width:100%; }
|
||||
.chat-status { color:var(--dim); font-size:12px; }
|
||||
.console {
|
||||
background:var(--bg); border:1px solid var(--border); border-radius:6px;
|
||||
min-height:160px; max-height:280px; overflow:auto; padding:7px 9px;
|
||||
@@ -55,6 +84,10 @@
|
||||
.console-level-info { color:var(--accent); }
|
||||
.console-level-warn { color:var(--warn); }
|
||||
.console-level-error { color:var(--bad); }
|
||||
.status-pending { color:var(--warn); }
|
||||
.status-processing { color:var(--accent); }
|
||||
.status-failed { color:var(--bad); }
|
||||
.status-complete { color:var(--ok); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -63,19 +96,50 @@
|
||||
<span class="meta" id="self-url"></span>
|
||||
<span class="meta" id="refreshed"></span>
|
||||
</header>
|
||||
<nav class="dashboard-tabs" aria-label="Dashboard sections">
|
||||
<button id="tab-overview" class="active" onclick="switchDashboardTab('overview')">Overview</button>
|
||||
<button id="tab-chat" onclick="switchDashboardTab('chat')">Chat</button>
|
||||
<button id="tab-billing" style="display:none" onclick="switchDashboardTab('billing')">Billing</button>
|
||||
<button id="tab-admin" style="display:none" onclick="switchDashboardTab('admin')">Admin</button>
|
||||
</nav>
|
||||
<main>
|
||||
<section id="account-section"><h2>Account</h2><div id="account">loading…</div></section>
|
||||
<section id="admin-section" style="display:none"><h2>All accounts (admin)</h2><div id="admin" class="empty"></div></section>
|
||||
<section><h2>Tracker hive</h2><div id="hive" class="empty">loading…</div></section>
|
||||
<section><h2>Nodes & coverage</h2><div id="nodes" class="empty">loading…</div></section>
|
||||
<section><h2>Client balances</h2><div id="clients" class="empty">loading…</div></section>
|
||||
<section><h2>Node pending payouts</h2><div id="pending" class="empty">loading…</div></section>
|
||||
<section><h2>Settlement history</h2><div id="settlements" class="empty">loading…</div></section>
|
||||
<section><h2>Strikes / bans / forfeitures</h2><div id="fraud" class="empty">loading…</div></section>
|
||||
<section><h2>Model usage (RPM)</h2><div id="stats" class="empty">loading…</div></section>
|
||||
<section><h2>Node throughput</h2><div id="throughput" class="empty">loading…</div></section>
|
||||
<section class="wide"><h2>Console output</h2><div id="console" class="console empty">loading…</div></section>
|
||||
<section class="wide"><h2>Inference history</h2><div id="inference-history" class="empty">loading...</div></section>
|
||||
<section data-tab="overview" id="account-section"><h2>Account</h2><div id="account">loading…</div></section>
|
||||
<section data-tab="overview"><h2>Tracker hive</h2><div id="hive" class="empty">loading…</div></section>
|
||||
<section data-tab="overview"><h2>Nodes & coverage</h2><div id="nodes" class="empty">loading…</div></section>
|
||||
<section data-tab="overview"><h2>Strikes / bans / forfeitures</h2><div id="fraud" class="empty">loading…</div></section>
|
||||
<section data-tab="overview"><h2>Model usage (RPM)</h2><div id="stats" class="empty">loading…</div></section>
|
||||
<section data-tab="overview" class="wide"><h2>Call wall</h2><div id="call-wall" class="empty">loading...</div></section>
|
||||
<section data-tab="chat" class="wide">
|
||||
<h2>Chat / inference</h2>
|
||||
<div class="chat-shell">
|
||||
<div class="chat-pane">
|
||||
<div class="chat-panel chat-controls">
|
||||
<label>Model
|
||||
<select id="chat-model" onchange="selectChatModel(this.value)"></select>
|
||||
</label>
|
||||
<button class="small" onclick="clearChatHistory()">clear history</button>
|
||||
</div>
|
||||
<div class="chat-panel chat-compose">
|
||||
<textarea id="chat-prompt" placeholder="Ask a question or describe the task"></textarea>
|
||||
<div class="form-row">
|
||||
<button onclick="sendChat()" id="chat-send">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-pane">
|
||||
<div class="chat-panel">
|
||||
<div id="chat-status" class="chat-status">select a model to start</div>
|
||||
<div id="chat-history" class="chat-history empty">no messages yet</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section data-tab="billing"><h2>Request history</h2><div id="billing-usage" class="empty">login required</div></section>
|
||||
<section data-tab="billing" data-admin-only><h2>Node pending payouts</h2><div id="pending" class="empty">admin login required</div></section>
|
||||
<section data-tab="billing" data-admin-only><h2>Settlement history</h2><div id="settlements" class="empty">admin login required</div></section>
|
||||
<section data-tab="admin" id="admin-section"><h2>All accounts (admin)</h2><div id="admin" class="empty"></div></section>
|
||||
<section data-tab="admin"><h2>Client balances</h2><div id="clients" class="empty">admin login required</div></section>
|
||||
<section data-tab="admin" class="wide"><h2>Console output</h2><div id="console" class="console empty">admin login required</div></section>
|
||||
</main>
|
||||
<script>
|
||||
"use strict";
|
||||
@@ -211,7 +275,7 @@ function renderStats(stats) {
|
||||
$("stats").innerHTML = table(["model", "rpm (1h)", "rpm (24h)", "rpm (30d)"], rows);
|
||||
}
|
||||
|
||||
function renderThroughput(stats) {
|
||||
function renderThroughputHtml(stats) {
|
||||
const nodes = (stats && stats.nodes) || {};
|
||||
const rows = [];
|
||||
for (const [nodeId, nodeStats] of Object.entries(nodes)) {
|
||||
@@ -224,49 +288,187 @@ function renderThroughput(stats) {
|
||||
]);
|
||||
}
|
||||
}
|
||||
$("throughput").innerHTML = table(["node", "model", "tps (1h)", "samples"], rows);
|
||||
if (!rows.length) return '<div class="empty">no throughput samples yet</div>';
|
||||
return table(["node", "model", "tps (1h)", "samples"], rows);
|
||||
}
|
||||
|
||||
function renderInferenceHistory(data) {
|
||||
const events = (data && data.events) || [];
|
||||
const started = new Map();
|
||||
const completed = [];
|
||||
function hiveThroughputSummary(stats) {
|
||||
const nodes = (stats && stats.nodes) || {};
|
||||
let totalTps = 0;
|
||||
let samples = 0;
|
||||
for (const nodeStats of Object.values(nodes)) {
|
||||
for (const s of Object.values((nodeStats && nodeStats.models) || {})) {
|
||||
const t = Number(s.tokens_per_sec_last_hour);
|
||||
if (Number.isFinite(t)) totalTps += t;
|
||||
samples += Number(s.sample_count_last_hour || 0);
|
||||
}
|
||||
}
|
||||
return { totalTps, samples };
|
||||
}
|
||||
|
||||
function buildCallWallStates(events) {
|
||||
const byId = new Map();
|
||||
for (const e of events) {
|
||||
const f = e.fields || {};
|
||||
const id = f.request_id;
|
||||
if (!id) continue;
|
||||
if (e.message === "proxy route selected") {
|
||||
started.set(id, e);
|
||||
} else if (e.message === "proxy complete" || e.message === "proxy failed" || e.message === "direct proxy failed after relay") {
|
||||
completed.push(e);
|
||||
started.delete(id);
|
||||
let rec = byId.get(id);
|
||||
if (!rec) {
|
||||
rec = { id, events: [] };
|
||||
byId.set(id, rec);
|
||||
}
|
||||
rec.events.push(e);
|
||||
const msg = e.message;
|
||||
if (msg === "proxy route selected") {
|
||||
rec.status = "pending";
|
||||
rec.started = e.ts;
|
||||
rec.model = f.model || f.route_model || "?";
|
||||
rec.route = f.route || f.nodes;
|
||||
rec.stream = f.stream;
|
||||
} else if (msg === "proxy via relay" || msg === "proxy connected") {
|
||||
rec.status = "processing";
|
||||
if (!rec.started) rec.started = e.ts;
|
||||
rec.model = rec.model || f.model || f.route_model || "?";
|
||||
} else if (msg === "proxy progress") {
|
||||
rec.status = "processing";
|
||||
rec.model = rec.model || f.model || f.route_model || "?";
|
||||
rec.tokens = f.tokens;
|
||||
rec.tps = f.tokens_per_sec;
|
||||
rec.elapsed = f.elapsed_seconds;
|
||||
rec.stream = f.stream;
|
||||
} else if (msg === "relay proxy failed, trying direct") {
|
||||
rec.status = "processing";
|
||||
rec.warn = "relay failed, trying direct";
|
||||
} else if (msg === "proxy complete") {
|
||||
rec.status = "complete";
|
||||
rec.model = rec.model || f.model || f.route_model || "?";
|
||||
rec.tokens = f.tokens;
|
||||
rec.tps = f.tokens_per_sec;
|
||||
rec.elapsed = f.elapsed_seconds;
|
||||
rec.stream = f.stream;
|
||||
rec.terminal = e;
|
||||
} else if (msg === "proxy failed" || msg === "direct proxy failed after relay") {
|
||||
rec.status = "failed";
|
||||
rec.model = rec.model || f.model || f.route_model || "?";
|
||||
rec.error = f.error || msg;
|
||||
rec.terminal = e;
|
||||
}
|
||||
}
|
||||
const activeByModel = {};
|
||||
for (const e of started.values()) {
|
||||
const f = e.fields || {};
|
||||
const model = f.model || f.route_model || "?";
|
||||
activeByModel[model] = (activeByModel[model] || 0) + 1;
|
||||
return byId;
|
||||
}
|
||||
|
||||
function callWallAgeSeconds(rec, nowSec) {
|
||||
const start = rec.started || (rec.events[0] && rec.events[0].ts) || nowSec;
|
||||
return Math.max(0, nowSec - start);
|
||||
}
|
||||
|
||||
function renderCallWall(consoleData, stats) {
|
||||
const events = (consoleData && consoleData.events) || [];
|
||||
const nowSec = Date.now() / 1000;
|
||||
const states = buildCallWallStates(events);
|
||||
const active = [];
|
||||
const terminal = [];
|
||||
for (const rec of states.values()) {
|
||||
if (rec.status === "pending" || rec.status === "processing") active.push(rec);
|
||||
else if (rec.status === "complete" || rec.status === "failed") terminal.push(rec);
|
||||
}
|
||||
const active = Object.entries(activeByModel)
|
||||
.map(([model, count]) => `${esc(model)}: <span class="num">${count}</span> active`)
|
||||
.join(" · ");
|
||||
const rows = completed.slice(-20).reverse().map(e => {
|
||||
active.sort((a, b) => (a.started || 0) - (b.started || 0));
|
||||
terminal.sort((a, b) => (b.terminal && b.terminal.ts) - (a.terminal && a.terminal.ts));
|
||||
|
||||
const hive = hiveThroughputSummary(stats);
|
||||
const pending = active.filter(r => r.status === "pending").length;
|
||||
const processing = active.filter(r => r.status === "processing").length;
|
||||
const failedRecent = terminal.filter(r => r.status === "failed").length;
|
||||
|
||||
let html =
|
||||
`<div class="dim" style="margin-bottom:6px">` +
|
||||
`hive tps (1h): <b>${esc(tps(hive.totalTps))}</b> · samples: <b>${hive.samples}</b> · ` +
|
||||
`active: <span class="status-processing">${processing}</span> processing · ` +
|
||||
`<span class="status-pending">${pending}</span> pending` +
|
||||
(failedRecent ? ` · <span class="status-failed">${failedRecent} recent failures</span>` : "") +
|
||||
`</div>`;
|
||||
|
||||
if (active.length) {
|
||||
html += table(["status", "age", "model", "request", "tps", "tokens", "route / note"], active.map(rec => {
|
||||
const statusCls = rec.status === "pending" ? "status-pending" : "status-processing";
|
||||
const note = rec.warn || (rec.route ? short(String(rec.route), 28) : "");
|
||||
return [
|
||||
`<span class="${statusCls}">${esc(rec.status)}</span>`,
|
||||
`<span class="num">${esc(callWallAgeSeconds(rec, nowSec).toFixed(1))}s</span>`,
|
||||
esc(short(rec.model || "?", 28)),
|
||||
esc(short(rec.id, 18)),
|
||||
`<span class="num">${esc(tps(rec.tps))}</span>`,
|
||||
`<span class="num">${esc(String(rec.tokens ?? "—"))}</span>`,
|
||||
esc(note),
|
||||
];
|
||||
}));
|
||||
} else {
|
||||
html += '<div class="empty">no in-flight requests</div>';
|
||||
}
|
||||
|
||||
const historyRows = terminal.slice(0, 40).map(rec => {
|
||||
const e = rec.terminal || {};
|
||||
const f = e.fields || {};
|
||||
const statusCls = rec.status === "failed" ? "status-failed" : "status-complete";
|
||||
const detail = rec.status === "failed"
|
||||
? esc(short(rec.error || "?", 40))
|
||||
: (f.stream ? "stream" : "json");
|
||||
return [
|
||||
new Date((e.ts || 0) * 1000).toLocaleTimeString(),
|
||||
esc(short(f.model || f.route_model || "?", 28)),
|
||||
esc(short(f.request_id || "?", 18)),
|
||||
`<span class="num">${esc(tps(f.tokens_per_sec))}</span>`,
|
||||
`<span class="num">${esc(String(f.tokens ?? "?"))}</span>`,
|
||||
`<span class="num">${esc(String(f.elapsed_seconds ?? "?"))}</span>`,
|
||||
f.stream ? "stream" : "json",
|
||||
`<span class="${statusCls}">${esc(rec.status)}</span>`,
|
||||
esc(short(rec.model || "?", 28)),
|
||||
esc(short(rec.id, 18)),
|
||||
`<span class="num">${esc(tps(rec.tps ?? f.tokens_per_sec))}</span>`,
|
||||
`<span class="num">${esc(String(rec.tokens ?? f.tokens ?? "?"))}</span>`,
|
||||
`<span class="num">${esc(String(rec.elapsed ?? f.elapsed_seconds ?? "?"))}</span>`,
|
||||
detail,
|
||||
];
|
||||
});
|
||||
$("inference-history").innerHTML =
|
||||
`<div class="dim" style="margin-bottom:6px">${active || "no active requests"}</div>` +
|
||||
(rows.length ? table(["time", "model", "request", "tps", "tokens", "sec", "mode"], rows)
|
||||
: '<div class="empty">no completed inference requests</div>');
|
||||
html += '<div style="margin-top:8px"><b class="dim">recent completed / failed</b></div>';
|
||||
html += historyRows.length
|
||||
? table(["time", "status", "model", "request", "tps", "tokens", "sec", "detail"], historyRows)
|
||||
: '<div class="empty">no completed requests yet</div>';
|
||||
$("call-wall").innerHTML = html;
|
||||
}
|
||||
|
||||
function groupUsageByDayModel(records) {
|
||||
const groups = new Map();
|
||||
for (const u of records) {
|
||||
const day = new Date((u.ts || 0) * 1000).toLocaleDateString();
|
||||
const model = u.model || "?";
|
||||
const key = day + "\0" + model;
|
||||
const g = groups.get(key) || { day, model, requests: 0, tokens: 0, cost: 0 };
|
||||
g.requests += 1;
|
||||
g.tokens += Number(u.total_tokens || 0);
|
||||
g.cost += Number(u.cost || 0);
|
||||
groups.set(key, g);
|
||||
}
|
||||
return Array.from(groups.values()).sort((a, b) => {
|
||||
const dayCmp = b.day.localeCompare(a.day);
|
||||
return dayCmp !== 0 ? dayCmp : a.model.localeCompare(b.model);
|
||||
});
|
||||
}
|
||||
|
||||
function renderBillingUsage(records) {
|
||||
const el = $("billing-usage");
|
||||
if (!el) return;
|
||||
if (!sessionToken) {
|
||||
el.innerHTML = '<div class="empty">login required</div>';
|
||||
return;
|
||||
}
|
||||
if (!records.length) {
|
||||
el.innerHTML = '<div class="empty">no billed requests yet</div>';
|
||||
return;
|
||||
}
|
||||
const rows = records.slice().reverse().map(u => [
|
||||
new Date((u.ts || 0) * 1000).toLocaleString(),
|
||||
esc(short(u.model || "?", 28)),
|
||||
esc(short(u.api_key || "?", 14)),
|
||||
`<span class="num">${esc(String(u.total_tokens))}</span>`,
|
||||
`<span class="num">${usdt(u.cost)}</span>`,
|
||||
]);
|
||||
el.innerHTML = `<div class="dim" style="margin-bottom:6px">${records.length} request${records.length === 1 ? "" : "s"}</div>` +
|
||||
table(["time", "model", "api key", "tokens", "cost (USDT)"], rows);
|
||||
}
|
||||
|
||||
function renderConsole(data) {
|
||||
@@ -288,10 +490,123 @@ function renderConsole(data) {
|
||||
|
||||
let sessionToken = localStorage.getItem("meshnet_session") || null;
|
||||
let authTab = "login";
|
||||
let dashboardTab = "overview";
|
||||
let isAdmin = false;
|
||||
let isLoggedIn = false;
|
||||
let accountApiKeys = [];
|
||||
let accountUsageRecords = [];
|
||||
let lastStats = null;
|
||||
let availableModels = [];
|
||||
let chatHistory = [];
|
||||
let chatBusy = false;
|
||||
let selectedChatModel = localStorage.getItem("meshnet_chat_model") || "";
|
||||
|
||||
async function apiCall(path, method, body) {
|
||||
function switchDashboardTab(name) {
|
||||
if (name === "admin" && !isAdmin) name = "overview";
|
||||
if (name === "billing" && !isLoggedIn) name = "overview";
|
||||
dashboardTab = name;
|
||||
updateSectionVisibility();
|
||||
for (const tabName of ["overview", "chat", "billing", "admin"]) {
|
||||
const button = $("tab-" + tabName);
|
||||
if (button) button.classList.toggle("active", tabName === dashboardTab);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSectionVisibility() {
|
||||
for (const section of document.querySelectorAll("main section[data-tab]")) {
|
||||
const onTab = section.dataset.tab === dashboardTab;
|
||||
const adminOnly = section.hasAttribute("data-admin-only");
|
||||
section.hidden = !onTab || (adminOnly && !isAdmin);
|
||||
}
|
||||
}
|
||||
|
||||
function renderChatStatus(text) {
|
||||
$("chat-status").textContent = text;
|
||||
}
|
||||
|
||||
function renderChatHistory() {
|
||||
const history = $("chat-history");
|
||||
if (!chatHistory.length) {
|
||||
history.classList.add("empty");
|
||||
history.innerHTML = "no messages yet";
|
||||
return;
|
||||
}
|
||||
history.classList.remove("empty");
|
||||
history.innerHTML = chatHistory.map(msg => {
|
||||
const roleClass = msg.role === "user" ? "chat-role-user" : msg.role === "assistant" ? "chat-role-assistant" : "chat-role-error";
|
||||
const label = msg.role === "user" ? "user" : msg.role === "assistant" ? "assistant" : "error";
|
||||
const meta = msg.model ? ` <span class="dim">· ${esc(short(msg.model, 24))}</span>` : "";
|
||||
return `<div class="chat-message"><div class="chat-role ${roleClass}">${label}${meta}</div><div>${esc(msg.content)}</div></div>`;
|
||||
}).join("");
|
||||
history.scrollTop = history.scrollHeight;
|
||||
}
|
||||
|
||||
function renderChatModels() {
|
||||
const select = $("chat-model");
|
||||
if (!select) return;
|
||||
const models = availableModels.slice();
|
||||
if (!models.length) {
|
||||
select.innerHTML = '<option value="">no models available</option>';
|
||||
select.disabled = true;
|
||||
return;
|
||||
}
|
||||
select.disabled = false;
|
||||
const preferred = models.find(m => m.id === selectedChatModel)
|
||||
|| models[0];
|
||||
selectedChatModel = preferred.id;
|
||||
localStorage.setItem("meshnet_chat_model", selectedChatModel);
|
||||
select.innerHTML = models.map(model => {
|
||||
const label = model.name && model.name !== model.id
|
||||
? `${model.name} (${model.id})`
|
||||
: model.id;
|
||||
const suffix = model.recommended ? " [recommended]" : "";
|
||||
return `<option value="${esc(model.id)}"${model.id === selectedChatModel ? " selected" : ""}>${esc(label + suffix)}</option>`;
|
||||
}).join("");
|
||||
select.value = selectedChatModel;
|
||||
}
|
||||
|
||||
function selectChatModel(value) {
|
||||
selectedChatModel = value || "";
|
||||
localStorage.setItem("meshnet_chat_model", selectedChatModel);
|
||||
}
|
||||
|
||||
function clearChatHistory() {
|
||||
chatHistory = [];
|
||||
renderChatHistory();
|
||||
renderChatStatus("history cleared");
|
||||
}
|
||||
|
||||
function chatAuthToken() {
|
||||
if (accountApiKeys.length) return accountApiKeys[0];
|
||||
return null;
|
||||
}
|
||||
|
||||
function setAdminMode(enabled) {
|
||||
isAdmin = enabled;
|
||||
$("tab-admin").style.display = enabled ? "" : "none";
|
||||
if (!enabled && dashboardTab === "admin") {
|
||||
switchDashboardTab("overview");
|
||||
} else {
|
||||
updateSectionVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
function setLoggedInMode(enabled) {
|
||||
isLoggedIn = enabled;
|
||||
$("tab-billing").style.display = enabled ? "" : "none";
|
||||
if (!enabled) {
|
||||
accountUsageRecords = [];
|
||||
renderBillingUsage([]);
|
||||
if (dashboardTab === "billing") switchDashboardTab("overview");
|
||||
} else {
|
||||
updateSectionVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
async function apiCall(path, method, body, bearerToken) {
|
||||
const headers = { "Content-Type": "application/json" };
|
||||
if (sessionToken) headers["Authorization"] = "Bearer " + sessionToken;
|
||||
const token = bearerToken === undefined ? sessionToken : bearerToken;
|
||||
if (token) headers["Authorization"] = "Bearer " + token;
|
||||
try {
|
||||
const r = await fetch(path, {
|
||||
method: method || "GET",
|
||||
@@ -327,7 +642,10 @@ function renderAuthForms(errorMsg) {
|
||||
$("account").innerHTML =
|
||||
`<div class="tabs">${tab("login", "Log in")}${tab("register", "Register")}</div>` +
|
||||
form + `<div class="error-msg">${errorMsg ? esc(errorMsg) : ""}</div>`;
|
||||
$("admin-section").style.display = "none";
|
||||
accountApiKeys = [];
|
||||
renderChatAuthHint();
|
||||
setLoggedInMode(false);
|
||||
setAdminMode(false);
|
||||
}
|
||||
|
||||
function switchAuthTab(name) { authTab = name; renderAuthForms(); }
|
||||
@@ -375,15 +693,82 @@ async function topupKey(key) {
|
||||
await renderAccountPanel();
|
||||
}
|
||||
|
||||
const COPY_TOOLTIP_MS = 2000;
|
||||
|
||||
function showCopiedTooltip(anchor) {
|
||||
const box = (anchor && anchor.closest && anchor.closest(".keybox")) || anchor;
|
||||
if (!box) return;
|
||||
const existing = box.querySelector(".copy-tooltip");
|
||||
if (existing) existing.remove();
|
||||
const tip = document.createElement("span");
|
||||
tip.className = "copy-tooltip";
|
||||
tip.textContent = "Copied!";
|
||||
tip.setAttribute("role", "status");
|
||||
box.appendChild(tip);
|
||||
setTimeout(() => tip.remove(), COPY_TOOLTIP_MS);
|
||||
}
|
||||
|
||||
async function copyApiKeyText(text, anchor) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
} catch {
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.left = "-9999px";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { document.execCommand("copy"); } catch { /* ignore */ }
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
if (anchor) showCopiedTooltip(anchor);
|
||||
}
|
||||
|
||||
function selectApiKeyText(el) {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(el);
|
||||
const sel = window.getSelection();
|
||||
if (!sel) return;
|
||||
sel.removeAllRanges();
|
||||
sel.addRange(range);
|
||||
}
|
||||
|
||||
function copyApiKeyFromTextEl(el) {
|
||||
const key = el.dataset.key || el.textContent || "";
|
||||
return copyApiKeyText(key, el);
|
||||
}
|
||||
|
||||
function copyApiKeyFromButton(button) {
|
||||
const el = button.closest(".keybox") && button.closest(".keybox").querySelector(".key-text");
|
||||
const key = (el && el.dataset.key) || "";
|
||||
return copyApiKeyText(key, button);
|
||||
}
|
||||
|
||||
function renderChatAuthHint() {
|
||||
if (chatAuthToken()) {
|
||||
renderChatStatus("ready to send with your active API key");
|
||||
} else if (sessionToken) {
|
||||
renderChatStatus("create an API key in Account to use chat on a billing-enabled tracker");
|
||||
} else {
|
||||
renderChatStatus("log in if this tracker requires an API key");
|
||||
}
|
||||
}
|
||||
|
||||
async function renderAccountPanel() {
|
||||
const r = await apiCall("/v1/account");
|
||||
if (r.status === 404) { // accounts disabled on this tracker
|
||||
$("account-section").style.display = "none";
|
||||
$("admin-section").style.display = "none";
|
||||
accountApiKeys = [];
|
||||
accountUsageRecords = [];
|
||||
renderChatAuthHint();
|
||||
setLoggedInMode(false);
|
||||
setAdminMode(false);
|
||||
return;
|
||||
}
|
||||
if (!r.ok) { setSession(null); renderAuthForms(); return; }
|
||||
const { account, api_keys, balances, total_balance, usage, topup_amount } = r.data;
|
||||
accountApiKeys = Array.isArray(api_keys) ? api_keys.slice() : [];
|
||||
accountUsageRecords = (usage && (usage.records || usage.recent)) || [];
|
||||
const who = account.email || account.wallet || account.account_id;
|
||||
let html =
|
||||
`<div><b>${esc(who)}</b> <span class="pill">${esc(account.role)}</span> ` +
|
||||
@@ -395,8 +780,10 @@ async function renderAccountPanel() {
|
||||
'<button class="small" onclick="createKey()">+ new key</button></div>';
|
||||
if (api_keys.length) {
|
||||
for (const key of api_keys) {
|
||||
html += `<div class="keybox">${esc(key)}` +
|
||||
` <span class="dim">(${usdt(balances[key] ?? 0)} USDT)</span>` +
|
||||
html += `<div class="keybox">` +
|
||||
`<span class="key-text" data-key="${esc(key)}" onclick="selectApiKeyText(this)" ondblclick="copyApiKeyFromTextEl(this)">${esc(key)}</span>` +
|
||||
`<span class="dim">(${usdt(balances[key] ?? 0)} USDT)</span>` +
|
||||
`<button class="small" type="button" onclick="copyApiKeyFromButton(this)">copy</button>` +
|
||||
(topup_amount > 0
|
||||
? ` <button class="small" onclick="topupKey('${esc(key)}')">+${usdt(topup_amount)} (devnet)</button>`
|
||||
: "") +
|
||||
@@ -405,24 +792,86 @@ async function renderAccountPanel() {
|
||||
} else {
|
||||
html += '<div class="empty">no active keys</div>';
|
||||
}
|
||||
if (usage.recent && usage.recent.length) {
|
||||
html += '<div style="margin-top:6px"><b class="dim">recent usage</b></div>' +
|
||||
table(["time", "model", "tokens", "cost"], usage.recent.slice().reverse().map(u => [
|
||||
new Date(u.ts * 1000).toLocaleTimeString(),
|
||||
esc(short(u.model || "?", 24)),
|
||||
`<span class="num">${esc(String(u.total_tokens))}</span>`,
|
||||
`<span class="num">${usdt(u.cost)}</span>`,
|
||||
html += '<div style="margin-top:8px"><b class="dim">node throughput</b></div>' +
|
||||
`<div id="account-throughput">${renderThroughputHtml(lastStats)}</div>`;
|
||||
const grouped = groupUsageByDayModel(accountUsageRecords);
|
||||
if (grouped.length) {
|
||||
html += '<div style="margin-top:8px"><b class="dim">usage by day / model</b> ' +
|
||||
'<span class="dim">(full request list on Billing tab)</span></div>' +
|
||||
table(["day", "model", "requests", "tokens", "cost (USDT)"], grouped.map(g => [
|
||||
esc(g.day),
|
||||
esc(short(g.model, 28)),
|
||||
`<span class="num">${g.requests}</span>`,
|
||||
`<span class="num">${esc(String(g.tokens))}</span>`,
|
||||
`<span class="num">${usdt(g.cost)}</span>`,
|
||||
]));
|
||||
}
|
||||
$("account").innerHTML = html;
|
||||
renderBillingUsage(accountUsageRecords);
|
||||
renderChatAuthHint();
|
||||
renderChatModels();
|
||||
renderChatHistory();
|
||||
setLoggedInMode(true);
|
||||
setAdminMode(account.role === "admin");
|
||||
if (account.role === "admin") await renderAdminPanel();
|
||||
else $("admin-section").style.display = "none";
|
||||
}
|
||||
|
||||
async function sendChat() {
|
||||
const promptEl = $("chat-prompt");
|
||||
const prompt = promptEl.value.trim();
|
||||
if (!prompt || chatBusy) return;
|
||||
if (!selectedChatModel) {
|
||||
renderChatStatus("select a model first");
|
||||
return;
|
||||
}
|
||||
const bearerToken = chatAuthToken();
|
||||
const body = {
|
||||
model: selectedChatModel,
|
||||
messages: [
|
||||
...chatHistory
|
||||
.filter(msg => msg.role === "user" || msg.role === "assistant")
|
||||
.map(msg => ({ role: msg.role, content: msg.content })),
|
||||
{ role: "user", content: prompt },
|
||||
],
|
||||
stream: false,
|
||||
max_tokens: 256,
|
||||
};
|
||||
chatBusy = true;
|
||||
$("chat-send").disabled = true;
|
||||
promptEl.value = "";
|
||||
chatHistory.push({ role: "user", content: prompt, model: selectedChatModel });
|
||||
renderChatHistory();
|
||||
renderChatStatus("sending request…");
|
||||
const r = await apiCall("/v1/chat/completions", "POST", body, bearerToken);
|
||||
chatBusy = false;
|
||||
$("chat-send").disabled = false;
|
||||
if (!r.ok) {
|
||||
const error = r.data && r.data.error
|
||||
? (typeof r.data.error === "string" ? r.data.error : r.data.error.message || "request failed")
|
||||
: "request failed";
|
||||
chatHistory.push({ role: "error", content: error, model: selectedChatModel });
|
||||
renderChatHistory();
|
||||
renderChatStatus(error);
|
||||
promptEl.focus();
|
||||
return;
|
||||
}
|
||||
const reply = (r.data && r.data.choices && r.data.choices[0] && r.data.choices[0].message && r.data.choices[0].message.content) || "";
|
||||
const usage = r.data && r.data.usage;
|
||||
chatHistory.push({
|
||||
role: "assistant",
|
||||
content: reply || "(empty response)",
|
||||
model: selectedChatModel,
|
||||
});
|
||||
renderChatHistory();
|
||||
renderChatStatus(usage
|
||||
? `done: ${usage.total_tokens ?? "?"} tokens`
|
||||
: "done");
|
||||
promptEl.focus();
|
||||
}
|
||||
|
||||
async function renderAdminPanel() {
|
||||
const r = await apiCall("/v1/admin/accounts");
|
||||
if (!r.ok) { $("admin-section").style.display = "none"; return; }
|
||||
$("admin-section").style.display = "";
|
||||
if (!r.ok) { setAdminMode(false); return; }
|
||||
const rows = (r.data.accounts || []).map(a => {
|
||||
const balance = Object.values(a.balances || {}).reduce((x, y) => x + y, 0);
|
||||
return [
|
||||
@@ -438,28 +887,45 @@ async function renderAdminPanel() {
|
||||
|
||||
async function refresh() {
|
||||
$("self-url").textContent = location.host;
|
||||
const [raft, map, summary, settlements, wallets, stats, consoleData] = await Promise.all([
|
||||
const [raft, map, stats, models, consoleData, adminData] = await Promise.all([
|
||||
fetchJson("/v1/raft/status"),
|
||||
fetchJson("/v1/network/map"),
|
||||
fetchJson("/v1/billing/summary"),
|
||||
fetchJson("/v1/billing/settlements"),
|
||||
fetchJson("/v1/registry/wallets"),
|
||||
fetchJson("/v1/stats"),
|
||||
fetchJson("/v1/models"),
|
||||
fetchJson("/v1/console"),
|
||||
isAdmin ? Promise.all([
|
||||
fetchJson("/v1/billing/summary"),
|
||||
fetchJson("/v1/billing/settlements"),
|
||||
fetchJson("/v1/registry/wallets"),
|
||||
]) : Promise.resolve([null, null, null]),
|
||||
]);
|
||||
const [summary, settlements, wallets] = adminData;
|
||||
lastStats = stats;
|
||||
availableModels = ((models && models.data) || []).map(model => ({
|
||||
id: model.id,
|
||||
name: model.name || model.id,
|
||||
recommended: Boolean(model.recommended),
|
||||
aliases: model.aliases || [],
|
||||
})).filter(model => model.id);
|
||||
renderHive(raft);
|
||||
renderNodes(map);
|
||||
renderBilling(summary);
|
||||
renderSettlements(settlements);
|
||||
renderFraud(wallets, summary);
|
||||
renderStats(stats);
|
||||
renderThroughput(stats);
|
||||
renderInferenceHistory(consoleData);
|
||||
renderCallWall(consoleData, stats);
|
||||
renderConsole(consoleData);
|
||||
const throughputEl = $("account-throughput");
|
||||
if (throughputEl) throughputEl.innerHTML = renderThroughputHtml(stats);
|
||||
renderChatModels();
|
||||
renderChatHistory();
|
||||
$("refreshed").textContent = "refreshed " + new Date().toLocaleTimeString();
|
||||
}
|
||||
refresh();
|
||||
renderAccountPanel();
|
||||
renderChatModels();
|
||||
renderChatHistory();
|
||||
renderChatAuthHint();
|
||||
setInterval(refresh, 4000);
|
||||
setInterval(() => { if (sessionToken) renderAccountPanel(); }, 8000);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user