From 6de6080e65b5727bcadc45e26ea1d7541c533e83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Cuevas?= <victor.cuevas@cloudblue.com>
Date: Fri, 17 Apr 2026 12:50:44 +0200
Subject: [PATCH 1/2] feat(admin): improve UI accessibility, responsiveness,
 and polish

---
 admin/ui/src/components/AddInstanceModal.vue  |  30 +++-
 admin/ui/src/components/BaseCard.vue          |   6 +-
 admin/ui/src/components/ConfirmDialog.vue     |   7 +-
 admin/ui/src/components/InstanceCard.vue      |  40 ++---
 admin/ui/src/components/InstanceTable.vue     |  29 +++-
 admin/ui/src/components/LoadingSpinner.vue    |  75 ++++++++
 admin/ui/src/components/OverviewTab.vue       |  10 +-
 admin/ui/src/components/StatusIndicator.vue   |  13 +-
 admin/ui/src/components/TrafficTab.vue        |  58 ++++---
 admin/ui/src/components/VendorTable.vue       |   8 +-
 admin/ui/src/composables/useFocusTrap.js      |  39 +++++
 admin/ui/src/composables/useFocusTrap.test.js | 102 +++++++++++
 admin/ui/src/layouts/AppLayout.vue            | 162 +++++++++++++++++-
 admin/ui/src/stores/instances.js              |   7 +-
 admin/ui/src/stores/instances.test.js         |  17 +-
 admin/ui/src/utils/instance.js                |  17 +-
 admin/ui/src/utils/instance.test.js           | 108 +-----------
 admin/ui/src/views/AuditLogView.vue           |  87 ++++++++--
 admin/ui/src/views/DashboardView.vue          | 113 +++++++++---
 admin/ui/src/views/InstanceDetailView.vue     |  36 +++-
 admin/ui/vite.config.js                       |   5 +
 21 files changed, 720 insertions(+), 249 deletions(-)
 create mode 100644 admin/ui/src/components/LoadingSpinner.vue
 create mode 100644 admin/ui/src/composables/useFocusTrap.js
 create mode 100644 admin/ui/src/composables/useFocusTrap.test.js

diff --git a/admin/ui/src/components/AddInstanceModal.vue b/admin/ui/src/components/AddInstanceModal.vue
index ffbe252..8e5963c 100644
--- a/admin/ui/src/components/AddInstanceModal.vue
+++ b/admin/ui/src/components/AddInstanceModal.vue
@@ -1,6 +1,7 @@
 <template>
 	<div :class="$style.overlay" @click.self="$emit('close')">
 		<div
+			ref="modalRef"
 			:class="$style.modal"
 			role="dialog"
 			aria-labelledby="modal-title"
@@ -70,11 +71,12 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import BaseInput from './BaseInput.vue';
 import BaseButton from './BaseButton.vue';
 import { useInstanceStore } from '../stores/instances.js';
 import { useInstanceForm } from '../composables/useInstanceForm.js';
+import { useFocusTrap } from '../composables/useFocusTrap.js';
 
 const props = defineProps({
 	instance: { type: Object, default: null },
@@ -82,6 +84,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'saved']);
 const store = useInstanceStore();
+const modalRef = ref(null);
 const {
 	editing,
 	name,
@@ -94,6 +97,15 @@ const {
 	handleSubmit: submit,
 } = useInstanceForm(store, props.instance);
 
+useFocusTrap(modalRef);
+
+function onKeydown(e) {
+	if (e.key === 'Escape') {
+		e.preventDefault();
+		emit('close');
+	}
+}
+
 async function handleSubmit() {
 	const ok = await submit();
 	if (ok) {
@@ -103,8 +115,13 @@ async function handleSubmit() {
 }
 
 onMounted(() => {
+	document.addEventListener('keydown', onKeydown);
 	document.querySelector('[data-testid="instance-name"]')?.focus();
 });
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', onKeydown);
+});
 </script>
 
 <style module>
@@ -167,4 +184,15 @@ onMounted(() => {
 .spacer {
 	flex: 1;
 }
+
+@media (max-width: 768px) {
+	.modal {
+		margin: var(--space-4);
+		max-width: calc(100vw - var(--space-8));
+	}
+
+	.actions {
+		flex-wrap: wrap;
+	}
+}
 </style>
diff --git a/admin/ui/src/components/BaseCard.vue b/admin/ui/src/components/BaseCard.vue
index 131890b..1cc00a7 100644
--- a/admin/ui/src/components/BaseCard.vue
+++ b/admin/ui/src/components/BaseCard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.card">
+	<div :class="$style.card" v-bind="$attrs">
 		<div v-if="$slots.header" :class="$style.header">
 			<slot name="header" />
 		</div>
@@ -9,7 +9,9 @@
 	</div>
 </template>
 
-<script setup></script>
+<script setup>
+defineOptions({ inheritAttrs: false });
+</script>
 
 <style module>
 .card {
diff --git a/admin/ui/src/components/ConfirmDialog.vue b/admin/ui/src/components/ConfirmDialog.vue
index e2a6d3d..de94d9c 100644
--- a/admin/ui/src/components/ConfirmDialog.vue
+++ b/admin/ui/src/components/ConfirmDialog.vue
@@ -1,6 +1,7 @@
 <template>
 	<div :class="$style.overlay" @click.self="$emit('cancel')">
 		<div
+			ref="dialogRef"
 			:class="$style.dialog"
 			role="alertdialog"
 			:aria-labelledby="titleId"
@@ -30,8 +31,9 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, useId } from 'vue';
+import { ref, onMounted, onUnmounted, useId } from 'vue';
 import BaseButton from './BaseButton.vue';
+import { useFocusTrap } from '../composables/useFocusTrap.js';
 
 defineProps({
 	title: { type: String, required: true },
@@ -41,10 +43,13 @@ defineProps({
 });
 
 const emit = defineEmits(['confirm', 'cancel']);
+const dialogRef = ref(null);
 
 const titleId = `confirm-title-${useId()}`;
 const descId = `confirm-desc-${useId()}`;
 
+useFocusTrap(dialogRef);
+
 function onKeydown(e) {
 	if (e.key === 'Escape') {
 		e.preventDefault();
diff --git a/admin/ui/src/components/InstanceCard.vue b/admin/ui/src/components/InstanceCard.vue
index f74b593..e520a14 100644
--- a/admin/ui/src/components/InstanceCard.vue
+++ b/admin/ui/src/components/InstanceCard.vue
@@ -1,11 +1,19 @@
 <template>
-	<BaseCard :class="$style.card" @click="$emit('click')">
+	<BaseCard
+		:class="$style.card"
+		tabindex="0"
+		role="link"
+		:aria-label="`View details for ${instance.name}`"
+		@click="$emit('click')"
+		@keydown.enter="onCardKeydown"
+		@keydown.space="onCardKeydown"
+	>
 		<div :class="$style.header">
 			<div :class="$style.titleRow">
 				<h3 :class="$style.name">{{ instance.name }}</h3>
 				<StatusIndicator
-					:status="isStale ? 'stale' : instance.status"
-					:label="statusLabel"
+					:status="instance.status"
+					:label="getStatusLabel(instance.status)"
 				/>
 			</div>
 			<div :class="$style.address">{{ instance.address }}</div>
@@ -17,7 +25,7 @@
 			</div>
 			<div v-if="instance.last_seen_at" :class="$style.metaItem">
 				<span :class="$style.metaLabel">Last seen</span>
-				<span :class="[$style.metaValue, isStale && $style.staleValue]">{{
+				<span :class="$style.metaValue">{{
 					formatTime(instance.last_seen_at)
 				}}</span>
 			</div>
@@ -42,26 +50,22 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
 import BaseCard from './BaseCard.vue';
 import BaseButton from './BaseButton.vue';
 import StatusIndicator from './StatusIndicator.vue';
-import {
-	isInstanceStale,
-	formatTime,
-	getStatusLabel,
-} from '../utils/instance.js';
+import { formatTime, getStatusLabel } from '../utils/instance.js';
 
-const props = defineProps({
+defineProps({
 	instance: { type: Object, required: true },
 });
 
-defineEmits(['click', 'edit', 'delete']);
+const emit = defineEmits(['click', 'edit', 'delete']);
 
-const isStale = computed(() => isInstanceStale(props.instance));
-const statusLabel = computed(() =>
-	getStatusLabel(props.instance.status, isStale.value),
-);
+function onCardKeydown(e) {
+	if (e.target.closest('button, a')) return;
+	e.preventDefault();
+	emit('click');
+}
 </script>
 
 <style module>
@@ -122,10 +126,6 @@ const statusLabel = computed(() =>
 	color: var(--color-text-primary);
 }
 
-.staleValue {
-	color: var(--color-warning);
-}
-
 .actions {
 	display: flex;
 	gap: var(--space-2);
diff --git a/admin/ui/src/components/InstanceTable.vue b/admin/ui/src/components/InstanceTable.vue
index 5a43e4f..3f9352d 100644
--- a/admin/ui/src/components/InstanceTable.vue
+++ b/admin/ui/src/components/InstanceTable.vue
@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.wrapper">
-		<table :class="$style.table">
+		<table :class="$style.table" aria-label="Registered instances">
 			<thead>
 				<tr>
 					<th :class="$style.th">Status</th>
@@ -16,12 +16,15 @@
 					v-for="inst in instances"
 					:key="inst.id"
 					:class="$style.row"
+					tabindex="0"
+					role="link"
+					:aria-label="`View details for ${inst.name}`"
 					@click="$emit('click', inst)"
+					@keydown.enter="onRowKeydown($event, inst)"
+					@keydown.space="onRowKeydown($event, inst)"
 				>
 					<td :class="$style.td">
-						<StatusIndicator
-							:status="isInstanceStale(inst) ? 'stale' : inst.status"
-						/>
+						<StatusIndicator :status="inst.status" />
 					</td>
 					<td :class="[$style.td, $style.name]">{{ inst.name }}</td>
 					<td :class="[$style.td, $style.mono]">{{ inst.address }}</td>
@@ -52,13 +55,19 @@
 <script setup>
 import StatusIndicator from './StatusIndicator.vue';
 import BaseButton from './BaseButton.vue';
-import { isInstanceStale, formatTime } from '../utils/instance.js';
+import { formatTime } from '../utils/instance.js';
 
 defineProps({
 	instances: { type: Array, required: true },
 });
 
-defineEmits(['click', 'edit', 'delete']);
+const emit = defineEmits(['click', 'edit', 'delete']);
+
+function onRowKeydown(e, inst) {
+	if (e.target.closest('button, a')) return;
+	e.preventDefault();
+	emit('click', inst);
+}
 </script>
 
 <style module>
@@ -87,10 +96,16 @@ defineEmits(['click', 'edit', 'delete']);
 	cursor: pointer;
 }
 
-.row:hover {
+.row:hover,
+.row:focus-visible {
 	background-color: var(--color-bg-primary);
 }
 
+.row:focus-visible {
+	outline: 2px solid var(--color-accent);
+	outline-offset: -2px;
+}
+
 .td {
 	padding: var(--space-2) var(--space-3);
 	border-bottom: 1px solid var(--color-border-light);
diff --git a/admin/ui/src/components/LoadingSpinner.vue b/admin/ui/src/components/LoadingSpinner.vue
new file mode 100644
index 0000000..2a30019
--- /dev/null
+++ b/admin/ui/src/components/LoadingSpinner.vue
@@ -0,0 +1,75 @@
+<template>
+	<div :class="[$style.spinner, $style[size]]" role="status">
+		<svg
+			:class="$style.icon"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2.5"
+			stroke-linecap="round"
+		>
+			<path d="M12 2a10 10 0 0 1 10 10" />
+		</svg>
+		<span :class="$style.srOnly">{{ label }}</span>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	size: {
+		type: String,
+		default: 'md',
+		validator: (v) => ['sm', 'md', 'lg'].includes(v),
+	},
+	label: {
+		type: String,
+		default: 'Loading...',
+	},
+});
+</script>
+
+<style module>
+.spinner {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--color-text-tertiary);
+}
+
+.icon {
+	animation: spin 0.8s linear infinite;
+}
+
+.sm .icon {
+	width: 16px;
+	height: 16px;
+}
+
+.md .icon {
+	width: 24px;
+	height: 24px;
+}
+
+.lg .icon {
+	width: 32px;
+	height: 32px;
+}
+
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/admin/ui/src/components/OverviewTab.vue b/admin/ui/src/components/OverviewTab.vue
index f792cb5..d81c77e 100644
--- a/admin/ui/src/components/OverviewTab.vue
+++ b/admin/ui/src/components/OverviewTab.vue
@@ -29,8 +29,14 @@
 
 		<!-- Latency distribution chart -->
 		<div :class="$style.chartSection">
-			<h3 :class="$style.chartTitle">Latency Over Time</h3>
-			<div :class="$style.chartContainer">
+			<h3 id="latency-chart-title" :class="$style.chartTitle">
+				Latency Over Time
+			</h3>
+			<div
+				:class="$style.chartContainer"
+				role="img"
+				aria-labelledby="latency-chart-title"
+			>
 				<VChart
 					v-if="hasSeries"
 					:option="latencyChartOption"
diff --git a/admin/ui/src/components/StatusIndicator.vue b/admin/ui/src/components/StatusIndicator.vue
index 4557afb..2a5efd9 100644
--- a/admin/ui/src/components/StatusIndicator.vue
+++ b/admin/ui/src/components/StatusIndicator.vue
@@ -16,8 +16,7 @@ const props = defineProps({
 	status: {
 		type: String,
 		default: 'unknown',
-		validator: (v) =>
-			['healthy', 'unreachable', 'unknown', 'stale'].includes(v),
+		validator: (v) => ['healthy', 'unreachable', 'unknown'].includes(v),
 	},
 	label: {
 		type: String,
@@ -29,7 +28,6 @@ const statusLabels = {
 	healthy: 'Healthy',
 	unreachable: 'Unreachable',
 	unknown: 'Unknown',
-	stale: 'Stale',
 };
 
 const computedAriaLabel = computed(() => {
@@ -83,13 +81,4 @@ const computedAriaLabel = computed(() => {
 .unknown .label {
 	color: var(--color-text-tertiary);
 }
-
-.stale .dot {
-	background-color: var(--color-warning);
-	box-shadow: 0 0 0 3px var(--color-warning-bg);
-}
-
-.stale .label {
-	color: var(--color-warning);
-}
 </style>
diff --git a/admin/ui/src/components/TrafficTab.vue b/admin/ui/src/components/TrafficTab.vue
index ba8f962..4ebe211 100644
--- a/admin/ui/src/components/TrafficTab.vue
+++ b/admin/ui/src/components/TrafficTab.vue
@@ -13,34 +13,44 @@
 			:class="$style.charts"
 		>
 			<div :class="$style.chartSection">
-				<h3 :class="$style.chartTitle">Requests Per Second</h3>
-				<VChart
-					ref="rpsChartRef"
-					:option="rpsChartOption"
-					autoresize
-					:class="$style.chart"
-					@datazoom="(e) => syncZoom('rps', e)"
-				/>
+				<h3 id="rps-chart-title" :class="$style.chartTitle">
+					Requests Per Second
+				</h3>
+				<div role="img" aria-labelledby="rps-chart-title">
+					<VChart
+						ref="rpsChartRef"
+						:option="rpsChartOption"
+						autoresize
+						:class="$style.chart"
+						@datazoom="(e) => syncZoom('rps', e)"
+					/>
+				</div>
 			</div>
 			<div :class="$style.chartSection">
-				<h3 :class="$style.chartTitle">Latency</h3>
-				<VChart
-					ref="latencyChartRef"
-					:option="latencyChartOption"
-					autoresize
-					:class="$style.chart"
-					@datazoom="(e) => syncZoom('latency', e)"
-				/>
+				<h3 id="latency-vendor-chart-title" :class="$style.chartTitle">
+					Latency
+				</h3>
+				<div role="img" aria-labelledby="latency-vendor-chart-title">
+					<VChart
+						ref="latencyChartRef"
+						:option="latencyChartOption"
+						autoresize
+						:class="$style.chart"
+						@datazoom="(e) => syncZoom('latency', e)"
+					/>
+				</div>
 			</div>
 			<div :class="$style.chartSection">
-				<h3 :class="$style.chartTitle">Error Rate</h3>
-				<VChart
-					ref="errorChartRef"
-					:option="errorChartOption"
-					autoresize
-					:class="$style.chart"
-					@datazoom="(e) => syncZoom('error', e)"
-				/>
+				<h3 id="error-chart-title" :class="$style.chartTitle">Error Rate</h3>
+				<div role="img" aria-labelledby="error-chart-title">
+					<VChart
+						ref="errorChartRef"
+						:option="errorChartOption"
+						autoresize
+						:class="$style.chart"
+						@datazoom="(e) => syncZoom('error', e)"
+					/>
+				</div>
 			</div>
 		</div>
 
diff --git a/admin/ui/src/components/VendorTable.vue b/admin/ui/src/components/VendorTable.vue
index 873f8c8..a24bd3d 100644
--- a/admin/ui/src/components/VendorTable.vue
+++ b/admin/ui/src/components/VendorTable.vue
@@ -1,6 +1,10 @@
 <template>
-	<div :class="$style.wrapper">
-		<table :class="$style.table">
+	<div
+		:class="$style.wrapper"
+		role="group"
+		aria-label="Vendor traffic breakdown"
+	>
+		<table :class="$style.table" aria-label="Vendor metrics">
 			<thead>
 				<tr>
 					<th :class="[$style.th, $style.checkCol]">
diff --git a/admin/ui/src/composables/useFocusTrap.js b/admin/ui/src/composables/useFocusTrap.js
new file mode 100644
index 0000000..e420428
--- /dev/null
+++ b/admin/ui/src/composables/useFocusTrap.js
@@ -0,0 +1,39 @@
+import { onMounted, onUnmounted } from 'vue';
+
+const FOCUSABLE =
+	'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap(containerRef) {
+	let previouslyFocused = null;
+
+	function handleKeydown(e) {
+		if (e.key !== 'Tab') return;
+
+		const container = containerRef.value?.$el ?? containerRef.value;
+		if (!container) return;
+
+		const focusable = [...container.querySelectorAll(FOCUSABLE)];
+		if (focusable.length === 0) return;
+
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+
+		if (e.shiftKey && document.activeElement === first) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && document.activeElement === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+
+	onMounted(() => {
+		previouslyFocused = document.activeElement;
+		document.addEventListener('keydown', handleKeydown);
+	});
+
+	onUnmounted(() => {
+		document.removeEventListener('keydown', handleKeydown);
+		previouslyFocused?.focus();
+	});
+}
diff --git a/admin/ui/src/composables/useFocusTrap.test.js b/admin/ui/src/composables/useFocusTrap.test.js
new file mode 100644
index 0000000..fcfb0e0
--- /dev/null
+++ b/admin/ui/src/composables/useFocusTrap.test.js
@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { ref } from 'vue';
+import { withSetup } from '../utils/test-utils.js';
+import { useFocusTrap } from './useFocusTrap.js';
+
+describe('useFocusTrap', () => {
+	let container;
+	let btn1;
+	let btn2;
+	let btn3;
+	let app;
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		btn1 = document.createElement('button');
+		btn1.textContent = 'First';
+		btn2 = document.createElement('button');
+		btn2.textContent = 'Second';
+		btn3 = document.createElement('button');
+		btn3.textContent = 'Third';
+		container.append(btn1, btn2, btn3);
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		app?.unmount();
+		container.remove();
+	});
+
+	it('wraps focus from last to first on Tab', () => {
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		btn3.focus();
+		const event = new KeyboardEvent('keydown', {
+			key: 'Tab',
+			bubbles: true,
+		});
+		let prevented = false;
+		event.preventDefault = () => {
+			prevented = true;
+		};
+		document.dispatchEvent(event);
+
+		expect(prevented).toBe(true);
+	});
+
+	it('wraps focus from first to last on Shift+Tab', () => {
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		btn1.focus();
+		const event = new KeyboardEvent('keydown', {
+			key: 'Tab',
+			shiftKey: true,
+			bubbles: true,
+		});
+		let prevented = false;
+		event.preventDefault = () => {
+			prevented = true;
+		};
+		document.dispatchEvent(event);
+
+		expect(prevented).toBe(true);
+	});
+
+	it('does not trap non-Tab keys', () => {
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		btn1.focus();
+		const event = new KeyboardEvent('keydown', {
+			key: 'Escape',
+			bubbles: true,
+		});
+		let prevented = false;
+		event.preventDefault = () => {
+			prevented = true;
+		};
+		document.dispatchEvent(event);
+
+		expect(prevented).toBe(false);
+	});
+
+	it('does not interfere when focus is in the middle', () => {
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		btn2.focus();
+		const event = new KeyboardEvent('keydown', {
+			key: 'Tab',
+			bubbles: true,
+		});
+		let prevented = false;
+		event.preventDefault = () => {
+			prevented = true;
+		};
+		document.dispatchEvent(event);
+
+		expect(prevented).toBe(false);
+	});
+});
diff --git a/admin/ui/src/layouts/AppLayout.vue b/admin/ui/src/layouts/AppLayout.vue
index 8f5301b..2be0aa6 100644
--- a/admin/ui/src/layouts/AppLayout.vue
+++ b/admin/ui/src/layouts/AppLayout.vue
@@ -1,8 +1,61 @@
 <template>
 	<div :class="$style.layout">
-		<aside :class="$style.sidebar">
+		<!-- Mobile header -->
+		<header :class="$style.mobileHeader">
+			<button
+				:class="$style.menuButton"
+				aria-label="Open navigation"
+				@click="sidebarOpen = true"
+			>
+				<svg
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			</button>
+			<RouterLink to="/" :class="$style.mobileTitle">Chaperone</RouterLink>
+		</header>
+
+		<!-- Backdrop for mobile sidebar -->
+		<div
+			v-if="sidebarOpen"
+			:class="$style.backdrop"
+			@click="sidebarOpen = false"
+		/>
+
+		<aside :class="[$style.sidebar, sidebarOpen && $style.sidebarOpen]">
 			<div :class="$style.logo">
-				<span :class="$style.logoText">Chaperone</span>
+				<RouterLink to="/" :class="$style.logoText">Chaperone</RouterLink>
+				<button
+					:class="$style.closeButton"
+					aria-label="Close navigation"
+					@click="sidebarOpen = false"
+				>
+					<svg
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<line x1="18" y1="6" x2="6" y2="18" />
+						<line x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
 			</div>
 			<nav :class="$style.nav" aria-label="Main navigation">
 				<div :class="$style.navSection">
@@ -140,12 +193,18 @@
 </template>
 
 <script setup>
+import { ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth.js';
 
 const route = useRoute();
 const router = useRouter();
 const auth = useAuthStore();
+const sidebarOpen = ref(false);
+
+watch(route, () => {
+	sidebarOpen.value = false;
+});
 
 async function handleLogout() {
 	try {
@@ -164,6 +223,18 @@ async function handleLogout() {
 	min-height: 100vh;
 }
 
+.mobileHeader {
+	display: none;
+}
+
+.backdrop {
+	display: none;
+}
+
+.closeButton {
+	display: none;
+}
+
 .sidebar {
 	width: var(--sidebar-width);
 	background-color: var(--color-bg-sidebar);
@@ -174,6 +245,9 @@ async function handleLogout() {
 
 .logo {
 	padding: var(--space-5) var(--space-5) var(--space-6);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 }
 
 .logoText {
@@ -181,6 +255,7 @@ async function handleLogout() {
 	font-weight: var(--font-weight-bold);
 	color: var(--color-text-sidebar-active);
 	letter-spacing: -0.01em;
+	text-decoration: none;
 }
 
 .nav {
@@ -293,4 +368,87 @@ async function handleLogout() {
 	background-color: var(--color-bg-sidebar-hover);
 	color: var(--color-text-sidebar-active);
 }
+
+/* Tablet breakpoint */
+@media (max-width: 768px) {
+	.mobileHeader {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding: var(--space-3) var(--space-4);
+		background-color: var(--color-bg-sidebar);
+		position: sticky;
+		top: 0;
+		z-index: 50;
+	}
+
+	.mobileTitle {
+		font-size: var(--font-size-md);
+		font-weight: var(--font-weight-bold);
+		color: var(--color-text-sidebar-active);
+		text-decoration: none;
+	}
+
+	.menuButton {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-2);
+		border: none;
+		border-radius: var(--radius-md);
+		background: transparent;
+		color: var(--color-text-sidebar);
+		cursor: pointer;
+	}
+
+	.menuButton:hover {
+		background-color: var(--color-bg-sidebar-hover);
+		color: var(--color-text-sidebar-active);
+	}
+
+	.layout {
+		flex-direction: column;
+	}
+
+	.sidebar {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		width: var(--sidebar-width);
+		transform: translateX(-100%);
+		transition: transform 0.2s ease;
+	}
+
+	.sidebarOpen {
+		transform: translateX(0);
+	}
+
+	.backdrop {
+		display: block;
+		position: fixed;
+		inset: 0;
+		background-color: rgba(0, 0, 0, 0.4);
+		z-index: 99;
+	}
+
+	.closeButton {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--space-1);
+		border: none;
+		border-radius: var(--radius-md);
+		background: transparent;
+		color: var(--color-text-sidebar);
+		cursor: pointer;
+	}
+
+	.closeButton:hover {
+		color: var(--color-text-sidebar-active);
+	}
+
+	.main {
+		padding: var(--space-4);
+	}
+}
 </style>
diff --git a/admin/ui/src/stores/instances.js b/admin/ui/src/stores/instances.js
index f2fc230..f161d27 100644
--- a/admin/ui/src/stores/instances.js
+++ b/admin/ui/src/stores/instances.js
@@ -4,14 +4,13 @@ import * as api from '../utils/api.js';
 
 export const useInstanceStore = defineStore('instances', () => {
 	const instances = ref([]);
-	const loading = ref(false);
+	const initialized = ref(false);
 
 	async function fetchInstances() {
-		loading.value = true;
 		try {
 			instances.value = await api.get('/api/instances');
 		} finally {
-			loading.value = false;
+			initialized.value = true;
 		}
 	}
 
@@ -38,7 +37,7 @@ export const useInstanceStore = defineStore('instances', () => {
 
 	return {
 		instances,
-		loading,
+		initialized,
 		fetchInstances,
 		createInstance,
 		updateInstance,
diff --git a/admin/ui/src/stores/instances.test.js b/admin/ui/src/stores/instances.test.js
index 39b3b24..107eb14 100644
--- a/admin/ui/src/stores/instances.test.js
+++ b/admin/ui/src/stores/instances.test.js
@@ -29,20 +29,17 @@ describe('useInstanceStore', () => {
 			expect(store.instances).toEqual(data);
 		});
 
-		it('sets loading true during fetch and false after', async () => {
-			let resolve;
-			api.get.mockReturnValue(new Promise((r) => (resolve = r)));
-			const p = store.fetchInstances();
-			expect(store.loading).toBe(true);
-			resolve([]);
-			await p;
-			expect(store.loading).toBe(false);
+		it('sets initialized after first fetch', async () => {
+			expect(store.initialized).toBe(false);
+			api.get.mockResolvedValue([]);
+			await store.fetchInstances();
+			expect(store.initialized).toBe(true);
 		});
 
-		it('sets loading false even on error', async () => {
+		it('sets initialized even on error', async () => {
 			api.get.mockRejectedValue(new Error('network error'));
 			await store.fetchInstances().catch(() => {});
-			expect(store.loading).toBe(false);
+			expect(store.initialized).toBe(true);
 		});
 	});
 
diff --git a/admin/ui/src/utils/instance.js b/admin/ui/src/utils/instance.js
index 260eff2..1edfa41 100644
--- a/admin/ui/src/utils/instance.js
+++ b/admin/ui/src/utils/instance.js
@@ -1,12 +1,3 @@
-export const STALE_THRESHOLD_MS = 2 * 60 * 1000; // 2 minutes
-
-export function isInstanceStale(instance) {
-	if (instance.status !== 'healthy' || !instance.last_seen_at) return false;
-	return (
-		Date.now() - new Date(instance.last_seen_at).getTime() > STALE_THRESHOLD_MS
-	);
-}
-
 export function formatTime(ts) {
 	if (!ts) return '';
 	const d = new Date(ts);
@@ -21,14 +12,8 @@ const STATUS_LABELS = {
 	healthy: 'Healthy',
 	unreachable: 'Unreachable',
 	unknown: 'Unknown',
-	stale: 'Stale',
 };
 
-export function getStatusLabel(status, isStale) {
-	if (isStale) return STATUS_LABELS.stale;
+export function getStatusLabel(status) {
 	return STATUS_LABELS[status] || STATUS_LABELS.unknown;
 }
-
-export function filterStaleInstances(instances) {
-	return instances.filter(isInstanceStale);
-}
diff --git a/admin/ui/src/utils/instance.test.js b/admin/ui/src/utils/instance.test.js
index a811580..ca4b8f8 100644
--- a/admin/ui/src/utils/instance.test.js
+++ b/admin/ui/src/utils/instance.test.js
@@ -1,66 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import {
-	STALE_THRESHOLD_MS,
-	isInstanceStale,
-	formatTime,
-	getStatusLabel,
-	filterStaleInstances,
-} from './instance.js';
-
-describe('STALE_THRESHOLD_MS', () => {
-	it('is 2 minutes in milliseconds', () => {
-		expect(STALE_THRESHOLD_MS).toBe(120_000);
-	});
-});
-
-describe('isInstanceStale', () => {
-	afterEach(() => {
-		vi.restoreAllMocks();
-	});
-
-	it('returns false for non-healthy instance', () => {
-		expect(
-			isInstanceStale({
-				status: 'unreachable',
-				last_seen_at: '2020-01-01T00:00:00Z',
-			}),
-		).toBe(false);
-		expect(
-			isInstanceStale({
-				status: 'unknown',
-				last_seen_at: '2020-01-01T00:00:00Z',
-			}),
-		).toBe(false);
-	});
-
-	it('returns false when last_seen_at is null', () => {
-		expect(isInstanceStale({ status: 'healthy', last_seen_at: null })).toBe(
-			false,
-		);
-	});
-
-	it('returns false when last seen recently', () => {
-		const recent = new Date(Date.now() - 30_000).toISOString(); // 30s ago
-		expect(isInstanceStale({ status: 'healthy', last_seen_at: recent })).toBe(
-			false,
-		);
-	});
-
-	it('returns true when last seen over 2 minutes ago', () => {
-		const old = new Date(Date.now() - STALE_THRESHOLD_MS - 1000).toISOString();
-		expect(isInstanceStale({ status: 'healthy', last_seen_at: old })).toBe(
-			true,
-		);
-	});
-
-	it('returns false at exactly the threshold boundary', () => {
-		vi.spyOn(Date, 'now').mockReturnValue(1000000);
-		const atBoundary = new Date(1000000 - STALE_THRESHOLD_MS).toISOString();
-		expect(
-			isInstanceStale({ status: 'healthy', last_seen_at: atBoundary }),
-		).toBe(false);
-	});
-});
+import { formatTime, getStatusLabel } from './instance.js';
 
 describe('formatTime', () => {
 	afterEach(() => {
@@ -93,13 +32,11 @@ describe('formatTime', () => {
 	});
 
 	it('floors minutes correctly', () => {
-		// 90 seconds = 1.5 minutes → should show "1m ago"
 		const ts = new Date(Date.now() - 90_000).toISOString();
 		expect(formatTime(ts)).toBe('1m ago');
 	});
 
 	it('floors hours correctly', () => {
-		// 5400 seconds = 1.5 hours → should show "1h ago"
 		const ts = new Date(Date.now() - 5400 * 1000).toISOString();
 		expect(formatTime(ts)).toBe('1h ago');
 	});
@@ -107,46 +44,13 @@ describe('formatTime', () => {
 
 describe('getStatusLabel', () => {
 	it('returns correct label for each status', () => {
-		expect(getStatusLabel('healthy', false)).toBe('Healthy');
-		expect(getStatusLabel('unreachable', false)).toBe('Unreachable');
-		expect(getStatusLabel('unknown', false)).toBe('Unknown');
-	});
-
-	it('returns "Stale" when isStale is true regardless of status', () => {
-		expect(getStatusLabel('healthy', true)).toBe('Stale');
-		expect(getStatusLabel('unreachable', true)).toBe('Stale');
-		expect(getStatusLabel('unknown', true)).toBe('Stale');
+		expect(getStatusLabel('healthy')).toBe('Healthy');
+		expect(getStatusLabel('unreachable')).toBe('Unreachable');
+		expect(getStatusLabel('unknown')).toBe('Unknown');
 	});
 
 	it('falls back to "Unknown" for unrecognized status', () => {
-		expect(getStatusLabel('bogus', false)).toBe('Unknown');
-		expect(getStatusLabel(undefined, false)).toBe('Unknown');
-	});
-});
-
-describe('filterStaleInstances', () => {
-	afterEach(() => {
-		vi.restoreAllMocks();
-	});
-
-	it('returns empty array when no instances are stale', () => {
-		const recent = new Date(Date.now() - 30_000).toISOString();
-		const instances = [
-			{ status: 'healthy', last_seen_at: recent },
-			{ status: 'unreachable', last_seen_at: '2020-01-01T00:00:00Z' },
-		];
-		expect(filterStaleInstances(instances)).toEqual([]);
-	});
-
-	it('returns only stale instances', () => {
-		const recent = new Date(Date.now() - 30_000).toISOString();
-		const old = new Date(Date.now() - STALE_THRESHOLD_MS - 1000).toISOString();
-		const stale = { status: 'healthy', last_seen_at: old };
-		const fresh = { status: 'healthy', last_seen_at: recent };
-		expect(filterStaleInstances([stale, fresh])).toEqual([stale]);
-	});
-
-	it('returns empty array for empty input', () => {
-		expect(filterStaleInstances([])).toEqual([]);
+		expect(getStatusLabel('bogus')).toBe('Unknown');
+		expect(getStatusLabel(undefined)).toBe('Unknown');
 	});
 });
diff --git a/admin/ui/src/views/AuditLogView.vue b/admin/ui/src/views/AuditLogView.vue
index ffa3b86..dfcac7f 100644
--- a/admin/ui/src/views/AuditLogView.vue
+++ b/admin/ui/src/views/AuditLogView.vue
@@ -49,25 +49,41 @@
 					{{ opt.label }}
 				</option>
 			</select>
-			<input
-				:class="$style.dateInput"
-				type="date"
-				:value="audit.filters.value.from"
-				aria-label="From date"
-				@change="handleFromDate($event.target.value)"
-			/>
-			<input
-				:class="$style.dateInput"
-				type="date"
-				:value="audit.filters.value.to"
-				aria-label="To date"
-				@change="handleToDate($event.target.value)"
-			/>
+			<label :class="$style.dateLabel">
+				<span :class="$style.dateLabelText">From</span>
+				<input
+					:class="$style.dateInput"
+					type="date"
+					:value="audit.filters.value.from"
+					@change="handleFromDate($event.target.value)"
+				/>
+			</label>
+			<label :class="$style.dateLabel">
+				<span :class="$style.dateLabelText">To</span>
+				<input
+					:class="$style.dateInput"
+					type="date"
+					:value="audit.filters.value.to"
+					@change="handleToDate($event.target.value)"
+				/>
+			</label>
 		</div>
 
 		<div :class="$style.content">
+			<!-- Loading state -->
+			<div
+				v-if="audit.loading.value && audit.items.value.length === 0"
+				:class="$style.loadingContainer"
+			>
+				<LoadingSpinner size="lg" label="Loading audit log..." />
+			</div>
+
 			<!-- Error state -->
-			<div v-if="audit.error.value" :class="$style.errorBanner" role="alert">
+			<div
+				v-else-if="audit.error.value"
+				:class="$style.errorBanner"
+				role="alert"
+			>
 				Failed to load audit log: {{ audit.error.value }}
 			</div>
 
@@ -245,6 +261,7 @@
 import { computed, onMounted, onUnmounted } from 'vue';
 import BaseCard from '../components/BaseCard.vue';
 import BaseEmptyState from '../components/BaseEmptyState.vue';
+import LoadingSpinner from '../components/LoadingSpinner.vue';
 import * as api from '../utils/api.js';
 import { useAuditLog } from '../composables/useAuditLog.js';
 import {
@@ -387,6 +404,19 @@ onMounted(() => audit.fetch());
 	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }
 
+.dateLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.dateLabelText {
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-medium);
+	color: var(--color-text-secondary);
+	white-space: nowrap;
+}
+
 .dateInput {
 	padding: 0.5rem 0.75rem;
 	border: 1px solid var(--color-border);
@@ -547,4 +577,31 @@ onMounted(() => audit.fetch());
 	min-width: 60px;
 	text-align: center;
 }
+
+.loadingContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-8) 0;
+}
+
+@media (max-width: 768px) {
+	.filters {
+		flex-direction: column;
+	}
+
+	.searchWrapper {
+		max-width: none;
+	}
+
+	.select,
+	.dateInput {
+		width: 100%;
+	}
+
+	.pagination {
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+}
 </style>
diff --git a/admin/ui/src/views/DashboardView.vue b/admin/ui/src/views/DashboardView.vue
index a821379..d753f23 100644
--- a/admin/ui/src/views/DashboardView.vue
+++ b/admin/ui/src/views/DashboardView.vue
@@ -60,10 +60,14 @@
 			</div>
 		</div>
 
-		<!-- Staleness banner -->
+		<!-- Unreachable instances banner -->
 		<div
-			v-if="staleInstances.length > 0"
-			:class="$style.staleBanner"
+			v-if="unreachableCount > 0"
+			:class="
+				unreachableCount === store.instances.length
+					? $style.errorBanner
+					: $style.warningBanner
+			"
 			role="alert"
 		>
 			<svg
@@ -77,18 +81,43 @@
 				stroke-linejoin="round"
 				aria-hidden="true"
 			>
-				<path
-					d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-				/>
-				<line x1="12" y1="9" x2="12" y2="13" />
-				<line x1="12" y1="17" x2="12.01" y2="17" />
+				<circle cx="12" cy="12" r="10" />
+				<line x1="12" y1="8" x2="12" y2="12" />
+				<line x1="12" y1="16" x2="12.01" y2="16" />
+			</svg>
+			<template v-if="unreachableCount === store.instances.length">
+				All {{ unreachableCount }} instances are unreachable &mdash; metrics
+				shown are from the last successful poll
+			</template>
+			<template v-else>
+				{{ unreachableCount }} of {{ store.instances.length }}
+				{{ unreachableCount === 1 ? 'instance is' : 'instances are' }}
+				unreachable
+			</template>
+		</div>
+
+		<!-- Fleet metrics error -->
+		<div
+			v-if="metricsStore.fleetError && store.instances.length > 0"
+			:class="$style.errorBanner"
+			role="alert"
+		>
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<circle cx="12" cy="12" r="10" />
+				<line x1="12" y1="8" x2="12" y2="12" />
+				<line x1="12" y1="16" x2="12.01" y2="16" />
 			</svg>
-			{{
-				staleInstances.length === 1
-					? '1 instance has'
-					: `${staleInstances.length} instances have`
-			}}
-			stale data — last seen over 2 minutes ago
+			Failed to load fleet metrics &mdash; data may be stale
 		</div>
 
 		<!-- Fleet KPI panel -->
@@ -99,11 +128,13 @@
 		/>
 
 		<div :class="$style.content">
+			<!-- Loading state -->
+			<div v-if="!store.initialized" :class="$style.loadingContainer">
+				<LoadingSpinner size="lg" label="Loading fleet data..." />
+			</div>
+
 			<!-- First-run welcome screen -->
-			<div
-				v-if="!store.loading && store.instances.length === 0"
-				:class="$style.welcome"
-			>
+			<div v-else-if="store.instances.length === 0" :class="$style.welcome">
 				<div :class="$style.welcomeIcon" aria-hidden="true">
 					<svg
 						width="32"
@@ -218,9 +249,9 @@ import InstanceTable from '../components/InstanceTable.vue';
 import AddInstanceModal from '../components/AddInstanceModal.vue';
 import ConfirmDialog from '../components/ConfirmDialog.vue';
 import FleetKpiPanel from '../components/FleetKpiPanel.vue';
+import LoadingSpinner from '../components/LoadingSpinner.vue';
 import { useInstanceStore } from '../stores/instances.js';
 import { useMetricsStore } from '../stores/metrics.js';
-import { filterStaleInstances } from '../utils/instance.js';
 import { usePolling } from '../composables/usePolling.js';
 import { useConfirmDialog } from '../composables/useConfirmDialog.js';
 
@@ -231,7 +262,9 @@ const showModal = ref(false);
 const editingInstance = ref(null);
 const viewMode = ref('card');
 
-const staleInstances = computed(() => filterStaleInstances(store.instances));
+const unreachableCount = computed(
+	() => store.instances.filter((i) => i.status === 'unreachable').length,
+);
 
 usePolling(() => store.fetchInstances(), 10000);
 usePolling(() => metricsStore.fetchFleetMetrics(), 10000);
@@ -328,7 +361,13 @@ function closeModal() {
 	color: var(--color-accent);
 }
 
-.staleBanner {
+.toggleBtn:focus-visible {
+	outline: 2px solid var(--color-accent);
+	outline-offset: -2px;
+	z-index: 1;
+}
+
+.warningBanner {
 	display: flex;
 	align-items: center;
 	gap: var(--space-2);
@@ -437,4 +476,36 @@ function closeModal() {
 	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 	gap: var(--space-4);
 }
+
+.errorBanner {
+	display: flex;
+	align-items: center;
+	gap: var(--space-2);
+	padding: var(--space-3) var(--space-4);
+	background-color: var(--color-error-bg);
+	color: var(--color-error);
+	border: 1px solid var(--color-error-border);
+	border-radius: var(--radius-lg);
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+}
+
+.loadingContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-8) 0;
+}
+
+@media (max-width: 768px) {
+	.header {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--space-3);
+	}
+
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
 </style>
diff --git a/admin/ui/src/views/InstanceDetailView.vue b/admin/ui/src/views/InstanceDetailView.vue
index 49c172e..ab4c74f 100644
--- a/admin/ui/src/views/InstanceDetailView.vue
+++ b/admin/ui/src/views/InstanceDetailView.vue
@@ -15,8 +15,8 @@
 				<h1 :class="$style.title">{{ instance.name }}</h1>
 				<div :class="$style.meta">
 					<StatusIndicator
-						:status="isStale ? 'stale' : instance.status"
-						:label="getStatusLabel(instance.status, isStale)"
+						:status="instance.status"
+						:label="getStatusLabel(instance.status)"
 						size="sm"
 					/>
 					<span :class="$style.address">{{ instance.address }}</span>
@@ -33,9 +33,12 @@
 				id="tab-overview"
 				:class="[$style.tab, activeTab === 'overview' && $style.tabActive]"
 				:aria-selected="activeTab === 'overview'"
+				:tabindex="activeTab === 'overview' ? 0 : -1"
 				role="tab"
 				aria-controls="tabpanel-overview"
 				@click="activeTab = 'overview'"
+				@keydown.right.prevent="switchTab('traffic')"
+				@keydown.left.prevent="switchTab('traffic')"
 			>
 				Overview
 			</button>
@@ -43,9 +46,12 @@
 				id="tab-traffic"
 				:class="[$style.tab, activeTab === 'traffic' && $style.tabActive]"
 				:aria-selected="activeTab === 'traffic'"
+				:tabindex="activeTab === 'traffic' ? 0 : -1"
 				role="tab"
 				aria-controls="tabpanel-traffic"
 				@click="activeTab = 'traffic'"
+				@keydown.left.prevent="switchTab('overview')"
+				@keydown.right.prevent="switchTab('overview')"
 			>
 				Traffic
 			</button>
@@ -81,8 +87,13 @@
 			/>
 		</div>
 
+		<!-- Loading state -->
+		<div v-else-if="!store.initialized" :class="$style.loadingContainer">
+			<LoadingSpinner size="lg" label="Loading instance..." />
+		</div>
+
 		<!-- Instance not found -->
-		<div v-else-if="!store.loading && !instance" :class="$style.error">
+		<div v-else-if="!instance" :class="$style.error">
 			<BaseEmptyState
 				title="Instance not found"
 				description="This instance may have been removed. Return to the fleet dashboard to see active instances."
@@ -96,11 +107,12 @@ import { ref, computed, watch, onUnmounted } from 'vue';
 import { useRoute, RouterLink } from 'vue-router';
 import StatusIndicator from '../components/StatusIndicator.vue';
 import BaseEmptyState from '../components/BaseEmptyState.vue';
+import LoadingSpinner from '../components/LoadingSpinner.vue';
 import OverviewTab from '../components/OverviewTab.vue';
 import TrafficTab from '../components/TrafficTab.vue';
 import { useInstanceStore } from '../stores/instances.js';
 import { useMetricsStore } from '../stores/metrics.js';
-import { isInstanceStale, getStatusLabel } from '../utils/instance.js';
+import { getStatusLabel } from '../utils/instance.js';
 import { usePolling } from '../composables/usePolling.js';
 
 const route = useRoute();
@@ -114,12 +126,13 @@ const instance = computed(() =>
 	store.instances.find((i) => i.id === instanceId.value),
 );
 
-const isStale = computed(() =>
-	instance.value ? isInstanceStale(instance.value) : false,
-);
-
 const metrics = computed(() => metricsStore.instance);
 
+function switchTab(tab) {
+	activeTab.value = tab;
+	document.getElementById(`tab-${tab}`)?.focus();
+}
+
 usePolling(() => store.fetchInstances(), 10000);
 usePolling(() => metricsStore.fetchInstanceMetrics(instanceId.value), 10000);
 
@@ -228,4 +241,11 @@ onUnmounted(() => metricsStore.clearInstance());
 .error {
 	padding: var(--space-8) 0;
 }
+
+.loadingContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-8) 0;
+}
 </style>
diff --git a/admin/ui/vite.config.js b/admin/ui/vite.config.js
index e20f4e8..cfbfe45 100644
--- a/admin/ui/vite.config.js
+++ b/admin/ui/vite.config.js
@@ -1,7 +1,12 @@
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
 export default defineConfig({
+  cacheDir: resolve(__dirname, "node_modules/.vite"),
   plugins: [vue()],
   test: {
     environment: "jsdom",

From 26ad4db7c0f5931e115740ed4f82ed2050e7e6fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Cuevas?= <victor.cuevas@cloudblue.com>
Date: Thu, 23 Apr 2026 10:52:25 +0200
Subject: [PATCH 2/2] fix(admin): improve focus trap robustness and tab
 keyboard navigation

---
 admin/ui/src/composables/useFocusTrap.js      |  7 +--
 admin/ui/src/composables/useFocusTrap.test.js | 32 +++++++++++
 admin/ui/src/views/InstanceDetailView.vue     | 54 ++++++++++---------
 3 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/admin/ui/src/composables/useFocusTrap.js b/admin/ui/src/composables/useFocusTrap.js
index e420428..c70a2f0 100644
--- a/admin/ui/src/composables/useFocusTrap.js
+++ b/admin/ui/src/composables/useFocusTrap.js
@@ -4,7 +4,7 @@ const FOCUSABLE =
 	'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
 
 export function useFocusTrap(containerRef) {
-	let previouslyFocused = null;
+	const previouslyFocused = document.activeElement;
 
 	function handleKeydown(e) {
 		if (e.key !== 'Tab') return;
@@ -28,12 +28,13 @@ export function useFocusTrap(containerRef) {
 	}
 
 	onMounted(() => {
-		previouslyFocused = document.activeElement;
 		document.addEventListener('keydown', handleKeydown);
 	});
 
 	onUnmounted(() => {
 		document.removeEventListener('keydown', handleKeydown);
-		previouslyFocused?.focus();
+		if (previouslyFocused && document.contains(previouslyFocused)) {
+			previouslyFocused.focus();
+		}
 	});
 }
diff --git a/admin/ui/src/composables/useFocusTrap.test.js b/admin/ui/src/composables/useFocusTrap.test.js
index fcfb0e0..c9104c1 100644
--- a/admin/ui/src/composables/useFocusTrap.test.js
+++ b/admin/ui/src/composables/useFocusTrap.test.js
@@ -99,4 +99,36 @@ describe('useFocusTrap', () => {
 
 		expect(prevented).toBe(false);
 	});
+
+	it('restores focus to previously focused element on unmount', () => {
+		btn1.focus();
+		expect(document.activeElement).toBe(btn1);
+
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		// Focus moves elsewhere during the trap's lifetime.
+		btn3.focus();
+		expect(document.activeElement).toBe(btn3);
+
+		app.unmount();
+		app = null;
+		expect(document.activeElement).toBe(btn1);
+	});
+
+	it('skips restore when previously focused element was removed from DOM', () => {
+		btn1.focus();
+		expect(document.activeElement).toBe(btn1);
+
+		const containerRef = ref(container);
+		({ app } = withSetup(() => useFocusTrap(containerRef)));
+
+		// Simulate the trigger element being removed while the modal is open.
+		btn1.remove();
+
+		app.unmount();
+		app = null;
+		// Should not throw; focus stays wherever it was.
+		expect(document.activeElement).not.toBe(btn1);
+	});
 });
diff --git a/admin/ui/src/views/InstanceDetailView.vue b/admin/ui/src/views/InstanceDetailView.vue
index ab4c74f..554ef7c 100644
--- a/admin/ui/src/views/InstanceDetailView.vue
+++ b/admin/ui/src/views/InstanceDetailView.vue
@@ -30,30 +30,19 @@
 		<!-- Tabs -->
 		<div v-if="instance" :class="$style.tabs" role="tablist">
 			<button
-				id="tab-overview"
-				:class="[$style.tab, activeTab === 'overview' && $style.tabActive]"
-				:aria-selected="activeTab === 'overview'"
-				:tabindex="activeTab === 'overview' ? 0 : -1"
+				v-for="tab in tabs"
+				:id="`tab-${tab.id}`"
+				:key="tab.id"
+				:class="[$style.tab, activeTab === tab.id && $style.tabActive]"
+				:aria-selected="activeTab === tab.id"
+				:tabindex="activeTab === tab.id ? 0 : -1"
 				role="tab"
-				aria-controls="tabpanel-overview"
-				@click="activeTab = 'overview'"
-				@keydown.right.prevent="switchTab('traffic')"
-				@keydown.left.prevent="switchTab('traffic')"
+				:aria-controls="`tabpanel-${tab.id}`"
+				@click="activeTab = tab.id"
+				@keydown.right.prevent="nextTab"
+				@keydown.left.prevent="prevTab"
 			>
-				Overview
-			</button>
-			<button
-				id="tab-traffic"
-				:class="[$style.tab, activeTab === 'traffic' && $style.tabActive]"
-				:aria-selected="activeTab === 'traffic'"
-				:tabindex="activeTab === 'traffic' ? 0 : -1"
-				role="tab"
-				aria-controls="tabpanel-traffic"
-				@click="activeTab = 'traffic'"
-				@keydown.left.prevent="switchTab('overview')"
-				@keydown.right.prevent="switchTab('overview')"
-			>
-				Traffic
+				{{ tab.label }}
 			</button>
 		</div>
 
@@ -118,6 +107,11 @@ import { usePolling } from '../composables/usePolling.js';
 const route = useRoute();
 const store = useInstanceStore();
 const metricsStore = useMetricsStore();
+const tabs = [
+	{ id: 'overview', label: 'Overview' },
+	{ id: 'traffic', label: 'Traffic' },
+];
+
 const activeTab = ref('overview');
 
 const instanceId = computed(() => Number(route.params.id));
@@ -128,9 +122,19 @@ const instance = computed(() =>
 
 const metrics = computed(() => metricsStore.instance);
 
-function switchTab(tab) {
-	activeTab.value = tab;
-	document.getElementById(`tab-${tab}`)?.focus();
+function activateTab(tabId) {
+	activeTab.value = tabId;
+	document.getElementById(`tab-${tabId}`)?.focus();
+}
+
+function nextTab() {
+	const i = tabs.findIndex((t) => t.id === activeTab.value);
+	activateTab(tabs[(i + 1) % tabs.length].id);
+}
+
+function prevTab() {
+	const i = tabs.findIndex((t) => t.id === activeTab.value);
+	activateTab(tabs[(i - 1 + tabs.length) % tabs.length].id);
 }
 
 usePolling(() => store.fetchInstances(), 10000);