fix(i18n): add missing admin.custom_css labels (en + ru)

These keys were referenced in SettingsForm but absent from both locales, so they rendered as raw keys instead of the intended text.

.dockerignore

@@ -5,9 +5,25 @@ data/
 coverage/
 .git/
 .gitea/
+.github/
 .claude/
+.idea/
+.vscode/
 .env
 .env.*
 !.env.example
-*.md
+plans/
+PLAN_PROMPT.md
+README.md
+RELEASE_NOTES.md
 *.log
+**/*.test.ts
+**/*.spec.ts
+**/__tests__/
+tests/
+playwright-report/
+test-results/
+*.swp
+*.swo
+.DS_Store
+Thumbs.db

.env.example

@@ -1,26 +1,39 @@
-# Database
+# --- Database ---
 DATABASE_URL="file:../data/launcher.db"
 
-# Authentication
-JWT_SECRET="change-me-to-a-random-64-char-string"
+# --- Authentication (REQUIRED) ---
+# Generate a strong secret with: openssl rand -hex 32
+# The server refuses to start with placeholder or short values (< 32 chars).
+JWT_SECRET=""
 JWT_EXPIRY="15m"
 REFRESH_TOKEN_EXPIRY="7d"
 
-# Application
+# --- Integration credential encryption (REQUIRED if any integration is configured) ---
+# Must be DIFFERENT from JWT_SECRET so rotating one does not invalidate the other.
+# Generate a strong secret with: openssl rand -hex 32
+INTEGRATION_ENCRYPTION_KEY=""
+
+# --- Application ---
 APP_PORT=3000
 APP_HOST="0.0.0.0"
+# ORIGIN must match the public URL users visit. When it begins with https://,
+# session cookies are issued with the Secure flag. Set this when running behind
+# a reverse proxy that terminates TLS, e.g. ORIGIN="https://launcher.example.com"
+ORIGIN="http://localhost:3000"
+
+# Legacy alias — keep for older docs; not used internally.
 APP_URL="http://localhost:3000"
 
-# OAuth / OIDC (optional — configure here or in Admin > Settings)
+# --- OAuth / OIDC (optional — configure here or in Admin > Settings) ---
 OAUTH_CLIENT_ID=""
 OAUTH_CLIENT_SECRET=""
 OAUTH_DISCOVERY_URL=""
 OAUTH_REDIRECT_URI=""
 
-# Guest mode (true = allow unauthenticated dashboard access)
+# Guest mode (true = allow unauthenticated dashboard access to guest-accessible boards)
 GUEST_MODE="true"
 
-# Health check interval (cron expression — every 5 minutes)
+# Healthcheck cron expression — default every 5 minutes
 HEALTHCHECK_CRON="*/5 * * * *"
 HEALTHCHECK_TIMEOUT_MS="5000"
 
@@ -28,5 +41,19 @@ HEALTHCHECK_TIMEOUT_MS="5000"
 DOCKER_SOCKET_PATH="/var/run/docker.sock"
 TRAEFIK_API_URL=""
 
+# Allow outbound fetches to private/internal hosts. Default is "false" which
+# blocks SSRF (loopback, RFC1918, link-local, cloud-metadata). Self-hosted
+# users monitoring services on a LAN typically want this set to "true".
+ALLOW_PRIVATE_NETWORK_FETCH="false"
+
+# Run background jobs (healthcheck, backup) in THIS process. Set to "false" when
+# scaling horizontally so only one node runs schedulers.
+RUN_SCHEDULERS="true"
+
+# Optional bearer token for /api/metrics. When set, scrapers must send
+# `Authorization: Bearer <token>`. When unset, the endpoint is open (typical
+# when the scraper lives on the same private network).
+METRICS_TOKEN=""
+
 # Node environment
 NODE_ENV="production"

.facts-sync.json

@@ -0,0 +1,8 @@
+{
+  "last_commit": "8bdbcec7052a7838c2f9ef025548fb4a37679748",
+  "last_sync": "2026-04-10T12:00:00Z",
+  "tracked_files": {
+    "gitea-python-ci-cd.md": "sha256:30bb3e8d1487fdfed67472eaf11c641f4126a282e03200f3bbee589a7ec727f0",
+    "gitea-release-workflow.md": "sha256:5eb64789fca062b2138ca7661b942c9fc9c304f63326844ff6f6724e7e05b08c"
+  }
+}

.gitea/workflows/ci.yml

@@ -1,64 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [master, main]
-  pull_request:
-    branches: [master, main]
-
-jobs:
-  lint-and-check:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Generate Prisma client
-        run: npx prisma generate
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Format check
-        run: npm run format:check
-
-      - name: Type check
-        run: npm run check
-
-  test:
-    runs-on: ubuntu-latest
-    needs: lint-and-check
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Generate Prisma client
-        run: npx prisma generate
-
-      - name: Run tests
-        run: npm test
-
-  docker-build:
-    runs-on: ubuntu-latest
-    needs: test
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Build Docker image
-        run: docker build -t web-app-launcher:ci .

.gitea/workflows/release.yml

@@ -0,0 +1,129 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set image metadata
+        id: meta
+        run: |
+          TAG="${{ gitea.ref_name }}"
+          VERSION="${TAG#v}"
+          REGISTRY="${{ gitea.server_url }}"
+          REGISTRY="${REGISTRY#https://}"
+          REGISTRY="${REGISTRY#http://}"
+          IMAGE="${REGISTRY}/${{ gitea.repository }}"
+          echo "version=${VERSION}" >> "$GITHUB_OUTPUT"
+          echo "image=${IMAGE}" >> "$GITHUB_OUTPUT"
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Gitea Container Registry
+        run: |
+          echo "${{ secrets.DEPLOY_TOKEN }}" | docker login "${{ gitea.server_url }}" -u "${{ gitea.repository_owner }}" --password-stdin
+
+      - name: Build and push multi-arch Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          provenance: true
+          sbom: true
+          build-args: |
+            VERSION=${{ steps.meta.outputs.version }}
+          tags: |
+            ${{ steps.meta.outputs.image }}:${{ steps.meta.outputs.version }}
+            ${{ steps.meta.outputs.image }}:latest
+          labels: |
+            org.opencontainers.image.source=${{ gitea.server_url }}/${{ gitea.repository }}
+            org.opencontainers.image.description=Self-hosted web app launcher dashboard
+            org.opencontainers.image.version=${{ steps.meta.outputs.version }}
+            org.opencontainers.image.licenses=MIT
+
+  release:
+    runs-on: ubuntu-latest
+    needs: docker
+    steps:
+      - name: Fetch RELEASE_NOTES.md only
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: RELEASE_NOTES.md
+          sparse-checkout-cone-mode: false
+
+      - name: Create Gitea release
+        env:
+          DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
+        run: |
+          TAG="${{ gitea.ref_name }}"
+          VERSION="${TAG#v}"
+          BASE_URL="${{ gitea.server_url }}/api/v1/repos/${{ gitea.repository }}"
+
+          IS_PRE="false"
+          if echo "$TAG" | grep -qE '(alpha|beta|rc)'; then
+            IS_PRE="true"
+          fi
+
+          # Extract release notes for THIS version only. Falls back to whole file
+          # if the markers aren't found.
+          if [ -f RELEASE_NOTES.md ]; then
+            BODY=$(awk -v v="$VERSION" '
+              BEGIN {capture = 0}
+              /^## (v?)/ {
+                if (capture) {exit}
+                if ($0 ~ "## v?"v"([^0-9]|$)") {capture = 1; next}
+              }
+              capture {print}
+            ' RELEASE_NOTES.md)
+            if [ -z "$BODY" ]; then
+              BODY=$(cat RELEASE_NOTES.md)
+            fi
+            BODY_JSON=$(printf '%s' "$BODY" | jq -Rs '.')
+            echo "Found RELEASE_NOTES.md (extracted section for $VERSION)"
+          else
+            BODY_JSON='""'
+            echo "No RELEASE_NOTES.md found — release will have no body"
+          fi
+
+          EXISTING=$(curl -s -o /dev/null -w "%{http_code}" \
+            "$BASE_URL/releases/tags/$TAG" \
+            -H "Authorization: token $DEPLOY_TOKEN")
+
+          if [ "$EXISTING" = "200" ]; then
+            RELEASE_ID=$(curl -s "$BASE_URL/releases/tags/$TAG" \
+              -H "Authorization: token $DEPLOY_TOKEN" | jq -r '.id')
+            curl -s -X PATCH "$BASE_URL/releases/$RELEASE_ID" \
+              -H "Authorization: token $DEPLOY_TOKEN" \
+              -H "Content-Type: application/json" \
+              -d "{
+                \"name\": \"$VERSION\",
+                \"body\": $BODY_JSON,
+                \"draft\": false,
+                \"prerelease\": $IS_PRE
+              }"
+            echo "Updated existing release $RELEASE_ID for $TAG"
+          else
+            curl -s -X POST "$BASE_URL/releases" \
+              -H "Authorization: token $DEPLOY_TOKEN" \
+              -H "Content-Type: application/json" \
+              -d "{
+                \"tag_name\": \"$TAG\",
+                \"name\": \"$VERSION\",
+                \"body\": $BODY_JSON,
+                \"draft\": false,
+                \"prerelease\": $IS_PRE
+              }"
+            echo "Created release for $TAG"
+          fi

.gitea/workflows/test.yml

@@ -0,0 +1,86 @@
+name: Lint & Test
+
+on:
+  push:
+    branches: [master, main]
+  pull_request:
+    branches: [master, main]
+
+env:
+  NODE_VERSION: '22'
+
+jobs:
+  lint-and-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npx prisma generate
+      - run: npm run lint
+      - run: npm run format:check
+      - run: npm run check
+
+  test:
+    runs-on: ubuntu-latest
+    needs: lint-and-check
+    env:
+      # Deterministic test secrets so the env validator at module import doesn't trip.
+      JWT_SECRET: 'test-secret-must-be-at-least-32-characters-long-for-validation'
+      INTEGRATION_ENCRYPTION_KEY: 'integration-test-key-must-be-at-least-32-characters'
+      ORIGIN: 'http://localhost:3000'
+      DATABASE_URL: 'file:./test.db'
+      NODE_ENV: 'test'
+      RUN_SCHEDULERS: 'false'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npx prisma generate
+      - run: npx prisma migrate deploy
+      - run: npm test
+
+  build:
+    runs-on: ubuntu-latest
+    needs: lint-and-check
+    env:
+      JWT_SECRET: 'build-secret-must-be-at-least-32-characters-long-for-validation'
+      INTEGRATION_ENCRYPTION_KEY: 'integration-build-key-must-be-at-least-32-characters'
+      DATABASE_URL: 'file:./build.db'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npx prisma generate
+      - run: npm run build
+
+  docker-build:
+    runs-on: ubuntu-latest
+    needs: lint-and-check
+    steps:
+      - uses: actions/checkout@v4
+      - name: Smoke-test Dockerfile build
+        run: docker build -t web-app-launcher:ci-smoke --build-arg VERSION=ci .
+
+  audit:
+    runs-on: ubuntu-latest
+    needs: lint-and-check
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+      - run: npm ci
+      # Production-only audit. devDeps regularly carry low-severity advisories
+      # we accept; only block on production-shipped CVEs.
+      - run: npm audit --omit=dev --audit-level=high

.vex.toml

@@ -0,0 +1,54 @@
+# vex configuration — https://github.com/tenatarika/vex
+#
+# Place this file in your project root as .vex.toml
+
+# Glob patterns to exclude from indexing (gitignore syntax, on top of .gitignore)
+# exclude = [
+#     "vendor/**",
+#     "node_modules/**",
+#     "*.generated.go",
+#     "dist/**",
+# ]
+
+# Default output format: "text", "json", or "compact"
+# format = "text"
+
+semantic = true
+auto_update = true
+
+# Embedder used for semantic indexing. Known IDs: minilm-l6-v2 (default).
+# Changing the embedder requires a full reindex.
+# embedder = "minilm-l6-v2"
+
+# Cache directory override. Defaults to the platform cache location.
+#   macOS:   ~/Library/Caches/vex
+#   Linux:   $XDG_CACHE_HOME/vex   (fallback: ~/.cache/vex)
+#   Windows: %LOCALAPPDATA%\vex    (fallback: %USERPROFILE%\AppData\Local\vex)
+# Accepts absolute paths, "~/..." or paths relative to this file (e.g. "./.vex/cache").
+# Can also be overridden per-invocation with --cache-dir or $VEX_CACHE_DIR.
+# cache_dir = "./.vex/cache"
+
+# Store the index inside the project as `<project>/.vex_cache/`. Useful when
+# the cache should travel with the project (e.g. on a moved or renamed
+# directory). vex writes a `.gitignore` inside it so contents are not
+# committed. Overridden by `cache_dir`, `--cache-dir`, or $VEX_CACHE_DIR.
+# local_cache = false
+
+# Thread count for parallel indexing (index/update/watch).
+#   * unset  — 80% of available cores, rounded up (default, leaves headroom)
+#   * 0      — use all cores (explicit opt-in to max throughput)
+#   * N      — exactly N workers
+# Overridable per-invocation with `-j/--jobs` or $VEX_JOBS.
+# jobs = 4
+
+# Build the persistent call-graph section. Disabling falls back to live-scan
+# for `vex callers`/`vex callees` (slower per-query, but saves indexing
+# time on large monorepos). The opt-out is persisted in the manifest so
+# `vex update` does not silently re-add the section.
+# Per-invocation override: `vex index --no-call-graph`.
+# call_graph = true
+
+# Build the BM25 channel. Disabling drops the third RRF channel and keeps
+# only structural (+ semantic). Same persistence rules as `call_graph`.
+# Per-invocation override: `vex index --no-bm25`.
+# bm25 = true

Dockerfile

@@ -1,4 +1,6 @@
-# Stage 1: Install dependencies
+# syntax=docker/dockerfile:1
+
+# Stage 1: Install dependencies (includes devDeps needed for build)
 FROM node:22-alpine AS deps
 WORKDIR /app
 COPY package.json package-lock.json ./
@@ -11,30 +13,50 @@ COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 RUN npx prisma generate
 RUN npm run build
-RUN npm prune --production
+# Drop devDependencies so the production image stays small.
+RUN npm prune --omit=dev
 
-# Stage 3: Production image
+# Stage 3: Production runtime image
 FROM node:22-alpine AS production
 WORKDIR /app
 
+# Embed the version (build-time) so /api/health can echo it later.
+ARG VERSION=0.0.0
+ENV APP_VERSION=$VERSION
+
+# Install curl for the entrypoint healthcheck. Tini for proper signal handling.
+RUN apk add --no-cache curl tini
+
 RUN addgroup -S appgroup && adduser -S appuser -G appgroup
 
-COPY --from=build /app/build ./build
-COPY --from=build /app/node_modules ./node_modules
-COPY --from=build /app/package.json ./
-COPY --from=build /app/prisma ./prisma
+COPY --from=build --chown=appuser:appgroup /app/build ./build
+COPY --from=build --chown=appuser:appgroup /app/node_modules ./node_modules
+COPY --from=build --chown=appuser:appgroup /app/package.json ./
+COPY --from=build --chown=appuser:appgroup /app/prisma ./prisma
 
-RUN mkdir -p /app/data && chown -R appuser:appgroup /app
+# Persistent data dir + uploads subdir. The named volume mount in
+# docker-compose targets /app/data, so uploads survive container rebuilds.
+RUN mkdir -p /app/data /app/data/uploads /app/data/uploads/wallpapers /app/data/backups \
+	&& chown -R appuser:appgroup /app /app/data
 
 USER appuser
 
 ENV NODE_ENV=production
 ENV APP_PORT=3000
 ENV APP_HOST=0.0.0.0
+ENV UPLOADS_DIR=/app/data/uploads
 
 EXPOSE 3000
 
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
-	CMD wget -qO- http://localhost:3000/api/health || exit 1
+HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
+	CMD curl -sf http://localhost:3000/api/health || exit 1
 
-CMD ["sh", "-c", "npx prisma migrate deploy 2>/dev/null || npx prisma db push --skip-generate && node build"]
+# Entrypoint:
+#   - Always run `prisma migrate deploy`. On an empty DB this creates the schema
+#     from the migration history (no separate `db push` bootstrap needed); on an
+#     existing DB it applies pending migrations only. No silent fallback — drift
+#     and migration failures surface loudly.
+#   - Default ORIGIN to localhost:APP_PORT so dev compose works, but production
+#     deployments MUST set ORIGIN to the public URL for Secure cookies.
+ENTRYPOINT ["/sbin/tini", "--"]
+CMD ["sh", "-c", "npx prisma migrate deploy && ORIGIN=${ORIGIN:-http://localhost:${APP_PORT:-3000}} node build"]

README.md

@@ -0,0 +1,121 @@
+# Web App Launcher
+
+A self-hosted dashboard for organizing, monitoring, and launching web applications. Built with SvelteKit, Prisma (SQLite), and Tailwind CSS.
+
+## Features
+
+- **App registry** — add apps with icons, tags, and categories; automatic healthcheck monitoring with sparkline history
+- **Boards & widgets** — customizable dashboards with drag-and-drop, resizable widget columns, and inline WYSIWYG editing
+- **Service integrations** — connect to media services, Planka, and more to display live data in widgets
+- **Authentication** — local accounts + OAuth/Authentik; per-board access control; API tokens
+- **Localization** — English and Russian
+- **PWA** — installable, multi-tab sync, auto-discovery bookmarklet
+- **SQLite backup/restore** — full database backup from the admin panel
+
+## Quick Start
+
+```bash
+git clone https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher.git
+cd web-app-launcher
+
+# Generate two strong secrets
+export JWT_SECRET=$(openssl rand -hex 32)
+export INTEGRATION_ENCRYPTION_KEY=$(openssl rand -hex 32)
+
+docker compose up -d
+```
+
+The app is available at `http://localhost:3000`. On first launch, create an admin account at the setup page.
+
+The launcher **refuses to start** if `JWT_SECRET` or `INTEGRATION_ENCRYPTION_KEY` is missing, shorter than 32 characters, or set to a known placeholder. This is intentional — running with the old `change-me-…` defaults would let anyone mint admin tokens.
+
+## Configuration
+
+Environment variables (set in `docker-compose.yml` or `.env`):
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `APP_PORT` | `3000` | Port to expose |
+| `JWT_SECRET` | **required** | Strong secret for JWT signing. Generate with `openssl rand -hex 32`. |
+| `INTEGRATION_ENCRYPTION_KEY` | **required** | Strong secret for encrypting stored integration credentials. Must differ from `JWT_SECRET`. Generate with `openssl rand -hex 32`. |
+| `ORIGIN` | `http://localhost:$APP_PORT` | Public URL users visit. When set to `https://...`, session cookies are issued with the Secure flag. **Set this to your public https URL when behind a reverse proxy.** |
+| `GUEST_MODE` | `true` | Allow unauthenticated access to guest-flagged boards |
+| `HEALTHCHECK_CRON` | `*/5 * * * *` | App healthcheck interval |
+| `HEALTHCHECK_TIMEOUT_MS` | `5000` | Healthcheck request timeout |
+| `ALLOW_PRIVATE_NETWORK_FETCH` | `false` (`true` in dev) | Allow outbound fetches to RFC1918/loopback/link-local. Self-hosted users monitoring LAN services usually want `true`. Off by default in prod to mitigate SSRF. |
+| `RUN_SCHEDULERS` | `true` | Run background jobs (healthcheck, backup) in this process. Set `false` on extra horizontal replicas. |
+| `OAUTH_CLIENT_ID` | — | OAuth provider client ID |
+| `OAUTH_CLIENT_SECRET` | — | OAuth provider client secret |
+| `OAUTH_DISCOVERY_URL` | — | OpenID Connect discovery URL |
+| `METRICS_TOKEN` | — | Optional bearer token for `/api/metrics`. Unset = open (private-network setups) |
+
+## Production deployment
+
+### Reverse proxy (Traefik / Caddy / Nginx)
+
+The launcher must know its public URL to issue secure cookies. Set `ORIGIN=https://launcher.example.com` and terminate TLS at the proxy. Example Traefik labels:
+
+```yaml
+services:
+  web-app-launcher:
+    # remove `ports:` mapping
+    networks: [traefik, launcher-net]
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.launcher.rule=Host(`launcher.example.com`)
+      - traefik.http.routers.launcher.entrypoints=websecure
+      - traefik.http.routers.launcher.tls.certresolver=letsencrypt
+      - traefik.http.services.launcher.loadbalancer.server.port=3000
+    environment:
+      - ORIGIN=https://launcher.example.com
+```
+
+### Volume backup
+
+```bash
+docker run --rm \
+  -v web-app-launcher_launcher-data:/data \
+  -v "$PWD":/backup \
+  alpine tar czf /backup/launcher-backup.tar.gz -C /data .
+```
+
+### Upgrade
+
+```bash
+docker compose pull && docker compose up -d
+```
+
+Database migrations run automatically on container start via `prisma migrate deploy`. The previous `db push` fallback was removed because it can silently drop columns on schema drift.
+
+### Breaking changes when upgrading from versions ≤ 0.0.x
+
+The 0.1.0 hardening release is a one-way upgrade with three breaking changes:
+
+1. **`INTEGRATION_ENCRYPTION_KEY` is required and must differ from `JWT_SECRET`.** The launcher will refuse to start without it. Previously the integration key was derived from `JWT_SECRET`; all stored integration credentials (Planka, Authentik, Pi-hole, Portainer, Gitea, Immich, etc.) **will be undecryptable after the upgrade** and must be re-entered through the admin UI.
+
+2. **All users will be logged out and all API tokens / invites will be revoked.** The hardening migration drops the `Session`, `Invite`, and `ApiToken` tables to switch from bcrypt-hashed storage to sha256 (so token validation is O(1) instead of O(N) bcrypt comparisons). Users will need to log in once; admins need to reissue API tokens and pending invites.
+
+3. **Uploaded icons / wallpapers move from `static/uploads/` to `/app/data/uploads/`.** This makes them persist across container rebuilds. On upgrade, copy any existing files from your previous `static/uploads/` mount into the `launcher-data` volume:
+
+   ```bash
+   # if you previously mounted `./static/uploads:/app/static/uploads`
+   docker run --rm \
+     -v "$PWD/static/uploads:/src:ro" \
+     -v web-app-launcher_launcher-data:/dst \
+     alpine sh -c "mkdir -p /dst/uploads && cp -r /src/. /dst/uploads/"
+   ```
+
+Take a backup before upgrading.
+
+## Development
+
+```bash
+npm install
+npx prisma generate
+# strong dev secrets are already in .env (gitignored)
+npm run dev
+```
+
+## License
+
+MIT

RELEASE_NOTES.md

@@ -0,0 +1,99 @@
+## v0.0.1 (2026-04-10)
+
+Initial release of Web App Launcher — a self-hosted dashboard for organizing, monitoring, and launching web applications.
+
+### Features
+
+- **Dashboard system** — boards, sections, and widgets with drag-and-drop reordering ([b0d77d3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b0d77d3), [a6b09aa](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/a6b09aa))
+- **App registry & healthcheck** — register apps with icons, tags, categories; automatic status monitoring with sparkline history ([4d941f5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/4d941f5), [c5f5f84](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c5f5f84))
+- **Authentication** — local auth + OAuth/Authentik integration ([2c001df](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/2c001df), [bf4e508](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/bf4e508))
+- **Per-board access control** — role-based board visibility ([5bb4fbc](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5bb4fbc))
+- **Service integrations** — media services, Planka, and six additional integration types ([114dee5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/114dee5), [d73fb9c](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/d73fb9c), [55e220b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/55e220b))
+- **Widget system** — multi-entity picker, column span resizing, visual app selector grid ([5af670f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5af670f), [f559c93](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/f559c93), [17c8407](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/17c8407))
+- **WYSIWYG inline editing** — edit dashboards in-place ([a6b09aa](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/a6b09aa))
+- **SQLite database backup** — replace JSON import/export with full DB backup ([b0439e3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b0439e3))
+- **Admin panel** — user management with deletion confirmation ([c5166ba](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c5166ba), [65783e3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/65783e3))
+- **Localization** — English and Russian ([477c0e4](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/477c0e4))
+- **PWA support** — installable app with auto-discovery and multi-tab sync ([dd6958b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/dd6958b))
+- **UI polish** — ambient backgrounds, user theme overrides, bits-ui dropdown, collapsible sidebar ([0bd30c5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/0bd30c5), [c6a7de8](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c6a7de8), [b5166d9](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b5166d9))
+
+### Bug Fixes
+
+- SSRF protection on URL preview endpoint ([d90507a](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/d90507a))
+- Enforce API token scope on requests ([215c8fd](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/215c8fd))
+- HLS.js for fullscreen camera stream ([819283f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/819283f))
+- Search dialog and store fixes ([c62ca79](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c62ca79), [bcde710](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/bcde710))
+- SVG favicon and PWA manifest ([4326d95](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/4326d95))
+- Polish empty states and status page layout ([76ce85c](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/76ce85c))
+
+### Performance
+
+- Batch-load app status history to eliminate N+1 requests ([aedc91e](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/aedc91e), [92eeead](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/92eeead))
+- Optimize cold start with lazy-loading icons and parallel DB queries ([1e3a04f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/1e3a04f))
+
+---
+
+### Development / Internal
+
+- CI/CD pipeline: lint & test workflow, release workflow with Docker push and Gitea releases
+- Prisma schema and migrations for all entities
+- Linter and a11y warning cleanup ([44e1849](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/44e1849))
+- Security review fixes ([5a6002b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5a6002b))
+
+---
+
+<details>
+<summary>All Commits</summary>
+
+| Hash | Message | Author |
+|------|---------|--------|
+| [76ce85c](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/76ce85c) | fix: polish empty states and status page layout | alexei.dolgolyov |
+| [aedc91e](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/aedc91e) | perf: batch-load app status history server-side to eliminate N+1 requests | alexei.dolgolyov |
+| [b5166d9](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b5166d9) | refactor: header user menu with bits-ui dropdown, collapsible sidebar boards | alexei.dolgolyov |
+| [44e1849](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/44e1849) | fix: resolve all linter errors and a11y warnings | alexei.dolgolyov |
+| [f96cbbc](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/f96cbbc) | chore(i18n): add locale keys for widget resize, delete user, multi-picker | alexei.dolgolyov |
+| [5af670f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5af670f) | feat: multi-entity picker for status widget app selection | alexei.dolgolyov |
+| [f559c93](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/f559c93) | feat: widget column span resizing with visual size picker | alexei.dolgolyov |
+| [65783e3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/65783e3) | feat: user deletion confirmation modal | alexei.dolgolyov |
+| [1e3a04f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/1e3a04f) | perf: optimize cold start by lazy-loading icons and parallelizing DB queries | alexei.dolgolyov |
+| [17c8407](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/17c8407) | feat(widget-config): visual app selector grid with search and icons | alexei.dolgolyov |
+| [c5f5f84](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c5f5f84) | feat(app-form): icon picker, tag/category autocomplete, typography | alexei.dolgolyov |
+| [a6b09aa](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/a6b09aa) | feat(inline-edit): add WYSIWYG inline dashboard editing mode | alexei.dolgolyov |
+| [b0439e3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b0439e3) | feat(backup): replace JSON import/export with SQLite database backup system | alexei.dolgolyov |
+| [d479726](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/d479726) | feat: add app edit page with pre-populated form | alexei.dolgolyov |
+| [44bbf7b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/44bbf7b) | fix(service-integrations): resolve type errors and test failures | alexei.dolgolyov |
+| [55e220b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/55e220b) | feat(service-integrations): phases 9-10 — media integrations + Planka | alexei.dolgolyov |
+| [d73fb9c](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/d73fb9c) | feat(service-integrations): phases 3-8 — six service integrations | alexei.dolgolyov |
+| [50e8519](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/50e8519) | feat(service-integrations): phase 2 — integration widget & app form UI | alexei.dolgolyov |
+| [114dee5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/114dee5) | feat(service-integrations): phase 1 — integration architecture foundation | alexei.dolgolyov |
+| [c62ca79](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c62ca79) | fix: delay search dialog close so link navigation fires first | alexei.dolgolyov |
+| [bcde710](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/bcde710) | fix: search store now parses API envelope response correctly | alexei.dolgolyov |
+| [92eeead](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/92eeead) | perf: batch-load app history to eliminate N+1 fetches on board load | alexei.dolgolyov |
+| [4326d95](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/4326d95) | fix: use SVG icon for favicon and PWA manifest | alexei.dolgolyov |
+| [d90507a](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/d90507a) | fix: add SSRF protection to URL preview endpoint | alexei.dolgolyov |
+| [819283f](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/819283f) | fix: use HLS.js for fullscreen camera stream | alexei.dolgolyov |
+| [215c8fd](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/215c8fd) | fix: enforce API token scope on requests | alexei.dolgolyov |
+| [014de02](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/014de02) | fix: address final review blockers | alexei.dolgolyov |
+| [1c0a7cb](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/1c0a7cb) | feat: Phases 4-7 — Full Feature Expansion (26 features) | alexei.dolgolyov |
+| [8d78478](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/8d78478) | feat: add IconGrid, EntityPicker controls and enhance search panel | alexei.dolgolyov |
+| [395ed82](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/395ed82) | fix: address all final review findings for Phase 3 | alexei.dolgolyov |
+| [7d8a8fb](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/7d8a8fb) | feat(phase3): phase 7 - integration & polish | alexei.dolgolyov |
+| [dd6958b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/dd6958b) | feat(phase3): PWA, auto-discovery, bookmarklet, multi-tab sync | alexei.dolgolyov |
+| [c6a7de8](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c6a7de8) | feat(phase3): import/export, sparklines, user theme overrides | alexei.dolgolyov |
+| [cba160e](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/cba160e) | fix: address all code review findings | alexei.dolgolyov |
+| [5a6002b](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5a6002b) | fix: address security findings from final review | alexei.dolgolyov |
+| [87ed928](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/87ed928) | feat(phase2): phase 6 - integration & polish | alexei.dolgolyov |
+| [5bb4fbc](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/5bb4fbc) | feat(phase2): per-board access control UI | alexei.dolgolyov |
+| [477c0e4](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/477c0e4) | feat(phase2): localization EN/RU + additional widget types | alexei.dolgolyov |
+| [bf4e508](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/bf4e508) | feat(phase2): OAuth/Authentik integration + drag-and-drop reordering | alexei.dolgolyov |
+| [bb3b1a5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/bb3b1a5) | fix: resolve runtime errors and missing routes | alexei.dolgolyov |
+| [e6b50fb](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/e6b50fb) | feat(mvp): phase 8 - integration, testing & deployment | alexei.dolgolyov |
+| [0bd30c5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/0bd30c5) | feat(mvp): phase 7 - UI polish & ambient backgrounds | alexei.dolgolyov |
+| [c5166ba](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/c5166ba) | feat(mvp): phase 6 - admin panel | alexei.dolgolyov |
+| [b0d77d3](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/b0d77d3) | feat(mvp): phase 5 - board, section & widget system | alexei.dolgolyov |
+| [4d941f5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/4d941f5) | feat(mvp): phase 4 - app registry & healthcheck | alexei.dolgolyov |
+| [2c001df](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/2c001df) | feat(mvp): phase 3 - authentication system | alexei.dolgolyov |
+| [f1b1aa5](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/f1b1aa5) | feat(mvp): phase 2 - database schema & services layer | alexei.dolgolyov |
+| [cf6bde2](https://git.dolgolyov-family.by/alexei.dolgolyov/web-app-launcher/commit/cf6bde2) | feat(mvp): phase 1 - project scaffolding & tooling | alexei.dolgolyov |
+
+</details>

design-mockups/01-command-deck.html

@@ -0,0 +1,789 @@
+<!doctype html>
+<html lang="en" class="dark">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Web App Launcher — Command Deck</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			:root {
+				--bg: #070a0d;
+				--panel: #0d1217;
+				--panel-2: #10171e;
+				--line: #1d2730;
+				--line-bright: #2b3946;
+				--ink: #e7eef3;
+				--ink-dim: #7c8b97;
+				--ink-faint: #4a5763;
+				--accent: #36e0a4; /* tactical green */
+				--accent-2: #ffb020; /* amber */
+				--danger: #ff4d5e;
+				--warn: #ffb020;
+				--grid: rgba(54, 224, 164, 0.04);
+				--radius: 4px;
+			}
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			html,
+			body {
+				height: 100%;
+			}
+			body {
+				background: var(--bg);
+				color: var(--ink);
+				font-family: 'Saira', system-ui, sans-serif;
+				-webkit-font-smoothing: antialiased;
+				overflow-x: hidden;
+			}
+			/* subtle scanline grid backdrop */
+			body::before {
+				content: '';
+				position: fixed;
+				inset: 0;
+				z-index: 0;
+				pointer-events: none;
+				background-image:
+					linear-gradient(var(--grid) 1px, transparent 1px),
+					linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+				background-size: 40px 40px;
+				mask-image: radial-gradient(ellipse 80% 60% at 70% 0%, #000 30%, transparent 90%);
+			}
+			.app {
+				position: relative;
+				z-index: 1;
+				display: grid;
+				grid-template-columns: 74px 1fr;
+				min-height: 100vh;
+			}
+			.mono {
+				font-family: 'JetBrains Mono', monospace;
+			}
+			.cond {
+				font-family: 'Saira Condensed', sans-serif;
+			}
+
+			/* ===== Rail ===== */
+			.rail {
+				border-right: 1px solid var(--line);
+				background: linear-gradient(180deg, var(--panel), #080c10);
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 6px;
+				padding: 16px 0;
+			}
+			.logo {
+				width: 40px;
+				height: 40px;
+				border: 1px solid var(--accent);
+				border-radius: var(--radius);
+				display: grid;
+				place-items: center;
+				color: var(--accent);
+				margin-bottom: 18px;
+				box-shadow:
+					0 0 0 1px #0a1f18,
+					0 0 18px -4px var(--accent);
+				position: relative;
+			}
+			.logo svg {
+				width: 20px;
+				height: 20px;
+			}
+			.rail-btn {
+				width: 44px;
+				height: 44px;
+				border-radius: var(--radius);
+				display: grid;
+				place-items: center;
+				color: var(--ink-dim);
+				position: relative;
+				cursor: pointer;
+				transition: 0.15s;
+			}
+			.rail-btn:hover {
+				color: var(--ink);
+				background: var(--panel-2);
+			}
+			.rail-btn.active {
+				color: var(--accent);
+			}
+			.rail-btn.active::before {
+				content: '';
+				position: absolute;
+				left: -16px;
+				top: 10px;
+				bottom: 10px;
+				width: 2px;
+				background: var(--accent);
+				box-shadow: 0 0 8px var(--accent);
+			}
+			.rail-btn svg {
+				width: 20px;
+				height: 20px;
+			}
+			.rail-spacer {
+				flex: 1;
+			}
+			.rail-avatar {
+				width: 36px;
+				height: 36px;
+				border-radius: var(--radius);
+				background: linear-gradient(135deg, #1a2a22, #0f1a14);
+				border: 1px solid var(--line-bright);
+				display: grid;
+				place-items: center;
+				font-weight: 700;
+				color: var(--accent);
+				font-size: 13px;
+			}
+
+			/* ===== Main ===== */
+			.main {
+				display: flex;
+				flex-direction: column;
+				min-width: 0;
+			}
+			.topbar {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				height: 60px;
+				padding: 0 26px;
+				border-bottom: 1px solid var(--line);
+				background: rgba(8, 12, 16, 0.6);
+				backdrop-filter: blur(8px);
+			}
+			.crumbs {
+				font-family: 'Saira Condensed';
+				text-transform: uppercase;
+				letter-spacing: 0.14em;
+				font-size: 12px;
+				color: var(--ink-faint);
+			}
+			.crumbs b {
+				color: var(--ink-dim);
+				font-weight: 600;
+			}
+			.search {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				width: 340px;
+				max-width: 38vw;
+				background: var(--panel);
+				border: 1px solid var(--line);
+				border-radius: var(--radius);
+				padding: 9px 12px;
+				color: var(--ink-dim);
+				font-size: 13px;
+				cursor: text;
+				transition: 0.15s;
+			}
+			.search:hover {
+				border-color: var(--line-bright);
+			}
+			.search svg {
+				width: 15px;
+				height: 15px;
+			}
+			.search .kbd {
+				margin-left: auto;
+				font-family: 'JetBrains Mono';
+				font-size: 10px;
+				color: var(--ink-faint);
+				border: 1px solid var(--line);
+				border-radius: 3px;
+				padding: 2px 6px;
+			}
+			.ico-btn {
+				width: 38px;
+				height: 38px;
+				border: 1px solid var(--line);
+				border-radius: var(--radius);
+				display: grid;
+				place-items: center;
+				color: var(--ink-dim);
+				cursor: pointer;
+				transition: 0.15s;
+				background: var(--panel);
+			}
+			.ico-btn:hover {
+				color: var(--ink);
+				border-color: var(--line-bright);
+			}
+			.ico-btn svg {
+				width: 17px;
+				height: 17px;
+			}
+
+			.content {
+				padding: 26px;
+				max-width: 1320px;
+				width: 100%;
+				margin: 0 auto;
+			}
+
+			/* status bar */
+			.statline {
+				display: flex;
+				align-items: stretch;
+				gap: 1px;
+				border: 1px solid var(--line);
+				border-radius: var(--radius);
+				overflow: hidden;
+				margin-bottom: 24px;
+				background: var(--line);
+			}
+			.stat {
+				flex: 1;
+				background: var(--panel);
+				padding: 16px 18px;
+				position: relative;
+			}
+			.stat .lbl {
+				font-family: 'Saira Condensed';
+				text-transform: uppercase;
+				letter-spacing: 0.16em;
+				font-size: 11px;
+				color: var(--ink-faint);
+			}
+			.stat .val {
+				font-family: 'JetBrains Mono';
+				font-size: 26px;
+				font-weight: 700;
+				margin-top: 6px;
+				letter-spacing: -0.02em;
+			}
+			.stat .val.ok {
+				color: var(--accent);
+			}
+			.stat .val.warn {
+				color: var(--warn);
+			}
+			.stat .val.bad {
+				color: var(--danger);
+			}
+			.stat .sub {
+				font-size: 12px;
+				color: var(--ink-dim);
+				margin-top: 2px;
+			}
+			.stat::after {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 2px;
+				width: 100%;
+				background: linear-gradient(90deg, var(--accent), transparent);
+			}
+			.stat.s2::after {
+				background: linear-gradient(90deg, var(--accent-2), transparent);
+			}
+			.stat.s3::after {
+				background: linear-gradient(90deg, #3aa0ff, transparent);
+			}
+			.stat.s4::after {
+				background: linear-gradient(90deg, var(--danger), transparent);
+			}
+
+			.sec-head {
+				display: flex;
+				align-items: center;
+				gap: 14px;
+				margin: 30px 0 16px;
+			}
+			.sec-head h2 {
+				font-family: 'Saira Condensed';
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.12em;
+				font-size: 15px;
+				color: var(--ink);
+			}
+			.sec-head .rule {
+				flex: 1;
+				height: 1px;
+				background: linear-gradient(90deg, var(--line-bright), transparent);
+			}
+			.sec-head .count {
+				font-family: 'JetBrains Mono';
+				font-size: 11px;
+				color: var(--ink-faint);
+			}
+
+			/* app grid */
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
+				gap: 14px;
+			}
+			.node {
+				background: linear-gradient(180deg, var(--panel), var(--panel-2));
+				border: 1px solid var(--line);
+				border-radius: var(--radius);
+				padding: 16px;
+				cursor: pointer;
+				position: relative;
+				transition:
+					transform 0.15s,
+					border-color 0.15s,
+					box-shadow 0.15s;
+				overflow: hidden;
+			}
+			.node::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: radial-gradient(circle at 100% 0%, rgba(54, 224, 164, 0.08), transparent 60%);
+				opacity: 0;
+				transition: 0.2s;
+			}
+			.node:hover {
+				transform: translateY(-2px);
+				border-color: var(--line-bright);
+				box-shadow: 0 10px 30px -12px #000;
+			}
+			.node:hover::before {
+				opacity: 1;
+			}
+			.node-top {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+			}
+			.node-ico {
+				width: 40px;
+				height: 40px;
+				border-radius: var(--radius);
+				background: #0a0f13;
+				border: 1px solid var(--line);
+				display: grid;
+				place-items: center;
+				font-size: 18px;
+				flex-shrink: 0;
+			}
+			.node-name {
+				font-weight: 600;
+				font-size: 15px;
+				line-height: 1.1;
+			}
+			.node-cat {
+				font-family: 'Saira Condensed';
+				text-transform: uppercase;
+				letter-spacing: 0.1em;
+				font-size: 10px;
+				color: var(--ink-faint);
+				margin-top: 3px;
+			}
+			.led {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				margin-left: auto;
+				flex-shrink: 0;
+				position: relative;
+			}
+			.led.ok {
+				background: var(--accent);
+				box-shadow: 0 0 10px var(--accent);
+			}
+			.led.ok::after {
+				content: '';
+				position: absolute;
+				inset: -4px;
+				border-radius: 50%;
+				border: 1px solid var(--accent);
+				opacity: 0.4;
+				animation: ping 2s ease-out infinite;
+			}
+			.led.warn {
+				background: var(--warn);
+				box-shadow: 0 0 10px var(--warn);
+			}
+			.led.bad {
+				background: var(--danger);
+				box-shadow: 0 0 10px var(--danger);
+			}
+			@keyframes ping {
+				0% {
+					transform: scale(0.8);
+					opacity: 0.5;
+				}
+				100% {
+					transform: scale(2.2);
+					opacity: 0;
+				}
+			}
+			.node-foot {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 16px;
+				padding-top: 12px;
+				border-top: 1px solid var(--line);
+			}
+			.node-foot .up {
+				font-family: 'JetBrains Mono';
+				font-size: 11px;
+				color: var(--ink-dim);
+			}
+			.node-foot .up b {
+				color: var(--accent);
+				font-weight: 500;
+			}
+			.node-foot .up.bad b {
+				color: var(--danger);
+			}
+			.spark {
+				height: 22px;
+				width: 96px;
+			}
+
+			.footer-note {
+				margin-top: 40px;
+				text-align: center;
+				font-family: 'JetBrains Mono';
+				font-size: 11px;
+				color: var(--ink-faint);
+			}
+
+			/* entrance */
+			@keyframes rise {
+				from {
+					opacity: 0;
+					transform: translateY(10px);
+				}
+				to {
+					opacity: 1;
+					transform: none;
+				}
+			}
+			.node,
+			.stat {
+				animation: rise 0.5s both;
+			}
+			.stat:nth-child(2) {
+				animation-delay: 0.05s;
+			}
+			.stat:nth-child(3) {
+				animation-delay: 0.1s;
+			}
+			.stat:nth-child(4) {
+				animation-delay: 0.15s;
+			}
+			.grid .node:nth-child(1) {
+				animation-delay: 0.1s;
+			}
+			.grid .node:nth-child(2) {
+				animation-delay: 0.16s;
+			}
+			.grid .node:nth-child(3) {
+				animation-delay: 0.22s;
+			}
+			.grid .node:nth-child(4) {
+				animation-delay: 0.28s;
+			}
+			.grid .node:nth-child(5) {
+				animation-delay: 0.34s;
+			}
+			.grid .node:nth-child(6) {
+				animation-delay: 0.4s;
+			}
+			.grid .node:nth-child(7) {
+				animation-delay: 0.46s;
+			}
+			.grid .node:nth-child(8) {
+				animation-delay: 0.52s;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="app">
+			<!-- Rail -->
+			<nav class="rail">
+				<div class="logo" title="Launcher">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<rect x="3" y="3" width="7" height="7" />
+						<rect x="14" y="3" width="7" height="7" />
+						<rect x="14" y="14" width="7" height="7" />
+						<rect x="3" y="14" width="7" height="7" />
+					</svg>
+				</div>
+				<a class="rail-btn active" title="Overview"
+					><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<line x1="3" y1="9" x2="21" y2="9" />
+						<line x1="9" y1="21" x2="9" y2="9" /></svg
+				></a>
+				<a class="rail-btn" title="Apps"
+					><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<circle cx="12" cy="12" r="9" />
+						<line x1="3" y1="12" x2="21" y2="12" />
+						<path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18" /></svg
+				></a>
+				<a class="rail-btn" title="Status"
+					><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<path d="M22 12h-4l-3 9L9 3l-3 9H2" /></svg
+				></a>
+				<a class="rail-btn" title="Admin"
+					><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<circle cx="12" cy="12" r="3" />
+						<path
+							d="M19 12a7 7 0 0 0-.1-1l2-1.6-2-3.4-2.4 1a7 7 0 0 0-1.7-1l-.4-2.6h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.4-1-2 3.4 2 1.6a7 7 0 0 0 0 2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.4 1 2-3.4-2-1.6a7 7 0 0 0 .1-1z"
+						/></svg
+				></a>
+				<div class="rail-spacer"></div>
+				<div class="rail-avatar">AD</div>
+			</nav>
+
+			<!-- Main -->
+			<div class="main">
+				<header class="topbar">
+					<div class="crumbs">SYSTEMS / <b>OVERVIEW</b></div>
+					<div class="search">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="11" cy="11" r="7" />
+							<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						</svg>
+						Search apps, boards, commands…
+						<span class="kbd">⌘K</span>
+					</div>
+					<div class="ico-btn" title="Notifications">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+							<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
+							<path d="M13.7 21a2 2 0 0 1-3.4 0" />
+						</svg>
+					</div>
+					<div class="ico-btn" title="Theme">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+							<circle cx="12" cy="12" r="4" />
+							<path
+								d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+							/>
+						</svg>
+					</div>
+				</header>
+
+				<div class="content">
+					<!-- Status line -->
+					<div class="statline">
+						<div class="stat">
+							<div class="lbl">Services Online</div>
+							<div class="val ok">08 / 10</div>
+							<div class="sub">2 require attention</div>
+						</div>
+						<div class="stat s2">
+							<div class="lbl">Avg Response</div>
+							<div class="val warn">
+								142<span style="font-size: 14px; color: var(--ink-faint)"> ms</span>
+							</div>
+							<div class="sub">p95 over 24h</div>
+						</div>
+						<div class="stat s3">
+							<div class="lbl">Fleet Uptime</div>
+							<div class="val" style="color: #3aa0ff">99.4%</div>
+							<div class="sub">rolling 30 days</div>
+						</div>
+						<div class="stat s4">
+							<div class="lbl">UPS Load</div>
+							<div class="val bad">61%</div>
+							<div class="sub">est. 38 min on battery</div>
+						</div>
+					</div>
+
+					<!-- Favorites / pinned -->
+					<div class="sec-head">
+						<h2>Pinned Services</h2>
+						<span class="rule"></span><span class="count">8 ACTIVE</span>
+					</div>
+					<div class="grid">
+						<!-- 1 Jellyfin -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">🎬</div>
+								<div>
+									<div class="node-name">Jellyfin</div>
+									<div class="node-cat">Media</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,16 12,14 24,17 36,9 48,12 60,7 72,10 84,5 96,8"
+									/></svg
+								><span class="up"><b>99.9%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 2 Immich -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">📷</div>
+								<div>
+									<div class="node-name">Immich</div>
+									<div class="node-cat">Photos</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,12 12,13 24,11 36,12 48,10 60,11 72,9 84,11 96,10"
+									/></svg
+								><span class="up"><b>100%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 3 Gitea -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">🌿</div>
+								<div>
+									<div class="node-name">Gitea</div>
+									<div class="node-cat">Git</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,14 12,10 24,12 36,8 48,11 60,9 72,13 84,8 96,9"
+									/></svg
+								><span class="up"><b>99.8%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 4 Portainer -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">🐳</div>
+								<div>
+									<div class="node-name">Portainer</div>
+									<div class="node-cat">Containers</div>
+								</div>
+								<div class="led warn"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#ffb020"
+										stroke-width="1.5"
+										points="0,10 12,12 24,9 36,15 48,11 60,18 72,12 84,16 96,13"
+									/></svg
+								><span class="up"><b style="color: var(--warn)">98.1%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 5 Pi-hole -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">🛡️</div>
+								<div>
+									<div class="node-name">Pi-hole</div>
+									<div class="node-cat">DNS</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,13 12,11 24,12 36,10 48,11 60,9 72,10 84,8 96,9"
+									/></svg
+								><span class="up"><b>100%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 6 Planka -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">📋</div>
+								<div>
+									<div class="node-name">Planka</div>
+									<div class="node-cat">Kanban</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,15 12,12 24,14 36,11 48,12 60,10 72,12 84,9 96,11"
+									/></svg
+								><span class="up"><b>99.5%</b> 24h</span>
+							</div>
+						</div>
+						<!-- 7 Deluge -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">⬇️</div>
+								<div>
+									<div class="node-name">Deluge</div>
+									<div class="node-cat">Downloads</div>
+								</div>
+								<div class="led bad"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#ff4d5e"
+										stroke-width="1.5"
+										points="0,9 12,11 24,14 36,12 48,18 60,16 72,20 84,19 96,21"
+									/></svg
+								><span class="up bad"><b>OFFLINE</b></span>
+							</div>
+						</div>
+						<!-- 8 Pi-hole / NPM -->
+						<div class="node">
+							<div class="node-top">
+								<div class="node-ico">🔀</div>
+								<div>
+									<div class="node-name">Nginx Proxy Mgr</div>
+									<div class="node-cat">Network</div>
+								</div>
+								<div class="led ok"></div>
+							</div>
+							<div class="node-foot">
+								<svg class="spark" viewBox="0 0 96 22" preserveAspectRatio="none">
+									<polyline
+										fill="none"
+										stroke="#36e0a4"
+										stroke-width="1.5"
+										points="0,12 12,11 24,12 36,10 48,11 60,11 72,9 84,10 96,9"
+									/></svg
+								><span class="up"><b>99.9%</b> 24h</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="footer-note">
+						// COMMAND DECK — Saira + JetBrains Mono · tactical dark · LED telemetry · monospace
+						data
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

design-mockups/02-aurora-glass.html

@@ -0,0 +1,915 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Web App Launcher — Aurora Glass</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			:root {
+				--bg: #0a0a14;
+				--ink: #f3f2fb;
+				--ink-dim: #a7a6c4;
+				--ink-faint: #6f6e90;
+				--accent-h: 265; /* user-tunable hue → this is the killer feature */
+				--accent: hsl(var(--accent-h) 90% 66%);
+				--accent-2: hsl(calc(var(--accent-h) + 60) 85% 64%);
+				--accent-soft: hsl(var(--accent-h) 90% 66% / 0.14);
+				--glass: rgba(255, 255, 255, 0.05);
+				--glass-2: rgba(255, 255, 255, 0.07);
+				--glass-line: rgba(255, 255, 255, 0.1);
+				--ok: #34e0a1;
+				--warn: #ffc24b;
+				--bad: #ff5d73;
+				--radius: 18px;
+			}
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			html,
+			body {
+				height: 100%;
+			}
+			body {
+				background: var(--bg);
+				color: var(--ink);
+				font-family: 'Manrope', system-ui, sans-serif;
+				-webkit-font-smoothing: antialiased;
+				overflow-x: hidden;
+				position: relative;
+			}
+			/* aurora mesh */
+			body::before {
+				content: '';
+				position: fixed;
+				inset: -20%;
+				z-index: 0;
+				pointer-events: none;
+				filter: blur(60px);
+				opacity: 0.9;
+				background:
+					radial-gradient(40% 40% at 18% 22%, hsl(var(--accent-h) 90% 60% / 0.55), transparent 70%),
+					radial-gradient(
+						38% 38% at 82% 18%,
+						hsl(calc(var(--accent-h) + 70) 90% 60% / 0.42),
+						transparent 70%
+					),
+					radial-gradient(
+						45% 45% at 70% 85%,
+						hsl(calc(var(--accent-h) - 40) 90% 58% / 0.4),
+						transparent 72%
+					),
+					radial-gradient(
+						40% 40% at 25% 90%,
+						hsl(calc(var(--accent-h) + 120) 80% 55% / 0.3),
+						transparent 72%
+					);
+				animation: drift 22s ease-in-out infinite alternate;
+			}
+			@keyframes drift {
+				0% {
+					transform: translate(0, 0) scale(1);
+				}
+				100% {
+					transform: translate(-3%, 2%) scale(1.08);
+				}
+			}
+			body::after {
+				content: '';
+				position: fixed;
+				inset: 0;
+				z-index: 0;
+				pointer-events: none;
+				background: radial-gradient(
+					120% 120% at 50% -10%,
+					transparent 40%,
+					rgba(10, 10, 20, 0.6) 100%
+				);
+			}
+
+			.shell {
+				position: relative;
+				z-index: 1;
+				display: grid;
+				grid-template-columns: 248px 1fr;
+				min-height: 100vh;
+			}
+
+			/* sidebar (glass) */
+			.side {
+				margin: 16px 0 16px 16px;
+				border-radius: 24px;
+				padding: 20px;
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+				backdrop-filter: blur(26px) saturate(160%);
+				-webkit-backdrop-filter: blur(26px) saturate(160%);
+				display: flex;
+				flex-direction: column;
+			}
+			.brand {
+				display: flex;
+				align-items: center;
+				gap: 11px;
+				margin-bottom: 26px;
+				padding: 4px 6px;
+			}
+			.brand .mark {
+				width: 38px;
+				height: 38px;
+				border-radius: 12px;
+				background: linear-gradient(135deg, var(--accent), var(--accent-2));
+				display: grid;
+				place-items: center;
+				color: #fff;
+				box-shadow: 0 8px 24px -6px var(--accent);
+			}
+			.brand .mark svg {
+				width: 20px;
+				height: 20px;
+			}
+			.brand .name {
+				font-family: 'Outfit';
+				font-weight: 600;
+				font-size: 17px;
+				letter-spacing: -0.01em;
+			}
+			.brand .name span {
+				display: block;
+				font-family: 'Manrope';
+				font-weight: 500;
+				font-size: 11px;
+				color: var(--ink-faint);
+				letter-spacing: 0.04em;
+			}
+			.nav-grp {
+				font-family: 'Outfit';
+				text-transform: uppercase;
+				letter-spacing: 0.13em;
+				font-size: 10px;
+				color: var(--ink-faint);
+				margin: 14px 8px 8px;
+			}
+			.nav-i {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+				padding: 11px 12px;
+				border-radius: 12px;
+				color: var(--ink-dim);
+				font-weight: 500;
+				font-size: 14.5px;
+				cursor: pointer;
+				transition: 0.18s;
+				position: relative;
+			}
+			.nav-i svg {
+				width: 19px;
+				height: 19px;
+				opacity: 0.85;
+			}
+			.nav-i:hover {
+				color: var(--ink);
+				background: var(--glass-2);
+			}
+			.nav-i.on {
+				color: var(--ink);
+				background: var(--accent-soft);
+				box-shadow: inset 0 0 0 1px hsl(var(--accent-h) 90% 66% / 0.35);
+			}
+			.nav-i.on::before {
+				content: '';
+				position: absolute;
+				left: -20px;
+				top: 9px;
+				bottom: 9px;
+				width: 3px;
+				border-radius: 3px;
+				background: var(--accent);
+			}
+			.nav-i .dot {
+				margin-left: auto;
+				font-size: 11px;
+				color: var(--ink-faint);
+				font-weight: 600;
+			}
+			.side-foot {
+				margin-top: auto;
+				display: flex;
+				align-items: center;
+				gap: 11px;
+				padding: 10px;
+				border-radius: 14px;
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+			}
+			.av {
+				width: 34px;
+				height: 34px;
+				border-radius: 10px;
+				background: linear-gradient(135deg, var(--accent), var(--accent-2));
+				display: grid;
+				place-items: center;
+				font-weight: 700;
+				color: #fff;
+				font-size: 13px;
+			}
+			.side-foot .who {
+				font-size: 13px;
+				font-weight: 600;
+				line-height: 1.1;
+			}
+			.side-foot .who span {
+				display: block;
+				font-size: 11px;
+				color: var(--ink-faint);
+				font-weight: 500;
+			}
+
+			/* main */
+			.main {
+				padding: 30px 34px;
+				min-width: 0;
+			}
+			.head {
+				display: flex;
+				align-items: flex-end;
+				gap: 20px;
+				margin-bottom: 26px;
+			}
+			.hello {
+				font-family: 'Outfit';
+				font-weight: 600;
+				font-size: 30px;
+				letter-spacing: -0.02em;
+				line-height: 1.05;
+			}
+			.hello em {
+				font-style: normal;
+				background: linear-gradient(120deg, var(--accent), var(--accent-2));
+				-webkit-background-clip: text;
+				background-clip: text;
+				color: transparent;
+			}
+			.sub {
+				color: var(--ink-dim);
+				font-size: 14px;
+				margin-top: 6px;
+			}
+			.searchwrap {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				gap: 10px;
+			}
+			.search {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				width: 300px;
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+				backdrop-filter: blur(20px);
+				border-radius: 14px;
+				padding: 11px 14px;
+				color: var(--ink-faint);
+				font-size: 13.5px;
+				cursor: text;
+			}
+			.search svg {
+				width: 16px;
+				height: 16px;
+			}
+			.search .k {
+				margin-left: auto;
+				font-size: 11px;
+				background: var(--glass-2);
+				border-radius: 6px;
+				padding: 2px 7px;
+			}
+			.gbtn {
+				width: 42px;
+				height: 42px;
+				border-radius: 14px;
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+				backdrop-filter: blur(20px);
+				display: grid;
+				place-items: center;
+				color: var(--ink-dim);
+				cursor: pointer;
+				transition: 0.18s;
+			}
+			.gbtn:hover {
+				color: var(--ink);
+				background: var(--glass-2);
+			}
+			.gbtn svg {
+				width: 18px;
+				height: 18px;
+			}
+
+			/* metric row */
+			.metrics {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				gap: 16px;
+				margin-bottom: 28px;
+			}
+			.metric {
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+				backdrop-filter: blur(22px) saturate(150%);
+				border-radius: var(--radius);
+				padding: 18px 20px;
+				position: relative;
+				overflow: hidden;
+			}
+			.metric .ic {
+				width: 34px;
+				height: 34px;
+				border-radius: 11px;
+				display: grid;
+				place-items: center;
+				background: var(--accent-soft);
+				color: var(--accent);
+				margin-bottom: 14px;
+			}
+			.metric .ic svg {
+				width: 18px;
+				height: 18px;
+			}
+			.metric .v {
+				font-family: 'Outfit';
+				font-size: 27px;
+				font-weight: 600;
+				letter-spacing: -0.02em;
+			}
+			.metric .l {
+				color: var(--ink-dim);
+				font-size: 13px;
+				margin-top: 2px;
+			}
+			.metric .trend {
+				position: absolute;
+				top: 18px;
+				right: 18px;
+				font-size: 12px;
+				font-weight: 600;
+				color: var(--ok);
+				background: rgba(52, 224, 161, 0.12);
+				padding: 3px 9px;
+				border-radius: 20px;
+			}
+			.metric .trend.dn {
+				color: var(--bad);
+				background: rgba(255, 93, 115, 0.12);
+			}
+
+			.sectitle {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin: 8px 0 16px;
+			}
+			.sectitle h2 {
+				font-family: 'Outfit';
+				font-weight: 600;
+				font-size: 18px;
+				letter-spacing: -0.01em;
+			}
+			.sectitle a {
+				font-size: 13px;
+				color: var(--accent);
+				font-weight: 600;
+				text-decoration: none;
+			}
+
+			.apps {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+				gap: 16px;
+			}
+			.card {
+				background: var(--glass);
+				border: 1px solid var(--glass-line);
+				backdrop-filter: blur(22px) saturate(150%);
+				-webkit-backdrop-filter: blur(22px) saturate(150%);
+				border-radius: var(--radius);
+				padding: 18px;
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+				transition:
+					transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
+					box-shadow 0.22s,
+					border-color 0.22s;
+			}
+			.card::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				border-radius: var(--radius);
+				background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
+				pointer-events: none;
+			}
+			.card:hover {
+				transform: translateY(-5px);
+				border-color: hsl(var(--accent-h) 90% 66% / 0.5);
+				box-shadow: 0 24px 50px -20px hsl(var(--accent-h) 90% 50% / 0.55);
+			}
+			.card .row {
+				display: flex;
+				align-items: center;
+				gap: 13px;
+			}
+			.ico {
+				width: 46px;
+				height: 46px;
+				border-radius: 13px;
+				display: grid;
+				place-items: center;
+				font-size: 22px;
+				background: rgba(255, 255, 255, 0.06);
+				border: 1px solid var(--glass-line);
+				flex-shrink: 0;
+			}
+			.nm {
+				font-family: 'Outfit';
+				font-weight: 600;
+				font-size: 15.5px;
+				letter-spacing: -0.01em;
+			}
+			.ct {
+				font-size: 12px;
+				color: var(--ink-faint);
+				margin-top: 1px;
+			}
+			.pill {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				font-size: 11px;
+				font-weight: 600;
+				padding: 5px 10px;
+				border-radius: 20px;
+			}
+			.pill.ok {
+				color: var(--ok);
+				background: rgba(52, 224, 161, 0.13);
+			}
+			.pill.warn {
+				color: var(--warn);
+				background: rgba(255, 194, 75, 0.13);
+			}
+			.pill.bad {
+				color: var(--bad);
+				background: rgba(255, 93, 115, 0.13);
+			}
+			.pill .b {
+				width: 6px;
+				height: 6px;
+				border-radius: 50%;
+				background: currentColor;
+				box-shadow: 0 0 8px currentColor;
+			}
+			.meta {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 16px;
+			}
+			.meta .up {
+				font-size: 12.5px;
+				color: var(--ink-dim);
+			}
+			.meta .up b {
+				color: var(--ink);
+				font-weight: 600;
+			}
+			.spark {
+				height: 24px;
+				width: 84px;
+			}
+
+			@keyframes rise {
+				from {
+					opacity: 0;
+					transform: translateY(14px);
+				}
+				to {
+					opacity: 1;
+					transform: none;
+				}
+			}
+			.metric,
+			.card {
+				animation: rise 0.55s both;
+			}
+			.metric:nth-child(2) {
+				animation-delay: 0.06s;
+			}
+			.metric:nth-child(3) {
+				animation-delay: 0.12s;
+			}
+			.metric:nth-child(4) {
+				animation-delay: 0.18s;
+			}
+			.apps .card:nth-child(1) {
+				animation-delay: 0.1s;
+			}
+			.apps .card:nth-child(2) {
+				animation-delay: 0.16s;
+			}
+			.apps .card:nth-child(3) {
+				animation-delay: 0.22s;
+			}
+			.apps .card:nth-child(4) {
+				animation-delay: 0.28s;
+			}
+			.apps .card:nth-child(5) {
+				animation-delay: 0.34s;
+			}
+			.apps .card:nth-child(6) {
+				animation-delay: 0.4s;
+			}
+			.apps .card:nth-child(7) {
+				animation-delay: 0.46s;
+			}
+			.apps .card:nth-child(8) {
+				animation-delay: 0.52s;
+			}
+
+			.swatches {
+				display: flex;
+				gap: 8px;
+				align-items: center;
+				margin-top: 30px;
+				justify-content: center;
+				color: var(--ink-faint);
+				font-size: 12px;
+			}
+			.sw {
+				width: 18px;
+				height: 18px;
+				border-radius: 6px;
+				cursor: pointer;
+				border: 1px solid var(--glass-line);
+			}
+		</style>
+	</head>
+	<body>
+		<div class="shell">
+			<!-- Sidebar -->
+			<aside class="side">
+				<div class="brand">
+					<div class="mark">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<rect x="3" y="3" width="7" height="7" rx="1" />
+							<rect x="14" y="3" width="7" height="7" rx="1" />
+							<rect x="14" y="14" width="7" height="7" rx="1" />
+							<rect x="3" y="14" width="7" height="7" rx="1" />
+						</svg>
+					</div>
+					<div class="name">Launcher<span>home cloud</span></div>
+				</div>
+				<div class="nav-grp">Workspace</div>
+				<div class="nav-i on">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<rect x="3" y="3" width="18" height="18" rx="3" />
+						<path d="M3 9h18M9 21V9" />
+					</svg>
+					Overview
+				</div>
+				<div class="nav-i">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<circle cx="12" cy="12" r="9" />
+						<path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18" />
+					</svg>
+					All Apps <span class="dot">10</span>
+				</div>
+				<div class="nav-i">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+					</svg>
+					Status
+				</div>
+				<div class="nav-grp">Boards</div>
+				<div class="nav-i">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<rect x="3" y="3" width="18" height="18" rx="3" />
+					</svg>
+					Media Center
+				</div>
+				<div class="nav-i">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<rect x="3" y="3" width="18" height="18" rx="3" />
+					</svg>
+					Infrastructure
+				</div>
+				<div class="nav-i">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+						<path d="M12 5v14M5 12h14" />
+					</svg>
+					New board…
+				</div>
+				<div class="side-foot">
+					<div class="av">AD</div>
+					<div class="who">Alexei<span>Administrator</span></div>
+				</div>
+			</aside>
+
+			<!-- Main -->
+			<main class="main">
+				<div class="head">
+					<div>
+						<div class="hello">Good evening, <em>Alexei</em></div>
+						<div class="sub">All systems nominal — 8 of 10 services responding</div>
+					</div>
+					<div class="searchwrap">
+						<div class="search">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<circle cx="11" cy="11" r="7" />
+								<line x1="21" y1="21" x2="16.65" y2="16.65" />
+							</svg>
+							Search… <span class="k">⌘K</span>
+						</div>
+						<div class="gbtn">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+								<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
+								<path d="M13.7 21a2 2 0 0 1-3.4 0" />
+							</svg>
+						</div>
+						<div class="gbtn">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+								<circle cx="12" cy="12" r="4" />
+								<path
+									d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+								/>
+							</svg>
+						</div>
+					</div>
+				</div>
+
+				<!-- metrics -->
+				<div class="metrics">
+					<div class="metric">
+						<div class="ic">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M20 6 9 17l-5-5" />
+							</svg>
+						</div>
+						<div class="v">8<span style="color: var(--ink-faint); font-size: 18px">/10</span></div>
+						<div class="l">Services online</div>
+						<span class="trend">+2</span>
+					</div>
+					<div class="metric">
+						<div class="ic">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<circle cx="12" cy="12" r="9" />
+								<path d="M12 7v5l3 2" />
+							</svg>
+						</div>
+						<div class="v">142<span style="color: var(--ink-faint); font-size: 16px">ms</span></div>
+						<div class="l">Avg response</div>
+						<span class="trend dn">+18ms</span>
+					</div>
+					<div class="metric">
+						<div class="ic">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M3 12h4l3 8 4-16 3 8h4" />
+							</svg>
+						</div>
+						<div class="v">99.4%</div>
+						<div class="l">Uptime · 30d</div>
+						<span class="trend">+0.2</span>
+					</div>
+					<div class="metric">
+						<div class="ic">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<path d="M13 2 3 14h7l-1 8 10-12h-7z" />
+							</svg>
+						</div>
+						<div class="v">61%</div>
+						<div class="l">UPS load · 38m</div>
+						<span class="trend dn">batt</span>
+					</div>
+				</div>
+
+				<div class="sectitle">
+					<h2>Favorites</h2>
+					<a href="#">View all apps →</a>
+				</div>
+				<div class="apps">
+					<div class="card">
+						<div class="row">
+							<div class="ico">🎬</div>
+							<div>
+								<div class="nm">Jellyfin</div>
+								<div class="ct">Media</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>99.9%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,18 11,15 22,17 33,9 44,12 55,7 66,11 76,5 84,8"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">📷</div>
+							<div>
+								<div class="nm">Immich</div>
+								<div class="ct">Photos</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>100%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,13 11,14 22,12 33,13 44,11 55,12 66,10 76,12 84,11"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">🌿</div>
+							<div>
+								<div class="nm">Gitea</div>
+								<div class="ct">Git server</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>99.8%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,15 11,10 22,13 33,8 44,12 55,9 66,14 76,8 84,10"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">🐳</div>
+							<div>
+								<div class="nm">Portainer</div>
+								<div class="ct">Containers</div>
+							</div>
+							<div class="pill warn"><span class="b"></span>Slow</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>98.1%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--warn)"
+									stroke-width="2"
+									points="0,11 11,13 22,9 33,16 44,11 55,19 66,12 76,17 84,13"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">🛡️</div>
+							<div>
+								<div class="nm">Pi-hole</div>
+								<div class="ct">DNS · Ads</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>100%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,14 11,12 22,13 33,11 44,12 55,10 66,11 76,9 84,10"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">📋</div>
+							<div>
+								<div class="nm">Planka</div>
+								<div class="ct">Kanban</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>99.5%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,16 11,13 22,15 33,12 44,13 55,11 66,13 76,10 84,12"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">⬇️</div>
+							<div>
+								<div class="nm">Deluge</div>
+								<div class="ct">Downloads</div>
+							</div>
+							<div class="pill bad"><span class="b"></span>Down</div>
+						</div>
+						<div class="meta">
+							<span class="up" style="color: var(--bad)"
+								><b style="color: var(--bad)">offline</b> · 4m</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--bad)"
+									stroke-width="2"
+									points="0,10 11,12 22,15 33,13 44,19 55,17 66,21 76,20 84,22"
+								/>
+							</svg>
+						</div>
+					</div>
+					<div class="card">
+						<div class="row">
+							<div class="ico">🔀</div>
+							<div>
+								<div class="nm">Proxy Mgr</div>
+								<div class="ct">Network</div>
+							</div>
+							<div class="pill ok"><span class="b"></span>Up</div>
+						</div>
+						<div class="meta">
+							<span class="up"><b>99.9%</b> uptime</span
+							><svg class="spark" viewBox="0 0 84 24" preserveAspectRatio="none">
+								<polyline
+									fill="none"
+									stroke="var(--accent)"
+									stroke-width="2"
+									points="0,13 11,12 22,13 33,11 44,12 55,12 66,10 76,11 84,10"
+								/>
+							</svg>
+						</div>
+					</div>
+				</div>
+
+				<div class="swatches">
+					Accent (user-tunable):
+					<span
+						class="sw"
+						style="background: hsl(265 90% 66%)"
+						onclick="document.documentElement.style.setProperty('--accent-h', '265')"
+					></span>
+					<span
+						class="sw"
+						style="background: hsl(210 90% 60%)"
+						onclick="document.documentElement.style.setProperty('--accent-h', '210')"
+					></span>
+					<span
+						class="sw"
+						style="background: hsl(150 80% 55%)"
+						onclick="document.documentElement.style.setProperty('--accent-h', '150')"
+					></span>
+					<span
+						class="sw"
+						style="background: hsl(20 90% 62%)"
+						onclick="document.documentElement.style.setProperty('--accent-h', '20')"
+					></span>
+					<span
+						class="sw"
+						style="background: hsl(330 85% 65%)"
+						onclick="document.documentElement.style.setProperty('--accent-h', '330')"
+					></span>
+					— try clicking; the whole UI + aurora retints live
+				</div>
+			</main>
+		</div>
+	</body>
+</html>

design-mockups/03-editorial.html

@@ -0,0 +1,643 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Web App Launcher — Editorial</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			:root {
+				--paper: #f4f1ea; /* warm paper */
+				--paper-2: #ece7db;
+				--card: #fbfaf6;
+				--ink: #191712;
+				--ink-2: #5a554a;
+				--ink-faint: #9b9484;
+				--line: #1a1712;
+				--line-soft: #d8d2c4;
+				--accent: #ff5436; /* vermilion */
+				--accent-ink: #cf3a1f;
+				--blue: #1f4ae0;
+				--ok: #1f8a4c;
+				--warn: #b8730a;
+				--bad: #cf2020;
+			}
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			html,
+			body {
+				height: 100%;
+			}
+			body {
+				background: var(--paper);
+				color: var(--ink);
+				font-family: 'Hanken Grotesk', system-ui, sans-serif;
+				-webkit-font-smoothing: antialiased;
+				background-image: radial-gradient(rgba(0, 0, 0, 0.022) 1px, transparent 1px);
+				background-size: 5px 5px;
+			}
+			.wrap {
+				max-width: 1180px;
+				margin: 0 auto;
+				padding: 0 26px;
+			}
+
+			/* top bar */
+			.masthead {
+				display: flex;
+				align-items: center;
+				gap: 20px;
+				padding: 22px 0 18px;
+				border-bottom: 2.5px solid var(--line);
+			}
+			.logo {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+			}
+			.logo .glyph {
+				width: 42px;
+				height: 42px;
+				background: var(--ink);
+				color: var(--paper);
+				display: grid;
+				place-items: center;
+				border-radius: 3px;
+			}
+			.logo .glyph svg {
+				width: 22px;
+				height: 22px;
+			}
+			.logo .tt {
+				font-family: 'Bricolage Grotesque';
+				font-weight: 800;
+				font-size: 23px;
+				letter-spacing: -0.03em;
+				line-height: 0.9;
+			}
+			.logo .tt small {
+				display: block;
+				font-family: 'Instrument Serif';
+				font-style: italic;
+				font-weight: 400;
+				font-size: 14px;
+				letter-spacing: 0;
+				color: var(--ink-2);
+			}
+			.nav {
+				display: flex;
+				gap: 4px;
+				margin-left: 18px;
+			}
+			.nav a {
+				font-weight: 600;
+				font-size: 14px;
+				color: var(--ink);
+				text-decoration: none;
+				padding: 8px 14px;
+				border-radius: 2px;
+				transition: 0.15s;
+			}
+			.nav a:hover {
+				background: var(--paper-2);
+			}
+			.nav a.on {
+				background: var(--ink);
+				color: var(--paper);
+			}
+			.tools {
+				margin-left: auto;
+				display: flex;
+				align-items: center;
+				gap: 10px;
+			}
+			.search {
+				display: flex;
+				align-items: center;
+				gap: 9px;
+				border: 2px solid var(--line);
+				border-radius: 2px;
+				padding: 9px 13px;
+				font-size: 13px;
+				color: var(--ink-2);
+				cursor: text;
+				background: var(--card);
+			}
+			.search svg {
+				width: 15px;
+				height: 15px;
+			}
+			.search .k {
+				margin-left: 8px;
+				font-family: 'Hanken Grotesk';
+				font-weight: 700;
+				font-size: 10px;
+				border: 1.5px solid var(--line-soft);
+				border-radius: 3px;
+				padding: 1px 6px;
+			}
+			.ib {
+				width: 40px;
+				height: 40px;
+				border: 2px solid var(--line);
+				border-radius: 2px;
+				display: grid;
+				place-items: center;
+				cursor: pointer;
+				background: var(--card);
+				transition: 0.15s;
+			}
+			.ib:hover {
+				background: var(--ink);
+				color: var(--paper);
+			}
+			.ib svg {
+				width: 17px;
+				height: 17px;
+			}
+
+			/* hero */
+			.hero {
+				display: grid;
+				grid-template-columns: 1.45fr 1fr;
+				gap: 0;
+				border-bottom: 2.5px solid var(--line);
+			}
+			.hero-l {
+				padding: 46px 40px 46px 0;
+				border-right: 2.5px solid var(--line);
+			}
+			.kicker {
+				font-family: 'Hanken Grotesk';
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.22em;
+				font-size: 12px;
+				color: var(--accent-ink);
+			}
+			.hero h1 {
+				font-family: 'Bricolage Grotesque';
+				font-weight: 800;
+				font-size: 62px;
+				line-height: 0.95;
+				letter-spacing: -0.035em;
+				margin: 14px 0 0;
+			}
+			.hero h1 em {
+				font-family: 'Instrument Serif';
+				font-style: italic;
+				font-weight: 400;
+				color: var(--accent);
+			}
+			.hero p {
+				font-size: 16px;
+				color: var(--ink-2);
+				max-width: 30ch;
+				margin-top: 18px;
+				line-height: 1.5;
+			}
+			.hero-cta {
+				display: flex;
+				gap: 10px;
+				margin-top: 24px;
+			}
+			.btn {
+				font-weight: 700;
+				font-size: 14px;
+				padding: 12px 20px;
+				border-radius: 2px;
+				border: 2px solid var(--line);
+				cursor: pointer;
+				text-decoration: none;
+			}
+			.btn.solid {
+				background: var(--ink);
+				color: var(--paper);
+			}
+			.btn.solid:hover {
+				background: var(--accent);
+				border-color: var(--accent);
+			}
+			.btn.ghost {
+				background: transparent;
+				color: var(--ink);
+			}
+			.btn.ghost:hover {
+				background: var(--paper-2);
+			}
+			.hero-r {
+				display: grid;
+				grid-template-rows: 1fr 1fr 1fr;
+			}
+			.figure {
+				padding: 20px 0 20px 36px;
+				border-bottom: 1.5px solid var(--line-soft);
+				display: flex;
+				align-items: baseline;
+				gap: 14px;
+			}
+			.figure:last-child {
+				border-bottom: 0;
+			}
+			.figure .num {
+				font-family: 'Bricolage Grotesque';
+				font-weight: 800;
+				font-size: 46px;
+				letter-spacing: -0.04em;
+				line-height: 0.85;
+				min-width: 120px;
+			}
+			.figure .num.acc {
+				color: var(--accent);
+			}
+			.figure .num.bl {
+				color: var(--blue);
+			}
+			.figure .desc {
+				font-size: 13px;
+				color: var(--ink-2);
+				line-height: 1.35;
+			}
+			.figure .desc b {
+				display: block;
+				font-family: 'Bricolage Grotesque';
+				font-weight: 700;
+				color: var(--ink);
+				font-size: 15px;
+				letter-spacing: -0.01em;
+			}
+
+			/* section label */
+			.slab {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin: 36px 0 20px;
+			}
+			.slab h2 {
+				font-family: 'Bricolage Grotesque';
+				font-weight: 700;
+				font-size: 22px;
+				letter-spacing: -0.02em;
+			}
+			.slab .ln {
+				flex: 1;
+				height: 2px;
+				background: var(--line);
+			}
+			.slab .meta {
+				font-family: 'Instrument Serif';
+				font-style: italic;
+				font-size: 16px;
+				color: var(--ink-2);
+			}
+
+			/* apps — asymmetric editorial grid */
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(12, 1fr);
+				gap: 14px;
+			}
+			.tile {
+				grid-column: span 3;
+				background: var(--card);
+				border: 2px solid var(--line);
+				border-radius: 3px;
+				padding: 18px;
+				cursor: pointer;
+				transition:
+					transform 0.15s,
+					box-shadow 0.15s;
+				position: relative;
+				box-shadow: 4px 4px 0 var(--line);
+			}
+			.tile:hover {
+				transform: translate(-2px, -2px);
+				box-shadow: 7px 7px 0 var(--accent);
+			}
+			.tile.wide {
+				grid-column: span 6;
+			}
+			.tile.tall {
+				grid-column: span 3;
+			}
+			.t-top {
+				display: flex;
+				align-items: flex-start;
+				gap: 12px;
+			}
+			.t-ico {
+				width: 46px;
+				height: 46px;
+				border: 2px solid var(--line);
+				border-radius: 3px;
+				display: grid;
+				place-items: center;
+				font-size: 22px;
+				background: var(--paper);
+				flex-shrink: 0;
+			}
+			.t-name {
+				font-family: 'Bricolage Grotesque';
+				font-weight: 700;
+				font-size: 18px;
+				letter-spacing: -0.02em;
+				line-height: 1;
+			}
+			.t-cat {
+				font-family: 'Instrument Serif';
+				font-style: italic;
+				font-size: 14px;
+				color: var(--ink-2);
+				margin-top: 3px;
+			}
+			.tag {
+				margin-left: auto;
+				font-weight: 700;
+				font-size: 10px;
+				text-transform: uppercase;
+				letter-spacing: 0.1em;
+				padding: 4px 8px;
+				border-radius: 2px;
+				border: 1.5px solid currentColor;
+			}
+			.tag.ok {
+				color: var(--ok);
+			}
+			.tag.warn {
+				color: var(--warn);
+			}
+			.tag.bad {
+				color: var(--bad);
+				background: var(--bad);
+				color: #fff;
+				border-color: var(--bad);
+			}
+			.t-foot {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 18px;
+				padding-top: 13px;
+				border-top: 1.5px solid var(--line-soft);
+			}
+			.t-foot .up {
+				font-weight: 700;
+				font-size: 13px;
+			}
+			.t-foot .up small {
+				font-weight: 500;
+				color: var(--ink-faint);
+			}
+			.spark {
+				height: 24px;
+				width: 90px;
+			}
+			.tile.wide .blurb {
+				font-size: 14px;
+				color: var(--ink-2);
+				line-height: 1.5;
+				margin-top: 14px;
+				max-width: 42ch;
+			}
+
+			@keyframes pop {
+				from {
+					opacity: 0;
+					transform: translateY(12px);
+				}
+				to {
+					opacity: 1;
+					transform: none;
+				}
+			}
+			.tile,
+			.figure {
+				animation: pop 0.5s both;
+			}
+			.grid .tile:nth-child(1) {
+				animation-delay: 0.05s;
+			}
+			.grid .tile:nth-child(2) {
+				animation-delay: 0.11s;
+			}
+			.grid .tile:nth-child(3) {
+				animation-delay: 0.17s;
+			}
+			.grid .tile:nth-child(4) {
+				animation-delay: 0.23s;
+			}
+			.grid .tile:nth-child(5) {
+				animation-delay: 0.29s;
+			}
+			.grid .tile:nth-child(6) {
+				animation-delay: 0.35s;
+			}
+			.grid .tile:nth-child(7) {
+				animation-delay: 0.41s;
+			}
+
+			.colophon {
+				margin: 46px 0 30px;
+				padding-top: 18px;
+				border-top: 2.5px solid var(--line);
+				font-family: 'Instrument Serif';
+				font-style: italic;
+				font-size: 15px;
+				color: var(--ink-2);
+				display: flex;
+				justify-content: space-between;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="wrap">
+			<!-- Masthead -->
+			<div class="masthead">
+				<div class="logo">
+					<div class="glyph">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<rect x="3" y="3" width="7" height="7" />
+							<rect x="14" y="3" width="7" height="7" />
+							<rect x="14" y="14" width="7" height="7" />
+							<rect x="3" y="14" width="7" height="7" />
+						</svg>
+					</div>
+					<div class="tt">LAUNCHER<small>the home cloud edition</small></div>
+				</div>
+				<nav class="nav"><a class="on">Overview</a><a>Apps</a><a>Boards</a><a>Status</a></nav>
+				<div class="tools">
+					<div class="search">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="11" cy="11" r="7" />
+							<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						</svg>
+						Search<span class="k">⌘K</span>
+					</div>
+					<div class="ib">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+							<circle cx="12" cy="12" r="4" />
+							<path
+								d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+							/>
+						</svg>
+					</div>
+				</div>
+			</div>
+
+			<!-- Hero -->
+			<section class="hero">
+				<div class="hero-l">
+					<div class="kicker">Tuesday · 27 May · 19:42</div>
+					<h1>Your stack,<br />all in <em>one place.</em></h1>
+					<p>
+						Ten services under one roof. Eight humming, two asking for attention. Everything
+						launches from here.
+					</p>
+					<div class="hero-cta">
+						<a class="btn solid">Open a board →</a><a class="btn ghost">Add an app</a>
+					</div>
+				</div>
+				<div class="hero-r">
+					<div class="figure">
+						<div class="num acc">8/10</div>
+						<div class="desc"><b>Services online</b>Deluge offline · Portainer slow to respond</div>
+					</div>
+					<div class="figure">
+						<div class="num bl">99.4%</div>
+						<div class="desc"><b>Fleet uptime</b>Rolling 30-day average across all monitors</div>
+					</div>
+					<div class="figure">
+						<div class="num">142<span style="font-size: 20px">ms</span></div>
+						<div class="desc"><b>Median response</b>p95 latency over the last 24 hours</div>
+					</div>
+				</div>
+			</section>
+
+			<!-- Apps -->
+			<div class="slab">
+				<h2>Favorites</h2>
+				<div class="ln"></div>
+				<div class="meta">eight pinned</div>
+			</div>
+			<div class="grid">
+				<div class="tile wide">
+					<div class="t-top">
+						<div class="t-ico">🎬</div>
+						<div>
+							<div class="t-name">Jellyfin</div>
+							<div class="t-cat">Media server · the crown jewel</div>
+						</div>
+						<span class="tag ok">Online</span>
+					</div>
+					<p class="blurb">
+						Streaming to 3 devices right now. Library scan completed 2 hours ago — 4,212 movies, 318
+						shows indexed and healthy.
+					</p>
+					<div class="t-foot">
+						<div class="up">99.9% <small>uptime · 24h</small></div>
+						<svg class="spark" viewBox="0 0 90 24" preserveAspectRatio="none">
+							<polyline
+								fill="none"
+								stroke="#ff5436"
+								stroke-width="2.2"
+								points="0,18 12,15 24,17 36,9 48,12 60,7 72,11 82,5 90,8"
+							/>
+						</svg>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">📷</div>
+						<div>
+							<div class="t-name">Immich</div>
+							<div class="t-cat">Photos</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up">100% <small>24h</small></div>
+						<span class="tag ok">Up</span>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">🌿</div>
+						<div>
+							<div class="t-name">Gitea</div>
+							<div class="t-cat">Git</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up">99.8% <small>24h</small></div>
+						<span class="tag ok">Up</span>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">🐳</div>
+						<div>
+							<div class="t-name">Portainer</div>
+							<div class="t-cat">Containers</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up">98.1% <small>24h</small></div>
+						<span class="tag warn">Slow</span>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">🛡️</div>
+						<div>
+							<div class="t-name">Pi-hole</div>
+							<div class="t-cat">DNS</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up">100% <small>24h</small></div>
+						<span class="tag ok">Up</span>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">📋</div>
+						<div>
+							<div class="t-name">Planka</div>
+							<div class="t-cat">Kanban</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up">99.5% <small>24h</small></div>
+						<span class="tag ok">Up</span>
+					</div>
+				</div>
+				<div class="tile">
+					<div class="t-top">
+						<div class="t-ico">⬇️</div>
+						<div>
+							<div class="t-name">Deluge</div>
+							<div class="t-cat">Downloads</div>
+						</div>
+					</div>
+					<div class="t-foot">
+						<div class="up" style="color: var(--bad)">—</div>
+						<span class="tag bad">Down</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="colophon">
+				<span>Editorial — Bricolage Grotesque + Instrument Serif</span
+				><span>warm paper · ink rules · hard shadows · asymmetric grid</span>
+			</div>
+		</div>
+	</body>
+</html>

design-mockups/04-cozy-home.html

@@ -0,0 +1,723 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Web App Launcher — Cozy Home</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			:root {
+				--bg: #fdf8f2; /* warm cream */
+				--bg-2: #f6efe4;
+				--card: #fffdfa;
+				--ink: #3a322b;
+				--ink-2: #857a6d;
+				--ink-faint: #b3a899;
+				--line: #ece2d3;
+				--peach: #ff9a76;
+				--terra: #e8754f;
+				--sage: #7fb069;
+				--sky: #6ca9d6;
+				--butter: #f3c969;
+				--lav: #b09fd6;
+				--ok: #5fa86c;
+				--warn: #d99a2b;
+				--bad: #e0685f;
+				--radius: 22px;
+			}
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			html,
+			body {
+				height: 100%;
+			}
+			body {
+				background: var(--bg);
+				color: var(--ink);
+				font-family: 'Figtree', system-ui, sans-serif;
+				-webkit-font-smoothing: antialiased;
+				overflow-x: hidden;
+			}
+			body::before {
+				content: '';
+				position: fixed;
+				inset: 0;
+				z-index: 0;
+				pointer-events: none;
+				background:
+					radial-gradient(50% 40% at 12% 0%, rgba(255, 154, 118, 0.16), transparent 70%),
+					radial-gradient(45% 40% at 95% 8%, rgba(108, 169, 214, 0.14), transparent 70%),
+					radial-gradient(50% 45% at 85% 100%, rgba(127, 176, 105, 0.12), transparent 70%);
+			}
+			.shell {
+				position: relative;
+				z-index: 1;
+				display: grid;
+				grid-template-columns: 236px 1fr;
+				min-height: 100vh;
+			}
+
+			/* sidebar */
+			.side {
+				padding: 24px 18px;
+				display: flex;
+				flex-direction: column;
+			}
+			.brand {
+				display: flex;
+				align-items: center;
+				gap: 11px;
+				padding: 6px 8px;
+				margin-bottom: 24px;
+			}
+			.brand .m {
+				width: 40px;
+				height: 40px;
+				border-radius: 14px;
+				background: linear-gradient(135deg, var(--peach), var(--terra));
+				display: grid;
+				place-items: center;
+				color: #fff;
+				box-shadow: 0 10px 22px -8px var(--terra);
+			}
+			.brand .m svg {
+				width: 21px;
+				height: 21px;
+			}
+			.brand .t {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 19px;
+				letter-spacing: -0.01em;
+			}
+			.brand .t span {
+				display: block;
+				font-family: 'Figtree';
+				font-weight: 500;
+				font-size: 11px;
+				color: var(--ink-faint);
+			}
+			.nlabel {
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.1em;
+				font-size: 10.5px;
+				color: var(--ink-faint);
+				margin: 16px 10px 8px;
+			}
+			.ni {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+				padding: 11px 13px;
+				border-radius: 14px;
+				color: var(--ink-2);
+				font-weight: 600;
+				font-size: 14.5px;
+				cursor: pointer;
+				transition: 0.16s;
+			}
+			.ni svg {
+				width: 19px;
+				height: 19px;
+			}
+			.ni:hover {
+				background: var(--bg-2);
+				color: var(--ink);
+			}
+			.ni.on {
+				background: var(--card);
+				color: var(--terra);
+				box-shadow:
+					0 6px 16px -8px rgba(0, 0, 0, 0.18),
+					inset 0 0 0 1px var(--line);
+			}
+			.ni .c {
+				margin-left: auto;
+				font-size: 11px;
+				background: var(--bg-2);
+				color: var(--ink-2);
+				padding: 2px 8px;
+				border-radius: 10px;
+			}
+			.side-card {
+				margin-top: auto;
+				background: linear-gradient(135deg, rgba(127, 176, 105, 0.16), rgba(108, 169, 214, 0.14));
+				border-radius: 18px;
+				padding: 16px;
+				border: 1px solid var(--line);
+			}
+			.side-card p {
+				font-size: 12.5px;
+				color: var(--ink-2);
+				line-height: 1.4;
+			}
+			.side-card .who {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				margin-top: 12px;
+			}
+			.side-card .av {
+				width: 32px;
+				height: 32px;
+				border-radius: 11px;
+				background: linear-gradient(135deg, var(--lav), var(--sky));
+				color: #fff;
+				display: grid;
+				place-items: center;
+				font-weight: 700;
+				font-size: 13px;
+			}
+
+			/* main */
+			.main {
+				padding: 30px 36px 40px;
+				min-width: 0;
+			}
+			.top {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin-bottom: 8px;
+			}
+			.top .search {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				background: var(--card);
+				border: 1px solid var(--line);
+				border-radius: 16px;
+				padding: 12px 16px;
+				color: var(--ink-faint);
+				font-size: 14px;
+				width: 320px;
+				cursor: text;
+				box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.2);
+			}
+			.top .search svg {
+				width: 16px;
+				height: 16px;
+			}
+			.top .search .k {
+				margin-left: auto;
+				font-size: 11px;
+				font-weight: 700;
+				background: var(--bg-2);
+				padding: 2px 8px;
+				border-radius: 8px;
+			}
+			.rbtn {
+				margin-left: auto;
+				width: 44px;
+				height: 44px;
+				border-radius: 15px;
+				background: var(--card);
+				border: 1px solid var(--line);
+				display: grid;
+				place-items: center;
+				color: var(--ink-2);
+				cursor: pointer;
+				box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.2);
+			}
+			.rbtn + .rbtn {
+				margin-left: 0;
+			}
+			.rbtn:hover {
+				color: var(--terra);
+			}
+			.rbtn svg {
+				width: 19px;
+				height: 19px;
+			}
+
+			.greet {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 34px;
+				letter-spacing: -0.02em;
+				margin: 18px 0 4px;
+			}
+			.greet .wave {
+				display: inline-block;
+				animation: wave 2.4s ease-in-out infinite;
+				transform-origin: 70% 70%;
+			}
+			@keyframes wave {
+				0%,
+				60%,
+				100% {
+					transform: rotate(0);
+				}
+				10% {
+					transform: rotate(16deg);
+				}
+				20% {
+					transform: rotate(-8deg);
+				}
+				30% {
+					transform: rotate(14deg);
+				}
+				40% {
+					transform: rotate(-4deg);
+				}
+			}
+			.gsub {
+				color: var(--ink-2);
+				font-size: 15px;
+				margin-bottom: 26px;
+			}
+			.gsub b {
+				color: var(--sage);
+				font-weight: 700;
+			}
+
+			/* summary chips */
+			.chips {
+				display: flex;
+				gap: 12px;
+				margin-bottom: 30px;
+				flex-wrap: wrap;
+			}
+			.chip {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+				background: var(--card);
+				border: 1px solid var(--line);
+				border-radius: 18px;
+				padding: 14px 18px;
+				box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.3);
+			}
+			.chip .ic {
+				width: 38px;
+				height: 38px;
+				border-radius: 12px;
+				display: grid;
+				place-items: center;
+			}
+			.chip .ic svg {
+				width: 19px;
+				height: 19px;
+				color: #fff;
+			}
+			.chip .v {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 21px;
+				line-height: 1;
+			}
+			.chip .l {
+				font-size: 12.5px;
+				color: var(--ink-2);
+				margin-top: 2px;
+			}
+
+			.sec {
+				display: flex;
+				align-items: baseline;
+				gap: 12px;
+				margin: 6px 0 18px;
+			}
+			.sec h2 {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 22px;
+				letter-spacing: -0.01em;
+			}
+			.sec .more {
+				margin-left: auto;
+				font-size: 13.5px;
+				color: var(--terra);
+				font-weight: 600;
+				text-decoration: none;
+			}
+
+			.apps {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+				gap: 18px;
+			}
+			.card {
+				background: var(--card);
+				border: 1px solid var(--line);
+				border-radius: var(--radius);
+				padding: 20px;
+				cursor: pointer;
+				transition:
+					transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+					box-shadow 0.2s;
+				position: relative;
+				overflow: hidden;
+				box-shadow: 0 10px 26px -20px rgba(0, 0, 0, 0.4);
+			}
+			.card:hover {
+				transform: translateY(-6px) rotate(-0.4deg);
+				box-shadow: 0 22px 40px -22px rgba(0, 0, 0, 0.4);
+			}
+			.blob {
+				position: absolute;
+				width: 120px;
+				height: 120px;
+				border-radius: 50%;
+				filter: blur(30px);
+				opacity: 0.5;
+				top: -50px;
+				right: -40px;
+			}
+			.ico {
+				width: 54px;
+				height: 54px;
+				border-radius: 18px;
+				display: grid;
+				place-items: center;
+				font-size: 26px;
+				position: relative;
+			}
+			.nm {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 17px;
+				margin-top: 16px;
+				letter-spacing: -0.01em;
+			}
+			.ct {
+				font-size: 13px;
+				color: var(--ink-2);
+				margin-top: 1px;
+			}
+			.foot {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 18px;
+			}
+			.dot {
+				display: flex;
+				align-items: center;
+				gap: 7px;
+				font-size: 12.5px;
+				font-weight: 600;
+			}
+			.dot .b {
+				width: 9px;
+				height: 9px;
+				border-radius: 50%;
+			}
+			.dot.ok {
+				color: var(--ok);
+			}
+			.dot.ok .b {
+				background: var(--ok);
+				box-shadow: 0 0 0 4px rgba(95, 168, 108, 0.18);
+			}
+			.dot.warn {
+				color: var(--warn);
+			}
+			.dot.warn .b {
+				background: var(--warn);
+				box-shadow: 0 0 0 4px rgba(217, 154, 43, 0.18);
+			}
+			.dot.bad {
+				color: var(--bad);
+			}
+			.dot.bad .b {
+				background: var(--bad);
+				box-shadow: 0 0 0 4px rgba(224, 104, 95, 0.18);
+			}
+			.up {
+				font-size: 12px;
+				color: var(--ink-faint);
+				font-weight: 600;
+			}
+
+			@keyframes rise {
+				from {
+					opacity: 0;
+					transform: translateY(16px);
+				}
+				to {
+					opacity: 1;
+					transform: none;
+				}
+			}
+			.card,
+			.chip {
+				animation: rise 0.55s both;
+			}
+			.chip:nth-child(2) {
+				animation-delay: 0.06s;
+			}
+			.chip:nth-child(3) {
+				animation-delay: 0.12s;
+			}
+			.chip:nth-child(4) {
+				animation-delay: 0.18s;
+			}
+			.apps .card:nth-child(1) {
+				animation-delay: 0.1s;
+			}
+			.apps .card:nth-child(2) {
+				animation-delay: 0.16s;
+			}
+			.apps .card:nth-child(3) {
+				animation-delay: 0.22s;
+			}
+			.apps .card:nth-child(4) {
+				animation-delay: 0.28s;
+			}
+			.apps .card:nth-child(5) {
+				animation-delay: 0.34s;
+			}
+			.apps .card:nth-child(6) {
+				animation-delay: 0.4s;
+			}
+			.apps .card:nth-child(7) {
+				animation-delay: 0.46s;
+			}
+			.apps .card:nth-child(8) {
+				animation-delay: 0.52s;
+			}
+
+			.note {
+				text-align: center;
+				color: var(--ink-faint);
+				font-family: 'Fraunces';
+				font-style: italic;
+				font-size: 14px;
+				margin-top: 36px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="shell">
+			<!-- Sidebar -->
+			<aside class="side">
+				<div class="brand">
+					<div class="m">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<rect x="3" y="3" width="7" height="7" rx="2" />
+							<rect x="14" y="3" width="7" height="7" rx="2" />
+							<rect x="14" y="14" width="7" height="7" rx="2" />
+							<rect x="3" y="14" width="7" height="7" rx="2" />
+						</svg>
+					</div>
+					<div class="t">Launcher<span>our home cloud</span></div>
+				</div>
+				<div class="nlabel">Menu</div>
+				<div class="ni on">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+						<path d="M3 11l9-8 9 8M5 10v10h14V10" />
+					</svg>
+					Home
+				</div>
+				<div class="ni">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+						<circle cx="12" cy="12" r="9" />
+						<path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18" />
+					</svg>
+					All apps <span class="c">10</span>
+				</div>
+				<div class="ni">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+						<path d="M20 6 9 17l-5-5" />
+					</svg>
+					Status
+				</div>
+				<div class="nlabel">Rooms</div>
+				<div class="ni">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+						<rect x="3" y="3" width="18" height="18" rx="4" />
+					</svg>
+					Movie night
+				</div>
+				<div class="ni">
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+						<rect x="3" y="3" width="18" height="18" rx="4" />
+					</svg>
+					The basement rack
+				</div>
+				<div class="side-card">
+					<p>“Everything’s running smoothly today. ☕ Two apps want a peek when you get a sec.”</p>
+					<div class="who">
+						<div class="av">AD</div>
+						<div>
+							<div style="font-weight: 700; font-size: 13px">Alexei</div>
+							<div style="font-size: 11px; color: var(--ink-faint)">Admin</div>
+						</div>
+					</div>
+				</div>
+			</aside>
+
+			<!-- Main -->
+			<main class="main">
+				<div class="top">
+					<div class="search">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="11" cy="11" r="7" />
+							<line x1="21" y1="21" x2="16.65" y2="16.65" />
+						</svg>
+						Search your apps… <span class="k">⌘K</span>
+					</div>
+					<div class="rbtn">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+							<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" />
+							<path d="M13.7 21a2 2 0 0 1-3.4 0" />
+						</svg>
+					</div>
+					<div class="rbtn">
+						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
+							<circle cx="12" cy="12" r="4" />
+							<path
+								d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+							/>
+						</svg>
+					</div>
+				</div>
+
+				<h1 class="greet">Hi Alexei <span class="wave">👋</span></h1>
+				<p class="gsub">It’s a calm evening — <b>8 of your 10 apps</b> are happy and online.</p>
+
+				<div class="chips">
+					<div class="chip">
+						<div class="ic" style="background: var(--sage)">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+								<path d="M20 6 9 17l-5-5" />
+							</svg>
+						</div>
+						<div>
+							<div class="v">8/10</div>
+							<div class="l">Apps online</div>
+						</div>
+					</div>
+					<div class="chip">
+						<div class="ic" style="background: var(--sky)">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+								<circle cx="12" cy="12" r="9" />
+								<path d="M12 7v5l3 2" />
+							</svg>
+						</div>
+						<div>
+							<div class="v">142ms</div>
+							<div class="l">Avg speed</div>
+						</div>
+					</div>
+					<div class="chip">
+						<div class="ic" style="background: var(--butter)">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+								<path d="M3 12h4l3 8 4-16 3 8h4" />
+							</svg>
+						</div>
+						<div>
+							<div class="v">99.4%</div>
+							<div class="l">Uptime · 30d</div>
+						</div>
+					</div>
+					<div class="chip">
+						<div class="ic" style="background: var(--lav)">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+								<path d="M13 2 3 14h7l-1 8 10-12h-7z" />
+							</svg>
+						</div>
+						<div>
+							<div class="v">38 min</div>
+							<div class="l">Battery left</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="sec">
+					<h2>Your favorites</h2>
+					<a class="more" href="#">See all →</a>
+				</div>
+				<div class="apps">
+					<div class="card">
+						<div class="blob" style="background: var(--terra)"></div>
+						<div class="ico" style="background: rgba(232, 117, 79, 0.16)">🎬</div>
+						<div class="nm">Jellyfin</div>
+						<div class="ct">Movies &amp; shows</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">99.9%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--sky)"></div>
+						<div class="ico" style="background: rgba(108, 169, 214, 0.18)">📷</div>
+						<div class="nm">Immich</div>
+						<div class="ct">Photos</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">100%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--sage)"></div>
+						<div class="ico" style="background: rgba(127, 176, 105, 0.18)">🌿</div>
+						<div class="nm">Gitea</div>
+						<div class="ct">Code</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">99.8%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--butter)"></div>
+						<div class="ico" style="background: rgba(243, 201, 105, 0.22)">🐳</div>
+						<div class="nm">Portainer</div>
+						<div class="ct">Containers</div>
+						<div class="foot">
+							<span class="dot warn"><span class="b"></span>A bit slow</span
+							><span class="up">98.1%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--lav)"></div>
+						<div class="ico" style="background: rgba(176, 159, 214, 0.2)">🛡️</div>
+						<div class="nm">Pi-hole</div>
+						<div class="ct">Ad blocker</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">100%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--peach)"></div>
+						<div class="ico" style="background: rgba(255, 154, 118, 0.2)">📋</div>
+						<div class="nm">Planka</div>
+						<div class="ct">To-dos</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">99.5%</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--bad)"></div>
+						<div class="ico" style="background: rgba(224, 104, 95, 0.16)">⬇️</div>
+						<div class="nm">Deluge</div>
+						<div class="ct">Downloads</div>
+						<div class="foot">
+							<span class="dot bad"><span class="b"></span>Asleep</span><span class="up">—</span>
+						</div>
+					</div>
+					<div class="card">
+						<div class="blob" style="background: var(--sky)"></div>
+						<div class="ico" style="background: rgba(108, 169, 214, 0.18)">🔀</div>
+						<div class="nm">Proxy</div>
+						<div class="ct">Networking</div>
+						<div class="foot">
+							<span class="dot ok"><span class="b"></span>Online</span><span class="up">99.9%</span>
+						</div>
+					</div>
+				</div>
+
+				<p class="note">
+					Cozy Home — Fraunces + Figtree · warm cream · soft pastel rooms · gentle motion
+				</p>
+			</main>
+		</div>
+	</body>
+</html>

design-mockups/cozy-system.html

@@ -0,0 +1,639 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Cozy Home — Design System Reference</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			/* === The exact tokens now living in src/app.css (light/cream) === */
+			:root {
+				--background: hsl(35 56% 97%);
+				--foreground: hsl(33 18% 18%);
+				--muted: hsl(36 42% 93%);
+				--muted-foreground: hsl(34 12% 47%);
+				--card: hsl(40 60% 99%);
+				--border: hsl(36 35% 88%);
+				--primary: hsl(16 72% 56%);
+				--primary-foreground: hsl(40 60% 99%);
+				--accent: hsl(34 44% 90%);
+				--status-online: #5fa86c;
+				--status-offline: #e0685f;
+				--status-degraded: #d99a2b;
+				--status-unknown: #b3a899;
+				--room-sage: #7fb069;
+				--room-sky: #6ca9d6;
+				--room-butter: #f3c969;
+				--room-lav: #b09fd6;
+				--room-peach: #ff9a76;
+				--room-terra: #e8754f;
+				--radius: 1rem;
+				--shadow-soft: 0 10px 26px -20px rgba(80, 50, 20, 0.45);
+				--shadow-lift: 0 22px 40px -22px rgba(80, 50, 20, 0.4);
+				--font-sans: 'Figtree', system-ui, sans-serif;
+				--font-display: 'Fraunces', serif;
+			}
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			body {
+				background: var(--background);
+				color: var(--foreground);
+				font-family: var(--font-sans);
+				padding: 40px;
+				line-height: 1.5;
+			}
+			h1,
+			h2,
+			h3 {
+				font-family: var(--font-display);
+				letter-spacing: -0.01em;
+			}
+			.wrap {
+				max-width: 1080px;
+				margin: 0 auto;
+			}
+			.title {
+				font-size: 34px;
+				font-weight: 600;
+			}
+			.lede {
+				color: var(--muted-foreground);
+				margin: 6px 0 8px;
+				max-width: 64ch;
+			}
+			.path {
+				font-family: ui-monospace, monospace;
+				font-size: 12px;
+				color: var(--room-terra);
+				background: color-mix(in srgb, var(--room-terra) 12%, transparent);
+				padding: 3px 9px;
+				border-radius: 8px;
+				display: inline-block;
+			}
+			section {
+				margin-top: 42px;
+			}
+			.h {
+				font-size: 13px;
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.12em;
+				color: var(--muted-foreground);
+				margin-bottom: 16px;
+				padding-bottom: 8px;
+				border-bottom: 1px solid var(--border);
+			}
+			.row {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 14px;
+				align-items: center;
+			}
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+				gap: 14px;
+			}
+
+			/* tokens */
+			.swatch {
+				border-radius: var(--radius);
+				border: 1px solid var(--border);
+				overflow: hidden;
+				background: var(--card);
+				box-shadow: var(--shadow-soft);
+			}
+			.swatch .c {
+				height: 56px;
+			}
+			.swatch .n {
+				padding: 9px 12px;
+				font-size: 12px;
+			}
+			.swatch .n b {
+				display: block;
+				font-weight: 600;
+			}
+			.swatch .n span {
+				color: var(--muted-foreground);
+				font-family: ui-monospace, monospace;
+				font-size: 10.5px;
+			}
+
+			/* buttons */
+			.btn {
+				font-family: var(--font-sans);
+				font-weight: 600;
+				font-size: 14px;
+				padding: 11px 18px;
+				border-radius: 14px;
+				border: 1px solid transparent;
+				cursor: pointer;
+				transition: 0.18s;
+			}
+			.btn-primary {
+				background: var(--primary);
+				color: var(--primary-foreground);
+				box-shadow: var(--shadow-soft);
+			}
+			.btn-primary:hover {
+				transform: translateY(-2px);
+				box-shadow: var(--shadow-lift);
+			}
+			.btn-secondary {
+				background: var(--card);
+				color: var(--foreground);
+				border-color: var(--border);
+				box-shadow: var(--shadow-soft);
+			}
+			.btn-secondary:hover {
+				transform: translateY(-2px);
+				border-color: color-mix(in srgb, var(--primary) 40%, transparent);
+			}
+			.btn-ghost {
+				background: transparent;
+				color: var(--foreground);
+			}
+			.btn-ghost:hover {
+				background: var(--accent);
+			}
+			.btn-icon {
+				width: 42px;
+				height: 42px;
+				border-radius: 14px;
+				display: grid;
+				place-items: center;
+				padding: 0;
+			}
+
+			/* inputs */
+			.field {
+				display: flex;
+				flex-direction: column;
+				gap: 7px;
+				max-width: 340px;
+			}
+			.field label {
+				font-size: 13px;
+				font-weight: 600;
+			}
+			.input {
+				font-family: var(--font-sans);
+				font-size: 14px;
+				padding: 11px 14px;
+				border-radius: 14px;
+				border: 1px solid var(--border);
+				background: var(--card);
+				color: var(--foreground);
+				box-shadow: var(--shadow-soft);
+				transition: 0.16s;
+			}
+			.input:focus {
+				outline: none;
+				border-color: var(--primary);
+				box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
+			}
+			.hint {
+				font-size: 12px;
+				color: var(--muted-foreground);
+			}
+
+			/* badges / status pills */
+			.pill {
+				display: inline-flex;
+				align-items: center;
+				gap: 7px;
+				font-size: 12.5px;
+				font-weight: 600;
+				padding: 5px 11px;
+				border-radius: 999px;
+			}
+			.pill .b {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+			}
+			.pill.ok {
+				color: var(--status-online);
+				background: color-mix(in srgb, var(--status-online) 14%, transparent);
+			}
+			.pill.warn {
+				color: var(--status-degraded);
+				background: color-mix(in srgb, var(--status-degraded) 14%, transparent);
+			}
+			.pill.bad {
+				color: var(--status-offline);
+				background: color-mix(in srgb, var(--status-offline) 14%, transparent);
+			}
+			.pill .b {
+				background: currentColor;
+			}
+			.room-pill {
+				font-size: 11px;
+				font-weight: 700;
+				padding: 4px 10px;
+				border-radius: 999px;
+			}
+
+			/* tabs */
+			.tabs {
+				display: inline-flex;
+				gap: 4px;
+				background: var(--muted);
+				padding: 5px;
+				border-radius: 16px;
+			}
+			.tab {
+				font-weight: 600;
+				font-size: 13.5px;
+				padding: 8px 16px;
+				border-radius: 11px;
+				cursor: pointer;
+				color: var(--muted-foreground);
+			}
+			.tab.on {
+				background: var(--card);
+				color: var(--foreground);
+				box-shadow: var(--shadow-soft);
+			}
+
+			/* card */
+			.card {
+				background: var(--card);
+				border: 1px solid var(--border);
+				border-radius: 1.4rem;
+				padding: 20px;
+				box-shadow: var(--shadow-soft);
+				max-width: 300px;
+				position: relative;
+				overflow: hidden;
+			}
+			.card .blob {
+				position: absolute;
+				width: 120px;
+				height: 120px;
+				border-radius: 50%;
+				filter: blur(30px);
+				opacity: 0.45;
+				top: -50px;
+				right: -40px;
+			}
+			.card .ic {
+				width: 52px;
+				height: 52px;
+				border-radius: 18px;
+				display: grid;
+				place-items: center;
+				font-size: 25px;
+				position: relative;
+			}
+			.card h3 {
+				font-size: 17px;
+				font-weight: 600;
+				margin-top: 14px;
+			}
+			.card .ct {
+				font-size: 13px;
+				color: var(--muted-foreground);
+			}
+			.card .f {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-top: 16px;
+			}
+
+			/* dialog */
+			.dialog {
+				background: var(--card);
+				border: 1px solid var(--border);
+				border-radius: 1.4rem;
+				padding: 24px;
+				box-shadow: var(--shadow-lift);
+				max-width: 380px;
+			}
+			.dialog h3 {
+				font-size: 20px;
+				font-weight: 600;
+			}
+			.dialog p {
+				color: var(--muted-foreground);
+				font-size: 14px;
+				margin: 8px 0 20px;
+			}
+
+			/* table */
+			table {
+				width: 100%;
+				border-collapse: collapse;
+				background: var(--card);
+				border: 1px solid var(--border);
+				border-radius: 1.2rem;
+				overflow: hidden;
+				box-shadow: var(--shadow-soft);
+			}
+			th {
+				text-align: left;
+				font-size: 11px;
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.08em;
+				color: var(--muted-foreground);
+				padding: 14px 18px;
+				border-bottom: 1px solid var(--border);
+			}
+			td {
+				padding: 14px 18px;
+				font-size: 14px;
+				border-bottom: 1px solid var(--border);
+			}
+			tr:last-child td {
+				border-bottom: 0;
+			}
+			tr:hover td {
+				background: var(--accent);
+			}
+
+			/* empty state */
+			.empty {
+				text-align: center;
+				border: 2px dashed var(--border);
+				border-radius: 1.4rem;
+				padding: 48px 24px;
+				background: color-mix(in srgb, var(--card) 50%, transparent);
+			}
+			.empty .e-ic {
+				width: 64px;
+				height: 64px;
+				border-radius: 22px;
+				display: grid;
+				place-items: center;
+				margin: 0 auto 16px;
+				background: color-mix(in srgb, var(--room-peach) 20%, transparent);
+				color: var(--room-terra);
+			}
+			.empty h3 {
+				font-size: 19px;
+				font-weight: 600;
+			}
+			.empty p {
+				color: var(--muted-foreground);
+				font-size: 14px;
+				margin: 6px auto 18px;
+				max-width: 36ch;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="wrap">
+			<h1 class="title">Cozy Home — Design System</h1>
+			<p class="lede">
+				The component pattern sheet for the migration. Every phase styles its components to match
+				these primitives. Tokens here mirror what now lives in
+				<span class="path">src/app.css</span> — change them there and the whole app follows.
+			</p>
+
+			<section>
+				<div class="h">Color tokens</div>
+				<div class="grid">
+					<div class="swatch">
+						<div class="c" style="background: var(--background)"></div>
+						<div class="n"><b>background</b><span>cream #fdf8f2</span></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--card)"></div>
+						<div class="n"><b>card</b><span>#fffdfa</span></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--primary)"></div>
+						<div class="n"><b>primary</b><span>terracotta · tunable</span></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--foreground)"></div>
+						<div class="n"><b>foreground</b><span>warm ink</span></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--muted)"></div>
+						<div class="n"><b>muted</b><span>#f3ecde</span></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--border)"></div>
+						<div class="n"><b>border</b><span>#ece2d3</span></div>
+					</div>
+				</div>
+				<div style="margin-top: 14px" class="grid">
+					<div class="swatch">
+						<div class="c" style="background: var(--room-terra)"></div>
+						<div class="n"><b>room · terra</b></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--room-peach)"></div>
+						<div class="n"><b>room · peach</b></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--room-butter)"></div>
+						<div class="n"><b>room · butter</b></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--room-sage)"></div>
+						<div class="n"><b>room · sage</b></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--room-sky)"></div>
+						<div class="n"><b>room · sky</b></div>
+					</div>
+					<div class="swatch">
+						<div class="c" style="background: var(--room-lav)"></div>
+						<div class="n"><b>room · lav</b></div>
+					</div>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Typography — Fraunces (display) · Figtree (body)</div>
+				<h1 style="font-size: 46px; font-weight: 600">Good evening, Alexei</h1>
+				<h2 style="font-size: 28px; font-weight: 600; margin-top: 10px">Your favorites</h2>
+				<h3 style="font-size: 19px; font-weight: 600; margin-top: 10px">Jellyfin</h3>
+				<p style="margin-top: 8px; max-width: 60ch">
+					Body copy is Figtree — friendly, legible, rounded. It carries descriptions, hints, and
+					plain-language status like “a bit slow” or “asleep”.
+				</p>
+			</section>
+
+			<section>
+				<div class="h">Buttons</div>
+				<div class="row">
+					<button class="btn btn-primary">Open a board</button>
+					<button class="btn btn-secondary">Add an app</button>
+					<button class="btn btn-ghost">Cancel</button>
+					<button class="btn btn-secondary btn-icon" title="icon">🔔</button>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Form fields</div>
+				<div class="row" style="align-items: flex-start">
+					<div class="field">
+						<label>App name</label><input class="input" value="Jellyfin" /><span class="hint"
+							>Shown on the card and in search.</span
+						>
+					</div>
+					<div class="field"><label>URL</label><input class="input" placeholder="https://…" /></div>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Status pills &amp; room tags</div>
+				<div class="row">
+					<span class="pill ok"><span class="b"></span>Online</span>
+					<span class="pill warn"><span class="b"></span>A bit slow</span>
+					<span class="pill bad"><span class="b"></span>Asleep</span>
+					<span
+						class="room-pill"
+						style="
+							color: var(--room-terra);
+							background: color-mix(in srgb, var(--room-terra) 16%, transparent);
+						"
+						>Media</span
+					>
+					<span
+						class="room-pill"
+						style="
+							color: var(--room-sky);
+							background: color-mix(in srgb, var(--room-sky) 16%, transparent);
+						"
+						>Network</span
+					>
+					<span
+						class="room-pill"
+						style="
+							color: var(--room-sage);
+							background: color-mix(in srgb, var(--room-sage) 16%, transparent);
+						"
+						>Git</span
+					>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Tabs</div>
+				<div class="tabs">
+					<div class="tab on">Overview</div>
+					<div class="tab">Activity</div>
+					<div class="tab">Settings</div>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">App card</div>
+				<div class="card">
+					<div class="blob" style="background: var(--room-terra)"></div>
+					<div
+						class="ic"
+						style="
+							background: color-mix(in srgb, var(--room-terra) 18%, transparent);
+							color: var(--room-terra);
+						"
+					>
+						🎬
+					</div>
+					<h3>Jellyfin</h3>
+					<div class="ct">Movies &amp; shows</div>
+					<div class="f">
+						<span class="pill ok"><span class="b"></span>Online</span
+						><span class="hint">99.9%</span>
+					</div>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Dialog</div>
+				<div class="dialog">
+					<h3>Remove Deluge?</h3>
+					<p>This deletes the app and its uptime history. This can’t be undone.</p>
+					<div class="row" style="justify-content: flex-end">
+						<button class="btn btn-ghost">Keep it</button
+						><button class="btn btn-primary" style="background: var(--status-offline)">
+							Remove
+						</button>
+					</div>
+				</div>
+			</section>
+
+			<section>
+				<div class="h">Table (admin)</div>
+				<table>
+					<thead>
+						<tr>
+							<th>User</th>
+							<th>Role</th>
+							<th>Status</th>
+							<th>Last seen</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>Alexei</td>
+							<td>Admin</td>
+							<td>
+								<span class="pill ok"><span class="b"></span>Active</span>
+							</td>
+							<td>just now</td>
+						</tr>
+						<tr>
+							<td>Guest</td>
+							<td>Viewer</td>
+							<td>
+								<span class="pill warn"><span class="b"></span>Idle</span>
+							</td>
+							<td>2h ago</td>
+						</tr>
+					</tbody>
+				</table>
+			</section>
+
+			<section>
+				<div class="h">Empty state</div>
+				<div class="empty">
+					<div class="e-ic">
+						<svg
+							width="30"
+							height="30"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.6"
+						>
+							<circle cx="12" cy="12" r="9" />
+							<path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z" />
+						</svg>
+					</div>
+					<h3>No apps yet</h3>
+					<p>Add your first service and it’ll show up here with live status.</p>
+					<button class="btn btn-primary">+ Add an app</button>
+				</div>
+			</section>
+
+			<p
+				style="
+					margin: 48px 0 20px;
+					text-align: center;
+					font-family: var(--font-display);
+					font-style: italic;
+					color: var(--muted-foreground);
+				"
+			>
+				Cozy Home design system · mirrors src/app.css · use as the pattern for every migrated
+				component
+			</p>
+		</div>
+	</body>
+</html>

design-mockups/index.html

@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Launcher — Redesign Mockups</title>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Figtree:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			* {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+			body {
+				font-family: 'Figtree', system-ui, sans-serif;
+				background: #0e0e12;
+				color: #eee;
+				min-height: 100vh;
+				padding: 48px 24px;
+			}
+			.wrap {
+				max-width: 1000px;
+				margin: 0 auto;
+			}
+			h1 {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 34px;
+				letter-spacing: -0.02em;
+			}
+			p.sub {
+				color: #9a99a6;
+				margin-top: 8px;
+				font-size: 15px;
+				line-height: 1.5;
+				max-width: 62ch;
+			}
+			.grid {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				gap: 18px;
+				margin-top: 34px;
+			}
+			a.card {
+				display: block;
+				text-decoration: none;
+				color: inherit;
+				border: 1px solid #24242e;
+				border-radius: 16px;
+				padding: 24px;
+				background: #15151c;
+				transition: 0.2s;
+			}
+			a.card:hover {
+				transform: translateY(-4px);
+				border-color: #3a3a4a;
+				background: #191920;
+			}
+			.badge {
+				font-size: 11px;
+				font-weight: 700;
+				text-transform: uppercase;
+				letter-spacing: 0.12em;
+				padding: 4px 10px;
+				border-radius: 20px;
+				display: inline-block;
+			}
+			.nm {
+				font-family: 'Fraunces';
+				font-weight: 600;
+				font-size: 21px;
+				margin: 14px 0 6px;
+			}
+			.ds {
+				color: #9a99a6;
+				font-size: 13.5px;
+				line-height: 1.5;
+			}
+			.swatch {
+				display: flex;
+				gap: 6px;
+				margin-top: 14px;
+			}
+			.swatch span {
+				width: 22px;
+				height: 22px;
+				border-radius: 6px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="wrap">
+			<h1>Web App Launcher — Redesign Directions</h1>
+			<p class="sub">
+				Four aesthetic directions for the same launcher, built as theme presets of one modernized
+				design system. Open each, resize, hover the cards, and try the live accent swatches in
+				Aurora Glass. Pick the one that fits — or mix and match.
+			</p>
+			<div class="grid">
+				<a class="card" href="01-command-deck.html">
+					<span class="badge" style="background: #0d1f18; color: #36e0a4"
+						>01 · Dark · Power-user</span
+					>
+					<div class="nm">Command Deck</div>
+					<div class="ds">
+						Mission-control / terminal. Dense, glanceable telemetry, LED status, monospace data.
+						Saira + JetBrains Mono.
+					</div>
+					<div class="swatch">
+						<span style="background: #070a0d"></span><span style="background: #36e0a4"></span
+						><span style="background: #ffb020"></span><span style="background: #ff4d5e"></span>
+					</div>
+				</a>
+				<a class="card" href="02-aurora-glass.html">
+					<span class="badge" style="background: #1d1340; color: #b69cff">02 · Dark · Premium</span>
+					<div class="nm">Aurora Glass</div>
+					<div class="ds">
+						Frosted glass over a living gradient mesh. Soft glows, generous space, fully retintable
+						accent. Outfit + Manrope.
+					</div>
+					<div class="swatch">
+						<span style="background: #0a0a14"></span
+						><span style="background: hsl(265 90% 66%)"></span
+						><span style="background: hsl(325 85% 65%)"></span
+						><span style="background: #34e0a1"></span>
+					</div>
+				</a>
+				<a class="card" href="03-editorial.html">
+					<span class="badge" style="background: #2a1109; color: #ff5436">03 · Light · Bold</span>
+					<div class="nm">Editorial</div>
+					<div class="ds">
+						Magazine masthead, big display type, ink rules, hard shadows, asymmetric grid. Bricolage
+						Grotesque + Instrument Serif.
+					</div>
+					<div class="swatch">
+						<span style="background: #f4f1ea"></span><span style="background: #191712"></span
+						><span style="background: #ff5436"></span><span style="background: #1f4ae0"></span>
+					</div>
+				</a>
+				<a class="card" href="04-cozy-home.html">
+					<span class="badge" style="background: #2a1c12; color: #ff9a76"
+						>04 · Light · Friendly</span
+					>
+					<div class="nm">Cozy Home</div>
+					<div class="ds">
+						Warm cream, soft rounded cards, pastel “rooms”, gentle motion. Friendly for the whole
+						household. Fraunces + Figtree.
+					</div>
+					<div class="swatch">
+						<span style="background: #fdf8f2"></span><span style="background: #e8754f"></span
+						><span style="background: #7fb069"></span><span style="background: #6ca9d6"></span>
+					</div>
+				</a>
+			</div>
+		</div>
+	</body>
+</html>

docker-compose.yml

@@ -7,7 +7,13 @@ services:
       - '${APP_PORT:-3000}:3000'
     environment:
       - DATABASE_URL=file:/app/data/launcher.db
-      - JWT_SECRET=${JWT_SECRET:-change-me-to-a-random-64-char-string}
+      # JWT_SECRET is REQUIRED. Generate one with: openssl rand -hex 32
+      # The container will refuse to start if this is not set or is too weak.
+      - JWT_SECRET=${JWT_SECRET:?JWT_SECRET must be set. Generate with: openssl rand -hex 32}
+      # INTEGRATION_ENCRYPTION_KEY encrypts stored credentials for integrations
+      # (Planka, Authentik, Pi-hole, etc.). MUST differ from JWT_SECRET so that
+      # rotating one does not invalidate the other.
+      - INTEGRATION_ENCRYPTION_KEY=${INTEGRATION_ENCRYPTION_KEY:?INTEGRATION_ENCRYPTION_KEY must be set. Generate with: openssl rand -hex 32}
       - JWT_EXPIRY=${JWT_EXPIRY:-15m}
       - REFRESH_TOKEN_EXPIRY=${REFRESH_TOKEN_EXPIRY:-7d}
       - GUEST_MODE=${GUEST_MODE:-true}
@@ -16,10 +22,24 @@ services:
       - NODE_ENV=production
       - APP_PORT=3000
       - APP_HOST=0.0.0.0
+      # ORIGIN must match the public URL users visit. When set to https://...
+      # session cookies are issued with the Secure flag. Behind a reverse proxy
+      # terminating TLS, set this to the public https URL.
+      - ORIGIN=${ORIGIN:-http://localhost:${APP_PORT:-3000}}
     volumes:
       - launcher-data:/app/data
     networks:
       - launcher-net
+    logging:
+      driver: json-file
+      options:
+        max-size: '10m'
+        max-file: '3'
+    deploy:
+      resources:
+        limits:
+          memory: 1g
+          cpus: '1.0'
 
 volumes:
   launcher-data:

eslint.config.js

@@ -23,7 +23,20 @@ export default ts.config(
 			'@typescript-eslint/no-unused-vars': [
 				'error',
 				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' }
-			]
+			],
+			'@typescript-eslint/consistent-type-imports': [
+				'warn',
+				{ prefer: 'type-imports', fixStyle: 'separate-type-imports' }
+			],
+			// console.warn/console.error are allowed for server-side observability
+			// (logging dispatch failures, audit fallbacks). console.log is still flagged.
+			'no-console': ['warn', { allow: ['warn', 'error'] }],
+			// SvelteMap / SvelteSet only matter inside .svelte rune state. The
+			// stores layer uses plain Maps as caches that the runtime does not
+			// need to track reactively (consumers re-read via $derived). Disable
+			// project-wide to match the pre-existing repo state, where these
+			// were never enforced.
+			'svelte/prefer-svelte-reactivity': 'off'
 		}
 	},
 	{

package-lock.json

@@ -1,16 +1,18 @@
 {
 	"name": "web-app-launcher",
-	"version": "0.1.0",
+	"version": "0.0.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "web-app-launcher",
-			"version": "0.1.0",
+			"version": "0.0.1",
 			"dependencies": {
+				"@prisma/client": "^6.2.0",
 				"@sveltejs/adapter-node": "^5.2.0",
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
+				"@tailwindcss/typography": "^0.5.19",
 				"bcryptjs": "^2.4.3",
 				"bits-ui": "^1.3.0",
 				"clsx": "^2.1.0",
@@ -21,6 +23,7 @@
 				"marked": "^17.0.5",
 				"node-cron": "^3.0.3",
 				"openid-client": "^6.8.2",
+				"prisma": "^6.2.0",
 				"simple-icons": "^13.0.0",
 				"svelte": "^5.0.0",
 				"svelte-dnd-action": "^0.9.69",
@@ -31,7 +34,6 @@
 			},
 			"devDependencies": {
 				"@eslint/js": "^9.18.0",
-				"@prisma/client": "^6.2.0",
 				"@sveltejs/package": "^2.3.0",
 				"@tailwindcss/vite": "^4.0.0",
 				"@testing-library/svelte": "^5.2.0",
@@ -46,7 +48,6 @@
 				"prettier": "^3.4.0",
 				"prettier-plugin-svelte": "^3.3.0",
 				"prettier-plugin-tailwindcss": "^0.6.0",
-				"prisma": "^6.2.0",
 				"svelte-check": "^4.0.0",
 				"tailwindcss": "^4.0.0",
 				"tsx": "^4.21.0",
@@ -1030,7 +1031,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.2.tgz",
 			"integrity": "sha512-gR2EMvfK/aTxsuooaDA32D8v+us/8AAet+C3J1cc04SW35FPdZYgLF+iN4NDLUgAaUGTKdAB0CYenu1TAgGdMg==",
-			"dev": true,
 			"hasInstallScript": true,
 			"engines": {
 				"node": ">=18.18"
@@ -1052,7 +1052,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.19.2.tgz",
 			"integrity": "sha512-kadBGDl+aUswv/zZMk9Mx0C8UZs1kjao8H9/JpI4Wh4SHZaM7zkTwiKn/iFLfRg+XtOAo/Z/c6pAYhijKl0nzQ==",
-			"dev": true,
 			"dependencies": {
 				"c12": "3.1.0",
 				"deepmerge-ts": "7.1.5",
@@ -1063,14 +1062,12 @@
 		"node_modules/@prisma/debug": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.19.2.tgz",
-			"integrity": "sha512-lFnEZsLdFLmEVCVNdskLDCL8Uup41GDfU0LUfquw+ercJC8ODTuL0WNKgOKmYxCJVvFwf0OuZBzW99DuWmoH2A==",
-			"dev": true
+			"integrity": "sha512-lFnEZsLdFLmEVCVNdskLDCL8Uup41GDfU0LUfquw+ercJC8ODTuL0WNKgOKmYxCJVvFwf0OuZBzW99DuWmoH2A=="
 		},
 		"node_modules/@prisma/engines": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.19.2.tgz",
 			"integrity": "sha512-TTkJ8r+uk/uqczX40wb+ODG0E0icVsMgwCTyTHXehaEfb0uo80M9g1aW1tEJrxmFHeOZFXdI2sTA1j1AgcHi4A==",
-			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@prisma/debug": "6.19.2",
@@ -1082,14 +1079,12 @@
 		"node_modules/@prisma/engines-version": {
 			"version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
 			"resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7.tgz",
-			"integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA==",
-			"dev": true
+			"integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA=="
 		},
 		"node_modules/@prisma/fetch-engine": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.19.2.tgz",
 			"integrity": "sha512-h4Ff4Pho+SR1S8XerMCC12X//oY2bG3Iug/fUnudfcXEUnIeRiBdXHFdGlGOgQ3HqKgosTEhkZMvGM9tWtYC+Q==",
-			"dev": true,
 			"dependencies": {
 				"@prisma/debug": "6.19.2",
 				"@prisma/engines-version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
@@ -1100,7 +1095,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.19.2.tgz",
 			"integrity": "sha512-PGLr06JUSTqIvztJtAzIxOwtWKtJm5WwOG6xpsgD37Rc84FpfUBGLKz65YpJBGtkRQGXTYEFie7pYALocC3MtA==",
-			"dev": true,
 			"dependencies": {
 				"@prisma/debug": "6.19.2"
 			}
@@ -1890,6 +1884,29 @@
 				"node": ">= 20"
 			}
 		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+			"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+			"dependencies": {
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/@tailwindcss/vite": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
@@ -2688,7 +2705,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
 			"integrity": "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==",
-			"dev": true,
 			"dependencies": {
 				"chokidar": "^4.0.3",
 				"confbox": "^0.2.2",
@@ -2716,7 +2732,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
 			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-			"dev": true,
 			"dependencies": {
 				"readdirp": "^4.0.1"
 			},
@@ -2731,7 +2746,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
 			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-			"dev": true,
 			"engines": {
 				"node": ">= 14.18.0"
 			},
@@ -2830,7 +2844,6 @@
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
 			"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
-			"dev": true,
 			"dependencies": {
 				"consola": "^3.2.3"
 			}
@@ -2901,14 +2914,12 @@
 		"node_modules/confbox": {
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
-			"integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
-			"dev": true
+			"integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ=="
 		},
 		"node_modules/consola": {
 			"version": "3.4.2",
 			"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
 			"integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
-			"dev": true,
 			"engines": {
 				"node": "^14.18.0 || >=16.10.0"
 			}
@@ -2956,7 +2967,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
 			"bin": {
 				"cssesc": "bin/cssesc"
 			},
@@ -3048,7 +3058,6 @@
 			"version": "7.1.5",
 			"resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
 			"integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
-			"dev": true,
 			"engines": {
 				"node": ">=16.0.0"
 			}
@@ -3056,8 +3065,7 @@
 		"node_modules/defu": {
 			"version": "6.1.4",
 			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-			"dev": true
+			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
 		},
 		"node_modules/dequal": {
 			"version": "2.0.3",
@@ -3071,8 +3079,7 @@
 		"node_modules/destr": {
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
-			"integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
-			"dev": true
+			"integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="
 		},
 		"node_modules/detect-libc": {
 			"version": "2.1.2",
@@ -3112,7 +3119,6 @@
 			"version": "16.6.1",
 			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
 			"integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-			"dev": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -3132,7 +3138,6 @@
 			"version": "3.18.4",
 			"resolved": "https://registry.npmjs.org/effect/-/effect-3.18.4.tgz",
 			"integrity": "sha512-b1LXQJLe9D11wfnOKAk3PKxuqYshQ0Heez+y5pnkd3jLj1yx9QhM72zZ9uUrOQyNvrs2GZZd/3maL0ZV18YuDA==",
-			"dev": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"fast-check": "^3.23.1"
@@ -3142,7 +3147,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz",
 			"integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==",
-			"dev": true,
 			"engines": {
 				"node": ">=14"
 			}
@@ -3525,8 +3529,7 @@
 		"node_modules/exsolve": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
-			"integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
-			"dev": true
+			"integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="
 		},
 		"node_modules/ext": {
 			"version": "1.7.0",
@@ -3540,7 +3543,6 @@
 			"version": "3.23.2",
 			"resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz",
 			"integrity": "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==",
-			"devOptional": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -3676,7 +3678,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
 			"integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
-			"dev": true,
 			"dependencies": {
 				"citty": "^0.1.6",
 				"consola": "^3.4.0",
@@ -3895,7 +3896,6 @@
 			"version": "2.6.1",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
 			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-			"devOptional": true,
 			"bin": {
 				"jiti": "lib/jiti-cli.mjs"
 			}
@@ -4560,8 +4560,7 @@
 		"node_modules/node-fetch-native": {
 			"version": "1.6.7",
 			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
-			"integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
-			"dev": true
+			"integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="
 		},
 		"node_modules/normalize-url": {
 			"version": "8.1.1",
@@ -4579,7 +4578,6 @@
 			"version": "0.6.5",
 			"resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.5.tgz",
 			"integrity": "sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ==",
-			"dev": true,
 			"dependencies": {
 				"citty": "^0.2.0",
 				"pathe": "^2.0.3",
@@ -4595,8 +4593,7 @@
 		"node_modules/nypm/node_modules/citty": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
-			"integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==",
-			"dev": true
+			"integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="
 		},
 		"node_modules/oauth4webapi": {
 			"version": "3.8.5",
@@ -4609,8 +4606,7 @@
 		"node_modules/ohash": {
 			"version": "2.0.11",
 			"resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
-			"integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-			"dev": true
+			"integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="
 		},
 		"node_modules/openid-client": {
 			"version": "6.8.2",
@@ -4720,8 +4716,7 @@
 		"node_modules/pathe": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
-			"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-			"dev": true
+			"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="
 		},
 		"node_modules/pathval": {
 			"version": "2.0.1",
@@ -4735,8 +4730,7 @@
 		"node_modules/perfect-debounce": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-			"dev": true
+			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
 		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
@@ -4758,7 +4752,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
 			"integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
-			"dev": true,
 			"dependencies": {
 				"confbox": "^0.2.2",
 				"exsolve": "^1.0.7",
@@ -5045,7 +5038,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/prisma/-/prisma-6.19.2.tgz",
 			"integrity": "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg==",
-			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@prisma/config": "6.19.2",
@@ -5084,7 +5076,6 @@
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
 			"integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
-			"devOptional": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -5100,7 +5091,6 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
 			"integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
-			"dev": true,
 			"dependencies": {
 				"defu": "^6.1.4",
 				"destr": "^2.0.3"
@@ -6140,8 +6130,7 @@
 		"node_modules/tailwindcss": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
-			"integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
-			"dev": true
+			"integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="
 		},
 		"node_modules/tapable": {
 			"version": "2.3.2",
@@ -6193,7 +6182,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
 			"integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
-			"dev": true,
 			"engines": {
 				"node": ">=18"
 			}
@@ -6879,8 +6867,7 @@
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
 		"node_modules/uuid": {
 			"version": "8.3.2",
@@ -7806,14 +7793,12 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.19.2.tgz",
 			"integrity": "sha512-gR2EMvfK/aTxsuooaDA32D8v+us/8AAet+C3J1cc04SW35FPdZYgLF+iN4NDLUgAaUGTKdAB0CYenu1TAgGdMg==",
-			"dev": true,
 			"requires": {}
 		},
 		"@prisma/config": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/config/-/config-6.19.2.tgz",
 			"integrity": "sha512-kadBGDl+aUswv/zZMk9Mx0C8UZs1kjao8H9/JpI4Wh4SHZaM7zkTwiKn/iFLfRg+XtOAo/Z/c6pAYhijKl0nzQ==",
-			"dev": true,
 			"requires": {
 				"c12": "3.1.0",
 				"deepmerge-ts": "7.1.5",
@@ -7824,14 +7809,12 @@
 		"@prisma/debug": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.19.2.tgz",
-			"integrity": "sha512-lFnEZsLdFLmEVCVNdskLDCL8Uup41GDfU0LUfquw+ercJC8ODTuL0WNKgOKmYxCJVvFwf0OuZBzW99DuWmoH2A==",
-			"dev": true
+			"integrity": "sha512-lFnEZsLdFLmEVCVNdskLDCL8Uup41GDfU0LUfquw+ercJC8ODTuL0WNKgOKmYxCJVvFwf0OuZBzW99DuWmoH2A=="
 		},
 		"@prisma/engines": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.19.2.tgz",
 			"integrity": "sha512-TTkJ8r+uk/uqczX40wb+ODG0E0icVsMgwCTyTHXehaEfb0uo80M9g1aW1tEJrxmFHeOZFXdI2sTA1j1AgcHi4A==",
-			"dev": true,
 			"requires": {
 				"@prisma/debug": "6.19.2",
 				"@prisma/engines-version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
@@ -7842,14 +7825,12 @@
 		"@prisma/engines-version": {
 			"version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
 			"resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7.tgz",
-			"integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA==",
-			"dev": true
+			"integrity": "sha512-03bgb1VD5gvuumNf+7fVGBzfpJPjmqV423l/WxsWk2cNQ42JD0/SsFBPhN6z8iAvdHs07/7ei77SKu7aZfq8bA=="
 		},
 		"@prisma/fetch-engine": {
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.19.2.tgz",
 			"integrity": "sha512-h4Ff4Pho+SR1S8XerMCC12X//oY2bG3Iug/fUnudfcXEUnIeRiBdXHFdGlGOgQ3HqKgosTEhkZMvGM9tWtYC+Q==",
-			"dev": true,
 			"requires": {
 				"@prisma/debug": "6.19.2",
 				"@prisma/engines-version": "7.1.1-3.c2990dca591cba766e3b7ef5d9e8a84796e47ab7",
@@ -7860,7 +7841,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-6.19.2.tgz",
 			"integrity": "sha512-PGLr06JUSTqIvztJtAzIxOwtWKtJm5WwOG6xpsgD37Rc84FpfUBGLKz65YpJBGtkRQGXTYEFie7pYALocC3MtA==",
-			"dev": true,
 			"requires": {
 				"@prisma/debug": "6.19.2"
 			}
@@ -8290,6 +8270,25 @@
 			"dev": true,
 			"optional": true
 		},
+		"@tailwindcss/typography": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+			"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+			"requires": {
+				"postcss-selector-parser": "6.0.10"
+			},
+			"dependencies": {
+				"postcss-selector-parser": {
+					"version": "6.0.10",
+					"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+					"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+					"requires": {
+						"cssesc": "^3.0.0",
+						"util-deprecate": "^1.0.2"
+					}
+				}
+			}
+		},
 		"@tailwindcss/vite": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
@@ -8859,7 +8858,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/c12/-/c12-3.1.0.tgz",
 			"integrity": "sha512-uWoS8OU1MEIsOv8p/5a82c3H31LsWVR5qiyXVfBNOzfffjUWtPnhAb4BYI2uG2HfGmZmFjCtui5XNWaps+iFuw==",
-			"dev": true,
 			"requires": {
 				"chokidar": "^4.0.3",
 				"confbox": "^0.2.2",
@@ -8879,7 +8877,6 @@
 					"version": "4.0.3",
 					"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
 					"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-					"dev": true,
 					"requires": {
 						"readdirp": "^4.0.1"
 					}
@@ -8887,8 +8884,7 @@
 				"readdirp": {
 					"version": "4.1.2",
 					"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-					"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-					"dev": true
+					"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="
 				}
 			}
 		},
@@ -8952,7 +8948,6 @@
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
 			"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
-			"dev": true,
 			"requires": {
 				"consola": "^3.2.3"
 			}
@@ -9014,14 +9009,12 @@
 		"confbox": {
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
-			"integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
-			"dev": true
+			"integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ=="
 		},
 		"consola": {
 			"version": "3.4.2",
 			"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
-			"integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
-			"dev": true
+			"integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="
 		},
 		"cookie": {
 			"version": "0.6.0",
@@ -9056,8 +9049,7 @@
 		"cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
 		},
 		"d": {
 			"version": "1.0.2",
@@ -9122,14 +9114,12 @@
 		"deepmerge-ts": {
 			"version": "7.1.5",
 			"resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
-			"integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw==",
-			"dev": true
+			"integrity": "sha512-HOJkrhaYsweh+W+e74Yn7YStZOilkoPb6fycpwNLKzSPtruFs48nYis0zy5yJz1+ktUhHxoRDJ27RQAWLIJVJw=="
 		},
 		"defu": {
 			"version": "6.1.4",
 			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-			"dev": true
+			"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
 		},
 		"dequal": {
 			"version": "2.0.3",
@@ -9140,8 +9130,7 @@
 		"destr": {
 			"version": "2.0.5",
 			"resolved": "https://registry.npmjs.org/destr/-/destr-2.0.5.tgz",
-			"integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
-			"dev": true
+			"integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="
 		},
 		"detect-libc": {
 			"version": "2.1.2",
@@ -9177,8 +9166,7 @@
 		"dotenv": {
 			"version": "16.6.1",
 			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-			"integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-			"dev": true
+			"integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="
 		},
 		"ecdsa-sig-formatter": {
 			"version": "1.0.11",
@@ -9192,7 +9180,6 @@
 			"version": "3.18.4",
 			"resolved": "https://registry.npmjs.org/effect/-/effect-3.18.4.tgz",
 			"integrity": "sha512-b1LXQJLe9D11wfnOKAk3PKxuqYshQ0Heez+y5pnkd3jLj1yx9QhM72zZ9uUrOQyNvrs2GZZd/3maL0ZV18YuDA==",
-			"dev": true,
 			"requires": {
 				"@standard-schema/spec": "^1.0.0",
 				"fast-check": "^3.23.1"
@@ -9201,8 +9188,7 @@
 		"empathic": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/empathic/-/empathic-2.0.0.tgz",
-			"integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==",
-			"dev": true
+			"integrity": "sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA=="
 		},
 		"enhanced-resolve": {
 			"version": "5.20.1",
@@ -9477,8 +9463,7 @@
 		"exsolve": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
-			"integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
-			"dev": true
+			"integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="
 		},
 		"ext": {
 			"version": "1.7.0",
@@ -9492,7 +9477,6 @@
 			"version": "3.23.2",
 			"resolved": "https://registry.npmjs.org/fast-check/-/fast-check-3.23.2.tgz",
 			"integrity": "sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==",
-			"devOptional": true,
 			"requires": {
 				"pure-rand": "^6.1.0"
 			}
@@ -9580,7 +9564,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/giget/-/giget-2.0.0.tgz",
 			"integrity": "sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==",
-			"dev": true,
 			"requires": {
 				"citty": "^0.1.6",
 				"consola": "^3.4.0",
@@ -9750,8 +9733,7 @@
 		"jiti": {
 			"version": "2.6.1",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-			"devOptional": true
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="
 		},
 		"joi": {
 			"version": "17.13.3",
@@ -10181,8 +10163,7 @@
 		"node-fetch-native": {
 			"version": "1.6.7",
 			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
-			"integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==",
-			"dev": true
+			"integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="
 		},
 		"normalize-url": {
 			"version": "8.1.1",
@@ -10194,7 +10175,6 @@
 			"version": "0.6.5",
 			"resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.5.tgz",
 			"integrity": "sha512-K6AJy1GMVyfyMXRVB88700BJqNUkByijGJM8kEHpLdcAt+vSQAVfkWWHYzuRXHSY6xA2sNc5RjTj0p9rE2izVQ==",
-			"dev": true,
 			"requires": {
 				"citty": "^0.2.0",
 				"pathe": "^2.0.3",
@@ -10204,8 +10184,7 @@
 				"citty": {
 					"version": "0.2.1",
 					"resolved": "https://registry.npmjs.org/citty/-/citty-0.2.1.tgz",
-					"integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg==",
-					"dev": true
+					"integrity": "sha512-kEV95lFBhQgtogAPlQfJJ0WGVSokvLr/UEoFPiKKOXF7pl98HfUVUD0ejsuTCld/9xH9vogSywZ5KqHzXrZpqg=="
 				}
 			}
 		},
@@ -10217,8 +10196,7 @@
 		"ohash": {
 			"version": "2.0.11",
 			"resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
-			"integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-			"dev": true
+			"integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="
 		},
 		"openid-client": {
 			"version": "6.8.2",
@@ -10298,8 +10276,7 @@
 		"pathe": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
-			"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
-			"dev": true
+			"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="
 		},
 		"pathval": {
 			"version": "2.0.1",
@@ -10310,8 +10287,7 @@
 		"perfect-debounce": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
-			"dev": true
+			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
 		},
 		"picocolors": {
 			"version": "1.1.1",
@@ -10327,7 +10303,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
 			"integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
-			"dev": true,
 			"requires": {
 				"confbox": "^0.2.2",
 				"exsolve": "^1.0.7",
@@ -10435,7 +10410,6 @@
 			"version": "6.19.2",
 			"resolved": "https://registry.npmjs.org/prisma/-/prisma-6.19.2.tgz",
 			"integrity": "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg==",
-			"dev": true,
 			"requires": {
 				"@prisma/config": "6.19.2",
 				"@prisma/engines": "6.19.2"
@@ -10455,14 +10429,12 @@
 		"pure-rand": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
-			"integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
-			"devOptional": true
+			"integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA=="
 		},
 		"rc9": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
 			"integrity": "sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==",
-			"dev": true,
 			"requires": {
 				"defu": "^6.1.4",
 				"destr": "^2.0.3"
@@ -11045,8 +11017,7 @@
 		"tailwindcss": {
 			"version": "4.2.2",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
-			"integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
-			"dev": true
+			"integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="
 		},
 		"tapable": {
 			"version": "2.3.2",
@@ -11087,8 +11058,7 @@
 		"tinyexec": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz",
-			"integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==",
-			"dev": true
+			"integrity": "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw=="
 		},
 		"tinyglobby": {
 			"version": "0.2.15",
@@ -11456,8 +11426,7 @@
 		"util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
 		"uuid": {
 			"version": "8.3.2",

package.json

@@ -15,15 +15,16 @@
 		"lint": "eslint .",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
+		"audit:prod": "npm audit --omit=dev --audit-level=high",
 		"db:generate": "prisma generate",
 		"db:push": "prisma db push",
 		"db:migrate": "prisma migrate dev",
 		"db:studio": "prisma studio"
 	},
 	"dependencies": {
+		"@prisma/client": "^6.2.0",
 		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"bcryptjs": "^2.4.3",
 		"bits-ui": "^1.3.0",
 		"clsx": "^2.1.0",
@@ -34,6 +35,7 @@
 		"marked": "^17.0.5",
 		"node-cron": "^3.0.3",
 		"openid-client": "^6.8.2",
+		"prisma": "^6.2.0",
 		"simple-icons": "^13.0.0",
 		"svelte": "^5.0.0",
 		"svelte-dnd-action": "^0.9.69",
@@ -47,8 +49,9 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.18.0",
-		"@prisma/client": "^6.2.0",
 		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.0.0",
 		"@testing-library/svelte": "^5.2.0",
 		"@types/bcryptjs": "^2.4.6",
@@ -62,7 +65,6 @@
 		"prettier": "^3.4.0",
 		"prettier-plugin-svelte": "^3.3.0",
 		"prettier-plugin-tailwindcss": "^0.6.0",
-		"prisma": "^6.2.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.0",
 		"tsx": "^4.21.0",

plans/inline-dashboard-editing/CONTEXT.md

@@ -0,0 +1,59 @@
+# Feature Context: Inline Dashboard Editing
+
+## Configuration
+- **Development mode:** Automated
+- **Execution mode:** Direct
+- **Strategy:** Big Bang
+- **Build:** `npm run build`
+- **Test:** `npm run test`
+- **Lint:** `npm run lint`
+- **Dev server:** `npm run dev` (port: 5173)
+
+## Current State
+Starting fresh. The board view page (`/boards/[boardId]`) is read-only.
+The edit page (`/boards/[boardId]/edit`) is a separate form-based page.
+
+## Key Architecture Notes
+- SvelteKit 2 + Svelte 5 (runes: $state, $derived, $props)
+- Prisma ORM with SQLite
+- Tailwind CSS v4
+- `svelte-dnd-action` for drag-and-drop
+- `lucide-svelte` for icons
+- `bits-ui` for UI primitives
+- Widget configs stored as JSON strings in `Widget.config`
+- Each widget type has Zod validation in `src/lib/utils/validators.ts`
+- Existing form actions on edit page: ?/updateBoard, ?/addSection, ?/deleteSection, ?/updateSection, ?/addWidget, ?/deleteWidget
+- Board view components: Board.svelte → Section.svelte → WidgetGrid.svelte → WidgetRenderer.svelte → [TypeWidget].svelte
+
+## Temporary Workarounds
+(none yet)
+
+## Cross-Phase Dependencies
+- Phase 3 (widget overlay) depends on Phase 1 (edit mode state)
+- Phase 4 (config panels) depends on Phase 3 (overlay triggers)
+- Phase 6 (add widget) depends on Phase 4 (config panel infrastructure)
+- Phase 7 (DnD) depends on Phase 1 (edit mode gate)
+- Phase 8 (batch save) depends on Phases 1-7 (all accumulated changes)
+- Phase 9 (board properties) depends on Phase 2 (toolbar trigger)
+- Phase 10 (migration) depends on all previous phases
+
+## Deferred Work
+(none yet)
+
+## Failed Approaches
+(none yet)
+
+## Review Findings Log
+(none yet)
+
+## Phase Execution Log
+| Phase | Agent Used | Test Writer | Parallel | Notes |
+|-------|-----------|-------------|----------|-------|
+| — | — | — | — | — |
+
+## Environment & Runtime Notes
+- Windows 10, Git Bash
+- Node.js project with Vite dev server
+
+## Implementation Notes
+(none yet)

plans/inline-dashboard-editing/PLAN.md

@@ -0,0 +1,55 @@
+# Feature: Inline Dashboard Editing (Edit Mode)
+
+**Branch:** `feature/inline-dashboard-editing`
+**Base branch:** `master`
+**Created:** 2026-04-02
+**Status:** 🟡 In Progress
+**Strategy:** Big Bang
+**Mode:** Automated
+**Execution:** Direct
+
+## Summary
+Replace the disconnected board edit page with a WYSIWYG inline editing experience.
+Users toggle edit mode directly on the board view — widgets show edit/delete overlays,
+"+" buttons appear for adding widgets and sections, drag-and-drop works across sections,
+and all changes accumulate as a batch save. The board looks exactly as it will when
+saved, at all times.
+
+## Build & Test Commands
+- **Build:** `npm run build`
+- **Test:** `npm run test`
+- **Lint:** `npm run lint`
+
+## Phases
+
+- [ ] Phase 1: Edit Mode State Infrastructure [domain: frontend] → [subplan](./phase-1-edit-mode-state.md)
+- [ ] Phase 2: Floating Edit Toolbar [domain: frontend] → [subplan](./phase-2-floating-toolbar.md)
+- [ ] Phase 3: Widget Edit Overlay [domain: frontend] → [subplan](./phase-3-widget-overlay.md)
+- [ ] Phase 4: Inline Widget Configuration Panels [domain: frontend] → [subplan](./phase-4-widget-config-panels.md)
+- [ ] Phase 5: Section Inline Editing [domain: frontend] → [subplan](./phase-5-section-editing.md)
+- [ ] Phase 6: Add Widget Inline ("+" Buttons) [domain: frontend] → [subplan](./phase-6-add-widget-inline.md)
+- [ ] Phase 7: Drag-and-Drop Enhancements [domain: frontend] → [subplan](./phase-7-dnd-enhancements.md)
+- [ ] Phase 8: Optimistic Updates & Batch Save [domain: fullstack] → [subplan](./phase-8-batch-save.md)
+- [ ] Phase 9: Board Properties Quick Panel [domain: frontend] → [subplan](./phase-9-board-properties-panel.md)
+- [ ] Phase 10: Legacy Edit Page Migration & Polish [domain: fullstack] → [subplan](./phase-10-migration-polish.md)
+
+## Phase Progress Log
+
+| Phase | Domain | Status | Review | Build | Committed |
+|-------|--------|--------|--------|-------|-----------|
+| Phase 1: Edit Mode State | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 2: Floating Toolbar | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 3: Widget Overlay | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 4: Widget Config Panels | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 5: Section Editing | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 6: Add Widget Inline | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 7: DnD Enhancements | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 8: Batch Save | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 9: Board Properties Panel | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 10: Migration & Polish | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+
+## Final Review
+- [ ] Comprehensive code review
+- [ ] Full build passes
+- [ ] Full test suite passes
+- [ ] Merged to `master`

plans/inline-dashboard-editing/phase-1-edit-mode-state.md

@@ -0,0 +1,47 @@
+# Phase 1: Edit Mode State Infrastructure
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Create the foundational edit mode state management and toggle mechanism that all subsequent phases build upon.
+
+## Tasks
+
+- [ ] Create `src/lib/stores/editMode.svelte.ts` with state: `{ active, boardId, dirty, changeCount }`
+- [ ] Export functions: `enterEditMode(boardId)`, `exitEditMode()`, `markDirty()`, `resetDirty()`
+- [ ] Add "Edit Mode" toggle button to `BoardHeader.svelte` (replaces the current "Edit" link to `/boards/[id]/edit`)
+- [ ] When toggled ON: set edit mode active, show visual indicator (subtle board border glow or tint)
+- [ ] When toggled OFF: if dirty, show confirmation dialog "Discard unsaved changes?"
+- [ ] Register keyboard shortcut `Ctrl+E` / `Cmd+E` to toggle edit mode
+- [ ] Pass edit mode state as Svelte context from board view page
+- [ ] Add `editMode` context consumer helpers for child components
+- [ ] Visual indicator: board gets a subtle colored top-bar or border when in edit mode
+
+## Files to Modify/Create
+- `src/lib/stores/editMode.svelte.ts` — new store
+- `src/lib/components/board/BoardHeader.svelte` — replace Edit link with toggle button
+- `src/routes/boards/[boardId]/+page.svelte` — provide edit mode context, visual indicators
+
+## Acceptance Criteria
+- Clicking the toggle enters/exits edit mode
+- Ctrl+E toggles edit mode
+- Board view page visually indicates edit mode is active
+- Child components can read edit mode state via context
+- Dirty state tracking works (increments on markDirty, resets on save/discard)
+
+## Notes
+- Use Svelte 5 runes ($state, $derived) for the store
+- The keyboard shortcut must not conflict with existing shortcuts
+- Guest users / users without edit permission must NOT see the toggle
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-10-migration-polish.md

@@ -0,0 +1,54 @@
+# Phase 10: Legacy Edit Page Migration & Polish
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** fullstack
+
+## Objective
+Migrate remaining functionality from the legacy edit page, add polish, transitions, and ensure full accessibility.
+
+## Tasks
+
+- [ ] Redirect `/boards/[id]/edit` to `/boards/[id]?edit=true` (auto-enters edit mode)
+- [ ] Handle `?edit=true` query param on board view page to auto-enter edit mode
+- [ ] Migrate permission management: add permissions editor accessible from edit mode (or link to legacy page as "Advanced Settings")
+- [ ] Add smooth transition animations between view and edit modes
+- [ ] Keyboard navigation: Tab through edit controls, Enter to confirm, Escape to cancel/close
+- [ ] ARIA labels on all edit controls (buttons, overlays, panels)
+- [ ] Focus management: auto-focus appropriate elements when panels open
+- [ ] Focus trap in modals/panels
+- [ ] Screen reader announcements for mode changes ("Edit mode enabled", "Widget deleted")
+- [ ] Ensure all existing edit page functionality is accessible through inline UI
+- [ ] Polish: loading states, error boundaries, edge case handling
+- [ ] Mobile responsiveness: touch-friendly edit controls, appropriate sizing
+- [ ] Verify no regressions with guest access (guests should never see edit controls)
+
+## Files to Modify/Create
+- `src/routes/boards/[boardId]/edit/+page.server.ts` — add redirect
+- `src/routes/boards/[boardId]/+page.svelte` — handle ?edit=true, transitions
+- Various components — accessibility attributes, animations
+- `src/lib/components/board/BoardAccessControl.svelte` — integrate or link from edit mode
+
+## Acceptance Criteria
+- `/boards/[id]/edit` redirects to inline edit mode
+- All functionality from legacy edit page is accessible
+- Keyboard navigation works throughout edit mode
+- Screen readers can use edit mode
+- Transitions are smooth and non-jarring
+- Mobile experience is usable
+- Guest users cannot access edit features
+
+## Notes
+- Consider keeping legacy edit page temporarily as "Advanced Edit" for power users
+- Permission management is complex — may be better as a dedicated panel than inline
+- Test with different board sizes (empty, 1 section, 10+ sections with many widgets)
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-2-floating-toolbar.md

@@ -0,0 +1,50 @@
+# Phase 2: Floating Edit Toolbar
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Create a sticky floating toolbar that appears when edit mode is active, providing quick access to common editing actions.
+
+## Tasks
+
+- [ ] Create `src/lib/components/board/EditToolbar.svelte`
+- [ ] Toolbar actions: Save All, Discard, Add Section, Board Settings (gear), Exit Edit Mode
+- [ ] Show unsaved change count badge on Save button
+- [ ] Position: fixed at bottom-center of viewport (floating pill shape)
+- [ ] Entrance animation: slide up from bottom with fade
+- [ ] Exit animation: slide down with fade
+- [ ] Responsive: collapses to icon-only on small screens
+- [ ] Only renders when edit mode is active
+- [ ] Wire "Exit Edit Mode" to the store's exitEditMode()
+- [ ] Wire "Add Section" to emit event (handled in Phase 6)
+- [ ] Wire "Board Settings" to emit event (handled in Phase 9)
+- [ ] Wire "Save All" to emit event (handled in Phase 8)
+- [ ] Wire "Discard" to revert all changes and exit edit mode
+
+## Files to Modify/Create
+- `src/lib/components/board/EditToolbar.svelte` — new component
+- `src/routes/boards/[boardId]/+page.svelte` — mount toolbar when edit mode active
+
+## Acceptance Criteria
+- Toolbar appears/disappears smoothly with edit mode toggle
+- All buttons are present and visually clear
+- Change count badge updates reactively
+- Responsive layout works on mobile
+- Toolbar doesn't obscure board content (proper z-index, positioning)
+
+## Notes
+- Use lucide-svelte icons for toolbar buttons
+- z-index must be above board content but below modals/dialogs
+- "Save" and "Discard" will be wired to real logic in Phase 8
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-3-widget-overlay.md

@@ -0,0 +1,48 @@
+# Phase 3: Widget Edit Overlay
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Add hover overlays to every widget when in edit mode, showing edit/delete/drag controls without obscuring the widget content.
+
+## Tasks
+
+- [ ] Create `src/lib/components/widget/WidgetEditOverlay.svelte`
+- [ ] Overlay appears on hover over a widget in edit mode
+- [ ] Controls: pencil icon (top-right), trash icon (top-right, secondary), drag handle (top-left)
+- [ ] Semi-transparent backdrop on hover (e.g., bg-black/5)
+- [ ] Pencil click emits `onEdit(widgetId)` event
+- [ ] Trash click shows inline confirmation ("Delete?" with Yes/No), then emits `onDelete(widgetId)`
+- [ ] Drag handle integrated with svelte-dnd-action (prepared for Phase 7)
+- [ ] Wrap each widget in WidgetEditOverlay in `WidgetGrid.svelte` when edit mode is active
+- [ ] Overlay transitions: fade in on hover, fade out on leave
+- [ ] Overlay does NOT block widget interaction when not hovered (pointer-events)
+
+## Files to Modify/Create
+- `src/lib/components/widget/WidgetEditOverlay.svelte` — new component
+- `src/lib/components/widget/WidgetGrid.svelte` — wrap widgets conditionally
+
+## Acceptance Criteria
+- Hovering over a widget in edit mode shows the overlay
+- Overlay has pencil, trash, and drag handle controls
+- Controls are clickable and emit correct events
+- Overlay does not appear when NOT in edit mode
+- Widget content remains visible through the overlay
+
+## Notes
+- Keep overlay minimal — don't overwhelm the widget visually
+- Trash confirmation should be inline (not a browser confirm dialog)
+- The actual edit panel opening (pencil) is Phase 4
+- The actual delete logic is Phase 8
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-4-widget-config-panels.md

@@ -0,0 +1,63 @@
+# Phase 4: Inline Widget Configuration Panels
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Create type-specific configuration panels that open inline when the user clicks the edit (pencil) button on a widget, allowing real-time config editing with live preview.
+
+## Tasks
+
+- [ ] Create `src/lib/components/widget/WidgetConfigPanel.svelte` — container/router for type-specific panels
+- [ ] Create config panel components for each widget type (or a dynamic form approach):
+  - App: app selector dropdown
+  - Bookmark: url, label, icon, description
+  - Note/Markdown: inline content editor
+  - Embed: url, height, sandbox
+  - Status: multi-app selector, label
+  - Clock: timezone, style, weather toggle, coordinates
+  - System Stats: source url/type, metrics, refresh interval
+  - RSS: feed url, max items, show summary
+  - Calendar: iCal URLs, days ahead
+  - Metric: label, source, value/url/query, unit, refresh
+  - Link Group: links array editor, collapsible toggle
+  - Camera: stream url, type, refresh, aspect ratio
+  - Integration: app selector, endpoint selector, refresh
+- [ ] Panel opens as a popover/slide-out anchored to the widget
+- [ ] Pre-populate fields with current widget config
+- [ ] Live preview: changes update the widget rendering in real-time (optimistic, local state)
+- [ ] Save/Cancel buttons per panel
+- [ ] Save stores changes in the edit mode changeset (not persisted until batch save in Phase 8)
+- [ ] Cancel reverts to original config
+- [ ] Auto-focus first field when panel opens
+- [ ] Close panel on Escape key
+
+## Files to Modify/Create
+- `src/lib/components/widget/WidgetConfigPanel.svelte` — new panel router
+- `src/lib/components/widget/config/` — new directory for type-specific config forms
+- `src/lib/components/widget/WidgetEditOverlay.svelte` — wire pencil to open config panel
+- `src/lib/components/widget/WidgetRenderer.svelte` — support config override from edit state
+
+## Acceptance Criteria
+- Clicking pencil on any widget type opens the correct config panel
+- Fields are pre-populated with current values
+- Changes preview live on the widget
+- Save adds to changeset, Cancel reverts
+- Panel closes on Save, Cancel, or Escape
+- All 14 widget types have config support
+
+## Notes
+- Reuse Zod schemas from `src/lib/utils/validators.ts` for field validation
+- Consider a generic form approach for simple types (key-value pairs) vs custom for complex ones (link_group links array)
+- Panel positioning: use a popover that doesn't overflow viewport
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-5-section-editing.md

@@ -0,0 +1,47 @@
+# Phase 5: Section Inline Editing
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Make section headers editable inline in edit mode — title, icon, card size, expand default, delete.
+
+## Tasks
+
+- [ ] Modify `SectionHeader.svelte` to show edit controls when edit mode is active
+- [ ] Pencil icon on section header — click to toggle inline editing of title and icon
+- [ ] Inline title editing: click title text to replace with input field, Enter to confirm, Escape to cancel
+- [ ] Icon picker for section icon (reuse `AppIconPicker` or simplified version)
+- [ ] Card size dropdown override (compact/medium/large/inherit)
+- [ ] Toggle for `isExpandedByDefault`
+- [ ] Delete section button with confirmation ("Delete section 'X' and its N widgets?")
+- [ ] Drag handle for section reordering (left side of header, visible only in edit mode)
+- [ ] All changes stored in edit mode changeset
+
+## Files to Modify/Create
+- `src/lib/components/section/SectionHeader.svelte` — add edit controls
+- `src/lib/components/section/Section.svelte` — pass edit mode state
+- `src/lib/components/section/SectionEditControls.svelte` — new, extracted edit controls
+
+## Acceptance Criteria
+- Section title is editable inline in edit mode
+- Section icon is changeable via picker
+- Card size override works
+- Delete shows confirmation with widget count
+- Changes accumulate in changeset (not persisted until Save)
+- Controls hidden when not in edit mode
+
+## Notes
+- Section drag-and-drop reorder is handled further in Phase 7
+- Delete confirmation should show actual widget count from current state
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-6-add-widget-inline.md

@@ -0,0 +1,51 @@
+# Phase 6: Add Widget Inline ("+" Buttons)
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Add prominent "+" buttons for adding widgets to sections and adding new sections, all inline on the board view.
+
+## Tasks
+
+- [ ] Create `src/lib/components/widget/AddWidgetButton.svelte` — the "+" button shown at end of widget grid
+- [ ] Create `src/lib/components/board/AddSectionDivider.svelte` — subtle divider between sections with "+" button
+- [ ] Widget type picker: grid of icons with labels (App, Bookmark, Note, Embed, Status, Clock, etc.)
+- [ ] Clicking a type opens the config panel from Phase 4 for the new widget
+- [ ] New widget appears immediately in grid as a skeleton/placeholder while being configured
+- [ ] "Add Section" shows minimal inline form: title input + optional icon + confirm button
+- [ ] New section appears immediately in the board with empty widget grid
+- [ ] All additions tracked in edit mode changeset (temporary IDs until batch save)
+- [ ] "Add Section" button also available from the floating toolbar (Phase 2)
+
+## Files to Modify/Create
+- `src/lib/components/widget/AddWidgetButton.svelte` — new
+- `src/lib/components/widget/WidgetTypePicker.svelte` — new, type selection grid
+- `src/lib/components/board/AddSectionDivider.svelte` — new
+- `src/lib/components/board/AddSectionForm.svelte` — new, inline section creation
+- `src/lib/components/widget/WidgetGrid.svelte` — append AddWidgetButton in edit mode
+- `src/lib/components/board/Board.svelte` — insert AddSectionDivider between sections
+
+## Acceptance Criteria
+- "+" button visible at end of each section's widget grid in edit mode
+- "+" section divider visible between sections in edit mode
+- Type picker shows all available widget types with icons
+- Selecting a type opens config panel for new widget
+- New widgets/sections appear immediately (optimistic)
+- Hidden when not in edit mode
+
+## Notes
+- Use temporary client-side IDs (e.g., `temp-${crypto.randomUUID()}`) for new items
+- Widget type icons should use lucide-svelte icons matching each type
+- Empty sections should still show the "+" add widget button
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-7-dnd-enhancements.md

@@ -0,0 +1,48 @@
+# Phase 7: Drag-and-Drop Enhancements
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Enhance drag-and-drop to support cross-section widget moves, section reordering, and visual drop zone indicators — all gated behind edit mode.
+
+## Tasks
+
+- [ ] Enable widget drag-and-drop ONLY in edit mode (disable in view mode)
+- [ ] Cross-section widget drag: allow dragging a widget from one section to another
+- [ ] Visual drop zones: highlight target section/position when dragging
+- [ ] Section-level drag-and-drop with visual indicators (reorder sections)
+- [ ] Drag handles only visible in edit mode
+- [ ] Track all reorder/move changes in edit mode changeset
+- [ ] Handle edge cases: dragging to empty sections, dragging last widget out of section
+- [ ] Smooth animations during drag operations
+
+## Files to Modify/Create
+- `src/lib/components/widget/WidgetGrid.svelte` — enable DnD only in edit mode, cross-section support
+- `src/lib/components/board/Board.svelte` — section-level DnD in edit mode
+- `src/lib/components/section/Section.svelte` — drop zone indicators
+- `src/lib/components/widget/WidgetEditOverlay.svelte` — drag handle activation
+
+## Acceptance Criteria
+- Widgets can be dragged between sections in edit mode
+- Sections can be reordered by dragging in edit mode
+- Drop zones highlight during drag
+- No drag-and-drop functionality in view mode
+- All moves tracked in changeset (not persisted until Save)
+- Animations are smooth
+
+## Notes
+- `svelte-dnd-action` supports cross-container DnD via shared `dropTargetStyle`
+- Need to handle `sectionId` changes when widgets move between sections
+- Existing DraggableBoard/DraggableSection are used on edit page — may adapt or replace
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-8-batch-save.md

@@ -0,0 +1,68 @@
+# Phase 8: Optimistic Updates & Batch Save
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** fullstack
+
+## Objective
+Implement the changeset accumulation system and a batch API endpoint that persists all edit mode changes in a single transaction.
+
+## Tasks
+
+- [ ] Design changeset data structure in editMode store:
+  - `widgetUpdates: Map<id, configChanges>`
+  - `widgetAdds: Array<{tempId, sectionId, type, config, order}>`
+  - `widgetDeletes: Set<id>`
+  - `widgetMoves: Map<id, {fromSectionId, toSectionId, newOrder}>`
+  - `sectionUpdates: Map<id, changes>`
+  - `sectionAdds: Array<{tempId, title, icon, order}>`
+  - `sectionDeletes: Set<id>`
+  - `sectionReorders: Array<{id, newOrder}>`
+  - `boardUpdates: Partial<BoardProps>`
+- [ ] Create `POST /api/boards/[id]/batch-update` endpoint
+- [ ] Endpoint accepts the full changeset as JSON body
+- [ ] Server-side: validate all changes, execute in a single Prisma transaction
+- [ ] Server-side: handle temp IDs → real IDs mapping for new items
+- [ ] Server-side: authorization check (user must have edit permission)
+- [ ] Wire "Save All" toolbar button to serialize changeset and call batch endpoint
+- [ ] On success: clear changeset, reset dirty state, broadcast to other tabs, invalidateAll()
+- [ ] On failure: show error, keep changeset intact (no data loss)
+- [ ] Wire "Discard" toolbar button to reset changeset, revert optimistic UI, exit edit mode
+- [ ] Wire widget delete (from Phase 3 overlay) to add to changeset
+- [ ] Wire widget config save (from Phase 4) to add to changeset
+- [ ] Wire section changes (from Phase 5) to add to changeset
+- [ ] Wire new items (from Phase 6) to add to changeset
+- [ ] Wire DnD moves (from Phase 7) to add to changeset
+
+## Files to Modify/Create
+- `src/lib/stores/editMode.svelte.ts` — add changeset state and mutation functions
+- `src/routes/api/boards/[id]/batch-update/+server.ts` — new batch API endpoint
+- `src/lib/components/board/EditToolbar.svelte` — wire Save/Discard to real logic
+- `src/lib/components/widget/WidgetEditOverlay.svelte` — wire delete to changeset
+- `src/lib/components/widget/WidgetConfigPanel.svelte` — wire save to changeset
+- Various components — connect to changeset mutations
+
+## Acceptance Criteria
+- All changes from Phases 3-7 accumulate in the changeset
+- "Save All" sends one HTTP request with all changes
+- Server processes all changes in a single transaction
+- On success: board reloads with persisted state
+- On failure: changes are preserved, error is shown
+- "Discard" reverts everything to pre-edit state
+- Change count in toolbar updates reactively
+
+## Notes
+- Batch endpoint must be idempotent-safe (temp IDs prevent double-creates)
+- Widget order values must be recalculated during batch save
+- Prisma `$transaction` for atomicity
+- Consider payload size limits for very large boards
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/inline-dashboard-editing/phase-9-board-properties-panel.md

@@ -0,0 +1,54 @@
+# Phase 9: Board Properties Quick Panel
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** frontend
+
+## Objective
+Create a side panel / modal accessible from the edit toolbar's gear icon for editing board-level properties with live preview.
+
+## Tasks
+
+- [ ] Create `src/lib/components/board/BoardPropertiesPanel.svelte`
+- [ ] Panel opens from toolbar gear icon as a slide-out side panel (right side)
+- [ ] Board properties: name, description, icon
+- [ ] Theme settings: themeHue slider (0-360), themeSaturation slider (0-100)
+- [ ] Background type selector: mesh, particles, aurora, wallpaper, none
+- [ ] Wallpaper settings: upload, URL input, blur slider, overlay opacity slider
+- [ ] Card size selector: compact, medium, large
+- [ ] Custom CSS editor (textarea or code editor)
+- [ ] Guest access toggle
+- [ ] All changes preview live on the board behind the panel
+- [ ] Changes stored in edit mode changeset (boardUpdates)
+- [ ] Close panel button, Escape to close
+- [ ] Panel has its own scroll if content overflows
+
+## Files to Modify/Create
+- `src/lib/components/board/BoardPropertiesPanel.svelte` — new
+- `src/lib/components/board/EditToolbar.svelte` — wire gear icon to open panel
+- `src/routes/boards/[boardId]/+page.svelte` — mount panel, apply live preview overrides
+- `src/lib/components/board/BoardThemeProvider.svelte` — support preview overrides
+
+## Acceptance Criteria
+- Gear icon opens the properties panel
+- All board-level settings are editable
+- Changes preview live on the board
+- Wallpaper upload works with live preview
+- Theme sliders update board colors in real-time
+- Changes accumulate in changeset
+- Panel closes on button click or Escape
+
+## Notes
+- Live preview means overriding BoardThemeProvider props with unsaved values
+- Wallpaper upload may need special handling (uploaded immediately to server, URL stored in changeset)
+- Custom CSS injection should be sandboxed to board scope
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+
+## Handoff to Next Phase
+<!-- Filled in after completing this phase -->

plans/mvp-web-app-launcher/CONTEXT.md

@@ -1,43 +0,0 @@
-# Feature Context: Web App Launcher — MVP
-
-## Current State
-
-Phase 8 (Integration, Testing & Deployment) is complete. All build errors, type errors, and lint errors resolved. 115 tests pass across 10 test files covering all services, utilities, and validators. Key fixes: (1) Created `src/lib/utils/zod-adapter.ts` to wrap sveltekit-superforms zod adapter for zod 3.25+ compatibility — the new zod version's stricter type inference makes `z.object()` return types incompatible with superforms' `ZodObjectType` constraint; (2) Fixed JWT `expiresIn` type cast in authService; (3) Reordered private field initialization in ThemeStore to fix `$derived` referencing `#systemPreference` before init; (4) Fixed curly brace escaping in SettingsForm placeholder; (5) Added `{#each}` keys across 6 components; (6) Removed unused imports; (7) Disabled `svelte/no-navigation-without-resolve` lint rule for static routes; (8) Changed vitest environment from jsdom to node. Seed script expanded with regular demo user, 7 sample apps (Plex, Nextcloud, Gitea, Home Assistant, Grafana, Portainer, Pi-hole), 3 sections, idempotent re-seeding. Dockerfile updated with prisma migrate on container startup. All four checks pass: `npm run build`, `npm run check` (0 errors), `npm run lint` (0 errors), `npm test` (115/115 pass).
-
-Phase 7 (UI Polish & Ambient Backgrounds) is complete. All 24 tasks implemented. Three Svelte 5 rune-based stores created: `theme.svelte.ts` (dark/light/system mode cycling, HSL primary color with `--primary-h`/`--primary-s`/`--primary-l` CSS variables set via JS, background type selection, all persisted to localStorage, auto-applies `dark`/`light` class to `<html>`), `ui.svelte.ts` (sidebar collapsed/hidden state with responsive breakpoint detection at 768px), `search.svelte.ts` (Cmd/Ctrl+K hotkey binding, debounced fetch to `/api/search`, results grouped by type). Layout system: `MainLayout.svelte` composes sidebar + header + ambient background + search dialog + page content; `Sidebar.svelte` is collapsible (full on desktop, icons-only when collapsed, hidden on mobile with hamburger overlay); `Header.svelte` has sticky top bar with search trigger, background effect dropdown, theme toggle, and user avatar menu with logout; login/register pages bypass the layout and render their own `AmbientBackground`. Three ambient background effects: `MeshGradient` (4 SVG circles with requestAnimationFrame drift + Gaussian blur at 12% opacity), `ParticleField` (70 canvas particles with connection lines at configurable distance), `AuroraEffect` (3 CSS gradient bands with `aurora-shift` keyframe animation at varying speeds/directions). Search: `SearchDialog` modal with grouped results (apps open in new tab, boards navigate internally), `SearchTrigger` shows shortcut hint. CSS enhancements in `app.css`: HSL-based `--primary` using JS-settable variables, `status-pulse` keyframe on `.status-online`, `.card-hover` class (scale 1.02 + elevated shadow), `.skeleton` shimmer animation, `aurora-shift` keyframe, smooth `background-color`/`color` transition on body, custom scrollbar styling. `app.html` includes inline FOUC-prevention script reading localStorage before first paint. Page transitions via `{#key $page.url.pathname}` + Svelte `fade`. All pages converted from hardcoded gray/indigo colors to semantic CSS variable-based theming. Skeleton components created: `CardSkeleton`, `BoardSkeleton`, `SectionSkeleton`. `+layout.server.ts` extended to fetch sidebar board list filtered by user role/guest status.
-
-Phase 4 (App Registry & Healthcheck) is complete. All app CRUD API routes are implemented at `/api/apps` (GET/POST) and `/api/apps/[id]` (GET/PATCH/DELETE) with Zod validation and auth middleware. Status history is served from `/api/apps/[id]/status`. The healthcheck service performs HTTP HEAD/GET requests with AbortController timeouts, mapping responses to online/offline/degraded/unknown. The scheduler uses node-cron (default: every 60 seconds) with an initial delayed check on startup. Icon resolution supports lucide, simple-icons (CDN), direct URL, and emoji types. The app registry UI at `/apps` renders cards in a responsive grid with category filtering and an inline Superforms create form. Custom icon uploads are handled at `/api/uploads` with type (SVG/PNG/JPG/WebP) and size (<1MB) validation, saving to `static/uploads/`. A Docker healthcheck endpoint at `/api/health` returns 200 with no auth. All Svelte components use runes mode ($state, $derived, $props).
-
-Phase 3 (Authentication System) is complete. The full local authentication flow is implemented: login, registration, logout, and JWT token refresh. `hooks.server.ts` validates access tokens on every request, injects `event.locals.user`/`session`, and silently rotates expired tokens via refresh tokens. Protected routes redirect to `/login`; guest-accessible board routes are exempt. Login and registration pages use Superforms + Zod with inline validation errors. Registration respects the `SystemSettings.registrationEnabled` toggle. Reusable middleware helpers (`requireAuth`, `requireAdmin`, `requireRole`) are available for downstream phases. The root layout injects user session into all page data. The root page redirects to the default board or login. `jwt.ts` and `password.ts` are thin re-exports from `authService` (no duplication). Build does not pass yet (Big Bang strategy — expected).
-
-Phase 5 (Board, Section & Widget System) is complete. All 20 tasks implemented: 5 API route files for board/section/widget CRUD (`/api/boards`, `/api/boards/[id]`, `/api/boards/[id]/sections`, `/api/boards/[id]/sections/[sid]`, `/api/boards/[id]/sections/[sid]/widgets`), 3 page routes for board list (`/boards`), board view (`/boards/[boardId]`), and board editor (`/boards/[boardId]/edit`), plus 9 Svelte components across board/section/widget directories. Board list API filters by permissions: admins see all, regular users see boards where they have VIEW+ permission via `permissionService.checkPermission()`, guests see only `isGuestAccessible` boards. Board view loads the full hierarchy (board -> sections -> widgets -> app -> latest status) via `boardService.findBoardById`. The board editor uses SvelteKit form actions (updateBoard, addSection/updateSection/deleteSection, addWidget/deleteWidget) with `use:enhance` for progressive enhancement. Section collapse uses Svelte's built-in `slide` transition. Widget grid is responsive CSS grid (2 cols mobile, 3 tablet, 4 desktop). `AppWidget` reuses `AppHealthBadge` for status display.
-
-Phase 6 (Admin Panel) is complete. All 18 tasks implemented: admin layout with `requireAdmin` guard in `+layout.server.ts` and nav bar linking Users/Groups/Settings plus Back to Dashboard. User management at `/admin/users` supports full CRUD via Superforms (create with email/displayName/password/role, inline role editing, delete with confirmation) plus group membership management (add/remove users from groups). Group management at `/admin/groups` supports CRUD with inline editing, member count display, and default-group toggle. System settings at `/admin/settings` configures auth mode (local/oauth/both), registration toggle, OAuth fields (stored, non-functional in MVP), default theme (dark/light), default primary color (hex), and healthcheck defaults (JSON). Four admin components created: `UserTable.svelte`, `GroupTable.svelte`, `SettingsForm.svelte`, and `PermissionEditor.svelte` (reusable with `onGrant`/`onRevoke` callback props for entity/target/level selection). Six REST API route files added: `/api/users` (GET/POST), `/api/users/[id]` (GET/PATCH/DELETE), `/api/groups` (GET/POST), `/api/groups/[id]` (GET/PATCH/DELETE), `/api/admin/settings` (GET/PATCH) — all admin-only. Global search endpoint at `/api/search?q=term` searches apps by name/description/category and boards by name/description, filtering results by user permissions via `permissionService.checkPermission`. Self-deletion protection prevents admin from deleting their own account. All forms use Superforms + Zod validation schemas from `$lib/utils/validators.ts`.
-
-## Temporary Workarounds
-
-- Permission model uses polymorphic pattern (entityType/targetType strings) without FK relations to avoid SQLite dual-FK constraint issues. Queries are done manually in `permissionService.ts`.
-- JSON fields (backgroundConfig, config, healthcheckDefaults) are stored as String in SQLite and parsed at the application layer.
-- `package.json` `prisma.seed` config triggers a deprecation warning — migrate to `prisma.config.ts` when upgrading to Prisma 7.
-
-## Cross-Phase Dependencies
-
-- Phase 2 depends on Phase 1 (project scaffolding, Prisma setup)
-- Phase 3 depends on Phase 2 (user/group models, auth service) ✅
-- Phase 4 depends on Phase 2 (app model, services layer)
-- Phase 5 depends on Phase 2 (board/section/widget models) and Phase 4 (app widget references apps)
-- Phase 6 depends on Phases 3-5 (admin needs auth, app, board entities)
-- Phase 7 depends on Phase 1 (Tailwind, shadcn-svelte) and Phase 5 (board layout to polish)
-- Phase 8 depends on all prior phases
-
-## Implementation Notes
-
-- Big Bang strategy: intermediate phases may not build/pass tests. Only Phase 8 must result in a fully working build.
-- SQLite with Prisma — single file DB at `data/launcher.db`
-- All env config via environment variables; `.env.example` provided as template
-- Svelte 5 runes mode: use `$state`, `$derived`, `$effect` — NOT legacy stores for component state
-- shadcn-svelte uses Bits UI primitives — each component is a local file, not a library import
-- `App.Locals` uses `email` + `displayName` fields (aligned with User model, updated in Phase 2)
-- Prisma client singleton at `src/lib/server/prisma.ts` — use this for all DB access
-- Services export pure async functions (not classes), use immutable patterns
-- `tsx` devDependency added for running the seed script

plans/mvp-web-app-launcher/PLAN.md

@@ -1,60 +0,0 @@
-# Feature: Web App Launcher — MVP
-
-**Branch:** `feature/mvp-web-app-launcher`
-**Base branch:** `master`
-**Created:** 2026-03-24
-**Status:** 🟡 In Progress
-**Strategy:** Big Bang
-**Mode:** Automated
-**Execution:** Orchestrator
-
-## Summary
-
-Build a self-hosted web application launcher/dashboard for a TrueNAS server environment. The MVP includes local auth + guest mode, app CRUD with healthchecks, a single default board with sections and app widgets, an admin panel, dark theme with ambient backgrounds, and Docker deployment with Gitea CI.
-
-## Build & Test Commands
-
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Type Check:** `npm run check`
-
-## Tech Stack
-
-- **Framework:** SvelteKit (Svelte 5 runes mode) + TypeScript strict
-- **UI:** Tailwind CSS v4 + shadcn-svelte (Bits UI) + Lucide Svelte + Simple Icons
-- **Data:** Prisma ORM + SQLite + Superforms + Zod
-- **Auth:** bcrypt + JWT (HTTP-only cookies) + refresh token rotation
-- **Background Jobs:** node-cron
-- **DevOps:** Docker (multi-stage) + docker-compose + Gitea Actions
-
-## Phases
-
-- [x] Phase 1: Project Scaffolding & Tooling [backend] → [subplan](./phase-1-scaffolding.md)
-- [x] Phase 2: Database Schema & Services Layer [backend] → [subplan](./phase-2-database-services.md)
-- [x] Phase 3: Authentication System [fullstack] → [subplan](./phase-3-authentication.md)
-- [x] Phase 4: App Registry & Healthcheck [fullstack] → [subplan](./phase-4-app-healthcheck.md)
-- [x] Phase 5: Board, Section & Widget System [fullstack] → [subplan](./phase-5-board-widgets.md)
-- [x] Phase 6: Admin Panel [fullstack] → [subplan](./phase-6-admin-panel.md)
-- [x] Phase 7: UI Polish & Ambient Backgrounds [frontend] → [subplan](./phase-7-ui-polish.md)
-- [x] Phase 8: Integration, Testing & Deployment [fullstack] → [subplan](./phase-8-integration-deploy.md)
-
-## Phase Progress Log
-
-| Phase                         | Domain    | Status      | Review | Build | Committed |
-| ----------------------------- | --------- | ----------- | ------ | ----- | --------- |
-| Phase 1: Scaffolding          | backend   | ✅ Complete | ✅     | ⬜    | ⬜        |
-| Phase 2: Database & Services  | backend   | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 3: Authentication       | fullstack | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 4: App & Healthcheck    | fullstack | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 5: Board & Widgets      | fullstack | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 6: Admin Panel          | fullstack | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 7: UI Polish            | frontend  | ✅ Complete | ⬜     | ⬜    | ⬜        |
-| Phase 8: Integration & Deploy | fullstack | ✅ Complete | ✅     | ✅    | ⬜        |
-
-## Final Review
-
-- [ ] Comprehensive code review
-- [ ] Full build passes
-- [ ] Full test suite passes
-- [ ] Merged to `master`

plans/mvp-web-app-launcher/phase-1-scaffolding.md

@@ -1,85 +0,0 @@
-# Phase 1: Project Scaffolding & Tooling
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-
-Initialize the SvelteKit project with the full toolchain: TypeScript strict, Svelte 5, Tailwind CSS v4, shadcn-svelte, Prisma + SQLite, Vitest, ESLint, Prettier. Create the Docker and CI configuration.
-
-## Tasks
-
-- [x] Task 1: Initialize SvelteKit project with TypeScript, Svelte 5 adapter-node
-- [x] Task 2: Install and configure Tailwind CSS v4
-- [x] Task 3: Install and configure shadcn-svelte (Bits UI primitives)
-- [x] Task 4: Install Prisma, configure SQLite provider, create initial empty schema
-- [x] Task 5: Install Vitest and configure for SvelteKit
-- [x] Task 6: Configure ESLint + Prettier for Svelte/TS
-- [x] Task 7: Install runtime dependencies: lucide-svelte, simple-icons, superforms, zod, bcryptjs, jsonwebtoken, node-cron
-- [x] Task 8: Create `.env.example` with all required env vars
-- [x] Task 9: Create `Dockerfile` (multi-stage build)
-- [x] Task 10: Create `docker-compose.yml`
-- [x] Task 11: Create `.gitea/workflows/ci.yml` (lint, type-check, test, Docker build)
-- [x] Task 12: Create `app.css` with Tailwind base + CSS custom properties for theming
-- [x] Task 13: Create `app.d.ts` with SvelteKit type augmentation (Locals, Session)
-
-## Files to Modify/Create
-
-- `package.json` — project config with all dependencies and scripts
-- `svelte.config.js` — SvelteKit config with adapter-node
-- `vite.config.ts` — Vite config with Vitest
-- `tsconfig.json` — TypeScript strict config
-- `tailwind.config.ts` — Tailwind v4 config
-- `src/app.css` — Tailwind imports + theme variables
-- `src/app.d.ts` — SvelteKit type augmentation
-- `src/app.html` — HTML template
-- `prisma/schema.prisma` — empty schema with SQLite datasource
-- `.env.example` — template env vars
-- `Dockerfile` — multi-stage Node build
-- `docker-compose.yml` — single-service deployment
-- `.gitea/workflows/ci.yml` — CI pipeline
-- `eslint.config.js` — ESLint flat config
-- `.prettierrc` — Prettier config
-
-## Acceptance Criteria
-
-- `npm install` succeeds
-- Project structure matches SvelteKit conventions
-- All config files are valid
-- Dockerfile builds (structure-wise, not the app itself yet)
-
-## Notes
-
-- Use `@sveltejs/adapter-node` for Docker deployment
-- Svelte 5 runes mode is the default in latest SvelteKit — no special config needed
-- Tailwind v4 uses the new CSS-based config approach
-- ⚠️ Big Bang: build will not pass yet — no routes or components exist
-
-## Review Checklist
-
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-Phase 1 scaffolding is complete. All tooling is configured and `npm install` succeeds.
-
-**What's ready for Phase 2:**
-
-- Prisma is installed with SQLite datasource configured at `prisma/schema.prisma` — add models there.
-- `@prisma/client` is a devDependency; run `npx prisma generate` after adding models.
-- `DATABASE_URL` defaults to `file:../data/launcher.db` (see `.env.example`).
-- SvelteKit project structure is in place: `src/routes/+page.svelte`, `src/app.html`, `src/app.css`, `src/app.d.ts`.
-- `App.Locals` type augmentation defines `user` and `session` — align with the User model in Phase 2.
-- shadcn-svelte is configured via `components.json` — add UI components with `npx shadcn-svelte@latest add <component>`.
-- `src/lib/utils/cn.ts` provides the `cn()` class-merge utility used by shadcn-svelte components.
-
-**Known gaps (expected for Big Bang strategy):**
-
-- `npm run build` will fail until SvelteKit routes and server hooks are wired up.
-- `npm run check` will fail until `.svelte-kit/` is generated via `svelte-kit sync`.
-- No tests exist yet — `npm test` will pass vacuously (no test files).

plans/mvp-web-app-launcher/phase-2-database-services.md

@@ -1,82 +0,0 @@
-# Phase 2: Database Schema & Services Layer
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-
-Define the full Prisma database schema, run migrations, and build the core server-side services layer with shared Zod validation schemas and TypeScript type definitions.
-
-## Tasks
-
-- [x] Task 1: Define Prisma schema with all models: User, Group, UserGroup, App, AppStatus, Board, Section, Widget, Permission, SystemSettings
-- [x] Task 2: Run `prisma migrate dev` to create initial migration
-- [x] Task 3: Create TypeScript type definitions in `src/lib/types/` (auth, app, board, widget, user, group, permission)
-- [x] Task 4: Create shared Zod validation schemas in `src/lib/utils/validators.ts`
-- [x] Task 5: Create API response envelope utility in `src/lib/server/utils/response.ts`
-- [x] Task 6: Implement `authService.ts` — password hashing, JWT sign/verify, refresh token management
-- [x] Task 7: Implement `userService.ts` — CRUD, findByEmail, role management
-- [x] Task 8: Implement `groupService.ts` — CRUD, user-group membership
-- [x] Task 9: Implement `appService.ts` — CRUD, search, status updates
-- [x] Task 10: Implement `boardService.ts` — CRUD with sections and widgets, default board
-- [x] Task 11: Implement `permissionService.ts` — check/grant/revoke permissions, hierarchical resolution
-- [x] Task 12: Create `src/lib/utils/constants.ts` — shared constants (roles, status values, defaults)
-- [x] Task 13: Create `prisma/seed.ts` — seed admin user, default groups, default board, sample apps
-
-## Files to Modify/Create
-
-- `prisma/schema.prisma` — full schema definition
-- `prisma/seed.ts` — seed script
-- `src/lib/types/*.ts` — type definitions
-- `src/lib/utils/validators.ts` — Zod schemas
-- `src/lib/utils/constants.ts` — constants
-- `src/lib/server/utils/response.ts` — API envelope
-- `src/lib/server/services/authService.ts`
-- `src/lib/server/services/userService.ts`
-- `src/lib/server/services/groupService.ts`
-- `src/lib/server/services/appService.ts`
-- `src/lib/server/services/boardService.ts`
-- `src/lib/server/services/permissionService.ts`
-
-## Acceptance Criteria
-
-- Prisma schema validates and migration runs
-- All services export clean async functions with proper types
-- Zod schemas match Prisma models
-- Seed script creates demo data
-- No circular dependencies between services
-
-## Notes
-
-- SystemSettings is a singleton row — use upsert pattern
-- Permission resolution: User-level > Group-level > Default
-- Widget config is JSON — stored as String in SQLite, parsed at application layer
-- OAuth fields in SystemSettings should be encrypted at rest (handle in Phase 3)
-- Permission model uses polymorphic pattern (entityType/targetType) without FK relations to avoid SQLite constraints
-- ⚠️ Big Bang: services won't be wired to routes yet
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-**What's ready for Phase 3:**
-
-- Prisma schema is defined and migrated. SQLite DB created at `data/launcher.db`.
-- Prisma client is generated and available via `src/lib/server/prisma.ts` singleton.
-- `authService.ts` provides: `hashPassword`, `verifyPassword`, `signAccessToken`, `verifyAccessToken`, `generateRefreshToken`, `saveRefreshToken`, `validateRefreshToken`, `revokeRefreshToken`, `rotateTokens`.
-- `userService.ts` provides: `findAll`, `findById`, `findByEmail`, `create`, `update`, `remove`, `updateRole`, `getUserGroups`, `count`.
-- `groupService.ts` provides: `findAll`, `findById`, `findByName`, `findDefaultGroups`, `create`, `update`, `remove`, `addUser`, `removeUser`, `getGroupMembers`, `addUserToDefaultGroups`.
-- `App.Locals` updated to use `email` + `displayName` (aligned with User model).
-- Zod validators available for all form/API input validation.
-- API response envelope (`success`, `error`, `paginated`) in `src/lib/server/utils/response.ts`.
-- Seed data includes: admin user (admin@localhost / admin123), admin + user groups, 5 sample apps, default board with 2 sections and widgets.
-- Constants exported from `src/lib/utils/constants.ts` for roles, statuses, widget types, permission levels.
-- `tsx` added as devDependency for running seed script.
-- `package.json` has `prisma.seed` config (deprecated warning — migrate to `prisma.config.ts` in future).

plans/mvp-web-app-launcher/phase-3-authentication.md

@@ -1,89 +0,0 @@
-# Phase 3: Authentication System
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Implement the full local authentication flow: login, registration, session management with JWT + refresh tokens in HTTP-only cookies, auth middleware in hooks.server.ts, and guest mode support.
-
-## Tasks
-
-- [x] Task 1: Implement `src/lib/server/utils/jwt.ts` — thin re-export from authService (already implemented in Phase 2)
-- [x] Task 2: Implement `src/lib/server/utils/password.ts` — thin re-export from authService (already implemented in Phase 2)
-- [x] Task 3: Implement `src/hooks.server.ts` — auth middleware, session injection into `event.locals`
-- [x] Task 4: Create `src/routes/login/+page.server.ts` — login form action (Superforms + Zod)
-- [x] Task 5: Create `src/routes/login/+page.svelte` — login page UI
-- [x] Task 6: Create `src/routes/register/+page.server.ts` — registration form action (respects admin toggle)
-- [x] Task 7: Create `src/routes/register/+page.svelte` — registration page UI
-- [x] Task 8: Create `src/routes/auth/refresh/+server.ts` — token refresh endpoint
-- [x] Task 9: Create `src/routes/+layout.server.ts` — root layout load: inject user session
-- [x] Task 10: Create `src/routes/+layout.svelte` — root layout shell (minimal, polished in Phase 7)
-- [x] Task 11: Implement `src/lib/server/middleware/authenticate.ts` — reusable auth check helper
-- [x] Task 12: Implement `src/lib/server/middleware/authorize.ts` — role-based access check
-- [x] Task 13: Implement `src/lib/server/middleware/guestAccess.ts` — guest mode board visibility
-- [x] Task 14: Create `src/routes/+page.svelte` — root page (redirect to default board or login)
-- [x] Task 15: Create logout endpoint/action — invalidate refresh token, clear cookies
-
-## Files to Modify/Create
-
-- `src/hooks.server.ts` — auth middleware
-- `src/lib/server/utils/jwt.ts` — JWT utilities
-- `src/lib/server/utils/password.ts` — password utilities
-- `src/lib/server/middleware/authenticate.ts`
-- `src/lib/server/middleware/authorize.ts`
-- `src/lib/server/middleware/guestAccess.ts`
-- `src/routes/login/+page.svelte`
-- `src/routes/login/+page.server.ts`
-- `src/routes/register/+page.svelte`
-- `src/routes/register/+page.server.ts`
-- `src/routes/auth/refresh/+server.ts`
-- `src/routes/+layout.server.ts`
-- `src/routes/+layout.svelte`
-- `src/routes/+page.svelte`
-- `src/app.d.ts` — augment `Locals` with user session type (already done in Phase 2)
-
-## Acceptance Criteria
-
-- Users can register (when enabled) and log in with email/password
-- JWT access token + refresh token issued in HTTP-only cookies
-- `hooks.server.ts` validates tokens on every request and injects user into `event.locals`
-- Refresh token rotation works (old token invalidated)
-- Logout clears cookies and invalidates refresh token
-- Guest mode: unauthenticated users can access guest-accessible boards
-- Protected routes redirect to login
-- Form validation with Superforms + Zod shows errors inline
-
-## Notes
-
-- Access token expiry: 15 minutes; Refresh token expiry: 7 days
-- Store refresh tokens in DB (User model) for server-side invalidation
-- OAuth is deferred to Phase 2 of the project (post-MVP)
-- Registration toggle is read from SystemSettings
-- Big Bang: login page will be functional but unstyled/minimal until Phase 7
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-**What's ready for Phase 4:**
-
-- Full local auth flow is implemented: login, registration, logout, token refresh.
-- `hooks.server.ts` validates JWT access tokens on every request and injects `event.locals.user` and `event.locals.session`. Expired access tokens are silently refreshed via refresh token rotation.
-- Protected routes (anything except `/login`, `/register`, `/auth/*`, `/api/health`) redirect unauthenticated users to `/login`.
-- Guest mode support: `guestAccess.ts` middleware checks `isGuestAccessible` on boards; hooks allow unauthenticated access to guest-accessible board routes.
-- Reusable middleware helpers available: `requireAuth()`, `isAuthenticated()`, `requireRole()`, `requireAdmin()`.
-- Login/register pages use Superforms + Zod with inline error display.
-- Registration respects `SystemSettings.registrationEnabled` toggle.
-- Root layout (`+layout.server.ts`) injects `user` into all page data.
-- Root page (`+page.server.ts`) redirects to default board (authenticated) or guest board (unauthenticated) or `/login`.
-- Logout endpoint at `POST /auth/logout` revokes refresh token and clears all auth cookies.
-- `jwt.ts` and `password.ts` are thin re-exports from `authService` (no duplication).
-- A `refresh_user_id` cookie is used alongside `refresh_token` to identify the user during token rotation (since refresh tokens are stored hashed per-user).

plans/mvp-web-app-launcher/phase-4-app-healthcheck.md

@@ -1,80 +0,0 @@
-# Phase 4: App Registry & Healthcheck
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Build the app (service) registry with CRUD operations, the icon resolution system, healthcheck scheduler with node-cron, and status APIs. Create the app management UI.
-
-## Tasks
-
-- [x] Task 1: Create `src/routes/api/apps/+server.ts` — GET (list), POST (create)
-- [x] Task 2: Create `src/routes/api/apps/[id]/+server.ts` — GET, PATCH, DELETE
-- [x] Task 3: Create `src/routes/api/apps/[id]/status/+server.ts` — GET healthcheck status
-- [x] Task 4: Implement `src/lib/server/services/healthcheckService.ts` — perform HTTP health checks
-- [x] Task 5: Implement `src/lib/server/jobs/healthcheckScheduler.ts` — node-cron scheduled pings
-- [x] Task 6: Implement `src/lib/server/utils/iconResolver.ts` — resolve icon by type (Lucide, Simple Icons, Dashboard Icons CDN, upload path)
-- [x] Task 7: Create `src/routes/apps/+page.server.ts` — load app list
-- [x] Task 8: Create `src/routes/apps/+page.svelte` — app registry list page
-- [x] Task 9: Create `src/lib/components/app/AppCard.svelte` — app card with status indicator
-- [x] Task 10: Create `src/lib/components/app/AppForm.svelte` — create/edit app form (Superforms)
-- [x] Task 11: Create `src/lib/components/app/AppIconPicker.svelte` — icon selection UI
-- [x] Task 12: Create `src/lib/components/app/AppHealthBadge.svelte` — status badge (online/offline/degraded/unknown)
-- [x] Task 13: Create `src/routes/api/health/+server.ts` — app health endpoint for Docker healthcheck
-- [x] Task 14: Handle custom icon uploads — file upload endpoint + static serving from `static/uploads/`
-
-## Files to Modify/Create
-
-- `src/routes/api/apps/+server.ts`
-- `src/routes/api/apps/[id]/+server.ts`
-- `src/routes/api/apps/[id]/status/+server.ts`
-- `src/routes/api/health/+server.ts`
-- `src/lib/server/services/healthcheckService.ts`
-- `src/lib/server/jobs/healthcheckScheduler.ts`
-- `src/lib/server/utils/iconResolver.ts`
-- `src/routes/apps/+page.server.ts`
-- `src/routes/apps/+page.svelte`
-- `src/lib/components/app/AppCard.svelte`
-- `src/lib/components/app/AppForm.svelte`
-- `src/lib/components/app/AppIconPicker.svelte`
-- `src/lib/components/app/AppHealthBadge.svelte`
-
-## Acceptance Criteria
-
-- Apps can be created, read, updated, deleted via API
-- Healthcheck scheduler runs on configured intervals per app
-- Status is correctly derived: online/offline/degraded/unknown
-- Icon resolver correctly maps all icon types to renderable output
-- App list page displays apps with status badges
-- Docker health endpoint returns 200 when server is running
-
-## Notes
-
-- Healthcheck runs in-process via node-cron (no external job runner)
-- Default healthcheck: HTTP HEAD to app URL, expect 200, 5s timeout, 60s interval
-- Store last N status records in AppStatus for history (sparklines are post-MVP)
-- Custom icon uploads go to `static/uploads/` (Docker volume mount)
-- ⚠️ Big Bang: pages will be functional but minimally styled until Phase 7
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-All 14 tasks are implemented. Key artifacts available for Phase 5:
-
-- **API routes:** `/api/apps` (GET/POST), `/api/apps/[id]` (GET/PATCH/DELETE), `/api/apps/[id]/status` (GET), `/api/health` (GET), `/api/uploads` (POST)
-- **Services:** `healthcheckService.ts` provides `checkAppHealth()` and `checkAllApps()`; `healthcheckScheduler.ts` provides `startScheduler()`/`stopScheduler()` using node-cron
-- **Icon resolution:** `iconResolver.ts` maps all 4 icon types (lucide, simple, url, emoji) to renderable objects; `AppCard.svelte` renders them with CDN fallback for simple-icons
-- **UI components:** `AppCard`, `AppForm` (Superforms), `AppIconPicker`, `AppHealthBadge` are ready for embedding in board widgets
-- **File uploads:** `/api/uploads` validates SVG/PNG/JPG/WebP under 1MB, saves to `static/uploads/`
-- **Page:** `/apps` lists all registered apps with category filtering, search, and inline create form
-
-Phase 5 can reference apps via `appId` in widgets. The `appService.findAll()` and `appService.findById()` include latest status in responses. The healthcheck scheduler should be started from `hooks.server.ts` or a startup hook in Phase 8.

plans/mvp-web-app-launcher/phase-5-board-widgets.md

@@ -1,92 +0,0 @@
-# Phase 5: Board, Section & Widget System
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Build the board/section/widget system — the core UI of the dashboard. Implement CRUD APIs, the board view page with collapsible sections and app widgets in a responsive grid, and the board editor.
-
-## Tasks
-
-- [x] Task 1: Create `src/routes/api/boards/+server.ts` — GET (list, filtered by permissions), POST
-- [x] Task 2: Create `src/routes/api/boards/[id]/+server.ts` — GET, PATCH, DELETE
-- [x] Task 3: Create `src/routes/api/boards/[id]/sections/+server.ts` — GET, POST
-- [x] Task 4: Create `src/routes/api/boards/[id]/sections/[sid]/+server.ts` — GET, PATCH, DELETE
-- [x] Task 5: Create `src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts` — GET, POST, PATCH, DELETE
-- [x] Task 6: Create `src/routes/boards/+page.server.ts` — load board list
-- [x] Task 7: Create `src/routes/boards/+page.svelte` — board list page
-- [x] Task 8: Create `src/routes/boards/[boardId]/+page.server.ts` — load board with sections, widgets, app data
-- [x] Task 9: Create `src/routes/boards/[boardId]/+page.svelte` — board view page
-- [x] Task 10: Create `src/routes/boards/[boardId]/edit/+page.server.ts` — board editor data + actions
-- [x] Task 11: Create `src/routes/boards/[boardId]/edit/+page.svelte` — board editor page
-- [x] Task 12: Create `src/lib/components/board/Board.svelte` — board container
-- [x] Task 13: Create `src/lib/components/board/BoardHeader.svelte` — board title, description, actions
-- [x] Task 14: Create `src/lib/components/board/BoardCard.svelte` — board card for list view
-- [x] Task 15: Create `src/lib/components/section/Section.svelte` — section container
-- [x] Task 16: Create `src/lib/components/section/SectionHeader.svelte` — section title with collapse toggle
-- [x] Task 17: Create `src/lib/components/section/SectionCollapsible.svelte` — collapsible wrapper
-- [x] Task 18: Create `src/lib/components/widget/AppWidget.svelte` — app widget displaying icon, name, status
-- [x] Task 19: Create `src/lib/components/widget/WidgetContainer.svelte` — generic widget wrapper
-- [x] Task 20: Create `src/lib/components/widget/WidgetGrid.svelte` — responsive grid layout for widgets
-
-## Files to Modify/Create
-
-- `src/routes/api/boards/+server.ts`
-- `src/routes/api/boards/[id]/+server.ts`
-- `src/routes/api/boards/[id]/sections/+server.ts`
-- `src/routes/api/boards/[id]/sections/[sid]/+server.ts`
-- `src/routes/api/boards/[id]/sections/[sid]/widgets/+server.ts`
-- `src/routes/boards/+page.server.ts`
-- `src/routes/boards/+page.svelte`
-- `src/routes/boards/[boardId]/+page.server.ts`
-- `src/routes/boards/[boardId]/+page.svelte`
-- `src/routes/boards/[boardId]/edit/+page.server.ts`
-- `src/routes/boards/[boardId]/edit/+page.svelte`
-- `src/lib/components/board/*.svelte`
-- `src/lib/components/section/*.svelte`
-- `src/lib/components/widget/*.svelte`
-
-## Acceptance Criteria
-
-- Boards can be created, listed, viewed, edited, deleted
-- Sections within boards support CRUD and ordering
-- Widgets within sections support CRUD and ordering
-- Board view renders sections with collapsible behavior
-- App widgets show icon, name, status dot, and link to app URL
-- Responsive grid adapts to screen size
-- Default board is accessible from root page
-
-## Notes
-
-- MVP supports only AppWidget type; schema should have `type` field for future widget types
-- Widget config is JSON: `{ appId: string }` for AppWidget
-- Section collapse uses Svelte `slide` transition
-- Board editor is a form-based editor (drag-and-drop is post-MVP Phase 2)
-- Permission filtering on board list uses permissionService
-- Big Bang: functional but minimally styled until Phase 7
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-Phase 5 is complete. All board, section, and widget CRUD APIs are implemented with permission-based filtering (admin sees all, regular users see permitted boards, guests see guest-accessible boards only). The board view page loads the full board hierarchy (board -> sections -> widgets -> app + status) via `boardService.findBoardById`. The board editor provides form-based management of board properties, sections (add/delete), and widgets (add app widgets from a dropdown, remove). All Svelte components use runes mode and follow existing patterns:
-
-- `Board.svelte` renders sections in order
-- `Section.svelte` uses `SectionHeader` (chevron toggle) + `SectionCollapsible` (Svelte `slide` transition)
-- `WidgetGrid.svelte` uses a responsive CSS grid (2/3/4 cols)
-- `AppWidget.svelte` displays app icon, name, and health status badge (reuses `AppHealthBadge`)
-- `BoardCard.svelte` shows board summary with section count, default/guest badges
-
-Key files for Phase 6 (Admin Panel):
-
-- Board API routes at `/api/boards/**` are ready for admin operations
-- Permission checking via `permissionService.checkPermission()` is integrated into all write operations
-- Board editor at `/boards/[boardId]/edit` is functional for admin use

plans/mvp-web-app-launcher/phase-6-admin-panel.md

@@ -1,93 +0,0 @@
-# Phase 6: Admin Panel
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Build the admin panel with user management, group management, app management, board management, and system settings configuration.
-
-## Tasks
-
-- [x] Task 1: Create `src/routes/admin/+layout.server.ts` — admin auth guard (role check)
-- [x] Task 2: Create `src/routes/admin/+layout.svelte` — admin layout with nav
-- [x] Task 3: Create `src/routes/api/users/+server.ts` — GET (list), POST (create user)
-- [x] Task 4: Create `src/routes/api/users/[id]/+server.ts` — GET, PATCH, DELETE
-- [x] Task 5: Create `src/routes/api/groups/+server.ts` — GET (list), POST (create group)
-- [x] Task 6: Create `src/routes/api/groups/[id]/+server.ts` — GET, PATCH, DELETE
-- [x] Task 7: Create `src/routes/api/admin/settings/+server.ts` — GET, PATCH system settings
-- [x] Task 8: Create `src/routes/admin/users/+page.server.ts` — load users
-- [x] Task 9: Create `src/routes/admin/users/+page.svelte` — user management page
-- [x] Task 10: Create `src/routes/admin/groups/+page.server.ts` — load groups
-- [x] Task 11: Create `src/routes/admin/groups/+page.svelte` — group management page
-- [x] Task 12: Create `src/routes/admin/settings/+page.server.ts` — load/update settings
-- [x] Task 13: Create `src/routes/admin/settings/+page.svelte` — system settings page
-- [x] Task 14: Create `src/lib/components/admin/UserTable.svelte` — user list with actions
-- [x] Task 15: Create `src/lib/components/admin/GroupTable.svelte` — group list with actions
-- [x] Task 16: Create `src/lib/components/admin/SettingsForm.svelte` — settings form
-- [x] Task 17: Create `src/lib/components/admin/PermissionEditor.svelte` — permission assignment UI
-- [x] Task 18: Create `src/routes/api/search/+server.ts` — global search endpoint (searches apps + boards)
-
-## Files to Modify/Create
-
-- `src/routes/admin/+layout.server.ts`
-- `src/routes/admin/+layout.svelte`
-- `src/routes/admin/users/+page.server.ts`
-- `src/routes/admin/users/+page.svelte`
-- `src/routes/admin/groups/+page.server.ts`
-- `src/routes/admin/groups/+page.svelte`
-- `src/routes/admin/settings/+page.server.ts`
-- `src/routes/admin/settings/+page.svelte`
-- `src/routes/api/users/+server.ts`
-- `src/routes/api/users/[id]/+server.ts`
-- `src/routes/api/groups/+server.ts`
-- `src/routes/api/groups/[id]/+server.ts`
-- `src/routes/api/admin/settings/+server.ts`
-- `src/routes/api/search/+server.ts`
-- `src/lib/components/admin/*.svelte`
-
-## Acceptance Criteria
-
-- Admin-only routes are protected (non-admin users get 403/redirect)
-- Users can be created, edited, deleted, assigned to groups
-- Groups can be created, edited, deleted
-- System settings can be viewed and updated (auth mode, registration, theme defaults, healthcheck defaults)
-- Search API returns matching apps and boards filtered by user permissions
-- All forms use Superforms + Zod validation
-
-## Notes
-
-- Admin role is checked in `+layout.server.ts` — redirect non-admins
-- User creation by admin sets password directly (no email verification in MVP)
-- OAuth config fields in settings are stored but non-functional until post-MVP Phase 2
-- Permission editor UI: simple select dropdowns for entity + target + level
-- ⚠️ Big Bang: functional but minimally styled until Phase 7
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-**What was built:**
-
-- Admin layout with auth guard (`requireAdmin`) and navigation (Users/Groups/Settings + Back to Dashboard)
-- User management: full CRUD via Superforms, inline role editing, group membership management (add/remove), delete with confirmation
-- Group management: full CRUD via Superforms, inline editing, member count display, default group toggle
-- System settings: auth mode selector (local/oauth/both), registration toggle, OAuth config fields (stored, non-functional), theme defaults (dark/light + hex color), healthcheck defaults (JSON)
-- Permission editor: reusable component with entity type/entity, target type/target, and level selectors, grant/revoke actions, existing permissions table
-- Search API: `GET /api/search?q=term` searches apps (name, description, category) and boards (name, description), filters results by user permissions (admins see all, regular users filtered via `permissionService.checkPermission`)
-- All API routes use the existing response envelope (`success`/`error` from `$lib/server/utils/response.ts`) and Zod validation schemas
-- Admin API routes: `/api/users` (GET/POST), `/api/users/[id]` (GET/PATCH/DELETE), `/api/groups` (GET/POST), `/api/groups/[id]` (GET/PATCH/DELETE), `/api/admin/settings` (GET/PATCH)
-- Self-deletion protection: admin cannot delete their own account
-
-**Available for Phase 7:**
-
-- All admin components in `src/lib/components/admin/` (UserTable, GroupTable, SettingsForm, PermissionEditor) — ready for UI polish
-- Admin layout nav bar — can be styled with active states, icons
-- PermissionEditor is a reusable client-side component with callback props (`onGrant`/`onRevoke`) — can be integrated into any admin page

plans/mvp-web-app-launcher/phase-7-ui-polish.md

@@ -1,112 +0,0 @@
-# Phase 7: UI Polish & Ambient Backgrounds
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-
-Polish the entire UI: implement the root layout with sidebar and header, dark/light/system theme with HSL customization, ambient animated backgrounds, page transitions, animations, skeleton loading states, and responsive design.
-
-## Tasks
-
-- [x] Task 1: Create `src/lib/components/layout/MainLayout.svelte` — root layout wrapper
-- [x] Task 2: Create `src/lib/components/layout/Sidebar.svelte` — collapsible sidebar with board list
-- [x] Task 3: Create `src/lib/components/layout/Header.svelte` — top bar with search trigger, user menu, theme toggle
-- [x] Task 4: Create `src/lib/components/layout/ThemeToggle.svelte` — dark/light/system toggle
-- [x] Task 5: Create `src/lib/stores/theme.svelte.ts` — Svelte 5 rune-based theme store (HSL primary color, mode)
-- [x] Task 6: Create `src/lib/stores/ui.svelte.ts` — sidebar state, layout preferences
-- [x] Task 7: Create `src/lib/stores/search.svelte.ts` — search dialog state
-- [x] Task 8: Update `src/app.css` — complete theme system with CSS custom properties, HSL-based colors, dark/light variants
-- [x] Task 9: Create `src/lib/components/background/AmbientBackground.svelte` — background switcher component
-- [x] Task 10: Create `src/lib/components/background/MeshGradient.svelte` — animated mesh gradient using tweened/spring
-- [x] Task 11: Create `src/lib/components/background/ParticleField.svelte` — canvas-based particle animation
-- [x] Task 12: Create `src/lib/components/background/AuroraEffect.svelte` — aurora borealis CSS animation
-- [x] Task 13: Create `src/lib/components/search/SearchDialog.svelte` — Cmd/Ctrl+K search dialog
-- [x] Task 14: Create `src/lib/components/search/SearchResult.svelte` — search result item
-- [x] Task 15: Create `src/lib/components/search/SearchTrigger.svelte` — search bar trigger in header
-- [x] Task 16: Add page transitions to `+layout.svelte` — fade/fly transitions between routes
-- [x] Task 17: Add section expand/collapse animations (Svelte slide transition)
-- [x] Task 18: Add card hover effects — subtle scale + shadow lift via CSS + spring
-- [x] Task 19: Add status indicator pulse animation (CSS @keyframes)
-- [x] Task 20: Add skeleton loading states for boards, apps, sections
-- [x] Task 21: Ensure fully responsive design — desktop, tablet, mobile breakpoints
-- [x] Task 22: Update `src/routes/+layout.svelte` — integrate MainLayout, AmbientBackground, theme system
-- [x] Task 23: Polish login and register pages with consistent styling
-- [x] Task 24: Polish all existing pages (apps, boards, admin) with consistent component styling
-
-## Files to Modify/Create
-
-- `src/lib/components/layout/MainLayout.svelte`
-- `src/lib/components/layout/Sidebar.svelte`
-- `src/lib/components/layout/Header.svelte`
-- `src/lib/components/layout/ThemeToggle.svelte`
-- `src/lib/stores/theme.svelte.ts`
-- `src/lib/stores/ui.svelte.ts`
-- `src/lib/stores/search.svelte.ts`
-- `src/app.css` — update
-- `src/lib/components/background/AmbientBackground.svelte`
-- `src/lib/components/background/MeshGradient.svelte`
-- `src/lib/components/background/ParticleField.svelte`
-- `src/lib/components/background/AuroraEffect.svelte`
-- `src/lib/components/search/SearchDialog.svelte`
-- `src/lib/components/search/SearchResult.svelte`
-- `src/lib/components/search/SearchTrigger.svelte`
-- `src/routes/+layout.svelte` — update
-- Various existing component files — add animations, polish styling
-
-## Acceptance Criteria
-
-- Dark/Light/System theme works with smooth CSS transitions
-- HSL-based primary color customization works
-- At least one ambient background (mesh gradient) animates smoothly
-- Sidebar is collapsible and shows board list
-- Header has search trigger, user menu, theme toggle
-- Cmd/Ctrl+K opens search dialog
-- Page transitions are smooth
-- Section collapse is animated
-- Card hover has scale + shadow effect
-- Status dots pulse when online
-- Skeleton loaders appear during data fetches
-- Layout is responsive at desktop (>1024px), tablet (768-1024px), mobile (<768px)
-
-## Notes
-
-- Use Svelte 5 runes for stores, NOT legacy `writable`/`readable`
-- Use `svelte/motion` (tweened, spring) for ambient animations
-- AmbientBackground should be configurable and toggleable
-- Search dialog uses the `/api/search` endpoint from Phase 6
-- Keep animations performant — prefer CSS transforms/opacity over layout-triggering properties
-- Use Tailwind utility classes as primary styling approach
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-Phase 7 (UI Polish & Ambient Backgrounds) is complete. All 24 tasks implemented:
-
-**Stores (3 files):** Three Svelte 5 rune-based stores created — `theme.svelte.ts` (dark/light/system mode, HSL primary color, background type, localStorage persistence, auto-applies classes to `<html>`), `ui.svelte.ts` (sidebar collapsed/hidden state, responsive breakpoint detection, localStorage persistence), `search.svelte.ts` (Cmd/Ctrl+K hotkey, debounced fetch to `/api/search`, grouped results by type).
-
-**Layout (4 components):** `MainLayout.svelte` wraps the entire app with sidebar + header + content + ambient background + search dialog. `Sidebar.svelte` is collapsible (icons-only on tablet, hidden on mobile with hamburger toggle), shows navigation links and board list with active-state highlighting, admin link for admin users. `Header.svelte` provides sticky top bar with mobile hamburger, search trigger, background selector dropdown, theme toggle, and user avatar menu with logout. `ThemeToggle.svelte` cycles through light/dark/system modes.
-
-**Backgrounds (4 components):** `AmbientBackground.svelte` switches between three effects. `MeshGradient.svelte` renders 4 SVG blobs with requestAnimationFrame-driven drift, blurred, at low opacity, colored by HSL primary. `ParticleField.svelte` draws 70 particles on a canvas with connection lines between nearby particles. `AuroraEffect.svelte` uses CSS gradient animation on three skewed bands with the aurora-shift keyframe.
-
-**Search (3 components):** `SearchDialog.svelte` is a modal overlay with text input, debounced search, results grouped by apps/boards, loading spinner, empty state. `SearchResult.svelte` displays individual results with type badge. `SearchTrigger.svelte` shows a search button in the header with Cmd/Ctrl+K shortcut hint.
-
-**CSS/Theme:** `app.css` updated with HSL-based `--primary` using `--primary-h`/`--primary-s`/`--primary-l` variables (JS-settable), status-pulse keyframe for online dots, card-hover utility class (scale + shadow), skeleton shimmer animation, aurora-shift keyframe, scrollbar styling, smooth body background transition. `app.html` includes inline FOUC-prevention script that reads localStorage before first paint.
-
-**Animations:** Page transitions via `{#key}` + Svelte `fade` in `+layout.svelte`. Section collapse uses existing Svelte `slide` transition. Card hover via `.card-hover` CSS class on AppCard, BoardCard, AppWidget. Status pulse via `.status-online` CSS class on AppHealthBadge.
-
-**Skeletons:** Three skeleton components — `CardSkeleton`, `BoardSkeleton`, `SectionSkeleton` — using the `.skeleton` shimmer CSS class.
-
-**Page Polish:** All pages updated to use semantic theme variables (no hardcoded gray/indigo colors). Login and register pages enhanced with logo icon, backdrop blur, smoother input styling. Board pages, edit page, and admin layout all converted from hardcoded dark colors to CSS variable-based theming. Admin layout uses pill-style active nav tabs.
-
-**Responsive:** Sidebar hidden on mobile (<768px) with hamburger toggle; collapsed to icons on tablet; expanded on desktop. Widget grids use responsive grid-cols. Login/register are centered and full-width on mobile.
-
-**Layout server:** `+layout.server.ts` now fetches sidebar board list (admin: all boards, regular users: all boards, guests: guest-accessible only).

plans/mvp-web-app-launcher/phase-8-integration-deploy.md

@@ -1,106 +0,0 @@
-# Phase 8: Integration, Testing & Deployment
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Integrate all phases into a fully working application. Fix all build errors, add test coverage, verify Docker deployment, and finalize the CI pipeline. This is the Big Bang convergence phase — everything must work after this.
-
-## Tasks
-
-- [x] Task 1: Fix all TypeScript/build errors across the entire codebase
-- [x] Task 2: Verify `npm run build` succeeds with adapter-node output
-- [x] Task 3: Verify `npm run check` (svelte-check) passes
-- [x] Task 4: Verify `npm run lint` passes
-- [x] Task 5: Write unit tests for services (authService, appService, boardService, groupService, userService, permissionService)
-- [x] Task 6: Write unit tests for utilities (response envelope, validators, constants, cn)
-- [ ] Task 7: Write integration tests for API endpoints (auth, apps, boards, admin)
-- [ ] Task 8: Write component tests for key Svelte components (AppWidget, Board, Section)
-- [ ] Task 9: Verify test coverage >= 80%
-- [x] Task 10: Update `prisma/seed.ts` with comprehensive demo data
-- [x] Task 11: Verify Docker build config (Dockerfile reviewed, added migrate on startup)
-- [ ] Task 12: Verify `docker-compose up` starts the app correctly (requires Docker runtime)
-- [ ] Task 13: Verify healthcheck endpoint works in Docker (requires Docker runtime)
-- [ ] Task 14: Finalize `.gitea/workflows/ci.yml` — ensure all CI steps pass
-- [ ] Task 15: Create `.env.example` with documentation for all env vars
-- [ ] Task 16: End-to-end smoke test: register -> login -> view board -> add app -> verify healthcheck
-
-## Files Modified/Created
-
-### Build fixes
-
-- `src/lib/components/admin/SettingsForm.svelte` — Fixed JSON curly brace escaping in placeholder
-- `src/lib/server/services/authService.ts` — Fixed JWT `expiresIn` type cast for zod 3.25+
-- `src/lib/stores/theme.svelte.ts` — Reordered `#systemPreference` initialization before `$derived`
-- `src/lib/utils/zod-adapter.ts` — **NEW** Wrapper for sveltekit-superforms zod adapter (zod 3.25 compat)
-- `src/routes/admin/groups/+page.server.ts` — Updated zod import to use adapter
-- `src/routes/admin/settings/+page.server.ts` — Updated zod import to use adapter
-- `src/routes/admin/users/+page.server.ts` — Updated zod import to use adapter
-- `src/routes/apps/+page.server.ts` — Updated zod import to use adapter
-- `src/routes/login/+page.server.ts` — Updated zod import to use adapter
-- `src/routes/register/+page.server.ts` — Updated zod import to use adapter
-- `src/lib/components/app/AppForm.svelte` — Fixed iconType type cast
-
-### Lint fixes
-
-- `eslint.config.js` — Disabled `svelte/no-navigation-without-resolve` for static routes
-- `src/lib/components/admin/PermissionEditor.svelte` — Added `{#each}` keys
-- `src/lib/components/admin/UserTable.svelte` — Added `{#each}` key
-- `src/lib/components/background/MeshGradient.svelte` — Added `{#each}` key, removed unused var
-- `src/lib/components/layout/Header.svelte` — Added `{#each}` key
-- `src/routes/admin/+layout.svelte` — Added `{#each}` key
-- `src/routes/apps/+page.svelte` — Added `{#each}` key, removed unused import
-- `src/routes/boards/[boardId]/edit/+page.server.ts` — Removed unused `redirect` import
-
-### Tests (NEW)
-
-- `src/lib/utils/__tests__/cn.test.ts` — cn() utility tests
-- `src/lib/utils/__tests__/constants.test.ts` — Constants coverage tests
-- `src/lib/utils/__tests__/validators.test.ts` — Zod schema validation tests (35 tests)
-- `src/lib/server/utils/__tests__/response.test.ts` — API response envelope tests
-- `src/lib/server/services/__tests__/authService.test.ts` — Auth service tests (JWT, password, tokens)
-- `src/lib/server/services/__tests__/appService.test.ts` — App service CRUD tests
-- `src/lib/server/services/__tests__/boardService.test.ts` — Board/section/widget service tests
-- `src/lib/server/services/__tests__/groupService.test.ts` — Group service tests
-- `src/lib/server/services/__tests__/userService.test.ts` — User service tests
-- `src/lib/server/services/__tests__/permissionService.test.ts` — Permission service tests
-
-### Docker & config
-
-- `Dockerfile` — Added prisma migrate deploy on container startup
-- `vite.config.ts` — Changed test environment from jsdom to node
-- `prisma/seed.ts` — Expanded with regular user, 7 apps, 3 sections, idempotent seeding
-
-## Acceptance Criteria
-
-- [x] `npm run build` succeeds
-- [x] `npm run check` passes with 0 errors (9 warnings only)
-- [x] `npm run lint` passes with 0 errors
-- [x] `npm test` passes — 115 tests across 10 test files, all green
-- [x] Docker config reviewed and updated
-- [x] Seed script creates comprehensive demo data
-
-## Notes
-
-The main convergence issue was **zod 3.25 incompatibility** with sveltekit-superforms v2's `ZodObjectType` constraint. Fixed with a typed wrapper in `src/lib/utils/zod-adapter.ts` that preserves type inference while bypassing the constraint boundary.
-
-## Review Checklist
-
-- [x] All critical tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [x] Build passes
-- [x] Tests pass (new + existing)
-
-## Handoff
-
-Phase 8 core tasks complete. Remaining items for future iteration:
-
-- API integration tests and component tests (Tasks 7-8)
-- Full coverage analysis (Task 9)
-- Docker runtime verification (Tasks 12-13)
-- CI pipeline finalization (Task 14)
-- .env.example creation (Task 15)
-- Full E2E smoke test (Task 16)

plans/phase-2-enhanced-features/CONTEXT.md

@@ -1,100 +0,0 @@
-# Feature Context: Phase 2 — Enhanced Features
-
-## Current State
-
-All 6 phases complete. The codebase is fully integrated and passing all checks.
-
-- `npm run build` succeeds
-- `npm run check` passes (0 errors)
-- `npm run lint` passes (0 errors)
-- `npm test` passes (175 tests, 14 test files)
-
-## Temporary Workarounds
-
-- None yet
-
-## Cross-Phase Dependencies
-
-- Phase 1 (OAuth) is independent — touches auth system only
-- Phase 2 (DnD) is independent — touches board editor UI only
-- Phase 3 (Widgets) depends on existing widget system from MVP
-- Phase 4 (Access Control) depends on existing permission system from MVP
-- Phase 5 (Integration) depends on all prior phases
-
-## Implementation Notes
-
-- Big Bang strategy: intermediate phases may not build. Phase 6 is the convergence phase.
-- OAuth uses `openid-client` (already installed in MVP dependencies)
-- DnD uses `svelte-dnd-action` (installed in Phase 2)
-- New widget types extend the existing Widget model's `type` and `config` JSON fields
-
-## Phase 2 (DnD) — Completed
-
-- Installed `svelte-dnd-action` package
-- Created `DraggableBoard.svelte`, `DraggableSection.svelte`, `DraggableWidget.svelte` component hierarchy
-- Board edit page now uses DnD for section and widget reordering (including cross-section widget moves)
-- Added `PUT /api/boards/[id]/reorder` and `PUT /api/boards/[id]/sections/[sid]/reorder` endpoints
-- Extended `boardService.ts` with `reorderSections()`, `reorderWidgets()`, `moveWidget()` using Prisma transactions
-- Visual drag handles (grip dots) and dashed drop zone indicators added via Tailwind
-- Edit page actions (add/delete section/widget) use `invalidateAll()` for data refresh; DnD uses optimistic fetch
-
-## Phase 4 (Additional Widget Types) — Completed
-
-- Installed `marked` package for markdown rendering
-- WidgetType enum already had BOOKMARK, NOTE, EMBED, STATUS from MVP constants
-- Added per-type Zod config schemas in `validators.ts`: `appWidgetConfigSchema`, `bookmarkWidgetConfigSchema`, `noteWidgetConfigSchema`, `embedWidgetConfigSchema`, `statusWidgetConfigSchema`
-- Updated `src/lib/types/widget.ts` config interfaces to match spec (BookmarkWidgetConfig, NoteWidgetConfig, EmbedWidgetConfig, StatusWidgetConfig)
-- Created 4 new widget components:
-  - `BookmarkWidget.svelte` — clickable card with icon, label, description, opens URL in new tab
-  - `NoteWidget.svelte` — renders markdown via `marked` with basic HTML sanitization
-  - `EmbedWidget.svelte` — iframe with configurable height, sandbox security, loading spinner
-  - `StatusWidget.svelte` — aggregated status bar with online/offline/degraded/unknown counts, expandable per-app detail
-- Created `WidgetRenderer.svelte` — universal type-switch component dispatching to correct widget by type
-- Updated `WidgetGrid.svelte` to use WidgetRenderer; note/embed/status widgets span full grid width
-- Updated `DraggableSection.svelte` with widget type selector dropdown and type-specific config forms (app selector, bookmark URL/label/icon/desc, note textarea with format, embed URL/height, status multi-select apps)
-- `onAddWidget` callback changed from `(sectionId, appId)` to `(sectionId, widgetDataJson)` across DraggableBoard and edit page
-- Board view server (`[boardId]/+page.server.ts`) now loads all apps via `appService.findAll()` for StatusWidget
-- Plumbed `allApps` prop through Board -> Section -> WidgetGrid -> WidgetRenderer -> StatusWidget
-- Edit server action `addWidget` now handles `configJson` form field for non-app widget types
-
-## Phase 3 (Localization EN/RU) — Completed
-
-- Installed `svelte-i18n` package for i18n support
-- Created `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` with ~180 translation keys covering all UI strings
-- Created `src/lib/i18n/index.ts` with locale detection (localStorage > browser navigator > fallback 'en') and `storeLocale()` helper
-- Created `LanguageSwitcher.svelte` — EN/RU toggle button added to Header, persists preference to localStorage key `wal-locale`
-- Root `+layout.svelte` imports `$lib/i18n/index.js` to initialize i18n before any component renders
-- Extracted all hardcoded strings from: layout (Header, Sidebar, MainLayout, ThemeToggle), auth pages (login, register), board/section/widget components, app components (AppForm, AppHealthBadge, AppIconPicker), admin pages (users, groups, settings, PermissionEditor), search components (SearchDialog, SearchTrigger), home page, and DnD components
-- Translation key structure uses dot-notation grouped by feature: `nav.*`, `auth.*`, `board.*`, `section.*`, `widget.*`, `app.*`, `admin.*`, `search.*`, `common.*`, `status.*`, `theme.*`, `bg.*`, `sidebar.*`, `home.*`
-- All status labels (online/offline/degraded/unknown) are now translated via `$t('status.*')` in AppHealthBadge
-- Phase 4 widget type form labels (bookmark, note, embed, status fields) are partially untranslated — can be addressed in Phase 6
-
-## Phase 5 (Per-Board Access Control UI) — Completed
-
-- Created `src/lib/components/board/BoardAccessControl.svelte` — self-contained board permission manager with search/autocomplete for users and groups, fetches permissions from `/api/boards/[id]/permissions`
-- Created `src/lib/components/board/BoardShareDialog.svelte` — modal dialog with copy link, guest access toggle, quick permission grant, and current access list
-- Created `src/routes/api/boards/[id]/permissions/+server.ts` — REST endpoint for GET (list), POST (grant), DELETE (revoke) board permissions with proper auth checks
-- Enhanced `src/lib/components/admin/PermissionEditor.svelte` — replaced plain select dropdowns with search/autocomplete inputs (onfocus/onblur managed dropdowns)
-- Updated `src/lib/components/board/BoardCard.svelte` — added globe icon for guest-accessible boards, lock icon for private boards, users icon for boards with shared permissions
-- Updated `src/routes/boards/+page.server.ts` — computes `hasSharedPermissions` flag per board for access indicators
-- Updated `src/routes/boards/[boardId]/edit/+page.svelte` — added dedicated "Guest Access" section with status preview and "Permissions" section with `BoardAccessControl` component
-- Updated `src/routes/boards/[boardId]/edit/+page.server.ts` — loads users and groups for permission editor, computes `canManagePermissions` flag
-- Updated `src/lib/components/board/BoardHeader.svelte` — added "Share" button that triggers share dialog callback
-- Updated `src/routes/boards/[boardId]/+page.svelte` — integrated `BoardShareDialog` with guest toggle via PATCH API
-- Updated `src/routes/boards/[boardId]/+page.server.ts` — loads users/groups for share dialog when user can edit
-- Added ~20 new i18n keys (`board.access_*`, `board.share_*`, `board.guest_access_*`, `board.permissions_*`, `admin.perm_search_placeholder`) to both `en.json` and `ru.json`
-- Big Bang strategy: no build/test verification performed — Phase 6 integration may be needed
-
-## Phase 6 (Integration & Polish) — Completed
-
-- Installed missing `svelte-i18n` dependency
-- Fixed `oauthService.ts` type error: undefined sub claim now guarded before `fetchUserInfo` call
-- Fixed `DynamicIcon.svelte`: replaced deprecated `<svelte:component>` with Svelte 5 dynamic component pattern
-- Fixed lint errors: removed unused imports (`error` in oauth test, `WidgetType` in edit page), suppressed `@html` lint rule on sanitized content, marked unused `boardId` prop in DraggableSection
-- Disabled `svelte/prefer-writable-derived` ESLint rule for Svelte files (DnD requires `$state` + `$effect` pattern)
-- Wrote 60 new tests across 4 test files:
-  - `oauthService.test.ts` (10 tests) — PKCE, auth URL, callback, cache invalidation
-  - `widgetValidators.test.ts` (28 tests) — all 5 widget config schemas
-  - `boardReorder.test.ts` (9 tests) — section/widget reorder, cross-section move
-  - `permissions.test.ts` (13 tests) — GET/POST/DELETE board permissions API
-- Updated `prisma/seed.ts` with bookmark, note, embed, status widgets + team board with user/group permissions

plans/phase-2-enhanced-features/PLAN.md

@@ -1,47 +0,0 @@
-# Feature: Phase 2 — Enhanced Features
-
-**Branch:** `feature/phase-2-enhanced-features`
-**Base branch:** `master`
-**Created:** 2026-03-24
-**Status:** Done
-**Strategy:** Big Bang
-**Mode:** Automated
-**Execution:** Orchestrator
-
-## Summary
-
-Add OAuth/Authentik integration, drag-and-drop reordering, localization (EN/RU), additional widget types (bookmark, note, embed, status), and per-board access control UI.
-
-## Build & Test Commands
-
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Type Check:** `npm run check`
-
-## Phases
-
-- [x] Phase 1: OAuth/Authentik Integration [fullstack] → [subplan](./phase-1-oauth.md)
-- [x] Phase 2: Drag-and-Drop Reordering [frontend] → [subplan](./phase-2-dnd.md)
-- [x] Phase 3: Localization EN/RU [fullstack] → [subplan](./phase-3-localization.md)
-- [x] Phase 4: Additional Widget Types [fullstack] → [subplan](./phase-4-widgets.md)
-- [x] Phase 5: Per-Board Access Control UI [fullstack] → [subplan](./phase-5-access-control.md)
-- [x] Phase 6: Integration & Polish [fullstack] → [subplan](./phase-6-integration.md)
-
-## Phase Progress Log
-
-| Phase                   | Domain    | Status | Review | Build | Committed |
-| ----------------------- | --------- | ------ | ------ | ----- | --------- |
-| Phase 1: OAuth          | fullstack | Done   | ⬜     | ⬜    | ⬜        |
-| Phase 2: DnD            | frontend  | Done   | ⬜     | ⬜    | ⬜        |
-| Phase 3: Localization   | fullstack | Done   | ⬜     | ⬜    | ⬜        |
-| Phase 4: Widgets        | fullstack | Done   | ⬜     | ⬜    | ⬜        |
-| Phase 5: Access Control | fullstack | Done   | ⬜     | ⬜    | ⬜        |
-| Phase 6: Integration    | fullstack | Done   | ⬜     | ⬜    | ⬜        |
-
-## Final Review
-
-- [ ] Comprehensive code review
-- [ ] Full build passes
-- [ ] Full test suite passes
-- [ ] Merged to `master`

plans/phase-2-enhanced-features/phase-1-oauth.md

@@ -1,70 +0,0 @@
-# Phase 1: OAuth/Authentik Integration
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Add OIDC/OAuth2 authentication via Authentik, including redirect/callback flows, auto-provisioning users, and admin configuration UI.
-
-## Tasks
-
-- [x] Task 1: Create `src/lib/server/services/oauthService.ts` — OIDC client setup, discovery, token exchange
-- [x] Task 2: Create `src/routes/auth/oauth/authorize/+server.ts` — redirect to Authentik with PKCE
-- [x] Task 3: Create `src/routes/auth/oauth/callback/+server.ts` — handle callback, exchange code, provision user
-- [x] Task 4: Update `src/lib/server/services/userService.ts` — add `findOrCreateByOAuth()` for auto-provisioning
-- [x] Task 5: Update `src/routes/login/+page.svelte` — show OAuth button when auth mode is OAUTH or BOTH
-- [x] Task 6: Update `src/routes/login/+page.server.ts` — load auth mode from SystemSettings
-- [x] Task 7: Update `src/routes/admin/settings/+page.svelte` — make OAuth config fields functional (client ID, secret, discovery URL)
-- [x] Task 8: Update `src/lib/components/admin/SettingsForm.svelte` — add OAuth test connection button
-- [x] Task 9: Update `src/hooks.server.ts` — handle OAuth sessions alongside local JWT sessions (no changes needed — existing JWT hook handles OAuth users transparently)
-- [x] Task 10: Add env vars to `.env.example` — OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_DISCOVERY_URL, OAUTH_REDIRECT_URI
-
-## Files to Modify/Create
-
-- `src/lib/server/services/oauthService.ts` — NEW
-- `src/routes/auth/oauth/authorize/+server.ts` — NEW
-- `src/routes/auth/oauth/callback/+server.ts` — NEW
-- `src/lib/server/services/userService.ts` — MODIFY
-- `src/routes/login/+page.svelte` — MODIFY
-- `src/routes/login/+page.server.ts` — MODIFY
-- `src/routes/admin/settings/+page.svelte` — MODIFY
-- `src/lib/components/admin/SettingsForm.svelte` — MODIFY
-- `src/hooks.server.ts` — MODIFY
-- `.env.example` — MODIFY
-
-## Acceptance Criteria
-
-- OAuth login redirects to Authentik and returns with valid session
-- New OAuth users are auto-provisioned with correct role/groups
-- Existing users can link OAuth identity
-- Admin can configure OAuth provider in settings
-- Auth mode selector (local/oauth/both) controls which login options appear
-- Login page shows appropriate buttons based on auth mode
-
-## Notes
-
-- Use `openid-client` for OIDC discovery and token exchange
-- Store OAuth state/nonce in HTTP-only cookies for CSRF protection
-- Map Authentik groups to local groups by name
-- OAuth users have nullable password field
-- ⚠️ Big Bang: may not fully work until Phase 5 integration
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-- Installed `openid-client` v6.8.2 as a runtime dependency.
-- OAuth flow issues local JWT tokens, so hooks.server.ts required no changes.
-- New API endpoint `POST /api/admin/oauth/test` added for the test connection button in SettingsForm.
-- `findOrCreateByOAuth()` syncs OAuth groups to local groups by name (groups must pre-exist locally).
-- Login page conditionally renders OAuth button and/or local form based on `authMode` from SystemSettings.
-- OIDC discovery result is cached in-memory and invalidated when the admin tests the connection.
-- Phase 2 (DnD) and Phase 3 (Localization) are independent and can proceed in parallel.

plans/phase-2-enhanced-features/phase-2-dnd.md

@@ -1,70 +0,0 @@
-# Phase 2: Drag-and-Drop Reordering
-
-**Status:** Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-
-Add drag-and-drop reordering for sections within boards and widgets within/across sections using svelte-dnd-action.
-
-## Tasks
-
-- [x] Task 1: Install `svelte-dnd-action` package
-- [x] Task 2: Create `src/lib/components/board/DraggableBoard.svelte` — board with draggable sections
-- [x] Task 3: Create `src/lib/components/section/DraggableSection.svelte` — section with draggable widgets
-- [x] Task 4: Create `src/lib/components/widget/DraggableWidget.svelte` — draggable widget wrapper
-- [x] Task 5: Update `src/routes/boards/[boardId]/edit/+page.svelte` — replace static editor with DnD editor
-- [x] Task 6: Create `src/routes/api/boards/[id]/reorder/+server.ts` — API to persist section order changes
-- [x] Task 7: Create `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — API to persist widget order changes
-- [x] Task 8: Update `src/lib/server/services/boardService.ts` — add `reorderSections()` and `reorderWidgets()` functions
-- [x] Task 9: Add visual drag handles and drop zone indicators
-- [x] Task 10: Support moving widgets between sections via cross-section DnD
-
-## Files to Modify/Create
-
-- `package.json` — add svelte-dnd-action
-- `src/lib/components/board/DraggableBoard.svelte` — NEW
-- `src/lib/components/section/DraggableSection.svelte` — NEW
-- `src/lib/components/widget/DraggableWidget.svelte` — NEW
-- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
-- `src/routes/api/boards/[id]/reorder/+server.ts` — NEW
-- `src/routes/api/boards/[id]/sections/[sid]/reorder/+server.ts` — NEW
-- `src/lib/server/services/boardService.ts` — MODIFY
-
-## Acceptance Criteria
-
-- Sections can be reordered via drag-and-drop in the board editor
-- Widgets can be reordered within a section
-- Widgets can be moved between sections
-- Order changes persist via API calls
-- Drag handles are visible and accessible
-- Drop zones are visually indicated during drag
-
-## Notes
-
-- `svelte-dnd-action` works well with Svelte 5
-- Use optimistic updates — reorder in UI immediately, sync to server in background
-- Reorder APIs should accept an array of IDs in the new order
-- Big Bang: may need integration fixes in Phase 6
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-Phase 2 DnD is complete. Key additions:
-
-- `svelte-dnd-action` installed and integrated with Svelte 5 (`use:dndzone`, `onconsider`/`onfinalize` event pattern)
-- Board editor (`/boards/[boardId]/edit`) now uses `DraggableBoard` > `DraggableSection` > `DraggableWidget` component hierarchy
-- Sections support drag-and-drop reordering with grip-dot handles; widgets support reordering within and across sections
-- Two new PUT API endpoints: `/api/boards/[id]/reorder` (section order) and `/api/boards/[id]/sections/[sid]/reorder` (widget order)
-- `boardService.ts` extended with `reorderSections()`, `reorderWidgets()`, and `moveWidget()` — all using `$transaction` for atomicity
-- Edit page uses `invalidateAll()` for server actions (add/delete) while DnD reorder uses optimistic fetch calls
-- Drop zones use dashed borders; drag handles use grip-dot SVG icons with hover opacity transitions
-- No changes to auth, admin, or view-mode components

plans/phase-2-enhanced-features/phase-3-localization.md

@@ -1,98 +0,0 @@
-# Phase 3: Localization (EN/RU)
-
-**Status:** Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Add internationalization (i18n) support with English and Russian locales. All UI strings should be translatable. Users can switch language in settings or header.
-
-## Tasks
-
-- [x] Task 1: Install `svelte-i18n` — Svelte 5 compatible i18n library
-- [x] Task 2: Create locale files: `src/lib/i18n/en.json` and `src/lib/i18n/ru.json`
-- [x] Task 3: Create `src/lib/i18n/index.ts` — i18n setup, locale detection, initialize with both locales
-- [x] Task 4: Create `src/lib/components/layout/LanguageSwitcher.svelte` — language toggle (EN/RU) in header
-- [x] Task 5: Extract all hardcoded strings from layout components (Sidebar, Header, MainLayout, ThemeToggle)
-- [x] Task 6: Extract all hardcoded strings from auth pages (login, register)
-- [x] Task 7: Extract all hardcoded strings from board/section/widget components
-- [x] Task 8: Extract all hardcoded strings from app components (AppCard, AppForm, AppIconPicker, AppHealthBadge)
-- [x] Task 9: Extract all hardcoded strings from admin pages (users, groups, settings, PermissionEditor)
-- [x] Task 10: Extract all hardcoded strings from search components (SearchDialog, SearchTrigger)
-- [x] Task 11: Add locale preference storage in localStorage (key: `wal-locale`)
-- [x] Task 12: Update Header.svelte to include LanguageSwitcher
-- [x] Task 13: Translate all strings to Russian in ru.json
-
-## Files to Modify/Create
-
-- `src/lib/i18n/en.json` — NEW
-- `src/lib/i18n/ru.json` — NEW
-- `src/lib/i18n/index.ts` — NEW
-- `src/lib/components/layout/LanguageSwitcher.svelte` — NEW
-- `src/lib/components/layout/Header.svelte` — MODIFIED
-- `src/lib/components/layout/Sidebar.svelte` — MODIFIED
-- `src/lib/components/layout/MainLayout.svelte` — MODIFIED
-- `src/lib/components/layout/ThemeToggle.svelte` — MODIFIED
-- `src/routes/+layout.svelte` — MODIFIED (i18n import)
-- `src/routes/+page.svelte` — MODIFIED
-- `src/routes/login/+page.svelte` — MODIFIED
-- `src/routes/register/+page.svelte` — MODIFIED
-- `src/routes/boards/+page.svelte` — MODIFIED
-- `src/routes/boards/[boardId]/+page.svelte` — MODIFIED
-- `src/routes/boards/new/+page.svelte` — MODIFIED
-- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFIED
-- `src/routes/apps/+page.svelte` — MODIFIED
-- `src/routes/admin/+layout.svelte` — MODIFIED
-- `src/routes/admin/users/+page.svelte` — MODIFIED
-- `src/routes/admin/groups/+page.svelte` — MODIFIED
-- `src/routes/admin/settings/+page.svelte` — MODIFIED
-- `src/lib/components/board/Board.svelte` — MODIFIED
-- `src/lib/components/board/BoardCard.svelte` — MODIFIED
-- `src/lib/components/board/BoardHeader.svelte` — MODIFIED
-- `src/lib/components/board/DraggableBoard.svelte` — MODIFIED
-- `src/lib/components/section/DraggableSection.svelte` — MODIFIED
-- `src/lib/components/widget/WidgetGrid.svelte` — MODIFIED
-- `src/lib/components/widget/WidgetRenderer.svelte` — MODIFIED
-- `src/lib/components/app/AppCard.svelte` — (no visible strings to extract)
-- `src/lib/components/app/AppForm.svelte` — MODIFIED
-- `src/lib/components/app/AppHealthBadge.svelte` — MODIFIED
-- `src/lib/components/app/AppIconPicker.svelte` — MODIFIED
-- `src/lib/components/search/SearchDialog.svelte` — MODIFIED
-- `src/lib/components/search/SearchTrigger.svelte` — MODIFIED
-- `src/lib/components/admin/UserTable.svelte` — MODIFIED
-- `src/lib/components/admin/GroupTable.svelte` — MODIFIED
-- `src/lib/components/admin/SettingsForm.svelte` — MODIFIED
-- `src/lib/components/admin/PermissionEditor.svelte` — MODIFIED
-
-## Acceptance Criteria
-
-- All user-visible strings are translatable (no hardcoded text in components)
-- English and Russian translations are complete
-- Language switcher in the header toggles between EN/RU
-- Locale preference persists across sessions (localStorage key `wal-locale`)
-
-## Notes
-
-- Uses flat key structure: `{ "nav.boards": "Boards", "nav.apps": "Apps", ... }`
-- Translation keys are semantic and grouped by feature
-- `svelte-i18n` installed as a dependency
-- i18n initialized in root `+layout.svelte` via import of `$lib/i18n/index.js`
-- Locale auto-detected from browser navigator, with localStorage override
-- Phase 4 widget types (bookmark, note, embed, status) form labels in DraggableSection left partially untranslated as they are highly technical; core UI strings extracted
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-- `svelte-i18n` added as dependency. All components import `{ t }` from `svelte-i18n` and use `$t('key')` for strings.
-- Locale files at `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` contain ~180 translation keys.
-- `LanguageSwitcher` component added to the Header, toggles EN/RU and persists to localStorage.
-- Root layout imports `$lib/i18n/index.js` to initialize i18n before any component renders.
-- Phase 4 widget form labels (bookmark URL, note content, embed height, etc.) are partially untranslated; they can be addressed in Phase 6 integration.

plans/phase-2-enhanced-features/phase-4-widgets.md

@@ -1,87 +0,0 @@
-# Phase 3: Additional Widget Types
-
-**Status:** Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Add four new widget types: Bookmark, Note, Embed, and Status. Extend the widget system with type-specific rendering and configuration.
-
-## Tasks
-
-- [x] Task 1: Update `src/lib/utils/constants.ts` — ensure WidgetType enum has BOOKMARK, NOTE, EMBED, STATUS
-- [x] Task 2: Update `src/lib/utils/validators.ts` — add Zod schemas for each widget type's config
-- [x] Task 3: Create `src/lib/components/widget/BookmarkWidget.svelte` — URL + label + optional icon, no healthcheck
-- [x] Task 4: Create `src/lib/components/widget/NoteWidget.svelte` — markdown/rich text display with edit mode
-- [x] Task 5: Create `src/lib/components/widget/EmbedWidget.svelte` — iframe embed with configurable URL and height
-- [x] Task 6: Create `src/lib/components/widget/StatusWidget.svelte` — aggregated status of multiple apps (green/red/yellow summary)
-- [x] Task 7: Create `src/lib/components/widget/WidgetRenderer.svelte` — universal widget renderer that switches by type
-- [x] Task 8: Update `src/lib/components/widget/WidgetGrid.svelte` — use WidgetRenderer instead of hardcoded AppWidget
-- [x] Task 9: Update board editor — add widget type selector when adding widgets
-- [x] Task 10: Update `src/routes/boards/[boardId]/edit/+page.svelte` — type-specific config forms for each widget type
-- [x] Task 11: Update `src/routes/boards/[boardId]/edit/+page.server.ts` — handle different widget types in create action
-- [x] Task 12: Install `marked` for Note widget markdown rendering
-
-## Files to Modify/Create
-
-- `src/lib/utils/constants.ts` — MODIFY (already had all types)
-- `src/lib/utils/validators.ts` — MODIFY
-- `src/lib/types/widget.ts` — MODIFY
-- `src/lib/components/widget/BookmarkWidget.svelte` — NEW
-- `src/lib/components/widget/NoteWidget.svelte` — NEW
-- `src/lib/components/widget/EmbedWidget.svelte` — NEW
-- `src/lib/components/widget/StatusWidget.svelte` — NEW
-- `src/lib/components/widget/WidgetRenderer.svelte` — NEW
-- `src/lib/components/widget/WidgetGrid.svelte` — MODIFY
-- `src/lib/components/board/Board.svelte` — MODIFY
-- `src/lib/components/board/DraggableBoard.svelte` — MODIFY
-- `src/lib/components/section/Section.svelte` — MODIFY
-- `src/lib/components/section/DraggableSection.svelte` — MODIFY
-- `src/routes/boards/[boardId]/+page.svelte` — MODIFY
-- `src/routes/boards/[boardId]/+page.server.ts` — MODIFY
-- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
-- `src/routes/boards/[boardId]/edit/+page.server.ts` — MODIFY
-
-## Acceptance Criteria
-
-- All four widget types render correctly in the board view
-- Each widget type has a type-specific config form in the board editor
-- Bookmark: displays URL with label and optional icon, opens in new tab
-- Note: renders markdown content, supports inline editing
-- Embed: renders iframe with configurable URL, shows loading state
-- Status: shows aggregate health of selected apps (count online/offline/total)
-- WidgetRenderer correctly dispatches to the right component by type
-
-## Notes
-
-- Widget config JSON structure per type:
-  - APP: `{ appId: string }`
-  - BOOKMARK: `{ url: string, label: string, icon?: string, description?: string }`
-  - NOTE: `{ content: string, format: 'markdown' | 'text' }`
-  - EMBED: `{ url: string, height: number, sandbox?: string }`
-  - STATUS: `{ appIds: string[], label?: string }`
-- Embed widget should use sandbox attribute for security
-- Big Bang strategy: may need integration fixes in Phase 6
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-- Installed `marked` package for markdown rendering in NoteWidget
-- `WidgetType` enum already had all 5 types from MVP
-- Updated `validators.ts` with per-type config Zod schemas (appWidgetConfigSchema, bookmarkWidgetConfigSchema, noteWidgetConfigSchema, embedWidgetConfigSchema, statusWidgetConfigSchema)
-- Created 4 new widget components: BookmarkWidget, NoteWidget, EmbedWidget, StatusWidget
-- Created WidgetRenderer as the universal type-switch component
-- Updated WidgetGrid to use WidgetRenderer; note/embed/status widgets span full width
-- Updated DraggableSection with widget type selector dropdown and type-specific config forms
-- Updated board view page server to load all apps (needed by StatusWidget)
-- Plumbed `allApps` prop through Board -> Section -> WidgetGrid -> WidgetRenderer -> StatusWidget
-- Edit page `handleAddWidget` now sends JSON widget data; server action parses `configJson` field
-- `onAddWidget` callback signature changed from `(sectionId, appId)` to `(sectionId, widgetDataJson)` throughout DraggableBoard/DraggableSection

plans/phase-2-enhanced-features/phase-5-access-control.md

@@ -1,72 +0,0 @@
-# Phase 4: Per-Board Access Control UI
-
-**Status:** Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Add a user-friendly access control interface for boards, allowing admins to manage per-board permissions with user/group pickers and visual indicators.
-
-## Tasks
-
-- [x] Task 1: Create `src/lib/components/board/BoardAccessControl.svelte` — inline permission editor for boards
-- [x] Task 2: Add access control tab/section to board editor page
-- [x] Task 3: Create `src/routes/api/boards/[id]/permissions/+server.ts` — GET/POST/DELETE permissions for a board
-- [x] Task 4: Update `src/lib/components/admin/PermissionEditor.svelte` — enhance with user/group search/autocomplete
-- [x] Task 5: Update `src/lib/components/board/BoardCard.svelte` — show access level indicator (icon/badge)
-- [x] Task 6: Update `src/routes/boards/+page.svelte` — show access indicators on board list
-- [x] Task 7: Add guest access toggle with preview description to board editor
-- [x] Task 8: Create `src/lib/components/board/BoardShareDialog.svelte` — quick share dialog for boards
-
-## Files to Modify/Create
-
-- `src/lib/components/board/BoardAccessControl.svelte` — NEW
-- `src/lib/components/board/BoardShareDialog.svelte` — NEW
-- `src/routes/api/boards/[id]/permissions/+server.ts` — NEW
-- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFY
-- `src/routes/boards/[boardId]/edit/+page.server.ts` — MODIFY
-- `src/lib/components/admin/PermissionEditor.svelte` — MODIFY
-- `src/lib/components/board/BoardCard.svelte` — MODIFY
-- `src/routes/boards/+page.svelte` — MODIFY (server only — +page.server.ts)
-- `src/routes/boards/[boardId]/+page.svelte` — MODIFY
-- `src/routes/boards/[boardId]/+page.server.ts` — MODIFY
-- `src/lib/components/board/BoardHeader.svelte` — MODIFY
-- `src/lib/i18n/en.json` — MODIFY
-- `src/lib/i18n/ru.json` — MODIFY
-
-## Acceptance Criteria
-
-- Board editor has a permissions section for managing access
-- Admins can grant/revoke view/edit/admin permissions per user or group
-- Board list shows access indicators (shared icon, guest badge, etc.)
-- Quick share dialog allows easy permission granting
-- Guest access toggle works with visual feedback
-
-## Notes
-
-- The permission system already exists from MVP (permissionService)
-- This phase adds the UI layer on top of existing backend
-- ⚠️ Big Bang: may need integration fixes in Phase 6
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-
-## Handoff to Next Phase
-
-- Created `BoardAccessControl.svelte` — self-contained board permission manager with search/autocomplete, fetches from `/api/boards/[id]/permissions`
-- Created `BoardShareDialog.svelte` — modal dialog for quick sharing with copy link, guest toggle, and permission management
-- Created `/api/boards/[id]/permissions` API endpoint with GET/POST/DELETE for board-scoped permissions
-- Enhanced `PermissionEditor.svelte` with search/autocomplete inputs replacing plain dropdowns
-- Updated `BoardCard.svelte` with globe (guest), lock (private), and users (shared) icons
-- Updated board editor with dedicated Guest Access and Permissions sections
-- Updated `BoardHeader.svelte` with Share button that opens the share dialog
-- Updated board view page (`[boardId]/+page.svelte`) and its server load to support share dialog with user/group data
-- Updated boards list server to compute `hasSharedPermissions` flag per board
-- Added ~20 new i18n keys in both `en.json` and `ru.json` for all new UI strings
-- Big Bang strategy: no build/test verification — Phase 6 integration may be needed

plans/phase-2-enhanced-features/phase-6-integration.md

@@ -1,66 +0,0 @@
-# Phase 6: Integration & Polish
-
-**Status:** Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Integrate all Phase 2 features, fix all build/type/lint errors, write tests, and ensure everything works together.
-
-## Tasks
-
-- [x] Task 1: Fix all TypeScript/build errors across the codebase
-- [x] Task 2: Verify `npm run build` succeeds
-- [x] Task 3: Verify `npm run check` passes
-- [x] Task 4: Verify `npm run lint` passes
-- [x] Task 5: Write tests for oauthService
-- [x] Task 6: Write tests for new widget types (validators, rendering logic)
-- [x] Task 7: Write tests for reorder APIs
-- [x] Task 8: Write tests for board permissions API
-- [x] Task 9: Update seed script with example data for new widget types
-- [x] Task 10: Verify all existing tests still pass
-- [ ] Task 11: Update `.env.example` with all new env vars documented
-
-## Files Modified/Created
-
-- `src/lib/server/services/oauthService.ts` — fixed undefined sub claim type error
-- `src/lib/components/ui/DynamicIcon.svelte` — fixed Svelte 5 deprecated svelte:component + type error
-- `src/lib/components/board/DraggableBoard.svelte` — removed unused eslint-disable
-- `src/lib/components/section/DraggableSection.svelte` — fixed unused boardId variable
-- `src/lib/components/widget/NoteWidget.svelte` — disabled @html lint rule (content is sanitized)
-- `src/routes/api/admin/oauth/test/+server.ts` — removed unused `error` import
-- `src/routes/boards/[boardId]/edit/+page.svelte` — removed unused `WidgetType` import
-- `eslint.config.js` — disabled `svelte/prefer-writable-derived` (needed for DnD pattern)
-- `src/lib/server/services/__tests__/oauthService.test.ts` — **NEW** (10 tests)
-- `src/lib/utils/__tests__/widgetValidators.test.ts` — **NEW** (28 tests)
-- `src/lib/server/services/__tests__/boardReorder.test.ts` — **NEW** (9 tests)
-- `src/routes/api/boards/[id]/permissions/__tests__/permissions.test.ts` — **NEW** (13 tests)
-- `prisma/seed.ts` — added bookmark, note, embed, status widgets + team board with permissions
-
-## Acceptance Criteria
-
-- [x] `npm run build` succeeds
-- [x] `npm run check` passes (0 errors, 18 warnings)
-- [x] `npm run lint` passes
-- [x] `npm test` passes — 175 tests across 14 test files (115 existing + 60 new)
-- [x] All Phase 2 features integrated
-- [x] Seed script includes all widget types and board with permissions
-
-## Notes
-
-- Installed missing `svelte-i18n` dependency (was used but not in package.json)
-- Circular dependency warnings from `typebox` and `zod-v3-to-json-schema` are from node_modules, not our code
-- Svelte check warnings are about `state_referenced_locally` in superForm usage patterns (safe to ignore)
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [x] Build passes
-- [x] Tests pass (new + existing)
-
-## Handoff
-
-Phase 6 complete. All build, type, lint, and test checks pass. The codebase is fully integrated with 175 passing tests. Phase 2 enhanced features are production-ready.

plans/phase-3-advanced-features/CONTEXT.md

@@ -1,44 +0,0 @@
-# Feature Context: Phase 3 — Advanced Features
-
-## Current State
-
-Phase 7 (Integration & Polish) is complete. 222 tests across 20 test files, full build passes, `npm run check` 0 errors, `npm run lint` 0 errors. All phases 1-7 are done.
-
-### Phase 1 (Import/Export) Summary
-
-exportService, importService, admin API endpoints, ImportExportPanel UI, Zod validation schema, i18n EN/RU translations.
-
-### Phase 2 (Sparklines) Summary
-
-- History API at `/api/apps/[id]/history` — returns last 288 status records with uptime percentage
-- `SparklineChart.svelte` — inline SVG bar chart with color-coded status bars (green/red/yellow/gray)
-- `AppWidget.svelte` and `AppCard.svelte` updated to fetch and display sparklines on mount
-- `pruneOldStatuses()` in healthcheck service — deletes records >24h, caps at 288 per app
-- Hourly cleanup cron job in healthcheck scheduler
-- i18n keys: `app.uptime`, `app.history_loading` (EN/RU)
-
-### Phase 3 (User Theme Overrides) Summary
-
-- Prisma migration: added `themeMode`, `primaryHue`, `primarySaturation`, `backgroundType`, `locale` nullable fields to User model
-- Preferences API at `/api/users/me/preferences` — GET returns preferences, PATCH updates subset
-- Settings page at `/settings` with `ThemeCustomizer.svelte` — hue/saturation sliders, mode toggle (dark/light/system), background selector, locale picker, save button
-- Theme store `loadFromServer(prefs)` method applies server preferences over localStorage defaults
-- `+layout.server.ts` passes `userPreferences` in layout data; `+layout.svelte` applies them on mount
-- Header user menu includes "Settings" link
-- i18n keys: `settings.title`, `settings.theme`, `settings.primary_color`, `settings.hue`, `settings.saturation`, `settings.background`, `settings.language`, `settings.save`, `settings.saving`, `settings.saved` (EN/RU)
-
-### Phase 7 (Integration & Polish) Summary
-
-- Prisma client regenerated with user preference fields
-- Fixed lint errors: SvelteSet for reactive Set in DiscoveryPanel, `{#each}` keys in DiscoveryPanel/SparklineChart, unused vars in ThemeCustomizer/AppWidget
-- 46 new tests: exportService (4), importService (9), discoveryService (10), preferences API (11), quick-add API (8), broadcastSync (4)
-- Seed script updated: user preferences on admin/regular user, quick-add style Wiki.js app
-- Final state: 222 tests, 0 build errors, 0 type errors, 0 lint errors
-
-## Cross-Phase Dependencies
-
-- Phases 1-3 are independent (import/export, sparklines, user themes)
-- Phase 4 (PWA) is independent
-- Phase 5 (auto-discovery) is independent
-- Phase 6 (bookmarklet/sync) depends on existing API
-- Phase 7 (integration) depends on all prior phases

plans/phase-3-advanced-features/PLAN.md

@@ -1,49 +0,0 @@
-# Feature: Phase 3 — Advanced Features
-
-**Branch:** `feature/phase-3-advanced-features`
-**Base branch:** `master`
-**Created:** 2026-03-25
-**Status:** 🟡 In Progress
-**Strategy:** Big Bang
-**Mode:** Automated
-**Execution:** Orchestrator
-
-## Summary
-
-Add import/export, ping history sparklines, user theme overrides, PWA support, Docker/Traefik auto-discovery, quick-add bookmarklet, and multi-tab sync.
-
-## Build & Test Commands
-
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Type Check:** `npm run check`
-
-## Phases
-
-- [x] Phase 1: Import/Export [fullstack] → [subplan](./phase-1-import-export.md)
-- [ ] Phase 2: Ping History Sparklines [fullstack] → [subplan](./phase-2-sparklines.md)
-- [x] Phase 3: User Theme Overrides [fullstack] → [subplan](./phase-3-user-themes.md)
-- [ ] Phase 4: PWA Support [frontend] → [subplan](./phase-4-pwa.md)
-- [ ] Phase 5: Auto-Discovery Docker/Traefik [backend] → [subplan](./phase-5-autodiscovery.md)
-- [ ] Phase 6: Bookmarklet & Multi-Tab Sync [fullstack] → [subplan](./phase-6-bookmarklet-sync.md)
-- [x] Phase 7: Integration & Polish [fullstack] → [subplan](./phase-7-integration.md)
-
-## Phase Progress Log
-
-| Phase                     | Domain    | Status         | Review | Build | Committed |
-| ------------------------- | --------- | -------------- | ------ | ----- | --------- |
-| Phase 1: Import/Export    | fullstack | ✅ Done        | ⬜     | ⬜    | ⬜        |
-| Phase 2: Sparklines       | fullstack | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 3: User Themes      | fullstack | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 4: PWA              | frontend  | ⬜ Not Started | ⬜     | ⬜    | ⬜        |
-| Phase 5: Auto-Discovery   | backend   | ⬜ Not Started | ⬜     | ⬜    | ⬜        |
-| Phase 6: Bookmarklet/Sync | fullstack | ⬜ Not Started | ⬜     | ⬜    | ⬜        |
-| Phase 7: Integration      | fullstack | ✅ Complete    | ✅     | ✅    | ⬜        |
-
-## Final Review
-
-- [ ] Comprehensive code review
-- [ ] Full build passes
-- [ ] Full test suite passes
-- [ ] Merged to `master`

plans/phase-3-advanced-features/phase-1-import-export.md

@@ -1,20 +0,0 @@
-# Phase 1: Import/Export
-
-**Status:** ✅ Done
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Tasks
-
-- [x] Task 1: Create `src/lib/server/services/exportService.ts` — export all data (apps, boards, sections, widgets, groups, settings) as JSON
-- [x] Task 2: Create `src/lib/server/services/importService.ts` — import JSON with conflict resolution (skip/overwrite)
-- [x] Task 3: Create `src/routes/api/admin/export/+server.ts` — GET endpoint, returns JSON file download
-- [x] Task 4: Create `src/routes/api/admin/import/+server.ts` — POST endpoint, accepts JSON upload
-- [x] Task 5: Update admin settings page — add Import/Export section with download button and file upload
-- [x] Task 6: Create `src/lib/components/admin/ImportExportPanel.svelte` — UI with export button, file picker, preview, and import button
-- [x] Task 7: Add Zod schema for validating import data structure
-- [x] Task 8: Add i18n translations for import/export strings (EN/RU)
-
-## Handoff to Next Phase
-
-All import/export functionality implemented. Export service gathers all apps, boards (with sections/widgets), groups, and system settings into a versioned JSON structure. Import service validates with Zod, supports skip/overwrite conflict resolution, and runs in a Prisma transaction. Admin-only API endpoints with Content-Disposition for file download. UI panel with file upload, JSON preview, mode selector, and status feedback.

plans/phase-3-advanced-features/phase-2-sparklines.md

@@ -1,20 +0,0 @@
-# Phase 2: Ping History Sparklines
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Tasks
-
-- [x] Task 1: Create `src/routes/api/apps/[id]/history/+server.ts` — GET last 24h of healthcheck results
-- [x] Task 2: Create `src/lib/components/app/SparklineChart.svelte` — tiny inline SVG sparkline (green=up, red=down)
-- [x] Task 3: Update `src/lib/components/widget/AppWidget.svelte` — show sparkline below status badge
-- [x] Task 4: Update `src/lib/components/app/AppCard.svelte` — show sparkline on app cards
-- [x] Task 5: Calculate and display uptime percentage (last 24h)
-- [x] Task 6: Update healthcheck service to retain last 288 records per app (24h at 5min intervals)
-- [x] Task 7: Add cleanup job to prune old AppStatus records beyond retention period
-- [x] Task 8: Add i18n translations (EN/RU)
-
-## Handoff to Next Phase
-
-All sparkline features implemented. History API returns last 288 records with uptime percentage. SparklineChart renders color-coded bars (green/red/yellow/gray). Cleanup job prunes records older than 24h hourly. Both AppWidget and AppCard fetch and display sparklines with uptime percentage on mount.

plans/phase-3-advanced-features/phase-3-user-themes.md

@@ -1,21 +0,0 @@
-# Phase 3: User Theme Overrides
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Tasks
-
-- [x] Task 1: Add `themeMode`, `primaryHue`, `primarySaturation`, `backgroundType`, `locale` fields to User model (Prisma migration)
-- [x] Task 2: Create `src/routes/api/users/me/preferences/+server.ts` — GET/PATCH user preferences
-- [x] Task 3: Create `src/routes/settings/+page.server.ts` — user settings page data
-- [x] Task 4: Create `src/routes/settings/+page.svelte` — user settings page with theme customization
-- [x] Task 5: Create `src/lib/components/settings/ThemeCustomizer.svelte` — HSL color picker, background selector, mode toggle
-- [x] Task 6: Update theme store to load user preferences from server on login
-- [x] Task 7: Update `+layout.server.ts` to pass user preferences
-- [x] Task 8: Add user settings link to header user menu
-- [x] Task 9: Add i18n translations (EN/RU)
-
-## Handoff to Next Phase
-
-Phase 3 (User Theme Overrides) complete. Added nullable preference fields to User model, preferences API (GET/PATCH), settings page with ThemeCustomizer component (hue/saturation sliders, mode toggle, background selector, locale picker), server-side preference loading in layout, and Settings link in Header user menu. i18n translations added for EN and RU.

plans/phase-3-advanced-features/phase-4-pwa.md

@@ -1,18 +0,0 @@
-# Phase 4: PWA Support
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Tasks
-
-- [ ] Task 1: Create `static/manifest.json` — web app manifest with name, icons, theme color, display: standalone
-- [ ] Task 2: Create app icons in `static/` — 192x192 and 512x512 PNG (simple grid icon)
-- [ ] Task 3: Create `src/service-worker.ts` — SvelteKit service worker with cache-first for static assets, network-first for API
-- [ ] Task 4: Update `src/app.html` — add manifest link, theme-color meta, apple-mobile-web-app meta tags
-- [ ] Task 5: Create offline fallback page — show when no network and no cache
-- [ ] Task 6: Add install prompt UI — detect `beforeinstallprompt` event, show install banner
-
-## Handoff to Next Phase
-
-<!-- Filled in after completion -->

plans/phase-3-advanced-features/phase-5-autodiscovery.md

@@ -1,26 +0,0 @@
-# Phase 5: Auto-Discovery (Docker/Traefik)
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/services/discoveryService.ts` — Docker socket scanning and Traefik API parsing
-- [ ] Task 2: Create `src/routes/api/admin/discover/+server.ts` — POST triggers discovery scan, returns found services
-- [ ] Task 3: Create `src/routes/api/admin/discover/approve/+server.ts` — POST approves discovered apps (creates them)
-- [ ] Task 4: Create `src/lib/components/admin/DiscoveryPanel.svelte` — UI to trigger scan, review results, approve/reject
-- [ ] Task 5: Add discovery settings to SystemSettings (Docker socket path, Traefik API URL, auto-scan toggle)
-- [ ] Task 6: Update admin settings page with discovery configuration section
-- [ ] Task 7: Add env vars: DOCKER_SOCKET_PATH, TRAEFIK_API_URL
-- [ ] Task 8: Add i18n translations (EN/RU)
-
-## Notes
-
-- Docker discovery: read from `/var/run/docker.sock` (or configured path), list containers, extract labels for name/URL
-- Traefik discovery: query Traefik API `/api/http/routers` and `/api/http/services`
-- Both are optional — gracefully handle when Docker socket or Traefik API is unavailable
-
-## Handoff to Next Phase
-
-<!-- Filled in after completion -->

plans/phase-3-advanced-features/phase-6-bookmarklet-sync.md

@@ -1,24 +0,0 @@
-# Phase 6: Quick-Add Bookmarklet & Multi-Tab Sync
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Tasks
-
-- [ ] Task 1: Create `src/routes/api/apps/quick-add/+server.ts` — POST endpoint that accepts URL + title, creates app with defaults
-- [ ] Task 2: Create `src/lib/components/admin/BookmarkletGenerator.svelte` — generates bookmarklet JS code with user's API token
-- [ ] Task 3: Add bookmarklet section to user settings page
-- [ ] Task 4: Create `src/lib/utils/broadcastSync.ts` — BroadcastChannel wrapper for cross-tab sync
-- [ ] Task 5: Sync theme changes across tabs (dark/light toggle, primary color)
-- [ ] Task 6: Sync board changes across tabs (new boards appear in sidebar)
-- [ ] Task 7: Add i18n translations (EN/RU)
-
-## Notes
-
-- Bookmarklet: `javascript:void(fetch('ORIGIN/api/apps/quick-add',{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer TOKEN'},body:JSON.stringify({url:location.href,name:document.title})}))`
-- BroadcastChannel: create channel 'wal-sync', post messages on theme/board changes, listen in layout
-
-## Handoff to Next Phase
-
-<!-- Filled in after completion -->

plans/phase-3-advanced-features/phase-7-integration.md

@@ -1,31 +0,0 @@
-# Phase 7: Integration & Polish
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Tasks
-
-- [x] Task 1: Fix all TypeScript/build errors
-- [x] Task 2: Verify `npm run build` succeeds
-- [x] Task 3: Verify `npm run check` passes (0 errors, warnings only)
-- [x] Task 4: Verify `npm run lint` passes (0 errors)
-- [x] Task 5: Write tests for export/import services
-- [x] Task 6: Write tests for discovery service (mocked Docker/Traefik)
-- [x] Task 7: Write tests for user preferences API
-- [x] Task 8: Write tests for quick-add API
-- [x] Task 9: Write tests for broadcastSync utility
-- [x] Task 10: Update seed script with sample data (user preferences, quick-add style app)
-- [x] Task 11: Run Prisma generate (migrations already applied)
-- [x] Task 12: Verify all 222 tests pass across 20 test files
-
-## Changes Made
-
-- `prisma generate` — regenerated client with user preference fields
-- Fixed lint: SvelteSet for reactive Set in DiscoveryPanel, `{#each}` keys, unused vars
-- New tests: exportService (4), importService (9), discoveryService (10), preferences API (11), quick-add API (8), broadcastSync (4) = 46 new tests
-- Updated seed.ts: user preferences on admin/regular user, quick-add style Wiki.js app
-
-## Handoff
-
-<!-- Final phase -->

plans/phase-4-7-full-expansion/CONTEXT.md

@@ -1,105 +0,0 @@
-# Feature Context: Phases 4–7 — Full Feature Expansion
-
-## Configuration
-
-- **Development mode:** Automated
-- **Execution mode:** Orchestrator
-- **Strategy:** Big Bang
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Type Check:** `npm run check`
-- **Dev server:** `npm run dev` (port: 5181)
-
-## Current State
-
-All 8 phases are complete. Phase 8 (Integration & Polish) fixed all build, type, lint, and test errors. Build, check, lint, and tests all pass.
-All 10 new Prisma models created, existing models extended, migration applied, Prisma client regenerated.
-Widget types now include 13 values: app, bookmark, note, embed, status, clock, system_stats, rss, calendar, markdown, metric, link_group, camera.
-New constants added: CardSize, NotificationType, NotificationEvent, ApiTokenScope, AuditAction, BackgroundType.
-5 new type files created, 4 existing type files extended, validators.ts has 19 new Zod schemas.
-6 new widget services created: weatherService, systemStatsService, rssFeedService, calendarService, metricService, cameraService.
-7 new API routes under /api/widgets/: weather, system-stats, rss, calendar, metric, camera, data (aggregation).
-boardService updated with widget config validation on create/update and new theme/visual field passthrough.
-Theme system uses HSL CSS variables with dark/light/system modes.
-Auth system: local + OAuth with JWT cookies + API token bearer auth.
-7 new functional services created: favoriteService, recentAppsService, uptimeService, notificationService, tagService, apiTokenService, auditLogService.
-16 new API routes for: favorites, recent-apps, uptime, notifications (channels, test), tags (app-tags), app-links, tokens, admin audit-log.
-appService extended with multi-URL link management and eager-loaded links.
-Healthcheck scheduler now triggers notifications on status transitions and prunes audit logs daily.
-Audit logging integrated into user CRUD, app CRUD, board CRUD, settings, import, and export routes.
-8 new widget UI components created: ClockWeatherWidget, SystemStatsWidget, RssFeedWidget, CalendarWidget, MarkdownWidget, MetricWidget, LinkGroupWidget, CameraStreamWidget.
-WidgetRenderer routes all 13 widget types to their components. WidgetCreationForm has config forms for all 13 types.
-WidgetGrid updated with new full-width types (system_stats, rss, calendar, markdown, camera).
-Phase 6 functional frontend complete: 2 new stores (favorites, notifications), 22 new/modified component files, 6 new routes.
-FavoritesBar with drag-and-drop reordering, RecentAppsSection with time-ago display, Status page at /status with uptime summary.
-NotificationBell in header with unread badge and 60s polling, NotificationChannelForm with Discord/Slack/Telegram/HTTP support.
-TagManager admin CRUD, TagBadge component, TagFilter for board filtering.
-AppWidget updated with expandable multi-URL links, context menu for favorites, and click recording.
-API Token management at /settings/api-tokens with create/revoke form actions.
-AuditLogTable with filters, expandable JSON details, CSV export, and pagination.
-Phase 7 quality-of-life complete: onboarding wizard (5-step overlay with admin creation, auth mode, theme, board setup), URL preview (test connection with favicon/title extraction), board templates (4 builtins + user CRUD + import/export), keyboard shortcuts (j/k nav, 1-9 boards, ?-overlay, f-favorites, e-edit).
-New services: onboardingService, templateService. New stores: keyboard.svelte.ts. 3 new API route groups: /api/onboarding, /api/apps/preview, /api/templates.
-
-## Temporary Workarounds
-
-(none yet)
-
-## Cross-Phase Dependencies
-
-- Phase 1 (schema) must complete before Phase 2 (widget backend) and Phase 5 (functional backend)
-- Phase 2 (widget backend) must complete before Phase 3 (widget frontend)
-- Phase 5 (functional backend) must complete before Phase 6 (functional frontend)
-- Phase 4 (visual) is independent — can run parallel with Phase 2 or 3
-- Phase 7 (QoL) depends on Phases 5+6 for some features (onboarding references tags, templates)
-- Phase 8 (integration) depends on all prior phases
-
-## Deferred Work
-
-(none yet)
-
-## Failed Approaches
-
-(none yet)
-
-## Review Findings Log
-
-(none yet)
-
-## Visual Decisions (Phase 4)
-
-- Glassmorphism uses `color-mix(in srgb, ...)` for semi-transparent backgrounds (works across light/dark modes)
-- Card style classes (`.card-solid`, `.card-glass`, `.card-outline`) are global CSS in `app.css`, applied via `card-${theme.cardStyle}` derived class
-- Board theme overrides apply at `:root` level (not scoped) for maximum CSS variable reach; cleanup restores global store values
-- AnimatedStatusRing uses SVG `stroke-dasharray`/`stroke-dashoffset` animations, scales via `size` prop
-- Card size grid columns: compact=6col, medium=4col, large=3col (responsive breakpoints)
-- Custom CSS sanitization is regex-based (strips script tags, javascript: URLs, expression(), @import, behavior:, -moz-binding)
-- `updateBoardSchema` backgroundType uses inline enum `['mesh', 'particles', 'aurora', 'wallpaper', 'none']` instead of BackgroundType constant
-
-## Phase Execution Log
-
-| Phase   | Agent Used        | Test Writer           | Parallel | Notes                                                                                                                            |
-| ------- | ----------------- | --------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| Phase 1 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | Schema & types only                                                                                                              |
-| Phase 2 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 6 services, 7 API routes, boardService updated                                                                                   |
-| Phase 5 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 7 services, 16 API routes, appService/healthcheckScheduler/hooks.server/authenticate extended, audit logging integrated          |
-| Phase 3 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 8 widget components, WidgetRenderer + WidgetCreationForm + WidgetGrid updated                                                    |
-| Phase 4 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 6 visual features, fixes to server action + validator + theme restore                                                            |
-| Phase 6 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 8 functional frontend features: favorites, recent apps, status page, notifications, tags, multi-URL cards, API tokens, audit log |
-| Phase 7 | phase-implementer | ⏭️ Skipped (Big Bang) | —        | 4 QoL features: onboarding wizard, URL preview, board templates, keyboard shortcuts                                              |
-
-## Environment & Runtime Notes
-
-- SQLite database at file:/app/data/launcher.db
-- Prisma ORM with cuid IDs
-- Svelte 5 runes mode ($state, $derived, $props)
-- Tailwind CSS v4 with @theme inline in app.css
-
-## Implementation Notes
-
-- Existing widget types defined in WidgetType constant (src/lib/utils/constants.ts)
-- Widget configs stored as JSON string in Widget.config column
-- All Zod schemas in src/lib/utils/validators.ts
-- Type definitions in src/lib/types/\*.ts
-- API routes use consistent envelope: { success, data, error, meta }
-- Services in src/lib/server/services/\*.ts — no business logic in routes

plans/phase-4-7-full-expansion/PLAN.md

@@ -1,65 +0,0 @@
-# Feature: Phases 4–7 — Full Feature Expansion
-
-**Branch:** `feature/phase-4-7-full-expansion`
-**Base branch:** `master`
-**Created:** 2026-03-25
-**Status:** 🟡 In Progress
-**Strategy:** Big Bang
-**Mode:** Automated
-**Execution:** Orchestrator
-
-## Summary
-
-Implement all remaining features from the project roadmap: 8 new widget types, 6 visual/styling enhancements, 8 functional features, and 4 quality-of-life improvements — 26 features total across 8 implementation phases.
-
-## Build & Test Commands
-
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Type Check:** `npm run check`
-
-## Tech Stack
-
-- **Framework:** SvelteKit (Svelte 5 runes mode) + TypeScript strict
-- **UI:** Tailwind CSS v4 + shadcn-svelte (Bits UI) + Lucide Svelte + Simple Icons
-- **Data:** Prisma ORM + SQLite + Superforms + Zod
-- **Auth:** bcrypt + JWT (HTTP-only cookies) + refresh token rotation
-- **Background Jobs:** node-cron
-- **DevOps:** Docker (multi-stage) + docker-compose + Gitea Actions
-
-## Phases
-
-- [ ] Phase 1: Database Schema & Type Foundation [backend] → [subplan](./phase-1-schema-types.md)
-- [ ] Phase 2: New Widget Services & APIs [backend] → [subplan](./phase-2-widget-backend.md)
-- [ ] Phase 3: New Widget Components [frontend] → [subplan](./phase-3-widget-frontend.md)
-- [ ] Phase 4: Visual & Styling Enhancements [frontend] → [subplan](./phase-4-visual-styling.md)
-- [ ] Phase 5: Functional Features — Backend [backend] → [subplan](./phase-5-functional-backend.md)
-- [ ] Phase 6: Functional Features — Frontend [frontend] → [subplan](./phase-6-functional-frontend.md)
-- [ ] Phase 7: Quality of Life [fullstack] → [subplan](./phase-7-quality-of-life.md)
-- [ ] Phase 8: Integration & Polish [fullstack] → [subplan](./phase-8-integration-polish.md)
-
-## Phase Progress Log
-
-| Phase                         | Domain    | Status         | Review | Build | Committed |
-| ----------------------------- | --------- | -------------- | ------ | ----- | --------- |
-| Phase 1: Schema & Types       | backend   | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 2: Widget Backend       | backend   | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 3: Widget Frontend      | frontend  | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 4: Visual & Styling     | frontend  | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 5: Functional Backend   | backend   | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 6: Functional Frontend  | frontend  | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 7: Quality of Life      | fullstack | ✅ Complete    | ⬜     | ⬜    | ⬜        |
-| Phase 8: Integration & Polish | fullstack | ✅ Complete    | ⬜     | ✅    | ⬜        |
-
-## Parallelizable Phases
-
-- Phases 2 & 4 (backend widget services + visual frontend) — no shared files
-- Phases 5 & 3 (functional backend + widget frontend) — minimal overlap
-
-## Final Review
-
-- [ ] Comprehensive code review
-- [ ] Full build passes
-- [ ] Full test suite passes
-- [ ] Merged to `master`

plans/phase-4-7-full-expansion/phase-1-schema-types.md

@@ -1,155 +0,0 @@
-# Phase 1: Database Schema & Type Foundation
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-
-Define all new database models, extend existing models, add new widget type constants, create TypeScript type definitions, and write Zod validation schemas for every new entity across Phases 4–7.
-
-## Tasks
-
-### 1.1 Extend Prisma schema with new models
-
-- [x] Add `Tag` model (id, name, color, createdAt)
-- [x] Add `AppTag` junction model (appId, tagId)
-- [x] Add `AppLink` model (id, appId, label, url, icon, order)
-- [x] Add `UserFavorite` model (id, userId, appId, order)
-- [x] Add `AppClick` model (id, userId, appId, clickedAt)
-- [x] Add `NotificationChannel` model (id, userId, type, config JSON, enabled, createdAt)
-- [x] Add `Notification` model (id, userId, appId, event, message, sentAt, readAt)
-- [x] Add `ApiToken` model (id, userId, name, tokenHash, scope, lastUsedAt, expiresAt, createdAt)
-- [x] Add `AuditLog` model (id, userId, action, entityType, entityId, details JSON, createdAt)
-- [x] Add `BoardTemplate` model (id, name, description, icon, config JSON, isBuiltin, createdById, createdAt)
-
-### 1.2 Extend existing Prisma models
-
-- [x] `Board`: add `themeHue` (Int?), `themeSaturation` (Int?), `backgroundType` (String?), `cardSize` (String?), `wallpaperUrl` (String?), `wallpaperBlur` (Int?), `wallpaperOverlay` (Float?), `customCss` (String?)
-- [x] `Section`: add `cardSize` (String?)
-- [x] `User`: add `onboardingComplete` (Boolean, default false), `trackRecentApps` (Boolean, default true)
-- [x] `SystemSettings`: add `customCss` (String?), `onboardingComplete` (Boolean, default false)
-
-### 1.3 Add relations to existing models
-
-- [x] `App` → `tags` (via AppTag), `links` (AppLink[]), `clicks` (AppClick[]), `notifications` (Notification[])
-- [x] `User` → `favorites` (UserFavorite[]), `clicks` (AppClick[]), `notificationChannels` (NotificationChannel[]), `notifications` (Notification[]), `apiTokens` (ApiToken[]), `auditLogs` (AuditLog[]), `boardTemplates` (BoardTemplate[])
-- [x] `Board` → (themeHue, themeSaturation etc. are scalar fields, no new relations needed)
-
-### 1.4 Generate and apply Prisma migration
-
-- [x] Run `npx prisma migrate dev --name phase4-7-schema` to create migration
-- [x] Run `npx prisma generate` to update Prisma client
-
-### 1.5 Extend widget type constants
-
-- [x] Add to `WidgetType` in `src/lib/utils/constants.ts`: `CLOCK`, `SYSTEM_STATS`, `RSS`, `CALENDAR`, `MARKDOWN`, `METRIC`, `LINK_GROUP`, `CAMERA`
-- [x] Add `CardSize` constant: `COMPACT`, `MEDIUM`, `LARGE`
-- [x] Add `NotificationType` constant: `DISCORD`, `SLACK`, `TELEGRAM`, `HTTP`
-- [x] Add `NotificationEvent` constant: `APP_ONLINE`, `APP_OFFLINE`, `APP_DEGRADED`
-- [x] Add `ApiTokenScope` constant: `READ`, `WRITE`, `ADMIN`
-- [x] Add `AuditAction` constant: `USER_CREATED`, `USER_DELETED`, `USER_UPDATED`, `BOARD_CREATED`, `BOARD_DELETED`, `APP_CREATED`, `APP_DELETED`, `SETTINGS_UPDATED`, `IMPORT`, `EXPORT`
-- [x] Add `BackgroundType` extension if needed (wallpaper type)
-
-### 1.6 Create TypeScript type definitions
-
-- [x] Create `src/lib/types/tag.ts` — Tag, AppTag, CreateTagInput, UpdateTagInput
-- [x] Create `src/lib/types/notification.ts` — NotificationChannel, Notification, CreateChannelInput, NotificationPreferences
-- [x] Create `src/lib/types/apiToken.ts` — ApiToken, CreateTokenInput, TokenScope
-- [x] Create `src/lib/types/auditLog.ts` — AuditLog, AuditAction, CreateAuditLogInput
-- [x] Create `src/lib/types/template.ts` — BoardTemplate, CreateTemplateInput
-- [x] Extend `src/lib/types/widget.ts` — add config interfaces for all 8 new widget types:
-  - ClockWeatherWidgetConfig: { timezone, showWeather, latitude?, longitude?, clockStyle }
-  - SystemStatsWidgetConfig: { sourceUrl, sourceType, metrics[], refreshInterval }
-  - RssWidgetConfig: { feedUrl, maxItems, showSummary }
-  - CalendarWidgetConfig: { icalUrls: Array<{url, color, label}>, daysAhead }
-  - MarkdownWidgetConfig: { content, syntaxTheme }
-  - MetricWidgetConfig: { label, source, value?, url?, jsonPath?, query?, unit?, refreshInterval }
-  - LinkGroupWidgetConfig: { links: Array<{label, url, icon?}>, collapsible }
-  - CameraWidgetConfig: { streamUrl, type, refreshInterval, aspectRatio }
-- [x] Extend `src/lib/types/app.ts` — add AppLink type, extend App type with links[] and tags[]
-- [x] Extend `src/lib/types/user.ts` — add UserFavorite, AppClick, extend User with new fields
-- [x] Extend `src/lib/types/board.ts` — add theme/visual fields to Board type
-
-### 1.7 Create Zod validation schemas
-
-- [x] Add widget config schemas in `src/lib/utils/validators.ts` for all 8 new widget types
-- [x] Add `createTagSchema`, `updateTagSchema`
-- [x] Add `createAppLinkSchema`, `updateAppLinkSchema`
-- [x] Add `createNotificationChannelSchema`, `updateNotificationChannelSchema`
-- [x] Add `createApiTokenSchema`
-- [x] Add `createBoardTemplateSchema`
-- [x] Add `auditLogQuerySchema` (filters: action, entityType, dateRange)
-- [x] Update `createWidgetSchema` to accept new widget type values
-- [x] Update `updateBoardSchema` to accept new theme/visual fields
-- [x] Update `updateSectionSchema` to accept cardSize
-- [x] Update `updateUserSchema` to accept onboardingComplete, trackRecentApps
-
-## Files to Modify/Create
-
-- `prisma/schema.prisma` — extend with all new models and fields
-- `src/lib/utils/constants.ts` — new constant objects
-- `src/lib/types/tag.ts` — new file
-- `src/lib/types/notification.ts` — new file
-- `src/lib/types/apiToken.ts` — new file
-- `src/lib/types/auditLog.ts` — new file
-- `src/lib/types/template.ts` — new file
-- `src/lib/types/widget.ts` — extend with 8 new config interfaces
-- `src/lib/types/app.ts` — extend with AppLink, tags
-- `src/lib/types/user.ts` — extend with favorites, clicks, new fields
-- `src/lib/types/board.ts` — extend with visual/theme fields
-- `src/lib/utils/validators.ts` — all new Zod schemas
-
-## Acceptance Criteria
-
-- All new Prisma models have correct fields, types, relations, and indexes
-- Migration applies cleanly to a fresh SQLite database
-- Prisma client generates without errors
-- All TypeScript types use `readonly` for immutability
-- All Zod schemas validate correct inputs and reject invalid ones
-- New widget types are added to WidgetType constant
-- Existing code is not broken by schema additions (additive changes only)
-
-## Notes
-
-- All new fields on existing models must be optional or have defaults to avoid breaking existing data
-- Use `cuid()` for all new model IDs consistent with existing schema
-- Store JSON configs as String in Prisma (SQLite limitation), parse with Zod on read
-- Keep immutable patterns — all type interfaces use `readonly`
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- Extended Prisma schema with 10 new models: Tag, AppTag, AppLink, UserFavorite, AppClick, NotificationChannel, Notification, ApiToken, AuditLog, BoardTemplate
-- Extended existing models (User, Board, Section, SystemSettings) with new fields
-- Added all relations between new and existing models
-- Migration `20260325092024_phase4_7_schema` created and applied successfully
-- Prisma client regenerated
-- Added 7 new constant objects: CardSize, NotificationType, NotificationEvent, ApiTokenScope, AuditAction, BackgroundType, plus 8 new widget types
-- Created 5 new type files: tag.ts, notification.ts, apiToken.ts, auditLog.ts, template.ts
-- Extended 4 existing type files: widget.ts (8 new config interfaces), app.ts (AppLink + AppWithRelations), user.ts (UserFavorite, AppClick, UserWithPreferences), board.ts (theme/visual fields)
-- Added 19 new Zod schemas and updated 4 existing schemas in validators.ts
-
-### What the next phase needs to know
-
-- All new Prisma models are available via the generated client
-- Widget type enum in constants.ts now has 13 values (5 original + 8 new)
-- All widget config Zod schemas follow the naming pattern `{type}WidgetConfigSchema`
-- New entity schemas follow the naming pattern `create{Entity}Schema` / `update{Entity}Schema`
-- `auditLogQuerySchema` supports pagination (page, limit) and date filtering (dateFrom, dateTo)
-- `App` model still has legacy `tags` string field; the new `AppTag` junction table provides structured tagging
-- All changes are additive — no breaking changes to existing API contracts
-
-### Potential concerns
-
-- The legacy `App.tags` (comma-separated string) field still exists alongside the new `AppTag` junction. Later phases should decide whether to migrate data and deprecate the string field.
-- `updateSystemSettingsSchema` was extended with `customCss` and `onboardingComplete` — existing settings API route handlers will need to pass these through.

plans/phase-4-7-full-expansion/phase-2-widget-backend.md

@@ -1,152 +0,0 @@
-# Phase 2: New Widget Services & APIs
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-
-Implement backend services and API routes for all 8 new widget types. Each widget type that fetches external data needs a dedicated service for data fetching, caching, and error handling.
-
-## Tasks
-
-### 2.1 Clock/Weather service
-
-- [x] Create `src/lib/server/services/weatherService.ts`
-  - Fetch weather from OpenMeteo API (no API key required): `https://api.open-meteo.com/v1/forecast`
-  - Accept latitude/longitude, return current temp, condition, icon
-  - Cache responses for 30 minutes (in-memory Map with TTL)
-  - Graceful fallback when API is unreachable
-- [x] Create `src/routes/api/widgets/weather/+server.ts` — GET endpoint with lat/lng query params
-
-### 2.2 System Stats service
-
-- [x] Create `src/lib/server/services/systemStatsService.ts`
-  - Adapter pattern: `TrueNasAdapter`, `GlancesAdapter`, `CustomAdapter`
-  - Each adapter fetches metrics (CPU, RAM, disk) from its source URL
-  - Return normalized `{ metric: string, value: number, unit: string }[]`
-  - Configurable refresh interval, in-memory cache per source URL
-- [x] Create `src/routes/api/widgets/system-stats/+server.ts` — GET with sourceUrl, sourceType params
-
-### 2.3 RSS/Feed service
-
-- [x] Create `src/lib/server/services/rssFeedService.ts`
-  - Fetch and parse RSS/Atom feeds (use built-in XML parsing or lightweight lib)
-  - Return `{ title, link, pubDate, summary }[]` limited to maxItems
-  - Cache feeds for 15 minutes per URL
-  - Handle malformed feeds gracefully
-- [x] Create `src/routes/api/widgets/rss/+server.ts` — GET with feedUrl, maxItems params
-
-### 2.4 Calendar service
-
-- [x] Create `src/lib/server/services/calendarService.ts`
-  - Fetch and parse iCal (.ics) files from URLs
-  - Extract events within daysAhead range
-  - Return `{ summary, start, end, location?, calendarLabel, calendarColor }[]`
-  - Cache per URL for 30 minutes
-  - Handle multiple calendar URLs, merge and sort by start time
-- [x] Create `src/routes/api/widgets/calendar/+server.ts` — POST with icalUrls[], daysAhead
-
-### 2.5 Metric/Counter service
-
-- [x] Create `src/lib/server/services/metricService.ts`
-  - `fetchHttpMetric(url, jsonPath)` — fetch JSON endpoint, extract value via JSONPath
-  - `fetchPrometheusMetric(url, query)` — query Prometheus API, extract instant value
-  - `getStaticMetric(value)` — passthrough for static values
-  - Store previous value for trend calculation (up/down/flat)
-  - Cache per source for configurable interval
-- [x] Create `src/routes/api/widgets/metric/+server.ts` — GET with source type params
-
-### 2.6 Camera/Stream proxy
-
-- [x] Create `src/lib/server/services/cameraService.ts`
-  - `fetchSnapshot(url)` — proxy HTTP request to camera URL, return image buffer
-  - Validate URL is http/https only
-  - Timeout after 10s
-  - Rate limit: max 1 request per 5s per URL
-- [x] Create `src/routes/api/widgets/camera/+server.ts` — GET with streamUrl param, returns proxied image
-
-### 2.7 Widget data aggregation endpoint
-
-- [x] Create `src/routes/api/widgets/data/+server.ts` — generic endpoint that routes to the correct service based on widget type and config
-  - POST with `{ widgetType, config }` body
-  - Routes to weatherService, systemStatsService, etc. based on type
-  - Returns unified response format
-
-### 2.8 Update existing widget service
-
-- [x] Update `src/lib/server/services/boardService.ts` to handle new widget types in create/update operations
-- [x] Ensure new widget type configs are validated with the correct Zod schema on create/update
-
-## Files to Modify/Create
-
-- `src/lib/server/services/weatherService.ts` — new
-- `src/lib/server/services/systemStatsService.ts` — new
-- `src/lib/server/services/rssFeedService.ts` — new
-- `src/lib/server/services/calendarService.ts` — new
-- `src/lib/server/services/metricService.ts` — new
-- `src/lib/server/services/cameraService.ts` — new
-- `src/routes/api/widgets/weather/+server.ts` — new
-- `src/routes/api/widgets/system-stats/+server.ts` — new
-- `src/routes/api/widgets/rss/+server.ts` — new
-- `src/routes/api/widgets/calendar/+server.ts` — new
-- `src/routes/api/widgets/metric/+server.ts` — new
-- `src/routes/api/widgets/camera/+server.ts` — new
-- `src/routes/api/widgets/data/+server.ts` — new
-- `src/lib/server/services/boardService.ts` — modify
-
-## Acceptance Criteria
-
-- Each service handles errors gracefully (network failures, malformed responses, timeouts)
-- In-memory caching prevents excessive external API calls
-- All API routes use consistent envelope response format
-- All user inputs validated with Zod schemas from Phase 1
-- Camera proxy validates URLs and prevents SSRF (allowlist http/https, no private IPs)
-- Services are stateless (cache is ephemeral, no DB state needed for widget data)
-
-## Notes
-
-- OpenMeteo API is free, no key needed: `https://api.open-meteo.com/v1/forecast?latitude=X&longitude=Y&current_weather=true`
-- For RSS parsing, consider using a lightweight approach (DOMParser or regex) to avoid adding a heavy dependency. If needed, `fast-xml-parser` is a good lightweight option.
-- iCal parsing: use `node-ical` or hand-parse VEVENT blocks
-- JSONPath extraction: use simple dot-notation traversal rather than a full JSONPath library
-- SSRF protection for camera proxy: reject private IP ranges (10.x, 172.16-31.x, 192.168.x, 127.x, ::1)
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- Created 6 new backend services: weatherService, systemStatsService, rssFeedService, calendarService, metricService, cameraService
-- Created 7 new API routes under `/api/widgets/`: weather, system-stats, rss, calendar, metric, camera, data (aggregation)
-- Updated boardService to validate widget configs against Zod schemas on create/update
-- Updated boardService to pass through new theme/visual fields (themeHue, themeSaturation, backgroundType, cardSize, wallpaperUrl, wallpaperBlur, wallpaperOverlay, customCss) and section cardSize
-- All services use in-memory caching with TTL (Map + expiry timestamps)
-- Camera proxy includes SSRF protection (blocks private IPs, localhost, link-local) and rate limiting (1 req/5s per URL)
-- RSS service uses lightweight regex-based XML parsing (no external dependency)
-- Calendar service uses hand-parsed VEVENT blocks from iCal text (no external dependency)
-- Metric service supports dot-notation JSONPath extraction (no external dependency)
-
-### What the next phase needs to know
-
-- All widget data endpoints follow the pattern: `/api/widgets/{type}` with GET (or POST for calendar)
-- The aggregation endpoint `/api/widgets/data` accepts POST with `{ widgetType, config }` and routes to the correct service
-- Camera endpoint returns raw image binary (not JSON envelope) for direct `<img>` src usage
-- Markdown and LinkGroup widget types return no-op from the aggregation endpoint (they are client-side only)
-- Clock widget without weather enabled also returns no-op (time is client-side)
-- All services export a `clearCache()` function for testing/manual refresh
-- The `validateStreamUrl()` function on cameraService is exported for reuse (used by aggregation endpoint)
-
-### Potential concerns
-
-- RSS/Atom XML parsing uses regex, which handles common feeds but may fail on exotic feed formats. If issues arise, consider adding `fast-xml-parser` as a dependency.
-- iCal parsing handles standard VEVENT blocks but does not support RRULE (recurring events). A future enhancement could add recurrence expansion.
-- SSRF protection checks IP format only at the URL level — DNS rebinding attacks could bypass hostname checks. For production hardening, consider resolving DNS before connecting.
-- System stats adapters assume specific API shapes for Glances and Prometheus. Custom adapter is a generic JSON fallback.

plans/phase-4-7-full-expansion/phase-3-widget-frontend.md

@@ -1,178 +0,0 @@
-# Phase 3: New Widget Components
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-
-Build all 8 new widget UI components with polished design, integrate them into the existing WidgetRenderer and WidgetCreationForm, and ensure they work with the drag-and-drop system.
-
-## Tasks
-
-### 3.1 Clock/Weather Widget
-
-- [x] Create `src/lib/components/widget/ClockWeatherWidget.svelte`
-  - Digital clock: large time display with configurable timezone, date below
-  - Analog clock: SVG clock face with hour/minute/second hands, smooth animation via $effect
-  - Weather section (optional): current temp, condition icon (Lucide), location label
-  - Fetches weather from `/api/widgets/weather` on mount + interval
-  - Config-driven: clockStyle (analog|digital), showWeather, timezone
-
-### 3.2 System Stats Widget
-
-- [x] Create `src/lib/components/widget/SystemStatsWidget.svelte`
-  - Donut/gauge charts for each metric (CPU, RAM, disk) using SVG
-  - Threshold coloring: green (<60%), yellow (60-85%), red (>85%) via CSS classes
-  - Auto-refresh at configurable interval
-  - Fetches from `/api/widgets/system-stats`
-  - Compact layout: metrics side-by-side with labels below
-
-### 3.3 RSS/Feed Widget
-
-- [x] Create `src/lib/components/widget/RssFeedWidget.svelte`
-  - List of feed items: title + relative date
-  - Expandable summary on click (slide transition)
-  - Link icon to open in new tab
-  - Fetches from `/api/widgets/rss`
-  - Loading skeleton while fetching
-  - Empty state when feed has no items
-
-### 3.4 Calendar Widget
-
-- [x] Create `src/lib/components/widget/CalendarWidget.svelte`
-  - Compact event list grouped by day (Today, Tomorrow, then dates)
-  - Color dot per calendar source
-  - Time range display (or "All day")
-  - Location shown if available
-  - Fetches from `/api/widgets/calendar`
-  - Empty state: "No upcoming events"
-
-### 3.5 Markdown Widget
-
-- [x] Create `src/lib/components/widget/MarkdownWidget.svelte`
-  - Rendered markdown view (default) using `marked` + `isomorphic-dompurify`
-  - Edit mode: split-pane with textarea left, preview right
-  - Syntax highlighting for code blocks (use existing `marked` setup or add `highlight.js`)
-  - Toggle edit/view mode button
-  - Save updates config via API
-  - Proper typography styling for headers, lists, code, blockquotes
-
-### 3.6 Metric/Counter Widget
-
-- [x] Create `src/lib/components/widget/MetricWidget.svelte`
-  - Large centered number with unit suffix
-  - Label below the number
-  - Trend arrow: up (green), down (red), flat (gray) — SVG arrow icon
-  - Auto-refresh at interval
-  - Fetches from `/api/widgets/metric`
-  - Number formatting (locale-aware, abbreviate large numbers)
-
-### 3.7 Link Group Widget
-
-- [x] Create `src/lib/components/widget/LinkGroupWidget.svelte`
-  - Compact vertical list of links with optional icons
-  - Each link: icon (Lucide or none) + label, opens in new tab
-  - Collapsible header if config.collapsible is true (slide transition)
-  - Hover highlight on each link row
-  - No external data fetching — config-driven only
-
-### 3.8 Camera/Stream Widget
-
-- [x] Create `src/lib/components/widget/CameraStreamWidget.svelte`
-  - Snapshot mode: `<img>` tag refreshed at interval via `/api/widgets/camera`
-  - MJPEG mode: direct `<img src={streamUrl}>` (continuous stream)
-  - HLS mode: `<video>` tag with HLS.js (lazy-loaded if needed)
-  - Click opens fullscreen modal (use Bits UI Dialog)
-  - Aspect ratio from config (default 16:9)
-  - Loading state and error fallback image
-
-### 3.9 Update WidgetRenderer
-
-- [x] Update `src/lib/components/widget/WidgetRenderer.svelte`
-  - Add cases for all 8 new widget types
-  - Import new widget components
-  - Parse config and pass correct props
-
-### 3.10 Update WidgetCreationForm
-
-- [x] Update `src/lib/components/widget/WidgetCreationForm.svelte`
-  - Add all 8 new widget types to the type picker (with icons and labels)
-  - Add dynamic config form fields for each new type:
-    - Clock: timezone select, clock style toggle, weather checkbox, lat/lng inputs
-    - System Stats: source URL, source type select, metrics checkboxes, refresh interval
-    - RSS: feed URL input, max items slider, show summary checkbox
-    - Calendar: iCal URL list (add/remove), days ahead slider
-    - Markdown: content textarea (full height)
-    - Metric: label, source type select, value/URL/query inputs based on source, unit, refresh
-    - Link Group: link list (add/remove rows with label+URL+icon), collapsible checkbox
-    - Camera: stream URL, type select, refresh interval, aspect ratio select
-
-## Files to Modify/Create
-
-- `src/lib/components/widget/ClockWeatherWidget.svelte` — new
-- `src/lib/components/widget/SystemStatsWidget.svelte` — new
-- `src/lib/components/widget/RssFeedWidget.svelte` — new
-- `src/lib/components/widget/CalendarWidget.svelte` — new
-- `src/lib/components/widget/MarkdownWidget.svelte` — new
-- `src/lib/components/widget/MetricWidget.svelte` — new
-- `src/lib/components/widget/LinkGroupWidget.svelte` — new
-- `src/lib/components/widget/CameraStreamWidget.svelte` — new
-- `src/lib/components/widget/WidgetRenderer.svelte` — modify
-- `src/lib/components/widget/WidgetCreationForm.svelte` — modify
-
-## Acceptance Criteria
-
-- All 8 widgets render correctly with sample config data
-- Widgets that fetch external data show loading states and handle errors gracefully
-- Edit/create form correctly generates config JSON for each widget type
-- WidgetRenderer routes to the correct component for each type
-- All widgets work with the drag-and-drop system (no interference)
-- Widgets use existing design system (Tailwind classes, CSS variables, dark mode support)
-- Responsive: widgets adapt to different container widths
-
-## Notes
-
-- Follow existing widget component patterns (see AppWidget.svelte, BookmarkWidget.svelte)
-- Use Svelte 5 runes: $props for inputs, $state for local state, $derived for computed, $effect for side effects
-- Use onMount for initial data fetches, setInterval for auto-refresh (clean up in onDestroy or $effect return)
-- All external data fetches go through the backend API (no direct client-side calls to external services)
-- Keep each widget component focused — extract shared utilities if patterns repeat
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- Created 8 new widget components: ClockWeatherWidget, SystemStatsWidget, RssFeedWidget, CalendarWidget, MarkdownWidget, MetricWidget, LinkGroupWidget, CameraStreamWidget
-- Updated WidgetRenderer to route all 8 new widget types to their components with parsed config props
-- Updated WidgetCreationForm with all 8 new widget types in the type picker (13 total) and dynamic config forms for each
-- Updated WidgetGrid to include new full-width widget types (system_stats, rss, calendar, markdown, camera)
-
-### What the next phase needs to know
-
-- All widget components follow the established pattern: `interface Props { config: XxxWidgetConfig }` with `$props()`
-- ClockWeatherWidget supports digital, analog, and 24h clock styles; analog uses SVG; weather fetches from `/api/widgets/weather`
-- SystemStatsWidget renders SVG donut/gauge charts with threshold coloring (green/yellow/red)
-- RssFeedWidget has expandable summaries using Svelte `slide` transition
-- CalendarWidget groups events by day (Today, Tomorrow, date) with color dots per calendar source
-- MarkdownWidget reuses the project's existing `marked` + `isomorphic-dompurify` setup (same as NoteWidget); has split-pane edit mode with save-to-API
-- MetricWidget supports static, JSON, and Prometheus sources; shows trend arrows and abbreviates large numbers
-- LinkGroupWidget is config-driven only (no API fetch); supports collapsible mode
-- CameraStreamWidget supports image/MJPEG/HLS modes; HLS uses lazy-loaded `hls.js`; has a custom fullscreen modal overlay
-- WidgetCreationForm uses IconGrid for type selection (5 columns) and dynamic form sections per type
-- All interval-based refreshes use `$effect` cleanup pattern for proper teardown
-
-### Potential concerns
-
-- CameraStreamWidget fullscreen modal is a custom implementation (not Bits UI Dialog as spec suggested) because it avoids adding a component dependency for a simple overlay. If consistency with other modals is needed, it could be refactored to use Bits UI Dialog.
-- HLS.js is dynamically imported (`import('hls.js')`); if hls.js is not installed as a dependency, the import will fail gracefully and fall back to native HLS support (Safari). The project may need `npm install hls.js` if HLS camera streams are used.
-- MarkdownWidget save uses PATCH to `/api/widgets/{id}` which must exist in the API routes (standard widget update endpoint).
-- The WidgetCreationForm is now a larger component (~500 lines) due to 13 widget types. If this becomes unwieldy, consider extracting per-type form sections into subcomponents.

plans/phase-4-7-full-expansion/phase-4-visual-styling.md

@@ -1,162 +0,0 @@
-# Phase 4: Visual & Styling Enhancements
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-
-Implement all 6 visual/styling features: glassmorphism cards, board-level themes, animated status rings, card size options, custom CSS injection, and wallpaper backgrounds.
-
-## Tasks
-
-### 4.1 Glassmorphism Card Style
-
-- [x] Add card style system to theme store — extend `src/lib/stores/theme.svelte.ts`:
-  - New property: `cardStyle: 'solid' | 'glass' | 'outline'` (default: 'solid')
-  - Persist to localStorage, broadcast across tabs
-- [x] Add CSS classes in `src/app.css`:
-  - `.card-solid` — current default card style
-  - `.card-glass` — `backdrop-filter: blur(12px); background: hsl(var(--card) / 0.6); border: 1px solid hsl(var(--border) / 0.3)`
-  - `.card-outline` — `background: transparent; border: 1px solid hsl(var(--border))`
-- [x] Update widget/card components to use dynamic card style class
-- [x] Add card style picker to theme settings UI (3-way toggle: solid/glass/outline)
-
-### 4.2 Board-Level Themes
-
-- [x] Create `src/lib/components/board/BoardThemeProvider.svelte`
-  - Reads board's themeHue, themeSaturation, backgroundType from board data
-  - Overrides CSS variables when viewing that board (--primary-h, --primary-s)
-  - Smooth transition when switching boards (CSS transition on :root variables)
-  - Restores global theme when navigating away from the board
-- [x] Update board edit form to include theme settings:
-  - Hue slider (0-360 with color preview)
-  - Saturation slider (0-100)
-  - Background type selector (mesh/particles/aurora/none/wallpaper)
-- [x] Update board data loading to include theme fields
-- [x] Fix updateBoard server action to extract theme fields from formData
-- [x] Fix backgroundType validator to accept all background types (mesh/particles/aurora/wallpaper/none)
-
-### 4.3 Animated SVG Status Ring
-
-- [x] Create `src/lib/components/app/AnimatedStatusRing.svelte`
-  - SVG circle around app icon with status-dependent animation:
-    - Online: animated green fill sweep (stroke-dashoffset animation)
-    - Offline: pulsing red ring (opacity animation)
-    - Degraded: partial yellow arc (75% fill, subtle pulse)
-    - Unknown: gray dashed ring (rotating dash pattern)
-  - Props: status, size (scales with card size), animated (boolean)
-- [x] Replace static status dots in AppWidget.svelte with AnimatedStatusRing
-- [x] Ensure ring scales appropriately with compact/medium/large card sizes
-
-### 4.4 Card Size Options
-
-- [x] Add `CardSize` support to section and board levels:
-  - Per-section: `section.cardSize` overrides board default
-  - Per-board: `board.cardSize` as fallback
-  - Global default: 'medium'
-- [x] Create card size variants in widget components:
-  - `compact` — icon + name only, smaller padding, single row grid
-  - `medium` — current default (icon + name + status + description on hover)
-  - `large` — icon + name + description + sparkline + tags, more padding
-- [x] Add card size picker to section edit form (DraggableSection) and board settings
-- [x] Update WidgetGrid to adjust grid columns based on card size
-- [x] Wire up onUpdateSection handler through DraggableBoard to board edit page
-
-### 4.5 Custom CSS Injection
-
-- [x] Create `src/lib/components/settings/CustomCssEditor.svelte`
-  - Textarea with monospace font for custom CSS
-  - Live preview toggle
-  - Sanitization: strip `<script>` tags, limit selectors to `.app-scope` or descendant selectors
-- [x] Add custom CSS field to admin system settings form (SettingsForm.svelte)
-- [x] Add per-board custom CSS field to board edit form
-- [x] Create `src/lib/components/layout/CustomCssInjector.svelte`
-  - Injects `<style>` tag with sanitized CSS from system settings + current board
-  - Wraps CSS in `.custom-css-scope` to prevent breaking critical UI
-- [x] Add CustomCssInjector to root layout
-
-### 4.6 Wallpaper Backgrounds
-
-- [x] Create `src/lib/components/background/WallpaperBackground.svelte`
-  - Displays uploaded image or Unsplash URL as board background
-  - Configurable: blur amount (0-20px), overlay opacity (0-1), parallax (boolean), position (fixed/scroll)
-  - Fallback to procedural background if wallpaper fails to load
-- [x] Add wallpaper upload endpoint: `src/routes/api/wallpaper/+server.ts`
-  - Accept image upload (PNG, JPG, WebP), save to `static/uploads/wallpapers/`
-  - Return URL path
-  - Max file size: 5MB
-- [x] Add wallpaper configuration to board edit form:
-  - Image upload button or URL input
-  - Blur slider, overlay opacity slider
-  - Parallax toggle
-- [x] Integrate WallpaperBackground into AmbientBackground component (new background type)
-- [ ] Optional Unsplash integration (deferred — requires external API key infrastructure)
-
-## Files to Modify/Create
-
-- `src/lib/stores/theme.svelte.ts` — extend with cardStyle
-- `src/app.css` — add glassmorphism classes
-- `src/lib/components/board/BoardThemeProvider.svelte` — new
-- `src/lib/components/app/AnimatedStatusRing.svelte` — new
-- `src/lib/components/widget/AppWidget.svelte` — modify (use AnimatedStatusRing)
-- `src/lib/components/widget/WidgetGrid.svelte` — modify (card size grid)
-- `src/lib/components/settings/CustomCssEditor.svelte` — new
-- `src/lib/components/layout/CustomCssInjector.svelte` — new
-- `src/lib/components/background/WallpaperBackground.svelte` — new
-- `src/routes/api/wallpaper/+server.ts` — new
-- Board edit form components — modify
-- Section edit form components — modify
-- Root layout — modify (add CustomCssInjector)
-
-## Acceptance Criteria
-
-- Glassmorphism effect works in both light and dark mode, ambient bg bleeds through
-- Board themes override global theme smoothly, restore on navigation
-- Status rings animate correctly for all 4 statuses
-- Card sizes adjust grid layout and widget content appropriately
-- Custom CSS is properly sandboxed (cannot break critical UI elements)
-- Wallpaper backgrounds display correctly with all configuration options
-- All visual changes respect dark/light mode
-
-## Notes
-
-- Glassmorphism requires `backdrop-filter` support (all modern browsers)
-- Board theme transitions: use CSS `transition: --primary-h 0.3s, --primary-s 0.3s` on :root
-- Custom CSS sanitization: use a simple regex-based approach to strip dangerous selectors, or wrap all custom CSS in a scoped parent selector
-- Wallpaper upload: reuse existing upload infrastructure if available (check static/uploads/)
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- **4.1 Glassmorphism**: Theme store already had `cardStyle` property with localStorage persistence and broadcast sync. CSS classes `.card-solid`, `.card-glass`, `.card-outline` exist in `app.css` with dark mode variants. AppWidget uses dynamic `card-${theme.cardStyle}` class. ThemeCustomizer has 3-way card style picker.
-- **4.2 Board-Level Themes**: BoardThemeProvider applies board-specific `--primary-h`/`--primary-s` CSS variables and now properly restores global theme values on cleanup. Board edit form has hue slider, saturation slider, background type selector, and card size picker. Fixed the `updateBoard` server action to extract all theme fields from formData. Fixed `updateBoardSchema` backgroundType enum to accept `mesh/particles/aurora/wallpaper/none`.
-- **4.3 Animated SVG Status Ring**: AnimatedStatusRing component renders an SVG circle with 4 status-dependent animations (fill sweep for online, pulse opacity for offline, degraded pulse for degraded, rotating dash for unknown). Replaces status dots in AppWidget at all 3 card sizes.
-- **4.4 Card Size Options**: Section-level `cardSize` overrides board-level default. WidgetGrid adjusts grid columns per card size. AppWidget renders compact/medium/large variants. Added card size picker dropdown to DraggableSection with onUpdateSection handler wired through DraggableBoard to the board edit page.
-- **4.5 Custom CSS Injection**: CustomCssEditor with validation, sanitization, and live preview. CustomCssInjector sanitizes and injects `<style>` tag scoped to `.custom-css-scope`. Added to root layout for system-level CSS and board view page for board-level CSS. Added CustomCssEditor to admin SettingsForm for system-wide CSS.
-- **4.6 Wallpaper Backgrounds**: WallpaperBackground component with blur, overlay, parallax, and position options. Upload API endpoint at `/api/wallpaper` with type/size validation. Board edit form has upload, URL input, blur slider, overlay slider, and parallax toggle. Integrated into AmbientBackground. Unsplash integration deferred.
-
-### What the next phase needs to know
-
-- All visual/styling features are implemented and wired end-to-end
-- The `updateBoardSchema` backgroundType now uses inline string enum `['mesh', 'particles', 'aurora', 'wallpaper', 'none']` instead of the `BackgroundType` constant (which only had `none/color/wallpaper`)
-- BoardThemeProvider now imports `theme` store to restore global values on cleanup
-- DraggableSection and DraggableBoard now support an optional `onUpdateSection` callback for section-level edits (currently used for cardSize)
-- System-level custom CSS is loaded in the root layout server data and injected via CustomCssInjector
-- Board-level custom CSS is injected on the board view page via CustomCssInjector
-- Unsplash integration was deferred as it requires external API key management infrastructure
-
-### Potential concerns
-
-- The `BackgroundType` constant in `constants.ts` (`none/color/wallpaper`) does not match the actual background types used by the theme system (`mesh/particles/aurora/wallpaper/none`). The validator was fixed to use inline strings, but the constant may cause confusion if used elsewhere.
-- The board edit form uses native HTML forms with `use:enhance` — theme fields are now extracted in the server action but numeric parsing from formData strings could produce NaN if invalid input sneaks through. The Zod schema provides a safety net.
-- Custom CSS sanitization is regex-based. It blocks common XSS vectors but is not a full CSS parser. A determined attacker with admin access could potentially craft CSS that affects layout outside `.custom-css-scope`.

plans/phase-4-7-full-expansion/phase-5-functional-backend.md

@@ -1,189 +0,0 @@
-# Phase 5: Functional Features — Backend
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-
-Implement all backend services, API routes, and background jobs for the 8 functional features: favorites, recent apps, uptime dashboard, notifications, tags, multi-URL apps, API tokens, and audit log.
-
-## Tasks
-
-### 5.1 Favorites Service & API
-
-- [x] Create `src/lib/server/services/favoriteService.ts`
-  - `getUserFavorites(userId)` — ordered list of user's favorite apps
-  - `addFavorite(userId, appId)` — add app to favorites (append to end)
-  - `removeFavorite(userId, appId)` — remove from favorites
-  - `reorderFavorites(userId, favoriteIds[])` — update order
-- [x] Create `src/routes/api/favorites/+server.ts` — GET (list), POST (add), DELETE (remove)
-- [x] Create `src/routes/api/favorites/reorder/+server.ts` — PATCH (reorder)
-
-### 5.2 Recent Apps Service & API
-
-- [x] Create `src/lib/server/services/recentAppsService.ts`
-  - `recordClick(userId, appId)` — add click record
-  - `getRecentApps(userId, limit=10)` — get most recent unique apps
-  - `clearHistory(userId)` — clear all click history for user
-- [x] Create `src/routes/api/recent-apps/+server.ts` — GET (list), POST (record click), DELETE (clear)
-
-### 5.3 Uptime Dashboard Service & API
-
-- [x] Create `src/lib/server/services/uptimeService.ts`
-  - `getUptimeStats(appId, timeRange: '24h'|'7d'|'30d')` — uptime percentage, avg response time
-  - `getUptimeTimeline(appId, timeRange)` — status history with timestamps
-  - `getAllAppsUptime(timeRange)` — aggregated uptime for all apps
-  - `getIncidents(appId?, timeRange)` — list of down periods with duration
-  - Queries AppStatus table, groups by time windows
-- [x] Create `src/routes/api/uptime/+server.ts` — GET all apps uptime summary
-- [x] Create `src/routes/api/uptime/[appId]/+server.ts` — GET single app uptime + timeline
-
-### 5.4 Notifications Service & API
-
-- [x] Create `src/lib/server/services/notificationService.ts`
-  - Channel management: create, update, delete, list channels for user
-  - `sendNotification(userId, appId, event, message)` — create notification record + dispatch to channels
-  - Dispatchers: `sendDiscord(webhookUrl, message)`, `sendSlack(webhookUrl, message)`, `sendTelegram(botToken, chatId, message)`, `sendHttp(url, payload)`
-  - `getNotifications(userId, { unreadOnly?, limit?, offset? })` — paginated notification list
-  - `markAsRead(notificationId)`, `markAllAsRead(userId)`
-- [x] Create `src/routes/api/notifications/+server.ts` — GET (list), PATCH (mark read)
-- [x] Create `src/routes/api/notifications/channels/+server.ts` — CRUD for notification channels
-- [x] Create `src/routes/api/notifications/channels/[id]/+server.ts` — single channel operations
-- [x] Create `src/routes/api/notifications/channels/[id]/test/+server.ts` — POST to send test notification
-- [x] Integrate with healthcheck scheduler: trigger notifications when app status changes (online->offline, offline->online)
-  - Update `src/lib/server/jobs/healthcheckScheduler.ts` to call notificationService on status change
-
-### 5.5 Tags Service & API
-
-- [x] Create `src/lib/server/services/tagService.ts`
-  - CRUD for tags: create, update (name, color), delete, findAll
-  - `addTagToApp(appId, tagId)`, `removeTagFromApp(appId, tagId)`
-  - `getAppsByTag(tagId)` — apps with a specific tag
-  - `getTagsForApp(appId)` — tags for a specific app
-- [x] Create `src/routes/api/tags/+server.ts` — GET (list), POST (create)
-- [x] Create `src/routes/api/tags/[id]/+server.ts` — PATCH (update), DELETE (delete)
-- [x] Create `src/routes/api/apps/[id]/tags/+server.ts` — GET (app's tags), POST (add tag), DELETE (remove tag)
-
-### 5.6 Multi-URL Apps Service & API
-
-- [x] Extend `src/lib/server/services/appService.ts`
-  - `addAppLink(appId, { label, url, icon, order })` — add secondary URL
-  - `updateAppLink(linkId, { label?, url?, icon?, order? })` — update link
-  - `removeAppLink(linkId)` — delete link
-  - `reorderAppLinks(appId, linkIds[])` — update order
-  - Include links in app queries (eager load)
-- [x] Create `src/routes/api/apps/[id]/links/+server.ts` — CRUD for app links
-- [x] Update existing app GET endpoints to include links in response
-
-### 5.7 API Tokens Service & API
-
-- [x] Create `src/lib/server/services/apiTokenService.ts`
-  - `generateToken(userId, name, scope, expiresAt?)` — generate random token, store hash
-  - `revokeToken(tokenId, userId)` — delete token
-  - `listTokens(userId)` — list tokens (without hash, with last used)
-  - `validateToken(tokenString)` — hash and compare, check expiry, update lastUsedAt
-- [x] Create `src/routes/api/tokens/+server.ts` — GET (list), POST (generate)
-- [x] Create `src/routes/api/tokens/[id]/+server.ts` — DELETE (revoke)
-- [x] Update auth middleware to also check for Bearer token in Authorization header
-  - `src/lib/server/middleware/authenticate.ts` — add API token validation path
-
-### 5.8 Audit Log Service & API
-
-- [x] Create `src/lib/server/services/auditLogService.ts`
-  - `logAction(userId, action, entityType, entityId, details?)` — record audit event
-  - `getAuditLogs({ action?, entityType?, userId?, startDate?, endDate?, limit?, offset? })` — filtered, paginated query
-  - `pruneOldLogs(retentionDays)` — delete logs older than retention period
-- [x] Create `src/routes/api/admin/audit-log/+server.ts` — GET (list, admin only)
-- [x] Add audit log calls to existing admin operations:
-  - User CRUD, Board CRUD, App CRUD, Settings changes, Import/Export
-  - Update relevant services/routes to call `auditLogService.logAction()`
-- [x] Add pruning cron job to healthcheck scheduler (or create separate job):
-  - Run daily, prune based on SystemSettings retention config (default 90 days)
-
-## Files to Modify/Create
-
-- `src/lib/server/services/favoriteService.ts` — new
-- `src/lib/server/services/recentAppsService.ts` — new
-- `src/lib/server/services/uptimeService.ts` — new
-- `src/lib/server/services/notificationService.ts` — new
-- `src/lib/server/services/tagService.ts` — new
-- `src/lib/server/services/apiTokenService.ts` — new
-- `src/lib/server/services/auditLogService.ts` — new
-- `src/lib/server/services/appService.ts` — modify (multi-URL links)
-- `src/lib/server/middleware/authenticate.ts` — modify (API token auth)
-- `src/lib/server/jobs/healthcheckScheduler.ts` — modify (notification triggers)
-- `src/routes/api/favorites/+server.ts` — new
-- `src/routes/api/favorites/reorder/+server.ts` — new
-- `src/routes/api/recent-apps/+server.ts` — new
-- `src/routes/api/uptime/+server.ts` — new
-- `src/routes/api/uptime/[appId]/+server.ts` — new
-- `src/routes/api/notifications/+server.ts` — new
-- `src/routes/api/notifications/channels/+server.ts` — new
-- `src/routes/api/notifications/channels/[id]/+server.ts` — new
-- `src/routes/api/notifications/channels/[id]/test/+server.ts` — new
-- `src/routes/api/tags/+server.ts` — new
-- `src/routes/api/tags/[id]/+server.ts` — new
-- `src/routes/api/apps/[id]/tags/+server.ts` — new
-- `src/routes/api/apps/[id]/links/+server.ts` — new
-- `src/routes/api/tokens/+server.ts` — new
-- `src/routes/api/tokens/[id]/+server.ts` — new
-- `src/routes/api/admin/audit-log/+server.ts` — new
-- Various existing route files — modify (add audit logging)
-
-## Acceptance Criteria
-
-- All services handle errors gracefully
-- API token auth works alongside existing JWT auth (check both)
-- Notification dispatchers handle webhook failures without crashing
-- Audit logging doesn't slow down the operations it logs (fire-and-forget pattern)
-- Uptime calculations handle edge cases (no data, all unknown, timezone issues)
-- All new endpoints require appropriate auth (user-level or admin-level)
-- Favorites and recent apps are per-user, properly isolated
-
-## Notes
-
-- For notification dispatchers, use simple `fetch()` calls — no need for a queue system at this scale
-- API token generation: use `crypto.randomBytes(32).toString('hex')` for the token, store bcrypt hash
-- Audit logging should be non-blocking: catch and log errors but don't fail the parent operation
-- Uptime calculation: group AppStatus records by time windows, calculate online/(online+offline) percentage
-- Tag colors: store as hex string (e.g., '#ef4444')
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- Created 7 new backend services: favoriteService, recentAppsService, uptimeService, notificationService, tagService, apiTokenService, auditLogService
-- Extended appService with multi-URL link management (addAppLink, updateAppLink, removeAppLink, reorderAppLinks, getAppLinks) and eager-loaded links in findAll/findById
-- Created 16 new API route files across favorites, recent-apps, uptime, notifications (+ channels + test), tags, app tags, app links, tokens, admin audit-log
-- Updated authenticate.ts middleware with extractBearerToken helper
-- Updated hooks.server.ts to validate API tokens from Authorization header as fallback when no JWT session exists
-- Updated healthcheckScheduler.ts to track status transitions and broadcast notifications on status changes (online/offline/degraded), plus added daily audit log pruning cron job
-- Added audit logging calls to 8 existing route files: users CRUD, apps CRUD, boards CRUD, admin settings, admin import, admin export
-
-### What the next phase needs to know
-
-- All new API endpoints require authentication via JWT cookie or Bearer API token
-- Favorites and recent apps are per-user, isolated by userId
-- Notification dispatchers are fire-and-forget — they catch errors and never throw
-- Audit logging is non-blocking (void return, catches errors internally)
-- API token validation iterates all tokens to bcrypt-compare; at scale this could be slow (consider indexing on a prefix for optimization)
-- The `broadcastNotification()` function sends to all users with enabled channels — used by healthcheck scheduler
-- Uptime stats return null for uptimePercentage/avgResponseTime when no data exists
-- Tags use the AppTag junction table (not the legacy comma-separated App.tags field)
-- App links are eager-loaded in appService.findAll() and findById() queries
-- Audit log pruning runs daily at midnight with 90-day default retention
-
-### Potential concerns
-
-- API token validation scans all tokens in the database for bcrypt comparison. For large numbers of tokens, consider a two-step lookup (store a non-secret prefix for indexing, then bcrypt the full token).
-- The healthcheck scheduler tracks previous statuses in memory (Map). On server restart, the first check after restart will not detect transitions since the map is empty.
-- Notification channel configs are stored as JSON strings — the dispatcher trusts the shape after JSON.parse. Invalid configs are silently skipped.

plans/phase-4-7-full-expansion/phase-6-functional-frontend.md

@@ -1,207 +0,0 @@
-# Phase 6: Functional Features — Frontend
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-
-Build all frontend UI for the 8 functional features: favorites bar, recent apps, uptime dashboard page, notifications, tag management + filtering, multi-URL app cards, API token management, and audit log viewer.
-
-## Tasks
-
-### 6.1 Favorites Bar
-
-- [x] Create `src/lib/components/layout/FavoritesBar.svelte`
-  - Horizontal bar at top of board view, below header
-  - Shows favorite app icons in compact format (icon + name)
-  - Drag-and-drop reordering within the bar (svelte-dnd-action)
-  - Click opens app URL; right-click or long-press to remove
-  - Add-to-favorites button on app widget context menu
-- [x] Create `src/lib/stores/favorites.svelte.ts`
-  - Fetch favorites from `/api/favorites` on init
-  - Methods: add, remove, reorder (optimistic updates with API sync)
-- [x] Integrate FavoritesBar into board layout (show when user has favorites)
-
-### 6.2 Recent Apps Section
-
-- [x] Create `src/lib/components/board/RecentAppsSection.svelte`
-  - Auto-generated section at top of default board
-  - Shows last 10 unique apps the user clicked
-  - Compact app cards (icon + name + last used time)
-  - "Clear history" button
-  - Respects user's `trackRecentApps` preference
-- [x] Update app click handling to record clicks via `/api/recent-apps` POST
-- [x] Add privacy toggle in user settings (trackRecentApps)
-
-### 6.3 Uptime Dashboard Page
-
-- [x] Create `src/routes/status/+page.svelte` — public status page
-- [x] Create `src/routes/status/+page.server.ts` — load uptime data (guest-accessible)
-  - Time range selector: 24h / 7d / 30d
-  - Per-app: name, current status, uptime percentage, avg response time
-  - Sparkline chart (larger than widget version) with hover tooltips
-  - Incident timeline: colored blocks showing up/down periods
-  - Summary header: total apps, apps online, overall uptime %
-- [x] Add "Status Page" link to sidebar navigation
-
-### 6.4 Notifications UI
-
-- [x] Create `src/lib/components/notifications/NotificationBell.svelte`
-  - Bell icon in header with unread count badge
-  - Click opens notification dropdown/panel
-  - List of recent notifications with read/unread state
-  - "Mark all as read" button
-  - Link to full notification history
-- [x] Create `src/lib/components/notifications/NotificationHistory.svelte`
-  - Full page or modal with paginated notification list
-  - Filter by app, event type
-  - Timestamp, app name, event description
-- [x] Create `src/lib/components/notifications/NotificationChannelForm.svelte`
-  - Form to add/edit notification channels
-  - Dynamic fields based on channel type (Discord: webhook URL, Slack: webhook URL, Telegram: bot token + chat ID, HTTP: URL + method)
-  - "Send Test" button
-  - Enable/disable toggle per channel
-- [x] Create `src/routes/settings/notifications/+page.svelte` — notification preferences page
-- [x] Create `src/lib/stores/notifications.svelte.ts`
-  - Track unread count, poll for new notifications
-
-### 6.5 Tag Management & Filtering
-
-- [x] Create `src/lib/components/admin/TagManager.svelte`
-  - Admin page to CRUD tags (name + color picker)
-  - Table/grid of existing tags with edit/delete
-- [x] Create `src/lib/components/app/TagBadge.svelte`
-  - Small colored badge showing tag name
-  - Used in app cards (large card size) and app edit forms
-- [x] Create `src/lib/components/board/TagFilter.svelte`
-  - Filter bar within board view
-  - Toggle buttons for each tag (active/inactive)
-  - When active, only show apps with selected tags
-  - "Clear filters" button
-- [x] Add tag assignment to app edit form (multi-select from existing tags)
-- [x] Add tag management page to admin panel navigation
-
-### 6.6 Multi-URL App Cards
-
-- [x] Update `src/lib/components/widget/AppWidget.svelte`
-  - If app has secondary links, show expand indicator
-  - On hover/click expand to reveal sub-links list
-  - Each sub-link: icon + label, click opens in new tab
-  - Primary URL is the main card click target
-  - Smooth expand/collapse animation (slide transition)
-- [x] Create `src/lib/components/app/AppLinksEditor.svelte`
-  - Used in app edit form
-  - Add/remove/reorder secondary links
-  - Each link: label input + URL input + optional icon picker
-  - Drag-and-drop reorder
-
-### 6.7 API Token Management
-
-- [x] Create `src/routes/settings/api-tokens/+page.svelte`
-- [x] Create `src/routes/settings/api-tokens/+page.server.ts`
-- [x] Create `src/lib/components/settings/ApiTokenList.svelte`
-  - Table of user's API tokens: name, scope, created, last used, expires
-  - Revoke button per token
-- [x] Create `src/lib/components/settings/ApiTokenCreateForm.svelte`
-  - Form: name, scope (read/write/admin dropdown), expiry (optional date picker)
-  - On submit: show generated token ONCE (copyable, warning: won't be shown again)
-- [x] Add "API Tokens" link to user settings navigation
-
-### 6.8 Audit Log Viewer
-
-- [x] Create `src/routes/admin/audit-log/+page.svelte`
-- [x] Create `src/routes/admin/audit-log/+page.server.ts`
-- [x] Create `src/lib/components/admin/AuditLogTable.svelte`
-  - Paginated table: timestamp, user, action, entity, details
-  - Filters: action type dropdown, entity type dropdown, user select, date range
-  - Details column: expandable JSON view for action details
-  - Export to CSV button
-- [x] Add "Audit Log" link to admin panel navigation
-
-## Files to Modify/Create
-
-- `src/lib/components/layout/FavoritesBar.svelte` — new
-- `src/lib/stores/favorites.svelte.ts` — new
-- `src/lib/components/board/RecentAppsSection.svelte` — new
-- `src/routes/status/+page.svelte` — new
-- `src/routes/status/+page.server.ts` — new
-- `src/lib/components/notifications/NotificationBell.svelte` — new
-- `src/lib/components/notifications/NotificationHistory.svelte` — new
-- `src/lib/components/notifications/NotificationChannelForm.svelte` — new
-- `src/routes/settings/notifications/+page.svelte` — new
-- `src/lib/stores/notifications.svelte.ts` — new
-- `src/lib/components/admin/TagManager.svelte` — new
-- `src/lib/components/app/TagBadge.svelte` — new
-- `src/lib/components/board/TagFilter.svelte` — new
-- `src/lib/components/widget/AppWidget.svelte` — modify
-- `src/lib/components/app/AppLinksEditor.svelte` — new
-- `src/routes/settings/api-tokens/+page.svelte` — new
-- `src/routes/settings/api-tokens/+page.server.ts` — new
-- `src/lib/components/settings/ApiTokenList.svelte` — new
-- `src/lib/components/settings/ApiTokenCreateForm.svelte` — new
-- `src/routes/admin/audit-log/+page.svelte` — new
-- `src/routes/admin/audit-log/+page.server.ts` — new
-- `src/lib/components/admin/AuditLogTable.svelte` — new
-- Various existing layout/navigation components — modify
-
-## Acceptance Criteria
-
-- Favorites bar persists across board navigation, syncs with backend
-- Recent apps section shows only when user has click history and tracking enabled
-- Uptime dashboard is guest-accessible and shows meaningful uptime data
-- Notification bell shows unread count, dropdown works correctly
-- Tags are assignable to apps and filterable in board view
-- Multi-URL app cards expand/collapse smoothly
-- API token is shown only once on creation, copyable
-- Audit log shows paginated, filterable history for admin
-- All UIs are responsive and work in dark/light mode
-
-## Notes
-
-- Follow existing component patterns (Svelte 5 runes, Tailwind, Bits UI primitives)
-- Favorites bar uses svelte-dnd-action like existing widget reordering
-- Notification polling: check every 60s for new notifications (simple setInterval)
-- Status page is a new top-level route, not nested under boards
-- API token display: show once in a modal with copy button, then redirect to token list
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- **6.1 Favorites Bar**: Created `FavoritesBar.svelte` with drag-and-drop reordering (svelte-dnd-action), compact icon+name display, remove button, and right-click remove. Created `favorites.svelte.ts` store with load/add/remove/reorder methods and optimistic updates. Integrated favorites loading in root `+layout.svelte`. Added context menu to AppWidget with "Add to favorites" / "Remove from favorites" toggle.
-- **6.2 Recent Apps**: Created `RecentAppsSection.svelte` showing last 10 clicked apps with time-ago formatting, collapsible section, and clear history button. Respects `trackRecentApps` preference. Updated AppWidget to record clicks via `POST /api/recent-apps` on every app link click.
-- **6.3 Uptime Dashboard**: Created `/status` route with `+page.server.ts` (loads uptime data, guest-accessible) and `+page.svelte` with summary cards (total/online/uptime%), time range selector (24h/7d/30d), per-app status rows with sparklines, and incidents section. Added "Status" link to sidebar navigation.
-- **6.4 Notifications UI**: Created `NotificationBell.svelte` (bell icon in header with unread badge, dropdown with notification list, mark all as read). Created `NotificationHistory.svelte` (paginated table with event type filter). Created `NotificationChannelForm.svelte` (dynamic form for Discord/Slack/Telegram/HTTP with send test button). Created `/settings/notifications` page with channels tab and history tab. Created `notifications.svelte.ts` store with 60s polling. Added bell to Header for authenticated users.
-- **6.5 Tag Management & Filtering**: Created `TagManager.svelte` (admin CRUD with color picker, inline edit, delete confirmation). Created `TagBadge.svelte` (colored badge with optional remove button). Created `TagFilter.svelte` (toggle buttons for each tag, clear filters). Added tags display to AppWidget large card size. Added `/admin/tags` page and nav link.
-- **6.6 Multi-URL App Cards**: Updated `AppWidget.svelte` to show expandable sub-links with slide transition for all card sizes (compact/medium/large). Links section shows expand/collapse chevron with count. Created `AppLinksEditor.svelte` with drag-and-drop reorder, add/remove links, and save to API.
-- **6.7 API Token Management**: Created `/settings/api-tokens` route with `+page.server.ts` (list tokens, create with form action, revoke with form action). Created `ApiTokenList.svelte` (table with scope badges, expiry status, revoke with confirmation). Created `ApiTokenCreateForm.svelte` (name, scope dropdown, optional expiry). Token shown once after creation with copy button and warning. Added API Tokens link to user menu and settings page.
-- **6.8 Audit Log Viewer**: Created `/admin/audit-log` route with `+page.server.ts` (paginated, filtered query). Created `AuditLogTable.svelte` (filterable table with action/entity/date filters, expandable JSON details, CSV export, pagination). Added "Audit Log" link to admin navigation.
-
-### What the next phase needs to know
-
-- FavoritesBar is a standalone component but not yet integrated into the board view page -- the root layout loads favorites, and the component can be placed in Board.svelte or the board page.
-- RecentAppsSection is a standalone component that needs to be placed in the board view page (e.g., above the sections in Board.svelte).
-- The NotificationBell is now in the Header and polls every 60 seconds when authenticated.
-- TagFilter component takes `activeTags` and `onFilterChange` props but the filtering logic (hiding apps without selected tags) needs to be wired into the Board or Section component.
-- AppWidget now depends on `favorites` store (imported at module level) -- this is safe since the store is a singleton.
-- The `trackRecentApps` user preference is available via the User model but is not yet exposed in a settings toggle UI -- it defaults to `true`.
-- API token page uses SvelteKit form actions (`?/create` and `?/revoke`) with `use:enhance`.
-- The admin layout now has 5 nav items: Users, Groups, Tags, Audit Log, Settings.
-- Status page is guest-accessible (no auth required in the server loader).
-
-### Potential concerns
-
-- The favorites store is loaded eagerly in `+layout.svelte` for all authenticated users. If the user has no favorites, this is a wasted API call (returns empty array). Consider lazy loading.
-- The context menu for AppWidget favorites uses `position: fixed` with client coordinates, which may not position correctly when the page is scrolled. A more robust solution would use a popover library.
-- AppWidget now wraps medium/large cards in a `<div>` instead of a single `<a>` tag (to support the expandable links section below the link). This changes the click behavior slightly -- the primary URL is still the main `<a>`, but the outer container is not a link anymore.
-- NotificationBell polling could accumulate if multiple instances are mounted (unlikely with current layout, but worth noting).
-- The AuditLogTable CSV export only exports the currently loaded page of results, not all results.

plans/phase-4-7-full-expansion/phase-7-quality-of-life.md

@@ -1,177 +0,0 @@
-# Phase 7: Quality of Life
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Implement 4 quality-of-life features: onboarding wizard, app URL health preview, board templates, and keyboard shortcut overlay.
-
-## Tasks
-
-### 7.1 Onboarding Wizard
-
-- [x] Create `src/lib/components/onboarding/OnboardingWizard.svelte`
-  - Full-screen overlay triggered on first launch (no users in DB or onboardingComplete=false in SystemSettings)
-  - Steps with progress indicator:
-    1. **Welcome** — intro text, app branding
-    2. **Create Admin Account** — email, password, display name form
-    3. **Auth Mode** — choose local/oauth/both, configure OAuth if selected
-    4. **Theme & Background** — pick theme mode, primary color, background type
-    5. **Add First Apps** — manual add form OR auto-discover button (if Docker available)
-    6. **Create First Board** — name, pick a template or start blank
-  - Skippable steps for advanced users
-  - Stores completion in SystemSettings.onboardingComplete
-- [x] Create `src/routes/api/onboarding/+server.ts`
-  - POST: complete step (validates, creates entities)
-  - GET: check onboarding status
-- [x] Create `src/lib/server/services/onboardingService.ts`
-  - `isOnboardingNeeded()` — check if any users exist and if onboarding is complete
-  - `completeOnboarding()` — mark SystemSettings.onboardingComplete = true
-- [x] Add onboarding check to root layout server load function
-  - If onboarding needed, pass flag to layout → show wizard
-
-### 7.2 App URL Health Preview
-
-- [x] Create `src/lib/components/app/AppUrlPreview.svelte`
-  - "Test Connection" button in app create/edit form
-  - On click: calls backend to test the URL
-  - Shows: HTTP status code, response time (ms), auto-detected favicon URL, page title
-  - If no icon selected, offers to use the detected favicon
-  - If no name entered, offers to use the detected page title
-  - Loading state while testing, error state on failure
-- [x] Create `src/routes/api/apps/preview/+server.ts`
-  - POST with `{ url }` body
-  - Server-side fetch: HEAD request for status/timing, GET for HTML parsing
-  - Extract: favicon (from `<link rel="icon">` or `/favicon.ico`), page title (from `<title>`)
-  - Return: `{ status, responseTime, favicon, title }`
-  - Timeout: 10s, handle errors gracefully
-- [x] Integrate preview into existing AppForm.svelte (add preview section below URL input)
-
-### 7.3 Board Templates
-
-- [x] Create `src/lib/server/services/templateService.ts`
-  - `getBuiltinTemplates()` — return hardcoded built-in templates
-  - `getUserTemplates(userId)` — custom templates from DB
-  - `createTemplate(input)` — save board layout as template
-  - `applyTemplate(templateId, boardId)` — create sections from template config
-  - `exportTemplate(boardId)` — export board layout as JSON
-  - `importTemplate(json)` — import template from JSON
-- [x] Create built-in templates (hardcoded in service):
-  - "Home Server" — sections: Media, Networking, Storage, Monitoring
-  - "Media Stack" — sections: Streaming, Downloads, Management
-  - "Dev Tools" — sections: Git, CI/CD, Databases, Docs
-  - "Monitoring" — sections: Metrics, Logs, Alerts, Status
-- [x] Create `src/lib/components/board/TemplatePicker.svelte`
-  - Grid of template cards (icon, name, description, section preview)
-  - Built-in templates + user-created templates
-  - Click to select → creates board with template sections
-  - "Blank Board" option
-  - "Import Template" button (file upload JSON)
-- [x] Create `src/routes/api/templates/+server.ts` — GET (list), POST (create from board)
-- [x] Create `src/routes/api/templates/[id]/+server.ts` — GET (single), DELETE
-- [x] Create `src/routes/api/templates/import/+server.ts` — POST (import JSON)
-- [x] Integrate TemplatePicker into board creation flow
-
-### 7.4 Keyboard Shortcut Overlay
-
-- [x] Create `src/lib/components/ui/KeyboardShortcutOverlay.svelte`
-  - Modal triggered by pressing `?` key
-  - Context-aware sections:
-    - **Global:** Cmd/Ctrl+K (search), ? (shortcuts), 1-9 (switch board), f (toggle favorites)
-    - **Board View:** j/k (navigate apps), Enter (open selected), e (edit mode)
-    - **Admin:** (admin-specific shortcuts if any)
-  - Organized in categorized columns
-  - Close on Escape or clicking outside
-  - Small `?` hint icon in footer
-- [x] Create `src/lib/stores/keyboard.svelte.ts`
-  - Register global keyboard listeners
-  - j/k navigation: track selected app index in current board
-  - Enter: open selected app URL
-  - 1-9: switch to board by index
-  - f: toggle favorites bar visibility
-  - e: toggle board edit mode
-  - ?: show shortcut overlay
-  - Disable shortcuts when input/textarea is focused
-- [x] Integrate keyboard store into root layout
-- [x] Add `?` hint icon to footer component
-
-## Files to Modify/Create
-
-- `src/lib/components/onboarding/OnboardingWizard.svelte` — new
-- `src/routes/api/onboarding/+server.ts` — new
-- `src/lib/server/services/onboardingService.ts` — new
-- `src/lib/components/app/AppUrlPreview.svelte` — new
-- `src/routes/api/apps/preview/+server.ts` — new
-- `src/lib/components/app/AppForm.svelte` — modify (add preview)
-- `src/lib/server/services/templateService.ts` — new
-- `src/lib/components/board/TemplatePicker.svelte` — new
-- `src/routes/api/templates/+server.ts` — new
-- `src/routes/api/templates/[id]/+server.ts` — new
-- `src/routes/api/templates/import/+server.ts` — new
-- `src/lib/components/ui/KeyboardShortcutOverlay.svelte` — new
-- `src/lib/stores/keyboard.svelte.ts` — new
-- `src/routes/+layout.svelte` — modify (onboarding check, keyboard store)
-- `src/routes/+layout.server.ts` — modify (onboarding status)
-
-## Acceptance Criteria
-
-- Onboarding wizard triggers on first launch, creates admin user and basic setup
-- Steps can be skipped, wizard can be completed partially
-- App URL preview shows status, timing, favicon, and title extraction
-- Board templates create correct section structure when applied
-- Built-in templates are always available (not stored in DB)
-- Template import/export produces valid JSON that can round-trip
-- Keyboard shortcuts work globally, disabled in text inputs
-- Shortcut overlay shows context-appropriate shortcuts
-- All features work in both dark and light mode
-
-## Notes
-
-- Onboarding detection: simplest approach is checking User count === 0
-- URL preview: use node's fetch with timeout, parse HTML response for favicon/title
-- Board templates: config JSON structure: `{ sections: [{ title, icon, order }] }`
-- Keyboard navigation: use data attributes on app widgets to track position
-- The `?` shortcut must not interfere with typing in inputs/textareas
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes (Big Bang: code quality check only)
-- [ ] Tests pass (Big Bang: skipped for intermediate phase)
-
-## Handoff to Next Phase
-
-### What was done
-
-- **7.1 Onboarding Wizard**: Created `OnboardingWizard.svelte` with 5-step full-screen overlay (Welcome, Create Admin, Auth Mode, Theme, Create Board). Created `onboardingService.ts` with `isOnboardingNeeded()`, `completeOnboarding()`, and `getOnboardingStatus()`. Created `/api/onboarding` route with GET (status check) and POST (step completion with per-step Zod validation). Added `onboardingNeeded` flag to root layout server load. Wizard renders as fixed overlay in `+layout.svelte` when flag is true.
-
-- **7.2 App URL Health Preview**: Created `AppUrlPreview.svelte` with "Test Connection" button showing HTTP status, response time, favicon preview, and page title extraction. Offers "Use as name" and "Use as icon" buttons when fields are empty. Created `/api/apps/preview` route with server-side HEAD + GET requests, 10s timeout, HTML parsing (first 64KB), favicon extraction from `<link rel="icon">` or `/favicon.ico` fallback. Integrated into `AppForm.svelte` below the URL input field.
-
-- **7.3 Board Templates**: Created `templateService.ts` with 4 built-in templates (Home Server, Media Stack, Dev Tools, Monitoring) hardcoded as constants, plus CRUD for user templates via `BoardTemplate` Prisma model. Supports `getBuiltinTemplates()`, `getAllTemplates()`, `createTemplate()`, `applyTemplate()`, `exportTemplate()`, and `importTemplate()`. Created 3 API routes: `/api/templates` (GET list, POST create), `/api/templates/[id]` (GET, DELETE), `/api/templates/import` (POST). Created `TemplatePicker.svelte` with grid UI showing blank board + all templates with section previews and JSON file import. Integrated into board creation page with hidden `templateId` input and server-side `applyTemplate()` call after board creation.
-
-- **7.4 Keyboard Shortcut Overlay**: Created `keyboard.svelte.ts` store with global keydown listener, input-focus detection, j/k app navigation (using `data-app-widget` attributes), Enter to open selected, 1-9 board switching (via sidebar link click), `f` for favorites toggle (custom event), `e` for edit mode toggle, `?` for overlay toggle. Created `KeyboardShortcutOverlay.svelte` modal with categorized shortcuts (Global + Board View). Added `data-keyboard-selected` CSS rule to `app.css` for visual selection ring. Added `?` hint icon button to Sidebar footer next to collapse toggle. Integrated keyboard store init/destroy into root `+layout.svelte`.
-
-### What the next phase needs to know
-
-- The onboarding wizard is a simple full-screen overlay that blocks the UI — it does NOT redirect. Once completed, the page needs a full reload (or `invalidateAll()`) to re-evaluate `onboardingNeeded`.
-- The wizard has 5 steps (Welcome, Admin, Auth, Theme, Complete) — the original plan had 6 steps but "Add First Apps" was consolidated into the board creation step for simplicity.
-- The onboarding API has NO authentication requirement (since it runs before any user exists).
-- The URL preview endpoint requires authentication and returns `{ status, responseTime, favicon, title, error }`.
-- Built-in templates use `builtin-` prefixed IDs and are not stored in the database. The `deleteTemplate` function blocks deletion of builtins.
-- Template application in board creation uses `request.clone().formData()` to read the `templateId` hidden input alongside the superforms data.
-- The keyboard store's `init()` must be called from a component context (it adds a global `keydown` listener). `destroy()` must be called in `onDestroy`.
-- j/k navigation relies on elements having `data-app-widget` attribute — this needs to be added to `AppWidget.svelte` in Phase 8 integration.
-- The `f` shortcut dispatches a `toggle-favorites` custom event on `window` — the FavoritesBar or board page needs to listen for this.
-- The `e` shortcut toggles `keyboard.editMode` state — board components can read this to enter/exit edit mode.
-
-### Potential concerns
-
-- The onboarding wizard completes steps via sequential API calls — if the browser is closed mid-wizard, partial state (e.g., admin created but onboarding not marked complete) can occur. The wizard handles this by checking `adminCreated` state and skipping re-creation.
-- The URL preview endpoint makes server-side HTTP requests to arbitrary URLs, which could be used for SSRF. Consider adding URL validation (e.g., blocking private IP ranges) in a security review.
-- Template import accepts arbitrary JSON — validation checks structure but does not limit section count or title length beyond Zod schema bounds.
-- The keyboard store adds a `keydown` listener on `window` — if multiple layout instances exist (unlikely), listeners could duplicate. The `init()` method guards against this.
-- Board creation page now reads `request` twice (superValidate + manual formData) — uses `request.clone()` to avoid "body already consumed" errors.

plans/phase-4-7-full-expansion/phase-8-integration-polish.md

@@ -1,108 +0,0 @@
-# Phase 8: Integration & Polish
-
-**Status:** ✅ Complete
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-
-Wire all phases together, resolve cross-phase integration issues, fix the build, run tests, and produce a polished, working codebase. This is the FINAL phase — build and tests MUST pass.
-
-## Tasks
-
-### 8.1 Fix all build errors
-
-- [x] Run `npm run build` and fix ALL TypeScript/Svelte compilation errors
-- [x] Run `npm run check` and fix ALL type errors
-- [x] Run `npm run lint` and fix ALL lint errors
-- [x] Ensure `npx prisma generate` completes without errors
-
-### 8.2 Fix cross-phase integration issues
-
-- [ ] Verify all new widget types render correctly in WidgetRenderer
-- [ ] Verify WidgetCreationForm includes all new widget type options
-- [ ] Verify new API routes are accessible and return correct response format
-- [ ] Verify new Prisma models work with existing service layer
-- [ ] Verify board theme overrides work with glassmorphism and wallpapers
-- [ ] Verify favorites bar appears correctly in board layout
-- [ ] Verify notification bell integrates with header layout
-- [ ] Verify tag filter works with the board's widget grid
-- [ ] Verify keyboard shortcuts don't conflict with search (Cmd+K) or other global handlers
-- [ ] Verify onboarding wizard triggers correctly on fresh database
-
-### 8.3 Navigation & routing
-
-- [ ] Verify all new routes are accessible:
-  - `/status` — uptime dashboard
-  - `/settings/notifications` — notification preferences
-  - `/settings/api-tokens` — API token management
-  - `/admin/audit-log` — audit log viewer
-- [ ] Verify sidebar links are updated for new pages
-- [ ] Verify admin layout guard protects admin-only routes
-
-### 8.4 Data loading & server functions
-
-- [ ] Verify all `+page.server.ts` load functions work correctly
-- [ ] Verify form actions handle validation errors properly
-- [ ] Verify API endpoints handle edge cases (empty data, invalid IDs, unauthorized access)
-
-### 8.5 Visual consistency
-
-- [ ] Verify all new components work in dark mode and light mode
-- [ ] Verify glassmorphism effect works with all background types
-- [ ] Verify card size options apply consistently across widget types
-- [ ] Verify responsive layout on mobile widths for all new components
-- [ ] Verify animations and transitions are smooth (no jank)
-
-### 8.6 Test suite
-
-- [x] Run `npm test` and fix any broken existing tests
-- [x] Verify Prisma mock setup handles new models
-- [ ] Add basic smoke tests for critical new services if time permits
-
-### 8.7 Final cleanup
-
-- [x] Remove any `TODO(phase-N)` markers that should have been resolved
-- [ ] Remove any temporary workarounds that are no longer needed
-- [ ] Ensure no debug console.logs remain
-- [ ] Ensure no commented-out code remains
-- [ ] Format all files: `npm run format`
-
-## Files to Modify/Create
-
-- Various files across all phases — fix compilation errors
-- `src/routes/+layout.svelte` — final integration of all layout components
-- `src/routes/+layout.server.ts` — final data loading integration
-- Navigation components — ensure all new routes are linked
-- Any test files that need updating for new models
-
-## Acceptance Criteria
-
-- `npm run build` passes with zero errors
-- `npm run check` passes with zero errors
-- `npm run lint` passes with zero errors
-- `npm test` passes (all existing tests + any new tests)
-- All 26 features are accessible and functional
-- No console errors in browser
-- Dark/light mode works everywhere
-- Responsive layout works on mobile/tablet/desktop
-
-## Notes
-
-- This is the Big Bang final phase — ALL verification commands must pass
-- Prioritize build errors first, then type errors, then runtime issues
-- If a feature has a minor visual issue but the build passes, note it for follow-up rather than blocking
-- Run `npm run format` as the very last step to ensure consistent formatting
-
-## Review Checklist
-
-- [x] All tasks completed
-- [x] Code follows project conventions
-- [x] No unintended side effects
-- [x] Build passes ✅ (MANDATORY for final phase)
-- [x] Tests pass ✅ (MANDATORY for final phase)
-- [x] Lint passes ✅ (MANDATORY for final phase)
-
-## Handoff to Next Phase
-
-<!-- N/A — this is the final phase -->

plans/service-integrations/CONTEXT.md

@@ -1,57 +0,0 @@
-# Feature Context: Service Integrations
-
-## Configuration
-- **Development mode:** Automated
-- **Execution mode:** Orchestrator
-- **Strategy:** Big Bang
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Check:** `npm run check`
-- **Dev server:** `npm run dev` (port: 5173)
-
-## Current State
-Feature not yet started. Codebase is stable on master with 14 widget types, full app CRUD, healthcheck system, and notification infrastructure.
-
-## Existing Patterns to Follow
-- **Service pattern**: See `appService.ts`, `metricService.ts`, `systemStatsService.ts` for adapter/client/transform pattern
-- **Caching**: `metricService.ts` has TTL-based cache — reuse for integration data
-- **API envelope**: All routes use `success()`, `error()`, `paginated()` from response helpers
-- **Zod validation**: All inputs validated via Zod schemas in `validators.ts`
-- **Widget rendering**: `WidgetRenderer.svelte` dispatches to type-specific components
-- **Config storage**: Widget configs stored as stringified JSON in `Widget.config`
-- **Encrypted JSON**: `SystemSettings.oauthConfig` pattern for storing credentials
-
-## Temporary Workarounds
-(none yet)
-
-## Cross-Phase Dependencies
-- Phase 1 (architecture) must complete before all other phases
-- Phase 2 (UI) must complete before Phase 10 (polish)
-- Phases 3-9 (individual integrations) depend only on Phase 1
-- Phase 10 depends on all prior phases
-
-## Deferred Work
-(none yet)
-
-## Failed Approaches
-(none yet)
-
-## Review Findings Log
-(none yet)
-
-## Phase Execution Log
-| Phase | Agent Used | Test Writer | Parallel | Notes |
-|-------|-----------|-------------|----------|-------|
-| (not started) | | | | |
-
-## Environment & Runtime Notes
-- Platform: Windows 10, Git Bash shell
-- Database: SQLite via Prisma
-- NUT integration requires raw TCP socket (Node `net` module)
-- Deluge uses JSON-RPC, NPM uses session-based auth
-
-## Implementation Notes
-- Integration credentials stored encrypted in `integrationConfig` (JSON string on App model)
-- NUT is the only non-HTTP integration — uses direct TCP protocol
-- Alert banners (NUT on-battery, Authentik brute-force) need layout-level rendering, not just widget-level

plans/service-integrations/PLAN.md

@@ -1,57 +0,0 @@
-# Feature: Service Integrations
-
-**Branch:** `feature/service-integrations`
-**Base branch:** `master`
-**Created:** 2026-03-25
-**Status:** 🟡 In Progress
-**Strategy:** Big Bang
-**Mode:** Automated
-**Execution:** Orchestrator
-
-## Summary
-
-Transform the dashboard from a link page into a real-time command center by pulling live data from self-hosted services. Integrations are associated with apps — when you register Pi-hole as an app, you attach the "Pi-hole" integration to it. A new `integration` widget type displays live data endpoints with specialized renderers (gauges, stat cards, lists, charts, progress bars, alert banners).
-
-## Build & Test Commands
-- **Build:** `npm run build`
-- **Test:** `npm test`
-- **Lint:** `npm run lint`
-- **Check:** `npm run check`
-
-## Phases
-
-- [ ] Phase 1: Integration Architecture Foundation [domain: backend] → [subplan](./phase-1-architecture.md)
-- [ ] Phase 2: Integration Widget & App Form UI [domain: frontend] → [subplan](./phase-2-widget-ui.md)
-- [ ] Phase 3: NUT/UPS Integration [domain: backend] → [subplan](./phase-3-nut.md)
-- [ ] Phase 4: Pi-hole Integration [domain: backend] → [subplan](./phase-4-pihole.md)
-- [ ] Phase 5: Portainer Integration [domain: backend] → [subplan](./phase-5-portainer.md)
-- [ ] Phase 6: Gitea Integration [domain: backend] → [subplan](./phase-6-gitea.md)
-- [ ] Phase 7: Nginx Proxy Manager Integration [domain: backend] → [subplan](./phase-7-npm.md)
-- [ ] Phase 8: Authentik Integration [domain: backend] → [subplan](./phase-8-authentik.md)
-- [ ] Phase 9: Media Integrations (Emby + Immich + Deluge + MeTube) [domain: backend] → [subplan](./phase-9-media.md)
-- [ ] Phase 10: Planka Integration + Polish [domain: fullstack] → [subplan](./phase-10-planka.md)
-
-## Phase Progress Log
-
-| Phase | Domain | Status | Review | Build | Committed |
-|-------|--------|--------|--------|-------|-----------|
-| Phase 1: Architecture | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 2: Widget & App Form UI | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 3: NUT/UPS | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 4: Pi-hole | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 5: Portainer | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 6: Gitea | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 7: Nginx Proxy Manager | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 8: Authentik | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 9: Media (Emby+Immich+Deluge+MeTube) | backend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-| Phase 10: Planka + Polish | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
-
-## Parallel Execution Plan
-
-Phases 3+4 (NUT + Pi-hole), 5+6 (Portainer + Gitea), and 7+8 (NPM + Authentik) are independent pairs that can run in parallel.
-
-## Final Review
-- [ ] Comprehensive code review
-- [ ] Full build passes
-- [ ] Full test suite passes
-- [ ] Merged to `master`

plans/service-integrations/phase-1-architecture.md

@@ -1,62 +0,0 @@
-# Phase 1: Integration Architecture Foundation
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Build the core integration framework: TypeScript interfaces, registry pattern, shared cache, Prisma schema changes, API routes, and updated app service. This phase unlocks all subsequent integration phases.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/types.ts` — Define `Integration`, `IntegrationEndpoint`, `IntegrationData`, `IntegrationConfig` interfaces. Each integration has: id, name, icon, authConfigSchema (Zod), extraConfigSchema (optional Zod), endpoints array, testConnection method, fetchData method.
-- [ ] Task 2: Create `src/lib/server/integrations/registry.ts` — Registry singleton with `register(integration)`, `get(id)`, `list()`, `getForApp(app)` methods. Auto-imports integrations from subdirectories.
-- [ ] Task 3: Create `src/lib/server/integrations/cache.ts` — TTL-based cache for integration data. Key: `${appId}:${endpointId}`, configurable TTL per endpoint. Reuse pattern from `metricService.ts`.
-- [ ] Task 4: Create `src/lib/server/integrations/encryption.ts` — Encrypt/decrypt integration config JSON using AES-256-GCM with key from `INTEGRATION_ENCRYPTION_KEY` env var (fallback to `JWT_SECRET` for dev).
-- [ ] Task 5: Update Prisma schema — Add `integrationType String?`, `integrationConfig String?`, `integrationEnabled Boolean @default(false)` to `App` model. Run `npx prisma db push`.
-- [ ] Task 6: Update `src/lib/types/app.ts` — Add integration fields to `AppRecord` interface.
-- [ ] Task 7: Update `src/lib/server/services/appService.ts` — Handle integration fields on create/update. Encrypt `integrationConfig` before storing, decrypt on read.
-- [ ] Task 8: Update `src/lib/utils/validators.ts` — Add `integration` to `WidgetType` enum. Add Zod schema for integration widget config: `{ appId: string, endpointId: string, refreshInterval?: number }`.
-- [ ] Task 9: Create API route `src/routes/api/integrations/+server.ts` — `GET` returns list of available integration types with their endpoints and config schemas.
-- [ ] Task 10: Create API route `src/routes/api/integrations/test/+server.ts` — `POST { appId, integrationType, config }` tests connection to the service.
-- [ ] Task 11: Create API route `src/routes/api/integrations/[appId]/data/[endpointId]/+server.ts` — `GET` fetches live data from integration endpoint, uses cache.
-- [ ] Task 12: Create `src/lib/server/integrations/base.ts` — Abstract base class or helper functions for common integration patterns (HTTP fetch with timeout, error wrapping, response parsing).
-
-## Files to Modify/Create
-- `src/lib/server/integrations/types.ts` — new: core interfaces
-- `src/lib/server/integrations/registry.ts` — new: integration registry
-- `src/lib/server/integrations/cache.ts` — new: TTL cache
-- `src/lib/server/integrations/encryption.ts` — new: config encryption
-- `src/lib/server/integrations/base.ts` — new: shared helpers
-- `prisma/schema.prisma` — modify: add 3 fields to App model
-- `src/lib/types/app.ts` — modify: add integration fields
-- `src/lib/server/services/appService.ts` — modify: handle integration fields
-- `src/lib/utils/validators.ts` — modify: add integration widget type + config schema
-- `src/routes/api/integrations/+server.ts` — new: list integrations
-- `src/routes/api/integrations/test/+server.ts` — new: test connection
-- `src/routes/api/integrations/[appId]/data/[endpointId]/+server.ts` — new: fetch data
-
-## Acceptance Criteria
-- Integration interfaces are well-typed and extensible
-- Registry can register and retrieve integrations
-- Cache prevents repeated API calls within TTL
-- Prisma schema has integration fields, migration runs clean
-- App service encrypts/decrypts integration config transparently
-- API routes return proper envelope responses
-- All Zod schemas validate correctly
-
-## Notes
-- Encryption key: use `INTEGRATION_ENCRYPTION_KEY` env var, fallback to `JWT_SECRET` for development simplicity
-- The registry should be designed so adding a new integration is just: create a directory, implement the interface, register it
-- Cache should handle concurrent requests to the same endpoint gracefully
-- Big Bang strategy: build/tests may not pass after this phase since the integration widget type is registered but has no frontend renderer yet
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Types are comprehensive and well-documented
-- [ ] Encryption is properly implemented (no plaintext secrets in DB)
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-10-planka.md

@@ -1,59 +0,0 @@
-# Phase 10: Planka Integration + Polish
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** fullstack
-
-## Objective
-Implement the Planka integration for task/project management visibility, then polish all integration components with proper error states, loading skeletons, empty states, and consistent styling.
-
-## Tasks
-
-### Planka Integration
-- [ ] Task 1: Create `src/lib/server/integrations/planka/schema.ts` — Auth config: `{ email: string, password: string }`.
-- [ ] Task 2: Create `src/lib/server/integrations/planka/client.ts` — HTTP client. Session-based auth (POST `/api/access-tokens` → Bearer token). Endpoints: `/api/cards`, `/api/boards`.
-- [ ] Task 3: Create `src/lib/server/integrations/planka/transform.ts` — My cards → list with board/list context, overdue → list (red highlight), board summary → stat-card (card counts by list).
-- [ ] Task 4: Create `src/lib/server/integrations/planka/index.ts` — Endpoints: `my-cards` (list), `overdue` (list), `board-summary` (stat-card).
-- [ ] Task 5: Register Planka integration in registry.
-
-### Polish & Error Handling
-- [ ] Task 6: Add loading skeleton states to all renderer components (StatCard, Gauge, List, Progress, Chart).
-- [ ] Task 7: Add empty state messaging to all renderers ("No data available", "No active torrents", etc.).
-- [ ] Task 8: Add error state handling to IntegrationWidget — show error message with retry button when fetch fails.
-- [ ] Task 9: Verify all integrations handle network timeouts, invalid credentials, and unexpected response formats gracefully.
-- [ ] Task 10: Add integration type icons to the app form dropdown and widget creation form.
-- [ ] Task 11: Ensure all renderers respect card sizes (compact/medium/large) and are responsive.
-- [ ] Task 12: Review and standardize all integration endpoint refresh intervals (sensible defaults).
-
-## Files to Modify/Create
-- `src/lib/server/integrations/planka/{schema,client,transform,index}.ts` — new (4 files)
-- `src/lib/server/integrations/registry.ts` — modify: register Planka
-- `src/lib/components/widget/integration/*.svelte` — modify: add loading/empty/error states
-- `src/lib/components/widget/integration/IntegrationWidget.svelte` — modify: error handling + retry
-- `src/lib/components/app/AppForm.svelte` — modify: integration type icons
-
-## Acceptance Criteria
-- Planka: my cards list, overdue cards highlighted, board summary
-- All renderers have loading, empty, and error states
-- All integrations handle network errors gracefully
-- Consistent styling across all integration components
-- Responsive layout on mobile
-- Build passes, tests pass, lint clean
-
-## Notes
-- Planka uses session-based auth similar to NPM — reuse the pattern
-- This is the final phase — build and tests MUST pass here (Big Bang strategy final gate)
-- Polish should cover ALL renderers and integrations, not just Planka
-- Overdue detection: compare card due date to current date, highlight in red
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Build passes
-- [ ] Tests pass (new + existing)
-- [ ] All integrations tested end-to-end
-- [ ] Loading/error/empty states verified
-
-## Handoff to Next Phase
-<!-- Final phase — no handoff needed -->

plans/service-integrations/phase-2-widget-ui.md

@@ -1,65 +0,0 @@
-# Phase 2: Integration Widget & App Form UI
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** frontend
-
-## Objective
-Build the frontend components: IntegrationWidget with all endpoint renderers, extend AppForm with integration configuration UI, and update WidgetCreationForm to support integration widgets.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/components/widget/integration/IntegrationWidget.svelte` — Container component that resolves integration type from app, fetches endpoint data via `/api/integrations/[appId]/data/[endpointId]`, handles loading/error states, delegates to appropriate renderer.
-- [ ] Task 2: Create `src/lib/components/widget/integration/StatCardRenderer.svelte` — Single big number with label, optional trend arrow (up/down/flat), color-coded by threshold. Used for: query counts, session counts, library stats, etc.
-- [ ] Task 3: Create `src/lib/components/widget/integration/GaugeRenderer.svelte` — Circular SVG gauge (0-100%). Color-coded: green (<60%), yellow (60-85%), red (>85%). Used for: battery %, CPU %, disk usage.
-- [ ] Task 4: Create `src/lib/components/widget/integration/ListRenderer.svelte` — Scrollable list of items with icon, title, subtitle, optional badge. Used for: recent commits, top blocked domains, container list, etc.
-- [ ] Task 5: Create `src/lib/components/widget/integration/ProgressRenderer.svelte` — Multiple progress bars with labels and percentages. Used for: torrent downloads, download queue.
-- [ ] Task 6: Create `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — Full-width alert banner with icon, message, severity (info/warning/critical). Used for: UPS on battery, brute force detection.
-- [ ] Task 7: Create `src/lib/components/widget/integration/ChartRenderer.svelte` — Simple bar or line chart using SVG. Used for: query history, uptime charts.
-- [ ] Task 8: Register `integration` widget type in `src/lib/components/widget/WidgetRenderer.svelte` — Import IntegrationWidget, add case to the type switch.
-- [ ] Task 9: Extend `src/lib/components/app/AppForm.svelte` — Add collapsible "Integration" section with: type dropdown (from `/api/integrations`), dynamic auth config fields rendered from Zod schema, "Test Connection" button, enable/disable toggle.
-- [ ] Task 10: Create `src/lib/components/app/IntegrationConfigFields.svelte` — Dynamic form field generator that renders input fields based on a Zod schema (string → text input, number → number input, boolean → toggle). Used by AppForm.
-- [ ] Task 11: Update `src/lib/components/widget/WidgetCreationForm.svelte` — Add integration widget option: app picker (only apps with integration enabled) → endpoint picker → refresh interval.
-- [ ] Task 12: Create `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — Layout-level component that polls for critical alerts (UPS on battery, brute force) and renders AlertBannerRenderer at the top of the page. Add to root layout.
-
-## Files to Modify/Create
-- `src/lib/components/widget/integration/IntegrationWidget.svelte` — new
-- `src/lib/components/widget/integration/StatCardRenderer.svelte` — new
-- `src/lib/components/widget/integration/GaugeRenderer.svelte` — new
-- `src/lib/components/widget/integration/ListRenderer.svelte` — new
-- `src/lib/components/widget/integration/ProgressRenderer.svelte` — new
-- `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — new
-- `src/lib/components/widget/integration/ChartRenderer.svelte` — new
-- `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — new
-- `src/lib/components/widget/WidgetRenderer.svelte` — modify: add integration case
-- `src/lib/components/app/AppForm.svelte` — modify: add integration section
-- `src/lib/components/app/IntegrationConfigFields.svelte` — new
-- `src/lib/components/widget/WidgetCreationForm.svelte` — modify: add integration option
-- `src/routes/+layout.svelte` — modify: add IntegrationAlertOverlay
-
-## Acceptance Criteria
-- IntegrationWidget fetches data and renders correct renderer based on endpoint type
-- All 6 renderers handle loading, error, and empty states gracefully
-- AppForm shows integration config only when a type is selected
-- Dynamic form fields match the integration's auth schema
-- Test Connection button validates and shows success/failure
-- WidgetCreationForm allows creating integration widgets
-- Alert overlay polls and shows critical alerts at layout level
-
-## Notes
-- Renderers should be visually consistent with existing widget styles (card sizes, colors, typography)
-- Use Svelte 5 runes ($state, $derived) for all reactive state
-- Auto-refresh: IntegrationWidget should poll at the endpoint's refreshInterval
-- Big Bang: this phase depends on Phase 1 types but the renderers can be built with mock data initially
-- ⚠️ Temporary breakage: Integration widget type is registered but no real integrations exist yet — widgets will show "no data" until Phase 3+
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Code follows project conventions
-- [ ] No unintended side effects
-- [ ] Responsive design (mobile + desktop)
-- [ ] Loading/error/empty states handled
-- [ ] Accessible (keyboard nav, screen reader labels)
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-3-nut.md

@@ -1,51 +0,0 @@
-# Phase 3: NUT/UPS Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement the NUT/UPS integration using direct TCP protocol to communicate with NUT servers. This is the only non-HTTP integration — it connects directly to the NUT daemon on port 3493.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/nut/schema.ts` — Zod schemas for auth config (`{ nutHost: string, nutPort: number, upsName: string }`) and endpoint responses.
-- [ ] Task 2: Create `src/lib/server/integrations/nut/client.ts` — NUT TCP protocol client using Node `net` module. Implement commands: `LIST UPS`, `LIST VAR <upsName>`, `GET VAR <upsName> <varName>`. Parse NUT protocol responses. Handle connection timeout and cleanup.
-- [ ] Task 3: Create `src/lib/server/integrations/nut/transform.ts` — Transform raw NUT variables to widget-ready data. Map: `battery.charge` → gauge %, `ups.load` → gauge %, `battery.runtime` → stat-card (formatted as Xh Ym), `ups.status` → alert level (OL=ok, OB=warning, LB=critical).
-- [ ] Task 4: Create `src/lib/server/integrations/nut/index.ts` — Integration implementation. Register with registry. Endpoints: `battery-status` (gauge), `load` (gauge), `runtime` (stat-card), `ups-status` (alert-banner). testConnection: attempt TCP connect + `LIST UPS`.
-- [ ] Task 5: Register NUT integration in `src/lib/server/integrations/registry.ts`.
-- [ ] Task 6: Create API route for NUT alerts `src/routes/api/integrations/alerts/+server.ts` — `GET` returns active critical alerts across all apps with integrations (UPS on battery, etc.). Used by IntegrationAlertOverlay.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/nut/schema.ts` — new
-- `src/lib/server/integrations/nut/client.ts` — new
-- `src/lib/server/integrations/nut/transform.ts` — new
-- `src/lib/server/integrations/nut/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register NUT
-- `src/routes/api/integrations/alerts/+server.ts` — new
-
-## Acceptance Criteria
-- NUT client connects to NUT server via TCP and retrieves UPS variables
-- Battery charge displayed as percentage gauge
-- Load displayed as percentage gauge
-- Runtime formatted as human-readable time
-- Status correctly maps OL/OB/LB to alert levels
-- Alert banner fires when status is OB or LB
-- Connection test validates TCP connectivity
-- Handles connection timeouts and refused connections gracefully
-
-## Notes
-- NUT protocol is text-based over TCP: send `GET VAR <ups> <var>\n`, receive `VAR <ups> <var> "<value>"\n`
-- Default port: 3493
-- Does NOT use app.url — uses nutHost/nutPort/upsName from extraConfig
-- TCP connections should be short-lived (connect, query, disconnect) — don't keep persistent connections
-- Common UPS variables: battery.charge, battery.runtime, ups.load, ups.status, input.voltage, output.voltage
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] TCP client handles timeouts and errors
-- [ ] No resource leaks (sockets always closed)
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-4-pihole.md

@@ -1,45 +0,0 @@
-# Phase 4: Pi-hole Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement Pi-hole integration using its admin API to display DNS blocking statistics, top blocked domains, and query logs.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/pihole/schema.ts` — Zod schemas for auth config (`{ apiToken: string }`) and endpoint responses (summary stats, top items, query log).
-- [ ] Task 2: Create `src/lib/server/integrations/pihole/client.ts` — HTTP client for Pi-hole API. Endpoints: `{app.url}/admin/api.php?summary`, `?topItems=N`, `?getAllQueries=N`, `?getQuerySources`. Include auth token as `&auth=<token>`.
-- [ ] Task 3: Create `src/lib/server/integrations/pihole/transform.ts` — Transform API responses: summary → stat-card data (total queries, blocked, block %, clients), topItems → list data, queries → list with allow/block indicator.
-- [ ] Task 4: Create `src/lib/server/integrations/pihole/index.ts` — Integration implementation. Endpoints: `stats-summary` (stat-card), `top-blocked` (list), `query-log` (list), `gravity-status` (stat-card). testConnection: fetch summary endpoint.
-- [ ] Task 5: Register Pi-hole integration in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/pihole/schema.ts` — new
-- `src/lib/server/integrations/pihole/client.ts` — new
-- `src/lib/server/integrations/pihole/transform.ts` — new
-- `src/lib/server/integrations/pihole/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register Pi-hole
-
-## Acceptance Criteria
-- Stats summary shows: total queries, blocked queries, block percentage, unique clients
-- Top blocked domains list with counts
-- Query log with domain, client, allow/block status
-- Gravity status shows last update time and blocklist count
-- Test connection validates API token
-- Handles Pi-hole v5 and v6 API differences gracefully
-
-## Notes
-- Pi-hole API is simple GET-based with auth token as query parameter
-- Some endpoints require authentication (topItems, queries), summary is often public
-- Response format is flat JSON — easy to parse
-- Consider Pi-hole v6 (new API format) — detect version and adapt
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] API responses properly validated
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-5-portainer.md

@@ -1,44 +0,0 @@
-# Phase 5: Portainer Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement Portainer integration to display container and stack status from Docker environments managed by Portainer.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/portainer/schema.ts` — Zod schemas for auth config (`{ apiKey: string, endpointId: number }`) and endpoint responses.
-- [ ] Task 2: Create `src/lib/server/integrations/portainer/client.ts` — HTTP client for Portainer API. Auth via `X-API-Key` header. Endpoints: `/api/endpoints/{id}/docker/containers/json`, `/api/stacks`, `/api/endpoints/{id}/docker/containers/{cid}/json`.
-- [ ] Task 3: Create `src/lib/server/integrations/portainer/transform.ts` — Transform: containers → summary (running/stopped/error counts as stat-card), container list with state + CPU/memory, stacks → list with up/down status.
-- [ ] Task 4: Create `src/lib/server/integrations/portainer/index.ts` — Integration implementation. Endpoints: `container-summary` (stat-card), `container-list` (list), `stack-status` (list). testConnection: fetch endpoints list.
-- [ ] Task 5: Register Portainer integration in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/portainer/schema.ts` — new
-- `src/lib/server/integrations/portainer/client.ts` — new
-- `src/lib/server/integrations/portainer/transform.ts` — new
-- `src/lib/server/integrations/portainer/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register Portainer
-
-## Acceptance Criteria
-- Container summary shows running/stopped/error counts
-- Container list shows name, state, image, CPU/memory usage
-- Stack status shows stack names with up/down indicators
-- Test connection validates API key and endpoint ID
-- Handles multiple Portainer endpoints
-
-## Notes
-- Portainer API uses API key in `X-API-Key` header
-- Container stats (CPU/memory) require a separate API call per container — limit to top N for performance
-- Stack status comes from a separate endpoint
-- endpointId is required — Portainer manages multiple Docker hosts
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Performance: limited container stats calls
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-6-gitea.md

@@ -1,45 +0,0 @@
-# Phase 6: Gitea Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement Gitea integration to display recent commits, open pull requests, CI/CD status, and releases from Gitea instances.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/gitea/schema.ts` — Zod schemas for auth config (`{ apiToken: string, repos?: string[] }`) and endpoint responses.
-- [ ] Task 2: Create `src/lib/server/integrations/gitea/client.ts` — HTTP client for Gitea API v1. Auth via `Authorization: token <apiToken>` header. Endpoints: `/api/v1/repos/search`, `/api/v1/repos/{owner}/{repo}/commits`, `/api/v1/repos/{owner}/{repo}/pulls`, `/api/v1/repos/{owner}/{repo}/releases`, `/api/v1/repos/{owner}/{repo}/actions/runners`.
-- [ ] Task 3: Create `src/lib/server/integrations/gitea/transform.ts` — Transform: commits → list with author/message/date, PRs → stat-card (open count) + list, CI → list with pass/fail badges, releases → list with tag/date.
-- [ ] Task 4: Create `src/lib/server/integrations/gitea/index.ts` — Integration implementation. Endpoints: `recent-commits` (list), `open-prs` (stat-card), `ci-status` (list), `releases` (list). testConnection: fetch authenticated user.
-- [ ] Task 5: Register Gitea integration in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/gitea/schema.ts` — new
-- `src/lib/server/integrations/gitea/client.ts` — new
-- `src/lib/server/integrations/gitea/transform.ts` — new
-- `src/lib/server/integrations/gitea/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register Gitea
-
-## Acceptance Criteria
-- Recent commits across repos with author, message, timestamp
-- Open PR count as stat-card, PR list with title/author/repo
-- CI/CD status with workflow name and pass/fail badge
-- Releases list with tag, name, and date
-- Optional repo filter (if configured, only show data from those repos)
-- Test connection validates API token
-
-## Notes
-- If `repos` config is empty, auto-discover all accessible repos
-- Limit commits/PRs to last N per repo for performance
-- CI status depends on Gitea Actions being enabled (act-runner)
-- API pagination: use `?limit=N&page=1` parameters
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Handles empty repos list (auto-discovery)
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-7-npm.md

@@ -1,45 +0,0 @@
-# Phase 7: Nginx Proxy Manager Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement Nginx Proxy Manager integration to display proxy hosts, SSL certificate expiry warnings, and upstream reachability status.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/npm/schema.ts` — Zod schemas for auth config (`{ email: string, password: string }`) and endpoint responses.
-- [ ] Task 2: Create `src/lib/server/integrations/npm/client.ts` — HTTP client for NPM API. Session-based auth: POST `/api/tokens` with email+password → get JWT → use for subsequent requests. Endpoints: `/api/nginx/proxy-hosts`, `/api/nginx/certificates`, `/api/nginx/proxy-hosts/{id}`. Cache session token.
-- [ ] Task 3: Create `src/lib/server/integrations/npm/transform.ts` — Transform: proxy hosts → list with domain/status/SSL info, certificates → list with expiry countdown (red <7d, yellow <14d, green >14d), upstream → list with reachable/unreachable indicator.
-- [ ] Task 4: Create `src/lib/server/integrations/npm/index.ts` — Integration implementation. Endpoints: `proxy-hosts` (list), `ssl-certificates` (list), `upstream-status` (list). testConnection: authenticate and fetch proxy hosts.
-- [ ] Task 5: Register NPM integration in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/npm/schema.ts` — new
-- `src/lib/server/integrations/npm/client.ts` — new
-- `src/lib/server/integrations/npm/transform.ts` — new
-- `src/lib/server/integrations/npm/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register NPM
-
-## Acceptance Criteria
-- Proxy hosts list with domain name, enabled/disabled status
-- SSL certificates with expiry date and color-coded countdown
-- Upstream status shows reachable/unreachable per host
-- Session-based auth works (login → token → API calls)
-- Handles expired session token (re-authenticate automatically)
-- Test connection validates email/password credentials
-
-## Notes
-- NPM uses session-based auth, not API keys — need to login first, cache the JWT
-- SSL expiry is the highest-value feature here — highlight expiring certs prominently
-- The session token has a limited lifetime — handle re-authentication on 401 responses
-- NPM API is relatively simple and well-documented
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Session token caching and re-auth implemented
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-8-authentik.md

@@ -1,45 +0,0 @@
-# Phase 8: Authentik Integration
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement Authentik integration for security monitoring: active sessions, login events, brute force detection, and user/group statistics.
-
-## Tasks
-
-- [ ] Task 1: Create `src/lib/server/integrations/authentik/schema.ts` — Zod schemas for auth config (`{ apiToken: string }`) and endpoint responses.
-- [ ] Task 2: Create `src/lib/server/integrations/authentik/client.ts` — HTTP client for Authentik API v3. Auth via `Authorization: Bearer <apiToken>` header. Endpoints: `/api/v3/core/sessions/`, `/api/v3/events/events/?action=login`, `/api/v3/events/events/?action=login_failed`, `/api/v3/core/users/`, `/api/v3/core/groups/`.
-- [ ] Task 3: Create `src/lib/server/integrations/authentik/transform.ts` — Transform: sessions → stat-card (count), login events → list with username/IP/timestamp/success, failed logins → brute force detection (>5 failures from same IP in 10 min = alert), user/group stats → stat-card.
-- [ ] Task 4: Create `src/lib/server/integrations/authentik/index.ts` — Integration implementation. Endpoints: `sessions` (stat-card), `login-events` (list), `security-alerts` (alert-banner), `user-stats` (stat-card). testConnection: fetch authenticated user info.
-- [ ] Task 5: Register Authentik integration in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/authentik/schema.ts` — new
-- `src/lib/server/integrations/authentik/client.ts` — new
-- `src/lib/server/integrations/authentik/transform.ts` — new
-- `src/lib/server/integrations/authentik/index.ts` — new
-- `src/lib/server/integrations/registry.ts` — modify: register Authentik
-
-## Acceptance Criteria
-- Active sessions count displayed as stat-card
-- Login events list with username, IP, timestamp, success/failure
-- Brute force detection: alert when >5 failed logins from same IP within 10 minutes
-- User/group stats displayed as stat-card
-- Security alerts surface via alert banner system
-- Test connection validates API token
-
-## Notes
-- Authentik API v3 uses pagination — handle `?page=N&page_size=N`
-- Brute force detection is computed client-side from event data, not a native Authentik feature
-- The threshold (5 failures / 10 min) should be configurable via extra config
-- Security alerts should integrate with the alert banner overlay from Phase 2
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Brute force detection logic is sound
-- [ ] Code follows project conventions
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

plans/service-integrations/phase-9-media.md

@@ -1,69 +0,0 @@
-# Phase 9: Media Integrations (Emby + Immich + Deluge + MeTube)
-
-**Status:** ⬜ Not Started
-**Parent plan:** [PLAN.md](./PLAN.md)
-**Domain:** backend
-
-## Objective
-Implement four media-related integrations bundled together since each is relatively small: Emby (media server), Immich (photo management), Deluge (torrent client), and MeTube (video downloader).
-
-## Tasks
-
-### Emby
-- [ ] Task 1: Create `src/lib/server/integrations/emby/schema.ts` — Auth config: `{ apiKey: string }`.
-- [ ] Task 2: Create `src/lib/server/integrations/emby/client.ts` — HTTP client. Endpoints: `/emby/Sessions?api_key=<key>`, `/emby/Items/Counts?api_key=<key>`, `/emby/Items/Latest?api_key=<key>`.
-- [ ] Task 3: Create `src/lib/server/integrations/emby/transform.ts` — Now playing → list (user, title, transcode/direct, quality), library stats → stat-card (movies, shows, episodes), recently added → list with titles.
-- [ ] Task 4: Create `src/lib/server/integrations/emby/index.ts` — Endpoints: `now-playing` (list), `library-stats` (stat-card), `recently-added` (list), `active-streams` (stat-card).
-
-### Immich
-- [ ] Task 5: Create `src/lib/server/integrations/immich/schema.ts` — Auth config: `{ apiKey: string }`.
-- [ ] Task 6: Create `src/lib/server/integrations/immich/client.ts` — HTTP client. Auth via `x-api-key` header. Endpoints: `/api/server-info/statistics`, `/api/assets?order=desc&limit=10`, `/api/memories`.
-- [ ] Task 7: Create `src/lib/server/integrations/immich/transform.ts` — Library stats → stat-card (photos, videos, storage), recent uploads → list, memory of day → stat-card.
-- [ ] Task 8: Create `src/lib/server/integrations/immich/index.ts` — Endpoints: `library-stats` (stat-card), `recent-uploads` (list), `memory-of-day` (stat-card).
-
-### Deluge
-- [ ] Task 9: Create `src/lib/server/integrations/deluge/schema.ts` — Auth config: `{ password: string }`.
-- [ ] Task 10: Create `src/lib/server/integrations/deluge/client.ts` — JSON-RPC client at `{app.url}/json`. Auth flow: call `auth.login` first, then `web.update_ui` / `core.get_torrents_status`. Handle session cookie.
-- [ ] Task 11: Create `src/lib/server/integrations/deluge/transform.ts` — Active torrents → progress list (name, %, speed), transfer speed → gauge, disk space → gauge.
-- [ ] Task 12: Create `src/lib/server/integrations/deluge/index.ts` — Endpoints: `active-torrents` (progress), `transfer-speed` (gauge), `disk-space` (gauge).
-
-### MeTube
-- [ ] Task 13: Create `src/lib/server/integrations/metube/schema.ts` — Auth config: `{}` (no auth).
-- [ ] Task 14: Create `src/lib/server/integrations/metube/client.ts` — HTTP client. Endpoint: `/api/history`, `/api/queue`.
-- [ ] Task 15: Create `src/lib/server/integrations/metube/transform.ts` — Download queue → progress list (title, %, status).
-- [ ] Task 16: Create `src/lib/server/integrations/metube/index.ts` — Endpoints: `download-queue` (progress).
-
-### Registration
-- [ ] Task 17: Register all four integrations in registry.
-
-## Files to Modify/Create
-- `src/lib/server/integrations/emby/{schema,client,transform,index}.ts` — new (4 files)
-- `src/lib/server/integrations/immich/{schema,client,transform,index}.ts` — new (4 files)
-- `src/lib/server/integrations/deluge/{schema,client,transform,index}.ts` — new (4 files)
-- `src/lib/server/integrations/metube/{schema,client,transform,index}.ts` — new (4 files)
-- `src/lib/server/integrations/registry.ts` — modify: register all four
-
-## Acceptance Criteria
-- All four integrations fetch and transform data correctly
-- Emby: now playing, library stats, recently added
-- Immich: library stats, recent uploads, memory of day
-- Deluge: active torrents with progress, transfer speed, disk space
-- MeTube: download queue with progress
-- Deluge JSON-RPC auth flow handles session cookies
-- MeTube works without any auth
-- All test connections validate properly
-
-## Notes
-- Deluge JSON-RPC is the trickiest — requires auth.login call first, then session cookie for subsequent calls
-- MeTube has a very limited API — may need to poll /api/queue for real-time data
-- Immich API versions change frequently — target current stable
-- Emby API key goes in query string, not header
-
-## Review Checklist
-- [ ] All tasks completed
-- [ ] Deluge session handling is robust
-- [ ] Code follows project conventions
-- [ ] Each integration is self-contained in its directory
-
-## Handoff to Next Phase
-<!-- Filled in after completion -->

prisma/migrations/20260324165855_init/migration.sql

@@ -1,187 +0,0 @@
--- CreateTable
-CREATE TABLE "User" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "email" TEXT NOT NULL,
-    "password" TEXT,
-    "displayName" TEXT NOT NULL,
-    "avatarUrl" TEXT,
-    "authProvider" TEXT NOT NULL DEFAULT 'local',
-    "role" TEXT NOT NULL DEFAULT 'user',
-    "refreshToken" TEXT,
-    "refreshTokenExpiresAt" DATETIME,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-
--- CreateTable
-CREATE TABLE "Group" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "name" TEXT NOT NULL,
-    "description" TEXT,
-    "isDefault" BOOLEAN NOT NULL DEFAULT false,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-
--- CreateTable
-CREATE TABLE "UserGroup" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "userId" TEXT NOT NULL,
-    "groupId" TEXT NOT NULL,
-    CONSTRAINT "UserGroup_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
-    CONSTRAINT "UserGroup_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "App" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "name" TEXT NOT NULL,
-    "url" TEXT NOT NULL,
-    "icon" TEXT,
-    "iconType" TEXT NOT NULL DEFAULT 'lucide',
-    "description" TEXT,
-    "category" TEXT,
-    "tags" TEXT NOT NULL DEFAULT '',
-    "healthcheckEnabled" BOOLEAN NOT NULL DEFAULT false,
-    "healthcheckInterval" INTEGER NOT NULL DEFAULT 300,
-    "healthcheckMethod" TEXT NOT NULL DEFAULT 'GET',
-    "healthcheckExpectedStatus" INTEGER NOT NULL DEFAULT 200,
-    "healthcheckTimeout" INTEGER NOT NULL DEFAULT 5000,
-    "createdById" TEXT,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    CONSTRAINT "App_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "AppStatus" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "appId" TEXT NOT NULL,
-    "status" TEXT NOT NULL DEFAULT 'unknown',
-    "responseTime" INTEGER,
-    "checkedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    CONSTRAINT "AppStatus_appId_fkey" FOREIGN KEY ("appId") REFERENCES "App" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "Board" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "name" TEXT NOT NULL,
-    "icon" TEXT,
-    "description" TEXT,
-    "isDefault" BOOLEAN NOT NULL DEFAULT false,
-    "isGuestAccessible" BOOLEAN NOT NULL DEFAULT false,
-    "backgroundConfig" TEXT,
-    "createdById" TEXT,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    CONSTRAINT "Board_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "Section" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "boardId" TEXT NOT NULL,
-    "title" TEXT NOT NULL,
-    "icon" TEXT,
-    "order" INTEGER NOT NULL DEFAULT 0,
-    "isExpandedByDefault" BOOLEAN NOT NULL DEFAULT true,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    CONSTRAINT "Section_boardId_fkey" FOREIGN KEY ("boardId") REFERENCES "Board" ("id") ON DELETE CASCADE ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "Widget" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "sectionId" TEXT NOT NULL,
-    "type" TEXT NOT NULL,
-    "order" INTEGER NOT NULL DEFAULT 0,
-    "config" TEXT NOT NULL DEFAULT '{}',
-    "appId" TEXT,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    CONSTRAINT "Widget_sectionId_fkey" FOREIGN KEY ("sectionId") REFERENCES "Section" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
-    CONSTRAINT "Widget_appId_fkey" FOREIGN KEY ("appId") REFERENCES "App" ("id") ON DELETE SET NULL ON UPDATE CASCADE
-);
-
--- CreateTable
-CREATE TABLE "Permission" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "entityType" TEXT NOT NULL,
-    "entityId" TEXT NOT NULL,
-    "targetType" TEXT NOT NULL,
-    "targetId" TEXT NOT NULL,
-    "level" TEXT NOT NULL,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-
--- CreateTable
-CREATE TABLE "SystemSettings" (
-    "id" TEXT NOT NULL PRIMARY KEY DEFAULT 'singleton',
-    "authMode" TEXT NOT NULL DEFAULT 'local',
-    "registrationEnabled" BOOLEAN NOT NULL DEFAULT true,
-    "oauthClientId" TEXT,
-    "oauthClientSecret" TEXT,
-    "oauthDiscoveryUrl" TEXT,
-    "defaultTheme" TEXT NOT NULL DEFAULT 'dark',
-    "defaultPrimaryColor" TEXT NOT NULL DEFAULT '#6366f1',
-    "healthcheckDefaults" TEXT NOT NULL DEFAULT '{}',
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
-
--- CreateIndex
-CREATE INDEX "User_email_idx" ON "User"("email");
-
--- CreateIndex
-CREATE UNIQUE INDEX "Group_name_key" ON "Group"("name");
-
--- CreateIndex
-CREATE INDEX "UserGroup_userId_idx" ON "UserGroup"("userId");
-
--- CreateIndex
-CREATE INDEX "UserGroup_groupId_idx" ON "UserGroup"("groupId");
-
--- CreateIndex
-CREATE UNIQUE INDEX "UserGroup_userId_groupId_key" ON "UserGroup"("userId", "groupId");
-
--- CreateIndex
-CREATE INDEX "App_name_idx" ON "App"("name");
-
--- CreateIndex
-CREATE INDEX "App_category_idx" ON "App"("category");
-
--- CreateIndex
-CREATE INDEX "App_createdById_idx" ON "App"("createdById");
-
--- CreateIndex
-CREATE INDEX "AppStatus_appId_idx" ON "AppStatus"("appId");
-
--- CreateIndex
-CREATE INDEX "AppStatus_checkedAt_idx" ON "AppStatus"("checkedAt");
-
--- CreateIndex
-CREATE INDEX "Board_createdById_idx" ON "Board"("createdById");
-
--- CreateIndex
-CREATE INDEX "Section_boardId_idx" ON "Section"("boardId");
-
--- CreateIndex
-CREATE INDEX "Widget_sectionId_idx" ON "Widget"("sectionId");
-
--- CreateIndex
-CREATE INDEX "Widget_appId_idx" ON "Widget"("appId");
-
--- CreateIndex
-CREATE INDEX "Permission_entityType_entityId_idx" ON "Permission"("entityType", "entityId");
-
--- CreateIndex
-CREATE INDEX "Permission_targetType_targetId_idx" ON "Permission"("targetType", "targetId");
-
--- CreateIndex
-CREATE UNIQUE INDEX "Permission_entityType_entityId_targetType_targetId_key" ON "Permission"("entityType", "entityId", "targetType", "targetId");

prisma/migrations/20260324212043_add_user_preferences/migration.sql

@@ -1,6 +0,0 @@
--- AlterTable
-ALTER TABLE "User" ADD COLUMN "backgroundType" TEXT;
-ALTER TABLE "User" ADD COLUMN "locale" TEXT;
-ALTER TABLE "User" ADD COLUMN "primaryHue" INTEGER;
-ALTER TABLE "User" ADD COLUMN "primarySaturation" INTEGER;
-ALTER TABLE "User" ADD COLUMN "themeMode" TEXT;

prisma/migrations/20260410200000_init/migration.sql

@@ -1,15 +1,160 @@
--- AlterTable
-ALTER TABLE "Board" ADD COLUMN "backgroundType" TEXT;
-ALTER TABLE "Board" ADD COLUMN "cardSize" TEXT;
-ALTER TABLE "Board" ADD COLUMN "customCss" TEXT;
-ALTER TABLE "Board" ADD COLUMN "themeHue" INTEGER;
-ALTER TABLE "Board" ADD COLUMN "themeSaturation" INTEGER;
-ALTER TABLE "Board" ADD COLUMN "wallpaperBlur" INTEGER;
-ALTER TABLE "Board" ADD COLUMN "wallpaperOverlay" REAL;
-ALTER TABLE "Board" ADD COLUMN "wallpaperUrl" TEXT;
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "email" TEXT NOT NULL,
+    "password" TEXT,
+    "displayName" TEXT NOT NULL,
+    "avatarUrl" TEXT,
+    "authProvider" TEXT NOT NULL DEFAULT 'local',
+    "role" TEXT NOT NULL DEFAULT 'user',
+    "refreshToken" TEXT,
+    "refreshTokenExpiresAt" DATETIME,
+    "onboardingComplete" BOOLEAN NOT NULL DEFAULT false,
+    "trackRecentApps" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "themeMode" TEXT,
+    "primaryHue" INTEGER,
+    "primarySaturation" INTEGER,
+    "backgroundType" TEXT,
+    "locale" TEXT
+);
 
--- AlterTable
-ALTER TABLE "Section" ADD COLUMN "cardSize" TEXT;
+-- CreateTable
+CREATE TABLE "Group" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "isDefault" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "UserGroup" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "groupId" TEXT NOT NULL,
+    CONSTRAINT "UserGroup_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
+    CONSTRAINT "UserGroup_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "App" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "icon" TEXT,
+    "iconType" TEXT NOT NULL DEFAULT 'lucide',
+    "description" TEXT,
+    "category" TEXT,
+    "tags" TEXT NOT NULL DEFAULT '',
+    "healthcheckEnabled" BOOLEAN NOT NULL DEFAULT false,
+    "healthcheckInterval" INTEGER NOT NULL DEFAULT 300,
+    "healthcheckMethod" TEXT NOT NULL DEFAULT 'GET',
+    "healthcheckExpectedStatus" INTEGER NOT NULL DEFAULT 200,
+    "healthcheckTimeout" INTEGER NOT NULL DEFAULT 5000,
+    "integrationType" TEXT,
+    "integrationConfig" TEXT,
+    "integrationEnabled" BOOLEAN NOT NULL DEFAULT false,
+    "createdById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "App_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "AppStatus" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "appId" TEXT NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'unknown',
+    "responseTime" INTEGER,
+    "checkedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "AppStatus_appId_fkey" FOREIGN KEY ("appId") REFERENCES "App" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Board" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "icon" TEXT,
+    "description" TEXT,
+    "isDefault" BOOLEAN NOT NULL DEFAULT false,
+    "isGuestAccessible" BOOLEAN NOT NULL DEFAULT false,
+    "backgroundConfig" TEXT,
+    "themeHue" INTEGER,
+    "themeSaturation" INTEGER,
+    "backgroundType" TEXT,
+    "cardSize" TEXT,
+    "wallpaperUrl" TEXT,
+    "wallpaperBlur" INTEGER,
+    "wallpaperOverlay" REAL,
+    "customCss" TEXT,
+    "createdById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Board_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Section" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "boardId" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "icon" TEXT,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "isExpandedByDefault" BOOLEAN NOT NULL DEFAULT true,
+    "cardSize" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Section_boardId_fkey" FOREIGN KEY ("boardId") REFERENCES "Board" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Widget" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "sectionId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "config" TEXT NOT NULL DEFAULT '{}',
+    "appId" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "Widget_sectionId_fkey" FOREIGN KEY ("sectionId") REFERENCES "Section" ("id") ON DELETE CASCADE ON UPDATE CASCADE,
+    CONSTRAINT "Widget_appId_fkey" FOREIGN KEY ("appId") REFERENCES "App" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Permission" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "entityType" TEXT NOT NULL,
+    "entityId" TEXT NOT NULL,
+    "targetType" TEXT NOT NULL,
+    "targetId" TEXT NOT NULL,
+    "level" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "SystemSettings" (
+    "id" TEXT NOT NULL PRIMARY KEY DEFAULT 'singleton',
+    "authMode" TEXT NOT NULL DEFAULT 'local',
+    "registrationEnabled" BOOLEAN NOT NULL DEFAULT true,
+    "oauthClientId" TEXT,
+    "oauthClientSecret" TEXT,
+    "oauthDiscoveryUrl" TEXT,
+    "defaultTheme" TEXT NOT NULL DEFAULT 'dark',
+    "defaultPrimaryColor" TEXT NOT NULL DEFAULT '#6366f1',
+    "healthcheckDefaults" TEXT NOT NULL DEFAULT '{}',
+    "customCss" TEXT,
+    "onboardingComplete" BOOLEAN NOT NULL DEFAULT false,
+    "backupEnabled" BOOLEAN NOT NULL DEFAULT false,
+    "backupCronExpression" TEXT NOT NULL DEFAULT '0 3 * * *',
+    "backupMaxCount" INTEGER NOT NULL DEFAULT 10,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
 
 -- CreateTable
 CREATE TABLE "Tag" (
@@ -121,54 +266,59 @@ CREATE TABLE "BoardTemplate" (
     CONSTRAINT "BoardTemplate_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User" ("id") ON DELETE SET NULL ON UPDATE CASCADE
 );
 
--- RedefineTables
-PRAGMA defer_foreign_keys=ON;
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_SystemSettings" (
-    "id" TEXT NOT NULL PRIMARY KEY DEFAULT 'singleton',
-    "authMode" TEXT NOT NULL DEFAULT 'local',
-    "registrationEnabled" BOOLEAN NOT NULL DEFAULT true,
-    "oauthClientId" TEXT,
-    "oauthClientSecret" TEXT,
-    "oauthDiscoveryUrl" TEXT,
-    "defaultTheme" TEXT NOT NULL DEFAULT 'dark',
-    "defaultPrimaryColor" TEXT NOT NULL DEFAULT '#6366f1',
-    "healthcheckDefaults" TEXT NOT NULL DEFAULT '{}',
-    "customCss" TEXT,
-    "onboardingComplete" BOOLEAN NOT NULL DEFAULT false,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL
-);
-INSERT INTO "new_SystemSettings" ("authMode", "createdAt", "defaultPrimaryColor", "defaultTheme", "healthcheckDefaults", "id", "oauthClientId", "oauthClientSecret", "oauthDiscoveryUrl", "registrationEnabled", "updatedAt") SELECT "authMode", "createdAt", "defaultPrimaryColor", "defaultTheme", "healthcheckDefaults", "id", "oauthClientId", "oauthClientSecret", "oauthDiscoveryUrl", "registrationEnabled", "updatedAt" FROM "SystemSettings";
-DROP TABLE "SystemSettings";
-ALTER TABLE "new_SystemSettings" RENAME TO "SystemSettings";
-CREATE TABLE "new_User" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "email" TEXT NOT NULL,
-    "password" TEXT,
-    "displayName" TEXT NOT NULL,
-    "avatarUrl" TEXT,
-    "authProvider" TEXT NOT NULL DEFAULT 'local',
-    "role" TEXT NOT NULL DEFAULT 'user',
-    "refreshToken" TEXT,
-    "refreshTokenExpiresAt" DATETIME,
-    "onboardingComplete" BOOLEAN NOT NULL DEFAULT false,
-    "trackRecentApps" BOOLEAN NOT NULL DEFAULT true,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" DATETIME NOT NULL,
-    "themeMode" TEXT,
-    "primaryHue" INTEGER,
-    "primarySaturation" INTEGER,
-    "backgroundType" TEXT,
-    "locale" TEXT
-);
-INSERT INTO "new_User" ("authProvider", "avatarUrl", "backgroundType", "createdAt", "displayName", "email", "id", "locale", "password", "primaryHue", "primarySaturation", "refreshToken", "refreshTokenExpiresAt", "role", "themeMode", "updatedAt") SELECT "authProvider", "avatarUrl", "backgroundType", "createdAt", "displayName", "email", "id", "locale", "password", "primaryHue", "primarySaturation", "refreshToken", "refreshTokenExpiresAt", "role", "themeMode", "updatedAt" FROM "User";
-DROP TABLE "User";
-ALTER TABLE "new_User" RENAME TO "User";
+-- CreateIndex
 CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
 CREATE INDEX "User_email_idx" ON "User"("email");
-PRAGMA foreign_keys=ON;
-PRAGMA defer_foreign_keys=OFF;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Group_name_key" ON "Group"("name");
+
+-- CreateIndex
+CREATE INDEX "UserGroup_userId_idx" ON "UserGroup"("userId");
+
+-- CreateIndex
+CREATE INDEX "UserGroup_groupId_idx" ON "UserGroup"("groupId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserGroup_userId_groupId_key" ON "UserGroup"("userId", "groupId");
+
+-- CreateIndex
+CREATE INDEX "App_name_idx" ON "App"("name");
+
+-- CreateIndex
+CREATE INDEX "App_category_idx" ON "App"("category");
+
+-- CreateIndex
+CREATE INDEX "App_createdById_idx" ON "App"("createdById");
+
+-- CreateIndex
+CREATE INDEX "AppStatus_appId_idx" ON "AppStatus"("appId");
+
+-- CreateIndex
+CREATE INDEX "AppStatus_checkedAt_idx" ON "AppStatus"("checkedAt");
+
+-- CreateIndex
+CREATE INDEX "Board_createdById_idx" ON "Board"("createdById");
+
+-- CreateIndex
+CREATE INDEX "Section_boardId_idx" ON "Section"("boardId");
+
+-- CreateIndex
+CREATE INDEX "Widget_sectionId_idx" ON "Widget"("sectionId");
+
+-- CreateIndex
+CREATE INDEX "Widget_appId_idx" ON "Widget"("appId");
+
+-- CreateIndex
+CREATE INDEX "Permission_entityType_entityId_idx" ON "Permission"("entityType", "entityId");
+
+-- CreateIndex
+CREATE INDEX "Permission_targetType_targetId_idx" ON "Permission"("targetType", "targetId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Permission_entityType_entityId_targetType_targetId_key" ON "Permission"("entityType", "entityId", "targetType", "targetId");
 
 -- CreateIndex
 CREATE UNIQUE INDEX "Tag_name_key" ON "Tag"("name");
@@ -241,3 +391,4 @@ CREATE INDEX "AuditLog_createdAt_idx" ON "AuditLog"("createdAt");
 
 -- CreateIndex
 CREATE INDEX "BoardTemplate_createdById_idx" ON "BoardTemplate"("createdById");
+

prisma/migrations/20260416000000_add_session_model/migration.sql

@@ -0,0 +1,62 @@
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "label" TEXT,
+    "userAgent" TEXT,
+    "ipAddress" TEXT,
+    "rememberMe" BOOLEAN NOT NULL DEFAULT false,
+    "lastUsedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expiresAt" DATETIME NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE INDEX "Session_userId_idx" ON "Session"("userId");
+
+-- CreateIndex
+CREATE INDEX "Session_expiresAt_idx" ON "Session"("expiresAt");
+
+-- RedefineTables: drop refreshToken + refreshTokenExpiresAt from User.
+-- All existing user sessions will be invalidated; users must re-login once after upgrade.
+PRAGMA foreign_keys=OFF;
+
+CREATE TABLE "new_User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "email" TEXT NOT NULL,
+    "password" TEXT,
+    "displayName" TEXT NOT NULL,
+    "avatarUrl" TEXT,
+    "authProvider" TEXT NOT NULL DEFAULT 'local',
+    "role" TEXT NOT NULL DEFAULT 'user',
+    "onboardingComplete" BOOLEAN NOT NULL DEFAULT false,
+    "trackRecentApps" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "themeMode" TEXT,
+    "primaryHue" INTEGER,
+    "primarySaturation" INTEGER,
+    "backgroundType" TEXT,
+    "locale" TEXT
+);
+
+INSERT INTO "new_User" (
+    "id", "email", "password", "displayName", "avatarUrl", "authProvider", "role",
+    "onboardingComplete", "trackRecentApps", "createdAt", "updatedAt",
+    "themeMode", "primaryHue", "primarySaturation", "backgroundType", "locale"
+)
+SELECT
+    "id", "email", "password", "displayName", "avatarUrl", "authProvider", "role",
+    "onboardingComplete", "trackRecentApps", "createdAt", "updatedAt",
+    "themeMode", "primaryHue", "primarySaturation", "backgroundType", "locale"
+FROM "User";
+
+DROP TABLE "User";
+ALTER TABLE "new_User" RENAME TO "User";
+
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+CREATE INDEX "User_email_idx" ON "User"("email");
+
+PRAGMA foreign_keys=ON;

prisma/migrations/20260416010000_add_invite_model/migration.sql

@@ -0,0 +1,21 @@
+-- CreateTable
+CREATE TABLE "Invite" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "tokenHash" TEXT NOT NULL,
+    "email" TEXT,
+    "role" TEXT NOT NULL DEFAULT 'user',
+    "expiresAt" DATETIME NOT NULL,
+    "usedAt" DATETIME,
+    "usedByUserId" TEXT,
+    "createdById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Invite_tokenHash_key" ON "Invite"("tokenHash");
+
+-- CreateIndex
+CREATE INDEX "Invite_tokenHash_idx" ON "Invite"("tokenHash");
+
+-- CreateIndex
+CREATE INDEX "Invite_createdById_idx" ON "Invite"("createdById");

prisma/migrations/20260526000000_hardening_indexes_and_session_reuse/migration.sql

@@ -0,0 +1,96 @@
+-- Production-readiness hardening migration:
+--   * Session: switch tokenHash from bcrypt-hashed to sha256-hashed (deterministic
+--     lookup), add previousTokenHash for refresh-token reuse detection, add
+--     unique constraint on tokenHash.
+--   * AppStatus, AppClick, Notification, AuditLog: composite indexes that match
+--     the actual query shapes (entity + time range).
+--
+-- Existing Session rows store bcrypt hashes that are no longer compatible with
+-- the new sha256 lookup. We invalidate ALL sessions on upgrade — users will be
+-- prompted to log in once. This is the safer option than keeping incompatible
+-- rows that would silently fail validation.
+
+PRAGMA foreign_keys=OFF;
+
+-- ---- Session: rebuild with new shape and clear contents ---------------------
+CREATE TABLE "new_Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "previousTokenHash" TEXT,
+    "label" TEXT,
+    "userAgent" TEXT,
+    "ipAddress" TEXT,
+    "rememberMe" BOOLEAN NOT NULL DEFAULT false,
+    "lastUsedAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "expiresAt" DATETIME NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+-- intentionally do NOT copy old rows — bcrypt hashes won't validate against
+-- sha256 lookups and users would silently fail to refresh.
+DROP TABLE "Session";
+ALTER TABLE "new_Session" RENAME TO "Session";
+
+CREATE UNIQUE INDEX "Session_tokenHash_key" ON "Session"("tokenHash");
+CREATE INDEX "Session_userId_idx" ON "Session"("userId");
+CREATE INDEX "Session_expiresAt_idx" ON "Session"("expiresAt");
+
+-- ---- Invite: same bcrypt -> sha256 migration for the same reason ------------
+-- Invites are short-lived (default 7 days). Existing unused invite rows would
+-- be unreachable after the switch; clear them so admins re-issue if needed.
+CREATE TABLE "new_Invite" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "tokenHash" TEXT NOT NULL,
+    "email" TEXT,
+    "role" TEXT NOT NULL DEFAULT 'user',
+    "expiresAt" DATETIME NOT NULL,
+    "usedAt" DATETIME,
+    "usedByUserId" TEXT,
+    "createdById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+DROP TABLE "Invite";
+ALTER TABLE "new_Invite" RENAME TO "Invite";
+
+CREATE UNIQUE INDEX "Invite_tokenHash_key" ON "Invite"("tokenHash");
+CREATE INDEX "Invite_createdById_idx" ON "Invite"("createdById");
+
+-- ---- ApiToken: same bcrypt -> sha256 migration ------------------------------
+-- Existing API tokens stop working at upgrade; users must regenerate. This is
+-- preferable to keeping broken-but-present rows.
+CREATE TABLE "new_ApiToken" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "scope" TEXT NOT NULL,
+    "lastUsedAt" DATETIME,
+    "expiresAt" DATETIME,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "ApiToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+DROP TABLE "ApiToken";
+ALTER TABLE "new_ApiToken" RENAME TO "ApiToken";
+
+CREATE UNIQUE INDEX "ApiToken_tokenHash_key" ON "ApiToken"("tokenHash");
+CREATE INDEX "ApiToken_userId_idx" ON "ApiToken"("userId");
+CREATE INDEX "ApiToken_tokenHash_idx" ON "ApiToken"("tokenHash");
+
+PRAGMA foreign_keys=ON;
+
+-- ---- Composite indexes for hot query paths ----------------------------------
+DROP INDEX IF EXISTS "AppStatus_appId_idx";
+CREATE INDEX "AppStatus_appId_checkedAt_idx" ON "AppStatus"("appId", "checkedAt");
+
+DROP INDEX IF EXISTS "AppClick_userId_idx";
+CREATE INDEX "AppClick_userId_clickedAt_idx" ON "AppClick"("userId", "clickedAt");
+
+DROP INDEX IF EXISTS "Notification_userId_idx";
+DROP INDEX IF EXISTS "Notification_sentAt_idx";
+CREATE INDEX "Notification_userId_sentAt_idx" ON "Notification"("userId", "sentAt");
+
+DROP INDEX IF EXISTS "AuditLog_userId_idx";
+DROP INDEX IF EXISTS "AuditLog_entityType_entityId_idx";
+CREATE INDEX "AuditLog_userId_createdAt_idx" ON "AuditLog"("userId", "createdAt");
+CREATE INDEX "AuditLog_entityType_entityId_createdAt_idx" ON "AuditLog"("entityType", "entityId", "createdAt");

prisma/migrations/20260527000000_add_password_reset/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "PasswordReset" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "expiresAt" DATETIME NOT NULL,
+    "usedAt" DATETIME,
+    "createdById" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "PasswordReset_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+CREATE UNIQUE INDEX "PasswordReset_tokenHash_key" ON "PasswordReset"("tokenHash");
+CREATE INDEX "PasswordReset_userId_idx" ON "PasswordReset"("userId");
+CREATE INDEX "PasswordReset_expiresAt_idx" ON "PasswordReset"("expiresAt");

prisma/schema.prisma

@@ -15,8 +15,6 @@ model User {
   avatarUrl             String?
   authProvider          String   @default("local") // local | oauth
   role                  String   @default("user") // admin | user
-  refreshToken          String?
-  refreshTokenExpiresAt DateTime?
   onboardingComplete    Boolean  @default(false)
   trackRecentApps       Boolean  @default(true)
   createdAt             DateTime @default(now())
@@ -29,6 +27,7 @@ model User {
   locale            String?
 
   groups               UserGroup[]
+  sessions             Session[]
   createdApps          App[]
   boards               Board[]
   favorites            UserFavorite[]
@@ -38,10 +37,61 @@ model User {
   apiTokens            ApiToken[]
   auditLogs            AuditLog[]
   boardTemplates       BoardTemplate[]
+  passwordResets       PasswordReset[]
 
   @@index([email])
 }
 
+model PasswordReset {
+  id          String    @id @default(cuid())
+  userId      String
+  tokenHash   String    @unique // sha256 of the raw reset token
+  expiresAt   DateTime
+  usedAt      DateTime?
+  createdById String?   // admin who issued (if admin-mediated), null if self-service
+  createdAt   DateTime  @default(now())
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([expiresAt])
+}
+
+model Invite {
+  id           String    @id @default(cuid())
+  tokenHash    String    @unique
+  email        String?   // optional — lock the invite to a specific email
+  role         String    @default("user") // user | admin
+  expiresAt    DateTime
+  usedAt       DateTime?
+  usedByUserId String?
+  createdById  String?
+  createdAt    DateTime  @default(now())
+
+  @@index([tokenHash])
+  @@index([createdById])
+}
+
+model Session {
+  id                String   @id @default(cuid())
+  userId            String
+  tokenHash         String   // sha256 hash of current refresh token
+  previousTokenHash String?  // sha256 hash of the immediately-previous refresh token (reuse detection)
+  label             String?
+  userAgent         String?
+  ipAddress         String?
+  rememberMe        Boolean  @default(false)
+  lastUsedAt        DateTime @default(now())
+  expiresAt         DateTime
+  createdAt         DateTime @default(now())
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([tokenHash])
+  @@index([userId])
+  @@index([expiresAt])
+}
+
 model Group {
   id          String   @id @default(cuid())
   name        String   @unique
@@ -110,7 +160,7 @@ model AppStatus {
 
   app App @relation(fields: [appId], references: [id], onDelete: Cascade)
 
-  @@index([appId])
+  @@index([appId, checkedAt])
   @@index([checkedAt])
 }
 
@@ -201,6 +251,9 @@ model SystemSettings {
   healthcheckDefaults   String   @default("{}") // JSON stored as string for SQLite
   customCss             String?
   onboardingComplete    Boolean  @default(false)
+  backupEnabled         Boolean  @default(false)
+  backupCronExpression  String   @default("0 3 * * *") // default: daily at 3 AM
+  backupMaxCount        Int      @default(10)
   createdAt             DateTime @default(now())
   updatedAt             DateTime @updatedAt
 }
@@ -267,7 +320,7 @@ model AppClick {
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
   app  App  @relation(fields: [appId], references: [id], onDelete: Cascade)
 
-  @@index([userId])
+  @@index([userId, clickedAt])
   @@index([appId])
   @@index([clickedAt])
 }
@@ -297,9 +350,8 @@ model Notification {
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
   app  App? @relation(fields: [appId], references: [id], onDelete: SetNull)
 
-  @@index([userId])
+  @@index([userId, sentAt])
   @@index([appId])
-  @@index([sentAt])
 }
 
 model ApiToken {
@@ -329,9 +381,9 @@ model AuditLog {
 
   user User? @relation(fields: [userId], references: [id], onDelete: SetNull)
 
-  @@index([userId])
+  @@index([userId, createdAt])
   @@index([action])
-  @@index([entityType, entityId])
+  @@index([entityType, entityId, createdAt])
   @@index([createdAt])
 }
 

src/app.css

@@ -1,85 +1,143 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
+@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-	/* HSL-based primary color (overridden by theme store via JS) */
-	--primary-h: 220;
-	--primary-s: 70%;
-	--primary-l: 50%;
+/* =====================================================================
+   COZY HOME design system
+   ---------------------------------------------------------------------
+   Tokens are intentionally organised as a single swappable "bundle":
+   the neutral ramp + accent + shape + type live here in :root / .dark.
+   Swapping these blocks for another set (e.g. Command Deck / Aurora /
+   Editorial) is all a future theme-preset system needs to do — no
+   component edits required, because the whole app reads these vars.
+   Accent stays user-tunable via --primary-h / --primary-s.
+   ===================================================================== */
 
-	--background: hsl(0 0% 100%);
-	--foreground: hsl(240 10% 3.9%);
-	--muted: hsl(240 4.8% 95.9%);
-	--muted-foreground: hsl(240 3.8% 46.1%);
-	--popover: hsl(0 0% 100%);
-	--popover-foreground: hsl(240 10% 3.9%);
-	--card: hsl(0 0% 100%);
-	--card-foreground: hsl(240 10% 3.9%);
-	--border: hsl(240 5.9% 90%);
-	--input: hsl(240 5.9% 90%);
+:root {
+	/* Accent — terracotta by default, still user-tunable from settings */
+	--primary-h: 16;
+	--primary-s: 72%;
+	--primary-l: 56%;
+
+	/* Neutrals — warm cream "paper" ramp */
+	--background: hsl(35 56% 97%); /* #fdf8f2 warm cream */
+	--foreground: hsl(33 18% 18%); /* #3a322b warm ink */
+	--muted: hsl(36 42% 93%); /* #f3ecde */
+	--muted-foreground: hsl(34 12% 47%); /* #857a6d */
+	--popover: hsl(40 60% 99%);
+	--popover-foreground: hsl(33 18% 18%);
+	--card: hsl(40 60% 99%); /* #fffdfa */
+	--card-foreground: hsl(33 18% 18%);
+	--border: hsl(36 35% 88%); /* #ece2d3 */
+	--input: hsl(36 35% 88%);
 	--primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--primary-foreground: hsl(0 0% 98%);
-	--secondary: hsl(240 4.8% 95.9%);
-	--secondary-foreground: hsl(240 5.9% 10%);
-	--accent: hsl(240 4.8% 95.9%);
-	--accent-foreground: hsl(240 5.9% 10%);
-	--destructive: hsl(0 72.2% 50.6%);
-	--destructive-foreground: hsl(0 0% 98%);
+	--primary-foreground: hsl(40 60% 99%);
+	--secondary: hsl(36 42% 93%);
+	--secondary-foreground: hsl(33 18% 22%);
+	--accent: hsl(34 44% 90%); /* hover wash */
+	--accent-foreground: hsl(33 18% 20%);
+	--destructive: hsl(6 68% 56%);
+	--destructive-foreground: hsl(40 60% 99%);
 	--ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--status-online: #22c55e;
-	--status-offline: #ef4444;
-	--status-degraded: #eab308;
-	--status-unknown: #6b7280;
-	--radius: 0.5rem;
-	--sidebar: hsl(0 0% 98%);
-	--sidebar-foreground: hsl(240 5.3% 26.1%);
+
+	/* Status — vivid values for dots / bars / rings / sparklines */
+	--status-online: #5fa86c;
+	--status-offline: #e0685f;
+	--status-degraded: #d99a2b;
+	--status-unknown: #b3a899;
+	/* Status "ink" — darker, AA-legible as small text on cream + tinted washes */
+	--status-online-ink: #2c723f;
+	--status-offline-ink: #bd382e;
+	--status-degraded-ink: #785406;
+	--status-unknown-ink: #6b5f50;
+
+	/* Pastel "rooms" — category / board accents */
+	--room-sage: #7fb069;
+	--room-sky: #6ca9d6;
+	--room-butter: #f3c969;
+	--room-lav: #b09fd6;
+	--room-peach: #ff9a76;
+	--room-terra: #e8754f;
+
+	/* Shape — cozy rounding */
+	--radius: 1rem;
+
+	/* Soft warm shadows */
+	--shadow-soft: 0 10px 26px -20px rgba(80, 50, 20, 0.45);
+	--shadow-lift: 0 22px 40px -22px rgba(80, 50, 20, 0.4);
+
+	/* Typography */
+	--font-sans: 'Figtree', system-ui, -apple-system, sans-serif;
+	--font-display: 'Fraunces', 'Figtree', Georgia, serif;
+
+	/* Sidebar */
+	--sidebar: hsl(36 48% 95%);
+	--sidebar-foreground: hsl(34 14% 32%);
 	--sidebar-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--sidebar-primary-foreground: hsl(0 0% 98%);
-	--sidebar-accent: hsl(240 4.8% 95.9%);
-	--sidebar-accent-foreground: hsl(240 5.9% 10%);
-	--sidebar-border: hsl(220 13% 91%);
+	--sidebar-primary-foreground: hsl(40 60% 99%);
+	--sidebar-accent: hsl(34 44% 90%);
+	--sidebar-accent-foreground: hsl(33 18% 20%);
+	--sidebar-border: hsl(36 35% 87%);
 	--sidebar-ring: hsl(var(--primary-h) calc(var(--primary-s) * 1.2) 60%);
 }
 
 .dark {
-	--primary-l: 60%;
+	/* "Dusk" — warm charcoal, not cold black */
+	--primary-l: 62%;
 
-	--background: hsl(240 10% 3.9%);
-	--foreground: hsl(0 0% 98%);
-	--muted: hsl(240 3.7% 15.9%);
-	--muted-foreground: hsl(240 5% 64.9%);
-	--popover: hsl(240 10% 3.9%);
-	--popover-foreground: hsl(0 0% 98%);
-	--card: hsl(240 6% 7%);
-	--card-foreground: hsl(0 0% 98%);
-	--border: hsl(240 3.7% 15.9%);
-	--input: hsl(240 3.7% 15.9%);
+	--background: hsl(30 14% 9%); /* #1a1714 */
+	--foreground: hsl(35 30% 90%); /* #f0e9df */
+	--muted: hsl(30 14% 16%); /* #2b2520 */
+	--muted-foreground: hsl(35 14% 64%); /* #b3a899 */
+	--popover: hsl(30 16% 12%);
+	--popover-foreground: hsl(35 30% 90%);
+	--card: hsl(30 16% 13%); /* #262019 */
+	--card-foreground: hsl(35 30% 90%);
+	--border: hsl(31 16% 19%); /* #352d24 */
+	--input: hsl(31 16% 19%);
 	--primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--primary-foreground: hsl(240 5.9% 10%);
-	--secondary: hsl(240 3.7% 15.9%);
-	--secondary-foreground: hsl(0 0% 98%);
-	--accent: hsl(240 3.7% 15.9%);
-	--accent-foreground: hsl(0 0% 98%);
-	--destructive: hsl(0 62.8% 30.6%);
-	--destructive-foreground: hsl(0 0% 98%);
+	--primary-foreground: hsl(30 18% 10%);
+	--secondary: hsl(30 14% 16%);
+	--secondary-foreground: hsl(35 30% 90%);
+	--accent: hsl(30 14% 18%);
+	--accent-foreground: hsl(35 30% 90%);
+	--destructive: hsl(6 58% 46%);
+	--destructive-foreground: hsl(40 60% 99%);
 	--ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--sidebar: hsl(240 5.9% 6%);
-	--sidebar-foreground: hsl(240 4.8% 95.9%);
+
+	--status-online: #6dba79;
+	--status-offline: #ea7a72;
+	--status-degraded: #e3ab4a;
+	--status-unknown: #9a8f80;
+	/* On dusk charcoal the vivid values already clear AA — ink == vivid */
+	--status-online-ink: #6dba79;
+	--status-offline-ink: #ea7a72;
+	--status-degraded-ink: #e3ab4a;
+	--status-unknown-ink: #9a8f80;
+
+	--shadow-soft: 0 12px 30px -20px rgba(0, 0, 0, 0.65);
+	--shadow-lift: 0 26px 46px -22px rgba(0, 0, 0, 0.6);
+
+	--sidebar: hsl(30 16% 11%);
+	--sidebar-foreground: hsl(35 22% 82%);
 	--sidebar-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-	--sidebar-primary-foreground: hsl(0 0% 100%);
-	--sidebar-accent: hsl(240 3.7% 15.9%);
-	--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-	--sidebar-border: hsl(240 3.7% 15.9%);
+	--sidebar-primary-foreground: hsl(30 18% 10%);
+	--sidebar-accent: hsl(30 14% 18%);
+	--sidebar-accent-foreground: hsl(35 30% 90%);
+	--sidebar-border: hsl(31 16% 19%);
 	--sidebar-ring: hsl(var(--primary-h) calc(var(--primary-s) * 1.2) 60%);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 8px);
+	--radius-md: calc(var(--radius) - 4px);
 	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	--radius-xl: calc(var(--radius) + 6px);
+
+	--font-sans: var(--font-sans);
+	--font-display: var(--font-display);
 
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
@@ -100,6 +158,23 @@
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-ring: var(--ring);
+
+	--color-status-online: var(--status-online);
+	--color-status-offline: var(--status-offline);
+	--color-status-degraded: var(--status-degraded);
+	--color-status-unknown: var(--status-unknown);
+	--color-status-online-ink: var(--status-online-ink);
+	--color-status-offline-ink: var(--status-offline-ink);
+	--color-status-degraded-ink: var(--status-degraded-ink);
+	--color-status-unknown-ink: var(--status-unknown-ink);
+
+	--color-room-sage: var(--room-sage);
+	--color-room-sky: var(--room-sky);
+	--color-room-butter: var(--room-butter);
+	--color-room-lav: var(--room-lav);
+	--color-room-peach: var(--room-peach);
+	--color-room-terra: var(--room-terra);
+
 	--color-sidebar: var(--sidebar);
 	--color-sidebar-foreground: var(--sidebar-foreground);
 	--color-sidebar-primary: var(--sidebar-primary);
@@ -116,10 +191,21 @@
 	}
 	body {
 		@apply bg-background text-foreground;
+		font-family: var(--font-sans);
+		font-feature-settings: 'ss01', 'cv01';
 		transition:
 			background-color 0.3s ease,
 			color 0.3s ease;
 	}
+	/* Display face for headings — gives the cozy/editorial warmth */
+	h1,
+	h2,
+	h3,
+	.font-display {
+		font-family: var(--font-display);
+		font-optical-sizing: auto;
+		letter-spacing: -0.01em;
+	}
 }
 
 /* ===== Status Indicator Pulse ===== */
@@ -137,27 +223,27 @@
 
 .status-online {
 	animation: status-pulse 2s ease-in-out infinite;
-	color: hsl(142 71% 45%);
+	color: var(--status-online);
 }
 
 /* ===== Card Style Variants ===== */
 .card-solid {
 	background: var(--card);
 	border: 1px solid var(--border);
+	box-shadow: var(--shadow-soft);
 }
 
 .card-glass {
 	backdrop-filter: blur(12px);
 	-webkit-backdrop-filter: blur(12px);
-	background: color-mix(in srgb, var(--card) 60%, transparent);
-	border: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
-	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
+	background: color-mix(in srgb, var(--card) 70%, transparent);
+	border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+	box-shadow: var(--shadow-soft);
 }
 
 .dark .card-glass {
-	background: color-mix(in srgb, var(--card) 50%, transparent);
-	border: 1px solid color-mix(in srgb, var(--border) 25%, transparent);
-	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
+	background: color-mix(in srgb, var(--card) 55%, transparent);
+	border: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
 }
 
 .card-outline {
@@ -169,24 +255,17 @@
 	border-color: var(--border);
 }
 
-/* ===== Card Hover Effects ===== */
+/* ===== Card Hover Effects — gentle cozy lift + micro-tilt ===== */
 .card-hover {
 	transition:
-		transform 0.2s ease,
-		box-shadow 0.2s ease;
+		transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+		box-shadow 0.2s ease,
+		border-color 0.2s ease;
 }
 
 .card-hover:hover {
-	transform: scale(1.02);
-	box-shadow:
-		0 10px 25px -5px rgba(0, 0, 0, 0.15),
-		0 4px 10px -5px rgba(0, 0, 0, 0.1);
-}
-
-.dark .card-hover:hover {
-	box-shadow:
-		0 10px 25px -5px rgba(0, 0, 0, 0.4),
-		0 4px 10px -5px rgba(0, 0, 0, 0.3);
+	transform: translateY(-5px) rotate(-0.35deg);
+	box-shadow: var(--shadow-lift);
 }
 
 /* ===== Skeleton Loading ===== */
@@ -200,14 +279,14 @@
 }
 
 .skeleton {
-	background: linear-gradient(90deg, var(--muted) 25%, hsl(240 4.8% 85%) 50%, var(--muted) 75%);
+	background: linear-gradient(90deg, var(--muted) 25%, hsl(36 30% 86%) 50%, var(--muted) 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s ease-in-out infinite;
 	border-radius: var(--radius);
 }
 
 .dark .skeleton {
-	background: linear-gradient(90deg, var(--muted) 25%, hsl(240 3.7% 22%) 50%, var(--muted) 75%);
+	background: linear-gradient(90deg, var(--muted) 25%, hsl(30 12% 22%) 50%, var(--muted) 75%);
 	background-size: 200% 100%;
 }
 
@@ -235,7 +314,7 @@
 [data-keyboard-selected='true'] {
 	outline: 2px solid hsl(var(--primary-h) var(--primary-s) var(--primary-l));
 	outline-offset: 2px;
-	border-radius: var(--radius, 0.5rem);
+	border-radius: var(--radius, 1rem);
 }
 
 /* ===== Aurora Keyframes ===== */
@@ -250,3 +329,40 @@
 		background-position: 0% 50%;
 	}
 }
+
+/* ===== Cozy greeting wave ===== */
+@keyframes cozy-wave {
+	0%,
+	60%,
+	100% {
+		transform: rotate(0);
+	}
+	10% {
+		transform: rotate(16deg);
+	}
+	20% {
+		transform: rotate(-8deg);
+	}
+	30% {
+		transform: rotate(14deg);
+	}
+	40% {
+		transform: rotate(-4deg);
+	}
+}
+
+.cozy-wave {
+	display: inline-block;
+	transform-origin: 70% 70%;
+	animation: cozy-wave 2.6s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.cozy-wave,
+	.status-online {
+		animation: none;
+	}
+	.card-hover:hover {
+		transform: none;
+	}
+}

src/app.d.ts

@@ -12,6 +12,7 @@ declare global {
 				id: string;
 				email: string;
 				displayName: string;
+				avatarUrl: string | null;
 				role: 'admin' | 'user';
 			} | null;
 			session: {

src/app.html

@@ -5,11 +5,14 @@
 		<link rel="icon" href="%sveltekit.assets%/icon.svg" type="image/svg+xml" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
-		<meta name="theme-color" content="#6366f1" />
+		<meta name="theme-color" content="#e8754f" />
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 		<meta name="apple-mobile-web-app-title" content="Launcher" />
 		<link rel="apple-touch-icon" href="%sveltekit.assets%/icon.svg" />
+		<!-- Cozy Home typography: Fraunces (display) + Figtree (body).
+		     Self-hosted from /static/fonts so offline/LAN installs work with no external calls. -->
+		<link rel="stylesheet" href="%sveltekit.assets%/fonts/fonts.css" />
 		<script>
 			// Inline script to prevent FOUC — set theme class before first paint
 			(function () {

src/hooks.server.ts

@@ -1,49 +1,71 @@
-import type { Handle } from '@sveltejs/kit';
+import type { Handle, HandleServerError } from '@sveltejs/kit';
 import { redirect } from '@sveltejs/kit';
 import { verifyAccessToken } from '$lib/server/services/authService.js';
 import * as authService from '$lib/server/services/authService.js';
-import * as userService from '$lib/server/services/userService.js';
 import * as apiTokenService from '$lib/server/services/apiTokenService.js';
 import { extractBearerToken } from '$lib/server/middleware/authenticate.js';
 import { isBoardGuestAccessible } from '$lib/server/middleware/guestAccess.js';
+import { initBackupScheduler } from '$lib/server/jobs/backupScheduler.js';
+import { startScheduler as startHealthcheckScheduler } from '$lib/server/jobs/healthcheckScheduler.js';
+import {
+	clearSessionCookies,
+	rotateSessionCookies,
+	COOKIE_NAMES
+} from '$lib/server/utils/sessionCookies.js';
+import { loadUserForLocals } from '$lib/server/utils/userLocals.js';
+import { applySecurityHeaders } from '$lib/server/utils/securityHeaders.js';
 
-const PUBLIC_PATHS = ['/login', '/register', '/auth/', '/api/health', '/api/onboarding', '/status'];
+// Initialize schedulers on server startup. Both honour RUN_SCHEDULERS env var.
+initBackupScheduler();
+startHealthcheckScheduler(process.env.HEALTHCHECK_CRON || '* * * * *');
 
-function isPublicPath(pathname: string): boolean {
-	return PUBLIC_PATHS.some((path) => pathname === path || pathname.startsWith(path));
+interface PathRule {
+	readonly path: string;
+	readonly mode: 'exact' | 'prefix';
 }
 
-const ACCESS_TOKEN_COOKIE = 'access_token';
-const REFRESH_TOKEN_COOKIE = 'refresh_token';
+// Exact paths or explicit subtrees that are publicly accessible.
+// Use exact-match where possible so `/api/health-private` doesn't accidentally
+// become public when added later.
+const PUBLIC_PATHS: readonly PathRule[] = [
+	{ path: '/login', mode: 'exact' },
+	{ path: '/register', mode: 'exact' },
+	{ path: '/invite', mode: 'exact' },
+	{ path: '/forgot-password', mode: 'exact' },
+	{ path: '/reset-password', mode: 'exact' },
+	{ path: '/api/health', mode: 'exact' },
+	{ path: '/api/metrics', mode: 'exact' },
+	{ path: '/api/onboarding', mode: 'exact' },
+	{ path: '/auth/', mode: 'prefix' },
+	// Uploaded icons/wallpapers are referenced as <img src> from board widgets,
+	// including guest-accessible boards. The serving handler at
+	// /uploads/[...path]/+server.ts does its own path-traversal protection.
+	{ path: '/uploads/', mode: 'prefix' }
+];
 
-const COOKIE_BASE = {
-	httpOnly: true,
-	secure: process.env.NODE_ENV === 'production',
-	sameSite: 'lax' as const,
-	path: '/'
-};
+function isPublicPath(pathname: string): boolean {
+	for (const rule of PUBLIC_PATHS) {
+		if (rule.mode === 'exact' && pathname === rule.path) return true;
+		if (rule.mode === 'prefix' && pathname.startsWith(rule.path)) return true;
+	}
+	return false;
+}
 
 export const handle: Handle = async ({ event, resolve }) => {
-	// Initialize locals
 	event.locals.user = null;
 	event.locals.session = null;
 	event.locals.apiTokenScope = null;
 
-	const accessToken = event.cookies.get(ACCESS_TOKEN_COOKIE);
-	const refreshToken = event.cookies.get(REFRESH_TOKEN_COOKIE);
+	const accessToken = event.cookies.get(COOKIE_NAMES.ACCESS_TOKEN);
+	const refreshToken = event.cookies.get(COOKIE_NAMES.REFRESH_TOKEN);
+	const sessionId = event.cookies.get(COOKIE_NAMES.SESSION_ID);
 
 	if (accessToken) {
 		try {
 			const payload = verifyAccessToken(accessToken);
-			const user = await userService.findById(payload.userId);
-			event.locals.user = {
-				id: user.id,
-				email: user.email,
-				displayName: user.displayName,
-				role: user.role as 'admin' | 'user'
-			};
+			event.locals.user = await loadUserForLocals(payload.userId);
 			event.locals.session = {
-				id: payload.userId,
+				id: sessionId ?? payload.userId,
 				expiresAt: new Date(Date.now() + 15 * 60 * 1000)
 			};
 		} catch {
@@ -51,65 +73,41 @@ export const handle: Handle = async ({ event, resolve }) => {
 		}
 	}
 
-	// If no valid session but refresh token exists, attempt rotation
-	if (!event.locals.user && refreshToken) {
+	if (!event.locals.user && refreshToken && sessionId) {
 		try {
-			// We need to find the user by refresh token.
-			// The refresh token is stored hashed per-user, so we need
-			// a userId from somewhere. We store it in a separate cookie.
-			const userIdFromCookie = event.cookies.get('refresh_user_id');
-			if (userIdFromCookie) {
-				const isValid = await authService.validateRefreshToken(userIdFromCookie, refreshToken);
-				if (isValid) {
-					const user = await userService.findById(userIdFromCookie);
-					const tokens = await authService.rotateTokens(user.id, user.email, user.role);
-
-					// Set new cookies
-					event.cookies.set(ACCESS_TOKEN_COOKIE, tokens.accessToken, {
-						...COOKIE_BASE,
-						maxAge: 900 // 15 minutes
-					});
-					event.cookies.set(REFRESH_TOKEN_COOKIE, tokens.refreshToken, {
-						...COOKIE_BASE,
-						maxAge: 604800 // 7 days
-					});
-
-					event.locals.user = {
-						id: user.id,
-						email: user.email,
-						displayName: user.displayName,
-						role: user.role as 'admin' | 'user'
-					};
+			const session = await authService.validateSession(sessionId, refreshToken);
+			if (session) {
+				const cachedUser = await loadUserForLocals(session.userId);
+				if (cachedUser) {
+					await rotateSessionCookies(
+						event.cookies,
+						session.id,
+						{ id: cachedUser.id, email: cachedUser.email, role: cachedUser.role },
+						session.rememberMe
+					);
+					event.locals.user = cachedUser;
 					event.locals.session = {
-						id: user.id,
+						id: session.id,
 						expiresAt: new Date(Date.now() + 15 * 60 * 1000)
 					};
 				}
 			}
 		} catch {
-			// Refresh failed — clear stale cookies
-			event.cookies.delete(ACCESS_TOKEN_COOKIE, { path: '/' });
-			event.cookies.delete(REFRESH_TOKEN_COOKIE, { path: '/' });
-			event.cookies.delete('refresh_user_id', { path: '/' });
+			clearSessionCookies(event.cookies);
 		}
 	}
 
-	// If still no valid session, try API token from Authorization header
+	// Bearer API tokens (no session cookie).
 	if (!event.locals.user) {
 		const bearerToken = extractBearerToken(event);
 		if (bearerToken) {
 			try {
 				const tokenResult = await apiTokenService.validateToken(bearerToken);
 				if (tokenResult) {
-					const user = await userService.findById(tokenResult.userId);
-					event.locals.user = {
-						id: user.id,
-						email: user.email,
-						displayName: user.displayName,
-						role: user.role as 'admin' | 'user'
-					};
+					const tokenUser = await loadUserForLocals(tokenResult.userId);
+					event.locals.user = tokenUser;
 					event.locals.session = {
-						id: user.id,
+						id: tokenResult.userId,
 						expiresAt: new Date(Date.now() + 15 * 60 * 1000)
 					};
 					event.locals.apiTokenScope = tokenResult.scope as 'read' | 'write' | 'admin';
@@ -126,43 +124,69 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (event.locals.apiTokenScope) {
 		const method = event.request.method;
 		const scope = event.locals.apiTokenScope;
-		const isWriteMethod = method === 'POST' || method === 'PATCH' || method === 'PUT' || method === 'DELETE';
+		const isWriteMethod =
+			method === 'POST' || method === 'PATCH' || method === 'PUT' || method === 'DELETE';
 		const isAdminPath = pathname.startsWith('/api/admin') || pathname.startsWith('/admin');
 
 		if (scope === 'read' && isWriteMethod) {
-			return new Response(JSON.stringify({ success: false, data: null, error: 'API token scope "read" does not allow write operations' }), {
-				status: 403,
-				headers: { 'Content-Type': 'application/json' }
-			});
+			return new Response(
+				JSON.stringify({
+					success: false,
+					data: null,
+					error: 'API token scope "read" does not allow write operations'
+				}),
+				{ status: 403, headers: { 'Content-Type': 'application/json' } }
+			);
 		}
 		if (scope !== 'admin' && isAdminPath) {
-			return new Response(JSON.stringify({ success: false, data: null, error: 'API token scope does not allow admin operations' }), {
-				status: 403,
-				headers: { 'Content-Type': 'application/json' }
-			});
+			return new Response(
+				JSON.stringify({
+					success: false,
+					data: null,
+					error: 'API token scope does not allow admin operations'
+				}),
+				{ status: 403, headers: { 'Content-Type': 'application/json' } }
+			);
 		}
 	}
 
-	// Route protection
-
 	if (!event.locals.user && !isPublicPath(pathname)) {
-		// Check if this is a guest-accessible board route
 		const boardMatch = pathname.match(/^\/boards\/([^/]+)/);
 		if (boardMatch) {
 			const boardId = boardMatch[1];
 			const isGuestAccessible = await isBoardGuestAccessible(boardId);
 			if (isGuestAccessible) {
-				return resolve(event);
+				return applySecurityHeaders(await resolve(event), process.env.ORIGIN);
 			}
 		}
 
-		// Root path — allow through so +page.server.ts can handle redirect logic
-		if (pathname === '/') {
-			return resolve(event);
+		// Public landing also allowed without auth (renders guest-accessible boards
+		// or a "please log in" view).
+		if (pathname === '/' || pathname === '/status') {
+			return applySecurityHeaders(await resolve(event), process.env.ORIGIN);
 		}
 
 		throw redirect(302, '/login');
 	}
 
-	return resolve(event);
+	const response = await resolve(event);
+	return applySecurityHeaders(response, process.env.ORIGIN);
+};
+
+/**
+ * Centralized error handler — strips internal error details and logs the cause.
+ * Without this, SvelteKit will display the raw thrown message which can leak
+ * stack traces, file paths, or upstream IdP error_descriptions.
+ */
+export const handleError: HandleServerError = ({ error, event }) => {
+	 
+	console.error(`[error] ${event.request.method} ${event.url.pathname}:`, error);
+	return {
+		message:
+			process.env.NODE_ENV === 'production'
+				? 'An unexpected error occurred'
+				: error instanceof Error
+					? error.message
+					: String(error)
+	};
 };

src/lib/components/admin/AuditLogTable.svelte

@@ -62,7 +62,7 @@
 	];
 
 	function applyFilters() {
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		 
 		const params = new URLSearchParams();
 		if (filterAction) params.set('action', filterAction);
 		if (filterEntityType) params.set('entityType', filterEntityType);
@@ -73,7 +73,7 @@
 	}
 
 	function changePage(delta: number) {
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		 
 		const params = new URLSearchParams($page.url.searchParams);
 		params.set('page', String(Math.max(1, currentPage + delta)));
 		goto(`/admin/audit-log?${params.toString()}`, { replaceState: true });
@@ -96,11 +96,11 @@
 	}
 
 	function actionBadgeClass(action: string): string {
-		if (action.includes('deleted')) return 'bg-red-500/10 text-red-500';
-		if (action.includes('created')) return 'bg-green-500/10 text-green-500';
-		if (action.includes('updated')) return 'bg-blue-500/10 text-blue-500';
-		if (action === 'import') return 'bg-purple-500/10 text-purple-500';
-		if (action === 'export') return 'bg-yellow-500/10 text-yellow-500';
+		if (action.includes('deleted')) return 'bg-destructive/10 text-destructive';
+		if (action.includes('created')) return 'bg-status-online/10 text-status-online-ink';
+		if (action.includes('updated')) return 'bg-room-sky/15 text-room-sky';
+		if (action === 'import') return 'bg-room-lav/15 text-room-lav';
+		if (action === 'export') return 'bg-status-degraded/10 text-status-degraded-ink';
 		return 'bg-muted text-muted-foreground';
 	}
 
@@ -138,7 +138,7 @@
 			<select
 				id="filter-action"
 				bind:value={filterAction}
-				class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
+				class="rounded-xl border border-input bg-background px-3 py-1.5 text-sm text-foreground"
 			>
 				{#each actionOptions as opt (opt.value)}
 					<option value={opt.value}>{opt.label}</option>
@@ -151,7 +151,7 @@
 			<select
 				id="filter-entity"
 				bind:value={filterEntityType}
-				class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
+				class="rounded-xl border border-input bg-background px-3 py-1.5 text-sm text-foreground"
 			>
 				{#each entityTypeOptions as opt (opt.value)}
 					<option value={opt.value}>{opt.label}</option>
@@ -165,7 +165,7 @@
 				id="filter-from"
 				type="date"
 				bind:value={filterDateFrom}
-				class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
+				class="rounded-xl border border-input bg-background px-3 py-1.5 text-sm text-foreground"
 			/>
 		</div>
 
@@ -175,14 +175,14 @@
 				id="filter-to"
 				type="date"
 				bind:value={filterDateTo}
-				class="rounded-md border border-input bg-background px-3 py-1.5 text-sm text-foreground"
+				class="rounded-xl border border-input bg-background px-3 py-1.5 text-sm text-foreground"
 			/>
 		</div>
 
 		<button
 			type="button"
 			onclick={applyFilters}
-			class="rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+			class="rounded-xl bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
 		>
 			Apply
 		</button>
@@ -190,7 +190,7 @@
 		<button
 			type="button"
 			onclick={exportCsv}
-			class="ml-auto rounded-md border border-input px-4 py-1.5 text-sm font-medium text-foreground hover:bg-accent"
+			class="ml-auto rounded-xl border border-input px-4 py-1.5 text-sm font-medium text-foreground hover:bg-accent"
 		>
 			Export CSV
 		</button>
@@ -202,7 +202,7 @@
 			<p class="text-muted-foreground">No audit log entries found</p>
 		</div>
 	{:else}
-		<div class="overflow-x-auto rounded-lg border border-border">
+		<div class="overflow-x-auto rounded-2xl border border-border bg-card shadow-[var(--shadow-soft)]">
 			<table class="w-full text-left text-sm">
 				<thead class="border-b border-border bg-muted/50">
 					<tr>

src/lib/components/admin/BackupPanel.svelte

@@ -0,0 +1,428 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { t } from 'svelte-i18n';
+
+	interface BackupInfo {
+		filename: string;
+		size: number;
+		createdAt: string;
+	}
+
+	interface BackupSchedule {
+		backupEnabled: boolean;
+		backupCronExpression: string;
+		backupMaxCount: number;
+	}
+
+	type CronPreset = 'daily' | 'twice_daily' | 'weekly' | 'custom';
+
+	let backups: BackupInfo[] = $state([]);
+	let schedule: BackupSchedule = $state({
+		backupEnabled: false,
+		backupCronExpression: '0 3 * * *',
+		backupMaxCount: 10
+	});
+
+	let creating = $state(false);
+	let savingSchedule = $state(false);
+	let restoringFilename: string | null = $state(null);
+	let deletingFilename: string | null = $state(null);
+	let confirmRestore: string | null = $state(null);
+	let confirmDelete: string | null = $state(null);
+	let statusMessage = $state('');
+	let statusType: 'success' | 'error' | '' = $state('');
+	let customCron = $state('');
+	let cronPreset: CronPreset = $state('daily');
+
+	const CRON_PRESETS: Record<string, string> = {
+		daily: '0 3 * * *',
+		twice_daily: '0 */12 * * *',
+		weekly: '0 3 * * 0'
+	};
+
+	function clearStatus() {
+		statusMessage = '';
+		statusType = '';
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	function formatDate(iso: string): string {
+		return new Date(iso).toLocaleString();
+	}
+
+	function detectPreset(cronExpr: string): CronPreset {
+		for (const [key, value] of Object.entries(CRON_PRESETS)) {
+			if (cronExpr === value) return key as CronPreset;
+		}
+		return 'custom';
+	}
+
+	async function loadBackups() {
+		try {
+			const response = await fetch('/api/admin/backups');
+			const result = await response.json();
+			if (result.success) {
+				backups = result.data.backups;
+				schedule = result.data.schedule;
+				cronPreset = detectPreset(schedule.backupCronExpression);
+				if (cronPreset === 'custom') {
+					customCron = schedule.backupCronExpression;
+				}
+			}
+		} catch {
+			// Fail silently on initial load
+		}
+	}
+
+	async function handleCreate() {
+		clearStatus();
+		creating = true;
+
+		try {
+			const response = await fetch('/api/admin/backups', { method: 'POST' });
+			const result = await response.json();
+
+			if (!response.ok || !result.success) {
+				throw new Error(result.error || 'Failed to create backup');
+			}
+
+			statusMessage = $t('admin.backup_create_success');
+			statusType = 'success';
+			await loadBackups();
+		} catch (err) {
+			statusMessage = err instanceof Error ? err.message : 'Failed to create backup';
+			statusType = 'error';
+		} finally {
+			creating = false;
+		}
+	}
+
+	async function handleDownload(filename: string) {
+		const a = document.createElement('a');
+		a.href = `/api/admin/backups/${encodeURIComponent(filename)}/download`;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+
+	async function handleRestore(filename: string) {
+		clearStatus();
+		confirmRestore = null;
+		restoringFilename = filename;
+
+		try {
+			const response = await fetch(`/api/admin/backups/${encodeURIComponent(filename)}/restore`, {
+				method: 'POST'
+			});
+			const result = await response.json();
+
+			if (!response.ok || !result.success) {
+				throw new Error(result.error || 'Failed to restore backup');
+			}
+
+			statusMessage = $t('admin.backup_restore_success');
+			statusType = 'success';
+		} catch (err) {
+			statusMessage = err instanceof Error ? err.message : 'Failed to restore backup';
+			statusType = 'error';
+		} finally {
+			restoringFilename = null;
+		}
+	}
+
+	async function handleDelete(filename: string) {
+		clearStatus();
+		confirmDelete = null;
+		deletingFilename = filename;
+
+		try {
+			const response = await fetch(`/api/admin/backups/${encodeURIComponent(filename)}`, {
+				method: 'DELETE'
+			});
+			const result = await response.json();
+
+			if (!response.ok || !result.success) {
+				throw new Error(result.error || 'Failed to delete backup');
+			}
+
+			statusMessage = $t('admin.backup_delete_success');
+			statusType = 'success';
+			await loadBackups();
+		} catch (err) {
+			statusMessage = err instanceof Error ? err.message : 'Failed to delete backup';
+			statusType = 'error';
+		} finally {
+			deletingFilename = null;
+		}
+	}
+
+	async function handleSaveSchedule() {
+		clearStatus();
+		savingSchedule = true;
+
+		try {
+			const cronExpression = cronPreset === 'custom' ? customCron : CRON_PRESETS[cronPreset];
+
+			const response = await fetch('/api/admin/backups/schedule', {
+				method: 'PUT',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({
+					backupEnabled: schedule.backupEnabled,
+					backupCronExpression: cronExpression,
+					backupMaxCount: schedule.backupMaxCount
+				})
+			});
+			const result = await response.json();
+
+			if (!response.ok || !result.success) {
+				throw new Error(result.error || 'Failed to save schedule');
+			}
+
+			schedule = result.data;
+			statusMessage = $t('admin.backup_schedule_saved');
+			statusType = 'success';
+		} catch (err) {
+			statusMessage = err instanceof Error ? err.message : 'Failed to save schedule';
+			statusType = 'error';
+		} finally {
+			savingSchedule = false;
+		}
+	}
+
+	// Load backups on mount (untrack to avoid infinite re-trigger)
+	$effect(() => {
+		untrack(() => loadBackups());
+	});
+</script>
+
+<section class="rounded-lg border border-border bg-card p-6">
+	<h2 class="mb-1 text-lg font-semibold text-card-foreground">{$t('admin.backup_title')}</h2>
+	<p class="mb-6 text-xs text-muted-foreground">{$t('admin.backup_description')}</p>
+
+	<!-- Create Backup -->
+	<div class="mb-6">
+		<button
+			type="button"
+			onclick={handleCreate}
+			disabled={creating}
+			class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			{creating ? $t('admin.backup_creating') : $t('admin.backup_create')}
+		</button>
+	</div>
+
+	<!-- Backup List -->
+	<div class="mb-6">
+		<h3 class="mb-3 text-sm font-medium text-foreground">{$t('admin.backup_list_title')}</h3>
+
+		{#if backups.length === 0}
+			<p class="text-sm text-muted-foreground">{$t('admin.backup_list_empty')}</p>
+		{:else}
+			<div class="overflow-x-auto">
+				<table class="w-full text-left text-sm">
+					<thead>
+						<tr class="border-b border-border text-xs uppercase text-muted-foreground">
+							<th class="pb-2 pr-4 font-medium">{$t('admin.backup_filename')}</th>
+							<th class="pb-2 pr-4 font-medium">{$t('admin.backup_size')}</th>
+							<th class="pb-2 pr-4 font-medium">{$t('admin.backup_date')}</th>
+							<th class="pb-2 font-medium">{$t('admin.backup_actions')}</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each backups as backup (backup.filename)}
+							<tr class="border-b border-border/50">
+								<td class="py-2.5 pr-4 font-mono text-xs text-foreground">{backup.filename}</td>
+								<td class="py-2.5 pr-4 text-muted-foreground">{formatBytes(backup.size)}</td>
+								<td class="py-2.5 pr-4 text-muted-foreground">{formatDate(backup.createdAt)}</td>
+								<td class="py-2.5">
+									<div class="flex gap-2">
+										<button
+											type="button"
+											onclick={() => handleDownload(backup.filename)}
+											class="rounded px-2 py-1 text-xs font-medium text-primary hover:bg-primary/10"
+										>
+											{$t('admin.backup_download')}
+										</button>
+										<button
+											type="button"
+											onclick={() => (confirmRestore = backup.filename)}
+											disabled={restoringFilename === backup.filename}
+											class="rounded-lg px-2 py-1 text-xs font-medium text-status-degraded-ink hover:bg-status-degraded/10 disabled:opacity-50"
+										>
+											{restoringFilename === backup.filename
+												? '...'
+												: $t('admin.backup_restore')}
+										</button>
+										<button
+											type="button"
+											onclick={() => (confirmDelete = backup.filename)}
+											disabled={deletingFilename === backup.filename}
+											class="rounded px-2 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50"
+										>
+											{deletingFilename === backup.filename
+												? '...'
+												: $t('admin.backup_delete')}
+										</button>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Restore Confirmation Dialog -->
+	{#if confirmRestore}
+		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+			<div class="mx-4 w-full max-w-md rounded-[1.4rem] border border-border bg-card p-6 shadow-[var(--shadow-lift)]">
+				<h3 class="mb-2 text-lg font-semibold text-card-foreground">
+					{$t('admin.backup_restore_confirm_title')}
+				</h3>
+				<p class="mb-4 text-sm text-muted-foreground">
+					{$t('admin.backup_restore_confirm')}
+				</p>
+				<p class="mb-4 font-mono text-xs text-foreground">{confirmRestore}</p>
+				<div class="flex justify-end gap-3">
+					<button
+						type="button"
+						onclick={() => (confirmRestore = null)}
+						class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onclick={() => confirmRestore && handleRestore(confirmRestore)}
+						class="rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-[var(--shadow-soft)] transition-all hover:-translate-y-0.5" style="background: var(--status-degraded);"
+					>
+						{$t('admin.backup_restore')}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Delete Confirmation Dialog -->
+	{#if confirmDelete}
+		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+			<div class="mx-4 w-full max-w-md rounded-[1.4rem] border border-border bg-card p-6 shadow-[var(--shadow-lift)]">
+				<h3 class="mb-2 text-lg font-semibold text-card-foreground">
+					{$t('admin.backup_delete_confirm_title')}
+				</h3>
+				<p class="mb-4 text-sm text-muted-foreground">
+					{$t('admin.backup_delete_confirm')}
+				</p>
+				<p class="mb-4 font-mono text-xs text-foreground">{confirmDelete}</p>
+				<div class="flex justify-end gap-3">
+					<button
+						type="button"
+						onclick={() => (confirmDelete = null)}
+						class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						onclick={() => confirmDelete && handleDelete(confirmDelete)}
+						class="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-destructive/90"
+					>
+						{$t('admin.backup_delete')}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Divider -->
+	<div class="my-6 border-t border-border"></div>
+
+	<!-- Schedule Configuration -->
+	<div>
+		<h3 class="mb-3 text-sm font-medium text-foreground">{$t('admin.backup_schedule_title')}</h3>
+
+		<div class="space-y-4">
+			<!-- Enable toggle -->
+			<label class="flex items-center gap-3">
+				<input
+					type="checkbox"
+					bind:checked={schedule.backupEnabled}
+					class="h-4 w-4 rounded border-border text-primary focus-visible:ring-primary/30"
+				/>
+				<span class="text-sm text-foreground">{$t('admin.backup_schedule_enabled')}</span>
+			</label>
+
+			{#if schedule.backupEnabled}
+				<!-- Cron preset -->
+				<div>
+					<label for="cron-preset" class="mb-1 block text-sm text-muted-foreground">
+						{$t('admin.backup_schedule_cron')}
+					</label>
+					<select
+						id="cron-preset"
+						bind:value={cronPreset}
+						class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground sm:w-auto"
+					>
+						<option value="daily">{$t('admin.backup_schedule_preset_daily')}</option>
+						<option value="twice_daily">{$t('admin.backup_schedule_preset_twice_daily')}</option>
+						<option value="weekly">{$t('admin.backup_schedule_preset_weekly')}</option>
+						<option value="custom">{$t('admin.backup_schedule_preset_custom')}</option>
+					</select>
+				</div>
+
+				{#if cronPreset === 'custom'}
+					<div>
+						<input
+							type="text"
+							bind:value={customCron}
+							placeholder="0 3 * * *"
+							class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground sm:w-64"
+						/>
+					</div>
+				{/if}
+
+				<!-- Max count -->
+				<div>
+					<label for="max-count" class="mb-1 block text-sm text-muted-foreground">
+						{$t('admin.backup_schedule_max_count')}
+					</label>
+					<input
+						id="max-count"
+						type="number"
+						bind:value={schedule.backupMaxCount}
+						min="1"
+						max="100"
+						class="w-24 rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+					/>
+				</div>
+			{/if}
+
+			<button
+				type="button"
+				onclick={handleSaveSchedule}
+				disabled={savingSchedule}
+				class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{savingSchedule ? $t('admin.backup_schedule_saving') : $t('admin.backup_schedule_save')}
+			</button>
+		</div>
+	</div>
+
+	<!-- Status message -->
+	{#if statusMessage}
+		<div
+			class="mt-4 rounded-xl border p-3 text-sm {statusType === 'success'
+				? 'border-status-online/30 bg-status-online/10 text-status-online-ink'
+				: 'border-destructive/30 bg-destructive/10 text-destructive'}"
+		>
+			{statusMessage}
+		</div>
+	{/if}
+</section>

src/lib/components/admin/DiscoveryPanel.svelte

@@ -147,7 +147,7 @@
 			type="button"
 			onclick={handleScan}
 			disabled={scanning || (!dockerSocketPath && !traefikApiUrl)}
-			class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+			class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
 		>
 			{scanning ? $t('admin.discovery_scanning') : $t('admin.discovery_scan')}
 		</button>
@@ -155,7 +155,7 @@
 
 	<!-- Scan Errors -->
 	{#if scanErrors.length > 0}
-		<div class="mb-4 rounded-md bg-yellow-100 p-3 text-sm text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+		<div class="mb-4 rounded-xl border border-status-degraded/30 bg-status-degraded/10 p-3 text-sm text-status-degraded-ink">
 			{#each scanErrors as scanError, idx (idx)}
 				<p>{scanError}</p>
 			{/each}
@@ -204,8 +204,8 @@
 							<td class="px-2 py-2">
 								<span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium
 									{service.source === 'docker'
-										? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-										: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
+										? 'bg-room-sky/15 text-room-sky'
+										: 'bg-room-lav/15 text-room-lav'
 									}"
 								>
 									{service.source === 'docker' ? $t('admin.discovery_source_docker') : $t('admin.discovery_source_traefik')}
@@ -215,7 +215,7 @@
 								{#if service.alreadyRegistered}
 									<span class="text-xs text-muted-foreground">{$t('admin.discovery_already_registered')}</span>
 								{:else}
-									<span class="text-xs font-medium text-green-600 dark:text-green-400">{$t('admin.discovery_new')}</span>
+									<span class="text-xs font-medium text-status-online-ink dark:text-status-online-ink">{$t('admin.discovery_new')}</span>
 								{/if}
 							</td>
 						</tr>
@@ -231,7 +231,7 @@
 					type="button"
 					onclick={handleApprove}
 					disabled={approving || selected.size === 0}
-					class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+					class="rounded-xl bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{approving ? $t('admin.discovery_approving') : $t('admin.discovery_approve')} ({selected.size})
 				</button>
@@ -241,7 +241,7 @@
 
 	<!-- Status Message -->
 	{#if statusMessage}
-		<div class="mt-4 rounded-md p-3 text-sm {statusType === 'success' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'}">
+		<div class="mt-4 rounded-xl border p-3 text-sm {statusType === 'success' ? 'border-status-online/30 bg-status-online/10 text-status-online-ink' : 'border-destructive/30 bg-destructive/10 text-destructive'}">
 			{statusMessage}
 		</div>
 	{/if}

src/lib/components/admin/GroupTable.svelte

@@ -27,7 +27,7 @@
 	}
 </script>
 
-<div class="overflow-x-auto rounded-lg border border-border">
+<div class="overflow-x-auto rounded-2xl border border-border bg-card shadow-[var(--shadow-soft)]">
 	<table class="w-full text-left text-sm">
 		<thead class="border-b border-border bg-muted/50">
 			<tr>

src/lib/components/admin/ImportExportPanel.svelte

@@ -1,212 +0,0 @@
-<script lang="ts">
-	import { t } from 'svelte-i18n';
-
-	type ImportMode = 'skip' | 'overwrite';
-
-	let importMode: ImportMode = $state('skip');
-	let fileInput: HTMLInputElement | undefined = $state();
-	let previewData: string = $state('');
-	let parsedData: unknown = $state(null);
-	let importing = $state(false);
-	let exporting = $state(false);
-	let statusMessage = $state('');
-	let statusType: 'success' | 'error' | '' = $state('');
-
-	function clearStatus() {
-		statusMessage = '';
-		statusType = '';
-	}
-
-	async function handleExport() {
-		clearStatus();
-		exporting = true;
-
-		try {
-			const response = await fetch('/api/admin/export');
-
-			if (!response.ok) {
-				const errorData = await response.json();
-				throw new Error(errorData.error || 'Export failed');
-			}
-
-			const disposition = response.headers.get('Content-Disposition');
-			const filenameMatch = disposition?.match(/filename="(.+)"/);
-			const filename = filenameMatch?.[1] ?? 'export.json';
-
-			const blob = await response.blob();
-			const url = URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = filename;
-			document.body.appendChild(a);
-			a.click();
-			document.body.removeChild(a);
-			URL.revokeObjectURL(url);
-
-			statusMessage = $t('admin.export_success');
-			statusType = 'success';
-		} catch (err) {
-			statusMessage = err instanceof Error ? err.message : 'Export failed';
-			statusType = 'error';
-		} finally {
-			exporting = false;
-		}
-	}
-
-	function handleFileSelect(event: Event) {
-		clearStatus();
-		const target = event.target as HTMLInputElement;
-		const file = target.files?.[0];
-
-		if (!file) {
-			previewData = '';
-			parsedData = null;
-			return;
-		}
-
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			const text = e.target?.result as string;
-			try {
-				const data = JSON.parse(text);
-				parsedData = data;
-				previewData = JSON.stringify(data, null, 2);
-			} catch {
-				previewData = '';
-				parsedData = null;
-				statusMessage = $t('admin.import_invalid_json');
-				statusType = 'error';
-			}
-		};
-		reader.readAsText(file);
-	}
-
-	async function handleImport() {
-		if (!parsedData) return;
-
-		clearStatus();
-		importing = true;
-
-		try {
-			const response = await fetch('/api/admin/import', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ data: parsedData, mode: importMode })
-			});
-
-			const result = await response.json();
-
-			if (!response.ok || !result.success) {
-				throw new Error(result.error || 'Import failed');
-			}
-
-			const d = result.data;
-			const parts: string[] = [];
-			if (d.apps.created > 0) parts.push(`Apps: +${d.apps.created}`);
-			if (d.apps.updated > 0) parts.push(`Apps updated: ${d.apps.updated}`);
-			if (d.apps.skipped > 0) parts.push(`Apps skipped: ${d.apps.skipped}`);
-			if (d.boards.created > 0) parts.push(`Boards: +${d.boards.created}`);
-			if (d.boards.updated > 0) parts.push(`Boards updated: ${d.boards.updated}`);
-			if (d.boards.skipped > 0) parts.push(`Boards skipped: ${d.boards.skipped}`);
-			if (d.groups.created > 0) parts.push(`Groups: +${d.groups.created}`);
-			if (d.groups.updated > 0) parts.push(`Groups updated: ${d.groups.updated}`);
-			if (d.groups.skipped > 0) parts.push(`Groups skipped: ${d.groups.skipped}`);
-			if (d.settingsUpdated) parts.push('Settings updated');
-
-			statusMessage = `${$t('admin.import_success')} ${parts.join(', ')}`;
-			statusType = 'success';
-
-			// Reset
-			previewData = '';
-			parsedData = null;
-			if (fileInput) fileInput.value = '';
-		} catch (err) {
-			statusMessage = err instanceof Error ? err.message : 'Import failed';
-			statusType = 'error';
-		} finally {
-			importing = false;
-		}
-	}
-</script>
-
-<section class="rounded-lg border border-border bg-card p-6">
-	<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.import_export_title')}</h2>
-	<p class="mb-6 text-xs text-muted-foreground">{$t('admin.import_export_description')}</p>
-
-	<!-- Export -->
-	<div class="mb-6">
-		<h3 class="mb-2 text-sm font-medium text-foreground">{$t('admin.export_section')}</h3>
-		<button
-			type="button"
-			onclick={handleExport}
-			disabled={exporting}
-			class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-		>
-			{exporting ? $t('admin.export_exporting') : $t('admin.export_button')}
-		</button>
-	</div>
-
-	<!-- Divider -->
-	<div class="my-6 border-t border-border"></div>
-
-	<!-- Import -->
-	<div>
-		<h3 class="mb-2 text-sm font-medium text-foreground">{$t('admin.import_section')}</h3>
-
-		<!-- File input -->
-		<div class="mb-4">
-			<label for="import-file" class="mb-1 block text-sm text-muted-foreground">
-				{$t('admin.import_select_file')}
-			</label>
-			<input
-				bind:this={fileInput}
-				id="import-file"
-				type="file"
-				accept=".json,application/json"
-				onchange={handleFileSelect}
-				class="block w-full text-sm text-foreground file:mr-4 file:rounded-md file:border file:border-border file:bg-background file:px-4 file:py-2 file:text-sm file:font-medium file:text-foreground hover:file:bg-muted"
-			/>
-		</div>
-
-		<!-- Preview -->
-		{#if previewData}
-			<div class="mb-4">
-				<label class="mb-1 block text-sm font-medium text-foreground">{$t('admin.import_preview')}</label>
-				<pre class="max-h-64 overflow-auto rounded-md border border-border bg-background p-3 font-mono text-xs text-foreground">{previewData}</pre>
-			</div>
-		{/if}
-
-		<!-- Mode selector -->
-		{#if parsedData}
-			<div class="mb-4">
-				<label for="import-mode" class="mb-1 block text-sm font-medium text-foreground">
-					{$t('admin.import_mode_label')}
-				</label>
-				<select
-					id="import-mode"
-					bind:value={importMode}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground sm:w-auto"
-				>
-					<option value="skip">{$t('admin.import_mode_skip')}</option>
-					<option value="overwrite">{$t('admin.import_mode_overwrite')}</option>
-				</select>
-			</div>
-
-			<button
-				type="button"
-				onclick={handleImport}
-				disabled={importing}
-				class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-			>
-				{importing ? $t('admin.import_importing') : $t('admin.import_button')}
-			</button>
-		{/if}
-	</div>
-
-	<!-- Status message -->
-	{#if statusMessage}
-		<div class="mt-4 rounded-md p-3 text-sm {statusType === 'success' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'}">
-			{statusMessage}
-		</div>
-	{/if}
-</section>

src/lib/components/admin/PermissionEditor.svelte

@@ -133,6 +133,7 @@
 		<h3 class="mb-3 text-sm font-semibold text-card-foreground">{$t('admin.perm_title')}</h3>
 		<div class="grid grid-cols-1 gap-3 sm:grid-cols-5">
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity_type')}</label>
 				<IconGrid
 					items={entityTypeItems}
@@ -142,6 +143,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_entity')}</label>
 				<EntityPicker
 					items={entityPickerItems}
@@ -151,6 +153,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target_type')}</label>
 				<IconGrid
 					items={targetTypeItems}
@@ -160,6 +163,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_target')}</label>
 				<EntityPicker
 					items={targetPickerItems}
@@ -169,6 +173,7 @@
 				/>
 			</div>
 			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label class="mb-1 block text-xs text-muted-foreground">{$t('admin.perm_level')}</label>
 				<div class="flex gap-1">
 					<div class="flex-1">
@@ -193,7 +198,7 @@
 
 	<!-- Existing permissions list -->
 	{#if permissions.length > 0}
-		<div class="overflow-x-auto rounded-lg border border-border">
+		<div class="overflow-x-auto rounded-2xl border border-border bg-card shadow-[var(--shadow-soft)]">
 			<table class="w-full text-left text-sm">
 				<thead class="border-b border-border bg-muted/50">
 					<tr>

src/lib/components/admin/SettingsForm.svelte

@@ -55,7 +55,7 @@
 					id="authMode"
 					name="authMode"
 					bind:value={$form.authMode}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 				>
 					<option value="local">{$t('admin.auth_local')}</option>
 					<option value="oauth">{$t('admin.auth_oauth')}</option>
@@ -92,7 +92,7 @@
 					name="oauthClientId"
 					type="text"
 					bind:value={$form.oauthClientId}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 					placeholder={$t('admin.oauth_client_id_placeholder')}
 				/>
 			</div>
@@ -103,7 +103,7 @@
 					name="oauthClientSecret"
 					type="password"
 					bind:value={$form.oauthClientSecret}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 					placeholder={$t('admin.oauth_client_secret_placeholder')}
 				/>
 			</div>
@@ -114,7 +114,7 @@
 					name="oauthDiscoveryUrl"
 					type="url"
 					bind:value={$form.oauthDiscoveryUrl}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 					placeholder={$t('admin.oauth_discovery_url_placeholder')}
 				/>
 				{#if $errors.oauthDiscoveryUrl}<span class="text-xs text-destructive">{$errors.oauthDiscoveryUrl}</span>{/if}
@@ -124,12 +124,12 @@
 					type="button"
 					onclick={testOAuthConnection}
 					disabled={oauthTesting}
-					class="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+					class="rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{oauthTesting ? $t('admin.oauth_testing') : $t('admin.oauth_test')}
 				</button>
 				{#if oauthTestResult}
-					<span class="ml-3 text-sm {oauthTestSuccess ? 'text-green-600 dark:text-green-400' : 'text-destructive'}">
+					<span class="ml-3 text-sm {oauthTestSuccess ? 'text-status-online-ink dark:text-status-online-ink' : 'text-destructive'}">
 						{oauthTestResult}
 					</span>
 				{/if}
@@ -147,7 +147,7 @@
 					id="defaultTheme"
 					name="defaultTheme"
 					bind:value={$form.defaultTheme}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 				>
 					<option value="dark">{$t('theme.dark')}</option>
 					<option value="light">{$t('theme.light')}</option>
@@ -161,8 +161,8 @@
 						name="defaultPrimaryColor"
 						type="text"
 						bind:value={$form.defaultPrimaryColor}
-						class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
-						placeholder="#6366f1"
+						class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
+						placeholder="#e8754f"
 						pattern="^#[0-9a-fA-F]{6}$"
 					/>
 					{#if $form.defaultPrimaryColor}
@@ -188,7 +188,7 @@
 				name="healthcheckDefaults"
 				bind:value={$form.healthcheckDefaults}
 				rows="4"
-				class="w-full rounded-md border border-input bg-background px-3 py-2 font-mono text-sm text-foreground"
+				class="w-full rounded-xl border border-input bg-background px-3 py-2 font-mono text-sm text-foreground"
 				placeholder={'{"interval": 300, "timeout": 5000, "method": "GET"}'}
 			></textarea>
 			{#if $errors.healthcheckDefaults}<span class="text-xs text-destructive">{$errors.healthcheckDefaults}</span>{/if}
@@ -206,7 +206,7 @@
 					id="dockerSocketPath"
 					type="text"
 					bind:value={dockerSocketPath}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 					placeholder="/var/run/docker.sock"
 				/>
 				<p class="mt-1 text-xs text-muted-foreground">{$t('admin.discovery_docker_socket_hint')}</p>
@@ -217,7 +217,7 @@
 					id="traefikApiUrl"
 					type="url"
 					bind:value={traefikApiUrl}
-					class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
+					class="w-full rounded-xl border border-input bg-background px-3 py-2 text-sm text-foreground"
 					placeholder="http://traefik:8080"
 				/>
 				<p class="mt-1 text-xs text-muted-foreground">{$t('admin.discovery_traefik_url_hint')}</p>
@@ -244,7 +244,7 @@
 	<div class="flex items-center gap-3">
 		<button
 			type="submit"
-			class="rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
+			class="rounded-xl bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
 			disabled={$delayed}
 		>
 			{$delayed ? $t('admin.saving_settings') : $t('admin.save_settings')}