feat(dashboard): browse every client system info report, per account and across accounts

The account page lists the account's reports as a table and the Client System Info page lists every report (or each account's newest), sortable and searchable by account name or video card; a row opens every field. Values that say little about the real system are marked, and every caveat is a tooltip on the value and column.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dDashboardServer/routes/ClientSysInfoRoutes.cpp

@@ -2,6 +2,9 @@
 
 #include "ClientSysInfoView.h"
 #include "Database.h"
+#include "GeneralUtils.h"
+
+#include <algorithm>
 #include "RouteUtils.h"
 #include "eHTTPMethod.h"
 
@@ -27,14 +30,46 @@ void ClientSysInfoRoutes::RegisterRoutes() {
 			const bool showIp = Can(context, "logs_audit");
 			nlohmann::json rows = nlohmann::json::array();
 			for (const auto& row : Database::Get()->GetClientSysInfo(*accountId, HISTORY_ROWS)) rows.push_back(ClientSysInfoView::RowJson(row, showIp));
-			JsonSuccess(reply, { {"rows", rows}, {"caveats", ClientSysInfoView::Caveats()}, {"showsIp", showIp} });
+			JsonSuccess(reply, { {"rows", rows}, {"caveats", ClientSysInfoView::Caveats()}, {"trust", ClientSysInfoView::Trust()}, {"showsIp", showIp} });
 		});
 
 	Route(eHTTPMethod::GET, "/api/client_sysinfo/spread", Perm("client_sysinfo"),
 		"How the system info clients report is spread across players, from each account's newest row (approximate: as reported by the "
 		"client): {spread: {accounts, os, video, memory, processors, clientOs: [{label, count}]}, caveats}",
-		[](HTTPReply& reply, const HTTPContext&) {
+		[](HTTPReply& reply, const HTTPContext& context) {
 			JsonSuccess(reply, { {"spread", ClientSysInfoView::Spread(Database::Get()->GetLatestClientSysInfo(SPREAD_ACCOUNTS))},
-				{"caveats", ClientSysInfoView::Caveats()} });
+				{"caveats", ClientSysInfoView::Caveats()}, {"trust", ClientSysInfoView::Trust()}, {"showsIp", Can(context, "logs_audit")} });
+		});
+
+	Route(eHTTPMethod::POST, "/api/tables/client_sysinfo", Perm("client_sysinfo"),
+		"Every client system info row across accounts for browsing (DataTables), as reported by the client; rows as "
+		"/api/accounts/:id/client_sysinfo plus account_name. Search: part of the account name or video card. Body adds {latest (bool: only each "
+		"account's newest row), account (ID)}. Columns: last seen, account, logins, Windows version, video card, processors, memory, client build, "
+		"first seen. ip only with logs_audit",
+		[](HTTPReply& reply, const HTTPContext& context) {
+			const auto request = ParseDataTablesRequest(context.body);
+			const auto body = ParseBody(context);
+			if (!request || !body) return JsonError(reply, eHTTPStatusCode::BAD_REQUEST, "Invalid JSON");
+			IClientSysInfo::SysInfoQuery query;
+			query.search = request->search;
+			query.latestOnly = body->value("latest", false);
+			if (const auto it = body->find("account"); it != body->end()) {
+				if (it->is_number_unsigned()) query.accountId = it->get<uint32_t>();
+				else if (it->is_string()) query.accountId = GeneralUtils::TryParse<uint32_t>(it->get<std::string>()).value_or(0);
+			}
+			query.order = static_cast<IClientSysInfo::eSysInfoOrder>(std::min<uint32_t>(request->orderColumn,
+				static_cast<uint32_t>(IClientSysInfo::eSysInfoOrder::FIRST_SEEN)));
+			query.ascending = request->orderAsc;
+			query.offset = request->start;
+			query.limit = std::clamp<uint32_t>(request->length, 1, 500);
+			const bool showIp = Can(context, "logs_audit");
+			nlohmann::json rows = nlohmann::json::array();
+			for (const auto& row : Database::Get()->ListClientSysInfo(query)) rows.push_back(ClientSysInfoView::RowJson(row, showIp));
+			IClientSysInfo::SysInfoQuery all;
+			all.latestOnly = query.latestOnly;
+			all.accountId = query.accountId;
+			JsonReply(reply, eHTTPStatusCode::OK, { {"draw", request->draw}, {"recordsTotal", Database::Get()->CountClientSysInfo(all)},
+				{"recordsFiltered", Database::Get()->CountClientSysInfo(query)}, {"data", rows}, {"caveats", ClientSysInfoView::Caveats()},
+				{"trust", ClientSysInfoView::Trust()}, {"showsIp", showIp} });
 		});
 }

dDashboardServer/routes/ClientSysInfoView.cpp

@@ -64,6 +64,15 @@ const nlohmann::json& ClientSysInfoView::Caveats() {
 	return caveats;
 }
 
+const nlohmann::json& ClientSysInfoView::Trust() {
+	static const nlohmann::json trust = {
+		{"clientOs", "unreliable"}, {"processorType", "unreliable"}, {"osVersionInfoSize", "unreliable"}, {"osVersion", "unreliable"},
+		{"platformId", "unreliable"}, {"memoryStats", "approximate"}, {"videoCard", "approximate"}, {"numberOfProcessors", "approximate"},
+		{"processorLevel", "approximate"}, {"processorRevision", "approximate"},
+	};
+	return trust;
+}
+
 std::string ClientSysInfoView::OsVersion(const IClientSysInfo::SysInfoRow& row) {
 	return std::to_string(row.majorVersion) + "." + std::to_string(row.minorVersion) + "." + std::to_string(row.buildNumber);
 }
@@ -116,6 +125,7 @@ nlohmann::json ClientSysInfoView::RowJson(const IClientSysInfo::SysInfoRow& row,
 		{"os_version", OsVersion(row)}, {"os_label", OsLabel(row)},
 	};
 	if (showIp) out["ip"] = row.ip;
+	if (!row.accountName.empty()) out["account_name"] = row.accountName;
 	return out;
 }
 

dDashboardServer/routes/ClientSysInfoView.h

@@ -17,6 +17,10 @@ namespace ClientSysInfoView {
 	// field -> what it is and how far to trust it, for the page and the API
 	const nlohmann::json& Caveats();
 
+	// field -> "unreliable" (says little or nothing about the player's system) or "approximate" (usually right, with
+	// exceptions); fields not listed can be taken as sent
+	const nlohmann::json& Trust();
+
 	// One row as the dashboard sends it: the raw values, plus labels and the memory text split into numbers. The
 	// address is only included when showIp (logs_audit).
 	nlohmann::json RowJson(const IClientSysInfo::SysInfoRow& row, bool showIp);

dDashboardServer/static/css/dashboard.css

@@ -262,3 +262,8 @@ html.nav-loading main { opacity: .65; transition: opacity .2s; }
 	border-radius: .2rem; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); max-width: 9rem; overflow: hidden;
 	text-overflow: ellipsis; }
 .timeline-marker:hover > span, .timeline-marker:focus-visible > span { max-width: none; z-index: 1; }
+
+/* Client system info: values whose caveat is a tooltip; unreliable ones stand out more */
+.sysinfo-tip { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
+.sysinfo-unreliable { text-decoration-color: var(--bs-warning); }
+#sysinfoTable tbody tr { cursor: pointer; }

dDashboardServer/static/js/client-sysinfo.js

@@ -1,27 +1,44 @@
 /**
- * Client system info (client_sysinfo): the card on an account's page (#sysinfoCard) with every description the
- * account's client sent at login, and the Client System Info page (#sysinfoPage) with the spread across players.
- * Everything here is as reported by the client, which often reports compatibility values rather than the real
- * hardware; each field is shown with what it is worth (the caveats the API sends).
+ * Client system info (client_sysinfo): the table on an account's page (#sysinfoCard) with every description the
+ * account's client sent at login, and the Client System Info page (#sysinfoPage) with the spread across players and
+ * every report browsable (#sysinfoTable). Everything here is as reported by the client, which often reports
+ * compatibility values rather than the real hardware: values that can't be trusted are marked, and their tooltip says
+ * what they are worth (the caveats and trust levels the API sends).
  */
 (function () {
 	'use strict';
 
+	var caveats = {}, trust = {}, showsIp = false;
+
 	function kb(n) { return n === null || n === undefined ? '-' : fmt.bytes(Number(n) * 1024); }
 	function bytes(n) { return n === null || n === undefined ? '-' : fmt.bytes(n); }
 	function hex(n) { return '0x' + Number(n).toString(16); }
-	function caveat(caveats, key) { return caveats[key] ? '<div class="small text-body-secondary">' + esc(caveats[key]) + '</div>' : ''; }
+
+	// A value with its caveat as a tooltip: unreliable values get a warning mark, approximate ones a dotted underline
+	function tip(key, html) {
+		var level = trust[key], text = caveats[key];
+		if (!text) return html;
+		var mark = level === 'unreliable' ? ' <span class="text-warning" aria-hidden="true">&#9888;</span>' : '';
+		var label = level === 'unreliable' ? 'Unreliable: ' : level === 'approximate' ? 'Approximate: ' : '';
+		return '<span class="sysinfo-tip sysinfo-' + esc(level || 'note') + '" tabindex="0" data-bs-toggle="tooltip" data-bs-title="' + esc(label + text) + '">' +
+			html + mark + '</span>';
+	}
+
+	function tooltips(root) {
+		if (!window.bootstrap) return;
+		root.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) { bootstrap.Tooltip.getOrCreateInstance(el); });
+	}
 
 	// Every field of one row: [label, value (html), caveat key]
-	function fields(r, showsIp) {
+	function fields(r) {
 		var m = r.memory;
 		var list = [
 			['Client build (clientOS)', esc(r.client_os) + ' (' + esc(r.client_os_name) + ')', 'clientOs'],
 			['Memory text (memoryStats), as sent', '<code class="text-break">' + esc(r.memory_stats) + '</code>' + (m.complete ? '' : ' <span class="badge text-bg-secondary">not fully read</span>'), 'memoryStats'],
-			['Physical memory: total / free', kb(m.total_phys_kb) + ' / ' + kb(m.avail_phys_kb) + (m.memory_load_percent === null ? '' : ' (' + esc(m.memory_load_percent) + '% in use)'), ''],
-			['Commit limit (pfile): total / free', kb(m.total_pagefile_kb) + ' / ' + kb(m.avail_pagefile_kb), ''],
-			['Client address space (vmem): total / free', kb(m.total_virtual_kb) + ' / ' + kb(m.avail_virtual_kb), ''],
-			['Client process: working set / private (peak)', bytes(m.working_set_bytes) + ' / ' + bytes(m.pagefile_usage_bytes) + ' (' + bytes(m.peak_working_set_bytes) + ' / ' + bytes(m.peak_pagefile_usage_bytes) + ')', ''],
+			['Physical memory: total / free', kb(m.total_phys_kb) + ' / ' + kb(m.avail_phys_kb) + (m.memory_load_percent === null ? '' : ' (' + esc(m.memory_load_percent) + '% in use)'), 'memoryStats'],
+			['Commit limit (pfile): total / free', kb(m.total_pagefile_kb) + ' / ' + kb(m.avail_pagefile_kb), 'memoryStats'],
+			['Client address space (vmem): total / free', kb(m.total_virtual_kb) + ' / ' + kb(m.avail_virtual_kb), 'memoryStats'],
+			['Client process: working set / private (peak)', bytes(m.working_set_bytes) + ' / ' + bytes(m.pagefile_usage_bytes) + ' (' + bytes(m.peak_working_set_bytes) + ' / ' + bytes(m.peak_pagefile_usage_bytes) + ')', 'memoryStats'],
 			['Video card (videoCard)', esc(r.video_card || '(empty)'), 'videoCard'],
 			['Processors (numberOfProcessors)', esc(r.number_of_processors), 'numberOfProcessors'],
 			['Processor type (processorType)', esc(r.processor_type), 'processorType'],
@@ -35,34 +52,83 @@
 		return list;
 	}
 
+	function details(r) {
+		return '<div class="table-responsive"><table class="table table-sm mb-0"><tbody>' + fields(r).map(function (f) {
+			return '<tr><th class="fw-normal text-nowrap">' + esc(f[0]) + '</th><td>' + tip(f[2], f[1]) + '</td></tr>';
+		}).join('') + '</tbody></table></div>';
+	}
+
+	// The columns, in the order the server sorts by (last seen, account, logins, Windows, video card, processors, memory,
+	// client build, first seen)
+	function columns(withAccount) {
+		return [
+			{ data: 'last_seen', render: function (d, t) { return t === 'display' ? esc(fmt.unix(d)) : d; } },
+			{ data: 'account_name', visible: withAccount, render: function (d, t, r) {
+				return '<a href="/accounts/' + encodeURIComponent(r.account_id) + '">' + esc(d || ('#' + r.account_id)) + '</a>';
+			} },
+			{ data: 'logins', className: 'text-end' },
+			{ data: 'os_version', render: function (d, t, r) { return tip('osVersion', esc(d)) + '<div class="small text-body-secondary">' + esc(r.os_label) + '</div>'; } },
+			{ data: 'video_card', render: function (d) { return tip('videoCard', esc(d || '(empty)')); } },
+			{ data: 'number_of_processors', className: 'text-end', render: function (d) { return tip('numberOfProcessors', esc(d)); } },
+			{ data: 'memory_total_kb', className: 'text-end text-nowrap', render: function (d) { return tip('memoryStats', d ? kb(d) : 'Not read'); } },
+			{ data: 'client_os_name', render: function (d) { return tip('clientOs', esc(d)); } },
+			{ data: 'first_seen', render: function (d, t) { return t === 'display' ? esc(fmt.unix(d)) : d; } }
+		];
+	}
+
+	// A browsable table of reports; clicking a row opens every field
+	function reportTable(selector, extra, withAccount) {
+		var el = document.querySelector(selector);
+		var table = serverTable(selector, '/api/tables/client_sysinfo', columns(withAccount), {
+			extra: extra,
+			dataTable: { order: [[0, 'desc']], language: { searchPlaceholder: withAccount ? 'Account or video card' : 'Video card' } }
+		});
+		table.on('xhr', function (e, settings, json) {
+			if (!json) return;
+			caveats = json.caveats || caveats;
+			trust = json.trust || trust;
+			showsIp = !!json.showsIp;
+		});
+		table.on('draw', function () { tooltips(el); });
+		$(el).on('click', 'tbody tr', function (e) {
+			if (e.target.closest('a')) return;
+			var row = table.row(this);
+			if (!row.data()) return;
+			if (row.child.isShown()) { row.child.hide(); this.classList.remove('shown'); return; }
+			row.child(details(row.data())).show();
+			this.classList.add('shown');
+			tooltips(row.child()[0]);
+		});
+		return table;
+	}
+
+	// Column headers carry the caveat of what they show, once the first page brings the caveats
+	function headerTips(el) {
+		var keys = { os: 'osVersion', video: 'videoCard', cpus: 'numberOfProcessors', memory: 'memoryStats', client: 'clientOs' };
+		el.querySelectorAll('thead th[data-caveat]').forEach(function (th) {
+			if (th.dataset.tipped) return;
+			var key = keys[th.dataset.caveat];
+			if (!caveats[key]) return;
+			th.dataset.tipped = '1';
+			th.innerHTML = tip(key, th.innerHTML);
+		});
+		tooltips(el.querySelector('thead'));
+	}
+
 	function accountCard(card) {
 		var accountId = card.dataset.account;
-		api.get('/api/accounts/' + accountId + '/client_sysinfo').then(function (d) {
-			if (!d.success) return;
-			document.getElementById('sysinfoCount').textContent = d.rows.length;
-			var list = document.getElementById('sysinfoList');
-			if (!d.rows.length) {
-				list.innerHTML = '<p class="text-body-secondary mb-0">Nothing on record: the client sends this at each game login (kept for log_client_sysinfo_days).</p>';
-				return;
-			}
-			list.innerHTML = d.rows.map(function (r, i) {
-				var summary = '<span class="fw-semibold">' + esc(fmt.unix(r.last_seen)) + '</span>' +
-					(r.first_seen !== r.last_seen ? ' <span class="text-body-secondary">since ' + esc(fmt.unix(r.first_seen)) + '</span>' : '') +
-					' · ' + esc(r.logins) + ' login' + (r.logins === 1 ? '' : 's') +
-					' · reports Windows ' + esc(r.os_version) + ' · ' + esc(r.video_card || 'no video card') + ' · ' + esc(r.number_of_processors) + ' CPUs · ' + kb(r.memory_total_kb) +
-					(d.showsIp && r.ip ? ' · <code>' + esc(r.ip) + '</code>' : '');
-				var rows = fields(r, d.showsIp).map(function (f) {
-					return '<tr><th class="fw-normal text-nowrap">' + esc(f[0]) + '</th><td>' + f[1] + caveat(d.caveats, f[2]) + '</td></tr>';
-				}).join('');
-				return '<details class="mb-2"' + (i === 0 ? ' open' : '') + '><summary>' + summary + '</summary>' +
-					'<div class="table-responsive"><table class="table table-sm mb-0"><tbody>' + rows + '</tbody></table></div></details>';
-			}).join('');
-		}).catch(function () {});
+		var table = reportTable('#sysinfoTable', function () { return { account: accountId }; }, false);
+		table.on('xhr', function (e, settings, json) {
+			if (json) document.getElementById('sysinfoCount').textContent = json.recordsTotal;
+		});
+		table.on('draw', function () { headerTips(card); });
 	}
 
 	function spreadPage() {
 		api.get('/api/client_sysinfo/spread').then(function (d) {
 			if (!d.success) return;
+			caveats = d.caveats || {};
+			trust = d.trust || {};
 			var s = d.spread;
 			document.getElementById('sysinfoAccounts').textContent = s.accounts;
 			[['os', 'osVersion'], ['video', 'videoCard'], ['memory', 'memoryStats'], ['processors', 'numberOfProcessors'], ['clientOs', 'clientOs']].forEach(function (pair) {
@@ -71,15 +137,30 @@
 				var rows = s[pair[0]];
 				var html = rows.map(function (e) {
 					var pct = s.accounts ? Math.round(e.count * 1000 / s.accounts) / 10 : 0;
-					return '<tr><td>' + esc(e.label) + '</td><td class="text-end text-nowrap">' + esc(e.count) + '</td>' +
+					// A video card opens the reports from that card
+					var label = pair[0] === 'video' && e.label !== 'Other' && e.label !== '(empty)'
+						? '<a href="#sysinfoAll" data-search="' + esc(e.label) + '">' + esc(e.label) + '</a>' : esc(e.label);
+					return '<tr><td>' + label + '</td><td class="text-end text-nowrap">' + esc(e.count) + '</td>' +
 						'<td style="width:40%"><div class="progress" role="progressbar" aria-label="' + esc(e.label) + '" aria-valuenow="' + pct + '" aria-valuemin="0" aria-valuemax="100">' +
 						'<div class="progress-bar" style="width:' + pct + '%"></div></div></td><td class="text-end text-nowrap small">' + pct + '%</td></tr>';
 				}).join('') || '<tr><td class="text-body-secondary">Nothing reported yet.</td></tr>';
 				el.querySelector('tbody').innerHTML = html;
 				var note = el.querySelector('[data-caveat]');
-				if (note) note.textContent = d.caveats[pair[1]] || '';
+				if (note) note.innerHTML = (trust[pair[1]] === 'unreliable' ? '<span class="text-warning" aria-hidden="true">&#9888;</span> <strong>Unreliable.</strong> ' : '') + esc(caveats[pair[1]] || '');
 			});
 		}).catch(function () {});
+
+		var latest = document.getElementById('sysinfoLatest');
+		var table = reportTable('#sysinfoTable', function () { return { latest: !!(latest && latest.checked) }; }, true);
+		table.on('draw', function () { headerTips(document.getElementById('sysinfoAll')); });
+		if (latest) latest.addEventListener('change', function () { table.ajax.reload(); });
+		document.getElementById('sysinfoPage').addEventListener('click', function (e) {
+			var link = e.target.closest('[data-search]');
+			if (!link) return;
+			e.preventDefault();
+			table.search(link.dataset.search).draw();
+			document.getElementById('sysinfoAll').scrollIntoView({ behavior: 'smooth' });
+		});
 	}
 
 	var card = document.getElementById('sysinfoCard');

dDashboardServer/templates/account-view.jinja2

@@ -164,7 +164,13 @@
 		<p class="small text-body-secondary mb-2">What this account's game client said about its system at each login, exactly as sent. The client asks old Windows
 			functions from a 32-bit program, so several values are compatibility defaults, not the player's real hardware; each field says how far it can be trusted.
 			A new entry starts when anything but the memory in use changes.{% if not can.logs_audit %} Addresses are only shown with logs_audit.{% endif %}</p>
-		<div id="sysinfoList"><p class="text-body-secondary mb-0">Loading&hellip;</p></div>
+		<p class="small text-body-secondary mb-2">Dotted values have a tooltip saying what they're worth; &#9888; marks values that say little or nothing about the
+			player's real system. Click a row for every field.</p>
+		<table id="sysinfoTable" class="table table-sm table-hover table-stack align-middle w-100">
+			<thead><tr><th>Last seen</th><th>Account</th><th class="text-end">Logins</th><th data-caveat="os">Windows reported</th><th data-caveat="video">Video card</th>
+				<th class="text-end" data-caveat="cpus">CPUs</th><th class="text-end" data-caveat="memory">Memory</th><th data-caveat="client">Client build</th><th>First seen</th></tr></thead>
+			<tbody></tbody>
+		</table>
 	</div>
 </div>
 {% endif %}

dDashboardServer/templates/client_sysinfo.jinja2

@@ -11,7 +11,7 @@
 		and under Wine or Proton the answers are whatever Wine reports. Treat this as what clients claim, not as players' real hardware.
 	</div>
 	<p class="text-body-secondary">From each account's newest report (<span id="sysinfoAccounts">&hellip;</span> accounts), kept for <code>log_client_sysinfo_days</code>.
-		Each account's own history is on its account page.</p>
+		Every report is listed below; each account's own reports are also on its account page.</p>
 
 	<div class="row g-4">
 		<div class="col-lg-6">
@@ -60,6 +60,26 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="card mt-4" id="sysinfoAll">
+		<div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
+			<h5 class="mb-0">All reports</h5>
+			<div class="form-check form-switch mb-0 small">
+				<input class="form-check-input" type="checkbox" id="sysinfoLatest" data-pref="client_sysinfo.latest">
+				<label class="form-check-label" for="sysinfoLatest">Only each account's newest</label>
+			</div>
+		</div>
+		<div class="card-body">
+			<p class="small text-body-secondary mb-2">One row per account while its client reports the same system; a new row starts when anything but the memory
+				in use changes. Dotted values have a tooltip saying what they're worth; &#9888; marks values that say little or nothing about the player's
+				real system. Click a row for every field; a video card above filters the list to it.</p>
+			<table id="sysinfoTable" class="table table-sm table-hover table-stack align-middle w-100">
+				<thead><tr><th>Last seen</th><th>Account</th><th class="text-end">Logins</th><th data-caveat="os">Windows reported</th><th data-caveat="video">Video card</th>
+					<th class="text-end" data-caveat="cpus">CPUs</th><th class="text-end" data-caveat="memory">Memory</th><th data-caveat="client">Client build</th><th>First seen</th></tr></thead>
+				<tbody></tbody>
+			</table>
+		</div>
+	</div>
 </div>
 {% endblock %}