Warn about vite dev exposure and reflect the course in the page title

SPA:
- DefaultLayout renders a yellow/black hazard-striped v-system-bar at
  the top of every page when import.meta.env.DEV is true, with the
  text "Served by vite dev with HMR — do not expose this instance
  publicly." The whole block is tree-shaken out of the production
  vite build.
- App.vue sets document.title from the nav store's courseName
  ("REF - <course>"), falling back to plain "REF" until hydrate
  finishes or if the API call fails.

Docs:
- README gains "Single-port web interface" and "Hot reloading (local
  development only)" sections spelling out that --hot-reloading runs
  vite dev behind Caddy and must never be used on a publicly
  reachable host, and that SPA source changes require ./ctrl.sh build
  in prod mode since the bundle is baked into the frontend-proxy
  image.
- docs/ARCHITECTURE.md adds /admin and /spa redirect notes, a
  Dev-mode security warning block covering the vite dev attack
  surface, a note on ctrl.sh's COMPOSE_PROFILES=dev wiring, and a
  warning box next to the --hot-reloading command reference.
- .claude/CLAUDE.md splits the web description into separate entries
  for the Flask webapp (internal port only) and the Caddy
  frontend-proxy, with the full routing table, profile gate, and
  security warning.

Author: Nils Bars

.claude/CLAUDE.md

@@ -155,27 +155,35 @@ REF is a containerized platform for hosting programming exercises with isolated
 
 ### Components
 
-1. **Web Application** (`webapp/`) - Flask app on port 8000
+1. **Web Application** (`webapp/`) - Flask app served by uWSGI on internal port 8000 (not published; reached via `frontend-proxy`)
    - `ref/view/` - HTML route handlers (exercises, grading, instances, file browser, visualization, admin student management, system settings, etc.)
    - `ref/services_api/` - JSON endpoints called by services (SSH reverse proxy hooks in `ssh.py`, student container callbacks in `instance.py`)
    - `ref/frontend_api/` - JSON endpoints consumed by the Vue SPA (registration/restore-key in `students.py`, public scoreboard in `scoreboard.py`; mounted under `/api/v2/*` + `/api/scoreboard/*`)
    - `ref/model/` - SQLAlchemy models (users, groups, exercises, instances, submissions, grades, system settings)
    - `ref/core/` - Business logic managers (`ExerciseManager`, `InstanceManager`, `ExerciseImageManager`, `UserManager`, `DockerClient`, etc.)
 
-   Student-facing pages (registration, restore-key, public scoreboard) are served by the Vue SPA under `/spa/*` and talk to `ref/frontend_api/`. Admin pages live under `ref/view/` as Jinja-rendered HTML. The Caddy `frontend-proxy` container fronts both on a single host port 8000 — it reverse-proxies `/spa/*` to `spa-frontend:5173` (dev, with HMR) or serves a baked SPA bundle (prod), serves Flask's `/static/*` directly, and proxies everything else to `web:8000`.
+   Student-facing pages (registration, restore-key, public scoreboard) are served by the Vue SPA under `/spa/*` and talk to `ref/frontend_api/`. Admin pages live under `ref/view/` as Jinja-rendered HTML.
 
-2. **SSH Reverse Proxy** (`ssh-reverse-proxy/`) - Rust-based SSH proxy on port 2222
+2. **Frontend Proxy** (`frontend-proxy/`) - Caddy 2 container that fronts the Flask `web` service and the Vue SPA on a **single host port** (`HTTP_HOST_PORT`, default 8000). Multi-stage Dockerfile: stage 1 builds the SPA with Node; stage 2 is `caddy:2-alpine` with `dist/` baked in at `/srv/spa-dist`. Routes:
+   - `/spa/*` → `spa-frontend:5173` (dev) or baked `/srv/spa-dist` via `file_server` (prod)
+   - `/static/*` → bind-mount of `webapp/ref/static` served directly
+   - `/admin`, `/admin/` → 302 to `/admin/exercise/view`
+   - `/spa` → 308 `/spa/`
+   - everything else → `reverse_proxy web:8000` with `header_up X-Tinyproxy {remote_host}` so Flask's rate limiter keys on the real client IP
+   Dev/prod is selected at container start by `entrypoint.sh` via `$HOT_RELOADING`. The `spa-frontend` service is gated behind the `dev` compose profile, and `ctrl.sh` exports `COMPOSE_PROFILES=dev` when `--hot-reloading` is active. **Never run `--hot-reloading` on a publicly reachable host** — `vite dev` is not a production server. The SPA renders a hazard-striped warning banner when `import.meta.env.DEV` is true.
+
+3. **SSH Reverse Proxy** (`ssh-reverse-proxy/`) - Rust-based SSH proxy on port 2222
    - Routes student SSH connections to exercise containers
    - Uses web API with HMAC-signed requests for authentication and provisioning
    - Supports shell, exec, SFTP, local/remote port forwarding, and X11 forwarding
 
-3. **Instance Container** (`ref-docker-base/`) - Ubuntu 24.04 with dev tools
+4. **Instance Container** (`ref-docker-base/`) - Ubuntu 24.04 with dev tools
    - Isolated per student/exercise under `ref-instances.slice` cgroup
    - SSH server on port 13370
    - Contains `ref-utils` for submission testing
    - `task`/`_task` scripts for submission testing, `reset-env` for container reset
 
-4. **Database** - PostgreSQL 17.2 storing users, groups, exercises, instances, submissions, grades, system settings
+5. **Database** - PostgreSQL 17.2 storing users, groups, exercises, instances, submissions, grades, system settings
 
 ### Connection Flow
 

README.md

@@ -44,6 +44,38 @@ After successfully building REF, the database has to be initialized:
 ./ctrl.sh down
 ```
 
+### Single-port web interface
+
+The Flask web app (`/`, `/admin/*`, `/api/*`), the Vue student SPA
+(`/spa/*`), and Flask's static assets (`/static/*`) are all fronted by
+a single Caddy reverse proxy (`frontend-proxy/`) on host port 8000.
+Students go to `http://<host>:8000/spa/register` (or whichever landing
+page is configured); admins go to `http://<host>:8000/admin/` (which
+redirects to the exercise view). The SSH entry point for student
+containers is unchanged on port 2222.
+
+In production, `frontend-proxy` serves the Vue SPA as a static bundle
+that is baked into the image at `docker build` time via a multi-stage
+Dockerfile — rebuild with `./ctrl.sh build` after any change under
+`spa-frontend/`.
+
+### Hot reloading (local development only)
+
+Use `./ctrl.sh up --hot-reloading` during local development to get
+Flask auto-reload **and** Vite HMR for the SPA. This flag starts an
+extra `spa-frontend` container (running `vite dev`) which is gated
+behind the `dev` compose profile; Caddy then reverse-proxies `/spa/*`
+(including the HMR websocket) to that container.
+
+> ⚠️ **Do not run `--hot-reloading` on a publicly reachable host.**
+> Vite's dev server is not designed for hostile clients — it serves
+> raw source, exposes `/@fs/`, and has had several path-traversal CVEs
+> in recent releases. While `--hot-reloading` is active, the SPA
+> renders a yellow/black hazard-striped warning strip at the top of
+> every page as a visible reminder; the whole warning is tree-shaken
+> out of the production `vite build`, so nothing about it leaks into
+> the prod bundle. See `docs/ARCHITECTURE.md` for the full model.
+
 
 #### Build the custom Linux kernel
 Building the custom Linux kernel is only required if you need the `no-randomize` attribute for some exercises. This attribute allows you to disable ASLR for a specific binary, even if it is a setuid binary. This is not allowed for unmodified kernels. The following assumes that your system is based on Debian and uses GRUB as a bootloader. For other systems or bootloaders, the instructions have to be adapted accordingly.

docs/ARCHITECTURE.md

@@ -142,6 +142,31 @@ fallback) based on `$HOT_RELOADING`.
 - SPA hashed assets (`/spa/assets/*`) are served with
   `public, max-age=31536000, immutable`; `index.html` is `no-cache` so
   deploys are picked up atomically.
+- `/admin` and `/admin/` 302-redirect to `/admin/exercise/view`.
+- `/spa` 308-redirects to `/spa/` so bare URLs get a trailing slash.
+
+**Dev-mode security warning:**
+
+`./ctrl.sh up --hot-reloading` is a **local-development-only** flag.
+When it is set:
+
+1. The `spa-frontend` container is started (gated behind the `dev`
+   compose profile) and runs `vite dev` with HMR.
+2. `frontend-proxy` selects `Caddyfile.dev` and reverse-proxies
+   `/spa/*` (including the HMR websocket) to `spa-frontend:5173`
+   without any auth or IP filter.
+3. `vite dev` serves raw, unbundled source files and exposes a
+   `/@fs/` endpoint. Vite has had several path-traversal CVEs against
+   `/@fs/` in recent releases (CVE-2025-30208/31125/31486/32395/46565);
+   even on a patched version, the dev server is not designed for
+   hostile clients.
+
+**Never run a publicly-reachable REF instance with `--hot-reloading`.**
+To make this obvious in the UI, the SPA `DefaultLayout` renders a
+hazard-striped warning strip at the very top of every page when
+`import.meta.env.DEV` is true; this block is tree-shaken out of the
+production `vite build` entirely, so only dev-mode clients ever see
+it and the prod bundle contains no trace of the warning code.
 
 ### 3. SSH Reverse Proxy (`ssh-reverse-proxy/`)
 
@@ -227,7 +252,7 @@ exercises/<name>/
 ./ctrl.sh build                  # Build Docker images
 ./ctrl.sh up [--debug]           # Start services (--debug attaches with logs)
 ./ctrl.sh up --maintenance       # Start in maintenance mode
-./ctrl.sh up --hot-reloading     # Start with hot reloading
+./ctrl.sh up --hot-reloading     # Start with hot reloading (LOCAL DEV ONLY; see warning below)
 ./ctrl.sh down                   # Stop and remove services
 ./ctrl.sh stop                   # Stop without removing
 ./ctrl.sh restart                # Restart all services
@@ -240,6 +265,22 @@ exercises/<name>/
 
 Pre-flight checks: submodule validation, Docker/cgroup v2 requirements, configuration validation.
 
+When `--hot-reloading` is passed, `ctrl.sh` exports `COMPOSE_PROFILES=dev`
+for every compose subcommand. This activates the `dev` compose profile
+which is the gate on the `spa-frontend` service — without it, `vite dev`
+is not started at all. In prod mode, `ctrl.sh up` unsets
+`COMPOSE_PROFILES` so `spa-frontend` stays off; the other commands
+(`build`, `down`, `stop`, `ps`, `logs`, …) keep the profile active so
+profile-gated services can still be built and cleaned up.
+
+> **SECURITY — do not run `--hot-reloading` on a publicly reachable
+> host.** The flag starts Vite's dev server behind Caddy with no auth,
+> serving raw source over `/spa/*` (including the `/@fs/` endpoint,
+> which has had repeated path-traversal CVEs). The SPA itself renders
+> a hazard-striped warning strip at the top of every page in this mode
+> as a visible reminder. Intended use is local development against
+> `http://localhost:8000` only.
+
 ## Test Structure
 
 ```

spa-frontend/src/App.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, watchEffect } from 'vue';
 import DefaultLayout from './layouts/DefaultLayout.vue';
 import { useNavStore } from './stores/nav';
 import { useTheme } from './theme/useTheme';
 
 const nav = useNavStore();
 const theme = useTheme();
 
+watchEffect(() => {
+  document.title = nav.courseName === 'REF' ? 'REF' : `REF - ${nav.courseName}`;
+});
+
 onMounted(async () => {
   theme.init();
   await nav.hydrate();

spa-frontend/src/layouts/DefaultLayout.vue

@@ -6,6 +6,11 @@ import { useTheme } from '../theme/useTheme';
 const nav = useNavStore();
 const theme = useTheme();
 
+// import.meta.env.DEV is true when Vite serves the app via `vite dev`
+// (HMR); a production `vite build` bakes this to false. The banner is
+// tree-shaken out of the prod bundle entirely.
+const devMode = import.meta.env.DEV;
+
 const themeIcon = computed(() => {
   switch (theme.mode.value) {
     case 'dark':
@@ -31,6 +36,19 @@ const themeLabel = computed(() => {
 
 <template>
   <v-app>
+    <v-system-bar
+      v-if="devMode"
+      class="dev-banner"
+      height="26"
+      role="status"
+      aria-label="Development server warning"
+    >
+      <v-icon size="16" class="mr-2">mdi-alert</v-icon>
+      <span>
+        Served by <strong>vite dev</strong> with HMR &mdash; do not expose
+        this instance publicly.
+      </span>
+    </v-system-bar>
     <v-app-bar color="background" border="b" class="term-appbar">
       <template #prepend>
         <v-app-bar-title class="term-appbar-title">
@@ -78,3 +96,33 @@ const themeLabel = computed(() => {
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+.dev-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: #1a1a1a;
+  background: repeating-linear-gradient(
+    -45deg,
+    #f9b000,
+    #f9b000 12px,
+    #1a1a1a 12px,
+    #1a1a1a 24px
+  );
+}
+.dev-banner > span {
+  padding: 0.15rem 0.5rem;
+  background: #f9b000;
+  border-radius: 2px;
+}
+.dev-banner strong {
+  font-weight: 800;
+}
+</style>