fix ci

.gitignore

@@ -44,6 +44,3 @@ data
 
 # Dev TLS certs (self-signed for local testing)
 .dev-certs
-
-# CI artifact (kaniko reads .tags for image tag list)
-.tags

.woodpecker/ci.yml

@@ -0,0 +1,51 @@
+steps:
+  - name: lint
+    image: node:24-slim
+    commands:
+      - npm ci
+      - npm run lint
+    when:
+      - event: pull_request
+
+  - name: test
+    image: node:24-slim
+    environment:
+      CI: "true"
+    commands:
+      - npm run test
+    when:
+      - event: pull_request
+
+  - name: e2e
+    image: mcr.microsoft.com/playwright:v1.58.2-noble
+    commands:
+      - npm ci
+      - npm run test:e2e
+    environment:
+      CI: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+    when:
+      - event: pull_request
+
+  - name: docker-build
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: git.keligrubb.com/${CI_REPO_OWNER}/${CI_REPO_NAME}
+      registry: git.keligrubb.com
+      tags: latest
+      dry_run: true
+    when:
+      - event: pull_request
+
+  - name: docker-build-push
+    image: woodpeckerci/plugin-docker-buildx
+    settings:
+      repo: git.keligrubb.com/${CI_REPO_OWNER}/${CI_REPO_NAME}
+      registry: git.keligrubb.com
+      tags: latest,${CI_COMMIT_SHA:0:7}
+      username: ${CI_REPO_OWNER}
+      password:
+        from_secret: gitea_registry_token
+    when:
+      - event: push
+        branch: main

.woodpecker/pr.yml

@@ -1,41 +0,0 @@
-when:
-  - event: pull_request
-
-steps:
-  - name: install
-    image: node:24-slim
-    depends_on: []
-    commands:
-      - npm ci
-
-  - name: lint
-    image: node:24-slim
-    depends_on: [install]
-    commands:
-      - npm run lint
-
-  - name: test
-    image: node:24-slim
-    depends_on: [install]
-    commands:
-      - npm run test
-
-  - name: e2e
-    image: mcr.microsoft.com/playwright:v1.58.2-noble
-    depends_on: [install]
-    commands:
-      - ./scripts/gen-dev-cert.sh
-      - npm run test:e2e
-    environment:
-      NODE_TLS_REJECT_UNAUTHORIZED: "0"
-
-  - name: docker-build
-    image: woodpeckerci/plugin-kaniko
-    depends_on: []
-    settings:
-      repo: ${CI_REPO_OWNER}/${CI_REPO_NAME}
-      registry: git.keligrubb.com
-      tags: latest
-      dry-run: true
-      single-snapshot: true
-      cleanup: true

.woodpecker/push.yml

@@ -1,36 +0,0 @@
-when:
-  - event: push
-    branch: main
-
-steps:
-  - name: release
-    image: alpine
-    commands:
-      - apk add --no-cache git
-      - ./scripts/release.sh
-    environment:
-      GITEA_REPO_TOKEN:
-        from_secret: gitea_repo_token
-
-  - name: docker
-    image: woodpeckerci/plugin-kaniko
-    depends_on: [release]
-    settings:
-      repo: ${CI_REPO_OWNER}/${CI_REPO_NAME}
-      registry: git.keligrubb.com
-      username: ${CI_REPO_OWNER}
-      password:
-        from_secret: gitea_registry_token
-      single-snapshot: true
-      cleanup: true
-
-  - name: helm
-    image: alpine/helm
-    depends_on: [release]
-    environment:
-      GITEA_REGISTRY_TOKEN:
-        from_secret: gitea_registry_token
-    commands:
-      - apk add --no-cache curl
-      - helm package helm/kestrelos
-      - curl -sf -u $CI_REPO_OWNER:$GITEA_REGISTRY_TOKEN -X POST --upload-file kestrelos-*.tgz https://git.keligrubb.com/api/packages/$CI_REPO_OWNER/helm/api/charts

CHANGELOG.md

@@ -1,23 +0,0 @@
-## [1.0.1] - 2026-02-22
-### Changed
-- chore: Configure Renovate (#7)
-
-## [1.0.0] - 2026-02-17
-### Changed
-- kestrel is now a tak server (#6)
-
-## [0.4.0] - 2026-02-15
-### Changed
-- new nav system (#5)
-
-## [0.3.0] - 2026-02-14
-### Changed
-- heavily simplify server and app content. unify styling (#4)
-
-## [0.2.0] - 2026-02-12
-### Changed
-- add a new release system (#3)
-
-# Changelog
-
-All notable changes to this project will be documented in this file.

Dockerfile

@@ -1,4 +1,5 @@
-FROM node:24-slim AS builder
+# Build stage
+FROM node:22-alpine AS builder
 
 WORKDIR /app
 
@@ -9,17 +10,18 @@ COPY . .
 RUN npm run build
 
 # Run stage
-FROM node:24-slim AS runner
+FROM node:22-alpine AS runner
 
 # Run as non-root user (node user exists in official image)
 USER node
 WORKDIR /app
 
 ENV HOST=0.0.0.0
+ENV PORT=3000
 
 # Copy app as node user (builder stage ran as root)
 COPY --from=builder --chown=node:node /app/.output ./.output
 
-EXPOSE 3000 8089
+EXPOSE 3000
 
 CMD ["node", ".output/server/index.mjs"]

README.md

@@ -2,8 +2,6 @@
 
 Tactical Operations Center (TOC) for OSINT feeds. Map view with offline-capable tiles and clickable camera/feed sources; click a marker to view the live stream.
 
-![KestrelOS map UI](docs/screenshot.png)
-
 ## Stack
 
 - Nuxt 4, JavaScript, Tailwind CSS, ESLint, Vitest
@@ -24,7 +22,7 @@ Open http://localhost:3000. The app requires login by default; you will see the
 
 Camera and geolocation in the browser require a **secure context** (HTTPS) when you open the app from your phone. To test Share live from a device on your LAN without buying a domain or cert:
 
-1. Generate a self-signed cert (once). Use your machine's LAN IP so the phone can use it:
+1. Generate a self-signed cert (once). Use your machine’s LAN IP so the phone can use it:
    ```bash
    chmod +x scripts/gen-dev-cert.sh
    ./scripts/gen-dev-cert.sh 192.168.1.123
@@ -36,7 +34,7 @@ Camera and geolocation in the browser require a **secure context** (HTTPS) when
    npm run dev
    ```
 
-3. On your phone, open **https://192.168.1.123:3000** (same IP you passed above). Accept the browser's "untrusted certificate" warning once (e.g. Advanced → Proceed). Then log in and use Share live; camera and location will work.
+3. On your phone, open **https://192.168.1.123:3000** (same IP you passed above). Accept the browser’s “untrusted certificate” warning once (e.g. Advanced → Proceed). Then log in and use Share live; camera and location will work.
 
 Without the certs, `npm run dev` still runs over HTTP as before.
 
@@ -50,72 +48,45 @@ The **Share live** feature uses WebRTC for real-time video streaming from mobile
 - **Mediasoup** server (runs automatically in the Nuxt process)
 - **mediasoup-client** (browser library, included automatically)
 
-**Streaming from a phone on your LAN:** The server auto-detects your machine's LAN IP (from network interfaces) and uses it for WebRTC. Open **https://<your-LAN-IP>:3000** on both phone and laptop (same IP as for your dev cert). To override (e.g. Docker or multiple NICs), set `MEDIASOUP_ANNOUNCED_IP`. Ensure firewall allows UDP/TCP ports 40000-49999 on the server.
+**Streaming from a phone on your LAN:** The server auto-detects your machine’s LAN IP (from network interfaces) and uses it for WebRTC. Open **https://<your-LAN-IP>:3000** on both phone and laptop (same IP as for your dev cert). To override (e.g. Docker or multiple NICs), set `MEDIASOUP_ANNOUNCED_IP`. Ensure firewall allows UDP/TCP ports 40000–49999 on the server.
 
-See [docs/live-streaming.md](docs/live-streaming.md) for setup and usage.
+See [docs/live-streaming.md](docs/live-streaming.md) for architecture details.
-
-### ATAK / CoT (Cursor on Target)
-
-KestrelOS can act as a **TAK Server** so ATAK and iTAK devices connect and share positions. No plugins: in ATAK, add a **Server** connection (host = KestrelOS, port **8089** for CoT). Check **Use Authentication** and enter your **KestrelOS username** and **password** (local users use their login password; OIDC users must set an **ATAK password** once under **Account** in the web app). Devices relay CoT to each other (team members see each other on the ATAK map) and appear on the KestrelOS web map; they drop off after ~90 seconds if no updates. Optional: set `COT_TTL_MS`, `COT_REQUIRE_AUTH`; CoT runs on port 8089 (default).
 
 ## Scripts
 
-- `npm run dev` - development server
+- `npm run dev` – development server
-- `npm run build` - production build
+- `npm run build` – production build
-- `npm run test` - run tests
+- `npm run test` – run tests
-- `npm run test:coverage` - run tests with coverage (85% threshold)
+- `npm run test:coverage` – run tests with coverage (85% threshold)
-- `npm run test:e2e` - Playwright E2E tests
+- `npm run lint` – ESLint (zero warnings)
-- `npm run lint` - ESLint (zero warnings)
-
-## Documentation
-
-Full docs are in the **[docs/](docs/README.md)** directory: [installation](docs/installation.md) (npm, Docker, Helm), [authentication](docs/auth.md) (local login, OIDC), [map and cameras](docs/map-and-cameras.md) (adding IPTV, ALPR, CCTV, NVR, etc.), [ATAK and iTAK](docs/atak-itak.md), and [Share live](docs/live-streaming.md) (mobile device as live camera).
 
 ## Configuration
 
-- **Devices**: Manage cameras/devices via the API (`/api/devices`); see [Map and cameras](docs/map-and-cameras.md). Each device needs `name`, `device_type`, `lat`, `lng`, `stream_url`, and `source_type` (`mjpeg` or `hls`).
+- **Feeds**: Edit `server/data/feeds.json` to add cameras/feeds. Each feed needs `id`, `name`, `lat`, `lng`, `streamUrl`, and `sourceType` (`mjpeg` or `hls`). Home Assistant and other sources use the same shape; use proxy URLs for HA.
-- **Environment**: No required env vars for basic run. For production, set `HOST=0.0.0.0` and expose ports 3000 (web/API) and 8089 (CoT). Set `COT_TTL_MS=90000`, `COT_REQUIRE_AUTH=true`. For TLS use `.dev-certs/` or set `COT_SSL_CERT` and `COT_SSL_KEY`.
+- **Environment**: No required env vars for basic run. For production, set `HOST=0.0.0.0` and `PORT` as needed (e.g. in Docker/Helm).
-- **Authentication**: The login page always offers password sign-in (local). Optionally set `BOOTSTRAP_EMAIL` and `BOOTSTRAP_PASSWORD` before the first run to create the first admin; otherwise a default admin is created and its credentials are printed in the terminal. To also show an OIDC sign-in button, configure `OIDC_ISSUER`, `OIDC_CLIENT_ID`, `OIDC_CLIENT_SECRET`, and optionally `OIDC_LABEL`, `OIDC_REDIRECT_URI`. See [docs/auth.md](docs/auth.md) for local login, OIDC config, and sign up.
+- **Authentication**: The login page always offers password sign-in (local). Optionally set `BOOTSTRAP_EMAIL` and `BOOTSTRAP_PASSWORD` before the first run to create the first admin; otherwise a default admin is created and its credentials are printed in the terminal. To also show an OIDC sign-in button, configure `OIDC_ISSUER`, `OIDC_CLIENT_ID`, `OIDC_CLIENT_SECRET`, and optionally `OIDC_LABEL`, `OIDC_REDIRECT_URI`. See [docs/auth.md](docs/auth.md) for provider-specific examples.
-- **Bootstrap admin** (when using local auth): The server initializes the database and runs bootstrap at startup. On first run (no users in the database), it creates the first admin. If you set `BOOTSTRAP_EMAIL` and `BOOTSTRAP_PASSWORD` before starting, that account is created. If you don't set them, a default admin is created (identifier: `admin`) with a random password and the credentials are printed in the terminal-copy them and sign in at `/login`, then change the password or add users via Members. Use **Members** to change roles (admin, leader, member). Only admins can change roles; admins and leaders can edit POIs.
+- **Bootstrap admin** (when using local auth): The server initializes the database and runs bootstrap at startup. On first run (no users in the database), it creates the first admin. If you set `BOOTSTRAP_EMAIL` and `BOOTSTRAP_PASSWORD` before starting, that account is created. If you don’t set them, a default admin is created (identifier: `admin`) with a random password and the credentials are printed in the terminal—copy them and sign in at `/login`, then change the password or add users via Members. Use **Members** to change roles (admin, leader, member). Only admins can change roles; admins and leaders can edit POIs.
 - **Database**: SQLite file at `data/kestrelos.db` (created automatically). Contains users, sessions, and POIs.
 
 ## Docker
 
 ```bash
 docker build -t kestrelos:latest .
-docker run -p 3000:3000 -p 8089:8089 kestrelos:latest
+docker run -p 3000:3000 kestrelos:latest
 ```
 
 ## Kubernetes (Helm)
 
-**From Gitea registry:**
 ```bash
-helm repo add keligrubb --username YOUR_USER --password YOUR_TOKEN https://git.keligrubb.com/api/packages/keligrubb/helm
+helm install kestrelos ./helm/kestrelos --set image.repository=your-registry/kestrelos --set image.tag=latest
-helm repo update
-helm install kestrelos keligrubb/kestrelos
-```
-
-**From source:**
-```bash
-helm install kestrelos ./helm/kestrelos
 ```
 
 Health: `GET /health` (overview), `GET /health/live` (liveness), `GET /health/ready` (readiness). Probes are configured in the Helm chart. Optional: enable Ingress in `helm/kestrelos/values.yaml`.
 
-## Releases
-
-Merges to `main` trigger a semver release. Use one of these prefixes in your PR title to set the version bump:
-
-- `major:` - breaking changes
-- `minor:` - new features
-- `patch:` - bug fixes, docs (default if no prefix)
-
-Example: `minor: Add map layer toggle`
-
 ## Security
 
-- Device data is validated server-side; only valid entries are returned.
+- Feed list is validated server-side (`getValidFeeds`); only valid entries are returned.
-- Stream URLs are sanitized to `http://` or `https://` only; other protocols are rejected.
+- Stream URLs are treated as untrusted; the UI only uses `http://` or `https://` URLs for display.
 
 ## License
 

app/app.vue

@@ -1,5 +1,5 @@
 <template>
   <NuxtLayout>
-    <NuxtPage :key="$route.path" />
+    <NuxtPage />
   </NuxtLayout>
 </template>

app/assets/css/main.css

@@ -1,134 +0,0 @@
-@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; }
-.dropdown-enter-active, .dropdown-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
-.dropdown-enter-from, .dropdown-leave-to { opacity: 0; transform: translateY(-4px); }
-.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-container {
-  border: none !important;
-  outline: none !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; }
-}

app/components/AddUserModal.vue

@@ -1,115 +0,0 @@
-<template>
-  <BaseModal
-    :show="show"
-    aria-labelledby="add-user-title"
-    @close="$emit('close')"
-  >
-    <div class="kestrel-card-modal w-full max-w-sm p-4">
-      <h3
-        id="add-user-title"
-        class="mb-3 text-sm font-medium text-kestrel-text"
-      >
-        Add user
-      </h3>
-      <form @submit.prevent="onSubmit">
-        <div class="mb-3 flex flex-col gap-1">
-          <label
-            for="add-identifier"
-            class="text-xs text-kestrel-muted"
-          >Username</label>
-          <input
-            id="add-identifier"
-            v-model="form.identifier"
-            type="text"
-            required
-            autocomplete="username"
-            class="kestrel-input"
-            placeholder="username"
-          >
-        </div>
-        <div class="mb-3 flex flex-col gap-1">
-          <label
-            for="add-password"
-            class="text-xs text-kestrel-muted"
-          >Password</label>
-          <input
-            id="add-password"
-            v-model="form.password"
-            type="password"
-            required
-            autocomplete="new-password"
-            class="kestrel-input"
-            placeholder="••••••••"
-          >
-        </div>
-        <div class="mb-4 flex flex-col gap-1">
-          <label
-            for="add-role"
-            class="text-xs text-kestrel-muted"
-          >Role</label>
-          <select
-            id="add-role"
-            v-model="form.role"
-            class="kestrel-input"
-          >
-            <option value="member">
-              member
-            </option>
-            <option value="leader">
-              leader
-            </option>
-            <option value="admin">
-              admin
-            </option>
-          </select>
-        </div>
-        <p
-          v-if="submitError"
-          class="mb-2 text-xs text-red-400"
-        >
-          {{ submitError }}
-        </p>
-        <div class="flex justify-end gap-2">
-          <button
-            type="button"
-            class="kestrel-btn-secondary"
-            @click="$emit('close')"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            class="rounded border border-kestrel-accent px-3 py-1.5 text-sm text-kestrel-accent hover:bg-kestrel-accent-dim"
-          >
-            Add user
-          </button>
-        </div>
-      </form>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  show: Boolean,
-  submitError: { type: String, default: '' },
-})
-
-const emit = defineEmits(['close', 'submit'])
-
-const form = ref({ identifier: '', password: '', role: 'member' })
-
-watch(() => props.show, (show) => {
-  if (show) form.value = { identifier: '', password: '', role: 'member' }
-})
-
-function onSubmit() {
-  emit('submit', {
-    identifier: form.value.identifier.trim(),
-    password: form.value.password,
-    role: form.value.role,
-  })
-}
-</script>

app/components/AppDropdown.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="relative">
-    <div ref="triggerRef">
-      <slot />
-    </div>
-    <Teleport
-      v-if="teleport"
-      to="body"
-    >
-      <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-if="open && placement"
-          ref="menuRef"
-          role="menu"
-          class="fixed z-[100] min-w-[6rem] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow shadow-glow-dropdown"
-          :style="menuStyle"
-        >
-          <slot name="menu" />
-        </div>
-      </Transition>
-    </Teleport>
-    <Transition
-      v-else
-      name="dropdown"
-    >
-      <div
-        v-if="open"
-        ref="menuRef"
-        role="menu"
-        class="absolute right-0 top-full z-[2001] mt-1 min-w-[160px] rounded border border-kestrel-border bg-kestrel-surface py-1 shadow-glow"
-      >
-        <slot name="menu" />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
-
-const props = defineProps({
-  open: { type: Boolean, default: false },
-  teleport: { type: Boolean, default: false },
-})
-
-const emit = defineEmits(['close'])
-
-const triggerRef = ref(null)
-const menuRef = ref(null)
-const placement = ref(null)
-const menuStyle = computed(() => {
-  if (!placement.value) return undefined
-  const p = placement.value
-  return { top: p.top + 'px', left: p.left + 'px', minWidth: p.minWidth + 'px' }
-})
-
-watch(() => props.open, (open) => {
-  if (open && triggerRef.value && props.teleport) {
-    nextTick(() => {
-      const rect = triggerRef.value.getBoundingClientRect()
-      placement.value = {
-        top: rect.bottom + 4,
-        left: rect.left,
-        minWidth: Math.max(rect.width, 96),
-      }
-    })
-  }
-  else {
-    placement.value = null
-  }
-})
-
-function onDocumentClick(e) {
-  if (!props.open) return
-  const trigger = triggerRef.value
-  const menu = menuRef.value
-  const inTrigger = trigger && trigger.contains(e.target)
-  const inMenu = menu && menu.contains(e.target)
-  if (!inTrigger && !inMenu) emit('close')
-}
-
-onMounted(() => {
-  document.addEventListener('click', onDocumentClick)
-})
-onBeforeUnmount(() => {
-  document.removeEventListener('click', onDocumentClick)
-})
-</script>

app/components/AppShell.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="flex min-h-0 flex-1 flex-col">
-    <header class="relative z-40 flex h-14 shrink-0 items-center gap-3 bg-kestrel-surface px-4">
-      <NuxtLink
-        to="/"
-        class="text-lg font-semibold tracking-wide text-kestrel-text no-underline text-shadow-glow-md transition-colors hover:text-kestrel-accent focus-visible:ring-2 focus-visible:ring-kestrel-accent focus-visible:rounded"
-      >
-        KestrelOS
-      </NuxtLink>
-      <button
-        type="button"
-        class="rounded p-2 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent md:hidden"
-        aria-label="Toggle navigation"
-        :aria-expanded="drawerOpen"
-        @click="drawerOpen = !drawerOpen"
-      >
-        <span
-          class="text-lg leading-none"
-          aria-hidden="true"
-        >&#9776;</span>
-      </button>
-      <div class="min-w-0 flex-1" />
-      <div class="flex items-center gap-2">
-        <UserMenu
-          v-if="user"
-          :user="user"
-          @signout="onLogout"
-        />
-        <NuxtLink
-          v-else
-          to="/login"
-          class="rounded px-2 py-1 text-xs text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-accent"
-        >
-          Sign in
-        </NuxtLink>
-      </div>
-    </header>
-    <div class="flex min-h-0 flex-1">
-      <NavDrawer
-        v-model="drawerOpen"
-        v-model:collapsed="sidebarCollapsed"
-        :is-mobile="isMobile"
-      />
-      <!-- Content area: rounded top-left so it nestles into the shell (GitLab gl-rounded-t-lg style). -->
-      <div class="relative min-h-0 flex-1 min-w-0 overflow-clip rounded-tl-lg">
-        <main class="relative h-full w-full min-h-0 overflow-auto">
-          <slot />
-        </main>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const isMobile = useMediaQuery('(max-width: 767px)')
-const drawerOpen = ref(true)
-
-const SIDEBAR_COLLAPSED_KEY = 'kestrelos-sidebar-collapsed'
-const sidebarCollapsed = ref(false)
-onMounted(() => {
-  try {
-    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY)
-    if (stored !== null) sidebarCollapsed.value = stored === 'true'
-  }
-  catch {
-    // localStorage unavailable (e.g. private mode)
-  }
-})
-watch(sidebarCollapsed, (v) => {
-  try {
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(v))
-  }
-  catch {
-    // localStorage unavailable
-  }
-})
-
-const { user, refresh } = useUser()
-
-watch(isMobile, (mobile) => {
-  if (mobile) drawerOpen.value = false
-}, { immediate: true })
-
-async function onLogout() {
-  await $fetch('/api/auth/logout', { method: 'POST' })
-  await refresh()
-  await navigateTo('/')
-}
-</script>

app/components/BaseModal.vue

@@ -1,36 +0,0 @@
-<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="ariaLabelledby"
-        @keydown.escape="$emit('close')"
-      >
-        <button
-          type="button"
-          class="absolute inset-0 bg-black/60 transition-opacity"
-          aria-label="Close"
-          @click="$emit('close')"
-        />
-        <div
-          class="relative w-full"
-          @click.stop
-        >
-          <slot />
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup>
-defineProps({
-  show: Boolean,
-  ariaLabelledby: { type: String, default: undefined },
-})
-
-defineEmits(['close'])
-</script>

app/components/CameraViewer.vue

@@ -7,18 +7,18 @@
   />
   <aside
     v-else
-    class="kestrel-panel-base"
+    class="flex flex-col border border-kestrel-border bg-kestrel-surface"
-    :class="inline ? 'kestrel-panel-inline' : 'kestrel-panel-overlay'"
+    :class="asideClass"
     role="dialog"
     aria-label="Camera feed"
   >
-    <div class="kestrel-panel-header">
+    <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-glow-sm">
+      <h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
         {{ camera?.name ?? 'Camera' }}
       </h2>
       <button
         type="button"
-        class="kestrel-close-btn"
+        class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
         aria-label="Close panel"
         @click="$emit('close')"
       >
@@ -26,7 +26,7 @@
       </button>
     </div>
     <div class="flex-1 overflow-auto p-4">
-      <div class="kestrel-video-frame">
+      <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)]">
         <template v-if="sourceType === 'hls'">
           <video
             ref="videoRef"
@@ -75,14 +75,18 @@ defineEmits(['close'])
 const videoRef = ref(null)
 const streamError = ref(false)
 
-const isLiveSession = computed(() => props.camera?.hasStream !== undefined)
+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 streamUrl = computed(() => props.camera?.streamUrl ?? '')
 const sourceType = computed(() => (props.camera?.sourceType === 'hls' ? 'hls' : 'mjpeg'))
 
 const safeStreamUrl = computed(() => {
-  const u = streamUrl.value?.trim()
+  const u = streamUrl.value
-  return (u?.startsWith('http://') || u?.startsWith('https://')) ? u : ''
+  return typeof u === 'string' && u.trim() && (u.startsWith('http://') || u.startsWith('https://')) ? u.trim() : ''
 })
 
 function initHls() {

app/components/DeleteUserConfirmModal.vue

@@ -1,46 +0,0 @@
-<template>
-  <BaseModal
-    :show="!!user"
-    aria-labelledby="delete-user-title"
-    @close="$emit('close')"
-  >
-    <div
-      v-if="user"
-      class="kestrel-card-modal w-full max-w-sm p-4"
-    >
-      <h3
-        id="delete-user-title"
-        class="mb-2 text-sm font-medium text-kestrel-text"
-      >
-        Delete user?
-      </h3>
-      <p class="mb-4 text-sm text-kestrel-muted">
-        Are you sure you want to delete <strong class="text-kestrel-text">{{ user.identifier }}</strong>? They will not be able to sign in again.
-      </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 border border-red-500/60 bg-red-500/10 px-3 py-1.5 text-sm text-red-400 hover:bg-red-500/20"
-          @click="$emit('confirm')"
-        >
-          Delete
-        </button>
-      </div>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-defineProps({
-  user: { type: Object, default: null },
-})
-
-defineEmits(['close', 'confirm'])
-</script>

app/components/EditUserModal.vue

@@ -1,95 +0,0 @@
-<template>
-  <BaseModal
-    :show="!!user"
-    aria-labelledby="edit-user-title"
-    @close="$emit('close')"
-  >
-    <div
-      v-if="user"
-      class="kestrel-card-modal w-full max-w-sm p-4"
-    >
-      <h3
-        id="edit-user-title"
-        class="mb-3 text-sm font-medium text-kestrel-text"
-      >
-        Edit local user
-      </h3>
-      <form @submit.prevent="onSubmit">
-        <div class="mb-3 flex flex-col gap-1">
-          <label
-            for="edit-identifier"
-            class="text-xs text-kestrel-muted"
-          >Identifier</label>
-          <input
-            id="edit-identifier"
-            v-model="form.identifier"
-            type="text"
-            required
-            class="kestrel-input"
-          >
-        </div>
-        <div class="mb-4 flex flex-col gap-1">
-          <label
-            for="edit-password"
-            class="text-xs text-kestrel-muted"
-          >New password (leave blank to keep)</label>
-          <input
-            id="edit-password"
-            v-model="form.password"
-            type="password"
-            autocomplete="new-password"
-            class="kestrel-input"
-            placeholder="••••••••"
-          >
-          <p class="mt-0.5 text-xs text-kestrel-muted">
-            If you change your password, use the new one next time you sign in.
-          </p>
-        </div>
-        <p
-          v-if="submitError"
-          class="mb-2 text-xs text-red-400"
-        >
-          {{ submitError }}
-        </p>
-        <div class="flex justify-end gap-2">
-          <button
-            type="button"
-            class="kestrel-btn-secondary"
-            @click="$emit('close')"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            class="rounded border border-kestrel-accent px-3 py-1.5 text-sm text-kestrel-accent hover:bg-kestrel-accent-dim"
-          >
-            Save
-          </button>
-        </div>
-      </form>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  user: { type: Object, default: null },
-  submitError: { type: String, default: '' },
-})
-
-const emit = defineEmits(['close', 'submit'])
-
-const form = ref({ identifier: '', password: '' })
-
-watch(() => props.user, (u) => {
-  if (u) form.value = { identifier: u.identifier, password: '' }
-}, { immediate: true })
-
-function onSubmit() {
-  const payload = { identifier: form.value.identifier.trim() }
-  if (form.value.password) payload.password = form.value.password
-  emit('submit', payload)
-}
-</script>

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 shadow-glow-context"
+      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)]"
       :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
     >
       <template v-if="contextMenu.type === 'map'">
         <button
           type="button"
-          class="kestrel-context-menu-item"
+          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
           @click="openAddPoiModal(contextMenu.latlng)"
         >
           Add POI here
@@ -22,14 +22,14 @@
       <template v-else-if="contextMenu.type === 'poi'">
         <button
           type="button"
-          class="kestrel-context-menu-item"
+          class="block w-full px-3 py-1.5 text-left text-sm text-kestrel-text hover:bg-kestrel-border"
           @click="openEditPoiModal(contextMenu.poi)"
         >
           Edit
         </button>
         <button
           type="button"
-          class="kestrel-context-menu-item-danger"
+          class="block w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-kestrel-border"
           @click="openDeletePoiModal(contextMenu.poi)"
         >
           Delete
@@ -37,16 +37,176 @@
       </template>
     </div>
 
-    <PoiModal
+    <!-- POI modal (Add / Edit) -->
-      :show="showPoiModal"
+    <Teleport to="body">
-      :mode="poiModalMode"
+      <Transition name="modal">
-      :form="poiForm"
+        <div
-      :edit-poi="editPoi"
+          v-if="showPoiModal"
-      :delete-poi="deletePoi"
+          class="fixed inset-0 z-[2000] flex items-center justify-center p-4"
-      @close="closePoiModal"
+          role="dialog"
-      @submit="onPoiSubmit"
+          aria-modal="true"
-      @confirm-delete="confirmDeletePoi"
+          :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>
   </div>
 </template>
 
@@ -54,6 +214,10 @@
 import 'leaflet/dist/leaflet.css'
 
 const props = defineProps({
+  feeds: {
+    type: Array,
+    default: () => [],
+  },
   devices: {
     type: Array,
     default: () => [],
@@ -66,10 +230,6 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  cotEntities: {
-    type: Array,
-    default: () => [],
-  },
   canEditPois: {
     type: Boolean,
     default: false,
@@ -85,16 +245,17 @@ const mapContext = ref(null)
 const markersRef = ref([])
 const poiMarkersRef = ref({})
 const liveMarkersRef = ref({})
-const cotMarkersRef = 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 resizeObserver = ref(null)
+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'
@@ -102,7 +263,11 @@ 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
@@ -118,9 +283,8 @@ function getPoiIconSvg(type) {
   return shapes[type] || shapes.pin
 }
 
-const VALID_POI_TYPES = ['pin', 'flag', 'waypoint']
 function getPoiIcon(L, poi) {
-  const type = VALID_POI_TYPES.includes(poi.icon_type) ? poi.icon_type : 'pin'
+  const type = poi.icon_type === 'pin' || poi.icon_type === 'flag' || poi.icon_type === 'waypoint' ? poi.icon_type : 'pin'
   const html = getPoiIconSvg(type)
   return L.divIcon({
     className: 'poi-div-icon',
@@ -130,7 +294,7 @@ function getPoiIcon(L, poi) {
   })
 }
 
-const LIVE_ICON_COLOR = '#22c9c9' /* kestrel-accent - JS string for Leaflet SVG */
+const LIVE_ICON_COLOR = '#22c9c9'
 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({
@@ -141,17 +305,6 @@ function getLiveSessionIcon(L) {
   })
 }
 
-const COT_ICON_COLOR = '#f59e0b' /* amber - ATAK/CoT devices */
-function getCotEntityIcon(L) {
-  const html = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${COT_ICON_COLOR}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="8" r="2.5" fill="${COT_ICON_COLOR}"/></svg>`
-  return L.divIcon({
-    className: 'poi-div-icon cot-entity-icon',
-    html: `<span class="poi-icon-svg">${html}</span>`,
-    iconSize: [ICON_SIZE, ICON_SIZE],
-    iconAnchor: [ICON_SIZE / 2, ICON_SIZE],
-  })
-}
-
 function createMap(initialCenter) {
   const { L, offlineApi } = leafletRef.value || {}
   if (typeof document === 'undefined' || !mapRef.value || !L?.map) return
@@ -218,8 +371,6 @@ function createMap(initialCenter) {
   updateMarkers()
   updatePoiMarkers()
   updateLiveMarkers()
-  updateCotMarkers()
-  nextTick(() => map.invalidateSize())
 }
 
 function updateMarkers() {
@@ -231,7 +382,8 @@ function updateMarkers() {
     if (m) m.remove()
   })
 
-  const validSources = (props.devices || []).filter(f => typeof f?.lat === 'number' && typeof f?.lng === 'number')
+  const feedSources = [...(props.feeds || []), ...(props.devices || [])]
+  const validSources = feedSources.filter(f => typeof f?.lat === 'number' && typeof f?.lng === 'number')
   markersRef.value = validSources.map(item =>
     L.marker([item.lat, item.lng]).addTo(ctx.map).on('click', () => emit('select', item)),
   )
@@ -292,7 +444,7 @@ function updateLiveMarkers() {
   })
 
   const next = sessions.reduce((acc, session) => {
-    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span class="text-kestrel-accent">● Live</span>' : ''}</div>`
+    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(session.label)}</strong>${session.hasStream ? ' <span style="color:#22c9c9">● Live</span>' : ''}</div>`
     const existing = prev[session.id]
     if (existing) {
       existing.setLatLng([session.lat, session.lng])
@@ -309,39 +461,6 @@ function updateLiveMarkers() {
   liveMarkersRef.value = next
 }
 
-function updateCotMarkers() {
-  const ctx = mapContext.value
-  const { L } = leafletRef.value || {}
-  if (!ctx?.map || !L) return
-
-  const entities = (props.cotEntities || []).filter(
-    e => typeof e?.lat === 'number' && typeof e?.lng === 'number' && e?.id,
-  )
-  const byId = Object.fromEntries(entities.map(e => [e.id, e]))
-  const prev = cotMarkersRef.value
-  const icon = getCotEntityIcon(L)
-
-  Object.keys(prev).forEach((id) => {
-    if (!byId[id]) prev[id]?.remove()
-  })
-
-  const next = entities.reduce((acc, entity) => {
-    const content = `<div class="kestrel-live-popup"><strong>${escapeHtml(entity.label || entity.id)}</strong> <span class="text-kestrel-muted">ATAK</span></div>`
-    const existing = prev[entity.id]
-    if (existing) {
-      existing.setLatLng([entity.lat, entity.lng])
-      existing.setIcon(icon)
-      existing.getPopup()?.setContent(content)
-      return { ...acc, [entity.id]: existing }
-    }
-    const marker = L.marker([entity.lat, entity.lng], { icon })
-      .addTo(ctx.map)
-      .bindPopup(content, { className: 'kestrel-live-popup-wrap', maxWidth: 360 })
-    return { ...acc, [entity.id]: marker }
-  }, {})
-  cotMarkersRef.value = next
-}
-
 function escapeHtml(text) {
   const div = document.createElement('div')
   div.textContent = text
@@ -359,6 +478,7 @@ function openAddPoiModal(latlng) {
   editPoi.value = null
   deletePoi.value = null
   poiForm.value = { label: '', iconType: 'pin' }
+  iconDropdownOpen.value = false
   showPoiModal.value = true
 }
 
@@ -369,6 +489,7 @@ 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
 }
 
@@ -384,38 +505,52 @@ function openDeletePoiModal(poi) {
 function closePoiModal() {
   showPoiModal.value = false
   poiModalMode.value = 'add'
+  iconDropdownOpen.value = false
   addPoiLatlng.value = null
   editPoi.value = null
   deletePoi.value = null
 }
 
-async function doPoiFetch(fn) {
+function onPoiModalDocumentClick(e) {
-  try {
+  if (!showPoiModal.value) return
-    await fn()
+  if (iconDropdownOpen.value && iconDropdownRef.value && !iconDropdownRef.value.contains(e.target)) {
-    emit('refreshPois')
+    iconDropdownOpen.value = false
-    closePoiModal()
   }
-  catch { /* ignore */ }
 }
 
-async function onPoiSubmit(payload) {
+async function submitPoiModal() {
-  const { label, iconType } = payload
-  const body = { label: (label ?? '').trim(), iconType: iconType || 'pin' }
   if (poiModalMode.value === 'add') {
     const latlng = addPoiLatlng.value
     if (!latlng) return
-    await doPoiFetch(() => $fetch('/api/pois', { method: 'POST', body: { ...body, lat: latlng.lat, lng: latlng.lng } }))
+    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 */ }
     return
   }
   if (poiModalMode.value === 'edit' && editPoi.value) {
-    await doPoiFetch(() => $fetch(`/api/pois/${editPoi.value.id}`, { method: 'PATCH', body }))
+    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 */ }
   }
 }
 
 async function confirmDeletePoi() {
   const poi = deletePoi.value
   if (!poi?.id) return
-  await doPoiFetch(() => $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' }))
+  try {
+    await $fetch(`/api/pois/${poi.id}`, { method: 'DELETE' })
+    emit('refreshPois')
+    closePoiModal()
+  }
+  catch { /* ignore */ }
 }
 
 function destroyMap() {
@@ -427,8 +562,6 @@ function destroyMap() {
   poiMarkersRef.value = {}
   Object.values(liveMarkersRef.value).forEach(m => m?.remove())
   liveMarkersRef.value = {}
-  Object.values(cotMarkersRef.value).forEach(m => m?.remove())
-  cotMarkersRef.value = {}
 
   const ctx = mapContext.value
   if (ctx) {
@@ -476,15 +609,7 @@ onMounted(async () => {
   leafletRef.value = { L, offlineApi: offline }
   initMapWithLocation()
   document.addEventListener('click', onDocumentClick)
-
+  document.addEventListener('click', onPoiModalDocumentClick)
-  nextTick(() => {
-    if (mapRef.value) {
-      resizeObserver.value = new ResizeObserver(() => {
-        mapContext.value?.map?.invalidateSize()
-      })
-      resizeObserver.value.observe(mapRef.value)
-    }
-  })
 })
 
 function onDocumentClick(e) {
@@ -493,15 +618,166 @@ function onDocumentClick(e) {
 
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocumentClick)
-  if (resizeObserver.value && mapRef.value) {
+  document.removeEventListener('click', onPoiModalDocumentClick)
-    resizeObserver.value.disconnect()
-    resizeObserver.value = null
-  }
   destroyMap()
 })
 
-watch(() => props.devices, () => updateMarkers(), { deep: true })
+watch(() => [props.feeds, props.devices], () => updateMarkers(), { deep: true })
 watch([() => props.pois, () => props.canEditPois], () => updatePoiMarkers(), { deep: true })
 watch(() => props.liveSessions, () => updateLiveMarkers(), { deep: true })
-watch(() => props.cotEntities, () => updateCotMarkers(), { 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>

app/components/LiveSessionPanel.vue

@@ -1,17 +1,17 @@
 <template>
   <aside
-    class="kestrel-panel-base"
+    class="flex flex-col border border-kestrel-border bg-kestrel-surface"
-    :class="inline ? 'kestrel-panel-inline' : 'kestrel-panel-overlay'"
+    :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)]'"
     role="dialog"
     aria-label="Live feed"
   >
-    <div class="kestrel-panel-header">
+    <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-glow-sm">
+      <h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
         {{ session?.label ?? 'Live' }}
       </h2>
       <button
         type="button"
-        class="kestrel-close-btn"
+        class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
         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="kestrel-video-frame">
+      <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)]">
         <video
           ref="videoRef"
           autoplay
@@ -47,7 +47,7 @@
               Wrong host: server sees <strong>{{ failureReason.wrongHost.serverHostname }}</strong> but you opened this page at <strong>{{ failureReason.wrongHost.clientHostname }}</strong>. Use the same URL or set MEDIASOUP_ANNOUNCED_IP.
             </p>
             <ul class="normal-case list-inside list-disc text-left text-kestrel-muted">
-              <li><strong>Firewall:</strong> Open UDP/TCP 40000-49999 on the server.</li>
+              <li><strong>Firewall:</strong> Open UDP/TCP 40000–49999 on the server.</li>
               <li><strong>Wrong host:</strong> Server must see the same address you use.</li>
               <li><strong>Restrictive NAT / cellular:</strong> TURN may be required.</li>
             </ul>
@@ -66,7 +66,7 @@
               Wrong host: server sees <strong>{{ failureReason.wrongHost.serverHostname }}</strong> but you opened at <strong>{{ failureReason.wrongHost.clientHostname }}</strong>.
             </p>
             <ul class="normal-case list-inside list-disc text-left text-kestrel-muted">
-              <li>Firewall: open ports 40000-49999.</li>
+              <li>Firewall: open ports 40000–49999.</li>
               <li>Wrong host: use same URL or set MEDIASOUP_ANNOUNCED_IP.</li>
               <li>Restrictive NAT: TURN may be required.</li>
             </ul>
@@ -104,9 +104,9 @@ const hasStream = ref(false)
 const error = ref('')
 const connectionState = ref('') // '', 'connecting', 'connected', 'failed'
 const failureReason = ref(null) // { wrongHost: { serverHostname, clientHostname } | null }
-const device = ref(null)
+let device = null
-const recvTransport = ref(null)
+let recvTransport = null
-const consumer = ref(null)
+let consumer = null
 
 async function runFailureReasonCheck() {
   failureReason.value = await getWebRTCFailureReason()
@@ -135,16 +135,16 @@ async function setupWebRTC() {
     const rtpCapabilities = await $fetch(`/api/live/webrtc/router-rtp-capabilities?sessionId=${props.session.id}`, {
       credentials: 'include',
     })
-    device.value = await createMediasoupDevice(rtpCapabilities)
+    device = await createMediasoupDevice(rtpCapabilities)
-    recvTransport.value = await createRecvTransport(device.value, props.session.id)
+    recvTransport = await createRecvTransport(device, props.session.id)
 
-    recvTransport.value.on('connectionstatechange', () => {
+    recvTransport.on('connectionstatechange', () => {
-      const state = recvTransport.value.connectionState
+      const state = recvTransport.connectionState
       if (state === 'connected') connectionState.value = 'connected'
       else if (state === 'failed' || state === 'disconnected' || state === 'closed') {
         logWarn('LiveSessionPanel: Receive transport connection state changed', {
           state,
-          transportId: recvTransport.value.id,
+          transportId: recvTransport.id,
           sessionId: props.session.id,
         })
         if (state === 'failed') {
@@ -154,8 +154,8 @@ async function setupWebRTC() {
       }
     })
 
-    const connectionPromise = waitForConnectionState(recvTransport.value, 10000)
+    const connectionPromise = waitForConnectionState(recvTransport, 10000)
-    consumer.value = await consumeProducer(recvTransport.value, device.value, props.session.id)
+    consumer = await consumeProducer(recvTransport, device, props.session.id)
     const finalConnectionState = await connectionPromise
 
     if (finalConnectionState !== 'connected') {
@@ -163,8 +163,8 @@ async function setupWebRTC() {
       runFailureReasonCheck()
       logWarn('LiveSessionPanel: Transport not fully connected', {
         state: finalConnectionState,
-        transportId: recvTransport.value.id,
+        transportId: recvTransport.id,
-        consumerId: consumer.value.id,
+        consumerId: consumer.id,
       })
     }
     else {
@@ -182,14 +182,14 @@ async function setupWebRTC() {
       attempts++
     }
 
-    if (!consumer.value.track) {
+    if (!consumer.track) {
       logError('LiveSessionPanel: No video track available', {
-        consumerId: consumer.value.id,
+        consumerId: consumer.id,
-        consumerKind: consumer.value.kind,
+        consumerKind: consumer.kind,
-        consumerPaused: consumer.value.paused,
+        consumerPaused: consumer.paused,
-        consumerClosed: consumer.value.closed,
+        consumerClosed: consumer.closed,
-        consumerProducerId: consumer.value.producerId,
+        consumerProducerId: consumer.producerId,
-        transportConnectionState: recvTransport.value?.connectionState,
+        transportConnectionState: recvTransport?.connectionState,
       })
       error.value = 'No video track available - consumer may not be receiving data from producer'
       return
@@ -197,14 +197,14 @@ async function setupWebRTC() {
 
     if (!videoRef.value) {
       logError('LiveSessionPanel: Video ref not available', {
-        consumerId: consumer.value.id,
+        consumerId: consumer.id,
-        hasTrack: !!consumer.value.track,
+        hasTrack: !!consumer.track,
       })
       error.value = 'Video element not available'
       return
     }
 
-    const stream = new MediaStream([consumer.value.track])
+    const stream = new MediaStream([consumer.track])
     videoRef.value.srcObject = stream
     hasStream.value = true
 
@@ -227,7 +227,7 @@ async function setupWebRTC() {
         if (resolved) return
         resolved = true
         videoRef.value.removeEventListener('loadedmetadata', handler)
-        logWarn('LiveSessionPanel: Video metadata timeout', { consumerId: consumer.value.id })
+        logWarn('LiveSessionPanel: Video metadata timeout', { consumerId: consumer.id })
         resolve()
       }, 5000)
     })
@@ -239,7 +239,7 @@ async function setupWebRTC() {
     }
     catch (playErr) {
       logWarn('LiveSessionPanel: Video play() failed (may need user interaction)', {
-        consumerId: consumer.value.id,
+        consumerId: consumer.id,
         error: playErr.message || String(playErr),
         errorName: playErr.name,
         videoPaused: videoRef.value.paused,
@@ -248,12 +248,12 @@ async function setupWebRTC() {
       // Don't set error - video might still work, just needs user interaction
     }
 
-    consumer.value.track.addEventListener('ended', () => {
+    consumer.track.addEventListener('ended', () => {
       error.value = 'Video track ended'
       hasStream.value = false
     })
     videoRef.value.addEventListener('error', () => {
-      logError('LiveSessionPanel: Video element error', { consumerId: consumer.value.id })
+      logError('LiveSessionPanel: Video element error', { consumerId: consumer.id })
     })
   }
   catch (err) {
@@ -274,15 +274,15 @@ async function setupWebRTC() {
 }
 
 function cleanup() {
-  if (consumer.value) {
+  if (consumer) {
-    consumer.value.close()
+    consumer.close()
-    consumer.value = null
+    consumer = null
   }
-  if (recvTransport.value) {
+  if (recvTransport) {
-    recvTransport.value.close()
+    recvTransport.close()
-    recvTransport.value = null
+    recvTransport = null
   }
-  device.value = null
+  device = null
   if (videoRef.value) {
     videoRef.value.srcObject = null
   }
@@ -308,7 +308,7 @@ watch(
 watch(
   () => props.session?.hasStream,
   (hasStream) => {
-    if (hasStream && props.session?.id && !device.value) {
+    if (hasStream && props.session?.id && !device) {
       setupWebRTC()
     }
     else if (!hasStream) {

app/components/MembersTable.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="overflow-x-auto rounded border border-kestrel-border">
-    <table class="w-full text-left text-sm">
-      <thead>
-        <tr class="border-b border-kestrel-border bg-kestrel-surface-hover">
-          <th class="px-4 py-2 font-medium text-kestrel-text">
-            Identifier
-          </th>
-          <th class="px-4 py-2 font-medium text-kestrel-text">
-            Auth
-          </th>
-          <th class="px-4 py-2 font-medium text-kestrel-text">
-            Role
-          </th>
-          <th
-            v-if="isAdmin"
-            class="px-4 py-2 font-medium text-kestrel-text"
-          >
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="u in users"
-          :key="u.id"
-          class="border-b border-kestrel-border"
-        >
-          <td class="px-4 py-2 text-kestrel-text">
-            {{ u.identifier }}
-          </td>
-          <td class="px-4 py-2">
-            <span
-              class="rounded px-1.5 py-0.5 text-xs text-kestrel-muted"
-              :class="u.auth_provider === 'oidc' ? 'bg-kestrel-surface' : ''"
-            >
-              {{ u.auth_provider === 'oidc' ? 'OIDC' : 'Local' }}
-            </span>
-          </td>
-          <td class="px-4 py-2">
-            <AppDropdown
-              v-if="isAdmin"
-              :open="openRoleDropdownId === u.id"
-              teleport
-              @close="emit('closeRoleDropdown')"
-            >
-              <button
-                type="button"
-                class="flex min-w-[6rem] items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-left text-sm text-kestrel-text shadow-sm transition-colors hover:border-kestrel-accent/50 hover:bg-kestrel-surface"
-                :aria-expanded="openRoleDropdownId === u.id"
-                :aria-haspopup="true"
-                aria-label="Change role"
-                @click.stop="emit('toggleRoleDropdown', u.id)"
-              >
-                <span>{{ roleByUserId[u.id] ?? u.role }}</span>
-                <span
-                  class="text-kestrel-muted transition-transform"
-                  :class="openRoleDropdownId === u.id && 'rotate-180'"
-                >
-                  ▾
-                </span>
-              </button>
-              <template #menu>
-                <button
-                  v-for="role in roleOptions"
-                  :key="role"
-                  type="button"
-                  role="menuitem"
-                  class="block w-full px-3 py-1.5 text-left text-sm transition-colors"
-                  :class="roleByUserId[u.id] === role
-                    ? 'bg-kestrel-accent-dim text-kestrel-accent'
-                    : 'text-kestrel-text hover:bg-kestrel-border hover:text-kestrel-text'"
-                  @click.stop="emit('selectRole', u.id, role)"
-                >
-                  {{ role }}
-                </button>
-              </template>
-            </AppDropdown>
-            <span
-              v-else
-              class="text-kestrel-muted"
-            >{{ u.role }}</span>
-          </td>
-          <td
-            v-if="isAdmin"
-            class="px-4 py-2"
-          >
-            <div class="flex flex-wrap items-center gap-2">
-              <button
-                v-if="roleByUserId[u.id] !== u.role"
-                type="button"
-                class="rounded border border-kestrel-accent px-2 py-1 text-xs text-kestrel-accent hover:bg-kestrel-accent-dim"
-                @click="emit('saveRole', u.id)"
-              >
-                Save role
-              </button>
-              <template v-if="u.auth_provider !== 'oidc'">
-                <button
-                  type="button"
-                  class="rounded border border-kestrel-border px-2 py-1 text-xs text-kestrel-text hover:bg-kestrel-surface"
-                  @click="emit('editUser', u)"
-                >
-                  Edit
-                </button>
-                <button
-                  v-if="u.id !== currentUserId"
-                  type="button"
-                  class="rounded border border-red-500/60 px-2 py-1 text-xs text-red-400 hover:bg-red-500/10"
-                  @click="emit('deleteConfirm', u)"
-                >
-                  Remove
-                </button>
-              </template>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  users: { type: Array, required: true },
-  roleByUserId: { type: Object, required: true },
-  roleOptions: { type: Array, required: true },
-  isAdmin: Boolean,
-  currentUserId: { type: [String, Number], default: null },
-  openRoleDropdownId: { type: [String, Number], default: null },
-})
-
-const emit = defineEmits(['toggleRoleDropdown', 'closeRoleDropdown', 'selectRole', 'saveRole', 'editUser', 'deleteConfirm'])
-</script>

app/components/NavDrawer.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex h-full shrink-0">
+  <Teleport to="body">
     <Transition name="drawer-backdrop">
       <button
-        v-if="isMobile && modelValue"
+        v-if="modelValue"
         type="button"
         class="fixed inset-0 z-20 block h-full w-full border-0 bg-black/50 p-0 md:hidden"
         aria-label="Close navigation"
@@ -10,29 +10,28 @@
       />
     </Transition>
     <aside
-      class="nav-drawer flex h-full flex-col bg-kestrel-surface transition-[width] duration-200 ease-out md:relative md:translate-x-0"
+      class="nav-drawer fixed left-0 top-0 z-30 flex h-full w-[260px] flex-col border-r border-kestrel-border bg-kestrel-surface transition-transform duration-200 ease-out"
-      :class="[
+      :class="{ '-translate-x-full': !modelValue }"
-        isMobile && !modelValue ? 'fixed left-0 top-14 z-30 -translate-x-full' : 'fixed left-0 top-14 z-30 md:relative md:top-0',
-        showCollapsed ? 'w-16' : 'w-[260px]',
-      ]"
       role="navigation"
       aria-label="Main navigation"
       :aria-expanded="modelValue"
     >
       <div
-        v-if="isMounted && isMobile"
+        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 shrink-0 items-center justify-end border-b border-kestrel-border bg-kestrel-surface px-2 py-1"
       >
+        <h2 class="text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+          Navigation
+        </h2>
         <button
           type="button"
-          class="kestrel-close-btn"
+          class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
           aria-label="Close navigation"
           @click="close"
         >
           <span class="text-xl leading-none">&times;</span>
         </button>
       </div>
-      <nav class="flex-1 overflow-auto bg-kestrel-surface py-2">
+      <nav class="flex-1 overflow-auto py-2">
         <ul class="space-y-0.5 px-2">
           <li
             v-for="item in navItems"
@@ -40,91 +39,50 @@
           >
             <NuxtLink
               :to="item.to"
-              class="flex items-center gap-3 rounded px-3 py-2 text-sm transition-colors"
+              class="block rounded px-3 py-2 text-sm transition-colors"
-              :class="[
+              :class="isActive(item.to)
-                showCollapsed ? 'justify-center px-2' : '',
+                ? '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)]'
-                isActive(item.to)
+                : 'border-l-2 border-transparent text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-text'"
-                  ? 'bg-kestrel-surface-hover font-medium text-kestrel-accent text-shadow-glow-sm'
+              @click="close"
-                  : 'text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-text',
-                !showCollapsed && (isActive(item.to) ? 'border-l-2 border-kestrel-accent' : 'border-l-2 border-transparent'),
-              ]"
-              :title="showCollapsed ? item.label : undefined"
-              @click="isMobile ? close() : undefined"
             >
-              <Icon
+              {{ item.label }}
-                :name="item.icon"
-                class="size-5 shrink-0"
-                aria-hidden="true"
-              />
-              <span
-                v-show="!showCollapsed"
-                class="truncate"
-              >{{ item.label }}</span>
             </NuxtLink>
           </li>
         </ul>
       </nav>
-      <div
-        v-if="isMounted && !isMobile"
-        class="shrink-0 border-t border-kestrel-border bg-kestrel-surface py-2"
-      >
-        <button
-          type="button"
-          class="flex w-full items-center gap-3 rounded px-3 py-2 text-sm text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-text"
-          :class="showCollapsed ? 'justify-center px-2' : ''"
-          :aria-label="showCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
-          @click="toggleCollapsed"
-        >
-          <Icon
-            :name="showCollapsed ? 'tabler:chevron-right' : 'tabler:chevron-left'"
-            class="size-5 shrink-0"
-            aria-hidden="true"
-          />
-          <span v-show="!showCollapsed">Collapse sidebar</span>
-        </button>
-      </div>
     </aside>
-  </div>
+  </Teleport>
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
-  modelValue: { type: Boolean, default: false },
+  modelValue: {
-  collapsed: { type: Boolean, default: false },
+    type: Boolean,
-  isMobile: { type: Boolean, default: true },
+    default: false,
+  },
 })
 
-const emit = defineEmits(['update:modelValue', 'update:collapsed'])
+const emit = defineEmits(['update:modelValue'])
 
-const isMounted = ref(false)
 const route = useRoute()
 const { canEditPois } = useUser()
 
-const NAV_ITEMS = Object.freeze([
-  { to: '/', label: 'Map', icon: 'tabler:map' },
-  { to: '/cameras', label: 'Cameras', icon: 'tabler:video' },
-  { to: '/poi', label: 'POI', icon: 'tabler:map-pin' },
-  { to: '/members', label: 'Members', icon: 'tabler:users' },
-  { to: '/account', label: 'Account', icon: 'tabler:user-circle' },
-  { to: '/settings', label: 'Settings', icon: 'tabler:settings' },
-])
-
-const SHARE_LIVE_ITEM = { to: '/share-live', label: 'Share live', icon: 'tabler:live-photo' }
-
 const navItems = computed(() => {
-  if (!canEditPois.value) return NAV_ITEMS
+  const items = [
-  const list = [...NAV_ITEMS]
+    { to: '/', label: 'Map' },
-  list.splice(3, 0, SHARE_LIVE_ITEM)
+    { to: '/account', label: 'Account' },
-  return list
+    { to: '/cameras', label: 'Cameras' },
+    { to: '/poi', label: 'POI' },
+    { to: '/members', label: 'Members' },
+    { to: '/settings', label: 'Settings' },
+  ]
+  if (canEditPois.value) {
+    items.splice(1, 0, { to: '/share-live', label: 'Share live' })
+  }
+  return items
 })
 
-const showCollapsed = computed(() => props.collapsed && !props.isMobile)
+const isActive = to => to === '/' ? route.path === '/' : route.path.startsWith(to)
-
-function toggleCollapsed() {
-  emit('update:collapsed', !props.collapsed)
-}
-
-const isActive = to => (to === '/' ? route.path === '/' : route.path.startsWith(to))
 
 function close() {
   emit('update:modelValue', false)
@@ -137,7 +95,6 @@ function onEscape(e) {
 defineExpose({ close })
 
 onMounted(() => {
-  isMounted.value = true
   document.addEventListener('keydown', onEscape)
 })
 
@@ -145,3 +102,24 @@ 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>

app/components/PoiModal.vue

@@ -1,175 +0,0 @@
-<template>
-  <BaseModal
-    :show="show"
-    :aria-labelledby="mode === 'delete' ? 'delete-poi-title' : 'poi-modal-title'"
-    @close="$emit('close')"
-  >
-    <div
-      v-if="mode === 'add' || mode === 'edit'"
-      ref="modalRef"
-      class="kestrel-card-modal relative w-full max-w-md p-6"
-    >
-      <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-else-if="mode === 'delete'"
-      ref="modalRef"
-      class="kestrel-card-modal relative w-full max-w-sm p-6"
-    >
-      <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>
-  </BaseModal>
-</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>

app/components/UserMenu.vue

@@ -1,84 +0,0 @@
-<template>
-  <AppDropdown
-    :open="open"
-    @close="open = false"
-  >
-    <button
-      type="button"
-      class="flex rounded-full border border-kestrel-border bg-kestrel-surface p-0.5 transition-colors hover:bg-kestrel-border hover:border-kestrel-accent"
-      aria-label="User menu"
-      :aria-expanded="open"
-      aria-haspopup="true"
-      @click="open = !open"
-    >
-      <img
-        v-if="user?.avatar_url"
-        :src="user.avatar_url"
-        :alt="user.identifier"
-        class="h-8 w-8 rounded-full object-cover"
-      >
-      <span
-        v-else
-        class="flex h-8 w-8 items-center justify-center rounded-full bg-kestrel-border text-xs font-medium text-kestrel-text"
-      >
-        {{ initials }}
-      </span>
-    </button>
-    <template #menu>
-      <NuxtLink
-        to="/account"
-        class="kestrel-context-menu-item"
-        role="menuitem"
-        @click="open = false"
-      >
-        Profile
-      </NuxtLink>
-      <NuxtLink
-        to="/settings"
-        class="kestrel-context-menu-item"
-        role="menuitem"
-        @click="open = false"
-      >
-        Settings
-      </NuxtLink>
-      <button
-        type="button"
-        class="kestrel-context-menu-item-danger w-full"
-        role="menuitem"
-        @click="onSignOut"
-      >
-        Sign out
-      </button>
-    </template>
-  </AppDropdown>
-</template>
-
-<script setup>
-const props = defineProps({
-  user: {
-    type: Object,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['signout'])
-
-const open = ref(false)
-
-const initials = computed(() => {
-  const id = props.user?.identifier ?? ''
-  const parts = id.trim().split(/\s+/)
-  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase()
-  return id.slice(0, 2).toUpperCase() || '?'
-})
-
-function onSignOut() {
-  open.value = false
-  emit('signout')
-}
-
-const route = useRoute()
-watch(() => route.path, () => {
-  open.value = false
-})
-</script>

app/composables/useAutoCloseLiveSession.js

@@ -1,12 +0,0 @@
-/** 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 },
-  )
-}

app/composables/useCameras.js

@@ -1,20 +1,16 @@
-/** Fetches devices + live sessions; polls when tab visible. */
+/**
+ * Fetches devices + live sessions (unified cameras). Optionally polls when tab is visible.
+ */
 const POLL_MS = 1500
-const EMPTY_RESPONSE = Object.freeze({ devices: [], liveSessions: [], cotEntities: [] })
 
 export function useCameras(options = {}) {
   const { poll: enablePoll = true } = options
   const { data, refresh } = useAsyncData(
     'cameras',
-    () => $fetch('/api/cameras').catch(() => EMPTY_RESPONSE),
+    () => $fetch('/api/cameras').catch(() => ({ devices: [], liveSessions: [] })),
-    { default: () => EMPTY_RESPONSE },
+    { default: () => ({ devices: [], liveSessions: [] }) },
   )
 
-  const devices = computed(() => Object.freeze([...(data.value?.devices ?? [])]))
-  const liveSessions = computed(() => Object.freeze([...(data.value?.liveSessions ?? [])]))
-  const cotEntities = computed(() => Object.freeze([...(data.value?.cotEntities ?? [])]))
-  const cameras = computed(() => Object.freeze([...devices.value, ...liveSessions.value]))
-
   const pollInterval = ref(null)
   function startPolling() {
     if (!enablePoll || pollInterval.value) return
@@ -31,11 +27,22 @@ export function useCameras(options = {}) {
   onMounted(() => {
     if (typeof document === 'undefined') return
     document.addEventListener('visibilitychange', () => {
-      document.visibilityState === 'visible' ? (startPolling(), refresh()) : stopPolling()
+      if (document.visibilityState === 'visible') {
+        startPolling()
+        refresh()
+      }
+      else {
+        stopPolling()
+      }
     })
     if (document.visibilityState === 'visible') startPolling()
   })
   onBeforeUnmount(stopPolling)
 
-  return Object.freeze({ data, devices, liveSessions, cotEntities, cameras, refresh, startPolling, 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 }
 }

app/composables/useLiveSessions.js

@@ -1,12 +1,24 @@
-/** Fetches live sessions; polls when tab visible. */
+/**
+ * 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.
+ */
+
 const POLL_MS = 1500
 
 export function useLiveSessions() {
-  const { data: _sessions, refresh } = useAsyncData(
+  const { data: sessions, refresh } = useAsyncData(
     'live-sessions',
     async () => {
       try {
-        return await $fetch('/api/live')
+        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
       }
       catch (err) {
         const msg = err?.message ?? String(err)
@@ -18,13 +30,14 @@ export function useLiveSessions() {
     { default: () => [] },
   )
 
-  const sessions = computed(() => Object.freeze([...(_sessions.value ?? [])]))
   const pollInterval = ref(null)
 
   function startPolling() {
     if (pollInterval.value) return
-    refresh()
+    refresh() // Fetch immediately so new sessions show without waiting for first interval
-    pollInterval.value = setInterval(refresh, POLL_MS)
+    pollInterval.value = setInterval(() => {
+      refresh()
+    }, POLL_MS)
   }
 
   function stopPolling() {
@@ -36,12 +49,21 @@ export function useLiveSessions() {
 
   onMounted(() => {
     if (typeof document === 'undefined') return
+    const onFocus = () => startPolling()
+    const onBlur = () => stopPolling()
     document.addEventListener('visibilitychange', () => {
-      document.visibilityState === 'visible' ? (startPolling(), refresh()) : stopPolling()
+      if (document.visibilityState === 'visible') {
+        onFocus()
+        refresh() // Fresh data when returning to tab
+      }
+      else onBlur()
     })
     if (document.visibilityState === 'visible') startPolling()
   })
-  onBeforeUnmount(stopPolling)
 
-  return Object.freeze({ sessions, refresh, startPolling, stopPolling })
+  onBeforeUnmount(() => {
+    stopPolling()
+  })
+
+  return { sessions, refresh, startPolling, stopPolling }
 }

app/composables/useMediaQuery.js

@@ -1,21 +0,0 @@
-/**
- * Reactive viewport media query. SSR-safe: defaults to true (mobile) so sidebar closed on first paint.
- * @param {string} query - CSS media query, e.g. '(max-width: 767px)'
- * @returns {import('vue').Ref<boolean>} Ref that is true when the media query matches.
- */
-export function useMediaQuery(query) {
-  const matches = ref(true)
-  const mql = ref(null)
-  const handler = (e) => {
-    matches.value = e.matches
-  }
-  onMounted(() => {
-    mql.value = window.matchMedia(query)
-    matches.value = mql.value.matches
-    mql.value.addEventListener('change', handler)
-  })
-  onBeforeUnmount(() => {
-    if (mql.value) mql.value.removeEventListener('change', handler)
-  })
-  return matches
-}

app/composables/useUser.js

@@ -1,5 +1,3 @@
-const EDIT_ROLES = Object.freeze(['admin', 'leader'])
-
 export function useUser() {
   const requestFetch = useRequestFetch()
   const { data: user, refresh } = useAsyncData(
@@ -7,7 +5,7 @@ export function useUser() {
     () => (requestFetch ?? $fetch)('/api/me').catch(() => null),
     { default: () => null },
   )
-  const canEditPois = computed(() => EDIT_ROLES.includes(user.value?.role))
+  const canEditPois = computed(() => user.value?.role === 'admin' || user.value?.role === 'leader')
   const isAdmin = computed(() => user.value?.role === 'admin')
-  return Object.freeze({ user, canEditPois, isAdmin, refresh })
+  return { user, canEditPois, isAdmin, refresh }
 }

app/composables/useWebRTC.js

@@ -1,26 +1,61 @@
-/** WebRTC/Mediasoup client utilities. */
+/**
+ * WebRTC composable for Mediasoup client operations.
+ * Handles device initialization, transport creation, and WebSocket signaling.
+ */
+
 import { logError, logWarn } from '../utils/logger.js'
 
-const FETCH_OPTS = { credentials: 'include' }
+/**
-
+ * Initialize Mediasoup device from router RTP capabilities.
+ * @param {object} rtpCapabilities
+ * @returns {Promise<object>} Mediasoup device
+ */
 export async function createMediasoupDevice(rtpCapabilities) {
-  if (typeof window === 'undefined') throw new TypeError('Mediasoup device can only be created in browser')
+  // Dynamically import mediasoup-client only in browser
+  if (typeof window === 'undefined') {
+    throw new TypeError('Mediasoup device can only be created in browser')
+  }
+
+  // Use dynamic import for mediasoup-client
   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.onopen = () => {
+      resolve(ws)
+    }
+
+    ws.onerror = () => {
+      reject(new Error('WebSocket connection failed'))
+    }
+
+    ws.onclose = () => {
+      // Connection closed
+    }
   })
 }
 
+/**
+ * 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) {
@@ -60,20 +95,41 @@ export function sendWebSocketMessage(ws, sessionId, type, data = {}) {
   })
 }
 
-function attachTransportHandlers(transport, transportParams, sessionId, label, { onConnectSuccess, onConnectFailure } = {}) {
+/**
+ * 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,
+  })
+
   transport.on('connect', async ({ dtlsParameters }, callback, errback) => {
     try {
       await $fetch('/api/live/webrtc/connect-transport', {
         method: 'POST',
         body: { sessionId, transportId: transportParams.id, dtlsParameters },
-        ...FETCH_OPTS,
+        credentials: 'include',
       })
       onConnectSuccess?.()
       callback()
     }
     catch (err) {
-      logError(`useWebRTC: ${label} transport connect failed`, {
+      logError('useWebRTC: Send transport connect failed', {
-        err: err?.message ?? String(err),
+        err: err.message || String(err),
         transportId: transportParams.id,
         connectionState: transport.connectionState,
         sessionId,
@@ -82,50 +138,48 @@ function attachTransportHandlers(transport, transportParams, sessionId, label, {
       errback(err)
     }
   })
+
   transport.on('connectionstatechange', () => {
     const state = transport.connectionState
-    if (['failed', 'disconnected', 'closed'].includes(state)) {
+    if (state === 'failed' || state === 'disconnected' || state === 'closed') {
-      logWarn(`useWebRTC: ${label} transport connection state changed`, { state, transportId: transportParams.id, sessionId })
+      logWarn('useWebRTC: Send 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 },
-        ...FETCH_OPTS,
+        credentials: 'include',
       })
       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 },
-    ...FETCH_OPTS,
+    credentials: 'include',
   })
   const transport = device.createRecvTransport({
     id: transportParams.id,
@@ -133,15 +187,55 @@ export async function createRecvTransport(device, sessionId) {
     iceCandidates: transportParams.iceCandidates,
     dtlsParameters: transportParams.dtlsParameters,
   })
-  attachTransportHandlers(transport, transportParams, sessionId, 'Recv')
+
+  // 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,
+      })
+    }
+  })
+
   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: device.rtpCapabilities },
+    body: { sessionId, transportId: transport.id, rtpCapabilities },
-    ...FETCH_OPTS,
+    credentials: 'include',
   })
 
   const consumer = await transport.consume({
@@ -162,6 +256,14 @@ 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(() => {
@@ -183,21 +285,27 @@ 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) => {
-    const tid = ref(null)
+    let tid
     const handler = () => {
       const state = transport.connectionState
       if (terminal.includes(state)) {
         transport.off('connectionstatechange', handler)
-        if (tid.value) clearTimeout(tid.value)
+        if (tid) clearTimeout(tid)
         resolve(state)
       }
     }
     transport.on('connectionstatechange', handler)
     handler()
-    tid.value = setTimeout(() => {
+    tid = setTimeout(() => {
       transport.off('connectionstatechange', handler)
       resolve(transport.connectionState)
     }, timeoutMs)

app/composables/useWebRTCFailureReason.js

@@ -1,13 +1,18 @@
-/** Pure: fetches WebRTC failure reason (e.g. wrong host). Returns frozen object. */
+/**
+ * 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.
+ */
 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 Object.freeze({ wrongHost: Object.freeze({ serverHostname, clientHostname }) })
+      return { wrongHost: { serverHostname, clientHostname } }
     }
   }
-  catch { /* ignore */ }
+  catch {
-  return Object.freeze({ wrongHost: null })
+    // ignore
+  }
+  return { wrongHost: null }
 }

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-glow-md">
+      <h1 class="text-2xl font-semibold tracking-wide [text-shadow:0_0_12px_rgba(34,201,201,0.3)]">
         [ Error ]
       </h1>
       <p class="mt-2 text-sm text-kestrel-muted">

app/layouts/default.vue

@@ -1,7 +1,71 @@
 <template>
-  <div class="flex h-screen flex-col overflow-hidden bg-kestrel-bg font-mono text-kestrel-text">
+  <div class="min-h-screen bg-kestrel-bg text-kestrel-text font-mono flex flex-col">
-    <AppShell>
+    <div class="relative flex flex-1 min-h-0">
-      <slot />
+      <NavDrawer v-model="drawerOpen" />
-    </AppShell>
+      <div
+        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)]">
+          <button
+            type="button"
+            class="rounded p-2 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
+            aria-label="Toggle navigation"
+            :aria-expanded="drawerOpen"
+            @click="drawerOpen = !drawerOpen"
+          >
+            <span
+              class="text-lg leading-none"
+              aria-hidden="true"
+            >&#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)]">
+              KestrelOS
+            </h1>
+            <p class="text-xs uppercase tracking-widest text-kestrel-muted">
+              &gt; Tactical Operations Center — OSINT Feeds
+            </p>
+          </div>
+          <div class="flex items-center gap-2">
+            <template v-if="user">
+              <span class="text-xs text-kestrel-muted">{{ user.identifier }}</span>
+              <button
+                type="button"
+                class="rounded px-2 py-1 text-xs text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-accent"
+                @click="onLogout"
+              >
+                Logout
+              </button>
+            </template>
+            <NuxtLink
+              v-else
+              to="/login"
+              class="rounded px-2 py-1 text-xs text-kestrel-muted hover:bg-kestrel-border hover:text-kestrel-accent"
+            >
+              Sign in
+            </NuxtLink>
+          </div>
+        </header>
+        <main class="min-h-0 flex-1">
+          <slot />
+        </main>
+      </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+const drawerOpen = ref(true)
+const { user, refresh } = useUser()
+const route = useRoute()
+
+async function onLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await refresh()
+  await navigateTo('/')
+}
+watch(() => route.path, () => {
+  drawerOpen.value = false
+})
+</script>

app/pages/account.vue

@@ -1,59 +1,15 @@
 <template>
   <div class="p-6">
-    <h2 class="kestrel-page-heading mb-4">
+    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
       Account
     </h2>
 
-    <section
+    <!-- Profile -->
-      v-if="user"
-      class="mb-8"
-    >
-      <h3 class="kestrel-section-label">
-        Profile photo
-      </h3>
-      <div class="kestrel-card flex items-center gap-4 p-4">
-        <div class="flex h-16 w-16 shrink-0 overflow-hidden rounded-full border border-kestrel-border bg-kestrel-border">
-          <img
-            v-if="user.avatar_url"
-            :src="`${user.avatar_url}${avatarBust ? `?t=${avatarBust}` : ''}`"
-            alt=""
-            class="h-full w-full object-cover"
-          >
-          <span
-            v-else
-            class="flex h-full w-full items-center justify-center text-lg font-medium text-kestrel-text"
-          >
-            {{ accountInitials }}
-          </span>
-        </div>
-        <div class="flex flex-wrap gap-2">
-          <label class="kestrel-btn-secondary cursor-pointer">
-            <input
-              type="file"
-              accept="image/jpeg,image/png"
-              class="sr-only"
-              :disabled="avatarLoading"
-              @change="onAvatarFileChange"
-            >
-            {{ avatarLoading ? 'Uploading…' : 'Upload' }}
-          </label>
-          <button
-            type="button"
-            class="kestrel-btn-secondary disabled:opacity-50"
-            :disabled="avatarLoading || !user.avatar_url"
-            @click="onRemoveAvatar"
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    </section>
-
     <section class="mb-8">
-      <h3 class="kestrel-section-label">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
         Profile
       </h3>
-      <div class="kestrel-card p-4">
+      <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)]">
         <template v-if="user">
           <dl class="space-y-2 text-sm">
             <div>
@@ -94,79 +50,15 @@
       </div>
     </section>
 
-    <section
+    <!-- Change password (local only) -->
-      v-if="user"
-      class="mb-8"
-    >
-      <h3 class="kestrel-section-label">
-        ATAK / device password
-      </h3>
-      <div class="kestrel-card p-4">
-        <p class="mb-3 text-sm text-kestrel-muted">
-          {{ user.auth_provider === 'oidc' ? 'Set a password to use when connecting from ATAK (check "Use Authentication" and enter your KestrelOS username and this password).' : 'Optionally set a separate password for ATAK; otherwise use your login password.' }}
-        </p>
-        <p
-          v-if="cotPasswordSuccess"
-          class="mb-3 text-sm text-green-400"
-        >
-          ATAK password saved.
-        </p>
-        <p
-          v-if="cotPasswordError"
-          class="mb-3 text-sm text-red-400"
-        >
-          {{ cotPasswordError }}
-        </p>
-        <form
-          class="space-y-3"
-          @submit.prevent="onSetCotPassword"
-        >
-          <div>
-            <label
-              for="account-cot-password"
-              class="kestrel-label"
-            >ATAK password</label>
-            <input
-              id="account-cot-password"
-              v-model="cotPassword"
-              type="password"
-              autocomplete="new-password"
-              class="kestrel-input"
-              :placeholder="user.auth_provider === 'oidc' ? 'Set password for ATAK' : 'Optional'"
-            >
-          </div>
-          <div>
-            <label
-              for="account-cot-password-confirm"
-              class="kestrel-label"
-            >Confirm ATAK password</label>
-            <input
-              id="account-cot-password-confirm"
-              v-model="cotPasswordConfirm"
-              type="password"
-              autocomplete="new-password"
-              class="kestrel-input"
-            >
-          </div>
-          <button
-            type="submit"
-            class="rounded bg-kestrel-accent px-4 py-2 text-sm font-medium text-kestrel-bg transition-opacity hover:opacity-90 disabled:opacity-50"
-            :disabled="cotPasswordLoading"
-          >
-            {{ cotPasswordLoading ? 'Saving…' : 'Save ATAK password' }}
-          </button>
-        </form>
-      </div>
-    </section>
-
     <section
       v-if="user?.auth_provider === 'local'"
       class="mb-8"
     >
-      <h3 class="kestrel-section-label">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
         Change password
       </h3>
-      <div class="kestrel-card p-4">
+      <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)]">
         <p
           v-if="passwordSuccess"
           class="mb-3 text-sm text-green-400"
@@ -186,40 +78,46 @@
           <div>
             <label
               for="account-current-password"
-              class="kestrel-label"
+              class="mb-1 block text-xs text-kestrel-muted"
-            >Current password</label>
+            >
+              Current password
+            </label>
             <input
               id="account-current-password"
               v-model="currentPassword"
               type="password"
               autocomplete="current-password"
-              class="kestrel-input"
+              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"
             >
           </div>
           <div>
             <label
               for="account-new-password"
-              class="kestrel-label"
+              class="mb-1 block text-xs text-kestrel-muted"
-            >New password</label>
+            >
+              New password
+            </label>
             <input
               id="account-new-password"
               v-model="newPassword"
               type="password"
               autocomplete="new-password"
-              class="kestrel-input"
+              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"
             >
           </div>
           <div>
             <label
               for="account-confirm-password"
-              class="kestrel-label"
+              class="mb-1 block text-xs text-kestrel-muted"
-            >Confirm new password</label>
+            >
+              Confirm new password
+            </label>
             <input
               id="account-confirm-password"
               v-model="confirmPassword"
               type="password"
               autocomplete="new-password"
-              class="kestrel-input"
+              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"
             >
           </div>
           <button
@@ -236,60 +134,14 @@
 </template>
 
 <script setup>
-const { user, refresh } = useUser()
+const { user } = useUser()
 
-const avatarBust = ref(0)
-const avatarLoading = ref(false)
 const currentPassword = ref('')
 const newPassword = ref('')
 const confirmPassword = ref('')
 const passwordLoading = ref(false)
 const passwordSuccess = ref(false)
 const passwordError = ref('')
-const cotPassword = ref('')
-const cotPasswordConfirm = ref('')
-const cotPasswordLoading = ref(false)
-const cotPasswordSuccess = ref(false)
-const cotPasswordError = ref('')
-
-const accountInitials = computed(() => {
-  const id = user.value?.identifier ?? ''
-  const parts = id.trim().split(/\s+/)
-  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase()
-  return id.slice(0, 2).toUpperCase() || '?'
-})
-
-async function onAvatarFileChange(e) {
-  const file = e.target.files?.[0]
-  if (!file) return
-  avatarLoading.value = true
-  try {
-    const form = new FormData()
-    form.append('avatar', file, file.name)
-    await $fetch('/api/me/avatar', { method: 'PUT', body: form, credentials: 'include' })
-    avatarBust.value = Date.now()
-    await refresh()
-  }
-  catch {
-    // Error surfaced by refresh or network
-  }
-  finally {
-    avatarLoading.value = false
-    e.target.value = ''
-  }
-}
-
-async function onRemoveAvatar() {
-  avatarLoading.value = true
-  try {
-    await $fetch('/api/me/avatar', { method: 'DELETE', credentials: 'include' })
-    avatarBust.value = Date.now()
-    await refresh()
-  }
-  finally {
-    avatarLoading.value = false
-  }
-}
 
 async function onChangePassword() {
   passwordError.value = ''
@@ -324,34 +176,4 @@ async function onChangePassword() {
     passwordLoading.value = false
   }
 }
-
-async function onSetCotPassword() {
-  cotPasswordError.value = ''
-  cotPasswordSuccess.value = false
-  if (cotPassword.value !== cotPasswordConfirm.value) {
-    cotPasswordError.value = 'Password and confirmation do not match.'
-    return
-  }
-  if (cotPassword.value.length < 1) {
-    cotPasswordError.value = 'Password cannot be empty.'
-    return
-  }
-  cotPasswordLoading.value = true
-  try {
-    await $fetch('/api/me/cot-password', {
-      method: 'PUT',
-      body: { password: cotPassword.value },
-      credentials: 'include',
-    })
-    cotPassword.value = ''
-    cotPasswordConfirm.value = ''
-    cotPasswordSuccess.value = true
-  }
-  catch (e) {
-    cotPasswordError.value = e.data?.message ?? e.message ?? 'Failed to save ATAK password.'
-  }
-  finally {
-    cotPasswordLoading.value = false
-  }
-}
 </script>

app/pages/cameras.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-6">
-    <h2 class="kestrel-page-heading mb-4">
+    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
       Cameras
     </h2>
     <p class="mb-4 text-sm text-kestrel-muted">
@@ -80,8 +80,6 @@
 <script setup>
 definePageMeta({ layout: 'default' })
 
-const { cameras, liveSessions } = useCameras()
+const { cameras } = useCameras()
 const selectedCamera = ref(null)
-
-useAutoCloseLiveSession(selectedCamera, liveSessions)
 </script>

app/pages/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex h-full w-full flex-col md:flex-row">
+  <div class="flex h-[calc(100vh-5rem)] w-full flex-col md:flex-row">
-    <div class="relative min-h-0 flex-1">
+    <div class="relative h-2/3 w-full md:h-full md:flex-1">
       <ClientOnly>
         <KestrelMap
+          :feeds="[]"
           :devices="devices ?? []"
           :pois="pois ?? []"
           :live-sessions="liveSessions ?? []"
-          :cot-entities="cotEntities ?? []"
           :can-edit-pois="canEditPois"
           @select="selectedCamera = $event"
           @select-live="onSelectLive($event)"
@@ -23,14 +23,13 @@
 </template>
 
 <script setup>
-const { devices, liveSessions, cotEntities } = useCameras()
+const { devices, liveSessions } = useCameras()
 const { data: pois, refresh: refreshPois } = usePois()
 const { canEditPois } = useUser()
 const selectedCamera = ref(null)
 
 function onSelectLive(session) {
-  selectedCamera.value = (liveSessions.value ?? []).find(s => s.id === session?.id) ?? session
+  const latest = (liveSessions.value || []).find(s => s.id === session?.id)
+  selectedCamera.value = latest ?? session
 }
-
-useAutoCloseLiveSession(selectedCamera, liveSessions)
 </script>

app/pages/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex min-h-[60vh] items-center justify-center p-6">
-    <div class="kestrel-card w-full max-w-sm 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="kestrel-section-heading mb-4">
+      <h2 class="mb-4 text-lg font-semibold text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
         Sign in
       </h2>
       <p
@@ -29,28 +29,28 @@
         <div class="mb-3">
           <label
             for="login-identifier"
-            class="kestrel-label"
+            class="mb-1 block text-xs text-kestrel-muted"
           >Email or username</label>
           <input
             id="login-identifier"
             v-model="identifier"
             type="text"
             autocomplete="username"
-            class="kestrel-input"
+            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"
             required
           >
         </div>
         <div class="mb-4">
           <label
             for="login-password"
-            class="kestrel-label"
+            class="mb-1 block text-xs text-kestrel-muted"
           >Password</label>
           <input
             id="login-password"
             v-model="password"
             type="password"
             autocomplete="current-password"
-            class="kestrel-input"
+            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"
             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(() => AUTH_CONFIG_DEFAULT),
+  () => $fetch('/api/auth/config').catch(() => ({ oidc: { enabled: false, label: '' } })),
   { default: () => null },
 )
 const showDivider = computed(() => !!authConfig.value?.oidc?.enabled)
 const oidcAuthorizeUrl = computed(() => {
-  const r = redirect.value
+  const base = '/api/auth/oidc/authorize'
-  return `/api/auth/oidc/authorize${r && r !== '/' ? `?redirect=${encodeURIComponent(r)}` : ''}`
+  const q = redirect.value && redirect.value !== '/' ? `?redirect=${encodeURIComponent(redirect.value)}` : ''
+  return base + q
 })
 
 const identifier = ref('')

app/pages/members.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-6">
-    <h2 class="kestrel-page-heading mb-2">
+    <h2 class="mb-2 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
       Members
     </h2>
     <p
@@ -10,7 +10,7 @@
       Sign in to view members.
     </p>
     <p
-      v-else-if="!canEditPois"
+      v-else-if="!canViewMembers"
       class="text-sm text-kestrel-muted"
     >
       You don't have access to the members list.
@@ -34,51 +34,371 @@
           Add user
         </button>
       </div>
-      <MembersTable
+      <div class="overflow-x-auto rounded border border-kestrel-border">
-        :users="users"
+        <table class="w-full text-left text-sm">
-        :role-by-user-id="roleByUserId"
+          <thead>
-        :role-options="roleOptions"
+            <tr class="border-b border-kestrel-border bg-kestrel-surface-hover">
-        :is-admin="isAdmin"
+              <th class="px-4 py-2 font-medium text-kestrel-text">
-        :current-user-id="user?.id ?? null"
+                Identifier
-        :open-role-dropdown-id="openRoleDropdownId"
+              </th>
-        @toggle-role-dropdown="toggleRoleDropdown"
+              <th class="px-4 py-2 font-medium text-kestrel-text">
-        @close-role-dropdown="openRoleDropdownId = null"
+                Auth
-        @select-role="selectRole"
+              </th>
-        @save-role="saveRole"
+              <th class="px-4 py-2 font-medium text-kestrel-text">
-        @edit-user="openEditUser"
+                Role
-        @delete-confirm="openDeleteConfirm"
+              </th>
-      />
+              <th
+                v-if="isAdmin"
+                class="px-4 py-2 font-medium text-kestrel-text"
+              >
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="u in users"
+              :key="u.id"
+              class="border-b border-kestrel-border"
+            >
+              <td class="px-4 py-2 text-kestrel-text">
+                {{ u.identifier }}
+              </td>
+              <td class="px-4 py-2">
+                <span
+                  class="rounded px-1.5 py-0.5 text-xs text-kestrel-muted"
+                  :class="u.auth_provider === 'oidc' ? 'bg-kestrel-surface' : ''"
+                >
+                  {{ u.auth_provider === 'oidc' ? 'OIDC' : 'Local' }}
+                </span>
+              </td>
+              <td class="px-4 py-2">
+                <div
+                  v-if="isAdmin"
+                  :ref="el => setDropdownWrapRef(u.id, el)"
+                  class="relative inline-block"
+                >
+                  <button
+                    type="button"
+                    class="flex min-w-[6rem] items-center justify-between gap-2 rounded border border-kestrel-border bg-kestrel-bg px-2 py-1 text-left text-sm text-kestrel-text shadow-sm transition-colors hover:border-kestrel-accent/50 hover:bg-kestrel-surface"
+                    :aria-expanded="openRoleDropdownId === u.id"
+                    :aria-haspopup="true"
+                    aria-label="Change role"
+                    @click.stop="toggleRoleDropdown(u.id)"
+                  >
+                    <span>{{ roleByUserId[u.id] ?? u.role }}</span>
+                    <span
+                      class="text-kestrel-muted transition-transform"
+                      :class="openRoleDropdownId === u.id && 'rotate-180'"
+                    >
+                      ▾
+                    </span>
+                  </button>
+                </div>
+                <span
+                  v-else
+                  class="text-kestrel-muted"
+                >{{ u.role }}</span>
+              </td>
+              <td
+                v-if="isAdmin"
+                class="px-4 py-2"
+              >
+                <div class="flex flex-wrap items-center gap-2">
+                  <button
+                    v-if="roleByUserId[u.id] !== u.role"
+                    type="button"
+                    class="rounded border border-kestrel-accent px-2 py-1 text-xs text-kestrel-accent hover:bg-kestrel-accent-dim"
+                    @click="saveRole(u.id)"
+                  >
+                    Save role
+                  </button>
+                  <template v-if="u.auth_provider !== 'oidc'">
+                    <button
+                      type="button"
+                      class="rounded border border-kestrel-border px-2 py-1 text-xs text-kestrel-text hover:bg-kestrel-surface"
+                      @click="openEditUser(u)"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      v-if="u.id !== user?.id"
+                      type="button"
+                      class="rounded border border-red-500/60 px-2 py-1 text-xs text-red-400 hover:bg-red-500/10"
+                      @click="openDeleteConfirm(u)"
+                    >
+                      Remove
+                    </button>
+                  </template>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Teleport to="body">
+        <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-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)]"
+            :style="{
+              top: `${dropdownPlacement.top}px`,
+              left: `${dropdownPlacement.left}px`,
+              minWidth: `${dropdownPlacement.minWidth}px`,
+            }"
+          >
+            <button
+              v-for="role in roleOptions"
+              :key="role"
+              type="button"
+              role="menuitem"
+              class="block w-full px-3 py-1.5 text-left text-sm transition-colors"
+              :class="roleByUserId[openRoleDropdownId] === role
+                ? 'bg-kestrel-accent-dim text-kestrel-accent'
+                : 'text-kestrel-text hover:bg-kestrel-border hover:text-kestrel-text'"
+              @click.stop="selectRole(openRoleDropdownId, role)"
+            >
+              {{ role }}
+            </button>
+          </div>
+        </Transition>
+      </Teleport>
       <!-- Add user modal -->
-      <AddUserModal
+      <Teleport to="body">
-        :show="addUserModalOpen"
+        <div
-        :submit-error="createError"
+          v-if="addUserModalOpen"
-        @close="closeAddUserModal"
+          class="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4"
-        @submit="onAddUserSubmit"
+          role="dialog"
-      />
+          aria-modal="true"
-      <DeleteUserConfirmModal
+          aria-labelledby="add-user-title"
-        :user="deleteConfirmUser"
+          @click.self="closeAddUserModal"
-        @close="deleteConfirmUser = null"
+        >
-        @confirm="confirmDeleteUser"
+          <div
-      />
+            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
-      <EditUserModal
+            @click.stop
-        :user="editUserModal"
+          >
-        :submit-error="editError"
+            <h3
-        @close="editUserModal = null"
+              id="add-user-title"
-        @submit="onEditUserSubmit"
+              class="mb-3 text-sm font-medium text-kestrel-text"
-      />
+            >
+              Add user
+            </h3>
+            <form @submit.prevent="submitAddUser">
+              <div class="mb-3 flex flex-col gap-1">
+                <label
+                  for="add-identifier"
+                  class="text-xs text-kestrel-muted"
+                >Username</label>
+                <input
+                  id="add-identifier"
+                  v-model="newUser.identifier"
+                  type="text"
+                  required
+                  autocomplete="username"
+                  class="rounded border border-kestrel-border bg-kestrel-bg px-2 py-1.5 text-sm text-kestrel-text"
+                  placeholder="username"
+                >
+              </div>
+              <div class="mb-3 flex flex-col gap-1">
+                <label
+                  for="add-password"
+                  class="text-xs text-kestrel-muted"
+                >Password</label>
+                <input
+                  id="add-password"
+                  v-model="newUser.password"
+                  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"
+                  placeholder="••••••••"
+                >
+              </div>
+              <div class="mb-4 flex flex-col gap-1">
+                <label
+                  for="add-role"
+                  class="text-xs text-kestrel-muted"
+                >Role</label>
+                <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"
+                >
+                  <option value="member">
+                    member
+                  </option>
+                  <option value="leader">
+                    leader
+                  </option>
+                  <option value="admin">
+                    admin
+                  </option>
+                </select>
+              </div>
+              <p
+                v-if="createError"
+                class="mb-2 text-xs text-red-400"
+              >
+                {{ createError }}
+              </p>
+              <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"
+                  @click="closeAddUserModal"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="rounded border border-kestrel-accent px-3 py-1.5 text-sm text-kestrel-accent hover:bg-kestrel-accent-dim"
+                >
+                  Add user
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Teleport>
+      <!-- Delete user confirmation modal -->
+      <Teleport to="body">
+        <div
+          v-if="deleteConfirmUser"
+          class="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="delete-user-title"
+          @click.self="deleteConfirmUser = null"
+        >
+          <div
+            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
+            @click.stop
+          >
+            <h3
+              id="delete-user-title"
+              class="mb-2 text-sm font-medium text-kestrel-text"
+            >
+              Delete user?
+            </h3>
+            <p class="mb-4 text-sm text-kestrel-muted">
+              Are you sure you want to delete <strong class="text-kestrel-text">{{ deleteConfirmUser?.identifier }}</strong>? They will not be able to sign in again.
+            </p>
+            <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"
+                @click="deleteConfirmUser = null"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                class="rounded border border-red-500/60 bg-red-500/10 px-3 py-1.5 text-sm text-red-400 hover:bg-red-500/20"
+                @click="confirmDeleteUser"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+      <Teleport to="body">
+        <div
+          v-if="editUserModal"
+          class="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4"
+          @click.self="editUserModal = null"
+        >
+          <div
+            class="w-full max-w-sm rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="edit-user-title"
+          >
+            <h3
+              id="edit-user-title"
+              class="mb-3 text-sm font-medium text-kestrel-text"
+            >
+              Edit local user
+            </h3>
+            <form @submit.prevent="submitEditUser">
+              <div class="mb-3 flex flex-col gap-1">
+                <label
+                  for="edit-identifier"
+                  class="text-xs text-kestrel-muted"
+                >Identifier</label>
+                <input
+                  id="edit-identifier"
+                  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"
+                >
+              </div>
+              <div class="mb-4 flex flex-col gap-1">
+                <label
+                  for="edit-password"
+                  class="text-xs text-kestrel-muted"
+                >New password (leave blank to keep)</label>
+                <input
+                  id="edit-password"
+                  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"
+                  placeholder="••••••••"
+                >
+                <p class="mt-0.5 text-xs text-kestrel-muted">
+                  If you change your password, use the new one next time you sign in.
+                </p>
+              </div>
+              <p
+                v-if="editError"
+                class="mb-2 text-xs text-red-400"
+              >
+                {{ editError }}
+              </p>
+              <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"
+                  @click="editUserModal = null"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="rounded border border-kestrel-accent px-3 py-1.5 text-sm text-kestrel-accent hover:bg-kestrel-accent-dim"
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Teleport>
     </template>
   </div>
 </template>
 
 <script setup>
-const { user, isAdmin, canEditPois, refresh: refreshUser } = useUser()
+const { user, isAdmin, refresh: refreshUser } = useUser()
+const canViewMembers = computed(() => user.value?.role === 'admin' || user.value?.role === 'leader')
 
 const { data: usersData, refresh: refreshUsers } = useAsyncData(
   'users',
   () => $fetch('/api/users').catch(() => []),
   { default: () => [] },
 )
-const users = computed(() => Object.freeze([...(usersData.value ?? [])]))
+const users = computed(() => (Array.isArray(usersData.value) ? usersData.value : []))
 
 const roleOptions = ['admin', 'leader', 'member']
 const pendingRoleUpdates = ref({})
@@ -87,26 +407,80 @@ const roleByUserId = computed(() => {
   return { ...base, ...pendingRoleUpdates.value }
 })
 const openRoleDropdownId = ref(null)
+const dropdownWrapRefs = ref({})
+const dropdownPlacement = ref(null)
+const dropdownMenuRef = ref(null)
 
 const addUserModalOpen = ref(false)
+const newUser = ref({ identifier: '', password: '', role: 'member' })
 const createError = ref('')
 const editUserModal = ref(null)
+const editForm = ref({ identifier: '', password: '' })
 const editError = ref('')
 const deleteConfirmUser = ref(null)
 
-watch(user, () => {
+function setDropdownWrapRef(userId, el) {
-  if (canEditPois.value) refreshUsers()
+  if (el) dropdownWrapRefs.value[userId] = el
+  else {
+    dropdownWrapRefs.value = Object.fromEntries(
+      Object.entries(dropdownWrapRefs.value).filter(([k]) => k !== userId),
+    )
+  }
+}
+
+watch(user, (u) => {
+  if (u?.role === 'admin' || u?.role === 'leader') refreshUsers()
 }, { immediate: true })
 
 function toggleRoleDropdown(userId) {
-  openRoleDropdownId.value = openRoleDropdownId.value === userId ? null : userId
+  if (openRoleDropdownId.value === userId) {
+    openRoleDropdownId.value = null
+    dropdownPlacement.value = null
+    return
+  }
+  openRoleDropdownId.value = userId
+  nextTick(() => {
+    const wrap = dropdownWrapRefs.value[userId]
+    if (wrap) {
+      const rect = wrap.getBoundingClientRect()
+      dropdownPlacement.value = {
+        top: rect.bottom + 4,
+        left: rect.left,
+        minWidth: Math.max(rect.width, 96),
+      }
+    }
+    else {
+      dropdownPlacement.value = { top: 0, left: 0, minWidth: 96 }
+    }
+  })
 }
 
 function selectRole(userId, role) {
   pendingRoleUpdates.value = { ...pendingRoleUpdates.value, [userId]: role }
   openRoleDropdownId.value = null
+  dropdownPlacement.value = null
 }
 
+function onDocumentClick(e) {
+  const openId = openRoleDropdownId.value
+  if (openId == null) return
+  const wrap = dropdownWrapRefs.value[openId]
+  const menu = dropdownMenuRef.value
+  const inTrigger = wrap && wrap.contains(e.target)
+  const inMenu = menu && menu.contains(e.target)
+  if (!inTrigger && !inMenu) {
+    openRoleDropdownId.value = null
+    dropdownPlacement.value = null
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+})
+
 async function saveRole(id) {
   const role = roleByUserId.value[id]
   if (!role) return
@@ -124,6 +498,7 @@ async function saveRole(id) {
 
 function openAddUserModal() {
   addUserModalOpen.value = true
+  newUser.value = { identifier: '', password: '', role: 'member' }
   createError.value = ''
 }
 
@@ -132,15 +507,15 @@ function closeAddUserModal() {
   createError.value = ''
 }
 
-async function onAddUserSubmit(payload) {
+async function submitAddUser() {
   createError.value = ''
   try {
     await $fetch('/api/users', {
       method: 'POST',
       body: {
-        identifier: payload.identifier,
+        identifier: newUser.value.identifier.trim(),
-        password: payload.password,
+        password: newUser.value.password,
-        role: payload.role,
+        role: newUser.value.role,
       },
     })
     closeAddUserModal()
@@ -153,19 +528,21 @@ async function onAddUserSubmit(payload) {
 
 function openEditUser(u) {
   editUserModal.value = u
+  editForm.value = { identifier: u.identifier, password: '' }
   editError.value = ''
 }
 
-async function onEditUserSubmit(payload) {
+async function submitEditUser() {
-  const u = editUserModal.value
+  if (!editUserModal.value) return
-  if (!u) return
   editError.value = ''
-  const body = { identifier: payload.identifier.trim() }
+  const id = editUserModal.value.id
-  if (payload.password) body.password = payload.password
+  const body = { identifier: editForm.value.identifier.trim() }
+  if (editForm.value.password) body.password = editForm.value.password
   try {
-    await $fetch(`/api/users/${u.id}`, { method: 'PATCH', body })
+    await $fetch(`/api/users/${id}`, { method: 'PATCH', body })
     editUserModal.value = null
     await refreshUsers()
+    // If you edited yourself, refresh current user so the header/nav shows the new identifier
     await refreshUser()
   }
   catch (e) {

app/pages/poi.vue

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

app/pages/settings.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="p-6">
-    <h2 class="kestrel-page-heading mb-4">
+    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
       Settings
     </h2>
 
+    <!-- Map & offline -->
     <section class="mb-8">
-      <h3 class="kestrel-section-label">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
         Map & offline
       </h3>
-      <div class="kestrel-card p-4">
+      <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)]">
         <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>
@@ -27,7 +28,7 @@
         </p>
         <button
           type="button"
-          class="kestrel-btn-secondary disabled:opacity-50"
+          class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border disabled:opacity-50"
           :disabled="tilesLoading"
           @click="onClearTiles"
         >
@@ -36,72 +37,12 @@
       </div>
     </section>
 
-    <section class="mb-8">
+    <!-- About -->
-      <h3 class="kestrel-section-label">
-        TAK Server (ATAK / iTAK)
-      </h3>
-      <div class="kestrel-card p-4">
-        <p class="mb-3 text-sm text-kestrel-text">
-          Scan this QR code with iTAK (or ATAK) to add this KestrelOS server. You'll be prompted for your KestrelOS username and password after scanning.
-        </p>
-        <div
-          v-if="takQrDataUrl"
-          class="inline-block rounded-lg border border-kestrel-border bg-white p-3"
-        >
-          <img
-            :src="takQrDataUrl"
-            alt="TAK Server QR code"
-            class="h-48 w-48"
-            width="192"
-            height="192"
-          >
-        </div>
-        <p
-          v-else-if="takQrError"
-          class="text-sm text-red-400"
-        >
-          {{ takQrError }}
-        </p>
-        <p
-          v-else
-          class="text-sm text-kestrel-muted"
-        >
-          Loading QR code…
-        </p>
-        <p
-          v-if="takServerString"
-          class="mt-3 text-xs text-kestrel-muted break-all"
-        >
-          {{ takServerString }}
-        </p>
-        <template v-if="cotConfig?.ssl">
-          <p class="mt-3 text-sm text-kestrel-text">
-            This server uses a self-signed certificate. iTAK will not connect until it trusts the cert.
-          </p>
-          <ol class="mt-2 list-decimal list-inside space-y-1 text-sm text-kestrel-text">
-            <li>
-              <strong>Upload server package:</strong> Download below, then in iTAK tap Add Server (+) → Upload server package and select the zip; enter KestrelOS username and password when prompted.
-            </li>
-            <li>
-              <strong>Plain TCP:</strong> Remove or rename <code class="bg-kestrel-surface px-1 rounded">.dev-certs</code>, restart, then in iTAK add the server with SSL disabled.
-            </li>
-          </ol>
-          <a
-            href="/api/cot/server-package"
-            download="kestrelos-itak-server-package.zip"
-            class="kestrel-btn-secondary mt-3 inline-block"
-          >
-            Download server package (zip)
-          </a>
-        </template>
-      </div>
-    </section>
-
     <section>
-      <h3 class="kestrel-section-label">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
         About
       </h3>
-      <div class="kestrel-card p-4">
+      <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)]">
         <p class="font-medium text-kestrel-text">
           KestrelOS
         </p>
@@ -128,11 +69,6 @@ const tilesMessage = ref('')
 const tilesMessageSuccess = ref(false)
 const tilesLoading = ref(false)
 
-const cotConfig = ref(null)
-const takQrDataUrl = ref('')
-const takQrError = ref('')
-const takServerString = ref('')
-
 async function loadTilesStored() {
   if (typeof window === 'undefined') return
   try {
@@ -172,26 +108,7 @@ async function onClearTiles() {
   }
 }
 
-async function loadTakQr() {
-  if (typeof window === 'undefined') return
-  try {
-    const res = await $fetch('/api/cot/config')
-    cotConfig.value = res
-    const hostname = window.location.hostname
-    const port = res?.port ?? 8089
-    const protocol = res?.ssl ? 'ssl' : 'tcp'
-    const str = `KestrelOS,${hostname},${port},${protocol}`
-    takServerString.value = str
-    const QRCode = (await import('qrcode')).default
-    takQrDataUrl.value = await QRCode.toDataURL(str, { width: 192, margin: 1 })
-  }
-  catch (e) {
-    takQrError.value = e?.data?.error ?? e?.message ?? 'Could not load TAK server config.'
-  }
-}
-
 onMounted(() => {
   loadTilesStored()
-  loadTakQr()
 })
 </script>

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="kestrel-card-modal w-full max-w-md 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="kestrel-section-heading mb-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)]">
         Share live (camera + location)
       </h2>
       <p class="mb-4 text-sm text-kestrel-muted">
@@ -39,7 +39,7 @@
             Wrong host: server sees <strong>{{ webrtcFailureReason.wrongHost.serverHostname }}</strong> but you opened this page at <strong>{{ webrtcFailureReason.wrongHost.clientHostname }}</strong>. Use the same URL on phone and server, or set MEDIASOUP_ANNOUNCED_IP.
           </p>
           <ul class="mt-2 list-inside list-disc space-y-0.5 text-kestrel-muted">
-            <li><strong>Firewall:</strong> Open UDP/TCP ports 40000-49999 on the server.</li>
+            <li><strong>Firewall:</strong> Open UDP/TCP ports 40000–49999 on the server.</li>
             <li><strong>Wrong host:</strong> Server must see the same address you use (see above or open /api/live/debug-request-host).</li>
             <li><strong>Restrictive NAT / cellular:</strong> A TURN server may be required (future enhancement).</li>
           </ul>
@@ -55,7 +55,7 @@
       <!-- Local preview -->
       <div
         v-if="stream && videoRef"
-        class="kestrel-video-frame mb-4"
+        class="relative mb-4 aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black"
       >
         <video
           ref="videoRef"
@@ -68,7 +68,7 @@
           v-if="sharing"
           class="absolute bottom-2 left-2 rounded bg-black/70 px-2 py-1 text-xs text-green-400"
         >
-          ● Live - you appear on the map
+          ● Live — you appear on the map
         </div>
       </div>
 
@@ -122,11 +122,11 @@ const starting = ref(false)
 const isSecureContext = typeof window !== 'undefined' && window.isSecureContext
 const webrtcState = ref('') // '', 'connecting', 'connected', 'failed'
 const webrtcFailureReason = ref(null) // { wrongHost: { serverHostname, clientHostname } | null }
-const locationWatchId = ref(null)
+let locationWatchId = null
-const locationIntervalId = ref(null)
+let locationIntervalId = null
-const device = ref(null)
+let device = null
-const sendTransport = ref(null)
+let sendTransport = null
-const producer = ref(null)
+let producer = null
 
 async function runFailureReasonCheck() {
   webrtcFailureReason.value = await getWebRTCFailureReason()
@@ -194,8 +194,8 @@ async function startSharing() {
       const rtpCapabilities = await $fetch(`/api/live/webrtc/router-rtp-capabilities?sessionId=${sessionId.value}`, {
         credentials: 'include',
       })
-      device.value = await createMediasoupDevice(rtpCapabilities)
+      device = await createMediasoupDevice(rtpCapabilities)
-      sendTransport.value = await createSendTransport(device.value, sessionId.value, {
+      sendTransport = await createSendTransport(device, sessionId.value, {
         onConnectSuccess: () => { webrtcState.value = 'connected' },
         onConnectFailure: () => {
           webrtcState.value = 'failed'
@@ -208,31 +208,31 @@ async function startSharing() {
       if (!videoTrack) {
         throw new Error('No video track available')
       }
-      producer.value = await sendTransport.value.produce({ track: videoTrack })
+      producer = await sendTransport.produce({ track: videoTrack })
       // Monitor producer events
-      producer.value.on('transportclose', () => {
+      producer.on('transportclose', () => {
         logWarn('share-live: Producer transport closed', {
-          producerId: producer.value.id,
+          producerId: producer.id,
-          producerPaused: producer.value.paused,
+          producerPaused: producer.paused,
-          producerClosed: producer.value.closed,
+          producerClosed: producer.closed,
         })
       })
-      producer.value.on('trackended', () => {
+      producer.on('trackended', () => {
         logWarn('share-live: Producer track ended', {
-          producerId: producer.value.id,
+          producerId: producer.id,
-          producerPaused: producer.value.paused,
+          producerPaused: producer.paused,
-          producerClosed: producer.value.closed,
+          producerClosed: producer.closed,
         })
       })
       // Monitor transport state (mediasoup-client does not pass a parameter; read from transport.connectionState)
-      sendTransport.value.on('connectionstatechange', () => {
+      sendTransport.on('connectionstatechange', () => {
-        const state = sendTransport.value.connectionState
+        const state = sendTransport.connectionState
         if (state === 'connected') webrtcState.value = 'connected'
         else if (state === 'failed' || state === 'disconnected' || state === 'closed') {
           logWarn('share-live: Send transport connection state changed', {
             state,
-            transportId: sendTransport.value.id,
+            transportId: sendTransport.id,
-            producerId: producer.value.id,
+            producerId: producer.id,
           })
           if (state === 'failed') {
             webrtcState.value = 'failed'
@@ -241,25 +241,25 @@ async function startSharing() {
         }
       })
       // Monitor track state
-      if (producer.value.track) {
+      if (producer.track) {
-        producer.value.track.addEventListener('ended', () => {
+        producer.track.addEventListener('ended', () => {
           logWarn('share-live: Producer track ended', {
-            producerId: producer.value.id,
+            producerId: producer.id,
-            trackId: producer.value.track.id,
+            trackId: producer.track.id,
-            trackReadyState: producer.value.track.readyState,
+            trackReadyState: producer.track.readyState,
-            trackEnabled: producer.value.track.enabled,
+            trackEnabled: producer.track.enabled,
-            trackMuted: producer.value.track.muted,
+            trackMuted: producer.track.muted,
           })
         })
-        producer.value.track.addEventListener('mute', () => {
+        producer.track.addEventListener('mute', () => {
           logWarn('share-live: Producer track muted', {
-            producerId: producer.value.id,
+            producerId: producer.id,
-            trackId: producer.value.track.id,
+            trackId: producer.track.id,
-            trackEnabled: producer.value.track.enabled,
+            trackEnabled: producer.track.enabled,
-            trackMuted: producer.value.track.muted,
+            trackMuted: producer.track.muted,
           })
         })
-        producer.value.track.addEventListener('unmute', () => {})
+        producer.track.addEventListener('unmute', () => {})
       }
       webrtcState.value = 'connected'
       setStatus('WebRTC connected. Requesting location…')
@@ -273,7 +273,7 @@ async function startSharing() {
       return
     }
 
-    // 5. Get location (continuous) - also requires HTTPS on mobile Safari
+    // 5. Get location (continuous) — also requires HTTPS on mobile Safari
     if (!navigator.geolocation) {
       setError('Geolocation not supported in this browser.')
       cleanup()
@@ -281,7 +281,7 @@ async function startSharing() {
     }
     try {
       await new Promise((resolve, reject) => {
-        locationWatchId.value = navigator.geolocation.watchPosition(
+        locationWatchId = navigator.geolocation.watchPosition(
           (pos) => {
             resolve(pos)
           },
@@ -332,9 +332,9 @@ async function startSharing() {
         }
         catch (e) {
           if (e?.statusCode === 404) {
-            if (locationIntervalId.value != null) {
+            if (locationIntervalId != null) {
-              clearInterval(locationIntervalId.value)
+              clearInterval(locationIntervalId)
-              locationIntervalId.value = null
+              locationIntervalId = null
             }
             sharing.value = false
             if (!locationUpdate404Logged) {
@@ -350,7 +350,7 @@ async function startSharing() {
     }
 
     await sendLocationUpdate()
-    locationIntervalId.value = setInterval(sendLocationUpdate, 2000)
+    locationIntervalId = setInterval(sendLocationUpdate, 2000)
   }
   catch (e) {
     starting.value = false
@@ -363,23 +363,23 @@ async function startSharing() {
 }
 
 function cleanup() {
-  if (locationWatchId.value != null && navigator.geolocation?.clearWatch) {
+  if (locationWatchId != null && navigator.geolocation?.clearWatch) {
-    navigator.geolocation.clearWatch(locationWatchId.value)
+    navigator.geolocation.clearWatch(locationWatchId)
   }
-  locationWatchId.value = null
+  locationWatchId = null
-  if (locationIntervalId.value != null) {
+  if (locationIntervalId != null) {
-    clearInterval(locationIntervalId.value)
+    clearInterval(locationIntervalId)
   }
-  locationIntervalId.value = null
+  locationIntervalId = null
-  if (producer.value) {
+  if (producer) {
-    producer.value.close()
+    producer.close()
-    producer.value = null
+    producer = null
   }
-  if (sendTransport.value) {
+  if (sendTransport) {
-    sendTransport.value.close()
+    sendTransport.close()
-    sendTransport.value = null
+    sendTransport = null
   }
-  device.value = null
+  device = null
   if (stream.value) {
     stream.value.getTracks().forEach(t => t.stop())
     stream.value = null

app/plugins/auth.client.js

@@ -1,4 +1,3 @@
-/** Wraps $fetch to redirect to /login on 401 for same-origin requests. */
 export default defineNuxtPlugin(() => {
   const route = useRoute()
   const baseFetch = globalThis.$fetch ?? $fetch
@@ -7,7 +6,8 @@ export default defineNuxtPlugin(() => {
       if (response?.status !== 401) return
       const url = typeof request === 'string' ? request : request?.url ?? ''
       if (!url.startsWith('/')) return
-      navigateTo({ path: '/login', query: { redirect: route.fullPath || '/' } }, { replace: true })
+      const redirect = (route.fullPath && route.fullPath !== '/' ? route.fullPath : '/')
+      navigateTo({ path: '/login', query: { redirect } }, { replace: true })
     },
   })
 })

app/utils/logger.js

@@ -1,30 +1,88 @@
-/** Client-side logger: sends to server, falls back to console. */
+/**
-const sessionId = ref(null)
+ * Client-side logger that sends logs to server for debugging.
-const userId = ref(null)
+ * Falls back to console if server logging fails.
+ */
 
-const CONSOLE_METHOD = Object.freeze({ error: 'error', warn: 'warn', info: 'log', debug: 'log' })
+let sessionId = null
+let userId = null
 
+/**
+ * Initialize logger with session/user context.
+ * @param {string} sessId
+ * @param {string} uid
+ */
 export function initLogger(sessId, uid) {
-  sessionId.value = sessId
+  sessionId = sessId
-  userId.value = uid
+  userId = uid
 }
 
-function sendToServer(level, message, data) {
+/**
-  setTimeout(() => {
+ * Send log to server (non-blocking).
-    $fetch('/api/log', {
+ * @param {string} level
-      method: 'POST',
+ * @param {string} message
-      body: { level, message, data, sessionId: sessionId.value, userId: userId.value, timestamp: new Date().toISOString() },
+ * @param {object} data
-      credentials: 'include',
+ */
-    }).catch(() => { /* server down - don't spam console */ })
+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
+    }
   }, 0)
 }
 
-function log(level, message, data) {
+/**
-  console[CONSOLE_METHOD[level]](`[${message}]`, data)
+ * Log at error level.
-  sendToServer(level, message, data)
+ * @param {string} message
+ * @param {object} data
+ */
+export function logError(message, data) {
+  console.error(`[${message}]`, data)
+  sendToServer('error', message, data)
 }
 
-export const logError = (message, data) => log('error', message, data)
+/**
-export const logWarn = (message, data) => log('warn', message, data)
+ * Log at warn level.
-export const logInfo = (message, data) => log('info', message, data)
+ * @param {string} message
-export const logDebug = (message, data) => log('debug', message, data)
+ * @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)
+}

docs/README.md

@@ -1,11 +0,0 @@
-# KestrelOS Documentation
-
-Tactical Operations Center (TOC) for OSINT feeds: map view, cameras/devices, live sharing, and ATAK/iTAK integration.
-
-## Quick Start
-
-1. [Installation](installation.md) - npm, Docker, or Helm
-2. [Authentication](auth.md) - First login (bootstrap admin or OIDC)
-3. [Map and cameras](map-and-cameras.md) - Add devices and view streams
-4. [ATAK and iTAK](atak-itak.md) - Connect TAK clients (port 8089)
-5. [Share live](live-streaming.md) - Stream from mobile device (HTTPS required)

docs/atak-itak.md

@@ -1,79 +0,0 @@
-# ATAK and iTAK
-
-KestrelOS acts as a **TAK Server**. ATAK (Android) and iTAK (iOS) connect on **port 8089** (CoT). Devices relay positions to each other and appear on the KestrelOS map.
-
-## Connection
-
-**Host:** KestrelOS hostname/IP  
-**Port:** `8089` (CoT)  
-**SSL:** Enable if server uses TLS (`.dev-certs/` or production cert)
-
-**Authentication:**
-- **Username:** KestrelOS identifier
-- **Password:** Login password (local) or ATAK password (OIDC; set in **Account**)
-
-## ATAK (Android)
-
-1. **Settings** → **Network** → **Connections** → Add **TAK Server**
-2. Set **Host** and **Port** (`8089`)
-3. Enable **Use Authentication**, enter username/password
-4. Save and connect
-
-## iTAK (iOS)
-
-**Option A - QR code (easiest):**
-1. KestrelOS **Settings** → **TAK Server** → Scan QR with iTAK
-2. Enter username/password when prompted
-
-**Option B - Manual:**
-1. **Settings** → **Network** → Add **TAK Server**
-2. Set **Host**, **Port** (`8089`), enable SSL if needed
-3. Enable **Use Authentication**, enter username/password
-4. Save and connect
-
-## Self-Signed Certificate (iTAK)
-
-If server uses self-signed cert (`.dev-certs/`):
-
-**Upload server package:**
-1. KestrelOS **Settings** → **TAK Server** → **Download server package (zip)**
-2. Transfer to iPhone (AirDrop, email, Safari)
-3. iTAK: **Settings** → **Network** → **Servers** → **+** → **Upload server package**
-4. Enter username/password
-
-**Or use plain TCP:**
-1. Stop KestrelOS, remove `.dev-certs/`, restart
-2. Add server with **SSL disabled**
-
-**ATAK (Android):** Download trust store from `https://your-server/api/cot/truststore`, import `.p12` (password: `kestrelos`), or use server package/plain TCP.
-
-## OIDC Users
-
-OIDC users must set an **ATAK password** first:
-1. Sign in with OIDC
-2. **Account** → **ATAK / device password** → set password
-3. Use KestrelOS username + ATAK password in TAK client
-
-## Configuration
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `COT_PORT` | `8089` | CoT server port |
-| `COT_TTL_MS` | `90000` | Device timeout (~90s) |
-| `COT_REQUIRE_AUTH` | `true` | Require authentication |
-| `COT_SSL_CERT` | `.dev-certs/cert.pem` | TLS cert path |
-| `COT_SSL_KEY` | `.dev-certs/key.pem` | TLS key path |
-
-## Troubleshooting
-
-**"Error authenticating" with no `[cot]` logs:**
-- Connection not reaching server (TLS handshake failed or firewall blocking)
-- Check server logs show `[cot] CoT server listening on 0.0.0.0:8089`
-- Verify port `8089` (not `3000`) and firewall allows it
-- For TLS: trust cert (server package) or use plain TCP
-
-**"Error authenticating" with `[cot]` logs:**
-- Username must be KestrelOS identifier
-- Password must match (local: login password; OIDC: ATAK password)
-
-**Devices not on map:** They appear only while sending updates; drop off after TTL (~90s).

docs/auth.md

@@ -1,39 +0,0 @@
-# Authentication
-
-KestrelOS supports **local login** (username/email + password) and optional **OIDC** (SSO). All users must sign in.
-
-## Local Login
-
-**First run:** On first start, KestrelOS creates an admin account:
-- If `BOOTSTRAP_EMAIL` and `BOOTSTRAP_PASSWORD` are set → that account is created
-- Otherwise → default admin (`admin`) with random password printed in terminal
-
-**Sign in:** Open `/login`, enter identifier and password. Change password or add users via **Members** (admin only).
-
-## OIDC (SSO)
-
-**Enable:** Set `OIDC_ISSUER`, `OIDC_CLIENT_ID`, `OIDC_CLIENT_SECRET`. Optional: `OIDC_LABEL`, `OIDC_REDIRECT_URI`, `OIDC_SCOPES`.
-
-**IdP setup:**
-1. Create OIDC client in your IdP (Keycloak, Auth0, etc.)
-2. Set redirect URI: `https://<your-host>/api/auth/oidc/callback`
-3. Copy Client ID and Secret to env vars
-
-**Sign up:** Users sign up at the IdP. First OIDC login in KestrelOS creates their account automatically.
-
-**Redirect URI:** Defaults to `{APP_URL}/api/auth/oidc/callback` (uses `NUXT_APP_URL`/`APP_URL` or falls back to `HOST`/`PORT`).
-
-## OIDC Users and ATAK/iTAK
-
-OIDC users don't have a KestrelOS password. To use ATAK/iTAK:
-1. Sign in with OIDC
-2. Go to **Account** → set **ATAK password**
-3. Use KestrelOS username + ATAK password in TAK client
-
-## Roles
-
-- **Admin** - Manage users, edit POIs, add/edit devices (API)
-- **Leader** - Edit POIs, add/edit devices (API)
-- **Member** - View map/cameras/POIs, use Share live
-
-Only admins can change roles (Members page).

docs/installation.md

@@ -1,61 +0,0 @@
-# Installation
-
-Run KestrelOS from source (npm), Docker, or Kubernetes (Helm).
-
-## npm (from source)
-
-```bash
-git clone <repository-url> kestrelos
-cd kestrelos
-npm install
-npm run dev
-```
-
-Open **http://localhost:3000**. First run creates `data/kestrelos.db` and bootstraps an admin (see [Authentication](auth.md)).
-
-**Production:**
-```bash
-npm run build
-npm run preview
-# or
-node .output/server/index.mjs
-```
-
-Set `HOST=0.0.0.0` and `PORT` for production.
-
-## Docker
-
-```bash
-docker build -t kestrelos:latest .
-docker run -p 3000:3000 -p 8089:8089 \
-  -v kestrelos-data:/app/data \
-  kestrelos:latest
-```
-
-Expose ports **3000** (web/API) and **8089** (CoT for ATAK/iTAK).
-
-## Helm (Kubernetes)
-
-**From registry:**
-```bash
-helm repo add keligrubb --username USER --password TOKEN \
-  https://git.keligrubb.com/api/packages/keligrubb/helm
-helm install kestrelos keligrubb/kestrelos
-```
-
-**From source:**
-```bash
-helm install kestrelos ./helm/kestrelos
-```
-
-Configure in `helm/kestrelos/values.yaml`. Health: `GET /health`, `/health/live`, `/health/ready`.
-
-## Environment Variables
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `HOST` | Nuxt default | Bind address (use `0.0.0.0` for all interfaces) |
-| `PORT` | `3000` | Web/API port |
-| `DB_PATH` | `data/kestrelos.db` | SQLite database path |
-
-See [Authentication](auth.md) for auth variables. See [ATAK and iTAK](atak-itak.md) for CoT options.

docs/live-streaming.md

@@ -1,44 +0,0 @@
-# Share Live
-
-Stream your phone's camera and location to KestrelOS. Appears as a **live session** on the map and in **Cameras**. Uses **WebRTC** (Mediasoup) and requires **HTTPS** on mobile.
-
-## Usage
-
-1. Open **Share live** (sidebar → **Share live** or `/share-live`)
-2. Tap **Start sharing**, allow camera/location permissions
-3. Device appears on map and in **Cameras**
-4. Tap **Stop sharing** to end
-
-**Permissions:** Admin/leader can start sharing. All users can view live sessions.
-
-## Requirements
-
-- **HTTPS** (browsers require secure context for camera/geolocation)
-- **Camera and location permissions**
-- **WebRTC ports:** UDP/TCP `40000-49999` open on server
-
-## Local Development
-
-**Generate self-signed cert:**
-```bash
-chmod +x scripts/gen-dev-cert.sh
-./scripts/gen-dev-cert.sh 192.168.1.123  # Your LAN IP
-npm run dev
-```
-
-**On phone:** Open `https://192.168.1.123:3000`, accept cert warning, sign in, use Share live.
-
-## WebRTC Configuration
-
-- Server auto-detects LAN IP for WebRTC
-- **Docker/multiple NICs:** Set `MEDIASOUP_ANNOUNCED_IP` to client-reachable IP/hostname
-- **"Wrong host" error:** Use same URL on phone/server, or set `MEDIASOUP_ANNOUNCED_IP`
-
-## Troubleshooting
-
-| Issue | Fix |
-|-------|-----|
-| "HTTPS required" | Use `https://` (not `http://`) |
-| "Media devices not available" | Ensure HTTPS and browser permissions |
-| "WebRTC: failed" / "Wrong host" | Set `MEDIASOUP_ANNOUNCED_IP`, open firewall ports `40000-49999` |
-| Stream not visible | Check server reachability and firewall |

docs/map-and-cameras.md

@@ -1,52 +0,0 @@
-# Map and Cameras
-
-KestrelOS shows a **map** with devices, POIs, live sessions (Share live), and ATAK/iTAK positions. Click markers or use **Cameras** page to view streams.
-
-## Map Layers
-
-- **Devices** - Fixed feeds (IPTV, ALPR, CCTV, NVR, etc.) added via API
-- **POIs** - Points of interest (admin/leader can edit)
-- **Live sessions** - Mobile devices streaming via Share live
-- **CoT (ATAK/iTAK)** - Amber markers for connected TAK devices (position only)
-
-## Cameras
-
-A **camera** is either:
-1. A **device** - Fixed feed with stream URL
-2. A **live session** - Mobile device streaming via Share live
-
-View via map markers or **Cameras** page (sidebar).
-
-## Device Types
-
-| device_type | Use case |
-|-------------|----------|
-| `alpr`, `nvr`, `doorbell`, `feed`, `traffic`, `ip`, `drone` | Labeling/filtering |
-
-**source_type:** `mjpeg` (MJPEG over HTTP) or `hls` (HLS `.m3u8` playlist)
-
-Stream URLs must be `http://` or `https://`.
-
-## API: Devices
-
-**Create:** `POST /api/devices` (admin/leader)
-```json
-{
-  "name": "Main gate ALPR",
-  "device_type": "alpr",
-  "lat": 37.7749,
-  "lng": -122.4194,
-  "stream_url": "https://alpr.example.com/stream.m3u8",
-  "source_type": "hls"
-}
-```
-
-**List:** `GET /api/devices`  
-**Update:** `PATCH /api/devices/:id`  
-**Delete:** `DELETE /api/devices/:id`
-
-**Cameras endpoint:** `GET /api/cameras` returns devices + live sessions + CoT entities.
-
-## POIs
-
-Admins/leaders add/edit from **POI** page (sidebar). POIs appear as map pins (reference only, no stream).

helm/kestrelos/Chart.yaml

@@ -2,5 +2,5 @@ apiVersion: v2
 name: kestrelos
 description: KestrelOS TOC for OSINT feeds - map, camera feeds, offline tiles
 type: application
-version: 1.0.1
+version: 0.1.0
-appVersion: "1.0.1"
+appVersion: "0.1.0"

helm/kestrelos/values.yaml

@@ -1,8 +1,8 @@
 replicaCount: 1
 
 image:
-  repository: git.keligrubb.com/keligrubb/kestrelos
+  repository: kestrelos
-  tag: 1.0.1
+  tag: latest
   pullPolicy: IfNotPresent
 
 service:

nuxt.config.js

@@ -27,17 +27,14 @@ export default defineNuxtConfig({
       ],
     },
   },
-  css: ['~/assets/css/main.css'],
   runtimeConfig: {
     public: {
       version: pkg.version ?? '',
     },
-    cotTtlMs: 90_000,
-    cotRequireAuth: true,
-    cotDebug: false,
   },
   devServer: {
     host: '0.0.0.0',
+    port: 3000,
     ...(useDevHttps
       ? { https: { key: devKey, cert: devCert } }
       : {}),

package-lock.json

@@ -1,33 +1,27 @@
 {
   "name": "kestrelos",
-  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kestrelos",
-      "version": "0.3.0",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
-        "fast-xml-parser": "^5.3.6",
         "hls.js": "^1.5.0",
-        "jszip": "^3.10.1",
         "leaflet": "^1.9.4",
         "leaflet.offline": "^3.2.0",
         "mediasoup": "^3.19.14",
         "mediasoup-client": "^3.18.6",
         "nuxt": "^4.0.0",
         "openid-client": "^6.8.2",
-        "qrcode": "^1.5.4",
         "sqlite3": "^5.1.7",
         "vue": "^3.4.0",
         "vue-router": "^4.4.0",
         "ws": "^8.18.0"
       },
       "devDependencies": {
-        "@iconify-json/tabler": "^1.2.26",
         "@nuxt/eslint": "^1.15.0",
         "@nuxt/test-utils": "^4.0.0",
         "@playwright/test": "^1.58.2",
@@ -1439,16 +1433,6 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@iconify-json/tabler": {
-      "version": "1.2.26",
-      "resolved": "https://registry.npmjs.org/@iconify-json/tabler/-/tabler-1.2.26.tgz",
-      "integrity": "sha512-92G+ZD70AZgeJf07JfQzH+isnai6DwPcMBuF/qL1F+xAxdXCJzGd3w2RmsRvOmB+w1ImmWEEDms50QivQIjd6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@iconify/types": "*"
-      }
-    },
     "node_modules/@iconify/collections": {
       "version": "1.0.649",
       "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.649.tgz",
@@ -6685,15 +6669,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -7436,15 +7411,6 @@
         }
       }
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -7604,12 +7570,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/dijkstrajs": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
-      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
-      "license": "MIT"
-    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -8782,24 +8742,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/fast-xml-parser": {
-      "version": "5.3.6",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.6.tgz",
-      "integrity": "sha512-QNI3sAvSvaOiaMl8FYU4trnEzCwiRr8XMWgAHzlrWpTSj+QaCSvOf1h82OEP1s4hiAXhnbXSyFWCf4ldZzZRVA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "strnum": "^2.1.2"
-      },
-      "bin": {
-        "fxparser": "src/cli/cli.js"
-      }
-    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -9758,12 +9700,6 @@
       "integrity": "sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==",
       "license": "MIT"
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "license": "MIT"
-    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -10450,48 +10386,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/jszip": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
-      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "license": "(MIT OR GPL-3.0-or-later)",
-      "dependencies": {
-        "lie": "~3.3.0",
-        "pako": "~1.0.2",
-        "readable-stream": "~2.3.6",
-        "setimmediate": "^1.0.5"
-      }
-    },
-    "node_modules/jszip/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "license": "MIT",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/jszip/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "license": "MIT"
-    },
-    "node_modules/jszip/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -10798,15 +10692,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lie": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
-      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -12610,15 +12495,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -12631,12 +12507,6 @@
       "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
       "license": "MIT"
     },
-    "node_modules/pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "license": "(MIT AND Zlib)"
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -12686,6 +12556,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12847,15 +12718,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/portfinder": {
       "version": "1.0.38",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
@@ -13618,141 +13480,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/qrcode": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
-      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
-      "license": "MIT",
-      "dependencies": {
-        "dijkstrajs": "^1.0.1",
-        "pngjs": "^5.0.0",
-        "yargs": "^15.3.1"
-      },
-      "bin": {
-        "qrcode": "bin/qrcode"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
-    "node_modules/qrcode/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/qrcode/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "license": "ISC"
-    },
-    "node_modules/qrcode/node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/qrcode/node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -14051,12 +13778,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "license": "ISC"
-    },
     "node_modules/reserved-identifiers": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz",
@@ -14542,13 +14263,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "license": "ISC"
+      "license": "ISC",
-    },
+      "optional": true
-    "node_modules/setimmediate": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "license": "MIT"
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
@@ -15072,18 +14788,6 @@
       "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
       "license": "MIT"
     },
-    "node_modules/strnum": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
-      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/NaturalIntelligence"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/structured-clone-es": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/structured-clone-es/-/structured-clone-es-1.0.0.tgz",
@@ -16955,12 +16659,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "license": "ISC"
-    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",

package.json

@@ -1,6 +1,5 @@
 {
   "name": "kestrelos",
-  "version": "1.0.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,7 +9,6 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "test": "vitest",
-    "test:integration": "vitest run --config vitest.integration.config.js",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test test/e2e",
     "test:e2e:ui": "playwright test --ui test/e2e",
@@ -21,23 +19,19 @@
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "fast-xml-parser": "^5.3.6",
     "hls.js": "^1.5.0",
-    "jszip": "^3.10.1",
     "leaflet": "^1.9.4",
     "leaflet.offline": "^3.2.0",
     "mediasoup": "^3.19.14",
     "mediasoup-client": "^3.18.6",
     "nuxt": "^4.0.0",
     "openid-client": "^6.8.2",
-    "qrcode": "^1.5.4",
     "sqlite3": "^5.1.7",
     "vue": "^3.4.0",
     "vue-router": "^4.4.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@iconify-json/tabler": "^1.2.26",
     "@nuxt/eslint": "^1.15.0",
     "@nuxt/test-utils": "^4.0.0",
     "@playwright/test": "^1.58.2",

playwright.config.js

@@ -35,7 +35,6 @@ export default defineConfig({
       name: 'desktop-chrome',
       use: {
         ...devices['Desktop Chrome'],
-        permissions: ['camera', 'microphone', 'geolocation'],
         launchOptions: {
           args: [
             '--use-fake-ui-for-media-stream',
@@ -53,10 +52,10 @@ export default defineConfig({
   ],
   webServer: {
     command: 'npm run dev',
-    url: 'https://localhost:3000/health/ready',
+    url: 'https://localhost:3000/health',
-    reuseExistingServer: !process.env.CI, // Don't reuse in CI (always start fresh)
+    reuseExistingServer: true, // Always reuse existing server for E2E tests
-    timeout: 180_000, // 3 minutes (180 seconds) for server startup (CI can be slower)
+    timeout: 120 * 1000, // 2 minutes for server startup
     ignoreHTTPSErrors: true,
   },
-  timeout: process.env.CI ? 180_000 : 60_000, // 3 minutes in CI, 1 minute locally (WebRTC setup takes time)
+  timeout: 60 * 1000, // 60 seconds per test (WebRTC setup takes time)
 })

renovate.json

@@ -1,3 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
-}

scripts/release.sh

@@ -1,56 +0,0 @@
-#!/bin/sh
-set -e
-
-# version
-msg="${CI_COMMIT_MESSAGE:-}"
-bump=patch
-echo "$msg" | grep -qi minor: && bump=minor
-echo "$msg" | grep -qi major: && bump=major
-cur=$(awk '/"version"/ { match($0, /[0-9]+\.[0-9]+\.[0-9]+/); print substr($0, RSTART, RLENGTH); exit }' package.json)
-major=$(echo "$cur" | cut -d. -f1); minor=$(echo "$cur" | cut -d. -f2); patch=$(echo "$cur" | cut -d. -f3)
-case "$bump" in major) major=$((major+1)); minor=0; patch=0 ;; minor) minor=$((minor+1)); patch=0 ;; patch) patch=$((patch+1)) ;; esac
-newVersion="$major.$minor.$patch"
-[ -z "$cur" ] && { echo "error: could not read version from package.json"; exit 1; }
-
-# changelog entry (strip prefix from first line)
-changelogEntry=$(echo "$msg" | head -1 | awk '{sub(/^[mM]ajor:[ \t]*/,""); sub(/^[mM]inor:[ \t]*/,""); sub(/^[pP]atch:[ \t]*/,""); print}')
-[ -z "$changelogEntry" ] && changelogEntry="Release v$newVersion"
-
-# bump files
-awk -v v="$newVersion" '/"version"/ { sub(/[0-9]+\.[0-9]+\.[0-9]+/, v) } { print }' package.json > package.json.tmp && mv package.json.tmp package.json
-awk -v v="$newVersion" '/^version:/ { $0 = "version: " v }; /^appVersion:/ { $0 = "appVersion: \"" v "\"" }; { print }' helm/kestrelos/Chart.yaml > helm/kestrelos/Chart.yaml.tmp && mv helm/kestrelos/Chart.yaml.tmp helm/kestrelos/Chart.yaml
-awk -v v="$newVersion" '/^  tag:/ { $0 = "  tag: " v }; { print }' helm/kestrelos/values.yaml > helm/kestrelos/values.yaml.tmp && mv helm/kestrelos/values.yaml.tmp helm/kestrelos/values.yaml
-
-# changelog
-new="## [$newVersion] - $(date +%Y-%m-%d)
-### Changed
-- $changelogEntry
-
-"
-{ [ ! -f CHANGELOG.md ] && printf '# Changelog\n\n'; printf '%s' "$new"; [ -f CHANGELOG.md ] && cat CHANGELOG.md; } > CHANGELOG.md.tmp && mv CHANGELOG.md.tmp CHANGELOG.md
-
-# git
-git config user.email "ci@kestrelos" && git config user.name "CI"
-git add package.json helm/kestrelos/Chart.yaml helm/kestrelos/values.yaml CHANGELOG.md
-git commit -m "release v$newVersion [skip ci]"
-url="https://${CI_REPO_OWNER}:${GITEA_REPO_TOKEN}@${CI_FORGE_URL#https://}/${CI_REPO_OWNER}/${CI_REPO_NAME}.git"
-git tag "v$newVersion"
-# artifact for kaniko (tag list)
-printf '%s\n%s\n' "$newVersion" "latest" > .tags
-retry() { n=0; while ! "$@"; do n=$((n+1)); [ $n -ge 3 ] && return 1; sleep 2; done; }
-retry git push "$url" HEAD:main "v$newVersion"
-
-# gitea release
-body="## Changelog
-### Changed
-- $changelogEntry
-
-## Installation
-- [Docker image](${CI_FORGE_URL}/${CI_REPO_OWNER}/-/packages/container/${CI_REPO_NAME})
-- [Helm chart](${CI_FORGE_URL}/${CI_REPO_OWNER}/-/packages/helm/${CI_REPO_NAME})"
-release_url="${CI_FORGE_URL}/api/v1/repos/${CI_REPO_OWNER}/${CI_REPO_NAME}/releases"
-echo "$body" | awk -v tag="v$newVersion" 'BEGIN{printf "{\"tag_name\":\"" tag "\",\"name\":\"" tag "\",\"body\":\""} { gsub(/\\/,"\\\\"); gsub(/"/,"\\\""); if (NR>1) printf "\\n"; printf "%s", $0 } END{printf "\"}\n"}' > /tmp/release.json
-wget -q -O /dev/null --post-file=/tmp/release.json \
-  --header="Authorization: token ${GITEA_REPO_TOKEN}" \
-  --header="Content-Type: application/json" \
-  "$release_url"

server/api/auth/config.get.js

@@ -1,3 +1,3 @@
-import { getAuthConfig } from '../../utils/oidc.js'
+import { getAuthConfig } from '../../utils/authConfig.js'
 
 export default defineEventHandler(() => getAuthConfig())

server/api/auth/login.post.js

@@ -1,7 +1,7 @@
 import { setCookie } from 'h3'
 import { getDb } from '../../utils/db.js'
 import { verifyPassword } from '../../utils/password.js'
-import { getSessionMaxAgeDays } from '../../utils/constants.js'
+import { getSessionMaxAgeDays } from '../../utils/session.js'
 
 export default defineEventHandler(async (event) => {
   const body = await readBody(event)
@@ -15,10 +15,6 @@ export default defineEventHandler(async (event) => {
   if (!user || !user.password_hash || !verifyPassword(password, user.password_hash)) {
     throw createError({ statusCode: 401, message: 'Invalid credentials' })
   }
-
-  // Invalidate all existing sessions for this user to prevent session fixation
-  await run('DELETE FROM sessions WHERE user_id = ?', [user.id])
-
   const sessionDays = getSessionMaxAgeDays()
   const sid = crypto.randomUUID()
   const now = new Date()

server/api/auth/oidc/authorize.get.js

@@ -1,5 +1,5 @@
+import { getAuthConfig } from '../../../utils/authConfig.js'
 import {
-  getAuthConfig,
   getOidcConfig,
   getOidcRedirectUri,
   createOidcParams,

server/api/auth/oidc/callback.get.js

@@ -6,7 +6,7 @@ import {
   exchangeCode,
 } from '../../../utils/oidc.js'
 import { getDb } from '../../../utils/db.js'
-import { getSessionMaxAgeDays } from '../../../utils/constants.js'
+import { getSessionMaxAgeDays } from '../../../utils/session.js'
 
 const DEFAULT_ROLE = process.env.OIDC_DEFAULT_ROLE || 'member'
 
@@ -74,9 +74,6 @@ export default defineEventHandler(async (event) => {
     user = await get('SELECT id, identifier, role FROM users WHERE id = ?', [id])
   }
 
-  // Invalidate all existing sessions for this user to prevent session fixation
-  await run('DELETE FROM sessions WHERE user_id = ?', [user.id])
-
   const sessionDays = getSessionMaxAgeDays()
   const sid = crypto.randomUUID()
   const now = new Date()

server/api/cameras.get.js

@@ -1,19 +1,12 @@
 import { getDb } from '../utils/db.js'
 import { requireAuth } from '../utils/authHelpers.js'
 import { getActiveSessions } from '../utils/liveSessions.js'
-import { getActiveEntities } from '../utils/cotStore.js'
 import { rowToDevice, sanitizeDeviceForResponse } from '../utils/deviceUtils.js'
 
 export default defineEventHandler(async (event) => {
   requireAuth(event)
-  const config = useRuntimeConfig()
+  const [db, sessions] = await Promise.all([getDb(), getActiveSessions()])
-  const ttlMs = Number(config.cotTtlMs ?? 90_000) || 90_000
-  const [db, sessions, cotEntities] = await Promise.all([
-    getDb(),
-    getActiveSessions(),
-    getActiveEntities(ttlMs),
-  ])
   const rows = await db.all('SELECT id, name, device_type, vendor, lat, lng, stream_url, source_type, config FROM devices ORDER BY id')
-  const devices = rows.map(rowToDevice).filter(Boolean).map(sanitizeDeviceForResponse)
+  const devices = rows.map(r => rowToDevice(r)).filter(Boolean).map(sanitizeDeviceForResponse)
-  return { devices, liveSessions: sessions, cotEntities }
+  return { devices, liveSessions: sessions }
 })

server/api/cot/config.get.js

@@ -1,8 +0,0 @@
-import { getCotSslPaths, getCotPort } from '../../utils/cotSsl.js'
-
-/** Public CoT server config for QR code / client setup (port and whether TLS is used). */
-export default defineEventHandler(() => {
-  const config = useRuntimeConfig()
-  const paths = getCotSslPaths(config)
-  return { port: getCotPort(), ssl: Boolean(paths) }
-})

server/api/cot/server-package.get.js

@@ -1,60 +0,0 @@
-import { existsSync } from 'node:fs'
-import JSZip from 'jszip'
-import { getCotSslPaths, getCotPort, TRUSTSTORE_PASSWORD, COT_TLS_REQUIRED_MESSAGE, buildP12FromCertPath } from '../../utils/cotSsl.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-
-/**
- * Build config.pref XML for iTAK: server connection + CA cert for trust (credentials entered in app).
- * connectString format: host:port:ssl or host:port:tcp
- */
-function buildConfigPref(hostname, port, ssl) {
-  const connectString = `${hostname}:${port}:${ssl ? 'ssl' : 'tcp'}`
-  return `<?xml version='1.0' encoding='UTF-8' standalone='yes' ?>
-<preference-set id="com.atakmap.app_preferences">
-  <entry key="connectionEntry">1</entry>
-  <entry key="description">KestrelOS</entry>
-  <entry key="enabled">true</entry>
-  <entry key="connectString">${escapeXml(connectString)}</entry>
-  <entry key="caCertPath">cert/caCert.p12</entry>
-  <entry key="caCertPassword">${escapeXml(TRUSTSTORE_PASSWORD)}</entry>
-  <entry key="cacheCredentials">true</entry>
-</preference-set>
-`
-}
-
-function escapeXml(s) {
-  return String(s)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-export default defineEventHandler(async (event) => {
-  requireAuth(event)
-  const config = useRuntimeConfig()
-  const paths = getCotSslPaths(config)
-  if (!paths || !existsSync(paths.certPath)) {
-    setResponseStatus(event, 404)
-    return { error: `CoT server is not using TLS. Server package ${COT_TLS_REQUIRED_MESSAGE} Use the QR code and add the server with SSL disabled (plain TCP) instead.` }
-  }
-
-  const hostname = getRequestURL(event).hostname
-  const port = getCotPort()
-
-  try {
-    const p12 = buildP12FromCertPath(paths.certPath, TRUSTSTORE_PASSWORD)
-    const zip = new JSZip()
-    zip.file('config.pref', buildConfigPref(hostname, port, true))
-    zip.folder('cert').file('caCert.p12', p12)
-
-    const blob = await zip.generateAsync({ type: 'nodebuffer' })
-    setHeader(event, 'Content-Type', 'application/zip')
-    setHeader(event, 'Content-Disposition', 'attachment; filename="kestrelos-itak-server-package.zip"')
-    return blob
-  }
-  catch (err) {
-    setResponseStatus(event, 500)
-    return { error: 'Failed to build server package.', detail: err?.message }
-  }
-})

server/api/cot/truststore.get.js

@@ -1,24 +0,0 @@
-import { existsSync } from 'node:fs'
-import { getCotSslPaths, TRUSTSTORE_PASSWORD, COT_TLS_REQUIRED_MESSAGE, buildP12FromCertPath } from '../../utils/cotSsl.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-
-export default defineEventHandler((event) => {
-  requireAuth(event)
-  const config = useRuntimeConfig()
-  const paths = getCotSslPaths(config)
-  if (!paths || !existsSync(paths.certPath)) {
-    setResponseStatus(event, 404)
-    return { error: `CoT server is not using TLS or cert not found. Trust store ${COT_TLS_REQUIRED_MESSAGE}` }
-  }
-
-  try {
-    const p12 = buildP12FromCertPath(paths.certPath, TRUSTSTORE_PASSWORD)
-    setHeader(event, 'Content-Type', 'application/x-pkcs12')
-    setHeader(event, 'Content-Disposition', 'attachment; filename="kestrelos-cot-truststore.p12"')
-    return p12
-  }
-  catch (err) {
-    setResponseStatus(event, 500)
-    return { error: 'Failed to build trust store.', detail: err?.message }
-  }
-})

server/api/devices.post.js

@@ -1,4 +1,4 @@
-import { getDb, withTransaction } from '../utils/db.js'
+import { getDb } from '../utils/db.js'
 import { requireAuth } from '../utils/authHelpers.js'
 import { validateDeviceBody, rowToDevice, sanitizeDeviceForResponse } from '../utils/deviceUtils.js'
 
@@ -7,15 +7,13 @@ export default defineEventHandler(async (event) => {
   const body = await readBody(event).catch(() => ({}))
   const { name, device_type, vendor, lat, lng, stream_url, source_type, config } = validateDeviceBody(body)
   const id = crypto.randomUUID()
-  const db = await getDb()
+  const { run, get } = await getDb()
-  return withTransaction(db, async ({ run, get }) => {
+  await run(
-    await run(
+    'INSERT INTO devices (id, name, device_type, vendor, lat, lng, stream_url, source_type, config) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
-      'INSERT INTO devices (id, name, device_type, vendor, lat, lng, stream_url, source_type, config) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)',
+    [id, name, device_type, vendor, lat, lng, stream_url, source_type, config],
-      [id, name, device_type, vendor, lat, lng, stream_url, source_type, config],
+  )
-    )
+  const row = await get('SELECT id, name, device_type, vendor, lat, lng, stream_url, source_type, config FROM devices WHERE id = ?', [id])
-    const row = await get('SELECT id, name, device_type, vendor, lat, lng, stream_url, source_type, config FROM devices WHERE id = ?', [id])
+  const device = rowToDevice(row)
-    const device = rowToDevice(row)
+  if (!device) throw createError({ statusCode: 500, message: 'Device not found after insert' })
-    if (!device) throw createError({ statusCode: 500, message: 'Device not found after insert' })
+  return sanitizeDeviceForResponse(device)
-    return sanitizeDeviceForResponse(device)
-  })
 })

server/api/devices/[id].patch.js

@@ -1,49 +1,55 @@
 import { getDb } from '../../utils/db.js'
 import { requireAuth } from '../../utils/authHelpers.js'
 import { rowToDevice, sanitizeDeviceForResponse, DEVICE_TYPES, SOURCE_TYPES } from '../../utils/deviceUtils.js'
-import { buildUpdateQuery } from '../../utils/queryBuilder.js'
 
 export default defineEventHandler(async (event) => {
   requireAuth(event, { role: 'adminOrLeader' })
   const id = event.context.params?.id
   if (!id) throw createError({ statusCode: 400, message: 'id required' })
   const body = (await readBody(event).catch(() => ({}))) || {}
-  const updates = {}
+  const updates = []
+  const params = []
   if (typeof body.name === 'string') {
-    updates.name = body.name.trim()
+    updates.push('name = ?')
+    params.push(body.name.trim())
   }
   if (DEVICE_TYPES.includes(body.device_type)) {
-    updates.device_type = body.device_type
+    updates.push('device_type = ?')
+    params.push(body.device_type)
   }
   if (body.vendor !== undefined) {
-    updates.vendor = typeof body.vendor === 'string' && body.vendor.trim() ? body.vendor.trim() : null
+    updates.push('vendor = ?')
+    params.push(typeof body.vendor === 'string' && body.vendor.trim() ? body.vendor.trim() : null)
   }
   if (Number.isFinite(body.lat)) {
-    updates.lat = body.lat
+    updates.push('lat = ?')
+    params.push(body.lat)
   }
   if (Number.isFinite(body.lng)) {
-    updates.lng = body.lng
+    updates.push('lng = ?')
+    params.push(body.lng)
   }
   if (typeof body.stream_url === 'string') {
-    updates.stream_url = body.stream_url.trim()
+    updates.push('stream_url = ?')
+    params.push(body.stream_url.trim())
   }
   if (SOURCE_TYPES.includes(body.source_type)) {
-    updates.source_type = body.source_type
+    updates.push('source_type = ?')
+    params.push(body.source_type)
   }
   if (body.config !== undefined) {
-    updates.config = typeof body.config === 'string' ? body.config : (body.config != null ? JSON.stringify(body.config) : null)
+    updates.push('config = ?')
+    params.push(typeof body.config === 'string' ? body.config : (body.config != null ? JSON.stringify(body.config) : null))
   }
   const { run, get } = await getDb()
-  if (Object.keys(updates).length === 0) {
+  if (updates.length === 0) {
     const row = await get('SELECT id, name, device_type, vendor, lat, lng, stream_url, source_type, config FROM devices WHERE id = ?', [id])
     if (!row) throw createError({ statusCode: 404, message: 'Device not found' })
     const device = rowToDevice(row)
     return device ? sanitizeDeviceForResponse(device) : row
   }
-  const { query, params } = buildUpdateQuery('devices', null, updates)
+  params.push(id)
-  if (query) {
+  await run(`UPDATE devices SET ${updates.join(', ')} WHERE id = ?`, params)
-    await run(query, [...params, id])
-  }
   const row = await get('SELECT id, name, device_type, vendor, lat, lng, stream_url, source_type, config FROM devices WHERE id = ?', [id])
   if (!row) throw createError({ statusCode: 404, message: 'Device not found' })
   const device = rowToDevice(row)

server/api/live/[id].delete.js

@@ -1,38 +1,35 @@
 import { requireAuth } from '../../utils/authHelpers.js'
 import { getLiveSession, deleteLiveSession } from '../../utils/liveSessions.js'
 import { closeRouter, getProducer, getTransport } from '../../utils/mediasoup.js'
-import { acquire } from '../../utils/asyncLock.js'
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event)
   const id = event.context.params?.id
   if (!id) throw createError({ statusCode: 400, message: 'id required' })
 
-  return await acquire(`session-delete-${id}`, async () => {
+  const session = getLiveSession(id)
-    const session = getLiveSession(id)
+  if (!session) throw createError({ statusCode: 404, message: 'Live session not found' })
-    if (!session) throw createError({ statusCode: 404, message: 'Live session not found' })
+  if (session.userId !== user.id) throw createError({ statusCode: 403, message: 'Forbidden' })
-    if (session.userId !== user.id) throw createError({ statusCode: 403, message: 'Forbidden' })
 
-    // Clean up producer if it exists
+  // Clean up producer if it exists
-    if (session.producerId) {
+  if (session.producerId) {
-      const producer = getProducer(session.producerId)
+    const producer = getProducer(session.producerId)
-      if (producer) {
+    if (producer) {
-        producer.close()
+      producer.close()
-      }
     }
+  }
 
-    // Clean up transport if it exists
+  // Clean up transport if it exists
-    if (session.transportId) {
+  if (session.transportId) {
-      const transport = getTransport(session.transportId)
+    const transport = getTransport(session.transportId)
-      if (transport) {
+    if (transport) {
-        transport.close()
+      transport.close()
-      }
     }
+  }
 
-    // Clean up router
+  // Clean up router
-    await closeRouter(id)
+  await closeRouter(id)
 
-    await deleteLiveSession(id)
+  deleteLiveSession(id)
-    return { ok: true }
+  return { ok: true }
-  })
 })

server/api/live/[id].patch.js

@@ -1,57 +1,31 @@
 import { requireAuth } from '../../utils/authHelpers.js'
 import { getLiveSession, updateLiveSession } from '../../utils/liveSessions.js'
-import { acquire } from '../../utils/asyncLock.js'
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event)
   const id = event.context.params?.id
   if (!id) throw createError({ statusCode: 400, message: 'id required' })
 
+  const session = getLiveSession(id)
+  if (!session) throw createError({ statusCode: 404, message: 'Live session not found' })
+  if (session.userId !== user.id) throw createError({ statusCode: 403, message: 'Forbidden' })
+
   const body = await readBody(event).catch(() => ({}))
   const lat = Number(body?.lat)
   const lng = Number(body?.lng)
   const updates = {}
   if (Number.isFinite(lat)) updates.lat = lat
   if (Number.isFinite(lng)) updates.lng = lng
-  if (Object.keys(updates).length === 0) {
+  if (Object.keys(updates).length) {
-    // No updates, just return current session
+    updateLiveSession(id, updates)
-    const session = getLiveSession(id)
-    if (!session) throw createError({ statusCode: 404, message: 'Live session not found' })
-    if (session.userId !== user.id) throw createError({ statusCode: 403, message: 'Forbidden' })
-    return {
-      id: session.id,
-      label: session.label,
-      lat: session.lat,
-      lng: session.lng,
-      updatedAt: session.updatedAt,
-    }
   }
 
-  // Use lock to atomically check and update session
+  const updated = getLiveSession(id)
-  return await acquire(`session-patch-${id}`, async () => {
+  return {
-    const session = getLiveSession(id)
+    id: updated.id,
-    if (!session) throw createError({ statusCode: 404, message: 'Live session not found' })
+    label: updated.label,
-    if (session.userId !== user.id) throw createError({ statusCode: 403, message: 'Forbidden' })
+    lat: updated.lat,
-
+    lng: updated.lng,
-    try {
+    updatedAt: updated.updatedAt,
-      const updated = await updateLiveSession(id, updates)
+  }
-      // Re-verify after update (updateLiveSession throws if session not found)
-      if (!updated || updated.userId !== user.id) {
-        throw createError({ statusCode: 404, message: 'Live session not found' })
-      }
-      return {
-        id: updated.id,
-        label: updated.label,
-        lat: updated.lat,
-        lng: updated.lng,
-        updatedAt: updated.updatedAt,
-      }
-    }
-    catch (err) {
-      if (err.message === 'Session not found') {
-        throw createError({ statusCode: 404, message: 'Live session not found' })
-      }
-      throw err
-    }
-  })
 })

server/api/live/start.post.js

@@ -1,44 +1,40 @@
 import { requireAuth } from '../../utils/authHelpers.js'
 import {
-  getOrCreateSession,
+  createSession,
   getActiveSessionByUserId,
   deleteLiveSession,
 } from '../../utils/liveSessions.js'
 import { closeRouter, getProducer, getTransport } from '../../utils/mediasoup.js'
-import { acquire } from '../../utils/asyncLock.js'
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event, { role: 'adminOrLeader' })
   const body = await readBody(event).catch(() => ({}))
-  const label = typeof body?.label === 'string' ? body.label.trim().slice(0, 100) : ''
+  const label = typeof body?.label === 'string' ? body.label.trim() : ''
 
-  // Atomically get or create session, replacing existing if needed
+  // Replace any existing live session for this user (one session per user)
-  return await acquire(`session-start-${user.id}`, async () => {
+  const existing = getActiveSessionByUserId(user.id)
-    const existing = await getActiveSessionByUserId(user.id)
+  if (existing) {
-    if (existing) {
+    if (existing.producerId) {
-      // Clean up existing session resources
+      const producer = getProducer(existing.producerId)
-      if (existing.producerId) {
+      if (producer) producer.close()
-        const producer = getProducer(existing.producerId)
-        if (producer) producer.close()
-      }
-      if (existing.transportId) {
-        const transport = getTransport(existing.transportId)
-        if (transport) transport.close()
-      }
-      if (existing.routerId) {
-        await closeRouter(existing.id).catch((err) => {
-          console.error('[live.start] Error closing previous router:', err)
-        })
-      }
-      await deleteLiveSession(existing.id)
-      console.log('[live.start] Replaced previous session:', existing.id)
     }
+    if (existing.transportId) {
+      const transport = getTransport(existing.transportId)
+      if (transport) transport.close()
+    }
+    if (existing.routerId) {
+      await closeRouter(existing.id).catch((err) => {
+        console.error('[live.start] Error closing previous router:', err)
+      })
+    }
+    deleteLiveSession(existing.id)
+    console.log('[live.start] Replaced previous session:', existing.id)
+  }
 
-    const session = await getOrCreateSession(user.id, label || `Live: ${user.identifier || 'User'}`)
+  const session = createSession(user.id, label || `Live: ${user.identifier || 'User'}`)
-    console.log('[live.start] Session ready:', { id: session.id, userId: user.id, label: session.label })
+  console.log('[live.start] Session created:', { id: session.id, userId: user.id, label: session.label })
-    return {
+  return {
-      id: session.id,
+    id: session.id,
-      label: session.label,
+    label: session.label,
-    }
+  }
-  })
 })

server/api/live/webrtc/connect-transport.post.js

@@ -3,7 +3,7 @@ import { getLiveSession } from '../../../utils/liveSessions.js'
 import { getTransport } from '../../../utils/mediasoup.js'
 
 export default defineEventHandler(async (event) => {
-  const user = requireAuth(event) // Verify authentication
+  requireAuth(event) // Verify authentication
   const body = await readBody(event).catch(() => ({}))
   const { sessionId, transportId, dtlsParameters } = body
 
@@ -15,12 +15,8 @@ export default defineEventHandler(async (event) => {
   if (!session) {
     throw createError({ statusCode: 404, message: 'Session not found' })
   }
-
+  // Note: Both publisher and viewers can connect their own transports
-  // Verify user has permission to connect transport for this session
+  // The transportId ensures they can only connect transports they created
-  // Only session owner or admin/leader can connect transports
-  if (session.userId !== user.id && user.role !== 'admin' && user.role !== 'leader') {
-    throw createError({ statusCode: 403, message: 'Forbidden' })
-  }
 
   const transport = getTransport(transportId)
   if (!transport) {

server/api/live/webrtc/create-consumer.post.js

@@ -3,7 +3,7 @@ import { getLiveSession } from '../../../utils/liveSessions.js'
 import { getRouter, getTransport, getProducer, createConsumer } from '../../../utils/mediasoup.js'
 
 export default defineEventHandler(async (event) => {
-  const user = requireAuth(event) // Verify authentication
+  requireAuth(event) // Verify authentication
   const body = await readBody(event).catch(() => ({}))
   const { sessionId, transportId, rtpCapabilities } = body
 
@@ -15,12 +15,6 @@ export default defineEventHandler(async (event) => {
   if (!session) {
     throw createError({ statusCode: 404, message: `Session not found: ${sessionId}` })
   }
-
-  // Authorization check: only session owner or admin/leader can consume
-  if (session.userId !== user.id && user.role !== 'admin' && user.role !== 'leader') {
-    throw createError({ statusCode: 403, message: 'Forbidden' })
-  }
-
   if (!session.producerId) {
     throw createError({ statusCode: 404, message: 'No producer available for this session' })
   }

server/api/live/webrtc/create-producer.post.js

@@ -1,7 +1,6 @@
 import { requireAuth } from '../../../utils/authHelpers.js'
 import { getLiveSession, updateLiveSession } from '../../../utils/liveSessions.js'
 import { getTransport, producers } from '../../../utils/mediasoup.js'
-import { acquire } from '../../../utils/asyncLock.js'
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event)
@@ -12,48 +11,33 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'sessionId, transportId, kind, and rtpParameters required' })
   }
 
-  return await acquire(`create-producer-${sessionId}`, async () => {
+  const session = getLiveSession(sessionId)
-    const session = getLiveSession(sessionId)
+  if (!session) {
-    if (!session) {
+    throw createError({ statusCode: 404, message: 'Session not found' })
-      throw createError({ statusCode: 404, message: 'Session not found' })
+  }
-    }
+  if (session.userId !== user.id) {
-    if (session.userId !== user.id) {
+    throw createError({ statusCode: 403, message: 'Forbidden' })
-      throw createError({ statusCode: 403, message: 'Forbidden' })
+  }
-    }
 
-    const transport = getTransport(transportId)
+  const transport = getTransport(transportId)
-    if (!transport) {
+  if (!transport) {
-      throw createError({ statusCode: 404, message: 'Transport not found' })
+    throw createError({ statusCode: 404, message: 'Transport not found' })
-    }
+  }
 
-    const producer = await transport.produce({ kind, rtpParameters })
+  const producer = await transport.produce({ kind, rtpParameters })
-    producers.set(producer.id, producer)
+  producers.set(producer.id, producer)
-    producer.on('close', async () => {
+  producer.on('close', () => {
-      producers.delete(producer.id)
+    producers.delete(producer.id)
-      const s = getLiveSession(sessionId)
+    const s = getLiveSession(sessionId)
-      if (s && s.producerId === producer.id) {
+    if (s && s.producerId === producer.id) {
-        try {
+      updateLiveSession(sessionId, { producerId: null })
-          await updateLiveSession(sessionId, { producerId: null })
-        }
-        catch {
-          // Ignore errors during cleanup
-        }
-      }
-    })
-
-    try {
-      await updateLiveSession(sessionId, { producerId: producer.id })
-    }
-    catch (err) {
-      if (err.message === 'Session not found') {
-        throw createError({ statusCode: 404, message: 'Session not found' })
-      }
-      throw err
-    }
-
-    return {
-      id: producer.id,
-      kind: producer.kind,
     }
   })
+
+  updateLiveSession(sessionId, { producerId: producer.id })
+
+  return {
+    id: producer.id,
+    kind: producer.kind,
+  }
 })

server/api/live/webrtc/create-transport.post.js

@@ -2,7 +2,6 @@ import { getRequestURL } from 'h3'
 import { requireAuth } from '../../../utils/authHelpers.js'
 import { getLiveSession, updateLiveSession } from '../../../utils/liveSessions.js'
 import { getRouter, createTransport } from '../../../utils/mediasoup.js'
-import { acquire } from '../../../utils/asyncLock.js'
 
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event)
@@ -13,38 +12,28 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'sessionId required' })
   }
 
-  return await acquire(`create-transport-${sessionId}`, async () => {
+  const session = getLiveSession(sessionId)
-    const session = getLiveSession(sessionId)
+  if (!session) {
-    if (!session) {
+    throw createError({ statusCode: 404, message: 'Session not found' })
-      throw createError({ statusCode: 404, message: 'Session not found' })
+  }
-    }
 
-    // Only publisher (session owner) can create producer transport
+  // Only publisher (session owner) can create producer transport
-    // Viewers can create consumer transports
+  // Viewers can create consumer transports
-    if (isProducer && session.userId !== user.id) {
+  if (isProducer && session.userId !== user.id) {
-      throw createError({ statusCode: 403, message: 'Forbidden' })
+    throw createError({ statusCode: 403, message: 'Forbidden' })
-    }
+  }
 
-    const url = getRequestURL(event)
+  const url = getRequestURL(event)
-    const requestHost = url.hostname
+  const requestHost = url.hostname
-    const router = await getRouter(sessionId)
+  const router = await getRouter(sessionId)
-    const { transport, params } = await createTransport(router, requestHost)
+  const { transport, params } = await createTransport(router, Boolean(isProducer), requestHost)
 
-    if (isProducer) {
+  if (isProducer) {
-      try {
+    updateLiveSession(sessionId, {
-        await updateLiveSession(sessionId, {
+      transportId: transport.id,
-          transportId: transport.id,
+      routerId: router.id,
-          routerId: router.id,
+    })
-        })
+  }
-      }
-      catch (err) {
-        if (err.message === 'Session not found') {
-          throw createError({ statusCode: 404, message: 'Session not found' })
-        }
-        throw err
-      }
-    }
 
-    return params
+  return params
-  })
 })

server/api/live/webrtc/router-rtp-capabilities.get.js

@@ -3,7 +3,7 @@ import { getLiveSession } from '../../../utils/liveSessions.js'
 import { getRouter } from '../../../utils/mediasoup.js'
 
 export default defineEventHandler(async (event) => {
-  const user = requireAuth(event)
+  requireAuth(event)
   const sessionId = getQuery(event).sessionId
 
   if (!sessionId) {
@@ -15,11 +15,6 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 404, message: 'Session not found' })
   }
 
-  // Only session owner or admin/leader can access
-  if (session.userId !== user.id && user.role !== 'admin' && user.role !== 'leader') {
-    throw createError({ statusCode: 403, message: 'Forbidden' })
-  }
-
   const router = await getRouter(sessionId)
   return router.rtpCapabilities
 })

server/api/log.post.js

@@ -1,11 +1,32 @@
-const CONSOLE_METHOD = Object.freeze({ error: 'error', warn: 'warn', info: 'log', debug: 'log' })
+/**
-
+ * Client-side logging endpoint.
+ * Accepts log messages from the browser and outputs them server-side.
+ */
 export default defineEventHandler(async (event) => {
+  // Note: Auth is optional - we rely on session cookie validation if needed
+
   const body = await readBody(event).catch(() => ({}))
   const { level, message, data, sessionId, userId } = body
-  const prefix = `[CLIENT${sessionId ? `:${sessionId}` : ''}${userId ? `:${userId.slice(0, 8)}` : ''}]`
+
-  const msg = data ? `${message} ${JSON.stringify(data)}` : message
+  const logPrefix = `[CLIENT${sessionId ? `:${sessionId}` : ''}${userId ? `:${userId.slice(0, 8)}` : ''}]`
-  const method = CONSOLE_METHOD[level] || 'log'
+  const logMessage = data ? `${message} ${JSON.stringify(data)}` : message
-  console[method](prefix, msg)
+
+  switch (level) {
+    case 'error':
+      console.error(logPrefix, logMessage)
+      break
+    case 'warn':
+      console.warn(logPrefix, logMessage)
+      break
+    case 'info':
+      console.log(logPrefix, logMessage)
+      break
+    case 'debug':
+      console.log(logPrefix, logMessage)
+      break
+    default:
+      console.log(logPrefix, logMessage)
+  }
+
   return { ok: true }
 })

server/api/me.get.js

@@ -1,11 +1,5 @@
 export default defineEventHandler((event) => {
   const user = event.context.user
   if (!user) throw createError({ statusCode: 401, message: 'Unauthorized' })
-  return {
+  return { id: user.id, identifier: user.identifier, role: user.role, auth_provider: user.auth_provider ?? 'local' }
-    id: user.id,
-    identifier: user.identifier,
-    role: user.role,
-    auth_provider: user.auth_provider ?? 'local',
-    avatar_url: user.avatar_path ? '/api/me/avatar' : null,
-  }
 })

server/api/me/avatar.delete.js

@@ -1,21 +0,0 @@
-import { unlink } from 'node:fs/promises'
-import { join } from 'node:path'
-import { getDb, getAvatarsDir } from '../../utils/db.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-
-export default defineEventHandler(async (event) => {
-  const user = requireAuth(event)
-  if (!user.avatar_path) return { ok: true }
-
-  // Validate avatar path to prevent path traversal attacks
-  const filename = user.avatar_path
-  if (!filename || !/^[a-f0-9-]+\.(?:jpg|jpeg|png)$/i.test(filename)) {
-    throw createError({ statusCode: 400, message: 'Invalid avatar path' })
-  }
-
-  const path = join(getAvatarsDir(), filename)
-  await unlink(path).catch(() => {})
-  const { run } = await getDb()
-  await run('UPDATE users SET avatar_path = NULL WHERE id = ?', [user.id])
-  return { ok: true }
-})

server/api/me/avatar.get.js

@@ -1,30 +0,0 @@
-import { readFile } from 'node:fs/promises'
-import { join } from 'node:path'
-import { getAvatarsDir } from '../../utils/db.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-
-const MIME = Object.freeze({ jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png' })
-
-export default defineEventHandler(async (event) => {
-  const user = requireAuth(event)
-  if (!user.avatar_path) throw createError({ statusCode: 404, message: 'No avatar' })
-
-  // Validate avatar path to prevent path traversal attacks
-  const filename = user.avatar_path
-  if (!filename || !/^[a-f0-9-]+\.(?:jpg|jpeg|png)$/i.test(filename)) {
-    throw createError({ statusCode: 400, message: 'Invalid avatar path' })
-  }
-
-  const path = join(getAvatarsDir(), filename)
-  const ext = filename.split('.').pop()?.toLowerCase()
-  const mime = MIME[ext] ?? 'application/octet-stream'
-  try {
-    const buf = await readFile(path)
-    setResponseHeader(event, 'Content-Type', mime)
-    setResponseHeader(event, 'Cache-Control', 'private, max-age=3600')
-    return buf
-  }
-  catch {
-    throw createError({ statusCode: 404, message: 'Avatar not found' })
-  }
-})

server/api/me/avatar.put.js

@@ -1,57 +0,0 @@
-import { writeFile, unlink } from 'node:fs/promises'
-import { join } from 'node:path'
-import { readMultipartFormData } from 'h3'
-import { getDb, getAvatarsDir } from '../../utils/db.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-
-const MAX_SIZE = 2 * 1024 * 1024
-const ALLOWED_TYPES = Object.freeze(['image/jpeg', 'image/png'])
-const EXT_BY_MIME = Object.freeze({ 'image/jpeg': 'jpg', 'image/png': 'png' })
-
-/**
- * Validate image content using magic bytes to prevent MIME type spoofing.
- * @param {Buffer} buffer - File data buffer
- * @returns {string|null} Detected MIME type or null if invalid
- */
-function validateImageContent(buffer) {
-  if (!buffer || buffer.length < 8) return null
-  // JPEG: FF D8 FF
-  if (buffer[0] === 0xFF && buffer[1] === 0xD8 && buffer[2] === 0xFF) {
-    return 'image/jpeg'
-  }
-  // PNG: 89 50 4E 47 0D 0A 1A 0A
-  if (buffer[0] === 0x89 && buffer[1] === 0x50 && buffer[2] === 0x4E && buffer[3] === 0x47) {
-    return 'image/png'
-  }
-  return null
-}
-
-export default defineEventHandler(async (event) => {
-  const user = requireAuth(event)
-  const form = await readMultipartFormData(event)
-  const file = form?.find(f => f.name === 'avatar' && f.data)
-  if (!file || !file.filename) throw createError({ statusCode: 400, message: 'Missing avatar file' })
-  if (file.data.length > MAX_SIZE) throw createError({ statusCode: 400, message: 'File too large' })
-  const mime = file.type ?? ''
-  if (!ALLOWED_TYPES.includes(mime)) throw createError({ statusCode: 400, message: 'Invalid type; use JPEG or PNG' })
-
-  // Validate file content matches declared MIME type
-  const actualMime = validateImageContent(file.data)
-  if (!actualMime || actualMime !== mime) {
-    throw createError({ statusCode: 400, message: 'File content does not match declared type' })
-  }
-
-  const ext = EXT_BY_MIME[actualMime] ?? 'jpg'
-  const filename = `${user.id}.${ext}`
-  const dir = getAvatarsDir()
-  const path = join(dir, filename)
-  await writeFile(path, file.data)
-  const { run } = await getDb()
-  const previous = user.avatar_path
-  await run('UPDATE users SET avatar_path = ? WHERE id = ?', [filename, user.id])
-  if (previous && previous !== filename) {
-    const oldPath = join(dir, previous)
-    await unlink(oldPath).catch(() => {})
-  }
-  return { ok: true }
-})

server/api/me/cot-password.put.js

@@ -1,26 +0,0 @@
-import { getDb } from '../../utils/db.js'
-import { requireAuth } from '../../utils/authHelpers.js'
-import { hashPassword } from '../../utils/password.js'
-
-export default defineEventHandler(async (event) => {
-  const currentUser = requireAuth(event)
-  const body = await readBody(event).catch(() => ({}))
-  const password = body?.password
-
-  if (typeof password !== 'string' || password.length < 1) {
-    throw createError({ statusCode: 400, message: 'Password is required' })
-  }
-
-  const { get, run } = await getDb()
-  const user = await get(
-    'SELECT id, auth_provider FROM users WHERE id = ?',
-    [currentUser.id],
-  )
-  if (!user) {
-    throw createError({ statusCode: 404, message: 'User not found' })
-  }
-
-  const hash = hashPassword(password)
-  await run('UPDATE users SET cot_password_hash = ? WHERE id = ?', [hash, currentUser.id])
-  return { ok: true }
-})

server/api/pois.post.js

@@ -1,15 +1,18 @@
 import { getDb } from '../utils/db.js'
 import { requireAuth } from '../utils/authHelpers.js'
-import { POI_ICON_TYPES } from '../utils/validation.js'
+
+const ICON_TYPES = ['pin', 'flag', 'waypoint']
 
 export default defineEventHandler(async (event) => {
   requireAuth(event, { role: 'adminOrLeader' })
   const body = await readBody(event)
   const lat = Number(body?.lat)
   const lng = Number(body?.lng)
-  if (!Number.isFinite(lat) || !Number.isFinite(lng)) throw createError({ statusCode: 400, message: 'lat and lng required as numbers' })
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
+    throw createError({ statusCode: 400, message: 'lat and lng required as numbers' })
+  }
   const label = typeof body?.label === 'string' ? body.label.trim() : ''
-  const iconType = POI_ICON_TYPES.includes(body?.iconType) ? body.iconType : 'pin'
+  const iconType = ICON_TYPES.includes(body?.iconType) ? body.iconType : 'pin'
   const id = crypto.randomUUID()
   const { run } = await getDb()
   await run(

server/api/pois/[id].patch.js

@@ -1,37 +1,40 @@
 import { getDb } from '../../utils/db.js'
 import { requireAuth } from '../../utils/authHelpers.js'
-import { POI_ICON_TYPES } from '../../utils/validation.js'
+
-import { buildUpdateQuery } from '../../utils/queryBuilder.js'
+const ICON_TYPES = ['pin', 'flag', 'waypoint']
 
 export default defineEventHandler(async (event) => {
   requireAuth(event, { role: 'adminOrLeader' })
   const id = event.context.params?.id
   if (!id) throw createError({ statusCode: 400, message: 'id required' })
-  const body = (await readBody(event)) || {}
+  const body = await readBody(event) || {}
-  const updates = {}
+  const updates = []
+  const params = []
   if (typeof body.label === 'string') {
-    updates.label = body.label.trim()
+    updates.push('label = ?')
+    params.push(body.label.trim())
   }
-  if (POI_ICON_TYPES.includes(body.iconType)) {
+  if (ICON_TYPES.includes(body.iconType)) {
-    updates.icon_type = body.iconType
+    updates.push('icon_type = ?')
+    params.push(body.iconType)
   }
   if (Number.isFinite(body.lat)) {
-    updates.lat = body.lat
+    updates.push('lat = ?')
+    params.push(body.lat)
   }
   if (Number.isFinite(body.lng)) {
-    updates.lng = body.lng
+    updates.push('lng = ?')
+    params.push(body.lng)
   }
-  if (Object.keys(updates).length === 0) {
+  if (updates.length === 0) {
     const { get } = await getDb()
     const row = await get('SELECT id, lat, lng, label, icon_type FROM pois WHERE id = ?', [id])
     if (!row) throw createError({ statusCode: 404, message: 'POI not found' })
     return row
   }
+  params.push(id)
   const { run, get } = await getDb()
-  const { query, params } = buildUpdateQuery('pois', null, updates)
+  await run(`UPDATE pois SET ${updates.join(', ')} WHERE id = ?`, params)
-  if (query) {
-    await run(query, [...params, id])
-  }
   const row = await get('SELECT id, lat, lng, label, icon_type FROM pois WHERE id = ?', [id])
   if (!row) throw createError({ statusCode: 404, message: 'POI not found' })
   return row

server/api/users.post.js

@@ -1,4 +1,4 @@
-import { getDb, withTransaction } from '../utils/db.js'
+import { getDb } from '../utils/db.js'
 import { requireAuth } from '../utils/authHelpers.js'
 import { hashPassword } from '../utils/password.js'
 
@@ -21,20 +21,18 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'role must be admin, leader, or member' })
   }
 
-  const db = await getDb()
+  const { run, get } = await getDb()
-  return withTransaction(db, async ({ run, get }) => {
+  const existing = await get('SELECT id FROM users WHERE identifier = ?', [identifier])
-    const existing = await get('SELECT id FROM users WHERE identifier = ?', [identifier])
+  if (existing) {
-    if (existing) {
+    throw createError({ statusCode: 409, message: 'Identifier already in use' })
-      throw createError({ statusCode: 409, message: 'Identifier already in use' })
+  }
-    }
 
-    const id = crypto.randomUUID()
+  const id = crypto.randomUUID()
-    const now = new Date().toISOString()
+  const now = new Date().toISOString()
-    await run(
+  await run(
-      'INSERT INTO users (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+    'INSERT INTO users (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
-      [id, identifier, hashPassword(password), role, now, 'local', null, null],
+    [id, identifier, hashPassword(password), role, now, 'local', null, null],
-    )
+  )
-    const user = await get('SELECT id, identifier, role, auth_provider FROM users WHERE id = ?', [id])
+  const user = await get('SELECT id, identifier, role, auth_provider FROM users WHERE id = ?', [id])
-    return user
+  return user
-  })
 })

server/api/users/[id].patch.js

@@ -1,7 +1,6 @@
-import { getDb, withTransaction } from '../../utils/db.js'
+import { getDb } from '../../utils/db.js'
 import { requireAuth } from '../../utils/authHelpers.js'
 import { hashPassword } from '../../utils/password.js'
-import { buildUpdateQuery } from '../../utils/queryBuilder.js'
 
 const ROLES = ['admin', 'leader', 'member']
 
@@ -10,52 +9,52 @@ export default defineEventHandler(async (event) => {
   const id = event.context.params?.id
   if (!id) throw createError({ statusCode: 400, message: 'id required' })
   const body = await readBody(event)
-  const db = await getDb()
+  const { run, get } = await getDb()
 
-  return withTransaction(db, async ({ run, get }) => {
+  const user = await get('SELECT id, identifier, role, auth_provider, password_hash FROM users WHERE id = ?', [id])
-    const user = await get('SELECT id, identifier, role, auth_provider, password_hash FROM users WHERE id = ?', [id])
+  if (!user) throw createError({ statusCode: 404, message: 'User not found' })
-    if (!user) throw createError({ statusCode: 404, message: 'User not found' })
 
-    const updates = {}
+  const updates = []
+  const params = []
 
-    if (body?.role !== undefined) {
+  if (body?.role !== undefined) {
-      const role = body.role
+    const role = body.role
-      if (!role || !ROLES.includes(role)) {
+    if (!role || !ROLES.includes(role)) {
-        throw createError({ statusCode: 400, message: 'role must be admin, leader, or member' })
+      throw createError({ statusCode: 400, message: 'role must be admin, leader, or member' })
+    }
+    updates.push('role = ?')
+    params.push(role)
+  }
+
+  if (user.auth_provider === 'local') {
+    if (body?.identifier !== undefined) {
+      const identifier = body.identifier?.trim()
+      if (!identifier || identifier.length < 1) {
+        throw createError({ statusCode: 400, message: 'identifier cannot be empty' })
       }
-      updates.role = role
+      const existing = await get('SELECT id FROM users WHERE identifier = ? AND id != ?', [identifier, id])
-    }
+      if (existing) {
-
+        throw createError({ statusCode: 409, message: 'Identifier already in use' })
-    if (user.auth_provider === 'local') {
-      if (body?.identifier !== undefined) {
-        const identifier = body.identifier?.trim()
-        if (!identifier || identifier.length < 1) {
-          throw createError({ statusCode: 400, message: 'identifier cannot be empty' })
-        }
-        const existing = await get('SELECT id FROM users WHERE identifier = ? AND id != ?', [identifier, id])
-        if (existing) {
-          throw createError({ statusCode: 409, message: 'Identifier already in use' })
-        }
-        updates.identifier = identifier
       }
-      if (body?.password !== undefined && body.password !== '') {
+      updates.push('identifier = ?')
-        const password = body.password
+      params.push(identifier)
-        if (typeof password !== 'string' || password.length < 1) {
+    }
-          throw createError({ statusCode: 400, message: 'password cannot be empty' })
+    if (body?.password !== undefined && body.password !== '') {
-        }
+      const password = body.password
-        updates.password_hash = hashPassword(password)
+      if (typeof password !== 'string' || password.length < 1) {
+        throw createError({ statusCode: 400, message: 'password cannot be empty' })
       }
+      updates.push('password_hash = ?')
+      params.push(hashPassword(password))
     }
+  }
 
-    if (Object.keys(updates).length === 0) {
+  if (updates.length === 0) {
-      return { id: user.id, identifier: user.identifier, role: user.role, auth_provider: user.auth_provider ?? 'local' }
+    return { id: user.id, identifier: user.identifier, role: user.role, auth_provider: user.auth_provider ?? 'local' }
-    }
+  }
 
-    const { query, params } = buildUpdateQuery('users', null, updates)
+  params.push(id)
-    if (query) {
+  await run(`UPDATE users SET ${updates.join(', ')} WHERE id = ?`, params)
-      await run(query, [...params, id])
+  const updated = await get('SELECT id, identifier, role, auth_provider FROM users WHERE id = ?', [id])
-    }
+  return updated
-    const updated = await get('SELECT id, identifier, role, auth_provider FROM users WHERE id = ?', [id])
-    return updated
-  })
 })

server/middleware/auth.js

@@ -1,6 +1,6 @@
 import { getCookie } from 'h3'
 import { getDb } from '../utils/db.js'
-import { skipAuth } from '../utils/authHelpers.js'
+import { skipAuth } from '../utils/authSkipPaths.js'
 
 export default defineEventHandler(async (event) => {
   if (skipAuth(event.path)) return
@@ -10,16 +10,10 @@ export default defineEventHandler(async (event) => {
     const { get } = await getDb()
     const session = await get('SELECT user_id, expires_at FROM sessions WHERE id = ?', [sid])
     if (!session || new Date(session.expires_at) < new Date()) return
-    const user = await get('SELECT id, identifier, role, auth_provider, avatar_path FROM users WHERE id = ?', [session.user_id])
+    const user = await get('SELECT id, identifier, role, auth_provider FROM users WHERE id = ?', [session.user_id])
     if (user) {
       const authProvider = user.auth_provider ?? 'local'
-      event.context.user = {
+      event.context.user = { id: user.id, identifier: user.identifier, role: user.role, auth_provider: authProvider }
-        id: user.id,
-        identifier: user.identifier,
-        role: user.role,
-        auth_provider: authProvider,
-        avatar_path: user.avatar_path ?? null,
-      }
     }
   }
   catch {

server/plugins/cot.js

@@ -1,262 +0,0 @@
-import { createServer as createTcpServer } from 'node:net'
-import { createServer as createTlsServer } from 'node:tls'
-import { readFileSync, existsSync } from 'node:fs'
-import { updateFromCot } from '../utils/cotStore.js'
-import { parseTakStreamFrame, parseTraditionalXmlFrame, parseCotPayload } from '../utils/cotParser.js'
-import { validateCotAuth } from '../utils/cotAuth.js'
-import { getCotSslPaths, getCotPort } from '../utils/cotSsl.js'
-import { registerCleanup } from '../utils/shutdown.js'
-import { COT_AUTH_TIMEOUT_MS } from '../utils/constants.js'
-import { acquire } from '../utils/asyncLock.js'
-
-const serverState = {
-  tcpServer: null,
-  tlsServer: null,
-}
-const relaySet = new Set()
-const allSockets = new Set()
-const socketBuffers = new WeakMap()
-const socketAuthTimeout = new WeakMap()
-
-function clearAuthTimeout(socket) {
-  const t = socketAuthTimeout.get(socket)
-  if (t) {
-    clearTimeout(t)
-    socketAuthTimeout.delete(socket)
-  }
-}
-
-function removeFromRelay(socket) {
-  relaySet.delete(socket)
-  allSockets.delete(socket)
-  clearAuthTimeout(socket)
-  socketBuffers.delete(socket)
-}
-
-function broadcast(senderSocket, rawMessage) {
-  for (const s of relaySet) {
-    if (s !== senderSocket && !s.destroyed && s.writable) {
-      try {
-        s.write(rawMessage)
-      }
-      catch (err) {
-        console.error('[cot] Broadcast write error:', err?.message)
-      }
-    }
-  }
-}
-
-const createPreview = (payload) => {
-  try {
-    const str = payload.toString('utf8')
-    if (str.startsWith('<')) {
-      const s = str.length <= 120 ? str : str.slice(0, 120) + '...'
-      // eslint-disable-next-line no-control-regex -- sanitize control chars for log preview
-      return s.replace(/[\u0000-\u0008\v\f\u000E-\u001F]/g, '.')
-    }
-    return 'hex:' + payload.subarray(0, Math.min(40, payload.length)).toString('hex')
-  }
-  catch {
-    return 'hex:' + payload.subarray(0, Math.min(40, payload.length)).toString('hex')
-  }
-}
-
-async function processFrame(socket, rawMessage, payload, authenticated) {
-  const requireAuth = socket._cotRequireAuth !== false
-  const debug = socket._cotDebug === true
-  const parsed = parseCotPayload(payload)
-  if (debug) {
-    const preview = createPreview(payload)
-    console.log('[cot] payload length:', payload.length, 'parsed:', parsed ? parsed.type : null, 'preview:', preview)
-  }
-  if (!parsed) return
-
-  if (parsed.type === 'auth') {
-    if (authenticated) return
-    console.log('[cot] auth attempt username=', parsed.username)
-    // Use lock per socket to prevent concurrent auth attempts
-    const socketKey = `cot-auth-${socket.remoteAddress || 'unknown'}-${socket.remotePort || 0}`
-    await acquire(socketKey, async () => {
-      // Re-check authentication state after acquiring lock
-      if (socket._cotAuthenticated || socket.destroyed) return
-      try {
-        const valid = await validateCotAuth(parsed.username, parsed.password)
-        console.log('[cot] auth result valid=', valid, 'for username=', parsed.username)
-        if (!socket.writable || socket.destroyed) return
-        if (valid) {
-          clearAuthTimeout(socket)
-          relaySet.add(socket)
-          socket._cotAuthenticated = true
-        }
-        else {
-          socket.destroy()
-        }
-      }
-      catch (err) {
-        console.log('[cot] auth validation error:', err?.message)
-        if (!socket.destroyed) socket.destroy()
-      }
-    }).catch((err) => {
-      console.log('[cot] auth lock error:', err?.message)
-      if (!socket.destroyed) socket.destroy()
-    })
-    return
-  }
-
-  if (parsed.type === 'cot') {
-    if (requireAuth && !authenticated) {
-      socket.destroy()
-      return
-    }
-    updateFromCot(parsed).catch((err) => {
-      console.error('[cot] Error updating from CoT:', err?.message)
-    })
-    if (authenticated) broadcast(socket, rawMessage)
-  }
-}
-
-const parseFrame = (buf) => {
-  const takResult = parseTakStreamFrame(buf)
-  if (takResult) return { result: takResult, frameType: 'tak' }
-  if (buf[0] === 0x3C) {
-    const xmlResult = parseTraditionalXmlFrame(buf)
-    if (xmlResult) return { result: xmlResult, frameType: 'traditional' }
-  }
-  return { result: null, frameType: null }
-}
-
-const processBufferedData = async (socket, buf, authenticated) => {
-  if (buf.length === 0) return buf
-  const { result, frameType } = parseFrame(buf)
-  if (result && socket._cotDebug) {
-    console.log('[cot] frame parsed as', frameType, 'bytesConsumed=', result.bytesConsumed)
-  }
-  if (!result) return buf
-  const { payload, bytesConsumed } = result
-  const rawMessage = buf.subarray(0, bytesConsumed)
-  await processFrame(socket, rawMessage, payload, authenticated)
-  if (socket.destroyed) return null
-  const remainingBuf = buf.subarray(bytesConsumed)
-  socketBuffers.set(socket, remainingBuf)
-  return processBufferedData(socket, remainingBuf, authenticated)
-}
-
-async function onData(socket, data) {
-  const existingBuf = socketBuffers.get(socket)
-  const buf = Buffer.concat([existingBuf || Buffer.alloc(0), data])
-  socketBuffers.set(socket, buf)
-  const authenticated = Boolean(socket._cotAuthenticated)
-
-  if (socket._cotDebug && buf.length > 0 && !socket._cotFirstChunkLogged) {
-    socket._cotFirstChunkLogged = true
-    const hex = buf.subarray(0, Math.min(80, buf.length)).toString('hex')
-    console.log('[cot] first chunk len=', buf.length, 'first bytes (hex):', hex, 'starts with 0xBF:', buf[0] === 0xBF, 'starts with <:', buf[0] === 0x3C)
-  }
-  await processBufferedData(socket, buf, authenticated)
-}
-
-function setupSocket(socket, tls = false) {
-  const remote = socket.remoteAddress || 'unknown'
-  console.log('[cot] client connected', tls ? '(TLS)' : '(TCP)', 'from', remote)
-  allSockets.add(socket)
-  const config = useRuntimeConfig()
-  socket._cotDebug = Boolean(config.cotDebug)
-  socket._cotRequireAuth = config.cotRequireAuth !== false
-  if (socket._cotRequireAuth) {
-    const timeout = setTimeout(() => {
-      if (!socket._cotAuthenticated && !socket.destroyed) {
-        console.log('[cot] auth timeout, closing connection from', remote)
-        socket.destroy()
-      }
-    }, COT_AUTH_TIMEOUT_MS)
-    socketAuthTimeout.set(socket, timeout)
-  }
-  else {
-    socket._cotAuthenticated = true
-    relaySet.add(socket)
-  }
-
-  socket.on('data', data => onData(socket, data))
-  socket.on('error', (err) => {
-    console.error('[cot] Socket error:', err?.message)
-  })
-  socket.on('close', () => {
-    console.log('[cot] client disconnected', socket._cotAuthenticated ? '(was authenticated)' : '', 'from', remote)
-    removeFromRelay(socket)
-  })
-}
-
-function startCotServers() {
-  const config = useRuntimeConfig()
-  const { certPath, keyPath } = getCotSslPaths(config) || {}
-  const hasTls = certPath && keyPath && existsSync(certPath) && existsSync(keyPath)
-  const port = getCotPort()
-
-  try {
-    if (hasTls) {
-      const tlsOpts = {
-        cert: readFileSync(certPath),
-        key: readFileSync(keyPath),
-        rejectUnauthorized: false,
-      }
-      serverState.tlsServer = createTlsServer(tlsOpts, socket => setupSocket(socket, true))
-      serverState.tlsServer.on('error', err => console.error('[cot] TLS server error:', err?.message))
-      serverState.tlsServer.listen(port, '0.0.0.0', () => {
-        console.log('[cot] CoT server listening on 0.0.0.0:' + port + ' (TLS) - use this port in ATAK/iTAK and enable SSL')
-      })
-    }
-    else {
-      serverState.tcpServer = createTcpServer(socket => setupSocket(socket, false))
-      serverState.tcpServer.on('error', err => console.error('[cot] TCP server error:', err?.message))
-      serverState.tcpServer.listen(port, '0.0.0.0', () => {
-        console.log('[cot] CoT server listening on 0.0.0.0:' + port + ' (plain TCP) - use this port in ATAK/iTAK with SSL disabled')
-      })
-    }
-  }
-  catch (err) {
-    console.error('[cot] Failed to start CoT server:', err?.message)
-    if (err?.code === 'EADDRINUSE') {
-      console.error('[cot] Port', port, 'is already in use. Stop the other process or set COT_PORT to a different port.')
-    }
-  }
-}
-
-export default defineNitroPlugin((nitroApp) => {
-  nitroApp.hooks.hook('ready', startCotServers)
-  // Start immediately so CoT is up before first request in dev; ready may fire late in some setups.
-  setImmediate(startCotServers)
-
-  const cleanupServers = () => {
-    if (serverState.tcpServer) {
-      serverState.tcpServer.close()
-      serverState.tcpServer = null
-    }
-    if (serverState.tlsServer) {
-      serverState.tlsServer.close()
-      serverState.tlsServer = null
-    }
-  }
-
-  const cleanupSockets = () => {
-    for (const s of allSockets) {
-      try {
-        s.destroy()
-      }
-      catch {
-        /* ignore */
-      }
-    }
-    allSockets.clear()
-    relaySet.clear()
-  }
-
-  registerCleanup(async () => {
-    cleanupSockets()
-    cleanupServers()
-  })
-
-  nitroApp.hooks.hook('close', async () => {
-    cleanupSockets()
-    cleanupServers()
-  })
-})

server/plugins/db.init.js

@@ -1,7 +1,14 @@
 import { getDb, closeDb } from '../utils/db.js'
+import { migrateFeedsToDevices } from '../utils/migrateFeedsToDevices.js'
+
+/**
+ * Initialize DB (and run bootstrap if no users) at server startup
+ * so credentials are printed in the terminal before any request.
+ * Close DB on server shutdown to avoid native sqlite3 crashes in worker teardown.
+ */
 
 export default defineNitroPlugin((nitroApp) => {
-  void getDb()
+  void getDb().then(() => migrateFeedsToDevices())
   nitroApp.hooks.hook('close', () => {
     closeDb()
   })

server/plugins/websocket.js

@@ -1,8 +1,17 @@
+/**
+ * WebSocket server for WebRTC signaling.
+ * Attaches to Nitro's HTTP server and handles WebSocket connections.
+ */
+
 import { WebSocketServer } from 'ws'
 import { getDb } from '../utils/db.js'
 import { handleWebSocketMessage } from '../utils/webrtcSignaling.js'
-import { registerCleanup } from '../utils/shutdown.js'
 
+/**
+ * Parse cookie header string into object.
+ * @param {string} cookieHeader
+ * @returns {Record<string, string>} Parsed cookie name-value pairs.
+ */
 function parseCookie(cookieHeader) {
   const cookies = {}
   if (!cookieHeader) return cookies
@@ -16,16 +25,30 @@ function parseCookie(cookieHeader) {
 }
 
 let wss = null
-const connections = new Map()
+const connections = new Map() // sessionId -> Set<WebSocket>
 
+/**
+ * Get WebSocket server instance.
+ * @returns {WebSocketServer | null} WebSocket server instance or null.
+ */
 export function getWebSocketServer() {
   return wss
 }
 
+/**
+ * Get connections for a session.
+ * @param {string} sessionId
+ * @returns {Set<WebSocket>} Set of WebSockets for the session.
+ */
 export function getSessionConnections(sessionId) {
   return connections.get(sessionId) || new Set()
 }
 
+/**
+ * Add connection to session.
+ * @param {string} sessionId
+ * @param {WebSocket} ws
+ */
 export function addSessionConnection(sessionId, ws) {
   if (!connections.has(sessionId)) {
     connections.set(sessionId, new Set())
@@ -33,6 +56,11 @@ export function addSessionConnection(sessionId, ws) {
   connections.get(sessionId).add(ws)
 }
 
+/**
+ * Remove connection from session.
+ * @param {string} sessionId
+ * @param {WebSocket} ws
+ */
 export function removeSessionConnection(sessionId, ws) {
   const conns = connections.get(sessionId)
   if (conns) {
@@ -43,6 +71,11 @@ export function removeSessionConnection(sessionId, ws) {
   }
 }
 
+/**
+ * Send message to all connections for a session.
+ * @param {string} sessionId
+ * @param {object} message
+ */
 export function broadcastToSession(sessionId, message) {
   const conns = getSessionConnections(sessionId)
   const data = JSON.stringify(message)
@@ -80,15 +113,8 @@ export default defineNitroPlugin((nitroApp) => {
             callback(false, 401, 'Unauthorized')
             return
           }
-          // Get user role for authorization checks
+          // Store user_id in request for later use
-          const user = await get('SELECT id, role FROM users WHERE id = ?', [session.user_id])
-          if (!user) {
-            callback(false, 401, 'Unauthorized')
-            return
-          }
-          // Store user_id and role in request for later use
           info.req.userId = session.user_id
-          info.req.userRole = user.role
           callback(true)
         }
         catch (err) {
@@ -100,8 +126,7 @@ export default defineNitroPlugin((nitroApp) => {
 
     wss.on('connection', (ws, req) => {
       const userId = req.userId
-      const userRole = req.userRole
+      if (!userId) {
-      if (!userId || !userRole) {
         ws.close(1008, 'Unauthorized')
         return
       }
@@ -118,20 +143,6 @@ export default defineNitroPlugin((nitroApp) => {
             return
           }
 
-          // Verify user has access to this session (authorization check per message)
-          const { getLiveSession } = await import('../utils/liveSessions.js')
-          const session = getLiveSession(sessionId)
-          if (!session) {
-            ws.send(JSON.stringify({ error: 'Session not found' }))
-            return
-          }
-
-          // Only session owner or admin/leader can access the session
-          if (session.userId !== userId && userRole !== 'admin' && userRole !== 'leader') {
-            ws.send(JSON.stringify({ error: 'Forbidden' }))
-            return
-          }
-
           // Track session connection
           if (currentSessionId !== sessionId) {
             if (currentSessionId) {
@@ -165,13 +176,6 @@ export default defineNitroPlugin((nitroApp) => {
     })
 
     console.log('[websocket] WebSocket server started on /ws')
-
-    registerCleanup(async () => {
-      if (wss) {
-        wss.close()
-        wss = null
-      }
-    })
   })
 
   nitroApp.hooks.hook('close', () => {

server/routes/health/ready.get.js

@@ -1,9 +1 @@
-import { healthCheck } from '../../utils/db.js'
+export default defineEventHandler(() => ({ status: 'ready' }))
-
-export default defineEventHandler(async () => {
-  const health = await healthCheck()
-  if (!health.healthy) {
-    throw createError({ statusCode: 503, message: 'Database not ready' })
-  }
-  return { status: 'ready' }
-})

server/utils/asyncLock.js

@@ -1,47 +0,0 @@
-/**
- * Async lock utility - Promise-based mutex per key.
- * Ensures only one async operation executes per key at a time.
- */
-
-const locks = new Map()
-
-/**
- * Get or create a queue for a lock key.
- * @param {string} lockKey - Lock key
- * @returns {Promise<any>} Existing or new queue promise
- */
-const getOrCreateQueue = (lockKey) => {
-  const existingQueue = locks.get(lockKey)
-  if (existingQueue) return existingQueue
-  const newQueue = Promise.resolve()
-  locks.set(lockKey, newQueue)
-  return newQueue
-}
-
-/**
- * Acquire a lock for a key and execute callback.
- * Only one callback per key executes at a time.
- * @param {string} key - Lock key
- * @param {Function} callback - Async function to execute
- * @returns {Promise<any>} Result of callback
- */
-export async function acquire(key, callback) {
-  const lockKey = String(key)
-  const queue = getOrCreateQueue(lockKey)
-
-  const next = queue.then(() => callback()).finally(() => {
-    if (locks.get(lockKey) === next) {
-      locks.delete(lockKey)
-    }
-  })
-
-  locks.set(lockKey, next)
-  return next
-}
-
-/**
- * Clear all locks (for testing).
- */
-export function clearLocks() {
-  locks.clear()
-}

server/utils/authConfig.js

@@ -0,0 +1,17 @@
+/**
+ * Read auth config from env. Returns only non-secret data for client.
+ * Auth always allows local (password) sign-in and OIDC when configured.
+ * @returns {{ oidc: { enabled: boolean, label: string } }} Public auth config (oidc.enabled, oidc.label).
+ */
+export function getAuthConfig() {
+  const hasOidcEnv
+    = process.env.OIDC_ISSUER && process.env.OIDC_CLIENT_ID && process.env.OIDC_CLIENT_SECRET
+  const envLabel = process.env.OIDC_LABEL ?? ''
+  const label = envLabel || (hasOidcEnv ? 'Sign in with OIDC' : '')
+  return {
+    oidc: {
+      enabled: !!hasOidcEnv,
+      label,
+    },
+  }
+}

server/utils/authHelpers.js

@@ -1,33 +1,20 @@
-const ROLES_ADMIN_OR_LEADER = Object.freeze(['admin', 'leader'])
+/**
-
+ * Require authenticated user. Optionally require role. Throws 401 if none, 403 if role insufficient.
+ * @param {import('h3').H3Event} event
+ * @param {{ role?: 'admin' | 'adminOrLeader' }} [opts] - role: 'admin' = admin only; 'adminOrLeader' = admin or leader
+ * @returns {{ id: string, identifier: string, role: string }} The current user.
+ */
 export function requireAuth(event, opts = {}) {
   const user = event.context.user
-  if (!user) throw createError({ statusCode: 401, message: 'Unauthorized' })
+  if (!user) {
+    throw createError({ statusCode: 401, message: 'Unauthorized' })
+  }
   const { role } = opts
-  if (role === 'admin' && user.role !== 'admin') throw createError({ statusCode: 403, message: 'Forbidden' })
+  if (role === 'admin' && user.role !== 'admin') {
-  if (role === 'adminOrLeader' && !ROLES_ADMIN_OR_LEADER.includes(user.role)) throw createError({ statusCode: 403, message: 'Forbidden' })
+    throw createError({ statusCode: 403, message: 'Forbidden' })
+  }
+  if (role === 'adminOrLeader' && user.role !== 'admin' && user.role !== 'leader') {
+    throw createError({ statusCode: 403, message: 'Forbidden' })
+  }
   return user
 }
-
-// Auth path utilities
-export const SKIP_PATHS = Object.freeze([
-  '/api/auth/login',
-  '/api/auth/logout',
-  '/api/auth/config',
-  '/api/auth/oidc/authorize',
-  '/api/auth/oidc/callback',
-])
-
-export const PROTECTED_PATH_PREFIXES = Object.freeze([
-  '/api/cameras',
-  '/api/devices',
-  '/api/live',
-  '/api/me',
-  '/api/pois',
-  '/api/users',
-])
-
-export function skipAuth(path) {
-  if (path.startsWith('/api/health') || path === '/health') return true
-  return SKIP_PATHS.some(p => path === p || path.startsWith(p + '/'))
-}

server/utils/authSkipPaths.js

@@ -0,0 +1,32 @@
+/**
+ * Paths that skip auth middleware (no session required).
+ * Do not add a path here if any handler under it uses requireAuth (with or without role).
+ * When adding a new API route that requires auth, add its path prefix to PROTECTED_PATH_PREFIXES below
+ * so tests can assert it is never skipped.
+ */
+export const SKIP_PATHS = [
+  '/api/auth/login',
+  '/api/auth/logout',
+  '/api/auth/config',
+  '/api/auth/oidc/authorize',
+  '/api/auth/oidc/callback',
+]
+
+/**
+ * Path prefixes for API routes that require an authenticated user (or role).
+ * Every path in this list must NOT be skipped (skipAuth must return false).
+ * Used by tests to prevent protected routes from being added to SKIP_PATHS.
+ */
+export const PROTECTED_PATH_PREFIXES = [
+  '/api/cameras',
+  '/api/devices',
+  '/api/live',
+  '/api/me',
+  '/api/pois',
+  '/api/users',
+]
+
+export function skipAuth(path) {
+  if (path.startsWith('/api/health') || path === '/health') return true
+  return SKIP_PATHS.some(p => path === p || path.startsWith(p + '/'))
+}

server/utils/constants.js

@@ -1,30 +0,0 @@
-/**
- * Application constants with environment variable support.
- */
-
-// Timeouts (milliseconds)
-export const COT_AUTH_TIMEOUT_MS = Number(process.env.COT_AUTH_TIMEOUT_MS) || 15_000
-export const LIVE_SESSION_TTL_MS = Number(process.env.LIVE_SESSION_TTL_MS) || 60_000
-export const COT_ENTITY_TTL_MS = Number(process.env.COT_ENTITY_TTL_MS) || 90_000
-export const POLL_INTERVAL_MS = Number(process.env.POLL_INTERVAL_MS) || 1500
-export const SHUTDOWN_TIMEOUT_MS = Number(process.env.SHUTDOWN_TIMEOUT_MS) || 30_000
-
-// Ports
-export const COT_PORT = Number(process.env.COT_PORT) || 8089
-export const WEBSOCKET_PATH = process.env.WEBSOCKET_PATH || '/ws'
-
-// Limits
-export const MAX_PAYLOAD_BYTES = Number(process.env.MAX_PAYLOAD_BYTES) || 64 * 1024
-export const MAX_STRING_LENGTH = Number(process.env.MAX_STRING_LENGTH) || 1000
-export const MAX_IDENTIFIER_LENGTH = Number(process.env.MAX_IDENTIFIER_LENGTH) || 255
-
-// Mediasoup
-export const MEDIASOUP_RTC_MIN_PORT = Number(process.env.MEDIASOUP_RTC_MIN_PORT) || 40000
-export const MEDIASOUP_RTC_MAX_PORT = Number(process.env.MEDIASOUP_RTC_MAX_PORT) || 49999
-
-// Session
-const [MIN_DAYS, MAX_DAYS, DEFAULT_DAYS] = [1, 365, 7]
-export function getSessionMaxAgeDays() {
-  const raw = Number.parseInt(process.env.SESSION_MAX_AGE_DAYS ?? '', 10)
-  return Number.isFinite(raw) ? Math.max(MIN_DAYS, Math.min(MAX_DAYS, raw)) : DEFAULT_DAYS
-}

server/utils/cotAuth.js

@@ -1,25 +0,0 @@
-import { getDb } from './db.js'
-import { verifyPassword } from './password.js'
-
-/**
- * Validate CoT auth: local users use password_hash; OIDC users use cot_password_hash (ATAK password).
- * @param {string} identifier - KestrelOS identifier (username)
- * @param {string} password - Plain password from CoT auth
- * @returns {Promise<boolean>} True if valid
- */
-export async function validateCotAuth(identifier, password) {
-  const id = typeof identifier === 'string' ? identifier.trim() : ''
-  if (!id || typeof password !== 'string') return false
-
-  const { get } = await getDb()
-  const user = await get(
-    'SELECT auth_provider, password_hash, cot_password_hash FROM users WHERE identifier = ?',
-    [id],
-  )
-  if (!user) return false
-
-  const hash = user.auth_provider === 'local' ? user.password_hash : user.cot_password_hash
-  if (!hash) return false
-
-  return verifyPassword(password, hash)
-}

server/utils/cotParser.js

@@ -1,151 +0,0 @@
-import { XMLParser } from 'fast-xml-parser'
-import { MAX_PAYLOAD_BYTES } from './constants.js'
-
-// CoT protocol detection constants
-export const COT_FIRST_BYTE_TAK = 0xBF
-export const COT_FIRST_BYTE_XML = 0x3C
-
-/** @param {number} byte - First byte of stream. @returns {boolean} */
-export function isCotFirstByte(byte) {
-  return byte === COT_FIRST_BYTE_TAK || byte === COT_FIRST_BYTE_XML
-}
-
-const TRADITIONAL_DELIMITER = Buffer.from('</event>', 'utf8')
-
-/**
- * @param {Buffer} buf
- * @param {number} offset
- * @param {number} value - Accumulated value
- * @param {number} shift - Current bit shift
- * @param {number} bytesRead - Bytes consumed so far
- * @returns {{ value: number, bytesRead: number }} Decoded varint and bytes consumed.
- */
-function readVarint(buf, offset, value = 0, shift = 0, bytesRead = 0) {
-  if (offset + bytesRead >= buf.length) return { value, bytesRead }
-  const b = buf[offset + bytesRead]
-  const newValue = value + ((b & 0x7F) << shift)
-  const newBytesRead = bytesRead + 1
-  if ((b & 0x80) === 0) return { value: newValue, bytesRead: newBytesRead }
-  const newShift = shift + 7
-  if (newShift > 28) return { value: 0, bytesRead: 0 }
-  return readVarint(buf, offset, newValue, newShift, newBytesRead)
-}
-
-/**
- * TAK stream frame: 0xBF, varint length, payload.
- * @param {Buffer} buf
- * @returns {{ payload: Buffer, bytesConsumed: number } | null} Frame or null if incomplete/invalid.
- */
-export function parseTakStreamFrame(buf) {
-  if (!buf || buf.length < 2 || buf[0] !== COT_FIRST_BYTE_TAK) return null
-  const { value: length, bytesRead } = readVarint(buf, 1)
-  if (length < 0 || length > MAX_PAYLOAD_BYTES) return null
-  const bytesConsumed = 1 + bytesRead + length
-  if (buf.length < bytesConsumed) return null
-  return { payload: buf.subarray(1 + bytesRead, bytesConsumed), bytesConsumed }
-}
-
-/**
- * Traditional CoT: one XML message delimited by </event>.
- * @param {Buffer} buf
- * @returns {{ payload: Buffer, bytesConsumed: number } | null} Frame or null if incomplete.
- */
-export function parseTraditionalXmlFrame(buf) {
-  if (!buf || buf.length < 8 || buf[0] !== COT_FIRST_BYTE_XML) return null
-  const idx = buf.indexOf(TRADITIONAL_DELIMITER)
-  if (idx === -1) return null
-  const bytesConsumed = idx + TRADITIONAL_DELIMITER.length
-  if (bytesConsumed > MAX_PAYLOAD_BYTES) return null
-  return { payload: buf.subarray(0, bytesConsumed), bytesConsumed }
-}
-
-const xmlParser = new XMLParser({
-  ignoreAttributes: false,
-  attributeNamePrefix: '@_',
-  parseTagValue: false,
-  ignoreDeclaration: true,
-  ignorePiTags: true,
-  processEntities: false, // Disable entity expansion to prevent XML bomb attacks
-  maxAttributes: 100,
-  parseAttributeValue: false,
-  trimValues: true,
-  parseTrueNumberOnly: false,
-  arrayMode: false,
-  stopNodes: [], // Could add depth limit here if needed
-})
-
-/**
- * Case-insensitive key lookup in nested object.
- * @returns {unknown} Found value or undefined.
- */
-function findInObject(obj, key) {
-  if (!obj || typeof obj !== 'object') return undefined
-  const k = key.toLowerCase()
-  for (const [name, val] of Object.entries(obj)) {
-    if (name.toLowerCase() === k) return val
-    if (typeof val === 'object' && val !== null) {
-      const found = findInObject(val, key)
-      if (found !== undefined) return found
-    }
-  }
-  return undefined
-}
-
-/**
- * Extract { username, password } from detail.auth (or __auth / credentials).
- * @returns {{ username: string, password: string } | null} Credentials or null if missing/invalid.
- */
-function extractAuth(parsed) {
-  const detail = findInObject(parsed, 'detail')
-  if (!detail || typeof detail !== 'object') return null
-  const auth = findInObject(detail, 'auth') ?? findInObject(detail, '__auth') ?? findInObject(detail, 'credentials')
-  if (!auth || typeof auth !== 'object') return null
-  const username = auth['@_username'] ?? auth['@_Username'] ?? auth.username
-  const password = auth['@_password'] ?? auth['@_Password'] ?? auth.password
-  if (typeof username !== 'string' || typeof password !== 'string' || !username.trim()) return null
-  return { username: username.trim(), password }
-}
-
-/**
- * Parse CoT XML payload into auth or position. Does not mutate payload.
- * @param {Buffer} payload - UTF-8 XML
- * @returns {{ type: 'auth', username: string, password: string } | { type: 'cot', id: string, lat: number, lng: number, label: string, eventType: string } | null} Auth or position, or null.
- */
-export function parseCotPayload(payload) {
-  if (!payload?.length) return null
-  const str = payload.toString('utf8').trim()
-  if (!str.startsWith('<')) return null
-  try {
-    const parsed = xmlParser.parse(str)
-    const event = findInObject(parsed, 'event')
-    if (!event || typeof event !== 'object') return null
-
-    const auth = extractAuth(parsed)
-    if (auth) return { type: 'auth', username: auth.username, password: auth.password }
-
-    const uid = String(event['@_uid'] ?? event.uid ?? '')
-    const eventType = String(event['@_type'] ?? event.type ?? '')
-    const point = findInObject(parsed, 'point') ?? findInObject(event, 'point')
-    const extractCoords = (pt) => {
-      if (!pt || typeof pt !== 'object') return { lat: Number.NaN, lng: Number.NaN }
-      return {
-        lat: Number(pt['@_lat'] ?? pt.lat),
-        lng: Number(pt['@_lon'] ?? pt.lon ?? pt['@_lng'] ?? pt.lng),
-      }
-    }
-    const { lat, lng } = extractCoords(point)
-    if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null
-
-    const detail = findInObject(parsed, 'detail')
-    const contact = detail && typeof detail === 'object' ? (findInObject(detail, 'contact') ?? detail) : null
-    const callsign = contact && typeof contact === 'object'
-      ? (contact['@_callsign'] ?? contact.callsign ?? contact['@_Callsign'])
-      : ''
-    const label = typeof callsign === 'string' ? callsign.trim() || uid : uid
-
-    return { type: 'cot', id: uid, lat, lng, label, eventType }
-  }
-  catch {
-    return null
-  }
-}

server/utils/cotSsl.js

@@ -1,73 +0,0 @@
-import { existsSync, readFileSync, unlinkSync } from 'node:fs'
-import { join, dirname } from 'node:path'
-import { tmpdir } from 'node:os'
-import { execSync } from 'node:child_process'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-/** Default password for the CoT trust store (document in atak-itak.md). */
-export const TRUSTSTORE_PASSWORD = 'kestrelos'
-
-/** Default CoT server port. */
-export const DEFAULT_COT_PORT = 8089
-
-/**
- * CoT port from env or default.
- * @returns {number} Port number (COT_PORT env or DEFAULT_COT_PORT).
- */
-export function getCotPort() {
-  return Number(process.env.COT_PORT ?? DEFAULT_COT_PORT)
-}
-
-/** Message when an endpoint requires TLS but server is not using it. */
-export const COT_TLS_REQUIRED_MESSAGE = 'Only available when the server runs with SSL (e.g. .dev-certs or COT_SSL_*).'
-
-/**
- * Resolve CoT server TLS cert and key paths (for plugin and API).
- * @param {{ cotSslCert?: string, cotSslKey?: string }} [config] - Runtime config (optional)
- * @returns {{ certPath: string, keyPath: string } | null} Paths when TLS is configured, else null.
- */
-export function getCotSslPaths(config = {}) {
-  if (process.env.COT_SSL_CERT && process.env.COT_SSL_KEY) {
-    return { certPath: process.env.COT_SSL_CERT, keyPath: process.env.COT_SSL_KEY }
-  }
-  if (config.cotSslCert && config.cotSslKey) {
-    return { certPath: config.cotSslCert, keyPath: config.cotSslKey }
-  }
-  const candidates = [
-    join(process.cwd(), '.dev-certs', 'cert.pem'),
-    join(__dirname, '../../.dev-certs', 'cert.pem'),
-  ]
-  for (const certPath of candidates) {
-    const keyPath = certPath.replace('cert.pem', 'key.pem')
-    if (existsSync(certPath) && existsSync(keyPath)) {
-      return { certPath, keyPath }
-    }
-  }
-  return null
-}
-
-/**
- * Build a P12 trust store from a PEM cert path (for truststore download and server package).
- * @param {string} certPath - Path to cert.pem
- * @param {string} password - P12 password
- * @returns {Buffer} P12 buffer
- * @throws {Error} If openssl fails
- */
-export function buildP12FromCertPath(certPath, password) {
-  const outPath = join(tmpdir(), `kestrelos-cot-p12-${Date.now()}.p12`)
-  try {
-    execSync(
-      `openssl pkcs12 -export -nokeys -in "${certPath}" -out "${outPath}" -passout pass:${password}`,
-      { stdio: 'pipe' },
-    )
-    const p12 = readFileSync(outPath)
-    unlinkSync(outPath)
-    return p12
-  }
-  catch (err) {
-    if (existsSync(outPath)) unlinkSync(outPath)
-    throw err
-  }
-}

server/utils/cotStore.js

@@ -1,71 +0,0 @@
-/**
- * In-memory CoT entity store: upsert by id, prune on read by TTL.
- * Single source of truth; getActiveEntities returns new objects (no mutation of returned refs).
- */
-
-import { acquire } from './asyncLock.js'
-import { COT_ENTITY_TTL_MS } from './constants.js'
-
-const entities = new Map()
-
-/**
- * Upsert entity by id. Input is not mutated; stored value is a new object.
- * @param {{ id: string, lat: number, lng: number, label?: string, eventType?: string, type?: string }} parsed
- */
-export async function updateFromCot(parsed) {
-  if (!parsed || typeof parsed.id !== 'string') return
-  const lat = Number(parsed.lat)
-  const lng = Number(parsed.lng)
-  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return
-
-  await acquire(`cot-${parsed.id}`, async () => {
-    const now = Date.now()
-    const existing = entities.get(parsed.id)
-    const label = typeof parsed.label === 'string' ? parsed.label : (existing?.label ?? parsed.id)
-    const type = typeof parsed.eventType === 'string' ? parsed.eventType : (typeof parsed.type === 'string' ? parsed.type : (existing?.type ?? ''))
-
-    entities.set(parsed.id, {
-      id: parsed.id,
-      lat,
-      lng,
-      label,
-      type,
-      updatedAt: now,
-    })
-  })
-}
-
-/**
- * Active entities (updated within ttlMs). Prunes expired. Returns new array of new objects.
- * @param {number} [ttlMs]
- * @returns {Promise<Array<{ id: string, lat: number, lng: number, label: string, type: string, updatedAt: number }>>} Snapshot of active entities.
- */
-export async function getActiveEntities(ttlMs = COT_ENTITY_TTL_MS) {
-  return acquire('cot-prune', async () => {
-    const now = Date.now()
-    const active = []
-    const expired = []
-    for (const entity of entities.values()) {
-      if (now - entity.updatedAt <= ttlMs) {
-        active.push({
-          id: entity.id,
-          lat: entity.lat,
-          lng: entity.lng,
-          label: entity.label ?? entity.id,
-          type: entity.type ?? '',
-          updatedAt: entity.updatedAt,
-        })
-      }
-      else {
-        expired.push(entity.id)
-      }
-    }
-    for (const id of expired) entities.delete(id)
-    return active
-  })
-}
-
-/** Clear store (tests only). */
-export function clearCotStore() {
-  entities.clear()
-}

server/utils/db.js

@@ -1,306 +1,155 @@
-import { join, dirname } from 'node:path'
+import { join } from 'node:path'
 import { mkdirSync, existsSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { promisify } from 'node:util'
 import { randomBytes } from 'node:crypto'
 import { hashPassword } from './password.js'
-import { registerCleanup } from './shutdown.js'
 
-// Resolve from project root so bundled server (e.g. .output) finds node_modules/sqlite3
+const DEFAULT_ADMIN_IDENTIFIER = 'admin'
-const requireFromRoot = createRequire(join(process.cwd(), 'package.json'))
+const DEFAULT_PASSWORD_LENGTH = 14
-const sqlite3 = requireFromRoot('sqlite3')
+const PASSWORD_CHARS = 'abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789'
 
-const SCHEMA_VERSION = 4
+function generateRandomPassword() {
-const DB_BUSY_TIMEOUT_MS = 5000
+  const bytes = randomBytes(DEFAULT_PASSWORD_LENGTH)
-
+  let s = ''
-let dbInstance = null
+  for (let i = 0; i < DEFAULT_PASSWORD_LENGTH; i++) {
-let testPath = null
+    s += PASSWORD_CHARS[bytes[i] % PASSWORD_CHARS.length]
-
+  }
-const SCHEMA = {
+  return s
-  schema_version: 'CREATE TABLE IF NOT EXISTS schema_version (version INTEGER PRIMARY KEY)',
-  users: `CREATE TABLE IF NOT EXISTS users (
-    id TEXT PRIMARY KEY,
-    identifier TEXT UNIQUE NOT NULL,
-    password_hash TEXT NOT NULL,
-    role TEXT NOT NULL DEFAULT 'member',
-    created_at TEXT NOT NULL
-  )`,
-  users_v2: `CREATE TABLE users_new (
-    id TEXT PRIMARY KEY,
-    identifier TEXT UNIQUE NOT NULL,
-    password_hash TEXT,
-    role TEXT NOT NULL DEFAULT 'member',
-    created_at TEXT NOT NULL,
-    auth_provider TEXT NOT NULL DEFAULT 'local',
-    oidc_issuer TEXT,
-    oidc_sub TEXT
-  )`,
-  users_oidc_index: `CREATE UNIQUE INDEX IF NOT EXISTS users_oidc_unique ON users(oidc_issuer, oidc_sub) WHERE oidc_issuer IS NOT NULL AND oidc_sub IS NOT NULL`,
-  sessions: `CREATE TABLE IF NOT EXISTS sessions (
-    id TEXT PRIMARY KEY,
-    user_id TEXT NOT NULL,
-    created_at TEXT NOT NULL,
-    expires_at TEXT NOT NULL,
-    FOREIGN KEY(user_id) REFERENCES users(id)
-  )`,
-  pois: `CREATE TABLE IF NOT EXISTS pois (
-    id TEXT PRIMARY KEY,
-    lat REAL NOT NULL,
-    lng REAL NOT NULL,
-    label TEXT NOT NULL DEFAULT '',
-    icon_type TEXT NOT NULL DEFAULT 'pin'
-  )`,
-  devices: `CREATE TABLE IF NOT EXISTS devices (
-    id TEXT PRIMARY KEY,
-    name TEXT NOT NULL DEFAULT '',
-    device_type TEXT NOT NULL,
-    vendor TEXT,
-    lat REAL NOT NULL,
-    lng REAL NOT NULL,
-    stream_url TEXT NOT NULL DEFAULT '',
-    source_type TEXT NOT NULL DEFAULT 'mjpeg',
-    config TEXT
-  )`,
 }
 
-const getDbPath = () => {
+const require = createRequire(import.meta.url)
+const sqlite3 = require('sqlite3')
+
+let dbInstance = null
+/** Set by tests to use :memory: or a temp path */
+let testPath = null
+
+const USERS_SQL = `CREATE TABLE IF NOT EXISTS users (
+  id TEXT PRIMARY KEY,
+  identifier TEXT UNIQUE NOT NULL,
+  password_hash TEXT NOT NULL,
+  role TEXT NOT NULL DEFAULT 'member',
+  created_at TEXT NOT NULL
+)`
+
+const USERS_V2_SQL = `CREATE TABLE users_new (
+  id TEXT PRIMARY KEY,
+  identifier TEXT UNIQUE NOT NULL,
+  password_hash TEXT,
+  role TEXT NOT NULL DEFAULT 'member',
+  created_at TEXT NOT NULL,
+  auth_provider TEXT NOT NULL DEFAULT 'local',
+  oidc_issuer TEXT,
+  oidc_sub TEXT
+)`
+const USERS_OIDC_UNIQUE = `CREATE UNIQUE INDEX IF NOT EXISTS users_oidc_unique ON users(oidc_issuer, oidc_sub) WHERE oidc_issuer IS NOT NULL AND oidc_sub IS NOT NULL`
+const SESSIONS_SQL = `CREATE TABLE IF NOT EXISTS sessions (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  created_at TEXT NOT NULL,
+  expires_at TEXT NOT NULL,
+  FOREIGN KEY(user_id) REFERENCES users(id)
+)`
+const POIS_SQL = `CREATE TABLE IF NOT EXISTS pois (
+  id TEXT PRIMARY KEY,
+  lat REAL NOT NULL,
+  lng REAL NOT NULL,
+  label TEXT NOT NULL DEFAULT '',
+  icon_type TEXT NOT NULL DEFAULT 'pin'
+)`
+const DEVICES_SQL = `CREATE TABLE IF NOT EXISTS devices (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  device_type TEXT NOT NULL,
+  vendor TEXT,
+  lat REAL NOT NULL,
+  lng REAL NOT NULL,
+  stream_url TEXT NOT NULL DEFAULT '',
+  source_type TEXT NOT NULL DEFAULT 'mjpeg',
+  config TEXT
+)`
+
+function getDbPath() {
   if (testPath) return testPath
-  if (process.env.DB_PATH) return process.env.DB_PATH
   const dir = join(process.cwd(), 'data')
   if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
   return join(dir, 'kestrelos.db')
 }
 
-export const getAvatarsDir = () => {
+async function bootstrap(db) {
-  const dir = join(dirname(getDbPath()), 'avatars')
+  if (testPath) return
-  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
+  const row = await db.get('SELECT COUNT(*) as n FROM users')
-  return dir
+  if (row?.n !== 0) return
-}
+  const email = process.env.BOOTSTRAP_EMAIL?.trim()
+  const password = process.env.BOOTSTRAP_PASSWORD
+  const identifier = (email && password) ? email : DEFAULT_ADMIN_IDENTIFIER
+  const plainPassword = (email && password) ? password : generateRandomPassword()
+  const id = crypto.randomUUID()
+  const now = new Date().toISOString()
+  await db.run(
+    'INSERT INTO users (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
+    [id, identifier, hashPassword(plainPassword), 'admin', now, 'local', null, null],
+  )
+  if (!email || !password) {
+    console.log('\n[KestrelOS] No bootstrap admin configured. Default admin created. Sign in at /login with:\n')
 
-const getSchemaVersion = async (get) => {
+    console.log(`  Identifier: ${identifier}\n  Password:   ${plainPassword}\n`)
-  try {
+
-    const row = await get('SELECT version FROM schema_version ORDER BY version DESC LIMIT 1')
+    console.log('  Set BOOTSTRAP_EMAIL and BOOTSTRAP_PASSWORD to use your own credentials on first run.\n')
-    return row?.version || 0
-  }
-  catch {
-    return 0
   }
 }
 
-const setSchemaVersion = (run, version) => run('INSERT OR REPLACE INTO schema_version (version) VALUES (?)', [version])
+async function migrateUsersIfNeeded(run, all) {
-
-const migrateToV2 = async (run, all) => {
   const info = await all('PRAGMA table_info(users)')
   if (info.some(c => c.name === 'auth_provider')) return
-
+  await run(USERS_V2_SQL)
-  await run('BEGIN TRANSACTION')
+  await run(
-  try {
+    `INSERT INTO users_new (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub)
-    await run(SCHEMA.users_v2)
+     SELECT id, identifier, password_hash, role, created_at, 'local', NULL, NULL FROM users`,
-    await run('INSERT INTO users_new (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub) SELECT id, identifier, password_hash, role, created_at, ?, ?, ? FROM users', ['local', null, null])
+  )
-    await run('DROP TABLE users')
+  await run('DROP TABLE users')
-    await run('ALTER TABLE users_new RENAME TO users')
+  await run('ALTER TABLE users_new RENAME TO users')
-    await run(SCHEMA.users_oidc_index)
+  await run(USERS_OIDC_UNIQUE)
-    await run('COMMIT')
-  }
-  catch (error) {
-    await run('ROLLBACK').catch(() => {})
-    throw error
-  }
-}
-
-const migrateToV3 = async (run, all) => {
-  const info = await all('PRAGMA table_info(users)')
-  if (info.some(c => c.name === 'avatar_path')) return
-  await run('ALTER TABLE users ADD COLUMN avatar_path TEXT')
-}
-
-const migrateToV4 = async (run, all) => {
-  const info = await all('PRAGMA table_info(users)')
-  if (info.some(c => c.name === 'cot_password_hash')) return
-  await run('ALTER TABLE users ADD COLUMN cot_password_hash TEXT')
-}
-
-const runMigrations = async (run, all, get) => {
-  const version = await getSchemaVersion(get)
-  if (version >= SCHEMA_VERSION) return
-  if (version < 2) {
-    await migrateToV2(run, all)
-    await setSchemaVersion(run, 2)
-  }
-  if (version < 3) {
-    await migrateToV3(run, all)
-    await setSchemaVersion(run, 3)
-  }
-  if (version < 4) {
-    await migrateToV4(run, all)
-    await setSchemaVersion(run, 4)
-  }
-}
-
-const initDb = async (db, run, all, get) => {
-  try {
-    await run('PRAGMA journal_mode = WAL')
-  }
-  catch {
-    // WAL not supported (e.g., network filesystem)
-  }
-  db.configure('busyTimeout', DB_BUSY_TIMEOUT_MS)
-
-  await run(SCHEMA.schema_version)
-  await run(SCHEMA.users)
-  await runMigrations(run, all, get)
-  await run(SCHEMA.sessions)
-  await run(SCHEMA.pois)
-  await run(SCHEMA.devices)
-
-  if (!testPath) {
-    // Bootstrap admin user on first run
-    const PASSWORD_CHARS = Object.freeze('abcdefghjkmnopqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ23456789')
-    const generateRandomPassword = () =>
-      Array.from(randomBytes(14), b => PASSWORD_CHARS[b % PASSWORD_CHARS.length]).join('')
-
-    const row = await get('SELECT COUNT(*) as n FROM users')
-    if (row?.n === 0) {
-      const email = process.env.BOOTSTRAP_EMAIL?.trim()
-      const password = process.env.BOOTSTRAP_PASSWORD
-      const identifier = (email && password) ? email : 'admin'
-      const plainPassword = (email && password) ? password : generateRandomPassword()
-
-      await run(
-        'INSERT INTO users (id, identifier, password_hash, role, created_at, auth_provider, oidc_issuer, oidc_sub) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
-        [crypto.randomUUID(), identifier, hashPassword(plainPassword), 'admin', new Date().toISOString(), 'local', null, null],
-      )
-
-      if (!email || !password) {
-        console.log(`\n[KestrelOS] No bootstrap admin configured. Default admin created. Sign in at /login with:\n\n  Identifier: ${identifier}\n  Password:   ${plainPassword}\n\n  Set BOOTSTRAP_EMAIL and BOOTSTRAP_PASSWORD to use your own credentials on first run.\n`)
-      }
-    }
-  }
 }
 
 export async function getDb() {
   if (dbInstance) return dbInstance
-
+  const path = getDbPath()
-  const db = new sqlite3.Database(getDbPath(), (err) => {
+  const db = new sqlite3.Database(path)
-    if (err) {
-      console.error('[db] Failed to open database:', err.message)
-      throw err
-    }
-  })
-
   const run = promisify(db.run.bind(db))
   const all = promisify(db.all.bind(db))
   const get = promisify(db.get.bind(db))
-
+  await run(USERS_SQL)
-  try {
+  await migrateUsersIfNeeded(run, all)
-    await initDb(db, run, all, get)
+  await run(SESSIONS_SQL)
-  }
+  await run(POIS_SQL)
-  catch (error) {
+  await run(DEVICES_SQL)
-    db.close()
+  await bootstrap({ run, get })
-    console.error('[db] Database initialization failed:', error.message)
-    throw error
-  }
-
   dbInstance = { db, run, all, get }
-
-  registerCleanup(async () => {
-    if (dbInstance) {
-      try {
-        await new Promise((resolve, reject) => {
-          dbInstance.db.close((err) => {
-            if (err) reject(err)
-            else resolve()
-          })
-        })
-      }
-      catch (error) {
-        console.error('[db] Error closing database during shutdown:', error?.message)
-      }
-      dbInstance = null
-    }
-  })
-
   return dbInstance
 }
 
 /**
- * Health check for database connection.
+ * Close the DB connection. Call on server shutdown to avoid native sqlite3 crashes in worker teardown.
- * @returns {Promise<{ healthy: boolean, error?: string }>} Health status
  */
-export async function healthCheck() {
-  try {
-    const db = await getDb()
-    await db.get('SELECT 1')
-    return { healthy: true }
-  }
-  catch (error) {
-    return {
-      healthy: false,
-      error: error?.message || String(error),
-    }
-  }
-}
-
-/**
- * Database connection model documentation:
- *
- * KestrelOS uses SQLite with WAL (Write-Ahead Logging) mode for concurrent access.
- * - Single connection instance shared across all requests (singleton pattern)
- * - WAL mode allows multiple readers and one writer concurrently
- * - Connection is initialized on first getDb() call and reused thereafter
- * - Busy timeout is set to 5000ms to handle concurrent access gracefully
- * - Transactions are supported via withTransaction() helper
- *
- * Concurrency considerations:
- * - SQLite with WAL handles concurrent reads efficiently
- * - Writes are serialized (one at a time)
- * - For high write loads, consider migrating to PostgreSQL
- * - Current model is suitable for moderate traffic (< 100 req/sec)
- *
- * Connection lifecycle:
- * - Created on first getDb() call
- * - Persists for application lifetime
- * - Closed during graceful shutdown
- * - Test path can be set via setDbPathForTest() for testing
- */
-
-/**
- * Execute a callback within a database transaction.
- * Automatically commits on success or rolls back on error.
- * @param {object} db - Database instance from getDb()
- * @param {Function} callback - Async function receiving { run, all, get }
- * @returns {Promise<any>} Result of callback
- */
-export async function withTransaction(db, callback) {
-  const { run } = db
-  await run('BEGIN TRANSACTION')
-  try {
-    const result = await callback(db)
-    await run('COMMIT')
-    return result
-  }
-  catch (error) {
-    await run('ROLLBACK').catch(() => {
-      // Ignore rollback errors
-    })
-    throw error
-  }
-}
-
 export function closeDb() {
-  if (!dbInstance) return
+  if (dbInstance) {
-  try {
+    try {
-    dbInstance.db.close((err) => {
+      dbInstance.db.close()
-      if (err) console.error('[db] Error closing database:', err.message)
+    }
-    })
+    catch {
+      // ignore if already closed
+    }
+    dbInstance = null
   }
-  catch (error) {
-    console.error('[db] Error closing database:', error.message)
-  }
-  dbInstance = null
 }
 
+/**
+ * For tests: use in-memory DB and reset singleton.
+ * @param {string} path - e.g. ':memory:'
+ */
 export function setDbPathForTest(path) {
-  testPath = path || null
+  testPath = path
   closeDb()
 }

server/utils/deviceUtils.js

@@ -1,12 +1,8 @@
+import { sanitizeStreamUrl } from './feedUtils.js'
+
 const DEVICE_TYPES = Object.freeze(['alpr', 'nvr', 'doorbell', 'feed', 'traffic', 'ip', 'drone'])
 const SOURCE_TYPES = Object.freeze(['mjpeg', 'hls'])
 
-const sanitizeStreamUrl = (url) => {
-  if (typeof url !== 'string' || !url.trim()) return ''
-  const u = url.trim()
-  return (u.startsWith('https://') || u.startsWith('http://')) ? u : ''
-}
-
 /** @typedef {{ id: string, name: string, device_type: string, vendor: string | null, lat: number, lng: number, stream_url: string, source_type: string, config: string | null }} DeviceRow */
 
 /**