Show client and server build versions in the footer

Adds a footer with the client build SHA and the server /api/version value, a
mismatch warning, and the socket error text, so it is unambiguous whether the
browser is running a stale bundle and why the live feed fell back to polling.
This commit is contained in:
matitos committed 2026-09-21 14:47:03 +00:00
1 parent 2b8f6bf385
commit cc602423b9
1 file changed
+23
+23
View File
@@ -45,6 +45,12 @@ const pollingFallback = ref(false)
// the socket never opens at all, and present it as a normal live state.
const usePolling = computed(() => pollingFallback.value || socketFailures.value >= 3)
// Build versions shown in the footer. The client value is baked in at build
// time; the server value comes from /api/version. A mismatch means the browser
// is running a stale cached bundle.
const clientVersion = __BUILD_VERSION__
const serverVersion = ref('')
let socket
let pollTimer
let statusTimer
@@ -139,6 +145,7 @@ function handleMessage(message) {
async function ensureFreshBuild() {
try {
const { version } = await api.getVersion()
serverVersion.value = version || ''
if (!version || version === 'unknown') return
if (version === __BUILD_VERSION__) return
const key = `reloaded:${version}`
@@ -255,5 +262,21 @@ onUnmounted(() => {
<PositionsTable :positions="positions" @close="handleClose" />
<OrdersTable :orders="orders" />
<footer class="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-edge/60 pt-3 text-xs text-slate-500">
<span>client <span class="font-mono text-slate-400">{{ clientVersion }}</span></span>
<span>
server
<span class="font-mono text-slate-400">{{ serverVersion || '…' }}</span>
</span>
<span
v-if="serverVersion && serverVersion !== clientVersion"
class="text-amber-300"
>
version mismatch — reloading to update
</span>
<span v-else-if="serverVersion" class="text-emerald-400">up to date</span>
<span v-if="socketError" class="text-amber-300">socket: {{ socketError }}</span>
</footer>
</div>
</template>