Migration/vue3

.dockerignore

@@ -1,3 +1,3 @@
 node_modules
 npm-debug*
-.nuxt
+dist

.superpowers/sdd/progress.md

@@ -0,0 +1,47 @@
+# Migration progress ledger — COMPLETE
+
+All 15 tasks done. Branch: migration/vue3 (38 commits off master @ 575ee82).
+
+FINAL STATE, verified through the PRODUCTION path (pnpm build + node server/index.js):
+  lint PASS | typecheck PASS (strict) | build PASS
+  All 5 routes load with 0 app console errors and 0 warnings.
+  SPA fallback survives a hard refresh of /jobs. /api/clients returns the 5 real clients.
+
+Stack: Vue 3.5.39 / Vuetify 4.1.4 / Vite 8.1.4 / vue-router 4.6.4 (unplugin-vue-router),
+<script setup lang="ts"> throughout, TS strict. Express 5.2.1 + Mongoose 9.7.4 on Node 24.
+One container, one port: Express serves dist/ AND /api.
+
+ENVIRONMENT:
+  MongoDB  mongodb://192.168.178.75:27017/Avior  (the committed 10.11.194.75 was stale)
+  Daemons  VDR-U/-1/-2 at 192.168.178.61:10000-10002 (live). Phoenix + VAVA genuinely offline.
+  Reference worktree: ../avior-nuxt-reference @ baff6fe — the old Nuxt app, for comparison.
+
+STILL UNVERIFIED — needs the user:
+  - NO DOCKER BUILD HAS EVER RUN. Docker is not installed here; the user declared it out of
+    scope. The Dockerfile is rewritten as a multi-stage build but is UNTESTED, including
+    node:24-alpine and the VITE_COMMIT_SHA build arg (so the footer's commit hash is unproven).
+  - Pause / Resume / Shutdown on a live client were never clicked (real PUTs; shutdown is
+    irreversible). Someone should click Pause once on a real client.
+  - Client.vue's FileWalker / Mover render paths were never exercised (no daemon was in
+    those states).
+
+PRE-EXISTING BUGS FOUND, DELIBERATELY NOT FIXED (report, don't smuggle in fixes):
+  - jobs.vue: selectedJobs.length means the Delete button never shows a count.
+  - jobs.vue: reassignJobs()'s `idx % 5` batching is INERT — idx is a client-ID string, so
+    both branches are always false, the batch never flushes, errorCount is always 0.
+  - Client.vue: a `:v-show=` binding that has never done anything; a duplicated
+    showProcessedLog=false; the author's own `//todo: BUGGED!!!!` dead branch.
+  - Client.vue emits offlineClient as an OBJECT from onclose but a bare STRING from onerror;
+    index.vue's handler would throw on the string. Unreachable today.
+  - Age/ErrorReplace/ErrorSkip/MaxSize Settings: a `watch` on `selectedFormat`, which does not
+    exist in their data or props — so they have NEVER emitted `newdata`. SizeApproxSettings has
+    the same problem via a missing `deep: true`. It does not matter in practice: settingsInternal
+    is the SAME object reference as config.Modules.X.Settings, so v-model mutates the config in
+    place. Proved by changing AgeModule MaxAge 5 -> 99 and confirming the export contained 99.
+  - config.vue: color="gray darken-3" is an invalid palette key ("grey" is real) — it was already
+    a no-op typo in Vuetify 2, so hyphenating it would ADD colour the page never had.
+  - v-col xs="6": dead in BOTH versions. Vuetify 2's VCol breakpoints were ['sm','md','lg','xl'].
+
+ACCEPTED DEVIATIONS (Material Design 3):
+  Typography, elevation (25 levels -> 6), button casing, spacing, and the four dropped theme
+  colours (accent/info/warning/error/success now use Vuetify 4 defaults).

Dockerfile

@@ -1,19 +1,39 @@
-FROM node:20.1.0-alpine
+FROM node:24-alpine AS build
+
+# Vite inlines import.meta.env at build time, so the commit SHA has to be
+# present in the build stage — setting it at runtime would have no effect.
+ARG COMMIT=""
+ENV VITE_COMMIT_SHA=${COMMIT}
+
+WORKDIR /app
+RUN corepack enable && corepack prepare pnpm@11.12.0 --activate
+
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+FROM node:24-alpine AS runtime
 
 ARG COMMIT=""
 LABEL commit=${COMMIT}
 
-RUN mkdir -p /app
 WORKDIR /app
+RUN corepack enable && corepack prepare pnpm@11.12.0 --activate
 
-# Install software
-COPY . /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile --prod
 
-ENV NUXT_ENV_CURRENT_GIT_SHA=${COMMIT}
+COPY server ./server
+COPY --from=build /app/dist ./dist
 
-RUN npm install
-RUN npm run build
+# NODE_ENV=production is load-bearing: without it Express uses its development
+# error handler, which puts stack traces with absolute filesystem paths into
+# HTTP response bodies.
+ENV NODE_ENV=production
+ENV PORT=10009
+ENV MONGO_URL=mongodb://192.168.178.75:27017/Avior
 EXPOSE 10009
-ENV NUXT_HOST=0.0.0.0
-ENV NUXT_PORT=10009
-CMD [ "npm", "start" ]
+
+CMD ["node", "server/index.js"]

README.md

@@ -1,12 +1,15 @@
-# Avior Nuxt frontend
+# Avior frontend
+
 Frontend for displaying data polled from the avior-go project.
 
 ## What is it?
-Avior Nuxt features full configuration and monitoring for an avior-go instance.
+
+Avior features full configuration and monitoring for an avior-go instance.
 For documentation on avior-go, please confer the
 [avior-go repository](https://www.github.com/Spiritreader/avior-go)
 
 ## Registering Clients
+
 Go to frontend settings and add a client name and the address of the avior-go instance.
 avior-go is only designed to work with a private network, as there is no authentication needed to update its configuration and start/stop it.
 An instance is reachable via `http://network-ip:10000`.
@@ -24,9 +27,9 @@ You can start, pause and stop clients and view its log files
 ### Client settings
 You can configure all available options there. Documentation is available in avior-go. These settings are individual to each client
 
-### Global settings: 
+### Global settings:
 
-You can add and remove clients that are eligible for receiving jobs here. 
+You can add and remove clients that are eligible for receiving jobs here.
 **Clients**
 - Priority determines which client will be filled wit jobs first, up to the maximum. After that, the next client will be chosen for new jobs
 - Start and end time configure during which times a client can *encode files*. It does not influence the assignment rules
@@ -36,34 +39,85 @@ You can add and remove clients that are eligible for receiving jobs here.
 
 This is a global configuration instance for the LogMatch module and the trimming feature of avior-go.
 
+## Stack
+
+- [Vue 3](https://vuejs.org/) + TypeScript, `<script setup>` throughout
+- [Vuetify 4](https://vuetifyjs.com/) for UI components (Material Design 3)
+- [Vite](https://vitejs.dev/) for dev server and bundling
+- [vue-router](https://router.vuejs.org/), file-based via `unplugin-vue-router` (routes are just files under `src/pages`)
+- [Express 5](https://expressjs.com/) + [Mongoose 9](https://mongoosejs.com/) for the API and MongoDB access
+
+## Architecture
 
-## Installation
+This is a single-page app with no server-side rendering. Express serves two
+things on the same port: the built static SPA (`dist/`) and the `/api` routes.
 
-### Building manually
+There are two independent data paths:
+- **Browser → `/api` → Express → MongoDB.** This is the client registry
+  (which avior-go instances exist, their names/addresses/priorities/etc). App
+  code always calls `/api/...` with a relative path — no base URL is
+  configured anywhere, in dev or in production.
+- **Browser → avior-go daemons, directly.** Once the client registry gives
+  the browser a daemon's LAN address, the browser talks to that daemon
+  directly (e.g. `http://network-ip:10000`) to start/stop jobs, stream logs,
+  etc. Express is never in this path, and nothing proxies it.
+
+## Development
 
 ```bash
-$ npm install
-$ npm run dev
+pnpm install
+
+pnpm dev:api   # Express API on :10009
+pnpm dev       # Vite dev server, normally :5173
+```
+
+Vite proxies `/api/*` requests to `http://localhost:10009` in dev, so the
+app-origin `/api` calls work the same way they do in production. If port
+5173 is already taken, Vite will pick the next free port and print which one
+it used.
 
-$ npm run build
-$ npm run start
+## Production
+
+```bash
+pnpm build          # builds the SPA into dist/
+node server/index.js   # or: pnpm start
 ```
 
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+Express serves the built `dist/` and `/api` together on a single `PORT`
+(default `10009`).
+
+## Configuration
+
+Environment variables:
+- `MONGO_URL` — MongoDB connection string. Defaults to
+  `mongodb://192.168.178.75:27017/Avior`. There is no `config.json` file or
+  volume mount for this anymore — set the environment variable instead.
+- `PORT` — port Express listens on. Defaults to `10009`.
+
+`VITE_COMMIT_SHA` is inlined into the app **at build time** by Vite (it shows
+up in the footer). Setting it as a runtime environment variable on an
+already-built `dist/` has no effect — it must be set when `pnpm build` runs.
 
-Modify the config.json file and change the URL to your mongodb instance.
+## Requirements
 
-### Docker
+- Node >= 20.19 (required by Mongoose 9)
+- [pnpm](https://pnpm.io/) — this project uses pnpm exclusively; do not use
+  `npm install` or `yarn`.
 
-This project is also available on dockerhub. Make sure to map a database configuration by creating a `config.json` like so:
-```json
-{
-    "url": "mongodb://your-url"
-}
+## Linting
+
+```bash
+pnpm lint
 ```
 
-Then run the docker container:
+ESLint flat config (`eslint.config.js`) covering `src/**/*.{ts,vue}` (Vue 3 +
+TypeScript), `server/**/*.js` (CommonJS Node), and `scripts/*.mjs` (Node ESM).
+
+## Docker
+
+This project is also available on dockerhub. Pass your database URL as an
+environment variable:
 
 ```docker
-docker run --publish=10009:10009--volume=/<path-to-config>/config.json:app/api/config.json spiritreader/avior-nuxt
+docker run --publish=10009:10009 --env MONGO_URL=mongodb://your-url/Avior spiritreader/avior-nuxt
 ```