space-game/apps/viewer/src/components/gm/GmTelemetryWindow.vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import GmWindow from "./GmWindow.vue";
import { fetchTelemetry, resetWorld } 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";
}

const resetting = ref(false);
const resetError = ref<string | null>(null);

async function handleReset() {
  if (!confirm("Reset the game world? This cannot be undone.")) return;
  resetting.value = true;
  resetError.value = null;
  try {
    await resetWorld();
  } catch {
    resetError.value = "Reset failed";
  } finally {
    resetting.value = false;
  }
}
</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>

      <!-- Reset -->
      <div class="mt-3 border-t border-white/10 pt-3">
        <div v-if="resetError" class="gm-telemetry-error mb-2 rounded px-3 py-1.5 text-xs">
          {{ resetError }}
        </div>
        <button
          class="gm-telemetry-reset-btn w-full rounded px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-opacity disabled:opacity-40"
          :disabled="resetting"
          @click="handleReset"
        >
          {{ resetting ? "Resetting…" : "Reset World" }}
        </button>
      </div>
    </div>
  </GmWindow>
</template>