minor: heavily simplify server and app content. unify styling (#4)

Co-authored-by: Madison Grubb <madison@elastiflow.com> Reviewed-on: #4
2026-02-14 04:52:18 +00:00
parent 1a143d2f8e
commit 17f28401ba
40 changed files with 595 additions and 933 deletions
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -0,0 +1,128 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .kestrel-page-heading { @apply text-xl font-semibold tracking-wide text-kestrel-text text-shadow-glow-sm; }
+  .kestrel-section-heading { @apply text-lg font-semibold tracking-wide text-kestrel-text text-shadow-glow-sm; }
+  .kestrel-panel-header { @apply flex items-center justify-between border-b border-kestrel-border px-4 py-3 shadow-border-header; }
+  .kestrel-video-frame { @apply relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black shadow-glow-inset-video; }
+  .kestrel-close-btn { @apply rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent; }
+  .kestrel-card { @apply rounded border border-kestrel-border bg-kestrel-surface shadow-glow-card; }
+  .kestrel-card-modal { @apply rounded-lg border border-kestrel-border bg-kestrel-surface shadow-glow-modal; }
+  .kestrel-label { @apply mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted; }
+  .kestrel-section-label { @apply mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted; }
+  .kestrel-input { @apply w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text placeholder:text-kestrel-muted outline-none transition-colors focus:border-kestrel-accent; }
+  .kestrel-btn-secondary { @apply rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border; }
+  .kestrel-context-menu-item { @apply block w-full px-3 py-1.5 text-left text-sm text-kestrel-text transition-colors hover:bg-kestrel-border; }
+  .kestrel-context-menu-item-danger { @apply block w-full px-3 py-1.5 text-left text-sm text-red-400 transition-colors hover:bg-kestrel-border; }
+  .kestrel-panel-base { @apply flex flex-col border border-kestrel-border bg-kestrel-surface; }
+  .kestrel-panel-inline { @apply rounded-lg shadow-glow; }
+  .kestrel-panel-overlay { @apply absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] shadow-glow-panel; }
+}
+
+/* Transitions: modal + drawer-backdrop (same fade) */
+.modal-enter-active, .modal-leave-active,
+.drawer-backdrop-enter-active, .drawer-backdrop-leave-active { transition: opacity 0.2s ease; }
+.modal-enter-from, .modal-leave-to,
+.drawer-backdrop-enter-from, .drawer-backdrop-leave-to { opacity: 0; }
+.modal-enter-active .relative, .modal-leave-active .relative { transition: transform 0.2s ease; }
+.modal-enter-from .relative, .modal-leave-to .relative { transform: scale(0.96); }
+
+.nav-drawer { box-shadow: 8px 0 24px -4px rgba(34, 201, 201, 0.12); }
+@media (min-width: 768px) { .nav-drawer { box-shadow: none; } }
+
+/* Leaflet map */
+.kestrel-map-container {
+  background: #000 !important;
+}
+.kestrel-map-container .leaflet-tile-pane,
+.kestrel-map-container .leaflet-map-pane,
+.kestrel-map-container .leaflet-tile-container {
+  background: #000 !important;
+}
+.kestrel-map-container img.leaflet-tile {
+  background: #000 !important;
+  mix-blend-mode: normal;
+}
+.kestrel-map-container .poi-div-icon {
+  background: none;
+  border: none;
+}
+.kestrel-map-container .poi-icon-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.kestrel-map-container .kestrel-poi-tooltip,
+.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-content-wrapper,
+.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-tip {
+  @apply bg-kestrel-surface-elevated border border-kestrel-glow rounded-md shadow-elevated;
+}
+.kestrel-map-container .kestrel-poi-tooltip {
+  @apply text-kestrel-text-bright text-xs font-[inherit] py-1.5 px-2.5;
+}
+.kestrel-map-container .kestrel-poi-tooltip::before,
+.kestrel-map-container .kestrel-poi-tooltip::after {
+  border-color: #1e293b;
+}
+.kestrel-map-container .kestrel-live-popup-wrap .leaflet-popup-content {
+  @apply text-kestrel-text-bright my-2 mx-3 min-w-[200px];
+}
+.kestrel-map-container .kestrel-live-popup {
+  @apply text-kestrel-text-bright text-xs;
+}
+.kestrel-map-container .kestrel-live-popup img {
+  @apply block max-h-40 w-auto rounded bg-kestrel-bg;
+}
+.kestrel-map-container .leaflet-control-zoom,
+.kestrel-map-container .leaflet-control-locate,
+.kestrel-map-container .savetiles.leaflet-bar {
+  @apply rounded-md overflow-hidden font-mono border border-kestrel-glow shadow-glow-sm;
+  border-color: rgba(34, 201, 201, 0.35) !important;
+}
+.kestrel-map-container .leaflet-control-zoom a,
+.kestrel-map-container .leaflet-control-locate,
+.kestrel-map-container .savetiles.leaflet-bar a {
+  @apply w-8 h-8 leading-8 bg-kestrel-surface text-kestrel-text border-none rounded-none text-lg font-semibold no-underline transition-all duration-150;
+  width: 32px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  background: #0d1424 !important;
+  color: #b8c9e0 !important;
+  text-decoration: none !important;
+}
+.kestrel-map-container .leaflet-control-zoom a + a,
+.kestrel-map-container .savetiles.leaflet-bar a + a {
+  border-top: 1px solid rgba(34, 201, 201, 0.2);
+}
+.kestrel-map-container .leaflet-control-zoom a:hover,
+.kestrel-map-container .leaflet-control-locate:hover,
+.kestrel-map-container .savetiles.leaflet-bar a:hover {
+  @apply bg-kestrel-surface-hover text-kestrel-accent shadow-glow-md text-shadow-glow-md;
+}
+.kestrel-map-container .savetiles.leaflet-bar {
+  @apply flex flex-col;
+}
+.kestrel-map-container .savetiles.leaflet-bar a {
+  @apply min-w-[5.5em] leading-tight py-1.5 px-2.5 whitespace-nowrap text-center text-[11px] font-medium tracking-wide;
+  width: auto !important;
+  height: auto !important;
+  line-height: 1.25 !important;
+  padding: 6px 10px !important;
+  font-size: 11px !important;
+}
+.kestrel-map-container .leaflet-control-locate {
+  @apply flex items-center justify-center p-0 cursor-pointer;
+}
+.kestrel-map-container .leaflet-control-locate svg {
+  color: currentColor;
+}
+.kestrel-map-container .live-session-icon {
+  animation: live-pulse 1.5s ease-in-out infinite;
+}
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
--- a/app/components/CameraViewer.vue
+++ b/app/components/CameraViewer.vue
@@ -7,18 +7,18 @@
  />
  <aside
    v-else
-    class="flex flex-col border border-kestrel-border bg-kestrel-surface"
-    :class="asideClass"
+    class="kestrel-panel-base"
+    :class="inline ? 'kestrel-panel-inline' : 'kestrel-panel-overlay'"
    role="dialog"
    aria-label="Camera feed"
  >
-    <div class="flex items-center justify-between border-b border-kestrel-border px-4 py-3 [box-shadow:0_1px_0_0_rgba(34,201,201,0.08)]">
-      <h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <div class="kestrel-panel-header">
+      <h2 class="font-medium tracking-wide text-kestrel-text text-shadow-glow-sm">
        {{ camera?.name ?? 'Camera' }}
      </h2>
      <button
        type="button"
-        class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
+        class="kestrel-close-btn"
        aria-label="Close panel"
        @click="$emit('close')"
      >
@@ -26,7 +26,7 @@
      </button>
    </div>
    <div class="flex-1 overflow-auto p-4">
-      <div class="relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black [box-shadow:inset_0_0_20px_-8px_rgba(34,201,201,0.1)]">
+      <div class="kestrel-video-frame">
        <template v-if="sourceType === 'hls'">
          <video
            ref="videoRef"
@@ -75,18 +75,14 @@ defineEmits(['close'])
 const videoRef = ref(null)
 const streamError = ref(false)

-const isLiveSession = computed(() =>
-  props.camera && typeof props.camera.hasStream !== 'undefined')
-
-const asideClass = computed(() =>
-  props.inline ? 'rounded-lg shadow-glow' : 'absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] [box-shadow:-8px_0_24px_-4px_rgba(34,201,201,0.12)]')
+const isLiveSession = computed(() => props.camera?.hasStream !== undefined)

 const streamUrl = computed(() => props.camera?.streamUrl ?? '')
 const sourceType = computed(() => (props.camera?.sourceType === 'hls' ? 'hls' : 'mjpeg'))

 const safeStreamUrl = computed(() => {
-  const u = streamUrl.value
-  return typeof u === 'string' && u.trim() && (u.startsWith('http://') || u.startsWith('https://')) ? u.trim() : ''
+  const u = streamUrl.value?.trim()
+  return (u?.startsWith('http://') || u?.startsWith('https://')) ? u : ''
 })

 function initHls() {
--- a/app/components/KestrelMap.vue
+++ b/app/components/KestrelMap.vue
@@ -7,13 +7,13 @@
    <div
      v-if="contextMenu.type"
      ref="contextMenuRef"
-      class="pointer-events-auto absolute z-[1000] min-w-[120px] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.2)]"
+      class="pointer-events-auto absolute z-[1000] min-w-[120px] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-context"
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
    >
      <template v-if="contextMenu.type === 'map'">
        <button
          type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
+          class="kestrel-context-menu-item"
          @click="openAddPoiModal(contextMenu.latlng)"
        >
          Add POI here
@@ -22,14 +22,14 @@
      <template v-else-if="contextMenu.type === 'poi'">
        <button
          type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
+          class="kestrel-context-menu-item"
          @click="openEditPoiModal(contextMenu.poi)"
        >
          Edit
        </button>
        <button
          type="button"
-          class="block w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-kestrel-border"
+          class="kestrel-context-menu-item-danger"
          @click="openDeletePoiModal(contextMenu.poi)"
        >
          Delete
@@ -37,176 +37,16 @@
      </template>
    </div>

-    <!-- POI modal (Add / Edit) -->
-    <Teleport to="body">
-      <Transition name="modal">
-        <div
-          v-if="showPoiModal"
-          class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="poiModalMode === 'delete' ? 'delete-poi-title' : 'poi-modal-title'"
-          @keydown.escape="closePoiModal"
-        >
-          <button
-            type="button"
-            class="absolute inset-0 bg-black/60 transition-opacity"
-            aria-label="Close"
-            @click="closePoiModal"
-          />
-          <!-- Add / Edit form -->
-          <div
-            v-if="poiModalMode === 'add' || poiModalMode === 'edit'"
-            ref="poiModalRef"
-            class="relative w-full max-w-md rounded-lg border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_32px_-8px_rgba(34,201,201,0.25)]"
-            @click.stop
-          >
-            <h2
-              id="poi-modal-title"
-              class="mb-4 text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]"
-            >
-              {{ poiModalMode === 'edit' ? 'Edit POI' : 'Add POI' }}
-            </h2>
-            <form
-              class="space-y-4"
-              @submit.prevent="submitPoiModal"
-            >
-              <div>
-                <label
-                  for="add-poi-label"
-                  class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted"
-                >
-                  Label (optional)
-                </label>
-                <input
-                  id="add-poi-label"
-                  v-model="poiForm.label"
-                  type="text"
-                  placeholder="e.g. Rally point"
-                  class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text placeholder:text-kestrel-muted outline-none transition-colors focus:border-kestrel-accent"
-                  autocomplete="off"
-                >
-              </div>
-              <div>
-                <label
-                  class="mb-1.5 block text-xs font-medium uppercase tracking-wider text-kestrel-muted"
-                >
-                  Icon type
-                </label>
-                <div
-                  :ref="el => iconDropdownOpen && (iconDropdownRef.value = el)"
-                  class="relative inline-block w-full"
-                >
-                  <button
-                    type="button"
-                    class="flex w-full min-w-0 items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-left text-sm text-kestrel-text transition-colors hover:border-kestrel-accent/50"
-                    :aria-expanded="iconDropdownOpen"
-                    aria-haspopup="listbox"
-                    :aria-label="`Icon type: ${poiForm.iconType}`"
-                    @click="iconDropdownOpen = !iconDropdownOpen"
-                  >
-                    <span class="flex items-center gap-2 capitalize">
-                      <Icon
-                        :name="POI_ICONIFY_IDS[poiForm.iconType]"
-                        class="size-4 shrink-0"
-                      />
-                      {{ poiForm.iconType }}
-                    </span>
-                    <span
-                      class="text-kestrel-muted transition-transform"
-                      :class="iconDropdownOpen && 'rotate-180'"
-                    >
-                      ▾
-                    </span>
-                  </button>
-                  <Transition
-                    enter-active-class="transition duration-100 ease-out"
-                    enter-from-class="opacity-0 scale-95"
-                    enter-to-class="opacity-100 scale-100"
-                    leave-active-class="transition duration-75 ease-in"
-                    leave-from-class="opacity-100 scale-100"
-                    leave-to-class="opacity-0 scale-95"
-                  >
-                    <div
-                      v-show="iconDropdownOpen"
-                      class="absolute left-0 right-0 top-full z-10 mt-1 rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow [box-shadow:0_4px_12px_-2px_rgba(34,201,201,0.15)]"
-                      role="listbox"
-                    >
-                      <button
-                        v-for="opt in POI_ICON_TYPES"
-                        :key="opt"
-                        type="button"
-                        role="option"
-                        :aria-selected="poiForm.iconType === opt"
-                        class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm capitalize transition-colors"
-                        :class="poiForm.iconType === opt
-                          ? 'bg-kestrel-accent-dim text-kestrel-accent'
-                          : 'text-kestrel-text hover:bg-kestrel-border'"
-                        @click="poiForm.iconType = opt; iconDropdownOpen = false"
-                      >
-                        <Icon
-                          :name="POI_ICONIFY_IDS[opt]"
-                          class="size-4 shrink-0"
-                        />
-                        {{ opt }}
-                      </button>
-                    </div>
-                  </Transition>
-                </div>
-              </div>
-              <div class="flex justify-end gap-2 pt-2">
-                <button
-                  type="button"
-                  class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border"
-                  @click="closePoiModal"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
-                >
-                  {{ poiModalMode === 'edit' ? 'Save changes' : 'Add POI' }}
-                </button>
-              </div>
-            </form>
-          </div>
-          <!-- Delete confirmation -->
-          <div
-            v-if="poiModalMode === 'delete'"
-            ref="poiModalRef"
-            class="relative w-full max-w-sm rounded-lg border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_32px_-8px_rgba(34,201,201,0.25)]"
-            @click.stop
-          >
-            <h2
-              id="delete-poi-title"
-              class="mb-2 text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]"
-            >
-              Delete POI?
-            </h2>
-            <p class="mb-4 text-sm text-kestrel-muted">
-              {{ deletePoi?.label ? `“${deletePoi.label}” will be removed.` : 'This POI will be removed.' }}
-            </p>
-            <div class="flex justify-end gap-2">
-              <button
-                type="button"
-                class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border"
-                @click="closePoiModal"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                class="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
-                @click="confirmDeletePoi"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
+    <PoiModal
+      :show="showPoiModal"
+      :mode="poiModalMode"
+      :form="poiForm"
+      :edit-poi="editPoi"
+      :delete-poi="deletePoi"
+      @close="closePoiModal"
+      @submit="onPoiSubmit"
+      @confirm-delete="confirmDeletePoi"
+    />
  </div>
 </template>

@@ -244,14 +84,11 @@ const liveMarkersRef = ref({})
 const contextMenu = ref({ ...CONTEXT_MENU_EMPTY })

 const showPoiModal = ref(false)
-const poiModalRef = ref(null)
 const poiModalMode = ref('add') // 'add' | 'edit' | 'delete'
 const addPoiLatlng = ref(null)
 const editPoi = ref(null)
 const deletePoi = ref(null)
 const poiForm = ref({ label: '', iconType: 'pin' })
-const iconDropdownOpen = ref(false)
-const iconDropdownRef = ref(null)

 const TILE_URL = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
 const TILE_SUBDOMAINS = 'abcd'
@@ -259,11 +96,7 @@ const ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">Op
 const DEFAULT_VIEW = [37.7749, -122.4194]
 const DEFAULT_ZOOM = 17
 const MARKER_ICON_PATH = '/'
-const POI_ICON_TYPES = ['pin', 'flag', 'waypoint']
 const POI_TOOLTIP_CLASS = 'kestrel-poi-tooltip'
-
-/** Tabler icon names (Nuxt Icon / Iconify) – modern technical aesthetic. */
-const POI_ICONIFY_IDS = { pin: 'tabler:map-pin', flag: 'tabler:flag', waypoint: 'tabler:current-location' }
 const POI_ICON_COLORS = { pin: '#22c9c9', flag: '#e53e3e', waypoint: '#a78bfa' }

 const ICON_SIZE = 28
@@ -279,8 +112,9 @@ function getPoiIconSvg(type) {
  return shapes[type] || shapes.pin
 }

+const VALID_POI_TYPES = ['pin', 'flag', 'waypoint']
 function getPoiIcon(L, poi) {
-  const type = poi.icon_type === 'pin' || poi.icon_type === 'flag' || poi.icon_type === 'waypoint' ? poi.icon_type : 'pin'
+  const type = VALID_POI_TYPES.includes(poi.icon_type) ? poi.icon_type : 'pin'
  const html = getPoiIconSvg(type)
  return L.divIcon({
    className: 'poi-div-icon',
@@ -290,7 +124,7 @@ function getPoiIcon(L, poi) {
  })
 }

-const LIVE_ICON_COLOR = '#22c9c9'
+const LIVE_ICON_COLOR = '#22c9c9' /* kestrel-accent – JS string for Leaflet SVG */
 function getLiveSessionIcon(L) {
  const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${LIVE_ICON_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="2" fill="${LIVE_ICON_COLOR}"/></svg>`
  return L.divIcon({
@@ -439,7 +273,7 @@ function updateLiveMarkers() {
  })

  const next = sessions.reduce((acc, session) => {
-    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span style="color:#22c9c9">● Live</span>' : ''}</div>`
+    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span class="text-kestrel-accent">● Live</span>' : ''}</div>`
    const existing = prev[session.id]
    if (existing) {
      existing.setLatLng([session.lat, session.lng])
@@ -473,7 +307,6 @@ function openAddPoiModal(latlng) {
  editPoi.value = null
  deletePoi.value = null
  poiForm.value = { label: '', iconType: 'pin' }
-  iconDropdownOpen.value = false
  showPoiModal.value = true
 }

@@ -484,7 +317,6 @@ function openEditPoiModal(poi) {
  addPoiLatlng.value = null
  deletePoi.value = null
  poiForm.value = { label: (poi.label ?? '').trim(), iconType: poi.icon_type || 'pin' }
-  iconDropdownOpen.value = false
  showPoiModal.value = true
 }

@@ -500,52 +332,38 @@ function openDeletePoiModal(poi) {
 function closePoiModal() {
  showPoiModal.value = false
  poiModalMode.value = 'add'
-  iconDropdownOpen.value = false
  addPoiLatlng.value = null
  editPoi.value = null
  deletePoi.value = null
 }

-function onPoiModalDocumentClick(e) {
-  if (!showPoiModal.value) return
-  if (iconDropdownOpen.value && iconDropdownRef.value && !iconDropdownRef.value.contains(e.target)) {
-    iconDropdownOpen.value = false
+async function doPoiFetch(fn) {
+  try {
+    await fn()
+    emit('refreshPois')
+    closePoiModal()
  }
+  catch { /* ignore */ }
 }

-async function submitPoiModal() {
+async function onPoiSubmit(payload) {
+  const { label, iconType } = payload
+  const body = { label: (label ?? '').trim(), iconType: iconType || 'pin' }
  if (poiModalMode.value === 'add') {
    const latlng = addPoiLatlng.value
    if (!latlng) return
-    const { label, iconType } = poiForm.value
-    try {
-      await $fetch('/api/pois', { method: 'POST', body: { lat: latlng.lat, lng: latlng.lng, label: (label ?? '').trim(), iconType: iconType || 'pin' } })
-      emit('refreshPois')
-      closePoiModal()
-    }
-    catch { /* ignore */ }
+    await doPoiFetch(() => $fetch('/api/pois', { method: 'POST', body: { ...body, lat: latlng.lat, lng: latlng.lng } }))
    return
  }
  if (poiModalMode.value === 'edit' && editPoi.value) {
-    const { label, iconType } = poiForm.value
-    try {
-      await $fetch(`/api/pois/${editPoi.value.id}`, { method: 'PATCH', body: { label: (label ?? '').trim(), iconType: iconType || 'pin' } })
-      emit('refreshPois')
-      closePoiModal()
-    }
-    catch { /* ignore */ }
+    await doPoiFetch(() => $fetch(`/api/pois/${editPoi.value.id}`, { method: 'PATCH', body }))
  }
 }

 async function confirmDeletePoi() {
  const poi = deletePoi.value
  if (!poi?.id) return
-  try {
-    await $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' })
-    emit('refreshPois')
-    closePoiModal()
-  }
-  catch { /* ignore */ }
+  await doPoiFetch(() => $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' }))
 }

 function destroyMap() {
@@ -604,7 +422,6 @@ onMounted(async () => {
  leafletRef.value = { L, offlineApi: offline }
  initMapWithLocation()
  document.addEventListener('click', onDocumentClick)
-  document.addEventListener('click', onPoiModalDocumentClick)
 })

 function onDocumentClick(e) {
@@ -613,7 +430,6 @@ function onDocumentClick(e) {

 onBeforeUnmount(() => {
  document.removeEventListener('click', onDocumentClick)
-  document.removeEventListener('click', onPoiModalDocumentClick)
  destroyMap()
 })

@@ -621,158 +437,3 @@ watch(() => props.devices, () => updateMarkers(), { deep: true })
 watch([() => props.pois, () => props.canEditPois], () => updatePoiMarkers(), { deep: true })
 watch(() => props.liveSessions, () => updateLiveMarkers(), { deep: true })
 </script>
-
-<style scoped>
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.2s ease;
-}
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-.modal-enter-active .relative,
-.modal-leave-active .relative {
-  transition: transform 0.2s ease;
-}
-.modal-enter-from .relative,
-.modal-leave-to .relative {
-  transform: scale(0.96);
-}
-
-/* Unrendered/loading tiles show black instead of white when panning */
-.kestrel-map-container {
-  background: #000 !important;
-}
-:deep(.leaflet-tile-pane),
-:deep(.leaflet-map-pane),
-:deep(.leaflet-tile-container) {
-  background: #000 !important;
-}
-:deep(img.leaflet-tile) {
-  background: #000 !important;
-  /* Override Leaflet’s plus-lighter so unloaded/empty tiles don’t flash white */
-  mix-blend-mode: normal;
-}
-/* Leaflet injects divIcon HTML into the map; :deep() so these styles apply to that content */
-:deep(.poi-div-icon) {
-  background: none;
-  border: none;
-}
-:deep(.poi-icon-svg) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-/* Dark-themed tooltip for POI labels (Leaflet creates these in the map container) */
-:deep(.kestrel-poi-tooltip) {
-  background: #1e293b;
-  border: 1px solid rgba(34, 201, 201, 0.35);
-  border-radius: 6px;
-  color: #e2e8f0;
-  font-size: 12px;
-  font-family: inherit;
-  padding: 6px 10px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-:deep(.kestrel-poi-tooltip::before),
-:deep(.kestrel-poi-tooltip::after) {
-  border-top-color: #1e293b;
-  border-bottom-color: #1e293b;
-  border-left-color: #1e293b;
-  border-right-color: #1e293b;
-}
-
-/* Live session popup (content injected by Leaflet) */
-:deep(.kestrel-live-popup-wrap .leaflet-popup-content) {
-  margin: 8px 12px;
-  min-width: 200px;
-}
-:deep(.kestrel-live-popup) {
-  color: #e2e8f0;
-  font-size: 12px;
-}
-:deep(.kestrel-live-popup img) {
-  display: block;
-  max-height: 160px;
-  width: auto;
-  border-radius: 4px;
-  background: #0f172a;
-}
-:deep(.live-session-icon) {
-  animation: live-pulse 1.5s ease-in-out infinite;
-}
-@keyframes live-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-/* Map controls – dark theme with cyan glow (zoom, locate, save/clear tiles) */
-:deep(.leaflet-control-zoom),
-:deep(.leaflet-control-locate),
-:deep(.savetiles.leaflet-bar) {
-  border: 1px solid rgba(34, 201, 201, 0.35) !important;
-  border-radius: 6px;
-  overflow: hidden;
-  box-shadow: 0 0 12px -2px rgba(34, 201, 201, 0.15);
-  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
-}
-:deep(.leaflet-control-zoom a),
-:deep(.leaflet-control-locate),
-:deep(.savetiles.leaflet-bar a) {
-  width: 32px !important;
-  height: 32px !important;
-  line-height: 32px !important;
-  background: #0d1424 !important;
-  color: #b8c9e0 !important;
-  border: none !important;
-  border-radius: 0 !important;
-  font-size: 18px !important;
-  font-weight: 600;
-  text-decoration: none !important;
-  transition: background 0.15s, color 0.15s, box-shadow 0.15s, text-shadow 0.15s;
-}
-:deep(.leaflet-control-zoom a + a) {
-  border-top: 1px solid rgba(34, 201, 201, 0.2) !important;
-}
-:deep(.leaflet-control-zoom a:hover),
-:deep(.leaflet-control-locate:hover),
-:deep(.savetiles.leaflet-bar a:hover) {
-  background: #111a2e !important;
-  color: #22c9c9 !important;
-  box-shadow: 0 0 16px -2px rgba(34, 201, 201, 0.25);
-  text-shadow: 0 0 8px rgba(34, 201, 201, 0.35);
-}
-:deep(.leaflet-control-locate) {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  cursor: pointer;
-}
-:deep(.leaflet-control-locate svg) {
-  color: currentColor;
-}
-/* Save/Clear tiles – text buttons */
-:deep(.savetiles.leaflet-bar) {
-  display: flex;
-  flex-direction: column;
-}
-:deep(.savetiles.leaflet-bar a) {
-  width: auto !important;
-  min-width: 5.5em;
-  height: auto !important;
-  line-height: 1.25 !important;
-  padding: 6px 10px !important;
-  white-space: nowrap;
-  text-align: center;
-  font-size: 11px !important;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-}
-:deep(.savetiles.leaflet-bar a + a) {
-  border-top: 1px solid rgba(34, 201, 201, 0.2) !important;
-}
-</style>
--- a/app/components/LiveSessionPanel.vue
+++ b/app/components/LiveSessionPanel.vue
@@ -1,17 +1,17 @@
 <template>
  <aside
-    class="flex flex-col border border-kestrel-border bg-kestrel-surface"
-    :class="inline ? 'rounded-lg shadow-glow' : 'absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] [box-shadow:-8px_0_24px_-4px_rgba(34,201,201,0.12)]'"
+    class="kestrel-panel-base"
+    :class="inline ? 'kestrel-panel-inline' : 'kestrel-panel-overlay'"
    role="dialog"
    aria-label="Live feed"
  >
-    <div class="flex items-center justify-between border-b border-kestrel-border px-4 py-3 [box-shadow:0_1px_0_0_rgba(34,201,201,0.08)]">
-      <h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <div class="kestrel-panel-header">
+      <h2 class="font-medium tracking-wide text-kestrel-text text-shadow-glow-sm">
        {{ session?.label ?? 'Live' }}
      </h2>
      <button
        type="button"
-        class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
+        class="kestrel-close-btn"
        aria-label="Close panel"
        @click="$emit('close')"
      >
@@ -22,7 +22,7 @@
      <p class="mb-3 text-xs text-kestrel-muted">
        Live camera feed (WebRTC)
      </p>
-      <div class="relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black [box-shadow:inset_0_0_20px_-8px_rgba(34,201,201,0.1)]">
+      <div class="kestrel-video-frame">
        <video
          ref="videoRef"
          autoplay
--- a/app/components/NavDrawer.vue
+++ b/app/components/NavDrawer.vue
@@ -17,14 +17,14 @@
      :aria-expanded="modelValue"
    >
      <div
-        class="flex h-14 shrink-0 items-center justify-between border-b border-kestrel-border bg-kestrel-surface px-4 shadow-glow-sm [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]"
+        class="flex h-14 shrink-0 items-center justify-between border-b border-kestrel-border bg-kestrel-surface px-4 shadow-glow-sm shadow-glow-header"
      >
        <h2 class="text-sm font-medium uppercase tracking-wider text-kestrel-muted">
          Navigation
        </h2>
        <button
          type="button"
-          class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
+          class="kestrel-close-btn"
          aria-label="Close navigation"
          @click="close"
        >
@@ -41,7 +41,7 @@
              :to="item.to"
              class="block rounded px-3 py-2 text-sm transition-colors"
              :class="isActive(item.to)
-                ? 'border-l-2 border-kestrel-accent bg-kestrel-surface-hover font-medium text-kestrel-accent [text-shadow:0_0_8px_rgba(34,201,201,0.25)]'
+                ? 'border-l-2 border-kestrel-accent bg-kestrel-surface-hover font-medium text-kestrel-accent text-shadow-glow-sm'
                : 'border-l-2 border-transparent text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-text'"
              @click="close"
            >
@@ -102,24 +102,3 @@ onBeforeUnmount(() => {
  document.removeEventListener('keydown', onEscape)
 })
 </script>
-
-<style scoped>
-.drawer-backdrop-enter-active,
-.drawer-backdrop-leave-active {
-  transition: opacity 0.2s ease;
-}
-.drawer-backdrop-enter-from,
-.drawer-backdrop-leave-to {
-  opacity: 0;
-}
-
-/* Same elevation as content: no right-edge shadow on desktop so drawer and navbar read as one layer */
-.nav-drawer {
-  box-shadow: 8px 0 24px -4px rgba(34, 201, 201, 0.12);
-}
-@media (min-width: 768px) {
-  .nav-drawer {
-    box-shadow: none;
-  }
-}
-</style>
--- a/app/components/PoiModal.vue
+++ b/app/components/PoiModal.vue
@@ -0,0 +1,190 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="mode === 'delete' ? 'delete-poi-title' : 'poi-modal-title'"
+        @keydown.escape="$emit('close')"
+      >
+        <button
+          type="button"
+          class="absolute inset-0 bg-black/60 transition-opacity"
+          aria-label="Close"
+          @click="$emit('close')"
+        />
+        <div
+          v-if="mode === 'add' || mode === 'edit'"
+          ref="modalRef"
+          class="kestrel-card-modal relative w-full max-w-md p-6"
+          @click.stop
+        >
+          <h2
+            id="poi-modal-title"
+            class="kestrel-section-heading mb-4"
+          >
+            {{ mode === 'edit' ? 'Edit POI' : 'Add POI' }}
+          </h2>
+          <form
+            class="space-y-4"
+            @submit.prevent="$emit('submit', { label: localForm.label, iconType: localForm.iconType })"
+          >
+            <div>
+              <label
+                for="add-poi-label"
+                class="kestrel-label"
+              >Label (optional)</label>
+              <input
+                id="add-poi-label"
+                v-model="localForm.label"
+                type="text"
+                placeholder="e.g. Rally point"
+                class="kestrel-input"
+                autocomplete="off"
+              >
+            </div>
+            <div
+              ref="iconRef"
+              class="relative inline-block w-full"
+            >
+              <label class="kestrel-label">Icon type</label>
+              <button
+                type="button"
+                class="flex w-full min-w-0 items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-left text-sm text-kestrel-text transition-colors hover:border-kestrel-accent/50"
+                :aria-expanded="iconOpen"
+                aria-haspopup="listbox"
+                :aria-label="`Icon type: ${localForm.iconType}`"
+                @click="iconOpen = !iconOpen"
+              >
+                <span class="flex items-center gap-2 capitalize">
+                  <Icon
+                    :name="POI_ICONIFY_IDS[localForm.iconType]"
+                    class="size-4 shrink-0"
+                  />
+                  {{ localForm.iconType }}
+                </span>
+                <span
+                  class="text-kestrel-muted transition-transform"
+                  :class="iconOpen && 'rotate-180'"
+                >▾</span>
+              </button>
+              <Transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-from-class="opacity-0 scale-95"
+                enter-to-class="opacity-100 scale-100"
+                leave-active-class="transition duration-75 ease-in"
+                leave-from-class="opacity-100 scale-100"
+                leave-to-class="opacity-0 scale-95"
+              >
+                <div
+                  v-show="iconOpen"
+                  class="absolute left-0 right-0 top-full z-10 mt-1 rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-dropdown"
+                  role="listbox"
+                >
+                  <button
+                    v-for="opt in POI_ICON_TYPES"
+                    :key="opt"
+                    type="button"
+                    role="option"
+                    :aria-selected="localForm.iconType === opt"
+                    class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm capitalize transition-colors"
+                    :class="localForm.iconType === opt ? 'bg-kestrel-accent-dim text-kestrel-accent' : 'text-kestrel-text hover:bg-kestrel-border'"
+                    @click="localForm.iconType = opt; iconOpen = false"
+                  >
+                    <Icon
+                      :name="POI_ICONIFY_IDS[opt]"
+                      class="size-4 shrink-0"
+                    />
+                    {{ opt }}
+                  </button>
+                </div>
+              </Transition>
+            </div>
+            <div class="flex justify-end gap-2 pt-2">
+              <button
+                type="button"
+                class="kestrel-btn-secondary"
+                @click="$emit('close')"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90"
+              >
+                {{ mode === 'edit' ? 'Save changes' : 'Add POI' }}
+              </button>
+            </div>
+          </form>
+        </div>
+        <div
+          v-if="mode === 'delete'"
+          ref="modalRef"
+          class="kestrel-card-modal relative w-full max-w-sm p-6"
+          @click.stop
+        >
+          <h2
+            id="delete-poi-title"
+            class="kestrel-section-heading mb-2"
+          >
+            Delete POI?
+          </h2>
+          <p class="mb-4 text-sm text-kestrel-muted">
+            {{ deletePoi?.label ? `"${deletePoi.label}" will be removed.` : 'This POI will be removed.' }}
+          </p>
+          <div class="flex justify-end gap-2">
+            <button
+              type="button"
+              class="kestrel-btn-secondary"
+              @click="$emit('close')"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
+              @click="$emit('confirmDelete')"
+            >
+              Delete
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+const POI_ICONIFY_IDS = { pin: 'tabler:map-pin', flag: 'tabler:flag', waypoint: 'tabler:current-location' }
+const POI_ICON_TYPES = Object.keys(POI_ICONIFY_IDS)
+
+const props = defineProps({
+  show: Boolean,
+  mode: { type: String, default: 'add' },
+  form: { type: Object, default: () => ({ label: '', iconType: 'pin' }) },
+  editPoi: { type: Object, default: null },
+  deletePoi: { type: Object, default: null },
+})
+defineEmits(['close', 'submit', 'confirmDelete'])
+
+const modalRef = ref(null)
+const iconRef = ref(null)
+const iconOpen = ref(false)
+const localForm = ref({ label: '', iconType: 'pin' })
+
+watch(() => props.show, (show) => {
+  if (!show) return
+  iconOpen.value = false
+  localForm.value = props.mode === 'edit' && props.editPoi
+    ? { label: (props.editPoi.label ?? '').trim(), iconType: props.editPoi.icon_type || 'pin' }
+    : { ...props.form }
+})
+
+function onDocClick(e) {
+  if (iconOpen.value && iconRef.value && !iconRef.value.contains(e.target)) iconOpen.value = false
+}
+onMounted(() => document.addEventListener('click', onDocClick))
+onBeforeUnmount(() => document.removeEventListener('click', onDocClick))
+</script>
--- a/app/composables/useAutoCloseLiveSession.js
+++ b/app/composables/useAutoCloseLiveSession.js
@@ -0,0 +1,12 @@
+/** Auto-closes selectedCamera when the selected live session disappears from liveSessions. */
+export function useAutoCloseLiveSession(selectedCamera, liveSessions) {
+  watch(
+    [() => selectedCamera.value, () => liveSessions.value],
+    ([sel, sessions]) => {
+      if (!sel || typeof sel.hasStream === 'undefined') return
+      const stillActive = (sessions ?? []).some(s => s.id === sel.id)
+      if (!stillActive) selectedCamera.value = null
+    },
+    { deep: true },
+  )
+}
--- a/app/composables/useCameras.js
+++ b/app/composables/useCameras.js
@@ -1,16 +1,19 @@
-/**
- * Fetches devices + live sessions (unified cameras). Optionally polls when tab is visible.
- */
+/** Fetches devices + live sessions; polls when tab visible. */
 const POLL_MS = 1500
+const EMPTY_RESPONSE = Object.freeze({ devices: [], liveSessions: [] })

 export function useCameras(options = {}) {
  const { poll: enablePoll = true } = options
  const { data, refresh } = useAsyncData(
    'cameras',
-    () => $fetch('/api/cameras').catch(() => ({ devices: [], liveSessions: [] })),
-    { default: () => ({ devices: [], liveSessions: [] }) },
+    () => $fetch('/api/cameras').catch(() => EMPTY_RESPONSE),
+    { default: () => EMPTY_RESPONSE },
  )

+  const devices = computed(() => Object.freeze([...(data.value?.devices ?? [])]))
+  const liveSessions = computed(() => Object.freeze([...(data.value?.liveSessions ?? [])]))
+  const cameras = computed(() => Object.freeze([...devices.value, ...liveSessions.value]))
+
  const pollInterval = ref(null)
  function startPolling() {
    if (!enablePoll || pollInterval.value) return
@@ -27,22 +30,11 @@ export function useCameras(options = {}) {
  onMounted(() => {
    if (typeof document === 'undefined') return
    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible') {
-        startPolling()
-        refresh()
-      }
-      else {
-        stopPolling()
-      }
+      document.visibilityState === 'visible' ? (startPolling(), refresh()) : stopPolling()
    })
    if (document.visibilityState === 'visible') startPolling()
  })
  onBeforeUnmount(stopPolling)

-  const devices = computed(() => data.value?.devices ?? [])
-  const liveSessions = computed(() => data.value?.liveSessions ?? [])
-  /** All cameras: devices first, then live sessions */
-  const cameras = computed(() => [...devices.value, ...liveSessions.value])
-
-  return { data, devices, liveSessions, cameras, refresh, startPolling, stopPolling }
+  return Object.freeze({ data, devices, liveSessions, cameras, refresh, startPolling, stopPolling })
 }
--- a/app/composables/useLiveSessions.js
+++ b/app/composables/useLiveSessions.js
@@ -1,24 +1,12 @@
-/**
- * Fetches active live sessions (camera + location sharing) and refreshes on an interval.
- * Only runs when the app is focused so we don't poll in the background.
- */
-
+/** Fetches live sessions; polls when tab visible. */
 const POLL_MS = 1500

 export function useLiveSessions() {
-  const { data: sessions, refresh } = useAsyncData(
+  const { data: _sessions, refresh } = useAsyncData(
    'live-sessions',
    async () => {
      try {
-        const result = await $fetch('/api/live')
-        if (process.env.NODE_ENV === 'development') {
-          console.log('[useLiveSessions] Fetched sessions:', result.map(s => ({
-            id: s.id,
-            label: s.label,
-            hasStream: s.hasStream,
-          })))
-        }
-        return result
+        return await $fetch('/api/live')
      }
      catch (err) {
        const msg = err?.message ?? String(err)
@@ -30,14 +18,13 @@ export function useLiveSessions() {
    { default: () => [] },
  )

+  const sessions = computed(() => Object.freeze([...(_sessions.value ?? [])]))
  const pollInterval = ref(null)

  function startPolling() {
    if (pollInterval.value) return
-    refresh() // Fetch immediately so new sessions show without waiting for first interval
-    pollInterval.value = setInterval(() => {
-      refresh()
-    }, POLL_MS)
+    refresh()
+    pollInterval.value = setInterval(refresh, POLL_MS)
  }

  function stopPolling() {
@@ -49,21 +36,12 @@ export function useLiveSessions() {

  onMounted(() => {
    if (typeof document === 'undefined') return
-    const onFocus = () => startPolling()
-    const onBlur = () => stopPolling()
    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible') {
-        onFocus()
-        refresh() // Fresh data when returning to tab
-      }
-      else onBlur()
+      document.visibilityState === 'visible' ? (startPolling(), refresh()) : stopPolling()
    })
    if (document.visibilityState === 'visible') startPolling()
  })
+  onBeforeUnmount(stopPolling)

-  onBeforeUnmount(() => {
-    stopPolling()
-  })
-
-  return { sessions, refresh, startPolling, stopPolling }
+  return Object.freeze({ sessions, refresh, startPolling, stopPolling })
 }
--- a/app/composables/useUser.js
+++ b/app/composables/useUser.js
@@ -1,3 +1,5 @@
+const EDIT_ROLES = Object.freeze(['admin', 'leader'])
+
 export function useUser() {
  const requestFetch = useRequestFetch()
  const { data: user, refresh } = useAsyncData(
@@ -5,7 +7,7 @@ export function useUser() {
    () => (requestFetch ?? $fetch)('/api/me').catch(() => null),
    { default: () => null },
  )
-  const canEditPois = computed(() => user.value?.role === 'admin' || user.value?.role === 'leader')
+  const canEditPois = computed(() => EDIT_ROLES.includes(user.value?.role))
  const isAdmin = computed(() => user.value?.role === 'admin')
-  return { user, canEditPois, isAdmin, refresh }
+  return Object.freeze({ user, canEditPois, isAdmin, refresh })
 }
--- a/app/composables/useWebRTC.js
+++ b/app/composables/useWebRTC.js
@@ -1,61 +1,26 @@
-/**
- * WebRTC composable for Mediasoup client operations.
- * Handles device initialization, transport creation, and WebSocket signaling.
- */
-
+/** WebRTC/Mediasoup client utilities. */
 import { logError, logWarn } from '../utils/logger.js'

-/**
- * Initialize Mediasoup device from router RTP capabilities.
- * @param {object} rtpCapabilities
- * @returns {Promise<object>} Mediasoup device
- */
-export async function createMediasoupDevice(rtpCapabilities) {
-  // Dynamically import mediasoup-client only in browser
-  if (typeof window === 'undefined') {
-    throw new TypeError('Mediasoup device can only be created in browser')
-  }
+const FETCH_OPTS = { credentials: 'include' }

-  // Use dynamic import for mediasoup-client
+export async function createMediasoupDevice(rtpCapabilities) {
+  if (typeof window === 'undefined') throw new TypeError('Mediasoup device can only be created in browser')
  const { Device } = await import('mediasoup-client')
  const device = new Device()
  await device.load({ routerRtpCapabilities: rtpCapabilities })
  return device
 }

-/**
- * Create WebSocket connection for signaling.
- * @param {string} url - WebSocket URL (e.g., 'ws://localhost:3000/ws')
- * @returns {Promise<WebSocket>} WebSocket connection
- */
 export function createWebSocketConnection(url) {
  return new Promise((resolve, reject) => {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    const wsUrl = url.startsWith('ws') ? url : `${protocol}//${window.location.host}/ws`
    const ws = new WebSocket(wsUrl)
-
-    ws.onopen = () => {
-      resolve(ws)
-    }
-
-    ws.onerror = () => {
-      reject(new Error('WebSocket connection failed'))
-    }
-
-    ws.onclose = () => {
-      // Connection closed
-    }
+    ws.onopen = () => resolve(ws)
+    ws.onerror = () => reject(new Error('WebSocket connection failed'))
  })
 }

-/**
- * Send WebSocket message and wait for response.
- * @param {WebSocket} ws
- * @param {string} sessionId
- * @param {string} type
- * @param {object} data
- * @returns {Promise<object>} Response message
- */
 export function sendWebSocketMessage(ws, sessionId, type, data = {}) {
  return new Promise((resolve, reject) => {
    if (ws.readyState !== WebSocket.OPEN) {
@@ -95,41 +60,20 @@ export function sendWebSocketMessage(ws, sessionId, type, data = {}) {
  })
 }

-/**
- * Create send transport (for publisher).
- * @param {object} device
- * @param {string} sessionId
- * @param {{ onConnectSuccess?: () => void, onConnectFailure?: (err: Error) => void }} [options] - Optional callbacks when transport connect succeeds or fails.
- * @returns {Promise<object>} Transport with send method
- */
-export async function createSendTransport(device, sessionId, options = {}) {
-  const { onConnectSuccess, onConnectFailure } = options
-  // Create transport via HTTP API
-  const transportParams = await $fetch('/api/live/webrtc/create-transport', {
-    method: 'POST',
-    body: { sessionId, isProducer: true },
-    credentials: 'include',
-  })
-  const transport = device.createSendTransport({
-    id: transportParams.id,
-    iceParameters: transportParams.iceParameters,
-    iceCandidates: transportParams.iceCandidates,
-    dtlsParameters: transportParams.dtlsParameters,
-  })
-
+function attachTransportHandlers(transport, transportParams, sessionId, label, { onConnectSuccess, onConnectFailure } = {}) {
  transport.on('connect', async ({ dtlsParameters }, callback, errback) => {
    try {
      await $fetch('/api/live/webrtc/connect-transport', {
        method: 'POST',
        body: { sessionId, transportId: transportParams.id, dtlsParameters },
-        credentials: 'include',
+        ...FETCH_OPTS,
      })
      onConnectSuccess?.()
      callback()
    }
    catch (err) {
-      logError('useWebRTC: Send transport connect failed', {
-        err: err.message || String(err),
+      logError(`useWebRTC: ${label} transport connect failed`, {
+        err: err?.message ?? String(err),
        transportId: transportParams.id,
        connectionState: transport.connectionState,
        sessionId,
@@ -138,48 +82,50 @@ export async function createSendTransport(device, sessionId, options = {}) {
      errback(err)
    }
  })
-
  transport.on('connectionstatechange', () => {
    const state = transport.connectionState
-    if (state === 'failed' || state === 'disconnected' || state === 'closed') {
-      logWarn('useWebRTC: Send transport connection state changed', {
-        state,
-        transportId: transportParams.id,
-        sessionId,
-      })
+    if (['failed', 'disconnected', 'closed'].includes(state)) {
+      logWarn(`useWebRTC: ${label} transport connection state changed`, { state, transportId: transportParams.id, sessionId })
    }
  })
+}
+
+export async function createSendTransport(device, sessionId, options = {}) {
+  const transportParams = await $fetch('/api/live/webrtc/create-transport', {
+    method: 'POST',
+    body: { sessionId, isProducer: true },
+    ...FETCH_OPTS,
+  })
+  const transport = device.createSendTransport({
+    id: transportParams.id,
+    iceParameters: transportParams.iceParameters,
+    iceCandidates: transportParams.iceCandidates,
+    dtlsParameters: transportParams.dtlsParameters,
+  })
+  attachTransportHandlers(transport, transportParams, sessionId, 'Send', options)

  transport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
    try {
      const { id } = await $fetch('/api/live/webrtc/create-producer', {
        method: 'POST',
        body: { sessionId, transportId: transportParams.id, kind, rtpParameters },
-        credentials: 'include',
+        ...FETCH_OPTS,
      })
      callback({ id })
    }
    catch (err) {
-      logError('useWebRTC: Producer creation failed', { err: err.message || String(err) })
+      logError('useWebRTC: Producer creation failed', { err: err?.message ?? String(err) })
      errback(err)
    }
  })
-
  return transport
 }

-/**
- * Create receive transport (for viewer).
- * @param {object} device
- * @param {string} sessionId
- * @returns {Promise<object>} Transport with consume method
- */
 export async function createRecvTransport(device, sessionId) {
-  // Create transport via HTTP API
  const transportParams = await $fetch('/api/live/webrtc/create-transport', {
    method: 'POST',
    body: { sessionId, isProducer: false },
-    credentials: 'include',
+    ...FETCH_OPTS,
  })
  const transport = device.createRecvTransport({
    id: transportParams.id,
@@ -187,55 +133,15 @@ export async function createRecvTransport(device, sessionId) {
    iceCandidates: transportParams.iceCandidates,
    dtlsParameters: transportParams.dtlsParameters,
  })
-
-  // Set up connect handler (will be called by mediasoup-client when needed)
-  transport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-    try {
-      await $fetch('/api/live/webrtc/connect-transport', {
-        method: 'POST',
-        body: { sessionId, transportId: transportParams.id, dtlsParameters },
-        credentials: 'include',
-      })
-      callback()
-    }
-    catch (err) {
-      logError('useWebRTC: Recv transport connect failed', {
-        err: err.message || String(err),
-        transportId: transportParams.id,
-        connectionState: transport.connectionState,
-        sessionId,
-      })
-      errback(err)
-    }
-  })
-
-  transport.on('connectionstatechange', () => {
-    const state = transport.connectionState
-    if (state === 'failed' || state === 'disconnected' || state === 'closed') {
-      logWarn('useWebRTC: Recv transport connection state changed', {
-        state,
-        transportId: transportParams.id,
-        sessionId,
-      })
-    }
-  })
-
+  attachTransportHandlers(transport, transportParams, sessionId, 'Recv')
  return transport
 }

-/**
- * Consume producer's stream (for viewer).
- * @param {object} transport
- * @param {object} device
- * @param {string} sessionId
- * @returns {Promise<object>} Consumer with track
- */
 export async function consumeProducer(transport, device, sessionId) {
-  const rtpCapabilities = device.rtpCapabilities
  const consumerParams = await $fetch('/api/live/webrtc/create-consumer', {
    method: 'POST',
-    body: { sessionId, transportId: transport.id, rtpCapabilities },
-    credentials: 'include',
+    body: { sessionId, transportId: transport.id, rtpCapabilities: device.rtpCapabilities },
+    ...FETCH_OPTS,
  })

  const consumer = await transport.consume({
@@ -256,14 +162,6 @@ export async function consumeProducer(transport, device, sessionId) {
  return consumer
 }

-/**
- * Resolve when condition() returns truthy, or after timeoutMs (then resolve anyway).
- * No mutable shared state; cleanup on first completion.
- * @param {() => unknown} condition
- * @param {number} timeoutMs
- * @param {number} intervalMs
- * @returns {Promise<void>}
- */
 function waitForCondition(condition, timeoutMs = 3000, intervalMs = 100) {
  return new Promise((resolve) => {
    const timeoutId = setTimeout(() => {
@@ -285,12 +183,6 @@ function waitForCondition(condition, timeoutMs = 3000, intervalMs = 100) {
  })
 }

-/**
- * Wait for transport connection state to reach a terminal state or timeout.
- * @param {object} transport - Mediasoup transport with connectionState and on/off
- * @param {number} timeoutMs
- * @returns {Promise<string>} Final connection state
- */
 export function waitForConnectionState(transport, timeoutMs = 10000) {
  const terminal = ['connected', 'failed', 'disconnected', 'closed']
  return new Promise((resolve) => {
--- a/app/composables/useWebRTCFailureReason.js
+++ b/app/composables/useWebRTCFailureReason.js
@@ -1,18 +1,13 @@
-/**
- * Fetch WebRTC failure reason (e.g. wrong host). Pure: same inputs → same output.
- * @returns {Promise<{ wrongHost: { serverHostname: string, clientHostname: string } | null }>} Failure reason or null.
- */
+/** Pure: fetches WebRTC failure reason (e.g. wrong host). Returns frozen object. */
 export async function getWebRTCFailureReason() {
  try {
    const res = await $fetch('/api/live/debug-request-host', { credentials: 'include' })
    const clientHostname = typeof window !== 'undefined' ? window.location.hostname : ''
    const serverHostname = res?.hostname ?? ''
    if (serverHostname && clientHostname && serverHostname !== clientHostname) {
-      return { wrongHost: { serverHostname, clientHostname } }
+      return Object.freeze({ wrongHost: Object.freeze({ serverHostname, clientHostname }) })
    }
  }
-  catch {
-    // ignore
-  }
-  return { wrongHost: null }
+  catch { /* ignore */ }
+  return Object.freeze({ wrongHost: null })
 }
--- a/app/error.vue
+++ b/app/error.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex min-h-screen items-center justify-center bg-kestrel-bg font-mono text-kestrel-text">
    <div class="text-center">
-      <h1 class="text-2xl font-semibold tracking-wide [text-shadow:0_0_12px_rgba(34,201,201,0.3)]">
+      <h1 class="text-2xl font-semibold tracking-wide text-shadow-glow-md">
        [ Error ]
      </h1>
      <p class="mt-2 text-sm text-kestrel-muted">
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -6,7 +6,7 @@
        class="flex min-h-0 flex-1 flex-col transition-[margin] duration-200 ease-out"
        :class="{ 'md:ml-[260px]': drawerOpen }"
      >
-        <header class="flex h-14 shrink-0 items-center gap-3 border-b border-kestrel-border bg-kestrel-surface px-4 shadow-glow-sm [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+        <header class="flex h-14 shrink-0 items-center gap-3 border-b border-kestrel-border bg-kestrel-surface px-4 shadow-glow-sm shadow-glow-header">
          <button
            type="button"
            class="rounded p-2 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
@@ -20,7 +20,7 @@
            >&#9776;</span>
          </button>
          <div class="min-w-0 flex-1">
-            <h1 class="text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_12px_rgba(34,201,201,0.35)]">
+            <h1 class="text-lg font-semibold tracking-wide text-kestrel-text text-shadow-glow-md">
              KestrelOS
            </h1>
            <p class="text-xs uppercase tracking-widest text-kestrel-muted">
--- a/app/pages/account.vue
+++ b/app/pages/account.vue
@@ -1,15 +1,14 @@
 <template>
  <div class="p-6">
-    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <h2 class="kestrel-page-heading mb-4">
      Account
    </h2>

-    <!-- Profile -->
    <section class="mb-8">
-      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+      <h3 class="kestrel-section-label">
        Profile
      </h3>
-      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+      <div class="kestrel-card p-4">
        <template v-if="user">
          <dl class="space-y-2 text-sm">
            <div>
@@ -50,15 +49,14 @@
      </div>
    </section>

-    <!-- Change password (local only) -->
    <section
      v-if="user?.auth_provider === 'local'"
      class="mb-8"
    >
-      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+      <h3 class="kestrel-section-label">
        Change password
      </h3>
-      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+      <div class="kestrel-card p-4">
        <p
          v-if="passwordSuccess"
          class="mb-3 text-sm text-green-400"
@@ -78,46 +76,40 @@
          <div>
            <label
              for="account-current-password"
-              class="mb-1 block text-xs text-kestrel-muted"
-            >
-              Current password
-            </label>
+              class="kestrel-label"
+            >Current password</label>
            <input
              id="account-current-password"
              v-model="currentPassword"
              type="password"
              autocomplete="current-password"
-              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+              class="kestrel-input"
            >
          </div>
          <div>
            <label
              for="account-new-password"
-              class="mb-1 block text-xs text-kestrel-muted"
-            >
-              New password
-            </label>
+              class="kestrel-label"
+            >New password</label>
            <input
              id="account-new-password"
              v-model="newPassword"
              type="password"
              autocomplete="new-password"
-              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+              class="kestrel-input"
            >
          </div>
          <div>
            <label
              for="account-confirm-password"
-              class="mb-1 block text-xs text-kestrel-muted"
-            >
-              Confirm new password
-            </label>
+              class="kestrel-label"
+            >Confirm new password</label>
            <input
              id="account-confirm-password"
              v-model="confirmPassword"
              type="password"
              autocomplete="new-password"
-              class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+              class="kestrel-input"
            >
          </div>
          <button
--- a/app/pages/cameras.vue
+++ b/app/pages/cameras.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="p-6">
-    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <h2 class="kestrel-page-heading mb-4">
      Cameras
    </h2>
    <p class="mb-4 text-sm text-kestrel-muted">
@@ -80,6 +80,8 @@
 <script setup>
 definePageMeta({ layout: 'default' })

-const { cameras } = useCameras()
+const { cameras, liveSessions } = useCameras()
 const selectedCamera = ref(null)
+
+useAutoCloseLiveSession(selectedCamera, liveSessions)
 </script>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -28,7 +28,8 @@ const { canEditPois } = useUser()
 const selectedCamera = ref(null)

 function onSelectLive(session) {
-  const latest = (liveSessions.value || []).find(s => s.id === session?.id)
-  selectedCamera.value = latest ?? session
+  selectedCamera.value = (liveSessions.value ?? []).find(s => s.id === session?.id) ?? session
 }
+
+useAutoCloseLiveSession(selectedCamera, liveSessions)
 </script>
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex min-h-[60vh] items-center justify-center p-6">
-    <div class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
-      <h2 class="mb-4 text-lg font-semibold text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <div class="kestrel-card w-full max-w-sm p-6">
+      <h2 class="kestrel-section-heading mb-4">
        Sign in
      </h2>
      <p
@@ -29,28 +29,28 @@
        <div class="mb-3">
          <label
            for="login-identifier"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Email or username</label>
          <input
            id="login-identifier"
            v-model="identifier"
            type="text"
            autocomplete="username"
-            class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            class="kestrel-input"
            required
          >
        </div>
        <div class="mb-4">
          <label
            for="login-password"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Password</label>
          <input
            id="login-password"
            v-model="password"
            type="password"
            autocomplete="current-password"
-            class="w-full rounded border border-kestrel-border bg-kestrel-bg px-3 py-2 text-sm text-kestrel-text outline-none focus:border-kestrel-accent"
+            class="kestrel-input"
            required
          >
        </div>
@@ -69,16 +69,16 @@
 <script setup>
 const route = useRoute()
 const redirect = computed(() => route.query.redirect || '/')
+const AUTH_CONFIG_DEFAULT = Object.freeze({ oidc: { enabled: false, label: '' } })
 const { data: authConfig } = useAsyncData(
  'auth-config',
-  () => $fetch('/api/auth/config').catch(() => ({ oidc: { enabled: false, label: '' } })),
+  () => $fetch('/api/auth/config').catch(() => AUTH_CONFIG_DEFAULT),
  { default: () => null },
 )
 const showDivider = computed(() => !!authConfig.value?.oidc?.enabled)
 const oidcAuthorizeUrl = computed(() => {
-  const base = '/api/auth/oidc/authorize'
-  const q = redirect.value && redirect.value !== '/' ? `?redirect=${encodeURIComponent(redirect.value)}` : ''
-  return base + q
+  const r = redirect.value
+  return `/api/auth/oidc/authorize${r && r !== '/' ? `?redirect=${encodeURIComponent(r)}` : ''}`
 })

 const identifier = ref('')
--- a/app/pages/members.vue
+++ b/app/pages/members.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="p-6">
-    <h2 class="mb-2 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <h2 class="kestrel-page-heading mb-2">
      Members
    </h2>
    <p
@@ -10,7 +10,7 @@
      Sign in to view members.
    </p>
    <p
-      v-else-if="!canViewMembers"
+      v-else-if="!canEditPois"
      class="text-sm text-kestrel-muted"
    >
      You don't have access to the members list.
@@ -149,7 +149,7 @@
            v-if="openRoleDropdownId && dropdownPlacement"
            ref="dropdownMenuRef"
            role="menu"
-            class="fixed z-[100] min-w-[6rem] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow [box-shadow:0_4px_12px_-2px_rgba(34,201,201,0.15)]"
+            class="fixed z-[100] min-w-[6rem] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-dropdown"
            :style="{
              top: `${dropdownPlacement.top}px`,
              left: `${dropdownPlacement.left}px`,
@@ -183,7 +183,7 @@
          @click.self="closeAddUserModal"
        >
          <div
-            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
+            class="kestrel-card-modal w-full max-w-sm p-4"
            @click.stop
          >
            <h3
@@ -204,7 +204,7 @@
                  type="text"
                  required
                  autocomplete="username"
-                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  class="kestrel-input"
                  placeholder="username"
                >
              </div>
@@ -219,7 +219,7 @@
                  type="password"
                  required
                  autocomplete="new-password"
-                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  class="kestrel-input"
                  placeholder="••••••••"
                >
              </div>
@@ -231,7 +231,7 @@
                <select
                  id="add-role"
                  v-model="newUser.role"
-                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  class="kestrel-input"
                >
                  <option value="member">
                    member
@@ -253,7 +253,7 @@
              <div class="flex justify-end gap-2">
                <button
                  type="button"
-                  class="rounded border border-kestrel-border px-3 py-1.5 text-sm text-kestrel-text hover:bg-kestrel-surface-hover"
+                  class="kestrel-btn-secondary"
                  @click="closeAddUserModal"
                >
                  Cancel
@@ -280,7 +280,7 @@
          @click.self="deleteConfirmUser = null"
        >
          <div
-            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
+            class="kestrel-card-modal w-full max-w-sm p-4"
            @click.stop
          >
            <h3
@@ -295,7 +295,7 @@
            <div class="flex justify-end gap-2">
              <button
                type="button"
-                class="rounded border border-kestrel-border px-3 py-1.5 text-sm text-kestrel-text hover:bg-kestrel-surface-hover"
+                class="kestrel-btn-secondary"
                @click="deleteConfirmUser = null"
              >
                Cancel
@@ -318,7 +318,7 @@
          @click.self="editUserModal = null"
        >
          <div
-            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
+            class="kestrel-card-modal w-full max-w-sm p-4"
            role="dialog"
            aria-modal="true"
            aria-labelledby="edit-user-title"
@@ -340,7 +340,7 @@
                  v-model="editForm.identifier"
                  type="text"
                  required
-                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  class="kestrel-input"
                >
              </div>
              <div class="mb-4 flex flex-col gap-1">
@@ -353,7 +353,7 @@
                  v-model="editForm.password"
                  type="password"
                  autocomplete="new-password"
-                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  class="kestrel-input"
                  placeholder="••••••••"
                >
                <p class="mt-0.5 text-xs text-kestrel-muted">
@@ -369,7 +369,7 @@
              <div class="flex justify-end gap-2">
                <button
                  type="button"
-                  class="rounded border border-kestrel-border px-3 py-1.5 text-sm text-kestrel-text hover:bg-kestrel-surface-hover"
+                  class="kestrel-btn-secondary"
                  @click="editUserModal = null"
                >
                  Cancel
@@ -390,15 +390,14 @@
 </template>

 <script setup>
-const { user, isAdmin, refresh: refreshUser } = useUser()
-const canViewMembers = computed(() => user.value?.role === 'admin' || user.value?.role === 'leader')
+const { user, isAdmin, canEditPois, refresh: refreshUser } = useUser()

 const { data: usersData, refresh: refreshUsers } = useAsyncData(
  'users',
  () => $fetch('/api/users').catch(() => []),
  { default: () => [] },
 )
-const users = computed(() => (Array.isArray(usersData.value) ? usersData.value : []))
+const users = computed(() => Object.freeze([...(usersData.value ?? [])]))

 const roleOptions = ['admin', 'leader', 'member']
 const pendingRoleUpdates = ref({})
@@ -428,8 +427,8 @@ function setDropdownWrapRef(userId, el) {
  }
 }

-watch(user, (u) => {
-  if (u?.role === 'admin' || u?.role === 'leader') refreshUsers()
+watch(user, () => {
+  if (canEditPois.value) refreshUsers()
 }, { immediate: true })

 function toggleRoleDropdown(userId) {
--- a/app/pages/poi.vue
+++ b/app/pages/poi.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="p-6">
-    <h2 class="mb-2 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <h2 class="kestrel-page-heading mb-2">
      POI placement
    </h2>
    <p
@@ -17,7 +17,7 @@
        <div>
          <label
            for="poi-lat"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Lat</label>
          <input
            id="poi-lat"
@@ -25,13 +25,13 @@
            type="number"
            step="any"
            required
-            class="w-28 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
+            class="kestrel-input w-28"
          >
        </div>
        <div>
          <label
            for="poi-lng"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Lng</label>
          <input
            id="poi-lng"
@@ -39,39 +39,37 @@
            type="number"
            step="any"
            required
-            class="w-28 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
+            class="kestrel-input w-28"
          >
        </div>
        <div>
          <label
            for="poi-label"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Label</label>
          <input
            id="poi-label"
            v-model="form.label"
            type="text"
-            class="w-40 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
+            class="kestrel-input w-40"
          >
        </div>
        <div>
          <label
            for="poi-icon"
-            class="mb-1 block text-xs text-kestrel-muted"
+            class="kestrel-label"
          >Icon</label>
          <select
            id="poi-icon"
            v-model="form.iconType"
-            class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-sm text-kestrel-text"
+            class="kestrel-input w-28"
          >
-            <option value="pin">
-              pin
-            </option>
-            <option value="flag">
-              flag
-            </option>
-            <option value="waypoint">
-              waypoint
+            <option
+              v-for="opt in POI_ICON_TYPES"
+              :key="opt"
+              :value="opt"
+            >
+              {{ opt }}
            </option>
          </select>
        </div>
@@ -145,6 +143,8 @@
 </template>

 <script setup>
+const POI_ICON_TYPES = Object.freeze(['pin', 'flag', 'waypoint'])
+
 const { data: poisData, refresh } = usePois()
 const { canEditPois } = useUser()
 const poisList = computed(() => poisData.value ?? [])
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -1,15 +1,14 @@
 <template>
  <div class="p-6">
-    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <h2 class="kestrel-page-heading mb-4">
      Settings
    </h2>

-    <!-- Map & offline -->
    <section class="mb-8">
-      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+      <h3 class="kestrel-section-label">
        Map & offline
      </h3>
-      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+      <div class="kestrel-card p-4">
        <p class="mb-3 text-sm text-kestrel-text">
          Clear saved map tiles to free storage. The map will load tiles from the network again when you use it.
        </p>
@@ -28,7 +27,7 @@
        </p>
        <button
          type="button"
-          class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border disabled:opacity-50"
+          class="kestrel-btn-secondary disabled:opacity-50"
          :disabled="tilesLoading"
          @click="onClearTiles"
        >
@@ -37,12 +36,11 @@
      </div>
    </section>

-    <!-- About -->
    <section>
-      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+      <h3 class="kestrel-section-label">
        About
      </h3>
-      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+      <div class="kestrel-card p-4">
        <p class="font-medium text-kestrel-text">
          KestrelOS
        </p>
--- a/app/pages/share-live.vue
+++ b/app/pages/share-live.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex min-h-[80vh] flex-col items-center justify-center p-6">
-    <div class="w-full max-w-md rounded-lg border border-kestrel-border bg-kestrel-surface p-6 shadow-glow [box-shadow:0_0_24px_-6px_rgba(34,201,201,0.2)]">
-      <h2 class="mb-2 text-lg font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+    <div class="kestrel-card-modal w-full max-w-md p-6">
+      <h2 class="kestrel-section-heading mb-2">
        Share live (camera + location)
      </h2>
      <p class="mb-4 text-sm text-kestrel-muted">
@@ -55,7 +55,7 @@
      <!-- Local preview -->
      <div
        v-if="stream && videoRef"
-        class="relative mb-4 aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black"
+        class="kestrel-video-frame mb-4"
      >
        <video
          ref="videoRef"
--- a/app/plugins/auth.client.js
+++ b/app/plugins/auth.client.js
@@ -1,3 +1,4 @@
+/** Wraps $fetch to redirect to /login on 401 for same-origin requests. */
 export default defineNuxtPlugin(() => {
  const route = useRoute()
  const baseFetch = globalThis.$fetch ?? $fetch
@@ -6,8 +7,7 @@ export default defineNuxtPlugin(() => {
      if (response?.status !== 401) return
      const url = typeof request === 'string' ? request : request?.url ?? ''
      if (!url.startsWith('/')) return
-      const redirect = (route.fullPath && route.fullPath !== '/' ? route.fullPath : '/')
-      navigateTo({ path: '/login', query: { redirect } }, { replace: true })
+      navigateTo({ path: '/login', query: { redirect: route.fullPath || '/' } }, { replace: true })
    },
  })
 })
--- a/app/utils/logger.js
+++ b/app/utils/logger.js
@@ -1,88 +1,30 @@
-/**
- * Client-side logger that sends logs to server for debugging.
- * Falls back to console if server logging fails.
- */
-
+/** Client-side logger: sends to server, falls back to console. */
 let sessionId = null
 let userId = null

-/**
- * Initialize logger with session/user context.
- * @param {string} sessId
- * @param {string} uid
- */
+const CONSOLE_METHOD = Object.freeze({ error: 'error', warn: 'warn', info: 'log', debug: 'log' })
+
 export function initLogger(sessId, uid) {
  sessionId = sessId
  userId = uid
 }

-/**
- * Send log to server (non-blocking).
- * @param {string} level
- * @param {string} message
- * @param {object} data
- */
-async function sendToServer(level, message, data) {
-  // Use setTimeout to avoid blocking - fire and forget
-  setTimeout(async () => {
-    try {
-      await $fetch('/api/log', {
-        method: 'POST',
-        body: {
-          level,
-          message,
-          data,
-          sessionId,
-          userId,
-          timestamp: new Date().toISOString(),
-        },
-        credentials: 'include',
-      }).catch(() => {
-        // Silently fail - don't spam console if server is down
-      })
-    }
-    catch {
-      // Ignore errors - logging shouldn't break the app
-    }
+function sendToServer(level, message, data) {
+  setTimeout(() => {
+    $fetch('/api/log', {
+      method: 'POST',
+      body: { level, message, data, sessionId, userId, timestamp: new Date().toISOString() },
+      credentials: 'include',
+    }).catch(() => { /* server down - don't spam console */ })
  }, 0)
 }

-/**
- * Log at error level.
- * @param {string} message
- * @param {object} data
- */
-export function logError(message, data) {
-  console.error(`[${message}]`, data)
-  sendToServer('error', message, data)
+function log(level, message, data) {
+  console[CONSOLE_METHOD[level]](`[${message}]`, data)
+  sendToServer(level, message, data)
 }

-/**
- * Log at warn level.
- * @param {string} message
- * @param {object} data
- */
-export function logWarn(message, data) {
-  console.warn(`[${message}]`, data)
-  sendToServer('warn', message, data)
-}
-
-/**
- * Log at info level.
- * @param {string} message
- * @param {object} data
- */
-export function logInfo(message, data) {
-  console.log(`[${message}]`, data)
-  sendToServer('info', message, data)
-}
-
-/**
- * Log at debug level.
- * @param {string} message
- * @param {object} data
- */
-export function logDebug(message, data) {
-  console.log(`[${message}]`, data)
-  sendToServer('debug', message, data)
-}
+export const logError = (message, data) => log('error', message, data)
+export const logWarn = (message, data) => log('warn', message, data)
+export const logInfo = (message, data) => log('info', message, data)
+export const logDebug = (message, data) => log('debug', message, data)