jbourdon/space-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement on gm windows, ai

Browse Source
This commit is contained in:
Jonathan Bourdon
2026-03-20 12:40:26 -04:00
parent ff078fe939
commit 3b56785f9a
39 changed files with 2594 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
apps/viewer/src/components/gm/GmTelemetryWindow.vue Normal file
View File

@@ -0,0 +1,166 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import GmWindow from "./GmWindow.vue";
import { fetchTelemetry } from "../../api";
import type { TelemetrySnapshot } from "../../contractsTelemetry";
const emit = defineEmits<{ close: [] }>();
const data = ref<TelemetrySnapshot | null>(null);
const error = ref<string | null>(null);
const lastUpdatedAt = ref<number | null>(null);
const secondsSinceUpdate = ref(0);
let pollTimer: ReturnType<typeof setInterval> | null = null;
let ageTimer: ReturnType<typeof setInterval> | null = null;
async function poll() {
try {
data.value = await fetchTelemetry();
lastUpdatedAt.value = Date.now();
error.value = null;
} catch {
error.value = "Failed to fetch telemetry";
}
}
onMounted(() => {
void poll();
pollTimer = setInterval(poll, 2000);
ageTimer = setInterval(() => {
secondsSinceUpdate.value = lastUpdatedAt.value
? Math.floor((Date.now() - lastUpdatedAt.value) / 1000)
: 0;
}, 500);
});
onUnmounted(() => {
if (pollTimer !== null) clearInterval(pollTimer);
if (ageTimer !== null) clearInterval(ageTimer);
});
function formatUptime(seconds: number) {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = Math.floor(seconds % 60);
if (h > 0) return `${h}h ${m}m ${s}s`;
if (m > 0) return `${m}m ${s}s`;
return `${s}s`;
}
function formatNumber(n: number) {
return n.toLocaleString("en-US");
}
function cpuBarWidth(pct: number) {
return `${Math.min(100, Math.max(0, pct))}%`;
}
function cpuBarClass(pct: number) {
if (pct >= 80) return "gm-telemetry-bar--high";
if (pct >= 50) return "gm-telemetry-bar--mid";
return "gm-telemetry-bar--low";
}
</script>
<template>
<GmWindow
title="Server Telemetry"
:initial-width="460"
:initial-height="380"
:initial-x="200"
:initial-y="120"
@close="emit('close')"
>
<div class="gm-telemetry flex h-full flex-col overflow-auto px-4 py-3">
<!-- Error state -->
<div v-if="error" class="gm-telemetry-error mb-3 rounded px-3 py-2 text-xs">
{{ error }}
</div>
<!-- Loading state -->
<div v-else-if="!data" class="flex flex-1 items-center justify-center text-xs opacity-40">
Loading…
</div>
<template v-else>
<!-- PROCESS section -->
<div class="gm-telemetry-section mb-4">
<div class="gm-telemetry-section-title mb-2">Process</div>
<div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
<span class="gm-telemetry-label">CPU</span>
<span class="flex items-center gap-2">
<span class="gm-telemetry-value w-10 text-right">{{ data.process.cpuPercent.toFixed(1) }}%</span>
<span class="gm-telemetry-bar-track flex-1">
<span
class="gm-telemetry-bar"
:class="cpuBarClass(data.process.cpuPercent)"
:style="{ width: cpuBarWidth(data.process.cpuPercent) }"
/>
</span>
<span class="gm-telemetry-dim">/ {{ data.process.processorCount }} cores</span>
</span>
<span class="gm-telemetry-label">Working set</span>
<span class="gm-telemetry-value">{{ data.process.workingSetMb.toFixed(1) }} MB</span>
<span class="gm-telemetry-label">GC memory</span>
<span class="gm-telemetry-value">{{ data.process.gcMemoryMb.toFixed(1) }} MB</span>
<span class="gm-telemetry-label">Threads</span>
<span class="gm-telemetry-value">{{ data.process.threadCount }}</span>
<span class="gm-telemetry-label">Uptime</span>
<span class="gm-telemetry-value">{{ formatUptime(data.process.uptimeSeconds) }}</span>
</div>
</div>
<!-- SIMULATION section -->
<div class="gm-telemetry-section mb-4">
<div class="gm-telemetry-section-title mb-2">Simulation</div>
<div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
<span class="gm-telemetry-label">Sequence</span>
<span class="gm-telemetry-value font-mono">{{ formatNumber(data.simulation.sequence) }}</span>
<span class="gm-telemetry-label">Connected clients</span>
<span class="gm-telemetry-value">
<span
class="gm-telemetry-clients-dot"
:class="data.simulation.connectedClients > 0 ? 'gm-telemetry-clients-dot--active' : ''"
/>
{{ data.simulation.connectedClients }}
</span>
<span class="gm-telemetry-label">Delta history</span>
<span class="gm-telemetry-value">{{ data.simulation.deltaHistoryCount }} / 256</span>
<span class="gm-telemetry-label">Tick interval</span>
<span class="gm-telemetry-value">{{ data.simulation.tickIntervalMs }} ms</span>
</div>
</div>
<!-- RUNTIME section -->
<div class="gm-telemetry-section mb-4">
<div class="gm-telemetry-section-title mb-2">Runtime</div>
<div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5">
<span class="gm-telemetry-label">.NET</span>
<span class="gm-telemetry-value">{{ data.runtime.frameworkDescription }}</span>
<span class="gm-telemetry-label">GC collections</span>
<span class="gm-telemetry-value font-mono">
G0 {{ formatNumber(data.runtime.gcGen0) }} &nbsp;·&nbsp;
G1 {{ formatNumber(data.runtime.gcGen1) }} &nbsp;·&nbsp;
G2 {{ formatNumber(data.runtime.gcGen2) }}
</span>
</div>
</div>
<!-- Footer -->
<div class="mt-auto flex items-center justify-between pt-2 text-[10px] opacity-40">
<span>Updated {{ secondsSinceUpdate }}s ago</span>
<span>Polling every 2s</span>
</div>
</template>
</div>
</GmWindow>
</template>